diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000000..af8ec52c7f
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,14 @@
+# Optional values for development through the legacy root docker-compose.yml.
+# Copy this file to .env. Database authentication remains the safe default.
+# Never commit an institution credential or a populated .env file.
+DF_AUTH_METHOD=database
+
+# To exercise AAF locally, obtain a dedicated non-production registration from
+# the identity owner, change DF_AUTH_METHOD to aaf, and fill every field below.
+DF_AAF_ISSUER_URL=
+DF_AAF_AUDIENCE_URL=http://localhost:4200
+DF_AAF_CALLBACK_URL=http://localhost:4200/api/auth/jwt
+DF_AAF_IDENTITY_PROVIDER_URL=
+DF_AAF_UNIQUE_URL=
+DF_AAF_AUTH_SIGNOUT_URL=
+DF_SECRET_KEY_AAF=
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 06b5afd845..0000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-build/
-coverage/
-dist/
-docs/
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 9bf5e49a86..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
-  "root": true,
-  "overrides": [
-    {
-      "files": ["*.ts"],
-      "parserOptions": {
-        "project": ["tsconfig.*?.json"],
-        "createDefaultProgram": true
-      },
-      "plugins": ["@typescript-eslint"],
-      "extends": [
-        "plugin:@angular-eslint/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:prettier/recommended"
-      ],
-      "env": {
-        "browser": true,
-        "jasmine": true
-      },
-      "rules": {
-        "@typescript-eslint/no-unused-vars": [
-          "warn",
-          {
-            "args": "all",
-            "argsIgnorePattern": "^_",
-            "caughtErrors": "all",
-            "caughtErrorsIgnorePattern": "^_",
-            "destructuredArrayIgnorePattern": "^_",
-            "varsIgnorePattern": "^_",
-            "ignoreRestSiblings": true
-          }
-        ],
-        "@angular-eslint/no-empty-lifecycle-method": "warn",
-        "@angular-eslint/component-class-suffix": "warn",
-        "@angular-eslint/no-output-on-prefix": "warn",
-        "@typescript-eslint/no-inferrable-types": "off",
-        "@angular-eslint/directive-selector": [
-          "warn",
-          {
-            "type": "attribute",
-            "prefix": "f",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "warn",
-          {
-            "type": "element",
-            "prefix": "f",
-            "style": "kebab-case"
-          }
-        ],
-        "@typescript-eslint/ban-types": "warn",
-        "@typescript-eslint/no-empty-function": "warn",
-        "@typescript-eslint/no-inferrable-types": "off",
-        "@typescript-eslint/no-this-alias": "warn",
-        "no-dupe-class-members": "warn",
-        "no-prototype-builtins": "warn",
-        "no-unused-vars": "off",
-        "no-useless-escape": "warn",
-        "no-var": "warn",
-        "quotes": [
-          "warn",
-          "single",
-          {
-            "allowTemplateLiterals": true
-          }
-        ],
-        "prefer-const": "warn",
-        "prettier/prettier": "warn"
-      }
-    },
-    {
-      "files": ["*.component.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
-      "rules": {
-        "max-len": [
-          "warn",
-          {
-            "code": 140
-          }
-        ],
-        "prettier/prettier": "warn"
-      }
-    },
-    {
-      "files": ["*.component.ts"],
-      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
-    }
-  ]
-}
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 0000000000..260dc5e2fd
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1,5 @@
+# 8 June 2026: Repository-wide formatting and lint configuration
+26b4962794d16e90587fb179aab966b39459050c
+
+# 17 June 2026: Repository-wide sorting of HTML attributes
+1ffc7ad7b9dc18f22be32bf6313bfde97957dd2f
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..d56abbf304
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto eol=lf
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000000..1cc4d7d71b
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,5 @@
+# The App key is available only to the default-branch policy job. Keep every
+# workflow and the evaluator itself under lead review.
+/.github/workflows/ @ontrack-features-t2-2026/ontrack-leads
+/.github/review-policy/ @ontrack-features-t2-2026/ontrack-leads
+/.github/CODEOWNERS @ontrack-features-t2-2026/ontrack-leads
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 8abca405fb..5c8d9a0ceb 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -9,3 +9,7 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "daily"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
diff --git a/.github/review-policy/README.md b/.github/review-policy/README.md
new file mode 100644
index 0000000000..bcf9e76f76
--- /dev/null
+++ b/.github/review-policy/README.md
@@ -0,0 +1,51 @@
+# OnTrack pull-request review policy
+
+The required status context `ontrack/review-policy` passes when the current pull
+request head has either:
+
+- one approval from a current `ontrack-leads` member; or
+- two approvals from distinct current `ontrack-contributors` members.
+
+Approvals from the pull-request author, bots, stale commits, dismissed reviews,
+or reviewers whose latest actionable review requests changes do not count.
+
+## Security model
+
+`ontrack-review-policy-signal.yml` is unprivileged and never checks out pull-request
+code. A completed signal wakes `ontrack-review-policy.yml` through `workflow_run`.
+The evaluator workflow checks out only this directory from the protected default
+branch, then mints a short-lived token for the organization-owned GitHub App.
+
+The App is installed only on the three OnTrack Doubtfire repositories and has:
+
+- organization Members: read;
+- repository Metadata: read (mandatory);
+- repository Pull requests: read; and
+- repository Commit statuses: write.
+
+The App has no contents, workflow, administration, merge, or webhook permission.
+Its private key is held in `ONTRACK_REVIEW_APP_PRIVATE_KEY` in the
+`ontrack-review-policy` environment, which only permits the protected `11.0.x`
+branch. Its numeric App ID is held in `ONTRACK_REVIEW_APP_ID`.
+
+The evaluator reports on the pull-request head commit. GitHub gates on the test merge
+commit whenever that commit carries a status and only falls back to the head when it
+carries none, so reporting on the test merge commit would move the merge gate onto a
+commit that carries none of this repository's other checks. The head is also stable,
+where the test merge commit is recomputed every time the base branch moves.
+A five-minute reconciliation covers team membership and base-branch changes that
+do not emit a pull-request review event. Unchanged results are not republished,
+which avoids GitHub's per-commit status limit.
+
+## Ruleset integration
+
+Keep the native one-overall-approval rule, stale-review dismissal, and conversation
+resolution. Require `ontrack/review-policy` with the OnTrack Review Policy App as
+its expected source. Remove the native `ontrack-leads` required-reviewer entry only
+after the App status has been observed and made required; otherwise GitHub combines
+the native team rules with AND semantics.
+
+Changes to any workflow, the evaluator, or CODEOWNERS should continue to require
+one `ontrack-leads` approval through a path-specific native reviewer rule. This is
+necessary because any default-branch workflow could otherwise reference the App's
+environment secret.
diff --git a/.github/review-policy/evaluate.mjs b/.github/review-policy/evaluate.mjs
new file mode 100644
index 0000000000..f9dfa6fc45
--- /dev/null
+++ b/.github/review-policy/evaluate.mjs
@@ -0,0 +1,529 @@
+import { createSign } from 'node:crypto';
+import { readFile } from 'node:fs/promises';
+import { pathToFileURL } from 'node:url';
+
+const API_VERSION = '2022-11-28';
+const POLICY_CONTEXT = 'ontrack/review-policy';
+const APP_BOT_LOGIN = 'ontrack-review-policy-t2-2026[bot]';
+const PAGE_SIZE = 100;
+const MAX_PAGES = 50;
+const ALLOWED_REPOSITORIES = new Set([
+  'doubtfire-deploy',
+  'doubtfire-api',
+  'doubtfire-web',
+]);
+
+function normalizeLogin(login) {
+  return String(login || '').toLowerCase();
+}
+
+function encodeJson(value) {
+  return Buffer.from(JSON.stringify(value)).toString('base64url');
+}
+
+export function createAppJwt(appId, privateKey, nowSeconds = Math.floor(Date.now() / 1000)) {
+  if (!/^\d+$/.test(String(appId))) {
+    throw new Error('ONTRACK_REVIEW_APP_ID must be a numeric GitHub App ID.');
+  }
+  if (!String(privateKey).includes('PRIVATE KEY')) {
+    throw new Error('ONTRACK_REVIEW_APP_PRIVATE_KEY is missing or invalid.');
+  }
+
+  const header = encodeJson({ alg: 'RS256', typ: 'JWT' });
+  const payload = encodeJson({
+    iat: nowSeconds - 60,
+    exp: nowSeconds + 540,
+    iss: String(appId),
+  });
+  const unsigned = `${header}.${payload}`;
+  const signer = createSign('RSA-SHA256');
+  signer.update(unsigned);
+  signer.end();
+  const signature = signer.sign(privateKey).toString('base64url');
+  return `${unsigned}.${signature}`;
+}
+
+export function approvedReviewers(reviews, headSha, authorLogin) {
+  const author = normalizeLogin(authorLogin);
+  const latestActionableReview = new Map();
+  const actionableStates = new Set(['APPROVED', 'CHANGES_REQUESTED', 'DISMISSED']);
+
+  const ordered = [...reviews].sort((left, right) => {
+    const leftTime = Date.parse(left.submitted_at || 0) || 0;
+    const rightTime = Date.parse(right.submitted_at || 0) || 0;
+    return leftTime - rightTime || Number(left.id || 0) - Number(right.id || 0);
+  });
+
+  for (const review of ordered) {
+    const login = normalizeLogin(review.user?.login);
+    const state = String(review.state || '').toUpperCase();
+    if (!login || login === author || review.user?.type === 'Bot') {
+      continue;
+    }
+    // A comment after an approval does not revoke the approval.
+    if (!actionableStates.has(state)) {
+      continue;
+    }
+    latestActionableReview.set(login, review);
+  }
+
+  return new Set(
+    [...latestActionableReview.entries()]
+      .filter(([, review]) => (
+        String(review.state || '').toUpperCase() === 'APPROVED'
+        && review.commit_id === headSha
+      ))
+      .map(([login]) => login),
+  );
+}
+
+export function evaluatePolicy(approved, leadMembers, contributorMembers) {
+  const leads = new Set([...leadMembers].map(normalizeLogin));
+  const contributors = new Set([...contributorMembers].map(normalizeLogin));
+  let leadApprovals = 0;
+  let contributorApprovals = 0;
+
+  for (const login of approved) {
+    const normalized = normalizeLogin(login);
+    if (leads.has(normalized)) {
+      leadApprovals += 1;
+    }
+    if (contributors.has(normalized)) {
+      contributorApprovals += 1;
+    }
+  }
+
+  return {
+    leadApprovals,
+    contributorApprovals,
+    passes: leadApprovals >= 1 || contributorApprovals >= 2,
+  };
+}
+
+export function pullRequestNumbersFromWorkflowRun(workflowRun) {
+  const numbers = new Set();
+  for (const pullRequest of workflowRun?.pull_requests || []) {
+    const number = Number(pullRequest?.number);
+    if (Number.isSafeInteger(number) && number > 0) {
+      numbers.add(number);
+    }
+  }
+
+  const title = String(workflowRun?.display_title || '');
+  const titleMatch = title.match(/\bPR #([1-9]\d{0,9})\b/);
+  if (titleMatch) {
+    const number = Number(titleMatch[1]);
+    if (Number.isSafeInteger(number)) {
+      numbers.add(number);
+    }
+  }
+  return [...numbers];
+}
+
+function safeError(error) {
+  return String(error?.message || error || 'Unknown error')
+    .replace(/gh[opsu]_[A-Za-z0-9_]+/g, '[redacted token]')
+    .replace(
+      /-----BEGIN [^-]*PRIVATE KEY-----[\s\S]*?-----END [^-]*PRIVATE KEY-----/g,
+      '[redacted private key]',
+    )
+    .slice(0, 500);
+}
+
+function repositoryParts(repository) {
+  const match = String(repository || '').match(/^([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)$/);
+  if (!match) {
+    throw new Error('GITHUB_REPOSITORY is invalid.');
+  }
+  return { owner: match[1], repo: match[2] };
+}
+
+class GitHubApi {
+  constructor(apiUrl, token) {
+    this.apiUrl = String(apiUrl || 'https://api.github.com').replace(/\/$/, '');
+    this.token = token;
+  }
+
+  async request(path, { method = 'GET', body, expected = [200] } = {}) {
+    const response = await fetch(`${this.apiUrl}${path}`, {
+      method,
+      headers: {
+        Accept: 'application/vnd.github+json',
+        Authorization: `Bearer ${this.token}`,
+        'User-Agent': 'ontrack-review-policy',
+        'X-GitHub-Api-Version': API_VERSION,
+      },
+      body: body === undefined ? undefined : JSON.stringify(body),
+    });
+
+    if (!expected.includes(response.status)) {
+      const requestId = response.headers.get('x-github-request-id');
+      throw new Error(
+        `GitHub API ${method} ${path} returned ${response.status}`
+        + (requestId ? ` (request ${requestId})` : ''),
+      );
+    }
+
+    if (response.status === 204) {
+      return null;
+    }
+    const text = await response.text();
+    return text ? JSON.parse(text) : null;
+  }
+
+  async paginate(path) {
+    const items = [];
+    const separator = path.includes('?') ? '&' : '?';
+    for (let page = 1; page <= MAX_PAGES; page += 1) {
+      const batch = await this.request(
+        `${path}${separator}per_page=${PAGE_SIZE}&page=${page}`,
+      );
+      if (!Array.isArray(batch)) {
+        throw new Error(`Expected a list from GitHub API path ${path}.`);
+      }
+      items.push(...batch);
+      if (batch.length < PAGE_SIZE) {
+        return items;
+      }
+    }
+    throw new Error(`GitHub API pagination exceeded ${MAX_PAGES} pages for ${path}.`);
+  }
+}
+
+async function mintInstallationToken({ apiUrl, owner, repo, appId, privateKey }) {
+  const appJwt = createAppJwt(appId, privateKey);
+  const appApi = new GitHubApi(apiUrl, appJwt);
+  const installation = await appApi.request(
+    `/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/installation`,
+  );
+  const tokenResponse = await appApi.request(
+    `/app/installations/${installation.id}/access_tokens`,
+    {
+      method: 'POST',
+      expected: [201],
+      body: {
+        repositories: [repo],
+        permissions: {
+          members: 'read',
+          pull_requests: 'read',
+          statuses: 'write',
+        },
+      },
+    },
+  );
+
+  if (!tokenResponse?.token) {
+    throw new Error('GitHub did not return an installation access token.');
+  }
+  // Generated tokens are not repository secrets, so mask them explicitly.
+  console.log(`::add-mask::${tokenResponse.token}`);
+  return tokenResponse.token;
+}
+
+async function teamMembers(api, owner, teamSlug) {
+  const members = await api.paginate(
+    `/orgs/${encodeURIComponent(owner)}/teams/${encodeURIComponent(teamSlug)}/members`,
+  );
+  return new Set(members.map((member) => normalizeLogin(member.login)));
+}
+
+async function openPullRequests(api, owner, repo) {
+  return api.paginate(
+    `/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/pulls?state=open`,
+  );
+}
+
+async function pullRequest(api, owner, repo, number) {
+  return api.request(
+    `/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/pulls/${number}`,
+  );
+}
+
+async function reviewsForPullRequest(api, owner, repo, number) {
+  return api.paginate(
+    `/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/pulls/${number}/reviews`,
+  );
+}
+
+function runUrl(repository, runId) {
+  return `https://github.com/${repository}/actions/runs/${runId}`;
+}
+
+async function setPolicyStatus(api, owner, repo, sha, state, description, targetUrl) {
+  if (!/^[0-9a-f]{40}$/i.test(String(sha || ''))) {
+    throw new Error('Cannot publish the review policy without a valid commit SHA.');
+  }
+  const clippedDescription = description.slice(0, 140);
+  try {
+    const statuses = await api.paginate(
+      `/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}`
+      + `/commits/${encodeURIComponent(sha)}/statuses`,
+    );
+    const latest = statuses.find((status) => (
+      status.context === POLICY_CONTEXT
+      && normalizeLogin(status.creator?.login) === APP_BOT_LOGIN
+    ));
+    if (latest?.state === state && latest?.description === clippedDescription) {
+      return false;
+    }
+  } catch (error) {
+    // Deduplication is only an optimization. Always attempt the fail-closed write
+    // when status history cannot be read but the status endpoint may still work.
+    console.warn(`::warning::Status deduplication failed: ${safeError(error)}`);
+  }
+
+  await api.request(
+    `/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/statuses/${sha}`,
+    {
+      method: 'POST',
+      expected: [201],
+      body: {
+        state,
+        context: POLICY_CONTEXT,
+        description: clippedDescription,
+        target_url: targetUrl,
+      },
+    },
+  );
+  return true;
+}
+
+export { setPolicyStatus };
+
+// Report on the pull-request head. GitHub gates on the test merge commit whenever that
+// commit carries a status and only falls back to the head when it carries none, and the
+// test merge commit carries none of this repository's checks. Reporting there would move
+// the whole merge gate onto a commit that CI never sees. The head is also stable while
+// the test merge commit is recomputed every time the base branch moves.
+export function statusShaForPullRequest(pullRequestToReport) {
+  return pullRequestToReport.head?.sha;
+}
+
+function reviewDigest(reviews) {
+  return reviews
+    .map((review) => (
+      `${review.id}:${review.state}:${review.commit_id}:`
+      + `${review.submitted_at}:${review.user?.id}:${review.user?.login}`
+    ))
+    .sort()
+    .join('|');
+}
+
+function samePullRequestVersion(left, right) {
+  return (
+    left.state === right.state
+    && left.draft === right.draft
+    && left.head?.sha === right.head?.sha
+    && left.base?.ref === right.base?.ref
+    && left.base?.sha === right.base?.sha
+    && left.mergeable === right.mergeable
+  );
+}
+
+async function evaluatePullRequest({
+  api,
+  owner,
+  repo,
+  pullRequest: current,
+  leads,
+  contributors,
+  targetUrl,
+  attempt = 0,
+}) {
+  // Re-fetch before evaluating so a delayed workflow_run never trusts its event's
+  // old head or merge SHA.
+  current = await pullRequest(api, owner, repo, current.number);
+  if (current.state !== 'open') {
+    return;
+  }
+
+  const statusSha = statusShaForPullRequest(current);
+  if (current.draft) {
+    await setPolicyStatus(
+      api,
+      owner,
+      repo,
+      statusSha,
+      'pending',
+      'Waiting for the pull request to be marked ready for review',
+      targetUrl,
+    );
+    console.log(`PR #${current.number}: draft`);
+    return;
+  }
+
+  const firstReviews = await reviewsForPullRequest(api, owner, repo, current.number);
+  const checked = await pullRequest(api, owner, repo, current.number);
+  const secondReviews = await reviewsForPullRequest(api, owner, repo, current.number);
+  const live = await pullRequest(api, owner, repo, current.number);
+  if (checked.state !== 'open' || live.state !== 'open') {
+    return;
+  }
+  const liveStatusSha = statusShaForPullRequest(live);
+  if (
+    !samePullRequestVersion(current, checked)
+    || !samePullRequestVersion(checked, live)
+    || reviewDigest(firstReviews) !== reviewDigest(secondReviews)
+    || liveStatusSha !== statusSha
+  ) {
+    if (attempt >= 1) {
+      throw new Error('Pull request changed repeatedly during evaluation.');
+    }
+    console.log(`PR #${current.number}: changed during evaluation; retrying once`);
+    return evaluatePullRequest({
+      api,
+      owner,
+      repo,
+      pullRequest: live,
+      leads,
+      contributors,
+      targetUrl,
+      attempt: attempt + 1,
+    });
+  }
+
+  const approved = approvedReviewers(
+    secondReviews,
+    live.head.sha,
+    live.user?.login,
+  );
+  const result = evaluatePolicy(approved, leads, contributors);
+  const state = result.passes ? 'success' : 'pending';
+  const description = result.passes
+    ? `Passed: ${result.leadApprovals}/1 lead or ${result.contributorApprovals}/2 contributors`
+    : `Waiting: ${result.leadApprovals}/1 lead or ${result.contributorApprovals}/2 contributors`;
+
+  await setPolicyStatus(api, owner, repo, liveStatusSha, state, description, targetUrl);
+  console.log(
+    `PR #${current.number}: lead=${result.leadApprovals}, `
+    + `contributors=${result.contributorApprovals}, status=${state}`,
+  );
+}
+
+async function eventPayload() {
+  const payloadPath = process.env.GITHUB_EVENT_PATH;
+  if (!payloadPath) {
+    return {};
+  }
+  return JSON.parse(await readFile(payloadPath, 'utf8'));
+}
+
+async function pullRequestsToEvaluate(api, owner, repo, eventName, payload) {
+  const open = await openPullRequests(api, owner, repo);
+  if (eventName === 'workflow_run') {
+    // Treat workflow_run fields only as untrusted locators. Match them against
+    // live open PRs fetched with the App token before evaluating anything.
+    const numbers = new Set(pullRequestNumbersFromWorkflowRun(payload.workflow_run));
+    const headSha = payload.workflow_run?.head_sha;
+    const linked = open.filter((candidate) => (
+      numbers.has(candidate.number)
+      || candidate.head?.sha === headSha
+      || candidate.merge_commit_sha === headSha
+    ));
+    return linked.length > 0 ? linked : open;
+  }
+  return open;
+}
+
+export async function main() {
+  const repository = process.env.GITHUB_REPOSITORY;
+  const { owner, repo } = repositoryParts(repository);
+  if (owner !== 'ontrack-features-t2-2026' || !ALLOWED_REPOSITORIES.has(repo)) {
+    throw new Error('This evaluator only runs for the three approved OnTrack repositories.');
+  }
+
+  const appId = process.env.ONTRACK_REVIEW_APP_ID;
+  const privateKey = process.env.ONTRACK_REVIEW_APP_PRIVATE_KEY;
+  const apiUrl = process.env.GITHUB_API_URL || 'https://api.github.com';
+  const token = await mintInstallationToken({
+    apiUrl,
+    owner,
+    repo,
+    appId,
+    privateKey,
+  });
+  const api = new GitHubApi(apiUrl, token);
+  const payload = await eventPayload();
+  const eventName = process.env.GITHUB_EVENT_NAME || '';
+  const pullRequests = await pullRequestsToEvaluate(api, owner, repo, eventName, payload);
+
+  if (pullRequests.length === 0) {
+    console.log('No open pull requests require review-policy evaluation.');
+    return;
+  }
+
+  const leadTeam = process.env.ONTRACK_LEAD_TEAM || 'ontrack-leads';
+  const contributorTeam = process.env.ONTRACK_CONTRIBUTOR_TEAM || 'ontrack-contributors';
+  let leads;
+  let contributors;
+  try {
+    [leads, contributors] = await Promise.all([
+      teamMembers(api, owner, leadTeam),
+      teamMembers(api, owner, contributorTeam),
+    ]);
+  } catch (error) {
+    const targetUrl = runUrl(repository, process.env.GITHUB_RUN_ID);
+    for (const current of pullRequests) {
+      try {
+        const sha = statusShaForPullRequest(current);
+        await setPolicyStatus(
+          api,
+          owner,
+          repo,
+          sha,
+          'error',
+          'OnTrack team membership could not be verified',
+          targetUrl,
+        );
+      } catch (statusError) {
+        console.error(`::error::${safeError(statusError)}`);
+      }
+    }
+    throw error;
+  }
+
+  const targetUrl = runUrl(repository, process.env.GITHUB_RUN_ID);
+  const failures = [];
+  for (const current of pullRequests) {
+    try {
+      await evaluatePullRequest({
+        api,
+        owner,
+        repo,
+        pullRequest: current,
+        leads,
+        contributors,
+        targetUrl,
+      });
+    } catch (error) {
+      failures.push(error);
+      try {
+        const sha = statusShaForPullRequest(current);
+        await setPolicyStatus(
+          api,
+          owner,
+          repo,
+          sha,
+          'error',
+          'OnTrack review policy evaluation failed',
+          targetUrl,
+        );
+      } catch (statusError) {
+        console.error(`::error::${safeError(statusError)}`);
+      }
+      console.error(`::error::PR #${current.number}: ${safeError(error)}`);
+    }
+  }
+
+  if (failures.length > 0) {
+    throw new Error(`${failures.length} pull-request evaluation(s) failed.`);
+  }
+}
+
+const invokedPath = process.argv[1] ? pathToFileURL(process.argv[1]).href : '';
+if (import.meta.url === invokedPath) {
+  main().catch((error) => {
+    console.error(`::error::${safeError(error)}`);
+    process.exitCode = 1;
+  });
+}
diff --git a/.github/review-policy/evaluate.test.mjs b/.github/review-policy/evaluate.test.mjs
new file mode 100644
index 0000000000..0c093524a5
--- /dev/null
+++ b/.github/review-policy/evaluate.test.mjs
@@ -0,0 +1,236 @@
+import assert from 'node:assert/strict';
+import { generateKeyPairSync, verify } from 'node:crypto';
+import { test } from 'node:test';
+
+import {
+  approvedReviewers,
+  createAppJwt,
+  evaluatePolicy,
+  pullRequestNumbersFromWorkflowRun,
+  setPolicyStatus,
+  statusShaForPullRequest,
+} from './evaluate.mjs';
+
+function review({
+  id,
+  login,
+  state = 'APPROVED',
+  commit = 'head',
+  submitted = `2026-08-24T00:00:${String(id).padStart(2, '0')}Z`,
+  type = 'User',
+}) {
+  return {
+    id,
+    state,
+    commit_id: commit,
+    submitted_at: submitted,
+    user: { login, type },
+  };
+}
+
+test('one lead approval passes', () => {
+  const result = evaluatePolicy(
+    new Set(['lead']),
+    new Set(['lead']),
+    new Set(['lead', 'contributor']),
+  );
+  assert.equal(result.passes, true);
+  assert.equal(result.leadApprovals, 1);
+});
+
+test('two distinct contributor approvals pass', () => {
+  const result = evaluatePolicy(
+    new Set(['contributor-a', 'contributor-b']),
+    new Set(['lead']),
+    new Set(['lead', 'contributor-a', 'contributor-b']),
+  );
+  assert.equal(result.passes, true);
+  assert.equal(result.contributorApprovals, 2);
+});
+
+test('one contributor approval does not pass', () => {
+  const result = evaluatePolicy(
+    new Set(['contributor-a']),
+    new Set(['lead']),
+    new Set(['lead', 'contributor-a']),
+  );
+  assert.equal(result.passes, false);
+});
+
+test('duplicate approvals from one reviewer count once', () => {
+  const approved = approvedReviewers([
+    review({ id: 1, login: 'Contributor-A' }),
+    review({ id: 2, login: 'contributor-a' }),
+  ], 'head', 'author');
+  assert.deepEqual([...approved], ['contributor-a']);
+});
+
+test('a later comment does not revoke an approval', () => {
+  const approved = approvedReviewers([
+    review({ id: 1, login: 'contributor-a' }),
+    review({ id: 2, login: 'contributor-a', state: 'COMMENTED' }),
+  ], 'head', 'author');
+  assert.deepEqual([...approved], ['contributor-a']);
+});
+
+test('a later changes-requested review revokes an approval', () => {
+  const approved = approvedReviewers([
+    review({ id: 1, login: 'contributor-a' }),
+    review({ id: 2, login: 'contributor-a', state: 'CHANGES_REQUESTED' }),
+  ], 'head', 'author');
+  assert.deepEqual([...approved], []);
+});
+
+test('stale, author, and bot approvals are ignored', () => {
+  const approved = approvedReviewers([
+    review({ id: 1, login: 'stale', commit: 'old-head' }),
+    review({ id: 2, login: 'author' }),
+    review({ id: 3, login: 'review-bot[bot]', type: 'Bot' }),
+  ], 'head', 'author');
+  assert.deepEqual([...approved], []);
+});
+
+test('workflow run PR numbers are deduplicated and validated', () => {
+  assert.deepEqual(
+    pullRequestNumbersFromWorkflowRun({
+      display_title: 'OnTrack review policy signal for PR #42',
+      pull_requests: [{ number: 42 }, { number: 17 }, { number: 0 }],
+    }),
+    [42, 17],
+  );
+});
+
+test('workflow run ignores unsafe or implausibly large PR numbers', () => {
+  assert.deepEqual(
+    pullRequestNumbersFromWorkflowRun({
+      display_title: 'OnTrack review policy signal for PR #12345678901',
+      pull_requests: [{ number: Number.MAX_SAFE_INTEGER + 1 }, { number: -4 }],
+    }),
+    [],
+  );
+});
+
+test('GitHub App JWT has a valid RSA signature and bounded lifetime', () => {
+  const { privateKey, publicKey } = generateKeyPairSync('rsa', { modulusLength: 2048 });
+  const privateKeyPem = privateKey.export({ type: 'pkcs8', format: 'pem' });
+  const now = 1_800_000_000;
+  const jwt = createAppJwt('4699573', privateKeyPem, now);
+  const [header, payload, signature] = jwt.split('.');
+  assert.equal(
+    verify(
+      'RSA-SHA256',
+      Buffer.from(`${header}.${payload}`),
+      publicKey,
+      Buffer.from(signature, 'base64url'),
+    ),
+    true,
+  );
+  const claims = JSON.parse(Buffer.from(payload, 'base64url').toString('utf8'));
+  assert.equal(claims.iss, '4699573');
+  assert.equal(claims.iat, now - 60);
+  assert.equal(claims.exp, now + 540);
+});
+
+test('unchanged App status is not republished and spoofed sources are ignored', async () => {
+  const posts = [];
+  const api = {
+    async paginate() {
+      return [
+        {
+          context: 'ontrack/review-policy',
+          state: 'success',
+          description: 'Passed',
+          creator: { login: 'not-the-policy-app[bot]' },
+        },
+        {
+          context: 'ontrack/review-policy',
+          state: 'pending',
+          description: 'Waiting',
+          creator: { login: 'ontrack-review-policy-t2-2026[bot]' },
+        },
+      ];
+    },
+    async request(path, options) {
+      posts.push({ path, options });
+      return {};
+    },
+  };
+
+  assert.equal(
+    await setPolicyStatus(
+      api,
+      'owner',
+      'repo',
+      'a'.repeat(40),
+      'pending',
+      'Waiting',
+      'https://example.test/run',
+    ),
+    false,
+  );
+  assert.equal(posts.length, 0);
+
+  assert.equal(
+    await setPolicyStatus(
+      api,
+      'owner',
+      'repo',
+      'a'.repeat(40),
+      'success',
+      'Passed',
+      'https://example.test/run',
+    ),
+    true,
+  );
+  assert.equal(posts.length, 1);
+});
+
+test('status-history failure does not suppress a fail-closed write', async () => {
+  const posts = [];
+  const warnings = [];
+  const originalWarn = console.warn;
+  console.warn = (message) => warnings.push(message);
+  const api = {
+    async paginate() {
+      throw new Error('history unavailable');
+    },
+    async request(path, options) {
+      posts.push({ path, options });
+      return {};
+    },
+  };
+
+  try {
+    assert.equal(
+      await setPolicyStatus(
+        api,
+        'owner',
+        'repo',
+        'b'.repeat(40),
+        'error',
+        'Evaluation failed',
+        'https://example.test/run',
+      ),
+      true,
+    );
+    assert.equal(posts.length, 1);
+    assert.equal(posts[0].options.body.state, 'error');
+    assert.equal(warnings.length, 1);
+  } finally {
+    console.warn = originalWarn;
+  }
+});
+
+test('the status is reported on the head, never on the test merge commit', () => {
+  assert.equal(
+    statusShaForPullRequest({ head: { sha: 'head' }, merge_commit_sha: 'test-merge' }),
+    'head',
+  );
+});
+
+test('a conflicting pull request with no test merge commit still reports on its head', () => {
+  assert.equal(
+    statusShaForPullRequest({ head: { sha: 'head' }, merge_commit_sha: null }),
+    'head',
+  );
+});
diff --git a/.github/workflows/actionlint.yml b/.github/workflows/actionlint.yml
new file mode 100644
index 0000000000..1bde0c0d6e
--- /dev/null
+++ b/.github/workflows/actionlint.yml
@@ -0,0 +1,25 @@
+name: Lint workflows
+on:
+  pull_request:
+    paths: [".github/workflows/**"]
+  push:
+    paths: [".github/workflows/**"]
+permissions:
+  contents: read
+jobs:
+  actionlint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+      - name: Install and run actionlint
+        env:
+          ACTIONLINT_SHA256: 8aca8db96f1b94770f1b0d72b6dddcb1ebb8123cb3712530b08cc387b349a3d8
+          ACTIONLINT_VERSION: 1.7.12
+        run: |
+          curl --fail --location --silent --show-error \
+            "https://github.com/rhysd/actionlint/releases/download/v${ACTIONLINT_VERSION}/actionlint_${ACTIONLINT_VERSION}_linux_amd64.tar.gz" \
+            --output actionlint.tar.gz
+          echo "${ACTIONLINT_SHA256}  actionlint.tar.gz" | sha256sum --check
+          tar -xzf actionlint.tar.gz actionlint
+          ./actionlint -color
diff --git a/.github/workflows/deployment-institution.yml b/.github/workflows/deployment-institution.yml
new file mode 100644
index 0000000000..d326026b90
--- /dev/null
+++ b/.github/workflows/deployment-institution.yml
@@ -0,0 +1,76 @@
+name: create-institution-deployment
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+permissions:
+  contents: read
+
+jobs:
+  docker-web-server:
+    if: github.repository_owner == 'doubtfire-lms'
+    environment: deployment-secrets
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6
+        with:
+          submodules: recursive
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@37fe631027851001ddb9b187196cc803df7f5f0e # v4
+      - name: Check custom institution deployment secrets
+        id: custom_config
+        env:
+          INSTITUTION_DOCKERHUB_USERNAME: ${{ secrets.INSTITUTION_DOCKERHUB_USERNAME }}
+          INSTITUTION_DOCKERHUB_TOKEN: ${{ secrets.INSTITUTION_DOCKERHUB_TOKEN }}
+          INSTITUTION: ${{ secrets.INSTITUTION }}
+        run: |
+          if [ -n "$INSTITUTION_DOCKERHUB_USERNAME" ] && [ -n "$INSTITUTION_DOCKERHUB_TOKEN" ] && [ -n "$INSTITUTION" ]; then
+            echo "enabled=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "enabled=false" >> "$GITHUB_OUTPUT"
+            echo "Skipping custom institution Docker publish because one or more institution secrets are not set."
+          fi
+      - name: Login to DockerHub
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4
+        if: github.event_name != 'pull_request' && steps.custom_config.outputs.enabled == 'true'
+        with:
+          username: ${{ secrets.INSTITUTION_DOCKERHUB_USERNAME }}
+          password: ${{ secrets.INSTITUTION_DOCKERHUB_TOKEN }}
+      - name: Setup meta for custom institution web server
+        id: docker_meta
+        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6
+        if: steps.custom_config.outputs.enabled == 'true'
+        with:
+          images: ${{ secrets.INSTITUTION_DOCKERHUB_USERNAME }}/${{ secrets.INSTITUTION }}
+          tags: |
+            type=ref,event=tag
+            type=ref,event=branch
+            type=semver,pattern=prod-{{version}}
+            type=semver,pattern=prod-{{major}}.{{minor}}
+            type=semver,pattern=prod-{{major}}
+      - name: Build and push custom web server
+        id: docker_build
+        uses: docker/build-push-action@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7
+        if: steps.custom_config.outputs.enabled == 'true'
+        with:
+          file: deploy.Dockerfile
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
+          sbom: true
+          provenance: mode=max
+          build-args: |
+            SENTRY_DSN=${{ secrets.SENTRY_DSN }}
+            SENTRY_ORG=${{ secrets.SENTRY_ORG }}
+            SENTRY_PROJECT=${{ secrets.SENTRY_PROJECT }}
+            SENTRY_RELEASE=${{ github.ref_name }}
+            SENTRY_DIST=${{ github.run_number }}
+            UPLOAD_SENTRY_SOURCEMAPS=true
+          secrets: |
+            sentry_auth_token=${{ secrets.SENTRY_AUTH_TOKEN }}
+      - name: Image digest
+        if: steps.custom_config.outputs.enabled == 'true'
+        run: echo ${{ steps.docker_build.outputs.digest }}
diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
index 124fe4c2ae..507dfb6c2a 100644
--- a/.github/workflows/deployment.yml
+++ b/.github/workflows/deployment.yml
@@ -10,56 +10,60 @@ on:
   # deployment:
   # workflow_dispatch:
 jobs:
-  docker-deploy-development-image:
-    if: github.repository_owner == 'doubtfire-lms'
-    environment: deployment-secrets
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Login to DockerHub
-        uses: docker/login-action@v3
-        if: github.event_name != 'pull_request'
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Setup meta for development image
-        id: docker_meta
-        uses: docker/metadata-action@v5
-        with:
-          images: lmsdoubtfire/doubtfire-web
-          tags: |
-            type=semver,pattern={{major}}.{{minor}}.x-dev
-      - name: Build and push web server
-        id: docker_build
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.docker_meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-      - name: Image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}
+  # docker-deploy-development-image:
+  #   if: github.repository_owner == 'doubtfire-lms'
+  #   environment: deployment-secrets
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout code
+  #       uses: actions/checkout@v4
+  #       with:
+  #         submodules: recursive
+  #     - name: Set up Docker Buildx
+  #       uses: docker/setup-buildx-action@v3
+  #     - name: Login to DockerHub
+  #       uses: docker/login-action@v3
+  #       if: github.event_name != 'pull_request'
+  #       with:
+  #         username: ${{ secrets.DOCKERHUB_USERNAME }}
+  #         password: ${{ secrets.DOCKERHUB_TOKEN }}
+  #     - name: Setup meta for development image
+  #       id: docker_meta
+  #       uses: docker/metadata-action@v5
+  #       with:
+  #         images: lmsdoubtfire/doubtfire-web
+  #         tags: |
+  #           type=semver,pattern={{major}}.{{minor}}.x-dev
+  #     - name: Build and push web server
+  #       id: docker_build
+  #       uses: docker/build-push-action@v5
+  #       with:
+  #         context: .
+  #         push: ${{ github.event_name != 'pull_request' }}
+  #         tags: ${{ steps.docker_meta.outputs.tags }}
+  #         labels: ${{ steps.docker_meta.outputs.labels }}
+  #     - name: Image digest
+  #       run: echo ${{ steps.docker_build.outputs.digest }}
   docker-web-server:
     if: github.repository_owner == 'doubtfire-lms'
     environment: deployment-secrets
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6
+        with:
+          submodules: recursive
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@37fe631027851001ddb9b187196cc803df7f5f0e # v4
       - name: Login to DockerHub
-        uses: docker/login-action@v3
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4
         if: github.event_name != 'pull_request'
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Setup meta for web server
         id: docker_meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6
         with:
           images: lmsdoubtfire/doubtfire-web
           tags: |
@@ -70,12 +74,14 @@ jobs:
             type=semver,pattern=prod-{{major}}
       - name: Build and push web server
         id: docker_build
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7
         with:
           file: deploy.Dockerfile
           context: .
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker_meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
+          sbom: true
+          provenance: mode=max
       - name: Image digest
         run: echo ${{ steps.docker_build.outputs.digest }}
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 0000000000..053acc04a6
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,23 @@
+name: Lint CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22]
+
+    steps:
+      - uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run typecheck
diff --git a/.github/workflows/nodejs-ci.yml b/.github/workflows/nodejs-ci.yml
index 3ef6877d51..dd2f6e9990 100644
--- a/.github/workflows/nodejs-ci.yml
+++ b/.github/workflows/nodejs-ci.yml
@@ -13,16 +13,16 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20]
+        node-version: [22]
     steps:
-      - uses: actions/checkout@v4
-      - uses: browser-actions/setup-chrome@latest
+      - uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6
+        with:
+          submodules: recursive
+      - uses: browser-actions/setup-chrome@48ad923757ca74d66703209fe939badbdf80f2f4 # v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm install -g @angular/cli
       - run: npm ci
-      # - run: npm run lint
-      # - run: npm run test:ci
+      - run: npm run verify:deployment-config
       - run: npm run build --if-present
diff --git a/.github/workflows/notify-teams-pr.yml b/.github/workflows/notify-teams-pr.yml
new file mode 100644
index 0000000000..164a85b240
--- /dev/null
+++ b/.github/workflows/notify-teams-pr.yml
@@ -0,0 +1,260 @@
+# NOTE ON THE BASE BRANCH. GitHub loads a `pull_request_target` workflow from the
+# repository DEFAULT branch (11.0.x), not from the pull request's base branch. That
+# changed on 2025-12-08. So this file is merged into 11.0.x deliberately, against the
+# usual CONTRIBUTING rule, and a copy on feature/notifications would be dead code.
+# It fires for pull requests into every base branch, which is what we want.
+name: Notify Teams when a pull request opens
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - ready_for_review
+      # - review_requested   # matches "reviewer alerts" most directly, but adds one
+      #                      # message per requested reviewer. Decide, do not default.
+
+# Removes all GITHUB_TOKEN scopes, which this workflow does not need. It does NOT
+# restrict secrets.* - the webhook is protected by the guards below, not by this.
+permissions: {}
+
+jobs:
+  notify-teams:
+    name: Post pull request notification to Teams
+    # The job guard makes the file inert if it ever travels to thoth-tech or
+    # doubtfire-lms. The step below decides who gets a notification: a pull request
+    # from a branch in this repository always does, and a fork pull request only if
+    # its author is in one of the two OnTrack teams.
+    if: github.repository_owner == 'ontrack-features-t2-2026'
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+
+    steps:
+      - name: Check pull request author team membership
+        id: team-membership
+        shell: bash
+        env:
+          TEAM_MEMBERSHIP_TOKEN: ${{ secrets.TEAM_MEMBERSHIP_ACCESS }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+          PR_HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
+          REPOSITORY: ${{ github.repository }}
+        run: |
+          set -euo pipefail
+
+          # A branch in this repository can only be pushed by someone who already
+          # has write access, so those pull requests need no lookup. That is also
+          # the only reason Dependabot notifies: dependabot[bot] is in neither
+          # team and 404s on both. The team check below is for fork pull requests,
+          # which is where the webhook actually needed protecting.
+          if [[ "${PR_HEAD_REPO}" == "${REPOSITORY}" ]]; then
+            echo "eligible=true" >> "${GITHUB_OUTPUT}"
+            exit 0
+          fi
+
+          if [[ -z "${TEAM_MEMBERSHIP_TOKEN:-}" ]]; then
+            echo "::error::The TEAM_MEMBERSHIP_ACCESS secret is not configured."
+            exit 1
+          fi
+
+          # The login goes into a URL path segment, so percent-encode it. curl also
+          # reads [ ] { } * in a URL as a glob and exits before sending anything, so
+          # --globoff below. Between them a login like dependabot[bot] is safe.
+          author_encoded="$(python3 -c 'import os, urllib.parse; print(urllib.parse.quote(os.environ["PR_AUTHOR"], safe=""))')"
+
+          for team in ontrack-contributors ontrack-leads; do
+            http_status="$(
+              curl \
+                --proto '=https' \
+                --tlsv1.2 \
+                --globoff \
+                --silent \
+                --show-error \
+                --connect-timeout 10 \
+                --max-time 30 \
+                --header 'Accept: application/vnd.github+json' \
+                --header "Authorization: Bearer ${TEAM_MEMBERSHIP_TOKEN}" \
+                --header 'X-GitHub-Api-Version: 2022-11-28' \
+                --output "${RUNNER_TEMP}/team-membership.json" \
+                --write-out '%{http_code}' \
+                "https://api.github.com/orgs/ontrack-features-t2-2026/teams/${team}/memberships/${author_encoded}" \
+            )" || http_status="000"
+
+            case "${http_status}" in
+              200)
+                membership_state="$(python3 -c 'import json,sys; print(json.load(sys.stdin)["state"])' \
+                  < "${RUNNER_TEMP}/team-membership.json")"
+                # "pending" is a teammate who has not accepted the org invitation
+                # yet. They are on the team and they review, so notify them too.
+                if [[ "${membership_state}" == "active" || "${membership_state}" == "pending" ]]; then
+                  echo "eligible=true" >> "${GITHUB_OUTPUT}"
+                  exit 0
+                fi
+                ;;
+              404) ;;
+              *)
+                echo "::error::GitHub returned HTTP ${http_status} while checking team membership."
+                exit 1
+                ;;
+            esac
+          done
+
+          # A skip is a decision, so say so on the run summary. Without this the job
+          # goes green and looks the same as one that posted a message.
+          echo "::warning::No Teams notification sent. ${PR_AUTHOR} opened this pull request from a fork and is in neither ontrack-contributors nor ontrack-leads."
+          echo "eligible=false" >> "${GITHUB_OUTPUT}"
+
+      - name: Build and send Teams notification
+        if: steps.team-membership.outputs.eligible == 'true'
+        shell: bash
+        env:
+          TEAMS_WEBHOOK_URL: ${{ secrets.TEAMS_PR_WEBHOOK_URL }}
+          PAYLOAD_PATH: ${{ runner.temp }}/teams-pr-notification.json
+
+          REPOSITORY: ${{ github.repository }}
+          PR_ACTION: ${{ github.event.action }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+          PR_URL: ${{ github.event.pull_request.html_url }}
+          PR_DRAFT: ${{ github.event.pull_request.draft }}
+          PR_HEAD: ${{ github.event.pull_request.head.label }}
+          PR_BASE: ${{ github.event.pull_request.base.ref }}
+
+        run: |
+          set -euo pipefail
+
+          if [[ -z "${TEAMS_WEBHOOK_URL:-}" ]]; then
+            echo "::error::The TEAMS_PR_WEBHOOK_URL Actions secret is not configured."
+            exit 1
+          fi
+
+          python3 - <<'PY'
+          import json
+          import os
+          import re
+
+
+          def plain(value):
+              """Teams renders these fields as Markdown, and titles and branch names
+              come from anyone who can open a pull request. Removing [ ] < > and
+              backticks stops a title forging a Markdown link or code span.
+              Parentheses are left alone so `feat(scope): ...` still reads
+              properly. Note this does NOT stop Teams auto-linking a bare URL in
+              a title, it only stops the link TEXT being controlled."""
+              value = " ".join(value.split())
+              return re.sub(r"[\[\]<>`]", " ", value)[:200]
+
+
+          headline = {
+              "opened": "New pull request opened",
+              "reopened": "Pull request reopened",
+              "ready_for_review": "Pull request is ready for review",
+          }.get(os.environ["PR_ACTION"], "Pull request updated")
+
+          status = (
+              "Draft"
+              if os.environ.get("PR_DRAFT", "").lower() == "true"
+              else "Ready for review"
+          )
+
+          card = {
+              "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+              "type": "AdaptiveCard",
+              "version": "1.2",
+              "body": [
+                  {
+                      "type": "TextBlock",
+                      "size": "Medium",
+                      "weight": "Bolder",
+                      "wrap": True,
+                      "text": headline,
+                  },
+                  {
+                      "type": "TextBlock",
+                      "wrap": True,
+                      "text": f"PR #{os.environ['PR_NUMBER']}: {plain(os.environ['PR_TITLE'])}",
+                  },
+                  {
+                      "type": "FactSet",
+                      "facts": [
+                          {
+                              "title": "Repository",
+                              "value": plain(os.environ["REPOSITORY"]),
+                          },
+                          {
+                              "title": "Author",
+                              "value": plain(os.environ["PR_AUTHOR"]),
+                          },
+                          {
+                              "title": "Status",
+                              "value": status,
+                          },
+                          {
+                              "title": "Branches",
+                              "value": (
+                                  f"{plain(os.environ['PR_HEAD'])} -> "
+                                  f"{plain(os.environ['PR_BASE'])}"
+                              ),
+                          },
+                      ],
+                  },
+              ],
+              "actions": [
+                  {
+                      "type": "Action.OpenUrl",
+                      "title": "Open pull request",
+                      "url": os.environ["PR_URL"],
+                  }
+              ],
+          }
+
+          payload = {
+              "type": "message",
+              "attachments": [
+                  {
+                      "contentType": "application/vnd.microsoft.card.adaptive",
+                      "contentUrl": None,
+                      "content": card,
+                  }
+              ],
+          }
+
+          with open(
+              os.environ["PAYLOAD_PATH"],
+              "w",
+              encoding="utf-8",
+          ) as payload_file:
+              json.dump(
+                  payload,
+                  payload_file,
+                  ensure_ascii=False,
+              )
+          PY
+
+          http_status="$(
+            curl \
+              --proto '=https' \
+              --tlsv1.2 \
+              --silent \
+              --show-error \
+              --connect-timeout 10 \
+              --max-time 30 \
+              --header 'Content-Type: application/json' \
+              --data-binary "@${PAYLOAD_PATH}" \
+              --output "${RUNNER_TEMP}/teams-response.txt" \
+              --write-out '%{http_code}' \
+              --url "${TEAMS_WEBHOOK_URL}"
+          )" || http_status="000"
+
+          # Uncomment to debug a failing webhook. The body comes from a third party
+          # and lands in a PUBLIC Actions log, and GitHub only masks an exact
+          # full-value match of a secret. Read it once, then comment it out again.
+          # cat "${RUNNER_TEMP}/teams-response.txt"
+
+          if [[ "${http_status}" != 2* ]]; then
+            echo "::error::Teams webhook returned HTTP ${http_status}."
+            exit 1
+          fi
+
+          echo "Teams webhook returned HTTP ${http_status} for PR #${PR_NUMBER}."
+          echo "That means the request was accepted. It does not prove the message rendered in the channel."
diff --git a/.github/workflows/ontrack-review-policy-signal.yml b/.github/workflows/ontrack-review-policy-signal.yml
new file mode 100644
index 0000000000..d87949cbbc
--- /dev/null
+++ b/.github/workflows/ontrack-review-policy-signal.yml
@@ -0,0 +1,32 @@
+name: OnTrack review policy signal
+run-name: "OnTrack review policy signal for PR #${{ github.event.pull_request.number || 'all' }}"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - edited
+      - ready_for_review
+      - converted_to_draft
+  pull_request_review:
+    types:
+      - submitted
+      - edited
+      - dismissed
+  workflow_dispatch:
+
+# This workflow deliberately has no permissions and never checks out pull-request
+# code or secrets. Its completion wakes the trusted evaluator on the default
+# branch; manual runs safely reconcile every open pull request.
+permissions: {}
+
+jobs:
+  signal:
+    if: github.repository_owner == 'ontrack-features-t2-2026'
+    runs-on: ubuntu-24.04
+    timeout-minutes: 1
+    steps:
+      - name: Signal policy evaluation
+        run: ':'
diff --git a/.github/workflows/ontrack-review-policy.yml b/.github/workflows/ontrack-review-policy.yml
new file mode 100644
index 0000000000..61c194b103
--- /dev/null
+++ b/.github/workflows/ontrack-review-policy.yml
@@ -0,0 +1,56 @@
+name: OnTrack review policy evaluator
+
+on:
+  workflow_run:
+    workflows:
+      - OnTrack review policy signal
+    types:
+      - completed
+  push:
+    branches:
+      - 11.0.x
+  schedule:
+    # Reconcile team membership and base-branch changes even when no PR event fires.
+    - cron: '3-58/5 * * * *'
+
+# The repository token is used only to check out the trusted evaluator from the
+# default branch. The GitHub App token is separately scoped to member/PR reads and
+# commit-status writes.
+permissions:
+  contents: read
+
+concurrency:
+  # Serialize signals for the same PR without allowing unrelated PR activity to
+  # replace a queued revocation. Scheduled and base-push reconciliations share a
+  # separate group. Every run re-reads authoritative GitHub state.
+  group: ontrack-review-policy-${{ github.repository }}-${{ github.event.workflow_run.pull_requests[0].number || github.event.workflow_run.display_title || 'reconcile' }}
+  cancel-in-progress: false
+
+jobs:
+  evaluate:
+    if: github.repository_owner == 'ontrack-features-t2-2026'
+    runs-on: ubuntu-24.04
+    timeout-minutes: 5
+    environment:
+      name: ontrack-review-policy
+      deployment: false
+
+    steps:
+      - name: Check out the trusted policy evaluator
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+        with:
+          ref: refs/heads/11.0.x
+          fetch-depth: 1
+          persist-credentials: false
+          sparse-checkout: .github/review-policy
+
+      - name: Verify policy logic
+        run: node --test .github/review-policy/evaluate.test.mjs
+
+      - name: Evaluate current pull-request approvals
+        env:
+          ONTRACK_REVIEW_APP_ID: ${{ vars.ONTRACK_REVIEW_APP_ID }}
+          ONTRACK_REVIEW_APP_PRIVATE_KEY: ${{ secrets.ONTRACK_REVIEW_APP_PRIVATE_KEY }}
+          ONTRACK_CONTRIBUTOR_TEAM: ontrack-contributors
+          ONTRACK_LEAD_TEAM: ontrack-leads
+        run: node .github/review-policy/evaluate.mjs
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000000..61cee19002
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,19 @@
+name: Test CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6
+      - name: Use Node.js 22
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm run test:ci
diff --git a/.github/workflows/weekly-integration-prs.yml b/.github/workflows/weekly-integration-prs.yml
new file mode 100644
index 0000000000..59eefb3cf4
--- /dev/null
+++ b/.github/workflows/weekly-integration-prs.yml
@@ -0,0 +1,100 @@
+name: Weekly integration PRs
+
+on:
+  schedule:
+    - cron: "17 9 * * 1"
+      timezone: Australia/Melbourne
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  ensure-pr:
+    if: github.repository_owner == 'ontrack-features-t2-2026'
+    name: ${{ matrix.source }} -> ${{ matrix.target }}
+    runs-on: ubuntu-24.04
+    timeout-minutes: 10
+
+    strategy:
+      fail-fast: false
+      max-parallel: 4
+      matrix:
+        include:
+          - source: feature/cross-unit
+            target: 11.0.x
+          - source: feature/notifications
+            target: 11.0.x
+          - source: feature/peer-progress-indicator
+            target: 11.0.x
+          - source: feature/calendar-integration
+            target: 11.0.x
+
+    concurrency:
+      group: ${{ github.workflow }}-${{ matrix.target }}-${{ matrix.source }}
+      cancel-in-progress: false
+
+    steps:
+      - name: Ensure pull request exists
+        shell: bash
+        env:
+          GH_TOKEN: ${{ secrets.INTEGRATION_BOT_TOKEN }}
+          SOURCE_BRANCH: ${{ matrix.source }}
+          TARGET_BRANCH: ${{ matrix.target }}
+        run: |
+          set -euo pipefail
+
+          if [[ -z "${GH_TOKEN:-}" ]]; then
+            echo "::error::INTEGRATION_BOT_TOKEN is not configured."
+            exit 1
+          fi
+
+          existing="$(
+            gh api --method GET "repos/$GITHUB_REPOSITORY/pulls" \
+              -H "Accept: application/vnd.github+json" \
+              -H "X-GitHub-Api-Version: 2026-03-10" \
+              -f state=open \
+              -f head="${GITHUB_REPOSITORY_OWNER}:${SOURCE_BRANCH}" \
+              -f base="$TARGET_BRANCH" \
+              -F per_page=1 \
+              --jq '.[0].html_url // empty'
+          )"
+
+          if [[ -n "$existing" ]]; then
+            echo "Pull request already open: $existing"
+            exit 0
+          fi
+
+          target_ref="$(jq -rn --arg ref "$TARGET_BRANCH" '$ref | @uri')"
+          source_ref="$(jq -rn --arg ref "$SOURCE_BRANCH" '$ref | @uri')"
+
+          for ref in "$target_ref" "$source_ref"; do
+            if ! gh api "repos/$GITHUB_REPOSITORY/branches/${ref}" \
+              -H "Accept: application/vnd.github+json" \
+              -H "X-GitHub-Api-Version: 2026-03-10" \
+              --silent >/dev/null 2>&1; then
+              echo "Branch $ref no longer exists in $GITHUB_REPOSITORY; skipping."
+              exit 0
+            fi
+          done
+          comparison="$(
+            gh api "repos/$GITHUB_REPOSITORY/compare/${target_ref}...${source_ref}" \
+              -H "Accept: application/vnd.github+json" \
+              -H "X-GitHub-Api-Version: 2026-03-10" \
+              --jq '[.ahead_by, (.files | length)] | @tsv'
+          )"
+          read -r ahead changed_files <<< "$comparison"
+
+          if [[ "$ahead" == "0" || "$changed_files" == "0" ]]; then
+            echo "Nothing to merge from $SOURCE_BRANCH into $TARGET_BRANCH."
+            exit 0
+          fi
+
+          gh api --method POST "repos/$GITHUB_REPOSITORY/pulls" \
+            -H "Accept: application/vnd.github+json" \
+            -H "X-GitHub-Api-Version: 2026-03-10" \
+            -f title="Integration: $SOURCE_BRANCH into $TARGET_BRANCH" \
+            -f head="$SOURCE_BRANCH" \
+            -f base="$TARGET_BRANCH" \
+            -f body="Created by the scheduled integration workflow. The source branch is intentionally retained after merge." \
+            --jq '.html_url'
diff --git a/.gitignore b/.gitignore
index 9abc43ca67..65909d007d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,10 +11,13 @@ vendor/
 .sass-cache*
 .bundle*
 tmp.scss
-.vscode
 .tscache
 a.env
+.env
 dist/
 .angulardoc.json
 .nx
 .idea
+
+# Sentry Config File
+.sentryclirc
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000000..f259c41cca
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "JPlag-Report-Viewer"]
+	path = JPlag-Report-Viewer
+  url = https://github.com/doubtfire-lms/jplag-report-viewer-static.git
diff --git a/.husky/commit-msg b/.husky/commit-msg
index fe4c17a22d..70bd3dd23d 100755
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit ""
+npx --no-install commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 6700f51282..e69de29bb2 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
diff --git a/.nvmrc b/.nvmrc
index 6276cf12fb..6bb900519d 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v16.14.2
+v22.22.3
diff --git a/.postcssrc.json b/.postcssrc.json
new file mode 100644
index 0000000000..865e00b364
--- /dev/null
+++ b/.postcssrc.json
@@ -0,0 +1,6 @@
+{
+  "syntax": "postcss-scss",
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}
diff --git a/.prettierignore b/.prettierignore
index 25257e586f..d541041bd2 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,3 +4,12 @@ yarn.lock
 dist
 build
 e2e
+CHANGELOG.md
+JPlag-Report-Viewer/
+.github/
+karma/
+Gruntfile.js
+karma.conf.js
+polyfills.ts
+test.ts
+main.ts
diff --git a/.prettierrc b/.prettierrc
index d73829a932..021153e85a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,9 +1,15 @@
 {
   "printWidth": 100,
   "tabWidth": 2,
-  "tabs": false,
   "singleQuote": true,
-  "semicolon": true,
+  "semi": true,
   "quoteProps": "preserve",
-  "bracketSpacing": false
+  "endOfLine": "lf",
+  "trailingComma": "all",
+  "bracketSpacing": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^@angular/(.*)$", "^rxjs$", "^rxjs/(.*)$", "^src/app/(.*)$", "^[./]"],
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true,
+  "importOrderParserPlugins": ["typescript", "decorators-legacy"]
 }
diff --git a/.tool-versions b/.tool-versions
index c2ca3d3d25..42bb250e67 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1 +1 @@
-nodejs 20.9.0
+nodejs 22.22.3
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..7e6882bfa3
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "files.eol": "\n"
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ca7d64128..52ce354d6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,1840 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [11.0.0-45](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-44...v11.0.0-45) (2026-07-13)
+
+
+### Features
+
+* add label for starting tasks ([46100f5](https://github.com/b0ink/doubtfire-deploy/commit/46100f50ca8ddac11668e97deb482994f47f87f9))
+* add task list filters and sorting ([c65279c](https://github.com/b0ink/doubtfire-deploy/commit/c65279cb1900b5198e764d53b671719512486a83))
+* show all tasks in task planner ([eb87251](https://github.com/b0ink/doubtfire-deploy/commit/eb87251dbef37d5cca8d11c29816c42722605764))
+
+
+### Bug Fixes
+
+* dont reset task list sidebar when switching between project and task dashboard ([acc3ac2](https://github.com/b0ink/doubtfire-deploy/commit/acc3ac2625137075262c44239772d121e52c3a34))
+* lint ([dab681d](https://github.com/b0ink/doubtfire-deploy/commit/dab681d0e3d0e025804d3477eb68727ab42330ed))
+* use task weighting system as default sorting ([aa3c261](https://github.com/b0ink/doubtfire-deploy/commit/aa3c2613f9c1027eea761f51297380a4443a42b2))
+
+## [11.0.0-44](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-43...v11.0.0-44) (2026-07-08)
+
+
+### Features
+
+* display submitted grade in portfolio view ([a76cecf](https://github.com/b0ink/doubtfire-deploy/commit/a76cecfe1e4f3a78becf9507900e621e87447d69))
+
+
+### Bug Fixes
+
+* ensure accurate tutor views ([3b5e693](https://github.com/b0ink/doubtfire-deploy/commit/3b5e69397abcc53136942428fb97ac81a5cddb3d))
+* only call d2l mapping as convenor ([d6ecd44](https://github.com/b0ink/doubtfire-deploy/commit/d6ecd44658f6a668dde409d399944f53793c1c35))
+* persist portfolio filters in url ([322eef2](https://github.com/b0ink/doubtfire-deploy/commit/322eef29e57d13267a2466da4bcb4a55a7b49db6))
+* reduce threshold for mobile view in inbox dashboard ([9479351](https://github.com/b0ink/doubtfire-deploy/commit/9479351619479fed2ac26199f77946ac64903e7c))
+
+## [11.0.0-43](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-42...v11.0.0-43) (2026-07-03)
+
+
+### Bug Fixes
+
+* regenerate ngsw cache after sourcemaps removed ([be85d84](https://github.com/b0ink/doubtfire-deploy/commit/be85d8443b56f20a6866c0fc8d65915d5fe63a2a))
+
+## [11.0.0-42](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-41...v11.0.0-42) (2026-07-03)
+
+
+### Features
+
+* collapse task comments in narrow screen sizes ([380f277](https://github.com/b0ink/doubtfire-deploy/commit/380f2773b44d6582b62b13785b90a146a7002123))
+* render ansi output to html ([732aedd](https://github.com/b0ink/doubtfire-deploy/commit/732aedd2414dcfe3d74a78b4b9ca0bc17d4f5521))
+
+
+### Bug Fixes
+
+* add tooltip to collapsed task list item ([c81e61e](https://github.com/b0ink/doubtfire-deploy/commit/c81e61ef48b83f076ba7dac2d039b4bade5c9717))
+* ensure project is valid ([095315b](https://github.com/b0ink/doubtfire-deploy/commit/095315b212fff98cbe661df7a33a7b091cb66b1e))
+
+## [11.0.0-41](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-40...v11.0.0-41) (2026-07-02)
+
+
+### Bug Fixes
+
+* add padding when user cant view submission ([f16d9dc](https://github.com/b0ink/doubtfire-deploy/commit/f16d9dc6ee815e93022f9b8446dd32d1852ce088))
+* avoid repeated unit fetching ([cfe04dc](https://github.com/b0ink/doubtfire-deploy/commit/cfe04dc29f78ab815a17312f929e6deb052a88ed))
+* remove hash prefix ([51794b8](https://github.com/b0ink/doubtfire-deploy/commit/51794b800d2d731d6445cd21b5b592302e43defd))
+* tutorials route transition error ([db1294a](https://github.com/b0ink/doubtfire-deploy/commit/db1294a37e7333612202a8413256288ae97c05aa))
+
+## [11.0.0-40](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-39...v11.0.0-40) (2026-07-01)
+
+
+### Bug Fixes
+
+* reveal overflow task claims to convenors only ([c17a6d2](https://github.com/b0ink/doubtfire-deploy/commit/c17a6d239b71f446300b305de5877372c206028d))
+
+## [11.0.0-39](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-38...v11.0.0-39) (2026-07-01)
+
+
+### Bug Fixes
+
+* dynamic hint sizing to prevent overlap ([518b58b](https://github.com/b0ink/doubtfire-deploy/commit/518b58ba30c23dc4456a98ebfbe41cb48446e715))
+
+## [11.0.0-38](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-37...v11.0.0-38) (2026-06-29)
+
+## [11.0.0-37](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-36...v11.0.0-37) (2026-06-29)
+
+
+### Bug Fixes
+
+* fetch images on init ([b28bc69](https://github.com/b0ink/doubtfire-deploy/commit/b28bc6905b43d5843eee010cefff4938568edb10))
+
+## [11.0.0-36](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-35...v11.0.0-36) (2026-06-29)
+
+
+### Bug Fixes
+
+* modify grey border ([59c102d](https://github.com/b0ink/doubtfire-deploy/commit/59c102d7708e4c28a5584cc3614046e8e8f5fd52))
+
+## [11.0.0-35](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-34...v11.0.0-35) (2026-06-29)
+
+
+### Features
+
+* add skeleton loading ui to overseer image list ([b833a1c](https://github.com/b0ink/doubtfire-deploy/commit/b833a1c58ce07e6bf9b6a12c77a1bbea1635da10))
+* add skeleton ui for activities ([47ffe2b](https://github.com/b0ink/doubtfire-deploy/commit/47ffe2b261d26be39e93e7b89204c65b5d5b1f57))
+
+
+### Bug Fixes
+
+* reveal tii threshold if tii enabled ([ab1a401](https://github.com/b0ink/doubtfire-deploy/commit/ab1a401a3f67db83f7a55aa25060f2a29116eae1))
+* use correct api url ([ed4dba4](https://github.com/b0ink/doubtfire-deploy/commit/ed4dba4552ebf088893dfa58fffac2546690cedd))
+
+## [11.0.0-34](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-33...v11.0.0-34) (2026-06-25)
+
+
+### Bug Fixes
+
+* align icons ([8af5f5a](https://github.com/b0ink/doubtfire-deploy/commit/8af5f5ab177a8057e6b894ae7b039b8b8203c19f))
+* set correct button size ([ec8eef4](https://github.com/b0ink/doubtfire-deploy/commit/ec8eef49ca4275f00502872dab5b0cf23251c337))
+
+## [11.0.0-33](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-32...v11.0.0-33) (2026-06-25)
+
+
+### Bug Fixes
+
+* ensure session replays are captured ([bc35164](https://github.com/b0ink/doubtfire-deploy/commit/bc351643d65104ff85d716cff0e0d405cdb10170))
+
+## [11.0.0-32](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-31...v11.0.0-32) (2026-06-25)
+
+
+### Bug Fixes
+
+* ensure sentry replays work ([b2a8cdd](https://github.com/b0ink/doubtfire-deploy/commit/b2a8cdd2bcb15d409047c346b93136fd2f605b5f))
+
+## [11.0.0-31](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-30...v11.0.0-31) (2026-06-25)
+
+## [11.0.0-30](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-29...v11.0.0-30) (2026-06-25)
+
+
+### Bug Fixes
+
+* tunnel sentry requests ([2d24ebc](https://github.com/b0ink/doubtfire-deploy/commit/2d24ebc9e611dbf7ca0cbdcd8507b238538d9ea3))
+
+## [11.0.0-29](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-28...v11.0.0-29) (2026-06-25)
+
+
+### Features
+
+* sentry ([#1305](https://github.com/b0ink/doubtfire-deploy/issues/1305)) ([865faa2](https://github.com/b0ink/doubtfire-deploy/commit/865faa286016bf61fdb0ae0e300df48e92045bbb))
+
+## [11.0.0-28](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-27...v11.0.0-28) (2026-06-24)
+
+## [11.0.0-27](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-26...v11.0.0-27) (2026-06-24)
+
+
+### Features
+
+* customisable grades ([#1271](https://github.com/b0ink/doubtfire-deploy/issues/1271)) ([c2b68ac](https://github.com/b0ink/doubtfire-deploy/commit/c2b68aca0b5b0873443823795fc50bbcdc81fa4d))
+
+
+### Bug Fixes
+
+* allow empty strings to fix create user dialog ([efb4e5d](https://github.com/b0ink/doubtfire-deploy/commit/efb4e5d97f9641843f3e3e50f1fd38bb560fe853))
+* center div ([1c20dd7](https://github.com/b0ink/doubtfire-deploy/commit/1c20dd73befb5c0e204874140ca494c968487bd3))
+* close dialog after creating teachiing period ([af9ab4d](https://github.com/b0ink/doubtfire-deploy/commit/af9ab4d692f3e4c5e84a10e54a7f63d289a8092b))
+* ensure overseer assessment is valid before expanding ([6cad43c](https://github.com/b0ink/doubtfire-deploy/commit/6cad43c1c6aac6cf7552ed9db937d6a73cb17369))
+* ensure user is authenticated before loading scorm ([1b066c0](https://github.com/b0ink/doubtfire-deploy/commit/1b066c0e08cffc7a1176c7ec7f1b23da4ce6cf3f))
+* extend reply height to avoid text cutoff ([b4af5d1](https://github.com/b0ink/doubtfire-deploy/commit/b4af5d1b64dc32bea17b65c817aeaf56139be0fb))
+* hide quality pts if negative ([e43b96d](https://github.com/b0ink/doubtfire-deploy/commit/e43b96d77f21ebc654b4ca9e0b5a1cfeb5b8058c))
+* only show status icon if set ([46f494c](https://github.com/b0ink/doubtfire-deploy/commit/46f494c926b604f0c1fd396b59678f5ee74a7492))
+* truncate portfolio task list item correctly ([a02fe9e](https://github.com/b0ink/doubtfire-deploy/commit/a02fe9ebe57ae4157b9124d8a8a1c7aea364ba60))
+* update husky hooks for v9 ([5961860](https://github.com/b0ink/doubtfire-deploy/commit/596186040329ee198e1ef703d76676d15ad3ce89))
+* use correct scorm url ([d95c4ca](https://github.com/b0ink/doubtfire-deploy/commit/d95c4ca400a7aee7dd50f816e1b342e3754db87a))
+
+## [11.0.0-26](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-25...v11.0.0-26) (2026-06-19)
+
+
+### Bug Fixes
+
+* avoid converting colons in urls to emojis [#706](https://github.com/b0ink/doubtfire-deploy/issues/706) ([550b867](https://github.com/b0ink/doubtfire-deploy/commit/550b867df0e52026825e594a72d8544c9505a22b))
+* improve global loading logic for staff ([d81ac52](https://github.com/b0ink/doubtfire-deploy/commit/d81ac52cf1b90e139a34bf13ed08142919b6cc53))
+* prevent multiple global fetches ([f1528d1](https://github.com/b0ink/doubtfire-deploy/commit/f1528d1aedc7d6485b094ed3c4923b44c786d45b))
+
+## [11.0.0-25](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-24...v11.0.0-25) (2026-06-18)
+
+
+### Features
+
+* add day of week to gantt chart ([1fb4637](https://github.com/b0ink/doubtfire-deploy/commit/1fb4637cd2386f1aeff227043e0002bf9b77837b))
+* engagement passport ([#1257](https://github.com/b0ink/doubtfire-deploy/issues/1257)) ([7a754dc](https://github.com/b0ink/doubtfire-deploy/commit/7a754dcc82ca228f5688abab4480774df75a007e))
+* show students name if viewing other project ([38c0e85](https://github.com/b0ink/doubtfire-deploy/commit/38c0e85ebe698c71ea087f3aeecc6d7ca24c86d7))
+
+
+### Bug Fixes
+
+* ensure dashboard dropdown switches from task details view ([1ba5d1e](https://github.com/b0ink/doubtfire-deploy/commit/1ba5d1e42d302218520f8be4c0875673ad5d7a3f))
+* web calendar ([#1282](https://github.com/b0ink/doubtfire-deploy/issues/1282)) ([83b6d5e](https://github.com/b0ink/doubtfire-deploy/commit/83b6d5ea381604ae88585195314eafd239880632))
+
+## [11.0.0-24](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-23...v11.0.0-24) (2026-06-17)
+
+
+### Features
+
+* check access token expiry locally before attempting request ([#1270](https://github.com/b0ink/doubtfire-deploy/issues/1270)) ([4ff5562](https://github.com/b0ink/doubtfire-deploy/commit/4ff55627566f9004872c915658bd91bc348dd8e8))
+* submission history ([#1269](https://github.com/b0ink/doubtfire-deploy/issues/1269)) ([4cdae07](https://github.com/b0ink/doubtfire-deploy/commit/4cdae07eb5bef0f9866927892e92b6b80dde0c74))
+* upgrade gantt chart and add screenshotting ability ([#1263](https://github.com/b0ink/doubtfire-deploy/issues/1263)) ([08a8eee](https://github.com/b0ink/doubtfire-deploy/commit/08a8eee9337331aa328960e206722f8905c2a0f9))
+
+
+### Bug Fixes
+
+* use either portfolio available field ([f8d5142](https://github.com/b0ink/doubtfire-deploy/commit/f8d514261c7eca5465ac3af95da33b95a39d3f23))
+
+## [11.0.0-23](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-22...v11.0.0-23) (2026-06-11)
+
+
+### Features
+
+* display list of tasks still being processed ([#1264](https://github.com/b0ink/doubtfire-deploy/issues/1264)) ([55ef4c0](https://github.com/b0ink/doubtfire-deploy/commit/55ef4c0409cf5a066e91763a00f2bb428670e520))
+
+
+### Bug Fixes
+
+* apply status color ([df6a6ec](https://github.com/b0ink/doubtfire-deploy/commit/df6a6ecc73d01dd2ef449270bc7c6de446d93884))
+* avoid loading rendering all students at the same time ([ba7910a](https://github.com/b0ink/doubtfire-deploy/commit/ba7910a59460a4d4139273b272e99625e5efc518))
+* ensure entire task list can be scrolled through ([8ce79a8](https://github.com/b0ink/doubtfire-deploy/commit/8ce79a8f33c82231f7f3c4033a4d37039514c015))
+
+## [11.0.0-22](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-21...v11.0.0-22) (2026-06-09)
+
+
+### Features
+
+* communications system ([#1239](https://github.com/b0ink/doubtfire-deploy/issues/1239)) ([b55bcfc](https://github.com/b0ink/doubtfire-deploy/commit/b55bcfc8f84f381beb7d62f41031db3ba6a38193))
+
+## [11.0.0-21](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-20...v11.0.0-21) (2026-06-08)
+
+
+### Bug Fixes
+
+* ensure unit dates map correctly ([532f185](https://github.com/b0ink/doubtfire-deploy/commit/532f185d2bc6839549a06a2f9e625c676cc280a6))
+
+## [11.0.0-20](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-19...v11.0.0-20) (2026-06-04)
+
+## [11.0.0-19](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-18...v11.0.0-19) (2026-06-03)
+
+
+### Bug Fixes
+
+* ensure unit is fetched in unit task editor ([54b1cf0](https://github.com/b0ink/doubtfire-deploy/commit/54b1cf03ed662447e7027a61d084f62f2548c996))
+
+## [11.0.0-18](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-17...v11.0.0-18) (2026-06-03)
+
+## [11.0.0-17](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-16...v11.0.0-17) (2026-06-03)
+
+
+### Features
+
+* support zip file submissions ([#1240](https://github.com/b0ink/doubtfire-deploy/issues/1240)) ([99d546f](https://github.com/b0ink/doubtfire-deploy/commit/99d546f1544feeab31fc6b2434e330b22544b56f))
+
+## [11.0.0-16](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-15...v11.0.0-16) (2026-06-03)
+
+## [11.0.0-15](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-14...v11.0.0-15) (2026-06-03)
+
+
+### Bug Fixes
+
+* display past due date on same day ([cd47f5c](https://github.com/b0ink/doubtfire-deploy/commit/cd47f5c0e4c351e2421afd94647a1297b3b5ec75))
+* prevent reload of task list component when switching back to dashboard ([be780b1](https://github.com/b0ink/doubtfire-deploy/commit/be780b14bc875c05e1083353c6d447315bc179e7))
+
+## [11.0.0-14](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-13...v11.0.0-14) (2026-06-03)
+
+## [11.0.0-13](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-12...v11.0.0-13) (2026-06-03)
+
+## [11.0.0-12](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-11...v11.0.0-12) (2026-06-02)
+
+
+### Bug Fixes
+
+* correctly apply task tutorial filters ([924c267](https://github.com/b0ink/doubtfire-deploy/commit/924c2676c6739820cc066d046b7ace71ee2d2f9e))
+
+## [11.0.0-11](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-10...v11.0.0-11) (2026-05-19)
+
+## [11.0.0-10](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-9...v11.0.0-10) (2026-05-18)
+
+## [11.0.0-9](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-8...v11.0.0-9) (2026-05-18)
+
+
+### Bug Fixes
+
+* ensure unit is loaded first before querying inbox ([6d7c9fb](https://github.com/b0ink/doubtfire-deploy/commit/6d7c9fb8ff7fe714844ebc8f0e04f2ef9a40d4d0))
+
+## [11.0.0-8](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-7...v11.0.0-8) (2026-05-18)
+
+## [11.0.0-7](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-6...v11.0.0-7) (2026-05-17)
+
+## [11.0.0-6](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-5...v11.0.0-6) (2026-05-14)
+
+## [11.0.0-5](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-4...v11.0.0-5) (2026-05-14)
+
+
+### Bug Fixes
+
+* ensure access to tutor notes ([5e0ec7c](https://github.com/b0ink/doubtfire-deploy/commit/5e0ec7cf6ccf04286aa6865e5d84d14487f68f7f))
+* ensure valid selected task ([deaae7f](https://github.com/b0ink/doubtfire-deploy/commit/deaae7fb819ea8dfc01d6ad67415f50c2e4258a2))
+
+## [11.0.0-4](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-3...v11.0.0-4) (2026-05-14)
+
+
+### Features
+
+* add route auth guards ([fb2e781](https://github.com/b0ink/doubtfire-deploy/commit/fb2e78113b13782dbbafe38c21f27c5d63be69c6))
+
+
+### Bug Fixes
+
+* enable inbox access for tutors ([05d3eda](https://github.com/b0ink/doubtfire-deploy/commit/05d3eda76bdcfb491649f5d83e69213db3de0885))
+
+## [11.0.0-3](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-2...v11.0.0-3) (2026-05-14)
+
+
+### Bug Fixes
+
+* add padding ([94f4216](https://github.com/b0ink/doubtfire-deploy/commit/94f4216e588d6dfb6abc4d10804971cb0e8f8678))
+* unlock task status selection for staff ([#1222](https://github.com/b0ink/doubtfire-deploy/issues/1222)) ([e4080d0](https://github.com/b0ink/doubtfire-deploy/commit/e4080d03a629654518bc362f48e8e0fbb790dd96))
+
+## [11.0.0-2](https://github.com/b0ink/doubtfire-deploy/compare/v11.0.0-1...v11.0.0-2) (2026-05-13)
+
+## [11.0.0-1](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-21...v11.0.0-1) (2026-05-13)
+
+
+### Features
+
+* (wip) add  name to new student experience skeleton ([7b9ace4](https://github.com/b0ink/doubtfire-deploy/commit/7b9ace47132f0237bc621d3d0e45c3031e7fac05))
+* add burndown replacement ([837658a](https://github.com/b0ink/doubtfire-deploy/commit/837658afff090e52d53cefa7c2eed20a46c1ac01))
+* add new progress component ([8beef70](https://github.com/b0ink/doubtfire-deploy/commit/8beef701e6b7fc0dbea42f8849dc02e79a665fb7))
+* add new student experience ([9bb77ab](https://github.com/b0ink/doubtfire-deploy/commit/9bb77ab108e50b637329bd739925d1d9566d9203))
+* allow paste attachment comment ([#1165](https://github.com/b0ink/doubtfire-deploy/issues/1165)) ([0f24980](https://github.com/b0ink/doubtfire-deploy/commit/0f24980e6edcc5d0f81e015990adaf14afea400e))
+* batch upload feedback csv ([#1175](https://github.com/b0ink/doubtfire-deploy/issues/1175)) ([9f95987](https://github.com/b0ink/doubtfire-deploy/commit/9f959877b6f47d878d87b468f4aab73f536d598b))
+* bulk import staff via emails ([#1195](https://github.com/b0ink/doubtfire-deploy/issues/1195)) ([c91ab47](https://github.com/b0ink/doubtfire-deploy/commit/c91ab478ae1d1cd459040290f6f7a44c7dce3efe))
+* confirm recursive fix in mobile tutor view ([b64601a](https://github.com/b0ink/doubtfire-deploy/commit/b64601a425c7a64bccfaf47c1e4fccb0343b1589))
+* confirmation modal to reassign tutorials when removing staff ([5f90e90](https://github.com/b0ink/doubtfire-deploy/commit/5f90e9085d69913eced55ad54ce9ac09431d3822))
+* discussed in class refactor ([#1145](https://github.com/b0ink/doubtfire-deploy/issues/1145)) ([4d8bb5b](https://github.com/b0ink/doubtfire-deploy/commit/4d8bb5b82d89caa02ed4936819be601b3f6977fc))
+* display icon for tasks escalated by student ([dfcfd47](https://github.com/b0ink/doubtfire-deploy/commit/dfcfd472305ef2971fa72734c18e77253b98fa11))
+* display portfolio submission time ([d717b27](https://github.com/b0ink/doubtfire-deploy/commit/d717b270eb80c0b0245e6b39f0b3f0567c379512))
+* display sso redirecting state ([248c992](https://github.com/b0ink/doubtfire-deploy/commit/248c992f46488f61916e00a87ca32ed987721f31))
+* edit comments ([#1194](https://github.com/b0ink/doubtfire-deploy/issues/1194)) ([976b6ac](https://github.com/b0ink/doubtfire-deploy/commit/976b6ac4fa3bd2d5e954eebcae3fcb40dd8d1f0e))
+* enable task pinning in explorer ([1647e2b](https://github.com/b0ink/doubtfire-deploy/commit/1647e2bcc86ac6fb08c82be9795a06939c57bb6e))
+* improve look of task status count ([475c316](https://github.com/b0ink/doubtfire-deploy/commit/475c3165db099e1412e30fb6cf18bbaddd516e75))
+* pause feedback threshold during teaching period breaks ([#1138](https://github.com/b0ink/doubtfire-deploy/issues/1138)) ([12fbf81](https://github.com/b0ink/doubtfire-deploy/commit/12fbf8147107dc185a9a9cbea940efac93a0f316))
+* require discussion before marking complete ([#1103](https://github.com/b0ink/doubtfire-deploy/issues/1103)) ([86ae886](https://github.com/b0ink/doubtfire-deploy/commit/86ae8865268ee19e4b3430ff679358cc075e1346))
+* staff note and similarity indicators ([4a65a9b](https://github.com/b0ink/doubtfire-deploy/commit/4a65a9b21d615ecf78bf09743c9cf8c3026ff621))
+* visualisations ([f1cc39e](https://github.com/b0ink/doubtfire-deploy/commit/f1cc39e59dd224c55ee0e8b5f1d50855263d147e))
+
+
+### Bug Fixes
+
+* avoid rendering the staff list twice ([9e5be59](https://github.com/b0ink/doubtfire-deploy/commit/9e5be591b9a0cf72d01efa5e28e5b2b9e7eba043))
+* burndown chart visualisation ([#942](https://github.com/b0ink/doubtfire-deploy/issues/942)) ([8487b8d](https://github.com/b0ink/doubtfire-deploy/commit/8487b8d20e838fa1b2a2238bb856f73edc86442c))
+* check for valid unit ([d9560c3](https://github.com/b0ink/doubtfire-deploy/commit/d9560c3b68df0a09f577cdab990d252b5cd24c58))
+* complete student enrolment modal ([efa89c3](https://github.com/b0ink/doubtfire-deploy/commit/efa89c344069d386f2411a417e570d4158af91b9))
+* debounce duplicate task submission requests ([80f92e2](https://github.com/b0ink/doubtfire-deploy/commit/80f92e2277c48978e1738340063a7223c04fddb8))
+* display groups only when a group set is selected ([dde1e76](https://github.com/b0ink/doubtfire-deploy/commit/dde1e7697f8a9a93577bb0e18e3e81a3ebd1ace2))
+* duplicate files ([da51e8e](https://github.com/b0ink/doubtfire-deploy/commit/da51e8e0cc9518a2a76447a48079b42f144064fc))
+* ensure authorisation active in angular ([deaa1e9](https://github.com/b0ink/doubtfire-deploy/commit/deaa1e940f8295ff962c111f1dbac75ed5ff51fa))
+* ensure loading screen removed in sign in component ([6954ac6](https://github.com/b0ink/doubtfire-deploy/commit/6954ac62627e058b6a73c0e83dc8dc8a1740698d))
+* ensure pdf viewer is visible [#1186](https://github.com/b0ink/doubtfire-deploy/issues/1186) ([6bc0752](https://github.com/b0ink/doubtfire-deploy/commit/6bc075228fe2a48dcf91aa5350b5f15f602e2dc8))
+* ensure selected group is valid ([95cb9ac](https://github.com/b0ink/doubtfire-deploy/commit/95cb9ace6615b45dd75161fd02d6dd130420817b))
+* fix pdf viewer for portfolios ([456cf46](https://github.com/b0ink/doubtfire-deploy/commit/456cf466bf49b86467b269ec3d6fb4e63f6a059f))
+* get new visualisations to build ([f828fd4](https://github.com/b0ink/doubtfire-deploy/commit/f828fd42fafaf09d7f807cea8f6a1e14ec56ecc5))
+* link task list to definitions for project dashboard ([90853e9](https://github.com/b0ink/doubtfire-deploy/commit/90853e93c109430669e3f80e4324649cd2d0dba6))
+* new burndown and task status count ([bfecd08](https://github.com/b0ink/doubtfire-deploy/commit/bfecd086eeeae33e9bbba430c79bcc4f21506a07))
+* only render if submission date is valid ([04986a0](https://github.com/b0ink/doubtfire-deploy/commit/04986a0e501f0185dbd199b8d2554133217f7e75))
+* open report in turnitin ([091aaf8](https://github.com/b0ink/doubtfire-deploy/commit/091aaf8ba744bbf677f9b8f51a58bc16b7d631ab))
+* remove hardcoded chart view size ([1b31930](https://github.com/b0ink/doubtfire-deploy/commit/1b319303ac969ef63617b2362297233bc79bb916))
+* remove markdown filter from learning outcomes ([1de217c](https://github.com/b0ink/doubtfire-deploy/commit/1de217c0bc19b8dbedb21cf2e89e195772ae2a02))
+* set task data for project dashboard state ([ef75340](https://github.com/b0ink/doubtfire-deploy/commit/ef7534064ef92c06e459953076bc30b6eff4647d))
+* support building on windows ([b2aa7ae](https://github.com/b0ink/doubtfire-deploy/commit/b2aa7ae6ea7a456953ed4f2a8c63f784ac3870b5))
+* switch staff to unit roles in unit service ([0e5d9de](https://github.com/b0ink/doubtfire-deploy/commit/0e5d9de9df2eaf16e473f4f8fde920ffb59ce765))
+* task route transition race when switching from inbox ([63c52dc](https://github.com/b0ink/doubtfire-deploy/commit/63c52dc4cdb2f2fbc701f69c64b7273f5778c868))
+
+### [10.0.1-35](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-34...v10.0.1-35) (2026-04-28)
+
+
+### Features
+
+* bulk import staff via emails ([#1195](https://github.com/b0ink/doubtfire-deploy/issues/1195)) ([c91ab47](https://github.com/b0ink/doubtfire-deploy/commit/c91ab478ae1d1cd459040290f6f7a44c7dce3efe))
+* edit comments ([#1194](https://github.com/b0ink/doubtfire-deploy/issues/1194)) ([976b6ac](https://github.com/b0ink/doubtfire-deploy/commit/976b6ac4fa3bd2d5e954eebcae3fcb40dd8d1f0e))
+
+
+### Bug Fixes
+
+* task route transition race when switching from inbox ([63c52dc](https://github.com/b0ink/doubtfire-deploy/commit/63c52dc4cdb2f2fbc701f69c64b7273f5778c868))
+
+### [10.0.1-34](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-33...v10.0.1-34) (2026-04-27)
+
+### [10.0.1-33](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-32...v10.0.1-33) (2026-04-23)
+
+
+### Features
+
+* allow paste attachment comment ([#1165](https://github.com/b0ink/doubtfire-deploy/issues/1165)) ([0f24980](https://github.com/b0ink/doubtfire-deploy/commit/0f24980e6edcc5d0f81e015990adaf14afea400e))
+
+
+### Bug Fixes
+
+* open report in turnitin ([091aaf8](https://github.com/b0ink/doubtfire-deploy/commit/091aaf8ba744bbf677f9b8f51a58bc16b7d631ab))
+
+### [10.0.1-32](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-31...v10.0.1-32) (2026-04-18)
+
+### [10.0.1-31](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-30...v10.0.1-31) (2026-04-18)
+
+### [10.0.1-30](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-29...v10.0.1-30) (2026-04-18)
+
+
+### Features
+
+* batch upload feedback csv ([#1175](https://github.com/b0ink/doubtfire-deploy/issues/1175)) ([9f95987](https://github.com/b0ink/doubtfire-deploy/commit/9f959877b6f47d878d87b468f4aab73f536d598b))
+* display icon for tasks escalated by student ([dfcfd47](https://github.com/b0ink/doubtfire-deploy/commit/dfcfd472305ef2971fa72734c18e77253b98fa11))
+* enable task pinning in explorer ([1647e2b](https://github.com/b0ink/doubtfire-deploy/commit/1647e2bcc86ac6fb08c82be9795a06939c57bb6e))
+
+
+### Bug Fixes
+
+* debounce duplicate task submission requests ([80f92e2](https://github.com/b0ink/doubtfire-deploy/commit/80f92e2277c48978e1738340063a7223c04fddb8))
+
+### [10.0.1-29](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-28...v10.0.1-29) (2026-04-15)
+
+
+### Features
+
+* discussed in class refactor ([#1145](https://github.com/b0ink/doubtfire-deploy/issues/1145)) ([4d8bb5b](https://github.com/b0ink/doubtfire-deploy/commit/4d8bb5b82d89caa02ed4936819be601b3f6977fc))
+
+### [10.0.1-28](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-27...v10.0.1-28) (2026-04-13)
+
+### [10.0.1-27](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.27...v10.0.1-27) (2026-04-13)
+
+### [10.0.27](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-26...v10.0.27) (2026-04-13)
+
+
+### Features
+
+* confirmation modal to reassign tutorials when removing staff ([5f90e90](https://github.com/b0ink/doubtfire-deploy/commit/5f90e9085d69913eced55ad54ce9ac09431d3822))
+
+### [10.0.1-26](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-25...v10.0.1-26) (2026-03-26)
+
+### [10.0.1-25](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-24...v10.0.1-25) (2026-03-26)
+
+
+### Features
+
+* display sso redirecting state ([248c992](https://github.com/b0ink/doubtfire-deploy/commit/248c992f46488f61916e00a87ca32ed987721f31))
+* pause feedback threshold during teaching period breaks ([#1138](https://github.com/b0ink/doubtfire-deploy/issues/1138)) ([12fbf81](https://github.com/b0ink/doubtfire-deploy/commit/12fbf8147107dc185a9a9cbea940efac93a0f316))
+
+### [10.0.1-24](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-23...v10.0.1-24) (2026-03-24)
+
+
+### Features
+
+* confirm recursive fix in mobile tutor view ([b64601a](https://github.com/b0ink/doubtfire-deploy/commit/b64601a425c7a64bccfaf47c1e4fccb0343b1589))
+
+### [10.0.1-23](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-22...v10.0.1-23) (2026-03-24)
+
+### [10.0.1-22](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-21...v10.0.1-22) (2026-03-23)
+
+
+### Features
+
+* display portfolio submission time ([d717b27](https://github.com/b0ink/doubtfire-deploy/commit/d717b270eb80c0b0245e6b39f0b3f0567c379512))
+* require discussion before marking complete ([#1103](https://github.com/b0ink/doubtfire-deploy/issues/1103)) ([86ae886](https://github.com/b0ink/doubtfire-deploy/commit/86ae8865268ee19e4b3430ff679358cc075e1346))
+
+
+### Bug Fixes
+
+* avoid rendering the staff list twice ([9e5be59](https://github.com/b0ink/doubtfire-deploy/commit/9e5be591b9a0cf72d01efa5e28e5b2b9e7eba043))
+* only render if submission date is valid ([04986a0](https://github.com/b0ink/doubtfire-deploy/commit/04986a0e501f0185dbd199b8d2554133217f7e75))
+
+### [10.0.1-21](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-20...v10.0.1-21) (2026-03-13)
+
+### [10.0.1-20](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-19...v10.0.1-20) (2026-03-13)
+
+### [10.0.1-19](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-18...v10.0.1-19) (2026-03-13)
+
+
+### Features
+
+* view submission history + zip file editor ([#1104](https://github.com/b0ink/doubtfire-deploy/issues/1104)) ([d706f09](https://github.com/b0ink/doubtfire-deploy/commit/d706f0918285a2c6d69c6240a93b41e88506f771))
+
+### [10.0.1-18](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-17...v10.0.1-18) (2026-03-11)
+
+
+### Bug Fixes
+
+* convert emojis in submission comment to string with colons ([#1105](https://github.com/b0ink/doubtfire-deploy/issues/1105)) ([7c508cb](https://github.com/b0ink/doubtfire-deploy/commit/7c508cba8695fcd7b6df4aaa53a70066ecb137f3))
+* dont subtract tutor note count for reading your own notes ([8fe6171](https://github.com/b0ink/doubtfire-deploy/commit/8fe61718c0e263fa965b861763337af27c175b36))
+
+### [10.0.1-17](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-16...v10.0.1-17) (2026-03-06)
+
+
+### Bug Fixes
+
+* empty prompts layout ([c77325a](https://github.com/b0ink/doubtfire-deploy/commit/c77325a2992d0b326bdeb27cd00a955aaa19811c))
+
+### [10.0.1-16](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-15...v10.0.1-16) (2026-03-04)
+
+### [10.0.1-15](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-14...v10.0.1-15) (2026-03-04)
+
+### [10.0.1-14](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-13...v10.0.1-14) (2026-03-03)
+
+
+### Features
+
+* view tutor notes from unit staff editor ([011980d](https://github.com/b0ink/doubtfire-deploy/commit/011980ddebb4caddaebb380aae4825930c077122))
+
+### [10.0.1-13](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-12...v10.0.1-13) (2026-03-02)
+
+
+### Features
+
+* add snooze moderation action ([#1096](https://github.com/b0ink/doubtfire-deploy/issues/1096)) ([bdcefda](https://github.com/b0ink/doubtfire-deploy/commit/bdcefda81e4acdef56ebe9f228632f26a904287c))
+
+### [10.0.1-12](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-11...v10.0.1-12) (2026-03-02)
+
+### [10.0.1-11](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-10...v10.0.1-11) (2026-02-28)
+
+
+### Bug Fixes
+
+* ensure deadline is returned ([6629a5f](https://github.com/b0ink/doubtfire-deploy/commit/6629a5f4b9834009dabf19a60a36c1289126034d))
+
+### [10.0.1-10](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-9...v10.0.1-10) (2026-02-26)
+
+
+### Features
+
+* display available storage for docker images ([#1092](https://github.com/b0ink/doubtfire-deploy/issues/1092)) ([81ebd34](https://github.com/b0ink/doubtfire-deploy/commit/81ebd3488d20a1e057c24b37190f4eea99bad9ec))
+
+### [10.0.1-9](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-8...v10.0.1-9) (2026-02-25)
+
+
+### Bug Fixes
+
+* typo ([4ecfe27](https://github.com/b0ink/doubtfire-deploy/commit/4ecfe27c91104c746ac8a4f9059030d5475776bb))
+
+### [10.0.1-8](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-7...v10.0.1-8) (2026-02-25)
+
+
+### Features
+
+* overflow marking ([#1086](https://github.com/b0ink/doubtfire-deploy/issues/1086)) ([e047988](https://github.com/b0ink/doubtfire-deploy/commit/e047988c4fff787852d1cc5a041cb48e11ee57f8))
+
+### [10.0.1-7](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-6...v10.0.1-7) (2026-02-25)
+
+
+### Bug Fixes
+
+* ensure timestamp is normalised to start of day ([671c391](https://github.com/b0ink/doubtfire-deploy/commit/671c3916797dc5ab680b9dac52ae68626e49d351))
+
+### [10.0.1-6](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-5...v10.0.1-6) (2026-02-24)
+
+### [10.0.1-5](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-4...v10.0.1-5) (2026-02-24)
+
+
+### Features
+
+* per grade start dates ([#1090](https://github.com/b0ink/doubtfire-deploy/issues/1090)) ([a35019a](https://github.com/b0ink/doubtfire-deploy/commit/a35019aa4011fce7808da8cc1481fae7635aac69))
+
+### [10.0.1-4](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-3...v10.0.1-4) (2026-02-23)
+
+
+### Features
+
+* allow custom target dates per target grade ([#1089](https://github.com/b0ink/doubtfire-deploy/issues/1089)) ([79b5af6](https://github.com/b0ink/doubtfire-deploy/commit/79b5af6bf05419e05dbef69e6ef1f72bfc85097c))
+
+### [10.0.1-3](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-2...v10.0.1-3) (2026-02-21)
+
+### [10.0.1-2](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-1...v10.0.1-2) (2026-02-19)
+
+
+### Bug Fixes
+
+* set min width for mentor dropdown ([75cc1b3](https://github.com/b0ink/doubtfire-deploy/commit/75cc1b3569d17cd54e71f86874addb4bc34d566f))
+
+### [10.0.1-1](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.1-0...v10.0.1-1) (2026-02-18)
+
+
+### Features
+
+* tutor notes + mentorship + moderation + escalation ([#1068](https://github.com/b0ink/doubtfire-deploy/issues/1068)) ([48f4db7](https://github.com/b0ink/doubtfire-deploy/commit/48f4db730f06e349f5e3c791f1972d23b0f8573f))
+
+
+### Bug Fixes
+
+* ensure tutor notes view extends full height ([c872ed7](https://github.com/b0ink/doubtfire-deploy/commit/c872ed766bf493456da56e33dcda48a90ed3f6ce))
+
+### [10.0.1-0](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0...v10.0.1-0) (2026-02-17)
+
+## [10.0.0](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-73...v10.0.0) (2026-02-12)
+
+## [10.0.0-73](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-72...v10.0.0-73) (2026-02-12)
+
+## [10.0.0-72](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-71...v10.0.0-72) (2026-02-12)
+
+
+### Bug Fixes
+
+* null safe user access ([f6aeecc](https://github.com/b0ink/doubtfire-deploy/commit/f6aeecc6c2c79909ca859422e7d9b3bc65ef6456))
+
+## [10.0.0-71](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-70...v10.0.0-71) (2026-02-11)
+
+
+### Features
+
+* download staff notes csv ([#1062](https://github.com/b0ink/doubtfire-deploy/issues/1062)) ([6dcfe95](https://github.com/b0ink/doubtfire-deploy/commit/6dcfe952f0415fb1327b738137f817a0fcfa0488))
+* migrate to jplag report viewer v6.3.0 ([#1082](https://github.com/b0ink/doubtfire-deploy/issues/1082)) ([697588b](https://github.com/b0ink/doubtfire-deploy/commit/697588b98e28ec663f4982c49f18fe8109ba7c34))
+
+## [10.0.0-70](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-69...v10.0.0-70) (2026-01-05)
+
+
+### Bug Fixes
+
+* skip query for unsaved task definition ([a6bdd22](https://github.com/b0ink/doubtfire-deploy/commit/a6bdd22ff864e72c679fae1844345963447fdf08))
+
+## [10.0.0-69](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-68...v10.0.0-69) (2026-01-05)
+
+
+### Features
+
+* attention required task status ([#1061](https://github.com/b0ink/doubtfire-deploy/issues/1061)) ([15365ed](https://github.com/b0ink/doubtfire-deploy/commit/15365ed4f42af790af9a9ae24dae42f041dff1df))
+* display number of stuff notes in tutor discussion ([2674d4e](https://github.com/b0ink/doubtfire-deploy/commit/2674d4e5ade26e5420b87518f4cd9da909ec7246))
+* overseer pipeline ([#1064](https://github.com/b0ink/doubtfire-deploy/issues/1064)) ([7cb8fc7](https://github.com/b0ink/doubtfire-deploy/commit/7cb8fc7471f0402c562fb8a0b87df672ceb22ea3))
+* project task planner gantt chart ([#1051](https://github.com/b0ink/doubtfire-deploy/issues/1051)) ([4f60792](https://github.com/b0ink/doubtfire-deploy/commit/4f607926e3ac305316a05607fda7f7bff7faec00))
+
+## [10.0.0-68](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-67...v10.0.0-68) (2025-12-08)
+
+
+### Bug Fixes
+
+* only trim if valid ([fbc63b0](https://github.com/b0ink/doubtfire-deploy/commit/fbc63b0308d87d921e1d74788e8da6031443e57e))
+
+## [10.0.0-67](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-66...v10.0.0-67) (2025-12-03)
+
+
+### Features
+
+* allow sidekiq web access ([#1053](https://github.com/b0ink/doubtfire-deploy/issues/1053)) ([6651279](https://github.com/b0ink/doubtfire-deploy/commit/6651279c49f431dbddf6fd5d810440ae7b3b9898))
+
+## [10.0.0-66](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-65...v10.0.0-66) (2025-12-03)
+
+
+### Features
+
+* discussion prompts ([#1042](https://github.com/b0ink/doubtfire-deploy/issues/1042)) ([730ffd0](https://github.com/b0ink/doubtfire-deploy/commit/730ffd0c3f79a5ad42c0c59c2f2c2a901ab0d702))
+
+
+### Bug Fixes
+
+* correctly set rollover end date ([0611be0](https://github.com/b0ink/doubtfire-deploy/commit/0611be04e8fe7e75ae07504945a2984839475e3a))
+
+## [10.0.0-65](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-64...v10.0.0-65) (2025-11-25)
+
+
+### Bug Fixes
+
+* typo ([bdcd75d](https://github.com/b0ink/doubtfire-deploy/commit/bdcd75d91d5ddc7d9a60317bd91289a7242251e1))
+
+## [10.0.0-64](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-63...v10.0.0-64) (2025-11-25)
+
+
+### Bug Fixes
+
+* avoid calling window to open project in new tab ([9ab015d](https://github.com/b0ink/doubtfire-deploy/commit/9ab015d168cf7e421500910766b9e6fb0bf907f5))
+* use new google fonts api for proper weight loading ([#1039](https://github.com/b0ink/doubtfire-deploy/issues/1039)) ([40f2640](https://github.com/b0ink/doubtfire-deploy/commit/40f2640e6579536cef8e82e9476733083b82bac1))
+
+## [10.0.0-63](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-62...v10.0.0-63) (2025-11-10)
+
+
+### Features
+
+* open project dashboard from portfolios view ([5b4b097](https://github.com/b0ink/doubtfire-deploy/commit/5b4b097a9b189e5a816695cce7438104f1144283)), closes [#1040](https://github.com/b0ink/doubtfire-deploy/issues/1040)
+
+## [10.0.0-62](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-61...v10.0.0-62) (2025-11-06)
+
+
+### Features
+
+* restrict assessments to tutors in the same tutorial stream ([#1033](https://github.com/b0ink/doubtfire-deploy/issues/1033)) ([29fbc14](https://github.com/b0ink/doubtfire-deploy/commit/29fbc1498b0d48811cb59c5f2a66871fbac06849))
+
+## [10.0.0-61](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-60...v10.0.0-61) (2025-11-06)
+
+## [10.0.0-60](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-59...v10.0.0-60) (2025-11-05)
+
+
+### Features
+
+* upload grades csv ([#1038](https://github.com/b0ink/doubtfire-deploy/issues/1038)) ([c67ceaa](https://github.com/b0ink/doubtfire-deploy/commit/c67ceaa84d02bb71626890fc28bb4aaea164b952))
+
+## [10.0.0-59](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-58...v10.0.0-59) (2025-11-04)
+
+
+### Bug Fixes
+
+* require comment for new evidence ([58ec499](https://github.com/b0ink/doubtfire-deploy/commit/58ec499a8d59c7202f591de661551d8a32c37527))
+* require comment for new evidence ([c5397fc](https://github.com/b0ink/doubtfire-deploy/commit/c5397fc5c444e76b431aa5d6487553c60e711c2e))
+
+## [10.0.0-58](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-57...v10.0.0-58) (2025-11-01)
+
+## [10.0.0-57](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-56...v10.0.0-57) (2025-10-30)
+
+
+### Features
+
+* open similarities from project dashboard ([#1035](https://github.com/b0ink/doubtfire-deploy/issues/1035)) ([ec0af0c](https://github.com/b0ink/doubtfire-deploy/commit/ec0af0cbe47392d6542d9741e1131954195d407f))
+
+
+### Bug Fixes
+
+* enable submission button for 'need help' trigger ([#1034](https://github.com/b0ink/doubtfire-deploy/issues/1034)) ([07de5b1](https://github.com/b0ink/doubtfire-deploy/commit/07de5b1e34f78f83c1418399f45e8c754aea530a))
+* typo ([2712a68](https://github.com/b0ink/doubtfire-deploy/commit/2712a68f6031794c571a7ee5866c653bf67de1dd))
+
+## [10.0.0-56](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-55...v10.0.0-56) (2025-10-23)
+
+
+### Bug Fixes
+
+* ensure grade has been selected ([32e03d1](https://github.com/b0ink/doubtfire-deploy/commit/32e03d111e61df42a9c67cb9e68d271f9300d5bc))
+
+## [10.0.0-55](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-54...v10.0.0-55) (2025-10-20)
+
+
+### Features
+
+* display task count in inbox ([#1025](https://github.com/b0ink/doubtfire-deploy/issues/1025)) ([3858e37](https://github.com/b0ink/doubtfire-deploy/commit/3858e3792fef3f0542d954e213987484ac97a990))
+
+
+### Bug Fixes
+
+* display correct marking session details ([c49ffed](https://github.com/b0ink/doubtfire-deploy/commit/c49ffeddedb2b79c39252770692e7df9dcd97bfc))
+* typo ([8a1dd1a](https://github.com/b0ink/doubtfire-deploy/commit/8a1dd1ac806c5acbbf8d1ccf7bdcb6af1c68dd14))
+
+## [10.0.0-54](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-53...v10.0.0-54) (2025-10-17)
+
+## [10.0.0-53](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-52...v10.0.0-53) (2025-10-17)
+
+## [10.0.0-52](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-51...v10.0.0-52) (2025-10-17)
+
+
+### Features
+
+* campus timezone ([#1022](https://github.com/b0ink/doubtfire-deploy/issues/1022)) ([4384b37](https://github.com/b0ink/doubtfire-deploy/commit/4384b376eaedf8ab66febec4c0ada53111311ff0))
+* download marking sessions for tutor ([e3fbe44](https://github.com/b0ink/doubtfire-deploy/commit/e3fbe4404661eb16b9c0e5ba19a1369dac1fb5b0))
+
+
+### Bug Fixes
+
+* display tutor name ([8956020](https://github.com/b0ink/doubtfire-deploy/commit/89560205d7316c53d77f376b5f7cfff5bf99e9c6))
+* filter out students from unit staff editor ([#1018](https://github.com/b0ink/doubtfire-deploy/issues/1018)) ([5c0c997](https://github.com/b0ink/doubtfire-deploy/commit/5c0c9974569e720a6c95aa8333c2a38d0ab4a1b0))
+* re-enable user filtering on click ([697daf2](https://github.com/b0ink/doubtfire-deploy/commit/697daf26693f20f61dcfbbeb0597a02715c9512d))
+
+## [10.0.0-51](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-50...v10.0.0-51) (2025-10-14)
+
+
+### Bug Fixes
+
+* unlock tasks when prerequisite requires rff and task is in aip state ([173d8c2](https://github.com/b0ink/doubtfire-deploy/commit/173d8c25375e231b25e64a04c1e3d2aedf741300))
+
+## [10.0.0-50](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-49...v10.0.0-50) (2025-10-13)
+
+
+### Features
+
+* jplag base code ([#1010](https://github.com/b0ink/doubtfire-deploy/issues/1010)) ([9a7a860](https://github.com/b0ink/doubtfire-deploy/commit/9a7a860fe799e351831e2a3f9701792792b76b38))
+
+## [10.0.0-49](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-48...v10.0.0-49) (2025-10-12)
+
+
+### Features
+
+* display session start and end time ([bb548b9](https://github.com/b0ink/doubtfire-deploy/commit/bb548b92d04bb7b8665444e7935317bc4b6a0981))
+
+## [10.0.0-48](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-47...v10.0.0-48) (2025-10-12)
+
+
+### Features
+
+* add tutor times summary download ([#1015](https://github.com/b0ink/doubtfire-deploy/issues/1015)) ([2b4afe2](https://github.com/b0ink/doubtfire-deploy/commit/2b4afe24e3f8139fec23337facc7656eec9a9d3a))
+
+
+### Bug Fixes
+
+* add assess in portfolio tasks as completed tasks in burndown chart ([8d36c94](https://github.com/b0ink/doubtfire-deploy/commit/8d36c94f03563a0924cfeb7d2d9e8dd911b65960))
+
+## [10.0.0-47](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-46...v10.0.0-47) (2025-09-25)
+
+
+### Features
+
+* add observer only ui ([bfbcee9](https://github.com/b0ink/doubtfire-deploy/commit/bfbcee98cfa4888241c5956372d004ec1cd813cb))
+
+## [10.0.0-46](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-45...v10.0.0-46) (2025-09-24)
+
+## [10.0.0-45](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-44...v10.0.0-45) (2025-09-22)
+
+
+### Bug Fixes
+
+* check for valid unit ([bfae1ad](https://github.com/b0ink/doubtfire-deploy/commit/bfae1ad69bb767cdad47dd8fac35cc84e5134534))
+
+## [10.0.0-44](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-43...v10.0.0-44) (2025-09-18)
+
+## [10.0.0-43](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-42...v10.0.0-43) (2025-09-17)
+
+
+### Bug Fixes
+
+* remove /api from host url ([5889edc](https://github.com/b0ink/doubtfire-deploy/commit/5889edc35bb427dfd4defefa7b77e8c81cd6dd7c))
+
+## [10.0.0-42](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-41...v10.0.0-42) (2025-09-17)
+
+
+### Features
+
+* display result of student imports ([e0503f4](https://github.com/b0ink/doubtfire-deploy/commit/e0503f424dfbef49e68b4e2f697e8d135120634e))
+* enable unit linking to lms context using deeplink ([73de1f1](https://github.com/b0ink/doubtfire-deploy/commit/73de1f1c68223c863c35198b773f0bdeaa1f549e))
+* init lti integration ([248be93](https://github.com/b0ink/doubtfire-deploy/commit/248be93e7c8b5ff060957e500b6a4943882f456c))
+* sync enrolments for all lti members ([5ec499f](https://github.com/b0ink/doubtfire-deploy/commit/5ec499f37b93f2b4bd56d145501fd55ab6af45e6))
+* sync grades for all members ([0f5daa8](https://github.com/b0ink/doubtfire-deploy/commit/0f5daa852f4c3750367f7d2c3f9b0c07ffbfed3f))
+* unauthorised lti banner ([12e65d8](https://github.com/b0ink/doubtfire-deploy/commit/12e65d8f1609f2030b25347beb1c0e06f513f65c))
+
+
+### Bug Fixes
+
+* forward correct lti token ([e95544e](https://github.com/b0ink/doubtfire-deploy/commit/e95544e2e158affefafd2fc0fe9657bf47c200db))
+
+## [10.0.0-41](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-40...v10.0.0-41) (2025-09-15)
+
+## [10.0.0-40](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-39...v10.0.0-40) (2025-09-15)
+
+
+### Features
+
+* assess in portfolio status ([ada4a21](https://github.com/b0ink/doubtfire-deploy/commit/ada4a21c945018abeb9ca1169e48fdd822a27322))
+* ensure complete button updates aip only tasks to working on it ([c8dd020](https://github.com/b0ink/doubtfire-deploy/commit/c8dd020a5e572765f7710c266ae2b20563ab05c2))
+* send automated message when set back to working on it ([a858d3a](https://github.com/b0ink/doubtfire-deploy/commit/a858d3a7b2f41ac7478d4917d2d2f6c68a167e6e))
+* submission type modal ([52f7d40](https://github.com/b0ink/doubtfire-deploy/commit/52f7d404ef154ff27c0ba887c8321360df95ddb6))
+
+
+### Bug Fixes
+
+* typo ([2a2e4a4](https://github.com/b0ink/doubtfire-deploy/commit/2a2e4a41e6ea20152632a9f82ca1723d9a6b56cc))
+* wording ([6291bd6](https://github.com/b0ink/doubtfire-deploy/commit/6291bd61ccc4ff45c708300d0a5014a59a565414))
+
+## [10.0.0-39](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-38...v10.0.0-39) (2025-09-10)
+
+
+### Features
+
+* display warning above task sheet for incomplete prerequisites ([86433bb](https://github.com/b0ink/doubtfire-deploy/commit/86433bb18e6ff9b024d7c397b8744618721b602f))
+
+## [10.0.0-38](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-37...v10.0.0-38) (2025-09-09)
+
+
+### Bug Fixes
+
+* ensure task prerequisites are correctly cached ([3945f4e](https://github.com/b0ink/doubtfire-deploy/commit/3945f4e2ecff1a1d79662c099baf745bfd6f4b7d))
+
+## [10.0.0-37](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-36...v10.0.0-37) (2025-09-09)
+
+## [10.0.0-36](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-35...v10.0.0-36) (2025-09-09)
+
+## [10.0.0-35](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-34...v10.0.0-35) (2025-09-09)
+
+
+### Features
+
+* add task prerequisites ([d5c1a51](https://github.com/b0ink/doubtfire-deploy/commit/d5c1a51dc049b025ae85b2ef6513630a197eabee))
+* cross out prerequisite tasks that have been submitted ([7e1a7db](https://github.com/b0ink/doubtfire-deploy/commit/7e1a7dbd3351dbcc8230f115554d6afdfaca0f70))
+* show list of prerequisites in task dashboard ([111f60a](https://github.com/b0ink/doubtfire-deploy/commit/111f60a4272abcf683c50b711bd43a1f772153ec))
+
+
+### Bug Fixes
+
+* typo ([e0c867f](https://github.com/b0ink/doubtfire-deploy/commit/e0c867fc7f24301d414ed584b6859e09d95c652c))
+
+## [10.0.0-34](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-33...v10.0.0-34) (2025-09-08)
+
+
+### Features
+
+* task assessment counts csv ([c2c6002](https://github.com/b0ink/doubtfire-deploy/commit/c2c6002cef6e5a75f722c964bf2843cf662380f4))
+
+
+### Bug Fixes
+
+* allow scrolling in edit profile form dialog ([ee2b908](https://github.com/b0ink/doubtfire-deploy/commit/ee2b9085a931df551408cd12dbc8187c04d088fc))
+
+## [10.0.0-33](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-32...v10.0.0-33) (2025-09-04)
+
+## [10.0.0-32](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-31...v10.0.0-32) (2025-09-02)
+
+## [10.0.0-31](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-30...v10.0.0-31) (2025-08-27)
+
+
+### Bug Fixes
+
+* use new checked_in comment type ([3033c6c](https://github.com/b0ink/doubtfire-deploy/commit/3033c6ca3c27ad4fc0a7ce4bda3ac44df09516e3))
+
+## [10.0.0-30](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-29...v10.0.0-30) (2025-08-27)
+
+## [10.0.0-29](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-28...v10.0.0-29) (2025-08-27)
+
+## [10.0.0-28](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-27...v10.0.0-28) (2025-08-27)
+
+## [10.0.0-27](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-26...v10.0.0-27) (2025-08-27)
+
+
+### Features
+
+* add option for qr footer text ([9e9b9db](https://github.com/b0ink/doubtfire-deploy/commit/9e9b9dbfb13d7531cb5387060407e23c25212cca))
+* support viewing qr for selected student in tutor view ([1f7fa51](https://github.com/b0ink/doubtfire-deploy/commit/1f7fa51d65767b3186e6eda8970a408cf0e6c847))
+
+
+### Bug Fixes
+
+* add padding when edit profile form displayed as modal ([a3f3b97](https://github.com/b0ink/doubtfire-deploy/commit/a3f3b977251a206b268c369c370934ff69b574d3))
+* show student id ([d1eeefb](https://github.com/b0ink/doubtfire-deploy/commit/d1eeefbea53cb13385bef2b3ba6b04d2f606c391))
+
+## [10.0.0-26](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-25...v10.0.0-26) (2025-08-27)
+
+
+### Features
+
+* add attendance marked task comment ([1559e81](https://github.com/b0ink/doubtfire-deploy/commit/1559e8104c8c4bc137df4f46a0a5ed0e345260af))
+* add tutor discussion to unit dropdown ([90f4149](https://github.com/b0ink/doubtfire-deploy/commit/90f41493313d6a3ad9bdafdd4cd4865c80e94ca2))
+* redirect back to inbox if unit context exists ([b7f4ab9](https://github.com/b0ink/doubtfire-deploy/commit/b7f4ab9e7801fbb33ffc6b4e02bf6613e6d7a524))
+
+
+### Bug Fixes
+
+* enforce minimum height on task comments viewer ([a7588e6](https://github.com/b0ink/doubtfire-deploy/commit/a7588e6f007381c04a570650257cd6f2ff93e5ae))
+* set max width on main container ([d1e5ab1](https://github.com/b0ink/doubtfire-deploy/commit/d1e5ab1427352fcf1b0fdd920cb9838a4f8799a0))
+
+## [10.0.0-25](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-24...v10.0.0-25) (2025-08-26)
+
+
+### Bug Fixes
+
+* only clear draft comment after successfully sending message ([2556355](https://github.com/b0ink/doubtfire-deploy/commit/2556355b0c3e1770fab021ed7d46e462882025b3))
+
+## [10.0.0-24](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-23...v10.0.0-24) (2025-08-21)
+
+## [10.0.0-23](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-22...v10.0.0-23) (2025-08-14)
+
+## [10.0.0-22](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-21...v10.0.0-22) (2025-08-14)
+
+
+### Features
+
+* download tasks awaiting feedback csv ([4a94373](https://github.com/b0ink/doubtfire-deploy/commit/4a943736689e41c405a831ca88a1303fb7c00385))
+
+
+### Bug Fixes
+
+* add return statement ([b8779e7](https://github.com/b0ink/doubtfire-deploy/commit/b8779e70d4decdc837caa8c84e8e8e2dfd3faf7f))
+* show full progress when sidekiq job is complete ([6a60d94](https://github.com/b0ink/doubtfire-deploy/commit/6a60d94b896d173a5008badd1b45bc7f45eee808))
+
+## [10.0.0-21](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-20...v10.0.0-21) (2025-08-12)
+
+
+### Bug Fixes
+
+* clear notification after fetching task comments ([c2d1536](https://github.com/b0ink/doubtfire-deploy/commit/c2d15367d9c53cb426dd12e73dc8d0b779a7f563))
+
+## [10.0.0-20](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-19...v10.0.0-20) (2025-08-11)
+
+## [10.0.0-19](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-18...v10.0.0-19) (2025-08-07)
+
+
+### Features
+
+* mark as discussed button in mobile tutor discussion ([9e62214](https://github.com/b0ink/doubtfire-deploy/commit/9e62214df772355048f4c7c7ffc13f3181f746e2))
+
+## [10.0.0-18](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-17...v10.0.0-18) (2025-07-31)
+
+
+### Bug Fixes
+
+* ensure no progress returns 0 ([9cb1f1a](https://github.com/b0ink/doubtfire-deploy/commit/9cb1f1ab770ac798ec8ecc555ceb73024bc98649))
+
+## [10.0.0-17](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-16...v10.0.0-17) (2025-07-31)
+
+
+### Features
+
+* return task to not started status ([bce1483](https://github.com/b0ink/doubtfire-deploy/commit/bce1483296064bafd44bc538f83731809d816a05))
+
+
+### Bug Fixes
+
+* check if project task stats exist ([e59af80](https://github.com/b0ink/doubtfire-deploy/commit/e59af803f8440338b0210b6a437537372f5dac5b))
+* ensure new comments are fetched for selected project only ([3b0e387](https://github.com/b0ink/doubtfire-deploy/commit/3b0e3877e05f162143fc78065cee9a191d0755f4))
+* ensure whitespace is trimmed ([fe687df](https://github.com/b0ink/doubtfire-deploy/commit/fe687df8b035ef851b9d147e01f575187f428a8c))
+* prevent additional inbox queries ([0d35f7f](https://github.com/b0ink/doubtfire-deploy/commit/0d35f7f4ef2e87dd078edf20e509c8f6efc5c216))
+
+## [10.0.0-16](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-15...v10.0.0-16) (2025-07-29)
+
+## [10.0.0-15](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-14...v10.0.0-15) (2025-07-29)
+
+
+### Bug Fixes
+
+* correctly load start page ([e297f26](https://github.com/b0ink/doubtfire-deploy/commit/e297f261e3df19faf11be9fde6515ce75434c320))
+* map correct variables ([b180799](https://github.com/b0ink/doubtfire-deploy/commit/b180799efd716d802cf83ce08b6df0639d9055b6))
+* prevent report button from expanding accordion ([e715415](https://github.com/b0ink/doubtfire-deploy/commit/e7154157ff1b88817141bae5b1b3de9fd37171f0))
+
+## [10.0.0-14](https://github.com/b0ink/doubtfire-deploy/compare/v10.0.0-13...v10.0.0-14) (2025-07-28)
+
+
+### Features
+
+* portfolio zip downloading via sidekiq ([9000830](https://github.com/b0ink/doubtfire-deploy/commit/9000830e5e98bc0b921d618c034471eeddf996b4))
+* show list of active sidekiq jobs ([aa85665](https://github.com/b0ink/doubtfire-deploy/commit/aa85665670a23fea556c6420f139e7e7853d16ba))
+* show maintenance ui when api fails ([29bb95f](https://github.com/b0ink/doubtfire-deploy/commit/29bb95f5974dc8f258b204957a212a8399ad2d6e))
+* sidekiq progress modal component ([b9691e7](https://github.com/b0ink/doubtfire-deploy/commit/b9691e793204e84fae323610a7b555b15e065514))
+
+
+### Bug Fixes
+
+* fallback to task definition due date ([bef0a9c](https://github.com/b0ink/doubtfire-deploy/commit/bef0a9cbfefc58407f851d3ca73b90af6b81151f))
+
+## [10.0.0-13](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-12...v10.0.0-13) (2025-07-16)
+
+
+### Bug Fixes
+
+* display task-date-slider only when task exists ([c886034](https://github.com/macite/doubtfire-deploy/commit/c886034d4bf69851f4b06599a45bd1b135c3fff2))
+
+## [10.0.0-12](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-11...v10.0.0-12) (2025-07-15)
+
+
+### Bug Fixes
+
+* exclude jplag route from ngsw cache ([69b55bb](https://github.com/macite/doubtfire-deploy/commit/69b55bb85d8583b6935e08c91aad63e98e6ce887))
+
+## [10.0.0-11](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-10...v10.0.0-11) (2025-07-15)
+
+## [10.0.0-10](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-9...v10.0.0-10) (2025-07-15)
+
+## [10.0.0-9](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-8...v10.0.0-9) (2025-07-15)
+
+## [10.0.0-8](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-7...v10.0.0-8) (2025-07-15)
+
+## [10.0.0-7](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-6...v10.0.0-7) (2025-07-14)
+
+
+### Features
+
+* add icon to discussed in class update ([c11cec0](https://github.com/macite/doubtfire-deploy/commit/c11cec02ece3b6bf7c2e36998ee2fa2a3572bc58))
+* add jplag report download button to student submission tutor teacher footer view ([2ec1b06](https://github.com/macite/doubtfire-deploy/commit/2ec1b06b5330c5e142cc3fc01c49c2aded5411cb))
+* add tutor discussion qr scanning ([e549c4e](https://github.com/macite/doubtfire-deploy/commit/e549c4e0ac9377bd864c81122cffce004681c845))
+* auto send dicussed in class comment ([fbf90c7](https://github.com/macite/doubtfire-deploy/commit/fbf90c7fdfa440f565e2c8abae4ae62bc1fe70eb))
+* **comments:** enhanced drafting for messages using localStorage ([f331734](https://github.com/macite/doubtfire-deploy/commit/f33173409f0804da4de24e1e6ec53971896b28e9))
+* **comments:** enhanced drafting for messages using localStorage ([b6f6831](https://github.com/macite/doubtfire-deploy/commit/b6f683175db6ab9549b8b4481ab54bb89700016a))
+* edit staff note ([b2d8ba4](https://github.com/macite/doubtfire-deploy/commit/b2d8ba41b1dc467a03728d5df4ede6ac6fb3c9a1))
+* fetch new comments on task switching and status updates ([1b7da69](https://github.com/macite/doubtfire-deploy/commit/1b7da692423acaf53b96229b665b971360bacc89))
+* force scanner to use back camera, enhance ux ([e5799b1](https://github.com/macite/doubtfire-deploy/commit/e5799b18ec0603123b6a99b3733919d2611b4fbd))
+* highlight selected task ([25b361f](https://github.com/macite/doubtfire-deploy/commit/25b361f699ad54e45c32167ccae230635a6b2758))
+* indicate reply has been deleted ([c3e288a](https://github.com/macite/doubtfire-deploy/commit/c3e288ae95e2fa5fd43bdf3922e81501f26e1baf))
+* init qr tutor marking state ([41d1d61](https://github.com/macite/doubtfire-deploy/commit/41d1d61a417573e33c4344898ae6d7562c459004))
+* init reply to button ([100a533](https://github.com/macite/doubtfire-deploy/commit/100a5335aa7f37f4477b9d9b8f43806ca32c640b))
+* init staff notes ([c7eed99](https://github.com/macite/doubtfire-deploy/commit/c7eed9903bcc4463f4d0b52889e0d3d9045b03ba))
+* jplag report download button in task explorer view ([16670a2](https://github.com/macite/doubtfire-deploy/commit/16670a27d5dc544ae828da85cda48358cab4d75e))
+* link note that is being replied to ([27726b3](https://github.com/macite/doubtfire-deploy/commit/27726b3f1368031c24bf069bde4f930dd02c1e80))
+* load jplag report viewer into iframe ([1360438](https://github.com/macite/doubtfire-deploy/commit/13604383b403dbf82b013786127a72fab08ac895))
+* localized date time pipe ([5cf752b](https://github.com/macite/doubtfire-deploy/commit/5cf752baf1b9de6105ea2a951ec75818ce1e0cfc))
+* mark task as discussed ([a54f94f](https://github.com/macite/doubtfire-deploy/commit/a54f94f045b4280d0f13304a6b5728b62fc4107e))
+* message tooltip timestamps ([2d79007](https://github.com/macite/doubtfire-deploy/commit/2d79007c033d56218326f55dd8d6821e17fec74f))
+* native jplag report viewer state ([8f6bc6a](https://github.com/macite/doubtfire-deploy/commit/8f6bc6ae5b80502b5d81b65bab2be3aaa56ce42f))
+* qr code generation for student projects ([6f8b94f](https://github.com/macite/doubtfire-deploy/commit/6f8b94f7c0b48d292dfe28871ff7ae7fda86b2b9))
+* redirect back to home if exiting the scanner ([71f09ae](https://github.com/macite/doubtfire-deploy/commit/71f09ae77da6f0a2f5ed135071c92c110940c2f5))
+* reply to ui ([40078df](https://github.com/macite/doubtfire-deploy/commit/40078df477bd300c9b8897976d10658fb91a6d04))
+* show number of notes project has ([f3d4c4c](https://github.com/macite/doubtfire-deploy/commit/f3d4c4c00128ca00dec18ea9950c01df25b75b61))
+* staff note deletion ([0ab1ebf](https://github.com/macite/doubtfire-deploy/commit/0ab1ebff3964d8665d9560bf3007a2d30109ee37))
+* switch to staff note tab view ([65f8c71](https://github.com/macite/doubtfire-deploy/commit/65f8c71bd37ef71481bd14f591af263470987a6e))
+* task and unit ilos ui ([1cef438](https://github.com/macite/doubtfire-deploy/commit/1cef438b458efcee4adce01cc81648d32bb97f35))
+* view filtered tasks only button ([a4e422d](https://github.com/macite/doubtfire-deploy/commit/a4e422dcf3dfa329b83cd7e3d521fc3665c9c45f))
+* view staff notes in portfolio assessment ([020ab5b](https://github.com/macite/doubtfire-deploy/commit/020ab5b9a98a401835e41bee7abc3dee70978c07))
+
+
+### Bug Fixes
+
+* allow oversized images to be scrollable ([8ff67d2](https://github.com/macite/doubtfire-deploy/commit/8ff67d2f8e483813bc3af0dc2429b58fe16f8f2b))
+* avoid fetching twice if no comments are cached yet ([d219d49](https://github.com/macite/doubtfire-deploy/commit/d219d49ca6457119084d4c3d2cb39343dece5aa0))
+* decode url from qr code ([31822ab](https://github.com/macite/doubtfire-deploy/commit/31822abaa4c66e2dcbc3ab74c71fe0f6e9b5861d))
+* discussed context type ([d87e620](https://github.com/macite/doubtfire-deploy/commit/d87e620ab54aa75f03d8295f0319798214ad39f0))
+* display load more button only if there are more tasks ([84d5bca](https://github.com/macite/doubtfire-deploy/commit/84d5bcaa4f6329ed34f30a58d88e18fce9c3a76d))
+* enable unit name text wrapping ([5f779b8](https://github.com/macite/doubtfire-deploy/commit/5f779b8cb626ada2e8b6488812424813cc5e9913))
+* ensure jplag iframe extends to full height ([7ae6466](https://github.com/macite/doubtfire-deploy/commit/7ae6466e6586ceaf58edec8a741c9e2f8a737c0c))
+* ensure scanner doesn't break on ios ([a0b010e](https://github.com/macite/doubtfire-deploy/commit/a0b010ef31161b6cf2ab1038deb82c199ffb9ecb))
+* improve task similarity notice ui ([ba26841](https://github.com/macite/doubtfire-deploy/commit/ba2684192c2a8a139237affc4c0702af901f1808))
+* match comments-modals's original max width ([7edb445](https://github.com/macite/doubtfire-deploy/commit/7edb445d7bc5f61daba1b47a3a36b633b551267e))
+* merge conflict ([e599fe3](https://github.com/macite/doubtfire-deploy/commit/e599fe35ec338cfd7f5ffc419a3379d3f3160312))
+* show edit icon for authors only ([a83a875](https://github.com/macite/doubtfire-deploy/commit/a83a875f25efbe9297fe76d773ef4ff55456bcf8))
+* support markdown ([3ac10f6](https://github.com/macite/doubtfire-deploy/commit/3ac10f6cab39dab42ce19f61029488d220786703))
+* **task-comment-composer:** deleting the key when text is empty ([6ef91e0](https://github.com/macite/doubtfire-deploy/commit/6ef91e0ddb119e03dbaf2b6e53e450e5bcc58b8b))
+* update discussion route ([b5c35d9](https://github.com/macite/doubtfire-deploy/commit/b5c35d9cb0be11a6c6cbd49d9e6aee37bb5b83cd))
+* welcome page redirect issues ([14ad26e](https://github.com/macite/doubtfire-deploy/commit/14ad26e8ed4acf6f77043447a2691360fd62ce51))
+
+## [10.0.0-6](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-5...v10.0.0-6) (2025-06-13)
+
+
+### Features
+
+* add spec con and flexible dates ([a874cff](https://github.com/macite/doubtfire-deploy/commit/a874cff846e788a1820da7e19899ecb20a113888))
+
+
+### Bug Fixes
+
+* only get task feedback templates if staff ([8341b93](https://github.com/macite/doubtfire-deploy/commit/8341b933487ccd451a15cb8f7ec6afc1695cb121))
+* remove unnecessary safe pipe ([c92242a](https://github.com/macite/doubtfire-deploy/commit/c92242ad9afb0a934d4e8fb00afee0c69782c625))
+
+## [10.0.0-5](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-4...v10.0.0-5) (2025-05-30)
+
+
+### Bug Fixes
+
+* correct broken transition hooks ([d237eda](https://github.com/macite/doubtfire-deploy/commit/d237eda82dd989fc1b69d6e4236932050bc5b1a4))
+* delay authorisation code until after authentication ([34410d4](https://github.com/macite/doubtfire-deploy/commit/34410d4afdf5bd73d9c244a6f40c7fb78b714e63))
+* ensure transition in student pages update pdf view ([68a2f38](https://github.com/macite/doubtfire-deploy/commit/68a2f38167c792974aafd907f04fcf9e8b5bf091))
+* simplify setting of auto redirect on login ([60dbceb](https://github.com/macite/doubtfire-deploy/commit/60dbceb2a104894b4eff157c038446796bf01708))
+
+## [10.0.0-4](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-3...v10.0.0-4) (2025-04-15)
+
+
+### Bug Fixes
+
+* ensure sign in waits for global load ([fb6e61f](https://github.com/macite/doubtfire-deploy/commit/fb6e61f874797cd48e77f2a8d0a32f345f5b785b))
+
+## [10.0.0-3](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-2...v10.0.0-3) (2025-04-10)
+
+
+### Bug Fixes
+
+* correct auth callback ([2e087d2](https://github.com/macite/doubtfire-deploy/commit/2e087d267c8bfde633550823aed460379a643ad9))
+
+## [10.0.0-2](https://github.com/macite/doubtfire-deploy/compare/v10.0.0-1...v10.0.0-2) (2025-04-10)
+
+
+### Bug Fixes
+
+* correct handling of errors on auth ([622768a](https://github.com/macite/doubtfire-deploy/commit/622768a06112910d5ba79061689fc0ba486982a5))
+
+## [10.0.0-1](https://github.com/macite/doubtfire-deploy/compare/v8.0.37...v10.0.0-1) (2025-04-10)
+
+
+### Features
+
+* add comment text to comment area ([5c45415](https://github.com/macite/doubtfire-deploy/commit/5c45415eafb38e221963781e4575480294d74e09))
+* add connected learning outcomes ([9532d9f](https://github.com/macite/doubtfire-deploy/commit/9532d9ffe620d67d7bc83137d59e0a91ecf8a73a))
+* add editor for task feedback templates ([3da7a4b](https://github.com/macite/doubtfire-deploy/commit/3da7a4b54a5892ea99cd365ae439677b0f52ed6f))
+* add feedback template picker to comment composer ([9acc365](https://github.com/macite/doubtfire-deploy/commit/9acc36502dc3fd2365817f73ccc742dd3947e293))
+* add field to connect outcomes ([db2d2bc](https://github.com/macite/doubtfire-deploy/commit/db2d2bc32b19165bac8ff6ba0282a16adffbb815))
+* add glo editor ([4efe876](https://github.com/macite/doubtfire-deploy/commit/4efe87694a426c4b6a55ef943576fe47498166e5))
+* add greeting and summary chip ([ed68317](https://github.com/macite/doubtfire-deploy/commit/ed683174ab7b330a48b2aeacdd65012396357479))
+* add option for institution logo ([5141529](https://github.com/macite/doubtfire-deploy/commit/5141529b1ed37f8ca254e89e1b91edac3139f166))
+* add startpage property to auto scroll to on pdf render ([90830cd](https://github.com/macite/doubtfire-deploy/commit/90830cdba73bcfe564362015b5abaf2c40810f5f))
+* combine outcome and template editor ([c12536b](https://github.com/macite/doubtfire-deploy/commit/c12536bc4375b1ae5f19d4e54d0783b6948921eb))
+* edit feedback chips ([04f8dce](https://github.com/macite/doubtfire-deploy/commit/04f8dce30f79d86637abd6db2aa9fa3aa14d1de2))
+* **feedback-template:** add hierarchical sorting for feedback templates ([8db1844](https://github.com/macite/doubtfire-deploy/commit/8db1844402d080902a9d3938ecc04dd7a2f0340f))
+* **feedback-template:** improve sorting logic for feedback templates ([d3f156a](https://github.com/macite/doubtfire-deploy/commit/d3f156a640e6a3da99c147c4c2303a1af3050f8f))
+* **feedback-template:** merge upstream changes ([0fb1d8a](https://github.com/macite/doubtfire-deploy/commit/0fb1d8abfa3264befddd97e1ce0832359866919d))
+* fetch feedback chips when selecting task in unit editor ([9caeda4](https://github.com/macite/doubtfire-deploy/commit/9caeda4e71946ddb7907027ebf7a54397f11606f))
+* init pdf viewer on page 2 for student submissions ([45cc89e](https://github.com/macite/doubtfire-deploy/commit/45cc89e18cff8fcde66480448eea178940d316a2))
+* make template editor reusable across contexts ([a42f177](https://github.com/macite/doubtfire-deploy/commit/a42f177f61b3f7166edf3b9c93dfd2dcd3949df7))
+* modify fields and operate on learning outcomes ([65ffc4f](https://github.com/macite/doubtfire-deploy/commit/65ffc4f8d61a9d0b2cc7c5f8d13db932436fc4f5))
+* persistent pdf zoom level ([1348da2](https://github.com/macite/doubtfire-deploy/commit/1348da2d345b080002a62a24d717fac15c4b0a92))
+* rebuild auth with refresh token ([5d3a36e](https://github.com/macite/doubtfire-deploy/commit/5d3a36e8f16e8993c5607241112c490361a31c97))
+* show chips on picker ([e54216f](https://github.com/macite/doubtfire-deploy/commit/e54216f8472b67cf9f2ff69c9bcb3355efa90081))
+* suggest task status according to feedback ([95796da](https://github.com/macite/doubtfire-deploy/commit/95796da4e7855bcd76023754d95cec8d033668fc))
+
+
+### Bug Fixes
+
+* adjust ui for nested csv modal ([d7fac6f](https://github.com/macite/doubtfire-deploy/commit/d7fac6f0fb23f060373fd4c40f5e82b960098c77))
+* check difference before updating linked outcomes ([aa0bc76](https://github.com/macite/doubtfire-deploy/commit/aa0bc76d32656dc14d28ebca520e4f90d6d9434e))
+* check for unit context for template csv name ([6ecec84](https://github.com/macite/doubtfire-deploy/commit/6ecec8483222304161f9cda87a8bdf3ecd774bcb))
+* comment console logs ([e86162d](https://github.com/macite/doubtfire-deploy/commit/e86162d1592d8418bab3c889b1d0bbfe3662b86d))
+* correct a typo in /edit_profile ([4b7901f](https://github.com/macite/doubtfire-deploy/commit/4b7901fd03d9652230aecb52791313f052d7b53d))
+* correct string manipulation for task period formatting ([aa06cbf](https://github.com/macite/doubtfire-deploy/commit/aa06cbf3a08efa02f508062d47c127289fc8c6fa))
+* display feedback picker chips in color ([6ae0771](https://github.com/macite/doubtfire-deploy/commit/6ae077149d16e5af538d432a9ce2db974298b549))
+* display nested feedback groups in picker ([db93b18](https://github.com/macite/doubtfire-deploy/commit/db93b187cfe6e197a3b6243445809ec6d767d4bd))
+* display task status in coloured chip in feedback editor ([73986e8](https://github.com/macite/doubtfire-deploy/commit/73986e89839603b19f643404e5a48964ac9a3c1b))
+* exclude greeting and summary from selected ([1978e54](https://github.com/macite/doubtfire-deploy/commit/1978e5410f6aa9314252ae3cf922917033f551f0))
+* feedback picker search ([3a5e02e](https://github.com/macite/doubtfire-deploy/commit/3a5e02e2f7864b9e1ea4f8d49ce69d23addbcc5a))
+* **feedback-template-editor:** add missing operator ([a1f220c](https://github.com/macite/doubtfire-deploy/commit/a1f220c9f5462a2b91035eb936f3ff25b7d4cd67))
+* **feedback-template-editor:** improve feedback template sorting logic ([bd48c40](https://github.com/macite/doubtfire-deploy/commit/bd48c40c4c3b0a3d67d41373b624ed8b3b754f4a))
+* **feedback-template:** ensure sorting defaults are applied ([96f7555](https://github.com/macite/doubtfire-deploy/commit/96f7555f9dfcf4c62ee3dd54b9e9e74087bec47a))
+* focus on composer input after selecting chip ([95afdff](https://github.com/macite/doubtfire-deploy/commit/95afdff12aac914bb8af8727f8b8d960bc3b072c))
+* hide feedback group comment text ([55a6625](https://github.com/macite/doubtfire-deploy/commit/55a662584c4b8b6123335bcbc5149a9f0f0701d8))
+* hide picker on task change ([198b7f9](https://github.com/macite/doubtfire-deploy/commit/198b7f9d0ccad631059ed5e1ad5487604582074b))
+* hide summary instead of comment text for groups ([7644cba](https://github.com/macite/doubtfire-deploy/commit/7644cba92f92f5c261501c1907f7f5418538e3a7))
+* hide template editor on outcome switch ([a3706e9](https://github.com/macite/doubtfire-deploy/commit/a3706e9394b78edf9ec15030246c98acca9d3852))
+* lock ng2-pdf-viewer to 10.2.2 ([2cf6215](https://github.com/macite/doubtfire-deploy/commit/2cf62152524ec728c73aaa23f678bbce9ae6b4d1))
+* only get feedback chips if staff ([7f4381e](https://github.com/macite/doubtfire-deploy/commit/7f4381e1179400642821068d1acdba346a2969a2))
+* organise outcome and feedback csv functionality ([641f1d9](https://github.com/macite/doubtfire-deploy/commit/641f1d9f75177d48b3911c300e23c901e0a603e1))
+* prevent saving empty items ([0eed547](https://github.com/macite/doubtfire-deploy/commit/0eed5477940db511cee09bbdb7ccb0adde57cbbf))
+* refine feedback editor ([f410cfe](https://github.com/macite/doubtfire-deploy/commit/f410cfe47b0c242f1a164c6345bc4d29f5659f6a))
+* refresh context when changing task defs ([c078bcf](https://github.com/macite/doubtfire-deploy/commit/c078bcf40198c5495d4c94354fab411d3e0ee934))
+* remove duplicate alert ([955d0a1](https://github.com/macite/doubtfire-deploy/commit/955d0a17ae23be77954145ba189ac8bb0aa90da0))
+* remove glo outcome specific csv buttons ([579c491](https://github.com/macite/doubtfire-deploy/commit/579c49170808a6fcca1bfd67f0923f0339255463))
+* remove selected outcomes from dropdown ([5494384](https://github.com/macite/doubtfire-deploy/commit/5494384f1a4becf462dd031e89fae2734ed46e55))
+* reply to position and wrapping ([e065c46](https://github.com/macite/doubtfire-deploy/commit/e065c46c3fe6689a7b295a3f91a576eabc11f7bd))
+* reset template table for new outcome ([7585c1c](https://github.com/macite/doubtfire-deploy/commit/7585c1c60ca8fe168084ec3d857aec4856bfb0db))
+* save connected outcomes ([eb3cf6d](https://github.com/macite/doubtfire-deploy/commit/eb3cf6daf99b893642336efb48ed58bc9c8b8207))
+* save linked outcomes upon selection ([07f103d](https://github.com/macite/doubtfire-deploy/commit/07f103de46defa2a78f5d7c43030e67255c0d5fe))
+* save to proper cache and clean up ([80edff2](https://github.com/macite/doubtfire-deploy/commit/80edff2ef04137b3d38ccdd252788cfb40f458f0))
+* show description for connected outcome selection ([0f2c164](https://github.com/macite/doubtfire-deploy/commit/0f2c164579491298b81849cc110301229f2ca5af))
+* show picker above composer and below comments ([ef524f1](https://github.com/macite/doubtfire-deploy/commit/ef524f1b048b3bfe1781307a34e1a5fe364943a4))
+* show proper selected outcome or template ([0ac3881](https://github.com/macite/doubtfire-deploy/commit/0ac3881e7f6d0f5b7ddeb85e5e8f9e6835c5dba6))
+* support hot reloading on windows ([247330e](https://github.com/macite/doubtfire-deploy/commit/247330e46d74186519dbcbbef8378b508eaca83f))
+* support windows build ([3594528](https://github.com/macite/doubtfire-deploy/commit/35945288c73052afd28209a7381335af2b14ba10))
+* template editor not showing if new ([6cfe379](https://github.com/macite/doubtfire-deploy/commit/6cfe37999fa7f484e1b89f4dbe657b99907adae1))
+* tlo csv url ([73588d8](https://github.com/macite/doubtfire-deploy/commit/73588d886118861bbd3e5ae380cddc7baa532dbb))
+* update packages ([e5a57f8](https://github.com/macite/doubtfire-deploy/commit/e5a57f8ba3669345a272b308b0c892fdab4843ef))
+* upon save update entity in frontend ([a128744](https://github.com/macite/doubtfire-deploy/commit/a1287449b945295ced60e86a21bcaab67ed0f9bd))
+* use icon instead of color for template task status ([11a3993](https://github.com/macite/doubtfire-deploy/commit/11a399324ee64af901f44f28de3526cbd7650bac))
+* use task status color for recommended button ([174cde0](https://github.com/macite/doubtfire-deploy/commit/174cde0022d0c728d2c6408d40129d6c343aa91d))
+
+### [8.0.37](https://github.com/macite/doubtfire-deploy/compare/v8.0.36...v8.0.37) (2025-03-10)
+
+
+### Bug Fixes
+
+* ensure overseer download get resources zip ([a1e4d71](https://github.com/macite/doubtfire-deploy/commit/a1e4d71b34733bc53cd2cfa63ee1e70f8f43386f))
+
+### [8.0.36](https://github.com/macite/doubtfire-deploy/compare/v8.0.35...v8.0.36) (2025-03-07)
+
+
+### Bug Fixes
+
+* overseer image admin in unit and task ([72c89b3](https://github.com/macite/doubtfire-deploy/commit/72c89b30cca426d56c7efbbac34e00fd734fe714))
+
+### [8.0.35](https://github.com/macite/doubtfire-deploy/compare/v8.0.34...v8.0.35) (2025-02-28)
+
+
+### Bug Fixes
+
+* correct ability to edit teaching periods ([ce37bf2](https://github.com/macite/doubtfire-deploy/commit/ce37bf27689744a6f43be46912be0d14e2cdbc6b))
+* ensure an old grade is present in portfolio assessment ([7daacd1](https://github.com/macite/doubtfire-deploy/commit/7daacd1bf0af050aeb6db503d963e574f68b9a94))
+* ensure overseer images can be edited ([3479b7a](https://github.com/macite/doubtfire-deploy/commit/3479b7af589b9ba986ddbb7dc8a84fd0be3e66e6))
+
+### [8.0.34](https://github.com/macite/doubtfire-deploy/compare/v8.0.33...v8.0.34) (2025-02-12)
+
+
+### Bug Fixes
+
+* enhance rollover messages ([48348c8](https://github.com/macite/doubtfire-deploy/commit/48348c8e6a7ffdb4186fe3e6d27fe860076922e1))
+
+### [8.0.33](https://github.com/macite/doubtfire-deploy/compare/v8.0.32...v8.0.33) (2025-01-29)
+
+
+### Bug Fixes
+
+* nginx conf redirect for spa ([95c0ca9](https://github.com/macite/doubtfire-deploy/commit/95c0ca9384e5a0fe7e522f61146b711b706712c1))
+
+### [8.0.32](https://github.com/macite/doubtfire-deploy/compare/v8.0.31...v8.0.32) (2025-01-29)
+
+
+### Bug Fixes
+
+* correct issue fetching user from cookie ([0d63775](https://github.com/macite/doubtfire-deploy/commit/0d63775339dcbb648d7c8702b1c3428b8622a704))
+
+### [8.0.31](https://github.com/macite/doubtfire-deploy/compare/v8.0.30...v8.0.31) (2025-01-28)
+
+
+### Bug Fixes
+
+* ensure test attempt work for staff students ([06bfa71](https://github.com/macite/doubtfire-deploy/commit/06bfa714d0b54938231004a29ae11e68fe515d80))
+* serve index.html for unknown paths ([d07ad26](https://github.com/macite/doubtfire-deploy/commit/d07ad26bd7e7bd8ba7c7877a1208a8f82958c72b))
+
+### [8.0.30](https://github.com/doubtfire-lms/doubtfire-deploy/compare/v8.0.29...v8.0.30) (2025-01-22)
+
+
+### Features
+
+* add ability to collect d2l org and grade object ids ([93fd614](https://github.com/doubtfire-lms/doubtfire-deploy/commit/93fd6144c798fd302204728a6c2dd43f74d7bf91))
+* add ability to trigger d2l grade transfer ([fd0cc07](https://github.com/doubtfire-lms/doubtfire-deploy/commit/fd0cc0737682e9aa02af14f858c8a5f5f27f22e7))
+* add success page for oauth callback ([921406e](https://github.com/doubtfire-lms/doubtfire-deploy/commit/921406ed595c7a74cb750bc87d49fac0337bdb8a))
+* check if d2l results available ([2460c88](https://github.com/doubtfire-lms/doubtfire-deploy/commit/2460c88af08740f8626ed71d8851a75af095a03d))
+* d2l integration checks settings ([0a61df5](https://github.com/doubtfire-lms/doubtfire-deploy/commit/0a61df53c9fc187b7462e8564a19641ac1693cf0))
+* switch to html5 mode ([9d017fb](https://github.com/doubtfire-lms/doubtfire-deploy/commit/9d017fbfaa1d5bae7f43da37ec7ae43e1dfafa8f))
+
+
+### Bug Fixes
+
+* ensure standard error propagate to the ui ([fd056db](https://github.com/doubtfire-lms/doubtfire-deploy/commit/fd056db47631087d5ef29223bd3dc9037c4b10dd))
+* report better errors during file downloads ([cf87d68](https://github.com/doubtfire-lms/doubtfire-deploy/commit/cf87d68ea3a5433a073ae6db413f8c1f825ada80))
+
+### [8.0.29](https://github.com/macite/doubtfire-deploy/compare/v8.0.28...v8.0.29) (2024-10-25)
+
+
+### Features
+
+* add support for the view language ([151ca04](https://github.com/macite/doubtfire-deploy/commit/151ca04ca8da9059890d7846293bf34ae67f05c5))
+
+
+### Bug Fixes
+
+* correct task scroll into view ([7984b39](https://github.com/macite/doubtfire-deploy/commit/7984b393752381e0a219dbbdafc0e7b44c3fcdb3))
+
+### [8.0.27](https://github.com/macite/doubtfire-deploy/compare/v8.0.26...v8.0.27) (2024-08-09)
+
+
+### Bug Fixes
+
+* encode . in the username in scorm player ([1ec1754](https://github.com/macite/doubtfire-deploy/commit/1ec175419ab3ef80f22ac8a6384f6ed40a17c217))
+
+### [8.0.26](https://github.com/macite/doubtfire-deploy/compare/v8.0.25...v8.0.26) (2024-08-09)
+
+
+### Bug Fixes
+
+* register service names in state resolve functions ([64e41f4](https://github.com/macite/doubtfire-deploy/commit/64e41f4aedcf519a2786d7fe4929900f86731896))
+
+### [8.0.25](https://github.com/macite/doubtfire-deploy/compare/v8.0.24...v8.0.25) (2024-08-09)
+
+
+### Bug Fixes
+
+* adjust shortcuts and unregister on inbox destroy ([8a2ce3b](https://github.com/macite/doubtfire-deploy/commit/8a2ce3bfe32d99be1bc0667ca1aba55d36f987d2))
+* switch to control shift ([a0c1185](https://github.com/macite/doubtfire-deploy/commit/a0c1185bf4af3acb8f58c97cc27021c952861603))
+
+### [8.0.24](https://github.com/macite/doubtfire-deploy/compare/v8.0.23...v8.0.24) (2024-08-09)
+
+
+### Features
+
+* add ability to preview scorm test ([7ffbea9](https://github.com/macite/doubtfire-deploy/commit/7ffbea9f56c393d44571c18f30735e090701b554))
+* add new Numbas Feature ([6f1ac4e](https://github.com/macite/doubtfire-deploy/commit/6f1ac4e4c1a78115c426838bce350bce286e44f0))
+* add new Numbas Feature ([8eba913](https://github.com/macite/doubtfire-deploy/commit/8eba913ec4462e1c252a8a698b4b6de67c4ec25f))
+* add numbas component ([7c1734b](https://github.com/macite/doubtfire-deploy/commit/7c1734b137ac369b3b605b38749c845df38b9a78))
+* add Numbas config options to task def service keys ([ff28e48](https://github.com/macite/doubtfire-deploy/commit/ff28e4802b86dc22be339cc196ef82ade67934f7))
+* add Numbas test attempt model ([097df79](https://github.com/macite/doubtfire-deploy/commit/097df7960d34a8c905ee495b8c6c8b8843e43b36))
+* add Numbas test section on ready for feedback ([e61295c](https://github.com/macite/doubtfire-deploy/commit/e61295c50006dbc89cfc0639bb3c68a09a3cda9d))
+* add Numbas test upload section and reorder editor sections ([edbd536](https://github.com/macite/doubtfire-deploy/commit/edbd536e73ace8b6b4cced1481c809fd36524dce))
+* add Numbas upload component and related functions to task-definition model ([4ecaee8](https://github.com/macite/doubtfire-deploy/commit/4ecaee8ad1c0caed9a5d848066a173000989f79b))
+* add test attempt service ([a576f48](https://github.com/macite/doubtfire-deploy/commit/a576f484bc434728eab9632c022bccf1ed26cb01))
+* add test attempt service and minor numbas related changes ([0652b56](https://github.com/macite/doubtfire-deploy/commit/0652b56f69eb850c2dfb43be54d07beb4c4eb469))
+* added numbas-lms service code ([471d344](https://github.com/macite/doubtfire-deploy/commit/471d34486f2582e95aac84469187f087277cc079))
+* allow changing scorm review config and add minor UI changes ([fc023af](https://github.com/macite/doubtfire-deploy/commit/fc023af462656e3557e2970f211fa4d59ee1e3d5))
+* change Numbas time delay config to enable incremental delays ([0afa719](https://github.com/macite/doubtfire-deploy/commit/0afa7197293c90a154c1716db91ecadae3677d53))
+* disable attempt button if passed and add button to review latest attempt in card ([703563c](https://github.com/macite/doubtfire-deploy/commit/703563c86253c60ad30d451ee2d8e0fa7ebbfabb))
+* display numbas task comments ([48a31da](https://github.com/macite/doubtfire-deploy/commit/48a31da1442f1e14f497c614053d9002c9f2631b))
+* enable reviewing, passing, deleting test attempts and add test attempt model and service ([561b924](https://github.com/macite/doubtfire-deploy/commit/561b9241c2f44fd69d3f09c656a025f514bbaf3a))
+* enable students to request extra scorm attempt ([d904ffd](https://github.com/macite/doubtfire-deploy/commit/d904ffd6fd674f6e61894d517f5aa147d1db6d29))
+* get unique token for scorm asset retrieval ([8fe2f9e](https://github.com/macite/doubtfire-deploy/commit/8fe2f9e9ca60c02e55c24d0f2bb3eb6dbea8217c))
+* implement numbas test data upload in task definition service ([2c7dab5](https://github.com/macite/doubtfire-deploy/commit/2c7dab555fc9a226b980a8dae96f5738bf517b1b))
+* insert Numbas test rules options in the task editor ([7e52ad5](https://github.com/macite/doubtfire-deploy/commit/7e52ad5e5759291d7d61805070ec482eb49c90be))
+* numbas-test-numbas-service ([cee13b7](https://github.com/macite/doubtfire-deploy/commit/cee13b727b35f804fc16070885f0e57c422c9982))
+* prevent uploading files until scorm passed ([ec86e4e](https://github.com/macite/doubtfire-deploy/commit/ec86e4eca8e9c50ebdaf54c34c302da88dd44b31))
+* show banner based on scorm success status ([db16172](https://github.com/macite/doubtfire-deploy/commit/db161721fab1359694c44d8df7237cd01892938b))
+* show launch button on ready for feedback if Numbas test is enabled for the task ([17af5b7](https://github.com/macite/doubtfire-deploy/commit/17af5b7fe9e1fbc8e5f18e2fece6e029b017408c))
+* use confirmation modal when passing or deleting test attempts ([3fb25bb](https://github.com/macite/doubtfire-deploy/commit/3fb25bb373acab837a3ef787620dd654bfd6803f))
+
+
+### Bug Fixes
+
+* add accepted Numbas file types ([bcaa8af](https://github.com/macite/doubtfire-deploy/commit/bcaa8af150aaf68b5cf5fb07ad9cb72037212d5d))
+* add auth headers to scorm adapter xhr requests ([97e1ea1](https://github.com/macite/doubtfire-deploy/commit/97e1ea187b769a51ebb66b82d76f21193bb29386))
+* adjusted edit profile accidental change ([316abc7](https://github.com/macite/doubtfire-deploy/commit/316abc775eeba6ca846c7c742bc88bec61d05a5e))
+* change success status descriptions ([20da042](https://github.com/macite/doubtfire-deploy/commit/20da0423450fe3b9b8006660bf6f5e06670f520c))
+* delete comment as well as test attempt ([b6887e8](https://github.com/macite/doubtfire-deploy/commit/b6887e85b7a06b166519924dd682ef57650a4e32))
+* disable launch scorm test button if user is staff ([9bc48b0](https://github.com/macite/doubtfire-deploy/commit/9bc48b03905c0a839d78ea13be9817ca73ba54cf))
+* ensure counters are incremented after object creation ([2b1dcfc](https://github.com/macite/doubtfire-deploy/commit/2b1dcfc717eb770dd623c62ac99d8d961d1c3124))
+* ensure datamodel is updated on termination ([2ac487f](https://github.com/macite/doubtfire-deploy/commit/2ac487f13c3743f2b5b805521964bdcbca7cdc15))
+* ensure scorm frame loads when src is available ([6ae4295](https://github.com/macite/doubtfire-deploy/commit/6ae42954162996acf145cef211981153381ff49d))
+* hide config options if numbas test is disabled ([0b15b1c](https://github.com/macite/doubtfire-deploy/commit/0b15b1c38b8f09a30f53bb42dccd1971109bce01))
+* indicate task def has scorm data when zip is uploaded ([4b983ba](https://github.com/macite/doubtfire-deploy/commit/4b983bae1f522013f750b8c36d5e1a52624abbbc))
+* initialise SCORM API wrapper before iframe loads ([5d0606c](https://github.com/macite/doubtfire-deploy/commit/5d0606c56eaeb929d5873cae7038ce729581512c))
+* integrate Numbas services well with the existing system ([d47b8ed](https://github.com/macite/doubtfire-deploy/commit/d47b8edc745660801984346c4fa67d6bb371f4cb))
+* marking shortcuts no longer conflict with common browser shortcuts ([ec7524a](https://github.com/macite/doubtfire-deploy/commit/ec7524aaae040794de76521363c2d885a0425db0))
+* remove attempt number field ([f0ff40b](https://github.com/macite/doubtfire-deploy/commit/f0ff40bfd7e86b904adae94bf8cbe5d56371e011))
+* remove saved scorm token and always get ([c8fc702](https://github.com/macite/doubtfire-deploy/commit/c8fc702bde6f1c448fc585042e5265625552bae8))
+* retrieve test attempt data correctly ([2810ce6](https://github.com/macite/doubtfire-deploy/commit/2810ce65d423a137600d621a98bf27dbc221921c))
+* send task id with numbas completed attempt data ([e46214d](https://github.com/macite/doubtfire-deploy/commit/e46214dd59d86014bb04d1c31f3a3bf21240e32b))
+* show correct attempts left and allow tutor to review attempt always ([58c24c3](https://github.com/macite/doubtfire-deploy/commit/58c24c3a6760af168a918bc099e755f475eac5f0))
+* show correct Numbas test from the task def with all assets loaded ([bee0a0b](https://github.com/macite/doubtfire-deploy/commit/bee0a0bb1eb905c964caf7888419effe70553520))
+* show delete and download buttons in editor when Numbas test exists ([821feb9](https://github.com/macite/doubtfire-deploy/commit/821feb93a8a40d095ef4f50adedbfd9216278fa9))
+* show Numbas button component and modify iframe request ([c9c2fbe](https://github.com/macite/doubtfire-deploy/commit/c9c2fbe10db156512946355f3cabfe54461f0eba))
+* show Numbas iframe on top of other elements ([f53befd](https://github.com/macite/doubtfire-deploy/commit/f53befd82b52bba24bc8c593a9266c11f9155d32))
+* show previously configured Numbas attempt limit ([56e1a5d](https://github.com/macite/doubtfire-deploy/commit/56e1a5de44ee275f9544b77909b7472f1020c2c3))
+* update numbas api path ([3df59dc](https://github.com/macite/doubtfire-deploy/commit/3df59dcc58f021ef16d81938d1d05473818bc75e))
+* use modal for Numbas and enable authentication ([64b1bfb](https://github.com/macite/doubtfire-deploy/commit/64b1bfb2918993e58a6659948d9621fc7d0b8ba4))
+* use nullish coalescing when retrieving data from the datamodel ([226d919](https://github.com/macite/doubtfire-deploy/commit/226d9193251fb675c92bec8265508477857a4ec9))
+
+### [8.0.28](https://github.com/macite/doubtfire-deploy/compare/v8.0.23...v8.0.28) (2024-09-05)
+
+
+### Features
+
+* add support for the view language ([b4b3654](https://github.com/macite/doubtfire-deploy/commit/b4b36541943232f7df3ee4888bf4ca46c4c04018))
+
+### [8.0.23](https://github.com/macite/doubtfire-deploy/compare/v8.0.22...v8.0.23) (2024-08-02)
+
+
+### Features
+
+* allow pdf download and switch to native viewer ([16ac9c8](https://github.com/macite/doubtfire-deploy/commit/16ac9c8bc488607025ee95dbb4b41134a5346b00))
+
+
+### Bug Fixes
+
+* ensure overseer menu only shows when active for task ([c04e9fe](https://github.com/macite/doubtfire-deploy/commit/c04e9fe3a824e316a632b3f7b53b08887e57c831))
+
+### [8.0.22](https://github.com/macite/doubtfire-deploy/compare/v8.0.21...v8.0.22) (2024-07-26)
+
+
+### Bug Fixes
+
+* correct duplicate shortcut registration ([dca03a4](https://github.com/macite/doubtfire-deploy/commit/dca03a41f502947136e301e51242570169826dd9))
+
+### [8.0.21](https://github.com/macite/doubtfire-deploy/compare/v8.0.20...v8.0.21) (2024-07-24)
+
+
+### Bug Fixes
+
+* ensure groups can be locked ([b671065](https://github.com/macite/doubtfire-deploy/commit/b67106589b71660bdfe01151deb68d3092b9091f))
+
+### [8.0.20](https://github.com/macite/doubtfire-deploy/compare/v8.0.19...v8.0.20) (2024-07-15)
+
+
+### Bug Fixes
+
+* ensure turn it in eula is accessible by all ([3d44c11](https://github.com/macite/doubtfire-deploy/commit/3d44c115b498366b80e5b8b99ccd3eaa660ff613))
+
+### [8.0.19](https://github.com/macite/doubtfire-deploy/compare/v8.0.18...v8.0.19) (2024-07-10)
+
+
+### Features
+
+* add ability to minimise task details in task viewer ([e904640](https://github.com/macite/doubtfire-deploy/commit/e9046400e827481e09492bcb458b00b4e3aca347))
+
+
+### Bug Fixes
+
+* ensure pdf is visible in task viewer mobile/narrow ([f5388e4](https://github.com/macite/doubtfire-deploy/commit/f5388e45715597f0c92f252f721cf274bb8de0d5))
+* task def editor so save is not over fields and header visible for task being edited ([22a2616](https://github.com/macite/doubtfire-deploy/commit/22a26165c9f2ef634b3e79d1e5d5d6b74e6f2731))
+
+### [8.0.18](https://github.com/macite/doubtfire-deploy/compare/v8.0.17...v8.0.18) (2024-07-03)
+
+
+### Features
+
+* add ability to set unit code on import from rollover ([d47d105](https://github.com/macite/doubtfire-deploy/commit/d47d10561bd7bfad495f878ebb0bab399ce144b7))
+
+### [8.0.17](https://github.com/macite/doubtfire-deploy/compare/v8.0.16...v8.0.17) (2024-07-01)
+
+
+### Bug Fixes
+
+* correct broken template in activities list ([4d81fa1](https://github.com/macite/doubtfire-deploy/commit/4d81fa1fabb07e40d0d42068f23b8e756f4cdf4b))
+* correct campus list templates ([1795895](https://github.com/macite/doubtfire-deploy/commit/17958955f65bab2b268826f2a7e19f311071615b))
+* switch date formats to date-fns ([2394efb](https://github.com/macite/doubtfire-deploy/commit/2394efb07c03da18fb8114d87b0c89e68bf7fd2d))
+
+### [8.0.16](https://github.com/macite/doubtfire-deploy/compare/v8.0.15...v8.0.16) (2024-06-28)
+
+
+### Bug Fixes
+
+* ensure drop works on task resource upload in windows ([f0505d7](https://github.com/macite/doubtfire-deploy/commit/f0505d7b62b97f1b821b19b1c4178973503789da))
+
+### [8.0.15](https://github.com/macite/doubtfire-deploy/compare/v8.0.14...v8.0.15) (2024-06-28)
+
+
+### Bug Fixes
+
+* ensure zip uploads work on windows ([1857bdc](https://github.com/macite/doubtfire-deploy/commit/1857bdc708c81dc39d467f42c9e316a8664dc080))
+
+### [8.0.14](https://github.com/macite/doubtfire-deploy/compare/v8.0.13...v8.0.14) (2024-06-27)
+
+
+### Bug Fixes
+
+* ensure unit import allows unit code change ([01013d3](https://github.com/macite/doubtfire-deploy/commit/01013d3d16ab5b704acc589d34975693030def0b))
+* ensure unit load sets main convenor user in all cases ([4c96624](https://github.com/macite/doubtfire-deploy/commit/4c966245d270af46107aae94bdd38e84b2188b65))
+
+### [8.0.13](https://github.com/macite/doubtfire-deploy/compare/v8.0.12...v8.0.13) (2024-06-27)
+
+
+### Bug Fixes
+
+* update discuss text to promote use ([7b5d35c](https://github.com/macite/doubtfire-deploy/commit/7b5d35c89a577d0408a51d8390400f44615591eb))
+
+### [8.0.12](https://github.com/macite/doubtfire-deploy/compare/v8.0.11...v8.0.12) (2024-06-25)
+
+
+### Bug Fixes
+
+* ensure null fields will not break in entity mapping ([32046e8](https://github.com/macite/doubtfire-deploy/commit/32046e89eaaf2a9b36e88f078a7b695b1506886d))
+* reinstate unit import for teaching period ([991230f](https://github.com/macite/doubtfire-deploy/commit/991230f7b527957116263b6abaa588ed43d3a787))
+
+### [8.0.11](https://github.com/macite/doubtfire-deploy/compare/v8.0.10...v8.0.11) (2024-06-24)
+
+
+### Bug Fixes
+
+* ensure turn it in only appears to task editor when enabled ([3a81688](https://github.com/macite/doubtfire-deploy/commit/3a81688904159c8c9e3efdde8f3605aa5677630f))
+* task date picker allows direct entry ([2f91e8f](https://github.com/macite/doubtfire-deploy/commit/2f91e8fbba7902e1e22871cc82c87f4ff797b058))
+
+### [7.0.24](https://github.com/macite/doubtfire-deploy/compare/v7.0.23...v7.0.24) (2024-06-05)
+
+
+### Bug Fixes
+
+* ensure download blob supports 206 responses ([6445f9f](https://github.com/macite/doubtfire-deploy/commit/6445f9f998db70fbe9b9abf723dc17fd298b5d2f))
+
+### [8.0.10](https://github.com/macite/doubtfire-deploy/compare/v7.0.23...v8.0.10) (2024-06-21)
+
+
+### Bug Fixes
+
+* ensure loading screen removed in sign in component ([729c438](https://github.com/macite/doubtfire-deploy/commit/729c438f7f6a988f5ff2fa4035493b5cae1c98f7))
+* ensure portfolio can get grades from strings ([fd916b9](https://github.com/macite/doubtfire-deploy/commit/fd916b94e9012c0909c5880f377f93d326c18e4d))
+* ensure portfolio only shown when it exists ([ce970f5](https://github.com/macite/doubtfire-deploy/commit/ce970f5fdc4f42708edc71c98dc9d869056e9e2c))
+* ensure tii open report alerts errors ([c5dd45c](https://github.com/macite/doubtfire-deploy/commit/c5dd45c57fd34e8373f11d065a0cd08edef0a794))
+* fix pdf viewer for portfolios ([da376b9](https://github.com/macite/doubtfire-deploy/commit/da376b9bc7905aadeb4d234cbb4f595e4c4424a1))
+* grade icon for portfolio page ([aab1b9c](https://github.com/macite/doubtfire-deploy/commit/aab1b9c3e7365cdf7dd64d767fdb6e5a9a2436a3))
+* show burndown and pie chart on portfolio page ([e70f4c7](https://github.com/macite/doubtfire-deploy/commit/e70f4c7cd1395eaab942ee389788f75f92e985c9))
+
+### [8.0.9](https://github.com/macite/doubtfire-deploy/compare/v7.0.22...v8.0.9) (2024-05-31)
+
+
+### Bug Fixes
+
+* comment out fix and complete hotkeys temporarily ([c1f623d](https://github.com/macite/doubtfire-deploy/commit/c1f623d17432f3563366ef32fc3da3b54dbef0b7))
+
+### [8.0.8](https://github.com/macite/doubtfire-deploy/compare/v8.0.7...v8.0.8) (2024-05-30)
+
+
+### Features
+
+* added percentage to tooltip when hovering student's task progress ([69ed613](https://github.com/macite/doubtfire-deploy/commit/69ed61380bd7681d4496cb109e628111873b6e82))
+
+
+### Bug Fixes
+
+* change from hiding element to not loading ([414da65](https://github.com/macite/doubtfire-deploy/commit/414da65fcef9b10367f53112239a60e1b271d475))
+* change grade values, change grade display ([081c35b](https://github.com/macite/doubtfire-deploy/commit/081c35ba0fbc7ab4ddb2fba3c58892d0e66f325c))
+* fix task inbox shortcuts ([9bc949f](https://github.com/macite/doubtfire-deploy/commit/9bc949fd6dcb71ea165e89de9a4ec9d9347e6562))
+* inbox search box width ([02a99a8](https://github.com/macite/doubtfire-deploy/commit/02a99a8f71033014b26260d3b0dbfca075ca7273))
+* remove pdf viewer on task view when no sheet ([f3e973d](https://github.com/macite/doubtfire-deploy/commit/f3e973dacc5b079ab58da239194d802c5586ca07))
+* revert index changes, html changes for grade ([8f41cd1](https://github.com/macite/doubtfire-deploy/commit/8f41cd1656971963c2035a9249acdde0a257766e))
+* task list scrolling ([0088e9e](https://github.com/macite/doubtfire-deploy/commit/0088e9e245dbd326dea4032239b53eee88754179))
+* use tailwind classes instead of css styling ([42434a5](https://github.com/macite/doubtfire-deploy/commit/42434a5fd4b866781da5d23ecdb0b9b4369aace1))
+
+### [8.0.7](https://github.com/macite/doubtfire-deploy/compare/v8.0.6...v8.0.7) (2024-05-26)
+
+
+### Bug Fixes
+
+* add task description editing ([ee0cfbf](https://github.com/macite/doubtfire-deploy/commit/ee0cfbf7ce804a1806ca5810bad138b97703ebfe))
+
+### [8.0.6](https://github.com/macite/doubtfire-deploy/compare/v8.0.5...v8.0.6) (2024-05-25)
+
+
+### Bug Fixes
+
+* ensure all admin units are fully loaded ([917325e](https://github.com/macite/doubtfire-deploy/commit/917325ed08b89690a7eea0716438673732ba1ec9))
+
+### [8.0.5](https://github.com/macite/doubtfire-deploy/compare/v8.0.4...v8.0.5) (2024-05-25)
+
+
+### Bug Fixes
+
+* ensure (click) is on button, not mat-icon ([99c717d](https://github.com/macite/doubtfire-deploy/commit/99c717d2333de0975da1b3f282195a0b3577a3f6))
+
+### [8.0.4](https://github.com/macite/doubtfire-deploy/compare/v8.0.3...v8.0.4) (2024-05-25)
+
+
+### Bug Fixes
+
+* fix various issues with admin unit list ([3720666](https://github.com/macite/doubtfire-deploy/commit/3720666fb4105bac274449eb468ce34e0f68bae7))
+
+### [8.0.3](https://github.com/macite/doubtfire-deploy/compare/v8.0.2...v8.0.3) (2024-05-25)
+
+
+### Features
+
+* add 4-character abbreviations ([eb62dfc](https://github.com/macite/doubtfire-deploy/commit/eb62dfc90db836870d6c396727fc43c149808e9d))
+
+### [8.0.2](https://github.com/macite/doubtfire-deploy/compare/v8.0.1...v8.0.2) (2024-05-25)
+
+
+### Bug Fixes
+
+* gradeservice bugs ([fd6eb1c](https://github.com/macite/doubtfire-deploy/commit/fd6eb1cd152b72cf297cbd6bd529579858afc543))
+* gradeservice bugs ([7545eb9](https://github.com/macite/doubtfire-deploy/commit/7545eb92b9353d99ac8d8d7d89982cdadf9688b1))
+
+### [8.0.1](https://github.com/macite/doubtfire-deploy/compare/v8.0.0...v8.0.1) (2024-05-24)
+
+
+### Features
+
+* implement live PDF search that updates dynamically as you type ([b9b9945](https://github.com/macite/doubtfire-deploy/commit/b9b9945346d55392e5ee9a6431d85ae92de1bde5))
+
+
+### Bug Fixes
+
+* fix critical bugs ([356846e](https://github.com/macite/doubtfire-deploy/commit/356846e5c385c484a6034553366965cde95ec78b))
+* fix splashscreen ([2692b7f](https://github.com/macite/doubtfire-deploy/commit/2692b7f4a3e1ca2a5bc4df3b82a9dfd4aa2ec68a))
+
+## [8.0.0](https://github.com/macite/doubtfire-deploy/compare/v8.0.0-6...v8.0.0) (2024-05-23)
+
+
+### Features
+
+* add multi-badge support ([44c1473](https://github.com/macite/doubtfire-deploy/commit/44c1473700a3d7a4a025d68acac5aa61189d8b52))
+* add synchronised multi-badge ([f70ebdc](https://github.com/macite/doubtfire-deploy/commit/f70ebdca92a05e5ca350d4062a8dc8efba9fd681))
+* add working unit-badge ([dd30247](https://github.com/macite/doubtfire-deploy/commit/dd302478e97228e6bfbfdbee0134abb3eabf2587))
+* add working unit-badge ([c7338ff](https://github.com/macite/doubtfire-deploy/commit/c7338ffd88edb457a3443b43ea21706c43231973))
+* qol improvements for unit codes ([f7f928e](https://github.com/macite/doubtfire-deploy/commit/f7f928e485448a69b054dca94f07d623f84e328f))
+* small fixes to home and unit code ([918e804](https://github.com/macite/doubtfire-deploy/commit/918e8047745b489aae1fafdc67720568dd8d829e))
+
+
+### Bug Fixes
+
+* add missing imports ([659b52c](https://github.com/macite/doubtfire-deploy/commit/659b52c82a26b9496a3dba81401b5147d05248ae))
+* change time exceeded to feedback exceeded ([673619d](https://github.com/macite/doubtfire-deploy/commit/673619d99f177d834fba3643171426092e0d05e0))
+* correct task resource upload actions ([5e9c9b1](https://github.com/macite/doubtfire-deploy/commit/5e9c9b1d05d6d6975fd4ba3a3176314ddd7d8514))
+* ensure loading state changed after projects and unit roles load ([9171d0c](https://github.com/macite/doubtfire-deploy/commit/9171d0c2c37c17d26f464f6aa0ba7c479851e6eb))
+* ensure staff task list checks unit exists ([dbb312d](https://github.com/macite/doubtfire-deploy/commit/dbb312dc3c5c9e2be24161914e8d95e1a5c1bc53))
+* ensure unit load updates unit object if it already exists ([e48ffad](https://github.com/macite/doubtfire-deploy/commit/e48ffadf63891212c3e40ab696d54a3935485b08))
+* hide overseer settings if automation disabled ([0c08fe3](https://github.com/macite/doubtfire-deploy/commit/0c08fe3e82a78dd1e91fb44ce6008fb5298c46ee))
+* slide unit code off left side ([8cd57b5](https://github.com/macite/doubtfire-deploy/commit/8cd57b589812fd59c6da4de02246791fb4410959))
+* sort units desc by start date ([9b78856](https://github.com/macite/doubtfire-deploy/commit/9b788561372a3ddf065d3b28e547a2194ef29655))
+* zip upload for overseer ([5ad2085](https://github.com/macite/doubtfire-deploy/commit/5ad2085b2d730235f61e7b7c603727d8b6736cf2))
+
+## [8.0.0-6](https://github.com/macite/doubtfire-deploy/compare/v8.0.0-5...v8.0.0-6) (2024-05-13)
+
+## [8.0.0-5](https://github.com/macite/doubtfire-deploy/compare/v8.0.0-4...v8.0.0-5) (2024-05-13)
+
+## [8.0.0-4](https://github.com/macite/doubtfire-deploy/compare/v8.0.0-3...v8.0.0-4) (2024-05-11)
+
+
+### Features
+
+* add task badge ([b48cd4c](https://github.com/macite/doubtfire-deploy/commit/b48cd4c99333e41c0c1d32531e571d32bb482a81))
+
+
+### Bug Fixes
+
+* (WIP) fix alert service migration ([3d9f4dc](https://github.com/macite/doubtfire-deploy/commit/3d9f4dc05e7a45884dc383e0f5ed4bdb09b0558d))
+* add max length validator and change reason field to text-area ([6227200](https://github.com/macite/doubtfire-deploy/commit/6227200566c3f608c279e92a3f255a7e94148c1d))
+* address linter issues in task.ts ([14e9699](https://github.com/macite/doubtfire-deploy/commit/14e9699bdfe336f1e3f3cce3d722c835d58f3cdb))
+* copy dist browser to nginx html ([08fa919](https://github.com/macite/doubtfire-deploy/commit/08fa91937e028cb3ee093709e5a31f94da44fc33))
+* correct filenames for grotesk fonts ([9bedd81](https://github.com/macite/doubtfire-deploy/commit/9bedd812b12628df9cb32e48cb91a88b5cdf69b1))
+* ensure eula state remains visible ([131540c](https://github.com/macite/doubtfire-deploy/commit/131540ca4b934773afd9f72aa2578579048ed6a2))
+* ensure unit admin shows all units ([02b7a15](https://github.com/macite/doubtfire-deploy/commit/02b7a15bbbd2306a61e344f995dffb72a3915498))
+* fix course progress bar on firefox ([ae5c1e0](https://github.com/macite/doubtfire-deploy/commit/ae5c1e0b5901bae0411cf7bbaa32ee8f340b908a))
+* fix incorrect projcets listed in dropdown ([6a7e478](https://github.com/macite/doubtfire-deploy/commit/6a7e4788b522e5af6331a82ed33e9c9137d2ca86))
+* fix margin issue on dropdown ([c8145f0](https://github.com/macite/doubtfire-deploy/commit/c8145f0972a03e52377e0203cabb2cf6353db8b3))
+* grade and quality point display on task-assessment-card ([7cba502](https://github.com/macite/doubtfire-deploy/commit/7cba502e002143e8255bf0d786551bd270f73f0e))
+* indicate mandatory fields in upload-submission-modal ([e8801e2](https://github.com/macite/doubtfire-deploy/commit/e8801e2a64fe15ad423d9017d10e5e23f6e00eda))
+* only check grade if it exists ([1c213c5](https://github.com/macite/doubtfire-deploy/commit/1c213c53571f79563e9a071e2dd9645598382522))
+* remove unused imports in extension-modal.service ([8081f51](https://github.com/macite/doubtfire-deploy/commit/8081f51b5f28ea511b9f76d026ae63f16153ae2c))
+* use tailwindcss classes ([8d7e160](https://github.com/macite/doubtfire-deploy/commit/8d7e160e2d40c42284ee0c1fc85d6d9e01166cda))
+
+## [8.0.0-3](https://github.com/macite/doubtfire-deploy/compare/v8.0.0-2...v8.0.0-3) (2024-05-02)
+
+
+### Bug Fixes
+
+* reenable eula html fetch ([cda9e52](https://github.com/macite/doubtfire-deploy/commit/cda9e52a259bfaa27e8252f40e579d11d1af280c))
+
+## [8.0.0-2](https://github.com/macite/doubtfire-deploy/compare/v7.0.21...v8.0.0-2) (2024-05-01)
+
+
+### Features
+
+* accept promela files ([df93a69](https://github.com/macite/doubtfire-deploy/commit/df93a69e45d2d9e41b9cf0802d521a3663d7a36c))
+* migrate unit list in all locations ([6651d00](https://github.com/macite/doubtfire-deploy/commit/6651d0011446fdde7179c5173f902ce2e4ea7545))
+* remove misleading progress statement ([63e276c](https://github.com/macite/doubtfire-deploy/commit/63e276c041f77d8b401d24a4f49896cfa2095442))
+
+
+### Bug Fixes
+
+* correct change detection on task def ([55daff2](https://github.com/macite/doubtfire-deploy/commit/55daff234441a242d96de097c2b2912df0c6c9a8))
+* correct npm install for dev container image ([5126c3b](https://github.com/macite/doubtfire-deploy/commit/5126c3ba7fed55217e88c54c25dc70595ec4c666))
+* ensure npm will force install ([f91751e](https://github.com/macite/doubtfire-deploy/commit/f91751eae788bc3f65d33b610ed80c96d3978974))
+* fix firefox-specific bug ([6b6054b](https://github.com/macite/doubtfire-deploy/commit/6b6054bd5c1104a96ccac413a7115009eeba8d2f))
+* remove ngClass ([d1d8c72](https://github.com/macite/doubtfire-deploy/commit/d1d8c72ace21551a68bd4d0a8ba88eabb2ebdb9d))
+* remove plagiarism checks ([21b02fb](https://github.com/macite/doubtfire-deploy/commit/21b02fb7cc616090f1fb2d26f65b336072f9105b))
+* remove the incorrect option from for scrollIntoView() ([9e752fe](https://github.com/macite/doubtfire-deploy/commit/9e752fe9d49df786ceb3e7007cbf0aad57809604))
+* remove unused loading from f-units ([c4c38fa](https://github.com/macite/doubtfire-deploy/commit/c4c38fad4fbdfe248e383cf247f949197ad0a047))
+* typo ([820c56f](https://github.com/macite/doubtfire-deploy/commit/820c56f3a1bc30b7637b98e6f80b406ca350b5b8))
+
+## [8.0.0-1](https://github.com/macite/doubtfire-deploy/compare/v8.0.0-0...v8.0.0-1) (2024-03-21)
+
+
+### Bug Fixes
+
+* update deploy dockerfile ([41a5161](https://github.com/macite/doubtfire-deploy/commit/41a5161b356931eafd8e4caf256f311f10bc8bb4))
+
+## [8.0.0-0](https://github.com/macite/doubtfire-deploy/compare/v7.0.18...v8.0.0-0) (2024-03-21)
+
+
+### Features
+
+* (wip) add similarities notification ([8e4a198](https://github.com/macite/doubtfire-deploy/commit/8e4a198a037de832bbebe96e309c4c8485d076cc))
+* add ability to accept tii eula to model ([0106b01](https://github.com/macite/doubtfire-deploy/commit/0106b01ed249139cbe06096f95a36b5d11bcd0ac))
+* add ability to accept turn it in eula ([380ad1e](https://github.com/macite/doubtfire-deploy/commit/380ad1e93252f8f928893626b65f4dab01813524))
+* add ability to open turnitin viewer ([5248e80](https://github.com/macite/doubtfire-deploy/commit/5248e80622e55b79ce4d7b35f8202ee8099c2dce))
+* add ability to update similarity flag ([de005ee](https://github.com/macite/doubtfire-deploy/commit/de005ee98a270998e2175109783cab72b92e36f3))
+* add dynamic footer ([3c62fe0](https://github.com/macite/doubtfire-deploy/commit/3c62fe06d009c3b752259f50887c625c98a371cd))
+* add empty pdf view to new task dashboard ([9c3cdfb](https://github.com/macite/doubtfire-deploy/commit/9c3cdfbb93711a6ae911ed461651200d8c75db48))
+* add file drop component ([c211003](https://github.com/macite/doubtfire-deploy/commit/c211003004ae6c7505158a65ce2006b219920827))
+* add footer content ([735c43b](https://github.com/macite/doubtfire-deploy/commit/735c43b5c2df7e8f367310ad92ef716fd5140375))
+* add link to student task from inbox ([d4301e0](https://github.com/macite/doubtfire-deploy/commit/d4301e0d1f2f6ec4c563801a7f0d1132884f9989))
+* add mobile inbox view ([56ded70](https://github.com/macite/doubtfire-deploy/commit/56ded707e638ae769665a863ce65acffea5a588a))
+* add multi-file support to f-upload ([d181969](https://github.com/macite/doubtfire-deploy/commit/d181969198e2b7611e3f0e330577b825e99a248f))
+* add new file upload component ([891ab20](https://github.com/macite/doubtfire-deploy/commit/891ab20eb6f1d545ff58d0157fdd9912b9546c9f))
+* add new inbox component ([ec0f62c](https://github.com/macite/doubtfire-deploy/commit/ec0f62c488ae3e99e9487ea1ab87f5bb2f1fbed7))
+* add new pdf-viewer ([617fbd2](https://github.com/macite/doubtfire-deploy/commit/617fbd24f8424541aeb87b16651f06737b570633))
+* add new similarity component ([48ba01c](https://github.com/macite/doubtfire-deploy/commit/48ba01c8d780a04a1f526f89fcd9bc63ef5d4aec))
+* add new task assessment card ([ac3b50f](https://github.com/macite/doubtfire-deploy/commit/ac3b50f29b8a2722d09ad94a2f82bb54c1c32da7))
+* add new task dashboard component ([dc841f9](https://github.com/macite/doubtfire-deploy/commit/dc841f9e7af811a3a56a0c21fd3b3968ec7aead9))
+* add new task due card ([3ade5ea](https://github.com/macite/doubtfire-deploy/commit/3ade5ea34eb3c2c756d7df0f7a6c250fa50290bb))
+* add new task due card content ([c43ea3e](https://github.com/macite/doubtfire-deploy/commit/c43ea3e27abdf253596bfedd5112f5ef7a7b929d))
+* add new task submission card ([6d27690](https://github.com/macite/doubtfire-deploy/commit/6d2769029413f84b73c7c825d16e9a3366142177))
+* add pdf search and zoom ([f83ce57](https://github.com/macite/doubtfire-deploy/commit/f83ce570e80dc20d118288c6d32c2d2a9ca263b5))
+* add resizable inbox panels ([4920e31](https://github.com/macite/doubtfire-deploy/commit/4920e31ce366c3dfb4340ab4da159b176381cf49))
+* add resizable panels to inbox ([5abda03](https://github.com/macite/doubtfire-deploy/commit/5abda039af5b2d3b5e2589c4864b2e1715c5e8c0))
+* add rest of layout to footer ([3b9de7c](https://github.com/macite/doubtfire-deploy/commit/3b9de7cc6d923a0e6431524f2967b5e3bc360a6f))
+* add selected task sheet url ([00a7fb5](https://github.com/macite/doubtfire-deploy/commit/00a7fb516d362d3725b915d012878a9ccf8ef009))
+* add selectedTask service ([02aa41a](https://github.com/macite/doubtfire-deploy/commit/02aa41a34232359d1366d841d1236a068a837ae5))
+* add similarities staff dashboard switch ([1ec0b72](https://github.com/macite/doubtfire-deploy/commit/1ec0b72c26cc27bd4d17376af5b47650d28bbc10))
+* add similarity flags to view ([8c7975c](https://github.com/macite/doubtfire-deploy/commit/8c7975cadd14e6d3390cfa9917983cd01498a69c))
+* add simple project progress bar ([73fda77](https://github.com/macite/doubtfire-deploy/commit/73fda776ee36c6574c1ddc0dc09b958d61de3000))
+* add start of new similarity view ([a1e51b6](https://github.com/macite/doubtfire-deploy/commit/a1e51b6bc7030086a1d7a4d715f23b3e76f7ddb3))
+* add task plagairism warning on inbox ([6bd8620](https://github.com/macite/doubtfire-deploy/commit/6bd8620f5473db4517e38fd0487ab5876f921a36))
+* add teaching period remove break function ([90c6a37](https://github.com/macite/doubtfire-deploy/commit/90c6a3730f84da9e64abec676bcdf66c10b7fc60))
+* add tii action log ([96d982d](https://github.com/macite/doubtfire-deploy/commit/96d982d5fb945bdbf9ea8b6d534a5dd18ab64ad7))
+* add unselected user icon badge in inbox ([794697b](https://github.com/macite/doubtfire-deploy/commit/794697b53d6ee81f57b37b173d03a0688c6993b5))
+* complete mobile task inbox view ([00a4b3f](https://github.com/macite/doubtfire-deploy/commit/00a4b3f1e8f52364a83b6affae34295da4a7af34))
+* disable hover on task inbox for mobile ([a59fd01](https://github.com/macite/doubtfire-deploy/commit/a59fd0153de8b1f9e9b9022d0f6df1032c92f8d1))
+* downgrade task due card ([c342ac2](https://github.com/macite/doubtfire-deploy/commit/c342ac2e3cc4213c2b92499bc4a191485184af37))
+* enhance task search with similarity flags ([65ad918](https://github.com/macite/doubtfire-deploy/commit/65ad91842882e76379033350f90b966d874c6ba4))
+* enhance ui/ux of task inbox screen ([6b275c3](https://github.com/macite/doubtfire-deploy/commit/6b275c3cd5d575a399e901d52a62808238c6d0e4))
+* expand new file uplaoder ([11d798d](https://github.com/macite/doubtfire-deploy/commit/11d798d6a6e5eca4555a7d141e1d11d2a862fcfe))
+* finish new alerts service ([3beb059](https://github.com/macite/doubtfire-deploy/commit/3beb05987e605c9f4270fc0d7bdd95f82bf64007))
+* make all datetime in aus format ([7a0f749](https://github.com/macite/doubtfire-deploy/commit/7a0f749a4328a44c1ffb5692017dfa39a061e1d5))
+* migrate new unit dialog ([0a2a1e9](https://github.com/macite/doubtfire-deploy/commit/0a2a1e9baca6b0553730c1a939b246bf1be178a3))
+* minor improvements to file-drop ([73139be](https://github.com/macite/doubtfire-deploy/commit/73139be83449f50036eedb3520ed2d8daa5da09c))
+* new footer component ([c3b4c18](https://github.com/macite/doubtfire-deploy/commit/c3b4c182921079d6ebc0851ec7e6515e65f1c15b))
+* new grade service ([31073e1](https://github.com/macite/doubtfire-deploy/commit/31073e1dbe963c1e0f2c84139a2c3f746cc31bbb))
+* new student user badge ([97c84d3](https://github.com/macite/doubtfire-deploy/commit/97c84d3016b0e322d54062fae0d46da112146d5d))
+* new task status card ([78218cf](https://github.com/macite/doubtfire-deploy/commit/78218cf6d45f5cac50203f96109d27400fa37686))
+* only download similarity resource on view ([563d102](https://github.com/macite/doubtfire-deploy/commit/563d1024ee7023e4228a9ceef9f556e48e7127d1))
+* progress redesigned inbox ([f1b672b](https://github.com/macite/doubtfire-deploy/commit/f1b672b7495a9086abb88f5e1991cb4c4f7b60c1))
+* register new inbox component ([3d79baa](https://github.com/macite/doubtfire-deploy/commit/3d79baae505e44c401179ae34de4804e8d90b7ba))
+* show TII accepted status in profile ([7b5c3e2](https://github.com/macite/doubtfire-deploy/commit/7b5c3e2c0fe9fcc30f9fffc73d9a942714db7cb2))
+* small change to task view ([f640920](https://github.com/macite/doubtfire-deploy/commit/f6409201e9d4af4f075b4db8559fc1e26f4a374f))
+* small changes to user table ([18957ac](https://github.com/macite/doubtfire-deploy/commit/18957acfc700e941ebb161d9ddb8f5e1ebe1beff))
+* trigger window resize when pdf loads ([044c170](https://github.com/macite/doubtfire-deploy/commit/044c170ebe05e7e3a368df2e8041884d2e23c752))
+* update file viewer to use file download and blobs ([8751123](https://github.com/macite/doubtfire-deploy/commit/87511232ca384a355ddfc5eb396186babd676f92))
+* wip add file uploader component ([48c73f5](https://github.com/macite/doubtfire-deploy/commit/48c73f547892ae3ce12fdac416bf93c3a2c72006))
+
+
+### Bug Fixes
+
+* add activeUntil date mapping to tps ([2cae20a](https://github.com/macite/doubtfire-deploy/commit/2cae20a6b3fa3e5ea8a001ffa40a87263c438b68))
+* add arbitrary task argument to `togglePin` in task inbox ([6e1784f](https://github.com/macite/doubtfire-deploy/commit/6e1784ff52a745330e57f2ccc2a55b3206d535d0))
+* add seperator to naviation on mobile ([fc4f052](https://github.com/macite/doubtfire-deploy/commit/fc4f0527b144fd8f3b6e98b335e629f85fe1bb3b))
+* add the correct enterkeyhint to the comment composer ([569db05](https://github.com/macite/doubtfire-deploy/commit/569db059fc9786363b1b62d7be72e44f711faba3))
+* add unloaded state to progressbar ([2c3a28e](https://github.com/macite/doubtfire-deploy/commit/2c3a28e9718879f55596221517db35bda8c09450))
+* adjust due card layout ([0360a6e](https://github.com/macite/doubtfire-deploy/commit/0360a6e0868e995d7ba5c9091be556dad4bfd474))
+* always display shortened task name in header ([a05c8ff](https://github.com/macite/doubtfire-deploy/commit/a05c8ffd9aef9c865f72458157b465f9de1e07f3))
+* center pins along items in new task inbox ([6b3c0d2](https://github.com/macite/doubtfire-deploy/commit/6b3c0d2b1d5541fe36c6fbd03dfc752f43d03e18))
+* center placeholder text in task inbox search bar & reduce padding on far-right ([ffec9b6](https://github.com/macite/doubtfire-deploy/commit/ffec9b6f4bfc9d2aee6aa762c41bcce1ed1823ba))
+* center student and task name on bottom left screen ([e986199](https://github.com/macite/doubtfire-deploy/commit/e9861992e9e5a40076973a2215bcc919c1777b5d))
+* center view all units button on home page ([9807dfd](https://github.com/macite/doubtfire-deploy/commit/9807dfd1f18e1efc9f882a67ef99f1d198a03ff7))
+* centering of Administration icons on home page ([1043f74](https://github.com/macite/doubtfire-deploy/commit/1043f74e2ca5d23cad8c4d890a202b20ddb4bc37))
+* change display name of student on bottom left screen from being nickname to full name ([5fe7790](https://github.com/macite/doubtfire-deploy/commit/5fe7790e23aec709f8be5a444bf84ebdf77c9ce5))
+* change shown name on messages in chat to be student's full name ([93636c4](https://github.com/macite/doubtfire-deploy/commit/93636c400c1850e20320a57be010347541c5137c))
+* chatbox spacing, placement of messages <> photos, distance between message & name ([dd9cb2a](https://github.com/macite/doubtfire-deploy/commit/dd9cb2ab3bdde886c2f297d8044986427febd366))
+* ensure accepted TII eula details are retained ([e60ae54](https://github.com/macite/doubtfire-deploy/commit/e60ae547121f33edd7cc8d8c5d4afd27a1f90e8c))
+* ensure blobs are freed on destroy ([ee017eb](https://github.com/macite/doubtfire-deploy/commit/ee017eb00a506c81a108ce6dec52f7f91064d350))
+* ensure font is set to roboto ([a6ff4ce](https://github.com/macite/doubtfire-deploy/commit/a6ff4cee9794e37a208af28d7d085182441fa555))
+* ensure loadedUnitRoles is public in global ([b92159f](https://github.com/macite/doubtfire-deploy/commit/b92159ff33cf9537c0ccec50d57a54636315bec4))
+* ensure logout in timeout always signs out ([3380075](https://github.com/macite/doubtfire-deploy/commit/33800759083156682014f0f63bc83a0283ae96fa))
+* ensure mat menu icons have correct tags ([f971ad1](https://github.com/macite/doubtfire-deploy/commit/f971ad1cf7fa56de0f4e97e9533a0567db897da4))
+* ensure only staff need to accept turn it in EULA ([029c40b](https://github.com/macite/doubtfire-deploy/commit/029c40b556bb1709e75547615b2d1a1109997a74))
+* ensure pdf actions loads after pdf loaded ([0425c54](https://github.com/macite/doubtfire-deploy/commit/0425c5465a678509e1a8d719fef39975c4d8e9e5))
+* ensure similarities without files still view ([5794e2f](https://github.com/macite/doubtfire-deploy/commit/5794e2fb345328396517a7d2f945cfabb1c37173))
+* ensure task pdf viewer works ([d3d1bf8](https://github.com/macite/doubtfire-deploy/commit/d3d1bf8564c6e6134130b44df90bef42430f4654))
+* ensure task submission status updated on init ([ca77c92](https://github.com/macite/doubtfire-deploy/commit/ca77c92d251bf4087964886579de642f6f300b9a))
+* ensure that timeout state not re-routed ([c16ee90](https://github.com/macite/doubtfire-deploy/commit/c16ee90c2c372ea1889d3470e2be510aefd2245f))
+* ensure welcome page still can go to timeout ([5253f2e](https://github.com/macite/doubtfire-deploy/commit/5253f2eb6fce1de1b6df585589f1cc2594ac87a8))
+* excessive spacing below unit tags on home page ([1bfaa21](https://github.com/macite/doubtfire-deploy/commit/1bfaa216440d880d82875f519e9b3f0f59ddcc23))
+* fix few type errors ([8a96e5b](https://github.com/macite/doubtfire-deploy/commit/8a96e5b33a095cd70222719b33d7dc853d67f347))
+* fix file drop to support click to upload ([599cd9e](https://github.com/macite/doubtfire-deploy/commit/599cd9e82c1518113374f0675fc54dd1483fcc85))
+* fix footer height not resetting on similarity ([19c43d7](https://github.com/macite/doubtfire-deploy/commit/19c43d7945c5848d1ca511e146fefdfa9735c49b))
+* fix incorrect closing tag ([ad28818](https://github.com/macite/doubtfire-deploy/commit/ad28818fba9dac552a2adf14785c5bbf98b4e206))
+* fix page height recalculation trigger ([8f219c3](https://github.com/macite/doubtfire-deploy/commit/8f219c31e9a3461626a9344352c4d7aa68c57c43))
+* fix various build issues ([8b947ae](https://github.com/macite/doubtfire-deploy/commit/8b947aeea1cb0dfa4bac8e22ff5bdb2a9a82ec49))
+* fix various task comment composer/display issues ([5670bf1](https://github.com/macite/doubtfire-deploy/commit/5670bf1dcd77e8010fe88bf24662ec96e4e29847))
+* hide extension for staff if can't apply ([1699e50](https://github.com/macite/doubtfire-deploy/commit/1699e50f2d7424361e0f7d5a173bdd9fffd87c24))
+* initialise inbox on return ([1249e96](https://github.com/macite/doubtfire-deploy/commit/1249e96f53ef9544cd81e3f2c3f1d5acf4a628f3))
+* initialise inbox view ([1ae4ac9](https://github.com/macite/doubtfire-deploy/commit/1ae4ac9b304348f5528368d87ded3c26e8e5cf40))
+* issues with UI in photo spacing and text alignment ([716ead3](https://github.com/macite/doubtfire-deploy/commit/716ead3497a8a2ecd1050484bd289c003a47dffa))
+* make photo in chatbox fall to bottom ([aa4e814](https://github.com/macite/doubtfire-deploy/commit/aa4e81446546f1e62b08fd74ba8ac1e563e5efc8))
+* make read receipt smaller to fix message alignment ([c869458](https://github.com/macite/doubtfire-deploy/commit/c869458cd45334e009ae83ab3c911033bc1987b9))
+* null input checks on migrated cards ([7a192af](https://github.com/macite/doubtfire-deploy/commit/7a192af22bf1eef026d05a16edcc3a97c6abbebf))
+* pass selected task to footer's user icon ([28782b1](https://github.com/macite/doubtfire-deploy/commit/28782b134cb03f5c334df48e8887f81393661bda))
+* photo from below message to being inline ([0e97a03](https://github.com/macite/doubtfire-deploy/commit/0e97a03a491f4137ec301dd18a42130a845ebe37))
+* reduce user badge clickable region ([7305f86](https://github.com/macite/doubtfire-deploy/commit/7305f866a9582e10dd870fad1861de4ce209a4e0))
+* regenerate user icons on input changes ([257ab4e](https://github.com/macite/doubtfire-deploy/commit/257ab4eb63ec15de545193f8b60176ac33e17b01))
+* remove call to teaching period name ([1e2e019](https://github.com/macite/doubtfire-deploy/commit/1e2e0198a32acd59c11932fde2a2f14a5bacf48f))
+* remove dupe case in transition hook ([9808798](https://github.com/macite/doubtfire-deploy/commit/98087981e06296a1eb9a17f527c49ab9b27caef3))
+* remove incorrect aria hidden tags ([46bfe21](https://github.com/macite/doubtfire-deploy/commit/46bfe2109e4b912a146201572671ff759fc02226))
+* remove no PDF text from overlapping with icon ([c6543cf](https://github.com/macite/doubtfire-deploy/commit/c6543cf2f9be9644b7382eeb64699e15e461447a))
+* remove old teaching periods from home ([4f4a617](https://github.com/macite/doubtfire-deploy/commit/4f4a6175f39ac9df75c7efe920ffcc15576cc98e))
+* remove pct copy data ([6bb96b4](https://github.com/macite/doubtfire-deploy/commit/6bb96b49f436a7d4bd6f5e587b30a8528e6d75b7))
+* remove user badge from old task panel ([9129956](https://github.com/macite/doubtfire-deploy/commit/9129956f41b78a8e3e84ffe9a124a7941d8905c1))
+* require eula for any user ([daf7ba9](https://github.com/macite/doubtfire-deploy/commit/daf7ba9d9056c262cafc871b623c59a0ef837274))
+* resolved issue with intelligent discussion ([18cd1fc](https://github.com/macite/doubtfire-deploy/commit/18cd1fc6f0443c353fc5f49c81dafd2428901cbc))
+* resolved issue with intelligent-discussion-dialog component rendering ([1efa758](https://github.com/macite/doubtfire-deploy/commit/1efa758fd813751788cc79fe30e01ca8a09013d8))
+* shrink header menu on small screens ([580445d](https://github.com/macite/doubtfire-deploy/commit/580445d25573bf00671246269c61685917c34867))
+* spacing (of own/person messaging) is now right/left aligned respectively ([7d10aa0](https://github.com/macite/doubtfire-deploy/commit/7d10aa0f58e2d7c8e8fd45439d8c464fabe3508c))
+* split header onto seperate lines on small screens ([d8a9016](https://github.com/macite/doubtfire-deploy/commit/d8a90168e58ef8d71f31f76d999d4f6a59232987))
+* switch max pct to similarity flag in project ([094b418](https://github.com/macite/doubtfire-deploy/commit/094b418c1bff709e755bf7c61207ebf22bfc6106))
+* task explorer 405 error ([7ea516c](https://github.com/macite/doubtfire-deploy/commit/7ea516ce8e346d46e8acf68c8b41fa81485515ba))
+* task submission pdf downloading ([b0becb4](https://github.com/macite/doubtfire-deploy/commit/b0becb4c76e4e45f10782561a6b53a322eb43665))
+* tweak theme.scss file ([393770b](https://github.com/macite/doubtfire-deploy/commit/393770b35d1688d27bce47e1d6b94735a1822494))
+* update package lock ([674f3c7](https://github.com/macite/doubtfire-deploy/commit/674f3c70bd0a4c8c33e25d34beeab76c29f56325))
+* use angular 15 ([d0104cc](https://github.com/macite/doubtfire-deploy/commit/d0104cc57edda68a1a165bdf1fd7cf75bd74ec68))
+* use correct task object in task pinning ([a5fceb0](https://github.com/macite/doubtfire-deploy/commit/a5fceb048b931dbd5ccc3ad5d4fd898b146284fb))
+* use correct theming import ([b0d3232](https://github.com/macite/doubtfire-deploy/commit/b0d3232eaed2096296cf025437dda26ddcd595e0))
+* use disabled blinding ([628ca55](https://github.com/macite/doubtfire-deploy/commit/628ca55b4e8f569f751b78ead7a50fa9e086ccec))
+* use new state name in task dropdown ([3c2fe44](https://github.com/macite/doubtfire-deploy/commit/3c2fe444d398bcedb5c998a47683d04279996680))
+* use onChanges rather than input setter ([8069c21](https://github.com/macite/doubtfire-deploy/commit/8069c21d9ecfc412dea37cade8e8a37e79730f01))
+
 ### [8.0.9](https://github.com/doubtfire-lms/doubtfire-deploy/compare/v8.0.8...v8.0.9) (2024-05-31)
 
 
@@ -328,8 +2162,15 @@ All notable changes to this project will be documented in this file. See [standa
 * use tailwindcss classes ([8d7e160](https://github.com/macite/doubtfire-deploy/commit/8d7e160e2d40c42284ee0c1fc85d6d9e01166cda))
 
 
-### [7.0.23](https://github.com/macite/doubtfire-deploy/compare/v7.0.22...v7.0.23) (2024-06-04)
+### [7.0.24](https://github.com/macite/doubtfire-deploy/compare/v7.0.23...v7.0.24) (2024-06-05)
+
+### Bug Fixes
 
+* ensure download blob supports 206 responses ([6445f9f](https://github.com/macite/doubtfire-deploy/commit/6445f9f998db70fbe9b9abf723dc17fd298b5d2f))
+
+
+
+### [7.0.23](https://github.com/macite/doubtfire-deploy/compare/v7.0.22...v7.0.23) (2024-06-04)
 
 ### Bug Fixes
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index fad5d54a31..a06585384e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -15,11 +15,28 @@ Before continuing, **please read the [contributing document](https://github.com/
   - [Project structure](#project-structure)
   - [Testing](#testing)
   - [Formatting](#formatting)
-  - [Migrating components](#migrating-components)
+  - [Component conventions](#component-conventions)
 
 ## Project structure
 
-Coming...
+The Angular application lives under `src/app`.
+
+- `src/app/api/models` contains client-side models for Doubtfire data.
+- `src/app/api/services` contains services used to access and work with API data.
+- `src/app/api/fixtures` contains API-related fixture data.
+- `src/app/common` contains components and other UI code shared by multiple features.
+- Feature-specific code lives in feature folders under `src/app`, such as
+  `account`, `admin`, `dashboard`, `projects`, `tasks`, and `units`.
+- Keep components that belong to one feature with that feature rather than
+  moving them into `common`.
+- Components wired through the main Angular module use `standalone: false`.
+- Doubtfire component selectors use the `f-` prefix.
+- New non-standalone components must be imported and declared in
+  `src/app/doubtfire-angular.module.ts`.
+- `src/main.ts` bootstraps `DoubtfireAngularModule`, so registering a
+  non-standalone component in that module is required before it can be used.
+- Follow the structure and naming of a nearby component when adding new
+  component TypeScript, template, style, and test files.
 
 ## Testing
 
@@ -33,7 +50,7 @@ npm test
 
 - [ESLint] is used in the project to enforce code style and should be
   configured in your [editor](https://eslint.org/docs/user-guide/integrations).
-- [Prettier] is also used and apply automatically by ESLint.
+- [Prettier] is also used and applied automatically by ESLint.
 
 We also use a number of framework plugins:
 
@@ -54,11 +71,24 @@ npm run lint:fix
 
 Please note that not all issues can be fixed by ESLint and Prettier.
 
-## Migrating components
+## Component conventions
 
-See [MIGRATION-GUIDE.md](MIGRATION-GUIDE.md)
+The Angular.js migration is complete, so new work should follow the current
+Angular application structure rather than the old migration process.
 
-[ESLint](https://eslint.org/)
-[Prettier](https://prettier.io/)
-[TypeScript ESLint](https://github.com/typescript-eslint/typescript-eslint)
-[Angular ESLint](https://github.com/angular-eslint/angular-eslint)
+When adding a component:
+
+- place shared components under `src/app/common`;
+- place feature-specific components in the relevant feature folder;
+- use the `f-` selector prefix;
+- set `standalone: false` for components registered with the main module; and
+- import and add the component to the `declarations` in
+  `src/app/doubtfire-angular.module.ts`.
+
+Check a nearby existing component before adding a new one so its location,
+naming, and module registration match the surrounding feature.
+
+[ESLint]: https://eslint.org/
+[Prettier]: https://prettier.io/
+[TypeScript ESLint]: https://github.com/typescript-eslint/typescript-eslint
+[Angular ESLint]: https://github.com/angular-eslint/angular-eslint
\ No newline at end of file
diff --git a/CROSS_UNIT_STATUS.md b/CROSS_UNIT_STATUS.md
new file mode 100644
index 0000000000..b83cfc162e
--- /dev/null
+++ b/CROSS_UNIT_STATUS.md
@@ -0,0 +1,41 @@
+# Cross-Unit (Cross-Project) Dashboard — starting-point status
+
+**Branch:** `feature/cross-unit` (off `11.0.x`) · **Repos:** `doubtfire-web` + `doubtfire-api`
+**State:** skeleton ported onto v11.0 and wired — *not yet built/tested* (see Verification).
+
+## What this feature is
+A single dashboard that shows a student's tasks across **all** their units in one view
+(`/dashboard`, Student-only). Currently a bare unit→task list — the visual/UX build sits on top.
+
+## What landed in this port
+Ported from the old `Feature/Cross-Unit` branch (forked ~`10.0.0`, ~561 web / 169 api commits
+behind) and **re-homed onto v11.0** — not a git rebase.
+
+### doubtfire-web
+- **Clean adds (7 files):** `src/app/dashboard/**` — `f-cross-dashboard`, `list-item/dashboard-list-item`,
+  `list-item/expanded-list-item/*`. Verified to compile against v11's `GlobalStateService`
+  (`onLoad`, `currentUserProjects.values`).
+- **Wiring (4 edits), translated UI-Router → Angular Router:**
+  - `app.routes.ts` — new top-level `{path: 'dashboard', component: CrossDashboardComponent,
+    canActivate: [roleWhitelistGuard], data: {roleWhitelist: ['Student']}}`.
+  - `doubtfire-angular.module.ts` — registered the 3 components in `declarations`.
+    ⚠️ **Shared file — coordinate with `feature/notifications` and `peer-progress`.**
+  - `home/states/home/home.component.html` — added a "View all" (`/dashboard`) button beside
+    "View previous" (`/view-all-projects`); converted `uiSref` → `routerLink`.
+  - `projects/states/index/global-state.service.ts` — projects query now sends
+    `include_task_definitions: true` (also fixed the latent `include_in_active` → `include_inactive`
+    param typo so web matches the API).
+
+### doubtfire-api (`feature/cross-unit` branch there)
+- `app/api/projects_api.rb` — new `include_task_definitions` param on `GET /projects`.
+- `app/api/entities/project_entity.rb` — expose `tasks` when `include_task_definitions`.
+- `app/api/entities/minimal/minimal_unit_entity.rb` — expose `task_definitions` when requested.
+
+## Verification (NOT yet run — do before relying on this)
+- web: `npm ci && npm run build && npm run lint`
+- api: `bundle exec rubocop` + relevant tests
+- manual: log in as a Student → home shows the new button → `/dashboard` renders the unit list.
+
+## What the team builds on top
+Task status/colours, due dates, sorting/filtering, Material styling, empty/loading states.
+The port only gets the compiling skeleton onto v11 as a shared starting point.
diff --git a/DASHBOARD-SAMPLE-DATA.md b/DASHBOARD-SAMPLE-DATA.md
new file mode 100644
index 0000000000..2befa99d66
--- /dev/null
+++ b/DASHBOARD-SAMPLE-DATA.md
@@ -0,0 +1,10 @@
+# Cross-unit dashboard sample data
+
+These values are entirely synthetic and are intended only as a visual reference for dashboard
+mockups. They are not an API schema or an automated-test fixture. Dates use `DD/MM/YYYY`.
+
+| Unit code | Example task due date | Unit completion | Example task status |
+| --------- | --------------------- | --------------- | ------------------- |
+| COS10001  | 17/10/2026            | 10%             | `not_started`       |
+| COS20007  | 19/08/2026            | 100%            | `complete`          |
+| COS30046  | 25/08/2026            | 90%             | `working_on_it`     |
diff --git a/Dockerfile b/Dockerfile
index 18590c09e9..8818bb1674 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,8 +1,14 @@
-FROM node:20
+FROM node:22.23.2-bookworm-slim@sha256:83f487e0a63425e5b4d146fb5e5be574bcbe1b7b843d3ebafdd95eaf7767a7e5
 
-ENV DEBIAN_FRONTEND noninteractive
+# The upstream image ships npm 10.9.8. Upgrade to the latest Node 22-compatible
+# npm 11 release to pick up patched bundled dependencies before dropping
+# privileges.
+RUN npm install --global npm@11.19.1 \
+  && npm cache clean --force
+
+ENV DEBIAN_FRONTEND=noninteractive
 ENV USER=node
-ENV NODE_ENV docker
+ENV NODE_ENV=docker
 
 # You can not use `${USER}` here, but reference `/home/node`.
 ENV PATH="/home/node/.npm-global/bin:${PATH}"
@@ -26,5 +32,5 @@ RUN npm ci --force --include=optional
 
 EXPOSE 9876
 
-# Launch - install on launch so that node_modules are updated in volume
-CMD /bin/bash -c 'npm install; npm start'
+# Install on launch so that bind-mounted source and node_modules stay current.
+CMD ["/bin/bash", "-c", "npm install && exec npm start"]
diff --git a/JPlag-Report-Viewer b/JPlag-Report-Viewer
new file mode 160000
index 0000000000..4132c30d9e
--- /dev/null
+++ b/JPlag-Report-Viewer
@@ -0,0 +1 @@
+Subproject commit 4132c30d9ed5606df4648a7f1494ca751d3dca49
diff --git a/MIGRATION-GUIDE.md b/MIGRATION-GUIDE.md
deleted file mode 100644
index 049c5d2e52..0000000000
--- a/MIGRATION-GUIDE.md
+++ /dev/null
@@ -1,218 +0,0 @@
-![Doubtfire Logo](src/assets/icons/android-chrome-192x192.png)
-
-# Doubtfire Web - Angular.js to Angular migration guide
-
-This guide will provide the basic steps you can follow in order to successfully migrate a Doubtfire component from CoffeeScript and Angular.js to TypeScript and Angular.
-
-Here we will demonstrate what to do using the changes associated with the Task Description card.
-
-## Step 0 - Come up with a plan
-
-Before you really get started you need to identify a suitable component to migrate, and come up with a plan for the components new styling.
-
-### Identifying a suitable component to migrate
-
-When picking a component make sure your component **DOES NOT** have any other Angular.js components nested within it. Always start at the bottom and work our way up to the "bigger" components.
-
-Look for components that should be easy to migrate. It will be easier to migrate things that just present data, but in general remember you already have a working component. So it should mostly be a matter of mapping the code across, and changing the styling to switch from bootstrap to material design.
-
-When in doubt... ask. We are happy to make suggestions for components that should be beneficial to migrate.
-
-We picked the Task Description Card for this guide as it was relatively straightforward in terms of functionality, and it does not have any other Doubtfire components nested within it.
-
-### Plan your components new styling
-
-Explore the [Angular Material](https://material.angular.io) details. Look for similar [components](https://material.angular.io/components/categories) to the bootstrap components being used in the component you are migrating. Where there is a simple mapping you can probably just proceed, but if you want to make bigger changes (which is good) then please mock something up and discuss with the team first. We do not want you wasting effort if your ideas are not in line with what we will accept.
-
-For the Task Description Card there is a matching [card component](https://material.angular.io/components/card/overview) in Angular Material with a suitable [example](https://material.angular.io/components/card/examples) we can build from. We can do a first pass and then make any styling fixes if needed at the end.
-
-## Step 1 - Create a branch
-
-Ok, this should be a given but it is always going to be important to isolate the changes for these migrations. So start by checking out a new branch for this change.
-
-For the task description card this was done using the following command in the Terminal:
-
-```bash
-git checkout -b migrate/task-description-card
-```
-
-## Step 2 - Create replacement files
-
-Create a typescript, scss, and html file to replace the coffeescript, scss, and html files from the angular.js project.
-
-For the Task Description Card we had the files:
-
-- task-description-card.coffee
-- task-description-card.tpl.html
-- task-description-card.scss
-
-In the same folder we can start by creating the following files:
-
-- task-description-card.component.ts
-- task-description-card.component.html
-- task-description-card.component.scss
-
-Notice the naming convention. When migrating a component we use the format _name_.**component**._extension_.
-
-Add the start of the typescript using something based on the following:
-
-```typescript
-import { Component, Input, Inject } from '@angular/core';
-
-@Component({
-  selector: 'task-description-card',
-  templateUrl: 'task-description-card.component.html',
-  styleUrls: ['task-description-card.component.scss'],
-})
-export class TaskDescriptionCardComponent {
-  constructor() {}
-}
-```
-
-We cant see any of these changes yet, but it is a good clean start so lets commit this before we move on.
-
-```bash
-git add task-description-card.component.ts
-git add task-description-card.component.html
-git add task-description-card.component.scss
-# or "git add ." if you have a clean repository and only these files are changed.
-git commit -m "NEW: Create initial files for migration of task-description-card"
-```
-
-Then we should make sure to push this back to GitHub so that others can see our progress. As this is a new branch you will need set the upstream branch, but if you forget the `git push` will remind you anyway.
-
-```bash
-git push --set-upstream origin migrate/task-description-card
-```
-
-You should see a suggestion to create a pull request when you add this branch. This is also a good idea. At this stage you can create a [Draft Pull Request](https://github.blog/2019-02-14-introducing-draft-pull-requests/) which will get updated as you push your changes. Use this to get a quick screenshot of the component in action currently. Then you can include this as a "from" image.
-
-See the resulting [commit](933df7b673b5d57dc162fb42f79c511444f5fbe3) and [pull request](https://github.com/doubtfire-lms/doubtfire-web/pull/321). Its great that you can go back and see how things evolved.
-
-## Step 3 - Unlink old component and add in new
-
-We want to make sure we can see our progress as quickly as possible. So lets start by replacing the old component with the new one.
-
-There are a few files we need to update to achieve this.
-
-- Remove link to component from the angular module.
-
-  - Open the component's CoffeeScript file and make a note of the name of the module.
-
-    ```coffeescript
-    angular.module('doubtfire.projects.states.dashboard.directives.task-dashboard.directives.task-description-card', [])
-    ```
-
-    The name is `doubtfire.projects.states.dashboard.directives.task-dashboard.directives.task-description-card`
-
-  - Search for where this is referenced. For the task-description-card this was in file `src/app/projects/states/dashboard/directives/task-dashboard/directives/directives.coffee`... hence the suggestion to search :satisfied:.
-  - Remove the reference. This will mean that the component is no longer loaded by angular.js.
-
-- Setup the new component in **doubtfire-angular.module.ts**
-  - Import like this:
-    ```ts
-    import { TaskDescriptionCardComponent } from './projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component';
-    ```
-  - Then add the component name to the list of **declarations**. Now the component will be available in Angular.
-- Remove the old and downgrade the new in **doubtfire-angularjs.module.ts**
-  - Remove the line importing the old javascript file:
-    ```typescript
-    import 'build/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.js';
-    ```
-  - Import the new component... _it is the same code as importing to the angular module_.
-  - Downgrade to make the new component available to Angular.js
-    ```typescript
-    DoubtfireAngularJSModule.directive(
-      'taskDescriptionCard',
-      downgradeComponent({ component: TaskDescriptionCardComponent })
-    );
-    ```
-- Update attributes on the new component usage.
-
-  - Search for all of the places where the component was already used (i.e. search for the component HTML tag).
-  - Update the property binding style to use the Angular form which is `[property]="value"`.
-
-    For example:
-
-    ```html
-    <task-description-card task-def="task.definition" task="task" unit="task.unit()"></task-description-card>
-    ```
-
-    Needs to change to:
-
-    ```html
-    <task-description-card [task-def]="task.definition" [task]="task" [unit]="task.unit()"></task-description-card>
-    ```
-
-- Add matching inputs into your components typescript declaration. These use the syntax `@Input() name: type;`. For the task description card we use:
-
-  ```ts
-  export class TaskDescriptionCardComponent {
-    @Input() task: any;
-    @Input() taskDef: any;
-    @Input() unit: any;
-    ...
-  }
-  ```
-
-Now we can compile to see if this has all worked... :crossed_fingers:. When you change the config in this way I generally find you need to kill any old build processes and start them again. So we can compile now using:
-
-```bash
-npm start
-```
-
-Open your local copy of Doubtfire and navigate somewhere that you can see the lack of the old component. As we have no HTML yet, there should be nothing in its place but we are mostly checking that we have connected this all up correctly.
-
-See the resulting [commit](81563fa3bc04ba4c1afc40a682dbce0703dfc10b) for all of these changes.
-
-Once things are working make sure to commit and push your changes. This will update your draft pull request as well.
-
-Now we are on to the "real" work.
-
-## Step 4 - Migrate the HTML, CoffeeScript, and SCSS
-
-This is where things are going to depend on what you are migrating. Hopefully you have already got a plan for this...
-
-For the task description card I used the [mat-card](https://material.angular.io/components/card/examples) as the main component I needed to migrate to. I did this with the following steps:
-
-1. Copy in the current bootstrap HTML
-2. Identify update to wrap in the material card component (save and test)
-3. Update the header (save and test)
-4. Update the footer to actions (save and test)
-5. Scan for other bootstrap tags and replace.
-
-As I needed it I copied across the CoffeeScript code into the TypeScript component. This included switching the hyperlinks to use buttons, and including the addition of the file saver to make it easy to save the downloaded task sheets and resources as a click action rather than opening a new page with the links.
-
-At the end I made sure to check that **all functionality** from the old component had a matching set of code in the new component.
-
-Here are a few things to watch out for when doing this migration:
-
-- Switching `ng-show` to `[hidden]` remember to change the boolean expression.
-- Font awesome icons needs to change to Material Design icons using [mat-icon](https://material.angular.io/components/icon/overview) - check out the [icon list]<https://material.io/resources/icons/?style=baseline>.
-- Make sure to add [aria-hidden](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute) and [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) to ensure icons and images are screen reader friendly.
-- Make sure to run `ng lint` at the end of this process to make sure your TypeScript code is looking good!
-
-### A note on porting the CSS of components
-
-In Doubtfire's AngularJS codebase, the components use bootstrap classes such as `card-sm` or `card-danger`. The eventual goal of the rewrite is to remove this Bootstrap dependancy as we are moving to Angular Material. As such, when the new components are being created, these styles need to be replaced with Angular Material equivalents, or a similar component design needs to be written which can replace the old one.
-
-These bootstrap components are usually bassed into the `class` of the components, for example:
-
-- `class="card-heading"`, `class="card-body"` would need to be recreated with: https://material.angular.io/components/card/overview
-- `class="text-muted"` would be recreated with: https://material.angular.io/guide/typography
-
-Once things are all working... you can delete the old CoffeeScript, HTML and SCSS files. These are no longer needed... so they can go!
-
-Check the [final commit](9c8a62c1d70e8f950f8c72b3a7a48c0d7274f670) with all of these changes.
-
-## Step 5 - Create the Pull Request
-
-Now it is time to update the Pull Request. Please ensure the pull request contains two screenshots for each use-case of the component, showing the old component (before) and the new component (after). The component can also be demonstrated in a video which can be directly uploaded to the Pull Request (please do not link to another hosting platform). Once you have added this, make sure to note any changes that the team should check. You want to make sure that you dont break things when then is merged in. If you think everything is ready then switch from a draft to full PR... As long as things are tidy, and you have clear screenshots to show that everything is working, you can expect things to be merged quickly or for you to get some instructions on what to change.
-
-You can check out how this [pull request](https://github.com/doubtfire-lms/doubtfire-web/pull/321) went... :crossed_fingers:
-
-## Conclusion
-
-Hopefully this has provided some useful steps that will mean you can quickly and efficiently migrate the Doubtfire components. We are all really looking forward to switching to the new Angular approach, and trying to keep things more up to date going forward.
-
-Many thanks for your contributions on behalf of the Doubtfire team!
diff --git a/README.md b/README.md
index b213dcce33..206d0377e7 100644
--- a/README.md
+++ b/README.md
@@ -1,335 +1,154 @@
-![Doubtfire Logo](src/assets/icons/android-chrome-192x192.png)
+<p align="center"> 
+	<img alt="OnTrack logo" src="src/assets/icons/android-chrome-192x192.png" width="192">
+</p>
 
-# Doubtfire Web [![CI](https://img.shields.io/github/workflow/status/doubtfire-lms/doubtfire-web/Node.js%20CI?label=CI&logo=GitHub)](https://github.com/doubtfire-lms/doubtfire-web/actions/workflows/nodejs-ci.yml)
+# OnTrack Web [![CI](https://github.com/doubtfire-lms/doubtfire-web/actions/workflows/nodejs-ci.yml/badge.svg)](https://github.com/doubtfire-lms/doubtfire-web/actions/workflows/nodejs-ci.yml)
 
 A modern, lightweight learning management system.
 
-> ## 🛠 Migration Status: In Development
->
-> Doubtfire web migration from AngularJS/Coffeescript to Angular/Typescript, including refactoring all components, is currently in development.
->
-> See the progress of component migration below.
-
-## Migration Progress
-
-SUMMARY:
-
-73 / 132 components migrated
-
-MIGRATED:
-
-- [x] ./src/app/home/splash-screen/splash-screen.component.ts
-- [x] ./src/app/home/states/home/home.component.ts
-- [x] ./src/app/tasks/task-submission-history/task-submission-history.component.ts
-- [x] ./src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.ts
-- [x] ./src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.ts
-- [x] ./src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.ts
-- [x] ./src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.ts
-- [x] ./src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
-- [x] ./src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.ts
-- [x] ./src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts
-- [x] ./src/app/tasks/task-comment-composer/task-comment-composer.component.ts
-- [x] ./src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts
-- [x] ./src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts
-- [x] ./src/app/admin/institution-settings/overseer-images/overseer-image-list.component.ts
-- [x] ./src/app/admin/institution-settings/institution-settings.component.ts
-- [x] ./src/app/admin/institution-settings/campuses/campus-list/campus-list.component.ts
-- [x] ./src/app/admin/institution-settings/activity-type-list/activity-type-list.component.ts
-- [x] ./src/app/admin/tii-action-log/tii-action-log.component.ts
-- [x] ./src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.ts
-- [x] ./src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts
-- [x] ./src/app/eula/accept-eula/accept-eula.component.ts
-- [x] ./src/app/welcome/welcome.component.ts
-- [x] ./src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.ts
-- [x] ./src/app/units/states/tasks/inbox/inbox.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.ts
-- [x] ./src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.ts
-- [x] ./src/app/units/states/analytics/unit-analytics-route.component.ts
-- [x] ./src/app/common/footer/footer.component.ts
-- [x] ./src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.ts
-- [x] ./src/app/common/audio-recorder/audio/microphone-tester/microphone-tester.component.ts
-- [x] ./src/app/common/audio-player/audio-player.component.ts
-- [x] ./src/app/common/edit-profile-form/edit-profile-form.component.ts
-- [x] ./src/app/common/file-drop/file-drop.component.ts
-- [x] ./src/app/common/modals/extension-modal/extension-modal.component.ts
-- [x] ./src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component.ts
-- [x] ./src/app/common/modals/calendar-modal/calendar-modal.component.ts
-- [x] ./src/app/common/modals/task-assessment-modal/task-assessment-modal.component.ts
-- [x] ./src/app/common/pdf-viewer/pdf-viewer.component.ts
-- [x] ./src/app/common/obect-select/object-select.component.ts
-- [x] ./src/app/common/hero-sidebar/hero-sidebar.component.ts
-- [x] ./src/app/common/project-progress-bar/project-progress-bar.component.ts
-- [x] ./src/app/common/f-chip/f-chip.component.ts
-- [x] ./src/app/common/status-icon/status-icon.component.ts
-- [x] ./src/app/common/user-badge/user-badge.component.ts
-- [x] ./src/app/common/file-viewer/file-viewer.component.ts
-- [x] ./src/app/common/user-icon/user-icon.component.ts
-- [x] ./src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.ts
-- [x] ./src/app/common/header/header.component.ts
-- [x] ./src/app/common/header/task-dropdown/task-dropdown.component.ts
-- [x] ./src/app/common/header/unit-dropdown/unit-dropdown.component.ts
-- [x] ./src/app/common/services/alert.service.ts
-- [x] ./src/app/sessions/states/sign-in/sign-in.component.ts
-- [x] ./src/app/account/edit-profile/edit-profile.component.ts
-
-TODO:
-
-- [ ] ./src/app/visualisations/alignment-bar-chart.coffee
-- [ ] ./src/app/visualisations/summary-task-status-scatter.coffee
-- [ ] ./src/app/visualisations/target-grade-pie-chart.coffee
-- [ ] ./src/app/visualisations/achievement-custom-bar-chart.coffee
-- [ ] ./src/app/visualisations/student-task-status-pie-chart.coffee
-- [ ] ./src/app/visualisations/alignment-bullet-chart.coffee
-- [ ] ./src/app/visualisations/progress-burndown-chart.coffee
-- [ ] ./src/app/visualisations/task-status-pie-chart.coffee
-- [ ] ./src/app/visualisations/achievement-box-plot.coffee
-- [ ] ./src/app/visualisations/task-completion-box-plot.coffee
-- [ ] ./src/app/visualisations/visualisations.coffee
-- [ ] ./src/app/tasks/task-status-selector/task-status-selector.coffee
-- [ ] ./src/app/tasks/tasks.coffee
-- [ ] ./src/app/tasks/modals/modals.coffee
-- [ ] ./src/app/tasks/modals/upload-submission-modal/upload-submission-modal.coffee
-- [ ] ./src/app/tasks/modals/grade-task-modal/grade-task-modal.coffee
-- [ ] ./src/app/tasks/task-definition-selector/task-definition-selector.coffee
-- [ ] ./src/app/tasks/project-tasks-list/project-tasks-list.coffee
-- [ ] ./src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.coffee
-- [ ] ./src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.coffee
-- [ ] ./src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.coffee
-- [ ] ./src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.coffee
-- [ ] ./src/app/tasks/task-ilo-alignment/task-ilo-alignment.coffee
-- [ ] ./src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.coffee
-- [ ] ./src/app/config/privacy-policy/privacy-policy.coffee
-- [ ] ./src/app/config/config.coffee
-- [ ] ./src/app/config/runtime/runtime.coffee
-- [ ] ./src/app/config/root-controller/root-controller.coffee
-- [ ] ./src/app/config/local-storage/local-storage.coffee
-- [ ] ./src/app/config/routing/routing.coffee
-- [ ] ./src/app/config/vendor-dependencies/vendor-dependencies.coffee
-- [ ] ./src/app/config/analytics/analytics.coffee
-- [ ] ./src/app/config/debug/debug.coffee
-- [ ] ./src/app/projects/projects.coffee
-- [ ] ./src/app/projects/project-progress-dashboard/project-progress-dashboard.coffee
-- [ ] ./src/app/projects/states/states.coffee
-- [ ] ./src/app/projects/states/all/directives/directives.coffee
-- [ ] ./src/app/projects/states/all/directives/all-projects-list/all-projects-list.coffee
-- [ ] ./src/app/projects/states/all/all.coffee
-- [ ] ./src/app/projects/states/groups/groups.coffee
-- [ ] ./src/app/projects/states/feedback/feedback.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/directives.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/student-task-list/student-task-list.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/directives.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-outcomes-card/task-outcomes-card.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.coffee
-- [ ] ./src/app/projects/states/dashboard/dashboard.coffee
-- [ ] ./src/app/projects/states/outcomes/outcomes.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/directives.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.coffee
-- [ ] ./src/app/projects/states/portfolio/portfolio.coffee
-- [ ] ./src/app/projects/states/index/index.coffee
-- [ ] ./src/app/projects/states/tutorials/tutorials.coffee
-- [ ] ./src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee
-- [ ] ./src/app/admin/modals/modals.coffee
-- [ ] ./src/app/admin/modals/create-unit-modal/create-unit-modal.coffee
-- [ ] ./src/app/admin/states/states.coffee
-- [ ] ./src/app/admin/states/units/units.coffee
-- [ ] ./src/app/admin/states/users/users.coffee
-- [ ] ./src/app/admin/admin.coffee
-- [ ] ./src/app/groups/group-selector/group-selector.coffee
-- [ ] ./src/app/groups/group-set-manager/group-set-manager.coffee
-- [ ] ./src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.coffee
-- [ ] ./src/app/groups/group-member-list/group-member-list.coffee
-- [ ] ./src/app/groups/group-set-selector/group-set-selector.coffee
-- [ ] ./src/app/groups/tutor-group-manager/tutor-group-manager.coffee
-- [ ] ./src/app/groups/groups.coffee
-- [ ] ./src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.coffee
-- [ ] ./src/app/units/modals/modals.coffee
-- [ ] ./src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.coffee
-- [ ] ./src/app/units/units.coffee
-- [ ] ./src/app/units/states/states.coffee
-- [ ] ./src/app/units/states/tasks/inbox/inbox.coffee
-- [ ] ./src/app/units/states/tasks/tasks.coffee
-- [ ] ./src/app/units/states/tasks/viewer/directives/directives.coffee
-- [ ] ./src/app/units/states/tasks/viewer/directives/task-sheet-view/task-sheet-view.coffee
-- [ ] ./src/app/units/states/tasks/viewer/directives/task-details-view/task-details-view.coffee
-- [ ] ./src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.coffee
-- [ ] ./src/app/units/states/tasks/viewer/viewer.coffee
-- [ ] ./src/app/units/states/tasks/definition/definition.coffee
-- [ ] ./src/app/units/states/portfolios/portfolios.coffee
-- [ ] ./src/app/units/states/all/directives/all-units-list/all-units-list.coffee
-- [ ] ./src/app/units/states/all/directives/directives.coffee
-- [ ] ./src/app/units/states/all/all.coffee
-- [ ] ./src/app/units/states/groups/groups.coffee
-- [ ] ./src/app/units/states/edit/directives/directives.coffee
-- [ ] ./src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.coffee
-- [ ] ./src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.coffee
-- [ ] ./src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.coffee
-- [ ] ./src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.coffee
-- [ ] ./src/app/units/states/edit/edit.coffee
-- [ ] ./src/app/units/states/rollover/directives/directives.coffee
-- [ ] ./src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.coffee
-- [ ] ./src/app/units/states/rollover/rollover.coffee
-- [ ] ./src/app/units/states/index/index.coffee
-- [ ] ./src/app/units/states/students-list/students-list.coffee
-- [ ] ./src/app/units/states/analytics/analytics.coffee
-- [ ] ./src/app/common/filters/filters.coffee
-- [ ] ./src/app/common/content-editable/content-editable.coffee
-- [ ] ./src/app/common/alert-list/alert-list.coffee
-- [ ] ./src/app/common/modals/confirmation-modal/confirmation-modal.coffee
-- [ ] ./src/app/common/modals/comments-modal/comments-modal.coffee
-- [ ] ./src/app/common/modals/modals.coffee
-- [ ] ./src/app/common/modals/csv-result-modal/csv-result-modal.coffee
-- [ ] ./src/app/common/modals/progress-modal/progress-modal.coffee
-- [ ] ./src/app/common/grade-icon/grade-icon.coffee
-- [ ] ./src/app/common/file-uploader/file-uploader.coffee
-- [ ] ./src/app/common/common.coffee
-- [ ] ./src/app/common/services/grade-service.coffee
-- [ ] ./src/app/common/services/date-service.coffee
-- [ ] ./src/app/common/services/alert-service.coffee
-- [ ] ./src/app/common/services/media-service.coffee
-- [ ] ./src/app/common/services/recorder-service.coffee
-- [ ] ./src/app/common/services/outcome-service.coffee
-- [ ] ./src/app/common/services/listener-service.coffee
-- [ ] ./src/app/common/services/analytics-service.coffee
-- [ ] ./src/app/common/services/services.coffee
-- [ ] ./src/app/sessions/auth/http-auth-injector.coffee
-- [ ] ./src/app/sessions/sessions.coffee
-- [ ] ./src/app/errors/errors.coffee
-- [ ] ./src/app/errors/states/states.coffee
-- [ ] ./src/app/errors/states/unauthorised/unauthorised.coffee
-- [ ] ./src/app/errors/states/not-found/not-found.coffee
-- [ ] ./src/app/errors/states/timeout/timeout.coffee
-
 ## Table of Contents
 
-1. [Getting Started](#getting-started)
-2. [Resources](#resources)
-3. [Contributing](#contributing)
-4. [Deployment](#deployment)
-5. [License](#license)
+- [Getting Started](#getting-started)
+- [Checks](#checks)
+- [Production build and handover](#production-build-and-handover)
+- [Demo and live feature boundaries](#demo-and-live-feature-boundaries)
+- [Resources](#resources)
+- [Contributing](#contributing)
+- [License](#license)
 
 ## Getting Started
 
-If you will be using [Docker](https://github.com/doubtfire-lms/doubtfire-api/#getting-started-via-docker), follow the instructions there.
-
-Before you get started, make sure you have the [Doubtfire API](https://github.com/doubtfire-lms/doubtfire-api) up and running. You will need to do this before continuing.
-
-First, clone the web repository, and change to the root directory:
+OnTrack Web requires Node.js 22.22.3 or newer. The exact handover version is in
+`.nvmrc`. Clone recursively because the JPlag report viewer is a production
+asset supplied by a git submodule:
 
 ```sh
-git clone https://github.com/doubtfire-lms/doubtfire-web.git
-cd ./doubtfire-web
+git clone --recurse-submodules https://github.com/doubtfire-lms/doubtfire-web.git
+cd doubtfire-web
+git submodule update --init --recursive
+nvm install
+nvm use
+npm ci
 ```
 
-You can automate the installation process by running the automated setup script:
+Run the [Doubtfire API](https://github.com/doubtfire-lms/doubtfire-api) on
+`http://localhost:3000`, then start the Angular development server:
 
 ```sh
-./setup.sh
+npm start
 ```
 
-Or, you can continue following the below steps to manually install `doubtfire-web`.
+Open <http://localhost:4200>. `proxy.conf.json` forwards `/api` to the local API.
+It also forwards `/lti/api` to the optional local LTI service on port 3001; LTI
+requests will fail if that service is not running.
 
-Install [Node.js](http://nodejs.org/) either by [downloading it](http://nodejs.org/download/) and installing it manually, or via [Homebrew](http://brew.sh) on OS X:
+The legacy root `docker-compose.yml` also defaults to local database
+authentication. Optional AAF development must use a dedicated non-production
+registration supplied through an ignored `.env` file copied from
+`.env.example`. Any AAF secret ever committed to Git must be treated as
+compromised and rotated by its identity owner.
 
-```sh
-brew install node
-```
+## Checks
 
-_or_ by using `apt-get` on Linux:
+Run the same checks required for a release before handing the branch over:
 
 ```sh
-curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
-sudo apt-get install nodejs
+npm run verify:deployment-config
+npm run lint
+npm run typecheck
+npm run test:ci
+npm run deploy
 ```
 
-Install Ruby [SASS](http://sass-lang.com):
+## Production build and handover
 
-```sh
-gem install sass
-```
+The production application deliberately uses the browser origin for both API
+contracts:
 
-If `gem` fails, you should read the Doubtfire API README to install ruby. If you are _not_ using `rbenv`, e.g., using Docker instead, you may need to prepend `sudo` to the above commands to have root write access.
+- `/api` must be reverse-proxied to Doubtfire API.
+- `/lti/api` must be reverse-proxied to the LTI service when LTI is enabled.
 
-If using `rbenv`, rehash to ensure each of the gems are on your `PATH`:
+`DF_API_URL` is not a runtime switch for the Angular production build. Hosting
+the API on another origin requires an explicit web configuration and matching
+CORS policy. Production must use HTTPS for service workers, installation, and
+Web Push.
+
+Build the static production bundle directly with:
 
 ```sh
-rbenv rehash
+npm ci
+git submodule update --init --recursive
+npm run deploy
 ```
 
-Install all node dependencies using `npm`, as well as [grunt-cli](http://gruntjs.com/using-the-cli) globally:
+Or build the production Nginx image, which is the release artifact used by the
+deployment repository:
 
 ```sh
-npm install
+docker build -f deploy.Dockerfile -t doubtfire-web:handover .
+docker run --rm -p 8080:80 doubtfire-web:handover
 ```
 
-**Note:** You may need to install `grunt-cli` globally in Linux using `sudo`.
+The root `Dockerfile` is the bind-mounted development image: it contains the
+source tree, npm, and development dependencies so that local Compose workflows
+can rebuild on startup. Do not publish or assess it as the production runtime.
+Release vulnerability scans must build `deploy.Dockerfile` and scan its final
+Nginx image digest; build-stage and development-image findings should be tracked
+separately.
+
+The Dockerfile pins its Node and Nginx base images by multi-architecture digest
+and performs the build as the unprivileged `node` user. Refresh those digests
+deliberately as part of a reviewed dependency update; do not replace them with
+floating tags for a release.
 
-Lastly, to compile and run a watch server and web server, use `npm start`:
+Sentry is optional. Direct production builds leave it disabled. The image build
+can substitute `SENTRY_DSN`, `SENTRY_RELEASE`, and `SENTRY_DIST`; source-map
+upload additionally requires the documented Sentry build arguments and a
+BuildKit `sentry_auth_token` secret.
+
+Before publishing, verify the generated service-worker files and JPlag assets:
 
 ```sh
-npm start
+test -f dist/browser/index.html
+test -f dist/browser/ngsw.json
+test -f dist/browser/ngsw-worker.js
+test -f dist/browser/manifest.webmanifest
+test -n "$(find dist/browser/JPlag -mindepth 1 -maxdepth 1 -print -quit)"
 ```
 
-This will automatically run the angular 1 `grunt watch`, and the angular 7 `ng serve`.
+Against the running image, confirm application routes fall back to `index.html`,
+each named control-file URL returns 404 rather than HTML if its build output is
+missing, and these files return `Cache-Control: no-store, no-cache` when present:
 
-You can then navigate to the Doubtfire web interface at **http://localhost:8000**.
+- `/index.html`
+- `/ngsw.json`
+- `/ngsw-worker.js`
+- `/safety-worker.js`
+- `/worker-basic.min.js`
+- `/manifest.webmanifest`
 
-## Deployment
+The external proxy or CDN must preserve that cache policy. Pin the tested image
+digest in `doubtfire-deploy`, then smoke-test sign-in, API routing, service-worker
+registration/update, and any enabled LTI or Web Push integration.
 
-To compile the front-end, ensure `doubtfire-api` is placed as a sibling directory to `doubtfire-web`, then run:
-
-```sh
-cd /path/to/repos
-ls
-doubtfire-api    doubtfire-web
-cd ./doubtfire-api
-grunt deploy
-```
+## Demo and live feature boundaries
 
-You may prefix this command with the following environment variables:
+Demo source, fixtures, controls, and evidence remain in the repository for local
+demonstrations. Production builds set `production: true` and
+`enableDemoTools: false`; `/demo-controls` is unavailable and genuine API data
+passes through unchanged. Do not change that flag from deployment tooling.
 
-- `DF_API_URL` - the URL of the API (e.g., `https://doubtfire.com/api`). This will default to `window.location.host` if not set and dynamically generate a URL.
-- `DF_EXTERNAL_NAME` - a new name that removes references to the _Doubtfire_ name should you so want to not use such its original name (😢).
+Task-level peer progress is live when the matching API feature and privacy
+configuration are enabled. The unit summary and burndown peer-median displays
+are explicitly demo-only fixtures. The push-notification demo preview is visual
+only; real Web Push requires API VAPID configuration, HTTPS, a running worker,
+and browser permission.
 
 ## Resources
 
-Doubtfire Web is an [Angular](http://angularjs.org) application built using [Bootstrap](http://getbootstrap.com). It uses many Open Source libraries, which you can read up on:
-
-- [Lodash](http://lodash.com/docs)
-- [Moment.js](http://momentjs.com)
-- [Font Awesome](http://fontawesome.io)
-- [UI Router](https://github.com/angular-ui/ui-router)
-- [UI Bootstrap](http://angular-ui.github.io/bootstrap/versioned-docs/0.13.4/)
-- [UI Select](https://github.com/angular-ui/ui-select)
-- [NVD3 Charts](http://krispo.github.io/angular-nvd3/#/)
-- [Angular X-Editable](http://vitalets.github.io/angular-xeditable/)
-- [Angular Filters](https://github.com/a8m/angular-filter)
-- [Angular Markdown Filter](https://github.com/vpegado/angular-markdown-filter)
+Doubtfire Web is an [Angular](https://angular.dev) application using
+[Angular Material](https://material.angular.dev/). Production is served as a
+static progressive web application by Nginx.
 
 ## Contributing
 
diff --git a/angular.json b/angular.json
index 2c0b1f0b92..6c5694d24c 100644
--- a/angular.json
+++ b/angular.json
@@ -10,44 +10,50 @@
       "prefix": "f",
       "schematics": {
         "@schematics/angular:application": {
-          "strict": false
+          "strict": false,
+          "standalone": false,
+          "style": "scss",
+          "skipTests": true
         }
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist",
-            "index": "build/index.html",
+            "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": ["src/polyfills.ts"],
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/assets",
-              "src/manifest.webmanifest"
+              "src/manifest.webmanifest",
+              {
+                "input": "./JPlag-Report-Viewer",
+                "output": "/JPlag",
+                "glob": "**/!(*.gitignore|README.md|.git)"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/monaco-editor/min",
+                "output": "/assets/monaco/min/"
+              }
             ],
+            "loader": {
+              ".ttf": "binary"
+            },
+            "stylePreprocessorOptions": {
+              "includePaths": ["src"]
+            },
             "styles": [
               "src/theme.scss",
               "src/styles.scss",
-              "./node_modules/bootstrap/dist/css/bootstrap.css",
-              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
-              "./build/assets/doubtfire.css",
-              "./build/assets/node_modules/angular-xeditable/dist/css/xeditable.css",
-              "./build/assets/node_modules/codemirror/lib/codemirror.css",
-              "./build/assets/node_modules/codemirror/theme/xq-light.css",
-              "./build/assets/node_modules/nvd3/build/nv.d3.css",
-              "node_modules/@ctrl/ngx-emoji-mart/picker.css"
+              "node_modules/@ctrl/ngx-emoji-mart/picker.css",
+              "node_modules/@worktile/gantt/styles/index.scss"
             ],
             "scripts": [
               "node_modules/moment/moment.js",
-              "node_modules/d3/d3.js",
-              "node_modules/lodash/lodash.js",
-              "node_modules/underscore.string/dist/underscore.string.min.js",
-              "node_modules/nvd3/build/nv.d3.js",
-              "node_modules/es5-shim/es5-shim.js",
-              "node_modules/codemirror/lib/codemirror.js",
-              "node_modules/codemirror/addon/display/placeholder.js",
-              "node_modules/codemirror/mode/markdown/markdown.js",
+              "node_modules/d3/dist/d3.min.js",
               "node_modules/canvas-confetti/dist/confetti.browser.js"
             ],
             "extractLicenses": false,
@@ -68,12 +74,12 @@
                   "with": "src/environments/environment.prod.ts"
                 },
                 {
-                  "replace": "src/app/config/constants/apiURL.ts",
-                  "with": "src/app/config/constants/apiURL.prod.ts"
+                  "replace": "src/app/config/constants/hostUrl.ts",
+                  "with": "src/app/config/constants/hostUrl.prod.ts"
                 }
               ],
               "optimization": true,
-              "outputHashing": "bundles",
+              "outputHashing": "all",
               "sourceMap": false,
               "extractLicenses": true,
               "serviceWorker": "ngsw-config.json"
@@ -81,7 +87,15 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "serviceWorker": "ngsw-config.json"
+            },
+            "testing": {
+              "aot": false,
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "polyfills": ["zone.js"]
             },
             "devcontainer": {
               "optimization": false,
@@ -89,15 +103,15 @@
               "sourceMap": true,
               "fileReplacements": [
                 {
-                  "replace": "src/app/config/constants/apiURL.ts",
-                  "with": "src/app/config/constants/apiURL.devcontainer.ts"
+                  "replace": "src/app/config/constants/hostUrl.ts",
+                  "with": "src/app/config/constants/hostUrl.devcontainer.ts"
                 }
               ]
             }
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "doubtfire:build",
             "port": 4200,
@@ -121,60 +135,65 @@
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "doubtfire:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "buildTarget": "doubtfire:build:testing",
             "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "./node_modules/bootstrap/dist/css/bootstrap.css",
-              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
-            ],
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ]
+            "runner": "vitest",
+            "setupFiles": ["src/vitest-setup.ts"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.component.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.component.html", "src/**/*.html"]
           }
         },
         "eslint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.component.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.component.html"]
           }
         }
       }
     }
   },
   "schematics": {
-    "@schematics/angular:component": {
-      "style": "scss"
-    },
     "@angular-eslint/schematics:application": {
       "setParserOptionsProject": true
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
   "cli": {
@@ -182,8 +201,6 @@
     "cache": {
       "enabled": true
     },
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }
diff --git a/build.config.js b/build.config.js
index 2f9b32b333..ffb10f91a4 100644
--- a/build.config.js
+++ b/build.config.js
@@ -24,9 +24,9 @@ module.exports = {
     api: {
       src: ['build/src/app/api/api-url.js', 'build/src/app/config/external-name/external-name.js'],
       options: {
-        inline: true
-      }
-    }
+        inline: true,
+      },
+    },
   },
 
   /**
@@ -38,31 +38,15 @@ module.exports = {
    * app's unit tests.
    */
   app_files: {
-    js: [
-      'src/**/*.js',
-      '!src/**/*.spec.js',
-      '!src/assets/**/*.js'
-    ],
-    jsunit: [
-      'src/**/*.spec.js'
-    ],
+    js: ['src/**/*.js', '!src/**/*.spec.js', '!src/assets/**/*.js'],
+    jsunit: ['src/**/*.spec.js'],
 
-    coffee: [
-      'src/**/*.coffee',
-      '!src/**/*.spec.coffee',
-      '!src/**/*.old.coffee'
-    ],
-    coffeeunit: [
-      'src/**/*.spec.coffee'
-    ],
+    coffee: ['src/**/*.coffee', '!src/**/*.spec.coffee', '!src/**/*.old.coffee'],
+    coffeeunit: ['src/**/*.spec.coffee'],
 
-    atpl: [
-      'src/app/**/*.tpl.html'
-    ],
+    atpl: ['src/app/**/*.tpl.html'],
 
-    html: [
-      'src/index.html'
-    ],
+    html: ['src/index.html'],
 
     scss: [
       // Do not modify the order
@@ -70,8 +54,8 @@ module.exports = {
       'src/styles/common/**/*.scss',
       'src/styles/modules/**/*.scss',
       'src/app/**/*.scss',
-      '!src/app/**/*.component.scss'
-    ]
+      '!src/app/**/*.component.scss',
+    ],
   },
 
   /**
@@ -92,26 +76,22 @@ module.exports = {
    */
   vendor_files: {
     compile: {
-      js: [
-      ],
-      jsmap: [
-      ],
+      js: [],
+      jsmap: [],
       scss: [
         'node_modules/bootstrap-sass/**/_bootstrap.scss',
-        'node_modules/font-awesome/**/font-awesome.scss'
+        'node_modules/font-awesome/**/font-awesome.scss',
       ],
     },
     copy: {
-      js: [
-      ],
-      jsmap: [
-      ],
+      js: [],
+      jsmap: [],
       css: [
-        "node_modules/nvd3/build/nv.d3.css",
-        "node_modules/angular-xeditable/dist/css/xeditable.css",
-        "node_modules/codemirror/lib/codemirror.css",
-        "node_modules/codemirror/theme/xq-light.css"
-      ]
-    }
-  }
+        'node_modules/nvd3/build/nv.d3.css',
+        'node_modules/angular-xeditable/dist/css/xeditable.css',
+        'node_modules/codemirror/lib/codemirror.css',
+        'node_modules/codemirror/theme/xq-light.css',
+      ],
+    },
+  },
 };
diff --git a/commitlint.config.js b/commitlint.config.js
index 28fe5c5bf9..3347cb961c 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = {extends: ['@commitlint/config-conventional']};
diff --git a/deploy.Dockerfile b/deploy.Dockerfile
index 2326fca4ec..d0e431c68d 100644
--- a/deploy.Dockerfile
+++ b/deploy.Dockerfile
@@ -1,5 +1,14 @@
 ### STAGE 1: Build ###
-FROM node:20 AS build
+FROM node:22.23.2-bookworm-slim@sha256:83f487e0a63425e5b4d146fb5e5be574bcbe1b7b843d3ebafdd95eaf7767a7e5 AS build
+
+# Keep the build package manager aligned with the development image. npm 11
+# removes the vulnerable dependencies bundled with this Node 22 base.
+RUN npm install --global npm@11.19.1 \
+  && npm cache clean --force
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+  gettext-base \
+  && rm -rf /var/lib/apt/lists/*
 
 USER node
 
@@ -7,17 +16,41 @@ USER node
 # Copy in doubtfire-web code
 WORKDIR /doubtfire-web
 COPY package.json package-lock.json ./
-RUN npm ci --force --include=optional
+RUN npm ci --include=optional
 
 COPY --chown=node:node . .
-RUN chmod 777 src
+
+ARG SENTRY_DSN
+ARG SENTRY_ORG
+ARG SENTRY_PROJECT
+ARG SENTRY_RELEASE
+ARG SENTRY_DIST
+ARG UPLOAD_SENTRY_SOURCEMAPS=false
+ENV SENTRY_DSN=$SENTRY_DSN
+ENV SENTRY_ORG=$SENTRY_ORG
+ENV SENTRY_PROJECT=$SENTRY_PROJECT
+ENV SENTRY_RELEASE=$SENTRY_RELEASE
+ENV SENTRY_DIST=$SENTRY_DIST
+RUN envsubst '${SENTRY_DSN} ${SENTRY_RELEASE} ${SENTRY_DIST}' < src/environments/environment.prod.ts > src/environments/environment.prod.ts.tmp && mv src/environments/environment.prod.ts.tmp src/environments/environment.prod.ts
 
 # Launch - build to dist folder
-RUN npm run-script deploy
+RUN --mount=type=secret,id=sentry_auth_token,uid=1000 \
+  if [ "$UPLOAD_SENTRY_SOURCEMAPS" = "true" ]; then \
+    npm run deploy:build2api:sourcemaps; \
+    SENTRY_AUTH_TOKEN="$(cat /run/secrets/sentry_auth_token)" npm run sentry:sourcemaps; \
+    find dist/browser -name '*.map' -delete; \
+    npx ngsw-config dist/browser ngsw-config.json /; \
+  else \
+    npm run-script deploy; \
+  fi
 
 
 ## STAGE 2: Host ###
-FROM nginx:1.21.5-alpine
+FROM nginx:1.30.4-alpine@sha256:97d490c12ba55b4946b01546d1c3ed324e8d41ab1c9fcb2a616aa470620e5b46
+
+# The pinned Nginx image predates Alpine's OpenSSL 3.5.8 security update.
+# Upgrade only the affected runtime libraries rather than the whole base.
+RUN apk upgrade --no-cache libcrypto3 libssl3
 
 # Remove the default Nginx configuration file
 RUN rm -v /etc/nginx/nginx.conf
diff --git a/docker-compose.yml b/docker-compose.yml
index b97ff4e52c..e478833212 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,10 +1,9 @@
-version: '3'
 services:
   doubtfire-api:
     container_name: web-doubtfire-api
     image: lmsdoubtfire/doubtfire-api:7.0-dev
     ports:
-      - "3000:3000"
+      - '3000:3000'
     volumes:
       - ../data/tmp:/doubtfire/tmp
       - ../data/student-work:/student-work
@@ -14,22 +13,24 @@ services:
       RAILS_ENV: 'development'
 
       DF_STUDENT_WORK_DIR: /student-work
-      DF_INSTITUTION_HOST: http://localhost:3000
+      DF_INSTITUTION_HOST: http://localhost:4200
       DF_INSTITUTION_PRODUCT_NAME: OnTrack
 
       DF_SECRET_KEY_BASE: test-secret-key-test-secret-key!
       DF_SECRET_KEY_ATTR: test-secret-key-test-secret-key!
       DF_SECRET_KEY_DEVISE: test-secret-key-test-secret-key!
 
-      # Authentication method - can set to AAF or ldap
-      DF_AUTH_METHOD: database
-      DF_AAF_ISSUER_URL: https://rapid.test.aaf.edu.au
-      DF_AAF_AUDIENCE_URL: http://localhost:3000
-      DF_AAF_CALLBACK_URL: http://localhost:3000/api/auth/jwt
-      DF_AAF_IDENTITY_PROVIDER_URL: https://signon-uat.deakin.edu.au/idp/shibboleth
-      DF_AAF_UNIQUE_URL: https://rapid.test.aaf.edu.au/jwt/authnrequest/research/Ag4EJJhjf0zXHqlKvKZEbg
-      DF_AAF_AUTH_SIGNOUT_URL: https://sync-uat.deakin.edu.au/auth/logout
-      DF_SECRET_KEY_AAF: v4~LMFLzzwRGZdju\5QBa@FiHIN9
+      # Database authentication is the safe local default. Optional AAF
+      # development values must come from an ignored .env file; never commit an
+      # institution credential or registration URL here.
+      DF_AUTH_METHOD: ${DF_AUTH_METHOD:-database}
+      DF_AAF_ISSUER_URL: ${DF_AAF_ISSUER_URL:-}
+      DF_AAF_AUDIENCE_URL: ${DF_AAF_AUDIENCE_URL:-http://localhost:4200}
+      DF_AAF_CALLBACK_URL: ${DF_AAF_CALLBACK_URL:-http://localhost:4200/api/auth/jwt}
+      DF_AAF_IDENTITY_PROVIDER_URL: ${DF_AAF_IDENTITY_PROVIDER_URL:-}
+      DF_AAF_UNIQUE_URL: ${DF_AAF_UNIQUE_URL:-}
+      DF_AAF_AUTH_SIGNOUT_URL: ${DF_AAF_AUTH_SIGNOUT_URL:-}
+      DF_SECRET_KEY_AAF: ${DF_SECRET_KEY_AAF:-}
 
       # Database settings - for development env
       DF_DEV_DB_ADAPTER: mysql2
@@ -74,8 +75,8 @@ services:
     build: .
     command: /bin/bash -c 'npm install; npm start'
     ports:
-      - "4200:4200"
-      - "9876:9876"
+      - '4200:4200'
+      - '9876:9876'
     depends_on:
       - doubtfire-api
     volumes:
diff --git a/docs/A11Y-V01-validation-notes.md b/docs/A11Y-V01-validation-notes.md
new file mode 100644
index 0000000000..eb85c305b2
--- /dev/null
+++ b/docs/A11Y-V01-validation-notes.md
@@ -0,0 +1,203 @@
+# A11Y-V01 — Independent Accessibility Validation
+
+**Date:** 18 September 2026
+
+**Validation branch:** `test/a11y-phase1-validation`
+
+**Integrated branch:** `origin/11.0.x`
+
+**Baseline:** `518abe8f1ab870175379a5aed992e1035bae987d`
+
+
+## 1. Validation setup
+
+Validation was completed against the integrated `origin/11.0.x` baseline. No application code changes were made on the validation branch.
+
+**Environment:** Node `v22.23.1`, npm `10.9.8`, Linux, Orca 42.0, 200% browser zoom, iPhone 15 Pro mobile viewport.
+
+**Test data:** Synthetic local development data only, 40 users, 4 units, 51 projects and 9 tutorials. Student and tutor test accounts were used. No real student data or identifying participant information was used.
+
+## 2. Automated validation
+
+| Check             | Result                                        |
+| ----------------- | --------------------------------------------- |
+| `npm run lint`    | **PASS**. All files pass linting              |
+| `npm run test:ci` | **PASS**. 141 test files, 1,057 tests, 33.16s |
+
+No dedicated axe, Pa11y, Lighthouse, Playwright or Cypress accessibility scanner is configured in the repository.
+
+## 3. Targeted accessibility tests
+
+### Task visualisation
+
+```text
+✓ doubtfire src/app/visualisations/task-visualisation/task-visualisation.component.spec.ts (3 tests)
+  ✓ complete status labels without chart ellipsis/false click affordance
+  ✓ status cards above 4.5:1 contrast floor
+  ✓ route reuse updates counts
+
+Test Files  1 passed (1)
+Tests       3 passed (3)
+```
+
+**Command:**
+
+```bash
+cd /workspace/doubtfire-web && npx ng test --no-watch --no-progress --include='src/app/visualisations/task-visualisation/task-visualisation.component.spec.ts'
+```
+
+### PDF viewer
+
+```text
+✓ doubtfire src/app/common/pdf-viewer/pdf-viewer.component.spec.ts (3 tests)
+  ✓ zoom buttons have different accessible names
+  ✓ search field has mat-label and spinner accessible name
+  ✓ embedded PDF object titled
+
+Test Files  1 passed (1)
+Tests       3 passed (3)
+```
+
+**Command:**
+
+```bash
+cd /workspace/doubtfire-web && npx ng test --no-watch --no-progress --include='src/app/common/pdf-viewer/pdf-viewer.component.spec.ts'
+```
+
+### Unit task list
+
+```text
+✓ doubtfire src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.spec.ts (31 tests)
+  ✓ task logic tests
+  ✓ status badges accessible names
+  ✓ decorative glyphs hidden
+  ✓ deadline states use different glyph for non-colour signal
+  ✓ collapsed list badges named
+
+Test Files  1 passed (1)
+Tests       31 passed (31)
+```
+
+**Command:**
+
+```bash
+cd /workspace/doubtfire-web && npx ng test --no-watch --no-progress --include='src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.spec.ts'
+```
+
+### Staff task list
+
+```text
+✓ doubtfire src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.spec.ts (22 tests)
+  ✓ keyboard focus reveals row actions without hover
+  ✓ focus/blur
+  ✓ overflow menu focus
+  ✓ empty state descriptive text
+  ✓ full message accessible in narrow icon-only sidebar
+
+Test Files  1 passed (1)
+Tests       22 passed (22)
+```
+
+**Command:**
+
+```bash
+cd /workspace/doubtfire-web && npx ng test --no-watch --no-progress --include='src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.spec.ts'
+```
+
+### Profile and sign-in forms
+
+```text
+✓ doubtfire src/app/common/edit-profile-form/edit-profile-form.component.spec.ts
+✓ doubtfire src/app/sessions/states/sign-in/sign-in.component.spec.ts
+
+Test Files  2 passed (2)
+Tests       24 passed (24)
+```
+
+These tests included the A11Y-FORM06 autocomplete-purpose checks.
+
+**Command:**
+
+```bash
+cd /workspace/doubtfire-web && npx ng test --no-watch --no-progress --include='src/app/common/edit-profile-form/edit-profile-form.component.spec.ts' --include='src/app/sessions/states/sign-in/sign-in.component.spec.ts'
+```
+
+
+These tests covered accessible names, keyboard focus, status information, PDF controls, forms and contrast-related behaviour.
+
+## 4. Manual validation
+
+| Journey     | Keyboard | Screen reader | 200% zoom | Mobile/reflow | Colour    | Motion   |
+| ----------- | -------- | ------------- | --------- | ------------- | --------- | -------- |
+| Student     | **PASS** | **PASS**      | **PASS**  | **PASS***     | **PASS*** | **PASS** |
+| Staff/tutor | **PASS** | **PASS**      | **PASS**  | **PASS***     | **PASS*** | **PASS** |
+
+* Minor visual observations are documented below.
+
+Both journeys remained usable with keyboard navigation, Orca, increased zoom and normal interaction. No keyboard trap or screen-reader blocker was identified.
+
+The light/dark theme toggle was not visible at 200% zoom or on the mobile layout.
+
+## 5. Defect and visual observations
+
+### D01: Mobile PDF search-box visual issue
+
+**Severity:** Proposed P2 / minor visual issue
+
+**Status:** Open
+
+**Owner:** To be assigned
+
+**Blocks Phase 1 sign-off:** No, based on current evidence
+
+At the mobile viewport, **Task Details → Task Sheet** showed three magnifying-glass icons and minor visual glitching around the left side of the PDF search box when folding/expanding. The search function remained usable.
+
+<img width="240" height="303" alt="Screenshot from 2026-09-18 13-50-39" src="https://github.com/user-attachments/assets/7272f45b-ffd6-41bd-991e-19fc91dcb5ad" />
+
+
+**Reproduction:** Open a student/staff Task Sheet at the iPhone 15 Pro viewport and fold/expand the PDF search area.
+
+### Progress Dashboard observation
+
+<img width="701" height="542" alt="Screenshot from 2026-09-18 13-51-24" src="https://github.com/user-attachments/assets/57063adb-2b69-4b8a-84e0-5e3ddd7e3522" />
+
+The Progress Dashboard showed a strong visual difference between the white surrounding area and dark/black component boxes.
+
+## 6. Inclusive-UX review
+
+The required review by at least **two independent people** remains outstanding.
+
+Four tasks must be completed:
+
+1. Find the current unit.
+2. Find a task to work on.
+3. Open the task details/task sheet.
+4. Find progress/status information.
+
+My exploratory check is not counted towards this requirement.
+
+**Status: Outstanding.**
+
+## 7. Integration and independence
+
+The validated baseline was:
+
+`origin/11.0.x @ 518abe8f1ab870175379a5aed992e1035bae987d`
+
+Merged accessibility changes in this baseline were included in validation. Changes remaining on separate branches were not merged or used as evidence for integrated sign-off.
+
+The validation branch contains no application code changes or commits beyond the integrated baseline.
+
+A repository search did not identify written A11Y-L01/MISC-X01 approval naming the exact integration branch, so no unverified approval is claimed.
+
+## 8. Validation status
+
+**Status: Partially complete. Independent inclusive-UX review outstanding.**
+
+**Completed:** Automated tests, targeted accessibility tests, student/staff manual journeys, keyboard, screen reader, zoom, reflow, colour and motion checks, defect documentation and keyboard re-test.
+
+**Outstanding:** Two independent reviewers to complete the four inclusive-UX tasks and assignment of an owner for D01.
+
+No P0 or P1 accessibility defects were identified.
+
+This validation does not claim full accessibility compliance or formal accessibility certification.
diff --git a/docs/CAL-D00-webcal-feed-test.md b/docs/CAL-D00-webcal-feed-test.md
new file mode 100644
index 0000000000..3e81fabea1
--- /dev/null
+++ b/docs/CAL-D00-webcal-feed-test.md
@@ -0,0 +1,41 @@
+# CAL-D00: What the existing WebCal feed produces
+
+Before treating the WebCal feed as limited, this records what the implementation generates based on the source (`doubtfire-api/app/models/webcal.rb`). Live calendar-client verification is still required and is tracked below.
+
+## Feed shape
+
+The feed is a single per-student iCalendar (`Webcal#to_ical`). The calendar declares a product id from the institution config. API PR #147 corrects the refresh value to `PT4H` on both `X-PUBLISHED-TTL` and `REFRESH-INTERVAL`. This is a four-hour refresh hint; each calendar client decides when it actually refreshes.
+
+## Which tasks appear
+
+`Webcal#task_definitions` selects the task definitions for the student's enrolled, active projects, in active and currently-running units, and applies two filters:
+
+- units the student has excluded are left out (via `WebcalUnitExclusion`),
+- only task definitions at or below the student's target grade for that unit are included (`task_definitions.target_grade <= projects.target_grade`).
+
+## Events per task
+
+Each task definition produces one **end (due) event**, and also a **start event** if the student has enabled start dates.
+
+- **Title:** `"{unit code}: {task abbreviation}: {task name}"`, for example `COS10001: 2.3P: Pass Task 2.3 - My Drawing Procedure`. With start dates enabled, titles are prefixed `Start:` and `End:`.
+- **Date:** all-day, with `DTSTART` equal to `DTEND` in `YYYYMMDD` form and no time zone. The due-date chain is the task's `local_due_date` when a task record exists, then the target-grade-specific date for a flexible-date unit, then the task definition's `target_date`. Start events use the analogous `local_start_date`, target-grade-specific start date, and task definition `start_date` chain.
+- **UID:** `E-{taskDefinitionId}` for the end event and `S-{taskDefinitionId}` for the start event. These are keyed on the task definition, so the same task shares a UID across students, which is what lets a client update the event in place on refresh.
+- **Status:** `CONFIRMED`.
+- **Reminder:** if the student has set a reminder, each event carries a display alarm that triggers the configured time before the event.
+- **Custom properties:** `X-DOUBTFIRE-UNIT` (unit id) and `X-DOUBTFIRE-TASK` (task definition id).
+
+The feed does not set a description, URL, or location on events, and it does not exclude completed tasks; every applicable task definition appears regardless of submission state.
+
+## Calendar-client verification status
+
+The source analysis above has not yet been confirmed in a live calendar client. To complete that evidence:
+
+1. Subscribe as a seeded student and record the client, client version, and test date.
+2. Confirm the event titles and all-day dates against the generated feed.
+3. Exclude a unit through the modal, refresh the subscription, and record whether its events disappear.
+
+Replace this section with the actual observations before claiming client verification is complete.
+
+## Takeaway
+
+Source inspection shows that the feed covers a student's current units, filtered by target grade and by any units they exclude, as all-day events with stable UIDs and optional reminders and start dates. Its limits are narrow and specific: it always uses the saved target grade rather than a chosen one, and it includes completed tasks. Those two points are the subject of CAL-D02.
diff --git a/docs/CAL-D01-webcal-entry-point-audit.md b/docs/CAL-D01-webcal-entry-point-audit.md
new file mode 100644
index 0000000000..9ed2185b4a
--- /dev/null
+++ b/docs/CAL-D01-webcal-entry-point-audit.md
@@ -0,0 +1,257 @@
+# CAL-D01: WebCal entry point audit
+
+Recon and documentation only. No feature code or component changes were made for this
+ticket. All findings below are from reading the actual frontend source on
+`feature/CAL-D01-webcal-entry-point-audit` (branched off `feature/calendar-integration`),
+quoting real file paths and real code.
+
+## What WebCal is
+
+WebCal is an existing (since 2020, per project history) feed-subscription feature. A
+student enables it, gets a personal `.ics` feed URL, and can point any external calendar
+app (Google Calendar, Apple Calendar, Outlook) at that URL to subscribe. The subscribed
+calendar then pulls task due dates on a refresh interval. This is different from a one-off
+"add this single event" action (which is what CAL-F01 builds): WebCal is a standing
+subscription to a feed, not a per-task button.
+
+The entire frontend surface for WebCal is two things:
+
+- `src/app/api/services/webcal.service.ts`, a thin CRUD service for the user's webcal
+  settings (enabled, guid, includeStartDates, reminder, unitExclusions). It does not
+  render anything itself.
+- `src/app/common/modals/calendar-modal/calendar-modal.component.ts` (and its
+  `.component.html`), a Material dialog that is the actual settings UI: an enable toggle,
+  the `.ics` URL with a copy-to-clipboard button, reminder configuration, and per-unit
+  exclusion controls. Confirmed by reading the component directly, every mutation in it
+  (`this.webcalService.update(...)`, `this.webcalService.get({})`) goes through
+  `WebcalService`, and the dialog's own title, read from
+  `calendar-modal.component.html:4`, is:
+
+  ```html
+  <h2 mat-dialog-title>Web calendar</h2>
+  ```
+
+  Note this title says "Web calendar", not "Calendar", a small labeling inconsistency
+  from the entry points that lead to it, covered below.
+
+The modal is opened exclusively through `CalendarModalService`
+(`src/app/common/modals/calendar-modal/calendar-modal.service.ts`):
+
+```ts
+public show(_task?: Task) {
+  this.dialog.open(CalendarModalComponent, {
+    height: 'h-min',
+    maxHeight: '90vh',
+    width: '800px',
+    maxWidth: '95vw',
+  });
+}
+```
+
+The `_task` parameter is unused (underscore-prefixed, never read inside `show`), and both
+real call sites pass `null`. This confirms the modal always shows the same
+account-level webcal settings, it does not open scoped to a specific task in any way,
+regardless of where it was triggered from.
+
+## Entry point 1: header avatar menu, "Calendar"
+
+**File:** `src/app/common/header/header.component.html`, lines 91-102, wired to
+`src/app/common/header/header.component.ts`, `openCalendar()` at lines 243-245.
+
+```html
+<button mat-button [matMenuTriggerFor]="menu2">
+  <user-icon [size]="32" [user]="currentUser"></user-icon>
+</button>
+<mat-menu #menu2="matMenu">
+  <button mat-menu-item routerLink="/edit_profile">
+    <mat-icon aria-label="Edit profile" matListItemIcon>person</mat-icon>
+    My Profile
+  </button>
+  <button mat-menu-item (click)="openCalendar()">
+    <mat-icon aria-label="Edit calendar" matListItemIcon>calendar_month</mat-icon>
+    Calendar
+  </button>
+  ...
+</mat-menu>
+```
+
+- **Visible label:** "Calendar", with a `calendar_month` Material icon.
+- **UI hierarchy:** top-right user avatar icon in the global header (always present,
+  `<button mat-button [matMenuTriggerFor]="menu2">` has no role or breakpoint condition
+  around it), opens a dropdown menu containing My Profile, Calendar, About, Sign Out, in
+  that order.
+- **Header presence:** the header itself (`showHeader`) defaults to `true` and is only
+  hidden on sign-in, welcome/onboarding, the SCORM player, and during auth transitions
+  (confirmed by grepping every `.hideHeader()` call site: `authentication.service.ts`,
+  `welcome.component.ts`, `sign-in.component.ts`, `scorm-player.component.ts`). It is
+  present on the task dashboard route.
+
+## Entry point 2: Task Planner page, "Open calendar" button
+
+**File:** `src/app/projects/states/plan/project-plan.component.html`, lines 36-41, wired
+to `project-plan.component.ts`, `openCalendar()` at lines 80-82.
+
+```html
+<p>
+  Subscribe to your unit calendar to be reminded about your due dates.
+  <button color="primary" mat-stroked-button type="button" (click)="openCalendar()">
+    Open calendar
+  </button>
+</p>
+```
+
+- **Visible label:** "Open calendar", plain text on a `mat-stroked-button`, with an
+  explanatory sentence directly above it ("Subscribe to your unit calendar to be reminded
+  about your due dates."). No icon on this specific button.
+- **UI hierarchy:** this button sits directly on the Task Planner page
+  (`/projects/:projectId/plan`), visible immediately on page load, not behind any further
+  menu on that page. Reaching the page itself requires going through the breadcrumb
+  dropdown in the header, see the click path below.
+- **The page itself is reached via a "Task Planner" link that does not say "calendar" in
+  its own label**, `src/app/common/header/task-dropdown/task-dropdown.component.html`,
+  lines 59-62:
+
+  ```html
+  <button mat-menu-item [routerLink]="['/projects', currentProject.id, 'plan']">
+    <mat-icon aria-label="Plan icon" fontIcon="calendar_month"></mat-icon>
+    Task Planner
+  </button>
+  ```
+
+  This reuses the same `calendar_month` icon glyph as entry point 1's "Calendar" menu
+  item, but the visible text label here is "Task Planner", not "Calendar". Two different
+  strings, one icon, worth flagging as a real discoverability inconsistency: the icon that
+  correctly signals "calendar" on one menu item is reused on a different item whose label
+  gives no calendar hint at all.
+
+## Click paths from `/projects/2/dashboard/2.3P`
+
+**Entry point 1 (header avatar, "Calendar"), 2 clicks:**
+
+1. Click the user avatar icon in the top-right of the header (always visible, the
+   `<user-icon>` inside `[matMenuTriggerFor]="menu2"`).
+2. In the dropdown that opens, click "Calendar" (second item, `calendar_month` icon,
+   between "My Profile" and "About").
+
+This opens the "Web calendar" dialog directly. 2 clicks, 0 page navigations.
+
+**Entry point 2 (Task Planner, "Open calendar"), 3 clicks:**
+
+1. Click the breadcrumb dropdown trigger in the header. At `/projects/2/dashboard/2.3P`
+   this button's visible text is derived from the matched route's `data.task` value. The
+   `dashboard/:taskAbbreviation` route
+   (`src/app/app.routes.ts:244-247`) has `data: {task: 'Dashboard'}`, and
+   `'Dashboard'` has no override in `task-dropdown.component.ts`'s `taskToShortName` map,
+   so the button reads literally **"Dashboard"** with a dropdown arrow icon next to it.
+   This is a guess about visual rendering specifically, confirmed from the data binding
+   and route data, not from an actual screenshot yet, screenshots are the placeholder
+   section below.
+2. In the dropdown, click "Task Planner" (third item, after Dashboard and a divider,
+   `calendar_month` icon, see entry point 2 above).
+3. On the Task Planner page that loads, click "Open calendar" (visible immediately, no
+   further menu).
+
+3 clicks, 1 page navigation, to reach the same dialog as entry point 1.
+
+## Discoverability assessment
+
+Answering the "nobody can find it" claim directly, with evidence rather than assertion:
+
+- **Neither entry point is visible without opening a menu first.** Entry point 1 requires
+  opening the avatar dropdown. Entry point 2 requires opening the breadcrumb dropdown,
+  then navigating to a whole separate page, where the button is visible without a further
+  menu, but getting there in the first place is still menu-gated. There is no persistent,
+  always-on-screen calendar affordance anywhere in the task dashboard itself, confirmed by
+  the earlier CAL-F01 recon of `task-description-card.component.html`'s
+  `mat-card-actions` block, which had no calendar link before CAL-F01 added one for a
+  different purpose (a single add-to-Google-Calendar action, not WebCal).
+- **Only one of the two visible labels says "calendar."** Entry point 1's menu item is
+  literally labeled "Calendar". Entry point 2's *menu item* is labeled "Task Planner", the
+  word "calendar" only appears once you have already navigated to that page and are
+  reading the "Open calendar" button and the sentence above it. A student scanning menu
+  labels for the word "calendar" would find entry point 1 but not entry point 2's link.
+- **The icon is reused inconsistently.** `calendar_month` appears on both entry point 1's
+  "Calendar" item and entry point 2's "Task Planner" item. Same glyph, one matches its
+  label, one does not. This undercuts the icon as a reliable visual cue across the app.
+- **The modal's own title ("Web calendar") differs from both entry points' labels**
+  ("Calendar", "Open calendar"). Three different strings for the same feature across the
+  full path, which is a small but real naming-consistency problem on top of the
+  discoverability one.
+
+Net: the "nobody can find it" claim holds up. The clearest path (entry point 1) is still
+2 clicks deep with no persistent visual presence on the page a student spends the most
+time on (the task dashboard), and the second path is both deeper and more ambiguously
+labeled.
+
+## Role differences
+
+Checked both entry points and their surrounding menus directly for role gating:
+
+- **Entry point 1 (header avatar menu) has no role gating.** The trigger button
+  (`header.component.html:91-93`) and every item inside `#menu2` (My Profile, Calendar,
+  About, Sign Out) are unconditional, no `@if` around any of them. This is different from
+  the separate admin-only menu in the same header (`#menu`, gated to
+  `currentUser.role === 'Admin' || currentUser.role === 'Convenor'` at line 60), which
+  confirms role gating exists elsewhere in this file and was deliberately not applied to
+  the Calendar item, this looks like an intentional "everyone gets this" choice, not an
+  oversight, though that is inferred from the surrounding code pattern, not from a comment
+  stating it explicitly.
+- **Entry point 2 depends on view context, not role directly.** The "Task Planner" item
+  in `task-dropdown.component.html` sits inside
+  `@if (currentProject !== null && currentView === 'PROJECT')` (line 54), the branch used
+  whenever anyone, student or staff, is viewing a specific project. Staff viewing a
+  student's project (`viewingOtherStudentProject`, defined in
+  `project-plan.component.ts:84-89`) still see the "Open calendar" button, it is not
+  wrapped in any conditional in the template. Worth flagging as a real behavioural quirk:
+  if a tutor opens a student's Task Planner page and clicks "Open calendar", the dialog
+  shows the **tutor's own** webcal settings (`webcalService.get({})` always fetches the
+  current authenticated user's webcal), not the student's. Nothing in the UI clarifies
+  this, a tutor could plausibly believe they are looking at or subscribing to the
+  student's calendar. This is a real, evidenced UX gap, not a guess, from directly
+  reading `webcal.service.ts`'s `get` call and the absence of any `projectId`/`userId`
+  parameter being passed.
+- **Staff viewing at UNIT level (not inside a specific project) see no calendar-related
+  entry point via entry point 2 at all.** The `@if (unitRole && currentView === 'UNIT')`
+  branch in the same file (line 77 onward, the Inbox/Explorer/Moderation/Students/etc.
+  menu for staff) has no calendar-related item anywhere in it. They still retain entry
+  point 1 (header avatar menu), which is present regardless of view context or role.
+
+Net: no role sees an *additional* WebCal entry point the others lack. If anything, staff
+in unit-level views temporarily lose access to entry point 2 until they navigate into a
+specific project, while retaining entry point 1 throughout.
+
+## Dead or unreachable entry points
+
+None found. Searched for every reference to `CalendarModalService`/`calendarModal.show`
+across the frontend (`grep` across `src/app`) and found exactly four files: the service
+definition, the two real call sites documented above
+(`header.component.ts`, `project-plan.component.ts`), and `header.component.spec.ts` (a
+test, not a UI entry point). No commented-out calendar or webcal markup was found anywhere
+in the templates searched. No feature flag or `isFeatureEnabled`-style condition gates
+either button. Both entry points are live and reachable exactly as described above.
+
+One adjacent false positive worth ruling out explicitly, since it shares a name: the
+`angular-calendar` npm package (imported as `CalendarEvent` from `'angular-calendar'`) is
+also used by `src/app/units/states/analytics/directives/analytics-tutor-times.component.ts`,
+for a tutor session-times week-view widget. This is a completely unrelated feature that
+happens to use the same third-party calendar-rendering library. It is not a WebCal entry
+point and should not be confused with one in any follow-up work.
+
+## Recommendation for CAL-F04
+
+CAL-F04 should not rely on either existing entry point as "sufficient" prior art, both are
+menu-gated and inconsistently labeled, which is the root cause this audit was asked to
+evidence. A visible entry point on the task dashboard itself, the page a student actually
+spends time on, is the right target. The `task-description-card.component.html`
+`mat-card-actions` row (already used by CAL-F01 for a related but distinct
+add-single-event action) is a reasonable candidate location to consider, since a student
+is already looking at that card when deciding whether they want ongoing reminders, not
+just a one-off addition. This is a recommendation, not a decision, the actual placement
+call belongs to whoever scopes CAL-F04, and should confirm with the team whether a WebCal
+entry point and CAL-F01's per-task button are meant to coexist in the same card or be
+kept visually distinct, since they are different mechanisms (standing subscription vs.
+one-off event) that could otherwise read as duplicates to a student.
+
+## Screenshots
+
+These are on the PR
diff --git a/docs/CAL-D02-webcal-filtering-investigation.md b/docs/CAL-D02-webcal-filtering-investigation.md
new file mode 100644
index 0000000000..e61780933a
--- /dev/null
+++ b/docs/CAL-D02-webcal-filtering-investigation.md
@@ -0,0 +1,46 @@
+# CAL-D02: Per-unit and grade filtering on the live WebCal feed
+
+Investigation only. This documents what the live WebCal feed can and cannot filter today, and what it would take to add finer filtering, so a decision can be made before any feature work.
+
+## What the feed already filters
+
+The premise that a student must "subscribe to everything or nothing" is not accurate. Two filters are already applied when the feed is generated.
+
+**Per-unit exclusion.** A student can exclude whole units from their feed. This is backed by the `WebcalUnitExclusion` model (`doubtfire-api/app/models/webcal_unit_exclusion.rb`), a join between a `Webcal` and a `Unit`. The task-definition query in `Webcal#task_definitions` (`webcal.rb`) excludes any unit whose id is in the student's exclusions:
+
+```ruby
+.where.not(units: { id: WebcalUnitExclusion.where(webcal_id: id).select(:unit_id) })
+```
+
+This is already editable from the front end. The Web calendar modal shows the student's units as removable chips (`calendar-modal.component`), and toggling a chip adds or removes a `WebcalUnitExclusion`.
+
+**Grade.** The same query only includes task definitions at or below the student's target grade:
+
+```ruby
+.where('task_definitions.target_grade <= projects.target_grade')
+```
+
+So the feed is already limited to the tasks the student needs for their saved target grade, not every task in the unit.
+
+## What the feed cannot filter today
+
+- **A grade different from the saved target grade.** The grade filter uses `projects.target_grade`, the student's saved target for each unit. There is no way to subscribe to, say, "only my HD tasks" without changing the saved target grade for the unit.
+- **Per-request filtering via the URL.** The public endpoint (`doubtfire-api/app/api/webcal_public_api.rb`) is `GET /webcal/:guid` and takes only the guid. It looks the webcal up and serves `webcal.to_ical.to_ical` with no query parameters, so a calendar client cannot ask for a filtered variant of the feed.
+- **Excluding completed or submitted tasks.** The feed iterates every applicable task definition regardless of the student's submission state, so completed tasks stay in the feed.
+
+## What finer filtering would take
+
+- **Grade selection independent of target grade.** The grade filter is a single clause in `Webcal#task_definitions`, so parameterising it is the small part. The larger part is deciding where the selected grade lives: either a new query parameter threaded from `webcal_public_api.rb` into `to_ical`/`task_definitions`, or a stored per-webcal grade override on the `Webcal` model, plus a control in the modal to set it. A stored setting is more consistent with how unit exclusions already work.
+- **Exclude completed tasks.** This needs the feed to consider each task's submission state, which means loading the student's `Task` records (the feed already loads them for date resolution in `to_ical`) and skipping those in a final state. This is a change inside `to_ical`, plus a per-webcal toggle if it should be optional.
+- **Per-request variants.** Supporting URL parameters on the public endpoint would let a client hold several filtered subscriptions from one webcal, but it widens the public surface and is not needed for the two cases above. A stored per-webcal setting is the lower-risk route.
+
+## Assessment
+
+Unit filtering is already complete. Grade filtering exists but is tied to the saved target grade. The realistic next step, if the team wants it, is a per-webcal grade override and an optional "exclude completed" toggle, both stored on the `Webcal` and exposed in the existing modal, reusing the query that already filters by grade. This is a moderate change confined to `webcal.rb`, the `Webcal` model and settings, and the modal. It should be scoped as its own ticket and confirmed with the feature owner before any build, since it changes a live feed other students depend on.
+
+## Sources
+
+- `doubtfire-api/app/models/webcal.rb` (task_definitions scope, to_ical)
+- `doubtfire-api/app/models/webcal_unit_exclusion.rb`
+- `doubtfire-api/app/api/webcal_public_api.rb`
+- `doubtfire-web/src/app/common/modals/calendar-modal/calendar-modal.component.ts` (unit exclusion chips)
diff --git a/docs/CAL-D03-calendar-download-design.md b/docs/CAL-D03-calendar-download-design.md
new file mode 100644
index 0000000000..b1d872e14d
--- /dev/null
+++ b/docs/CAL-D03-calendar-download-design.md
@@ -0,0 +1,122 @@
+# Calendar download: design notes and codebase findings
+
+## Summary
+
+The calendar work adds the ability to download task due dates as an `.ics` file alongside the
+existing WebCal subscription (a live feed). It has two intended entry points:
+
+1. The per-unit **Progress Dashboard**, to download the current unit's tasks.
+2. The global **calendar modal**, to download across the units a student is enrolled in, using the
+   modal's existing unit selection to choose which units/subjects are included.
+
+The download is a one-time file. The WebCal subscription remains the option for a live-updating
+feed. The per-unit download and its grade selector are implemented; the cross-unit calendar-modal
+download remains follow-on work.
+
+## Placement
+
+### Progress Dashboard (per unit)
+
+- Component: `progress-dashboard.component`
+  (`src/app/projects/states/dashboard/directives/progress-dashboard/`), rendered by
+  `project-dashboard` at route `projects/:projectId/dashboard`.
+- The button fits in the "Plan Your Tasks" card (`task-planner-card.component`), beside "View Task
+  Planner". That card already receives the project (`[project]` input) and is about task due dates.
+  The implementation lives in that card and injects `FileDownloaderService` and `GradeService`.
+- Data readiness: the dashboard route resolves **progressively**. `project.resolver.ts:11` detects
+  `/dashboard` after stripping the query string; the progressive branch
+  (`project.resolver.ts:23-27`) emits a project stub immediately and loads tasks asynchronously. The
+  implementation therefore gates the button with `hasDownloadableTasks` until at least one task for
+  the selected grade is available. This differs from the Task Planner route
+  `projects/:projectId/plan`, which blocks until mapping completes.
+
+### Calendar modal (across units)
+
+- Component: `calendar-modal.component` (`src/app/common/modals/calendar-modal/`), opened from the
+  header calendar entry point and the Task Planner.
+- The modal already loads the user's projects:
+  `projectService.query(undefined, {params: {include_in_active: false}})`, filtering out explicitly
+  inactive teaching periods while retaining projects without teaching-period metadata
+  (`calendar-modal.component.ts:56-60`), held as `projects: Project[]` (`ts:30`).
+- The modal already has a unit include/exclude mechanism backed by `webcal.unitExclusions`:
+  `includedProjects` / `excludedProjects` getters (`ts:205-222`) and `includeExclusion` /
+  `removeExclusion` (`ts:227-246`), rendered as removable unit chips
+  (`calendar-modal.component.html:52-77`).
+- The modal already exposes the live feed URL (`webcalUrl` + `.ics`,
+  `calendar-modal.component.html:190`).
+- Projects returned by `query()` are list summaries and do not carry loaded task caches. A
+  client-side multi-unit build would need to load each unit's tasks first.
+
+## Date resolution
+
+- Resolve a task's date by calling `Task.localDueDate()`. Do not read `Task.dueDate`,
+  `TaskDefinition.dueDate`, or `TaskDefinition.targetDate` directly as a shortcut around it.
+- On `TaskDefinition` the field names are inverted relative to their meaning: `localDueDate()`
+  returns `targetDate` (`task-definition.ts:180`), while `localDeadlineDate()` and
+  `finalDeadlineDate()` return `dueDate` (`task-definition.ts:221, 245`). `dueDate` is the deadline;
+  `targetDate` is the due/target date.
+- `Task.localDueDate()` (`task.ts:294-312`) is the correct resolver. It handles flexible dates, the
+  student's custom target date, and grade target dates, and falls back through `dueDate` to
+  `definition.localDueDate()`. The shared event builder (`calendar-event-builder.ts`) already calls
+  it and returns a `YYYY-MM-DD` civil-date string, which avoids a daylight-saving off-by-one that a
+  `Date`-instant path would introduce.
+
+## ICS generation
+
+- No third-party ICS/iCalendar generation library is used. `ics-calendar-builder.ts` builds the
+  `VCALENDAR`/`VEVENT` text from the shared `calendar-event-builder.ts` result.
+- Text escaping follows RFC 5545 section 3.3.11, with backslash first: `\`->`\\`, `;`->`\;`,
+  `,`->`\,`, and every CR/LF form ->`\n`. Content lines use CRLF and are folded at 75 UTF-8 octets
+  without splitting a Unicode code point. Each `VEVENT` carries a UTC `DTSTAMP`.
+- All-day dates use the `YYYYMMDD` form. `DTSTART` is the task's civil due date and `DTEND` is the
+  following civil date because RFC 5545 defines `DTEND` as exclusive and later than `DTSTART`. This
+  deliberately corrects the legacy WebCal backend's equal-start/end convention; the same
+  exclusive-end rule is also required by the Google Calendar template URL.
+- Events also carry `STATUS:CONFIRMED`, `X-DOUBTFIRE-UNIT` (unit id), `X-DOUBTFIRE-TASK` (task
+  definition id), and a `UID` of the form `E-<taskDefinitionId>`.
+
+## Download mechanisms
+
+Two approaches exist in the codebase:
+
+- URL-based: `FileDownloaderService.downloadFile(url, filename)` (`file-downloader.service.ts:152`)
+  fetches a URL and saves the response as a file. This suits saving the existing WebCal feed URL
+  directly, in which case the server produces the `.ics` and the unit selection is already applied
+  by `unitExclusions`.
+- In-memory: build the string, `new Blob([ics], {type: 'text/calendar;charset=utf-8'})`,
+  `URL.createObjectURL`, then `FileDownloaderService.downloadBlobToFile(url, filename)`
+  (`file-downloader.service.ts:141`) and `releaseBlob(url)` (`file-downloader.service.ts:130`). The
+  per-unit download uses this approach. An equivalent self-contained pattern is used for CSV export
+  at `students-list.component.ts:140-156`.
+
+## Grade and task-status fields
+
+- Grade values: Fail -1, Pass 0, Credit 1, Distinction 2, High Distinction 3 (`unit.ts:91-95`,
+  `grade.service.ts`).
+- Per-task grade: `task.definition.targetGrade`. Limit to a target grade with
+  `task.definition.targetGrade <= grade`. `Project.activeTasks()` (`project.ts:182`) applies this
+  against the saved `project.targetGrade`; `unit.taskDefinitionsForGrade(grade)` (`unit.ts:239`) is
+  the definition-level equivalent.
+- `project.tasks` (`project.ts:125`) is unfiltered; a grade-limited download must apply the filter
+  explicitly.
+- Task completion: `task.inFinalState()` (`task.ts:670`) returns
+  `TaskStatus.FINAL_STATUSES.includes(status)`. `task.submissionDate` is available where a
+  "submitted" predicate is preferred.
+
+## Feature status and scope
+
+- Implemented: download a unit's calendar from the Progress Dashboard as an `.ics` file.
+- Implemented: select a target grade for that unit download without changing the student's saved
+  target grade.
+- Follow-on: download from the calendar modal across the user's included units/subjects.
+- Follow-on: optionally exclude completed tasks from either download.
+
+## Related existing behaviour
+
+The WebCal subscription generates events server-side (`doubtfire-api` `webcal.rb`) and already
+filters by target grade and by unit exclusions. The download reuses the shared event builder's bare
+title, civil date, and UID. That title/UID pairing matches the server feed only when
+`include_start_dates` is off; when it is on, the feed also emits `Start:` events and prefixes end
+events with `End:`. The one-time download deliberately does not recreate that reminder-style
+variant. Its exclusive next-day `DTEND` is intentionally standards-compliant even though the legacy
+server feed currently emits equal start and end dates.
diff --git a/docs/CAL-DOC01-calendar-how-to.md b/docs/CAL-DOC01-calendar-how-to.md
new file mode 100644
index 0000000000..293b7508d4
--- /dev/null
+++ b/docs/CAL-DOC01-calendar-how-to.md
@@ -0,0 +1,46 @@
+# CAL-DOC01: Using the calendar features
+
+OnTrack offers a few ways to get your task due dates into your own calendar. There are two broad options: a one-off copy (a file or a single event you add now) and a live subscription (a feed that keeps updating as your dates change). Use a one-off copy when you just want the dates as they stand today, and a subscription when you want your calendar to stay in sync.
+
+## Add a single task to Google Calendar
+
+On a task's page, the task card shows an **Add to Google Calendar** button. It opens Google Calendar in a new tab with the event details for that one task's due date already filled in, ready for you to save. This adds one event only, and it does not update if the due date later changes. For a whole unit or for live updates, use the options below.
+
+## Download a unit's due dates as a file
+
+On a unit's **Progress Dashboard**, the **Plan Your Tasks** card has a **Download .ics** button. It opens a **Download options** dialog, and confirming there downloads an `.ics` calendar file containing the due dates for that unit's tasks, which you can import into Google Calendar, Apple Calendar, Outlook, or any calendar app.
+
+The dialog has three choices:
+
+- **Grade.** Choose a grade level. It defaults to your current target grade.
+- **Up to this grade** or **This grade and above.** Up to this grade is the default and includes only the tasks required up to that grade, so if you are targeting a Credit you will not get the Distinction and High Distinction tasks. This grade and above includes that grade's tasks and every higher grade's instead.
+- **Exclude completed tasks.** On by default, so the file contains only the work still outstanding. Untick it to include tasks you have already finished.
+
+If nothing matches your choices, the dialog says so and its download button stays disabled. Your choices are not saved to your profile and do not change your target grade.
+
+The downloaded file is named after the unit and the options you chose (for example `COS10001-tasks-HD-outstanding.ics`, or `COS10001-tasks-D-and-above-outstanding.ics`), so downloads for different grades or settings do not overwrite each other. Like any downloaded file, it is a snapshot: it does not update if your dates later change.
+
+## Find and open the calendar
+
+A **calendar icon** in the top header opens the Web calendar dialog from anywhere. The same dialog is also reachable from the Task Planner. This is where you subscribe to the live feed or download a copy of it.
+
+## Subscribe to the live feed (WebCal)
+
+In the Web calendar dialog, enable the calendar to generate your personal subscription URL. Unlike a downloaded file, a subscription stays in sync: when a due date changes, your calendar app updates automatically on its next refresh.
+
+- **Choose which units to include.** The dialog lists your units as chips. Remove a unit to leave it out of the feed, and add it back from the menu.
+- **Set a reminder.** Optionally have your calendar remind you a set time before each event.
+- **Include start dates.** Optionally add each task's start date as well as its due date.
+
+To subscribe, copy the URL and add it in your calendar app: in Google Calendar choose Add other calendars then From URL; in Apple Calendar choose File then New Calendar Subscription; in Outlook choose Add calendar then Subscribe from web. Then paste the URL.
+
+## Download a copy of the feed
+
+If you want the current state of your subscription as a one-off file rather than a live link, the Web calendar dialog has a **Download a copy** button (shown when the calendar is enabled). It saves the same events the subscription would deliver, for the units you have included, as an `.ics` file.
+
+## Which should I use?
+
+- A quick single date: **Add to Google Calendar** on the task.
+- One unit's dates as they stand today, with grade or outstanding-only filtering: **Download .ics** on the Progress Dashboard.
+- A calendar that keeps itself up to date across your units: **subscribe** to the WebCal feed.
+- A one-off snapshot of that whole feed: **Download a copy** in the dialog.
diff --git a/docs/CAL-T01-test-coverage.md b/docs/CAL-T01-test-coverage.md
new file mode 100644
index 0000000000..6fff30e422
--- /dev/null
+++ b/docs/CAL-T01-test-coverage.md
@@ -0,0 +1,16 @@
+# CAL-T01: Test coverage for the calendar features
+
+Each calendar feature shipped with its own unit tests, so this note records the coverage rather than adding a separate suite.
+
+| Feature | Spec | Covers |
+|---|---|---|
+| CAL-F03 event builder | `calendar-event-builder.spec.ts` | the `localDueDate()` fallback chain, the no-due-date null case, and raw (unescaped) title output |
+| CAL-F01 Google Calendar button | `task-description-card.component.spec.ts` | button visibility, the keyboard handler, the built href, and mock isolation |
+| CAL-F02 .ics download | `ics-calendar-builder.spec.ts` and `task-planner-card.component.spec.ts` | escaping, `DTSTART` on the due date with an exclusive next-day `DTEND` (including across a year boundary), `YYYYMMDD` format, `STATUS` / `X-DOUBTFIRE-*` / `UID`, null-date skip, CRLF, a valid VCALENDAR envelope, `DTSTAMP`, and the disabled/enabled guard plus the download call chain |
+| CAL-F06 grade selector | `task-planner-card.component.spec.ts` | the default grade, the highest-grade fallback, non-persistence, `hasDownloadableTasks`, the filename, and a discriminator proving the grade filter is applied |
+| CAL-F07 exclude completed | `task-planner-card.component.spec.ts` | excluded-when-on, included-when-off, composition with the grade filter, the guard, the filename suffix, and an ICS-content discriminator |
+| CAL-F08 download a copy | `calendar-modal.component.spec.ts` | downloads with an enabled calendar and a guid, and the disabled and no-guid guards |
+
+Each feature includes at least one discriminating test, one that fails if the behaviour were bypassed rather than merely present. Every listed spec that installs Vitest spies uses `afterEach(() => vi.restoreAllMocks())` so those spies do not leak between tests in a file; `calendar-event-builder.spec.ts` installs no spies and therefore needs no cleanup hook.
+
+Conclusion: dedicated test coverage for the calendar work is satisfied by the specs that shipped with each feature PR, so no separate suite is required. This ticket is closed by documenting that coverage.
diff --git a/docs/CAL-UX01-placement-notes.md b/docs/CAL-UX01-placement-notes.md
new file mode 100644
index 0000000000..e723d7a026
--- /dev/null
+++ b/docs/CAL-UX01-placement-notes.md
@@ -0,0 +1,10 @@
+# CAL-UX01: Placement and styling of the calendar controls
+
+This note records where each calendar control was placed and why. The controls were built to match the app's existing Material markup and icon conventions so they read as native rather than bolted on, which is what this ticket set out to ensure.
+
+- **Add to Google Calendar (CAL-F01):** in the task description card's action row, as a `mat-stroked-button` with a `mat-icon` sized to match the existing Task Sheet and Resources buttons already in that row.
+- **Download .ics and its options (CAL-F02, F06, F07, F09):** the button is in the Progress Dashboard's "Plan Your Tasks" card, below the existing "View Task Planner" button. Its options open in a standard `mat-dialog`: the grade selector mirrors the Task Planner's Target Grade `mat-select`, the grade range is a `mat-button-toggle-group` stacked vertically so it fits a phone, and the exclude-completed control is a standard `mat-checkbox`, so the card and the dialog keep one visual language.
+- **Header calendar button (CAL-F04):** a `mat-icon-button` beside the QR icon in the header, with a tooltip. It is intentionally unguarded, since WebCal is a global feed rather than a unit-scoped action.
+- **Download a copy (CAL-F08):** in the Web calendar modal, next to the subscription URL controls, so subscribe and download sit together.
+
+Conclusion: every control shipped following an existing pattern in the same surface it lives in, so no separate mockup deliverable is needed. This note is the placement rationale, and closes the ticket.
diff --git a/docs/CPD-Q06-privacy-safe-screenshot-checklist.md b/docs/CPD-Q06-privacy-safe-screenshot-checklist.md
new file mode 100644
index 0000000000..cfa715104c
--- /dev/null
+++ b/docs/CPD-Q06-privacy-safe-screenshot-checklist.md
@@ -0,0 +1,45 @@
+# Cross-Project Dashboard Privacy-Safe Screenshot Checklist
+
+Use this checklist before sharing a dashboard screenshot in a pull request, Teams message,
+report, portfolio, presentation, or handover document.
+
+## Before sharing
+
+- [ ] Real student names have been removed or replaced with mock names.
+- [ ] Student IDs and email addresses are not visible.
+- [ ] Personal account details and profile images are not visible.
+- [ ] Unit and project information does not reveal a student's private enrolment details.
+- [ ] Task titles do not contain sensitive or personally identifying information.
+- [ ] Marks, feedback text, and individual assessment results are removed, permanently
+      redacted in the final exported image, or replaced with mock data.
+- [ ] Extension details and changed due dates do not reveal private student circumstances.
+- [ ] Browser tabs, URLs, tokens, local file paths, and account information are cropped out or
+      permanently redacted in the final exported image.
+- [ ] Mock or seeded data has been used wherever possible.
+- [ ] The screenshot contains only the area needed to prove the result.
+- [ ] The final exported screenshot has been reopened and checked at full size to confirm that
+      no sensitive data remains.
+- [ ] The original unredacted screenshot is not committed to Git, attached to the pull request,
+      or posted in a shared project channel.
+
+## Safe example
+
+A screenshot of the dashboard populated entirely with seeded demo data. For example, students
+named "Test Student 1" and "Test Student 2" with placeholder emails, generic task titles, and
+sample marks that were never tied to a real person. The screenshot is cropped tightly to the
+feature being demonstrated, with no browser chrome, URL bar, or login or account menu visible.
+
+## Information that must be removed
+
+A screenshot taken from a real unit that shows an actual student's name, ID, or email next to
+their real mark, feedback comment, or an approved extension with a reason attached. This kind
+of detail must be cropped out, permanently redacted in the final exported image, or replaced
+with mock data before sharing. Do not rely on light blur or pixelation to protect sensitive
+information.
+
+## Recommendation
+
+The safest default for future contributors is to demonstrate features using mock data rather
+than real student or account data, even when it takes a little longer to set up. When redaction
+is unavoidable, export a flattened copy, reopen that final file, and check it again before
+sharing.
diff --git a/docs/FILE-A01-safe-upload-policy-matrix.md b/docs/FILE-A01-safe-upload-policy-matrix.md
new file mode 100644
index 0000000000..ebe16f1b94
--- /dev/null
+++ b/docs/FILE-A01-safe-upload-policy-matrix.md
@@ -0,0 +1,847 @@
+# FILE-A01 Current vs Approved Format and Limit Matrix
+
+## Policy Principles
+
+- Task submissions and task-chat attachments have separate policies because they serve different purposes.
+- The API is the final authority for all upload decisions.
+- The frontend may guide file selection but must not override API rejection.
+- Uploads use explicit allowlists. Arbitrary file extensions are not permitted.
+- New specialist formats require a demonstrated unit need and policy review.
+
+## Format Matrix
+
+| Category | Current State | Proposed Approved Formats | Context | Classification | Preview Policy |
+|---|---|---|---|---|---|
+| Spreadsheet | Internal `csv` category supports CSV, XLS and XLSX | `.csv`, `.xls`, `.xlsx` | Task submission | MVP | Download-only unless a dedicated safe spreadsheet viewer is added |
+| PDF | API validates PDF structure. Task chat accepts PDF. Existing frontend `document` category includes PDF | `.pdf` | Task submission and task chat | MVP | Submission: PDF viewer. Chat confirmation: filename and PDF indicator |
+| Document | API has dedicated DOCX structural validation through `word_document` and comment attachment handling | `.docx` | Task submission where explicitly required | MVP | Download-only |
+| Code | Existing curated Code category contains common development and text formats | Existing reviewed Code allowlist only | Task submission | MVP | Safe text/code preview through Monaco where supported |
+| Image | Existing image category supports common raster image formats | `.png`, `.bmp`, `.tiff`, `.tif`, `.jpeg`, `.jpg`, `.gif` | Task submission and task chat | MVP | Inline image preview |
+| Audio | Task chat currently accepts audio and API validates audio MIME types | Browser-compatible API-approved audio formats | Task chat | MVP | Inline audio player |
+| Archive | API supports ZIP, TAR, TAR.GZ and TGZ with additional archive validation | `.zip`, `.tar`, `.tar.gz`, `.tgz` | Task submission only when explicitly required | Controlled MVP | Download-only |
+| Video | Limited backend support exists but ordinary task chat does not expose video upload | No general MVP approval | Specialist / future | Future | Download-only unless a dedicated safe viewer is approved |
+| Macro-enabled Office | Not part of the approved upload path | None | All contexts | Excluded | None |
+| Encrypted files | Encrypted PDF, ZIP and Word packages are rejected | None | All contexts | Excluded | None |
+| Executables / installers | Not present in the approved extension allowlist | None | All contexts | Excluded | None |
+| Disk images | Not present in the approved extension allowlist | None | All contexts | Excluded | None |
+| Nested archives | Explicitly rejected by archive validation | None | All contexts | Excluded | None |
+| Unknown / arbitrary formats | Explicit allowlists are already used | None | All contexts | Excluded | None |
+
+## Display Names
+
+The approved user-facing category names are:
+
+- Spreadsheet
+- PDF
+- Document
+- Code
+- Image
+- Audio
+- Archive
+
+Internal identifiers do not need to match the user-facing labels. Existing identifiers should remain stable where required for backward compatibility.
+
+In particular:
+
+- Internal `csv` remains supported while displaying as `Spreadsheet`.
+- Legacy `archive` requirements continue to map to the approved archive / `zip` policy.
+- Existing task definitions must not require migration simply to improve display terminology.
+
+## Task Submission Limits
+
+Current behaviour:
+
+- The number of submitted files must exactly match the task definition's configured `upload_requirements`.
+- Each file is validated independently by the API.
+- File size is controlled by `Doubtfire::Application.config.max_file_size`.
+- The existing fallback when no valid configured value is present is 10 MB per file.
+
+Proposed policy:
+
+- Preserve the configured per-file limit model.
+- Retain 10 MB as the safe fallback.
+- Require exactly one uploaded file for each configured upload requirement.
+- Extra or missing files are rejected.
+- Archive uploads remain subject to additional expanded-size, entry-count and compression-ratio limits.
+
+## Task Chat Limits
+
+Current behaviour:
+
+- The frontend permits multiple file selection.
+- Each accepted file is confirmed and posted separately.
+- The API enforces a 30 MB maximum per attachment.
+- No explicit frontend attachment-count cap was found.
+
+Proposed policy:
+
+- Retain 30 MB as the maximum per task-chat attachment.
+- Introduce a maximum of 5 attachments per user selection as an implementation safeguard, subject to reviewer approval.
+- Each selected attachment continues to become its own task comment and receives independent API validation.
+- The count limit is a usability and abuse-control measure and does not replace server-side file validation.
+
+## High-Risk Format Decisions
+
+### Macro-enabled documents
+
+Reject macro-enabled formats such as DOCM and XLSM. They are not part of the current approved extension path and introduce executable macro content that is unnecessary for the common MVP use cases.
+
+### Encrypted files
+
+Reject encrypted PDFs, Office packages and archives. The API cannot inspect encrypted contents reliably, so accepting them would bypass content validation.
+
+### Archives
+
+Archives are permitted only for task submissions that explicitly require them. Supported formats are ZIP, TAR, TAR.GZ and TGZ. Nested archives, encrypted entries, unsafe paths and symbolic links remain prohibited.
+
+### Executables and installers
+
+Reject executable and installer formats including EXE, MSI and similar binary packages. They are outside the educational upload MVP and create unnecessary execution risk.
+
+### Disk images
+
+Reject ISO, DMG and similar disk-image formats. They are not required for the common task-submission or task-chat use cases.
+
+### Unknown formats
+
+Do not provide an arbitrary extension override. New formats must be added through an approved policy change backed by a real teaching or assessment requirement.
+
+## Preview Policy
+
+### Inline or specialised preview
+
+- Image: inline image rendering.
+- Audio: controlled audio player in task chat.
+- PDF: dedicated PDF viewer for submitted files.
+- Code and text: Monaco-based text/code preview where supported.
+
+### Metadata-only confirmation
+
+- PDF in the current task-chat upload confirmation dialog is represented by filename and PDF indicator rather than rendering its contents.
+
+### Download-only
+
+- Spreadsheet files.
+- DOCX documents.
+- Archives.
+- Specialist approved formats without an explicitly approved renderer.
+
+A format must not be rendered generically merely because a browser may support it. Preview requires an intentional application-controlled rendering path.
+
+## Acceptance Rule
+
+Passing frontend filtering does not mean a file is accepted.
+
+Every upload must still pass API-side checks for the applicable category, including extension, MIME type, structure, encryption status, archive safety, size and authorisation before it is stored.
+
+# FILE-A01 Frontend and API Upload Policy Contract
+
+## 1. Authority
+
+The Doubtfire API is the final authority for every upload decision.
+
+Frontend checks exist to improve usability by showing appropriate file categories, picker filters, limits and validation messages. A file passing a frontend check does not mean that it is accepted.
+
+The API must independently validate every uploaded file before permanent storage.
+
+Server-side validation must include, where applicable:
+
+- authorisation
+- upload context
+- configured upload requirement
+- approved category
+- file extension
+- MIME type
+- structural validation
+- encryption status
+- archive safety
+- file size
+- attachment count or requirement count
+
+A frontend decision must never override an API rejection.
+
+## 2. Policy Source
+
+The frontend must not maintain an independently evolving security allowlist.
+
+The approved policy should be owned by the API or by a single versioned policy definition consumed by the API.
+
+A later implementation ticket should expose the frontend-safe portion of that policy through an API policy response or equivalent generated contract.
+
+The frontend may use that contract to populate:
+
+- category display names
+- accepted file-picker extensions
+- upload-context availability
+- maximum file size
+- maximum attachment count
+- preview capability
+- user-facing guidance
+
+The frontend must treat this information as guidance only. Server-side validation remains mandatory.
+
+## 3. Proposed Frontend-Safe Policy Shape
+
+A future policy response should expose only information required by the client, for example:
+
+```json
+{
+  "version": "1",
+  "contexts": {
+    "task_submission": {
+      "categories": ["spreadsheet", "pdf", "document", "code", "image", "archive"],
+      "default_max_file_size": 10000000
+    },
+    "task_chat": {
+      "categories": ["pdf", "image", "audio"],
+      "max_file_size": 30000000,
+      "max_selection_count": 5
+    }
+  }
+}
+```
+
+Category information may include:
+
+- stable internal identifier
+- display name
+- approved extensions
+- context availability
+- preview mode
+
+Security implementation details do not need to be exposed to the browser.
+
+## 4. Stable Internal Identifiers
+
+Existing task definitions must remain compatible.
+
+Current identifiers should be preserved where changing them would require migration.
+
+Examples:
+
+- Internal `csv` continues to represent the spreadsheet upload category.
+- The user-facing label for `csv` is `Spreadsheet`.
+- Existing `archive` requirements continue to resolve to the approved `zip` / archive policy.
+- Existing `document`, `code`, `image` and `zip` requirements continue to work.
+
+Display terminology may improve without rewriting stored task definitions.
+
+## 5. Filename Rules
+
+User-provided filenames are untrusted input.
+
+The API must:
+
+- remove directory components before using a supplied filename
+- reject or replace unsafe path characters
+- remove control characters and header-injection material
+- normalise invalid UTF-8 safely
+- use a safe fallback name when the supplied name is blank or unsafe
+- limit human-readable display names to 255 characters
+- avoid using the original filename as a server storage path
+
+Server-managed or ID-based storage names should be used wherever possible.
+
+The original safe display name may be retained for user-facing download metadata where appropriate.
+
+## 6. Display-Name Rules
+
+The interface should use clear user-facing names:
+
+- Spreadsheet
+- PDF
+- Document
+- Code
+- Image
+- Audio
+- Archive
+
+Display names are presentation metadata and must not determine whether the API accepts a file.
+
+## 7. Error Contract
+
+Upload rejection should use consistent machine-readable error codes together with safe user-facing messages.
+
+Proposed error codes:
+
+- `UPLOAD_UNAUTHORISED`
+- `UPLOAD_EMPTY`
+- `UPLOAD_TOO_LARGE`
+- `UPLOAD_COUNT_MISMATCH`
+- `UPLOAD_EXTENSION_NOT_ALLOWED`
+- `UPLOAD_MIME_INVALID`
+- `UPLOAD_CORRUPT`
+- `UPLOAD_ENCRYPTED`
+- `UPLOAD_ARCHIVE_UNSAFE`
+- `UPLOAD_ARCHIVE_LIMIT`
+- `UPLOAD_CATEGORY_NOT_ALLOWED`
+- `UPLOAD_UNKNOWN_POLICY`
+
+User-facing messages should explain the corrective action without exposing sensitive server implementation details.
+
+Example:
+
+`UPLOAD_TOO_LARGE` -> `The selected file exceeds the permitted upload size.`
+
+## 8. Logging Rules
+
+Server logs should record enough information to diagnose rejected uploads without recording file contents.
+
+Appropriate logging includes:
+
+- validation stage
+- rejection reason/error code
+- upload context
+- category requested
+- authenticated user identifier where operationally required
+- task/project identifiers where required
+- processing failures
+- cleanup failures
+
+Logs must not include:
+
+- uploaded file contents
+- authentication tokens
+- unnecessary sensitive user information
+
+Expected validation failures should normally use appropriate debug or structured operational logging. Unexpected processing failures should be logged as errors.
+
+## 9. Temporary File and Cleanup Rules
+
+Rejected uploads must not be moved into permanent student-work storage.
+
+Temporary files created during validation, compression or conversion must be removed when processing completes or fails.
+
+Processing should:
+
+1. receive the upload in temporary storage
+2. perform authorisation and policy checks
+3. validate the file
+4. perform required safe processing
+5. move only accepted output into managed storage
+6. remove temporary artefacts
+
+Existing cleanup behaviour using `FileUtils.rm_f`, `FileUtils.rm_rf`, Tempfile cleanup and server-managed working directories should be preserved.
+
+## 10. Backward Compatibility
+
+The approved policy applies to new upload decisions.
+
+Existing task definitions must continue to function using their stored upload requirement identifiers.
+
+Previously accepted attachments must not be retrospectively deleted or made inaccessible solely because the approved policy changes.
+
+Compatibility rules:
+
+- preserve existing internal identifiers where possible
+- preserve `csv` as the spreadsheet-category identifier
+- continue mapping legacy `archive` requirements to the archive policy
+- preserve authorised access to existing stored attachments
+- apply current validation policy when a user uploads or replaces a file
+- do not require migration solely to change a display label
+- document any future category removal before enforcement
+
+If an older attachment uses a format no longer approved for new uploads, authorised users may retain download access unless a separate security decision requires quarantine or removal.
+
+## 11. Implementation Ownership
+
+Later frontend tickets should implement:
+
+- policy-driven picker filters
+- category labels
+- client-side size/count guidance
+- preview behaviour
+- accessible validation messaging
+
+Later backend tickets should implement:
+
+- authoritative policy representation
+- policy response/contract
+- server-side category enforcement
+- consistent error codes
+- size/count enforcement
+- security validation
+
+Later deployment and test tickets should verify:
+
+- configured limits
+- policy availability
+- rejection behaviour
+- storage isolation
+- cleanup behaviour
+
+FILE-A01 defines the policy. It does not make these production changes.
+
+
+# FILE-A01 Code Category Review
+
+## Repository Evidence
+
+The API repository confirms that `code` is an established task-upload requirement.
+
+Evidence includes:
+
+- API comment tests using a `code` upload requirement
+- unit API tests using Code-file requirements
+- unit factory data using an Imported Code requirement
+- submission-history tests using `main.rb`
+- task-definition tests using `main.rb`
+- similarity cleanup tests using a Code source requirement
+
+The strongest concrete extension-level evidence found in the repository is Ruby through repeated `main.rb` examples.
+
+The repository does not provide enough real unit-definition data to demonstrate that every extension in the current Code allowlist is actively required by teaching units.
+
+## FILE-A01 Decision
+
+For the MVP:
+
+- preserve the existing curated Code allowlist for backward compatibility
+- do not introduce arbitrary extensions
+- do not expand the Code allowlist solely because a file is text-based
+- require a documented teaching or assessment use case before adding new extensions
+- treat removal of existing extensions as a compatibility-sensitive change requiring separate review
+- continue to require API-side extension and MIME validation
+
+FILE-A01 therefore does not claim that every existing Code extension has been independently justified by current unit evidence.
+
+The policy establishes a maintainable rule: preserve current compatibility now, then make future additions or removals through reviewed evidence rather than uncontrolled allowlist growth.
+
+
+# FILE-A01 Data Flow and Trust Boundaries
+
+```mermaid
+flowchart TD
+    U[Student or Staff User]
+    FE[Angular Frontend]
+    API[Authenticated Doubtfire API]
+    AUTH[Authorisation Check]
+    REQ[Upload Requirement Matching]
+    VAL[FileHelper Validation]
+    TMP[Temporary Processing Area]
+    STORE[Student Work Storage]
+    VIEW[Authorised Preview or Download]
+    DENY[Reject Request]
+
+    U -->|Select file or attachment| FE
+    FE -->|Multipart upload request| API
+
+    subgraph TB1["Trust Boundary 1 - User Device / Browser"]
+        U
+        FE
+    end
+
+    subgraph TB2["Trust Boundary 2 - Doubtfire Application / API"]
+        API
+        AUTH
+        REQ
+        VAL
+        TMP
+    end
+
+    subgraph TB3["Trust Boundary 3 - Managed Student Work Storage"]
+        STORE
+    end
+
+    API --> AUTH
+    AUTH -->|Authorised| REQ
+    AUTH -->|Not authorised| DENY
+    REQ --> VAL
+    VAL -->|Rejected extension, MIME, structure, encryption or size| DENY
+    VAL -->|Accepted| TMP
+    TMP --> STORE
+    STORE --> VIEW
+    VIEW -->|Authorised response| FE
+```
+
+## Submission Upload Flow
+
+1. The user selects the files required by the task definition.
+2. Angular sends the files to `/projects/{projectId}/task_def_id/{taskDefinitionId}/submission`.
+3. The API checks `authorise?(current_user, project, :make_submission)`.
+4. `scope_files(...)` ensures the submitted files match the configured upload requirements.
+5. `task.accept_submission(...)` processes the submission.
+6. Each file is checked by `FileHelper.accept_file(...)`.
+7. Extension, MIME type, structure, encryption, archive safety and size rules are enforced server-side.
+8. Accepted files pass through temporary processing before being placed in managed student-work storage.
+9. Stored files are exposed only through authorised preview or download paths.
+
+## Task Chat Attachment Flow
+
+1. The user selects image, audio or PDF attachments in the task-comment composer.
+2. The frontend filters supported selections and provides appropriate confirmation or preview behaviour.
+3. The attachment is sent through the task-comment API.
+4. The API enforces the 30 MB per-file attachment limit.
+5. `FileHelper.accept_file(..., 'comment_attachment')` makes the final format decision.
+6. Accepted attachments are stored in server-managed, ID-based paths.
+7. Authorised users can later retrieve the attachment.
+
+## Trust Decisions
+
+- Frontend validation is advisory and exists for usability.
+- The API is the final authority for every upload decision.
+- User-provided filenames are not trusted as storage paths.
+- Uploaded content is not trusted based on file extension alone.
+- MIME and structural validation occur inside the trusted API boundary.
+- Managed student-work storage is separated from the browser boundary.
+- Rejected files must not proceed into managed student-work storage.
+- Existing authorisation rules continue to control upload and retrieval access.
+
+
+# FILE-A01 Security and Test Acceptance Requirements
+
+## Security Acceptance Requirements
+
+The implementation that follows FILE-A01 must satisfy all of the following requirements.
+
+### Authorisation
+
+- Every upload endpoint must require the existing authenticated user context.
+- Task submissions must continue to enforce the existing `:make_submission` authorisation rule.
+- Attachment retrieval must remain subject to the existing project and task access controls.
+- Client-side validation must never substitute for server-side authorisation.
+
+### File-Type Validation
+
+- Every new upload must be checked against an explicit approved category.
+- Extension checks and MIME checks must both be applied where supported.
+- A valid extension alone is not sufficient for acceptance.
+- Unknown or arbitrary file categories must be rejected.
+- Macro-enabled Office formats must remain excluded unless separately approved.
+- Executables, installers and disk-image formats must be rejected.
+
+### Document Validation
+
+- PDF files must be structurally readable before acceptance.
+- Corrupt PDFs must be rejected.
+- Encrypted PDFs must be rejected.
+- DOCX files must be validated as genuine OOXML packages.
+- Required DOCX package entries must be present.
+- Encrypted DOCX content, unsafe paths and link entries must be rejected.
+
+### Archive Validation
+
+Approved archive uploads must:
+
+- use an explicitly supported archive format
+- contain at least one file
+- reject unsafe internal paths
+- reject nested archives
+- reject encrypted entries
+- reject symbolic links
+- enforce an entry-count limit
+- enforce a total uncompressed-size limit
+- enforce a compression-ratio limit
+
+The existing default protections of 1,000 entries, 10 times the configured upload size for total uncompressed content, and 100:1 compression ratio should be preserved unless separately reviewed.
+
+### Size and Count Limits
+
+Task submissions:
+
+- must contain exactly the files required by `upload_requirements`
+- must reject missing or additional files
+- must enforce the configured per-file maximum
+- must retain 10 MB as the fallback when no valid configured maximum exists
+
+Task chat:
+
+- must enforce 30 MB per attachment
+- should enforce the approved attachment-selection count once finalised
+- must validate every selected attachment independently
+
+### Filename and Storage Safety
+
+- Original filenames must not be used as trusted storage paths.
+- Directory components must be removed.
+- Control characters and unsafe filename characters must be removed or replaced.
+- Invalid UTF-8 must be handled safely.
+- Display names must be limited to 255 characters.
+- Server-managed or ID-based storage paths should be used.
+- Rejected uploads must not reach permanent student-work storage.
+
+### Logging and Cleanup
+
+- Validation failures must produce a useful server-side reason.
+- Unexpected processing failures must be logged as errors.
+- Logs must not contain uploaded file contents or authentication secrets.
+- Temporary files must be removed after successful processing or failure.
+- Partial processing artefacts must not remain indefinitely.
+
+## Functional Test Acceptance Requirements
+
+### Task Submission Tests
+
+Verify that:
+
+1. CSV is accepted when a Spreadsheet requirement permits it.
+2. XLS and XLSX are accepted under the Spreadsheet category.
+3. The existing internal `csv` requirement still displays as Spreadsheet.
+4. Approved Code formats remain accepted.
+5. Unsupported Code extensions are rejected.
+6. Valid PDF submissions are accepted.
+7. Corrupt PDFs are rejected.
+8. Encrypted PDFs are rejected.
+9. Valid images are accepted where Image is required.
+10. Valid approved archives are accepted where Archive is required.
+11. Nested archives are rejected.
+12. Encrypted archives are rejected.
+13. Archives containing unsafe paths are rejected.
+14. Files above the configured size limit are rejected.
+15. Missing or extra files produce an upload-requirements mismatch.
+16. Legacy `archive` requirements continue to resolve to the archive policy.
+
+### Task Chat Tests
+
+Verify that:
+
+1. Approved images can be selected and uploaded.
+2. Approved audio can be selected and uploaded.
+3. PDF attachments can be selected and uploaded.
+4. Unsupported file types are rejected.
+5. Attachments above 30 MB are rejected by the API.
+6. Multiple selected attachments are processed individually.
+7. Each attachment receives independent API validation.
+8. Image confirmation displays an image preview.
+9. Audio confirmation provides an audio player.
+10. PDF confirmation displays filename/type metadata without unsafe generic rendering.
+
+### Security Regression Tests
+
+Verify rejection of:
+
+- `.exe`
+- `.msi`
+- `.iso`
+- `.dmg`
+- `.docm`
+- `.xlsm`
+- encrypted PDF
+- encrypted DOCX
+- encrypted archive
+- nested archive
+- archive path traversal
+- archive symbolic link
+- corrupted PDF
+- invalid DOCX package
+- mismatched MIME and extension where detectable
+
+### Preview Tests
+
+Verify that:
+
+- code/text preview uses the controlled Monaco path
+- submitted PDFs use the dedicated PDF viewer
+- images use controlled image rendering
+- task-chat audio uses the audio player
+- formats without an approved renderer display a no-preview state
+- download-only formats are never passed into an arbitrary generic renderer
+
+### Backward-Compatibility Tests
+
+Verify that:
+
+- existing task definitions using `csv` continue to function
+- `csv` displays as Spreadsheet
+- existing `archive` aliases continue to resolve correctly
+- existing stored attachments remain retrievable by authorised users
+- changing display labels does not require rewriting task definitions
+- new policy enforcement applies to new uploads without silently deleting historical attachments
+
+## Contract Tests
+
+The later implementation should include tests confirming that:
+
+- frontend policy data matches the authoritative API contract
+- frontend picker restrictions are derived from the approved policy
+- the frontend cannot override API rejection
+- policy changes can be versioned without breaking existing clients
+- missing or invalid policy data fails safely
+
+## Completion Standard
+
+A later implementation ticket is not complete until:
+
+- approved formats succeed in their intended contexts
+- excluded formats fail predictably
+- size and count limits are enforced
+- security checks cannot be bypassed from the frontend
+- existing task definitions remain compatible
+- temporary processing is cleaned up correctly
+- required automated tests pass
+
+
+# FILE-A01 Stakeholder and User-Request Mapping
+
+## Purpose
+
+This mapping connects the proposed upload policy to the people who use, implement, secure and maintain the feature.
+
+## Student Needs
+
+### Task submissions
+
+Students need to upload the common file formats required by assessment tasks without having to understand internal Doubtfire file-category names.
+
+Required common use cases:
+
+- submit PDF reports
+- submit CSV and Excel spreadsheets
+- submit source-code files for programming tasks
+- submit images where evidence or visual work is required
+- submit approved archives where a task explicitly requires multiple related files
+- submit DOCX documents where the task explicitly requires a Word document
+
+Policy response:
+
+- use clear display names such as Spreadsheet, PDF, Document, Code, Image and Archive
+- preserve existing task-definition compatibility
+- reject files with a clear reason when they do not meet the approved policy
+
+### Task chat
+
+Students need to provide supporting evidence or communicate with teaching staff using lightweight attachments.
+
+Required common use cases:
+
+- attach screenshots or other approved images
+- attach PDF evidence
+- attach or record audio
+
+Policy response:
+
+- task chat has a smaller approved format set than task submissions
+- task-chat attachments remain independently validated by the API
+- images and audio use controlled previews
+- PDF attachments use safe metadata/controlled viewing behaviour
+
+## Teaching Staff Needs
+
+Teaching staff need:
+
+- predictable file categories when configuring task requirements
+- confidence that student uploads match the task definition
+- continued access to previously accepted submissions and attachments
+- clear filenames and download behaviour
+- safe preview paths for common formats
+- actionable error information when uploads are rejected
+
+Policy response:
+
+- internal identifiers remain stable for compatibility
+- the API remains authoritative
+- existing task definitions continue to work
+- historical attachments are not invalidated solely because policy changes
+
+## Frontend Team Needs
+
+The frontend team needs:
+
+- one approved set of display names
+- approved extensions for picker guidance
+- context-specific size/count information
+- preview capability information
+- predictable error codes from the API
+
+Policy response:
+
+- frontend policy data should come from an API-owned or single versioned contract
+- the frontend must not maintain an independently evolving security allowlist
+- frontend filtering remains advisory
+
+## Backend Team Needs
+
+The backend team needs:
+
+- authoritative category definitions
+- explicit extension and MIME rules
+- clear size and count limits
+- consistent rejection behaviour
+- backward-compatibility requirements
+- storage and cleanup requirements
+
+Policy response:
+
+- API owns final acceptance decisions
+- all uploads pass server-side validation
+- consistent machine-readable errors should be introduced by later implementation tickets
+
+## Security Review Needs
+
+Security reviewers need explicit decisions for:
+
+- encrypted files
+- macro-enabled documents
+- executable files
+- installers
+- disk images
+- archives and nested archives
+- filename/path safety
+- decompression limits
+- temporary-file cleanup
+- preview behaviour
+
+Policy response:
+
+- encrypted, macro-enabled, executable, installer, disk-image and arbitrary formats are excluded from the common MVP
+- approved archives receive additional structural controls
+- generic browser rendering is not treated as an approved preview mechanism
+
+## Documentation Team Needs
+
+Documentation needs:
+
+- stable user-facing category names
+- clear accepted-format guidance
+- clear size limits
+- clear rejection guidance
+- distinction between task submission and task-chat policies
+
+Policy response:
+
+Approved user-facing names are:
+
+- Spreadsheet
+- PDF
+- Document
+- Code
+- Image
+- Audio
+- Archive
+
+Documentation should describe user-facing categories rather than exposing legacy internal identifiers unless needed for technical documentation.
+
+## Objective Lead Needs
+
+The Objective 4 lead needs confirmation that:
+
+- the policy is implementable by later frontend/backend tickets
+- production code is not changed by FILE-A01
+- cross-objective ownership remains respected
+- MISC-X01 governs branch/shared-ownership decisions
+- SLR-R01 remains separate from this upload-policy work
+- unresolved decisions are clearly identified before implementation begins
+
+## Review Mapping
+
+The final FILE-A01 review should obtain acknowledgement from:
+
+| Reviewer | Review Focus |
+|---|---|
+| Frontend | picker policy, display names, previews, client contract |
+| Backend | authoritative validation, limits, storage and API contract |
+| Security | exclusions, archive safety, filename handling, cleanup |
+| Documentation | terminology and user guidance |
+| Objective lead | scope, ownership, approval and implementation readiness |
+
+## Outstanding Review Decisions
+
+The following items require reviewer agreement before the policy is considered final:
+
+1. Whether 5 attachments per task-chat selection is the approved count limit.
+2. Whether DOCX should be part of the common task-submission MVP or remain available only where explicitly required.
+3. Whether the current Code extension list should be reduced before implementation or preserved initially and reviewed separately.
+4. Whether an API policy endpoint or generated shared policy contract is preferred.
+5. Location of the documentation-team notes referenced by the FILE-A01 card.
+6. Final branch/repository location under the MISC-X01 shared-ownership process.
+
diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md
index ba3fe15bdc..92d5dc9709 100644
--- a/docs/PULL_REQUEST_TEMPLATE.md
+++ b/docs/PULL_REQUEST_TEMPLATE.md
@@ -1,35 +1,41 @@
-_Any italic text should be deleted from the final Pull Request text, including this line_
+## Jira ticket
 
-# Description
+Ticket number or link:
 
-_Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change._
+## Summary
 
-Fixes # (issue)
+Briefly explain what you changed and why.
 
-## Type of change
+## Target branch
 
-_Please delete options that are not relevant._
+Which shared branch should this be merged into?
 
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
+Example: `feature/email-notifications`
 
-# How Has This Been Tested?
+## Testing
 
-_Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration_
+Explain how you tested the change.
 
-## Testing Checklist:
+Include any useful commands, screenshots, logs, or test results.
 
-- [ ] Tested in latest Chrome
-- [ ] Tested in latest Safari
-- [ ] Tested in latest Firefox
+## Security and privacy
 
-# Checklist:
+Does this change affect authentication, permissions, notifications, student data,
+secrets, personal information, or privacy?
 
-- [ ] My code follows the style guidelines of this project
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code in hard-to-understand areas
-- [ ] I have made corresponding changes to the documentation
-- [ ] My changes generate no new warnings
-- [ ] I have requested a review from @macite and @jakerenzella on the Pull Request
+If there is no known impact, write: `No known security or privacy impact.`
+
+## Evidence
+
+Add any screenshots, test output, diagrams, or other evidence that will help the reviewer.
+
+## Checklist
+
+- [ ] I selected the correct base branch.
+- [ ] My changes match the assigned Jira ticket.
+- [ ] I kept the change within the agreed scope.
+- [ ] I tested my changes.
+- [ ] I did not include passwords, tokens, API keys, secrets, or real student data.
+- [ ] I updated relevant documentation, or no documentation change was needed.
+- [ ] I reviewed my own changes before requesting review.
+- [ ] This pull request is ready for review.
diff --git a/docs/assets/global-filters.png b/docs/assets/global-filters.png
new file mode 100644
index 0000000000..282e52cf4b
Binary files /dev/null and b/docs/assets/global-filters.png differ
diff --git a/docs/assets/ppi/ppi-d01-copy-location-wireframe.svg b/docs/assets/ppi/ppi-d01-copy-location-wireframe.svg
new file mode 100644
index 0000000000..c5593b8ee8
--- /dev/null
+++ b/docs/assets/ppi/ppi-d01-copy-location-wireframe.svg
@@ -0,0 +1,350 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1400"
+  height="900"
+  viewBox="0 0 1400 900"
+  role="img"
+  aria-labelledby="ppi-wireframe-title ppi-wireframe-description"
+>
+  <title id="ppi-wireframe-title">
+    Annotated copy-location wireframe for task-level and unit-level peer progress
+  </title>
+  <desc id="ppi-wireframe-description">
+    Two privacy-safe mock Peer Progress Indicator cards. Number one marks the visible label, number
+    two marks an accessible help control, and number three marks the expanded explanation. The
+    task-level card is current and the unit-level card is a planned proof of concept.
+  </desc>
+
+  <rect width="1400" height="900" fill="#ffffff" />
+
+  <text
+    x="70"
+    y="55"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="34"
+    font-weight="700"
+    fill="#111111"
+  >
+    PPI-D01 copy-location wireframe
+  </text>
+
+  <text x="70" y="88" font-family="Arial, Helvetica, sans-serif" font-size="19" fill="#333333">
+    Sanitised mock values only. Task-level is current; unit-level is planned.
+  </text>
+
+  <!-- Task-level panel -->
+  <text
+    x="70"
+    y="135"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="25"
+    font-weight="700"
+    fill="#111111"
+  >
+    A. Current task-level widget
+  </text>
+
+  <rect
+    x="70"
+    y="155"
+    width="1260"
+    height="250"
+    rx="20"
+    fill="#f8f8f8"
+    stroke="#222222"
+    stroke-width="3"
+  />
+
+  <text
+    x="115"
+    y="205"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="24"
+    font-weight="700"
+    fill="#111111"
+  >
+    Peer task progress
+  </text>
+
+  <circle cx="370" cy="196" r="18" fill="#222222" />
+  <text
+    x="370"
+    y="203"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    1
+  </text>
+
+  <circle cx="1260" cy="194" r="26" fill="#ffffff" stroke="#222222" stroke-width="3" />
+  <text
+    x="1260"
+    y="202"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="24"
+    font-weight="700"
+    fill="#111111"
+  >
+    ?
+  </text>
+
+  <circle cx="1308" cy="194" r="18" fill="#222222" />
+  <text
+    x="1308"
+    y="201"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    2
+  </text>
+
+  <text x="115" y="252" font-family="Arial, Helvetica, sans-serif" font-size="22" fill="#111111">
+    42% of peers at your target grade have submitted
+  </text>
+
+  <rect x="115" y="275" width="620" height="24" rx="12" fill="#dddddd" stroke="#222222" />
+  <rect x="115" y="275" width="260" height="24" rx="12" fill="#777777" />
+  <text x="755" y="295" font-family="Arial, Helvetica, sans-serif" font-size="18" fill="#111111">
+    42%
+  </text>
+
+  <rect
+    x="115"
+    y="320"
+    width="1100"
+    height="58"
+    rx="10"
+    fill="#ffffff"
+    stroke="#555555"
+    stroke-width="2"
+  />
+
+  <text x="140" y="345" font-family="Arial, Helvetica, sans-serif" font-size="17" fill="#222222">
+    This is one combined group percentage. It does not show names, individual results,
+  </text>
+  <text x="140" y="368" font-family="Arial, Helvetica, sans-serif" font-size="17" fill="#222222">
+    raw group size or rankings, and it does not assess your own work.
+  </text>
+
+  <circle cx="1250" cy="348" r="18" fill="#222222" />
+  <text
+    x="1250"
+    y="355"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    3
+  </text>
+
+  <!-- Unit-level panel -->
+  <text
+    x="70"
+    y="460"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="25"
+    font-weight="700"
+    fill="#111111"
+  >
+    B. Planned PPI-F02 unit-level proof of concept
+  </text>
+
+  <rect
+    x="70"
+    y="480"
+    width="1260"
+    height="280"
+    rx="20"
+    fill="#f8f8f8"
+    stroke="#222222"
+    stroke-width="3"
+    stroke-dasharray="12 8"
+  />
+
+  <text
+    x="115"
+    y="530"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="24"
+    font-weight="700"
+    fill="#111111"
+  >
+    Unit progress overview
+  </text>
+
+  <circle cx="390" cy="521" r="18" fill="#222222" />
+  <text
+    x="390"
+    y="528"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    1
+  </text>
+
+  <circle cx="1260" cy="519" r="26" fill="#ffffff" stroke="#222222" stroke-width="3" />
+  <text
+    x="1260"
+    y="527"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="24"
+    font-weight="700"
+    fill="#111111"
+  >
+    ?
+  </text>
+
+  <circle cx="1308" cy="519" r="18" fill="#222222" />
+  <text
+    x="1308"
+    y="526"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    2
+  </text>
+
+  <text
+    x="115"
+    y="579"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="20"
+    font-weight="700"
+    fill="#111111"
+  >
+    My progress
+  </text>
+  <rect x="300" y="558" width="550" height="24" rx="12" fill="#dddddd" stroke="#222222" />
+  <rect x="300" y="558" width="347" height="24" rx="12" fill="#555555" />
+  <text x="875" y="579" font-family="Arial, Helvetica, sans-serif" font-size="19" fill="#111111">
+    63%
+  </text>
+
+  <text
+    x="115"
+    y="626"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="20"
+    font-weight="700"
+    fill="#111111"
+  >
+    Anonymous group progress
+  </text>
+  <rect x="390" y="605" width="460" height="24" rx="12" fill="#dddddd" stroke="#222222" />
+  <rect x="390" y="605" width="193" height="24" rx="12" fill="#888888" />
+  <text x="875" y="626" font-family="Arial, Helvetica, sans-serif" font-size="19" fill="#111111">
+    42%
+  </text>
+
+  <rect
+    x="115"
+    y="660"
+    width="1100"
+    height="70"
+    rx="10"
+    fill="#ffffff"
+    stroke="#555555"
+    stroke-width="2"
+  />
+
+  <text x="140" y="686" font-family="Arial, Helvetica, sans-serif" font-size="17" fill="#222222">
+    My progress and Anonymous group progress are separate values. The group value does
+  </text>
+  <text x="140" y="710" font-family="Arial, Helvetica, sans-serif" font-size="17" fill="#222222">
+    not show names, individual results, raw group size, marks, feedback or rankings.
+  </text>
+
+  <circle cx="1250" cy="695" r="18" fill="#222222" />
+  <text
+    x="1250"
+    y="702"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    3
+  </text>
+
+  <!-- Legend -->
+  <text
+    x="70"
+    y="810"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="22"
+    font-weight="700"
+    fill="#111111"
+  >
+    Callouts
+  </text>
+
+  <circle cx="205" cy="803" r="17" fill="#222222" />
+  <text
+    x="205"
+    y="810"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="17"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    1
+  </text>
+  <text x="235" y="810" font-family="Arial, Helvetica, sans-serif" font-size="18" fill="#222222">
+    Visible label
+  </text>
+
+  <circle cx="430" cy="803" r="17" fill="#222222" />
+  <text
+    x="430"
+    y="810"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="17"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    2
+  </text>
+  <text x="460" y="810" font-family="Arial, Helvetica, sans-serif" font-size="18" fill="#222222">
+    Keyboard, touch and screen-reader accessible help control
+  </text>
+
+  <circle cx="955" cy="803" r="17" fill="#222222" />
+  <text
+    x="955"
+    y="810"
+    text-anchor="middle"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="17"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    3
+  </text>
+  <text x="985" y="810" font-family="Arial, Helvetica, sans-serif" font-size="18" fill="#222222">
+    Expanded explanation
+  </text>
+
+  <text x="70" y="860" font-family="Arial, Helvetica, sans-serif" font-size="17" fill="#333333">
+    Based on the earlier unit-level PPI visual baseline by Umeda Ranuluge. Sanitised and updated for
+    PPI-D01 copy placement. No real student data is shown.
+  </text>
+</svg>
diff --git a/docs/assets/unit-scope-dropdown.png b/docs/assets/unit-scope-dropdown.png
new file mode 100644
index 0000000000..7c4aadddff
Binary files /dev/null and b/docs/assets/unit-scope-dropdown.png differ
diff --git a/docs/cpd-data-source-map.md b/docs/cpd-data-source-map.md
new file mode 100644
index 0000000000..83731cfe6a
--- /dev/null
+++ b/docs/cpd-data-source-map.md
@@ -0,0 +1,132 @@
+**Cross-unit Dashboard (CPD): Data Sources & Ownership Rules**
+
+**Branch:** docs/cpd-data-source-map
+
+**Purpose:** Provide frontend, backend, and security contributors with a
+single source of truth regarding dashboard data sources, role
+permissions, cross-unit visibility rules.
+
+**Field-to-Source Mapping Table**
+
+This table maps user-facing fields on the Cross-unit Dashboard to their
+underlying backend services and models:
+| Dashboard Field / Element | Angular Component / Data Binding | API Endpoint & Method | Backend Model / Entity | Access Scope & Permissions |
+| :--- | :--- | :--- | :--- | :--- |
+| **Unit Code & Name** | `DashboardUnit.code`, `DashboardUnit.name` | `GET /projects` | `Unit#code`, `Unit#name` via `Project.eager_load(:unit)` | Authenticated Student (`for_user current_user`) |
+| **Task Title & Subtitle** | `DashboardTask.title`, `DashboardTask.subtitle` | `GET /projects` (`include_task_definitions=true`) | `TaskDefinition#name`, `TaskDefinition#abbreviation`, `TaskDefinition#targetGradeText` | Authenticated Student (`current_user`) |
+| **Task Description** | `DashboardTask.description` | `GET /projects` (`include_task_definitions=true`) | `TaskDefinition#description` | Authenticated Student (`current_user`) |
+| **Task Status & Color** | `DashboardTask.status`, `statusLabel`, `color` | `GET /projects` | `Task#status`, mapped via `TaskStatus.STATUS_LABELS/COLORS` | Authenticated Student (`current_user`) |
+| **New Comments Count** | `DashboardTask.comments` | `GET /projects` | `Task#numNewComments` | Authenticated Student (`current_user`) |
+| **Due Date** | `DashboardTask.dueDate` | `GET /projects` | `TaskDefinition#targetDate` | Authenticated Student (`current_user`) |
+| **Task Weight / Priority** | `DashboardTask.weight` | `GET /projects` | `Task#topWeight` (calculated via `project.calcTopTasks()`) | Authenticated Student (`current_user`) |
+| **Project ID / Unit Key** | `DashboardUnit.projectId` | `GET /projects` | `Project#id` | Authenticated Student (`current_user`) |
+
+**Data Ownership, Enrolment & Visibility Rules**
+
+**Active vs. Inactive Enrolment Filtering**
+
+-   **Backend Inactive Toggle:** GET /projects accepts an optional query
+    parameter. By default (false), only active unit projects for
+    current_user are fetched.
+
+-   **Frontend Active Task Scope:** CrossDashboardComponent populates
+    unit tasks via project.activeTasks(), ensuring archived or inactive
+    tasks are excluded from the default view.
+
+**Client-Side State, Filtering & Sorting Rules**
+
+-   **Hide Completed Filter (Filter.HideCompleted):** Managed via
+    private filters: Map\<number, Filter\[\]\>. When active, tasks with
+    task.status == \'complete\' (completedTypes) are removed from
+    unitsProcessed.
+
+-   **Default Task Ordering:** In all sort modes, completed tasks are
+    pushed to the bottom of the list (completedTypes.includes(a.status)
+    evaluation).
+
+-   **Due Date Sort (SortMode.SubmissionDate):** Orders active tasks
+    chronologically using a.dueDate.getTime() - b.dueDate.getTime()
+    (TaskDefinition#targetDate).
+
+-   **Default Weight Sort (SortMode.Default):** Orders tasks by
+    calculated priority weight using a.weight - b.weight
+    (Task#topWeight).
+
+**Role-Based Access Control & Data Isolation**
+
+-   **Student Access:** All dashboard data subscriptions execute through
+    GlobalStateService.currentUserProjects, which calls ProjectsApi
+    endpoints protected by authenticated?. Queries are strictly scoped
+    to the authenticated session (for_user current_user).
+
+-   **Write Safeguards:** Modifying target grades or submitted grades
+    via PUT /projects/:id is restricted once portfolio_exists? evaluates
+    to true (returns HTTP 403 Forbidden).
+
+**Technical Gaps**
+
+During this documentation audit, the following technical gaps were
+identified directly in the source code:
+
+1.  **SortMode.Recommended Stub:** In
+    CrossDashboardComponent.processTasks(), the recommended sort mode is
+    stubbed out with // TODO: Connect to recommender\'s points and
+    returns 0. Recommended sorting currently falls back to default
+    ordering and is not connected to the backend Task Prioritisation
+    Recommender Service.
+
+2.  **In-Memory Filtering & Performance:** Task filtering (Hide
+    Completed) and sorting are processed entirely client-side on the
+    Angular main thread (this.unitsProcessed = this.units.map(\...)).
+    Heavy task volumes across multiple units may impact frontend
+    rendering performance.
+
+3.  **Missing Inactive Unit Filter Toggle in UI:** While ProjectsApi
+    supports include_inactive: Boolean, CrossDashboardComponent does not
+    currently expose an interface control to pass this query parameter
+    to GlobalStateService.
+
+**Data-Flow Diagram**
+
+```text
+            [  CrossDashboardComponent  ]
+                          |
+                          | (1) Subscribes to currentUserProjects
+                          v
+        [ Frontend: GlobalStateService ]
+                          |
+                          | (2) GET /projects?include_task_definitions=true
+                          v
+         [ Backend API: ProjectsApi  ]
+                          |
+                          | (3) Project.eager_load(:unit, :user).for_user(current_user)
+                          v
+              [ PostgreSQL Database ]
+                          |
+                          | (4) Represents array via Entities::ProjectEntity
+                          v
+   [ CrossDashboardComponent: mapProjects() & mapTasks() ]
+                          |
+                          | (5) In-Memory Filter/Sort via processTasks()
+                          v
+            [ Rendered Dashboard Unit Cards ]
+```
+
+**Recommended Follow-Up Tickets**
+
+-   **Integrate Task Prioritisation Recommender with
+    SortMode.Recommended:** Connect SortMode.Recommended in
+    CrossDashboardComponent to the backend recommender service priority
+    scores, replacing the current return 0 stub.
+
+-   **Add UI Toggle for Inactive/Archived Units:** Add a filter option
+    to pass include_inactive=true to GlobalStateService, allowing
+    students to view historical unit projects.
+
+-   **Batch Priority Points in ProjectEntity:** Extend
+    Entities::ProjectEntity to include pre-calculated recommender
+    weights per task definition to streamline frontend sorting.
+
+-   **Unit Test Coverage for CrossDashboardComponent:** Write Angular
+    unit tests for toggleFilter(), setSort(), and processTasks() to
+    prevent sorting regressions.
diff --git a/docs/cpd-sizing-investigation.md b/docs/cpd-sizing-investigation.md
new file mode 100644
index 0000000000..00155232e0
--- /dev/null
+++ b/docs/cpd-sizing-investigation.md
@@ -0,0 +1,189 @@
+# CPD sizing investigation
+
+Ticket: [CPD - Investigate sizing issue](https://teams.microsoft.com/l/entity/com.microsoft.teamspace.tab.planner/planner.v1.df787fb0-1a0b-4bb5-9bc9-9b92a428eb13_p_KuipOoIL0E-7orl64gLd0cgAGv3z?tenantId=d02378ec-1688-46d5-8540-1c28b5f470f6&webUrl=https%3A%2F%2Ftasks.teams.microsoft.com%2Fteamsui%2FpersonalApp%2Falltasklists&context=%7B%22subEntityId%22%3A%22%2Fv1%2Fplan%2FKuipOoIL0E-7orl64gLd0cgAGv3z%2Fview%2Fboard%2Ftask%2FhHsrVI-btk62f51L1DisTMgAOioK%22%2C%22channelId%22%3A%2219%3Abd20175d09414f079490a2403f7fca74%40thread.tacv2%22%7D)
+
+Status: Investigation complete. An initial responsive sizing adjustment was implemented by CPD-Q04 in [PR #34](https://github.com/ontrack-features-t2-2026/doubtfire-web/pull/34). The phone-layout follow-up recorded below supersedes the original recommendation to retain horizontal scrolling below 640 px.
+
+## Superseding phone layout (2026-08-28)
+
+The Cross-Project Dashboard now changes navigation model below the established 640 px one-card containment threshold:
+
+- Unit scope and global task search stay first, followed immediately by project summaries.
+- Status, grade and date controls move into a labelled `More filters` disclosure on phones. An active-filter count keeps hidden criteria discoverable.
+- Projects become a full-width vertical accordion. Each collapsed summary exposes the unit name and state, matching task count, and nearest actionable deadline or warning.
+- Expanding a project reveals its existing task search, sort, filter and task rows. Only one project is expanded at a time.
+- The accordion and filter disclosures use native buttons, 48 px minimum targets, keyboard focus indicators, `aria-expanded`, and `aria-controls` relationships.
+- Widths are fluid down to 320 px; phone content is contained without horizontal panning. The existing 512 px cards, horizontal project strip and independently scrolling task lists remain unchanged at 640 px and wider.
+- Task titles are keyboard-focusable links, and expanded task actions wrap instead of overflowing a narrow row.
+
+Focused component evidence covers the disclosure state, active-filter count, single-open accordion behavior, summary contents, unique controlled regions, non-duplicated task rows, 320 px-safe utility classes, and retained desktop utility classes. The historical 390 px images below remain useful before-state evidence; they no longer describe the implemented phone behavior.
+
+## Scope
+
+This report explains why the Cross-Project Dashboard (CPD) became noticeably larger when its 10.x feature implementation was moved to the 11.x codebase. It records the reproduction, affected dimensions, source and dependency history, existing remediation, remaining limitations, and implementation guidance.
+
+The original investigation did not change CPD production code or CPD-Q04 behavior. The 2026-08-28 follow-up does change the sub-640 px presentation as documented above; the historical analysis below is retained to explain the sizing boundary and earlier evidence.
+
+## Finding
+
+The primary cause was a missed rem-unit migration:
+
+1. The original CPD feature ran on an OnTrack 10.x baseline that loaded Bootstrap 3 after the application styles. Bootstrap 3 set the root font size to 10 px.
+2. Commit [`a8ba06c01`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/a8ba06c01cd47937249d5780face427143b7dac4) removed Bootstrap. Its commit notes explicitly state that Tailwind spacing, sizing, and font utilities would otherwise render 60 percent larger, so 138 files were rescaled.
+3. CPD was still on the separate `Feature/Cross-Unit` history and was not present in that migration.
+4. Commit [`2c6d2786e`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/2c6d2786e) later reintroduced the legacy CPD template onto the 11.x base with the same rem-based width and spacing classes. With the browser default 16 px root, those values rendered 60 percent larger.
+
+For example, the legacy `w-[34rem]` card was 340 px under the 10 px root. The same 34 rem value became 544 px under the 16 px root. This is a 204 px, or 60 percent, increase before CPD-Q04.
+
+The Angular Material upgrade and later toolbar controls increased the amount of space needed inside the card header, but they did not cause the uniform 60 percent increase. Tailwind also did not redefine 34 rem: the root font-size context changed.
+
+A secondary height issue has the same migration boundary. Commit [`edab0928c`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/edab0928c3419cb7babb3363cc1c2046decb3c0b) deleted the `.panel-full-screen` rule, including its viewport-height constraint. CPD still applies that class, so it is now a no-op. The remaining `h-full` has no explicitly sized route parent and does not reliably constrain the task list to the viewport. This can make the dashboard feel vertically oversized, although it is separate from the uniform width and spacing increase.
+
+## Baselines and ownership
+
+| Baseline                   | Commit                                                                                                                   | Package context                                                    | Purpose                                                                                                                                  |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Plain 10.0.x               | [`c57c1c320`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/c57c1c3206073f7b45fba69eefe9875985a4bee9) | 10.x                                                               | Does not contain CPD and cannot be used as a visual CPD baseline.                                                                        |
+| 10.x CPD feature           | [`187902747`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/187902747adb3a851bd3294b97b2a9d4a6e8ca95) | `10.0.1-29`, Bootstrap 3.4, Angular Material 17.3.10, Tailwind 3.3 | Valid legacy CPD baseline. Its merge base with 10.0.x is `c57c1c320`.                                                                    |
+| 11.x CPD reintroduction    | [`2c6d2786e`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/2c6d2786e)                                | `11.0.0-45`, no Bootstrap, Angular Material 22.0.2, Tailwind 4.3.1 | Reintroduced the legacy class values after the repository-wide rescaling.                                                                |
+| 11.x before CPD-Q04        | [`b9386055`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/b9386055)                                  | 11.x                                                               | Reproduction baseline immediately before the responsive sizing adjustment.                                                               |
+| CPD-Q04 implementation     | [`854f9ce9b`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/854f9ce9ba5f100b0425996c3f5d7e248faa6b32) | 11.x                                                               | Existing production remediation by SandilBandara in PR #34.                                                                              |
+| Investigation snapshot     | [`53f1c5532`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/53f1c5532eefc75cadf7834748a5a85c2bc6b3e8) | 11.x                                                               | Source snapshot used for the measurements and original investigation.                                                                    |
+| Docs-only replacement base | [`9962e7ea1`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/9962e7ea171a2bf6d7a12be50874fa5c7ee77e21) | 11.x                                                               | Current `feature/cross-unit` base used to re-home the report. The relevant sizing classes are unchanged from the investigation snapshot. |
+
+## Reproduction
+
+1. Check out `187902747` in an isolated worktree and inspect `angular.json`, `package.json`, and `src/app/dashboard/f-cross-dashboard.component.html`.
+2. Confirm that Bootstrap 3.4 is loaded after `src/styles.scss`, the CPD card uses `w-[34rem]`, the search field uses `w-64`, and the dashboard strip uses `gap-8 px-16`.
+3. Check out `b9386055` in a second isolated worktree. Confirm that Bootstrap is absent and that the corresponding pre-fix values are `w-136`, `w-64`, `gap-8`, and `px-16`.
+4. Render the dashboard with the same synthetic units and tasks at 100 percent browser zoom. Record computed styles at 1440 x 900, 1280 x 900, 1024 x 900, 768 x 900, 640 x 800, and 390 x 844.
+5. Repeat against `854f9ce9b` or the current `feature/cross-unit` branch to verify the CPD-Q04 adjustment.
+
+The included standalone evidence harness reconstructs only the relevant CPD dimensions and uses synthetic data. It makes no network or API requests. The application-level images from PR #34 use the same privacy-safe principle. A live application render additionally requires a compatible local API and an authenticated synthetic student session.
+
+## Measurements
+
+The values below assume the original 10 px root and the current browser-default 16 px root documented above.
+
+| Element or utility       |    10.x CPD feature | 11.x before CPD-Q04 |    Difference | Current after CPD-Q04 |
+| ------------------------ | ------------------: | ------------------: | ------------: | --------------------: |
+| Unit card                |    `34rem` = 340 px |    `34rem` = 544 px | +204 px, +60% |      `32rem` = 512 px |
+| Search field             |    `16rem` = 160 px |    `16rem` = 256 px |  +96 px, +60% |      `14rem` = 224 px |
+| Side padding, each side  |      `4rem` = 40 px |      `4rem` = 64 px |  +24 px, +60% |                 64 px |
+| Gap between cards        |      `2rem` = 20 px |      `2rem` = 32 px |  +12 px, +60% |                 32 px |
+| Card-header padding      |      `1rem` = 10 px |      `1rem` = 16 px |   +6 px, +60% |                 16 px |
+| `text-xl` reference size | `1.25rem` = 12.5 px |   `1.25rem` = 20 px | +7.5 px, +60% |                 20 px |
+
+The same unconverted scale remains in the task rows and expanded details:
+
+| Legacy-derived utility              | 10.x rendering | Current rendering | Increase |
+| ----------------------------------- | -------------: | ----------------: | -------: |
+| `w-4` task rail                     |          10 px |             16 px |     +60% |
+| `mr-6` task margin                  |          15 px |             24 px |     +60% |
+| `py-4` row padding, each side       |          10 px |             16 px |     +60% |
+| `size-8` comment badge              |          20 px |             32 px |     +60% |
+| `text-xl` badge text                |        12.5 px |             20 px |     +60% |
+| `gap-2` and `pt-2` expanded spacing |           5 px |              8 px |     +60% |
+
+Containment thresholds for one card are:
+
+- 10.x CPD feature: 40 + 340 + 40 = 420 px.
+- 11.x before CPD-Q04: 64 + 544 + 64 = 672 px.
+- Current after CPD-Q04: 64 + 512 + 64 = 640 px.
+
+At a 640 px viewport, the legacy layout had 220 px of spare horizontal space, the 11.x pre-fix layout overflowed by 32 px, and the CPD-Q04 layout fits exactly. At the historical investigation snapshot, a 390 px fixed-width card overflowed by 250 px and used horizontal scrolling. The 2026-08-28 follow-up supersedes that narrow behavior with full-width stacked summaries below 640 px.
+
+CPD-Q04 reduced the pre-fix card by 32 px (5.9 percent) and the search field by 32 px (12.5 percent). It also changed the unit-scope selector from fixed `w-64` to `w-full max-w-64`, allowing the selector to shrink while retaining its 256 px maximum.
+
+## Visual evidence
+
+### True 10.x and 11.x scale comparison
+
+The following privacy-safe reconstructions use the exact root-size context and component utility values from each source baseline.
+
+![10.x CPD feature at 1440 x 900](evidence/cpd-sizing-investigation/02-legacy-v10-feature-1440x900.jpg)
+
+![Current 11.x CPD after CPD-Q04 at 1440 x 900](evidence/cpd-sizing-investigation/01-current-v11-1440x900.jpg)
+
+### Narrow viewport threshold
+
+![10.x CPD feature at 640 x 800](evidence/cpd-sizing-investigation/04-legacy-v10-feature-640x800.jpg)
+
+![11.x CPD before CPD-Q04 at 640 x 800](evidence/cpd-sizing-investigation/06-v11-before-sizing-fix-640x800.jpg)
+
+![Current 11.x CPD after CPD-Q04 at 640 x 800](evidence/cpd-sizing-investigation/03-current-v11-640x800.jpg)
+
+![Historical 11.x CPD at 390 x 844 before the stacked phone follow-up](evidence/cpd-sizing-investigation/05-current-v11-390x844-mobile-limitation.jpg)
+
+At 480 x 800, the legacy one-card footprint fits while the current one-card footprint overflows by 160 px:
+
+![10.x CPD feature at 480 x 800](evidence/cpd-sizing-investigation/08-legacy-v10-feature-480x800.jpg)
+
+![Current 11.x CPD at 480 x 800](evidence/cpd-sizing-investigation/07-current-v11-480x800.jpg)
+
+The complete application-level CPD-Q04 before and after capture set is also stored in [`docs/evidence/cpd-sizing-investigation`](evidence/cpd-sizing-investigation/README.md) for the 1440, 1280, 1024, 768, and 390 px viewport widths.
+
+## Affected source and dependencies
+
+The affected legacy-derived sizing values span three CPD templates.
+
+[`f-cross-dashboard.component.html`](../src/app/dashboard/f-cross-dashboard.component.html):
+
+- The unit-scope selector is fluid with a 256 px maximum.
+- At 640 px and wider, the fixed horizontal card strip retains 32 px gaps, 64 px side padding, and horizontal scrolling between 512 px cards.
+- Below 640 px, the strip becomes a vertically scrolling, full-width accordion with 16 px side padding and no horizontal panning.
+- The desktop task-search field remains 224 px; the expanded phone control uses the available card width.
+- The sort and filter controls use Angular Material icon buttons. Their larger accessible control footprints are a secondary header-space constraint and should not be globally reduced to solve this local issue.
+
+[`dashboard-list-item.component.html`](../src/app/dashboard/list-item/dashboard-list-item.component.html):
+
+- `mr-6`, `ml-2`, and `gap-4` control row spacing.
+- `w-4` controls the task rail and `py-4` controls row padding.
+- `size-8` and `text-xl` control the comment badge and its text.
+
+[`expanded-list-item.component.html`](../src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html):
+
+- `mr-6`, `w-4`, `pb-4`, `pt-2`, and `gap-2` control expanded-row spacing.
+
+Related history and context:
+
+- `angular.json` at the 10.x feature baseline loaded Bootstrap CSS after the application styles.
+- `package.json` moved from Bootstrap 3.4, Angular Material 17.3.10, and Tailwind 3.3 to no Bootstrap, Angular Material 22.0.2, and Tailwind 4.3.1.
+- Commit [`edab0928c`](https://github.com/ontrack-features-t2-2026/doubtfire-web/commit/edab0928c3419cb7babb3363cc1c2046decb3c0b) removed the old `.panel-full-screen` height rule. The `$main-view-max-height` token still exists in `styles.scss`, and the current inbox applies the equivalent calculated height directly.
+
+## Original recommendation and handover
+
+SandilBandara's CPD-Q04 change in PR #34 safely addressed the immediate 11.x overflow threshold without changing behavior:
+
+- Keep the unit-scope selector fluid up to its existing maximum.
+- Keep the local card and search reductions from `w-136` to `w-128` and `w-64` to `w-56`.
+- Preserve the horizontal card strip at and above 640 px, search behavior, grade and date filtering, warning states, and Material touch targets.
+- Do not apply a global root-font, Tailwind scale, or Angular Material density override for this local dashboard issue.
+
+The investigation shows that PR #34 was a partial remediation rather than a restoration of the 10.x visual scale. If parity with 10.x is still required, hand CPD-Q04 or a follow-up ticket these scoped implementation options:
+
+1. Apply the repository's 0.625 conversion to legacy-derived CPD spacing in all three templates. Examples include `gap-8` to `gap-5`, `px-16` to `px-10`, `gap-4` and `p-4` to `gap-2.5` and `p-2.5`, `mr-6` to `mr-3.5`, `w-4` to `w-2.5`, and `size-8` to `size-5`.
+2. Decide the card target explicitly. Exact historic parity is 340 px for the card and 160 px for search. Preserving the relative CPD-Q04 reductions under the corrected scale produces 320 px and 140 px. Either compact target requires the header to reflow because the new Material icon buttons must retain their accessible touch targets.
+3. Replace the dead `panel-full-screen h-full` assumption with an explicit viewport-bounded height such as the calculated height already used by the inbox, together with `min-h-0 overflow-hidden`.
+4. Preserve the horizontal card strip at and above 640 px, search behavior, grade and date filtering, warning states, and Material touch targets.
+5. Add focused privacy-safe regression coverage when making phone-width full-card containment a requirement. The 2026-08-28 follow-up implements that scoped change and records its component evidence above.
+
+The 2026-08-28 production follow-up preserves the authorship and implementation history in PR #34 while superseding only its sub-640 px navigation behavior.
+
+## Risks
+
+- Reducing the card further can crowd the unit title, search field, and two Material icon buttons.
+- Making cards fluid on phones changes the horizontal multi-unit navigation model; this is contained below 640 px and covered by accessible native disclosure controls.
+- Changing the global rem baseline or Material density would affect unrelated screens and touch targets.
+- Removing horizontal overflow without a replacement layout could make additional units inaccessible.
+- Removing `.panel-full-screen` without checking the older project dashboard could introduce a vertical layout regression.
+
+## Verification completed
+
+- Compared the 10.x feature, 11.x reintroduction, pre-fix, production fix, and current shared branch histories.
+- Verified the Bootstrap removal commit and its explicit 60 percent rescaling rationale.
+- Calculated the relevant rem-to-pixel values and one-card containment thresholds.
+- Reviewed privacy-safe evidence at the specified desktop, tablet, and phone widths.
+- Confirmed that the docs-only replacement changes no source, configuration, or CPD behavior.
+- Ran the repository lint, typecheck, full test, and production build checks recorded with the evidence.
+- Added focused 2026-08-28 tests for the phone filter disclosure, active-filter indicator, unit summaries, accordion state, accessible control relationships, single task-row rendering, and responsive width contract.
diff --git a/docs/cpd-user-guide-handover.md b/docs/cpd-user-guide-handover.md
new file mode 100644
index 0000000000..f4fa3a7f4f
--- /dev/null
+++ b/docs/cpd-user-guide-handover.md
@@ -0,0 +1,115 @@
+# Cross-Project Dashboard: User Guide & Contributor Handover
+
+This document is the user guide for students using the Cross-Project Dashboard and a handover reference for contributors maintaining the feature on `11.0.x`. The historical `feature/cross-unit` work is already integrated into that release line.
+
+---
+
+## Part 1: Student User Guide
+
+### 1. Unit Scopes
+
+The dashboard allows students to filter visible projects using the **Unit scope** dropdown.
+
+- **Active units:** Displays currently enrolled and active projects.
+- **Previous units:** Displays authorised projects from past teaching periods. If no historical data exists, a "No previous units are available" message is displayed.
+- **All units:** Combines active and previous authorised projects in one view.
+
+![Unit Scope Dropdown](assets/unit-scope-dropdown.png)
+
+### 2. Searching and Filtering
+
+The dashboard features a global toolbar to filter tasks across all visible units.
+
+- **Global search:** Matches unit code/name and task title, abbreviation, status, target grade or due date across visible units.
+- **Per-unit search:** Matches a task's title, subtitle, description, abbreviation or status inside one unit card.
+- **Task statuses:** Filters by any task state offered in the dropdown.
+- **Target grades:** Filters by Pass, Credit, Distinction or High Distinction tiers.
+- **Date filters:** Start and end date fields filter tasks by their local due date. An invalid range is announced and is not applied.
+- **Clear controls:** "Clear all" restores the Active-units scope and resets all global toolbar filters, including dates. "Clear dates" resets only the date range. Per-unit search and card filters remain independent.
+- **Empty states:** The dashboard distinguishes between no available tasks and no tasks matching the current filters.
+
+![Global Search and Filters](assets/global-filters.png)
+
+### 3. Phone Layout
+
+On screens narrower than 640 px, the dashboard uses a stacked layout designed
+for touch and keyboard use rather than a horizontally scrolling row of unit
+cards.
+
+- The unit scope and global search stay at the top of the page.
+- Secondary filters move into a **More filters** disclosure. Its label includes
+  the number of active secondary filters so hidden filter state remains visible.
+- Projects become full-width disclosures, and opening one project closes the
+  previously open project. Each closed header still shows the unit, project
+  state, matching-task count and nearest actionable deadline.
+- Task actions wrap within the viewport. The page must not require horizontal
+  panning at supported phone widths down to 320 px.
+
+At 640 px and wider, the desktop/tablet layout remains a horizontally arranged
+set of independently scrolling unit cards, with the full filter toolbar visible.
+
+### 4. Grade Completion Summaries
+
+When one or more target-grade filters are selected, each visible unit card displays a **Grade task completion** summary for those tiers.
+
+- It displays counts and percentages, such as "Pass: 1 of 3 complete (33%)".
+- These percentages represent _task completion counts_ for the selected tier. They are **not** predicted final grades or official academic marks.
+
+### 5. Due Date Warnings & Limitations
+
+The dashboard provides visual urgency indicators for approaching task deadlines.
+
+- **Overdue:** Displayed in red.
+- **Within 24 hours:** Displayed in orange.
+- **Within 3 days:** Displayed in yellow.
+- **Within 7 days:** Displayed in blue.
+
+Warnings are shown only for tasks that have not been submitted. The dashboard uses `Task.localDueDate()`, which prefers the task-specific due date supplied by the API before falling back to the task definition. The dashboard does not independently grant or calculate extensions; the project record remains the authoritative deadline source.
+
+### 6. Accessibility
+
+- **Keyboard navigation:** Filter controls and task-detail toggles are keyboard operable, and per-unit search controls have visible focus styling.
+- **Project disclosures:** Phone project headers expose their expanded state,
+  keep a visible focus indicator and preserve focus when filters are cleared.
+- **Screen readers:** Task-detail buttons expose their expanded state and use task-specific Expand/Collapse labels. Decorative warning icons are hidden from assistive technology.
+- **Non-colour meaning:** Due warnings include visible text such as "Overdue" or "Due within 3 days", so colour is not the only signal.
+
+### 7. Authorized Data Boundary (Privacy)
+
+The Cross-Project Dashboard uses the authenticated student's authorised project and task responses.
+
+- It displays task statuses, local due dates and definitions only for projects returned to that student by the API.
+- It does not introduce official numerical marks, staff feedback comments or peer-assessment information.
+
+---
+
+## Part 2: Contributor Handover
+
+### 1. Architecture & Key Files
+
+- **Target branch:** `11.0.x`
+- **Main component:** `src/app/dashboard/f-cross-dashboard.component.ts` handles unit scopes, global and per-unit filtering, grade completion summaries, previous-unit loading and the single-open phone disclosure state.
+- **Main template:** `src/app/dashboard/f-cross-dashboard.component.html` defines the filter toolbar, responsive project disclosures/cards and empty/error states.
+- **Responsive styling:** `src/app/dashboard/f-cross-dashboard.component.scss` switches the stacked phone experience at 640 px while retaining the wider horizontal card layout.
+- **Due-warning component:** `src/app/dashboard/list-item/dashboard-list-item.component.ts` owns warning thresholds and labels.
+- **Test suites:** The adjacent component specs cover unit scopes, global/per-unit search, status/grade/date filters, summaries, warnings and accessibility state.
+
+### 2. Linked Tickets & Context
+
+- **CPD-F04:** Local frontend date-range filtering alongside unit scopes and existing task data.
+- **CPD-F05:** Accessible global-toolbar date controls and targeted tests.
+- **CPD-Q03:** Accessible due-date warning badges in the dashboard task presentation.
+- **CPD-Q04:** Responsive-sizing regression coverage and visual evidence.
+- **CPD-Q05:** UI comparison and acceptance evidence; keep the evidence link with the ticket rather than treating this guide as the comparison matrix itself.
+
+### 3. Known Gaps & Post-MVP Work
+
+The following limitations remain post-MVP work:
+
+1. **Deadline source:** Web displays the local due date supplied through the task model. Any new extension representation must be added to the API/model contract before the dashboard can display it.
+2. **Visualisation scale:** High task volumes can create substantial scrolling. Adaptive scale controls or compact toggles remain a possible follow-up.
+3. **Filter persistence:** Global toolbar filters reset after a page refresh; no account-level filter preference is stored.
+
+### 4. Verification Basis
+
+This guide was reconciled with the merged `11.0.x` implementation after the Cross-Project Dashboard closure and phone-layout merges. The two screenshots show the wider toolbar using demonstration units and contain no real student records. Before changing the guide, rerun the dashboard-focused component specs, verify the screenshots still match the current wider toolbar and unit-scope labels, and check computed layout at 320 px, 390 px, 640 px and a desktop width.
diff --git a/docs/english-only-submission-notice.md b/docs/english-only-submission-notice.md
new file mode 100644
index 0000000000..68169dd27a
--- /dev/null
+++ b/docs/english-only-submission-notice.md
@@ -0,0 +1,21 @@
+# English-Only Assessment Submission Notice
+
+## Proposed Notice
+
+All assessment submissions must be written and submitted in English. Translation tools may be used to help understand the assessment instructions, but the final submitted work must remain in English.
+
+## Recommended Placement
+
+The notice should appear in the following locations:
+
+1. **Assessment task details page** — near the assessment requirements.
+2. **Submission upload page** — above the upload or submit button.
+3. **Final submission confirmation window** — before the student confirms the submission.
+
+## Behaviour When Translation Is Enabled
+
+The notice should remain visible in English when the language or translation option is active. Translation must not hide or change the requirement that the final assessment submission must be in English.
+
+## Scope
+
+This document provides the proposed wording and recommended placement only. No application or interface changes have been implemented.
diff --git a/docs/evidence/cpd-sizing-investigation/01-current-v11-1440x900.jpg b/docs/evidence/cpd-sizing-investigation/01-current-v11-1440x900.jpg
new file mode 100644
index 0000000000..37d22cc965
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/01-current-v11-1440x900.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/02-legacy-v10-feature-1440x900.jpg b/docs/evidence/cpd-sizing-investigation/02-legacy-v10-feature-1440x900.jpg
new file mode 100644
index 0000000000..b91ae46fae
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/02-legacy-v10-feature-1440x900.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/03-current-v11-640x800.jpg b/docs/evidence/cpd-sizing-investigation/03-current-v11-640x800.jpg
new file mode 100644
index 0000000000..46ad713822
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/03-current-v11-640x800.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/04-legacy-v10-feature-640x800.jpg b/docs/evidence/cpd-sizing-investigation/04-legacy-v10-feature-640x800.jpg
new file mode 100644
index 0000000000..3127af3fe9
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/04-legacy-v10-feature-640x800.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/05-current-v11-390x844-mobile-limitation.jpg b/docs/evidence/cpd-sizing-investigation/05-current-v11-390x844-mobile-limitation.jpg
new file mode 100644
index 0000000000..cf85864ea2
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/05-current-v11-390x844-mobile-limitation.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/06-v11-before-sizing-fix-640x800.jpg b/docs/evidence/cpd-sizing-investigation/06-v11-before-sizing-fix-640x800.jpg
new file mode 100644
index 0000000000..21b9d961fa
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/06-v11-before-sizing-fix-640x800.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/07-current-v11-480x800.jpg b/docs/evidence/cpd-sizing-investigation/07-current-v11-480x800.jpg
new file mode 100644
index 0000000000..0dd58231b3
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/07-current-v11-480x800.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/08-legacy-v10-feature-480x800.jpg b/docs/evidence/cpd-sizing-investigation/08-legacy-v10-feature-480x800.jpg
new file mode 100644
index 0000000000..7363d11972
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/08-legacy-v10-feature-480x800.jpg differ
diff --git a/docs/evidence/cpd-sizing-investigation/README.md b/docs/evidence/cpd-sizing-investigation/README.md
new file mode 100644
index 0000000000..472bf8a621
--- /dev/null
+++ b/docs/evidence/cpd-sizing-investigation/README.md
@@ -0,0 +1,107 @@
+# CPD sizing investigation evidence
+
+Evidence captured: 2026-08-23
+
+Docs-only replacement prepared: 2026-08-27
+
+Phone-layout follow-up prepared: 2026-08-28
+
+Report: [`docs/cpd-sizing-investigation.md`](../../cpd-sizing-investigation.md)
+
+This folder contains the evidence for `CPD - Investigate sizing issue`. All visible unit codes, task names, dates, and statuses are synthetic. No production system, live account, student record, token, or secret was used.
+
+## 2026-08-28 phone-layout follow-up
+
+The 390 px images in this folder are retained as historical before-state evidence. The follow-up implementation supersedes their horizontal-panning behavior below 640 px with a full-width vertical project accordion. Its focused automated component evidence verifies:
+
+- scope and global search remain ahead of a collapsed `More filters` control;
+- hidden secondary criteria have a visible active-filter count;
+- project summaries expose task count and nearest deadline/warning;
+- accordion controls have 48 px targets and explicit expanded/controlled state;
+- opening one project closes the prior project;
+- task rows are reused rather than duplicated for responsive markup;
+- base widths use full-width/min-width-zero containment and desktop keeps the fixed 512 px card strip;
+- 320 px fallback states and expanded task actions do not retain fixed-width overflow.
+
+These assertions run in `f-cross-dashboard.component.spec.ts` and `dashboard-list-item.component.spec.ts`. The original deterministic harness and hashes below remain unchanged because they reproduce the historical sizing investigation rather than the new Angular interaction model.
+
+A headless Chrome computed-layout check against the production build confirmed the compiled Tailwind and component media rules:
+
+| Viewport/state                  | Project card | Layout and containment                                                 | Responsive visibility                                                                                    |
+| ------------------------------- | -----------: | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| 320 px, collapsed               |       288 px | Column, 16 px side padding, body `scrollWidth` 320 px                  | Mobile summary visible; secondary filters and project content hidden.                                    |
+| 320 px, expanded                |       288 px | Column, no page-width overflow                                         | Secondary filters and project content visible.                                                           |
+| 390 px, expanded                |       358 px | Column, no page-width overflow                                         | Secondary filters and project content visible.                                                           |
+| 640 px, expanded before resize  |       512 px | Row, 64 px side padding, desktop horizontal overflow contract restored | Mobile heading hidden; desktop title/content visible; secondary wrapper resolves to `display: contents`. |
+| 1024 px, collapsed mobile state |       512 px | Row, desktop horizontal overflow contract retained                     | Desktop title/content and all global filters visible regardless of mobile disclosure state.              |
+
+This check used the built `styles.css` plus the compiled component rules and device-metric overrides at each listed width. In every scenario, document `scrollWidth` was no greater than the emulated viewport width.
+
+## Source baselines
+
+- 10.x CPD feature: `187902747adb3a851bd3294b97b2a9d4a6e8ca95`.
+- Bootstrap removal and repository utility rescaling: `a8ba06c01cd47937249d5780face427143b7dac4`.
+- CPD reintroduction on 11.x: `2c6d2786e9484c57436099d25281aa45fa89453c`.
+- 11.x before the responsive adjustment: `b9386055`.
+- CPD-Q04 responsive adjustment: `854f9ce9ba5f100b0425996c3f5d7e248faa6b32`.
+- Investigation snapshot: `53f1c5532eefc75cadf7834748a5a85c2bc6b3e8`.
+- Docs-only replacement base: `9962e7ea171a2bf6d7a12be50874fa5c7ee77e21`.
+
+## Deterministic comparison set
+
+The numbered JPG files were captured from `synthetic-cpd-comparison.html`. The local-only harness reconstructs the source-derived card, search, padding, gap, and root-font dimensions. It does not load the Angular application or make network requests.
+
+| File                                           | Evidence                                                    |
+| ---------------------------------------------- | ----------------------------------------------------------- |
+| `01-current-v11-1440x900.jpg`                  | Current 11.x, three cards, 1440 x 900.                      |
+| `02-legacy-v10-feature-1440x900.jpg`           | Legacy 10.x-root rendering, three cards, 1440 x 900.        |
+| `03-current-v11-640x800.jpg`                   | Current one-card containment threshold at 640 x 800.        |
+| `04-legacy-v10-feature-640x800.jpg`            | Legacy one-card rendering at 640 x 800.                     |
+| `05-current-v11-390x844-mobile-limitation.jpg` | Historical pre-follow-up phone-width overflow at 390 x 844. |
+| `06-v11-before-sizing-fix-640x800.jpg`         | 11.x immediately before CPD-Q04 at 640 x 800.               |
+| `07-current-v11-480x800.jpg`                   | Current one-card overflow at 480 x 800.                     |
+| `08-legacy-v10-feature-480x800.jpg`            | Legacy one-card fit at 480 x 800.                           |
+
+Supporting files:
+
+- `measurements.txt` records measured widths and overflow results.
+- `source-comparison.txt` records the exact commits, utility classes, and rendered values.
+- `synthetic-cpd-comparison.html` is the reproducible standalone harness.
+- `verification.txt` records the passing repository checks.
+- `SHA256SUMS` provides integrity checks for every evidence artifact.
+
+Verify the evidence integrity from the repository root:
+
+```sh
+cd docs/evidence/cpd-sizing-investigation && shasum -a 256 -c SHA256SUMS
+```
+
+The harness images are deterministic layout reconstructions, not signed-in application screenshots. This limitation is intentional so the root-scale comparison is repeatable and privacy-safe. The exported raster dimensions may exclude browser chrome or scrollbar pixels, so `measurements.txt` is the authoritative record of the captured DOM client and scroll widths.
+
+## CPD-Q04 application capture set
+
+The `before-*.png` and `after-*.png` files preserve the application-level evidence supplied with [PR #34](https://github.com/ontrack-features-t2-2026/doubtfire-web/pull/34). They compare the 11.x state immediately before and after its local responsive adjustment at these viewport widths:
+
+- 1440 x 900
+- 1280 x 900
+- 1024 x 900
+- 768 x 900
+- 390 x 900
+
+These images show that CPD-Q04 changed the card from 544 px to 512 px, the search field from 256 px to 224 px, and the unit-scope selector from fixed width to fluid with a 256 px maximum. They do not represent the original 10.x 10 px root scale; use the numbered comparison set for that question.
+
+## Reproduction
+
+Serve this folder locally:
+
+```sh
+python3 -m http.server 8765 --bind 127.0.0.1
+```
+
+Then open one of these URLs and set the viewport to the size in the filename:
+
+```text
+http://127.0.0.1:8765/synthetic-cpd-comparison.html?mode=legacy
+http://127.0.0.1:8765/synthetic-cpd-comparison.html?mode=pre-fix
+http://127.0.0.1:8765/synthetic-cpd-comparison.html?mode=current
+```
diff --git a/docs/evidence/cpd-sizing-investigation/SHA256SUMS b/docs/evidence/cpd-sizing-investigation/SHA256SUMS
new file mode 100644
index 0000000000..2c7c055543
--- /dev/null
+++ b/docs/evidence/cpd-sizing-investigation/SHA256SUMS
@@ -0,0 +1,22 @@
+3541c299daf8de7adb99565754859d8bc2cd9ec256c054c17bfc89636333bfde  01-current-v11-1440x900.jpg
+ee0a1143926d4b9a3579de9d476da072d128cc2293f9dce97b2dae91151ae0c9  02-legacy-v10-feature-1440x900.jpg
+60cbac1d7fe742399002be8d6ab877b1e1230d53ce862e0a9a2c6c16cb4039cd  03-current-v11-640x800.jpg
+8fe839a0a89510f446754632f86a87e60b4beff899ac2d043e817c15784ba43c  04-legacy-v10-feature-640x800.jpg
+db8327cec1b67dc6d2c16d6524177a2595594562b8e24af1d64a784353e3d49d  05-current-v11-390x844-mobile-limitation.jpg
+35ae6b3d9d02346e79c7dcaed04cc76c97a2e6d6c36672f9290e8b2d00e8786a  06-v11-before-sizing-fix-640x800.jpg
+e9971bcfb40e114a1f5b6668baa12dcf76ec90d7228586b88a445170dd1edd94  07-current-v11-480x800.jpg
+21273f22f715109381eb79da8987e2bea31481050be72c36f0f3364bec90056f  08-legacy-v10-feature-480x800.jpg
+55f5c273610ea0352af980b2c38ee356cba0c0ff201899243c7b5f86b58b71ff  after-1440x900.png
+a7c5db0c304b0266e40c2f3212b706d96f326700ad4007d131e0e90b318698ac  after-1280x900.png
+49b5f9c62579e1f139977ea01c9a4ba37d51cc228c80abf9d66c9e04005ce8f8  after-1024x900.png
+228ed36601f465011c4d4939edca751fcb1612ecc47856a3a335f01f556f031d  after-768x900.png
+da166e582fc08c6dec2c9c8fdadf8fed457e1821b2aed39f6236d0229ab5ba28  after-390x900.png
+0ce6e03138edcba5f8bf2eb5f9b1f556a867ef094bcd9f85aa8946d7d34c41ea  before-1440x900.png
+4a8c27f19f5cf2aaba354001860ea103b4d2f26be000dd87cdf82eae094cab00  before-1280x900.png
+16965adb873827e5d9b30b46340237ef146e74b5efd973add35cd93a93a4ebc2  before-1024x900.png
+96e810d2ff565123384a962e61be7f462204bedb107951c97a29a64ffd9fe920  before-768x900.png
+4b3fdcd12b68fc6a44798f4f58a17881d6c4d30a6c060faec2a46c7bab93486b  before-390x900.png
+14f2b26c5c0d5dfc9a1a528fdbdaa5c404c68fe5b8b18f76c70c5d734136120e  measurements.txt
+e6b3318cadba254378c1ca8d61f167eb22e000712c3882697d9f86282861446f  source-comparison.txt
+ae8ccfaf88912e57259eac2fbe9236382b559493625ad0a63e654917d7e04744  synthetic-cpd-comparison.html
+a1e395fc9c9a76e89815d6064f73ebed35a1152440ab8f414b2c29b4abed0302  verification.txt
diff --git a/docs/evidence/cpd-sizing-investigation/after-1024x900.png b/docs/evidence/cpd-sizing-investigation/after-1024x900.png
new file mode 100644
index 0000000000..8fa3057acc
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/after-1024x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/after-1280x900.png b/docs/evidence/cpd-sizing-investigation/after-1280x900.png
new file mode 100644
index 0000000000..44bbba2e45
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/after-1280x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/after-1440x900.png b/docs/evidence/cpd-sizing-investigation/after-1440x900.png
new file mode 100644
index 0000000000..39b14e7d6f
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/after-1440x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/after-390x900.png b/docs/evidence/cpd-sizing-investigation/after-390x900.png
new file mode 100644
index 0000000000..83b8569b5a
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/after-390x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/after-768x900.png b/docs/evidence/cpd-sizing-investigation/after-768x900.png
new file mode 100644
index 0000000000..62a0638f43
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/after-768x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/before-1024x900.png b/docs/evidence/cpd-sizing-investigation/before-1024x900.png
new file mode 100644
index 0000000000..b9538ee4c7
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/before-1024x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/before-1280x900.png b/docs/evidence/cpd-sizing-investigation/before-1280x900.png
new file mode 100644
index 0000000000..9a94b5e3fb
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/before-1280x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/before-1440x900.png b/docs/evidence/cpd-sizing-investigation/before-1440x900.png
new file mode 100644
index 0000000000..9049d7c61e
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/before-1440x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/before-390x900.png b/docs/evidence/cpd-sizing-investigation/before-390x900.png
new file mode 100644
index 0000000000..dfceffdef7
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/before-390x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/before-768x900.png b/docs/evidence/cpd-sizing-investigation/before-768x900.png
new file mode 100644
index 0000000000..661fd7bd2b
Binary files /dev/null and b/docs/evidence/cpd-sizing-investigation/before-768x900.png differ
diff --git a/docs/evidence/cpd-sizing-investigation/measurements.txt b/docs/evidence/cpd-sizing-investigation/measurements.txt
new file mode 100644
index 0000000000..e78613a02f
--- /dev/null
+++ b/docs/evidence/cpd-sizing-investigation/measurements.txt
@@ -0,0 +1,61 @@
+CPD sizing evidence measurements
+Captured 2026-08-23
+
+Current v11, 1440 x 900, three units
+card: 512 px
+strip client: 1440 px
+strip scroll: 1728 px
+horizontal overflow: yes (expected because three fixed cards require horizontal scrolling)
+
+Legacy v10 feature, 1440 x 900, three units
+card: 340 px
+strip client: 1440 px
+strip scroll: 1440 px
+horizontal overflow: no
+
+Current v11, 640 x 800, one unit
+card: 512 px
+strip client: 640 px
+strip scroll: 640 px
+horizontal overflow: no
+
+Legacy v10 feature, 640 x 800, one unit
+card: 340 px
+strip client: 640 px
+strip scroll: 640 px
+horizontal overflow: no
+
+V11 before sizing fix, 640 x 800, one unit
+card: 544 px
+strip client: 640 px
+strip scroll: 672 px
+horizontal overflow: yes
+
+Current v11, 390 x 844, one unit
+card: 512 px
+strip client: 390 px
+strip scroll: 640 px
+horizontal overflow: yes
+
+Current v11, 480 x 800, one unit
+card: 512 px
+strip client: 480 px
+strip scroll: 640 px
+horizontal overflow: yes
+
+Legacy v10 feature, 480 x 800, one unit
+card: 340 px
+strip client: 480 px
+strip scroll: 480 px
+horizontal overflow: no
+
+Derived one-card containment thresholds
+legacy: 40 + 340 + 40 = 420 px
+v11 pre-fix: 64 + 544 + 64 = 672 px
+current: 64 + 512 + 64 = 640 px
+current versus v11 pre-fix improvement: 32 px
+current versus legacy increase: 220 px (52.4 percent larger footprint)
+
+Derived three-card footprint
+legacy: 40 + (3 x 340) + (2 x 20) + 40 = 1140 px
+current: 64 + (3 x 512) + (2 x 32) + 64 = 1728 px
diff --git a/docs/evidence/cpd-sizing-investigation/source-comparison.txt b/docs/evidence/cpd-sizing-investigation/source-comparison.txt
new file mode 100644
index 0000000000..cacb26e741
--- /dev/null
+++ b/docs/evidence/cpd-sizing-investigation/source-comparison.txt
@@ -0,0 +1,67 @@
+CPD sizing source comparison
+
+Plain 10.0.x
+commit: c57c1c3206073f7b45fba69eefe9875985a4bee9
+result: src/app/dashboard/f-cross-dashboard.component.html does not exist
+
+Legacy Feature/Cross-Unit based on 10.0.x
+commit: 187902747adb3a851bd3294b97b2a9d4a6e8ca95
+package version: 10.0.1-29
+component classes:
+  dashboard strip: panel-full-screen flex flex-row gap-8 px-16 overflow-x-auto
+  unit card: flex flex-col h-full w-[34rem] shadow
+  search: h-full w-64 p-2 px-4 text-md rounded-md
+rendering context:
+  Bootstrap 3.4 sets html font-size to 10px
+rendered sizes:
+  px-16 = 40 px each side
+  gap-8 = 20 px
+  w-[34rem] = 340 px
+  w-64 = 160 px
+
+Bootstrap removal
+commit: a8ba06c01cd47937249d5780face427143b7dac4
+message: refactor: remove bootstrap and grunt packages
+recorded migration rule: Tailwind spacing, sizing, and font classes render 60 percent larger after
+  Bootstrap removal, so existing utilities were reduced to 0.625 of their old scale
+
+CPD skeleton reintroduction
+commit: 2c6d2786e9484c57436099d25281aa45fa89453c
+finding: copied the legacy CPD utility classes after Bootstrap had been removed, reintroducing the
+  unscaled w-[34rem], w-64, px-16, gap-8, gap-4, and p-4 values
+
+Current feature/cross-unit docs-only replacement base
+commit: 9962e7ea171a2bf6d7a12be50874fa5c7ee77e21
+package version: 11.0.0-45
+component classes:
+  dashboard strip: flex min-h-0 flex-1 flex-row gap-8 overflow-x-auto px-16 pb-4
+  unit card: flex h-full w-128 shrink-0 flex-col shadow
+  search: text-md h-full w-56 rounded-md p-2 px-4
+  unit scope: w-full max-w-64
+rendering context:
+  browser default html font-size is 16 px
+rendered sizes:
+  px-16 = 64 px each side
+  gap-8 = 32 px
+  w-128 = 512 px
+  w-56 = 224 px
+
+Responsive sizing fix
+commit: 854f9ce9ba5f100b0425996c3f5d7e248faa6b32
+changes:
+  unit scope: w-64 -> w-full max-w-64
+  unit card: w-136 -> w-128
+  search: w-64 -> w-56
+rendered effect at 16 px root:
+  card: 544 px -> 512 px
+  search: 256 px -> 224 px
+
+Comparison to legacy rendered values
+  card: 340 px -> 512 px (+172 px, +50.6 percent)
+  search: 160 px -> 224 px (+64 px, +40 percent)
+  side padding: 40 px -> 64 px (+60 percent)
+  inter-card gap: 20 px -> 32 px (+60 percent)
+
+Sizing fix conflict resolution
+commit: 09b3d248f48b92b7b4a5cb58434eb9c3d0944017
+result: retained w-full max-w-64, w-128, and w-56 while integrating date controls
diff --git a/docs/evidence/cpd-sizing-investigation/synthetic-cpd-comparison.html b/docs/evidence/cpd-sizing-investigation/synthetic-cpd-comparison.html
new file mode 100644
index 0000000000..482a360bd1
--- /dev/null
+++ b/docs/evidence/cpd-sizing-investigation/synthetic-cpd-comparison.html
@@ -0,0 +1,500 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>CPD sizing investigation - synthetic comparison</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family: Arial, Helvetica, sans-serif;
+        color: #252525;
+        background: #ffffff;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      body {
+        margin: 0;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .evidence-header {
+        display: flex;
+        height: 64px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 0 28px;
+        color: #ffffff;
+        background: #24245c;
+      }
+
+      .evidence-header h1 {
+        margin: 0;
+        overflow: hidden;
+        font-size: 20px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .evidence-header p {
+        margin: 0;
+        flex: 0 0 auto;
+        font-size: 13px;
+      }
+
+      .dashboard {
+        display: flex;
+        height: calc(100vh - 64px);
+        min-height: 0;
+        flex-direction: column;
+      }
+
+      .toolbar {
+        display: none;
+        flex: 0 0 auto;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        gap: 16px;
+        padding: 16px 64px 0;
+      }
+
+      .current .toolbar,
+      .pre-fix .toolbar {
+        display: flex;
+      }
+
+      .field {
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        gap: 5px;
+        padding-bottom: 20px;
+      }
+
+      .scope {
+        width: 100%;
+        max-width: 256px;
+      }
+
+      label {
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      select,
+      input[type='date'] {
+        height: 48px;
+        border: 1px solid #8d8d8d;
+        border-radius: 4px;
+        background: #ffffff;
+        padding: 0 12px;
+        font: inherit;
+      }
+
+      .clear-button {
+        height: 48px;
+        margin-bottom: 20px;
+        border: 1px solid #8d8d8d;
+        border-radius: 4px;
+        background: #ffffff;
+        padding: 0 16px;
+        color: #777777;
+        font-weight: 600;
+      }
+
+      .unit-strip {
+        display: flex;
+        min-height: 0;
+        flex: 1 1 auto;
+        gap: 32px;
+        overflow-x: auto;
+        padding: 0 64px 16px;
+      }
+
+      .legacy .unit-strip {
+        gap: 20px;
+        padding-right: 40px;
+        padding-bottom: 10px;
+        padding-left: 40px;
+        padding-top: 0;
+      }
+
+      .unit-card {
+        display: flex;
+        height: 100%;
+        flex: 0 0 auto;
+        flex-direction: column;
+        overflow: hidden;
+        border-radius: 8px 8px 0 0;
+        background: #ffffff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
+      }
+
+      .legacy .unit-card {
+        width: 340px;
+      }
+
+      .pre-fix .unit-card {
+        width: 544px;
+      }
+
+      .current .unit-card {
+        width: 512px;
+      }
+
+      .unit-header {
+        display: flex;
+        width: 100%;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: 16px;
+        padding: 16px;
+        color: #ffffff;
+        background: #3939ff;
+      }
+
+      .legacy .unit-header {
+        gap: 10px;
+        padding: 10px;
+      }
+
+      .unit-title {
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+
+      .unit-title h2,
+      .unit-title p {
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .unit-title h2 {
+        font-size: 20px;
+      }
+
+      .unit-title p {
+        margin-top: 5px;
+        font-size: 16px;
+      }
+
+      .legacy .unit-title p {
+        display: none;
+      }
+
+      .task-search {
+        height: 42px;
+        flex: 0 0 auto;
+        border: 0;
+        border-radius: 6px;
+        padding: 8px 16px;
+        font: inherit;
+      }
+
+      .legacy .task-search {
+        width: 160px;
+      }
+
+      .pre-fix .task-search {
+        width: 256px;
+      }
+
+      .current .task-search {
+        width: 224px;
+      }
+
+      .icon-button {
+        display: grid;
+        width: 42px;
+        height: 42px;
+        flex: 0 0 auto;
+        place-items: center;
+        border: 0;
+        border-radius: 50%;
+        color: #ffffff;
+        background: transparent;
+        font-size: 11px;
+        font-weight: 700;
+      }
+
+      .legacy .icon-button {
+        width: 24px;
+        height: 24px;
+        overflow: hidden;
+        font-size: 0;
+      }
+
+      .legacy .icon-button::after {
+        content: 'S';
+        font-size: 11px;
+      }
+
+      .legacy .icon-button:last-child::after {
+        content: 'F';
+      }
+
+      .task-list {
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      .task {
+        display: flex;
+        min-height: 86px;
+        border-bottom: 1px solid #d1d5db;
+      }
+
+      .status {
+        width: 16px;
+        flex: 0 0 auto;
+        margin-right: 24px;
+      }
+
+      .task-copy {
+        min-width: 0;
+        flex: 1 1 auto;
+        padding: 16px 0;
+      }
+
+      .task-copy h3,
+      .task-copy p {
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .task-copy h3 {
+        margin-bottom: 6px;
+        font-size: 17px;
+      }
+
+      .task-copy p {
+        color: #555555;
+        font-size: 14px;
+      }
+
+      .task-action {
+        width: 54px;
+        flex: 0 0 auto;
+        border: 0;
+        background: transparent;
+        color: #333333;
+        font-size: 24px;
+      }
+
+      .status-red {
+        background: #f44336;
+      }
+
+      .status-orange {
+        background: #ff9800;
+      }
+
+      .status-green {
+        background: #4caf50;
+      }
+
+      .status-blue {
+        background: #2196f3;
+      }
+
+      .measurement {
+        position: fixed;
+        right: 12px;
+        bottom: 12px;
+        z-index: 2;
+        border: 1px solid #c5c5c5;
+        border-radius: 5px;
+        background: rgba(255, 255, 255, 0.94);
+        padding: 7px 10px;
+        color: #333333;
+        font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      @media (max-width: 639px) {
+        .evidence-header {
+          padding: 0 16px;
+        }
+
+        .evidence-header p {
+          display: none;
+        }
+
+        .toolbar {
+          padding-right: 64px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header class="evidence-header">
+      <h1 id="evidence-title">Cross-project dashboard sizing evidence</h1>
+      <p>Repository sample data only</p>
+    </header>
+
+    <main class="dashboard current" id="dashboard">
+      <section class="toolbar" aria-label="Dashboard filters">
+        <div class="field scope">
+          <label for="unit-scope">Unit scope</label>
+          <select id="unit-scope">
+            <option>Active units</option>
+            <option>Previous units</option>
+            <option>All units</option>
+          </select>
+        </div>
+        <div class="field">
+          <label for="start-date">Start date</label>
+          <input id="start-date" type="date" value="2026-08-01" />
+        </div>
+        <div class="field">
+          <label for="end-date">End date</label>
+          <input id="end-date" type="date" value="2026-10-31" />
+        </div>
+        <button class="clear-button" type="button">Clear dates</button>
+      </section>
+
+      <section class="unit-strip" aria-label="Synthetic unit cards">
+        <article class="unit-card">
+          <div class="unit-header">
+            <div class="unit-title">
+              <h2>COS10001</h2>
+              <p>Active</p>
+            </div>
+            <input class="task-search" type="search" placeholder="Search tasks..." />
+            <button class="icon-button" type="button">Sort</button>
+            <button class="icon-button" type="button">Filter</button>
+          </div>
+          <div class="task-list">
+            <div class="task">
+              <div class="status status-red"></div>
+              <div class="task-copy">
+                <h3>Getting started reflection</h3>
+                <p>1.1P - Pass Task</p>
+              </div>
+              <button class="task-action" type="button">v</button>
+            </div>
+            <div class="task">
+              <div class="status status-orange"></div>
+              <div class="task-copy">
+                <h3>Professional practice plan</h3>
+                <p>2.1P - Pass Task</p>
+              </div>
+              <button class="task-action" type="button">v</button>
+            </div>
+            <div class="task">
+              <div class="status status-blue"></div>
+              <div class="task-copy">
+                <h3>Evidence portfolio</h3>
+                <p>3.1C - Credit Task</p>
+              </div>
+              <button class="task-action" type="button">v</button>
+            </div>
+          </div>
+        </article>
+
+        <article class="unit-card">
+          <div class="unit-header">
+            <div class="unit-title">
+              <h2>COS20007</h2>
+              <p>Active</p>
+            </div>
+            <input class="task-search" type="search" placeholder="Search tasks..." />
+            <button class="icon-button" type="button">Sort</button>
+            <button class="icon-button" type="button">Filter</button>
+          </div>
+          <div class="task-list">
+            <div class="task">
+              <div class="status status-green"></div>
+              <div class="task-copy">
+                <h3>Communication report</h3>
+                <p>4.1P - Pass Task</p>
+              </div>
+              <button class="task-action" type="button">v</button>
+            </div>
+            <div class="task">
+              <div class="status status-green"></div>
+              <div class="task-copy">
+                <h3>Team contribution review</h3>
+                <p>5.1P - Pass Task</p>
+              </div>
+              <button class="task-action" type="button">v</button>
+            </div>
+          </div>
+        </article>
+
+        <article class="unit-card">
+          <div class="unit-header">
+            <div class="unit-title">
+              <h2>COS30046</h2>
+              <p>Active</p>
+            </div>
+            <input class="task-search" type="search" placeholder="Search tasks..." />
+            <button class="icon-button" type="button">Sort</button>
+            <button class="icon-button" type="button">Filter</button>
+          </div>
+          <div class="task-list">
+            <div class="task">
+              <div class="status status-blue"></div>
+              <div class="task-copy">
+                <h3>Capstone project proposal</h3>
+                <p>6.1D - Distinction Task</p>
+              </div>
+              <button class="task-action" type="button">v</button>
+            </div>
+          </div>
+        </article>
+      </section>
+    </main>
+
+    <output class="measurement" id="measurement"></output>
+
+    <script>
+      const parameters = new URLSearchParams(window.location.search);
+      const requestedMode = parameters.get('mode');
+      const mode = requestedMode === 'legacy' || requestedMode === 'pre-fix' ? requestedMode : 'current';
+      const unitCount = Math.max(1, Math.min(3, Number(parameters.get('units') || 3)));
+      const dashboard = document.getElementById('dashboard');
+      const title = document.getElementById('evidence-title');
+      const measurement = document.getElementById('measurement');
+
+      dashboard.className = `dashboard ${mode}`;
+      document.querySelectorAll('.unit-card').forEach((card, index) => {
+        card.hidden = index >= unitCount;
+      });
+      title.textContent =
+        mode === 'legacy'
+          ? 'Legacy v10 - 34rem at 10px root = 340px'
+          : mode === 'pre-fix'
+            ? 'V11 before fix - 34rem at 16px root = 544px'
+            : 'Current v11 - 32rem at 16px root = 512px';
+
+      const updateMeasurement = () => {
+        const card = document.querySelector('.unit-card');
+        const strip = document.querySelector('.unit-strip');
+        measurement.textContent = [
+          `viewport: ${window.innerWidth} x ${window.innerHeight}`,
+          `card: ${Math.round(card.getBoundingClientRect().width)} px`,
+          `strip client: ${strip.clientWidth} px`,
+          `strip scroll: ${strip.scrollWidth} px`,
+          `horizontal overflow: ${strip.scrollWidth > strip.clientWidth ? 'yes' : 'no'}`,
+        ].join('\n');
+      };
+
+      updateMeasurement();
+      window.addEventListener('resize', updateMeasurement);
+    </script>
+  </body>
+</html>
diff --git a/docs/evidence/cpd-sizing-investigation/verification.txt b/docs/evidence/cpd-sizing-investigation/verification.txt
new file mode 100644
index 0000000000..e21fdc7bac
--- /dev/null
+++ b/docs/evidence/cpd-sizing-investigation/verification.txt
@@ -0,0 +1,31 @@
+CPD sizing investigation docs-only replacement verification
+Date: 2026-08-27
+Branch: docs/cpd-sizing-investigation
+Target: feature/cross-unit at 9962e7ea171a2bf6d7a12be50874fa5c7ee77e21
+
+1. npm run lint
+   Result: PASS
+   Detail: All files pass linting.
+
+2. npm run typecheck
+   Result: PASS
+   Detail: Angular compiler typecheck exited with code 0.
+
+3. npm run test:ci
+   Result: PASS
+   Detail: 68 test files passed. 168 tests passed and 1 existing test is marked todo.
+
+4. CI=true npm run build -- --no-progress
+   Result: PASS
+   Detail: Application bundle generation completed successfully.
+
+5. git diff --check
+   Result: PASS
+   Detail: No whitespace errors.
+
+6. Evidence integrity
+   Result: PASS
+   Detail: Every file listed in SHA256SUMS matches its recorded digest.
+
+The replacement diff contains only 25 files under docs/. It changes no application source,
+configuration, dependency, or workflow file.
diff --git a/docs/images/PPI-task-sheet-widget-v1.png b/docs/images/PPI-task-sheet-widget-v1.png
new file mode 100644
index 0000000000..010199c6c6
Binary files /dev/null and b/docs/images/PPI-task-sheet-widget-v1.png differ
diff --git a/docs/images/survey-distribution-chart.png b/docs/images/survey-distribution-chart.png
new file mode 100644
index 0000000000..1704943d51
Binary files /dev/null and b/docs/images/survey-distribution-chart.png differ
diff --git a/docs/images/teams-review-doc.png b/docs/images/teams-review-doc.png
new file mode 100644
index 0000000000..d7a12d6dd3
Binary files /dev/null and b/docs/images/teams-review-doc.png differ
diff --git a/docs/ppi-f02-unit-summary-handover.md b/docs/ppi-f02-unit-summary-handover.md
new file mode 100644
index 0000000000..d459b84df0
--- /dev/null
+++ b/docs/ppi-f02-unit-summary-handover.md
@@ -0,0 +1,127 @@
+# PPI-F02 Unit Peer Progress Summary Handover
+
+## Delivered scope
+
+PPI-F02 adds a reusable mock-backed unit-level Peer Progress Indicator summary
+to the student Progress Dashboard.
+
+The component displays:
+
+- the student's own unit progress;
+- a separately labelled anonymous cohort aggregate;
+- genuine zero progress;
+- small-cohort suppression;
+- unavailable data;
+- stale data;
+- disabled, loading and error states.
+
+The presentational component receives the existing typed
+`PeerProgressUnitSummaryViewModel` through an input.
+
+It does not make an HTTP request, create another PPI service, or calculate its
+own percentage formula.
+
+## Existing PPI work reused
+
+This implementation reuses:
+
+- `PeerProgressUnitSummary`;
+- `PeerProgressUnitSummaryViewModel`;
+- `resolvePeerProgressUnitSummaryState`;
+- `PeerProgressIndicatorService.getDemoUnitSummary` (only while the local demo-mode switch is on);
+- `calculateCompletionPercentage`.
+
+The existing task-sheet PPI widget and Progress Burndown implementation were
+not modified.
+
+## Privacy boundary
+
+The component does not display peer names, student IDs, project IDs, individual
+task statuses, marks, feedback, rankings, or raw cohort counts.
+
+Suppressed, unavailable and stale states remove the anonymous cohort percentage
+before it reaches the component display.
+
+Disabled, loading and error states do not retain percentages that could be
+mistaken for current information.
+
+A real 0% remains visibly different from unavailable or suppressed data.
+
+The unit summary is not displayed when staff are viewing another student's
+project.
+
+## Remaining live unit-level API requirement
+
+PPI-F02 does not deliver a live backend unit-summary endpoint.
+
+A future backend endpoint and frontend adapter should:
+
+- authenticate the caller;
+- derive student identity from the authenticated session;
+- **derive the target grade server-side from the student's own project, and
+  never accept one from the browser.** `PeerProgressIndicatorService`'s mock
+  takes a caller-supplied `targetGrade` and its own comment warns that this
+  must not become the design of a live endpoint. A unit endpoint that trusts a
+  browser-supplied grade lets a student read another cohort's aggregate;
+- authorise access to the requested unit/project;
+- enforce minimum-cohort suppression server-side;
+- **add a `student_percentage` field.** The task-level contract shipped in
+  doubtfire-api#16 does not carry one, so the card computes it in the browser
+  today. That is a stopgap, not the target design;
+- **quantise the student percentage into the same buckets as the cohort
+  percentage.** doubtfire-api#16 quantises the cohort figure to 10-point
+  buckets. An exact student number beside a bucketed cohort number invites a
+  comparison neither supports;
+- avoid peer identities and raw cohort counts;
+- avoid marks, feedback and individual task-state information;
+- expose feature-enabled, suppression, stale/unavailable and timestamp state;
+- use appropriate audit logging without recording sensitive student content.
+
+The future frontend adapter can replace the mock call inside
+`ProgressDashboardComponent.loadPeerProgressUnitSummary()` without redesigning
+the presentational component.
+
+### Task-level adapter nullability
+
+doubtfire-api#16 returns `null` for `last_updated_at` and `target_grade` in
+several documented states. The task-level live adapter now maps those values to
+`PeerProgressIndicator.lastUpdatedAt: string | null` and
+`PeerProgressIndicator.targetGrade: number | null`.
+
+### The mock must not reach a production build
+
+The unit-level summary in this document remains mock-backed and is gated on
+`environment.production`, so a built application shows the unavailable state
+rather than a fabricated percentage. The task-sheet `f-ppi-widget` now uses the
+authorised project/task API route and does not render a fixture in production.
+
+## Validation
+
+Targeted component tests cover:
+
+- normal progress;
+- genuine zero;
+- small-cohort suppression;
+- unavailable data;
+- disabled data;
+- stale data;
+- changed component inputs.
+
+Final validation should include:
+
+- TypeScript typecheck;
+- targeted PPI-F02 tests;
+- lint;
+- full frontend tests;
+- build;
+- `git diff --check`;
+- normal desktop screenshot;
+- normal narrow-screen screenshot;
+- suppressed or unavailable screenshot.
+
+## Attribution and takeover
+
+PPI-F02 builds on the shared unit-summary foundation merged through PR #31.
+
+Any earlier work from the original assignee should remain credited and preserved.
+The takeover message and branch/PR search should be retained as project evidence.
diff --git a/docs/ppi-help-text-pack.md b/docs/ppi-help-text-pack.md
new file mode 100644
index 0000000000..4d388814e0
--- /dev/null
+++ b/docs/ppi-help-text-pack.md
@@ -0,0 +1,299 @@
+# PPI-D01: Peer Progress Help Text and Privacy Copy
+
+**Ticket:** PPI-D01 - Write the peer-comparison explanation, privacy limits and help text
+**Branch:** `docs/ppi-help-privacy`
+**Scope:** Documentation and copy specification only. No production widget logic, API
+behaviour or data flow is changed by this document.
+
+**Implementation status:**
+
+- The task-level location map is based on the current PPI widget.
+- The unit-level copy is planned for the mock-backed PPI-F02 proof of concept.
+- The unit-level section does not claim that a live unit-level component or API already
+  exists.
+- Labels, help controls and expanded explanations still require a separate frontend
+  implementation.
+
+## Acceptance criteria coverage
+
+| Requirement                                                             | Result | Evidence                                                             |
+| ----------------------------------------------------------------------- | ------ | -------------------------------------------------------------------- |
+| Label, tooltip and expanded explanation for the task-level view         | Met    | Section 3                                                            |
+| Label, tooltip and expanded explanation for the planned unit-level view | Met    | Section 4                                                            |
+| Explain that the result is an anonymous aggregate and not a ranking     | Met    | Section 1 and all visible-value states                               |
+| Cover suppression, unavailable and stale data                           | Met    | Sections 3 and 4                                                     |
+| Use plain language without shame or pressure                            | Met    | All copy avoids ahead, behind, winning, losing and judgement wording |
+| Map copy to exact current or planned UI locations                       | Met    | Section 2                                                            |
+| Include one annotated screenshot or wireframe                           | Met    | `assets/ppi/ppi-d01-copy-location-wireframe.svg`                     |
+
+## 1. Shared privacy and wellbeing rules
+
+These rules apply to both views:
+
+1. A group result is shown as one combined percentage.
+2. It must not display names, student IDs, project IDs, individual results, individual
+   task statuses, marks, feedback, raw group size or rankings.
+3. A displayed `0%` is a real privacy-bucket value. It must not be presented as missing,
+   suppressed or unavailable data, but it may represent a small percentage that rounds to zero.
+4. A suppressed result explains that the group value is hidden for privacy without
+   revealing the exact group size.
+5. Unavailable and stale states describe a data or timing condition. They must not sound
+   like feedback about the student's own work.
+6. The wording must not describe the student as ahead, behind, better or worse than
+   anyone else.
+7. The percentage is not a predicted grade or a judgement about the student's chance of
+   receiving a grade.
+8. Student-facing text must not expose technical errors, internal identifiers or backend
+   details.
+
+This wording describes the intended display boundary. Backend authorisation, aggregation
+and small-group suppression must still enforce that boundary.
+
+## 2. Copy placement and accessibility
+
+### 2.1 Current task-level location
+
+- **Widget template:** `src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.html`
+- **Parent mount location:** `src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.html`
+- **State resolver:** `src/app/api/models/peer-progress-indicator-state.ts`
+- **Current screen location:** inside the task description card, after the task date
+  controls.
+- **State locations:** use the durable template cases rather than relying only on line
+  numbers:
+  - `@case ('success')`
+  - `@case ('no-data')`
+  - `@case ('hidden')`
+  - `@case ('unavailable')`
+  - `@case ('stale')`
+  - `@case ('disabled')`
+
+The task-level copy should use the three numbered locations in the wireframe:
+
+1. A visible label naming the information.
+2. A short tooltip or help summary opened from an accessible help control.
+3. An expanded explanation in a popover, panel or other accessible disclosure.
+
+### 2.2 Planned unit-level location
+
+The unit-level copy is planned for the PPI-F02 mock-backed proof of concept. It should use
+the same three locations:
+
+1. **Label:** at the top of the unit progress summary card.
+2. **Tooltip or short help text:** opened from the card's help control.
+3. **Expanded explanation:** below the two progress values or inside an accessible
+   disclosure panel.
+
+The planned card should keep these values separate:
+
+- **My progress**
+- **Anonymous group progress**
+
+The earlier unit-level wireframe used one anonymous Ready-for-Feedback value. The current
+PPI-F02 scope requires the student's own progress and the anonymous group value to be
+separately labelled. The annotated wireframe below keeps the earlier simple card style
+while showing the current two-value boundary.
+
+![Annotated PPI copy-location wireframe](assets/ppi/ppi-d01-copy-location-wireframe.svg)
+
+### 2.3 Accessibility requirement for implementation
+
+The future help control must:
+
+- be a real button with a useful accessible name;
+- work with keyboard, touch, and screen-reader use;
+- not depend on mouse hover alone;
+- expose expanded text in a predictable reading and focus order;
+- close without trapping keyboard focus;
+- remain understandable without colour;
+- avoid using an icon as the only explanation.
+
+Suggested accessible name:
+
+> About peer progress
+
+## 3. Task-level copy
+
+### 3.1 Normal result
+
+**Template state:** `@case ('success')`
+
+- **Label:** Peer task progress
+- **Tooltip or short help text:** Shows the percentage of students in your
+  privacy-protected target-grade group who have submitted this task.
+- **Expanded explanation:** This is one combined percentage for students aiming for the
+  same target grade. It does not show names, individual results, raw group size or
+  rankings. It does not assess your own work or predict your grade.
+
+### 3.2 Rounded zero result
+
+**Template state:** `@case ('no-data')`
+
+- **Label:** Peer task progress
+- **Tooltip or short help text:** The privacy-protected group percentage currently rounds
+  to 0%. This is a displayed value, not missing data.
+- **Expanded explanation:** The API rounds percentages into privacy-safe bands, so 0% may
+  include a small number of submissions. It is not feedback about your own progress. The
+  displayed percentage may change as submissions are made.
+
+### 3.3 Small-group suppression
+
+**Template state:** `@case ('hidden')`
+
+- **Label:** Peer task progress hidden
+- **Tooltip or short help text:** The group percentage is hidden because the group is too
+  small to show safely.
+- **Expanded explanation:** OnTrack hides the group percentage to protect student
+  privacy. It does not show the hidden value, exact group size, names or individual
+  results. This is a privacy safeguard, not an error or a judgement about your work.
+
+### 3.4 Unavailable data
+
+**Template state:** `@case ('unavailable')`
+
+- **Label:** Peer task progress unavailable
+- **Tooltip or short help text:** Current group progress is not available. This does not
+  describe your own progress.
+- **Expanded explanation:** OnTrack cannot show a current group percentage for this task
+  right now. This is a data-availability state, not feedback about your work. Check again
+  later.
+
+### 3.5 Stale data
+
+**Template state:** `@case ('stale')`
+
+- **Label:** Peer task progress not current
+- **Tooltip or short help text:** The group value has not refreshed recently, so it is not
+  shown as current.
+- **Expanded explanation:** The latest group percentage may be out of date. OnTrack does
+  not present it as current because that could be misleading. This is a timing issue, not
+  feedback about your own progress.
+
+### 3.6 Feature disabled
+
+**Template state:** `@case ('disabled')`
+
+- **Label:** Peer task progress off
+- **Tooltip or short help text:** Peer progress is turned off for this unit.
+- **Expanded explanation:** Peer comparison is not shown for this unit. This message only
+  describes whether the feature is available. It is not a judgement about your work,
+  submission or progress.
+
+### 3.7 Supporting loading and error copy
+
+These states already exist in the task-level widget and should use the same accessible
+help pattern when the copy is implemented.
+
+- **Loading:** Loading peer progress.
+- **Error:** Could not load peer progress. Please try again.
+
+The error message must remain generic and must not reveal peer details, internal IDs,
+authorisation rules or backend errors.
+
+## 4. Planned unit-level copy
+
+This section is design-ready copy for the mock-backed PPI-F02 proof of concept. It is not a
+claim that live unit-level data has been delivered.
+
+### 4.1 Normal result
+
+- **Label:** Unit progress overview
+- **Tooltip or short help text:** Shows your own unit progress beside one
+  privacy-protected group percentage.
+- **Expanded explanation:** My progress and Anonymous group progress are separate values.
+  They use the agreed unit-progress measure. The group value is one combined percentage
+  and does not show names, individual results, raw group size, marks, feedback or
+  rankings.
+
+### 4.2 Rounded zero group result
+
+- **Label:** Unit progress overview
+- **Tooltip or short help text:** Anonymous group progress currently rounds to 0%. This is
+  a displayed value, not missing data.
+- **Expanded explanation:** Your own progress remains separate from the group result. A
+  displayed group value of 0% may include a small value that rounds to zero. It is not
+  feedback about your work and does not predict your grade.
+
+### 4.3 Small-group suppression
+
+- **Label:** Anonymous group progress hidden
+- **Tooltip or short help text:** The group percentage is hidden because the group is too
+  small to show safely.
+- **Expanded explanation:** Your own progress may still be shown when it is available, but
+  the anonymous group percentage is hidden for privacy. OnTrack does not show the hidden
+  percentage, exact group size, names or individual results.
+
+### 4.4 Unavailable group data
+
+- **Label:** Anonymous group progress unavailable
+- **Tooltip or short help text:** Your own progress may remain visible, but current group
+  progress is unavailable.
+- **Expanded explanation:** OnTrack cannot show a current anonymous group percentage
+  right now. This does not change or assess your own progress. Check again later.
+
+### 4.5 Stale group data
+
+- **Label:** Anonymous group progress not current
+- **Tooltip or short help text:** The group value has not refreshed recently and is not
+  shown as current.
+- **Expanded explanation:** The latest anonymous group percentage may be out of date.
+  OnTrack does not present it as current because that could be misleading. Your own
+  progress remains a separate value.
+
+### 4.6 Feature disabled
+
+- **Label:** Unit peer progress off
+- **Tooltip or short help text:** Peer progress is turned off for this unit.
+- **Expanded explanation:** The unit-level peer comparison is not shown. This message only
+  describes feature availability. It is not feedback about your work, submission or
+  progress.
+
+### 4.7 Supporting loading and error copy
+
+- **Loading:** Loading unit progress.
+- **Error:** Could not load unit progress. Please try again.
+
+A failed request or unit change must not leave the previous unit's anonymous group value
+visible as though it were current.
+
+## 5. Implementation status and handover
+
+| Item                                              | Status after PPI-D01                                 |
+| ------------------------------------------------- | ---------------------------------------------------- |
+| Task-level state copy                             | Complete in this document                            |
+| Task-level label, help control and expanded panel | Planned frontend implementation                      |
+| Unit-level state copy                             | Complete as planned PPI-F02 copy                     |
+| Unit-level component                              | Separate PPI-F02 work                                |
+| Live unit-level API                               | Future work and not claimed here                     |
+| Annotated copy-location evidence                  | Complete in the sanitised SVG wireframe              |
+| Privacy and authorisation enforcement             | Separate backend and security testing responsibility |
+
+### Known implementation follow-ups
+
+1. The current task-level template contains a visible message but no dedicated accessible
+   help control or expanded explanation location.
+2. The genuine zero message is currently handled differently from several other states.
+   A frontend follow-up should decide whether all state messages use one consistent
+   source.
+3. Stale and unavailable states need clearly different visible messages when this copy is
+   implemented.
+4. The disabled state must remain neutral. The frontend must not claim that a particular
+   role or person disabled the feature unless the trusted response explicitly supplies
+   that information.
+5. The exact unit-progress metric must be confirmed by the implementation and calculation
+   tickets before the planned unit-level wording is wired into production.
+
+## 6. Evidence and attribution
+
+- Original PPI-D01 task-level research and copy:
+  - David Tenni
+  - commits `c98e044` and `c5b379d`
+- Earlier unit-level visual baseline and usability work:
+  - Umeda Ranuluge
+  - used as a design reference without copying personal identifying details
+- Acceptance-criteria completion, privacy wording correction, sanitised annotated
+  wireframe and handover:
+  - Maple Fox
+- Documentation:
+  - `docs/ppi-help-text-pack.md`
+- Annotated wireframe:
+  - `docs/assets/ppi/ppi-d01-copy-location-wireframe.svg`
diff --git a/docs/service-worker.md b/docs/service-worker.md
new file mode 100644
index 0000000000..818a6c5579
--- /dev/null
+++ b/docs/service-worker.md
@@ -0,0 +1,147 @@
+# The service worker in development
+
+Push notifications are received by a service worker. Until MN-F03, the service
+worker only ran in production builds, so **no push could ever arrive while
+developing** and nobody could test any push work.
+
+This describes what changed, what it costs, and how to get out of trouble.
+
+## What changed
+
+Two halves. Doing only one of them leaves the app worse than before.
+
+1. **`angular.json`** — the `development` build configuration now sets
+   `"serviceWorker": "ngsw-config.json"`. Before this it was set only on
+   `production`, so a development build never generated `ngsw-worker.js` at all.
+2. **`doubtfire-angular.module.ts`** — `ServiceWorkerModule.register` now reads
+   `environment.production || environment.enableServiceWorker` instead of
+   `environment.production`.
+
+Order matters. Flipping the flag without the first half leaves the app asking the
+server for a file that does not exist. That fails quietly and looks exactly like
+push being broken.
+
+## Turning it off
+
+`src/environments/environment.ts`:
+
+```ts
+enableServiceWorker: false,
+```
+
+Then reload with the worker cleared (below). Production is unaffected either way,
+because `production: true` already enables it.
+
+## Which build configuration is actually in use
+
+`package.json` runs `ng serve --configuration $NODE_ENV`, so **the configuration
+depends on an environment variable and is not necessarily `development`.**
+"I added it to `development`" does not mean `development` is the one running.
+
+Check what `$NODE_ENV` is:
+
+    docker exec doubtfire-web printenv NODE_ENV
+
+In the Docker stack it is `docker`. That is a **serve** configuration in
+`angular.json`, and it maps to the `development` **build** configuration:
+
+```json
+"docker": { "buildTarget": "doubtfire:build:development" }
+```
+
+So the change does apply in Docker. If you add another serve configuration, point
+it at a build configuration that has `serviceWorker` set, or push silently stops
+working for anyone using it.
+
+## Registration is delayed six seconds
+
+`doubtfire-angular.module.ts` sets:
+
+```ts
+registrationStrategy: () => interval(6000).pipe(take(1)),
+```
+
+The worker registers **six seconds after bootstrap**, not at bootstrap. Anything
+that asks for the service worker during app init finds nothing there. Wait on
+`navigator.serviceWorker.ready` rather than assuming it exists — MN-C01 depends
+on this.
+
+## What it costs
+
+**Measured** on the Docker stack, Angular 22, `ng serve`:
+
+- `ngsw-worker.js` and `ngsw.json` are served (they were 404 before). The dev
+  server generates them, so no separate `ng build` step is needed.
+- `ngsw.json` lists 158 hashed files, and the `app` asset group prefetches
+  `/index.html`, `/main.js`, `/styles.css`, `/polyfills.js` and `/scripts.js`.
+  **The whole app bundle is cached.**
+- A source change does regenerate the manifest: after editing a file under `src/`
+  the `/main.js` hash in `ngsw.json` changed, so the worker can see there is an
+  update.
+- API calls are not cached. The `api` data group in `ngsw-config.json` uses
+  `"strategy": "freshness"` with `maxAge: 0u` and `maxSize: 0`.
+
+**Confirmed in a browser** on 2026-08-02: the worker registers, and a push sent
+from the api arrives as a desktop notification. So the two halves above are
+enough to make push work in development.
+
+What still has not been measured is how live reload behaves once the worker is
+serving from its cache over a long session. Angular's worker normally picks up a
+new version on a later page load rather than the current one, which would mean
+**after saving a file you reload and still see the old code**. Treat that as
+expected until somebody hits it.
+
+The cost to watch for is stale app code, not stale data — API responses are not
+cached. If something you just changed is not showing up, clear the worker before
+assuming the change is wrong.
+
+## Push subscription rotation
+
+Angular 22's worker handles the browser's `pushsubscriptionchange` event and
+forwards it through `SwPush.pushSubscriptionChanges`. The app starts that
+listener with its other push lifecycle services. When the browser supplies a
+replacement, the app POSTs it to `/api/push_subscriptions` first and removes the
+old endpoint only after the replacement is stored. A keys-only rotation keeps
+the same endpoint and updates the existing api row in place.
+
+The focused service tests simulate this event because browsers do not provide a
+reliable way to force a real rotation. They verify the POST-before-DELETE order,
+keys-only updates, teardown, and that one failed api request does not stop later
+rotations. A change event with no replacement cannot be repaired automatically:
+creating a fresh subscription may require a user gesture, so the user must use
+the existing opt-in control again; the api removes the dead row after a failed
+delivery.
+
+## Clearing a stuck service worker
+
+Fastest, in the browser console:
+
+```js
+(await navigator.serviceWorker.getRegistrations()).forEach((r) => r.unregister());
+const keys = await caches.keys();
+await Promise.all(keys.map((k) => caches.delete(k)));
+location.reload();
+```
+
+Through dev tools instead:
+
+1. Application → Service Workers → **Unregister**.
+2. Application → Storage → **Clear site data**.
+3. Reload.
+
+While actively working on the app, Application → Service Workers → **Bypass for
+network** stops the worker serving cached responses without unregistering it. A
+normal hard reload is not enough on its own, because the worker still intercepts.
+
+## Checking it is working
+
+    curl -s -o /dev/null -w "%{http_code}\n" http://localhost:4200/ngsw-worker.js
+
+200 is what you want. 404 means the build configuration in use has no
+`serviceWorker` entry — see "Which build configuration is actually in use".
+
+In the browser: dev tools → Application → Service Workers. It should be
+registered and activated roughly six seconds after the page loads.
+
+Then follow `doubtfire-api/docs/notifications/push-setup.md` to register the
+browser and send a push.
diff --git a/docs/task-sheet-widget-feedback.md b/docs/task-sheet-widget-feedback.md
new file mode 100644
index 0000000000..a427d5791a
--- /dev/null
+++ b/docs/task-sheet-widget-feedback.md
@@ -0,0 +1,190 @@
+# PPI-D03: Proof of Concept, Feedback and Design Evaluation
+
+**Ticket:** PPI-D03 - Gather feedback and document the task-sheet PPI design decisions
+**Branch:** `docs/ppi-task-sheet-widget-feedback`
+**Group:** Feature/Peer Progress Indicator
+**Resource:** `PPI-task-sheet-widget-v1.png`
+**Resource Attribution:** Eloise Ridder-Strickland
+
+![Original task-sheet Peer Progress Indicator design showing the proposed indicator options and placement concepts](images/PPI-task-sheet-widget-v1.png)
+
+**Purpose**
+> To identify design recommendations for the development of the Peer Progress Indicator widget, in line with user, stakeholder and project scope/expectations and accessibility, usability and style guidelines.
+
+### Implementation status
+
+*Proof of concept.* This document does not claim that a live unit-level component or API is implemented or already exists. The proposed widget could show an authorised, anonymous cohort aggregate. Live accuracy, refresh timing and the required unit-level data source remain future implementation and validation work.
+
+### Privacy and evidence handling
+
+Reviewer evidence is de-identified. Reviewer names are omitted unless consent to publish them is recorded. The evidence does not include student IDs, marks, student assessment feedback, progress records, credentials, secrets or real student data.
+
+### Acceptance Criteria Coverage
+
+|       | Requirement                                                                                                                          | Result | Evidence                                                                   |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------------ | ------ | -------------------------------------------------------------------------- |
+| `1.`  | The original ticket, mock-up and author are clearly identified. | *Met* | Header and Section 7. |
+| `2.`  | At least two people review the design. A third reviewer is encouraged but not required. | *Met* | Two formal reviewers represented by general roles in Section 2. |
+| `3.`  | One reviewer represents implementation or technical knowledge and one represents likely users, tutors, UX or documentation. | *Met* | Section 2. |
+| `4.`  | The same core questions are used for each review. | *Met* | Sections 1.2 and 2.1; both formal reviewers answered the same follow-up question. |
+| `5.`  | The Markdown file clearly separates reviewer feedback from Eloise's conclusions. | *Met* | Sections 2 and 3. |
+| `6.`  | The evidence does not expose student IDs, marks, feedback, progress records or other unnecessary personal information. | *Met* | Privacy statement and de-identified roles in Section 2. |
+| `7.`  | The review covers clarity, placement, usefulness, anonymity, accessibility, possible stress or competition, and the user preference. | *Met* | Sections 3 to 5. |
+| `8.`  | Each suggested change is marked as accepted, deferred or not adopted, with a short reason. | *Met* | Section 3. |
+| `9.`  | Any revised design is optional and does not block completion. | *Met* | Section 6. |
+| `10.` | If a revision is made, the original image remains in the repository so the design history is preserved. | *Met* | `docs/images/PPI-task-sheet-widget-v1.png`. |
+| `11.` | The documentation does not claim that the design has been implemented or connected to live data. | *Met* | Implementation status and Sections 4 to 6. |
+| `12.` | The pull request links the original Planner ticket, this follow-up ticket and the supporting evidence. | *Met* | PR description and Section 7. |
+
+## 1. Methodology
+
+Two formal reviewers evaluated the same mock-up using the same survey question set, including the same follow-up improvement question. Earlier project discussions and general Teams comments were retained as supplementary discovery evidence and were not counted as formal reviews.
+
+### 1.1 Evidence sources
+
+1. **Supplementary discovery discussion** before the mock-up was developed, involving project leadership and mentors: [Ontrack - Sprint Planning (Fortnightly)](https://deakin365.sharepoint.com/:v:/r/sites/ThothTech2/Shared%20Documents/Product%20-%20OnTrack/Recordings/Ontrack%20-%20Sprint%20Planning%20\(Fortnightly\)-20260720_180013-Meeting%20Recording.mp4?d=w0b96f239856c4927b309d448a06b7e8c&csf=1&web=1&e=e0uYqS&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D)
+2. **Supplementary open group discussion** after the initial mock-up was shared in Teams.
+
+![Redacted Teams feedback discussing the PPI options, placement and local visibility control](images/teams-review-doc.png)
+
+3. **Formal survey review** completed by two reviewers using the same evaluation questions: [Peer Progress Indicator Mock-up Evaluation](https://docs.google.com/forms/d/e/1FAIpQLSeXGCQzNpgdOlEv686l91L1ko58_SnHXD6obsdpx---WXpTzA/viewform?usp=dialog)
+
+### 1.2 Evaluation questions
+
+#### Feedback profile
+
+1. Which feature group are you a part of?
+2. Do you have previous UI or general design experience? (Yes/No)
+
+#### Context and design
+
+3. Without context, what do you think the Peer Progress Indicator primarily shows?
+4. Which indicator design option is more useful or comfortable to view, and why?
+5. ~~Which placement option is more useful or comfortable to view, and why?~~ - *Removed as redundant with Question 6.*
+6. Which placement is easiest to notice and understand without cluttering the task sheet?
+
+#### Accessibility and privacy
+
+7. Is it clear that this is an anonymous cohort value rather than a ranking?
+8. Is the local show/hide option clear for users who do not want to view peer progress?
+9. If this feature were available, would you choose to show or hide it by default?
+10. What is the main reason for that preference?
+
+#### General considerations
+
+11. Are there accessibility concerns that are not addressed in the mock-up?
+12. Is a local On/Off control appropriate, and could you suggest a better location or label?
+13. What is the single most useful improvement you would make? - *Completed as the same follow-up question for both formal reviewers.*
+
+## 2. Aggregated Feedback Summary
+
+The following are de-identified extracts from the two formal survey reviews and supplementary team communications about *PPI-task-sheet-widget-v1.png*.
+
+The formal reviewer roles were:
+
+- A **technical/design reviewer** with relevant implementation or design knowledge.
+- A **likely end-user reviewer** representing student usability needs.
+
+Earlier PPI contributor and team discussions were retained as supplementary discovery evidence and were not counted as additional formal reviews.
+
+![Survey respondent distribution showing the two formal reviewers across the recorded design-experience categories](images/survey-distribution-chart.png)
+
+### 2.1 Common improvement question
+
+Both formal reviewers were asked the same missed question as a follow-up.
+
+- **Technical/design reviewer:** The single most useful improvement I would make is to keep the richer Option B concept, but introduce it gradually rather than showing every task status immediately. I would start with a simple anonymous comparison, keep the Mockup 02 placement, and include a clear show/hide preference. Once the data and behaviour are proven to be accurate and useful, the additional status breakdowns could be added later.
+- **Likely end-user reviewer:** The single most useful improvement for me would be giving students clear control over whether the indicator is shown. I like the Mockup 02 placement because it is visible without getting in the way, but I would keep the wording neutral and make it easy to hide so students who find peer comparison distracting or stressful do not have to see it.
+
+| Strength                                                                           | Concerns                                                                                                                                                     | Suggestion                                                                                                                         |
+| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| Option B - it gives a clearer outline.                                             | Option B - gives a lot more information but could scare people who aren't ready to see a lot of information.                                                 | Option A - with a toggle for Option B called 'Advanced'. for people who would like to see an advanced view (Option B).             |
+| Option B - the data is helpful for me.                                             | Option B - could cause issues for subjects that have tutors that mark stuff really quickly and others that don't so it might cause undue stress on students. | An overall dark mode would be very interesting / helpful                                                                           |
+| Placement 1 - the information is where you want it when scanning over a page.      | 'InProgress' aren't used by many students so it's not useful data.                                                                                           | Having the Opt-In/Opt-out in the same area as the 'placement' would likely be easier for most/all students as it's simple to find. |
+| Placement 1 - does not over cutter the reading space.                              | Option B - I don't think it would be practical to share that much information with students.                                                                 | As far as placement goes I think 1 or 3.                                                                                           |
+| Opt-in, because it is useful and clear.                                            | Example Toggle - The wording is wrong, we won't have an opt-out for statistics.                                                                              | Option B - looks good but I think that's more of a stretch goal.                                                                   |
+| Opt-in, I'd would like see the data & would want others to benefit off it as well. | The indicator itself might give some students anxiety because they feel behind.                                                                              |                                                                                                                                    |
+| It is a good feature and is appropriate.                                           |                                                                                                                                                              |                                                                                                                                    |
+| I'm a big fan of Option B, Mock-up 2 placement and the toggle.                     |                                                                                                                                                              |                                                                                                                                    |
+| If people don't like it they can just turn it off.                                 |                                                                                                                                                              |                                                                                                                                    |
+
+## 3. Decision Table
+
+Each item is marked as **Accepted**, **Deferred**, or **Not adopted**, with a short reason. Wellbeing concerns are treated as real design risks rather than dismissed because a visibility control exists.
+
+| Status | Reviewer feedback | Design conclusion and reason |
+| --- | --- | --- |
+| **Accepted** | *Placement 1 - the information is where you want it when scanning over a page.* | Use Placement 1 as the baseline because it is central, easy to notice and contextually relevant. |
+| **Accepted** | *Placement 1 - does not overly clutter the reading space.* | Keep the first view compact so the submission workflow remains the main focus. |
+| **Accepted** | *If people do not like it they can turn it off.* | Provide a clear local show/hide control beside the widget. This reduces exposure but does not remove the underlying wellbeing risk. |
+| **Accepted** | *Option B gives a clearer outline.* | Use this to inform a possible future advanced view while keeping Option A as the simpler baseline. |
+| **Accepted** | *'InProgress' is not used by many students, so it is not useful data.* | Exclude this metric from the first proof of concept because reviewers did not identify enough value to justify the extra detail. |
+| **Accepted** | *Place the visibility control in the same area as the widget.* | A local control is easier to find and clearly communicates that it hides only the visual widget. |
+| **Accepted** | *The example toggle wording suggests an opt-out from statistics.* | Correct the interface wording. Users may show or hide the widget locally; this does not imply opting out of authorised anonymous aggregation. |
+| **Accepted as risk** | *Option B could scare people who are not ready to see that much information.* | Valid wellbeing and cognitive-load risk. Start with Option A, avoid ranking language and validate the default visibility before implementation. |
+| **Accepted as risk** | *Different tutor marking speeds could create undue stress.* | Valid interpretation risk. Any future implementation needs neutral wording, explanation of data limits and testing across different unit workflows. |
+| **Accepted as risk** | *The indicator might make some students anxious because they feel behind.* | Valid wellbeing risk. A show/hide control reduces but does not remove it; the feature needs safe defaults and user testing. |
+| **Deferred** | *Add an Advanced option that expands Option A into Option B.* | Useful future extension, but outside the first proof-of-concept scope. |
+| **Deferred** | *Add an overall dark mode.* | Potentially useful but outside this feature's scope. Existing OnTrack accessibility and theme work should be considered separately. |
+| **Deferred** | *Option B looks good but is a stretch goal.* | Retain as a future option after the simple baseline and data contract are validated. |
+| **Not adopted** | *It is a good feature and is appropriate.* | Positive but too general to create a separate design action. |
+| **Not adopted** | *Option B data is helpful to me.* | Recorded as useful feedback, but one personal preference does not justify making the detailed view the default. |
+| **Not adopted** | *I would show it because it is useful and clear.* | Supports perceived usefulness but does not create a separate design change. |
+| **Not adopted** | *Option B is not practical to share with students.* | Addressed through the simpler Option A baseline and the deferred advanced view rather than rejecting the whole concept. |
+| **Not adopted** | *Placement 1 or 3.* | Too broad to act on directly; the more specific placement feedback supports Placement 1. |
+| **Not adopted** | *I would show it and want others to benefit from it.* | Recorded as a preference, but it does not determine the default for all students. |
+
+## 4. Impact Consideration Summary
+
+| Area | Functional considerations | Non-functional considerations |
+| --- | --- | --- |
+| **Clarity** | Option A provides a simple baseline. Option B adds a detailed stage breakdown and may be considered later. | Reduce visual clutter, use neutral wording and clearly explain that the value is an anonymous cohort aggregate rather than a ranking. |
+| **Placement** | Consider Placement 1 as the initial design, with the local show/hide control beside the widget. | Keep the primary task submission workflow central and place the indicator near related information. |
+| **Usefulness** | The proposed widget could show an authorised, anonymous aggregate comparison. Live accuracy, refresh timing and the required data source still need implementation and validation. | The feature may support pacing and reassurance, but it must not imply that cohort progress determines an individual student's success. |
+| **Anonymity** | Use aggregated percentage metrics and prevent access to individual student records. | Protect psychological safety and test authorisation so users cannot infer or access another student's progress. |
+| **Accessibility** | Provide accessible text equivalents, screen-reader labels and keyboard operation for controls and tooltips. | Do not rely on colour alone. Use sufficient contrast, patterns or labels, and test the design with accessibility tooling and users where possible. |
+| **Wellbeing** | Give users a clear local show/hide control and avoid ranking or competitive language. | Seeing peer completion rates may create stress, competition or a false sense of security. The control reduces but does not remove these risks. |
+| **User preference** | Allow students to show or hide the widget locally without implying that they can opt out of authorised anonymous aggregation. | Use a considered default, preserve user agency and minimise sensitive information shown outside the main OnTrack context. |
+
+## 5. Summary of Findings
+
+Based on the available feedback, the first proof-of-concept direction should include:
+
+- **Placement 1:** It places the information where students naturally scan while keeping it near the relevant task context.
+- **Option A as the baseline:** Option B received positive feedback, but Option A is a more realistic first step. A detailed advanced view can remain future work.
+- **Local show/hide control:** Place the control on or beside the widget. Make it clear that this controls local visibility only.
+- **Neutral and accessible wording:** Explain that the value is anonymous and is not a ranking. Avoid competitive language and do not expose individual student information.
+- **Focused metrics:** Omit `InProgress` from the first proof of concept because the reviewers did not identify enough value to include it.
+- **Wellbeing safeguards:** Treat stress, anxiety, tutor marking-speed differences and false reassurance as design risks that require safe defaults and validation.
+
+Avoid:
+
+- **Placement 2 as the initial choice:** The specific feedback more strongly supports Placement 1.
+- **Global statistical opt-out wording:** The local control hides the widget; it does not imply an opt-out from authorised anonymous aggregation.
+- **Mandatory persistent display:** A forced view could negatively affect some students and removes user agency.
+- **Claims of live or real-time accuracy:** No live unit-level data source or implemented widget is claimed in this document.
+
+### Implementation notes
+
+> **User agency and wellbeing:** Put a binary show/hide control directly on or beside the widget and validate the default before implementation.
+
+> **Data and security:** Use authorised aggregate metrics, filter out irrelevant statuses, minimise exposed information and test access controls.
+
+> **Accessibility:** Provide high-contrast visual cues, text equivalents, screen-reader labels, keyboard operation and clear tooltips where applicable.
+
+> **Validation:** Test comprehension, accessibility, privacy, different tutor marking patterns and possible stress effects before treating the design as production-ready.
+
+## 6. Handover and Recommendations
+
+1. **Implement Option A only as a future baseline**, keeping Option B or an Advanced View as a later stretch goal after the data source and user need are validated.
+2. **Use correct interface wording:** state that the control shows or hides the visual widget locally rather than suggesting an opt-out from authorised anonymous aggregation.
+3. **Prototype Placement 1:** place the compact widget and local control near the task context, then test that it does not interfere with submission work.
+4. **Define the data contract and security boundary:** document the authorised aggregate fields, refresh behaviour, cohort rules, suppression thresholds and access-control tests before connecting live data.
+5. **Validate accessibility and wellbeing:** test neutral wording, keyboard and screen-reader support, colour independence, default visibility and responses across different marking speeds.
+6. **Preserve design history and evidence:** keep the original image, de-identified feedback, decisions, risks and follow-up reviewer answers so future contributors can understand why the design changed.
+
+## 7. Reference Links
+---
+*Links*
+- [Planner - PPI-D03 - Gather feedback and document the task-sheet PPI design decisions](https://teams.microsoft.com/l/entity/com.microsoft.teamspace.tab.planner/planner.v1.df787fb0-1a0b-4bb5-9bc9-9b92a428eb13_p_KuipOoIL0E-7orl64gLd0cgAGv3z?tenantId=d02378ec-1688-46d5-8540-1c28b5f470f6&webUrl=https%3A%2F%2Ftasks.teams.microsoft.com%2Fteamsui%2FpersonalApp%2Falltasklists&context=%7B%22subEntityId%22%3A%22%2Fv1%2Fplan%2FKuipOoIL0E-7orl64gLd0cgAGv3z%2Fview%2Fboard%2Ftask%2FU0BJo6N2Mkq_kw3IYFFWuMgAAM_I%22%2C%22channelId%22%3A%2219%3Abd20175d09414f079490a2403f7fca74%40thread.tacv2%22%7D)
+- [Planner - PPI - Draft a small task-sheet indicator/widget interactions](https://teams.microsoft.com/l/entity/com.microsoft.teamspace.tab.planner/planner.v1.df787fb0-1a0b-4bb5-9bc9-9b92a428eb13_p_KuipOoIL0E-7orl64gLd0cgAGv3z?tenantId=d02378ec-1688-46d5-8540-1c28b5f470f6&webUrl=https%3A%2F%2Ftasks.teams.microsoft.com%2Fteamsui%2FpersonalApp%2Falltasklists&context=%7B%22subEntityId%22%3A%22%2Fv1%2Fplan%2FKuipOoIL0E-7orl64gLd0cgAGv3z%2Fview%2Fboard%2Ftask%2FYQjP6F8GfkaDmq5IgUryQcgAL9Ay%22%2C%22channelId%22%3A%2219%3Abd20175d09414f079490a2403f7fca74%40thread.tacv2%22%7D)
diff --git a/docs/theme/THEME-CONTRACT.md b/docs/theme/THEME-CONTRACT.md
new file mode 100644
index 0000000000..ebbf9bc968
--- /dev/null
+++ b/docs/theme/THEME-CONTRACT.md
@@ -0,0 +1,1532 @@
+# OnTrack theme contract
+
+**Ticket:** THM-D02 · **Status:** Draft, awaiting approval · **Applies to:** `doubtfire-web`
+
+This is the contract every contributor works to before anyone edits styles for Light/Dark/System.
+It fixes the theme states, the semantic token names, how the preference is stored, the
+accessibility floor, and what the implementation tickets must prove. It does not implement
+anything.
+
+Read sections 4, 6, 7 and 10 before writing any style code. The rest is why.
+
+---
+
+## 1. Missing inputs, and what is provisional because of them
+
+THM-D02 was scheduled after two tickets that have not started.
+
+| Ticket  | Owner             | What it was meant to hand over                     | State       |
+| ------- | ----------------- | -------------------------------------------------- | ----------- |
+| THM-D01 | Owen Brian Costin | Theme audit and dark-mode blueprint                | Not started |
+| MG-05   | Unassigned        | CSS style guide (naming, layering, file ownership) | Not started |
+
+So the audit in section 2 was done from scratch against the working tree at
+`origin/11.0.x`. Every number in it comes from a command that is printed next to it, and every
+statement about how OnTrack styles itself today comes from a file that was opened.
+
+Three things stay provisional until those two tickets land.
+
+| Provisional                                                                                         | Why                                                                                                     | Who settles it                                     |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
+| The token **naming prefix** `--ot-*` and the `--ot-color-* / --ot-status-* / --ot-chart-*` grouping | MG-05 owns naming. `--ot-` was chosen because it collides with nothing in the tree today (section 2.6). | MG-05                                              |
+| The **file layout** in section 10 (`src/styles/tokens/_light.scss`, `_dark.scss`)                   | MG-05 owns which layer may declare a colour.                                                            | MG-05                                              |
+| The **per-page migration order** for THM-M01 to THM-M04                                             | THM-D01's audit was meant to rank pages by risk. Section 2.5 lists the hard surfaces but not an order.  | THM-D01, and THM-M05 for the FlexLayout sequencing |
+
+Everything else here — states, storage, tokens, values, accessibility floor, test list — is
+proposed as final and is not waiting on either ticket.
+
+---
+
+## 2. Audit of the current stylesheet, done for this ticket
+
+Commands were run from the repo root on branch `docs/theme-contract`, rebased onto `origin/11.0.x`
+at **`4034e7d1a`** (27 Aug 2026, the closure merge of PR #105). Every count below was re-taken on
+that commit. Appendix B has the full list with each command beside its result, and the note there
+on which nine numbers moved when the closure branch landed.
+
+### 2.1 Versions
+
+`package.json`: Angular `^22.0.3`, Angular Material `^22.0.2`, Tailwind via
+`@tailwindcss/postcss ^4.3.2`, tests on `vitest ^4.1.9` through the
+`@angular/build:unit-test` builder. Node `>=22.22.3`.
+
+The Thoth Tech handover says Angular 17 and Karma. Both are stale. Do not plan against them.
+
+### 2.2 How Material is themed today
+
+`angular.json` loads two global stylesheets, in this order: `src/theme.scss`, then
+`src/styles.scss`.
+
+`src/theme.scss` builds a **Material 2** theme. It defines three palettes by hand
+(`$md-formatif` from `#3939ff`, an accent, a warn), calls `mat.m2-define-light-theme(...)`, then
+`@include mat.all-component-themes($theme)`. There is one theme and it is light. The file defines
+no dark theme at all — line 162 only reads `is-dark` back off the light config — and there is no
+`.dark-theme` class anywhere in the tree. The repo's only `$dark-theme` is at
+`src/styles/m3-theme.scss:158`, in the file nothing imports.
+
+`src/styles/m3-theme.scss` **already exists**, is 177 lines, and is generated
+(`// This file was generated by running 'ng generate @angular/material:m3-theme'`). It defines
+**both** `$light-theme` and `$dark-theme` with `theme-type: light` / `theme-type: dark`,
+`use-system-variables: true` and `system-variables-prefix: sys`.
+
+It is not used. `src/styles.scss` lines 24-25 have it commented out:
+
+```scss
+// This is the new Angular Material 3 theme file which we will migrate to
+// @use './styles/m3-theme.scss';
+```
+
+```
+$ grep -rIn -- "--sys-" src/ | wc -l
+0
+```
+
+Nothing consumes it. Turning that comment into code is **not** the plan — see section 3.
+
+`mat.app-background()` and `mat.elevation-classes()` are each included twice, once in
+`theme.scss` and again in `styles.scss`. Harmless duplication today, worth a cleanup ticket, not
+this one.
+
+### 2.3 The colours the app actually paints
+
+Because the M2 light theme is what runs, the base surfaces come from Material's own light
+palettes at `node_modules/@angular/material/core/m2/_palette.scss`:
+
+| Role           | M2 source                                              | Value                 |
+| -------------- | ------------------------------------------------------ | --------------------- |
+| page           | `$light-theme-background-palette.background` = grey 50 | `#fafafa`             |
+| card, dialog   | `.card` / `.dialog`                                    | `#ffffff`             |
+| app bar        | grey 100                                               | `#f5f5f5`             |
+| body text      | `rgba(black, 0.87)`                                    | flattens to `#212121` |
+| secondary text | `rgba(black, 0.54)`                                    | flattens to `#757575` |
+| disabled text  | `rgba(black, 0.38)`                                    | flattens to `#9e9e9e` |
+| dividers       | `rgba(black, 0.12)`                                    | flattens to `#e0e0e0` |
+
+Those four flattened values land exactly on M2 grey 900 / 600 / 500 / 300. That is not a
+coincidence, it is how the palette was built, and it is why the light column in section 7 is a
+derivation and not an invention.
+
+The four **text and divider** rows are reproducible without Material installed: they are the
+alpha values above composited over white, and `flatten()` in Appendix A returns `#212121`,
+`#757575`, `#9e9e9e` and `#e0e0e0` exactly. The three **surface** rows (`#fafafa`, `#ffffff`,
+`#f5f5f5`) are read from the M2 palette, and `node_modules` is not installed in this worktree, so
+they are quoted from the package rather than re-checked here. They are the stock M2 grey 50 /
+white / grey 100 and nothing in the repo overrides them, but treat the file path as a pointer
+rather than a citation until someone re-runs it with dependencies installed.
+
+### 2.4 Hard-coded colour, measured
+
+```
+$ grep -rIoE '#[0-9a-fA-F]{3,8}\b' src --include='*.scss' | wc -l
+471
+$ grep -rIlE 'rgba?\(|hsla?\(' src --include='*.scss' | wc -l
+25
+$ find src -name '*.scss' | wc -l
+189
+$ grep -rIoh '!important' src --include='*.scss' | wc -l
+63
+```
+
+238 of the 471 hex literals are in three files that are palettes by design
+(`m3-theme.scss` 107, `theme.scss` 84, `task-status-colors.scss` 47). Of the rest, **226 are
+scattered across component SCSS under `src/app`**, 6 sit in other shared partials and 1 is in
+`styles.scss`.
+
+```
+$ grep -rIoE '#[0-9a-fA-F]{3,8}\b' src/app --include='*.scss' | wc -l
+226
+$ grep -rIlE '#[0-9a-fA-F]{3,8}|rgba?\(|hsla?\(' src/app --include='*.scss' | wc -l
+44
+$ grep -rIlE 'color|background|border|fill|stroke' src/app --include='*.scss' | wc -l
+57
+$ find src/app -name '*.scss' | wc -l
+178
+```
+
+So **57 of the 178 component stylesheets under `src/app` declare a colour, a border or a fill**,
+against 44 that hold a hex or an `rgba()`. The wider grep is the honest one for sizing a
+migration: it also catches `stroke: white`, `border-radius: $border-radius-base` and a
+`task-status-color($status)` call, none of which contain a literal but all of which a theme has
+to account for. 57 is the number to burn down, 226 is the number of literals inside it.
+
+The three palette files have not moved (107 / 84 / 47, unchanged), so the whole of the growth is
+in component stylesheets: the loose literal count more than doubled from 105 to 226 in a single
+closure merge. Two files new to this base carry 94 of the 226 between them,
+`ppi-widget.component.scss` with 50 and `demo-controls.component.scss` with 44. That is the rate
+this contract exists to stop, and it is the strongest argument for landing the section 10 lint
+gate early rather than after the migration — every week it is not in place, the burn-down grows
+faster than a migration ticket can shrink it.
+
+Templates carry colour too, as Tailwind arbitrary values:
+
+```
+$ grep -rIhoE '\b(text|bg|border)-\[#[0-9a-fA-F]{3,8}\]' src --include='*.html' --include='*.ts' \
+    | sort | uniq -c | sort -rn
+   5 text-[#c5c5c5]    3 bg-[#da532c]     2 text-[#969696]   2 bg-[#e7e7ff]
+   1 text-[#fab143]    1 text-[#da532c]   1 text-[#9696969d] 1 text-[#2c2c2c]
+   1 bg-[#fab143]      1 bg-[#43a047]     1 bg-[#333]        1 bg-[#126352]
+```
+
+Nine files. That is the whole of the "someone will invent a new grey" risk, made concrete.
+
+### 2.5 Status, urgency and the hard surfaces
+
+**Task status colour has two sources of truth.**
+`src/styles/common/task-status-colors.scss` holds a Sass map of 15 statuses with `base`, `dark`,
+`light` and `fore`. `src/app/api/models/task-status.ts` holds `STATUS_COLORS`, a second map of
+the same 15 hex values in TypeScript. Each file carries a comment telling you to keep it in step
+with the other, and the TS one still points at `task-status-colors.less`, a file that no longer
+exists. The two maps **do agree today** — all 15 pairs match, checked value by value. They agree
+by hand, not by construction.
+
+**Due-date urgency is inline in one template.**
+`src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.html:264-267`:
+
+```html
+[ngClass]="{ 'text-[#da532c]': task.daysUntilDueDate() <= 0, 'font-normal text-[#fab143]':
+task.daysUntilDueDate() > 0 && task.daysUntilDueDate() < 11, 'font-normal text-gray-500':
+task.daysUntilDueDate() > 11, }"
+```
+
+Three urgency bands, no named token, one of them a Tailwind default grey.
+
+**Surfaces THM-M04 will fight**, all confirmed present in `package.json` and in use:
+
+| Surface         | Library                                                                     | Why it is hard                                                                                                |
+| --------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| Code editors    | `monaco-editor`, `ngx-monaco-editor-v2-alternative`, `@ngstack/code-editor` | Monaco takes a theme **name**, not CSS. Seven call sites pin `theme: 'vs'` or `'vs-dark'` literally.          |
+| Charts          | `@swimlane/ngx-charts`, `d3`                                                | Colour arrives as a JS `domain` array, not CSS. Two hard-coded domains found.                                 |
+| PDF / portfolio | `ng2-pdf-viewer`                                                            | Renders into a canvas. CSS cannot reach it; a filter inversion is the only lever.                             |
+| Calendar        | `angular-calendar` (CSS imported raw in `styles.scss`)                      | Third-party CSS with its own light palette.                                                                   |
+| Gantt           | `@worktile/gantt` (SCSS loaded in `angular.json`)                           | Same.                                                                                                         |
+| Terminal output | `ansi-to-html`                                                              | Emits inline `style="color:#..."` from ANSI codes.                                                            |
+| Emoji picker    | `@ctrl/ngx-emoji-mart` (`picker.css`)                                       | Ships a `darkMode` input; `task-comment-composer.component.html:5` currently hard-codes `[darkMode]="false"`. |
+
+The two chart palettes, verbatim:
+
+```ts
+// visualisations/progress-burndown-chart/progress-burndown-chart.component.ts:70-76
+private readonly seriesPalette: string[] = [
+  '#AAAAAA', '#777777', '#0079d8', '#E01B5D', '#7C3AED',
+];
+// ...fed to the scheme at :81 as domain: [...this.seriesPalette]
+//    and per-series at :360 via seriesColor(index)
+
+// common/project-progress/project-progress-gauge.component.ts:41
+domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5'],
+```
+
+The burndown palette moved during the closure merge: it was an inline `domain` array and is now a
+named constant, and its fifth slot changed from `'transparent'` to a real fifth colour `#7C3AED`.
+That is one more series colour for THM-M04 to map onto `--ot-chart-*`, and section 8.2 allocates
+six slots, so it fits. The refactor is also the better shape to migrate — one constant to
+re-point instead of two call sites.
+
+### 2.6 What does not exist yet
+
+```
+$ grep -rIn "prefers-color-scheme" src/ | wc -l
+0
+$ grep -rIn "color-scheme" src/ | wc -l
+0
+$ grep -rIn "@media print" src/ | wc -l
+0
+$ grep -rIn "prefers-reduced-motion" src/ | wc -l
+2
+```
+
+The two `prefers-reduced-motion` blocks are new and both are component-local
+(`demo-controls.component.scss:497`, `ppi-widget.component.scss:503`). There is still no
+app-wide reduced-motion rule, so section 12 sets one rather than assuming it is covered.
+
+No dark preference is stored anywhere. `src/index.html` sets a fixed
+`<meta content="#3939ff" name="theme-color" />` and `src/manifest.webmanifest` sets
+`"theme_color": "#3939ff"`, `"background_color": "#ffffff"`. `<body class="mat-typography">` is
+the only body class.
+
+CSS custom properties are barely used, which is why the token namespace is free:
+
+```
+$ grep -rIhoE '^\s*--[a-z0-9-]+\s*:' src --include='*.scss' | tr -d ' ' | sort | uniq -c
+   3 --background-gray:   2 --mat-chip-disabled-label-text-color:
+   1 --status-chip-bg:    1 --mat-tab-container-height:
+   1 --mat-progress-bar-track-height:   1 --mat-progress-bar-active-indicator-height:
+   1 --mat-badge-text-color:   1 --mat-badge-container-overlap-offset:
+   1 --mat-badge-container-offset:
+```
+
+Nine names, twelve declarations, and six of the nine are Material's own `--mat-*` overrides
+rather than anything of ours. The `--ot-` prefix still collides with nothing.
+
+Focus handling is a live risk, and the headline counts understate it. There are 11
+`outline: none` / `outline: 0` declarations and 11 `:focus-visible` rules, which reads as level
+where it used to read 11-against-7. It is not level. The two sets barely overlap:
+
+```
+$ comm -12 <(grep -rIlE "outline:\s*(none|0)" src --include='*.scss' | sort) \
+           <(grep -rIl "focus-visible" src --include='*.scss' | sort)
+src/app/common/file-uploader/file-uploader.component.scss
+```
+
+Ten files suppress an outline and seven declare a `:focus-visible` rule, but only **one file does
+both** — `file-uploader.component.scss`. The four `:focus-visible` rules added by the closure
+merge landed in four files that suppress no outline at all, three of which
+(`notifications-page`, `demo-controls`, `ppi-widget`) did not exist on the previous base. So the
+gap did not close: **nine of the ten outline-suppressing files still have no replacement ring**,
+exactly as before. This is why section 12 makes auditing all 11 suppressions a named item in
+THM-F01 rather than treating the ratio as evidence of anything.
+
+### 2.7 The accessibility problem that already ships
+
+Status chips pair a `base` fill with a `fore` foreground of `#fff` or `#444`. Measured (method
+and script in Appendix A):
+
+| Status                                | Fill      | Foreground | Ratio | AA 4.5:1 |
+| ------------------------------------- | --------- | ---------- | ----- | -------- |
+| working-on-it                         | `#eb8f06` | `#ffffff`  | 2.48  | **fail** |
+| complete                              | `#5bb75b` | `#ffffff`  | 2.51  | **fail** |
+| discuss                               | `#31b0d5` | `#ffffff`  | 2.53  | **fail** |
+| attention-required                    | `#f1814d` | `#ffffff`  | 2.63  | **fail** |
+| need-help                             | `#a48fce` | `#ffffff`  | 2.84  | **fail** |
+| feedback-exceeded                     | `#d46b54` | `#ffffff`  | 3.48  | **fail** |
+| demonstrate                           | `#428bca` | `#ffffff`  | 3.63  | **fail** |
+| ready-for-feedback                    | `#0079d8` | `#ffffff`  | 4.44  | **fail** |
+| fail, time-exceeded                   | `#d93713` | `#ffffff`  | 4.66  | pass     |
+| not-started                           | `#cccccc` | `#444444`  | 6.06  | pass     |
+| fix-and-resubmit, assess-in-portfolio | `#f2d85c` | `#444444`  | 6.84  | pass     |
+| rediscuss                             | `#126352` | `#ffffff`  | 7.16  | pass     |
+| redo                                  | `#804000` | `#ffffff`  | 7.92  | pass     |
+
+Eight of thirteen distinct pairs fail AA today, in light mode, before dark mode exists. The
+secondary text colour has the same problem: `#757575` on a `#ffffff` card is 4.61 and passes, but
+on the `#fafafa` page it is **4.41** and fails.
+
+This is why section 7 does not simply copy the current values forward.
+
+---
+
+## 3. Material theming approach
+
+**Decision: a staged bridge. Keep the M2 theme rendering the components, add an independent
+semantic token layer on top now, and move Material onto tokens per component group later.**
+
+### The three options
+
+| Option                                                           | What it means                                                                             | Verdict                                                                                                                                                       |
+| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| A. Stay on M2, add a second `m2-define-dark-theme` under a class | One extra `@include mat.all-component-colors($dark)` in a `.dark` block                   | Rejected. Roughly doubles emitted CSS, gives no token vocabulary for the 233 loose hexes outside the three palette files, and locks us further into an API Angular is winding down. |
+| B. Uncomment `m3-theme.scss` and switch wholesale                | Swap M2 for the generated M3 light and dark themes                                        | Rejected. See below.                                                                                                                                          |
+| **C. Staged bridge**                                             | Ship `--ot-*` tokens and the state machine first; migrate Material component groups after | **Chosen.**                                                                                                                                                   |
+
+### Why B is rejected
+
+`m3-theme.scss` was generated from `#3939FF` and never wired up. Switching to it in one commit
+would, in a single PR: change every Material component's density, shape and typography scale at
+once; re-map the `warn` palette (M2 `#ef4444`) onto the M3 `error` ramp (`#ba1a1a`); and leave
+the 226 component-level hex literals and the 15 status colours untouched and now clashing with a
+new set of greys. The failure mode is exactly the one this ticket exists to prevent: several
+people fixing different dark greys in parallel.
+
+It is also not a small change. `m3-theme.scss:138` and `:158` both call `mat.define-theme`, which
+is the older M3 entry point, and the file was generated against it (`m3-theme.scss:1`). Angular
+Material has since added `mat.theme()`, which takes a `theme-type` of `color-scheme` and emits
+both themes from one include. If we are going to move Material, that is the target, not the
+generated file as written — and either way it is a separately sized ticket, not a comment
+uncomment.
+
+> **Not verified here.** `node_modules` is not installed in this worktree, so the `mat.theme()`
+> behaviour above is stated from the Material 22 public API and **has not been checked against
+> the installed package**. An earlier draft pinned it to
+> `node_modules/@angular/material/core/tokens/_system.scss:57-82` and `:253`; those line numbers
+> are removed because nothing in this repo can confirm them and a citation nobody can check is
+> worth less than none. The rejection of option B does not rest on this paragraph — it rests on
+> the blast radius in the paragraph above it, which is verifiable in-tree. Whoever picks up the
+> Material migration ticket should confirm the API against the installed version before quoting
+> it.
+
+### What C means concretely
+
+1. **Now (THM-F01).** `src/theme.scss` is untouched. A new token layer declares `--ot-*` on the
+   root element for both themes. Nothing Material renders changes.
+2. **Now.** New and migrated code reads `--ot-*` only. The 226 loose literals get replaced page
+   by page (THM-M01 to M04) with no visual change in light mode.
+3. **Later, per component group.** Material components are pulled onto the tokens with
+   `mat.theme-overrides()` or `--mat-*` system variables, one group per PR (buttons, then form
+   fields, then tables, and so on). Each PR is independently reviewable and revertible.
+4. **Later still.** When every group is covered, `theme.scss` shrinks to typography and the M2
+   colour include is deleted.
+
+### Compatibility
+
+- `--ot-*` custom properties inherit and cascade. They cannot break an M2 rule that does not
+  reference them, so step 1 is inert by construction.
+- `light-dark()` is **not** used in the token layer. Values are written literally under the DOM
+  marker so the resolved theme is legible in DevTools and does not depend on the browser's
+  `color-scheme` computation. The `color-scheme` CSS property is still set (section 11) so
+  scrollbars and form controls follow.
+- Tailwind's `important: true` in `tailwind.config.js` means every utility already outranks
+  Material component CSS. Reading a token through a utility keeps that behaviour, it does not
+  change it.
+
+### Rollback
+
+| Stage failing        | Rollback                                                                                                 | Blast radius                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
+| Token layer          | Remove the `@use` of the token file. Every `var(--ot-x, <fallback>)` falls back to its literal.          | None, if the fallback rule in section 10 is obeyed. |
+| Toggle / persistence | Feature-flag the toggle off. The DOM marker is then never set, and the `:root` block is the light theme. | None. Light mode is the unmarked default by design. |
+| One component group  | Revert that one PR.                                                                                      | That group only.                                    |
+| A migrated page      | Revert that one PR.                                                                                      | That page only.                                     |
+
+**Every `var()` in the token layer's consumers must carry a literal fallback matching today's
+light value.** That single rule is what makes rollback free, and it is a review gate.
+
+---
+
+## 4. Theme states
+
+Two vocabularies. They are not the same set and they are never stored in the same place.
+
+|                       | Values                    | Where it lives                   | Who writes it            |
+| --------------------- | ------------------------- | -------------------------------- | ------------------------ |
+| **Stored preference** | `light`, `dark`, `system` | `localStorage`, key in section 6 | The user, via the toggle |
+| **Resolved theme**    | `light`, `dark`           | In memory, and on the DOM marker | `ThemeService` only      |
+
+The stored preference is the same three values wherever it is kept. THM-B01 adds a second store
+for it on the user account (section 6.2); it does not add a fourth value, a fourth state or a
+new resolution rule, so everything below survives phase two unchanged.
+
+`system` is never a resolved value. It is an instruction meaning _follow
+`prefers-color-scheme`_. Anything that needs to know what is on screen reads the resolved
+theme. Anything that renders the toggle reads the stored preference, so the toggle can show
+three options and highlight `system`.
+
+Resolution is one line:
+
+```
+resolved = stored === 'system' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+                               : stored
+```
+
+### State diagram
+
+```mermaid
+stateDiagram-v2
+    [*] --> Read: app boot (pre-hydration script)
+
+    Read --> System: key missing
+    Read --> System: value not in the allowlist
+    Read --> Light: value = "light"
+    Read --> Dark: value = "dark"
+    Read --> System: value = "system"
+
+    state "stored = system" as System {
+        [*] --> ResolveOS
+        ResolveOS --> SysLight: prefers-color-scheme is not dark
+        ResolveOS --> SysDark: prefers-color-scheme is dark
+        SysLight --> SysDark: OS switches to dark (live)
+        SysDark --> SysLight: OS switches to light (live)
+    }
+
+    state "stored = light" as Light
+    state "stored = dark" as Dark
+
+    Light --> Dark: user picks Dark
+    Light --> System: user picks System
+    Dark --> Light: user picks Light
+    Dark --> System: user picks System
+    System --> Light: user picks Light
+    System --> Dark: user picks Dark
+
+    note right of System
+        resolved = light or dark
+        OS changes apply live, no reload
+    end note
+    note right of Dark
+        resolved = dark, pinned
+        OS changes are ignored
+    end note
+```
+
+Three rules fall out of the diagram and are testable:
+
+1. An unreadable, missing or invalid stored value resolves to `system`. Never to a hard `dark`.
+2. While stored is `light` or `dark`, OS changes are ignored. The user's explicit choice wins.
+3. Changing the OS preference while stored is `system` repaints without a reload.
+
+---
+
+## 5. DOM marker
+
+**One attribute, on `<html>`, carrying the resolved theme only:**
+
+```html
+<html lang="en" data-ot-theme="dark"></html>
+```
+
+- Name: `data-ot-theme`. Values: exactly `light` or `dark`. Nothing else is ever written.
+- It goes on `document.documentElement`, not `<body>`. `<body class="mat-typography">` is
+  already load-bearing and the pre-hydration script (section 11) runs in `<head>`, before
+  `<body>` exists.
+- **In light mode the attribute is present and set to `light`.** It is not omitted. A selector
+  should never have to mean "absence of dark".
+- A data attribute, not a class, because `<html>` classes are a shared namespace that Angular,
+  Material and Tailwind all write into, and a stray `.dark` is easy to add by accident. An
+  attribute with a fixed two-value domain is not.
+- Selector form for the token layer, and the only two blocks that may declare a colour value:
+
+```scss
+:root,
+:root[data-ot-theme='light'] {
+  /* light values */
+}
+
+:root[data-ot-theme='dark'] {
+  /* dark values */
+}
+```
+
+The bare `:root` first means the app is correct in light mode even if the script never runs.
+
+---
+
+## 6. Storage
+
+| Field               | Value                                                                        |
+| ------------------- | ---------------------------------------------------------------------------- |
+| Key                 | `ontrack.theme.preference`                                                   |
+| Allowed values      | `light`, `dark`, `system` — exactly these three lowercase ASCII strings      |
+| Default when absent | `system`                                                                     |
+| Format              | A bare string. **Not** JSON, not an object, not a serialised class           |
+| Scope               | `localStorage`, per browser profile and origin. Section 6.2 adds the account |
+| Sync provenance     | `ontrack.theme.preference.accountId`, never read on the first-paint path     |
+
+The key follows the convention already in the tree, which now has two independent uses of it:
+
+```
+src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.ts:586
+  `ontrack.unitTaskList.${unitId}.viewPreferences`
+src/app/projects/states/plan/task-planner/task-planner.component.ts:82
+  `ontrack.taskPlanner.${projectId}.showTasksAboveTargetGrade`
+```
+
+Namespace, dot separators, camelCase leaf. `ontrack.theme.preference` is the same shape with no
+id segment, because the preference is per browser profile rather than per unit or per project.
+
+### 6.1 Validation, and the rule that matters
+
+```ts
+export type ThemePreference = 'light' | 'dark' | 'system';
+const THEME_PREFERENCES: readonly ThemePreference[] = ['light', 'dark', 'system'] as const;
+const THEME_STORAGE_KEY = 'ontrack.theme.preference';
+
+function isThemePreference(v: unknown): v is ThemePreference {
+  return typeof v === 'string' && (THEME_PREFERENCES as readonly string[]).includes(v);
+}
+
+function readThemePreference(): ThemePreference {
+  try {
+    const raw = localStorage.getItem(THEME_STORAGE_KEY);
+    return isThemePreference(raw) ? raw : 'system';
+  } catch {
+    return 'system'; // private mode, blocked storage, quota
+  }
+}
+```
+
+**The stored string is never evaluated as CSS or as code.** It is compared against a fixed
+allowlist and then used only to pick one of two literal attribute values. It is never
+interpolated into a stylesheet, a `style` attribute, a class name, a selector, an
+`innerHTML`, a `Function`, or an `eval`. There is no path from `localStorage` to the CSSOM.
+
+Any value not in the allowlist — a typo, a stale value from an older build, a string another
+tab wrote, a value a user typed into DevTools — falls back to `system` **and is not rewritten**.
+Silently overwriting it would hide the fact that something is writing junk to that key.
+
+The same allowlist governs the write side. `setPreference` takes `ThemePreference`, so an
+invalid value cannot be stored through the service at all.
+
+### 6.2 Cross-device persistence — THM-B01, phase two
+
+`localStorage` is per browser profile. Sign in on a laptop and on a lab machine and you set the
+preference twice. **THM-B01 closes that**, and this section is the contract it builds to, so the
+card can be specified now and landed after THM-F01 without reopening anything here.
+
+The client-only store is not "local forever". It is phase one of two.
+
+| Phase            | Store                                    | Ticket  |
+| ---------------- | ---------------------------------------- | ------- |
+| One, ships first | `localStorage` only                      | THM-F01 |
+| Two, adds to it  | `localStorage` **plus** the user account | THM-B01 |
+
+Phase two **adds** a store. It does not replace one, and it changes nothing in section 4,
+section 5 or the startup script. Five rules hold the two stores together.
+
+**1. Local is always the boot store.** The script in section 11 runs before the app has a
+session, so `localStorage` is the only thing it can read. The account value is not reachable at
+first paint and must never be waited on, or the no-flash guarantee is gone. Phase two therefore
+does not touch startup at all.
+
+**2. The account stores the preference, never the resolved theme.** A user who picked `system`
+has `system` on their account. It never becomes `dark` because their operating system was dark
+when they last signed in. Same three values, same allowlist as 6.1, validated again server-side.
+This is the rule that keeps section 15's objection answered: the account never learns the user's
+OS appearance.
+
+**3. Conflict is settled by last write, not by store.** Neither side outranks the other.
+
+- The device writes `ontrack.theme.preference.updatedAt`, an ISO 8601 string, beside the
+  preference. A **second** key on purpose, so the key section 11 reads stays a bare allowlisted
+  enum and the boot script never parses a date.
+- The API carries the equivalent beside its field.
+- The device records the numeric account id beside the sync timestamp. This provenance marker is
+  not part of first paint. A missing marker is the legacy phase-one state and may migrate once;
+  a marker for another account makes the retained theme presentation-only until the incoming
+  account is reconciled or that person makes a real choice.
+- Newer wins. On a tie the account value wins, so two devices cannot ping-pong.
+- The winner is written to **both** sides in the same pass, so one round trip converges them.
+
+**Presence beats recency, and timestamps are only consulted when both sides hold a value.** This
+is the rule that decides the migration, so it is written as a table rather than as prose. Read
+"has a preference" as "holds one of the three allowlisted strings"; anything else is treated as
+absent, per 6.1.
+
+| Local preference | Account preference | Outcome                                                                        |
+| ---------------- | ------------------ | ------------------------------------------------------------------------------ |
+| absent           | absent             | Nothing is stored on either side. Follow `system`. Write nothing anywhere.     |
+| absent           | present            | Adopt the account value and write it locally. Rule 4.                          |
+| **present**      | **absent**         | **Keep the local value, upload it, and stamp `updatedAt` at the moment of the upload.** |
+| present          | present            | Compare timestamps. Newer wins, tie goes to the account.                        |
+
+Only the fourth row consults a timestamp. So "a local timestamp that is missing, unparseable or
+in the future counts as older, and the account value is taken" applies **inside that row only**,
+where the account demonstrably holds a real choice. It must never be read as licence to discard a
+local preference against an empty account field.
+
+**Why the third row matters more than it looks.** It is not an edge case, it is day one of
+THM-B01 for the entire existing user base. Phase one writes only
+`ontrack.theme.preference`; the `updatedAt` key does not exist until phase two introduces it. So
+on the morning THM-B01 ships, every user who ever touched the toggle has a valid local
+preference, **no** local timestamp, and an empty account field. Under a naive reading of the
+timestamp clause — missing timestamp counts as older, so take the account — every one of them
+would silently have their theme reset to `system` by a backend migration they did not ask for.
+Presence beating recency is what prevents that, and it is why the ordering is fixed here rather
+than left to THM-B01.
+
+Two consequences that follow from the third row and are intended:
+
+- **The upload stamps `now`, and does not backdate.** The device cannot know when the preference
+  was originally chosen, and inventing a plausible earlier timestamp would be fabricating the
+  input to a conflict resolution. `now` is the honest value.
+- **If the same user migrates on two devices, the later sign-in wins.** Device A signs in, finds
+  an empty account, and uploads `dark` stamped `T1`. Device B signs in at `T2` holding `light`
+  with no timestamp; the account now has a value, so row four applies, B's missing timestamp
+  counts as older, and B adopts `dark`. Deterministic, converges in one pass, no ping-pong. It
+  does mean one device's pre-migration choice is dropped, which is the price of having no
+  timestamp to compare, and THM-Q01 should confirm it looks like a single repaint rather than a
+  fight.
+
+**4. A device that has never set a preference adopts the account value.** Nothing valid in
+`localStorage` means nothing to compare, so the account value is adopted, written locally, and
+the next boot on that device is flash-free. Until the response lands, that first session follows
+`system`. One repaint, on the first session on a new device, is the accepted cost of rule 1. It
+is stated behaviour, not a defect for THM-Q01 to raise. Where the account is *also* empty, row
+one of the table applies and nothing is written at all — a brand-new user is not given a stored
+preference they never chose.
+
+**5. The sync never blocks and never fails loudly.** A 4xx, a 5xx, an offline device, or a
+request still in flight, all leave the local value applied and in charge. The retry is the next
+boot. A theme preference is not worth a spinner, a toast or an error state.
+
+Two further constraints, both review gates.
+
+- **Sign-out does not clear the key.** It is presentation state, not session state. The next
+  person on a shared machine sees the previous theme until their own preference arrives, then it
+  repaints. The ownership marker prevents that retained choice or timestamp from being uploaded
+  to the next person's account; if their account is empty, it remains presentation-only until
+  they make a real choice. Clearing the theme would reintroduce a flash for the common single-user
+  case to fix the rare shared-machine one.
+- **Writes are debounced and only fire on a real change.** Cycling the toggle three times sends
+  one request.
+
+What THM-B01 owns and this document does not decide: the field name, whether it hangs off the
+user record or a separate preferences table, and the endpoint shape. Those are `doubtfire-api`
+decisions made with that repo's reviewers. The three values, the allowlist, last-write-wins, and
+"preference not resolved theme" are fixed here and are not THM-B01's to change.
+
+---
+
+## 7. Semantic tokens
+
+Every one of these is a **role**, not a place. There is no `--ot-dashboard-bg`. If a page needs
+a colour that is not here, that is a conversation in the theme thread, not a new hex in a
+component stylesheet.
+
+**Derivation.** The light column is the M2 light theme the app renders today (section 2.3),
+flattened where Material used alpha, and darkened in 0.5% HSL lightness steps only where the
+current value misses 4.5:1 against the **page** background `#fafafa`, which is the worst case.
+The dark column is taken from the neutral and primary ramps in the already-checked-in
+`src/styles/m3-theme.scss`, so the dark greys are not invented either, then lifted the same way
+where needed. Ratios were computed, not estimated. Appendix A has the script.
+
+| Token                        | Role                                                      | Light     | Dark      | Worst-case ratio      |
+| ---------------------------- | --------------------------------------------------------- | --------- | --------- | --------------------- |
+| `--ot-color-page`            | Page background behind everything                         | `#fafafa` | `#131316` | —                     |
+| `--ot-color-surface`         | Cards, dialogs, table bodies, panels                      | `#ffffff` | `#201f23` | —                     |
+| `--ot-color-surface-raised`  | Menus, popovers, sticky headers, anything above a surface | `#ffffff` | `#2a292d` | —                     |
+| `--ot-color-text`            | Body and heading text                                     | `#212121` | `#e5e1e6` | 11.18 on dark raised  |
+| `--ot-color-text-muted`      | Secondary text, captions, hints                           | `#616161` | `#adaaaf` | 5.93 on light page    |
+| `--ot-color-border`          | Control boundaries: inputs, outlined buttons, chips       | `#8a8a8a` | `#78767a` | 3.21 on dark raised   |
+| `--ot-color-divider`         | Decorative rules between rows and sections                | `#e0e0e0` | `#353438` | n/a, decorative       |
+| `--ot-color-focus`           | Focus ring                                                | `#3939ff` | `#c0c1ff` | 6.28 light, 8.47 dark |
+| `--ot-color-link`            | Inline links                                              | `#3939ff` | `#c0c1ff` | 6.28 on light page    |
+| `--ot-color-primary`         | Primary actions, active nav, brand accents                | `#3939ff` | `#c0c1ff` | 6.28 on light page    |
+| `--ot-color-on-primary`      | Text and icons on a primary fill                          | `#ffffff` | `#131316` | 6.56 / 10.87          |
+| `--ot-color-success`         | Success text and icons                                    | `#398239` | `#5bb75b` | 4.55 on light page    |
+| `--ot-color-warning`         | Warning text and icons                                    | `#a56504` | `#eb8f06` | 4.51 on light page    |
+| `--ot-color-error`           | Error text, invalid fields, destructive actions           | `#d73613` | `#ef6445` | 4.53 on dark raised   |
+| `--ot-color-info`            | Informational text and icons                              | `#0075d0` | `#0792ff` | 4.52 on light page    |
+| `--ot-color-inverse-surface` | Snackbars, tooltips, anything inverted                    | `#212121` | `#e5e1e6` | —                     |
+| `--ot-color-inverse-text`    | Text on an inverse surface                                | `#fafafa` | `#201f23` | 15.43 / 12.67         |
+
+Three notes that are part of the contract, not commentary.
+
+- **`--ot-color-surface` and `--ot-color-surface-raised` are the same value in light** (`#ffffff`).
+  In light mode a raised surface is separated by `--ot-elevation-1`, not by hue. In dark mode it
+  is separated by hue, because shadows do not read on a dark ground. **Never rely on the
+  raised-versus-surface difference alone to communicate anything.**
+- **`--ot-color-border` and `--ot-color-divider` are different tokens on purpose.** WCAG 1.4.11
+  requires 3:1 for boundaries that carry meaning, such as the edge of a text input. It does not
+  apply to a decorative rule between two table rows. `--ot-color-border` clears 3:1 in both
+  themes. `--ot-color-divider` does not, and must never be used as a control boundary.
+- **`--ot-color-text-muted` in light is `#616161`, not the `#757575` the app uses today**, because
+  `#757575` measures 4.41 against `--ot-color-page`. This is a real fix, not a restyle.
+
+---
+
+## 8. Domain tokens
+
+### 8.1 Task status
+
+Fifteen statuses. The method, applied in order: keep the shipped fill if white text on it already
+clears 4.5:1; otherwise keep the shipped fill and use `--ot-color-text` (`#212121`) if that
+clears 4.5:1; only if neither works, darken the fill in 0.5% HSL lightness steps, hue and
+saturation held, until white text reaches 4.5:1. **Thirteen of fifteen fills come through
+unchanged.** The dark fill is a container: same hue, same saturation, lightness pinned to 22%.
+The dark on-fill is the same hue lifted until it clears 4.5:1 on that container.
+
+| Status                | Shipped fill | `--ot-status-*` light | `-on` light | Ratio | `--ot-status-*` dark | `-on` dark | Ratio |
+| --------------------- | ------------ | --------------------- | ----------- | ----- | -------------------- | ---------- | ----- |
+| `ready-for-feedback`  | `#0079d8`    | `#0078d5`             | `#ffffff`   | 4.52  | `#003f70`            | `#47aeff`  | 4.51  |
+| `not-started`         | `#cccccc`    | `#cccccc`             | `#212121`   | 10.03 | `#383838`            | `#a1a1a1`  | 4.54  |
+| `working-on-it`       | `#eb8f06`    | `#eb8f06`             | `#212121`   | 6.49  | `#6d4303`            | `#fab042`  | 4.63  |
+| `need-help`           | `#a48fce`    | `#a48fce`             | `#212121`   | 5.67  | `#31224e`            | `#9d86ca`  | 4.56  |
+| `fix-and-resubmit`    | `#f2d85c`    | `#f2d85c`             | `#212121`   | 11.31 | `#685708`            | `#f1d44c`  | 4.83  |
+| `feedback-exceeded`   | `#d46b54`    | `#d46b54`             | `#212121`   | 4.62  | `#5a2317`            | `#dc8572`  | 4.53  |
+| `redo`                | `#804000`    | `#804000`             | `#ffffff`   | 7.92  | `#703800`            | `#ff9e3d`  | 4.53  |
+| `discuss`             | `#31b0d5`    | `#31b0d5`             | `#212121`   | 6.37  | `#134c5d`            | `#5ec1de`  | 4.58  |
+| `rediscuss`           | `#126352`    | `#126352`             | `#ffffff`   | 7.16  | `#115f4f`            | `#5be1c5`  | 4.69  |
+| `demonstrate`         | `#428bca`    | `#337ab7`             | `#ffffff`   | 4.56  | `#193a58`            | `#6ea6d6`  | 4.53  |
+| `complete`            | `#5bb75b`    | `#5bb75b`             | `#212121`   | 6.42  | `#224e22`            | `#78c478`  | 4.57  |
+| `fail`                | `#d93713`    | `#d93713`             | `#ffffff`   | 4.66  | `#671a09`            | `#f17c62`  | 4.51  |
+| `time-exceeded`       | `#d93713`    | `#d93713`             | `#ffffff`   | 4.66  | `#671a09`            | `#f17c62`  | 4.51  |
+| `assess-in-portfolio` | `#f2d85c`    | `#f2d85c`             | `#212121`   | 11.31 | `#685708`            | `#f1d44c`  | 4.83  |
+| `attention-required`  | `#f1814d`    | `#f1814d`             | `#212121`   | 6.12  | `#682708`            | `#f28a5a`  | 4.55  |
+
+Token names are `--ot-status-<key>` and `--ot-status-<key>-on`, where `<key>` is the existing
+kebab-case class from `TaskStatus.statusClass()`.
+
+Only two light fills move: `ready-for-feedback` (`#0079d8` → `#0078d5`) and `demonstrate`
+(`#428bca` → `#337ab7`). Six flip their foreground from `#ffffff` to `--ot-color-text` with the
+fill untouched — `working-on-it`, `need-help`, `feedback-exceeded`, `discuss`, `complete`,
+`attention-required`. Three keep their fill and move their foreground off the shipped `#444444`
+onto the same token — `not-started`, `fix-and-resubmit`, `assess-in-portfolio`. That leaves four
+untouched in both fill and foreground: `redo`, `rediscuss`, `fail`, `time-exceeded`.
+
+Thirteen of fifteen dark fills are distinct. The two collisions are `fail`/`time-exceeded` and
+`fix-and-resubmit`/`assess-in-portfolio`, which already share a base colour today. No **new**
+collision is introduced.
+
+**The two-maps problem must be closed during the shared-component migration, not carried
+forward.** No card on the board names it in its own words, and both files are shared rather than
+per-page — `src/styles/common/task-status-colors.scss` and `src/app/api/models/task-status.ts` —
+so it belongs to **THM-M01, shell and shared components**, and THM-JL01 should confirm that when
+the card is written up. After migration `STATUS_COLORS` in `task-status.ts` is deleted and any
+TypeScript that needs a status colour reads `var(--ot-status-<key>)`. Where a JS value is
+unavoidable (charts), it is read once via
+`getComputedStyle(document.documentElement).getPropertyValue(...)` and re-read on theme change.
+One source of truth, in CSS.
+
+### 8.2 Everything else
+
+| Group     | Token                         | Light                        | Dark                         | Note                                                             |
+| --------- | ----------------------------- | ---------------------------- | ---------------------------- | ---------------------------------------------------------------- |
+| Urgency   | `--ot-urgency-overdue`        | `#c94823`                    | `#e06f4f`                    | from `#da532c`; 4.54 light page, 4.51 dark raised                |
+|           | `--ot-urgency-soon`           | `#a56504`                    | `#fab143`                    | from `#fab143`; 4.51 light page, 7.87 dark raised                |
+|           | `--ot-urgency-later`          | `#616161`                    | `#adaaaf`                    | alias of `--ot-color-text-muted`; replaces `text-gray-500`       |
+| Charts    | `--ot-chart-1`                | `#3939ff`                    | `#6c6cff`                    | series slots, ≥3:1 vs their own page (1.4.11); worst 3.02 / 4.52 |
+|           | `--ot-chart-2`                | `#0079d8`                    | `#007fe2`                    |                                                                  |
+|           | `--ot-chart-3`                | `#58a152`                    | `#5aa454`                    |                                                                  |
+|           | `--ot-chart-4`                | `#e44d25`                    | `#e44d25`                    |                                                                  |
+|           | `--ot-chart-5`                | `#a8385d`                    | `#c7587d`                    |                                                                  |
+|           | `--ot-chart-6`                | `#d07e05`                    | `#eb8f06`                    |                                                                  |
+|           | `--ot-chart-grid`             | `#e0e0e0`                    | `#353438`                    | gridlines, decorative                                            |
+|           | `--ot-chart-axis`             | `#616161`                    | `#adaaaf`                    | axis labels are text, 4.5:1                                      |
+| Code      | `--ot-code-surface`           | `#f5f5f5`                    | `#0e0e11`                    | `<pre>`, ANSI output, diff panes                                 |
+|           | `--ot-code-text`              | `#212121`                    | `#e5e1e6`                    | 14.77 / 14.91 on their own surface                               |
+|           | Monaco theme name             | `vs`                         | `vs-dark`                    | not a CSS var; set in TS from the resolved theme                 |
+| Overlays  | `--ot-scrim`                  | `rgba(0, 0, 0, 0.32)`        | `rgba(0, 0, 0, 0.60)`        | dialog and drawer backdrop                                       |
+|           | `--ot-elevation-1`            | `0 1px 3px rgba(0,0,0,0.12)` | `0 1px 3px rgba(0,0,0,0.50)` | shadow, not colour                                               |
+| Disabled  | `--ot-color-disabled-text`    | `#9e9e9e`                    | `#6f6d72`                    | 1.4.3 exempts inactive controls; still needs a non-colour cue    |
+|           | `--ot-color-disabled-surface` | `#eeeeee`                    | `#2a292d`                    |                                                                  |
+| Selection | `--ot-color-selected`         | `#e7e7ff`                    | `#2e2e5c`                    | selected row or chip fill                                        |
+|           | `--ot-color-selected-text`    | `#212121`                    | `#e5e1e6`                    | 13.24 / 9.78                                                     |
+|           | `--ot-color-hover`            | `rgba(0, 0, 0, 0.04)`        | `rgba(255, 255, 255, 0.06)`  | matches the M2 `hover` slot already in use                       |
+
+`--ot-color-selected` light is `#e7e7ff`, which is `formatif-blue-lighter` from
+`tailwind.config.js` and `$md-formatif.50` from `theme.scss`. It is already the app's selection
+tint, it just had no name.
+
+---
+
+## 9. Fixed brand vs theme-aware
+
+| Fixed in both themes                                                                       | Why                                                                                                                          |
+| ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| `#3939ff` as the **brand mark** — the logo, the favicon, `icon.svg`, the PWA `theme_color` | Brand identity. A logo that changes colour is a different logo.                                                              |
+| The status **identity**, meaning which hue means `complete`                                | Green means complete in both themes. Teaching staff read these chips daily and re-learning them in dark mode is a real cost. |
+| `#da532c`, `$doubtfire-color` in `variables.scss`                                          | Legacy brand colour. Keep or retire it, do not theme it.                                                                     |
+
+| Theme-aware                                                 | Why                                                                                                                                |
+| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `--ot-color-primary`, `--ot-color-link`, `--ot-color-focus` | `#3939ff` is 6.28:1 on the light page, 2.83:1 on the dark page and 2.20:1 on the worst-case dark raised surface. It misses 4.5:1 for text and 3:1 for a focus ring, so the brand blue cannot be the dark-mode interactive colour. |
+| Every status **fill and foreground**                        | The hue stays recognisable; the lightness has to move or the chip is unreadable. Section 8.1.                                      |
+| All surfaces, text, borders, dividers, shadows, scrims      | Definitionally.                                                                                                                    |
+| Chart series                                                | A series colour is a graphical object under WCAG 1.4.11 and needs 3:1 against its own ground.                                      |
+| The `theme-color` meta tag                                  | Section 12.                                                                                                                        |
+
+The distinction in one sentence: **the brand mark is fixed, the brand as an interface colour is
+theme-aware.**
+
+---
+
+## 10. Who may declare a colour, and how each layer reads the tokens
+
+Four layers. Exactly one of them is allowed to contain a colour value.
+
+| Layer                                                           | May declare a colour?  | Job                                                                           |
+| --------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------- |
+| **Token layer** — `src/styles/tokens/_light.scss`, `_dark.scss` | **Yes, and only here** | Declare every `--ot-*` for one theme. Two files, two blocks, no logic.        |
+| **Material theme** — `src/theme.scss`                           | Transitional           | M2 palettes stay until section 3 step 4 retires them. No new colour goes in.  |
+| **Shared SCSS** — `src/styles/common`, `src/styles/mixins`      | No                     | Mixins and layout. Colour only through `var(--ot-*)`.                         |
+| **Component SCSS and templates**                                | No                     | Consume `var(--ot-*)` or a Tailwind utility. A new hex is a review rejection. |
+
+### Tailwind
+
+Tailwind must **map** to the tokens, never restate them. Tailwind 4 is in use with a v3-style
+JS config loaded through `@config '../tailwind.config.js'` from `src/styles.scss` and
+`src/tailwind-intellisense.css`. Extend the theme with `var()` references:
+
+```js
+// tailwind.config.js
+theme: {
+  extend: {
+    colors: {
+      'formatif-blue': '#3939ff',                    // brand mark, stays literal
+      'formatif-blue-lighter': '#e7e7ff',
+      page: 'var(--ot-color-page)',
+      surface: 'var(--ot-color-surface)',
+      'surface-raised': 'var(--ot-color-surface-raised)',
+      content: 'var(--ot-color-text)',
+      muted: 'var(--ot-color-text-muted)',
+      border: 'var(--ot-color-border)',
+      divider: 'var(--ot-color-divider)',
+      primary: 'var(--ot-color-primary)',
+      link: 'var(--ot-color-link)',
+      success: 'var(--ot-color-success)',
+      warning: 'var(--ot-color-warning)',
+      error: 'var(--ot-color-error)',
+      info: 'var(--ot-color-info)',
+    },
+  },
+},
+```
+
+`bg-surface text-content border-border` then resolves per theme with **no dark variant on a
+colour utility**. Tokens are the default and they stay the default. A `dark:bg-x` on a colour
+doubles every class list and moves the palette back into templates, which is the thing this
+contract exists to stop.
+
+#### The dark variant is configured and pointed at the marker — THM-F03
+
+`darkMode` is not set today, and leaving it unset is **not** the same as having no dark variant.
+Tailwind's default `dark:` is `@media (prefers-color-scheme: dark)`. So the prefix already works
+in this build, and it already **follows the operating system and ignores the stored
+preference**. A `dark:bg-black` written today stays dark for a user whose preference is `light`,
+which breaks rule 2 of section 4 without anyone editing a line of this contract.
+
+Configuring it is a correctness fix before it is a feature. **THM-F03 binds the variant to
+`data-ot-theme`**, the marker section 5 fixes, so the app has one dark authority and it is the
+resolved theme:
+
+```css
+/* src/styles.scss, beside the existing @config line */
+@custom-variant dark (&:where([data-ot-theme='dark'], [data-ot-theme='dark'] *));
+```
+
+Tailwind here is `4.3.1` driven by a v3-style JS config through `@config` (`src/styles.scss:7`
+and `src/tailwind-intellisense.css:2`), so the legacy
+`darkMode: ['selector', '[data-ot-theme="dark"]']` may be honoured as well. **THM-F03 picks one
+form, proves it with a build, and records which.** Two mechanisms for one variant is how they
+drift apart.
+
+Three rules bound what the variant is then for.
+
+1. **Never for a colour that already has a token.** `bg-surface` flips on its own.
+   `dark:bg-[#201f23]` is a rejection and so is `dark:bg-surface-raised`.
+2. **Yes for what a custom property cannot carry.** A different asset, `dark:invert` on the PDF
+   viewer canvas, a border width, an opacity, a `mix-blend-mode`, a shadow that has to change
+   shape rather than colour. Section 7 has no token for these and never will.
+3. **Yes for third-party CSS the token layer cannot reach**, where a `dark:` utility carried by
+   `important: true` is a smaller intervention than forking a vendor stylesheet.
+
+`dark:` on a colour utility is a lint violation (rule 2 below). `dark:` on anything else is
+allowed and needs no exception.
+
+`important: true` stays as it is. It is what lets a utility override Material today, and
+changing it is out of scope.
+
+### Shared SCSS
+
+```scss
+// src/styles/mixins/_surface.scss
+@mixin card-surface {
+  background-color: var(--ot-color-surface, #ffffff);
+  color: var(--ot-color-text, #212121);
+  border: 1px solid var(--ot-color-border, #8a8a8a);
+}
+```
+
+The fallback is the current light value. That is the rollback guarantee from section 3, applied
+at every call site.
+
+### Material
+
+Material components are pulled onto the tokens with `mat.theme-overrides()` inside the same two
+theme blocks, one component group per PR:
+
+```scss
+:root[data-ot-theme='dark'] {
+  @include mat.theme-overrides(
+    (
+      surface: var(--ot-color-surface),
+      on-surface: var(--ot-color-text),
+      outline: var(--ot-color-border),
+    )
+  );
+}
+```
+
+### The three lint rules that hold the line
+
+These belong in MG-05 and are proposed here so the reviewer knows what to enforce until then.
+
+1. No hex, `rgb()` or `hsl()` literal in any file under `src/app`. Grep gate in CI, allowlist the
+   token files and `theme.scss`.
+2. No Tailwind arbitrary colour value, and no `dark:` prefix on a colour utility.
+   `eslint-plugin-tailwindcss` is already wired (`eslint.config.js:89-101`); add
+   `tailwindcss/no-arbitrary-value` for colour utilities, and a grep gate for
+   `dark:(bg|text|border|fill|stroke|ring|outline|from|via|to)-`.
+3. No new `--ot-*` name without an entry in section 7 or 8 of this document.
+
+Today's baseline for rule 1 is **226** literals in component SCSS under `src/app` plus 20 Tailwind
+arbitrary colour values across 9 template files, measured on `11.0.x` at `4034e7d1a`. That number
+is the migration burn-down and should only go down.
+
+**Re-measure it before quoting it.** This baseline read 105 when it was first taken, against
+`efda57967` at 09:24 the same morning. One closure merge landed at 22:00 and it became 226. The
+figure more than doubled inside thirteen hours, so a burn-down target copied out of this document
+a week from now will be wrong. THM-M01 should re-run the command on the commit it actually
+branches from and record that figure on its own card rather than inheriting this one.
+
+---
+
+## 11. Startup and live system changes
+
+### Live OS changes
+
+`ThemeService` holds one listener for the whole app lifetime. It fires only when the stored
+preference is `system`.
+
+```ts
+private readonly query = window.matchMedia('(prefers-color-scheme: dark)');
+
+constructor() {
+  this.query.addEventListener('change', () => {
+    if (this.preference() === 'system') {
+      this.applyResolved();
+    }
+  });
+}
+```
+
+- `addEventListener('change', ...)`, not the deprecated `addListener`.
+- Registered once, in a root-provided service, and removed on destroy. One listener, not one per
+  component.
+- No reload, no re-render of the router outlet. Changing `data-ot-theme` repaints via CSS.
+- Charts and Monaco cannot repaint from CSS, so the service also emits a signal that those
+  components subscribe to in order to re-read their colours. That subscription is part of
+  THM-M04, and this is the hook it uses.
+
+### No-flash startup — THM-F04
+
+Two cards touch startup. THM-F01 builds the foundation, which includes System detection and
+persistence, and THM-F04 specifies and implements the no-flash mechanism. They overlap, so the
+split is fixed here: **THM-F04 writes the `<head>` script below and the drift test in section 14
+item 15. THM-F01 consumes whatever that script already set, at bootstrap, and owns the theme
+from that point on.** Neither card writes the other's half.
+
+The wrong theme flashing for one frame on every page load is the single most visible defect a
+theme feature can ship. Angular bootstraps after `<body>` paints, so the marker has to be set
+before that. One small blocking inline script in `<head>` of `src/index.html`, before any
+stylesheet:
+
+```html
+<script>
+  (function () {
+    var t = 'light';
+    try {
+      var v = localStorage.getItem('ontrack.theme.preference');
+      if (v !== 'light' && v !== 'dark') v = 'system';
+      t =
+        v === 'system'
+          ? window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+          : v;
+    } catch (e) {
+      /* storage blocked; fall through to light */
+    }
+    var d = document.documentElement;
+    d.setAttribute('data-ot-theme', t);
+    d.style.colorScheme = t;
+  })();
+</script>
+```
+
+Constraints on that script, all reviewable:
+
+- **Inline and synchronous.** A deferred or external script paints late and the flash returns.
+- **Under 400 bytes, no dependencies**, so it cannot meaningfully delay first paint.
+- **The whole body is inside `try`.** Safari private mode throws on `localStorage.getItem`.
+  Anything thrown here would block the app from booting at all.
+- **It writes only `'light'` or `'dark'`.** The stored value never reaches `setAttribute`
+  directly. This is the same allowlist as section 6, restated in the one place that runs before
+  the service exists.
+- **It duplicates the storage key as a literal.** That is deliberate: it runs before any module
+  loads, so it cannot import the constant. THM-T01 must assert the literal in `index.html`
+  matches `THEME_STORAGE_KEY` in the service, or the two will drift.
+- `d.style.colorScheme = t` makes native scrollbars, `<select>` popups, date pickers and form
+  control chrome follow the theme. Without it those stay light on a dark page.
+
+`ThemeService` re-reads the same value at bootstrap and becomes the owner from then on. It does
+not assume the script ran, so if the script is stripped by a CSP or a proxy the app is still
+correct, just with one frame of flash.
+
+### Safe fallback chain
+
+| Condition                            | Result                                              |
+| ------------------------------------ | --------------------------------------------------- |
+| Script ran, valid stored value       | That theme                                          |
+| Script ran, invalid or missing value | `system`, resolved from the OS                      |
+| Storage throws                       | `system`, resolved from the OS                      |
+| `matchMedia` unavailable             | `light`                                             |
+| Script did not run at all            | Light, from the bare `:root` block in section 5     |
+| CSS custom properties unsupported    | Every `var()` falls back to its literal light value |
+
+At no point does the app render unreadable, and at no point does it land in dark because
+something failed.
+
+---
+
+## 12. Accessibility rules
+
+These are the floor. A PR that misses one does not merge.
+
+**Contrast.** Body and UI text ≥ 4.5:1 against the surface it sits on, measured against the
+**worst** surface it can appear on, not the most convenient. Large text (≥18.66px bold or ≥24px)
+≥ 3:1. Control boundaries, focus rings, icons that carry meaning, and chart series ≥ 3:1
+(WCAG 1.4.11). Inactive controls are exempt from 1.4.3, but the exemption is not a licence to
+make them invisible.
+
+**Focus.** Every interactive element has a visible `:focus-visible` ring using
+`--ot-color-focus`, at least 2px, with a 2px offset so it clears the control's own border. The
+ring must be visible against **both** the control and the surface behind it: measured 6.28:1
+light and 8.47:1 dark, worst case. **The 11 existing `outline: none` declarations must each be
+audited and either paired with a replacement ring or removed** — that is a named item in THM-F01,
+not a nice-to-have.
+
+**Never colour alone.** WCAG 1.4.1. Colour is a second channel, never the only one.
+
+| Where                                     | Required non-colour cue                                                                                                                                  |
+| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Task status chip                          | The status **label text** and its `STATUS_MATERIAL_ICONS` icon. Both already exist in `task-status.ts` and neither may be dropped for a colour-only dot. |
+| A colour-only status dot in a dense table | Not permitted without an accessible name. Minimum: `aria-label` with the status label plus a distinct icon or shape.                                     |
+| Due-date urgency                          | The existing `hourglass_bottom` icon plus the `timeToDue()` text stay. Weight (`font-bold` for overdue) is a supporting cue, not a substitute.           |
+| Form validation                           | Icon plus a text message. Red border alone is not a validation state.                                                                                    |
+| Chart series                              | Legend text, plus dash pattern or marker shape for lines and a direct label or pattern for stacked areas.                                                |
+| Disabled controls                         | `disabled` / `aria-disabled` and a `not-allowed` cursor, not only a lighter grey.                                                                        |
+
+**Reduced motion.** The app has two `prefers-reduced-motion` blocks today, both component-local
+(`demo-controls.component.scss:497` and `ppi-widget.component.scss:503`) and neither app-wide. So
+the global rule below is still new work, and it is the first thing the theme has to respect:
+
+```scss
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+```
+
+The theme swap itself is instant regardless. A cross-fade between two full-page colour schemes
+reads as a flicker and is a vestibular trigger.
+
+**Print — THM-M04.** No `@media print` rules exist. Portfolios and feedback get printed, so:
+
+- Print always uses the **light** token values, whatever is on screen. Add
+  `@media print { :root { /* light values */ } }` in the token layer.
+- Status must survive greyscale. In print, a status chip carries its label text and its icon; a
+  colour-only chip is not acceptable output.
+- `--ot-scrim` and `--ot-elevation-1` are suppressed in print.
+
+**Browser and PWA chrome — THM-W01.** `src/index.html:24` and `src/manifest.webmanifest:22` both
+pin `#3939ff` today, which paints a bright blue browser bar above a dark page.
+
+- Keep the static `<meta name="theme-color" content="#3939ff">` as the default for browsers that
+  ignore media queries, and add two media-scoped tags:
+  ```html
+  <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="#131316" media="(prefers-color-scheme: dark)" />
+  ```
+- Those follow the **OS**, not the stored preference, because the tag is read before the app
+  boots. When the stored preference is an explicit `light` or `dark` that disagrees with the OS,
+  `ThemeService` updates the tag's `content` at runtime to match the resolved theme. This is the
+  one place the resolved theme is written outside the DOM marker, and it is allowed.
+- `manifest.webmanifest` keeps `"theme_color": "#3939ff"` — it is the install-time brand colour,
+  not a runtime surface. `"background_color"` stays `#ffffff` because the splash screen is shown
+  before any preference can be read.
+
+---
+
+## 13. Component-state matrix
+
+THM-F01's implementation proof must ship one page that demonstrates every cell, in both themes.
+Read as: _which token supplies the state's colour_.
+
+| State                | Surface                                                  | Text                       | Border               | Extra signal                                          |
+| -------------------- | -------------------------------------------------------- | -------------------------- | -------------------- | ----------------------------------------------------- |
+| **Normal**           | `--ot-color-surface`                                     | `--ot-color-text`          | `--ot-color-border`  | —                                                     |
+| **Hover**            | `--ot-color-surface` over `--ot-color-hover`             | `--ot-color-text`          | `--ot-color-border`  | cursor change                                         |
+| **Focus**            | unchanged from normal                                    | unchanged                  | unchanged            | 2px `--ot-color-focus` ring, 2px offset               |
+| **Active** (pressed) | `--ot-color-surface` over `--ot-color-hover` at 2× alpha | `--ot-color-text`          | `--ot-color-border`  | may hold focus ring simultaneously                    |
+| **Selected**         | `--ot-color-selected`                                    | `--ot-color-selected-text` | `--ot-color-primary` | `aria-selected` / `aria-current`                      |
+| **Disabled**         | `--ot-color-disabled-surface`                            | `--ot-color-disabled-text` | `--ot-color-divider` | `aria-disabled`, `cursor: not-allowed`, not focusable |
+| **Success**          | `--ot-color-surface`                                     | `--ot-color-success`       | `--ot-color-success` | `check_circle` icon + message text                    |
+| **Warning**          | `--ot-color-surface`                                     | `--ot-color-warning`       | `--ot-color-warning` | `warning` icon + message text                         |
+| **Error**            | `--ot-color-surface`                                     | `--ot-color-error`         | `--ot-color-error`   | `error` icon + message text, `aria-describedby`       |
+
+Rules the matrix enforces:
+
+- **Focus and hover are independent.** A keyboard user who has not moved the mouse must still see
+  the ring. Do not fold focus styling into `:hover`.
+- **Focus and selected are independent.** A selected-but-unfocused row and a focused-but-unselected
+  row must be distinguishable.
+- **Active never removes the focus ring.**
+- **Success, warning and error each require a second channel.** A coloured border alone fails
+  1.4.1 and is the most common way this matrix gets half-implemented.
+- Every cell is proven **twice**, once per theme.
+
+---
+
+## 14. Handover to THM-T01 (automated tests and visual regression) and THM-Q01 (independent validation)
+
+### THM-T01 — automated, `vitest` via `ng test`, plus visual regression
+
+`ThemeService`
+
+1. No stored value resolves to preference `system`.
+2. Stored `light` resolves to `light`; stored `dark` resolves to `dark`; stored `system` resolves
+   from `matchMedia`.
+3. Stored `"Dark"`, `"midnight"`, `""`, `"{}"`, `"<script>"` each resolve to `system`.
+4. An invalid stored value is **not** overwritten in `localStorage`.
+5. `localStorage.getItem` throwing resolves to `system` and does not throw out of the service.
+6. `localStorage.setItem` throwing leaves the in-memory preference applied and does not throw.
+7. `setPreference('dark')` writes exactly the string `dark` to `ontrack.theme.preference` and
+   nothing else.
+8. Setting each of the three preferences sets `data-ot-theme` to `light` or `dark` only — assert
+   the attribute is never `system`.
+9. With preference `system`, firing the `matchMedia` `change` event flips `data-ot-theme` with no
+   reload.
+10. With preference `light` or `dark`, firing the same event does **not** change
+    `data-ot-theme`.
+11. The `change` listener is registered once and removed on destroy.
+12. `document.documentElement.style.colorScheme` tracks the resolved theme.
+
+Token layer
+
+13. Snapshot every `--ot-*` name declared under `:root` and under `:root[data-ot-theme='dark']`;
+    fail if the two sets differ. A token defined in one theme only is the bug this catches.
+14. Contrast regression test: a table of `(token, background token, minimum ratio)` from sections
+    7 and 8, computed with the same formula as Appendix A, run over both themes. Fail on any pair
+    below its minimum. This is the test that stops someone "adjusting" a green.
+
+Wiring
+
+15. The theme-storage key literal in `src/index.html` equals `THEME_STORAGE_KEY` in the service.
+16. Toggle component: renders three options, marks the stored one, and calls `setPreference` with
+    the matching value.
+17. Grep gate: zero hex, `rgb()` or `hsl()` literals under `src/app/**/*.scss` outside the
+    allowlist, and zero Tailwind arbitrary colour values in `src/app/**/*.html`.
+
+Tailwind dark variant — THM-F03
+
+18. A `dark:` utility resolves off `data-ot-theme`, not off `prefers-color-scheme`. Assert both
+    directions: attribute `dark` with the media query reporting light applies the utility;
+    attribute `light` with the media query reporting dark does not.
+19. Grep gate: zero `dark:` prefixes on a colour utility under `src/app`.
+
+Account sync — THM-B01, phase two only
+
+20. No valid local key plus an account value adopts the account value and writes it locally.
+21. Local and account disagree, both present: the newer `updatedAt` wins, both stores end equal
+    after one pass, and a tie takes the account value.
+22. Both present, and the local timestamp is missing, unparseable or in the future: the account
+    value is taken. Assert this **only** with a non-empty account field, so the test cannot be
+    satisfied by code that discards a local preference against an empty one.
+23. **The migration case, one test per row of the 6.2 table.** In particular: a valid local
+    preference with **no** `updatedAt` key and an **empty** account field keeps the local value,
+    uploads it, and stamps `updatedAt`. Assert the local preference is unchanged, the request
+    body carries it, and the stamp is not backdated. This is the day-one state for every existing
+    user and it is the regression that would be invisible in staging, where accounts are new.
+24. Local absent and account empty writes nothing to either store and leaves the app on `system`.
+25. The sync request failing leaves the local preference applied and throws nothing out of the
+    service.
+26. Setting the preference three times in quick succession sends one request.
+27. The account is sent the **stored** preference, never the resolved one — set `system` on a
+    dark OS and assert the request body carries `system`.
+28. Signing out does not remove `ontrack.theme.preference`.
+29. Shared browser: after account A signs out, account A's retained preference and timestamp can
+    neither overwrite account B's present preference nor populate an empty account B. The theme
+    remains available for first paint, and a real choice by B transfers local sync ownership.
+
+Visual regression
+
+30. One screenshot pair per theme covering the section 13 state matrix and the full 15-status
+    set, diffed on every PR that touches the token layer. This is what catches a token someone
+    "adjusted" that no unit test happens to assert.
+
+### THM-Q01 — independent validation, both themes unless stated
+
+1. Toggle Light → Dark → System → Light. Every step repaints with no flash and no reload.
+2. Reload on each of the three preferences. The correct theme is on screen in the first painted
+   frame. Check with DevTools throttled to Slow 3G, where a flash is most visible.
+3. With preference `system`, change the OS appearance with OnTrack open and visible. It follows
+   within a second. Repeat with the window in the background, then focus it.
+4. With preference `dark`, change the OS to light. OnTrack stays dark.
+5. Open in a private window. Nothing throws; the app follows the OS.
+6. Set the key to `"purple"` in DevTools and reload. The app follows the OS and the key still
+   reads `"purple"`.
+7. Log in as a **student** and walk: dashboard, task list, a task with comments, the PDF viewer,
+   the portfolio view.
+8. Log in as a **tutor** and walk: the inbox, the staff task list, a feedback session, the
+   analytics charts, the Gantt planner.
+9. Log in as a **convenor** and walk: unit edit, the task definition editor, the Monaco overseer
+   panel.
+10. Every one of the 15 task statuses is legible in both themes and each is distinguishable from
+    its neighbours. Screenshot the full set, both themes.
+11. Due-date urgency: an overdue task, one due in under 11 days, one beyond. All three legible in
+    both themes.
+12. Keyboard-only pass on one full form and one full table. Every focus ring is visible in both
+    themes. No focus is trapped and none is invisible.
+13. Charts: burndown and progress gauge. Series distinguishable in both themes and in greyscale.
+14. Monaco: open the overseer report and the archive viewer in dark. The editor is dark, and its
+    surround does not clash with it.
+15. PDF viewer and calendar in dark. Record what still reads as light; those are known gaps
+    tracked by THM-M04, not silent failures.
+16. Print preview of a portfolio page while in dark mode. Output is light and readable.
+17. Enable **Reduce Motion** at OS level and toggle the theme. No cross-fade.
+18. Enable a **forced-colors** / high-contrast mode. Nothing disappears.
+19. Browser bar colour on iOS Safari and Android Chrome, installed as a PWA, in both themes.
+20. Two tabs open. Change the theme in one. Note the behaviour in the other; cross-tab sync is
+    **not** required by this contract, so record whatever happens rather than filing it as a bug.
+21. Phase two only. Set the theme on device A, sign in on device B, and B follows. Change it on
+    B, return to A, and A follows on its next sign-in.
+22. Phase two only. Sign in on a device that has never set a preference. It follows the OS for
+    that first session, adopts the account value, and the next reload has no flash. Confirm the
+    one repaint happens and looks like a repaint, not a flicker loop.
+23. Phase two only. Sign out, sign in as a different user on the same machine. The previous
+    theme shows until the new preference arrives, then repaints once.
+24. Phase two only, and the one to run on a real account rather than a fresh test one. Reproduce
+    the migration: set a preference while phase one is live, delete
+    `ontrack.theme.preference.updatedAt` if the build wrote one, confirm the account field is
+    empty, then sign in on the phase-two build. The theme must survive. A user whose theme
+    silently reverts to `system` the day THM-B01 ships will read it as the feature breaking, and
+    it is the one failure here that would hit everybody at once.
+
+---
+
+## 15. Security and privacy
+
+- **Only a validated enum is stored.** One key, one of three lowercase strings, checked against
+  an allowlist on read and constrained by the type on write. Section 6.
+- **Stored text is never evaluated.** Not as CSS, not as a selector, not as a class name, not as
+  markup, not as code. There is no `eval`, no `Function`, no `innerHTML` and no style
+  interpolation anywhere in this design. The only thing the value can influence is which of two
+  literal strings reaches `setAttribute`.
+- **Data minimisation.** Phase one stores the preference client-side only: not sent to
+  `doubtfire-api`, not added to any API resource, not put in a header or a query string, not
+  logged.
+  Phase two (THM-B01, section 6.2) adds exactly one field on the user's own record and nothing
+  else, and the rules that keep it minimal are part of this contract. The field holds one of the
+  three allowlisted strings. It is validated server-side against that same list. It is readable
+  and writable only by the account it belongs to. And it is **never** the resolved theme —
+  storing `dark` because the operating system happened to be dark would put the user's OS
+  appearance in the database, which is the fingerprinting signal the next bullet rules out.
+  Storing `system` does not.
+- **No tracking.** There is no analytics tooling in this app to leak the preference to. No
+  Google Analytics, no tag manager, no product-analytics SDK:
+
+  ```
+  $ grep -rIn -E 'google-analytics|googletagmanager|gtag\(|analytics\.js|UA-[0-9]{4,}' src/
+  $ grep -inE 'analytics|gtag|tag-manager|segment|mixpanel|posthog|amplitude' package.json
+  ```
+
+  Both return nothing. The only `analytics` in `src/` is OnTrack's own Unit Analytics screen, and
+  the only third-party hosts `src/index.html` reaches are Google **Fonts** (`:7-14`) and a pair of
+  IE8 shims behind a conditional comment (`:33-34`). An earlier draft of this section cited
+  `src/index.html:6-14` as Google Analytics; that was wrong, those lines are the font stylesheets,
+  and the mistake is recorded here because a contract that miscites the codebase spends the
+  authority it runs on.
+
+  The one third-party reporter that **is** wired up is Sentry — `@sentry/angular` in
+  `package.json:48`, imported in `src/main.ts:1`, `src/app/doubtfire-angular.module.ts:6` and
+  `src/app/common/services/http-error.interceptor.ts:2`. The theme preference is never handed to
+  it: not as an event, a tag, a user property or a breadcrumb. Reading a user's OS appearance and
+  reporting it is a fingerprinting signal and this feature does not do it. If analytics is added
+  to OnTrack later, the theme preference stays out of it, and that is a review gate rather than a
+  preference.
+- **Not an authorisation or identity control.** `data-ot-theme` and
+  `ontrack.theme.preference` are presentation state. They are attacker-controlled by definition,
+  since any user can edit `localStorage`. **No permission check, no role check, no route guard,
+  no API call and no conditional rendering of privileged data may ever branch on them.** Hiding
+  something by making it the background colour is not hiding it. Phase two does not change this.
+  The account field is presentation state as well, and no server-side branch may read it for
+  anything other than handing it back.
+- **CSP.** The pre-hydration script in section 11 is inline. If a Content-Security-Policy is
+  added later it needs a hash or nonce for that one block. Noted here so it is not discovered by
+  a blank page in production.
+
+---
+
+## 16. Out of scope
+
+This document is a contract. It is not an implementation and it does not authorise one.
+
+Every row below that names a `THM-` code is a card that exists on the objective board. Where this
+document specifies work, the row says which card owns it, so nothing here is specified without an
+owner and no card is left with a contract that forbids it.
+
+| Not in this ticket                                                                                          | Owner                                                                                                                                       |
+| ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| The objective, the branch path and the card write-ups                                                       | THM-JL01                                                                                                                                    |
+| The theme audit and blocker map this ticket had to do without (section 1)                                   | THM-D01                                                                                                                                     |
+| The token layer, `ThemeService`, System detection, persistence (section 3 step 1, sections 6.1 and 11 live) | THM-F01                                                                                                                                     |
+| The accessible Light / Dark / System preference control                                                     | THM-F02                                                                                                                                     |
+| Enabling the Tailwind dark variant on `data-ot-theme` (section 10)                                          | THM-F03                                                                                                                                     |
+| The no-flash startup script and its key-drift test (section 11)                                             | THM-F04                                                                                                                                     |
+| The shell and shared components, including closing the two status maps in section 8.1                       | THM-M01                                                                                                                                     |
+| Core student workflows                                                                                      | THM-M02                                                                                                                                     |
+| Tutor, unit chair and admin surfaces                                                                        | THM-M03                                                                                                                                     |
+| Charts, calendars, editors, viewers, print and offline — the hard surfaces in 2.5, the print rules in 12    | THM-M04                                                                                                                                     |
+| Sequencing all of the above against the FlexLayout teardown                                                 | THM-M05                                                                                                                                     |
+| Persisting the preference on the user account, to the rules in section 6.2                                  | THM-B01                                                                                                                                     |
+| Writing the automated tests and the visual regression pairs in section 14                                   | THM-T01                                                                                                                                     |
+| Running the independent validation in section 14                                                            | THM-Q01                                                                                                                                     |
+| Installed-app splash and address-bar colours (section 12)                                                   | THM-W01                                                                                                                                     |
+| Validating the finished feature and handing it over                                                         | THM-MVP01                                                                                                                                   |
+| Retiring `theme.scss` and the M2 colour include                                                             | Follow-up, after section 3 step 4                                                                                                           |
+| **Any additional theme** — high contrast, sepia, per-unit branding, custom accent                           | Not proposed. Three states, no more. Adding a fourth invalidates the state diagram, the enum, the token tables and the whole of section 14. |
+| Restyling anything. This changes **what** a colour is named, not **how** the app looks in light mode        | —                                                                                                                                           |
+
+Two cards deliberately do **not** appear as "not proposed", because an earlier draft of this
+document ruled both of them out and that made the cards unbuildable. Server-side persistence is
+THM-B01's and section 6.2 defines it. The Tailwind dark variant is THM-F03's and section 10
+configures it. Both are phase two of a two-phase feature, not exclusions.
+
+---
+
+## 17. Approvals
+
+The deliverable is an **approved** contract. Approval is not this document's to give.
+
+| Role                      | Reviewer           | Approved | Date | Notes                                       |
+| ------------------------- | ------------------ | -------- | ---- | ------------------------------------------- |
+| Frontend review           | _(to be assigned)_ | ☐        |      | Sections 3, 7, 8, 10                        |
+| Backend review            | _(to be assigned)_ | ☐        |      | Section 6.2 and the section 15 bullets      |
+| Accessibility review      | _(to be assigned)_ | ☐        |      | Sections 12, 13, and the Appendix A numbers |
+| Objective lead — THM-JL01 | Sanjana Bottu      | ☐        |      | Whole document, and the section 16 boundary |
+
+Until all four boxes are ticked, this is a draft and THM-F01 does not start.
+
+Two things a reviewer should push back on if they disagree, because both are judgement calls
+rather than derivations:
+
+1. **Section 3's staged bridge.** The alternative — go to `mat.theme()` with
+   `theme-type: color-scheme` first and derive `--ot-*` from `--mat-sys-*` — is defensible. It is
+   a bigger first PR and it couples the token vocabulary to Material's, which is why it was not
+   chosen.
+2. **Section 8.1's light fills.** Six status chips flip their foreground from white to near-black
+   rather than changing the fill. That is the smaller visual change and it keeps the chip colours
+   people already recognise, but it does alter how the board reads at a glance.
+3. **Section 6.2's last-write-wins.** The alternative is that the account always wins, which is
+   simpler to implement and easier to reason about, but it means changing the theme on a shared
+   lab machine silently loses the moment you sign in somewhere else. Last-write-wins costs a
+   second storage key and a timestamp on the API side. If backend review would rather not carry
+   that, say so now, because THM-B01 cannot decide it alone. Note that "the account always wins"
+   is **not** a simplification that removes the migration row from the 6.2 table — it makes that
+   row worse, because an empty account field would then beat a real local preference and reset
+   every existing user on the day THM-B01 ships. Whichever rule wins, presence still has to beat
+   recency.
+
+---
+
+## Appendix A — how the contrast numbers were produced
+
+Every ratio in this document was computed, not estimated. WCAG 2.1 relative luminance and
+contrast, sRGB, no rounding before the final figure.
+
+```python
+def srgb(c):
+    c = c / 255
+    return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
+
+def lum(h):
+    h = h.lstrip('#')
+    if len(h) == 3:
+        h = ''.join(ch * 2 for ch in h)
+    r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4))
+    return 0.2126 * srgb(r) + 0.7152 * srgb(g) + 0.0722 * srgb(b)
+
+def contrast(a, b):
+    la, lb = lum(a), lum(b)
+    hi, lo = max(la, lb), min(la, lb)
+    return (hi + 0.05) / (lo + 0.05)
+
+def flatten(fg, alpha, bg):
+    """Composite an rgba() foreground over an opaque background."""
+    fg, bg = fg.lstrip('#'), bg.lstrip('#')
+    out = []
+    for i in (0, 2, 4):
+        f, b = int(fg[i:i + 2], 16), int(bg[i:i + 2], 16)
+        out.append(round(f * alpha + b * (1 - alpha)))
+    return '#%02x%02x%02x' % tuple(out)
+```
+
+`flatten` produced the section 2.3 table: `flatten('#000000', 0.87, '#ffffff')` is `#212121`,
+`0.54` is `#757575`, `0.38` is `#9e9e9e`, `0.12` is `#e0e0e0`.
+
+Derived values were found by holding hue and saturation and stepping HSL lightness by 0.005 —
+down against a light ground, up against a dark one — until the target ratio was met. Worst-case
+grounds were `--ot-color-page` `#fafafa` in light and `--ot-color-surface-raised` `#2a292d` in
+dark, since those are the least forgiving surface a token can land on in each theme.
+
+Every ratio printed anywhere in this document was fed back through `contrast()` in one pass
+before the document was handed for review, rather than being checked as it was written. That
+pass is the reason section 9 now reads 2.83 and 2.20 where an earlier draft carried a single
+figure of 1.66, and the reason the chart-series note in section 8.2 states 3:1 rather than
+4.5:1. Re-run the pass after touching any value in sections 7, 8 or 9.
+
+THM-T01 item 14 turns this appendix into a test, so the numbers stop being a snapshot.
+
+---
+
+## Appendix B — audit commands, for re-running
+
+Run from the repo root. The comment on each line is the value on the base named at the bottom.
+
+```bash
+# Tree-wide colour and stylesheet inventory
+grep -rIoE '#[0-9a-fA-F]{3,8}\b' src --include='*.scss' | wc -l              # 471
+grep -rIlE 'rgba?\(|hsla?\(' src --include='*.scss' | wc -l                  #  25
+grep -rIoh '!important' src --include='*.scss' | wc -l                       #  63
+find src -name '*.scss' | wc -l                                              # 189
+
+# The three palette files, and the split in section 2.4.
+# Note the `| wc -l`: `grep -c` counts matching *lines*, not matches, even with -o.
+# It happens to agree on these three files because each puts one hex per line. Do not
+# rely on that anywhere else.
+grep -oE '#[0-9a-fA-F]{3,8}\b' src/styles/m3-theme.scss | wc -l                   # 107
+grep -oE '#[0-9a-fA-F]{3,8}\b' src/theme.scss | wc -l                             #  84
+grep -oE '#[0-9a-fA-F]{3,8}\b' src/styles/common/task-status-colors.scss | wc -l  #  47
+#                                                            palette subtotal       238
+# Hex per file, to find where the loose literals concentrate
+grep -rIoE '#[0-9a-fA-F]{3,8}\b' src --include='*.scss' \
+  | cut -d: -f1 | sort | uniq -c | sort -rn | head           # ppi-widget 50, demo-controls 44
+# The non-app, non-palette remainder: 6 in shared partials + 1 in styles.scss
+grep -rIoE '#[0-9a-fA-F]{3,8}\b' src --include='*.scss' \
+  | grep -v '^src/app/' \
+  | grep -v -e '^src/styles/m3-theme.scss:' -e '^src/theme.scss:' \
+            -e '^src/styles/common/task-status-colors.scss:' \
+  | cut -d: -f1 | sort | uniq -c | sort -rn                                  #   7
+
+# What does not exist yet
+grep -rIn -- "--sys-" src/ | wc -l                                           #   0
+grep -rIn "prefers-color-scheme" src/ | wc -l                                #   0
+grep -rIn "color-scheme" src/ | wc -l                                        #   0
+grep -rIn "@media print" src/ | wc -l                                        #   0
+grep -rIn "prefers-reduced-motion" src/ | wc -l                              #   2
+
+# Focus handling. The overlap matters more than either count
+grep -rIn "outline:\s*none\|outline:\s*0" src --include='*.scss' | wc -l     #  11
+grep -rIn "focus-visible" src --include='*.scss' | wc -l                     #  11
+comm -12 <(grep -rIlE "outline:\s*(none|0)" src --include='*.scss' | sort) \
+         <(grep -rIl "focus-visible" src --include='*.scss' | sort)          #   1 file
+
+# Custom properties already declared, to show the --ot- namespace is free
+grep -rIhoE '^\s*--[a-z0-9-]+\s*:' src --include='*.scss' \
+  | tr -d ' ' | sort | uniq -c                                    # 9 names, 12 declarations
+
+# The migration burn-down, section 10 rule 1
+grep -rIoE '#[0-9a-fA-F]{3,8}\b' src/app --include='*.scss' | wc -l          # 226
+grep -rIlE '#[0-9a-fA-F]{3,8}|rgba?\(|hsla?\(' src/app --include='*.scss' | wc -l   #  44
+find src/app -name '*.scss' | wc -l                                          # 178
+
+# Section 2.4's "57 of the 178 component stylesheets declare a colour, a border or a fill".
+# The wider grep is deliberate: it catches stroke: white and task-status-color($status),
+# which carry no literal but still need a token.
+grep -rIlE 'color|background|border|fill|stroke' src/app --include='*.scss' | wc -l  #  57
+
+# Tailwind arbitrary colour values in templates: 20 occurrences across 9 files
+grep -rIhoE '\b(text|bg|border)-\[#[0-9a-fA-F]{3,8}\]' src \
+  --include='*.html' --include='*.ts' | sort | uniq -c | sort -rn            #  20
+grep -rIlE '\b(text|bg|border)-\[#[0-9a-fA-F]{3,8}\]' src \
+  --include='*.html' --include='*.ts' | wc -l                                #   9
+
+# Section 15's "no analytics tooling". Both return nothing.
+grep -rIn -E 'google-analytics|googletagmanager|gtag\(|analytics\.js|UA-[0-9]{4,}' src/
+grep -inE 'analytics|gtag|tag-manager|segment|mixpanel|posthog|amplitude' package.json
+```
+
+**Counts were taken on `11.0.x` at `4034e7d1a`, 27 Aug 2026 22:00 +1000**, which is the commit
+this branch is rebased onto. Pin the base whenever you quote one of these, because they move: the
+first pass at this audit ran on `efda57967` the same morning and the closure merge at #105 moved
+**nine** of them within the day — three of the four tree-wide counts, `prefers-reduced-motion`,
+`focus-visible`, and all four `src/app` figures. What did **not** move is as important: the
+three palette files, `!important`, every `outline: none`, both Tailwind template counts, and the
+four counts that are still zero. `#3939ff`, the 15 status colours and every contrast ratio in
+sections 7, 8 and Appendix A were unaffected. The drift is entirely in how much unmigrated colour
+there is, not in what any colour is, which is why the token tables survived the merge untouched
+and only the sizing did not.
diff --git a/docs/theme/THEME-MVP-VALIDATION-PLAN.md b/docs/theme/THEME-MVP-VALIDATION-PLAN.md
new file mode 100644
index 0000000000..57766c2db2
--- /dev/null
+++ b/docs/theme/THEME-MVP-VALIDATION-PLAN.md
@@ -0,0 +1,296 @@
+# Theme Support MVP - validation plan, written before the work exists
+
+**Status: NOT RUN. This is a plan, not a record.** No validation has been
+performed. Nothing in this file is a result, an outcome or a finding about the
+theme feature, because on the date below the theme feature does not exist in any
+form that can be validated.
+
+Ticket: THM-MVP01. Objective: Light, Dark, and System Theme Support.
+Written: 27 August 2026. Validation cannot start before the objective does.
+
+## What this file is, and what it is not
+
+It **is** the instrument the final validation will be run from. It fixes the
+dependency register, the exact commands, the manual check matrix, the route
+matrix, the evidence rules, the handover skeleton and the sign-off list ahead of
+time, so the checklist cannot be quietly written to fit whatever happens to land.
+
+It is **not** evidence that any of that was done. Every cell that would hold a
+result says `NOT RUN`, and every table that would hold rows carries a single
+placeholder row instead. Those are deliberate, not an oversight. Filling one in
+before the run is the exact failure this ticket exists to prevent.
+
+If you are reading this looking for the outcome of the theme MVP validation, it
+is not here yet. Come back when the status line at the top has changed.
+
+## Dependency register, read 27 August 2026
+
+**As of 27 August 2026 every ticket in this objective is Not started, including
+THM-MVP01 itself.** The objective holds seventeen THM tickets. Sixteen of them are
+dependencies and are listed below, alongside the two migration tickets the
+checklist also needs. Nothing has been built, so there is nothing to validate.
+
+Nothing here is overdue. The earliest due date in the table is 9 September 2026
+and this plan was written on 27 August 2026, so Not started is the expected state
+for all of them. The table records the position on one named date. It is not a
+progress judgement on anybody.
+
+| Depends on | Owner | Due | Status, 27 Aug 2026 |
+|---|---|---|---|
+| THM-JL01 objective, approved branch path, ownership, MVP boundaries | Sanjana Bottu | 2026-09-20 | Not started |
+| THM-D01 audit and dark-mode blocker map | Owen Costin | 2026-09-20 | Not started |
+| THM-D02 theme contract and semantic design tokens | Samridh Limbu | 2026-09-09 | Not started |
+| THM-F01 theme foundation, System detection, persistence, no-flash startup | Maple 'Ryan' Fox | 2026-09-13 | Not started |
+| THM-F02 accessible Light, Dark, System preference control | Gaurav Myana | 2026-09-20 | Not started |
+| THM-F03 Tailwind dark variant on the approved root marker | unassigned | 2026-09-13 | Not started |
+| THM-F04 no-flash startup mechanism | unassigned | 2026-09-13 | Not started |
+| THM-B01 persist the preference on the user account | unassigned | 2026-09-16 | Not started |
+| THM-M01 application shell and shared components | Duong Bao Huy Tran | 2026-09-16 | Not started |
+| THM-M02 core student workflows | Swyam Khare | 2026-09-18 | Not started |
+| THM-M03 tutor, unit chair and administration workflows | Gaurav Myana | 2026-09-18 | Not started |
+| THM-M04 charts, calendars, editors, viewers, print, offline | Leeon Gourav Rangey | 2026-09-18 | Not started |
+| THM-M05 sequence the migration against the FlexLayout teardown | unassigned | 2026-09-09 | Not started |
+| THM-W01 installed-app splash and address-bar colours for dark | unassigned | 2026-09-18 | Not started |
+| THM-T01 automated theme tests and visual regression matrix | David Tenni | 2026-09-16 | Not started |
+| THM-Q01 independent accessibility, cross-browser, responsive, usability pass | Nephat Komu Muriithi | 2026-09-20 | Not started |
+| MG-04 catalogue of components on the old design language | unassigned | 2026-09-14 | Not started |
+| MG-05 CSS style guide | unassigned | 2026-09-14 | Not started |
+
+Seven of the eighteen have nobody on them. MG-04 and MG-05 in particular block
+checklist item 2, which cannot be answered at all until they have an owner.
+
+### Evidence for "Not started", repeatable in about a minute
+
+The board is one source. Git is the other, and it is the one a reviewer can check
+without a Planner login. Both agree.
+
+```bash
+export PAGER=cat GH_PAGER=cat GIT_PAGER=cat
+
+# 1. No theme branch on any repo in the org. 0 of 160 heads matched,
+#    re-read 27 August 2026 after the MVP closure merge landed on 11.0.x.
+for r in doubtfire-web doubtfire-api doubtfire-deploy github-guide; do
+  echo -n "$r: "
+  git ls-remote --heads "https://github.com/ontrack-features-t2-2026/$r.git" \
+    | grep -Eic 'theme|thm|dark'
+done
+
+# 2. No theme pull request, in any state. 0 of 210 pull requests matched,
+#    re-read the same day.
+for r in doubtfire-web doubtfire-api doubtfire-deploy; do
+  echo -n "$r: "
+  gh pr list --repo "ontrack-features-t2-2026/$r" --state all --limit 2000 \
+    --json number,title,headRefName \
+    --jq '[.[] | select((.title|test("(?i)theme|THM-")) or (.headRefName|test("(?i)theme|THM-")))] | length'
+done
+
+# 3. The theme contract THM-D02 defines is on no branch of origin. Check every
+#    head, not just 11.0.x, or this only proves it is missing from one branch.
+git fetch origin --prune
+git ls-remote --heads origin | while read -r sha ref; do
+  git cat-file -e "$sha:docs/theme/THEME-CONTRACT.md" 2>/dev/null \
+    && echo "contract present on ${ref#refs/heads/}"
+done
+echo "no line above means the contract is absent from every branch on origin"
+```
+
+Results on 27 August 2026: every count in steps 1 and 2 returned `0`, and step 3
+printed no branch line, across all 81 heads on `doubtfire-web`. Pass `--limit
+2000`. The default truncates silently and has already produced a wrong answer of
+zero for a different question.
+
+### THM-D02 is a dependency this plan cannot resolve yet
+
+Three things in this plan point at THM-D02: the DOM marker, the browser storage
+key and the validated theme enum. **All three are unresolved references.** THM-D02
+is Not started, and `docs/theme/THEME-CONTRACT.md` is absent from every branch on
+`origin`, verified by step 3 above. A draft of that contract is committed on a
+local branch that has never been pushed, so it is not on `origin` and nobody else
+on the team can read it. It has not been reviewed and it has not landed, so it is
+not a source this plan may quote.
+
+This plan therefore names those three things by role and never by value. Do not
+substitute a guess. Every place below marked **depends on THM-D02** stays
+unresolved until that document is merged, and the first job of whoever runs this
+validation is to replace the role with the approved name and record where it came
+from.
+
+## Scheduling clash, for the objective lead
+
+THM-MVP01 is due **20 September 2026**. Four of the tickets it must validate,
+THM-JL01, THM-D01, THM-F02 and THM-Q01, are due on that same day. A validation
+ticket cannot fall due at the same moment as the work it validates, so one of the
+two dates has to move. Either THM-MVP01 moves later than 20 September, or those
+four move earlier.
+
+That is a sequencing decision for the objective lead and it is the first thing to
+raise. It is written down here rather than left in a chat so it does not get lost.
+
+## What can be started now, and what cannot
+
+| Checklist item | Can start now | Why |
+|---|---|---|
+| 1. Confirm each child ticket, PR, owner, final status | Partly | The register above exists. No PR and no final status does. |
+| 2. Confirm MG-04, MG-05 preserved and linked, THM-D03 not a duplicate | Partly | MG-04 and MG-05 are unassigned. No THM-D03 exists on the board, which is itself the finding. |
+| 3. Confirm the integration branch is based on latest approved 11.0.x | No | THM-JL01 has not named a branch, and no theme branch exists. |
+| 4. Review the complete diff | No | No diff exists. |
+| 5. Final targeted tests, full tests, typecheck, lint, production build | No | The commands are fixed below and can be rehearsed against `11.0.x` now for a baseline. |
+| 6. Light, Dark, System, reload, direct-route, live-change, no-flash checks | No | The feature does not exist. The check script below is written. |
+| 7. Review THM-Q01 blockers | No | THM-Q01 has not run. |
+| 8. Student, tutor, unit chair, admin route matrices | Partly | The route list can be enumerated from the router now. |
+| 9. Charts, calendar, editors, viewers, print, offline, browsers | Partly | The surface list can be enumerated from the repo now. |
+| 10. Evidence index | Yes | Template below. |
+| 11. Contributor attribution, completed vs deferred vs future | Yes | Structure below. |
+| 12. Handover, demo, rollback notes, next priorities | Yes | Skeleton below. |
+| 13. Lead approval and final PR into 11.0.x | No | Nothing to open a pull request for. |
+
+## Commands the final validation will run
+
+None of these have been run against a theme branch, because there is no theme
+branch. Run every one from the theme integration branch once THM-JL01 has named
+it. Record the exact output in the evidence index, not a summary of it.
+
+```bash
+# 1. Confirm the branch point. This must be an ancestor check, not a guess.
+git fetch origin
+git merge-base --is-ancestor origin/11.0.x origin/<theme-integration-branch> \
+  && echo "based on latest 11.0.x" || echo "BEHIND - rebase before validating"
+git rev-list --left-right --count origin/11.0.x...origin/<theme-integration-branch>
+
+# 2. The complete diff, for the unrelated-change review in item 4.
+git diff --stat origin/11.0.x...origin/<theme-integration-branch>
+git diff origin/11.0.x...origin/<theme-integration-branch> -- ':!*.scss' ':!*.css'
+
+# 3. Automated checks. All four scripts exist in package.json on 11.0.x.
+npm run lint          # ng lint --max-warnings 0
+npm run typecheck     # ngc -p src/tsconfig.app.json --noEmit
+npm run test:ci       # ng test --no-watch --no-progress  (vitest)
+npm run build         # ng build
+
+# 4. Record the exact SHAs that were validated.
+git rev-parse origin/<theme-integration-branch> origin/11.0.x
+```
+
+Branch names come from `git ls-remote --heads origin`, never from `git branch -a`.
+On a case-insensitive filesystem the local ref list reports capitalised branches
+that do not exist on the server, because an inherited `Feature/` directory folds
+later lowercase refs into it.
+
+## Result tables, all empty by design
+
+**Everything from here to the approvals list is a blank instrument.** Every result
+cell says `NOT RUN` and every list carries one placeholder row. That is the
+intended state of this document until the objective ships. A cell filled in before
+its run is a fabricated result, and the point of writing these tables now is that
+nobody has to invent one later.
+
+Replace `NOT RUN` with PASS, FAIL or a specific finding only after watching the
+check happen. If a check could not be attempted, leave it `NOT RUN` and say why.
+
+### Manual check script
+
+Every row is repeated in Light, Dark and System. "System" means the operating
+system setting is changed while OnTrack stays open, not a reload.
+
+| # | Check | Light | Dark | System |
+|---|---|---|---|---|
+| 1 | First load with no stored preference falls back safely | NOT RUN | NOT RUN | NOT RUN |
+| 2 | First load with an invalid stored value falls back safely | NOT RUN | NOT RUN | NOT RUN |
+| 3 | No flash of the wrong theme on cold load | NOT RUN | NOT RUN | NOT RUN |
+| 4 | Reload preserves the chosen preference | NOT RUN | NOT RUN | NOT RUN |
+| 5 | Direct route to a deep URL renders in the right theme | NOT RUN | NOT RUN | NOT RUN |
+| 6 | OS preference changed while open, System follows it live | NOT RUN | NOT RUN | NOT RUN |
+| 7 | OS preference changed while open, explicit Light or Dark does not follow | NOT RUN | NOT RUN | NOT RUN |
+| 8 | Browser and installed-app chrome colour matches the resolved theme | NOT RUN | NOT RUN | NOT RUN |
+| 9 | Print output is readable | NOT RUN | NOT RUN | NOT RUN |
+| 10 | Offline service worker load renders in the right theme | NOT RUN | NOT RUN | NOT RUN |
+
+Rows 1, 2 and 4 read and write the browser storage key. Row 2 needs the validated
+theme enum to know what an invalid value even is. Both **depend on THM-D02** and
+cannot be written as concrete steps until that contract lands.
+
+### Route matrix
+
+One pass per role. Fill the route list from the router before the first validation
+run rather than from memory.
+
+| Role | Routes covered | Unreadable or broken | Result |
+|---|---|---|---|
+| Student | NOT RUN | NOT RUN | NOT RUN |
+| Tutor | NOT RUN | NOT RUN | NOT RUN |
+| Unit chair | NOT RUN | NOT RUN | NOT RUN |
+| Administrator | NOT RUN | NOT RUN | NOT RUN |
+
+Surfaces that historically resist theming, each needing a named result or an
+approved limitation: charts, calendar, the task editor, the PDF and portfolio
+viewers, code blocks, overlays and dialogs, print, offline.
+
+### Evidence index
+
+One row per artefact. A claim in the handover with no row here is a claim the
+maintainer cannot check.
+
+| # | Claim | Artefact | Location | Owner | Date |
+|---|---|---|---|---|---|
+| - | *no rows yet, the validation has not run* | - | - | - | - |
+
+Required artefact types: the final integration pull request, the exact final SHAs,
+the output of each command above, the manual check table filled in, screenshots or
+a short recording per theme state, the THM-Q01 report with every blocker marked
+fixed and retested, and the reviewer names against each approval.
+
+Sanitise every screenshot and recording before it goes in the pack. Use
+demonstration data, never real student submissions or real names.
+
+### Contributor attribution
+
+| Ticket | Contributor | What landed | PR |
+|---|---|---|---|
+| - | *no rows yet, nothing has landed* | - | - |
+
+Keep completed, deferred and future work in three separate lists. Do not fold a
+deferred item into the completed list because it was nearly done.
+
+| Accepted limitation | Reason | Owner | Next action |
+|---|---|---|---|
+| - | *no rows yet* | - | - |
+
+## Handover skeleton
+
+Two documents, both short. Neither has been written.
+
+**User guide.** What the three settings do, where the control is, what System
+means, and what happens if the operating system changes while OnTrack is open.
+
+**Technical handover.** The DOM marker and the storage key (**depends on THM-D02**,
+which is Not started and not on origin, so both are unresolved names today), where
+the semantic tokens live, how Tailwind and the shared SCSS consume them, which
+pages were migrated and which were not, how to add a token, how to theme a new
+component, and how to run the tests and the visual regression pass.
+
+**Rollback.** The exact revert path, what the application looks like with the
+feature off, and whether any stored preference has to be cleared.
+
+**Next priorities.** Ranked, with the reason each one is next.
+
+## Security and privacy sign-off
+
+None of these have been confirmed. Confirm before the final pull request and
+record who confirmed each line.
+
+| Line to confirm | Confirmed by | Date |
+|---|---|---|
+| The feature stores only the validated theme enum (**depends on THM-D02**) | NOT RUN | NOT RUN |
+| No assessment data, permission or authorisation behaviour changed | NOT RUN | NOT RUN |
+| The stored preference is never evaluated as CSS or as code | NOT RUN | NOT RUN |
+| Screenshots and recordings in the evidence pack are sanitised | NOT RUN | NOT RUN |
+
+## Approvals
+
+Left unticked, and they stay unticked. An approval belongs to the approver, not to
+the author of this file.
+
+- [ ] Objective lead, THM-JL01
+- [ ] Frontend reviewer
+- [ ] Accessibility reviewer
+- [ ] Maintainer, for the final pull request into 11.0.x
diff --git a/docs/unit-hub.md b/docs/unit-hub.md
new file mode 100644
index 0000000000..60f27f4b1d
--- /dev/null
+++ b/docs/unit-hub.md
@@ -0,0 +1,93 @@
+# Unit Hub: announcements and teaching sessions
+
+Unit Hub gives students a single place to find announcements, HelpHubs, lectures, seminars and workshops for their active units. It is available at `/unit-hub`, through the home-page card and in the account menu. It uses the same responsive Angular application on a phone, tablet, desktop and installed OnTrack PWA.
+
+## Normal use
+
+The normal version reads the signed-in user's authorised `/api/unit_hub` response. A student enrolled in SIT111 does not receive SIT102 content. The unit selector only narrows the units returned by the server. A direct link such as `/unit-hub?unit=111` cannot add access to a unit. No content is fabricated when loading fails; the page shows a retry action.
+
+The feed displays published, unexpired announcements and a bounded window of published session occurrences. The page shows the server's window end and warns when the announcement list is truncated. Content is plain text. Original-post links and meeting links open in a separate tab and must use HTTPS. A Teams meeting can still require the student's university sign-in.
+
+Click an announcement title or **Read full announcement** to open the complete post. Click a session title or **View full details** to see its full description, dates, time zone, recurrence, source and joining/calendar choices. The dialog opens only records in the current authorised feed and clears its selected content when the route, unit, feed or demo mode changes. It supports keyboard focus, Escape and a visible close button. It does not create a public sharing URL.
+
+## Study essentials
+
+Unit Hub includes public university entry points under **Study essentials**. The home-page card links to Unit Hub. This fork explicitly selects `'deakin'` in `src/app/study-essentials/study-essentials.config.ts`, shared by development, production and the demo. Operators at another institution should set `studyEssentialsProfile` to `''` before building to hide the panel, or supply a reviewed profile. Institution membership is never inferred from an email address, unit code or product name.
+
+The panel links to DeakinSync, CloudDeakin, StudentConnect, timetable guidance, the library and Student Central. Each destination handles its own sign-in and permissions. The links append no account, enrolment or course data. Unit-specific meeting and course links remain in the scoped unit content. See the [Study essentials handover](../src/app/study-essentials/README.md) for the reviewed destinations and configuration.
+
+## Publishing content
+
+A staff member with the unit's `can_manage` permission sees **Manage updates**. Choose the unit, then **New announcement** or **New session**. Leave **Publish to this unit** unchecked to save a draft. Staff can edit drafts and published records, remove announcements, and cancel sessions.
+
+For a session, enter the local start and end times and the IANA time zone, such as `Australia/Melbourne`. Weekly sessions keep the specified local time across daylight saving changes. Choose a final repeat date within six months. Create a separate weekly schedule for each weekday: a Thursday and Friday HelpHub needs two schedules. Editing or cancelling a repeating record affects the entire series. A cancelled session remains visible with its joining and calendar-copy actions removed, so students can see the cancellation.
+
+Content can be published in OnTrack by the teaching team or imported through the companion API's optional Microsoft Teams announcement synchronisation. The university administrator must configure tenant-approved Microsoft Graph access and explicitly map each unit offering to its channel. Microsoft SSO alone does not enable this connection; students do not connect a separate personal account. It is off by default.
+
+When a unit's connection is configured, the management page explains that posts appear after successful updates. “Configured” describes the presence of settings, not proof of working tenant permissions or a successful import. Imported announcements are labelled **From Teams**, are read-only in OnTrack, and provide **Manage in Teams** through their original-post link. Staff should change them at their source. No timetable is inferred from announcement text. Session schedules remain staff-maintained in OnTrack.
+
+## Make a Teams meeting
+
+Assigned teaching staff can prepare a meeting below the session editor or from a session detail view. Enter the session title, dates and time zone, then use **Open Teams draft**. The draft carries the subject, description, resolved start/end instants and any optional attendee sign-in email addresses. The composer has a separate details field, so shortening an invitation leaves the unsaved OnTrack session intact. It does not automatically copy an existing joining or source URL into a new invitation.
+
+Opening the draft sends nothing. Review the invitation and press **Send** in Teams. Copy the newly created meeting's join URL back into the OnTrack session, then save/publish it. OnTrack does not obtain the new URL automatically. This flow does not require the optional Graph announcement connection; Microsoft may ask for a Teams sign-in. It follows Microsoft's [documented meeting-draft integration](https://learn.microsoft.com/en-us/power-apps/teams/integrate-calls-and-meetings).
+
+One occurrence is opened. For a weekly session, set the repeat pattern and final date in Teams before sending, and keep them aligned with OnTrack. Location is included in the description. The helper uses explicit UTC instants and bounds the URL to 8,000 characters and the local attendee list to 20 unique addresses. If the draft is too long, shorten its details or add more attendees in Teams; content is never silently truncated. The HTTPS link lets Microsoft offer its app or browser. If the scheduling form does not open on a phone, use a desktop browser or copy the displayed details into Teams. No invitation is sent by the test suite.
+
+## Calendar choices
+
+- **Add to Google Calendar** opens a draft for one occurrence. The user chooses whether to save it.
+- **Download .ics** creates a copy of one occurrence for compatible calendar apps.
+- **Calendar settings → Include unit HelpHubs, lectures and classes** opts the user into sessions in their existing private OnTrack calendar subscription. It is off by default. Existing unit exclusions also apply to sessions.
+
+One-off Google drafts and imported files do not receive schedule changes. Subscribed calendars receive changes when the calendar provider refreshes the feed; refresh timing is controlled by the provider. In Google Calendar, the **From URL** subscription setup is performed in a desktop browser. Once subscribed, the calendar is available on mobile too. Session times and joining links are shared with the selected calendar provider. Keep the subscription URL private.
+
+## Demonstration
+
+In a local build with demo tools enabled, open **Demo controls**, turn **Demo mode on**, then open **Unit Hub**. The existing switch reloads the application; accounts without a remembered session may need to sign in again.
+
+The Unit Hub demo is a fictional student enrolled only in SIT111. It shows two announcements, two HelpHubs and a lecture, including their clickable detail views. The raw fixture contains SIT102 records specifically to exercise filtering; these do not appear. The fixture includes no names, account details or copied posts from real students or staff. Its dates are fictional and generated relative to the browser's local date.
+
+Demo mode does not read the Unit Hub API and blocks staff reads and writes. Samples have no joining action unless the presenter explicitly configures a hosted link. In **Demo controls → Use your own HelpHub links**, add a real Teams joining URL for either or both HelpHubs, choose **Save demo links**, then reopen Unit Hub. **Join hosted demo** opens that real meeting with a notice that the sample schedule is fictional. The lecture has no fabricated joining URL.
+
+Hosted links accept only supported HTTPS joining paths on `teams.microsoft.com`. They stay in session storage for the current browser tab, are cleared by **Clear demo links**, sign-out or the end of the tab session, and are never written to the OnTrack API or committed to fixtures. Turning demo mode off hides them while retaining them for another walkthrough in the same tab. Production cannot use the hosted-link store.
+
+Google drafts and .ics downloads require an explicit user action and are labelled **DEMO**. When a host provides a joining link, the calendar copy includes that link with fictional dates and a demo notice. Opening a Google draft shares its chosen details with Google. Without a hosted link, no joining URL is included. Demo .ics filenames and event UIDs have their own namespace. Session-subscription changes remain disabled even when Calendar is opened from the account menu.
+
+The optional **Try the Teams meeting draft** section in Demo controls opens a real Teams invitation draft with a **DEMO** title and fictional details. It sends nothing automatically. Review the example date and attendees before deliberately pressing **Send** in Teams. No actual meeting URLs should appear in committed fixtures, environment examples, public screenshots or handover text.
+
+Turn demo mode off to return to the real authorised endpoint, including in development builds; the unrelated development quiet-data mask does not hide real Unit Hub records. See the [demo guide](../src/app/demo/README.md) for local setup and removal notes.
+
+Production builds disable demo tools and cannot activate the Unit Hub fixtures. This release supports the installed web app, not a separately implemented native iOS or Android application.
+
+## Frontend and API contract
+
+| Operation                                            | Endpoint                                                                                                                              |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Published content for the signed-in account          | `GET /api/unit_hub`                                                                                                                   |
+| Staff announcements including drafts                 | `GET /api/units/:unit_id/announcements`                                                                                               |
+| Create / update / remove announcement                | `POST /api/units/:unit_id/announcements`, `PUT /api/units/:unit_id/announcements/:id`, `DELETE /api/units/:unit_id/announcements/:id` |
+| Staff sessions including drafts and cancelled series | `GET /api/units/:unit_id/sessions`                                                                                                    |
+| Create / update / cancel session                     | `POST /api/units/:unit_id/sessions`, `PUT /api/units/:unit_id/sessions/:id`, `DELETE /api/units/:unit_id/sessions/:id`                |
+| Read / change subscription preference                | `GET /api/webcal`, `PUT /api/webcal`                                                                                                  |
+
+Writes use `{announcement: {...}}`, `{session: {...}}` and the existing `{webcal: {...}}` wrappers. The calendar preference is `include_learning_sessions` on the wire and `includeLearningSessions` in the Angular model. Feed rows have `unit_id`; `units` provide the id, code, name, `can_manage`, and `teams_sync` (`configured` or `not_configured`). Announcements include `source_provider` (`manual` or `microsoft_teams`) and `managed_externally`; no tenant, client or channel identifiers are exposed. The public session feed contains occurrence dates, whereas staff editing uses the original series dates. See `src/app/unit-hub/unit-hub.models.ts` for the field types.
+
+The [companion API change](https://github.com/ontrack-features-t2-2026/doubtfire-api/pull/160) must be deployed and migrated before this frontend. The API is the authority for authentication, enrolment, role checks, draft visibility and unit access. The client adds defence in depth by removing rows outside the returned unit list, rejecting unsafe links, and cancelling obsolete subscriptions when the route, unit or demo mode changes. The service keeps no shared content cache. Authenticated content is not added to the service worker's data cache.
+
+Calendar exports use explicit UTC instants. Local-time entry rejects daylight-saving gaps and repeated times, preventing silent schedule movement. ICS text is escaped and folded at UTF-8 byte boundaries to prevent content from injecting calendar properties.
+
+## Verification
+
+Release checks include Angular template/type checking, the production build and deployment configuration verification. Targeted Vitest suites cover enrolled-unit filtering, no fallback data on failure, demo/live isolation, blocked demo writes, cancellation of in-flight operations, staff wrappers, route reachability, plain-text detail views and clearing stale dialogs. Calendar checks cover time-zone conversion, safe links, Google encoding, ICS injection/folding and separate demo event identities. Further checks cover imported-post ownership, Teams draft parameter encoding and form preservation, hosted-link validation and sign-out clearing, and the explicit Study essentials profile. Tests inspect generated links without joining or sending a real meeting.
+
+Run the relevant checks:
+
+```sh
+npm run typecheck
+npm run lint
+npm run test:ci -- --include='src/app/unit-hub/**/*.spec.ts' --include='src/app/study-essentials/**/*.spec.ts' --include='src/app/common/modals/calendar-modal/calendar-modal.component.spec.ts' --include='src/app/demo/**/*.spec.ts' --include='src/app/common/header/header.component.spec.ts' --include='src/app/common/guards/spec/role-whitelist.guard.spec.ts'
+npm run build -- --configuration production
+```
+
+On this macOS validation host, the native Angular disk-cache addon aborted during local production builds. `CI=1` disables that cache and avoids the native failure without changing application or production settings. Font inlining also needs network access to Google Fonts. Use Node 22.23.2 with `CI=1 NG_BUILD_MAX_WORKERS=2 NODE_OPTIONS="--max-old-space-size=8192 --max-semi-space-size=128"` if the same host issue occurs.
diff --git a/env.config.js b/env.config.js
index 5bf43b8dbf..cd7528500b 100644
--- a/env.config.js
+++ b/env.config.js
@@ -1,31 +1,43 @@
+const {networkInterfaces} = require('node:os');
+
+function localIpv4Address() {
+  for (const addresses of Object.values(networkInterfaces())) {
+    const address = addresses?.find(({family, internal}) => family === 'IPv4' && !internal);
+
+    if (address) return address.address;
+  }
+
+  return '127.0.0.1';
+}
+
 module.exports = {
   env: {
     options: {
       // Global options
-      EXTERNAL_NAME: process.env.DF_EXTERNAL_NAME || 'Doubtfire'
+      EXTERNAL_NAME: process.env.DF_EXTERNAL_NAME || 'Doubtfire',
     },
 
     development: {
       // Use the computer's IP address -- if using localhost then
       // testing on mobile devices will fail as it cannot point to
       // localhost (this would be the device itself!)
-      API_URL: 'http://' + require('ip').address() + ':3000/api'
+      API_URL: 'http://' + localIpv4Address() + ':3000/api',
     },
 
     production: {
       // Provide a set API_URL, otherwise window.location will be used
       // to locate the API dynamically (see api-url.coffee)
-      API_URL: process.env.DF_API_URL
+      API_URL: process.env.DF_API_URL,
     },
 
     docker: {
       // API URL should use the DF_DOCKER_MACHINE_IP set
-      API_URL: 'http://' + process.env.DF_DOCKER_MACHINE_IP + ':3000/api'
+      API_URL: 'http://' + process.env.DF_DOCKER_MACHINE_IP + ':3000/api',
     },
 
     devcontainer: {
       // API URL should use the DF_DOCKER_MACHINE_IP set
-      API_URL: 'http://' + process.env.DF_DOCKER_MACHINE_IP + ':4200/api'
-    }
-  }
-}
+      API_URL: 'http://' + process.env.DF_DOCKER_MACHINE_IP + ':4200/api',
+    },
+  },
+};
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000000..9afd1e8f73
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,136 @@
+// @ts-check
+
+// Allows us to bring in the recommended core rules from eslint itself
+const eslint = require('@eslint/js');
+
+// Allows us to use the typed utility for our config, and to bring in the recommended rules for TypeScript projects from typescript-eslint
+const tseslint = require('typescript-eslint');
+
+// Allows us to bring in the recommended rules for Angular projects from angular-eslint
+const angular = require('angular-eslint');
+
+const prettierPlugin = require('eslint-plugin-prettier');
+
+const tailwindcss = require('eslint-plugin-tailwindcss');
+
+/**
+ * Scope Angular template configs to HTML files.
+ *
+ * The cast is intentionally loose because angular-eslint and typescript-eslint
+ * can resolve different copies of @typescript-eslint utility types.
+ *
+ * @param {unknown[]} configs
+ * @returns {any[]}
+ */
+const htmlTemplateConfigs = (configs) =>
+  configs.map((config) => ({
+    .../** @type {object} */ (config),
+    files: ['**/*.html'],
+  }));
+
+// Export our config array, which is composed together thanks to the typed utility function from typescript-eslint
+module.exports = tseslint.config(
+  {
+    ignores: ['build/**', 'coverage/**', 'dist/**', 'docs/**', '**/*.tpl.html'],
+  },
+  {
+    linterOptions: {
+      // Surface eslint-disable directives that no longer suppress anything, so
+      // stale suppressions get pruned instead of accumulating unaudited. `npm
+      // run lint` treats warnings as failures, so a dead directive is caught in CI.
+      reportUnusedDisableDirectives: 'warn',
+    },
+  },
+  {
+    // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
+    files: ['**/*.ts'],
+    extends: [
+      // Apply the recommended core rules
+      eslint.configs.recommended,
+      // Apply the recommended TypeScript rules
+      ...tseslint.configs.recommended,
+      // Optionally apply stylistic rules from typescript-eslint that improve code consistency
+      ...tseslint.configs.recommended,
+      // Apply the recommended Angular rules
+      ...angular.configs.tsRecommended,
+    ],
+    // Set the custom processor which will allow us to have our inline Component templates extracted
+    // and treated as if they are HTML files (and therefore have the .html config below applied to them)
+    processor: angular.processInlineTemplates,
+    // Override specific rules for TypeScript files (these will take priority over the extended configs above)
+    rules: {
+      '@angular-eslint/component-max-inline-declarations': ['error', {template: 0, styles: 0}],
+      '@angular-eslint/prefer-inject': 'off',
+      '@angular-eslint/prefer-standalone': 'off',
+      '@typescript-eslint/consistent-generic-constructors': ['error', 'type-annotation'],
+      '@typescript-eslint/no-inferrable-types': 'off',
+      '@angular-eslint/prefer-on-push-component-change-detection': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+          varsIgnorePattern: '^_',
+        },
+      ],
+      'prettier/prettier': 'warn',
+      'curly': ['error', 'all'],
+    },
+  },
+  {
+    files: ['**/*.ts'],
+    plugins: {prettier: prettierPlugin},
+    rules: {
+      'prettier/prettier': 'warn',
+    },
+  },
+  {
+    files: ['**/*.component.html'],
+    plugins: {prettier: prettierPlugin},
+    extends: [tailwindcss.configs.recommended],
+    settings: {
+      tailwindcss: {
+        cssConfigPath: './src/tailwind-intellisense.css',
+      },
+    },
+    rules: {
+      'tailwindcss/classnames-order': 'warn',
+      'tailwindcss/enforces-shorthand': 'warn',
+      'tailwindcss/no-contradicting-classname': 'warn',
+      'tailwindcss/no-custom-classname': 'off',
+      'tailwindcss/no-unnecessary-arbitrary-value': 'warn',
+      'prettier/prettier': 'warn',
+    },
+  },
+  ...htmlTemplateConfigs(angular.configs.templateRecommended),
+  ...htmlTemplateConfigs(angular.configs.templateAccessibility),
+  {
+    // Everything in this config object targets our HTML files (external templates,
+    // and inline templates as long as we have the `processor` set on our TypeScript config above)
+    files: ['**/*.html'],
+    rules: {
+      '@angular-eslint/template/attributes-order': [
+        'error',
+        {
+          alphabetical: true,
+          order: [
+            'STRUCTURAL_DIRECTIVE',
+            'TEMPLATE_REFERENCE',
+            'ATTRIBUTE_BINDING',
+            'INPUT_BINDING',
+            'TWO_WAY_BINDING',
+            'OUTPUT_BINDING',
+          ],
+        },
+      ],
+      '@angular-eslint/template/prefer-control-flow': 'error',
+      '@angular-eslint/template/mouse-events-have-key-events': 'error',
+      // TODO: remove the three remaining eslint rule ignores below to improve accessibility
+      '@angular-eslint/template/label-has-associated-control': 'off',
+      '@angular-eslint/template/click-events-have-key-events': 'off',
+      '@angular-eslint/template/interactive-supports-focus': 'off',
+    },
+  },
+);
diff --git a/nginx.conf b/nginx.conf
index 3d38fa6fd5..889b629cc0 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -5,15 +5,61 @@ events {  }
 http {
     include /etc/nginx/mime.types;
 
+    # The Angular app shell and service-worker control files must always be
+    # revalidated. `$uri` excludes query parameters, so cache-busting query
+    # strings cannot bypass this policy. An empty value is not emitted for
+    # fingerprinted bundles and other static assets.
+    map $uri $ontrack_control_file_cache_control {
+        default                       "";
+        /index.html                   "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+        /ngsw.json                    "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+        /ngsw-worker.js               "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+        /safety-worker.js             "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+        /worker-basic.min.js          "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+        /manifest.webmanifest         "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+    }
+
     sendfile on;
     server {
         root /usr/share/nginx/html/;
         index index.html;
         listen 80;
 
-        add_header Content-Security-Policy "default-src https: 'unsafe-inline' 'unsafe-eval' blob: data: ws:" always;
-        # add_header Feature-Policy "microphone=(self),speaker=(self),fullscreen=(self),payment=(none);" always;
-        add_header Permissions-Policy "microphone=(self),speaker=(self),fullscreen=(self),payment=(none)" always;
+        add_header Content-Security-Policy "default-src https: 'unsafe-inline' 'unsafe-eval' blob: data: ws:; worker-src 'self' blob:; child-src 'self' blob:" always;
+        add_header Permissions-Policy "microphone=(self),fullscreen=(self),payment=()" always;
+        add_header Cache-Control $ontrack_control_file_cache_control always;
+
+        # Do not serve the SPA fallback under a service-worker or manifest URL.
+        # A missing control file must be a real 404, otherwise browsers can try
+        # to execute index.html as JavaScript. Internal SPA fallback redirects
+        # still resolve through the exact /index.html location below.
+        location = /index.html {
+          try_files $uri =404;
+        }
+
+        location = /ngsw.json {
+          try_files $uri =404;
+        }
+
+        location = /ngsw-worker.js {
+          try_files $uri =404;
+        }
+
+        location = /safety-worker.js {
+          try_files $uri =404;
+        }
+
+        location = /worker-basic.min.js {
+          try_files $uri =404;
+        }
+
+        location = /manifest.webmanifest {
+          try_files $uri =404;
+        }
+
+        location / {
+          try_files $uri $uri/ $uri/index.html /index.html;
+        }
     }
 
     gzip on;
diff --git a/ngsw-config.json b/ngsw-config.json
index a72a88ca4e..dd9d0f0d69 100644
--- a/ngsw-config.json
+++ b/ngsw-config.json
@@ -1,8 +1,7 @@
 {
   "$schema": "./node_modules/@angular/service-worker/config/schema.json",
   "index": "/index.html",
-  "dataGroups":
-  [
+  "dataGroups": [
     {
       "name": "api",
       "urls": ["/api"],
@@ -11,6 +10,16 @@
         "maxAge": "0u",
         "strategy": "freshness"
       }
+    },
+    {
+      "name": "google-fonts-cache",
+      "urls": ["https://fonts.googleapis.com/**", "https://fonts.gstatic.com/**"],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "maxSize": 10,
+        "maxAge": "7d",
+        "timeout": "5s"
+      }
     }
   ],
   "assetGroups": [
@@ -18,33 +27,36 @@
       "name": "app",
       "installMode": "prefetch",
       "resources": {
-        "files": [
-          "/favicon.ico",
-          "/index.html",
-          "/manifest.webmanifest",
-          "/*.css",
-          "/*.js"
-        ]
+        "files": ["/favicon.ico", "/index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
       }
-    }, {
+    },
+    {
       "name": "assets",
       "installMode": "lazy",
       "updateMode": "prefetch",
       "resources": {
-        "files": [
-          "/assets/**",
-          "/*.(eot|svg|cur|jpg|png|png?default=blank&size=25webp|gif|otf|ttf|woff|woff2|ani)"
-        ]
+        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
       }
-    }, {
+    },
+    {
       "name": "external_assets",
       "resources": {
-        "urls": [
-          "https://maxcdn.bootstrapcdn.com/bootstrap/**",
-          "https://fonts.googleapis.com/**",
-          "https://www.gravatar.com/avatar/**"
-        ]
+        "urls": ["https://www.gravatar.com/avatar/**"]
       }
     }
+  ],
+  "navigationUrls": [
+    "/**",
+    "!/**/*.*",
+    "!/**/*__*",
+    "!/**/*__*/**",
+    "!/JPlag/**",
+    "!/JPlag",
+    "!/sidekiq/**",
+    "!/sidekiq",
+    "!/beta/**",
+    "!/beta",
+    "!/legacy",
+    "!/legacy/**"
   ]
 }
diff --git a/package-lock.json b/package-lock.json
index 4369004cc2..610d3a3eab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,479 +1,386 @@
 {
   "name": "doubtfire",
-  "version": "8.0.9",
+  "version": "11.0.0-45",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "doubtfire",
-      "version": "8.0.9",
+      "version": "11.0.0-45",
       "license": "AGPL-3.0",
       "dependencies": {
-        "@angular/animations": "^17.3.6",
-        "@angular/cdk": "^17.3.6",
-        "@angular/cli": "^17.3.6",
-        "@angular/common": "^17.3.6",
-        "@angular/compiler": "^17.3.6",
-        "@angular/core": "^17.3.6",
-        "@angular/forms": "^17.3.6",
-        "@angular/material": "^17.3.6",
-        "@angular/material-moment-adapter": "^17.3.6",
-        "@angular/platform-browser": "^17.3.6",
-        "@angular/platform-browser-dynamic": "^17.3.6",
-        "@angular/router": "^17.3.6",
-        "@angular/service-worker": "^17.3.6",
-        "@angular/upgrade": "^17.3.6",
-        "@ctrl/ngx-emoji-mart": "^9.2.0",
+        "@angular/animations": "^22.0.3",
+        "@angular/cdk": "^22.0.2",
+        "@angular/common": "^22.0.3",
+        "@angular/compiler": "^22.0.3",
+        "@angular/core": "^22.0.3",
+        "@angular/forms": "^22.0.3",
+        "@angular/material": "^22.0.2",
+        "@angular/material-date-fns-adapter": "^22.0.2",
+        "@angular/platform-browser": "^22.0.3",
+        "@angular/platform-browser-dynamic": "^22.0.3",
+        "@angular/router": "^22.0.3",
+        "@angular/service-worker": "^22.0.3",
+        "@ctrl/ngx-emoji-mart": "^9.3.0",
+        "@eslint/js": "^10.0.1",
         "@ngneat/hotkeys": "^4.0.0",
-        "@uirouter/angular": "^13.0",
-        "@uirouter/angular-hybrid": "^17.1.0",
-        "@uirouter/angularjs": "^1.0.30",
-        "@uirouter/core": "^6.1.0",
-        "@uirouter/rx": "^1.0.0",
-        "angular": "1.5.11",
-        "angular-cookies": "1.5.11",
-        "angular-file-upload": "~1",
-        "angular-filter": "0.5.17",
-        "angular-local-storage": "0.7.1",
-        "angular-markdown-filter": "1.3.2",
-        "angular-md5": "0.1.10",
-        "angular-mocks": "1.5.11",
-        "angular-nvd3": "1.0.9",
-        "angular-resource": "1.5.11",
-        "angular-sanitize": "1.5.11",
-        "angular-ui-bootstrap": "0.13.4",
-        "angular-ui-codemirror": "0.3.0",
-        "angular-xeditable": "0.9.0",
-        "angulartics": "~1.0.3",
-        "angulartics-google-analytics": "0.1.4",
-        "bootstrap": "~3.4",
-        "bootstrap-sass": "~3.4",
-        "canvas-confetti": "^1.6.0",
-        "codemirror": "5.65.0",
-        "core-js": "^3.21.1",
-        "d3": "3.5.17",
-        "es5-shim": "^4.5.12",
-        "file-saver": "^2.0.5",
-        "font-awesome": "~4.7.0",
-        "jquery": "2.1.4",
-        "lodash": "~4.17",
-        "lottie-web": "^5.12.2",
-        "marked": "^11.1.0",
-        "moment": "^2.29.4",
-        "ng-csv": "0.2.3",
-        "ng-file-upload": "~5.0.9",
-        "ng-flex-layout": "^17.3.4-beta.1",
-        "ng2-pdf-viewer": "^10.0",
-        "ngx-bootstrap": "^6.1.0",
-        "ngx-entity-service": "^0.0.39",
-        "ngx-lottie": "^11.0.2",
-        "nvd3": "1.8.6",
-        "rxjs": "~7.4.0",
-        "ts-md5": "^1.3.1",
-        "tslib": "^2.6.2",
-        "underscore.string": "2.3.3",
-        "zone.js": "~0.14"
+        "@ngstack/code-editor": "^9.0.0",
+        "@sentry/angular": "^10.61.0",
+        "@sentry/cli": "^3.5.1",
+        "@swimlane/ngx-charts": "^20.5.0",
+        "@tailwindcss/postcss": "^4.3.2",
+        "@worktile/gantt": "^21.0.0",
+        "angular-calendar": "^0.32.2",
+        "ansi-to-html": "^0.7.2",
+        "canvas-confetti": "^1.9",
+        "d3": "^7.9.0",
+        "date-fns": "^4.4.0",
+        "dompurify": "^3.4.14",
+        "html2canvas": "^1.0.0-rc.7",
+        "html5-qrcode": "^2.3.8",
+        "jszip": "^3.10.1",
+        "lottie-web": "^5.13.0",
+        "marked": "^18.0.5",
+        "moment": "^2.30",
+        "monaco-editor": "^0.55.1",
+        "ng-flex-layout": "^17.3.7-beta.1",
+        "ng2-pdf-viewer": "10.4.0",
+        "ngx-entity-service": "^0.0.44",
+        "ngx-lottie": "^22.0.0",
+        "ngx-monaco-editor-v2-alternative": "^22.0.0",
+        "ngx-skeleton-loader": "^13.0.0",
+        "qrcode": "^1.5.4",
+        "rxjs": "~7.8.2",
+        "tslib": "^2.8.1",
+        "typescript-eslint": "^8.62.0",
+        "zone.js": "~0.16.2"
       },
       "devDependencies": {
-        "@angular-devkit/build-angular": "^17.3.6",
-        "@angular-eslint/builder": "^17.3.0",
-        "@angular-eslint/eslint-plugin": "^17.3.0",
-        "@angular-eslint/eslint-plugin-template": "^17.3.0",
-        "@angular-eslint/schematics": "^17.3.0",
-        "@angular-eslint/template-parser": "^17.3.0",
-        "@angular/compiler-cli": "^17.3.6",
-        "@angular/language-service": "^17.3.6",
-        "@commitlint/cli": "^16.0.1",
-        "@commitlint/config-conventional": "^17",
-        "@types/angular": "1.5.11",
+        "@angular-eslint/builder": "^22.0.0",
+        "@angular-eslint/eslint-plugin": "^22.0.0",
+        "@angular-eslint/eslint-plugin-template": "^22.0.0",
+        "@angular-eslint/schematics": "^22.0.0",
+        "@angular-eslint/template-parser": "^22.0.0",
+        "@angular/build": "^22.0.9",
+        "@angular/cli": "^22.0.9",
+        "@angular/compiler-cli": "^22.0.3",
+        "@angular/language-service": "^22.0.3",
+        "@commitlint/cli": "^21.1.0",
+        "@commitlint/config-conventional": "^21.1.0",
+        "@trivago/prettier-plugin-sort-imports": "^6.0.2",
         "@types/canvas-confetti": "^1.6.0",
-        "@types/d3": "^3.5.17",
-        "@types/file-saver": "^2.0.1",
-        "@types/jasmine": "~3.9.1",
-        "@types/jasminewd2": "~2.0.3",
-        "@types/lodash": "^4.14.115",
-        "@types/node": "^20.9.0",
-        "@typescript-eslint/eslint-plugin": "^7.2.0",
-        "@typescript-eslint/parser": "^7.2.0",
-        "autoprefixer": "~6",
-        "canonical-path": "0.0.2",
-        "concurrently": "^3.2.0",
-        "eslint": "^8.57.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "2.26.0",
-        "eslint-plugin-jsdoc": "39.3.6",
-        "eslint-plugin-prefer-arrow": "1.2.3",
-        "eslint-plugin-prettier": "^5.0.1",
-        "grunt": "^1.0.4",
-        "grunt-bump": "0.8.0",
-        "grunt-coffeelint": "0.0.16",
-        "grunt-contrib-clean": "~1.0.0",
-        "grunt-contrib-coffee": "^1.0.0",
-        "grunt-contrib-concat": "~1.0.1",
-        "grunt-contrib-connect": "^1.0.2",
-        "grunt-contrib-copy": "~1.0.0",
-        "grunt-contrib-jshint": "~1.0.0",
-        "grunt-contrib-watch": "^1.1.0",
-        "grunt-env": "0.4.4",
-        "grunt-html2js": "^0.6.0",
-        "grunt-karma": "~2.0.0",
-        "grunt-newer": "^1.1.2",
-        "grunt-ng-annotate": "^3.0.0",
-        "grunt-postcss": "~0.8",
-        "grunt-preprocess": "5.1.0",
-        "grunt-sass": "^3.0.2",
-        "grunt-sass-globbing": "^1.4.0",
-        "husky": "~8",
-        "ip": "^1.1.2",
-        "jasmine-core": "~4.1.0",
-        "jasmine-spec-reporter": "~5.0.0",
-        "karma": "^6.3.4",
-        "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "~3.0.2",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "^1.5.0",
-        "load-grunt-tasks": "^5.0.0",
-        "npm-run-all": "^4.1.5",
-        "postcss": "^8.4.27",
-        "postcss-scss": "^0.1.7",
-        "prettier": "^3.1.0",
-        "protractor": "~7.0.0",
-        "sass": "^1.48.0",
-        "tailwindcss": "~3.3",
+        "@types/d3": "^7.4.3",
+        "@types/dompurify": "^3.0.5",
+        "@types/node": "^26.0.1",
+        "@typescript-eslint/eslint-plugin": "^8.60.1",
+        "@typescript-eslint/parser": "^8.62.1",
+        "angular-eslint": "^22.0.0",
+        "autoprefixer": "^10.5.2",
+        "concurrently": "^10.0.5",
+        "eslint": "^10.6.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-prettier": "^5.5.6",
+        "eslint-plugin-tailwindcss": "^4.0.4",
+        "husky": "^9.1.7",
+        "jsdom": "^29.1.1",
+        "npm-run-all2": "^9.0.2",
+        "postcss": "^8.5.26",
+        "postcss-scss": "^4.0.9",
+        "prettier": "^3.8.4",
+        "sass": "^1.101.0",
+        "tailwindcss": "^4.3.1",
         "ts-node": "~10.9",
-        "typescript": "~5.2",
-        "underscore": "^1.8.3"
+        "typescript": "~6.0.3",
+        "vitest": "^4.1.9"
       },
       "engines": {
-        "node": ">=20.9.0"
+        "node": ">=22.22.3"
       },
       "optionalDependencies": {
-        "@nx/nx-darwin-arm64": "^18.0",
-        "@nx/nx-darwin-x64": "^18.0",
-        "@nx/nx-linux-x64-gnu": "^18.0",
-        "@nx/nx-win32-x64-msvc": "^18.0"
+        "@nx/nx-darwin-arm64": "^23.0.1",
+        "@nx/nx-darwin-x64": "^23.0.1",
+        "@nx/nx-linux-arm64-gnu": "^23.0.1",
+        "@nx/nx-linux-x64-gnu": "^23.0.1",
+        "@nx/nx-win32-x64-msvc": "^23.0.1",
+        "@rollup/rollup-linux-arm64-gnu": "^4.62.2",
+        "@rollup/rollup-linux-x64-gnu": "^4.62.2"
       }
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+    "node_modules/@algolia/abtesting": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.18.0.tgz",
+      "integrity": "sha512-8siuLG+FIns1AjZ/g2SDVwHz9S+ObacDQISEJvS8XsNei1zl3FXqfqQrBpmrG7ACWCyesXHbicMJtvRbg00FEw==",
       "dev": true,
-      "engines": {
-        "node": ">=10"
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+    "node_modules/@algolia/client-abtesting": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.52.0.tgz",
+      "integrity": "sha512-wtwPgyPmO7b7sQPVgoK29c1VpfS08DnnJCmxX/oU1pV2DlMRJCzQcLN7JSloYpodyKHwM8+9wOzlAM0co3TDmA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/architect": {
-      "version": "0.1703.8",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1703.8.tgz",
-      "integrity": "sha512-lKxwG4/QABXZvJpqeSIn/kAwnY6MM9HdHZUV+o5o3UiTi+vO8rZApG4CCaITH3Bxebm7Nam7Xbk8RuukC5rq6g==",
+    "node_modules/@algolia/client-analytics": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.52.0.tgz",
+      "integrity": "sha512-9KY36bRl4AH7RjqSeDDOKnjsz4IxQFBEOB8/fWmEbdQe+Isbs5jGzVJu9NEPQ1Tgwxlf8Uf07Swj3jZyMNUZ2g==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "17.3.8",
-        "rxjs": "7.8.1"
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
       "engines": {
-        "node": "^18.13.0 || >=20.9.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/architect/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dependencies": {
-        "tslib": "^2.1.0"
+    "node_modules/@algolia/client-common": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.52.0.tgz",
+      "integrity": "sha512-3a/qM3dzJqqfTx7Yrw7uGQ98I3Q0rDfb4Vkv0wEzko96l7YQMxfBVz/VbLq2N+c59GweYv6Vhp8mPeqnWJSITw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/build-angular": {
-      "version": "17.3.8",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-17.3.8.tgz",
-      "integrity": "sha512-ixsdXggWaFRP7Jvxd0AMukImnePuGflT9Yy7NJ9/y0cL/k//S/3RnkQv5i411KzN+7D4RIbNkRGGTYeqH24zlg==",
+    "node_modules/@algolia/client-insights": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.52.0.tgz",
+      "integrity": "sha512-Rki7ACbMcvbQW0BuM84x9dkGHY47ABmv4jU6tYssat2k02p3mIUms2YOLUAMeknhmnFsj6lb6ZzOXdMWMyc1sA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.1703.8",
-        "@angular-devkit/build-webpack": "0.1703.8",
-        "@angular-devkit/core": "17.3.8",
-        "@babel/core": "7.24.0",
-        "@babel/generator": "7.23.6",
-        "@babel/helper-annotate-as-pure": "7.22.5",
-        "@babel/helper-split-export-declaration": "7.22.6",
-        "@babel/plugin-transform-async-generator-functions": "7.23.9",
-        "@babel/plugin-transform-async-to-generator": "7.23.3",
-        "@babel/plugin-transform-runtime": "7.24.0",
-        "@babel/preset-env": "7.24.0",
-        "@babel/runtime": "7.24.0",
-        "@discoveryjs/json-ext": "0.5.7",
-        "@ngtools/webpack": "17.3.8",
-        "@vitejs/plugin-basic-ssl": "1.1.0",
-        "ansi-colors": "4.1.3",
-        "autoprefixer": "10.4.18",
-        "babel-loader": "9.1.3",
-        "babel-plugin-istanbul": "6.1.1",
-        "browserslist": "^4.21.5",
-        "copy-webpack-plugin": "11.0.0",
-        "critters": "0.0.22",
-        "css-loader": "6.10.0",
-        "esbuild-wasm": "0.20.1",
-        "fast-glob": "3.3.2",
-        "http-proxy-middleware": "2.0.6",
-        "https-proxy-agent": "7.0.4",
-        "inquirer": "9.2.15",
-        "jsonc-parser": "3.2.1",
-        "karma-source-map-support": "1.4.0",
-        "less": "4.2.0",
-        "less-loader": "11.1.0",
-        "license-webpack-plugin": "4.0.2",
-        "loader-utils": "3.2.1",
-        "magic-string": "0.30.8",
-        "mini-css-extract-plugin": "2.8.1",
-        "mrmime": "2.0.0",
-        "open": "8.4.2",
-        "ora": "5.4.1",
-        "parse5-html-rewriting-stream": "7.0.0",
-        "picomatch": "4.0.1",
-        "piscina": "4.4.0",
-        "postcss": "8.4.35",
-        "postcss-loader": "8.1.1",
-        "resolve-url-loader": "5.0.0",
-        "rxjs": "7.8.1",
-        "sass": "1.71.1",
-        "sass-loader": "14.1.1",
-        "semver": "7.6.0",
-        "source-map-loader": "5.0.0",
-        "source-map-support": "0.5.21",
-        "terser": "5.29.1",
-        "tree-kill": "1.2.2",
-        "tslib": "2.6.2",
-        "undici": "6.11.1",
-        "vite": "5.1.7",
-        "watchpack": "2.4.0",
-        "webpack": "5.90.3",
-        "webpack-dev-middleware": "6.1.2",
-        "webpack-dev-server": "4.15.1",
-        "webpack-merge": "5.10.0",
-        "webpack-subresource-integrity": "5.1.0"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "optionalDependencies": {
-        "esbuild": "0.20.1"
-      },
-      "peerDependencies": {
-        "@angular/compiler-cli": "^17.0.0",
-        "@angular/localize": "^17.0.0",
-        "@angular/platform-server": "^17.0.0",
-        "@angular/service-worker": "^17.0.0",
-        "@web/test-runner": "^0.18.0",
-        "browser-sync": "^3.0.2",
-        "jest": "^29.5.0",
-        "jest-environment-jsdom": "^29.5.0",
-        "karma": "^6.3.0",
-        "ng-packagr": "^17.0.0",
-        "protractor": "^7.0.0",
-        "tailwindcss": "^2.0.0 || ^3.0.0",
-        "typescript": ">=5.2 <5.5"
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
-      "peerDependenciesMeta": {
-        "@angular/localize": {
-          "optional": true
-        },
-        "@angular/platform-server": {
-          "optional": true
-        },
-        "@angular/service-worker": {
-          "optional": true
-        },
-        "@web/test-runner": {
-          "optional": true
-        },
-        "browser-sync": {
-          "optional": true
-        },
-        "jest": {
-          "optional": true
-        },
-        "jest-environment-jsdom": {
-          "optional": true
-        },
-        "karma": {
-          "optional": true
-        },
-        "ng-packagr": {
-          "optional": true
-        },
-        "protractor": {
-          "optional": true
-        },
-        "tailwindcss": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/autoprefixer": {
-      "version": "10.4.18",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
-      "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
+    "node_modules/@algolia/client-personalization": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.52.0.tgz",
+      "integrity": "sha512-96s4Uzc3kk+/f4jJXIVVGWP5XlngOGNQ1x6hW9AT59pOixHlOs5tqJg+ZUS/GQ6h/iYP0ceQcmxDQeLyCLTaDQ==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001591",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
-        "postcss-value-parser": "^4.2.0"
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-query-suggestions": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.52.0.tgz",
+      "integrity": "sha512-lqeycNpSPe5Qa0OUWpejVvYQjQWV5nQuLT0a4aq7XzRAvCxprV/6Lf841EygdD2nrFnuS58ok7Au1uOtXzpnkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.52.0.tgz",
+      "integrity": "sha512-ly1wETVGRo30cx61O7fetESN+ElL9c9K+bD/AVgnT1ar4c6v+/Yqjrhdtu6Fm4D0s4NZP081Isf6tunH1wUXHg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+    "node_modules/@algolia/ingestion": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.52.0.tgz",
+      "integrity": "sha512-U4EeTvgmluRjj39ykZSAd5X+a6LD5m7/mcOWDmB7hqm1R6QY0yT8jLxpNVEjYhzgEN5hcDGW6X67EWQY8KiYGQ==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+    "node_modules/@algolia/monitoring": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.52.0.tgz",
+      "integrity": "sha512-FCPnDcILfpTE94u7BVlV4DmnSV5wE3+j25EEF+3dYPrVzkVCSoAHs318oWDGxnxsAgiL4HpL12Jc4XHmw9shpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+    "node_modules/@algolia/recommend": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.52.0.tgz",
+      "integrity": "sha512-br3DO7n4N8CXwTRbZS0MnB4WQ9YHfNjCwkCEzVR/wek/qNTDQKDb0nROmkFaNZ8ucUqUVKZi074dbwMwRDlK8Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.1.0"
+        "@algolia/client-common": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/sass": {
-      "version": "1.71.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz",
-      "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==",
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.52.0.tgz",
+      "integrity": "sha512-b0T/Ca2c9KyEslKsVrGZvbe1UrrKKSdfXhBZ2pbpKahFUzJfziRZ0urbOm7V65O0tO/jwU+Lo/+bIiiyhzGt8w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
+        "@algolia/client-common": "5.52.0"
       },
-      "bin": {
-        "sass": "sass.js"
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-fetch": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.52.0.tgz",
+      "integrity": "sha512-ozBT8J/mtD4H4IAojw8QPirlcL2gHrI1BGuZ4/ZXXO/rTE1yQ4VIPJj4mTTbwo4FbkS1MoJsD/DsrqLzhnc4/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.52.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/@angular-devkit/build-webpack": {
-      "version": "0.1703.8",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1703.8.tgz",
-      "integrity": "sha512-9u6fl8VVOxcLOEMzrUeaybSvi9hSLSRucHnybneYrabsgreDo32tuy/4G8p6YAHQjpWEj9jvF9Um13ertdni5Q==",
+    "node_modules/@algolia/requester-node-http": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.52.0.tgz",
+      "integrity": "sha512-gyyWcLD22tnabmoit4iukCXuoRc5HYJuUjPSEa8a0D/f/NlRafpWi52AlAaa4Uu/rsl7saHsJFTNjTptWbu2+A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-devkit/architect": "0.1703.8",
-        "rxjs": "7.8.1"
+        "@algolia/client-common": "5.52.0"
       },
       "engines": {
-        "node": "^18.13.0 || >=20.9.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
       },
-      "peerDependencies": {
-        "webpack": "^5.30.0",
-        "webpack-dev-server": "^4.0.0"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@angular-devkit/build-webpack/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.1.0"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@angular-devkit/architect": {
+      "version": "0.2200.9",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2200.9.tgz",
+      "integrity": "sha512-kwiyEFfJsnJ4o7ondW8KswwJbp+qri5yWLS0wMMG+uBwOolZfrQReorqsQNCALhwmojhDNZc0wEWXEHEhKnotw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/core": "22.0.9",
+        "rxjs": "7.8.2"
+      },
+      "bin": {
+        "architect": "bin/cli.js"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       }
     },
     "node_modules/@angular-devkit/core": {
-      "version": "17.3.8",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.3.8.tgz",
-      "integrity": "sha512-Q8q0voCGudbdCgJ7lXdnyaxKHbNQBARH68zPQV72WT8NWy+Gw/tys870i6L58NWbBaCJEUcIj/kb6KoakSRu+Q==",
+      "version": "22.0.9",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-22.0.9.tgz",
+      "integrity": "sha512-u53kltrh1ZKHSqGfEDbPW2RzSC1WBPpan3LN61TuzjAkiHqqaQXrN6EmUvYkX3CIT5PKhO6RPRsptMH9y7hs0w==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ajv": "8.12.0",
-        "ajv-formats": "2.1.1",
-        "jsonc-parser": "3.2.1",
-        "picomatch": "4.0.1",
-        "rxjs": "7.8.1",
-        "source-map": "0.7.4"
+        "ajv": "8.20.0",
+        "ajv-formats": "3.0.1",
+        "jsonc-parser": "3.3.1",
+        "picomatch": "4.0.4",
+        "rxjs": "7.8.2",
+        "source-map": "0.7.6"
       },
       "engines": {
-        "node": "^18.13.0 || >=20.9.0",
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0",
         "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
         "yarn": ">= 1.13.0"
       },
       "peerDependencies": {
-        "chokidar": "^3.5.2"
+        "chokidar": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "chokidar": {
@@ -481,18817 +388,7572 @@
         }
       }
     },
-    "node_modules/@angular-devkit/core/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/@angular-devkit/schematics": {
-      "version": "17.3.8",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.3.8.tgz",
-      "integrity": "sha512-QRVEYpIfgkprNHc916JlPuNbLzOgrm9DZalHasnLUz4P6g7pR21olb8YCyM2OTJjombNhya9ZpckcADU5Qyvlg==",
+      "version": "22.0.9",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-22.0.9.tgz",
+      "integrity": "sha512-r7tPuiXI7pnwcaLQY4hQLOM9R5rkKRc1mKhQQb074Shh8XzTcTaw2ktDXLeiJm/SUUWQPhaxClnjjO3qU8AJRw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "17.3.8",
-        "jsonc-parser": "3.2.1",
-        "magic-string": "0.30.8",
-        "ora": "5.4.1",
-        "rxjs": "7.8.1"
+        "@angular-devkit/core": "22.0.9",
+        "jsonc-parser": "3.3.1",
+        "magic-string": "0.30.21",
+        "ora": "9.4.0",
+        "rxjs": "7.8.2"
       },
       "engines": {
-        "node": "^18.13.0 || >=20.9.0",
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0",
         "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
         "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@angular-devkit/schematics/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/@angular-eslint/builder": {
-      "version": "17.5.2",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-17.5.2.tgz",
-      "integrity": "sha512-bvegxJuocWeHdvISPfCXeLQPSjrMCEVzxXPg16JJKksKWSeRA1JnbXnfnb7eoLdq1+riMHKqbH6Fs4rORAvUiA==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-22.0.0.tgz",
+      "integrity": "sha512-T2vWQYUhJs6iUlgocHV12OgoxbmN63f17a+tgW+3sYrKN0KAB3xuHsPOoYpRYoWqkVVC44HD441Ju4IDvo8vKg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@nx/devkit": "^17.2.8 || ^18.0.0 || ^19.0.0",
-        "nx": "^17.2.8 || ^18.0.0 || ^19.0.0"
+        "@angular-devkit/architect": ">= 0.2200.0 < 0.2300.0",
+        "@angular-devkit/core": ">= 22.0.0 < 23.0.0"
       },
       "peerDependencies": {
-        "eslint": "^7.20.0 || ^8.0.0",
+        "@angular/cli": ">= 22.0.0 < 23.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
         "typescript": "*"
       }
     },
     "node_modules/@angular-eslint/bundled-angular-compiler": {
-      "version": "17.5.2",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-17.5.2.tgz",
-      "integrity": "sha512-K4hVnMyI98faMJmsA4EOBkD0tapDjWV5gy0j/wJ2uSL46d3JgZPZNJSO1zStf/b3kT4gLOlQ/ulWFiUf1DxgIw==",
-      "dev": true
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-22.0.0.tgz",
+      "integrity": "sha512-rv15vGDpGW8zZFaLdhQ+iIO1f0bZds/xvuxoX277hFisXp5Kt6FumJNNIb4g/qxq3xsY46a7fD6R7KvGY3smHg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@angular-eslint/eslint-plugin": {
-      "version": "17.5.2",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-17.5.2.tgz",
-      "integrity": "sha512-kzPALKyT5XIEbgoNmY/hEZWdMWKTX56Pap9fVLJSC/b+Nd+MXc7TNly2s0XoC0Ru1/kMiVzbmSGPheu/rw+9aA==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-22.0.0.tgz",
+      "integrity": "sha512-mKLScPZhqG64ic0KIQoxqSqCdkPwtEZuTOuunvc9lYTw05MJSHRUM2yVFODlCGq97c6BN1F6KBk2I+a+KFnr1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-eslint/bundled-angular-compiler": "17.5.2",
-        "@angular-eslint/utils": "17.5.2",
-        "@typescript-eslint/utils": "7.11.0"
+        "@angular-eslint/bundled-angular-compiler": "22.0.0",
+        "@angular-eslint/utils": "22.0.0",
+        "ts-api-utils": "^2.1.0"
       },
       "peerDependencies": {
-        "eslint": "^7.20.0 || ^8.0.0",
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
         "typescript": "*"
       }
     },
     "node_modules/@angular-eslint/eslint-plugin-template": {
-      "version": "17.5.2",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-17.5.2.tgz",
-      "integrity": "sha512-6sxVwrJ7yElZxcjxHSA0Ujs29bCD/cMubd9n6TDFI9e3v+ktpoMW4Nv/TCHv0OuYatIOZ7bcJxi38cAO8Vhfhw==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-22.0.0.tgz",
+      "integrity": "sha512-y6XL5HJ8C31NpBvkVHpU3bWc+Rk9g1zRtHrs39omhuT29eEUcS3zu47HMFV6tf8rHOI97B2Mstg6qYS5XL9ATg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-eslint/bundled-angular-compiler": "17.5.2",
-        "@angular-eslint/utils": "17.5.2",
-        "@typescript-eslint/type-utils": "7.11.0",
-        "@typescript-eslint/utils": "7.11.0",
-        "aria-query": "5.3.0",
-        "axobject-query": "4.0.0"
+        "@angular-eslint/bundled-angular-compiler": "22.0.0",
+        "@angular-eslint/utils": "22.0.0",
+        "aria-query": "5.3.2",
+        "axobject-query": "4.1.0"
       },
       "peerDependencies": {
-        "eslint": "^7.20.0 || ^8.0.0",
+        "@angular-eslint/template-parser": "22.0.0",
+        "@typescript-eslint/types": "^8.0.0",
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
         "typescript": "*"
       }
     },
     "node_modules/@angular-eslint/schematics": {
-      "version": "17.5.2",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-17.5.2.tgz",
-      "integrity": "sha512-HcvqrBEJfYMTc+fZ6YdRkb+9YcXsy2XSv59Yhd0bBqZ4ZdM4QuuVFxWlLNvhV6TF1DtO24CzpN4OyE+AO5EWBA==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-22.0.0.tgz",
+      "integrity": "sha512-gsJQx6c+WIWC5d+NAqn4rRdUzwhinUCTNmCM9x4wygV9DrbAfVG+6OFPEbaDMryNvf0HYDcnGclbIbXjukGCaw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-eslint/eslint-plugin": "17.5.2",
-        "@angular-eslint/eslint-plugin-template": "17.5.2",
-        "@nx/devkit": "^17.2.8 || ^18.0.0 || ^19.0.0",
-        "ignore": "5.3.1",
-        "nx": "^17.2.8 || ^18.0.0 || ^19.0.0",
-        "strip-json-comments": "3.1.1",
-        "tmp": "0.2.3"
+        "@angular-devkit/core": ">= 22.0.0 < 23.0.0",
+        "@angular-devkit/schematics": ">= 22.0.0 < 23.0.0",
+        "@angular-eslint/eslint-plugin": "22.0.0",
+        "@angular-eslint/eslint-plugin-template": "22.0.0",
+        "ignore": "7.0.5",
+        "semver": "7.8.0",
+        "strip-json-comments": "3.1.1"
       },
       "peerDependencies": {
-        "@angular/cli": ">= 17.0.0 < 18.0.0"
+        "@angular/cli": ">= 22.0.0 < 23.0.0"
+      }
+    },
+    "node_modules/@angular-eslint/schematics/node_modules/semver": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
+      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/@angular-eslint/template-parser": {
-      "version": "17.5.2",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-17.5.2.tgz",
-      "integrity": "sha512-46emLElmnIUzW0bpEpSf0u05ofRVUwlfttDOMLedhi700peUKbB9Y6iyz3GzAtQCMklBbJC9nR87LQRH9aSlog==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-22.0.0.tgz",
+      "integrity": "sha512-jU5MKQ24bBB4J99gSSexmUrLm2LvTJZCuCHhNTQ1LavWX4e1lrIxhm+6pJILOm6Cixf8jyNXnHMty6nljX8J+Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-eslint/bundled-angular-compiler": "17.5.2",
-        "eslint-scope": "^8.0.0"
+        "@angular-eslint/bundled-angular-compiler": "22.0.0",
+        "eslint-scope": "9.1.2"
       },
       "peerDependencies": {
-        "eslint": "^7.20.0 || ^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
         "typescript": "*"
       }
     },
     "node_modules/@angular-eslint/utils": {
-      "version": "17.5.2",
-      "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-17.5.2.tgz",
-      "integrity": "sha512-bTMPFqtoetBJsYR/xqREEOCy/CdsKGf2gZkRdH73gG6pOpskWt8J/PbRcMZsC349paV4HFixByVm89inqA0TNg==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-22.0.0.tgz",
+      "integrity": "sha512-VFodMojghnPYm+B3U+HRYrqebPMj8NyobNjVzDdY8V5XIBW+4ivOSEINIz81G48rmm/NZKwj56+bJ88bVX4KIw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@angular-eslint/bundled-angular-compiler": "17.5.2",
-        "@typescript-eslint/utils": "7.11.0"
+        "@angular-eslint/bundled-angular-compiler": "22.0.0"
       },
       "peerDependencies": {
-        "eslint": "^7.20.0 || ^8.0.0",
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
         "typescript": "*"
       }
     },
     "node_modules/@angular/animations": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.3.10.tgz",
-      "integrity": "sha512-9fR5snTuG4aM2K54TG/6DXcKXMDKZMovZhjQOxO8l68/oqn6fKrHs8DLzckFs0XGRZ+2OyURH8WggFm1Z828rA==",
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-22.0.3.tgz",
+      "integrity": "sha512-j6N7s/tffYoTch++g45eKBp0pI0vsYsT1veyrALsTn732qa1E6rMsaiL2+L2s2PkHzkZosNMW1U3e0gRv6auzA==",
+      "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
       },
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "17.3.10"
+        "@angular/core": "22.0.3"
       }
     },
-    "node_modules/@angular/cdk": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.3.10.tgz",
-      "integrity": "sha512-b1qktT2c1TTTe5nTji/kFAVW92fULK0YhYAvJ+BjZTPKu2FniZNe8o4qqQ0pUuvtMu+ZQxp/QqFYoidIVCjScg==",
+    "node_modules/@angular/build": {
+      "version": "22.0.9",
+      "resolved": "https://registry.npmjs.org/@angular/build/-/build-22.0.9.tgz",
+      "integrity": "sha512-j5eYaMTGFXdPVSX0xtWRRWHE2Ezz2CFiBPsAKrWHitvzccv95nURQYk5jbB+FHCYuN60zJNoTZMIlT7rXYAvag==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "optionalDependencies": {
-        "parse5": "^7.1.2"
-      },
-      "peerDependencies": {
-        "@angular/common": "^17.0.0 || ^18.0.0",
-        "@angular/core": "^17.0.0 || ^18.0.0",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@angular/cli": {
-      "version": "17.3.8",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.3.8.tgz",
-      "integrity": "sha512-X5ZOQ6ZTKVHjhIsfl32ZRqbs+FUoeHLbT7x4fh2Os/8ObDDwrUcCJPqxe2b2RB5E2d0vepYigknHeLE7gwzlNQ==",
-      "dependencies": {
-        "@angular-devkit/architect": "0.1703.8",
-        "@angular-devkit/core": "17.3.8",
-        "@angular-devkit/schematics": "17.3.8",
-        "@schematics/angular": "17.3.8",
-        "@yarnpkg/lockfile": "1.1.0",
-        "ansi-colors": "4.1.3",
-        "ini": "4.1.2",
-        "inquirer": "9.2.15",
-        "jsonc-parser": "3.2.1",
-        "npm-package-arg": "11.0.1",
-        "npm-pick-manifest": "9.0.0",
-        "open": "8.4.2",
-        "ora": "5.4.1",
-        "pacote": "17.0.6",
-        "resolve": "1.22.8",
-        "semver": "7.6.0",
-        "symbol-observable": "4.0.0",
-        "yargs": "17.7.2"
-      },
-      "bin": {
-        "ng": "bin/ng.js"
+        "@ampproject/remapping": "2.3.0",
+        "@angular-devkit/architect": "0.2200.9",
+        "@babel/core": "7.29.7",
+        "@babel/helper-annotate-as-pure": "7.29.7",
+        "@babel/helper-split-export-declaration": "7.24.7",
+        "@inquirer/confirm": "6.0.12",
+        "@vitejs/plugin-basic-ssl": "2.3.0",
+        "beasties": "0.4.2",
+        "browserslist": "^4.26.0",
+        "esbuild": "0.28.1",
+        "https-proxy-agent": "9.0.0",
+        "jsonc-parser": "3.3.1",
+        "listr2": "10.2.1",
+        "magic-string": "0.30.21",
+        "mrmime": "2.0.1",
+        "parse5-html-rewriting-stream": "8.0.1",
+        "picomatch": "4.0.4",
+        "piscina": "5.2.0",
+        "rollup": "4.60.2",
+        "sass": "1.99.0",
+        "semver": "7.7.4",
+        "source-map-support": "0.5.21",
+        "tinyglobby": "0.2.16",
+        "vite": "7.3.6",
+        "watchpack": "2.5.1"
       },
       "engines": {
-        "node": "^18.13.0 || >=20.9.0",
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0",
         "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
         "yarn": ">= 1.13.0"
-      }
-    },
-    "node_modules/@angular/common": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.10.tgz",
-      "integrity": "sha512-6SfD21M3LujymmZsZQIxAsV8Bj5u6He6ImZ+p2rr7FAhFxpVJyKldK8LCmJcFsBD4srpQcxEZ0iDxXvg+0ihAw==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "17.3.10",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@angular/compiler": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.3.10.tgz",
-      "integrity": "sha512-6Ce4siHyF0fCZBDm/cz+blJByGDu1/hbPkQVGmk5HGZTmCUeKkgyjoM6bZr7ssAsyGDRwxBh2SGHO4Ce31vuPA==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0"
       },
-      "peerDependencies": {
-        "@angular/core": "17.3.10"
+      "optionalDependencies": {
+        "lmdb": "3.5.4"
+      },
+      "peerDependencies": {
+        "@angular/compiler": "^22.0.0",
+        "@angular/compiler-cli": "^22.0.0",
+        "@angular/core": "^22.0.0",
+        "@angular/localize": "^22.0.0",
+        "@angular/platform-browser": "^22.0.0",
+        "@angular/platform-server": "^22.0.0",
+        "@angular/service-worker": "^22.0.0",
+        "@angular/ssr": "^22.0.9",
+        "istanbul-lib-instrument": "^6.0.0",
+        "karma": "^6.4.0",
+        "less": "^4.2.0",
+        "ng-packagr": "^22.0.0",
+        "postcss": "^8.4.0",
+        "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "tslib": "^2.3.0",
+        "typescript": ">=6.0 <6.1",
+        "vitest": "^4.0.8"
       },
       "peerDependenciesMeta": {
         "@angular/core": {
           "optional": true
+        },
+        "@angular/localize": {
+          "optional": true
+        },
+        "@angular/platform-browser": {
+          "optional": true
+        },
+        "@angular/platform-server": {
+          "optional": true
+        },
+        "@angular/service-worker": {
+          "optional": true
+        },
+        "@angular/ssr": {
+          "optional": true
+        },
+        "istanbul-lib-instrument": {
+          "optional": true
+        },
+        "karma": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "ng-packagr": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tailwindcss": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
         }
       }
     },
-    "node_modules/@angular/compiler-cli": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.3.10.tgz",
-      "integrity": "sha512-85SBphqRj3szac3FbeYgEZ+I6WaAlo5h7JX06BdjOLLiaoIwlFhLeAuG+jVekseV+95grFUxIsCMphWHi2e6hQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "7.23.9",
-        "@jridgewell/sourcemap-codec": "^1.4.14",
-        "chokidar": "^3.0.0",
-        "convert-source-map": "^1.5.1",
-        "reflect-metadata": "^0.2.0",
-        "semver": "^7.0.0",
-        "tslib": "^2.3.0",
-        "yargs": "^17.2.1"
-      },
-      "bin": {
-        "ng-xi18n": "bundles/src/bin/ng_xi18n.js",
-        "ngc": "bundles/src/bin/ngc.js",
-        "ngcc": "bundles/ngcc/index.js"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/compiler": "17.3.10",
-        "typescript": ">=5.2 <5.5"
-      }
-    },
-    "node_modules/@angular/compiler-cli/node_modules/@babel/core": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
-      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
-      "dev": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
-    "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/@angular/build/node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@angular/core": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.10.tgz",
-      "integrity": "sha512-ocEKu7X0yFCOvgJn1uZy76qjhsjKvULrO1k/BuIX0nwhp61DTGYTvCqKmwCBLM8/gvcKYH5vMKMHoQKtiSGE0A==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.14.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/forms": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.3.10.tgz",
-      "integrity": "sha512-0VZWSXDi2M3DAGJlpdV3lo73Yo/73GPRqmfTOrvIoUIenFg5Dz6oNGzvt/1aRkRn6HKccjix6iMpH91EN65pWA==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "17.3.10",
-        "@angular/core": "17.3.10",
-        "@angular/platform-browser": "17.3.10",
-        "rxjs": "^6.5.3 || ^7.4.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/language-service": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-17.3.10.tgz",
-      "integrity": "sha512-6y0yEnjuKGCnH+YxmZZUC/KEb2ZuB5z7y0AOj4PwOladMWSwHv71x1rz5MokBVBf7ZTeN2w89f9jSWBzSz+fPw==",
+    "node_modules/@angular/build/node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      }
-    },
-    "node_modules/@angular/material": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-17.3.10.tgz",
-      "integrity": "sha512-hHMQES0tQPH5JW33W+mpBPuM8ybsloDTqFPuRV8cboDjosAWfJhzAKF3ozICpNlUrs62La/2Wu/756GcQrxebg==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/auto-init": "15.0.0-canary.7f224ddd4.0",
-        "@material/banner": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/button": "15.0.0-canary.7f224ddd4.0",
-        "@material/card": "15.0.0-canary.7f224ddd4.0",
-        "@material/checkbox": "15.0.0-canary.7f224ddd4.0",
-        "@material/chips": "15.0.0-canary.7f224ddd4.0",
-        "@material/circular-progress": "15.0.0-canary.7f224ddd4.0",
-        "@material/data-table": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dialog": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/drawer": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/fab": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/floating-label": "15.0.0-canary.7f224ddd4.0",
-        "@material/form-field": "15.0.0-canary.7f224ddd4.0",
-        "@material/icon-button": "15.0.0-canary.7f224ddd4.0",
-        "@material/image-list": "15.0.0-canary.7f224ddd4.0",
-        "@material/layout-grid": "15.0.0-canary.7f224ddd4.0",
-        "@material/line-ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/linear-progress": "15.0.0-canary.7f224ddd4.0",
-        "@material/list": "15.0.0-canary.7f224ddd4.0",
-        "@material/menu": "15.0.0-canary.7f224ddd4.0",
-        "@material/menu-surface": "15.0.0-canary.7f224ddd4.0",
-        "@material/notched-outline": "15.0.0-canary.7f224ddd4.0",
-        "@material/radio": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/segmented-button": "15.0.0-canary.7f224ddd4.0",
-        "@material/select": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/slider": "15.0.0-canary.7f224ddd4.0",
-        "@material/snackbar": "15.0.0-canary.7f224ddd4.0",
-        "@material/switch": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab-bar": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0",
-        "@material/textfield": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tooltip": "15.0.0-canary.7f224ddd4.0",
-        "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/animations": "^17.0.0 || ^18.0.0",
-        "@angular/cdk": "17.3.10",
-        "@angular/common": "^17.0.0 || ^18.0.0",
-        "@angular/core": "^17.0.0 || ^18.0.0",
-        "@angular/forms": "^17.0.0 || ^18.0.0",
-        "@angular/platform-browser": "^17.0.0 || ^18.0.0",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@angular/material-moment-adapter": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.3.10.tgz",
-      "integrity": "sha512-R68ssdGMSmVIfpOGaB9vjW5lBh6zH9GboBuaIAqizC/ZAzdEgpmT7qdr3PBCmRPTLTx8Yx9K3rhgRekO79ympw==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "^17.0.0 || ^18.0.0",
-        "@angular/material": "17.3.10",
-        "moment": "^2.18.1"
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/platform-browser": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.10.tgz",
-      "integrity": "sha512-LEhBDOKm2A7nRmZqsafVp6OinRDG1OYZBSqjnT1jZ+f0CRRFIXz6aJ0TMPoU6vq9SLRJ7vrGD9P/eBf2hW00NQ==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/animations": "17.3.10",
-        "@angular/common": "17.3.10",
-        "@angular/core": "17.3.10"
-      },
-      "peerDependenciesMeta": {
-        "@angular/animations": {
-          "optional": true
-        }
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/platform-browser-dynamic": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-17.3.10.tgz",
-      "integrity": "sha512-TW6G4+isdHM2ssQTRTobeAKtR2516pJ25BSwRb+9+Jw/ZAEYOOi+KQyofIFYQccaUjb3+LpjRcaZbtZ9m/Ispg==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "17.3.10",
-        "@angular/compiler": "17.3.10",
-        "@angular/core": "17.3.10",
-        "@angular/platform-browser": "17.3.10"
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/router": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-17.3.10.tgz",
-      "integrity": "sha512-HlZlR9BOLoEKGOSMjmL5EfYL7F7PeDifbFi0dYWNcrG8zFrVKFklB1cuBdJhfPZgYhDEoGms/EToD71tg5wliA==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "17.3.10",
-        "@angular/core": "17.3.10",
-        "@angular/platform-browser": "17.3.10",
-        "rxjs": "^6.5.3 || ^7.4.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/service-worker": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-17.3.10.tgz",
-      "integrity": "sha512-tRoO1WrA4TxLyQK4DFtant3R93DQuGs/DIvhYZ5Tpevaj8h/gL1Uwxzj3GAyZpMSbXvETlHAK8HcwG4IkXkxBg==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "bin": {
-        "ngsw-config": "ngsw-config.js"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "17.3.10",
-        "@angular/core": "17.3.10"
+        "node": ">=18"
       }
     },
-    "node_modules/@angular/upgrade": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-17.3.10.tgz",
-      "integrity": "sha512-JAZxvMvZnbwdbFNzSsfAIxNOp/th7289BcJtq7cubdVfmFKajihLd1rt33cj+iFGUIy5SgSPmSvFVRQi7oSAaA==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/compiler": "17.3.10",
-        "@angular/core": "17.3.10",
-        "@angular/platform-browser": "17.3.10",
-        "@angular/platform-browser-dynamic": "17.3.10"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.6.tgz",
-      "integrity": "sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==",
+    "node_modules/@angular/build/node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.24.6",
-        "picocolors": "^1.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/compat-data": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.6.tgz",
-      "integrity": "sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==",
+    "node_modules/@angular/build/node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/core": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
-      "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
-      "dev": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.24.0",
-        "@babel/parser": "^7.24.0",
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.0",
-        "@babel/types": "^7.24.0",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
+    "node_modules/@angular/build/node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/core/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/@angular/build/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
       "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+    "node_modules/@angular/build/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.23.6",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "jsesc": "^2.5.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+    "node_modules/@angular/build/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.6.tgz",
-      "integrity": "sha512-+wnfqc5uHiMYtvRX7qu80Toef8BXeh4HHR1SPeonGb1SKPniNEd4a/nlaJJMv/OIEYvIVavvo0yR7u10Gqz0Iw==",
+    "node_modules/@angular/build/node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.6.tgz",
-      "integrity": "sha512-VZQ57UsDGlX/5fFA7GkVPplZhHsVc+vuErWgdOiysI9Ksnw0Pbbd6pnPiR/mmJyKHgyIW0c7KT32gmhiF+cirg==",
+    "node_modules/@angular/build/node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.24.6",
-        "@babel/helper-validator-option": "^7.24.6",
-        "browserslist": "^4.22.2",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.6.tgz",
-      "integrity": "sha512-djsosdPJVZE6Vsw3kk7IPRWethP94WHGOhQTc67SNXE0ZzMhHgALw8iGmYS0TD1bbMM0VDROy43od7/hN6WYcA==",
+    "node_modules/@angular/build/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.6",
-        "@babel/helper-environment-visitor": "^7.24.6",
-        "@babel/helper-function-name": "^7.24.6",
-        "@babel/helper-member-expression-to-functions": "^7.24.6",
-        "@babel/helper-optimise-call-expression": "^7.24.6",
-        "@babel/helper-replace-supers": "^7.24.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.6",
-        "@babel/helper-split-export-declaration": "^7.24.6",
-        "semver": "^6.3.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.6.tgz",
-      "integrity": "sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==",
+    "node_modules/@angular/build/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.6.tgz",
-      "integrity": "sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==",
+    "node_modules/@angular/build/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.24.6.tgz",
-      "integrity": "sha512-C875lFBIWWwyv6MHZUG9HmRrlTDgOsLWZfYR0nW69gaKJNe0/Mpxx5r0EID2ZdHQkdUmQo2t0uNckTL08/1BgA==",
+    "node_modules/@angular/build/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.6",
-        "regexpu-core": "^5.3.1",
-        "semver": "^6.3.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.6.tgz",
-      "integrity": "sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==",
+    "node_modules/@angular/build/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
-      "integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.22.6",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "debug": "^4.1.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.6.tgz",
-      "integrity": "sha512-Y50Cg3k0LKLMjxdPjIl40SdJgMB85iXn27Vk/qbHZCFx/o5XO3PSnpi675h1KEmmDb6OFArfd5SCQEQ5Q4H88g==",
+    "node_modules/@angular/build/node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-function-name": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.6.tgz",
-      "integrity": "sha512-xpeLqeeRkbxhnYimfr2PC+iA0Q7ljX/d1eZ9/inYbmfG2jpl8Lu3DyXvpOAnrS5kxkfOWJjioIMQsaMBXFI05w==",
+    "node_modules/@angular/build/node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/template": "^7.24.6",
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.6.tgz",
-      "integrity": "sha512-SF/EMrC3OD7dSta1bLJIlrsVxwtd0UpjRJqLno6125epQMJ/kyFmpTT4pbvPbdQHzCHg+biQ7Syo8lnDtbR+uA==",
+    "node_modules/@angular/build/node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.6.tgz",
-      "integrity": "sha512-OTsCufZTxDUsv2/eDXanw/mUZHWOxSbEmC3pP8cgjcy5rgeVPWWMStnv274DV60JtHxTk0adT0QrCzC4M9NWGg==",
+    "node_modules/@angular/build/node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.6.tgz",
-      "integrity": "sha512-a26dmxFJBF62rRO9mmpgrfTLsAuyHk4e1hKTUkD/fcMfynt8gvEKwQPQDVxWhca8dHoDck+55DFt42zV0QMw5g==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
+      "integrity": "sha512-dnlp69efPPg6Uaw2dVqzWRfAWRnYVb1XJ8CyyhIbZeaq4CA5/mLeZ1IEt9QqQxmbdvagjLIm2ZL8BxXv5lH4Yw==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
     },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.6.tgz",
-      "integrity": "sha512-Y/YMPm83mV2HJTbX1Qh2sjgjqcacvOlhbzdCCsSlblOKjSYmQqEbO6rUniWQyRo9ncyfjT8hnUjlG06RXDEmcA==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.2.tgz",
+      "integrity": "sha512-OqZTwDRDchGRHHm/hwLOL7uVPB9aUvI0am/eQuWMNyFHf5PSEQmyEeYYheA0EPPKUO/l0uigCp+iaTjoLjVoHg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.24.6",
-        "@babel/helper-module-imports": "^7.24.6",
-        "@babel/helper-simple-access": "^7.24.6",
-        "@babel/helper-split-export-declaration": "^7.24.6",
-        "@babel/helper-validator-identifier": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
     },
-    "node_modules/@babel/helper-module-transforms/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.6.tgz",
-      "integrity": "sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.2.tgz",
+      "integrity": "sha512-UwRE7CGpvSVEQS8gUMBe1uADWjNnVgP3Iusyda1nSRwNDCsRjnGc7w6El6WLQsXmZTbLZx9cecegumcitNfpmA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
     },
-    "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.6.tgz",
-      "integrity": "sha512-3SFDJRbx7KuPRl8XDUr8O7GAEB8iGyWPjLKJh/ywP/Iy9WOmEfMrsWbaZpvBu2HSYn4KQygIsz0O7m8y10ncMA==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.2.tgz",
+      "integrity": "sha512-gjEtURKLCC5VXm1I+2i1u9OhxFsKAQJKTVB8WvDAHF+oZlq0GTVFOlTlO1q3AlCTE/DF32c16ESvfgqR7343/g==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
     },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.6.tgz",
-      "integrity": "sha512-MZG/JcWfxybKwsA9N9PmtF2lOSFSEMVCpIRrbxccZFLJPrJciJdG/UhSh5W96GEteJI2ARqm5UAHxISwRDLSNg==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.2.tgz",
+      "integrity": "sha512-Bcl6CYDeAgE70cqZaMojOi/eK63h5Me97ZqAQoh77VPjMysA/4ORQBRGo3rRy45x4MzVlU9uZxs8Uwy7ZaKnBw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
     },
-    "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.24.6.tgz",
-      "integrity": "sha512-1Qursq9ArRZPAMOZf/nuzVW8HgJLkTB9y9LfP4lW2MVp4e9WkLJDovfKBxoDcCk6VuzIxyqWHyBoaCtSRP10yg==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.2.tgz",
+      "integrity": "sha512-LU+TPda3mAE2QB0/Hp5VyeKJivpC6+tlOXd1VMoXV/YFMvk/MNk5iXeBfB4MQGRWyOYVJ01625vjkr0Az98OJQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.6",
-        "@babel/helper-environment-visitor": "^7.24.6",
-        "@babel/helper-wrap-function": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
     },
-    "node_modules/@babel/helper-remap-async-to-generator/node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.6.tgz",
-      "integrity": "sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.2.tgz",
+      "integrity": "sha512-2QxQrM+KQ7DAW4o22j+XZ6RKdxjLD7BOWTP0Bv0tmjdyhXSsr2Ul1oJDQqh9Zf5qOwTuTc7Ek83mOFaKnodPjg==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-replace-supers": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.24.6.tgz",
-      "integrity": "sha512-mRhfPwDqDpba8o1F8ESxsEkJMQkUF8ZIWrAc0FtWhxnjfextxMWxr22RtFizxxSYLjVHDeMgVsRq8BBZR2ikJQ==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.2.tgz",
+      "integrity": "sha512-TbziEu2DVsTEOPif2mKWkMeDMLoYjx95oESa9fkQQK7r/Orta0gnkcDpzwufEcAO2BLBsD7mZkXGFqEdMRRwfw==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.24.6",
-        "@babel/helper-member-expression-to-functions": "^7.24.6",
-        "@babel/helper-optimise-call-expression": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.6.tgz",
-      "integrity": "sha512-nZzcMMD4ZhmB35MOOzQuiGO5RzL6tJbsT37Zx8M5L/i9KSrukGXWTjLe1knIbb/RmxoJE9GON9soq0c0VEMM5g==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.2.tgz",
+      "integrity": "sha512-bO/rVDiDUuM2YfuCUwZ1t1cP+/yqjqz+Xf2VtkdppefuOFS2OSeAfgafaHNkFn0t02hEyXngZkxtGqXcXwO8Rg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.6.tgz",
-      "integrity": "sha512-jhbbkK3IUKc4T43WadP96a27oYti9gEf1LdyGSP2rHGH77kwLwfhO7TgwnWvxxQVmke0ImmCSS47vcuxEMGD3Q==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.2.tgz",
+      "integrity": "sha512-hr26p7e93Rl0Za+JwW7EAnwAvKkehh12BU1Llm9Ykiibg4uIr2rbpxG9WCf56GuvidlTG9KiiQT/TXT1yAWxTA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.2.tgz",
+      "integrity": "sha512-pOjB/uSIyDt+ow3k/RcLvUAOGpysT2phDn7TTUB3n75SlIgZzM6NKAqlErPhoFU+npgY3/n+2HYIQVbF70P9/A==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.6.tgz",
-      "integrity": "sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.2.tgz",
+      "integrity": "sha512-2/w+q8jszv9Ww1c+6uJT3OwqhdmGP2/4T17cu8WuwyUuuaCDDJ2ojdyYwZzCxx0GcsZBhzi3HmH+J5pZNXnd+Q==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.6.tgz",
-      "integrity": "sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.2.tgz",
+      "integrity": "sha512-11+aL5vKheYgczxtPVVRhdptAM2H7fcDR5Gw4/bTcteuZBlH4oP9f5s9zYO9aGZvoGeBpqXI/9TZZihZ609wKw==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.6.tgz",
-      "integrity": "sha512-Jktc8KkF3zIkePb48QO+IapbXlSapOW9S+ogZZkcO6bABgYAxtZcjZ/O005111YLf+j4M84uEgwYoidDkXbCkQ==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.2.tgz",
+      "integrity": "sha512-i16fokAGK46IVZuV8LIIwMdtqhin9hfYkCh8pf8iC3QU3LpwL+1FSFGej+O7l3E/AoknL6Dclh2oTdnRMpTzFQ==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helper-wrap-function": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.24.6.tgz",
-      "integrity": "sha512-f1JLrlw/jbiNfxvdrfBgio/gRBk3yTAEJWirpAkiJG2Hb22E7cEYKHWo0dFPTv/niPovzIdPdEDetrv6tC6gPQ==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.2.tgz",
+      "integrity": "sha512-49FkKS6RGQoriDSK/6E2GkAsAuU5kETFCh7pG4yD/ylj9rKhTmO3elsnmBvRD4PgJPds5W2PkhC82aVwmUcJ7A==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-function-name": "^7.24.6",
-        "@babel/template": "^7.24.6",
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/helpers": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.6.tgz",
-      "integrity": "sha512-V2PI+NqnyFu1i0GyTd/O/cTpxzQCYioSkUIRmgo7gFEHKKCg5w46+r/A6WeUR1+P3TeQ49dspGPNd/E3n9AnnA==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.2.tgz",
+      "integrity": "sha512-mjYNkHPfGpUR00DuM1ZZIgs64Hpf4bWcz9Z41+4Q+pgDx73UwWdAYyf6EG/lRFldmdHHzgrYyge5akFUW0D3mQ==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/template": "^7.24.6",
-        "@babel/types": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/highlight": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.6.tgz",
-      "integrity": "sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.2.tgz",
+      "integrity": "sha512-ALyvJz965BQk8E9Al/JDKKDLH2kfKFLTGMlgkAbbYtZuJt9LU8DW3ZoDMCtQpXAltZxwBHevXz5u+gf0yA0YoA==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.6",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@babel/parser": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz",
-      "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==",
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.2.tgz",
+      "integrity": "sha512-UQjrkIdWrKI626Du8lCQ6MJp/6V1LAo2bOK9OTu4mSn8GGXIkPXk/Vsp4bLHCd9Z9Iz2OTEaokUE90VweJgIYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.2.tgz",
+      "integrity": "sha512-bTsRGj6VlSdn/XD4CGyzMnzaBs9bsRxy79eTqTCBsA8TMIEky7qg48aPkvJvFe1HyzQ5oMZdg7AnVlWQSKLTnw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.2.tgz",
+      "integrity": "sha512-6d4Z3534xitaA1FcMWP7mQPq5zGwBmGbhphh2DwaA1aNIXUu3KTOfwrWpbwI4/Gr0uANo7NTtaykFyO2hPuFLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.2.tgz",
+      "integrity": "sha512-NetAg5iO2uN7eB8zE5qrZ3CSil+7IJt4WDFLcC75Ymywq1VZVD6qJ6EvNLjZ3rEm6gB7XW5JdT60c6MN35Z85Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.2.tgz",
+      "integrity": "sha512-NCYhOotpgWZ5kdxCZsv6Iudx0wX8980Q/oW4pNFNihpBKsDbEA1zpkfxJGC0yugsUuyDZ7gL37dbzwhR0VI7pQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.2.tgz",
+      "integrity": "sha512-RXsaOqXxfoUBQoOgvmmijVxJnW2IGB0eoMO7F8FAjaj0UTywUO/luSqimWBJn04WNgUkeNhh7fs7pESXajWmkg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.2.tgz",
+      "integrity": "sha512-qdAzEULD+/hzObedtmV6iBpdL5TIbKVztGiK7O3/KYSf+HIzU257+MX1EXJcyIiDbMAqmbwaufcYPvyRryeZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.2.tgz",
+      "integrity": "sha512-Nd/SgG27WoA9e+/TdK74KnHz852TLa94ovOYySo/yMPuTmpckK/jIF2jSwS3g7ELSKXK13/cVdmg1Z/DaCWKxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@angular/build/node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@angular/build/node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
       "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
       "bin": {
-        "parser": "bin/babel-parser.js"
+        "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.6.tgz",
-      "integrity": "sha512-iVuhb6poq5ikqRq2XWU6OQ+R5o9wF+r/or9CeUyovgptz0UlnK4/seOQ1Istu/XybYjAhQv1FRSSfHHufIku5Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "node": ">=18"
       },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
+    },
+    "node_modules/@angular/build/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 14.18.0"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.6.tgz",
-      "integrity": "sha512-c8TER5xMDYzzFcGqOEp9l4hvB7dcbhcGjcLVwxWfe4P5DOafdwjsBJZKsmv+o3aXh7NhopvayQIovHrh2zSRUQ==",
+    "node_modules/@angular/build/node_modules/rollup": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.2.tgz",
+      "integrity": "sha512-J9qZyW++QK/09NyN/zeO0dG/1GdGfyp9lV8ajHnRVLfo/uFsbji5mHnDgn/qYdUHyCkM2N+8VyspgZclfAh0eQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.6",
-        "@babel/plugin-transform-optional-chaining": "^7.24.6"
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.13.0"
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.60.2",
+        "@rollup/rollup-android-arm64": "4.60.2",
+        "@rollup/rollup-darwin-arm64": "4.60.2",
+        "@rollup/rollup-darwin-x64": "4.60.2",
+        "@rollup/rollup-freebsd-arm64": "4.60.2",
+        "@rollup/rollup-freebsd-x64": "4.60.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.2",
+        "@rollup/rollup-linux-arm64-musl": "4.60.2",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.2",
+        "@rollup/rollup-linux-loong64-musl": "4.60.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.2",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.2",
+        "@rollup/rollup-linux-x64-gnu": "4.60.2",
+        "@rollup/rollup-linux-x64-musl": "4.60.2",
+        "@rollup/rollup-openbsd-x64": "4.60.2",
+        "@rollup/rollup-openharmony-arm64": "4.60.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.2",
+        "@rollup/rollup-win32-x64-gnu": "4.60.2",
+        "@rollup/rollup-win32-x64-msvc": "4.60.2",
+        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.6.tgz",
-      "integrity": "sha512-z8zEjYmwBUHN/pCF3NuWBhHQjJCrd33qAi8MgANfMrAvn72k2cImT8VjK9LJFu4ysOLJqhfkYYb3MvwANRUNZQ==",
+    "node_modules/@angular/build/node_modules/sass": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz",
+      "integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "chokidar": "^4.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "bin": {
+        "sass": "sass.js"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "dev": true,
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14.0.0"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
       }
     },
-    "node_modules/@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+    "node_modules/@angular/build/node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "readdirp": "^4.0.1"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/@babel/plugin-syntax-class-properties": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-      "dev": true,
+    "node_modules/@angular/cdk": {
+      "version": "22.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-22.0.2.tgz",
+      "integrity": "sha512-3AOyLNIpvXkxbiCeUc4R5ubwCBpY83ZPe2I6Q/cTUW53SnFapEBNYZ2spSY+jPVY4IVPnQN1Tvjlzq6R9K4M3w==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.12.13"
+        "parse5": "^8.0.0",
+        "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/common": "^22.0.0 || ^23.0.0",
+        "@angular/core": "^22.0.0 || ^23.0.0",
+        "@angular/platform-browser": "^22.0.0 || ^23.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@angular/cli": {
+      "version": "22.0.9",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-22.0.9.tgz",
+      "integrity": "sha512-nkdz9sc9OjTLBG2QwPH8HuFc4fOl489AzrKInM2y+Q0u1+/HFt9QpSeupPnDJeOYGImDIP0B2VJJ3teDRM1DGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/architect": "0.2200.9",
+        "@angular-devkit/core": "22.0.9",
+        "@angular-devkit/schematics": "22.0.9",
+        "@inquirer/prompts": "8.4.2",
+        "@listr2/prompt-adapter-inquirer": "4.2.3",
+        "@modelcontextprotocol/sdk": "1.29.0",
+        "@schematics/angular": "22.0.9",
+        "@yarnpkg/lockfile": "1.1.0",
+        "algoliasearch": "5.52.0",
+        "ini": "6.0.0",
+        "jsonc-parser": "3.3.1",
+        "listr2": "10.2.1",
+        "npm-package-arg": "13.0.2",
+        "pacote": "21.5.1",
+        "parse5-html-rewriting-stream": "8.0.1",
+        "semver": "7.7.4",
+        "yargs": "18.0.0",
+        "zod": "4.4.2"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "bin": {
+        "ng": "bin/ng.js"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-      "dev": true,
+    "node_modules/@angular/common": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-22.0.3.tgz",
+      "integrity": "sha512-LRglsR4Xerw/vrqoEMd489fF5PMJZ3kqGAPwO1332S42lN5KXlYITCB8WJw1iIqvoBqZvlR9R8u85cLUsfDzbg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/core": "22.0.3",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-export-namespace-from": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
-      "dev": true,
+    "node_modules/@angular/compiler": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-22.0.3.tgz",
+      "integrity": "sha512-tZYq4RYYGCT6enI3wlOZsG81VJkR9wGhf5kexhvffCiMHfcA9IACHu7gjvtZPZlibeKs1PY5TMoOG3/rUqJH6Q==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "tslib": "^2.3.0"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.6.tgz",
-      "integrity": "sha512-BE6o2BogJKJImTmGpkmOic4V0hlRRxVtzqxiSPa8TIFxyhi4EFjHm08nq1M4STK4RytuLMgnSz0/wfflvGFNOg==",
+    "node_modules/@angular/compiler-cli": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-22.0.3.tgz",
+      "integrity": "sha512-TMpKn2KefhGXM1FzcLYeyTMsBbxtFJU83bYnlI0pTw7k3jBAmN6H+ydRcNhdEYr3R2Ja3ncOXGV98RWLm9ElcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@babel/core": "7.29.7",
+        "@jridgewell/sourcemap-codec": "^1.4.14",
+        "chokidar": "^5.0.0",
+        "convert-source-map": "^1.5.1",
+        "reflect-metadata": "^0.2.0",
+        "semver": "^7.0.0",
+        "tslib": "^2.3.0",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "ng-xi18n": "bundles/src/bin/ng_xi18n.js",
+        "ngc": "bundles/src/bin/ngc.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/compiler": "22.0.3",
+        "typescript": ">=6.0 <6.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.6.tgz",
-      "integrity": "sha512-D+CfsVZousPXIdudSII7RGy52+dYRtbyKAZcvtQKq/NpsivyMVduepzcLqG5pMBugtMdedxdC8Ramdpcne9ZWQ==",
-      "dev": true,
+    "node_modules/@angular/core": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-22.0.3.tgz",
+      "integrity": "sha512-u6bYkPBB9PfYyyQ29JiytYbTqHO0lhigkkSVFoAT0WXu3R0ohycjYJooxJbHNBivWkQsASwv/k125Wb3SQoL2g==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "tslib": "^2.3.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/compiler": "22.0.3",
+        "rxjs": "^6.5.3 || ^7.4.0",
+        "zone.js": "~0.15.0 || ~0.16.0"
+      },
+      "peerDependenciesMeta": {
+        "@angular/compiler": {
+          "optional": true
+        },
+        "zone.js": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-syntax-import-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "dev": true,
+    "node_modules/@angular/forms": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-22.0.3.tgz",
+      "integrity": "sha512-AhZEKvOw+5cqS3j1hjM0jbrWEg4xUg/l0h7yDpWAsgenWFutATGzeeRvl9dJ3HPh2Ga6leIraDi0Q/+YLCDE/A==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@standard-schema/spec": "^1.0.0",
+        "tslib": "^2.3.0",
+        "zod": "^4.0.10"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/common": "22.0.3",
+        "@angular/core": "22.0.3",
+        "@angular/platform-browser": "22.0.3",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+    "node_modules/@angular/language-service": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-22.0.3.tgz",
+      "integrity": "sha512-2PFFw0WVJ75RjmgT1BzFUOC2HOA6VK/Il0LozxLKxKc2UWIEv+Fw42T2Yo798UaarpZSYh91mcFu5+v7I5YWGg==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+      }
+    },
+    "node_modules/@angular/material": {
+      "version": "22.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-22.0.2.tgz",
+      "integrity": "sha512-a2sp9ipozR4THqu5A3ff3VXBpbQHpfTmH+Oqb0+RD47fJ+/kvyBUZQ5JK2Yh6eUXVceAOW4s+sL0ev8tS1EfuQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/cdk": "22.0.2",
+        "@angular/common": "^22.0.0 || ^23.0.0",
+        "@angular/core": "^22.0.0 || ^23.0.0",
+        "@angular/forms": "^22.0.0 || ^23.0.0",
+        "@angular/platform-browser": "^22.0.0 || ^23.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "dev": true,
+    "node_modules/@angular/material-date-fns-adapter": {
+      "version": "22.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/material-date-fns-adapter/-/material-date-fns-adapter-22.0.2.tgz",
+      "integrity": "sha512-xoxECE2NowCIT3GlKIfxFh8tvuaS4g7wV9wN9rbMH284SRITC1TavvhtFdLcCDrMafUvSxY/du441SBcBmOoKg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/core": "^22.0.0 || ^23.0.0",
+        "@angular/material": "22.0.2",
+        "date-fns": ">2.20.0 <5.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "dev": true,
+    "node_modules/@angular/platform-browser": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-22.0.3.tgz",
+      "integrity": "sha512-MAOGciS6zrw4CzEH6n/Cry0tl5MtgWWYEs/IH2McMtixpun1EOr5TVn84xIELloOtNBNT4679g5rpAVm6onLAw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/animations": "22.0.3",
+        "@angular/common": "22.0.3",
+        "@angular/core": "22.0.3"
+      },
+      "peerDependenciesMeta": {
+        "@angular/animations": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "dev": true,
+    "node_modules/@angular/platform-browser-dynamic": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-22.0.3.tgz",
+      "integrity": "sha512-3tAPLVfOLXAwoZQR8agPOrs42J9R/zNrE1u9PnHdT+DFu2weQjRqRGGKz0iyAbLa9ljPoxUFFG9WFoEGj2Z0HA==",
+      "deprecated": "@angular/platform-browser-dynamic is deprecated. Use `@angular/platform-browser` instead.",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/common": "22.0.3",
+        "@angular/compiler": "22.0.3",
+        "@angular/core": "22.0.3",
+        "@angular/platform-browser": "22.0.3"
       }
     },
-    "node_modules/@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-      "dev": true,
+    "node_modules/@angular/router": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-22.0.3.tgz",
+      "integrity": "sha512-wkD7axjX43fIbhJKLy83O/XnJI1LO/C6aXdVFE+D6dVWCzwI8wL+cqHk9ovW9TsLOtxWvp6DE7emcc+54vlshw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/common": "22.0.3",
+        "@angular/core": "22.0.3",
+        "@angular/platform-browser": "22.0.3",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "dev": true,
+    "node_modules/@angular/service-worker": {
+      "version": "22.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-22.0.3.tgz",
+      "integrity": "sha512-Sm8AeJkek0755dMndRxUebPkRh0Lxd0D6qGVyNN2Th1skHcEIax+lqAezj7yKCZaQxFdOe8RiOZMk3HEkA0dXw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "ngsw-config": "ngsw-config.js"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/core": "22.0.3",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
-      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.6.tgz",
-      "integrity": "sha512-jSSSDt4ZidNMggcLx8SaKsbGNEfIl0PHx/4mFEulorE7bpYLbN0d3pDW3eJ7Y5Z3yPhy3L3NaPCYyTUY7TuugQ==",
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz",
-      "integrity": "sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-remap-async-to-generator": "^7.22.20",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       }
     },
-    "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz",
-      "integrity": "sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==",
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-remap-async-to-generator": "^7.22.20"
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.6.tgz",
-      "integrity": "sha512-XNW7jolYHW9CwORrZgA/97tL/k05qe/HL0z/qqJq1mdWhwwCM6D4BJBV7wAz9HgFziN5dTOG31znkVIzwxv+vw==",
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.29.7.tgz",
+      "integrity": "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.6.tgz",
-      "integrity": "sha512-S/t1Xh4ehW7sGA7c1j/hiOBLnEYCp/c2sEG4ZkL8kI1xX9tW2pqJTCHKtdhe/jHKt8nG0pFCrDHUXd4DvjHS9w==",
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-class-properties": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.6.tgz",
-      "integrity": "sha512-j6dZ0Z2Z2slWLR3kt9aOmSIrBvnntWjMDN/TVcMPxhXMLmJVqX605CBRlcGI4b32GMbfifTEsdEjGjiE+j/c3A==",
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.6.tgz",
-      "integrity": "sha512-1QSRfoPI9RoLRa8Mnakc6v3e0gJxiZQTYrMfLn+mD0sz5+ndSzwymp2hDcYJTyT0MOn0yuWzj8phlIvO72gTHA==",
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.6.tgz",
-      "integrity": "sha512-+fN+NO2gh8JtRmDSOB6gaCVo36ha8kfCW1nMq2Gc0DABln0VcHN4PrALDvF5/diLzIRKptC7z/d7Lp64zk92Fg==",
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.6",
-        "@babel/helper-compilation-targets": "^7.24.6",
-        "@babel/helper-environment-visitor": "^7.24.6",
-        "@babel/helper-function-name": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-replace-supers": "^7.24.6",
-        "@babel/helper-split-export-declaration": "^7.24.6",
-        "globals": "^11.1.0"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.6.tgz",
-      "integrity": "sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==",
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
+      "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.24.6"
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.6.tgz",
-      "integrity": "sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==",
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.6.tgz",
-      "integrity": "sha512-cRzPobcfRP0ZtuIEkA8QzghoUpSB3X3qSH5W2+FzG+VjWbJXExtx0nbRqwumdBN1x/ot2SlTNQLfBCnPdzp6kg==",
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/template": "^7.24.6"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.6.tgz",
-      "integrity": "sha512-YLW6AE5LQpk5npNXL7i/O+U9CE4XsBCuRPgyjl1EICZYKmcitV+ayuuUGMJm2lC1WWjXYszeTnIxF/dq/GhIZQ==",
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.6.tgz",
-      "integrity": "sha512-rCXPnSEKvkm/EjzOtLoGvKseK+dS4kZwx1HexO3BtRtgL0fQ34awHn34aeSHuXtZY2F8a1X8xqBBPRtOxDVmcA==",
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.6.tgz",
-      "integrity": "sha512-/8Odwp/aVkZwPFJMllSbawhDAO3UJi65foB00HYnK/uXvvCPm0TAXSByjz1mpRmp0q6oX2SIxpkUOpPFHk7FLA==",
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@babel/types": "^7.29.7"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "bin": {
+        "parser": "bin/babel-parser.js"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.6.tgz",
-      "integrity": "sha512-vpq8SSLRTBLOHUZHSnBqVo0AKX3PBaoPs2vVzYVWslXDTDIpwAcCDtfhUcHSQQoYoUvcFPTdC8TZYXu9ZnLT/w==",
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.6.tgz",
-      "integrity": "sha512-EemYpHtmz0lHE7hxxxYEuTYOOBZ43WkDgZ4arQ4r+VX9QHuNZC+WH3wUWmRNvR8ECpTRne29aZV6XO22qpOtdA==",
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-export-namespace-from": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.6.tgz",
-      "integrity": "sha512-inXaTM1SVrIxCkIJ5gqWiozHfFMStuGbGJAxZFBoHcRRdDP0ySLb3jH6JOwmfiinPwyMZqMBX+7NBDCO4z0NSA==",
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.6.tgz",
-      "integrity": "sha512-n3Sf72TnqK4nw/jziSqEl1qaWPbCRw2CziHH+jdRYvw4J6yeCzsj4jdw8hIntOEeDGTmHVe2w4MVL44PN0GMzg==",
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.6"
+        "css-tree": "^3.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "bin": {
+        "specificity": "bin/cli.js"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.6.tgz",
-      "integrity": "sha512-sOajCu6V0P1KPljWHKiDq6ymgqB+vfo3isUS4McqW1DZtvSVU2v/wuMhmRmkg3sFoq6GMaUUf8W4WtoSLkOV/Q==",
+    "node_modules/@commitlint/cli": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-21.1.0.tgz",
+      "integrity": "sha512-CVwY6TxGv5naEaWxBdgNHko1xgL95Mb4WcIqp9iik33H0ctVqRv6YtekCntayhEP0T/apuiGvHu5HcCwFuVxEA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.24.6",
-        "@babel/helper-function-name": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@commitlint/config-conventional": "^21.1.0",
+        "@commitlint/format": "^21.1.0",
+        "@commitlint/lint": "^21.1.0",
+        "@commitlint/load": "^21.1.0",
+        "@commitlint/read": "^21.1.0",
+        "@commitlint/types": "^21.1.0",
+        "tinyexec": "^1.0.0",
+        "yargs": "^18.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "bin": {
+        "commitlint": "cli.js"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "engines": {
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.6.tgz",
-      "integrity": "sha512-Uvgd9p2gUnzYJxVdBLcU0KurF8aVhkmVyMKW4MIY1/BByvs3EBpv45q01o7pRTVmTvtQq5zDlytP3dcUgm7v9w==",
+    "node_modules/@commitlint/config-conventional": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-21.1.0.tgz",
+      "integrity": "sha512-BIFl8xM+3SLy3jrblUC3wmQLCVbLty+++6o859BDCmybVrQdXmIWO+dlkGIbv/M2bBoC55wGuh0zGiw3TPjL1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
+        "@commitlint/types": "^21.1.0",
+        "conventional-changelog-conventionalcommits": "^9.2.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.6.tgz",
-      "integrity": "sha512-f2wHfR2HF6yMj+y+/y07+SLqnOSwRp8KYLpQKOzS58XLVlULhXbiYcygfXQxJlMbhII9+yXDwOUFLf60/TL5tw==",
+    "node_modules/@commitlint/config-validator": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-21.1.0.tgz",
+      "integrity": "sha512-gHczt1xqQSwfNqBmOI3HjejtTljkiBEUneExMmTBLD0WwTC78lAqDvNMyydbySt3DhpH0F9oX7Vvuks6s5XPFw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@commitlint/types": "^21.1.0",
+        "ajv": "^8.11.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.6.tgz",
-      "integrity": "sha512-EKaWvnezBCMkRIHxMJSIIylzhqK09YpiJtDbr2wsXTwnO0TxyjMUkaw4RlFIZMIS0iDj0KyIg7H7XCguHu/YDA==",
+    "node_modules/@commitlint/ensure": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-21.1.0.tgz",
+      "integrity": "sha512-/S8Mo3Q1NtQUYDQjDmyQVPxfIwtnxq+guzMOkuGk8OSdwlzanm1WB9wDPIuuzlbMDDnBNbiAuBEUCcCNlfjrTQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+        "@commitlint/types": "^21.1.0",
+        "es-toolkit": "^1.46.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.6.tgz",
-      "integrity": "sha512-9g8iV146szUo5GWgXpRbq/GALTnY+WnNuRTuRHWWFfWGbP9ukRL0aO/jpu9dmOPikclkxnNsjY8/gsWl6bmZJQ==",
+    "node_modules/@commitlint/execute-rule": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-21.0.1.tgz",
+      "integrity": "sha512-RifH+FmImozKBE6mozhF4K3r2RRKP7SMi/Q/zLCmExtp5e05lhHOUYqGBlFBAGNHaZxU/WYw1XuugYK9jQzqnA==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.6.tgz",
-      "integrity": "sha512-eAGogjZgcwqAxhyFgqghvoHRr+EYRQPFjUXrTYKBRb5qPnAVxOOglaxc4/byHqjvq/bqO2F3/CGwTHsgKJYHhQ==",
+    "node_modules/@commitlint/format": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/format/-/format-21.1.0.tgz",
+      "integrity": "sha512-ySymqKYBfjNrQ5N4W/l1iF2ISW1W7Eu/Oi/wRxlri31N0yjNyzUyUzQwyuZLDzTXIlMs4IZ7hIOfAZx8lO18gA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@commitlint/types": "^21.1.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.6.tgz",
-      "integrity": "sha512-JEV8l3MHdmmdb7S7Cmx6rbNEjRCgTQMZxllveHO0mx6uiclB0NflCawlQQ6+o5ZrwjUBYPzHm2XoK4wqGVUFuw==",
+    "node_modules/@commitlint/is-ignored": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-21.1.0.tgz",
+      "integrity": "sha512-RoRh1/YI+fYH+aid5lMQ2UD0vZ3p3Vf1KeUWT1ir3H/p/7T/6SFv1OiXLgLwUT8dP72EVWeEIyOfkiSWLZYVvw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-simple-access": "^7.24.6"
+        "@commitlint/types": "^21.1.0",
+        "semver": "^7.6.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.6.tgz",
-      "integrity": "sha512-xg1Z0J5JVYxtpX954XqaaAT6NpAY6LtZXvYFCJmGFJWwtlz2EmJoR8LycFRGNE8dBKizGWkGQZGegtkV8y8s+w==",
+    "node_modules/@commitlint/lint": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-21.1.0.tgz",
+      "integrity": "sha512-0DbfVVUjAWBfixW6v7CXXWVxMcj6Ukf/oB7O8NAbouP3jxmqUaC4eVQphxl3B3M0ii3cCQiR3sRAYxICwU2gAA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-hoist-variables": "^7.24.6",
-        "@babel/helper-module-transforms": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-validator-identifier": "^7.24.6"
+        "@commitlint/is-ignored": "^21.1.0",
+        "@commitlint/parse": "^21.1.0",
+        "@commitlint/rules": "^21.1.0",
+        "@commitlint/types": "^21.1.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.6.tgz",
-      "integrity": "sha512-esRCC/KsSEUvrSjv5rFYnjZI6qv4R1e/iHQrqwbZIoRJqk7xCvEUiN7L1XrmW5QSmQe3n1XD88wbgDTWLbVSyg==",
+    "node_modules/@commitlint/load": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-21.1.0.tgz",
+      "integrity": "sha512-juiClVEcoreNB0TNVkseO2EmNcpEs/Yhnmgbnm/hQAKBFRynKwIaoNIljXkx/3yvZcMO0EE8I2XOEI7d5KZG8Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@commitlint/config-validator": "^21.1.0",
+        "@commitlint/execute-rule": "^21.0.1",
+        "@commitlint/resolve-extends": "^21.1.0",
+        "@commitlint/types": "^21.1.0",
+        "cosmiconfig": "^9.0.1",
+        "cosmiconfig-typescript-loader": "^6.1.0",
+        "es-toolkit": "^1.46.0",
+        "is-plain-obj": "^4.1.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.6.tgz",
-      "integrity": "sha512-6DneiCiu91wm3YiNIGDWZsl6GfTTbspuj/toTEqLh9d4cx50UIzSdg+T96p8DuT7aJOBRhFyaE9ZvTHkXrXr6Q==",
+    "node_modules/@commitlint/message": {
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-21.0.2.tgz",
+      "integrity": "sha512-5n4aqHGD/FNnom/D5L8i7cYtV+xjuXcBL832C3w9VglEsZzIsoHpJsvxzJ7cgiOsOdc/2jU4t5+7qMHh7GBX3g==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.6.tgz",
-      "integrity": "sha512-f8liz9JG2Va8A4J5ZBuaSdwfPqN6axfWRK+y66fjKYbwf9VBLuq4WxtinhJhvp1w6lamKUwLG0slK2RxqFgvHA==",
+    "node_modules/@commitlint/parse": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-21.1.0.tgz",
+      "integrity": "sha512-HdAqbbjQS8eEtbR74Ysg2VNmbvAfeWLVYMkip/lHibNrtjRsC/97XAYN3/H5P0pEJtDfyTb3iLs8x6y0eu4OYA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@commitlint/types": "^21.1.0",
+        "conventional-changelog-angular": "^8.2.0",
+        "conventional-commits-parser": "^6.3.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.6.tgz",
-      "integrity": "sha512-+QlAiZBMsBK5NqrBWFXCYeXyiU1y7BQ/OYaiPAcQJMomn5Tyg+r5WuVtyEuvTbpV7L25ZSLfE+2E9ywj4FD48A==",
+    "node_modules/@commitlint/read": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-21.1.0.tgz",
+      "integrity": "sha512-ID7m79aw8d0dMlxuXHD2QGxEX3Fhl/mUPA80WwEW5VgeOpUHNahhwWJefDdoBDVZcDfbHuf429NrcK0gxQsQjA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+        "@commitlint/top-level": "^21.0.2",
+        "@commitlint/types": "^21.1.0",
+        "git-raw-commits": "^5.0.0",
+        "tinyexec": "^1.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.6.tgz",
-      "integrity": "sha512-6voawq8T25Jvvnc4/rXcWZQKKxUNZcKMS8ZNrjxQqoRFernJJKjE3s18Qo6VFaatG5aiX5JV1oPD7DbJhn0a4Q==",
+    "node_modules/@commitlint/resolve-extends": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-21.1.0.tgz",
+      "integrity": "sha512-SANYkxJDfMl3TvnyALWHEaiF5nc6FFaOnh7VvfxjT4X2vD4i2gVHhmfMm1fsrBwDRX98/XyM1XDo5sAd/KXcyQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+        "@commitlint/config-validator": "^21.1.0",
+        "@commitlint/types": "^21.1.0",
+        "es-toolkit": "^1.46.0",
+        "global-directory": "^5.0.0",
+        "resolve-from": "^5.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.6.tgz",
-      "integrity": "sha512-OKmi5wiMoRW5Smttne7BwHM8s/fb5JFs+bVGNSeHWzwZkWXWValR1M30jyXo1s/RaqgwwhEC62u4rFH/FBcBPg==",
+    "node_modules/@commitlint/rules": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-21.1.0.tgz",
+      "integrity": "sha512-fOPEYSmKn1ZJptjLmCEjJfYqz0PUYr8ng6VY2ZW26sB7KtENR90CmAXHEmScBbOIZip+d/+OwqK12DFBuHTqsQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.24.6"
+        "@commitlint/ensure": "^21.1.0",
+        "@commitlint/message": "^21.0.2",
+        "@commitlint/to-lines": "^21.0.1",
+        "@commitlint/types": "^21.1.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.6.tgz",
-      "integrity": "sha512-N/C76ihFKlZgKfdkEYKtaRUtXZAgK7sOY4h2qrbVbVTXPrKGIi8aww5WGe/+Wmg8onn8sr2ut6FXlsbu/j6JHg==",
+    "node_modules/@commitlint/to-lines": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-21.0.1.tgz",
+      "integrity": "sha512-bd1BFII7p1EQZre9Kaj+kKaMFP3cFCdt21K7DItVux9XP5WjLgJ0/Uy1pJJh9aPwVJ6SKg62PxqlZaHI8hQAXw==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-replace-supers": "^7.24.6"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.6.tgz",
-      "integrity": "sha512-L5pZ+b3O1mSzJ71HmxSCmTVd03VOT2GXOigug6vDYJzE5awLI7P1g0wFcdmGuwSDSrQ0L2rDOe/hHws8J1rv3w==",
+    "node_modules/@commitlint/top-level": {
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-21.0.2.tgz",
+      "integrity": "sha512-s9KKM+e+mXgFeIh4n7KmOGAVT3mkJ3Fp1bBYHIK5pjeUwlEMzp/tZfb5u0Poa680AsQTXMEMRxZi1vQ9m2X5ug==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+        "escalade": "^3.2.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-optional-chaining": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.6.tgz",
-      "integrity": "sha512-cHbqF6l1QP11OkYTYQ+hhVx1E017O5ZcSPXk9oODpqhcAD1htsWG2NpHrrhthEO2qZomLK0FXS+u7NfrkF5aOQ==",
+    "node_modules/@commitlint/types": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-21.1.0.tgz",
+      "integrity": "sha512-YodnnnH1Cp+08nP8HGNJAIuB6L3/vdCTHVRTfF8Ik/wRCLOTsU9zwv3yO1cSPQRDa9CLYtE+UJ2K67r7CwMSFw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.6",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+        "conventional-commits-parser": "^6.3.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.6.tgz",
-      "integrity": "sha512-ST7guE8vLV+vI70wmAxuZpIKzVjvFX9Qs8bl5w6tN/6gOypPWUmMQL2p7LJz5E63vEGrDhAiYetniJFyBH1RkA==",
+    "node_modules/@conventional-changelog/git-client": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@conventional-changelog/git-client/-/git-client-2.7.0.tgz",
+      "integrity": "sha512-j7A8/LBEQ+3rugMzPXoKYzyUPpw/0CBQCyvtTR7Lmu4olG4yRC/Tfkq79Mr3yuPs0SUitlO2HwGP3gitMJnRFw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@simple-libs/child-process-utils": "^1.0.0",
+        "@simple-libs/stream-utils": "^1.2.0",
+        "semver": "^7.5.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "conventional-commits-filter": "^5.0.0",
+        "conventional-commits-parser": "^6.4.0"
+      },
+      "peerDependenciesMeta": {
+        "conventional-commits-filter": {
+          "optional": true
+        },
+        "conventional-commits-parser": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-private-methods": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.6.tgz",
-      "integrity": "sha512-T9LtDI0BgwXOzyXrvgLTT8DFjCC/XgWLjflczTLXyvxbnSR/gpv0hbmzlHE/kmh9nOvlygbamLKRo6Op4yB6aw==",
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
+        "@jridgewell/trace-mapping": "0.3.9"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=12"
       }
     },
-    "node_modules/@babel/plugin-transform-private-property-in-object": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.6.tgz",
-      "integrity": "sha512-Qu/ypFxCY5NkAnEhCF86Mvg3NSabKsh/TPpBVswEdkGl7+FbsYHy1ziRqJpwGH4thBdQHh8zx+z7vMYmcJ7iaQ==",
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.6",
-        "@babel/helper-create-class-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
-    "node_modules/@babel/plugin-transform-private-property-in-object/node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.6.tgz",
-      "integrity": "sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==",
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=20.19.0"
       }
     },
-    "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.6.tgz",
-      "integrity": "sha512-oARaglxhRsN18OYsnPTpb8TcKQWDYNsPNmTnx5++WOAsUJ0cSC/FZVlIJCKvPbU4yn/UXsS0551CFKJhN0CaMw==",
+    "node_modules/@csstools/css-calc": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
+      "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=20.19.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.6.tgz",
-      "integrity": "sha512-SMDxO95I8WXRtXhTAc8t/NFQUT7VYbIWwJCJgEli9ml4MhqUMh4S6hxgH6SmAC3eAQNWCDJFxcFeEt9w2sDdXg==",
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.7.tgz",
+      "integrity": "sha512-CmjJFQTFQx/U/xNJhSjCQ0ilpesPmNQ8+eOUeM/+kDOVW33qsIjeOXc27vrQDdWVkf83ZSWwtg7kXSUvKDJ8cQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "regenerator-transform": "^0.15.2"
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.2.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=20.19.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.6.tgz",
-      "integrity": "sha512-DcrgFXRRlK64dGE0ZFBPD5egM2uM8mgfrvTMOSB2yKzOtjpGegVYkzh3s1zZg1bBck3nkXiaOamJUqK3Syk+4A==",
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=20.19.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@csstools/css-tokenizer": "^4.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.0.tgz",
-      "integrity": "sha512-zc0GA5IitLKJrSfXlXmp8KDqLrnGECK7YRfQBmEKg1NmBOQ7e+KuclBEKJgzifQeUYLdNiAw4B4bjyvzWVLiSA==",
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.5.tgz",
+      "integrity": "sha512-oNjBvzLq2GPZtJphCjLqXow/cHySHSgtxvKZb7OqSZ/xHgw6NWNhfad+6AB9cLeVm6eA9d/qMll3JdEHjy6M+A==",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "babel-plugin-polyfill-corejs2": "^0.4.8",
-        "babel-plugin-polyfill-corejs3": "^0.9.0",
-        "babel-plugin-polyfill-regenerator": "^0.5.5",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
       "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
       }
     },
-    "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.6.tgz",
-      "integrity": "sha512-xnEUvHSMr9eOWS5Al2YPfc32ten7CXdH7Zwyyk7IqITg4nX61oHj+GxpNvl+y5JHjfN3KXE2IV55wAWowBYMVw==",
-      "dev": true,
+    "node_modules/@ctrl/ngx-emoji-mart": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/ngx-emoji-mart/-/ngx-emoji-mart-9.3.0.tgz",
+      "integrity": "sha512-9uFzAvlFT21OLsTfhL3ZEO5mp51qvL1F4ErIZVBIsvAlji46u6p2KGgVA60oIheFBX4JoZI7HBDGOkGnm9dTUQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@angular/core": ">=15.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.6.tgz",
-      "integrity": "sha512-h/2j7oIUDjS+ULsIrNZ6/TKG97FgmEk1PXryk/HQq6op4XUUUwif2f69fJrzK0wza2zjCS1xhXmouACaWV5uPA==",
+    "node_modules/@date-fns/tz": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.5.0.tgz",
+      "integrity": "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.6.tgz",
-      "integrity": "sha512-fN8OcTLfGmYv7FnDrsjodYBo1DhPL3Pze/9mIIE2MGCT1KgADYIOD7rEglpLHZj8PZlC/JFX5WcD+85FLAQusw==",
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.6.tgz",
-      "integrity": "sha512-BJbEqJIcKwrqUP+KfUIkxz3q8VzXe2R8Wv8TaNgO1cx+nNavxn/2+H8kp9tgFSOL6wYPPEgFvU6IKS4qoGqhmg==",
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.6.tgz",
-      "integrity": "sha512-IshCXQ+G9JIFJI7bUpxTE/oA2lgVLAIK8q1KdJNoPXOpvRaNjMySGuvLfBw/Xi2/1lLo953uE8hyYSDW3TSYig==",
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.6.tgz",
-      "integrity": "sha512-bKl3xxcPbkQQo5eX9LjjDpU2xYHeEeNQbOhj0iPvetSzA+Tu9q/o5lujF4Sek60CM6MgYvOS/DJuwGbiEYAnLw==",
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.6.tgz",
-      "integrity": "sha512-8EIgImzVUxy15cZiPii9GvLZwsy7Vxc+8meSlR3cXFmBIl5W5Tn9LGBf7CDKkHj4uVfNXCJB8RsVfnmY61iedA==",
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.6.tgz",
-      "integrity": "sha512-pssN6ExsvxaKU638qcWb81RrvvgZom3jDgU/r5xFZ7TONkZGFf4MhI2ltMb8OcQWhHyxgIavEU+hgqtbKOmsPA==",
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.6.tgz",
-      "integrity": "sha512-quiMsb28oXWIDK0gXLALOJRXLgICLiulqdZGOaPPd0vRT7fQp74NtdADAVu+D8s00C+0Xs0MxVP0VKF/sZEUgw==",
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.6",
-        "@babel/helper-plugin-utils": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/preset-env": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.0.tgz",
-      "integrity": "sha512-ZxPEzV9IgvGn73iK0E6VB9/95Nd7aMFpbE0l8KQFDG70cOV9IxRP7Y2FUPmlK0v6ImlLqYX50iuZ3ZTVhOF2lA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.23.5",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-validator-option": "^7.23.5",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.7",
-        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-import-assertions": "^7.23.3",
-        "@babel/plugin-syntax-import-attributes": "^7.23.3",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.23.3",
-        "@babel/plugin-transform-async-generator-functions": "^7.23.9",
-        "@babel/plugin-transform-async-to-generator": "^7.23.3",
-        "@babel/plugin-transform-block-scoped-functions": "^7.23.3",
-        "@babel/plugin-transform-block-scoping": "^7.23.4",
-        "@babel/plugin-transform-class-properties": "^7.23.3",
-        "@babel/plugin-transform-class-static-block": "^7.23.4",
-        "@babel/plugin-transform-classes": "^7.23.8",
-        "@babel/plugin-transform-computed-properties": "^7.23.3",
-        "@babel/plugin-transform-destructuring": "^7.23.3",
-        "@babel/plugin-transform-dotall-regex": "^7.23.3",
-        "@babel/plugin-transform-duplicate-keys": "^7.23.3",
-        "@babel/plugin-transform-dynamic-import": "^7.23.4",
-        "@babel/plugin-transform-exponentiation-operator": "^7.23.3",
-        "@babel/plugin-transform-export-namespace-from": "^7.23.4",
-        "@babel/plugin-transform-for-of": "^7.23.6",
-        "@babel/plugin-transform-function-name": "^7.23.3",
-        "@babel/plugin-transform-json-strings": "^7.23.4",
-        "@babel/plugin-transform-literals": "^7.23.3",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
-        "@babel/plugin-transform-member-expression-literals": "^7.23.3",
-        "@babel/plugin-transform-modules-amd": "^7.23.3",
-        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-        "@babel/plugin-transform-modules-systemjs": "^7.23.9",
-        "@babel/plugin-transform-modules-umd": "^7.23.3",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
-        "@babel/plugin-transform-new-target": "^7.23.3",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
-        "@babel/plugin-transform-numeric-separator": "^7.23.4",
-        "@babel/plugin-transform-object-rest-spread": "^7.24.0",
-        "@babel/plugin-transform-object-super": "^7.23.3",
-        "@babel/plugin-transform-optional-catch-binding": "^7.23.4",
-        "@babel/plugin-transform-optional-chaining": "^7.23.4",
-        "@babel/plugin-transform-parameters": "^7.23.3",
-        "@babel/plugin-transform-private-methods": "^7.23.3",
-        "@babel/plugin-transform-private-property-in-object": "^7.23.4",
-        "@babel/plugin-transform-property-literals": "^7.23.3",
-        "@babel/plugin-transform-regenerator": "^7.23.3",
-        "@babel/plugin-transform-reserved-words": "^7.23.3",
-        "@babel/plugin-transform-shorthand-properties": "^7.23.3",
-        "@babel/plugin-transform-spread": "^7.23.3",
-        "@babel/plugin-transform-sticky-regex": "^7.23.3",
-        "@babel/plugin-transform-template-literals": "^7.23.3",
-        "@babel/plugin-transform-typeof-symbol": "^7.23.3",
-        "@babel/plugin-transform-unicode-escapes": "^7.23.3",
-        "@babel/plugin-transform-unicode-property-regex": "^7.23.3",
-        "@babel/plugin-transform-unicode-regex": "^7.23.3",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
-        "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.8",
-        "babel-plugin-polyfill-corejs3": "^0.9.0",
-        "babel-plugin-polyfill-regenerator": "^0.5.5",
-        "core-js-compat": "^3.31.0",
-        "semver": "^6.3.1"
-      },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/preset-env/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/preset-modules": {
-      "version": "0.1.6-no-external-plugins",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
-      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/regjsgen": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
-      "dev": true
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
-      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.6.tgz",
-      "integrity": "sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==",
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
+      "cpu": [
+        "mips64el"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.24.6",
-        "@babel/parser": "^7.24.6",
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/traverse": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.6.tgz",
-      "integrity": "sha512-OsNjaJwT9Zn8ozxcfoBc+RaHdj3gFmCmYoQLUII1o6ZrUwku0BMg80FoOTPx+Gi6XhcQxAYE4xyjPTo4SxEQqw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.24.6",
-        "@babel/generator": "^7.24.6",
-        "@babel/helper-environment-visitor": "^7.24.6",
-        "@babel/helper-function-name": "^7.24.6",
-        "@babel/helper-hoist-variables": "^7.24.6",
-        "@babel/helper-split-export-declaration": "^7.24.6",
-        "@babel/parser": "^7.24.6",
-        "@babel/types": "^7.24.6",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
-      },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/traverse/node_modules/@babel/generator": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.6.tgz",
-      "integrity": "sha512-S7m4eNa6YAPJRHmKsLHIDJhNAGNKoWNiWefz1MBbpnt8g9lvMDl1hir4P9bo/57bQEmuwEhnRU/AMWsD0G/Fbg==",
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6",
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^2.5.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/traverse/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.6.tgz",
-      "integrity": "sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==",
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.24.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/types": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.6.tgz",
-      "integrity": "sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==",
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.24.6",
-        "@babel/helper-validator-identifier": "^7.24.6",
-        "to-fast-properties": "^2.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@colors/colors": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
       "engines": {
-        "node": ">=0.1.90"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/cli": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-16.3.0.tgz",
-      "integrity": "sha512-P+kvONlfsuTMnxSwWE1H+ZcPMY3STFaHb2kAacsqoIkNx66O0T7sTpBxpxkMrFPyhkJiLJnJWMhk4bbvYD3BMA==",
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@commitlint/format": "^16.2.1",
-        "@commitlint/lint": "^16.2.4",
-        "@commitlint/load": "^16.3.0",
-        "@commitlint/read": "^16.2.1",
-        "@commitlint/types": "^16.2.1",
-        "lodash": "^4.17.19",
-        "resolve-from": "5.0.0",
-        "resolve-global": "1.0.0",
-        "yargs": "^17.0.0"
-      },
-      "bin": {
-        "commitlint": "cli.js"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
       "engines": {
-        "node": ">=v12"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/config-conventional": {
-      "version": "17.8.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-17.8.1.tgz",
-      "integrity": "sha512-NxCOHx1kgneig3VLauWJcDWS40DVjg7nKOpBEEK9E5fjJpQqLCilcnKkIIjdBH98kEO1q3NpE5NSrZ2kl/QGJg==",
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "conventional-changelog-conventionalcommits": "^6.1.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">=v14"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/config-validator": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-16.2.1.tgz",
-      "integrity": "sha512-hogSe0WGg7CKmp4IfNbdNES3Rq3UEI4XRPB8JL4EPgo/ORq5nrGTVzxJh78omibNuB8Ho4501Czb1Er1MoDWpw==",
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@commitlint/types": "^16.2.1",
-        "ajv": "^6.12.6"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">=v12"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/config-validator/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/config-validator/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/@commitlint/ensure": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-16.2.1.tgz",
-      "integrity": "sha512-/h+lBTgf1r5fhbDNHOViLuej38i3rZqTQnBTk+xEg+ehOwQDXUuissQ5GsYXXqI5uGy+261ew++sT4EA3uBJ+A==",
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@commitlint/types": "^16.2.1",
-        "lodash": "^4.17.19"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
       "engines": {
-        "node": ">=v12"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/execute-rule": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-16.2.1.tgz",
-      "integrity": "sha512-oSls82fmUTLM6cl5V3epdVo4gHhbmBFvCvQGHBRdQ50H/690Uq1Dyd7hXMuKITCIdcnr9umyDkr8r5C6HZDF3g==",
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=v12"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/format": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/format/-/format-16.2.1.tgz",
-      "integrity": "sha512-Yyio9bdHWmNDRlEJrxHKglamIk3d6hC0NkEUW6Ti6ipEh2g0BAhy8Od6t4vLhdZRa1I2n+gY13foy+tUgk0i1Q==",
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "dependencies": {
-        "@commitlint/types": "^16.2.1",
-        "chalk": "^4.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=v12"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/format/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "node": ">=18"
       }
     },
-    "node_modules/@commitlint/format/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@commitlint/format/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
+        "url": "https://opencollective.com/eslint"
       },
-      "engines": {
-        "node": ">=7.0.0"
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@commitlint/format/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/@commitlint/format/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
-    "node_modules/@commitlint/format/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
+    "node_modules/@eslint/config-array": {
+      "version": "0.23.5",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+      "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@eslint/object-schema": "^3.0.5",
+        "debug": "^4.3.1",
+        "minimatch": "^10.2.4"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
-    "node_modules/@commitlint/is-ignored": {
-      "version": "16.2.4",
-      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-16.2.4.tgz",
-      "integrity": "sha512-Lxdq9aOAYCOOOjKi58ulbwK/oBiiKz+7Sq0+/SpFIEFwhHkIVugvDvWjh2VRBXmRC/x5lNcjDcYEwS/uYUvlYQ==",
-      "dev": true,
-      "dependencies": {
-        "@commitlint/types": "^16.2.1",
-        "semver": "7.3.7"
-      },
+    "node_modules/@eslint/config-array/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=v12"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/@commitlint/is-ignored/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
+        "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/@commitlint/is-ignored/node_modules/semver": {
-      "version": "7.3.7",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-      "dev": true,
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": ">=10"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@commitlint/is-ignored/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
-    "node_modules/@commitlint/lint": {
-      "version": "16.2.4",
-      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-16.2.4.tgz",
-      "integrity": "sha512-AUDuwOxb2eGqsXbTMON3imUGkc1jRdtXrbbohiLSCSk3jFVXgJLTMaEcr39pR00N8nE9uZ+V2sYaiILByZVmxQ==",
-      "dev": true,
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.6.0.tgz",
+      "integrity": "sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@commitlint/is-ignored": "^16.2.4",
-        "@commitlint/parse": "^16.2.1",
-        "@commitlint/rules": "^16.2.4",
-        "@commitlint/types": "^16.2.1"
+        "@eslint/core": "^1.2.1"
       },
       "engines": {
-        "node": ">=v12"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
-    "node_modules/@commitlint/load": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-16.3.0.tgz",
-      "integrity": "sha512-3tykjV/iwbkv2FU9DG+NZ/JqmP0Nm3b7aDwgCNQhhKV5P74JAuByULkafnhn+zsFGypG1qMtI5u+BZoa9APm0A==",
-      "dev": true,
+    "node_modules/@eslint/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@commitlint/config-validator": "^16.2.1",
-        "@commitlint/execute-rule": "^16.2.1",
-        "@commitlint/resolve-extends": "^16.2.1",
-        "@commitlint/types": "^16.2.1",
-        "@types/node": ">=12",
-        "chalk": "^4.0.0",
-        "cosmiconfig": "^7.0.0",
-        "cosmiconfig-typescript-loader": "^2.0.0",
-        "lodash": "^4.17.19",
-        "resolve-from": "^5.0.0",
-        "typescript": "^4.4.3"
+        "@types/json-schema": "^7.0.15"
       },
       "engines": {
-        "node": ">=v12"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
-    "node_modules/@commitlint/load/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
+    "node_modules/@eslint/js": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@commitlint/load/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
+    "node_modules/@eslint/object-schema": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+      "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
-    "node_modules/@commitlint/load/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz",
+      "integrity": "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "@eslint/core": "^1.2.1",
+        "levn": "^0.4.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
-    "node_modules/@commitlint/load/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/@commitlint/load/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@commitlint/load/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/@gar/promise-retry": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@gar/promise-retry/-/promise-retry-1.0.3.tgz",
+      "integrity": "sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA==",
       "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@commitlint/load/node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+    "node_modules/@harperfast/extended-iterable": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@harperfast/extended-iterable/-/extended-iterable-1.0.3.tgz",
+      "integrity": "sha512-sSAYhQca3rDWtQUHSAPeO7axFIUJOI6hn1gjRC5APVE1a90tuyT8f5WIgRsFhhWA7htNkju2veB9eWL6YHi/Lw==",
       "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
+      "license": "Apache-2.0",
+      "optional": true
     },
-    "node_modules/@commitlint/message": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-16.2.1.tgz",
-      "integrity": "sha512-2eWX/47rftViYg7a3axYDdrgwKv32mxbycBJT6OQY/MJM7SUfYNYYvbMFOQFaA4xIVZt7t2Alyqslbl6blVwWw==",
+    "node_modules/@hono/node-server": {
+      "version": "1.19.17",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.17.tgz",
+      "integrity": "sha512-dSneS5qhiauZWGDCeK4o695Xd9nUNjviSZCMQrj10eetr8Uln1ucn6bbphOM6UynAMMtNIzZNSpL9vnASJwrPQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=v12"
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
       }
     },
-    "node_modules/@commitlint/parse": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-16.2.1.tgz",
-      "integrity": "sha512-2NP2dDQNL378VZYioLrgGVZhWdnJO4nAxQl5LXwYb08nEcN+cgxHN1dJV8OLJ5uxlGJtDeR8UZZ1mnQ1gSAD/g==",
-      "dev": true,
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@commitlint/types": "^16.2.1",
-        "conventional-changelog-angular": "^5.0.11",
-        "conventional-commits-parser": "^3.2.2"
+        "@humanfs/types": "^0.15.0"
       },
       "engines": {
-        "node": ">=v12"
+        "node": ">=18.18.0"
       }
     },
-    "node_modules/@commitlint/read": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-16.2.1.tgz",
-      "integrity": "sha512-tViXGuaxLTrw2r7PiYMQOFA2fueZxnnt0lkOWqKyxT+n2XdEMGYcI9ID5ndJKXnfPGPppD0w/IItKsIXlZ+alw==",
-      "dev": true,
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@commitlint/top-level": "^16.2.1",
-        "@commitlint/types": "^16.2.1",
-        "fs-extra": "^10.0.0",
-        "git-raw-commits": "^2.0.0"
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
       },
       "engines": {
-        "node": ">=v12"
+        "node": ">=18.18.0"
       }
     },
-    "node_modules/@commitlint/resolve-extends": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-16.2.1.tgz",
-      "integrity": "sha512-NbbCMPKTFf2J805kwfP9EO+vV+XvnaHRcBy6ud5dF35dxMsvdJqke54W3XazXF1ZAxC4a3LBy4i/GNVBAthsEg==",
-      "dev": true,
-      "dependencies": {
-        "@commitlint/config-validator": "^16.2.1",
-        "@commitlint/types": "^16.2.1",
-        "import-fresh": "^3.0.0",
-        "lodash": "^4.17.19",
-        "resolve-from": "^5.0.0",
-        "resolve-global": "^1.0.0"
-      },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=v12"
+        "node": ">=18.18.0"
       }
     },
-    "node_modules/@commitlint/rules": {
-      "version": "16.2.4",
-      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-16.2.4.tgz",
-      "integrity": "sha512-rK5rNBIN2ZQNQK+I6trRPK3dWa0MtaTN4xnwOma1qxa4d5wQMQJtScwTZjTJeallFxhOgbNOgr48AMHkdounVg==",
-      "dev": true,
-      "dependencies": {
-        "@commitlint/ensure": "^16.2.1",
-        "@commitlint/message": "^16.2.1",
-        "@commitlint/to-lines": "^16.2.1",
-        "@commitlint/types": "^16.2.1",
-        "execa": "^5.0.0"
-      },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=v12"
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@commitlint/to-lines": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-16.2.1.tgz",
-      "integrity": "sha512-9/VjpYj5j1QeY3eiog1zQWY6axsdWAc0AonUUfyZ7B0MVcRI0R56YsHAfzF6uK/g/WwPZaoe4Lb1QCyDVnpVaQ==",
-      "dev": true,
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=v12"
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@commitlint/top-level": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-16.2.1.tgz",
-      "integrity": "sha512-lS6GSieHW9y6ePL73ied71Z9bOKyK+Ib9hTkRsB8oZFAyQZcyRwq2w6nIa6Fngir1QW51oKzzaXfJL94qwImyw==",
+    "node_modules/@inquirer/ansi": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@inquirer/ansi/-/ansi-2.0.7.tgz",
+      "integrity": "sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==",
       "dev": true,
-      "dependencies": {
-        "find-up": "^5.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=v12"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
       }
     },
-    "node_modules/@commitlint/types": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-16.2.1.tgz",
-      "integrity": "sha512-7/z7pA7BM0i8XvMSBynO7xsB3mVQPUZbVn6zMIlp/a091XJ3qAXRXc+HwLYhiIdzzS5fuxxNIHZMGHVD4HJxdA==",
+    "node_modules/@inquirer/checkbox": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-5.2.1.tgz",
+      "integrity": "sha512-b6xmA/VlTe0ZgDQHDui+Nav470u7u49nRd8/iuhOcQPO9Ch7lGuogydhi2VOmNlZ+zXcM8IcPuNSwQcdJaF/kw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "chalk": "^4.0.0"
+        "@inquirer/ansi": "^2.0.7",
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/figures": "^2.0.7",
+        "@inquirer/type": "^4.0.7"
       },
       "engines": {
-        "node": ">=v12"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@commitlint/types/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/@inquirer/confirm": {
+      "version": "6.0.12",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-6.0.12.tgz",
+      "integrity": "sha512-h9FgGun3QwVYNj5TWIZZ+slii73bMoBFjPfVIGtnFuL4t8gBiNDV9PcSfIzkuxvgquJKt9nr1QzszpBzTbH8Og==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "@inquirer/core": "^11.1.9",
+        "@inquirer/type": "^4.0.5"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0"
       },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@commitlint/types/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+    "node_modules/@inquirer/core": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-11.2.1.tgz",
+      "integrity": "sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "@inquirer/ansi": "^2.0.7",
+        "@inquirer/figures": "^2.0.7",
+        "@inquirer/type": "^4.0.7",
+        "cli-width": "^4.1.0",
+        "fast-wrap-ansi": "^0.2.0",
+        "mute-stream": "^3.0.0",
+        "signal-exit": "^4.1.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
       },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@commitlint/types/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+    "node_modules/@inquirer/editor": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/editor/-/editor-5.2.2.tgz",
+      "integrity": "sha512-ZRVd/oD+sYsUd5zVm0NflqEzlqfYCyHNsqkHl2oWXEUHs12tCbcSFi+wVFEvD8+LGRaMUsVrE7qeo6lSG/S1Vg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/external-editor": "^3.0.3",
+        "@inquirer/type": "^4.0.7"
       },
       "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@commitlint/types/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/@commitlint/types/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@commitlint/types/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/@inquirer/expand": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/expand/-/expand-5.1.1.tgz",
+      "integrity": "sha512-YmQpenjbFSHAK3sOd44puHh3V1KXXr+JiNpUztoSQ4drLh2rTVzTap/YtlAVu/5xavifIlBfNEzJ/neZJ1a/1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/type": "^4.0.7"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@cspotcode/source-map-support": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
-      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+    "node_modules/@inquirer/external-editor": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-3.0.3.tgz",
+      "integrity": "sha512-6thf5I8q7lZwzGLAxPaaGEREEkZ3nyePPDQ1oyobblxmEE8mqTLguScP7pDjUTAibiyb4hfXl+qjUEJ+di/aNA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/trace-mapping": "0.3.9"
+        "chardet": "^2.1.1",
+        "iconv-lite": "^0.7.2"
       },
       "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
-      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
-      }
-    },
-    "node_modules/@ctrl/ngx-emoji-mart": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/ngx-emoji-mart/-/ngx-emoji-mart-9.2.0.tgz",
-      "integrity": "sha512-q8B7DiXPfyTe+VOGO6Ix7eh5gKCuADxAsud2xXRTlECTfchoKGTmirSczyjaxIKE/xmB+/ZsnkpthZqUM7SAJQ==",
-      "dependencies": {
-        "tslib": "^2.3.0"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
       },
       "peerDependencies": {
-        "@angular/core": ">=15.0.0-0"
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@discoveryjs/json-ext": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
-      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+    "node_modules/@inquirer/figures": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-2.0.7.tgz",
+      "integrity": "sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
       }
     },
-    "node_modules/@es-joy/jsdoccomment": {
-      "version": "0.31.0",
-      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.31.0.tgz",
-      "integrity": "sha512-tc1/iuQcnaiSIUVad72PBierDFpsxdUHtEF/OrfqvM1CBAsIoMP51j52jTMb3dXriwhieTo289InzZj72jL3EQ==",
+    "node_modules/@inquirer/input": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/input/-/input-5.1.2.tgz",
+      "integrity": "sha512-9K/DDBSQpOyZSkt6sOVP9Vo0TR7atX2kuILsUu0x3wVcVbe97lJwIJKMLdMw25tDYuXl/qp6erT0Xs1rfmcfZg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "comment-parser": "1.3.1",
-        "esquery": "^1.4.0",
-        "jsdoc-type-pratt-parser": "~3.1.0"
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/type": "^4.0.7"
       },
       "engines": {
-        "node": "^14 || ^16 || ^17 || ^18"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.1.tgz",
-      "integrity": "sha512-m55cpeupQ2DbuRGQMMZDzbv9J9PgVelPjlcmM5kxHnrBdBx6REaEd7LamYV7Dm8N7rCyR/XwU6rVP8ploKtIkA==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/@inquirer/number": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/number/-/number-4.1.1.tgz",
+      "integrity": "sha512-XF4IXAbPnGPgw0wsbC/i2tPcyfdZgDpUlhsqU0SfT4IRIGWha6Xm9VRgN5yYxJq+jnyXlfXI/nQ3ulfk0iEICA==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/type": "^4.0.7"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.1.tgz",
-      "integrity": "sha512-4j0+G27/2ZXGWR5okcJi7pQYhmkVgb4D7UKwxcqrjhvp5TKWx3cUjgB1CGj1mfdmJBQ9VnUGgUhign+FPF2Zgw==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/@inquirer/password": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/password/-/password-5.1.1.tgz",
+      "integrity": "sha512-3XBfF7DAsp5qeDsvN5Rd1HmbNokVvEQoUM0QLrRcybC9nX96w3Pbmu7qUsb3IT3J3jBvs2+mTXaKHOUsgHMLzg==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/ansi": "^2.0.7",
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/type": "^4.0.7"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.1.tgz",
-      "integrity": "sha512-hCnXNF0HM6AjowP+Zou0ZJMWWa1VkD77BXe959zERgGJBBxB+sV+J9f/rcjeg2c5bsukD/n17RKWXGFCO5dD5A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@inquirer/prompts": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-8.4.2.tgz",
+      "integrity": "sha512-XJmn/wY4AX56l1BRU+ZjDrFtg9+2uBEi4JvJQj82kwJDQKiPgSn4CEsbfGGygS4Gw6rkL4W18oATjfVfaqub2Q==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/checkbox": "^5.1.4",
+        "@inquirer/confirm": "^6.0.12",
+        "@inquirer/editor": "^5.1.1",
+        "@inquirer/expand": "^5.0.13",
+        "@inquirer/input": "^5.0.12",
+        "@inquirer/number": "^4.0.12",
+        "@inquirer/password": "^5.0.12",
+        "@inquirer/rawlist": "^5.2.8",
+        "@inquirer/search": "^4.1.8",
+        "@inquirer/select": "^5.1.4"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.1.tgz",
-      "integrity": "sha512-MSfZMBoAsnhpS+2yMFYIQUPs8Z19ajwfuaSZx+tSl09xrHZCjbeXXMsUF/0oq7ojxYEpsSo4c0SfjxOYXRbpaA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@inquirer/rawlist": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/rawlist/-/rawlist-5.3.1.tgz",
+      "integrity": "sha512-QqdTqQddL3qPX/PPrjobpsO25NZ4dWXgTLenrR445L2ptLEYE6Z+PD5c5CNDJNx4ugRgELAIpSIJxZaO2jJ2Og==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/type": "^4.0.7"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.1.tgz",
-      "integrity": "sha512-Ylk6rzgMD8klUklGPzS414UQLa5NPXZD5tf8JmQU8GQrj6BrFA/Ic9tb2zRe1kOZyCbGl+e8VMbDRazCEBqPvA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@inquirer/search": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/search/-/search-4.2.1.tgz",
+      "integrity": "sha512-xJj8QWKRSrfKoBIITLZK61dD3zwo0Rz11fgDImku30/Oe81zMdIdGgrLY2h6RkJ+KZ/GhNYIRMKnH/62qBTA5g==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/figures": "^2.0.7",
+        "@inquirer/type": "^4.0.7"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.1.tgz",
-      "integrity": "sha512-pFIfj7U2w5sMp52wTY1XVOdoxw+GDwy9FsK3OFz4BpMAjvZVs0dT1VXs8aQm22nhwoIWUmIRaE+4xow8xfIDZA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@inquirer/select": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/select/-/select-5.2.1.tgz",
+      "integrity": "sha512-FlDndEUww8m7BfukO2nJa25vhD+H5jxxCv4oGioKqzyWz3nPHhhw4LKdYRSlXuAx7DsdWia7iyaBPKKS95Evfw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/ansi": "^2.0.7",
+        "@inquirer/core": "^11.2.1",
+        "@inquirer/figures": "^2.0.7",
+        "@inquirer/type": "^4.0.7"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.1.tgz",
-      "integrity": "sha512-UyW1WZvHDuM4xDz0jWun4qtQFauNdXjXOtIy7SYdf7pbxSWWVlqhnR/T2TpX6LX5NI62spt0a3ldIIEkPM6RHw==",
+    "node_modules/@inquirer/type": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-4.0.7.tgz",
+      "integrity": "sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=23.5.0 || ^22.13.0 || ^20.17.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@listr2/prompt-adapter-inquirer": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-4.2.3.tgz",
+      "integrity": "sha512-Co9U3AJ3LW0J8XBHjVoNKA79dMAyFt8EZH3OaKTMcDTj8r+6kG3vSUPq/eGLHT7P0iK3uLaFfhdFYd3033P24g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/type": "^4.0.5"
+      },
+      "engines": {
+        "node": ">=22.13.0"
+      },
+      "peerDependencies": {
+        "@inquirer/prompts": ">= 3 < 9",
+        "listr2": "10.2.1"
+      }
+    },
+    "node_modules/@lmdb/lmdb-darwin-arm64": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.5.4.tgz",
+      "integrity": "sha512-Kk4Kz3iyu1QiLsLZBS9Af1eSKUC8VR2T+/jyE2iAyuGw2VwK08pp5iTbZnXn6sWu0LogO/RFktMxOjiDA2sS3w==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+        "darwin"
+      ]
     },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.1.tgz",
-      "integrity": "sha512-itPwCw5C+Jh/c624vcDd9kRCCZVpzpQn8dtwoYIt2TJF3S9xJLiRohnnNrKwREvcZYx0n8sCSbvGH349XkcQeg==",
+    "node_modules/@lmdb/lmdb-darwin-x64": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.5.4.tgz",
+      "integrity": "sha512-BEe5Rp3trn26oxoXOVL5HVDoiYmjUDwr8NRPkBOdUdCSBEorKI+7JrZLRKAdxO+G6cGQLgseXk0gR7qIQa7aGw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+        "darwin"
+      ]
     },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.1.tgz",
-      "integrity": "sha512-LojC28v3+IhIbfQ+Vu4Ut5n3wKcgTu6POKIHN9Wpt0HnfgUGlBuyDDQR4jWZUZFyYLiz4RBBBmfU6sNfn6RhLw==",
+    "node_modules/@lmdb/lmdb-linux-arm": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.5.4.tgz",
+      "integrity": "sha512-SGbFR7816uBcTHc2ZY4S6WyOkl9bICnzqTQd2Mv4V/j24cfds88xx2nC6cm/y8zGQL7Ds31YF/5NGxjgcdM5Hw==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+      ]
     },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.1.tgz",
-      "integrity": "sha512-cX8WdlF6Cnvw/DO9/X7XLH2J6CkBnz7Twjpk56cshk9sjYVcuh4sXQBy5bmTwzBjNVZze2yaV1vtcJS04LbN8w==",
+    "node_modules/@lmdb/lmdb-linux-arm64": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.5.4.tgz",
+      "integrity": "sha512-cUXEengO8o60v1SWerJTH4/RH4U3+9jC0/4njp2Z9NdmvaGzhKsbRM2wpXuRYrN8tytsoJCg0SvWEWwHAwLbCA==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+      ]
     },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.1.tgz",
-      "integrity": "sha512-4H/sQCy1mnnGkUt/xszaLlYJVTz3W9ep52xEefGtd6yXDQbz/5fZE5dFLUgsPdbUOQANcVUa5iO6g3nyy5BJiw==",
+    "node_modules/@lmdb/lmdb-linux-x64": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.5.4.tgz",
+      "integrity": "sha512-Gxq8jpgOWXwd0PUR+c9R2Ik1/uBnGd5GMIIzRRDqABCkvmjtC3KWcyhesV9jSPCz759isl0NlbsstZ2oyvk8lA==",
       "cpu": [
-        "ia32"
+        "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+      ]
     },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.1.tgz",
-      "integrity": "sha512-c0jgtB+sRHCciVXlyjDcWb2FUuzlGVRwGXgI+3WqKOIuoo8AmZAddzeOHeYLtD+dmtHw3B4Xo9wAUdjlfW5yYA==",
+    "node_modules/@lmdb/lmdb-win32-arm64": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-arm64/-/lmdb-win32-arm64-3.5.4.tgz",
+      "integrity": "sha512-pKv1DJ1bPZAaHkdFsSz5IDfUG8x9vntgquXF9/Dm2xuupcIe/EkLzylpoBxppFVK5vzbV561Dq26jNY2fIMA7g==",
       "cpu": [
-        "loong64"
+        "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+        "win32"
+      ]
     },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.1.tgz",
-      "integrity": "sha512-TgFyCfIxSujyuqdZKDZ3yTwWiGv+KnlOeXXitCQ+trDODJ+ZtGOzLkSWngynP0HZnTsDyBbPy7GWVXWaEl6lhA==",
+    "node_modules/@lmdb/lmdb-win32-x64": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.5.4.tgz",
+      "integrity": "sha512-JF1BmLCm9kGEVZgYmJq43zeQVdHVgAJnTi/NURWEsy6L1ZrrlSmdltS+D17QN4LODwf+1LMXAA9auIZVXtWwzw==",
       "cpu": [
-        "mips64el"
+        "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
-      ],
+        "win32"
+      ]
+    },
+    "node_modules/@mattlewis92/dom-autoscroller": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@mattlewis92/dom-autoscroller/-/dom-autoscroller-2.4.2.tgz",
+      "integrity": "sha512-YbrUWREPGEjE/FU6foXcAT1YbVwqD/jkYnY1dFb0o4AxtP3s4xKBthlELjndZih8uwsDWgQZx1eNskRNe2BgZQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@modelcontextprotocol/sdk": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz",
+      "integrity": "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@hono/node-server": "^1.19.9",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
+        "content-type": "^1.0.5",
+        "cors": "^2.8.5",
+        "cross-spawn": "^7.0.5",
+        "eventsource": "^3.0.2",
+        "eventsource-parser": "^3.0.0",
+        "express": "^5.2.1",
+        "express-rate-limit": "^8.2.1",
+        "hono": "^4.11.4",
+        "jose": "^6.1.3",
+        "json-schema-typed": "^8.0.2",
+        "pkce-challenge": "^5.0.0",
+        "raw-body": "^3.0.0",
+        "zod": "^3.25 || ^4.0",
+        "zod-to-json-schema": "^3.25.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@cfworker/json-schema": "^4.1.1",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "@cfworker/json-schema": {
+          "optional": true
+        },
+        "zod": {
+          "optional": false
+        }
       }
     },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.1.tgz",
-      "integrity": "sha512-b+yuD1IUeL+Y93PmFZDZFIElwbmFfIKLKlYI8M6tRyzE6u7oEP7onGk0vZRh8wfVGC2dZoy0EqX1V8qok4qHaw==",
+    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.4.tgz",
+      "integrity": "sha512-LCkGo6JDfaBhgST7UpPWgNgLINpcpabaHfyz5OBx75nUYxBsaEPxjnyNjWpeb/xBup/682QnBfRBy2/LvPutZQ==",
       "cpu": [
-        "ppc64"
+        "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+        "darwin"
+      ]
     },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.1.tgz",
-      "integrity": "sha512-wpDlpE0oRKZwX+GfomcALcouqjjV8MIX8DyTrxfyCfXxoKQSDm45CZr9fanJ4F6ckD4yDEPT98SrjvLwIqUCgg==",
+    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-x64": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.4.tgz",
+      "integrity": "sha512-zExlW9zUJKZH/tOtVMttwjKa4Xm/3KcNjnE3dPN92uCktwavMxpgCA3MoJK/DOnTWsQgo224OaST27/mPNAf+w==",
       "cpu": [
-        "riscv64"
+        "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+        "darwin"
+      ]
     },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.1.tgz",
-      "integrity": "sha512-5BepC2Au80EohQ2dBpyTquqGCES7++p7G+7lXe1bAIvMdXm4YYcEfZtQrP4gaoZ96Wv1Ute61CEHFU7h4FMueQ==",
+    "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.4.tgz",
+      "integrity": "sha512-Tg3yX65f5GbtXLkrYEHE5oibZG9epyYWas7FogTTEJeDEF9JlXJzKgXaNhT3UXlTOeA+AfZpYZYZ0uPj7Cfquw==",
       "cpu": [
-        "s390x"
+        "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
+      ]
+    },
+    "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm64": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.4.tgz",
+      "integrity": "sha512-dgX0P/9wGPJeHFBG+ZmhgE6bmtMt7NP5CRBGyyktpopdk/mW4POnrpQsSLtKI1dwpc+pPLuXHDh6vvskyQE/sw==",
+      "cpu": [
+        "arm64"
       ],
-      "engines": {
-        "node": ">=12"
-      }
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.1.tgz",
-      "integrity": "sha512-5gRPk7pKuaIB+tmH+yKd2aQTRpqlf1E4f/mC+tawIm/CGJemZcHZpp2ic8oD83nKgUPMEd0fNanrnFljiruuyA==",
+    "node_modules/@msgpackr-extract/msgpackr-extract-linux-x64": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.4.tgz",
+      "integrity": "sha512-8TNXMEjJc3QEy7R/x1INhgiU+XakDAFUzBhaz7+Rbrs8NH5UQeHQxxmzsSBJGyV6I1jW79undiQm8tOI+D+8FQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+      ]
     },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.1.tgz",
-      "integrity": "sha512-4fL68JdrLV2nVW2AaWZBv3XEm3Ae3NZn/7qy2KGAt3dexAgSVT+Hc97JKSZnqezgMlv9x6KV0ZkZY7UO5cNLCg==",
+    "node_modules/@msgpackr-extract/msgpackr-extract-win32-x64": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.4.tgz",
+      "integrity": "sha512-CmCXPQrkbwExx3j946/PtHWHbYJiCRBRDl4BlkRQcJB/YOwQxJRTpoo7aTsortjgoJ1x7opzTSxn7C+ASSLVjQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+        "win32"
+      ]
     },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.1.tgz",
-      "integrity": "sha512-GhRuXlvRE+twf2ES+8REbeCb/zeikNqwD3+6S5y5/x+DYbAQUNl0HNBs4RQJqrechS4v4MruEr8ZtAin/hK5iw==",
+    "node_modules/@napi-rs/nice": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice/-/nice-1.1.1.tgz",
+      "integrity": "sha512-xJIPs+bYuc9ASBl+cvGsKbGrJmS6fAKaSZCnT0lhahT5rhA2VVy9/EcIgd2JhtEuFOJNx7UHNn/qiTPTY4nrQw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/nice-android-arm-eabi": "1.1.1",
+        "@napi-rs/nice-android-arm64": "1.1.1",
+        "@napi-rs/nice-darwin-arm64": "1.1.1",
+        "@napi-rs/nice-darwin-x64": "1.1.1",
+        "@napi-rs/nice-freebsd-x64": "1.1.1",
+        "@napi-rs/nice-linux-arm-gnueabihf": "1.1.1",
+        "@napi-rs/nice-linux-arm64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-arm64-musl": "1.1.1",
+        "@napi-rs/nice-linux-ppc64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-riscv64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-s390x-gnu": "1.1.1",
+        "@napi-rs/nice-linux-x64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-x64-musl": "1.1.1",
+        "@napi-rs/nice-openharmony-arm64": "1.1.1",
+        "@napi-rs/nice-win32-arm64-msvc": "1.1.1",
+        "@napi-rs/nice-win32-ia32-msvc": "1.1.1",
+        "@napi-rs/nice-win32-x64-msvc": "1.1.1"
+      }
+    },
+    "node_modules/@napi-rs/nice-android-arm-eabi": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-android-arm-eabi/-/nice-android-arm-eabi-1.1.1.tgz",
+      "integrity": "sha512-kjirL3N6TnRPv5iuHw36wnucNqXAO46dzK9oPb0wj076R5Xm8PfUVA9nAFB5ZNMmfJQJVKACAPd/Z2KYMppthw==",
       "cpu": [
-        "x64"
+        "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "openbsd"
+        "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">= 10"
       }
     },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.1.tgz",
-      "integrity": "sha512-ZnWEyCM0G1Ex6JtsygvC3KUUrlDXqOihw8RicRuQAzw+c4f1D66YlPNNV3rkjVW90zXVsHwZYWbJh3v+oQFM9Q==",
+    "node_modules/@napi-rs/nice-android-arm64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-android-arm64/-/nice-android-arm64-1.1.1.tgz",
+      "integrity": "sha512-blG0i7dXgbInN5urONoUCNf+DUEAavRffrO7fZSeoRMJc5qD+BJeNcpr54msPF6qfDD6kzs9AQJogZvT2KD5nw==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "sunos"
+        "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">= 10"
       }
     },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.1.tgz",
-      "integrity": "sha512-QZ6gXue0vVQY2Oon9WyLFCdSuYbXSoxaZrPuJ4c20j6ICedfsDilNPYfHLlMH7vGfU5DQR0czHLmJvH4Nzis/A==",
+    "node_modules/@napi-rs/nice-darwin-arm64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-darwin-arm64/-/nice-darwin-arm64-1.1.1.tgz",
+      "integrity": "sha512-s/E7w45NaLqTGuOjC2p96pct4jRfo61xb9bU1unM/MJ/RFkKlJyJDx7OJI/O0ll/hrfpqKopuAFDV8yo0hfT7A==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">= 10"
       }
     },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.1.tgz",
-      "integrity": "sha512-HzcJa1NcSWTAU0MJIxOho8JftNp9YALui3o+Ny7hCh0v5f90nprly1U3Sj1Ldj/CvKKdvvFsCRvDkpsEMp4DNw==",
+    "node_modules/@napi-rs/nice-darwin-x64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-darwin-x64/-/nice-darwin-x64-1.1.1.tgz",
+      "integrity": "sha512-dGoEBnVpsdcC+oHHmW1LRK5eiyzLwdgNQq3BmZIav+9/5WTZwBYX7r5ZkQC07Nxd3KHOCkgbHSh4wPkH1N1LiQ==",
       "cpu": [
-        "ia32"
+        "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">= 10"
       }
     },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.1.tgz",
-      "integrity": "sha512-0MBh53o6XtI6ctDnRMeQ+xoCN8kD2qI1rY1KgF/xdWQwoFeKou7puvDfV8/Wv4Ctx2rRpET/gGdz3YlNtNACSA==",
+    "node_modules/@napi-rs/nice-freebsd-x64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-freebsd-x64/-/nice-freebsd-x64-1.1.1.tgz",
+      "integrity": "sha512-kHv4kEHAylMYmlNwcQcDtXjklYp4FCf0b05E+0h6nDHsZ+F0bDe04U/tXNOqrx5CmIAth4vwfkjjUmp4c4JktQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+    "node_modules/@napi-rs/nice-linux-arm-gnueabihf": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-arm-gnueabihf/-/nice-linux-arm-gnueabihf-1.1.1.tgz",
+      "integrity": "sha512-E1t7K0efyKXZDoZg1LzCOLxgolxV58HCkaEkEvIYQx12ht2pa8hoBo+4OB3qh7e+QiBlp1SRf+voWUZFxyhyqg==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
-      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
+    "node_modules/@napi-rs/nice-linux-arm64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-arm64-gnu/-/nice-linux-arm64-gnu-1.1.1.tgz",
+      "integrity": "sha512-CIKLA12DTIZlmTaaKhQP88R3Xao+gyJxNWEn04wZwC2wmRapNnxCUZkVwggInMJvtVElA+D4ZzOU5sX4jV+SmQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+    "node_modules/@napi-rs/nice-linux-arm64-musl": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-arm64-musl/-/nice-linux-arm64-musl-1.1.1.tgz",
+      "integrity": "sha512-+2Rzdb3nTIYZ0YJF43qf2twhqOCkiSrHx2Pg6DJaCPYhhaxbLcdlV8hCRMHghQ+EtZQWGNcS2xF4KxBhSGeutg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "node_modules/@napi-rs/nice-linux-ppc64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-ppc64-gnu/-/nice-linux-ppc64-gnu-1.1.1.tgz",
+      "integrity": "sha512-4FS8oc0GeHpwvv4tKciKkw3Y4jKsL7FRhaOeiPei0X9T4Jd619wHNe4xCLmN2EMgZoeGg+Q7GY7BsvwKpL22Tg==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/@napi-rs/nice-linux-riscv64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-riscv64-gnu/-/nice-linux-riscv64-gnu-1.1.1.tgz",
+      "integrity": "sha512-HU0nw9uD4FO/oGCCk409tCi5IzIZpH2agE6nN4fqpwVlCn5BOq0MS1dXGjXaG17JaAvrlpV5ZeyZwSon10XOXw==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+    "node_modules/@napi-rs/nice-linux-s390x-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-s390x-gnu/-/nice-linux-s390x-gnu-1.1.1.tgz",
+      "integrity": "sha512-2YqKJWWl24EwrX0DzCQgPLKQBxYDdBxOHot1KWEq7aY2uYeX+Uvtv4I8xFVVygJDgf6/92h9N3Y43WPx8+PAgQ==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+    "node_modules/@napi-rs/nice-linux-x64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-x64-gnu/-/nice-linux-x64-gnu-1.1.1.tgz",
+      "integrity": "sha512-/gaNz3R92t+dcrfCw/96pDopcmec7oCcAQ3l/M+Zxr82KT4DljD37CpgrnXV+pJC263JkW572pdbP3hP+KjcIg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/@napi-rs/nice-linux-x64-musl": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-x64-musl/-/nice-linux-x64-musl-1.1.1.tgz",
+      "integrity": "sha512-xScCGnyj/oppsNPMnevsBe3pvNaoK7FGvMjT35riz9YdhB2WtTG47ZlbxtOLpjeO9SqqQ2J2igCmz6IJOD5JYw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "*"
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+    "node_modules/@napi-rs/nice-openharmony-arm64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-openharmony-arm64/-/nice-openharmony-arm64-1.1.1.tgz",
+      "integrity": "sha512-6uJPRVwVCLDeoOaNyeiW0gp2kFIM4r7PL2MczdZQHkFi9gVlgm+Vn+V6nTWRcu856mJ2WjYJiumEajfSm7arPQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">= 10"
       }
     },
-    "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+    "node_modules/@napi-rs/nice-win32-arm64-msvc": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-win32-arm64-msvc/-/nice-win32-arm64-msvc-1.1.1.tgz",
+      "integrity": "sha512-uoTb4eAvM5B2aj/z8j+Nv8OttPf2m+HVx3UjA5jcFxASvNhQriyCQF1OB1lHL43ZhW+VwZlgvjmP5qF3+59atA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+    "node_modules/@napi-rs/nice-win32-ia32-msvc": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-win32-ia32-msvc/-/nice-win32-ia32-msvc-1.1.1.tgz",
+      "integrity": "sha512-CNQqlQT9MwuCsg1Vd/oKXiuH+TcsSPJmlAFc5frFyX/KkOh0UpBLEj7aoY656d5UKZQMQFP7vJNa1DNUNORvug==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=10.10.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/@napi-rs/nice-win32-x64-msvc": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-win32-x64-msvc/-/nice-win32-x64-msvc-1.1.1.tgz",
+      "integrity": "sha512-vB+4G/jBQCAh0jelMTY3+kgFy00Hlx2f2/1zjMoH821IbplbWZOkLiTYXQkygNTzQJTq5cvwBDgn2ppHD+bglQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
+    "node_modules/@ngneat/hotkeys": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ngneat/hotkeys/-/hotkeys-4.1.0.tgz",
+      "integrity": "sha512-bqtmK0wMGQOFtNnxmklnbhVbiUoOIp5rXY4UeWGRoMgf7RGvW6dO5moZSPzenJwp8pgi2EmSyo+xpQ8R512hIw==",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
+        "tslib": "^2.0.0"
       }
     },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.22"
+    "node_modules/@ngstack/code-editor": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@ngstack/code-editor/-/code-editor-9.0.0.tgz",
+      "integrity": "sha512-sioi0qyeo9Q8PIdhGFmUeuEx6LETqSjC/4A1Fnl9HFVYzCU7mDVdyeUITubu+4THjraH1mIAVw2t0R7rDgdHdA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.5.0"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
+      "peerDependencies": {
+        "@angular/common": ">=17.1.1",
+        "@angular/core": ">=17.1.1"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "dev": true
-    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+    "node_modules/@npmcli/agent": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-4.0.2.tgz",
+      "integrity": "sha512-EUEuWAxnL07Sp5/iC/1X6Xj+XThUvnbei9zfRWZdEXa7lss9RTHMhAHBeg+MZ5To9s/gGaSI+UwZTPdYMvKSeg==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^11.2.1",
+        "socks-proxy-agent": "^8.0.3"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+    "node_modules/@npmcli/agent/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+        "node": ">= 14"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "engines": {
-        "node": ">=12"
+    "node_modules/@npmcli/agent/node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
       },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      "engines": {
+        "node": ">= 14"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    "node_modules/@npmcli/agent/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
     },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+    "node_modules/@npmcli/fs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-5.0.0.tgz",
+      "integrity": "sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+    "node_modules/@npmcli/git": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-7.0.2.tgz",
+      "integrity": "sha512-oeolHDjExNAJAnlYP2qzNjMX/Xi9bmu78C9dIGr4xjobrSKbuMYCph8lTzn4vnW3NjIqVmw/f8BCfouqyJXlRg==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "ini": "^6.0.0",
+        "lru-cache": "^11.2.1",
+        "npm-pick-manifest": "^11.0.1",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "which": "^6.0.0"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
+    "node_modules/@npmcli/git/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+        "node": ">=20"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+    "node_modules/@npmcli/git/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
       "dev": true,
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=8"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+    "node_modules/@npmcli/git/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+    "node_modules/@npmcli/installed-package-contents": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-4.0.0.tgz",
+      "integrity": "sha512-yNyAdkBxB72gtZ4GrwXCM0ZUedo9nIbOMKfGjt6Cu6DXf0p8y1PViZAKDC8q8kv/fufx0WTjRBdSlyrvnP7hmA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "p-locate": "^4.1.0"
+        "npm-bundled": "^5.0.0",
+        "npm-normalize-package-bin": "^5.0.0"
+      },
+      "bin": {
+        "installed-package-contents": "bin/index.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+    "node_modules/@npmcli/node-gyp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-5.0.0.tgz",
+      "integrity": "sha512-uuG5HZFXLfyFKqg8QypsmgLQW7smiRjVc45bqD/ofZZcR/uxEjgQU8qDPv0s9TEeMUiAAU/GC5bR6++UdTirIQ==",
       "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
+      "license": "ISC",
       "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+    "node_modules/@npmcli/package-json": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-7.0.5.tgz",
+      "integrity": "sha512-iVuTlG3ORq2iaVa1IWUxAO/jIp77tUKBhoMjuzYW2kL4MLN1bi/ofqkZ7D7OOwh8coAx1/S2ge0rMdGv8sLSOQ==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "p-limit": "^2.2.0"
+        "@npmcli/git": "^7.0.0",
+        "glob": "^13.0.0",
+        "hosted-git-info": "^9.0.0",
+        "json-parse-even-better-errors": "^5.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.5.3",
+        "spdx-expression-parse": "^4.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+    "node_modules/@npmcli/package-json/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+    "node_modules/@npmcli/package-json/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
+        "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+    "node_modules/@npmcli/package-json/node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+    "node_modules/@npmcli/package-json/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+    "node_modules/@npmcli/promise-spawn": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-9.0.1.tgz",
+      "integrity": "sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q==",
       "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "which": "^6.0.0"
+      },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
-      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+    "node_modules/@npmcli/promise-spawn/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
       "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=20"
       }
     },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+    "node_modules/@npmcli/promise-spawn/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@leichtgewicht/ip-codec": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
-      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
-      "dev": true
+    "node_modules/@npmcli/redact": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/redact/-/redact-4.0.0.tgz",
+      "integrity": "sha512-gOBg5YHMfZy+TfHArfVogwgfBeQnKbbGo3pSUyK/gSI0AVu+pEiDVcKlQb0D8Mg1LNRZILZ6XG8I5dJ4KuAd9Q==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
     },
-    "node_modules/@ljharb/through": {
-      "version": "2.3.13",
-      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.13.tgz",
-      "integrity": "sha512-/gKJun8NNiWGZJkGzI/Ragc53cOdcLNdzjLaIa+GEjguQs0ulsurx8WN0jijdK9yPqDvziX995sMRLyLt1uZMQ==",
+    "node_modules/@npmcli/run-script": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-10.0.4.tgz",
+      "integrity": "sha512-mGUWr1uMnf0le2TwfOZY4SFxZGXGfm4Jtay/nwAa2FLNAKXUoUwaGwBMNH36UHPtinWfTSJ3nqFQr0091CxVGg==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "call-bind": "^1.0.7"
+        "@npmcli/node-gyp": "^5.0.0",
+        "@npmcli/package-json": "^7.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "node-gyp": "^12.1.0",
+        "proc-log": "^6.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@mapbox/node-pre-gyp": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
-      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+    "node_modules/@nx/nx-darwin-arm64": {
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-23.0.1.tgz",
+      "integrity": "sha512-gQJvgPnbI91DBe23Th2CqD9R/S54cPS3C1f0DhyQ8YEf9rR7EEc+sVGjhgVxlhfOk2W7I1Gy6EkXwpN4aDoW4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "detect-libc": "^2.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "make-dir": "^3.1.0",
-        "node-fetch": "^2.6.7",
-        "nopt": "^5.0.0",
-        "npmlog": "^5.0.1",
-        "rimraf": "^3.0.2",
-        "semver": "^7.3.5",
-        "tar": "^6.1.11"
-      },
-      "bin": {
-        "node-pre-gyp": "bin/node-pre-gyp"
-      }
+      "os": [
+        "darwin"
+      ]
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+    "node_modules/@nx/nx-darwin-x64": {
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-23.0.1.tgz",
+      "integrity": "sha512-e/lvzHKN6gpuD7MqEtfH1fOfnR75E55ytYNt8jaRxKI6EvpCq+Q3MunDuh9GQYAkqDrUqE7AhHrHc+eKATVEHw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
+      "os": [
+        "darwin"
+      ]
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+    "node_modules/@nx/nx-linux-arm64-gnu": {
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-23.0.1.tgz",
+      "integrity": "sha512-zX2JdHQejZWB3DRgNsh77qOVYaSSjSLuBP2qIqc7EWVlCUnR7Aj3e65PTIps4LxMMmUp4twZA2ezS0rtyK2A4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+    "node_modules/@nx/nx-linux-x64-gnu": {
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-23.0.1.tgz",
+      "integrity": "sha512-kVszY2xRyyrCXgdCdM1qG1WUhDjNPZxtdWq86a0TyIRJjfJTP9NHqpyhmvj9c2RdZxKVWHotx6fBJzY6Vn2ZrA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/@nx/nx-win32-x64-msvc": {
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-23.0.1.tgz",
+      "integrity": "sha512-TE/wvBa2cpkVXmk/AXUQAneong4JReS2hyNpAUONKG1yXU7TDKe0wvn1xQXxAbyspudT9NuCnVtpVuEkRz8S+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
       "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/nopt": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
-        "abbrev": "1"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@material/animation": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-1GSJaPKef+7HRuV+HusVZHps64cmZuOItDbt40tjJVaikcaZvwmHlcTxRIqzcRoCdt5ZKHh3NoO7GB9Khg4Jnw==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/auto-init": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-t7ZGpRJ3ec0QDUO0nJu/SMgLW7qcuG2KqIsEYD1Ej8qhI2xpdR2ydSDQOkVEitXmKoGol1oq4nYSBjTlB65GqA==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/banner": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-g9wBUZzYBizyBcBQXTIafnRUUPi7efU9gPJfzeGgkynXiccP/vh5XMmH+PBxl5v+4MlP/d4cZ2NUYoAN7UTqSA==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/button": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/base": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/base/-/base-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-I9KQOKXpLfJkP8MqZyr8wZIzdPHrwPjFvGd9zSK91/vPyE4hzHRJc/0njsh9g8Lm9PRYLbifXX+719uTbHxx+A==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/button": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-BHB7iyHgRVH+JF16+iscR+Qaic+p7LU1FOLgP8KucRlpF9tTwIxQA6mJwGRi5gUtcG+vyCmzVS+hIQ6DqT/7BA==",
-      "dependencies": {
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/card": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-kt7y9/IWOtJTr3Z/AoWJT3ZLN7CLlzXhx2udCLP9ootZU2bfGK0lzNwmo80bv/pJfrY9ihQKCtuGTtNxUy+vIw==",
-      "dependencies": {
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/checkbox": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-rURcrL5O1u6hzWR+dNgiQ/n89vk6tdmdP3mZgnxJx61q4I/k1yijKqNJSLrkXH7Rto3bM5NRKMOlgvMvVd7UMQ==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/chips": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/chips/-/chips-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-AYAivV3GSk/T/nRIpH27sOHFPaSMrE3L0WYbnb5Wa93FgY8a0fbsFYtSH2QmtwnzXveg+B1zGTt7/xIIcynKdQ==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/checkbox": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "safevalues": "^0.3.4",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/circular-progress": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/circular-progress/-/circular-progress-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-DJrqCKb+LuGtjNvKl8XigvyK02y36GRkfhMUYTcJEi3PrOE00bwXtyj7ilhzEVshQiXg6AHGWXtf5UqwNrx3Ow==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/progress-indicator": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/data-table": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-/2WZsuBIq9z9RWYF5Jo6b7P6u0fwit+29/mN7rmAZ6akqUR54nXyNfoSNiyydMkzPlZZsep5KrSHododDhBZbA==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/checkbox": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/icon-button": "15.0.0-canary.7f224ddd4.0",
-        "@material/linear-progress": "15.0.0-canary.7f224ddd4.0",
-        "@material/list": "15.0.0-canary.7f224ddd4.0",
-        "@material/menu": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/select": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/density": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/density/-/density-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-o9EXmGKVpiQ6mHhyV3oDDzc78Ow3E7v8dlaOhgaDSXgmqaE8v5sIlLNa/LKSyUga83/fpGk3QViSGXotpQx0jA==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/dialog": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-u0XpTlv1JqWC/bQ3DavJ1JguofTelLT2wloj59l3/1b60jv42JQ6Am7jU3I8/SIUB1MKaW7dYocXjDWtWJakLA==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/button": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/icon-button": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/dom": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-mQ1HT186GPQSkRg5S18i70typ5ZytfjL09R0gJ2Qg5/G+MLCGi7TAjZZSH65tuD/QGOjel4rDdWOTmYbPYV6HA==",
-      "dependencies": {
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/drawer": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-qyO0W0KBftfH8dlLR0gVAgv7ZHNvU8ae11Ao6zJif/YxcvK4+gph1z8AO4H410YmC2kZiwpSKyxM1iQCCzbb4g==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/list": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/elevation": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-tV6s4/pUBECedaI36Yj18KmRCk1vfue/JP/5yYRlFNnLMRVISePbZaKkn/BHXVf+26I3W879+XqIGlDVdmOoMA==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/fab": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-4h76QrzfZTcPdd+awDPZ4Q0YdSqsXQnS540TPtyXUJ/5G99V6VwGpjMPIxAsW0y+pmI9UkLL/srrMaJec+7r4Q==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/feature-targeting": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-SAjtxYh6YlKZriU83diDEQ7jNSP2MnxKsER0TvFeyG1vX/DWsUyYDOIJTOEa9K1N+fgJEBkNK8hY55QhQaspew==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/floating-label": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-0KMo5ijjYaEHPiZ2pCVIcbaTS2LycvH9zEhEMKwPPGssBCX7iz5ffYQFk7e5yrQand1r3jnQQgYfHAwtykArnQ==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/focus-ring": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-Jmg1nltq4J6S6A10EGMZnvufrvU3YTi+8R8ZD9lkSbun0Fm2TVdICQt/Auyi6An9zP66oQN6c31eqO6KfIPsDg==",
-      "dependencies": {
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0"
-      }
-    },
-    "node_modules/@material/form-field": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-fEPWgDQEPJ6WF7hNnIStxucHR9LE4DoDSMqCsGWS2Yu+NLZYLuCEecgR0UqQsl1EQdNRaFh8VH93KuxGd2hiPg==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/icon-button": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-DcK7IL4ICY/DW+48YQZZs9g0U1kRaW0Wb0BxhvppDMYziHo/CTpFdle4gjyuTyRxPOdHQz5a97ru48Z9O4muTw==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/image-list": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/image-list/-/image-list-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-voMjG2p80XbjL1B2lmF65zO5gEgJOVKClLdqh4wbYzYfwY/SR9c8eLvlYG7DLdFaFBl/7gGxD8TvvZ329HUFPw==",
-      "dependencies": {
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/layout-grid": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-veDABLxMn2RmvfnUO2RUmC1OFfWr4cU+MrxKPoDD2hl3l3eDYv5fxws6r5T1JoSyXoaN+oEZpheS0+M9Ure8Pg==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/line-ripple": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-f60hVJhIU6I3/17Tqqzch1emUKEcfVVgHVqADbU14JD+oEIz429ZX9ksZ3VChoU3+eejFl+jVdZMLE/LrAuwpg==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/linear-progress": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-pRDEwPQielDiC9Sc5XhCXrGxP8wWOnAO8sQlMebfBYHYqy5hhiIzibezS8CSaW4MFQFyXmCmpmqWlbqGYRmiyg==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/progress-indicator": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/list": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/list/-/list-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-Is0NV91sJlXF5pOebYAtWLF4wU2MJDbYqztML/zQNENkQxDOvEXu3nWNb3YScMIYJJXvARO0Liur5K4yPagS1Q==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/menu": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-D11QU1dXqLbh5X1zKlEhS3QWh0b5BPNXlafc5MXfkdJHhOiieb7LC9hMJhbrHtj24FadJ7evaFW/T2ugJbJNnQ==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/list": "15.0.0-canary.7f224ddd4.0",
-        "@material/menu-surface": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/menu-surface": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-7RZHvw0gbwppaAJ/Oh5SWmfAKJ62aw1IMB3+3MRwsb5PLoV666wInYa+zJfE4i7qBeOn904xqT2Nko5hY0ssrg==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/notched-outline": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-Yg2usuKB2DKlKIBISbie9BFsOVuffF71xjbxPbybvqemxqUBd+bD5/t6H1fLE+F8/NCu5JMigho4ewUU+0RCiw==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/floating-label": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/progress-indicator": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/progress-indicator/-/progress-indicator-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-UPbDjE5CqT+SqTs0mNFG6uFEw7wBlgYmh+noSkQ6ty/EURm8lF125dmi4dv4kW0+octonMXqkGtAoZwLIHKf/w==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/radio": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-wR1X0Sr0KmQLu6+YOFKAI84G3L6psqd7Kys5kfb8WKBM36zxO5HQXC5nJm/Y0rdn22ixzsIz2GBo0MNU4V4k1A==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/ripple": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-JqOsWM1f4aGdotP0rh1vZlPZTg6lZgh39FIYHFMfOwfhR+LAikUJ+37ciqZuewgzXB6iiRO6a8aUH6HR5SJYPg==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/rtl": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-UVf14qAtmPiaaZjuJtmN36HETyoKWmsZM/qn1L5ciR2URb8O035dFWnz4ZWFMmAYBno/L7JiZaCkPurv2ZNrGA==",
-      "dependencies": {
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/segmented-button": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-LCnVRUSAhELTKI/9hSvyvIvQIpPpqF29BV+O9yM4WoNNmNWqTulvuiv7grHZl6Z+kJuxSg4BGbsPxxb9dXozPg==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/select": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/select/-/select-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-WioZtQEXRpglum0cMSzSqocnhsGRr+ZIhvKb3FlaNrTaK8H3Y4QA7rVjv3emRtrLOOjaT6/RiIaUMTo9AGzWQQ==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/floating-label": "15.0.0-canary.7f224ddd4.0",
-        "@material/line-ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/list": "15.0.0-canary.7f224ddd4.0",
-        "@material/menu": "15.0.0-canary.7f224ddd4.0",
-        "@material/menu-surface": "15.0.0-canary.7f224ddd4.0",
-        "@material/notched-outline": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/shape": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-8z8l1W3+cymObunJoRhwFPKZ+FyECfJ4MJykNiaZq7XJFZkV6xNmqAVrrbQj93FtLsECn9g4PjjIomguVn/OEw==",
-      "dependencies": {
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/slider": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/slider/-/slider-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-QU/WSaSWlLKQRqOhJrPgm29wqvvzRusMqwAcrCh1JTrCl+xwJ43q5WLDfjYhubeKtrEEgGu9tekkAiYfMG7EBw==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/snackbar": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-sm7EbVKddaXpT/aXAYBdPoN0k8yeg9+dprgBUkrdqGzWJAeCkxb4fv2B3He88YiCtvkTz2KLY4CThPQBSEsMFQ==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/button": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/icon-button": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/switch": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-lEDJfRvkVyyeHWIBfoxYjJVl+WlEAE2kZ/+6OqB1FW0OV8ftTODZGhHRSzjVBA1/p4FPuhAtKtoK9jTpa4AZjA==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "safevalues": "^0.3.4",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/tab": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/tab/-/tab-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-E1xGACImyCLurhnizyOTCgOiVezce4HlBFAI6YhJo/AyVwjN2Dtas4ZLQMvvWWqpyhITNkeYdOchwCC1mrz3AQ==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/focus-ring": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/tab-bar": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-p1Asb2NzrcECvAQU3b2SYrpyJGyJLQWR+nXTYzDKE8WOpLIRCXap2audNqD7fvN/A20UJ1J8U01ptrvCkwJ4eA==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/tab-indicator": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-h9Td3MPqbs33spcPS7ecByRHraYgU4tNCZpZzZXw31RypjKvISDv/PS5wcA4RmWqNGih78T7xg4QIGsZg4Pk4w==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/tab-scroller": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-LFeYNjQpdXecwECd8UaqHYbhscDCwhGln5Yh+3ctvcEgvmDPNjhKn/DL3sWprWvG8NAhP6sHMrsGhQFVdCWtTg==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/tab": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/textfield": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-AExmFvgE5nNF0UA4l2cSzPghtxSUQeeoyRjFLHLy+oAaE4eKZFrSy0zEpqPeWPQpEMDZk+6Y+6T3cOFYBeSvsw==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/density": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/floating-label": "15.0.0-canary.7f224ddd4.0",
-        "@material/line-ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/notched-outline": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/theme": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-hs45hJoE9yVnoVOcsN1jklyOa51U4lzWsEnQEuJTPOk2+0HqCQ0yv/q0InpSnm2i69fNSyZC60+8HADZGF8ugQ==",
-      "dependencies": {
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/tokens": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/tokens/-/tokens-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-r9TDoicmcT7FhUXC4eYMFnt9TZsz0G8T3wXvkKncLppYvZ517gPyD/1+yhuGfGOxAzxTrM66S/oEc1fFE2q4hw==",
-      "dependencies": {
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0"
-      }
-    },
-    "node_modules/@material/tooltip": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/tooltip/-/tooltip-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-8qNk3pmPLTnam3XYC1sZuplQXW9xLn4Z4MI3D+U17Q7pfNZfoOugGr+d2cLA9yWAEjVJYB0mj8Yu86+udo4N9w==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/button": "15.0.0-canary.7f224ddd4.0",
-        "@material/dom": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "safevalues": "^0.3.4",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/top-app-bar": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-SARR5/ClYT4CLe9qAXakbr0i0cMY0V3V4pe3ElIJPfL2Z2c4wGR1mTR8m2LxU1MfGKK8aRoUdtfKaxWejp+eNA==",
-      "dependencies": {
-        "@material/animation": "15.0.0-canary.7f224ddd4.0",
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/elevation": "15.0.0-canary.7f224ddd4.0",
-        "@material/ripple": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/shape": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "@material/typography": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/touch-target": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-BJo/wFKHPYLGsRaIpd7vsQwKr02LtO2e89Psv0on/p0OephlNIgeB9dD9W+bQmaeZsZ6liKSKRl6wJWDiK71PA==",
-      "dependencies": {
-        "@material/base": "15.0.0-canary.7f224ddd4.0",
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/rtl": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@material/typography": {
-      "version": "15.0.0-canary.7f224ddd4.0",
-      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-15.0.0-canary.7f224ddd4.0.tgz",
-      "integrity": "sha512-kBaZeCGD50iq1DeRRH5OM5Jl7Gdk+/NOfKArkY4ksBZvJiStJ7ACAhpvb8MEGm4s3jvDInQFLsDq3hL+SA79sQ==",
-      "dependencies": {
-        "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
-        "@material/theme": "15.0.0-canary.7f224ddd4.0",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@ngneat/hotkeys": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@ngneat/hotkeys/-/hotkeys-4.0.0.tgz",
-      "integrity": "sha512-My5PVywrIVJDMD2j00O5hvW/70SmBwvz85v46WiJct5zyrxzQjSRh9ZD5SLH+LLEcjpiCFwCtpBD1RatzRlisQ==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      }
-    },
-    "node_modules/@ngtools/webpack": {
-      "version": "17.3.8",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.3.8.tgz",
-      "integrity": "sha512-CjSVVa/9fzMpEDQP01SC4colKCbZwj7vUq0H2bivp8jVsmd21x9Fu0gDBH0Y9NdfAIm4eGZvmiZKMII3vIOaYQ==",
-      "dev": true,
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "@angular/compiler-cli": "^17.0.0",
-        "typescript": ">=5.2 <5.5",
-        "webpack": "^5.54.0"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@npmcli/agent": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-2.2.2.tgz",
-      "integrity": "sha512-OrcNPXdpSl9UX7qPVRWbmWMCSXrcDa2M9DvrbOTj7ao1S4PlqVFYv9/yLKMkrJKZ/V5A/kDBC690or307i26Og==",
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.1",
-        "lru-cache": "^10.0.1",
-        "socks-proxy-agent": "^8.0.3"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/agent/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
-    "node_modules/@npmcli/fs": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.1.tgz",
-      "integrity": "sha512-q9CRWjpHCMIh5sVyefoD1cA7PkvILqCZsnSOEUUivORLjxCO/Irmue2DprETiNgEqktDBZaM1Bi+jrarx1XdCg==",
-      "dependencies": {
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/git": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-5.0.7.tgz",
-      "integrity": "sha512-WaOVvto604d5IpdCRV2KjQu8PzkfE96d50CQGKgywXh2GxXmDeUO5EWcBC4V57uFyrNqx83+MewuJh3WTR3xPA==",
-      "dependencies": {
-        "@npmcli/promise-spawn": "^7.0.0",
-        "lru-cache": "^10.0.1",
-        "npm-pick-manifest": "^9.0.0",
-        "proc-log": "^4.0.0",
-        "promise-inflight": "^1.0.1",
-        "promise-retry": "^2.0.1",
-        "semver": "^7.3.5",
-        "which": "^4.0.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/git/node_modules/isexe": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
-      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/@npmcli/git/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
-    "node_modules/@npmcli/git/node_modules/proc-log": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
-      "integrity": "sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/git/node_modules/which": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
-      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
-      "dependencies": {
-        "isexe": "^3.1.1"
-      },
-      "bin": {
-        "node-which": "bin/which.js"
-      },
-      "engines": {
-        "node": "^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/installed-package-contents": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-2.1.0.tgz",
-      "integrity": "sha512-c8UuGLeZpm69BryRykLuKRyKFZYJsZSCT4aVY5ds4omyZqJ172ApzgfKJ5eV/r3HgLdUYgFVe54KSFVjKoe27w==",
-      "dependencies": {
-        "npm-bundled": "^3.0.0",
-        "npm-normalize-package-bin": "^3.0.0"
-      },
-      "bin": {
-        "installed-package-contents": "bin/index.js"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/node-gyp": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-3.0.0.tgz",
-      "integrity": "sha512-gp8pRXC2oOxu0DUE1/M3bYtb1b3/DbJ5aM113+XJBgfXdussRAsX0YOrOhdd8WvnAR6auDBvJomGAkLKA5ydxA==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/package-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-5.2.0.tgz",
-      "integrity": "sha512-qe/kiqqkW0AGtvBjL8TJKZk/eBBSpnJkUWvHdQ9jM2lKHXRYYJuyNpJPlJw3c8QjC2ow6NZYiLExhUaeJelbxQ==",
-      "dependencies": {
-        "@npmcli/git": "^5.0.0",
-        "glob": "^10.2.2",
-        "hosted-git-info": "^7.0.0",
-        "json-parse-even-better-errors": "^3.0.0",
-        "normalize-package-data": "^6.0.0",
-        "proc-log": "^4.0.0",
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/package-json/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@npmcli/package-json/node_modules/hosted-git-info": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
-      "integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
-      "dependencies": {
-        "lru-cache": "^10.0.1"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/package-json/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
-    "node_modules/@npmcli/package-json/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@npmcli/package-json/node_modules/normalize-package-data": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.1.tgz",
-      "integrity": "sha512-6rvCfeRW+OEZagAB4lMLSNuTNYZWLVtKccK79VSTf//yTY5VOCgcpH80O+bZK8Neps7pUnd5G+QlMg1yV/2iZQ==",
-      "dependencies": {
-        "hosted-git-info": "^7.0.0",
-        "is-core-module": "^2.8.1",
-        "semver": "^7.3.5",
-        "validate-npm-package-license": "^3.0.4"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/package-json/node_modules/proc-log": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
-      "integrity": "sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/promise-spawn": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-7.0.2.tgz",
-      "integrity": "sha512-xhfYPXoV5Dy4UkY0D+v2KkwvnDfiA/8Mt3sWCGI/hM03NsYIH8ZaG6QzS9x7pje5vHZBZJ2v6VRFVTWACnqcmQ==",
-      "dependencies": {
-        "which": "^4.0.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/promise-spawn/node_modules/isexe": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
-      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/@npmcli/promise-spawn/node_modules/which": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
-      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
-      "dependencies": {
-        "isexe": "^3.1.1"
-      },
-      "bin": {
-        "node-which": "bin/which.js"
-      },
-      "engines": {
-        "node": "^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/redact": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/redact/-/redact-1.1.0.tgz",
-      "integrity": "sha512-PfnWuOkQgu7gCbnSsAisaX7hKOdZ4wSAhAzH3/ph5dSGau52kCRrMMGbiSQLwyTZpgldkZ49b0brkOr1AzGBHQ==",
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/run-script": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-7.0.4.tgz",
-      "integrity": "sha512-9ApYM/3+rBt9V80aYg6tZfzj3UWdiYyCt7gJUD1VJKvWF5nwKDSICXbYIQbspFTq6TOpbsEtIC0LArB8d9PFmg==",
-      "dependencies": {
-        "@npmcli/node-gyp": "^3.0.0",
-        "@npmcli/package-json": "^5.0.0",
-        "@npmcli/promise-spawn": "^7.0.0",
-        "node-gyp": "^10.0.0",
-        "which": "^4.0.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@npmcli/run-script/node_modules/isexe": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
-      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/@npmcli/run-script/node_modules/which": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
-      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
-      "dependencies": {
-        "isexe": "^3.1.1"
-      },
-      "bin": {
-        "node-which": "bin/which.js"
-      },
-      "engines": {
-        "node": "^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@nrwl/devkit": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-19.1.2.tgz",
-      "integrity": "sha512-vWI+OrTICE9Yw6C/jIwxybnvavI9dnQJ7tpzFbLcSVfFAGdFtYJGCLVe40IkWcvUfELoVmzpXtKP/sPy0D7J9w==",
-      "dev": true,
-      "dependencies": {
-        "@nx/devkit": "19.1.2"
-      }
-    },
-    "node_modules/@nrwl/tao": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-19.1.2.tgz",
-      "integrity": "sha512-OseWzHXNwOmZinUjHCD+edinvNJq5ngGrn/yKO81Zm/FDxkcYjud20dMsXi8zYfgDjvQv22eDtk5v1BTlSx57A==",
-      "dev": true,
-      "dependencies": {
-        "nx": "19.1.2",
-        "tslib": "^2.3.0"
-      },
-      "bin": {
-        "tao": "index.js"
-      }
-    },
-    "node_modules/@nx/devkit": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-19.1.2.tgz",
-      "integrity": "sha512-oHYZzfmvogPh7z8pf1RjW7eJaS05VZ1Ts/axlWerzQauWT7aoeyCaxa0D9q3ThnUuDt1PqKjwJi5jmCihBT2Sw==",
-      "dev": true,
-      "dependencies": {
-        "@nrwl/devkit": "19.1.2",
-        "ejs": "^3.1.7",
-        "enquirer": "~2.3.6",
-        "ignore": "^5.0.4",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.3",
-        "tmp": "~0.2.1",
-        "tslib": "^2.3.0",
-        "yargs-parser": "21.1.1"
-      },
-      "peerDependencies": {
-        "nx": ">= 17 <= 20"
-      }
-    },
-    "node_modules/@nx/nx-darwin-arm64": {
-      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-18.3.5.tgz",
-      "integrity": "sha512-4I5UpZ/x2WO9OQyETXKjaYhXiZKUTYcLPewruRMODWu6lgTM9hHci0SqMQB+TWe3f80K8VT8J8x3+uJjvllGlg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-darwin-x64": {
-      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-18.3.5.tgz",
-      "integrity": "sha512-Drn6jOG237AD/s6OWPt06bsMj0coGKA5Ce1y5gfLhptOGk4S4UPE/Ay5YCjq+/yhTo1gDHzCHxH0uW2X9MN9Fg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-freebsd-x64": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-19.1.2.tgz",
-      "integrity": "sha512-0wcBAr+IYOWBXNDdWHahjW1nCyFTP0O+dSsQa5ab5OBEo0UTvt1k/s27cUyaz2Ll070RTpzl54KD3O1i/1/X0Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-arm-gnueabihf": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-19.1.2.tgz",
-      "integrity": "sha512-A1L7T/Y8nOq7tc84WuaWMEeZ2uTjhqHJDNEfgZhnwYfQ3S94B0O2EkyEp29n9E4eN9XZmvYJzDt1tBz2ziZ6iA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-arm64-gnu": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-19.1.2.tgz",
-      "integrity": "sha512-ze7FtI0hGMs6ap9Z8vo80nXMvuJGJP7CDcL8q2op/l9c23Qex+oG4khyZowJzq+fJPigqldAL3Fm+rHBzT4jhA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-arm64-musl": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-19.1.2.tgz",
-      "integrity": "sha512-JMiSRLe3K83GQw26jGgJYCLDww7K4z5rVDlWHpQEMyiQSukJBZ5OMYxotkDcPDAMmmrUERXjabOsCi0xnyqUlA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-x64-gnu": {
-      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-18.3.5.tgz",
-      "integrity": "sha512-vYrikG6ff4I9cvr3Ysk3y3gjQ9cDcvr3iAr+4qqcQ4qVE+OLL2++JDS6xfPvG/TbS3GTQpyy2STRBwiHgxTeJw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-x64-musl": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-19.1.2.tgz",
-      "integrity": "sha512-tID0nKIUQZ5b1woFh3dtl7XK1Mv71kkwxxppMsOb0FVTigC8Yy7Zpu/ykKidnJ+VbHGSYhZ03BZXgAk/on9LXw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-win32-arm64-msvc": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-19.1.2.tgz",
-      "integrity": "sha512-AXEwOk0lhbWdy4OZmde0iC1sP/AAUMrw5a8Ah7S0QOXBj8X9wK1zyThviQnY1NpUzYGBbMkv3UgPDTArTdAeKA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-win32-x64-msvc": {
-      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-18.3.5.tgz",
-      "integrity": "sha512-xFwKVTIXSgjdfxkpriqHv5NpmmFILTrWLEkUGSoimuRaAm1u15YWx/VmaUQ+UWuJnmgqvB/so4SMHSfNkq3ijA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
-      }
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
-      "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
-      "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
-      "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
-      "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
-      "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
-      "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
-      "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
-      "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
-      "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
-      "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
-      "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
-      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
-      "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
-      "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
-      "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
-      "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@scarf/scarf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.3.0.tgz",
-      "integrity": "sha512-lHKK8M5CTcpFj2hZDB3wIjb0KAbEOgDmiJGDv1WBRfQgRm/a8/XMEkG/N1iM01xgbUDsPQwi42D+dFo1XPAKew==",
-      "hasInstallScript": true
-    },
-    "node_modules/@schematics/angular": {
-      "version": "17.3.8",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.3.8.tgz",
-      "integrity": "sha512-2g4OmSyE9YGq50Uj7fNI26P/TSAFJ7ZuirwTF2O7Xc4XRQ29/tYIIqhezpNlTb6rlYblcQuMcUZBrMfWJHcqJw==",
-      "dependencies": {
-        "@angular-devkit/core": "17.3.8",
-        "@angular-devkit/schematics": "17.3.8",
-        "jsonc-parser": "3.2.1"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      }
-    },
-    "node_modules/@sigstore/bundle": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-2.3.2.tgz",
-      "integrity": "sha512-wueKWDk70QixNLB363yHc2D2ItTgYiMTdPwK8D9dKQMR3ZQ0c35IxP5xnwQ8cNLoCgCRcHf14kE+CLIvNX1zmA==",
-      "dependencies": {
-        "@sigstore/protobuf-specs": "^0.3.2"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@sigstore/core": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@sigstore/core/-/core-1.1.0.tgz",
-      "integrity": "sha512-JzBqdVIyqm2FRQCulY6nbQzMpJJpSiJ8XXWMhtOX9eKgaXXpfNOF53lzQEjIydlStnd/eFtuC1dW4VYdD93oRg==",
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@sigstore/protobuf-specs": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@sigstore/protobuf-specs/-/protobuf-specs-0.3.2.tgz",
-      "integrity": "sha512-c6B0ehIWxMI8wiS/bj6rHMPqeFvngFV7cDU/MY+B16P9Z3Mp9k8L93eYZ7BYzSickzuqAQqAq0V956b3Ju6mLw==",
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@sigstore/sign": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@sigstore/sign/-/sign-2.3.2.tgz",
-      "integrity": "sha512-5Vz5dPVuunIIvC5vBb0APwo7qKA4G9yM48kPWJT+OEERs40md5GoUR1yedwpekWZ4m0Hhw44m6zU+ObsON+iDA==",
-      "dependencies": {
-        "@sigstore/bundle": "^2.3.2",
-        "@sigstore/core": "^1.0.0",
-        "@sigstore/protobuf-specs": "^0.3.2",
-        "make-fetch-happen": "^13.0.1",
-        "proc-log": "^4.2.0",
-        "promise-retry": "^2.0.1"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@sigstore/sign/node_modules/proc-log": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
-      "integrity": "sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@sigstore/tuf": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@sigstore/tuf/-/tuf-2.3.4.tgz",
-      "integrity": "sha512-44vtsveTPUpqhm9NCrbU8CWLe3Vck2HO1PNLw7RIajbB7xhtn5RBPm1VNSCMwqGYHhDsBJG8gDF0q4lgydsJvw==",
-      "dependencies": {
-        "@sigstore/protobuf-specs": "^0.3.2",
-        "tuf-js": "^2.2.1"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@sigstore/verify": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@sigstore/verify/-/verify-1.2.1.tgz",
-      "integrity": "sha512-8iKx79/F73DKbGfRf7+t4dqrc0bRr0thdPrxAtCKWRm/F0tG71i6O1rvlnScncJLLBZHn3h8M3c1BSUAb9yu8g==",
-      "dependencies": {
-        "@sigstore/bundle": "^2.3.2",
-        "@sigstore/core": "^1.1.0",
-        "@sigstore/protobuf-specs": "^0.3.2"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "dev": true
-    },
-    "node_modules/@socket.io/component-emitter": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
-      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
-      "dev": true
-    },
-    "node_modules/@tsconfig/node10": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
-      "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
-    },
-    "node_modules/@tsconfig/node12": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
-      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
-    },
-    "node_modules/@tsconfig/node14": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
-      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
-    },
-    "node_modules/@tsconfig/node16": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
-      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
-    },
-    "node_modules/@tufjs/canonical-json": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
-      "integrity": "sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==",
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@tufjs/models": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@tufjs/models/-/models-2.0.1.tgz",
-      "integrity": "sha512-92F7/SFyufn4DXsha9+QfKnN03JGqtMFMXgSHbZOo8JG59WkTni7UzAouNQDf7AuP9OAMxVOPQcqG3sB7w+kkg==",
-      "dependencies": {
-        "@tufjs/canonical-json": "2.0.0",
-        "minimatch": "^9.0.4"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@tufjs/models/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@types/angular": {
-      "version": "1.5.11",
-      "resolved": "https://registry.npmjs.org/@types/angular/-/angular-1.5.11.tgz",
-      "integrity": "sha512-Nth2ys1RPMZfOQIs8yveTGBa/5dJ4PhSznm87dinYtQBKFzg7CBO4YqNWGuPibSkQ/uBbcYlnbBFHH7EdeMI3Q==",
-      "dev": true,
-      "dependencies": {
-        "@types/jquery": "1.10.*"
-      }
-    },
-    "node_modules/@types/babel-types": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.15.tgz",
-      "integrity": "sha512-JUgfZHUOMbtjopxiOQaaF+Uovk5wpDqpXR+XLWiOivCWSy1FccO30lvNNpCt8geFwq8VmGT2y9OMkOpA0g5O5g==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/@types/babylon": {
-      "version": "6.16.9",
-      "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.9.tgz",
-      "integrity": "sha512-sEKyxMVEowhcr8WLfN0jJYe4gS4Z9KC2DGz0vqfC7+MXFbmvOF7jSjALC77thvAO2TLgFUPa9vDeOak+AcUrZA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@types/babel-types": "*"
-      }
-    },
-    "node_modules/@types/body-parser": {
-      "version": "1.19.5",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
-      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
-      "dev": true,
-      "dependencies": {
-        "@types/connect": "*",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/bonjour": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
-      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/canvas-confetti": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.6.4.tgz",
-      "integrity": "sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==",
-      "dev": true
-    },
-    "node_modules/@types/connect": {
-      "version": "3.4.38",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/connect-history-api-fallback": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
-      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
-      "dev": true,
-      "dependencies": {
-        "@types/express-serve-static-core": "*",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
-      "dev": true
-    },
-    "node_modules/@types/cors": {
-      "version": "2.8.17",
-      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
-      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/d3": {
-      "version": "3.5.53",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-3.5.53.tgz",
-      "integrity": "sha512-8yKQA9cAS6+wGsJpBysmnhlaaxlN42Qizqkw+h2nILSlS+MAG2z4JdO6p+PJrJ+ACvimkmLJL281h157e52psQ==",
-      "dev": true
-    },
-    "node_modules/@types/eslint": {
-      "version": "8.56.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
-      "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
-    },
-    "node_modules/@types/express": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.33",
-        "@types/qs": "*",
-        "@types/serve-static": "*"
-      }
-    },
-    "node_modules/@types/express-serve-static-core": {
-      "version": "4.19.3",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.3.tgz",
-      "integrity": "sha512-KOzM7MhcBFlmnlr/fzISFF5vGWVSvN6fTd4T+ExOt08bA/dA5kpSzY52nMsI1KDFmUREpJelPYyuslLRSjjgCg==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*",
-        "@types/send": "*"
-      }
-    },
-    "node_modules/@types/file-saver": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
-      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
-      "dev": true
-    },
-    "node_modules/@types/http-errors": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
-      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
-      "dev": true
-    },
-    "node_modules/@types/http-proxy": {
-      "version": "1.17.14",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.14.tgz",
-      "integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/jasmine": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.9.1.tgz",
-      "integrity": "sha512-PVpjh8S8lqKFKurWSKdFATlfBHGPzgy0PoDdzQ+rr78jTQ0aacyh9YndzZcAUPxhk4kRujItFFGQdUJ7flHumw==",
-      "dev": true
-    },
-    "node_modules/@types/jasminewd2": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.13.tgz",
-      "integrity": "sha512-aJ3wj8tXMpBrzQ5ghIaqMisD8C3FIrcO6sDKHqFbuqAsI7yOxj0fA7MrRCPLZHIVUjERIwsMmGn/vB0UQ9u0Hg==",
-      "dev": true,
-      "dependencies": {
-        "@types/jasmine": "*"
-      }
-    },
-    "node_modules/@types/jquery": {
-      "version": "1.10.45",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-1.10.45.tgz",
-      "integrity": "sha512-JvoVtPbu1wrcOldn5gvuyJqr7DLX6I657N68Fqj5S7AUutdYZqabQjfP7dY6Gee7/Afo1uajwcORVlQfnsjkLQ==",
-      "dev": true
-    },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
-    },
-    "node_modules/@types/json5": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
-      "dev": true
-    },
-    "node_modules/@types/lodash": {
-      "version": "4.17.4",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",
-      "integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==",
-      "dev": true
-    },
-    "node_modules/@types/mime": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
-      "dev": true
-    },
-    "node_modules/@types/minimatch": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
-      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
-      "dev": true
-    },
-    "node_modules/@types/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
-      "dev": true
-    },
-    "node_modules/@types/node": {
-      "version": "20.14.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.1.tgz",
-      "integrity": "sha512-T2MzSGEu+ysB/FkWfqmhV3PLyQlowdptmmgD20C6QxsS8Fmv5SjpZ1ayXaEC0S21/h5UJ9iA6W/5vSNU5l00OA==",
-      "dev": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/@types/node-forge": {
-      "version": "1.3.11",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
-      "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/normalize-package-data": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
-      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
-      "dev": true
-    },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
-      "dev": true
-    },
-    "node_modules/@types/q": {
-      "version": "0.0.32",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
-      "integrity": "sha512-qYi3YV9inU/REEfxwVcGZzbS3KG/Xs90lv0Pr+lDtuVjBPGd1A+eciXzVSaRvLify132BfcvhvEjeVahrUl0Ug==",
-      "dev": true
-    },
-    "node_modules/@types/qs": {
-      "version": "6.9.15",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz",
-      "integrity": "sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==",
-      "dev": true
-    },
-    "node_modules/@types/range-parser": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
-      "dev": true
-    },
-    "node_modules/@types/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
-      "dev": true
-    },
-    "node_modules/@types/selenium-webdriver": {
-      "version": "3.0.26",
-      "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-3.0.26.tgz",
-      "integrity": "sha512-dyIGFKXfUFiwkMfNGn1+F6b80ZjR3uSYv1j6xVJSDlft5waZ2cwkHW4e7zNzvq7hiEackcgvBpmnXZrI1GltPg==",
-      "dev": true
-    },
-    "node_modules/@types/send": {
-      "version": "0.17.4",
-      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
-      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
-      "dev": true,
-      "dependencies": {
-        "@types/mime": "^1",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/serve-index": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
-      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
-      "dev": true,
-      "dependencies": {
-        "@types/express": "*"
-      }
-    },
-    "node_modules/@types/serve-static": {
-      "version": "1.15.7",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
-      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
-      "dev": true,
-      "dependencies": {
-        "@types/http-errors": "*",
-        "@types/node": "*",
-        "@types/send": "*"
-      }
-    },
-    "node_modules/@types/sockjs": {
-      "version": "0.3.36",
-      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
-      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/ws": {
-      "version": "8.5.10",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
-      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.12.0.tgz",
-      "integrity": "sha512-7F91fcbuDf/d3S8o21+r3ZncGIke/+eWk0EpO21LXhDfLahriZF9CGj4fbAetEjlaBdjdSm9a6VeXbpbT6Z40Q==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/type-utils": "7.12.0",
-        "@typescript-eslint/utils": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
-        "natural-compare": "^1.4.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^7.0.0",
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/type-utils": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.12.0.tgz",
-      "integrity": "sha512-lib96tyRtMhLxwauDWUp/uW3FMhLA6D0rJ8T7HmH7x23Gk1Gwwu8UZ94NMXBvOELn6flSPiBrCKlehkiXyaqwA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.12.0",
-        "@typescript-eslint/utils": "7.12.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.12.0.tgz",
-      "integrity": "sha512-Y6hhwxwDx41HNpjuYswYp6gDbkiZ8Hin9Bf5aJQn1bpTs3afYY4GX+MPYxma8jtoIV2GRwTM/UJm/2uGCVv+DQ==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/typescript-estree": "7.12.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      }
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.12.0.tgz",
-      "integrity": "sha512-dm/J2UDY3oV3TKius2OUZIFHsomQmpHtsV0FTh1WO8EKgHLQ1QCADUqscPgTpU+ih1e21FQSRjXckHn3txn6kQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/typescript-estree": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.12.0.tgz",
-      "integrity": "sha512-itF1pTnN6F3unPak+kutH9raIkL3lhH1YRPGgt7QQOh43DQKVJXmWkpb+vpc/TiDHs6RSd9CTbDsc/Y+Ygq7kg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.11.0.tgz",
-      "integrity": "sha512-WmppUEgYy+y1NTseNMJ6mCFxt03/7jTOy08bcg7bxJJdsM4nuhnchyBbE8vryveaJUf62noH7LodPSo5Z0WUCg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.11.0",
-        "@typescript-eslint/utils": "7.11.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.11.0.tgz",
-      "integrity": "sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.11.0.tgz",
-      "integrity": "sha512-cxkhZ2C/iyi3/6U9EPc5y+a6csqHItndvN/CzbNXTNrsC3/ASoYQZEt9uMaEp+xFNjasqQyszp5TumAVKKvJeQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.11.0",
-        "@typescript-eslint/visitor-keys": "7.11.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.11.0.tgz",
-      "integrity": "sha512-7syYk4MzjxTEk0g/w3iqtgxnFQspDJfn6QKD36xMuuhTzjcxY7F8EmBLnALjVyaOF1/bVocu3bS/2/F7rXrveQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.12.0.tgz",
-      "integrity": "sha512-o+0Te6eWp2ppKY3mLCU+YA9pVJxhUJE15FV7kxuD9jgwIAa+w/ycGJBMrYDTpVGUM/tgpa9SeMOugSabWFq7bg==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.12.0.tgz",
-      "integrity": "sha512-5bwqLsWBULv1h6pn7cMW5dXX/Y2amRqLaKqsASVwbBHMZSnHqE/HN4vT4fE0aFsiwxYvr98kqOWh1a8ZKXalCQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.11.0.tgz",
-      "integrity": "sha512-xlAWwPleNRHwF37AhrZurOxA1wyXowW4PqVXZVUNCLjB48CqdPJoJWkrpH2nij9Q3Lb7rtWindtoXwxjxlKKCA==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.11.0",
-        "@typescript-eslint/types": "7.11.0",
-        "@typescript-eslint/typescript-estree": "7.11.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.11.0.tgz",
-      "integrity": "sha512-27tGdVEiutD4POirLZX4YzT180vevUURJl4wJGmm6TrQoiYwuxTIY98PBp6L2oN+JQxzE0URvYlzJaBHIekXAw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.11.0",
-        "@typescript-eslint/visitor-keys": "7.11.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.11.0.tgz",
-      "integrity": "sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.11.0.tgz",
-      "integrity": "sha512-cxkhZ2C/iyi3/6U9EPc5y+a6csqHItndvN/CzbNXTNrsC3/ASoYQZEt9uMaEp+xFNjasqQyszp5TumAVKKvJeQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.11.0",
-        "@typescript-eslint/visitor-keys": "7.11.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.11.0.tgz",
-      "integrity": "sha512-7syYk4MzjxTEk0g/w3iqtgxnFQspDJfn6QKD36xMuuhTzjcxY7F8EmBLnALjVyaOF1/bVocu3bS/2/F7rXrveQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.12.0.tgz",
-      "integrity": "sha512-uZk7DevrQLL3vSnfFl5bj4sL75qC9D6EdjemIdbtkuUmIheWpuiiylSY01JxJE7+zGrOWDZrp1WxOuDntvKrHQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@uirouter/angular": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@uirouter/angular/-/angular-13.0.0.tgz",
-      "integrity": "sha512-T2aizSXzW+7eiXUmc0LiLH+I8ZBJvDr7OQmm/5WCcxVL2NfuIse7B1kpvfdh9PmBAqw8AY7S0NhrJgABfFJUnw==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^17.0.0",
-        "@angular/core": "^17.0.0",
-        "@uirouter/core": "^6.0.8",
-        "@uirouter/rx": "^1.0.0"
-      }
-    },
-    "node_modules/@uirouter/angular-hybrid": {
-      "version": "17.1.0",
-      "resolved": "https://registry.npmjs.org/@uirouter/angular-hybrid/-/angular-hybrid-17.1.0.tgz",
-      "integrity": "sha512-zUQ/b2BaEuODPOtDtxp2SpEifm/VHoLauPTXtZAfcHpDoty6DFbLyGCrA4ZI9lqyoACVxpOuUKjhTHLNE9SXTw==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
-        "@angular/upgrade": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
-        "@uirouter/angular": "^13.0.0",
-        "@uirouter/angularjs": "^1.0.30",
-        "@uirouter/core": "^6.1.0",
-        "angular": "^1.5.0"
-      }
-    },
-    "node_modules/@uirouter/angularjs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@uirouter/angularjs/-/angularjs-1.1.0.tgz",
-      "integrity": "sha512-AhgxXhMfN6FU2HxDQqwDPbzmd6kTgvYCgV/kgoCAXfxAH6cFQrifViToC90Wdg6djBynHwA3L/KYP+iOYHkw6A==",
-      "engines": {
-        "node": ">=4.0.0"
-      },
-      "peerDependencies": {
-        "@uirouter/core": "^6.0.8",
-        "angular": ">=1.2.0"
-      }
-    },
-    "node_modules/@uirouter/core": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@uirouter/core/-/core-6.1.0.tgz",
-      "integrity": "sha512-WFYh5NPAqRX4L2qlI4k62tgR6pxoqOBSW1CM1uBWCau4mAmgasYd5etJ9RoSJrSnCpCQ2km2Jltf0n5ql684MQ==",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/@uirouter/rx": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@uirouter/rx/-/rx-1.0.0.tgz",
-      "integrity": "sha512-dqPmLFC+qqF6RIdJVKktXSON6WILy2oyLhADDk74F3GAUZ/VvOu3QSPLDtZEP3LMSo6vkGQvwcUdjgNVWL3YJA==",
-      "peerDependencies": {
-        "@uirouter/core": ">=6.0.1",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
-    },
-    "node_modules/@vitejs/plugin-basic-ssl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz",
-      "integrity": "sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.6.0"
-      },
-      "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
-      "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
-      }
-    },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
-      "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
-      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.6",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
-      "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.12.1",
-        "@webassemblyjs/helper-buffer": "1.12.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.12.1"
-      }
-    },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
-      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
-      "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
-      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
-      "dependencies": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
-      "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.12.1",
-        "@webassemblyjs/helper-buffer": "1.12.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/helper-wasm-section": "1.12.1",
-        "@webassemblyjs/wasm-gen": "1.12.1",
-        "@webassemblyjs/wasm-opt": "1.12.1",
-        "@webassemblyjs/wasm-parser": "1.12.1",
-        "@webassemblyjs/wast-printer": "1.12.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
-      "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.12.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.6"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
-      "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.12.1",
-        "@webassemblyjs/helper-buffer": "1.12.1",
-        "@webassemblyjs/wasm-gen": "1.12.1",
-        "@webassemblyjs/wasm-parser": "1.12.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
-      "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.12.1",
-        "@webassemblyjs/helper-api-error": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.6"
-      }
-    },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
-      "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.12.1",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
-    },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
-    },
-    "node_modules/@yarnpkg/lockfile": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
-      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ=="
-    },
-    "node_modules/@yarnpkg/parsers": {
-      "version": "3.0.0-rc.46",
-      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.46.tgz",
-      "integrity": "sha512-aiATs7pSutzda/rq8fnuPwTglyVwjM22bNnK2ZgjrpAjQHSSl3lztd2f9evst1W/qnC58DRz7T7QndUDumAR4Q==",
-      "dev": true,
-      "dependencies": {
-        "js-yaml": "^3.10.0",
-        "tslib": "^2.4.0"
-      },
-      "engines": {
-        "node": ">=14.15.0"
-      }
-    },
-    "node_modules/@zkochan/js-yaml": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.7.tgz",
-      "integrity": "sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/@zkochan/js-yaml/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-    },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dev": true,
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-globals": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
-      "integrity": "sha512-uWttZCk96+7itPxK8xCzY86PnxKTMrReKDqrHzv42VQY0K30PUO8WY13WMOuI+cOdX4EIdzdvQ8k6jkuGRFMYw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "acorn": "^4.0.4"
-      }
-    },
-    "node_modules/acorn-globals/node_modules/acorn": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-      "integrity": "sha512-fu2ygVGuMmlzG8ZeRJ0bvR41nsAkxxhbyk8bZ1SS521Z7vmgJFTQQlfz/Mp/nJexGBz+v8sC9bM6+lNgskt4Ug==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "dev": true,
-      "peerDependencies": {
-        "acorn": "^8"
-      }
-    },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/acorn-walk": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
-      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/adjust-sourcemap-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
-      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "regex-parser": "^2.2.11"
-      },
-      "engines": {
-        "node": ">=8.9"
-      }
-    },
-    "node_modules/adjust-sourcemap-loader/node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/adm-zip": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.13.tgz",
-      "integrity": "sha512-4U51tTl9J8UVEcuKGr6zRzY95tWoAa9l+ureGBNmsfleszjZblm5NyEEL/ZQxkhi86co5mZhSvL2T7gkZ6feYQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.0"
-      }
-    },
-    "node_modules/agent-base": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
-      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dependencies": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
-    "node_modules/align-text": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
-      "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "kind-of": "^3.0.2",
-        "longest": "^1.0.1",
-        "repeat-string": "^1.5.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/align-text/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/alter": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/alter/-/alter-0.2.0.tgz",
-      "integrity": "sha512-Wuss6JIZ6h4j2+NgU2t+9mSwS7gBSZJbU4Dg8xETguAD2veJUSuCrvTIiC78QgZE7/zX7h6OnXw2PiiCBirEGw==",
-      "dev": true,
-      "dependencies": {
-        "stable": "~0.1.3"
-      }
-    },
-    "node_modules/amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
-      "engines": {
-        "node": ">=0.4.2"
-      }
-    },
-    "node_modules/angular": {
-      "version": "1.5.11",
-      "resolved": "https://registry.npmjs.org/angular/-/angular-1.5.11.tgz",
-      "integrity": "sha512-09DBOVVWo6rOQfdCBKGfEL0ZZIhf6P3fbeP3BU+ty5FU50DPiavVeDn8hQ4wXE8o4vKEEpzY1aRcRHJMCixWYA==",
-      "deprecated": "For the actively supported Angular, see https://www.npmjs.com/package/@angular/core. AngularJS support has officially ended. For extended AngularJS support options, see https://goo.gle/angularjs-path-forward."
-    },
-    "node_modules/angular-cookies": {
-      "version": "1.5.11",
-      "resolved": "https://registry.npmjs.org/angular-cookies/-/angular-cookies-1.5.11.tgz",
-      "integrity": "sha512-WyUrigFcnxLZnzaupIAqOLrGXMCOcGz0L5O7OoaWKYGvEx2yNvGSNAGJCmOggGmaPEfIt6YMGTcbc4uwS6Srdw==",
-      "deprecated": "For the actively supported Angular, see https://www.npmjs.com/package/@angular/core. AngularJS support has officially ended. For extended AngularJS support options, see https://goo.gle/angularjs-path-forward."
-    },
-    "node_modules/angular-file-upload": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/angular-file-upload/-/angular-file-upload-1.1.6.tgz",
-      "integrity": "sha512-lIH9G02tShyxhH5bQyMkUA5vncVT7KoMBbIklywzU20p7Q/P3xQUb3oxx/smXLXfjYQOiiQyoEILYLFJC4WYMw==",
-      "dependencies": {
-        "coffee-script": "~1.6.2",
-        "grunt": "~0.4.1",
-        "grunt-contrib-clean": "~0.4.0",
-        "grunt-contrib-concat": "~0.3.0",
-        "grunt-contrib-copy": "~0.4.1",
-        "grunt-contrib-uglify": "~0.2.1"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/argparse": {
-      "version": "0.1.16",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-0.1.16.tgz",
-      "integrity": "sha512-LjmC2dNpdn2L4UzyoaIr11ELYoLn37ZFy9zObrQFHsSuOepeUEMKnM8w5KL4Tnrp2gy88rRuQt6Ky8Bjml+Baw==",
-      "dependencies": {
-        "underscore": "~1.7.0",
-        "underscore.string": "~2.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/argparse/node_modules/underscore.string": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.4.0.tgz",
-      "integrity": "sha512-yxkabuCaIBnzfIvX3kBxQqCs0ar/bfJwDnFEHJUm/ZrRVhT3IItdRF5cZjARLzEnyQYtIUhsZ2LG2j3HidFOFQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/async": {
-      "version": "0.1.22",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.1.22.tgz",
-      "integrity": "sha512-2tEzliJmf5fHNafNwQLJXUasGzQCVctvsNkXmnlELHwypU0p08/rHohYvkqKIjyXpx+0rkrYv6QbhJ+UF4QkBg==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/camelcase": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/colors": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
-      "integrity": "sha512-OsSVtHK8Ir8r3+Fxw/b4jS1ZLPXkV6ZxDRJQzeD7qo0SqMXWrHDM71DgYzPMHY8SFJ0Ao+nNU2p1MmwdzKqPrw==",
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/dateformat": {
-      "version": "1.0.2-1.2.3",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz",
-      "integrity": "sha512-AXvW8g7tO4ilk5HgOWeDmPi/ZPaCnMJ+9Cg1I3p19w6mcvAAXBuuGEXAxybC+Djj1PSZUiHUcyoYu7WneCX8gQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/esprima": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
-      "integrity": "sha512-rp5dMKN8zEs9dfi9g0X1ClLmV//WRyk/R15mppFNICIFRG5P92VP7Z04p8pk++gABo9W2tY+kHyu6P1mEHgmTA==",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/findup-sync": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
-      "integrity": "sha512-yjftfYnF4ThYEvKEV/kEFR15dmtyXTAh3vQnzpJUoc7Naj5y1P0Ck7Zs1+Vroa00E3KT3IYsk756S+8WA5dNLw==",
-      "dependencies": {
-        "glob": "~3.2.9",
-        "lodash": "~2.4.1"
-      },
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/findup-sync/node_modules/glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-      "integrity": "sha512-hVb0zwEZwC1FXSKRPFTeOtN7AArJcJlI6ULGLtrstaswKNlrTJqAA+1lYlSUop4vjA423xlBzqfVS3iWGlqJ+g==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dependencies": {
-        "inherits": "2",
-        "minimatch": "0.3"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/findup-sync/node_modules/lodash": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
-      "engines": [
-        "node",
-        "rhino"
-      ]
-    },
-    "node_modules/angular-file-upload/node_modules/findup-sync/node_modules/minimatch": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-      "integrity": "sha512-WFX1jI1AaxNTZVOHLBVazwTWKaQjoykSzCBNXB72vDTCzopQGtyP91tKdFK5cv1+qMwPyiTu1HqUriqplI8pcA==",
-      "deprecated": "Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue",
-      "dependencies": {
-        "lru-cache": "2",
-        "sigmund": "~1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/getobject": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/getobject/-/getobject-0.1.0.tgz",
-      "integrity": "sha512-hIGEBfnHcZpWkXPsAVeVmpYDvfy/matVl03yOY91FPmnpCC12Lm5izNxCjO3lHAeO6uaTwMxu7g450Siknlhig==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/glob": {
-      "version": "3.1.21",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-      "integrity": "sha512-ANhy2V2+tFpRajE3wN4DhkNQ08KDr0Ir1qL12/cUe5+a7STEK8jkW4onUYuY8/06qAFuT5je7mjAqzx0eKI2tQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dependencies": {
-        "graceful-fs": "~1.2.0",
-        "inherits": "1",
-        "minimatch": "~0.2.11"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/glob/node_modules/inherits": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
-      "integrity": "sha512-Al67oatbRSo3RV5hRqIoln6Y5yMVbJSIn4jEJNL7VCImzq/kLr7vvb6sFRJXqr8rpHc/2kJOM+y0sPKN47VdzA=="
-    },
-    "node_modules/angular-file-upload/node_modules/graceful-fs": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
-      "integrity": "sha512-iiTUZ5vZ+2ZV+h71XAgwCSu6+NAizhFU3Yw8aC/hH5SQ3SnISqEqAek40imAFGtDcwJKNhXvSY+hzIolnLwcdQ==",
-      "deprecated": "please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/grunt/-/grunt-0.4.5.tgz",
-      "integrity": "sha512-1iq3ylLjzXqz/KSq1OAE2qhnpcbkF2WyhsQcavZt+YmgvHu0EbPMEhGhy2gr0FP67isHpRdfwjB5WVeXXcJemQ==",
-      "dependencies": {
-        "async": "~0.1.22",
-        "coffee-script": "~1.3.3",
-        "colors": "~0.6.2",
-        "dateformat": "1.0.2-1.2.3",
-        "eventemitter2": "~0.4.13",
-        "exit": "~0.1.1",
-        "findup-sync": "~0.1.2",
-        "getobject": "~0.1.0",
-        "glob": "~3.1.21",
-        "grunt-legacy-log": "~0.1.0",
-        "grunt-legacy-util": "~0.2.0",
-        "hooker": "~0.2.3",
-        "iconv-lite": "~0.2.11",
-        "js-yaml": "~2.0.5",
-        "lodash": "~0.9.2",
-        "minimatch": "~0.2.12",
-        "nopt": "~1.0.10",
-        "rimraf": "~2.2.8",
-        "underscore.string": "~2.2.1",
-        "which": "~1.0.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-contrib-clean": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-clean/-/grunt-contrib-clean-0.4.1.tgz",
-      "integrity": "sha512-PajoaZgwbJ1QAbY5CemvuCIXUJU8teoA3ABTd3eZA+j0UYTUBW+hlV5m3ZlZLgRxKm3ZrchAEVR85r5uBeKF9w==",
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "peerDependencies": {
-        "grunt": "~0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-contrib-concat": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-concat/-/grunt-contrib-concat-0.3.0.tgz",
-      "integrity": "sha512-w5N63mMgEYAEhd9PgY8uQ0pY02SucTSwq8XRTtHyEt7MSMQLlp7lF0g5oaXSav9xCWY9GPM0RqlJTT2gS+8n3Q==",
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "peerDependencies": {
-        "grunt": "~0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-contrib-copy": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-copy/-/grunt-contrib-copy-0.4.1.tgz",
-      "integrity": "sha512-My7R1hjkV6k/6WFkwHguB//y1kcV65X9U37XnAJWwmfGAsoAVlXFRNYN0W62W2D0TbLXLX24fiH4q1/5Bugf+A==",
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "peerDependencies": {
-        "grunt": "~0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-contrib-uglify": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-uglify/-/grunt-contrib-uglify-0.2.7.tgz",
-      "integrity": "sha512-KXKM2UNLsCiUI6/DYfAIPm3i26UJJN6Cf6KD8fFa2TKllj7yLPC853IxtWBJ/3jX66QtXHGtdCORuuA6sAFvvA==",
-      "dependencies": {
-        "grunt-lib-contrib": "~0.6.1",
-        "uglify-js": "~2.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "peerDependencies": {
-        "grunt": "~0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-legacy-log": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-0.1.3.tgz",
-      "integrity": "sha512-qYs/uM0ImdzwIXLhS4O5WLV5soAM+PEqqHI/hzSxlo450ERSccEhnXqoeDA9ZozOdaWuYnzTOTwRcVRogleMxg==",
-      "dependencies": {
-        "colors": "~0.6.2",
-        "grunt-legacy-log-utils": "~0.1.1",
-        "hooker": "~0.2.3",
-        "lodash": "~2.4.1",
-        "underscore.string": "~2.3.3"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-legacy-log-utils": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/grunt-legacy-log-utils/-/grunt-legacy-log-utils-0.1.1.tgz",
-      "integrity": "sha512-D0vbUX00TFYCKNZtcZzemMpwT8TR/FdRs1pmfiBw6qnUw80PfsjV+lhIozY/3eJ3PSG2zj89wd2mH/7f4tNAlw==",
-      "dependencies": {
-        "colors": "~0.6.2",
-        "lodash": "~2.4.1",
-        "underscore.string": "~2.3.3"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-legacy-log-utils/node_modules/lodash": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
-      "engines": [
-        "node",
-        "rhino"
-      ]
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-legacy-log/node_modules/lodash": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
-      "engines": [
-        "node",
-        "rhino"
-      ]
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-legacy-util": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-0.2.0.tgz",
-      "integrity": "sha512-cXPbfF8aM+pvveQeN1K872D5fRm30xfJWZiS63Y8W8oyIPLClCsmI8bW96Txqzac9cyL4lRqEBhbhJ3n5EzUUQ==",
-      "dependencies": {
-        "async": "~0.1.22",
-        "exit": "~0.1.1",
-        "getobject": "~0.1.0",
-        "hooker": "~0.2.3",
-        "lodash": "~0.9.2",
-        "underscore.string": "~2.2.1",
-        "which": "~1.0.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt-legacy-util/node_modules/underscore.string": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.2.1.tgz",
-      "integrity": "sha512-3FVmhXqelrj6gfgp3Bn6tOavJvW0dNH2T+heTD38JRxIrAbiuzbqjknszoOYj3DyFB1nWiLj208Qt2no/L4cIA==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt/node_modules/coffee-script": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.3.3.tgz",
-      "integrity": "sha512-QjQ1T4BqyHv19k6XSfdhy/QLlIOhywz0ekBUCa9h71zYMJlfDTGan/Z1JXzYkZ6v8R+GhvL/p4FZPbPW8WNXlg==",
-      "deprecated": "CoffeeScript on NPM has moved to \"coffeescript\" (no hyphen)",
-      "bin": {
-        "cake": "bin/cake",
-        "coffee": "bin/coffee"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/grunt/node_modules/underscore.string": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.2.1.tgz",
-      "integrity": "sha512-3FVmhXqelrj6gfgp3Bn6tOavJvW0dNH2T+heTD38JRxIrAbiuzbqjknszoOYj3DyFB1nWiLj208Qt2no/L4cIA==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/iconv-lite": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.2.11.tgz",
-      "integrity": "sha512-KhmFWgaQZY83Cbhi+ADInoUQ8Etn6BG5fikM9syeOjQltvR45h7cRKJ/9uvQEuD61I3Uju77yYce0/LhKVClQw==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/js-yaml": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-2.0.5.tgz",
-      "integrity": "sha512-VEKcIksckDBUhg2JS874xVouiPkywVUh4yyUmLCDe1Zg3bCd6M+F1eGPenPeHLc2XC8pp9G8bsuofK0NeEqRkA==",
-      "dependencies": {
-        "argparse": "~ 0.1.11",
-        "esprima": "~ 1.0.2"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      },
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/lodash": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-0.9.2.tgz",
-      "integrity": "sha512-LVbt/rjK62gSbhehDVKL0vlaime4Y1IBixL+bKeNfoY4L2zab/jGrxU6Ka05tMA/zBxkTk5t3ivtphdyYupczw==",
-      "engines": [
-        "node",
-        "rhino"
-      ]
-    },
-    "node_modules/angular-file-upload/node_modules/lru-cache": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
-      "integrity": "sha512-WpibWJ60c3AgAz8a2iYErDrcT2C7OmKnsWhIcHOjkUHFjkXncJhtLxNSqUmxRxRunpb5I8Vprd7aNSd2NtksJQ=="
-    },
-    "node_modules/angular-file-upload/node_modules/minimatch": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-      "integrity": "sha512-zZ+Jy8lVWlvqqeM8iZB7w7KmQkoJn8djM585z88rywrEbzoqawVa9FR5p2hwD+y74nfuKOjmNvi9gtWJNLqHvA==",
-      "deprecated": "Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue",
-      "dependencies": {
-        "lru-cache": "2",
-        "sigmund": "~1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/nopt": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
-      "dependencies": {
-        "abbrev": "1"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/rimraf": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-      "integrity": "sha512-R5KMKHnPAQaZMqLOsyuyUmcIjSeDm+73eoqQpaXA7AZ22BL+6C+1mcUscgOsNd8WVlJuvlgAPsegcx7pjlV0Dg==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/source-map": {
-      "version": "0.1.34",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
-      "integrity": "sha512-yfCwDj0vR9RTwt3pEzglgb3ZgmcXHt6DjG3bjJvzPwTL+5zDQ2MhmSzAcTy0GTiQuCiriSWXvWM1/NhKdXuoQA==",
-      "dependencies": {
-        "amdefine": ">=0.0.4"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/uglify-js": {
-      "version": "2.4.24",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.24.tgz",
-      "integrity": "sha512-tktIjwackfZLd893KGJmXc1hrRHH1vH9Po3xFh1XBjjeGAnN02xJ3SuoA+n1L29/ZaCA18KzCFlckS+vfPugiA==",
-      "dependencies": {
-        "async": "~0.2.6",
-        "source-map": "0.1.34",
-        "uglify-to-browserify": "~1.0.0",
-        "yargs": "~3.5.4"
-      },
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/uglify-js/node_modules/async": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-      "integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
-    },
-    "node_modules/angular-file-upload/node_modules/underscore": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
-      "integrity": "sha512-cp0oQQyZhUM1kpJDLdGO1jPZHgS/MpzoWYfe9+CM2h/QGDZlqwT2T3YGukuBdaNJ/CAPoeyAZRRHz8JFo176vA=="
-    },
-    "node_modules/angular-file-upload/node_modules/which": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.0.9.tgz",
-      "integrity": "sha512-E87fdQ/eRJr9W1X4wTPejNy9zTW3FI2vpCZSJ/HAY+TkjKVC0TUm1jk6vn2Z7qay0DQy0+RBGdXxj+RmmiGZKQ==",
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/wordwrap": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/angular-file-upload/node_modules/yargs": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
-      "integrity": "sha512-5j382E4xQSs71p/xZQsU1PtRA2HXPAjX0E0DkoGLxwNASMOKX6A9doV1NrZmj85u2Pjquz402qonBzz/yLPbPA==",
-      "dependencies": {
-        "camelcase": "^1.0.2",
-        "decamelize": "^1.0.0",
-        "window-size": "0.1.0",
-        "wordwrap": "0.0.2"
-      }
-    },
-    "node_modules/angular-filter": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/angular-filter/-/angular-filter-0.5.17.tgz",
-      "integrity": "sha512-jWZuok808roBwEiNZ2IiBzKD7gf4vWTDzbp9RhhZO9usQxTiywsZ3O94X75MOHBtOzM/rxbI78sHw3Y2sz40QQ==",
-      "dependencies": {
-        "angular": "*"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/angular-local-storage": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/angular-local-storage/-/angular-local-storage-0.7.1.tgz",
-      "integrity": "sha512-AJgX9+f8eWpsnSuPrNZ/G3TdH/iBtlEdOUgLohbddTrwJ+E0+tfHtXKNgYpYh7iN6aM6subYmn0KfvZBBaLdfw=="
-    },
-    "node_modules/angular-markdown-filter": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/angular-markdown-filter/-/angular-markdown-filter-1.3.2.tgz",
-      "integrity": "sha512-2dr3IB/d9dyLTH36nE61Qkxm078sOpHvpd4Q863eXEgrwsre8YySxWsgaq1qooY3P7C7wQ1LhFGvh5rAA25wnA==",
-      "dependencies": {
-        "showdown": "^1.2.3"
-      }
-    },
-    "node_modules/angular-md5": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/angular-md5/-/angular-md5-0.1.10.tgz",
-      "integrity": "sha512-hGDEDxGdy8ZMC9eV7DXDc8FnwY0vaYLLZW8OX/7oBwGdA9K5UcK1hHZiYFznBwYbMoo+x50iMmY5Xfn1JunMDA=="
-    },
-    "node_modules/angular-mocks": {
-      "version": "1.5.11",
-      "resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.5.11.tgz",
-      "integrity": "sha512-eDVhiwiHlMEK6W47sIkiZh4We35Lqskg+G5rSTpUBPndwd2XM/uwuW+eklzOZhx+ODaFLuMsxeLY1h9rA3utIA=="
-    },
-    "node_modules/angular-nvd3": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/angular-nvd3/-/angular-nvd3-1.0.9.tgz",
-      "integrity": "sha512-FcGYVXeNejlDj+Yr6g3ydRT+kuLAzKY/KMuc4eiLJbSvRcSqfLJtrFZi6wFXGhW3OlbLHvCjAeFzDvTac3gNTQ==",
-      "dependencies": {
-        "angular": "^1.x",
-        "d3": "^3.3",
-        "nvd3": "^1.7.1"
-      }
-    },
-    "node_modules/angular-resource": {
-      "version": "1.5.11",
-      "resolved": "https://registry.npmjs.org/angular-resource/-/angular-resource-1.5.11.tgz",
-      "integrity": "sha512-OlJJ+pxCu2PoyWrlkEeLjP7jmo7WtYHuWYdT8s1IpLVHYk4rfK7+uD5Zua99Yi1ZS/x9nU+mBiAupp46mBPayA==",
-      "deprecated": "For the actively supported Angular, see https://www.npmjs.com/package/@angular/core. AngularJS support has officially ended. For extended AngularJS support options, see https://goo.gle/angularjs-path-forward."
-    },
-    "node_modules/angular-sanitize": {
-      "version": "1.5.11",
-      "resolved": "https://registry.npmjs.org/angular-sanitize/-/angular-sanitize-1.5.11.tgz",
-      "integrity": "sha512-9yVOr8YOefo0/4q+ImqNdGcbfGzelQIoHW0OoaoU/U5wpRZNn5IqlkdLW9udieSiprYzuXeqiS1V7ZiHurYisw==",
-      "deprecated": "For the actively supported Angular, see https://www.npmjs.com/package/@angular/core. AngularJS support has officially ended. For extended AngularJS support options, see https://goo.gle/angularjs-path-forward."
-    },
-    "node_modules/angular-ui-bootstrap": {
-      "version": "0.13.4",
-      "resolved": "https://registry.npmjs.org/angular-ui-bootstrap/-/angular-ui-bootstrap-0.13.4.tgz",
-      "integrity": "sha512-/g6Z9kKbAuC7Ardhdp4PsvJJVXNdxinXy+qdAWo2wog/hPC2evSfVBs1fksc0XhZo/4XCFznbLKfOmM7NZMkbQ==",
-      "peerDependencies": {
-        "angular": "^1.3.x || >= 1.4.0-beta.0 || >= 1.5.0-beta.0",
-        "bootstrap": "^3.x"
-      }
-    },
-    "node_modules/angular-ui-codemirror": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/angular-ui-codemirror/-/angular-ui-codemirror-0.3.0.tgz",
-      "integrity": "sha512-C1zlnNoX1PS4Oa+R3RomhwMuwiyhMeCZB/WnDg+RJ1G/1G7tUWK7JUCXW1NjhZ8pE5wYR5LV0hoGTHWGR4H9kQ=="
-    },
-    "node_modules/angular-xeditable": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/angular-xeditable/-/angular-xeditable-0.9.0.tgz",
-      "integrity": "sha512-ss1M4VGUmXeIxnPEKRhOE7iTkfPnjYQ0yYCjv8SdrM2WHet4ULw4IDTkr7vuq1WMn0Nd29QijTwTDZNZQFJfyw==",
-      "dependencies": {
-        "angular": "~1.x"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/angulartics": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/angulartics/-/angulartics-1.0.3.tgz",
-      "integrity": "sha512-CwLgHvuj2IuJWXJHWn14gwiRCaNrlk1eUCZdGIFnPcHJ+QXlaIzmDyLuoC7oXQeSxC5NTs0B37rH9Yp6lOM9UQ=="
-    },
-    "node_modules/angulartics-google-analytics": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/angulartics-google-analytics/-/angulartics-google-analytics-0.1.4.tgz",
-      "integrity": "sha512-v8whl/PQPajKhq/HlpM0776x31KLFvhWdGEm4z/4hw2uE4VlGshocsjgzqz3pB6k2FZlWncYqMu1TzxXTHqJKg==",
-      "peerDependencies": {
-        "angulartics": "~1.0.0"
-      }
-    },
-    "node_modules/ansi-colors": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
-      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "dependencies": {
-        "type-fest": "^0.21.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/ansi-html-community": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
-      "dev": true,
-      "engines": [
-        "node >= 0.8.0"
-      ],
-      "bin": {
-        "ansi-html": "bin/ansi-html"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "devOptional": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/aproba": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "optional": true
-    },
-    "node_modules/are-we-there-yet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
-    },
-    "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dev": true,
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "node_modules/arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-buffer-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.5",
-        "is-array-buffer": "^3.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array-differ": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/array-each": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
-      "integrity": "sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-      "dev": true
-    },
-    "node_modules/array-ify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
-      "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
-      "dev": true
-    },
-    "node_modules/array-includes": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
-      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "is-string": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array-slice": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
-      "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array.prototype.flat": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
-      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
-      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
-      "dev": true,
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.5",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.2.1",
-        "get-intrinsic": "^1.2.3",
-        "is-array-buffer": "^3.0.4",
-        "is-shared-array-buffer": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/arrify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/asn1": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "dev": true,
-      "dependencies": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
-    "node_modules/assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/async": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-      "integrity": "sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==",
-      "dev": true
-    },
-    "node_modules/async-each": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.6.tgz",
-      "integrity": "sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ]
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
-    },
-    "node_modules/atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true,
-      "bin": {
-        "atob": "bin/atob.js"
-      },
-      "engines": {
-        "node": ">= 4.5.0"
-      }
-    },
-    "node_modules/autoprefixer": {
-      "version": "6.7.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
-      "integrity": "sha512-WKExI/eSGgGAkWAO+wMVdFObZV7hQen54UpD1kCCTN3tvlL3W1jL4+lPP/M7MwoP7Q4RHzKtO3JQ4HxYEcd+xQ==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^1.7.6",
-        "caniuse-db": "^1.0.30000634",
-        "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
-        "postcss": "^5.2.16",
-        "postcss-value-parser": "^3.2.3"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/browserslist": {
-      "version": "1.7.7",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
-      "integrity": "sha512-qHJblDE2bXVRYzuDetv/wAeHOJyO97+9wxC1cdCtyzgNuSozOyRCiiLaCR1f71AN66lQdVVBipWm63V+a7bPOw==",
-      "deprecated": "Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.",
-      "dev": true,
-      "dependencies": {
-        "caniuse-db": "^1.0.30000639",
-        "electron-to-chromium": "^1.2.7"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/chalk/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/postcss": {
-      "version": "5.2.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-      "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.1.3",
-        "js-base64": "^2.1.9",
-        "source-map": "^0.5.6",
-        "supports-color": "^3.2.3"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/supports-color": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-      "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "dev": true,
-      "dependencies": {
-        "possible-typed-array-names": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/aws4": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.0.tgz",
-      "integrity": "sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==",
-      "dev": true
-    },
-    "node_modules/axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
-      "dev": true,
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
-    "node_modules/axobject-query": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
-      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-      "dev": true,
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "node_modules/babel-loader": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
-      "integrity": "sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==",
-      "dev": true,
-      "dependencies": {
-        "find-cache-dir": "^4.0.0",
-        "schema-utils": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 14.15.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.12.0",
-        "webpack": ">=5"
-      }
-    },
-    "node_modules/babel-plugin-istanbul": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-instrument": "^5.0.4",
-        "test-exclude": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.4.11",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
-      "integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.22.6",
-        "@babel/helper-define-polyfill-provider": "^0.6.2",
-        "semver": "^6.3.1"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz",
-      "integrity": "sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.5.0",
-        "core-js-compat": "^3.34.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs3/node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz",
-      "integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.22.6",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "debug": "^4.1.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz",
-      "integrity": "sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.5.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-regenerator/node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz",
-      "integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.22.6",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "debug": "^4.1.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      }
-    },
-    "node_modules/babel-runtime/node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true
-    },
-    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/babel-types": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
-      "integrity": "sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "babel-runtime": "^6.26.0",
-        "esutils": "^2.0.2",
-        "lodash": "^4.17.4",
-        "to-fast-properties": "^1.0.3"
-      }
-    },
-    "node_modules/babel-types/node_modules/to-fast-properties": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-      "integrity": "sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/babylon": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "babylon": "bin/babylon.js"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "node_modules/base": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-      "dev": true,
-      "dependencies": {
-        "cache-base": "^1.0.1",
-        "class-utils": "^0.3.5",
-        "component-emitter": "^1.2.1",
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.1",
-        "mixin-deep": "^1.2.0",
-        "pascalcase": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/base/node_modules/define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/base/node_modules/is-descriptor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
-      "integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
-      "dev": true,
-      "dependencies": {
-        "is-accessor-descriptor": "^1.0.1",
-        "is-data-descriptor": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/base64id": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
-      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
-      "dev": true,
-      "engines": {
-        "node": "^4.5.0 || >= 5.9"
-      }
-    },
-    "node_modules/basic-auth": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
-      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "5.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
-      "dev": true
-    },
-    "node_modules/bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-      "dev": true,
-      "dependencies": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
-    "node_modules/big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "devOptional": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "node_modules/bl": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "dependencies": {
-        "buffer": "^5.5.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.4.0"
-      }
-    },
-    "node_modules/blocking-proxy": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/blocking-proxy/-/blocking-proxy-1.0.1.tgz",
-      "integrity": "sha512-KE8NFMZr3mN2E0HcvCgRtX7DjhiIQrwle+nSVJVC/yqFb9+xznHl2ZcoBp2L9qzkI4t4cBFJ1efXF8Dwi132RA==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "blocking-proxy": "built/lib/bin.js"
-      },
-      "engines": {
-        "node": ">=6.9.x"
-      }
-    },
-    "node_modules/body": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz",
-      "integrity": "sha512-chUsBxGRtuElD6fmw1gHLpvnKdVLK302peeFa9ZqAEk8TyzZ3fygLyUEDDPTJvL9+Bor0dIwn6ePOsRM2y0zQQ==",
-      "dev": true,
-      "dependencies": {
-        "continuable-cache": "^0.3.1",
-        "error": "^7.0.0",
-        "raw-body": "~1.1.0",
-        "safe-json-parse": "~1.0.1"
-      }
-    },
-    "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
-      "dev": true,
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/body-parser/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/body-parser/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/body-parser/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/body-parser/node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/body/node_modules/bytes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
-      "integrity": "sha512-/x68VkHLeTl3/Ll8IvxdwzhrT+IyKc52e/oyHhA2RwqPqswSnjVbSddfPRwAsJtbilMAPSRWwAlpxdYsSWOTKQ==",
-      "dev": true
-    },
-    "node_modules/body/node_modules/raw-body": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.7.tgz",
-      "integrity": "sha512-WmJJU2e9Y6M5UzTOkHaM7xJGAPQD8PNzx3bAd2+uhZAim6wDk6dAZxPVYLF67XhbR4hmKGh33Lpmh4XWrCH5Mg==",
-      "dev": true,
-      "dependencies": {
-        "bytes": "1",
-        "string_decoder": "0.10"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/body/node_modules/string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
-      "dev": true
-    },
-    "node_modules/bonjour-service": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.2.1.tgz",
-      "integrity": "sha512-oSzCS2zV14bh2kji6vNe7vrpJYCHGvcZnlffFQ1MEoX/WOeQ/teD8SYWKR942OI3INjq8OMNJlbPK5LLLUxFDw==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "multicast-dns": "^7.2.5"
-      }
-    },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true
-    },
-    "node_modules/bootstrap": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
-      "integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/bootstrap-sass": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.4.3.tgz",
-      "integrity": "sha512-vPgFnGMp1jWZZupOND65WS6mkR8rxhJxndT/AcMbqcq1hHMdkcH4sMPhznLzzoHOHkSCrd6J9F8pWBriPCKP2Q=="
-    },
-    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "devOptional": true,
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/browserstack": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/browserstack/-/browserstack-1.6.1.tgz",
-      "integrity": "sha512-GxtFjpIaKdbAyzHfFDKixKO8IBT7wR3NjbzrGc78nNs/Ciys9wU3/nBtsqsWv5nDSrdI5tz0peKuzCPuNXNUiw==",
-      "dev": true,
-      "dependencies": {
-        "https-proxy-agent": "^2.2.1"
-      }
-    },
-    "node_modules/browserstack/node_modules/agent-base": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
-      "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
-      "dev": true,
-      "dependencies": {
-        "es6-promisify": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/browserstack/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/browserstack/node_modules/https-proxy-agent": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-      "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^4.3.0",
-        "debug": "^3.1.0"
-      },
-      "engines": {
-        "node": ">= 4.5.0"
-      }
-    },
-    "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/cacache": {
-      "version": "18.0.3",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-18.0.3.tgz",
-      "integrity": "sha512-qXCd4rh6I07cnDqh8V48/94Tc/WSfj+o3Gn6NZ0aZovS255bUx8O13uKxRFd2eWG0xgsco7+YItQNPaa5E85hg==",
-      "dependencies": {
-        "@npmcli/fs": "^3.1.0",
-        "fs-minipass": "^3.0.0",
-        "glob": "^10.2.2",
-        "lru-cache": "^10.0.1",
-        "minipass": "^7.0.3",
-        "minipass-collect": "^2.0.1",
-        "minipass-flush": "^1.0.5",
-        "minipass-pipeline": "^1.2.4",
-        "p-map": "^4.0.0",
-        "ssri": "^10.0.0",
-        "tar": "^6.1.11",
-        "unique-filename": "^3.0.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/cacache/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/cacache/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
-    "node_modules/cacache/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/cache-base": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-      "dev": true,
-      "dependencies": {
-        "collection-visit": "^1.0.0",
-        "component-emitter": "^1.2.1",
-        "get-value": "^2.0.6",
-        "has-value": "^1.0.0",
-        "isobject": "^3.0.1",
-        "set-value": "^2.0.0",
-        "to-object-path": "^0.3.0",
-        "union-value": "^1.0.0",
-        "unset-value": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/camel-case": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
-      "integrity": "sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==",
-      "dev": true,
-      "dependencies": {
-        "no-case": "^2.2.0",
-        "upper-case": "^1.1.1"
-      }
-    },
-    "node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/camelcase-keys": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "map-obj": "^4.0.0",
-        "quick-lru": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/caniuse-db": {
-      "version": "1.0.30001627",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001627.tgz",
-      "integrity": "sha512-O964NchPabQ18rRShPUZ4eZqVGIBwdWzVUFF2OV7tA95RLVAoCjsGECEM7oqlbKWKQw9XJXskAJ1wYTmQhuMHA==",
-      "dev": true
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001627",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001627.tgz",
-      "integrity": "sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ]
-    },
-    "node_modules/canonical-path": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/canonical-path/-/canonical-path-0.0.2.tgz",
-      "integrity": "sha512-y8EIEvL+IW81S4hRQWCRFtly+g1cc1G+wxHpjhYR9jI2+JJjWiaKnkH8mmvNHOMOAd9fzgARDO3AEzjuR51qaA==",
-      "dev": true
-    },
-    "node_modules/canvas": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
-      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "@mapbox/node-pre-gyp": "^1.0.0",
-        "nan": "^2.17.0",
-        "simple-get": "^3.0.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/canvas-confetti": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
-      "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
-      "funding": {
-        "type": "donate",
-        "url": "https://www.paypal.me/kirilvatev"
-      }
-    },
-    "node_modules/caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-      "dev": true
-    },
-    "node_modules/center-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-      "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "align-text": "^0.1.3",
-        "lazy-cache": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/character-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
-      "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "is-regex": "^1.0.3"
-      }
-    },
-    "node_modules/chardet": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "devOptional": true,
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
-      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/class-utils": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
-      "dev": true,
-      "dependencies": {
-        "arr-union": "^3.1.0",
-        "define-property": "^0.2.5",
-        "isobject": "^3.0.0",
-        "static-extend": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/clean-css": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
-      "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==",
-      "dev": true,
-      "dependencies": {
-        "source-map": "~0.6.0"
-      },
-      "engines": {
-        "node": ">= 4.0"
-      }
-    },
-    "node_modules/clean-css/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/cli": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cli/-/cli-1.0.1.tgz",
-      "integrity": "sha512-41U72MB56TfUMGndAKK8vJ78eooOD4Z5NOL4xEfjc0c23s+6EYKXlXsmACBVclLP1yOfWCgEganVzddVrSNoTg==",
-      "dev": true,
-      "dependencies": {
-        "exit": "0.1.2",
-        "glob": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=0.2.5"
-      }
-    },
-    "node_modules/cli-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dependencies": {
-        "restore-cursor": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cli-spinners": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz",
-      "integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/cli-width": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
-      "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/cliui/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/cliui/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/cliui/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/cliui/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/clone": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/clone-deep": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-      "dev": true,
-      "dependencies": {
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.2",
-        "shallow-clone": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/codemirror": {
-      "version": "5.65.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.0.tgz",
-      "integrity": "sha512-gWEnHKEcz1Hyz7fsQWpK7P0sPI2/kSkRX2tc7DFA6TmZuDN75x/1ejnH/Pn8adYKrLEA1V2ww6L00GudHZbSKw=="
-    },
-    "node_modules/coffee-script": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.6.3.tgz",
-      "integrity": "sha512-lpusDYw9xym9ZOqFIeQuzzvTvunm2nlRL++BYhUcLn+77vuidExZG+qDPSKUfDXvuaHeFK6QavntXF+HiOq+/Q==",
-      "deprecated": "CoffeeScript on NPM has moved to \"coffeescript\" (no hyphen)",
-      "bin": {
-        "cake": "bin/cake",
-        "coffee": "bin/coffee"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/coffeelint": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/coffeelint/-/coffeelint-1.16.2.tgz",
-      "integrity": "sha512-6mzgOo4zb17WfdrSui/cSUEgQ0AQkW3gXDht+6lHkfkqGUtSYKwGdGcXsDfAyuScVzTlTtKdfwkAlJWfqul7zg==",
-      "dev": true,
-      "dependencies": {
-        "coffee-script": "~1.11.0",
-        "glob": "^7.0.6",
-        "ignore": "^3.0.9",
-        "optimist": "^0.6.1",
-        "resolve": "^0.6.3",
-        "strip-json-comments": "^1.0.2"
-      },
-      "bin": {
-        "coffeelint": "bin/coffeelint"
-      },
-      "engines": {
-        "node": ">=0.8.0",
-        "npm": ">=1.3.7"
-      }
-    },
-    "node_modules/coffeelint-stylish": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/coffeelint-stylish/-/coffeelint-stylish-0.1.2.tgz",
-      "integrity": "sha512-VcuzfB0bC9lvdvwckLzh3njKce68VVmOOXp0igyNl50D/uRLbFb4HSjQtTNGFEYiQ9Z0hjhfTqKe4v8UQxnngA==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.0.0",
-        "text-table": "^0.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0",
-        "npm": ">=1.3.7"
-      }
-    },
-    "node_modules/coffeelint-stylish/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/coffeelint-stylish/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/coffeelint-stylish/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/coffeelint-stylish/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/coffeelint-stylish/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/coffeelint/node_modules/coffee-script": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.11.1.tgz",
-      "integrity": "sha512-NIWm59Fh1zkXq6TS6PQvSO3AR9DbGq1IBNZHa1E3fUCNmJhIwLf1YKcWgaHqaU7zWGC/OE2V7K3GVAXFzcmu+A==",
-      "deprecated": "CoffeeScript on NPM has moved to \"coffeescript\" (no hyphen)",
-      "dev": true,
-      "bin": {
-        "cake": "bin/cake",
-        "coffee": "bin/coffee"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/coffeelint/node_modules/ignore": {
-      "version": "3.3.10",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
-      "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
-      "dev": true
-    },
-    "node_modules/coffeelint/node_modules/resolve": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.6.3.tgz",
-      "integrity": "sha512-UHBY3viPlJKf85YijDUcikKX6tmF4SokIDp518ZDVT92JNDcG5uKIthaT/owt3Sar0lwtOafsQuwrg22/v2Dwg==",
-      "dev": true
-    },
-    "node_modules/coffeelint/node_modules/strip-json-comments": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-      "integrity": "sha512-AOPG8EBc5wAikaG1/7uFCNFJwnKOuQwFTpYBdTW6OvWHeZBQBrAA/amefHGrEiOnCPcLFZK6FUPtWVKpQVIRgg==",
-      "dev": true,
-      "bin": {
-        "strip-json-comments": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/collection-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==",
-      "dev": true,
-      "dependencies": {
-        "map-visit": "^1.0.0",
-        "object-visit": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
-    "node_modules/color-support": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "optional": true,
-      "bin": {
-        "color-support": "bin.js"
-      }
-    },
-    "node_modules/colorette": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true
-    },
-    "node_modules/colors": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
-      "integrity": "sha512-ENwblkFQpqqia6b++zLD/KUWafYlVY/UNnAp7oz7LY7E924wmpye416wBOmvv/HMWzl8gL1kJlfvId/1Dg176w==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/commander": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-      "integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6.x"
-      }
-    },
-    "node_modules/comment-parser": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.3.1.tgz",
-      "integrity": "sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      }
-    },
-    "node_modules/common-path-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
-      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
-      "dev": true
-    },
-    "node_modules/compare-func": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
-      "integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==",
-      "dev": true,
-      "dependencies": {
-        "array-ify": "^1.0.0",
-        "dot-prop": "^5.1.0"
-      }
-    },
-    "node_modules/component-emitter": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
-      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
-      "dependencies": {
-        "mime-db": ">= 1.43.0 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
-      "dependencies": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/compression/node_modules/bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/compression/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/compression/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "devOptional": true
-    },
-    "node_modules/concurrently": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.6.1.tgz",
-      "integrity": "sha512-/+ugz+gwFSEfTGUxn0KHkY+19XPRTXR8+7oUK/HxgiN1n7FjeJmkrbSiXAJfyQ0zORgJYPaenmymwon51YXH9Q==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.4.1",
-        "commander": "2.6.0",
-        "date-fns": "^1.23.0",
-        "lodash": "^4.5.1",
-        "read-pkg": "^3.0.0",
-        "rx": "2.3.24",
-        "spawn-command": "^0.0.2-1",
-        "supports-color": "^3.2.3",
-        "tree-kill": "^1.1.0"
-      },
-      "bin": {
-        "concurrent": "src/main.js",
-        "concurrently": "src/main.js"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/concurrently/node_modules/has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/concurrently/node_modules/supports-color": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-      "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/connect": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
-      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
-      "dev": true,
-      "dependencies": {
-        "debug": "2.6.9",
-        "finalhandler": "1.1.2",
-        "parseurl": "~1.3.3",
-        "utils-merge": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/connect-history-api-fallback": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
-      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/connect-livereload": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.5.4.tgz",
-      "integrity": "sha512-3KnRwsWf4VmP01I4hCDQqTc4e2UxOvJIi8i08GiwqX2oymzxNFY7PqjFkwHglYTJ0yzUJkO5yqdPxVaIz3Pbug==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/connect/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/connect/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/console-browserify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
-      "integrity": "sha512-duS7VP5pvfsNLDvL1O4VOEbw37AI3A4ZUQYemvDlnpGrNu9tprR7BYWpDYwC0Xia0Zxz5ZupdiIrUp0GH1aXfg==",
-      "dev": true,
-      "dependencies": {
-        "date-now": "^0.1.4"
-      }
-    },
-    "node_modules/console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "optional": true
-    },
-    "node_modules/constantinople": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz",
-      "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@types/babel-types": "^7.0.0",
-        "@types/babylon": "^6.16.2",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-disposition/node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/continuable-cache": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/continuable-cache/-/continuable-cache-0.3.1.tgz",
-      "integrity": "sha512-TF30kpKhTH8AGCG3dut0rdd/19B7Z+qCnrMoBLpyQu/2drZdNrrpcjPEoJeSVsQM+8KmWG5O56oPDjSSUsuTyA==",
-      "dev": true
-    },
-    "node_modules/conventional-changelog-angular": {
-      "version": "5.0.13",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz",
-      "integrity": "sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==",
-      "dev": true,
-      "dependencies": {
-        "compare-func": "^2.0.0",
-        "q": "^1.5.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/conventional-changelog-conventionalcommits": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-6.1.0.tgz",
-      "integrity": "sha512-3cS3GEtR78zTfMzk0AizXKKIdN4OvSh7ibNz6/DPbhWWQu7LqE/8+/GqSodV+sywUR2gpJAdP/1JFf4XtN7Zpw==",
-      "dev": true,
-      "dependencies": {
-        "compare-func": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/conventional-commits-parser": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-3.2.4.tgz",
-      "integrity": "sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q==",
-      "dev": true,
-      "dependencies": {
-        "is-text-path": "^1.0.1",
-        "JSONStream": "^1.0.4",
-        "lodash": "^4.17.15",
-        "meow": "^8.0.0",
-        "split2": "^3.0.0",
-        "through2": "^4.0.0"
-      },
-      "bin": {
-        "conventional-commits-parser": "cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
-    },
-    "node_modules/cookie": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
-      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
-      "dev": true
-    },
-    "node_modules/copy-anything": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
-      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
-      "dev": true,
-      "dependencies": {
-        "is-what": "^3.14.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
-    "node_modules/copy-descriptor": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/copy-webpack-plugin": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
-      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
-      "dev": true,
-      "dependencies": {
-        "fast-glob": "^3.2.11",
-        "glob-parent": "^6.0.1",
-        "globby": "^13.1.1",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^4.0.0",
-        "serialize-javascript": "^6.0.0"
-      },
-      "engines": {
-        "node": ">= 14.15.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
-      }
-    },
-    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/copy-webpack-plugin/node_modules/globby": {
-      "version": "13.2.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
-      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
-      "dev": true,
-      "dependencies": {
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.3.0",
-        "ignore": "^5.2.4",
-        "merge2": "^1.4.1",
-        "slash": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/copy-webpack-plugin/node_modules/slash": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/core-js": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
-      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
-    "node_modules/core-js-compat": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
-      "integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.23.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
-    "node_modules/core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "dev": true
-    },
-    "node_modules/cors": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
-      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4",
-        "vary": "^1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "dev": true,
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cosmiconfig-typescript-loader": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-2.0.2.tgz",
-      "integrity": "sha512-KmE+bMjWMXJbkWCeY4FJX/npHuZPNr9XF9q9CIQ/bpFwi1qHfCmSiKarrCcRa0LO4fWjk93pVoeRtJAkTGcYNw==",
-      "dev": true,
-      "dependencies": {
-        "cosmiconfig": "^7",
-        "ts-node": "^10.8.1"
-      },
-      "engines": {
-        "node": ">=12",
-        "npm": ">=6"
-      },
-      "peerDependencies": {
-        "@types/node": "*",
-        "cosmiconfig": ">=7",
-        "typescript": ">=3"
-      }
-    },
-    "node_modules/create-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
-    },
-    "node_modules/critters": {
-      "version": "0.0.22",
-      "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.22.tgz",
-      "integrity": "sha512-NU7DEcQZM2Dy8XTKFHxtdnIM/drE312j2T4PCVaSUcS0oBeyT/NImpRw/Ap0zOr/1SE7SgPK9tGPg1WK/sVakw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.1.0",
-        "css-select": "^5.1.0",
-        "dom-serializer": "^2.0.0",
-        "domhandler": "^5.0.2",
-        "htmlparser2": "^8.0.2",
-        "postcss": "^8.4.23",
-        "postcss-media-query-parser": "^0.2.3"
-      }
-    },
-    "node_modules/critters/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/critters/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/critters/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/critters/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/critters/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/critters/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/css-loader": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.10.0.tgz",
-      "integrity": "sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.1.0",
-        "postcss": "^8.4.33",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.4",
-        "postcss-modules-scope": "^3.1.1",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.2.0",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/css-loader/node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "node_modules/css-select": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
-      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.1.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-what": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/custom-event": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
-      "dev": true
-    },
-    "node_modules/d3": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
-      "integrity": "sha512-yFk/2idb8OHPKkbAL8QaOaqENNoMhIaSHZerk3oQsECwkObkCpJyjYwCe+OHiq6UEdhe1m8ZGARRRO3ljFjlKg=="
-    },
-    "node_modules/dargs": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz",
-      "integrity": "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
-      "dev": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/data-view-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
-      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.6",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/data-view-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
-      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/data-view-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.6",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
-      "dev": true
-    },
-    "node_modules/date-format": {
-      "version": "4.0.14",
-      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
-      "integrity": "sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/date-now": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
-      "integrity": "sha512-AsElvov3LoNB7tf5k37H2jYSB+ZZPMT5sG2QjJCcdlV5chIv6htBUBUui2IKRjgtKAKtCBN7Zbwa+MtwLjSeNw==",
-      "dev": true
-    },
-    "node_modules/dateformat": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
-      "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/decamelize-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
-      "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
-      "dev": true,
-      "dependencies": {
-        "decamelize": "^1.1.0",
-        "map-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/decamelize-keys/node_modules/map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/decode-uri-component": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/decompress-response": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
-      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
-      "optional": true,
-      "dependencies": {
-        "mimic-response": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/deep-is": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "dev": true
-    },
-    "node_modules/default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-      "dev": true,
-      "dependencies": {
-        "execa": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/defaults": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
-      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
-      "dependencies": {
-        "clone": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-lazy-prop": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dev": true,
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz",
-      "integrity": "sha512-Z4fzpbIRjOu7lO5jCETSWoqUDVe0IPOlfugBsF6suen2LKDlVb4QZpKEM9P+buNJ4KI1eN7I083w/pbKUpsrWQ==",
-      "dev": true,
-      "dependencies": {
-        "globby": "^5.0.0",
-        "is-path-cwd": "^1.0.0",
-        "is-path-in-cwd": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "rimraf": "^2.2.8"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dev": true,
-      "dependencies": {
-        "array-uniq": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/globby": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
-      "integrity": "sha512-HJRTIH2EeH44ka+LWig+EqT2ONSYpVlNfx6pyd592/VF1TbfljJ7elwie7oSwcViLGqOdWocSdu2txwBF9bjmQ==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^1.0.1",
-        "arrify": "^1.0.0",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "optional": true
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/detect-file": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
-      "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-      "dev": true
-    },
-    "node_modules/di": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
-      "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
-      "dev": true
-    },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
-    "node_modules/diff": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.3.tgz",
-      "integrity": "sha512-9wfm3RLzMp/PyTFWuw9liEzdlxsdGixCW0ZTU1XDmtlAkvpVXTPGF8KnfSs0hm3BPbg19OrUPPsRkHXoREpP1g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.3.1"
-      }
-    },
-    "node_modules/diff-sequences": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
-      "dev": true,
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
-    "node_modules/dns-packet": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
-      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
-      "dev": true,
-      "dependencies": {
-        "@leichtgewicht/ip-codec": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/dom-serialize": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
-      "integrity": "sha512-Yra4DbvoW7/Z6LBN560ZwXMjoNOSAN2wRsKFGc4iBeso+mpIA6qj1vfdf9HpMaKAqG6wXTy+1SYEzmNpKXOSsQ==",
-      "dev": true,
-      "dependencies": {
-        "custom-event": "~1.0.0",
-        "ent": "~2.2.0",
-        "extend": "^3.0.0",
-        "void-elements": "^2.0.0"
-      }
-    },
-    "node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/dot-prop": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
-      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
-      "dev": true,
-      "dependencies": {
-        "is-obj": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "16.3.2",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.2.tgz",
-      "integrity": "sha512-HTlk5nmhkm8F6JcdXvHIzaorzCoziNQT9mGxLPVXW8wJF1TiGSL60ZGB4gHWabHOaMmWmhvk2/lPHfnBiT78AQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/motdotla/dotenv?sponsor=1"
-      }
-    },
-    "node_modules/dotenv-expand": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
-      "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
-    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
-    "node_modules/ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
-      "dev": true,
-      "dependencies": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
-    "node_modules/ecc-jsbn/node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "dev": true
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true
-    },
-    "node_modules/ejs": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
-      "dev": true,
-      "dependencies": {
-        "jake": "^10.8.5"
-      },
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.4.789",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.789.tgz",
-      "integrity": "sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ==",
-      "dev": true
-    },
-    "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/encoding": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.2"
-      }
-    },
-    "node_modules/end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
-      "dependencies": {
-        "once": "^1.4.0"
-      }
-    },
-    "node_modules/engine.io": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.4.tgz",
-      "integrity": "sha512-KdVSDKhVKyOi+r5uEabrDLZw2qXStVvCsEB/LN3mw4WFi6Gx50jTyuxYVCwAAC0U46FdnzP/ScKRBTXb/NiEOg==",
-      "dev": true,
-      "dependencies": {
-        "@types/cookie": "^0.4.1",
-        "@types/cors": "^2.8.12",
-        "@types/node": ">=10.0.0",
-        "accepts": "~1.3.4",
-        "base64id": "2.0.0",
-        "cookie": "~0.4.1",
-        "cors": "~2.8.5",
-        "debug": "~4.3.1",
-        "engine.io-parser": "~5.2.1",
-        "ws": "~8.11.0"
-      },
-      "engines": {
-        "node": ">=10.2.0"
-      }
-    },
-    "node_modules/engine.io-parser": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
-      "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-colors": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/ent": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
-      "integrity": "sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==",
-      "dev": true
-    },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "devOptional": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/env-paths": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
-      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/err-code": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
-      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA=="
-    },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
-    },
-    "node_modules/error": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/error/-/error-7.2.1.tgz",
-      "integrity": "sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==",
-      "dev": true,
-      "dependencies": {
-        "string-template": "~0.2.1"
-      }
-    },
-    "node_modules/error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "node_modules/es-abstract": {
-      "version": "1.23.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
-      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
-      "dev": true,
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
-        "arraybuffer.prototype.slice": "^1.0.3",
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "data-view-buffer": "^1.0.1",
-        "data-view-byte-length": "^1.0.1",
-        "data-view-byte-offset": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-set-tostringtag": "^2.0.3",
-        "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.4",
-        "get-symbol-description": "^1.0.2",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.2",
-        "internal-slot": "^1.0.7",
-        "is-array-buffer": "^3.0.4",
-        "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.1",
-        "is-negative-zero": "^2.0.3",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.3",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.13",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.13.1",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.5",
-        "regexp.prototype.flags": "^1.5.2",
-        "safe-array-concat": "^1.1.2",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.trim": "^1.2.9",
-        "string.prototype.trimend": "^1.0.8",
-        "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.2",
-        "typed-array-byte-length": "^1.0.1",
-        "typed-array-byte-offset": "^1.0.2",
-        "typed-array-length": "^1.0.6",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.15"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-module-lexer": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.3.tgz",
-      "integrity": "sha512-i1gCgmR9dCl6Vil6UKPI/trA69s08g/syhiDK9TG0Nf1RJjjFI+AzoWW7sPufzkgYAn861skuCwJa0pIIHYxvg==",
-      "dev": true
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
-      "dev": true,
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.2.4",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-shim-unscopables": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
-      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
-      "dev": true,
-      "dependencies": {
-        "hasown": "^2.0.0"
-      }
-    },
-    "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
-      "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/es5-shim": {
-      "version": "4.6.7",
-      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.7.tgz",
-      "integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "dev": true
-    },
-    "node_modules/es6-promisify": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
-      "integrity": "sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==",
-      "dev": true,
-      "dependencies": {
-        "es6-promise": "^4.0.3"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.1.tgz",
-      "integrity": "sha512-OJwEgrpWm/PCMsLVWXKqvcjme3bHNpOgN7Tb6cQnR5n0TPbQx1/Xrn7rqM+wn17bYeT6MGB5sn1Bh5YiGi70nA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.1",
-        "@esbuild/android-arm": "0.20.1",
-        "@esbuild/android-arm64": "0.20.1",
-        "@esbuild/android-x64": "0.20.1",
-        "@esbuild/darwin-arm64": "0.20.1",
-        "@esbuild/darwin-x64": "0.20.1",
-        "@esbuild/freebsd-arm64": "0.20.1",
-        "@esbuild/freebsd-x64": "0.20.1",
-        "@esbuild/linux-arm": "0.20.1",
-        "@esbuild/linux-arm64": "0.20.1",
-        "@esbuild/linux-ia32": "0.20.1",
-        "@esbuild/linux-loong64": "0.20.1",
-        "@esbuild/linux-mips64el": "0.20.1",
-        "@esbuild/linux-ppc64": "0.20.1",
-        "@esbuild/linux-riscv64": "0.20.1",
-        "@esbuild/linux-s390x": "0.20.1",
-        "@esbuild/linux-x64": "0.20.1",
-        "@esbuild/netbsd-x64": "0.20.1",
-        "@esbuild/openbsd-x64": "0.20.1",
-        "@esbuild/sunos-x64": "0.20.1",
-        "@esbuild/win32-arm64": "0.20.1",
-        "@esbuild/win32-ia32": "0.20.1",
-        "@esbuild/win32-x64": "0.20.1"
-      }
-    },
-    "node_modules/esbuild-wasm": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.20.1.tgz",
-      "integrity": "sha512-6v/WJubRsjxBbQdz6izgvx7LsVFvVaGmSdwrFHmEzoVgfXL89hkKPoQHsnVI2ngOkcBUQT9kmAM1hVL1k/Av4A==",
-      "dev": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-config-prettier": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
-      "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
-      "dev": true,
-      "bin": {
-        "eslint-config-prettier": "bin/cli.js"
-      },
-      "peerDependencies": {
-        "eslint": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
-      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^3.2.7",
-        "is-core-module": "^2.13.0",
-        "resolve": "^1.22.4"
-      }
-    },
-    "node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-module-utils": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
-      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^3.2.7"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-module-utils/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-plugin-import": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
-      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
-      "dev": true,
-      "dependencies": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flat": "^1.2.5",
-        "debug": "^2.6.9",
-        "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.3",
-        "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
-        "is-glob": "^4.0.3",
-        "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
-        "resolve": "^1.22.0",
-        "tsconfig-paths": "^3.14.1"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dev": true,
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/eslint-plugin-jsdoc": {
-      "version": "39.3.6",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.3.6.tgz",
-      "integrity": "sha512-R6dZ4t83qPdMhIOGr7g2QII2pwCjYyKP+z0tPOfO1bbAbQyKC20Y2Rd6z1te86Lq3T7uM8bNo+VD9YFpE8HU/g==",
-      "dev": true,
-      "dependencies": {
-        "@es-joy/jsdoccomment": "~0.31.0",
-        "comment-parser": "1.3.1",
-        "debug": "^4.3.4",
-        "escape-string-regexp": "^4.0.0",
-        "esquery": "^1.4.0",
-        "semver": "^7.3.7",
-        "spdx-expression-parse": "^3.0.1"
-      },
-      "engines": {
-        "node": "^14 || ^16 || ^17 || ^18"
-      },
-      "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-jsdoc/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-plugin-prefer-arrow": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.3.tgz",
-      "integrity": "sha512-J9I5PKCOJretVuiZRGvPQxCbllxGAV/viI20JO3LYblAodofBxyMnZAJ+WGeClHgANnSJberTNoFWWjrWKBuXQ==",
-      "dev": true,
-      "peerDependencies": {
-        "eslint": ">=2.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-prettier": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
-      "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
-      "dev": true,
-      "dependencies": {
-        "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.8.6"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint-plugin-prettier"
-      },
-      "peerDependencies": {
-        "@types/eslint": ">=8.0.0",
-        "eslint": ">=8.0.0",
-        "eslint-config-prettier": "*",
-        "prettier": ">=3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/eslint": {
-          "optional": true
-        },
-        "eslint-config-prettier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-scope": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.1.tgz",
-      "integrity": "sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/eslint/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/eslint/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/eslint/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/eslint/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/eslint/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/eslint/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/eslint/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^8.9.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
-      "dev": true,
-      "dependencies": {
-        "estraverse": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
-      "dependencies": {
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/eventemitter2": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz",
-      "integrity": "sha512-K7J4xq5xAD5jHsGM5ReWXRTFa3JRGofHiMcVgQ8PRwgWxzjHpMWCIzsmyf60+mh8KLsqYPcjUMa0AC4hd6lPyQ=="
-    },
-    "node_modules/eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
-    },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.x"
-      }
-    },
-    "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/expand-brackets": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^2.3.3",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "posix-character-classes": "^0.1.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/expand-brackets/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/expand-brackets/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/expand-tilde": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-      "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
-      "dev": true,
-      "dependencies": {
-        "homedir-polyfill": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/exponential-backoff": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
-      "integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw=="
-    },
-    "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
-      "dev": true,
-      "dependencies": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
-        "content-disposition": "0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "0.6.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/express/node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/express/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/express/node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/express/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/express/node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/express/node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/express/node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
-    },
-    "node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dev": true,
-      "dependencies": {
-        "is-extendable": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/external-editor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
-      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
-      "dependencies": {
-        "chardet": "^0.7.0",
-        "iconv-lite": "^0.4.24",
-        "tmp": "^0.0.33"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/external-editor/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/external-editor/node_modules/tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "dependencies": {
-        "os-tmpdir": "~1.0.2"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
-    "node_modules/extglob": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-      "dev": true,
-      "dependencies": {
-        "array-unique": "^0.3.2",
-        "define-property": "^1.0.0",
-        "expand-brackets": "^2.1.4",
-        "extend-shallow": "^2.0.1",
-        "fragment-cache": "^0.2.1",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/extglob/node_modules/define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/extglob/node_modules/is-descriptor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
-      "integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
-      "dev": true,
-      "dependencies": {
-        "is-accessor-descriptor": "^1.0.1",
-        "is-data-descriptor": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
-      "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ]
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-    },
-    "node_modules/fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
-    },
-    "node_modules/fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true
-    },
-    "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/faye-websocket": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
-      "integrity": "sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==",
-      "dev": true,
-      "dependencies": {
-        "websocket-driver": ">=0.5.1"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/figures": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-      "dependencies": {
-        "escape-string-regexp": "^1.0.5"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
-      "dev": true,
-      "dependencies": {
-        "flat-cache": "^3.0.4"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/file-saver": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
-      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
-    },
-    "node_modules/file-sync-cmp": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/file-sync-cmp/-/file-sync-cmp-0.1.1.tgz",
-      "integrity": "sha512-0k45oWBokCqh2MOexeYKpyqmGKG+8mQ2Wd8iawx+uWd/weWJQAZ6SoPybagdCI4xFisag8iAR77WPm4h3pTfxA==",
-      "dev": true
-    },
-    "node_modules/file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^5.0.1"
-      }
-    },
-    "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "devOptional": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-      "dev": true,
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/finalhandler/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/finalhandler/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/find-cache-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz",
-      "integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==",
-      "dev": true,
-      "dependencies": {
-        "common-path-prefix": "^3.0.0",
-        "pkg-dir": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/findup-sync": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz",
-      "integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==",
-      "dev": true,
-      "dependencies": {
-        "detect-file": "^1.0.0",
-        "is-glob": "^4.0.3",
-        "micromatch": "^4.0.4",
-        "resolve-dir": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/fined": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fined/-/fined-1.2.0.tgz",
-      "integrity": "sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==",
-      "dev": true,
-      "dependencies": {
-        "expand-tilde": "^2.0.2",
-        "is-plain-object": "^2.0.3",
-        "object.defaults": "^1.1.0",
-        "object.pick": "^1.2.0",
-        "parse-filepath": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/flagged-respawn": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
-      "integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/flat": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
-      "dev": true,
-      "bin": {
-        "flat": "cli.js"
-      }
-    },
-    "node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
-      "dev": true,
-      "dependencies": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
-      "engines": {
-        "node": ">=0.10.3"
-      }
-    },
-    "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
-      "dependencies": {
-        "is-callable": "^1.1.3"
-      }
-    },
-    "node_modules/for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/for-own": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-      "integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==",
-      "dev": true,
-      "dependencies": {
-        "for-in": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/foreground-child": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/foreground-child/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/fragment-cache": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==",
-      "dev": true,
-      "dependencies": {
-        "map-cache": "^0.2.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true
-    },
-    "node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/fs-minipass": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
-      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/fs-monkey": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
-      "integrity": "sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==",
-      "dev": true
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "devOptional": true
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/function.prototype.name": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
-      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "functions-have-names": "^1.2.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gauge": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
-      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "aproba": "^1.0.3 || ^2.0.0",
-        "color-support": "^1.1.2",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.1",
-        "object-assign": "^4.1.1",
-        "signal-exit": "^3.0.0",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "wide-align": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/gaze": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
-      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
-      "dev": true,
-      "dependencies": {
-        "globule": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "engines": {
-        "node": "6.* || 8.* || >= 10.*"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/get-symbol-description": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
-      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.5",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-value": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/getobject": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/getobject/-/getobject-1.0.2.tgz",
-      "integrity": "sha512-2zblDBaFcb3rB4rF77XVnuINOE2h2k/OnqXAiy0IrTxUfV1iFp3la33oAQVY9pCpWU268WFYVt2t71hlMuLsOg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
-      "dev": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      }
-    },
-    "node_modules/git-raw-commits": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz",
-      "integrity": "sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==",
-      "dev": true,
-      "dependencies": {
-        "dargs": "^7.0.0",
-        "lodash": "^4.17.15",
-        "meow": "^8.0.0",
-        "split2": "^3.0.0",
-        "through2": "^4.0.0"
-      },
-      "bin": {
-        "git-raw-commits": "cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "devOptional": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "devOptional": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
-    },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "devOptional": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "devOptional": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/global-dirs": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
-      "integrity": "sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==",
-      "dev": true,
-      "dependencies": {
-        "ini": "^1.3.4"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/global-dirs/node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
-    },
-    "node_modules/global-modules": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
-      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
-      "dev": true,
-      "dependencies": {
-        "global-prefix": "^1.0.1",
-        "is-windows": "^1.0.1",
-        "resolve-dir": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/global-prefix": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
-      "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
-      "dev": true,
-      "dependencies": {
-        "expand-tilde": "^2.0.2",
-        "homedir-polyfill": "^1.0.1",
-        "ini": "^1.3.4",
-        "is-windows": "^1.0.1",
-        "which": "^1.2.14"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/global-prefix/node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
-    },
-    "node_modules/global-prefix/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/globalthis": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
-      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
-      "dev": true,
-      "dependencies": {
-        "define-properties": "^1.2.1",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/globule": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.4.tgz",
-      "integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==",
-      "dev": true,
-      "dependencies": {
-        "glob": "~7.1.1",
-        "lodash": "^4.17.21",
-        "minimatch": "~3.0.2"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/globule/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/globule/node_modules/minimatch": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
-      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
-    },
-    "node_modules/grunt": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.6.1.tgz",
-      "integrity": "sha512-/ABUy3gYWu5iBmrUSRBP97JLpQUm0GgVveDCp6t3yRNIoltIYw7rEj3g5y1o2PGPR2vfTRGa7WC/LZHLTXnEzA==",
-      "dev": true,
-      "dependencies": {
-        "dateformat": "~4.6.2",
-        "eventemitter2": "~0.4.13",
-        "exit": "~0.1.2",
-        "findup-sync": "~5.0.0",
-        "glob": "~7.1.6",
-        "grunt-cli": "~1.4.3",
-        "grunt-known-options": "~2.0.0",
-        "grunt-legacy-log": "~3.0.0",
-        "grunt-legacy-util": "~2.0.1",
-        "iconv-lite": "~0.6.3",
-        "js-yaml": "~3.14.0",
-        "minimatch": "~3.0.4",
-        "nopt": "~3.0.6"
-      },
-      "bin": {
-        "grunt": "bin/grunt"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/grunt-bump": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/grunt-bump/-/grunt-bump-0.8.0.tgz",
-      "integrity": "sha512-xih0/NBbmIk6LdVspC/yO2E1ITaghfv8aCmY2S6VQ9rxFpZ8skAL4IMwwESlQZIRES+eK6lQOKgpeFBPV5amRA==",
-      "dev": true,
-      "dependencies": {
-        "semver": "^5.1.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=1.0.1"
-      }
-    },
-    "node_modules/grunt-bump/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/grunt-cli": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.4.3.tgz",
-      "integrity": "sha512-9Dtx/AhVeB4LYzsViCjUQkd0Kw0McN2gYpdmGYKtE2a5Yt7v1Q+HYZVWhqXc/kGnxlMtqKDxSwotiGeFmkrCoQ==",
-      "dev": true,
-      "dependencies": {
-        "grunt-known-options": "~2.0.0",
-        "interpret": "~1.1.0",
-        "liftup": "~3.0.1",
-        "nopt": "~4.0.1",
-        "v8flags": "~3.2.0"
-      },
-      "bin": {
-        "grunt": "bin/grunt"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/grunt-cli/node_modules/nopt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
-      "dev": true,
-      "dependencies": {
-        "abbrev": "1",
-        "osenv": "^0.1.4"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      }
-    },
-    "node_modules/grunt-coffeelint": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/grunt-coffeelint/-/grunt-coffeelint-0.0.16.tgz",
-      "integrity": "sha512-dulo0qxyfN3x9GilJxVj7b7hQT61VIpe8kpk68ftmdbBAwOqCg/bneol9izwwBq7A0G+ZZKaBYHIt73JTebteQ==",
-      "dev": true,
-      "dependencies": {
-        "coffeelint": "^1",
-        "coffeelint-stylish": "~0.1.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.0"
-      }
-    },
-    "node_modules/grunt-contrib-clean": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-clean/-/grunt-contrib-clean-1.0.0.tgz",
-      "integrity": "sha512-53igYwhP+AUWdIfO1R+L9r4O48FSnA5ImYPWdXUNU+YQruOpprmMb+N74P7fAZLL3w9lsFin4B234NUrWx/RrQ==",
-      "dev": true,
-      "dependencies": {
-        "async": "^1.5.2",
-        "rimraf": "^2.5.1"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      },
-      "peerDependencies": {
-        "grunt": ">= 0.4.5"
-      }
-    },
-    "node_modules/grunt-contrib-clean/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/grunt-contrib-coffee": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-coffee/-/grunt-contrib-coffee-1.0.0.tgz",
-      "integrity": "sha512-KTp5xSlelwbyPnB9NBtnYhFl3TayzgJKkvT0x4yLKlLJaGWFMW7AsdPQLSFWralQdxSuTLuHvEKUleU30uHsyw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "~1.0.0",
-        "coffee-script": "~1.10.0",
-        "lodash": "~4.3.0",
-        "uri-path": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      },
-      "peerDependencies": {
-        "grunt": ">= 0.4.5"
-      }
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/ansi-regex": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
-      "integrity": "sha512-q5i8bFLg2wDfsuR56c1NzlJFPzVD+9mxhDrhqOGigEFa87OZHlF+9dWeGWzVTP/0ECiA/JUGzfzRr2t3eYORRw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/chalk": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.0.0.tgz",
-      "integrity": "sha512-1TE3hpADga5iWinlcCpyhC7fTl9uQumLD8i2jJoJeVg7UbveY5jj7F6uCq8w0hQpSeLhaPn5QFe8e56toMVP1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.0.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^1.0.3",
-        "strip-ansi": "^2.0.1",
-        "supports-color": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/coffee-script": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.10.0.tgz",
-      "integrity": "sha512-ef2EsKe2bCuX3VGXfPCNGqni3wgrL8Bu0tDdY8mUDa+QnDR1GNcsC4QhxwG4az6l5y5W0wKUc1Pn/F3MCyafjg==",
-      "deprecated": "CoffeeScript on NPM has moved to \"coffeescript\" (no hyphen)",
-      "dev": true,
-      "bin": {
-        "cake": "bin/cake",
-        "coffee": "bin/coffee"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/has-ansi": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-1.0.3.tgz",
-      "integrity": "sha512-XwLzIec2hoj/LW9F3nCcQpEwZ5fDJ1LOc6SAgc0pz79CGiY9zmZhIkbf7OnK+tC36UhpQBa03HPt13QavGoF6Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^1.1.0",
-        "get-stdin": "^4.0.1"
-      },
-      "bin": {
-        "has-ansi": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/lodash": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.3.0.tgz",
-      "integrity": "sha512-JDXk2rxAUY3cHGG9OJfRbhd7zc2feQRdMthkMdqmK19l0+ojybg9ISylGUnmqHtteg/wXH8QudOLN+RKgKNKIQ==",
-      "dev": true
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/strip-ansi": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
-      "integrity": "sha512-2h8q2CP3EeOhDJ+jd932PRMpa3/pOJFGoF22J1U/DNbEK2gSW2DqeF46VjCXsSQXhC+k/l8/gaaRBQKL6hUPfQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^1.0.0"
-      },
-      "bin": {
-        "strip-ansi": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-coffee/node_modules/supports-color": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.3.1.tgz",
-      "integrity": "sha512-OHbMkscHFRcNWEcW80fYhCrzAjheSIBwJChpFaBqA6zEz53nxumqi6ukciRb/UA0/v2nDNMk28ce/uBbYRDsng==",
-      "dev": true,
-      "bin": {
-        "supports-color": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/grunt-contrib-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-concat/-/grunt-contrib-concat-1.0.1.tgz",
-      "integrity": "sha512-QdTmcxe8aim2Z0dFeuSJ+f7fHIeY7PZaTMZxgvosjXwyMhpy2GUR5WHkr12lksHfZVE80v2wUwqF56wyfPUwoQ==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.0.0",
-        "source-map": "^0.5.3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.0"
-      }
-    },
-    "node_modules/grunt-contrib-concat/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-concat/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-concat/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-concat/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-concat/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-concat/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/grunt-contrib-connect": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-connect/-/grunt-contrib-connect-1.0.2.tgz",
-      "integrity": "sha512-7OPoyfGrpOYzuiRPzGyzWDe/xFcjttXe1ztVSFS8TAVBtpfXeeOV9RiwuyqA4yN1UeOG2Pnpx8s0DcUDAu21Gw==",
-      "dev": true,
-      "dependencies": {
-        "async": "^1.5.2",
-        "connect": "^3.4.0",
-        "connect-livereload": "^0.5.0",
-        "http2": "^3.3.4",
-        "morgan": "^1.6.1",
-        "opn": "^4.0.0",
-        "portscanner": "^1.0.0",
-        "serve-index": "^1.7.1",
-        "serve-static": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.0"
-      }
-    },
-    "node_modules/grunt-contrib-copy": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-copy/-/grunt-contrib-copy-1.0.0.tgz",
-      "integrity": "sha512-gFRFUB0ZbLcjKb67Magz1yOHGBkyU6uL29hiEW1tdQ9gQt72NuMKIy/kS6dsCbV0cZ0maNCb0s6y+uT1FKU7jA==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.1.1",
-        "file-sync-cmp": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-copy/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-copy/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-copy/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-copy/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-copy/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/grunt-contrib-jshint": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-jshint/-/grunt-contrib-jshint-1.0.0.tgz",
-      "integrity": "sha512-c16rDqMmtF3sZlz8f9IGd2l9BKoW5FvYbsBHwEZl3HN0KmQ7RbbG+kzTNtfIcDjIrWDjHmSVj7TSQXeqnBHGqw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.1.1",
-        "hooker": "^0.2.3",
-        "jshint": "~2.9.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.0"
-      }
-    },
-    "node_modules/grunt-contrib-jshint/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-jshint/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-jshint/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-jshint/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-jshint/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/grunt-contrib-watch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/grunt-contrib-watch/-/grunt-contrib-watch-1.1.0.tgz",
-      "integrity": "sha512-yGweN+0DW5yM+oo58fRu/XIRrPcn3r4tQx+nL7eMRwjpvk+rQY6R8o94BPK0i2UhTg9FN21hS+m8vR8v9vXfeg==",
-      "dev": true,
-      "dependencies": {
-        "async": "^2.6.0",
-        "gaze": "^1.1.0",
-        "lodash": "^4.17.10",
-        "tiny-lr": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-contrib-watch/node_modules/async": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.14"
-      }
-    },
-    "node_modules/grunt-env": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/grunt-env/-/grunt-env-0.4.4.tgz",
-      "integrity": "sha512-Sm7edLjXyN8YroVPckd1o55lm11J6lCyWOHRvDzIDpUMMFGPB3cp9NEgo0/HPGd3OzSOZ6jUd+Wyn0CYBeLHCg==",
-      "dev": true,
-      "dependencies": {
-        "ini": "~1.3.0",
-        "lodash": "~2.4.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/grunt-env/node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
-    },
-    "node_modules/grunt-env/node_modules/lodash": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
-      "dev": true,
-      "engines": [
-        "node",
-        "rhino"
-      ]
-    },
-    "node_modules/grunt-html2js": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/grunt-html2js/-/grunt-html2js-0.6.0.tgz",
-      "integrity": "sha512-A6hJjb904r9dQuUKAmYrwwKJonbZeXD0zMCGCBxMZg3ocE2wbNfCaOcorxIZyKi7i/UaiIvEXpDNukQgO663sw==",
-      "dev": true,
-      "dependencies": {
-        "chokidar": "^2",
-        "html-minifier": "^3"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "optionalDependencies": {
-        "pug": "^2"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/anymatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-      "dev": true,
-      "dependencies": {
-        "micromatch": "^3.1.4",
-        "normalize-path": "^2.1.1"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/anymatch/node_modules/normalize-path": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
-      "dev": true,
-      "dependencies": {
-        "remove-trailing-separator": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/binary-extensions": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/braces": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-      "dev": true,
-      "dependencies": {
-        "arr-flatten": "^1.1.0",
-        "array-unique": "^0.3.2",
-        "extend-shallow": "^2.0.1",
-        "fill-range": "^4.0.0",
-        "isobject": "^3.0.1",
-        "repeat-element": "^1.1.2",
-        "snapdragon": "^0.8.1",
-        "snapdragon-node": "^2.0.1",
-        "split-string": "^3.0.2",
-        "to-regex": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/chokidar": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-      "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-      "deprecated": "Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies",
-      "dev": true,
-      "dependencies": {
-        "anymatch": "^2.0.0",
-        "async-each": "^1.0.1",
-        "braces": "^2.3.2",
-        "glob-parent": "^3.1.0",
-        "inherits": "^2.0.3",
-        "is-binary-path": "^1.0.0",
-        "is-glob": "^4.0.0",
-        "normalize-path": "^3.0.0",
-        "path-is-absolute": "^1.0.0",
-        "readdirp": "^2.2.1",
-        "upath": "^1.1.1"
-      },
-      "optionalDependencies": {
-        "fsevents": "^1.2.7"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/fill-range": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-      "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
-      "dev": true,
-      "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1",
-        "to-regex-range": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/fsevents": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-      "deprecated": "The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "dependencies": {
-        "bindings": "^1.5.0",
-        "nan": "^2.12.1"
-      },
-      "engines": {
-        "node": ">= 4.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/glob-parent": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-      "integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^3.1.0",
-        "path-dirname": "^1.0.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/glob-parent/node_modules/is-glob": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-      "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
-      "dev": true,
-      "dependencies": {
-        "is-extglob": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/is-binary-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/is-descriptor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
-      "integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
-      "dev": true,
-      "dependencies": {
-        "is-accessor-descriptor": "^1.0.1",
-        "is-data-descriptor": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dev": true,
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/is-number/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
-      "dev": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/grunt-html2js/node_modules/micromatch": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-      "dev": true,
-      "dependencies": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "braces": "^2.3.1",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "extglob": "^2.0.4",
-        "fragment-cache": "^0.2.1",
-        "kind-of": "^6.0.2",
-        "nanomatch": "^1.2.9",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/micromatch/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-      "dev": true,
-      "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/readdirp": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.11",
-        "micromatch": "^3.1.10",
-        "readable-stream": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/grunt-html2js/node_modules/to-regex-range": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-karma": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-karma/-/grunt-karma-2.0.0.tgz",
-      "integrity": "sha512-/5plsdrES8dWrGhg33Q7AiYU1PUHXtMcZLP2pAppUJJKNmCpiGZXpVfHZ7KO19buVxb555UFbfhhbY7FccXH4g==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^3.10.1"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.x",
-        "karma": "^0.13.0 || >= 0.14.0-rc.0"
-      }
-    },
-    "node_modules/grunt-karma/node_modules/lodash": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-      "integrity": "sha512-9mDDwqVIma6OZX79ZlDACZl8sBm0TEnkf99zV3iMA4GzkIT/9hiqP5mY0HoT1iNLCrKc/R1HByV+yJfRWVJryQ==",
-      "dev": true
-    },
-    "node_modules/grunt-known-options": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-known-options/-/grunt-known-options-2.0.0.tgz",
-      "integrity": "sha512-GD7cTz0I4SAede1/+pAbmJRG44zFLPipVtdL9o3vqx9IEyb7b4/Y3s7r6ofI3CchR5GvYJ+8buCSioDv5dQLiA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-legacy-log": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-3.0.0.tgz",
-      "integrity": "sha512-GHZQzZmhyq0u3hr7aHW4qUH0xDzwp2YXldLPZTCjlOeGscAOWWPftZG3XioW8MasGp+OBRIu39LFx14SLjXRcA==",
-      "dev": true,
-      "dependencies": {
-        "colors": "~1.1.2",
-        "grunt-legacy-log-utils": "~2.1.0",
-        "hooker": "~0.2.3",
-        "lodash": "~4.17.19"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/grunt-legacy-log-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/grunt-legacy-log-utils/-/grunt-legacy-log-utils-2.1.0.tgz",
-      "integrity": "sha512-lwquaPXJtKQk0rUM1IQAop5noEpwFqOXasVoedLeNzaibf/OPWjKYvvdqnEHNmU+0T0CaReAXIbGo747ZD+Aaw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "~4.1.0",
-        "lodash": "~4.17.19"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/grunt-legacy-log-utils/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/grunt-legacy-log-utils/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/grunt-legacy-log-utils/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/grunt-legacy-log-utils/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/grunt-legacy-log-utils/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/grunt-legacy-log-utils/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/grunt-legacy-util": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-2.0.1.tgz",
-      "integrity": "sha512-2bQiD4fzXqX8rhNdXkAywCadeqiPiay0oQny77wA2F3WF4grPJXCvAcyoWUJV+po/b15glGkxuSiQCK299UC2w==",
-      "dev": true,
-      "dependencies": {
-        "async": "~3.2.0",
-        "exit": "~0.1.2",
-        "getobject": "~1.0.0",
-        "hooker": "~0.2.3",
-        "lodash": "~4.17.21",
-        "underscore.string": "~3.3.5",
-        "which": "~2.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/grunt-legacy-util/node_modules/async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
-      "dev": true
-    },
-    "node_modules/grunt-legacy-util/node_modules/sprintf-js": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
-      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "dev": true
-    },
-    "node_modules/grunt-legacy-util/node_modules/underscore.string": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.6.tgz",
-      "integrity": "sha512-VoC83HWXmCrF6rgkyxS9GHv8W9Q5nhMKho+OadDJGzL2oDYbYEppBaCMH6pFlwLeqj2QS+hhkw2kpXkSdD1JxQ==",
-      "dev": true,
-      "dependencies": {
-        "sprintf-js": "^1.1.1",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/grunt-lib-contrib": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/grunt-lib-contrib/-/grunt-lib-contrib-0.6.1.tgz",
-      "integrity": "sha512-HdCtJuMmmkSAVrAfsG7lZWE0YabrsPWwzcCCUgWQOAaQsQSUNhw/IwD2YjCSLh5y9NXSPzHTYFLL4ro7QbAJMA==",
-      "dependencies": {
-        "zlib-browserify": "0.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/grunt-newer": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/grunt-newer/-/grunt-newer-1.3.0.tgz",
-      "integrity": "sha512-HEbcE3pTueSx2IT/WR9F/pJaGioy1+bDu0RPS1JZn8cPHaAGc8BIkcbEHato9Bhoy6ip1R43wY4gfgO6d7utnA==",
-      "dev": true,
-      "dependencies": {
-        "async": "^1.5.2",
-        "rimraf": "^2.5.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.1"
-      }
-    },
-    "node_modules/grunt-newer/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/grunt-ng-annotate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-ng-annotate/-/grunt-ng-annotate-3.0.0.tgz",
-      "integrity": "sha512-kmmwAyix4OMEOlWvgh584JdVj2tYK6UcsAuS3cbeGuNzYL054hU9zsth+ZuAYslIZPQeZDzW4vTd3KEiF4iBUw==",
-      "deprecated": "grunt-ng-annotate is deprecated. Switch to babel-plugin-angularjs-annotate or provide annotations by yourself.",
-      "dev": true,
-      "dependencies": {
-        "lodash.clonedeep": "^4.5.0",
-        "ng-annotate": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=4.4 <5 || >=6.9"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.5"
-      }
-    },
-    "node_modules/grunt-postcss": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/grunt-postcss/-/grunt-postcss-0.8.0.tgz",
-      "integrity": "sha512-Y/GlBwlSXET86uudGM6Sn5Qtjas5PT2AwjMGqKNnSaoxJSfhNY4chpAnOs72VQ4y3LqrP0y5f/i7CroyZqsuJA==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.0.0",
-        "diff": "^2.0.2",
-        "postcss": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 0.12.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.5"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/postcss": {
-      "version": "5.2.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-      "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.1.3",
-        "js-base64": "^2.1.9",
-        "source-map": "^0.5.6",
-        "supports-color": "^3.2.3"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/postcss/node_modules/supports-color": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-      "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/grunt-postcss/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/grunt-preprocess": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/grunt-preprocess/-/grunt-preprocess-5.1.0.tgz",
-      "integrity": "sha512-akQU6U8ULt8gLC6yeGFSBqWQUAqMQPFMm0jAIL4FVIIEkzp3unjDUxu/ZBpbJhiQ9i4IP1M1S6wsdMjE0QsrhQ==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.5.0",
-        "preprocess": "^3.0.2"
-      },
-      "bin": {
-        "grunt-preprocess": "bin/grunt-preprocess"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.0"
-      }
-    },
-    "node_modules/grunt-sass": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/grunt-sass/-/grunt-sass-3.1.0.tgz",
-      "integrity": "sha512-90s27H7FoCDcA8C8+R0GwC+ntYD3lG6S/jqcavWm3bn9RiJTmSfOvfbFa1PXx4NbBWuiGQMLfQTj/JvvqT5w6A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "grunt": ">=1"
-      }
-    },
-    "node_modules/grunt-sass-globbing": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/grunt-sass-globbing/-/grunt-sass-globbing-1.5.1.tgz",
-      "integrity": "sha512-v1b+xQYGen1uRZ+LSZCVHfYR5JhSlsjT/F9sSatzxKh0vn65wZ0kA5OLta/l8o+uL036oJluqkqSWJRV0k7kUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.10.0"
-      },
-      "peerDependencies": {
-        "grunt": ">=0.4.0"
-      }
-    },
-    "node_modules/grunt/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/grunt/node_modules/minimatch": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
-      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/handle-thing": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
-      "dev": true
-    },
-    "node_modules/har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/har-validator": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-      "deprecated": "this library is no longer supported",
-      "dev": true,
-      "dependencies": {
-        "ajv": "^6.12.3",
-        "har-schema": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/har-validator/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/har-validator/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/hard-rejection": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/has": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
-      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-ansi/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-bigints": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "optional": true
-    },
-    "node_modules/has-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==",
-      "dev": true,
-      "dependencies": {
-        "get-value": "^2.0.6",
-        "has-values": "^1.0.0",
-        "isobject": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-values": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^3.0.0",
-        "kind-of": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-values/node_modules/is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-values/node_modules/is-number/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
-      "dev": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-values/node_modules/kind-of": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-      "integrity": "sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==",
-      "dev": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
-      "bin": {
-        "he": "bin/he"
-      }
-    },
-    "node_modules/homedir-polyfill": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
-      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-      "dev": true,
-      "dependencies": {
-        "parse-passwd": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/hooker": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/hooker/-/hooker-0.2.3.tgz",
-      "integrity": "sha512-t+UerCsQviSymAInD01Pw+Dn/usmz1sRO+3Zk1+lx8eg+WKpD2ulcwWqHHL0+aseRBr+3+vIhiG1K1JTwaIcTA==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/hosted-git-info": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/hosted-git-info/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/hosted-git-info/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
-    "node_modules/hpack.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "obuf": "^1.0.0",
-        "readable-stream": "^2.0.1",
-        "wbuf": "^1.1.0"
-      }
-    },
-    "node_modules/hpack.js/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/hpack.js/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/hpack.js/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/html-entities": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
-      "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/mdevils"
-        },
-        {
-          "type": "patreon",
-          "url": "https://patreon.com/mdevils"
-        }
-      ]
-    },
-    "node_modules/html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
-    },
-    "node_modules/html-minifier": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz",
-      "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==",
-      "dev": true,
-      "dependencies": {
-        "camel-case": "3.0.x",
-        "clean-css": "4.2.x",
-        "commander": "2.17.x",
-        "he": "1.2.x",
-        "param-case": "2.1.x",
-        "relateurl": "0.2.x",
-        "uglify-js": "3.4.x"
-      },
-      "bin": {
-        "html-minifier": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/html-minifier/node_modules/commander": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
-      "dev": true
-    },
-    "node_modules/htmlparser2": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
-      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
-      "dev": true,
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "entities": "^4.4.0"
-      }
-    },
-    "node_modules/http-cache-semantics": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
-    },
-    "node_modules/http-deceiver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
-      "dev": true
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dev": true,
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/http-errors/node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/http-parser-js": {
-      "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
-      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
-      "dev": true
-    },
-    "node_modules/http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dev": true,
-      "dependencies": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/http-proxy-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
-      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/http-proxy-middleware": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
-      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
-      "dev": true,
-      "dependencies": {
-        "@types/http-proxy": "^1.17.8",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "is-plain-obj": "^3.0.0",
-        "micromatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "@types/express": "^4.17.13"
-      },
-      "peerDependenciesMeta": {
-        "@types/express": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/http-signature": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
-      "dev": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
-      },
-      "engines": {
-        "node": ">=0.8",
-        "npm": ">=1.3.7"
-      }
-    },
-    "node_modules/http2": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/http2/-/http2-3.3.7.tgz",
-      "integrity": "sha512-puSi8M8WNlFJm9Pk4c/Mbz9Gwparuj3gO9/RRO5zv6piQ0FY+9Qywp0PdWshYgsMJSalixFY7eC6oPu0zRxLAQ==",
-      "deprecated": "Use the built-in module in node 9.0.0 or newer, instead",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0 <9.0.0"
-      }
-    },
-    "node_modules/https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
-      "dependencies": {
-        "agent-base": "^7.0.2",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/husky": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
-      "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==",
-      "dev": true,
-      "bin": {
-        "husky": "lib/bin.js"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/typicode"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "devOptional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/ignore-walk": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-6.0.5.tgz",
-      "integrity": "sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==",
-      "dependencies": {
-        "minimatch": "^9.0.0"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "image-size": "bin/image-size.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
-    },
-    "node_modules/immutable": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
-      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
-      "dev": true
-    },
-    "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/import-fresh/node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "devOptional": true,
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "node_modules/ini": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.2.tgz",
-      "integrity": "sha512-AMB1mvwR1pyBFY/nSevUX6y8nJWS63/SzUKD3JyQn97s4xgIdgQPT75IRouIiBAN4yLQBUShNYVW0+UG25daCw==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/inquirer": {
-      "version": "9.2.15",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.15.tgz",
-      "integrity": "sha512-vI2w4zl/mDluHt9YEQ/543VTCwPKWiHzKtm9dM2V0NdFcqEexDAjUHzO1oA60HRNaVifGXXM1tRRNluLVHa0Kg==",
-      "dependencies": {
-        "@ljharb/through": "^2.3.12",
-        "ansi-escapes": "^4.3.2",
-        "chalk": "^5.3.0",
-        "cli-cursor": "^3.1.0",
-        "cli-width": "^4.1.0",
-        "external-editor": "^3.1.0",
-        "figures": "^3.2.0",
-        "lodash": "^4.17.21",
-        "mute-stream": "1.0.0",
-        "ora": "^5.4.1",
-        "run-async": "^3.0.0",
-        "rxjs": "^7.8.1",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^6.2.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/inquirer/node_modules/chalk": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/inquirer/node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/internal-slot": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
-      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
-      "dev": true,
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "hasown": "^2.0.0",
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/interpret": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
-      "integrity": "sha512-CLM8SNMDu7C5psFCn6Wg/tgpj/bKAg7hc2gWqcuR9OD5Ft9PhBpIu8PLicPeis+xDd6YX2ncI8MCA64I9tftIA==",
-      "dev": true
-    },
-    "node_modules/ip": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-      "dev": true
-    },
-    "node_modules/ip-address": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
-      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
-      "dependencies": {
-        "jsbn": "1.1.0",
-        "sprintf-js": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/ip-address/node_modules/sprintf-js": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
-      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
-    },
-    "node_modules/ipaddr.js": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
-      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/is-absolute": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
-      "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
-      "dev": true,
-      "dependencies": {
-        "is-relative": "^1.0.0",
-        "is-windows": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-accessor-descriptor": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.1.tgz",
-      "integrity": "sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==",
-      "dev": true,
-      "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/is-array-buffer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
-      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
-    },
-    "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-      "dev": true,
-      "dependencies": {
-        "has-bigints": "^1.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "devOptional": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
-    "node_modules/is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-data-descriptor": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.1.tgz",
-      "integrity": "sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==",
-      "dev": true,
-      "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/is-data-view": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
-      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
-      "dev": true,
-      "dependencies": {
-        "is-typed-array": "^1.1.13"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-descriptor": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.7.tgz",
-      "integrity": "sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==",
-      "dev": true,
-      "dependencies": {
-        "is-accessor-descriptor": "^1.0.1",
-        "is-data-descriptor": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-expression": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz",
-      "integrity": "sha512-vyMeQMq+AiH5uUnoBfMTwf18tO3bM6k1QXBE9D6ueAAquEfCZe3AJPtud9g6qS0+4X8xA7ndpZiDyeb2l2qOBw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "acorn": "~4.0.2",
-        "object-assign": "^4.0.1"
-      }
-    },
-    "node_modules/is-expression/node_modules/acorn": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-      "integrity": "sha512-fu2ygVGuMmlzG8ZeRJ0bvR41nsAkxxhbyk8bZ1SS521Z7vmgJFTQQlfz/Mp/nJexGBz+v8sC9bM6+lNgskt4Ug==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "devOptional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "devOptional": true,
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-interactive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
-      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-lambda": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ=="
-    },
-    "node_modules/is-negative-zero": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
-      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "devOptional": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-      "dev": true,
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-obj": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-path-cwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
-      "integrity": "sha512-cnS56eR9SPAscL77ik76ATVqoPARTqPIVkMDVxRaWH06zT+6+CzIroYRJ0VVvm0Z1zfAvxvz9i/D3Ppjaqt5Nw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-path-in-cwd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz",
-      "integrity": "sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==",
-      "dev": true,
-      "dependencies": {
-        "is-path-inside": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-path-in-cwd/node_modules/is-path-inside": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz",
-      "integrity": "sha512-qhsCR/Esx4U4hg/9I19OVUAJkGWtjRYHMRgUMZE2TDdj+Ag+kttZanLupfddNyglzz50cUlmWzUaI37GDfNx/g==",
-      "dev": true,
-      "dependencies": {
-        "path-is-inside": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-relative": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
-      "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
-      "dev": true,
-      "dependencies": {
-        "is-unc-path": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-shared-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-      "dev": true,
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-symbol": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-      "dev": true,
-      "dependencies": {
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-text-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
-      "integrity": "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==",
-      "dev": true,
-      "dependencies": {
-        "text-extensions": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
-      "dev": true,
-      "dependencies": {
-        "which-typed-array": "^1.1.14"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "dev": true
-    },
-    "node_modules/is-unc-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
-      "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
-      "dev": true,
-      "dependencies": {
-        "unc-path-regex": "^0.1.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-unicode-supported": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
-      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-weakref": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-what": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "dev": true
-    },
-    "node_modules/is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
-    },
-    "node_modules/isbinaryfile": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
-      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/gjtorikian/"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-    },
-    "node_modules/isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-      "dev": true
-    },
-    "node_modules/istanbul-lib-coverage": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
-      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-instrument": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@babel/parser": "^7.14.7",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.2.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-instrument/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/istanbul-lib-report": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
-      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
-      "dev": true,
-      "dependencies": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "make-dir": "^4.0.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-report/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-report/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz",
-      "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "rimraf": "^2.6.3",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/istanbul-lib-coverage": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-      "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/istanbul-reports": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
-      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
-      "dev": true,
-      "dependencies": {
-        "html-escaper": "^2.0.0",
-        "istanbul-lib-report": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jackspeak": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.2.3.tgz",
-      "integrity": "sha512-htOzIMPbpLid/Gq9/zaz9SfExABxqRe1sSCdxntlO/aMD6u0issZQiY25n2GKQUtJ02j7z5sfptlAOMpWWOmvw==",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/jake": {
-      "version": "10.9.1",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz",
-      "integrity": "sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==",
-      "dev": true,
-      "dependencies": {
-        "async": "^3.2.3",
-        "chalk": "^4.0.2",
-        "filelist": "^1.0.4",
-        "minimatch": "^3.1.2"
-      },
-      "bin": {
-        "jake": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jake/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jake/node_modules/async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
-      "dev": true
-    },
-    "node_modules/jake/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/jake/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jake/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/jake/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/jake/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jake/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/jake/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jasmine": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.8.0.tgz",
-      "integrity": "sha512-KbdGQTf5jbZgltoHs31XGiChAPumMSY64OZMWLNYnEnMfG5uwGBhffePwuskexjT+/Jea/gU3qAU8344hNohSw==",
-      "dev": true,
-      "dependencies": {
-        "exit": "^0.1.2",
-        "glob": "^7.0.6",
-        "jasmine-core": "~2.8.0"
-      },
-      "bin": {
-        "jasmine": "bin/jasmine.js"
-      }
-    },
-    "node_modules/jasmine-core": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.1.1.tgz",
-      "integrity": "sha512-lmUfT5XcK9KKvt3lLYzn93hc4MGzlUBowExFVgzbSW0ZCrdeyS574dfsyfRhxbg81Wj4gk+RxUiTnj7KBfDA1g==",
-      "dev": true
-    },
-    "node_modules/jasmine-spec-reporter": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/jasmine-spec-reporter/-/jasmine-spec-reporter-5.0.2.tgz",
-      "integrity": "sha512-6gP1LbVgJ+d7PKksQBc2H0oDGNRQI3gKUsWlswKaQ2fif9X5gzhQcgM5+kiJGCQVurOG09jqNhk7payggyp5+g==",
-      "dev": true,
-      "dependencies": {
-        "colors": "1.4.0"
-      }
-    },
-    "node_modules/jasmine-spec-reporter/node_modules/colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
-    "node_modules/jasmine/node_modules/jasmine-core": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.8.0.tgz",
-      "integrity": "sha512-SNkOkS+/jMZvLhuSx1fjhcNWUC/KG6oVyFUGkSBEr9n1axSNduWU8GlI7suaHXr4yxjet6KjrUZxUTE5WzzWwQ==",
-      "dev": true
-    },
-    "node_modules/jasminewd2": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/jasminewd2/-/jasminewd2-2.2.0.tgz",
-      "integrity": "sha512-Rn0nZe4rfDhzA63Al3ZGh0E+JTmM6ESZYXJGKuqKGZObsAB9fwXPD03GjtIEvJBDOhN94T5MzbwZSqzFHSQPzg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6.9.x"
-      }
-    },
-    "node_modules/jest-diff": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
-      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^29.6.3",
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-diff/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-diff/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jest-diff/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/jest-diff/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/jest-diff/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-diff/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-get-type": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
-      "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
-      "dev": true,
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-worker": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/jest-worker/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-worker/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
-    "node_modules/jiti": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
-      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
-      "dev": true,
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/jquery": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.1.4.tgz",
-      "integrity": "sha512-wWR+eCq/T/Qt0NcFyM+QVho0ZVzWxFYANijmSMImXiM5mjr1aOaf4SF0eOEPc92bbK2L2vDpxw3lIszus7eO8Q=="
-    },
-    "node_modules/js-base64": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
-    },
-    "node_modules/js-stringify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
-    },
-    "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jsbn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
-      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
-    },
-    "node_modules/jsdoc-type-pratt-parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-3.1.0.tgz",
-      "integrity": "sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.0.0"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jshint": {
-      "version": "2.9.7",
-      "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.9.7.tgz",
-      "integrity": "sha512-Q8XN38hGsVQhdlM+4gd1Xl7OB1VieSuCJf+fEJjpo59JH99bVJhXRXAh26qQ15wfdd1VPMuDWNeSWoNl53T4YA==",
-      "dev": true,
-      "dependencies": {
-        "cli": "~1.0.0",
-        "console-browserify": "1.1.x",
-        "exit": "0.1.x",
-        "htmlparser2": "3.8.x",
-        "lodash": "~4.17.10",
-        "minimatch": "~3.0.2",
-        "shelljs": "0.3.x",
-        "strip-json-comments": "1.0.x"
+        "node": ">= 10.0.0"
       },
-      "bin": {
-        "jshint": "bin/jshint"
-      }
-    },
-    "node_modules/jshint/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/jshint/node_modules/dom-serializer": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "entities": "^2.0.0"
-      }
-    },
-    "node_modules/jshint/node_modules/dom-serializer/node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/jshint/node_modules/dom-serializer/node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true,
       "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/jshint/node_modules/domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
-    },
-    "node_modules/jshint/node_modules/domhandler": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
-      "integrity": "sha512-q9bUwjfp7Eif8jWxxxPSykdRZAb6GkguBGSgvvCrhI9wB71W2K/Kvv4E61CF/mcCfnVJDeDWx/Vb/uAqbDj6UQ==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "1"
-      }
-    },
-    "node_modules/jshint/node_modules/domutils": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-      "integrity": "sha512-gSu5Oi/I+3wDENBsOWBiRK1eoGxcywYSqg3rR960/+EfY0CF4EX1VPkgHOZ3WiS/Jg2DtliF6BhWcHlfpYUcGw==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
-      }
-    },
-    "node_modules/jshint/node_modules/entities": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
-      "integrity": "sha512-LbLqfXgJMmy81t+7c14mnulFHJ170cM6E+0vMXR9k/ZiZwgX8i5pNgjTCX3SO4VeUsFLV+8InixoretwU+MjBQ==",
-      "dev": true
-    },
-    "node_modules/jshint/node_modules/htmlparser2": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
-      "integrity": "sha512-hBxEg3CYXe+rPIua8ETe7tmG3XDn9B0edOE/e9wH2nLczxzgdu0m0aNHY+5wFZiviLWLdANPJTssa92dMcXQ5Q==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "1",
-        "domhandler": "2.3",
-        "domutils": "1.5",
-        "entities": "1.0",
-        "readable-stream": "1.1"
-      }
-    },
-    "node_modules/jshint/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
-      "dev": true
-    },
-    "node_modules/jshint/node_modules/minimatch": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
-      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/jshint/node_modules/readable-stream": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-      "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.1",
-        "isarray": "0.0.1",
-        "string_decoder": "~0.10.x"
-      }
-    },
-    "node_modules/jshint/node_modules/string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
-      "dev": true
-    },
-    "node_modules/jshint/node_modules/strip-json-comments": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-      "integrity": "sha512-AOPG8EBc5wAikaG1/7uFCNFJwnKOuQwFTpYBdTW6OvWHeZBQBrAA/amefHGrEiOnCPcLFZK6FUPtWVKpQVIRgg==",
-      "dev": true,
-      "bin": {
-        "strip-json-comments": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/json-buffer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
-    },
-    "node_modules/json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
-      "integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/json-schema": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "dev": true
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/json-stable-stringify-without-jsonify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true
-    },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jsonc-parser": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
-      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA=="
-    },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
       },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jsonparse": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
-      "engines": [
-        "node >= 0.2.0"
-      ]
-    },
-    "node_modules/JSONStream": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
-      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "jsonparse": "^1.2.0",
-        "through": ">=2.2.7 <3"
-      },
-      "bin": {
-        "JSONStream": "bin.js"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": "*"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jsprim": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
-      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "dependencies": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.4.0",
-        "verror": "1.10.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=0.6.0"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jstransformer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
-      "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "is-promise": "^2.0.0",
-        "promise": "^7.0.1"
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jszip": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
-      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "lie": "~3.3.0",
-        "pako": "~1.0.2",
-        "readable-stream": "~2.3.6",
-        "setimmediate": "^1.0.5"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jszip/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/jszip/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jszip/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/karma": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.3.tgz",
-      "integrity": "sha512-LuucC/RE92tJ8mlCwqEoRWXP38UMAqpnq98vktmS9SznSoUPPUJQbc91dHcxcunROvfQjdORVA/YFviH+Xci9Q==",
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@colors/colors": "1.5.0",
-        "body-parser": "^1.19.0",
-        "braces": "^3.0.2",
-        "chokidar": "^3.5.1",
-        "connect": "^3.7.0",
-        "di": "^0.0.1",
-        "dom-serialize": "^2.2.1",
-        "glob": "^7.1.7",
-        "graceful-fs": "^4.2.6",
-        "http-proxy": "^1.18.1",
-        "isbinaryfile": "^4.0.8",
-        "lodash": "^4.17.21",
-        "log4js": "^6.4.1",
-        "mime": "^2.5.2",
-        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.5",
-        "qjobs": "^1.2.0",
-        "range-parser": "^1.2.1",
-        "rimraf": "^3.0.2",
-        "socket.io": "^4.7.2",
-        "source-map": "^0.6.1",
-        "tmp": "^0.2.1",
-        "ua-parser-js": "^0.7.30",
-        "yargs": "^16.1.1"
-      },
-      "bin": {
-        "karma": "bin/karma"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/karma-chrome-launcher": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz",
-      "integrity": "sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==",
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "which": "^1.2.1"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/karma-chrome-launcher/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
       },
-      "bin": {
-        "which": "bin/which"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/karma-coverage-istanbul-reporter": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-3.0.3.tgz",
-      "integrity": "sha512-wE4VFhG/QZv2Y4CdAYWDbMmcAHeS926ZIji4z+FkB2aF/EposRb6DP6G5ncT/wXhqUfAb/d7kZrNKPonbvsATw==",
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^3.0.6",
-        "istanbul-reports": "^3.0.2",
-        "minimatch": "^3.0.4"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/mattlewis92"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/karma-coverage-istanbul-reporter/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/@parcel/watcher/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/karma-coverage-istanbul-reporter/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/@pkgr/core": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.3.6.tgz",
+      "integrity": "sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==",
       "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
+      "license": "MIT",
       "engines": {
-        "node": "*"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
       }
     },
-    "node_modules/karma-jasmine": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-4.0.2.tgz",
-      "integrity": "sha512-ggi84RMNQffSDmWSyyt4zxzh2CQGwsxvYYsprgyR1j8ikzIduEdOlcLvXjZGwXG/0j41KUXOWsUCBfbEHPWP9g==",
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.61.1.tgz",
+      "integrity": "sha512-JnBB8MdXj45cajvTuO5FmPlvFVJRQgvrz1uSEl3NwqFnReAPGwb8EanbGi4z2nRaqLzjJSv5/JmycoTKlRZxHA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.61.1.tgz",
+      "integrity": "sha512-Jx2g7iSjw4AOT0HDPHM9RV3GNjRXwybWtSFZiZAYUTjUwjVrYIwq3kBf+LnhqJlzXFAqTAh2F7IGI+O568exPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.61.1.tgz",
+      "integrity": "sha512-0F1L/Z3Eqv8mT2n3dCpeO8GcTvHvVqkP5/t6DMsn0KzhYVcg+s7Ncl5DS8qjKYEeio6Az0Gt6nyBORay5qIlCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.61.1.tgz",
+      "integrity": "sha512-qLttcH871ujY4YcVfUSShhOw+CsoTatYz8gRbHO7Bb92QH059/P0y5do1KMs41fY0BpD2x4AJH/gID0zFiqVKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.61.1.tgz",
+      "integrity": "sha512-fUI4RapGE0Oh3mb8mgfvC1O2nU1RpDZUKnDQm3xB1Ipg7C2wTs5Kstz7G2uWK99a8S2yTMq8/P4uycwNa0nJyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.61.1.tgz",
+      "integrity": "sha512-H5YrdvJaDtI/U9/emrD4b++xkvp3y/JvOe4rizHbxvkyMfRS/CiRYdji+Pl8D0brEaNFWUh1drQxgAGIl6Xudw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.61.1.tgz",
+      "integrity": "sha512-Q8CBCCQtDFrYtXoeUXSrnFXKOnyUhx6bz+SkL6A0E7V8kAiCJ5pamq1WtbfpVGhR5TSpXY6ak3avmDc5fHTyJA==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "dependencies": {
-        "jasmine-core": "^3.6.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "peerDependencies": {
-        "karma": "*"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma-jasmine-html-reporter": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
-      "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.61.1.tgz",
+      "integrity": "sha512-nwnhk1581l0FBVellGcVCAT0Oi06onEA3WB53sf01VO3I0UPBkMH9sXONYME2K0ovXcNayJfNtHfm6mpJElatQ==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "peerDependencies": {
-        "jasmine-core": ">=3.8",
-        "karma": ">=0.9",
-        "karma-jasmine": ">=1.1"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma-jasmine/node_modules/jasmine-core": {
-      "version": "3.99.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.1.tgz",
-      "integrity": "sha512-Hu1dmuoGcZ7AfyynN3LsfruwMbxMALMka+YtZeGoLuDEySVmVAPaonkNoBRIw/ectu8b9tVQCJNgp4a4knp+tg==",
-      "dev": true
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.2.tgz",
+      "integrity": "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma-source-map-support": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
-      "integrity": "sha512-RsBECncGO17KAoJCYXjv+ckIz+Ii9NCi+9enk+rq6XC81ezYkb4/RHE6CTXdA7IOJqoF3wcaLfVG0CPmE5ca6A==",
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.61.1.tgz",
+      "integrity": "sha512-unMS3H73DpaoPyyEVPjGKleM/s0mkmsauTENpw4INQY8y4+IuLNjkueQ5QCtC0D3N38Y38yhAU8OoZ20S2Tm6w==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "source-map-support": "^0.5.5"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.61.1.tgz",
+      "integrity": "sha512-zNZzGRnAhwjFEYmvphJRV5XaQGjs62cCmeYYHUT//NbvEnHauw+I85nGG+SiVg5ld4GX8D1IbKIX+ozITQnhMQ==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.61.1.tgz",
+      "integrity": "sha512-LdpWGL8X209B2SIvWjqlc8VZgM6PKfontSerGepuldQmHYrAOtnMCXeJkxXGbC+PPZVOuu5czJo7fNV6aeW8rQ==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.61.1.tgz",
+      "integrity": "sha512-EC5kTtNaNGOmbMGqar8dvJy6y/hg99GAwjfBz++pxZhQATXGcRjd6c5en5wcbru0vkRmiMGsQKdMJOOf6sza4g==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.61.1.tgz",
+      "integrity": "sha512-8hiwp6D4acEcNK78I4rP0/XtS1sknWIAMJBPdR4l6zUtyTm5KiTDr5bXmWt4foY7nAN7AThDHgkLIEZOWKbzWw==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/karma/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.61.1.tgz",
+      "integrity": "sha512-10dh/h/BqA7DuMPWSxkR8uks18FRwnwOEqr5zOTEl+NOwP/OMzKX8OFR/Of9xxDA7D5qef1Nzar5WDD2kCCr1g==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.61.1.tgz",
+      "integrity": "sha512-YKJ5lg35DP17gcAOggnihe+APw9HLyj1Xn7gsmGumBJAUDa6NGXNixJzmkWLhcK9TOuuyQjdamzvJefkO7qHZQ==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.61.1.tgz",
+      "integrity": "sha512-Mlil5G2Jj6a7B3LWGctg+XPL9vdXYuzCtNXfxOQ0nPjc2m6ueUktocPGH9bnAM0bNRKb/bAWTujUU7IJQdQA+g==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.2.tgz",
+      "integrity": "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/yargs": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.61.1.tgz",
+      "integrity": "sha512-qy5pBvZbqNFheBz61R1rzsezjm0J7O2oNGoWtGoY89SZYLUfxAJTBAqDChqAIdB4rCiIbi9nF7yZ83GnNiLwSw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "cliui": "^7.0.2",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/karma/node_modules/yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.61.1.tgz",
+      "integrity": "sha512-E83TXjI4zm0+5f2qO+UOudaCYIhYwpJ5jq6YCZNIZ+6CbfhKrkAGezeiASBL9ElxAxFsRS9ZhESv8mfnj6TKeg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
     },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.61.1.tgz",
+      "integrity": "sha512-fbWnKqVkjrJN38vNe3ahkbk6iejS/3b0Nt7EEtPpE6RBacZcGXNKbzfHN3GUUlXOPghUg0j6XUGrtjX9z1sIvA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "json-buffer": "3.0.1"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
     },
-    "node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.61.1.tgz",
+      "integrity": "sha512-ArMl38iVAbk0New1ogihQNY6iphLi4ZaRsa037gUzv5yeKPY8TD3Dmy4x2RNC1VztU/uqm+G+/RwFrSka3Oy2g==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/klona": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.61.1.tgz",
+      "integrity": "sha512-0mYtjHS9ucAbcATycCNK9IGBk/cCe/ma7EmSLGZdsxnOA8cjRIyU04wDpVAD9NiOfLUR9KTxdiO53uOkherqjQ==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/launch-editor": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz",
-      "integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.61.1.tgz",
+      "integrity": "sha512-gK1iCEPfpoSG9wfBihXxvBMi8ZfcWffYkEsC/Eih+iFENTaewvNcrEQ69lIOWYO5pePHKLHHO7nq5AILGO/HQQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "picocolors": "^1.0.0",
-        "shell-quote": "^1.8.1"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/lazy-cache": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
-      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.61.1.tgz",
+      "integrity": "sha512-X+zaP2x+j4RXGfbp/seSoRHWnPxzApilDszisZxbYH5C/jTxFhCtDNdPGZb9lJyYPs24wGxruPF7Y+sIXt9Gzw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/less": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
-      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+    "node_modules/@scarf/scarf": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.4.0.tgz",
+      "integrity": "sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@schematics/angular": {
+      "version": "22.0.9",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-22.0.9.tgz",
+      "integrity": "sha512-moQI3UnqUt6GZ81ykxJRUbf+IpM6SDFRyMMj6A2VNSiUGVpSAETNFIuTk/6YDzNG8yhMN9zOICeBwvvPH0ylbA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "copy-anything": "^2.0.1",
-        "parse-node-version": "^1.0.1",
-        "tslib": "^2.3.0"
-      },
-      "bin": {
-        "lessc": "bin/lessc"
+        "@angular-devkit/core": "22.0.9",
+        "@angular-devkit/schematics": "22.0.9",
+        "jsonc-parser": "3.3.1",
+        "typescript": "6.0.3"
       },
       "engines": {
-        "node": ">=6"
-      },
-      "optionalDependencies": {
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "needle": "^3.1.0",
-        "source-map": "~0.6.0"
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/less-loader": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.0.tgz",
-      "integrity": "sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==",
-      "dev": true,
+    "node_modules/@sentry/angular": {
+      "version": "10.61.0",
+      "resolved": "https://registry.npmjs.org/@sentry/angular/-/angular-10.61.0.tgz",
+      "integrity": "sha512-fmGmFKLPpJeaY2oCsZAM+p5Xzz0u+ex3puayRItiUSFMEuOT9fxkwd5gyJjJlEqPuQAqMo7Kh4y3lPQFQWoxeg==",
+      "license": "MIT",
       "dependencies": {
-        "klona": "^2.0.4"
+        "@sentry/browser": "10.61.0",
+        "@sentry/core": "10.61.0",
+        "tslib": "^2.4.1"
       },
       "engines": {
-        "node": ">= 14.15.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "less": "^3.5.0 || ^4.0.0",
-        "webpack": "^5.0.0"
+        "@angular/common": ">= 14.x <= 22.x",
+        "@angular/core": ">= 14.x <= 22.x",
+        "@angular/router": ">= 14.x <= 22.x",
+        "rxjs": "^6.5.5 || ^7.x"
       }
     },
-    "node_modules/less/node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/@sentry/browser": {
+      "version": "10.61.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.61.0.tgz",
+      "integrity": "sha512-I02k3/tpCbQ+Dm3d1eA+JHVS452gY4fCTh+fT3FcfZkovB/WaeJcwc+ywQN1jpTYBRKZ1HbXXZQhEhXYvb8MkA==",
+      "license": "MIT",
       "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
+        "@sentry/browser-utils": "10.61.0",
+        "@sentry/core": "10.61.0",
+        "@sentry/feedback": "10.61.0",
+        "@sentry/replay": "10.61.0",
+        "@sentry/replay-canvas": "10.61.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       }
     },
-    "node_modules/less/node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "mime": "cli.js"
+    "node_modules/@sentry/browser-utils": {
+      "version": "10.61.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser-utils/-/browser-utils-10.61.0.tgz",
+      "integrity": "sha512-kj/Qs5hz/VQPOLesgv9wq8O1z3aKSHSkyFiCSzaOthb8ARISchk8Eiukbvw9GxX2gmgsCd0L35gD6gxnhlE9ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "10.61.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=18"
       }
     },
-    "node_modules/less/node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
+    "node_modules/@sentry/cli": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-3.5.1.tgz",
+      "integrity": "sha512-h710aEXT8At4lg7GbXDZkatDDq0uA5QKZmSiF/8Hy6jJZ/9dh6EBDZZpTYnDpNrwRvE8tqhnwEjTZDlHjOhPNQ==",
+      "hasInstallScript": true,
+      "license": "FSL-1.1-MIT",
+      "dependencies": {
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "undici": "^6.22.0",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "sentry-cli": "bin/sentry-cli"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "optionalDependencies": {
+        "@sentry/cli-darwin": "3.5.1",
+        "@sentry/cli-linux-arm": "3.5.1",
+        "@sentry/cli-linux-arm64": "3.5.1",
+        "@sentry/cli-linux-i686": "3.5.1",
+        "@sentry/cli-linux-x64": "3.5.1",
+        "@sentry/cli-win32-arm64": "3.5.1",
+        "@sentry/cli-win32-i686": "3.5.1",
+        "@sentry/cli-win32-x64": "3.5.1"
+      }
+    },
+    "node_modules/@sentry/cli-darwin": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-3.5.1.tgz",
+      "integrity": "sha512-GxHAtZaXRA650egcepQXU0pR0dZ8ZNvQS8eq3wBxhCK8os5VQpLyBABIaN6AdrE/b8M7UvqGjsuVm0giI1GZ7w==",
+      "license": "FSL-1.1-MIT",
       "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       }
     },
-    "node_modules/less/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
+    "node_modules/@sentry/cli-linux-arm": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-3.5.1.tgz",
+      "integrity": "sha512-JOfgXCDZKbxQpw8Z4Kbkt8Hl+ASW5pYVUYw8Hc2msPN3HtfTmsc1z0y6jq3TCUWDWbWpWbI1zfXa0v02vQf3gw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "FSL-1.1-MIT",
       "optional": true,
-      "bin": {
-        "semver": "bin/semver"
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/less/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+    "node_modules/@sentry/cli-linux-arm64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-3.5.1.tgz",
+      "integrity": "sha512-Qa0NLXG/FSYWGhKjdm2mxp/GgpluFFkj/J+CpmVzwvezNC/Uy1omquv7J+VficqskNYuptjsoB4dNIPPcXpbxg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "FSL-1.1-MIT",
       "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
       }
     },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-      "dev": true,
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
+    "node_modules/@sentry/cli-linux-i686": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-3.5.1.tgz",
+      "integrity": "sha512-/Bqcl8EyS6T8RIjBeeMYUPgjMJ8kb4plF0w3QOG6TY+bUEqHEnZyfzKJWZY/OqhmrSgj+ZYynaSHIIR6dWluMA==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">=18"
       }
     },
-    "node_modules/license-webpack-plugin": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-4.0.2.tgz",
-      "integrity": "sha512-771TFWFD70G1wLTC4oU2Cw4qvtmNrIw+wRvBtn+okgHl7slJVi7zfNcdmqDL72BojM30VNJ2UHylr1o77U37Jw==",
-      "dev": true,
-      "dependencies": {
-        "webpack-sources": "^3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "webpack": {
-          "optional": true
-        },
-        "webpack-sources": {
-          "optional": true
-        }
+    "node_modules/@sentry/cli-linux-x64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-3.5.1.tgz",
+      "integrity": "sha512-iUJT2GI/soc0myi1sSnXdu71oBkUER3fBeXn10bcEZX+UK9GomsqL40OLlygDipZZ6FqhODORqLeTxHdHbRuOw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/lie": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "dev": true,
-      "dependencies": {
-        "immediate": "~3.0.5"
+    "node_modules/@sentry/cli-win32-arm64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-3.5.1.tgz",
+      "integrity": "sha512-Hs4jHOsTKrrI2W8c4wEIvQzSuHqvrjsDHT7iwujHjp4oeAOnYjBUm+/BgDH2Eg1/jL5ilEnJbpnAn2AE2KQUXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/liftup": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/liftup/-/liftup-3.0.1.tgz",
-      "integrity": "sha512-yRHaiQDizWSzoXk3APcA71eOI/UuhEkNN9DiW2Tt44mhYzX4joFoCZlxsSOF7RyeLlfqzFLQI1ngFq3ggMPhOw==",
-      "dev": true,
-      "dependencies": {
-        "extend": "^3.0.2",
-        "findup-sync": "^4.0.0",
-        "fined": "^1.2.0",
-        "flagged-respawn": "^1.0.1",
-        "is-plain-object": "^2.0.4",
-        "object.map": "^1.0.1",
-        "rechoir": "^0.7.0",
-        "resolve": "^1.19.0"
-      },
+    "node_modules/@sentry/cli-win32-i686": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-3.5.1.tgz",
+      "integrity": "sha512-Op+9MYAg0RbVWOQ9/NtFunWcknS8MlqhEa03ENFUrRDQE0m+iHioknGOagKrNXYXj1UbGEf0G9UzIMcRwB/UCQ==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
-    "node_modules/liftup/node_modules/findup-sync": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
-      "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
-      "dev": true,
-      "dependencies": {
-        "detect-file": "^1.0.0",
-        "is-glob": "^4.0.0",
-        "micromatch": "^4.0.2",
-        "resolve-dir": "^1.0.1"
-      },
+    "node_modules/@sentry/cli-win32-x64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-3.5.1.tgz",
+      "integrity": "sha512-Vf+CtFPkuGzjddD6dJoAVKszw5QB7P1ffc++yAbU54ditqJdgswo45oyTFOiQFO2isCmhgICzimqe8SkU+p2Mw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 8"
+        "node": ">=18"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
+    "node_modules/@sentry/core": {
+      "version": "10.61.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.61.0.tgz",
+      "integrity": "sha512-Edg8t2w45qEKiFnjeA6zRmU47R6la5FEMG+maZEOB2oTyJ+ujmh8LGaZ3G8aC0VdkKn8CXhHtDesze6oDc1oTA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.4.tgz",
-      "integrity": "sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==",
-      "dev": true,
+    "node_modules/@sentry/feedback": {
+      "version": "10.61.0",
+      "resolved": "https://registry.npmjs.org/@sentry/feedback/-/feedback-10.61.0.tgz",
+      "integrity": "sha512-DvG5pc2BibQjdvFC75u1S5DzghcFZ/juCDb2UnRKjiWnNhiUUAweAkUv4mMednrbuOeGOgO2R3CaiqIvDrAUAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "10.61.0"
+      },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/livereload-js": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.4.0.tgz",
-      "integrity": "sha512-XPQH8Z2GDP/Hwz2PCDrh2mth4yFejwA1OZ/81Ti3LgKyhDcEjsSsqFWZojHG0va/duGd+WyosY7eXLDoOyqcPw==",
-      "dev": true
-    },
-    "node_modules/load-grunt-tasks": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/load-grunt-tasks/-/load-grunt-tasks-5.1.0.tgz",
-      "integrity": "sha512-oNj0Jlka1TsfDe+9He0kcA1cRln+TMoTsEByW7ij6kyktNLxBKJtslCFEvFrLC2Dj0S19IWJh3fOCIjLby2Xrg==",
-      "dev": true,
+    "node_modules/@sentry/replay": {
+      "version": "10.61.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-10.61.0.tgz",
+      "integrity": "sha512-EkLaPR7A89mRGucZY9WxKLGeiRKMuNeGfIthLrs9cumUP8Smc80qxSAsF3NggRHSQEeYHDAifY/1q1qW16yvJg==",
+      "license": "MIT",
       "dependencies": {
-        "arrify": "^2.0.1",
-        "multimatch": "^4.0.0",
-        "pkg-up": "^3.1.0",
-        "resolve-pkg": "^2.0.0"
+        "@sentry/browser-utils": "10.61.0",
+        "@sentry/core": "10.61.0"
       },
       "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "grunt": ">=1"
+        "node": ">=18"
       }
     },
-    "node_modules/load-json-file": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-      "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
-      "dev": true,
+    "node_modules/@sentry/replay-canvas": {
+      "version": "10.61.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay-canvas/-/replay-canvas-10.61.0.tgz",
+      "integrity": "sha512-n6QUN+qylEdKLcijpJsJ58ekY58kg0nG0dKxkD2wecKubl7B1mj/gwP35NmJOZ35vJTk/KbJeWB//finspJqYg==",
+      "license": "MIT",
       "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^4.0.0",
-        "pify": "^3.0.0",
-        "strip-bom": "^3.0.0"
+        "@sentry/core": "10.61.0",
+        "@sentry/replay": "10.61.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=18"
       }
     },
-    "node_modules/load-json-file/node_modules/parse-json": {
+    "node_modules/@sigstore/bundle": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+      "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-4.0.0.tgz",
+      "integrity": "sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
+        "@sigstore/protobuf-specs": "^0.5.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/loader-runner": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+    "node_modules/@sigstore/core": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@sigstore/core/-/core-3.2.1.tgz",
+      "integrity": "sha512-qRsxPnCrbC/puegGxKuynfnxgLiHqWStrSjxkoB4YKqq3Z3s4cyZyj42ZdWFAEblNP65C+rBH8EuREHIXoi83g==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=6.11.5"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/loader-utils": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
-      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
+    "node_modules/@sigstore/protobuf-specs": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@sigstore/protobuf-specs/-/protobuf-specs-0.5.1.tgz",
+      "integrity": "sha512-/ScWUhhoFasJsSRGTVBwId1loQjjnjAfE4djL6ZhrXRpNCmPTnUKF5Jokd58ILseOMjzET3UrMOtJPS9sYeI0g==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">= 12.13.0"
+        "node": "^18.17.0 || >=20.5.0"
       }
     },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+    "node_modules/@sigstore/sign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@sigstore/sign/-/sign-4.1.1.tgz",
+      "integrity": "sha512-Hf4xglukg0XXQ2RiD5vSoLjdPe8OBUPA8XeVjUObheuDcWdYWrnH/BNmxZCzkAy68MzmNCxXLeurJvs6hcP2OQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "p-locate": "^5.0.0"
+        "@gar/promise-retry": "^1.0.2",
+        "@sigstore/bundle": "^4.0.0",
+        "@sigstore/core": "^3.2.0",
+        "@sigstore/protobuf-specs": "^0.5.0",
+        "make-fetch-happen": "^15.0.4",
+        "proc-log": "^6.1.0"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "node_modules/lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
-      "dev": true
-    },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
-    "node_modules/log-symbols": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
-      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+    "node_modules/@sigstore/tuf": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@sigstore/tuf/-/tuf-4.0.2.tgz",
+      "integrity": "sha512-TCAzTy0xzdP79EnxSjq9KQ3eaR7+FmudLC6eRKknVKZbV7ZNlGLClAAQb/HMNJ5n2OBNk2GT1tEmU0xuPr+SLQ==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "chalk": "^4.1.0",
-        "is-unicode-supported": "^0.1.0"
+        "@sigstore/protobuf-specs": "^0.5.0",
+        "tuf-js": "^4.1.0"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/log-symbols/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/@sigstore/verify": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@sigstore/verify/-/verify-3.1.1.tgz",
+      "integrity": "sha512-qv7+G3J2cc6wwFj3yKvXOamzqhMwSk1ogPGmhpS8iXllcPrJaIIBA+4HbttlHVu1pqWTdmaCH/WE7UOC51kdoA==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "@sigstore/bundle": "^4.0.0",
+        "@sigstore/core": "^3.2.1",
+        "@sigstore/protobuf-specs": "^0.5.0"
       },
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/log-symbols/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+    "node_modules/@simple-libs/child-process-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@simple-libs/child-process-utils/-/child-process-utils-1.0.2.tgz",
+      "integrity": "sha512-/4R8QKnd/8agJynkNdJmNw2MBxuFTRcNFnE5Sg/G+jkSsV8/UBgULMzhizWWW42p8L5H7flImV2ATi79Ove2Tw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "@simple-libs/stream-utils": "^1.2.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/log-symbols/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "url": "https://ko-fi.com/dangreen"
       }
     },
-    "node_modules/log-symbols/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/log-symbols/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+    "node_modules/@simple-libs/stream-utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@simple-libs/stream-utils/-/stream-utils-1.2.0.tgz",
+      "integrity": "sha512-KxXvfapcixpz6rVEB6HPjOUZT22yN6v0vI0urQSk1L8MlEWPDFCZkhw2xmkyoTGYeFw7tWTZd7e3lVzRZRN/EA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/log-symbols/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
+        "node": ">=18"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://ko-fi.com/dangreen"
       }
     },
-    "node_modules/log4js": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.9.1.tgz",
-      "integrity": "sha512-1somDdy9sChrr9/f4UlzhdaGfDR2c/SaD2a4T7qEkG4jTS57/B3qmnjLYePwQ8cqWnUHZI0iAKxMBpCZICiZ2g==",
-      "dev": true,
-      "dependencies": {
-        "date-format": "^4.0.14",
-        "debug": "^4.3.4",
-        "flatted": "^3.2.7",
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@swimlane/ngx-charts": {
+      "version": "20.5.0",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-20.5.0.tgz",
+      "integrity": "sha512-PNBIHdu/R3ceD7jnw1uCBVOj4k3T6IxfdW6xsDsglGkZyoWMEEq4tLoEurjLEKzmDtRv9c35kVNOXy0lkOuXeA==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-array": "^3.1.1",
+        "d3-brush": "^3.0.0",
+        "d3-color": "^3.1.0",
+        "d3-ease": "^3.0.1",
+        "d3-format": "^3.1.0",
+        "d3-hierarchy": "^3.1.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-sankey": "^0.12.3",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-time-format": "^3.0.0",
+        "d3-transition": "^3.0.1",
         "rfdc": "^1.3.0",
-        "streamroller": "^3.1.5"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lottie-web": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
-      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
-    },
-    "node_modules/lower-case": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
-      "integrity": "sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==",
-      "dev": true
-    },
-    "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^3.0.2"
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": ">=12.0.0",
+        "@angular/cdk": ">=12.0.0",
+        "@angular/common": ">=12.0.0",
+        "@angular/core": ">=12.0.0",
+        "@angular/forms": ">=12.0.0",
+        "@angular/platform-browser": ">=12.0.0",
+        "@angular/platform-browser-dynamic": ">=12.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.2.tgz",
+      "integrity": "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==",
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "5.21.6",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.2"
       }
     },
-    "node_modules/make-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-      "dev": true,
+    "node_modules/@tailwindcss/node/node_modules/enhanced-resolve": {
+      "version": "5.21.6",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
+      "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
+      "license": "MIT",
       "dependencies": {
-        "semver": "^7.5.3"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+    "node_modules/@tailwindcss/node/node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
     },
-    "node_modules/make-fetch-happen": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-13.0.1.tgz",
-      "integrity": "sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==",
-      "dependencies": {
-        "@npmcli/agent": "^2.0.0",
-        "cacache": "^18.0.0",
-        "http-cache-semantics": "^4.1.1",
-        "is-lambda": "^1.0.1",
-        "minipass": "^7.0.2",
-        "minipass-fetch": "^3.0.0",
-        "minipass-flush": "^1.0.5",
-        "minipass-pipeline": "^1.2.4",
-        "negotiator": "^0.6.3",
-        "proc-log": "^4.2.0",
-        "promise-retry": "^2.0.1",
-        "ssri": "^10.0.0"
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.2.tgz",
+      "integrity": "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
       },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-x64": "4.3.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz",
+      "integrity": "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">= 20"
       }
     },
-    "node_modules/make-fetch-happen/node_modules/proc-log": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
-      "integrity": "sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==",
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz",
+      "integrity": "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": ">= 20"
       }
     },
-    "node_modules/make-iterator": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
-      "integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^6.0.2"
-      },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz",
+      "integrity": "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 20"
       }
     },
-    "node_modules/map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
-      "dev": true,
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz",
+      "integrity": "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 20"
       }
     },
-    "node_modules/map-obj": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
-      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-      "dev": true,
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz",
+      "integrity": "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">= 20"
       }
     },
-    "node_modules/map-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==",
-      "dev": true,
-      "dependencies": {
-        "object-visit": "^1.0.0"
-      },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz",
+      "integrity": "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 20"
       }
     },
-    "node_modules/marked": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-11.2.0.tgz",
-      "integrity": "sha512-HR0m3bvu0jAPYiIvLUUQtdg1g6D247//lvcekpHO1WMvbwDlwSkZAX9Lw4F4YHE1T0HaaNve0tuAWuV1UJ6vtw==",
-      "bin": {
-        "marked": "bin/marked.js"
-      },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz",
+      "integrity": "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 18"
+        "node": ">= 20"
       }
     },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "dev": true,
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz",
+      "integrity": "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 20"
       }
     },
-    "node_modules/memfs": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
-      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
-      "dev": true,
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz",
+      "integrity": "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz",
+      "integrity": "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "fs-monkey": "^1.0.4"
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
       },
       "engines": {
-        "node": ">= 4.0.0"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/memorystream": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
-      "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.10.0"
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/meow": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
-      "integrity": "sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==",
-      "dev": true,
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@types/minimist": "^1.2.0",
-        "camelcase-keys": "^6.2.2",
-        "decamelize-keys": "^1.1.0",
-        "hard-rejection": "^2.1.0",
-        "minimist-options": "4.1.0",
-        "normalize-package-data": "^3.0.0",
-        "read-pkg-up": "^7.0.1",
-        "redent": "^3.0.0",
-        "trim-newlines": "^3.0.0",
-        "type-fest": "^0.18.0",
-        "yargs-parser": "^20.2.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/meow/node_modules/type-fest": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
-      "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
       }
     },
-    "node_modules/meow/node_modules/yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
-      "dev": true
-    },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz",
+      "integrity": "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 8"
+        "node": ">= 20"
       }
     },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "dev": true,
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.2.tgz",
+      "integrity": "sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 20"
       }
     },
-    "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "dev": true,
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.2.tgz",
+      "integrity": "sha512-rjVWYCa7Ngbi5AarT6k8TkxUG3Wl1QKzHdIZVsjZSzf36Jmo2IKZt/NHRAwly8oDkbBOH0YTu+CHuf9jPxMc+g==",
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.3.2",
+        "@tailwindcss/oxide": "4.3.2",
+        "postcss": "^8.5.15",
+        "tailwindcss": "4.3.2"
       }
     },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+    "node_modules/@trivago/prettier-plugin-sort-imports": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-6.0.2.tgz",
+      "integrity": "sha512-3DgfkukFyC/sE/VuYjaUUWoFfuVjPK55vOFDsxD56XXynFMCZDYFogH2l/hDfOsQAm1myoU/1xByJ3tWqtulXA==",
       "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/generator": "^7.28.0",
+        "@babel/parser": "^7.28.0",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.0",
+        "javascript-natural-sort": "^0.7.1",
+        "lodash-es": "^4.17.21",
+        "minimatch": "^9.0.0",
+        "parse-imports-exports": "^0.2.4"
+      },
       "engines": {
-        "node": ">=8.6"
+        "node": ">= 20"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+      "peerDependencies": {
+        "@vue/compiler-sfc": "3.x",
+        "prettier": "2.x - 3.x",
+        "prettier-plugin-ember-template-tag": ">= 2.0.0",
+        "prettier-plugin-svelte": "3.x",
+        "svelte": "4.x || 5.x"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "prettier-plugin-ember-template-tag": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        }
       }
     },
-    "node_modules/mime": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.12.tgz",
+      "integrity": "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
       "dev": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+    "node_modules/@tufjs/canonical-json": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
+      "integrity": "sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+    "node_modules/@tufjs/models": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@tufjs/models/-/models-4.1.0.tgz",
+      "integrity": "sha512-Y8cK9aggNRsqJVaKUlEYs4s7CvQ1b1ta2DVPyAimb0I2qhzjNk+A+mxvll/klL0RlfuIUei8BF7YWiua4kQqww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "mime-db": "1.52.0"
+        "@tufjs/canonical-json": "2.0.0",
+        "minimatch": "^10.1.1"
       },
       "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/mimic-response": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
-      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+    "node_modules/@tufjs/models/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/mini-css-extract-plugin": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz",
-      "integrity": "sha512-/1HDlyFRxWIZPI1ZpgqlZ8jMw/1Dp/dl3P0L1jtZ+zVcHqwPhGwaJwKL00WVgfnBy6PWCde9W65or7IIETImuA==",
+    "node_modules/@tufjs/models/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "schema-utils": "^4.0.0",
-        "tapable": "^2.2.1"
+        "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-      "dev": true
-    },
-    "node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+    "node_modules/@tufjs/models/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "18 || 20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+    "node_modules/@types/canvas-confetti": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.9.0.tgz",
+      "integrity": "sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==",
       "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+      "license": "MIT"
     },
-    "node_modules/minimist-options": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "arrify": "^1.0.1",
-        "is-plain-obj": "^1.1.0",
-        "kind-of": "^6.0.3"
-      },
-      "engines": {
-        "node": ">= 6"
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
       }
     },
-    "node_modules/minimist-options/node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/minimist-options/node_modules/is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minipass-collect": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-2.0.1.tgz",
-      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
+      "license": "MIT",
       "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "@types/d3-selection": "*"
       }
     },
-    "node_modules/minipass-fetch": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-3.0.5.tgz",
-      "integrity": "sha512-2N8elDQAtSnFV0Dk7gt15KHsS0Fyz6CbYZ360h0WTYV1Ty46li3rAXVOQj1THMNLdmrD9Vt5pBPtWtVkpwGBqg==",
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "minipass": "^7.0.3",
-        "minipass-sized": "^1.0.3",
-        "minizlib": "^2.1.2"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      },
-      "optionalDependencies": {
-        "encoding": "^0.1.13"
+        "@types/d3-selection": "*"
       }
     },
-    "node_modules/minipass-flush": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minipass-flush/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
       }
     },
-    "node_modules/minipass-flush/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minipass-json-stream": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz",
-      "integrity": "sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==",
-      "dependencies": {
-        "jsonparse": "^1.3.1",
-        "minipass": "^3.0.0"
-      }
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minipass-json-stream/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/d3-selection": "*"
       }
     },
-    "node_modules/minipass-json-stream/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minipass-pipeline": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
-      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minipass-pipeline/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/d3-dsv": "*"
       }
     },
-    "node_modules/minipass-pipeline/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minipass-sized": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
-      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minipass-sized/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/geojson": "*"
       }
     },
-    "node_modules/minipass-sized/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
+        "@types/d3-color": "*"
       }
     },
-    "node_modules/minizlib/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/minizlib/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/mixin-deep": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
       "dev": true,
-      "dependencies": {
-        "for-in": "^1.0.2",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/mixin-deep/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
       "dev": true,
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
+        "@types/d3-time": "*"
       }
     },
-    "node_modules/moment": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-      "engines": {
-        "node": "*"
-      }
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/morgan": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
-      "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
       "dev": true,
-      "dependencies": {
-        "basic-auth": "~2.0.1",
-        "debug": "2.6.9",
-        "depd": "~2.0.0",
-        "on-finished": "~2.3.0",
-        "on-headers": "~1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/morgan/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
+        "@types/d3-path": "*"
       }
     },
-    "node_modules/morgan/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/mrmime": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
-      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
       "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
+      "license": "MIT"
     },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/multicast-dns": {
-      "version": "7.2.5",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
-      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "dns-packet": "^5.2.2",
-        "thunky": "^1.0.2"
-      },
-      "bin": {
-        "multicast-dns": "cli.js"
+        "@types/d3-selection": "*"
       }
     },
-    "node_modules/multimatch": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
-      "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/minimatch": "^3.0.3",
-        "array-differ": "^3.0.0",
-        "array-union": "^2.1.0",
-        "arrify": "^2.0.1",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
       }
     },
-    "node_modules/multimatch/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
+      "license": "MIT"
     },
-    "node_modules/multimatch/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
+        "@types/trusted-types": "*"
       }
     },
-    "node_modules/mute-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
-      "integrity": "sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "26.0.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.0.1.tgz",
+      "integrity": "sha512-fc3KiUoBt6kie0N9bIW3E47vZsuaMf0PM2AaUpLCLT0s/LvX1nxAim6Fc049cNxODPpGm6qRAuUOB86SkRuPQw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
+        "undici-types": "~8.3.0"
       }
     },
-    "node_modules/nan": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
-      "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==",
-      "optional": true
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "devOptional": true,
+      "license": "MIT"
     },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.62.0.tgz",
+      "integrity": "sha512-o+mpz7EYiMzXoySXiKmzlabIvTVqUuK5yLrAedRPRDA0IpPFMUV1IXt6OqljIxX/kumN6EjUYp41Hqelh6p/Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.62.0",
+        "@typescript-eslint/type-utils": "8.62.0",
+        "@typescript-eslint/utils": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.62.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/nanomatch": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-      "dev": true,
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.62.1.tgz",
+      "integrity": "sha512-sPhE4iHuJDSvoAiec+Ro8JyXw8f0ql13HFR82P99nCm9GwTEKG0KYLvDe6REk8BCXuit6vJAv/Yxg5ABaNS2rA==",
+      "license": "MIT",
       "dependencies": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "fragment-cache": "^0.2.1",
-        "is-windows": "^1.0.2",
-        "kind-of": "^6.0.2",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
+        "@typescript-eslint/scope-manager": "8.62.1",
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/typescript-estree": "8.62.1",
+        "@typescript-eslint/visitor-keys": "8.62.1",
+        "debug": "^4.4.3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/nanomatch/node_modules/define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/project-service": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.62.1.tgz",
+      "integrity": "sha512-yQ3RgY5RkSBpsNS1Bx/JQEcA24FOSdfGktoyprAr5u18390UQdtVcfnEv4nIrIshNnavlVyZBKxQwT1fIAE6cg==",
+      "license": "MIT",
       "dependencies": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
+        "@typescript-eslint/tsconfig-utils": "^8.62.1",
+        "@typescript-eslint/types": "^8.62.1",
+        "debug": "^4.4.3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/nanomatch/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-      "dev": true,
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.62.1.tgz",
+      "integrity": "sha512-r4d249KbQ1SFdpeStvob8Ih6aPPIzfqllPVOtvhve6ZcpuVcYo5/7zUWckKpHE7StASX4kTKZTLf0WQm/wPkcg==",
+      "license": "MIT",
       "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/visitor-keys": "8.62.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/nanomatch/node_modules/is-descriptor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
-      "integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
-      "dev": true,
-      "dependencies": {
-        "is-accessor-descriptor": "^1.0.1",
-        "is-data-descriptor": "^1.0.1"
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.62.1.tgz",
+      "integrity": "sha512-xadytJqX9vJVQ2fdQjkcIVigwaOJNWkpjdLt6cEQ+xPnrI1fkp+/jZE/I97k9KUjqtpd25i0HeyZf3T6dutv2g==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.62.1.tgz",
+      "integrity": "sha512-ooCzJFaf+Hg+uG6fA3NRFGuFjlfNlDhBthbv4ZPU/0elCAFUfnyXUvf/WOpHz/jYwSmvU2GkR2LtyUfy1AxZ1Q==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/nanomatch/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dev": true,
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.62.1.tgz",
+      "integrity": "sha512-xMcW9oP9u7fAMXYs9A65CVmtLQe2r//oXINHfi8HV+oiqhih17sbLdhXr4540YWlgpDKQdY854OL5ZrdCiQsAA==",
+      "license": "MIT",
       "dependencies": {
-        "is-plain-object": "^2.0.4"
+        "@typescript-eslint/project-service": "8.62.1",
+        "@typescript-eslint/tsconfig-utils": "8.62.1",
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/visitor-keys": "8.62.1",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true
-    },
-    "node_modules/needle": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
-      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-      "dev": true,
-      "optional": true,
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.62.1.tgz",
+      "integrity": "sha512-4g3BLxfdTMy8iZG0MaBkadnlRrCJ74cQiFbyEVMrkwIoqdyaXXQM22cotDvrl4x28wgIZ9rEJRoM+mmhSJpJ1g==",
+      "license": "MIT",
       "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "needle": "bin/needle"
+        "@typescript-eslint/types": "8.62.1",
+        "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
-        "node": ">= 4.4.x"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+    "node_modules/@typescript-eslint/parser/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
-    },
-    "node_modules/ng-annotate": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/ng-annotate/-/ng-annotate-1.2.2.tgz",
-      "integrity": "sha512-bExxD+wmtr38NwfFoeAsLqFZvliBPy+H1jz2tZveEoFrmmP4uFmWmMaJSFcO/5Kry6Is1WaXfpXiFQtK0T8tWQ==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "~2.6.4",
-        "alter": "~0.2.0",
-        "convert-source-map": "~1.1.2",
-        "optimist": "~0.6.1",
-        "ordered-ast-traverse": "~1.1.1",
-        "simple-fmt": "~0.1.0",
-        "simple-is": "~0.2.0",
-        "source-map": "~0.5.3",
-        "stable": "~0.1.5",
-        "stringmap": "~0.2.2",
-        "stringset": "~0.2.1",
-        "tryor": "~0.1.2"
-      },
-      "bin": {
-        "ng-annotate": "build/es5/ng-annotate"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/ng-annotate/node_modules/acorn": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.6.4.tgz",
-      "integrity": "sha512-aINieSoQYX0C9uQqJGeC8mnO1T6onBTmtCdxHel6ZP/nBu4mpC03EoDtQUzAAAlUXluWjIvVV9vCuMhmOdRDXQ==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
+    "node_modules/@typescript-eslint/parser/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": ">=0.4.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/ng-annotate/node_modules/convert-source-map": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
-      "integrity": "sha512-Y8L5rp6jo+g9VEPgvqNfEopjTR4OTYct8lXlS8iVQdmnjDvbdbzYe9rjtFCB9egC86JoNCU61WRY+ScjkZpnIg==",
-      "dev": true
-    },
-    "node_modules/ng-annotate/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
+    "node_modules/@typescript-eslint/parser/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/ng-csv": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/ng-csv/-/ng-csv-0.2.3.tgz",
-      "integrity": "sha512-Hr+Y6IRCzgNqlVvIO00TMDdAeOD7z/3ishxvFfj9+xxW/+CLZnFZzYC9djKDyEPxDmmMqkdRcqwfsM+e+CBNRw==",
+    "node_modules/@typescript-eslint/parser/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
       "engines": {
-        "node": ">=0.8.0"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/ng-file-upload": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/ng-file-upload/-/ng-file-upload-5.0.9.tgz",
-      "integrity": "sha512-298k/s42+cyHLFAWCtgmXHGOUFqAh5VviSbMuQAPfqAavK1h9ADU/A+gN7OLmgNhW9PM94bWSt22LpjO/cvKwA=="
-    },
-    "node_modules/ng-flex-layout": {
-      "version": "17.3.4-beta.1",
-      "resolved": "https://registry.npmjs.org/ng-flex-layout/-/ng-flex-layout-17.3.4-beta.1.tgz",
-      "integrity": "sha512-MmXj7Cq9cBSDgJKT3vOok2YCq3OcUD4zhPaKup9V5lVJLZ38sHPgfPf5fFBjDZO7R6AD66wYPod0i4zW5LrrgA==",
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.62.0.tgz",
+      "integrity": "sha512-wexnCqiTg7BOGtbLDftYpRWlmLq4xfoMd7BKFR6Y75sZS3QmRKLdN3yWLhmIYgqMmP/OXWpj3H8odkb5nGURCQ==",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.3.0"
+        "@typescript-eslint/tsconfig-utils": "^8.62.0",
+        "@typescript-eslint/types": "^8.62.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@angular/cdk": ">=17.0.0",
-        "@angular/common": ">=17.0.0",
-        "@angular/core": ">=17.0.0",
-        "@angular/platform-browser": ">=17.0.0",
-        "rxjs": "^6.5.3 || ^7.4.0"
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/ng2-pdf-viewer": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-10.2.2.tgz",
-      "integrity": "sha512-GaKAvF0nXAiR9U4LFWuT54MM9nzp0ie8GGscp34W+lFsSOXdlwS0iFx5UPuVlODRm3YEUKx6xcK5oaJeBq0SAw==",
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.62.0.tgz",
+      "integrity": "sha512-1lX38kNxXIRb8mEc3lbq5mdHq1Pf2+U0nFU65KfT18mtPxxl0fvjuEE92mHuXPuCtElJhOrddOpyMlM3Z0umEA==",
+      "license": "MIT",
       "dependencies": {
-        "pdfjs-dist": "^3.11.174",
-        "tslib": "^2.3.0"
-      }
-    },
-    "node_modules/ngx-bootstrap": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-6.2.0.tgz",
-      "integrity": "sha512-5WKHo6/ltkenw4UyXZwED8rODCgp2RGbWurzYzZsF/gH1JO5SN7TJ+AL6kXYk6XM42sDA2WhN9Db+ZPNjiyHnA==",
-      "peerDependencies": {
-        "@angular/common": ">=7.0.0",
-        "@angular/core": ">=7.0.0"
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/ngx-entity-service": {
-      "version": "0.0.39",
-      "resolved": "https://registry.npmjs.org/ngx-entity-service/-/ngx-entity-service-0.0.39.tgz",
-      "integrity": "sha512-81DdRQxN7R2lELTiZkB5FkjeK147C8AUmyl52sxZgtYw/WiFay7iWk9KTSsZAJ8OhKKkmllXfMkOpQzvoYTafw==",
-      "dependencies": {
-        "tslib": "^2.3.0"
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.62.0.tgz",
+      "integrity": "sha512-y2GAdB6ykaXUvuspbYnizQc4oDDz0Tz/Yc7iWrXf9mx8vm/L/0vLHCe0tS2boG96Zy+DivnVDQ9ZUEWoHqqx1g==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@angular/common": "^13.0 || ^14.0 || ^15.0 || ^16.0 || ^17 || ^18",
-        "@angular/core": "^13.0 || ^14.0 || ^15.0 || ^16.0 || ^17 || ^18"
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/ngx-lottie": {
-      "version": "11.0.2",
-      "resolved": "https://registry.npmjs.org/ngx-lottie/-/ngx-lottie-11.0.2.tgz",
-      "integrity": "sha512-sQhCTxfrzWpjN2HVFCSyAQYQg8ZjZVtO1xIhOkrJNHY3/TR/zZkVrhakWcaM5bVxyA7gfUnK3ox+iK59Yd8Bsw==",
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.62.0.tgz",
+      "integrity": "sha512-+g5O3j0w2ldzC86Pv6fvbO/xhAonbJFIdf/MKQ1d30gndlsVzUOE83ldfSE15Qrl9fhFjK6AovHs5Wpp6vx86w==",
+      "license": "MIT",
       "dependencies": {
-        "@scarf/scarf": "^1.1.1",
-        "tslib": "^2.3.0"
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0",
+        "@typescript-eslint/utils": "8.62.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@angular/core": ">=17",
-        "lottie-web": ">=5.9.2"
-      }
-    },
-    "node_modules/nice-napi": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
-      "integrity": "sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "!win32"
-      ],
-      "dependencies": {
-        "node-addon-api": "^3.0.0",
-        "node-gyp-build": "^4.2.2"
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-      "dev": true
-    },
-    "node_modules/no-case": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
-      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
-      "dev": true,
-      "dependencies": {
-        "lower-case": "^1.1.1"
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.62.0.tgz",
+      "integrity": "sha512-KvAclkktORPvM54TgLgA4z9HIV1M8zOgw9ZVNXl9f/8dLYfXYX1wkMXP7qmabpijQRV5bHJLOmoyGQbLMaUYeg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
-      "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "optional": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.62.0.tgz",
+      "integrity": "sha512-+hVbNxtW64pIcZWDPGbyaKF7vp2IBTVY5ma1blwwksrjdsbdqqEKvJWMGbBofei4F6Dovx1M0RJgoFeNu2279A==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.62.0",
+        "@typescript-eslint/tsconfig-utils": "8.62.0",
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/node-forge": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
-      "dev": true,
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 6.13.0"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/node-gyp": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-10.1.0.tgz",
-      "integrity": "sha512-B4J5M1cABxPc5PwfjhbV5hoy2DP9p8lFXASnEN6hugXOa61416tnTZ29x9sSwAd0o99XNIcpvDDy1swAExsVKA==",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "license": "MIT",
       "dependencies": {
-        "env-paths": "^2.2.0",
-        "exponential-backoff": "^3.1.1",
-        "glob": "^10.3.10",
-        "graceful-fs": "^4.2.6",
-        "make-fetch-happen": "^13.0.0",
-        "nopt": "^7.0.0",
-        "proc-log": "^3.0.0",
-        "semver": "^7.3.5",
-        "tar": "^6.1.2",
-        "which": "^4.0.0"
-      },
-      "bin": {
-        "node-gyp": "bin/node-gyp.js"
+        "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/node-gyp-build": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.1.tgz",
-      "integrity": "sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/node-gyp/node_modules/abbrev": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
-      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.62.0.tgz",
+      "integrity": "sha512-82r66fi9zYwZ+mTq3vKgwjbZ1PVk/DJzrXFLpG6RnBbdvH8TEGVHIs9H4d2drhkOzf0syZuD/OZvvlu6GDbP4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.62.0",
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0"
+      },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/node-gyp/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.62.0.tgz",
+      "integrity": "sha512-CY3uyFSRbcQv3nnSv8S0+lDftMVz6P963PoRlxrV7ew/Md564g9ut60PYzdLM5qW4jFn93GBF+Soi90ISAN+GQ==",
+      "license": "MIT",
       "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "path-scurry": "^1.11.1"
+        "@typescript-eslint/types": "8.62.0",
+        "eslint-visitor-keys": "^5.0.0"
       },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=16 || 14 >=14.18"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/node-gyp/node_modules/isexe": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
-      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+    "node_modules/@vitejs/plugin-basic-ssl": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.3.0.tgz",
+      "integrity": "sha512-bdyo8rB3NnQbikdMpHaML9Z1OZPBu6fFOBo+OtxsBlvMJtysWskmBcnbIDhUqgC8tcxNv/a+BcV5U+2nQMm1OQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=16"
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/node-gyp/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+    "node_modules/@vitest/expect": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.9.tgz",
+      "integrity": "sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/node-gyp/node_modules/nopt": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
-      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.9.tgz",
+      "integrity": "sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "abbrev": "^2.0.0"
+        "@vitest/spy": "4.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
       },
-      "bin": {
-        "nopt": "bin/nopt.js"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
       }
     },
-    "node_modules/node-gyp/node_modules/which": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
-      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.9.tgz",
+      "integrity": "sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "isexe": "^3.1.1"
+        "tinyrainbow": "^3.1.0"
       },
-      "bin": {
-        "node-which": "bin/which.js"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.9.tgz",
+      "integrity": "sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.9",
+        "pathe": "^2.0.3"
       },
-      "engines": {
-        "node": "^16.13.0 || >=18.0.0"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/node-machine-id": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/node-machine-id/-/node-machine-id-1.1.12.tgz",
-      "integrity": "sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==",
-      "dev": true
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.9.tgz",
+      "integrity": "sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
     },
-    "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
+    "node_modules/@vitest/spy": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.9.tgz",
+      "integrity": "sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
     },
-    "node_modules/nopt": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-      "integrity": "sha512-4GUt3kSEYmk4ITxzB/b9vaIDfUVWN/Ml1Fwl11IlnIG2iaJ9O6WXZ9SrYM9NLI8OCBieN2Y8SWC2oJV0RQ7qYg==",
+    "node_modules/@vitest/utils": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.9.tgz",
+      "integrity": "sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "abbrev": "1"
+        "@vitest/pretty-format": "4.1.9",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
       },
-      "bin": {
-        "nopt": "bin/nopt.js"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/normalize-package-data": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+    "node_modules/@vitest/utils/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@worktile/gantt": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@worktile/gantt/-/gantt-21.0.0.tgz",
+      "integrity": "sha512-btoj+li91y2F7VoR0TDgB64kHvlpJmz4DhD2jFsGtCgqk3+9HKHmVLKDj9pG6XZTmNe/IxsDfFDHblX233rXug==",
+      "license": "MIT",
       "dependencies": {
-        "hosted-git-info": "^4.0.1",
-        "is-core-module": "^2.5.0",
-        "semver": "^7.3.4",
-        "validate-npm-package-license": "^3.0.1"
+        "tslib": "^2.3.0"
       },
-      "engines": {
-        "node": ">=10"
+      "peerDependencies": {
+        "@angular/cdk": ">=21.0.0",
+        "@angular/common": ">=21.0.0",
+        "@angular/core": ">=21.0.0",
+        "@date-fns/tz": ">=1.0.0",
+        "date-fns": ">=4.0.0",
+        "rxjs": "^6.5.0 || ^7.0.0"
       }
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "devOptional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+    "node_modules/abbrev": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-4.0.0.tgz",
+      "integrity": "sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==",
       "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/npm-bundled": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.1.tgz",
-      "integrity": "sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==",
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "npm-normalize-package-bin": "^3.0.0"
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
       },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/npm-install-checks": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-6.3.0.tgz",
-      "integrity": "sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==",
-      "dependencies": {
-        "semver": "^7.1.1"
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
       },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/npm-normalize-package-bin": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
-      "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/npm-package-arg": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-11.0.1.tgz",
-      "integrity": "sha512-M7s1BD4NxdAvBKUPqqRW957Xwcl/4Zvo8Aj+ANrzvIPzGJZElrH7Z//rSaec2ORcND6FHHLnZeY8qgTpXDMFQQ==",
+    "node_modules/acorn-walk": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
+      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "hosted-git-info": "^7.0.0",
-        "proc-log": "^3.0.0",
-        "semver": "^7.3.5",
-        "validate-npm-package-name": "^5.0.0"
+        "acorn": "^8.11.0"
       },
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/npm-package-arg/node_modules/hosted-git-info": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
-      "integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
-      "dependencies": {
-        "lru-cache": "^10.0.1"
-      },
+    "node_modules/agent-base": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-9.0.0.tgz",
+      "integrity": "sha512-TQf59BsZnytt8GdJKLPfUZ54g/iaUL2OWDSFCCvMOhsHduDQxO8xC4PNeyIkVcA5KwL2phPSv0douC0fgWzmnA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">= 20"
       }
     },
-    "node_modules/npm-package-arg/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/npm-packlist": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-8.0.2.tgz",
-      "integrity": "sha512-shYrPFIS/JLP4oQmAwDyk5HcyysKW8/JLTEA32S0Z5TzvpaeeX2yMFfoK1fjEBnCBvVyIB/Jj/GBFdm0wsgzbA==",
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ignore-walk": "^6.0.4"
+        "ajv": "^8.0.0"
       },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
       }
     },
-    "node_modules/npm-pick-manifest": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-9.0.0.tgz",
-      "integrity": "sha512-VfvRSs/b6n9ol4Qb+bDwNGUXutpy76x6MARw/XssevE0TnctIKcmklJZM5Z7nqs5z5aW+0S63pgCNbpkUNNXBg==",
+    "node_modules/algoliasearch": {
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.52.0.tgz",
+      "integrity": "sha512-0ZzY9mjqV7gop/AH8pIBiAS8giXP7WcSiUfoFYIzYAK9QC5c37E4SIVtJVBMwlURc0/uNt2o4RcNRvdHa4CJ5w==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "npm-install-checks": "^6.0.0",
-        "npm-normalize-package-bin": "^3.0.0",
-        "npm-package-arg": "^11.0.0",
-        "semver": "^7.3.5"
+        "@algolia/abtesting": "1.18.0",
+        "@algolia/client-abtesting": "5.52.0",
+        "@algolia/client-analytics": "5.52.0",
+        "@algolia/client-common": "5.52.0",
+        "@algolia/client-insights": "5.52.0",
+        "@algolia/client-personalization": "5.52.0",
+        "@algolia/client-query-suggestions": "5.52.0",
+        "@algolia/client-search": "5.52.0",
+        "@algolia/ingestion": "1.52.0",
+        "@algolia/monitoring": "1.52.0",
+        "@algolia/recommend": "5.52.0",
+        "@algolia/requester-browser-xhr": "5.52.0",
+        "@algolia/requester-fetch": "5.52.0",
+        "@algolia/requester-node-http": "5.52.0"
       },
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">= 14.0.0"
       }
     },
-    "node_modules/npm-registry-fetch": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-16.2.1.tgz",
-      "integrity": "sha512-8l+7jxhim55S85fjiDGJ1rZXBWGtRLi1OSb4Z3BPLObPuIaeKRlPRiYMSHU4/81ck3t71Z+UwDDl47gcpmfQQA==",
+    "node_modules/angular-calendar": {
+      "version": "0.32.2",
+      "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.32.2.tgz",
+      "integrity": "sha512-eVPim7FOBjx/e58bvuHUpN5IuiFz8k97+RjatKUJ2Lj8Anro5c34NTOgKgZ7uYRHhgL++yUOcXV4ar8D/bMcFA==",
+      "license": "MIT",
       "dependencies": {
-        "@npmcli/redact": "^1.1.0",
-        "make-fetch-happen": "^13.0.0",
-        "minipass": "^7.0.2",
-        "minipass-fetch": "^3.0.0",
-        "minipass-json-stream": "^1.0.1",
-        "minizlib": "^2.1.2",
-        "npm-package-arg": "^11.0.0",
-        "proc-log": "^4.0.0"
+        "@scarf/scarf": "^1.1.1",
+        "calendar-utils": "^0.12.5",
+        "positioning": "^3.0.1",
+        "tslib": "^2.4.1"
       },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+      "funding": {
+        "url": "https://github.com/sponsors/mattlewis92"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=20.2.0",
+        "angular-draggable-droppable": "^9.0.1",
+        "angular-resizable-element": "^8.0.0",
+        "date-fns": "^4.0.0",
+        "moment": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
       }
     },
-    "node_modules/npm-registry-fetch/node_modules/proc-log": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
-      "integrity": "sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+    "node_modules/angular-draggable-droppable": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-9.0.1.tgz",
+      "integrity": "sha512-nxxFzBMEzB6RsRUqnHWelt9G7QXG2wc18czYL75YhJ9IkBJOBkxXBd0ZOTeDgV9C3mmkkw+PMLJOayx0GH6gXA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@mattlewis92/dom-autoscroller": "^2.4.2",
+        "tslib": "^2.4.1"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=20.0.0"
       }
     },
-    "node_modules/npm-run-all": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
-      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+    "node_modules/angular-eslint": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/angular-eslint/-/angular-eslint-22.0.0.tgz",
+      "integrity": "sha512-6tHLndzM6rU+2iuICakJS/hD1scK5sWLkcD7828zStT1ViA9zX8z9g/V1IlBiKEdZeMsl+m7K2DlNc34AkYyoQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "chalk": "^2.4.1",
-        "cross-spawn": "^6.0.5",
-        "memorystream": "^0.3.1",
-        "minimatch": "^3.0.4",
-        "pidtree": "^0.3.0",
-        "read-pkg": "^3.0.0",
-        "shell-quote": "^1.6.1",
-        "string.prototype.padend": "^3.0.0"
+        "@angular-devkit/core": ">= 22.0.0 < 23.0.0",
+        "@angular-devkit/schematics": ">= 22.0.0 < 23.0.0",
+        "@angular-eslint/builder": "22.0.0",
+        "@angular-eslint/eslint-plugin": "22.0.0",
+        "@angular-eslint/eslint-plugin-template": "22.0.0",
+        "@angular-eslint/schematics": "22.0.0",
+        "@angular-eslint/template-parser": "22.0.0",
+        "@typescript-eslint/types": "^8.0.0",
+        "@typescript-eslint/utils": "^8.0.0"
       },
-      "bin": {
-        "npm-run-all": "bin/npm-run-all/index.js",
-        "run-p": "bin/run-p/index.js",
-        "run-s": "bin/run-s/index.js"
-      },
-      "engines": {
-        "node": ">= 4"
+      "peerDependencies": {
+        "@angular/cli": ">= 22.0.0 < 23.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
+        "typescript": "*",
+        "typescript-eslint": "^8.0.0"
       }
     },
-    "node_modules/npm-run-all/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
+    "node_modules/angular-resizable-element": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-8.0.3.tgz",
+      "integrity": "sha512-Jf/iVj9BNOTjune/cpdRj+c2Rd0WFrVf9yXMILU2INmAS5GUqs7pBrsbJkGo4NrXMfOsb/vS+sXWbv60UAheHg==",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=20.0.0"
       }
     },
-    "node_modules/npm-run-all/node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+    "node_modules/ansi-escapes": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",
+      "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "environment": "^1.0.0"
       },
       "engines": {
-        "node": ">=4.8"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/npm-run-all/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "entities": "^2.2.0"
+      },
+      "bin": {
+        "ansi-to-html": "bin/ansi-to-html"
       },
       "engines": {
-        "node": "*"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/npm-run-all/node_modules/path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+    "node_modules/ansi-to-html/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/npm-run-all/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
+      "license": "Python-2.0"
     },
-    "node_modules/npm-run-all/node_modules/shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
       "dev": true,
-      "dependencies": {
-        "shebang-regex": "^1.0.0"
-      },
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/npm-run-all/node_modules/shebang-regex": {
+    "node_modules/array-ify": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
+      "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
       }
     },
-    "node_modules/npm-run-all/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+    "node_modules/autoprefixer": {
+      "version": "10.5.2",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.2.tgz",
+      "integrity": "sha512-rD5t5DwOjJdmSORcTq64j8MawTC+tbQ+HHqjR4NDumamy/ambn1UJrlKL+KdwujWxMkFjPM3pPHOEA9tl4767Q==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "isexe": "^2.0.0"
+        "browserslist": "^4.28.4",
+        "caniuse-lite": "^1.0.30001799",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
       },
       "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
+        "autoprefixer": "bin/autoprefixer"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/npmlog": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
-      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "are-we-there-yet": "^2.0.0",
-        "console-control-strings": "^1.1.0",
-        "gauge": "^3.0.0",
-        "set-blocking": "^2.0.0"
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
-      }
+      "license": "MIT"
     },
-    "node_modules/num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
-      "dev": true
-    },
-    "node_modules/nvd3": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/nvd3/-/nvd3-1.8.6.tgz",
-      "integrity": "sha512-YGQ9hAQHuQCF0JmYkT2GhNMHb5pA+vDfQj6C2GdpQPzdRPj/srPG3mh/3fZzUFt+at1NusLk/RqICUWkxm4viQ==",
-      "peerDependencies": {
-        "d3": "^3.4.4"
+    "node_modules/base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
+      "engines": {
+        "node": ">= 0.6.0"
       }
     },
-    "node_modules/nx": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/nx/-/nx-19.1.2.tgz",
-      "integrity": "sha512-hqD0HglmZCqgPLGcEfLq79El9iBUlinoncmsk6wsPHJM1IrASxHkemJZiehYilQx55QACd1MGBjC2nySZmgyLA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "dependencies": {
-        "@nrwl/tao": "19.1.2",
-        "@yarnpkg/lockfile": "^1.1.0",
-        "@yarnpkg/parsers": "3.0.0-rc.46",
-        "@zkochan/js-yaml": "0.0.7",
-        "axios": "^1.6.0",
-        "chalk": "^4.1.0",
-        "cli-cursor": "3.1.0",
-        "cli-spinners": "2.6.1",
-        "cliui": "^8.0.1",
-        "dotenv": "~16.3.1",
-        "dotenv-expand": "~10.0.0",
-        "enquirer": "~2.3.6",
-        "figures": "3.2.0",
-        "flat": "^5.0.2",
-        "fs-extra": "^11.1.0",
-        "ignore": "^5.0.4",
-        "jest-diff": "^29.4.1",
-        "jsonc-parser": "3.2.0",
-        "lines-and-columns": "~2.0.3",
-        "minimatch": "9.0.3",
-        "node-machine-id": "1.1.12",
-        "npm-run-path": "^4.0.1",
-        "open": "^8.4.0",
-        "ora": "5.3.0",
-        "semver": "^7.5.3",
-        "string-width": "^4.2.3",
-        "strong-log-transformer": "^2.1.0",
-        "tar-stream": "~2.2.0",
-        "tmp": "~0.2.1",
-        "tsconfig-paths": "^4.1.2",
-        "tslib": "^2.3.0",
-        "yargs": "^17.6.2",
-        "yargs-parser": "21.1.1"
-      },
-      "bin": {
-        "nx": "bin/nx.js",
-        "nx-cloud": "bin/nx-cloud.js"
-      },
-      "optionalDependencies": {
-        "@nx/nx-darwin-arm64": "19.1.2",
-        "@nx/nx-darwin-x64": "19.1.2",
-        "@nx/nx-freebsd-x64": "19.1.2",
-        "@nx/nx-linux-arm-gnueabihf": "19.1.2",
-        "@nx/nx-linux-arm64-gnu": "19.1.2",
-        "@nx/nx-linux-arm64-musl": "19.1.2",
-        "@nx/nx-linux-x64-gnu": "19.1.2",
-        "@nx/nx-linux-x64-musl": "19.1.2",
-        "@nx/nx-win32-arm64-msvc": "19.1.2",
-        "@nx/nx-win32-x64-msvc": "19.1.2"
-      },
-      "peerDependencies": {
-        "@swc-node/register": "^1.8.0",
-        "@swc/core": "^1.3.85"
-      },
-      "peerDependenciesMeta": {
-        "@swc-node/register": {
-          "optional": true
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
         },
-        "@swc/core": {
-          "optional": true
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
         }
-      }
-    },
-    "node_modules/nx/node_modules/@nx/nx-darwin-arm64": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-19.1.2.tgz",
-      "integrity": "sha512-YeT/u+r0iZSokbVFsuiFpF/eFAZmR1p6gkpHo6cVIb0KTkH6Sd1n3s1cjfOKEZg+M0emf9Q8QQ6tw41wGrUm4Q==",
-      "cpu": [
-        "arm64"
       ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.21",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.21.tgz",
+      "integrity": "sha512-uh8vpY/1/YyFkunIDFH/12p7/7VdPKA1hejMVEbdkEaWnUz0Hesvx5EbiU6XxjyHZIOju+ZMbQJkRh+es3/spQ==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/nx/node_modules/@nx/nx-darwin-x64": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-19.1.2.tgz",
-      "integrity": "sha512-nmbz/4tgvXwYmxIQptny7Cij0OTAxIdB2l+qmI4tkBnN2mT5UVqdG9t8ziSyZHJbWQjIHTkbgAbg5ar6vK/srA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/beasties": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/beasties/-/beasties-0.4.2.tgz",
+      "integrity": "sha512-NvcGjG/7AVUAfRbvrJmHunDQS9uHnE6Q/7AkaPr8oKE8HjOlpjRG5075z/th2Tmlezk3VlaaS8+X9I1RwHJMQw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "css-select": "^6.0.0",
+        "css-what": "^7.0.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "htmlparser2": "^10.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.49",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-safe-parser": "^7.0.1"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/nx/node_modules/@nx/nx-linux-x64-gnu": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-19.1.2.tgz",
-      "integrity": "sha512-0XZSz37nrbABUxw2wOMsUP2djsYRxXn1+jbh/kcOH6PnlwiTPOJ6LwDENUh9lZ4PKflED5Tj0w6wx23/AH4z3g==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
       }
     },
-    "node_modules/nx/node_modules/@nx/nx-win32-x64-msvc": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-19.1.2.tgz",
-      "integrity": "sha512-H8ldXwXnVff2A9tDU8AD7QE/uZV06D0gHBdbnrzbg74NOrkKvvUPXky0D6BMlooljkU9QXu7M46CWRNIoPSzQw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 6"
       }
     },
-    "node_modules/nx/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/body-parser": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
+      "integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "bytes": "^3.1.2",
+        "content-type": "^2.0.0",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.1",
+        "iconv-lite": "^0.7.2",
+        "on-finished": "^2.4.1",
+        "qs": "^6.15.2",
+        "raw-body": "^3.0.2",
+        "type-is": "^2.1.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/nx/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+    "node_modules/body-parser/node_modules/content-type": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
       "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/nx/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/nx/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/nx/node_modules/fs-extra": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
-      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+    "node_modules/browserslist": {
+      "version": "4.28.9",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.9.tgz",
+      "integrity": "sha512-EWazOblFYUvlGZcfGhPUPmYh3nikUxBVb+y9MJun5f3hBi812X+8MSQTujLBtgK3cf51fJWbWfOjyeO954d+Eg==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
+        "baseline-browser-mapping": "^2.11.20",
+        "caniuse-lite": "^1.0.30001810",
+        "electron-to-chromium": "^1.5.420",
+        "node-releases": "^2.0.54",
+        "update-browserslist-db": "^1.3.2"
+      },
+      "bin": {
+        "browserslist": "cli.js"
       },
       "engines": {
-        "node": ">=14.14"
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/nx/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
       }
     },
-    "node_modules/nx/node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
-      "dev": true
-    },
-    "node_modules/nx/node_modules/ora": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz",
-      "integrity": "sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==",
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true,
-      "dependencies": {
-        "bl": "^4.0.3",
-        "chalk": "^4.1.0",
-        "cli-cursor": "^3.1.0",
-        "cli-spinners": "^2.5.0",
-        "is-interactive": "^1.0.0",
-        "log-symbols": "^4.0.0",
-        "strip-ansi": "^6.0.0",
-        "wcwidth": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
+      "license": "MIT"
     },
-    "node_modules/nx/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/nx/node_modules/tsconfig-paths": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
-      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+    "node_modules/cacache": {
+      "version": "20.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-20.0.4.tgz",
+      "integrity": "sha512-M3Lab8NPYlZU2exsL3bMVvMrMqgwCnMWfdZbK28bn3pK6APT/Te/I8hjRPNu1uwORY9a1eEQoifXbKPQMfMTOA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "json5": "^2.2.2",
-        "minimist": "^1.2.6",
-        "strip-bom": "^3.0.0"
+        "@npmcli/fs": "^5.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^13.0.0",
+        "lru-cache": "^11.1.0",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^13.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+    "node_modules/cacache/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "devOptional": true,
-      "engines": {
-        "node": ">=0.10.0"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/object-copy": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==",
+    "node_modules/cacache/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "copy-descriptor": "^0.1.0",
-        "define-property": "^0.2.5",
-        "kind-of": "^3.0.3"
+        "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/object-copy/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+    "node_modules/cacache/node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "is-buffer": "^1.1.5"
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">= 6"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+    "node_modules/cacache/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
+    "node_modules/calendar-utils": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.12.5.tgz",
+      "integrity": "sha512-resk9x4GGwzsea55oUmW4Gs52v97YitHsA4gfTbIfygGyBMYrQV6H0HyHJyI95FCK5mu7xKVDikMrywSY1hTlA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": "^4.0.0",
+        "luxon": "^3.0.0",
+        "moment": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
       }
     },
-    "node_modules/object-visit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==",
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "isobject": "^3.0.0"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/object.assign": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
-      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
-        "define-properties": "^1.2.1",
-        "has-symbols": "^1.0.3",
-        "object-keys": "^1.1.1"
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -19300,4544 +7962,4729 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object.defaults": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
-      "integrity": "sha512-c/K0mw/F11k4dEUBMW8naXUuBuhxRCfG7W+yFy8EcijU/rSmazOUd1XAEEe6bC0OuXY4HUKjTJv7xbxIMqdxrA==",
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true,
-      "dependencies": {
-        "array-each": "^1.0.1",
-        "array-slice": "^1.0.0",
-        "for-own": "^1.0.0",
-        "isobject": "^3.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/object.map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
-      "integrity": "sha512-3+mAJu2PLfnSVGHwIWubpOFLscJANBKuB/6A4CxBstc4aqwQY0FWcsppuy4jU5GSB95yES5JHSI+33AWuS4k6w==",
-      "dev": true,
-      "dependencies": {
-        "for-own": "^1.0.0",
-        "make-iterator": "^1.0.0"
-      },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/canvas": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.3.tgz",
+      "integrity": "sha512-PzE5nJZPz72YUAfo8oTp0u3fqqY7IzlTubneAihqDYAUcBk7ryeCmBbdJBEdaH0bptSOe2VT2Zwcb3UaFyaSWw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "isobject": "^3.0.1"
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.12.0 || >= 20.9.0"
       }
     },
-    "node_modules/object.values": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
-      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+      "license": "ISC",
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
       }
     },
-    "node_modules/obuf": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-      "dev": true
+    "node_modules/canvas/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
       "dev": true,
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=18"
       }
     },
-    "node_modules/on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+    "node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "devOptional": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/open": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+    "node_modules/chardet": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.1.tgz",
+      "integrity": "sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "define-lazy-prop": "^2.0.0",
-        "is-docker": "^2.1.1",
-        "is-wsl": "^2.2.0"
+        "readdirp": "^5.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">= 20.19.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/opn": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
-      "integrity": "sha512-iPBWbPP4OEOzR1xfhpGLDh+ypKBOygunZhM9jBtA7FS5sKjEiMZw0EFb82hnDOmTZX90ZWLoZKUza4cVt8MexA==",
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
       "dev": true,
-      "dependencies": {
-        "object-assign": "^4.0.1",
-        "pinkie-promise": "^2.0.0"
-      },
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha512-snN4O4TkigujZphWLN0E//nQmm7790RYaE53DdL7ZYwee2D8DDo9/EyYiKUfN3rneWUjhJnueija3G9I2i0h3g==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
+        "node": ">=18"
       }
     },
-    "node_modules/optimist/node_modules/minimist": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-      "integrity": "sha512-iotkTvxc+TwOm5Ieim8VnSNvCDjCK9S8G3scJ50ZthspSxa7jx50jkhYduuAtAjvfDUwSgOwf8+If99AlOEhyw==",
-      "dev": true
-    },
-    "node_modules/optionator": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "deep-is": "^0.1.3",
-        "fast-levenshtein": "^2.0.6",
-        "levn": "^0.4.1",
-        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.5"
+        "restore-cursor": "^5.0.0"
       },
       "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/ora": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
-      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
-      "dependencies": {
-        "bl": "^4.1.0",
-        "chalk": "^4.1.0",
-        "cli-cursor": "^3.1.0",
-        "cli-spinners": "^2.5.0",
-        "is-interactive": "^1.0.0",
-        "is-unicode-supported": "^0.1.0",
-        "log-symbols": "^4.1.0",
-        "strip-ansi": "^6.0.0",
-        "wcwidth": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ora/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/ora/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
+    "node_modules/cli-spinners": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-3.4.0.tgz",
+      "integrity": "sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=18.20"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/ora/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/ora/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/ora/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "engines": {
-        "node": ">=8"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ora/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/cli-truncate": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.2.0.tgz",
+      "integrity": "sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "slice-ansi": "^8.0.0",
+        "string-width": "^8.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ordered-ast-traverse": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ordered-ast-traverse/-/ordered-ast-traverse-1.1.1.tgz",
-      "integrity": "sha512-/VDCNFrMUftwD04zNwMMXUY5+5IN0tQKbElSC1v6f53ueZMuRKzZmR5HxTC5TQnwLVY1FH3KbulWc0DXZ5kBnQ==",
+    "node_modules/cli-width": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
+      "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
       "dev": true,
-      "dependencies": {
-        "ordered-esprima-props": "~1.1.0"
+      "license": "ISC",
+      "engines": {
+        "node": ">= 12"
       }
     },
-    "node_modules/ordered-esprima-props": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/ordered-esprima-props/-/ordered-esprima-props-1.1.0.tgz",
-      "integrity": "sha512-RVQ/gx+EZY/txtizlzn4OY4Rto8vhM2HasczvmP1SJYBW6GD9vLfqx/7vgKEAFK2C9ynzz/evBArFyp3HAVmTg==",
-      "dev": true
-    },
-    "node_modules/os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
       "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=20"
       }
     },
-    "node_modules/os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/osenv": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
-      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-      "deprecated": "This package is no longer supported.",
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
       "dev": true,
-      "dependencies": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "yocto-queue": "^0.1.0"
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "p-limit": "^3.0.2"
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/p-map": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/compare-func": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
+      "integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "aggregate-error": "^3.0.0"
+        "array-ify": "^1.0.0",
+        "dot-prop": "^5.1.0"
+      }
+    },
+    "node_modules/concurrently": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-10.0.5.tgz",
+      "integrity": "sha512-JaP/CoftUrCcAFW/g//RbgEGwlelnEae6cfBLgH6ZdO6s8jPkn6p9SB9u6pdVxYXoiSnFqseOlHfrEfF82TVOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "5.6.2",
+        "rxjs": "7.8.2",
+        "shell-quote": "1.9.0",
+        "supports-color": "10.2.2",
+        "tree-kill": "1.2.2",
+        "yargs": "18.0.0"
+      },
+      "bin": {
+        "conc": "dist/bin/index.js",
+        "concurrently": "dist/bin/index.js"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=22"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
       }
     },
-    "node_modules/p-retry": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
-      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
       "dev": true,
-      "dependencies": {
-        "@types/retry": "0.12.0",
-        "retry": "^0.13.1"
+      "license": "MIT"
+    },
+    "node_modules/content-disposition": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
+      "integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/p-retry/node_modules/retry": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+    "node_modules/conventional-changelog-angular": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-8.3.1.tgz",
+      "integrity": "sha512-6gfI3otXK5Ph5DfCOI1dblr+kN3FAm5a97hYoQkqNZxOaYa5WKfXH+AnpsmS+iUH2mgVC2Cg2Qw9m5OKcmNrIg==",
       "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "compare-func": "^2.0.0"
+      },
       "engines": {
-        "node": ">= 4"
+        "node": ">=18"
       }
     },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+    "node_modules/conventional-changelog-conventionalcommits": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-9.3.1.tgz",
+      "integrity": "sha512-dTYtpIacRpcZgrvBYvBfArMmK2xvIpv2TaxM0/ZI5CBtNUzvF2x0t15HsbRABWprS6UPmvj+PzHVjSx4qAVKyw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "compare-func": "^2.0.0"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       }
     },
-    "node_modules/pacote": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/pacote/-/pacote-17.0.6.tgz",
-      "integrity": "sha512-cJKrW21VRE8vVTRskJo78c/RCvwJCn1f4qgfxL4w77SOWrTCRcmfkYHlHtS0gqpgjv3zhXflRtgsrUCX5xwNnQ==",
-      "dependencies": {
-        "@npmcli/git": "^5.0.0",
-        "@npmcli/installed-package-contents": "^2.0.1",
-        "@npmcli/promise-spawn": "^7.0.0",
-        "@npmcli/run-script": "^7.0.0",
-        "cacache": "^18.0.0",
-        "fs-minipass": "^3.0.0",
-        "minipass": "^7.0.2",
-        "npm-package-arg": "^11.0.0",
-        "npm-packlist": "^8.0.0",
-        "npm-pick-manifest": "^9.0.0",
-        "npm-registry-fetch": "^16.0.0",
-        "proc-log": "^3.0.0",
-        "promise-retry": "^2.0.1",
-        "read-package-json": "^7.0.0",
-        "read-package-json-fast": "^3.0.0",
-        "sigstore": "^2.2.0",
-        "ssri": "^10.0.0",
-        "tar": "^6.1.11"
+    "node_modules/conventional-commits-parser": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-6.4.0.tgz",
+      "integrity": "sha512-tvRg7FIBNlyPzjdG8wWRlPHQJJHI7DylhtRGeU9Lq+JuoPh5BKpPRX83ZdLrvXuOSu5Eo/e7SzOQhU4Hd2Miuw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@simple-libs/stream-utils": "^1.2.0",
+        "meow": "^13.0.0"
       },
       "bin": {
-        "pacote": "lib/bin.js"
+        "conventional-commits-parser": "dist/cli/index.js"
       },
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/param-case": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
-      "integrity": "sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==",
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "dev": true,
-      "dependencies": {
-        "no-case": "^2.2.0"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
       "dev": true,
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=6.6.0"
       }
     },
-    "node_modules/parse-filepath": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
-      "integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==",
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-absolute": "^1.0.0",
-        "map-cache": "^0.2.0",
-        "path-root": "^0.1.1"
+        "object-assign": "^4",
+        "vary": "^1"
       },
       "engines": {
-        "node": ">=0.8"
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+    "node_modules/cosmiconfig": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/parse-json/node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
-    },
-    "node_modules/parse-json/node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
-    },
-    "node_modules/parse-node-version": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+    "node_modules/cosmiconfig-typescript-loader": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-6.3.0.tgz",
+      "integrity": "sha512-Akr82WH1Wfqatyiqpj8HDkO2o2KmJRu1FhKfSNJP3K4IdXwHfEyL7MOb62i1AGQVLtIQM+iCE9CGOtrfhR+mmA==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jiti": "2.6.1"
+      },
       "engines": {
-        "node": ">= 0.10"
+        "node": ">=v18"
+      },
+      "peerDependencies": {
+        "@types/node": "*",
+        "cosmiconfig": ">=9",
+        "typescript": ">=5"
       }
     },
-    "node_modules/parse-passwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/parse5": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "devOptional": true,
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
       "dependencies": {
-        "entities": "^4.4.0"
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/parse5-html-rewriting-stream": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/parse5-html-rewriting-stream/-/parse5-html-rewriting-stream-7.0.0.tgz",
-      "integrity": "sha512-mazCyGWkmCRWDI15Zp+UiCqMp/0dgEmkZRvhlsqqKYr4SsVm/TvnSpD9fCvqCA2zoWJcfRym846ejWBBHRiYEg==",
-      "dev": true,
+    "node_modules/css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "license": "MIT",
       "dependencies": {
-        "entities": "^4.3.0",
-        "parse5": "^7.0.0",
-        "parse5-sax-parser": "^7.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
+        "base64-arraybuffer": "^0.2.0"
       }
     },
-    "node_modules/parse5-sax-parser": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/parse5-sax-parser/-/parse5-sax-parser-7.0.0.tgz",
-      "integrity": "sha512-5A+v2SNsq8T6/mG3ahcz8ZtQ0OUFTatxPbeidoMB7tkJSGDY3tdfl4MHovtLQHkEn5CGxijNWRQHhRQ6IRpXKg==",
+    "node_modules/css-select": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-6.0.0.tgz",
+      "integrity": "sha512-rZZVSLle8v0+EY8QAkDWrKhpgt6SA5OtHsgBnsj6ZaLb5dmDVOWUDtQitd9ydxxvEjhewNudS6eTVU7uOyzvXw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "parse5": "^7.0.0"
+        "boolbase": "^1.0.0",
+        "css-what": "^7.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "nth-check": "^2.1.1"
       },
       "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
+        "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/pascalcase": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==",
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
-    "node_modules/path-dirname": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==",
-      "dev": true
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+    "node_modules/css-what": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-7.0.0.tgz",
+      "integrity": "sha512-wD5oz5xibMOPHzy13CyGmogB3phdvcDaB5t0W/Nr5Z2O/agcB8YwOz6e2Lsp10pNDzBoDO9nVa3RGs/2BttpHQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=8"
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "devOptional": true,
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=4"
       }
     },
-    "node_modules/path-is-inside": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
-      "dev": true
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-    },
-    "node_modules/path-root": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
-      "integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==",
-      "dev": true,
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
       "dependencies": {
-        "path-root-regex": "^0.1.0"
+        "internmap": "1 - 2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
       }
     },
-    "node_modules/path-root-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
-      "integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==",
-      "dev": true,
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
       }
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
       "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">=12"
       }
     },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
       "engines": {
-        "node": "14 || >=16.14"
+        "node": ">=12"
       }
     },
-    "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
-      "dev": true
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
       }
     },
-    "node_modules/path2d-polyfill": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
-      "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
-      "optional": true,
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
       }
     },
-    "node_modules/pdfjs-dist": {
-      "version": "3.11.174",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
-      "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
-      "engines": {
-        "node": ">=18"
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
       },
-      "optionalDependencies": {
-        "canvas": "^2.11.2",
-        "path2d-polyfill": "^2.0.1"
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true
-    },
-    "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
-    },
-    "node_modules/picomatch": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.1.tgz",
-      "integrity": "sha512-xUXwsxNjwTQ8K3GnT4pCJm+xq3RUPQbmkYJTP5aFIfNIvbcc/4MUxgBaaRSZJ6yGJZiGSyYlM6MzwTsRk8SYCg==",
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
       "engines": {
         "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/pidtree": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
-      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
-      "dev": true,
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
       "bin": {
-        "pidtree": "bin/pidtree.js"
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
       },
       "engines": {
-        "node": ">=0.10"
+        "node": ">=12"
       }
     },
-    "node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
-      "dev": true,
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
-      "dev": true,
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
       }
     },
-    "node_modules/pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
-      "dev": true,
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
       "dependencies": {
-        "pinkie": "^2.0.0"
+        "d3-dsv": "1 - 3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
       }
     },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">=12"
       }
     },
-    "node_modules/piscina": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/piscina/-/piscina-4.4.0.tgz",
-      "integrity": "sha512-+AQduEJefrOApE4bV7KRmp3N2JnnyErlVqq4P/jmko4FPz9Z877BCccl/iB3FdrWSUkvbGV9Kan/KllJgat3Vg==",
-      "dev": true,
-      "optionalDependencies": {
-        "nice-napi": "^1.0.2"
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-dir": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
-      "integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==",
-      "dev": true,
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
       "dependencies": {
-        "find-up": "^6.3.0"
+        "d3-array": "2.5.0 - 3"
       },
       "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-dir/node_modules/find-up": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
-      "integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^7.1.0",
-        "path-exists": "^5.0.0"
-      },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-dir/node_modules/locate-path": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
-      "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
-      "dev": true,
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
       "dependencies": {
-        "p-locate": "^6.0.0"
+        "d3-color": "1 - 3"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-dir/node_modules/p-limit": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
-      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^1.0.0"
-      },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-dir/node_modules/p-locate": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
-      "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^4.0.0"
-      },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-dir/node_modules/path-exists": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
-      "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
-      "dev": true,
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-dir/node_modules/yocto-queue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
-      "dev": true,
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
       "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-      "dev": true,
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "find-up": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
       }
     },
-    "node_modules/pkg-up/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dev": true,
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "locate-path": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
+        "internmap": "^1.0.0"
       }
     },
-    "node_modules/pkg-up/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dev": true,
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
+        "d3-path": "1"
       }
     },
-    "node_modules/pkg-up/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
       "dependencies": {
-        "p-try": "^2.0.0"
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
       },
       "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-up/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dev": true,
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
       "dependencies": {
-        "p-limit": "^2.0.0"
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
       }
     },
-    "node_modules/pkg-up/node_modules/path-exists": {
+    "node_modules/d3-selection": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
       "engines": {
-        "node": ">=4"
+        "node": ">=12"
       }
     },
-    "node_modules/portscanner": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-1.2.0.tgz",
-      "integrity": "sha512-3MCx40XO6ChNJJHw1tTFukQK/M/8FacGZK/vGbnrKpozObrJzembYtfi7ZdA2hkF2Lojg77XhsKUPvF8eHKcDA==",
-      "dev": true,
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
       "dependencies": {
-        "async": "1.5.2"
+        "d3-path": "^3.1.0"
       },
       "engines": {
-        "node": ">=0.4",
-        "npm": ">=1.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/posix-character-classes": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==",
-      "dev": true,
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
       }
     },
-    "node_modules/possible-typed-array-names": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
-      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
+    "node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1 - 2"
       }
     },
-    "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+    "node_modules/d3-time-format/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
-      },
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-time-format/node_modules/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "2"
+      }
+    },
+    "node_modules/d3-time-format/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">=12"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
       "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=12"
       },
       "peerDependencies": {
-        "postcss": "^8.0.0"
+        "d3-selection": "2 - 3"
       }
     },
-    "node_modules/postcss-import/node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
       "dependencies": {
-        "camelcase-css": "^2.0.1"
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
       },
       "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
+        "node": ">=12"
       }
     },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+    "node_modules/d3/node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
       "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
+        "d3-time": "1 - 3"
       },
       "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
+        "node": ">=12"
       }
     },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
-      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
       "dev": true,
-      "engines": {
-        "node": ">=14"
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
-    "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.3.tgz",
-      "integrity": "sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==",
-      "dev": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
+    "node_modules/date-fns": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
+      "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
-    "node_modules/postcss-loader": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
-      "integrity": "sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==",
-      "dev": true,
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
       "dependencies": {
-        "cosmiconfig": "^9.0.0",
-        "jiti": "^1.20.0",
-        "semver": "^7.5.4"
+        "ms": "^2.1.3"
       },
       "engines": {
-        "node": ">= 18.12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "postcss": "^7.0.0 || ^8.0.1",
-        "webpack": "^5.0.0"
+        "node": ">=6.0"
       },
       "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
+        "supports-color": {
           "optional": true
         }
       }
     },
-    "node_modules/postcss-loader/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "node_modules/postcss-loader/node_modules/cosmiconfig": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
-      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "env-paths": "^2.2.1",
-        "import-fresh": "^3.3.0",
-        "js-yaml": "^4.1.0",
-        "parse-json": "^5.2.0"
+        "mimic-response": "^3.1.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/d-fischer"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.9.5"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/postcss-loader/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
       }
     },
-    "node_modules/postcss-media-query-parser": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
-      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
-      "dev": true
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "license": "MIT"
     },
-    "node_modules/postcss-modules-extract-imports": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
-      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+    "node_modules/delaunator": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
+      "integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
       }
     },
-    "node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz",
-      "integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==",
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/postcss-modules-local-by-default/node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "node_modules/postcss-modules-scope": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz",
-      "integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+        "node": ">=8"
       }
     },
-    "node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+    "node_modules/diff": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
+      "integrity": "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==",
       "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.0.0"
-      },
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+        "node": ">=0.3.1"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
-      },
-      "engines": {
-        "node": ">=12.0"
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
-    "node_modules/postcss-scss": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-0.1.9.tgz",
-      "integrity": "sha512-FkLd8Pxci394edesXqewjAd6eMnYGUPK5bgkYbYHX7YPeJDcuaKMuHnXsd0i3tnXJOLTuX+L+m3edda1IKMrbQ==",
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
       "dev": true,
-      "dependencies": {
-        "postcss": "^5.1.0"
-      }
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
     },
-    "node_modules/postcss-scss/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
       "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/postcss-scss/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+    "node_modules/dompurify": {
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.14.tgz",
+      "integrity": "sha512-dVoH9z+MY+C9IilgGCk3YfFqjLi3fChm2OiKJMzh6axrJ5qwxqWaZamgmHrpv22CN/KdbZJuGEGgfQoL00LTdg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
       }
     },
-    "node_modules/postcss-scss/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
       },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss-scss/node_modules/chalk/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
-    "node_modules/postcss-scss/node_modules/has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/postcss-scss/node_modules/postcss": {
-      "version": "5.2.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-      "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "chalk": "^1.1.3",
-        "js-base64": "^2.1.9",
-        "source-map": "^0.5.6",
-        "supports-color": "^3.2.3"
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
       },
       "engines": {
-        "node": ">=0.12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/postcss-scss/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/postcss-scss/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.422",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.422.tgz",
+      "integrity": "sha512-UvA/32XqrLDdZSn7Jllo1AYNcWji/G0d5M0GTViE7KoGBiMunw3a34Sb2KO4ZZyrSEhqsxFoVhWWJshdyfKqJA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/postcss-scss/node_modules/supports-color": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-      "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
-      "dev": true,
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "has-flag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
+        "once": "^1.4.0"
       }
     },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.23.0.tgz",
+      "integrity": "sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
-    },
-    "node_modules/prelude-ls": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/preprocess": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/preprocess/-/preprocess-3.2.0.tgz",
-      "integrity": "sha512-cO+Rf+Ose/eD+ze8Hxd9p9nS1xT8thYqv8owG/V8+IS/Remd7Z17SvaRK/oJxp08yaM8zb+QTckDKJUul2pk7g==",
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
       "dev": true,
-      "dependencies": {
-        "xregexp": "3.1.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/prettier": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.0.tgz",
-      "integrity": "sha512-J9odKxERhCQ10OC2yb93583f6UnYutOeiV5i0zEDS7UGTdUt0u+y8erxl3lBKvwo/JHyyoEdXjwp4dke9oyZ/g==",
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
       "dev": true,
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fast-diff": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "dev": true,
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/proc-log": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",
-      "integrity": "sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
-    },
-    "node_modules/promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+    "node_modules/es-module-lexer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
+      "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
       "dev": true,
-      "optional": true,
-      "dependencies": {
-        "asap": "~2.0.3"
-      }
-    },
-    "node_modules/promise-inflight": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g=="
+      "license": "MIT"
     },
-    "node_modules/promise-retry": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
-      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "err-code": "^2.0.2",
-        "retry": "^0.12.0"
+        "es-errors": "^1.3.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/protractor": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/protractor/-/protractor-7.0.0.tgz",
-      "integrity": "sha512-UqkFjivi4GcvUQYzqGYNe0mLzfn5jiLmO8w9nMhQoJRLhy2grJonpga2IWhI6yJO30LibWXJJtA4MOIZD2GgZw==",
-      "deprecated": "We have news to share - Protractor is deprecated and will reach end-of-life by Summer 2023. To learn more and find out about other options please refer to this post on the Angular blog. Thank you for using and contributing to Protractor. https://goo.gle/state-of-e2e-in-angular",
-      "dev": true,
-      "dependencies": {
-        "@types/q": "^0.0.32",
-        "@types/selenium-webdriver": "^3.0.0",
-        "blocking-proxy": "^1.0.0",
-        "browserstack": "^1.5.1",
-        "chalk": "^1.1.3",
-        "glob": "^7.0.3",
-        "jasmine": "2.8.0",
-        "jasminewd2": "^2.1.0",
-        "q": "1.4.1",
-        "saucelabs": "^1.5.0",
-        "selenium-webdriver": "3.6.0",
-        "source-map-support": "~0.4.0",
-        "webdriver-js-extender": "2.1.0",
-        "webdriver-manager": "^12.1.7",
-        "yargs": "^15.3.1"
-      },
+    "node_modules/es-toolkit": {
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.48.1.tgz",
+      "integrity": "sha512-wfnXlwd5I75eXRtdD2vuEs50xHHESECDsGD7yiQnfFVNoa5522NwXEbmgo98LfiukSQHs+mBM7/YG3qKJB9/mQ==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
       "bin": {
-        "protractor": "bin/protractor",
-        "webdriver-manager": "bin/webdriver-manager"
+        "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=10.13.x"
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
       }
     },
-    "node_modules/protractor/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/protractor/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/protractor/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
+    "node_modules/eslint": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.6.0.tgz",
+      "integrity": "sha512-6lVbcqSodALYo+4ELD0heG6lFiFxnLMuLkiMi2qV8LMp54N8tE8FT1GMH+ev4Ti00nFjNze2+Su6DsV5OQW3Dg==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@eslint/config-array": "^0.23.5",
+        "@eslint/config-helpers": "^0.6.0",
+        "@eslint/core": "^1.2.1",
+        "@eslint/plugin-kit": "^0.7.2",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^9.1.2",
+        "eslint-visitor-keys": "^5.0.1",
+        "espree": "^11.2.0",
+        "esquery": "^1.7.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "minimatch": "^10.2.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/protractor/node_modules/cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
       }
     },
-    "node_modules/protractor/node_modules/cliui/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
-      "engines": {
-        "node": ">=8"
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
       }
     },
-    "node_modules/protractor/node_modules/cliui/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.5.6",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.6.tgz",
+      "integrity": "sha512-ifetmTcxWfz+4qRW3pH/ujdTq2jQIj59AxJMIN26K5avYgU8dxycUETQonWiW+wPrYXA0j3Try0l1CnwVQtDqQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "prettier-linter-helpers": "^1.0.1",
+        "synckit": "^0.11.13"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/protractor/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-4.0.4.tgz",
+      "integrity": "sha512-cN43gHInx32ZwymgBPz6wQcH/QWEn/1fXvu51KfwFZMTGimviXcn61CPR8NY4mpstgNkbCqN9UVCspr+YqpV9w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
+        "@typescript-eslint/utils": "^8.37.0",
+        "postcss": "^8.4.4",
+        "postcss-nested": "^7.0.2",
+        "synckit": "^0.11.11",
+        "tailwind-api-utils": "^1.0.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/protractor/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
+    "node_modules/eslint-scope": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+      "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "p-locate": "^4.1.0"
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/protractor/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=6"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/protractor/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "license": "MIT",
       "dependencies": {
-        "p-limit": "^2.2.0"
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/protractor/node_modules/q": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz",
-      "integrity": "sha512-/CdEdaw49VZVmyIDGUQKDDT53c7qBkO6g5CefWz91Ae+l4+cRtcDYwMTXh6me4O8TMldeGHG3N2Bl84V78Ywbg==",
-      "dev": true,
+    "node_modules/eslint/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.6.0",
-        "teleport": ">=0.2.0"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/protractor/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/protractor/node_modules/source-map-support": {
-      "version": "0.4.18",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
-      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
-      "dev": true,
-      "dependencies": {
-        "source-map": "^0.5.6"
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/protractor/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/protractor/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">= 4"
       }
     },
-    "node_modules/protractor/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "dev": true
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "license": "MIT"
     },
-    "node_modules/protractor/node_modules/yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "dev": true,
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/protractor/node_modules/yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
+        "node": "18 || 20 || >=22"
       },
-      "engines": {
-        "node": ">=6"
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
+    "node_modules/espree": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+      "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
+        "acorn": "^8.16.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.1"
       },
       "engines": {
-        "node": ">= 0.10"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/proxy-addr/node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true,
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">= 0.10"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true
-    },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-      "dev": true
-    },
-    "node_modules/pug": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.4.tgz",
-      "integrity": "sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "pug-code-gen": "^2.0.2",
-        "pug-filters": "^3.1.1",
-        "pug-lexer": "^4.1.0",
-        "pug-linker": "^3.0.6",
-        "pug-load": "^2.0.12",
-        "pug-parser": "^5.0.1",
-        "pug-runtime": "^2.0.5",
-        "pug-strip-comments": "^1.0.4"
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
       }
     },
-    "node_modules/pug-attrs": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.4.tgz",
-      "integrity": "sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "constantinople": "^3.0.1",
-        "js-stringify": "^1.0.1",
-        "pug-runtime": "^2.0.5"
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
       }
     },
-    "node_modules/pug-code-gen": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.3.tgz",
-      "integrity": "sha512-r9sezXdDuZJfW9J91TN/2LFbiqDhmltTFmGpHTsGdrNGp3p4SxAjjXEfnuK2e4ywYsRIVP0NeLbSAMHUcaX1EA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "constantinople": "^3.1.2",
-        "doctypes": "^1.1.0",
-        "js-stringify": "^1.0.1",
-        "pug-attrs": "^2.0.4",
-        "pug-error": "^1.3.3",
-        "pug-runtime": "^2.0.5",
-        "void-elements": "^2.0.1",
-        "with": "^5.0.0"
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
       }
     },
-    "node_modules/pug-error": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.3.tgz",
-      "integrity": "sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/pug-filters": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.1.tgz",
-      "integrity": "sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==",
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "dependencies": {
-        "clean-css": "^4.1.11",
-        "constantinople": "^3.0.1",
-        "jstransformer": "1.0.0",
-        "pug-error": "^1.3.3",
-        "pug-walk": "^1.1.8",
-        "resolve": "^1.1.6",
-        "uglify-js": "^2.6.1"
+        "@types/estree": "^1.0.0"
       }
     },
-    "node_modules/pug-filters/node_modules/camelcase": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
-      "dev": true,
-      "optional": true,
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pug-filters/node_modules/cliui": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-      "integrity": "sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "center-align": "^0.1.1",
-        "right-align": "^0.1.1",
-        "wordwrap": "0.0.2"
-      }
-    },
-    "node_modules/pug-filters/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/pug-filters/node_modules/uglify-js": {
-      "version": "2.8.29",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
-      "integrity": "sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==",
+    "node_modules/eventsource": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "dependencies": {
-        "source-map": "~0.5.1",
-        "yargs": "~3.10.0"
-      },
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
+        "eventsource-parser": "^3.0.1"
       },
       "engines": {
-        "node": ">=0.8.0"
-      },
-      "optionalDependencies": {
-        "uglify-to-browserify": "~1.0.0"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/pug-filters/node_modules/wordwrap": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
+    "node_modules/eventsource-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.0.tgz",
+      "integrity": "sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/pug-filters/node_modules/yargs": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
-      "dev": true,
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
       "optional": true,
-      "dependencies": {
-        "camelcase": "^1.0.2",
-        "cliui": "^2.1.0",
-        "decamelize": "^1.0.0",
-        "window-size": "0.1.0"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/pug-lexer": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.1.0.tgz",
-      "integrity": "sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==",
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
       "dev": true,
-      "optional": true,
-      "dependencies": {
-        "character-parser": "^2.1.1",
-        "is-expression": "^3.0.0",
-        "pug-error": "^1.3.3"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "node_modules/pug-linker": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.6.tgz",
-      "integrity": "sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==",
+    "node_modules/exponential-backoff": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
+      "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
       "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pug-error": "^1.3.3",
-        "pug-walk": "^1.1.8"
-      }
+      "license": "Apache-2.0"
     },
-    "node_modules/pug-load": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.12.tgz",
-      "integrity": "sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "object-assign": "^4.1.0",
-        "pug-walk": "^1.1.8"
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/pug-parser": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.1.tgz",
-      "integrity": "sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==",
+    "node_modules/express-rate-limit": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.5.2.tgz",
+      "integrity": "sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "dependencies": {
-        "pug-error": "^1.3.3",
-        "token-stream": "0.0.1"
+        "ip-address": "^10.2.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
       }
     },
-    "node_modules/pug-runtime": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.5.tgz",
-      "integrity": "sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==",
+    "node_modules/exsolve": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
       "dev": true,
-      "optional": true
+      "license": "MIT"
     },
-    "node_modules/pug-strip-comments": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz",
-      "integrity": "sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pug-error": "^1.3.3"
-      }
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
     },
-    "node_modules/pug-walk": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.8.tgz",
-      "integrity": "sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==",
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
       "dev": true,
-      "optional": true
+      "license": "Apache-2.0"
     },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "engines": {
-        "node": ">=6"
-      }
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "license": "MIT"
     },
-    "node_modules/q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6.0",
-        "teleport": ">=0.2.0"
-      }
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "license": "MIT"
     },
-    "node_modules/qjobs": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz",
-      "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
+    "node_modules/fast-string-truncated-width": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz",
+      "integrity": "sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==",
       "dev": true,
-      "engines": {
-        "node": ">=0.9"
-      }
+      "license": "MIT"
     },
-    "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dev": true,
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+    "node_modules/fast-string-width": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fast-string-width/-/fast-string-width-3.0.2.tgz",
+      "integrity": "sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-string-truncated-width": "^3.0.2"
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+    "node_modules/fast-uri": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.6.tgz",
+      "integrity": "sha512-7Ical1vFEMr0onbVzEDIreM22I4khW+fzyQPwvAFWBp1iwdshSZRsL4jjRvPG9JP1uiqMHRto+YU6R2/CzDz5Q==",
       "dev": true,
       "funding": [
         {
           "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
+          "url": "https://github.com/sponsors/fastify"
         },
         {
-          "type": "consulting",
-          "url": "https://feross.org/support"
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
         }
-      ]
+      ],
+      "license": "BSD-3-Clause"
     },
-    "node_modules/quick-lru": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+    "node_modules/fast-wrap-ansi": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.2.tgz",
+      "integrity": "sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-string-width": "^3.0.2"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
       }
     },
-    "node_modules/randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "license": "MIT",
       "dependencies": {
-        "safe-buffer": "^5.1.0"
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
       }
     },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/raw-body": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "dev": true,
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "license": "MIT",
       "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "license": "MIT",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=16"
       }
     },
-    "node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "license": "ISC"
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true,
-      "dependencies": {
-        "pify": "^2.3.0"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/read-cache/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/read-package-json": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-7.0.1.tgz",
-      "integrity": "sha512-8PcDiZ8DXUjLf687Ol4BR8Bpm2umR7vhoZOzNRt+uxD9GpBh/K+CAAALVIiYFknmvlmyg7hM7BSNUXPaCCqd0Q==",
-      "deprecated": "This package is no longer supported. Please use @npmcli/package-json instead.",
-      "dependencies": {
-        "glob": "^10.2.2",
-        "json-parse-even-better-errors": "^3.0.0",
-        "normalize-package-data": "^6.0.0",
-        "npm-normalize-package-bin": "^3.0.0"
-      },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/read-package-json-fast": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
-      "integrity": "sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==",
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "json-parse-even-better-errors": "^3.0.0",
-        "npm-normalize-package-bin": "^3.0.0"
+        "minipass": "^7.0.3"
       },
       "engines": {
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/read-package-json/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/read-package-json/node_modules/hosted-git-info": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
-      "integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
-      "dependencies": {
-        "lru-cache": "^10.0.1"
-      },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/read-package-json/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
       "engines": {
-        "node": "14 || >=16.14"
+        "node": "6.* || 8.* || >= 10.*"
       }
     },
-    "node_modules/read-package-json/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/read-package-json/node_modules/normalize-package-data": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.1.tgz",
-      "integrity": "sha512-6rvCfeRW+OEZagAB4lMLSNuTNYZWLVtKccK79VSTf//yTY5VOCgcpH80O+bZK8Neps7pUnd5G+QlMg1yV/2iZQ==",
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "hosted-git-info": "^7.0.0",
-        "is-core-module": "^2.8.1",
-        "semver": "^7.3.5",
-        "validate-npm-package-license": "^3.0.4"
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/read-pkg": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-      "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "load-json-file": "^4.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^3.0.0"
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+    "node_modules/git-raw-commits": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-5.0.1.tgz",
+      "integrity": "sha512-Y+csSm2GD/PCSh6Isd/WiMjNAydu0VBiG9J7EdQsNA5P9uXvLayqjmTsNlK5Gs9IhblFZqOU0yid5Il5JPoLiQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
+        "@conventional-changelog/git-client": "^2.6.0",
+        "meow": "^13.0.0"
       },
-      "engines": {
-        "node": ">=8"
+      "bin": {
+        "git-raw-commits": "src/cli.js"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/read-pkg-up/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
       "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
+        "is-glob": "^4.0.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/read-pkg-up/node_modules/hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "dev": true
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "license": "BSD-2-Clause"
     },
-    "node_modules/read-pkg-up/node_modules/locate-path": {
+    "node_modules/global-directory": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-5.0.0.tgz",
+      "integrity": "sha512-1pgFdhK3J2LeM+dVf2Pd424yHx2ou338lC0ErNP2hPx4j8eW1Sp0XqSjNxtk6Tc4Kr5wlWtSvz8cn2yb7/SG/w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "p-locate": "^4.1.0"
+        "ini": "6.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/read-pkg-up/node_modules/normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "dev": true,
-      "dependencies": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/read-pkg-up/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/read-pkg-up/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "p-limit": "^2.2.0"
+        "function-bind": "^1.1.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/read-pkg-up/node_modules/read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+    "node_modules/hono": {
+      "version": "4.13.7",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.13.7.tgz",
+      "integrity": "sha512-c8/gF9ac8Y78/agExVocyLevgR+JlpNB444Py0FSX8pJoPdYUfUzRcXtYEYGwt6l19qIlVZPN5Mfsw9jFShmQQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-9.0.3.tgz",
+      "integrity": "sha512-Hc+ghLoSt6QaYZUv0WBiIvmMDZuZZ7oaDvdH8MbfOO4lOsxdXLEvuC6ePoGs9H1X9oCLyq6+NVN0MKqD+ydxyg==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
+        "lru-cache": "^11.1.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/read-pkg-up/node_modules/read-pkg/node_modules/type-fest": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=8"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/read-pkg-up/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
       "dev": true,
-      "bin": {
-        "semver": "bin/semver"
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
-    "node_modules/read-pkg-up/node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true,
+    "node_modules/html2canvas": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz",
+      "integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "1.1.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/read-pkg/node_modules/hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "dev": true
+    "node_modules/html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==",
+      "license": "Apache-2.0"
     },
-    "node_modules/read-pkg/node_modules/normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+    "node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
       "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
       }
     },
-    "node_modules/read-pkg/node_modules/path-type": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
       "dev": true,
-      "dependencies": {
-        "pify": "^3.0.0"
-      },
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=4"
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/read-pkg/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+    "node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
       "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
+      "license": "BSD-2-Clause"
     },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "devOptional": true,
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "picomatch": "^2.2.1"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">= 14"
       }
     },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
+    "node_modules/http-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+        "node": ">= 14"
       }
     },
-    "node_modules/rechoir": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
-      "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+    "node_modules/https-proxy-agent": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-9.0.0.tgz",
+      "integrity": "sha512-/MVmHp58WkOypgFhCLk4fzpPcFQvTJ/e6LBI7irpIO2HfxUbpmYoHF+KzipzJpxxzJu7aJNWQ0xojJ/dzV2G5g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "resolve": "^1.9.0"
+        "agent-base": "9.0.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 0.10"
+        "node": ">= 20"
       }
     },
-    "node_modules/redent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
       "dev": true,
-      "dependencies": {
-        "indent-string": "^4.0.0",
-        "strip-indent": "^3.0.0"
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
       }
     },
-    "node_modules/reflect-metadata": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
-      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "dev": true
-    },
-    "node_modules/regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true
-    },
-    "node_modules/regenerate-unicode-properties": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz",
-      "integrity": "sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==",
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "regenerate": "^1.4.2"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true
     },
-    "node_modules/regenerator-transform": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
-      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.8.4"
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
       }
     },
-    "node_modules/regex-not": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+    "node_modules/ignore-walk": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-8.0.0.tgz",
+      "integrity": "sha512-FCeMZT4NiRQGh+YkeKMtWrOmBgWjHjMJ26WQWrRQyoyzqevdaGSakUaJW5xQYmjLlUVk2qUnCjYVBax9EKKg8A==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "extend-shallow": "^3.0.2",
-        "safe-regex": "^1.1.0"
+        "minimatch": "^10.0.3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/regex-not/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+    "node_modules/ignore-walk/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
+        "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/regex-not/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+    "node_modules/ignore-walk/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "is-plain-object": "^2.0.4"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/regex-parser": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.0.tgz",
-      "integrity": "sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==",
-      "dev": true
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/immutable": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
+      "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/regexpu-core": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
-      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true,
-      "dependencies": {
-        "@babel/regjsgen": "^0.8.0",
-        "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.1.0",
-        "regjsparser": "^0.9.1",
-        "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.1.0"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/regjsparser": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
-      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
+      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
       "dev": true,
-      "dependencies": {
-        "jsesc": "~0.5.0"
-      },
-      "bin": {
-        "regjsparser": "bin/parser"
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/regjsparser/node_modules/jsesc": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+    "node_modules/ip-address": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.5.0.tgz",
+      "integrity": "sha512-R5SnVLJmgYYvf2F2ZgwSBnelz5G4q5AxIC277GDfUaNbrZKNANcBC7RHqYYePlszf4kBolVkJauG0ZjHHFh55g==",
       "dev": true,
-      "bin": {
-        "jsesc": "bin/jsesc"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
       }
     },
-    "node_modules/relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.10"
       }
     },
-    "node_modules/remove-trailing-separator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==",
-      "dev": true
-    },
-    "node_modules/repeat-element": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
-      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+    "node_modules/is-fullwidth-code-point": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
       "engines": {
-        "node": ">=0.10"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/request": {
-      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
-      "dev": true,
-      "dependencies": {
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.8.0",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "form-data": "~2.3.2",
-        "har-validator": "~5.1.3",
-        "http-signature": "~1.2.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.19",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.2",
-        "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.5.0",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^3.3.2"
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/request/node_modules/form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+    "node_modules/is-interactive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+      "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
       "dev": true,
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.12"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/request/node_modules/qs": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.6"
+        "node": ">=8"
       }
     },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
+      "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/require-main-filename": {
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "dev": true
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "devOptional": true,
+      "license": "MIT",
       "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
-    "node_modules/resolve-dir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
-      "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+    "node_modules/jose": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz",
+      "integrity": "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==",
       "dev": true,
-      "dependencies": {
-        "expand-tilde": "^2.0.0",
-        "global-modules": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
       }
     },
-    "node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
+      "license": "MIT"
     },
-    "node_modules/resolve-global": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-global/-/resolve-global-1.0.0.tgz",
-      "integrity": "sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==",
+    "node_modules/js-yaml": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz",
+      "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "global-dirs": "^0.1.1"
+        "argparse": "^2.0.1"
       },
-      "engines": {
-        "node": ">=8"
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/resolve-pkg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pkg/-/resolve-pkg-2.0.0.tgz",
-      "integrity": "sha512-+1lzwXehGCXSeryaISr6WujZzowloigEofRB+dj75y9RRa/obVcYgbHJd53tdYw8pvZj8GojXaaENws8Ktw/hQ==",
+    "node_modules/jsdom": {
+      "version": "29.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "resolve-from": "^5.0.0"
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
       }
     },
-    "node_modules/resolve-url": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
-      "deprecated": "https://github.com/lydell/resolve-url#deprecated",
-      "dev": true
-    },
-    "node_modules/resolve-url-loader": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz",
-      "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==",
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
       "dev": true,
-      "dependencies": {
-        "adjust-sourcemap-loader": "^4.0.0",
-        "convert-source-map": "^1.7.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.14",
-        "source-map": "0.6.1"
-      },
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=12"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/resolve-url-loader/node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+    "node_modules/jsdom/node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
+        "tldts": "^7.0.5"
       },
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">=16"
       }
     },
-    "node_modules/resolve-url-loader/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+    "node_modules/jsdom/node_modules/undici": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.29.0.tgz",
+      "integrity": "sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=20.18.1"
       }
     },
-    "node_modules/restore-cursor": {
+    "node_modules/jsesc": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dependencies": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "license": "MIT"
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-5.0.0.tgz",
+      "integrity": "sha512-ZF1nxZ28VhQouRWhUcVlUIN3qwSgPuswK05s/HIaoetAoE/9tngVmCHjSxmSQPav1nd+lPtTL0YZ/2AFdR/iYQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.12"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
-      "engines": {
-        "node": ">= 4"
-      }
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+    "node_modules/json-schema-typed": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+      "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
       "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/rfdc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
-      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
-      "dev": true
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/right-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-      "integrity": "sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==",
+    "node_modules/jsonparse": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
+      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
       "dev": true,
-      "optional": true,
+      "engines": [
+        "node >= 0.2.0"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "license": "MIT",
       "dependencies": {
-        "align-text": "^0.1.1"
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "devOptional": true,
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
       "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "immediate": "~3.0.5"
       }
     },
-    "node_modules/rollup": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
-      "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
-      "dev": true,
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
       "dependencies": {
-        "@types/estree": "1.0.5"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
+        "detect-libc": "^2.0.3"
       },
       "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.18.0",
-        "@rollup/rollup-android-arm64": "4.18.0",
-        "@rollup/rollup-darwin-arm64": "4.18.0",
-        "@rollup/rollup-darwin-x64": "4.18.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.18.0",
-        "@rollup/rollup-linux-arm64-musl": "4.18.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.18.0",
-        "@rollup/rollup-linux-x64-gnu": "4.18.0",
-        "@rollup/rollup-linux-x64-musl": "4.18.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.18.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.18.0",
-        "@rollup/rollup-win32-x64-msvc": "4.18.0",
-        "fsevents": "~2.3.2"
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/run-async": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz",
-      "integrity": "sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q==",
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
       ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/rx": {
-      "version": "2.3.24",
-      "resolved": "https://registry.npmjs.org/rx/-/rx-2.3.24.tgz",
-      "integrity": "sha512-Ue4ZB7Dzbn2I9sIj8ws536nOP2S53uypyCkCz9q0vlYD5Kn6/pu4dE+wt2ZfFzd9m73hiYKnnCb1OyKqc+MRkg==",
-      "dev": true
-    },
-    "node_modules/rxjs": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.4.0.tgz",
-      "integrity": "sha512-7SQDi7xeTMCJpqViXh8gL/lebcwlp3d831F05+9B44A4B0WfsEwUQHR64gsH1kvJ+Ep/J9K2+n1hVl1CsGN23w==",
-      "dependencies": {
-        "tslib": "~2.1.0"
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/rxjs/node_modules/tslib": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
-    },
-    "node_modules/safe-array-concat": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
-      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.2.4",
-        "has-symbols": "^1.0.3",
-        "isarray": "^2.0.5"
-      },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=0.4"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
-    },
-    "node_modules/safe-json-parse": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-1.0.1.tgz",
-      "integrity": "sha512-o0JmTu17WGUaUOHa1l0FPGXKBfijbxK6qoHzlkihsDXxzBHvJcA7zgviKR92Xs841rX9pK16unfphLq0/KqX7A==",
-      "dev": true
-    },
-    "node_modules/safe-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
-      "dev": true,
-      "dependencies": {
-        "ret": "~0.1.10"
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/safe-regex-test": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
-      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.6",
-        "es-errors": "^1.3.0",
-        "is-regex": "^1.1.4"
-      },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 0.4"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "node_modules/safevalues": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/safevalues/-/safevalues-0.3.4.tgz",
-      "integrity": "sha512-LRneZZRXNgjzwG4bDQdOTSbze3fHm1EAKN/8bePxnlEZiBmkYEDggaHbuvHI9/hoqHbGfsEA7tWS9GhYHZBBsw=="
-    },
-    "node_modules/sass": {
-      "version": "1.77.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.4.tgz",
-      "integrity": "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==",
-      "dev": true,
-      "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/sass-loader": {
-      "version": "14.1.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.1.1.tgz",
-      "integrity": "sha512-QX8AasDg75monlybel38BZ49JP5Z+uSKfKwF2rO7S74BywaRmGQMUBw9dtkS+ekyM/QnP+NOrRYq8ABMZ9G8jw==",
-      "dev": true,
-      "dependencies": {
-        "neo-async": "^2.6.2"
-      },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 18.12.0"
+        "node": ">= 12.0.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
-        "sass": "^1.3.0",
-        "sass-embedded": "*",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "node-sass": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/saucelabs": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.5.0.tgz",
-      "integrity": "sha512-jlX3FGdWvYf4Q3LFfFWS1QvPg3IGCGWxIc8QBFdPTbpTJnt/v17FHXYVAn7C8sHf1yUXo2c7yIM0isDryfYtHQ==",
-      "dev": true,
-      "dependencies": {
-        "https-proxy-agent": "^2.2.1"
-      },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": "*"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/saucelabs/node_modules/agent-base": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
-      "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
-      "dev": true,
-      "dependencies": {
-        "es6-promisify": "^5.0.0"
-      },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 4.0.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/saucelabs/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
+      "license": "MIT"
     },
-    "node_modules/saucelabs/node_modules/https-proxy-agent": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-      "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
+    "node_modules/listr2": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-10.2.1.tgz",
+      "integrity": "sha512-7I5knELsJKTUjXG+A6BkKAiGkW1i25fNa/xlUl9hFtk15WbE9jndA89xu5FzQKrY5llajE1hfZZFMILXkDHk/Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "agent-base": "^4.3.0",
-        "debug": "^3.1.0"
+        "cli-truncate": "^5.2.0",
+        "eventemitter3": "^5.0.4",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^10.0.0"
       },
       "engines": {
-        "node": ">= 4.5.0"
+        "node": ">=22.13.0"
       }
     },
-    "node_modules/sax": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
-      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "dev": true
-    },
-    "node_modules/schema-utils": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
-      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.9.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.1.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">=12"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/select-hose": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
-      "dev": true
+    "node_modules/listr2/node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/selenium-webdriver": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz",
-      "integrity": "sha512-WH7Aldse+2P5bbFBO4Gle/nuQOdVwpHMTL6raL3uuBj/vPG07k6uzt3aiahu352ONBr5xXh0hDlM3LhtXPOC4Q==",
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-10.0.0.tgz",
+      "integrity": "sha512-SGcvg80f0wUy2/fXES19feHMz8E0JoXv2uNgHOu4Dgi2OrCy1lqwFYEJz1BLbDI0exjPMe/ZdzZ/YpGECBG/aQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "jszip": "^3.1.3",
-        "rimraf": "^2.5.4",
-        "tmp": "0.0.30",
-        "xml2js": "^0.4.17"
+        "ansi-styles": "^6.2.3",
+        "string-width": "^8.2.0",
+        "strip-ansi": "^7.1.2"
       },
       "engines": {
-        "node": ">= 6.9.0"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/selenium-webdriver/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+    "node_modules/lmdb": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.5.4.tgz",
+      "integrity": "sha512-9FKQA6G1MMtqNxfxvSBNXD/axeG2QRjYbNh0/ykRL5xYcRbCm2vXq7B9bhc7nSuKdHzr8/BHIwfPuYYH1UsXXw==",
       "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "glob": "^7.1.3"
+        "@harperfast/extended-iterable": "^1.0.3",
+        "msgpackr": "^1.11.2",
+        "node-addon-api": "^6.1.0",
+        "node-gyp-build-optional-packages": "5.2.2",
+        "ordered-binary": "^1.5.3",
+        "weak-lru-cache": "^1.2.2"
       },
       "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/selenium-webdriver/node_modules/tmp": {
-      "version": "0.0.30",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.30.tgz",
-      "integrity": "sha512-HXdTB7lvMwcb55XFfrTM8CPr/IYREk4hVBFaQ4b/6nInrluSL86hfHm7vu0luYKCfyBZp2trCjpc8caC3vVM3w==",
-      "dev": true,
-      "dependencies": {
-        "os-tmpdir": "~1.0.1"
+        "download-lmdb-prebuilds": "bin/download-prebuilds.js"
       },
-      "engines": {
-        "node": ">=0.4.0"
+      "optionalDependencies": {
+        "@lmdb/lmdb-darwin-arm64": "3.5.4",
+        "@lmdb/lmdb-darwin-x64": "3.5.4",
+        "@lmdb/lmdb-linux-arm": "3.5.4",
+        "@lmdb/lmdb-linux-arm64": "3.5.4",
+        "@lmdb/lmdb-linux-x64": "3.5.4",
+        "@lmdb/lmdb-win32-arm64": "3.5.4",
+        "@lmdb/lmdb-win32-x64": "3.5.4"
       }
     },
-    "node_modules/selfsigned": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
-      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
+    "node_modules/local-pkg": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/node-forge": "^1.3.0",
-        "node-forge": "^1"
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
       },
       "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
+        "node": ">=14"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/semver/node_modules/lru-cache": {
+    "node_modules/locate-path": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
+        "p-locate": "^5.0.0"
       },
       "engines": {
         "node": ">=10"
-      }
-    },
-    "node_modules/semver/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
-    "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
       },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/send/node_modules/debug/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/send/node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
       "dev": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "license": "MIT"
     },
-    "node_modules/send/node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+    "node_modules/log-symbols": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-7.0.1.tgz",
+      "integrity": "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ee-first": "1.1.1"
+        "is-unicode-supported": "^2.0.0",
+        "yoctocolors": "^2.1.1"
       },
       "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/send/node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/serialize-javascript": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
-      "dependencies": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "node_modules/serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
-      "dev": true,
-      "dependencies": {
-        "accepts": "~1.3.4",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.2",
-        "mime-types": "~2.1.17",
-        "parseurl": "~1.3.2"
+        "node": ">=18"
       },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/serve-index/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/serve-index/node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/serve-index/node_modules/http-errors": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.0",
-        "statuses": ">= 1.4.0 < 2"
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/serve-index/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-      "dev": true
-    },
-    "node_modules/serve-index/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
-    "node_modules/serve-index/node_modules/setprototypeof": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-      "dev": true
-    },
-    "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
-      "dependencies": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.18.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/set-function-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/set-value": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "is-extendable": "^0.1.1",
-        "is-plain-object": "^2.0.3",
-        "split-string": "^3.0.1"
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "dev": true
+    "node_modules/lottie-web": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
+      "integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
+      "license": "MIT"
     },
-    "node_modules/shallow-clone": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "kind-of": "^6.0.2"
-      },
-      "engines": {
-        "node": ">=8"
+        "yallist": "^3.0.2"
       }
     },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
       "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/shell-quote": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
-      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+      "license": "ISC"
     },
-    "node_modules/shelljs": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.3.0.tgz",
-      "integrity": "sha512-Ny0KN4dyT8ZSCE0frtcbAJGoM/HTArpyPkeli1/00aYfm0sbD/Gk/4x7N2DP9QKGpBsiQH7n6rpm1L79RtviEQ==",
+    "node_modules/make-fetch-happen": {
+      "version": "15.0.6",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-15.0.6.tgz",
+      "integrity": "sha512-Je0fLJ0F5atA7F+eIlLzk+Wkcl57JDf4kf+EW8xiP5E31xOQxkIxTbgf1Oi1Lw9tRI9UEMRdI5Vz2xTzoNU1Jw==",
       "dev": true,
-      "bin": {
-        "shjs": "bin/shjs"
+      "license": "ISC",
+      "dependencies": {
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/agent": "^4.0.0",
+        "@npmcli/redact": "^4.0.0",
+        "cacache": "^20.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^5.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^6.0.0",
+        "ssri": "^13.0.0"
       },
       "engines": {
-        "node": ">=0.8.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/showdown": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/showdown/-/showdown-1.9.1.tgz",
-      "integrity": "sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==",
-      "dependencies": {
-        "yargs": "^14.2"
-      },
+    "node_modules/marked": {
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.5.tgz",
+      "integrity": "sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w==",
+      "license": "MIT",
       "bin": {
-        "showdown": "bin/showdown.js"
-      }
-    },
-    "node_modules/showdown/node_modules/ansi-regex": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+        "marked": "bin/marked.js"
+      },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/showdown/node_modules/cliui": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-      "dependencies": {
-        "string-width": "^3.1.0",
-        "strip-ansi": "^5.2.0",
-        "wrap-ansi": "^5.1.0"
+        "node": ">= 20"
       }
     },
-    "node_modules/showdown/node_modules/emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
-    },
-    "node_modules/showdown/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dependencies": {
-        "locate-path": "^3.0.0"
-      },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/showdown/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/showdown/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
+    "node_modules/memorystream": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+      "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
+      "dev": true,
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.10.0"
       }
     },
-    "node_modules/showdown/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
+    "node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/showdown/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dependencies": {
-        "p-limit": "^2.0.0"
-      },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/showdown/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/showdown/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
+        "mime-db": "^1.54.0"
       },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/showdown/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
+        "node": ">=18"
       },
-      "engines": {
-        "node": ">=6"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/showdown/node_modules/wrap-ansi": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-      "dependencies": {
-        "ansi-styles": "^3.2.0",
-        "string-width": "^3.0.0",
-        "strip-ansi": "^5.0.0"
-      },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/showdown/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
-    },
-    "node_modules/showdown/node_modules/yargs": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-      "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
-      "dependencies": {
-        "cliui": "^5.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^3.0.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^3.0.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^15.0.1"
-      }
-    },
-    "node_modules/showdown/node_modules/yargs-parser": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.3.tgz",
-      "integrity": "sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==",
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
-      },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "optional": true,
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/sigmund": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-      "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g=="
-    },
-    "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
-    },
-    "node_modules/sigstore": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/sigstore/-/sigstore-2.3.1.tgz",
-      "integrity": "sha512-8G+/XDU8wNsJOQS5ysDVO0Etg9/2uA5gR9l4ZwijjlwxBcrU6RPfwi2+jJmbP+Ap1Hlp/nVAaEO4Fj22/SL2gQ==",
+    "node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@sigstore/bundle": "^2.3.2",
-        "@sigstore/core": "^1.0.0",
-        "@sigstore/protobuf-specs": "^0.3.2",
-        "@sigstore/sign": "^2.3.2",
-        "@sigstore/tuf": "^2.3.4",
-        "@sigstore/verify": "^1.2.1"
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/simple-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "optional": true
-    },
-    "node_modules/simple-fmt": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/simple-fmt/-/simple-fmt-0.1.0.tgz",
-      "integrity": "sha512-9a3zTDDh9LXbTR37qBhACWIQ/mP/ry5xtmbE98BJM8GR02sanCkfMzp7AdCTqYhkBZggK/w7hJtc8Pb9nmo16A==",
-      "dev": true
-    },
-    "node_modules/simple-get": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
-      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "decompress-response": "^4.2.0",
-        "once": "^1.3.1",
-        "simple-concat": "^1.0.0"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/simple-is": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/simple-is/-/simple-is-0.2.0.tgz",
-      "integrity": "sha512-GJXhv3r5vdj5tGWO+rcrWgjU2azLB+fb7Ehh3SmZpXE0o4KrrFLti0w4mdDCbR29X/z0Ls20ApjZitlpAXhAeg==",
-      "dev": true
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
     },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+    "node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-2.0.1.tgz",
+      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
       "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/smart-buffer": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
-      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+    "node_modules/minipass-fetch": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-5.0.2.tgz",
+      "integrity": "sha512-2d0q2a8eCi2IRg/IGubCNRJoYbA1+YPXAzQVRFmB45gdGZafyivnZ5YSEfo3JikbjGxOdntGFvBQGqaSMXlAFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^2.0.0",
+        "minizlib": "^3.0.1"
+      },
       "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
+        "node": "^20.17.0 || >=22.9.0"
+      },
+      "optionalDependencies": {
+        "iconv-lite": "^0.7.2"
       }
     },
-    "node_modules/snapdragon": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+    "node_modules/minipass-flush": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.7.tgz",
+      "integrity": "sha512-TbqTz9cUwWyHS2Dy89P3ocAGUGxKjjLuR9z8w4WUTGAVgEj17/4nhgo2Du56i0Fm3Pm30g4iA8Lcqctc76jCzA==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "base": "^0.11.1",
-        "debug": "^2.2.0",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "map-cache": "^0.2.2",
-        "source-map": "^0.5.6",
-        "source-map-resolve": "^0.5.0",
-        "use": "^3.1.0"
+        "minipass": "^3.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/snapdragon-node": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.0",
-        "snapdragon-util": "^3.0.1"
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/snapdragon-node/node_modules/define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "is-descriptor": "^1.0.0"
+        "minipass": "^3.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/snapdragon-node/node_modules/is-descriptor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
-      "integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "is-accessor-descriptor": "^1.0.1",
-        "is-data-descriptor": "^1.0.1"
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
       }
     },
-    "node_modules/snapdragon-util": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-sized": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-2.0.0.tgz",
+      "integrity": "sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "kind-of": "^3.2.0"
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/snapdragon-util/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-buffer": "^1.1.5"
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 18"
       }
     },
-    "node_modules/snapdragon/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
       }
     },
-    "node_modules/snapdragon/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/snapdragon/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "*"
       }
     },
-    "node_modules/socket.io": {
-      "version": "4.7.5",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.5.tgz",
-      "integrity": "sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==",
-      "dev": true,
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
       "dependencies": {
-        "accepts": "~1.3.4",
-        "base64id": "~2.0.0",
-        "cors": "~2.8.5",
-        "debug": "~4.3.2",
-        "engine.io": "~6.5.2",
-        "socket.io-adapter": "~2.5.2",
-        "socket.io-parser": "~4.2.4"
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
+    "node_modules/monaco-editor/node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
       },
       "engines": {
-        "node": ">=10.2.0"
+        "node": ">= 18"
       }
     },
-    "node_modules/socket.io-adapter": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.4.tgz",
-      "integrity": "sha512-wDNHGXGewWAjQPt3pyeYBtpWSq9cLE5UW1ZUPL/2eGK9jtse/FpXib7epSTsz0Q0m+6sg6Y4KtcFTlah1bdOVg==",
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
       "dev": true,
-      "dependencies": {
-        "debug": "~4.3.4",
-        "ws": "~8.11.0"
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/msgpackr": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.12.1.tgz",
+      "integrity": "sha512-4EUH9tQHnMmEgzW/MdAP0KIfa1T9AF+htl0ffe2n5vb2EKn9y2co8ccpgWko6S52Jy1PQZKwRnx5/KkYjtd9MQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "optionalDependencies": {
+        "msgpackr-extract": "^3.0.2"
       }
     },
-    "node_modules/socket.io-parser": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
-      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+    "node_modules/msgpackr-extract": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.4.tgz",
+      "integrity": "sha512-4kmO/MdyUIkLIvTPr8VHLil4AtoKIoniWPIEk5+CDy0xnWC84azhSFmuJ7PxZdsYtiP5kEeQsORAVIeMgxT+Hw==",
       "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.3.1"
+        "node-gyp-build-optional-packages": "5.2.2"
+      },
+      "bin": {
+        "download-msgpackr-prebuilds": "bin/download-prebuilds.js"
+      },
+      "optionalDependencies": {
+        "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.4"
+      }
+    },
+    "node_modules/mute-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-3.0.0.tgz",
+      "integrity": "sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/sockjs": {
-      "version": "0.3.24",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
-      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ng-flex-layout": {
+      "version": "17.3.7-beta.1",
+      "resolved": "https://registry.npmjs.org/ng-flex-layout/-/ng-flex-layout-17.3.7-beta.1.tgz",
+      "integrity": "sha512-MTjlQUldB/hEsn0DY/RoY2SKBQoyaKltlOOFjCjH2OfcYA3COHhkJS3PZe9NAjR7TBDb9Ve989m18bSucRzACQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": ">=17.0.0",
+        "@angular/common": ">=17.0.0",
+        "@angular/core": ">=17.0.0",
+        "@angular/platform-browser": ">=17.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/ng2-pdf-viewer": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-10.4.0.tgz",
+      "integrity": "sha512-TPh1oLZoeARggreTG60Sl3ikSn+Z3+At9pLZ0o/vxPjc7mW2ok2XPyl2Oqz7VyP80ipVorldm1hsLPBmNe2zzA==",
+      "license": "MIT",
       "dependencies": {
-        "faye-websocket": "^0.11.3",
-        "uuid": "^8.3.2",
-        "websocket-driver": "^0.7.4"
+        "pdfjs-dist": "4.8.69",
+        "tslib": "^2.8.1"
       }
     },
-    "node_modules/sockjs/node_modules/faye-websocket": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-      "dev": true,
+    "node_modules/ngx-entity-service": {
+      "version": "0.0.44",
+      "resolved": "https://registry.npmjs.org/ngx-entity-service/-/ngx-entity-service-0.0.44.tgz",
+      "integrity": "sha512-FmSYKulHJxILKzLkBhXjNJsMdd55Slu11/TLg89GJZq3guBBD8RDsxHtbN1mKku5+Dp8i8H6vNSqJ3bwsyYwVw==",
       "dependencies": {
-        "websocket-driver": ">=0.5.1"
+        "tslib": "^2.3.0"
       },
-      "engines": {
-        "node": ">=0.8.0"
+      "peerDependencies": {
+        "@angular/common": "^13.0 || ^14.0 || ^15.0 || ^16.0 || ^17 || ^18 || ^19 || ^20 || ^21 || ^22",
+        "@angular/core": "^13.0 || ^14.0 || ^15.0 || ^16.0 || ^17 || ^18 || ^19 || ^20 || ^21 || ^22"
       }
     },
-    "node_modules/sockjs/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "bin": {
-        "uuid": "dist/bin/uuid"
+    "node_modules/ngx-lottie": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-lottie/-/ngx-lottie-22.0.0.tgz",
+      "integrity": "sha512-nsKk2fJifG2H4AWNYanF/wfJ3FsWzClkxkcD7KnzD6qpIwDrDU+89Tguv8h9i3Q9rn4r4awxvewYTJkrrIsj1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@scarf/scarf": "^1.1.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=22",
+        "lottie-web": ">=5.9.2"
       }
     },
-    "node_modules/socks": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
-      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
+    "node_modules/ngx-monaco-editor-v2-alternative": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-monaco-editor-v2-alternative/-/ngx-monaco-editor-v2-alternative-22.0.0.tgz",
+      "integrity": "sha512-JB5eSWdtDhJF5hhuDUQQyABfx+1JHHWFwvhdn/R74twxE2NcCODWqgPFNKYLZhWKiPIG/w6TlpsyfS68wRNw0g==",
+      "license": "MIT",
       "dependencies": {
-        "ip-address": "^9.0.5",
-        "smart-buffer": "^4.2.0"
+        "tslib": "^2.4.0"
       },
-      "engines": {
-        "node": ">= 10.0.0",
-        "npm": ">= 3.0.0"
+      "peerDependencies": {
+        "@angular/common": "^22.0.0",
+        "@angular/core": "^22.0.0",
+        "monaco-editor": "^0.55.1"
       }
     },
-    "node_modules/socks-proxy-agent": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz",
-      "integrity": "sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==",
+    "node_modules/ngx-skeleton-loader": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-skeleton-loader/-/ngx-skeleton-loader-13.0.0.tgz",
+      "integrity": "sha512-IEJh0RbrQRA1MHWdFTpLtbibk6KulRno+YqibsCCankr3FVEl3JwspcbHhxQuWahC8EuahJLrcBPLYxFyF/Swg==",
+      "license": "MIT",
       "dependencies": {
-        "agent-base": "^7.1.1",
-        "debug": "^4.3.4",
-        "socks": "^2.7.1"
+        "tslib": "^2.0.0"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "@angular/common": ">=19.0.0",
+        "@angular/core": ">=19.0.0"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+    "node_modules/node-abi": {
+      "version": "3.94.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.94.0.tgz",
+      "integrity": "sha512-W5ZNO5KRPB5TkYmGVD9F6YqhsglXJzE6etpbmT+f6EQElhiX/UTG551cnsRGvLG3fyZEg9HwaDmNmj5nwJ4z9g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
       "engines": {
-        "node": ">= 8"
+        "node": ">=10"
       }
     },
-    "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+    "node_modules/node-addon-api": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/source-map-loader": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-5.0.0.tgz",
-      "integrity": "sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==",
+    "node_modules/node-gyp": {
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.4.0.tgz",
+      "integrity": "sha512-OMcPNvqTCFUnNaBlmdgq+lfNqY7gTiSmNRDjY3uAXRyudeKZEZxu3CLtjMQrx4zZxCX2b/mpNqTtwuCJgXhHkw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 18.12.0"
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "nopt": "^9.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.5.4",
+        "tinyglobby": "^0.2.12",
+        "undici": "^6.25.0",
+        "which": "^6.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
       },
-      "peerDependencies": {
-        "webpack": "^5.72.1"
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/source-map-resolve": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
-      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
-      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+    "node_modules/node-gyp-build-optional-packages": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz",
+      "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0",
-        "resolve-url": "^0.2.1",
-        "source-map-url": "^0.4.0",
-        "urix": "^0.1.0"
+        "detect-libc": "^2.0.1"
+      },
+      "bin": {
+        "node-gyp-build-optional-packages": "bin.js",
+        "node-gyp-build-optional-packages-optional": "optional.js",
+        "node-gyp-build-optional-packages-test": "build-test.js"
       }
     },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+    "node_modules/node-gyp/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/node-gyp/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/source-map-support/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+    "node_modules/node-releases": {
+      "version": "2.0.54",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.54.tgz",
+      "integrity": "sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
       }
     },
-    "node_modules/source-map-url": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
-      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
-      "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
-      "dev": true
-    },
-    "node_modules/spawn-command": {
-      "version": "0.0.2-1",
-      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-      "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
-      "dev": true
-    },
-    "node_modules/spdx-correct": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
-      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+    "node_modules/nopt": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-9.0.0.tgz",
+      "integrity": "sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
+        "abbrev": "^4.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/spdx-exceptions": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
-      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w=="
-    },
-    "node_modules/spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+    "node_modules/npm-bundled": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-5.0.0.tgz",
+      "integrity": "sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
+        "npm-normalize-package-bin": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/spdx-license-ids": {
-      "version": "3.0.18",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.18.tgz",
-      "integrity": "sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ=="
-    },
-    "node_modules/spdy": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+    "node_modules/npm-install-checks": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-8.0.0.tgz",
+      "integrity": "sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
+        "semver": "^7.1.1"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/spdy-transport": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+    "node_modules/npm-normalize-package-bin": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-5.0.0.tgz",
+      "integrity": "sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==",
       "dev": true,
-      "dependencies": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/split-string": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+    "node_modules/npm-package-arg": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-13.0.2.tgz",
+      "integrity": "sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "extend-shallow": "^3.0.0"
+        "hosted-git-info": "^9.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^7.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/split-string/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+    "node_modules/npm-packlist": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-10.0.4.tgz",
+      "integrity": "sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
+        "ignore-walk": "^8.0.0",
+        "proc-log": "^6.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/split-string/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+    "node_modules/npm-pick-manifest": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-11.0.3.tgz",
+      "integrity": "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "is-plain-object": "^2.0.4"
+        "npm-install-checks": "^8.0.0",
+        "npm-normalize-package-bin": "^5.0.0",
+        "npm-package-arg": "^13.0.0",
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/split2": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
-      "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+    "node_modules/npm-registry-fetch": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-19.1.1.tgz",
+      "integrity": "sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "readable-stream": "^3.0.0"
+        "@npmcli/redact": "^4.0.0",
+        "jsonparse": "^1.3.1",
+        "make-fetch-happen": "^15.0.0",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^5.0.0",
+        "minizlib": "^3.0.1",
+        "npm-package-arg": "^13.0.0",
+        "proc-log": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true
-    },
-    "node_modules/sshpk": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
-      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+    "node_modules/npm-run-all2": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-9.0.2.tgz",
+      "integrity": "sha512-+dd4SO2jAlLE06OzmJKzIe6QvvjXezcbmobnh8usR0a8BzQCABTdqTXqVPji0ICOhSQpIIrkGd7IzNl5iDaRSA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
+        "ansi-styles": "^6.2.1",
+        "cross-spawn": "^7.0.6",
+        "memorystream": "^0.3.1",
+        "picomatch": "^4.0.2",
+        "pidtree": "^1.0.0",
+        "read-package-json-fast": "^6.0.0",
+        "shell-quote": "^1.8.4",
+        "which": "^7.0.0"
       },
       "bin": {
-        "sshpk-conv": "bin/sshpk-conv",
-        "sshpk-sign": "bin/sshpk-sign",
-        "sshpk-verify": "bin/sshpk-verify"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sshpk/node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "dev": true
-    },
-    "node_modules/ssri": {
-      "version": "10.0.6",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
-      "integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
-      "dependencies": {
-        "minipass": "^7.0.3"
+        "npm-run-all": "bin/npm-run-all/index.js",
+        "npm-run-all2": "bin/npm-run-all/index.js",
+        "run-p": "bin/run-p/index.js",
+        "run-s": "bin/run-s/index.js"
       },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0",
+        "npm": ">= 10"
       }
     },
-    "node_modules/stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
-      "dev": true
-    },
-    "node_modules/static-extend": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==",
+    "node_modules/npm-run-all2/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
-      "dependencies": {
-        "define-property": "^0.2.5",
-        "object-copy": "^0.1.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+    "node_modules/npm-run-all2/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=20"
       }
     },
-    "node_modules/streamroller": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.1.5.tgz",
-      "integrity": "sha512-KFxaM7XT+irxvdqSP1LGLgNWbYN7ay5owZ3r/8t77p+EtSUAfUgtl7be3xtqtOmGUl9K9YPO2ca8133RlTjvKw==",
+    "node_modules/npm-run-all2/node_modules/which": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-7.0.0.tgz",
+      "integrity": "sha512-RancgH2dmbLdHl6LRhEqvklWMgl/Hdnun0Y90KhBOLkMefg8Qa7/Zel8Sm+8HEcP6DEjzsWzpkuBQEZok58isA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "date-format": "^4.0.14",
-        "debug": "^4.3.4",
-        "fs-extra": "^8.1.0"
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
       }
     },
-    "node_modules/streamroller/node_modules/fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
+        "boolbase": "^1.0.0"
       },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6 <7 || >=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/streamroller/node_modules/jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
       "dev": true,
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/streamroller/node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
       "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">= 4.0.0"
+        "node": ">=12.20.0"
       }
     },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "safe-buffer": "~5.2.0"
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
       }
     },
-    "node_modules/string_decoder/node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/string-template": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
-      "integrity": "sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==",
-      "dev": true
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "devOptional": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
     },
-    "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+    "node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "mimic-function": "^5.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/string.prototype.padend": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.6.tgz",
-      "integrity": "sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==",
+    "node_modules/ora": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-9.4.0.tgz",
+      "integrity": "sha512-84cglkRILFxdtA8hAvLNdMrtBpPNBTrQ9/ulg0FA7xLMnD6mifv+enAIeRmvtv+WgdCE+LPGOfQmtJRrVaIVhQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0"
+        "chalk": "^5.6.2",
+        "cli-cursor": "^5.0.0",
+        "cli-spinners": "^3.2.0",
+        "is-interactive": "^2.0.0",
+        "is-unicode-supported": "^2.1.0",
+        "log-symbols": "^7.0.1",
+        "stdin-discarder": "^0.3.2",
+        "string-width": "^8.1.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=20"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/string.prototype.trim": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
-      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+    "node_modules/ordered-binary": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ordered-binary/-/ordered-binary-1.6.1.tgz",
+      "integrity": "sha512-QkCdPooczexPLiXIrbVOPYkR3VO3T6v2OyKRkR1Xbhpy7/LAVXwahnRCgRp78Oe/Ehf0C/HATAxfSr6eA1oX+w==",
       "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.0",
-        "es-object-atoms": "^1.0.0"
+        "yocto-queue": "^0.1.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/string.prototype.trimend": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
-      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
-      "dev": true,
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/string.prototype.trimstart": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
-      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+    "node_modules/p-map": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
+      "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
       "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/stringmap": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/stringmap/-/stringmap-0.2.2.tgz",
-      "integrity": "sha512-mR1LEHDw6TsHa+LwJeeBc9ZqZqEOm7bHidgxMmDg8HB/rbA1HhDeT08gS67CCCG/xrgIfQx5tW42pd8vFpLUow==",
-      "dev": true
-    },
-    "node_modules/stringset": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/stringset/-/stringset-0.2.1.tgz",
-      "integrity": "sha512-km3jeiRpmySChl1oLiBE2ESdG5k/4+6tjENVL6BB3mdmKBiUikI5ks4paad2WAKsxzpNiBqBBbXCC12QqlpLWA==",
-      "dev": true
-    },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
+    "node_modules/pacote": {
+      "version": "21.5.1",
+      "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.5.1.tgz",
+      "integrity": "sha512-KvcJ9iy3crysCsgqc4+PknH/w6jkrp8JN36mpZBPwNaDRwTfMZD37YzRazNstiZUOhuF5pno9f78n9mEJBavwg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/git": "^7.0.0",
+        "@npmcli/installed-package-contents": "^4.0.0",
+        "@npmcli/package-json": "^7.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "@npmcli/run-script": "^10.0.0",
+        "cacache": "^20.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^13.0.0",
+        "npm-packlist": "^10.0.1",
+        "npm-pick-manifest": "^11.0.1",
+        "npm-registry-fetch": "^19.0.0",
+        "proc-log": "^6.0.0",
+        "sigstore": "^4.0.0",
+        "ssri": "^13.0.0",
+        "tar": "^7.4.3"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/strip-bom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
     },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/strip-indent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+    "node_modules/parse-imports-exports": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz",
+      "integrity": "sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "min-indent": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "parse-statements": "1.0.11"
       }
     },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
       "engines": {
         "node": ">=8"
       },
@@ -23845,2339 +12692,2401 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/strong-log-transformer": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
-      "integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
+    "node_modules/parse-json/node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/parse-statements": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/parse-statements/-/parse-statements-1.0.11.tgz",
+      "integrity": "sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "license": "MIT",
       "dependencies": {
-        "duplexer": "^0.1.1",
-        "minimist": "^1.2.0",
-        "through": "^2.3.4"
-      },
-      "bin": {
-        "sl-log-transformer": "bin/sl-log-transformer.js"
+        "entities": "^8.0.0"
       },
-      "engines": {
-        "node": ">=4"
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+    "node_modules/parse5-html-rewriting-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-html-rewriting-stream/-/parse5-html-rewriting-stream-8.0.1.tgz",
+      "integrity": "sha512-NaRku2aMpUN1Sh1Gyk1KWUh2A7EJx2c6qYzvwsPtqhoHoaURshdrceYK3LunVCm3WHhm6FS7Vcczbvdh3/UIVw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
+        "entities": "^8.0.0",
+        "parse5": "^8.0.0",
+        "parse5-sax-parser": "^8.0.0"
       },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+    "node_modules/parse5-html-rewriting-stream/node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">= 6"
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+    "node_modules/parse5-sax-parser": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-sax-parser/-/parse5-sax-parser-8.0.0.tgz",
+      "integrity": "sha512-/dQ8UzHZwnrzs3EvDj6IkKrD/jIZyTlB+8XrHJvcjNgRdmWruNdN9i9RK/JtxakmlUdPwKubKPTCqvbTgzGhrw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
+        "parse5": "^8.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/sucrase/node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=20.19.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
       "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=8"
       }
     },
-    "node_modules/symbol-observable": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
-      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==",
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10"
+        "node": ">=8"
       }
     },
-    "node_modules/synckit": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
-      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "@pkgr/core": "^0.1.0",
-        "tslib": "^2.6.2"
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "18 || 20 || >=22"
       },
       "funding": {
-        "url": "https://opencollective.com/unts"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/tailwindcss": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.7.tgz",
-      "integrity": "sha512-pjgQxDZPvyS/nG3ZYkyCvsbONJl7GdOejfm24iMt2ElYQQw8Jc4p0m8RdMp7mznPD0kUhfzwV3zAwa80qI0zmQ==",
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
       "dev": true,
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.19.1",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=14.0.0"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/tailwindcss/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+    "node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
       "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
+    "node_modules/path2d": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.2.tgz",
+      "integrity": "sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==",
+      "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/tar": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
-      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pdfjs-dist": {
+      "version": "4.8.69",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.8.69.tgz",
+      "integrity": "sha512-IHZsA4T7YElCKNNXtiLgqScw4zPd3pG9do8UrznC757gMd7UPeHSL2qwNNMJo4r79fl8oj1Xx+1nh2YkzdMpLQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
       },
+      "optionalDependencies": {
+        "canvas": "^3.0.0-rc2",
+        "path2d": "^0.2.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+    "node_modules/pidtree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-1.0.0.tgz",
+      "integrity": "sha512-avfAvjB9Dd0wdj3rjJX//yS+G79OO0KrS5pJHFJENjYGX6N4SMgEDBBI/yFy0lloOYSaC6XQxzpOAMPfSYFV/Q==",
       "dev": true,
-      "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
+      "license": "MIT",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       }
     },
-    "node_modules/tar/node_modules/fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dependencies": {
-        "minipass": "^3.0.0"
+    "node_modules/piscina": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.2.0.tgz",
+      "integrity": "sha512-DszUCKeVN/5G5QKo6jAVHL8fmKnkJvQ0ACiVgY7YGCq3TUB2oznAOayvZPIAdEThvhczkXR+qm3IHsNXpFCYfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.x"
       },
+      "optionalDependencies": {
+        "@napi-rs/nice": "^1.0.4"
+      }
+    },
+    "node_modules/pkce-challenge": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 8"
+        "node": ">=16.20.0"
       }
     },
-    "node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+    "node_modules/pkg-types": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
+        "pathe": "^2.0.3"
       }
     },
-    "node_modules/tar/node_modules/minipass": {
+    "node_modules/pngjs": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/tar/node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "bin": {
-        "mkdirp": "bin/cmd.js"
+    "node_modules/positioning": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/positioning/-/positioning-3.0.1.tgz",
+      "integrity": "sha512-cqg00fwFtEu14YwlLUuvFih5ztTd9RYUguJA55lWjeIGFQTpik7ca+TMU87YhAgwWjyjcGIG6l80eUh7X6uHog==",
+      "license": "MIT"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/tar/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/terser": {
-      "version": "5.29.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.29.1.tgz",
-      "integrity": "sha512-lZQ/fyaIGxsbGxApKmoPTODIzELy3++mXhS5hOqaAWZjQtpq/hFHAc+rm29NND1rYRxRWKcjuARNwULNXa5RtQ==",
+    "node_modules/postcss-nested": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-7.0.2.tgz",
+      "integrity": "sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
+        "postcss-selector-parser": "^7.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
       }
     },
-    "node_modules/terser-webpack-plugin": {
-      "version": "5.3.10",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
-      "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
       "dev": true,
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.20",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.1",
-        "terser": "^5.26.0"
-      },
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "node": ">=18.0"
       },
       "peerDependencies": {
-        "webpack": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
         },
-        "esbuild": {
-          "optional": true
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
         },
-        "uglify-js": {
-          "optional": true
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
       }
     },
-    "node_modules/terser-webpack-plugin/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz",
+      "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+      "engines": {
+        "node": ">=4"
       }
     },
-    "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true,
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "license": "MIT"
     },
-    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "deprecated": "No longer maintained. Please contact the author of the relevant native addon; alternatives are available.",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
       },
-      "engines": {
-        "node": ">= 10.13.0"
+      "bin": {
+        "prebuild-install": "bin.js"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
-    "node_modules/test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "dev": true,
-      "dependencies": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/test-exclude/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/prettier": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.4.tgz",
+      "integrity": "sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==",
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/test-exclude/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz",
+      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "fast-diff": "^1.1.2"
       },
       "engines": {
-        "node": "*"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/text-extensions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
+    "node_modules/proc-log": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
+      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
       "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=0.10"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0"
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
       },
       "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "dev": true
-    },
-    "node_modules/through2": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-      "dev": true,
-      "dependencies": {
-        "readable-stream": "3"
+        "node": ">= 0.10"
       }
     },
-    "node_modules/thunky": {
+    "node_modules/proxy-from-env": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
     },
-    "node_modules/tiny-lr": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-1.1.1.tgz",
-      "integrity": "sha512-44yhA3tsaRoMOjQQ+5v5mVdqef+kH6Qze9jTpqtVufgYjYt08zyZAwNwwVBj3i1rJMnR52IxOW0LK0vBzgAkuA==",
-      "dev": true,
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "body": "^5.1.0",
-        "debug": "^3.1.0",
-        "faye-websocket": "~0.10.0",
-        "livereload-js": "^2.3.0",
-        "object-assign": "^4.1.0",
-        "qs": "^6.4.0"
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
       }
     },
-    "node_modules/tiny-lr/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
       "dependencies": {
-        "ms": "^2.1.1"
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/tmp": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=14.14"
+        "node": ">=8"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
       }
     },
-    "node_modules/to-object-path": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^3.0.2"
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/to-object-path/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
       "dependencies": {
-        "is-buffer": "^1.1.5"
+        "p-locate": "^4.1.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/to-regex": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
       "dependencies": {
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "regex-not": "^1.0.2",
-        "safe-regex": "^1.1.0"
+        "p-try": "^2.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "devOptional": true,
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "p-limit": "^2.2.0"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">=8"
       }
     },
-    "node_modules/to-regex/node_modules/define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
       "dependencies": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/to-regex/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
       "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/to-regex/node_modules/is-descriptor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
-      "integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
       "dependencies": {
-        "is-accessor-descriptor": "^1.0.1",
-        "is-data-descriptor": "^1.0.1"
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
       }
     },
-    "node_modules/to-regex/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dev": true,
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
       "dependencies": {
-        "is-plain-object": "^2.0.4"
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+    "node_modules/qs": {
+      "version": "6.15.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
+      "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
       "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
       "engines": {
         "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/token-stream": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
-      "integrity": "sha512-nfjOAu/zAWmX9tgwi5NRp7O7zTDUD1miHiB40klUnAh9qnL1iXdgzcz/i5dMaL5jahcBAaSfmNOBBJBLJW8TEg==",
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
       "dev": true,
-      "optional": true
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
     },
-    "node_modules/tough-cookie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true,
-      "dependencies": {
-        "psl": "^1.1.28",
-        "punycode": "^2.1.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "optional": true
-    },
-    "node_modules/tree-kill": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
-      "dev": true,
-      "bin": {
-        "tree-kill": "cli.js"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/trim-newlines": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
-      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.10"
       }
     },
-    "node_modules/tryor": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/tryor/-/tryor-0.1.2.tgz",
-      "integrity": "sha512-2+ilNA00DGvbUYYbRrm3ux+snbo7I6uPXMw8I4p/QMl7HUOWBBZFbk+Mpr8/IAPDQE+LQ8vOdlI6xEzjc+e/BQ==",
-      "dev": true
-    },
-    "node_modules/ts-api-utils": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
-      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=16"
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
       },
-      "peerDependencies": {
-        "typescript": ">=4.2.0"
+      "bin": {
+        "rc": "cli.js"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+    "node_modules/rc/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
+      "optional": true
     },
-    "node_modules/ts-md5": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.3.1.tgz",
-      "integrity": "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==",
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "optional": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/ts-node": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
-      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+    "node_modules/read-package-json-fast": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-6.0.0.tgz",
+      "integrity": "sha512-PNaGjoCnw9DBA2Kl8D+8po957z778q/HOPuY2u3Bkw/JO3eC8MDx7jn/PgMtSgpcBbs+6UOjDbwReGpXmRvs0g==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@cspotcode/source-map-support": "^0.8.0",
-        "@tsconfig/node10": "^1.0.7",
-        "@tsconfig/node12": "^1.0.7",
-        "@tsconfig/node14": "^1.0.0",
-        "@tsconfig/node16": "^1.0.2",
-        "acorn": "^8.4.1",
-        "acorn-walk": "^8.1.1",
-        "arg": "^4.1.0",
-        "create-require": "^1.1.0",
-        "diff": "^4.0.1",
-        "make-error": "^1.1.1",
-        "v8-compile-cache-lib": "^3.0.1",
-        "yn": "3.1.1"
-      },
-      "bin": {
-        "ts-node": "dist/bin.js",
-        "ts-node-cwd": "dist/bin-cwd.js",
-        "ts-node-esm": "dist/bin-esm.js",
-        "ts-node-script": "dist/bin-script.js",
-        "ts-node-transpile-only": "dist/bin-transpile.js",
-        "ts-script": "dist/bin-script-deprecated.js"
-      },
-      "peerDependencies": {
-        "@swc/core": ">=1.2.50",
-        "@swc/wasm": ">=1.2.50",
-        "@types/node": "*",
-        "typescript": ">=2.7"
+        "json-parse-even-better-errors": "^6.0.0",
+        "npm-normalize-package-bin": "^6.0.0"
       },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
-        },
-        "@swc/wasm": {
-          "optional": true
-        }
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
       }
     },
-    "node_modules/ts-node/node_modules/arg": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
-    },
-    "node_modules/ts-node/node_modules/diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+    "node_modules/read-package-json-fast/node_modules/json-parse-even-better-errors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-6.0.0.tgz",
+      "integrity": "sha512-2/8adwnK1/+Fdjyts4r6wSpfANWw8zdNhU9U/Llk59c6O+DjSisPWPykwoL8gZmocP9Dy64S7oie2g+Mia123A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.3.1"
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
       }
     },
-    "node_modules/tsconfig-paths": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
-      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+    "node_modules/read-package-json-fast/node_modules/npm-normalize-package-bin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-6.0.0.tgz",
+      "integrity": "sha512-tdt4aFn9QamlhdN3HV2D2ccpBwO5/fyjjbXUxYA6uBjyekMZcZvDq0aSj9t5Jo+tih6AYFnt/cuIRn9013e0Uw==",
       "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
       "dependencies": {
-        "@types/json5": "^0.0.29",
-        "json5": "^1.0.2",
-        "minimist": "^1.2.6",
-        "strip-bom": "^3.0.0"
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
       }
     },
-    "node_modules/tsconfig-paths/node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
       "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
       },
-      "bin": {
-        "json5": "lib/cli.js"
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    "node_modules/reflect-metadata": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
+      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
+      "dev": true,
+      "license": "Apache-2.0"
     },
-    "node_modules/tuf-js": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-2.2.1.tgz",
-      "integrity": "sha512-GwIJau9XaA8nLVbUXsN3IlFi7WmQ48gBUrl3FTkkL/XLu/POhBzfmX9hd33FNMX1qAsfl6ozO1iMmW9NC8YniA==",
-      "dependencies": {
-        "@tufjs/models": "2.0.1",
-        "debug": "^4.3.4",
-        "make-fetch-happen": "^13.0.1"
-      },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
       "engines": {
-        "node": "^16.14.0 || >=18.0.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": "*"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-      "dev": true
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
     },
-    "node_modules/type-check": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
       "dev": true,
-      "dependencies": {
-        "prelude-ls": "^1.2.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">=8"
       }
     },
-    "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/robust-predicates": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
+      "integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
+      "license": "Unlicense"
+    },
+    "node_modules/rollup": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.61.1.tgz",
+      "integrity": "sha512-I4KW6iuRpuu2uHBLraZ1wNZe0DP7lnRha+VJ9tNaYVaVgKhW0aI3h4RYnoRPeql0flHm/Co55b7snEDcOfOJrA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.61.1",
+        "@rollup/rollup-android-arm64": "4.61.1",
+        "@rollup/rollup-darwin-arm64": "4.61.1",
+        "@rollup/rollup-darwin-x64": "4.61.1",
+        "@rollup/rollup-freebsd-arm64": "4.61.1",
+        "@rollup/rollup-freebsd-x64": "4.61.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.61.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.61.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.61.1",
+        "@rollup/rollup-linux-arm64-musl": "4.61.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.61.1",
+        "@rollup/rollup-linux-loong64-musl": "4.61.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.61.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.61.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.61.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.61.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.61.1",
+        "@rollup/rollup-linux-x64-gnu": "4.61.1",
+        "@rollup/rollup-linux-x64-musl": "4.61.1",
+        "@rollup/rollup-openbsd-x64": "4.61.1",
+        "@rollup/rollup-openharmony-arm64": "4.61.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.61.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.61.1",
+        "@rollup/rollup-win32-x64-gnu": "4.61.1",
+        "@rollup/rollup-win32-x64-msvc": "4.61.1",
+        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/typed-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.61.1.tgz",
+      "integrity": "sha512-x5Xr49hwt3hdW75UOZm3395YwwzPyauktslv29KpWL/T+vVAzoT3azLcTWv0eMciBNrx+DYjH4paehHoLpPvpg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.13"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/typed-array-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
-      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.61.1.tgz",
+      "integrity": "sha512-bVWIOIk6pV01p4CdUbPP7CJ/434z+OooYjDuFcR+44N35YvKUC66G8MGnvcWx5mWKW3g61J+t74l3Kj15Kwn2Q==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/typed-array-byte-offset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
-      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 18"
       }
     },
-    "node_modules/typed-array-length": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
-      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
-      "dev": true,
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/typed-assert": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/typed-assert/-/typed-assert-1.0.9.tgz",
-      "integrity": "sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==",
-      "dev": true
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
     },
-    "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.101.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.101.0.tgz",
+      "integrity": "sha512-OL3GoQyoUdDt843DpVmDO6y2k1sc5IhUDSpu8XucEI+35neq5QivZ1iuegnpraEVTJXlQGK1gl27zKcTLEPbQw==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
       "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
+        "sass": "sass.js"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=20.19.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
       }
     },
-    "node_modules/ua-parser-js": {
-      "version": "0.7.38",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.38.tgz",
-      "integrity": "sha512-fYmIy7fKTSFAhG3fuPlubeGaMoAd6r0rSnfEsO5nEY55i26KSLt9EH7PLQiiqPUhNqYIJvSkTy1oArIcXAbPbA==",
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        }
-      ],
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
       "engines": {
-        "node": "*"
+        "node": ">=v12.22.7"
       }
     },
-    "node_modules/uglify-js": {
-      "version": "3.4.10",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
-      "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
-      "dev": true,
-      "dependencies": {
-        "commander": "~2.19.0",
-        "source-map": "~0.6.1"
-      },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
       "bin": {
-        "uglifyjs": "bin/uglifyjs"
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=10"
       }
     },
-    "node_modules/uglify-js/node_modules/commander": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
-      "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
-      "dev": true
-    },
-    "node_modules/uglify-js/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/uglify-to-browserify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q=="
-    },
-    "node_modules/unbox-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
+        "node": ">= 18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/unc-path-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-      "integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/underscore": {
-      "version": "1.13.6",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
-      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
-      "dev": true
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
     },
-    "node_modules/underscore.string": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-      "integrity": "sha512-hbD5MibthuDAu4yA5wxes5bzFgqd3PpBJuClbRxaNddxfdsz+qf+1kHwrGQFrmchmDHb9iNU+6EHDn8uj0xDJg==",
-      "engines": {
-        "node": "*"
-      }
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
     },
-    "node_modules/undici": {
-      "version": "6.11.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.11.1.tgz",
-      "integrity": "sha512-KyhzaLJnV1qa3BSHdj4AZ2ndqI0QWPxYzaIOio0WzcEJB9gvuysprJSLtpvc2D9mhR9jPDUk7xlJlZbH2KR5iw==",
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true,
-      "engines": {
-        "node": ">=18.0"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "license": "ISC"
     },
-    "node_modules/unicode-canonical-property-names-ecmascript": {
+    "node_modules/shebang-command": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
-    "node_modules/unicode-match-property-ecmascript": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
-      "dev": true,
-      "dependencies": {
-        "unicode-canonical-property-names-ecmascript": "^2.0.0",
-        "unicode-property-aliases-ecmascript": "^2.0.0"
-      },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
-    "node_modules/unicode-match-property-value-ecmascript": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+    "node_modules/shell-quote": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.9.0.tgz",
+      "integrity": "sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/unicode-property-aliases-ecmascript": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/union-value": {
+    "node_modules/side-channel-list": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "arr-union": "^3.1.0",
-        "get-value": "^2.0.6",
-        "is-extendable": "^0.1.1",
-        "set-value": "^2.0.1"
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/unique-filename": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
-      "integrity": "sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==",
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "unique-slug": "^4.0.0"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
       },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/unique-slug": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-4.0.0.tgz",
-      "integrity": "sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==",
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "imurmurhash": "^0.1.4"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
       },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
+      "license": "ISC"
     },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/unset-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==",
+    "node_modules/sigstore": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/sigstore/-/sigstore-4.1.1.tgz",
+      "integrity": "sha512-endqECJkfhozrXMK5ngu/UAA0xVcVEFdnHJCElGaExypjW+HK5i6zu3NteLoaX/iFbRUbC3+DjttQs0GARr+5w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "has-value": "^0.3.1",
-        "isobject": "^3.0.0"
+        "@sigstore/bundle": "^4.0.0",
+        "@sigstore/core": "^3.2.1",
+        "@sigstore/protobuf-specs": "^0.5.0",
+        "@sigstore/sign": "^4.1.1",
+        "@sigstore/tuf": "^4.0.2",
+        "@sigstore/verify": "^3.1.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/unset-value/node_modules/has-value": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-      "integrity": "sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==",
-      "dev": true,
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "get-value": "^2.0.3",
-        "has-values": "^0.1.4",
-        "isobject": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
       }
     },
-    "node_modules/unset-value/node_modules/has-value/node_modules/isobject": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
+    "node_modules/slice-ansi": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-8.0.0.tgz",
+      "integrity": "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "isarray": "1.0.0"
+        "ansi-styles": "^6.2.3",
+        "is-fullwidth-code-point": "^5.1.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/unset-value/node_modules/has-values": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-      "integrity": "sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==",
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/unset-value/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/upath": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4",
-        "yarn": "*"
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
       }
     },
-    "node_modules/update-browserslist-db": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
-      "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
+    "node_modules/socks": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.9.tgz",
+      "integrity": "sha512-LJhUYUvItdQ0LkJTmPeaEObWXAqFyfmP85x0tch/ez9cahmhlBBLbIqDFnvBnUJGagb0JbIQrkBs1wJ+yRYpEw==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+      "license": "MIT",
       "dependencies": {
-        "escalade": "^3.1.2",
-        "picocolors": "^1.0.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
+        "ip-address": "^10.1.1",
+        "smart-buffer": "^4.2.0"
       },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
       }
     },
-    "node_modules/upper-case": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
-      "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
-      "dev": true
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "punycode": "^2.1.0"
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
       }
     },
-    "node_modules/uri-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
-      "integrity": "sha512-8pMuAn4KacYdGMkFaoQARicp4HSw24/DHOVKWqVRJ8LhhAwPPFpdGvdL9184JVmUwe7vz7Z9n6IqI6t5n2ELdg==",
+    "node_modules/socks-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.10"
+        "node": ">= 14"
       }
     },
-    "node_modules/urix": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
-      "deprecated": "Please see https://github.com/lydell/urix#deprecated",
-      "dev": true
-    },
-    "node_modules/use": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+    "node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
       "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
     },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">= 0.4.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
       "dev": true,
-      "bin": {
-        "uuid": "bin/uuid"
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-4.0.0.tgz",
+      "integrity": "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
       }
     },
-    "node_modules/v8-compile-cache-lib": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
-      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.23",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.23.tgz",
+      "integrity": "sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==",
+      "dev": true,
+      "license": "CC0-1.0"
     },
-    "node_modules/v8flags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
-      "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
+    "node_modules/ssri": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-13.0.1.tgz",
+      "integrity": "sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "homedir-polyfill": "^1.0.1"
+        "minipass": "^7.0.3"
       },
       "engines": {
-        "node": ">= 0.10"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dependencies": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/validate-npm-package-name": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
-      "integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+    "node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stdin-discarder": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.3.2.tgz",
+      "integrity": "sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-      "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
       "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
+        "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/vite": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.7.tgz",
-      "integrity": "sha512-sgnEEFTZYMui/sTlH1/XEnVNHMujOahPLGMxn1+5sIT45Xjng1Ec1K78jRP15dSmVgg5WBin9yO81j3o9OxofA==",
+    "node_modules/string-width": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.1.tgz",
+      "integrity": "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.35",
-        "rollup": "^4.2.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
       },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": ">=20"
       },
       "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
       "engines": {
         "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+      "license": "MIT"
     },
-    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/synckit": {
+      "version": "0.11.13",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.13.tgz",
+      "integrity": "sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.3.6"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/tailwind-api-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tailwind-api-utils/-/tailwind-api-utils-1.0.3.tgz",
+      "integrity": "sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "local-pkg": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/hyoban"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.3.0 || ^4.0.0 || ^4.0.0-beta"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.2.tgz",
+      "integrity": "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/tar": {
+      "version": "7.5.22",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.22.tgz",
+      "integrity": "sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/tar-fs": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.5.tgz",
+      "integrity": "sha512-OboTd8mmMhZDNPV+UjQcK9yKAatXu2aJ+r1w4im1Otd4M4fl2hwvdoXUxIYHFTHWK/3y3FarBP70v3vwmGlOxw==",
+      "license": "MIT",
       "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
+    "node_modules/tar-fs/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/tar-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">= 6"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
-      "cpu": [
-        "loong64"
-      ],
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+      "license": "MIT"
     },
-    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
-      "cpu": [
-        "mips64el"
-      ],
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
-      "cpu": [
-        "riscv64"
-      ],
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
-      "cpu": [
-        "s390x"
-      ],
+    "node_modules/tldts": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.2.tgz",
+      "integrity": "sha512-kCwffuaH8ntKtygnWe1b4BJKWiCUH30n5KfoTr6IchcXOwR7chAOFJxFrH3vjANafUYrIA4a7SDL+nn7SiR4Sw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.2"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/tldts-core": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.2.tgz",
+      "integrity": "sha512-nwEyF4vl4RSJjwSjBUmOSxc3BFPoIFdlRthJ6e+5v9P3bHNsoD06UjuqMUspqp7vsEZ1beaHi1km+optiE17yA==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+      "license": "MIT"
     },
-    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=0.6"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=20"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/tr46/node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
+      "license": "MIT",
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
       }
     },
-    "node_modules/vite/node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
-      }
-    },
-    "node_modules/void-elements": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==",
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
       "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/watchpack": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tuf-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-4.1.0.tgz",
+      "integrity": "sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
+        "@tufjs/models": "4.1.0",
+        "debug": "^4.4.3",
+        "make-fetch-happen": "^15.0.1"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-      "dev": true,
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "optional": true,
       "dependencies": {
-        "minimalistic-assert": "^1.0.0"
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
       }
     },
-    "node_modules/wcwidth": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "license": "MIT",
       "dependencies": {
-        "defaults": "^1.0.3"
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/webdriver-js-extender": {
+    "node_modules/type-is": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz",
-      "integrity": "sha512-lcUKrjbBfCK6MNsh7xaY2UAUmZwe+/ib03AjVOpFobX4O7+83BUveSrLfU0Qsyb1DaKJdQRbuU+kM9aZ6QUhiQ==",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/selenium-webdriver": "^3.0.0",
-        "selenium-webdriver": "^3.0.1"
+        "content-type": "^2.0.0",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
       },
       "engines": {
-        "node": ">=6.9.x"
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/webdriver-manager": {
-      "version": "12.1.9",
-      "resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-12.1.9.tgz",
-      "integrity": "sha512-Yl113uKm8z4m/KMUVWHq1Sjtla2uxEBtx2Ue3AmIlnlPAKloDn/Lvmy6pqWCUersVISpdMeVpAaGbNnvMuT2LQ==",
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
       "dev": true,
-      "dependencies": {
-        "adm-zip": "^0.5.2",
-        "chalk": "^1.1.1",
-        "del": "^2.2.0",
-        "glob": "^7.0.3",
-        "ini": "^1.3.4",
-        "minimist": "^1.2.0",
-        "q": "^1.4.1",
-        "request": "^2.87.0",
-        "rimraf": "^2.5.2",
-        "semver": "^5.3.0",
-        "xml2js": "^0.4.17"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "license": "Apache-2.0",
       "bin": {
-        "webdriver-manager": "bin/webdriver-manager"
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=6.9.x"
+        "node": ">=14.17"
       }
     },
-    "node_modules/webdriver-manager/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
+    "node_modules/typescript-eslint": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.62.0.tgz",
+      "integrity": "sha512-8QxXi+ZACKX0kaqO4gY8kn0RSD9gFfaHDWwjqtEN48aWCBkX4MJaufWN+c3BzlrXLOxfywDL8CaoqUwcRq4j4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.62.0",
+        "@typescript-eslint/parser": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0",
+        "@typescript-eslint/utils": "8.62.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/webdriver-manager/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
+    "node_modules/typescript-eslint/node_modules/@typescript-eslint/parser": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.62.0.tgz",
+      "integrity": "sha512-dzHeT2gySzZtLDsuqxU9AkYgIsQoHAHtRBpOqM+Ofzx1Bwrd2RcCjQJ+6iQbsHOIR6NS33bF2W1k3blN1zLDrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.62.0",
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0",
+        "debug": "^4.4.3"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/webdriver-manager/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
       "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
+      "license": "MIT"
+    },
+    "node_modules/undici": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.28.0.tgz",
+      "integrity": "sha512-LIY910g9TI13YS95lrMFrs8Rm/u/irgHeTWoKCoteeJ04CUJ92eEfj0rVn+7VKMPBpUPiUoBKfhNyLI23EE/KA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18.17"
       }
     },
-    "node_modules/webdriver-manager/node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/webdriver-manager/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
       }
     },
-    "node_modules/webdriver-manager/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz",
+      "integrity": "sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
       "bin": {
-        "semver": "bin/semver"
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/webdriver-manager/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "punycode": "^2.1.0"
       }
     },
-    "node_modules/webdriver-manager/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
+    "node_modules/uri-js/node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=6"
       }
     },
-    "node_modules/webidl-conversions": {
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "optional": true
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/webpack": {
-      "version": "5.90.3",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz",
-      "integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
-        "@types/estree": "^1.0.5",
-        "@webassemblyjs/ast": "^1.11.5",
-        "@webassemblyjs/wasm-edit": "^1.11.5",
-        "@webassemblyjs/wasm-parser": "^1.11.5",
-        "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
-        "browserslist": "^4.21.10",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.15.0",
-        "es-module-lexer": "^1.2.1",
-        "eslint-scope": "5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.9",
-        "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.2.0",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.2.0",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.3.10",
-        "watchpack": "^2.4.0",
-        "webpack-sources": "^3.2.3"
-      },
-      "bin": {
-        "webpack": "bin/webpack.js"
-      },
+    "node_modules/validate-npm-package-name": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-7.0.2.tgz",
+      "integrity": "sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==",
+      "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependenciesMeta": {
-        "webpack-cli": {
-          "optional": true
-        }
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/webpack-dev-middleware": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.2.tgz",
-      "integrity": "sha512-Wu+EHmX326YPYUpQLKmKbTyZZJIB8/n6R09pTmB03kJmnMsVPTo9COzHZFr01txwaCAuZvfBJE4ZCHRcKs5JaQ==",
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true,
-      "dependencies": {
-        "colorette": "^2.0.10",
-        "memfs": "^3.4.12",
-        "mime-types": "^2.1.31",
-        "range-parser": "^1.2.1",
-        "schema-utils": "^4.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">= 14.15.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "webpack": {
-          "optional": true
-        }
+        "node": ">= 0.8"
       }
     },
-    "node_modules/webpack-dev-server": {
-      "version": "4.15.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
-      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
-      "dev": true,
-      "dependencies": {
-        "@types/bonjour": "^3.5.9",
-        "@types/connect-history-api-fallback": "^1.3.5",
-        "@types/express": "^4.17.13",
-        "@types/serve-index": "^1.9.1",
-        "@types/serve-static": "^1.13.10",
-        "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.5.5",
-        "ansi-html-community": "^0.0.8",
-        "bonjour-service": "^1.0.11",
-        "chokidar": "^3.5.3",
-        "colorette": "^2.0.10",
-        "compression": "^1.7.4",
-        "connect-history-api-fallback": "^2.0.0",
-        "default-gateway": "^6.0.3",
-        "express": "^4.17.3",
-        "graceful-fs": "^4.2.6",
-        "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^2.0.3",
-        "ipaddr.js": "^2.0.1",
-        "launch-editor": "^2.6.0",
-        "open": "^8.0.9",
-        "p-retry": "^4.5.0",
-        "rimraf": "^3.0.2",
-        "schema-utils": "^4.0.0",
-        "selfsigned": "^2.1.1",
-        "serve-index": "^1.9.1",
-        "sockjs": "^0.3.24",
-        "spdy": "^4.0.2",
-        "webpack-dev-middleware": "^5.3.1",
-        "ws": "^8.13.0"
+    "node_modules/vite": {
+      "version": "7.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz",
+      "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
-        "webpack-dev-server": "bin/webpack-dev-server.js"
+        "vite": "bin/vite.js"
       },
       "engines": {
-        "node": ">= 12.13.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "webpack": "^4.37.0 || ^5.0.0"
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
       },
       "peerDependenciesMeta": {
-        "webpack": {
+        "@types/node": {
           "optional": true
         },
-        "webpack-cli": {
+        "jiti": {
           "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/webpack-dev-middleware": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
-      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
-      "dev": true,
-      "dependencies": {
-        "colorette": "^2.0.10",
-        "memfs": "^3.4.3",
-        "mime-types": "^2.1.31",
-        "range-parser": "^1.2.1",
-        "schema-utils": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
+        },
+        "less": {
           "optional": true
         },
-        "utf-8-validate": {
+        "lightningcss": {
           "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-merge": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
-      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
-      "dev": true,
-      "dependencies": {
-        "clone-deep": "^4.0.1",
-        "flat": "^5.0.2",
-        "wildcard": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
       }
     },
-    "node_modules/webpack-subresource-integrity": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/webpack-subresource-integrity/-/webpack-subresource-integrity-5.1.0.tgz",
-      "integrity": "sha512-sacXoX+xd8r4WKsy9MvH/q/vBtEHr86cpImXwyg74pFIpERKt6FmB8cXpeuh0ZLgclOlHI4Wcll7+R5L02xk9Q==",
+    "node_modules/vitest": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.9.tgz",
+      "integrity": "sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "typed-assert": "^1.0.8"
+        "@vitest/expect": "4.1.9",
+        "@vitest/mocker": "4.1.9",
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/runner": "4.1.9",
+        "@vitest/snapshot": "4.1.9",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
       },
       "engines": {
-        "node": ">= 12"
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "html-webpack-plugin": ">= 5.0.0-beta.1 < 6",
-        "webpack": "^5.12.0"
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.9",
+        "@vitest/browser-preview": "4.1.9",
+        "@vitest/browser-webdriverio": "4.1.9",
+        "@vitest/coverage-istanbul": "4.1.9",
+        "@vitest/coverage-v8": "4.1.9",
+        "@vitest/ui": "4.1.9",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
-        "html-webpack-plugin": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
           "optional": true
+        },
+        "vite": {
+          "optional": false
         }
       }
     },
-    "node_modules/webpack/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "xml-name-validator": "^5.0.0"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/webpack/node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "peerDependencies": {
-        "ajv": "^6.9.1"
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/webpack/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+    "node_modules/watchpack": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
       },
       "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/webpack/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
-    },
-    "node_modules/webpack/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/webpack/node_modules/schema-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+    "node_modules/weak-lru-cache": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
+      "integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==",
       "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/websocket-driver": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
       "dev": true,
-      "dependencies": {
-        "http-parser-js": ">=0.5.1",
-        "safe-buffer": ">=5.1.0",
-        "websocket-extensions": ">=0.1.1"
-      },
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=20"
       }
     },
-    "node_modules/websocket-extensions": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=20"
       }
     },
     "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "optional": true,
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -26188,115 +15097,43 @@
         "node": ">= 8"
       }
     },
-    "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dev": true,
-      "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/which-module": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
     },
-    "node_modules/which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/wide-align": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "optional": true,
-      "dependencies": {
-        "string-width": "^1.0.2 || 2 || 3 || 4"
-      }
-    },
-    "node_modules/wildcard": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
-      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
-      "dev": true
-    },
-    "node_modules/window-size": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/with": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz",
-      "integrity": "sha512-uAnSsFGfSpF6DNhBXStvlZILfHJfJu4eUkfbRGk94kGO1Ta7bg6FwfvoOhhyHAJuFbCw+0xk4uJ3u57jLvlCJg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "acorn": "^3.1.0",
-        "acorn-globals": "^3.0.0"
-      }
-    },
-    "node_modules/with/node_modules/acorn": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-      "integrity": "sha512-OLUyIIZ7mF5oaAUT1w0TFqQS81q3saT46x8t7ukpPjMNk+nbs4ZHhs7ToV8EWnLYLepjETXd4XaCE4uxkMeqUw==",
-      "dev": true,
-      "optional": true,
       "bin": {
-        "acorn": "bin/acorn"
+        "why-is-node-running": "cli.js"
       },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=8"
       }
     },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wordwrap": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -26306,27 +15143,20 @@
         "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+        "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -26337,10 +15167,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+    "node_modules/wrap-ansi/node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -26348,100 +15179,77 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+    "node_modules/wrap-ansi/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
     },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/wrap-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "devOptional": true
-    },
-    "node_modules/ws": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
-      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
+      "devOptional": true,
+      "license": "ISC"
     },
-    "node_modules/xml2js": {
-      "version": "0.4.23",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
-      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/xregexp": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-3.1.0.tgz",
-      "integrity": "sha512-4Y1x6DyB8xRoxosooa6PlGWqmmSKatbzhrftZ7Purmm4B8R4qIEJG1A2hZsdz5DhmIqS0msC0I7KEq93GphEVg==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">=10"
       }
@@ -26450,40 +15258,60 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
-    },
-    "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
       "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
+      "license": "ISC"
     },
     "node_modules/yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "cliui": "^8.0.1",
+        "cliui": "^9.0.1",
         "escalade": "^3.1.1",
         "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
+        "string-width": "^7.2.0",
         "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
+        "yargs-parser": "^22.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^20.19.0 || ^22.12.0 || >=23"
       }
     },
     "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=12"
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/yn": {
@@ -26491,6 +15319,7 @@
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -26499,7 +15328,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -26507,15 +15336,43 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/zlib-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/zlib-browserify/-/zlib-browserify-0.0.1.tgz",
-      "integrity": "sha512-fheIDCKXU0YAGZMv4FFwVTBMQRSv2ZjNqRN1VkZjetZDK/BC/hViEhasTh0kTeogcsIAl5gYE04GN53trT+cFw=="
+    "node_modules/yoctocolors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz",
+      "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.2.tgz",
+      "integrity": "sha512-IynmDyxsEsb9RKzO3J9+4SxXnl2FTFSzNBaKKaMV6tsSk0rw9gYw9gs+JFCq/qk2LCZ78KDwyj+Z289TijSkUw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.25.2",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.2.tgz",
+      "integrity": "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.25.28 || ^4"
+      }
     },
     "node_modules/zone.js": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.6.tgz",
-      "integrity": "sha512-vyRNFqofdaHVdWAy7v3Bzmn84a1JHWSjpuTZROT/uYn8I3p2cmo7Ro9twFmYRQDPhiYOV7QLk0hhY4JJQVqS6Q=="
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.16.2.tgz",
+      "integrity": "sha512-Eky7p2Z1Ig3NnbfodSPoARCjKBSTFMnE/ACsP1L/XJEfY4SdOFce19BsUCWVwL6K5ABZFy5J3bjcMWffX+YM3Q==",
+      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index b3fbe7a25c..fae320ec35 100644
--- a/package.json
+++ b/package.json
@@ -1,170 +1,130 @@
 {
   "name": "doubtfire",
-  "version": "8.0.9",
+  "version": "11.0.0-45",
   "homepage": "http://github.com/doubtfire-lms/",
   "description": "Learning and feedback tool.",
   "license": "AGPL-3.0",
   "repository": {},
   "engines": {
-    "node": ">=20.9.0"
+    "node": ">=22.22.3"
   },
   "scripts": {
-    "build": "run-s -l build:angular1 build:angular17",
-    "build:angular1": "grunt build",
-    "build:angular17": "ng build",
+    "build": "ng build",
+    "build:angular18": "ng build",
     "lint:fix": "ng lint --fix",
-    "lint": "ng lint",
-    "serve:angular17": "export NODE_OPTIONS=--max_old_space_size=4096 && ng serve --configuration $NODE_ENV",
-    "start": "npm-run-all -l -s build:angular1 -p watch:angular1 serve:angular17",
-    "watch:angular1": "grunt delta",
+    "lint": "ng lint --max-warnings 0",
+    "serve:angular18": "export NG_FORCE_TTY=false && export NODE_OPTIONS=--max_old_space_size=4096 && ng serve --poll=2000 --configuration $NODE_ENV --proxy-config proxy.conf.json",
+    "format": "prettier --write .",
+    "start": "npm-run-all serve:angular18",
     "deploy:build2api": "ng build --delete-output-path=true --optimization=true --configuration production --output-path dist",
-    "deploy": "run-s -l build:angular1 deploy:build2api",
+    "deploy:build2api:sourcemaps": "ng build --delete-output-path=true --optimization=true --configuration production --source-map=true --output-path dist",
+    "sentry:sourcemaps": "node scripts/upload-sentry-sourcemaps.js",
+    "verify:deployment-config": "node scripts/verify-deployment-config.js",
+    "deploy": "run-s -l deploy:build2api",
     "prepare": "husky install",
     "test": "ng test",
-    "test:ci": "ng test --karma-config=src/karma-ci.conf.js --no-progress"
+    "test:ci": "ng test --no-watch --no-progress",
+    "typecheck": "ngc -p src/tsconfig.app.json --noEmit"
   },
   "keywords": [],
   "author": "",
   "dependencies": {
-    "@angular/animations": "^17.3.6",
-    "@angular/cdk": "^17.3.6",
-    "@angular/cli": "^17.3.6",
-    "@angular/common": "^17.3.6",
-    "@angular/compiler": "^17.3.6",
-    "@angular/core": "^17.3.6",
-    "@angular/forms": "^17.3.6",
-    "@angular/material": "^17.3.6",
-    "@angular/material-moment-adapter": "^17.3.6",
-    "@angular/platform-browser": "^17.3.6",
-    "@angular/platform-browser-dynamic": "^17.3.6",
-    "@angular/router": "^17.3.6",
-    "@angular/service-worker": "^17.3.6",
-    "@angular/upgrade": "^17.3.6",
-    "@ctrl/ngx-emoji-mart": "^9.2.0",
+    "@angular/animations": "^22.0.3",
+    "@angular/cdk": "^22.0.2",
+    "@angular/common": "^22.0.3",
+    "@angular/compiler": "^22.0.3",
+    "@angular/core": "^22.0.3",
+    "@angular/forms": "^22.0.3",
+    "@angular/material": "^22.0.2",
+    "@angular/material-date-fns-adapter": "^22.0.2",
+    "@angular/platform-browser": "^22.0.3",
+    "@angular/platform-browser-dynamic": "^22.0.3",
+    "@angular/router": "^22.0.3",
+    "@angular/service-worker": "^22.0.3",
+    "@ctrl/ngx-emoji-mart": "^9.3.0",
+    "@eslint/js": "^10.0.1",
     "@ngneat/hotkeys": "^4.0.0",
-    "@uirouter/angular": "^13.0",
-    "@uirouter/angular-hybrid": "^17.1.0",
-    "@uirouter/angularjs": "^1.0.30",
-    "@uirouter/core": "^6.1.0",
-    "@uirouter/rx": "^1.0.0",
-    "angular": "1.5.11",
-    "angular-cookies": "1.5.11",
-    "angular-file-upload": "~1",
-    "angular-filter": "0.5.17",
-    "angular-local-storage": "0.7.1",
-    "angular-markdown-filter": "1.3.2",
-    "angular-md5": "0.1.10",
-    "angular-mocks": "1.5.11",
-    "angular-nvd3": "1.0.9",
-    "angular-resource": "1.5.11",
-    "angular-sanitize": "1.5.11",
-    "angular-ui-bootstrap": "0.13.4",
-    "angular-ui-codemirror": "0.3.0",
-    "angular-xeditable": "0.9.0",
-    "angulartics": "~1.0.3",
-    "angulartics-google-analytics": "0.1.4",
-    "bootstrap": "~3.4",
-    "bootstrap-sass": "~3.4",
-    "canvas-confetti": "^1.6.0",
-    "codemirror": "5.65.0",
-    "core-js": "^3.21.1",
-    "d3": "3.5.17",
-    "es5-shim": "^4.5.12",
-    "file-saver": "^2.0.5",
-    "font-awesome": "~4.7.0",
-    "jquery": "2.1.4",
-    "lodash": "~4.17",
-    "lottie-web": "^5.12.2",
-    "marked": "^11.1.0",
-    "moment": "^2.29.4",
-    "ng-csv": "0.2.3",
-    "ng-file-upload": "~5.0.9",
-    "ng-flex-layout": "^17.3.4-beta.1",
-    "ng2-pdf-viewer": "^10.0",
-    "ngx-bootstrap": "^6.1.0",
-    "ngx-entity-service": "^0.0.39",
-    "ngx-lottie": "^11.0.2",
-    "nvd3": "1.8.6",
-    "rxjs": "~7.4.0",
-    "ts-md5": "^1.3.1",
-    "tslib": "^2.6.2",
-    "underscore.string": "2.3.3",
-    "zone.js": "~0.14"
+    "@ngstack/code-editor": "^9.0.0",
+    "@sentry/angular": "^10.61.0",
+    "@sentry/cli": "^3.5.1",
+    "@swimlane/ngx-charts": "^20.5.0",
+    "@tailwindcss/postcss": "^4.3.2",
+    "@worktile/gantt": "^21.0.0",
+    "angular-calendar": "^0.32.2",
+    "ansi-to-html": "^0.7.2",
+    "canvas-confetti": "^1.9",
+    "d3": "^7.9.0",
+    "date-fns": "^4.4.0",
+    "dompurify": "^3.4.14",
+    "html2canvas": "^1.0.0-rc.7",
+    "html5-qrcode": "^2.3.8",
+    "jszip": "^3.10.1",
+    "lottie-web": "^5.13.0",
+    "marked": "^18.0.5",
+    "moment": "^2.30",
+    "monaco-editor": "^0.55.1",
+    "ng-flex-layout": "^17.3.7-beta.1",
+    "ng2-pdf-viewer": "10.4.0",
+    "ngx-entity-service": "^0.0.44",
+    "ngx-lottie": "^22.0.0",
+    "ngx-monaco-editor-v2-alternative": "^22.0.0",
+    "ngx-skeleton-loader": "^13.0.0",
+    "qrcode": "^1.5.4",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "typescript-eslint": "^8.62.0",
+    "zone.js": "~0.16.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.6",
-    "@angular-eslint/builder": "^17.3.0",
-    "@angular-eslint/eslint-plugin": "^17.3.0",
-    "@angular-eslint/eslint-plugin-template": "^17.3.0",
-    "@angular-eslint/schematics": "^17.3.0",
-    "@angular-eslint/template-parser": "^17.3.0",
-    "@angular/compiler-cli": "^17.3.6",
-    "@angular/language-service": "^17.3.6",
-    "@commitlint/cli": "^16.0.1",
-    "@commitlint/config-conventional": "^17",
-    "@types/angular": "1.5.11",
+    "@angular-eslint/builder": "^22.0.0",
+    "@angular-eslint/eslint-plugin": "^22.0.0",
+    "@angular-eslint/eslint-plugin-template": "^22.0.0",
+    "@angular-eslint/schematics": "^22.0.0",
+    "@angular-eslint/template-parser": "^22.0.0",
+    "@angular/build": "^22.0.9",
+    "@angular/cli": "^22.0.9",
+    "@angular/compiler-cli": "^22.0.3",
+    "@angular/language-service": "^22.0.3",
+    "@commitlint/cli": "^21.1.0",
+    "@commitlint/config-conventional": "^21.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/canvas-confetti": "^1.6.0",
-    "@types/d3": "^3.5.17",
-    "@types/file-saver": "^2.0.1",
-    "@types/jasmine": "~3.9.1",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/lodash": "^4.14.115",
-    "@types/node": "^20.9.0",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "autoprefixer": "~6",
-    "canonical-path": "0.0.2",
-    "concurrently": "^3.2.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsdoc": "39.3.6",
-    "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-prettier": "^5.0.1",
-    "grunt": "^1.0.4",
-    "grunt-bump": "0.8.0",
-    "grunt-coffeelint": "0.0.16",
-    "grunt-contrib-clean": "~1.0.0",
-    "grunt-contrib-coffee": "^1.0.0",
-    "grunt-contrib-concat": "~1.0.1",
-    "grunt-contrib-connect": "^1.0.2",
-    "grunt-contrib-copy": "~1.0.0",
-    "grunt-contrib-jshint": "~1.0.0",
-    "grunt-contrib-watch": "^1.1.0",
-    "grunt-env": "0.4.4",
-    "grunt-html2js": "^0.6.0",
-    "grunt-karma": "~2.0.0",
-    "grunt-newer": "^1.1.2",
-    "grunt-ng-annotate": "^3.0.0",
-    "grunt-postcss": "~0.8",
-    "grunt-preprocess": "5.1.0",
-    "grunt-sass": "^3.0.2",
-    "grunt-sass-globbing": "^1.4.0",
-    "husky": "~8",
-    "ip": "^1.1.2",
-    "jasmine-core": "~4.1.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "^6.3.4",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "load-grunt-tasks": "^5.0.0",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.27",
-    "postcss-scss": "^0.1.7",
-    "prettier": "^3.1.0",
-    "protractor": "~7.0.0",
-    "sass": "^1.48.0",
-    "tailwindcss": "~3.3",
+    "@types/d3": "^7.4.3",
+    "@types/dompurify": "^3.0.5",
+    "@types/node": "^26.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "@typescript-eslint/parser": "^8.62.1",
+    "angular-eslint": "^22.0.0",
+    "autoprefixer": "^10.5.2",
+    "concurrently": "^10.0.5",
+    "eslint": "^10.6.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-tailwindcss": "^4.0.4",
+    "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
+    "npm-run-all2": "^9.0.2",
+    "postcss": "^8.5.26",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.8.4",
+    "sass": "^1.101.0",
+    "tailwindcss": "^4.3.1",
     "ts-node": "~10.9",
-    "typescript": "~5.2",
-    "underscore": "^1.8.3"
+    "typescript": "~6.0.3",
+    "vitest": "^4.1.9"
   },
   "optionalDependencies": {
-    "@nx/nx-darwin-arm64": "^18.0",
-    "@nx/nx-darwin-x64": "^18.0",
-    "@nx/nx-linux-x64-gnu": "^18.0",
-    "@nx/nx-win32-x64-msvc": "^18.0"
+    "@nx/nx-darwin-arm64": "^23.0.1",
+    "@nx/nx-darwin-x64": "^23.0.1",
+    "@nx/nx-linux-arm64-gnu": "^23.0.1",
+    "@nx/nx-linux-x64-gnu": "^23.0.1",
+    "@nx/nx-win32-x64-msvc": "^23.0.1",
+    "@rollup/rollup-linux-arm64-gnu": "^4.62.2",
+    "@rollup/rollup-linux-x64-gnu": "^4.62.2"
+  },
+  "overrides": {
+    "monaco-editor": {
+      "dompurify": "3.4.14"
+    }
   }
 }
diff --git a/proxy-compose.conf.json b/proxy-compose.conf.json
new file mode 100644
index 0000000000..4b62591235
--- /dev/null
+++ b/proxy-compose.conf.json
@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://doubtfire-api:3000",
+    "secure": false
+  }
+}
diff --git a/proxy.conf.json b/proxy.conf.json
new file mode 100644
index 0000000000..f6ccc83cc6
--- /dev/null
+++ b/proxy.conf.json
@@ -0,0 +1,10 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  },
+  "/lti/api": {
+    "target": "http://host.docker.internal:3001",
+    "secure": false
+  }
+}
diff --git a/scripts/upload-sentry-sourcemaps.js b/scripts/upload-sentry-sourcemaps.js
new file mode 100644
index 0000000000..c415e1a246
--- /dev/null
+++ b/scripts/upload-sentry-sourcemaps.js
@@ -0,0 +1,36 @@
+const {execFileSync} = require('node:child_process');
+
+const requiredEnvironment = [
+  'SENTRY_DSN',
+  'SENTRY_AUTH_TOKEN',
+  'SENTRY_ORG',
+  'SENTRY_PROJECT',
+  'SENTRY_RELEASE',
+  'SENTRY_DIST',
+];
+const missingEnvironment = requiredEnvironment.filter((name) => !process.env[name]);
+
+if (missingEnvironment.length > 0) {
+  console.log(
+    `Skipping Sentry sourcemap upload because ${missingEnvironment.join(', ')} ${
+      missingEnvironment.length === 1 ? 'is' : 'are'
+    } not set.`,
+  );
+  process.exit(0);
+}
+
+const sentryArgs = ['--org', process.env.SENTRY_ORG, '--project', process.env.SENTRY_PROJECT];
+const releaseArgs = ['--release', process.env.SENTRY_RELEASE];
+const distArgs = ['--dist', process.env.SENTRY_DIST];
+const distPath = './dist/browser';
+
+execFileSync('sentry-cli', ['sourcemaps', 'inject', ...sentryArgs, ...releaseArgs, distPath], {
+  stdio: 'inherit',
+});
+execFileSync(
+  'sentry-cli',
+  ['sourcemaps', 'upload', ...sentryArgs, ...releaseArgs, ...distArgs, distPath],
+  {
+    stdio: 'inherit',
+  },
+);
diff --git a/scripts/verify-deployment-config.js b/scripts/verify-deployment-config.js
new file mode 100644
index 0000000000..03866c5f20
--- /dev/null
+++ b/scripts/verify-deployment-config.js
@@ -0,0 +1,145 @@
+const assert = require('node:assert/strict');
+const {readFileSync} = require('node:fs');
+const {resolve} = require('node:path');
+
+const root = resolve(__dirname, '..');
+const nginx = readFileSync(resolve(root, 'nginx.conf'), 'utf8');
+const dockerfile = readFileSync(resolve(root, 'deploy.Dockerfile'), 'utf8');
+const developmentCompose = readFileSync(resolve(root, 'docker-compose.yml'), 'utf8');
+const deploymentWorkflows = [
+  ['default', readFileSync(resolve(root, '.github/workflows/deployment.yml'), 'utf8')],
+  [
+    'institution',
+    readFileSync(resolve(root, '.github/workflows/deployment-institution.yml'), 'utf8'),
+  ],
+];
+const applicationBootstrap = readFileSync(resolve(root, 'src/main.ts'), 'utf8');
+const scormPlayerTemplate = readFileSync(
+  resolve(root, 'src/app/common/scorm-player/scorm-player.component.html'),
+  'utf8',
+);
+const productionEnvironment = readFileSync(
+  resolve(root, 'src/environments/environment.prod.ts'),
+  'utf8',
+);
+
+const controlFiles = [
+  '/index.html',
+  '/ngsw.json',
+  '/ngsw-worker.js',
+  '/safety-worker.js',
+  '/worker-basic.min.js',
+  '/manifest.webmanifest',
+];
+const noStorePolicy = 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
+
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+for (const path of controlFiles) {
+  const escapedPath = escapeRegExp(path);
+
+  assert.match(
+    nginx,
+    new RegExp(`^\\s*${escapedPath}\\s+"${noStorePolicy}";`, 'm'),
+    `${path} must map to the no-store cache policy`,
+  );
+  assert.match(
+    nginx,
+    new RegExp(`location = ${escapedPath} \\{\\s*try_files \\$uri =404;\\s*\\}`, 'm'),
+    `${path} must use an exact location and return 404 when absent`,
+  );
+}
+
+assert.match(
+  nginx,
+  /add_header Cache-Control \$ontrack_control_file_cache_control always;/,
+  'the mapped cache policy must be added to responses',
+);
+assert.match(
+  nginx,
+  /try_files \$uri \$uri\/ \$uri\/index\.html \/index\.html;/,
+  'SPA routes must continue to fall back to /index.html',
+);
+for (const [name, workflow] of deploymentWorkflows) {
+  assert.doesNotMatch(
+    workflow,
+    /steps\.meta\.outputs\.labels/,
+    `${name} deployment metadata labels must reference the declared docker_meta step`,
+  );
+  assert.match(workflow, /steps\.docker_meta\.outputs\.labels/);
+
+  for (const line of workflow.split('\n')) {
+    if (/^\s*uses:/.test(line)) {
+      assert.match(
+        line,
+        /@[0-9a-f]{40}(?:\s+#.*)?$/,
+        `${name} production image workflow actions must be pinned to immutable commits`,
+      );
+    }
+  }
+
+  assert.match(workflow, /^\s*sbom:\s*true$/m);
+  assert.match(workflow, /^\s*provenance:\s*mode=max$/m);
+}
+assert.match(
+  dockerfile,
+  /^FROM node:22\.23\.2-bookworm-slim@sha256:[0-9a-f]{64} AS build$/m,
+  'the release build must pin the supported Node image digest',
+);
+assert.match(
+  dockerfile,
+  /npm install --global npm@11\.19\.1/,
+  'the release build must install the reviewed npm security update',
+);
+assert.match(
+  dockerfile,
+  /^FROM nginx:1\.30\.4-alpine@sha256:[0-9a-f]{64}$/m,
+  'the release runtime must pin the Nginx image digest',
+);
+assert.match(
+  dockerfile,
+  /^RUN apk upgrade --no-cache libcrypto3 libssl3$/m,
+  'the release runtime must install the reviewed Alpine OpenSSL security update',
+);
+assert.doesNotMatch(
+  dockerfile,
+  /npm ci[^\n]*--force/,
+  'the release build must not force npm resolution',
+);
+assert.doesNotMatch(
+  dockerfile,
+  /chmod\s+777/,
+  'the release build must not create world-writable source',
+);
+assert.match(
+  developmentCompose,
+  /DF_SECRET_KEY_AAF:\s*\$\{DF_SECRET_KEY_AAF:-\}/,
+  'optional development AAF credentials must come from the ignored environment',
+);
+assert.doesNotMatch(
+  developmentCompose,
+  /https?:\/\/[^\s$]*(?:aaf\.edu\.au|deakin\.edu\.au)/i,
+  'institution-specific AAF endpoints must not be committed in development Compose',
+);
+assert.doesNotMatch(
+  applicationBootstrap,
+  /(?:browserTracingIntegration|replayIntegration|tracesSampleRate|replaysSessionSampleRate|replaysOnErrorSampleRate)/,
+  'tracing and replay must stay disabled while SCORM uses credential-bearing paths',
+);
+assert.match(
+  applicationBootstrap,
+  /enableLogs:\s*false/,
+  'Sentry Logs must stay disabled for the errors-only telemetry policy',
+);
+assert.match(
+  scormPlayerTemplate,
+  /<iframe[^>]*data-sentry-block[^>]*referrerpolicy="no-referrer"/,
+  'the SCORM iframe must suppress referrers and remain blocked from any future replay integration',
+);
+assert.match(
+  productionEnvironment,
+  /enableDemoTools:\s*false/,
+  'production must keep demo tools disabled',
+);
+
+console.log('Deployment configuration checks passed.');
diff --git a/src/app/account/edit-profile/edit-profile.component.html b/src/app/account/edit-profile/edit-profile.component.html
index 54a4e0e362..6fb40b647e 100644
--- a/src/app/account/edit-profile/edit-profile.component.html
+++ b/src/app/account/edit-profile/edit-profile.component.html
@@ -1,7 +1,13 @@
-<div FxLayout="row" fxLayoutAlign="center center" id="parent">
-  <div fxFlex.gt-sm="20"></div>
-  <div fxFlex class="form-container">
-    <f-edit-profile-form mode="edit"></f-edit-profile-form>
+<div class="flex flex-row items-center justify-center" id="parent">
+  <div
+    class="min-[960px]:max-w-[20%] min-[960px]:shrink min-[960px]:grow min-[960px]:basis-full"
+  ></div>
+  <div class="form-container flex-1">
+    @if (!loading) {
+      <f-edit-profile-form mode="edit"></f-edit-profile-form>
+    }
   </div>
-  <div fxFlex.gt-sm="20"></div>
+  <div
+    class="min-[960px]:max-w-[20%] min-[960px]:shrink min-[960px]:grow min-[960px]:basis-full"
+  ></div>
 </div>
diff --git a/src/app/account/edit-profile/edit-profile.component.scss b/src/app/account/edit-profile/edit-profile.component.scss
index d344d62e6a..627d96752e 100644
--- a/src/app/account/edit-profile/edit-profile.component.scss
+++ b/src/app/account/edit-profile/edit-profile.component.scss
@@ -1,7 +1,7 @@
 #parent {
-    margin-top: 30px;
+  margin-top: 30px;
 }
 
 .form-container {
-    max-width: 800px;
-}
\ No newline at end of file
+  max-width: 800px;
+}
diff --git a/src/app/account/edit-profile/edit-profile.component.spec.ts b/src/app/account/edit-profile/edit-profile.component.spec.ts
index 189015c5a9..b15e0bfc85 100644
--- a/src/app/account/edit-profile/edit-profile.component.spec.ts
+++ b/src/app/account/edit-profile/edit-profile.component.spec.ts
@@ -1,5 +1,11 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EditProfileComponent } from './edit-profile.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {EditProfileComponent} from './edit-profile.component';
+
+const emptyProvider = {};
 
 describe('EditProfileComponent', () => {
   let component: EditProfileComponent;
@@ -7,12 +13,20 @@ describe('EditProfileComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [EditProfileComponent]
-    }).compileComponents();
+      declarations: [EditProfileComponent],
+      providers: [
+        {provide: AuthenticationService, useValue: emptyProvider},
+        {provide: Router, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(EditProfileComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(EditProfileComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/account/edit-profile/edit-profile.component.ts b/src/app/account/edit-profile/edit-profile.component.ts
index 266530b422..91e2c95b78 100644
--- a/src/app/account/edit-profile/edit-profile.component.ts
+++ b/src/app/account/edit-profile/edit-profile.component.ts
@@ -1,9 +1,29 @@
-import { Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
 
 @Component({
   selector: 'f-edit-profile',
   templateUrl: './edit-profile.component.html',
   styleUrls: ['./edit-profile.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class EditProfileComponent {
+export class EditProfileComponent implements OnInit {
+  public loading: boolean = true;
+
+  constructor(
+    private authenticationService: AuthenticationService,
+    private router: Router,
+  ) {}
+
+  public ngOnInit(): void {
+    this.loading = true;
+    this.authenticationService.afterAuthCall((result) => {
+      if (!result) {
+        return this.router.navigateByUrl('/sign_in');
+      }
+      this.loading = false;
+    });
+  }
 }
diff --git a/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.html b/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.html
index 9b294d5597..7d53f9eb83 100644
--- a/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.html
+++ b/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.html
@@ -1,99 +1,129 @@
 <div class="activity-type-list-container">
   <div class="header">
-    <div class="mt-10">
-      <h1 class="mb-1">Activities</h1>
+    <div class="mt-6">
+      <h1 class="mb-0.5">Activities</h1>
       <p>Add new activities or modify existing ones</p>
     </div>
   </div>
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortTableData($event)" class="f-table">
-    <!-- Name Column -->
-    <ng-container [formGroup]="formData" matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-      <td mat-cell *matCellDef="let activityType">
-        @if (!editing(activityType)) {
-        <div>
-          {{ activityType.name }}
-        </div>
-        } @else {
+  @if (loadingActivities) {
+    <div aria-busy="true" aria-label="Loading activities" class="overflow-hidden">
+      <div class="flex h-14 items-center gap-6 border-b border-gray-300 px-4">
+        @for (width of ['30%', '22%', '4%']; track $index) {
+          <ngx-skeleton-loader
+            [theme]="{width: width, height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+        }
+      </div>
 
-        <div class="edit-actions right">
-          <span>
-            <button mat-icon-button color="warn" (click)="cancelEdit()" aria-label="cancel edit">
-              <mat-icon>cancel</mat-icon>
-            </button>
-            <button mat-icon-button color="primary" (click)="submit()" aria-label="submit changes">
-              <mat-icon>save</mat-icon>
-            </button>
-            <button mat-icon-button (click)="deleteActivity(activityType)" aria-label="delete activity type">
-              <mat-icon color="primary">delete</mat-icon>
-            </button>
-          </span>
+      @for (row of skeletonRows; track row) {
+        <div class="flex h-[72px] items-center gap-6 border-b border-y-gray-300 px-4">
+          <ngx-skeleton-loader
+            class="w-[50%]"
+            [theme]="{width: '35%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[50%]"
+            [theme]="{width: '35%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            appearance="circle"
+            [theme]="{width: '28px', height: '28px', margin: '0'}"
+          ></ngx-skeleton-loader>
         </div>
+      }
+    </div>
+  }
 
-        }
-        <ng-template #edit>
+  <table
+    class=""
+    mat-table
+    matSort
+    [dataSource]="dataSource"
+    [hidden]="loadingActivities"
+    (matSortChange)="sortTableData($event)"
+  >
+    <!-- Name Column -->
+    <ng-container matColumnDef="name" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
+      <td *matCellDef="let activityType" mat-cell>
+        @if (!editing(activityType)) {
+          <div>
+            {{ activityType.name }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
-            <input matInput required formControlName="name" placeholder="Name" />
+            <input formControlName="name" matInput placeholder="Name" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="name" placeholder="Name" />
+          <input formControlName="name" matInput placeholder="Name" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Abbreviation Column -->
-    <ng-container [formGroup]="formData" matColumnDef="abbreviation">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Abbreviation</th>
-      <td mat-cell *matCellDef="let activityType">
+    <ng-container matColumnDef="abbreviation" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Abbreviation</th>
+      <td *matCellDef="let activityType" mat-cell>
         @if (!editing(activityType)) {
-        <div>
-          {{ activityType.abbreviation }}
-        </div>
-        } @else { #edit| }
-        <ng-template #edit>
+          <div>
+            {{ activityType.abbreviation }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
-            <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
+            <input formControlName="abbreviation" matInput placeholder="Abbreviation" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
+          <input formControlName="abbreviation" matInput placeholder="Abbreviation" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Options Column -->
     <ng-container matColumnDef="options" stickyEnd>
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let activityType">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let activityType" mat-cell>
         @if (!editing(activityType)) {
-        <div class="right">
-          <button mat-icon-button (click)="flagEdit(activityType)" aria-label="edit activity type">
-            <mat-icon>edit</mat-icon>
-          </button>
-        </div>
-        } @else { #edit| }
-        <ng-template #edit>
+          <div class="right">
+            <button
+              aria-label="edit activity type"
+              mat-icon-button
+              (click)="flagEdit(activityType)"
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+          </div>
+        } @else {
           <div class="edit-actions right">
             <span>
-              <button mat-icon-button color="warn" (click)="cancelEdit()" aria-label="cancel edit">
+              <button aria-label="cancel edit" color="warn" mat-icon-button (click)="cancelEdit()">
                 <mat-icon>cancel</mat-icon>
               </button>
-              <button mat-icon-button color="primary" (click)="submit()" aria-label="submit changes">
+              <button
+                aria-label="submit changes"
+                color="primary"
+                mat-icon-button
+                (click)="submit()"
+              >
                 <mat-icon>save</mat-icon>
               </button>
-              <button mat-icon-button (click)="deleteActivity(activityType)" aria-label="delete activity type">
+              <button
+                aria-label="delete activity type"
+                mat-icon-button
+                (click)="deleteActivity(activityType)"
+              >
                 <mat-icon color="primary">delete</mat-icon>
               </button>
             </span>
           </div>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <div class="edit-actions right">
           <button mat-icon-button (click)="submit()">
             <mat-icon>add</mat-icon>
@@ -102,8 +132,8 @@ <h1 class="mb-1">Activities</h1>
       </td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="columns"></tr>
-    <tr mat-row *matRowDef="let row; columns: columns"></tr>
-    <tr [hidden]="selected" mat-footer-row *matFooterRowDef="columns"></tr>
+    <tr *matHeaderRowDef="columns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: columns" mat-row></tr>
+    <tr *matFooterRowDef="columns" mat-footer-row [hidden]="selected"></tr>
   </table>
 </div>
diff --git a/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.ts b/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.ts
index 39c4c83d07..e74e5322ec 100644
--- a/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.ts
+++ b/src/app/admin/institution-settings/activity-type-list/activity-type-list.component.ts
@@ -1,30 +1,40 @@
-import {Component, ViewChild} from '@angular/core';
-import {MatTableDataSource, MatTable} from '@angular/material/table';
-import {ActivityType, ActivityTypeService} from 'src/app/api/models/doubtfire-model';
-import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {AfterViewInit, ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {UntypedFormControl, Validators} from '@angular/forms';
 import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {finalize} from 'rxjs';
+import {ActivityType, ActivityTypeService} from 'src/app/api/models/doubtfire-model';
+import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
 import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'activity-type-list',
   templateUrl: 'activity-type-list.component.html',
   styleUrls: ['activity-type-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class ActivityTypeListComponent extends EntityFormComponent<ActivityType> {
-  @ViewChild(MatTable, {static: true}) table: MatTable<any>;
+export class ActivityTypeListComponent
+  extends EntityFormComponent<ActivityType>
+  implements AfterViewInit
+{
+  @ViewChild(MatTable, {static: true}) table: MatTable<ActivityType>;
   @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   // Set up the table
   columns: string[] = ['name', 'abbreviation', 'options'];
   activityTypes: ActivityType[] = new Array<ActivityType>();
   dataSource = new MatTableDataSource(this.activityTypes);
+  loadingActivities = true;
+  skeletonRows = Array.from({length: 3}, (_, index) => index);
 
   // Calls the parent's constructor, passing in an object
   // that maps all of the form controls that this form consists of.
   constructor(
     private activityTypeService: ActivityTypeService,
     private alertService: AlertService,
+    private confirmationModal: ConfirmationModalService,
   ) {
     super(
       {
@@ -37,9 +47,13 @@ export class ActivityTypeListComponent extends EntityFormComponent<ActivityType>
 
   ngAfterViewInit() {
     // Get all the activity types and add them to the table
-    this.activityTypeService.query().subscribe((activityTypes) => {
-      this.pushToTable(activityTypes);
-    });
+    this.loadingActivities = true;
+    this.activityTypeService
+      .query()
+      .pipe(finalize(() => (this.loadingActivities = false)))
+      .subscribe((activityTypes) => {
+        this.pushToTable(activityTypes);
+      });
   }
 
   // This method is passed to the submit method on the parent
@@ -53,8 +67,14 @@ export class ActivityTypeListComponent extends EntityFormComponent<ActivityType>
   // Push the values that will be displayed in the table
   // to the datasource
   private pushToTable(value: ActivityType | ActivityType[]) {
-    if (!value) return;
-    value instanceof Array ? this.activityTypes.push(...value) : this.activityTypes.push(value);
+    if (!value) {
+      return;
+    }
+    if (value instanceof Array) {
+      this.activityTypes.push(...value);
+    } else {
+      this.activityTypes.push(value);
+    }
     this.dataSource.sort = this.sort;
     this.table.renderRows();
   }
@@ -66,14 +86,22 @@ export class ActivityTypeListComponent extends EntityFormComponent<ActivityType>
   }
 
   deleteActivity(activity: ActivityType) {
-    this.delete(activity, this.activityTypes, this.activityTypeService).subscribe({
-      next: () => {
-        this.alertService.success(`${activity.name} has been deleted.`, 2000);
+    this.confirmationModal.show(
+      `Delete activity type ${activity.name}`,
+      'This activity type is used by tutorial streams across every unit. Deleting it cannot be undone.',
+      () => {
+        this.delete(activity, this.activityTypes, this.activityTypeService).subscribe({
+          next: () => {
+            this.alertService.success(`${activity.name} has been deleted.`, 2000);
+          },
+          error: (response) => {
+            this.alertService.error(response.error?.error || 'Unable to delete activity type.');
+          },
+        });
       },
-      error: (response) => {
-        this.alertService.error(response.error?.error || 'Unable to delete activity type.');
-      },
-    });
+      undefined,
+      'Delete',
+    );
   }
 
   // Sorting function to sort data when sort
diff --git a/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.html b/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.html
index a97dcd2e16..16bcd8b53b 100644
--- a/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.html
+++ b/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.html
@@ -1,158 +1,178 @@
 <div class="campus-list-container">
   <div class="header">
-    <div class="mt-10">
-      <h1 class="mb-1">Campuses</h1>
+    <div class="mt-6">
+      <h1 class="mb-0.5">Campuses</h1>
       <p>Add new campuses or modify existing ones</p>
     </div>
   </div>
-  <table #table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortTableData($event)" class="f-table">
+  <table
+    #table
+    class=""
+    mat-table
+    matSort
+    [dataSource]="dataSource"
+    (matSortChange)="sortTableData($event)"
+  >
     <!-- Name Column -->
-    <ng-container [formGroup]="formData" matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-      <td mat-cell *matCellDef="let campus">
+    <ng-container matColumnDef="name" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
+      <td *matCellDef="let campus" mat-cell>
         @if (!editing(campus)) {
-        <div>
-          {{ campus.name }}
-        </div>
+          <div>
+            {{ campus.name }}
+          </div>
         } @else {
-
-        <div class="edit-actions right">
-          <span>
-            <button mat-icon-button color="warn" (click)="cancelEdit()" aria-label="cancel edit">
-              <mat-icon>cancel</mat-icon>
-            </button>
-            <button mat-icon-button color="primary" (click)="submit()" aria-label="submit changes">
-              <mat-icon>save</mat-icon>
-            </button>
-            <button mat-icon-button color="warn" (click)="deleteCampus(campus)" aria-label="delete campus">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </span>
-        </div>
-
-        }
-        <ng-template #edit>
           <mat-form-field appearance="outline" class="data-entry">
-            <input matInput required formControlName="name" placeholder="Name" />
+            <input formControlName="name" matInput placeholder="Name" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="name" placeholder="Name" />
+          <input formControlName="name" matInput placeholder="Name" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Abbreviation Column -->
-    <ng-container [formGroup]="formData" matColumnDef="abbreviation">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Abbreviation</th>
-      <td mat-cell *matCellDef="let campus">
+    <ng-container matColumnDef="abbreviation" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Abbreviation</th>
+      <td *matCellDef="let campus" mat-cell>
         @if (!editing(campus)) {
-        <div>
-          {{ campus.abbreviation }}
-        </div>
-        } @else { #edit| }
-        <ng-template #edit>
+          <div>
+            {{ campus.abbreviation }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
-            <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
+            <input formControlName="abbreviation" matInput placeholder="Abbreviation" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
+          <input formControlName="abbreviation" matInput placeholder="Abbreviation" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Mode Column -->
-    <ng-container [formGroup]="formData" matColumnDef="mode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Default Sync Mode</th>
-      <td mat-cell *matCellDef="let campus">
+    <ng-container matColumnDef="mode" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Default Sync Mode</th>
+      <td *matCellDef="let campus" mat-cell>
         @if (!editing(campus)) {
-        <div>
-          {{ campus.mode | titlecase }}
-        </div>
-        } @else { #edit| }
-        <ng-template #edit>
+          <div>
+            {{ campus.mode | titlecase }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
             <mat-label>Default Sync Mode</mat-label>
-            <mat-select required formControlName="mode">
+            <mat-select formControlName="mode" required>
               @for (mode of syncModes; track mode) {
-              <mat-option [value]="mode">
-                {{ mode | titlecase }}
-              </mat-option>
+                <mat-option [value]="mode">
+                  {{ mode | titlecase }}
+                </mat-option>
               }
             </mat-select>
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
           <mat-label>Default Sync Mode</mat-label>
-          <mat-select required formControlName="mode">
+          <mat-select formControlName="mode" required>
             @for (mode of syncModes; track mode) {
-            <mat-option [value]="mode">
-              {{ mode | titlecase }}
-            </mat-option>
+              <mat-option [value]="mode">
+                {{ mode | titlecase }}
+              </mat-option>
             }
           </mat-select>
         </mat-form-field>
       </td>
     </ng-container>
 
+    <!-- Timezone Column -->
+    <ng-container matColumnDef="timezone" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Timezone</th>
+      <td *matCellDef="let campus" mat-cell>
+        @if (!editing(campus)) {
+          <div>
+            {{ campus.timezone }}
+          </div>
+        } @else {
+          <mat-form-field appearance="outline" class="data-entry">
+            <mat-label>Timezone</mat-label>
+
+            <input formControlName="timezone" matInput />
+          </mat-form-field>
+        }
+      </td>
+      <td *matFooterCellDef mat-footer-cell>
+        <mat-form-field appearance="outline" class="data-entry">
+          <mat-label>Timezone</mat-label>
+          <input formControlName="timezone" matInput placeholder="Eg. Australia/Melbourne" />
+        </mat-form-field>
+      </td>
+    </ng-container>
+
     <!-- Active Column -->
-    <ng-container [formGroup]="formData" matColumnDef="active">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Active</th>
-      <td mat-cell *matCellDef="let campus">
+    <ng-container matColumnDef="active" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Active</th>
+      <td *matCellDef="let campus" mat-cell>
         @if (!editing(campus)) {
-        <div>
-          <mat-checkbox [checked]="campus.active" disabled> </mat-checkbox>
-        </div>
-        } @else { #edit| }
-        <ng-template #edit>
-          <mat-checkbox [checked]="campus.active" formControlName="active"> </mat-checkbox>
-        </ng-template>
+          <div>
+            <mat-checkbox disabled [checked]="campus.active"> </mat-checkbox>
+          </div>
+        } @else {
+          <mat-checkbox formControlName="active" [checked]="campus.active"> </mat-checkbox>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-checkbox formControlName="active"> </mat-checkbox>
       </td>
     </ng-container>
 
     <!-- Options Column -->
     <ng-container matColumnDef="options" stickyEnd>
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let campus">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let campus" mat-cell>
         @if (!editing(campus)) {
-        <div class="right">
-          <!-- <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+          <div class="right">
+            <!-- <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
             <mat-icon>more_vert</mat-icon>
           </button> -->
-          <!-- <mat-menu #menu="matMenu"> -->
-          <button mat-icon-button (click)="flagEdit(campus)" aria-label="edit campus">
-            <mat-icon>edit</mat-icon>
-          </button>
-          <!-- </mat-menu> -->
-        </div>
-        } @else { #edit| }
-        <ng-template #edit>
+            <!-- <mat-menu #menu="matMenu"> -->
+            <button aria-label="edit campus" mat-icon-button (click)="flagEdit(campus)">
+              <mat-icon>edit</mat-icon>
+            </button>
+            <!-- </mat-menu> -->
+          </div>
+        } @else {
           <div class="edit-actions right">
             <span>
-              <button mat-icon-button color="warn" (click)="cancelEdit()" aria-label="cancel edit">
+              <button aria-label="cancel edit" color="warn" mat-icon-button (click)="cancelEdit()">
                 <mat-icon>cancel</mat-icon>
               </button>
-              <button mat-icon-button color="primary" (click)="submit()" aria-label="submit changes">
+              <button
+                aria-label="submit changes"
+                color="primary"
+                mat-icon-button
+                (click)="submit()"
+              >
                 <mat-icon>save</mat-icon>
               </button>
-              <button mat-icon-button color="warn" (click)="deleteCampus(campus)" aria-label="delete campus">
+              <button
+                aria-label="delete campus"
+                color="warn"
+                mat-icon-button
+                (click)="deleteCampus(campus)"
+              >
                 <mat-icon>delete</mat-icon>
               </button>
             </span>
           </div>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <div class="edit-actions right">
           <button mat-icon-button (click)="submit()">
             <mat-icon>add</mat-icon>
@@ -161,8 +181,8 @@ <h1 class="mb-1">Campuses</h1>
       </td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="columns"></tr>
-    <tr mat-row *matRowDef="let row; columns: columns"></tr>
-    <tr [hidden]="selected" mat-footer-row *matFooterRowDef="columns"></tr>
+    <tr *matHeaderRowDef="columns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: columns" mat-row></tr>
+    <tr *matFooterRowDef="columns" mat-footer-row [hidden]="selected"></tr>
   </table>
 </div>
diff --git a/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.ts b/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.ts
index 3ab6b9e71e..ed5b1b9852 100644
--- a/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.ts
+++ b/src/app/admin/institution-settings/campuses/campus-list/campus-list.component.ts
@@ -1,24 +1,27 @@
-import {Component, ViewChild} from '@angular/core';
-import {MatSort, Sort} from '@angular/material/sort';
-import {MatTableDataSource, MatTable} from '@angular/material/table';
+import {AfterViewInit, ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {UntypedFormControl, Validators} from '@angular/forms';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
 import {Campus, CampusService} from 'src/app/api/models/doubtfire-model';
 import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
 import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'campus-list',
   templateUrl: 'campus-list.component.html',
   styleUrls: ['campus-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class CampusListComponent extends EntityFormComponent<Campus> {
+export class CampusListComponent extends EntityFormComponent<Campus> implements AfterViewInit {
   @ViewChild(MatTable, {static: true}) table: MatTable<Campus>;
   @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   syncModes = ['timetable', 'automatic', 'manual'];
 
   // Set up the table
-  columns: string[] = ['name', 'abbreviation', 'mode', 'active', 'options'];
+  columns: string[] = ['name', 'abbreviation', 'mode', 'timezone', 'active', 'options'];
   campuses: Campus[] = new Array<Campus>();
   dataSource = new MatTableDataSource(this.campuses);
 
@@ -27,12 +30,14 @@ export class CampusListComponent extends EntityFormComponent<Campus> {
   constructor(
     private campusService: CampusService,
     private alerts: AlertService,
+    private confirmationModal: ConfirmationModalService,
   ) {
     super(
       {
         abbreviation: new UntypedFormControl('', [Validators.required]),
         name: new UntypedFormControl('', [Validators.required]),
         mode: new UntypedFormControl('', [Validators.required]),
+        timezone: new UntypedFormControl('', [Validators.required]),
         active: new UntypedFormControl(false),
       },
       'Campus',
@@ -57,9 +62,15 @@ export class CampusListComponent extends EntityFormComponent<Campus> {
   // Push the values that will be displayed in the table
   // to the datasource
   private pushToTable(value: Campus | Campus[]) {
-    if (!value) return;
+    if (!value) {
+      return;
+    }
 
-    value instanceof Array ? this.campuses.push(...value) : this.campuses.push(value);
+    if (value instanceof Array) {
+      this.campuses.push(...value);
+    } else {
+      this.campuses.push(value);
+    }
     this.dataSource.sort = this.sort;
   }
 
@@ -71,14 +82,22 @@ export class CampusListComponent extends EntityFormComponent<Campus> {
 
   // This method is called when the delete button is clicked
   deleteCampus(campus: Campus) {
-    this.delete(campus, this.campuses, this.campusService).subscribe({
-      next: () => {
-        this.alerts.success(`${campus.name} has been deleted.`, 2000);
-      },
-      error: (response) => {
-        this.alerts.error(response.error?.error || 'Unable to delete campus.');
+    this.confirmationModal.show(
+      `Delete campus ${campus.name}`,
+      'This campus is used by tutorials and students across every unit. Deleting it cannot be undone.',
+      () => {
+        this.delete(campus, this.campuses, this.campusService).subscribe({
+          next: () => {
+            this.alerts.success(`${campus.name} has been deleted.`, 2000);
+          },
+          error: (response) => {
+            this.alerts.error(response.error?.error || 'Unable to delete campus.');
+          },
+        });
       },
-    });
+      undefined,
+      'Delete',
+    );
   }
 
   // Sorting function to sort data when sort
@@ -91,6 +110,7 @@ export class CampusListComponent extends EntityFormComponent<Campus> {
       case 'name':
       case 'abbreviation':
       case 'mode':
+      case 'timezone':
       case 'active':
         return super.sortTableData(sort);
     }
diff --git a/src/app/admin/institution-settings/institution-settings.component.html b/src/app/admin/institution-settings/institution-settings.component.html
index fdaa85dddc..b10bafbc64 100644
--- a/src/app/admin/institution-settings/institution-settings.component.html
+++ b/src/app/admin/institution-settings/institution-settings.component.html
@@ -1,22 +1,56 @@
-<div class="institution-settings-container">
-  <mat-tab-group>
-    <mat-tab label="Campuses">
-      <campus-list></campus-list>
-    </mat-tab>
-    <mat-tab label="Activities">
-      <activity-type-list></activity-type-list>
-    </mat-tab>
-    <mat-tab label="Teaching Periods">
-      <f-teaching-period-list></f-teaching-period-list>
-    </mat-tab>
-    @if (overseerEnabled) {
-    <mat-tab label="Overseer Images">
-      <overseer-image-list></overseer-image-list>
-    </mat-tab>
-    } @if (tiiEnabled) {
-    <mat-tab label="TurnItIn">
-      <f-tii-action-log></f-tii-action-log>
-    </mat-tab>
+<div>
+  <!-- <h1 class="py-2 text-center text-gray-800">Institution settings</h1> -->
+  <mat-tab-group
+    class="mx-auto mb-6 max-w-fit"
+    dynamicHeight
+    [selectedIndex]="currentIndex"
+    (selectedTabChange)="onTabChange($event)"
+  >
+    @for (tab of tabs; track tab.routeSegment) {
+      <mat-tab [label]="tab.label"></mat-tab>
     }
   </mat-tab-group>
+
+  <div class="min-h-0 flex-1">
+    @switch (currentTab.routeSegment) {
+      @case ('campuses') {
+        <f-page-container>
+          <campus-list></campus-list>
+        </f-page-container>
+      }
+      @case ('activities') {
+        <f-page-container>
+          <activity-type-list></activity-type-list>
+        </f-page-container>
+      }
+      @case ('teaching-periods') {
+        <f-page-container>
+          <f-teaching-period-list></f-teaching-period-list>
+        </f-page-container>
+      }
+      @case ('learning-outcomes') {
+        <f-page-container>
+          <div class="learning-outcomes-container">
+            <div class="header">
+              <div class="mt-6">
+                <h1 class="mb-0.5">Learning Outcomes</h1>
+                <p>Manage global learning outcomes for the institution</p>
+              </div>
+            </div>
+            <f-learning-outcome-editor></f-learning-outcome-editor>
+          </div>
+        </f-page-container>
+      }
+      @case ('overseer-images') {
+        <f-page-container>
+          <overseer-image-list></overseer-image-list>
+        </f-page-container>
+      }
+      @case ('turnitin') {
+        <div class="px-20">
+          <f-tii-action-log></f-tii-action-log>
+        </div>
+      }
+    }
+  </div>
 </div>
diff --git a/src/app/admin/institution-settings/institution-settings.component.scss b/src/app/admin/institution-settings/institution-settings.component.scss
index 8681f6dbfa..b1baa5aebe 100644
--- a/src/app/admin/institution-settings/institution-settings.component.scss
+++ b/src/app/admin/institution-settings/institution-settings.component.scss
@@ -1,3 +1,13 @@
-.institution-settings-container {
-  padding: 0 5rem 0 5rem;
+.learning-outcomes-container {
+  padding: 0 1rem 1rem 1rem;
+}
+table {
+  width: 100%;
+}
+.header {
+  display: flex;
+  .interactions {
+    margin-left: auto;
+    margin-top: auto;
+  }
 }
diff --git a/src/app/admin/institution-settings/institution-settings.component.ts b/src/app/admin/institution-settings/institution-settings.component.ts
index c4fd2d78af..49035ea4ca 100644
--- a/src/app/admin/institution-settings/institution-settings.component.ts
+++ b/src/app/admin/institution-settings/institution-settings.component.ts
@@ -1,22 +1,93 @@
-import { Component } from '@angular/core';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Subscription} from 'rxjs';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+type InstitutionSettingsTabKey =
+  | 'campuses'
+  | 'activities'
+  | 'teaching-periods'
+  | 'learning-outcomes'
+  | 'overseer-images'
+  | 'turnitin';
+
+interface InstitutionSettingsTab {
+  label: string;
+  routeSegment: InstitutionSettingsTabKey;
+  enabled: boolean;
+}
 
 @Component({
   selector: 'institution-settings',
   templateUrl: 'institution-settings.component.html',
-  styleUrls: ['institution-settings.component.scss']
+  styleUrls: ['institution-settings.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class InstitutionSettingsComponent {
+export class InstitutionSettingsComponent implements OnInit, OnDestroy {
+  public currentTab: InstitutionSettingsTab = {
+    label: 'Campuses',
+    routeSegment: 'campuses',
+    enabled: true,
+  };
+
+  private subscriptions: Subscription[] = [];
 
   constructor(
     private constants: DoubtfireConstants,
-  ) { }
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
+
+  public ngOnInit(): void {
+    this.updateCurrentTabFromState(this.route.snapshot.paramMap.get('tab'));
+
+    this.subscriptions.push(
+      this.route.paramMap.subscribe((params) => this.updateCurrentTabFromState(params.get('tab'))),
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
 
-  public get overseerEnabled() : boolean {
+  public get tabs(): InstitutionSettingsTab[] {
+    const tabs: InstitutionSettingsTab[] = [
+      {label: 'Campuses', routeSegment: 'campuses', enabled: true},
+      {label: 'Activities', routeSegment: 'activities', enabled: true},
+      {label: 'Teaching Periods', routeSegment: 'teaching-periods', enabled: true},
+      {label: 'Learning Outcomes', routeSegment: 'learning-outcomes', enabled: true},
+      {label: 'Overseer Images', routeSegment: 'overseer-images', enabled: this.overseerEnabled},
+      {label: 'TurnItIn', routeSegment: 'turnitin', enabled: this.tiiEnabled},
+    ];
+
+    return tabs.filter((tab) => tab.enabled);
+  }
+
+  public get currentIndex(): number {
+    const index = this.tabs.findIndex((tab) => tab.routeSegment === this.currentTab.routeSegment);
+    return index >= 0 ? index : 0;
+  }
+
+  public get overseerEnabled(): boolean {
     return this.constants.IsOverseerEnabled.value;
   }
 
-  public get tiiEnabled() : boolean {
+  public get tiiEnabled(): boolean {
     return this.constants.IsTiiEnabled.value;
   }
+
+  public onTabChange(event: MatTabChangeEvent): void {
+    const nextTab = this.tabs[event.index] ?? this.tabs[0];
+    this.currentTab = nextTab;
+    this.router.navigate(['/admin/institution-settings', nextTab.routeSegment], {replaceUrl: true});
+  }
+
+  private updateCurrentTabFromState(tabParam?: string | null): void {
+    this.currentTab =
+      this.tabs.find((tab) => tab.routeSegment === tabParam) ??
+      this.tabs.find((tab) => tab.routeSegment === 'campuses') ??
+      this.tabs[0];
+  }
 }
diff --git a/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.html b/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.html
index d2e70e730d..c9b0d15df4 100644
--- a/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.html
+++ b/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.html
@@ -1,145 +1,218 @@
+<ng-template #textDialog let-data>
+  <mat-card class="max-w-[600px] p-2.5">
+    <pre>{{ data.text }}</pre>
+  </mat-card>
+</ng-template>
+
 <div class="overseer-image-list-container">
   <div class="header">
     <div>
-      <h3>Overseer Images</h3>
+      <h3>
+        Overseer Images
+        @if (diskSpace !== null) {
+          ({{ diskSpace ?? 'N/A' }} GB available)
+        }
+      </h3>
       <p>Add new image or modify existing ones used for automated task analysis</p>
     </div>
   </div>
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortTableData($event)" class="f-table">
-    <!-- Name Column -->
-    <ng-container [formGroup]="formData" matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-      <td mat-cell *matCellDef="let overseerImage">
-        <div *ngIf="!editing(overseerImage); else edit">
-          {{ overseerImage.name }}
+  @if (loadingImages) {
+    <div aria-busy="true" aria-label="Loading overseer images" class="overflow-hidden">
+      <div class="flex h-14 items-center gap-6 border-b border-gray-300 px-4">
+        @for (width of ['22%', '18%', '8%', '16%', '10%', '4%']; track $index) {
+          <ngx-skeleton-loader
+            [theme]="{width: width, height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+        }
+      </div>
+
+      @for (row of skeletonRows; track row) {
+        <div class="flex h-[72px] items-center gap-6 border-b border-y-gray-300 px-4">
+          <ngx-skeleton-loader
+            class="w-[28%]"
+            [theme]="{width: '35%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[28%]"
+            [theme]="{width: '35%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[10%]"
+            [theme]="{width: '35%', height: '32px', 'border-radius': '4px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[15%]"
+            [theme]="{width: '50%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            appearance="circle"
+            [theme]="{width: '28px', height: '28px', margin: '0'}"
+          ></ngx-skeleton-loader>
         </div>
-        <ng-template #edit>
-          <mat-form-field class="data-entry">
-            <input matInput required formControlName="name" placeholder="Name" />
+      }
+    </div>
+  }
+
+  <table
+    class=""
+    mat-table
+    matSort
+    [dataSource]="dataSource"
+    [hidden]="loadingImages"
+    (matSortChange)="sortTableData($event)"
+  >
+    <!-- Name Column -->
+    <ng-container matColumnDef="name" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
+      <td *matCellDef="let overseerImage" mat-cell>
+        @if (!editing(overseerImage)) {
+          <div>
+            {{ overseerImage.name }}
+          </div>
+        } @else {
+          <mat-form-field appearance="outline" class="data-entry">
+            <mat-label>Name</mat-label>
+            <input formControlName="name" matInput placeholder="Name" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
-          <input matInput required formControlName="name" placeholder="Name" />
+      <td *matFooterCellDef mat-footer-cell>
+        <mat-form-field appearance="outline" class="data-entry">
+          <mat-label>Name</mat-label>
+          <input formControlName="name" matInput placeholder="Name" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Tag Column -->
-    <ng-container [formGroup]="formData" matColumnDef="tag">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Tag</th>
-      <td mat-cell *matCellDef="let overseerImage">
-        <div *ngIf="!editing(overseerImage); else edit">
-          {{ overseerImage.tag }}
-        </div>
-        <ng-template #edit>
-          <mat-form-field class="data-entry">
-            <input matInput required formControlName="tag" placeholder="Tag" />
+    <ng-container matColumnDef="tag" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Tag</th>
+      <td *matCellDef="let overseerImage" mat-cell>
+        @if (!editing(overseerImage)) {
+          <div>
+            {{ overseerImage.tag }}
+          </div>
+        } @else {
+          <mat-form-field appearance="outline" class="data-entry">
+            <mat-label>Tag</mat-label>
+            <input formControlName="tag" matInput placeholder="Tag" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
-          <input matInput required formControlName="tag" placeholder="Tag" />
+      <td *matFooterCellDef mat-footer-cell>
+        <mat-form-field appearance="outline" class="data-entry">
+          <mat-label>Tag</mat-label>
+          <input formControlName="tag" matInput placeholder="Tag" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Pull Button Column -->
     <ng-container matColumnDef="pull">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let overseerImage">
-        <div class="right" *ngIf="!editing(overseerImage); else edit">
-          <button mat-flat-button color="primary" (click)="pullOverseerImage(overseerImage)">Pull</button>
-        </div>
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let overseerImage" mat-cell>
+        @if (!editing(overseerImage)) {
+          <div class="right">
+            <button color="primary" mat-flat-button (click)="pullOverseerImage(overseerImage)">
+              Pull
+            </button>
+          </div>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef></td>
+      <td *matFooterCellDef mat-footer-cell></td>
     </ng-container>
 
     <!-- Last Pulled Column -->
     <ng-container matColumnDef="last-pulled">
-      <th mat-header-cell *matHeaderCellDef>Last Pulled</th>
-      <td mat-cell *matCellDef="let overseerImage">
-        <div class="right" *ngIf="!editing(overseerImage); else edit">
-          {{ overseerImage.lastPulledDate }}
-        </div>
+      <th *matHeaderCellDef mat-header-cell>Last Pulled</th>
+      <td *matCellDef="let overseerImage" mat-cell>
+        @if (!editing(overseerImage)) {
+          <div class="right">
+            {{ overseerImage.lastPulledDate | humanizedDate }}
+          </div>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef></td>
+      <td *matFooterCellDef mat-footer-cell></td>
     </ng-container>
 
     <!-- Status Column -->
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef>Status</th>
-      <td mat-cell *matCellDef="let overseerImage">
-        <div
-          class="right"
-          *ngIf="!editing(overseerImage); else edit"
-          [ngStyle]="{
-            color:
-              overseerImage.pulledImageStatus === 'success'
-                ? 'green'
-                : overseerImage.pulledImageStatus === 'loading'
-                ? 'orange'
-                : overseerImage.pulledImageStatus === 'failed'
-                ? 'red'
-                : ''
-          }"
-        >
-          <button
-            class="status-icon"
-            *ngIf="overseerImage.pulledImageStatus === 'success'"
-            [matTooltip]="overseerImage.pulledImageText"
+      <th *matHeaderCellDef mat-header-cell>Status</th>
+      <td *matCellDef="let overseerImage" mat-cell>
+        @if (!editing(overseerImage)) {
+          <div
+            class="right"
+            [ngStyle]="{
+              color:
+                overseerImage.pulledImageStatus === 'success'
+                  ? 'green'
+                  : overseerImage.pulledImageStatus === 'loading'
+                    ? 'orange'
+                    : overseerImage.pulledImageStatus === 'failed'
+                      ? 'red'
+                      : '',
+            }"
           >
-            <mat-icon>check_circle_outline</mat-icon>
-          </button>
-          <button class="status-icon" *ngIf="overseerImage.pulledImageStatus === 'loading'">
-            <mat-icon>access_time_icon</mat-icon>
-          </button>
-          <button
-            class="status-icon"
-            *ngIf="overseerImage.pulledImageStatus === 'failed'"
-            [matTooltip]="overseerImage.pulledImageText"
-          >
-            <mat-icon>error_outline</mat-icon>
-          </button>
-        </div>
+            @if (overseerImage.pulledImageStatus === 'success') {
+              <button class="status-icon" [matTooltip]="overseerImage.pulledImageText">
+                <mat-icon>check_circle_outline</mat-icon>
+              </button>
+            }
+            @if (overseerImage.pulledImageStatus === 'loading') {
+              <button class="status-icon">
+                <mat-icon>access_time_icon</mat-icon>
+              </button>
+            }
+            @if (overseerImage.pulledImageStatus === 'failed') {
+              <button
+                class="status-icon"
+                [matTooltip]="overseerImage.pulledImageText"
+                (click)="showDialog(overseerImage)"
+              >
+                <mat-icon>error_outline</mat-icon>
+              </button>
+            }
+          </div>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef></td>
+      <td *matFooterCellDef mat-footer-cell></td>
     </ng-container>
 
     <!-- Options Column -->
     <ng-container matColumnDef="options" stickyEnd>
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let overseerImage">
-        <div class="right" *ngIf="!editing(overseerImage); else edit">
-          <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
-            <mat-icon>more_vert</mat-icon>
-          </button>
-          <mat-menu #menu="matMenu">
-            <button mat-menu-item (click)="flagEdit(overseerImage)">
-              <mat-icon color="primary">edit</mat-icon>
-              <span>Edit</span>
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let overseerImage" mat-cell>
+        @if (!editing(overseerImage)) {
+          <div class="right">
+            <button
+              aria-label="Example icon-button with a menu"
+              mat-icon-button
+              [matMenuTriggerFor]="menu"
+            >
+              <mat-icon>more_vert</mat-icon>
             </button>
-          </mat-menu>
-        </div>
-        <ng-template #edit>
-          <div class="edit-actions right">
-            <span>
-              <button mat-icon-button color="warn" (click)="cancelEdit()">
-                <mat-icon>cancel</mat-icon>
-              </button>
-              <button mat-icon-button color="primary" (click)="submit()">
-                <mat-icon>save</mat-icon>
+            <mat-menu #menu="matMenu">
+              <button mat-menu-item (click)="flagEdit(overseerImage)">
+                <mat-icon color="primary">edit</mat-icon>
+                <span>Edit</span>
               </button>
-              <button mat-icon-button color="warn" (click)="deleteOverseerImage(overseerImage)">
-                <mat-icon>delete</mat-icon>
-              </button>
-            </span>
+            </mat-menu>
+          </div>
+        } @else {
+          <div class="flex gap-2">
+            <button color="warn" mat-icon-button (click)="cancelEdit()">
+              <mat-icon>cancel</mat-icon>
+            </button>
+            <button color="primary" mat-icon-button (click)="submit()">
+              <mat-icon>save</mat-icon>
+            </button>
+            <button color="warn" mat-icon-button (click)="deleteOverseerImage(overseerImage)">
+              <mat-icon>delete</mat-icon>
+            </button>
           </div>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <div class="edit-actions right">
           <button mat-icon-button (click)="submit()">
             <mat-icon>add</mat-icon>
@@ -148,8 +221,8 @@ <h3>Overseer Images</h3>
       </td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="columns"></tr>
-    <tr mat-row *matRowDef="let row; columns: columns"></tr>
-    <tr [hidden]="selected" mat-footer-row *matFooterRowDef="columns"></tr>
+    <tr *matHeaderRowDef="columns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: columns" mat-row></tr>
+    <tr *matFooterRowDef="columns" mat-footer-row [hidden]="selected"></tr>
   </table>
 </div>
diff --git a/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.ts b/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.ts
index 703054827e..9f7ab13091 100644
--- a/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.ts
+++ b/src/app/admin/institution-settings/overseer-images/overseer-image-list.component.ts
@@ -1,18 +1,36 @@
-import {Component, ViewChild} from '@angular/core';
-import {MatTableDataSource, MatTable} from '@angular/material/table';
-import {OverseerImage, OverseerImageService} from 'src/app/api/models/doubtfire-model';
-import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {HttpClient} from '@angular/common/http';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
 import {UntypedFormControl, Validators} from '@angular/forms';
+import {MatDialog} from '@angular/material/dialog';
 import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {finalize} from 'rxjs';
+import {OverseerImage, OverseerImageService} from 'src/app/api/models/doubtfire-model';
+import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
 import {AlertService} from 'src/app/common/services/alert.service';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Component({
   selector: 'overseer-image-list',
   templateUrl: 'overseer-image-list.component.html',
   styleUrls: ['overseer-image-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class OverseerImageListComponent extends EntityFormComponent<OverseerImage> {
-  @ViewChild(MatTable, {static: true}) table: MatTable<any>;
+export class OverseerImageListComponent
+  extends EntityFormComponent<OverseerImage>
+  implements AfterViewInit
+{
+  @ViewChild('textDialog') textDialog!: TemplateRef<object>;
+
+  @ViewChild(MatTable, {static: true}) table: MatTable<OverseerImage>;
   @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   // Set up the table
@@ -20,12 +38,19 @@ export class OverseerImageListComponent extends EntityFormComponent<OverseerImag
   overseerImages: OverseerImage[] = new Array<OverseerImage>();
   dataSource = new MatTableDataSource(this.overseerImages);
   loading = false;
+  loadingImages = true;
+  skeletonRows = Array.from({length: 2}, (_, index) => index);
+
+  public diskSpace: number | null = null;
 
   // Calls the parent's constructor, passing in an object
   // that maps all of the form controls that this form consists of.
   constructor(
     private overseerImageService: OverseerImageService,
     private alerts: AlertService,
+    private dialog: MatDialog,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
+    private httpClient: HttpClient,
   ) {
     super(
       {
@@ -38,8 +63,18 @@ export class OverseerImageListComponent extends EntityFormComponent<OverseerImag
 
   ngAfterViewInit() {
     // Get all the overseer images and add them to the table
-    this.overseerImageService.fetchAll().subscribe((response) => {
-      this.pushToTable(response);
+    this.loadingImages = true;
+    this.overseerImageService
+      .fetchAll()
+      .pipe(finalize(() => (this.loadingImages = false)))
+      .subscribe((response) => {
+        this.pushToTable(response);
+      });
+
+    this.httpClient.get<number>(`${API_URL}/admin/disk_space`).subscribe({
+      next: (diskSpace) => {
+        this.diskSpace = diskSpace;
+      },
     });
   }
 
@@ -54,8 +89,14 @@ export class OverseerImageListComponent extends EntityFormComponent<OverseerImag
   // Push the values that will be displayed in the table
   // to the datasource
   private pushToTable(value: OverseerImage | OverseerImage[]) {
-    if (!value) return;
-    value instanceof Array ? this.overseerImages.push(...value) : this.overseerImages.push(value);
+    if (!value) {
+      return;
+    }
+    if (value instanceof Array) {
+      this.overseerImages.push(...value);
+    } else {
+      this.overseerImages.push(value);
+    }
     this.dataSource.sort = this.sort;
   }
 
@@ -69,14 +110,21 @@ export class OverseerImageListComponent extends EntityFormComponent<OverseerImag
   pullOverseerImage(image: OverseerImage) {
     this.loading = true;
     image.pulledImageStatus = 'loading';
-    this.overseerImageService.pullDockerImage(image).subscribe((response) => {
-      this.loading = false;
+    this.overseerImageService.pullDockerImage(image).subscribe((job) => {
+      this.sidekiqProgressModalService
+        .show(`Pulling image ${image.name} (${image.tag})`, job.id)
+        .subscribe((_job) => {
+          this.overseerImageService.fetch(image.id).subscribe((newImage) => {
+            console.log(newImage);
+            this.loading = false;
+          });
+        });
     });
   }
 
   deleteOverseerImage(image: OverseerImage) {
     this.overseerImageService.delete(image).subscribe(
-      ((response) => {
+      ((_response) => {
         this.cancelEdit();
         this.overseerImages.splice(this.overseerImages.indexOf(image), 1);
         this.dataSource.data = this.overseerImages;
@@ -96,4 +144,10 @@ export class OverseerImageListComponent extends EntityFormComponent<OverseerImag
         return super.sortTableData(sort);
     }
   }
+
+  public showDialog(image: OverseerImage) {
+    this.dialog.open(this.textDialog, {
+      data: {text: image.pulledImageText},
+    });
+  }
 }
diff --git a/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.html b/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.html
index 2cb803dfae..466d9ab2e3 100644
--- a/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.html
+++ b/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.html
@@ -1,42 +1,59 @@
 <h3 mat-dialog-title>Create Unit</h3>
 
-<form mat-dialog-content action="" #createUnitForm="ngForm" (ngSubmit)="createUnit(createUnitForm.value)" class="pt-8">
+<form
+  #createUnitForm="ngForm"
+  action=""
+  class="pt-5"
+  mat-dialog-content
+  (ngSubmit)="createUnit(createUnitForm.value)"
+>
   <div class="flex flex-col">
     <mat-form-field appearance="outline">
       <mat-label>Unit Code</mat-label>
-      <input matInput placeholder="COS123456" name="unitCode" ngModel />
+      <input matInput name="unitCode" ngModel placeholder="COS123456" />
     </mat-form-field>
 
     <mat-form-field appearance="outline">
       <mat-label>Unit Name</mat-label>
-      <input matInput placeholder="Introduction to OnTrack" name="unitName" ngModel />
+      <input matInput name="unitName" ngModel placeholder="Introduction to OnTrack" />
     </mat-form-field>
 
     <mat-form-field appearance="outline">
       <mat-label>Teaching Period</mat-label>
-      <mat-select (valueChange)="handleChangeTeachingPeriod($event)" name="selectedTeachingPeriod" ngModel>
+      <mat-select
+        name="selectedTeachingPeriod"
+        ngModel
+        (valueChange)="handleChangeTeachingPeriod($event)"
+      >
         <mat-option value="custom"> Custom teaching period </mat-option>
-        <mat-option *ngFor="let tp of teachingPeriods; let i = index" [value]="tp.id">
-          {{ tp.name }}
-        </mat-option>
+        @for (tp of teachingPeriods; track tp; let i = $index) {
+          <mat-option [value]="tp.id">
+            {{ tp.name }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
-    @if(showDates) {
-    <mat-form-field appearance="outline">
-      <mat-label>Enter a date range</mat-label>
-      <mat-date-range-input [rangePicker]="picker">
-        <input matStartDate placeholder="Start date" name="customStardDate" [(ngModel)]="startDate" />
-        <input matEndDate placeholder="End date" name="customEndDate" [(ngModel)]="endDate" />
-      </mat-date-range-input>
-      <mat-hint>DD/MM/YYYY - DD/MM/YYYY</mat-hint>
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker></mat-date-range-picker>
-    </mat-form-field>
+    @if (showDates) {
+      <mat-form-field appearance="outline">
+        <mat-label>Enter a date range</mat-label>
+        <mat-date-range-input [rangePicker]="picker">
+          <input
+            matStartDate
+            name="customStardDate"
+            placeholder="Start date"
+            [(ngModel)]="startDate"
+          />
+          <input matEndDate name="customEndDate" placeholder="End date" [(ngModel)]="endDate" />
+        </mat-date-range-input>
+        <mat-hint>DD/MM/YYYY - DD/MM/YYYY</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-date-range-picker #picker></mat-date-range-picker>
+      </mat-form-field>
     }
 
     <mat-dialog-actions align="end">
-      <button mat-raised-button color="primary">Create</button>
+      <button color="primary" mat-raised-button>Create</button>
     </mat-dialog-actions>
   </div>
 </form>
diff --git a/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.ts b/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.ts
index e3b5fb6e0a..e844877f73 100644
--- a/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.ts
+++ b/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.ts
@@ -1,12 +1,15 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
-import { TeachingPeriod } from 'src/app/api/models/teaching-period';
-import { TeachingPeriodService } from 'src/app/api/services/teaching-period.service';
-import { UnitService } from 'src/app/api/services/unit.service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+import {TeachingPeriod} from 'src/app/api/models/teaching-period';
+import {TeachingPeriodService} from 'src/app/api/services/teaching-period.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
 @Component({
   selector: 'create-new-unit-modal-content',
   templateUrl: 'create-new-unit-modal-content.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class CreateNewUnitModalContentComponent implements OnInit {
   constructor(
@@ -27,7 +30,11 @@ export class CreateNewUnitModalContentComponent implements OnInit {
     });
   }
 
-  public createUnit(unit: { unitName: string; unitCode: string; selectedTeachingPeriod: number }): void {
+  public createUnit(unit: {
+    unitName: string;
+    unitCode: string;
+    selectedTeachingPeriod: number;
+  }): void {
     let newUnit;
 
     if (this.selectedTeachingPeriod === null) {
@@ -61,7 +68,6 @@ export class CreateNewUnitModalContentComponent implements OnInit {
   }
   public handleChangeTeachingPeriod(teachingPeriod: number | string): void {
     if (typeof teachingPeriod === 'string') {
-      teachingPeriod = null;
       this.showDates = true;
     } else {
       this.showDates = false;
diff --git a/src/app/admin/states/f-units/f-units.component.spec.ts b/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal.component.html
similarity index 100%
rename from src/app/admin/states/f-units/f-units.component.spec.ts
rename to src/app/admin/modals/create-new-unit-modal/create-new-unit-modal.component.html
diff --git a/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal.component.ts b/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal.component.ts
index e2e7fe5768..d3e7dde8f5 100644
--- a/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal.component.ts
+++ b/src/app/admin/modals/create-new-unit-modal/create-new-unit-modal.component.ts
@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { CreateNewUnitModalContentComponent } from './create-new-unit-modal-content.component';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {CreateNewUnitModalContentComponent} from './create-new-unit-modal-content.component';
 
 @Component({
   selector: 'create-new-unit-modal',
-  template: '',
+  templateUrl: './create-new-unit-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class CreateNewUnitModal {
   constructor(public dialog: MatDialog) {}
diff --git a/src/app/admin/modals/create-unit-modal/create-unit-modal.coffee b/src/app/admin/modals/create-unit-modal/create-unit-modal.coffee
deleted file mode 100644
index 22bb0e6c71..0000000000
--- a/src/app/admin/modals/create-unit-modal/create-unit-modal.coffee
+++ /dev/null
@@ -1,30 +0,0 @@
-angular.module('doubtfire.admin.modals.create-unit-modal', [])
-
-#
-# This modal allows administrators to quickly create new units
-#
-.factory('CreateUnitModal', ($modal) ->
-  CreateUnitModal = {}
-  CreateUnitModal.show = (units) ->
-    $modal.open
-      controller: 'CreateUnitModalCtrl'
-      templateUrl: 'admin/modals/create-unit-modal/create-unit-modal.tpl.html'
-      resolve:
-        units: -> units
-  CreateUnitModal
-)
-.controller('CreateUnitModalCtrl', ($scope, $modalInstance, DoubtfireConstants, alertService, units, newUnitService, analyticsService) ->
-  analyticsService.event 'Unit Admin', 'Started to Create Unit'
-  $scope.units = units
-  $scope.unit = { code: null, name: null }
-  $scope.saveUnit = ->
-    newUnitService.create( {unit: $scope.unit} ).subscribe(
-      next: (response) ->
-        alertService.success( "Unit created.", 2000)
-        $modalInstance.close()
-      error: (response) ->
-        alertService.error response, 6000
-    )
-  # Get the configurable, external name of Doubtfire
-  $scope.externalName = DoubtfireConstants.ExternalName
-)
diff --git a/src/app/admin/modals/create-unit-modal/create-unit-modal.tpl.html b/src/app/admin/modals/create-unit-modal/create-unit-modal.tpl.html
deleted file mode 100644
index a73b646929..0000000000
--- a/src/app/admin/modals/create-unit-modal/create-unit-modal.tpl.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="create-unit-modal">
-  <form class="form-horizontal" ng-submit="saveUnit()" role="form">
-    <div class="modal-header">
-      <h3>Create Unit</h3>
-    </div>
-    <div class="modal-body">
-      <div class="form-group" required>
-        <label class="col-sm-3 control-label">Name</label>
-        <div class="col-sm-7">
-          <input type="text" class="form-control" ng-model="unit.name" placeholder="Introduction to {{externalName.value}}"/>
-        </div>
-      </div>
-      <div class="form-group" required>
-        <label class="col-sm-3 control-label">Code</label>
-        <div class="col-sm-7">
-          <input type="text" class="form-control" ng-model="unit.code" placeholder="COS123456"/>
-        </div>
-      </div>
-    </div>
-    <div class="modal-footer text-right">
-      <input type="submit" class="btn btn-primary" value="Create" ng-disabled="unit.name == null || unit.code == null"/>
-    </div>
-  </form>
-</div>
diff --git a/src/app/admin/modals/modals.coffee b/src/app/admin/modals/modals.coffee
deleted file mode 100644
index 0cc9ff7c5b..0000000000
--- a/src/app/admin/modals/modals.coffee
+++ /dev/null
@@ -1,3 +0,0 @@
-angular.module('doubtfire.admin.modals', [
-  'doubtfire.admin.modals.create-unit-modal'
-])
diff --git a/src/app/admin/states/f-units/f-units.component.html b/src/app/admin/states/f-units/f-units.component.html
deleted file mode 100644
index 3fedd9d088..0000000000
--- a/src/app/admin/states/f-units/f-units.component.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<div class="flex flex-row gap-8 md:px-28">
-  <div class="flex-grow flex flex-col gap-8 gap-y-0">
-    <div class="flex flex-col">
-      <div>
-        <h3>{{ title }}</h3>
-      </div>
-      <div>
-        <mat-form-field appearance="outline" class="w-full max-w-[720px] min-w-[160px]">
-          <mat-label>Search</mat-label>
-          <input matInput (keyup)="applyFilter($event)" />
-          <mat-icon matPrefix> search </mat-icon>
-        </mat-form-field>
-      </div>
-    </div>
-    <table
-      class="flex-grow f-table selectable"
-      mat-table
-      [dataSource]="dataSource"
-      matSort
-      (matSortChange)="sortTableData($event)"
-      matSortActive="start_date"
-      matSortDirection="desc"
-      matSortDisableClear
-    >
-      <!-- Unit Code Column -->
-      <ng-container matColumnDef="unit_code" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Unit Code</th>
-        <td mat-cell *matCellDef="let element" class="w-0 min-w-full">
-          <f-unit-code [unit_code]="element.unit_code"></f-unit-code>
-        </td>
-      </ng-container>
-
-      <!-- Name Column -->
-      <ng-container matColumnDef="name" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
-      </ng-container>
-
-      <!-- Unit Role Column -->
-      <ng-container matColumnDef="unit_role" sticky>
-        <th
-          mat-header-cell
-          [hidden]="!shouldShowUnitRoleColumn()"
-          *matHeaderCellDef
-          mat-sort-header
-        >
-          Unit Role
-        </th>
-        <td mat-cell [hidden]="!shouldShowUnitRoleColumn()" *matCellDef="let element">
-          {{ element.unit_role }}
-        </td>
-      </ng-container>
-
-      <!-- Teaching Period Column -->
-      <ng-container matColumnDef="teaching_period" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Teaching Period</th>
-        <td mat-cell *matCellDef="let element">
-          {{ element.teaching_period }}
-        </td>
-      </ng-container>
-
-      <!-- Start Date Column -->
-      <ng-container matColumnDef="start_date" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</th>
-        <td mat-cell *matCellDef="let element">{{ element.start_date | date: 'EEE d MMM y' }}</td>
-      </ng-container>
-
-      <!-- End Date Column -->
-      <ng-container matColumnDef="end_date" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>End Date</th>
-        <td mat-cell *matCellDef="let element">{{ element.end_date | date: 'EEE d MMM y' }}</td>
-      </ng-container>
-
-      <!-- Active Column -->
-      <ng-container matColumnDef="active" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Active</th>
-        <td mat-cell *matCellDef="let element">
-          <!-- If element.teachingPeriod exists -->
-          @if (element.teachingPeriod) {
-            @if (element.teachingPeriod.active && element.active) {
-              <mat-icon>done</mat-icon>
-            }
-            @if (!element.teachingPeriod.active || !element.active) {
-              <mat-icon>close</mat-icon>
-            }
-          } @else {
-            @if (element.active) {
-              <mat-icon>done</mat-icon>
-            }
-            @if (!element.active) {
-              <mat-icon>close</mat-icon>
-            }
-          }
-
-          <!-- If element.teachingPeriod does not exist -->
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      @if (mode === 'tutor') {
-        <tr
-          mat-row
-          *matRowDef="let row; columns: displayedColumns"
-          uiSref="units/tasks/inbox"
-          [uiParams]="{unitId: row.id}"
-        ></tr>
-      }
-      @if (mode === 'admin') {
-        <tr
-          mat-row
-          *matRowDef="let row; columns: displayedColumns"
-          uiSref="units/admin"
-          [uiParams]="{unitId: row.id}"
-        ></tr>
-      }
-      @if (mode === 'student') {
-        <tr
-          mat-row
-          *matRowDef="let row; columns: displayedColumns"
-          uiSref="projects/dashboard"
-          [uiParams]="{projectId: row.id, taskAbbr: ''}"
-        ></tr>
-      }
-    </table>
-    <span class="flex items-center">
-      <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
-      <span class="flex-grow"></span>
-      @if (mode === 'admin') {
-        <button mat-raised-button color="primary" (click)="createUnit()">
-          <mat-icon class="icon_display">add</mat-icon>
-          Create Unit
-        </button>
-      }
-    </span>
-  </div>
-</div>
diff --git a/src/app/admin/states/f-units/f-units.component.ts b/src/app/admin/states/f-units/f-units.component.ts
deleted file mode 100644
index 03ce4ddad6..0000000000
--- a/src/app/admin/states/f-units/f-units.component.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-import {Component, AfterViewInit, ViewChild, Input, OnInit} from '@angular/core';
-import {Unit} from 'src/app/api/models/unit';
-import {UnitRole} from 'src/app/api/models/unit-role';
-import {MatTable, MatTableDataSource} from '@angular/material/table';
-import {MatSort, Sort} from '@angular/material/sort';
-import {MatPaginator} from '@angular/material/paginator';
-import {CreateNewUnitModal} from '../../modals/create-new-unit-modal/create-new-unit-modal.component';
-import {Project} from 'src/app/api/models/project';
-import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
-import {User} from 'src/app/api/models/user/user';
-import {UnitService} from 'src/app/api/services/unit.service';
-
-type IUnitOrProject = {
-  id: number;
-  unit_code: string;
-  code: string;
-  name: string;
-  unit_role?: string;
-  teaching_period: string;
-  start_date: Date;
-  end_date: Date;
-  active: boolean;
-  user?: User;
-  unit?: Unit;
-  student?: User;
-  matchesTutorialEnrolments?: (filter: string) => boolean;
-  matchesGroup?: (filter: string) => boolean;
-  matches: (filter: string) => boolean;
-};
-
-@Component({
-  selector: 'f-units',
-  templateUrl: './f-units.component.html',
-  styleUrls: ['./f-units.component.scss'],
-})
-export class FUnitsComponent implements OnInit, AfterViewInit {
-  @ViewChild(MatTable, {static: false}) table: MatTable<Unit>;
-  @ViewChild(MatSort, {static: false}) sort: MatSort;
-  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
-
-  @Input({required: true}) mode: 'admin' | 'tutor' | 'student';
-
-  displayedColumns: string[] = [
-    'unit_code',
-    'name',
-    'unit_role',
-    'teaching_period',
-    'start_date',
-    'end_date',
-    'active',
-  ];
-
-  // the datasource of the table
-  dataSource: MatTableDataSource<IUnitOrProject> = new MatTableDataSource([]);
-
-  title: string;
-
-  shouldShowUnitRoleColumn(): boolean {
-    return this.mode === 'admin' || this.mode === 'tutor';
-  }
-
-  constructor(
-    private createUnitDialog: CreateNewUnitModal,
-    private globalStateService: GlobalStateService,
-    private unitService: UnitService,
-  ) {}
-
-  units: IUnitOrProject[] = [];
-
-  ngOnInit(): void {
-    if (this.mode === 'tutor') {
-      this.title = 'View all units you teach';
-
-      this.globalStateService.onLoad(() => {
-        this.globalStateService.loadedUnitRoles.values.subscribe({
-          next: (unitRoles) => {
-            this.dataSource.data = this.mapUnitOrProjectsToColumns(unitRoles);
-          },
-        });
-      });
-    }
-    if (this.mode === 'admin') {
-      this.title = 'Administer units';
-
-      this.globalStateService.onLoad(() => {
-        this.unitService.query(undefined, {params: {include_in_active: true}}).subscribe({
-          next: (units) => {
-            this.globalStateService.loadedUnits.values.subscribe(
-              (loadedUnits) =>
-                (this.dataSource.data = this.mapUnitOrProjectsToColumns(loadedUnits)),
-            );
-          },
-        });
-
-        this.globalStateService.loadedUnits.values.subscribe(
-          (units) => (this.dataSource.data = this.mapUnitOrProjectsToColumns(units)),
-        );
-      });
-    } else if (this.mode === 'student') {
-      this.title = 'View all your units';
-
-      this.globalStateService.onLoad(() => {
-        this.globalStateService.currentUserProjects.values.subscribe(
-          (projects) => (this.dataSource.data = this.mapUnitOrProjectsToColumns(projects)),
-        );
-      });
-    }
-  }
-
-  mapUnitSourceToColumn(unitOrProject: Unit | Project | UnitRole): IUnitOrProject {
-    if (unitOrProject instanceof Unit) {
-      return {
-        id: unitOrProject.id,
-        unit_code: unitOrProject.code,
-        code: unitOrProject.code,
-        name: unitOrProject.name,
-        unit_role: unitOrProject.myRole,
-        teaching_period: unitOrProject.teachingPeriod?.name || 'Custom',
-        start_date: unitOrProject.startDate,
-        end_date: unitOrProject.endDate,
-        active: unitOrProject.active,
-        matches: unitOrProject.matches,
-      };
-    } else if (unitOrProject instanceof Project) {
-      return {
-        id: unitOrProject.id,
-        unit_code: unitOrProject.unit.code,
-        code: unitOrProject.unit.code,
-        name: unitOrProject.unit.name,
-        teaching_period: unitOrProject.unit.teachingPeriod?.name,
-        start_date: unitOrProject.unit.startDate,
-        end_date: unitOrProject.unit.endDate,
-        active: unitOrProject.unit.active,
-        student: unitOrProject.student,
-        matchesTutorialEnrolments: unitOrProject.matchesTutorialEnrolments,
-        matchesGroup: unitOrProject.matchesGroup,
-        matches: (filter: string) => {
-          return (
-            unitOrProject.unit.matches(filter) ||
-            unitOrProject.student.matches(filter) ||
-            unitOrProject.matchesTutorialEnrolments(filter) ||
-            unitOrProject.matchesGroup(filter)
-          );
-        },
-      };
-    } else if (unitOrProject instanceof UnitRole) {
-      return {
-        id: unitOrProject.unit.id,
-        unit_code: unitOrProject.unit.code,
-        code: unitOrProject.unit.code,
-        name: unitOrProject.unit.name,
-        unit_role: unitOrProject.role,
-        teaching_period: unitOrProject.unit.teachingPeriod?.name,
-        start_date: unitOrProject.unit.startDate,
-        end_date: unitOrProject.unit.endDate,
-        active: unitOrProject.unit.active,
-        user: unitOrProject.user,
-        unit: unitOrProject.unit,
-        matches: unitOrProject.matches,
-      };
-    }
-  }
-
-  mapUnitOrProjectsToColumns(unitOrProjects: readonly (Unit | Project | UnitRole)[]) {
-    // copy the array of units/projects/unitRole and map each unit through the mapUnitSourceToColumn function
-    return [...unitOrProjects].map((unitOrProject) => this.mapUnitSourceToColumn(unitOrProject));
-  }
-
-  ngAfterViewInit(): void {
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-    this.dataSource.filterPredicate = (data, filter: string) => data.matches(filter);
-  }
-
-  createUnit() {
-    this.createUnitDialog.show();
-  }
-
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-    if (this.dataSource.paginator) {
-      this.dataSource.paginator.firstPage();
-    }
-  }
-
-  private sortCompare(aValue: number | string, bValue: number | string, isAsc: boolean) {
-    return (aValue < bValue ? -1 : 1) * (isAsc ? 1 : -1);
-  }
-
-  sortTableData(sort: Sort) {
-    if (!sort.active || sort.direction === '') {
-      return;
-    }
-    this.dataSource.data = this.dataSource.data.sort((a, b) => {
-      switch (sort.active) {
-        case 'unit_code':
-          return this.sortCompare(a.unit_code, b.unit_code, sort.direction === 'asc');
-        case 'name':
-          return this.sortCompare(a.name, b.name, sort.direction === 'asc');
-        case 'unit_role':
-          return this.sortCompare(a.unit_role, b.unit_role, sort.direction === 'asc');
-        case 'teaching_period': {
-          return this.sortCompare(a.teaching_period, b.teaching_period, sort.direction === 'asc');
-        }
-        case 'start_date': {
-          return this.sortCompare(
-            a.start_date.getTime(),
-            b.start_date.getTime(),
-            sort.direction === 'asc',
-          );
-        }
-        case 'end_date': {
-          return this.sortCompare(
-            a.end_date.getTime(),
-            b.end_date.getTime(),
-            sort.direction === 'asc',
-          );
-        }
-        case 'active':
-          return this.sortCompare(+!!a.active, +!!b.active, sort.direction === 'asc');
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/src/app/admin/states/f-users/f-users.component.html b/src/app/admin/states/f-users/f-users.component.html
deleted file mode 100644
index 4adb14a1a6..0000000000
--- a/src/app/admin/states/f-users/f-users.component.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<div class="table-padding">
-  <!-- Header -->
-  <div fxLayout="row" class="header-spacer">
-    <div fxLayout="column">
-      <h3>{{ externalName }} Users</h3>
-      <h3>Users Administration View</h3>
-    </div>
-    <span class="flex-grow"></span>
-    <mat-form-field appearance="outline">
-      <input
-        matInput
-        (keyup)="applyFilter($event.target.value)"
-        placeholder="Search users"
-        [(ngModel)]="filter"
-      />
-    </mat-form-field>
-  </div>
-
-  <!-- Table -->
-  <table
-    class="f-table selectable"
-    mat-table
-    [dataSource]="dataSource"
-    matSort
-    (matSortChange)="sortData($event)"
-  >
-    <ng-container matColumnDef="avatar">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let user" (click)="showUserModal(user)">
-        <user-icon fxFlexAlign="center" [user]="user" [size]="30"></user-icon>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="firstName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>
-      <td mat-cell *matCellDef="let user" (click)="showUserModal(user)">{{ user.firstName }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="lastName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
-      <td mat-cell *matCellDef="let user" (click)="showUserModal(user)">{{ user.lastName }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="username">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Username</th>
-      <td mat-cell *matCellDef="let user" (click)="showUserModal(user)">{{ user.username }}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="email">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
-      <td mat-cell *matCellDef="let user" (click)="showUserModal(user)">
-        <a href="mailto: {{ user.email }}">{{ user.email }}</a>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="systemRole">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>System Role</th>
-      <td mat-cell *matCellDef="let user" (click)="showUserModal(user)">{{ user.systemRole }}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-  </table>
-
-  <!-- Footer -->
-  <span class="flex items-center">
-    <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[10, 15, 20, 25]"></mat-paginator>
-    <span class="flex-grow"></span>
-    <button mat-raised-button color="primary" (click)="showUserModal({})">Add New User</button>
-  </span>
-
-  <mat-expansion-panel hideToggle class="mt-8">
-    <mat-expansion-panel-header>
-      <mat-panel-title> Bulk users operations </mat-panel-title>
-    </mat-expansion-panel-header>
-    <div class="flex flex-row">
-      <div class="max-w-2xl">
-        <f-file-drop
-          mode="endpoint"
-          [endpoint]="uploadEndpoint"
-          (uploadSuccess)="onUserUploadSuccess($event)"
-          desiredFileName="users.csv"
-          multiple="false"
-          accept=".csv"
-        ></f-file-drop>
-      </div>
-      <div class="grow"></div>
-      <button
-        mat-flat-button
-        color="primary"
-        (click)="downloadUsers()"
-        aria-label="Download all users csv"
-      >
-        Download all users CSV <mat-icon>download</mat-icon>
-      </button>
-    </div>
-  </mat-expansion-panel>
-</div>
diff --git a/src/app/admin/states/f-users/f-users.component.ts b/src/app/admin/states/f-users/f-users.component.ts
deleted file mode 100644
index 7865e6801f..0000000000
--- a/src/app/admin/states/f-users/f-users.component.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Component, AfterViewInit, ViewChild, OnDestroy, OnInit } from '@angular/core';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { MatSort, Sort } from '@angular/material/sort';
-import { User } from 'src/app/api/models/doubtfire-model';
-import { MatPaginator } from '@angular/material/paginator';
-import { UserService } from 'src/app/api/models/doubtfire-model';
-import { EditProfileDialogService } from 'src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service';
-import { Subscription } from 'rxjs';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service';
-import { AlertService } from 'src/app/common/services/alert.service';
-
-@Component({
-  selector: 'f-users',
-  templateUrl: './f-users.component.html',
-  styleUrls: ['./f-users.component.scss'],
-})
-export class FUsersComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild(MatTable, { static: false }) table: MatTable<User>;
-  @ViewChild(MatSort, { static: false }) sort: MatSort;
-  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
-
-  displayedColumns: string[] = ['avatar', 'firstName', 'lastName', 'username', 'email', 'systemRole'];
-  public dataSource: MatTableDataSource<User>;
-  public filter: string;
-  dataload: boolean;
-
-  private subscriptions: Subscription[] = [];
-  externalName: string;
-  uploadEndpoint: string;
-
-  constructor(
-    private userService: UserService,
-    private editProfileDialogService: EditProfileDialogService,
-    private constants: DoubtfireConstants,
-    private fileDownloaderService: FileDownloaderService,
-    private alerts: AlertService,
-  ) {
-    this.dataload = false;
-  }
-
-  ngOnInit(): void {
-    this.userService.query().subscribe();
-    this.constants.ExternalName.subscribe((externalName) => {
-      this.externalName = externalName;
-    });
-
-    this.uploadEndpoint = this.userService.csvURL;
-  }
-
-  ngAfterViewInit(): void {
-    this.dataSource = new MatTableDataSource(this.userService.cache.currentValuesClone());
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-    this.dataSource.filterPredicate = (data, filter: string) => data.matches(filter);
-
-    this.subscriptions.push(
-      this.userService.cache.values.subscribe((users) => {
-        this.dataSource.data = users;
-      }),
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach((s) => s.unsubscribe());
-  }
-
-  protected downloadUsers() {
-    this.fileDownloaderService.downloadFile(this.userService.csvURL, 'Users.csv');
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // TODO: This needs to be brought out into a service which replaces the old csv-result-modal
-  protected onUserUploadSuccess(event) {
-    const max_full_errors = 5;
-    const num_errors = event.body.errors?.length;
-    const num_success = event.body.success?.length;
-    const num_ignored = event.body.ignored?.length;
-
-    // build error string
-    let error_string = `${num_success} users successfully updated, `;
-    error_string += `${num_ignored} users ignored, `;
-    error_string += `${num_errors} users contained an error in the CSV...`;
-
-    event.body.errors?.slice(0, max_full_errors).forEach((error) => {
-      error_string += error.message + '\n';
-    });
-
-    max_full_errors > num_errors ? (error_string += `... and ${max_full_errors - num_errors} more`) : null;
-    this.alerts.error(error_string);
-
-    this.userService.query();
-  }
-
-  public showUserModal(user: User) {
-    const userToShow = user ? user : this.userService.createInstanceFrom({});
-    this.editProfileDialogService.openDialog(userToShow, 'edit');
-  }
-
-  public compare(a: number | string, b: number | string, isAsc: boolean): number {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-  }
-
-  public sortData(sort: Sort) {
-    const data = this.dataSource.data;
-
-    if (!sort.active || sort.direction === '') {
-      this.dataSource.data = data;
-      return;
-    }
-
-    this.dataSource.data = data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-
-      switch (sort.active) {
-        case 'id':
-          return this.compare(a.id, b.id, isAsc);
-        case 'firstName':
-          return this.compare(a.firstName, b.firstName, isAsc);
-        case 'lastName':
-          return this.compare(a.lastName, b.lastName, isAsc);
-        case 'systemRole':
-          return this.compare(a.systemRole, b.systemRole, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-
-  applyFilter(filterValue: string) {
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-  }
-}
diff --git a/src/app/admin/states/teaching-periods/teaching-period-list/new-teaching-period-dialog.component.html b/src/app/admin/states/teaching-periods/teaching-period-list/new-teaching-period-dialog.component.html
index b7c9cf66d7..cce85cf326 100644
--- a/src/app/admin/states/teaching-periods/teaching-period-list/new-teaching-period-dialog.component.html
+++ b/src/app/admin/states/teaching-periods/teaching-period-list/new-teaching-period-dialog.component.html
@@ -1,7 +1,9 @@
-<div style="min-width: 600px; min-height: 600px flex flex-col" class="pr-12 pl-12 pt-12 pb-12">
-  <mat-tab-group class="mb-8">
-    <mat-tab label="Edit Teaching Period"> <ng-template [ngTemplateOutlet]="EditTeachingPeriod"></ng-template></mat-tab>
-    <mat-tab [disabled]="!newOrSelectedTeachingPeriod.id" label="Edit Breaks">
+<div class="p-7" style="min-width: 600px; min-height: 600px flex flex-col">
+  <mat-tab-group class="mb-5">
+    <mat-tab label="Edit Teaching Period">
+      <ng-template [ngTemplateOutlet]="EditTeachingPeriod"></ng-template
+    ></mat-tab>
+    <mat-tab label="Edit Breaks" [disabled]="!newOrSelectedTeachingPeriod.id">
       <ng-template [ngTemplateOutlet]="EditBreaks"></ng-template>
     </mat-tab>
     <!-- TODO: Write rollover -->
@@ -9,23 +11,35 @@
       <ng-template [ngTemplateOutlet]="ImportUnits"></ng-template>
     </mat-tab> -->
   </mat-tab-group>
-  <div class="flex justify-end self-end space-x-4 bottom-6">
-    <button mat-stroked-button class="" mat-dialog-close>Cancel</button>
-    <button mat-flat-button color="primary" class="ml-4" (click)="submitTeachingPeriod()">
+  <div class="bottom-3.5 flex justify-end space-x-2.5 self-end">
+    <button class="" mat-dialog-close mat-stroked-button>Cancel</button>
+    <button class="ml-2.5" color="primary" mat-flat-button (click)="submitTeachingPeriod()">
       {{ newOrSelectedTeachingPeriod.id ? 'Save' : 'Create' }}
     </button>
   </div>
 </div>
 
 <ng-template #EditTeachingPeriod>
-  <form class="teaching-period-form flex flex-col ml-6 mr-6 pt-12 overflow-hidden">
+  <form class="teaching-period-form mx-3.5 flex flex-col overflow-hidden pt-7">
     <mat-form-field appearance="outline">
       <mat-label>Teaching Period Name</mat-label>
-      <input type="text" matInput [(ngModel)]="newOrSelectedTeachingPeriod.period" name="name" required />
+      <input
+        matInput
+        name="name"
+        required
+        type="text"
+        [(ngModel)]="newOrSelectedTeachingPeriod.period"
+      />
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Teaching Period Year</mat-label>
-      <input type="number" matInput [(ngModel)]="newOrSelectedTeachingPeriod.year" name="year" required />
+      <input
+        matInput
+        name="year"
+        required
+        type="number"
+        [(ngModel)]="newOrSelectedTeachingPeriod.year"
+      />
     </mat-form-field>
 
     <mat-form-field appearance="outline">
@@ -33,17 +47,17 @@
       <mat-date-range-input [rangePicker]="picker">
         <input
           matStartDate
-          placeholder="Start date"
-          [(ngModel)]="newOrSelectedTeachingPeriod.startDate"
           name="startDate"
+          placeholder="Start date"
           required
+          [(ngModel)]="newOrSelectedTeachingPeriod.startDate"
         />
         <input
           matEndDate
-          placeholder="End date"
-          [(ngModel)]="newOrSelectedTeachingPeriod.endDate"
           name="endDate"
+          placeholder="End date"
           required
+          [(ngModel)]="newOrSelectedTeachingPeriod.endDate"
         />
       </mat-date-range-input>
 
@@ -55,10 +69,10 @@
       <mat-label>Active Until</mat-label>
       <input
         matInput
-        [matDatepicker]="activeUntilPicker"
-        [(ngModel)]="newOrSelectedTeachingPeriod.activeUntil"
         name="activeUntil"
         required
+        [matDatepicker]="activeUntilPicker"
+        [(ngModel)]="newOrSelectedTeachingPeriod.activeUntil"
       />
       <mat-hint>DD/MM/YYYY</mat-hint>
       <mat-datepicker-toggle matIconSuffix [for]="activeUntilPicker"></mat-datepicker-toggle>
@@ -68,34 +82,34 @@
 </ng-template>
 
 <ng-template #EditBreaks>
-  <h4 class="pt-8">Teaching Breaks for {{ newOrSelectedTeachingPeriod.name }}</h4>
+  <h4 class="pt-5">Teaching Breaks for {{ newOrSelectedTeachingPeriod.name }}</h4>
   <mat-list>
-    @for (break of newOrSelectedTeachingPeriod.breaksCache.values | async; track break) {
-    <mat-list-item>
-      <span class="flex items-center">
-        <span>
-          <span matListItemTitle>{{ break.startDate | date }}</span>
-          <span matListItemLine>{{ break.numberOfWeeks }} week(s)</span>
+    @for (break of teachingBreaks$ | async; track break) {
+      <mat-list-item>
+        <span class="flex items-center">
+          <span>
+            <span matListItemTitle>{{ break.startDate | date }}</span>
+            <span matListItemLine>{{ break.numberOfWeeks }} week(s)</span>
+          </span>
+          <span class="grow"></span>
+          <button mat-icon-button (click)="deleteBreak(newOrSelectedTeachingPeriod, break)">
+            <mat-icon>delete</mat-icon>
+          </button>
         </span>
-        <span class="grow"></span>
-        <button mat-icon-button (click)="deleteBreak(newOrSelectedTeachingPeriod, break)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </span>
-    </mat-list-item>
+      </mat-list-item>
     }
   </mat-list>
 
-  <form class="ml-6 mr-6 pt-12 overflow-hidden">
-    <span class="flex items-center gap-6">
+  <form class="mx-3.5 overflow-hidden pt-7">
+    <span class="flex items-center gap-3.5">
       <mat-form-field appearance="outline">
         <mat-label>Break Start Date</mat-label>
         <input
           matInput
-          [matDatepicker]="breakStartDatePicker"
-          [(ngModel)]="tempBreak.startDate"
           name="breakStartDate"
           required
+          [matDatepicker]="breakStartDatePicker"
+          [(ngModel)]="tempBreak.startDate"
         />
         <mat-hint>MM/DD/YYYY</mat-hint>
         <mat-datepicker-toggle matIconSuffix [for]="breakStartDatePicker"></mat-datepicker-toggle>
@@ -105,13 +119,19 @@ <h4 class="pt-8">Teaching Breaks for {{ newOrSelectedTeachingPeriod.name }}</h4>
       <!-- <span class="grow"></span> -->
       <mat-form-field appearance="outline">
         <mat-label>Number of weeks</mat-label>
-        <input type="number" matInput [(ngModel)]="tempBreak.numberOfWeeks" name="breakNumWeeks" required />
+        <input
+          matInput
+          name="breakNumWeeks"
+          required
+          type="number"
+          [(ngModel)]="tempBreak.numberOfWeeks"
+        />
       </mat-form-field>
 
       <button
-        [disabled]="!(tempBreak.startDate && tempBreak.numberOfWeeks)"
         class="self-start"
         mat-icon-button
+        [disabled]="!(tempBreak.startDate && tempBreak.numberOfWeeks)"
         (click)="addTeachingBreak()"
       >
         <mat-icon>add_circle</mat-icon>
diff --git a/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.html b/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.html
index 5abff6ce87..ccc2216d73 100644
--- a/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.html
+++ b/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.html
@@ -1,47 +1,73 @@
 <div class="teaching-periods-container">
-  <div class="flex items-center my-10">
+  <div class="my-6 flex items-center">
     <h1 class="my-0">Teaching periods</h1>
     <span class="grow"></span>
-    <button mat-flat-button color="primary" (click)="addTeachingPeriod()">Add new teaching period</button>
+    <button color="primary" mat-flat-button (click)="addTeachingPeriod()">
+      Add new teaching period
+    </button>
   </div>
-  <table #table mat-table [dataSource]="dataSource" class="f-table selectable" matSort>
+  <table
+    #table
+    class=""
+    mat-table
+    matSort
+    matSortActive="startDate"
+    matSortDirection="desc"
+    [dataSource]="dataSource"
+    (matSortChange)="sortTableData($event)"
+  >
     <ng-container matColumnDef="active">
-      <th mat-header-cell *matHeaderCellDef>Active</th>
-      <td mat-cell *matCellDef="let element">
-        <mat-checkbox disabled color="primary" [checked]="element.active"> </mat-checkbox>
+      <th *matHeaderCellDef mat-header-cell>Active</th>
+      <td *matCellDef="let element" mat-cell>
+        <mat-checkbox color="primary" disabled [checked]="element.active"> </mat-checkbox>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
+      <td *matCellDef="let element" mat-cell>{{ element.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="startDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</th>
-      <td mat-cell *matCellDef="let element">{{ element.startDate | date }}</td>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Start Date</th>
+      <td *matCellDef="let element" mat-cell>{{ element.startDate | date }}</td>
     </ng-container>
 
     <ng-container matColumnDef="endDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>End date</th>
-      <td mat-cell *matCellDef="let element">{{ element.endDate | date }}</td>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>End date</th>
+      <td *matCellDef="let element" mat-cell>{{ element.endDate | date }}</td>
     </ng-container>
 
     <ng-container matColumnDef="activeUntil">
-      <th mat-header-cell *matHeaderCellDef>Active until</th>
-      <td mat-cell *matCellDef="let element">{{ element.activeUntil | date }}</td>
+      <th *matHeaderCellDef mat-header-cell>Active until</th>
+      <td *matCellDef="let element" mat-cell>{{ element.activeUntil | date }}</td>
     </ng-container>
 
-    <td mat-footer-cell *matFooterCellDef>
-      <div class="edit-actions right">
-        <button mat-icon-button (click)="submit()">
-          <mat-icon>add</mat-icon>
-        </button>
-      </div>
-    </td>
+    <ng-container matColumnDef="actions">
+      <th *matHeaderCellDef mat-header-cell>Actions</th>
+      <td *matCellDef="let element" mat-cell>
+        <div class="edit-actions right">
+          <span>
+            <button aria-label="import units" mat-icon-button (click)="importUnits(element)">
+              <mat-icon>input</mat-icon>
+            </button>
+            <button
+              aria-label="select teaching period"
+              mat-icon-button
+              (click)="selectTeachingPeriod(element)"
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+          </span>
+        </div>
+      </td>
+    </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row (click)="selectTeachingPeriod(row)" *matRowDef="let row; columns: displayedColumns"></tr>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
   </table>
-  <mat-paginator [pageSizeOptions]="[10, 25, 100]" aria-label="Select page of teaching periods"></mat-paginator>
+  <mat-paginator
+    aria-label="Select page of teaching periods"
+    [pageSizeOptions]="[10, 25, 100]"
+  ></mat-paginator>
 </div>
diff --git a/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.spec.ts b/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.spec.ts
index 8d7bb7452e..c589b103d8 100644
--- a/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.spec.ts
+++ b/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.spec.ts
@@ -1,6 +1,16 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDialog} from '@angular/material/dialog';
+import {of} from 'rxjs';
+import {TeachingPeriodService} from 'src/app/api/services/teaching-period.service';
+import {TeachingPeriodUnitImportService} from '../teaching-period-unit-import/teaching-period-unit-import.dialog';
+import {
+  NewTeachingPeriodDialogComponent,
+  TeachingPeriodListComponent,
+} from './teaching-period-list.component';
 
-import { TeachingPeriodListComponent } from './teaching-period-list.component';
+const emptyProvider = {};
 
 describe('TeachingPeriodListComponent', () => {
   let component: TeachingPeriodListComponent;
@@ -8,16 +18,41 @@ describe('TeachingPeriodListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TeachingPeriodListComponent ]
+      declarations: [TeachingPeriodListComponent],
+      providers: [
+        {provide: TeachingPeriodService, useValue: emptyProvider},
+        {provide: MatDialog, useValue: emptyProvider},
+        {provide: TeachingPeriodUnitImportService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(TeachingPeriodListComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(TeachingPeriodListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 });
+
+describe('NewTeachingPeriodDialogComponent deleteBreak feedback', () => {
+  it('confirms to the user when a break is removed', () => {
+    const alertService = {success: vi.fn(), error: vi.fn()};
+    const component = Object.create(NewTeachingPeriodDialogComponent.prototype) as {
+      alertService: typeof alertService;
+      deleteBreak(teachingPeriod: unknown, teachingBreak: unknown): void;
+    };
+    component.alertService = alertService;
+    const teachingPeriod = {removeBreak: vi.fn(() => of({}))};
+
+    component.deleteBreak(teachingPeriod, {id: 3});
+
+    expect(teachingPeriod.removeBreak).toHaveBeenCalledWith(3);
+    expect(alertService.success).toHaveBeenCalledWith('Break removed', 2000);
+  });
+});
diff --git a/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.ts b/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.ts
index 87be5fbef8..99dde3f1ff 100644
--- a/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.ts
+++ b/src/app/admin/states/teaching-periods/teaching-period-list/teaching-period-list.component.ts
@@ -1,31 +1,40 @@
-import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
-import { TeachingPeriodBreak } from 'src/app/api/models/teaching-period';
-import { TeachingPeriod } from 'src/app/api/models/teaching-period';
-import { TeachingPeriodBreakService } from 'src/app/api/services/teaching-period-break.service';
-import { TeachingPeriodService } from 'src/app/api/services/teaching-period.service';
+import {ChangeDetectionStrategy, Component, Inject, OnInit, ViewChild} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+import {Observable} from 'rxjs';
+import {TeachingPeriodBreak} from 'src/app/api/models/teaching-period';
+import {TeachingPeriod} from 'src/app/api/models/teaching-period';
+import {TeachingPeriodBreakService} from 'src/app/api/services/teaching-period-break.service';
+import {TeachingPeriodService} from 'src/app/api/services/teaching-period.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TeachingPeriodUnitImportService} from '../teaching-period-unit-import/teaching-period-unit-import.dialog';
 
 @Component({
   selector: 'f-teaching-period-list',
   templateUrl: './teaching-period-list.component.html',
   styleUrls: ['./teaching-period-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TeachingPeriodListComponent implements OnInit {
   @ViewChild(MatSort) sort = new MatSort();
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
-  public dataSource = new MatTableDataSource<TeachingPeriod>();
+  public dataSource: MatTableDataSource<TeachingPeriod> = new MatTableDataSource();
 
-  displayedColumns: string[] = ['active', 'name', 'startDate', 'endDate', 'activeUntil'];
-  constructor(private teachingPeriodsService: TeachingPeriodService, public dialog: MatDialog) {}
+  displayedColumns: string[] = ['active', 'name', 'startDate', 'endDate', 'activeUntil', 'actions'];
+
+  constructor(
+    private teachingPeriodsService: TeachingPeriodService,
+    public dialog: MatDialog,
+    public teachingPeriodUnitImportService: TeachingPeriodUnitImportService,
+  ) {}
 
   ngOnInit(): void {
     // update the Teaching Periods
-    this.teachingPeriodsService.query().subscribe((_) => {});
+    this.teachingPeriodsService.query().subscribe();
 
     // Bind to the Teaching Periods
     this.teachingPeriodsService.cache.values.subscribe((teachingPeriods) => {
@@ -35,6 +44,10 @@ export class TeachingPeriodListComponent implements OnInit {
     });
   }
 
+  importUnits(teachingPeriod: TeachingPeriod) {
+    this.teachingPeriodUnitImportService.openImportUnitsDialog(teachingPeriod);
+  }
+
   addTeachingPeriod() {
     this.dialog.open(NewTeachingPeriodDialogComponent, {
       data: {},
@@ -43,14 +56,49 @@ export class TeachingPeriodListComponent implements OnInit {
 
   selectTeachingPeriod(selectedTeachingPeriod: TeachingPeriod) {
     this.teachingPeriodsService.get(selectedTeachingPeriod.id).subscribe((teachingPeriod) => {
-      this.dialog.open(NewTeachingPeriodDialogComponent, { data: { teachingPeriod: teachingPeriod } });
+      this.dialog.open(NewTeachingPeriodDialogComponent, {data: {teachingPeriod: teachingPeriod}});
     });
   }
+
+  /**
+   * Function used by implemented sortTableData to determine the order
+   * of values within the EntityForm once sorting has been triggered.
+   *
+   * @param aValue value to be compared against bValue.
+   * @param bValue value to be compared against aValue.
+   *
+   * @returns truthy comparison between aValue and bValue.
+   */
+  protected sortCompare(aValue: number | string, bValue: number | string, isAsc: boolean) {
+    return (aValue < bValue ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  // Sorting function to sort data when sort
+  // event is triggered
+  sortTableData(sort: Sort) {
+    if (!sort.active || sort.direction === '') {
+      return;
+    }
+    switch (sort.active) {
+      case 'active':
+      case 'name':
+      case 'startDate':
+      case 'endDate':
+      case 'activeUntil':
+        this.dataSource.data = this.dataSource.data.sort((a, b) => {
+          const isAsc = sort.direction === 'asc';
+          return this.sortCompare(a[sort.active], b[sort.active], isAsc);
+        });
+        return;
+    }
+  }
 }
 
 @Component({
   selector: 'f-new-teaching-period-dialog',
   templateUrl: 'new-teaching-period-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class NewTeachingPeriodDialogComponent {
   constructor(
@@ -58,45 +106,53 @@ export class NewTeachingPeriodDialogComponent {
     private dialogRef: MatDialogRef<NewTeachingPeriodDialogComponent>,
     public teachingPeriodService: TeachingPeriodService,
     public teachingPeriodBreakService: TeachingPeriodBreakService,
-    private _snackBar: MatSnackBar
+    public alertService: AlertService,
   ) {}
-  public newOrSelectedTeachingPeriod = this.data.teachingPeriod || new TeachingPeriod();
+  public newOrSelectedTeachingPeriod: TeachingPeriod =
+    this.data.teachingPeriod || new TeachingPeriod();
+  public teachingBreaks$: Observable<TeachingPeriodBreak[]> = this.newOrSelectedTeachingPeriod
+    .breaksCache.values as Observable<TeachingPeriodBreak[]>;
 
   public tempBreak = new TeachingPeriodBreak();
 
   addTeachingBreak() {
-    this.newOrSelectedTeachingPeriod.addBreak(this.tempBreak.startDate, this.tempBreak.numberOfWeeks).subscribe({
-      next: (teachingPeriodBreak) => {
-        console.log(teachingPeriodBreak);
-      },
-    });
+    this.newOrSelectedTeachingPeriod
+      .addBreak(this.tempBreak.startDate, this.tempBreak.numberOfWeeks)
+      .subscribe({
+        next: () => {
+          this.alertService.success('Break added');
+        },
+        error: (response) => {
+          this.alertService.error(`Error adding break. ${response}`);
+        },
+      });
   }
 
   deleteBreak(teachingPeriod: TeachingPeriod, teachingBreak: TeachingPeriodBreak): void {
     teachingPeriod.removeBreak(teachingBreak.id).subscribe({
-      next: (teachingPeriodBreak) => {
-        console.log(teachingPeriodBreak);
+      next: () => {
+        this.alertService.success('Break removed', 2000);
+      },
+      error: (response) => {
+        this.alertService.error(`Error deleting break. ${response}`);
       },
-      error: (response) => {},
     });
   }
 
   submitTeachingPeriod() {
-    // todo: use alert service
-    this.teachingPeriodService.store(this.newOrSelectedTeachingPeriod).subscribe({
+    // Check if we are updating or creating a new teaching period
+    const observer = this.newOrSelectedTeachingPeriod.id
+      ? this.teachingPeriodService.update(this.newOrSelectedTeachingPeriod)
+      : this.teachingPeriodService.store(this.newOrSelectedTeachingPeriod);
+
+    // Save the teaching period
+    observer.subscribe({
       next: (teachingPeriod) => {
-        this._snackBar.open(`${teachingPeriod.name} saved`, 'dismiss', {
-          duration: 2000,
-          horizontalPosition: 'end',
-          verticalPosition: 'top',
-        });
+        this.alertService.success(`${teachingPeriod.name} saved`);
+        this.dialogRef.close(teachingPeriod);
       },
       error: (response) => {
-        this._snackBar.open(response, 'dismiss', {
-          duration: 5000,
-          horizontalPosition: 'end',
-          verticalPosition: 'top',
-        });
+        this.alertService.error(`Error saving teaching period. ${response}`);
       },
     });
   }
diff --git a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html b/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html
index 290fcbb3ba..4c03aa36e7 100644
--- a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html
+++ b/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html
@@ -2,17 +2,21 @@ <h1 mat-dialog-title>Import Units Into {{ data.teachingPeriod.name }}</h1>
 <div mat-dialog-content>
   <table mat-table [dataSource]="dataSource">
     <ng-container matColumnDef="unitCode">
-      <th mat-header-cell *matHeaderCellDef>Unit Code</th>
-      <td mat-cell *matCellDef="let unitToImport">
+      <th *matHeaderCellDef mat-header-cell>Unit Code</th>
+      <td *matCellDef="let unitToImport" mat-cell>
         <mat-form-field appearance="outline">
-          <input matInput [(ngModel)]="unitToImport.unitCode" (input)="codeChange($event.target.value, unitToImport)" />
+          <input
+            matInput
+            [(ngModel)]="unitToImport.unitCode"
+            (input)="codeChange($event.target.value, unitToImport)"
+          />
         </mat-form-field>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="sourceUnit">
-      <th mat-header-cell *matHeaderCellDef>Source Unit</th>
-      <td mat-cell *matCellDef="let unitToImport">
+      <th *matHeaderCellDef mat-header-cell>Source Unit</th>
+      <td *matCellDef="let unitToImport" mat-cell>
         <object-select
           placeholder="New Unit"
           [source]="unitToImport.relatedUnits"
@@ -23,8 +27,8 @@ <h1 mat-dialog-title>Import Units Into {{ data.teachingPeriod.name }}</h1>
     </ng-container>
 
     <ng-container matColumnDef="unitName">
-      <th mat-header-cell *matHeaderCellDef>Unit Name</th>
-      <td mat-cell *matCellDef="let unitToImport">
+      <th *matHeaderCellDef mat-header-cell>Unit Name</th>
+      <td *matCellDef="let unitToImport" mat-cell>
         @if (unitToImport.sourceUnit) {
         <span>{{ unitToImport.sourceUnit.name }}</span>
         } @if (!unitToImport.sourceUnit) {
@@ -37,18 +41,18 @@ <h1 mat-dialog-title>Import Units Into {{ data.teachingPeriod.name }}</h1>
     </ng-container>
 
     <ng-container matColumnDef="convenor">
-      <th mat-header-cell *matHeaderCellDef>Main Convenor</th>
-      <td mat-cell *matCellDef="let unitToImport">
+      <th *matHeaderCellDef mat-header-cell>Main Convenor</th>
+      <td *matCellDef="let unitToImport" mat-cell>
         <mat-form-field appearance="outline">
           <input
-            type="text"
             matInput
+            type="text"
             [formControl]="unitToImport.convenorFormControl"
             [matAutocomplete]="auto"
             [(ngModel)]="unitToImport.convenor"
           />
           <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-            @for (staff of unitToImport.filteredStaff | async; track staff) {
+            @for (staff of filteredStaffFor(unitToImport) | async; track staff) {
             <mat-option [value]="staff"> {{staff.name}} </mat-option>
             }
           </mat-autocomplete>
@@ -57,32 +61,32 @@ <h1 mat-dialog-title>Import Units Into {{ data.teachingPeriod.name }}</h1>
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef>Status</th>
-      <td mat-cell *matCellDef="let unitToImport">
+      <th *matHeaderCellDef mat-header-cell>Status</th>
+      <td *matCellDef="let unitToImport" mat-cell>
         <span>{{ statusForUnit(unitToImport) }}</span>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let unitToImport">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let unitToImport" mat-cell>
         <button mat-button (click)="removeUnitToAdd(unitToImport)">Remove</button>
       </td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
   </table>
 </div>
-<div mat-dialog-actions class="flex flex-column">
+<div class="flex-column flex" mat-dialog-actions>
   <div class="flex flex-row">
     <mat-form-field appearance="outline">
       <mat-label>Unit Code(s)</mat-label>
       <input matInput [(ngModel)]="codesToAdd" />
     </mat-form-field>
-    <button mat-button color="secondary" (click)="addUnitsByCode()">Add</button>
+    <button color="secondary" mat-button (click)="addUnitsByCode()">Add</button>
     <span class="flex-grow"></span>
-    <button mat-button color="primary" (click)="doImport()">Import</button>
+    <button color="primary" mat-button (click)="doImport()">Import</button>
     <button mat-button (click)="onCloseClick()">Close</button>
   </div>
 </div>
diff --git a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts b/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts
index 2925b4b59e..bf46e53458 100644
--- a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts
+++ b/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts
@@ -1,10 +1,23 @@
-import { Component, Inject, Injectable, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
-import { FormControl } from '@angular/forms';
-import { Unit, TeachingPeriod, User, UserService, UnitService } from 'src/app/api/models/doubtfire-model';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { GlobalStateService } from 'src/app/projects/states/index/global-state.service';
-import { Observable, map, startWith } from 'rxjs';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Injectable,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {Observable, map, startWith} from 'rxjs';
+import {
+  TeachingPeriod,
+  Unit,
+  UnitService,
+  User,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
 
 export interface TeachingPeriodUnitImportData {
   teachingPeriod: TeachingPeriod;
@@ -15,7 +28,7 @@ interface UnitImportData {
   unitName?: string;
   sourceUnit: Unit;
   convenor: User;
-  relatedUnits?: { value: Unit; text: string }[];
+  relatedUnits?: {value: Unit; text: string}[];
   done?: boolean;
   convenorFormControl: FormControl<User>;
   filteredStaff: Observable<User[]>;
@@ -27,7 +40,7 @@ export class TeachingPeriodUnitImportService {
 
   openImportUnitsDialog(teachingPeriod: TeachingPeriod): void {
     const dialogRef = this.dialog.open(TeachingPeriodUnitImportDialogComponent, {
-      data: { teachingPeriod: teachingPeriod },
+      data: {teachingPeriod: teachingPeriod},
     });
 
     dialogRef.afterClosed().subscribe(() => {
@@ -44,9 +57,11 @@ export class TeachingPeriodUnitImportService {
   selector: 'f-teaching-period-unit-import',
   templateUrl: 'teaching-period-unit-import.dialog.html',
   styleUrls: ['teaching-period-unit-import.dialog.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TeachingPeriodUnitImportDialogComponent implements OnInit {
-  @ViewChild(MatTable, { static: true }) table: MatTable<UnitImportData>;
+  @ViewChild(MatTable, {static: true}) table: MatTable<UnitImportData>;
 
   /**
    * The list of unit related data for the import.
@@ -65,7 +80,18 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
    */
   public codesToAdd: string = '';
 
-  public displayedColumns: string[] = ['unitCode', 'sourceUnit', 'unitName', 'convenor', 'status', 'actions'];
+  public displayedColumns: string[] = [
+    'unitCode',
+    'sourceUnit',
+    'unitName',
+    'convenor',
+    'status',
+    'actions',
+  ];
+
+  public filteredStaffFor(unitToImport: UnitImportData): Observable<User[]> {
+    return unitToImport.filteredStaff;
+  }
 
   constructor(
     public dialogRef: MatDialogRef<TeachingPeriodUnitImportData>,
@@ -104,8 +130,8 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
 
   private loadAllUnits() {
     // Load all units
-    this.unitService.query(undefined, { params: { include_in_active: true } }).subscribe({
-      next: (success) => {
+    this.unitService.query(undefined, {params: {include_in_active: true}}).subscribe({
+      next: () => {
         return;
       },
       error: (failure) => {
@@ -126,15 +152,19 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
 
   public codeChange(code: string, value: UnitImportData) {
     value.relatedUnits = this.relatedUnits(code);
+    // add source unit to realted units - so that it is retained on code change
+    if (value.sourceUnit && !value.relatedUnits.find((u) => u.value.id === value.sourceUnit.id)) {
+      value.relatedUnits.unshift({value: value.sourceUnit, text: value.sourceUnit.codeAndPeriod});
+    }
     value.sourceUnit = value.relatedUnits.length > 0 ? value.relatedUnits[0].value : null;
   }
 
-  public relatedUnits(code: string): { value: Unit; text: string }[] {
+  public relatedUnits(code: string): {value: Unit; text: string}[] {
     return this.allUnits
       .filter((u) => u.code.includes(code) || code.includes(u.code))
       .sort((a, b) => b.startDate.valueOf() - a.startDate.valueOf())
       .map((u) => {
-        return { value: u, text: u.codeAndPeriod };
+        return {value: u, text: u.codeAndPeriod};
       });
   }
 
@@ -143,10 +173,18 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
   }
 
   public statusForUnit(value: UnitImportData): string {
-    if (value.done) return 'Done!';
-    if (value.done !== undefined && !value.done) return 'Error! - check log';
-    if (!value.sourceUnit) return 'Create new unit';
-    if (this.teachigPeriod.hasUnitLike(value.sourceUnit)) return 'Skip - Already in teaching period';
+    if (value.done) {
+      return 'Done!';
+    }
+    if (value.done !== undefined && !value.done) {
+      return 'Error! - check log';
+    }
+    if (!value.sourceUnit) {
+      return 'Create new unit';
+    }
+    if (this.teachigPeriod.hasUnitLike(value.sourceUnit)) {
+      return 'Skip - Already in teaching period';
+    }
     if (this.unitsToImport.filter((u) => u.unitCode === value.sourceUnit.code).length > 1) {
       return 'Duplicate - Source unit appears twice';
     }
@@ -169,12 +207,18 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
   public addUnitsByCode() {
     const codes = this.codesToAdd.split(',').map((code) => code.trim());
     for (const code of codes) {
-      if (code.length == 0) continue;
-      if (this.unitsToImport.find((u) => u.unitCode === code)) continue;
+      if (code.length == 0) {
+        continue;
+      }
+      if (this.unitsToImport.find((u) => u.unitCode === code)) {
+        continue;
+      }
 
       const relatedUnits = this.relatedUnits(code);
       const sourceUnit = relatedUnits.length > 0 ? relatedUnits[0].value : null;
-      const formControl = new FormControl<User>(sourceUnit?.mainConvenor?.user || sourceUnit?.mainConvenorUser);
+      const formControl: FormControl<User> = new FormControl(
+        sourceUnit?.mainConvenor?.user || sourceUnit?.mainConvenorUser,
+      );
 
       this.unitsToImport.push({
         unitCode: code,
@@ -197,36 +241,43 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
   }
 
   private importExistingUnit(unitToImport: UnitImportData, idx: number) {
-    unitToImport.sourceUnit.rolloverTo({ teaching_period_id: this.data.teachingPeriod.id }).subscribe({
-      next: (newUnit: Unit) => {
-        unitToImport.done = true;
-        // Employ the convenor
-        if (unitToImport.convenor && unitToImport.convenor !== newUnit.mainConvenorUser) {
-          newUnit.addStaff(unitToImport.convenor, 'Convenor').subscribe({
-            next: (newRole) => {
-              console.log(`Employed ${unitToImport.convenor.name} in ${newUnit.code}`);
-              newUnit.changeMainConvenor(newRole).subscribe({
-                next: () => {
-                  console.log(`Set ${unitToImport.convenor.name} as main convenor in ${newUnit.code}`);
-                },
-                error: (failure) => {
-                  console.log(failure);
-                },
-              });
-            },
-            error: (failure) => {
-              console.log(failure);
-            },
-          });
-        }
-        this.importUnit(idx + 1);
-      },
-      error: (failure) => {
-        console.log(failure);
-        unitToImport.done = false;
-        this.importUnit(idx + 1);
-      },
-    });
+    unitToImport.sourceUnit
+      .rolloverTo({
+        new_unit_code: unitToImport.unitCode,
+        teaching_period_id: this.data.teachingPeriod.id,
+      })
+      .subscribe({
+        next: (newUnit: Unit) => {
+          unitToImport.done = true;
+          // Employ the convenor
+          if (unitToImport.convenor && unitToImport.convenor !== newUnit.mainConvenorUser) {
+            newUnit.addStaff(unitToImport.convenor, 'Convenor').subscribe({
+              next: (newRole) => {
+                console.log(`Employed ${unitToImport.convenor.name} in ${newUnit.code}`);
+                newUnit.changeMainConvenor(newRole).subscribe({
+                  next: () => {
+                    console.log(
+                      `Set ${unitToImport.convenor.name} as main convenor in ${newUnit.code}`,
+                    );
+                  },
+                  error: (failure) => {
+                    console.log(failure);
+                  },
+                });
+              },
+              error: (failure) => {
+                console.log(failure);
+              },
+            });
+          }
+          this.importUnit(idx + 1);
+        },
+        error: (failure) => {
+          console.log(failure);
+          unitToImport.done = false;
+          this.importUnit(idx + 1);
+        },
+      });
   }
 
   private createNewUnit(unitToImport: UnitImportData, idx: number) {
@@ -240,7 +291,7 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
         },
       })
       .subscribe({
-        next: (newUnit: Unit) => {
+        next: () => {
           unitToImport.done = true;
           this.importUnit(idx + 1);
         },
@@ -254,7 +305,9 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
 
   private importUnit(idx: number) {
     // Stop when past last unit to import
-    if (idx >= this.unitsToImport.length) return;
+    if (idx >= this.unitsToImport.length) {
+      return;
+    }
     const unitToImport = this.unitsToImport[idx];
 
     const code = unitToImport.sourceUnit ? unitToImport.sourceUnit.code : unitToImport.unitCode;
diff --git a/src/app/admin/states/units/units.component.html b/src/app/admin/states/units/units.component.html
new file mode 100644
index 0000000000..b7ef11e74c
--- /dev/null
+++ b/src/app/admin/states/units/units.component.html
@@ -0,0 +1,133 @@
+<div class="flex flex-row gap-5 md:px-16">
+  <div class="flex flex-grow flex-col gap-5 gap-y-0">
+    <div class="flex flex-col">
+      <div>
+        <h3>{{ title }}</h3>
+      </div>
+      <div>
+        <mat-form-field appearance="outline" class="w-full max-w-[720px] min-w-[160px]">
+          <mat-label>Search</mat-label>
+          <input matInput (keyup)="applyFilter($event)" />
+          <mat-icon matPrefix> search </mat-icon>
+        </mat-form-field>
+      </div>
+    </div>
+    <table
+      class="f-table selectable flex-grow"
+      mat-table
+      matSort
+      matSortActive="start_date"
+      matSortDirection="desc"
+      matSortDisableClear
+      [dataSource]="dataSource"
+      (matSortChange)="sortTableData($event)"
+    >
+      <!-- Unit Code Column -->
+      <ng-container matColumnDef="unit_code" sticky>
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Unit Code</th>
+        <td *matCellDef="let element" class="w-0 min-w-full" mat-cell>
+          <f-unit-code [unit_code]="element.unit_code"></f-unit-code>
+        </td>
+      </ng-container>
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="name" sticky>
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
+        <td *matCellDef="let element" mat-cell>{{ element.name }}</td>
+      </ng-container>
+
+      <!-- Unit Role Column -->
+      <ng-container matColumnDef="unit_role" sticky>
+        <th
+          *matHeaderCellDef
+          mat-header-cell
+          mat-sort-header
+          [hidden]="!shouldShowUnitRoleColumn()"
+        >
+          Unit Role
+        </th>
+        <td *matCellDef="let element" mat-cell [hidden]="!shouldShowUnitRoleColumn()">
+          {{ element.unit_role }}
+        </td>
+      </ng-container>
+
+      <!-- Teaching Period Column -->
+      <ng-container matColumnDef="teaching_period" sticky>
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Teaching Period</th>
+        <td *matCellDef="let element" mat-cell>
+          {{ element.teaching_period }}
+        </td>
+      </ng-container>
+
+      <!-- Start Date Column -->
+      <ng-container matColumnDef="start_date" sticky>
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Start Date</th>
+        <td *matCellDef="let element" mat-cell>{{ element.start_date | date: 'EEE d MMM y' }}</td>
+      </ng-container>
+
+      <!-- End Date Column -->
+      <ng-container matColumnDef="end_date" sticky>
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>End Date</th>
+        <td *matCellDef="let element" mat-cell>{{ element.end_date | date: 'EEE d MMM y' }}</td>
+      </ng-container>
+
+      <!-- Active Column -->
+      <ng-container matColumnDef="active" sticky>
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Active</th>
+        <td *matCellDef="let element" mat-cell>
+          <!-- If element.teachingPeriod exists -->
+          @if (element.teachingPeriod) {
+            @if (element.teachingPeriod.active && element.active) {
+              <mat-icon>done</mat-icon>
+            }
+            @if (!element.teachingPeriod.active || !element.active) {
+              <mat-icon>close</mat-icon>
+            }
+          } @else {
+            @if (element.active) {
+              <mat-icon>done</mat-icon>
+            }
+            @if (!element.active) {
+              <mat-icon>close</mat-icon>
+            }
+          }
+
+          <!-- If element.teachingPeriod does not exist -->
+        </td>
+      </ng-container>
+
+      <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+      @if (mode === 'tutor') {
+        <tr
+          *matRowDef="let row; columns: displayedColumns"
+          mat-row
+          [routerLink]="['/units', row.id, 'tasks', 'inbox']"
+        ></tr>
+      }
+      @if (mode === 'admin') {
+        <tr
+          *matRowDef="let row; columns: displayedColumns"
+          mat-row
+          [routerLink]="['/units', row.id, 'admin']"
+        ></tr>
+      }
+      @if (mode === 'student') {
+        <tr
+          *matRowDef="let row; columns: displayedColumns"
+          mat-row
+          [routerLink]="['/projects', row.id, 'dashboard']"
+        ></tr>
+      }
+    </table>
+    <span class="flex items-center">
+      <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
+      <span class="flex-grow"></span>
+      @if (mode === 'admin') {
+        <button color="primary" mat-raised-button (click)="createUnit()">
+          <mat-icon class="icon_display">add</mat-icon>
+          Create Unit
+        </button>
+      }
+    </span>
+  </div>
+</div>
diff --git a/src/app/admin/states/f-units/f-units.component.scss b/src/app/admin/states/units/units.component.scss
similarity index 100%
rename from src/app/admin/states/f-units/f-units.component.scss
rename to src/app/admin/states/units/units.component.scss
diff --git a/src/app/admin/states/units/units.component.spec.ts b/src/app/admin/states/units/units.component.spec.ts
new file mode 100644
index 0000000000..b5ca421a3a
--- /dev/null
+++ b/src/app/admin/states/units/units.component.spec.ts
@@ -0,0 +1,39 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute} from '@angular/router';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {CreateNewUnitModal} from '../../modals/create-new-unit-modal/create-new-unit-modal.component';
+import {FUnitsComponent} from './units.component';
+
+const emptyProvider = {};
+
+describe('FUnitsComponent', () => {
+  let component: FUnitsComponent;
+  let fixture: ComponentFixture<FUnitsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FUnitsComponent],
+      providers: [
+        {provide: CreateNewUnitModal, useValue: emptyProvider},
+        {provide: GlobalStateService, useValue: emptyProvider},
+        {provide: UnitService, useValue: emptyProvider},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(FUnitsComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FUnitsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/states/units/units.component.ts b/src/app/admin/states/units/units.component.ts
new file mode 100644
index 0000000000..86f03ab90d
--- /dev/null
+++ b/src/app/admin/states/units/units.component.ts
@@ -0,0 +1,239 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {ActivatedRoute} from '@angular/router';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {User} from 'src/app/api/models/user/user';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {CreateNewUnitModal} from '../../modals/create-new-unit-modal/create-new-unit-modal.component';
+
+interface IUnitOrProject {
+  id: number;
+  unit_code: string;
+  code: string;
+  name: string;
+  unit_role?: string;
+  teaching_period: string;
+  start_date: Date;
+  end_date: Date;
+  active: boolean;
+  user?: User;
+  unit?: Unit;
+  student?: User;
+  matchesTutorialEnrolments?: (filter: string) => boolean;
+  matchesGroup?: (filter: string) => boolean;
+  matches: (filter: string) => boolean;
+}
+
+@Component({
+  selector: 'f-units',
+  templateUrl: './units.component.html',
+  styleUrls: ['./units.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FUnitsComponent implements OnInit, AfterViewInit {
+  @ViewChild(MatTable, {static: false}) table: MatTable<Unit>;
+  @ViewChild(MatSort, {static: false}) sort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
+
+  @Input({required: true}) mode: 'admin' | 'tutor' | 'student';
+
+  displayedColumns: string[] = [
+    'unit_code',
+    'name',
+    'unit_role',
+    'teaching_period',
+    'start_date',
+    'end_date',
+    'active',
+  ];
+
+  // the datasource of the table
+  dataSource: MatTableDataSource<IUnitOrProject> = new MatTableDataSource([]);
+
+  title: string;
+
+  shouldShowUnitRoleColumn(): boolean {
+    return this.mode === 'admin' || this.mode === 'tutor';
+  }
+
+  constructor(
+    private createUnitDialog: CreateNewUnitModal,
+    private globalStateService: GlobalStateService,
+    private unitService: UnitService,
+    private route: ActivatedRoute,
+  ) {}
+
+  units: IUnitOrProject[] = [];
+
+  ngOnInit(): void {
+    this.mode = this.mode ?? this.route.snapshot.data.mode;
+    if (this.mode === 'tutor') {
+      this.title = 'View all units you teach';
+
+      this.globalStateService.onLoad(() => {
+        this.globalStateService.loadedUnitRoles.values.subscribe({
+          next: (unitRoles) => {
+            this.dataSource.data = this.mapUnitOrProjectsToColumns(unitRoles);
+          },
+        });
+      });
+    }
+    if (this.mode === 'admin') {
+      this.title = 'Administer units';
+
+      this.globalStateService.onLoad(() => {
+        this.unitService.query(undefined, {params: {include_in_active: true}}).subscribe({
+          next: () => {
+            this.globalStateService.loadedUnits.values.subscribe(
+              (loadedUnits) =>
+                (this.dataSource.data = this.mapUnitOrProjectsToColumns(loadedUnits)),
+            );
+          },
+        });
+
+        this.globalStateService.loadedUnits.values.subscribe(
+          (units) => (this.dataSource.data = this.mapUnitOrProjectsToColumns(units)),
+        );
+      });
+    } else if (this.mode === 'student') {
+      this.title = 'View all your units';
+
+      this.globalStateService.onLoad(() => {
+        this.globalStateService.currentUserProjects.values.subscribe(
+          (projects) => (this.dataSource.data = this.mapUnitOrProjectsToColumns(projects)),
+        );
+      });
+    }
+  }
+
+  mapUnitSourceToColumn(unitOrProject: Unit | Project | UnitRole): IUnitOrProject {
+    if (unitOrProject instanceof Unit) {
+      return {
+        id: unitOrProject.id,
+        unit_code: unitOrProject.code,
+        code: unitOrProject.code,
+        name: unitOrProject.name,
+        unit_role: unitOrProject.myRole,
+        teaching_period: unitOrProject.teachingPeriod?.name || 'Custom',
+        start_date: unitOrProject.startDate,
+        end_date: unitOrProject.endDate,
+        active: unitOrProject.active,
+        matches: unitOrProject.matches,
+      };
+    } else if (unitOrProject instanceof Project) {
+      return {
+        id: unitOrProject.id,
+        unit_code: unitOrProject.unit.code,
+        code: unitOrProject.unit.code,
+        name: unitOrProject.unit.name,
+        teaching_period: unitOrProject.unit.teachingPeriod?.name,
+        start_date: unitOrProject.unit.startDate,
+        end_date: unitOrProject.unit.endDate,
+        active: unitOrProject.unit.active,
+        student: unitOrProject.student,
+        matchesTutorialEnrolments: unitOrProject.matchesTutorialEnrolments,
+        matchesGroup: unitOrProject.matchesGroup,
+        matches: (filter: string) => {
+          return (
+            unitOrProject.unit.matches(filter) ||
+            unitOrProject.student.matches(filter) ||
+            unitOrProject.matchesTutorialEnrolments(filter) ||
+            unitOrProject.matchesGroup(filter)
+          );
+        },
+      };
+    } else if (unitOrProject instanceof UnitRole) {
+      return {
+        id: unitOrProject.unit.id,
+        unit_code: unitOrProject.unit.code,
+        code: unitOrProject.unit.code,
+        name: unitOrProject.unit.name,
+        unit_role: unitOrProject.role,
+        teaching_period: unitOrProject.unit.teachingPeriod?.name,
+        start_date: unitOrProject.unit.startDate,
+        end_date: unitOrProject.unit.endDate,
+        active: unitOrProject.unit.active,
+        user: unitOrProject.user,
+        unit: unitOrProject.unit,
+        matches: unitOrProject.matches,
+      };
+    }
+  }
+
+  mapUnitOrProjectsToColumns(unitOrProjects: readonly (Unit | Project | UnitRole)[]) {
+    // copy the array of units/projects/unitRole and map each unit through the mapUnitSourceToColumn function
+    return [...unitOrProjects].map((unitOrProject) => this.mapUnitSourceToColumn(unitOrProject));
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.dataSource.filterPredicate = (data, filter: string) => data.matches(filter);
+  }
+
+  createUnit() {
+    this.createUnitDialog.show();
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  private sortCompare(aValue: number | string, bValue: number | string, isAsc: boolean) {
+    return (aValue < bValue ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  sortTableData(sort: Sort) {
+    if (!sort.active || sort.direction === '') {
+      return;
+    }
+    this.dataSource.data = this.dataSource.data.sort((a, b) => {
+      switch (sort.active) {
+        case 'unit_code':
+          return this.sortCompare(a.unit_code, b.unit_code, sort.direction === 'asc');
+        case 'name':
+          return this.sortCompare(a.name, b.name, sort.direction === 'asc');
+        case 'unit_role':
+          return this.sortCompare(a.unit_role, b.unit_role, sort.direction === 'asc');
+        case 'teaching_period': {
+          return this.sortCompare(a.teaching_period, b.teaching_period, sort.direction === 'asc');
+        }
+        case 'start_date': {
+          return this.sortCompare(
+            a.start_date.getTime(),
+            b.start_date.getTime(),
+            sort.direction === 'asc',
+          );
+        }
+        case 'end_date': {
+          return this.sortCompare(
+            a.end_date.getTime(),
+            b.end_date.getTime(),
+            sort.direction === 'asc',
+          );
+        }
+        case 'active':
+          return this.sortCompare(+!!a.active, +!!b.active, sort.direction === 'asc');
+        default:
+          return 0;
+      }
+    });
+  }
+}
diff --git a/src/app/admin/states/users/users.component.html b/src/app/admin/states/users/users.component.html
new file mode 100644
index 0000000000..159a6298e9
--- /dev/null
+++ b/src/app/admin/states/users/users.component.html
@@ -0,0 +1,99 @@
+<div class="table-padding">
+  <!-- Header -->
+  <div class="header-spacer flex flex-row">
+    <div class="flex flex-col">
+      <h3>{{ externalName }} Users</h3>
+      <h3>Users Administration View</h3>
+    </div>
+    <span class="flex-grow"></span>
+    <mat-form-field appearance="outline">
+      <mat-label>Search users</mat-label>
+      <input
+        matInput
+        placeholder="Search users"
+        [(ngModel)]="filter"
+        (keyup)="applyFilter($event.target.value)"
+      />
+    </mat-form-field>
+  </div>
+
+  <!-- Table -->
+  <table
+    class="f-table selectable"
+    mat-table
+    matSort
+    [dataSource]="dataSource"
+    (matSortChange)="sortData($event)"
+  >
+    <ng-container matColumnDef="avatar">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let user" mat-cell (click)="showUserModal(user)">
+        <user-icon class="self-center" [size]="30" [user]="user"></user-icon>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="firstName">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>First Name</th>
+      <td *matCellDef="let user" mat-cell (click)="showUserModal(user)">{{ user.firstName }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="lastName">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Last Name</th>
+      <td *matCellDef="let user" mat-cell (click)="showUserModal(user)">{{ user.lastName }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="username">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Username</th>
+      <td *matCellDef="let user" mat-cell (click)="showUserModal(user)">{{ user.username }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="email">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Email</th>
+      <td *matCellDef="let user" mat-cell (click)="showUserModal(user)">
+        <a href="mailto: {{ user.email }}">{{ user.email }}</a>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="systemRole">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>System Role</th>
+      <td *matCellDef="let user" mat-cell (click)="showUserModal(user)">{{ user.systemRole }}</td>
+    </ng-container>
+
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  </table>
+
+  <!-- Footer -->
+  <span class="flex items-center">
+    <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[10, 15, 20, 25]"></mat-paginator>
+    <span class="flex-grow"></span>
+    <button color="primary" mat-raised-button (click)="showUserModal()">Add New User</button>
+  </span>
+
+  <mat-expansion-panel class="mt-5" hideToggle>
+    <mat-expansion-panel-header>
+      <mat-panel-title> Bulk users operations </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div class="flex flex-row">
+      <div class="max-w-2xl">
+        <f-file-drop
+          accept=".csv"
+          desiredFileName="users.csv"
+          mode="endpoint"
+          [endpoint]="uploadEndpoint"
+          [multiple]="false"
+          (uploadSuccess)="onUserUploadSuccess($event)"
+        ></f-file-drop>
+      </div>
+      <div class="grow"></div>
+      <button
+        aria-label="Download all users csv"
+        color="primary"
+        mat-flat-button
+        (click)="downloadUsers()"
+      >
+        Download all users CSV <mat-icon>download</mat-icon>
+      </button>
+    </div>
+  </mat-expansion-panel>
+</div>
diff --git a/src/app/admin/states/f-users/f-users.component.scss b/src/app/admin/states/users/users.component.scss
similarity index 100%
rename from src/app/admin/states/f-users/f-users.component.scss
rename to src/app/admin/states/users/users.component.scss
diff --git a/src/app/admin/states/users/users.component.ts b/src/app/admin/states/users/users.component.ts
new file mode 100644
index 0000000000..ab413adfef
--- /dev/null
+++ b/src/app/admin/states/users/users.component.ts
@@ -0,0 +1,151 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {Subscription} from 'rxjs';
+import {User} from 'src/app/api/models/doubtfire-model';
+import {UserService} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {EditProfileDialogService} from 'src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+@Component({
+  selector: 'f-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FUsersComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(MatTable, {static: false}) table: MatTable<User>;
+  @ViewChild(MatSort, {static: false}) sort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
+
+  displayedColumns: string[] = [
+    'avatar',
+    'firstName',
+    'lastName',
+    'username',
+    'email',
+    'systemRole',
+  ];
+  public dataSource: MatTableDataSource<User>;
+  public filter: string;
+  dataload: boolean;
+
+  private subscriptions: Subscription[] = [];
+  externalName: string;
+  uploadEndpoint: string;
+
+  constructor(
+    private userService: UserService,
+    private editProfileDialogService: EditProfileDialogService,
+    private constants: DoubtfireConstants,
+    private fileDownloaderService: FileDownloaderService,
+    private alerts: AlertService,
+  ) {
+    this.dataload = false;
+    this.dataSource = new MatTableDataSource<User>([]);
+  }
+
+  ngOnInit(): void {
+    this.userService.query().subscribe();
+    this.constants.ExternalName.subscribe((externalName) => {
+      this.externalName = externalName;
+    });
+
+    this.uploadEndpoint = this.userService.csvURL;
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.data = this.userService.cache.currentValuesClone();
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.dataSource.filterPredicate = (data, filter: string) => data.matches(filter);
+
+    this.subscriptions.push(
+      this.userService.cache.values.subscribe((users) => {
+        this.dataSource.data = users;
+      }),
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((s) => s.unsubscribe());
+  }
+
+  protected downloadUsers() {
+    this.fileDownloaderService.downloadFile(this.userService.csvURL, 'Users.csv');
+  }
+
+  // TODO: This needs to be brought out into a service which replaces the old csv-result-modal
+  protected onUserUploadSuccess(event) {
+    const max_full_errors = 5;
+    const num_errors = event.body.errors?.length;
+    const num_success = event.body.success?.length;
+    const num_ignored = event.body.ignored?.length;
+
+    // build error string
+    let error_string = `${num_success} users successfully updated, `;
+    error_string += `${num_ignored} users ignored, `;
+    error_string += `${num_errors} users contained an error in the CSV...`;
+
+    event.body.errors?.slice(0, max_full_errors).forEach((error) => {
+      error_string += error.message + '\n';
+    });
+
+    if (num_errors > max_full_errors) {
+      error_string += `... and ${num_errors - max_full_errors} more`;
+    }
+    this.alerts.error(error_string);
+
+    this.userService.fetchAll().subscribe({error: (error) => this.alerts.error(error)});
+  }
+
+  public showUserModal(user?: User) {
+    const userToShow = user ? user : this.userService.createInstanceFrom({});
+    this.editProfileDialogService.openDialog(userToShow, 'edit');
+  }
+
+  public compare(a: number | string, b: number | string, isAsc: boolean): number {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  public sortData(sort: Sort) {
+    const data = this.dataSource.data;
+
+    if (!sort.active || sort.direction === '') {
+      this.dataSource.data = data;
+      return;
+    }
+
+    this.dataSource.data = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+
+      switch (sort.active) {
+        case 'id':
+          return this.compare(a.id, b.id, isAsc);
+        case 'firstName':
+          return this.compare(a.firstName, b.firstName, isAsc);
+        case 'lastName':
+          return this.compare(a.lastName, b.lastName, isAsc);
+        case 'systemRole':
+          return this.compare(a.systemRole, b.systemRole, isAsc);
+        default:
+          return 0;
+      }
+    });
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+}
diff --git a/src/app/admin/tii-action-log/tii-action-log.component.html b/src/app/admin/tii-action-log/tii-action-log.component.html
index e61877520d..57506d0170 100644
--- a/src/app/admin/tii-action-log/tii-action-log.component.html
+++ b/src/app/admin/tii-action-log/tii-action-log.component.html
@@ -1,85 +1,92 @@
 <div class="action-log-container">
-  <div class="flex items-center my-10">
+  <div class="my-6 flex items-center">
     <h1>Turnitin Actions</h1>
     <span class="flex-grow"></span>
     <div>
       <mat-form-field appearance="outline">
-        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" [(ngModel)]="filter" />
+        <input
+          matInput
+          placeholder="Filter"
+          [(ngModel)]="filter"
+          (keyup)="applyFilter($event.target.value)"
+        />
       </mat-form-field>
     </div>
   </div>
 
   <table
-    class="flex-grow f-table selectable"
+    class="f-table selectable flex-grow"
     mat-table
-    [dataSource]="tiiActionsSource"
     matSort
+    [dataSource]="tiiActionsSource"
     (matSortChange)="sortData($event)"
   >
     <ng-container matColumnDef="type" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Action Type</th>
-      <td mat-cell *matCellDef="let action">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Action Type</th>
+      <td *matCellDef="let action" mat-cell>
         {{ action.description }}
       </td>
     </ng-container>
-    <ng-container matColumnDef="lastRun" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Run</th>
-      <td mat-cell *matCellDef="let action">
+    <ng-container matColumnDef="lastRun">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Last Run</th>
+      <td *matCellDef="let action" mat-cell>
         {{ action.lastRun ? (action.lastRun | date: 'd LLL y') : '' }}
       </td>
     </ng-container>
-    <ng-container matColumnDef="retries" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Retries</th>
-      <td mat-cell *matCellDef="let action">
+    <ng-container matColumnDef="retries">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Retries</th>
+      <td *matCellDef="let action" mat-cell>
         {{ action.retries }}
       </td>
     </ng-container>
-    <ng-container matColumnDef="retry" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Retry?</th>
-      <td mat-cell *matCellDef="let action">
+    <ng-container matColumnDef="retry">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Retry?</th>
+      <td *matCellDef="let action" mat-cell>
         {{ action.retry }}
       </td>
     </ng-container>
-    <ng-container matColumnDef="errorCode" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Error Code</th>
-      <td mat-cell *matCellDef="let action">
+    <ng-container matColumnDef="errorCode">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Error Code</th>
+      <td *matCellDef="let action" mat-cell>
         {{ action.errorCode }}
       </td>
     </ng-container>
-    <ng-container matColumnDef="complete" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Complete?</th>
-      <td mat-cell *matCellDef="let action">
+    <ng-container matColumnDef="complete">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Complete?</th>
+      <td *matCellDef="let action" mat-cell>
         {{ action.complete }}
       </td>
     </ng-container>
-    <ng-container matColumnDef="errorMessage" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Error Message</th>
-      <td mat-cell *matCellDef="let action">
+    <ng-container matColumnDef="errorMessage">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Error Message</th>
+      <td *matCellDef="let action" mat-cell>
         {{ action.errorMessage }}
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="tiiActionTools" sticky>
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let action">
+    <ng-container matColumnDef="tiiActionTools" stickyEnd>
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let action" mat-cell>
         @if (!(action.complete || action.retry)) {
-        <button mat-icon-button aria-label="retry" color="primary" (click)="retryAction(action)">
-          <mat-icon>redo</mat-icon>
-        </button>
+          <button aria-label="retry" color="primary" mat-icon-button (click)="retryAction(action)">
+            <mat-icon>redo</mat-icon>
+          </button>
         }
       </td>
     </ng-container>
 
     <!-- Action footer row -->
     <ng-container matColumnDef="actions">
-      <td mat-footer-cell *matFooterCellDef [colSpan]="columns.length"></td>
+      <td *matFooterCellDef mat-footer-cell [colSpan]="columns.length"></td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="columns"></tr>
+    <tr *matHeaderRowDef="columns" mat-header-row></tr>
     <tr
-      mat-row
       *matRowDef="let row; columns: columns"
+      mat-row
       [style.background]="selectedTaskDefinition === row ? 'lightblue' : ''"
     ></tr>
   </table>
+
+  <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>
 </div>
diff --git a/src/app/admin/tii-action-log/tii-action-log.component.spec.ts b/src/app/admin/tii-action-log/tii-action-log.component.spec.ts
index a3caf79062..c1a10ce7a8 100644
--- a/src/app/admin/tii-action-log/tii-action-log.component.spec.ts
+++ b/src/app/admin/tii-action-log/tii-action-log.component.spec.ts
@@ -1,21 +1,94 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {MatSortModule} from '@angular/material/sort';
+import {MatTableModule} from '@angular/material/table';
+import {from} from 'rxjs';
+import {TiiActionService} from 'src/app/api/services/tii-action.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TiiActionLogComponent} from './tii-action-log.component';
 
-import { TiiActionLogComponent } from './tii-action-log.component';
+const emptyProvider = {};
 
 describe('TiiActionLogComponent', () => {
   let component: TiiActionLogComponent;
   let fixture: ComponentFixture<TiiActionLogComponent>;
 
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TiiActionLogComponent],
+      providers: [
+        {provide: TiiActionService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(TiiActionLogComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [TiiActionLogComponent]
-    });
     fixture = TestBed.createComponent(TiiActionLogComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 });
+
+describe('TiiActionLogComponent sticky columns (STAFF-15)', () => {
+  let fixture: ComponentFixture<TiiActionLogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TiiActionLogComponent],
+      imports: [FormsModule, MatSortModule, MatTableModule],
+      providers: [
+        // A Promise-backed observable defers emission to a microtask, same as
+        // the real HTTP call would - avoids mutating tiiActionsSource inside
+        // the same synchronous pass ngAfterViewInit runs in.
+        {provide: TiiActionService, useValue: {query: () => from(Promise.resolve([]))}},
+        {provide: AlertService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TiiActionLogComponent);
+    fixture.detectChanges(); // triggers ngAfterViewInit, which subscribes
+    await fixture.whenStable(); // let the microtask set tiiActionsSource
+    fixture.detectChanges(); // render the table against that data source
+  });
+
+  // CDK Table applies `position: sticky` via the mat-mdc-table-sticky class (in its
+  // stylesheet, not inline) and sets the per-instance left/right offset inline. It
+  // never renders errorCode or complete at all - they're declared in the template
+  // but absent from the `columns` array, so they don't reach the header row.
+  function headerCell(column: string): HTMLElement {
+    return fixture.nativeElement.querySelector(`.mat-column-${column}`);
+  }
+
+  it('only pins the identifying column (type) to the start', () => {
+    const type = headerCell('type');
+    expect(type.classList.contains('mat-mdc-table-sticky')).toBe(true);
+    expect(type.style.left).toBe('0px');
+    expect(type.style.right).toBe('');
+
+    for (const column of ['lastRun', 'retries', 'retry', 'errorMessage']) {
+      const cell = headerCell(column);
+      expect(
+        cell.classList.contains('mat-mdc-table-sticky'),
+        `${column} should not be sticky`,
+      ).toBe(false);
+      expect(cell.style.left, `${column} should have no sticky offset`).toBe('');
+    }
+  });
+
+  it('pins the tools column to the end, not the start, matching the tutorials table', () => {
+    const tools = headerCell('tiiActionTools');
+    expect(tools.classList.contains('mat-mdc-table-sticky')).toBe(true);
+    expect(tools.style.right).toBe('0px');
+    expect(tools.style.left).toBe('');
+  });
+});
diff --git a/src/app/admin/tii-action-log/tii-action-log.component.ts b/src/app/admin/tii-action-log/tii-action-log.component.ts
index ba2f496d00..2f6b29da8b 100644
--- a/src/app/admin/tii-action-log/tii-action-log.component.ts
+++ b/src/app/admin/tii-action-log/tii-action-log.component.ts
@@ -1,37 +1,49 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { TiiAction } from 'src/app/api/models/doubtfire-model';
-import { TiiActionService } from 'src/app/api/services/tii-action.service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {AfterViewInit, ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {TiiAction} from 'src/app/api/models/doubtfire-model';
+import {TiiActionService} from 'src/app/api/services/tii-action.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'f-tii-action-log',
   templateUrl: './tii-action-log.component.html',
-  styleUrls: ['./tii-action-log.component.scss']
+  styleUrls: ['./tii-action-log.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TiiActionLogComponent implements AfterViewInit {
-  @ViewChild(MatTable, { static: false }) table: MatTable<TiiAction>;
-  @ViewChild(MatSort, { static: false }) sort: MatSort;
-  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatTable, {static: false}) table: MatTable<TiiAction>;
+  @ViewChild(MatSort, {static: false}) sort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
 
   public tiiActionsSource: MatTableDataSource<TiiAction>;
-  public columns: string[] = ['type', 'lastRun', 'retries', 'retry', 'errorMessage', 'tiiActionTools']; //, 'complete', 'retries', 'lastRun', 'errorCode', 'log', 'tiiActionAction'];
+  public selectedTaskDefinition: TiiAction | null = null;
+  public columns: string[] = [
+    'type',
+    'lastRun',
+    'retries',
+    'retry',
+    'errorMessage',
+    'tiiActionTools',
+  ]; //, 'complete', 'retries', 'lastRun', 'errorCode', 'log', 'tiiActionAction'];
   public filter: string;
 
-  constructor(private tiiActionService: TiiActionService, private alertService: AlertService) {
-
-  }
+  constructor(
+    private tiiActionService: TiiActionService,
+    private alertService: AlertService,
+  ) {}
 
   ngAfterViewInit(): void {
     this.tiiActionService.query().subscribe((actions) => {
-      console.log(actions);
       this.tiiActionsSource = new MatTableDataSource<TiiAction>(actions);
       this.tiiActionsSource.paginator = this.paginator;
       this.tiiActionsSource.sort = this.sort;
-      this.tiiActionsSource.filterPredicate = (data: any, filter: string) => data.matches(filter);
-
+      this.tiiActionsSource.filterPredicate = (
+        data: TiiAction & {matches(filter: string): boolean},
+        filter: string,
+      ) => data.matches(filter);
     });
   }
 
@@ -67,20 +79,20 @@ export class TiiActionLogComponent implements AfterViewInit {
   }
 
   public retryAction(action: TiiAction) {
-    this.tiiActionService.put(action, {
-      body: {
-        action: 'retry'
-      }
-    }).subscribe({
-      next: (updatedAction) => {
-        action.retry = true;
-        this.alertService.success('Action has been queued for retry');
-      },
-      error: (error) => {
-        this.alertService.error('Failed to queue action for retry');
-      }
-    });
+    this.tiiActionService
+      .put(action, {
+        body: {
+          action: 'retry',
+        },
+      })
+      .subscribe({
+        next: () => {
+          action.retry = true;
+          this.alertService.success('Action has been queued for retry');
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to queue action for retry: ${error}`);
+        },
+      });
   }
-
-
 }
diff --git a/src/app/ajs-upgraded-providers.ts b/src/app/ajs-upgraded-providers.ts
deleted file mode 100644
index 795869225d..0000000000
--- a/src/app/ajs-upgraded-providers.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import {InjectionToken} from '@angular/core';
-
-// Define an injection token for injecting globally into components.
-// Use the name of the angularjs service as the injection token string
-export const uploadSubmissionModal = new InjectionToken('uploadSubmissionModal');
-export const gradeTaskModal = new InjectionToken('gradeTaskModal');
-export const analyticsService = new InjectionToken('analyticsService');
-export const dateService = new InjectionToken('dateService');
-export const audioRecorder = new InjectionToken('audioRecorder');
-export const audioRecorderService = new InjectionToken('recorderService');
-export const csvUploadModalService = new InjectionToken('CsvUploadModalAngular');
-export const csvResultModalService = new InjectionToken('CsvResultModalAngular');
-export const confirmationModal = new InjectionToken('ConfirmationModal');
-export const unitStudentEnrolmentModal = new InjectionToken('UnitStudentEnrolmentModalAngular');
-export const commentsModal = new InjectionToken('CommentsModal');
-export const visualisations = new InjectionToken('Visualisation');
-export const rootScope = new InjectionToken('$rootScope');
-export const calendarModal = new InjectionToken('CalendarModal');
-export const aboutDoubtfireModal = new InjectionToken('AboutDoubtfireModal');
-export const plagiarismReportModal = new InjectionToken('PlagiarismReportModal');
-
-// Define a provider for the above injection token...
-// It will get the service from AngularJS via the factory
-export const visualisationsProvider = {
-  provide: visualisations,
-  useFactory: (i) => i.get('Visualisation'),
-  deps: ['$injector'],
-};
-
-export const calendarModalProvider = {
-  provide: calendarModal,
-  useFactory: (i) => i.get('CalendarModal'),
-  deps: ['$injector'],
-};
-
-export const rootScopeProvider = {
-  provide: rootScope,
-  useFactory: (i) => i.get('$rootScope'),
-  deps: ['$injector'],
-};
-
-export const aboutDoubtfireModalProvider = {
-  provide: aboutDoubtfireModal,
-  useFactory: (i) => i.get('AboutDoubtfireModal'),
-  deps: ['$injector'],
-};
-
-export const plagiarismReportModalProvider = {
-  provide: plagiarismReportModal,
-  useFactory: (i) => i.get('PlagiarismReportModal'),
-  deps: ['$injector'],
-};
-
-export const commentsModalProvider = {
-  provide: commentsModal,
-  useFactory: (i) => i.get('CommentsModal'),
-  deps: ['$injector'],
-};
-
-export const uploadSubmissionModalProvider = {
-  provide: uploadSubmissionModal,
-  useFactory: (i) => i.get('UploadSubmissionModal'),
-  deps: ['$injector'],
-};
-
-export const gradeTaskModalProvider = {
-  provide: gradeTaskModal,
-  useFactory: (i) => i.get('GradeTaskModal'),
-  deps: ['$injector'],
-};
-
-export const analyticsServiceProvider = {
-  provide: analyticsService,
-  useFactory: (i) => i.get('analyticsService'),
-  deps: ['$injector'],
-};
-
-export const dateServiceProvider = {
-  provide: dateService,
-  useFactory: (i) => i.get('dateService'),
-  deps: ['$injector'],
-};
-
-export const AudioRecorderProvider = {
-  provide: audioRecorder,
-  useFactory: (i) => i.get('audioRecorder'),
-  deps: ['$injector'],
-};
-
-export const AudioRecorderServiceProvider = {
-  provide: audioRecorderService,
-  useFactory: (i) => i.get('recorderService'),
-  deps: ['$injector'],
-};
-
-export const CsvUploadModalProvider = {
-  provide: csvUploadModalService,
-  useFactory: (i) => i.get('CsvUploadModal'),
-  deps: ['$injector'],
-};
-
-export const CsvResultModalProvider = {
-  provide: csvResultModalService,
-  useFactory: (i) => i.get('CsvResultModal'),
-  deps: ['$injector'],
-};
-
-export const ConfirmationModalProvider = {
-  provide: confirmationModal,
-  useFactory: (i) => i.get('ConfirmationModal'),
-  deps: ['$injector'],
-};
-
-export const UnitStudentEnrolmentModalProvider = {
-  provide: unitStudentEnrolmentModal,
-  useFactory: (i) => i.get('UnitStudentEnrolmentModal'),
-  deps: ['$injector'],
-};
diff --git a/src/app/api/fixtures/peer-progress-indicator.fixtures.spec.ts b/src/app/api/fixtures/peer-progress-indicator.fixtures.spec.ts
new file mode 100644
index 0000000000..1e6f5cb0d3
--- /dev/null
+++ b/src/app/api/fixtures/peer-progress-indicator.fixtures.spec.ts
@@ -0,0 +1,178 @@
+import {describe, expect, it} from 'vitest';
+import {PeerProgressIndicator} from '../models/peer-progress-indicator';
+import {
+  FIXTURE_DISABLED,
+  FIXTURE_MALFORMED,
+  FIXTURE_NORMAL,
+  FIXTURE_STALE,
+  FIXTURE_SUPPRESSED,
+  FIXTURE_UNAVAILABLE,
+  FIXTURE_ZERO_PERCENT,
+} from './peer-progress-indicator.fixtures';
+
+const assertContractShape = (fixture: PeerProgressIndicator) => {
+  expect(typeof fixture.taskDefinitionId).toBe('number');
+  expect(typeof fixture.unitId).toBe('number');
+  expect(fixture.targetGrade === null || typeof fixture.targetGrade === 'number').toBe(true);
+
+  // submittedPercentage can be number or null
+  expect(
+    fixture.submittedPercentage === null || typeof fixture.submittedPercentage === 'number',
+  ).toBe(true);
+  expect(
+    fixture.completedPercentage === null || typeof fixture.completedPercentage === 'number',
+  ).toBe(true);
+  expect(typeof fixture.distributionAvailable).toBe('boolean');
+  expect(Array.isArray(fixture.statusDistribution)).toBe(true);
+  expect(typeof fixture.isUserEnabled).toBe('boolean');
+
+  expect(typeof fixture.isSuppressed).toBe('boolean');
+  expect(typeof fixture.isStale).toBe('boolean');
+  expect(typeof fixture.isFeatureEnabled).toBe('boolean');
+
+  expect(fixture.lastUpdatedAt === null || typeof fixture.lastUpdatedAt === 'string').toBe(true);
+  expect(typeof fixture.unavailableMessage).toBe('string');
+  expect(fixture.unavailableReason === null || typeof fixture.unavailableReason === 'string').toBe(
+    true,
+  );
+  expect(
+    fixture.distributionUnavailableReason === null ||
+      typeof fixture.distributionUnavailableReason === 'string',
+  ).toBe(true);
+};
+
+describe('PeerProgressIndicator Fixture Regression Tests', () => {
+  // Contract Shape Tests
+  it('NORMAL fixture matches the contract shape', () => {
+    assertContractShape(FIXTURE_NORMAL);
+  });
+
+  it('ZERO_PERCENT fixture matches the contract shape', () => {
+    assertContractShape(FIXTURE_ZERO_PERCENT);
+  });
+
+  it('SUPPRESSED fixture matches the contract shape', () => {
+    assertContractShape(FIXTURE_SUPPRESSED);
+  });
+
+  it('UNAVAILABLE fixture matches the contract shape', () => {
+    assertContractShape(FIXTURE_UNAVAILABLE);
+  });
+
+  it('DISABLED fixture matches the contract shape', () => {
+    assertContractShape(FIXTURE_DISABLED);
+  });
+
+  it('STALE fixture matches the contract shape', () => {
+    assertContractShape(FIXTURE_STALE);
+  });
+
+  // Safe-State Behaviour Tests
+  it('NORMAL fixture has a valid percentage', () => {
+    expect(FIXTURE_NORMAL.submittedPercentage).toBeGreaterThan(0);
+    expect(FIXTURE_NORMAL.isSuppressed).toBe(false);
+    expect(FIXTURE_NORMAL.isFeatureEnabled).toBe(true);
+  });
+
+  it('NORMAL fixture contains the complete, 10-point-quantised canonical status vector', () => {
+    expect(FIXTURE_NORMAL.statusDistribution).toHaveLength(15);
+    expect(new Set(FIXTURE_NORMAL.statusDistribution.map((entry) => entry.status)).size).toBe(15);
+    expect(FIXTURE_NORMAL.statusDistribution.every((entry) => entry.percentage % 10 === 0)).toBe(
+      true,
+    );
+    expect(FIXTURE_NORMAL.statusDistribution).toContainEqual({
+      status: 'fix_and_resubmit',
+      percentage: 10,
+    });
+    expect(FIXTURE_NORMAL.statusDistribution).toContainEqual({
+      status: 'redo',
+      percentage: 10,
+    });
+  });
+
+  it('ZERO_PERCENT fixture keeps a displayed 0% distinct from unavailable data', () => {
+    expect(FIXTURE_ZERO_PERCENT.submittedPercentage).toBe(0);
+    expect(FIXTURE_ZERO_PERCENT.isSuppressed).toBe(false);
+  });
+
+  it('SUPPRESSED fixture hides percentage and uses safe wording', () => {
+    expect(FIXTURE_SUPPRESSED.submittedPercentage).toBeNull();
+    expect(FIXTURE_SUPPRESSED.isSuppressed).toBe(true);
+    expect(FIXTURE_SUPPRESSED.unavailableMessage).toContain('Not enough students');
+  });
+
+  it('UNAVAILABLE fixture hides percentage but is not suppressed', () => {
+    expect(FIXTURE_UNAVAILABLE.submittedPercentage).toBeNull();
+    expect(FIXTURE_UNAVAILABLE.isSuppressed).toBe(false);
+    expect(FIXTURE_UNAVAILABLE.unavailableMessage).toContain('Progress unavailable');
+  });
+
+  it('DISABLED fixture hides percentage and marks feature disabled', () => {
+    expect(FIXTURE_DISABLED.submittedPercentage).toBeNull();
+    expect(FIXTURE_DISABLED.isFeatureEnabled).toBe(false);
+  });
+
+  it('STALE fixture marks data as stale', () => {
+    expect(FIXTURE_STALE.isStale).toBe(true);
+  });
+
+  // Privacy Tests
+  it('No fixture leaks peer identities or raw cohort counts', () => {
+    const fixtures = [
+      FIXTURE_NORMAL,
+      FIXTURE_ZERO_PERCENT,
+      FIXTURE_SUPPRESSED,
+      FIXTURE_UNAVAILABLE,
+      FIXTURE_DISABLED,
+      FIXTURE_STALE,
+    ];
+
+    fixtures.forEach((f) => {
+      expect(f).not.toHaveProperty('peerName');
+      expect(f).not.toHaveProperty('studentId');
+      expect(f).not.toHaveProperty('cohortCount');
+      expect(f).not.toHaveProperty('marks');
+      expect(f).not.toHaveProperty('feedback');
+      expect(f.statusDistribution).not.toContainEqual(
+        expect.objectContaining({studentId: expect.anything()}),
+      );
+    });
+  });
+
+  // Malformed Safe-Failure Tests
+  it('MALFORMED fixture contains invalid values for safe-failure testing', () => {
+    const malformed = FIXTURE_MALFORMED as Partial<PeerProgressIndicator>;
+
+    // invalid numeric values
+    expect(malformed.submittedPercentage).toBeNaN();
+    expect(Number.isFinite(malformed.submittedPercentage as number)).toBe(false);
+    expect(typeof malformed.distributionAvailable).not.toBe('boolean');
+
+    // invalid ranges
+    // expect((malformed.submittedPercentage as number) < 0).toBe(true);
+    // expect((malformed.submittedPercentage as number) > 100).toBe(true);
+
+    // invalid timestamp
+    expect(isNaN(Date.parse(malformed.lastUpdatedAt as string))).toBe(true);
+
+    // invalid IDs
+    expect(typeof malformed.taskDefinitionId).not.toBe('number');
+    expect(typeof malformed.unitId).not.toBe('number');
+
+    // invalid target grade
+    expect(typeof malformed.targetGrade).not.toBe('number');
+  });
+
+  it('MALFORMED fixture must not allow impossible state combinations', () => {
+    const malformed = FIXTURE_MALFORMED as Partial<PeerProgressIndicator>;
+
+    // suppressed must be boolean
+    expect(typeof malformed.isSuppressed).not.toBe('boolean');
+
+    // stale must be boolean
+    expect(typeof malformed.isStale).not.toBe('boolean');
+
+    // featureEnabled must be boolean
+    expect(typeof malformed.isFeatureEnabled).not.toBe('boolean');
+  });
+});
diff --git a/src/app/api/fixtures/peer-progress-indicator.fixtures.ts b/src/app/api/fixtures/peer-progress-indicator.fixtures.ts
new file mode 100644
index 0000000000..17c525f52e
--- /dev/null
+++ b/src/app/api/fixtures/peer-progress-indicator.fixtures.ts
@@ -0,0 +1,160 @@
+import {PeerProgressIndicator} from '../models/peer-progress-indicator';
+
+export const FIXTURE_NORMAL: PeerProgressIndicator = {
+  taskDefinitionId: 12,
+  unitId: 5,
+  targetGrade: 2,
+  submittedPercentage: 60,
+  completedPercentage: 10,
+  distributionAvailable: true,
+  statusDistribution: [
+    {status: 'not_started', percentage: 20},
+    {status: 'feedback_exceeded', percentage: 0},
+    {status: 'redo', percentage: 10},
+    {status: 'need_help', percentage: 0},
+    {status: 'working_on_it', percentage: 20},
+    {status: 'fix_and_resubmit', percentage: 10},
+    {status: 'ready_for_feedback', percentage: 20},
+    {status: 'discuss', percentage: 0},
+    {status: 'demonstrate', percentage: 0},
+    {status: 'complete', percentage: 10},
+    {status: 'fail', percentage: 10},
+    {status: 'time_exceeded', percentage: 0},
+    {status: 'assess_in_portfolio', percentage: 0},
+    {status: 'attention_required', percentage: 0},
+    {status: 'rediscuss', percentage: 0},
+  ],
+  isUserEnabled: true,
+  isSuppressed: false,
+  isStale: false,
+  isFeatureEnabled: true,
+  lastUpdatedAt: '2026-08-14T03:15:00Z',
+  unavailableMessage: '',
+  unavailableReason: null,
+  distributionUnavailableReason: null,
+};
+
+export const FIXTURE_ZERO_PERCENT: PeerProgressIndicator = {
+  taskDefinitionId: 12,
+  unitId: 5,
+  targetGrade: 2,
+  submittedPercentage: 0,
+  completedPercentage: 0,
+  distributionAvailable: true,
+  statusDistribution: [
+    {status: 'not_started', percentage: 50},
+    {status: 'feedback_exceeded', percentage: 0},
+    {status: 'redo', percentage: 0},
+    {status: 'need_help', percentage: 10},
+    {status: 'working_on_it', percentage: 30},
+    {status: 'fix_and_resubmit', percentage: 10},
+    {status: 'ready_for_feedback', percentage: 0},
+    {status: 'discuss', percentage: 0},
+    {status: 'demonstrate', percentage: 0},
+    {status: 'complete', percentage: 0},
+    {status: 'fail', percentage: 0},
+    {status: 'time_exceeded', percentage: 0},
+    {status: 'assess_in_portfolio', percentage: 0},
+    {status: 'attention_required', percentage: 0},
+    {status: 'rediscuss', percentage: 0},
+  ],
+  isUserEnabled: true,
+  isSuppressed: false,
+  isStale: false,
+  isFeatureEnabled: true,
+  lastUpdatedAt: '2026-08-14T03:15:00Z',
+  unavailableMessage: '',
+  unavailableReason: null,
+  distributionUnavailableReason: null,
+};
+
+export const FIXTURE_SUPPRESSED: PeerProgressIndicator = {
+  taskDefinitionId: 12,
+  unitId: 5,
+  targetGrade: 2,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isUserEnabled: true,
+  isSuppressed: true,
+  isStale: false,
+  isFeatureEnabled: true,
+  lastUpdatedAt: '2026-08-14T03:15:00Z',
+  unavailableMessage: 'Not enough students to show progress.',
+  unavailableReason: 'insufficient_cohort',
+  distributionUnavailableReason: 'insufficient_cohort',
+};
+
+export const FIXTURE_UNAVAILABLE: PeerProgressIndicator = {
+  taskDefinitionId: 12,
+  unitId: 5,
+  targetGrade: 2,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isUserEnabled: true,
+  isSuppressed: false,
+  isStale: false,
+  isFeatureEnabled: true,
+  lastUpdatedAt: '2026-08-14T03:15:00Z',
+  unavailableMessage: 'Progress unavailable.',
+  unavailableReason: 'snapshot_unavailable',
+  distributionUnavailableReason: 'snapshot_unavailable',
+};
+
+export const FIXTURE_DISABLED: PeerProgressIndicator = {
+  taskDefinitionId: 12,
+  unitId: 5,
+  targetGrade: 2,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isUserEnabled: true,
+  isSuppressed: false,
+  isStale: false,
+  isFeatureEnabled: false,
+  lastUpdatedAt: '2026-08-14T03:15:00Z',
+  unavailableMessage: 'Peer Progress Indicator is disabled for this unit.',
+  unavailableReason: 'feature_disabled',
+  distributionUnavailableReason: 'feature_disabled',
+};
+
+export const FIXTURE_STALE: PeerProgressIndicator = {
+  taskDefinitionId: 12,
+  unitId: 5,
+  targetGrade: 2,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isUserEnabled: true,
+  isSuppressed: false,
+  isStale: true,
+  isFeatureEnabled: true,
+  lastUpdatedAt: '2026-08-14T03:15:00Z',
+  unavailableMessage: 'Progress data is stale.',
+  unavailableReason: 'stale',
+  distributionUnavailableReason: 'stale',
+};
+
+// Malformed fixture for safe-failure tests
+export const FIXTURE_MALFORMED: unknown = {
+  taskDefinitionId: null,
+  unitId: undefined,
+  targetGrade: 'wrong-type',
+  submittedPercentage: NaN,
+  completedPercentage: -1,
+  distributionAvailable: 'yes',
+  statusDistribution: [{status: 'not_real', percentage: 200}],
+  isUserEnabled: 'yes',
+  isSuppressed: 'nope',
+  isStale: 123,
+  isFeatureEnabled: 'false',
+  lastUpdatedAt: 'not-a-date',
+  unavailableMessage: 999,
+  unavailableReason: 'raw server detail',
+  distributionUnavailableReason: 'raw server detail',
+};
diff --git a/src/app/api/models/activity-type/activity-type.ts b/src/app/api/models/activity-type/activity-type.ts
index e75d09677d..d084a1901e 100644
--- a/src/app/api/models/activity-type/activity-type.ts
+++ b/src/app/api/models/activity-type/activity-type.ts
@@ -1,13 +1,16 @@
-import { Entity, EntityMapping } from 'ngx-entity-service';
+import {Entity, EntityMapping} from 'ngx-entity-service';
 
 export class ActivityType extends Entity {
   id: number;
   name: string;
   abbreviation: string;
 
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
-      activity_type: super.toJson(mappingData, ignoreKeys)
+      activity_type: super.toJson(mappingData, ignoreKeys),
     };
   }
 }
diff --git a/src/app/api/models/campus/campus.ts b/src/app/api/models/campus/campus.ts
index 164b3704f6..9df9ef23e6 100644
--- a/src/app/api/models/campus/campus.ts
+++ b/src/app/api/models/campus/campus.ts
@@ -1,4 +1,4 @@
-import { Entity, EntityMapping } from "ngx-entity-service";
+import {Entity, EntityMapping} from 'ngx-entity-service';
 
 type campusModes = 'timetable' | 'automatic' | 'manual';
 
@@ -7,10 +7,14 @@ export class Campus extends Entity {
   name: string;
   mode: campusModes;
   abbreviation: string;
+  timezone: string;
 
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
-      campus: super.toJson(mappingData, ignoreKeys)
+      campus: super.toJson(mappingData, ignoreKeys),
     };
   }
 
@@ -20,6 +24,9 @@ export class Campus extends Entity {
    * @param matchText the text to match
    */
   public matches(matchText: string): boolean {
-    return this.name.toLowerCase().indexOf(matchText) >= 0 || this.abbreviation.toLowerCase().indexOf(matchText) >= 0;
+    return (
+      this.name.toLowerCase().indexOf(matchText) >= 0 ||
+      this.abbreviation.toLowerCase().indexOf(matchText) >= 0
+    );
   }
 }
diff --git a/src/app/api/models/communication.ts b/src/app/api/models/communication.ts
new file mode 100644
index 0000000000..cbc5990a96
--- /dev/null
+++ b/src/app/api/models/communication.ts
@@ -0,0 +1,142 @@
+import {Entity} from 'ngx-entity-service';
+
+export type CommunicationScheduleRecurrence = 'none' | 'daily' | 'weekly' | 'monthly';
+
+export class CommunicationSetSchedule extends Entity {
+  id?: number;
+  client_key?: string;
+  communication_set_id?: number;
+  name?: string;
+  active = true;
+  anchor_week = 1;
+  anchor_day = 'Monday';
+  hour = 8;
+  minute = 0;
+  timezone = 'UTC';
+  recurrence: CommunicationScheduleRecurrence = 'none';
+  interval = 1;
+  repeat_count?: number;
+  until_at?: string;
+  ice_cube_schedule?: Record<string, unknown>;
+  next_run_at?: string;
+  last_run_at?: string;
+  last_enqueued_at?: string;
+
+  constructor(json?: Partial<CommunicationSetSchedule>) {
+    super();
+    Object.assign(this, json);
+  }
+}
+
+export class CommunicationCondition extends Entity {
+  id: number;
+  type: string;
+  communication_rule_id: number;
+  operator: string;
+  target_grade?: number;
+  task_definition_id?: number;
+  task_statuses?: string[];
+  task_status_count?: number;
+  task_target_grade?: number;
+  last_sign_in_at?: string;
+  spec_con_days?: number;
+  tutorial_id?: number;
+  tutorial_stream_id?: number;
+  campus_id?: number;
+
+  constructor(json?: Partial<CommunicationCondition>) {
+    super();
+    Object.assign(this, json);
+  }
+}
+
+export interface CommunicationRulePreviewStudent {
+  first_name?: string;
+  last_name?: string;
+  preferred_name?: string;
+  full_name?: string;
+  username?: string;
+  student_id?: string;
+  campus?: string;
+  target_grade?: number;
+  spec_con_days?: number;
+  last_sign_in_at?: string;
+}
+
+export interface CommunicationRulePreviewAllocation {
+  rule_id: number;
+  rule_name: string;
+  position: number;
+  students: CommunicationRulePreviewStudent[];
+}
+
+export interface CommunicationRulePreviewResponse {
+  target_rule_id: number;
+  allocations: CommunicationRulePreviewAllocation[];
+}
+
+export interface CommunicationSetPreviewResponse {
+  id: number;
+  unit_id: number;
+  name: string;
+  active: boolean;
+  schedules?: Partial<CommunicationSetSchedule>[];
+  rules: Partial<CommunicationRule>[];
+  previews: CommunicationRulePreviewResponse[];
+}
+
+export class CommunicationAction extends Entity {
+  id: number;
+  type: string;
+  communication_rule_id: number;
+  task_definition_id?: number;
+  subject?: string;
+  body?: string;
+  email_tutors?: boolean;
+  email_convenors?: boolean;
+  target_grade?: number;
+
+  constructor(json?: Partial<CommunicationAction>) {
+    super();
+    Object.assign(this, json);
+  }
+}
+
+export class CommunicationRule extends Entity {
+  id: number;
+  communication_set_id: number;
+  name: string;
+  operator: 'and' | 'or';
+  position: number;
+  active: boolean;
+  send_log_to_convenors: boolean;
+  conditions: CommunicationCondition[] = [];
+  actions: CommunicationAction[] = [];
+
+  constructor(json?: Partial<CommunicationRule>) {
+    super();
+    Object.assign(this, json);
+
+    this.conditions =
+      json?.conditions?.map((condition) => new CommunicationCondition(condition)) ?? [];
+    this.actions = json?.actions?.map((action) => new CommunicationAction(action)) ?? [];
+  }
+}
+
+export class CommunicationSet extends Entity {
+  id: number;
+  unit_id: number;
+  name: string;
+  active: boolean;
+  schedules: CommunicationSetSchedule[] = [];
+  rules: CommunicationRule[] = [];
+
+  constructor(json?: Partial<CommunicationSet>) {
+    super();
+    Object.assign(this, json);
+
+    this.schedules =
+      json?.schedules?.map((schedule) => new CommunicationSetSchedule(schedule)) ?? [];
+    this.rules = json?.rules?.map((rule) => new CommunicationRule(rule)) ?? [];
+  }
+}
diff --git a/src/app/api/models/d2l/d2l_assessment_mapping.service.ts b/src/app/api/models/d2l/d2l_assessment_mapping.service.ts
new file mode 100644
index 0000000000..4b9d22fc7d
--- /dev/null
+++ b/src/app/api/models/d2l/d2l_assessment_mapping.service.ts
@@ -0,0 +1,23 @@
+import {EntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {Unit} from '../doubtfire-model';
+import {D2lAssessmentMapping} from './d2l_assessment_mapping';
+
+@Injectable()
+export class D2lAssessmentMappingService extends EntityService<D2lAssessmentMapping> {
+  protected readonly endpointFormat = 'units/:unitId:/d2l/:id:';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys('id', 'orgUnitId', 'gradeObjectId');
+
+    this.mapping.mapAllKeysToJsonExcept('id');
+  }
+
+  public createInstanceFrom(_json: object, other: Unit): D2lAssessmentMapping {
+    return new D2lAssessmentMapping(other);
+  }
+}
diff --git a/src/app/api/models/d2l/d2l_assessment_mapping.ts b/src/app/api/models/d2l/d2l_assessment_mapping.ts
new file mode 100644
index 0000000000..ac228bdbb6
--- /dev/null
+++ b/src/app/api/models/d2l/d2l_assessment_mapping.ts
@@ -0,0 +1,15 @@
+import {Entity} from 'ngx-entity-service';
+import {Unit} from '../unit';
+
+export class D2lAssessmentMapping extends Entity {
+  id: number;
+  unit: Unit;
+
+  orgUnitId: string;
+  gradeObjectId: string;
+
+  constructor(unit: Unit) {
+    super();
+    this.unit = unit;
+  }
+}
diff --git a/src/app/api/models/discussion-prompt.ts b/src/app/api/models/discussion-prompt.ts
new file mode 100644
index 0000000000..2f9d7605c5
--- /dev/null
+++ b/src/app/api/models/discussion-prompt.ts
@@ -0,0 +1,60 @@
+import {Entity} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DiscussionPromptService} from '../services/discussion-prompt.service';
+import {Project, TaskDefinition, Unit, User} from './doubtfire-model';
+
+export class DiscussionPrompt extends Entity {
+  id: number;
+  unit: Unit;
+  taskDefinition: TaskDefinition;
+  project: Project | null;
+  createdBy: User;
+  content: string;
+  priority: number;
+  discussedAt: Date;
+
+  public readonly PRIORITY = {
+    1: 'Low',
+    2: 'Medium',
+    3: 'High',
+  } as const;
+
+  constructor(data?: Project | TaskDefinition | Unit) {
+    super();
+    if (data) {
+      if (data instanceof Project) {
+        this.project = data;
+      } else if (data instanceof TaskDefinition) {
+        this.taskDefinition = data;
+      } else if (data instanceof Unit) {
+        this.unit = data;
+      }
+    } else {
+      console.error('Failed to get project');
+    }
+  }
+
+  public get priorityLabel() {
+    return this.PRIORITY[this.priority] ?? this.priority;
+  }
+
+  public delete() {
+    const discussionPromptService: DiscussionPromptService =
+      AppInjector.get(DiscussionPromptService);
+    discussionPromptService
+      .delete(
+        {task_definition_id: this.taskDefinition.id, id: this.id},
+        {cache: this.taskDefinition.discussionPromptsCache},
+      )
+      .subscribe({
+        next: (_response: object) => {
+          AppInjector.get(AlertService).success('Successfully deleted discussion note', 4000);
+        },
+        error: (error: Error) => {
+          const message = error.message || 'Unknown error';
+          AppInjector.get(AlertService).error(message, 2000);
+        },
+      });
+  }
+}
diff --git a/src/app/api/models/doubtfire-model.ts b/src/app/api/models/doubtfire-model.ts
index 3cb4911083..b4893c0471 100644
--- a/src/app/api/models/doubtfire-model.ts
+++ b/src/app/api/models/doubtfire-model.ts
@@ -18,6 +18,7 @@ export * from './unit';
 export * from './project';
 export * from './task';
 export * from './task-definition';
+export * from './submission-history';
 export * from './learning-outcome';
 export * from './tutorial-enrolment';
 export * from './unit-role';
@@ -32,6 +33,14 @@ export * from './task-comment/discussion-comment';
 export * from '../services/task-outcome-alignment.service';
 export * from './task-similarity';
 export * from './tii-action';
+export * from './scorm-datamodel';
+export * from './scorm-player-context';
+export * from './test-attempt';
+export * from './task-comment/scorm-comment';
+export * from './task-comment/scorm-extension-comment';
+export * from './feedback-template';
+export * from './communication';
+export * from './engagement';
 
 // Users -- are students or staff
 export * from './user/user';
@@ -39,7 +48,6 @@ export * from './user/user';
 // WebCal -- calendars used to track task due dates
 export * from './webcal/webcal';
 
-
 export * from '../services/authentication.service';
 export * from '../services/unit.service';
 export * from '../services/project.service';
@@ -47,6 +55,7 @@ export * from '../services/task.service';
 export * from '../services/tutorial.service';
 export * from '../services/tutorial-stream.service';
 export * from '../services/overseer-assessment.service';
+export * from '../services/submission-history.service';
 export * from '../services/campus.service';
 export * from '../services/user.service';
 export * from '../services/unit-role.service';
@@ -56,3 +65,17 @@ export * from '../services/teaching-period-break.service';
 export * from '../services/learning-outcome.service';
 export * from '../services/group-set.service';
 export * from '../services/task-similarity.service';
+export * from '../../common/services/grade.service';
+export * from '../services/test-attempt.service';
+export * from '../models/d2l/d2l_assessment_mapping.service';
+export * from '../services/feedback-template.service';
+export * from '../services/communication-set.service';
+export * from '../services/communication-rule.service';
+export * from '../services/communication-condition.service';
+export * from '../services/communication-action.service';
+export * from '../services/engagement.service';
+export * from '../services/engagement-comment.service';
+
+// Peer progress -- anonymous cohort progress for a project's target grade
+export * from './peer-progress';
+export * from '../services/peer-progress.service';
diff --git a/src/app/api/models/engagement.ts b/src/app/api/models/engagement.ts
new file mode 100644
index 0000000000..369fe42745
--- /dev/null
+++ b/src/app/api/models/engagement.ts
@@ -0,0 +1,69 @@
+import {Entity, EntityCache} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {Project, User, UserService} from './doubtfire-model';
+
+export class Engagement extends Entity {
+  id: number;
+  project: Project;
+  user: User;
+  engagementType: string;
+  note: string;
+  occurredAt: Date;
+  evidenceUrl?: string;
+  contentType?: 'image' | 'pdf';
+  hasAttachment: boolean;
+  attachmentFileName?: string;
+  commentCount: number;
+  createdAt: Date;
+  updatedAt: Date;
+
+  readonly commentCache: EntityCache<EngagementComment> = new EntityCache<EngagementComment>();
+
+  constructor(project?: Project) {
+    super();
+    this.project = project;
+  }
+
+  get comments(): readonly EngagementComment[] {
+    return this.commentCache.currentValues;
+  }
+
+  get attachmentUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${this.project.id}/engagements/${this.id}/attachment`;
+  }
+}
+
+export class EngagementComment extends Entity {
+  private static readonly EDIT_WINDOW_MS = 10 * 60 * 1000;
+
+  id: number;
+  engagement: Engagement;
+  user: User;
+  comment: string;
+  replyToId?: number;
+  replyTo?: EngagementComment;
+  createdAt: Date;
+  updatedAt: Date;
+
+  constructor(engagement?: Engagement) {
+    super();
+    this.engagement = engagement;
+  }
+
+  get authorIsMe(): boolean {
+    return this.user.id === AppInjector.get(UserService).currentUser.id;
+  }
+
+  get currentUserCanEdit(): boolean {
+    return (
+      this.authorIsMe &&
+      this.createdAt instanceof Date &&
+      Date.now() - this.createdAt.getTime() <= EngagementComment.EDIT_WINDOW_MS
+    );
+  }
+
+  get currentUserCanDelete(): boolean {
+    return this.authorIsMe || this.engagement.project.unit.myRole === 'Convenor';
+  }
+}
diff --git a/src/app/api/models/feedback-template.ts b/src/app/api/models/feedback-template.ts
new file mode 100644
index 0000000000..0b33c06453
--- /dev/null
+++ b/src/app/api/models/feedback-template.ts
@@ -0,0 +1,78 @@
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {Observable, tap} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {FeedbackTemplateService} from '../services/feedback-template.service';
+
+export class FeedbackTemplate extends Entity {
+  id: number;
+  type: 'group' | 'template';
+  chipText: string;
+  description: string;
+  commentText: string;
+  summaryText: string;
+  taskStatus:
+    | 'fix_and_resubmit'
+    | 'discuss'
+    | 'rediscuss'
+    | 'redo'
+    | 'complete'
+    | 'feedback_exceeded';
+  parentChipId: number;
+  learningOutcomeId: number;
+
+  public save(): Observable<FeedbackTemplate> {
+    const svc = AppInjector.get(FeedbackTemplateService);
+
+    if (this.isNew) {
+      return svc
+        .create({}, {entity: this, endpointFormat: FeedbackTemplateService.addEndpoint})
+        .pipe(
+          tap((response: FeedbackTemplate) => {
+            Object.assign(this, response);
+          }),
+        );
+    } else {
+      return svc
+        .update(
+          {id: this.id},
+          {entity: this, endpointFormat: FeedbackTemplateService.updateEndpoint},
+        )
+        .pipe(
+          tap((response: FeedbackTemplate) => {
+            Object.assign(this, response);
+          }),
+        );
+    }
+  }
+
+  private originalSaveData: string;
+
+  public get hasOriginalSaveData(): boolean {
+    return this.originalSaveData !== undefined && this.originalSaveData !== null;
+  }
+
+  public setOriginalSaveData(mapping: EntityMapping<FeedbackTemplate>) {
+    this.originalSaveData = JSON.stringify(this.toJson(mapping));
+  }
+
+  public hasChanges<T extends Entity>(mapping: EntityMapping<T>): boolean {
+    if (!this.originalSaveData) {
+      return false;
+    }
+
+    return this.originalSaveData != JSON.stringify(this.toJson(mapping));
+  }
+
+  public get isNew(): boolean {
+    return !this.id;
+  }
+
+  public delete(): Observable<void> {
+    const svc = AppInjector.get(FeedbackTemplateService);
+
+    return svc.delete(
+      {id: this.id},
+      {entity: this, endpointFormat: FeedbackTemplateService.updateEndpoint},
+    );
+  }
+}
diff --git a/src/app/api/models/grade.ts b/src/app/api/models/grade.ts
index e139dee8fb..7506f647cd 100644
--- a/src/app/api/models/grade.ts
+++ b/src/app/api/models/grade.ts
@@ -2,7 +2,10 @@ export class Grade {
   public static readonly PASS_RANGE: number[] = [0, 1, 2, 3];
   public static readonly FULL_RANGE: number[] = [-1, 0, 1, 2, 3];
 
-  public static readonly GRADE_ACRONYMS: Map<string | number, string> = new Map<string | number, string>([
+  public static readonly GRADE_ACRONYMS: Map<string | number, string> = new Map<
+    string | number,
+    string
+  >([
     ['Fail', 'F'],
     ['Pass', 'P'],
     ['Credit', 'C'],
diff --git a/src/app/api/models/groups/group-membership.ts b/src/app/api/models/groups/group-membership.ts
index b7952d8b5e..0a0dca1539 100644
--- a/src/app/api/models/groups/group-membership.ts
+++ b/src/app/api/models/groups/group-membership.ts
@@ -1,9 +1,8 @@
-import { Entity } from 'ngx-entity-service';
+import {Entity} from 'ngx-entity-service';
 
 export class GroupMembership extends Entity {
-
   public get student_name(): string {
-    console.log("implement student_name");
-    return "TODO NAME";
+    console.log('implement student_name');
+    return 'TODO NAME';
   }
 }
diff --git a/src/app/api/models/groups/group-set.ts b/src/app/api/models/groups/group-set.ts
index 42882017d4..5e15231ee1 100644
--- a/src/app/api/models/groups/group-set.ts
+++ b/src/app/api/models/groups/group-set.ts
@@ -1,11 +1,9 @@
-import { Entity, EntityCache, EntityMapping } from 'ngx-entity-service';
-import { AppInjector } from 'src/app/app-injector';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { Group, Unit, User } from '../doubtfire-model';
-
+import {Entity, EntityCache, EntityMapping} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {Group, Unit} from '../doubtfire-model';
 
 export class GroupSet extends Entity {
-
   public id: number;
   public name: string;
   public allowStudentsToCreateGroups: boolean = true;
@@ -34,7 +32,7 @@ export class GroupSet extends Entity {
   }
 
   public findGroupById(id: number): Group {
-    return this.groups.find(grp => grp.id === id);
+    return this.groups.find((grp) => grp.id === id);
   }
 
   public groupCSVUploadUrl(): string {
diff --git a/src/app/api/models/groups/group.ts b/src/app/api/models/groups/group.ts
index a730c67430..bcc9f4f5b6 100644
--- a/src/app/api/models/groups/group.ts
+++ b/src/app/api/models/groups/group.ts
@@ -1,10 +1,17 @@
-import {HttpClient} from '@angular/common/http';
 import {Entity, EntityCache, EntityMapping} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
 import {Observable, tap} from 'rxjs';
 import {AppInjector} from 'src/app/app-injector';
-import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
-import {Unit, GroupSet, Project, Tutorial, ProjectService} from '../doubtfire-model';
 import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GroupSet, Project, ProjectService, Tutorial, Unit} from '../doubtfire-model';
+
+export interface MemberContribution {
+  project: Project;
+  rating: number;
+  percent: number;
+  overStar?: number | null;
+}
 
 export class Group extends Entity {
   public id: number;
@@ -79,7 +86,7 @@ export class Group extends Entity {
     httpClient
       .post(`${AppInjector.get(DoubtfireConstants).API_URL}/${this.memberUri(member)}`, {})
       .subscribe({
-        next: (success) => {
+        next: () => {
           // Get old group..
           const grp = member.groupForGroupSet(this.groupSet);
           if (grp) {
@@ -95,7 +102,9 @@ export class Group extends Entity {
           // Has members so add this member
           this.projectsCache.add(member);
           alerts.success(`${member.student.name} was added to '${this.name}'`, 3000);
-          if (onSuccess) onSuccess();
+          if (onSuccess) {
+            onSuccess();
+          }
         },
         error: (message) => alerts.error(message || 'Unknown Error', 6000),
       });
@@ -112,7 +121,7 @@ export class Group extends Entity {
     httpClient
       .delete(`${AppInjector.get(DoubtfireConstants).API_URL}/${this.memberUri(member)}`, {})
       .subscribe({
-        next: (success) => {
+        next: () => {
           // Get old group..
           this.projectsCache.delete(member);
           member.groupCache.delete(this);
@@ -145,30 +154,20 @@ export class Group extends Entity {
   }
 
   public hasSpace(): boolean {
-    if (!this.groupSet.capacity) {
-      return false;
+    if (this.groupSet.capacity == null) {
+      return true;
     } else {
       return this.memberCount < this.groupSet.capacity + this.capacityAdjustment;
     }
   }
 
-  public contributionSum(
-    contrib: {project: Project; rating: number; confRating: number; percent: number}[],
-    member?: Project,
-    value?: number,
-  ): number {
-    return contrib.reduce<number>(
-      (
-        prevValue: number,
-        current: {project: Project; rating: number; confRating: number; percent: number},
-      ) => {
-        if (current.project === member) {
-          return prevValue + value;
-        } else {
-          return prevValue + current.rating;
-        }
-      },
-      0,
-    );
+  public contributionSum(contrib: MemberContribution[], member?: Project, value?: number): number {
+    return contrib.reduce<number>((prevValue: number, current) => {
+      if (current.project === member) {
+        return prevValue + value;
+      } else {
+        return prevValue + current.rating;
+      }
+    }, 0);
   }
 }
diff --git a/src/app/api/models/learning-outcome.ts b/src/app/api/models/learning-outcome.ts
index 40a19d893a..211c3931d1 100644
--- a/src/app/api/models/learning-outcome.ts
+++ b/src/app/api/models/learning-outcome.ts
@@ -1,12 +1,158 @@
-import { Entity } from 'ngx-entity-service';
-
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {Observable, tap} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {LearningOutcomeService, TaskDefinition, Unit} from './doubtfire-model';
 
 export class LearningOutcome extends Entity {
-
   id: number;
-  iloNumber: number;
+  contextType: string;
+  contextId: number;
   abbreviation: string;
-  name: string;
-  description: string;
+  shortDescription: string;
+  fullOutcomeDescription: string;
+  linkedOutcomeIds: number[] = [];
+
+  context?: TaskDefinition | Unit;
+
+  private readonly contextTypePath = {
+    'Unit': 'units',
+    'TaskDefinition': 'task_definitions',
+    'Course': 'courses',
+  };
+
+  public save(): Observable<LearningOutcome> {
+    const svc = AppInjector.get(LearningOutcomeService);
+
+    if (this.context) {
+      if (this.isNew) {
+        return svc
+          .create(
+            {
+              contextType: this.contextTypePath[this.contextType],
+              contextId: this.contextId,
+            },
+            {
+              entity: this,
+              cache: this.context.learningOutcomesCache,
+            },
+          )
+          .pipe(
+            tap((response: LearningOutcome) => {
+              Object.assign(this, response);
+            }),
+          );
+      } else {
+        return svc
+          .update(
+            {
+              contextType: this.contextTypePath[this.contextType],
+              contextId: this.contextId,
+              id: this.id,
+            },
+            {
+              entity: this,
+              cache: this.context.learningOutcomesCache,
+              endpointFormat: LearningOutcomeService.updateEndpoint,
+            },
+          )
+          .pipe(
+            tap((response: LearningOutcome) => {
+              Object.assign(this, response);
+            }),
+          );
+      }
+    } else {
+      // GLO
+      if (this.isNew) {
+        return svc
+          .create({}, {entity: this, endpointFormat: LearningOutcomeService.globalEndpoint})
+          .pipe(
+            tap((response: LearningOutcome) => {
+              Object.assign(this, response);
+            }),
+          );
+      } else {
+        return svc
+          .update(
+            {
+              id: this.id,
+            },
+            {
+              entity: this,
+              endpointFormat: LearningOutcomeService.updateGlobalEndpoint,
+            },
+          )
+          .pipe(
+            tap((response: LearningOutcome) => {
+              Object.assign(this, response);
+            }),
+          );
+      }
+    }
+  }
+
+  private originalSaveData: string;
+
+  public get hasOriginalSaveData(): boolean {
+    return this.originalSaveData !== undefined && this.originalSaveData !== null;
+  }
+
+  /**
+   * To check if things have changed, we need to get the initial save data... as it
+   * isn't empty by default. We can then use
+   * this to check if there are changes.
+   *
+   * @param mapping the mapping to get changes
+   */
+  public setOriginalSaveData(mapping: EntityMapping<LearningOutcome>) {
+    this.originalSaveData = JSON.stringify(this.toJson(mapping));
+  }
+
+  public hasChanges<T extends Entity>(mapping: EntityMapping<T>): boolean {
+    if (!this.originalSaveData) {
+      return false;
+    }
+
+    return this.originalSaveData != JSON.stringify(this.toJson(mapping));
+  }
+
+  public get isNew(): boolean {
+    return !this.id;
+  }
+
+  public delete(): Observable<void> {
+    const svc = AppInjector.get(LearningOutcomeService);
+
+    if (this.context) {
+      return svc.delete(
+        {
+          contextType: this.contextTypePath[this.contextType],
+          contextId: this.contextId,
+          id: this.id,
+        },
+        {
+          entity: this,
+          cache: this.context.learningOutcomesCache,
+          endpointFormat: LearningOutcomeService.updateEndpoint,
+        },
+      );
+    } else {
+      // GLO
+      return svc.delete(
+        {
+          id: this.id,
+        },
+        {
+          entity: this,
+          endpointFormat: LearningOutcomeService.updateGlobalEndpoint,
+        },
+      );
+    }
+  }
 
+  public getFeedbackTemplateBatchUploadUrl(): string {
+    const constants = AppInjector.get(DoubtfireConstants);
+    return `${constants.API_URL}/${this.contextTypePath[this.contextType]}/${this.contextId}/outcomes/${this.id}/feedback_chips/csv`;
+  }
 }
diff --git a/src/app/api/models/marking-session.ts b/src/app/api/models/marking-session.ts
new file mode 100644
index 0000000000..8bfbe3a446
--- /dev/null
+++ b/src/app/api/models/marking-session.ts
@@ -0,0 +1,40 @@
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {User} from './doubtfire-model';
+import {Unit} from './unit';
+
+export class MarkingSession extends Entity {
+  id: number;
+
+  // Marking tutor
+  user: User;
+
+  unit: Unit;
+
+  startTime: Date;
+  endTime: Date;
+  duringTutorial: boolean;
+  durationMinutes: number;
+
+  // Aggregated session activities count
+  commentsAdded: number;
+  assessments: number;
+  submissionsOpened: number;
+
+  constructor(data?: Unit) {
+    super();
+    if (data) {
+      this.unit = data;
+    } else {
+      console.error('Failed to get unit');
+    }
+  }
+
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
+    return {
+      markingSession: super.toJson(mappingData, ignoreKeys),
+    };
+  }
+}
diff --git a/src/app/api/models/notification.ts b/src/app/api/models/notification.ts
new file mode 100644
index 0000000000..335319f1bf
--- /dev/null
+++ b/src/app/api/models/notification.ts
@@ -0,0 +1,42 @@
+import {Entity} from 'ngx-entity-service';
+
+/**
+ * Something that happened which the signed in user should be told about.
+ *
+ * `notificationType` is the category the user's preferences switch on, one of
+ * task, feedback, portfolio, extension or general. The api gates delivery on
+ * the first three against the receive_*_notifications columns, so the web app
+ * never has to check a preference before rendering one of these.
+ *
+ * The api also records an `event` naming the specific thing that happened, but
+ * NotificationEntity does not expose it, so it is deliberately absent here.
+ */
+export class Notification extends Entity {
+  id: number;
+  notificationType: string;
+  message: string;
+
+  /**
+   * Where to send the user when they click this, or null when there is nowhere
+   * to go. Treat it as a route within the app, not an absolute url.
+   *
+   * The column is nullable on the api, so guard it before calling anything on
+   * it. The union is documentation for now, the repo builds with strict off.
+   */
+  link: string | null;
+
+  /**
+   * When the user read this, or null while it is still unread.
+   */
+  readAt: Date | null;
+
+  /**
+   * Never null. The api column is NOT NULL, which is why this one can go
+   * through the plain date mapping and readAt cannot.
+   */
+  createdAt: Date;
+
+  public get isRead(): boolean {
+    return this.readAt != null;
+  }
+}
diff --git a/src/app/api/models/overseer/overseer-assessment.ts b/src/app/api/models/overseer/overseer-assessment.ts
index 7ca6d62464..477d01af7f 100644
--- a/src/app/api/models/overseer/overseer-assessment.ts
+++ b/src/app/api/models/overseer/overseer-assessment.ts
@@ -1,30 +1,66 @@
-import { Entity, EntityMapping } from 'ngx-entity-service';
+import {Entity, EntityCache, EntityMapping} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {Task} from '../doubtfire-model';
+import {SubmissionArchive} from '../submission-history';
+import {TaskStatusEnum} from '../task-status';
+import {OverseerStepResult} from './overseer-step-result';
 
-export class OverseerAssessment extends Entity {
+export class OverseerAssessment extends Entity implements SubmissionArchive {
   id: number;
+  // overseerStepId: number;
   timestamp: Date;
   timestampString: string;
-  content?: [{ label: string; result: string }];
-  task?: any;
-  taskStatus?: any;
-  submissionStatus?: any;
-  createdAt?: any;
-  updatedAt?: any;
-  taskId?: any;
+  content?: {label: string; result: string}[];
+  task?: Task;
+  taskStatus?: TaskStatusEnum;
+  submissionStatus?: 'queued' | 'executing' | 'passed' | 'failed' | 'error';
+  createdAt?: Date;
+  updatedAt?: Date;
+  taskId?: number;
+  submissionHistoryId?: number;
+
+  totalSteps: number;
+  passedSteps: number;
 
   label: string;
+  hasSubmissionFiles?: boolean;
+
+  public readonly stepResultsCache: EntityCache<OverseerStepResult> =
+    new EntityCache<OverseerStepResult>();
 
-  constructor(task?: object) {
+  constructor(task?: Task) {
     super();
 
-    if ( task ) {
+    if (task) {
       this.task = task;
     }
   }
 
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
-      overseer_assessment: super.toJson(mappingData, ignoreKeys)
+      overseer_assessment: super.toJson(mappingData, ignoreKeys),
     };
   }
+
+  public get stepsSkipped() {
+    return this.task?.definition.overseerStepsCache.currentValues.filter(
+      (step) =>
+        !this.stepResultsCache.currentValues.find((result) => result.overseerStepId === step.id),
+    );
+  }
+
+  public get reportReady() {
+    return this.submissionStatus === 'passed' || this.submissionStatus === 'failed';
+  }
+
+  public submissionFilesUrl(): string {
+    const constants = AppInjector.get(DoubtfireConstants);
+    const timestamp =
+      this.timestampString ?? Math.floor(this.timestamp.getTime() / 1000).toString();
+    return `${constants.API_URL}/projects/${this.task.project.id}/task_def_id/${this.task.definition.id}/submissions/timestamps/${timestamp}/files`;
+  }
 }
diff --git a/src/app/api/models/overseer/overseer-image.ts b/src/app/api/models/overseer/overseer-image.ts
index 277c3df426..aef5b416bb 100644
--- a/src/app/api/models/overseer/overseer-image.ts
+++ b/src/app/api/models/overseer/overseer-image.ts
@@ -1,5 +1,4 @@
-import { StringNullableChain } from 'lodash';
-import { Entity, EntityMapping } from 'ngx-entity-service';
+import {Entity, EntityMapping} from 'ngx-entity-service';
 
 export class OverseerImage extends Entity {
   id: number;
@@ -9,7 +8,10 @@ export class OverseerImage extends Entity {
   pulledImageStatus: string;
   lastPulledDate: string;
 
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
       overseer_image: super.toJson(mappingData, ignoreKeys),
     };
diff --git a/src/app/api/models/overseer/overseer-step-result.ts b/src/app/api/models/overseer/overseer-step-result.ts
new file mode 100644
index 0000000000..ebba556c69
--- /dev/null
+++ b/src/app/api/models/overseer/overseer-step-result.ts
@@ -0,0 +1,35 @@
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {OverseerAssessment} from './overseer-assessment';
+import {OverseerStep} from './overseer-step';
+
+export class OverseerStepResult extends Entity {
+  id: number;
+  overseerAssessment: OverseerAssessment;
+  overseerStep: OverseerStep;
+  overseerStepId: number;
+
+  exitStatus: number;
+  pass: boolean;
+  stdout: string;
+  stdin: string;
+  expectedOutput: string;
+  stdoutSha256: string;
+  stdinSha256: string;
+  expectedOutputSha256: string;
+  feedbackMessage: string;
+
+  constructor(oa?: OverseerAssessment, _os?: OverseerStep) {
+    super();
+    this.overseerAssessment = oa;
+    // this.overseerStep = os;
+  }
+
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
+    return {
+      overseer_step_result: super.toJson(mappingData, ignoreKeys),
+    };
+  }
+}
diff --git a/src/app/api/models/overseer/overseer-step.ts b/src/app/api/models/overseer/overseer-step.ts
new file mode 100644
index 0000000000..7ed380fee7
--- /dev/null
+++ b/src/app/api/models/overseer/overseer-step.ts
@@ -0,0 +1,77 @@
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {OverseerStepService} from '../../services/overseer-step.service';
+import {TaskDefinition} from '../task-definition';
+import {TaskStatusEnum} from '../task-status';
+
+export class OverseerStep extends Entity {
+  id: number;
+  taskDefinition: TaskDefinition;
+
+  name: string;
+  description: string;
+
+  // Shown to the student's
+  displayName: string;
+  displayDescription: string;
+
+  runCommand: string;
+  decodedRunCommand: string;
+
+  commandLanguage: string;
+  timeout: number;
+  sortOrder: number;
+  stepType: 'status_check' | 'output_diff';
+  partialOutputDiff: boolean;
+  stdinInputFile: string;
+  expectedOutputFile: string;
+
+  feedbackMessage: string;
+  statusOnSuccess: TaskStatusEnum | 'no_change';
+  statusOnFailure: TaskStatusEnum | 'no_change';
+
+  haltOnSuccess: boolean;
+  haltOnFailure: boolean;
+
+  showExpectedOutput: boolean;
+  showStdin: boolean;
+  showStdout: boolean;
+
+  enabled: boolean;
+
+  // showStdOutToStudent: boolean
+
+  constructor(td?: TaskDefinition) {
+    super();
+    this.taskDefinition = td;
+  }
+
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
+    return {
+      overseer_step: super.toJson(mappingData, ignoreKeys),
+    };
+  }
+
+  public delete() {
+    const overseerStepService: OverseerStepService = AppInjector.get(OverseerStepService);
+    overseerStepService
+      .delete(
+        {
+          id: this.id,
+        },
+        {cache: this.taskDefinition.overseerStepsCache, endpointFormat: 'overseer_steps/:id:'},
+      )
+      .subscribe({
+        next: (_response: object) => {
+          AppInjector.get(AlertService).success('Successfully deleted overseer step', 4000);
+        },
+        error: (error) => {
+          AppInjector.get(AlertService).error(error?.message || error || 'Unknown error', 2000);
+        },
+      });
+  }
+}
diff --git a/src/app/api/models/peer-progress-indicator-state.spec.ts b/src/app/api/models/peer-progress-indicator-state.spec.ts
new file mode 100644
index 0000000000..65ea141544
--- /dev/null
+++ b/src/app/api/models/peer-progress-indicator-state.spec.ts
@@ -0,0 +1,108 @@
+import {describe, expect, it} from 'vitest';
+import {
+  DISABLED_STATE,
+  NORMAL_STATE,
+  STALE_STATE,
+  SUPPRESSED_STATE,
+  UNAVAILABLE_STATE,
+  USER_DISABLED_STATE,
+  ZERO_PERCENT_STATE,
+} from 'src/app/demo/fixtures/peer-progress-demo.fixtures';
+import {resolvePeerProgressState} from './peer-progress-indicator-state';
+
+describe('resolvePeerProgressState', () => {
+  it('returns loading while the request is in flight, ignoring any data passed in', () => {
+    const result = resolvePeerProgressState(true, null, NORMAL_STATE);
+    expect(result.state).toBe('loading');
+    expect(result.data).toBeNull();
+  });
+
+  it('returns error when the request fails, and does not leak the previous data', () => {
+    const result = resolvePeerProgressState(false, new Error('network down'), NORMAL_STATE);
+    expect(result.state).toBe('error');
+    expect(result.data).toBeNull();
+  });
+
+  it('returns success for a normal response', () => {
+    const result = resolvePeerProgressState(false, null, NORMAL_STATE);
+    expect(result.state).toBe('success');
+    expect(result.data).toEqual(NORMAL_STATE);
+  });
+
+  it('keeps a rounded zero distinct from unavailable data', () => {
+    const result = resolvePeerProgressState(false, null, ZERO_PERCENT_STATE);
+    expect(result.state).toBe('no-data');
+  });
+
+  it('returns hidden with the API message for a suppressed response', () => {
+    const result = resolvePeerProgressState(false, null, SUPPRESSED_STATE);
+    expect(result.state).toBe('hidden');
+    expect(result.message).toBe(SUPPRESSED_STATE.unavailableMessage);
+  });
+
+  it('prioritises privacy suppression when a response is also stale', () => {
+    const result = resolvePeerProgressState(false, null, {
+      ...STALE_STATE,
+      isSuppressed: true,
+    });
+
+    expect(result.state).toBe('hidden');
+    expect(result.data?.submittedPercentage).toBeNull();
+  });
+
+  it('returns unavailable for a generically unavailable response', () => {
+    const result = resolvePeerProgressState(false, null, UNAVAILABLE_STATE);
+    expect(result.state).toBe('unavailable');
+  });
+
+  it('returns disabled when the unit has turned the feature off', () => {
+    const result = resolvePeerProgressState(false, null, DISABLED_STATE);
+    expect(result.state).toBe('disabled');
+    expect(result.message).toBe(DISABLED_STATE.unavailableMessage);
+  });
+
+  it('returns preference-disabled without compact or detailed values when the user opts out', () => {
+    const result = resolvePeerProgressState(false, null, USER_DISABLED_STATE);
+
+    expect(result.state).toBe('preference-disabled');
+    expect(result.data?.completedPercentage).toBeNull();
+    expect(result.data?.submittedPercentage).toBeNull();
+    expect(result.data?.statusDistribution).toEqual([]);
+    expect(result.message).toContain('profile settings');
+  });
+
+  it('keeps an old API response usable as submission progress when completion is absent', () => {
+    const result = resolvePeerProgressState(false, null, {
+      ...NORMAL_STATE,
+      completedPercentage: null,
+    });
+
+    expect(result.state).toBe('success');
+    expect(result.data?.submittedPercentage).toBe(60);
+  });
+
+  it('returns stale without exposing a percentage when data is outdated', () => {
+    const result = resolvePeerProgressState(false, null, STALE_STATE);
+
+    expect(result.state).toBe('stale');
+    expect(result.data?.submittedPercentage).toBeNull();
+    expect(result.message).toBe(STALE_STATE.unavailableMessage);
+  });
+
+  it('transitions from loading to success without carrying over a stale value', () => {
+    const loadingResult = resolvePeerProgressState(true, null, null);
+    expect(loadingResult.data).toBeNull();
+
+    const successResult = resolvePeerProgressState(false, null, NORMAL_STATE);
+    expect(successResult.data).toEqual(NORMAL_STATE);
+  });
+
+  it('transitions from loading to error without carrying over a stale value', () => {
+    const loadingResult = resolvePeerProgressState(true, null, NORMAL_STATE);
+    expect(loadingResult.data).toBeNull();
+
+    const errorResult = resolvePeerProgressState(false, new Error('timeout'), null);
+    expect(errorResult.state).toBe('error');
+    expect(errorResult.data).toBeNull();
+  });
+});
diff --git a/src/app/api/models/peer-progress-indicator-state.ts b/src/app/api/models/peer-progress-indicator-state.ts
new file mode 100644
index 0000000000..2f29e3b4fe
--- /dev/null
+++ b/src/app/api/models/peer-progress-indicator-state.ts
@@ -0,0 +1,67 @@
+import {PeerProgressIndicator} from './peer-progress-indicator';
+
+export type PeerProgressUiState =
+  | 'loading'
+  | 'success'
+  | 'no-data'
+  | 'hidden'
+  | 'preference-disabled'
+  | 'unavailable'
+  | 'disabled'
+  | 'stale'
+  | 'error';
+
+export interface PeerProgressViewModel {
+  state: PeerProgressUiState;
+  data: PeerProgressIndicator | null;
+  message: string | null;
+}
+
+const GENERIC_ERROR_MESSAGE = 'Could not load peer progress. Please try again.';
+
+// Prevents old peer data from being visible after an error or new request.
+export function resolvePeerProgressState(
+  loading: boolean,
+  error: unknown | null,
+  data: PeerProgressIndicator | null,
+): PeerProgressViewModel {
+  if (loading) {
+    return {state: 'loading', data: null, message: null};
+  }
+
+  if (error || !data) {
+    return {state: 'error', data: null, message: GENERIC_ERROR_MESSAGE};
+  }
+
+  if (!data.isUserEnabled) {
+    return {
+      state: 'preference-disabled',
+      data,
+      message: 'Peer progress is turned off in your profile settings.',
+    };
+  }
+
+  if (!data.isFeatureEnabled) {
+    return {state: 'disabled', data, message: data.unavailableMessage};
+  }
+
+  if (data.isSuppressed) {
+    return {state: 'hidden', data, message: data.unavailableMessage};
+  }
+
+  if (data.isStale) {
+    return {state: 'stale', data, message: data.unavailableMessage};
+  }
+
+  const compactPercentage = data.completedPercentage ?? data.submittedPercentage;
+
+  if (compactPercentage === null) {
+    return {state: 'unavailable', data, message: data.unavailableMessage};
+  }
+
+  if (compactPercentage === 0) {
+    return {state: 'no-data', data, message: null};
+  }
+
+  return {state: 'success', data, message: null};
+}
diff --git a/src/app/api/models/peer-progress-indicator.ts b/src/app/api/models/peer-progress-indicator.ts
new file mode 100644
index 0000000000..6f0bfc0f26
--- /dev/null
+++ b/src/app/api/models/peer-progress-indicator.ts
@@ -0,0 +1,40 @@
+import {TaskStatusEnum} from './task-status';
+
+export interface PeerProgressStatusDistributionEntry {
+  status: TaskStatusEnum;
+  percentage: number;
+}
+
+export type PeerProgressUnavailableReason =
+  | 'user_disabled'
+  | 'feature_disabled'
+  | 'target_grade_unavailable'
+  | 'snapshot_unavailable'
+  | 'insufficient_cohort'
+  | 'aggregation_incomplete'
+  | 'stale';
+
+export type PeerProgressDistributionUnavailableReason =
+  | 'detailed_data_unavailable'
+  | 'privacy_protection'
+  | PeerProgressUnavailableReason;
+
+export interface PeerProgressIndicator {
+  taskDefinitionId: number; // ID of the task definition
+  unitId: number; // ID of the unit
+  targetGrade: number | null; // Valid server-side target grade, or null when unavailable
+
+  submittedPercentage: number | null; // null when suppressed/unavailable/disabled
+  completedPercentage: number | null; // null when suppressed/unavailable/disabled
+  distributionAvailable: boolean; // false when a detailed vector cannot be shown safely
+  statusDistribution: PeerProgressStatusDistributionEntry[]; // privacy-safe, quantised values only
+  isUserEnabled: boolean; // false when the student's profile preference disables PPI
+  isSuppressed: boolean; // true when cohort too small
+  isStale: boolean; // true when data is outdated
+  isFeatureEnabled: boolean; // false when unit disables PPI
+
+  lastUpdatedAt: string | null; // ISO timestamp, or null when no snapshot was used
+  unavailableMessage: string; // safe message for suppressed/unavailable/stale/disabled
+  unavailableReason: PeerProgressUnavailableReason | null;
+  distributionUnavailableReason: PeerProgressDistributionUnavailableReason | null;
+}
diff --git a/src/app/api/models/peer-progress-unit-summary-state.spec.ts b/src/app/api/models/peer-progress-unit-summary-state.spec.ts
new file mode 100644
index 0000000000..ec0ad7d4c5
--- /dev/null
+++ b/src/app/api/models/peer-progress-unit-summary-state.spec.ts
@@ -0,0 +1,170 @@
+import {describe, expect, it} from 'vitest';
+import {
+  DISABLED_STATE,
+  NORMAL_STATE,
+  STALE_STATE,
+  SUPPRESSED_STATE,
+  UNAVAILABLE_STATE,
+  ZERO_PERCENT_STATE,
+} from 'src/app/demo/fixtures/peer-progress-demo.fixtures';
+import {PeerProgressUnitSummary} from './peer-progress-unit-summary';
+import {resolvePeerProgressUnitSummaryState} from './peer-progress-unit-summary-state';
+
+type SharedCohortState =
+  | typeof NORMAL_STATE
+  | typeof ZERO_PERCENT_STATE
+  | typeof SUPPRESSED_STATE
+  | typeof UNAVAILABLE_STATE
+  | typeof STALE_STATE
+  | typeof DISABLED_STATE;
+
+function toUnitSummary(
+  cohort: SharedCohortState,
+  studentPercentage: number | null,
+): PeerProgressUnitSummary {
+  return {
+    unitId: cohort.unitId,
+    targetGrade: cohort.targetGrade,
+    studentPercentage,
+    submittedPercentage: cohort.submittedPercentage,
+    isSuppressed: cohort.isSuppressed,
+    isStale: cohort.isStale,
+    isFeatureEnabled: cohort.isFeatureEnabled,
+    lastUpdatedAt: cohort.lastUpdatedAt,
+    unavailableMessage: cohort.unavailableMessage,
+  };
+}
+
+describe('resolvePeerProgressUnitSummaryState', () => {
+  it('clears data while loading', () => {
+    const result = resolvePeerProgressUnitSummaryState(true, null, toUnitSummary(NORMAL_STATE, 30));
+
+    expect(result.state).toBe('loading');
+    expect(result.data).toBeNull();
+  });
+
+  it('clears previous data when a request fails', () => {
+    const result = resolvePeerProgressUnitSummaryState(
+      false,
+      new Error('network down'),
+      toUnitSummary(NORMAL_STATE, 30),
+    );
+
+    expect(result.state).toBe('error');
+    expect(result.data).toBeNull();
+    expect(result.message).toBe('Could not load peer progress. Please try again.');
+  });
+
+  it('returns success with student and cohort percentages kept separate', () => {
+    const summary = toUnitSummary(NORMAL_STATE, 30);
+    const result = resolvePeerProgressUnitSummaryState(false, null, summary);
+
+    expect(result.state).toBe('success');
+    expect(result.data?.studentPercentage).toBe(30);
+    expect(result.data?.submittedPercentage).toBe(NORMAL_STATE.submittedPercentage);
+  });
+
+  it('keeps a genuine cohort 0% different from unavailable data', () => {
+    const result = resolvePeerProgressUnitSummaryState(
+      false,
+      null,
+      toUnitSummary(ZERO_PERCENT_STATE, 0),
+    );
+
+    expect(result.state).toBe('no-data');
+    expect(result.data?.studentPercentage).toBe(0);
+    expect(result.data?.submittedPercentage).toBe(0);
+  });
+
+  it('removes a cohort percentage from a malformed suppressed response', () => {
+    const unsafeSummary: PeerProgressUnitSummary = {
+      ...toUnitSummary(SUPPRESSED_STATE, 30),
+      submittedPercentage: 65,
+    };
+
+    const result = resolvePeerProgressUnitSummaryState(false, null, unsafeSummary);
+
+    expect(result.state).toBe('hidden');
+    expect(result.data?.studentPercentage).toBe(30);
+    expect(result.data?.submittedPercentage).toBeNull();
+    expect(result.message).toBe(SUPPRESSED_STATE.unavailableMessage);
+  });
+
+  it('keeps own progress but hides unavailable cohort progress', () => {
+    const result = resolvePeerProgressUnitSummaryState(
+      false,
+      null,
+      toUnitSummary(UNAVAILABLE_STATE, 30),
+    );
+
+    expect(result.state).toBe('unavailable');
+    expect(result.data?.studentPercentage).toBe(30);
+    expect(result.data?.submittedPercentage).toBeNull();
+  });
+
+  it('clears both percentages when the feature is disabled', () => {
+    const unsafeSummary: PeerProgressUnitSummary = {
+      ...toUnitSummary(DISABLED_STATE, 30),
+      submittedPercentage: 65,
+    };
+
+    const result = resolvePeerProgressUnitSummaryState(false, null, unsafeSummary);
+
+    expect(result.state).toBe('disabled');
+    expect(result.data?.studentPercentage).toBeNull();
+    expect(result.data?.submittedPercentage).toBeNull();
+    expect(result.message).toBe(DISABLED_STATE.unavailableMessage);
+  });
+
+  it('keeps own progress but removes a malformed stale cohort percentage', () => {
+    const unsafeSummary: PeerProgressUnitSummary = {
+      ...toUnitSummary(STALE_STATE, 30),
+      submittedPercentage: 65,
+    };
+
+    const result = resolvePeerProgressUnitSummaryState(false, null, unsafeSummary);
+
+    expect(result.state).toBe('stale');
+    expect(result.data?.studentPercentage).toBe(30);
+    expect(result.data?.submittedPercentage).toBeNull();
+    expect(result.message).toBe(STALE_STATE.unavailableMessage);
+  });
+
+  it('keeps a valid cohort percentage when the student percentage is missing', () => {
+    // A missing student figure says nothing about the cohort data we were
+    // given. The card renders the two panels independently, so the student
+    // panel falls to "Your progress is unavailable." on its own and the cohort
+    // panel keeps showing the number the API actually returned.
+    const result = resolvePeerProgressUnitSummaryState(
+      false,
+      null,
+      toUnitSummary(NORMAL_STATE, null),
+    );
+
+    expect(result.state).toBe('success');
+    expect(result.data?.studentPercentage).toBeNull();
+    expect(result.data?.submittedPercentage).toBe(NORMAL_STATE.submittedPercentage);
+  });
+
+  it('returns unavailable when the cohort percentage itself is missing', () => {
+    const result = resolvePeerProgressUnitSummaryState(false, null, {
+      ...toUnitSummary(NORMAL_STATE, 30),
+      submittedPercentage: null,
+    });
+
+    expect(result.state).toBe('unavailable');
+    expect(result.data?.submittedPercentage).toBeNull();
+  });
+
+  it('transitions from loading to success without carrying old data', () => {
+    const loadingResult = resolvePeerProgressUnitSummaryState(true, null, null);
+
+    expect(loadingResult.data).toBeNull();
+
+    const summary = toUnitSummary(NORMAL_STATE, 30);
+    const successResult = resolvePeerProgressUnitSummaryState(false, null, summary);
+
+    expect(successResult.state).toBe('success');
+    expect(successResult.data).toEqual(summary);
+  });
+});
diff --git a/src/app/api/models/peer-progress-unit-summary-state.ts b/src/app/api/models/peer-progress-unit-summary-state.ts
new file mode 100644
index 0000000000..53887c72f9
--- /dev/null
+++ b/src/app/api/models/peer-progress-unit-summary-state.ts
@@ -0,0 +1,104 @@
+import {PeerProgressUiState} from './peer-progress-indicator-state';
+import {PeerProgressUnitSummary} from './peer-progress-unit-summary';
+
+export interface PeerProgressUnitSummaryViewModel {
+  state: PeerProgressUiState;
+  data: PeerProgressUnitSummary | null;
+  message: string | null;
+}
+
+const GENERIC_ERROR_MESSAGE = 'Could not load peer progress. Please try again.';
+
+function withoutCohortPercentage(data: PeerProgressUnitSummary): PeerProgressUnitSummary {
+  return {
+    ...data,
+    submittedPercentage: null,
+  };
+}
+
+function withoutAnyPercentage(data: PeerProgressUnitSummary): PeerProgressUnitSummary {
+  return {
+    ...data,
+    studentPercentage: null,
+    submittedPercentage: null,
+  };
+}
+
+/**
+ * Converts unit-summary data into the shared PPI UI states.
+ *
+ * Privacy rule:
+ * Hidden, unavailable and stale states must never retain an anonymous cohort
+ * percentage, even when a malformed response contains one.
+ *
+ * Accuracy rule:
+ * Disabled, loading and error states must not retain percentages that could be
+ * mistaken for current information.
+ */
+export function resolvePeerProgressUnitSummaryState(
+  loading: boolean,
+  error: unknown | null,
+  data: PeerProgressUnitSummary | null,
+): PeerProgressUnitSummaryViewModel {
+  if (loading) {
+    return {state: 'loading', data: null, message: null};
+  }
+
+  if (error || !data) {
+    return {
+      state: 'error',
+      data: null,
+      message: GENERIC_ERROR_MESSAGE,
+    };
+  }
+
+  if (!data.isFeatureEnabled) {
+    return {
+      state: 'disabled',
+      data: withoutAnyPercentage(data),
+      message: data.unavailableMessage,
+    };
+  }
+
+  if (data.isSuppressed) {
+    return {
+      state: 'hidden',
+      data: withoutCohortPercentage(data),
+      message: data.unavailableMessage,
+    };
+  }
+
+  if (data.isStale) {
+    return {
+      state: 'stale',
+      data: withoutCohortPercentage(data),
+      message: data.unavailableMessage,
+    };
+  }
+
+  // Only a missing COHORT figure makes the cohort panel unavailable. A missing
+  // student figure says nothing about the cohort data we were given, and the
+  // card's own template already handles it -- discarding a valid cohort
+  // percentage here would make the card state something untrue about it.
+  if (data.submittedPercentage === null) {
+    return {
+      state: 'unavailable',
+      data: withoutCohortPercentage(data),
+      message: data.unavailableMessage,
+    };
+  }
+
+  if (data.submittedPercentage === 0) {
+    return {
+      state: 'no-data',
+      data,
+      message: null,
+    };
+  }
+
+  return {
+    state: 'success',
+    data,
+    message: null,
+  };
+}
diff --git a/src/app/api/models/peer-progress-unit-summary.ts b/src/app/api/models/peer-progress-unit-summary.ts
new file mode 100644
index 0000000000..8e408c8de3
--- /dev/null
+++ b/src/app/api/models/peer-progress-unit-summary.ts
@@ -0,0 +1,28 @@
+import {PeerProgressIndicator} from './peer-progress-indicator';
+
+/**
+ * Unit-level PPI proof-of-concept model for PPI-F02.
+ *
+ * This model places the authenticated student's own unit progress beside an
+ * anonymous cohort aggregate. It is a mock-backed frontend model and does not
+ * represent a live unit-level API response.
+ *
+ * `studentPercentage` is the authenticated student's own unit progress. It may
+ * remain available when the anonymous cohort percentage is suppressed,
+ * unavailable, or stale. It is null when the student's own progress is
+ * unavailable or when the feature is disabled.
+ *
+ * `taskDefinitionId` is omitted because this summary is not scoped to one task.
+ */
+export interface PeerProgressUnitSummary extends Omit<
+  PeerProgressIndicator,
+  | 'taskDefinitionId'
+  | 'completedPercentage'
+  | 'distributionAvailable'
+  | 'statusDistribution'
+  | 'isUserEnabled'
+  | 'unavailableReason'
+  | 'distributionUnavailableReason'
+> {
+  studentPercentage: number | null;
+}
diff --git a/src/app/api/models/peer-progress.ts b/src/app/api/models/peer-progress.ts
new file mode 100644
index 0000000000..8e70cdd25b
--- /dev/null
+++ b/src/app/api/models/peer-progress.ts
@@ -0,0 +1,33 @@
+export interface PeerMedianPoint {
+  date: string;
+
+  /**
+   * Median proportion of target task weight still remaining across the cohort,
+   * from 0 to 1. This matches the scale used by the existing burndown series
+   * before those values are converted into percentages for display.
+   */
+  remaining: number;
+}
+
+/**
+ * A safe display state returned by the authorised backend or frontend adapter.
+ *
+ * The browser must not receive a raw cohort size and decide whether a cohort is
+ * large enough. That privacy decision belongs at the trusted data boundary.
+ */
+export type PeerProgressState = 'ready' | 'suppressed' | 'unavailable' | 'disabled';
+
+export interface PeerProgressResponse {
+  project_id: number;
+
+  /** The comparison applies to this selected target grade. */
+  target_grade: number;
+
+  /** Privacy-safe state; no raw cohort size is returned to the component. */
+  state: PeerProgressState;
+
+  /**
+   * Anonymous median points. This must be empty unless state is ready.
+   */
+  median_burndown: PeerMedianPoint[];
+}
diff --git a/src/app/api/models/project.ts b/src/app/api/models/project.ts
index bde396b74b..d786b963fb 100644
--- a/src/app/api/models/project.ts
+++ b/src/app/api/models/project.ts
@@ -1,13 +1,12 @@
-import { HttpClient } from '@angular/common/http';
-import { Entity, EntityCache, RequestOptions } from 'ngx-entity-service';
-import { Observable, tap } from 'rxjs';
-import { visualisations } from 'src/app/ajs-upgraded-providers';
-import { AppInjector } from 'src/app/app-injector';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { MappingFunctions } from '../services/mapping-fn';
+import {Entity, EntityCache, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Observable, tap} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {MappingFunctions} from '../services/mapping-fn';
 import {
   Campus,
-  Grade,
   Group,
   GroupSet,
   ProjectService,
@@ -21,8 +20,14 @@ import {
   Unit,
   User,
 } from './doubtfire-model';
-import { TaskOutcomeAlignment } from './task-outcome-alignment';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {Engagement} from './engagement';
+import {StaffNote} from './staff-note';
+import {TaskOutcomeAlignment} from './task-outcome-alignment';
+
+export interface ProjectBurndownSeries {
+  key: string;
+  values: [timestamp: number, remaining: number][];
+}
 
 export class Project extends Entity {
   public id: number;
@@ -38,9 +43,13 @@ export class Project extends Entity {
   public portfolioAvailable: boolean;
   public usesDraftLearningSummary: boolean;
 
+  public specConDays: number = 0;
+
   public hasPortfolio: boolean;
   public portfolioStatus: number;
-  public portfolioFiles: { kind: string; name: string; idx: number }[];
+  public portfolioFiles: {kind: string; name: string; idx: number}[];
+  public escalationAttemptsRemaining: number;
+  public portfolioSubmissionDate: Date;
 
   public taskStats: {
     key: TaskStatusEnum;
@@ -48,8 +57,10 @@ export class Project extends Entity {
   }[];
   public orderScale: number;
 
-  public burndownChartData: { key: string; values: number[] }[];
+  public burndownChartData: ProjectBurndownSeries[];
   public readonly taskCache: EntityCache<Task> = new EntityCache<Task>();
+  public readonly staffNoteCache: EntityCache<StaffNote> = new EntityCache<StaffNote>();
+  public readonly engagementCache: EntityCache<Engagement> = new EntityCache<Engagement>();
   public readonly tutorialEnrolmentsCache: EntityCache<Tutorial> = new EntityCache<Tutorial>();
   public readonly groupCache: EntityCache<Group> = new EntityCache<Group>();
   public readonly taskOutcomeAlignmentsCache: EntityCache<TaskOutcomeAlignment> =
@@ -60,6 +71,8 @@ export class Project extends Entity {
 
   public similarityFlag: boolean = false;
 
+  public staffNoteCount: number;
+
   public constructor(unit?: Unit) {
     super();
     this.unit = unit;
@@ -164,26 +177,28 @@ export class Project extends Entity {
   }
 
   public get targetGradeWord(): string {
-    return Grade.GRADES[this.targetGrade];
+    return this.unit.gradeLabel(this.targetGrade);
   }
 
   public get targetGradeAcronym(): string {
-    return Grade.GRADE_ACRONYMS.get(this.targetGrade);
+    return this.unit.gradeAbbreviation(this.targetGrade);
   }
 
   public activeTasks(): Task[] {
-    return this.taskCache.currentValues.filter((task) => task.definition.targetGrade <= this.targetGrade);
+    return this.taskCache.currentValues.filter(
+      (task) => task.definition.targetGrade <= this.targetGrade,
+    );
   }
 
   public calcTopTasks() {
     // We will assign current weight to tasks...
-    var currentWeight: number = 0;
+    let currentWeight: number = 0;
 
     // Assign weights to tasks in final state - complete, fail, etc
     const sortedCompletedTasks: Task[] = this.taskCache.currentValues
       .filter((task) => task.inFinalState())
       .sort((a, b) => a.definition.seq - b.definition.seq)
-      .sort((a, b) => a.definition.startDate.getTime() - b.definition.startDate.getTime());
+      .sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
 
     sortedCompletedTasks.forEach((task) => {
       task.topWeight = currentWeight;
@@ -193,13 +208,13 @@ export class Project extends Entity {
     // Sort valid top tasks by start date - tasks in non-final state
     const sortedTasks: Task[] = this.taskCache.currentValues
       .filter((task) => task.isValidTopTask())
-      .sort((a, b) => a.definition.seq - b.definition.seq)
-      .sort((a, b) => a.definition.startDate.getTime() - b.definition.startDate.getTime());
+      .sort((a, b) => a.startDate.getTime() - b.startDate.getTime())
+      .sort((a, b) => a.definition.seq - b.definition.seq);
 
     const overdueTasks: Task[] = sortedTasks.filter((task) => task.daysUntilDueDate() <= 7);
 
     // Step 2: select tasks not complete that are overdue. Pass tasks are done first.
-    Grade.PASS_RANGE.forEach((grade) => {
+    this.unit.gradeValues.forEach((grade) => {
       // Sorting needs to be done here according to the days past the target date.
       const closeGradeTasks: Task[] = overdueTasks
         .filter((task) => task.definition.targetGrade === grade)
@@ -215,7 +230,7 @@ export class Project extends Entity {
     const toAdd: Task[] = sortedTasks
       .filter((task) => task.daysUntilDueDate() > 7)
       .sort((a, b) => a.definition.targetGrade - b.definition.targetGrade)
-      .sort((a, b) => a.definition.startDate.getTime() - b.definition.startDate.getTime());
+      .sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
 
     // Sort by the targetGrade. Pass task are done first if same due date as others.
 
@@ -229,7 +244,7 @@ export class Project extends Entity {
   public assignGrade(score: number, rationale: string): void {
     const alerts = AppInjector.get(AlertService);
     const projectService: ProjectService = AppInjector.get(ProjectService);
-    const oldGrade: number = this.grade;
+    const oldGrade: number = this.grade || 0;
     this.grade = score;
     this.gradeRationale = rationale;
 
@@ -254,10 +269,14 @@ export class Project extends Entity {
   }
 
   //# Get the status of the portfolio
-  public portfolioTaskStatus(): string {
-    if (this.portfolioAvailable) return 'complete';
-    else if (this.compilePortfolio) return 'working_on_it';
-    else return 'not_started';
+  public portfolioTaskStatus(): TaskStatusEnum {
+    if (this.portfolioAvailable) {
+      return 'complete';
+    } else if (this.compilePortfolio) {
+      return 'working_on_it';
+    } else {
+      return 'not_started';
+    }
   }
 
   public portfolioTaskStatusClass(): string {
@@ -275,16 +294,19 @@ export class Project extends Entity {
     return httpClient.delete<void>(this.portfolioUrl(false));
   }
 
-  public deleteFileFromPortfolio(file: { idx: any; kind: any; name: any }) {
+  public deleteFileFromPortfolio(file: {idx: number; kind: string; name: string}) {
     const httpClient = AppInjector.get(HttpClient);
     return httpClient
-      .delete<void>(`${AppInjector.get(DoubtfireConstants).API_URL}/submission/project/${this.id}/portfolio`, {
-        body: {
-          idx: file.idx,
-          kind: file.kind,
-          name: file.name,
+      .delete<void>(
+        `${AppInjector.get(DoubtfireConstants).API_URL}/submission/project/${this.id}/portfolio`,
+        {
+          body: {
+            idx: file.idx,
+            kind: file.kind,
+            name: file.name,
+          },
         },
-      })
+      )
       .pipe(
         tap(() => {
           this.portfolioFiles = this.portfolioFiles.filter((value) => value != file);
@@ -319,8 +341,9 @@ export class Project extends Entity {
       cache: this.unit.studentCache,
     };
 
-    projectService.get(this, options).subscribe((response) => {
-      (AppInjector.get(visualisations) as any).refreshAll();
+    projectService.get(this, options).subscribe(() => {
+      // Legacy AngularJS visualisation refresh hook removed with upgraded providers.
+      // (AppInjector.get(visualisations) as any).refreshAll();
     });
   }
 
@@ -342,7 +365,7 @@ export class Project extends Entity {
   }
 
   public isEnrolledIn(tutorial: Tutorial): boolean {
-    return this.tutorials.includes(tutorial);
+    return this.tutorials.some((t) => t.id === tutorial.id);
   }
 
   public updateUnitEnrolment(): void {
@@ -369,16 +392,26 @@ export class Project extends Entity {
     tutorialService.switchTutorial(this, tutorial, !this.isEnrolledIn(tutorial));
   }
 
+  public get progressStats() {
+    const stats = {};
+
+    this.taskStats.forEach((stat) => {
+      stats[stat.key] = stat.value;
+    });
+
+    return stats;
+  }
+
   public refreshBurndownChartData(): void {
-    const result: { key: string; values: number[] }[] = [];
+    const result: ProjectBurndownSeries[] = [];
 
     // Setup the dictionaries to contain the keys and values
     // key = series name
     // values = array of [ x, y ] values
-    const projectedResults = { key: 'Projected', values: [] };
-    const targetTaskResults = { key: 'Target', values: [] };
-    const doneTaskResults = { key: 'To Submit', values: [] };
-    const completeTaskResults = { key: 'To Complete', values: [] };
+    const projectedResults: ProjectBurndownSeries = {key: 'Projected', values: []};
+    const targetTaskResults: ProjectBurndownSeries = {key: 'Target', values: []};
+    const doneTaskResults: ProjectBurndownSeries = {key: 'To Submit', values: []};
+    const completeTaskResults: ProjectBurndownSeries = {key: 'To Complete', values: []};
 
     result.push(targetTaskResults);
     result.push(projectedResults);
@@ -388,15 +421,19 @@ export class Project extends Entity {
     // Get the weeks between start and end date as an array
     // dates = unit.start_date.to_date.step(unit.end_date.to_date + 1.week, step=7).to_a
     const endDateValue = this.unit.endDate.getTime() + MappingFunctions.weeksMs(3);
-    const dates = MappingFunctions.step(this.unit.startDate.getTime(), endDateValue, MappingFunctions.weeksMs(1)).map(
-      (val) => new Date(val),
-    );
+    const dates = MappingFunctions.step(
+      this.unit.startDate.getTime(),
+      endDateValue,
+      MappingFunctions.weeksMs(1),
+    ).map((val) => new Date(val));
 
     // Get the target task from the unit's task definitions
     const targetTasks = this.unit.taskDefinitionsForGrade(this.targetGrade);
 
     // get total value of all tasks assigned to this project
-    const total = targetTasks.map((td) => td.weighting).reduce((prev, current, idx, array) => prev + current, 0);
+    const total = targetTasks
+      .map((td) => td.weighting)
+      .reduce((prev, current, _idx, _array) => prev + current, 0);
 
     // exit if no tasks or no weights
     if (targetTasks.length === 0 || total === 0) {
@@ -407,28 +444,39 @@ export class Project extends Entity {
     const tasks = this.tasks;
 
     const readyOrCompleteTasks = tasks.filter((task) =>
-      ['ready_for_feedback', 'discuss', 'demonstrate', 'complete'].includes(task.status),
+      [
+        'ready_for_feedback',
+        'discuss',
+        'rediscuss',
+        'demonstrate',
+        'complete',
+        'assess_in_portfolio',
+      ].includes(task.status),
     );
-    let lastTargetDate: Date;
+    // let lastTargetDate: Date;
 
     const completedTasks = tasks.filter((task) => task.status === 'complete');
 
     // Get the tasks currently marked as done (or ready to mark)
     const doneTasks = tasks.filter(
-      (t) => !['working_on_it', 'not_started', 'fix_and_resubmit', 'redo', 'need_help'].includes(t.status),
+      (t) =>
+        !['working_on_it', 'not_started', 'fix_and_resubmit', 'redo', 'need_help'].includes(
+          t.status,
+        ),
     );
 
     // last done task date)
     if (readyOrCompleteTasks.length === 0) {
-      lastTargetDate = this.unit.startDate;
+      // lastTargetDate = this.unit.startDate;
     } else {
-      lastTargetDate = readyOrCompleteTasks
-        .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime())
-        .splice(-1)[0].dueDate;
+      // lastTargetDate = readyOrCompleteTasks
+      //   .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime())
+      //   .splice(-1)[0].dueDate;
     }
 
     // today is used to determine when to stop adding done tasks
-    const today = new Date().getTime() > this.unit.endDate.getTime() ? this.unit.endDate : new Date();
+    const today =
+      new Date().getTime() > this.unit.endDate.getTime() ? this.unit.endDate : new Date();
 
     // use weekly completion rate to determine projected progress
     let completionRate: number = 0;
@@ -437,7 +485,7 @@ export class Project extends Entity {
       if (weeksElapsed > 0) {
         const completedTasksWeight = readyOrCompleteTasks
           .map((t) => t.definition.weighting)
-          .reduce((prev, current, idx, arr) => prev + current, 0);
+          .reduce((prev, current, _idx, _arr) => prev + current, 0);
         completionRate = completedTasksWeight / weeksElapsed;
       }
     }
@@ -453,7 +501,7 @@ export class Project extends Entity {
     dates.forEach((date) => {
       // get the target values - those from the task definitions
       // amount remaining is the sum of all tasks due after the date
-      const targetVal = [
+      const targetVal: ProjectBurndownSeries['values'][number] = [
         date.getTime(),
         (targetTasks
           .filter((taskDef) => taskDef.targetDate >= date)
@@ -462,7 +510,7 @@ export class Project extends Entity {
       ];
 
       // get the done values - those done up to today, or the end of the unit
-      const doneVal = [
+      const doneVal: ProjectBurndownSeries['values'][number] = [
         date.getTime(),
         (total -
           doneTasks
@@ -473,7 +521,7 @@ export class Project extends Entity {
       ];
 
       // get the completed values - those signed off
-      const completeVal = [
+      const completeVal: ProjectBurndownSeries['values'][number] = [
         date.getTime(),
         (total -
           completedTasks
@@ -484,7 +532,10 @@ export class Project extends Entity {
       ];
 
       // projected value is based on amount done
-      const projectedVal = [date.getTime(), projectedRemaining / total];
+      const projectedVal: ProjectBurndownSeries['values'][number] = [
+        date.getTime(),
+        projectedRemaining / total,
+      ];
 
       // add one week's worth of completion data
       projectedRemaining -= completionRate;
@@ -513,4 +564,46 @@ export class Project extends Entity {
 
     this.burndownChartData = result;
   }
+
+  public applySpecCon(days: number): Observable<Project> {
+    const projectService: ProjectService = AppInjector.get(ProjectService);
+    return projectService
+      .update(this, {body: {spec_con_days: days}, endpointFormat: 'projects/:id:/spec_con'})
+      .pipe(
+        tap((project: Project) => {
+          project.specConDays = days;
+        }),
+      );
+  }
+
+  public tasksIncludedInPortfolioUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${this.id}/portfolio_tasks`;
+  }
+
+  public getTasksIncludedInPortfolio(): Observable<number[]> {
+    const httpClient = AppInjector.get(HttpClient);
+    return httpClient.get<number[]>(this.tasksIncludedInPortfolioUrl());
+  }
+
+  public tasksStillProcessingUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${this.id}/tasks_processing`;
+  }
+
+  public getTasksStillProcessing(): Observable<number[]> {
+    const httpClient = AppInjector.get(HttpClient);
+    return httpClient.get<number[]>(this.tasksStillProcessingUrl());
+  }
+
+  public resetTargetDates(): Observable<Project> {
+    const projectService: ProjectService = AppInjector.get(ProjectService);
+    return projectService.update(
+      {
+        projectId: this.id,
+      },
+      {
+        endpointFormat: '/projects/:projectId:/reset_target_dates',
+        entity: this,
+      },
+    );
+  }
 }
diff --git a/src/app/api/models/scorm-datamodel.ts b/src/app/api/models/scorm-datamodel.ts
new file mode 100644
index 0000000000..b967e24c83
--- /dev/null
+++ b/src/app/api/models/scorm-datamodel.ts
@@ -0,0 +1,53 @@
+export class ScormDataModel {
+  dataModel: Record<string, string | number> = {};
+  readonly msgPrefix = 'SCORM DataModel: ';
+
+  constructor() {
+    this.dataModel = {};
+  }
+
+  public restore(dataModel: string) {
+    // console.log(this.msgPrefix + 'restoring DataModel with provided data');
+    this.dataModel = JSON.parse(dataModel) as Record<string, string | number>;
+  }
+
+  public get(key: string): string {
+    // console.log(`SCORM DataModel: get ${key} ${this.dataModel[key]}`);
+    return String(this.dataModel[key] ?? '');
+  }
+
+  public dump(): Record<string, string | number> {
+    return this.dataModel;
+  }
+
+  public set(key: string, value: string): string {
+    // console.log(this.msgPrefix + 'set: ', key, value);
+    this.dataModel[key] = value;
+    if (key.match('cmi.interactions.\\d+.id')) {
+      // cmi.interactions._count must be incremented after a new interaction is created
+      const interactionPath = key.match('cmi.interactions.\\d+');
+      const objectivesCounterForInteraction = interactionPath.toString() + '.objectives._count';
+      // console.log('Incrementing cmi.interactions._count');
+      this.dataModel['cmi.interactions._count'] =
+        Number(this.dataModel['cmi.interactions._count'] ?? 0) + 1;
+      // cmi.interactions.n.objectives._count must be initialized after an interaction is created
+      // console.log(`Initializing ${objectivesCounterForInteraction}`);
+      this.dataModel[objectivesCounterForInteraction] = 0;
+    }
+    if (key.match('cmi.interactions.\\d+.objectives.\\d+.id')) {
+      const interactionPath = key.match('cmi.interactions.\\d+.objectives');
+      const objectivesCounterForInteraction = interactionPath.toString() + '._count';
+      // cmi.interactions.n.objectives._count must be incremented after objective creation
+      // console.log(`Incrementing ${objectivesCounterForInteraction}`);
+      this.dataModel[objectivesCounterForInteraction.toString()] =
+        Number(this.dataModel[objectivesCounterForInteraction.toString()] ?? 0) + 1;
+    }
+    if (key.match('cmi.objectives.\\d+.id')) {
+      // cmi.objectives._count must be incremented after a new objective is created
+      // console.log('Incrementing cmi.objectives._count');
+      this.dataModel['cmi.objectives._count'] =
+        Number(this.dataModel['cmi.objectives._count'] ?? 0) + 1;
+    }
+    return 'true';
+  }
+}
diff --git a/src/app/api/models/scorm-player-context.ts b/src/app/api/models/scorm-player-context.ts
new file mode 100644
index 0000000000..e8eed9b12e
--- /dev/null
+++ b/src/app/api/models/scorm-player-context.ts
@@ -0,0 +1,66 @@
+import {User} from 'src/app/api/models/doubtfire-model';
+
+type DataModelState = 'Uninitialized' | 'Initialized' | 'Terminated';
+
+type DataModelError = Record<number, string>;
+const CMIErrorCodes: DataModelError = {
+  0: 'No Error',
+  101: 'General Exception',
+  102: 'General Initialization Failure',
+  103: 'Already Initialized',
+  104: 'Content Instance Terminated',
+  111: 'General Termination Failure',
+  112: 'Termination Before Initialization',
+  113: 'Termination After Termination',
+  122: 'Retrieve Data Before Initialization',
+  123: 'Retrieve Data After Termination',
+  132: 'Store Data Before Initialization',
+  133: 'Store Data After Termination',
+  142: 'Commit Before Initialization',
+  143: 'Commit After Termination',
+  201: 'General Argument Error',
+  301: 'General Get Failure',
+  351: 'General Set Failure',
+  391: 'General Commit Failure',
+  401: 'Undefined Data Model Element',
+  402: 'Unimplemented Data Model Element',
+  403: 'Data Model Element Value Not Initialized',
+  404: 'Data Model Element Is Read Only',
+  405: 'Data Model Element Is Write Only',
+  406: 'Data Model Element Type Mismatch',
+  407: 'Data Model Element Value Out Of Range',
+  408: 'Data Model Dependency Not Established',
+};
+
+export class ScormPlayerContext {
+  mode: 'browse' | 'normal' | 'review' | 'preview';
+  state: DataModelState;
+
+  private _errorCode: number;
+  get errorCode() {
+    return this._errorCode;
+  }
+  set errorCode(value: number) {
+    this._errorCode = value;
+  }
+
+  getErrorMessage(value: string): string {
+    return CMIErrorCodes[value];
+  }
+
+  projectId: number;
+  taskDefId: number;
+  user: User;
+
+  attemptId: number;
+  learnerName: string;
+  learnerId: number;
+
+  constructor(user: User) {
+    this.user = user;
+    this.learnerId = user.id;
+    this.learnerName = user.firstName + ' ' + user.lastName;
+    this.state = 'Uninitialized';
+    this.errorCode = 0;
+  }
+}
diff --git a/src/app/api/models/sidekiq-job.ts b/src/app/api/models/sidekiq-job.ts
new file mode 100644
index 0000000000..127db2062e
--- /dev/null
+++ b/src/app/api/models/sidekiq-job.ts
@@ -0,0 +1,19 @@
+import {Entity} from 'ngx-entity-service';
+
+export class SidekiqJob extends Entity {
+  id: string;
+  status: 'queued' | 'working' | 'retrying' | 'complete' | 'stopped' | 'failed' | 'interrupted';
+  message?: string;
+
+  pctComplete: number;
+  processedCount?: number;
+  totalCount?: number;
+
+  jobClass: string; // name of the job, eg "StudentImportJob"
+
+  // Custom data unique to each job
+  result?: string;
+
+  createdAt: number;
+  updatedAt: number;
+}
diff --git a/src/app/api/models/staff-note.ts b/src/app/api/models/staff-note.ts
new file mode 100644
index 0000000000..ab3ab60a8a
--- /dev/null
+++ b/src/app/api/models/staff-note.ts
@@ -0,0 +1,55 @@
+import {Entity} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {StaffNoteService} from '../services/staff-note.service';
+import {Project, User, UserService} from './doubtfire-model';
+
+export class StaffNote extends Entity {
+  id: number;
+
+  project: Project;
+  user: User;
+  note: string;
+  replyTo?: StaffNote;
+  replyToId: number;
+  createdAt: Date;
+  updatedAt: Date;
+
+  constructor(data?: Project) {
+    super();
+    if (data) {
+      this.project = data;
+    } else {
+      console.error('Failed to get project');
+    }
+  }
+
+  /**
+   * Provide the project id to allow mapping in service.
+   */
+  public get projectId(): number {
+    return this.project.id;
+  }
+
+  public get authorIsMe(): boolean {
+    const userService: UserService = AppInjector.get(UserService);
+    return this.user.id === userService.currentUser.id;
+  }
+
+  public delete() {
+    const staffNoteService: StaffNoteService = AppInjector.get(StaffNoteService);
+    staffNoteService
+      .delete({projectId: this.project.id, id: this.id}, {cache: this.project.staffNoteCache})
+      .subscribe({
+        next: () => {
+          AppInjector.get(AlertService).error('Successfully deleted staff note', 4000);
+          this.project.staffNoteCount--;
+          staffNoteService.updateStaffNoteReplies(this.project.staffNoteCache.currentValues);
+        },
+        error: (error: Error) => {
+          const message = error.message || 'Unknown error';
+          AppInjector.get(AlertService).error(message, 2000);
+        },
+      });
+  }
+}
diff --git a/src/app/api/models/submission-history.ts b/src/app/api/models/submission-history.ts
new file mode 100644
index 0000000000..d65888b64a
--- /dev/null
+++ b/src/app/api/models/submission-history.ts
@@ -0,0 +1,34 @@
+import {Entity} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {Task} from './task';
+
+export interface SubmissionArchive {
+  id: number;
+  task?: Task;
+  timestamp: Date;
+  timestampString: string;
+  hasSubmissionFiles?: boolean;
+  submissionFilesUrl(): string;
+}
+
+export class SubmissionHistory extends Entity implements SubmissionArchive {
+  id: number;
+  task?: Task;
+  taskId?: number;
+  timestamp: Date;
+  timestampString: string;
+  createdAt?: Date;
+  hasSubmissionFiles?: boolean;
+  overseerAssessmentId?: number;
+
+  constructor(task?: Task) {
+    super();
+    this.task = task;
+  }
+
+  public submissionFilesUrl(): string {
+    const constants = AppInjector.get(DoubtfireConstants);
+    return `${constants.API_URL}/projects/${this.task.project.id}/task_def_id/${this.task.definition.id}/submission_histories/${this.id}/files`;
+  }
+}
diff --git a/src/app/api/models/task-comment/discussion-comment.ts b/src/app/api/models/task-comment/discussion-comment.ts
index 97bb24ee7e..c69968f2b7 100644
--- a/src/app/api/models/task-comment/discussion-comment.ts
+++ b/src/app/api/models/task-comment/discussion-comment.ts
@@ -1,6 +1,6 @@
-import { AppInjector } from 'src/app/app-injector';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { Task, TaskComment } from '../doubtfire-model'
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {Task, TaskComment} from '../doubtfire-model';
 
 /**
  * Create a Discussion Comment, extending the base TaskComment class
diff --git a/src/app/api/models/task-comment/extension-comment.ts b/src/app/api/models/task-comment/extension-comment.ts
index 443bb34200..cc4da4eb0b 100644
--- a/src/app/api/models/task-comment/extension-comment.ts
+++ b/src/app/api/models/task-comment/extension-comment.ts
@@ -1,8 +1,8 @@
-import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { AppInjector } from 'src/app/app-injector';
-import { TaskCommentService } from '../../services/task-comment.service';
-import { TaskComment, TaskStatusEnum, Task } from '../doubtfire-model';
+import {Observable} from 'rxjs';
+import {tap} from 'rxjs/operators';
+import {AppInjector} from 'src/app/app-injector';
+import {TaskCommentService} from '../../services/task-comment.service';
+import {Task, TaskComment, TaskStatusEnum} from '../doubtfire-model';
 
 /**
  * Create a Discussion Comment, extending the base TaskComment class
@@ -46,7 +46,7 @@ export class ExtensionComment extends TaskComment {
 
         tc.project.updateBurndownChart();
         tc.project.calcTopTasks(); // Sort the task list again
-      })
+      }),
     );
   }
 
diff --git a/src/app/api/models/task-comment/scorm-comment.ts b/src/app/api/models/task-comment/scorm-comment.ts
new file mode 100644
index 0000000000..b15a2c50c8
--- /dev/null
+++ b/src/app/api/models/task-comment/scorm-comment.ts
@@ -0,0 +1,12 @@
+import {Task, TaskComment, TestAttempt} from '../doubtfire-model';
+
+export class ScormComment extends TaskComment {
+  testAttempt: TestAttempt;
+
+  // UI rendering data
+  lastInScormSeries: boolean = false;
+
+  constructor(task: Task) {
+    super(task);
+  }
+}
diff --git a/src/app/api/models/task-comment/scorm-extension-comment.ts b/src/app/api/models/task-comment/scorm-extension-comment.ts
new file mode 100644
index 0000000000..3f54d1c8ae
--- /dev/null
+++ b/src/app/api/models/task-comment/scorm-extension-comment.ts
@@ -0,0 +1,33 @@
+import {Observable} from 'rxjs';
+import {tap} from 'rxjs/operators';
+import {AppInjector} from 'src/app/app-injector';
+import {TaskCommentService} from '../../services/task-comment.service';
+import {Task, TaskComment} from '../doubtfire-model';
+
+export class ScormExtensionComment extends TaskComment {
+  assessed: boolean;
+  granted: boolean;
+  dateAssessed: Date;
+  taskScormExtensions: number;
+
+  constructor(task: Task) {
+    super(task);
+  }
+
+  private assessScormExtension(): Observable<TaskComment> {
+    const tcs: TaskCommentService = AppInjector.get(TaskCommentService);
+    return tcs.assessScormExtension(this).pipe(
+      tap((tc: TaskComment) => {
+        const scormExtension: ScormExtensionComment = tc as ScormExtensionComment;
+
+        const task = tc.task;
+        task.scormExtensions = scormExtension.taskScormExtensions;
+      }),
+    );
+  }
+
+  public grant(): Observable<TaskComment> {
+    this.granted = true;
+    return this.assessScormExtension();
+  }
+}
diff --git a/src/app/api/models/task-comment/task-comment.ts b/src/app/api/models/task-comment/task-comment.ts
index 03b7ea4559..d1c74abd86 100644
--- a/src/app/api/models/task-comment/task-comment.ts
+++ b/src/app/api/models/task-comment/task-comment.ts
@@ -1,12 +1,13 @@
-import { AppInjector } from 'src/app/app-injector';
-import { Entity } from 'ngx-entity-service';
-import { Project, Task, TaskCommentService, User } from 'src/app/api/models/doubtfire-model';
-import { UserService } from '../../services/user.service';
-import API_URL from 'src/app/config/constants/apiURL';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {Entity} from 'ngx-entity-service';
+import {Project, Task, TaskCommentService, User} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {UserService} from '../../services/user.service';
 
 export class TaskComment extends Entity {
+  private static readonly EDIT_WINDOW_MS = 10 * 60 * 1000;
+
   // Linked objects
   task: Task;
   originalComment: TaskComment = null;
@@ -19,7 +20,7 @@ export class TaskComment extends Entity {
   recipient: User;
   createdAt: Date;
   recipientReadTime: string;
-  commentType: string = "text";
+  commentType: string = 'text';
   isNew: boolean;
   replyToId: number;
 
@@ -44,12 +45,12 @@ export class TaskComment extends Entity {
   }
 
   public get authorIsMe(): boolean {
-    const userService: any = AppInjector.get(UserService);
+    const userService: UserService = AppInjector.get(UserService);
     return this.author.id === userService.currentUser.id;
   }
 
   public get recipientIsMe(): boolean {
-    const userService: any = AppInjector.get(UserService);
+    const userService: UserService = AppInjector.get(UserService);
     return this.recipient.id === userService.currentUser.id;
   }
 
@@ -57,31 +58,61 @@ export class TaskComment extends Entity {
     return ['text', 'discussion', 'audio', 'image', 'pdf'].includes(this.commentType);
   }
 
+  public get isStaffAuthored(): boolean {
+    return (
+      this.task?.unit?.staff?.some((unitRole) => unitRole.user.id === this.author?.id) ?? false
+    );
+  }
+
+  public get isAutomated(): boolean {
+    if (!this.isBubbleComment) {
+      return true;
+    }
+
+    return this.text?.trim().startsWith('**Automated Message:**') ?? false;
+  }
+
+  public get isManualFeedback(): boolean {
+    return this.isStaffAuthored && !this.isAutomated;
+  }
+
   public get project(): Project {
     return this.task.project;
   }
 
   public get currentUserCanEdit() {
+    return (
+      this.authorIsMe &&
+      this.commentType === 'text' &&
+      this.createdAt instanceof Date &&
+      new Date().getTime() - this.createdAt.getTime() <= TaskComment.EDIT_WINDOW_MS
+    );
+  }
+
+  public get currentUserCanDelete() {
     return this.authorIsMe || this.project?.unit.currentUserIsStaff;
   }
 
   public delete() {
     const tcs: TaskCommentService = AppInjector.get(TaskCommentService);
     tcs
-      .delete({ projectId: this.project.id, taskDefinitionId: this.task.definition.id, id: this.id }, { cache: this.task.commentCache })
+      .delete(
+        {projectId: this.project.id, taskDefinitionId: this.task.definition.id, id: this.id},
+        {cache: this.task.commentCache},
+      )
       .subscribe({
-        next: (response: object) => {
+        next: (_response: object) => {
           // this.task.comments = this.task.comments.filter((e: TaskComment) => e.id !== this.id);
           this.task.refreshCommentData();
         },
-        error: (error: any) => {
-          AppInjector.get(AlertService).error(error?.message || error || 'Unknown error', 2000);
-        }
-      }
-      );
+        error: (error: Error) => {
+          const message = error.message || 'Unknown error';
+          AppInjector.get(AlertService).error(message, 2000);
+        },
+      });
   }
 
   public get attachmentUrl(): string {
-    return `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${this.project.id}/task_def_id/${this.task.definition.id}/comments/${this.id}?as_attachment=false`
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${this.project.id}/task_def_id/${this.task.definition.id}/comments/${this.id}?as_attachment=false`;
   }
 }
diff --git a/src/app/api/models/task-definition.ts b/src/app/api/models/task-definition.ts
index 1b49a2e856..823a5bb8dd 100644
--- a/src/app/api/models/task-definition.ts
+++ b/src/app/api/models/task-definition.ts
@@ -1,14 +1,36 @@
-import { HttpClient } from '@angular/common/http';
-import { Entity, EntityMapping } from 'ngx-entity-service';
-import { Observable, tap } from 'rxjs';
-import { AppInjector } from 'src/app/app-injector';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { Grade, GroupSet, TutorialStream, Unit } from './doubtfire-model';
-import { TaskDefinitionService } from '../services/task-definition.service';
+import {Entity, EntityCache, EntityMapping} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Observable, tap} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {TaskDefinitionService} from '../services/task-definition.service';
+import {DiscussionPrompt} from './discussion-prompt';
+import {GroupSet, LearningOutcome, Project, TutorialStream, Unit} from './doubtfire-model';
+import {Task} from './doubtfire-model';
+import {OverseerStep} from './overseer/overseer-step';
+import {TaskPrerequisite} from './task-prerequisite';
+
+export interface UploadRequirement {
+  key: string;
+  name: string;
+  type: string;
+  tiiCheck?: boolean;
+  tiiPct?: number;
+  submissionHistory?: boolean;
+}
 
-export type UploadRequirement = { key: string; name: string; type: string; tiiCheck?: boolean; tiiPct?: number };
+export interface SimilarityCheck {
+  key: string;
+  type: string;
+  pattern: string;
+}
 
-export type SimilarityCheck = { key: string; type: string; pattern: string };
+export interface TaskDefinitionGradeDueDate {
+  targetGrade: number;
+  targetDueDate?: Date;
+  startDate?: Date;
+}
 
 export class TaskDefinition extends Entity {
   id: number;
@@ -21,7 +43,7 @@ export class TaskDefinition extends Entity {
   targetDate: Date;
   dueDate: Date;
   startDate: Date;
-  uploadRequirements: UploadRequirement[];
+  uploadRequirements: UploadRequirement[] = [];
   tutorialStream: TutorialStream = null;
   plagiarismChecks: SimilarityCheck[] = [];
   plagiarismReportUrl: string;
@@ -31,12 +53,39 @@ export class TaskDefinition extends Entity {
   groupSet: GroupSet = null;
   hasTaskSheet: boolean;
   hasTaskResources: boolean;
+  scormEnabled: boolean;
+  hasScormData: boolean;
+  scormAllowReview: boolean;
+  scormBypassTest: boolean;
+  scormTimeDelayEnabled: boolean;
+  scormAttemptLimit: number = 0;
   hasTaskAssessmentResources: boolean;
+  hasTaskAssessmentScript: boolean;
   isGraded: boolean;
   maxQualityPts: number;
   overseerImageId: number;
   assessmentEnabled: boolean;
-  mossLanguage: string = 'moss c';
+  similarityLanguage: string = 'c';
+  hasJplagReport: boolean;
+  assessInPortfolioOnly: boolean;
+  requiresDiscussion: boolean;
+  useResourcesForJplagBaseCode: boolean;
+  lockAssessmentsToTutorialStream: boolean;
+  discussionPromptsCount: number;
+  overseerResourceFiles: string[] = [];
+
+  gradeDueDates: TaskDefinitionGradeDueDate[] = [];
+
+  public readonly taskPrerequisitesCache: EntityCache<TaskPrerequisite> =
+    new EntityCache<TaskPrerequisite>();
+
+  public readonly discussionPromptsCache: EntityCache<DiscussionPrompt> =
+    new EntityCache<DiscussionPrompt>();
+
+  public readonly learningOutcomesCache: EntityCache<LearningOutcome> =
+    new EntityCache<LearningOutcome>();
+
+  public readonly overseerStepsCache: EntityCache<OverseerStep> = new EntityCache<OverseerStep>();
 
   readonly unit: Unit;
 
@@ -67,7 +116,7 @@ export class TaskDefinition extends Entity {
           entity: this,
           cache: this.unit.taskDefinitionCache,
           constructorParams: this.unit,
-        }
+        },
       );
     } else {
       return svc.update(
@@ -75,7 +124,7 @@ export class TaskDefinition extends Entity {
           unitId: this.unit.id,
           id: this.id,
         },
-        { entity: this }
+        {entity: this},
       );
     }
   }
@@ -105,6 +154,21 @@ export class TaskDefinition extends Entity {
     return this.originalSaveData != JSON.stringify(this.toJson(mapping));
   }
 
+  public refresh(): void {
+    const alerts = AppInjector.get(AlertService);
+    AppInjector.get(TaskDefinitionService)
+      .fetch({
+        unitId: this.unit.id,
+        id: this.id,
+      })
+      .subscribe({
+        next: (taskDefinition) => {
+          console.log(taskDefinition.name);
+        },
+        error: (message) => alerts.error(message, 6000),
+      });
+  }
+
   public get isNew(): boolean {
     return !this.id;
   }
@@ -117,12 +181,60 @@ export class TaskDefinition extends Entity {
     return this.targetDate;
   }
 
+  public gradeTargetDate(targetGrade: number): Date | null {
+    return this.gradeDueDates.find((date) => date.targetGrade === targetGrade)?.targetDueDate;
+  }
+
+  public gradeStartDate(targetGrade: number): Date | null {
+    return this.gradeDueDates.find((date) => date.targetGrade === targetGrade)?.startDate;
+  }
+
+  public setGradeTargetDate(targetGrade: number, value: Date | null): void {
+    if (targetGrade === 0) {
+      this.targetDate = value;
+      return;
+    }
+
+    this.gradeDueDateFor(targetGrade).targetDueDate = value;
+  }
+
+  public setGradeStartDate(targetGrade: number, value: Date | null): void {
+    if (targetGrade === 0) {
+      this.startDate = value;
+      return;
+    }
+
+    this.gradeDueDateFor(targetGrade).startDate = value;
+  }
+
+  private gradeDueDateFor(targetGrade: number): TaskDefinitionGradeDueDate {
+    let gradeDueDate = this.gradeDueDates.find((date) => date.targetGrade === targetGrade);
+
+    if (!gradeDueDate) {
+      gradeDueDate = {targetGrade};
+      this.gradeDueDates.push(gradeDueDate);
+    }
+
+    return gradeDueDate;
+  }
+
   public localDeadlineDate(): Date {
     return this.dueDate;
   }
 
+  public get dueWeek(): number {
+    const startDate = this.unit.startDate;
+    const dueDate = this.localDueDate() || this.unit.endDate;
+
+    const diffInMs = dueDate.getTime() - startDate.getTime();
+    return Math.ceil(diffInMs / (1000 * 60 * 60 * 24 * 7)); // Convert ms to weeks
+  }
+
   public matches(text: string): boolean {
-    return this.abbreviation.toLowerCase().indexOf(text) !== -1 || this.name.toLowerCase().indexOf(text) !== -1;
+    return (
+      this.abbreviation.toLowerCase().indexOf(text) !== -1 ||
+      this.name.toLowerCase().indexOf(text) !== -1
+    );
   }
 
   /**
@@ -152,15 +264,39 @@ export class TaskDefinition extends Entity {
     }`;
   }
 
+  public getScormDataUrl(asAttachment: boolean = false) {
+    const constants = AppInjector.get(DoubtfireConstants);
+    return `${constants.API_URL}/units/${this.unit.id}/task_definitions/${this.id}/scorm_data.json${
+      asAttachment ? '?as_attachment=true' : ''
+    }`;
+  }
+
+  public getOutcomeBatchUploadUrl(): string {
+    const constants = AppInjector.get(DoubtfireConstants);
+    return `${constants.API_URL}/task_definitions/${this.id}/outcomes/csv`;
+  }
+
+  public getFeedbackTemplateBatchUploadUrl(): string {
+    const constants = AppInjector.get(DoubtfireConstants);
+    return `${constants.API_URL}/task_definitions/${this.id}/feedback_chips/csv`;
+  }
+
+  /**
+   * Open the SCORM test in a new tab - using preview mode.
+   */
+  public previewScormTest(): void {
+    window.open(`/task_def_id/${this.id}/preview-scorm`, '_blank');
+  }
+
   public get targetGradeText(): string {
-    return Grade.GRADES[this.targetGrade];
+    return this.unit.gradeLabel(this.targetGrade);
   }
 
   public hasPlagiarismCheck(): boolean {
     return this.plagiarismChecks?.length > 0;
   }
 
-  public get needsMoss(): boolean {
+  public get needsJplag(): boolean {
     return this.uploadRequirements.some((upreq) => upreq.type === 'code' && upreq.tiiCheck);
   }
 
@@ -176,32 +312,67 @@ export class TaskDefinition extends Entity {
     }/task_resources`;
   }
 
-  public get taskAssessmentResourcesUploadUrl(): string {
+  public get scormDataUploadUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.unit.id}/task_definitions/${
+      this.id
+    }/scorm_data`;
+  }
+
+  public get taskPrerequisiteUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.unit.id}/task_definitions/${
+      this.id
+    }/prerequisites`;
+  }
+
+  public get taskOverseerResourcesUploadUrl(): string {
     return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.unit.id}/task_definitions/${
       this.id
     }/task_assessment_resources`;
   }
 
-  public getTaskAssessmentResourcesUrl(): string {
+  public getOverseerResourcesUrl(): string {
     return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.unit.id}/task_definitions/${
       this.id
     }/task_assessment_resources.json`;
   }
 
-  public deleteTaskSheet(): Observable<any> {
+  public get taskOverseerExecutionScriptUrl() {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.unit.id}/task_definitions/${this.id}/overseer_script`;
+  }
+
+  public getJplagReportUrl() {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.unit.id}/task_definitions/${this.id}/jplag_report`;
+  }
+
+  public deleteTaskSheet(): Observable<void> {
     const httpClient = AppInjector.get(HttpClient);
-    return httpClient.delete(this.taskSheetUploadUrl).pipe(tap(() => (this.hasTaskSheet = false)));
+    return httpClient
+      .delete<void>(this.taskSheetUploadUrl)
+      .pipe(tap(() => (this.hasTaskSheet = false)));
+  }
+
+  public deleteTaskResources(): Observable<void> {
+    const httpClient = AppInjector.get(HttpClient);
+    return httpClient
+      .delete<void>(this.taskResourcesUploadUrl)
+      .pipe(tap(() => (this.hasTaskResources = false)));
   }
 
-  public deleteTaskResources(): Observable<any> {
+  public deleteScormData(): Observable<void> {
     const httpClient = AppInjector.get(HttpClient);
-    return httpClient.delete(this.taskResourcesUploadUrl).pipe(tap(() => (this.hasTaskResources = false)));
+    return httpClient
+      .delete<void>(this.scormDataUploadUrl)
+      .pipe(tap(() => (this.hasScormData = false)));
   }
 
-  public deleteTaskAssessmentResources(): Observable<any> {
+  public deleteOverseerResources(): Observable<void> {
     const httpClient = AppInjector.get(HttpClient);
     return httpClient
-      .delete(this.taskAssessmentResourcesUploadUrl)
+      .delete<void>(this.taskOverseerResourcesUploadUrl)
       .pipe(tap(() => (this.hasTaskAssessmentResources = false)));
   }
+
+  public projectTask(project?: Project): Task | undefined {
+    return project?.tasks?.find((p) => p.definition.id === this.id);
+  }
 }
diff --git a/src/app/api/models/task-outcome-alignment.ts b/src/app/api/models/task-outcome-alignment.ts
index 62414b5245..0fcf222056 100644
--- a/src/app/api/models/task-outcome-alignment.ts
+++ b/src/app/api/models/task-outcome-alignment.ts
@@ -1,6 +1,6 @@
-import { Entity } from 'ngx-entity-service';
-import { Project, Unit, TaskDefinition, Task } from './doubtfire-model';
-import { LearningOutcome } from './learning-outcome';
+import {Entity} from 'ngx-entity-service';
+import {Project, Task, TaskDefinition, Unit} from './doubtfire-model';
+import {LearningOutcome} from './learning-outcome';
 
 export class TaskOutcomeAlignment extends Entity {
   public within: Unit | Project;
@@ -18,7 +18,7 @@ export class TaskOutcomeAlignment extends Entity {
   }
 
   public get unit(): Unit {
-    if ( this.within instanceof Unit) {
+    if (this.within instanceof Unit) {
       return this.within;
     } else {
       return this.within.unit;
@@ -26,7 +26,7 @@ export class TaskOutcomeAlignment extends Entity {
   }
 
   public get project(): Project {
-    if ( this.within instanceof Project) {
+    if (this.within instanceof Project) {
       return this.within;
     }
 
diff --git a/src/app/api/models/task-prerequisite.ts b/src/app/api/models/task-prerequisite.ts
new file mode 100644
index 0000000000..4e26df0917
--- /dev/null
+++ b/src/app/api/models/task-prerequisite.ts
@@ -0,0 +1,95 @@
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {Observable, tap} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TaskPrerequisiteService} from '../services/task-prerequisite.service';
+import {Project, TaskDefinition, TaskStatus, TaskStatusEnum} from './doubtfire-model';
+
+export interface TaskPrerequisiteData {
+  taskDefinitionId: number;
+  prerequisiteId: number;
+  taskStatus: TaskStatusEnum;
+}
+
+export class TaskPrerequisite extends Entity {
+  id: number;
+
+  prerequisite: TaskDefinition;
+  prerequisiteId: number;
+  taskStatusId: number;
+
+  // Minimum required status
+  taskStatus: TaskStatusEnum;
+
+  // Parent
+  taskDefinition: TaskDefinition;
+  taskDefinitionId: number;
+
+  public readonly STATES: Partial<Record<TaskStatusEnum, number>> = {
+    ready_for_feedback: 1,
+    assess_in_portfolio: 1,
+    discuss: 2,
+    attention_required: 0,
+    demonstrate: 2,
+    complete: 3,
+  };
+
+  constructor(json: TaskPrerequisiteData) {
+    super();
+    this.taskDefinitionId = json.taskDefinitionId;
+    this.prerequisiteId = json.prerequisiteId;
+    this.taskStatus = json.taskStatus;
+  }
+
+  public toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+    return {
+      task_prerequisite: super.toJson(mappingData, ignoreKeys),
+    };
+  }
+
+  public requiredStatusLabel() {
+    return TaskStatus.STATUS_LABELS.get(this.taskStatus);
+  }
+
+  public hasMetRequiredState(project: Project) {
+    if (!this.prerequisite || !project) {
+      return false;
+    }
+    const prerequisiteTask = this.prerequisite.projectTask(project);
+    if (!prerequisiteTask) {
+      return false;
+    }
+    const currentStatus = prerequisiteTask.status;
+    const requiredStatus = this.taskStatus;
+    if (this.STATES[currentStatus] >= this.STATES[requiredStatus]) {
+      return true;
+    }
+    return false;
+  }
+
+  public delete(): Observable<void> {
+    const taskPrerequisiteService: TaskPrerequisiteService =
+      AppInjector.get(TaskPrerequisiteService);
+
+    return taskPrerequisiteService
+      .delete<void>(
+        {
+          unitId: this.taskDefinition.unit.id,
+          taskDefId: this.taskDefinitionId,
+          prerequisiteId: this.prerequisiteId,
+        },
+        {cache: this.taskDefinition.taskPrerequisitesCache},
+      )
+      .pipe(
+        tap({
+          next: () => {
+            AppInjector.get(AlertService).error('Successfully deleted prerequisite', 4000);
+            this.taskDefinition.taskPrerequisitesCache.delete(this.id);
+          },
+          error: (error) => {
+            AppInjector.get(AlertService).error(error?.message || error || 'Unknown error', 2000);
+          },
+        }),
+      );
+  }
+}
diff --git a/src/app/api/models/task-similarity.ts b/src/app/api/models/task-similarity.ts
index c3a72e556f..fa925f91ca 100644
--- a/src/app/api/models/task-similarity.ts
+++ b/src/app/api/models/task-similarity.ts
@@ -1,27 +1,33 @@
-import { Entity } from 'ngx-entity-service';
-import { AppInjector } from 'src/app/app-injector';
-import { Task, TaskSimilarityService } from './doubtfire-model';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { Observable } from 'rxjs';
+import {Entity} from 'ngx-entity-service';
+import {Observable} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {Task, TaskSimilarityService, User} from './doubtfire-model';
 
 export enum TaskSimilarityType {
+  Jplag = 'JplagTaskSimilarity',
   Moss = 'MossTaskSimilarity',
   TurnItIn = 'TiiTaskSimilarity',
 }
 
 /**
  * Represents teh format for a part of a similarity report for a task.
- * This is html for moss, and pdf for turn it in.
+ *
+ * HTML for moss
+ * PDF for TurnItIn
+ * jplag for JPlag
  */
 export enum TaskSimilarityPartFormat {
   Html = 'html',
   Pdf = 'pdf',
+  Jplag = 'jplag',
 }
 
 export class TaskSimilarityPart {
   idx: number;
   format: TaskSimilarityPartFormat;
   description: string;
+  panelOpenState?: boolean;
 }
 
 /**
@@ -36,6 +42,8 @@ export class TaskSimilarity extends Entity {
   parts: TaskSimilarityPart[];
   task: Task;
   readyForViewer: boolean = false;
+  otherTask?: Task;
+  otherStudent?: User;
 
   constructor(task: Task) {
     super();
@@ -62,6 +70,8 @@ export class TaskSimilarity extends Entity {
 
   public get friendlyTypeName(): string {
     switch (this.type) {
+      case TaskSimilarityType.Jplag:
+        return 'JPLAG';
       case TaskSimilarityType.Moss:
         return 'MOSS';
       case TaskSimilarityType.TurnItIn:
diff --git a/src/app/api/models/task-status.ts b/src/app/api/models/task-status.ts
index 0ab0f8f2d9..aa164b6301 100644
--- a/src/app/api/models/task-status.ts
+++ b/src/app/api/models/task-status.ts
@@ -1,4 +1,4 @@
-import { Task } from './task';
+import {Task} from './task';
 
 export type TaskStatusEnum =
   | 'not_started'
@@ -12,15 +12,19 @@ export type TaskStatusEnum =
   | 'demonstrate'
   | 'complete'
   | 'fail'
-  | 'time_exceeded';
+  | 'time_exceeded'
+  | 'assess_in_portfolio'
+  | 'attention_required'
+  | 'rediscuss';
 
-export type TaskStatusUiData = {
+export interface TaskStatusUiData {
   status: TaskStatusEnum;
   icon: string;
+  materialIcon: string;
   label: string;
   class: string;
-  help: { detail: string; reason: string; action: string };
-};
+  help: {detail: string; reason: string; action: string};
+}
 
 export class TaskStatus {
   public static readonly STATUS_KEYS: TaskStatusEnum[] = [
@@ -36,6 +40,29 @@ export class TaskStatus {
     'complete',
     'fail',
     'time_exceeded',
+    'assess_in_portfolio',
+    'attention_required',
+    'rediscuss',
+  ];
+
+  // Student-facing lifecycle order for an anonymous peer distribution. This
+  // differs from persistence/API order, which is not intended as presentation.
+  public static readonly PEER_PROGRESS_DISPLAY_ORDER: TaskStatusEnum[] = [
+    'not_started',
+    'working_on_it',
+    'need_help',
+    'ready_for_feedback',
+    'fix_and_resubmit',
+    'redo',
+    'attention_required',
+    'discuss',
+    'rediscuss',
+    'demonstrate',
+    'assess_in_portfolio',
+    'complete',
+    'feedback_exceeded',
+    'time_exceeded',
+    'fail',
   ];
 
   public static readonly VALID_TOP_TASKS: TaskStatusEnum[] = [
@@ -46,7 +73,9 @@ export class TaskStatus {
     'fix_and_resubmit',
     'ready_for_feedback',
     'discuss',
+    'attention_required',
     'demonstrate',
+    'rediscuss',
   ];
 
   public static readonly SUBMITTED_STATUSES: TaskStatusEnum[] = [
@@ -57,15 +86,40 @@ export class TaskStatus {
     'complete',
     'fail',
     'time_exceeded',
+    'assess_in_portfolio',
+    'attention_required',
+    'rediscuss',
   ];
 
-  public static readonly FINAL_STATUSES: TaskStatusEnum[] = ['complete', 'fail', 'feedback_exceeded', 'time_exceeded'];
+  public static readonly FINAL_STATUSES: TaskStatusEnum[] = [
+    'complete',
+    'fail',
+    'feedback_exceeded',
+    'time_exceeded',
+    'assess_in_portfolio',
+  ];
 
-  public static readonly GRADEABLE_STATUSES: TaskStatusEnum[] = ['fail', 'discuss', 'demonstrate', 'complete'];
+  public static readonly GRADEABLE_STATUSES: TaskStatusEnum[] = [
+    'fail',
+    'discuss',
+    'rediscuss',
+    'demonstrate',
+    'complete',
+  ];
 
-  public static readonly TO_BE_WORKED_ON: TaskStatusEnum[] = ['not_started', 'redo', 'need_help', 'working_on_it'];
+  public static readonly TO_BE_WORKED_ON: TaskStatusEnum[] = [
+    'not_started',
+    'redo',
+    'need_help',
+    'working_on_it',
+  ];
 
-  public static readonly DISCUSSION_STATES: TaskStatusEnum[] = ['discuss', 'demonstrate'];
+  public static readonly DISCUSSION_STATES: TaskStatusEnum[] = [
+    'discuss',
+    'attention_required',
+    'demonstrate',
+    'rediscuss',
+  ];
 
   public static readonly STATE_THAT_ALLOWS_EXTENSION: TaskStatusEnum[] = [
     'not_started',
@@ -81,6 +135,7 @@ export class TaskStatus {
     'demonstrate',
     'ready_for_feedback',
     'discuss',
+    'rediscuss',
     'complete',
     'time_exceeded',
     'fail',
@@ -89,7 +144,11 @@ export class TaskStatus {
     'redo',
   ];
 
-  public static readonly SUBMITTABLE_STATUSES: TaskStatusEnum[] = ['ready_for_feedback', 'need_help'];
+  public static readonly SUBMITTABLE_STATUSES: TaskStatusEnum[] = [
+    'ready_for_feedback',
+    'need_help',
+    'assess_in_portfolio',
+  ];
 
   public static readonly MARKED_STATUSES: TaskStatusEnum[] = [
     'redo',
@@ -97,11 +156,26 @@ export class TaskStatus {
     'fix_and_resubmit',
     'feedback_exceeded',
     'discuss',
+    'rediscuss',
     'demonstrate',
     'complete',
+    'attention_required',
+  ];
+
+  public static readonly FEEDBACK_TEMPLATE_STATUSES: TaskStatusEnum[] = [
+    'complete',
+    'discuss',
+    'rediscuss',
+    'fix_and_resubmit',
+    'redo',
+    'feedback_exceeded',
+    'attention_required',
   ];
 
-  public static readonly LEARNING_WEIGHT: Map<TaskStatusEnum, number> = new Map<TaskStatusEnum, number>([
+  public static readonly LEARNING_WEIGHT: Map<TaskStatusEnum, number> = new Map<
+    TaskStatusEnum,
+    number
+  >([
     ['fail', 0.0],
     ['not_started', 0.0],
     ['working_on_it', 0.0],
@@ -111,12 +185,18 @@ export class TaskStatus {
     ['fix_and_resubmit', 0.3],
     ['ready_for_feedback', 0.5],
     ['discuss', 0.8],
+    ['rediscuss', 0.8],
     ['demonstrate', 0.8],
     ['complete', 1.0],
     ['time_exceeded', 0.3],
+    ['assess_in_portfolio', 1.0],
+    ['attention_required', 0.1],
   ]);
 
-  public static readonly STATUS_ACRONYM: Map<TaskStatusEnum, string> = new Map<TaskStatusEnum, string>([
+  public static readonly STATUS_ACRONYM: Map<TaskStatusEnum, string> = new Map<
+    TaskStatusEnum,
+    string
+  >([
     ['ready_for_feedback', 'RFF'],
     ['not_started', 'NOS'],
     ['working_on_it', 'WRK'],
@@ -125,10 +205,13 @@ export class TaskStatus {
     ['feedback_exceeded', 'DNR'],
     ['fix_and_resubmit', 'FIX'],
     ['discuss', 'DIS'],
+    ['rediscuss', 'RDS'],
     ['demonstrate', 'DEM'],
     ['complete', 'COM'],
     ['fail', 'FAL'],
     ['time_exceeded', 'TIE'],
+    ['assess_in_portfolio', 'AIP'],
+    ['attention_required', 'AR'],
   ]);
 
   // Which status should not show up in the task status drop down... for students
@@ -142,16 +225,19 @@ export class TaskStatus {
     ['ready_for_feedback', []],
     ['complete', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
     ['discuss', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
+    ['rediscuss', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
     ['demonstrate', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
     ['fix_and_resubmit', []],
     ['redo', []],
     ['feedback_exceeded', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
     ['time_exceeded', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
     ['fail', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
+    ['assess_in_portfolio', ['not_started']],
+    ['attention_required', ['ready_for_feedback', 'not_started', 'working_on_it', 'need_help']],
   ]);
 
-  public static readonly STATUS_LABELS = new Map<TaskStatusEnum, string>([
-    ['ready_for_feedback', 'Ready for Feedback'],
+  public static readonly STATUS_LABELS: Map<TaskStatusEnum, string> = new Map([
+    ['ready_for_feedback', 'Awaiting Feedback'],
     ['not_started', 'Not Started'],
     ['working_on_it', 'Working On It'],
     ['need_help', 'Need Help'],
@@ -159,29 +245,72 @@ export class TaskStatus {
     ['feedback_exceeded', 'Feedback Exceeded'],
     ['fix_and_resubmit', 'Resubmit'],
     ['discuss', 'Discuss'],
+    ['rediscuss', 'Rediscuss'],
     ['demonstrate', 'Demonstrate'],
     ['complete', 'Complete'],
     ['fail', 'Fail'],
     ['time_exceeded', 'Time Exceeded'],
+    ['assess_in_portfolio', 'Assess in Portfolio'],
+    ['attention_required', 'Attention Required'],
   ]);
 
-  public static readonly STATUS_ICONS = new Map<TaskStatusEnum, string>([
-    ['ready_for_feedback', 'fa fa-thumbs-o-up'],
-    ['not_started', 'fa fa-pause'],
-    ['working_on_it', 'fa fa-bolt'],
-    ['need_help', 'fa fa-question-circle'],
-    ['redo', 'fa fa-refresh'],
-    ['feedback_exceeded', 'fa fa-low-vision'],
-    ['fix_and_resubmit', 'fa fa-wrench'],
-    ['discuss', 'fa fa-commenting'],
-    ['demonstrate', 'fa fa-commenting'],
-    ['complete', 'fa fa-check'],
-    ['fail', 'fa fa-times'],
-    ['time_exceeded', 'fa fa-clock-o'],
+  public static readonly STATUS_NAME_TO_KEY: Map<string, TaskStatusEnum> = new Map([
+    ['Ready for Feedback', 'ready_for_feedback'],
+    ['Awaiting Feedback', 'ready_for_feedback'],
+    ['Not Started', 'not_started'],
+    ['Working On It', 'working_on_it'],
+    ['Need Help', 'need_help'],
+    ['Redo', 'redo'],
+    ['Feedback Exceeded', 'feedback_exceeded'],
+    ['Resubmit', 'fix_and_resubmit'],
+    ['Discuss', 'discuss'],
+    ['Rediscuss', 'rediscuss'],
+    ['Re-discuss', 'rediscuss'],
+    ['Demonstrate', 'demonstrate'],
+    ['Complete', 'complete'],
+    ['Fail', 'fail'],
+    ['Time Exceeded', 'time_exceeded'],
+  ]);
+
+  public static readonly STATUS_ICONS: Map<TaskStatusEnum, string> = new Map([
+    ['ready_for_feedback', 'thumb_up'],
+    ['not_started', 'pause'],
+    ['working_on_it', 'bolt'],
+    ['need_help', 'help'],
+    ['redo', 'undo'],
+    ['feedback_exceeded', 'visibility_off'],
+    ['fix_and_resubmit', 'construction'],
+    ['discuss', 'question_answer'],
+    ['rediscuss', 'feedback'],
+    ['demonstrate', 'record_voice_over'],
+    ['complete', 'done_all'],
+    ['fail', 'close'],
+    ['time_exceeded', 'schedule'],
+    ['assess_in_portfolio', 'folder_open'],
+    ['attention_required', 'sms_failed'],
+  ]);
+
+  // Material icons used by newer UI elements.
+  public static readonly STATUS_MATERIAL_ICONS: Map<TaskStatusEnum, string> = new Map([
+    ['ready_for_feedback', 'thumb_up_off_alt'],
+    ['not_started', 'pause'],
+    ['working_on_it', 'bolt'],
+    ['need_help', 'help'],
+    ['redo', 'undo'],
+    ['feedback_exceeded', 'visibility_off'],
+    ['fix_and_resubmit', 'construction'],
+    ['discuss', 'question_answer'],
+    ['rediscuss', 'feedback'],
+    ['demonstrate', 'record_voice_over'],
+    ['complete', 'done'],
+    ['fail', 'close'],
+    ['time_exceeded', 'schedule'],
+    ['assess_in_portfolio', 'rate_review'],
+    ['attention_required', 'sms_failed'],
   ]);
 
   // Please make sure this matches task-status-colors.less
-  public static readonly STATUS_COLORS = new Map<TaskStatusEnum, string>([
+  public static readonly STATUS_COLORS: Map<TaskStatusEnum, string> = new Map([
     ['ready_for_feedback', '#0079D8'],
     ['not_started', '#CCCCCC'],
     ['working_on_it', '#EB8F06'],
@@ -190,13 +319,16 @@ export class TaskStatus {
     ['feedback_exceeded', '#d46b54'],
     ['redo', '#804000'],
     ['discuss', '#31b0d5'],
+    ['rediscuss', '#126352'],
     ['demonstrate', '#428bca'],
     ['complete', '#5BB75B'],
     ['fail', '#d93713'],
     ['time_exceeded', '#d93713'],
+    ['assess_in_portfolio', '#f2d85c'],
+    ['attention_required', '#f1814d'],
   ]);
 
-  public static readonly STATUS_SEQ = new Map<TaskStatusEnum, number>([
+  public static readonly STATUS_SEQ: Map<TaskStatusEnum, number> = new Map([
     ['not_started', 1],
     ['fail', 2],
     ['feedback_exceeded', 3],
@@ -209,26 +341,42 @@ export class TaskStatus {
     ['discuss', 10],
     ['demonstrate', 11],
     ['complete', 12],
+    ['assess_in_portfolio', 13],
+    ['attention_required', 14],
+    ['rediscuss', 15],
   ]);
 
   public static readonly SWITCHABLE_STATES = {
     student: ['not_started', 'working_on_it', 'need_help', 'ready_for_feedback'],
-    tutor: ['complete', 'discuss', 'demonstrate', 'fix_and_resubmit', 'redo', 'feedback_exceeded', 'fail'],
+    tutor: [
+      'complete',
+      'discuss',
+      'rediscuss',
+      'attention_required',
+      'demonstrate',
+      'fix_and_resubmit',
+      'redo',
+      'feedback_exceeded',
+      'fail',
+      'assess_in_portfolio',
+    ],
   };
 
   // detail = in a brief context to the student
   // reason = reason for this status
   // action = action student can take
-  public static readonly HELP_DESCRIPTIONS = new Map<
+  public static readonly HELP_DESCRIPTIONS: Map<
     TaskStatusEnum,
-    { detail: string; reason: string; action: string }
-  >([
+    {detail: string; reason: string; action: string}
+  > = new Map([
     [
       'ready_for_feedback',
       {
         detail: 'Submitted this task for feedback',
-        reason: 'You have finished working on the task and have uploaded it for your tutor to assess.',
-        action: 'No further action is required. Your tutor will change this task status once they have assessed it.',
+        reason:
+          'You have finished working on the task and have uploaded it for your tutor to assess.',
+        action:
+          'No further action is required. Your tutor will change this task status once they have assessed it.',
       },
     ],
     [
@@ -252,7 +400,8 @@ export class TaskStatus {
       {
         detail: 'Need help for the task',
         reason: 'You are working on the task but would like some help to get it complete.',
-        action: 'Upload the task with what you have completed so far and add a comment on what you would like help on.',
+        action:
+          'Upload the task with what you have completed so far and add a comment on what you would like help on.',
       },
     ],
     [
@@ -269,7 +418,8 @@ export class TaskStatus {
       'feedback_exceeded',
       {
         detail: 'Feedback will no longer be given',
-        reason: 'This work is not complete to an acceptable standard and your tutor will not reassess it again.',
+        reason:
+          'This work is not complete to an acceptable standard and your tutor will not reassess it again.',
         action:
           "It is now your responsibility to ensure this task is at an adequate standard in your portfolio. You should fix your work according to your tutor's prior feedback and include a corrected version in your portfolio.",
       },
@@ -287,17 +437,38 @@ export class TaskStatus {
     [
       'discuss',
       {
-        detail: "You're almost complete!",
-        reason: 'Your work looks good and your tutor believes it is complete.',
-        action: 'To mark as complete, attend class and discuss it with your tutor.',
+        detail: 'Your work needs to be discussed further.',
+        reason: 'Your work looks good and your tutor believes it is on track.',
+        action: 'For this to be marked as complete, attend class and discuss it with your tutor.',
+      },
+    ],
+    [
+      'rediscuss',
+      {
+        detail: 'Your work needs another discussion.',
+        reason:
+          'You attempted to discuss this task, but the discussion was not adequate to sign it off.',
+        action:
+          'Brush up your knowledge and return for another discussion with your tutor to get the task signed off.',
+      },
+    ],
+    [
+      'attention_required',
+      {
+        detail: 'Your work is off track and needs focused discussion.',
+        reason:
+          'It seems you have misunderstood some key requirements for this task. Previous feedback has not led to sufficient progress.',
+        action:
+          'Attend class so your tutor can go through your work in detail and help you get back on track.',
       },
     ],
     [
       'demonstrate',
       {
-        detail: "You're almost complete!",
-        reason: 'Your work looks good and your tutor believes it is complete.',
-        action: 'To mark as complete, attend class and demonstrate how your submission works to your tutor.',
+        detail: 'Your work needs to be demonstrated.',
+        reason: 'Your work looks good and your tutor believes it is on track.',
+        action:
+          'For this to be marked as complete you need to attend class and demonstrate how your submission works for your tutor.',
       },
     ],
     [
@@ -305,7 +476,8 @@ export class TaskStatus {
       {
         detail: 'You are finished with this task 🎉',
         reason: 'Your tutor is happy with your work and it has been discussed with them.',
-        action: 'No further action required. Move onto the next task, or go party if everything is done.',
+        action:
+          'No further action required. Move onto the next task, or go party if everything is done.',
       },
     ],
     [
@@ -321,11 +493,21 @@ export class TaskStatus {
       'time_exceeded',
       {
         detail: 'Time limit exceeded',
-        reason: 'This work was submitted after the deadline, having missed both the target date and deadline.',
+        reason:
+          'This work was submitted after the deadline, having missed both the target date and deadline.',
         action:
           'Work submitted after the feedback deadline will not be checked by tutors prior to the portfolio assessment. You will need to ensure this task is at an adequate standard in your portfolio.',
       },
     ],
+    [
+      'assess_in_portfolio',
+      {
+        detail: 'Your submission will be assessed in your portfolio',
+        reason:
+          'This task will no longer be checked by tutors, and will be assessed directly in your final portfolio submission.',
+        action: 'You will need to ensure this task is at an adequate standard in your portfolio.',
+      },
+    ],
     // [
     //   "awaiting_extension",
     //   {
@@ -342,6 +524,7 @@ export class TaskStatus {
     return {
       status: status,
       icon: TaskStatus.STATUS_ICONS.get(status),
+      materialIcon: TaskStatus.STATUS_MATERIAL_ICONS.get(status),
       label: TaskStatus.STATUS_LABELS.get(status),
       class: TaskStatus.statusClass(status),
       help: TaskStatus.HELP_DESCRIPTIONS.get(status),
@@ -349,6 +532,6 @@ export class TaskStatus {
   }
 
   public static statusClass(status: TaskStatusEnum | undefined): string {
-    return status?.replace(new RegExp('_', 'g'), '-');
+    return status?.replace(new RegExp('_', 'g'), '-') ?? 'not-started';
   }
 }
diff --git a/src/app/api/models/task.ts b/src/app/api/models/task.ts
index 2aa167adfd..d8a902b033 100644
--- a/src/app/api/models/task.ts
+++ b/src/app/api/models/task.ts
@@ -1,28 +1,49 @@
 import {Entity, EntityCache, RequestOptions} from 'ngx-entity-service';
-import {AppInjector} from 'src/app/app-injector';
 import {formatDate} from '@angular/common';
+import {HttpClient} from '@angular/common/http';
+import {LOCALE_ID} from '@angular/core';
+import {Observable, firstValueFrom, map} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GradeTaskModalService} from 'src/app/tasks/modals/grade-task-modal/grade-task-modal.service';
+import {UploadSubmissionModalService} from 'src/app/tasks/modals/upload-submission-modal/upload-submission-modal.service';
+import {MappingFunctions} from '../services/mapping-fn';
+import {TutorNoteService} from '../services/tutor-note.service';
 import {
-  TaskDefinition,
+  Group,
   Project,
-  Unit,
+  ScormComment,
   TaskComment,
-  TaskStatusEnum,
-  TaskStatus,
-  TaskStatusUiData,
-  TaskService,
-  Group,
   TaskCommentService,
+  TaskDefinition,
+  TaskService,
   TaskSimilarity,
   TaskSimilarityService,
+  TaskStatus,
+  TaskStatusEnum,
+  TaskStatusUiData,
+  TestAttempt,
+  TestAttemptService,
+  Unit,
+  UnitRole,
+  UnitRoleService,
+  UserService,
 } from './doubtfire-model';
-import {Grade} from './grade';
-import {LOCALE_ID} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-import {Observable, map} from 'rxjs';
-import {gradeTaskModal, uploadSubmissionModal} from 'src/app/ajs-upgraded-providers';
-import {AlertService} from 'src/app/common/services/alert.service';
-import {MappingFunctions} from '../services/mapping-fn';
+import {TaskPrerequisite} from './task-prerequisite';
+
+export const FeedbackModerationAction = {
+  ShowMore: 'show_more',
+  ShowLess: 'show_less',
+  DismissOk: 'dismiss_ok',
+  DismissGood: 'dismiss_good',
+  Upheld: 'upheld',
+  Overturn: 'overturn',
+  Snooze: 'snooze',
+} as const;
+
+export type FeedbackModerationActionType =
+  (typeof FeedbackModerationAction)[keyof typeof FeedbackModerationAction];
 
 export class Task extends Entity {
   id: number;
@@ -30,6 +51,7 @@ export class Task extends Entity {
   status: TaskStatusEnum = 'not_started';
   dueDate: Date;
   extensions: number;
+  scormExtensions: number;
   submissionDate: Date;
   completionDate: Date;
   timesAssessed: number;
@@ -38,21 +60,36 @@ export class Task extends Entity {
   includeInPortfolio: boolean = true;
   similarityFlag: boolean = false;
   numNewComments: number = 0;
+  hasFeedback?: boolean;
   hasExtensions: boolean;
 
+  moderationType: 'random_sample' | 'escalation' | 'first_feedback';
+
   project: Project;
   definition: TaskDefinition;
+  tutorialId: number;
 
   //TODO: map task submission details
   hasPdf: boolean = false;
   processingPdf: boolean = false;
+  claimedByUnitRoleId: number | null;
+
+  loadingSubmissionDetails: boolean = false;
 
   pinned: boolean = false;
+  hover?: boolean;
+  optionsOpened?: boolean;
+
+  targetStartDate: Date;
+  targetDueDate: Date;
 
   public topWeight: number = 0;
   public readonly commentCache: EntityCache<TaskComment> = new EntityCache<TaskComment>();
 
   public readonly similarityCache: EntityCache<TaskSimilarity> = new EntityCache<TaskSimilarity>();
+  public readonly testAttemptCache: EntityCache<TestAttempt> = new EntityCache<TestAttempt>();
+
+  suggestedTaskStatus;
 
   private _unit: Unit;
 
@@ -83,22 +120,105 @@ export class Task extends Entity {
     return this.commentCache.currentValues;
   }
 
+  public get hasDiscussedInClassComment(): boolean {
+    return this.comments.some((comment) => comment.commentType === 'discussed_in_class');
+  }
+
+  public get requiresDiscussionForComplete(): boolean {
+    return !!this.definition?.requiresDiscussion;
+  }
+
+  public get canMarkComplete(): boolean {
+    return !this.requiresDiscussionForComplete || this.hasDiscussedInClassComment;
+  }
+
+  public get latestReadyForFeedbackAt(): Date | null {
+    return this.submissionDate ? new Date(this.submissionDate) : null;
+  }
+
+  public get tutor(): UnitRole {
+    const enrolments = this.project.tutorialEnrolmentsCache.currentValues.filter(
+      (t) => t.tutorialStream.name === this.definition.tutorialStream.name,
+    );
+    if (enrolments.length === 1) {
+      const user = enrolments[0].tutor;
+      return this.unit.staff.find((ur) => ur.user.id === user.id);
+    }
+  }
+
   public addComment(textString): void {
     AppInjector.get(TaskCommentService)
       .addComment(this, textString, 'text')
       .subscribe({
-        next: (tc) => {},
         error: (error) => {
-          console.log(error);
+          const alerts: AlertService = AppInjector.get(AlertService);
+          alerts.error(`Failed to add comment: ${error}`);
         },
       });
   }
 
+  private commentsSinceLatestReadyForFeedback(): readonly TaskComment[] {
+    const latestReadyForFeedbackAt = this.latestReadyForFeedbackAt?.getTime();
+    if (!latestReadyForFeedbackAt) {
+      return this.comments;
+    }
+
+    return this.comments.filter((comment) => {
+      const createdAt = comment.createdAt ? new Date(comment.createdAt).getTime() : NaN;
+      return Number.isFinite(createdAt) && createdAt >= latestReadyForFeedbackAt;
+    });
+  }
+
   public get unit(): Unit {
-    if (this._unit) return this._unit;
+    if (this._unit) {
+      return this._unit;
+    }
     return this.project.unit;
   }
 
+  private getBreakOverlapMilliseconds(
+    startTime: number,
+    endTime: number,
+    breaks: readonly {startDate: Date; numberOfWeeks: number}[],
+  ): number {
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+
+    return breaks.reduce((overlap, teachingBreak) => {
+      const breakStart = new Date(teachingBreak.startDate).getTime();
+      const breakDuration = (teachingBreak.numberOfWeeks ?? 0) * 7 * millisecondsPerDay;
+      const breakEnd = breakStart + breakDuration;
+
+      if (!Number.isFinite(breakStart) || breakDuration <= 0) {
+        return overlap;
+      }
+
+      const overlapStart = Math.max(startTime, breakStart);
+      const overlapEnd = Math.min(endTime, breakEnd);
+
+      return overlap + Math.max(0, overlapEnd - overlapStart);
+    }, 0);
+  }
+
+  public daysSinceSubmission(nowTime = Date.now()): number {
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const submissionTime = new Date(this.submissionDate).getTime();
+
+    if (!Number.isFinite(submissionTime) || nowTime <= submissionTime) {
+      return 0;
+    }
+
+    const teachingBreaks = this.unit.teachingPeriod?.breaks ?? [];
+    const pausedMilliseconds = this.getBreakOverlapMilliseconds(
+      submissionTime,
+      nowTime,
+      teachingBreaks,
+    );
+
+    return Math.floor(
+      Math.max(0, nowTime - submissionTime - pausedMilliseconds) / millisecondsPerDay,
+    );
+  }
+
   /**
    * Determine if a task matches a given search text.
    *
@@ -117,7 +237,15 @@ export class Task extends Entity {
   }
 
   public hasTaskKey(key: {studentId: number; taskDefAbbr: string}): boolean {
-    return this.taskKey() === key;
+    if (!key) {
+      return false;
+    }
+
+    const taskKey = this.taskKey();
+    return (
+      taskKey?.studentId?.toString() === key.studentId?.toString() &&
+      taskKey?.taskDefAbbr === key.taskDefAbbr
+    );
   }
 
   public taskKeyToUrlString(): string {
@@ -126,14 +254,15 @@ export class Task extends Entity {
   }
 
   public get gradeWord(): string {
-    if (this.grade) return Grade.GRADES[this.grade];
-    else {
+    if (this.grade !== undefined && this.grade !== null) {
+      return this.unit.gradeLabel(this.grade);
+    } else {
       return 'Not Graded';
     }
   }
 
   public gradeDesc(): string {
-    return Grade.GRADE_ACRONYMS.get(this.grade);
+    return this.unit.gradeAbbreviation(this.grade);
   }
 
   public hasGrade(): boolean {
@@ -145,7 +274,11 @@ export class Task extends Entity {
   }
 
   public hasQualityPoints(): boolean {
-    return this.definition.maxQualityPts > 0 && TaskStatus.GRADEABLE_STATUSES.includes(this.status);
+    return (
+      this.definition.maxQualityPts > 0 &&
+      this.qualityPts >= 0 &&
+      TaskStatus.GRADEABLE_STATUSES.includes(this.status)
+    );
   }
 
   public hasBeenGraded(): boolean {
@@ -156,15 +289,27 @@ export class Task extends Entity {
   }
 
   public hasBeenGivenQualityPoints(): boolean {
-    return this.qualityPts > 0 || TaskStatus.GRADEABLE_STATUSES.includes(this.status);
+    return this.definition.maxQualityPts > 0 && this.qualityPts >= 0;
   }
 
   public localDueDate(): Date {
+    if (this.unit.allowFlexibleDates) {
+      if (this.targetDueDate) {
+        // Student's custom planned date
+        return this.targetDueDate;
+      }
+
+      const gradeTargetDate = this.definition.gradeTargetDate(this.project.targetGrade);
+      if (gradeTargetDate) {
+        return gradeTargetDate;
+      }
+    }
+
     if (this.dueDate) {
       return this.dueDate;
-    } else {
-      return this.definition.localDueDate();
     }
+
+    return this.definition.localDueDate();
   }
 
   public localDueDateString(): string {
@@ -172,8 +317,80 @@ export class Task extends Entity {
     return formatDate(this.localDueDate(), 'd MMM', locale);
   }
 
+  public localDeadlineDateString(): string {
+    const locale: string = AppInjector.get(LOCALE_ID);
+    return formatDate(this.localDeadlineDate(), 'd MMM', locale);
+  }
+
+  public get dueWeek(): number {
+    const startDate: Date = this.unit.startDate;
+    const dueDate: Date = this.localDueDate();
+    const diffInMs: number = dueDate.getTime() - startDate.getTime();
+    const diffInDays: number = Math.ceil(diffInMs / (1000 * 3600 * 24));
+
+    return Math.ceil(diffInDays / 7);
+  }
+
+  /**
+   * Set the task to be due in a specific week.
+   *
+   * @returns the new due week
+   */
+  public set dueWeek(week: number) {
+    // Get original due week and current due week
+    const tdDueWeek: number = this.definition.dueWeek;
+    const currentDueWeek = this.dueWeek;
+
+    // Determine how long the extension needs to be
+    this.extensions = week - tdDueWeek;
+
+    // Map to ms to adjust due date
+    const currentWeekDueMs = MappingFunctions.weeksMs(currentDueWeek);
+    const newWeekDueMs = MappingFunctions.weeksMs(week);
+
+    // Adjust due date based on difference in current and new due weeks
+    this.dueDate = new Date(this.localDueDate().getTime() - currentWeekDueMs + newWeekDueMs);
+  }
+
   public localDeadlineDate(): Date {
-    return this.definition.localDeadlineDate();
+    return MappingFunctions.addDays(this.definition.localDeadlineDate(), this.project.specConDays);
+  }
+
+  public savePlannedDate(): Observable<Task> {
+    const taskService: TaskService = AppInjector.get(TaskService);
+
+    return taskService.update(
+      {
+        projectId: this.project.id,
+        taskDefId: this.definition.id,
+      },
+      {
+        endpointFormat: '/projects/:projectId:/task_def_id/:taskDefId:/plan',
+        entity: this,
+        body: {
+          extensions: this.extensions,
+        },
+      },
+    );
+  }
+
+  public saveTargetDates(startDate: Date | string, dueDate: Date | string): Observable<Task> {
+    const taskService: TaskService = AppInjector.get(TaskService);
+
+    return taskService.update(
+      {
+        projectId: this.project.id,
+        taskDefId: this.definition.id,
+      },
+      {
+        endpointFormat: '/projects/:projectId:/task_def_id/:taskDefId:/target_dates',
+        entity: this,
+        body: {
+          target_start_date: startDate,
+          target_due_date: dueDate,
+        },
+      },
+    );
   }
 
   /**
@@ -236,12 +453,33 @@ export class Task extends Entity {
     return this.daysUntilDueDate() == 0 && !this.inSubmittedState();
   }
 
+  public get startDate(): Date {
+    if (this.unit.allowFlexibleDates) {
+      if (this.targetStartDate) {
+        return this.targetStartDate;
+      }
+
+      const gradeStartDate = this.definition.gradeStartDate(this.project.targetGrade);
+      if (gradeStartDate) {
+        return gradeStartDate;
+      }
+    }
+
+    if (this.extensions < 0) {
+      // If the task has an extension, the start date is the due date minus the extension
+      return MappingFunctions.addWeeks(this.definition.startDate, this.extensions);
+    } else {
+      // If the task does not have an extension, the start date is the definition's start date
+      return this.definition.startDate;
+    }
+  }
+
   public timeUntilStartDate(): number {
-    return this.timeBetween(new Date(), this.definition.startDate);
+    return this.timeBetween(new Date(), this.startDate);
   }
 
   public daysUntilStartDate() {
-    return this.daysBetween(new Date(), this.definition.startDate);
+    return this.daysBetween(new Date(), this.startDate);
   }
 
   public isBeforeStartDate(): boolean {
@@ -275,9 +513,7 @@ export class Task extends Entity {
         // Always show in days, Hours, Minutes and Seconds.
         return `${diff} ${data.period.charAt(0).toUpperCase() + data.period.substring(1)}`;
       } else if (diff === 1 && data.period !== 'weeks') {
-        return `1 ${
-          data.period.charAt(0).toUpperCase() + data.period.substring(1, data.period.length - 2)
-        }`;
+        return `1 ${data.period.charAt(0).toUpperCase() + data.period.slice(1, -1)}`;
       }
     }
 
@@ -286,10 +522,10 @@ export class Task extends Entity {
 
   public timeToDue(): string {
     const days = this.daysUntilDueDate();
-    if (days < 0) {
-      return '!';
+    if (days <= 0) {
+      return 'Past Due Date';
     } else if (days < 11) {
-      return `${days}d`;
+      return `Due in ${this.timeUntilDueDateDescription()}`;
     } else {
       return `${Math.floor(days / 7)}w`;
     }
@@ -344,7 +580,9 @@ export class Task extends Entity {
 
   public refreshCommentData(): void {
     const comments: readonly TaskComment[] = this.comments;
-    if (comments.length === 0) return;
+    if (comments.length === 0) {
+      return;
+    }
 
     comments[0].shouldShowTimestamp = true;
 
@@ -381,10 +619,19 @@ export class Task extends Entity {
       if (comments[i].replyToId) {
         comments[i].originalComment = comments.find((tc) => tc.id === comments[i].replyToId);
       }
+
+      // Scorm series
+      if (comments[i].commentType === 'scorm') {
+        comments[i].firstInSeries = i === 0 || comments[i - 1].commentType !== 'scorm';
+        (comments[i] as ScormComment).lastInScormSeries =
+          i + 1 === comments.length || comments[i + 1]?.commentType !== 'scorm';
+        if (!comments[i].firstInSeries) {
+          comments[i].shouldShowTimestamp = false;
+        }
+      }
     }
 
     comments[comments.length - 1].shouldShowAvatar = true;
-    comments;
   }
 
   public taskKey(): {studentId: number; taskDefAbbr: string} {
@@ -396,21 +643,21 @@ export class Task extends Entity {
 
   public taskKeyToIdString(): string {
     const key = this.taskKey();
-    return `task-key-${key.studentId}-${key.taskDefAbbr}`.replace(/[.#]/g, '-');
+    return `task-key-${key.studentId}-${key.taskDefAbbr}`.replace(/[.# ]/g, '-');
   }
 
   public get similaritiesDetected(): boolean {
     return this.similarityFlag;
   }
 
-  public getSimilarityData(match: number): Observable<unknown> {
+  public getSimilarityData(match: number): Observable<object> {
     const httpClient = AppInjector.get(HttpClient);
     return httpClient.get(
       `${AppInjector.get(DoubtfireConstants).API_URL}/tasks/${this.id}/similarity/${match}`,
     );
   }
 
-  public updateSimilarity(match: number, other: any, dismissed: boolean): Observable<any> {
+  public updateSimilarity(match: number, other: object, dismissed: boolean): Observable<object> {
     const httpClient = AppInjector.get(HttpClient);
     return httpClient.put(
       `${AppInjector.get(DoubtfireConstants).API_URL}/tasks/${this.id}/similarity/${match}`,
@@ -458,7 +705,7 @@ export class Task extends Entity {
   }
 
   public statusIcon(): string {
-    return TaskStatus.STATUS_ICONS.get(this.status);
+    return TaskStatus.STATUS_MATERIAL_ICONS.get(this.status);
   }
 
   public statusClass(): string {
@@ -482,7 +729,7 @@ export class Task extends Entity {
 
   public getSubmissionDetails(): Observable<Task> {
     const http: HttpClient = AppInjector.get(HttpClient);
-
+    this.loadingSubmissionDetails = true;
     return http
       .get(
         `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${this.project.id}/task_def_id/${
@@ -491,20 +738,102 @@ export class Task extends Entity {
       )
       .pipe(
         map((response: object) => {
+          this.loadingSubmissionDetails = false;
           this.hasPdf = response['has_pdf'];
           this.processingPdf = response['processing_pdf'];
           this.submissionDate = MappingFunctions.mapDate(response, 'submission_date', this);
+          if (response['task_status'] && TaskStatus.STATUS_KEYS.includes(response['task_status'])) {
+            this.status = response['task_status'];
+          }
+          if ('claimed_by_unit_role_id' in response) {
+            this.claimedByUnitRoleId = response['claimed_by_unit_role_id'] as number | null;
+          }
           return this;
         }),
       );
   }
 
-  public get overseerEnabled(): boolean {
-    return (
-      this.unit.overseerEnabled &&
-      this.definition.assessmentEnabled &&
-      this.definition.hasTaskAssessmentResources
+  private mapUnitTaskPrerequisites(prerequisites: TaskPrerequisite[]): TaskPrerequisite[] {
+    const definitions = this.unit.taskDefinitions;
+
+    return prerequisites.map((prerequisite) => {
+      prerequisite.taskDefinition = definitions.find(
+        (td) => td.id === prerequisite.taskDefinitionId,
+      );
+      prerequisite.prerequisite = definitions.find((td) => td.id === prerequisite.prerequisiteId);
+      return prerequisite;
+    });
+  }
+
+  private buildProjectTaskForDefinition(definition: TaskDefinition): Task {
+    const dependentTask = new Task(this.project);
+    dependentTask.project = this.project;
+    dependentTask.definition = definition;
+    return dependentTask;
+  }
+
+  private async dependentTaskNeedsRecursiveFix(definition: TaskDefinition): Promise<boolean> {
+    const cachedTask = this.project.findTaskForDefinition(definition.id);
+    if (cachedTask) {
+      return cachedTask.status === 'ready_for_feedback';
+    }
+
+    const dependentTask = this.buildProjectTaskForDefinition(definition);
+    const taskWithSubmissionDetails = await firstValueFrom(dependentTask.getSubmissionDetails());
+    return taskWithSubmissionDetails.status === 'ready_for_feedback';
+  }
+
+  public async hasReadyForFeedbackDependents(): Promise<boolean> {
+    const allPrerequisites = await firstValueFrom(this.unit.getTaskPrerequisites());
+    const dependentPrerequisites = this.mapUnitTaskPrerequisites(allPrerequisites).filter(
+      (prerequisite) => prerequisite.prerequisiteId === this.definition.id,
     );
+
+    for (const prerequisite of dependentPrerequisites) {
+      if (!prerequisite.taskDefinition) {
+        continue;
+      }
+
+      const shouldTriggerRecursiveFix = await this.dependentTaskNeedsRecursiveFix(
+        prerequisite.taskDefinition,
+      );
+      if (shouldTriggerRecursiveFix) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  public get overseerEnabled(): boolean {
+    return this.unit.overseerEnabled && this.definition.assessmentEnabled;
+  }
+
+  public get scormEnabled(): boolean {
+    return this.definition.scormEnabled && this.definition.hasScormData;
+  }
+
+  public get scormPassed(): boolean {
+    if (this.latestCompletedTestAttempt) {
+      return this.latestCompletedTestAttempt.successStatus;
+    }
+    return false;
+  }
+
+  /**
+   * Launch the SCORM player for this task in a new window.
+   */
+  public launchScormPlayer(): void {
+    const url = `/projects/${this.project.id}/task_def_id/${this.taskDefId}/scorm-player/normal`;
+    window.open(url, '_blank');
+  }
+
+  public get isReadyForUpload(): boolean {
+    return !this.scormEnabled || this.definition.scormBypassTest || this.scormPassed;
+  }
+
+  public get latestCompletedTestAttempt(): TestAttempt {
+    return this.testAttemptCache.currentValues.find((attempt) => attempt.terminated);
   }
 
   public submissionUrl(asAttachment: boolean = false): string {
@@ -550,7 +879,7 @@ export class Task extends Entity {
     if (!isTestSubmission) {
       this.status = status;
     }
-    const uploadModal: any = AppInjector.get(uploadSubmissionModal);
+    const uploadModal: UploadSubmissionModalService = AppInjector.get(UploadSubmissionModalService);
 
     const modal = uploadModal.show(this, reuploadEvidence, isTestSubmission);
     // Modal failed to present
@@ -563,19 +892,25 @@ export class Task extends Entity {
 
     modal.result.then(
       // Grade was selected (modal closed with result)
-      (response) => {},
+      (_response) => {
+        /* empty */
+      },
       // Grade was not selected (modal was dismissed)
       (_dismissed) => {
         if (!isTestSubmission) {
           this.status = oldStatus;
         }
-        const alerts: any = AppInjector.get(AlertService);
+        const alerts: AlertService = AppInjector.get(AlertService);
         alerts.message('Submission cancelled. Status was reverted.', 6000);
-      }
+      },
     );
   }
 
-  public processTaskStatusChange(expectedStatus: TaskStatusEnum, alerts: AlertService) {
+  public processTaskStatusChange(
+    expectedStatus: TaskStatusEnum,
+    alerts: AlertService,
+    submissionCompleted: boolean = false,
+  ) {
     if (this.inTimeExceeded() && !this.isPastDeadline()) {
       alerts.message(
         'You have submitted after the deadline for feedback. Your task will not be reviewed by a tutor. It is now your responsibility to ensure this task meets the required standard.',
@@ -588,23 +923,114 @@ export class Task extends Entity {
     } else {
       alerts.success(`Status changed to ${this.statusLabel()}.`);
     }
+    this.getSubmissionDetails().subscribe();
+    const taskService: TaskService = AppInjector.get(TaskService);
+    taskService.notifyTransitionComplete(this, submissionCompleted);
+  }
+
+  public async markAsDiscussed(reasonText?: string) {
+    const alerts: AlertService = AppInjector.get(AlertService);
+    const taskService: TaskService = AppInjector.get(TaskService);
+
+    const markDiscussed = () => {
+      const options: RequestOptions<Task> = {
+        entity: this,
+        cache: this.project.taskCache,
+        body: {
+          discussed: true,
+        },
+      };
+
+      taskService
+        .update(
+          {
+            projectId: this.project.id,
+            taskDefId: this.definition.id,
+          },
+          options,
+        )
+        .subscribe({
+          next: (_response) => {
+            taskService.notifyStatusChange(this);
+            alerts.success('Task successfully marked as discussed in class.', 4000);
+          },
+          error: (error) => {
+            alerts.error(error, 6000);
+          },
+        });
+    };
+
+    if (reasonText) {
+      const prefix = `I'm manually marking this discussed in class because...`;
+      const trimmedReason = reasonText.trim();
+      const noteText = trimmedReason.startsWith(prefix)
+        ? trimmedReason
+        : `${prefix} ${trimmedReason}`;
+      const currentUser = AppInjector.get(UserService).currentUser;
+      const currentUnitRole = this.unit.staff.find(
+        (unitRole) => unitRole.user.id === currentUser.id,
+      );
+
+      if (!currentUnitRole) {
+        alerts.error(
+          'Unable to find your staff role, so the tutor note could not be recorded.',
+          6000,
+        );
+        return;
+      }
+
+      AppInjector.get(TutorNoteService)
+        .addNote(currentUnitRole, noteText, this)
+        .subscribe({
+          next: () => {
+            markDiscussed();
+          },
+          error: (error) => {
+            alerts.error(`Unable to save the required tutor note: ${error}`, 6000);
+          },
+        });
+      return;
+    }
+
+    markDiscussed();
   }
 
-  public updateTaskStatus(status: TaskStatusEnum) {
+  public async updateTaskStatus(
+    status: TaskStatusEnum,
+    markAsDiscussed?: boolean,
+    triggerRecursiveFix?: boolean,
+    submissionCompleted: boolean = false,
+  ) {
     const oldStatus = this.status;
+    const oldGrade = this.grade;
+    const oldQualityPts = this.qualityPts;
     const alerts: AlertService = AppInjector.get(AlertService);
 
-    const updateFunc = () => {
+    if (status === 'complete' && !this.canMarkComplete) {
+      alerts.error('This task must be discussed in class before it can marked complete.', 6000);
+      return;
+    }
+
+    const updateFunc = (grade = this.grade, qualityPts = this.qualityPts) => {
       const taskService: TaskService = AppInjector.get(TaskService);
       const options: RequestOptions<Task> = {
         entity: this,
         cache: this.project.taskCache,
         body: {
           trigger: status,
-          grade: this.grade,
-          quality_pts: this.qualityPts,
+          grade: grade,
+          quality_pts: qualityPts,
         },
       };
+
+      if (markAsDiscussed === true) {
+        options.body['discussed'] = true;
+      }
+
+      if (triggerRecursiveFix === true) {
+        options.body['trigger_recursive_fix'] = true;
+      }
+
       const hasId: boolean = this.id > 0;
 
       taskService
@@ -616,57 +1042,69 @@ export class Task extends Entity {
           options,
         )
         .subscribe({
-          next: (response) => {
+          next: (_response) => {
+            this.grade = grade;
+            this.qualityPts = qualityPts;
             if (!hasId && this.id > 0) {
               this.project.taskCache.delete(this.definition.abbreviation);
               this.project.taskCache.add(this);
             }
-            this.processTaskStatusChange(status, alerts);
+            this.processTaskStatusChange(status, alerts, submissionCompleted);
+            taskService.notifyStatusChange(this);
           },
           error: (error) => {
             this.status = oldStatus;
+            this.grade = oldGrade;
+            this.qualityPts = oldQualityPts;
             alerts.error(error, 6000);
           },
         });
     }; // end update function
 
-    // Must provide grade if graded and in a final complete state
+    // Must provide grade if graded and in a final complete state - so use callback to run update function
     if (
       (this.definition.isGraded || this.definition.maxQualityPts > 0) &&
       TaskStatus.GRADEABLE_STATUSES.includes(status)
     ) {
-      const gradeModal: any = AppInjector.get(gradeTaskModal);
-      const modal = gradeModal.show(this);
-      if (modal) {
-        modal.result.then(
-          // Grade was selected (modal closed with result)
-          (response) => {
-            this.grade = response.selectedGrade;
-            this.qualityPts = response.qualityPts;
-            updateFunc();
-          },
-          // Grade was not selected (modal was dismissed)
-          () => {
-            this.status = oldStatus;
-            alerts.message('Status reverted, as no grade was specified', 6000);
-          },
-        );
-      }
+      const gradeModal: GradeTaskModalService = AppInjector.get(GradeTaskModalService);
+      gradeModal.show(
+        this,
+        // Grade was selected (modal closed with result)
+        (response) => {
+          updateFunc(response.grade, response.qualityPts);
+        },
+        // Grade was not selected (modal was dismissed)
+        () => {
+          this.status = oldStatus;
+          alerts.message('Status reverted, as no grade was specified', 6000);
+        },
+      );
     } else {
       updateFunc();
     }
   }
 
-  public triggerTransition(status: TaskStatusEnum): void {
-    if (this.status === status) return;
+  public async triggerTransition(status: TaskStatusEnum): Promise<void> {
+    if (this.status === status) {
+      return;
+    }
+    const alerts: AlertService = AppInjector.get(AlertService);
 
     const requiresFileUpload =
-      ['ready_for_feedback', 'need_help'].includes(status) && this.requiresFileUpload();
+      ['ready_for_feedback', 'need_help', 'assess_in_portfolio'].includes(status) &&
+      this.requiresFileUpload();
 
-    if (requiresFileUpload) {
+    if (requiresFileUpload && this.isReadyForUpload) {
       this.presentTaskSubmissionModal(status);
+    } else if (requiresFileUpload && !this.isReadyForUpload) {
+      alerts.error('Complete Knowledge Check first to submit files', 6000);
     } else {
-      this.updateTaskStatus(status);
+      await this.updateTaskStatus(
+        status,
+        undefined,
+        undefined,
+        TaskStatus.SUBMITTABLE_STATUSES.includes(status),
+      );
     }
   }
 
@@ -688,12 +1126,13 @@ export class Task extends Entity {
     return this.project.getGroupForTask(this);
   }
 
-  public pin(): void {
+  public pin(onSuccess?: () => void): void {
     const http = AppInjector.get(HttpClient);
 
     http.post(`${AppInjector.get(DoubtfireConstants).API_URL}/tasks/${this.id}/pin`, {}).subscribe({
-      next: (data) => {
+      next: (_data) => {
         this.pinned = true;
+        onSuccess?.();
       },
       error: (message) => {
         (AppInjector.get(AlertService) as AlertService).error(message, 6000);
@@ -701,7 +1140,7 @@ export class Task extends Entity {
     });
   }
 
-  public unpin(): void {
+  public unpin(onSuccess?: () => void): void {
     const http = AppInjector.get(HttpClient);
 
     http
@@ -709,6 +1148,7 @@ export class Task extends Entity {
       .subscribe({
         next: (_data) => {
           this.pinned = false;
+          onSuccess?.();
         },
         error: (message) => {
           (AppInjector.get(AlertService) as AlertService).error(message, 6000);
@@ -718,7 +1158,8 @@ export class Task extends Entity {
 
   public canApplyForExtension(): boolean {
     return (
-      this.unit.allowStudentExtensionRequests &&
+      (this.unit.allowStudentExtensionRequests || this.unit.currentUserIsStaff) &&
+      !this.unit.allowFlexibleDates &&
       this.inStateThatAllowsExtension() &&
       (!this.isPastDeadline() || this.wasSubmittedOnTime()) &&
       this.maxWeeksCanExtend() > 0
@@ -733,9 +1174,7 @@ export class Task extends Entity {
   }
 
   public maxWeeksCanExtend(): number {
-    return Math.ceil(
-      this.daysBetween(this.localDueDate(), this.definition.localDeadlineDate()) / 7,
-    );
+    return Math.ceil(this.daysBetween(this.localDueDate(), this.localDeadlineDate()) / 7);
   }
 
   /**
@@ -764,4 +1203,89 @@ export class Task extends Entity {
       },
     );
   }
+
+  /**
+   * Fetch the SCORM test attempts for this task.
+   */
+  public fetchTestAttempts(): Observable<TestAttempt[]> {
+    const testAttemptService: TestAttemptService = AppInjector.get(TestAttemptService);
+    return testAttemptService.query(
+      {
+        project_id: this.project.id,
+        task_def_id: this.taskDefId,
+      },
+      {
+        cache: this.testAttemptCache,
+        constructorParams: this,
+      },
+    );
+  }
+
+  public hasPrerequisiteTasks(): boolean {
+    if (!this.project) {
+      return false;
+    }
+    return this.definition.taskPrerequisitesCache.currentValues.length > 0;
+  }
+
+  /**
+   * Returns true if this task has prerequisite tasks that are not in a submitted state
+   */
+  public blockedByPrerequisiteTasks(): boolean {
+    if (!this.project) {
+      return false;
+    }
+
+    const prereqs = this.definition.taskPrerequisitesCache.currentValues;
+    if (!prereqs.length) {
+      return false;
+    }
+
+    for (const prerequisiteLink of prereqs) {
+      const prerequisiteTask = prerequisiteLink.prerequisite;
+      const task = this.project.tasks.find((t) => t.definition.id === prerequisiteTask.id);
+
+      // If the task doesnt exist or its state has not met the minimum require state, block submission
+      if (!task || !prerequisiteLink.hasMetRequiredState(this.project)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  public moderateFeedback(
+    action: FeedbackModerationActionType,
+    applyToAll: boolean = false,
+  ): Observable<boolean> {
+    const unitRoleService: UnitRoleService = AppInjector.get(UnitRoleService);
+
+    const tutor = this.tutor;
+    if (!tutor) {
+      return;
+    }
+
+    return unitRoleService.post(
+      {
+        id: tutor.id,
+        taskId: this.id,
+      },
+      {
+        endpointFormat: '/unit_roles/:id:/moderation/:taskId:',
+        body: {
+          action,
+          apply_to_all: applyToAll,
+        },
+      },
+    );
+  }
+
+  public requestFeedbackReview(): Observable<boolean> {
+    const httpClient: HttpClient = AppInjector.get(HttpClient);
+    const url = `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${
+      this.project.id
+    }/task_def_id/${this.definition.id}/feedback_review`;
+
+    return httpClient.post<boolean>(url, {});
+  }
 }
diff --git a/src/app/api/models/teaching-period.ts b/src/app/api/models/teaching-period.ts
index 2aca186b7c..8c67b7c245 100644
--- a/src/app/api/models/teaching-period.ts
+++ b/src/app/api/models/teaching-period.ts
@@ -1,7 +1,7 @@
-import { Entity, EntityCache, EntityMapping } from 'ngx-entity-service';
-import { Observable } from 'rxjs';
-import { AppInjector } from 'src/app/app-injector';
-import { TeachingPeriodBreakService, TeachingPeriodService, Unit } from './doubtfire-model';
+import {Entity, EntityCache, EntityMapping} from 'ngx-entity-service';
+import {Observable} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {TeachingPeriodBreakService, TeachingPeriodService, Unit} from './doubtfire-model';
 
 export class TeachingPeriodBreak extends Entity {
   id: number;
@@ -27,7 +27,10 @@ export class TeachingPeriod extends Entity {
    * @param ignoreKeys
    * @returns
    */
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
       teaching_period: super.toJson(mappingData, ignoreKeys),
     };
@@ -69,7 +72,10 @@ export class TeachingPeriod extends Entity {
     breakEntity.numberOfWeeks = weeks;
     const breakService: TeachingPeriodBreakService = AppInjector.get(TeachingPeriodBreakService);
 
-    return breakService.create({ teaching_period_id: this.id }, { cache: this.breaksCache, entity: breakEntity });
+    return breakService.create(
+      {teaching_period_id: this.id},
+      {cache: this.breaksCache, entity: breakEntity},
+    );
   }
 
   /**
@@ -79,10 +85,17 @@ export class TeachingPeriod extends Entity {
    */
   public removeBreak(teachingBreakID: number): Observable<TeachingPeriodBreak> {
     const breakService: TeachingPeriodBreakService = AppInjector.get(TeachingPeriodBreakService);
-    return breakService.delete({ teaching_period_id: this.id, id: teachingBreakID }, { cache: this.breaksCache });
+    return breakService.delete(
+      {teaching_period_id: this.id, id: teachingBreakID},
+      {cache: this.breaksCache},
+    );
   }
 
-  public rollover(newPeriod: TeachingPeriod, rolloverInactive: boolean, searchForward: boolean): Observable<boolean> {
+  public rollover(
+    newPeriod: TeachingPeriod,
+    rolloverInactive: boolean,
+    searchForward: boolean,
+  ): Observable<boolean> {
     const teachingPeriodService: TeachingPeriodService = AppInjector.get(TeachingPeriodService);
 
     return teachingPeriodService.post<boolean>(
@@ -94,7 +107,110 @@ export class TeachingPeriod extends Entity {
       },
       {
         endpointFormat: TeachingPeriodService.rolloverEndpointFormat,
+      },
+    );
+  }
+
+  public weekNumber(date: Date | string): number | null {
+    if (!date || !this.startDate) {
+      return null;
+    }
+
+    const targetDate = this.normalizeDay(date);
+    const startDate = this.normalizeDay(this.startDate);
+    if (!targetDate || !startDate) {
+      return null;
+    }
+
+    const millisecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
+    let result = Math.floor((targetDate.getTime() - startDate.getTime()) / millisecondsPerWeek) + 1;
+
+    for (const teachingBreak of this.breaks) {
+      const breakStart = this.normalizeDay(teachingBreak.startDate);
+      const breakEnd = this.breakEndDate(teachingBreak);
+      const firstMonday = this.firstMonday(teachingBreak);
+      const mondayAfterBreak = this.mondayAfterBreak(teachingBreak);
+
+      if (!breakStart || !breakEnd || !firstMonday || !mondayAfterBreak) {
+        continue;
       }
+
+      if (targetDate >= breakStart) {
+        if (targetDate >= breakEnd) {
+          result -= teachingBreak.numberOfWeeks;
+        } else if (targetDate.getTime() === breakStart.getTime()) {
+          if (targetDate >= firstMonday) {
+            result -= 1;
+          }
+        } else if (targetDate >= firstMonday) {
+          result -= Math.ceil((targetDate.getTime() - firstMonday.getTime()) / millisecondsPerWeek);
+        }
+
+        if (targetDate >= breakEnd && targetDate < mondayAfterBreak) {
+          result += 1;
+        }
+      }
+    }
+
+    return result;
+  }
+
+  private normalizeDay(date: Date | string | null | undefined): Date | null {
+    if (!date) {
+      return null;
+    }
+
+    const parsed = date instanceof Date ? date : new Date(date);
+    if (Number.isNaN(parsed.valueOf())) {
+      return null;
+    }
+
+    return new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
+  }
+
+  private breakEndDate(teachingBreak: TeachingPeriodBreak): Date | null {
+    const startDate = this.normalizeDay(teachingBreak.startDate);
+    if (!startDate || !teachingBreak.numberOfWeeks) {
+      return null;
+    }
+
+    return new Date(
+      startDate.getFullYear(),
+      startDate.getMonth(),
+      startDate.getDate() + teachingBreak.numberOfWeeks * 7,
+    );
+  }
+
+  private firstMonday(teachingBreak: TeachingPeriodBreak): Date | null {
+    const startDate = this.normalizeDay(teachingBreak.startDate);
+    if (!startDate) {
+      return null;
+    }
+
+    if (startDate.getDay() === 1) {
+      return startDate;
+    }
+    if (startDate.getDay() === 0) {
+      return new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 1);
+    }
+
+    return new Date(
+      startDate.getFullYear(),
+      startDate.getMonth(),
+      startDate.getDate() + (8 - startDate.getDay()),
+    );
+  }
+
+  private mondayAfterBreak(teachingBreak: TeachingPeriodBreak): Date | null {
+    const firstMonday = this.firstMonday(teachingBreak);
+    if (!firstMonday || !teachingBreak.numberOfWeeks) {
+      return null;
+    }
+
+    return new Date(
+      firstMonday.getFullYear(),
+      firstMonday.getMonth(),
+      firstMonday.getDate() + teachingBreak.numberOfWeeks * 7,
     );
   }
 }
diff --git a/src/app/api/models/test-attempt.ts b/src/app/api/models/test-attempt.ts
new file mode 100644
index 0000000000..1956c00aff
--- /dev/null
+++ b/src/app/api/models/test-attempt.ts
@@ -0,0 +1,28 @@
+import {Entity} from 'ngx-entity-service';
+import {Task} from './doubtfire-model';
+
+export class TestAttempt extends Entity {
+  id: number;
+  terminated: boolean;
+  completionStatus: boolean;
+  successStatus: boolean;
+  scoreScaled: number;
+  cmiDatamodel: string;
+  attemptedTime: Date;
+
+  task: Task;
+
+  constructor(task: Task) {
+    super();
+    this.task = task;
+  }
+
+  /**
+   * Open a test attempt window in review mode
+   */
+  public review() {
+    const url = `/projects/${this.task.project.id}/task_def_id/${this.task.taskDefId}/scorm-player/review/${this.id}`;
+
+    window.open(url, '_blank');
+  }
+}
diff --git a/src/app/api/models/tii-action.ts b/src/app/api/models/tii-action.ts
index 0f0ed3d599..75afd42516 100644
--- a/src/app/api/models/tii-action.ts
+++ b/src/app/api/models/tii-action.ts
@@ -1,6 +1,4 @@
-import { Entity, EntityCache, EntityMapping } from 'ngx-entity-service';
-import { Observable } from 'rxjs';
-import { Unit } from './doubtfire-model';
+import {Entity} from 'ngx-entity-service';
 
 export class TiiAction extends Entity {
   id: number;
@@ -14,5 +12,4 @@ export class TiiAction extends Entity {
   log: string;
 
   description: string;
-
 }
diff --git a/src/app/api/models/tutor-note.ts b/src/app/api/models/tutor-note.ts
new file mode 100644
index 0000000000..148d5fa9eb
--- /dev/null
+++ b/src/app/api/models/tutor-note.ts
@@ -0,0 +1,55 @@
+import {Entity} from 'ngx-entity-service';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TutorNoteService} from '../services/tutor-note.service';
+import {Project, Task, TaskDefinition, UnitRole, User, UserService} from './doubtfire-model';
+
+export class TutorNote extends Entity {
+  id: number;
+
+  unitRole: UnitRole;
+  task?: Task;
+  taskDefinition?: TaskDefinition;
+  project?: Project;
+  user: User;
+  note: string;
+  replyTo?: TutorNote;
+  replyToId: number;
+  readByUnitRole: boolean;
+
+  createdAt: Date;
+  updatedAt: Date;
+
+  constructor(data?: UnitRole) {
+    super();
+    if (data) {
+      this.unitRole = data;
+    } else {
+      console.error('Failed to get unit role');
+    }
+  }
+
+  public get noteIsForMe(): boolean {
+    const userService: UserService = AppInjector.get(UserService);
+    return this.unitRole.user.id === userService.currentUser.id;
+  }
+
+  public get authorIsMe(): boolean {
+    const userService: UserService = AppInjector.get(UserService);
+    return this.user.id === userService.currentUser.id;
+  }
+
+  public delete() {
+    const tutorNoteService: TutorNoteService = AppInjector.get(TutorNoteService);
+    tutorNoteService
+      .delete({unitRoleId: this.unitRole.id, id: this.id}, {cache: this.unitRole.tutorNotesCache})
+      .subscribe({
+        next: () => {
+          AppInjector.get(AlertService).error('Successfully deleted tutor note', 4000);
+        },
+        error: (error) => {
+          AppInjector.get(AlertService).error(error?.message || error || 'Unknown error', 2000);
+        },
+      });
+  }
+}
diff --git a/src/app/api/models/tutorial-enrolment.ts b/src/app/api/models/tutorial-enrolment.ts
index 7463175365..9af8408c51 100644
--- a/src/app/api/models/tutorial-enrolment.ts
+++ b/src/app/api/models/tutorial-enrolment.ts
@@ -1,6 +1,5 @@
-import { Entity } from 'ngx-entity-service';
-import { Tutorial, User } from './doubtfire-model';
-
+import {Entity} from 'ngx-entity-service';
+import {Tutorial} from './doubtfire-model';
 
 export class TutorialEnrolment extends Entity {
   public tutorial: Tutorial;
diff --git a/src/app/api/models/tutorial-stream/tutorial-stream.ts b/src/app/api/models/tutorial-stream/tutorial-stream.ts
index 2ccb96759d..17c101fa0e 100644
--- a/src/app/api/models/tutorial-stream/tutorial-stream.ts
+++ b/src/app/api/models/tutorial-stream/tutorial-stream.ts
@@ -1,7 +1,8 @@
-import { Entity } from 'ngx-entity-service';
-import { Unit, Tutorial } from '../doubtfire-model';
+import {Entity} from 'ngx-entity-service';
+import {Tutorial, Unit} from '../doubtfire-model';
 
 export class TutorialStream extends Entity {
+  id: number;
   name: string;
   abbreviation: string;
   activityType: string;
diff --git a/src/app/api/models/tutorial/tutorial.ts b/src/app/api/models/tutorial/tutorial.ts
index 181b1ec0d0..164b8df832 100644
--- a/src/app/api/models/tutorial/tutorial.ts
+++ b/src/app/api/models/tutorial/tutorial.ts
@@ -1,7 +1,6 @@
-import { Entity, EntityMapping } from 'ngx-entity-service';
-import { AppInjector } from '../../../app-injector';
-import { User, Campus, UserService, CampusService, TutorialStream } from 'src/app/api/models/doubtfire-model';
-import { Unit } from '../unit';
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {Campus, TutorialStream, User} from 'src/app/api/models/doubtfire-model';
+import {Unit} from '../unit';
 
 export class Tutorial extends Entity {
   unit: Unit; // TODO: Convert to a unit object once this exists
@@ -65,8 +64,11 @@ export class Tutorial extends Entity {
   }
 
   public get tutorName(): string {
-    if (this.tutor) return this.tutor.name;
-    else return '';
+    if (this.tutor) {
+      return this.tutor.name;
+    } else {
+      return '';
+    }
   }
 
   public hasCapacity(): boolean {
diff --git a/src/app/api/models/unit-role.ts b/src/app/api/models/unit-role.ts
index 5868fa2f05..f3d138ec24 100644
--- a/src/app/api/models/unit-role.ts
+++ b/src/app/api/models/unit-role.ts
@@ -1,16 +1,26 @@
-import { Entity, EntityMapping } from 'ngx-entity-service';
-import { User, Unit } from './doubtfire-model';
+import {Entity, EntityCache, EntityMapping} from 'ngx-entity-service';
+import {Unit, User} from './doubtfire-model';
+import {TutorNote} from './tutor-note';
 
 /**
  * A unit role represents a academic teaching role within a unit. Linking a user
  * to their role within the unit.
  */
 export class UnitRole extends Entity {
-
   id: number;
   role: string;
   user: User;
   unit: Unit;
+  observerOnly: boolean;
+  canMarkOverflowTasks: boolean;
+  mentorId: number | null;
+  tutorNoteCount: number;
+
+  public get mentor(): UnitRole {
+    return this.unit?.staff.find((ur) => ur.id === this.mentorId);
+  }
+
+  public readonly tutorNotesCache: EntityCache<TutorNote> = new EntityCache<TutorNote>();
 
   /**
    * The id for updated roles - but we need to move away from this to the role string...
@@ -28,10 +38,12 @@ export class UnitRole extends Entity {
     return this.user.matches(text) || this.unit.matches(text);
   }
 
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
       unit_role: super.toJson(mappingData, ignoreKeys),
-    }
+    };
   }
-
 }
diff --git a/src/app/api/models/unit.spec.ts b/src/app/api/models/unit.spec.ts
new file mode 100644
index 0000000000..8222062ca4
--- /dev/null
+++ b/src/app/api/models/unit.spec.ts
@@ -0,0 +1,59 @@
+import {describe, expect, it, vi} from 'vitest';
+import {Project} from './project';
+import {Unit} from './unit';
+
+describe('Unit.findStudent', () => {
+  it('returns the same project instance as studentCache.get', () => {
+    const unit = new Unit();
+    const project = new Project(unit);
+
+    project.id = 42;
+    unit.studentCache.add(project);
+
+    expect(unit.findStudent(42)).toBe(unit.studentCache.get(42));
+  });
+
+  it('does not scan the students array', () => {
+    const unit = new Unit();
+    const project = new Project(unit);
+
+    project.id = 42;
+    unit.studentCache.add(project);
+
+    vi.spyOn(unit, 'students', 'get').mockImplementation(() => {
+      throw new Error('students array was scanned');
+    });
+
+    expect(unit.findStudent(42)).toBe(project);
+  });
+
+  it('returns undefined when the student does not exist', () => {
+    const unit = new Unit();
+
+    expect(unit.findStudent(999)).toBeUndefined();
+  });
+});
+
+describe('Unit.findStudent (via stubbed cache)', () => {
+  // Build a Unit without running the constructor so the test stays free of the
+  // Angular injector, then give it a stub studentCache.
+  function unitWithCache(entries: Record<number, unknown>): Unit {
+    const unit = Object.create(Unit.prototype) as Unit;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (unit as any).studentCache = {
+      get: (key: number) => entries[key],
+    };
+    return unit;
+  }
+
+  it('returns the same instance the cache holds for that id', () => {
+    const project = {id: 7} as unknown;
+    const unit = unitWithCache({7: project});
+    expect(unit.findStudent(7)).toBe(project);
+  });
+
+  it('returns undefined when no project has that id', () => {
+    const unit = unitWithCache({7: {id: 7}});
+    expect(unit.findStudent(99)).toBeUndefined();
+  });
+});
diff --git a/src/app/api/models/unit.ts b/src/app/api/models/unit.ts
index 5c70a6eb42..f82998c78d 100644
--- a/src/app/api/models/unit.ts
+++ b/src/app/api/models/unit.ts
@@ -1,30 +1,47 @@
 import {Entity, EntityCache, EntityMapping} from 'ngx-entity-service';
+import {HttpClient, HttpParams} from '@angular/common/http';
 import {Observable, tap} from 'rxjs';
 import {AppInjector} from 'src/app/app-injector';
 import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 import {GroupService} from '../services/group.service';
+import {MarkingSessionService} from '../services/marking-session.service';
 import {ProjectService} from '../services/project.service';
 import {TaskDefinitionService} from '../services/task-definition.service';
+import {TaskPrerequisiteService} from '../services/task-prerequisite.service';
+import {D2lAssessmentMapping} from './d2l/d2l_assessment_mapping';
 import {
-  User,
-  UnitRole,
-  Task,
-  TeachingPeriod,
-  TaskDefinition,
-  TutorialStream,
-  Tutorial,
-  GroupSet,
+  Campus,
+  D2lAssessmentMappingService,
   Group,
-  TaskOutcomeAlignment,
   GroupMembership,
-  UnitService,
+  GroupSet,
+  OverseerImage,
   Project,
+  Task,
+  TaskDefinition,
+  TaskOutcomeAlignment,
+  TeachingPeriod,
+  Tutorial,
+  TutorialStream,
   TutorialStreamService,
+  UnitRole,
   UnitRoleService,
+  UnitService,
+  User,
 } from './doubtfire-model';
 import {LearningOutcome} from './learning-outcome';
-import {AlertService} from 'src/app/common/services/alert.service';
+import {MarkingSession} from './marking-session';
+import {SidekiqJob} from './sidekiq-job';
+import {TaskPrerequisite} from './task-prerequisite';
+
+export interface GradeDefinition {
+  id: string;
+  value: number;
+  label: string;
+  abbreviation: string;
+}
 
 export class Unit extends Entity {
   id: number;
@@ -48,9 +65,11 @@ export class Unit extends Entity {
   startDate: Date; //TODO: or string
   endDate: Date; //TODO: or string
   portfolioAutoGenerationDate: Date;
+  currentUnitWeek: number | null;
 
   assessmentEnabled: boolean;
   overseerImageId: number = null; // image needs to be lazy loadaed
+  private _overseerImage: OverseerImage;
 
   autoApplyExtensionBeforeDeadline: boolean;
   sendNotifications: boolean;
@@ -60,8 +79,23 @@ export class Unit extends Entity {
   draftTaskDefinition: TaskDefinition;
 
   allowStudentExtensionRequests: boolean;
+  allowFlexibleDates: boolean = false;
   extensionWeeksOnResubmitRequest: number;
   allowStudentChangeTutorial: boolean;
+  markLateSubmissionsAsAssessInPortfolio: boolean;
+  enforceFeedbackBeforeDiscussedInClass: boolean;
+
+  feedbackWarningThresholdDays: number;
+  feedbackOverflowThresholdDays: number;
+  gradeDefinitions: GradeDefinition[] = [
+    {id: 'fail', value: -1, label: 'Fail', abbreviation: 'F'},
+    {id: 'pass', value: 0, label: 'Pass', abbreviation: 'P'},
+    {id: 'credit', value: 1, label: 'Credit', abbreviation: 'C'},
+    {id: 'distinction', value: 2, label: 'Distinction', abbreviation: 'D'},
+    {id: 'high-distinction', value: 3, label: 'High Distinction', abbreviation: 'HD'},
+  ];
+
+  d2lMapping: D2lAssessmentMapping;
 
   public readonly learningOutcomesCache: EntityCache<LearningOutcome> =
     new EntityCache<LearningOutcome>();
@@ -78,12 +112,10 @@ export class Unit extends Entity {
 
   public readonly groupSetsCache: EntityCache<GroupSet> = new EntityCache<GroupSet>();
 
-  groupMemberships: Array<GroupMembership>;
+  groupMemberships: GroupMembership[];
 
   readonly studentCache: EntityCache<Project> = new EntityCache<Project>();
 
-  analytics: {} = {};
-
   public override toJson<T extends Entity>(
     mappingData: EntityMapping<T>,
     ignoreKeys?: string[],
@@ -93,6 +125,12 @@ export class Unit extends Entity {
     };
   }
 
+  public hasChanges(): boolean {
+    const unitService = AppInjector.get(UnitService);
+    const changes = this.toJson(unitService.mapping);
+    return JSON.stringify(changes) !== '{"unit":{}}';
+  }
+
   public get nameAndPeriod(): string {
     return `${this.name} (${
       this.teachingPeriod ? this.teachingPeriod.name : this.startDate.toLocaleDateString()
@@ -109,6 +147,20 @@ export class Unit extends Entity {
     return this.active && (!this.teachingPeriod || this.teachingPeriod.active);
   }
 
+  public get gradeValues(): number[] {
+    return this.gradeDefinitions
+      .filter((definition) => definition.value >= 0)
+      .map((definition) => definition.value);
+  }
+
+  public gradeLabel(value: number): string {
+    return this.gradeDefinitions.find((definition) => definition.value === value)?.label;
+  }
+
+  public gradeAbbreviation(value: number): string {
+    return this.gradeDefinitions.find((definition) => definition.value === value)?.abbreviation;
+  }
+
   public matches(text: string): boolean {
     return this.code.toLowerCase().indexOf(text) >= 0 || this.name.toLowerCase().indexOf(text) >= 0;
   }
@@ -143,13 +195,35 @@ export class Unit extends Entity {
   }
 
   public findStudent(id: number): Project {
-    return this.students.find((s) => s.id === id);
+    return this.studentCache.get(id);
   }
 
   public studentEnrolled(id: number): boolean {
     return this.findStudent(id)?.enrolled;
   }
 
+  /**
+   * Enrol a student within the unit.
+   *
+   * @param idOrEmail The student id or email of the student to enrol.
+   * @param campus The student's campus
+   * @returns an observer of the post with the student project.
+   */
+  public enrolStudent(idOrEmail: string, campus: Campus): Observable<Project> {
+    const projectService = AppInjector.get(ProjectService);
+
+    return projectService.create(
+      {
+        unit_id: this.id,
+        student_num: idOrEmail,
+        campus_id: campus.id,
+      },
+      {
+        cache: this.studentCache,
+      },
+    );
+  }
+
   public get currentUserIsStaff(): boolean {
     return this.myRole !== 'Student';
   }
@@ -173,7 +247,7 @@ export class Unit extends Entity {
     taskDefinitionService
       .delete({unitId: this.id, id: taskDef.id}, {cache: this.taskDefinitionCache, entity: taskDef})
       .subscribe({
-        next: (response) => {
+        next: () => {
           alerts.success('Task Deleted', 2000);
         },
         error: (message) => alerts.error(message, 6000),
@@ -213,6 +287,56 @@ export class Unit extends Entity {
     }
   }
 
+  /**
+   * Get the total duration of the unit in milliseconds.
+   */
+  public get totalDuration(): number {
+    return this.endDate.valueOf() - this.startDate.valueOf();
+  }
+
+  /**
+   * Get the number of weeks in the unit's teaching period.
+   */
+  public get totalWeeks(): number {
+    return Math.ceil(this.totalDuration / (1000 * 60 * 60 * 24 * 7));
+  }
+
+  /**
+   * Calculate the teaching week number for a given date.
+   * Mirrors the Rails fallback in Unit#week_number when a teaching period
+   * helper is not being used on the frontend.
+   */
+  public weekNumber(date: Date | string): number | null {
+    if (!date || !this.startDate) {
+      return null;
+    }
+
+    if (this.teachingPeriod) {
+      return this.teachingPeriod.weekNumber(date);
+    }
+
+    const targetDate = date instanceof Date ? date : new Date(date);
+    if (Number.isNaN(targetDate.valueOf())) {
+      return null;
+    }
+    const normalizedTargetDate = new Date(
+      targetDate.getFullYear(),
+      targetDate.getMonth(),
+      targetDate.getDate(),
+    );
+    const normalizedStartDate = new Date(
+      this.startDate.getFullYear(),
+      this.startDate.getMonth(),
+      this.startDate.getDate(),
+    );
+    const millisecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
+    return (
+      Math.floor(
+        (normalizedTargetDate.valueOf() - normalizedStartDate.valueOf()) / millisecondsPerWeek,
+      ) + 1
+    );
+  }
+
   /**
    * Calculate how much time has elapsed in the teaching period, based on the start and
    * end date of the unit relative to the current date.
@@ -223,17 +347,23 @@ export class Unit extends Entity {
     const today = new Date();
 
     //use Math.abs to avoid sign
-    if (today <= this.startDate) return 0;
-    if (today >= this.endDate) return 100;
+    if (today <= this.startDate) {
+      return 0;
+    }
+    if (today >= this.endDate) {
+      return 100;
+    }
 
     const startToNow = Math.abs(today.valueOf() - this.startDate.valueOf());
-    const totalDuration = Math.abs(this.endDate.valueOf() - this.startDate.valueOf());
+    const totalDuration = Math.abs(this.totalDuration);
     return Math.round((startToNow / totalDuration) * 100);
   }
 
-  public rolloverTo(body: {start_date: Date; end_date: Date}): Observable<Unit>;
-  public rolloverTo(body: {teaching_period_id: number}): Observable<Unit>;
-  public rolloverTo(body: any): Observable<Unit> {
+  public rolloverTo(
+    body:
+      | {new_unit_code?: string; start_date: Date; end_date: Date}
+      | {new_unit_code?: string; teaching_period_id: number},
+  ): Observable<Unit> {
     const unitService = AppInjector.get(UnitService);
 
     return unitService.create(
@@ -370,7 +500,7 @@ export class Unit extends Entity {
         return alignment.taskDefinition.id === td.id;
       })
       .sort((a: TaskOutcomeAlignment, b: TaskOutcomeAlignment) => {
-        return a.learningOutcome.iloNumber - b.learningOutcome.iloNumber;
+        return a.learningOutcome.id - b.learningOutcome.id;
       });
   }
 
@@ -380,7 +510,11 @@ export class Unit extends Entity {
     }/learning_alignments/csv.json`;
   }
 
-  public taskStatusFactor(td: TaskDefinition): number {
+  public get gradesCSVUploadUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.id}/grades/csv`;
+  }
+
+  public taskStatusFactor(_td: TaskDefinition): number {
     return 1;
   }
 
@@ -388,6 +522,10 @@ export class Unit extends Entity {
     return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.id}/outcomes/csv`;
   }
 
+  public getFeedbackTemplateBatchUploadUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.id}/feedback_chips/csv`;
+  }
+
   public hasStreams(): boolean {
     return this.tutorialStreamsCache.size > 1;
   }
@@ -436,6 +574,15 @@ export class Unit extends Entity {
     return this.groupSetsCache.currentValues;
   }
 
+  public set overseerImage(image: OverseerImage) {
+    this._overseerImage = image;
+    this.overseerImageId = image.id;
+  }
+
+  public get overseerImage(): OverseerImage {
+    return this._overseerImage;
+  }
+
   public get overseerEnabled(): boolean {
     return this.assessmentEnabled && AppInjector.get(DoubtfireConstants).IsOverseerEnabled.value; // && this.overseerImageId !== null && this.overseerImageId !== undefined;
   }
@@ -530,21 +677,180 @@ export class Unit extends Entity {
     }`;
   }
 
+  public getBatchFeedbackUploadUrl(taskDefinition: TaskDefinition | number): string {
+    const params = new URLSearchParams({unit_id: `${this.id}`});
+    const taskDefinitionId =
+      taskDefinition instanceof TaskDefinition ? taskDefinition.id : taskDefinition;
+
+    params.set('task_definition_id', `${taskDefinitionId}`);
+
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/submission/batch_feedback_csv.json?${params.toString()}`;
+  }
+
   public getTaskDefinitionBatchUploadUrl(): string {
     return `${AppInjector.get(DoubtfireConstants).API_URL}/csv/task_definitions?unit_id=${this.id}`;
   }
 
-  public downloadTaskCompletionCsv(): void {
-    AppInjector.get(FileDownloaderService).downloadFile(
-      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/task_completion.json`,
-      `${this.name}-task-completion.csv`,
+  public downloadTaskCompletionCsv(): Observable<SidekiqJob> {
+    return AppInjector.get(HttpClient).get<SidekiqJob>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/task_completion`,
+    );
+  }
+
+  public downloadTasksAwaitingFeedbackCsv(): Observable<SidekiqJob> {
+    return AppInjector.get(HttpClient).get<SidekiqJob>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/tasks_awaiting_feedback`,
+    );
+  }
+
+  public downloadTaskAssessmentCountsCsv(): Observable<SidekiqJob> {
+    return AppInjector.get(HttpClient).get<SidekiqJob>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/task_assessment_counts`,
+    );
+  }
+
+  public downloadOverflowTaskClaimsCsv(): Observable<SidekiqJob> {
+    return AppInjector.get(HttpClient).get<SidekiqJob>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/overflow_task_claims`,
+    );
+  }
+
+  public downloadTutorAssessmentCsv(): Observable<SidekiqJob> {
+    return AppInjector.get(HttpClient).get<SidekiqJob>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/tutor_assessments`,
+    );
+  }
+
+  public getUserMarkingSessions(
+    startDate?: Date,
+    endDate?: Date,
+    timezone?: string,
+  ): Observable<MarkingSession[]> {
+    let params = new HttpParams();
+    if (startDate) {
+      params = params.set(
+        'start_date',
+        `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')}`,
+      );
+    }
+
+    if (endDate) {
+      params = params.set(
+        'end_date',
+        `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')}`,
+      );
+    }
+
+    params = params.set('timezone', timezone);
+
+    // TODO: we should cache the data by the same start/end date
+    const markingSessionService = AppInjector.get(MarkingSessionService);
+    return markingSessionService.fetchAll(
+      {
+        unitId: this.id,
+      },
+      {params, constructorParams: this},
     );
   }
 
-  public downloadTutorAssessmentCsv(): void {
+  public downloadTutorTimesSummaryCsv(
+    startDate?: Date,
+    endDate?: Date,
+    timezone?: string,
+    ignoreSessionsDuringTutorials?: boolean,
+  ): Observable<SidekiqJob> {
+    let params = new HttpParams();
+
+    if (startDate) {
+      params = params.set(
+        'start_date',
+        `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')}`,
+      );
+    }
+
+    if (endDate) {
+      params = params.set(
+        'end_date',
+        `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')}`,
+      );
+    }
+
+    params = params.set('timezone', timezone);
+
+    params = params.set('ignore_sessions_during_tutorials', ignoreSessionsDuringTutorials ?? false);
+
+    return AppInjector.get(HttpClient).get<SidekiqJob>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/tutor_times_summary`,
+      {params},
+    );
+  }
+
+  public downloadMyTutorTimeSessionsCsv(
+    startDate?: Date,
+    endDate?: Date,
+    timezone?: string,
+  ): Observable<SidekiqJob> {
+    let params = new HttpParams();
+
+    if (startDate) {
+      params = params.set(
+        'start_date',
+        `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')}`,
+      );
+    }
+
+    if (endDate) {
+      params = params.set(
+        'end_date',
+        `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')}`,
+      );
+    }
+
+    params = params.set('timezone', timezone);
+
+    return AppInjector.get(HttpClient).get<SidekiqJob>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/my_marking_sessions`,
+      {params},
+    );
+  }
+
+  public hasD2lMapping(): boolean {
+    const doubtfireConstants = AppInjector.get(DoubtfireConstants);
+    return (
+      doubtfireConstants.IsD2LEnabled.value &&
+      this.d2lMapping !== undefined &&
+      this.d2lMapping.orgUnitId !== undefined &&
+      this.d2lMapping.orgUnitId.length > 0
+    );
+  }
+
+  public loadD2lMapping(): Observable<D2lAssessmentMapping> {
+    const d2lMappingSvc = AppInjector.get(D2lAssessmentMappingService);
+
+    return d2lMappingSvc.get({unitId: this.id}).pipe(
+      tap((mappings) => {
+        this.d2lMapping = mappings;
+      }),
+    );
+  }
+
+  public get staffNotesCsvDownloadUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/staff_notes`;
+  }
+
+  public downloadStaffNotesCsv(): void {
     AppInjector.get(FileDownloaderService).downloadFile(
-      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/tutor_assessments.json`,
-      `${this.name}-tutor-assessments.csv`,
+      `${AppInjector.get(DoubtfireConstants).API_URL}/csv/units/${this.id}/staff_notes`,
+      `${this.name}-StaffNotes.csv`,
     );
   }
+
+  public get taskDefinitionsPrerequisitesUrl(): string {
+    return `${AppInjector.get(DoubtfireConstants).API_URL}/units/${this.id}/task_prerequisites`;
+  }
+
+  public getTaskPrerequisites(): Observable<TaskPrerequisite[]> {
+    const prerequisiteService = AppInjector.get(TaskPrerequisiteService);
+    return prerequisiteService.getUnitPrerequisites(this.id);
+  }
 }
diff --git a/src/app/api/models/user/user.ts b/src/app/api/models/user/user.ts
index 10357a1898..23272b320c 100644
--- a/src/app/api/models/user/user.ts
+++ b/src/app/api/models/user/user.ts
@@ -1,31 +1,41 @@
-import { HttpClient } from '@angular/common/http';
-import { Entity, EntityMapping } from 'ngx-entity-service';
-import { Observable, map } from 'rxjs';
-import { AppInjector } from 'src/app/app-injector';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { AuthenticationService } from '../doubtfire-model';
+import {Entity, EntityMapping} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Observable, map} from 'rxjs';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 
 export type Tutor = User;
 
 export class User extends Entity {
-  id: number;
-  firstName: string;
-  lastName: string;
-  optInToResearch: boolean;
-  studentId: string;
-  email: string;
-  username: string;
-  nickname: string;
-  systemRole: 'Admin' | 'Convenor' | 'Tutor' | 'Student' | 'Auditor';
-  receiveTaskNotifications: boolean;
-  receivePortfolioNotifications: boolean;
-  receiveFeedbackNotifications: boolean;
-  hasRunFirstTimeSetup: boolean;
-  authenticationToken: string;
-  pronouns: string | null;
-  acceptedTiiEula: boolean;
+  public id: number;
+  public firstName: string;
+  public lastName: string;
+  public optInToResearch: boolean;
+  public studentId: string;
+  public email: string;
+  public username: string;
+  public nickname: string;
+  public displayName: string;
+  public systemRole: 'Admin' | 'Convenor' | 'Tutor' | 'Student' | 'Auditor';
+  public receiveTaskNotifications: boolean;
+  public receivePortfolioNotifications: boolean;
+  public receiveFeedbackNotifications: boolean;
+  public displayPeerProgress: boolean;
+  public themePreference: 'light' | 'dark' | 'system' | null;
+  public themePreferenceUpdatedAt: string | null;
+  public hasRunFirstTimeSetup: boolean;
+  public authenticationToken: string;
+  public authenticationTokenExpiry: string;
+  public pronouns: string | null;
+  public acceptedTiiEula: boolean;
 
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  // LTI Token
+  public ltik: string;
+
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
       user: super.toJson(mappingData, ignoreKeys),
     };
@@ -40,16 +50,26 @@ export class User extends Entity {
   }
 
   public get name(): string {
-    const fn = this.firstName.slice(0, 11);
-    const sn = this.lastName.slice(0, 11);
-    const nn = this.nickname && this.nickname.trim() ? ` (${this.nickname.trim().slice(0, 11)})` : '';
-    return `${fn} ${sn}${nn}`;
+    const fn = (this.firstName ?? '').slice(0, 11).trim();
+    const sn = (this.lastName ?? '').slice(0, 11).trim();
+    const nn =
+      this.nickname && this.nickname.trim() ? ` (${this.nickname.trim().slice(0, 11).trim()})` : '';
+    return `${fn} ${sn}${nn}`.trim();
+  }
+
+  public get preferredName(): string {
+    const nickname = this.nickname?.trim();
+    const firstName = this.firstName?.trim() ?? '';
+    if (nickname) {
+      return nickname;
+    }
+    return firstName;
   }
 
   public matches(text: string): boolean {
     return (
       this.studentId?.toLowerCase().indexOf(text) >= 0 ||
-      this.name.toLowerCase().indexOf(text) >= 0 ||
+      this.displayName?.toLowerCase().indexOf(text) >= 0 ||
       this.firstName.toLowerCase().indexOf(text) >= 0 ||
       this.lastName.toLowerCase().indexOf(text) >= 0 ||
       this.email.toLowerCase().indexOf(text) >= 0 ||
@@ -60,10 +80,12 @@ export class User extends Entity {
   public acceptTiiEula(): Observable<boolean> {
     const httpClient = AppInjector.get(HttpClient);
     const uri = `${AppInjector.get(DoubtfireConstants).API_URL}/tii_eula/users/${this.id}/accept`;
-    return httpClient.put(uri, {}).pipe(map(() => {
-      this.acceptedTiiEula = true;
-      AppInjector.get(AuthenticationService).saveCurrentUser();
-      return true;
-    }));
+    return httpClient.put(uri, {}).pipe(
+      map(() => {
+        this.acceptedTiiEula = true;
+        // AppInjector.get(AuthenticationService).saveCurrentUser();
+        return true;
+      }),
+    );
   }
 }
diff --git a/src/app/api/models/webcal/webcal.ts b/src/app/api/models/webcal/webcal.ts
index 26dab8e18f..d42f78bd2e 100644
--- a/src/app/api/models/webcal/webcal.ts
+++ b/src/app/api/models/webcal/webcal.ts
@@ -1,10 +1,11 @@
-import { Entity, EntityMapping } from 'ngx-entity-service';
+import {Entity, EntityMapping} from 'ngx-entity-service';
 
 export class Webcal extends Entity {
   enabled: boolean;
   id: number;
   guid: string;
   includeStartDates: boolean;
+  includeLearningSessions: boolean = false;
   userId: number;
   reminder: {
     time: number;
@@ -15,7 +16,10 @@ export class Webcal extends Entity {
   // Used only when updating the webcal. Never returned from the API.
   shouldChangeGuid?: boolean;
 
-  public override toJson<T extends Entity>(mappingData: EntityMapping<T>, ignoreKeys?: string[]): object {
+  public override toJson<T extends Entity>(
+    mappingData: EntityMapping<T>,
+    ignoreKeys?: string[],
+  ): object {
     return {
       webcal: super.toJson(mappingData, ignoreKeys),
     };
diff --git a/src/app/api/services/activity-type.service.ts b/src/app/api/services/activity-type.service.ts
index bd89cb9256..9d5110894e 100644
--- a/src/app/api/services/activity-type.service.ts
+++ b/src/app/api/services/activity-type.service.ts
@@ -1,8 +1,8 @@
-import { ActivityType } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { CachedEntityService } from 'ngx-entity-service';
-import API_URL from 'src/app/config/constants/apiURL';
-import { HttpClient } from '@angular/common/http';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {ActivityType} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class ActivityTypeService extends CachedEntityService<ActivityType> {
@@ -11,16 +11,12 @@ export class ActivityTypeService extends CachedEntityService<ActivityType> {
   constructor(httpClient: HttpClient) {
     super(httpClient, API_URL);
 
-    this.mapping.addKeys(
-      'id',
-      'name',
-      'abbreviation',
-    );
+    this.mapping.addKeys('id', 'name', 'abbreviation');
 
     this.mapping.mapAllKeysToJsonExcept('id');
   }
 
-  public createInstanceFrom(json: object, other?: any): ActivityType {
+  public createInstanceFrom(_json: object): ActivityType {
     return new ActivityType();
   }
 }
diff --git a/src/app/api/services/authentication.service.ts b/src/app/api/services/authentication.service.ts
index b2cb12f402..bdf1181edd 100644
--- a/src/app/api/services/authentication.service.ts
+++ b/src/app/api/services/authentication.service.ts
@@ -1,111 +1,219 @@
-import {User, UserService} from 'src/app/api/models/doubtfire-model';
-import {Inject, Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
-import {StateService, UIRouter, UIRouterGlobals} from '@uirouter/angular';
-import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+import {Injectable} from '@angular/core';
+import {Router} from '@angular/router';
+import {
+  AsyncSubject,
+  EMPTY,
+  Observable,
+  Subject,
+  Subscription,
+  catchError,
+  map,
+  of,
+  switchMap,
+  takeUntil,
+  tap,
+  throwError,
+} from 'rxjs';
+import {User, UserService} from 'src/app/api/models/doubtfire-model';
+import {NotificationService} from 'src/app/api/services/notification.service';
+import {PushNotificationService} from 'src/app/api/services/push-notification.service';
 import {AppInjector} from 'src/app/app-injector';
-import {map, Observable} from 'rxjs';
 import {AlertService} from 'src/app/common/services/alert.service';
+import {ThemeService} from 'src/app/common/theme/theme.service';
+import {
+  type AuthenticatedSettingsResponseFormat,
+  DoubtfireConstants,
+} from 'src/app/config/constants/doubtfire-constants';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+import {buildAuthCallbackFragment} from 'src/app/security/auth-callback';
+import {AuthReturnUrlService} from 'src/app/security/auth-return-url.service';
+
+/**
+ * The format for the data returned from the auth api.
+ */
+interface AuthResponse {
+  user: object;
+  auth_token: string;
+  auth_token_expiry: string;
+  lti_token?: string;
+}
 
 @Injectable()
 export class AuthenticationService {
+  /**
+   * The URL for the authentication API endpoint
+   */
+  private readonly AUTH_URL: string;
+
+  /**
+   * The key used to store the username in local storage - now removed.
+   */
+  public readonly USERNAME_KEY: string = 'doubtfire_user';
+
+  /**
+   * The key used to store the remember me option in local storage.
+   */
+  public readonly REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN: string =
+    'remember_doubtfire_credentials_token';
+
+  /**
+   * AsyncSubject to indicate when the authentication process is complete.
+   */
+  private authComplete$: AsyncSubject<boolean> = new AsyncSubject<boolean>();
+
+  /**
+   * Cancels a protected settings request as soon as sign out starts. A plain
+   * Subject is intentional: requests created by a later session must not see a
+   * previous session's cancellation event.
+   */
+  private authenticatedSettingsCancellation$: Subject<void> = new Subject<void>();
+
+  /**
+   * Changes on sign out so a response belonging to an earlier session cannot
+   * publish settings or complete authentication for the current session.
+   */
+  private authenticationGeneration = 0;
+
+  /**
+   * Only the newest settings response for the current session may update the
+   * singleton constants. Token refresh can legitimately overlap a prior read.
+   */
+  private authenticatedSettingsRequestId = 0;
+
   constructor(
     private httpClient: HttpClient,
     private userService: UserService,
     private alertService: AlertService,
-    private state: StateService,
+    private angularRouter: Router,
     private doubtfireConstants: DoubtfireConstants,
-    private router: UIRouter,
-    private uiRouterGlobals: UIRouterGlobals,
+    private demoMode: DemoModeStore,
+    private authReturnUrl: AuthReturnUrlService,
+    private themeService: ThemeService,
   ) {
     this.AUTH_URL = `${this.doubtfireConstants.API_URL}/auth`;
+    // Ensure any only user data is removed from local storage
+    this.browserStorage?.removeItem(this.USERNAME_KEY);
   }
 
-  public checkUserCookie(): void {
-    const userData = JSON.parse(localStorage.getItem(this.USERNAME_KEY));
-    const user = new User();
-    Object.assign(user, userData);
-
-    if (userData && this.tryChangeUser(user)) {
-      // Ensure current user is in cache
-      this.userService.cache.add(user);
-      this.userService.currentUser = user;
+  private actionAuthFailed() {
+    this.authReturnUrl.rememberCurrentUrl();
+    this.signOut(false);
+  }
 
-      const resetTime = new Date(
-        Number.parseInt(localStorage.getItem(this.DOUBTFIRE_LOGIN_TIME)) + 60 * 60 * 1000,
-      );
-      const waitTime = resetTime.valueOf() - new Date().valueOf();
+  /**
+   * Attempt to login using the refresh token secure cookie.
+   * This requires the remember option to be true - and the server to have sent a
+   * secure cookie.
+   * @param loginResultCallback - Callback function to indicate success or failure of login.
+   */
+  public attemptLoginUsingRefreshToken(
+    loginResultCallback: (result: boolean) => void,
+    firstTime: boolean = true,
+  ): void {
+    // Check we have indication of secure cookie in local storage
+    const remember: boolean = this.rememberMe;
 
-      setTimeout(() => this.updateAuth(), waitTime);
+    if (!remember) {
+      loginResultCallback(false);
+      return;
     }
-  }
 
-  private readonly AUTH_URL: string;
-  public readonly USERNAME_KEY: string = 'doubtfire_user';
-  public readonly REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN: string =
-    'remember_doubtfire_credentials_token';
-  public readonly DOUBTFIRE_LOGIN_TIME: string = 'doubtfire_login_time';
+    const authenticationGeneration = this.authenticationGeneration;
 
-  public saveCurrentUser(
-    remember: boolean = localStorage.getItem(this.REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN) === 'true',
-  ): void {
-    if (remember && this.userService.currentUser.id) {
-      localStorage.setItem(this.USERNAME_KEY, JSON.stringify(this.userService.currentUser));
-      localStorage.setItem(this.REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN, 'true');
-      localStorage.setItem(this.DOUBTFIRE_LOGIN_TIME, JSON.stringify(new Date().getTime()));
-    } else {
-      localStorage.removeItem(this.USERNAME_KEY);
-      localStorage.setItem(this.REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN, 'false');
-      localStorage.removeItem(this.DOUBTFIRE_LOGIN_TIME);
-    }
+    // Attempt to get an access token using the refresh token cookie
+    this.httpClient.post(this.AUTH_URL + '/access-token', {}).subscribe({
+      next: (response: AuthResponse | null) => {
+        if (authenticationGeneration !== this.authenticationGeneration) {
+          return;
+        }
+
+        if (response && response.auth_token) {
+          this.setupUserFromResponse(response, firstTime, authenticationGeneration).subscribe({
+            next: () => loginResultCallback(true),
+            error: () => {
+              this.actionAuthFailed();
+              loginResultCallback(false);
+            },
+          });
+        } else {
+          this.actionAuthFailed();
+          loginResultCallback(false);
+        }
+      },
+      error: (_error) => {
+        if (authenticationGeneration !== this.authenticationGeneration) {
+          return;
+        }
+
+        // Will occur on 404 when the refresh token cookie is not present
+        this.actionAuthFailed();
+        loginResultCallback(false);
+      },
+    });
   }
 
+  /**
+   * Check if the user is authenticated.
+   *
+   * @returns true if the user is authenticated, false otherwise.
+   */
   public isAuthenticated(): boolean {
-    return this.userService.currentUser.id !== undefined;
+    return (
+      this.userService.currentUser.id !== undefined &&
+      !!this.userService.currentUser.authenticationToken
+    );
   }
 
-  private updateAuth() {
-    if (!this.isAuthenticated()) {
-      return;
-    }
+  public get rememberMe(): boolean {
+    return this.browserStorage?.getItem(this.REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN) !== 'false';
+  }
 
-    const remember: boolean =
-      localStorage.getItem(this.REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN) === 'true';
-    localStorage.setItem(this.DOUBTFIRE_LOGIN_TIME, JSON.stringify(new Date().getTime()));
-
-    this.httpClient
-      .put(this.AUTH_URL, {
-        username: this.userService.currentUser.username,
-        remember: remember,
-      })
-      .subscribe({
-        next: (response) => {
-          this.userService.currentUser.authenticationToken = response['auth_token'];
-          this.saveCurrentUser(remember);
-
-          // Update auth each hour
-          setTimeout(() => this.updateAuth(), 1000 * 60 * 60);
-        },
-      });
+  public set rememberMe(remember: boolean) {
+    this.browserStorage?.setItem(
+      this.REMEMBER_DOUBTFIRE_CREDENTIALS_TOKEN,
+      remember ? 'true' : 'false',
+    );
   }
 
-  private tryChangeUser(user: User, remember?: boolean) {
-    if (user) {
-      // Clear the current user object and populate it with the new values.
-      // Note how the actual user object reference doesn't change.
-      // delete currentUser[prop] for prop of currentUser
-      // _.extend currentUser, user
-      this.userService.currentUser = user;
-      this.saveCurrentUser(remember);
+  private get browserStorage(): Storage | null {
+    try {
+      return globalThis.localStorage ?? null;
+    } catch {
+      return null;
+    }
+  }
 
-      return true;
-    } else {
-      return false;
+  /**
+   * Get a new access token - and delete the old one.
+   *
+   * @returns void
+   */
+  private cycleAccessToken() {
+    const remember: boolean = this.rememberMe;
+
+    // We cant get a new token if there is no refresh token cookie
+    if (!this.isAuthenticated() || !remember) {
+      return;
     }
+
+    // Attempt to get a new access token using the refresh token cookie
+    this.attemptLoginUsingRefreshToken((result: boolean) => {
+      if (result) {
+        console.log('Successfully refreshed access token');
+      }
+    });
   }
 
-  private readonly validRoles: string[] = ['anon', 'Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'];
+  private readonly validRoles: string[] = [
+    'anon',
+    'Student',
+    'Tutor',
+    'Convenor',
+    'Admin',
+    'Auditor',
+  ];
 
   private isValidRoleWhitelist(roleWhitelist: string[]) {
     return roleWhitelist.filter((role: string) => this.validRoles.includes(role)).length !== 0;
@@ -123,6 +231,140 @@ export class AuthenticationService {
     );
   }
 
+  private isCurrentAuthentication(userId: number, authenticationGeneration: number): boolean {
+    return (
+      authenticationGeneration === this.authenticationGeneration &&
+      userId === this.userService.currentUser.id &&
+      !!this.userService.currentUser.authenticationToken
+    );
+  }
+
+  private loadAuthenticatedSettings(
+    userId: number,
+    authenticationGeneration: number,
+  ): Observable<void> {
+    const url: string = `${this.doubtfireConstants.API_URL}/settings`;
+    const requestId = ++this.authenticatedSettingsRequestId;
+
+    return this.httpClient.get<AuthenticatedSettingsResponseFormat>(url).pipe(
+      takeUntil(this.authenticatedSettingsCancellation$),
+      switchMap((settings) => {
+        if (
+          !this.isCurrentAuthentication(userId, authenticationGeneration) ||
+          requestId !== this.authenticatedSettingsRequestId
+        ) {
+          return EMPTY;
+        }
+
+        this.doubtfireConstants.applyAuthenticatedSettings(settings);
+
+        return of(void 0);
+      }),
+      catchError((error) => {
+        if (
+          !this.isCurrentAuthentication(userId, authenticationGeneration) ||
+          requestId !== this.authenticatedSettingsRequestId
+        ) {
+          return EMPTY;
+        }
+
+        // A failed settings read must not leave a previous session's feature
+        // flags or VAPID key active. Stale overlapping requests return above and
+        // cannot reset or publish authentication readiness.
+        this.doubtfireConstants.resetAuthenticatedSettings();
+        console.error('Unable to load authenticated settings', error);
+
+        // Settings are fail closed, but their availability must not turn valid
+        // credentials into a failed sign in.
+        return of(void 0);
+      }),
+    );
+  }
+
+  /**
+   * Use the user service to get or create a user object, and update it
+   * from the response. Ensure that the authentication token is set.
+   *
+   * @param response the response from the authentication API
+   */
+  private setupUserFromResponse(
+    response: AuthResponse,
+    firstTime: boolean = true,
+    authenticationGeneration: number = this.authenticationGeneration,
+  ): Observable<void> {
+    // Extract relevant data from response and construct user object to store in cache.
+    const user: User = this.userService.cache.getOrCreate(
+      response.user['id'],
+      this.userService,
+      response.user,
+    );
+
+    // Set the user's authentication token for access to api.
+    user.authenticationToken = response['auth_token'];
+    user.authenticationTokenExpiry = response['auth_token_expiry'];
+
+    // This path also runs on hourly token refresh and can receive overlapping
+    // sign-ins. Capture the prior account identity before replacing currentUser:
+    // only a refresh for the same account may keep the existing save closure.
+    const previousAuthenticatedUserId = this.isAuthenticated()
+      ? this.userService.currentUser.id
+      : undefined;
+
+    // Record the current user
+    this.userService.currentUser = user;
+
+    // Connect only on a real sign-in/session restore. Hourly token refreshes keep
+    // the existing connection and therefore cannot clobber a mid-session choice.
+    if (previousAuthenticatedUserId !== user.id) {
+      this.themeService.connectAccount(
+        user.id,
+        user.themePreference,
+        user.themePreferenceUpdatedAt,
+        (preference) =>
+          this.userService.updateThemePreference(user, preference).pipe(
+            map((updatedUser) => ({
+              preference: updatedUser.themePreference,
+              updatedAt: updatedUser.themePreferenceUpdatedAt,
+            })),
+          ),
+      );
+    }
+
+    // Feature flags are part of authentication readiness. Consumers use their
+    // current values synchronously, so do not load globals, publish authComplete
+    // or complete signIn until this authenticated request has settled.
+    return this.loadAuthenticatedSettings(user.id, authenticationGeneration).pipe(
+      tap(() => {
+        if (firstTime) {
+          // Load everything!
+          AppInjector.get(GlobalStateService).loadGlobals();
+          // Update token in one hour
+          setTimeout(() => this.cycleAccessToken(), 1000 * 60 * 60);
+        }
+
+        // Indicate that authentication and its protected settings are ready.
+        this.authComplete$.next(true);
+        this.authComplete$.complete();
+      }),
+    );
+  }
+
+  /**
+   * Register a callback to be called when the authentication process is complete.
+   * This is used by the runtime.coffee for now to check authorisation after login
+   * completes. The callback will be called with true if user is authorised and if
+   * not will redirect to another page.
+   *
+   * @param callback the callback function to call
+   */
+  public afterAuthCall(callback: (result: boolean) => void): Subscription {
+    return this.authComplete$.subscribe({
+      next: (result) => {
+        callback(result);
+      },
+    });
+  }
+
   public signIn(
     userCredentials:
       | {
@@ -135,60 +377,197 @@ export class AuthenticationService {
           username: string;
           remember: boolean;
         },
-  ): Observable<any> {
-    return this.httpClient.post(this.AUTH_URL, userCredentials).pipe(
-      map((response: any) => {
-        // Extract relevant data from response and construct user object to store in cache.
-        const user: User = this.userService.cache.getOrCreate(
-          response['user']['id'],
-          this.userService,
-          response['user'],
-        );
+  ): Observable<void> {
+    const authenticationGeneration = this.authenticationGeneration;
 
-        user.authenticationToken = response['auth_token'];
+    return this.httpClient.post(this.AUTH_URL, userCredentials).pipe(
+      switchMap((response: AuthResponse) =>
+        authenticationGeneration === this.authenticationGeneration
+          ? this.setupUserFromResponse(response, true, authenticationGeneration)
+          : EMPTY,
+      ),
+      catchError((error) => {
+        // this.authComplete$.next(false);
+        // this.authComplete$.complete();
 
-        if (this.tryChangeUser(user, userCredentials.remember)) {
-          AppInjector.get(GlobalStateService).loadGlobals();
-        } else {
-          return new Error('Failed to change user');
-        }
+        return throwError(() => error);
+      }),
+    );
+  }
 
-        // Update token in one hour
-        setTimeout(() => this.updateAuth(), 1000 * 60 * 60);
+  public signInWithLti(userCredentials: {ltik: string; lti_token: string}): Observable<void> {
+    return this.httpClient.post(`${this.AUTH_URL}/lti`, userCredentials).pipe(
+      map((response: AuthResponse) => {
+        const fragment = buildAuthCallbackFragment({
+          username: response.user['username'],
+          authToken: response.auth_token,
+          ltik: userCredentials.ltik,
+          isLtiLogin: true,
+        });
+        setTimeout(() => {
+          window.location.href = `/sign_in#${fragment}`;
+        });
+      }),
+      catchError((error) => {
+        return throwError(() => error);
       }),
     );
   }
 
+  // Removes this user's unsent comment drafts from browser storage, along with
+  // any left over from before drafts were scoped to a user, which belong to
+  // nobody and would otherwise sit there for good.
+  //
+  // Keys are collected first and deleted afterwards. Calling removeItem inside a
+  // forward loop over localStorage.key(i) shifts the indices along and skips
+  // every second match.
+  private clearCommentDrafts(userId?: number): void {
+    const draftPrefix = 'task_comment_draft_';
+    const userPrefix = userId ? `${draftPrefix}uid${userId}_` : null;
+
+    try {
+      const doomed: string[] = [];
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (!key || !key.startsWith(draftPrefix)) {
+          continue;
+        }
+        // This user's drafts, and the old unscoped keys which have a task id
+        // straight after the prefix rather than a user id.
+        if ((userPrefix && key.startsWith(userPrefix)) || !this.isUserScopedDraftKey(key)) {
+          doomed.push(key);
+        }
+      }
+      doomed.forEach((key) => localStorage.removeItem(key));
+    } catch (e) {
+      console.error('Error clearing comment drafts:', e);
+    }
+
+    try {
+      if (userId) {
+        sessionStorage.removeItem(`task_comments_submitted_${userId}`);
+      }
+      sessionStorage.removeItem('task_comments_submitted');
+    } catch (e) {
+      console.error('Error clearing submitted comment tasks:', e);
+    }
+  }
+
+  // A scoped key is task_comment_draft_uid<userId>_<rest>. Anything else under
+  // the prefix was written before drafts were scoped to a user, belongs to
+  // nobody, and nothing will ever read it again. A legacy key starts with a task
+  // or project id, or the literal 'unknown', so it can never begin with uid
+  // followed by digits.
+  private isUserScopedDraftKey(key: string): boolean {
+    const rest = key.substring('task_comment_draft_'.length);
+    return /^uid\d+_/.test(rest);
+  }
+
   public signOut(ssoSignOut = true): void {
+    if (ssoSignOut) {
+      this.authReturnUrl.clear();
+    }
+
+    this.demoMode.reset();
+
+    // Cancel any debounced/in-flight account write for this session. The local
+    // theme keys intentionally remain so the next boot stays flash-free.
+    this.themeService.disconnectAccount();
+
+    // Invalidate authentication work before the asynchronous push and token
+    // teardown. This prevents a late /settings response from restoring values
+    // after sign out or completing an obsolete sign-in observable.
+    this.authenticationGeneration += 1;
+    this.authenticatedSettingsRequestId += 1;
+    this.authenticatedSettingsCancellation$.next();
+    this.doubtfireConstants.resetAuthenticatedSettings();
+
+    // This function is called after the token is deleted...
     const doSignOut = () => {
-      this.tryChangeUser(this.userService.anonymousUser, false);
+      // Setup ability to auth again
+      this.authComplete$.complete();
+      this.authComplete$ = new AsyncSubject<boolean>();
+
+      // Unsent comment drafts live in browser storage and sign out routes rather
+      // than reloading, so nothing else drops them. Clear them before the current
+      // user is replaced, otherwise the prefix is built from the anonymous user
+      // and nothing matches.
+      this.clearCommentDrafts(this.userService.currentUser?.id);
+
+      // Change the current user to the anonymous user
+      this.userService.currentUser = this.userService.anonymousUser;
+
+      // Clear global state
       const globalStateService = AppInjector.get(GlobalStateService);
+      globalStateService.clearUnitsAndProjects();
+      this.userService.cache.clear();
+
+      // Notifications are per user and NotificationService is a root singleton,
+      // so its cache and unread count outlive the session. Sign out routes
+      // rather than reloading, so nothing else drops them and the next person on
+      // a shared machine would see this user's messages.
+      AppInjector.get(NotificationService).reset();
+
+      // Trigger the UI changes
       globalStateService.hideHeader();
       globalStateService.setView(ViewType.OTHER);
-      globalStateService.clearUnitsAndProjects();
 
-      // if string is not null
+      // if we have a signout URL, redirect to it
       if (ssoSignOut && this.doubtfireConstants.SignoutURL) {
         window.location.assign(this.doubtfireConstants.SignoutURL);
       } else {
-        this.state.go('sign_in');
+        this.angularRouter.navigateByUrl('/sign_in');
       }
     };
 
+    // If we have a token, delete it...
+    const deleteTokenAndSignOut = () => {
+      if (this.userService.currentUser.authenticationToken) {
+        this.httpClient.delete(this.AUTH_URL, {params: {remember: false}}).subscribe({
+          next: (_response) => doSignOut(),
+          error: (_response) => doSignOut(),
+        });
+      } else {
+        doSignOut();
+      }
+    };
+
+    // Drop the push registration before the auth token goes.
+    //
+    // The subscription belongs to whoever enabled it, and the browser keeps it
+    // across sign out. On a shared machine that means the next person to sign in
+    // would keep receiving the previous user's notifications on this device.
+    //
+    // Order matters twice over. DELETE /push_subscriptions needs the token, so
+    // it has to run first, and sign out must never be blocked by it, so both
+    // outcomes continue. Resolved through AppInjector rather than the
+    // constructor to avoid a circular dependency, the same as GlobalStateService
+    // above.
     if (this.userService.currentUser.authenticationToken) {
-      this.httpClient.delete(this.AUTH_URL).subscribe({
-        next: (_response) => doSignOut(),
-        error: (_response) => doSignOut(),
-      });
+      AppInjector.get(PushNotificationService)
+        .unsubscribeQuietly()
+        .subscribe({
+          next: () => deleteTokenAndSignOut(),
+          error: () => deleteTokenAndSignOut(),
+        });
     } else {
-      doSignOut();
+      deleteTokenAndSignOut();
     }
   }
 
   public timeoutAuthentication(): void {
-    if (this.uiRouterGlobals.current.name !== 'timeout') {
+    if (window.location.pathname !== '/timeout') {
+      this.authReturnUrl.rememberCurrentUrl();
       this.alertService.error('Authentication timed out', 6000);
-      setTimeout(() => this.router.stateService.go('timeout'), 500);
+      setTimeout(() => this.angularRouter.navigateByUrl('/timeout'), 500);
     }
   }
+
+  public getScormToken(): Observable<string> {
+    return this.httpClient.get(this.AUTH_URL + '/scorm').pipe(
+      map((response) => {
+        return response['scorm_auth_token'];
+      }),
+    );
+  }
 }
diff --git a/src/app/api/services/calendar-event-builder.spec.ts b/src/app/api/services/calendar-event-builder.spec.ts
new file mode 100644
index 0000000000..8d950367fa
--- /dev/null
+++ b/src/app/api/services/calendar-event-builder.spec.ts
@@ -0,0 +1,181 @@
+import {describe, expect, it} from 'vitest';
+import {Project} from '../models/project';
+import {Task} from '../models/task';
+import {TaskDefinition} from '../models/task-definition';
+import {Unit} from '../models/unit';
+import {buildCalendarEvent} from './calendar-event-builder';
+
+function buildTask(overrides: {
+  unitCode?: string;
+  abbreviation?: string;
+  name?: string;
+  taskDefId?: number;
+  dueDate?: Date;
+}): Task {
+  const unit = new Unit();
+  unit.code = overrides.unitCode ?? 'COS10001';
+  unit.allowFlexibleDates = false;
+
+  const definition = new TaskDefinition(unit);
+  definition.id = overrides.taskDefId ?? 42;
+  definition.abbreviation = overrides.abbreviation ?? '1.1P';
+  definition.name = overrides.name ?? 'Hello World';
+  definition.targetDate = undefined;
+
+  const task = new Task(unit);
+  task.definition = definition;
+  task.dueDate = overrides.dueDate;
+
+  return task;
+}
+
+describe('buildCalendarEvent', () => {
+  it('builds the title, uid and date for a normal task', () => {
+    const dueDate = new Date(2026, 8, 15);
+    const task = buildTask({
+      unitCode: 'COS10001',
+      abbreviation: '1.1P',
+      name: 'Hello World',
+      taskDefId: 42,
+      dueDate,
+    });
+
+    const event = buildCalendarEvent(task);
+
+    expect(event).not.toBeNull();
+    expect(event.title).toBe('COS10001: 1.1P: Hello World');
+    expect(event.uid).toBe('E-42');
+    expect(event.date).toBe('2026-09-15');
+  });
+
+  it('returns null when the task has no resolvable due date', () => {
+    const task = buildTask({dueDate: undefined});
+
+    const event = buildCalendarEvent(task);
+
+    expect(event).toBeNull();
+  });
+
+  it('returns null when the resolved due date is invalid', () => {
+    const task = buildTask({dueDate: new Date(Number.NaN)});
+
+    const event = buildCalendarEvent(task);
+
+    expect(event).toBeNull();
+  });
+
+  it('returns the title raw and unescaped, leaving escaping to the consumer', () => {
+    const dueDate = new Date(2026, 8, 15);
+    const task = buildTask({
+      unitCode: 'COS10001',
+      abbreviation: '1.1P',
+      name: "Report, Part 1; Draft's Notes",
+      dueDate,
+    });
+
+    const event = buildCalendarEvent(task);
+
+    // Raw comma, semicolon and apostrophe survive untouched. Neither URL-encoding nor
+    // ICS text-escaping (backslash before , ; and newlines) has been applied here. Both
+    // are the consumer's responsibility at the point each is serialized.
+    expect(event.title).toBe("COS10001: 1.1P: Report, Part 1; Draft's Notes");
+  });
+
+  it('returns null instead of throwing when a flexible-dates task has no project set', () => {
+    const unit = new Unit();
+    unit.code = 'COS10001';
+    unit.allowFlexibleDates = true;
+
+    const definition = new TaskDefinition(unit);
+    definition.id = 42;
+    definition.abbreviation = '1.1P';
+    definition.name = 'Hello World';
+    definition.targetDate = new Date(2026, 8, 20);
+
+    const task = new Task(unit);
+    task.definition = definition;
+    // task.project is intentionally left unset. On a flexible-dates unit,
+    // Task.localDueDate() dereferences this.project.targetGrade on this branch and
+    // throws rather than returning a falsy value, this proves the guard is widened
+    // to catch that and still return null, not propagate the exception.
+
+    let event: ReturnType<typeof buildCalendarEvent>;
+    expect(() => {
+      event = buildCalendarEvent(task);
+    }).not.toThrow();
+    expect(event).toBeNull();
+  });
+
+  describe('localDueDate fallback chain', () => {
+    it('uses the flexible-dates targetDueDate over task.dueDate', () => {
+      const unit = new Unit();
+      unit.code = 'COS10001';
+      unit.allowFlexibleDates = true;
+
+      const definition = new TaskDefinition(unit);
+      definition.id = 42;
+      definition.abbreviation = '1.1P';
+      definition.name = 'Hello World';
+
+      const task = new Task(unit);
+      task.definition = definition;
+      task.targetDueDate = new Date(2026, 8, 20);
+      // task.dueDate is set to a different date. If localDueDate() were swapped for
+      // task.dueDate this test would observe the wrong date and fail.
+      task.dueDate = new Date(2026, 8, 1);
+
+      const event = buildCalendarEvent(task);
+
+      expect(event.date).toBe('2026-09-20');
+    });
+
+    it('uses the flexible-dates grade-specific target date over task.dueDate', () => {
+      const unit = new Unit();
+      unit.code = 'COS10001';
+      unit.allowFlexibleDates = true;
+
+      const definition = new TaskDefinition(unit);
+      definition.id = 42;
+      definition.abbreviation = '1.1P';
+      definition.name = 'Hello World';
+      definition.gradeDueDates = [{targetGrade: 1, targetDueDate: new Date(2026, 8, 22)}];
+
+      const project = new Project(unit);
+      project.targetGrade = 1;
+
+      const task = new Task(unit);
+      task.definition = definition;
+      task.project = project;
+      // task.targetDueDate is intentionally left unset, forcing the grade-specific
+      // lookup branch. task.dueDate is set to a different date so this test would
+      // fail if localDueDate() were swapped for task.dueDate.
+      task.dueDate = new Date(2026, 8, 1);
+
+      const event = buildCalendarEvent(task);
+
+      expect(event.date).toBe('2026-09-22');
+    });
+
+    it('falls through to definition.targetDate when task.dueDate is unset', () => {
+      const unit = new Unit();
+      unit.code = 'COS10001';
+      unit.allowFlexibleDates = false;
+
+      const definition = new TaskDefinition(unit);
+      definition.id = 42;
+      definition.abbreviation = '1.1P';
+      definition.name = 'Hello World';
+      definition.targetDate = new Date(2026, 8, 25);
+
+      const task = new Task(unit);
+      task.definition = definition;
+      // task.dueDate is intentionally left unset. definition.targetDate is the only
+      // remaining source of a date, so this test would fail if localDueDate() were
+      // swapped for task.dueDate.
+
+      const event = buildCalendarEvent(task);
+
+      expect(event.date).toBe('2026-09-25');
+    });
+  });
+});
diff --git a/src/app/api/services/calendar-event-builder.ts b/src/app/api/services/calendar-event-builder.ts
new file mode 100644
index 0000000000..57483c2b2a
--- /dev/null
+++ b/src/app/api/services/calendar-event-builder.ts
@@ -0,0 +1,88 @@
+import {Task} from '../models/task';
+
+export interface WebCalEvent {
+  /**
+   * Raw, unescaped event title: "{unit.code}: {taskDef.abbreviation}: {taskDef.name}".
+   * Matches webcal.rb's event_name_for_task_definition bare-name case (no Start:/End: prefix).
+   * Deliberately not escaped for any target format, since URL encoding and ICS text escaping
+   * are incompatible schemes over the same string. Each consumer (CAL-F01, CAL-F02) must
+   * escape this for its own protocol at the point of use. Note for CAL-F02 specifically: the
+   * Ruby icalendar gem that auto-escapes text values for webcal.rb's own ICS output only exists
+   * on that Rails side. CAL-F02 is a frontend consumer, so it gets no escaping for free from
+   * that gem, it must implement RFC 5545 text escaping (backslash, comma, semicolon, newline)
+   * itself.
+   *
+   * Also for CAL-F02: webcal.rb pairs this same "E-{taskDefinitionId}" UID with a different
+   * title when the user's webcal has include_start_dates on, prefixing "End: " onto the name
+   * (webcal.rb:63-69). This builder always emits the bare name, so the (uid, title) pair it
+   * produces matches WebCal's own feed only for users who have include_start_dates off. CAL-F02
+   * must not assume this pairing is universal.
+   */
+  title: string;
+
+  /**
+   * Civil date, 'YYYY-MM-DD', not a Date instant and not a start/end pair.
+   *
+   * Not a start/end pair: webcal.rb sets DTEND == DTSTART for its ICS output, while Google
+   * Calendar's TEMPLATE URL needs an exclusive end date one day later. Those two conventions
+   * are incompatible, so there is no one (start, end) pair that would be correct for both
+   * consumers. Consumers derive their own end value from this single date. Do not "fix" this
+   * into a date range.
+   *
+   * Not a Date instant: Task.localDueDate()'s fallback branches do not agree on time-of-day.
+   * Task.dueDate, Task.targetDueDate and TaskDefinition.targetDate all map through
+   * MappingFunctions.mapDateToEndOfDay (23:59:59.999 local), but the flexible-dates grade
+   * lookup (TaskDefinition.gradeTargetDate, via gradeDueDates[].targetDueDate) maps through
+   * mapDateToDay (00:00:00.000 local) instead. A consumer calling toISOString().slice(0, 10)
+   * on the raw Date would get the previous day specifically on that branch, in any timezone
+   * ahead of UTC. Extracting the local calendar date once here, at the source, means every
+   * consumer works from the same civil date regardless of which branch produced it.
+   */
+  date: string;
+
+  /**
+   * ICS-consumer-only. Mirrors webcal.rb's "E-{taskDefinitionId}" scheme, keyed on the task
+   * definition, not the task instance, so every student on the same task shares this UID. This
+   * is WebCal's existing behaviour, matched here deliberately, not a bug to fix. Google
+   * Calendar's TEMPLATE URL has no identifier parameter, so CAL-F01 cannot use this field.
+   */
+  uid: string;
+}
+
+function toCivilDateString(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * Builds a calendar event description for a single student's task, matching WebCal's event
+ * format (see webcal.rb) so events built here look identical to the existing WebCal feed.
+ * Returns null when the task has no resolvable due date, since a calendar event with no date
+ * is meaningless. Callers use the null case to hide calendar-related UI, not as an error.
+ *
+ * Task.localDueDate() is not itself null-safe on every branch: on a flexible-dates unit, a
+ * Task with no project set throws when it dereferences this.project.targetGrade, rather than
+ * returning a falsy value. That is a gap in localDueDate()'s own contract, not something this
+ * function reimplements or works around by duplicating its fallback logic, it is only caught
+ * here so this function's own null contract holds for every input.
+ */
+export function buildCalendarEvent(task: Task): WebCalEvent | null {
+  let dueDate: Date;
+  try {
+    dueDate = task.localDueDate();
+  } catch {
+    return null;
+  }
+
+  if (!dueDate || Number.isNaN(dueDate.valueOf())) {
+    return null;
+  }
+
+  return {
+    title: `${task.unit.code}: ${task.definition.abbreviation}: ${task.definition.name}`,
+    date: toCivilDateString(dueDate),
+    uid: `E-${task.definition.id}`,
+  };
+}
diff --git a/src/app/api/services/campus.service.ts b/src/app/api/services/campus.service.ts
index ddf491c6d4..552e5acf47 100644
--- a/src/app/api/services/campus.service.ts
+++ b/src/app/api/services/campus.service.ts
@@ -1,8 +1,8 @@
-import { Campus } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { CachedEntityService } from 'ngx-entity-service';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Campus} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class CampusService extends CachedEntityService<Campus> {
@@ -11,18 +11,12 @@ export class CampusService extends CachedEntityService<Campus> {
   constructor(httpClient: HttpClient) {
     super(httpClient, API_URL);
 
-    this.mapping.addKeys(
-      'id',
-      'name',
-      'mode',
-      'abbreviation',
-      'active'
-    );
+    this.mapping.addKeys('id', 'name', 'mode', 'abbreviation', 'active', 'timezone');
 
     this.mapping.mapAllKeysToJsonExcept('id');
   }
 
-  public createInstanceFrom(json: object, other?: any): Campus {
+  public createInstanceFrom(_json: object): Campus {
     return new Campus();
   }
 }
diff --git a/src/app/api/services/communication-action.service.ts b/src/app/api/services/communication-action.service.ts
new file mode 100644
index 0000000000..256e579b43
--- /dev/null
+++ b/src/app/api/services/communication-action.service.ts
@@ -0,0 +1,49 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, map} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {CommunicationAction} from '../models/communication';
+
+@Injectable()
+export class CommunicationActionService {
+  constructor(private httpClient: HttpClient) {}
+
+  public getForRule(unitId: number, ruleId: number): Observable<CommunicationAction[]> {
+    return this.httpClient
+      .get<Partial<CommunicationAction>[]>(this.endpoint(unitId, ruleId))
+      .pipe(map((actions) => actions.map((action) => new CommunicationAction(action))));
+  }
+
+  public create(
+    unitId: number,
+    ruleId: number,
+    action: Partial<CommunicationAction>,
+  ): Observable<CommunicationAction> {
+    return this.httpClient
+      .post<Partial<CommunicationAction>>(this.endpoint(unitId, ruleId), {
+        communication_action: action,
+      })
+      .pipe(map((created) => new CommunicationAction(created)));
+  }
+
+  public delete(unitId: number, ruleId: number, actionId: number): Observable<void> {
+    return this.httpClient.delete<void>(`${this.endpoint(unitId, ruleId)}/${actionId}`);
+  }
+
+  public update(
+    unitId: number,
+    ruleId: number,
+    actionId: number,
+    action: Partial<CommunicationAction>,
+  ): Observable<CommunicationAction> {
+    return this.httpClient
+      .put<Partial<CommunicationAction>>(`${this.endpoint(unitId, ruleId)}/${actionId}`, {
+        communication_action: action,
+      })
+      .pipe(map((updated) => new CommunicationAction(updated)));
+  }
+
+  private endpoint(unitId: number, ruleId: number): string {
+    return `${API_URL}/units/${unitId}/communication_rules/${ruleId}/actions`;
+  }
+}
diff --git a/src/app/api/services/communication-condition.service.ts b/src/app/api/services/communication-condition.service.ts
new file mode 100644
index 0000000000..3024e0c4e2
--- /dev/null
+++ b/src/app/api/services/communication-condition.service.ts
@@ -0,0 +1,51 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, map} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {CommunicationCondition} from '../models/communication';
+
+@Injectable()
+export class CommunicationConditionService {
+  constructor(private httpClient: HttpClient) {}
+
+  public getForRule(unitId: number, ruleId: number): Observable<CommunicationCondition[]> {
+    return this.httpClient
+      .get<Partial<CommunicationCondition>[]>(this.endpoint(unitId, ruleId))
+      .pipe(
+        map((conditions) => conditions.map((condition) => new CommunicationCondition(condition))),
+      );
+  }
+
+  public create(
+    unitId: number,
+    ruleId: number,
+    condition: Partial<CommunicationCondition>,
+  ): Observable<CommunicationCondition> {
+    return this.httpClient
+      .post<Partial<CommunicationCondition>>(this.endpoint(unitId, ruleId), {
+        communication_condition: condition,
+      })
+      .pipe(map((created) => new CommunicationCondition(created)));
+  }
+
+  public delete(unitId: number, ruleId: number, conditionId: number): Observable<void> {
+    return this.httpClient.delete<void>(`${this.endpoint(unitId, ruleId)}/${conditionId}`);
+  }
+
+  public update(
+    unitId: number,
+    ruleId: number,
+    conditionId: number,
+    condition: Partial<CommunicationCondition>,
+  ): Observable<CommunicationCondition> {
+    return this.httpClient
+      .put<Partial<CommunicationCondition>>(`${this.endpoint(unitId, ruleId)}/${conditionId}`, {
+        communication_condition: condition,
+      })
+      .pipe(map((updated) => new CommunicationCondition(updated)));
+  }
+
+  private endpoint(unitId: number, ruleId: number): string {
+    return `${API_URL}/units/${unitId}/communication_rules/${ruleId}/conditions`;
+  }
+}
diff --git a/src/app/api/services/communication-rule.service.ts b/src/app/api/services/communication-rule.service.ts
new file mode 100644
index 0000000000..e7cab7b487
--- /dev/null
+++ b/src/app/api/services/communication-rule.service.ts
@@ -0,0 +1,67 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, map} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {CommunicationRule, CommunicationRulePreviewResponse} from '../models/communication';
+import {SidekiqJob} from '../models/sidekiq-job';
+
+@Injectable()
+export class CommunicationRuleService {
+  constructor(private httpClient: HttpClient) {}
+
+  public getForSet(unitId: number, setId: number): Observable<CommunicationRule[]> {
+    return this.httpClient
+      .get<Partial<CommunicationRule>[]>(this.setEndpoint(unitId, setId))
+      .pipe(map((rules) => rules.map((rule) => new CommunicationRule(rule))));
+  }
+
+  public createForSet(
+    unitId: number,
+    setId: number,
+    rule: Pick<CommunicationRule, 'name' | 'operator'>,
+  ): Observable<CommunicationRule> {
+    return this.httpClient
+      .post<Partial<CommunicationRule>>(this.setEndpoint(unitId, setId), {
+        communication_rule: rule,
+      })
+      .pipe(map((created) => new CommunicationRule(created)));
+  }
+
+  public updateForUnit(
+    unitId: number,
+    ruleId: number,
+    rule: Partial<Pick<CommunicationRule, 'name' | 'operator' | 'send_log_to_convenors'>>,
+  ): Observable<CommunicationRule> {
+    return this.httpClient
+      .put<Partial<CommunicationRule>>(`${this.endpoint(unitId)}/${ruleId}`, {
+        communication_rule: rule,
+      })
+      .pipe(map((updated) => new CommunicationRule(updated)));
+  }
+
+  public deleteForUnit(unitId: number, ruleId: number): Observable<void> {
+    return this.httpClient.delete<void>(`${this.endpoint(unitId)}/${ruleId}`);
+  }
+
+  public previewForUnit(
+    unitId: number,
+    ruleId: number,
+  ): Observable<CommunicationRulePreviewResponse> {
+    return this.httpClient.post<CommunicationRulePreviewResponse>(
+      `${this.endpoint(unitId)}/${ruleId}/preview`,
+      {},
+    );
+  }
+
+  public executeForUnit(unitId: number, ruleId: number): Observable<SidekiqJob> {
+    return this.httpClient.post<SidekiqJob>(`${this.endpoint(unitId)}/${ruleId}/execute`, {});
+  }
+
+  private endpoint(unitId: number): string {
+    return `${API_URL}/units/${unitId}/communication_rules`;
+  }
+
+  private setEndpoint(unitId: number, setId: number): string {
+    return `${API_URL}/units/${unitId}/communication_sets/${setId}/rules`;
+  }
+}
diff --git a/src/app/api/services/communication-set.service.ts b/src/app/api/services/communication-set.service.ts
new file mode 100644
index 0000000000..73ab9767c6
--- /dev/null
+++ b/src/app/api/services/communication-set.service.ts
@@ -0,0 +1,67 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, map} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {
+  CommunicationSet,
+  CommunicationSetPreviewResponse,
+  CommunicationSetSchedule,
+} from '../models/communication';
+import {SidekiqJob} from '../models/sidekiq-job';
+
+@Injectable()
+export class CommunicationSetService {
+  constructor(private httpClient: HttpClient) {}
+
+  public getForUnit(unitId: number): Observable<CommunicationSet[]> {
+    return this.httpClient
+      .get<Partial<CommunicationSet>[]>(this.endpoint(unitId))
+      .pipe(map((sets) => sets.map((set) => new CommunicationSet(set))));
+  }
+
+  public createForUnit(
+    unitId: number,
+    set: Pick<CommunicationSet, 'name'> & Partial<Pick<CommunicationSet, 'active'>>,
+  ): Observable<CommunicationSet> {
+    return this.httpClient
+      .post<Partial<CommunicationSet>>(this.endpoint(unitId), {
+        communication_set: set,
+      })
+      .pipe(map((created) => new CommunicationSet(created)));
+  }
+
+  public deleteForUnit(unitId: number, setId: number): Observable<void> {
+    return this.httpClient.delete<void>(`${this.endpoint(unitId)}/${setId}`);
+  }
+
+  public updateForUnit(
+    unitId: number,
+    setId: number,
+    set: Partial<Pick<CommunicationSet, 'name' | 'active'>> & {
+      schedules?: Partial<CommunicationSetSchedule>[];
+    },
+  ): Observable<CommunicationSet> {
+    return this.httpClient
+      .put<Partial<CommunicationSet>>(`${this.endpoint(unitId)}/${setId}`, {
+        communication_set: set,
+      })
+      .pipe(map((updated) => new CommunicationSet(updated)));
+  }
+
+  public getForUnitById(
+    unitId: number,
+    setId: number,
+  ): Observable<CommunicationSetPreviewResponse> {
+    return this.httpClient.get<CommunicationSetPreviewResponse>(
+      `${this.endpoint(unitId)}/${setId}`,
+    );
+  }
+
+  public executeForUnit(unitId: number, setId: number): Observable<SidekiqJob> {
+    return this.httpClient.post<SidekiqJob>(`${this.endpoint(unitId)}/${setId}/execute`, {});
+  }
+
+  private endpoint(unitId: number): string {
+    return `${API_URL}/units/${unitId}/communication_sets`;
+  }
+}
diff --git a/src/app/api/services/discussion-prompt.service.ts b/src/app/api/services/discussion-prompt.service.ts
new file mode 100644
index 0000000000..435f1d53e8
--- /dev/null
+++ b/src/app/api/services/discussion-prompt.service.ts
@@ -0,0 +1,128 @@
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {
+  Project,
+  ProjectService,
+  TaskDefinition,
+  Unit,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DiscussionPrompt} from '../models/discussion-prompt';
+
+@Injectable()
+export class DiscussionPromptService extends CachedEntityService<DiscussionPrompt> {
+  protected readonly endpointFormat =
+    'task_definitions/:task_definition_id:/discussion_prompts/:id:';
+
+  protected readonly projectEndpointFormat = 'projects/:projectId:/discussion_prompts';
+  protected readonly taskDefinitionProjectEndpointFormat =
+    'projects/:projectId:/discussion_prompts';
+  protected readonly taskDefinitionEndpointFormat =
+    'task_definitions/:taskDefinitionId:/discussion_prompts';
+
+  constructor(
+    httpClient: HttpClient,
+    private userService: UserService,
+    private projectService: ProjectService,
+  ) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'content',
+      'priority',
+      {
+        keys: ['createdBy', 'created_by_id'],
+        toEntityFn: (data: object, key: string, prompt: DiscussionPrompt) => {
+          if (prompt.project) {
+            return prompt.project.unit.staff.find((s) => s.user.id === data['created_by_id']).user;
+          } else if (prompt.taskDefinition) {
+            return prompt.taskDefinition.unit.staff.find((s) => s.user.id === data['created_by_id'])
+              ?.user;
+          } else if (prompt.unit) {
+            return prompt.unit.staff.find((s) => s.user.id === data['created_by_id'])?.user;
+          }
+        },
+      },
+      {
+        keys: ['taskDefinition', 'task_definition_id'],
+        toEntityFn: (data: object, key: string, entity: DiscussionPrompt) => {
+          if (entity.project) {
+            return entity.project.unit.taskDef(data[key]);
+          } else if (entity.unit) {
+            return entity.unit.taskDef(data[key]);
+          }
+          return entity.taskDefinition;
+        },
+        toJsonFn: (entity: DiscussionPrompt, _key: string) => {
+          return entity.taskDefinition?.id;
+        },
+      },
+    );
+
+    this.mapping.addJsonKey('project', 'taskDefinition', 'unit', 'createdBy');
+  }
+
+  public createInstanceFrom(
+    _json: object,
+    other?: Project | Unit | TaskDefinition,
+  ): DiscussionPrompt {
+    return new DiscussionPrompt(other);
+  }
+
+  // TODO: loadDiscussionPromptsForProject and overload for loadTaskDefinitionDiscussionPrompts()
+
+  public loadDiscussionPromptsForPoject(project: Project) {
+    const options: RequestOptions<DiscussionPrompt> = {
+      endpointFormat: this.taskDefinitionProjectEndpointFormat,
+      cacheBehaviourOnGet: 'cacheQuery',
+      constructorParams: project,
+    };
+
+    return super.fetchAll(
+      {
+        projectId: project?.id,
+      },
+      options,
+    );
+  }
+
+  public loadDiscussionPrompts(
+    project: Project,
+    taskDefinition?: TaskDefinition,
+    useFetch: boolean = true,
+  ): Observable<DiscussionPrompt[]> {
+    const options: RequestOptions<DiscussionPrompt> = {
+      endpointFormat: project
+        ? taskDefinition
+          ? this.taskDefinitionProjectEndpointFormat
+          : this.projectEndpointFormat
+        : this.taskDefinitionEndpointFormat,
+      cache: taskDefinition.discussionPromptsCache,
+      sourceCache: taskDefinition.discussionPromptsCache,
+      // cacheBehaviourOnGet: 'cacheQuery',
+      constructorParams: project ? project : taskDefinition,
+    };
+
+    if (useFetch) {
+      return super.fetchAll(
+        {
+          projectId: project?.id,
+          taskDefinitionId: taskDefinition?.id,
+        },
+        options,
+      );
+    } else {
+      return super.query(
+        {
+          projectId: project?.id,
+          taskDefinitionId: taskDefinition?.id,
+        },
+        options,
+      );
+    }
+  }
+}
diff --git a/src/app/api/services/engagement-comment.service.ts b/src/app/api/services/engagement-comment.service.ts
new file mode 100644
index 0000000000..bceb22511e
--- /dev/null
+++ b/src/app/api/services/engagement-comment.service.ts
@@ -0,0 +1,116 @@
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, tap} from 'rxjs';
+import {Engagement, EngagementComment, UserService} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {MappingFunctions} from './mapping-fn';
+
+@Injectable()
+export class EngagementCommentService extends CachedEntityService<EngagementComment> {
+  protected readonly endpointFormat =
+    'projects/:projectId:/engagements/:engagementId:/comments/:id:';
+
+  constructor(
+    httpClient: HttpClient,
+    private userService: UserService,
+  ) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'comment',
+      'replyToId',
+      {
+        keys: 'user',
+        toEntityFn: (data: object, key: string) => {
+          return this.userService.cache.getOrCreate(data[key].id, this.userService, data[key]);
+        },
+      },
+      {
+        keys: 'createdAt',
+        toEntityFn: MappingFunctions.mapDate,
+      },
+      {
+        keys: 'updatedAt',
+        toEntityFn: MappingFunctions.mapDate,
+      },
+    );
+  }
+
+  createInstanceFrom(_json: object, other?: Engagement): EngagementComment {
+    return new EngagementComment(other);
+  }
+
+  addComment(
+    engagement: Engagement,
+    comment: string,
+    replyTo?: EngagementComment,
+  ): Observable<EngagementComment> {
+    const options: RequestOptions<EngagementComment> = {
+      endpointFormat: this.endpointFormat,
+      cache: engagement.commentCache,
+      constructorParams: engagement,
+      body: {
+        comment,
+        ...(replyTo ? {reply_to_id: replyTo.id} : {}),
+      },
+    };
+
+    return this.create(
+      {
+        projectId: engagement.project.id,
+        engagementId: engagement.id,
+      },
+      options,
+    ).pipe(
+      tap(() => {
+        engagement.commentCount++;
+        this.updateCommentReplies(engagement.comments);
+      }),
+    );
+  }
+
+  updateComment(comment: EngagementComment, text: string): Observable<EngagementComment> {
+    return this.put(
+      {
+        projectId: comment.engagement.project.id,
+        engagementId: comment.engagement.id,
+        id: comment.id,
+      },
+      {
+        endpointFormat: this.endpointFormat,
+        cache: comment.engagement.commentCache,
+        constructorParams: comment.engagement,
+        body: {comment: text},
+      },
+    );
+  }
+
+  deleteComment(comment: EngagementComment): Observable<boolean> {
+    return this.delete<boolean>(
+      {
+        projectId: comment.engagement.project.id,
+        engagementId: comment.engagement.id,
+        id: comment.id,
+      },
+      {
+        endpointFormat: this.endpointFormat,
+        cache: comment.engagement.commentCache,
+      },
+    ).pipe(
+      tap(() => {
+        comment.engagement.commentCount--;
+        this.updateCommentReplies(comment.engagement.comments);
+      }),
+    );
+  }
+
+  updateCommentReplies(comments: readonly EngagementComment[]): void {
+    for (const comment of comments) {
+      comment.replyTo = comment.replyToId
+        ? comments.find((candidate) => candidate.id === comment.replyToId)
+        : undefined;
+    }
+  }
+}
diff --git a/src/app/api/services/engagement.service.ts b/src/app/api/services/engagement.service.ts
new file mode 100644
index 0000000000..89c63a189a
--- /dev/null
+++ b/src/app/api/services/engagement.service.ts
@@ -0,0 +1,177 @@
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {
+  Engagement,
+  EngagementCommentService,
+  Project,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {MappingFunctions} from './mapping-fn';
+
+export interface EngagementData {
+  engagementType: string;
+  note: string;
+  occurredAt: Date;
+  evidenceUrl?: string;
+  attachment?: File;
+}
+
+export interface EngagementUpdate extends Partial<EngagementData> {
+  removeEvidence?: boolean;
+}
+
+@Injectable()
+export class EngagementService extends CachedEntityService<Engagement> {
+  protected readonly endpointFormat = 'projects/:projectId:/engagements/:id:';
+
+  constructor(
+    httpClient: HttpClient,
+    private userService: UserService,
+    private engagementCommentService: EngagementCommentService,
+  ) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'engagementType',
+      'note',
+      'evidenceUrl',
+      'contentType',
+      'hasAttachment',
+      'attachmentFileName',
+      'commentCount',
+      {
+        keys: 'user',
+        toEntityFn: (data: object, key: string) => {
+          return this.userService.cache.getOrCreate(data[key].id, this.userService, data[key]);
+        },
+      },
+      {
+        keys: 'occurredAt',
+        toEntityFn: MappingFunctions.mapDate,
+      },
+      {
+        keys: 'createdAt',
+        toEntityFn: MappingFunctions.mapDate,
+      },
+      {
+        keys: 'updatedAt',
+        toEntityFn: MappingFunctions.mapDate,
+      },
+      {
+        keys: 'comments',
+        toEntityOp: (data: object, key: string, engagement: Engagement) => {
+          engagement.commentCache.clear();
+          data[key]?.forEach((comment) => {
+            engagement.commentCache.getOrCreate(
+              comment.id,
+              this.engagementCommentService,
+              comment,
+              {constructorParams: engagement},
+            );
+          });
+          this.engagementCommentService.updateCommentReplies(engagement.comments);
+        },
+      },
+    );
+  }
+
+  createInstanceFrom(_json: object, other?: Project): Engagement {
+    return new Engagement(other);
+  }
+
+  loadEngagements(project: Project, refresh: boolean = false): Observable<Engagement[]> {
+    const options: RequestOptions<Engagement> = {
+      endpointFormat: this.endpointFormat,
+      cache: project.engagementCache,
+      sourceCache: project.engagementCache,
+      cacheBehaviourOnGet: 'cacheQuery',
+      constructorParams: project,
+    };
+    const pathIds = {projectId: project.id};
+
+    return refresh ? this.fetchAll(pathIds, options) : this.query(pathIds, options);
+  }
+
+  loadEngagement(engagement: Engagement): Observable<Engagement> {
+    return this.fetch(
+      {
+        projectId: engagement.project.id,
+        id: engagement.id,
+      },
+      {
+        endpointFormat: this.endpointFormat,
+        cache: engagement.project.engagementCache,
+        constructorParams: engagement.project,
+      },
+    );
+  }
+
+  createEngagement(project: Project, data: EngagementData): Observable<Engagement> {
+    return this.create(
+      {projectId: project.id},
+      {
+        endpointFormat: this.endpointFormat,
+        cache: project.engagementCache,
+        constructorParams: project,
+        body: this.toFormData(data),
+      },
+    );
+  }
+
+  updateEngagement(engagement: Engagement, data: EngagementUpdate): Observable<Engagement> {
+    return this.put(
+      {
+        projectId: engagement.project.id,
+        id: engagement.id,
+      },
+      {
+        endpointFormat: this.endpointFormat,
+        cache: engagement.project.engagementCache,
+        constructorParams: engagement.project,
+        body: this.toFormData(data),
+      },
+    );
+  }
+
+  deleteEngagement(engagement: Engagement): Observable<boolean> {
+    return this.delete(
+      {
+        projectId: engagement.project.id,
+        id: engagement.id,
+      },
+      {
+        endpointFormat: this.endpointFormat,
+        cache: engagement.project.engagementCache,
+      },
+    );
+  }
+
+  private toFormData(data: EngagementUpdate): FormData {
+    const body = new FormData();
+
+    if (data.engagementType !== undefined) {
+      body.append('engagement_type', data.engagementType);
+    }
+    if (data.note !== undefined) {
+      body.append('note', data.note);
+    }
+    if (data.occurredAt !== undefined) {
+      body.append('occurred_at', data.occurredAt.toISOString());
+    }
+    if (data.evidenceUrl !== undefined) {
+      body.append('evidence_url', data.evidenceUrl);
+    }
+    if (data.attachment !== undefined) {
+      body.append('attachment', data.attachment);
+    }
+    if (data.removeEvidence !== undefined) {
+      body.append('remove_evidence', String(data.removeEvidence));
+    }
+
+    return body;
+  }
+}
diff --git a/src/app/api/services/feedback-template.service.ts b/src/app/api/services/feedback-template.service.ts
new file mode 100644
index 0000000000..ec2da997a6
--- /dev/null
+++ b/src/app/api/services/feedback-template.service.ts
@@ -0,0 +1,35 @@
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {FeedbackTemplate} from '../models/feedback-template';
+
+@Injectable()
+export class FeedbackTemplateService extends CachedEntityService<FeedbackTemplate> {
+  protected readonly endpointFormat = ':contextType:/:contextId:/feedback_chips';
+  public static addEndpoint = 'feedback_chips';
+  public static updateEndpoint = 'feedback_chips/:id:';
+  public static globalEndpoint = 'global/feedback_chips';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'type',
+      'chipText',
+      'description',
+      'commentText',
+      'summaryText',
+      'taskStatus',
+      'parentChipId',
+      'learningOutcomeId',
+    );
+
+    this.mapping.mapAllKeysToJsonExcept('id');
+  }
+
+  public override createInstanceFrom(_json: object): FeedbackTemplate {
+    return new FeedbackTemplate();
+  }
+}
diff --git a/src/app/api/services/group-set.service.ts b/src/app/api/services/group-set.service.ts
index 4c976a6e4d..14b6c08ed9 100644
--- a/src/app/api/services/group-set.service.ts
+++ b/src/app/api/services/group-set.service.ts
@@ -1,8 +1,8 @@
-import { CachedEntityService } from 'ngx-entity-service';
-import { GroupSet, Unit } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {GroupSet, Unit} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class GroupSetService extends CachedEntityService<GroupSet> {
@@ -24,7 +24,7 @@ export class GroupSetService extends CachedEntityService<GroupSet> {
     this.mapping.mapAllKeysToJsonExcept('id');
   }
 
-  public createInstanceFrom(json: object, other?: any): GroupSet {
-    return new GroupSet(other as Unit);
+  public createInstanceFrom(_json: object, other?: Unit): GroupSet {
+    return new GroupSet(other);
   }
 }
diff --git a/src/app/api/services/group.service.ts b/src/app/api/services/group.service.ts
index 0c3aa086a4..bc3e8afb11 100644
--- a/src/app/api/services/group.service.ts
+++ b/src/app/api/services/group.service.ts
@@ -1,8 +1,8 @@
-import { CachedEntityService } from 'ngx-entity-service';
-import { Group, Unit } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Group, Unit} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class GroupService extends CachedEntityService<Group> {
@@ -15,29 +15,29 @@ export class GroupService extends CachedEntityService<Group> {
       'id',
       'name',
       {
-        keys: ['groupSet','group_set_id'],
+        keys: ['groupSet', 'group_set_id'],
         toEntityFn: (data: object, jsonKey: string, grp: Group) => {
           return grp.unit.groupSetsCache.get(data[jsonKey]);
-        }
+        },
       },
       'capacityAdjustment',
       'locked',
       'studentCount',
       {
-        keys: ['tutorial','tutorial_id'],
+        keys: ['tutorial', 'tutorial_id'],
         toEntityFn: (data: object, jsonKey: string, grp: Group) => {
           return grp.unit.tutorialsCache.get(data[jsonKey]);
         },
-        toJsonFn: (group: Group, key: string) => {
+        toJsonFn: (group: Group, _key: string) => {
           return group.tutorial.id;
-        }
+        },
       },
     );
 
     this.mapping.mapAllKeysToJsonExcept('id', 'groupSet', 'studentCount');
   }
 
-  public createInstanceFrom(json: object, other?: any): Group {
-    return new Group(other as Unit);
+  public createInstanceFrom(_json: object, other?: Unit): Group {
+    return new Group(other);
   }
 }
diff --git a/src/app/api/services/ics-calendar-builder.spec.ts b/src/app/api/services/ics-calendar-builder.spec.ts
new file mode 100644
index 0000000000..4fe009b211
--- /dev/null
+++ b/src/app/api/services/ics-calendar-builder.spec.ts
@@ -0,0 +1,177 @@
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {Task} from '../models/task';
+import {TaskDefinition} from '../models/task-definition';
+import {Unit} from '../models/unit';
+import {buildIcsCalendar} from './ics-calendar-builder';
+
+function buildTask(overrides: {
+  unitId?: number;
+  unitCode?: string;
+  abbreviation?: string;
+  name?: string;
+  taskDefId?: number;
+  dueDate?: Date;
+  targetDate?: Date;
+}): Task {
+  const unit = new Unit();
+  unit.id = overrides.unitId ?? 7;
+  unit.code = overrides.unitCode ?? 'COS10001';
+  unit.allowFlexibleDates = false;
+
+  const definition = new TaskDefinition(unit);
+  definition.id = overrides.taskDefId ?? 42;
+  definition.abbreviation = overrides.abbreviation ?? '1.1P';
+  definition.name = overrides.name ?? 'Hello World';
+  definition.targetDate = overrides.targetDate;
+
+  const task = new Task(unit);
+  task.definition = definition;
+  task.dueDate = overrides.dueDate;
+
+  return task;
+}
+
+// window.open leakage was the known cause the last time a spec here skipped this, see
+// task-description-card.component.spec.ts. Nothing in this file mocks window.open, but this
+// avoids the same class of leak for anything vi.spyOn touches in future tests added here.
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('buildIcsCalendar', () => {
+  it('escapes backslash, semicolon and comma in the title, and leaves an apostrophe untouched', () => {
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({name: "A, B; C\\D's", dueDate});
+
+    const ics = buildIcsCalendar([task]);
+
+    // Backslash escaped first (\ -> \\), then ; -> \; and , -> \,. Apostrophe is not an
+    // RFC 5545 special character and must survive unescaped.
+    expect(ics).toContain("SUMMARY:COS10001: 1.1P: A\\, B\\; C\\\\D's");
+  });
+
+  it('sets DTSTART to the due date and exclusive DTEND to the following date', () => {
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+
+    const ics = buildIcsCalendar([task]);
+
+    expect(ics).toContain('DTSTART;VALUE=DATE:20260915');
+    expect(ics).toContain('DTEND;VALUE=DATE:20260916');
+  });
+
+  it('advances an exclusive DTEND safely across year boundaries', () => {
+    const dueDate = new Date(2026, 11, 31, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+
+    const ics = buildIcsCalendar([task]);
+
+    expect(ics).toContain('DTSTART;VALUE=DATE:20261231');
+    expect(ics).toContain('DTEND;VALUE=DATE:20270101');
+  });
+
+  it('includes STATUS, X-DOUBTFIRE-UNIT, X-DOUBTFIRE-TASK and UID', () => {
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({unitId: 7, taskDefId: 42, dueDate});
+
+    const ics = buildIcsCalendar([task]);
+
+    expect(ics).toContain('STATUS:CONFIRMED');
+    expect(ics).toContain('X-DOUBTFIRE-UNIT:7');
+    expect(ics).toContain('X-DOUBTFIRE-TASK:42');
+    expect(ics).toContain('UID:E-42');
+  });
+
+  it('skips a task whose buildCalendarEvent returns null', () => {
+    const withDate = buildTask({taskDefId: 1, dueDate: new Date(2026, 8, 15, 23, 59, 59, 999)});
+    const withoutDate = buildTask({taskDefId: 2, dueDate: undefined, targetDate: undefined});
+
+    const ics = buildIcsCalendar([withDate, withoutDate]);
+
+    expect(ics).toContain('UID:E-1');
+    expect(ics).not.toContain('UID:E-2');
+    expect((ics.match(/BEGIN:VEVENT/g) ?? []).length).toBe(1);
+  });
+
+  it('uses CRLF line endings throughout, not bare LF', () => {
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+
+    const ics = buildIcsCalendar([task]);
+
+    expect(ics).toContain('\r\n');
+    const withoutCrlf = ics.replaceAll('\r\n', '');
+    expect(withoutCrlf.includes('\n')).toBe(false);
+  });
+
+  it('escapes every form of line break in text without leaving a control character', () => {
+    const task = buildTask({
+      name: 'First\r\nSecond\rThird\nFourth',
+      dueDate: new Date(2026, 8, 15, 23, 59, 59, 999),
+    });
+
+    const ics = buildIcsCalendar([task]);
+
+    expect(ics).toContain('SUMMARY:COS10001: 1.1P: First\\nSecond\\nThird\\nFourth');
+    expect(ics.replaceAll('\r\n', '')).not.toContain('\r');
+  });
+
+  it('folds long UTF-8 content lines at no more than 75 octets', () => {
+    const task = buildTask({
+      name: `Long task ${'é'.repeat(40)}`,
+      dueDate: new Date(2026, 8, 15, 23, 59, 59, 999),
+    });
+
+    const ics = buildIcsCalendar([task]);
+    const physicalSummaryLines = ics
+      .split('\r\n')
+      .filter((line) => line.startsWith('SUMMARY:') || line.startsWith(' '));
+
+    expect(physicalSummaryLines.length).toBeGreaterThan(1);
+    expect(physicalSummaryLines.every((line) => new TextEncoder().encode(line).length <= 75)).toBe(
+      true,
+    );
+    expect(physicalSummaryLines.slice(1).every((line) => line.startsWith(' '))).toBe(true);
+  });
+
+  it('falls through to definition.targetDate, proving the date comes from buildCalendarEvent, not a raw dueDate read', () => {
+    // task.dueDate is intentionally left unset. If this builder read task.dueDate directly
+    // instead of calling buildCalendarEvent(task), this task would be indistinguishable from
+    // one with no date at all and would be skipped, instead of resolving through
+    // localDueDate()'s fallback to definition.targetDate. This test would fail under that
+    // swap: it asserts the event is present, with the fallback date.
+    const task = buildTask({
+      taskDefId: 9,
+      dueDate: undefined,
+      targetDate: new Date(2026, 8, 25, 23, 59, 59, 999),
+    });
+
+    const ics = buildIcsCalendar([task]);
+
+    expect(ics).toContain('UID:E-9');
+    expect(ics).toContain('DTSTART;VALUE=DATE:20260925');
+  });
+
+  it('produces a valid VCALENDAR envelope', () => {
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+
+    const ics = buildIcsCalendar([task]);
+
+    expect(ics.startsWith('BEGIN:VCALENDAR\r\n')).toBe(true);
+    expect(ics).toContain('VERSION:2.0');
+    expect(ics).toContain('CALSCALE:GREGORIAN');
+    expect(ics).toContain('METHOD:PUBLISH');
+    expect(ics.trimEnd().endsWith('END:VCALENDAR')).toBe(true);
+  });
+
+  it('includes a DTSTAMP in YYYYMMDDTHHMMSSZ form using the provided time', () => {
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+    const now = new Date(Date.UTC(2026, 7, 1, 3, 4, 5));
+
+    const ics = buildIcsCalendar([task], now);
+
+    expect(ics).toContain('DTSTAMP:20260801T030405Z');
+  });
+});
diff --git a/src/app/api/services/ics-calendar-builder.ts b/src/app/api/services/ics-calendar-builder.ts
new file mode 100644
index 0000000000..b2d186b57e
--- /dev/null
+++ b/src/app/api/services/ics-calendar-builder.ts
@@ -0,0 +1,116 @@
+import {Task} from '../models/task';
+import {buildCalendarEvent} from './calendar-event-builder';
+
+const DEFAULT_PRODID = '-//Doubtfire//Calendar Download//EN';
+const MAX_CONTENT_LINE_BYTES = 75;
+const utf8Encoder = new TextEncoder();
+
+function escapeIcsText(text: string): string {
+  return text
+    .replace(/\\/g, '\\\\')
+    .replace(/;/g, '\\;')
+    .replace(/,/g, '\\,')
+    .replace(/\r\n|\r|\n/g, '\\n');
+}
+
+function formatIcsDate(civilDate: string): string {
+  return civilDate.replaceAll('-', '');
+}
+
+function nextCivilDate(civilDate: string): string {
+  const [year, month, day] = civilDate.split('-').map(Number);
+  const date = new Date(0);
+  date.setUTCHours(0, 0, 0, 0);
+  date.setUTCFullYear(year, month - 1, day + 1);
+
+  const pad = (value: number) => String(value).padStart(2, '0');
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
+}
+
+/**
+ * Folds a content line at 75 UTF-8 octets without splitting a Unicode code point.
+ * Continuation lines start with a space, which counts toward their 75-octet limit.
+ */
+function foldIcsLine(line: string): string[] {
+  const folded: string[] = [];
+  let segment = '';
+  let segmentBytes = 0;
+
+  for (const character of line) {
+    const characterBytes = utf8Encoder.encode(character).length;
+    if (segment && segmentBytes + characterBytes > MAX_CONTENT_LINE_BYTES) {
+      folded.push(segment);
+      segment = ` ${character}`;
+      segmentBytes = 1 + characterBytes;
+    } else {
+      segment += character;
+      segmentBytes += characterBytes;
+    }
+  }
+
+  folded.push(segment);
+  return folded;
+}
+
+function formatIcsTimestamp(now: Date): string {
+  const pad = (value: number) => String(value).padStart(2, '0');
+  return (
+    `${now.getUTCFullYear()}${pad(now.getUTCMonth() + 1)}${pad(now.getUTCDate())}T` +
+    `${pad(now.getUTCHours())}${pad(now.getUTCMinutes())}${pad(now.getUTCSeconds())}Z`
+  );
+}
+
+/**
+ * Builds a VCALENDAR string, one VEVENT per task with a resolvable due date. Tasks
+ * buildCalendarEvent cannot resolve a date for are skipped, not an error, matching
+ * buildCalendarEvent's own null contract, not something reimplemented here. A pure function,
+ * not a service and not inlined into any component, so CAL-F08's modal download can reuse it
+ * directly.
+ *
+ * DTSTART is the task's due date and DTEND is the following date because RFC 5545 defines
+ * DTEND as exclusive and requires it to be later than DTSTART. STATUS:CONFIRMED and the
+ * X-DOUBTFIRE-UNIT / X-DOUBTFIRE-TASK custom properties are set per VEVENT, read from the task
+ * itself so every event is correctly attributed even if the tasks span more than one unit.
+ */
+export function buildIcsCalendar(
+  tasks: readonly Task[],
+  now: Date = new Date(),
+  productName: string = DEFAULT_PRODID,
+): string {
+  const dtstamp = formatIcsTimestamp(now);
+
+  const lines: string[] = [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    `PRODID:${escapeIcsText(productName)}`,
+    'CALSCALE:GREGORIAN',
+    'METHOD:PUBLISH',
+  ];
+
+  for (const task of tasks) {
+    const event = buildCalendarEvent(task);
+    if (!event) {
+      continue;
+    }
+
+    const startDate = formatIcsDate(event.date);
+    const endDate = formatIcsDate(nextCivilDate(event.date));
+
+    lines.push(
+      'BEGIN:VEVENT',
+      `UID:${event.uid}`,
+      `SUMMARY:${escapeIcsText(event.title)}`,
+      'STATUS:CONFIRMED',
+      `DTSTART;VALUE=DATE:${startDate}`,
+      `DTEND;VALUE=DATE:${endDate}`,
+      `DTSTAMP:${dtstamp}`,
+      `X-DOUBTFIRE-UNIT:${task.unit.id}`,
+      `X-DOUBTFIRE-TASK:${task.definition.id}`,
+      'END:VEVENT',
+    );
+  }
+
+  lines.push('END:VCALENDAR');
+
+  return lines.flatMap(foldIcsLine).join('\r\n') + '\r\n';
+}
diff --git a/src/app/api/services/learning-outcome.service.ts b/src/app/api/services/learning-outcome.service.ts
index c69ebc7224..be1075257d 100644
--- a/src/app/api/services/learning-outcome.service.ts
+++ b/src/app/api/services/learning-outcome.service.ts
@@ -1,28 +1,33 @@
-import { CachedEntityService } from 'ngx-entity-service';
-import { LearningOutcome } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {LearningOutcome} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class LearningOutcomeService extends CachedEntityService<LearningOutcome> {
-  protected readonly endpointFormat = 'units/:unitId:/outcomes/:id:';
+  protected readonly endpointFormat = ':contextType:/:contextId:/outcomes';
+  public static updateEndpoint = ':contextType:/:contextId:/outcomes/:id:';
+  public static globalEndpoint = 'global/outcomes';
+  public static updateGlobalEndpoint = 'global/outcomes/:id:';
 
   constructor(httpClient: HttpClient) {
     super(httpClient, API_URL);
 
     this.mapping.addKeys(
       'id',
-      'name',
-      'description',
+      'contextId',
+      'contextType',
       'abbreviation',
-      'iloNumber'
+      'shortDescription',
+      'fullOutcomeDescription',
+      'linkedOutcomeIds',
     );
 
-    this.mapping.mapAllKeysToJsonExcept('id');
+    this.mapping.mapAllKeysToJsonExcept('id', 'context');
   }
 
-  public createInstanceFrom(json: object, other?: any): LearningOutcome {
+  public createInstanceFrom(_json: object): LearningOutcome {
     return new LearningOutcome();
   }
 }
diff --git a/src/app/api/services/lti.service.ts b/src/app/api/services/lti.service.ts
new file mode 100644
index 0000000000..4cb85cc9f9
--- /dev/null
+++ b/src/app/api/services/lti.service.ts
@@ -0,0 +1,88 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {CsvResult} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import LTI_API_URL from 'src/app/config/constants/ltiApiUrl';
+import {Project} from '../models/project';
+import {SidekiqJob} from '../models/sidekiq-job';
+
+interface info {
+  name?: string;
+  email?: string;
+  roles?: string[];
+  custom?: Record<string, string>;
+  context?:
+    | {
+        id?: string;
+        label?: string;
+        title?: string;
+        type?: string[];
+      }
+    | undefined;
+}
+
+export interface RetrievedGrade {
+  id: string;
+  scoreOf: string;
+  userId: string;
+  resultScore: number;
+  resultMaximum: number;
+  comment: string;
+}
+
+export interface UnitLink {
+  contextId?: string;
+  unitId: string;
+}
+
+export interface LtiMembers {
+  members: LtiMember[];
+}
+
+export interface LtiMember {
+  email: string;
+  family_name: string;
+  given_name: string;
+  name: string;
+  user_id: string;
+  roles: string[];
+}
+
+@Injectable()
+export class LtiService {
+  constructor(private httpClient: HttpClient) {}
+
+  public getInfo(): Observable<info> {
+    return this.httpClient.get<info>(`${LTI_API_URL}/info`);
+  }
+
+  public getUnitLink(): Observable<UnitLink> {
+    return this.httpClient.get<UnitLink>(`${LTI_API_URL}/link`);
+  }
+
+  public setUnitLink(data: UnitLink): Observable<UnitLink> {
+    return this.httpClient.post<UnitLink>(`${LTI_API_URL}/link`, data);
+  }
+
+  public removeUnitLink(): Observable<UnitLink> {
+    return this.httpClient.delete<UnitLink>(`${LTI_API_URL}/link`);
+  }
+
+  public enrolUser(unit: UnitLink): Observable<Project | null> {
+    return this.httpClient.post<Project | null>(`${LTI_API_URL}/enrol`, unit);
+  }
+
+  public getMembers(): Observable<LtiMembers> {
+    return this.httpClient.get<LtiMembers>(`${LTI_API_URL}/members`);
+  }
+
+  // Sync grades for all members in the context (course)
+  public syncStudentsGrades(): Observable<CsvResult> {
+    return this.httpClient.post<CsvResult>(`${LTI_API_URL}/grades`, {});
+  }
+
+  // Sync grades for all members in the context (course)
+  public syncEnrolments(): Observable<SidekiqJob> {
+    return this.httpClient.post<SidekiqJob>(`${LTI_API_URL}/enrolments`, {});
+  }
+}
diff --git a/src/app/api/services/mapping-fn.spec.ts b/src/app/api/services/mapping-fn.spec.ts
new file mode 100644
index 0000000000..cf4334b5c6
--- /dev/null
+++ b/src/app/api/services/mapping-fn.spec.ts
@@ -0,0 +1,69 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {MappingFunctions} from './mapping-fn';
+
+describe('MappingFunctions date-only mapping', () => {
+  let originalTimezone: string | undefined;
+
+  beforeEach(() => {
+    originalTimezone = process.env.TZ;
+    process.env.TZ = 'America/New_York';
+  });
+
+  afterEach(() => {
+    if (originalTimezone === undefined) {
+      delete process.env.TZ;
+    } else {
+      process.env.TZ = originalTimezone;
+    }
+  });
+
+  it('preserves an API date-only value when mapping to the end of the local day', () => {
+    const result = MappingFunctions.mapDateToEndOfDay({dueDate: '2026-09-15'}, 'dueDate', null);
+
+    expect([
+      result.getFullYear(),
+      result.getMonth(),
+      result.getDate(),
+      result.getHours(),
+      result.getMinutes(),
+      result.getSeconds(),
+      result.getMilliseconds(),
+    ]).toEqual([2026, 8, 15, 23, 59, 59, 999]);
+  });
+
+  it('preserves an API date-only value when mapping to the start of the local day', () => {
+    const result = MappingFunctions.mapDateToDay(
+      {targetDueDate: '2026-09-15'},
+      'targetDueDate',
+      null,
+    );
+
+    expect([
+      result.getFullYear(),
+      result.getMonth(),
+      result.getDate(),
+      result.getHours(),
+      result.getMinutes(),
+      result.getSeconds(),
+      result.getMilliseconds(),
+    ]).toEqual([2026, 8, 15, 0, 0, 0, 0]);
+  });
+
+  it('keeps ordinary timestamp mapping instant-based', () => {
+    const result = MappingFunctions.mapDateToDay(
+      {completedAt: '2026-09-15T00:00:00.000Z'},
+      'completedAt',
+      null,
+    );
+
+    expect([
+      result.getFullYear(),
+      result.getMonth(),
+      result.getDate(),
+      result.getHours(),
+      result.getMinutes(),
+      result.getSeconds(),
+      result.getMilliseconds(),
+    ]).toEqual([2026, 8, 14, 0, 0, 0, 0]);
+  });
+});
diff --git a/src/app/api/services/mapping-fn.ts b/src/app/api/services/mapping-fn.ts
index 7302bb387f..4be09e8a38 100644
--- a/src/app/api/services/mapping-fn.ts
+++ b/src/app/api/services/mapping-fn.ts
@@ -1,23 +1,52 @@
+import moment from 'moment';
+
 export class MappingFunctions {
-  public static mapDateToEndOfDay(data, key, entity, params?) {
-    const jsonDate = new Date(data[key]);
-    return new Date(jsonDate.getFullYear(), jsonDate.getMonth(), jsonDate.getDate(), 23, 59, 59, 999);
-  }
+  private static mapDateValueToDay(value: unknown, preserveDatePrefix: boolean = false): Date {
+    if (typeof value === 'string') {
+      const dateOnlyPattern = preserveDatePrefix
+        ? /^(\d{4})-(\d{2})-(\d{2})(?:$|[T\s])/
+        : /^(\d{4})-(\d{2})-(\d{2})$/;
+      const dateOnlyParts = dateOnlyPattern.exec(value);
+      if (dateOnlyParts) {
+        // Date parses bare ISO dates as UTC. Some API fields also encode known civil dates as
+        // midnight timestamps. Construct those values from their calendar components so they
+        // do not shift west of UTC; ordinary timestamp mappings remain instant-based.
+        return new Date(
+          Number(dateOnlyParts[1]),
+          Number(dateOnlyParts[2]) - 1,
+          Number(dateOnlyParts[3]),
+        );
+      }
+    }
 
-  public static mapDateToDay(data, key, entity, params?) {
-    const jsonDate = new Date(data[key]);
+    const jsonDate = value instanceof Date ? value : new Date(value as string | number);
     return new Date(jsonDate.getFullYear(), jsonDate.getMonth(), jsonDate.getDate());
   }
 
-  public static mapDate(data, key, entity, params?) {
+  public static mapDateToEndOfDay(data, key, _entity, _params?) {
+    const result = MappingFunctions.mapDateValueToDay(data[key]);
+    result.setHours(23, 59, 59, 999); // all dates map to end of day
+    return result;
+  }
+
+  public static mapDateToDay(data, key: string, _entity, _params?) {
+    return MappingFunctions.mapDateValueToDay(data[key]);
+  }
+
+  public static mapCivilDateToDay(data, key: string, _entity, _params?) {
+    return MappingFunctions.mapDateValueToDay(data[key], true);
+  }
+
+  public static mapDate(data, key: string, _entity, _params?) {
     return new Date(data[key]);
   }
 
   public static mapDayToJson<T>(entity: T, key: string): string {
     if (entity[key]) {
-      const month = entity[key].getMonth() + 1;
-      const day = entity[key].getDate();
-      return `${entity[key].getFullYear()}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
+      const dateValue = moment.isMoment(entity[key]) ? entity[key].toDate() : entity[key];
+      const month = dateValue.getMonth() + 1;
+      const day = dateValue.getDate();
+      return `${dateValue.getFullYear()}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
     } else {
       return undefined;
     }
@@ -50,12 +79,34 @@ export class MappingFunctions {
   }
 
   /**
-     * Calculate the time between two dates
-     *
-     * @param date1 days from this date
-     * @param date2 to this date
-     * @returns the time from date1 to date2
-     */
+   * Add a number of days to a date.
+   *
+   * @param date starting date
+   * @param days days to add
+   * @returns the date that is `days` days after `date`
+   */
+  public static addDays(date: Date, days: number): Date {
+    return new Date(date.getTime() + MappingFunctions.dayMs(days));
+  }
+
+  /**
+   * Add a number of weeks to a date.
+   *
+   * @param date starting date
+   * @param weeks days to add
+   * @returns the date that is `days` days after `date`
+   */
+  public static addWeeks(date: Date, weeks: number): Date {
+    return new Date(date.getTime() + MappingFunctions.weeksMs(weeks));
+  }
+
+  /**
+   * Calculate the time between two dates
+   *
+   * @param date1 days from this date
+   * @param date2 to this date
+   * @returns the time from date1 to date2
+   */
   public static timeBetween(date1: Date, date2: Date): number {
     return date2.getTime() - date1.getTime();
   }
@@ -67,7 +118,7 @@ export class MappingFunctions {
    * @param date2 to this date
    * @returns the days from date1 to date2
    */
-   public static daysBetween(date1: Date, date2: Date): number {
+  public static daysBetween(date1: Date, date2: Date): number {
     const diff = this.timeBetween(date1, date2);
     return Math.ceil(diff / (1000 * 3600 * 24));
   }
@@ -83,4 +134,15 @@ export class MappingFunctions {
     const diff = this.daysBetween(date1, date2);
     return Math.ceil(diff / 7);
   }
+
+  /**
+   * Calculate the date that is a number of days after a given date
+   *
+   * @param date start date
+   * @param days number of days to add
+   * @returns the date that is that many days after the start date
+   */
+  public static daysAfter(date: Date, days: number): Date {
+    return new Date(date.getTime() + this.dayMs(days));
+  }
 }
diff --git a/src/app/api/services/marking-session.service.ts b/src/app/api/services/marking-session.service.ts
new file mode 100644
index 0000000000..d5deeb814c
--- /dev/null
+++ b/src/app/api/services/marking-session.service.ts
@@ -0,0 +1,39 @@
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Unit} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {MarkingSession} from '../models/marking-session';
+
+@Injectable()
+export class MarkingSessionService extends CachedEntityService<MarkingSession> {
+  protected readonly endpointFormat = 'units/:unitId:/marking_sessions/:id:';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'startTime',
+      'endTime',
+      'duringTutorial',
+      'durationMinutes',
+
+      'commentsAdded',
+      'assessments',
+      'submissionsOpened',
+
+      {
+        keys: ['user', 'user_id'],
+        toEntityFn: (data: object, _key: string, markingSession: MarkingSession) => {
+          const userRole = markingSession.unit.staff.find((s) => s.user.id === data['user_id']);
+          return userRole?.user;
+        },
+      },
+    );
+  }
+
+  public createInstanceFrom(json: object, other?: Unit): MarkingSession {
+    return new MarkingSession(other);
+  }
+}
diff --git a/src/app/api/services/notification-route.service.ts b/src/app/api/services/notification-route.service.ts
new file mode 100644
index 0000000000..fb7e0f63a4
--- /dev/null
+++ b/src/app/api/services/notification-route.service.ts
@@ -0,0 +1,90 @@
+// MN-C03: one security boundary for every notification destination.
+import {Injectable} from '@angular/core';
+import {Router} from '@angular/router';
+import {AuthReturnUrlService} from 'src/app/security/auth-return-url.service';
+import {AuthenticationService} from './authentication.service';
+
+export const NOTIFICATION_ROUTE_FALLBACK = '/notifications';
+
+const MAX_NOTIFICATION_ROUTE_LENGTH = 256;
+const CONTROL_CHARACTER_MAX = 0x1f;
+const DELETE_CHARACTER = 0x7f;
+const FORBIDDEN_ROUTE_TEXT = /[\s\\?#%]/;
+const PROJECT_ROOT_ROUTE = /^\/projects\/[1-9]\d*\/(?:dashboard|groups)$/;
+const PROJECT_TASK_ROUTE =
+  /^\/projects\/[1-9]\d*\/dashboard\/[A-Za-z0-9][A-Za-z0-9._-]{0,31}(?:\/feedback)?$/;
+
+function hasControlCharacters(value: string): boolean {
+  return Array.from(value).some((character) => {
+    const characterCode = character.charCodeAt(0);
+    return characterCode <= CONTROL_CHARACTER_MAX || characterCode === DELETE_CHARACTER;
+  });
+}
+
+@Injectable({providedIn: 'root'})
+export class NotificationRouteService {
+  constructor(
+    private router: Router,
+    private authentication: AuthenticationService,
+    private authReturnUrl: AuthReturnUrlService,
+  ) {}
+
+  public resolve(link: unknown): string {
+    if (typeof link !== 'string') {
+      return NOTIFICATION_ROUTE_FALLBACK;
+    }
+    if (link.length === 0 || link.length > MAX_NOTIFICATION_ROUTE_LENGTH) {
+      return NOTIFICATION_ROUTE_FALLBACK;
+    }
+    if (link !== link.trim()) {
+      return NOTIFICATION_ROUTE_FALLBACK;
+    }
+    if (!link.startsWith('/') || link.startsWith('//')) {
+      return NOTIFICATION_ROUTE_FALLBACK;
+    }
+    if (hasControlCharacters(link) || FORBIDDEN_ROUTE_TEXT.test(link)) {
+      return NOTIFICATION_ROUTE_FALLBACK;
+    }
+
+    if (link === NOTIFICATION_ROUTE_FALLBACK || PROJECT_ROOT_ROUTE.test(link)) {
+      return link;
+    }
+
+    if (!PROJECT_TASK_ROUTE.test(link)) {
+      return NOTIFICATION_ROUTE_FALLBACK;
+    }
+
+    return link;
+  }
+
+  public navigate(link: unknown): Promise<boolean> {
+    const target = this.resolve(link);
+
+    // A service-worker click can reach an already-open anonymous client after
+    // the one-off startup authentication check has finished. Save the already
+    // allow-listed notification target and enter the normal sign-in flow now,
+    // rather than waiting for a protected request to fail.
+    if (!this.authentication.isAuthenticated()) {
+      this.authReturnUrl.remember(target);
+      if (this.currentPath() === '/sign_in') {
+        return Promise.resolve(true);
+      }
+      return this.router.navigateByUrl('/sign_in');
+    }
+
+    if (this.currentPath() === target) {
+      return Promise.resolve(true);
+    }
+    return this.router.navigateByUrl(target);
+  }
+
+  private currentPath(): string {
+    const routerUrl = typeof this.router.url === 'string' ? this.router.url : '/';
+    const withoutFragment = routerUrl.split('#', 1)[0];
+    const withoutQuery = withoutFragment.split('?', 1)[0];
+    if (!withoutQuery) {
+      return '/';
+    }
+    return withoutQuery.length > 1 ? withoutQuery.replace(/\/+$/, '') : withoutQuery;
+  }
+}
diff --git a/src/app/api/services/notification.service.ts b/src/app/api/services/notification.service.ts
new file mode 100644
index 0000000000..b8e02cadc5
--- /dev/null
+++ b/src/app/api/services/notification.service.ts
@@ -0,0 +1,329 @@
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable, Subject, map, takeUntil, tap} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {Notification} from '../models/notification';
+import {MappingFunctions} from './mapping-fn';
+
+/**
+ * Reads and updates the signed in user's notifications.
+ *
+ * Three of the five endpoints are ordinary entity work and go through
+ * CachedEntityService. The other two answer `{count: n}` and `{success: true}`,
+ * which are not entities and would not survive the mapping, so those two use
+ * HttpClient directly. Each one says so at its own definition.
+ *
+ * Provided in root rather than declared in doubtfire-angular.module.ts. Every
+ * other entity service is registered in that module, but IN-01 to IN-05 are
+ * five separate pull requests into the same feature branch and would otherwise
+ * all edit the same providers array. PushNotificationService, already merged on
+ * this branch, sets the same precedent. Being a root singleton is also why
+ * reset() exists, see the note there.
+ */
+@Injectable({providedIn: 'root'})
+export class NotificationService extends CachedEntityService<Notification> {
+  protected readonly endpointFormat = 'notifications/:id:';
+  private readonly markReadEndpointFormat = 'notifications/:id:/read';
+
+  private readonly unreadCountSubject: BehaviorSubject<number> = new BehaviorSubject(0);
+
+  /**
+   * Fires once per sign out, from reset().
+   *
+   * Every request this service returns ends with takeUntil on it, so this
+   * unsubscribes the lot. Unsubscribing aborts the underlying request, which is
+   * the part that matters: nothing in ngx-entity-service subscribes internally,
+   * so the cache writes all live in taps on the chain and an aborted request
+   * never reaches them. Without this, one still in flight at sign out would
+   * land afterwards and put the previous user's rows back into a cache that is
+   * shared by the whole app.
+   */
+  private readonly sessionEnded: Subject<void> = new Subject<void>();
+
+  /**
+   * Which unread count request is which.
+   *
+   * Every mutation asks for the count again, so several are often in the air at
+   * once, and nothing makes them answer in the order they were sent. The older
+   * answer is the wrong one, it was computed before the newer mutation applied.
+   * Each request takes the next number on the way out and only a number higher
+   * than the last one applied is allowed to move the subject.
+   */
+  private issuedUnreadCountRequests = 0;
+  private appliedUnreadCountRequest = 0;
+
+  constructor(private apiHttpClient: HttpClient) {
+    super(apiHttpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'notificationType',
+      'message',
+      'link',
+      {
+        // Not MappingFunctions.mapDate. read_at is null on every unread
+        // notification and new Date(null) is the epoch, not null, so mapDate
+        // would report every unread notification as read.
+        keys: 'readAt',
+        toEntityFn: (data: object, key: string) => (data[key] ? new Date(data[key]) : null),
+      },
+      {
+        keys: 'createdAt',
+        toEntityFn: MappingFunctions.mapDate,
+      },
+    );
+
+    // No mapAllKeysToJsonExcept on purpose. Not one of the five endpoints reads
+    // a request body, so this entity is never serialised on the way out.
+  }
+
+  public createInstanceFrom(_json: object): Notification {
+    return new Notification();
+  }
+
+  /**
+   * How many unread notifications the signed in user has.
+   *
+   * A subject and not a request, so the bell subscribes once and every later
+   * mark read or delete moves the number without another round trip. It starts
+   * at zero and stays there until refreshUnreadCount() is called, so call that
+   * on sign in and on navigation rather than trusting the seed.
+   */
+  public get unreadCount$(): Observable<number> {
+    return this.unreadCountSubject.asObservable();
+  }
+
+  /**
+   * Every notification for the signed in user, newest first.
+   *
+   * fetchAll and not query, because query answers straight from the cache once
+   * it has run, and a notification list that never changes after first paint is
+   * worse than useless. fetchAll always goes to the server.
+   *
+   * The cache is passed explicitly and that is not optional. buildInstance only
+   * reuses an entity already in the cache when options.cache is set, and
+   * fetchAll does not set it the way query does. Without this line every call
+   * would build a fresh set of objects, so a component holding the result of an
+   * earlier call would stop seeing later updates to the same rows.
+   *
+   * There is no paging. GET /notifications returns the lot in one response, it
+   * takes unread_only and nothing else, so page client side over what comes
+   * back. If real paging is wanted it is an api change, not a change here.
+   */
+  public list(unreadOnly = false): Observable<Notification[]> {
+    const options: RequestOptions<Notification> = {cache: this.cache};
+
+    if (unreadOnly) {
+      options.params = {unread_only: true};
+    }
+
+    return this.fetchAll(undefined, options).pipe(
+      tap((notifications) => {
+        if (!unreadOnly) {
+          this.evictMissing(notifications);
+        }
+      }),
+      takeUntil(this.sessionEnded),
+    );
+  }
+
+  /**
+   * Ask the api how many are unread and push the answer to unreadCount$.
+   *
+   * Direct HttpClient. unread_count answers `{count: n}`, which is not a
+   * Notification.
+   *
+   * Only the newest request in flight is allowed to move the subject, see
+   * appliedUnreadCountRequest. The returned observable still emits whatever the
+   * server said either way, because the caller asked a question and that is the
+   * answer to it. unreadCount$ is the one the bell reads and the one that has to
+   * stay right.
+   */
+  public refreshUnreadCount(): Observable<number> {
+    const request = ++this.issuedUnreadCountRequests;
+
+    return this.apiHttpClient.get<{count: number}>(`${API_URL}/notifications/unread_count`).pipe(
+      map((response) => response.count),
+      tap((count) => {
+        if (request > this.appliedUnreadCountRequest) {
+          this.appliedUnreadCountRequest = request;
+          this.unreadCountSubject.next(count);
+        }
+      }),
+      takeUntil(this.sessionEnded),
+    );
+  }
+
+  /**
+   * Mark one notification as read.
+   *
+   * The api answers with the updated entity, so this goes through update() and
+   * the cache corrects itself. The body is empty and the endpoint ignores it.
+   */
+  public markRead(notification: Notification): Observable<Notification> {
+    const wasUnread = !notification.isRead;
+
+    const options: RequestOptions<Notification> = {
+      endpointFormat: this.markReadEndpointFormat,
+      entity: notification,
+    };
+
+    return super.update({id: notification.id}, options).pipe(
+      tap(() => {
+        // Only when it was unread. mark_read! is a no-op on the api for one
+        // already read, so decrementing again would drift the bell below the
+        // real count.
+        if (wasUnread) {
+          this.adjustUnreadCount(-1);
+        }
+
+        this.resyncUnreadCount();
+      }),
+      takeUntil(this.sessionEnded),
+    );
+  }
+
+  /**
+   * Mark every unread notification as read.
+   *
+   * Direct HttpClient, because read_all answers `{success: true}`. That leaves
+   * the cache holding rows the server now considers read, so they are corrected
+   * here. Without it the bell drops to zero while the list still draws every
+   * row as unread, which reads as an api bug and is not one.
+   *
+   * The read time is this machine's clock, because read_all sends none back. It
+   * is close enough to display and the next list() replaces it with the server's
+   * value.
+   */
+  public markAllRead(): Observable<void> {
+    return this.apiHttpClient.put<{success: boolean}>(`${API_URL}/notifications/read_all`, {}).pipe(
+      map(() => void 0),
+      tap(() => {
+        const readAt = new Date();
+
+        this.cache.currentValues
+          .filter((notification) => !notification.isRead)
+          .forEach((notification) => {
+            notification.readAt = readAt;
+
+            // Writing the property alone announces nothing. Only EntityCache.set
+            // calls updateCacheArray, so without this cache.values never emits
+            // and an OnPush list bound to it keeps drawing every row unread.
+            this.cache.set(notification.key, notification);
+          });
+
+        this.setUnreadCount(0);
+        this.resyncUnreadCount();
+      }),
+      takeUntil(this.sessionEnded),
+    );
+  }
+
+  /**
+   * Delete one notification.
+   *
+   * Named remove because delete() is inherited and takes path ids. This wraps it
+   * so callers pass the entity and the unread count follows. The base class
+   * evicts it from the cache.
+   */
+  public remove(notification: Notification): Observable<void> {
+    const wasUnread = !notification.isRead;
+
+    return super.delete<{success: boolean}>(notification.id).pipe(
+      map(() => void 0),
+      tap(() => {
+        if (wasUnread) {
+          this.adjustUnreadCount(-1);
+        }
+
+        this.resyncUnreadCount();
+      }),
+      takeUntil(this.sessionEnded),
+    );
+  }
+
+  /**
+   * Forget everything held for the signed in user.
+   *
+   * Call this on sign out. The service is provided in root and the app signs out
+   * by routing rather than reloading, so without this the cache keeps one
+   * person's notification messages and the bell keeps their unread count. On a
+   * shared machine the next person to sign in sees both. AuthenticationService
+   * already drops the push registration for the same reason.
+   *
+   * Clearing is not enough on its own. Anything still in flight would answer
+   * after the clear and write the previous user's rows straight back, so the
+   * requests are cancelled first.
+   */
+  public reset(): void {
+    // Before the clear, not after. This unsubscribes every request the service
+    // has handed out, which aborts each one, so none of them reach the taps
+    // that write to the cache or the count.
+    this.sessionEnded.next();
+
+    this.cache.clear();
+    this.setUnreadCount(0);
+  }
+
+  /**
+   * Drop anything the cache holds that the server did not just send back.
+   *
+   * fetchAll only ever adds. Without this a notification deleted in another tab
+   * stays cached for the rest of the session, and markAllRead would walk over a
+   * row that no longer exists.
+   *
+   * Only correct after an unfiltered list. An unread_only response leaves out
+   * every read notification deliberately, so evicting on that would throw away
+   * rows that are still there.
+   */
+  private evictMissing(present: Notification[]): void {
+    const keep = new Set(present.map((notification) => notification.key));
+
+    // currentValues is a live readonly view, so collect the doomed keys before
+    // deleting rather than mutating while walking it.
+    this.cache.currentValues
+      .filter((notification) => !keep.has(notification.key))
+      .map((notification) => notification.key)
+      .forEach((key) => this.cache.delete(key));
+  }
+
+  /**
+   * Move the unread count without going back to the api.
+   *
+   * Floored at zero. A negative badge is a worse thing to show than a stale one.
+   */
+  private adjustUnreadCount(delta: number): void {
+    this.setUnreadCount(Math.max(0, this.unreadCountSubject.value + delta));
+  }
+
+  /**
+   * Put a locally worked out number on the bell.
+   *
+   * A local write counts as newer than every count request already in the air,
+   * so this retires all of them. Without that, one sent before this line could
+   * answer after it and undo it. That is the same stale write the sequence
+   * guard exists to stop, just arriving from the other direction.
+   */
+  private setUnreadCount(count: number): void {
+    this.appliedUnreadCountRequest = this.issuedUnreadCountRequests;
+    this.unreadCountSubject.next(count);
+  }
+
+  /**
+   * Re-read the count from the api without making the caller wait for it.
+   *
+   * Every mutation adjusts the count locally first so the bell moves straight
+   * away, then calls this. The local arithmetic drifts: two mark read calls
+   * raised before either answers both see the row as unread and both subtract
+   * one, and nothing local can know about a notification another tab created or
+   * deleted. The server number is the real one, so take it while we are already
+   * talking to the server.
+   *
+   * Errors are swallowed on purpose. A count that failed to refresh is not worth
+   * failing the action the user actually asked for.
+   */
+  private resyncUnreadCount(): void {
+    this.refreshUnreadCount().subscribe({error: () => undefined});
+  }
+}
diff --git a/src/app/api/services/overseer-assessment.service.ts b/src/app/api/services/overseer-assessment.service.ts
index 9f0017dc98..c206952ec5 100644
--- a/src/app/api/services/overseer-assessment.service.ts
+++ b/src/app/api/services/overseer-assessment.service.ts
@@ -1,56 +1,84 @@
-import { Injectable } from '@angular/core';
-import { EntityService } from 'ngx-entity-service';
-import { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
-import { OverseerAssessment } from '../models/overseer/overseer-assessment';
+import {EntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {Task} from '../models/doubtfire-model';
+import {OverseerAssessment} from '../models/overseer/overseer-assessment';
+import {OverseerStepResultService} from './overseer-step-result.service';
 
 @Injectable()
 export class OverseerAssessmentService extends EntityService<OverseerAssessment> {
-  protected readonly endpointFormat = 'projects/:project_id:/task_def_id/:td_id:/submissions/timestamps/:timestamp:';
-  protected readonly triggerEndpointFormat = 'projects/:project_id:/task_def_id/:td_id:/overseer_assessment/:id:/trigger';
+  protected readonly endpointFormat =
+    'projects/:project_id:/task_def_id/:td_id:/submissions/timestamps/:timestamp:';
+  protected readonly triggerEndpointFormat =
+    'projects/:project_id:/task_def_id/:td_id:/overseer_assessment/:id:/trigger';
 
-  constructor(httpClient: HttpClient) {
+  constructor(
+    httpClient: HttpClient,
+    private overseerStepResultService: OverseerStepResultService,
+  ) {
     super(httpClient, API_URL);
 
     this.mapping.addKeys(
       'id',
       'submissionTimestamp',
       'taskId',
+      'submissionHistoryId',
       'createdAt',
       'updatedAt',
       ['taskStatus', 'result_task_status'],
       ['submissionStatus', 'status'],
       {
         keys: ['timestamp', 'submission_timestamp'],
-        toEntityFn: (data, key, entity, params?) => {
+        toEntityFn: (data, _key, _entity, _params?) => {
           return new Date(data['submission_timestamp'] * 1000);
-        }
+        },
       },
-      ['timestampString', 'submission_timestamp']
+      ['timestampString', 'submission_timestamp'],
+      {
+        keys: 'overseerStepResults',
+        toEntityOp: (data: object, key: string, overseerAssesment: OverseerAssessment) => {
+          data[key]?.forEach((overseerStep) => {
+            overseerAssesment.stepResultsCache.getOrCreate(
+              overseerStep['id'],
+              this.overseerStepResultService,
+              overseerStep,
+              {
+                constructorParams: overseerAssesment,
+              },
+            );
+          });
+        },
+      },
+      'overseerStepId',
+      'totalSteps',
+      'passedSteps',
+      'hasSubmissionFiles',
     );
   }
 
-  public createInstanceFrom(json: any, other?: any): OverseerAssessment {
+  public createInstanceFrom(_json: object, other?: Task): OverseerAssessment {
     return new OverseerAssessment(other);
   }
 
-  public queryForTask(task: any): Observable<OverseerAssessment[]> {
+  public queryForTask(task: Task): Observable<OverseerAssessment[]> {
     const pathIds = {
       project_id: task.project.id,
-      td_id: task.definition.id
+      td_id: task.definition.id,
     };
 
-    return this.query(pathIds, task);
+    return this.query(pathIds, {
+      constructorParams: task,
+    });
   }
 
-  public triggerOverseer(assessment: OverseerAssessment) : Observable<OverseerAssessment> {
+  public triggerOverseer(assessment: OverseerAssessment): Observable<OverseerAssessment> {
     const pathIds = {
       project_id: assessment.task.project.id,
       td_id: assessment.task.definition.id,
-      id: assessment.id
-    }
-    return this.put(pathIds, { endpointFormat: this.triggerEndpointFormat });
+      id: assessment.id,
+    };
+    return this.put(pathIds, {endpointFormat: this.triggerEndpointFormat});
   }
-
 }
diff --git a/src/app/api/services/overseer-image.service.ts b/src/app/api/services/overseer-image.service.ts
index 53a5616f56..f49955fdec 100644
--- a/src/app/api/services/overseer-image.service.ts
+++ b/src/app/api/services/overseer-image.service.ts
@@ -1,9 +1,10 @@
-import { CachedEntityService } from 'ngx-entity-service';
-import { Observable, switchMap } from 'rxjs';
-import { OverseerImage } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {OverseerImage} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {SidekiqJob} from '../models/sidekiq-job';
 
 @Injectable()
 export class OverseerImageService extends CachedEntityService<OverseerImage> {
@@ -19,23 +20,19 @@ export class OverseerImageService extends CachedEntityService<OverseerImage> {
       'tag',
       'pulledImageText',
       'pulledImageStatus',
-      'lastPulledDate'
+      'lastPulledDate',
     );
 
     this.mapping.mapAllKeysToJsonExcept('id');
   }
 
-  public pullDockerImage(image: OverseerImage): Observable<OverseerImage> {
+  public pullDockerImage(image: OverseerImage): Observable<SidekiqJob> {
     return super.put(image, {
-      endpointFormat: this.pullImageEndpointFormat
-    }).pipe(
-      switchMap(response => {
-        return super.update(image);
-      })
-    )
+      endpointFormat: this.pullImageEndpointFormat,
+    });
   }
 
-  public createInstanceFrom(json: object, other?: any): OverseerImage {
+  public createInstanceFrom(_json: object): OverseerImage {
     return new OverseerImage();
   }
 }
diff --git a/src/app/api/services/overseer-step-result.service.ts b/src/app/api/services/overseer-step-result.service.ts
new file mode 100644
index 0000000000..ba1158714b
--- /dev/null
+++ b/src/app/api/services/overseer-step-result.service.ts
@@ -0,0 +1,52 @@
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {OverseerAssessment} from '../models/doubtfire-model';
+import {OverseerStepResult} from '../models/overseer/overseer-step-result';
+
+@Injectable()
+export class OverseerStepResultService extends CachedEntityService<OverseerStepResult> {
+  protected readonly endpointFormat =
+    'units/:unitId:/task_definitions/:taskDefId:/overseer_step_results/:id:';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'overseerStepId',
+      'exitStatus',
+      'pass',
+      'feedbackMessage',
+      'stdout',
+      'stdin',
+      'expectedOutput',
+      'stdoutSha256',
+      'stdinSha256',
+      'expectedOutputSha256',
+    );
+
+    this.mapping.mapAllKeysToJsonExcept('id');
+  }
+
+  public createInstanceFrom(_json: object, other?: OverseerAssessment): OverseerStepResult {
+    return new OverseerStepResult(other);
+  }
+
+  public getOverseerStepResults(assessment: OverseerAssessment): Observable<OverseerStepResult[]> {
+    const pathIds = {
+      projectId: assessment.task.project.id,
+      taskDefId: assessment.task.definition.id,
+      id: assessment.id,
+    };
+
+    return this.query(pathIds, {
+      endpointFormat:
+        'projects/:projectId:/task_definitions/:taskDefId:/overseer_assessments_results/:id:',
+      constructorParams: assessment.task,
+      cache: assessment.stepResultsCache,
+    });
+  }
+}
diff --git a/src/app/api/services/overseer-step.service.ts b/src/app/api/services/overseer-step.service.ts
new file mode 100644
index 0000000000..dffdd95999
--- /dev/null
+++ b/src/app/api/services/overseer-step.service.ts
@@ -0,0 +1,60 @@
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {OverseerStep} from '../models/overseer/overseer-step';
+import {TaskDefinition} from '../models/task-definition';
+
+@Injectable()
+export class OverseerStepService extends CachedEntityService<OverseerStep> {
+  protected readonly endpointFormat =
+    'units/:unitId:/task_definitions/:taskDefId:/overseer_steps/:id:';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      // 'taskDefinition',
+      'name',
+      'description',
+      'displayName',
+      'displayDescription',
+      // 'runCommand',
+      {
+        keys: 'runCommand',
+        toEntityFn: (data: object, key: string, entity: OverseerStep) => {
+          const raw = data['run_command'];
+          if (raw?.startsWith('b64:')) {
+            entity.decodedRunCommand = atob(raw.slice(4));
+          } else {
+            entity.decodedRunCommand = raw;
+          }
+
+          return raw;
+        },
+      },
+      'timeout',
+      'sortOrder',
+      'stepType',
+      'partialOutputDiff',
+      'stdinInputFile',
+      'expectedOutputFile',
+      'feedbackMessage',
+      'statusOnSuccess',
+      'statusOnFailure',
+      'haltOnSuccess',
+      'haltOnFailure',
+      'showExpectedOutput',
+      'showStdin',
+      'showStdout',
+      'enabled',
+    );
+
+    this.mapping.mapAllKeysToJsonExcept('id');
+  }
+
+  public createInstanceFrom(_json: object, other?: TaskDefinition): OverseerStep {
+    return new OverseerStep(other);
+  }
+}
diff --git a/src/app/api/services/peer-progress-indicator.service.ts b/src/app/api/services/peer-progress-indicator.service.ts
new file mode 100644
index 0000000000..2333533928
--- /dev/null
+++ b/src/app/api/services/peer-progress-indicator.service.ts
@@ -0,0 +1,188 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, map, of} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {
+  DemoPeerProgressState,
+  createDemoUnitSummary,
+  createMaskedPeerProgressIndicator,
+} from 'src/app/demo/fixtures/peer-progress-demo.fixtures';
+import {
+  PeerProgressDistributionUnavailableReason,
+  PeerProgressIndicator,
+  PeerProgressUnavailableReason,
+} from '../models/peer-progress-indicator';
+import {PeerProgressUnitSummary} from '../models/peer-progress-unit-summary';
+import {TaskStatus, TaskStatusEnum} from '../models/task-status';
+
+interface PeerProgressStatusDistributionResponse {
+  status: string;
+  percentage: number;
+}
+
+interface PeerProgressIndicatorResponse {
+  task_definition_id: number;
+  unit_id: number;
+  target_grade: number | null;
+  submitted_percentage: number | null;
+  completed_percentage?: number | null;
+  distribution_available?: boolean;
+  status_distribution?: PeerProgressStatusDistributionResponse[] | null;
+  is_user_enabled?: boolean;
+  unavailable_reason?: string | null;
+  distribution_unavailable_reason?: string | null;
+  is_suppressed: boolean;
+  is_stale: boolean;
+  is_feature_enabled: boolean;
+  last_updated_at: string | null;
+  unavailable_message: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PeerProgressIndicatorService {
+  private readonly knownStatuses: Set<TaskStatusEnum> = new Set(TaskStatus.STATUS_KEYS);
+  private readonly unavailableReasons: Set<PeerProgressUnavailableReason> = new Set([
+    'user_disabled',
+    'feature_disabled',
+    'target_grade_unavailable',
+    'snapshot_unavailable',
+    'insufficient_cohort',
+    'aggregation_incomplete',
+    'stale',
+  ]);
+  private readonly distributionUnavailableReasons: Set<PeerProgressDistributionUnavailableReason> =
+    new Set(['detailed_data_unavailable', 'privacy_protection', ...this.unavailableReasons]);
+
+  constructor(
+    private httpClient: HttpClient,
+    private demoMode: DemoModeStore,
+  ) {}
+
+  getIndicator(projectId: number, taskDefinitionId: number): Observable<PeerProgressIndicator> {
+    if (this.demoMode.shouldMaskApiData) {
+      return of(createMaskedPeerProgressIndicator(taskDefinitionId));
+    }
+
+    const url = `${API_URL}/projects/${projectId}/task_def_id/${taskDefinitionId}/peer_progress`;
+
+    return this.httpClient.get<PeerProgressIndicatorResponse>(url).pipe(
+      map((response) => {
+        const isUserEnabled = response.is_user_enabled !== false;
+        const mayExposeCompact =
+          isUserEnabled &&
+          response.is_feature_enabled &&
+          !response.is_suppressed &&
+          !response.is_stale;
+        const mayExposeDistribution = mayExposeCompact && response.distribution_available === true;
+        const statusDistribution = mayExposeDistribution
+          ? this.mapStatusDistribution(response.status_distribution)
+          : null;
+        const distributionAvailable = statusDistribution !== null;
+
+        return {
+          taskDefinitionId: response.task_definition_id,
+          unitId: response.unit_id,
+          targetGrade: response.target_grade,
+          submittedPercentage: mayExposeCompact
+            ? this.mapCompactPercentage(response.submitted_percentage)
+            : null,
+          completedPercentage: mayExposeCompact
+            ? this.mapCompactPercentage(response.completed_percentage)
+            : null,
+          distributionAvailable,
+          statusDistribution: statusDistribution ?? [],
+          isUserEnabled,
+          isSuppressed: response.is_suppressed,
+          isStale: response.is_stale,
+          isFeatureEnabled: response.is_feature_enabled,
+          lastUpdatedAt: response.last_updated_at,
+          unavailableMessage: response.unavailable_message,
+          unavailableReason: this.mapUnavailableReason(response.unavailable_reason),
+          distributionUnavailableReason: this.mapDistributionUnavailableReason(
+            response.distribution_unavailable_reason,
+          ),
+        };
+      }),
+    );
+  }
+
+  private mapUnavailableReason(
+    reason: string | null | undefined,
+  ): PeerProgressUnavailableReason | null {
+    return this.unavailableReasons.has(reason as PeerProgressUnavailableReason)
+      ? (reason as PeerProgressUnavailableReason)
+      : null;
+  }
+
+  private mapDistributionUnavailableReason(
+    reason: string | null | undefined,
+  ): PeerProgressDistributionUnavailableReason | null {
+    return this.distributionUnavailableReasons.has(
+      reason as PeerProgressDistributionUnavailableReason,
+    )
+      ? (reason as PeerProgressDistributionUnavailableReason)
+      : null;
+  }
+
+  private mapStatusDistribution(
+    distribution: PeerProgressStatusDistributionResponse[] | null | undefined,
+  ): PeerProgressIndicator['statusDistribution'] | null {
+    if (!Array.isArray(distribution) || distribution.length !== this.knownStatuses.size) {
+      return null;
+    }
+
+    const seen: Set<TaskStatusEnum> = new Set();
+    const result: PeerProgressIndicator['statusDistribution'] = [];
+
+    for (const entry of distribution) {
+      const status = entry?.status as TaskStatusEnum;
+      const percentage = entry?.percentage;
+
+      if (
+        !this.knownStatuses.has(status) ||
+        seen.has(status) ||
+        typeof percentage !== 'number' ||
+        !Number.isFinite(percentage) ||
+        percentage < 0 ||
+        percentage > 100 ||
+        percentage % 10 !== 0
+      ) {
+        return null;
+      }
+
+      seen.add(status);
+      result.push({status, percentage});
+    }
+
+    return seen.size === this.knownStatuses.size ? result : null;
+  }
+
+  private mapCompactPercentage(value: unknown): number | null {
+    return typeof value === 'number' &&
+      Number.isFinite(value) &&
+      value >= 0 &&
+      value <= 100 &&
+      value % 10 === 0
+      ? value
+      : null;
+  }
+
+  /**
+   * Builds a privacy-safe unit-summary fixture for PPI-F02 tests and demos.
+   *
+   * This is mock-only. It must not be treated as the live PPI-F01 production
+   * adapter, and the caller-supplied target grade must never become the design
+   * of a future live endpoint.
+   */
+  getDemoUnitSummary(
+    unitId: number,
+    targetGrade: number,
+    studentPercentage: number | null,
+    state: DemoPeerProgressState,
+  ): Observable<PeerProgressUnitSummary> {
+    return of(createDemoUnitSummary(unitId, targetGrade, studentPercentage, state));
+  }
+}
diff --git a/src/app/api/services/peer-progress.service.ts b/src/app/api/services/peer-progress.service.ts
new file mode 100644
index 0000000000..2d4b84932f
--- /dev/null
+++ b/src/app/api/services/peer-progress.service.ts
@@ -0,0 +1,56 @@
+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {
+  DEMO_PEER_MEDIAN_STATE,
+  DEMO_WEEKLY_REMAINING,
+} from 'src/app/demo/fixtures/peer-progress-demo.fixtures';
+import {PeerMedianPoint, PeerProgressResponse} from '../models/peer-progress';
+import {Project} from '../models/project';
+import {MappingFunctions} from './mapping-fn';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PeerProgressService {
+  /**
+   * Temporary proof-of-concept state.
+   *
+   * The future authorised backend must decide whether the result is ready,
+   * suppressed, unavailable or disabled. It must not send the raw cohort size
+   * to the browser.
+   */
+  public getCohortMedian(
+    project: Project,
+    targetGrade: number = project.targetGrade,
+  ): Observable<PeerProgressResponse> {
+    const state = DEMO_PEER_MEDIAN_STATE;
+
+    return of({
+      project_id: project.id,
+      target_grade: targetGrade,
+      state,
+      median_burndown: state === 'ready' ? this.sampleProfile(project, DEMO_WEEKLY_REMAINING) : [],
+    });
+  }
+
+  private sampleProfile(project: Project, profile: readonly number[]): PeerMedianPoint[] {
+    const asOf = Date.now();
+    const weeks = MappingFunctions.step(
+      project.unit.startDate.getTime(),
+      project.unit.endDate.getTime(),
+      MappingFunctions.weeksMs(1),
+    );
+
+    // Map against the whole unit before removing future points. Mapping only
+    // the elapsed weeks would incorrectly stretch the sample to 100% complete
+    // at today's date and make the demo look like the cohort has finished every
+    // task.
+    return weeks
+      .map((time, week) => ({
+        date: new Date(time).toISOString(),
+        remaining:
+          profile[Math.round((week / Math.max(weeks.length - 1, 1)) * (profile.length - 1))],
+      }))
+      .filter((point) => new Date(point.date).getTime() <= asOf);
+  }
+}
diff --git a/src/app/api/services/project.service.ts b/src/app/api/services/project.service.ts
index e9ffc791ed..4156e29484 100644
--- a/src/app/api/services/project.service.ts
+++ b/src/app/api/services/project.service.ts
@@ -1,14 +1,19 @@
-import { CachedEntityService, RequestOptions } from 'ngx-entity-service';
-import { CampusService, Project, Unit, UnitService, UserService } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
-import { AppInjector } from 'src/app/app-injector';
-import { Observable } from 'rxjs';
-import { TaskService } from './task.service';
-import { MappingProcess } from 'ngx-entity-service/lib/mapping-process';
-import { TaskOutcomeAlignmentService } from './task-outcome-alignment.service';
-import { GroupService } from './group.service';
+import {CachedEntityService, MappingProcess, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {
+  CampusService,
+  Project,
+  Unit,
+  UnitService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {GroupService} from './group.service';
+import {TaskOutcomeAlignmentService} from './task-outcome-alignment.service';
+import {TaskService} from './task.service';
 
 @Injectable()
 export class ProjectService extends CachedEntityService<Project> {
@@ -22,7 +27,7 @@ export class ProjectService extends CachedEntityService<Project> {
     private userService: UserService,
     private taskService: TaskService,
     private taskOutcomeAlignmentService: TaskOutcomeAlignmentService,
-    private groupService: GroupService
+    private groupService: GroupService,
   ) {
     super(httpClient, API_URL);
 
@@ -31,34 +36,36 @@ export class ProjectService extends CachedEntityService<Project> {
       'id',
       {
         keys: ['campus', 'campus_id'],
-        toEntityOp: (data: object, key: string, entity: Project, params?: any) => {
+        toEntityOp: (data: object, key: string, entity: Project) => {
           if (data['campus_id']) {
-            return this.campusService.get(data['campus_id']).subscribe(campus => { entity.campus = campus; });
+            return this.campusService.get(data['campus_id']).subscribe((campus) => {
+              entity.campus = campus;
+            });
           }
         },
-        toJsonFn: (entity: Project, key: string) => {
+        toJsonFn: (entity: Project, _key: string) => {
           return entity.campus ? entity.campus.id : entity.originalJson['camput_id'] ? -1 : null;
-        }
+        },
       },
       {
         keys: 'student',
-        toEntityFn: (data: object, key: string, entity: Project, params?: any) => {
+        toEntityFn: (data: object) => {
           const userData = data['student'];
 
           return this.userService.cache.getOrCreate(userData.id, this.userService, userData);
-        }
+        },
       },
       {
         keys: 'userId',
-        toEntityOp: (data: object, key: string, entity: Project, params?: any) => {
+        toEntityOp: (data: object, key: string, entity: Project) => {
           const userId = data['user_id'];
 
           this.userService.get(userId).subscribe({
             next: (user) => {
               entity.student = user;
-            }
+            },
           });
-        }
+        },
       },
       'enrolled',
       'targetGrade',
@@ -66,64 +73,70 @@ export class ProjectService extends CachedEntityService<Project> {
       'portfolioFiles',
       'compilePortfolio',
       'similarityFlag',
+      'specConDays',
+      'staffNoteCount',
       {
         keys: 'hasPortfolio',
-        toEntityFn: (data: object, key: string, entity: Project, params?: any) => {
+        toEntityFn: (data: object, key: string, entity: Project) => {
           const result = data[key] === true;
 
-          if (result) entity.portfolioStatus = 1;
-          else if (entity.compilePortfolio) entity.portfolioStatus = 0.5;
-          else entity.portfolioStatus = 0;
+          if (result) {
+            entity.portfolioStatus = 1;
+          } else if (entity.compilePortfolio) {
+            entity.portfolioStatus = 0.5;
+          } else {
+            entity.portfolioStatus = 0;
+          }
 
           return result;
-        }
+        },
       },
       'portfolioAvailable',
       'usesDraftLearningSummary',
       {
         keys: ['taskStats', 'stats'],
-        toEntityOp: (data: object, key: string, entity: Project, params?: any) => {
+        toEntityOp: (data: object, key: string, entity: Project) => {
           const values = data[key];
           entity.taskStats = [
             {
-              key: "fail",
-              value: Math.round((values['red_pct'] || 0) * 100)
+              key: 'fail',
+              value: Math.round((values['red_pct'] || 0) * 100),
             },
             {
-              key: "not_started",
+              key: 'not_started',
               value: Math.round((values['grey_pct'] || 1) * 100),
             },
             {
-              key: "working_on_it",
-              value: Math.round((values['orange_pct'] ||  0) * 100),
+              key: 'working_on_it',
+              value: Math.round((values['orange_pct'] || 0) * 100),
             },
             {
-              key: "ready_for_feedback",
+              key: 'ready_for_feedback',
               value: Math.round((values['blue_pct'] || 0) * 100),
             },
             {
-              key: "complete",
-              value: Math.round((values['green_pct'] || 0) * 100)
-            }
+              key: 'complete',
+              value: Math.round((values['green_pct'] || 0) * 100),
+            },
           ];
 
           entity.orderScale = Math.round((values['order_scale'] || 0) * 100);
-        }
+        },
       },
       'grade',
       'gradeRationale',
       {
         keys: 'unit',
-        toEntityFn: (data: object, key: string, entity: Project, params?: any) => {
+        toEntityFn: (data: object, key: string, entity: Project) => {
           const unitService: UnitService = AppInjector.get(UnitService);
           const unitData = data['unit'];
           const result = unitService.cache.getOrCreate(unitData.id, unitService, unitData);
           result.studentCache.add(entity);
           return result;
         },
-        toJsonFn: (entity: Project, key: string) => {
+        toJsonFn: (entity: Project, _key: string) => {
           return entity.unit?.id;
-        }
+        },
       },
       {
         keys: 'unitId',
@@ -131,66 +144,74 @@ export class ProjectService extends CachedEntityService<Project> {
           const unitService: UnitService = AppInjector.get(UnitService);
           const unitId = process.data['unit_id'];
           // Load what we have... or a a stub for now...
-          process.entity.unit = unitService.cache.getOrCreate(unitId, unitService, { id: unitId });
-          return unitService.get(unitId).subscribe(unit => {
+          process.entity.unit = unitService.cache.getOrCreate(unitId, unitService, {id: unitId});
+          return unitService.get(unitId).subscribe((unit) => {
             process.entity.unit = unit;
             unit.studentCache.add(process.entity);
             process.continue();
           });
-        }
+        },
       },
       {
         keys: 'tutorialEnrolments',
-        toEntityOp: (data: object, key: string, project: Project, params?: any) => {
+        toEntityOp: (data: object, key: string, project: Project) => {
           const unit: Unit = project.unit;
-          data[key].forEach((tutorialEnrolment: { tutorial_id: number; }) => {
+          data[key]?.forEach((tutorialEnrolment: {tutorial_id: number}) => {
             if (tutorialEnrolment.tutorial_id) {
               const tutorial = unit.tutorialsCache.get(tutorialEnrolment.tutorial_id);
               project.tutorialEnrolmentsCache.add(tutorial);
             }
           });
-        }
+        },
       },
       {
         keys: 'groups',
-        toEntityOp: (data: object, key: string, project: Project, params?: any) => {
-          data[key].forEach((group) => {
-            const theGroup = project.unit.groupSetsCache.get(group.group_set_id).groupsCache.getOrCreate(group.id, this.groupService, group, {constructorParams: project.unit});
+        toEntityOp: (data: object, key: string, project: Project) => {
+          data[key]?.forEach((group) => {
+            const theGroup = project.unit.groupSetsCache
+              .get(group.group_set_id)
+              .groupsCache.getOrCreate(group.id, this.groupService, group, {
+                constructorParams: project.unit,
+              });
 
             project.groupCache.add(theGroup);
             theGroup.projectsCache.add(project);
-          })
+          });
         },
-        toJsonFn: (entity: Project, key: string) => {
+        toJsonFn: (entity: Project, _key: string) => {
           return entity.unit?.id;
-        }
+        },
       },
       {
         keys: 'tasks',
-        toEntityOp: (data: object, key: string, project: Project, params?: any) => {
+        toEntityOp: (data: object, key: string, project: Project) => {
           // create tasks from json
-          data['tasks'].forEach(taskData => {
-            project.taskCache.getOrCreate(taskData['id'], this.taskService, taskData, {constructorParams: project});
+          data['tasks']?.forEach((taskData) => {
+            project.taskCache.getOrCreate(taskData['id'], this.taskService, taskData, {
+              constructorParams: project,
+            });
           });
 
           project.unit.setupTasksForStudent(project);
-        }
+        },
       },
       {
         keys: 'taskOutcomeAlignments',
-        toEntityOp: (data: object, key: string, project: Project, params?: any) => {
-          data[key].forEach(alignment => {
+        toEntityOp: (data: object, key: string, project: Project) => {
+          data[key]?.forEach((alignment) => {
             project.taskOutcomeAlignmentsCache.getOrCreate(
               alignment['id'],
               taskOutcomeAlignmentService,
               alignment,
               {
-                constructorParams: project
-              }
+                constructorParams: project,
+              },
             );
           });
-        }
+        },
       },
+      'escalationAttemptsRemaining',
+      'portfolioSubmissionDate',
     );
 
     this.mapping.addJsonKey(
@@ -200,24 +221,28 @@ export class ProjectService extends CachedEntityService<Project> {
       'compilePortfolio',
       'grade',
       'gradeRationale',
-      'campus'
+      'campus',
     );
   }
 
-  public createInstanceFrom(json: object, other?: any): Project {
-    return new Project(other as Unit);
+  public createInstanceFrom(_json: object, other?: Unit): Project {
+    return new Project(other);
   }
 
-  public loadStudents(unit: Unit, withdrawnOnly: boolean = false, useFetch: boolean = false): Observable<Project[]> {
+  public loadStudents(
+    unit: Unit,
+    withdrawnOnly: boolean = false,
+    useFetch: boolean = false,
+  ): Observable<Project[]> {
     const options: RequestOptions<Project> = {
       cache: unit.studentCache,
       endpointFormat: this.studentEndpointFormat,
       params: {
         withdrawn: withdrawnOnly,
-        unit_id: unit.id
+        unit_id: unit.id,
       },
-      constructorParams: unit
-    }
+      constructorParams: unit,
+    };
 
     if (useFetch) {
       return super.fetchAll(undefined, options);
@@ -226,13 +251,17 @@ export class ProjectService extends CachedEntityService<Project> {
     }
   }
 
-  public loadProject(proj: Project | number, unit: Unit, useFetch: boolean = false): Observable<Project> {
+  public loadProject(
+    proj: Project | number,
+    unit: Unit,
+    useFetch: boolean = false,
+  ): Observable<Project> {
     const options: RequestOptions<Project> = {
       cache: unit.studentCache,
       sourceCache: unit.studentCache,
       constructorParams: unit,
-      cacheBehaviourOnGet: "cacheQuery"
-    }
+      cacheBehaviourOnGet: 'cacheQuery',
+    };
 
     if (useFetch) {
       return super.fetch(proj, options);
diff --git a/src/app/api/services/push-notification-click.service.ts b/src/app/api/services/push-notification-click.service.ts
new file mode 100644
index 0000000000..539c968927
--- /dev/null
+++ b/src/app/api/services/push-notification-click.service.ts
@@ -0,0 +1,67 @@
+// MN-C03: receive Angular service-worker clicks in an already-open client.
+import {DOCUMENT} from '@angular/common';
+import {Inject, Injectable} from '@angular/core';
+import {SwPush} from '@angular/service-worker';
+import {Subscription} from 'rxjs';
+import {NotificationRouteService} from './notification-route.service';
+
+interface NotificationClickData {
+  notification_id?: unknown;
+  link?: unknown;
+}
+
+@Injectable({providedIn: 'root'})
+export class PushNotificationClickService {
+  private static readonly DUPLICATE_WINDOW_MS = 2000;
+
+  private clickSubscription: Subscription | null = null;
+  private lastClickKey: string | null = null;
+  private lastClickAt = 0;
+
+  constructor(
+    private swPush: SwPush,
+    private notificationRoutes: NotificationRouteService,
+    @Inject(DOCUMENT) private appDocument: Document,
+  ) {}
+
+  public start(): void {
+    if (this.clickSubscription) {
+      return;
+    }
+
+    this.clickSubscription = this.swPush.notificationClicks.subscribe((event) => {
+      // Angular focuses the most recently focused client before broadcasting the
+      // click. Only that focused document should navigate when several tabs exist.
+      if (!this.appDocument.hasFocus()) {
+        return;
+      }
+
+      const data = event.notification.data as NotificationClickData | null | undefined;
+      const target = this.notificationRoutes.resolve(data?.link);
+      const clickKey = `${this.normalisedId(data?.notification_id)}:${target}`;
+      const now = Date.now();
+
+      if (
+        clickKey === this.lastClickKey &&
+        now - this.lastClickAt < PushNotificationClickService.DUPLICATE_WINDOW_MS
+      ) {
+        return;
+      }
+
+      this.lastClickKey = clickKey;
+      this.lastClickAt = now;
+      void this.notificationRoutes.navigate(target);
+    });
+  }
+
+  public stop(): void {
+    this.clickSubscription?.unsubscribe();
+    this.clickSubscription = null;
+    this.lastClickKey = null;
+    this.lastClickAt = 0;
+  }
+
+  private normalisedId(value: unknown): string {
+    return typeof value === 'number' || typeof value === 'string' ? String(value) : 'no-id';
+  }
+}
diff --git a/src/app/api/services/push-notification.service.ts b/src/app/api/services/push-notification.service.ts
new file mode 100644
index 0000000000..00bf17167c
--- /dev/null
+++ b/src/app/api/services/push-notification.service.ts
@@ -0,0 +1,282 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {SwPush} from '@angular/service-worker';
+import {
+  Observable,
+  Subscription,
+  catchError,
+  concatMap,
+  from,
+  map,
+  of,
+  switchMap,
+  take,
+} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+/**
+ * Why the browser cannot be subscribed to push right now, or null if it can.
+ */
+export type PushBlocker =
+  | 'no-service-worker'
+  | 'not-configured'
+  | 'permission-denied'
+  | 'unsupported';
+
+/**
+ * Browsers we have specific unblock instructions for. 'other' covers Safari,
+ * Opera, and anything else — a generic fallback still gets shown.
+ */
+export type SupportedBrowser = 'chrome' | 'edge' | 'firefox' | 'other';
+
+/**
+ * Which browser the user agent string identifies as.
+ *
+ * Order matters: Edge's user agent also contains "Chrome/", and older Opera
+ * builds do too, so the more specific token has to be checked first or every
+ * Edge user gets Chrome's instructions.
+ */
+export function detectBrowser(userAgent: string): SupportedBrowser {
+  const ua = userAgent.toLowerCase();
+
+  if (ua.includes('edg/')) {
+    return 'edge';
+  }
+
+  if (ua.includes('firefox/')) {
+    return 'firefox';
+  }
+
+  if (ua.includes('opr/') || ua.includes('opt/') || ua.includes('opera/')) {
+    return 'other';
+  }
+
+  if (ua.includes('chrome/')) {
+    return 'chrome';
+  }
+
+  return 'other';
+}
+
+/**
+ * Step-by-step instructions for reversing a blocked notification permission,
+ * per browser. A site cannot re-prompt once denied — only the user can undo
+ * it, in their own browser's settings.
+ */
+export const PERMISSION_DENIED_INSTRUCTIONS: Record<SupportedBrowser, string[]> = {
+  chrome: [
+    'Click the lock (or tune) icon to the left of the address bar.',
+    'Select "Site settings".',
+    'Set Notifications to "Allow".',
+    'Reload this page.',
+  ],
+  edge: [
+    'Click the lock icon to the left of the address bar.',
+    'Select "Permissions for this site".',
+    'Set Notifications to "Allow".',
+    'Reload this page.',
+  ],
+  firefox: [
+    'Click the lock icon to the left of the address bar.',
+    'Select "More Information", then the Permissions tab.',
+    'Clear the blocked Notifications permission and set it to "Allow".',
+    'Reload this page.',
+  ],
+  other: [
+    "Open this site's permissions from your browser's address bar menu.",
+    'Find Notifications and set it to "Allow".',
+    'Reload this page.',
+  ],
+};
+
+@Injectable({providedIn: 'root'})
+export class PushNotificationService {
+  private readonly endpoint = `${API_URL}/push_subscriptions`;
+  private subscriptionChangeSubscription: Subscription | null = null;
+
+  constructor(
+    private http: HttpClient,
+    private swPush: SwPush,
+    private constants: DoubtfireConstants,
+  ) {}
+
+  /**
+   * Emits the current subscription, or null when this browser is not subscribed.
+   *
+   * The service worker registers six seconds after bootstrap
+   * (doubtfire-angular.module.ts), so this is null on load and then changes.
+   * Subscribe to it rather than reading it once.
+   */
+  public get subscription$(): Observable<PushSubscription | null> {
+    return this.swPush.subscription;
+  }
+
+  /**
+   * Whether the service worker is running. False in a build without it, and
+   * false for the first six seconds of every page load.
+   */
+  public get isEnabled(): boolean {
+    return this.swPush.isEnabled;
+  }
+
+  /**
+   * What is stopping this browser subscribing, or null if nothing is.
+   */
+  public blocker(): PushBlocker | null {
+    if (typeof Notification === 'undefined' || !('PushManager' in window)) {
+      return 'unsupported';
+    }
+    if (Notification.permission === 'denied') {
+      return 'permission-denied';
+    }
+    if (!this.constants.IsPushEnabled.value || !this.constants.VapidPublicKey.value) {
+      return 'not-configured';
+    }
+    if (!this.swPush.isEnabled) {
+      return 'no-service-worker';
+    }
+    return null;
+  }
+
+  /**
+   * Which browser this is, based on the user agent. Drives which set of
+   * unblock instructions is shown.
+   */
+  public get browser(): SupportedBrowser {
+    return detectBrowser(typeof navigator !== 'undefined' ? navigator.userAgent : '');
+  }
+
+  /**
+   * Step-by-step instructions for this browser to reverse a blocked
+   * notification permission. Only meaningful when blocker() returned
+   * 'permission-denied'; callers should check that first.
+   */
+  public permissionDeniedInstructions(): string[] {
+    return PERMISSION_DENIED_INSTRUCTIONS[this.browser];
+  }
+
+  /**
+   * Keep the api registration in step with browser-driven subscription changes.
+   *
+   * Angular 22 forwards the service worker's `pushsubscriptionchange` event as
+   * `pushSubscriptionChanges`. Register the replacement before removing the old
+   * endpoint so a transient api failure cannot throw away the last server row.
+   */
+  public start(): void {
+    if (this.subscriptionChangeSubscription) {
+      return;
+    }
+
+    this.subscriptionChangeSubscription = this.swPush.pushSubscriptionChanges
+      .pipe(
+        concatMap(({oldSubscription, newSubscription}) => {
+          if (!newSubscription) {
+            // Some browsers can report invalidation without a replacement. A
+            // fresh subscribe needs a user gesture, so leave recovery to the
+            // existing opt-in control and let server delivery remove the dead row.
+            return of(void 0);
+          }
+
+          return this.registerSubscription(newSubscription).pipe(
+            switchMap(() => {
+              if (!oldSubscription || oldSubscription.endpoint === newSubscription.endpoint) {
+                return of(void 0);
+              }
+
+              return this.removeServerSubscription(oldSubscription.endpoint);
+            }),
+            // One failed sync must not terminate the long-lived rotation stream.
+            catchError((error) => {
+              console.error('Could not update the rotated push subscription', error);
+              return of(void 0);
+            }),
+          );
+        }),
+      )
+      .subscribe();
+  }
+
+  public stop(): void {
+    this.subscriptionChangeSubscription?.unsubscribe();
+    this.subscriptionChangeSubscription = null;
+  }
+
+  /**
+   * Ask the browser for permission, then store the resulting registration
+   * against the signed in user.
+   *
+   * Call this from a click and nowhere else. requestSubscription needs an active
+   * service worker and a user gesture; called during app init it fails in a way
+   * that looks nothing like the real cause.
+   */
+  public subscribe(): Observable<void> {
+    return from(
+      this.swPush.requestSubscription({
+        serverPublicKey: this.constants.VapidPublicKey.value,
+      }),
+    ).pipe(switchMap((subscription) => this.registerSubscription(subscription)));
+  }
+
+  /**
+   * Stop this browser receiving push, both in the browser and on the api.
+   *
+   * The api call goes first and on purpose: once swPush.unsubscribe() has run
+   * the endpoint is gone from this page, and a row nobody can delete would sit
+   * there until the push service returned 410 for it.
+   */
+  public unsubscribe(): Observable<void> {
+    // Angular exposes SwPush.subscription as NEVER when service workers are
+    // disabled, so waiting on it would prevent sign-out from continuing.
+    if (!this.swPush.isEnabled) {
+      return of(void 0);
+    }
+
+    // take(1) matters. swPush.subscription never completes, so without it the
+    // returned observable would stay open forever and re-fire on every change.
+    return this.swPush.subscription.pipe(
+      take(1),
+      switchMap((subscription) => {
+        if (!subscription) {
+          return of(void 0);
+        }
+
+        return this.removeServerSubscription(subscription.endpoint).pipe(
+          // Server cleanup failing must not leave the browser subscribed. If
+          // the delete fails we still unsubscribe locally: the browser stops
+          // receiving immediately, and the row left behind is removed the
+          // first time the push service answers 410 for it, which deliver_to
+          // in PushNotificationService already handles.
+          catchError(() => of(void 0)),
+          switchMap(() => from(this.swPush.unsubscribe())),
+          map(() => void 0),
+        );
+      }),
+    );
+  }
+
+  /**
+   * Unsubscribe, but never fail.
+   *
+   * For sign out, where the caller cannot do anything useful with an error and
+   * must not be blocked by one. Prefer unsubscribe() anywhere a person is
+   * waiting on the result and should be told it did not work.
+   */
+  public unsubscribeQuietly(): Observable<void> {
+    return this.unsubscribe().pipe(catchError(() => of(void 0)));
+  }
+
+  private registerSubscription(subscription: PushSubscription): Observable<void> {
+    const keys = subscription.toJSON().keys ?? {};
+
+    return this.http.post<void>(this.endpoint, {
+      endpoint: subscription.endpoint,
+      p256dh: keys.p256dh,
+      auth: keys.auth,
+    });
+  }
+
+  private removeServerSubscription(endpoint: string): Observable<void> {
+    return this.http.delete<void>(this.endpoint, {params: {endpoint}});
+  }
+}
diff --git a/src/app/api/services/scorm-adapter.service.ts b/src/app/api/services/scorm-adapter.service.ts
new file mode 100644
index 0000000000..48d8971ec3
--- /dev/null
+++ b/src/app/api/services/scorm-adapter.service.ts
@@ -0,0 +1,321 @@
+import {Injectable} from '@angular/core';
+import {ScormDataModel, ScormPlayerContext} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {UserService} from './user.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScormAdapterService {
+  private dataModel: ScormDataModel;
+  private context: ScormPlayerContext;
+  private xhr: XMLHttpRequest;
+
+  constructor(private userService: UserService) {
+    this.dataModel = new ScormDataModel();
+    this.context = new ScormPlayerContext(this.userService.currentUser);
+    this.xhr = new XMLHttpRequest();
+  }
+
+  set projectId(projectId: number) {
+    this.context.projectId = projectId;
+  }
+
+  set taskDefId(taskDefId: number) {
+    this.context.taskDefId = taskDefId;
+  }
+
+  set mode(mode: 'browse' | 'normal' | 'review' | 'preview') {
+    this.context.mode = mode;
+  }
+
+  set testAttemptId(testAttemptId: number) {
+    this.context.attemptId = testAttemptId;
+  }
+
+  get state() {
+    return this.context.state;
+  }
+
+  destroy() {
+    this.dataModel = new ScormDataModel();
+    this.context.state = 'Uninitialized';
+  }
+
+  private refreshUserContext(): void {
+    const user = this.userService.currentUser;
+    this.context.user = user;
+    this.context.learnerId = user.id;
+    this.context.learnerName = user.firstName + ' ' + user.lastName;
+  }
+
+  private hasSuccessfulResponse(): boolean {
+    return this.xhr.status >= 200 && this.xhr.status < 300;
+  }
+
+  Initialize(): string {
+    // console.log('API_1484_11: Initialize');
+    this.refreshUserContext();
+
+    // TODO: error handling and reporting
+    switch (this.context.state) {
+      case 'Initialized':
+        this.context.errorCode = 103;
+        // console.log('Already Initialized');
+        break;
+      case 'Terminated':
+        this.context.errorCode = 104;
+        // console.log('Content Instance Terminated');
+        break;
+    }
+
+    if (this.context.mode === 'review') {
+      this.xhr.open('GET', `${API_URL}/test_attempts/${this.context.attemptId}/review`, false);
+      this.xhr.setRequestHeader('Auth-Token', this.context.user.authenticationToken);
+      this.xhr.setRequestHeader('Username', this.context.user.username);
+
+      this.xhr.send();
+      // console.log(this.xhr.responseText);
+
+      if (!this.hasSuccessfulResponse()) {
+        this.context.errorCode = 101;
+        console.error('Error retrieving SCORM review session:', this.xhr.responseText);
+        return 'false';
+      }
+
+      const reviewSession = JSON.parse(this.xhr.responseText);
+      this.dataModel.restore(reviewSession.cmi_datamodel);
+      // console.log(this.dataModel.dump());
+
+      this.context.state = 'Initialized';
+      return 'true';
+    }
+
+    // TODO: move this part into the player component
+    this.xhr.open(
+      'GET',
+      `${API_URL}/projects/${this.context.projectId}/task_def_id/${this.context.taskDefId}/test_attempts/latest`,
+      false,
+    );
+    this.xhr.setRequestHeader('Auth-Token', this.context.user.authenticationToken);
+    this.xhr.setRequestHeader('Username', this.context.user.username);
+
+    let noTestFound = false;
+    let startNewTest = false;
+
+    this.xhr.onload = () => {
+      if (this.xhr.status == 404) {
+        noTestFound = true;
+      }
+
+      // if (this.xhr.status >= 200 && this.xhr.status < 400) {
+      //   console.log('Retrieved the latest attempt.');
+      // } else if (this.xhr.status == 404) {
+      //   console.log('Not found.');
+      //   noTestFound = true;
+      // } else {
+      //   console.error('Error saving DataModel:', this.xhr.responseText);
+      // }
+    };
+
+    this.xhr.send();
+    // console.log(this.xhr.responseText);
+
+    if (!noTestFound && !this.hasSuccessfulResponse()) {
+      this.context.errorCode = 101;
+      console.error('Error retrieving latest SCORM attempt:', this.xhr.responseText);
+      return 'false';
+    }
+
+    if (!noTestFound) {
+      const latestSession = JSON.parse(this.xhr.responseText);
+      // console.log('Latest exam session:', latestSession);
+      this.context.attemptId = latestSession.id;
+      if (latestSession.completion_status) {
+        startNewTest = true;
+      }
+    } else {
+      startNewTest = true;
+    }
+
+    if (!startNewTest) {
+      this.xhr.open('PATCH', `${API_URL}/test_attempts/${this.context.attemptId}`, false);
+      this.xhr.setRequestHeader('Auth-Token', this.context.user.authenticationToken);
+      this.xhr.setRequestHeader('Username', this.context.user.username);
+      this.xhr.send();
+      // console.log(this.xhr.responseText);
+
+      if (!this.hasSuccessfulResponse()) {
+        this.context.errorCode = 101;
+        console.error('Error resuming SCORM attempt:', this.xhr.responseText);
+        return 'false';
+      }
+
+      const currentSession = JSON.parse(this.xhr.responseText);
+      // console.log('Current exam session:', currentSession);
+      this.context.attemptId = currentSession.id;
+      this.dataModel.restore(currentSession.cmi_datamodel);
+      // console.log(this.dataModel.dump());
+    } else {
+      this.xhr.open(
+        'POST',
+        `${API_URL}/projects/${this.context.projectId}/task_def_id/${this.context.taskDefId}/test_attempts`,
+        false,
+      );
+      this.xhr.setRequestHeader('Auth-Token', this.context.user.authenticationToken);
+      this.xhr.setRequestHeader('Username', this.context.user.username);
+      this.xhr.send();
+      // console.log(this.xhr.responseText);
+
+      if (!this.hasSuccessfulResponse()) {
+        this.context.errorCode = 101;
+        console.error('Error creating SCORM attempt:', this.xhr.responseText);
+        return 'false';
+      }
+
+      const currentSession = JSON.parse(this.xhr.responseText);
+      // console.log('Current exam session:', currentSession);
+      this.context.attemptId = currentSession.id;
+      this.dataModel.restore(currentSession.cmi_datamodel);
+      // console.log(this.dataModel.dump());
+    }
+
+    this.context.state = 'Initialized';
+    return 'true';
+  }
+
+  Terminate(): string {
+    // console.log('API_1484_11: Terminate');
+    this.refreshUserContext();
+
+    // TODO: error handling and reporting
+    switch (this.context.state) {
+      case 'Uninitialized':
+        this.context.errorCode = 112;
+        // console.log('Termination Before Initialization');
+        break;
+      case 'Terminated':
+        this.context.errorCode = 113;
+        // console.log('Termination After Termination');
+        break;
+    }
+
+    this.xhr.open('PATCH', `${API_URL}/test_attempts/${this.context.attemptId}`, false);
+    this.xhr.setRequestHeader('Auth-Token', this.context.user.authenticationToken);
+    this.xhr.setRequestHeader('Username', this.context.user.username);
+    this.xhr.setRequestHeader('Content-Type', 'application/json');
+    const requestData = {
+      cmi_datamodel: JSON.stringify(this.dataModel.dump()),
+      terminated: true,
+    };
+    this.xhr.send(JSON.stringify(requestData));
+    // console.log(this.xhr.responseText);
+
+    // all done, clearing datamodel and setting state to terminated
+    this.dataModel = new ScormDataModel();
+    this.context.state = 'Terminated';
+    return 'true';
+  }
+
+  GetValue(element: string): string {
+    const value = this.dataModel.get(element);
+
+    // TODO: error reporting
+    // TODO: can't get until init is done
+    switch (this.context.state) {
+      case 'Uninitialized':
+        this.context.errorCode = 122;
+        // console.log('Retrieve Data Before Initialization');
+        break;
+      case 'Terminated':
+        this.context.errorCode = 123;
+        // console.log('Retrieve Data After Termination');
+        break;
+    }
+
+    // console.log(`API_1484_11: GetValue:`, element, value);
+    return value;
+  }
+
+  SetValue(element: string, value: string): string {
+    // console.log(`API_1484_11: SetValue:`, element, value);
+
+    // TODO: error reporting
+    // TODO: can't set until init is done
+    switch (this.context.state) {
+      case 'Uninitialized':
+        this.context.errorCode = 132;
+        // console.log('Store Data Before Initialization');
+        break;
+      case 'Terminated':
+        this.context.errorCode = 133;
+        // console.log('Store Data After Termination');
+        break;
+    }
+
+    this.dataModel.set(element, value);
+    return 'true';
+  }
+
+  Commit(): string {
+    // console.log('API_1484_11: Commit');
+    this.refreshUserContext();
+
+    // TODO: error reporting
+    // TODO: can't commit until init is done
+    switch (this.context.state) {
+      case 'Uninitialized':
+        this.context.errorCode = 142;
+        // console.log('Commit Before Initialization');
+        break;
+      case 'Terminated':
+        this.context.errorCode = 143;
+        // console.log('Commit After Termination');
+        break;
+    }
+
+    this.xhr.open('PATCH', `${API_URL}/test_attempts/${this.context.attemptId}`, true);
+    this.xhr.setRequestHeader('Auth-Token', this.context.user.authenticationToken);
+    this.xhr.setRequestHeader('Username', this.context.user.username);
+    this.xhr.setRequestHeader('Content-Type', 'application/json');
+    const requestData = {
+      cmi_datamodel: JSON.stringify(this.dataModel.dump()),
+    };
+
+    // this.xhr.onload = () => {
+    //   if (this.xhr.status >= 200 && this.xhr.status < 400) {
+    //     console.log('DataModel saved successfully.');
+    //   } else {
+    //     console.error('Error saving DataModel:', this.xhr.responseText);
+    //   }
+    // };
+
+    // this.xhr.onerror = () => {
+    //   console.error('Request failed.');
+    // };
+
+    this.xhr.send(JSON.stringify(requestData));
+    this.context.errorCode = 0;
+    return 'true';
+  }
+
+  GetLastError(): string {
+    const lastError = this.context.errorCode.toString();
+    // if (lastError !== '0') {
+    //   console.log(`API_1484_11: GetLastError: ${lastError}`);
+    // }
+    return lastError;
+  }
+
+  GetErrorString(errorCode: string): string {
+    const errorString = this.context.getErrorMessage(errorCode);
+    // console.log(`API_1484_11: GetErrorString:`, errorCode, errorString);
+    return errorString;
+  }
+
+  GetDiagnostic(_errorCode: string): string {
+    // TODO: implement this
+    // console.log(`API_1484_11: GetDiagnostic:`, errorCode);
+    return 'GetDiagnostic is currently not implemented';
+  }
+}
diff --git a/src/app/api/services/sidekiq-job.service.ts b/src/app/api/services/sidekiq-job.service.ts
new file mode 100644
index 0000000000..a5141f803e
--- /dev/null
+++ b/src/app/api/services/sidekiq-job.service.ts
@@ -0,0 +1,100 @@
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {SidekiqJob} from '../models/sidekiq-job';
+
+export interface SidekiqJobEntry {
+  job?: SidekiqJob;
+  title: string;
+  resultSubject: Subject<SidekiqJob>;
+}
+
+@Injectable()
+export class SidekiqJobService extends CachedEntityService<SidekiqJob> {
+  protected readonly endpointFormat = 'sidekiq/:id:';
+
+  public jobEntries: Map<string, SidekiqJobEntry> = new Map();
+
+  // Allow components to track changes to jobEntries
+  public sidekiqJobsSubject: BehaviorSubject<SidekiqJobEntry[]> = new BehaviorSubject([]);
+
+  public setJob(jobId: string, title: string, subject: Subject<SidekiqJob>, job?: SidekiqJob) {
+    this.jobEntries.set(jobId, {
+      job,
+      title,
+      resultSubject: subject,
+    });
+    this.emitJobs();
+  }
+
+  public removeJob(jobId: string) {
+    this.jobEntries.delete(jobId);
+    this.emitJobs();
+  }
+
+  private emitJobs() {
+    this.sidekiqJobsSubject.next(Array.from(this.jobEntries.values()));
+  }
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'jobClass',
+      'status',
+      {
+        keys: 'pctComplete',
+        toEntityOp: (data: object, jsonKey: string, job: SidekiqJob, _params?) => {
+          job.pctComplete = Number(data[jsonKey]);
+        },
+      },
+      'message',
+      {
+        keys: 'processedCount',
+        toEntityOp: (data: object, jsonKey: string, job: SidekiqJob, _params?) => {
+          job.processedCount = Number(data[jsonKey]);
+        },
+      },
+      {
+        keys: 'totalCount',
+        toEntityOp: (data: object, jsonKey: string, job: SidekiqJob, _params?) => {
+          job.totalCount = Number(data[jsonKey]);
+        },
+      },
+      'result',
+      'createdAt',
+      'updatedAt',
+    );
+
+    this.mapping.addJsonKey(
+      'id',
+      'jobClass',
+      'status',
+      'message',
+      'result',
+      'createdAt',
+      'updatedAt',
+    );
+  }
+
+  public createInstanceFrom(_json: object): SidekiqJob {
+    return new SidekiqJob();
+  }
+
+  public getSidekiqJob(jobId: string): Observable<SidekiqJob> {
+    // TODO: cache the response to avoid fetching the same result data when the job is complete
+    return this.fetch(
+      {
+        id: jobId,
+      },
+      {
+        endpointFormat: this.endpointFormat,
+      },
+    );
+  }
+
+  // TODO: we could create endpoints to cancel/retry sidekiq jobs
+}
diff --git a/src/app/api/services/spec/authentication.service.spec.ts b/src/app/api/services/spec/authentication.service.spec.ts
new file mode 100644
index 0000000000..58269d0916
--- /dev/null
+++ b/src/app/api/services/spec/authentication.service.spec.ts
@@ -0,0 +1,500 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {provideHttpClient, withInterceptorsFromDi, withXhr} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {Injector} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {Subject, of, throwError} from 'rxjs';
+import {User, UserService} from 'src/app/api/models/doubtfire-model';
+import {AppInjector, setAppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {ThemeService} from 'src/app/common/theme/theme.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {AuthReturnUrlService} from 'src/app/security/auth-return-url.service';
+import {AuthenticationService} from '../authentication.service';
+import {NotificationService} from '../notification.service';
+import {PushNotificationService} from '../push-notification.service';
+
+const API_URL = 'http://localhost:3000/api';
+const AUTH_URL = `${API_URL}/auth`;
+
+/**
+ * Sign out has to drop this browser's push registration, otherwise the next
+ * person to sign in on a shared machine keeps receiving the previous user's
+ * notifications. These tests pin that behaviour at the sign out boundary:
+ * push is torn down while the token is still valid, and a failure tearing it
+ * down never traps the user signed in.
+ *
+ * The push tear down itself (DELETE /push_subscriptions then the browser
+ * unsubscribe, and the "never throw" wrapper) is covered in
+ * push-notification.service.spec.ts. Here PushNotificationService is a mock so
+ * these tests only describe what AuthenticationService.signOut does with it.
+ */
+describe('AuthenticationService', () => {
+  let service: AuthenticationService;
+  let httpMock: HttpTestingController;
+
+  let pushService: {unsubscribeQuietly: ReturnType<typeof vi.fn>};
+  let notificationService: {reset: ReturnType<typeof vi.fn>};
+  let demoMode: {reset: ReturnType<typeof vi.fn>};
+  let themeService: {
+    connectAccount: ReturnType<typeof vi.fn>;
+    disconnectAccount: ReturnType<typeof vi.fn>;
+  };
+  let globalState: {
+    clearUnitsAndProjects: ReturnType<typeof vi.fn>;
+    hideHeader: ReturnType<typeof vi.fn>;
+    setView: ReturnType<typeof vi.fn>;
+    loadGlobals: ReturnType<typeof vi.fn>;
+  };
+  let userService: {
+    currentUser: Partial<User>;
+    anonymousUser: Partial<User>;
+    updateThemePreference: ReturnType<typeof vi.fn>;
+    cache: {
+      clear: ReturnType<typeof vi.fn>;
+      getOrCreate: ReturnType<typeof vi.fn>;
+    };
+  };
+  let router: {navigateByUrl: ReturnType<typeof vi.fn>};
+  let authReturnUrl: {
+    rememberCurrentUrl: ReturnType<typeof vi.fn>;
+    clear: ReturnType<typeof vi.fn>;
+  };
+  let constants: {
+    API_URL: string;
+    SignoutURL: string | undefined;
+    applyAuthenticatedSettings: ReturnType<typeof vi.fn>;
+    resetAuthenticatedSettings: ReturnType<typeof vi.fn>;
+  };
+
+  // signOut resolves PushNotificationService, GlobalStateService and
+  // NotificationService through AppInjector rather than the constructor (its
+  // comment explains this avoids a circular dependency). This stub injector
+  // hands back the mocks above. It is set once, and reads them through its
+  // closure so each test's fresh mocks flow through. setAppInjector is only ever
+  // called by the app module otherwise, so in a unit test AppInjector starts
+  // unset and this is the only writer.
+  //
+  // The throw at the end is deliberate. A token this stub does not know about
+  // means signOut grew a dependency nobody told these tests about, and a stub
+  // that quietly answered undefined would turn that into a confusing failure
+  // somewhere else.
+  const injectorStub = {
+    get: (token: unknown) => {
+      if (token === PushNotificationService) {
+        return pushService;
+      }
+      if (token === GlobalStateService) {
+        return globalState;
+      }
+      if (token === NotificationService) {
+        return notificationService;
+      }
+      throw new Error(`unexpected AppInjector token: ${String(token)}`);
+    },
+  } as unknown as Injector;
+
+  beforeEach(() => {
+    pushService = {unsubscribeQuietly: vi.fn().mockReturnValue(of(void 0))};
+    notificationService = {reset: vi.fn()};
+    demoMode = {reset: vi.fn()};
+    themeService = {connectAccount: vi.fn(), disconnectAccount: vi.fn()};
+    globalState = {
+      clearUnitsAndProjects: vi.fn(),
+      hideHeader: vi.fn(),
+      setView: vi.fn(),
+      loadGlobals: vi.fn(),
+    };
+
+    const anonymousUser: Partial<User> = {authenticationToken: undefined};
+    userService = {
+      currentUser: {id: 1, username: 'user-a', authenticationToken: 'token-for-user-a'},
+      anonymousUser,
+      updateThemePreference: vi.fn((user: Partial<User>, preference: string) =>
+        of({
+          ...user,
+          themePreference: preference,
+          themePreferenceUpdatedAt: '2026-09-01T00:00:00Z',
+        }),
+      ),
+      cache: {
+        clear: vi.fn(),
+        getOrCreate: vi.fn((id: number, _service: UserService, data: object) => ({
+          ...data,
+          id,
+        })),
+      },
+    };
+    router = {navigateByUrl: vi.fn()};
+    authReturnUrl = {rememberCurrentUrl: vi.fn(), clear: vi.fn()};
+    constants = {
+      API_URL,
+      SignoutURL: undefined,
+      applyAuthenticatedSettings: vi.fn(),
+      resetAuthenticatedSettings: vi.fn(),
+    };
+
+    if (!AppInjector) {
+      setAppInjector(injectorStub);
+    }
+
+    TestBed.configureTestingModule({
+      providers: [
+        AuthenticationService,
+        {provide: UserService, useValue: userService as unknown as UserService},
+        {provide: Router, useValue: router},
+        {provide: AlertService, useValue: {error: vi.fn()}},
+        {provide: DoubtfireConstants, useValue: constants},
+        {provide: DemoModeStore, useValue: demoMode},
+        {provide: AuthReturnUrlService, useValue: authReturnUrl},
+        {provide: ThemeService, useValue: themeService},
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    service = TestBed.inject(AuthenticationService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+    vi.restoreAllMocks();
+  });
+
+  const authResponse = (id: number, token: string) => ({
+    user: {
+      id,
+      username: `user-${id}`,
+      systemRole: 'Student',
+      hasRunFirstTimeSetup: true,
+    },
+    auth_token: token,
+    auth_token_expiry: '2099-01-01T00:00:00Z',
+  });
+
+  const authenticatedSettings = {
+    overseerEnabled: true,
+    tiiEnabled: true,
+    d2lEnabled: false,
+    pushEnabled: true,
+    vapidPublicKey: 'BCurrentVapidKey',
+  };
+
+  // The shared computer case. The push registration belongs to whoever enabled
+  // it and the browser keeps it across sign out, so it has to be dropped while
+  // the token is still valid. DELETE /push_subscriptions needs that token, which
+  // is why the unsubscribe must finish before the token is deleted.
+  it('unsubscribes from push before the auth token is deleted', () => {
+    // Hold the unsubscribe open so we can prove the token is not deleted first.
+    const unsubscribeGate: Subject<void> = new Subject();
+    pushService.unsubscribeQuietly.mockReturnValue(unsubscribeGate);
+
+    service.signOut();
+
+    expect(pushService.unsubscribeQuietly).toHaveBeenCalledTimes(1);
+    expect(constants.resetAuthenticatedSettings).toHaveBeenCalledTimes(1);
+    // The token is still needed for the push delete, so it must not be gone yet.
+    httpMock.expectNone((r) => r.url === AUTH_URL && r.method === 'DELETE');
+
+    // Unsubscribe finishes, and only now may the token go.
+    unsubscribeGate.next();
+    unsubscribeGate.complete();
+
+    const tokenDelete = httpMock.expectOne((r) => r.url === AUTH_URL && r.method === 'DELETE');
+    expect(tokenDelete.request.params.get('remember')).toBe('false');
+    tokenDelete.flush(null);
+
+    // The browser is signed out now, so the next person starts unsubscribed.
+    expect(userService.currentUser).toBe(userService.anonymousUser);
+
+    // Same shared machine problem, other half of it. The push registration is
+    // gone but NotificationService is a root singleton, so its cache and unread
+    // count would otherwise survive into the next person's session.
+    expect(notificationService.reset).toHaveBeenCalledTimes(1);
+    expect(demoMode.reset).toHaveBeenCalledTimes(1);
+    expect(themeService.disconnectAccount).toHaveBeenCalledTimes(1);
+    expect(authReturnUrl.clear).toHaveBeenCalledTimes(1);
+  });
+
+  // unsubscribeQuietly is the "never throw" variant, and sign out is also wired
+  // to continue on error. Either way a failed unsubscribe must not leave the
+  // user stuck signed in.
+  it('still completes sign out when the push unsubscribe fails', () => {
+    pushService.unsubscribeQuietly.mockReturnValue(
+      throwError(() => new Error('push unsubscribe failed')),
+    );
+
+    service.signOut();
+
+    // The failure did not stop the token being deleted or the user signing out.
+    httpMock.expectOne((r) => r.url === AUTH_URL && r.method === 'DELETE').flush(null);
+
+    expect(userService.currentUser).toBe(userService.anonymousUser);
+  });
+
+  // With no one signed in there is no subscription tied to a user and no token,
+  // so signing out must not call push or the auth api at all.
+  it('does not touch push or the token when no user is signed in', () => {
+    userService.currentUser = {authenticationToken: undefined};
+
+    service.signOut();
+
+    expect(pushService.unsubscribeQuietly).not.toHaveBeenCalled();
+    expect(constants.resetAuthenticatedSettings).toHaveBeenCalledTimes(1);
+    httpMock.expectNone((r) => r.url === AUTH_URL && r.method === 'DELETE');
+    expect(userService.currentUser).toBe(userService.anonymousUser);
+  });
+
+  it('remembers the current protected route before showing authentication timeout', () => {
+    vi.useFakeTimers();
+    try {
+      service.timeoutAuthentication();
+
+      expect(authReturnUrl.rememberCurrentUrl).toHaveBeenCalledOnce();
+      expect(router.navigateByUrl).not.toHaveBeenCalled();
+
+      vi.advanceTimersByTime(500);
+      expect(router.navigateByUrl).toHaveBeenCalledWith('/timeout');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('does not complete sign in until authenticated settings are applied', () => {
+    const afterAuth = vi.fn();
+    const signInNext = vi.fn();
+    service.afterAuthCall(afterAuth);
+
+    service
+      .signIn({username: 'user-1', password: 'password', remember: false})
+      .subscribe(signInNext);
+
+    httpMock
+      .expectOne((r) => r.url === AUTH_URL && r.method === 'POST')
+      .flush(authResponse(1, 't1'));
+
+    const settingsRequest = httpMock.expectOne(`${API_URL}/settings`);
+    expect(constants.applyAuthenticatedSettings).not.toHaveBeenCalled();
+    expect(globalState.loadGlobals).not.toHaveBeenCalled();
+    expect(afterAuth).not.toHaveBeenCalled();
+    expect(signInNext).not.toHaveBeenCalled();
+
+    settingsRequest.flush(authenticatedSettings);
+
+    expect(constants.applyAuthenticatedSettings).toHaveBeenCalledWith(authenticatedSettings);
+    expect(constants.applyAuthenticatedSettings.mock.invocationCallOrder[0]).toBeLessThan(
+      globalState.loadGlobals.mock.invocationCallOrder[0],
+    );
+    expect(afterAuth).toHaveBeenCalledWith(true);
+    expect(signInNext).toHaveBeenCalledTimes(1);
+  });
+
+  it('connects account theme sync on a real sign in', () => {
+    userService.currentUser = userService.anonymousUser;
+    const response = authResponse(1, 't1');
+    response.user['themePreference'] = 'dark';
+    response.user['themePreferenceUpdatedAt'] = '2026-08-31T12:00:00Z';
+
+    service.signIn({username: 'user-1', password: 'password', remember: false}).subscribe();
+
+    httpMock.expectOne((r) => r.url === AUTH_URL && r.method === 'POST').flush(response);
+    expect(themeService.connectAccount).toHaveBeenCalledOnce();
+    expect(themeService.connectAccount).toHaveBeenCalledWith(
+      1,
+      'dark',
+      '2026-08-31T12:00:00Z',
+      expect.any(Function),
+    );
+
+    httpMock.expectOne(`${API_URL}/settings`).flush(authenticatedSettings);
+  });
+
+  it('reconnects theme sync to the incoming account during overlapping sign ins', () => {
+    userService.currentUser = userService.anonymousUser;
+    const firstResponse = authResponse(1, 't1');
+    const secondResponse = authResponse(2, 't2');
+
+    service.signIn({username: 'user-1', password: 'password', remember: false}).subscribe();
+    const firstAuth = httpMock.expectOne(
+      (request) => request.url === AUTH_URL && request.body['username'] === 'user-1',
+    );
+    service.signIn({username: 'user-2', password: 'password', remember: false}).subscribe();
+    const secondAuth = httpMock.expectOne(
+      (request) => request.url === AUTH_URL && request.body['username'] === 'user-2',
+    );
+
+    firstAuth.flush(firstResponse);
+    const firstSettings = httpMock.expectOne(`${API_URL}/settings`);
+    secondAuth.flush(secondResponse);
+    const secondSettings = httpMock.expectOne(`${API_URL}/settings`);
+
+    expect(themeService.connectAccount).toHaveBeenCalledTimes(2);
+    expect(themeService.connectAccount.mock.calls[0][0]).toBe(1);
+    expect(themeService.connectAccount.mock.calls[1][0]).toBe(2);
+    const saveSecondAccount = themeService.connectAccount.mock.calls[1][3];
+    saveSecondAccount('dark').subscribe();
+    expect(userService.updateThemePreference).toHaveBeenCalledWith(
+      expect.objectContaining({id: 2}),
+      'dark',
+    );
+
+    firstSettings.flush(authenticatedSettings);
+    secondSettings.flush(authenticatedSettings);
+  });
+
+  it('waits for authenticated settings before reporting a restored session', () => {
+    const loginResult = vi.fn();
+
+    service.attemptLoginUsingRefreshToken(loginResult);
+
+    httpMock
+      .expectOne((r) => r.url === `${AUTH_URL}/access-token` && r.method === 'POST')
+      .flush(authResponse(1, 'refreshed-token'));
+
+    const settingsRequest = httpMock.expectOne(`${API_URL}/settings`);
+    expect(loginResult).not.toHaveBeenCalled();
+
+    settingsRequest.flush(authenticatedSettings);
+
+    expect(loginResult).toHaveBeenCalledWith(true);
+  });
+
+  it('fails settings closed without rejecting valid credentials', () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    const afterAuth = vi.fn();
+    const signInNext = vi.fn();
+    service.afterAuthCall(afterAuth);
+
+    service
+      .signIn({username: 'user-1', password: 'password', remember: false})
+      .subscribe(signInNext);
+
+    httpMock
+      .expectOne((r) => r.url === AUTH_URL && r.method === 'POST')
+      .flush(authResponse(1, 't1'));
+    httpMock.expectOne(`${API_URL}/settings`).flush(
+      {error: 'unavailable'},
+      {
+        status: 500,
+        statusText: 'Server Error',
+      },
+    );
+
+    expect(constants.resetAuthenticatedSettings).toHaveBeenCalledTimes(1);
+    expect(constants.applyAuthenticatedSettings).not.toHaveBeenCalled();
+    expect(globalState.loadGlobals).toHaveBeenCalledTimes(1);
+    expect(afterAuth).toHaveBeenCalledWith(true);
+    expect(signInNext).toHaveBeenCalledTimes(1);
+    expect(consoleError).toHaveBeenCalled();
+  });
+
+  it('cancels pending settings and authentication completion when sign out starts', () => {
+    const afterAuth = vi.fn();
+    const signInNext = vi.fn();
+    service.afterAuthCall(afterAuth);
+
+    service
+      .signIn({username: 'user-1', password: 'password', remember: false})
+      .subscribe(signInNext);
+
+    httpMock
+      .expectOne((r) => r.url === AUTH_URL && r.method === 'POST')
+      .flush(authResponse(1, 't1'));
+    const settingsRequest = httpMock.expectOne(`${API_URL}/settings`);
+
+    service.signOut(false);
+
+    expect(authReturnUrl.clear).not.toHaveBeenCalled();
+    expect(settingsRequest.cancelled).toBe(true);
+    expect(constants.resetAuthenticatedSettings).toHaveBeenCalledTimes(1);
+    expect(constants.applyAuthenticatedSettings).not.toHaveBeenCalled();
+    expect(globalState.loadGlobals).not.toHaveBeenCalled();
+    expect(afterAuth).not.toHaveBeenCalled();
+    expect(signInNext).not.toHaveBeenCalled();
+
+    httpMock.expectOne((r) => r.url === AUTH_URL && r.method === 'DELETE').flush(null);
+  });
+
+  it('does not complete from an older settings response for the same user', () => {
+    const afterAuth = vi.fn();
+    const firstSignInNext = vi.fn();
+    const secondSignInNext = vi.fn();
+    service.afterAuthCall(afterAuth);
+
+    service
+      .signIn({username: 'user-1', password: 'password', remember: false})
+      .subscribe(firstSignInNext);
+    httpMock
+      .expectOne((r) => r.url === AUTH_URL && r.method === 'POST')
+      .flush(authResponse(1, 't1'));
+    const firstSettingsRequest = httpMock.expectOne(`${API_URL}/settings`);
+
+    service
+      .signIn({username: 'user-1', password: 'password', remember: false})
+      .subscribe(secondSignInNext);
+    httpMock
+      .expectOne((r) => r.url === AUTH_URL && r.method === 'POST')
+      .flush(authResponse(1, 't2'));
+    const secondSettingsRequest = httpMock.expectOne(`${API_URL}/settings`);
+
+    firstSettingsRequest.flush({...authenticatedSettings, vapidPublicKey: 'BStaleKey'});
+
+    expect(constants.applyAuthenticatedSettings).not.toHaveBeenCalled();
+    expect(globalState.loadGlobals).not.toHaveBeenCalled();
+    expect(afterAuth).not.toHaveBeenCalled();
+    expect(firstSignInNext).not.toHaveBeenCalled();
+
+    secondSettingsRequest.flush(authenticatedSettings);
+
+    expect(constants.applyAuthenticatedSettings).toHaveBeenCalledOnce();
+    expect(constants.applyAuthenticatedSettings).toHaveBeenCalledWith(authenticatedSettings);
+    expect(afterAuth).toHaveBeenCalledWith(true);
+    expect(secondSignInNext).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not reset or complete from an older settings failure for the same user', () => {
+    const afterAuth = vi.fn();
+    const firstSignInNext = vi.fn();
+    const secondSignInNext = vi.fn();
+    service.afterAuthCall(afterAuth);
+
+    service
+      .signIn({username: 'user-1', password: 'password', remember: false})
+      .subscribe(firstSignInNext);
+    httpMock
+      .expectOne((r) => r.url === AUTH_URL && r.method === 'POST')
+      .flush(authResponse(1, 't1'));
+    const firstSettingsRequest = httpMock.expectOne(`${API_URL}/settings`);
+
+    service
+      .signIn({username: 'user-1', password: 'password', remember: false})
+      .subscribe(secondSignInNext);
+    httpMock
+      .expectOne((r) => r.url === AUTH_URL && r.method === 'POST')
+      .flush(authResponse(1, 't2'));
+    const secondSettingsRequest = httpMock.expectOne(`${API_URL}/settings`);
+
+    firstSettingsRequest.flush(
+      {error: 'stale failure'},
+      {
+        status: 500,
+        statusText: 'Server Error',
+      },
+    );
+
+    expect(constants.resetAuthenticatedSettings).not.toHaveBeenCalled();
+    expect(globalState.loadGlobals).not.toHaveBeenCalled();
+    expect(afterAuth).not.toHaveBeenCalled();
+    expect(firstSignInNext).not.toHaveBeenCalled();
+
+    secondSettingsRequest.flush(authenticatedSettings);
+
+    expect(constants.applyAuthenticatedSettings).toHaveBeenCalledWith(authenticatedSettings);
+    expect(afterAuth).toHaveBeenCalledWith(true);
+    expect(secondSignInNext).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/app/api/services/spec/campus.service.spec.ts b/src/app/api/services/spec/campus.service.spec.ts
index acecf3e3d7..3373d5b15d 100644
--- a/src/app/api/services/spec/campus.service.spec.ts
+++ b/src/app/api/services/spec/campus.service.spec.ts
@@ -1,8 +1,14 @@
-import { TestBed, tick, fakeAsync } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { Campus } from 'src/app/api/models/doubtfire-model';
-import { CampusService } from '../campus.service';
-import { HttpRequest } from '@angular/common/http';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {
+  HttpRequest,
+  provideHttpClient,
+  withInterceptorsFromDi,
+  withXhr,
+} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import {Campus} from 'src/app/api/models/doubtfire-model';
+import {CampusService} from '../campus.service';
 
 describe('CampusService', () => {
   let campusService: CampusService;
@@ -10,8 +16,12 @@ describe('CampusService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      providers: [CampusService],
+      imports: [],
+      providers: [
+        CampusService,
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
     });
 
     campusService = TestBed.inject(CampusService);
@@ -22,18 +32,24 @@ describe('CampusService', () => {
     httpMock.verify();
   });
 
-  it('should return expected campuses (HttpClient called once)', fakeAsync(() => {
+  it('should return expected campuses (HttpClient called once)', () => {
     const c = new Campus();
 
     c.name = 'Melbourne';
     c.mode = 'automatic';
     c.abbreviation = 'melb';
 
-    const expectedCampuses: Campus[] = [c];
-
-    campusService.query().subscribe((campuses) => expect(campuses).toEqual(expectedCampuses, 'expected campuses'));
+    campusService.query().subscribe((campuses) => {
+      expect(campuses).toHaveLength(1);
+      expect(campuses[0]).toMatchObject({
+        id: 1,
+        name: 'Melbourne',
+        mode: 'automatic',
+        abbreviation: 'melb',
+      });
+    });
 
-    const req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+    const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
       expect(request.url).toEqual('http://localhost:3000/api/campuses/');
       expect(request.method).toBe('GET');
       return true;
@@ -41,7 +57,5 @@ describe('CampusService', () => {
 
     c.id = 1;
     req.flush(c);
-
-    tick();
-  }));
+  });
 });
diff --git a/src/app/api/services/spec/notification-route.service.spec.ts b/src/app/api/services/spec/notification-route.service.spec.ts
new file mode 100644
index 0000000000..dab1dbd48c
--- /dev/null
+++ b/src/app/api/services/spec/notification-route.service.spec.ts
@@ -0,0 +1,191 @@
+// MN-C03 targeted route-boundary tests.
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {Router} from '@angular/router';
+import {AuthReturnUrlService} from 'src/app/security/auth-return-url.service';
+import {AuthenticationService} from '../authentication.service';
+import {NOTIFICATION_ROUTE_FALLBACK, NotificationRouteService} from '../notification-route.service';
+
+describe('NotificationRouteService', () => {
+  let router: {url: string; navigateByUrl: ReturnType<typeof vi.fn>};
+  let authentication: {isAuthenticated: ReturnType<typeof vi.fn>};
+  let authReturnUrl: {remember: ReturnType<typeof vi.fn>};
+  let service: NotificationRouteService;
+
+  beforeEach(() => {
+    router = {
+      url: '/home',
+      navigateByUrl: vi.fn().mockResolvedValue(true),
+    };
+    authentication = {isAuthenticated: vi.fn().mockReturnValue(true)};
+    authReturnUrl = {remember: vi.fn()};
+    service = new NotificationRouteService(
+      router as unknown as Router,
+      authentication as unknown as AuthenticationService,
+      authReturnUrl as unknown as AuthReturnUrlService,
+    );
+  });
+
+  it('accepts each approved notification route family', () => {
+    const approved = [
+      '/notifications',
+      '/projects/1/dashboard',
+      '/projects/23/groups',
+      '/projects/23/dashboard/1.1P',
+      '/projects/23/dashboard/1.1P/feedback',
+      '/projects/23/dashboard/T1.1',
+      '/projects/23/dashboard/HD1.2',
+      '/projects/23/dashboard/10.1H',
+      '/projects/23/dashboard/A15',
+      '/projects/23/dashboard/TASK1',
+      '/projects/23/dashboard/P-2.21',
+      '/projects/23/dashboard/D-9.568',
+      '/projects/23/dashboard/C-4.602',
+    ];
+
+    for (const route of approved) {
+      expect(service.resolve(route)).toBe(route);
+    }
+  });
+
+  it('uses the safe fallback for missing and malformed values', () => {
+    const invalid: unknown[] = [
+      undefined,
+      null,
+      42,
+      {},
+      '',
+      ' ',
+      ' /projects/1/dashboard',
+      '/projects/1/dashboard ',
+      '/projects/0/dashboard',
+      '/projects/-1/dashboard',
+      '/projects/1//dashboard',
+      '/projects/1/dashboard/',
+      '/projects/1/dashboard/1.1P/extra',
+      '/projects/1/dashboard/1.1P/feedback/extra',
+      '/projects/1/dashboard/line\nbreak',
+      `/projects/1/dashboard/${'A1'.repeat(20)}`,
+    ];
+
+    for (const value of invalid) {
+      expect(service.resolve(value)).toBe(NOTIFICATION_ROUTE_FALLBACK);
+    }
+  });
+
+  it('rejects absolute, external, scheme and protocol-relative destinations', () => {
+    const invalid = [
+      'http://example.test/projects/1/dashboard',
+      'https://example.test/projects/1/dashboard',
+      'mailto:student@example.test',
+      'javascript:alert(1)',
+      'data:text/html,unsafe',
+      'file:///etc/passwd',
+      '//example.test/projects/1/dashboard',
+      '\\example.test\\projects\\1',
+      '/\\example.test/projects/1',
+      '/projects\\1\\dashboard',
+    ];
+
+    for (const value of invalid) {
+      expect(service.resolve(value)).toBe(NOTIFICATION_ROUTE_FALLBACK);
+    }
+  });
+
+  it('rejects encoded bypass attempts rather than decoding them', () => {
+    const invalid = [
+      '/%2f%2fexample.test',
+      '/%5cexample.test',
+      '/projects/1/dashboard/%31.1P',
+      '/projects/1/dashboard/1.1P%3ftoken%3dsecret',
+      '/projects/1/dashboard/1.1P%23feedback',
+      '/%252f%252fexample.test',
+      '/projects/1/dashboard/%00',
+      '/projects/1/dashboard/%',
+    ];
+
+    for (const value of invalid) {
+      expect(service.resolve(value)).toBe(NOTIFICATION_ROUTE_FALLBACK);
+    }
+  });
+
+  it('rejects unexpected route families, queries and fragments', () => {
+    const invalid = [
+      '/home',
+      '/units/1',
+      '/projects/1',
+      '/projects/1/portfolio',
+      '/projects/1/dashboard/1.1P?token=secret',
+      '/projects/1/dashboard/1.1P#feedback',
+      '/notifications?student=Alice',
+    ];
+
+    for (const value of invalid) {
+      expect(service.resolve(value)).toBe(NOTIFICATION_ROUTE_FALLBACK);
+    }
+  });
+
+  it('accepts bounded task segments without guessing their business format', () => {
+    const approved = [
+      '/projects/1/dashboard/85',
+      '/projects/1/dashboard/Alice1',
+      '/projects/1/dashboard/BOB1',
+      '/projects/1/dashboard/1.1ALICE',
+      '/projects/1/dashboard/1.1BOB',
+      '/projects/1/dashboard/feedback1',
+      '/projects/1/dashboard/token123',
+      '/projects/1/dashboard/mark85',
+    ];
+
+    for (const route of approved) {
+      expect(service.resolve(route)).toBe(route);
+    }
+  });
+
+  it('navigates an open app through Angular Router', async () => {
+    await expect(service.navigate('/projects/23/dashboard/1.1P')).resolves.toBe(true);
+
+    expect(router.navigateByUrl).toHaveBeenCalledOnce();
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/projects/23/dashboard/1.1P');
+  });
+
+  it('navigates unsafe input to the safe fallback', async () => {
+    await service.navigate('https://example.test/steal');
+
+    expect(router.navigateByUrl).toHaveBeenCalledWith(NOTIFICATION_ROUTE_FALLBACK);
+  });
+
+  it('saves an allow-listed target before sending an anonymous client to sign in', async () => {
+    authentication.isAuthenticated.mockReturnValue(false);
+    const target = '/projects/23/dashboard/1.1P/feedback';
+
+    await service.navigate(target);
+
+    expect(authReturnUrl.remember).toHaveBeenCalledWith(target);
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/sign_in');
+  });
+
+  it('never saves an unvalidated notification destination', async () => {
+    authentication.isAuthenticated.mockReturnValue(false);
+
+    await service.navigate('https://evil.example/steal');
+
+    expect(authReturnUrl.remember).toHaveBeenCalledWith(NOTIFICATION_ROUTE_FALLBACK);
+    expect(authReturnUrl.remember).not.toHaveBeenCalledWith('https://evil.example/steal');
+  });
+
+  it('does not navigate twice when a closed-app launch already opened the target', async () => {
+    router.url = '/projects/23/dashboard/1.1P?from=service-worker#top';
+
+    await expect(service.navigate('/projects/23/dashboard/1.1P')).resolves.toBe(true);
+
+    expect(router.navigateByUrl).not.toHaveBeenCalled();
+  });
+
+  it('does not re-navigate the fallback when notifications is already open', async () => {
+    router.url = '/notifications';
+
+    await service.navigate(undefined);
+
+    expect(router.navigateByUrl).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/app/api/services/spec/notification.service.spec.ts b/src/app/api/services/spec/notification.service.spec.ts
new file mode 100644
index 0000000000..e34d0f3912
--- /dev/null
+++ b/src/app/api/services/spec/notification.service.spec.ts
@@ -0,0 +1,483 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {
+  HttpRequest,
+  provideHttpClient,
+  withInterceptorsFromDi,
+  withXhr,
+} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {Notification} from '../../models/notification';
+import {NotificationService} from '../notification.service';
+
+const LIST_URL = `${API_URL}/notifications/`;
+const COUNT_URL = `${API_URL}/notifications/unread_count`;
+const READ_ALL_URL = `${API_URL}/notifications/read_all`;
+
+/**
+ * What NotificationEntity actually puts on the wire. Snake case, and read_at is
+ * null rather than absent while a notification is unread.
+ */
+function unreadJson(id = 1) {
+  return {
+    id,
+    notification_type: 'task',
+    message: 'Jane commented on Task 1.1P',
+    link: '/#/projects/1/task/2',
+    read_at: null,
+    created_at: '2026-08-09T04:12:00.000Z',
+  };
+}
+
+function readJson(id = 1, readAt = '2026-08-09T05:00:00.000Z') {
+  return {...unreadJson(id), read_at: readAt};
+}
+
+describe('NotificationService', () => {
+  let service: NotificationService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: [
+        NotificationService,
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    service = TestBed.inject(NotificationService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    // A cancelled request is still open as far as the backend is concerned, and
+    // reset() cancels on purpose. The tests that call it assert the
+    // cancellation themselves. Nothing is lost by ignoring them here: a request
+    // cancelled by accident still fails, because the flush that was expecting
+    // it throws rather than being skipped.
+    httpMock.verify({ignoreCancelled: true});
+  });
+
+  /**
+   * Read whatever unreadCount$ is holding right now. It is a BehaviorSubject so
+   * this emits synchronously.
+   */
+  function currentUnreadCount(): number {
+    let count: number;
+    service.unreadCount$.subscribe((value) => (count = value)).unsubscribe();
+    return count;
+  }
+
+  /**
+   * Put a known count on the subject so the tests below can assert a movement
+   * rather than an absolute value.
+   */
+  function seedUnreadCount(count: number): void {
+    service.refreshUnreadCount().subscribe();
+    httpMock.expectOne(COUNT_URL).flush({count});
+  }
+
+  /**
+   * Answer the authoritative count re-read that every mutation fires. Leaving it
+   * unflushed fails the httpMock.verify() in afterEach, which is the point: the
+   * resync is part of the contract, not an optimisation a change can quietly
+   * drop.
+   */
+  function flushResync(count: number): void {
+    httpMock.expectOne(COUNT_URL).flush({count});
+  }
+
+  /**
+   * Put a list in the cache so cache behaviour can be asserted against it.
+   */
+  function primeCache(...rows: object[]): Notification[] {
+    let listed: Notification[];
+    service.list().subscribe((notifications) => (listed = notifications));
+    httpMock.expectOne(LIST_URL).flush(rows);
+    return listed;
+  }
+
+  describe('list', () => {
+    it('gets every notification and maps the entity', () => {
+      let result: Notification[];
+
+      service.list().subscribe((notifications) => (result = notifications));
+
+      const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
+        expect(request.url).toEqual(LIST_URL);
+        expect(request.method).toBe('GET');
+        expect(request.params.has('unread_only')).toBe(false);
+        return true;
+      });
+      req.flush([unreadJson()]);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        id: 1,
+        notificationType: 'task',
+        message: 'Jane commented on Task 1.1P',
+        link: '/#/projects/1/task/2',
+      });
+      expect(result[0].createdAt).toBeInstanceOf(Date);
+    });
+
+    it('reports an unread notification as unread', () => {
+      const listed = primeCache(unreadJson());
+
+      // read_at comes back null. new Date(null) is the epoch and would read as
+      // truthy, so this fails if the mapping ever goes back to mapDate.
+      expect(listed[0].readAt).toBeNull();
+      expect(listed[0].isRead).toBe(false);
+    });
+
+    it('updates the same entity objects on a second call instead of rebuilding them', () => {
+      const first = primeCache(unreadJson(1));
+      const second = primeCache(readJson(1));
+
+      // Same instance, not just equal. fetchAll only reuses cached entities when
+      // options.cache is passed, so this fails the moment that is dropped, and a
+      // component holding the first array would silently go stale.
+      expect(second[0]).toBe(first[0]);
+      expect(first[0].isRead).toBe(true);
+    });
+
+    it('evicts rows the server no longer returns', () => {
+      primeCache(unreadJson(1), unreadJson(2));
+      expect(service.cache.size).toBe(2);
+
+      primeCache(unreadJson(1));
+
+      // fetchAll only ever adds. Without the eviction pass a notification
+      // deleted in another tab would sit in the cache for the rest of the
+      // session and markAllRead would walk over a row that is gone.
+      expect(service.cache.size).toBe(1);
+    });
+
+    it('does not evict when only unread rows were asked for', () => {
+      primeCache(unreadJson(1), readJson(2));
+      expect(service.cache.size).toBe(2);
+
+      service.list(true).subscribe();
+      httpMock
+        .expectOne((request: HttpRequest<object>): boolean => {
+          expect(request.url).toEqual(LIST_URL);
+          expect(request.params.get('unread_only')).toBe('true');
+          return true;
+        })
+        .flush([unreadJson(1)]);
+
+      // Notification 2 is missing because it is read, not because it is gone.
+      expect(service.cache.size).toBe(2);
+    });
+  });
+
+  describe('refreshUnreadCount', () => {
+    it('gets the count and pushes it to unreadCount$', () => {
+      let emitted: number;
+
+      service.refreshUnreadCount().subscribe((count) => (emitted = count));
+
+      const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
+        expect(request.url).toEqual(COUNT_URL);
+        expect(request.method).toBe('GET');
+        return true;
+      });
+      req.flush({count: 7});
+
+      expect(emitted).toBe(7);
+      expect(currentUnreadCount()).toBe(7);
+    });
+
+    it('ignores an older count response that lands after a newer one', () => {
+      service.refreshUnreadCount().subscribe();
+      service.refreshUnreadCount().subscribe();
+
+      const requests = httpMock.match(COUNT_URL);
+      expect(requests).toHaveLength(2);
+
+      // The second request answers first.
+      requests[1].flush({count: 4});
+      expect(currentUnreadCount()).toBe(4);
+
+      // Then the first one answers, carrying the number from before whatever
+      // triggered the second. Nothing orders http responses, so without the
+      // sequence guard this overwrites a correct count with a stale one and the
+      // bell stays wrong until the next mutation.
+      requests[0].flush({count: 9});
+
+      expect(currentUnreadCount()).toBe(4);
+    });
+
+    it('ignores a count response older than a local change to the count', () => {
+      seedUnreadCount(5);
+
+      // In flight before the mutation, so its answer was computed without it.
+      service.refreshUnreadCount().subscribe();
+      const stale = httpMock.expectOne(COUNT_URL);
+
+      const notification = new Notification();
+      notification.id = 4;
+      notification.readAt = null;
+      service.markRead(notification).subscribe();
+      httpMock.expectOne(`${API_URL}/notifications/4/read`).flush(readJson(4));
+
+      expect(currentUnreadCount()).toBe(4);
+
+      // The local decrement is newer than that request, so it has to retire it.
+      // Guarding only response against response leaves this hole open, and it
+      // is the common one: every mutation starts a count request.
+      stale.flush({count: 5});
+
+      expect(currentUnreadCount()).toBe(4);
+
+      flushResync(4);
+    });
+  });
+
+  describe('markRead', () => {
+    it('puts to the read endpoint and drops the unread count by one', () => {
+      seedUnreadCount(3);
+
+      const notification = new Notification();
+      notification.id = 4;
+      notification.readAt = null;
+
+      let result: Notification;
+      service.markRead(notification).subscribe((updated) => (result = updated));
+
+      const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
+        expect(request.url).toEqual(`${API_URL}/notifications/4/read`);
+        expect(request.method).toBe('PUT');
+        return true;
+      });
+      req.flush(readJson(4));
+
+      expect(result.isRead).toBe(true);
+      expect(result.readAt).toBeInstanceOf(Date);
+      expect(currentUnreadCount()).toBe(2);
+
+      flushResync(2);
+    });
+
+    it('leaves the count alone when the notification was already read', () => {
+      seedUnreadCount(3);
+
+      const notification = new Notification();
+      notification.id = 4;
+      notification.readAt = new Date('2026-08-09T05:00:00.000Z');
+
+      service.markRead(notification).subscribe();
+      httpMock.expectOne(`${API_URL}/notifications/4/read`).flush(readJson(4));
+
+      // mark_read! is a no-op on the api for one already read, so decrementing
+      // here would push the bell below the real number.
+      expect(currentUnreadCount()).toBe(3);
+
+      flushResync(3);
+    });
+
+    it('lets the server correct the count when two calls race on the same row', () => {
+      seedUnreadCount(2);
+
+      const notification = new Notification();
+      notification.id = 4;
+      notification.readAt = null;
+
+      service.markRead(notification).subscribe();
+      service.markRead(notification).subscribe();
+
+      const puts = httpMock.match(`${API_URL}/notifications/4/read`);
+      expect(puts).toHaveLength(2);
+      puts.forEach((req) => req.flush(readJson(4)));
+
+      // Both captured the row as unread before either answered, so both
+      // subtracted one and the local number is now one below the truth. This is
+      // the known limit of local arithmetic, asserted rather than pretended away.
+      expect(currentUnreadCount()).toBe(0);
+
+      const resyncs = httpMock.match(COUNT_URL);
+      expect(resyncs).toHaveLength(2);
+      resyncs.forEach((req) => req.flush({count: 1}));
+
+      // And this is why every mutation re-reads it.
+      expect(currentUnreadCount()).toBe(1);
+    });
+  });
+
+  describe('markAllRead', () => {
+    it('puts to read_all, zeroes the count and corrects the cached rows', () => {
+      seedUnreadCount(2);
+
+      const listed = primeCache(unreadJson(1), unreadJson(2));
+      expect(listed.every((notification) => !notification.isRead)).toBe(true);
+
+      service.markAllRead().subscribe();
+
+      const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
+        expect(request.url).toEqual(READ_ALL_URL);
+        expect(request.method).toBe('PUT');
+        return true;
+      });
+      req.flush({success: true});
+
+      expect(currentUnreadCount()).toBe(0);
+      // read_all answers {success: true} and not entities, so nothing corrects
+      // the cache unless the service does it. Without this the bell reads zero
+      // while every row still draws as unread.
+      expect(listed.every((notification) => notification.isRead)).toBe(true);
+
+      flushResync(0);
+    });
+
+    it('announces the corrected rows on the cache observable', () => {
+      primeCache(unreadJson(1), unreadJson(2));
+
+      let emissions = 0;
+      let latest: Notification[];
+      const subscription = service.cache.values.subscribe((values) => {
+        emissions++;
+        latest = values;
+      });
+      const emissionsBefore = emissions;
+
+      service.markAllRead().subscribe();
+      httpMock.expectOne(READ_ALL_URL).flush({success: true});
+
+      // Assigning readAt announces nothing on its own. Only EntityCache.set
+      // calls updateCacheArray, so an OnPush list bound to cache.values would
+      // never redraw without it.
+      expect(emissions).toBeGreaterThan(emissionsBefore);
+      expect(latest.every((notification) => notification.isRead)).toBe(true);
+
+      subscription.unsubscribe();
+      flushResync(0);
+    });
+  });
+
+  describe('remove', () => {
+    it('deletes the notification and drops the unread count by one', () => {
+      seedUnreadCount(3);
+
+      const notification = new Notification();
+      notification.id = 9;
+      notification.readAt = null;
+
+      service.remove(notification).subscribe();
+
+      const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
+        expect(request.url).toEqual(`${API_URL}/notifications/9`);
+        expect(request.method).toBe('DELETE');
+        return true;
+      });
+      req.flush({success: true});
+
+      expect(currentUnreadCount()).toBe(2);
+
+      flushResync(2);
+    });
+
+    it('leaves the count alone when deleting one that was already read', () => {
+      seedUnreadCount(3);
+
+      const notification = new Notification();
+      notification.id = 9;
+      notification.readAt = new Date('2026-08-09T05:00:00.000Z');
+
+      service.remove(notification).subscribe();
+      httpMock.expectOne(`${API_URL}/notifications/9`).flush({success: true});
+
+      expect(currentUnreadCount()).toBe(3);
+
+      flushResync(3);
+    });
+
+    it('evicts the deleted notification from the cache', () => {
+      primeCache(unreadJson(1), unreadJson(2));
+
+      const target = service.cache.currentValues.find((notification) => notification.id === 2);
+
+      service.remove(target).subscribe();
+      httpMock.expectOne(`${API_URL}/notifications/2`).flush({success: true});
+
+      expect(service.cache.size).toBe(1);
+      expect(service.cache.currentValues[0].id).toBe(1);
+
+      flushResync(0);
+    });
+  });
+
+  describe('reset', () => {
+    it('drops the cache and the unread count', () => {
+      primeCache(unreadJson(1), unreadJson(2));
+      seedUnreadCount(4);
+
+      expect(service.cache.size).toBe(2);
+      expect(currentUnreadCount()).toBe(4);
+
+      service.reset();
+
+      // The service is provided in root and sign out routes rather than
+      // reloading, so without this the next person to sign in on a shared
+      // machine starts with the previous person's messages and count.
+      expect(service.cache.size).toBe(0);
+      expect(currentUnreadCount()).toBe(0);
+    });
+
+    it('cancels a list still in flight so it cannot refill the cache', () => {
+      let emitted = false;
+
+      service.list().subscribe(() => (emitted = true));
+      const pending = httpMock.expectOne(LIST_URL);
+
+      service.reset();
+
+      // Aborted, not merely ignored, and that distinction is the whole fix.
+      // The cache write lives in a tap inside the base class, upstream of
+      // anything this service could put a guard in, so the only way to stop it
+      // is to make sure the response never arrives.
+      expect(pending.cancelled).toBe(true);
+      expect(emitted).toBe(false);
+      expect(service.cache.size).toBe(0);
+    });
+
+    it('cancels a count re-sync still in flight so it cannot restore the count', () => {
+      seedUnreadCount(5);
+
+      const notification = new Notification();
+      notification.id = 4;
+      notification.readAt = null;
+
+      service.markRead(notification).subscribe();
+      httpMock.expectOne(`${API_URL}/notifications/4/read`).flush(readJson(4));
+      expect(currentUnreadCount()).toBe(4);
+
+      // Nobody holds this one. It is fired and forgotten by every mutation, so
+      // it is the request most likely to be open when someone signs out.
+      const resync = httpMock.expectOne(COUNT_URL);
+
+      service.reset();
+
+      expect(resync.cancelled).toBe(true);
+      expect(currentUnreadCount()).toBe(0);
+    });
+
+    it('cancels a mark read still in flight so it cannot re-add the entity', () => {
+      primeCache(unreadJson(1));
+
+      const notification = service.cache.currentValues[0];
+      service.markRead(notification).subscribe();
+      const pending = httpMock.expectOne(`${API_URL}/notifications/1/read`);
+
+      service.reset();
+
+      // update() writes the response entity into the cache in a base class tap.
+      // A sign out between the request and the response would otherwise leave
+      // one of the previous user's notifications sitting in an empty cache.
+      expect(pending.cancelled).toBe(true);
+      expect(service.cache.size).toBe(0);
+    });
+  });
+});
diff --git a/src/app/api/services/spec/peer-progress-indicator.service.spec.ts b/src/app/api/services/spec/peer-progress-indicator.service.spec.ts
new file mode 100644
index 0000000000..15d8b03515
--- /dev/null
+++ b/src/app/api/services/spec/peer-progress-indicator.service.spec.ts
@@ -0,0 +1,391 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {provideHttpClient, withInterceptorsFromDi, withXhr} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import {PeerProgressIndicator} from 'src/app/api/models/peer-progress-indicator';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {
+  DEMO_STATUS_DISTRIBUTION,
+  DISABLED_STATE,
+  NORMAL_STATE,
+  SUPPRESSED_STATE,
+} from 'src/app/demo/fixtures/peer-progress-demo.fixtures';
+import {PeerProgressIndicatorService} from '../peer-progress-indicator.service';
+
+describe('PeerProgressIndicatorService', () => {
+  let service: PeerProgressIndicatorService;
+  let httpMock: HttpTestingController;
+  let demoMode: {shouldMaskApiData: boolean};
+
+  beforeEach(() => {
+    demoMode = {shouldMaskApiData: false};
+    TestBed.configureTestingModule({
+      providers: [
+        PeerProgressIndicatorService,
+        {provide: DemoModeStore, useValue: demoMode},
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    service = TestBed.inject(PeerProgressIndicatorService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify({ignoreCancelled: true});
+  });
+
+  it('requests the authorised project/task route without client-supplied cohort parameters', () => {
+    service.getIndicator(7, 99).subscribe();
+
+    const request = httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`);
+
+    expect(request.request.method).toBe('GET');
+    expect(request.request.params.keys()).toEqual([]);
+
+    request.flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: 2,
+      submitted_percentage: 40,
+      is_suppressed: false,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: '2026-08-23T00:00:00Z',
+      unavailable_message: '',
+    });
+  });
+
+  it('maps the complete snake-case response and preserves nullable fields', () => {
+    let result: PeerProgressIndicator | undefined;
+
+    service.getIndicator(7, 99).subscribe((value) => {
+      result = value;
+    });
+
+    httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: null,
+      submitted_percentage: null,
+      is_suppressed: false,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: null,
+      unavailable_message: 'Peer progress is currently unavailable.',
+    });
+
+    expect(result).toEqual({
+      taskDefinitionId: 99,
+      unitId: 1,
+      targetGrade: null,
+      submittedPercentage: null,
+      completedPercentage: null,
+      distributionAvailable: false,
+      statusDistribution: [],
+      isUserEnabled: true,
+      isSuppressed: false,
+      isStale: false,
+      isFeatureEnabled: true,
+      lastUpdatedAt: null,
+      unavailableMessage: 'Peer progress is currently unavailable.',
+      unavailableReason: null,
+      distributionUnavailableReason: null,
+    });
+  });
+
+  it('maps the full quantised status distribution and compact completion metric', () => {
+    let result: PeerProgressIndicator | undefined;
+
+    service.getIndicator(7, 99).subscribe((value) => {
+      result = value;
+    });
+
+    httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: 2,
+      submitted_percentage: 60,
+      completed_percentage: 10,
+      distribution_available: true,
+      status_distribution: DEMO_STATUS_DISTRIBUTION,
+      is_user_enabled: true,
+      is_suppressed: false,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: '2026-08-23T00:00:00Z',
+      unavailable_message: '',
+      unavailable_reason: null,
+      distribution_unavailable_reason: null,
+    });
+
+    expect(result).toMatchObject({
+      submittedPercentage: 60,
+      completedPercentage: 10,
+      distributionAvailable: true,
+      statusDistribution: DEMO_STATUS_DISTRIBUTION,
+      isUserEnabled: true,
+    });
+  });
+
+  it.each([
+    ['a missing canonical status', DEMO_STATUS_DISTRIBUTION.slice(0, -1)],
+    ['a duplicate status', [...DEMO_STATUS_DISTRIBUTION.slice(0, -1), DEMO_STATUS_DISTRIBUTION[0]]],
+    [
+      'an unknown status',
+      [...DEMO_STATUS_DISTRIBUTION.slice(0, -1), {status: 'unknown_status', percentage: 0}],
+    ],
+    [
+      'a non-quantised percentage',
+      DEMO_STATUS_DISTRIBUTION.map((entry, index) =>
+        index === 0 ? {...entry, percentage: 15} : entry,
+      ),
+    ],
+  ])('fails the entire detailed vector closed for %s', (_label, statusDistribution) => {
+    let result: PeerProgressIndicator | undefined;
+
+    service.getIndicator(7, 99).subscribe((value) => {
+      result = value;
+    });
+
+    httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: 2,
+      submitted_percentage: 60,
+      completed_percentage: 10,
+      distribution_available: true,
+      status_distribution: statusDistribution,
+      is_user_enabled: true,
+      is_suppressed: false,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: '2026-08-23T00:00:00Z',
+      unavailable_message: '',
+      distribution_unavailable_reason: 'detailed_data_unavailable',
+    });
+
+    expect(result?.distributionAvailable).toBe(false);
+    expect(result?.statusDistribution).toEqual([]);
+    expect(result?.completedPercentage).toBe(10);
+  });
+
+  it('scrubs every compact and detailed value when the server reports the user preference off', () => {
+    let result: PeerProgressIndicator | undefined;
+
+    service.getIndicator(7, 99).subscribe((value) => {
+      result = value;
+    });
+
+    httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: 2,
+      submitted_percentage: 60,
+      completed_percentage: 10,
+      distribution_available: true,
+      status_distribution: DEMO_STATUS_DISTRIBUTION,
+      is_user_enabled: false,
+      is_suppressed: false,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: '2026-08-23T00:00:00Z',
+      unavailable_message: 'server-provided preference detail',
+      unavailable_reason: 'user_disabled',
+      distribution_unavailable_reason: 'user_disabled',
+    });
+
+    expect(result).toMatchObject({
+      submittedPercentage: null,
+      completedPercentage: null,
+      distributionAvailable: false,
+      statusDistribution: [],
+      isUserEnabled: false,
+      unavailableReason: 'user_disabled',
+    });
+  });
+
+  it('scrubs compact and detailed values from a suppressed response even if the payload is malformed', () => {
+    let result: PeerProgressIndicator | undefined;
+
+    service.getIndicator(7, 99).subscribe((value) => {
+      result = value;
+    });
+
+    httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: 2,
+      submitted_percentage: 60,
+      completed_percentage: 10,
+      distribution_available: true,
+      status_distribution: DEMO_STATUS_DISTRIBUTION,
+      is_user_enabled: true,
+      is_suppressed: true,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: '2026-08-23T00:00:00Z',
+      unavailable_message: 'Not enough students to show progress.',
+      unavailable_reason: 'insufficient_cohort',
+      distribution_unavailable_reason: 'insufficient_cohort',
+    });
+
+    expect(result).toMatchObject({
+      submittedPercentage: null,
+      completedPercentage: null,
+      distributionAvailable: false,
+      statusDistribution: [],
+      isSuppressed: true,
+    });
+  });
+
+  it('does not retain unrecognised reason strings from the API', () => {
+    let result: PeerProgressIndicator | undefined;
+
+    service.getIndicator(7, 99).subscribe((value) => {
+      result = value;
+    });
+
+    httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: 2,
+      submitted_percentage: 60,
+      completed_percentage: 10,
+      distribution_available: false,
+      status_distribution: null,
+      is_user_enabled: true,
+      is_suppressed: false,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: '2026-08-23T00:00:00Z',
+      unavailable_message: '',
+      unavailable_reason: 'sensitive-internal-reason',
+      distribution_unavailable_reason: 'sensitive-internal-detail',
+    });
+
+    expect(result?.unavailableReason).toBeNull();
+    expect(result?.distributionUnavailableReason).toBeNull();
+  });
+
+  it.each([
+    ['not finite', Number.NaN, Number.POSITIVE_INFINITY],
+    ['negative', -10, -20],
+    ['over 100', 110, 120],
+    ['not quantised', 15, 25],
+  ])(
+    'fails malformed compact percentages closed when they are %s',
+    (_label, submitted, completed) => {
+      let result: PeerProgressIndicator | undefined;
+
+      service.getIndicator(7, 99).subscribe((value) => {
+        result = value;
+      });
+
+      httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+        task_definition_id: 99,
+        unit_id: 1,
+        target_grade: 2,
+        submitted_percentage: submitted,
+        completed_percentage: completed,
+        distribution_available: false,
+        status_distribution: null,
+        is_user_enabled: true,
+        is_suppressed: false,
+        is_stale: false,
+        is_feature_enabled: true,
+        last_updated_at: '2026-08-23T00:00:00Z',
+        unavailable_message: '',
+      });
+
+      expect(result?.submittedPercentage).toBeNull();
+      expect(result?.completedPercentage).toBeNull();
+    },
+  );
+
+  it('cancels the live HTTP request when the caller unsubscribes', () => {
+    const subscription = service.getIndicator(7, 99).subscribe();
+    const request = httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`);
+
+    subscription.unsubscribe();
+
+    expect(request.cancelled).toBe(true);
+  });
+
+  it('masks task peer comparison without calling the API while local demo mode is off', () => {
+    demoMode.shouldMaskApiData = true;
+    let result: PeerProgressIndicator | undefined;
+
+    service.getIndicator(7, 99).subscribe((value) => {
+      result = value;
+    });
+
+    httpMock.expectNone(`${API_URL}/projects/7/task_def_id/99/peer_progress`);
+    expect(result).toMatchObject({
+      taskDefinitionId: 99,
+      submittedPercentage: null,
+      isFeatureEnabled: false,
+      unavailableMessage: 'Enable demo mode to show live peer comparison data.',
+    });
+  });
+
+  it('keeps the genuine API path when masking is unavailable in production', () => {
+    demoMode.shouldMaskApiData = false;
+    service.getIndicator(7, 99).subscribe();
+
+    httpMock.expectOne(`${API_URL}/projects/7/task_def_id/99/peer_progress`).flush({
+      task_definition_id: 99,
+      unit_id: 1,
+      target_grade: 2,
+      submitted_percentage: 40,
+      is_suppressed: false,
+      is_stale: false,
+      is_feature_enabled: true,
+      last_updated_at: '2026-08-23T00:00:00Z',
+      unavailable_message: '',
+    });
+  });
+
+  describe('getDemoUnitSummary', () => {
+    it('should keep the student and cohort percentages separate for a normal response', () => {
+      service.getDemoUnitSummary(10, 2, 30, 'normal').subscribe((result) => {
+        expect(result.studentPercentage).toBe(30);
+        expect(result.submittedPercentage).toBe(NORMAL_STATE.submittedPercentage);
+        expect(result.isSuppressed).toBe(NORMAL_STATE.isSuppressed);
+
+        expect(result.unitId).toBe(10);
+        expect(result.targetGrade).toBe(2);
+      });
+    });
+
+    it('should not expose a task definition id -- a unit summary is not task-scoped', () => {
+      service.getDemoUnitSummary(10, 2, 30, 'normal').subscribe((result) => {
+        expect((result as unknown as {taskDefinitionId?: number}).taskDefinitionId).toBeUndefined();
+      });
+    });
+
+    it('should return suppressed state with the safe message and no cohort percentage', () => {
+      service.getDemoUnitSummary(30, 0, 30, 'suppressed').subscribe((result) => {
+        expect(result.submittedPercentage).toBe(SUPPRESSED_STATE.submittedPercentage);
+        expect(result.isSuppressed).toBe(true);
+        expect(result.unavailableMessage).toBe(SUPPRESSED_STATE.unavailableMessage);
+        expect(result.studentPercentage).toBe(30);
+      });
+    });
+
+    it('should return disabled state when the unit has PPI turned off', () => {
+      service.getDemoUnitSummary(60, 1, 30, 'disabled').subscribe((result) => {
+        expect(result.isFeatureEnabled).toBe(false);
+        expect(result.unavailableMessage).toBe(DISABLED_STATE.unavailableMessage);
+      });
+    });
+
+    it('should preserve a null studentPercentage rather than substituting a default', () => {
+      service.getDemoUnitSummary(10, 2, null, 'normal').subscribe((result) => {
+        expect(result.studentPercentage).toBeNull();
+      });
+    });
+  });
+});
diff --git a/src/app/api/services/spec/peer-progress.service.spec.ts b/src/app/api/services/spec/peer-progress.service.spec.ts
new file mode 100644
index 0000000000..c49b353dc7
--- /dev/null
+++ b/src/app/api/services/spec/peer-progress.service.spec.ts
@@ -0,0 +1,66 @@
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {firstValueFrom} from 'rxjs';
+import {Project} from '../../models/project';
+import {PeerProgressService} from '../peer-progress.service';
+
+describe('PeerProgressService', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('returns a safe demo state without exposing raw cohort size', async () => {
+    const project = {
+      id: 42,
+      targetGrade: 2,
+      unit: {
+        startDate: new Date(2026, 6, 1),
+        endDate: new Date(2026, 7, 31),
+      },
+    } as unknown as Project;
+
+    const service = new PeerProgressService();
+
+    const response = await firstValueFrom(service.getCohortMedian(project, 3));
+
+    expect(response).toMatchObject({
+      project_id: 42,
+      target_grade: 3,
+      state: 'ready',
+    });
+
+    expect(Object.keys(response)).not.toContain('cohort_size');
+
+    expect(response.median_burndown.length).toBeGreaterThan(0);
+
+    expect(
+      response.median_burndown.every((point) => point.remaining >= 0 && point.remaining <= 1),
+    ).toBe(true);
+  });
+
+  it('shows the demo curve only through today without remapping its future values', async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-08-23T00:00:00.000Z'));
+
+    const project = {
+      id: 42,
+      targetGrade: 0,
+      unit: {
+        startDate: new Date('2026-07-12T00:00:00.000Z'),
+        endDate: new Date('2026-10-11T00:00:00.000Z'),
+      },
+    } as unknown as Project;
+
+    const response = await firstValueFrom(new PeerProgressService().getCohortMedian(project));
+    const lastPoint = response.median_burndown.at(-1);
+
+    expect(lastPoint).toEqual({
+      date: '2026-08-23T00:00:00.000Z',
+      remaining: 0.58,
+    });
+    expect(response.median_burndown.every((point) => new Date(point.date) <= new Date())).toBe(
+      true,
+    );
+    expect(Math.round((1 - lastPoint!.remaining) * 100)).toBe(42);
+    expect(lastPoint?.remaining).not.toBe(0);
+  });
+});
diff --git a/src/app/api/services/spec/push-notification-click.service.spec.ts b/src/app/api/services/spec/push-notification-click.service.spec.ts
new file mode 100644
index 0000000000..19a94a8db7
--- /dev/null
+++ b/src/app/api/services/spec/push-notification-click.service.spec.ts
@@ -0,0 +1,131 @@
+// MN-C03 targeted SwPush click tests.
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {SwPush} from '@angular/service-worker';
+import {Subject} from 'rxjs';
+import {NOTIFICATION_ROUTE_FALLBACK, NotificationRouteService} from '../notification-route.service';
+import {PushNotificationClickService} from '../push-notification-click.service';
+
+describe('PushNotificationClickService', () => {
+  let notificationClicks: Subject<unknown>;
+  let notificationRoutes: {
+    resolve: ReturnType<typeof vi.fn>;
+    navigate: ReturnType<typeof vi.fn>;
+  };
+  let appDocument: {hasFocus: ReturnType<typeof vi.fn>};
+  let service: PushNotificationClickService;
+
+  beforeEach(() => {
+    notificationClicks = new Subject<unknown>();
+    notificationRoutes = {
+      resolve: vi.fn((link: unknown) =>
+        typeof link === 'string' && link.startsWith('/projects/')
+          ? link
+          : NOTIFICATION_ROUTE_FALLBACK,
+      ),
+      navigate: vi.fn().mockResolvedValue(true),
+    };
+    appDocument = {hasFocus: vi.fn().mockReturnValue(true)};
+    const swPush = {
+      notificationClicks: notificationClicks.asObservable(),
+    } as unknown as SwPush;
+
+    service = new PushNotificationClickService(
+      swPush,
+      notificationRoutes as unknown as NotificationRouteService,
+      appDocument as unknown as Document,
+    );
+  });
+
+  it('routes an open-app click through the shared boundary', () => {
+    service.start();
+
+    notificationClicks.next({
+      notification: {
+        data: {notification_id: 42, link: '/projects/7/dashboard/1.1P'},
+      },
+    });
+
+    expect(notificationRoutes.resolve).toHaveBeenCalledWith('/projects/7/dashboard/1.1P');
+    expect(notificationRoutes.navigate).toHaveBeenCalledWith('/projects/7/dashboard/1.1P');
+  });
+
+  it('uses the shared fallback for a missing link', () => {
+    service.start();
+
+    notificationClicks.next({notification: {data: {notification_id: 43}}});
+
+    expect(notificationRoutes.resolve).toHaveBeenCalledWith(undefined);
+    expect(notificationRoutes.navigate).toHaveBeenCalledWith(NOTIFICATION_ROUTE_FALLBACK);
+  });
+
+  it('uses the shared fallback for an unsafe link', () => {
+    service.start();
+
+    notificationClicks.next({
+      notification: {
+        data: {notification_id: 44, link: 'https://example.test/unsafe'},
+      },
+    });
+
+    expect(notificationRoutes.resolve).toHaveBeenCalledWith('https://example.test/unsafe');
+    expect(notificationRoutes.navigate).toHaveBeenCalledWith(NOTIFICATION_ROUTE_FALLBACK);
+  });
+
+  it('does not navigate a background tab when another client was focused', () => {
+    appDocument.hasFocus.mockReturnValue(false);
+    service.start();
+
+    notificationClicks.next({
+      notification: {data: {notification_id: 45, link: '/projects/7/groups'}},
+    });
+
+    expect(notificationRoutes.navigate).not.toHaveBeenCalled();
+  });
+
+  it('subscribes only once when startup calls start more than once', () => {
+    service.start();
+    service.start();
+
+    notificationClicks.next({
+      notification: {data: {notification_id: 46, link: '/projects/7/groups'}},
+    });
+
+    expect(notificationRoutes.navigate).toHaveBeenCalledOnce();
+  });
+
+  it('suppresses a duplicate delivery of the same click event', () => {
+    service.start();
+    const event = {
+      notification: {data: {notification_id: 47, link: '/projects/7/groups'}},
+    };
+
+    notificationClicks.next(event);
+    notificationClicks.next(event);
+
+    expect(notificationRoutes.navigate).toHaveBeenCalledOnce();
+  });
+
+  it('does not suppress different notifications that share a route', () => {
+    service.start();
+
+    notificationClicks.next({
+      notification: {data: {notification_id: 48, link: '/projects/7/groups'}},
+    });
+    notificationClicks.next({
+      notification: {data: {notification_id: 49, link: '/projects/7/groups'}},
+    });
+
+    expect(notificationRoutes.navigate).toHaveBeenCalledTimes(2);
+  });
+
+  it('stops receiving clicks after teardown', () => {
+    service.start();
+    service.stop();
+
+    notificationClicks.next({
+      notification: {data: {notification_id: 50, link: '/projects/7/groups'}},
+    });
+
+    expect(notificationRoutes.navigate).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/app/api/services/spec/push-notification.service.spec.ts b/src/app/api/services/spec/push-notification.service.spec.ts
new file mode 100644
index 0000000000..71526017bf
--- /dev/null
+++ b/src/app/api/services/spec/push-notification.service.spec.ts
@@ -0,0 +1,436 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {provideHttpClient, withInterceptorsFromDi, withXhr} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import {SwPush} from '@angular/service-worker';
+import {BehaviorSubject, NEVER, Observable, Subject} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {
+  PERMISSION_DENIED_INSTRUCTIONS,
+  PushNotificationService,
+  detectBrowser,
+} from '../push-notification.service';
+
+const ENDPOINT = 'https://fcm.googleapis.com/fcm/send/test-browser';
+
+/**
+ * Let pending promise callbacks run.
+ *
+ * unsubscribe() ends in from(swPush.unsubscribe()), and that promise settles on
+ * the microtask queue, so completion is not observable in the same tick as the
+ * http flush. A macrotask drains everything queued behind it.
+ */
+function flushMicrotasks(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/**
+ * Enough of a PushSubscription for the service. The real one comes from the
+ * browser and cannot be constructed in a test environment.
+ */
+function fakeSubscription(
+  endpoint: string = ENDPOINT,
+  p256dh: string = 'BFakePublicKey',
+  auth: string = 'FakeAuthSecret',
+) {
+  return {
+    endpoint,
+    toJSON: () => ({
+      endpoint,
+      keys: {p256dh, auth},
+    }),
+  } as unknown as PushSubscription;
+}
+
+describe('PushNotificationService', () => {
+  let service: PushNotificationService;
+  let httpMock: HttpTestingController;
+  let subscriptionSubject: BehaviorSubject<PushSubscription | null>;
+  let subscriptionChangeSubject: Subject<{
+    oldSubscription: PushSubscription | null;
+    newSubscription: PushSubscription | null;
+  }>;
+  let swPush: {
+    isEnabled: boolean;
+    subscription: Observable<PushSubscription | null>;
+    pushSubscriptionChanges: Observable<{
+      oldSubscription: PushSubscription | null;
+      newSubscription: PushSubscription | null;
+    }>;
+    requestSubscription: ReturnType<typeof vi.fn>;
+    unsubscribe: ReturnType<typeof vi.fn>;
+  };
+  let constants: {IsPushEnabled: BehaviorSubject<boolean>; VapidPublicKey: BehaviorSubject<string>};
+
+  beforeEach(() => {
+    subscriptionSubject = new BehaviorSubject<PushSubscription | null>(null);
+    subscriptionChangeSubject = new Subject();
+
+    swPush = {
+      isEnabled: true,
+      subscription: subscriptionSubject,
+      pushSubscriptionChanges: subscriptionChangeSubject,
+      requestSubscription: vi.fn().mockResolvedValue(fakeSubscription()),
+      unsubscribe: vi.fn().mockResolvedValue(undefined),
+    };
+    constants = {
+      IsPushEnabled: new BehaviorSubject<boolean>(true),
+      VapidPublicKey: new BehaviorSubject<string>('BTestVapidPublicKey'),
+    };
+
+    // jsdom has neither, and the service checks for both.
+    vi.stubGlobal('Notification', {permission: 'default'});
+    (window as unknown as {PushManager: unknown}).PushManager = class {};
+
+    TestBed.configureTestingModule({
+      providers: [
+        PushNotificationService,
+        {provide: SwPush, useValue: swPush},
+        {provide: DoubtfireConstants, useValue: constants},
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    service = TestBed.inject(PushNotificationService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+    vi.unstubAllGlobals();
+  });
+
+  it('posts the browser registration to the api when subscribing', () => {
+    service.subscribe().subscribe();
+
+    // requestSubscription resolves a promise, so the POST is a microtask away.
+    return Promise.resolve().then(() => {
+      const request = httpMock.expectOne(`${API_URL}/push_subscriptions`);
+
+      expect(request.request.method).toBe('POST');
+      expect(request.request.body).toEqual({
+        endpoint: ENDPOINT,
+        p256dh: 'BFakePublicKey',
+        auth: 'FakeAuthSecret',
+      });
+      request.flush(null);
+    });
+  });
+
+  it('asks the browser to subscribe with the key the api supplied', () => {
+    service.subscribe().subscribe();
+
+    expect(swPush.requestSubscription).toHaveBeenCalledWith({
+      serverPublicKey: 'BTestVapidPublicKey',
+    });
+
+    return Promise.resolve().then(() => {
+      httpMock.expectOne(`${API_URL}/push_subscriptions`).flush(null);
+    });
+  });
+
+  it('stores a rotated registration before deleting the old endpoint', () => {
+    const oldSubscription = fakeSubscription(`${ENDPOINT}-old`);
+    const newSubscription = fakeSubscription(
+      `${ENDPOINT}-new`,
+      'BRotatedPublicKey',
+      'RotatedAuthSecret',
+    );
+
+    service.start();
+    subscriptionChangeSubject.next({oldSubscription, newSubscription});
+
+    const post = httpMock.expectOne(
+      (request) => request.url === `${API_URL}/push_subscriptions` && request.method === 'POST',
+    );
+    expect(post.request.body).toEqual({
+      endpoint: `${ENDPOINT}-new`,
+      p256dh: 'BRotatedPublicKey',
+      auth: 'RotatedAuthSecret',
+    });
+    httpMock.expectNone(
+      (request) => request.url === `${API_URL}/push_subscriptions` && request.method === 'DELETE',
+    );
+
+    post.flush(null);
+
+    const removeOld = httpMock.expectOne(
+      (request) => request.url === `${API_URL}/push_subscriptions` && request.method === 'DELETE',
+    );
+    expect(removeOld.request.params.get('endpoint')).toBe(`${ENDPOINT}-old`);
+    removeOld.flush(null);
+  });
+
+  it('updates keys in place when rotation keeps the same endpoint', () => {
+    const oldSubscription = fakeSubscription();
+    const newSubscription = fakeSubscription(ENDPOINT, 'BRotatedPublicKey', 'RotatedAuthSecret');
+
+    service.start();
+    subscriptionChangeSubject.next({oldSubscription, newSubscription});
+
+    const post = httpMock.expectOne(
+      (request) => request.url === `${API_URL}/push_subscriptions` && request.method === 'POST',
+    );
+    expect(post.request.body).toEqual({
+      endpoint: ENDPOINT,
+      p256dh: 'BRotatedPublicKey',
+      auth: 'RotatedAuthSecret',
+    });
+    post.flush(null);
+
+    httpMock.expectNone(
+      (request) => request.url === `${API_URL}/push_subscriptions` && request.method === 'DELETE',
+    );
+  });
+
+  it('keeps listening after one rotated registration fails to reach the api', () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    service.start();
+    subscriptionChangeSubject.next({
+      oldSubscription: fakeSubscription(`${ENDPOINT}-old`),
+      newSubscription: fakeSubscription(`${ENDPOINT}-failed`),
+    });
+
+    httpMock
+      .expectOne(
+        (request) => request.url === `${API_URL}/push_subscriptions` && request.method === 'POST',
+      )
+      .flush('nope', {status: 500, statusText: 'Server Error'});
+
+    subscriptionChangeSubject.next({
+      oldSubscription: null,
+      newSubscription: fakeSubscription(`${ENDPOINT}-later`),
+    });
+
+    const later = httpMock.expectOne(
+      (request) => request.url === `${API_URL}/push_subscriptions` && request.method === 'POST',
+    );
+    expect(later.request.body['endpoint']).toBe(`${ENDPOINT}-later`);
+    later.flush(null);
+
+    expect(consoleError).toHaveBeenCalledOnce();
+  });
+
+  it('ignores an invalidation when the browser supplies no replacement', () => {
+    service.start();
+    subscriptionChangeSubject.next({
+      oldSubscription: fakeSubscription(),
+      newSubscription: null,
+    });
+
+    httpMock.expectNone(`${API_URL}/push_subscriptions`);
+  });
+
+  it('starts the rotation listener only once and stops it on teardown', () => {
+    service.start();
+    service.start();
+
+    subscriptionChangeSubject.next({
+      oldSubscription: null,
+      newSubscription: fakeSubscription(`${ENDPOINT}-once`),
+    });
+
+    httpMock.expectOne(`${API_URL}/push_subscriptions`).flush(null);
+    service.stop();
+
+    subscriptionChangeSubject.next({
+      oldSubscription: null,
+      newSubscription: fakeSubscription(`${ENDPOINT}-stopped`),
+    });
+
+    httpMock.expectNone(`${API_URL}/push_subscriptions`);
+  });
+
+  it('deletes on the api before unsubscribing in the browser', () => {
+    subscriptionSubject.next(fakeSubscription());
+
+    service.unsubscribe().subscribe();
+
+    const request = httpMock.expectOne(
+      (r) => r.url === `${API_URL}/push_subscriptions` && r.method === 'DELETE',
+    );
+
+    // Order matters. Unsubscribing first would throw the endpoint away and leave
+    // a row on the api that nothing can ever delete.
+    expect(swPush.unsubscribe).not.toHaveBeenCalled();
+    expect(request.request.params.get('endpoint')).toBe(ENDPOINT);
+
+    request.flush(null);
+    expect(swPush.unsubscribe).toHaveBeenCalled();
+  });
+
+  it('does nothing when unsubscribing a browser that was never subscribed', () => {
+    subscriptionSubject.next(null);
+
+    service.unsubscribe().subscribe();
+
+    expect(swPush.unsubscribe).not.toHaveBeenCalled();
+    httpMock.expectNone(`${API_URL}/push_subscriptions`);
+  });
+
+  it('returns immediately when the service worker is disabled', () => {
+    swPush.isEnabled = false;
+    swPush.subscription = NEVER;
+    let emitted = false;
+
+    service.unsubscribe().subscribe(() => {
+      emitted = true;
+    });
+
+    expect(emitted).toBe(true);
+    expect(swPush.unsubscribe).not.toHaveBeenCalled();
+    httpMock.expectNone(`${API_URL}/push_subscriptions`);
+  });
+
+  // Leaving the browser subscribed because the api call failed is the worse of
+  // the two outcomes. The row on the server is cleaned up when the push service
+  // returns 410 for it; a browser still receiving is not cleaned up by anything.
+  it('still unsubscribes locally when the api delete fails', async () => {
+    subscriptionSubject.next(fakeSubscription());
+    let completed = false;
+
+    service.unsubscribe().subscribe({complete: () => (completed = true)});
+
+    const request = httpMock.expectOne(
+      (r) => r.url === `${API_URL}/push_subscriptions` && r.method === 'DELETE',
+    );
+    request.flush('nope', {status: 500, statusText: 'Server Error'});
+
+    expect(swPush.unsubscribe).toHaveBeenCalled();
+
+    // swPush.unsubscribe() returns a promise, so completion lands a tick later.
+    await flushMicrotasks();
+    expect(completed).toBe(true);
+  });
+
+  it('still unsubscribes locally when the api is unreachable', () => {
+    subscriptionSubject.next(fakeSubscription());
+
+    service.unsubscribe().subscribe();
+
+    const request = httpMock.expectOne(
+      (r) => r.url === `${API_URL}/push_subscriptions` && r.method === 'DELETE',
+    );
+    request.error(new ProgressEvent('network error'));
+
+    expect(swPush.unsubscribe).toHaveBeenCalled();
+  });
+
+  // Sign out calls this and cannot do anything useful with a failure, so it
+  // must never throw, even when the browser itself refuses to unsubscribe.
+  it('unsubscribeQuietly swallows a failure from the browser', async () => {
+    subscriptionSubject.next(fakeSubscription());
+    swPush.unsubscribe.mockRejectedValue(new Error('no service worker'));
+    let errored = false;
+    let completed = false;
+
+    service.unsubscribeQuietly().subscribe({
+      error: () => (errored = true),
+      complete: () => (completed = true),
+    });
+
+    httpMock
+      .expectOne((r) => r.url === `${API_URL}/push_subscriptions` && r.method === 'DELETE')
+      .flush(null);
+
+    await flushMicrotasks();
+    expect(errored).toBe(false);
+    expect(completed).toBe(true);
+  });
+
+  it('reports nothing blocking when the service worker is running and keys are set', () => {
+    expect(service.blocker()).toBeNull();
+  });
+
+  it('reports the service worker as the blocker during the first six seconds', () => {
+    swPush.isEnabled = false;
+
+    expect(service.blocker()).toBe('no-service-worker');
+  });
+
+  it('reports a blocker when the api has no vapid keys', () => {
+    constants.IsPushEnabled.next(false);
+
+    expect(service.blocker()).toBe('not-configured');
+  });
+
+  it('reports a blocker when the user has denied notifications', () => {
+    vi.stubGlobal('Notification', {permission: 'denied'});
+
+    expect(service.blocker()).toBe('permission-denied');
+  });
+
+  it('reports a blocker when the browser cannot do push at all', () => {
+    delete (window as unknown as {PushManager?: unknown}).PushManager;
+
+    expect(service.blocker()).toBe('unsupported');
+  });
+
+  describe('detectBrowser', () => {
+    it('recognises Chrome', () => {
+      const ua =
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
+      expect(detectBrowser(ua)).toBe('chrome');
+    });
+
+    it('recognises Edge even though its user agent also contains Chrome', () => {
+      const ua =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0';
+      expect(detectBrowser(ua)).toBe('edge');
+    });
+
+    it('recognises Firefox', () => {
+      const ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0';
+      expect(detectBrowser(ua)).toBe('firefox');
+    });
+
+    it('uses the generic fallback for Opera even though its user agent contains Chrome', () => {
+      const ua =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
+        '(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0';
+
+      expect(detectBrowser(ua)).toBe('other');
+    });
+
+    it('falls back to other for an unrecognised browser', () => {
+      expect(detectBrowser('SomeUnknownBrowser/1.0')).toBe('other');
+    });
+  });
+
+  describe('permissionDeniedInstructions', () => {
+    it('returns Chrome steps in Chrome', () => {
+      vi.stubGlobal('navigator', {userAgent: 'Chrome/120.0.0.0'});
+      expect(service.permissionDeniedInstructions()).toEqual(PERMISSION_DENIED_INSTRUCTIONS.chrome);
+    });
+
+    it('returns Edge steps in Edge', () => {
+      vi.stubGlobal('navigator', {userAgent: 'Chrome/120.0.0.0 Edg/120.0.0.0'});
+      expect(service.permissionDeniedInstructions()).toEqual(PERMISSION_DENIED_INSTRUCTIONS.edge);
+    });
+
+    it('returns Firefox steps in Firefox', () => {
+      vi.stubGlobal('navigator', {userAgent: 'Firefox/120.0'});
+      expect(service.permissionDeniedInstructions()).toEqual(
+        PERMISSION_DENIED_INSTRUCTIONS.firefox,
+      );
+    });
+
+    it('returns generic steps in Opera', () => {
+      vi.stubGlobal('navigator', {
+        userAgent:
+          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
+          '(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0',
+      });
+
+      expect(service.permissionDeniedInstructions()).toEqual(PERMISSION_DENIED_INSTRUCTIONS.other);
+    });
+
+    it('returns generic steps in an unrecognised browser', () => {
+      vi.stubGlobal('navigator', {userAgent: 'SomeUnknownBrowser/1.0'});
+      expect(service.permissionDeniedInstructions()).toEqual(PERMISSION_DENIED_INSTRUCTIONS.other);
+    });
+  });
+});
diff --git a/src/app/api/services/spec/task-comment.service.spec.ts b/src/app/api/services/spec/task-comment.service.spec.ts
new file mode 100644
index 0000000000..ae5673b28b
--- /dev/null
+++ b/src/app/api/services/spec/task-comment.service.spec.ts
@@ -0,0 +1,72 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {
+  HttpRequest,
+  provideHttpClient,
+  withInterceptorsFromDi,
+  withXhr,
+} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {EmojiService} from 'src/app/common/services/emoji.service';
+import {TaskCommentService} from '../task-comment.service';
+import {TestAttemptService} from '../test-attempt.service';
+import {UserService} from '../user.service';
+
+describe('TaskCommentService discussion comments', () => {
+  let taskCommentService: TaskCommentService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        TaskCommentService,
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        {provide: EmojiService, useValue: {}},
+        {provide: UserService, useValue: {cache: {getOrCreate: () => ({})}}},
+        {provide: FileDownloaderService, useValue: {}},
+        {provide: TestAttemptService, useValue: {cache: {getOrCreate: () => ({})}}},
+      ],
+    });
+
+    taskCommentService = TestBed.inject(TaskCommentService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('posts a discussion reply without expecting an entity response', () => {
+    const replyAudio = new Blob(['reply audio'], {type: 'audio/webm'});
+    const comment = {
+      id: 69,
+      project: {id: 1},
+      task: {definition: {id: 2}},
+    } as TaskComment;
+    let completed = false;
+
+    taskCommentService.postDiscussionReply(comment, replyAudio).subscribe(() => {
+      completed = true;
+    });
+
+    const req = httpMock.expectOne((request: HttpRequest<FormData>): boolean => {
+      expect(request.url).toEqual(
+        'http://localhost:3000/api/projects/1/task_def_id/2/comments/69/discussion_comment/reply',
+      );
+      expect(request.method).toBe('POST');
+      expect(request.body instanceof FormData).toBe(true);
+      const attachment = request.body.get('attachment') as Blob;
+      expect(attachment instanceof Blob).toBe(true);
+      expect(attachment.size).toBe(replyAudio.size);
+      expect(attachment.type).toBe(replyAudio.type);
+      return true;
+    });
+
+    req.flush(null);
+
+    expect(completed).toBe(true);
+  });
+});
diff --git a/src/app/api/services/spec/task-recommendation.service.spec.ts b/src/app/api/services/spec/task-recommendation.service.spec.ts
new file mode 100644
index 0000000000..cf1d4dde8d
--- /dev/null
+++ b/src/app/api/services/spec/task-recommendation.service.spec.ts
@@ -0,0 +1,71 @@
+import {provideHttpClient, withInterceptorsFromDi, withXhr} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {TaskRecommendation, TaskRecommendationService} from '../task-recommendation.service';
+
+describe('TaskRecommendationService', () => {
+  let httpTestingController: HttpTestingController;
+  let service: TaskRecommendationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        TaskRecommendationService,
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    httpTestingController = TestBed.inject(HttpTestingController);
+    service = TestBed.inject(TaskRecommendationService);
+  });
+
+  afterEach(() => {
+    httpTestingController.verify();
+  });
+
+  it('loads and combines every recommendation page', () => {
+    let recommendations: TaskRecommendation[] | undefined;
+
+    service.getAll().subscribe((result) => {
+      recommendations = result;
+    });
+
+    const firstRequest = httpTestingController.expectOne(
+      (request) =>
+        request.url === `${API_URL}/tasks/recommended` &&
+        request.params.get('page') === '1' &&
+        request.params.get('per_page') === '50',
+    );
+    firstRequest.flush({
+      data: [makeRecommendation(1, 80)],
+      meta: {page: 1, per_page: 50, total_count: 2, total_pages: 2},
+    });
+
+    const secondRequest = httpTestingController.expectOne(
+      (request) =>
+        request.url === `${API_URL}/tasks/recommended` &&
+        request.params.get('page') === '2' &&
+        request.params.get('per_page') === '50',
+    );
+    secondRequest.flush({
+      data: [makeRecommendation(2, 60)],
+      meta: {page: 2, per_page: 50, total_count: 2, total_pages: 2},
+    });
+
+    expect(recommendations).toEqual([makeRecommendation(1, 80), makeRecommendation(2, 60)]);
+  });
+
+  const makeRecommendation = (
+    taskDefinitionId: number,
+    priorityScore: number,
+  ): TaskRecommendation => ({
+    task_id: null,
+    task_definition_id: taskDefinitionId,
+    task_name: `Task ${taskDefinitionId}`,
+    project_id: 10,
+    unit_id: 20,
+    priority_score: priorityScore,
+  });
+});
diff --git a/src/app/api/services/spec/task.service.spec.ts b/src/app/api/services/spec/task.service.spec.ts
new file mode 100644
index 0000000000..81a13dba8f
--- /dev/null
+++ b/src/app/api/services/spec/task.service.spec.ts
@@ -0,0 +1,109 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {provideHttpClient} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import {Unit} from 'src/app/api/models/doubtfire-model';
+import {Task} from 'src/app/api/models/task';
+import {TaskService} from '../task.service';
+
+describe('TaskService', () => {
+  let service: TaskService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TaskService, provideHttpClient(), provideHttpClientTesting()],
+    });
+
+    service = TestBed.inject(TaskService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('maps has_feedback from the API to Task.hasFeedback', () => {
+    const project = {
+      id: 2,
+      unit: undefined,
+    };
+
+    const unit = {
+      id: 1,
+      findStudent: vi.fn(() => project),
+      taskDef: vi.fn((id: number) => ({id})),
+      incorporateTasks: vi.fn(),
+    } as unknown as Unit;
+
+    project.unit = unit;
+
+    let result: Task[];
+
+    service.queryTasksForTaskInbox(unit).subscribe((tasks) => {
+      result = tasks;
+    });
+
+    const request = httpMock.expectOne(
+      (req) => req.url.endsWith('/units/1/tasks/inbox') && req.method === 'GET',
+    );
+
+    request.flush([
+      {
+        id: 27,
+        project_id: 2,
+        task_definition_id: 1,
+        has_feedback: true,
+      },
+    ]);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].hasFeedback).toBe(true);
+  });
+
+  it('keeps general status changes separate from completed submissions', () => {
+    const task = {} as Task;
+    const statusUpdated = vi.fn();
+    const submissionCompleted = vi.fn();
+
+    service.taskStatusUpdated$.subscribe(statusUpdated);
+    service.taskSubmissionCompleted$.subscribe(submissionCompleted);
+
+    service.notifyStatusChange(task);
+
+    expect(statusUpdated).toHaveBeenCalledOnce();
+    expect(statusUpdated).toHaveBeenCalledWith(task);
+    expect(submissionCompleted).not.toHaveBeenCalled();
+  });
+
+  it('broadcasts both events when a submission completes', () => {
+    const task = {} as Task;
+    const statusUpdated = vi.fn();
+    const submissionCompleted = vi.fn();
+
+    service.taskStatusUpdated$.subscribe(statusUpdated);
+    service.taskSubmissionCompleted$.subscribe(submissionCompleted);
+
+    service.notifyTransitionComplete(task, true);
+
+    expect(statusUpdated).toHaveBeenCalledOnce();
+    expect(statusUpdated).toHaveBeenCalledWith(task);
+    expect(submissionCompleted).toHaveBeenCalledOnce();
+    expect(submissionCompleted).toHaveBeenCalledWith(task);
+  });
+
+  it('does not treat a non-submission transition as a completed submission', () => {
+    const task = {} as Task;
+    const statusUpdated = vi.fn();
+    const submissionCompleted = vi.fn();
+
+    service.taskStatusUpdated$.subscribe(statusUpdated);
+    service.taskSubmissionCompleted$.subscribe(submissionCompleted);
+
+    service.notifyTransitionComplete(task, false);
+
+    expect(statusUpdated).toHaveBeenCalledOnce();
+    expect(statusUpdated).toHaveBeenCalledWith(task);
+    expect(submissionCompleted).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/app/api/services/spec/user.service.spec.ts b/src/app/api/services/spec/user.service.spec.ts
index d78a066b9e..048fdd7d0c 100644
--- a/src/app/api/services/spec/user.service.spec.ts
+++ b/src/app/api/services/spec/user.service.spec.ts
@@ -1,18 +1,26 @@
-import { TestBed, tick, fakeAsync } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { User, UserService } from 'src/app/api/models/doubtfire-model';
-import { HttpRequest } from '@angular/common/http';
-import { analyticsService } from 'src/app/ajs-upgraded-providers';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {
+  HttpRequest,
+  provideHttpClient,
+  withInterceptorsFromDi,
+  withXhr,
+} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import {User, UserService} from 'src/app/api/models/doubtfire-model';
 
 describe('UserService', () => {
   let userService: UserService;
   let httpMock: HttpTestingController;
-  let analyticsServiceStub: jasmine.SpyObj<any>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      providers: [UserService, { provide: analyticsService, useValue: analyticsServiceStub }],
+      imports: [],
+      providers: [
+        UserService,
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
     });
 
     userService = TestBed.inject(UserService);
@@ -23,7 +31,7 @@ describe('UserService', () => {
     httpMock.verify();
   });
 
-  it('should return expected users (HttpClient called once)', fakeAsync(() => {
+  it('should return expected users (HttpClient called once)', () => {
     const u = new User();
     u.id = 1;
     u.lastName = 'renzella';
@@ -38,22 +46,75 @@ describe('UserService', () => {
     u.receiveFeedbackNotifications = false;
     u.receiveTaskNotifications = false;
 
-    const expectedUsers: User[] = [u];
-
-    userService.query().subscribe((users) => expect(users).toEqual(expectedUsers, 'expected users'));
+    userService.query().subscribe((users) => {
+      expect(users).toHaveLength(1);
+      expect(users[0]).toMatchObject({
+        id: 1,
+        firstName: 'Jake',
+        lastName: 'renzella',
+        email: 'jake@jake.jake',
+        displayPeerProgress: false,
+      });
+    });
 
-    const req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+    const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
       expect(request.url).toEqual('http://localhost:3000/api/users/');
       expect(request.method).toBe('GET');
       return true;
     });
-    req.flush(u);
-    tick();
-  }));
+    req.flush({
+      id: 1,
+      last_name: 'renzella',
+      first_name: 'Jake',
+      nickname: 'jake',
+      has_run_first_time_setup: false,
+      email: 'jake@jake.jake',
+      student_id: '1',
+      username: 'test',
+      opt_in_to_research: true,
+      receive_portfolio_notifications: false,
+      receive_feedback_notifications: false,
+      receive_task_notifications: false,
+      display_peer_progress: false,
+    });
+  });
 
-  it('should create a new user', fakeAsync(() => {
+  it('serialises the peer progress display preference when updating a profile', () => {
     const user = new User();
     user.id = 1;
+    user.displayPeerProgress = false;
+
+    userService.update(user).subscribe();
+
+    const req = httpMock.expectOne('http://localhost:3000/api/users/1');
+    expect(req.request.method).toBe('PUT');
+    expect(req.request.body).toMatchObject({
+      user: {display_peer_progress: false},
+    });
+    req.flush({id: 1, display_peer_progress: false});
+  });
+
+  it('updates only the account theme preference and maps its server timestamp', () => {
+    const user = new User();
+    user.id = 1;
+
+    userService.updateThemePreference(user, 'dark').subscribe((updatedUser) => {
+      expect(updatedUser.themePreference).toBe('dark');
+      expect(updatedUser.themePreferenceUpdatedAt).toBe('2026-09-01T01:02:03Z');
+    });
+
+    const req = httpMock.expectOne('http://localhost:3000/api/users/1');
+    expect(req.request.method).toBe('PUT');
+    expect(req.request.body).toEqual({user: {theme_preference: 'dark'}});
+    req.flush({
+      id: 1,
+      theme_preference: 'dark',
+      theme_preference_updated_at: '2026-09-01T01:02:03Z',
+    });
+  });
+
+  it('should create a new user', () => {
+    const user = new User();
     user.lastName = 'renzella';
     user.firstName = 'Jake';
     user.nickname = 'jake';
@@ -67,43 +128,57 @@ describe('UserService', () => {
     user.receiveTaskNotifications = false;
 
     userService.create(user).subscribe((result) => {
-      expect(result).toEqual(user, 'expected users');
+      expect(result).toMatchObject({
+        id: 1,
+        firstName: 'Jake',
+        lastName: 'renzella',
+        email: 'jake@jake.jake',
+      });
     });
 
-    const expectedUser = user;
-    expectedUser.id = 1;
-
-    const req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+    const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
       expect(request.url).toEqual('http://localhost:3000/api/users/');
       expect(request.method).toBe('POST');
 
       return true;
     });
-    req.flush(expectedUser);
-    tick();
-  }));
-
-  xit('should delete a user', fakeAsync(() => {
-    // let user = new User();
-    // user.updateFromJson({
-    //   name: 'jake', lastName: 'renzella', firstName: 'Jake', nickname: 'jake',
-    //   systemRole: 'admin', hasRunFirstTimeSetup: false, email: 'jake@jake.jake',
-    //   student_id: '1', username: 'test', optInToResearch: true, receivePortfolioNotifications: false,
-    //   receiveFeedbackNotifications: false, receiveTaskNotifications: false
-    // });
-    // userService.delete(1).subscribe(
-    //   result => expect(result).toEqual(user, 'expected users')
-    // );
-    // const req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
-    //   expect(request.url).toEqual('http://localhost:3000/api/users/1');
-    //   expect(request.method).toBe('DELETE');
-    //   return true;
-    // });
-    // req.flush(user);
-    // tick();
-  }));
-
-  it('should update a User', fakeAsync(() => {
+    req.flush({
+      id: 1,
+      last_name: 'renzella',
+      first_name: 'Jake',
+      nickname: 'jake',
+      has_run_first_time_setup: false,
+      email: 'jake@jake.jake',
+      student_id: '1',
+      username: 'test',
+      opt_in_to_research: true,
+      receive_portfolio_notifications: false,
+      receive_feedback_notifications: false,
+      receive_task_notifications: false,
+    });
+  });
+
+  // it.skip('should delete a user', () => {
+  // let user = new User();
+  // user.updateFromJson({
+  //   name: 'jake', lastName: 'renzella', firstName: 'Jake', nickname: 'jake',
+  //   systemRole: 'admin', hasRunFirstTimeSetup: false, email: 'jake@jake.jake',
+  //   student_id: '1', username: 'test', optInToResearch: true, receivePortfolioNotifications: false,
+  //   receiveFeedbackNotifications: false, receiveTaskNotifications: false
+  // });
+  // userService.delete(1).subscribe(
+  //   result => expect(result).toEqual(user, 'expected users')
+  // );
+  // const req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+  //   expect(request.url).toEqual('http://localhost:3000/api/users/1');
+  //   expect(request.method).toBe('DELETE');
+  //   return true;
+  // });
+  // req.flush(user);
+  // tick();
+  // });
+
+  it('should update a User', () => {
     const u = new User();
     u.id = 1;
     u.lastName = 'renzella';
@@ -118,37 +193,45 @@ describe('UserService', () => {
     u.receiveFeedbackNotifications = false;
     u.receiveTaskNotifications = false;
 
-    userService.update(u).subscribe((result) => {
-      expect(result.firstName).toBe(u.firstName);
-    }, fail);
-
-    let req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
-      expect(request.url).toEqual('http://localhost:3000/api/users/1');
-      expect(request.method).toBe('PUT');
-      return true;
-    });
-    req.flush(u);
-    tick();
-
-    u.firstName = 'andrew';
+    // The API answers a PUT with the saved user as snake_case JSON. Flush a
+    // literal in that shape whose values differ from the local `u`, so the
+    // assertions only pass if the snake_case -> camelCase mapping ran. Flushing
+    // `u` back, as this test used to, could not tell a working mapping from a
+    // broken one because both sides already held the same camelCase values.
     userService.update(u).subscribe({
       next: (result) => {
         expect(result.firstName).toBe('andrew');
+        expect(result.lastName).toBe('cain');
+        expect(result.nickname).toBe('andy');
+        expect(result.receiveTaskNotifications).toBe(true);
+      },
+      error: (error) => {
+        throw error;
       },
-      error: fail,
     });
 
-    req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+    const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
       expect(request.url).toEqual('http://localhost:3000/api/users/1');
       expect(request.method).toBe('PUT');
       return true;
     });
+    req.flush({
+      id: 1,
+      first_name: 'andrew',
+      last_name: 'cain',
+      nickname: 'andy',
+      email: 'jake@jake.jake',
+      student_id: '1',
+      username: 'test',
+      opt_in_to_research: true,
+      has_run_first_time_setup: false,
+      receive_portfolio_notifications: false,
+      receive_feedback_notifications: false,
+      receive_task_notifications: true,
+    });
+  });
 
-    req.flush(u);
-    tick();
-  }));
-
-  it('should cache the result of a get request', fakeAsync(() => {
+  it('should cache the result of a get request', () => {
     const user = new User();
     user.id = 1;
     user.lastName = 'renzella';
@@ -163,9 +246,9 @@ describe('UserService', () => {
     user.receiveFeedbackNotifications = false;
     user.receiveTaskNotifications = false;
 
-    userService.get(1).subscribe((data) => {});
+    userService.get(1).subscribe();
 
-    const req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+    const req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
       expect(request.url).toEqual('http://localhost:3000/api/users/1');
       expect(request.method).toBe('GET');
       return true;
@@ -173,17 +256,15 @@ describe('UserService', () => {
     const user2 = user;
     user2.id = 1;
     req.flush(user2);
-    tick();
 
-    userService.get(1).subscribe((data) => {});
+    userService.get(1).subscribe();
 
-    httpMock.expectNone((request: HttpRequest<any>): boolean => {
+    httpMock.expectNone((_request: HttpRequest<object>): boolean => {
       return true;
     });
-    tick();
-  }));
+  });
 
-  it('should cache fetch/get', fakeAsync(() => {
+  it('should cache fetch/get', () => {
     let user = new User();
     user.id = 1;
     user.lastName = 'renzella';
@@ -203,7 +284,7 @@ describe('UserService', () => {
       user = data;
     });
 
-    let req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+    let req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
       expect(request.url).toEqual('http://localhost:3000/api/users/1');
       expect(request.method).toBe('GET');
       return true;
@@ -213,9 +294,8 @@ describe('UserService', () => {
     Object.keys(user).forEach((key) => (user2[key] = user[key]));
     user2.id = 1;
     req.flush(user2);
-    tick();
 
-    let user3;
+    let user3: User;
 
     // 1 request here
     userService.fetch(1).subscribe((data) => {
@@ -223,7 +303,7 @@ describe('UserService', () => {
       user3 = data;
     });
 
-    req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
+    req = httpMock.expectOne((request: HttpRequest<object>): boolean => {
       expect(request.url).toEqual('http://localhost:3000/api/users/1');
       expect(request.method).toBe('GET');
       return true;
@@ -233,10 +313,10 @@ describe('UserService', () => {
     Object.keys(user2).forEach((key) => (user4[key] = user2[key]));
     user4.firstName = 'fred';
     req.flush(user4);
+    expect(user3).toBe(user);
 
-    httpMock.expectNone((request: HttpRequest<any>): boolean => {
+    httpMock.expectNone((_request: HttpRequest<object>): boolean => {
       return true;
     });
-    tick();
-  }));
+  });
 });
diff --git a/src/app/api/services/staff-note.service.ts b/src/app/api/services/staff-note.service.ts
new file mode 100644
index 0000000000..13e4ce5912
--- /dev/null
+++ b/src/app/api/services/staff-note.service.ts
@@ -0,0 +1,123 @@
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {EventEmitter, Injectable} from '@angular/core';
+import {Observable, tap} from 'rxjs';
+import {Project, ProjectService, UserService} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {StaffNote} from '../models/staff-note';
+
+@Injectable()
+export class StaffNoteService extends CachedEntityService<StaffNote> {
+  public readonly staffNoteAdded$: EventEmitter<StaffNote> = new EventEmitter();
+
+  protected readonly endpointFormat = 'projects/:projectId:/staff_notes/:id:';
+
+  constructor(
+    httpClient: HttpClient,
+    private userService: UserService,
+    private projectService: ProjectService,
+  ) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys('id', 'note', 'createdAt', 'updatedAt', 'replyToId', {
+      keys: ['user', 'user_id'],
+      toEntityFn: (data: object, key: string, staffNote: StaffNote) => {
+        const userRole = staffNote.project.unit.staff.find((s) => s.user.id === data['user_id']);
+
+        // const user = this.userService.cache.getOrCreate(data[key]?.id, userService, data[key]);
+        return userRole.user;
+      },
+    });
+
+    this.mapping.addJsonKey('note', 'createdAt', 'updatedAt');
+  }
+
+  public createInstanceFrom(json: object, other?: Project): StaffNote {
+    return new StaffNote(other);
+  }
+
+  public addNote(project: Project, text: string, originalNote: StaffNote): Observable<StaffNote> {
+    const pathId = {
+      projectId: project.id,
+    };
+
+    const body: FormData = new FormData();
+    if (originalNote) {
+      body.append('reply_to_id', originalNote?.id.toString());
+    }
+
+    body.append('note', text);
+
+    const opts: RequestOptions<StaffNote> = {endpointFormat: this.endpointFormat};
+    opts.cache = project.staffNoteCache;
+    opts.body = body;
+    opts.constructorParams = project;
+
+    return this.create(pathId, opts).pipe(
+      tap((note: StaffNote) => {
+        this.staffNoteAdded$.emit(note);
+      }),
+    );
+  }
+
+  public updateStaffNoteReplies(staffNotes: readonly StaffNote[]) {
+    for (const note of staffNotes) {
+      if (note.replyToId) {
+        const repliedTo = staffNotes.find((n) => n.id === note.replyToId);
+        if (repliedTo) {
+          note.replyTo = repliedTo;
+        } else {
+          // Remove deleted replies
+          note.replyTo = null;
+        }
+      }
+    }
+  }
+
+  public updateNote(project: Project, note: StaffNote, text: string): Observable<StaffNote> {
+    const pathId = {
+      projectId: project.id,
+      id: note.id,
+    };
+
+    const body: FormData = new FormData();
+    body.append('note', text);
+
+    const opts: RequestOptions<StaffNote> = {endpointFormat: this.endpointFormat};
+    opts.cache = project.staffNoteCache;
+    opts.body = body;
+    opts.constructorParams = project;
+
+    return this.put(pathId, opts).pipe(
+      tap((_note: StaffNote) => {
+        note.note = text;
+      }),
+    );
+  }
+
+  public loadStaffNotes(project: Project, useFetch: boolean = false): Observable<StaffNote[]> {
+    const options: RequestOptions<StaffNote> = {
+      endpointFormat: this.endpointFormat,
+      cache: project.staffNoteCache,
+      sourceCache: project.staffNoteCache,
+      cacheBehaviourOnGet: 'cacheQuery',
+      constructorParams: project,
+    };
+
+    if (useFetch) {
+      return super.fetchAll(
+        {
+          projectId: project.id,
+        },
+        options,
+      );
+    } else {
+      return super.query(
+        {
+          projectId: project.id,
+        },
+        options,
+      );
+    }
+  }
+}
diff --git a/src/app/api/services/submission-history.service.ts b/src/app/api/services/submission-history.service.ts
new file mode 100644
index 0000000000..e65d1053ce
--- /dev/null
+++ b/src/app/api/services/submission-history.service.ts
@@ -0,0 +1,44 @@
+import {EntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {SubmissionHistory} from 'src/app/api/models/submission-history';
+import {Task} from 'src/app/api/models/task';
+import API_URL from 'src/app/config/constants/apiUrl';
+
+@Injectable()
+export class SubmissionHistoryService extends EntityService<SubmissionHistory> {
+  protected readonly endpointFormat =
+    'projects/:project_id:/task_def_id/:td_id:/submission_histories/:id:';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'taskId',
+      'createdAt',
+      'hasSubmissionFiles',
+      'overseerAssessmentId',
+      {
+        keys: ['timestamp', 'submission_timestamp'],
+        toEntityFn: (data) => new Date(Number(data['submission_timestamp']) * 1000),
+      },
+      ['timestampString', 'submission_timestamp'],
+    );
+  }
+
+  public createInstanceFrom(_json: object, task?: Task): SubmissionHistory {
+    return new SubmissionHistory(task);
+  }
+
+  public queryForTask(task: Task): Observable<SubmissionHistory[]> {
+    return this.query(
+      {
+        project_id: task.project.id,
+        td_id: task.definition.id,
+      },
+      {constructorParams: task},
+    );
+  }
+}
diff --git a/src/app/api/services/task-comment.service.ts b/src/app/api/services/task-comment.service.ts
index 9e646be77d..f5dd11e222 100644
--- a/src/app/api/services/task-comment.service.ts
+++ b/src/app/api/services/task-comment.service.ts
@@ -1,75 +1,90 @@
-import { Task, TaskComment, UserService } from 'src/app/api/models/doubtfire-model';
-import { EventEmitter, Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { CachedEntityService } from 'ngx-entity-service';
-import { DiscussionComment } from '../models/task-comment/discussion-comment';
-import { ExtensionComment } from '../models/task-comment/extension-comment';
-import { RequestOptions } from 'ngx-entity-service/lib/request-options';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
-import { EmojiService } from 'src/app/common/services/emoji.service';
-import { MappingFunctions } from './mapping-fn';
-import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service';
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {EventEmitter, Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {tap} from 'rxjs/operators';
+import {
+  ScormComment,
+  Task,
+  TaskComment,
+  TestAttemptService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {EmojiService} from 'src/app/common/services/emoji.service';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DiscussionComment} from '../models/task-comment/discussion-comment';
+import {ExtensionComment} from '../models/task-comment/extension-comment';
+import {ScormExtensionComment} from '../models/task-comment/scorm-extension-comment';
+import {MappingFunctions} from './mapping-fn';
 
 @Injectable()
 export class TaskCommentService extends CachedEntityService<TaskComment> {
   public readonly commentAdded$: EventEmitter<TaskComment> = new EventEmitter();
 
-  private readonly commentEndpointFormat = 'projects/:projectId:/task_def_id/:taskDefinitionId:/comments/:id:';
-  private readonly discussionEndpointFormat = 'projects/:projectId:/task_def_id/:taskDefinitionId:/discussion_comments';
+  private readonly commentEndpointFormat =
+    'projects/:projectId:/task_def_id/:taskDefinitionId:/comments/:id:';
+  private readonly discussionEndpointFormat =
+    'projects/:projectId:/task_def_id/:taskDefinitionId:/discussion_comments';
   private readonly extensionGrantEndpointFormat =
     'projects/:projectId:/task_def_id/:taskDefinitionId:/assess_extension/:id:';
   private readonly requestExtensionEndpointFormat =
     'projects/:projectId:/task_def_id/:taskDefinitionId:/request_extension';
-  private readonly discussionCommentReplyEndpointFormat = "/projects/:project_id:/task_def_id/:task_definition_id:/comments/:task_comment_id:/discussion_comment/reply";
-  private readonly getDiscussionCommentPromptEndpointFormat = "/projects/:project_id:/task_def_id/:task_definition_id:/comments/:task_comment_id:/discussion_comment/prompt_number/:prompt_number:";
-
+  private readonly scormExtensionGrantEndpointFormat =
+    'projects/:projectId:/task_def_id/:taskDefinitionId:/assess_scorm_extension/:id:';
+  private readonly scormRequestExtensionEndpointFormat =
+    'projects/:projectId:/task_def_id/:taskDefinitionId:/request_scorm_extension';
+  private readonly discussionCommentReplyEndpointFormat =
+    '/projects/:project_id:/task_def_id/:task_definition_id:/comments/:task_comment_id:/discussion_comment/reply';
+  private readonly getDiscussionCommentPromptEndpointFormat =
+    '/projects/:project_id:/task_def_id/:task_definition_id:/comments/:task_comment_id:/discussion_comment/prompt_number/:prompt_number:';
 
   protected readonly endpointFormat = this.commentEndpointFormat;
 
   constructor(
-    httpClient: HttpClient,
+    private apiHttpClient: HttpClient,
     private emojiService: EmojiService,
     private userService: UserService,
-    private downloader: FileDownloaderService
+    private downloader: FileDownloaderService,
+    private testAttemptService: TestAttemptService,
   ) {
-    super(httpClient, API_URL);
+    super(apiHttpClient, API_URL);
 
     this.mapping.addKeys(
       'id',
       {
         keys: 'author',
         toEntityFn: (data: object, key: string, comment: TaskComment) => {
-          const user = this.userService.cache.getOrCreate(data[key].id, userService, data[key]);
-          comment.initials = `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();
+          const user = this.userService.cache.getOrCreate(data[key]?.id, userService, data[key]);
+          comment.initials =
+            `${user.preferredName[0] ?? ''}${user.lastName?.[0] ?? ''}`.toUpperCase();
           return user;
-        }
+        },
       },
       {
         keys: 'recipient',
-        toEntityFn: (data: object, key: string, comment: TaskComment) => {
-          return this.userService.cache.getOrCreate(data[key].id, userService, data[key]);
-        }
+        toEntityFn: (data: object, key: string, _comment: TaskComment) => {
+          return this.userService.cache.getOrCreate(data[key]?.id, userService, data[key]);
+        },
       },
       'recipientReadTime',
       'replyToId',
       'isNew',
       {
         keys: ['text', 'comment'],
-        toEntityFn: (data, key, entity) => {
+        toEntityFn: (data, _key, _entity) => {
           return this.emojiService.colonsToNative(data['comment']);
-        }
+        },
       },
       {
         keys: 'createdAt',
-        toEntityFn: MappingFunctions.mapDate
+        toEntityFn: MappingFunctions.mapDate,
       },
       {
         keys: 'type',
-        toEntityOp: (data: object, key: string, comment:TaskComment) => {
+        toEntityOp: (data: object, key: string, comment: TaskComment) => {
           comment.commentType = data[key];
-        }
+        },
       },
       // Extension comments
       'assessed',
@@ -85,24 +100,49 @@ export class TaskCommentService extends CachedEntityService<TaskComment> {
       'status',
       'numberOfPrompts',
       'timeDiscussionComplete',
-      'timeDiscussionStarted'
-    );
+      'timeDiscussionStarted',
 
-    this.mapping.addJsonKey(
-      'granted',
+      // Scorm Comments
+      {
+        keys: 'testAttempt',
+        toEntityFn: (data: object, key: string, comment: ScormComment) => {
+          const testAttempt = this.testAttemptService.cache.getOrCreate(
+            data[key].id,
+            testAttemptService,
+            data[key],
+            {
+              constructorParams: comment.task,
+            },
+          );
+          return testAttempt;
+        },
+      },
 
+      // Scorm Extension Comments
+      ['taskScormExtensions', 'scorm_extensions'],
+      'overseerAssessmentId',
+      'overseerPassedSteps',
+      'overseerTotalSteps',
+      'overseerInProgress',
+      'overseerStatus',
     );
+
+    this.mapping.addJsonKey('granted');
   }
 
   /**
    * Create a Task Comment - use the type to determine the exact object type to return.
    */
-  public createInstanceFrom(json: any, other?: any): TaskComment {
+  public createInstanceFrom(json: {type?: string}, other?: Task): TaskComment {
     switch (json.type) {
       case 'discussion':
         return new DiscussionComment(other);
       case 'extension':
         return new ExtensionComment(other);
+      case 'scorm':
+        return new ScormComment(other);
+      case 'scorm_extension':
+        return new ScormExtensionComment(other);
       default:
         return new TaskComment(other);
     }
@@ -115,13 +155,17 @@ export class TaskCommentService extends CachedEntityService<TaskComment> {
    * @param other Contains the related Tasks used to construct the TaskComments
    * @param options
    */
-  public query(pathIds?: object, other?: object, options?: RequestOptions<TaskComment>): Observable<TaskComment[]> {
+  public query(
+    pathIds?: object,
+    other?: object,
+    options?: RequestOptions<TaskComment>,
+  ): Observable<TaskComment[]> {
     return super.query(pathIds, options).pipe(
-      tap((result) => {
+      tap((_result) => {
         // Access the task and set the number of new comments to 0 - they are now read on the server
-        const task = other as any; //TODO: change to Task object
+        const task = other as Task;
         task.numNewComments = 0;
-      })
+      }),
     );
   }
 
@@ -130,7 +174,7 @@ export class TaskCommentService extends CachedEntityService<TaskComment> {
     data: string | File | Blob,
     commentType: string,
     originalComment?: TaskComment,
-    prompts?: Blob[]
+    prompts?: Blob[],
   ): Observable<TaskComment> {
     const pathId = {
       projectId: task.project.id,
@@ -142,10 +186,10 @@ export class TaskCommentService extends CachedEntityService<TaskComment> {
       body.append('reply_to_id', originalComment?.id.toString());
     }
 
-    const opts: RequestOptions<TaskComment> = { endpointFormat: this.commentEndpointFormat };
+    const opts: RequestOptions<TaskComment> = {endpointFormat: this.commentEndpointFormat};
 
     // Based on the comment type - add to the body and configure the end point
-    if (commentType === 'text') {
+    if (commentType === 'text' || commentType === 'scorm') {
       body.append('comment', data);
     } else if (commentType === 'discussion') {
       opts.endpointFormat = this.discussionEndpointFormat;
@@ -164,7 +208,7 @@ export class TaskCommentService extends CachedEntityService<TaskComment> {
       tap((tc: TaskComment) => {
         task.refreshCommentData();
         this.commentAdded$.emit(tc);
-      })
+      }),
     );
   }
 
@@ -180,39 +224,101 @@ export class TaskCommentService extends CachedEntityService<TaskComment> {
         projectId: extension.project.id,
         taskDefinitionId: extension.task.definition.id,
       },
-      opts
+      opts,
     );
   }
 
-  public requestExtension(reason: string, weeksRequested: number, task: any): Observable<TaskComment> {
+  public editComment(comment: TaskComment, text: string): Observable<TaskComment> {
+    const opts: RequestOptions<TaskComment> = {
+      endpointFormat: this.commentEndpointFormat,
+      entity: comment,
+      body: {
+        comment: text,
+      },
+      cache: comment.task.commentCache,
+      constructorParams: comment.task,
+    };
+
+    return super
+      .update(
+        {
+          id: comment.id,
+          projectId: comment.project.id,
+          taskDefinitionId: comment.task.definition.id,
+        },
+        opts,
+      )
+      .pipe(
+        tap((_updatedComment: TaskComment) => {
+          comment.task.refreshCommentData();
+        }),
+      );
+  }
+
+  public requestExtension(
+    reason: string,
+    weeksRequested: number,
+    task: Task,
+  ): Observable<TaskComment> {
     const opts: RequestOptions<TaskComment> = {
       endpointFormat: this.requestExtensionEndpointFormat,
       body: {
         comment: reason,
         weeks_requested: weeksRequested,
       },
-      cache: task.commentCache
+      cache: task.commentCache,
     };
     return super.create(
       {
         projectId: task.project.id,
         taskDefinitionId: task.definition.id,
       },
-      opts
+      opts,
     );
   }
 
-  public postDiscussionReply(comment: TaskComment, replyAudio: Blob): Observable<TaskComment>{
-    const form = new FormData();
-    const pathIds = {
-      project_id: comment.project.id,
-      task_definition_id: comment.task.id,
-      task_comment_id: comment.id
+  public assessScormExtension(extension: ScormExtensionComment): Observable<TaskComment> {
+    const opts: RequestOptions<TaskComment> = {
+      endpointFormat: this.scormExtensionGrantEndpointFormat,
+      entity: extension,
+    };
+
+    return super.update(
+      {
+        id: extension.id,
+        projectId: extension.project.id,
+        taskDefinitionId: extension.task.definition.id,
+      },
+      opts,
+    );
+  }
+
+  public requestScormExtension(reason: string, task: Task): Observable<TaskComment> {
+    const opts: RequestOptions<TaskComment> = {
+      endpointFormat: this.scormRequestExtensionEndpointFormat,
+      body: {
+        comment: reason,
+      },
+      cache: task.commentCache,
     };
+    return super.create(
+      {
+        projectId: task.project.id,
+        taskDefinitionId: task.definition.id,
+      },
+      opts,
+    );
+  }
+
+  public postDiscussionReply(comment: TaskComment, replyAudio: Blob): Observable<void> {
+    const form = new FormData();
 
     form.append('attachment', replyAudio);
 
-    return this.create(pathIds, {body: form, cache: comment.task.commentCache});
+    return this.apiHttpClient.post<void>(
+      `${API_URL}/projects/${comment.project.id}/task_def_id/${comment.task.definition.id}/comments/${comment.id}/discussion_comment/reply`,
+      form,
+    );
   }
 
   // public getDiscussionComment() ->
diff --git a/src/app/api/services/task-definition.service.spec.ts b/src/app/api/services/task-definition.service.spec.ts
new file mode 100644
index 0000000000..986d871fe3
--- /dev/null
+++ b/src/app/api/services/task-definition.service.spec.ts
@@ -0,0 +1,50 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {Unit} from '../models/unit';
+import {TaskDefinitionService} from './task-definition.service';
+
+describe('TaskDefinitionService grade due-date mapping', () => {
+  let originalTimezone: string | undefined;
+
+  beforeEach(() => {
+    originalTimezone = process.env.TZ;
+    process.env.TZ = 'America/New_York';
+  });
+
+  afterEach(() => {
+    if (originalTimezone === undefined) {
+      delete process.env.TZ;
+    } else {
+      process.env.TZ = originalTimezone;
+    }
+  });
+
+  it('preserves nested grade dates serialized as UTC-midnight timestamps', () => {
+    const service = new TaskDefinitionService(null, null, null, null);
+    const taskDefinition = service.buildInstance(
+      {
+        grade_due_dates: [
+          {
+            target_grade: 1,
+            target_due_date: '2026-09-15T00:00:00.000Z',
+            start_date: '2026-09-08T00:00:00.000Z',
+          },
+        ],
+      },
+      {constructorParams: new Unit()},
+    );
+
+    const [gradeDate] = taskDefinition.gradeDueDates;
+    expect([
+      gradeDate.targetDueDate.getFullYear(),
+      gradeDate.targetDueDate.getMonth(),
+      gradeDate.targetDueDate.getDate(),
+      gradeDate.targetDueDate.getHours(),
+    ]).toEqual([2026, 8, 15, 0]);
+    expect([
+      gradeDate.startDate.getFullYear(),
+      gradeDate.startDate.getMonth(),
+      gradeDate.startDate.getDate(),
+      gradeDate.startDate.getHours(),
+    ]).toEqual([2026, 8, 8, 0]);
+  });
+});
diff --git a/src/app/api/services/task-definition.service.ts b/src/app/api/services/task-definition.service.ts
index 13a1dd2797..1cb9c6de12 100644
--- a/src/app/api/services/task-definition.service.ts
+++ b/src/app/api/services/task-definition.service.ts
@@ -1,17 +1,32 @@
-import { CachedEntityService } from 'ngx-entity-service';
-import { TaskDefinition, Unit } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
-import { MappingFunctions } from './mapping-fn';
-import { AppInjector } from 'src/app/app-injector';
-import { Observable } from 'rxjs';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {
+  LearningOutcomeService,
+  TaskDefinition,
+  TaskStatusEnum,
+  Unit,
+} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {SidekiqJob} from '../models/sidekiq-job';
+import {TaskPrerequisite} from '../models/task-prerequisite';
+import {MappingFunctions} from './mapping-fn';
+import {OverseerStepService} from './overseer-step.service';
+import {TaskPrerequisiteService} from './task-prerequisite.service';
 
 @Injectable()
 export class TaskDefinitionService extends CachedEntityService<TaskDefinition> {
   protected readonly endpointFormat = 'units/:unitId:/task_definitions/:id:';
 
-  constructor(httpClient: HttpClient) {
+  constructor(
+    httpClient: HttpClient,
+    private learningOutcomeService: LearningOutcomeService,
+    private taskPrerequisiteService: TaskPrerequisiteService,
+    private overseerStepService: OverseerStepService,
+  ) {
     super(httpClient, API_URL);
 
     this.mapping.addKeys(
@@ -21,7 +36,10 @@ export class TaskDefinitionService extends CachedEntityService<TaskDefinition> {
       'description',
       'weighting',
       'targetGrade',
-      'mossLanguage',
+      'similarityLanguage',
+      'hasJplagReport',
+      'assessInPortfolioOnly',
+      'requiresDiscussion',
       {
         keys: 'targetDate',
         toEntityFn: MappingFunctions.mapDateToEndOfDay,
@@ -39,39 +57,48 @@ export class TaskDefinitionService extends CachedEntityService<TaskDefinition> {
       },
       {
         keys: 'uploadRequirements',
-        toJsonFn: (taskDef: TaskDefinition, key: string) => {
+        toJsonFn: (taskDef: TaskDefinition, _key: string) => {
           return JSON.stringify(
-            taskDef.uploadRequirements.map((upreq) => {
+            taskDef.uploadRequirements?.map((upreq) => {
               return {
                 key: upreq.key,
                 name: upreq.name,
                 type: upreq.type,
                 tii_check: upreq.tiiCheck,
                 tii_pct: upreq.tiiPct,
+                submission_history: upreq.submissionHistory,
               };
-            })
+            }),
           );
         },
-        toEntityFn: (data: object, key: string, taskDef: TaskDefinition, params?: any) => {
+        toEntityFn: (data: object, key: string) => {
           return (
-            data[key] as Array<{ key: string; name: string; type: string; tii_check: boolean; tii_pct: number }>
-          ).map((upreq) => {
+            data[key] as {
+              key: string;
+              name: string;
+              type: string;
+              tii_check: boolean;
+              tii_pct: number;
+              submission_history: boolean;
+            }[]
+          )?.map((upreq) => {
             return {
               key: upreq.key,
               name: upreq.name,
               type: upreq.type,
               tiiCheck: upreq.tii_check,
               tiiPct: upreq.tii_pct,
+              submissionHistory: upreq.submission_history,
             };
           });
         },
       },
       {
         keys: ['tutorialStream', 'tutorial_stream_abbr'],
-        toEntityFn: (data: object, key: string, taskDef: TaskDefinition, params?: any) => {
+        toEntityFn: (data: object, key: string, taskDef: TaskDefinition) => {
           return taskDef.unit.tutorialStreamsCache.get(data[key]);
         },
-        toJsonFn: (taskDef: TaskDefinition, key: string) => {
+        toJsonFn: (taskDef: TaskDefinition, _key: string) => {
           return taskDef.tutorialStream?.abbreviation;
         },
       },
@@ -79,36 +106,101 @@ export class TaskDefinitionService extends CachedEntityService<TaskDefinition> {
       'restrictStatusUpdates',
       {
         keys: ['groupSet', 'group_set_id'],
-        toEntityFn: (data: object, key: string, taskDef: TaskDefinition, params?: any) => {
+        toEntityFn: (data: object, key: string, taskDef: TaskDefinition) => {
           if (data[key]) {
             return taskDef.unit.groupSetsCache.get(data[key]);
           } else {
             return data[key];
           }
         },
-        toJsonFn: (taskDef: TaskDefinition, key: string) => {
+        toJsonFn: (taskDef: TaskDefinition, _key: string) => {
           return taskDef.groupSet?.id;
         },
       },
       'hasTaskSheet',
       'hasTaskResources',
       'hasTaskAssessmentResources',
+      'hasTaskAssessmentScript',
+      'scormEnabled',
+      'hasScormData',
+      'scormAllowReview',
+      'scormBypassTest',
+      'scormTimeDelayEnabled',
+      'scormAttemptLimit',
       'isGraded',
       'maxQualityPts',
       'overseerImageId',
-      'assessmentEnabled'
+      'assessmentEnabled',
+      'discussionPromptsCount',
+      {
+        keys: 'ilos',
+        toEntityOp: (data: object, key: string, taskDefinition: TaskDefinition) => {
+          data[key]?.forEach((ilo) => {
+            taskDefinition.learningOutcomesCache.getOrCreate(
+              ilo['id'],
+              this.learningOutcomeService,
+              ilo,
+            );
+          });
+        },
+      },
+      'useResourcesForJplagBaseCode',
+      'lockAssessmentsToTutorialStream',
+      {
+        keys: 'overseerSteps',
+        toEntityOp: (data: object, key: string, taskDefinition: TaskDefinition) => {
+          taskDefinition.overseerStepsCache.clear();
+          data[key]?.forEach((overseerStep) => {
+            taskDefinition.overseerStepsCache.getOrCreate(
+              overseerStep['id'],
+              this.overseerStepService,
+              overseerStep,
+              {
+                constructorParams: taskDefinition,
+              },
+            );
+          });
+        },
+      },
+      'overseerResourceFiles',
+      {
+        keys: ['gradeDueDates', 'grade_due_dates'],
+        toEntityFn: (data: object, key: string) => {
+          return (data[key] ?? []).map((gradeDate) => ({
+            targetGrade: gradeDate.target_grade,
+            targetDueDate: gradeDate.target_due_date
+              ? MappingFunctions.mapCivilDateToDay(gradeDate, 'target_due_date', null)
+              : undefined,
+            startDate: gradeDate.start_date
+              ? MappingFunctions.mapCivilDateToDay(gradeDate, 'start_date', null)
+              : undefined,
+          }));
+        },
+        toJsonFn: (taskDefinition: TaskDefinition) => {
+          return taskDefinition.gradeDueDates.map((gradeDate) => ({
+            target_grade: gradeDate.targetGrade,
+            target_due_date: gradeDate.targetDueDate
+              ? MappingFunctions.mapDayToJson(gradeDate, 'targetDueDate')
+              : undefined,
+            start_date: gradeDate.startDate
+              ? MappingFunctions.mapDayToJson(gradeDate, 'startDate')
+              : undefined,
+          }));
+        },
+      },
     );
 
     this.mapping.mapAllKeysToJsonExcept(
       'id',
       'hasTaskSheet',
       'hasTaskResources',
-      'hasTaskAssessmentResources'
+      'hasTaskAssessmentResources',
+      'hasScormData',
     );
   }
 
-  public override createInstanceFrom(json: object, other?: any): TaskDefinition {
-    return new TaskDefinition(other as Unit);
+  public override createInstanceFrom(_json: object, other?: Unit): TaskDefinition {
+    return new TaskDefinition(other);
   }
 
   public uploadTaskSheet(taskDefinition: TaskDefinition, file: File): Observable<boolean> {
@@ -120,12 +212,58 @@ export class TaskDefinitionService extends CachedEntityService<TaskDefinition> {
   public uploadTaskResources(taskDefinition: TaskDefinition, file: File): Observable<boolean> {
     const formData = new FormData();
     formData.append('file', file);
-    return AppInjector.get(HttpClient).post<boolean>(taskDefinition.taskResourcesUploadUrl, formData);
+    return AppInjector.get(HttpClient).post<boolean>(
+      taskDefinition.taskResourcesUploadUrl,
+      formData,
+    );
+  }
+
+  public uploadOverseerResources(taskDefinition: TaskDefinition, file: File): Observable<string[]> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return AppInjector.get(HttpClient).post<string[]>(
+      taskDefinition.taskOverseerResourcesUploadUrl,
+      formData,
+    );
   }
 
-  public uploadOverseerResources(taskDefinition: TaskDefinition, file: File): Observable<boolean> {
+  public uploadScormData(taskDefinition: TaskDefinition, file: File): Observable<boolean> {
     const formData = new FormData();
     formData.append('file', file);
-    return AppInjector.get(HttpClient).post<boolean>(taskDefinition.taskAssessmentResourcesUploadUrl, formData);
+    return AppInjector.get(HttpClient).post<boolean>(taskDefinition.scormDataUploadUrl, formData);
+  }
+
+  public addTaskPrerequisite(
+    taskDefinition: TaskDefinition,
+    prerequsite: TaskDefinition,
+  ): Observable<TaskPrerequisite> {
+    return AppInjector.get(HttpClient).post<TaskPrerequisite>(taskDefinition.taskPrerequisiteUrl, {
+      task_def_id: taskDefinition.id,
+      prerequisite_id: prerequsite.id,
+    });
+  }
+
+  public updateTaskPrerequisite(
+    taskPrerequisiteLink: TaskPrerequisite,
+    taskStatus: TaskStatusEnum,
+  ): Observable<boolean> {
+    return AppInjector.get(HttpClient).put<boolean>(
+      `${taskPrerequisiteLink.taskDefinition.taskPrerequisiteUrl}/${taskPrerequisiteLink.id}`,
+      {
+        task_status_required: taskStatus,
+      },
+    );
+  }
+
+  public zipSubmissionFiles(taskDefinition: TaskDefinition): Observable<SidekiqJob> {
+    const url = `${AppInjector.get(DoubtfireConstants).API_URL}/submission/units/${taskDefinition.unit.id}/task_definitions/${taskDefinition.id}/download_submissions/zip`;
+    const httpClient = AppInjector.get(HttpClient);
+    return httpClient.get<SidekiqJob>(url);
+  }
+
+  public zipSubmissionPdfs(taskDefinition: TaskDefinition): Observable<SidekiqJob> {
+    const url = `${AppInjector.get(DoubtfireConstants).API_URL}/submission/units/${taskDefinition.unit.id}/task_definitions/${taskDefinition.id}/student_pdfs/zip`;
+    const httpClient = AppInjector.get(HttpClient);
+    return httpClient.get<SidekiqJob>(url);
   }
 }
diff --git a/src/app/api/services/task-outcome-alignment.service.ts b/src/app/api/services/task-outcome-alignment.service.ts
index 061f14a91e..135df23d61 100644
--- a/src/app/api/services/task-outcome-alignment.service.ts
+++ b/src/app/api/services/task-outcome-alignment.service.ts
@@ -1,9 +1,8 @@
-import { HttpClient } from '@angular/common/http';
-import { CachedEntityService } from 'ngx-entity-service';
-import { Project, TaskOutcomeAlignment, Unit } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import API_URL from 'src/app/config/constants/apiURL';
-import { UnitTutorialsListComponent } from 'src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Project, TaskOutcomeAlignment, Unit} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class TaskOutcomeAlignmentService extends CachedEntityService<TaskOutcomeAlignment> {
@@ -22,9 +21,9 @@ export class TaskOutcomeAlignmentService extends CachedEntityService<TaskOutcome
           const unit = entity.unit;
           return unit.learningOutcomesCache.get(data[key]);
         },
-        toJsonFn: (entity: TaskOutcomeAlignment, key: string) => {
+        toJsonFn: (entity: TaskOutcomeAlignment, _key: string) => {
           return entity.learningOutcome.id;
-        }
+        },
       },
       {
         keys: ['taskDefinition', 'task_definition_id'],
@@ -32,9 +31,9 @@ export class TaskOutcomeAlignmentService extends CachedEntityService<TaskOutcome
           const unit = entity.unit;
           return unit.taskDef(data[key]);
         },
-        toJsonFn: (entity: TaskOutcomeAlignment, key: string) => {
+        toJsonFn: (entity: TaskOutcomeAlignment, _key: string) => {
           return entity.taskDefinition.id;
-        }
+        },
       },
       {
         keys: ['task', 'task_id'],
@@ -42,16 +41,16 @@ export class TaskOutcomeAlignmentService extends CachedEntityService<TaskOutcome
           const project = entity.project;
           return project.taskCache.get(data[key]);
         },
-        toJsonFn: (entity: TaskOutcomeAlignment, key: string) => {
+        toJsonFn: (entity: TaskOutcomeAlignment, _key: string) => {
           return entity.task?.id;
-        }
-      }
+        },
+      },
     );
 
     this.mapping.mapAllKeysToJsonExcept('id');
   }
 
-  public override createInstanceFrom(json: any, other?: any): TaskOutcomeAlignment {
-    return new TaskOutcomeAlignment(other as (Unit | Project));
+  public override createInstanceFrom(_json: object, other?: Unit | Project): TaskOutcomeAlignment {
+    return new TaskOutcomeAlignment(other);
   }
 }
diff --git a/src/app/api/services/task-prerequisite.service.ts b/src/app/api/services/task-prerequisite.service.ts
new file mode 100644
index 0000000000..b07bc060d0
--- /dev/null
+++ b/src/app/api/services/task-prerequisite.service.ts
@@ -0,0 +1,37 @@
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {TaskPrerequisite, TaskPrerequisiteData} from '../models/task-prerequisite';
+
+@Injectable()
+export class TaskPrerequisiteService extends CachedEntityService<TaskPrerequisite> {
+  protected readonly endpointFormat =
+    'units/:unitId:/task_definitions/:taskDefId:/prerequisites/:prerequisiteId:';
+
+  protected readonly unitEndpointFormat = 'units/:unitId:/task_prerequisites';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys('id', 'taskDefinitionId', 'prerequisiteId', 'taskStatus');
+
+    // this.mapping.mapAllKeysToJsonExcept('id', 'taskDefinitionId', 'prerequisiteId', 'taskStatus');
+    this.mapping.mapAllKeysToJsonExcept('id');
+  }
+
+  public override createInstanceFrom(json: TaskPrerequisiteData): TaskPrerequisite {
+    return new TaskPrerequisite(json);
+  }
+
+  public getUnitPrerequisites(unitId: number) {
+    return this.fetchAll(
+      {
+        unitId: unitId,
+      },
+      {
+        endpointFormat: this.unitEndpointFormat,
+      },
+    );
+  }
+}
diff --git a/src/app/api/services/task-recommendation.service.ts b/src/app/api/services/task-recommendation.service.ts
new file mode 100644
index 0000000000..475a990f66
--- /dev/null
+++ b/src/app/api/services/task-recommendation.service.ts
@@ -0,0 +1,53 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {EMPTY, Observable, expand, reduce} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+
+export type TaskRecommendation = {
+  task_id: number | null;
+  task_definition_id: number;
+  task_name: string;
+  project_id: number;
+  unit_id: number;
+  priority_score: number;
+};
+
+export type TaskRecommendationPage = {
+  data: TaskRecommendation[];
+  meta: {
+    page: number;
+    per_page: number;
+    total_count: number;
+    total_pages: number;
+  };
+};
+
+@Injectable({providedIn: 'root'})
+export class TaskRecommendationService {
+  private static readonly PAGE_SIZE = 50;
+
+  constructor(private httpClient: HttpClient) {}
+
+  getAll(): Observable<TaskRecommendation[]> {
+    return this.getPage(1).pipe(
+      expand((response) =>
+        response.meta.page < response.meta.total_pages
+          ? this.getPage(response.meta.page + 1)
+          : EMPTY,
+      ),
+      reduce(
+        (recommendations, response) => recommendations.concat(response.data),
+        [] as TaskRecommendation[],
+      ),
+    );
+  }
+
+  private getPage(page: number): Observable<TaskRecommendationPage> {
+    return this.httpClient.get<TaskRecommendationPage>(`${API_URL}/tasks/recommended`, {
+      params: {
+        page,
+        per_page: TaskRecommendationService.PAGE_SIZE,
+      },
+    });
+  }
+}
diff --git a/src/app/api/services/task-similarity.service.ts b/src/app/api/services/task-similarity.service.ts
index d2770d8009..1578355df2 100644
--- a/src/app/api/services/task-similarity.service.ts
+++ b/src/app/api/services/task-similarity.service.ts
@@ -1,11 +1,11 @@
-import { Task, TaskSimilarity } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { CachedEntityService } from 'ngx-entity-service';
-import API_URL from 'src/app/config/constants/apiURL';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { AppInjector } from 'src/app/app-injector';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Task, TaskSimilarity} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 
 @Injectable()
 export class TaskSimilarityService extends CachedEntityService<TaskSimilarity> {
@@ -14,18 +14,28 @@ export class TaskSimilarityService extends CachedEntityService<TaskSimilarity> {
   constructor(httpClient: HttpClient) {
     super(httpClient, API_URL);
 
-    this.mapping.addKeys('id', 'type', 'flagged', 'pct', 'readyForViewer', 'parts');
+    this.mapping.addKeys(
+      'id',
+      'type',
+      'flagged',
+      'pct',
+      'readyForViewer',
+      'parts',
+      'otherTask',
+      'otherStudent',
+    );
 
     this.mapping.addJsonKey('flagged');
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public override createInstanceFrom(_json: object, constructorParams: Task): TaskSimilarity {
     return new TaskSimilarity(constructorParams);
   }
 
   public getSimilarityReportUrl(taskId: number, similarityId: number): Observable<string> {
     const httpClient = AppInjector.get(HttpClient);
-    return httpClient.get<string>(`${AppInjector.get(DoubtfireConstants).API_URL}/tasks/${taskId}/similarities/${similarityId}/viewer_url`);
+    return httpClient.get<string>(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/tasks/${taskId}/similarities/${similarityId}/viewer_url`,
+    );
   }
 }
diff --git a/src/app/api/services/task.service.ts b/src/app/api/services/task.service.ts
index 344494c0eb..aa890669e9 100644
--- a/src/app/api/services/task.service.ts
+++ b/src/app/api/services/task.service.ts
@@ -1,3 +1,7 @@
+import {CachedEntityService, EntityCache, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {EventEmitter, Injectable} from '@angular/core';
+import {Observable, map, tap} from 'rxjs';
 import {
   Project,
   Task,
@@ -7,19 +11,20 @@ import {
   TaskStatusUiData,
   Unit,
 } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import { CachedEntityService, EntityCache, RequestOptions } from 'ngx-entity-service';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
-import { MappingFunctions } from './mapping-fn';
-import { Observable, map, tap } from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {MappingFunctions} from './mapping-fn';
 
 @Injectable()
 export class TaskService extends CachedEntityService<Task> {
+  public readonly taskStatusUpdated$: EventEmitter<Task> = new EventEmitter();
+  public readonly taskSubmissionCompleted$: EventEmitter<Task> = new EventEmitter();
+
   protected readonly endpointFormat = '/projects/:projectId:/task_def_id/:taskDefId:';
 
   private readonly taskInboxEndpoint = '/units/:id:/tasks/inbox';
   private readonly taskExplorerEndpoint = '/units/:id:/task_definitions/:task_def_id:/tasks';
+  private readonly taskModerationEndpoint = '/units/:id:/tasks/moderation';
+  private readonly taskOverflowEndpoint = '/units/:id:/tasks/overflow';
   private readonly refreshTaskEndpoint = 'projects/:projectId:/refresh_tasks/:taskDefinitionId:';
 
   constructor(httpClient: HttpClient) {
@@ -29,26 +34,36 @@ export class TaskService extends CachedEntityService<Task> {
       'id',
       {
         keys: 'projectId',
-        toEntityOp: (data: object, jsonKey: string, task: Task, _params?: any) => {
+        toEntityOp: (data: object, jsonKey: string, task: Task) => {
           // Is fetching task outside of project...
           task.project = task.unit.findStudent(data[jsonKey]);
         },
       },
       {
         keys: 'taskDefinitionId',
-        toEntityOp: (data: object, key: string, entity: Task, _params?: any) => {
+        toEntityOp: (data: object, key: string, entity: Task) => {
           entity.definition = entity.project.unit.taskDef(data['task_definition_id']);
         },
       },
+      'tutorialId',
       'status',
       {
         keys: 'dueDate',
         toEntityFn: MappingFunctions.mapDateToEndOfDay,
       },
+      {
+        keys: 'targetStartDate',
+        toEntityFn: MappingFunctions.mapDateToEndOfDay,
+      },
+      {
+        keys: 'targetDueDate',
+        toEntityFn: MappingFunctions.mapDateToEndOfDay,
+      },
       'extensions',
+      'scormExtensions',
       {
         keys: 'submissionDate',
-        toEntityFn: MappingFunctions.mapDateToDay,
+        toEntityFn: MappingFunctions.mapDate,
       },
       {
         keys: 'completionDate',
@@ -60,18 +75,19 @@ export class TaskService extends CachedEntityService<Task> {
       'includeInPortfolio',
       'similarityFlag',
       'numNewComments',
+      'hasFeedback',
       'trigger',
       'hasExtensions',
       'pinned',
       {
         keys: 'new_stat',
-        toEntityOp: (data: object, key: string, entity: Task, params?: any) => {
+        toEntityOp: (data: object, key: string, entity: Task) => {
           entity.project.taskStats = data['new_stat'];
         },
       },
       {
         keys: 'otherProjects',
-        toEntityOp: (data: object, key: string, entity: Task, params?: any) => {
+        toEntityOp: (data: object, key: string, entity: Task) => {
           data['other_projects'].forEach((details) => {
             const proj = entity.unit.findStudent(details.id);
             if (proj) {
@@ -85,17 +101,22 @@ export class TaskService extends CachedEntityService<Task> {
             }
           });
         },
-      }
+      },
+      'moderationType',
     );
 
     this.mapping.addJsonKey('qualityPts', 'grade', 'includeInPortfolio', 'trigger');
   }
 
-  public createInstanceFrom(json: object, other?: any): Task {
-    return new Task(other as Project);
+  public createInstanceFrom(_json: object, other?: Project): Task {
+    return new Task(other);
   }
 
-  public queryTasksForTaskInbox(unit: Unit, taskDef?: TaskDefinition | number): Observable<Task[]> {
+  public queryTasksForTaskInbox(
+    unit: Unit,
+    taskDef?: TaskDefinition | number,
+    fetchMyStudentsOnly?: boolean,
+  ): Observable<Task[]> {
     const cache: EntityCache<Task> = new EntityCache<Task>();
 
     return this.query(
@@ -106,15 +127,21 @@ export class TaskService extends CachedEntityService<Task> {
         endpointFormat: this.taskInboxEndpoint,
         cache: cache,
         constructorParams: unit,
-      }
+        params: {
+          my_students_only: fetchMyStudentsOnly,
+        },
+      },
     ).pipe(
       tap((tasks: Task[]) => {
         unit.incorporateTasks(tasks);
-      })
+      }),
     );
   }
 
-  public queryTasksForTaskExplorer(unit: Unit, taskDef?: TaskDefinition | number): Observable<Task[]> {
+  public queryTasksForTaskExplorer(
+    unit: Unit,
+    taskDef?: TaskDefinition | number,
+  ): Observable<Task[]> {
     const cache: EntityCache<Task> = new EntityCache<Task>();
     return this.query(
       {
@@ -125,12 +152,51 @@ export class TaskService extends CachedEntityService<Task> {
         endpointFormat: this.taskExplorerEndpoint,
         cache: cache,
         constructorParams: unit,
-      }
+      },
     ).pipe(
       map((tasks: Task[]) => {
         unit.incorporateTasks(tasks);
         return unit.fillWithUnStartedTasks(tasks, taskDef);
-      })
+      }),
+    );
+  }
+
+  public queryTasksForMentorModeration(unit: Unit): Observable<Task[]> {
+    const cache: EntityCache<Task> = new EntityCache<Task>();
+    return this.query(
+      {
+        id: unit.id,
+      },
+      {
+        endpointFormat: this.taskModerationEndpoint,
+        cache: cache,
+        constructorParams: unit,
+      },
+    ).pipe(
+      tap((tasks: Task[]) => {
+        unit.incorporateTasks(tasks);
+      }),
+    );
+  }
+
+  public queryTasksForOverflow(unit: Unit): Observable<Task[]> {
+    const cache: EntityCache<Task> = new EntityCache<Task>();
+    return this.query(
+      {
+        id: unit.id,
+      },
+      {
+        endpointFormat: this.taskOverflowEndpoint,
+        cache: cache,
+        constructorParams: unit,
+      },
+    ).pipe(
+      map((tasks: Task[]) =>
+        tasks.filter((t) => t.daysSinceSubmission() >= t.unit.feedbackOverflowThresholdDays),
+      ),
+      tap((tasks: Task[]) => {
+        unit.incorporateTasks(tasks);
+      }),
     );
   }
 
@@ -145,7 +211,6 @@ export class TaskService extends CachedEntityService<Task> {
     };
 
     this.get(pathIds, options).subscribe({
-      next: (value: Task) => {},
       error: (message) => {
         console.log(`Failed to refresh tasks ${message}`);
       },
@@ -159,6 +224,7 @@ export class TaskService extends CachedEntityService<Task> {
   public readonly stateThatAllowsExtension = TaskStatus.STATE_THAT_ALLOWS_EXTENSION;
   public readonly pdfRegeneratableStatuses = TaskStatus.PDF_REGENERATABLE_STATES;
   public readonly submittableStatuses = TaskStatus.SUBMITTABLE_STATUSES;
+  public readonly feedbackTemplateStatuses = TaskStatus.FEEDBACK_TEMPLATE_STATUSES;
   public readonly completeStatus: TaskStatusEnum = 'complete';
   public readonly learningWeight: Map<TaskStatusEnum, number> = TaskStatus.LEARNING_WEIGHT;
   public readonly statusAcronym: Map<TaskStatusEnum, string> = TaskStatus.STATUS_ACRONYM;
@@ -167,12 +233,25 @@ export class TaskService extends CachedEntityService<Task> {
   public readonly statusSeq = TaskStatus.STATUS_SEQ;
   public readonly helpDescriptions = TaskStatus.HELP_DESCRIPTIONS;
   public readonly statusIcons: Map<TaskStatusEnum, string> = TaskStatus.STATUS_ICONS;
+  public readonly statusMaterialIcons: Map<TaskStatusEnum, string> =
+    TaskStatus.STATUS_MATERIAL_ICONS;
   public readonly rejectFutureStates = TaskStatus.REJECT_FUTURE_STATES;
 
   public statusClass(status: TaskStatusEnum): string {
     return TaskStatus.statusClass(status);
   }
 
+  public notifyStatusChange(task: Task): void {
+    this.taskStatusUpdated$.emit(task);
+  }
+
+  public notifyTransitionComplete(task: Task, submissionCompleted: boolean): void {
+    this.notifyStatusChange(task);
+    if (submissionCompleted) {
+      this.taskSubmissionCompleted$.emit(task);
+    }
+  }
+
   public readonly statusColors: Map<string, string> = TaskStatus.STATUS_COLORS;
   public readonly switchableStates = TaskStatus.SWITCHABLE_STATES;
 
@@ -180,7 +259,7 @@ export class TaskService extends CachedEntityService<Task> {
     return TaskStatus.STATUS_LABELS.get(status);
   }
 
-  public helpDescription(status: TaskStatusEnum): { detail: string; reason: string; action: string } {
+  public helpDescription(status: TaskStatusEnum): {detail: string; reason: string; action: string} {
     return TaskStatus.HELP_DESCRIPTIONS.get(status);
   }
 
@@ -188,7 +267,7 @@ export class TaskService extends CachedEntityService<Task> {
     return TaskStatus.statusData(data);
   }
 
-  public taskKeyFromString(taskKeyString: string): { studentId: string; taskDefAbbr: string } {
+  public taskKeyFromString(taskKeyString: string): {studentId: string; taskDefAbbr: string} {
     const taskKeyComponents = taskKeyString?.split('/');
     if (taskKeyComponents) {
       const studentId = taskKeyComponents[0];
@@ -201,4 +280,36 @@ export class TaskService extends CachedEntityService<Task> {
 
     return null;
   }
+
+  public checkInTaskForStudent(task: Task): Observable<void> {
+    const options: RequestOptions<Task> = {
+      entity: task,
+      cache: task.project.taskCache,
+      endpointFormat: `${this.endpointFormat}/check_in`,
+    };
+
+    return this.post(
+      {
+        projectId: task.project.id,
+        taskDefId: task.definition.id,
+      },
+      options,
+    );
+  }
+
+  public claimTask(task: Task): Observable<boolean> {
+    const options: RequestOptions<Task> = {
+      entity: task,
+      cache: task.project.taskCache,
+      endpointFormat: `${this.endpointFormat}/claim_overflow_task`,
+    };
+
+    return this.post(
+      {
+        projectId: task.project.id,
+        taskDefId: task.definition.id,
+      },
+      options,
+    );
+  }
 }
diff --git a/src/app/api/services/teaching-period-break.service.ts b/src/app/api/services/teaching-period-break.service.ts
index 0dd023264f..5bd364aa8f 100644
--- a/src/app/api/services/teaching-period-break.service.ts
+++ b/src/app/api/services/teaching-period-break.service.ts
@@ -1,9 +1,9 @@
-import { HttpClient } from '@angular/common/http';
-import { CachedEntityService } from 'ngx-entity-service';
-import { TeachingPeriodBreak } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import API_URL from 'src/app/config/constants/apiURL';
-import { MappingFunctions } from './mapping-fn';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {TeachingPeriodBreak} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {MappingFunctions} from './mapping-fn';
 
 @Injectable()
 export class TeachingPeriodBreakService extends CachedEntityService<TeachingPeriodBreak> {
@@ -17,7 +17,7 @@ export class TeachingPeriodBreakService extends CachedEntityService<TeachingPeri
       {
         keys: 'startDate',
         toEntityFn: MappingFunctions.mapDateToDay,
-        toJsonFn: MappingFunctions.mapDayToJson
+        toJsonFn: MappingFunctions.mapDayToJson,
       },
       'numberOfWeeks',
     );
@@ -25,7 +25,7 @@ export class TeachingPeriodBreakService extends CachedEntityService<TeachingPeri
     this.mapping.mapAllKeysToJsonExcept('id');
   }
 
-  public override createInstanceFrom(json: any, other?: any): TeachingPeriodBreak {
+  public override createInstanceFrom(_json: object): TeachingPeriodBreak {
     return new TeachingPeriodBreak();
   }
 }
diff --git a/src/app/api/services/teaching-period.service.ts b/src/app/api/services/teaching-period.service.ts
index ab75f72ada..28986699e4 100644
--- a/src/app/api/services/teaching-period.service.ts
+++ b/src/app/api/services/teaching-period.service.ts
@@ -1,10 +1,14 @@
-import { HttpClient } from '@angular/common/http';
-import { CachedEntityService, Entity } from 'ngx-entity-service';
-import { TeachingPeriod, TeachingPeriodBreakService, UnitService } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import API_URL from 'src/app/config/constants/apiURL';
-import { AppInjector } from 'src/app/app-injector';
-import { MappingFunctions } from './mapping-fn';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {
+  TeachingPeriod,
+  TeachingPeriodBreakService,
+  UnitService,
+} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {MappingFunctions} from './mapping-fn';
 
 @Injectable()
 export class TeachingPeriodService extends CachedEntityService<TeachingPeriod> {
@@ -12,7 +16,10 @@ export class TeachingPeriodService extends CachedEntityService<TeachingPeriod> {
 
   public static readonly rolloverEndpointFormat = 'teaching_periods/:id:/rollover';
 
-  constructor(httpClient: HttpClient, private teachingPeriodBreakService: TeachingPeriodBreakService) {
+  constructor(
+    httpClient: HttpClient,
+    private teachingPeriodBreakService: TeachingPeriodBreakService,
+  ) {
     super(httpClient, API_URL);
 
     this.mapping.addKeys(
@@ -61,7 +68,7 @@ export class TeachingPeriodService extends CachedEntityService<TeachingPeriod> {
     this.cacheBehaviourOnGet = 'cacheQuery';
   }
 
-  public createInstanceFrom(json: any, other?: any): TeachingPeriod {
+  public createInstanceFrom(_json: object): TeachingPeriod {
     return new TeachingPeriod();
   }
 }
diff --git a/src/app/api/services/test-attempt.service.ts b/src/app/api/services/test-attempt.service.ts
new file mode 100644
index 0000000000..07789f4c63
--- /dev/null
+++ b/src/app/api/services/test-attempt.service.ts
@@ -0,0 +1,88 @@
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Task, TestAttempt} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from 'src/app/common/services/alert.service';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+@Injectable()
+export class TestAttemptService extends CachedEntityService<TestAttempt> {
+  protected readonly endpointFormat =
+    'projects/:project_id:/task_def_id/:task_def_id:/test_attempts';
+  protected readonly latestCompletedEndpoint =
+    this.endpointFormat + '/latest?completed=:completed:';
+
+  constructor(httpClient: HttpClient) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'terminated',
+      'completionStatus',
+      'successStatus',
+      'scoreScaled',
+      'cmiDatamodel',
+      'attemptedTime',
+    );
+  }
+
+  public override createInstanceFrom(_json: object, constructorParams: Task): TestAttempt {
+    return new TestAttempt(constructorParams);
+  }
+
+  public getLatestCompletedAttempt(task: Task): Observable<TestAttempt> {
+    return this.get(
+      {
+        project_id: task.project.id,
+        task_def_id: task.taskDefId,
+        completed: true,
+      },
+      {
+        endpointFormat: this.latestCompletedEndpoint,
+        constructorParams: task,
+      },
+    );
+  }
+
+  public overrideSuccessStatus(testAttemptId: number, successStatus: boolean): void {
+    const http = AppInjector.get(HttpClient);
+
+    http
+      .patch(
+        `${AppInjector.get(DoubtfireConstants).API_URL}/test_attempts/${testAttemptId}?success_status=${successStatus}`,
+        {},
+      )
+      .subscribe({
+        next: (_data) => {
+          (AppInjector.get(AlertService) as AlertService).success(
+            'Attempt pass status successfully overridden.',
+            6000,
+          );
+        },
+        error: (message) => {
+          (AppInjector.get(AlertService) as AlertService).error(message, 6000);
+        },
+      });
+  }
+
+  public deleteAttempt(testAttemptId: number): void {
+    const http = AppInjector.get(HttpClient);
+
+    http
+      .delete(`${AppInjector.get(DoubtfireConstants).API_URL}/test_attempts/${testAttemptId}`, {})
+      .subscribe({
+        next: (_data) => {
+          (AppInjector.get(AlertService) as AlertService).success(
+            'Attempt successfully deleted.',
+            6000,
+          );
+        },
+        error: (message) => {
+          (AppInjector.get(AlertService) as AlertService).error(message, 6000);
+        },
+      });
+  }
+}
diff --git a/src/app/api/services/tii-action.service.ts b/src/app/api/services/tii-action.service.ts
index a90e540142..856d8ddd51 100644
--- a/src/app/api/services/tii-action.service.ts
+++ b/src/app/api/services/tii-action.service.ts
@@ -1,11 +1,9 @@
-import { HttpClient } from '@angular/common/http';
-import { CachedEntityService, Entity } from 'ngx-entity-service';
-import { TiiAction, Unit, UnitService, UserService } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import API_URL from 'src/app/config/constants/apiURL';
-import { AppInjector } from 'src/app/app-injector';
-import { MappingFunctions } from './mapping-fn';
-import { MappingProcess } from 'ngx-entity-service/lib/mapping-process';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {TiiAction} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {MappingFunctions} from './mapping-fn';
 
 @Injectable()
 export class TiiActionService extends CachedEntityService<TiiAction> {
@@ -30,14 +28,14 @@ export class TiiActionService extends CachedEntityService<TiiAction> {
       },
       'errorCode',
       'errorMessage',
-      'log'
+      'log',
     );
 
     this.mapping.addJsonKey('id', 'retry');
     // this.cacheBehaviourOnGet = 'cacheQuery';
   }
 
-  public createInstanceFrom(json: any, other?: any): TiiAction {
+  public createInstanceFrom(_json: object): TiiAction {
     return new TiiAction();
   }
 }
diff --git a/src/app/api/services/tii.service.spec.ts b/src/app/api/services/tii.service.spec.ts
index af14851920..4cf7e6de2d 100644
--- a/src/app/api/services/tii.service.spec.ts
+++ b/src/app/api/services/tii.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TiiService } from './tii.service';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {TiiService} from './tii.service';
 
 describe('TiiServiceService', () => {
   let service: TiiService;
diff --git a/src/app/api/services/tii.service.ts b/src/app/api/services/tii.service.ts
index cfc02681a3..385e9eef5c 100644
--- a/src/app/api/services/tii.service.ts
+++ b/src/app/api/services/tii.service.ts
@@ -1,7 +1,7 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import API_URL from 'src/app/config/constants/apiURL';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable({
   providedIn: 'root',
diff --git a/src/app/api/services/tutor-note.service.ts b/src/app/api/services/tutor-note.service.ts
new file mode 100644
index 0000000000..f9efe14fe1
--- /dev/null
+++ b/src/app/api/services/tutor-note.service.ts
@@ -0,0 +1,176 @@
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, tap} from 'rxjs';
+import {ProjectService, Task, UnitRole, UserService} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {TutorNote} from '../models/tutor-note';
+
+@Injectable()
+export class TutorNoteService extends CachedEntityService<TutorNote> {
+  protected readonly endpointFormat = 'unit_roles/:unitRoleId:/tutor_notes/:id:';
+  protected readonly markAsReadEndpointFormat =
+    'unit_roles/:unitRoleId:/tutor_notes/:id:/mark_as_read';
+
+  constructor(
+    httpClient: HttpClient,
+    private userService: UserService,
+    private projectService: ProjectService,
+  ) {
+    super(httpClient, API_URL);
+
+    this.mapping.addKeys(
+      'id',
+      'note',
+      'createdAt',
+      'updatedAt',
+      'replyToId',
+      {
+        keys: ['user', 'user_id'],
+        toEntityFn: (data: object, _key: string, tutorNote: TutorNote) => {
+          const userRole = tutorNote.unitRole.unit.staff.find((s) => s.user.id === data['user_id']);
+          // If the user is not a staff in the unit it will be null
+          return userRole?.user;
+        },
+      },
+      {
+        keys: ['taskDefinition', 'task_definition_id'],
+        toEntityFn: (data: object, _key: string, tutorNote: TutorNote) => {
+          const taskDefinition = tutorNote.unitRole.unit.taskDefinitions.find(
+            (td) => td.id === data['task_definition_id'],
+          );
+          return taskDefinition;
+        },
+      },
+      {
+        keys: ['project', 'project_id'],
+        toEntityFn: (data: object, key: string, tutorNote: TutorNote) => {
+          const project = tutorNote.unitRole.unit.students.find((p) => p.id === data['project_id']);
+          return project;
+        },
+      },
+      'readByUnitRole',
+    );
+
+    this.mapping.addJsonKey('note', 'createdAt', 'updatedAt');
+  }
+
+  public createInstanceFrom(_json: object, other?: UnitRole): TutorNote {
+    return new TutorNote(other);
+  }
+
+  public addNote(
+    unitRole: UnitRole,
+    text: string,
+    task?: Task,
+    originalNote?: TutorNote,
+  ): Observable<TutorNote> {
+    const pathId = {
+      unitRoleId: unitRole.id,
+    };
+
+    const body: FormData = new FormData();
+    if (originalNote) {
+      body.append('reply_to_id', originalNote?.id.toString());
+    }
+
+    if (task) {
+      body.append('task_id', task?.id.toString());
+    }
+
+    body.append('note', text);
+
+    const opts: RequestOptions<TutorNote> = {endpointFormat: this.endpointFormat};
+    opts.cache = unitRole.tutorNotesCache;
+    opts.body = body;
+    opts.constructorParams = unitRole;
+
+    return this.create(pathId, opts);
+  }
+
+  public updateTutorNoteReplies(tutorNotes: readonly TutorNote[]) {
+    for (const note of tutorNotes) {
+      if (note.replyToId) {
+        const repliedTo = tutorNotes.find((n) => n.id === note.replyToId);
+        if (repliedTo) {
+          note.replyTo = repliedTo;
+        } else {
+          // Remove deleted replies
+          note.replyTo = null;
+        }
+      }
+    }
+  }
+
+  public updateNote(unitRole: UnitRole, note: TutorNote, text: string): Observable<TutorNote> {
+    const pathId = {
+      unitRoleId: unitRole.id,
+      id: note.id,
+    };
+
+    const body: FormData = new FormData();
+    body.append('note', text);
+
+    const opts: RequestOptions<TutorNote> = {endpointFormat: this.endpointFormat};
+    opts.cache = unitRole.tutorNotesCache;
+    opts.body = body;
+    opts.constructorParams = unitRole;
+
+    return this.put(pathId, opts).pipe(
+      tap((_note: TutorNote) => {
+        note.note = text;
+      }),
+    );
+  }
+
+  public markAsRead(unitRole: UnitRole, note: TutorNote): Observable<boolean> {
+    const pathId = {
+      unitRoleId: unitRole.id,
+      id: note.id,
+    };
+
+    const opts: RequestOptions<TutorNote> = {endpointFormat: this.markAsReadEndpointFormat};
+    opts.cache = unitRole.tutorNotesCache;
+    opts.constructorParams = unitRole;
+
+    return this.put<boolean>(pathId, opts).pipe(
+      tap((response: boolean) => {
+        if (response) {
+          note.readByUnitRole = true;
+          if (unitRole.user.id !== note.user.id) {
+            unitRole.tutorNoteCount--;
+          }
+          // unitRole.tutorNoteCount = unitRole.tutorNotesCache.currentValues.filter(
+          //   (note) => !note.readByUnitRole,
+          // ).length;
+        }
+      }),
+    );
+  }
+
+  public loadTutorNotes(unitRole: UnitRole, useFetch: boolean = false): Observable<TutorNote[]> {
+    const options: RequestOptions<TutorNote> = {
+      endpointFormat: this.endpointFormat,
+      cache: unitRole.tutorNotesCache,
+      sourceCache: unitRole.tutorNotesCache,
+      cacheBehaviourOnGet: 'cacheQuery',
+      constructorParams: unitRole,
+    };
+
+    if (useFetch) {
+      return super.fetchAll(
+        {
+          unitRoleId: unitRole.id,
+        },
+        options,
+      );
+    } else {
+      return super.query(
+        {
+          unitRoleId: unitRole.id,
+        },
+        options,
+      );
+    }
+  }
+}
diff --git a/src/app/api/services/tutorial-stream.service.ts b/src/app/api/services/tutorial-stream.service.ts
index 648e84d4fa..4b3922d2f0 100644
--- a/src/app/api/services/tutorial-stream.service.ts
+++ b/src/app/api/services/tutorial-stream.service.ts
@@ -1,8 +1,8 @@
-import { HttpClient } from '@angular/common/http';
-import { CachedEntityService } from 'ngx-entity-service';
-import { TutorialStream } from 'src/app/api/models/doubtfire-model';
-import { Injectable } from '@angular/core';
-import API_URL from 'src/app/config/constants/apiURL';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {TutorialStream} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class TutorialStreamService extends CachedEntityService<TutorialStream> {
@@ -11,20 +11,16 @@ export class TutorialStreamService extends CachedEntityService<TutorialStream> {
   constructor(httpClient: HttpClient) {
     super(httpClient, API_URL);
 
-    this.mapping.addKeys(
-      'name',
-      'abbreviation',
-      'activityType'
-    );
+    this.mapping.addKeys('id', 'name', 'abbreviation', 'activityType');
 
     this.mapping.mapAllKeysToJson();
   }
 
-  public createInstanceFrom(json: any, other?: any): TutorialStream {
+  public createInstanceFrom(_json: object): TutorialStream {
     return new TutorialStream();
   }
 
-  public override keyForJson(json: any): string {
+  public override keyForJson(json: {abbreviation: string}): string {
     return json['abbreviation'];
   }
 
diff --git a/src/app/api/services/tutorial.service.ts b/src/app/api/services/tutorial.service.ts
index 179ad8031a..0451564a6b 100644
--- a/src/app/api/services/tutorial.service.ts
+++ b/src/app/api/services/tutorial.service.ts
@@ -1,22 +1,27 @@
-import { Inject, Injectable } from '@angular/core';
-import { analyticsService } from 'src/app/ajs-upgraded-providers';
-import { HttpClient } from '@angular/common/http';
-import { CampusService, Project, Tutorial, Unit, UserService } from 'src/app/api/models/doubtfire-model';
-import { CachedEntityService, RequestOptions } from 'ngx-entity-service';
-import API_URL from 'src/app/config/constants/apiURL';
-import { Observable } from 'rxjs';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {CachedEntityService, RequestOptions} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {
+  CampusService,
+  Project,
+  Tutorial,
+  Unit,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class TutorialService extends CachedEntityService<Tutorial> {
   protected readonly endpointFormat = 'tutorials/:id:';
-  protected readonly switchTutorialEndpointFormat = 'units/:unitId:/tutorials/:tutorialAbbreviation:/enrolments/:projectId:';
+  protected readonly switchTutorialEndpointFormat =
+    'units/:unitId:/tutorials/:tutorialAbbreviation:/enrolments/:projectId:';
 
   constructor(
     httpClient: HttpClient,
     private campusService: CampusService,
     private userService: UserService,
-    @Inject(analyticsService) private AnalyticsService: any,
     private alerts: AlertService,
   ) {
     super(httpClient, API_URL);
@@ -28,54 +33,54 @@ export class TutorialService extends CachedEntityService<Tutorial> {
       'meetingLocation',
       'abbreviation',
       {
-        keys: ['campus','campus_id'],
-        toEntityOp: (data: object, key: string, entity: Tutorial, params?: any) => {
+        keys: ['campus', 'campus_id'],
+        toEntityOp: (data: object, key: string, entity: Tutorial) => {
           this.campusService.get(data['campus_id']).subscribe((campus) => {
             entity.campus = campus;
           });
         },
-        toJsonFn: (entity: Tutorial, key: string) => {
+        toJsonFn: (entity: Tutorial, _key: string) => {
           return entity.campus ? entity.campus.id : -1;
-        }
+        },
       },
       'capacity',
       {
         keys: ['tutor', 'tutor_id'],
-        toEntityFn: (data: object, key: string, entity: Tutorial, params?: any) => {
+        toEntityFn: (data: object, key: string) => {
           return this.userService.cache.get(data[key]);
         },
-        toJsonFn: (entity: Tutorial, key: string) => {
+        toJsonFn: (entity: Tutorial, _key: string) => {
           return entity.tutor?.id;
-        }
+        },
       },
 
       'numStudents',
       {
-        keys: ['tutorialStream','tutorial_stream_abbr'],
-        toEntityFn: (data: object, key: string, entity: Tutorial, params?: any) => {
+        keys: ['tutorialStream', 'tutorial_stream_abbr'],
+        toEntityFn: (data: object, key: string, entity: Tutorial) => {
           return entity.unit.tutorialStreamForAbbr(data[key]);
         },
-        toJsonFn: (entity: Tutorial, key: string) => {
+        toJsonFn: (entity: Tutorial, _key: string) => {
           return entity.tutorialStream ? entity.tutorialStream.abbreviation : null;
-        }
+        },
       },
 
       {
         keys: ['unit', 'unit_id'],
-        toJsonFn: (entity: Tutorial, key: string) => {
+        toJsonFn: (entity: Tutorial, _key: string) => {
           return entity.unit?.id;
-        }
-      }
+        },
+      },
     );
 
     this.mapping.mapAllKeysToJsonExcept('numStudents');
   }
 
-  public createInstanceFrom(json: any, other?: any): Tutorial {
-    return new Tutorial(other as Unit);
+  public createInstanceFrom(_json: object, other?: Unit): Tutorial {
+    return new Tutorial(other);
   }
 
-  public override keyForJson(json: any): string | number {
+  public override keyForJson(json: {tutorial_id?: number}): string | number {
     if (json.tutorial_id) {
       return json.tutorial_id;
     } else {
@@ -94,10 +99,10 @@ export class TutorialService extends CachedEntityService<Tutorial> {
       endpointFormat: this.switchTutorialEndpointFormat,
       cache: project.tutorialEnrolmentsCache,
       sourceCache: project.unit.tutorialsCache,
-      body: {}
+      body: {},
     };
 
-    var observer: Observable<any>;
+    let observer: Observable<{enrolments: {tutorial_id: number}[]}>;
     if (isEnrol) {
       observer = this.post(pathIds, options);
     } else {
@@ -110,7 +115,9 @@ export class TutorialService extends CachedEntityService<Tutorial> {
         if (isEnrol) {
           project.tutorialEnrolmentsCache.clear();
           for (const enrolment of value.enrolments) {
-            project.tutorialEnrolmentsCache.add(project.unit.tutorialFromId(enrolment['tutorial_id']));
+            project.tutorialEnrolmentsCache.add(
+              project.unit.tutorialFromId(enrolment['tutorial_id']),
+            );
           }
         } else {
           project.tutorialEnrolmentsCache.delete(tutorial);
@@ -118,8 +125,7 @@ export class TutorialService extends CachedEntityService<Tutorial> {
       },
       error: (error) => {
         this.alerts.error(`Failed to update tutorial enrolment. ${error}`, 8000);
-      }
+      },
     });
   }
-
 }
diff --git a/src/app/api/services/unit-role.service.ts b/src/app/api/services/unit-role.service.ts
index a65f301ca8..daaf9015d5 100644
--- a/src/app/api/services/unit-role.service.ts
+++ b/src/app/api/services/unit-role.service.ts
@@ -1,9 +1,14 @@
-import { TeachingPeriodService, Unit, UnitRole, UnitService, UserService } from 'src/app/api/models/doubtfire-model';
-import { CachedEntityService } from 'ngx-entity-service';
-import { Inject, Injectable } from '@angular/core';
-import { analyticsService } from 'src/app/ajs-upgraded-providers';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {
+  TeachingPeriodService,
+  Unit,
+  UnitRole,
+  UnitService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class UnitRoleService extends CachedEntityService<UnitRole> {
@@ -14,7 +19,6 @@ export class UnitRoleService extends CachedEntityService<UnitRole> {
     private userService: UserService,
     private unitService: UnitService,
     private teachingPeriodService: TeachingPeriodService,
-    @Inject(analyticsService) private AnalyticsService: any
   ) {
     super(httpClient, API_URL);
 
@@ -22,7 +26,7 @@ export class UnitRoleService extends CachedEntityService<UnitRole> {
       'id',
       {
         keys: 'unit',
-        toEntityFn: (data, key, entity) => {
+        toEntityFn: (data, _key, _entity) => {
           const unitData = data['unit'];
           const result: Unit = this.unitService.cache.getOrCreate(
             unitData.id,
@@ -32,13 +36,13 @@ export class UnitRoleService extends CachedEntityService<UnitRole> {
           result.updateFromJson(unitData, this.unitService.mapping);
           return result;
         },
-        toJsonFn: (entity: UnitRole, key: string) => {
+        toJsonFn: (entity: UnitRole, _key: string) => {
           return entity.unit?.id;
-        }
+        },
       },
       {
         keys: 'user',
-        toEntityFn: (data: object, key: string, entity: UnitRole, params?: any) => {
+        toEntityFn: (data: object) => {
           return this.userService.cache.getOrCreate(data['user']['id'], userService, data['user']);
         },
       },
@@ -46,23 +50,34 @@ export class UnitRoleService extends CachedEntityService<UnitRole> {
       'roleId',
       {
         keys: 'userId',
-        toJsonFn: (entity: UnitRole, key: string) => {
+        toJsonFn: (entity: UnitRole, _key: string) => {
           return entity.user?.id;
-        }
+        },
       },
       {
         keys: 'unitId',
-        toJsonFn: (entity: UnitRole, key: string) => {
+        toJsonFn: (entity: UnitRole, _key: string) => {
           return entity.unit?.id;
-        }
+        },
       },
+      'observerOnly',
+      'mentorId',
+      'tutorNoteCount',
+      'canMarkOverflowTasks',
     );
 
-    this.mapping.addJsonKey('roleId', 'userId', 'unitId', 'role');
+    this.mapping.addJsonKey(
+      'roleId',
+      'userId',
+      'unitId',
+      'role',
+      'observerOnly',
+      'mentorId',
+      'canMarkOverflowTasks',
+    );
   }
 
-  public createInstanceFrom(json: any, other?: any): UnitRole {
+  public createInstanceFrom(_json: object): UnitRole {
     return new UnitRole();
   }
-
 }
diff --git a/src/app/api/services/unit.service.ts b/src/app/api/services/unit.service.ts
index 740e9b6cc1..0c8579415b 100644
--- a/src/app/api/services/unit.service.ts
+++ b/src/app/api/services/unit.service.ts
@@ -1,14 +1,26 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { GroupSetService, LearningOutcomeService, TaskOutcomeAlignmentService, TeachingPeriodService, TutorialService, TutorialStreamService, Unit, UserService } from 'src/app/api/models/doubtfire-model';
-import { CachedEntityService, Entity, EntityMapping } from 'ngx-entity-service';
-import API_URL from 'src/app/config/constants/apiURL';
-import { UnitRoleService } from './unit-role.service';
-import { AppInjector } from 'src/app/app-injector';
-import { TaskDefinitionService } from './task-definition.service';
-import { GroupService } from './group.service';
-import { Observable } from 'rxjs';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {
+  GroupSetService,
+  LearningOutcomeService,
+  OverseerImageService,
+  TaskOutcomeAlignmentService,
+  TeachingPeriodService,
+  TutorialService,
+  TutorialStreamService,
+  Unit,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {AppInjector} from 'src/app/app-injector';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GroupService} from './group.service';
+import {MappingFunctions} from './mapping-fn';
+import {TaskDefinitionService} from './task-definition.service';
+import {UnitRoleService} from './unit-role.service';
 
 export type IloStats = {
   median: number;
@@ -18,6 +30,35 @@ export type IloStats = {
   max: number;
 }[];
 
+export interface TaskStatusStat {
+  tutorial_stream_id: number;
+  status: string;
+  num: number;
+}
+
+export type TaskStatusStats = Record<number, Record<number, TaskStatusStat[]>>;
+
+export interface TargetGradeStat {
+  tutorial_id: number;
+  tutorial_stream_id: number;
+  grade: number;
+  num: number;
+}
+
+export interface TaskCompletionSummary {
+  median: number;
+  lower: number;
+  upper: number;
+  min: number;
+  max: number;
+}
+
+export interface TaskCompletionStats {
+  unit: TaskCompletionSummary;
+  tutorial: Record<number, TaskCompletionSummary>;
+  grade: Record<number, TaskCompletionSummary>;
+}
+
 @Injectable()
 export class UnitService extends CachedEntityService<Unit> {
   protected readonly endpointFormat = 'units/:id:';
@@ -32,7 +73,7 @@ export class UnitService extends CachedEntityService<Unit> {
     private taskDefinitionService: TaskDefinitionService,
     private taskOutcomeAlignmentService: TaskOutcomeAlignmentService,
     private groupSetService: GroupSetService,
-    private groupService: GroupService
+    private groupService: GroupService,
   ) {
     super(httpClient, API_URL);
 
@@ -47,168 +88,205 @@ export class UnitService extends CachedEntityService<Unit> {
       'myRole',
       {
         keys: 'unitRole',
-        toEntityFn: (data: object, jsonKey: string, entity: Unit) => {
+        toEntityFn: (data: object, jsonKey: string, _entity: Unit) => {
           const unitRoleService = AppInjector.get(UnitRoleService);
           unitRoleService.cache.get(data[jsonKey]);
-        }
+        },
       },
       {
+        // keys: 'unitRoles',
         keys: 'staff',
         toEntityOp: (data, key, entity) => {
           const unitRoleService = AppInjector.get(UnitRoleService);
           // Add staff
           entity.staffCache.clear();
-          data[key].forEach(staff => {
+          data[key]?.forEach((staff) => {
             entity.staffCache.add(unitRoleService.buildInstance(staff));
           });
-        }
+        },
       },
       {
         keys: ['mainConvenor', 'main_convenor_id'],
         toEntityFn: (data, key, entity) => {
-          return entity.staffCache.get(data[key]);
+          const result = entity.staffCache.get(data[key]);
+          entity.mainConvenorUser = result?.user;
+          return result;
         },
-        toJsonFn: (unit: Unit, key: string) => {
+        toJsonFn: (unit: Unit, _key: string) => {
           return unit.mainConvenor?.id;
-        }
+        },
       },
       {
         keys: ['mainConvenorUser', 'main_convenor_user_id'],
-        toEntityFn: (data, key, entity) => {
+        toEntityFn: (data, key, _entity) => {
           return AppInjector.get(UserService).cache.get(data[key]);
         },
-        toJsonFn: (unit: Unit, key: string) => {
+        toJsonFn: (unit: Unit, _key: string) => {
           return unit.mainConvenor?.user.id;
-        }
+        },
       },
       {
         keys: ['teachingPeriod', 'teaching_period_id'],
         toEntityFn: (data, key, entity) => {
-          if ( data['teaching_period_id'] ) {
+          if (data['teaching_period_id']) {
             const teachingPeriod = this.teachingPeriodService.cache.get(data['teaching_period_id']);
             teachingPeriod?.unitsCache.add(entity);
             return teachingPeriod;
-          } else { return undefined; }
+          } else {
+            return undefined;
+          }
         },
-        toJsonFn: (entity: Unit, key: string) => {
+        toJsonFn: (entity: Unit, _key: string) => {
           return entity.teachingPeriod ? entity.teachingPeriod.id : undefined;
-        }
+        },
       },
       {
         keys: 'startDate',
-        toEntityFn: (data, key, entity, params?) => {
+        toEntityFn: (data, key, _entity, _params?) => {
           return new Date(data[key]);
         },
-        toJsonFn: (entity, key) => {
-          return entity.startDate.toISOString().slice(0, 10);
-        }
+        toJsonFn: MappingFunctions.mapDayToJson,
       },
       {
         keys: 'endDate',
-        toEntityFn: (data, key, entity, params?) => {
+        toEntityFn: (data, key, _entity, _params?) => {
           return new Date(data[key]);
         },
-        toJsonFn: (entity, key) => {
-          return entity.endDate.toISOString().slice(0, 10);
-        }
+        toJsonFn: MappingFunctions.mapDayToJson,
       },
+      'currentUnitWeek',
       {
         keys: 'portfolioAutoGenerationDate',
-        toEntityFn: (data, key, entity, params?) => {
+        toEntityFn: (data, key, _entity, _params?) => {
           return new Date(data[key]);
         },
-        toJsonFn: (entity, key) => {
-          return entity.portfolioAutoGenerationDate?.toISOString().slice(0, 10);
-        }
+        toJsonFn: MappingFunctions.mapDayToJson,
       },
       'assessmentEnabled',
-      'overseerImageId',
+      // 'overseerImageId',
+      {
+        keys: 'overseerImageId',
+        toEntityFn: (data, key, entity) => {
+          const overSeerEntityId = data[key];
+          if (overSeerEntityId) {
+            const overseerImageService = AppInjector.get(OverseerImageService);
+            overseerImageService.get(data[key]).subscribe({
+              next: (image) => {
+                entity.overseerImage = image;
+              },
+            });
+          }
+          return overSeerEntityId;
+        },
+        toJsonFn: (unit: Unit, _key: string) => {
+          return unit.overseerImage?.id;
+        },
+      },
       'autoApplyExtensionBeforeDeadline',
       'sendNotifications',
       'enableSyncEnrolments',
       'enableSyncTimetable',
       'allowStudentExtensionRequests',
+      'allowFlexibleDates',
       'extensionWeeksOnResubmitRequest',
       'allowStudentChangeTutorial',
+      'markLateSubmissionsAsAssessInPortfolio',
       {
         keys: 'ilos',
         toEntityOp: (data: object, key: string, unit: Unit) => {
-          data[key].forEach(ilo => {
+          data[key]?.forEach((ilo) => {
             unit.learningOutcomesCache.getOrCreate(ilo['id'], this.learningOutcomeService, ilo);
           });
-        }
+        },
       },
       {
         keys: 'tutorialStreams',
         toEntityOp: (data, key, entity) => {
           data['tutorial_streams'].forEach((streamJson: object) => {
-            entity.tutorialStreamsCache.add(this.tutorialStreamService.buildInstance(streamJson, {constructorParams: entity}));
+            entity.tutorialStreamsCache.add(
+              this.tutorialStreamService.buildInstance(streamJson, {constructorParams: entity}),
+            );
           });
-        }
+        },
       },
       {
         keys: 'tutorials',
         toEntityOp: (data, key, entity) => {
           data['tutorials'].forEach((tutorialJson: object) => {
             if (tutorialJson) {
-              entity.tutorialsCache.add(this.tutorialService.buildInstance(tutorialJson, {constructorParams: entity}));
+              entity.tutorialsCache.add(
+                this.tutorialService.buildInstance(tutorialJson, {constructorParams: entity}),
+              );
             }
           });
-        }
+        },
       },
       // 'tutorialEnrolments', - map to tutorial enrolments
       {
         keys: 'groupSets',
         toEntityOp: (data, key, unit) => {
-          data[key].forEach((groupSetJson: object) => {
-            unit.groupSetsCache.add(this.groupSetService.buildInstance(groupSetJson, {constructorParams: unit}));
+          data[key]?.forEach((groupSetJson: object) => {
+            unit.groupSetsCache.add(
+              this.groupSetService.buildInstance(groupSetJson, {constructorParams: unit}),
+            );
           });
-        }
+        },
       },
       {
         keys: 'groups',
         toEntityOp: (data, key, unit) => {
-          data[key].forEach((groupJson: object) => {
+          data[key]?.forEach((groupJson: object) => {
             const group = this.groupService.buildInstance(groupJson, {constructorParams: unit});
             group.groupSet.groupsCache.add(group);
           });
-        }
+        },
       },
       {
         keys: 'taskDefinitions',
         toEntityOp: (data, key, unit) => {
-          var seq: number = 0;
+          let seq: number = 0;
           data['task_definitions'].forEach((taskDefinitionJson: object) => {
-            const td = unit.taskDefinitionCache.getOrCreate(taskDefinitionJson['id'], this.taskDefinitionService, taskDefinitionJson, {constructorParams: unit});
+            const td = unit.taskDefinitionCache.getOrCreate(
+              taskDefinitionJson['id'],
+              this.taskDefinitionService,
+              taskDefinitionJson,
+              {constructorParams: unit},
+            );
             td.seq = seq++;
           });
-        }
+        },
       },
       {
         keys: ['draftTaskDefinition', 'draft_task_definition_id'],
         toEntityFn: (data: object, jsonKey: string, unit: Unit) => {
           return unit.taskDef(data[jsonKey]);
         },
-        toJsonFn: (unit: Unit, key: string) => {
+        toJsonFn: (unit: Unit, _key: string) => {
           return unit.draftTaskDefinition?.id;
-        }
+        },
       },
       {
         keys: 'taskOutcomeAlignments',
         toEntityOp: (data: object, jsonKey: string, unit: Unit) => {
-          data[jsonKey].forEach( (alignment) => {
+          data[jsonKey].forEach((alignment) => {
             unit.taskOutcomeAlignmentsCache.getOrCreate(
               alignment['id'],
               this.taskOutcomeAlignmentService,
               alignment,
               {
-                constructorParams: unit
-              }
+                constructorParams: unit,
+              },
             );
           });
-        }
+        },
       },
       // 'groupMemberships', - map to group memberships
+      'feedbackWarningThresholdDays',
+      'feedbackOverflowThresholdDays',
+      {
+        keys: ['gradeDefinitions', 'grade_definitions'],
+      },
+      'enforceFeedbackBeforeDiscussedInClass',
     );
 
     this.mapping.addJsonKey(
@@ -225,21 +303,27 @@ export class UnitService extends CachedEntityService<Unit> {
       'portfolioAutoGenerationDate',
 
       'assessmentEnabled',
-      // 'overseerImage', - map to overseer image
+      'overseerImageId',
 
       'autoApplyExtensionBeforeDeadline',
+      'markLateSubmissionsAsAssessInPortfolio',
       'sendNotifications',
       'enableSyncEnrolments',
       'enableSyncTimetable',
 
       'draftTaskDefinition',
+      'allowFlexibleDates',
       'allowStudentExtensionRequests',
       'extensionWeeksOnResubmitRequest',
-      'allowStudentChangeTutorial'
+      'allowStudentChangeTutorial',
+      'feedbackWarningThresholdDays',
+      'feedbackOverflowThresholdDays',
+      'gradeDefinitions',
+      'enforceFeedbackBeforeDiscussedInClass',
     );
   }
 
-  public override createInstanceFrom(json: any, other?: any): Unit {
+  public override createInstanceFrom(_json: object): Unit {
     return new Unit();
   }
 
@@ -257,24 +341,31 @@ export class UnitService extends CachedEntityService<Unit> {
     return httpClient.get<IloStats[]>(url);
   }
 
-  public taskStatusCountByTutorial(unit: Unit): Observable<any> {
+  public taskStatusCountByTutorial(unit: Unit): Observable<TaskStatusStats> {
     const url = `${AppInjector.get(DoubtfireConstants).API_URL}/units/${unit.id}/stats/task_status_pct`;
     const httpClient = AppInjector.get(HttpClient);
 
-    return httpClient.get<any>(url);
+    return httpClient.get<TaskStatusStats>(url);
   }
 
-  public targetGradeStats(unit: Unit): Observable<any> {
+  public targetGradeStats(unit: Unit): Observable<TargetGradeStat[]> {
     const url = `${AppInjector.get(DoubtfireConstants).API_URL}/units/${unit.id}/stats/student_target_grade`;
     const httpClient = AppInjector.get(HttpClient);
 
-    return httpClient.get<any>(url);
+    return httpClient.get<TargetGradeStat[]>(url);
   }
 
-  public taskCompletionStats(unit: Unit): Observable<any> {
+  public taskCompletionStats(unit: Unit): Observable<TaskCompletionStats> {
     const url = `${AppInjector.get(DoubtfireConstants).API_URL}/units/${unit.id}/stats/task_completion_stats`;
     const httpClient = AppInjector.get(HttpClient);
 
-    return httpClient.get<any>(url);
+    return httpClient.get<TaskCompletionStats>(url);
+  }
+
+  public zipPortfolios(unit: Unit): Observable<SidekiqJob> {
+    const url = `${AppInjector.get(DoubtfireConstants).API_URL}/submission/units/${unit.id}/portfolio/zip`;
+    const httpClient = AppInjector.get(HttpClient);
+
+    return httpClient.get<SidekiqJob>(url);
   }
 }
diff --git a/src/app/api/services/user.service.ts b/src/app/api/services/user.service.ts
index 3473607c02..bd1620e9fe 100644
--- a/src/app/api/services/user.service.ts
+++ b/src/app/api/services/user.service.ts
@@ -1,11 +1,11 @@
-import { UnitRole, UnitService, User } from 'src/app/api/models/doubtfire-model';
-import { CachedEntityService, RequestOptions } from 'ngx-entity-service';
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
-import { AppInjector } from 'src/app/app-injector';
-import { AuthenticationService } from './authentication.service';
-import { Observable, tap } from 'rxjs';
+import {CachedEntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {UnitRole, UnitService, User} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import {type ThemePreference} from 'src/app/common/theme/theme.service';
+import API_URL from 'src/app/config/constants/apiUrl';
 
 @Injectable()
 export class UserService extends CachedEntityService<User> {
@@ -28,18 +28,25 @@ export class UserService extends CachedEntityService<User> {
       'email',
       'username',
       'nickname',
+      'displayName',
       'systemRole',
       'receiveTaskNotifications',
       'receivePortfolioNotifications',
       'receiveFeedbackNotifications',
+      'displayPeerProgress',
+      'themePreference',
+      'themePreferenceUpdatedAt',
       'hasRunFirstTimeSetup',
       'pronouns',
-      'acceptedTiiEula'
+      'acceptedTiiEula',
     );
 
     this._currentUser = this.anonymousUser;
 
-    this.mapping.mapAllKeysToJsonExcept('id');
+    // Theme sync has a deliberately narrow writer below. Profile updates must
+    // not replay a stale account timestamp or turn a missing preference into an
+    // accidental choice.
+    this.mapping.mapAllKeysToJsonExcept('id', 'themePreference', 'themePreferenceUpdatedAt');
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
@@ -72,19 +79,15 @@ export class UserService extends CachedEntityService<User> {
     this._currentUser = user;
   }
 
-  // Specific to the User entity
-  public override update(pathIds: object | User, options?: RequestOptions<User>): Observable<User> {
-    return super.update(pathIds, options).pipe(
-      tap((user) => {
-        if (user === this.currentUser) {
-          AppInjector.get(AuthenticationService).saveCurrentUser();
-        }
-      })
-    );
+  public getTutors(): Observable<User[]> {
+    return this.query(undefined, {endpointFormat: this.tutorEndpointFormat});
   }
 
-  public getTutors(): Observable<User[]> {
-    return this.query(undefined, { endpointFormat: this.tutorEndpointFormat });
+  public updateThemePreference(user: User, preference: ThemePreference): Observable<User> {
+    return this.update(user, {
+      entity: user,
+      body: {user: {theme_preference: preference}},
+    });
   }
 
   public adminRoleFor(unitId: number, user: User): UnitRole {
@@ -97,7 +100,7 @@ export class UserService extends CachedEntityService<User> {
     result.user = user;
 
     const unitService = AppInjector.get(UnitService);
-    result.unit = unitService.cache.getOrCreate(unitId, unitService, { id: unitId });
+    result.unit = unitService.cache.getOrCreate(unitId, unitService, {id: unitId});
 
     return result;
   }
diff --git a/src/app/api/services/webcal.service.ts b/src/app/api/services/webcal.service.ts
index 0823ff7360..3f7d7ede80 100644
--- a/src/app/api/services/webcal.service.ts
+++ b/src/app/api/services/webcal.service.ts
@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
-import { Webcal } from '../models/webcal/webcal';
-import { Entity, EntityService } from 'ngx-entity-service';
-import { HttpClient } from '@angular/common/http';
-import API_URL from 'src/app/config/constants/apiURL';
+import {EntityService} from 'ngx-entity-service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {Webcal} from '../models/webcal/webcal';
 
 @Injectable()
 export class WebcalService extends EntityService<Webcal> {
@@ -16,6 +16,7 @@ export class WebcalService extends EntityService<Webcal> {
       'id',
       'guid',
       'includeStartDates',
+      'includeLearningSessions',
       'userId',
       'reminder',
       'unitExclusions',
@@ -23,13 +24,13 @@ export class WebcalService extends EntityService<Webcal> {
       // Only used when updating the webcal.
       'shouldChangeGuid',
 
-      'reminder'
+      'reminder',
     );
 
     this.mapping.mapAllKeysToJsonExcept('id');
   }
 
-  public createInstanceFrom(json: any, other?: any): Webcal {
+  public createInstanceFrom(_json: object): Webcal {
     return new Webcal();
   }
 }
diff --git a/src/app/app-injector.ts b/src/app/app-injector.ts
index 0d113cf3fc..9a37215985 100644
--- a/src/app/app-injector.ts
+++ b/src/app/app-injector.ts
@@ -1,4 +1,4 @@
-import { Injector } from '@angular/core';
+import {Injector} from '@angular/core';
 
 /**
  * Allows for retrieving singletons using `AppInjector.get(MyService)` (whereas
diff --git a/src/app/app.component.html b/src/app/app.component.html
new file mode 100644
index 0000000000..346e6f06df
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1,4 @@
+<app-header></app-header>
+<f-demo-mode-banner></f-demo-mode-banner>
+<splash-screen></splash-screen>
+<router-outlet></router-outlet>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
new file mode 100644
index 0000000000..e705f9ffe3
--- /dev/null
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,45 @@
+// MN-C03 and MN-C05 targeted startup and teardown test.
+import {describe, expect, it, vi} from 'vitest';
+import {Renderer2} from '@angular/core';
+import {Router} from '@angular/router';
+import {Subject} from 'rxjs';
+import {PushNotificationClickService} from 'src/app/api/services/push-notification-click.service';
+import {PushNotificationService} from 'src/app/api/services/push-notification.service';
+import {AppComponent} from './app.component';
+import {ThemeService} from './common/theme/theme.service';
+
+describe('AppComponent push lifecycle', () => {
+  it('starts push listeners at app startup and stops them at teardown', () => {
+    const events: Subject<unknown> = new Subject();
+    const router = {
+      url: '/home',
+      events: events.asObservable(),
+    } as unknown as Router;
+    const renderer = {
+      setStyle: vi.fn(),
+    } as unknown as Renderer2;
+    const clickRouting = {
+      start: vi.fn(),
+      stop: vi.fn(),
+    } as unknown as PushNotificationClickService;
+    const pushNotifications = {
+      start: vi.fn(),
+      stop: vi.fn(),
+    } as unknown as PushNotificationService;
+
+    // Only held so the root constructs it (it stamps the theme marker); this test
+    // does not exercise it, so a bare stub is enough.
+    const theme = {} as unknown as ThemeService;
+
+    const component = new AppComponent(router, renderer, clickRouting, pushNotifications, theme);
+    component.ngOnInit();
+
+    expect(clickRouting.start).toHaveBeenCalledOnce();
+    expect(pushNotifications.start).toHaveBeenCalledOnce();
+
+    component.ngOnDestroy();
+
+    expect(clickRouting.stop).toHaveBeenCalledOnce();
+    expect(pushNotifications.stop).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000000..e361e75ee3
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,54 @@
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {Subscription, filter} from 'rxjs';
+import {PushNotificationClickService} from 'src/app/api/services/push-notification-click.service';
+import {PushNotificationService} from 'src/app/api/services/push-notification.service';
+import {ThemeService} from './common/theme/theme.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class AppComponent implements OnInit, OnDestroy {
+  private routerSub?: Subscription;
+
+  constructor(
+    private router: Router,
+    private renderer: Renderer2,
+    private pushNotificationClicks: PushNotificationClickService,
+    private pushNotifications: PushNotificationService,
+    // Injected only so the root always constructs it: its constructor stamps the
+    // resolved theme onto <html>. Without this the marker is only applied when the
+    // header toggle renders, so it never runs on xs where the toggle is hidden.
+    private theme: ThemeService,
+  ) {}
+
+  ngOnInit(): void {
+    this.pushNotificationClicks.start();
+    this.pushNotifications.start();
+    this.setBodyBackground(this.router.url);
+    this.routerSub = this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((event: NavigationEnd) => this.setBodyBackground(event.urlAfterRedirects));
+  }
+
+  ngOnDestroy(): void {
+    this.pushNotificationClicks.stop();
+    this.pushNotifications.stop();
+    this.routerSub?.unsubscribe();
+  }
+
+  private setBodyBackground(url: string): void {
+    const path = url.split('?')[0].split('#')[0];
+    // THM-M01: was hardcoded #f5f5f5 / #fff set inline, which beats any stylesheet
+    // and never flipped in dark. Onto the tokens (with a legacy fallback) so they
+    // follow the resolved-theme marker.
+    const background =
+      path === '/home' || path === '/'
+        ? 'var(--ot-color-page, #f5f5f5)'
+        : 'var(--ot-color-surface, #fff)';
+    this.renderer.setStyle(document.body, 'background-color', background);
+  }
+}
diff --git a/src/app/app.routes.spec.ts b/src/app/app.routes.spec.ts
new file mode 100644
index 0000000000..200df02905
--- /dev/null
+++ b/src/app/app.routes.spec.ts
@@ -0,0 +1,32 @@
+import {describe, expect, it} from 'vitest';
+import {Route, UrlSegment, UrlSegmentGroup} from '@angular/router';
+import {projectDashboardTaskMatcher} from './app.routes';
+
+const match = (paths: string[]) => {
+  const segments = paths.map((path) => new UrlSegment(path, {}));
+  return {
+    result: projectDashboardTaskMatcher(segments, {} as UrlSegmentGroup, {} as Route),
+    segments,
+  };
+};
+
+describe('project dashboard task route matcher', () => {
+  it('uses one reusable route for task details and feedback destinations', () => {
+    const taskRoute = match(['dashboard', '1.1P']);
+    const feedbackRoute = match(['dashboard', '1.1P', 'feedback']);
+
+    expect(taskRoute.result?.consumed).toEqual(taskRoute.segments);
+    expect(taskRoute.result?.posParams?.['taskAbbreviation'].path).toBe('1.1P');
+    expect(taskRoute.result?.posParams?.['mobilePane']).toBeUndefined();
+
+    expect(feedbackRoute.result?.consumed).toEqual(feedbackRoute.segments);
+    expect(feedbackRoute.result?.posParams?.['taskAbbreviation'].path).toBe('1.1P');
+    expect(feedbackRoute.result?.posParams?.['mobilePane'].path).toBe('feedback');
+  });
+
+  it('does not consume the dashboard root or unrelated suffixes', () => {
+    expect(match(['dashboard']).result).toBeNull();
+    expect(match(['dashboard', '1.1P', 'details']).result).toBeNull();
+    expect(match(['dashboard', '1.1P', 'feedback', 'extra']).result).toBeNull();
+  });
+});
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
new file mode 100644
index 0000000000..6ba0643820
--- /dev/null
+++ b/src/app/app.routes.ts
@@ -0,0 +1,390 @@
+import {Routes, UrlMatcher} from '@angular/router';
+import {EditProfileComponent} from './account/edit-profile/edit-profile.component';
+import {InstitutionSettingsComponent} from './admin/institution-settings/institution-settings.component';
+import {FUnitsComponent} from './admin/states/units/units.component';
+import {FUsersComponent} from './admin/states/users/users.component';
+import {roleWhitelistGuard} from './common/guards/role-whitelist.guard';
+import {NotificationsPageComponent} from './common/notifications-page/notifications-page.component';
+import {ScormPlayerComponent} from './common/scorm-player/scorm-player.component';
+import {SubmissionFilesDownloadComponent} from './common/submission-files-download/submission-files-download.component';
+import {SuccessCloseComponent} from './common/success-close/success-close.component';
+import {CrossDashboardComponent} from './dashboard/f-cross-dashboard.component';
+import {DemoControlsComponent} from './demo/demo-controls/demo-controls.component';
+import {demoToolsGuard} from './demo/demo-tools.guard';
+import {TimeoutComponent} from './errors/states/timeout/timeout.component';
+import {UnauthorisedComponent} from './errors/states/unauthorised/unauthorised.component';
+import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
+import {HomeComponent} from './home/states/home/home.component';
+import {LtiDashboardComponent} from './home/states/lti-dashboard/lti-dashboard.component';
+import {LtiUnitLinkComponent} from './home/states/lti-unit-link/lti-unit-link.component';
+import {resolveProject} from './projects/project.resolver';
+import {ProjectDashboardComponent} from './projects/states/dashboard/project-dashboard/project-dashboard.component';
+import {ProjectGroupsStateComponent} from './projects/states/groups/project-groups-state.component';
+import {JplagReportViewerComponent} from './projects/states/jplag/jplag-report-viewer.component';
+import {ProjectPlanComponent} from './projects/states/plan/project-plan.component';
+import {PortfolioStateComponent} from './projects/states/portfolio/portfolio-state.component';
+import {ProjectRootStateComponent} from './projects/states/project-root-state.component';
+import {TutorDiscussionComponent} from './projects/states/tutor-discussion/tutor-discussion.component';
+import {TutorialsComponent} from './projects/states/tutorials/tutorials.component';
+import {SignInComponent} from './sessions/states/sign-in/sign-in.component';
+import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
+import {UnitAdminStateComponent} from './units/states/edit/unit-admin-state.component';
+import {UnitGroupsComponent} from './units/states/groups/unit-groups/unit-groups.component';
+import {PortfoliosComponent} from './units/states/portfolios/portfolios.component';
+import {RolloverComponent} from './units/states/rollover/rollover.component';
+import {StudentsListComponent} from './units/states/students-list/students-list.component';
+import {UnitTaskInboxStateComponent} from './units/states/tasks/inbox/unit-task-inbox-state.component';
+import {TaskViewerStateComponent} from './units/task-viewer/task-viewer-state.component';
+import {UnitRootStateComponent} from './units/unit-root-state.component';
+import {resolveUnit} from './units/unit.resolver';
+import {WelcomeComponent} from './welcome/welcome.component';
+
+export const projectDashboardTaskMatcher: UrlMatcher = (segments) => {
+  if (segments.length < 2 || segments.length > 3 || segments[0].path !== 'dashboard') {
+    return null;
+  }
+
+  if (segments.length === 3 && segments[2].path !== 'feedback') {
+    return null;
+  }
+
+  return {
+    consumed: segments,
+    posParams: {
+      taskAbbreviation: segments[1],
+      ...(segments[2] ? {mobilePane: segments[2]} : {}),
+    },
+  };
+};
+
+export const routes: Routes = [
+  {path: '', pathMatch: 'full', redirectTo: 'home'},
+  {path: 'home', component: HomeComponent},
+  {path: 'sign_in', component: SignInComponent},
+  {path: 'welcome', component: WelcomeComponent},
+  {path: 'unauthorised', component: UnauthorisedComponent},
+  {path: 'timeout', component: TimeoutComponent},
+  {path: 'success-close', component: SuccessCloseComponent},
+  {path: 'edit_profile', component: EditProfileComponent},
+  {path: 'notifications', component: NotificationsPageComponent},
+  {
+    path: 'unit-hub',
+    loadComponent: () => import('./unit-hub/unit-hub.component').then((m) => m.UnitHubComponent),
+    canActivate: [roleWhitelistGuard],
+    data: {
+      pageTitle: 'Unit Hub',
+      roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
+    },
+  },
+  {
+    path: 'theme-demo',
+    loadComponent: () =>
+      import('./common/theme/theme-demo.component').then((m) => m.ThemeDemoComponent),
+    data: {pageTitle: 'Theme foundation'},
+  },
+  {
+    path: 'demo-controls',
+    component: DemoControlsComponent,
+    canActivate: [demoToolsGuard],
+    data: {pageTitle: 'Demo controls'},
+  },
+  {path: 'eula', component: AcceptEulaComponent},
+  {path: 'lti', component: LtiDashboardComponent},
+  {path: 'lti/link', component: LtiUnitLinkComponent},
+  // Deliberately open: this is an empty iframe onto the bundled JPlag viewer at /JPlag/. It
+  // makes no api call and shows nothing until staff hand it a blob url that only exists in
+  // their own tab, so there is nothing here to guard. Listed in DELIBERATELY_OPEN_PATHS.
+  {path: 'jplag-report-viewer', component: JplagReportViewerComponent},
+  {
+    path: 'projects/:projectId/task_def_id/:taskDefId/scorm-player/normal',
+    component: ScormPlayerComponent,
+    data: {mode: 'normal'},
+  },
+  {
+    path: 'projects/:projectId/task_def_id/:taskDefId/scorm-player/review/:testAttemptId',
+    component: ScormPlayerComponent,
+    data: {mode: 'review'},
+  },
+  {
+    path: 'task_def_id/:taskDefId/preview-scorm',
+    component: ScormPlayerComponent,
+    data: {mode: 'preview'},
+  },
+  {
+    path: 'projects/:projectId/task_def_id/:taskDefId/submission_files/download',
+    component: SubmissionFilesDownloadComponent,
+  },
+  {
+    path: 'view-all-units',
+    component: FUnitsComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {mode: 'tutor', roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']},
+  },
+  // Deliberately open: 'student' mode lists the signed in user's own enrolled units.
+  {path: 'view-all-projects', component: FUnitsComponent, data: {mode: 'student'}},
+  {
+    path: 'dashboard',
+    component: CrossDashboardComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {roleWhitelist: ['Student'], pageTitle: 'Dashboard'},
+  },
+  {
+    path: 'admin/units',
+    component: FUnitsComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {mode: 'admin', roleWhitelist: ['Admin', 'Auditor', 'Convenor']},
+  },
+  {
+    path: 'admin/users',
+    component: FUsersComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {roleWhitelist: ['Admin', 'Auditor']},
+  },
+  {
+    path: 'admin/institution-settings',
+    component: InstitutionSettingsComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {roleWhitelist: ['Admin', 'Auditor']},
+  },
+  {
+    path: 'admin/institution-settings/:tab',
+    component: InstitutionSettingsComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {roleWhitelist: ['Admin', 'Auditor']},
+  },
+  {
+    path: 'tutor-discussion',
+    component: TutorDiscussionComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {task: 'Discussion', roleWhitelist: ['Admin', 'Auditor', 'Tutor']},
+  },
+  // Top level, so the guard checks the SYSTEM role here, not a unit role. Convenor is in the
+  // list because this url is open to system convenors today and guarding it must not take that
+  // away. It is a wider list than 'tutor-discussion' above, which this change does not touch.
+  {
+    path: 'tutor-attendance',
+    component: TutorDiscussionComponent,
+    canActivate: [roleWhitelistGuard],
+    data: {
+      attendance: true,
+      task: 'Check-in',
+      roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+    },
+  },
+  {
+    path: 'units',
+    children: [
+      {path: '', pathMatch: 'full', redirectTo: '/home'},
+      {
+        path: ':unitId',
+        component: UnitRootStateComponent,
+        resolve: {
+          unit: resolveUnit,
+        },
+        children: [
+          {path: '', pathMatch: 'full', redirectTo: 'tasks/inbox'},
+          {
+            path: 'analytics',
+            component: UnitAnalyticsComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {
+              task: 'Unit Analytics',
+              roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+            },
+          },
+          {
+            path: 'students/groups',
+            component: UnitGroupsComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {
+              task: 'Student Groups',
+              roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+            },
+          },
+          {
+            path: 'students/portfolios',
+            component: PortfoliosComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {
+              task: 'Student Portfolios',
+              roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+            },
+          },
+          {
+            path: 'students/portfolios/:projectId',
+            component: PortfoliosComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {
+              task: 'Student Portfolios',
+              roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+            },
+          },
+          {
+            path: 'students/portfolios/:projectId/:tab',
+            component: PortfoliosComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {
+              task: 'Student Portfolios',
+              roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+            },
+          },
+          {
+            path: 'students/portfolios/:projectId/:tab/:taskAbbreviation',
+            component: PortfoliosComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {
+              task: 'Student Portfolios',
+              roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+            },
+          },
+          {
+            path: 'students',
+            component: StudentsListComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {task: 'Student List', roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor']},
+          },
+          {
+            path: 'admin',
+            component: UnitAdminStateComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {task: 'Unit Administration', roleWhitelist: ['Convenor', 'Admin', 'Auditor']},
+          },
+          {
+            path: 'admin/:tab',
+            component: UnitAdminStateComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {task: 'Unit Administration', roleWhitelist: ['Convenor', 'Admin', 'Auditor']},
+          },
+          {
+            path: 'rollover',
+            component: RolloverComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {task: 'Unit Rollover', roleWhitelist: ['Convenor', 'Admin', 'Auditor']},
+          },
+          // Convenor is in both lists because the staff menu offers Discussion and Check-in to
+          // every unit role, and the header QR button routes non students straight to
+          // 'discussion'. Do not narrow these to the 'tutor-discussion' list at the top level:
+          // that one is matched against the system role, this one against the unit role.
+          {
+            path: 'discussion',
+            component: TutorDiscussionComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {task: 'Discussion', roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor']},
+          },
+          {
+            path: 'check-in',
+            component: TutorDiscussionComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {
+              attendance: true,
+              task: 'Check-in',
+              roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor'],
+            },
+          },
+          {
+            path: 'tasks',
+            pathMatch: 'full',
+            component: TaskViewerStateComponent,
+            data: {task: 'Task Lists', roleWhitelist: ['Convenor', 'Admin', 'Auditor']},
+            canActivate: [roleWhitelistGuard],
+          },
+          {
+            // The guard on this parent runs for every inbox child below it.
+            path: 'tasks',
+            canActivate: [roleWhitelistGuard],
+            data: {roleWhitelist: ['Convenor', 'Admin', 'Auditor', 'Tutor']},
+
+            children: [
+              {path: '', pathMatch: 'full', redirectTo: 'inbox'},
+              {
+                path: 'inbox',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'inbox', task: 'Task Inbox'},
+              },
+              {
+                path: 'inbox/:studentId/:taskDefAbbr',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'inbox', task: 'Task Inbox'},
+              },
+              {
+                path: 'definition',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'definition', task: 'Task Explorer'},
+              },
+              {
+                path: 'definition/:studentId/:taskDefAbbr',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'definition', task: 'Task Explorer'},
+              },
+              {
+                path: 'moderation',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'moderation', task: 'Task Moderation'},
+              },
+              {
+                path: 'moderation/:studentId/:taskDefAbbr',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'moderation', task: 'Task Moderation'},
+              },
+              {
+                path: 'overflow',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'overflow', task: 'Task Overflow'},
+              },
+              {
+                path: 'overflow/:studentId/:taskDefAbbr',
+                component: UnitTaskInboxStateComponent,
+                data: {routeMode: 'overflow', task: 'Task Overflow'},
+              },
+            ],
+          },
+          // Deliberately the same list as the 'tasks' viewer above, which is narrower than the
+          // inbox children. This is the whole unit task list, not one tutor's queue. A deep link
+          // meant for a tutor belongs on 'tasks/inbox/:studentId/:taskDefAbbr', which does
+          // whitelist Tutor.
+          {
+            path: 'tasks/:taskAbbreviation',
+            component: TaskViewerStateComponent,
+            canActivate: [roleWhitelistGuard],
+            data: {task: 'Task Lists', roleWhitelist: ['Convenor', 'Admin', 'Auditor']},
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: 'projects',
+    children: [
+      {path: '', pathMatch: 'full', redirectTo: '/home'},
+      {
+        path: ':projectId',
+        component: ProjectRootStateComponent,
+        resolve: {
+          project: resolveProject,
+        },
+        children: [
+          {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
+          {
+            path: 'dashboard',
+            component: ProjectDashboardComponent,
+            data: {task: 'Dashboard'},
+          },
+          {
+            matcher: projectDashboardTaskMatcher,
+            component: ProjectDashboardComponent,
+            data: {task: 'Dashboard'},
+          },
+          {path: 'plan', component: ProjectPlanComponent, data: {task: 'Plan Tasks'}},
+          {
+            path: 'portfolio',
+            component: PortfolioStateComponent,
+            data: {task: 'Portfolio Creation'},
+          },
+          {path: 'groups', component: ProjectGroupsStateComponent, data: {task: 'Groups List'}},
+          {path: 'tutorials', component: TutorialsComponent, data: {task: 'Tutorial List'}},
+        ],
+      },
+    ],
+  },
+  {path: '**', redirectTo: 'home'},
+];
diff --git a/src/app/common/archive-viewer/archive-viewer.component.html b/src/app/common/archive-viewer/archive-viewer.component.html
new file mode 100644
index 0000000000..1ff2f8290e
--- /dev/null
+++ b/src/app/common/archive-viewer/archive-viewer.component.html
@@ -0,0 +1,184 @@
+<div class="flex size-full min-h-0 max-w-full min-w-0 flex-col">
+  @if (isLoading) {
+    <div class="flex min-h-80 flex-1 flex-col items-center justify-center gap-2 text-slate-600">
+      <mat-spinner diameter="40" strokeWidth="3"></mat-spinner>
+      <span>Loading archive...</span>
+    </div>
+  } @else if (errorMessage) {
+    <div class="flex min-h-80 flex-1 flex-col items-center justify-center gap-2 text-red-700">
+      <mat-icon class="size-5">error_outline</mat-icon>
+      <span>{{ errorMessage }}</span>
+    </div>
+  } @else if (!archiveFile) {
+    <div class="flex min-h-80 flex-1 flex-col items-center justify-center gap-2 text-slate-600">
+      <mat-icon class="size-5">folder_zip</mat-icon>
+      <span>Select an archive to preview.</span>
+    </div>
+  } @else if (!hasFiles) {
+    <div class="flex min-h-80 flex-1 flex-col items-center justify-center gap-2 text-slate-600">
+      <mat-icon class="size-5">folder_off</mat-icon>
+      <span>No files to display.</span>
+    </div>
+  } @else {
+    @if (!readOnly && saveEndpoint) {
+      <div class="flex items-center justify-end px-2 pt-2">
+        <button
+          class="flex items-center gap-1"
+          color="primary"
+          mat-flat-button
+          [disabled]="!canSave"
+          (click)="saveArchive()"
+        >
+          @if (isSaving) {
+            <mat-icon class="animate-spin">sync</mat-icon>
+          }
+          {{ isSaving ? 'Saving...' : 'Save Archive' }}
+        </button>
+      </div>
+    }
+
+    @if (navigationMode === 'tree') {
+      <div class="flex min-h-0 w-full flex-1 border-t border-slate-200">
+        <aside
+          class="w-44 max-w-[45%] min-w-52 shrink-0 overflow-y-auto border-r border-slate-200 bg-slate-50/60 py-1"
+        >
+          <ng-container
+            [ngTemplateOutlet]="treeNodesTemplate"
+            [ngTemplateOutletContext]="{$implicit: fileTreeNodes, depth: 0}"
+          ></ng-container>
+        </aside>
+        <div class="flex min-w-0 flex-1 flex-col">
+          <ng-container [ngTemplateOutlet]="selectedFilePane"></ng-container>
+        </div>
+      </div>
+    } @else {
+      <div
+        class="sticky top-0 z-10 w-full max-w-full min-w-0 shrink-0 overflow-x-auto overflow-y-hidden bg-white px-0.5 pb-0.5"
+      >
+        <div class="inline-block min-w-full">
+          <mat-button-toggle-group
+            class="inline-flex whitespace-nowrap"
+            style="display: inline-flex; width: max-content"
+            [value]="selectedTab"
+            (change)="selectTab($event.value)"
+          >
+            @for (file of files; track trackByPath($index, file); let i = $index) {
+              <mat-button-toggle class="flex-none" [title]="file.path" [value]="i">
+                <span class="inline-block max-w-36 truncate align-bottom">{{ file.tabLabel }}</span>
+              </mat-button-toggle>
+            }
+          </mat-button-toggle-group>
+        </div>
+      </div>
+      <ng-container [ngTemplateOutlet]="selectedFilePane"></ng-container>
+    }
+  }
+</div>
+
+<ng-template #selectedFilePane>
+  @if (selectedFile; as file) {
+    <div class="flex min-h-0 w-full flex-1 flex-col">
+      @if (showPreview) {
+        @if (file.isLoading || !file.isLoaded) {
+          <div
+            class="flex min-h-[350px] w-full flex-1 items-center justify-center gap-2 text-slate-600"
+          >
+            <mat-spinner [diameter]="42"></mat-spinner>
+            <span>Loading {{ file.name }}...</span>
+          </div>
+        } @else if (isArchiveCodeOrTextFile(file)) {
+          <div class="archive-editor-wrapper flex min-h-0 flex-1 flex-col">
+            <ng-container
+              [ngTemplateOutlet]="filePathLabel"
+              [ngTemplateOutletContext]="{$implicit: file.path}"
+            ></ng-container>
+            <ngx-monaco-editor
+              class="archive-monaco block size-full flex-1"
+              [ngModel]="file.textContent"
+              [options]="editorOptionsForSelectedFile"
+              (ngModelChange)="onEditorChange($event)"
+            ></ngx-monaco-editor>
+          </div>
+        } @else if (isArchiveImageFile(file)) {
+          <div class="flex min-h-0 w-full flex-1 flex-col">
+            <ng-container
+              [ngTemplateOutlet]="filePathLabel"
+              [ngTemplateOutletContext]="{$implicit: file.path}"
+            ></ng-container>
+            <div class="flex min-h-[350px] w-full flex-1 items-center justify-center p-2.5">
+              <img
+                class="max-h-full max-w-full object-contain"
+                [alt]="file.name"
+                [src]="file.blobUrl"
+              />
+            </div>
+          </div>
+        } @else if (isArchivePdfFile(file)) {
+          <div class="archive-pdf-wrapper flex min-h-0 flex-1 flex-col">
+            <ng-container
+              [ngTemplateOutlet]="filePathLabel"
+              [ngTemplateOutletContext]="{$implicit: file.path}"
+            ></ng-container>
+            <f-pdf-viewer class="block size-full flex-1" [pdfUrl]="file.blobUrl"></f-pdf-viewer>
+          </div>
+        } @else {
+          <div
+            class="flex min-h-[350px] flex-1 items-center justify-center gap-2.5 px-2.5 text-slate-600"
+          >
+            <mat-icon class="size-6">insert_drive_file</mat-icon>
+            <div>
+              <p class="mb-2">This file type cannot be previewed.</p>
+              <button color="primary" mat-stroked-button (click)="downloadSelectedFile()">
+                <mat-icon>download</mat-icon>
+                Download {{ file.name }}
+              </button>
+            </div>
+          </div>
+        }
+      }
+    </div>
+  }
+</ng-template>
+
+<ng-template #treeNodesTemplate let-depth="depth" let-nodes>
+  @for (node of nodes; track trackTreeNode($index, node)) {
+    @if (node.isDirectory) {
+      <div
+        class="flex items-center gap-0.5 py-0.5 pr-1 text-slate-600"
+        [style.paddingLeft.px]="8 + depth * 14"
+        [title]="node.path"
+      >
+        <mat-icon class="small-icon text-slate-500">folder</mat-icon>
+        <span class="truncate">{{ node.name }}</span>
+      </div>
+      <ng-container
+        [ngTemplateOutlet]="treeNodesTemplate"
+        [ngTemplateOutletContext]="{$implicit: node.children, depth: depth + 1}"
+      ></ng-container>
+    } @else {
+      <button
+        class="flex w-full items-center gap-0.5 py-0.5 pr-1 text-left hover:bg-slate-200/70"
+        type="button"
+        [ngClass]="{
+          'bg-slate-200/80 text-slate-900': selectedTab === node.fileIndex,
+          'text-slate-700': selectedTab !== node.fileIndex,
+        }"
+        [style.paddingLeft.px]="8 + depth * 14"
+        [title]="node.path"
+        (click)="selectTreeNode(node)"
+      >
+        <mat-icon class="small-icon text-slate-500">description</mat-icon>
+        <span class="truncate">{{ treeNodeLabel(node) }}</span>
+      </button>
+    }
+  }
+</ng-template>
+
+<ng-template #filePathLabel let-path>
+  <div
+    class="shrink-0 truncate overflow-hidden px-2.5 py-1 whitespace-nowrap text-slate-700"
+    [title]="path"
+  >
+    {{ path }}
+  </div>
+</ng-template>
diff --git a/src/app/common/archive-viewer/archive-viewer.component.scss b/src/app/common/archive-viewer/archive-viewer.component.scss
new file mode 100644
index 0000000000..62defd6df8
--- /dev/null
+++ b/src/app/common/archive-viewer/archive-viewer.component.scss
@@ -0,0 +1,34 @@
+:host {
+  display: block;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.archive-editor-wrapper,
+.archive-pdf-wrapper {
+  width: 100%;
+  height: 100%;
+  min-height: 350px;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+:host ::ng-deep .archive-monaco {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:host ::ng-deep .archive-monaco .monaco-editor,
+:host ::ng-deep .archive-monaco .overflow-guard,
+:host ::ng-deep .archive-monaco .monaco-scrollable-element {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.small-icon {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
diff --git a/src/app/common/archive-viewer/archive-viewer.component.ts b/src/app/common/archive-viewer/archive-viewer.component.ts
new file mode 100644
index 0000000000..ef08675259
--- /dev/null
+++ b/src/app/common/archive-viewer/archive-viewer.component.ts
@@ -0,0 +1,467 @@
+import JSZip from 'jszip';
+import {HttpClient, HttpResponse} from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {firstValueFrom} from 'rxjs';
+import {AlertService} from '../services/alert.service';
+import {
+  ArchiveFileEntry,
+  classifyArchiveFile,
+  createArchiveFileEntry,
+  createArchiveFilePlaceholder,
+  getMonacoLanguageForPath,
+  getOrderedUploadFileIndex,
+  isArchiveCodeOrTextFile,
+  isArchiveImageFile,
+  isArchivePathHidden,
+  isArchivePdfFile,
+} from './archive-viewer.helpers';
+
+type ArchiveViewerNavigationMode = 'tabs' | 'tree';
+
+interface ArchiveFileTreeNode {
+  key: string;
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  fileIndex: number | null;
+  children: ArchiveFileTreeNode[];
+}
+
+@Component({
+  selector: 'f-archive-viewer',
+  templateUrl: './archive-viewer.component.html',
+  styleUrls: ['./archive-viewer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ArchiveViewerComponent implements OnChanges, OnDestroy {
+  @Input() archiveFile: File | Blob | null = null;
+  @Input() navigationMode: ArchiveViewerNavigationMode = 'tabs';
+  @Input() readOnly = true;
+  @Input() uploadRequirementNames: string[] = [];
+  @Input() showPreview = true;
+  @Input() preloadSelectedFile = false;
+  @Input() saveEndpoint?: string;
+  @Input() saveMethod: 'POST' | 'PUT' = 'POST';
+  @Input() saveFieldName = 'file';
+  @Input() saveFileName = 'archive.zip';
+
+  @Output() filesLoaded: EventEmitter<number> = new EventEmitter();
+  @Output() saveSuccess: EventEmitter<HttpResponse<unknown>> = new EventEmitter();
+  @Output() saveError: EventEmitter<unknown> = new EventEmitter();
+  @Output() selectedFileChanged: EventEmitter<ArchiveFileEntry | null> = new EventEmitter();
+
+  public files: ArchiveFileEntry[] = [];
+  public selectedTab = 0;
+  public isLoading = false;
+  public isSaving = false;
+  public errorMessage: string | null = null;
+  public fileTreeNodes: ArchiveFileTreeNode[] = [];
+
+  public readonly isArchiveCodeOrTextFile = isArchiveCodeOrTextFile;
+  public readonly isArchiveImageFile = isArchiveImageFile;
+  public readonly isArchivePdfFile = isArchivePdfFile;
+
+  public readonly editorOptions = {
+    theme: 'vs',
+    language: 'plaintext',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    renderMinimap: false,
+    scrollbar: {
+      alwaysConsumeMouseWheel: false,
+    },
+    minimap: {
+      enabled: false,
+    },
+  };
+
+  public editorOptionsForSelectedFile = {
+    ...this.editorOptions,
+    language: 'plaintext',
+    readOnly: true,
+  };
+
+  constructor(
+    private http: HttpClient,
+    private alerts: AlertService,
+  ) {}
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['archiveFile']) {
+      void this.loadArchive();
+    }
+
+    if (changes['uploadRequirementNames']) {
+      this.applyUploadRequirementLabels(this.files);
+      this.rebuildFileTree();
+    }
+
+    if (changes['readOnly']) {
+      this.updateEditorOptions();
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.clearFiles();
+  }
+
+  public get selectedFile(): ArchiveFileEntry | null {
+    return this.files[this.selectedTab] ?? null;
+  }
+
+  public get hasFiles(): boolean {
+    return this.files.length > 0;
+  }
+
+  public get hasDirtyFiles(): boolean {
+    return this.files.some((entry) => entry.dirty);
+  }
+
+  public get canSave(): boolean {
+    return !this.readOnly && !!this.saveEndpoint && this.hasDirtyFiles && !this.isSaving;
+  }
+
+  public trackByPath(index: number, file: ArchiveFileEntry): string {
+    return `${index}-${file.path}`;
+  }
+
+  public trackTreeNode(_index: number, node: ArchiveFileTreeNode): string {
+    return node.key;
+  }
+
+  public selectTreeNode(node: ArchiveFileTreeNode): void {
+    if (node.fileIndex === null) {
+      return;
+    }
+
+    this.selectTab(node.fileIndex);
+  }
+
+  public treeNodeLabel(node: ArchiveFileTreeNode): string {
+    return node.fileIndex === null ? node.name : this.files[node.fileIndex]?.tabLabel || node.name;
+  }
+
+  public selectTab(index: number): void {
+    this.selectedTab = index;
+    this.updateEditorOptions();
+    void this.loadAndPrepareSelectedFile();
+  }
+
+  public selectedFileLanguage(): string {
+    const selectedFile = this.selectedFile;
+    if (!selectedFile) {
+      return 'plaintext';
+    }
+
+    return selectedFile.language ?? getMonacoLanguageForPath(selectedFile.path) ?? 'plaintext';
+  }
+
+  public onEditorChange(value: string): void {
+    const selectedFile = this.selectedFile;
+    if (
+      !selectedFile ||
+      !selectedFile.isLoaded ||
+      this.readOnly ||
+      !isArchiveCodeOrTextFile(selectedFile)
+    ) {
+      return;
+    }
+
+    selectedFile.textContent = value;
+    selectedFile.dirty = selectedFile.textContent !== selectedFile.originalTextContent;
+  }
+
+  public async downloadSelectedFile(): Promise<void> {
+    const file = this.selectedFile;
+    await this.ensureFileLoaded(file);
+    if (!file?.blobUrl) {
+      return;
+    }
+
+    const downloadLink = document.createElement('a');
+    downloadLink.href = file.blobUrl;
+    downloadLink.download = file.name;
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    downloadLink.parentNode?.removeChild(downloadLink);
+  }
+
+  public async saveArchive(): Promise<void> {
+    if (!this.canSave || !this.saveEndpoint) {
+      return;
+    }
+
+    this.isSaving = true;
+
+    try {
+      const zip = new JSZip();
+
+      for (const file of this.files) {
+        if (file.isLoaded && isArchiveCodeOrTextFile(file) && file.textContent !== undefined) {
+          const encoded = new TextEncoder().encode(file.textContent);
+          file.data = encoded;
+          file.originalTextContent = file.textContent;
+          zip.file(file.path, encoded);
+          continue;
+        }
+
+        if (file.data) {
+          zip.file(file.path, file.data);
+          continue;
+        }
+
+        const rawData = await file.zipObject.async('uint8array');
+        zip.file(file.path, rawData);
+      }
+
+      const archiveBlob = await zip.generateAsync({type: 'blob'});
+      const archiveUpload = new File([archiveBlob], this.saveFileName, {type: 'application/zip'});
+      const formData = new FormData();
+      formData.append(this.saveFieldName, archiveUpload);
+
+      const request =
+        this.saveMethod === 'PUT'
+          ? this.http.put<unknown>(this.saveEndpoint, formData, {observe: 'response'})
+          : this.http.post<unknown>(this.saveEndpoint, formData, {observe: 'response'});
+
+      const response = await firstValueFrom(request);
+      for (const file of this.files) {
+        file.dirty = false;
+      }
+
+      this.alerts.success('Archive saved', 3000);
+      this.saveSuccess.emit(response);
+    } catch (error) {
+      this.alerts.error(`Failed to save archive: ${error}`, 6000);
+      this.saveError.emit(error);
+    } finally {
+      this.isSaving = false;
+    }
+  }
+
+  private async loadArchive(): Promise<void> {
+    const requestedArchive = this.archiveFile;
+
+    this.errorMessage = null;
+    this.selectedTab = 0;
+    this.clearFiles();
+
+    if (!requestedArchive) {
+      return;
+    }
+
+    this.isLoading = true;
+
+    try {
+      const zipData = await requestedArchive.arrayBuffer();
+      const zip = await JSZip.loadAsync(zipData);
+      const paths = Object.keys(zip.files).sort((a, b) => a.localeCompare(b));
+      const loadedFiles: ArchiveFileEntry[] = [];
+
+      for (const path of paths) {
+        const zipFile = zip.files[path];
+        if (!zipFile || zipFile.dir || isArchivePathHidden(path)) {
+          continue;
+        }
+
+        loadedFiles.push(createArchiveFilePlaceholder(path, zipFile));
+      }
+
+      if (requestedArchive !== this.archiveFile) {
+        this.revokeUrls(loadedFiles);
+        return;
+      }
+
+      this.files = loadedFiles;
+      this.applyUploadRequirementLabels(this.files);
+      this.rebuildFileTree();
+      this.filesLoaded.emit(this.files.length);
+
+      if (this.files.length === 0) {
+        this.errorMessage = 'This archive does not contain any files.';
+        this.selectedFileChanged.emit(null);
+        return;
+      }
+
+      this.updateEditorOptions();
+      if (this.showPreview || this.preloadSelectedFile) {
+        void this.loadAndPrepareSelectedFile();
+      } else {
+        this.selectedFileChanged.emit(null);
+      }
+    } catch {
+      this.errorMessage = 'Unable to read archive. Please provide a valid zip file.';
+      this.filesLoaded.emit(0);
+    } finally {
+      if (requestedArchive === this.archiveFile) {
+        this.isLoading = false;
+      }
+    }
+  }
+
+  private clearFiles(): void {
+    this.revokeUrls(this.files);
+    this.files = [];
+    this.fileTreeNodes = [];
+    this.selectedFileChanged.emit(null);
+  }
+
+  private applyUploadRequirementLabels(files: ArchiveFileEntry[]): void {
+    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
+      const file = files[fileIndex];
+      const orderedIndex = getOrderedUploadFileIndex(file.path);
+      const requirementIndex = orderedIndex ?? fileIndex;
+      const requirementName = this.uploadRequirementNames[requirementIndex];
+      file.tabLabel = requirementName?.trim() || file.name;
+    }
+  }
+
+  private rebuildFileTree(): void {
+    const rootNodes: ArchiveFileTreeNode[] = [];
+
+    const getOrCreateNode = (
+      siblings: ArchiveFileTreeNode[],
+      node: Pick<ArchiveFileTreeNode, 'name' | 'path' | 'isDirectory' | 'fileIndex'>,
+    ): ArchiveFileTreeNode => {
+      const existing = siblings.find(
+        (candidate) =>
+          candidate.name === node.name &&
+          candidate.path === node.path &&
+          candidate.isDirectory === node.isDirectory,
+      );
+      if (existing) {
+        if (!node.isDirectory && node.fileIndex !== null) {
+          existing.fileIndex = node.fileIndex;
+        }
+        return existing;
+      }
+
+      const createdNode: ArchiveFileTreeNode = {
+        key: `${node.isDirectory ? 'dir' : 'file'}:${node.path}`,
+        name: node.name,
+        path: node.path,
+        isDirectory: node.isDirectory,
+        fileIndex: node.fileIndex,
+        children: [],
+      };
+      siblings.push(createdNode);
+      return createdNode;
+    };
+
+    for (let fileIndex = 0; fileIndex < this.files.length; fileIndex++) {
+      const file = this.files[fileIndex];
+      const segments = file.path.split('/').filter((segment) => segment.length > 0);
+      if (segments.length === 0) {
+        continue;
+      }
+
+      let currentNodes = rootNodes;
+      let currentPath = '';
+      for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        const isFile = i === segments.length - 1;
+        currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+
+        const node = getOrCreateNode(currentNodes, {
+          name: segment,
+          path: currentPath,
+          isDirectory: !isFile,
+          fileIndex: isFile ? fileIndex : null,
+        });
+
+        if (!isFile) {
+          currentNodes = node.children;
+        }
+      }
+    }
+
+    const sortNodes = (nodes: ArchiveFileTreeNode[]): void => {
+      nodes.sort((a, b) => {
+        if (a.isDirectory !== b.isDirectory) {
+          return a.isDirectory ? -1 : 1;
+        }
+        return a.name.localeCompare(b.name);
+      });
+
+      for (const node of nodes) {
+        if (node.children.length > 0) {
+          sortNodes(node.children);
+        }
+      }
+    };
+
+    sortNodes(rootNodes);
+    this.fileTreeNodes = rootNodes;
+  }
+
+  private revokeUrls(files: ArchiveFileEntry[]): void {
+    for (const file of files) {
+      if (file.blobUrl) {
+        URL.revokeObjectURL(file.blobUrl);
+      }
+    }
+  }
+
+  private async ensureFileLoaded(file: ArchiveFileEntry | null): Promise<void> {
+    if (!file || file.isLoaded || file.isLoading) {
+      return;
+    }
+
+    file.isLoading = true;
+    try {
+      const data = await file.zipObject.async('uint8array');
+      const classification = classifyArchiveFile(file.path, data);
+      const enriched = createArchiveFileEntry(file, classification, data);
+      Object.assign(file, enriched);
+      if (file === this.selectedFile) {
+        this.updateEditorOptions();
+      }
+    } catch {
+      file.isLoading = false;
+      this.alerts.error(`Unable to open file '${file.path}' from archive`, 6000);
+    }
+  }
+
+  private async loadAndPrepareSelectedFile(): Promise<void> {
+    const file = this.selectedFile;
+    await this.ensureFileLoaded(file);
+
+    if (!file || file !== this.selectedFile || !file.isLoaded) {
+      this.selectedFileChanged.emit(null);
+      return;
+    }
+
+    this.prepareFileForDisplay(file);
+    this.selectedFileChanged.emit(file);
+  }
+
+  private prepareFileForDisplay(file: ArchiveFileEntry): void {
+    if (file.kind !== 'pdf' || !file.blob) {
+      return;
+    }
+
+    if (file.blobUrl) {
+      URL.revokeObjectURL(file.blobUrl);
+    }
+
+    file.blobUrl = URL.createObjectURL(file.blob);
+  }
+
+  private updateEditorOptions(): void {
+    this.editorOptionsForSelectedFile = {
+      ...this.editorOptions,
+      language: this.selectedFileLanguage(),
+      readOnly: this.readOnly,
+    };
+  }
+}
diff --git a/src/app/common/archive-viewer/archive-viewer.helpers.ts b/src/app/common/archive-viewer/archive-viewer.helpers.ts
new file mode 100644
index 0000000000..e3e70a7313
--- /dev/null
+++ b/src/app/common/archive-viewer/archive-viewer.helpers.ts
@@ -0,0 +1,256 @@
+import JSZip from 'jszip';
+import * as monaco from 'monaco-editor';
+
+export type ArchiveFileKind = 'code' | 'image' | 'pdf' | 'text' | 'binary';
+
+export interface ArchiveFileClassification {
+  kind: ArchiveFileKind;
+  mimeType: string;
+  textContent?: string;
+  language?: string;
+}
+
+export interface ArchiveFileEntry {
+  path: string;
+  name: string;
+  tabLabel: string;
+  kind: ArchiveFileKind;
+  mimeType: string;
+  language?: string;
+  textContent?: string;
+  originalTextContent?: string;
+  data?: Uint8Array;
+  blob?: Blob;
+  blobUrl?: string;
+  dirty: boolean;
+  isLoaded: boolean;
+  isLoading: boolean;
+  zipObject: JSZip.JSZipObject;
+}
+
+type ArchiveFileKindLike = Pick<ArchiveFileEntry, 'kind'> | null | undefined;
+type ArchiveFilePreviewLike = Pick<ArchiveFileEntry, 'kind' | 'blobUrl'> | null | undefined;
+
+export function isArchiveCodeOrTextFile(file: ArchiveFileKindLike): boolean {
+  return file?.kind === 'code' || file?.kind === 'text';
+}
+
+export function isArchiveImageFile(file: ArchiveFilePreviewLike): boolean {
+  return file?.kind === 'image' && !!file.blobUrl;
+}
+
+export function isArchivePdfFile(file: ArchiveFilePreviewLike): boolean {
+  return file?.kind === 'pdf' && !!file.blobUrl;
+}
+
+export function createArchiveFilePlaceholder(
+  path: string,
+  zipObject: JSZip.JSZipObject,
+): ArchiveFileEntry {
+  const name = getBaseName(path);
+  return {
+    path,
+    name,
+    tabLabel: name,
+    kind: 'binary',
+    mimeType: 'application/octet-stream',
+    dirty: false,
+    isLoaded: false,
+    isLoading: false,
+    zipObject,
+  };
+}
+
+export function getOrderedUploadFileIndex(path: string): number | null {
+  const fileName = getBaseName(path);
+  const match = fileName.match(/^(\d+)-/);
+  if (!match) {
+    return null;
+  }
+
+  const parsed = Number.parseInt(match[1], 10);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+}
+
+export function isArchivePathHidden(path: string): boolean {
+  const segments = path.split('/').filter((segment) => segment.length > 0);
+  return segments.some((segment) => segment.startsWith('.') || segment === '__MACOSX');
+}
+
+function toArrayBuffer(data: Uint8Array): ArrayBuffer {
+  return new Uint8Array(data).buffer;
+}
+
+export function createArchiveFileEntry(
+  existing: ArchiveFileEntry,
+  classification: ArchiveFileClassification,
+  data: Uint8Array,
+): ArchiveFileEntry {
+  const blob = new Blob([toArrayBuffer(data)], {type: classification.mimeType});
+  const shouldCreateBlobUrl =
+    classification.kind === 'image' ||
+    classification.kind === 'pdf' ||
+    classification.kind === 'binary';
+
+  return {
+    ...existing,
+    kind: classification.kind,
+    mimeType: classification.mimeType,
+    language: classification.language,
+    textContent: classification.textContent,
+    originalTextContent: classification.textContent,
+    data,
+    blob,
+    blobUrl: shouldCreateBlobUrl ? URL.createObjectURL(blob) : undefined,
+    dirty: false,
+    isLoaded: true,
+    isLoading: false,
+  };
+}
+
+export function classifyArchiveFile(path: string, data: Uint8Array): ArchiveFileClassification {
+  const detectedMimeType = detectMimeType(data);
+  if (detectedMimeType === 'application/pdf') {
+    return {kind: 'pdf', mimeType: detectedMimeType};
+  }
+
+  if (detectedMimeType.startsWith('image/')) {
+    return {kind: 'image', mimeType: detectedMimeType};
+  }
+
+  if (isProbablyText(data)) {
+    const decoded = decodeUtf8(data);
+    if (decoded !== null) {
+      const language = getMonacoLanguageForPath(path);
+      if (language && language !== 'plaintext') {
+        return {kind: 'code', mimeType: 'text/plain', textContent: decoded, language};
+      }
+
+      return {kind: 'text', mimeType: 'text/plain', textContent: decoded, language: 'plaintext'};
+    }
+  }
+
+  return {kind: 'binary', mimeType: detectedMimeType || 'application/octet-stream'};
+}
+
+export function getMonacoLanguageForPath(path: string): string | undefined {
+  const fileName = getBaseName(path).toLowerCase();
+  const allLanguages = monaco?.languages?.getLanguages?.() ?? [];
+
+  for (const language of allLanguages) {
+    if (language.filenames?.some((f) => f.toLowerCase() === fileName)) {
+      return language.id;
+    }
+    if (language.extensions?.some((ext) => fileName.endsWith(ext.toLowerCase()))) {
+      return language.id;
+    }
+  }
+
+  return undefined;
+}
+
+function getBaseName(path: string): string {
+  const lastSlash = path.lastIndexOf('/');
+  return lastSlash >= 0 ? path.substring(lastSlash + 1) : path;
+}
+
+function decodeUtf8(data: Uint8Array): string | null {
+  try {
+    return new TextDecoder('utf-8', {fatal: true}).decode(data);
+  } catch {
+    return null;
+  }
+}
+
+function isProbablyText(data: Uint8Array): boolean {
+  if (data.length === 0) {
+    return true;
+  }
+
+  const limit = Math.min(data.length, 8192);
+  let suspicious = 0;
+
+  for (let i = 0; i < limit; i++) {
+    const byte = data[i];
+
+    if (byte === 0) {
+      return false;
+    }
+
+    const isPrintableAscii = byte >= 32 && byte <= 126;
+    const isAllowedControl = byte === 9 || byte === 10 || byte === 13;
+    const isUtf8Extended = byte >= 128;
+
+    if (!isPrintableAscii && !isAllowedControl && !isUtf8Extended) {
+      suspicious++;
+    }
+  }
+
+  return suspicious / limit < 0.02;
+}
+
+function detectMimeType(data: Uint8Array): string {
+  if (startsWithBytes(data, [0x25, 0x50, 0x44, 0x46, 0x2d])) {
+    return 'application/pdf';
+  }
+  if (startsWithBytes(data, [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])) {
+    return 'image/png';
+  }
+  if (startsWithBytes(data, [0xff, 0xd8, 0xff])) {
+    return 'image/jpeg';
+  }
+  if (startsWithString(data, 'GIF87a') || startsWithString(data, 'GIF89a')) {
+    return 'image/gif';
+  }
+  if (startsWithString(data, 'BM')) {
+    return 'image/bmp';
+  }
+  if (
+    startsWithString(data, 'RIFF') &&
+    data.length >= 12 &&
+    String.fromCharCode(...Array.from(data.slice(8, 12))) === 'WEBP'
+  ) {
+    return 'image/webp';
+  }
+  if (isSvg(data)) {
+    return 'image/svg+xml';
+  }
+
+  return 'application/octet-stream';
+}
+
+function isSvg(data: Uint8Array): boolean {
+  const decoded = decodeUtf8(data.slice(0, 4096));
+  if (!decoded) {
+    return false;
+  }
+
+  const trimmed = decoded.trim().toLowerCase();
+  return trimmed.includes('<svg') && trimmed.includes('</svg>');
+}
+
+function startsWithBytes(data: Uint8Array, signature: number[]): boolean {
+  if (data.length < signature.length) {
+    return false;
+  }
+
+  for (let i = 0; i < signature.length; i++) {
+    if (data[i] !== signature[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function startsWithString(data: Uint8Array, signature: string): boolean {
+  if (data.length < signature.length) {
+    return false;
+  }
+  for (let i = 0; i < signature.length; i++) {
+    if (data[i] !== signature.charCodeAt(i)) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/src/app/common/audio-player/audio-player.component.html b/src/app/common/audio-player/audio-player.component.html
index 74ddc9e934..cca85a20a3 100644
--- a/src/app/common/audio-player/audio-player.component.html
+++ b/src/app/common/audio-player/audio-player.component.html
@@ -1,11 +1,13 @@
-<div class="audio-comment-container" fxLayout="row" fxLayoutAlign="start center">
+<div class="audio-comment-container flex flex-row items-center justify-start">
   <button class="play-button" (click)="pausePlay()">
-    <i id="playButton" class="play-button fa" [ngClass]="isPlaying ? 'fa-pause-circle' : 'fa-play-circle'"></i>
+    <mat-icon class="play-button" id="playButton">{{
+      isPlaying ? 'pause_circle' : 'play_circle'
+    }}</mat-icon>
   </button>
   <mat-progress-bar
     #progressBar
-    id="progressBar"
     class="progress-bar-container"
+    id="progressBar"
     [value]="audioProgress"
     (click)="seek($event)"
   ></mat-progress-bar>
diff --git a/src/app/common/audio-player/audio-player.component.scss b/src/app/common/audio-player/audio-player.component.scss
index 853fecb304..22c4b968e8 100644
--- a/src/app/common/audio-player/audio-player.component.scss
+++ b/src/app/common/audio-player/audio-player.component.scss
@@ -11,9 +11,11 @@
     -moz-box-shadow: none;
     box-shadow: none;
 
-    i {
+    mat-icon {
       font-size: 25px;
+      height: 25px;
       margin-left: -5px;
+      width: 25px;
     }
   }
 
@@ -22,7 +24,7 @@
   padding: 0%;
   width: 100%;
 
-  i {
+  mat-icon {
     color: white;
   }
 
diff --git a/src/app/common/audio-player/audio-player.component.spec.ts b/src/app/common/audio-player/audio-player.component.spec.ts
new file mode 100644
index 0000000000..62ee19405a
--- /dev/null
+++ b/src/app/common/audio-player/audio-player.component.spec.ts
@@ -0,0 +1,34 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {AudioPlayerComponent} from './audio-player.component';
+
+// SJ-07: pausing an audio feedback comment must not rewind it to the start.
+describe('AudioPlayerComponent', () => {
+  let component: AudioPlayerComponent;
+
+  beforeEach(() => {
+    const fileDownloader = {releaseBlob: vi.fn()} as never;
+    const alerts = {error: vi.fn()} as never;
+    component = new AudioPlayerComponent(fileDownloader, alerts);
+    component.audio = {pause: vi.fn(), currentTime: 12} as never;
+  });
+
+  it('pause() stops playback without rewinding to the start', () => {
+    component.isPlaying = true;
+
+    component.pause();
+
+    expect(component.audio.pause).toHaveBeenCalledOnce();
+    expect(component.audio.currentTime).toBe(12);
+    expect(component.isPlaying).toBe(false);
+  });
+
+  it('stop() rewinds to the start', () => {
+    component.isPlaying = true;
+
+    component.stop();
+
+    expect(component.audio.pause).toHaveBeenCalledOnce();
+    expect(component.audio.currentTime).toBe(0);
+    expect(component.isPlaying).toBe(false);
+  });
+});
diff --git a/src/app/common/audio-player/audio-player.component.ts b/src/app/common/audio-player/audio-player.component.ts
index 2a1243e1c2..a09ff303bf 100644
--- a/src/app/common/audio-player/audio-player.component.ts
+++ b/src/app/common/audio-player/audio-player.component.ts
@@ -1,21 +1,34 @@
-import { HttpResponse } from '@angular/common/http';
-import { Component, Inject, Input, ViewChild, ElementRef, OnDestroy } from '@angular/core';
-import { Project, Task, TaskComment } from 'src/app/api/models/doubtfire-model';
-import { FileDownloaderService } from '../file-downloader/file-downloader.service';
-import { AlertService } from '../services/alert.service';
+import {HttpResponse} from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import {Project, Task, TaskComment} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+import {AlertService} from '../services/alert.service';
 
 @Component({
   selector: 'audio-player',
   templateUrl: './audio-player.component.html',
   styleUrls: ['./audio-player.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class AudioPlayerComponent implements OnDestroy {
   @Input() project: Project;
   @Input() task: Task;
   @Input() comment: TaskComment;
-  @Input() audioSrc: { src: string };
+  @Input() audioSrc: {src: string};
+  @Output() playingChange: EventEmitter<boolean> = new EventEmitter();
 
-  @ViewChild('progressBar', { read: ElementRef }) private progressBar: ElementRef;
+  @ViewChild('progressBar', {read: ElementRef}) private progressBar: ElementRef;
 
   private isLoaded = false;
   public isPlaying = false;
@@ -33,12 +46,13 @@ export class AudioPlayerComponent implements OnDestroy {
 
     this.audio.onended = () => {
       this.isPlaying = false;
+      this.playingChange.emit(false);
     };
   }
 
   ngOnDestroy(): void {
     // Clean up the blob
-    if ( this.audio.src ) {
+    if (this.audio.src) {
       this.fileDownloader.releaseBlob(this.audio.src);
     }
   }
@@ -59,9 +73,12 @@ export class AudioPlayerComponent implements OnDestroy {
 
   public setSrc(src: string) {
     // If there was an old blob, then free the memory it uses
-    if ( this.audio.src ) {
+    if (this.audio.src) {
       this.fileDownloader.releaseBlob(this.audio.src);
     }
+    this.isLoaded = true;
+    this.isPlaying = false;
+    this.playingChange.emit(false);
     this.audio.src = src;
     this.audio.load();
     this.audio.onloadeddata = () => {
@@ -83,12 +100,12 @@ export class AudioPlayerComponent implements OnDestroy {
 
       this.fileDownloader.downloadBlob(
         url,
-        ((blobUrl: string, response: HttpResponse<Blob>) => {
+        ((blobUrl: string, _response: HttpResponse<Blob>) => {
           this.isLoaded = true;
           this.setSrc(blobUrl);
           this.audio.src = blobUrl;
           this.audio.load();
-          if (onload) {
+          if (onLoad) {
             this.audio.onloadeddata = () => {
               fn();
             };
@@ -96,25 +113,47 @@ export class AudioPlayerComponent implements OnDestroy {
             fn();
           }
         }).bind(this),
-        ((error: any) => {
+        ((error: Error) => {
           this.alerts.error(`Error loading audio. ${error}`, 6000);
-        }).bind(this)
+        }).bind(this),
       );
     }
   }
 
+  public play() {
+    this.execWithAudio(
+      true,
+      (() => {
+        this.audio.play();
+        this.isPlaying = true;
+        this.playingChange.emit(true);
+      }).bind(this),
+    );
+  }
+
+  public stop() {
+    this.audio.pause();
+    this.audio.currentTime = 0;
+    this.isPlaying = false;
+    this.playingChange.emit(false);
+  }
+
+  public pause() {
+    this.audio.pause();
+    this.isPlaying = false;
+    this.playingChange.emit(false);
+  }
+
   public pausePlay() {
     this.execWithAudio(
       true,
       (() => {
         if (this.audio.paused) {
-          this.audio.play();
-          this.isPlaying = true;
+          this.play();
         } else {
-          this.audio.pause();
-          this.isPlaying = false;
+          this.pause();
         }
-      }).bind(this)
+      }).bind(this),
     );
   }
 }
diff --git a/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.html b/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.html
index 26d0f04358..dc55b8b008 100644
--- a/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.html
+++ b/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.html
@@ -1,41 +1,56 @@
-<div class="flex grow items-center justify-items-start">
+<div class="flex grow items-center justify-items-start" style="display: flex;">
   <p [hidden]="canRecord">
     Audio recording <br />
     only supported in modern versions of Chrome, Firefox and Safari.
   </p>
-  <mat-spinner class="send-audio-spinner" [diameter]="18" [strokeWidth]="1" [hidden]="!isSending"></mat-spinner>
+  <mat-spinner
+    class="send-audio-spinner"
+    [diameter]="18"
+    [hidden]="!isSending"
+    [strokeWidth]="1"
+  ></mat-spinner>
   <div
-    style="display: flex"
-    class="flex grow items-center justify-items-center w-full"
+    class="flex w-full grow items-center justify-items-center"
     [hidden]="!canRecord || isSending"
   >
     <button
+      aria-label="Audio recording button"
+      mat-icon-button
       style="transform: scale(1); margin-left: -15px; margin-right: 0px; display: flex"
+      [matTooltip]="isRecording ? 'Click to stop recording' : 'Click to start record'"
       (click)="recordingToggle()"
-      mat-icon-button
-      aria-label="Audio recording button"
     >
-      <mat-icon class="text-white">{{isRecording ? 'stop_circle' : 'radio_button_checked' }} </mat-icon>
+      <mat-icon class="text-white"
+        >{{isRecording ? 'stop_circle' : 'radio_button_checked' }}
+      </mat-icon>
     </button>
     <button
-      style="transform: scale(1); margin-left: -15px; margin-right: 0px; display: flex"
-      (click)="playStop()"
-      mat-icon-button
       aria-label="Play audio recording"
+      mat-icon-button
+      style="transform: scale(1); margin-left: -15px; margin-right: 0px; display: flex"
       [hidden]="!recordingAvailable"
+      (click)="playStop()"
     >
-      <mat-icon style="color: white">play_circle</mat-icon>
+      <mat-icon style="color: white">{{ isPlaying ? 'pause_circle' : 'play_circle' }}</mat-icon>
     </button>
     <audio id="audioPlayer"></audio>
-    <canvas fxFlex style="width: 100%" class="audio-visualiser" id="audio-recorder-visualiser"></canvas>
+    <div class="flex-1">
+      <canvas
+        class="audio-visualiser w-full"
+        height="22"
+        id="audio-recorder-visualiser"
+        width="100%"
+      ></canvas>
+    </div>
 
     <div id="button-wrapper">
       <button
-        style="transform: scale(1); margin-left: -15px; margin-right: 0px; display: flex"
-        (click)="sendRecording()"
-        mat-icon-button
         aria-label="Send audio recording"
+        class="disabled:opacity-30"
+        mat-icon-button
+        style="transform: scale(1); margin-left: -10px; margin-right: 0px; display: flex"
         [disabled]="!recordingAvailable"
+        (click)="sendRecording()"
       >
         <mat-icon style="color: white">send</mat-icon>
       </button>
diff --git a/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.scss b/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.scss
index 948428234e..c0ac8c8109 100644
--- a/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.scss
+++ b/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.scss
@@ -1,5 +1,3 @@
-
-
 #audioDiscussionTemplate {
   display: flex;
   align-items: center;
diff --git a/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.ts b/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.ts
index 7e91fb4709..0e470d240f 100644
--- a/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.ts
+++ b/src/app/common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder.ts
@@ -1,18 +1,24 @@
-import { Inject, Input, Component } from '@angular/core';
-import { BaseAudioRecorderComponent } from '../base-audio-recorder';
-import { audioRecorderService } from 'src/app/ajs-upgraded-providers';
-import { TaskComment, TaskCommentService, Task } from 'src/app/api/models/doubtfire-model';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {Task, TaskComment, TaskCommentService} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {MediaRecorderService} from 'src/app/common/services/recorder-service';
+import {BaseAudioRecorderComponent} from '../base-audio-recorder';
 
-@Component({ selector: 'audio-comment-recorder', templateUrl: './audio-comment-recorder.html' })
-export class AudioCommentRecorderComponent extends BaseAudioRecorderComponent {
+@Component({
+  selector: 'audio-comment-recorder',
+  templateUrl: './audio-comment-recorder.html',
+  providers: [MediaRecorderService],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class AudioCommentRecorderComponent extends BaseAudioRecorderComponent implements OnInit {
   @Input() task: Task;
   canvas: HTMLCanvasElement;
   canvasCtx: CanvasRenderingContext2D;
-  isSending: boolean;
+  isSending: boolean = false;
 
   constructor(
-    @Inject(audioRecorderService) mediaRecorderService: any,
+    private mediaRecorderService: MediaRecorderService,
     private alerts: AlertService,
     private ts: TaskCommentService,
   ) {
@@ -29,20 +35,27 @@ export class AudioCommentRecorderComponent extends BaseAudioRecorderComponent {
     this.canvas = document.getElementById('audio-recorder-visualiser') as HTMLCanvasElement;
     this.audio = document.getElementById('audioPlayer') as HTMLAudioElement;
     this.canvasCtx = this.canvas.getContext('2d');
+
+    this.audio.onended = () => {
+      this.isPlaying = false;
+      this.audio.currentTime = 0;
+    };
   }
 
   sendRecording(): void {
     this.isSending = true;
     if (this.blob && this.blob.size > 0) {
       this.ts.addComment(this.task, this.blob, 'audio').subscribe({
-        next: (comment: TaskComment) => {
+        next: (_comment: TaskComment) => {
           this.isSending = false;
           this.scrollCommentsDown();
         },
-        error: (failure: { data: { error: any } }) => {
-          this.alerts.error(`Failed to post audio. ${failure.data != null ? failure.data.error : undefined}`);
+        error: (failure: {data: {error: string}}) => {
+          this.alerts.error(
+            `Failed to post audio. ${failure.data != null ? failure.data.error : undefined}`,
+          );
           this.isSending = false;
-        }
+        },
       });
 
       this.blob = {} as Blob;
@@ -52,8 +65,10 @@ export class AudioCommentRecorderComponent extends BaseAudioRecorderComponent {
 
   private scrollCommentsDown(): void {
     setTimeout(() => {
-      const objDiv = document.querySelector('div.comments-body');
-      // let wrappedResult = angular.element(objDiv);
+      const objDiv = document.querySelector<HTMLElement>('div.comments-body');
+      if (!objDiv) {
+        return;
+      }
       objDiv.scrollTop = objDiv.scrollHeight;
     }, 50);
   }
diff --git a/src/app/common/audio-recorder/audio/base-audio-recorder.ts b/src/app/common/audio-recorder/audio/base-audio-recorder.ts
index 8c7d2718d5..5f7bb4eaf6 100644
--- a/src/app/common/audio-recorder/audio/base-audio-recorder.ts
+++ b/src/app/common/audio-recorder/audio/base-audio-recorder.ts
@@ -1,8 +1,18 @@
-import { OnInit, Directive } from '@angular/core';
+import {Directive} from '@angular/core';
+import {MediaRecorderService} from 'src/app/common/services/recorder-service';
+
+export interface RecordingEvent extends Event {
+  detail: {
+    recording: {
+      blob: Blob;
+      blobUrl: string;
+    };
+  };
+}
 
 @Directive()
-export abstract class BaseAudioRecorderComponent implements OnInit {
-  protected mediaRecorder: any = null;
+export abstract class BaseAudioRecorderComponent {
+  protected mediaRecorder: MediaRecorderService = null;
   public recordingAvailable: boolean = false;
   public isRecording: boolean = false;
   protected isPlaying: boolean = false;
@@ -18,23 +28,19 @@ export abstract class BaseAudioRecorderComponent implements OnInit {
     return Boolean(navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
   }
 
-  constructor(private mediaRecorderService: any) {}
-
-  ngOnInit(): void {
-    this.isSending = false;
-    if (this.canRecord) {
-      this.init();
-    }
-  }
+  constructor(private recorderService: MediaRecorderService) {}
 
   protected init(): void {
+    this.isSending = false;
     this.blob = new Blob();
-    this.mediaRecorder = new this.mediaRecorderService();
+    this.mediaRecorder = this.recorderService;
     // Required for recording multiple times
     this.mediaRecorder.config.stopTracksAndCloseCtxWhenFinished = true;
     // Required for visualising the stream
     this.mediaRecorder.config.createAnalyserNode = true;
-    this.mediaRecorder.em.addEventListener('recording', (evt: any) => this.onNewRecording(evt));
+    this.mediaRecorder.em.addEventListener('recording', (evt: Event) =>
+      this.onNewRecording(evt as RecordingEvent),
+    );
   }
 
   playStop(): void {
@@ -84,7 +90,7 @@ export abstract class BaseAudioRecorderComponent implements OnInit {
     this.mediaRecorder.processChunks();
   }
 
-  onNewRecording(evt: any): void {
+  onNewRecording(evt: RecordingEvent): void {
     this.blob = evt.detail.recording.blob;
     this.audio.src = evt.detail.recording.blobUrl;
     this.audio.load();
@@ -94,38 +100,36 @@ export abstract class BaseAudioRecorderComponent implements OnInit {
   // virtual implementation of visualise
   // Which can be overridden
   protected visualise(): void {
-    const draw = () => {
-      let WIDTH = this.canvas.clientWidth;
-      let HEIGHT = this.canvas.clientHeight;
+    const analyser = this.mediaRecorder.analyserNode;
+    analyser.fftSize = 2048;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
 
-      this.canvas.width = 1;
-      this.canvas.height = 1;
+    const bar_width = 2;
+    const bar_gap = 2;
 
-      this.canvas.width = WIDTH = this.canvas.clientWidth;
-      this.canvas.height = HEIGHT = this.canvas.clientHeight;
+    const draw = () => {
       requestAnimationFrame(draw);
-      analyser.getByteTimeDomainData(dataArray);
-      analyser.getByteFrequencyData(dataArray);
 
-      this.canvasCtx.clearRect(0, 0, 300, HEIGHT);
+      this.canvas.width = this.canvas.clientWidth;
+      this.canvas.height = this.canvas.clientHeight;
+      const WIDTH = this.canvas.width;
+      const HEIGHT = this.canvas.height;
+
+      analyser.getByteFrequencyData(dataArray);
 
-      const bar_width = 2;
-      const bar_gap = 2;
+      this.canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+      this.canvasCtx.fillStyle = 'white';
 
       for (let i = 0; i < WIDTH; i++) {
         const bar_x = i * (bar_width + bar_gap);
         const bar_y = HEIGHT / 2;
         const bar_height = -(dataArray[i] / 8) + 1;
-        this.canvasCtx.fillStyle = 'white';
         this.canvasCtx.fillRect(bar_x, bar_y, bar_width, bar_height);
         this.canvasCtx.fillRect(bar_x, bar_y - bar_height, bar_width, bar_height);
       }
     };
 
-    const analyser = this.mediaRecorder.analyserNode;
-    analyser.fftSize = 2048;
-    const bufferLength = analyser.frequencyBinCount;
-    const dataArray = new Uint8Array(bufferLength);
     draw();
   }
 
diff --git a/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.html b/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.html
index 0f609925ab..1d3291541a 100644
--- a/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.html
+++ b/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.html
@@ -1,30 +1,74 @@
-<div class="audio-recorder">
-  <p [hidden]="canRecord">Audio recording <br> only supported in modern versions of Chrome, Firefox and Safari.</p>
-  <mat-spinner class="send-audio-spinner" [diameter]="72" [strokeWidth]="2" [hidden]="!isSending"></mat-spinner>
-  <div [hidden]="!canRecord || isSending">
-    <div fxLayout="row" fxLayoutAlign="space-between start">
-      <div fxLayout="column" fxLayoutAlign="start start">
-        <h1>Step 1. Record some audio!</h1>
-        <button type="button" id='btnRecord' (click)="recordingToggle()" class="btn-circle-xl">
-          <p [hidden]="isRecording">record</p>
-          <i [hidden]="!isRecording" class="fa fa-square"></i>
-        </button>
-        <audio id='micTesterAudioPlayer'></audio>
+<div class="rounded-lg border border-gray-200 bg-white p-4">
+  <p class="rounded-md bg-amber-50 p-3 text-sm text-amber-800" [hidden]="canRecord">
+    Audio recording is only supported in modern versions of Chrome, Firefox and Safari.
+  </p>
+
+  <mat-spinner
+    class="mx-auto my-4"
+    [diameter]="72"
+    [hidden]="!isSending"
+    [strokeWidth]="2"
+  ></mat-spinner>
+
+  <div class="space-y-5" [hidden]="!canRecord || isSending">
+    <div class="space-y-3">
+      <div>
+        <h3 class="m-0 text-base font-semibold text-gray-900">Record some audio</h3>
+        <p class="m-0 text-sm text-gray-600">Use this quick check to confirm your microphone.</p>
       </div>
 
-      <div fxLayout="column" fxLayoutAlign="start start">
-        <canvas class="audio-visualiser" id="micTesterVisualiser"></canvas>
+      <div class="flex items-center gap-3">
+        <button
+          aria-label="Record test audio"
+          class="shrink-0 text-white shadow-sm transition"
+          id="btnRecord"
+          mat-icon-button
+          type="button"
+          [class.!bg-blue-600]="!isRecording"
+          [class.!bg-red-600]="isRecording"
+          (click)="recordingToggle()"
+        >
+          @if (isRecording) {
+          <mat-icon>stop</mat-icon>
+          } @else {
+          <mat-icon>mic</mat-icon>
+          }
+        </button>
+
+        <div
+          class="relative min-w-[180px] grow overflow-hidden rounded-lg border border-blue-100 bg-blue-50"
+        >
+          <canvas #micTesterVisualiser class="h-[72px] w-full" id="micTesterVisualiser"></canvas>
+          <div
+            class="pointer-events-none absolute inset-0 bg-gradient-to-r from-white/50 via-transparent to-white/50"
+          ></div>
+        </div>
       </div>
+
+      <audio #micTesterAudioPlayer id="micTesterAudioPlayer"></audio>
     </div>
 
-    <div style="margin-bottom: 48px;" fxLayout="row" fxLayoutAlign="space-between start">
-      <h1>Step 2. Stop the recording, and playback the audio to make sure it's audible:</h1>
-      <button type="button" id='btnPlay' color="primary" [disabled]="!recordingAvailable" (click)="playStop()"
-        mat-raised-button>Play test recording</button>
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h3 class="m-0 text-base font-semibold text-gray-900">Play it back</h3>
+        <p class="m-0 text-sm text-gray-600">
+          Stop the recording, then listen to make sure it is clear.
+        </p>
+      </div>
+      <button
+        color="primary"
+        id="btnPlay"
+        mat-raised-button
+        type="button"
+        [disabled]="!recordingAvailable"
+        (click)="playStop()"
+      >
+        Play test recording
+      </button>
     </div>
 
-    <div style="margin-bottom: 24px;" fxLayout="row" fxLayoutAlign="space-between start">
-        <h1>Step 3. Check the "Ready to go" cehckbox below if you're all set!</h1>
+    <div class="rounded-md bg-blue-50 p-3 text-sm text-blue-900">
+      When everything sounds right, check “Ready to go” below.
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.scss b/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.scss
index 4b6a37e52a..d201a8dadd 100644
--- a/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.scss
+++ b/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester-component.scss
@@ -1,5 +1,4 @@
 microphone-tester {
-
   h1 {
     font-size: 12pt;
   }
@@ -9,7 +8,9 @@ microphone-tester {
     border-radius: 72px;
     color: #fff;
     height: 72px;
-    transition: width 0.1s, height 0.1s;
+    transition:
+      width 0.1s,
+      height 0.1s;
     width: 72px;
     border: none;
     outline: none;
@@ -18,7 +19,7 @@ microphone-tester {
     top: 50%;
 
     p {
-      font-family: "Helvetica Neue", "Segoe UI", "Helvetica", "Arial", "sans-serif";
+      font-family: 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif';
       text-rendering: optimizeLegibility;
       line-height: 1.3;
       font-size: 14px;
diff --git a/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester.component.ts b/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester.component.ts
index a899577685..fb8586156b 100644
--- a/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester.component.ts
+++ b/src/app/common/audio-recorder/audio/microphone-tester/microphone-tester.component.ts
@@ -1,16 +1,31 @@
-import { Inject, Input, Component, AfterViewInit } from '@angular/core';
-import { BaseAudioRecorderComponent } from '../base-audio-recorder';
-import { audioRecorderService } from 'src/app/ajs-upgraded-providers';
-import { Task } from 'src/app/api/models/doubtfire-model';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import {Task} from 'src/app/api/models/doubtfire-model';
+import {MediaRecorderService} from 'src/app/common/services/recorder-service';
+import {BaseAudioRecorderComponent} from '../base-audio-recorder';
 
-@Component({ selector: 'microphone-tester', templateUrl: './microphone-tester-component.html' })
+@Component({
+  selector: 'microphone-tester',
+  templateUrl: './microphone-tester-component.html',
+  providers: [MediaRecorderService],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
 export class MicrophoneTesterComponent extends BaseAudioRecorderComponent implements AfterViewInit {
   @Input() task: Task;
+  @ViewChild('micTesterAudioPlayer') audioRef: ElementRef<HTMLAudioElement>;
+  @ViewChild('micTesterVisualiser') canvasRef: ElementRef<HTMLCanvasElement>;
   canvas: HTMLCanvasElement;
   canvasCtx: CanvasRenderingContext2D;
-  isSending: boolean;
+  isSending: boolean = false;
 
-  constructor(@Inject(audioRecorderService) mediaRecorderService: any) {
+  constructor(private mediaRecorderService: MediaRecorderService) {
     super(mediaRecorderService);
   }
 
@@ -20,15 +35,50 @@ export class MicrophoneTesterComponent extends BaseAudioRecorderComponent implem
     }
   }
 
-  // We need to override default behaviour of the parent class.
-  ngOnInit() {}
-
   init(): void {
     super.init();
-    this.canvas = document.getElementById('micTesterVisualiser') as HTMLCanvasElement;
-    this.audio = document.getElementById('micTesterAudioPlayer') as HTMLAudioElement;
+    this.canvas = this.canvasRef.nativeElement;
+    this.audio = this.audioRef.nativeElement;
     this.canvasCtx = this.canvas.getContext('2d');
   }
 
-  sendRecording(): void {}
+  sendRecording(): void {
+    /* empty */
+  }
+
+  protected visualise(): void {
+    const draw = () => {
+      let WIDTH: number;
+      let HEIGHT: number;
+
+      this.canvas.width = 1;
+      this.canvas.height = 1;
+
+      this.canvas.width = WIDTH = this.canvas.clientWidth;
+      this.canvas.height = HEIGHT = this.canvas.clientHeight;
+      requestAnimationFrame(draw);
+      analyser.getByteTimeDomainData(dataArray);
+      analyser.getByteFrequencyData(dataArray);
+
+      this.canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+      const barWidth = 2;
+      const barGap = 2;
+
+      for (let i = 0; i < WIDTH; i++) {
+        const barX = i * (barWidth + barGap);
+        const barY = HEIGHT / 2;
+        const barHeight = -(dataArray[i] / 8) + 1;
+        this.canvasCtx.fillStyle = '#2563eb';
+        this.canvasCtx.fillRect(barX, barY, barWidth, barHeight);
+        this.canvasCtx.fillRect(barX, barY - barHeight, barWidth, barHeight);
+      }
+    };
+
+    const analyser = this.mediaRecorder.analyserNode;
+    analyser.fftSize = 2048;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    draw();
+  }
 }
diff --git a/src/app/common/chart-base/chart-base-component/chart-base-component.component.html b/src/app/common/chart-base/chart-base-component/chart-base-component.component.html
new file mode 100644
index 0000000000..16e336d2ba
--- /dev/null
+++ b/src/app/common/chart-base/chart-base-component/chart-base-component.component.html
@@ -0,0 +1 @@
+<p>chart-base-component works!</p>
diff --git a/src/app/common/chart-base/chart-base-component/chart-base-component.component.ts b/src/app/common/chart-base/chart-base-component/chart-base-component.component.ts
new file mode 100644
index 0000000000..326b8cd75c
--- /dev/null
+++ b/src/app/common/chart-base/chart-base-component/chart-base-component.component.ts
@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component, ViewContainerRef} from '@angular/core';
+
+/**
+ * @title chart-base-component
+ * @desc This is a base class to be used with the ngx-charts library. It is used to set the root view container for the tooltip service, to avoid issues with the tooltip not displaying correctly.
+ *
+ * Child classes need to extend this class and call super() in the constructor, passing in the ViewContainerRef.
+ */
+@Component({
+  templateUrl: './chart-base-component.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ChartBaseComponent {
+  constructor(public viewContainerRef: ViewContainerRef) {}
+}
diff --git a/src/app/common/common.coffee b/src/app/common/common.coffee
deleted file mode 100644
index e5bbea48a2..0000000000
--- a/src/app/common/common.coffee
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module("doubtfire.common", [
-  'doubtfire.common.services'
-  'doubtfire.common.filters'
-  'doubtfire.common.modals'
-  'doubtfire.common.file-uploader'
-  'doubtfire.common.grade-icon'
-  'doubtfire.common.content-editable'
-])
diff --git a/src/app/common/content-editable/content-editable.coffee b/src/app/common/content-editable/content-editable.coffee
deleted file mode 100644
index 7cbfee3a10..0000000000
--- a/src/app/common/content-editable/content-editable.coffee
+++ /dev/null
@@ -1,21 +0,0 @@
-angular.module('doubtfire.common.content-editable', [])
-# Workaround directive for lack of contenteditable support for divs and spans
-
-.directive 'contenteditable', ($sce) ->
-  {
-    restrict: 'A'
-    require: 'ngModel'
-    link: (scope, element, attrs, ngModel) ->
-
-      read = ->
-        ngModel.$setViewValue element[0].innerText
-        return
-
-      ngModel.$render = ->
-        element.html $sce.getTrustedHtml(ngModel.$viewValue or '')
-        return
-
-      element.bind 'blur keyup change', ->
-        scope.$evalAsync(read)
-        return
-  }
diff --git a/src/app/common/directives/drag-drop.directive.spec.ts b/src/app/common/directives/drag-drop.directive.spec.ts
index 0d39e1f01c..50b65a31a7 100644
--- a/src/app/common/directives/drag-drop.directive.spec.ts
+++ b/src/app/common/directives/drag-drop.directive.spec.ts
@@ -1,4 +1,5 @@
-import { DragDropDirective } from './drag-drop.directive';
+import {describe, expect, it} from 'vitest';
+import {DragDropDirective} from './drag-drop.directive';
 
 describe('DragDropDirective', () => {
   it('should create an instance', () => {
diff --git a/src/app/common/directives/drag-drop.directive.ts b/src/app/common/directives/drag-drop.directive.ts
index 1278cdc59e..415e2475b4 100644
--- a/src/app/common/directives/drag-drop.directive.ts
+++ b/src/app/common/directives/drag-drop.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core';
+import {Directive, EventEmitter, HostBinding, HostListener, Output} from '@angular/core';
 
 /**
  * The "appDragDrop" directive can be added to angular components to allow them to act as
@@ -8,9 +8,10 @@ import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@ang
  */
 @Directive({
   selector: '[appDragDrop]',
+  standalone: false,
 })
 export class DragDropDirective {
-  @Output() fileDropped = new EventEmitter<FileList>();
+  @Output() fileDropped: EventEmitter<FileList> = new EventEmitter();
 
   // @HostBinding('style.background-color') private background = '#f5fcff';
   // @HostBinding('style.opacity') private opacity = '1';
diff --git a/src/app/common/edit-profile-form/edit-profile-form.component.html b/src/app/common/edit-profile-form/edit-profile-form.component.html
index b18f430fc8..dd97afe9d7 100644
--- a/src/app/common/edit-profile-form/edit-profile-form.component.html
+++ b/src/app/common/edit-profile-form/edit-profile-form.component.html
@@ -1,151 +1,269 @@
-<form #form="ngForm" (ngSubmit)="submit()" fxLayout="column" fxLayoutAlign="center start" class="p-16">
-  <div class="main-container" style="width: 100%" fxLayout="row" fxLayoutAlign="center start">
-    <div class="main" style="width: 100%" fxLayout="column" fxLayoutAlign="start start">
+<form
+  #form="ngForm"
+  class="flex flex-col items-start justify-center"
+  [ngClass]="{'p-10': modal}"
+  (ngSubmit)="submit()"
+>
+  <div class="main-container flex w-full flex-row items-start justify-center">
+    <div class="main flex w-full flex-col items-start justify-start">
       <!-- avatar -->
-      <div fxLayout="row" fxLayoutAlign="space-between center" style="margin-bottom: 25px">
-        <a style="margin-left: 20px" href="https://gravatar.com/connect/?source=_signup/" target="_blank">
-          <user-icon [size]="80" [user]="user" style="margin-right: 25px"></user-icon
-        ></a>
+      <div class="mb-[25px] flex w-full flex-row items-center justify-between">
+        <div class="flex flex-row items-center justify-between">
+          <a class="ml-[20px]" href="https://gravatar.com/connect/?source=_signup/" target="_blank">
+            <user-icon style="margin-right: 25px" [size]="80" [user]="user"></user-icon
+          ></a>
 
-        <div fxLayout="column" fxLayoutAlign="space-around start">
-          <h1>{{ initialFirstName }}</h1>
-          Set up your {{ externalName.value }} profile
+          <div>
+            <h1>{{ user?.firstName }}</h1>
+            Set up your {{ externalName.value }} profile
+          </div>
         </div>
       </div>
 
-      <div fxLayout="row" fxFlexFill>
-        <!-- <mat-form-field fxFlex="25" fxFlexAlign="start" appearance="outline">
-          <mat-label>Pronouns</mat-label>
-          <mat-select [(ngModel)]="formPronouns.pronouns" name="pronouns">
-            <mat-option value="">Do not show</mat-option>
-            <mat-option value="He/Him">He/Him</mat-option>
-            <mat-option value="She/Her">She/Her</mat-option>
-            <mat-option value="They/Them">They/Them</mat-option>
-            <mat-option value="__customPronouns">Custom</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <div fxFlex="3"></div> -->
-        <mat-form-field fxFlexFill appearance="outline">
+      <div class="m-0 flex size-full min-h-full min-w-full flex-row">
+        <mat-form-field appearance="outline" class="m-0 size-full min-h-full min-w-full">
           <mat-label>Username</mat-label>
-          <input matInput [(ngModel)]="user.username" name="username" [disabled]="!newUser"/>
+          <input
+            autocomplete="username"
+            matInput
+            name="username"
+            [disabled]="!newUser"
+            [(ngModel)]="user.username"
+          />
         </mat-form-field>
       </div>
 
-      <div fxLayout="row" fxFlexFill>
-        <mat-form-field fxFlex="48" appearance="outline" fxFlexAlign="start">
+      <div class="m-0 flex size-full min-h-full min-w-full flex-row">
+        <mat-form-field appearance="outline" class="max-w-[48%] shrink grow basis-full self-start">
           <mat-label>First Name</mat-label>
-          <input matInput class="outline-none" [(ngModel)]="user.firstName" name="first" required />
+          <input
+            #firstModel="ngModel"
+            autocomplete="given-name"
+            class="outline-none"
+            matInput
+            name="first"
+            required
+            [(ngModel)]="user.firstName"
+          />
+          @if (firstModel.hasError('required')) {
+            <mat-error>First name is required</mat-error>
+          }
         </mat-form-field>
 
-        <div fxFlex></div>
+        <div class="flex-1"></div>
 
-        <mat-form-field fxFlex="48" appearance="outline" fxFlexAlign="end">
+        <mat-form-field appearance="outline" class="max-w-[48%] shrink grow basis-full self-end">
           <mat-label>Second Name</mat-label>
-          <input matInput [(ngModel)]="user.lastName" name="last" required />
+          <input
+            #lastModel="ngModel"
+            autocomplete="family-name"
+            matInput
+            name="last"
+            required
+            [(ngModel)]="user.lastName"
+          />
+          @if (lastModel.hasError('required')) {
+            <mat-error>Second name is required</mat-error>
+          }
         </mat-form-field>
       </div>
 
-      <div fxLayout="row" fxFlexFill>
-        <!-- <mat-form-field fxFlex="25" fxFlexAlign="start" appearance="outline">
-          <mat-label>Pronouns</mat-label>
-          <mat-select [(ngModel)]="formPronouns.pronouns" name="pronouns">
-            <mat-option value="">Do not show</mat-option>
-            <mat-option value="He/Him">He/Him</mat-option>
-            <mat-option value="She/Her">She/Her</mat-option>
-            <mat-option value="They/Them">They/Them</mat-option>
-            <mat-option value="__customPronouns">Custom</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <div fxFlex="3"></div> -->
-        <mat-form-field fxFlexFill appearance="outline">
+      <div class="m-0 flex size-full min-h-full min-w-full flex-row">
+        <mat-form-field appearance="outline" class="m-0 size-full min-h-full min-w-full">
           <mat-label>Preferred Name</mat-label>
-          <input matInput [(ngModel)]="user.nickname" name="preferred_name" />
+          <input
+            autocomplete="nickname"
+            matInput
+            name="preferred_name"
+            [(ngModel)]="user.nickname"
+          />
         </mat-form-field>
       </div>
 
-      <mat-form-field fxFlexFill appearance="outline" [hidden]="!customPronouns">
+      <mat-form-field
+        appearance="outline"
+        class="m-0 size-full min-h-full min-w-full"
+        [hidden]="!customPronouns"
+      >
         <mat-label>Custom Pronouns</mat-label>
         <input
           matInput
           maxlength="25"
           name="custom_pronouns"
           type="text"
-          [(ngModel)]="user.pronouns"
           [required]="customPronouns"
+          [(ngModel)]="user.pronouns"
         />
       </mat-form-field>
 
       @if (user.systemRole === 'Student') {
-      <mat-form-field appearance="outline" fxFlexFill>
-        <mat-label>Student ID</mat-label>
-        <input matInput [(ngModel)]="user.studentId" name="student_id" required />
-      </mat-form-field>
+        <mat-form-field appearance="outline" class="m-0 size-full min-h-full min-w-full">
+          <mat-label>Student ID</mat-label>
+          <input
+            #studentIdModel="ngModel"
+            matInput
+            name="student_id"
+            required
+            [(ngModel)]="user.studentId"
+          />
+          @if (studentIdModel.hasError('required')) {
+            <mat-error>Student ID is required</mat-error>
+          }
+        </mat-form-field>
       }
 
-      <mat-form-field appearance="outline" fxFlexFill>
+      <mat-form-field appearance="outline" class="m-0 size-full min-h-full min-w-full">
         <mat-label>Email</mat-label>
-        <input type="email" matInput [(ngModel)]="user.email" name="email" required />
+        <input
+          #emailModel="ngModel"
+          autocomplete="email"
+          email
+          matInput
+          name="email"
+          required
+          type="email"
+          [(ngModel)]="user.email"
+        />
+        @if (emailModel.hasError('required')) {
+          <mat-error>Email is required</mat-error>
+        }
+        @if (emailModel.hasError('email')) {
+          <mat-error>Enter a valid email address</mat-error>
+        }
       </mat-form-field>
 
       @if (canSeeSystemRole) {
-      <mat-form-field fxFlexFill appearance="outline">
-        <mat-label>System Role</mat-label>
-        <mat-select [(ngModel)]="user.systemRole" name="systemRole" [disabled]="!canEditSystemRole">
-          <mat-option value="Admin">Administrator</mat-option>
-          <mat-option value="Convenor">Convenor</mat-option>
-          <mat-option value="Tutor">Tutor</mat-option>
-          <mat-option value="Student">Student</mat-option>
-          <mat-option value="Auditor">Auditor</mat-option>
-        </mat-select>
-      </mat-form-field>
+        <mat-form-field appearance="outline" class="m-0 size-full min-h-full min-w-full">
+          <mat-label>System Role</mat-label>
+          <mat-select
+            name="systemRole"
+            [disabled]="!canEditSystemRole"
+            [(ngModel)]="user.systemRole"
+          >
+            <mat-option value="Admin">Administrator</mat-option>
+            <mat-option value="Convenor">Convenor</mat-option>
+            <mat-option value="Tutor">Tutor</mat-option>
+            <mat-option value="Student">Student</mat-option>
+            <mat-option value="Auditor">Auditor</mat-option>
+          </mat-select>
+        </mat-form-field>
       }
 
-      <section fxLayout="column" fxFlexFill fxLayoutAlign="center start">
-        <mat-checkbox class="" color="primary" [(ngModel)]="user.receiveFeedbackNotifications" name="feedback_n"
-          >Receive notifications for new messages</mat-checkbox
-        >
-        <div fxFlex></div>
-        <mat-checkbox color="primary" [(ngModel)]="user.receivePortfolioNotifications" name="portfolio_n"
-          >Receive notifications when your portfolio is ready</mat-checkbox
+      <f-notification-settings
+        [showNotificationsLink]="isOwnProfilePage"
+        [user]="user"
+      ></f-notification-settings>
+
+      <section
+        aria-labelledby="peer-progress-preference-title"
+        class="peer-progress-preference m-0 flex size-full min-h-full min-w-full flex-col"
+      >
+        <h3 id="peer-progress-preference-title">Peer progress</h3>
+        <mat-slide-toggle
+          aria-describedby="peer-progress-preference-description"
+          color="primary"
+          name="displayPeerProgress"
+          [(ngModel)]="user.displayPeerProgress"
         >
-        <div fxFlex></div>
-        <mat-checkbox fxFlex color="primary" [(ngModel)]="user.receiveTaskNotifications" name="task_n"
-          >Receive notifications when new tasks are available</mat-checkbox
+          Display anonymous peer progress statistics
+        </mat-slide-toggle>
+        <small id="peer-progress-preference-description">
+          This controls whether you see the privacy-protected widget below your submission details.
+          It does not opt your anonymous task status out of authorised cohort aggregation.
+        </small>
+      </section>
+
+      <f-theme-settings></f-theme-settings>
+
+      <!--
+        Push opt-in. Subscribing has to come from a click: the browser only shows
+        its permission prompt in response to a user gesture, and the service
+        worker is not registered until six seconds after the page loads.
+      -->
+      <section
+        class="push-opt-in m-0 flex size-full min-h-full min-w-full flex-col items-start justify-center"
+      >
+        <button
+          color="primary"
+          mat-stroked-button
+          type="button"
+          [disabled]="pushBusy || pushBlocker !== null"
+          (click)="togglePushNotifications()"
         >
+          <mat-icon>{{ pushSubscribed ? 'notifications_off' : 'notifications_active' }}</mat-icon>
+          {{
+            pushSubscribed
+              ? 'Turn off push notifications on this device'
+              : 'Turn on push notifications on this device'
+          }}
+        </button>
+        @if (pushBlocker !== null) {
+          <small class="push-opt-in__hint">{{ pushBlockerMessage }}</small>
+          @if (pushBlocker === 'permission-denied') {
+            <ol class="push-opt-in__instructions">
+              @for (step of pushBlockerInstructions; track step) {
+                <li>{{ step }}</li>
+              }
+            </ol>
+          }
+        } @else if (pushSubscribed) {
+          <small class="push-opt-in__hint">This device will receive push notifications.</small>
+        }
       </section>
-      <section fxLayout="row" fxFlexFill fxLayoutAlign="start center">
-        <mat-checkbox color="primary" [(ngModel)]="user.optInToResearch" name="optin"
+      <section class="m-0 flex size-full min-h-full min-w-full flex-row items-center justify-start">
+        <mat-checkbox color="primary" name="optin" [(ngModel)]="user.optInToResearch"
           >Send anonymous research statistics
         </mat-checkbox>
       </section>
 
-      @if(tiiEnabled){
-      <section fxLayout="row" fxFlexFill fxLayoutAlign="start center">
-        <mat-checkbox color="primary" [(ngModel)]="user.acceptedTiiEula" [disableRipple]="true" (click)="$event.preventDefault()" name="acceptedTiiEula" disabled
-          >Acceptted TurnItIn EULA
-        </mat-checkbox>
-      </section>
+      @if (tiiEnabled) {
+        <section
+          class="m-0 flex size-full min-h-full min-w-full flex-row items-center justify-start"
+        >
+          <mat-checkbox
+            color="primary"
+            disabled
+            name="acceptedTiiEula"
+            [disableRipple]="true"
+            [(ngModel)]="user.acceptedTiiEula"
+            (click)="$event.preventDefault()"
+            >Accepted TurnItIn EULA
+          </mat-checkbox>
+        </section>
       }
-      <div fxLayout="row" fxFlexFill style="padding-top: 12px">
-        <button [hidden]="mode === 'edit' || mode === 'new'" fxFlexAlign="start" type="button" mat-stroked-button (click)="signOut()">
-          Sign Out
-        </button>
-        <div fxFlex></div>
-        @if (mode === 'create') {
-        <button [disabled]="form.invalid" fxFlexAlign="end" type="submit" mat-flat-button color="primary">
-          Confirm Account
-        </button>
-        } @if (mode === 'edit') {
+      <div class="m-0 flex size-full min-h-full min-w-full flex-row" style="padding-top: 12px">
         <button
+          class="self-start"
+          mat-stroked-button
           type="button"
-          [disabled]="form.invalid"
-          fxFlexAlign="end"
-          (click)="submit()"
-          mat-flat-button
-          color="primary"
+          [hidden]="mode === 'edit' || mode === 'new'"
+          (click)="signOut()"
         >
-          Save Profile
+          Sign Out
         </button>
+        <div class="flex-1"></div>
+        @if (mode === 'create') {
+          <button
+            class="self-end"
+            color="primary"
+            mat-flat-button
+            type="submit"
+            [disabled]="form.invalid || saving"
+          >
+            Confirm Account
+          </button>
+        }
+        @if (mode === 'edit') {
+          <button
+            class="self-end"
+            color="primary"
+            mat-flat-button
+            type="button"
+            [disabled]="form.invalid || saving"
+            (click)="submit()"
+          >
+            Save Profile
+          </button>
         }
       </div>
     </div>
diff --git a/src/app/common/edit-profile-form/edit-profile-form.component.scss b/src/app/common/edit-profile-form/edit-profile-form.component.scss
index b134972461..6b2fd070e9 100644
--- a/src/app/common/edit-profile-form/edit-profile-form.component.scss
+++ b/src/app/common/edit-profile-form/edit-profile-form.component.scss
@@ -4,7 +4,8 @@
 }
 
 h1 {
-  color: black;
+  // THM-M01: was hardcoded black.
+  color: var(--ot-color-text, #000);
   margin-top: 0;
 }
 
@@ -16,7 +17,7 @@ a {
 }
 
 p {
-  color: black;
+  color: var(--ot-color-text, #000);
 }
 
 .form-field {
@@ -32,3 +33,41 @@ section {
   font-weight: normal;
 }
 
+.mat-icon {
+  width: 50px;
+  height: 50px;
+  font-size: 50px;
+}
+
+.push-opt-in {
+  // The rule above sizes the profile avatar icon at 50px. Left alone it would
+  // apply to the icon inside this button too and blow the button apart.
+  .mat-icon {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    margin-right: 6px;
+  }
+
+  &__hint {
+    display: block;
+    margin-top: 6px;
+    opacity: 0.7;
+  }
+}
+
+.peer-progress-preference {
+  border-block: 1px solid #e4e4e7;
+  gap: 6px;
+  margin-block: 8px;
+  padding-block: 16px;
+
+  h3 {
+    margin: 0;
+  }
+
+  small {
+    color: #52525b;
+    max-width: 42rem;
+  }
+}
diff --git a/src/app/common/edit-profile-form/edit-profile-form.component.spec.ts b/src/app/common/edit-profile-form/edit-profile-form.component.spec.ts
index c3d777682a..30c57e16a1 100644
--- a/src/app/common/edit-profile-form/edit-profile-form.component.spec.ts
+++ b/src/app/common/edit-profile-form/edit-profile-form.component.spec.ts
@@ -1,24 +1,355 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {Directive, NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Router} from '@angular/router';
+import {of} from 'rxjs';
+import {User} from 'src/app/api/models/user/user';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {PushNotificationService} from 'src/app/api/services/push-notification.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {NotificationSettingsComponent} from 'src/app/common/notification-settings/notification-settings.component';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {EditProfileFormComponent} from './edit-profile-form.component';
 
-import { EditProfileFormComponent } from './edit-profile-form.component';
+const emptyProvider = {};
 
-describe('EditProfileComponent', () => {
+const makeUser = (overrides: Partial<User> = {}): User =>
+  ({
+    id: 1,
+    systemRole: 'Student',
+    hasRunFirstTimeSetup: true,
+    optInToResearch: true,
+    receiveFeedbackNotifications: false,
+    receivePortfolioNotifications: false,
+    receiveTaskNotifications: false,
+    displayPeerProgress: true,
+    ...overrides,
+  }) as User;
+
+// The component subscribes to this in ngOnInit. Stubbed here rather than
+// providing the real service, which would pull in SwPush and the whole service
+// worker with it.
+const pushServiceStub = {
+  subscription$: of(null),
+  isEnabled: false,
+  blocker: (): 'no-service-worker' | 'permission-denied' => 'no-service-worker',
+  permissionDeniedInstructions: (): string[] => [],
+};
+
+describe('EditProfileFormComponent', () => {
   let component: EditProfileFormComponent;
   let fixture: ComponentFixture<EditProfileFormComponent>;
+  let userServiceStub: {currentUser: User};
+  let dialogData: {
+    user: User;
+    mode: 'edit' | 'create' | 'new';
+    modal: boolean;
+  };
+
+  const createComponent = (): void => {
+    fixture = TestBed.createComponent(EditProfileFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  };
 
   beforeEach(async () => {
+    pushServiceStub.blocker = () => 'no-service-worker';
+    pushServiceStub.permissionDeniedInstructions = () => [];
+
+    const currentUser = makeUser();
+
+    userServiceStub = {
+      currentUser,
+    };
+    dialogData = {
+      user: currentUser,
+      mode: 'edit',
+      modal: false,
+    };
+
     await TestBed.configureTestingModule({
       declarations: [EditProfileFormComponent],
+      providers: [
+        {provide: DoubtfireConstants, useValue: emptyProvider},
+        {provide: UserService, useValue: userServiceStub},
+        {provide: Router, useValue: emptyProvider},
+        {provide: AuthenticationService, useValue: emptyProvider},
+        {provide: MAT_DIALOG_DATA, useValue: dialogData},
+        {provide: MatSnackBar, useValue: emptyProvider},
+        {provide: PushNotificationService, useValue: pushServiceStub},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(EditProfileFormComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  it('should create', () => {
+    createComponent();
+
+    expect(component).toBeTruthy();
+  });
+
+  it('preserves notification and research preferences in edit mode', () => {
+    dialogData.user = makeUser({
+      optInToResearch: true,
+      receiveFeedbackNotifications: false,
+      receivePortfolioNotifications: false,
+      receiveTaskNotifications: false,
+    });
+    dialogData.mode = 'edit';
+
+    createComponent();
+
+    expect(component.user.optInToResearch).toBe(true);
+    expect(component.user.receiveFeedbackNotifications).toBe(false);
+    expect(component.user.receivePortfolioNotifications).toBe(false);
+    expect(component.user.receiveTaskNotifications).toBe(false);
+  });
+
+  it("preserves an established user's explicit peer progress opt-out", () => {
+    dialogData.user = makeUser({displayPeerProgress: false});
+
+    createComponent();
+
+    expect(component.user.displayPeerProgress).toBe(false);
+  });
+
+  it('defaults a rolling-API user without the preference field to on', () => {
+    dialogData.user = makeUser({displayPeerProgress: undefined});
+
+    createComponent();
+
+    expect(component.user.displayPeerProgress).toBe(true);
+  });
+
+  it('does not change another user when opened by an admin', () => {
+    userServiceStub.currentUser = makeUser({
+      id: 1,
+      systemRole: 'Admin',
+    });
+    dialogData.user = makeUser({
+      id: 2,
+      optInToResearch: true,
+      receiveFeedbackNotifications: false,
+      receivePortfolioNotifications: false,
+      receiveTaskNotifications: false,
+    });
+    dialogData.mode = 'edit';
+
+    createComponent();
+
+    expect(component.user.optInToResearch).toBe(true);
+    expect(component.user.receiveFeedbackNotifications).toBe(false);
+    expect(component.user.receivePortfolioNotifications).toBe(false);
+    expect(component.user.receiveTaskNotifications).toBe(false);
+  });
+
+  it('applies defaults before first-time setup', () => {
+    dialogData.user = makeUser({
+      hasRunFirstTimeSetup: false,
+      optInToResearch: true,
+      receiveFeedbackNotifications: false,
+      receivePortfolioNotifications: false,
+      receiveTaskNotifications: false,
+    });
+    dialogData.mode = 'create';
+
+    createComponent();
+
+    expect(component.user.optInToResearch).toBe(false);
+    expect(component.user.receiveFeedbackNotifications).toBe(true);
+    expect(component.user.receivePortfolioNotifications).toBe(true);
+    expect(component.user.receiveTaskNotifications).toBe(true);
+    expect(component.user.displayPeerProgress).toBe(true);
+  });
+
+  it('applies defaults to a blank user opened from the admin screen', () => {
+    dialogData.user = {} as User;
+    dialogData.mode = 'edit';
+
+    createComponent();
+
+    expect(component.user.optInToResearch).toBe(false);
+    expect(component.user.receiveFeedbackNotifications).toBe(true);
+    expect(component.user.receivePortfolioNotifications).toBe(true);
+    expect(component.user.receiveTaskNotifications).toBe(true);
+    expect(component.user.displayPeerProgress).toBe(true);
+  });
+
+  it('returns no instructions when nothing is blocking notifications', () => {
+    createComponent();
+
+    expect(component.pushBlockerInstructions).toEqual([]);
+  });
+
+  it('asks the push service for instructions when permission is denied', () => {
+    pushServiceStub.blocker = () => 'permission-denied';
+    pushServiceStub.permissionDeniedInstructions = () => ['step one', 'step two'];
+
+    createComponent();
+
+    expect(component.pushBlockerInstructions).toEqual(['step one', 'step two']);
+  });
+});
+
+// A11Y-FORM06: WCAG 1.3.5 Identify Input Purpose (AA).
+// Renders the real profile template and asserts each name/email field declares
+// its autocomplete purpose token. StubNgForm satisfies `#form="ngForm"` and
+// NO_ERRORS_SCHEMA renders the unknown mat-* elements as plain markup so the
+// static autocomplete attribute on each <input> is what we assert on.
+@Directive({selector: 'form', exportAs: 'ngForm', standalone: false})
+class StubNgFormProfile {
+  public invalid = false;
+}
+
+// The identity fields now carry #model="ngModel" refs for the required/email
+// validation messages, so the real template needs something exporting ngModel to
+// render. Stub it, in the same spirit as StubNgFormProfile, and report no errors so
+// the autocomplete assertions below are all that this spec turns on.
+@Directive({selector: '[ngModel]', exportAs: 'ngModel', standalone: false})
+class StubNgModelProfile {
+  public hasError(): boolean {
+    return false;
+  }
+}
+
+describe('EditProfileFormComponent autocomplete purpose (A11Y-FORM06)', () => {
+  let fixture: ComponentFixture<EditProfileFormComponent>;
+
+  beforeEach(async () => {
+    const user = makeUser({systemRole: 'Student'});
+
+    await TestBed.configureTestingModule({
+      declarations: [EditProfileFormComponent, StubNgFormProfile, StubNgModelProfile],
+      providers: [
+        {
+          provide: DoubtfireConstants,
+          useValue: {ExternalName: {value: 'OnTrack'}, IsTiiEnabled: {value: false}},
+        },
+        {provide: UserService, useValue: {currentUser: user}},
+        {provide: Router, useValue: {}},
+        {provide: AuthenticationService, useValue: {}},
+        {provide: MAT_DIALOG_DATA, useValue: {user, mode: 'edit', modal: false}},
+        {provide: MatSnackBar, useValue: {}},
+        {
+          provide: PushNotificationService,
+          useValue: {
+            subscription$: of(null),
+            blocker: () => 'no-service-worker',
+            permissionDeniedInstructions: () => [],
+          },
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
+
+    fixture = TestBed.createComponent(EditProfileFormComponent);
+    fixture.detectChanges();
+  });
+
+  const purpose = (name: string): string | null =>
+    fixture.nativeElement.querySelector(`input[name="${name}"]`)?.getAttribute('autocomplete') ??
+    null;
+
+  it('maps every profile identity field to its WCAG 1.3.5 purpose token', () => {
+    expect(purpose('username')).toBe('username');
+    expect(purpose('first')).toBe('given-name');
+    expect(purpose('last')).toBe('family-name');
+    expect(purpose('preferred_name')).toBe('nickname');
+    expect(purpose('email')).toBe('email');
   });
 
-  beforeEach(() => {
+  // Failure path: the fix must stay scoped. Fields outside the agreed mapping
+  // (student id, custom pronouns) must not be handed a purpose token.
+  it('does not put a purpose token on fields outside the mapped set', () => {
+    expect(purpose('student_id')).toBeNull();
+    expect(purpose('custom_pronouns')).toBeNull();
+  });
+});
+
+// The notification settings link to the viewer's own notifications page, so the
+// link belongs on the profile page only. The admin Users dialog opens this form
+// as a modal on someone else's account, and /welcome opens it in create mode.
+// Renders the real form and the real notification settings so the input is
+// checked end to end.
+// Keep the real template renderable when identity validation adds ngModel refs.
+@Directive({selector: '[ngModel]', exportAs: 'ngModel', standalone: false})
+class StubNotificationNgModel {
+  public hasError(): boolean {
+    return false;
+  }
+}
+
+describe('EditProfileFormComponent notifications page link', () => {
+  let fixture: ComponentFixture<EditProfileFormComponent>;
+
+  // The profile page and /welcome set mode as a template input. The dialog sets
+  // no inputs, and ngOnInit copies mode and modal across from the dialog data.
+  const render = async (
+    inputMode: 'edit' | 'create' | null,
+    dialogData: {user: User; mode: 'edit' | 'create' | 'new'; modal: boolean} | null,
+  ): Promise<void> => {
+    const currentUser = makeUser({id: 1, systemRole: 'Admin'});
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        EditProfileFormComponent,
+        NotificationSettingsComponent,
+        StubNgFormProfile,
+        StubNotificationNgModel,
+      ],
+      providers: [
+        {
+          provide: DoubtfireConstants,
+          useValue: {ExternalName: {value: 'OnTrack'}, IsTiiEnabled: {value: false}},
+        },
+        {provide: UserService, useValue: {currentUser}},
+        {provide: Router, useValue: {}},
+        {provide: AuthenticationService, useValue: {}},
+        {provide: MAT_DIALOG_DATA, useValue: dialogData},
+        {provide: MatSnackBar, useValue: {}},
+        {
+          provide: PushNotificationService,
+          useValue: {
+            subscription$: of(null),
+            blocker: () => 'no-service-worker',
+            permissionDeniedInstructions: () => [],
+          },
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(EditProfileFormComponent);
-    component = fixture.componentInstance;
+    if (inputMode) {
+      fixture.componentRef.setInput('mode', inputMode);
+    }
     fixture.detectChanges();
+  };
+
+  const notificationsLink = (): HTMLAnchorElement | null =>
+    fixture.nativeElement.querySelector('f-notification-settings a');
+
+  it("shows the link on the user's own profile page", async () => {
+    await render('edit', null);
+
+    expect(notificationsLink()?.textContent.trim()).toBe('Notifications page');
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it("hides the link in the admin Users dialog for another user's account", async () => {
+    await render(null, {user: makeUser({id: 2}), mode: 'edit', modal: true});
+
+    expect(fixture.nativeElement.querySelector('f-notification-settings')).not.toBeNull();
+    expect(notificationsLink()).toBeNull();
+  });
+
+  it('hides the link on the first-login setup form', async () => {
+    await render('create', null);
+
+    expect(fixture.nativeElement.querySelector('f-notification-settings')).not.toBeNull();
+    expect(notificationsLink()).toBeNull();
   });
 });
diff --git a/src/app/common/edit-profile-form/edit-profile-form.component.ts b/src/app/common/edit-profile-form/edit-profile-form.component.ts
index a31fa6d581..5ce9085c4c 100644
--- a/src/app/common/edit-profile-form/edit-profile-form.component.ts
+++ b/src/app/common/edit-profile-form/edit-profile-form.component.ts
@@ -1,25 +1,42 @@
-import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { StateService } from '@uirouter/core';
-import { User } from 'src/app/api/models/user/user';
-import { AuthenticationService } from 'src/app/api/services/authentication.service';
-import { UserService } from 'src/app/api/services/user.service';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';
+import {User} from 'src/app/api/models/user/user';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {PushBlocker, PushNotificationService} from 'src/app/api/services/push-notification.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 
 @Component({
   selector: 'f-edit-profile-form',
   templateUrl: './edit-profile-form.component.html',
   styleUrls: ['./edit-profile-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class EditProfileFormComponent implements OnInit {
+export class EditProfileFormComponent implements OnInit, OnDestroy {
   constructor(
     private constants: DoubtfireConstants,
     private userService: UserService,
-    private state: StateService,
+    private router: Router,
     private authService: AuthenticationService,
-    @Optional() @Inject(MAT_DIALOG_DATA) public data: { user: User; mode: 'edit' | 'create' | 'new' },
-    private _snackBar: MatSnackBar
+    private alerts: AlertService,
+    @Optional()
+    @Inject(MAT_DIALOG_DATA)
+    public data: {user: User; mode: 'edit' | 'create' | 'new'; modal: boolean},
+    private _snackBar: MatSnackBar,
+    private pushService: PushNotificationService,
   ) {
     this.user = data?.user || this.userService.currentUser;
   }
@@ -31,28 +48,127 @@ export class EditProfileFormComponent implements OnInit {
    * new is used for creating a new user
    */
   @Input() mode: 'edit' | 'create' | 'new';
+  @Input() modal: boolean = false;
 
   public user: User;
+  public saving = false;
   public externalName = this.constants.ExternalName;
   public initialFirstName: string;
-  public formPronouns = { pronouns: '' };
+  public formPronouns = {pronouns: ''};
   public get customPronouns(): boolean {
     return this.formPronouns.pronouns === '__customPronouns';
   }
 
+  /**
+   * Push opt-in state. `pushSubscribed` starts false and flips once the service
+   * worker registers, which is six seconds after the page loads, so this is
+   * driven by a subscription rather than read once.
+   */
+  public pushSubscribed = false;
+  public pushBusy = false;
+  private pushSubscription?: Subscription;
+
   ngOnInit(): void {
     if (this.data?.mode) {
       this.mode = this.data.mode;
     }
+    if (this.data?.modal) {
+      this.modal = this.data.modal;
+    }
 
-    if (this.userService.isAnonymousUser()) {
-      this.state.go('sign_in');
+    this.pushSubscription = this.pushService.subscription$.subscribe(
+      (subscription) => (this.pushSubscribed = subscription !== null),
+    );
+
+    // Existing users from an older API response have no stored value. Treat
+    // that as the product default (on) until they explicitly opt out.
+    if (this.user.displayPeerProgress === undefined || this.user.displayPeerProgress === null) {
+      this.user.displayPeerProgress = true;
+    }
+
+    if (!this.user.hasRunFirstTimeSetup) {
+      this.user.optInToResearch = false;
+      this.user.receiveFeedbackNotifications = true;
+      this.user.receivePortfolioNotifications = true;
+      this.user.receiveTaskNotifications = true;
+      this.user.displayPeerProgress = true;
     }
+  }
 
-    this.user.optInToResearch = false;
-    this.user.receiveFeedbackNotifications = true;
-    this.user.receivePortfolioNotifications = true;
-    this.user.receiveTaskNotifications = true;
+  ngOnDestroy(): void {
+    this.pushSubscription?.unsubscribe();
+  }
+
+  /**
+   * Why the push button cannot be used, or null if it can. Drives the message
+   * shown under the button.
+   */
+  public get pushBlocker(): PushBlocker | null {
+    return this.pushService.blocker();
+  }
+
+  public get pushBlockerMessage(): string {
+    switch (this.pushBlocker) {
+      case 'unsupported':
+        return 'This browser does not support push notifications.';
+      case 'permission-denied':
+        return 'You have blocked notifications for this site. Allow them in your browser settings, then reload.';
+      case 'not-configured':
+        return 'Push notifications are not set up on this server.';
+      case 'no-service-worker':
+        return 'Still starting up. This becomes available a few seconds after the page loads.';
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * Per-browser steps to reverse a blocked notification permission. Empty
+   * unless pushBlocker is 'permission-denied' — the generic message covers
+   * every other blocker.
+   */
+  public get pushBlockerInstructions(): string[] {
+    return this.pushBlocker === 'permission-denied'
+      ? this.pushService.permissionDeniedInstructions()
+      : [];
+  }
+
+  public togglePushNotifications(): void {
+    if (this.pushBusy) {
+      return;
+    }
+    this.pushBusy = true;
+
+    const wasSubscribed = this.pushSubscribed;
+    const request = wasSubscribed ? this.pushService.unsubscribe() : this.pushService.subscribe();
+
+    request.subscribe({
+      next: () => {
+        this.pushBusy = false;
+        this.notify(
+          wasSubscribed ? 'Push notifications turned off' : 'Push notifications turned on',
+        );
+      },
+      error: (error) => {
+        this.pushBusy = false;
+        // Denying the permission prompt rejects requestSubscription, so this is
+        // an ordinary outcome and not only a failure.
+        this.notify(
+          Notification.permission === 'denied'
+            ? 'Notifications are blocked in your browser'
+            : 'Could not change push notifications',
+        );
+        console.error(error);
+      },
+    });
+  }
+
+  private notify(message: string): void {
+    this._snackBar.open(message, 'dismiss', {
+      duration: 2500,
+      horizontalPosition: 'end',
+      verticalPosition: 'top',
+    });
   }
 
   public signOut(): void {
@@ -63,6 +179,15 @@ export class EditProfileFormComponent implements OnInit {
     return this.mode === 'new';
   }
 
+  /**
+   * True only on the user's own profile page. The admin Users dialog opens this
+   * form in edit mode as a modal to change someone else's settings, and the
+   * welcome page uses create mode, so neither links to the notifications page.
+   */
+  public get isOwnProfilePage(): boolean {
+    return this.mode === 'edit' && !this.modal;
+  }
+
   public get canEditSystemRole(): boolean {
     return !(this.user.id === this.userService.currentUser.id);
   }
@@ -81,6 +206,7 @@ export class EditProfileFormComponent implements OnInit {
   public submit(): void {
     this.user.pronouns = this.customPronouns ? this.user.pronouns : this.formPronouns.pronouns;
     this.user.hasRunFirstTimeSetup = true;
+    this.saving = true;
 
     if (this.newUser) {
       this.userService.create(this.user).subscribe({
@@ -93,14 +219,18 @@ export class EditProfileFormComponent implements OnInit {
             horizontalPosition: 'end',
             verticalPosition: 'top',
           });
+          this.saving = false;
+        },
+        error: (error) => {
+          this.alerts.error(error, 6000);
+          this.saving = false;
         },
-        error: (error) => console.log(error),
       });
     } else {
       this.userService.update(this.user).subscribe({
         next: (updatedUser) => {
           if (this.mode === 'create') {
-            this.state.go('home');
+            this.router.navigateByUrl('/home');
           } else {
             this.user = updatedUser;
             this.initialFirstName = this.user.firstName;
@@ -113,8 +243,12 @@ export class EditProfileFormComponent implements OnInit {
               verticalPosition: 'top',
             });
           }
+          this.saving = false;
+        },
+        error: (error) => {
+          this.alerts.error(error, 6000);
+          this.saving = false;
         },
-        error: (error) => console.log(error),
       });
     }
   }
diff --git a/src/app/common/entity-form/entity-form.component.spec.ts b/src/app/common/entity-form/entity-form.component.spec.ts
new file mode 100644
index 0000000000..8faff9504f
--- /dev/null
+++ b/src/app/common/entity-form/entity-form.component.spec.ts
@@ -0,0 +1,44 @@
+import {describe, expect, it, vi} from 'vitest';
+import {EntityFormComponent} from './entity-form.component';
+
+// EntityFormComponent is an abstract base. We exercise submit() on a bare
+// instance and stub the collaborators the two feedback branches touch, rather
+// than standing a concrete subclass up in a TestBed.
+interface BareEntityForm {
+  formData: unknown;
+  selected: unknown;
+  hasChanges: () => boolean;
+  entityName: string;
+  submit(service: unknown, alertService: unknown, success: unknown): void;
+}
+
+describe('EntityFormComponent submit feedback', () => {
+  const bare = () => Object.create(EntityFormComponent.prototype) as BareEntityForm;
+
+  it('uses a neutral message, not a red error, when nothing changed', () => {
+    const component = bare();
+    component.formData = {valid: true};
+    component.selected = {id: 1};
+    component.hasChanges = () => false;
+    component.entityName = 'Tutorial';
+    const alertService = {message: vi.fn(), error: vi.fn(), success: vi.fn()};
+
+    component.submit({}, alertService, vi.fn());
+
+    expect(alertService.message).toHaveBeenCalledWith('Tutorial was not changed', 6000);
+    expect(alertService.error).not.toHaveBeenCalled();
+  });
+
+  it('tells the user the save was blocked when the form is invalid', () => {
+    const component = bare();
+    const markAllAsTouched = vi.fn();
+    component.formData = {valid: false, markAllAsTouched};
+    component.entityName = 'Tutorial';
+    const alertService = {message: vi.fn(), error: vi.fn(), success: vi.fn()};
+
+    component.submit({}, alertService, vi.fn());
+
+    expect(markAllAsTouched).toHaveBeenCalled();
+    expect(alertService.error).toHaveBeenCalledWith('Check the highlighted fields', 6000);
+  });
+});
diff --git a/src/app/common/entity-form/entity-form.component.ts b/src/app/common/entity-form/entity-form.component.ts
index 5ebe626f8a..c99ffc2787 100644
--- a/src/app/common/entity-form/entity-form.component.ts
+++ b/src/app/common/entity-form/entity-form.component.ts
@@ -1,10 +1,11 @@
-import { AfterViewInit, Directive } from '@angular/core';
-import { UntypedFormGroup, AbstractControl } from '@angular/forms';
-import { Entity, RequestOptions } from 'ngx-entity-service';
-import { EntityService } from 'ngx-entity-service';
-import { Observable, tap } from 'rxjs';
-import { Sort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {Entity, RequestOptions} from 'ngx-entity-service';
+import {EntityService} from 'ngx-entity-service';
+import {AfterViewInit, Directive} from '@angular/core';
+import {AbstractControl, UntypedFormGroup} from '@angular/forms';
+import {Sort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+import {Observable, tap} from 'rxjs';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 export type OnSuccessMethod<T> = (object: T, isNew: boolean) => void;
 
@@ -47,7 +48,10 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
    *
    * @param controls the FormControls that will make up the form.
    */
-  constructor(controls: { [key: string]: AbstractControl }, protected entityName: string) {
+  constructor(
+    controls: Record<string, AbstractControl>,
+    protected entityName: string,
+  ) {
     this.formData = new UntypedFormGroup(controls);
     // Iterate over the FormControls passed in and assign the default values
     // For each based on the values that they are constructed with
@@ -56,7 +60,10 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
     }
   }
 
-  ngAfterViewInit() {}
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+  ngAfterViewInit() {
+    /* empty */
+  }
 
   /**
    * Cancel edit of current selected value.
@@ -113,7 +120,7 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
    * @param alertService the alert service used to provide alerts.
    * @param success the function, provided by inheritor, that is executed on success of CRUD methods.
    */
-  submit(service: EntityService<T>, alertService: any, success: OnSuccessMethod<T>) {
+  submit(service: EntityService<T>, alertService: AlertService, success: OnSuccessMethod<T>) {
     // response is what we get back from the server
     // when creating or updating
     let response: Observable<T>;
@@ -137,15 +144,16 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
         const data = this.formDataToNewObject(this.serverKey); // sent as path id and body
         response = service.create(data, this.optionsOnRequest('create'));
       } else {
-        // Nothing has changed if the selected value, so we want to inform the user
-        alertService.error( `${this.entityName} was not changed`, 6000);
+        // Nothing has changed on the selected value. This is not a failure, so
+        // use a neutral message rather than a red error snackbar.
+        alertService.message(`${this.entityName} was not changed`, 6000);
         return;
       }
 
       // Handle the response
       response.subscribe({
         next: (result: T) => {
-          alertService.success( `${this.entityName} saved`, 2000);
+          alertService.success(`${this.entityName} saved`, 2000);
           // Success is implemented on all inheriting instances and is used
           // to handle the response appropriately for the context of the form
           success(result, this.selected ? false : true);
@@ -163,23 +171,26 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
           if (this.selected) {
             this.restoreFromBackup();
           }
-          alertService.error( `${this.entityName} save failed: ${error}`, 6000);
+          alertService.error(`${this.entityName} save failed: ${error}`, 6000);
         },
       });
     } else {
       // Once we mark forms as touched, erroneous state will be rendered
-      // In the form's template accordingly
+      // In the form's template accordingly. Tell the user why the save did
+      // nothing, otherwise the button reads as dead when the invalid control
+      // is scrolled off screen.
       this.formData.markAllAsTouched();
+      alertService.error('Check the highlighted fields', 6000);
     }
   }
 
-  protected delete(entity: T, entities: T[], service: EntityService<T>): Observable<any> {
-    return service.delete<any>(entity, this.optionsOnRequest('delete')).pipe(
-      tap((obj) => {
+  protected delete(entity: T, entities: T[], service: EntityService<T>): Observable<void> {
+    return service.delete<void>(entity, this.optionsOnRequest('delete')).pipe(
+      tap((_obj) => {
         this.cancelEdit();
         entities.splice(entities.indexOf(entity), 1);
         this.dataSource.data = entities;
-      })
+      }),
     );
   }
 
@@ -207,7 +218,7 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
    * to the entity constructor when an object is created. This is then passed along
    * in the `create` call as the `other` value to the EntityService's create method.
    */
-  protected optionsOnRequest(kind: 'create' | 'update' | 'delete'): RequestOptions<T> {
+  protected optionsOnRequest(_kind: 'create' | 'update' | 'delete'): RequestOptions<T> {
     return undefined;
   }
 
diff --git a/src/app/common/f-chip/chip.component.html b/src/app/common/f-chip/chip.component.html
new file mode 100644
index 0000000000..ae25cb2236
--- /dev/null
+++ b/src/app/common/f-chip/chip.component.html
@@ -0,0 +1,5 @@
+<div
+  class="f-chip__box mx-0.5 flex h-7 min-h-[30px] min-w-[50px] cursor-pointer items-center justify-center rounded-full px-2 font-bold"
+>
+  <span class="text-xs"><ng-content></ng-content> </span>
+</div>
diff --git a/src/app/common/f-chip/chip.component.scss b/src/app/common/f-chip/chip.component.scss
new file mode 100644
index 0000000000..114457dc1a
--- /dev/null
+++ b/src/app/common/f-chip/chip.component.scss
@@ -0,0 +1,7 @@
+// THM-M01: the chip colours were Tailwind bg-formatif-blue / text-white (both
+// !important via the config), so they never flipped. Onto the accent tokens: the
+// light values are #3939ff / #ffffff, so light is unchanged; dark follows the marker.
+.f-chip__box {
+  background-color: var(--ot-color-primary, #3939ff);
+  color: var(--ot-color-on-primary, #fff);
+}
diff --git a/src/app/common/f-chip/chip.component.spec.ts b/src/app/common/f-chip/chip.component.spec.ts
new file mode 100644
index 0000000000..23dfb6fbc5
--- /dev/null
+++ b/src/app/common/f-chip/chip.component.spec.ts
@@ -0,0 +1,22 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FChipComponent} from './chip.component';
+
+describe('FChipComponent', () => {
+  let component: FChipComponent;
+  let fixture: ComponentFixture<FChipComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FChipComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FChipComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/common/f-chip/chip.component.ts b/src/app/common/f-chip/chip.component.ts
new file mode 100644
index 0000000000..6aa6222a72
--- /dev/null
+++ b/src/app/common/f-chip/chip.component.ts
@@ -0,0 +1,10 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'f-chip',
+  templateUrl: './chip.component.html',
+  styleUrls: ['./chip.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FChipComponent {}
diff --git a/src/app/common/f-chip/f-chip.component.html b/src/app/common/f-chip/f-chip.component.html
deleted file mode 100644
index 10c24dbd5a..0000000000
--- a/src/app/common/f-chip/f-chip.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div
-  class="text-xl min-w-50 font-bold bg-formatif-blue text-white rounded-full cursor-pointer pl-6 pr-6 min-h-12 h-12 ml-1 mr-1 flex items-center justify-center"
->
-  <span class="text-md"><ng-content></ng-content> </span>
-</div>
diff --git a/src/app/common/f-chip/f-chip.component.spec.ts b/src/app/common/f-chip/f-chip.component.spec.ts
deleted file mode 100644
index f431488a66..0000000000
--- a/src/app/common/f-chip/f-chip.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FChipComponent } from './f-chip.component';
-
-describe('FChipComponent', () => {
-  let component: FChipComponent;
-  let fixture: ComponentFixture<FChipComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FChipComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(FChipComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/common/f-chip/f-chip.component.ts b/src/app/common/f-chip/f-chip.component.ts
deleted file mode 100644
index de2a1e148f..0000000000
--- a/src/app/common/f-chip/f-chip.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'f-chip',
-  templateUrl: './f-chip.component.html',
-  styleUrls: ['./f-chip.component.scss'],
-})
-export class FChipComponent {}
diff --git a/src/app/common/feedback-template-editor/feedback-template-editor.component.html b/src/app/common/feedback-template-editor/feedback-template-editor.component.html
new file mode 100644
index 0000000000..c8fe0c13a1
--- /dev/null
+++ b/src/app/common/feedback-template-editor/feedback-template-editor.component.html
@@ -0,0 +1,267 @@
+<div class="rounded-xl border border-gray-200 bg-white p-3.5 shadow">
+  <div class="mb-0.5">
+    <h4 class="text-base font-bold text-gray-900">Edit Feedback Templates for Outcome</h4>
+
+    <div class="flex flex-col gap-5">
+      <table
+        #templateTable
+        class="f-table selectable flex-grow"
+        mat-table
+        matSort
+        [dataSource]="templateSource"
+        (matSortChange)="sortTemplateData($event)"
+      >
+        <ng-container matColumnDef="icon" sticky>
+          <th *matHeaderCellDef mat-header-cell></th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            class="pr-0"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            @if (feedbackTemplate.type === 'group') {
+              <mat-icon>folder</mat-icon>
+            }
+            @if (feedbackTemplate.type === 'template') {
+              <mat-icon>description</mat-icon>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="parent" sticky>
+          <th *matHeaderCellDef mat-header-cell>Parent</th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            {{ getParentChipText(feedbackTemplate.parentChipId) }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="chipText" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Chip Text</th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            {{ feedbackTemplate.chipText }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="description" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            {{ feedbackTemplate.description }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="commentText" sticky>
+          <th *matHeaderCellDef mat-header-cell>Comment Text</th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            {{ feedbackTemplate.commentText }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="summaryText" sticky>
+          <th *matHeaderCellDef mat-header-cell>Summary Text</th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            {{ feedbackTemplate.type === 'group' ? '' : feedbackTemplate.summaryText }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="taskStatus" sticky>
+          <th *matHeaderCellDef mat-header-cell>Task Status</th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            @if (feedbackTemplate.taskStatus) {
+              <mat-chip>
+                <mat-icon matChipAvatar>
+                  {{ taskService.statusData(feedbackTemplate.taskStatus).materialIcon }}
+                </mat-icon>
+                {{ taskService.statusData(feedbackTemplate.taskStatus).label }}
+              </mat-chip>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="feedbackTemplateAction" sticky>
+          <th *matHeaderCellDef mat-header-cell></th>
+          <td
+            *matCellDef="let feedbackTemplate"
+            mat-cell
+            (click)="selectFeedbackTemplate(feedbackTemplate)"
+          >
+            @if (feedbackTemplateHasChanges(feedbackTemplate)) {
+              <button
+                aria-label="save feedback template"
+                color="primary"
+                mat-icon-button
+                (click)="saveFeedbackTemplate(feedbackTemplate)"
+              >
+                <mat-icon>save</mat-icon>
+              </button>
+            }
+            <button
+              aria-label="delete feedback template"
+              color="warn"
+              mat-icon-button
+              (click)="deleteFeedbackTemplate(feedbackTemplate)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </td>
+        </ng-container>
+
+        <tr *matHeaderRowDef="templateColumns" mat-header-row></tr>
+        <tr
+          *matRowDef="let row; columns: templateColumns"
+          mat-row
+          [style.background]="selectedTemplate === row ? 'lightblue' : ''"
+        ></tr>
+      </table>
+
+      <span class="flex items-center">
+        <div class="h-12">
+          <mat-form-field appearance="outline">
+            <input matInput placeholder="Filter" (keyup)="applyFilter($event.target.value)" />
+          </mat-form-field>
+        </div>
+        <mat-paginator
+          class="mat-elevation-z0"
+          [pageSizeOptions]="[5, 10, 25, 100]"
+        ></mat-paginator>
+        <span class="flex-grow"></span>
+        @if (context) {
+          <label>Feedback CSV</label>
+          <button mat-icon-button (click)="downloadCsv()">
+            <mat-icon>download</mat-icon>
+          </button>
+          <button mat-icon-button (click)="uploadCsv()">
+            <mat-icon>upload_file</mat-icon>
+          </button>
+          <span class="flex-grow"></span>
+        }
+        <button color="primary" mat-raised-button (click)="createFeedbackTemplate()">
+          Add Template
+        </button>
+      </span>
+
+      @if (selectedTemplate) {
+        <div>
+          <h4 class="mt-0.5 text-base font-bold text-gray-900">Edit Template</h4>
+
+          <div class="flex flex-row gap-2.5">
+            @if (selectedTemplate.isNew) {
+              <mat-form-field appearance="outline" class="basis-1/5">
+                <mat-label>Type</mat-label>
+                <mat-select
+                  required
+                  [value]="selectedTemplate.type"
+                  (selectionChange)="onTemplateTypeChange($event)"
+                >
+                  <mat-option [value]="'group'">Group</mat-option>
+                  <mat-option [value]="'template'">Template</mat-option>
+                </mat-select>
+              </mat-form-field>
+            }
+
+            <mat-form-field appearance="outline" class="basis-1/5">
+              <mat-label>Parent</mat-label>
+              <mat-select [(ngModel)]="selectedTemplate.parentChipId">
+                @for (parent of getPossibleParents(); track parent) {
+                  <mat-option [value]="parent.id">
+                    {{ parent.chipText }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="basis-1/5">
+              <mat-label>Chip Text</mat-label>
+              <input
+                matInput
+                maxlength="20"
+                pattern=".*\S.*"
+                placeholder="Short text shown on the chip"
+                required
+                [(ngModel)]="selectedTemplate.chipText"
+              />
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="flex-grow">
+              <mat-label>Description</mat-label>
+              <input
+                matInput
+                maxlength="116"
+                pattern=".*\S.*"
+                placeholder="Description of the feedback template"
+                required
+                [(ngModel)]="selectedTemplate.description"
+              />
+            </mat-form-field>
+          </div>
+
+          @if (selectedTemplate.type === 'template') {
+            <mat-form-field appearance="outline" class="flex flex-grow">
+              <mat-label>Comment Text</mat-label>
+              <textarea
+                matInput
+                pattern=".*\S.*"
+                placeholder="Feedback text that is added to the comment area"
+                required
+                [(ngModel)]="selectedTemplate.commentText"
+              >
+              </textarea>
+            </mat-form-field>
+
+            <div class="flex flex-row gap-2.5">
+              <mat-form-field appearance="outline" class="flex-grow">
+                <mat-label>Summary Text</mat-label>
+                <input
+                  matInput
+                  pattern=".*\S.*"
+                  placeholder="Summary of the feedback"
+                  required
+                  [(ngModel)]="selectedTemplate.summaryText"
+                />
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="basis-1/3">
+                <mat-label>Task Status</mat-label>
+                <mat-select [(ngModel)]="selectedTemplate.taskStatus">
+                  <mat-option [value]="null"></mat-option>
+                  @for (status of taskService.feedbackTemplateStatuses; track status) {
+                    <mat-option [value]="status">
+                      {{ taskService.statusData(status).label }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+          }
+
+          <div class="flex">
+            <span class="flex-grow"></span>
+            <button
+              color="primary"
+              mat-raised-button
+              (click)="saveFeedbackTemplate(selectedTemplate)"
+            >
+              Save Template
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+</div>
diff --git a/src/app/common/feedback-template-editor/feedback-template-editor.component.ts b/src/app/common/feedback-template-editor/feedback-template-editor.component.ts
new file mode 100644
index 0000000000..4c8a6d803a
--- /dev/null
+++ b/src/app/common/feedback-template-editor/feedback-template-editor.component.ts
@@ -0,0 +1,339 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSelectChange} from '@angular/material/select';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {
+  FeedbackTemplate,
+  FeedbackTemplateService,
+  LearningOutcome,
+  TaskDefinition,
+  TaskService,
+  Unit,
+} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+import {ConfirmationModalService} from '../modals/confirmation-modal/confirmation-modal.service';
+import {
+  CsvResult,
+  CsvResultModalService,
+} from '../modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalService} from '../modals/csv-upload-modal/csv-upload-modal.service';
+
+@Component({
+  selector: 'f-feedback-template-editor',
+  templateUrl: 'feedback-template-editor.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FeedbackTemplateEditorComponent implements OnChanges, AfterViewInit {
+  @Input() context?: TaskDefinition | Unit;
+  @Input() selectedOutcome: LearningOutcome;
+
+  @ViewChild('templateTable', {static: false}) templateTable: MatTable<FeedbackTemplate>;
+  @ViewChild(MatSort, {static: false}) templateSort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) templatePaginator: MatPaginator;
+
+  public templateSource: MatTableDataSource<FeedbackTemplate>;
+  public templateColumns: string[] = [
+    'icon',
+    'parent',
+    'chipText',
+    'description',
+    'commentText',
+    'summaryText',
+    'taskStatus',
+    'feedbackTemplateAction',
+  ];
+  public selectedTemplate: FeedbackTemplate;
+  public possibleParents: FeedbackTemplate[];
+
+  constructor(
+    private alerts: AlertService,
+    private feedbackTemplateService: FeedbackTemplateService,
+    private fileDownloaderService: FileDownloaderService,
+    public taskService: TaskService,
+    private csvResultModalService: CsvResultModalService,
+    private csvUploadModalService: CsvUploadModalService,
+    private confirmationModal: ConfirmationModalService,
+  ) {}
+
+  ngAfterViewInit(): void {
+    this.getFeedbackChips();
+  }
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.selectedTemplate = null;
+    this.getFeedbackChips();
+  }
+
+  initialiseTable(feedbackTemplates: FeedbackTemplate[]) {
+    this.templateSource = new MatTableDataSource<FeedbackTemplate>(feedbackTemplates);
+    this.templateSource.paginator = this.templatePaginator;
+    this.templateSource.sort = this.templateSort;
+    this.templateSource.filterPredicate = (data: FeedbackTemplate, filter: string) => {
+      const filterValue = filter.trim().toLowerCase();
+      return (
+        this.getParentChipText(data.parentChipId).toLowerCase().includes(filterValue) ||
+        data.chipText.toLowerCase().includes(filterValue) ||
+        data.commentText?.toLowerCase().includes(filterValue) ||
+        data.summaryText?.toLowerCase().includes(filterValue) ||
+        data.description.toLowerCase().includes(filterValue)
+      );
+    };
+    this.sortTemplateData({active: 'chipText', direction: 'asc'});
+  }
+
+  public getFeedbackChips() {
+    this.feedbackTemplateService.cache.values.subscribe((templates) => {
+      const outcomeTemplates = templates.filter(
+        (temp) => temp.learningOutcomeId === this.selectedOutcome.id,
+      );
+      this.possibleParents = outcomeTemplates.filter((temp) => temp.type === 'group');
+      this.initialiseTable(outcomeTemplates);
+    });
+  }
+
+  public saveFeedbackTemplate(feedbackTemplate: FeedbackTemplate) {
+    if (
+      !feedbackTemplate.chipText.trim() ||
+      !feedbackTemplate.description.trim() ||
+      (feedbackTemplate.type === 'template' &&
+        (!feedbackTemplate.commentText.trim() || !feedbackTemplate.summaryText.trim()))
+    ) {
+      this.alerts.error('Failed to save feedback template. Fill in required fields.');
+      return;
+    }
+    feedbackTemplate.save().subscribe({
+      next: () => {
+        this.alerts.success('Template saved');
+        feedbackTemplate.setOriginalSaveData(this.feedbackTemplateService.mapping);
+        this.selectFeedbackTemplate(this.selectedTemplate);
+      },
+      error: () => this.alerts.error('Failed to save feedback template. Please try again.'),
+    });
+  }
+
+  public selectFeedbackTemplate(feedbackTemplate: FeedbackTemplate) {
+    if (this.selectedTemplate === feedbackTemplate) {
+      this.selectedTemplate = null;
+    } else {
+      this.selectedTemplate = feedbackTemplate;
+
+      if (!this.selectedTemplate.hasOriginalSaveData) {
+        this.selectedTemplate.setOriginalSaveData(this.feedbackTemplateService.mapping);
+      }
+    }
+  }
+
+  public sortTemplateData(sort: Sort) {
+    sort.active = sort.active || 'chipText';
+    sort.direction = sort.direction || 'asc';
+
+    const isAsc = sort.direction === 'asc';
+
+    // Generic sorting function for dynamic property access
+    const compare = (a: FeedbackTemplate, b: FeedbackTemplate) => {
+      const key = sort.active as keyof FeedbackTemplate;
+      const aValue = a[key];
+      const bValue = b[key];
+
+      if (typeof aValue === 'string' && typeof bValue === 'string') {
+        return aValue.localeCompare(bValue) * (isAsc ? 1 : -1);
+      }
+      return 0;
+    };
+
+    // Initial sorting by the chosen method
+    const sortedTemplates = [...this.templateSource.data].sort(compare);
+
+    // Determine maximum depth of the hierarchy (only groups contribute to depth)
+    const depthMap: Map<number, number> = new Map();
+    let maxDepth = 0;
+
+    const feedbackGroups = sortedTemplates.filter((t) => t.type === 'group');
+    const feedbackTemplates = sortedTemplates.filter((t) => t.type !== 'group');
+
+    feedbackGroups.forEach((template) => {
+      let depth = 0;
+      let parentId = template.parentChipId;
+
+      while (parentId) {
+        depth++;
+        parentId = sortedTemplates.find((t) => t.id === parentId)?.parentChipId ?? null;
+      }
+
+      depthMap.set(template.id, depth);
+      maxDepth = Math.max(maxDepth, depth);
+    });
+
+    // Assign sequential order numbers
+    const orderMap: Map<number, number> = new Map();
+    let orderIndex = 1;
+
+    sortedTemplates.forEach((template) => {
+      orderMap.set(template.id, orderIndex++);
+    });
+
+    feedbackGroups.sort((a, b) => depthMap.get(a.id)! - depthMap.get(b.id)!);
+
+    // Assign hierarchical order to groups using depth-based multiplier
+    feedbackGroups.forEach((template) => {
+      const parentOrder = template.parentChipId ? orderMap.get(template.parentChipId)! : 0;
+      const depth = depthMap.get(template.id) ?? 0;
+      const multiplier = 10 ** (maxDepth + 5 - depth * 3); // Proper scaling based on depth
+
+      orderMap.set(template.id, parentOrder + orderMap.get(template.id)! * multiplier);
+    });
+
+    // Assign order values to templates by directly adding their parent's order
+    feedbackTemplates.forEach((template) => {
+      const parentOrder = orderMap.get(template.parentChipId) ?? 0;
+      orderMap.set(template.id, parentOrder + orderMap.get(template.id)!);
+    });
+
+    // Sort again by computed hierarchical order
+    sortedTemplates.sort((a, b) => orderMap.get(a.id)! - orderMap.get(b.id)!);
+
+    // Update the data source
+    this.templateSource.data = [...sortedTemplates];
+  }
+
+  applyFilter(filterValue: string) {
+    this.templateSource.filter = filterValue;
+    if (this.templateSource.paginator) {
+      this.templateSource.paginator.firstPage();
+    }
+  }
+
+  public feedbackTemplateHasChanges(feedbackTemplate: FeedbackTemplate): boolean {
+    return feedbackTemplate.hasChanges(this.feedbackTemplateService.mapping);
+  }
+
+  public deleteFeedbackTemplate(feedbackTemplate: FeedbackTemplate) {
+    this.confirmationModal.show(
+      'Delete feedback template',
+      'Are you sure you want to delete this template? This action is final.',
+      () => {
+        feedbackTemplate.delete().subscribe({
+          next: () => {
+            this.alerts.success('Feedback template deleted');
+            if (this.selectedTemplate === feedbackTemplate) {
+              this.selectFeedbackTemplate(this.selectedTemplate);
+            }
+          },
+          error: () => this.alerts.error('Failed to delete feedback template. Please try again.'),
+        });
+      },
+    );
+  }
+
+  public uploadCsv() {
+    const url = this.selectedOutcome.getFeedbackTemplateBatchUploadUrl();
+
+    this.csvUploadModalService.show(
+      'Upload Feedback Templates as CSV',
+      'Test message',
+      {file: {name: 'Feedback Templates CSV Data', type: 'csv'}},
+      url,
+      (response: CsvResult) => {
+        this.csvResultModalService.show('Feedback Templates CSV Upload Results', response);
+        if (response.success.length > 0) {
+          let contextType: 'units' | 'task_definitions';
+
+          if (this.context instanceof Unit) {
+            this.context.refresh();
+            contextType = 'units';
+          } else if (this.context instanceof TaskDefinition) {
+            this.context.unit.refresh();
+            contextType = 'task_definitions';
+          }
+          if (contextType) {
+            this.feedbackTemplateService
+              .fetchAll({contextType, contextId: this.context.id}, {})
+              .subscribe({
+                next: () => this.getFeedbackChips(),
+                error: () => this.alerts.error('Error loading task feedback templates.'),
+              });
+          }
+        }
+      },
+    );
+  }
+
+  public downloadCsv() {
+    const url = this.selectedOutcome.getFeedbackTemplateBatchUploadUrl();
+    let name = `${this.selectedOutcome.abbreviation}-FeedbackTemplates.csv`;
+
+    if (this.context instanceof TaskDefinition) {
+      name = `${this.context.unit.code}-${this.context.abbreviation}-${name}`;
+    } else if (this.context instanceof Unit) {
+      name = `${this.context.code}-${name}`;
+    }
+
+    this.fileDownloaderService.downloadFile(url, name);
+  }
+
+  public createFeedbackTemplate() {
+    if (this.selectedOutcome.isNew) {
+      this.alerts.error('Save the new outcome to proceed.');
+      return;
+    }
+
+    const feedbackTemplate = new FeedbackTemplate();
+
+    feedbackTemplate.type = 'template';
+    feedbackTemplate.chipText = '';
+    feedbackTemplate.description = '';
+    feedbackTemplate.commentText = '';
+    feedbackTemplate.summaryText = '';
+    feedbackTemplate.learningOutcomeId = this.selectedOutcome.id;
+
+    this.selectedTemplate = feedbackTemplate;
+  }
+
+  onTemplateTypeChange(event: MatSelectChange): void {
+    if (!this.selectedTemplate.isNew) {
+      this.alerts.error('Template type change forbidden.');
+      event.source.writeValue(this.selectedTemplate.type);
+    } else {
+      this.selectedTemplate.type = event.value;
+    }
+  }
+
+  getPossibleParents(): FeedbackTemplate[] {
+    if (!this.selectedTemplate.isNew) {
+      return this.possibleParents.filter(
+        (p) => p.id != this.selectedTemplate.id && !this.isAncestor(this.selectedTemplate.id, p),
+      );
+    } else {
+      return this.possibleParents;
+    }
+  }
+
+  isAncestor(idToCheck: number, descendant: FeedbackTemplate): boolean {
+    if (descendant.parentChipId === idToCheck) {
+      return true;
+    }
+
+    const parent = this.possibleParents.find((p) => p.id === descendant.parentChipId);
+    if (!parent) {
+      return false;
+    }
+
+    return this.isAncestor(idToCheck, parent);
+  }
+
+  getParentChipText(parentId: number): string {
+    const parent = this.possibleParents.find((p) => p.id === parentId);
+    return parent ? parent.chipText : '';
+  }
+}
diff --git a/src/app/common/file-downloader/file-downloader.service.ts b/src/app/common/file-downloader/file-downloader.service.ts
index 3b549edbd6..e37e1f02cb 100644
--- a/src/app/common/file-downloader/file-downloader.service.ts
+++ b/src/app/common/file-downloader/file-downloader.service.ts
@@ -2,6 +2,16 @@ import {HttpClient, HttpResponse} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {AlertService} from '../services/alert.service';
 
+interface FileDownloaderData {
+  url: string;
+  response: HttpResponse<Blob>;
+  success: (url: string, response: HttpResponse<Blob>) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  failure: (error: any) => void;
+
+  binaryData: Blob[];
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -11,23 +21,108 @@ export class FileDownloaderService {
     private alerts: AlertService,
   ) {}
 
+  private processPartialBlob(data: FileDownloaderData) {
+    // We now need to ask for the next part of the file
+    const range = data.response.headers.get('Content-Range');
+    if (range) {
+      // The range header is in the format "bytes start-end/totalSize"
+      const parts = range.split('/');
+
+      // Split into the range and the total size
+      if (parts.length === 2) {
+        // Parse the total size and the range
+        const totalSize = parseInt(parts[1], 10);
+
+        // Extract the range after the "bytes" part
+        const contentRange = parts[0].split(' ')[1];
+
+        // Extract the parts of the range
+        const contentRangeParts = contentRange.split('-');
+
+        // If we have two parts, we have a valid range and size
+        if (contentRangeParts.length === 2) {
+          const start = parseInt(contentRangeParts[0], 10);
+          const end = parseInt(contentRangeParts[1], 10);
+
+          // Check the start is the same as the length of the binary data received
+          if (start !== data.binaryData.map((value) => value.size).reduce((pv, cv) => pv + cv, 0)) {
+            console.log('Error: start != oldLen');
+            this.alerts.error('Error downloading file part received out of order');
+          }
+          data.binaryData.push(data.response.body);
+
+          // If the end is less than the total size, we need to request the next part
+          if (end + 1 < totalSize) {
+            const rangeHeader = {Range: `bytes=${end + 1}-${totalSize}`};
+            this.httpClient
+              .get(data.url, {responseType: 'blob', observe: 'response', headers: rangeHeader})
+              .subscribe({
+                next: (response2) => {
+                  data.response = response2;
+                  this.processHttpResponse(data);
+                },
+                error: (error) => {
+                  if (data.failure) {
+                    data.failure(error);
+                  }
+                },
+              });
+            return;
+          } else {
+            // we have all of the data, so we can report success
+            this.reportSuccess(data);
+          }
+        }
+      }
+    } else {
+      // no range... so we can't do anything!
+      console.log('Error reading response from server - no range with 206 response');
+      if (data.failure) {
+        data.failure('Unable to read data from server');
+      }
+    }
+  }
+
+  private processHttpResponse(data: FileDownloaderData) {
+    // Check if we have a partial content response
+    if (data.response.status === 206) {
+      this.processPartialBlob(data);
+    } else {
+      // Save the binary data we have received so far
+      data.binaryData.push(data.response.body);
+      this.reportSuccess(data);
+    }
+  }
+
+  private reportSuccess(data: FileDownloaderData) {
+    const resourceUrl: string = window.URL.createObjectURL(
+      new Blob(data.binaryData, {type: data.response.body.type}),
+    );
+    data.success(resourceUrl, data.response);
+  }
+
   public downloadBlob(
     url: string,
     success: (url: string, response: HttpResponse<Blob>) => void,
-    failure: (error: any) => void,
+    failure: (error) => void,
   ) {
+    // Declare binary data outside of the subscription so that it can be accessed in the second requests when partial content is returned
+    const binaryData = [];
+
     this.httpClient.get(url, {responseType: 'blob', observe: 'response'}).subscribe({
       next: (response) => {
-        const binaryData = [];
-        binaryData.push(response.body);
-        // response.headers.get('content-type')
-        const resourceUrl: string = window.URL.createObjectURL(
-          new Blob(binaryData, {type: response.body.type}),
-        );
-        success(resourceUrl, response);
+        this.processHttpResponse({
+          url: url,
+          response: response,
+          success: success,
+          failure: failure,
+          binaryData: binaryData,
+        });
       },
       error: (error) => {
-        if (failure) failure(error);
+        if (failure) {
+          failure(error);
+        }
       },
     });
   }
@@ -36,28 +131,42 @@ export class FileDownloaderService {
     window.URL.revokeObjectURL(url);
   }
 
+  /**
+   * Download or save a blob to a file. This will trigger the user to "download"
+   * the blob, with the suggested filename.
+   *
+   * @param blobUrl the url of the blob to download/save to file
+   * @param filename the name of the file
+   */
+  public downloadBlobToFile(blobUrl: string, filename: string): void {
+    const downloadLink = document.createElement('a');
+    downloadLink.href = blobUrl;
+    downloadLink.target = '_blank';
+    downloadLink.setAttribute('download', filename);
+    document.body.appendChild(downloadLink);
+
+    downloadLink.click();
+    downloadLink.parentNode.removeChild(downloadLink);
+  }
+
   public downloadFile(url: string, defaultFilename: string) {
     this.downloadBlob(
       url,
       (resourceUrl: string, response: HttpResponse<Blob>) => {
-        const downloadLink = document.createElement('a');
-        downloadLink.href = resourceUrl;
-        downloadLink.target = '_blank';
-        const filenameRegex = /filename[^;=\n]*=((['']).*?\2|[^;\n]*)/;
+        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+
         const matches = filenameRegex.exec(response.headers.get('Content-Disposition'));
+        let filename: string;
+
         if (matches != null && matches[1]) {
-          const filename = matches[1].replace(/['']/g, '');
-          downloadLink.setAttribute('download', filename);
+          filename = matches[1].replace(/['"]/g, '');
         } else {
-          downloadLink.setAttribute('download', defaultFilename);
+          filename = defaultFilename;
         }
 
-        document.body.appendChild(downloadLink);
-
-        downloadLink.click();
-        downloadLink.parentNode.removeChild(downloadLink);
+        this.downloadBlobToFile(resourceUrl, filename);
       },
-      (error: any) => {
+      (error) => {
         this.alerts.error(`Error downloading file - ${error}`);
       },
     );
diff --git a/src/app/common/file-drop/file-drop.component.html b/src/app/common/file-drop/file-drop.component.html
index 669ae04059..fe4f73c8a9 100644
--- a/src/app/common/file-drop/file-drop.component.html
+++ b/src/app/common/file-drop/file-drop.component.html
@@ -1,51 +1,56 @@
 <input
-  type="file"
+  #fileUpload
   class="hidden"
+  type="file"
   [accept]="accept"
   [multiple]="multiple"
   (change)="onFileSelected($event)"
-  #fileUpload
 />
 
-<div class="flex items-center w-full" appDragDrop (fileDropped)="onFileDragOver($event)">
+<div appDragDrop class="flex w-full items-center" (fileDropped)="onFileDragOver($event)">
   <button
-    mat-flat-button
-    class="h-[52px] rounded-r-none border-r-0 rounded-lg shrink-0"
+    class="h-[52px] shrink-0 rounded-lg rounded-r-none border-r-0"
     color="primary"
-    (click)="fileUpload.click()"
+    mat-flat-button
     [disabled]="uploadProgress"
+    (click)="fileUpload.click()"
   >
     @if (uploadProgress) {
-    <mat-spinner [diameter]="18" [strokeWidth]="0.5" mode="indeterminate"></mat-spinner>
-    } @if (!uploadProgress) {
-    <span>Choose file</span>
+      <mat-spinner mode="indeterminate" [diameter]="18" [strokeWidth]="0.5"></mat-spinner>
+    }
+    @if (!uploadProgress) {
+      <span>Choose file</span>
     }
   </button>
   <div class="f-inner-border flex grow items-center rounded-lg rounded-l-none bg-white">
-    <div class="flex flex-col w-full">
-      <div class="flex ml-4 h-[48px] items-center">
+    <div class="flex w-full flex-col">
+      <div class="ml-2.5 flex h-[48px] items-center">
         @if (file?.name) {
-        <mat-icon class="mr-2">upload_file</mat-icon>
+          <mat-icon class="mr-1">upload_file</mat-icon>
         }
-        <span class="truncate grow max-w-xs mt-[4px]"> {{ file?.name || message }} </span>
+        <span class="mt-[4px] max-w-xs grow truncate"> {{ file?.name || message }} </span>
         {{ uploadProgress }}
         <button
-          [disabled]="!file?.name"
           class="ml-auto"
           mat-icon-button
+          [disabled]="!file?.name"
           (click)="uploadProgress ? cancelUpload() : upload()"
         >
           @if (!uploadProgress) {
-          <mat-icon [ngClass]="{ 'animate-bounce': file?.name }">upload</mat-icon>
-          } @if (uploadProgress) {
-          <mat-icon>cancel</mat-icon>
+            <mat-icon [ngClass]="{'animate-bounce': $safeNavigationMigration(file?.name)}"
+              >upload</mat-icon
+            >
+          }
+          @if (uploadProgress) {
+            <mat-icon>cancel</mat-icon>
           }
         </button>
       </div>
       @if (uploadProgress) {
-      <mat-progress-bar mode="determinate" [value]="uploadProgress"> </mat-progress-bar>
-      } @if (!uploadProgress) {
-      <span class="h-[4px]"></span>
+        <mat-progress-bar mode="determinate" [value]="uploadProgress"> </mat-progress-bar>
+      }
+      @if (!uploadProgress) {
+        <span class="h-[4px]"></span>
       }
     </div>
   </div>
diff --git a/src/app/common/file-drop/file-drop.component.scss b/src/app/common/file-drop/file-drop.component.scss
index 2c3f68d5d2..bb6482adfe 100644
--- a/src/app/common/file-drop/file-drop.component.scss
+++ b/src/app/common/file-drop/file-drop.component.scss
@@ -1,6 +1,6 @@
 // import color
 .f-inner-border {
-  box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
+  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8);
   clip-path: inset(-1px -1px 0px 0px);
 }
 
diff --git a/src/app/common/file-drop/file-drop.component.ts b/src/app/common/file-drop/file-drop.component.ts
index 24a94a1020..610dc4cbe3 100644
--- a/src/app/common/file-drop/file-drop.component.ts
+++ b/src/app/common/file-drop/file-drop.component.ts
@@ -1,7 +1,7 @@
-import { HttpClient, HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Subscription, throwError } from 'rxjs';
-import { AlertService } from '../services/alert.service';
+import {HttpClient, HttpErrorResponse, HttpEventType, HttpResponse} from '@angular/common/http';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+import {Subscription, throwError} from 'rxjs';
+import {AlertService} from '../services/alert.service';
 
 /**
  * Allow files to be dropped for upload
@@ -10,9 +10,11 @@ import { AlertService } from '../services/alert.service';
   selector: 'f-file-drop',
   templateUrl: 'file-drop.component.html',
   styleUrls: ['file-drop.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class FileDropComponent {
-  @Input({ required: true }) mode: 'endpoint' | 'event';
+  @Input({required: true}) mode: 'endpoint' | 'event';
 
   /** The name of the file(s) you are asking the user to upload */
   @Input() desiredFileName: string;
@@ -26,8 +28,8 @@ export class FileDropComponent {
   /** The URL of the endpoint to POST the file to if mode is endpoint*/
   @Input() endpoint: string;
   @Input() body: object;
-  @Output() fileChange = new EventEmitter<File>();
-  @Output() uploadSuccess = new EventEmitter<HttpResponse<object>>();
+  @Output() fileChange: EventEmitter<File> = new EventEmitter();
+  @Output() uploadSuccess: EventEmitter<HttpResponse<object>> = new EventEmitter();
 
   protected uploadProgress: number;
   protected uploadSub: Subscription;
@@ -38,7 +40,7 @@ export class FileDropComponent {
   /**
    * Report all files dropped if mode is event
    */
-  @Output() filesDropped = new EventEmitter<File[]>();
+  @Output() filesDropped: EventEmitter<File[]> = new EventEmitter();
 
   constructor(
     private http: HttpClient,
@@ -79,21 +81,23 @@ export class FileDropComponent {
         const formData = new FormData();
 
         formData.append('file', this.file);
-        this.http.post(this.endpoint, formData, { reportProgress: true, observe: 'events' }).subscribe(
-          (data) => {
-            if (data.type == HttpEventType.UploadProgress) {
-              this.uploadProgress = Math.round(100 * (data.loaded / data.total));
-            }
-            if (data.type == HttpEventType.Response) {
-              if (data.ok) {
-                this.alert.success(`File uploaded successfully`);
-                this.uploadSuccess.emit(data as HttpResponse<Object>);
+        this.http
+          .post(this.endpoint, formData, {reportProgress: true, observe: 'events'})
+          .subscribe(
+            (data) => {
+              if (data.type == HttpEventType.UploadProgress) {
+                this.uploadProgress = Math.round(100 * (data.loaded / data.total));
               }
-            }
-          },
-          (error) => this.handleError(error),
-          () => this.reset(),
-        );
+              if (data.type == HttpEventType.Response) {
+                if (data.ok) {
+                  this.alert.success(`File uploaded successfully`);
+                  this.uploadSuccess.emit(data as HttpResponse<object>);
+                }
+              }
+            },
+            (error) => this.handleError(error),
+            () => this.reset(),
+          );
       }
     } else {
       this.filesDropped.emit([this.file]);
diff --git a/src/app/common/file-uploader/file-upload-types.ts b/src/app/common/file-uploader/file-upload-types.ts
new file mode 100644
index 0000000000..b9be745ed2
--- /dev/null
+++ b/src/app/common/file-uploader/file-upload-types.ts
@@ -0,0 +1,37 @@
+export const ACCEPTED_TYPES = {
+  document: {
+    extensions: ['pdf', 'ps'],
+    // icon: 'picture_as_pdf',
+    icon: 'article_outlined',
+    name: 'PDF',
+  },
+  csv: {
+    extensions: ['csv', 'xls', 'xlsx'],
+    icon: 'insert_chart_outlined',
+    name: 'CSV',
+  },
+  code: {
+    // prettier-ignore
+    extensions: [
+      'pas', 'cpp', 'c', 'cs', 'csv', 'h', 'hpp', 'java', 'py', 'js', 'html', 'coffee', 'rb', 'css',
+      'scss', 'yaml', 'yml', 'xml', 'json', 'ts', 'r', 'rmd', 'rnw', 'rhtml', 'rpres', 'tex',
+      'vb', 'sql', 'txt', 'md', 'jack', 'hack', 'asm', 'hdl', 'tst', 'out', 'cmp', 'vm', 'sh', 'bat',
+      'dat', 'ipynb', 'pml', 'vue'
+    ],
+    // icon: 'code',
+    // icon: 'code',
+    icon: 'integration_instructions_outlined',
+    name: 'code',
+  },
+  image: {
+    extensions: ['png', 'bmp', 'tiff', 'tif', 'jpeg', 'jpg', 'gif'],
+    // icon: 'image',
+    icon: 'image_outlined',
+    name: 'image',
+  },
+  zip: {
+    extensions: ['zip', 'tar.gz', 'tgz', 'tar'],
+    icon: 'folder_zip',
+    name: 'zip',
+  },
+} as const;
diff --git a/src/app/common/file-uploader/file-uploader.coffee b/src/app/common/file-uploader/file-uploader.coffee
deleted file mode 100644
index 9f8dac5ff9..0000000000
--- a/src/app/common/file-uploader/file-uploader.coffee
+++ /dev/null
@@ -1,298 +0,0 @@
-angular.module('doubtfire.common.file-uploader', ["ngFileUpload"])
-
-.directive 'fileUploader', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'common/file-uploader/file-uploader.tpl.html'
-  scope:
-    # Files map a key (file name to be uploaded) to a value (containing a
-    # a display name, and the type of file that is to be accepted, where
-    # type is one of [document, csv, archive, code, image]
-    # E.g.:
-    # { file0: { name: 'Silly Name Code', type: 'code'  },
-    #   fileX: { name: 'Silly name Shot', type: 'image' } ... }
-    files: '='
-    # URL to where image is to be uploaded
-    url: '='
-    # Optional HTTP method used to post data (defaults to POST)
-    method: '@'
-    # Other payload data to pass in the upload
-    # E.g.:
-    # { unit_id: 10, other: { key: data, with: [array, of, stuff] } ... }
-    payload: '=?'
-    # Optional function to notify just prior to upload, enables injection of payload for example
-    onBeforeUpload: '=?'
-    # Optional function to perform on success (with one response parameter)
-    onSuccess: '=?'
-    # Optional function to perform on failure (with one response parameter)
-    onFailure: '=?'
-    # Optional function to perform when the upload is successful and about
-    # to go back into its default state
-    onComplete: '=?'
-    # This value is bound to whether or not the uploader is currently uploading
-    isUploading: '=?'
-    # This value is bound to whether or not the uploader is ready to upload
-    isReady: '=?'
-    # Shows the names of files to be uploaded (defaults to true)
-    showName: '=?'
-    # Shows initially as button
-    asButton: '=?'
-    # Exposed files that are in the zone
-    filesSelected: '=?'
-    # Whether we have one or many drop zones (default is false)
-    singleDropZone: '=?'
-    # Whether or not we show the upload button or do we hide it allowing an
-    # external trigger to upload (default is true)
-    showUploadButton: '=?'
-    # Sets this scope variable to a function that can then be triggered externally
-    # from outside the scope
-    initiateUpload: '=?'
-    # What happens when we click cancel on failure
-    onClickFailureCancel: '=?'
-    # Whether we should reset after upload
-    resetAfterUpload: '=?'
-  controller: ($scope, $timeout, newUserService) ->
-    #
-    # Accepted upload types with associated data
-    #
-    ACCEPTED_TYPES =
-      document:
-        extensions: ['pdf', 'ps']
-        icon:       'fa-file-pdf-o'
-        name:       'PDF'
-      csv:
-        extensions: ['csv','xls','xlsx']
-        icon:       'fa-file-excel-o'
-        name:       'CSV'
-      code:
-        extensions: ['pas', 'cpp', 'c', 'cs', 'csv', 'h', 'hpp', 'java', 'py', 'js', 'html', 'coffee', 'rb', 'css',
-                    'scss', 'yaml', 'yml', 'xml', 'json', 'ts', 'r', 'rmd', 'rnw', 'rhtml', 'rpres', 'tex',
-                    'vb', 'sql', 'txt', 'md', 'jack', 'hack', 'asm', 'hdl', 'tst', 'out', 'cmp', 'vm', 'sh', 'bat',
-                    'dat', 'ipynb', 'pml']
-        icon:       'fa-file-code-o'
-        name:       'code'
-      image:
-        extensions: ['png', 'bmp', 'tiff', 'tif', 'jpeg', 'jpg', 'gif']
-        name:       'image'
-        icon:       'fa-file-image-o'
-      zip:
-        extensions: ['zip', 'tar.gz', 'tar']
-        name:       'archive'
-        icon:       'fa-file-zip-o'
-
-    #
-    # Error handling; check if empty files
-    #
-    throw Error "No files provided to uploader" if $scope.files?.length is 0
-
-    #
-    # Whether or not clearEnqueuedFiles is enabled
-    #
-    $scope.clearEnqueuedUpload = (upload) ->
-      upload.model = null
-      refreshShownUploadZones()
-
-    #
-    # Default showName
-    #
-    $scope.showName ?= true
-
-    #
-    # Default singleDropZone
-    #
-    $scope.singleDropZone ?= false
-
-    #
-    # Default asButton
-    #
-    $scope.asButton ?= false
-
-    #
-    # Only initially show uploader if not presenting as button
-    #
-    $scope.showUploader = !$scope.asButton
-
-    #
-    # Default show upload button
-    #
-    $scope.showUploadButton ?= true
-
-    #
-    # Default resetAfterUpload to true
-    #
-    $scope.resetAfterUpload ?= true
-
-    #
-    # When a file is dropped, if there has been rejected files
-    # warn the user that that file is not okay
-    #
-    checkForError = (upload) ->
-      if upload.rejects?.length > 0
-        upload.display.error = yes
-        upload.rejects = null
-        $timeout (-> upload.display.error = no), 4000
-        return true
-      false
-
-    # Called when the model has changed
-    $scope.modelChanged = (newFiles, upload) ->
-      return unless newFiles.length > 0 || upload.rejects.length > 0
-      gotError = checkForError(upload)
-      unless gotError
-        $scope.filesSelected = _.flatten(_.map($scope.uploadZones, 'model'))
-        if $scope.singleDropZone
-          $scope.selectedFiles = $scope.uploadZones
-          refreshShownUploadZones()
-
-    #
-    # Will refresh which shown drop zones are shown
-    # Only changes if showing one drop zone
-    #
-    refreshShownUploadZones = ->
-      if $scope.singleDropZone
-        # Find the first-most empty model in each zone
-        firstEmptyZone = _.find($scope.uploadZones, (zone) -> !zone.model? || zone.model.length == 0)
-        if firstEmptyZone?
-          $scope.shownUploadZones = [firstEmptyZone]
-        else
-          $scope.shownUploadZones = []
-
-    #
-    # Whether or not drop is supported by this browser - assume
-    # true initially, but the drop zone will alter this
-    #
-    $scope.dropSupported = true
-
-    #
-    # Data required for each upload zone
-    #
-    createUploadZones = (files) ->
-      zones = _.map(files, (uploadData, uploadName) ->
-        type = uploadData.type
-        typeData = ACCEPTED_TYPES[type]
-        # No typeData found?
-        unless typeData?
-          throw Error "Invalid type provided to File Uploader #{type}"
-        zone =
-          name:     uploadName
-          model:    null
-          accept:   "'." + typeData.extensions.join(',.') + "'"
-          # Rejected files
-          rejects:  null
-          display:
-            name:   uploadData.name
-            # Font awesome supports PDF (from Document),
-            # CSV, Code and Image icons
-            icon:   typeData.icon
-            type:   typeData.name
-            # Whether or not a reject error is shown
-            error:  false
-        zone
-      )
-      # Remove all but the active drop zone
-      if $scope.singleDropZone
-        $scope.shownUploadZones = [_.first(zones)]
-      else
-        $scope.shownUploadZones = zones
-      $scope.uploadZones = zones
-    createUploadZones($scope.files)
-
-    #
-    # Watch for changes in the files, and recreate the zones when
-    # they do change
-    #
-    $scope.$watch 'files', (files, oldFiles) ->
-      createUploadZones(files)
-
-    #
-    # Checks if okay to upload (i.e., file models exist for each drop zone)
-    #
-    $scope.readyToUpload = ->
-      $scope.isReady = _.compact(_.flatten (upload.model for upload in $scope.uploadZones)).length is _.keys($scope.files).length
-
-    #
-    # Resets the uploader and call it
-    #
-    $scope.resetUploader = ->
-      # No upload info and we're not uploading
-      $scope.uploadingInfo = null
-      $scope.isUploading = false
-      $scope.showUploader = !$scope.asButton
-      for upload in $scope.uploadZones
-        $scope.clearEnqueuedUpload(upload)
-    $scope.resetUploader()
-
-    #
-    # Override on click failure cancel if not set to just reset uploader
-    #
-    $scope.onClickFailureCancel ?= $scope.resetUploader
-
-
-    #
-    # Initiates the upload
-    #
-    $scope.initiateUpload = ->
-      return unless $scope.readyToUpload()
-      $scope.onBeforeUpload?()
-
-      xhr   = new XMLHttpRequest()
-      form  = new FormData()
-      # Append data
-      files = ({ name: zone.name; data: zone.model[0] } for zone in $scope.uploadZones)
-      form.append file.name, file.data for file in files
-      # Append payload
-      payload = ({ key: k; value: v } for k, v of $scope.payload)
-      for payloadItem in payload
-        payloadItem.value = JSON.stringify(payloadItem.value) if _.isObject payloadItem.value
-        form.append payloadItem.key, payloadItem.value
-      # Set the percent
-      $scope.uploadingInfo =
-        progress: 5
-        success: null
-        error: null
-        complete: false
-      $scope.isUploading = true
-      # Callbacks
-      xhr.onreadystatechange = ->
-        if xhr.readyState is 4
-          $timeout (->
-            # Upload is now complete
-            $scope.uploadingInfo.complete = true
-            response = null
-            try
-              response = JSON.parse xhr.responseText
-            catch e
-              if xhr.status is 0
-                response = { error: 'Could not connect to the Doubtfire server' }
-              else
-                response = xhr.responseText
-            # Success (20x success range)
-            if xhr.status >= 200 and xhr.status < 300
-              $scope.onSuccess?(response)
-              $scope.uploadingInfo.success = true
-              $timeout((->
-                $scope.onComplete?()
-                if $scope.resetAfterUpload
-                  $scope.resetUploader()
-              ), 2500)
-            # Fail
-            else
-              $scope.onFailure?(response)
-              $scope.uploadingInfo.success = false
-              $scope.uploadingInfo.error   = response.error or "Unknown error"
-            $scope.$apply()
-          ), 2000
-      xhr.upload.onprogress = (event) ->
-        $scope.uploadingInfo.progress = parseInt(100.0 * event.position / event.totalSize)
-        $scope.$apply()
-      # Default the method to POST if it was not defined
-      $scope.method = 'POST' unless $scope.method?
-
-      # Send it
-      xhr.open $scope.method, $scope.url, true
-
-      # Add auth details
-      xhr.setRequestHeader('Auth-Token', newUserService.currentUser.authenticationToken)
-      xhr.setRequestHeader('Username', newUserService.currentUser.username)
-
-      xhr.send form
diff --git a/src/app/common/file-uploader/file-uploader.component.html b/src/app/common/file-uploader/file-uploader.component.html
new file mode 100644
index 0000000000..8408db4b57
--- /dev/null
+++ b/src/app/common/file-uploader/file-uploader.component.html
@@ -0,0 +1,170 @@
+<mat-card [class.shadow-none]="true">
+  <mat-card-content>
+    @if (!showUploader) {
+      <button class="w-full" color="primary" mat-raised-button (click)="showUploader = true">
+        <mat-icon>upload</mat-icon>
+        Begin Upload
+      </button>
+    }
+
+    <div class="flex flex-col gap-1 sm:flex-row">
+      @if (showUploader && uploadingInfo === null && shownUploadZones.length) {
+        <div class="w-full">
+          @for (upload of shownUploadZones; track upload) {
+            @if (!singleDropZone && showName) {
+              <h5>
+                {{ uploadZones.length === 1 ? '' : $index + 1 + ' - ' }}
+                {{ upload.display.name }}
+              </h5>
+            }
+
+            @if (singleDropZone && showName) {
+              <h5>Select {{ upload.display.name }}</h5>
+            }
+
+            <div [hidden]="upload.model || upload.model?.length">
+              <button
+                class="file-drop-zone min-h-[250px] w-full"
+                type="button"
+                [attr.aria-describedby]="describedBy"
+                (click)="fileInput.click()"
+                (dragleave)="onDragLeave($event)"
+                (dragover)="onDragOver($event)"
+                (drop)="onFileDropped($event, upload)"
+              >
+                @if (!upload.display.error) {
+                  <mat-icon>{{ upload.display.icon }}</mat-icon>
+                  @if (dropSupported) {
+                    <span class="text-center select-none">
+                      Drop {{ upload.display.type }} file here <br /><small
+                        >or click to select</small
+                      >
+                    </span>
+                  } @else {
+                    <span class="select-none">Click to select {{ upload.display.type }} file</span>
+                  }
+                } @else {
+                  <span
+                    class="flex !w-full flex-col items-center justify-center text-base !text-red-500"
+                  >
+                    <mat-icon>block</mat-icon>
+                    <span>Invalid file provided</span>
+                    <small class="w-full text-center"
+                      >Accepted: {{ upload.accept.split(',').join(', ') }}</small
+                    >
+                  </span>
+                }
+              </button>
+
+              <input
+                #fileInput
+                class="file-input"
+                type="file"
+                [accept]="upload.accept"
+                [attr.aria-describedby]="describedBy"
+                (change)="onFileSelected($event, upload)"
+              />
+            </div>
+
+            @if (!singleDropZone && upload.model?.length > 0) {
+              <div class="flex items-center gap-3">
+                <mat-icon>{{ upload.display.icon }}</mat-icon>
+                {{ upload.model[0].name }}
+                <button mat-icon-button (click)="clearEnqueuedUpload(upload)">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </div>
+            }
+          }
+        </div>
+      }
+
+      @if (showUploader && singleDropZone && uploadingInfo === null) {
+        <div class="w-full">
+          <h5>Upload Summary</h5>
+
+          @for (upload of uploadZones; track upload) {
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-1">
+                <mat-icon>{{ upload.display.icon }}</mat-icon>
+                <strong>{{ upload.display.name }}</strong>
+              </div>
+
+              @if (upload.model?.length > 0) {
+                <em>{{ upload.model[0].name }}</em>
+                <button mat-icon-button (click)="clearEnqueuedUpload(upload)">
+                  <mat-icon>close</mat-icon>
+                </button>
+              } @else {
+                <em>File Pending</em>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    @if (showUploader && !isUploading) {
+      <div>
+        @if (showUploadButton && readyToUpload() && uploadingInfo === null) {
+          <button color="primary" mat-raised-button (click)="initiateUploadInternal()">
+            <mat-icon>upload</mat-icon>
+            Start Upload
+          </button>
+        }
+
+        @if (asButton) {
+          <button color="warn" mat-button (click)="resetUploader()">Cancel Upload</button>
+        }
+      </div>
+    }
+
+    @if (showUploader && readyToUpload() && isUploading) {
+      @if (!uploadingInfo?.complete) {
+        <div class="uploading flex min-h-[300px] w-full flex-col items-center justify-center gap-3">
+          <div class="flex items-center justify-center gap-1">
+            @for (upload of uploadZones; track upload) {
+              <mat-icon>{{ upload.display.icon }}</mat-icon>
+            }
+            <mat-icon>arrow_right_alt</mat-icon>
+            <i class="logo size-[75px]"></i>
+          </div>
+
+          <mat-progress-bar
+            mode="determinate"
+            [value]="$safeNavigationMigration(uploadingInfo?.progress)"
+          >
+          </mat-progress-bar>
+        </div>
+      }
+
+      @if (uploadingInfo?.complete) {
+        <div class="complete flex min-h-[300px] flex-col items-center justify-center gap-3">
+          <div class="flex w-full items-center justify-center gap-3">
+            <mat-icon color="{{ uploadingInfo.success ? 'primary' : 'warn' }}">
+              {{ uploadingInfo.success ? 'check_circle' : 'cancel' }}
+            </mat-icon>
+
+            <strong class="text-2xl">
+              File Upload {{ uploadingInfo.success ? 'Successful' : 'Failed' }}
+            </strong>
+          </div>
+
+          @if (!uploadingInfo.success) {
+            <div class="flex max-w-xl flex-col items-center justify-center">
+              <hr class="border-b border-gray-300" />
+              <p><strong>Error Message:</strong> {{ uploadingInfo.error }}</p>
+
+              <div class="flex gap-3">
+                <button color="primary" mat-button (click)="initiateUploadInternal()">
+                  Retry Upload
+                </button>
+                <button mat-button (click)="onClickFailureCancel()">Cancel</button>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    }
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/common/file-uploader/file-uploader.component.scss b/src/app/common/file-uploader/file-uploader.component.scss
new file mode 100644
index 0000000000..db00b824aa
--- /dev/null
+++ b/src/app/common/file-uploader/file-uploader.component.scss
@@ -0,0 +1,37 @@
+.file-drop-zone .mat-icon,
+.complete .mat-icon {
+  font-size: 50px;
+  height: 50px;
+  width: 50px;
+}
+
+.uploading .mat-icon {
+  font-size: 75px;
+  height: 75px;
+  width: 75px;
+}
+
+.file-drop-zone {
+  align-items: center;
+  background: transparent;
+  border: 2px dashed rgba(0, 0, 0, 0.24);
+  border-radius: 8px;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  font: inherit;
+  justify-content: center;
+  padding: 2.5rem;
+  text-align: center;
+}
+
+.file-drop-zone:hover,
+.file-drop-zone:focus-visible {
+  border-color: currentColor;
+  outline: none;
+}
+
+.file-input {
+  display: none;
+}
diff --git a/src/app/common/file-uploader/file-uploader.component.spec.ts b/src/app/common/file-uploader/file-uploader.component.spec.ts
new file mode 100644
index 0000000000..aa3a1bb504
--- /dev/null
+++ b/src/app/common/file-uploader/file-uploader.component.spec.ts
@@ -0,0 +1,41 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {FileUploaderComponent} from './file-uploader.component';
+
+// SJ-11: the upload type check must match a real file extension, not any
+// filename that merely ends with the accepted letters (e.g. figure.eps
+// must not pass a `ps` zone).
+describe('FileUploaderComponent validateFiles', () => {
+  let component: FileUploaderComponent;
+
+  beforeEach(() => {
+    component = new FileUploaderComponent({} as never, {} as never);
+    (component as never as {refreshShownUploadZones: unknown}).refreshShownUploadZones = vi.fn();
+    (component as never as {updateReadyState: unknown}).updateReadyState = vi.fn();
+    (component as never as {readyToUpload: unknown}).readyToUpload = vi.fn(() => true);
+  });
+
+  const zoneFor = (filename: string) => ({
+    model: [{name: filename}] as unknown,
+    accepts: ['pdf', 'ps'],
+    display: {error: null as unknown},
+  });
+
+  it('rejects a file whose name only ends with the accepted letters', () => {
+    const zone = zoneFor('figure.eps');
+    (component as never as {shownUploadZones: unknown}).shownUploadZones = [zone];
+
+    component.validateFiles();
+
+    expect(zone.model).toBeNull();
+    expect(zone.display.error).toBe(true);
+  });
+
+  it('accepts a file with a real accepted extension', () => {
+    const zone = zoneFor('report.pdf');
+    (component as never as {shownUploadZones: unknown}).shownUploadZones = [zone];
+
+    component.validateFiles();
+
+    expect(zone.model).not.toBeNull();
+  });
+});
diff --git a/src/app/common/file-uploader/file-uploader.component.ts b/src/app/common/file-uploader/file-uploader.component.ts
new file mode 100644
index 0000000000..1780c9b9d3
--- /dev/null
+++ b/src/app/common/file-uploader/file-uploader.component.ts
@@ -0,0 +1,336 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {UserService} from 'src/app/api/services/user.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {ACCEPTED_TYPES} from './file-upload-types';
+
+export {ACCEPTED_TYPES} from './file-upload-types';
+
+export interface FileData {
+  name: string;
+  type: string;
+}
+
+export type FileUploadSpec = FileData[] | Record<string, FileData>;
+
+interface UploadDisplay {
+  name: string;
+  icon: string;
+  type: string;
+  error: boolean;
+}
+interface UploadZone {
+  name: string;
+  model: File[];
+  accept: string;
+  accepts: string[];
+  rejects: string[];
+  display: UploadDisplay;
+}
+
+interface UploadingInfo {
+  progress: number;
+  success: boolean;
+  error: string;
+  complete: boolean;
+}
+
+@Component({
+  selector: 'f-file-uploader',
+  templateUrl: './file-uploader.component.html',
+  styleUrls: ['./file-uploader.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FileUploaderComponent implements OnInit, OnChanges {
+  @Input() files: FileUploadSpec;
+  @Input() url: string;
+  @Input() method = 'POST';
+  @Input() describedBy: string | null = null;
+  @Input() payload?: unknown;
+
+  @Input() onBeforeUpload?: () => void;
+  @Input() onSuccess?: (response) => void;
+  @Input() onFailure?: (response) => void;
+  @Input() onComplete?: () => void;
+  @Input() onClickFailureCancel?: () => void;
+
+  @Input() isUploading: boolean;
+  @Input() isReady: boolean;
+  @Input() showName: boolean = true;
+  @Input() asButton: boolean = false;
+  @Input() singleDropZone: boolean = false;
+  @Input() showUploadButton: boolean = true;
+  @Input() resetAfterUpload: boolean = true;
+
+  @Input() initiateUpload?: () => void;
+
+  // HACK: workaround for TypeScript -> Coffeescript communication
+  // Once all parent components such as upload-submission-modal are migrated..
+  // .. these *wont* be necessary anymore
+  // Parent components should declare the file-uploader using @ViewChild() and directly call initiateUpload()
+  @Output() isReadyChange: EventEmitter<boolean> = new EventEmitter();
+  @Output() uploadReady: EventEmitter<() => void> = new EventEmitter();
+
+  public readonly ACCEPTED_TYPES = ACCEPTED_TYPES;
+
+  public showUploader: boolean = false;
+  public uploadingInfo: UploadingInfo = null;
+
+  public shownUploadZones: UploadZone[] = [];
+  public uploadZones: UploadZone[] = [];
+  public dropSupported: boolean = true;
+
+  constructor(
+    private userService: UserService,
+    private constants: DoubtfireConstants,
+  ) {}
+
+  private externalName: string = 'OnTrack';
+
+  ngOnInit(): void {
+    this.showUploader = !this.asButton;
+    this.createUploadZones(this.files);
+
+    this.uploadReady.emit(this.initiateUploadInternal.bind(this));
+
+    if (!this.onClickFailureCancel) {
+      this.onClickFailureCancel = this.resetUploader;
+    }
+
+    this.resetUploader();
+
+    this.constants.ExternalName.subscribe((name) => {
+      this.externalName = name;
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['files']) {
+      this.createUploadZones(changes.files.currentValue);
+      this.updateReadyState(this.readyToUpload());
+    }
+  }
+
+  public backToUpload() {
+    this.isUploading = false;
+    this.uploadingInfo = null;
+  }
+
+  public onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  public onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  public onFileDropped(event: DragEvent, upload: UploadZone) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const file = event.dataTransfer?.files?.[0];
+    if (file) {
+      this.setUploadFile(upload, file);
+    }
+  }
+
+  public onFileSelected(event: Event, upload: UploadZone) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) {
+      this.setUploadFile(upload, file);
+    }
+    input.value = '';
+  }
+
+  private setUploadFile(upload: UploadZone, file: File) {
+    upload.model = [file];
+    this.validateFiles();
+  }
+
+  validateFiles() {
+    for (const upload of this.shownUploadZones) {
+      if (upload.model?.length) {
+        const name: string = upload.model[0].name.toLowerCase();
+        const accepts: string[] = upload.accepts.map((ext: string) =>
+          ext.toLowerCase().replace(/^\./, ''),
+        );
+        const valid = accepts.some((ext) => name.endsWith(`.${ext}`));
+        if (!valid) {
+          upload.model = null;
+          upload.display.error = true;
+          setTimeout(() => {
+            upload.display.error = null;
+          }, 5000);
+        }
+      }
+    }
+    this.refreshShownUploadZones();
+    this.updateReadyState(this.readyToUpload());
+  }
+
+  clearEnqueuedUpload(upload: UploadZone) {
+    upload.model = null;
+    this.refreshShownUploadZones();
+    this.updateReadyState(this.readyToUpload());
+  }
+
+  readyToUpload(): boolean {
+    return this.uploadZones.every((zone) => zone.model?.length);
+  }
+
+  updateReadyState(ready: boolean) {
+    this.isReady = ready;
+    this.isReadyChange.emit(ready);
+  }
+
+  resetUploader() {
+    this.uploadingInfo = null;
+    this.isUploading = false;
+    this.showUploader = !this.asButton;
+    for (const upload of this.uploadZones) {
+      upload.model = null;
+    }
+    this.refreshShownUploadZones();
+    this.updateReadyState(this.readyToUpload());
+  }
+
+  initiateUploadInternal() {
+    if (!this.readyToUpload()) {
+      return;
+    }
+    if (this.onBeforeUpload) {
+      this.onBeforeUpload();
+    }
+
+    this.uploadingInfo = {
+      progress: 5,
+      success: null,
+      error: null,
+      complete: false,
+    };
+
+    this.isUploading = true;
+
+    const xhr = new XMLHttpRequest();
+    const form = new FormData();
+
+    // Append files
+    for (const zone of this.uploadZones) {
+      if (zone.model?.length) {
+        form.append(zone.name, zone.model[0]);
+      }
+    }
+
+    // Append payload
+    if (this.payload) {
+      for (const [key, value] of Object.entries(this.payload)) {
+        let v = value;
+        if (typeof v === 'object') {
+          v = JSON.stringify(v);
+        }
+        form.append(key, v);
+      }
+    }
+
+    xhr.upload.onprogress = (event) => {
+      if (event.total) {
+        this.uploadingInfo.progress = Math.floor((event.loaded / event.total) * 100);
+      }
+    };
+
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        setTimeout(() => {
+          this.uploadingInfo.complete = true;
+          let response;
+          try {
+            response = JSON.parse(xhr.responseText);
+          } catch (e) {
+            console.error(e);
+            if (xhr.status === 0) {
+              if (navigator.onLine === false) {
+                response = {error: 'You appear to be offline. Your files have not been submitted.'};
+              } else {
+                response = {error: `Could not connect to the ${this.externalName} server.`};
+              }
+            } else {
+              response = xhr.responseText;
+            }
+          }
+
+          if (xhr.status >= 200 && xhr.status < 300) {
+            this.onSuccess?.(response);
+            this.uploadingInfo.success = true;
+            setTimeout(() => {
+              this.onComplete?.();
+              if (this.resetAfterUpload) {
+                this.resetUploader();
+              }
+            }, 2500);
+          } else {
+            this.onFailure?.(response);
+            this.uploadingInfo.success = false;
+            this.uploadingInfo.error = (response?.error ?? 'Unknown error') as string;
+          }
+        }, 2000);
+      }
+    };
+    const method = this.method ?? 'POST';
+    xhr.open(method, this.url, true);
+
+    xhr.setRequestHeader('Auth-Token', this.userService.currentUser.authenticationToken);
+    xhr.setRequestHeader('Username', this.userService.currentUser.username);
+
+    xhr.send(form);
+  }
+
+  // onClickFailureCancelInternal() {
+  //   console.log('onClickFailureCancelInternal');
+  // }
+
+  refreshShownUploadZones = () => {
+    if (this.singleDropZone) {
+      const firstEmpty = this.uploadZones.find((z) => !z.model || z.model.length === 0);
+      this.shownUploadZones = firstEmpty ? [firstEmpty] : [];
+    }
+  };
+
+  createUploadZones(files: FileUploadSpec) {
+    const zones = Object.entries(files).map(([uploadName, uploadData]) => {
+      const uploadType = uploadData.type === 'archive' ? 'zip' : uploadData.type;
+      const typeData = ACCEPTED_TYPES[uploadType];
+      if (!typeData) {
+        throw new Error(`Invalid type provided to File Uploader ${uploadData.type}`);
+      }
+
+      return {
+        name: uploadName,
+        model: null,
+        accept: `.${typeData.extensions.join(',.')}`,
+        accepts: typeData.extensions,
+        rejects: null,
+        display: {
+          name: uploadData.name,
+          icon: typeData.icon,
+          type: typeData.name,
+          error: false,
+        },
+      };
+    });
+
+    this.shownUploadZones = this.singleDropZone ? [zones[0]] : zones;
+    this.uploadZones = zones;
+  }
+}
diff --git a/src/app/common/file-uploader/file-uploader.scss b/src/app/common/file-uploader/file-uploader.scss
deleted file mode 100644
index 4ca5cb6988..0000000000
--- a/src/app/common/file-uploader/file-uploader.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-.file-uploader {
-  display: block;
-  // Add some margin like a <p>
-  margin: 2.5em 0;
-
-  // Colors to make it easy to understand
-  $hover-color:   $brand-primary;
-  $accept-color:  $brand-success;
-  $reject-color:  $brand-danger;
-
-  // Extra additional icons
-  $ban-icon:      $fa-var-ban;
-  $download-icon: $fa-var-download;
-
-  .upload-commit-actions {
-    margin-top: 1em;
-    .btn-upload {
-      margin-right: 1.5ex;
-    }
-  }
-
-  .well.drop {
-    border: 2px #bbb dotted;
-    font-size: larger;
-    font-weight: bold;
-    color: #aaa;
-    text-align: center;
-    &, i {
-      @include transition(all 0.25s ease);
-    }
-    p small {
-      display: block;
-    }
-    &:hover {
-      cursor: pointer;
-      border-color: $hover-color;
-      color: $hover-color;
-      p small {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  // Wells which have file over
-  .well.drop.file-over {
-    cursor: copy;
-    border-color: $accept-color;
-    color: $accept-color;
-    // Switch the icon over
-    p.fa::before {
-      content: $download-icon;
-    }
-  }
-  // Rejected file over
-  .well.drop.file-rejected {
-    border-color: $reject-color;
-    color: $reject-color;
-    // Switch the icon over
-    p.fa::before {
-      content: $ban-icon;
-    }
-  }
-
-  // File header
-  .selected-files {
-    &:not(.list-group) {
-      display: inline-block;
-    }
-    .selected-file {
-      display: block;
-      font-size: 1.2em;
-      i.file-type {
-        margin-right: 1ex;
-        font-size: 1.2em;
-      }
-      &.highlight {
-        animation: highlight-selected-file-animation;
-        animation-duration: 0.75s;
-        @keyframes highlight-selected-file-animation {
-          0% { background: rgba(33, 150, 243, 0.4); }
-          0% { box-shadow: 0 0 6px rgba(33, 150, 243, 1); }
-          100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0); }
-        }
-      }
-    }
-  }
-  a.clear-upload {
-    margin-left: 1ex;
-    &:hover i {
-      font-size: 1.15em;
-      color: $reject-color;
-    }
-    display: inline-block;
-  }
-  // Upload area/result
-  .upload-area {
-    .progress-area {
-      .progress {
-        margin-bottom: 0;
-      }
-      .icons {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-      }
-      i.fa-arrow-right {
-        @include animation-wobble();
-      }
-      i {
-        flex-basis: auto !important;
-        margin-right: 1ex;
-        font-size: 2em;
-        margin-bottom: 0.5em;
-      }
-    }
-    .result-area {
-      .result-text {
-        margin-bottom: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 34px;
-      }
-      i {
-        font-size: 2em;
-        @include animation-grow;
-        margin-right: 1ex;
-      }
-      .retry-options {
-        font-weight: bolder;
-        font-size: 1.2em;
-        a:first-child {
-          display: inline-block;
-          margin-right: 2ex;
-        }
-      }
-    }
-  }
-}
diff --git a/src/app/common/file-uploader/file-uploader.tpl.html b/src/app/common/file-uploader/file-uploader.tpl.html
deleted file mode 100644
index 368f53380c..0000000000
--- a/src/app/common/file-uploader/file-uploader.tpl.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<div class="file-uploader" ng-class="{ 'is-uploading': isUploading }">
-  <div ng-hide="showUploader">
-    <button class="btn btn-success form-control" ng-click="showUploader = true">
-      <i class="fa fa-upload"></i> Begin Upload
-    </button>
-  </div><!--begin-upload-button-->
-  <div collapse="!showUploader" ng-if="uploadingInfo == null" class="file-drop-area">
-    <div ng-repeat="upload in shownUploadZones">
-      <h5 class="text-muted" ng-show="!singleDropZone && showName">
-        {{uploadZones.length == 1 ? '' : $index + 1 + ' -'}} {{upload.display.name}}
-      </h5>
-      <h5 class="text-muted" ng-show="singleDropZone && showName">
-        Select {{upload.display.name}}
-      </h5>
-      <div ngf-select ngf-drop
-        ng-show="upload.model == null || upload.model.length == 0"
-        class="drop well {{upload.display.error ? 'file-rejected' : ''}}"
-        ng-model="upload.model"
-        ng-model-rejected="upload.rejects"
-        ngf-change="modelChanged($files, upload)"
-        ngf-accept="{{upload.accept}}"
-        ngf-drag-over-class="{accept:'file-over', reject:'file-over', delay:100}"
-        ngf-drop-available="dropSupported">
-        <p class="fa {{upload.display.icon}} fa-3x"></p>
-        <p ng-show="upload.display.error">
-          Invalid file provided
-          <small> Accepted files: <code>{{upload.accept.split(',').join(', ')}}</code> </small>
-        </p>
-        <p ng-show="dropSupported" ng-hide="upload.display.error">
-          Drop {{upload.display.type}} file here
-          <small> or click to select one </small>
-        </p>
-        <p ng-hide="dropSupported || upload.display.error">
-          Click to select {{upload.display.type}} file
-        </p>
-      </div><!--/drop-zone-->
-      <div ng-show="!singleDropZone && upload.model.length > 0" class="selected-files">
-        <span class="selected-file">
-          <i class="file-type fa {{upload.display.icon}}"></i>
-          {{upload.model[0].name}}
-        </span>
-        <a class="clear-upload text-muted" ng-click="clearEnqueuedUpload(upload)">
-          <i class="fa fa-times"></i>
-        </a>
-      </div><!--/selected-file-->
-    </div><!--/drop-zones-->
-    <div ng-show="singleDropZone">
-      <h5 class="text-muted">Upload Summary</h5>
-      <div class="selected-files list-group">
-        <div class="selected-file list-group-item clearfix" ng-class="{highlight: upload.model.length > 0}" ng-repeat="upload in uploadZones">
-          <div class="pull-left">
-            <i class="file-type fa {{upload.display.icon}}"></i>
-            <strong>{{upload.display.name}}</strong>
-          </div>
-          <div class="pull-right text-right">
-            <em ng-show="upload.model.length > 0">{{upload.model[0].name}}</em>
-            <em ng-hide="upload.model.length > 0" class="text-muted">File Pending</em>
-            <a class="clear-upload text-muted" ng-click="clearEnqueuedUpload(upload)" ng-show="upload.model.length > 0">
-              <i class="fa fa-times"></i>
-            </a>
-          </div>
-        </div><!--/selected-file-->
-      </div>
-    </div><!--/upload-summary-->
-  </div><!--/file-drop-area-->
-  <div ng-show="showUploader && !isUploading" class="upload-commit-actions">
-    <button
-      ng-show="showUploadButton && readyToUpload() && uploadingInfo == null"
-      ng-click="initiateUpload()"
-      class="btn btn-primary btn-upload">
-      <i class="fa fa-upload"></i> Start Upload
-    </button><!--/upload-button-->
-    <button ng-show="asButton" ng-click="resetUploader()" class="btn btn-danger btn-cancel">
-      <i class="fa fa-times"></i> Cancel Upload
-    </button><!--/cancel-button-->
-  </div>
-  <div ng-show="showUploader && readyToUpload()" class="upload-area text-center clearfix">
-    <div ng-hide="uploadingInfo == null || uploadingInfo.complete" class="progress-area">
-      <div class="icons">
-        <i ng-repeat="upload in uploadZones" class="fa {{upload.display.icon}}"></i>
-        <i class="fa fa-arrow-right"></i>
-        <i class="logo"></i>
-      </div>
-      <progressbar class="progress-striped active" value="uploadingInfo.progress"></progressbar>
-    </div><!--/progress-area-->
-    <div ng-if="uploadingInfo.complete" class="result-area">
-      <p class="result-text">
-        <i class="fa {{uploadingInfo.success === true ? 'fa-check-circle text-success' : 'fa-times-circle text-danger'}} fa-2x"></i>
-        <strong>File Upload {{uploadingInfo.success === true ? 'Successful' : 'Failed'}}</strong>
-      </p>
-      <div class="error-message-area" ng-hide="uploadingInfo.success === true">
-        <hr>
-        <p>
-          <strong>Error Message: </strong>
-          {{uploadingInfo.error}}
-        </p>
-        <p class="retry-options">
-          <a ng-click="initiateUpload()">Retry Upload</a>
-          <a ng-click="onClickFailureCancel()">Cancel</a>
-        </p><!--/error-message-area-->
-      </div>
-    </div><!--/result-area-->
-  </div><!--/upload-area-->
-</div>
diff --git a/src/app/common/file-viewer/file-viewer.component.html b/src/app/common/file-viewer/file-viewer.component.html
index 476c76b464..d6bfb894db 100644
--- a/src/app/common/file-viewer/file-viewer.component.html
+++ b/src/app/common/file-viewer/file-viewer.component.html
@@ -1,23 +1,27 @@
 <div class="w-full max-w-full">
-  @if (blobUrl && fileType === 'pdf') { @if (!loaded) {
-  <mat-progress-bar mode="determinate" [value]="pdfLoadingProgressPercentage"></mat-progress-bar>
+  @if (blobUrl && fileType === 'pdf') {
+    @if (!loaded) {
+      <mat-progress-bar
+        [mode]="pdfLoadingTotalKnown ? 'determinate' : 'indeterminate'"
+        [value]="pdfLoadingProgressPercentage"
+      ></mat-progress-bar>
+    }
+    <pdf-viewer
+      class="size-full"
+      style="display: block; min-height: 60rem"
+      [autoresize]="true"
+      [fit-to-page]="true"
+      [original-size]="false"
+      [render-text]="true"
+      [src]="blobUrl"
+      (after-load-complete)="onLoaded()"
+      (on-progress)="onProgress($event)"
+      (page-rendered)="loaded = true"
+    ></pdf-viewer>
   }
-  <pdf-viewer
-    [original-size]="false"
-    [fit-to-page]="true"
-    [autoresize]="true"
-    class="w-full h-full"
-    style="display: block; min-height: 60rem"
-    [src]="blobUrl"
-    [render-text]="true"
-    (after-load-complete)="onLoaded()"
-    (page-rendered)="loaded = true"
-    (on-progress)="onProgress($event)"
-  ></pdf-viewer>
-
-  } @if (fileType === 'html') {
-  <div>
-    <iframe [src]="blobUrl | safe" width="100%" height="100%"></iframe>
-  </div>
+  @if (fileType === 'html') {
+    <div>
+      <iframe height="100%" width="100%" [src]="blobUrl | safe"></iframe>
+    </div>
   }
 </div>
diff --git a/src/app/common/file-viewer/file-viewer.component.spec.ts b/src/app/common/file-viewer/file-viewer.component.spec.ts
index bfec618b8c..aae635d5c9 100644
--- a/src/app/common/file-viewer/file-viewer.component.spec.ts
+++ b/src/app/common/file-viewer/file-viewer.component.spec.ts
@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FileViewerComponent } from './file-viewer.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FileViewerComponent} from './file-viewer.component';
 
 describe('FileViewerComponent', () => {
   let component: FileViewerComponent;
@@ -8,9 +8,8 @@ describe('FileViewerComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FileViewerComponent ]
-    })
-    .compileComponents();
+      declarations: [FileViewerComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(FileViewerComponent);
     component = fixture.componentInstance;
@@ -20,4 +19,31 @@ describe('FileViewerComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // WEBUX-08: the load bar reads a 0-100 percentage, not a 0..1 fraction.
+  it('scales pdf load progress to a 0-100 percentage', () => {
+    const c = component as never as {
+      onProgress: (p: {loaded: number; total: number}) => void;
+      pdfLoadingProgressPercentage: number;
+      pdfLoadingTotalKnown: boolean;
+    };
+
+    c.onProgress({loaded: 500, total: 1000});
+
+    expect(c.pdfLoadingProgressPercentage).toBe(50);
+    expect(c.pdfLoadingTotalKnown).toBe(true);
+  });
+
+  it('falls back to an indeterminate bar when the total is unknown', () => {
+    const c = component as never as {
+      onProgress: (p: {loaded: number; total: number}) => void;
+      pdfLoadingProgressPercentage: number;
+      pdfLoadingTotalKnown: boolean;
+    };
+
+    c.onProgress({loaded: 100, total: 0});
+
+    expect(c.pdfLoadingProgressPercentage).toBe(0);
+    expect(c.pdfLoadingTotalKnown).toBe(false);
+  });
 });
diff --git a/src/app/common/file-viewer/file-viewer.component.ts b/src/app/common/file-viewer/file-viewer.component.ts
index 2c5bd01c73..f4f68be793 100644
--- a/src/app/common/file-viewer/file-viewer.component.ts
+++ b/src/app/common/file-viewer/file-viewer.component.ts
@@ -1,8 +1,15 @@
-import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { FileDownloaderService } from '../file-downloader/file-downloader.service';
-import { HttpResponse } from '@angular/common/http';
-import { PDFProgressData } from 'ng2-pdf-viewer';
-import { AlertService } from '../services/alert.service';
+import {PDFProgressData} from 'ng2-pdf-viewer';
+import {HttpResponse} from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+} from '@angular/core';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+import {AlertService} from '../services/alert.service';
 
 /**
  * The file viewer downloads a file from a URL and displays it's contents.
@@ -11,6 +18,8 @@ import { AlertService } from '../services/alert.service';
   selector: 'f-file-viewer',
   templateUrl: './file-viewer.component.html',
   styleUrls: ['./file-viewer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class FileViewerComponent implements OnDestroy, OnChanges {
   /**
@@ -39,9 +48,21 @@ export class FileViewerComponent implements OnDestroy, OnChanges {
   public loaded = false;
 
   protected pdfLoadingProgressPercentage = 0;
+  protected pdfLoadingTotalKnown = false;
 
   protected onProgress(progress: PDFProgressData) {
-    this.pdfLoadingProgressPercentage = Math.round(progress.loaded / progress.total);
+    if (progress.total > 0) {
+      this.pdfLoadingTotalKnown = true;
+      this.pdfLoadingProgressPercentage = Math.min(
+        100,
+        Math.round((progress.loaded / progress.total) * 100),
+      );
+    } else {
+      // Some progress events arrive before the total size is known; show an
+      // indeterminate bar rather than a bar stuck at zero.
+      this.pdfLoadingTotalKnown = false;
+      this.pdfLoadingProgressPercentage = 0;
+    }
   }
 
   /**
@@ -50,7 +71,10 @@ export class FileViewerComponent implements OnDestroy, OnChanges {
    * @param fileDownloader is used to download the resources from the api
    * @param alerts is used to render alerts
    */
-  constructor(private fileDownloader: FileDownloaderService, private alertService: AlertService) {}
+  constructor(
+    private fileDownloader: FileDownloaderService,
+    private alertService: AlertService,
+  ) {}
 
   /**
    * When destroyed, the component must free its resources.
@@ -98,12 +122,12 @@ export class FileViewerComponent implements OnDestroy, OnChanges {
   private downloadBlob(downloadUrl: string): void {
     this.fileDownloader.downloadBlob(
       downloadUrl,
-      (url: string, response: HttpResponse<Blob>) => {
+      (url: string, _response: HttpResponse<Blob>) => {
         this.blobUrl = url;
       },
-      (error: any) => {
+      (error: Error) => {
         this.alertService.error(`Error downloading resource. ${error}`);
-      }
+      },
     );
   }
 
diff --git a/src/app/common/filters/filters.coffee b/src/app/common/filters/filters.coffee
index e2a2d51ec8..3a9711cd0b 100644
--- a/src/app/common/filters/filters.coffee
+++ b/src/app/common/filters/filters.coffee
@@ -1,3 +1,6 @@
+# Component is no longer used and is unlinked from the app
+# This file is left for reference, as these are migrated into Pipes
+
 angular.module("doubtfire.common.filters", [])
 
 #
diff --git a/src/app/common/filters/filters.pipe.ts b/src/app/common/filters/filters.pipe.ts
index db4dad7478..1a130df9f1 100644
--- a/src/app/common/filters/filters.pipe.ts
+++ b/src/app/common/filters/filters.pipe.ts
@@ -1,10 +1,11 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'filters',
+  standalone: false,
 })
 export class FiltersPipe implements PipeTransform {
-  transform(value: unknown, ...args: unknown[]): unknown {
+  transform(_value: unknown, ..._args: unknown[]): unknown {
     return null;
   }
 }
diff --git a/src/app/common/filters/order-by.pipe.ts b/src/app/common/filters/order-by.pipe.ts
new file mode 100644
index 0000000000..b6b0b3c9d5
--- /dev/null
+++ b/src/app/common/filters/order-by.pipe.ts
@@ -0,0 +1,36 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'orderBy',
+  standalone: false,
+})
+export class OrderByPipe implements PipeTransform {
+  transform<T>(array: readonly T[], field: string | string[], reverse: boolean = false): T[] {
+    if (!array || !field) {
+      return [];
+    }
+
+    const fields = Array.isArray(field) ? field : [field];
+    const valueFor = (item: T, path: string): unknown =>
+      path.split('.').reduce((value, key) => value?.[key], item);
+
+    const sortedArray = [...array].sort((a, b) => {
+      const aValue = valueFor(a, fields[0]);
+      const bValue = valueFor(b, fields[0]);
+
+      if (aValue < bValue) {
+        return -1;
+      }
+      if (aValue > bValue) {
+        return 1;
+      }
+      return 0;
+    });
+
+    if (reverse) {
+      return sortedArray.reverse();
+    }
+
+    return sortedArray;
+  }
+}
diff --git a/src/app/common/filters/task-definition-name.pipe.ts b/src/app/common/filters/task-definition-name.pipe.ts
index 155595d2ff..aed647c088 100644
--- a/src/app/common/filters/task-definition-name.pipe.ts
+++ b/src/app/common/filters/task-definition-name.pipe.ts
@@ -1,19 +1,19 @@
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { Task, TaskDefinition } from '../../api/models/doubtfire-model';
+import {Pipe, PipeTransform} from '@angular/core';
+import {TaskDefinition} from '../../api/models/doubtfire-model';
 
 @Pipe({
   name: 'taskDefinitionName',
+  standalone: false,
 })
 export class TaskDefinitionNamePipe implements PipeTransform {
-  transform(taskDefinitions: TaskDefinition[], searchName: string): TaskDefinition[] {
+  transform(taskDefinitions: readonly TaskDefinition[], searchName: string): TaskDefinition[] {
     searchName = searchName.toLowerCase();
-    return taskDefinitions.filter( // use lodash filter?
-      (td) => {
-        return td.name.toLowerCase().includes(searchName)  ||
-          td.abbreviation.toLowerCase().includes(searchName)  ||
-          td.targetGradeText.toLowerCase().includes(searchName)
-      }
-    )
+    return taskDefinitions.filter((td) => {
+      return (
+        td?.name.toLowerCase().includes(searchName) ||
+        td?.abbreviation.toLowerCase().includes(searchName) ||
+        td?.targetGradeText.toLowerCase().includes(searchName)
+      );
+    });
   }
 }
diff --git a/src/app/common/filters/tasks-by-tutor.pipe.ts b/src/app/common/filters/tasks-by-tutor.pipe.ts
new file mode 100644
index 0000000000..24c9ef768f
--- /dev/null
+++ b/src/app/common/filters/tasks-by-tutor.pipe.ts
@@ -0,0 +1,28 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {Task, UnitRole} from '../../api/models/doubtfire-model';
+
+@Pipe({
+  name: 'tasksByTutor',
+  standalone: false,
+})
+export class TasksByTutorPipe implements PipeTransform {
+  transform(currentUnitRole: UnitRole, tasks: Task[], unitRoleId?: number | string): Task[] {
+    if (!tasks) {
+      return tasks;
+    }
+
+    if (!unitRoleId || unitRoleId === 'all') {
+      return tasks;
+    }
+
+    if (unitRoleId === 'mentoring_all') {
+      if (!currentUnitRole) {
+        return [];
+      }
+
+      return tasks.filter((task) => task.tutor?.mentorId === currentUnitRole.id);
+    }
+
+    return tasks.filter((task) => task.tutor?.id === unitRoleId);
+  }
+}
diff --git a/src/app/common/filters/tasks-for-group-set.pipe.ts b/src/app/common/filters/tasks-for-group-set.pipe.ts
new file mode 100644
index 0000000000..62842ebdf6
--- /dev/null
+++ b/src/app/common/filters/tasks-for-group-set.pipe.ts
@@ -0,0 +1,18 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {GroupSet, Task} from 'src/app/api/models/doubtfire-model';
+
+@Pipe({
+  name: 'tasksForGroupset',
+  standalone: false,
+})
+export class TasksForGroupsetPipe implements PipeTransform {
+  transform(tasks: readonly Task[], groupSet: GroupSet): Task[] {
+    if (!tasks) {
+      return [];
+    }
+
+    return tasks.filter((task) => {
+      return task.definition.groupSet === groupSet || (!task.definition.groupSet && !groupSet);
+    });
+  }
+}
diff --git a/src/app/common/filters/tasks-for-inbox-search.pipe.ts b/src/app/common/filters/tasks-for-inbox-search.pipe.ts
index 3b507ba43b..dbea1db779 100644
--- a/src/app/common/filters/tasks-for-inbox-search.pipe.ts
+++ b/src/app/common/filters/tasks-for-inbox-search.pipe.ts
@@ -1,8 +1,9 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { Task } from 'src/app/api/models/task';
+import {Pipe, PipeTransform} from '@angular/core';
+import {Task} from 'src/app/api/models/task';
 
 @Pipe({
   name: 'tasksWithStudentName',
+  standalone: false,
 })
 export class TasksForInboxSearchPipe implements PipeTransform {
   transform(tasks: Task[], searchText: string): Task[] {
@@ -19,8 +20,8 @@ export class TasksForInboxSearchPipe implements PipeTransform {
       searchTerms
         .map((term: string) => task.matches(term))
         .reduce((prev: boolean, current: boolean, currentIndex: number) =>
-          operators[currentIndex - 1] === '&' ? prev && current : prev || current
-        )
+          operators[currentIndex - 1] === '&' ? prev && current : prev || current,
+        ),
     );
   }
 }
diff --git a/src/app/common/filters/tasks-in-tutorials.pipe.ts b/src/app/common/filters/tasks-in-tutorials.pipe.ts
index 8800feb52f..918a8da811 100644
--- a/src/app/common/filters/tasks-in-tutorials.pipe.ts
+++ b/src/app/common/filters/tasks-in-tutorials.pipe.ts
@@ -1,8 +1,9 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { Task } from '../../api/models/doubtfire-model';
+import {Pipe, PipeTransform} from '@angular/core';
+import {Task} from '../../api/models/doubtfire-model';
 
 @Pipe({
   name: 'tasksInTutorials',
+  standalone: false,
 })
 export class TasksInTutorialsPipe implements PipeTransform {
   transform(tasks: Task[], tutorialIds: number[], forceStream: boolean): Task[] {
@@ -18,6 +19,10 @@ export class TasksInTutorialsPipe implements PipeTransform {
 
     // Filter the tasks to only those where the tutorial for the task is in the list of tutorial ids
     const result = tasks?.filter((task) => {
+      if (task.tutorialId) {
+        return tutorialIds.includes(task.tutorialId);
+      }
+
       // Get the stream for the task... this may be nil or undefined if there are no streams in the unit
       const stream = task.definition.tutorialStream;
 
diff --git a/src/app/common/filters/tasks-of-task-definition.pipe.ts b/src/app/common/filters/tasks-of-task-definition.pipe.ts
index f909e6f35b..019e5cddd8 100644
--- a/src/app/common/filters/tasks-of-task-definition.pipe.ts
+++ b/src/app/common/filters/tasks-of-task-definition.pipe.ts
@@ -1,8 +1,9 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { Task, TaskDefinition } from 'src/app/api/models/doubtfire-model';
+import {Pipe, PipeTransform} from '@angular/core';
+import {Task, TaskDefinition} from 'src/app/api/models/doubtfire-model';
 
 @Pipe({
   name: 'tasksOfTaskDefinition',
+  standalone: false,
 })
 export class TasksOfTaskDefinitionPipe implements PipeTransform {
   transform(tasks: Task[], taskDefinition: TaskDefinition): Task[] {
diff --git a/src/app/common/footer/footer.component.html b/src/app/common/footer/footer.component.html
index 7e28c72b32..e0850b36c5 100644
--- a/src/app/common/footer/footer.component.html
+++ b/src/app/common/footer/footer.component.html
@@ -1,152 +1,373 @@
-<mat-toolbar class="footer flex-col w-full h-full justify-center p-0">
-  @if (selectedTask?.similaritiesDetected) {
-  <div class="bg-red-500 grow w-full rounded-xl h-8 mb-5 mt-4 text-white text-lg">
+<mat-toolbar class="footer size-full flex-col justify-center p-0">
+  <!-- @if (selectedTask?.similaritiesDetected) {
+    <div class="bg-red-500 grow w-full rounded-xl h-5 mb-3 mt-2.5 text-white text-xs font-bold">
+      <p
+        style="position: relative"
+        #warningText
+        class="mat-caption inline-block select-none text-center w-full"
+      >
+        Similarities flagged for {{ selectedTask?.project?.student.name }}
+      </p>
+    </div>
+  } -->
+
+  <ng-template #statusActionButtons>
+    <span class="center-buttons flex justify-around gap-1">
+      @if (selectedTask?.definition?.assessInPortfolioOnly) {
+        <button
+          aria-label="Mark as Working On It"
+          class="button large-button status-chip working-on-it"
+          mat-icon-button
+          matTooltip="Mark as Working On It"
+          matTooltipPosition="above"
+          [disabled]="!actionButtonEnabled"
+          (click)="markTaskWorkingOnIt(selectedTask)"
+        >
+          <mat-icon>bolt</mat-icon>
+        </button>
+      } @else {
+        <div>
+          <button
+            aria-label=""
+            class="button status-chip redo"
+            mat-icon-button
+            matTooltip="Mark as Redo"
+            matTooltipPosition="above"
+            [disabled]="!actionButtonEnabled"
+            (click)="selectedTask?.updateTaskStatus('redo')"
+          >
+            <mat-icon>undo</mat-icon>
+          </button>
+          <!--
+        <button
+          [disabled]="!actionButtonEnabled"
+          mat-icon-button
+          matTooltip="Mark as Attention Required"
+          matTooltipPosition="above"
+          aria-label=""
+          class="button status-chip attention-required"
+          (click)="selectedTask?.updateTaskStatus('attention_required')"
+        >
+          <mat-icon>sms_failed</mat-icon>
+        </button> -->
+        </div>
+        <button
+          aria-label=""
+          class="button status-chip fix-and-resubmit"
+          mat-icon-button
+          matTooltip="Mark as Resubmit"
+          matTooltipPosition="above"
+          [class.large-button]="!(selectedTask && selectedTask.suggestedTaskStatus)"
+          [disabled]="!actionButtonEnabled"
+          (click)="markAsResubmit(selectedTask)"
+        >
+          <mat-icon>construction</mat-icon>
+        </button>
+
+        @if (selectedTask && selectedTask.suggestedTaskStatus) {
+          <button
+            aria-label=""
+            class="button extra-large-button status-chip suggested-task-status"
+            mat-icon-button
+            matTooltip="Recommended: Mark as {{
+              taskService.statusData(selectedTask.suggestedTaskStatus).label
+            }}"
+            matTooltipPosition="above"
+            [disabled]="
+              !actionButtonEnabled ||
+              (selectedTask?.suggestedTaskStatus === 'complete' && !selectedTask?.canMarkComplete)
+            "
+            [ngClass]="taskService.statusData(selectedTask.suggestedTaskStatus).class"
+            (click)="selectedTask?.updateTaskStatus(selectedTask.suggestedTaskStatus)"
+          >
+            <mat-icon>
+              {{ taskService.statusData(selectedTask.suggestedTaskStatus).materialIcon }}
+            </mat-icon>
+          </button>
+        }
+
+        <button
+          aria-label="Mark as {{ discussActionLabel }}"
+          class="button status-chip"
+          mat-icon-button
+          matTooltip="Mark as {{ discussActionLabel }}"
+          matTooltipPosition="above"
+          [class.large-button]="!(selectedTask && selectedTask.suggestedTaskStatus)"
+          [disabled]="!actionButtonEnabled"
+          [ngClass]="discussActionClass"
+          (click)="selectedTask?.updateTaskStatus(discussActionStatus)"
+        >
+          <mat-icon>{{ discussActionIcon }}</mat-icon>
+        </button>
+
+        <div
+          [matTooltip]="
+            !selectedTask?.canMarkComplete
+              ? 'This task must be discussed in class before it can marked complete'
+              : ''
+          "
+        >
+          <button
+            aria-label="Mark as Complete"
+            class="button status-chip complete"
+            mat-icon-button
+            matTooltip="Mark as Complete"
+            matTooltipPosition="above"
+            [disabled]="!completeButtonEnabled"
+            (click)="selectedTask?.updateTaskStatus('complete')"
+          >
+            <mat-icon>done</mat-icon>
+          </button>
+        </div>
+      }
+    </span>
+  </ng-template>
+
+  <div class="flex w-full">
+    <f-user-badge class="flex-1" [selectedTask]="selectedTask"></f-user-badge>
     <div
-      #arrow
-      class="shrink border-t-red-500"
-      [ngStyle]="{ 'left.px': leftOffset, 'top.px': topOffset }"
-      style="position: absolute; border: 10px solid transparent; transform: translateX(-50%)"
-    ></div>
-    <p
-      style="position: relative"
-      #warningText
-      [ngStyle]="{ 'left.px': warningTextLeftOffset }"
-      class="mat-caption inline-block select-none"
+      class="flex items-center"
+      [ngClass]="hideMainActionButtonsForModeration ? 'w-full justify-center' : 'justify-between'"
     >
-      Similarities flagged for {{ selectedTask?.project.student.name }}
-    </p>
-  </div>
-  }
+      @if (viewType !== 'moderation' && !hideMainActionButtonsForModeration) {
+        <ng-container [ngTemplateOutlet]="statusActionButtons"></ng-container>
+      }
 
-  <div class="flex w-full">
-    <f-user-badge fxFlex fxFlexAlign="start start" [selectedTask]="selectedTask"></f-user-badge>
+      @if (selectedTask && !selectedTask.loadingSubmissionDetails) {
+        @if (viewType === 'moderation') {
+          <div
+            class="flex items-center"
+            [ngClass]="hideMainActionButtonsForModeration ? 'w-full justify-center' : ''"
+          >
+            <div class="relative flex items-center">
+              @if (!hideMainActionButtonsForModeration) {
+                <ng-container [ngTemplateOutlet]="statusActionButtons"></ng-container>
+                <mat-divider class="mx-2.5" [vertical]="true"></mat-divider>
+              } @else {
+                <f-moderation class="ml-[100px] pl-[125px]" [task]="selectedTask"></f-moderation>
+              }
 
-    <span class="center-buttons flex justify-center">
-      <button
-        [disabled]="selectedTask === undefined"
-        mat-icon-button
-        matTooltip="Mark as Redo"
-        matTooltipPosition="above"
-        aria-label=""
-        class="button"
-        (click)="selectedTask?.updateTaskStatus('redo')"
-      >
-        <mat-icon>undo</mat-icon>
-      </button>
-      <button
-        [disabled]="selectedTask === undefined"
-        mat-icon-button
-        matTooltip="Mark as Resubmit"
-        matTooltipPosition="above"
-        aria-label=""
-        class="button large-button"
-        (click)="selectedTask?.updateTaskStatus('fix')"
-      >
-        <mat-icon>construction</mat-icon>
-      </button>
-      <span class="w-3"></span>
-      <button
-        [disabled]="selectedTask === undefined"
-        mat-icon-button
-        matTooltip="Mark as Complete"
-        matTooltipPosition="above"
-        aria-label=""
-        class="button large-button"
-        (click)="selectedTask?.updateTaskStatus('complete')"
-      >
-        <mat-icon>done</mat-icon>
-      </button>
-      <button
-        [disabled]="selectedTask === undefined"
-        mat-icon-button
-        matTooltip="Mark as Discuss"
-        matTooltipPosition="above"
-        aria-label=""
-        class="button"
-        (click)="selectedTask?.updateTaskStatus('discuss')"
-      >
-        <mat-icon>question_answer</mat-icon>
-      </button>
-    </span>
+              <button
+                aria-label=""
+                class="button small-button"
+                mat-icon-button
+                matTooltip="Action options"
+                matTooltipPosition="above"
+                [disabled]="!selectedTask"
+                [matMenuTriggerFor]="actionMenu"
+              >
+                <mat-icon class="small-icon">more_vert</mat-icon>
+              </button>
 
-    <div fxFlex fxFlexAlign="end start" fxLayout="row" fxLayoutAlign="end center">
-      @if (selectedTask?.similaritiesDetected) {
-      <button
-        #similaritiesButton
-        mat-icon-button
-        matTooltip="High confidence of similarities detected for this task"
-        matTooltipPosition="above"
-        aria-label="View detected similarities"
-        class="button small-button"
-        (click)="viewSimilarity()"
-      >
-        <mat-icon class="small-icon">crisis_alert</mat-icon>
-      </button>
+              <mat-menu #actionMenu="matMenu" yPosition="above">
+                @if (hideMainActionButtonsForModeration) {
+                  <button mat-menu-item (click)="toggleModerationStatusButtons()">
+                    <mat-icon matListItemIcon>chat</mat-icon>
+                    View Status Buttons
+                  </button>
+                } @else {
+                  <button mat-menu-item (click)="toggleModerationStatusButtons()">
+                    <mat-icon matListItemIcon>gavel</mat-icon>View Moderation Buttons
+                  </button>
+                }
+              </mat-menu>
+            </div>
+          </div>
+        }
+        @if (viewType === 'overflow' || selectedTask.claimedByUnitRoleId) {
+          <f-task-claim [selectedTask]="selectedTask"></f-task-claim>
+        }
       }
+    </div>
+
+    <div class="flex flex-1 flex-row items-center justify-end">
+      <!-- @if (selectedTask?.similaritiesDetected) {
+        <div class="relative inline-block">
+          <div
+            class="absolute -top-[1.3rem] left-1/2 -translate-x-1/2 w-0 h-0 border-x-[15px] border-x-transparent border-t-[20px] border-t-red-500"
+          ></div>
+
+          <button
+            #similaritiesButton
+            mat-icon-button
+            matTooltip="High confidence of similarities detected for this task"
+            matTooltipPosition="above"
+            aria-label="View detected similarities"
+            class="button small-button"
+            (click)="viewSimilarity()"
+          >
+            <mat-icon class="small-icon">crisis_alert</mat-icon>
+          </button>
+        </div>
+      } -->
+      @if (selectedTask?.project) {
+        <!-- TODO: Should discussion prompts be a tab in the inbox view? -->
+        <!-- @if (selectedTask?.definition.discussionPromptsCount) {
+          <button
+            mat-icon-button
+            matTooltip="Discussion Prompts"
+            matTooltipPosition="above"
+            aria-label="View discussion prompts"
+            class="button small-button"
+            (click)="viewDiscussionPrompts()"
+          >
+            <mat-icon class="small-icon">forum</mat-icon>
+          </button>
+        } -->
+
+        <!-- @if (canAccessTutorNotes) {
+          <div class="relative inline-block">
+            <button
+              mat-icon-button
+              matTooltip="Open Tutor Notes"
+              matTooltipPosition="above"
+              class="button small-button"
+              [disabled]="!selectedTask.tutor"
+              (click)="viewTutorNotes()"
+            >
+              <mat-icon class="small-icon">local_library</mat-icon>
+            </button>
+          </div>
+        } -->
+
+        <!-- <div class="relative inline-block">
+          @if (selectedTask.project.staffNoteCount > 0) {
+            <div [matBadge]="selectedTask.project.staffNoteCount"></div>
+          }
+          <button
+            #similaritiesButton
+            mat-icon-button
+            [matTooltip]="
+              'Student has ' +
+              (selectedTask.project.staffNoteCount || 'no') +
+              ' staff note' +
+              (selectedTask.project.staffNoteCount !== 1 ? 's' : '')
+            "
+            matTooltipPosition="above"
+            aria-label="View detected similarities"
+            class="button small-button"
+            (click)="viewStaffNotes()"
+          >
+            <mat-icon class="small-icon">comment</mat-icon>
+          </button>
+        </div> -->
+      }
+
       <button
-        [disabled]="selectedTask === undefined"
+        aria-label=""
+        class="button small-button"
         mat-icon-button
         matTooltip="Submission Options"
         matTooltipPosition="above"
-        aria-label=""
-        class="button small-button"
+        [disabled]="!selectedTask"
         [matMenuTriggerFor]="aboveMenu"
       >
         <mat-icon class="small-icon">more_vert</mat-icon>
       </button>
 
       <mat-menu #aboveMenu="matMenu" yPosition="above">
-        <button mat-menu-item (click)="viewTaskSheet()" [disabled]="!selectedTaskService.hasTaskSheet">
+        <!-- <button
+          mat-menu-item
+          (click)="viewTaskSheet()"
+          [disabled]="!selectedTaskService.hasTaskSheet"
+        >
           <mat-icon matListItemIcon aria-label="View Task Sheet">description</mat-icon>
           View task sheet
         </button>
-        <button mat-menu-item (click)="viewSubmission()" [disabled]="!selectedTaskService.hasSubmissionPdf">
-          <mat-icon matListItemIcon aria-label="View student submission" fontIcon="contact_page"></mat-icon>View student
-          submission
+        <button
+          mat-menu-item
+          (click)="viewSubmission()"
+          [disabled]="!selectedTaskService.hasSubmissionPdf"
+        >
+          <mat-icon
+            matListItemIcon
+            aria-label="View student submission"
+            fontIcon="contact_page"
+          ></mat-icon
+          >View student submission
         </button>
         <button mat-menu-item (click)="viewSimilarity()">
           <mat-icon matListItemIcon aria-label="View Similarities">crisis_alert</mat-icon>
           View similarities
         </button>
-        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="viewOverseer()">
+          <mat-icon matListItemIcon aria-label="View Overseer">preview</mat-icon>
+          View overseer
+        </button>
+        <mat-divider></mat-divider> -->
+
+        <button mat-menu-item (click)="markSelectedTaskAsDiscussed()">
+          <mat-icon aria-label="Mark task as discussed" matListItemIcon>group</mat-icon>
+          Mark Discussed in Class
+        </button>
+        <button mat-menu-item (click)="selectedTask?.updateTaskStatus('assess_in_portfolio')">
+          <mat-icon aria-label="Switch to Assess in Portfolio" matListItemIcon
+            >folder_open</mat-icon
+          >
+          Mark as Assess in Portfolio
+        </button>
+        @if (!selectedTask?.hasPdf && selectedTask?.status === 'ready_for_feedback') {
+          <button mat-menu-item (click)="selectedTask?.updateTaskStatus('not_started')">
+            <mat-icon aria-label="Return to Not Started" matListItemIcon>pause</mat-icon>
+            Return to Not Started
+          </button>
+        }
+        <button mat-menu-item (click)="selectedTask?.updateTaskStatus('attention_required')">
+          <mat-icon aria-label="Mark as Attention Required" matListItemIcon>sms_failed</mat-icon>
+          Mark as Attention Required
+        </button>
         <button mat-menu-item (click)="selectedTask?.updateTaskStatus('feedback_exceeded')">
-          <mat-icon matListItemIcon aria-label="Switch to Feedback Exceeded">running_with_errors</mat-icon>
-          Mark as feedback exceeded
+          <mat-icon aria-label="Switch to Feedback Exceeded" matListItemIcon
+            >running_with_errors</mat-icon
+          >
+          Mark as Feedback Exceeded
         </button>
-        <button mat-menu-item (click)="selectedTask?.updateTaskStatus('fail')" [disabled]="selectedTask === undefined">
-          <mat-icon matListItemIcon aria-label="Fail icon" fontIcon="cancel"></mat-icon>
+        <button
+          mat-menu-item
+          [disabled]="!actionButtonEnabled"
+          (click)="selectedTask?.updateTaskStatus('fail')"
+        >
+          <mat-icon aria-label="Fail icon" fontIcon="cancel" matListItemIcon></mat-icon>
           Mark as fail
         </button>
       </mat-menu>
       <button
-        [disabled]="selectedTask === undefined"
+        aria-label=""
+        class="button small-button"
         mat-icon-button
         matTooltip="Download submitted files"
         matTooltipPosition="above"
-        aria-label=""
-        class="button small-button"
+        [disabled]="!selectedTask"
         (click)="downloadFiles()"
       >
         <mat-icon class="small-icon">sim_card_download</mat-icon>
       </button>
       <button
-        [disabled]="selectedTask === undefined"
+        aria-label=""
+        class="button small-button"
         mat-icon-button
         matTooltip="Download Submission"
         matTooltipPosition="above"
-        aria-label=""
-        class="button small-button"
+        [disabled]="!selectedTask"
         (click)="downloadSubmissionPdf()"
       >
         <mat-icon class="small-icon">file_download</mat-icon>
       </button>
       <f-project-progress-bar
-        matTooltip="{{selectedTask?.project.taskStats[4]?.value}}% progress towards {{ selectedTask?.project.targetGradeWord }}"
-        [matTooltipDisabled]="selectedTask === undefined"
-        [progress]="selectedTask?.project.taskStats"
+        [matTooltip]="
+          selectedTask?.project?.taskStats?.length > 4
+            ? selectedTask.project.taskStats[4].value +
+              '% progress towards ' +
+              selectedTask.project.targetGradeWord
+            : 'Progress unavailable'
+        "
+        [matTooltipDisabled]="!selectedTask"
+        [progress]="selectedTask?.project?.taskStats ?? []"
       ></f-project-progress-bar>
       <mat-chip-listbox aria-label="Target Grade Symbol" class="pointer-events-none">
-        <mat-chip-option style="min-width: 33px">{{ selectedTask?.project.targetGradeAcronym }}</mat-chip-option>
+        <mat-chip-option style="min-width: 33px">{{
+          selectedTask?.project?.targetGradeAcronym
+        }}</mat-chip-option>
       </mat-chip-listbox>
     </div>
   </div>
diff --git a/src/app/common/footer/footer.component.scss b/src/app/common/footer/footer.component.scss
index ca55371d54..b70eb4de76 100644
--- a/src/app/common/footer/footer.component.scss
+++ b/src/app/common/footer/footer.component.scss
@@ -1,26 +1,113 @@
+@use 'styles/mixins/task-status-colors-generator' as *;
+
 .footer {
   min-height: 85px;
+  background-color: var(--ot-color-page);
 
   .spacer {
     flex: 1 1 auto;
   }
 
   .center-buttons {
+    align-items: center;
     text-align: center;
 
     .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
       margin: 0 6px;
-      transform: scale(0.8);
+      width: 58px;
+      height: 58px;
+      transform: scale(0.75);
       border-radius: 100%;
     }
 
+    .button:not(.large-button):not(.extra-large-button) mat-icon,
+    .button:not(.large-button):not(.extra-large-button) i {
+      transform: scale(1.14);
+    }
+
+    .button:not(.large-button):not(.extra-large-button).status-chip:hover {
+      background-color: var(--status-chip-bg);
+      color: #fff;
+    }
+
     .large-button {
-      transform: scale(1.15);
-      background-color: white;
+      width: 57px;
+      height: 57px;
+      transform: scale(1);
+      background-color: var(--ot-color-surface);
     }
 
     .large-button:hover {
-      background-color: #f5f5f5;
+      background-color: var(--ot-color-surface-raised);
+    }
+
+    .large-button.status-chip {
+      background-color: var(--ot-color-surface);
+      color: var(--ot-color-text);
+    }
+
+    .large-button.status-chip:hover {
+      background-color: var(--status-chip-bg);
+      color: #fff;
+    }
+
+    .large-button.status-chip.fix-and-resubmit:hover {
+      color: #000;
+    }
+
+    .large-button.status-chip:disabled,
+    .large-button.status-chip.mat-mdc-button-disabled,
+    .large-button.status-chip.mdc-icon-button--disabled {
+      background-color: var(--ot-color-disabled-surface);
+      opacity: 0.55;
+      color: var(--ot-color-disabled-text);
+    }
+
+    .extra-large-button {
+      padding-top: 7px;
+      transform: scale(1.08);
+    }
+
+    .extra-large-button.status-chip {
+      background-color: var(--ot-color-surface);
+      color: var(--ot-color-text);
+    }
+
+    .extra-large-button.status-chip.suggested-task-status {
+      background-color: var(--status-chip-bg);
+      color: #fff;
+      filter: none;
+    }
+
+    .extra-large-button.status-chip.suggested-task-status.fix-and-resubmit {
+      color: #000;
+    }
+
+    .extra-large-button.status-chip.suggested-task-status:hover {
+      background-color: var(--status-chip-bg);
+      color: #fff;
+      filter: none;
+    }
+
+    .extra-large-button.status-chip.suggested-task-status.fix-and-resubmit:hover {
+      color: #000;
+    }
+
+    .extra-large-button.status-chip:hover {
+      background-color: var(--status-chip-bg);
+      color: #fff;
+    }
+
+    .extra-large-button.status-chip.fix-and-resubmit:hover {
+      color: #000;
+    }
+
+    .extra-large-button:hover {
+      filter: brightness(0.85);
     }
   }
 
@@ -39,3 +126,79 @@
     margin-right: 25px;
   }
 }
+
+@mixin status-icon($status) {
+  --status-chip-bg: #{task-status-color($status)};
+  background-color: transparent;
+  color: var(--status-chip-bg);
+}
+
+.status-chip {
+  transition:
+    filter 120ms ease,
+    background-color 120ms ease;
+
+  &:hover {
+    background-color: transparent;
+    filter: none;
+  }
+
+  &.feedback-exceeded {
+    @include status-icon('feedback-exceeded');
+  }
+  &.redo {
+    @include status-icon('redo');
+    color: #000;
+  }
+  &.attention-required {
+    @include status-icon('attention-required');
+  }
+  &.fix-and-resubmit {
+    @include status-icon('fix-and-resubmit');
+    color: #000;
+  }
+
+  &.large-button.fix-and-resubmit:hover,
+  &.extra-large-button.fix-and-resubmit:hover,
+  &.button:not(.large-button):not(.extra-large-button).fix-and-resubmit:hover {
+    color: #000;
+  }
+  &.discuss {
+    @include status-icon('discuss');
+    color: #000;
+  }
+  &.rediscuss {
+    @include status-icon('rediscuss');
+  }
+  &.working-on-it {
+    @include status-icon('working-on-it');
+  }
+  &.complete {
+    @include status-icon('complete');
+    color: #000;
+  }
+  &.assess-in-portfolio {
+    @include status-icon('assess-in-portfolio');
+  }
+
+  &:disabled,
+  &.mat-mdc-button-disabled,
+  &.mdc-icon-button--disabled {
+    background-color: transparent;
+    color: rgba(0, 0, 0, 0.25);
+    filter: none;
+    opacity: 1;
+  }
+
+  &.fix-and-resubmit:disabled,
+  &.fix-and-resubmit.mat-mdc-button-disabled,
+  &.fix-and-resubmit.mdc-icon-button--disabled,
+  &.discuss:disabled,
+  &.discuss.mat-mdc-button-disabled,
+  &.discuss.mdc-icon-button--disabled,
+  &.rediscuss:disabled,
+  &.rediscuss.mat-mdc-button-disabled,
+  &.rediscuss.mdc-icon-button--disabled {
+    color: rgba(0, 0, 0, 0.25);
+  }
+}
diff --git a/src/app/common/footer/footer.component.spec.ts b/src/app/common/footer/footer.component.spec.ts
index 953b22cc6c..dfe700e594 100644
--- a/src/app/common/footer/footer.component.spec.ts
+++ b/src/app/common/footer/footer.component.spec.ts
@@ -1,6 +1,18 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+import {ConfirmationModalService} from '../modals/confirmation-modal/confirmation-modal.service';
+import {DiscussedInClassReasonModalService} from '../modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.service';
+import {TaskAssessmentModalService} from '../modals/task-assessment-modal/task-assessment-modal.service';
+import {AlertService} from '../services/alert.service';
+import {FooterComponent} from './footer.component';
 
-import { FooterComponent } from './footer.component';
+const emptyProvider = {};
 
 describe('FooterComponent', () => {
   let component: FooterComponent;
@@ -8,13 +20,27 @@ describe('FooterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
+      declarations: [FooterComponent],
+      providers: [
+        {provide: SelectedTaskService, useValue: emptyProvider},
+        {provide: TaskService, useValue: emptyProvider},
+        {provide: FileDownloaderService, useValue: emptyProvider},
+        {provide: TaskAssessmentModalService, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: ProjectService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+        {provide: DiscussedInClassReasonModalService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(FooterComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/common/footer/footer.component.ts b/src/app/common/footer/footer.component.ts
index 2e4d3ff1ef..f0b1bc3878 100644
--- a/src/app/common/footer/footer.component.ts
+++ b/src/app/common/footer/footer.component.ts
@@ -1,35 +1,71 @@
-import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Task } from 'src/app/api/models/task';
-import { SelectedTaskService } from 'src/app/projects/states/dashboard/selected-task.service';
-
-import { FileDownloaderService } from '../file-downloader/file-downloader.service';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Task} from 'src/app/api/models/task';
+import {TaskStatusEnum} from 'src/app/api/models/task-status';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+import {ConfirmationModalService} from '../modals/confirmation-modal/confirmation-modal.service';
+import {DiscussedInClassReasonModalService} from '../modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.service';
+import {TaskAssessmentModalService} from '../modals/task-assessment-modal/task-assessment-modal.service';
+import {AlertService} from '../services/alert.service';
 
 @Component({
   selector: 'f-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class FooterComponent implements OnInit {
-  constructor(public selectedTaskService: SelectedTaskService, private fileDownloader: FileDownloaderService) {}
+  private readonly discussedInClassNotePrefix = `I'm manually marking this discussed in class because...`;
+
+  constructor(
+    public selectedTaskService: SelectedTaskService,
+    public taskService: TaskService,
+    private fileDownloader: FileDownloaderService,
+    private taskAssessmentModal: TaskAssessmentModalService,
+    private userService: UserService,
+    private projectService: ProjectService,
+    private confirmationModalService: ConfirmationModalService,
+    private discussedInClassReasonModal: DiscussedInClassReasonModalService,
+    private alertService: AlertService,
+  ) {}
+
+  @Input() viewType: 'inbox' | 'explorer' | 'moderation' | 'overflow';
 
   selectedTask$: Observable<Task>;
   selectedTask: Task;
+  public showModerationStatusButtons = false;
 
-  @ViewChild('similaritiesButton', { static: false, read: ElementRef }) similaritiesButton: ElementRef;
-  @ViewChild('warningText', { static: false, read: ElementRef }) warningText: ElementRef;
+  @ViewChild('similaritiesButton', {static: false, read: ElementRef})
+  similaritiesButton: ElementRef;
+  @ViewChild('warningText', {static: false, read: ElementRef}) warningText: ElementRef;
   public leftOffset: number;
   public topOffset: number;
   public warningTextLeftOffset: number;
 
   @HostListener('window:resize', ['$event'])
-  onResize(event) {
+  onResize(_event) {
     // After window resizes, calc the location of the elements again
     this.findSimilaritiesButton();
   }
 
   findSimilaritiesButton() {
-    if (!this.selectedTask?.similaritiesDetected) return;
+    if (!this.selectedTask?.similaritiesDetected) {
+      return;
+    }
 
     const w = this.similaritiesButton?.nativeElement.getBoundingClientRect().width;
     this.leftOffset = this.similaritiesButton?.nativeElement.offsetLeft + w / 2;
@@ -37,7 +73,33 @@ export class FooterComponent implements OnInit {
 
     const totalPaddingOffset = 30;
     this.warningTextLeftOffset =
-      this.leftOffset - (this.warningText?.nativeElement.getBoundingClientRect().width + totalPaddingOffset) / 2;
+      this.leftOffset -
+      (this.warningText?.nativeElement.getBoundingClientRect().width + totalPaddingOffset) / 2;
+  }
+
+  public get canAccessTutorNotes(): boolean {
+    const tutor = this.selectedTask.tutor;
+    if (!tutor) {
+      return false;
+    }
+
+    if (!this.currentUnitRole) {
+      return false;
+    }
+
+    // Ensure the unit is mapped correctly to access the mentor
+    tutor.unit = this.selectedTask.unit;
+
+    const canAccess =
+      this.currentUnitRole.role === 'Convenor' ||
+      this.currentUnitRole.role === 'Admin' ||
+      (tutor.mentor && tutor.mentor.id === this.currentUnitRole.id);
+
+    return canAccess;
+  }
+
+  public viewTutorNotes() {
+    this.selectedTaskService.showTutorNotes();
   }
 
   ngOnInit(): void {
@@ -46,6 +108,7 @@ export class FooterComponent implements OnInit {
 
     this.selectedTask$.subscribe((task) => {
       this.selectedTask = task;
+
       // We need to timeout to give the DOM a chance to place the elements
       setTimeout(() => {
         this.findSimilaritiesButton();
@@ -56,15 +119,27 @@ export class FooterComponent implements OnInit {
   downloadFiles() {
     this.fileDownloader.downloadFile(
       this.selectedTask.submittedFilesUrl(true),
-      `${this.selectedTask.project.student.lastName}-${this.selectedTask.definition.name}.zip`
+      `${this.selectedTask.project.student.lastName}-${this.selectedTask.definition.name}.zip`,
     );
   }
 
   downloadSubmissionPdf() {
     this.fileDownloader.downloadFile(
       this.selectedTask.submissionUrl(true),
-      `${this.selectedTask.project.student.lastName}-${this.selectedTask.definition.name}.pdf`
+      `${this.selectedTask.project.student.lastName}-${this.selectedTask.definition.name}.pdf`,
+    );
+  }
+
+  markTaskWorkingOnIt(task?: Task) {
+    if (!task || !task.definition?.assessInPortfolioOnly) {
+      return;
+    }
+    task.addComment(
+      `**Automated Message:** Task "${task.definition.abbreviation} ${task.definition.name}" will be graded during portfolio assessment only. You can keep submitting it for feedback before the task deadline, but you must still submit it directly for portfolio assessment before the portfolio deadline.`,
     );
+    setTimeout(() => {
+      task.updateTaskStatus('working_on_it');
+    }, 500);
   }
 
   viewTaskSheet() {
@@ -78,4 +153,137 @@ export class FooterComponent implements OnInit {
   viewSimilarity() {
     this.selectedTaskService.showSimilarity();
   }
+
+  // viewOverseer() {
+  //   this.taskAssessmentModal.show(this.selectedTask);
+  // }
+
+  viewOverseer() {
+    this.selectedTaskService.showOverseerReports();
+  }
+
+  viewStaffNotes() {
+    this.selectedTaskService.showStaffNotes();
+  }
+
+  viewDiscussionPrompts() {
+    this.selectedTaskService.showDiscussionPrompts();
+  }
+
+  getJplagReport() {
+    if (!this.selectedTask?.definition) {
+      return;
+    }
+    this.fileDownloader.downloadFile(
+      this.selectedTask.definition.getJplagReportUrl(),
+      `${this.selectedTask.definition.abbreviation}-jplag-report`,
+    );
+  }
+
+  public get currentUnitRole(): UnitRole | undefined {
+    const currentUser = this.userService.currentUser;
+    return this.selectedTask.unit.staff.find((ur) => ur.user.id === currentUser.id);
+  }
+
+  public get actionButtonEnabled(): boolean {
+    if (!this.selectedTask) {
+      return false;
+    }
+
+    if (this.selectedTask.loadingSubmissionDetails) {
+      return false;
+    }
+
+    if (this.viewType === 'overflow' || this.selectedTask.claimedByUnitRoleId) {
+      if (this.currentUnitRole.id !== this.selectedTask.claimedByUnitRoleId) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  public get completeButtonEnabled(): boolean {
+    return this.actionButtonEnabled && !!this.selectedTask?.canMarkComplete;
+  }
+
+  public get discussActionStatus(): TaskStatusEnum {
+    return this.selectedTask?.status === 'discuss' ? 'rediscuss' : 'discuss';
+  }
+
+  public get discussActionLabel(): string {
+    return this.taskService.statusData(this.discussActionStatus).label;
+  }
+
+  public get discussActionIcon(): string {
+    return this.taskService.statusData(this.discussActionStatus).materialIcon;
+  }
+
+  public get discussActionClass(): string {
+    return this.taskService.statusData(this.discussActionStatus).class;
+  }
+
+  public get hideMainActionButtonsForModeration(): boolean {
+    return this.viewType === 'moderation' && !this.showModerationStatusButtons;
+  }
+
+  public toggleModerationStatusButtons() {
+    this.showModerationStatusButtons = !this.showModerationStatusButtons;
+  }
+
+  async markAsResubmit(task: Task) {
+    if (!task?.definition || !task?.project) {
+      return;
+    }
+
+    try {
+      const hasReadyDependents = await task.hasReadyForFeedbackDependents();
+      if (!hasReadyDependents) {
+        task.updateTaskStatus('fix_and_resubmit');
+        return;
+      }
+
+      this.confirmationModalService.show(
+        'Move dependent tasks to Fix and Resubmit?',
+        'This task is a prerequisite for one or more other tasks submitted by this student that are Ready for Feedback. Do you want to move those tasks to Fix and Resubmit as well?',
+        () => {
+          task.updateTaskStatus('fix_and_resubmit', false, true);
+        },
+        () => {
+          task.updateTaskStatus('fix_and_resubmit');
+        },
+        'Yes, update dependent tasks',
+        'No, just this task',
+      );
+    } catch (error) {
+      this.alertService.error(`Failed to check dependent task statuses: ${error}`, 6000);
+      task.updateTaskStatus('fix_and_resubmit');
+    }
+  }
+
+  public markSelectedTaskAsDiscussed() {
+    if (!this.selectedTask) {
+      return;
+    }
+
+    if (!this.selectedTask.unit.enforceFeedbackBeforeDiscussedInClass) {
+      this.selectedTask.markAsDiscussed();
+      return;
+    }
+
+    this.discussedInClassReasonModal
+      .show(
+        'Mark Discussed in Class',
+        `Add a tutor note explaining why ${this.selectedTask.definition.abbreviation} is being marked as discussed in class.`,
+        this.discussedInClassNotePrefix,
+      )
+      .afterClosed()
+      .subscribe((reason) => {
+        if (!reason) {
+          return;
+        }
+
+        this.selectedTask.markAsDiscussed(reason);
+      });
+  }
 }
diff --git a/src/app/common/grade-icon/grade-icon.coffee b/src/app/common/grade-icon/grade-icon.coffee
deleted file mode 100644
index f35f7fbfa4..0000000000
--- a/src/app/common/grade-icon/grade-icon.coffee
+++ /dev/null
@@ -1,16 +0,0 @@
-angular.module('doubtfire.common.grade-icon', [])
-
-.directive 'gradeIcon', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'common/grade-icon/grade-icon.tpl.html'
-  scope:
-    inputGrade: '=?grade'
-    colorful: '=?'
-  controller: ($scope, gradeService) ->
-    $scope.$watch 'inputGrade', (newGrade) ->
-      $scope.grade = if _.isString($scope.inputGrade) then gradeService.stringToGrade($scope.inputGrade) else $scope.inputGrade
-      $scope.gradeText = (grade) ->
-        if grade? then gradeService.grades[grade] or "Grade"
-      $scope.gradeLetter = (grade) ->
-        gradeService.gradeAcronyms[grade] or 'G'
diff --git a/src/app/common/grade-icon/grade-icon.component.html b/src/app/common/grade-icon/grade-icon.component.html
new file mode 100644
index 0000000000..9c98630e18
--- /dev/null
+++ b/src/app/common/grade-icon/grade-icon.component.html
@@ -0,0 +1,16 @@
+<div>
+  <span
+    class="m-0 flex size-[2.25em] items-center justify-center rounded-full bg-[#333] text-[1em] font-thin text-white"
+    matTooltip="{{ gradeText }}"
+    matTooltipPosition="above"
+    [ngClass]="{
+      colorful: colorful,
+      'grade-0': grade === 0,
+      'grade-1': grade === 1,
+      'grade-2': grade === 2,
+      'grade-3': grade === 3,
+    }"
+  >
+    {{ gradeLetter }}
+  </span>
+</div>
diff --git a/src/app/common/grade-icon/grade-icon.component.scss b/src/app/common/grade-icon/grade-icon.component.scss
new file mode 100644
index 0000000000..044ed333e3
--- /dev/null
+++ b/src/app/common/grade-icon/grade-icon.component.scss
@@ -0,0 +1,6 @@
+.text-left .grade-icon {
+  margin-left: 0;
+}
+.text-right .grade-icon {
+  margin-right: 0;
+}
diff --git a/src/app/common/grade-icon/grade-icon.component.spec.ts b/src/app/common/grade-icon/grade-icon.component.spec.ts
new file mode 100644
index 0000000000..886ce73c90
--- /dev/null
+++ b/src/app/common/grade-icon/grade-icon.component.spec.ts
@@ -0,0 +1,67 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {GradeIconComponent} from './grade-icon.component';
+
+describe('GradeIconComponent', () => {
+  let component: GradeIconComponent;
+  let fixture: ComponentFixture<GradeIconComponent>;
+  let gradeService: GradeService;
+
+  beforeEach(async () => {
+    gradeService = new GradeService();
+
+    await TestBed.configureTestingModule({
+      declarations: [GradeIconComponent],
+      providers: [{provide: GradeService, useValue: gradeService}],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GradeIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show the default icon when the grade is undefined', () => {
+    component.grade = undefined;
+    component.ngOnInit();
+
+    expect(component.gradeText).toEqual('Grade');
+    expect(component.gradeLetter).toEqual('G');
+  });
+
+  it('should show the default icon when given invalid input', () => {
+    component.grade = 'Tomato';
+    component.ngOnInit();
+
+    expect(component.gradeText).toEqual('Grade');
+    expect(component.gradeLetter).toEqual('G');
+  });
+
+  it('should set the grade when passed a grade name', () => {
+    Object.entries(gradeService.gradeIndex).forEach(([grade, value]) => {
+      component.grade = grade;
+      component.ngOnInit();
+
+      expect(component.gradeText).toEqual(grade);
+      expect(component.gradeLetter).toEqual(gradeService.gradeAcronyms[value]);
+    });
+  });
+
+  it('should set the grade when passed a numeric grade', () => {
+    gradeService.allGradeValues.forEach((grade) => {
+      component.grade = grade;
+      component.ngOnInit();
+
+      expect(component.gradeText).toEqual(gradeService.grades[grade]);
+      expect(component.gradeLetter).toEqual(gradeService.gradeAcronyms[grade]);
+    });
+  });
+});
diff --git a/src/app/common/grade-icon/grade-icon.component.ts b/src/app/common/grade-icon/grade-icon.component.ts
new file mode 100644
index 0000000000..3979c56504
--- /dev/null
+++ b/src/app/common/grade-icon/grade-icon.component.ts
@@ -0,0 +1,47 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {Unit} from 'src/app/api/models/unit';
+import {GradeService} from '../services/grade.service';
+
+@Component({
+  selector: 'f-grade-icon',
+  templateUrl: './grade-icon.component.html',
+  styleUrls: ['./grade-icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class GradeIconComponent implements OnInit, OnChanges {
+  @Input() grade?: number | string;
+  @Input() unit?: Unit;
+  @Input() colorful: boolean = false;
+
+  gradeText: string = 'Grade';
+  gradeLetter: string = 'G';
+
+  constructor(private gradeService: GradeService) {}
+
+  ngOnInit(): void {
+    this.updateGrade();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['grade'] || changes['unit']) {
+      this.updateGrade();
+    }
+  }
+
+  private updateGrade(): void {
+    const grade: number =
+      typeof this.grade === 'string'
+        ? this.gradeService.stringToGrade(this.grade, this.unit)
+        : this.grade;
+    this.gradeText = this.gradeService.gradeLabel(grade, this.unit) || 'Grade';
+    this.gradeLetter = this.gradeService.gradeAbbreviation(grade, this.unit) || 'G';
+  }
+}
diff --git a/src/app/common/grade-icon/grade-icon.scss b/src/app/common/grade-icon/grade-icon.scss
deleted file mode 100644
index 08db661a8b..0000000000
--- a/src/app/common/grade-icon/grade-icon.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.grade-icon.text-muted {
-  background-color: $text-muted;
-}
-.grade-icon.text-primary {
-  background-color: $brand-primary;
-}
-.grade-icon.text-success {
-  background-color: $brand-success;
-}
-.grade-icon.text-danger {
-  background-color: $brand-danger;
-}
-.grade-icon.text-info {
-  background-color: $brand-info;
-}
-.grade-icon.text-warning {
-  background-color: $brand-warning;
-}
-a .grade-icon:hover {
-  background-color: $link-hover-color;
-}
-.grade-icon {
-  color: #fff;
-  font-size: 1em;
-  background-color: $text-color;
-  border-radius: 100%;
-  width: 2.25em;
-  height: 2.25em;
-  font-weight: 100;
-  font-size: 1em;
-  @include no-select;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.grade-icon.colorful {
-  &.grade-0 { background-color: $grade-color-p;  }
-  &.grade-1 { background-color: $grade-color-c;  }
-  &.grade-2 { background-color: $grade-color-d;  }
-  &.grade-3 { background-color: $grade-color-hd; }
-}
-.text-left .grade-icon {
-  margin-left: 0;
-}
-.text-right .grade-icon {
-  margin-right: 0;
-}
diff --git a/src/app/common/grade-icon/grade-icon.tpl.html b/src/app/common/grade-icon/grade-icon.tpl.html
deleted file mode 100644
index 1939b21361..0000000000
--- a/src/app/common/grade-icon/grade-icon.tpl.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="grade-icon">
-  <span
-    class="grade-icon"
-    ng-class="{colorful: colorful, 'grade-0': grade == 0, 'grade-1': grade == 1, 'grade-2': grade == 2, 'grade-3': grade == 3}"
-    tooltip="{{gradeText(grade)}}">
-    {{gradeLetter(grade)}}
-  </span>
-</div>
diff --git a/src/app/common/guards/role-whitelist.guard.ts b/src/app/common/guards/role-whitelist.guard.ts
new file mode 100644
index 0000000000..6e11b8f7cf
--- /dev/null
+++ b/src/app/common/guards/role-whitelist.guard.ts
@@ -0,0 +1,73 @@
+import {inject, isDevMode} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivateFn, Router, UrlTree} from '@angular/router';
+import {Observable, filter, map, of, take} from 'rxjs';
+import {AuthenticationService, UserService} from 'src/app/api/models/doubtfire-model';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+
+export const roleWhitelistGuard: CanActivateFn = (
+  route: ActivatedRouteSnapshot,
+): Observable<boolean | UrlTree> => {
+  const authenticationService = inject(AuthenticationService);
+  const globalState = inject(GlobalStateService);
+  const router = inject(Router);
+  const userService = inject(UserService);
+  const roleWhitelist = route.data['roleWhitelist'] as string[] | undefined;
+
+  if (!roleWhitelist?.length) {
+    // A route that asks for the guard and gives it no whitelist lets everybody through. Keep
+    // letting them through so production behaviour does not change, but say so while developing.
+    if (isDevMode()) {
+      console.error(
+        `roleWhitelistGuard is on route '${routePath(route)}' with no roleWhitelist in its data, ` +
+          'so it allows every signed in user. Add a roleWhitelist or drop the guard.',
+      );
+    }
+    return of(true);
+  }
+
+  return globalState.isLoadingSubject.pipe(
+    filter((isLoading) => !isLoading),
+    take(1),
+    map(() => {
+      const role = roleForRoute(route, userService, globalState);
+      return authenticationService.isAuthorised(roleWhitelist, role)
+        ? true
+        : router.createUrlTree(['/unauthorised']);
+    }),
+  );
+};
+
+function routePath(route: ActivatedRouteSnapshot): string {
+  return (
+    route.pathFromRoot
+      .map((snapshot) => snapshot.routeConfig?.path)
+      .filter((path) => !!path)
+      .join('/') || '/'
+  );
+}
+
+function roleForRoute(
+  route: ActivatedRouteSnapshot,
+  userService: UserService,
+  globalState: GlobalStateService,
+): string | undefined {
+  const unitId = Number(route.paramMap.get('unitId') ?? route.parent?.paramMap.get('unitId'));
+
+  if (!Number.isNaN(unitId) && unitId > 0) {
+    const unitRole = globalState.loadedUnitRoles.currentValues.find(
+      (role) => role.unit?.id === unitId,
+    );
+
+    if (unitRole) {
+      return unitRole.role;
+    }
+
+    if (userService.currentUser.role === 'Admin' || userService.currentUser.role === 'Auditor') {
+      return userService.currentUser.role;
+    }
+
+    return undefined;
+  }
+
+  return userService.currentUser.role;
+}
diff --git a/src/app/common/guards/spec/role-whitelist.guard.spec.ts b/src/app/common/guards/spec/role-whitelist.guard.spec.ts
new file mode 100644
index 0000000000..63869a7559
--- /dev/null
+++ b/src/app/common/guards/spec/role-whitelist.guard.spec.ts
@@ -0,0 +1,456 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {HttpClient} from '@angular/common/http';
+import {Type} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {
+  ActivatedRouteSnapshot,
+  Data,
+  Route,
+  Router,
+  RouterStateSnapshot,
+  Routes,
+  UrlTree,
+  convertToParamMap,
+} from '@angular/router';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {InstitutionSettingsComponent} from 'src/app/admin/institution-settings/institution-settings.component';
+import {FUnitsComponent} from 'src/app/admin/states/units/units.component';
+import {FUsersComponent} from 'src/app/admin/states/users/users.component';
+import {AuthenticationService, UserService} from 'src/app/api/models/doubtfire-model';
+import {routes} from 'src/app/app.routes';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {JplagReportViewerComponent} from 'src/app/projects/states/jplag/jplag-report-viewer.component';
+import {TutorDiscussionComponent} from 'src/app/projects/states/tutor-discussion/tutor-discussion.component';
+import {UnitAnalyticsComponent} from 'src/app/units/states/analytics/unit-analytics-route.component';
+import {UnitAdminStateComponent} from 'src/app/units/states/edit/unit-admin-state.component';
+import {UnitGroupsComponent} from 'src/app/units/states/groups/unit-groups/unit-groups.component';
+import {PortfoliosComponent} from 'src/app/units/states/portfolios/portfolios.component';
+import {RolloverComponent} from 'src/app/units/states/rollover/rollover.component';
+import {StudentsListComponent} from 'src/app/units/states/students-list/students-list.component';
+import {UnitTaskInboxStateComponent} from 'src/app/units/states/tasks/inbox/unit-task-inbox-state.component';
+import {TaskViewerStateComponent} from 'src/app/units/task-viewer/task-viewer-state.component';
+import {roleWhitelistGuard} from '../role-whitelist.guard';
+
+/**
+ * Components that only teaching staff should ever reach. Every route that renders one of
+ * these has to carry roleWhitelistGuard, on itself or on a parent, unless its full path is
+ * listed in DELIBERATELY_OPEN_PATHS below.
+ *
+ * Add to this list when you add a staff screen. That is the whole point of it.
+ */
+const STAFF_ONLY_COMPONENTS: Type<unknown>[] = [
+  FUnitsComponent,
+  FUsersComponent,
+  InstitutionSettingsComponent,
+  JplagReportViewerComponent,
+  PortfoliosComponent,
+  RolloverComponent,
+  StudentsListComponent,
+  TaskViewerStateComponent,
+  TutorDiscussionComponent,
+  UnitAdminStateComponent,
+  UnitAnalyticsComponent,
+  UnitGroupsComponent,
+  UnitTaskInboxStateComponent,
+];
+
+/**
+ * Routes onto a staff component that are open on purpose. Anything added here needs a
+ * comment on the route itself saying why it is open.
+ */
+const DELIBERATELY_OPEN_PATHS: string[] = [
+  // FUnitsComponent in 'student' mode lists the signed in user's own enrolled units.
+  'view-all-projects',
+  // An empty iframe onto the bundled JPlag viewer. It makes no api call and holds no data of
+  // its own until staff hand it a blob url from their own tab.
+  'jplag-report-viewer',
+];
+
+interface FlatRoute {
+  path: string;
+  component?: Type<unknown>;
+  guarded: boolean;
+  roleWhitelist?: string[];
+  ownGuard: boolean;
+  ownWhitelist?: string[];
+}
+
+function hasRoleGuard(route: Route): boolean {
+  return (route.canActivate ?? []).includes(roleWhitelistGuard);
+}
+
+function flatten(
+  children: Routes,
+  parentPath: string,
+  inheritedGuard: boolean,
+  inheritedWhitelist: string[] | undefined,
+): FlatRoute[] {
+  return children.flatMap((route) => {
+    const path = [parentPath, route.path].filter((part) => !!part).join('/');
+    const ownGuard = hasRoleGuard(route);
+    const ownWhitelist = route.data?.['roleWhitelist'] as string[] | undefined;
+    const guarded = inheritedGuard || ownGuard;
+    const roleWhitelist = ownGuard ? ownWhitelist : inheritedWhitelist;
+
+    const self: FlatRoute = {
+      path,
+      component: route.component,
+      guarded,
+      roleWhitelist,
+      ownGuard,
+      ownWhitelist,
+    };
+    const descendants = route.children ? flatten(route.children, path, guarded, roleWhitelist) : [];
+
+    return [self, ...descendants];
+  });
+}
+
+const flatRoutes = flatten(routes, '', false, undefined);
+const staffRoutes = flatRoutes.filter(
+  (route) => route.component && STAFF_ONLY_COMPONENTS.includes(route.component),
+);
+
+describe('app route role guard coverage', () => {
+  it('finds the staff routes it is meant to be checking', () => {
+    // Guards the walk itself. If flatten() ever stops descending, this fails rather than
+    // letting the assertions below pass over an empty list.
+    expect(staffRoutes.length).toBeGreaterThanOrEqual(25);
+    expect(staffRoutes.map((route) => route.path)).toContain(
+      'units/:unitId/tasks/:taskAbbreviation',
+    );
+  });
+
+  it('puts roleWhitelistGuard on every route that renders a staff only component', () => {
+    const unguarded = staffRoutes
+      .filter((route) => !route.guarded)
+      .map((route) => route.path)
+      .filter((path) => !DELIBERATELY_OPEN_PATHS.includes(path));
+
+    expect(
+      unguarded,
+      `these staff routes have no roleWhitelistGuard: ${unguarded.join(', ')}. Add ` +
+        'canActivate: [roleWhitelistGuard] and a roleWhitelist, or list the path in ' +
+        'DELIBERATELY_OPEN_PATHS with a comment on the route saying why it is open.',
+    ).toEqual([]);
+  });
+
+  it('gives every guarded staff route a non empty whitelist', () => {
+    const missing = staffRoutes
+      .filter((route) => route.guarded && !route.roleWhitelist?.length)
+      .map((route) => route.path);
+
+    expect(missing, `these guarded routes have no roleWhitelist: ${missing.join(', ')}`).toEqual(
+      [],
+    );
+  });
+
+  it('never puts the guard on a route without a whitelist of its own', () => {
+    // roleWhitelistGuard falls through to true when data.roleWhitelist is missing, so this
+    // pairing looks protected and is not.
+    const emptyGuards = flatRoutes
+      .filter((route) => route.ownGuard && !route.ownWhitelist?.length)
+      .map((route) => route.path);
+
+    expect(
+      emptyGuards,
+      `these routes ask for the guard and give it nothing to check: ${emptyGuards.join(', ')}`,
+    ).toEqual([]);
+  });
+
+  it('leaves the student routes alone', () => {
+    // The negative case. If a change starts guarding everything, this goes red.
+    const studentPaths = [
+      'home',
+      'sign_in',
+      'projects/:projectId/dashboard',
+      'projects/:projectId/portfolio',
+      'view-all-projects',
+    ];
+
+    const wronglyGuarded = flatRoutes
+      .filter((route) => studentPaths.includes(route.path) && route.guarded)
+      .map((route) => route.path);
+
+    expect(wronglyGuarded).toEqual([]);
+  });
+
+  it('only ever whitelists role names the api actually issues', () => {
+    const validRoles = ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'];
+    const invalid = flatRoutes
+      .flatMap((route) => route.ownWhitelist ?? [])
+      .filter((role) => !validRoles.includes(role));
+
+    expect(invalid).toEqual([]);
+  });
+});
+
+const UNIT_ID = 12;
+
+/**
+ * Which roles the guard has to admit and refuse, per route, run through the guard itself.
+ *
+ * The block above only proves a guard is attached. It says nothing about who that guard lets
+ * in, so a whitelist that locks out a whole role passes it. These do execute the guard, against
+ * the whitelist that is really in app.routes.ts, so a wrong whitelist goes red here.
+ *
+ * Paths under 'units/:unitId' resolve the caller's UNIT role. Top level paths resolve the
+ * SYSTEM role. Same guard, different question, which is why two identical looking whitelists
+ * on the two kinds of path do not admit the same people.
+ */
+const UNIT_ROLE_EXPECTATIONS: {path: string; allow: string[]; refuse: string[]}[] = [
+  // The staff menu offers Discussion and Check-in to every unit role, and the header QR button
+  // routes every non student to 'discussion'. Convenors have to be able to get there.
+  {path: 'units/:unitId/discussion', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  {path: 'units/:unitId/check-in', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  {path: 'units/:unitId/analytics', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  {path: 'units/:unitId/students', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  {path: 'units/:unitId/students/groups', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  {path: 'units/:unitId/students/portfolios', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  {path: 'units/:unitId/tasks/inbox', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  {path: 'units/:unitId/tasks/moderation', allow: ['Convenor', 'Tutor'], refuse: ['Student']},
+  // Convenor and above. Unit administration, rollover and the whole unit task list are not a
+  // tutor's queue. A tutor deep link belongs on 'tasks/inbox/:studentId/:taskDefAbbr' above.
+  {path: 'units/:unitId/admin', allow: ['Convenor'], refuse: ['Tutor', 'Student']},
+  {path: 'units/:unitId/rollover', allow: ['Convenor'], refuse: ['Tutor', 'Student']},
+  {path: 'units/:unitId/tasks', allow: ['Convenor'], refuse: ['Tutor', 'Student']},
+  {
+    path: 'units/:unitId/tasks/:taskAbbreviation',
+    allow: ['Convenor'],
+    refuse: ['Tutor', 'Student'],
+  },
+];
+
+const SYSTEM_ROLE_EXPECTATIONS: {path: string; allow: string[]; refuse: string[]}[] = [
+  {path: 'view-all-units', allow: ['Tutor', 'Convenor', 'Admin', 'Auditor'], refuse: ['Student']},
+  {
+    path: 'tutor-attendance',
+    allow: ['Tutor', 'Convenor', 'Admin', 'Auditor'],
+    refuse: ['Student'],
+  },
+  // 'tutor-discussion' refuses Convenor on 11.0.x already. This change does not widen it, and
+  // pinning it here is what makes that a decision rather than an oversight.
+  {path: 'tutor-discussion', allow: ['Tutor', 'Admin', 'Auditor'], refuse: ['Convenor', 'Student']},
+  {path: 'admin/units', allow: ['Convenor', 'Admin', 'Auditor'], refuse: ['Tutor', 'Student']},
+  {path: 'admin/users', allow: ['Admin', 'Auditor'], refuse: ['Convenor', 'Tutor', 'Student']},
+  {
+    path: 'admin/institution-settings',
+    allow: ['Admin', 'Auditor'],
+    refuse: ['Convenor', 'Tutor', 'Student'],
+  },
+];
+
+/**
+ * The whitelist the guard will really see on this path, taken from app.routes.ts rather than
+ * repeated here. Where two routes share a path the first one wins, which is what the router
+ * does too.
+ */
+function whitelistFor(path: string): string[] {
+  const match = flatRoutes.find((route) => route.path === path);
+  expect(match, `no route in app.routes.ts has the path '${path}'`).toBeDefined();
+  expect(
+    match?.roleWhitelist,
+    `route '${path}' reaches the guard with no roleWhitelist`,
+  ).toBeDefined();
+
+  return match.roleWhitelist;
+}
+
+describe('roleWhitelistGuard role decisions', () => {
+  const globalState = {
+    isLoadingSubject: new BehaviorSubject<boolean>(false),
+    loadedUnitRoles: {currentValues: [] as {unit: {id: number}; role: string}[]},
+  };
+  const userService = {currentUser: {role: 'Student'}};
+  const router = {
+    createUrlTree: (commands: unknown[]) => ({commands}) as unknown as UrlTree,
+  };
+
+  beforeEach(() => {
+    globalState.isLoadingSubject.next(false);
+    globalState.loadedUnitRoles.currentValues = [];
+    userService.currentUser.role = 'Student';
+
+    TestBed.configureTestingModule({
+      providers: [
+        AuthenticationService,
+        {provide: AlertService, useValue: {}},
+        {provide: DoubtfireConstants, useValue: {API_URL: ''}},
+        {provide: GlobalStateService, useValue: globalState},
+        {provide: HttpClient, useValue: {}},
+        {provide: Router, useValue: router},
+        {provide: UserService, useValue: userService},
+      ],
+    });
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  function snapshotFor(data: Data, unitId?: number): ActivatedRouteSnapshot {
+    return {
+      data,
+      paramMap: convertToParamMap(unitId === undefined ? {} : {unitId: String(unitId)}),
+      parent: null,
+      pathFromRoot: [],
+    } as unknown as ActivatedRouteSnapshot;
+  }
+
+  function activate(snapshot: ActivatedRouteSnapshot): boolean | UrlTree {
+    const result = TestBed.runInInjectionContext(
+      () =>
+        roleWhitelistGuard(snapshot, {} as RouterStateSnapshot) as Observable<boolean | UrlTree>,
+    );
+
+    let outcome: boolean | UrlTree | undefined;
+    result.subscribe((value) => (outcome = value));
+    expect(outcome, 'the guard did not settle synchronously').toBeDefined();
+
+    return outcome;
+  }
+
+  function admitsUnitRole(path: string, unitRole: string): boolean {
+    // The system role is left as Student on purpose. If role resolution ever stopped reading the
+    // unit role it would fall back to this and every allow case below would fail.
+    userService.currentUser.role = 'Student';
+    globalState.loadedUnitRoles.currentValues =
+      unitRole === 'Student' ? [] : [{unit: {id: UNIT_ID}, role: unitRole}];
+
+    return activate(snapshotFor({roleWhitelist: whitelistFor(path)}, UNIT_ID)) === true;
+  }
+
+  function admitsSystemRole(path: string, systemRole: string): boolean {
+    globalState.loadedUnitRoles.currentValues = [];
+    userService.currentUser.role = systemRole;
+
+    return activate(snapshotFor({roleWhitelist: whitelistFor(path)})) === true;
+  }
+
+  for (const expectation of UNIT_ROLE_EXPECTATIONS) {
+    it(`admits ${expectation.allow.join(' and ')} to ${expectation.path}`, () => {
+      for (const role of expectation.allow) {
+        expect(admitsUnitRole(expectation.path, role), `${role} was refused`).toBe(true);
+      }
+    });
+
+    it(`refuses ${expectation.refuse.join(' and ')} on ${expectation.path}`, () => {
+      for (const role of expectation.refuse) {
+        expect(admitsUnitRole(expectation.path, role), `${role} was admitted`).toBe(false);
+      }
+    });
+  }
+
+  it('sends a refused caller to /unauthorised rather than just returning false', () => {
+    userService.currentUser.role = 'Student';
+    globalState.loadedUnitRoles.currentValues = [];
+
+    const outcome = activate(
+      snapshotFor({roleWhitelist: whitelistFor('units/:unitId/admin')}, UNIT_ID),
+    );
+
+    expect(outcome).toEqual({commands: ['/unauthorised']});
+  });
+
+  it('lets a system Admin or Auditor into a unit they hold no unit role in', () => {
+    // roleForRoute falls back to the system role for these two. Every unit whitelist has to keep
+    // carrying them or site administration loses access to the units it administers.
+    for (const path of UNIT_ROLE_EXPECTATIONS.map((expectation) => expectation.path)) {
+      for (const role of ['Admin', 'Auditor']) {
+        globalState.loadedUnitRoles.currentValues = [];
+        userService.currentUser.role = role;
+
+        expect(
+          activate(snapshotFor({roleWhitelist: whitelistFor(path)}, UNIT_ID)),
+          `${role} was refused on ${path}`,
+        ).toBe(true);
+      }
+    }
+  });
+
+  it('still admits a system Convenor to a unit they hold no unit role in', () => {
+    // Pinning a gap, not endorsing it. roleForRoute returns undefined here, but isAuthorised
+    // falls back to the system role when it is handed one, so the undefined never refuses
+    // anybody. A system Convenor with no role in unit 12 reaches /units/12/admin. The card for
+    // this change says not to touch the guard's logic, so this records today's behaviour and
+    // will go red when someone fixes it on its own ticket.
+    globalState.loadedUnitRoles.currentValues = [];
+    userService.currentUser.role = 'Convenor';
+
+    expect(
+      activate(snapshotFor({roleWhitelist: whitelistFor('units/:unitId/admin')}, UNIT_ID)),
+    ).toBe(true);
+  });
+
+  for (const expectation of SYSTEM_ROLE_EXPECTATIONS) {
+    it(`admits ${expectation.allow.join(' and ')} to ${expectation.path}`, () => {
+      for (const role of expectation.allow) {
+        expect(admitsSystemRole(expectation.path, role), `${role} was refused`).toBe(true);
+      }
+    });
+
+    it(`refuses ${expectation.refuse.join(' and ')} on ${expectation.path}`, () => {
+      for (const role of expectation.refuse) {
+        expect(admitsSystemRole(expectation.path, role), `${role} was admitted`).toBe(false);
+      }
+    });
+  }
+
+  it('waits for the global state to finish loading before it decides', () => {
+    globalState.isLoadingSubject.next(true);
+    userService.currentUser.role = 'Student';
+
+    const result = TestBed.runInInjectionContext(
+      () =>
+        roleWhitelistGuard(
+          snapshotFor({roleWhitelist: whitelistFor('units/:unitId/admin')}, UNIT_ID),
+          {} as RouterStateSnapshot,
+        ) as Observable<boolean | UrlTree>,
+    );
+
+    let outcome: boolean | UrlTree | undefined;
+    result.subscribe((value) => (outcome = value));
+    expect(outcome, 'the guard decided while the roles were still loading').toBeUndefined();
+
+    globalState.loadedUnitRoles.currentValues = [{unit: {id: UNIT_ID}, role: 'Convenor'}];
+    globalState.isLoadingSubject.next(false);
+
+    expect(outcome).toBe(true);
+  });
+
+  describe('a guarded route with no whitelist', () => {
+    const noWhitelist = () =>
+      ({
+        data: {},
+        paramMap: convertToParamMap({}),
+        parent: null,
+        pathFromRoot: [
+          {routeConfig: {path: 'units'}},
+          {routeConfig: {path: ':unitId'}},
+          {routeConfig: {path: 'analytics'}},
+        ],
+      }) as unknown as ActivatedRouteSnapshot;
+
+    it('still lets the caller through, so a missing whitelist cannot lock production out', () => {
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+      userService.currentUser.role = 'Student';
+
+      expect(activate(noWhitelist())).toBe(true);
+
+      spy.mockRestore();
+    });
+
+    it('logs an error naming the route so the mistake is visible while developing', () => {
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+
+      activate(noWhitelist());
+
+      expect(spy).toHaveBeenCalledOnce();
+      expect(spy.mock.calls[0][0]).toContain('units/:unitId/analytics');
+
+      spy.mockRestore();
+    });
+  });
+});
diff --git a/src/app/common/header/header.component.html b/src/app/common/header/header.component.html
index bac6b77c07..9292672286 100644
--- a/src/app/common/header/header.component.html
+++ b/src/app/common/header/header.component.html
@@ -1,46 +1,93 @@
 @if (showHeader) {
   <mat-toolbar
-    [ngClass]="{inbox: globalState.isInboxState}"
     class="flex items-center justify-start"
     style="min-height: 85px"
+    [ngClass]="{inbox: globalState.isInboxState}"
   >
-    @if (!media.isActive('xs')) {
-      <a uiSref="home" class="pt-4">
+    @if (!isExtraSmall) {
+      @if (logoSettings.hasLogo) {
+        <a class="mx-3.5" [href]="logoSettings.logoLinkUrl">
+          <img style="height: 32px" [alt]="externalName + 'logo'" [src]="logoSettings.logoUrl" />
+        </a>
+      }
+
+      <a class="pt-2.5" routerLink="/home">
         <mat-icon
-          uiSref="home"
+          aria-label="Formatif logo"
+          class="formatif-icon"
           style="margin-right: 20px; margin-left: 20px"
           svgIcon="formatif-logo"
-          class="formatif-icon"
-          aria-label="Formatif logo"
         ></mat-icon>
       </a>
     }
 
     <unit-dropdown
+      class="mr-1"
+      [projects]="projects"
       [unit]="currentUnit"
       [unitRoles]="filteredUnitRoles"
-      [projects]="projects"
-      class="mr-2"
     >
     </unit-dropdown>
 
     <task-dropdown
-      [currentUnit]="currentUnit"
       [currentProject]="currentProject"
+      [currentUnit]="currentUnit"
       [currentView]="currentView"
       [data]="data"
       [unitRole]="currentUnitRole"
     ></task-dropdown>
 
     <span class="grow"></span>
-
+    <!--
+      Not on a phone. This toolbar is a flex row that does not wrap, and neither
+      dropdown to the left of it shrinks, so on xs there is no room left and one
+      more icon pushes the account button off the screen. An @if rather than
+      hiding it with css, so the component is never created and does not sit
+      there asking for an unread count nobody can see.
+    -->
+    @if (!isExtraSmall) {
+      <app-theme-toggle class="mx-1"></app-theme-toggle>
+      <notification-bell></notification-bell>
+    }
+    @if (sidekiqJobs.length) {
+      <button mat-icon-button (click)="showSidekiqJob()">
+        <div class="z-50" matBadgeSize="small" [matBadge]="sidekiqJobs.length"></div>
+        <mat-icon>cloud_sync_outline</mat-icon>
+      </button>
+    }
+    @if (currentUnit && currentUnitRole && currentUnitRole.tutorNoteCount > 0) {
+      <!-- TODO: Replace this with a more standardised notification system -->
+      <button mat-icon-button matTooltip="Moderation Notes" (click)="openTutorNotes()">
+        <mat-icon matBadgeSize="small" [matBadge]="currentUnitRole.tutorNoteCount"
+          >feedback</mat-icon
+        >
+      </button>
+    }
+    @if (currentUnit && !isTutorDiscussionRoute) {
+      <button
+        aria-label="Show my QR code"
+        class="qr-toolbar-action"
+        mat-icon-button
+        (click)="showMyQr()"
+      >
+        <mat-icon>qr_code_scanner</mat-icon>
+      </button>
+    }
+    @if (!isExtraSmall) {
+      <button
+        aria-label="Open your calendar subscription settings"
+        mat-icon-button
+        matTooltip="Subscribe to your calendar"
+        (click)="openCalendar()"
+      >
+        <mat-icon>calendar_month</mat-icon>
+      </button>
+    }
     @if (currentUser.role === 'Admin' || currentUser.role === 'Convenor') {
       <button
         #menuState="matMenuTrigger"
+        class="max-[599.98px]:hidden"
         mat-icon-button
-        fxShow.lt-sm="false"
-        fxShow.gt-md="true"
-        fxShow="true"
         [matMenuTriggerFor]="menu"
       >
         <mat-icon>admin_panel_settings</mat-icon>
@@ -48,41 +95,79 @@
     }
     <mat-menu #menu="matMenu">
       @if (currentUser.role === 'Admin') {
-        <button mat-menu-item uiSref="institutionsettings">
+        <button mat-menu-item routerLink="/admin/institution-settings">
           <mat-icon matListItemIcon>business</mat-icon>
           Institution Settings
         </button>
       }
-      <button mat-menu-item uiSref="admin/units">
+      <button mat-menu-item routerLink="/admin/units">
         <mat-icon matListItemIcon>school</mat-icon>
         Manage Units
       </button>
       @if (currentUser.role === 'Admin') {
-        <button mat-menu-item uiSref="admin/users">
+        <button mat-menu-item routerLink="/admin/users">
           <mat-icon matListItemIcon>people</mat-icon>
           Manage Users
         </button>
       }
     </mat-menu>
 
-    <button mat-button [matMenuTriggerFor]="menu2">
-      <user-icon [size]="32"></user-icon>
+    <button
+      aria-label="Open account menu"
+      class="account-menu-trigger"
+      mat-button
+      [matMenuTriggerFor]="menu2"
+      (menuOpened)="refreshMobileUnreadCount()"
+    >
+      <user-icon [size]="32" [user]="currentUser"></user-icon>
     </button>
     <mat-menu #menu2="matMenu">
-      <button mat-menu-item uiSref="edit_profile">
-        <mat-icon matListItemIcon aria-label="Edit profile">person</mat-icon>
-        Edit Profile
+      <!--
+        The way in on a phone. The bell is not rendered below xs because the
+        toolbar has no room for it, so without this there is no route to the
+        notifications at all on the size where people most want them. It carries
+        the count for the same reason a badge does: an entry that never looks
+        different is one nobody taps.
+      -->
+      @if (isExtraSmall) {
+        <button mat-menu-item routerLink="/notifications">
+          <mat-icon aria-label="Notifications" matListItemIcon>notifications</mat-icon>
+          Notifications
+          @if (unreadNotifications) {
+            <span class="notification-menu-count">{{ unreadNotifications }}</span>
+          }
+        </button>
+      }
+      @if (currentUnit && !isTutorDiscussionRoute) {
+        <button class="qr-account-menu-action" mat-menu-item (click)="showMyQr()">
+          <mat-icon aria-label="Show my QR code" matListItemIcon>qr_code_scanner</mat-icon>
+          Show my QR code
+        </button>
+      }
+      @if (demoMode.available) {
+        <button mat-menu-item routerLink="/demo-controls">
+          <mat-icon aria-label="Demo controls" matListItemIcon>science</mat-icon>
+          Demo controls
+        </button>
+      }
+      <button mat-menu-item routerLink="/unit-hub">
+        <mat-icon aria-hidden="true" matListItemIcon>campaign</mat-icon>
+        Unit Hub · announcements &amp; classes
+      </button>
+      <button mat-menu-item routerLink="/edit_profile">
+        <mat-icon aria-label="Edit profile" matListItemIcon>person</mat-icon>
+        My Profile
       </button>
       <button mat-menu-item (click)="openCalendar()">
-        <mat-icon matListItemIcon aria-label="Edit calendar">calendar_month</mat-icon>
+        <mat-icon aria-label="Edit calendar" matListItemIcon>calendar_month</mat-icon>
         Calendar
       </button>
       <button mat-menu-item (click)="openAboutModal()">
-        <mat-icon matListItemIcon aria-label="About">info</mat-icon>
+        <mat-icon aria-label="About" matListItemIcon>info</mat-icon>
         About
       </button>
       <button mat-menu-item (click)="signOut()">
-        <mat-icon matListItemIcon aria-label="Sign out">logout</mat-icon>
+        <mat-icon aria-label="Sign out" matListItemIcon>logout</mat-icon>
         Sign Out
       </button>
     </mat-menu>
diff --git a/src/app/common/header/header.component.scss b/src/app/common/header/header.component.scss
index 69b0af02fe..bcd5b66674 100644
--- a/src/app/common/header/header.component.scss
+++ b/src/app/common/header/header.component.scss
@@ -1,20 +1,78 @@
 .mat-toolbar {
   height: 72px;
-  background-color: white;
+  // THM-M01: was hardcoded white / #f5f5f5 / black, which never flipped in dark
+  // because component styles beat the global Material theme. Onto tokens: the light
+  // value of --ot-color-surface is #ffffff, so light is unchanged.
+  background-color: var(--ot-color-surface, #fff);
   box-shadow: 3px 4px 5px #0000000d;
   margin-bottom: 20px;
 
   &.inbox {
-    background-color: #F5F5F5;
+    background-color: var(--ot-color-page, #f5f5f5);
     box-shadow: none;
-    margin-bottom: 0px // nice drop shadow on bottom of toolbar
+    margin-bottom: 0px; // nice drop shadow on bottom of toolbar
   }
 
   font-family: 'Grotesk';
 
   .mat-icon {
-    color: black;
+    color: var(--ot-color-text, #000);
     transform: scale(1.5);
   }
+}
+
+// Dark only: sit the toolbar on the page tone so it is seamless, and carry the
+// separation on a hairline since the drop shadow is invisible on dark. Kept out of
+// light so no new divider line appears there.
+:host-context([data-ot-theme='dark']) .mat-toolbar {
+  background-color: var(--ot-color-page);
+  border-bottom: 1px solid var(--ot-color-divider);
+}
+
+// The unread count beside "Notifications" in the account menu, which is the only
+// way to the notifications on a phone. A pill rather than a matBadge: inside a
+// mat-menu-item a badge is positioned against the item's own box and ends up
+// over the label.
+.notification-menu-count {
+  background: #d93025;
+  border-radius: 999px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  margin-left: 8px;
+  padding: 3px 7px;
+}
+
+// Keep the secondary QR entry out of the account menu unless the toolbar is
+// narrow enough that the primary action would push the account avatar offscreen.
+.qr-account-menu-action {
+  display: none;
+}
+
+@media (max-width: 399px) {
+  .mat-toolbar {
+    padding-inline: 8px;
 
+    // Allow longer route labels to yield space to the account action instead
+    // of increasing the page's horizontal scroll width.
+    task-dropdown {
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .qr-toolbar-action {
+    display: none;
+  }
+
+  .qr-account-menu-action {
+    display: flex;
+  }
+
+  .account-menu-trigger {
+    min-width: 48px;
+    padding-inline: 8px;
+  }
 }
diff --git a/src/app/common/header/header.component.spec.ts b/src/app/common/header/header.component.spec.ts
index bc07fb1f57..d701515e16 100644
--- a/src/app/common/header/header.component.spec.ts
+++ b/src/app/common/header/header.component.spec.ts
@@ -1,63 +1,309 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatMenuModule } from '@angular/material/menu';
-import { BehaviorSubject, Subject } from 'rxjs';
-import { Project, Unit, UnitRole } from 'src/app/api/models/doubtfire-model';
-import { GlobalStateService, ViewType } from 'src/app/projects/states/index/global-state.service';
-import { CheckForUpdateService } from 'src/app/sessions/service-worker-updater/check-for-update.service';
-import { IsActiveUnitRole } from '../pipes/is-active-unit-role.pipe';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Router} from '@angular/router';
+import {Observable, defer, of} from 'rxjs';
+import {AuthenticationService, Unit} from 'src/app/api/models/doubtfire-model';
+import {NotificationService} from 'src/app/api/services/notification.service';
+import {SidekiqJobService} from 'src/app/api/services/sidekiq-job.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {CheckForUpdateService} from 'src/app/sessions/service-worker-updater/check-for-update.service';
+import {AboutDoubtfireModal} from '../modals/about-doubtfire-modal/about-doubtfire-modal.component';
+import {CalendarModalService} from '../modals/calendar-modal/calendar-modal.service';
+import {QrModalService} from '../modals/qr-modal/qr-modal.service';
+import {SidekiqJobsModalService} from '../modals/sidekiq-jobs-modal/sidekiq-jobs-modal.service';
+import {TutorNotesModalService} from '../modals/tutor-notes-modal/tutor-notes-modal.service';
+import {IsActiveUnitRole} from '../pipes/is-active-unit-role.pipe';
+import {HeaderComponent} from './header.component';
 
-import { HeaderComponent } from './header.component';
+const emptyProvider = {};
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
   let fixture: ComponentFixture<HeaderComponent>;
-  // let currentUserStub: jasmine.SpyObj<any>;
-  // let calendarModalStub: jasmine.SpyObj<any>;
-  // let aboutDoubtfireModalStub: jasmine.SpyObj<any>;
-  let isActiveUnitRoleStub: Partial<IsActiveUnitRole>;
-  let checkForUpdateServiceStub: Partial<CheckForUpdateService>;
-  let globalStateServiceStub: Partial<GlobalStateService>;
-
-  beforeEach(waitForAsync(() => {
-    const showHideHeader = new Subject<boolean>();
-    const unitRolesSubject = new BehaviorSubject<any>(null);
-    const projectsSubject = new BehaviorSubject<any>(null);
-    const currentViewAndEntitySubject$ = new BehaviorSubject<{ viewType: ViewType; entity: Unit | Project | UnitRole }>(
-      null
-    );
-
-    // currentUserStub = {
-    //   role: 'tutor',
-    // };
-
-    globalStateServiceStub = {
-      showHideHeader: showHideHeader,
-      unitRolesSubject: unitRolesSubject,
-      projectsSubject: projectsSubject,
-      currentViewAndEntitySubject$: currentViewAndEntitySubject$,
+
+  let refreshSubscribed: boolean;
+
+  let authenticationService: {
+    isAuthenticated: ReturnType<typeof vi.fn>;
+  };
+
+  let breakpointObserver: {
+    isMatched: ReturnType<typeof vi.fn>;
+    observe: ReturnType<typeof vi.fn>;
+  };
+
+  let notificationService: {
+    unreadCount$: Observable<number>;
+    refreshUnreadCount: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(async () => {
+    refreshSubscribed = false;
+
+    authenticationService = {
+      isAuthenticated: vi.fn().mockReturnValue(true),
+    };
+
+    breakpointObserver = {
+      isMatched: vi.fn().mockReturnValue(true),
+      observe: vi.fn().mockReturnValue(of({matches: false, breakpoints: {}})),
     };
 
-    TestBed.configureTestingModule({
+    notificationService = {
+      unreadCount$: of(0),
+      refreshUnreadCount: vi.fn(() =>
+        defer(() => {
+          refreshSubscribed = true;
+          return of(0);
+        }),
+      ),
+    };
+
+    await TestBed.configureTestingModule({
       declarations: [HeaderComponent],
-      imports: [MatMenuModule],
       providers: [
-        // { provide: currentUser, useValue: currentUserStub },
-        // { provide: calendarModal, useValue: calendarModalStub },
-        // { provide: aboutDoubtfireModal, useValue: aboutDoubtfireModalStub },
-        { provide: IsActiveUnitRole, useValue: isActiveUnitRoleStub },
-        { provide: CheckForUpdateService, useValue: checkForUpdateServiceStub },
-        { provide: GlobalStateService, useValue: globalStateServiceStub },
+        {provide: CalendarModalService, useValue: emptyProvider},
+        {provide: AboutDoubtfireModal, useValue: emptyProvider},
+        {provide: IsActiveUnitRole, useValue: emptyProvider},
+        {provide: CheckForUpdateService, useValue: emptyProvider},
+        {provide: GlobalStateService, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: AuthenticationService, useValue: authenticationService},
+        {provide: BreakpointObserver, useValue: breakpointObserver},
+        {provide: DoubtfireConstants, useValue: emptyProvider},
+        {provide: NotificationService, useValue: notificationService},
+        {provide: SidekiqJobService, useValue: emptyProvider},
+        {provide: SidekiqJobsModalService, useValue: emptyProvider},
+        {provide: QrModalService, useValue: emptyProvider},
+        {provide: Router, useValue: emptyProvider},
+        {provide: TutorNotesModalService, useValue: emptyProvider},
       ],
-    }).compileComponents();
-  }));
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(HeaderComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('refreshes the unread count when the mobile account menu opens', () => {
+    component.refreshMobileUnreadCount();
+
+    expect(notificationService.refreshUnreadCount).toHaveBeenCalledTimes(1);
+    expect(refreshSubscribed).toBe(true);
+  });
+
+  it('does not refresh the mobile count on larger screens', () => {
+    breakpointObserver.isMatched.mockReturnValue(false);
+
+    component.refreshMobileUnreadCount();
+
+    expect(notificationService.refreshUnreadCount).not.toHaveBeenCalled();
+  });
+
+  it('does not refresh the mobile count after sign out', () => {
+    authenticationService.isAuthenticated.mockReturnValue(false);
+
+    component.refreshMobileUnreadCount();
+
+    expect(notificationService.refreshUnreadCount).not.toHaveBeenCalled();
+  });
+
+  describe('calendar entry point', () => {
+    const calendarButtonSelector = 'button[aria-label="Open your calendar subscription settings"]';
+    let calendarModalServiceStub: {show: ReturnType<typeof vi.fn>};
+    let breakpointObserverStub: {
+      isMatched: ReturnType<typeof vi.fn>;
+      observe: ReturnType<typeof vi.fn>;
+    };
+
+    beforeEach(async () => {
+      TestBed.resetTestingModule();
+      calendarModalServiceStub = {show: vi.fn()};
+      breakpointObserverStub = {
+        isMatched: vi.fn().mockReturnValue(false),
+        observe: vi.fn().mockReturnValue(of({matches: false, breakpoints: {}})),
+      };
+
+      await TestBed.configureTestingModule({
+        declarations: [HeaderComponent],
+        imports: [
+          MatButtonModule,
+          MatIconModule,
+          MatMenuModule,
+          MatToolbarModule,
+          MatTooltipModule,
+          NoopAnimationsModule,
+        ],
+        providers: [
+          {provide: CalendarModalService, useValue: calendarModalServiceStub},
+          {provide: AboutDoubtfireModal, useValue: emptyProvider},
+          {provide: IsActiveUnitRole, useValue: emptyProvider},
+          {provide: CheckForUpdateService, useValue: emptyProvider},
+          {
+            provide: GlobalStateService,
+            useValue: {
+              showHideHeader: of(true),
+              unitRolesSubject: of(null),
+              projectsSubject: of(null),
+              currentViewAndEntitySubject$: of(undefined),
+            },
+          },
+          {provide: UserService, useValue: {currentUser: {role: 'Student', username: 'student_1'}}},
+          {provide: AuthenticationService, useValue: emptyProvider},
+          {provide: BreakpointObserver, useValue: breakpointObserverStub},
+          {
+            provide: NotificationService,
+            useValue: {unreadCount$: of(0), refreshUnreadCount: vi.fn(() => of(0))},
+          },
+          {provide: DemoModeStore, useValue: {available: false}},
+          {
+            provide: DoubtfireConstants,
+            useValue: {
+              ExternalName: of('Doubtfire'),
+              LogoSettings: of({
+                hasLogo: false,
+                logoLinkUrl: '/assets/images/institution-logo.png',
+                logoUrl: null,
+              }),
+            },
+          },
+          {provide: SidekiqJobService, useValue: {sidekiqJobsSubject: of([])}},
+          {provide: SidekiqJobsModalService, useValue: emptyProvider},
+          {provide: QrModalService, useValue: emptyProvider},
+          {provide: Router, useValue: {url: '/projects/1/dashboard'}},
+          {provide: TutorNotesModalService, useValue: emptyProvider},
+        ],
+        schemas: [NO_ERRORS_SCHEMA],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(HeaderComponent);
+      component = fixture.componentInstance;
+    });
+
+    it('renders the calendar button in the header', () => {
+      fixture.detectChanges();
+
+      const button = fixture.nativeElement.querySelector(calendarButtonSelector);
+
+      expect(button).not.toBeNull();
+    });
+
+    it('keeps the compact mobile toolbar clear and leaves calendar access in the account menu', () => {
+      breakpointObserverStub.isMatched.mockReturnValue(true);
+      fixture.detectChanges();
+
+      const button = fixture.nativeElement.querySelector(calendarButtonSelector);
+
+      expect(button).toBeNull();
+    });
+
+    it('keeps the theme toggle and notification bell together as the toolbar changes size', () => {
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('app-theme-toggle')).not.toBeNull();
+      expect(fixture.nativeElement.querySelector('notification-bell')).not.toBeNull();
+
+      breakpointObserverStub.isMatched.mockReturnValue(true);
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('app-theme-toggle')).toBeNull();
+      expect(fixture.nativeElement.querySelector('notification-bell')).toBeNull();
+
+      breakpointObserverStub.isMatched.mockReturnValue(false);
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('app-theme-toggle')).not.toBeNull();
+      expect(fixture.nativeElement.querySelector('notification-bell')).not.toBeNull();
+    });
+
+    it('clicking the calendar button invokes the same handler the avatar menu Calendar item uses', () => {
+      const openCalendarSpy = vi.spyOn(component, 'openCalendar');
+      fixture.detectChanges();
+
+      const button: HTMLButtonElement = fixture.nativeElement.querySelector(calendarButtonSelector);
+      button.click();
+
+      expect(openCalendarSpy).toHaveBeenCalledOnce();
+      expect(calendarModalServiceStub.show).toHaveBeenCalledOnce();
+    });
+
+    it('keeps the QR action in the account menu when the narrow toolbar action is hidden', async () => {
+      fixture.detectChanges();
+      await fixture.whenStable();
+      component.currentUnit = {id: 1} as Unit;
+      const showMyQrSpy = vi.spyOn(component, 'showMyQr').mockImplementation(() => undefined);
+      fixture.detectChanges();
+
+      const toolbarAction: HTMLButtonElement =
+        fixture.nativeElement.querySelector('.qr-toolbar-action');
+      const accountMenuTrigger: HTMLButtonElement =
+        fixture.nativeElement.querySelector('.account-menu-trigger');
+
+      expect(toolbarAction).not.toBeNull();
+      expect(accountMenuTrigger).not.toBeNull();
+
+      accountMenuTrigger.click();
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const menuAction: HTMLButtonElement = document.querySelector('.qr-account-menu-action');
+      expect(menuAction).not.toBeNull();
+
+      menuAction.click();
+      expect(showMyQrSpy).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('uniqueUnitRoles', () => {
+    // Treat every role as active so the test targets the dedup logic only.
+    beforeEach(() => {
+      component['isActiveUnitRole'] = {transform: (roles: unknown[]) => roles} as never;
+    });
+
+    const roleFor = (unitId: number, role = 'Student') => ({unit: {id: unitId}, role}) as never;
+
+    it('keeps a role when its unit appears once', () => {
+      const roles = [roleFor(1), roleFor(2)];
+
+      const result = component.uniqueUnitRoles(roles);
+
+      expect(result).toHaveLength(2);
+    });
+
+    it('drops both non-tutor roles when a unit appears more than once', () => {
+      const roles = [roleFor(1), roleFor(1), roleFor(2)];
+
+      const result = component.uniqueUnitRoles(roles).map((r: {unit: {id: number}}) => r.unit.id);
+
+      expect(result).toEqual([2]);
+    });
+
+    it('always keeps a tutor role even when the unit is duplicated', () => {
+      const roles = [roleFor(1, 'Tutor'), roleFor(1)];
+
+      const result = component.uniqueUnitRoles(roles);
+
+      expect(result).toHaveLength(1);
+      expect((result[0] as {role: string}).role).toBe('Tutor');
+    });
+  });
 });
diff --git a/src/app/common/header/header.component.ts b/src/app/common/header/header.component.ts
index a07349c94e..2b9c910535 100644
--- a/src/app/common/header/header.component.ts
+++ b/src/app/common/header/header.component.ts
@@ -1,22 +1,39 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { aboutDoubtfireModal, calendarModal } from 'src/app/ajs-upgraded-providers';
-import { CheckForUpdateService } from 'src/app/sessions/service-worker-updater/check-for-update.service';
-import { GlobalStateService, ViewType } from 'src/app/projects/states/index/global-state.service';
-import { IsActiveUnitRole } from '../pipes/is-active-unit-role.pipe';
-import { UserService } from 'src/app/api/services/user.service';
-import { AuthenticationService, Project, Task, Unit, UnitRole, User } from 'src/app/api/models/doubtfire-model';
-import { Subscription } from 'rxjs';
-import { MediaObserver } from 'ng-flex-layout';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {Subscription, asapScheduler, observeOn} from 'rxjs';
+import {
+  AuthenticationService,
+  Project,
+  Task,
+  Unit,
+  UnitRole,
+  User,
+} from 'src/app/api/models/doubtfire-model';
+import {NotificationService} from 'src/app/api/services/notification.service';
+import {SidekiqJobEntry, SidekiqJobService} from 'src/app/api/services/sidekiq-job.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {DoubtfireConstants, LogoSettings} from 'src/app/config/constants/doubtfire-constants';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+import {CheckForUpdateService} from 'src/app/sessions/service-worker-updater/check-for-update.service';
+import {AboutDoubtfireModal} from '../modals/about-doubtfire-modal/about-doubtfire-modal.component';
+import {CalendarModalService} from '../modals/calendar-modal/calendar-modal.service';
+import {QrModalService} from '../modals/qr-modal/qr-modal.service';
+import {SidekiqJobsModalService} from '../modals/sidekiq-jobs-modal/sidekiq-jobs-modal.service';
+import {TutorNotesModalService} from '../modals/tutor-notes-modal/tutor-notes-modal.service';
+import {IsActiveUnitRole} from '../pipes/is-active-unit-role.pipe';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class HeaderComponent implements OnInit, OnDestroy {
   task: Task;
-  data: { isTutor: boolean } = {
+  data: {isTutor: boolean} = {
     isTutor: false,
   };
   unitRoles: UnitRole[];
@@ -30,84 +47,195 @@ export class HeaderComponent implements OnInit, OnDestroy {
   currentView: ViewType;
   showHeader = true;
 
+  logoSettings: LogoSettings = {
+    hasLogo: false,
+    logoLinkUrl: '/assets/images/institution-logo.png',
+    logoUrl: null,
+  };
   private subscriptions: Subscription[] = [];
 
+  sidekiqJobs: SidekiqJobEntry[] = [];
+
+  /**
+   * How many notifications are unread, for the account menu on a phone.
+   *
+   * The bell is not rendered below xs, because this toolbar does not wrap and
+   * there is no room for it, so the account menu is the only way in on a phone
+   * and it needs to say there is something waiting.
+   *
+   * Read here rather than in notification-bell, because that component is the
+   * thing that does not exist at this size.
+   */
+  unreadNotifications = 0;
+
   constructor(
-    @Inject(calendarModal) private CalendarModal,
-    @Inject(aboutDoubtfireModal) private AboutDoubtfireModal,
+    private calendarModal: CalendarModalService,
+    private aboutDoubtfireModal: AboutDoubtfireModal,
     private isActiveUnitRole: IsActiveUnitRole,
     private checkForUpdateService: CheckForUpdateService,
     protected globalState: GlobalStateService,
     private userService: UserService,
     private authService: AuthenticationService,
-    protected media: MediaObserver,
+    private breakpointObserver: BreakpointObserver,
+    protected doubtfireConstants: DoubtfireConstants,
+    private notificationService: NotificationService,
+    private sidekiqJobService: SidekiqJobService,
+    private sidekiqJobsModalService: SidekiqJobsModalService,
+    private qrModalService: QrModalService,
+    private router: Router,
+    private tutorNotesModal: TutorNotesModalService,
+    readonly demoMode: DemoModeStore,
   ) {}
 
+  public externalName: string;
+
+  protected get isExtraSmall(): boolean {
+    return this.breakpointObserver.isMatched('(max-width: 599.98px)');
+  }
+
   ngOnInit(): void {
+    this.doubtfireConstants.ExternalName.subscribe((externalName) => {
+      this.externalName = externalName;
+    });
     this.subscriptions.push(
       this.globalState.showHideHeader.subscribe({
         next: (shouldShow) => {
           this.showHeader = shouldShow;
         },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        error: (err) => {},
+
+        error: (err) => {
+          console.log(`Error showing header: ${err}`);
+        },
       }),
     );
 
     this.subscriptions.push(
       this.globalState.unitRolesSubject.subscribe({
         next: (unitRoles) => {
-          if (unitRoles == null) return; // might be signing out, or the data has been cleared
+          if (unitRoles == null) {
+            return;
+          } // might be signing out, or the data has been cleared
           this.unitRoles = unitRoles;
 
-          this.filteredUnitRoles = this.isActiveUnitRole
-            .transform(this.unitRoles)
-            .filter((role) => this.isUniqueRole(role));
+          this.filteredUnitRoles = this.uniqueUnitRoles(this.unitRoles);
+        },
+        error: (err) => {
+          console.log(`Error fetching unit roles: ${err}`);
         },
-        error: (err) => {},
       }),
     );
 
     this.subscriptions.push(
       this.globalState.projectsSubject.subscribe({
         next: (projects) => {
-          if (projects == null) return;
-          this.projects = projects.filter((project) => project.unit.myRole === 'Student');
+          if (!projects) {
+            return;
+          }
+          this.projects = projects.filter((project) => project?.unit?.myRole === 'Student');
+        },
+        error: (err) => {
+          console.log(`Error fetching projects: ${err}`);
         },
-        error: (err) => {},
       }),
     );
 
     // get the current active unit or project
     this.subscriptions.push(
-      this.globalState.currentViewAndEntitySubject$.subscribe({
+      this.globalState.currentViewAndEntitySubject$.pipe(observeOn(asapScheduler)).subscribe({
         next: (currentViewAndEntity) => {
           this.currentView = currentViewAndEntity?.viewType;
 
           if (this.currentView == ViewType.PROJECT) {
             this.updateSelectedProject(currentViewAndEntity.entity as Project);
           } else if (this.currentView == ViewType.UNIT) {
-            this.updateSelectedUnitRole(currentViewAndEntity.entity as UnitRole);
+            if (currentViewAndEntity.entity instanceof UnitRole) {
+              this.updateSelectedUnitRole(currentViewAndEntity.entity as UnitRole);
+            } else if (currentViewAndEntity.entity instanceof Unit) {
+              this.updateSelectedUnit(currentViewAndEntity.entity as Unit);
+            }
           } else {
             this.currentUnit = null;
             this.currentProject = null;
           }
         },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        error: (_err) => {},
+
+        error: (err) => {
+          console.log(`Error on switching view and entity: ${err}`);
+        },
+      }),
+    );
+
+    // Subscribe to logo changes
+    this.subscriptions.push(
+      this.doubtfireConstants.LogoSettings.subscribe({
+        next: (settings) => {
+          this.logoSettings = settings;
+        },
+        error: (err) => {
+          console.log(`Error getting settings: ${err}`);
+        },
+      }),
+    );
+
+    this.sidekiqJobService.sidekiqJobsSubject.subscribe((jobs) => {
+      this.sidekiqJobs = [...jobs];
+    });
+
+    this.subscriptions.push(
+      this.notificationService.unreadCount$.subscribe((count) => {
+        this.unreadNotifications = count;
       }),
     );
   }
 
+  showMyQr() {
+    const hostName = this.doubtfireConstants.HOST_URL;
+
+    const projectView =
+      this.currentProject &&
+      this.currentProject.student &&
+      this.currentProject.student.username !== this.currentUser.username;
+
+    const username = projectView ? this.currentProject.student.username : this.currentUser.username;
+    if (projectView || this.currentUser.role === 'Student') {
+      const url = `${hostName}/tutor-discussion?unitId=${this.currentUnit.id}&username=${username}`;
+      this.qrModalService.show(
+        url,
+        'Display this QR code during your class so your tutor can scan it to view your submissions and mark your tasks as complete.',
+        projectView ? `Viewing QR for ${this.currentProject.student.name}` : '',
+        true,
+      );
+    } else {
+      this.router.navigate(['/units', this.currentUnit.id, 'discussion']);
+    }
+  }
+
+  public get isTutorDiscussionRoute(): boolean {
+    return this.router.url.split('?')[0].endsWith('/discussion');
+  }
+
+  showSidekiqJob() {
+    this.sidekiqJobsModalService.show();
+  }
+
   ngOnDestroy(): void {
     this.subscriptions.forEach((sub) => sub.unsubscribe());
   }
 
-  isUniqueRole = (unit) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const units = this.unitRoles.filter((role: any) => role.unit.id === unit.unit.id);
-    return units.length == 1 || unit.role == 'Tutor';
-  };
+  // Keep one unit role per unit, plus every tutor role. Count the roles per
+  // unit once up front rather than rescanning unitRoles for each role, which
+  // was quadratic and reran on every unit-role cache emission (FEPERF-19).
+  uniqueUnitRoles(unitRoles: UnitRole[]): UnitRole[] {
+    const countByUnit: Map<number | undefined, number> = new Map();
+    unitRoles.forEach((role) => {
+      const id = role.unit?.id;
+      countByUnit.set(id, (countByUnit.get(id) ?? 0) + 1);
+    });
+
+    return this.isActiveUnitRole
+      .transform(unitRoles)
+      .filter((role) => countByUnit.get(role.unit?.id) === 1 || role.role === 'Tutor');
+  }
 
   updateSelectedProject(project: Project): void {
     this.currentProject = project;
@@ -123,16 +251,40 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.currentUnit = unitRole.unit;
   }
 
+  updateSelectedUnit(unit: Unit): void {
+    this.currentUnit = unit;
+    this.currentProject = null;
+
+    this.currentUnitRole = unit.staff.find(
+      (ur) => ur.user?.id === this.userService.currentUser?.id,
+    );
+
+    if (this.currentUnitRole) {
+      // Re-map Unit onto UnitRole object
+      this.currentUnitRole.unit = unit;
+    }
+  }
+
   update(): void {
     this.checkForUpdateService.checkForUpdate();
   }
 
   openAboutModal(): void {
-    this.AboutDoubtfireModal.show();
+    this.aboutDoubtfireModal.show();
+  }
+
+  public refreshMobileUnreadCount(): void {
+    if (!this.isExtraSmall || !this.authService.isAuthenticated()) {
+      return;
+    }
+
+    this.notificationService.refreshUnreadCount().subscribe({
+      error: () => undefined,
+    });
   }
 
   openCalendar(): void {
-    this.CalendarModal.show();
+    this.calendarModal.show(null);
   }
 
   signOut(): void {
@@ -142,4 +294,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   get currentUser(): User {
     return this.userService.currentUser;
   }
+
+  openTutorNotes() {
+    this.tutorNotesModal.show(null, this.currentUnitRole);
+  }
 }
diff --git a/src/app/common/header/notification-bell/notification-bell.component.html b/src/app/common/header/notification-bell/notification-bell.component.html
new file mode 100644
index 0000000000..852b115e0c
--- /dev/null
+++ b/src/app/common/header/notification-bell/notification-bell.component.html
@@ -0,0 +1,130 @@
+<button
+  class="notification-bell-button"
+  mat-icon-button
+  matTooltip="Notifications"
+  [attr.aria-label]="bellLabel"
+  [matBadge]="unreadCount"
+  [matBadgeHidden]="unreadCount === 0"
+  [matMenuTriggerFor]="notificationMenu"
+  (menuOpened)="onMenuOpened()"
+>
+  <mat-icon class="notification-bell-icon">notifications</mat-icon>
+</button>
+
+<mat-menu #notificationMenu="matMenu" class="notification-dropdown-menu">
+  <div class="flex items-center justify-between pr-2">
+    <h2 class="my-2 ml-3.5" mat-subheader>Notifications</h2>
+    @if (unreadCount) {
+      <button class="notification-mark-all" mat-menu-item (click)="markAllRead($event)">
+        Mark all read
+      </button>
+    }
+  </div>
+
+  <!--
+    Rows win whenever there are any. A refresh that fails while the list is
+    already on screen leaves the old list up, which is stale but true, and is
+    better than replacing something readable with an apology. The apology goes
+    above it instead, because a list nobody could refresh looks exactly like a
+    list nothing has happened to.
+  -->
+  @if (recent.length) {
+    @if (loadFailed) {
+      <p class="notification-stale mx-4 my-1">
+        These may be out of date, the last refresh did not work.
+      </p>
+    }
+
+    @for (notification of recent; track notification.id) {
+      <div class="notification-item flex w-full items-center">
+        <!--
+          A button and not a div. MatMenu's key manager only moves focus, it
+          does not synthesise a click, so on a div the arrow keys reach the row
+          and then Enter does nothing at all.
+
+          The delete button is a sibling of the row rather than sitting inside
+          it, because a button inside a button is not valid html and the browser
+          unnests it.
+        -->
+        <button
+          class="notification-row grow"
+          mat-menu-item
+          [attr.aria-label]="rowLabel(notification)"
+          (click)="open(notification)"
+        >
+          <!--
+            The same three parts, in the same order, as a row on the full page.
+            Both lay themselves out with .notification-line rather than letting
+            Material do it, because mat-menu-item and mat-list-item wrap their
+            content differently and the two would never line up.
+          -->
+          <span class="notification-line">
+            <!--
+              The category, as a colour and a glyph. notificationType is all the
+              api sends, so this is five categories and not one icon per event.
+            -->
+            <span class="notification-glyph" [class]="'tone-' + toneFor(notification)">
+              <mat-icon>{{ iconFor(notification) }}</mat-icon>
+            </span>
+
+            <span class="notification-body">
+              <span class="notification-message" [class.unread]="!notification.isRead">{{
+                notification.message
+              }}</span>
+              <span class="notification-time">{{ timeAgo(notification) }}</span>
+            </span>
+
+            <!--
+              Kept in the layout when read rather than removed, so the delete
+              button beside it does not shuffle sideways row by row. The state
+              it carries is in the button's aria-label, since a dot is not
+              something everyone can see.
+            -->
+            <span
+              aria-hidden="true"
+              class="notification-unread-dot"
+              [class.is-read]="notification.isRead"
+            ></span>
+          </span>
+        </button>
+        <button
+          class="notification-delete"
+          mat-menu-item
+          matTooltip="Delete"
+          [attr.aria-label]="'Delete notification: ' + notification.message"
+          (click)="confirmDelete(notification, $event)"
+        >
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+    }
+
+    <!--
+      A button and not a routerLink, so this component keeps needing exactly one
+      thing from the router and its spec can keep handing it a stub.
+    -->
+    <button class="notification-see-all" mat-menu-item (click)="seeAll()">
+      See all notifications
+    </button>
+  } @else if (loading) {
+    <div class="flex items-center gap-3 px-4 py-3">
+      <mat-spinner [diameter]="20"></mat-spinner>
+      <span class="notification-empty">Loading your notifications</span>
+    </div>
+  } @else if (loadFailed) {
+    <!--
+      Not the empty state. "You have nothing" and "we could not find out" look
+      the same on screen and mean opposite things, and only one of them is worth
+      opening the menu again for.
+    -->
+    <div class="px-4 py-3">
+      <p class="notification-empty m-0">We could not load your notifications.</p>
+      <p class="notification-time m-0">Close this and open it again to try once more.</p>
+    </div>
+  } @else {
+    <div class="px-4 py-3">
+      <p class="notification-empty m-0">You are all caught up.</p>
+      <p class="notification-time m-0">Anything new will show up here.</p>
+    </div>
+  }
+</mat-menu>
diff --git a/src/app/common/header/notification-bell/notification-bell.component.scss b/src/app/common/header/notification-bell/notification-bell.component.scss
new file mode 100644
index 0000000000..f382a97f47
--- /dev/null
+++ b/src/app/common/header/notification-bell/notification-bell.component.scss
@@ -0,0 +1,233 @@
+// The menu panel is rendered into the cdk overlay container, outside this
+// component's element, so component scoped styles never reach it. ::ng-deep on
+// the panel class is how unit-dropdown next door sizes its own menu. Everything
+// below that line is inside the component's own template, overlay or not, so it
+// keeps its encapsulation attribute and needs no ::ng-deep.
+//
+// The width is a preference and not a floor. Material's own panel sets
+// max-width: 280px, which is what this is here to override, but a fixed
+// min-width would make the panel wider than a 320px phone and push the page
+// sideways.
+::ng-deep .notification-dropdown-menu.mat-mdc-menu-panel {
+  border-radius: 16px;
+  max-width: min(380px, calc(100vw - 32px));
+  min-width: 0;
+  // Material's own container shape is 4px. Without clipping, the first and last
+  // rows square the corners back off again on hover.
+  overflow: hidden;
+  width: 380px;
+}
+
+// Put the count on the bell.
+//
+// Material anchors the badge at the host's outside top right corner, with
+// `bottom: 100%` and `left: 100%`, and then pulls it back with a negative
+// margin from one of these two tokens. Which token depends on whether the badge
+// overlaps, so both are set: leaving either at the theme's -11px leaves the
+// number sitting beside the bell rather than on it, which is what the default
+// looks like on a 40px icon button.
+//
+// matBadgeSize="small" is also gone from the template. It is a 16px container,
+// fine for a one digit job count and cramped for a two digit unread count; the
+// default 22px is the readable one, and a bigger badge needs pulling in further
+// to sit on the glyph.
+:host {
+  --mat-badge-container-offset: -20px -20px;
+  --mat-badge-container-overlap-offset: -20px;
+
+  // The toolbar is a plain flex row with no wrapping, so anything in it that
+  // can grow pushes the rest towards the edge. This one never does.
+  //
+  // The header drops this component entirely below xs, where there is no room
+  // for it at all. See the comment beside it in header.component.html.
+  flex: 0 0 auto;
+}
+
+// A ring in the toolbar's own colour, so the badge cuts itself out from the
+// glyph it sits on top of.
+//
+// A box-shadow and not a border. Material sets box-sizing: border-box on the
+// badge and gives it a fixed 22px box with a 22px line-height, so a 2px border
+// takes the content box down to 18px while the line box stays 22 and the digit
+// is shoved off centre. A shadow draws the same ring and costs no layout.
+:host ::ng-deep .mat-badge-content {
+  box-shadow: 0 0 0 2px var(--ot-color-page);
+  font-weight: 700;
+}
+
+// mat-menu-item is built for one line of text. It pins itself to 48px, and it
+// wraps whatever you put in it in a .mat-mdc-menu-item-text span that clips and
+// refuses to wrap. That span is Material's own, so it carries no encapsulation
+// attribute and ::ng-deep is the only way to reach it. Without this the row lays
+// itself out inside a box that is not the width it looks, which is what pushes
+// the glyph off centre.
+.notification-row.mat-mdc-menu-item {
+  height: auto;
+  line-height: 1.35;
+  min-height: 0;
+  padding: 12px 10px 12px 16px;
+  white-space: normal;
+
+  ::ng-deep .mat-mdc-menu-item-text {
+    display: block;
+    overflow: visible;
+    white-space: normal;
+    width: 100%;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Shared row shape. The full notifications page carries a copy of this block,
+// deliberately: the two components are on sibling branches so neither can
+// import from the other yet, and a row has to look the same in both places.
+// Both copies belong in one stylesheet once they have merged.
+// ---------------------------------------------------------------------------
+.notification-line {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+
+.notification-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  text-align: left;
+}
+
+.notification-glyph {
+  align-items: center;
+  border-radius: 50%;
+  display: inline-flex;
+  flex: 0 0 36px;
+  height: 36px;
+  justify-content: center;
+  width: 36px;
+
+  // mat-icon ships as a 24px inline-block with a 24px line box, and picks up
+  // margins from Material's list and menu classes. Left alone the glyph is
+  // nearly as wide as the circle and sits low and left in it, because an inline
+  // box aligns on its baseline and the margins push it. Making it a block with
+  // a line-height equal to its own height and no margin takes both out, and the
+  // flex centring above then does what it looks like it does.
+  .mat-icon {
+    // Explicitly, not by inheritance. Material colours icons inside a menu item
+    // with .mat-mdc-menu-item .mat-icon { color: ... }, so a tone set on the
+    // circle around it is simply overridden and the glyph comes out black in
+    // the dropdown while the same glyph is coloured on the page.
+    color: inherit;
+    display: block;
+    font-size: 20px;
+    height: 20px;
+    line-height: 20px;
+    margin: 0;
+    overflow: visible;
+    width: 20px;
+  }
+
+  // One pair per category in Notification::TYPES. The tints are the same hue as
+  // the glyph at low alpha, so the circle reads as a wash rather than a second
+  // colour to remember.
+  &.tone-feedback {
+    background: rgba(57, 57, 255, 0.12);
+    color: #2a2ad6;
+  }
+
+  &.tone-task {
+    background: rgba(199, 119, 0, 0.12);
+    color: #b26a00;
+  }
+
+  &.tone-portfolio {
+    background: rgba(123, 63, 242, 0.12);
+    color: #7b3ff2;
+  }
+
+  &.tone-extension {
+    background: rgba(31, 138, 76, 0.12);
+    color: #1f8a4c;
+  }
+
+  &.tone-general {
+    background: rgba(95, 99, 104, 0.12);
+    color: #5f6368;
+  }
+}
+
+.notification-message {
+  color: var(--ot-color-text);
+  font-size: 14px;
+  line-height: 1.35;
+  white-space: normal;
+
+  // Unread is carried by weight and by the dot, not by colour on its own, and
+  // the row's aria-label says it in words for anyone who can see neither.
+  &.unread {
+    font-weight: 600;
+  }
+}
+
+.notification-unread-dot {
+  background: var(--ot-color-primary);
+  border-radius: 50%;
+  flex: 0 0 7px;
+  height: 7px;
+  width: 7px;
+
+  &.is-read {
+    visibility: hidden;
+  }
+}
+
+.notification-time,
+.notification-stale {
+  color: var(--ot-color-text-muted);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.notification-empty {
+  color: var(--ot-color-text-muted);
+  font-size: 14px;
+}
+
+.notification-mark-all.mat-mdc-menu-item {
+  flex: 0 0 auto;
+  font-size: 12px;
+  min-height: 48px;
+  padding: 0 12px;
+  width: auto;
+}
+
+.notification-see-all {
+  font-size: 12px;
+}
+
+// Mark all read and Delete are real menu items so MatMenu's arrow-key manager
+// can reach them. Keep Delete compact beside the notification row while
+// retaining a 48px keyboard and pointer target.
+.notification-delete.mat-mdc-menu-item {
+  flex: 0 0 48px;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0;
+  width: 48px;
+
+  // MatMenu renders an empty text wrapper after an icon-only item. Remove it
+  // so the close icon can sit in the true centre of the button.
+  ::ng-deep .mat-mdc-menu-item-text {
+    display: none;
+  }
+
+  .mat-icon {
+    display: block;
+    font-size: 18px;
+    height: 18px;
+    line-height: 18px;
+    margin: 0;
+    width: 18px;
+  }
+}
diff --git a/src/app/common/header/notification-bell/notification-bell.component.spec.ts b/src/app/common/header/notification-bell/notification-bell.component.spec.ts
new file mode 100644
index 0000000000..21cb040f50
--- /dev/null
+++ b/src/app/common/header/notification-bell/notification-bell.component.spec.ts
@@ -0,0 +1,804 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatBadge, MatBadgeModule} from '@angular/material/badge';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {NavigationEnd, Router} from '@angular/router';
+import {BehaviorSubject, Observable, Subject, config, defer, of, throwError} from 'rxjs';
+import {Notification} from 'src/app/api/models/notification';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {NotificationRouteService} from 'src/app/api/services/notification-route.service';
+import {NotificationService} from 'src/app/api/services/notification.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {ConfirmationModalService} from '../../modals/confirmation-modal/confirmation-modal.service';
+import {NotificationBellComponent} from './notification-bell.component';
+
+/**
+ * The bell has three jobs and each one is a way for it to be wrong: show the
+ * number the service holds, show nothing at all when that number is zero, and
+ * ask again as the user moves around the app. The two after those cover the
+ * ones that are easy to leave out, a count request going out after sign out and
+ * one still going out after the component is gone.
+ *
+ * The dropdown tests open the real menu and read the real overlay rather than
+ * poking at the component's fields, because "handle the empty state" is a
+ * question about what is on the screen. The one that matters most is the pair
+ * about failure: a list that came back empty and a list that failed to come
+ * back look identical from the outside and mean opposite things.
+ */
+describe('NotificationBellComponent', () => {
+  let component: NotificationBellComponent;
+  let fixture: ComponentFixture<NotificationBellComponent>;
+  let overlayContainer: OverlayContainer;
+
+  let unreadCount: BehaviorSubject<number>;
+  let routerEvents: Subject<NavigationEnd>;
+  let list: Subject<Notification[]>;
+  let subscribedTo: Set<string>;
+  let notificationService: {
+    unreadCount$: BehaviorSubject<number>;
+    refreshUnreadCount: ReturnType<typeof vi.fn>;
+    list: ReturnType<typeof vi.fn>;
+    markRead: ReturnType<typeof vi.fn>;
+    markAllRead: ReturnType<typeof vi.fn>;
+    remove: ReturnType<typeof vi.fn>;
+  };
+  let completeAuthentication: (authenticated: boolean) => void;
+
+  let authenticationService: {
+    isAuthenticated: ReturnType<typeof vi.fn>;
+    afterAuthCall: ReturnType<typeof vi.fn>;
+  };
+  let confirmationModal: {show: ReturnType<typeof vi.fn>};
+  let alerts: {success: ReturnType<typeof vi.fn>; error: ReturnType<typeof vi.fn>};
+  let router: {events: unknown; navigateByUrl: ReturnType<typeof vi.fn>};
+  let notificationRoutes: {navigate: ReturnType<typeof vi.fn>};
+
+  /**
+   * A stand-in that records whether anybody actually subscribed.
+   *
+   * A spy that only counts calls is happy either way, and every one of these
+   * methods returns a cold observable, so dropping the .subscribe() in the
+   * component sends no request at all while every call count stays the same.
+   */
+  const answers = <T>(name: string, value: T): Observable<T> =>
+    defer(() => {
+      subscribedTo.add(name);
+      return of(value);
+    });
+
+  const notification = (id: number, over: Partial<Notification> = {}): Notification => {
+    const built = new Notification();
+    built.id = id;
+    built.message = `notification ${id}`;
+    built.link = `/projects/${id}/dashboard`;
+    built.notificationType = 'feedback';
+    built.readAt = null;
+    built.createdAt = new Date(2026, 7, 17, 9, 0, 0);
+    return Object.assign(built, over);
+  };
+
+  const bell = (): HTMLElement => fixture.nativeElement.querySelector('button');
+
+  // What is drawn, not what was bound. Material always renders the content
+  // span and hides the whole badge with a class on the host, so the number on
+  // screen and whether anyone can see it are two separate questions.
+  const badgeText = (): string =>
+    fixture.nativeElement.querySelector('.mat-badge-content').textContent.trim();
+
+  const badgeIsHidden = (): boolean =>
+    fixture.debugElement
+      .query(By.directive(MatBadge))
+      .nativeElement.classList.contains('mat-badge-hidden');
+
+  const openMenu = (): void => {
+    bell().click();
+    fixture.detectChanges();
+  };
+
+  // Reads the list a second time without going through the trigger, which is
+  // what reopening the menu does.
+  const reopenWith = (): Subject<Notification[]> => {
+    const refresh: Subject<Notification[]> = new Subject();
+    notificationService.list.mockReturnValue(refresh);
+    component.onMenuOpened();
+    fixture.detectChanges();
+    return refresh;
+  };
+
+  // The menu panel is not inside the component, it is in the cdk overlay
+  // container, so nothing in the dropdown can be found through the fixture.
+  const panel = (): HTMLElement => overlayContainer.getContainerElement();
+
+  const rows = (): HTMLElement[] => Array.from(panel().querySelectorAll('.notification-row'));
+
+  const rowText = (): string[] =>
+    rows().map((row) => row.querySelector('.notification-message').textContent.trim());
+
+  const glyphIcons = (): string[] =>
+    Array.from(panel().querySelectorAll('.notification-glyph mat-icon')).map((icon) =>
+      icon.textContent.trim(),
+    );
+
+  // The tone class, not the computed colour. jsdom applies no stylesheet, and
+  // the class is the contract between the template and the scss anyway.
+  const glyphTones = (): string[] =>
+    Array.from(panel().querySelectorAll('.notification-glyph')).map((glyph) =>
+      Array.from(glyph.classList).find((name) => name.startsWith('tone-')),
+    );
+
+  const placeholderText = (): string =>
+    Array.from(panel().querySelectorAll('.notification-empty'))
+      .map((element) => element.textContent.trim())
+      .join(' ');
+
+  beforeEach(async () => {
+    unreadCount = new BehaviorSubject<number>(0);
+    routerEvents = new Subject<NavigationEnd>();
+    list = new Subject<Notification[]>();
+    subscribedTo = new Set<string>();
+
+    notificationService = {
+      unreadCount$: unreadCount,
+      refreshUnreadCount: vi.fn(() => answers('refreshUnreadCount', 0)),
+      list: vi.fn().mockReturnValue(list),
+      markRead: vi.fn(() => answers('markRead', undefined)),
+      markAllRead: vi.fn(() => answers('markAllRead', undefined)),
+      remove: vi.fn(() => answers('remove', undefined)),
+    };
+    completeAuthentication = () => undefined;
+
+    authenticationService = {
+      isAuthenticated: vi.fn().mockReturnValue(true),
+      afterAuthCall: vi.fn((callback: (authenticated: boolean) => void) => {
+        completeAuthentication = callback;
+      }),
+    };
+    confirmationModal = {show: vi.fn()};
+    alerts = {success: vi.fn(), error: vi.fn()};
+    router = {events: routerEvents.asObservable(), navigateByUrl: vi.fn()};
+    notificationRoutes = {navigate: vi.fn().mockResolvedValue(true)};
+
+    await TestBed.configureTestingModule({
+      declarations: [NotificationBellComponent],
+      imports: [
+        MatBadgeModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatMenuModule,
+        MatProgressSpinnerModule,
+        MatTooltipModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {provide: NotificationService, useValue: notificationService},
+        {provide: AuthenticationService, useValue: authenticationService},
+        {provide: ConfirmationModalService, useValue: confirmationModal},
+        {provide: AlertService, useValue: alerts},
+        {provide: Router, useValue: router},
+        {provide: NotificationRouteService, useValue: notificationRoutes},
+      ],
+    }).compileComponents();
+
+    overlayContainer = TestBed.inject(OverlayContainer);
+    fixture = TestBed.createComponent(NotificationBellComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('shows how many are unread', () => {
+    unreadCount.next(3);
+    fixture.detectChanges();
+
+    expect(badgeText()).toBe('3');
+    expect(badgeIsHidden()).toBe(false);
+
+    // The service is the only source of the number, so a change made anywhere
+    // in the app has to reach the bell without it asking.
+    unreadCount.next(4);
+    fixture.detectChanges();
+
+    expect(badgeText()).toBe('4');
+  });
+
+  it('shows no badge at all when nothing is unread', () => {
+    fixture.detectChanges();
+
+    // Not a badge reading zero. A zero sitting on the bell is a permanent
+    // little alarm that never means anything.
+    expect(badgeIsHidden()).toBe(true);
+
+    unreadCount.next(1);
+    fixture.detectChanges();
+
+    expect(badgeIsHidden()).toBe(false);
+  });
+
+  it('says how many are unread to a screen reader too', () => {
+    fixture.detectChanges();
+
+    expect(bell().getAttribute('aria-label')).toBe('Notifications');
+
+    unreadCount.next(4);
+    fixture.detectChanges();
+
+    // Material renders the badge into a span marked aria-hidden, so without
+    // this the count is the one thing the control exists to say and the only
+    // thing it does not say.
+    expect(bell().getAttribute('aria-label')).toBe('Notifications, 4 unread');
+  });
+
+  it('asks for the count again after every navigation', () => {
+    fixture.detectChanges();
+
+    // Once on init, because unreadCount$ starts at zero whether or not that is
+    // true.
+    expect(notificationService.refreshUnreadCount).toHaveBeenCalledTimes(1);
+    expect(subscribedTo.has('refreshUnreadCount')).toBe(true);
+
+    routerEvents.next(new NavigationEnd(1, '/home', '/home'));
+    expect(notificationService.refreshUnreadCount).toHaveBeenCalledTimes(2);
+
+    routerEvents.next(new NavigationEnd(2, '/units/1/tasks/inbox', '/units/1/tasks/inbox'));
+    expect(notificationService.refreshUnreadCount).toHaveBeenCalledTimes(3);
+  });
+
+  it('does not ask for the count when nobody is signed in', () => {
+    authenticationService.isAuthenticated.mockReturnValue(false);
+
+    fixture.detectChanges();
+    routerEvents.next(new NavigationEnd(1, '/sign_in', '/sign_in'));
+
+    // Sign out hides the header and routes, and the hiding takes a change
+    // detection pass while the routing event does not, so this component can
+    // still be alive for it. Anonymous, the request comes back 403, and
+    // HttpErrorInterceptor treats a 403 on an anonymous user as an expired
+    // session: an "Authentication timed out" alert and a redirect to /timeout.
+    expect(notificationService.refreshUnreadCount).not.toHaveBeenCalled();
+  });
+
+  it('stops asking once it is destroyed', () => {
+    fixture.detectChanges();
+    expect(notificationService.refreshUnreadCount).toHaveBeenCalledTimes(1);
+
+    fixture.destroy();
+    routerEvents.next(new NavigationEnd(1, '/home', '/home'));
+
+    expect(notificationService.refreshUnreadCount).toHaveBeenCalledTimes(1);
+  });
+
+  it('waits for restored authentication before the initial refresh', () => {
+    authenticationService.isAuthenticated.mockReturnValue(false);
+
+    fixture.detectChanges();
+
+    expect(authenticationService.afterAuthCall).toHaveBeenCalledTimes(1);
+    expect(notificationService.refreshUnreadCount).not.toHaveBeenCalled();
+
+    authenticationService.isAuthenticated.mockReturnValue(true);
+    completeAuthentication(true);
+
+    expect(notificationService.refreshUnreadCount).toHaveBeenCalledTimes(1);
+    expect(subscribedTo.has('refreshUnreadCount')).toBe(true);
+  });
+
+  it('does not refresh after delayed authentication once destroyed', () => {
+    authenticationService.isAuthenticated.mockReturnValue(false);
+
+    fixture.detectChanges();
+    fixture.destroy();
+
+    authenticationService.isAuthenticated.mockReturnValue(true);
+    completeAuthentication(true);
+
+    expect(notificationService.refreshUnreadCount).not.toHaveBeenCalled();
+  });
+
+  it('handles a count request that fails instead of leaving it unhandled', async () => {
+    // rxjs does not throw an unhandled subscriber error where the subscribe
+    // call was, it hands it to config.onUnhandledError a macrotask later, and
+    // the default for that is to rethrow globally. Swapping it for a spy is the
+    // only way to see the difference from inside a test, and without it this
+    // passes whether or not the error is handled at all.
+    const unhandled = vi.fn();
+    const previous = config.onUnhandledError;
+    config.onUnhandledError = unhandled;
+
+    try {
+      notificationService.refreshUnreadCount.mockReturnValue(
+        throwError(() => new Error('unread_count failed')),
+      );
+
+      fixture.detectChanges();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(unhandled).not.toHaveBeenCalled();
+      expect(component.unreadCount).toBe(0);
+    } finally {
+      config.onUnhandledError = previous;
+    }
+  });
+
+  describe('the dropdown', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('does not request the list before authentication is ready', () => {
+      authenticationService.isAuthenticated.mockReturnValue(false);
+
+      openMenu();
+
+      expect(notificationService.list).not.toHaveBeenCalled();
+      expect(placeholderText()).toContain('We could not load your notifications');
+    });
+
+    it('reads the list every time it is opened', () => {
+      expect(notificationService.list).not.toHaveBeenCalled();
+
+      openMenu();
+      expect(notificationService.list).toHaveBeenCalledTimes(1);
+
+      list.next([notification(1)]);
+      fixture.detectChanges();
+
+      // Closing and opening again has to go back to the api. A list fetched
+      // once at sign in would be wrong for the rest of the session.
+      component.onMenuOpened();
+      expect(notificationService.list).toHaveBeenCalledTimes(2);
+    });
+
+    it('shows the newest few, newest first', () => {
+      openMenu();
+
+      const at = (hour: number) => new Date(2026, 7, 17, hour, 0, 0);
+      list.next([
+        notification(1, {createdAt: at(9)}),
+        notification(2, {createdAt: at(14)}),
+        notification(3, {createdAt: at(11)}),
+        notification(4, {createdAt: at(15)}),
+        notification(5, {createdAt: at(10)}),
+        notification(6, {createdAt: at(13)}),
+        notification(7, {createdAt: at(12)}),
+      ]);
+      fixture.detectChanges();
+
+      expect(rowText()).toEqual([
+        'notification 4',
+        'notification 2',
+        'notification 6',
+        'notification 7',
+        'notification 3',
+      ]);
+    });
+
+    it('makes each row a real button so a keyboard can open it', () => {
+      openMenu();
+      list.next([notification(1)]);
+      fixture.detectChanges();
+
+      // Structural, and it has to be. MatMenu's key manager only moves focus,
+      // it never synthesises a click, so Enter on a row works only because the
+      // element is natively a button. The test environment does not simulate
+      // that browser behaviour either, so the element type is the assertion.
+      expect(rows()[0].tagName).toBe('BUTTON');
+    });
+
+    it('gives each category its own icon and colour', () => {
+      openMenu();
+      list.next([
+        notification(1, {notificationType: 'feedback'}),
+        notification(2, {notificationType: 'task'}),
+        notification(3, {notificationType: 'portfolio'}),
+        notification(4, {notificationType: 'extension'}),
+        notification(5, {notificationType: 'general'}),
+      ]);
+      fixture.detectChanges();
+
+      expect(glyphIcons()).toEqual([
+        'chat_bubble',
+        'assignment',
+        'collections_bookmark',
+        'more_time',
+        'campaign',
+      ]);
+
+      // The tone is what the stylesheet colours on, so a row with the right
+      // icon and the wrong tone still looks wrong.
+      expect(glyphTones()).toEqual([
+        'tone-feedback',
+        'tone-task',
+        'tone-portfolio',
+        'tone-extension',
+        'tone-general',
+      ]);
+    });
+
+    it('still draws something for a category it has never heard of', () => {
+      openMenu();
+      // Notification::TYPES is validated on the api, so this is a sixth
+      // category added there reaching a browser running older web code. A row
+      // with no icon at all is worse than a generic one.
+      list.next([notification(1, {notificationType: 'announcement'})]);
+      fixture.detectChanges();
+
+      expect(glyphIcons()).toEqual(['notifications']);
+      expect(glyphTones()).toEqual(['tone-general']);
+    });
+
+    it('marks the unread rows with a dot and leaves the read ones a gap', () => {
+      openMenu();
+      list.next([notification(1), notification(2, {readAt: new Date(2026, 7, 17, 9, 30, 0)})]);
+      fixture.detectChanges();
+
+      const dots = Array.from(panel().querySelectorAll('.notification-unread-dot'));
+
+      // Both rows keep the element. Removing it on read would shuffle the
+      // delete button sideways from row to row.
+      expect(dots).toHaveLength(2);
+      expect(dots[0].classList.contains('is-read')).toBe(false);
+      expect(dots[1].classList.contains('is-read')).toBe(true);
+    });
+
+    it('says unread in words, not only in bold and colour', () => {
+      openMenu();
+      list.next([
+        notification(1, {message: 'Andrew Cain commented on 1.1P.'}),
+        notification(2, {
+          message: 'Your extension was granted.',
+          readAt: new Date(2026, 7, 17, 9, 30, 0),
+        }),
+      ]);
+      fixture.detectChanges();
+
+      // Weight and a dot are both things you have to be able to see.
+      expect(rows()[0].getAttribute('aria-label')).toContain('Unread.');
+      expect(rows()[0].getAttribute('aria-label')).toContain('Andrew Cain commented on 1.1P.');
+      expect(rows()[1].getAttribute('aria-label')).toContain('Read.');
+    });
+
+    it('says how long ago each one arrived', () => {
+      openMenu();
+
+      const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);
+      list.next([notification(1, {createdAt: twoHoursAgo})]);
+      fixture.detectChanges();
+
+      expect(rows()[0].querySelector('.notification-time').textContent.trim()).toBe('2 hours ago');
+    });
+
+    it('says something friendly when there is nothing to show', () => {
+      openMenu();
+
+      list.next([]);
+      fixture.detectChanges();
+
+      expect(rows()).toHaveLength(0);
+      expect(placeholderText()).toContain('You are all caught up');
+    });
+
+    it('says it could not load rather than claiming there is nothing', () => {
+      openMenu();
+
+      list.error(new Error('GET /notifications failed'));
+      fixture.detectChanges();
+
+      // The whole point of this one. An empty box after a failed request tells
+      // the user they have no notifications, which is a different and wrong
+      // thing to say.
+      expect(placeholderText()).toContain('could not load');
+      expect(placeholderText()).not.toContain('caught up');
+    });
+
+    it('shows the list it already has while it reads a fresh one', () => {
+      openMenu();
+      list.next([notification(1)]);
+      fixture.detectChanges();
+
+      // Reopening starts a second read. Blanking the panel for it would make
+      // every open flash, when what is on screen is still nearly right.
+      reopenWith();
+
+      expect(rowText()).toEqual(['notification 1']);
+    });
+
+    it('warns that the rows are stale when a refresh fails behind them', () => {
+      openMenu();
+      list.next([notification(1)]);
+      fixture.detectChanges();
+
+      reopenWith().error(new Error('GET /notifications failed'));
+      fixture.detectChanges();
+
+      // Keeping the rows is right, keeping them silently is not. A list nobody
+      // could refresh looks exactly like a list nothing has happened to.
+      expect(rowText()).toEqual(['notification 1']);
+      expect(panel().textContent).toContain('may be out of date');
+    });
+
+    it('marks a row read and follows its link when it is clicked', () => {
+      openMenu();
+      list.next([notification(1, {link: '/projects/9/dashboard'})]);
+      fixture.detectChanges();
+
+      rows()[0].click();
+
+      expect(notificationService.markRead).toHaveBeenCalledTimes(1);
+      expect(notificationService.markRead.mock.calls[0][0].id).toBe(1);
+      expect(subscribedTo.has('markRead')).toBe(true);
+      expect(notificationRoutes.navigate).toHaveBeenCalledWith('/projects/9/dashboard');
+    });
+
+    it('does not mark a row read twice', () => {
+      openMenu();
+      list.next([notification(1, {readAt: new Date(2026, 7, 17, 9, 30, 0)})]);
+      fixture.detectChanges();
+
+      rows()[0].click();
+
+      // read_all and mark_read are both no-ops on the api for one already read,
+      // so a second call would do nothing except tell the service to take one
+      // off a count that never included it.
+      expect(notificationService.markRead).not.toHaveBeenCalled();
+      expect(notificationRoutes.navigate).toHaveBeenCalledTimes(1);
+    });
+
+    it('marks a row read even when it has nowhere to go', () => {
+      openMenu();
+      list.next([notification(1, {link: null})]);
+      fixture.detectChanges();
+
+      rows()[0].click();
+
+      // link is nullable on the api. Refusing to mark it read would leave a
+      // number on the bell that the user has no way to clear.
+      expect(notificationService.markRead).toHaveBeenCalledTimes(1);
+      expect(notificationRoutes.navigate).not.toHaveBeenCalled();
+    });
+
+    it('says so when a notification could not be marked as read', () => {
+      notificationService.markRead.mockReturnValue(throwError(() => new Error('PUT read failed')));
+
+      openMenu();
+      list.next([notification(1, {link: null})]);
+      fixture.detectChanges();
+
+      rows()[0].click();
+
+      // Nothing else on screen changes when this fails. Swallowing it leaves
+      // the row unread and the badge where it was with no explanation.
+      expect(alerts.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('drops a list read still in flight when a row is opened', () => {
+      openMenu();
+      list.next([notification(1)]);
+      fixture.detectChanges();
+
+      // The rows on screen during a refresh are the previous list's, so this is
+      // the ordinary way to reach this: reopen, click before the read lands.
+      const refresh = reopenWith();
+      expect(refresh.observed).toBe(true);
+
+      rows()[0].click();
+
+      // That response was worked out before the click and NotificationService
+      // writes list responses into the shared entity cache, so letting it land
+      // would put readAt back to null and draw the row unread again.
+      expect(refresh.observed).toBe(false);
+    });
+  });
+  /**
+   * The split that matters here is which action asks first. Marking read
+   * destroys nothing and a dialog on it is a step to click through; delete has
+   * no undo anywhere in this feature and gets one.
+   */
+  describe('the bulk actions', () => {
+    // The dialog is a callback, not a promise. show() is handed the function to
+    // run on confirm and the one to run on cancel, so a test drives it by
+    // reaching for whichever of those it wants.
+    const confirmed = (): void => confirmationModal.show.mock.calls[0][2]();
+    const cancelled = (): void => confirmationModal.show.mock.calls[0][3]();
+
+    const deleteButtons = (): HTMLElement[] =>
+      Array.from(panel().querySelectorAll('.notification-delete'));
+
+    const markAllButton = (): HTMLElement => panel().querySelector('.notification-mark-all');
+
+    const seeAllButton = (): HTMLElement => panel().querySelector('.notification-see-all');
+
+    beforeEach(() => {
+      fixture.detectChanges();
+      openMenu();
+      list.next([notification(1), notification(2, {readAt: new Date(2026, 7, 17, 9, 30, 0)})]);
+      fixture.detectChanges();
+    });
+
+    it('registers every dropdown action in MatMenu keyboard order', () => {
+      unreadCount.next(1);
+      fixture.detectChanges();
+
+      const menuItems = Array.from(panel().querySelectorAll<HTMLElement>('[role="menuitem"]'));
+
+      expect(menuItems).toHaveLength(6);
+      expect(menuItems[0]).toBe(markAllButton());
+      expect(menuItems[1]).toBe(rows()[0]);
+      expect(menuItems[2]).toBe(deleteButtons()[0]);
+      expect(menuItems[3]).toBe(rows()[1]);
+      expect(menuItems[4]).toBe(deleteButtons()[1]);
+      expect(menuItems[5]).toBe(seeAllButton());
+
+      for (const menuItem of menuItems) {
+        expect(menuItem.classList.contains('mat-mdc-menu-item')).toBe(true);
+      }
+    });
+
+    it('names each delete action after the notification it removes', () => {
+      expect(deleteButtons().map((button) => button.getAttribute('aria-label'))).toEqual([
+        'Delete notification: notification 1',
+        'Delete notification: notification 2',
+      ]);
+    });
+
+    it('marks everything read without asking first', () => {
+      unreadCount.next(1);
+      fixture.detectChanges();
+
+      // MatMenu closes the panel from a click handler on the panel itself, so
+      // anything that reaches it shuts the menu. The whole reward for this
+      // button is watching the rows stop being bold, and that is gone if the
+      // menu closes underneath it. Watching the click arrive is steadier than
+      // watching the overlay leave, which is animation timing.
+      const reachedThePanel = vi.fn();
+      panel().addEventListener('click', reachedThePanel);
+
+      markAllButton().click();
+      fixture.detectChanges();
+
+      expect(notificationService.markAllRead).toHaveBeenCalledTimes(1);
+      expect(subscribedTo.has('markAllRead')).toBe(true);
+      expect(confirmationModal.show).not.toHaveBeenCalled();
+      expect(reachedThePanel).not.toHaveBeenCalled();
+    });
+
+    it('does not offer to mark all read when nothing is unread', () => {
+      unreadCount.next(0);
+      fixture.detectChanges();
+
+      // Same reason the badge disappears at zero rather than showing one. An
+      // action that cannot do anything should not be sitting there.
+      expect(markAllButton()).toBeNull();
+
+      unreadCount.next(2);
+      fixture.detectChanges();
+
+      expect(markAllButton()).not.toBeNull();
+    });
+
+    it('says so when marking everything read fails', () => {
+      unreadCount.next(1);
+      fixture.detectChanges();
+      notificationService.markAllRead.mockReturnValue(
+        throwError(() => new Error('PUT read_all failed')),
+      );
+
+      markAllButton().click();
+
+      expect(alerts.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('asks before it deletes anything', () => {
+      deleteButtons()[0].click();
+
+      expect(confirmationModal.show).toHaveBeenCalledTimes(1);
+      expect(notificationService.remove).not.toHaveBeenCalled();
+    });
+
+    it('deletes only once the dialog is agreed to', () => {
+      deleteButtons()[0].click();
+      confirmed();
+
+      expect(notificationService.remove).toHaveBeenCalledTimes(1);
+      expect(notificationService.remove.mock.calls[0][0].id).toBe(1);
+      expect(subscribedTo.has('remove')).toBe(true);
+
+      fixture.detectChanges();
+      expect(rowText()).toEqual(['notification 2']);
+    });
+
+    it('leaves the notification alone when the dialog is cancelled', () => {
+      deleteButtons()[0].click();
+      cancelled();
+      fixture.detectChanges();
+
+      expect(notificationService.remove).not.toHaveBeenCalled();
+      expect(rowText()).toEqual(['notification 1', 'notification 2']);
+    });
+
+    it('keeps the row when the delete fails', () => {
+      notificationService.remove.mockReturnValue(throwError(() => new Error('DELETE failed')));
+
+      deleteButtons()[0].click();
+      confirmed();
+      fixture.detectChanges();
+
+      // Taking the row out first and putting it back on failure would be worse
+      // than leaving it. The user reads the row vanishing as the delete having
+      // worked.
+      expect(rowText()).toEqual(['notification 1', 'notification 2']);
+      expect(alerts.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not open the notification when its delete button is clicked', () => {
+      deleteButtons()[0].click();
+
+      // The delete button sits in the row, and the row opens the notification.
+      // Without stopping the click there, asking to delete one would mark it
+      // read and navigate away from the menu it was asked in.
+      expect(notificationService.markRead).not.toHaveBeenCalled();
+      expect(router.navigateByUrl).not.toHaveBeenCalled();
+    });
+
+    it('promotes the next notification when a shown one is deleted', () => {
+      const at = (hour: number) => new Date(2026, 7, 17, hour, 0, 0);
+      const refresh = reopenWith();
+      refresh.next([
+        notification(1, {createdAt: at(15)}),
+        notification(2, {createdAt: at(14)}),
+        notification(3, {createdAt: at(13)}),
+        notification(4, {createdAt: at(12)}),
+        notification(5, {createdAt: at(11)}),
+        notification(6, {createdAt: at(10)}),
+      ]);
+      fixture.detectChanges();
+
+      expect(rowText()).toHaveLength(5);
+      expect(rowText()).not.toContain('notification 6');
+
+      deleteButtons()[0].click();
+      confirmed();
+      fixture.detectChanges();
+
+      // Filtering only the five on screen would leave four and a gap, when the
+      // sixth is already in hand and nothing needs to be asked for.
+      expect(rowText()).toEqual([
+        'notification 2',
+        'notification 3',
+        'notification 4',
+        'notification 5',
+        'notification 6',
+      ]);
+    });
+
+    it('drops a list read still in flight when everything is marked read', () => {
+      unreadCount.next(1);
+      fixture.detectChanges();
+
+      const refresh = reopenWith();
+      expect(refresh.observed).toBe(true);
+
+      markAllButton().click();
+
+      expect(refresh.observed).toBe(false);
+    });
+
+    it('offers a way to the rest of them', () => {
+      // The dropdown shows five and the api sends every one, so without this a
+      // sixth notification can only be reached by typing a url.
+      seeAllButton().click();
+
+      expect(router.navigateByUrl).toHaveBeenCalledWith('/notifications');
+    });
+  });
+});
diff --git a/src/app/common/header/notification-bell/notification-bell.component.ts b/src/app/common/header/notification-bell/notification-bell.component.ts
new file mode 100644
index 0000000000..981c84baf9
--- /dev/null
+++ b/src/app/common/header/notification-bell/notification-bell.component.ts
@@ -0,0 +1,408 @@
+import moment from 'moment';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {Subscription, filter} from 'rxjs';
+import {Notification} from 'src/app/api/models/notification';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {NotificationRouteService} from 'src/app/api/services/notification-route.service';
+import {NotificationService} from 'src/app/api/services/notification.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {ConfirmationModalService} from '../../modals/confirmation-modal/confirmation-modal.service';
+
+/**
+ * The bell in the header, the unread count on it, and the list behind it.
+ *
+ * Its own component rather than more markup in HeaderComponent. The header is
+ * already eleven injected services long and its spec replaces the template with
+ * an empty string, so anything added there is untested by construction. This
+ * also keeps the change to the header itself to one line.
+ *
+ * The dropdown lives here rather than in a component of its own, which is the
+ * same shape as unit-dropdown and task-dropdown next door. Both of those own
+ * their trigger and their mat-menu in one template, and the reason is not
+ * tidiness: MatMenu collects its items with a content query, and a content
+ * query does not reach into another component's template. Rows in a child
+ * component would still click and still close the menu, but the menu's key
+ * manager would never see them, so the arrow keys would walk over an empty
+ * menu.
+ *
+ * The count comes from NotificationService.unreadCount$ and not from a request
+ * this component makes, so marking one read anywhere in the app moves the badge
+ * without the bell knowing who did it.
+ */
+@Component({
+  selector: 'notification-bell',
+  templateUrl: './notification-bell.component.html',
+  styleUrls: ['./notification-bell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class NotificationBellComponent implements OnInit, OnDestroy {
+  /**
+   * How many rows the dropdown shows.
+   *
+   * The api has no paging, GET /notifications answers with the lot, so this is
+   * a display limit and not a request size. Somebody with four hundred of them
+   * still downloads four hundred, and the full page is where they go to read
+   * them.
+   */
+  public static readonly RECENT_COUNT = 5;
+
+  /**
+   * The icon and colour for a notification's category.
+   *
+   * Keyed on notificationType and nothing finer, because that is all the api
+   * sends. NotificationEntity exposes id, notification_type, message, link,
+   * read_at and created_at, and the event naming the specific thing that
+   * happened is deliberately not among them. So a new task, a due date change
+   * and a due soon reminder all share the one task icon. Icons per event would
+   * need `expose :event` on the api first, and then this stops being a closed
+   * list of five and becomes something every event ticket has to edit, which is
+   * the coupling the mailer templates were shaped to avoid.
+   */
+  private static readonly CATEGORIES: Record<string, {icon: string; tone: string}> = {
+    feedback: {icon: 'chat_bubble', tone: 'feedback'},
+    task: {icon: 'assignment', tone: 'task'},
+    portfolio: {icon: 'collections_bookmark', tone: 'portfolio'},
+    extension: {icon: 'more_time', tone: 'extension'},
+    general: {icon: 'campaign', tone: 'general'},
+  };
+
+  /**
+   * For a category this build has not heard of.
+   *
+   * Notification::TYPES is validated on the api, so the five above are the five
+   * that exist today. A sixth added there would reach a browser running older
+   * web code, and a row with no icon at all is worse than a generic one.
+   */
+  private static readonly UNKNOWN_CATEGORY = {icon: 'notifications', tone: 'general'};
+
+  unreadCount = 0;
+
+  /**
+   * Everything the last read came back with, newest first.
+   *
+   * All of it and not just the five on screen. Deleting one of the five has to
+   * promote the sixth, and re-reading the list to find out what the sixth was
+   * would be a request for something already in hand.
+   */
+  notifications: Notification[] = [];
+
+  /**
+   * The slice actually drawn.
+   */
+  recent: Notification[] = [];
+
+  loading = false;
+  loadFailed = false;
+
+  private subscriptions: Subscription[] = [];
+  private listSubscription: Subscription | null = null;
+  private destroyed = false;
+
+  constructor(
+    private notificationService: NotificationService,
+    private authenticationService: AuthenticationService,
+    private confirmationModal: ConfirmationModalService,
+    private alerts: AlertService,
+    private router: Router,
+    private notificationRoutes: NotificationRouteService,
+  ) {}
+
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.notificationService.unreadCount$.subscribe((count) => {
+        this.unreadCount = count;
+      }),
+    );
+
+    // The count goes stale on its own. Notifications are created by the api,
+    // and push only reaches a browser that granted permission and kept the
+    // service worker alive, so most sessions never hear about a new one. A
+    // navigation is the cheapest honest excuse to ask again, and it is roughly
+    // when someone would look at the bell anyway.
+    this.subscriptions.push(
+      this.router.events
+        .pipe(filter((event) => event instanceof NavigationEnd))
+        .subscribe(() => this.refresh()),
+    );
+
+    // A remembered session is restored after the header is created. If the bell
+    // asks immediately, the authentication guard can skip the request before the
+    // restored session is ready, and no later navigation is guaranteed.
+    if (this.authenticationService.isAuthenticated()) {
+      this.refresh();
+    } else {
+      this.authenticationService.afterAuthCall((authenticated) => {
+        if (authenticated && !this.destroyed) {
+          this.refresh();
+        }
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed = true;
+    this.listSubscription?.unsubscribe();
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  /**
+   * What a screen reader should call the bell.
+   *
+   * The badge is not part of it. Material renders the number into a span marked
+   * aria-hidden, so a bell with four unread notifications announces itself as
+   * "Notifications, button" and the count is the one thing the control exists
+   * to say.
+   */
+  get bellLabel(): string {
+    return this.unreadCount ? `Notifications, ${this.unreadCount} unread` : 'Notifications';
+  }
+
+  /**
+   * Read the list again every time the menu is opened.
+   *
+   * On the open event and not in ngOnInit. Content written inside a mat-menu is
+   * built with the surrounding component whether the menu is ever opened or
+   * not, so an ngOnInit here would fetch once at sign in and then show that
+   * same list for the rest of the session.
+   */
+  onMenuOpened(): void {
+    this.loading = true;
+    this.loadFailed = false;
+
+    if (!this.authenticationService.isAuthenticated()) {
+      this.loading = false;
+      this.loadFailed = true;
+      return;
+    }
+
+    // Opening twice quickly is easy to do. Without this the first response can
+    // land after the second and put the older list back.
+    this.listSubscription?.unsubscribe();
+
+    this.listSubscription = this.notificationService.list().subscribe({
+      next: (notifications) => {
+        this.notifications = this.newestFirst(notifications);
+        this.updateRecent();
+        this.loading = false;
+      },
+      error: () => {
+        this.loading = false;
+        this.loadFailed = true;
+      },
+    });
+  }
+
+  /**
+   * Open one notification: mark it read, then go where it points.
+   *
+   * Marking read is not conditional on the link. A notification with nowhere to
+   * go has still been seen once it is clicked, and leaving it unread would keep
+   * a number on the bell that the user cannot clear.
+   */
+  open(notification: Notification): void {
+    if (!notification.isRead) {
+      // The rows on screen during a refresh are the previous list's, so this is
+      // a real sequence and not a theoretical one. That response was worked out
+      // before this click and it is written straight into the shared entity
+      // cache, so letting it land would put readAt back to null and draw the
+      // row unread again.
+      this.cancelPendingList();
+
+      // Not waited on. The row is already gone from view by the time this
+      // answers, the badge follows from unreadCount$, and holding the
+      // navigation for it would make every click feel slow.
+      this.notificationService.markRead(notification).subscribe({
+        error: () => this.alerts.error('That notification could not be marked as read'),
+      });
+    }
+
+    if (notification.link) {
+      void this.notificationRoutes.navigate(notification.link);
+    }
+  }
+
+  /**
+   * Mark the lot as read.
+   *
+   * No confirmation. Nothing is lost by it and the user can still read every
+   * one of them afterwards, so a dialog here would only be a step to click
+   * through. Delete is the one that asks.
+   *
+   * The count on the bell is not touched here. NotificationService drops it to
+   * zero inside markAllRead and pushes that down unreadCount$, which is where
+   * the badge reads it from, so a second copy of the arithmetic here could only
+   * ever disagree with it.
+   */
+  markAllRead(event: MouseEvent): void {
+    // MatMenu closes on any click that reaches the panel, and closing here
+    // would hide the thing the user just asked to see happen. It also has to
+    // stop before the row underneath, which would treat this as opening the
+    // notification.
+    event.stopPropagation();
+
+    // A read that went out before this is now out of date, and its response is
+    // written into the shared cache, so landing late would draw every row
+    // unread again.
+    this.cancelPendingList();
+
+    this.notificationService.markAllRead().subscribe({
+      error: () => this.alerts.error('Your notifications could not be marked as read'),
+    });
+  }
+
+  /**
+   * Ask first, then delete.
+   *
+   * Delete is the only one of the five endpoints that destroys anything, and
+   * there is no undo anywhere in this feature, so it gets the dialog the house
+   * already has rather than a new one.
+   *
+   * The empty cancel function is deliberate. ConfirmationModalService pops a
+   * green success snackbar reading "<title> action cancelled" when none is
+   * given, and telling somebody they successfully did not delete something is
+   * noise.
+   */
+  confirmDelete(notification: Notification, event: MouseEvent): void {
+    event.stopPropagation();
+
+    this.confirmationModal.show(
+      'Delete notification',
+      'This removes the notification. You will not be able to get it back.',
+      () => this.remove(notification),
+      () => undefined,
+      'Delete',
+    );
+  }
+
+  /**
+   * Go to the full list.
+   *
+   * The dropdown shows five and the api sends every one, so without a way out
+   * of it a sixth notification is unreachable except by typing a url.
+   *
+   * The /notifications route arrives with IN-04, which is a sibling branch, so
+   * on this branch alone there is nothing at that path yet and app.routes.ts
+   * sends an unmatched path to /home. Both branches merge into
+   * feature/notifications before any of this ships.
+   */
+  seeAll(): void {
+    this.router.navigateByUrl('/notifications');
+  }
+
+  iconFor(notification: Notification): string {
+    return this.categoryFor(notification).icon;
+  }
+
+  toneFor(notification: Notification): string {
+    return this.categoryFor(notification).tone;
+  }
+
+  /**
+   * What a screen reader should read for a row.
+   *
+   * Unread is drawn as bold text and a coloured dot, and both of those are
+   * things you have to be able to see. The message and the time are already in
+   * the button, so this only exists to put the state into words.
+   */
+  rowLabel(notification: Notification): string {
+    const state = notification.isRead ? 'Read' : 'Unread';
+
+    return `${state}. ${notification.message}. ${this.timeAgo(notification)}`;
+  }
+
+  /**
+   * How long ago this arrived, in words.
+   *
+   * Worked out on each change detection pass rather than stored, so a menu left
+   * open does not sit there insisting something happened "a few seconds ago"
+   * ten minutes later.
+   */
+  timeAgo(notification: Notification): string {
+    return moment(notification.createdAt).fromNow();
+  }
+
+  /**
+   * Retire a list request that is still in the air.
+   *
+   * Anything this component changes locally is newer than a read that went out
+   * before it. NotificationService writes list responses into the shared cache,
+   * so one arriving late does not merely show stale rows, it undoes the change.
+   */
+  protected cancelPendingList(): void {
+    this.listSubscription?.unsubscribe();
+    this.listSubscription = null;
+    this.loading = false;
+  }
+
+  /**
+   * Delete it for real, once the dialog has been agreed to.
+   *
+   * The row is dropped from the held list on success rather than by reading the
+   * list again. A second GET for something we already know the answer to would
+   * make the row sit there for a round trip after the user asked for it to go.
+   * The unread count corrects itself from unreadCount$, the same as everywhere
+   * else here.
+   */
+  private remove(notification: Notification): void {
+    this.cancelPendingList();
+
+    this.notificationService.remove(notification).subscribe({
+      next: () => {
+        this.notifications = this.notifications.filter((row) => row !== notification);
+
+        // Recomputed and not filtered in place. Filtering the five on screen
+        // leaves four and a gap, when the sixth newest is sitting right here
+        // waiting to move up.
+        this.updateRecent();
+        this.alerts.success('Notification deleted');
+      },
+      error: () => this.alerts.error('That notification could not be deleted'),
+    });
+  }
+
+  /**
+   * Newest first.
+   *
+   * The api already answers in this order, and this sorts anyway. Recency is
+   * the entire meaning of this list, and the copies handed back here come out
+   * of a cache that other calls also write to, so the order of the array is not
+   * something worth trusting.
+   */
+  private newestFirst(notifications: Notification[]): Notification[] {
+    return [...notifications].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+  }
+
+  private updateRecent(): void {
+    this.recent = this.notifications.slice(0, NotificationBellComponent.RECENT_COUNT);
+  }
+
+  private categoryFor(notification: Notification): {icon: string; tone: string} {
+    return (
+      NotificationBellComponent.CATEGORIES[notification.notificationType] ??
+      NotificationBellComponent.UNKNOWN_CATEGORY
+    );
+  }
+
+  /**
+   * Ask the api for the count, but only while somebody is signed in.
+   *
+   * The guard is not tidiness. Sign out hides the header and routes to
+   * /sign_in, and hiding is a change detection away while the navigation event
+   * fires straight away, so this component can still be alive for it. The
+   * request would then go out anonymous, come back 403, and
+   * HttpErrorInterceptor reads a 403 on an anonymous user as an expired session:
+   * it shows "Authentication timed out" and redirects to /timeout. Signing out
+   * would look like being kicked out.
+   *
+   * Errors are dropped. Nothing the user asked for depends on this.
+   */
+  private refresh(): void {
+    if (!this.authenticationService.isAuthenticated()) {
+      return;
+    }
+
+    this.notificationService.refreshUnreadCount().subscribe({error: () => undefined});
+  }
+}
diff --git a/src/app/common/header/task-dropdown/task-dropdown.component.html b/src/app/common/header/task-dropdown/task-dropdown.component.html
index 9e848d0c5b..5f7e239d25 100644
--- a/src/app/common/header/task-dropdown/task-dropdown.component.html
+++ b/src/app/common/header/task-dropdown/task-dropdown.component.html
@@ -2,43 +2,39 @@
   @if (currentView === 'PROJECT' && currentProject !== null && currentUnit.currentUserIsStaff) {
     <mat-icon class="f-breadcrumb">chevron_right</mat-icon>
     <button #menuState="matMenuTrigger" mat-button [matMenuTriggerFor]="menu">
-      <span class="flex items-center flex-row">
+      <span class="flex flex-row items-center">
         <span> Staff Tasks </span>
         <mat-icon>{{ menuState.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down' }} </mat-icon>
       </span>
     </button>
     <mat-menu #menu="matMenu">
-      <button mat-menu-item uiSref="units/tasks/inbox" [uiParams]="{unitId: currentUnit.id}">
+      <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'tasks', 'inbox']">
         <mat-icon aria-label="Inbox icon" fontIcon="inbox"></mat-icon> <span>Inbox</span>
       </button>
-      <button mat-menu-item uiSref="units/tasks/definition" [uiParams]="{unitId: currentUnit.id}">
+      <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'tasks', 'definition']">
         <mat-icon aria-label="Task Explorer Icon" fontIcon="pageview"></mat-icon> Explorer
       </button>
-      <button mat-menu-item uiSref="units/tasks/viewer" [uiParams]="{unitId: currentUnit.id}">
+      <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'tasks']">
         <mat-icon aria-label="Task list icon" fontIcon="list_alt"></mat-icon> Tasks
       </button>
       <mat-divider></mat-divider>
-      <button mat-menu-item uiSref="units/students/list" [uiParams]="{unitId: currentUnit.id}">
+      <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'students']">
         <mat-icon aria-label="Students list" fontIcon="group"></mat-icon> Students
       </button>
-      <button mat-menu-item uiSref="units/students/groups" [uiParams]="{unitId: currentUnit.id}">
+      <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'students', 'groups']">
         <mat-icon aria-label="Student Groups" fontIcon="groups"></mat-icon> Groups
       </button>
-      <button
-        mat-menu-item
-        uiSref="units/students/portfolios"
-        [uiParams]="{unitId: currentUnit.id}"
-      >
+      <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'students', 'portfolios']">
         <mat-icon aria-label="Student portfolios icon" fontIcon="collections_bookmark"></mat-icon>
         Portfolios
       </button>
       <span>
         <mat-divider></mat-divider>
-        <button mat-menu-item uiSref="units/analytics" [uiParams]="{unitId: currentUnit.id}">
+        <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'analytics']">
           <mat-icon aria-label="Unit Analytics icon" fontIcon="insights"></mat-icon>Analytics
         </button>
         @if (currentUnit.currentUserCanViewUnitAdmin) {
-          <button mat-menu-item uiSref="units/admin" [uiParams]="{unitId: currentUnit.id}">
+          <button mat-menu-item [routerLink]="['/units', currentUnit.id, 'admin']">
             <mat-icon aria-label="Unit Administration" fontIcon="admin_panel_settings"></mat-icon>
             Administration
           </button>
@@ -48,104 +44,94 @@
   }
   @if (currentActivity) {
     <mat-icon class="f-breadcrumb">chevron_right</mat-icon>
-    <button mat-button [matMenuTriggerFor]="menu2" #menuState="matMenuTrigger">
-      <span class="flex items-center flex-row">
+    <button #menuState="matMenuTrigger" mat-button [matMenuTriggerFor]="menu2">
+      <span class="flex flex-row items-center">
         <span>{{ menuText }}</span>
         <mat-icon>{{ menuState.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down' }} </mat-icon>
       </span>
     </button>
     <mat-menu #menu2="matMenu">
       @if (currentProject !== null && currentView === 'PROJECT') {
-        <button
-          uiSref="projects/dashboard"
-          [uiParams]="{projectId: currentProject.id, taskAbbr: ''}"
-          mat-menu-item
-        >
+        <button mat-menu-item [routerLink]="['/projects', currentProject.id, 'dashboard']">
           <mat-icon aria-label="Dashboard icon" fontIcon="dashboard"></mat-icon> Dashboard
         </button>
         <mat-divider></mat-divider>
-        <button
-          uiSref="projects/outcomes"
-          [uiParams]="{projectId: currentProject.id, taskAbbr: ''}"
-          mat-menu-item
-        >
-          <mat-icon aria-label="learning outcomes icon" fontIcon="flag"></mat-icon> Learning
-          Outcomes
-        </button>
-        <button
-          uiSref="projects/portfolio"
-          [uiParams]="{projectId: currentProject.id, taskAbbr: ''}"
-          mat-menu-item
-        >
+        <button mat-menu-item [routerLink]="['/projects', currentProject.id, 'plan']">
+          <mat-icon aria-label="Plan icon" fontIcon="calendar_month"></mat-icon>
+          Task Planner
+        </button>
+        <mat-divider></mat-divider>
+        <button mat-menu-item [routerLink]="['/projects', currentProject.id, 'portfolio']">
           <mat-icon aria-label="Portfolio creation icon" fontIcon="auto_stories"></mat-icon>
           Portfolio Creation
         </button>
         <mat-divider></mat-divider>
-        <button
-          uiSref="projects/groups"
-          [uiParams]="{projectId: currentProject.id, taskAbbr: ''}"
-          mat-menu-item
-        >
+        <button mat-menu-item [routerLink]="['/projects', currentProject.id, 'groups']">
           <mat-icon aria-label="Groups list icon" fontIcon="groups"></mat-icon> Groups List
         </button>
-        <button
-          uiSref="projects/tutorials"
-          [uiParams]="{projectId: currentProject.id, taskAbbr: ''}"
-          mat-menu-item
-        >
+        <button mat-menu-item [routerLink]="['/projects', currentProject.id, 'tutorials']">
           <mat-icon aria-label="Tutorial List icon" fontIcon="meeting_room"></mat-icon> Tutorial
           List
         </button>
       }
       @if (unitRole && currentView === 'UNIT') {
         <!-- <p class="task-dropdown-heading">Tasks</p> -->
-        <button uiSref="units/tasks/inbox" [uiParams]="{unitId: unitRole.unit.id}" mat-menu-item>
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'tasks', 'inbox']">
           <mat-icon aria-label="Inbox icon" fontIcon="inbox"></mat-icon> <span>Inbox</span>
         </button>
-        <button
-          uiSref="units/tasks/definition"
-          [uiParams]="{unitId: unitRole.unit.id}"
-          mat-menu-item
-        >
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'tasks', 'definition']">
           <mat-icon aria-label="Task Explorer Icon" fontIcon="pageview"></mat-icon> Explorer
         </button>
-        <button uiSref="units/tasks/viewer" [uiParams]="{unitId: unitRole.unit.id}" mat-menu-item>
+
+        @if (isMentor || unitRole.role === 'Convenor') {
+          <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'tasks', 'moderation']">
+            <mat-icon aria-label="Audit Icon">rate_review</mat-icon> Moderation
+          </button>
+        }
+
+        @if (canMarkOverflowTask) {
+          <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'tasks', 'overflow']">
+            <!-- <mat-icon aria-label="Audit Icon">pending_actions</mat-icon> Overflow -->
+            <mat-icon aria-label="Audit Icon">more_time</mat-icon> Overflow
+            <!-- <mat-icon aria-label="Audit Icon">work_history</mat-icon> Overflow -->
+            <!-- <mat-icon aria-label="Audit Icon">safety_check</mat-icon> Overflow -->
+          </button>
+        }
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'tasks']">
           <mat-icon aria-label="Task list icon" fontIcon="list_alt"></mat-icon> Tasks
         </button>
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'discussion']">
+          <mat-icon aria-label="Tutor Discussion icon" fontIcon="qr_code_scanner"></mat-icon
+          >Discussion
+        </button>
+        <button mat-menu-item (click)="openTutorNotes()">
+          <mat-icon aria-label="Tutor Moderation icon" fontIcon="local_library"></mat-icon>My
+          Moderation Notes
+        </button>
         <mat-divider></mat-divider>
         <!-- <p class="task-dropdown-heading">Students</p> -->
-        <button
-          uiSref="units/students/list"
-          [uiParams]="{unitId: unitRole.unit.id}"
-          mat-menu-item
-        >
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'students']">
           <mat-icon aria-label="Students list" fontIcon="group"></mat-icon> Students
         </button>
-        <button
-          uiSref="units/students/groups"
-          [uiParams]="{unitId: unitRole.unit.id}"
-          mat-menu-item
-        >
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'students', 'groups']">
           <mat-icon aria-label="Student Groups" fontIcon="groups"></mat-icon> Groups
         </button>
-        <button
-          uiSref="units/students/portfolios"
-          [uiParams]="{unitId: unitRole.unit.id}"
-          mat-menu-item
-        >
-          <mat-icon
-            aria-label="Student portfolios icon"
-            fontIcon="collections_bookmark"
-          ></mat-icon>
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'students', 'portfolios']">
+          <mat-icon aria-label="Student portfolios icon" fontIcon="collections_bookmark"></mat-icon>
           Portfolios
         </button>
         <mat-divider></mat-divider>
         <!-- <p class="task-dropdown-heading">Unit</p> -->
-        <button uiSref="units/analytics" [uiParams]="{unitId: unitRole.unit.id}" mat-menu-item>
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'analytics']">
           <mat-icon aria-label="Unit Analytics icon" fontIcon="insights"></mat-icon>Analytics
         </button>
-        @if (unitRole.role === 'Convenor' || unitRole.role === 'Admin' || unitRole.role === 'Auditor') {
-          <button uiSref="units/admin" [uiParams]="{unitId: unitRole.unit.id}" mat-menu-item>
+        <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'check-in']">
+          <mat-icon aria-label="Student Check In icon" fontIcon="history_edu"></mat-icon>Check-in
+        </button>
+        @if (
+          unitRole.role === 'Convenor' || unitRole.role === 'Admin' || unitRole.role === 'Auditor'
+        ) {
+          <button mat-menu-item [routerLink]="['/units', unitRole.unit.id, 'admin']">
             <mat-icon aria-label="Unit Administration" fontIcon="admin_panel_settings"></mat-icon>
             Administration
           </button>
diff --git a/src/app/common/header/task-dropdown/task-dropdown.component.scss b/src/app/common/header/task-dropdown/task-dropdown.component.scss
index b9cee1b637..30a369a07c 100644
--- a/src/app/common/header/task-dropdown/task-dropdown.component.scss
+++ b/src/app/common/header/task-dropdown/task-dropdown.component.scss
@@ -1,5 +1,5 @@
 .mat-icon {
-  color: black;
+  color: var(--ot-color-text);
   overflow: initial;
 }
 
diff --git a/src/app/common/header/task-dropdown/task-dropdown.component.spec.ts b/src/app/common/header/task-dropdown/task-dropdown.component.spec.ts
index b2a4aa36ca..bc4976e202 100644
--- a/src/app/common/header/task-dropdown/task-dropdown.component.spec.ts
+++ b/src/app/common/header/task-dropdown/task-dropdown.component.spec.ts
@@ -1,7 +1,7 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { UIRouterModule } from '@uirouter/angular';
-
-import { TaskDropdownComponent } from './task-dropdown.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {TaskDropdownComponent} from './task-dropdown.component';
 
 describe('TaskDropdownComponent', () => {
   let component: TaskDropdownComponent;
@@ -10,7 +10,7 @@ describe('TaskDropdownComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [TaskDropdownComponent],
-      imports: [UIRouterModule.forRoot()],
+      imports: [RouterTestingModule],
     }).compileComponents();
   });
 
diff --git a/src/app/common/header/task-dropdown/task-dropdown.component.ts b/src/app/common/header/task-dropdown/task-dropdown.component.ts
index f905c7b822..08d3b0e861 100644
--- a/src/app/common/header/task-dropdown/task-dropdown.component.ts
+++ b/src/app/common/header/task-dropdown/task-dropdown.component.ts
@@ -1,30 +1,35 @@
-import { Component, Input } from '@angular/core';
-import { UIRouter } from '@uirouter/core';
-import { Project, Unit, UnitRole } from 'src/app/api/models/doubtfire-model';
-import { ViewType } from 'src/app/projects/states/index/global-state.service';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter} from 'rxjs';
+import {Project, Unit, UnitRole} from 'src/app/api/models/doubtfire-model';
+import {ViewType} from 'src/app/projects/states/index/global-state.service';
+import {TutorNotesModalService} from '../../modals/tutor-notes-modal/tutor-notes-modal.service';
 
 @Component({
   selector: 'task-dropdown',
   templateUrl: './task-dropdown.component.html',
   styleUrls: ['./task-dropdown.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDropdownComponent {
   currentActivity: string;
   menuText: string;
-  @Input() data: { isTutor: boolean };
+  @Input() data: {isTutor: boolean};
   @Input() currentUnit: Unit;
   @Input() currentProject: Project;
   @Input() currentView: ViewType;
   @Input() unitRole: UnitRole;
 
-  taskToShortName: { [key: string]: string } = {
-    'Learning Outcomes': 'Outcomes',
+  taskToShortName: Record<string, string> = {
     'Portfolio Creation': 'Portfolio',
     'Staff Tasks': 'Staff Tasks',
     'Student Groups': 'Groups',
     'Student List': 'Students',
     'Student Portfolios': 'Portfolios',
     'Task Explorer': 'Task Explorer',
+    'Task Moderation': 'Task Moderation',
+    'Task Overflow': 'Task Overflow',
     'Task Inbox': 'Inbox',
     'Task Lists': 'Tasks',
     'Tutorial List': 'Tutorials',
@@ -32,12 +37,41 @@ export class TaskDropdownComponent {
     'Unit Analytics': 'Analytics',
   };
 
-  taskDropdownData: { title: string; target: string; visible: any }[];
-  constructor(private router: UIRouter) {
-    this.router.transitionService.onSuccess({ to: '**' }, (trans) => {
-      this.currentActivity = trans.to().data.task;
-      this.menuText = this.taskToShortName?.[this.currentActivity] ?? this.currentActivity;
-    });
+  taskDropdownData: {title: string; target: string; visible: boolean}[];
+  constructor(
+    private angularRouter: Router,
+    private route: ActivatedRoute,
+    private tutorNotesModal: TutorNotesModalService,
+  ) {
+    this.angularRouter.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe(() => this.setCurrentActivityFromAngularRoute());
+    this.setCurrentActivityFromAngularRoute();
   }
 
+  public get canMarkOverflowTask() {
+    // this.unitRole does not have permission-based fields exposed such as canMarkOverflowTasks
+    // so we must access them via the unit data
+    const staff = this.currentUnit.staff.find((ur) => ur.id === this.unitRole.id);
+    return staff?.canMarkOverflowTasks;
+  }
+
+  public get isMentor(): boolean {
+    return this.currentUnit.staff.some((ur) => ur.mentorId === this.unitRole.id);
+  }
+
+  openTutorNotes() {
+    this.tutorNotesModal.show(null, this.unitRole);
+  }
+
+  private setCurrentActivityFromAngularRoute(): void {
+    let route = this.route.root;
+
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+
+    this.currentActivity = route.snapshot.data.task;
+    this.menuText = this.taskToShortName?.[this.currentActivity] ?? this.currentActivity;
+  }
 }
diff --git a/src/app/common/header/unit-dropdown/unit-dropdown.component.html b/src/app/common/header/unit-dropdown/unit-dropdown.component.html
index 8ac2a35e17..18a61c844f 100644
--- a/src/app/common/header/unit-dropdown/unit-dropdown.component.html
+++ b/src/app/common/header/unit-dropdown/unit-dropdown.component.html
@@ -1,19 +1,19 @@
 <div class="flex items-center">
   @if (unit) {
     <f-unit-code
+      #menuState="matMenuTrigger"
+      matTooltip="{{ unit?.name }}"
       [isDropdown]="true"
+      [matMenuTriggerFor]="menu"
       [shiftBetweenBadges]="false"
+      [unit_code]="$safeNavigationMigration(unit?.code)"
       [width]="80"
-      [unit_code]="unit?.code"
-      matTooltip="{{ unit.name }}"
-      [matMenuTriggerFor]="menu"
-      #menuState="matMenuTrigger"
     >
       <mat-icon>{{ menuState.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down' }} </mat-icon>
     </f-unit-code>
   }
   @if (!unit) {
-    <button mat-button [matMenuTriggerFor]="menu" #menuState="matMenuTrigger">
+    <button #menuState="matMenuTrigger" mat-button [matMenuTriggerFor]="menu">
       <span class="flex items-center">
         <span>Select Unit</span>
         <mat-icon>{{ menuState.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down' }} </mat-icon>
@@ -23,55 +23,53 @@
 </div>
 
 <mat-menu #menu="matMenu" class="unit-dropdown-menu">
-  @if (media.isActive('xs')) {
-    <button uiSref="home" mat-menu-item>
+  @if (isExtraSmall) {
+    <button mat-menu-item routerLink="/home">
       <mat-icon
-        uiSref="home"
+        aria-label="Home Icon"
+        class="formatif-icon"
         style="margin-right: 20px"
         svgIcon="formatif-logo"
-        class="formatif-icon"
-        aria-label="Home Icon"
       ></mat-icon>
       <div class="unitName">Home</div>
       <span class="flex-grow"></span>
     </button>
   }
-  @if (media.isActive('xs')) {
+  @if (isExtraSmall) {
     <mat-divider></mat-divider>
   }
 
-  <h2 mat-subheader [hidden]="unitRoles?.length === 0" class="my-3 ml-6">Units you teach</h2>
+  <h2 class="my-2 ml-3.5" mat-subheader [hidden]="unitRoles?.length === 0">Units you teach</h2>
   @for (unitRole of unitRoles; track unitRole) {
     @if (!unitRole.unit.teachingPeriod || unitRole.unit.teachingPeriod?.active) {
-      <div
-        uiSref="units/tasks/inbox"
-        [uiParams]="{unitId: unitRole.unit.id}"
-        mat-menu-item
+      <button
         class="w-full"
+        mat-menu-item
+        type="button"
+        [routerLink]="['/units', unitRole.unit.id, 'tasks', 'inbox']"
       >
-        <div class="flex items-center w-full">
-          <div class="flex-none unitName truncate max-w-[220px]">{{ unitRole.unit.name }}</div>
+        <div class="flex w-full items-center">
+          <div class="unitName max-w-[220px] flex-none truncate">{{ unitRole.unit.name }}</div>
           <div class="grow"></div>
-          <f-unit-code [width]="80" [unit_code]="unitRole.unit.code"></f-unit-code>
+          <f-unit-code [unit_code]="unitRole.unit.code" [width]="80"></f-unit-code>
         </div>
-      </div>
+      </button>
     }
   }
 
   <mat-divider [hidden]="unitRoles?.length === 0 || projects?.length === 0"></mat-divider>
-  <h2 mat-subheader [hidden]="projects?.length === 0" class="my-3 ml-6">Units you study</h2>
+  <h2 class="my-2 ml-3.5" mat-subheader [hidden]="projects?.length === 0">Units you study</h2>
   @for (project of projects; track project) {
     @if (!project.unit.teachingPeriod || project.unit.teachingPeriod.active) {
       <button
-        uiSref="projects/dashboard"
-        [uiParams]="{projectId: project.id, taskAbbr: ''}"
-        class="flex items-center mb-2"
+        class="mb-1 flex items-center"
         mat-menu-item
+        [routerLink]="['/projects', project.id, 'dashboard']"
       >
-        <span class="flex flex-row border-box">
+        <span class="border-box flex flex-row">
           <div class="unitName">{{ project.unit.name }}</div>
-          <span class="flex-1 border-box"></span>
-          <f-unit-code [width]="80" [unit_code]="project.unit.code"></f-unit-code>
+          <span class="border-box flex-1"></span>
+          <f-unit-code [unit_code]="project.unit.code" [width]="80"></f-unit-code>
         </span>
       </button>
     }
diff --git a/src/app/common/header/unit-dropdown/unit-dropdown.component.scss b/src/app/common/header/unit-dropdown/unit-dropdown.component.scss
index ffa6ce375c..2c3ca61f68 100644
--- a/src/app/common/header/unit-dropdown/unit-dropdown.component.scss
+++ b/src/app/common/header/unit-dropdown/unit-dropdown.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../theme.scss';
+@use 'theme' as *;
 
 ::ng-deep .unit-dropdown-menu.mat-mdc-menu-panel {
   max-width: 400px !important;
@@ -29,5 +29,5 @@ mat-chip-option.f-chip {
   color: white;
   font-style: bold;
   opacity: 1;
-  --mdc-chip-disabled-label-text-color: white;
+  --mat-chip-disabled-label-text-color: white;
 }
diff --git a/src/app/common/header/unit-dropdown/unit-dropdown.component.spec.ts b/src/app/common/header/unit-dropdown/unit-dropdown.component.spec.ts
index c3da5ae9ff..31cab69f47 100644
--- a/src/app/common/header/unit-dropdown/unit-dropdown.component.spec.ts
+++ b/src/app/common/header/unit-dropdown/unit-dropdown.component.spec.ts
@@ -1,26 +1,21 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatMenuModule } from '@angular/material/menu';
-import { dateService } from 'src/app/ajs-upgraded-providers';
-
-import { UnitDropdownComponent } from './unit-dropdown.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatMenuModule} from '@angular/material/menu';
+import {UnitDropdownComponent} from './unit-dropdown.component';
 
 describe('UnitDropdownComponent', () => {
   let component: UnitDropdownComponent;
   let fixture: ComponentFixture<UnitDropdownComponent>;
-  let dateServiceStub: jasmine.SpyObj<any>;
-
-  beforeEach(
-    waitForAsync(() => {
-      dateServiceStub = jasmine.createSpy();
-      dateServiceStub.showDate = true;
-
-      TestBed.configureTestingModule({
-        declarations: [UnitDropdownComponent],
-        imports: [MatMenuModule],
-        providers: [{ provide: dateService, useValue: dateServiceStub }],
-      }).compileComponents();
-    })
-  );
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UnitDropdownComponent],
+      imports: [MatMenuModule],
+      providers: [{provide: BreakpointObserver, useValue: {isMatched: () => false}}],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(UnitDropdownComponent);
diff --git a/src/app/common/header/unit-dropdown/unit-dropdown.component.ts b/src/app/common/header/unit-dropdown/unit-dropdown.component.ts
index 871ddf4225..d9d7ead2f4 100644
--- a/src/app/common/header/unit-dropdown/unit-dropdown.component.ts
+++ b/src/app/common/header/unit-dropdown/unit-dropdown.component.ts
@@ -1,20 +1,24 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {Project, Unit, UnitRole} from 'src/app/api/models/doubtfire-model';
-import {MediaObserver} from 'ng-flex-layout';
 
 @Component({
   selector: 'unit-dropdown',
   templateUrl: './unit-dropdown.component.html',
   styleUrls: ['./unit-dropdown.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class UnitDropdownComponent implements OnInit {
+export class UnitDropdownComponent {
   @Input() unitRoles: UnitRole[];
   @Input() projects: Project[];
   @Input() unit: Unit;
 
   unitTitle: string;
 
-  constructor(public media: MediaObserver) {}
+  get isExtraSmall(): boolean {
+    return this.breakpointObserver.isMatched('(max-width: 599.98px)');
+  }
 
-  ngOnInit(): void {}
+  constructor(private breakpointObserver: BreakpointObserver) {}
 }
diff --git a/src/app/common/hero-sidebar/hero-sidebar.component.html b/src/app/common/hero-sidebar/hero-sidebar.component.html
index 8136d06734..09a24f8278 100644
--- a/src/app/common/hero-sidebar/hero-sidebar.component.html
+++ b/src/app/common/hero-sidebar/hero-sidebar.component.html
@@ -1,12 +1,17 @@
 <div class="left-banner flex flex-col">
   <div class="header">
-    <div class="wordmark flex justify-start items-center">
-      <img src="../../../assets/images/logo-white.svg" width="40px" alt="Homepage Logo" style="padding-right: 6px" />
+    <div class="wordmark flex items-center justify-start">
+      <img
+        alt="Homepage Logo"
+        src="../../../assets/images/logo-white.svg"
+        style="padding-right: 6px"
+        width="40px"
+      />
       <p>{{ externalName.value }}</p>
     </div>
-    <h1 class="mt-6">Manage your learning, with feedback you'll want to receive.</h1>
+    <h1 class="mt-3.5">Manage your learning, with feedback you'll want to receive.</h1>
   </div>
 
-  <div class="flex-1" style="max-height: 10%;"></div>
+  <div class="flex-1" style="max-height: 10%"></div>
   <div class="pattern flex-grow"></div>
 </div>
diff --git a/src/app/common/hero-sidebar/hero-sidebar.component.scss b/src/app/common/hero-sidebar/hero-sidebar.component.scss
index aaf7e537d5..b49aa2b548 100644
--- a/src/app/common/hero-sidebar/hero-sidebar.component.scss
+++ b/src/app/common/hero-sidebar/hero-sidebar.component.scss
@@ -35,8 +35,20 @@
   }
 
   .pattern {
-    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, to(rgba(0, 0, 0, 1)), from(rgba(0, 0, 0, 0)));
-    mask-image: -webkit-gradient(linear, left top, left bottom, to(rgba(0, 0, 0, 1)), from(rgba(0, 0, 0, 0)));
+    -webkit-mask-image: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      to(rgba(0, 0, 0, 1)),
+      from(rgba(0, 0, 0, 0))
+    );
+    mask-image: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      to(rgba(0, 0, 0, 1)),
+      from(rgba(0, 0, 0, 0))
+    );
     transition: 4s linear all;
     background-color: #e5e5f7;
     opacity: 1;
diff --git a/src/app/common/hero-sidebar/hero-sidebar.component.spec.ts b/src/app/common/hero-sidebar/hero-sidebar.component.spec.ts
index 5cc1ec36c0..96247b980e 100644
--- a/src/app/common/hero-sidebar/hero-sidebar.component.spec.ts
+++ b/src/app/common/hero-sidebar/hero-sidebar.component.spec.ts
@@ -1,6 +1,8 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HeroSidebarComponent } from './hero-sidebar.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BehaviorSubject} from 'rxjs';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {HeroSidebarComponent} from './hero-sidebar.component';
 
 describe('HeroSidebarComponent', () => {
   let component: HeroSidebarComponent;
@@ -8,9 +10,14 @@ describe('HeroSidebarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HeroSidebarComponent ]
-    })
-    .compileComponents();
+      declarations: [HeroSidebarComponent],
+      providers: [
+        {
+          provide: DoubtfireConstants,
+          useValue: {ExternalName: new BehaviorSubject<string>('Doubtfire')},
+        },
+      ],
+    }).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/app/common/hero-sidebar/hero-sidebar.component.ts b/src/app/common/hero-sidebar/hero-sidebar.component.ts
index 2910b74cb6..7c54a7bd8c 100644
--- a/src/app/common/hero-sidebar/hero-sidebar.component.ts
+++ b/src/app/common/hero-sidebar/hero-sidebar.component.ts
@@ -1,14 +1,14 @@
-import { Component, OnInit } from '@angular/core';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 
 @Component({
   selector: 'f-hero-sidebar',
   templateUrl: './hero-sidebar.component.html',
   styleUrls: ['./hero-sidebar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class HeroSidebarComponent implements OnInit {
+export class HeroSidebarComponent {
   public externalName = this.constants.ExternalName;
   constructor(private constants: DoubtfireConstants) {}
-
-  ngOnInit(): void {}
 }
diff --git a/src/app/common/learning-outcome-editor/learning-outcome-editor.component.html b/src/app/common/learning-outcome-editor/learning-outcome-editor.component.html
new file mode 100644
index 0000000000..c8c668aabe
--- /dev/null
+++ b/src/app/common/learning-outcome-editor/learning-outcome-editor.component.html
@@ -0,0 +1,206 @@
+<div class="flex flex-col gap-5">
+  <table
+    #outcomeTable
+    class="f-table selectable flex-grow"
+    mat-table
+    matSort
+    [dataSource]="outcomeSource"
+    (matSortChange)="sortOutcomeData($event)"
+  >
+    <ng-container matColumnDef="abbreviation" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Abbreviation</th>
+      <td
+        *matCellDef="let learningOutcome"
+        mat-cell
+        (click)="selectLearningOutcome(learningOutcome)"
+      >
+        {{ learningOutcome.abbreviation }}
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="shortDescription" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Short Description</th>
+      <td
+        *matCellDef="let learningOutcome"
+        mat-cell
+        (click)="selectLearningOutcome(learningOutcome)"
+      >
+        {{ learningOutcome.shortDescription }}
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="fullOutcomeDescription" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Full Outcome Description</th>
+      <td
+        *matCellDef="let learningOutcome"
+        mat-cell
+        (click)="selectLearningOutcome(learningOutcome)"
+      >
+        {{ learningOutcome.fullOutcomeDescription }}
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="connectedOutcomes" sticky>
+      <th *matHeaderCellDef mat-header-cell>Connected Learning Outcomes</th>
+      <td
+        *matCellDef="let learningOutcome"
+        mat-cell
+        (click)="selectLearningOutcome(learningOutcome)"
+      >
+        @for (outcome of getLinkedOutcomes(learningOutcome); track outcome.abbreviation) {
+          <mat-chip-row matTooltip="{{ outcome.shortDescription }}">{{
+            outcome.abbreviation
+          }}</mat-chip-row>
+        }
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="learningOutcomeAction" sticky>
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td
+        *matCellDef="let learningOutcome"
+        mat-cell
+        (click)="selectLearningOutcome(learningOutcome)"
+      >
+        @if (learningOutcomeHasChanges(learningOutcome)) {
+          <button
+            aria-label="save learning outcome"
+            color="primary"
+            mat-icon-button
+            (click)="saveLearningOutcome(learningOutcome)"
+          >
+            <mat-icon>save</mat-icon>
+          </button>
+        }
+        <button
+          aria-label="delete learning outcome"
+          color="warn"
+          mat-icon-button
+          (click)="deleteLearningOutcome(learningOutcome)"
+        >
+          <mat-icon>delete</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr *matHeaderRowDef="outcomeColumns" mat-header-row></tr>
+    <tr
+      *matRowDef="let row; columns: outcomeColumns"
+      mat-row
+      [style.background]="selectedOutcome === row ? 'lightblue' : ''"
+    ></tr>
+  </table>
+
+  <span class="flex items-center">
+    <div class="h-12">
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Filter" (keyup)="applyFilter($event.target.value)" />
+      </mat-form-field>
+    </div>
+    <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+    <span class="flex-grow"></span>
+    @if (abbreviationPrefix !== 'GLO') {
+      <label>Outcomes CSV</label>
+      <button mat-icon-button (click)="downloadCsv('Learning Outcomes')">
+        <mat-icon>download</mat-icon>
+      </button>
+      <button mat-icon-button (click)="uploadCsv('Learning Outcomes')">
+        <mat-icon>upload_file</mat-icon>
+      </button>
+      <span class="flex-grow"></span>
+    }
+    <label>Feedback CSV</label>
+    <button mat-icon-button (click)="downloadCsv('Feedback Templates')">
+      <mat-icon>download</mat-icon>
+    </button>
+    <button mat-icon-button (click)="uploadCsv('Feedback Templates')">
+      <mat-icon>upload_file</mat-icon>
+    </button>
+    <span class="flex-grow"></span>
+    <button color="primary" mat-raised-button (click)="createLearningOutcome()">Add Outcome</button>
+  </span>
+
+  @if (selectedOutcome) {
+    <div class="rounded-xl border border-gray-200 bg-white p-3.5 shadow">
+      <div>
+        <h4 class="mt-0.5 text-base font-bold text-gray-900">Edit Outcome</h4>
+
+        <div class="flex flex-row gap-2.5">
+          <mat-form-field appearance="outline" class="basis-1/3">
+            <mat-label>Abbreviation</mat-label>
+            <input
+              matInput
+              maxlength="5"
+              pattern=".*\S.*"
+              required
+              [(ngModel)]="selectedOutcome.abbreviation"
+            />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="flex-grow">
+            <mat-label>Short Description</mat-label>
+            <input
+              matInput
+              pattern=".*\S.*"
+              required
+              [(ngModel)]="selectedOutcome.shortDescription"
+            />
+          </mat-form-field>
+        </div>
+
+        <mat-form-field appearance="outline" class="flex flex-grow">
+          <mat-label>Full Outcome Description</mat-label>
+          <textarea
+            matInput
+            pattern=".*\S.*"
+            required
+            [(ngModel)]="selectedOutcome.fullOutcomeDescription"
+          >
+          </textarea>
+        </mat-form-field>
+
+        @if (abbreviationPrefix !== 'GLO') {
+          <mat-form-field appearance="outline" class="flex flex-grow">
+            <mat-label>Connected Learning Outcomes</mat-label>
+            <mat-chip-grid #chipGrid aria-label="Outcome selection">
+              @for (outcome of selectedConnectedOutcomes(); track outcome.abbreviation) {
+                <mat-chip-row (removed)="remove(outcome)">
+                  {{ outcome.abbreviation }}
+                  <button matChipRemove [attr.aria-label]="'remove ' + outcome.abbreviation">
+                    <mat-icon>cancel</mat-icon>
+                  </button>
+                </mat-chip-row>
+              }
+            </mat-chip-grid>
+            <input
+              #connectedOutcomeInput
+              name="typedConnectedOutcome"
+              placeholder="Connect an outcome..."
+              [disabled]="!this.context"
+              [matAutocomplete]="auto"
+              [matChipInputFor]="chipGrid"
+              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+              [(ngModel)]="typedConnectedOutcome"
+              (matChipInputTokenEnd)="add($event)"
+            />
+            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="select($event)">
+              @for (outcome of filteredOutcomes(); track outcome) {
+                <mat-option [value]="outcome.abbreviation"
+                  >{{ outcome.abbreviation }} - {{ outcome.shortDescription }}</mat-option
+                >
+              }
+            </mat-autocomplete>
+          </mat-form-field>
+        }
+
+        <div class="flex">
+          <span class="flex-grow"></span>
+          <button color="primary" mat-raised-button (click)="saveLearningOutcome(selectedOutcome)">
+            Save Outcome
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <f-feedback-template-editor
+      [context]="context"
+      [selectedOutcome]="selectedOutcome"
+    ></f-feedback-template-editor>
+  }
+</div>
diff --git a/src/app/common/learning-outcome-editor/learning-outcome-editor.component.spec.ts b/src/app/common/learning-outcome-editor/learning-outcome-editor.component.spec.ts
new file mode 100644
index 0000000000..19014647d7
--- /dev/null
+++ b/src/app/common/learning-outcome-editor/learning-outcome-editor.component.spec.ts
@@ -0,0 +1,41 @@
+import {describe, expect, it} from 'vitest';
+import {LearningOutcomeEditorComponent} from './learning-outcome-editor.component';
+
+describe('LearningOutcomeEditorComponent.getNextOutcomeNumber', () => {
+  // Build the component without the Angular injector so the test stays focused
+  // on the numbering logic.
+  function editorWith(prefix: string, abbreviations: string[]): LearningOutcomeEditorComponent {
+    const comp = Object.create(
+      LearningOutcomeEditorComponent.prototype,
+    ) as LearningOutcomeEditorComponent;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (comp as any).abbreviationPrefix = prefix;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (comp as any).outcomeSource = {data: abbreviations.map((abbreviation) => ({abbreviation}))};
+    return comp;
+  }
+
+  it('returns 1 when there are no outcomes', () => {
+    expect(editorWith('TLO', []).getNextOutcomeNumber()).toBe(1);
+  });
+
+  it('returns max + 1, not last + 1, when rows are out of order', () => {
+    expect(editorWith('TLO', ['TLO1', 'TLO3', 'TLO2']).getNextOutcomeNumber()).toBe(4);
+  });
+
+  it('ignores a non-numeric abbreviation instead of producing NaN', () => {
+    expect(editorWith('TLO', ['TLO1', 'TLOx']).getNextOutcomeNumber()).toBe(2);
+  });
+
+  it('returns 1 when every abbreviation is non-numeric', () => {
+    expect(editorWith('TLO', ['TLOa', 'TLOb']).getNextOutcomeNumber()).toBe(1);
+  });
+
+  it('ignores an abbreviation where the prefix is not at the start', () => {
+    expect(editorWith('TLO', ['1TLO', 'TLO2']).getNextOutcomeNumber()).toBe(3);
+  });
+
+  it('ignores a decimal suffix rather than producing a fractional number', () => {
+    expect(editorWith('TLO', ['TLO.5', 'TLO4']).getNextOutcomeNumber()).toBe(5);
+  });
+});
diff --git a/src/app/common/learning-outcome-editor/learning-outcome-editor.component.ts b/src/app/common/learning-outcome-editor/learning-outcome-editor.component.ts
new file mode 100644
index 0000000000..0bf6b4fb8d
--- /dev/null
+++ b/src/app/common/learning-outcome-editor/learning-outcome-editor.component.ts
@@ -0,0 +1,433 @@
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  ViewChild,
+  computed,
+  effect,
+  inject,
+  model,
+  signal,
+} from '@angular/core';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {Subscription} from 'rxjs';
+import {
+  FeedbackTemplateService,
+  LearningOutcome,
+  LearningOutcomeService,
+  TaskDefinition,
+  TaskService,
+  Unit,
+} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+import {ConfirmationModalService} from '../modals/confirmation-modal/confirmation-modal.service';
+import {
+  CsvResult,
+  CsvResultModalService,
+} from '../modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalService} from '../modals/csv-upload-modal/csv-upload-modal.service';
+import {NestedCsvDownloadModalService} from './nested-csv-download-modal/nested-csv-download-modal.service';
+
+@Component({
+  selector: 'f-learning-outcome-editor',
+  templateUrl: 'learning-outcome-editor.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class LearningOutcomeEditorComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
+  @Input() context?: TaskDefinition | Unit;
+
+  @ViewChild('outcomeTable', {static: false}) outcomeTable: MatTable<LearningOutcome>;
+  @ViewChild(MatSort, {static: false}) outcomeSort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) outcomePaginator: MatPaginator;
+
+  public outcomeSource: MatTableDataSource<LearningOutcome> = new MatTableDataSource([]);
+  public outcomeColumns: string[] = [
+    'abbreviation',
+    'shortDescription',
+    'fullOutcomeDescription',
+    'connectedOutcomes',
+    'learningOutcomeAction',
+  ];
+  public selectedOutcome: LearningOutcome;
+  public abbreviationPrefix: 'TLO' | 'ULO' | 'GLO';
+
+  public allOutcomes: LearningOutcome[] = [];
+  public selectedConnectedOutcomes = signal([]);
+
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    private alerts: AlertService,
+    private learningOutcomeService: LearningOutcomeService,
+    private fileDownloaderService: FileDownloaderService,
+    private nestedCsvDownloadModalService: NestedCsvDownloadModalService,
+    private feedbackTemplateService: FeedbackTemplateService,
+    private taskService: TaskService,
+    private csvResultModalService: CsvResultModalService,
+    private csvUploadModal: CsvUploadModalService,
+    private confirmationModal: ConfirmationModalService,
+  ) {
+    this.outcomeSource.filterPredicate = (data: LearningOutcome, filter: string) => {
+      const filterValue = filter.trim().toLowerCase();
+      return (
+        data.abbreviation.toLowerCase().includes(filterValue) ||
+        data.shortDescription.toLowerCase().includes(filterValue) ||
+        data.fullOutcomeDescription.toLowerCase().includes(filterValue)
+      );
+    };
+
+    effect(() => {
+      const linkedOutcomes = this.selectedConnectedOutcomes().map((outcome) => outcome.id);
+      if (
+        this.selectedOutcome &&
+        !this.sameIds(linkedOutcomes, this.selectedOutcome.linkedOutcomeIds)
+      ) {
+        this.selectedOutcome.linkedOutcomeIds = linkedOutcomes;
+      }
+    });
+  }
+
+  private sameIds(left: number[], right: number[]): boolean {
+    if (left.length !== right.length) {
+      return false;
+    }
+
+    const sortedLeft = [...left].sort((a, b) => a - b);
+    const sortedRight = [...right].sort((a, b) => a - b);
+    return sortedLeft.every((id, index) => id === sortedRight[index]);
+  }
+
+  ngOnInit(): void {
+    this.subscribeToLearningOutcomes();
+  }
+
+  ngAfterViewInit(): void {
+    this.outcomeSource.paginator = this.outcomePaginator;
+    this.outcomeSource.sort = this.outcomeSort;
+  }
+
+  private subscribeToLearningOutcomes(): void {
+    this.setAbbreviationPrefix();
+
+    if (!this.context) {
+      this.subscriptions.push(
+        this.learningOutcomeService.cache.values.subscribe((outcomes) => {
+          const glos = outcomes.filter((outcome) => outcome.contextType === null);
+          this.outcomeSource.data = glos;
+        }),
+      );
+      return;
+    }
+
+    this.subscriptions.push(
+      this.context.learningOutcomesCache.values.subscribe((learningOutcomes) => {
+        this.outcomeSource.data = learningOutcomes;
+      }),
+    );
+
+    this.subscriptions.push(
+      this.learningOutcomeService.cache.values.subscribe((outcomes) => {
+        const glos = outcomes.filter((outcome) => outcome.contextType === null);
+        this.allOutcomes = [...this.allOutcomes, ...glos];
+      }),
+    );
+
+    if (this.context instanceof TaskDefinition) {
+      this.subscriptions.push(
+        this.context.unit.learningOutcomesCache.values.subscribe((learningOutcomes) => {
+          this.allOutcomes = [...this.allOutcomes, ...learningOutcomes];
+        }),
+      );
+    }
+  }
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.setAbbreviationPrefix();
+    this.selectedOutcome = null;
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((s) => s.unsubscribe());
+  }
+
+  setAbbreviationPrefix(): void {
+    if (!this.context) {
+      this.abbreviationPrefix = 'GLO';
+    } else if (this.context instanceof TaskDefinition) {
+      this.abbreviationPrefix = 'TLO';
+    } else if (this.context instanceof Unit) {
+      this.abbreviationPrefix = 'ULO';
+    }
+  }
+
+  public saveLearningOutcome(learningOutcome: LearningOutcome) {
+    if (
+      !learningOutcome.abbreviation.trim() ||
+      !learningOutcome.shortDescription.trim() ||
+      !learningOutcome.fullOutcomeDescription.trim()
+    ) {
+      this.alerts.error('Failed to save learning outcome. Fill in required fields.');
+      return;
+    }
+    learningOutcome.save().subscribe({
+      next: () => {
+        this.alerts.success('Outcome saved');
+        learningOutcome.setOriginalSaveData(this.learningOutcomeService.mapping);
+        this.selectLearningOutcome(this.selectedOutcome);
+      },
+      error: () => this.alerts.error('Failed to save learning outcome. Please try again.'),
+    });
+  }
+
+  public selectLearningOutcome(learningOutcome: LearningOutcome) {
+    if (this.selectedOutcome === learningOutcome) {
+      this.selectedOutcome = null;
+      this.selectedConnectedOutcomes.update((_selectedConnectedOutcomes) => []);
+    } else {
+      this.selectedOutcome = learningOutcome;
+      this.selectedConnectedOutcomes.update(() => this.getLinkedOutcomes(learningOutcome));
+      if (!this.selectedOutcome.context) {
+        this.selectedOutcome.context = this.context;
+      }
+
+      if (!this.selectedOutcome.hasOriginalSaveData) {
+        this.selectedOutcome.setOriginalSaveData(this.learningOutcomeService.mapping);
+      }
+    }
+  }
+
+  public sortOutcomeData(sort: Sort) {
+    const data = this.outcomeSource.data;
+
+    if (!sort.active || sort.direction === '') {
+      this.outcomeSource.data = data;
+      return;
+    }
+
+    this.outcomeSource.data = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'abbreviation':
+          return this.compare(a.abbreviation, b.abbreviation, isAsc);
+        case 'shortDescription':
+          return this.compare(a.shortDescription, b.shortDescription, isAsc);
+        case 'fullOutcomeDescription':
+          return this.compare(a.fullOutcomeDescription, b.fullOutcomeDescription, isAsc);
+        default:
+          return 0;
+      }
+    });
+  }
+
+  public compare(a: number | string, b: number | string, isAsc: boolean): number {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  applyFilter(filterValue: string) {
+    this.outcomeSource.filter = filterValue;
+    if (this.outcomeSource.paginator) {
+      this.outcomeSource.paginator.firstPage();
+    }
+  }
+
+  public learningOutcomeHasChanges(learningOutcome: LearningOutcome): boolean {
+    return learningOutcome.hasChanges(this.learningOutcomeService.mapping);
+  }
+
+  public deleteLearningOutcome(learningOutcome: LearningOutcome) {
+    this.confirmationModal.show(
+      'Delete learning outcome',
+      'Are you sure you want to delete this outcome? This action is final.',
+      () => {
+        learningOutcome.delete().subscribe({
+          next: () => {
+            this.alerts.success('Learning outcome deleted');
+            if (this.selectedOutcome === learningOutcome) {
+              this.selectLearningOutcome(this.selectedOutcome);
+            }
+          },
+          error: () => this.alerts.error('Failed to delete learning outcome. Please try again.'),
+        });
+      },
+    );
+  }
+
+  public uploadCsv(type: 'Learning Outcomes' | 'Feedback Templates') {
+    let url: string;
+
+    if (type === 'Learning Outcomes') {
+      url = this.context.getOutcomeBatchUploadUrl();
+    } else {
+      if (this.context) {
+        url = this.context.getFeedbackTemplateBatchUploadUrl();
+      } else {
+        url = `${API_URL}/global/feedback_chips/csv`;
+      }
+    }
+
+    this.csvUploadModal.show(
+      `Upload ${type} as CSV`,
+      'Test message',
+      {file: {name: `${type} CSV Data`, type: 'csv'}},
+      url,
+      (response: CsvResult) => {
+        this.csvResultModalService.show(`${type} CSV Upload Results`, response);
+        if (response.success.length > 0) {
+          let contextType: 'units' | 'task_definitions';
+          if (this.context instanceof Unit) {
+            this.context.refresh();
+            contextType = 'units';
+          } else if (this.context instanceof TaskDefinition) {
+            this.context.unit.refresh();
+            contextType = 'task_definitions';
+          }
+          if (type === 'Feedback Templates' && contextType) {
+            this.feedbackTemplateService
+              .fetchAll({contextType, contextId: this.context.id}, {})
+              .subscribe({
+                error: () => this.alerts.error('Error loading task feedback templates.'),
+              });
+          }
+        }
+      },
+    );
+  }
+
+  public downloadCsv(type: 'Learning Outcomes' | 'Feedback Templates') {
+    let url: string;
+
+    if (type === 'Learning Outcomes') {
+      url = this.context.getOutcomeBatchUploadUrl();
+    } else {
+      if (this.context) {
+        url = this.context.getFeedbackTemplateBatchUploadUrl();
+      } else {
+        url = `${API_URL}/global/feedback_chips/csv`;
+      }
+    }
+
+    let name = `${type}.csv`;
+
+    if (this.context instanceof TaskDefinition) {
+      name = `${this.context.unit.code}-${this.context.abbreviation}-${name}`;
+    } else if (this.context instanceof Unit) {
+      name = `${this.context.code}-${name}`;
+    }
+
+    if (this.context instanceof Unit) {
+      this.nestedCsvDownloadModalService.show(url, name, type);
+    } else {
+      this.fileDownloaderService.downloadFile(url, name);
+    }
+  }
+
+  public createLearningOutcome() {
+    const learningOutcome = new LearningOutcome();
+
+    if (this.context) {
+      learningOutcome.context = this.context;
+      if (this.context instanceof TaskDefinition) {
+        learningOutcome.contextType = 'TaskDefinition';
+      } else if (this.context instanceof Unit) {
+        learningOutcome.contextType = 'Unit';
+      }
+      learningOutcome.contextId = this.context.id;
+    }
+    learningOutcome.abbreviation = this.abbreviationPrefix + String(this.getNextOutcomeNumber());
+    learningOutcome.shortDescription = '';
+    learningOutcome.fullOutcomeDescription = '';
+    this.selectedConnectedOutcomes.update((_selectedConnectedOutcomes) => []);
+
+    this.selectedOutcome = learningOutcome;
+  }
+
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  readonly typedConnectedOutcome = model('');
+  readonly filteredOutcomes = computed(() => {
+    const currentOutcome = this.typedConnectedOutcome().toLowerCase();
+    return this.allOutcomes.filter((outcome) => {
+      const abbreviation = outcome.abbreviation?.toLowerCase();
+      return (
+        !this.selectedConnectedOutcomes().includes(outcome) &&
+        (!currentOutcome || abbreviation?.includes(currentOutcome))
+      );
+    });
+  });
+
+  readonly announcer = inject(LiveAnnouncer);
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    if (value) {
+      const outcome = this.allOutcomes.find(
+        (o) => o.abbreviation?.toLowerCase() === value.toLowerCase(),
+      );
+      if (outcome && !this.selectedConnectedOutcomes().includes(outcome)) {
+        this.selectedConnectedOutcomes.update((selectedConnectedOutcomes) => [
+          ...selectedConnectedOutcomes,
+          outcome,
+        ]);
+      }
+    }
+
+    this.typedConnectedOutcome.set('');
+  }
+
+  remove(outcome: LearningOutcome): void {
+    this.selectedConnectedOutcomes.update((selectedConnectedOutcomes) => {
+      const updatedOutcomes = selectedConnectedOutcomes.filter(
+        (o) => o.abbreviation !== outcome.abbreviation,
+      );
+      this.announcer.announce(`Removed ${outcome.abbreviation}`);
+      return updatedOutcomes;
+    });
+  }
+
+  select(event: MatAutocompleteSelectedEvent): void {
+    const outcome = this.allOutcomes.find(
+      (o) => o.abbreviation === event.option.viewValue.split(' - ')[0],
+    );
+
+    if (outcome && !this.selectedConnectedOutcomes().includes(outcome)) {
+      this.selectedConnectedOutcomes.update((selectedConnectedOutcomes) => [
+        ...selectedConnectedOutcomes,
+        outcome,
+      ]);
+    }
+
+    this.typedConnectedOutcome.set('');
+    event.option.deselect();
+  }
+
+  getLinkedOutcomes(learningOutcome: LearningOutcome): LearningOutcome[] {
+    return this.allOutcomes.filter((outcome) =>
+      learningOutcome.linkedOutcomeIds.includes(outcome.id),
+    );
+  }
+
+  getNextOutcomeNumber(): number {
+    const prefix = this.abbreviationPrefix;
+    const numbers = (this.outcomeSource.data || [])
+      .map((outcome) => outcome.abbreviation ?? '')
+      .filter((abbreviation) => abbreviation.startsWith(prefix))
+      .map((abbreviation) => abbreviation.slice(prefix.length))
+      .filter((suffix) => /^\d+$/.test(suffix))
+      .map((suffix) => Number(suffix));
+    return numbers.length > 0 ? Math.max(...numbers) + 1 : 1;
+  }
+}
diff --git a/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.component.html b/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.component.html
new file mode 100644
index 0000000000..8049fc8a04
--- /dev/null
+++ b/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.component.html
@@ -0,0 +1,14 @@
+<div mat-dialog-content>
+  <h4 mat-dialog-title>Download the {{ data.type }} CSV</h4>
+  <div class="px-6">
+    <p>This action will download all {{ data.type.toLowerCase() }} associated with this unit.</p>
+    <mat-slide-toggle [(ngModel)]="includeNested"
+      >Include task {{ data.type.toLowerCase() }}</mat-slide-toggle
+    >
+  </div>
+</div>
+
+<div align="end" class="pr-6 pb-4" mat-dialog-actions>
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button color="primary" mat-raised-button (click)="downloadCsv()">Download</button>
+</div>
diff --git a/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.component.ts b/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.component.ts
new file mode 100644
index 0000000000..d17b8fd895
--- /dev/null
+++ b/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.component.ts
@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {FileDownloaderService} from '../../file-downloader/file-downloader.service';
+
+@Component({
+  selector: 'f-nested-csv-download-modal',
+  templateUrl: './nested-csv-download-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class NestedCsvDownloadModalComponent {
+  public includeNested = false;
+
+  constructor(
+    private fileDownloaderService: FileDownloaderService,
+    public dialogRef: MatDialogRef<NestedCsvDownloadModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: {url: string; name: string; type: string},
+  ) {}
+
+  downloadCsv() {
+    this.fileDownloaderService.downloadFile(
+      `${this.data.url}?includes_tlos=${this.includeNested}`,
+      this.data.name,
+    );
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.service.ts b/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.service.ts
new file mode 100644
index 0000000000..9aad82f209
--- /dev/null
+++ b/src/app/common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.service.ts
@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {NestedCsvDownloadModalComponent} from './nested-csv-download-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NestedCsvDownloadModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(url: string, name: string, type: string) {
+    this.dialog.open<NestedCsvDownloadModalComponent, {url: string; name: string; type: string}>(
+      NestedCsvDownloadModalComponent,
+      {
+        data: {url, name, type},
+        width: '500px',
+      },
+    );
+  }
+}
diff --git a/src/app/common/modals/about-doubtfire-modal/about-dialog-data.ts b/src/app/common/modals/about-doubtfire-modal/about-dialog-data.ts
index e85e989082..54259f51be 100644
--- a/src/app/common/modals/about-doubtfire-modal/about-dialog-data.ts
+++ b/src/app/common/modals/about-doubtfire-modal/about-dialog-data.ts
@@ -1,7 +1,7 @@
-import { GithubProfile } from './github-profile';
-import { ContributorData } from './contributor-data';
-import { BehaviorSubject } from 'rxjs';
-import { Sort } from '@angular/material/sort';
+import {Sort} from '@angular/material/sort';
+import {BehaviorSubject} from 'rxjs';
+import {ContributorData} from './contributor-data';
+import {GithubProfile} from './github-profile';
 
 /**
  * The data shared between the AboutDoubtfireModal and its associated
@@ -51,7 +51,7 @@ export class AboutDialogData {
           default:
             return 0;
         }
-      })
+      }),
     );
   }
 }
diff --git a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal-content.component.html b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal-content.component.html
new file mode 100644
index 0000000000..e129f420e4
--- /dev/null
+++ b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal-content.component.html
@@ -0,0 +1,98 @@
+<mat-dialog-content class="mat-typography">
+  <div class="flex w-full items-center justify-center gap-5 text-center">
+    <img alt="OnTrack logo" class="mb-3 size-24" src="/assets/images/logo.svg" />
+    <h1 class="logo text-5xl sm:text-6xl">
+      {{ data.externalName }}
+      <small
+        class="block text-right text-2xl leading-loose"
+        [hidden]="data.externalName !== 'Doubtfire'"
+      >
+        Version 6
+      </small>
+    </h1>
+  </div>
+  <mat-divider class="my-6"></mat-divider>
+  <div>
+    <h2 class="text-center text-xl font-bold text-gray-800 uppercase">Lead Contributors</h2>
+    <ul
+      class="mx-auto flex w-11/12 list-none flex-wrap justify-center gap-y-8 p-0 sm:w-5/6 sm:gap-x-10 sm:py-12"
+    >
+      @for (person of data.mainContributors; track person) {
+        <li class="mx-auto w-4/5 sm:mx-0 sm:w-1/5">
+          <a
+            class="block w-full text-center text-lg text-gray-700 no-underline hover:underline"
+            target="_blank"
+            [href]="person.html_url"
+          >
+            <img alt="" class="mx-auto mb-4 w-full rounded-full" [src]="person.avatar_url" />
+            <div class="text-center leading-none font-bold">{{ person.name }}</div>
+            <div class="mt-1 block text-lg">&#64;{{ person.login }}</div>
+          </a>
+        </li>
+      }
+    </ul>
+    <h2 class="text-center text-xl font-bold text-gray-800 uppercase">Contributors</h2>
+    <table
+      class="mb-4 w-full"
+      mat-table
+      matSort
+      [dataSource]="data.allContributors"
+      (matSortChange)="sortData($event)"
+    >
+      <!-- Login Column -->
+      <ng-container matColumnDef="contributor">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Contributor</th>
+        <td *matCellDef="let element" mat-cell>
+          <a class="inline-flex items-center" target="_blank" [href]="element.htmlUrl">
+            <img alt="" class="m-4 w-12 rounded-full" [src]="element.avatarUrl" />&#64;{{
+              element.login
+            }}
+          </a>
+        </td>
+      </ng-container>
+      <!-- Contributions Column -->
+      <ng-container matColumnDef="contributions">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Contributions</th>
+        <td *matCellDef="let element" mat-cell>{{ element.totalContributions }}</td>
+      </ng-container>
+      <!-- API Contributions Column -->
+      <ng-container matColumnDef="api-contributions">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>API</th>
+        <td *matCellDef="let element" mat-cell>{{ element.apiContributions }}</td>
+      </ng-container>
+      <!-- Web Contributions Column -->
+      <ng-container matColumnDef="web-contributions">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Web</th>
+        <td *matCellDef="let element" mat-cell>{{ element.webContributions }}</td>
+      </ng-container>
+      <!-- Deploy Contributions Column -->
+      <ng-container matColumnDef="deploy-contributions">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Deploy</th>
+        <td *matCellDef="let element" mat-cell>{{ element.deployContributions }}</td>
+      </ng-container>
+      <!-- Doubtfire.io Contributions Column -->
+      <ng-container matColumnDef="io-contributions">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>doubtfire.io</th>
+        <td *matCellDef="let element" mat-cell>{{ element.ioContributions }}</td>
+      </ng-container>
+
+      <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+      <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+    </table>
+    <p class="text-muted text-center">&copy; 2012&ndash;2023. Made in Melbourne.</p>
+    <p class="text-muted text-center text-sm">
+      OnTrack is an
+      <a class="text-gray-900" href="http://github.com/doubtfire-lms" target="_blank"
+        >Open Source</a
+      >
+      project licensed under <strong>GNU Affero General Public License (AGPL) v3.0</strong>. Star us
+      on
+      <a class="text-gray-900" href="http://github.com/doubtfire-lms/doubtfire-web" target="_blank"
+        >GitHub</a
+      >!
+    </p>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-dialog-close mat-stroked-button>Close</button>
+</mat-dialog-actions>
diff --git a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal-content.tpl.html b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal-content.tpl.html
deleted file mode 100644
index 08c5fd09bf..0000000000
--- a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal-content.tpl.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<mat-dialog-content class="mat-typography">
-  <div class="modal-header">
-    <i class="logo"></i>
-    <h1 class="full logo">
-      {{data.externalName}}
-      <small [hidden]="data.externalName == 'Doubtfire'"> Powered By formatif </small>
-      <small [hidden]="data.externalName != 'Doubtfire'"> Version 6 </small>
-    </h1>
-  </div>
-  <div class="modal-body">
-    <h2>Lead Contributors</h2>
-    <ul>
-      @for (person of data.mainContributors; track person) {
-      <li>
-        <a target="_blank" [href]="person.html_url">
-          <img [src]="person.avatar_url" />
-          <div class="name">{{person.name}}</div>
-          <div class="handler">&#64;{{person.login}}</div>
-        </a>
-      </li>
-      }
-    </ul>
-    <h2>Contributors</h2>
-    <table mat-table [dataSource]="data.allContributors" matSort (matSortChange)="sortData($event)">
-      <!-- Login Column -->
-      <ng-container matColumnDef="contributor">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Contributor</th>
-        <td mat-cell *matCellDef="let element">
-          <a target="_blank" [href]="element.htmlUrl"><img [src]="element.avatarUrl" />&#64;{{element.login}}</a>
-        </td>
-      </ng-container>
-      <!-- Contributions Column -->
-      <ng-container matColumnDef="contributions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Contributions</th>
-        <td mat-cell *matCellDef="let element">{{element.totalContributions}}</td>
-      </ng-container>
-      <!-- API Contributions Column -->
-      <ng-container matColumnDef="api-contributions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>API</th>
-        <td mat-cell *matCellDef="let element">{{element.apiContributions}}</td>
-      </ng-container>
-      <!-- Web Contributions Column -->
-      <ng-container matColumnDef="web-contributions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Web</th>
-        <td mat-cell *matCellDef="let element">{{element.webContributions}}</td>
-      </ng-container>
-      <!-- Deploy Contributions Column -->
-      <ng-container matColumnDef="deploy-contributions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Deploy</th>
-        <td mat-cell *matCellDef="let element">{{element.deployContributions}}</td>
-      </ng-container>
-      <!-- Doubtfire.io Contributions Column -->
-      <ng-container matColumnDef="io-contributions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>doubtfire.io</th>
-        <td mat-cell *matCellDef="let element">{{element.ioContributions}}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-    <p class="text-muted text-center">&copy; 2012&ndash;2023. Made in Melbourne.</p>
-    <p class="text-muted text-center logo-smallprint">
-      Doubtfire is an <a href="http://github.com/doubtfire-lms">Open Source</a> project licensed under
-      <strong>GNU Affero General Public License (AGPL) v3.0</strong>. Star us on
-      <a href="http://github.com/doubtfire-lms/doubtfire-web">GitHub</a>!
-    </p>
-  </div>
-</mat-dialog-content>
-<mat-dialog-actions align="end">
-  <button mat-stroked-button mat-dialog-close>Close</button>
-</mat-dialog-actions>
diff --git a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component.ts b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component.ts
index a0fdbc70d6..123accbbb9 100644
--- a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component.ts
+++ b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component.ts
@@ -1,18 +1,19 @@
 //
 // Modal to show Doubtfire version info
 //
-import { Injectable, Component, Inject } from '@angular/core';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { AboutDoubtfireModalService } from '../about-doubtfire-modal/about-doubtfire-modal.service';
-import { GithubProfile } from './github-profile';
-
-import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { AboutDialogData } from './about-dialog-data';
-import { Sort } from '@angular/material/sort';
+import {ChangeDetectionStrategy, Component, Inject, Injectable} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
+import {Sort} from '@angular/material/sort';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {AboutDoubtfireModalService} from '../about-doubtfire-modal/about-doubtfire-modal.service';
+import {AboutDialogData} from './about-dialog-data';
+import {GithubProfile} from './github-profile';
 
 @Component({
   selector: 'about-doubtfire-dialog',
-  templateUrl: 'about-doubtfire-modal-content.tpl.html',
+  templateUrl: 'about-doubtfire-modal-content.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class AboutDoubtfireModalContent {
   public displayedColumns: string[] = [
@@ -34,7 +35,7 @@ export class AboutDoubtfireModalContent {
 /**
  * The about doubtfire modal service - used to create and show the modal
  */
-// eslint-disable-next-line max-classes-per-file
+
 @Injectable()
 export class AboutDoubtfireModal {
   private loaded: boolean;
@@ -43,7 +44,7 @@ export class AboutDoubtfireModal {
   constructor(
     public dialog: MatDialog,
     private constants: DoubtfireConstants,
-    private aboutDoubtfireModalService: AboutDoubtfireModalService
+    private aboutDoubtfireModalService: AboutDoubtfireModalService,
   ) {
     this.loaded = false;
     this.aboutDialogData = new AboutDialogData();
diff --git a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.scss b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.scss
index 53ee58dac7..e69de29bb2 100644
--- a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.scss
+++ b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.scss
@@ -1,119 +0,0 @@
-[hidden] {
-  display: none !important;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version. */
-mat-dialog-content {
-  i.logo + h1.logo {
-    margin-left: 1ex;
-    display: inline-block;
-  }
-
-  .modal-header {
-    text-align: center;
-    h1.logo {
-      @include logo-font-rendering;
-      @media (max-width: $screen-sm) {
-        font-size: 3em;
-      }
-      small {
-        text-align: right;
-        font-size: 0.5em;
-      }
-      &.full.logo small {
-        display: block;
-        line-height: 2;
-      }
-      &.sup.logo small {
-        vertical-align: super;
-        margin-left: 0.5ex;
-        color: #999;
-      }
-    }
-  }
-
-  .modal-content {
-    padding-top: 3em;
-    padding-bottom: 3em;
-  }
-  i.logo {
-    height: 6em;
-    width: 6em;
-  }
-  h2 {
-    font-size: 1.2em;
-    font-weight: bold;
-    text-transform: uppercase;
-    text-align: center;
-    color: #333;
-  }
-  ul {
-    @include remove-list-padding;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-    width: 85%;
-    justify-content: center;
-    margin: 0 auto;
-  }
-  li {
-    @media (max-width: $screen-sm) {
-      width: 80%;
-      margin: 0 auto;
-      margin-bottom: 2em;
-    }
-    @media (min-width: $screen-sm) {
-      display: inline-block;
-      width: 15%;
-      margin: 3em 5% 3em 5%;
-    }
-    &.handler {
-      display: block;
-      margin-top: 0.25em;
-      font-size: 1.1em;
-    }
-    a {
-      display: block;
-      width: 100%;
-      text-align: center;
-      font-size: 1.1em;
-      color: #444;
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
-
-      .name {
-        line-height: 1;
-        font-weight: bold;
-        text-align: center;
-      }
-    }
-    img {
-      width: 100%;
-      margin: 0 auto;
-      border-radius: 100%;
-      margin-bottom: 1em;
-    }
-  }
-  table {
-    width: 100%;
-    margin-bottom: 1em;
-    img {
-      width: 3em;
-      margin: 1em;
-      border-radius: 100%;
-    }
-  }
-  .logo-smallprint {
-    font-size: 0.8em;
-    a {
-      color: #222;
-    }
-  }
-
-  .contributions {
-    font-size: 1em;
-    text-align: center;
-  }
-}
diff --git a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.service.ts b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.service.ts
index eeadc89f86..90cad12986 100644
--- a/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.service.ts
+++ b/src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.service.ts
@@ -1,9 +1,8 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-import { GithubProfile } from './github-profile';
-import { ContributorData } from './contributor-data';
-import { AboutDialogData } from './about-dialog-data';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {AboutDialogData} from './about-dialog-data';
+import {ContributorData} from './contributor-data';
+import {GithubProfile} from './github-profile';
 
 interface GithubContributors {
   login: string;
@@ -35,7 +34,10 @@ export class AboutDoubtfireModalService {
     return this.http.get<GithubProfile>(`https://api.github.com/users/${handler}`);
   }
 
-  private findOrCreateContributor(data: AboutDialogData, profile: GithubContributors): ContributorData {
+  private findOrCreateContributor(
+    data: AboutDialogData,
+    profile: GithubContributors,
+  ): ContributorData {
     let contributor: ContributorData;
     contributor = data.allContributors.value.find((c) => {
       return c.login === profile.login;
@@ -54,7 +56,7 @@ export class AboutDoubtfireModalService {
         const contributor = this.findOrCreateContributor(data, profile);
         contributor[key] = profile.contributions;
       });
-      data.sortData({ active: 'contributions', direction: 'desc' });
+      data.sortData({active: 'contributions', direction: 'desc'});
     });
   }
 
@@ -62,7 +64,7 @@ export class AboutDoubtfireModalService {
     this.getContributors(
       'https://api.github.com/repos/doubtfire-lms/doubtfire.io/contributors',
       data,
-      'ioContributions'
+      'ioContributions',
     );
   }
 
@@ -70,7 +72,7 @@ export class AboutDoubtfireModalService {
     this.getContributors(
       'https://api.github.com/repos/doubtfire-lms/doubtfire-deploy/contributors',
       data,
-      'deployContributions'
+      'deployContributions',
     );
   }
 
@@ -78,7 +80,7 @@ export class AboutDoubtfireModalService {
     this.getContributors(
       'https://api.github.com/repos/doubtfire-lms/doubtfire-web/contributors',
       data,
-      'webContributions'
+      'webContributions',
     );
   }
 
@@ -86,7 +88,7 @@ export class AboutDoubtfireModalService {
     this.getContributors(
       'https://api.github.com/repos/doubtfire-lms/doubtfire-api/contributors',
       data,
-      'apiContributions'
+      'apiContributions',
     );
   }
 }
diff --git a/src/app/common/modals/about-doubtfire-modal/contributor-data.ts b/src/app/common/modals/about-doubtfire-modal/contributor-data.ts
index 96f805cd2a..31ac133888 100644
--- a/src/app/common/modals/about-doubtfire-modal/contributor-data.ts
+++ b/src/app/common/modals/about-doubtfire-modal/contributor-data.ts
@@ -21,6 +21,11 @@ export class ContributorData {
     this.deployContributions = 0;
   }
   get totalContributions(): number {
-    return this.apiContributions + this.webContributions + this.ioContributions + this.deployContributions;
+    return (
+      this.apiContributions +
+      this.webContributions +
+      this.ioContributions +
+      this.deployContributions
+    );
   }
 }
diff --git a/src/app/common/modals/about-doubtfire-modal/github-profile.ts b/src/app/common/modals/about-doubtfire-modal/github-profile.ts
index 7e7364ddac..cddb26d0ae 100644
--- a/src/app/common/modals/about-doubtfire-modal/github-profile.ts
+++ b/src/app/common/modals/about-doubtfire-modal/github-profile.ts
@@ -3,4 +3,4 @@ export interface GithubProfile {
   name: string;
   html_url: string;
   login: string;
-}
\ No newline at end of file
+}
diff --git a/src/app/common/modals/calendar-modal/calendar-modal.component.html b/src/app/common/modals/calendar-modal/calendar-modal.component.html
index ad4bddd473..3ff3ea910d 100644
--- a/src/app/common/modals/calendar-modal/calendar-modal.component.html
+++ b/src/app/common/modals/calendar-modal/calendar-modal.component.html
@@ -1,176 +1,260 @@
-<div class="calendar-modal-component mat-typography">
-  <div fxLayout="row">
-    <div fxFlex="grow">
+<div class="flex h-full min-h-0 flex-col">
+  <div class="flex shrink-0 items-center">
+    <div class="min-w-0 flex-1">
       <h2 mat-dialog-title>Web calendar</h2>
     </div>
     <mat-slide-toggle
-      fxFlex
       #webcalToggle
-      [matTooltip]="webcal && webcal.enabled ? 'Disable the web calendar' : 'Enable the web calendar'"
+      class="mr-5 shrink-0"
       matTooltipPosition="above"
       [checked]="webcal && webcal.enabled"
       [disabled]="working"
-      (click)="onWebcalToggle()"
+      [matTooltip]="
+        webcal && webcal.enabled ? 'Disable the web calendar' : 'Enable the web calendar'
+      "
+      (toggleChange)="onWebcalToggle()"
     >
     </mat-slide-toggle>
   </div>
-  <!--/header-->
 
-  <div mat-dialog-content>
+  <div class="!max-h-none min-h-0 flex-1 overflow-y-auto" mat-dialog-content>
     @if (!webcal) {
-
-    <mat-progress-spinner class="webcal-progress-spinner" color="accent" mode="indeterminate" [diameter]="36">
-    </mat-progress-spinner>
-    }<!--/content-when-webcal loading-->
+      <mat-progress-spinner class="mx-auto" color="accent" mode="indeterminate" [diameter]="36">
+      </mat-progress-spinner>
+    }
 
     @if (webcal) {
+      <small>Your web calendar is currently {{ webcal.enabled ? 'enabled' : 'disabled' }}.</small>
 
-    <small>Your web calendar is currently {{ webcal.enabled ? 'enabled' : 'disabled' }}.</small>
+      @if (!webcal.enabled) {
+        <div>
+          <p>
+            The web calendar displays due dates of your tasks as calendar events in an iCalendar
+            that can be added to any iCalendar client (e.g. Outlook/Google/iCloud calendar). Once
+            enabled, you can also include your unit HelpHubs and classes.
+          </p>
+        </div>
+      }
 
-    @if (!webcal.enabled) {
-    <div>
-      <p>
-        The web calendar displays due dates of your tasks as calendar events in an iCalendar that can be added to any
-        iCalendar client (e.g. Outlook/Google/iCloud calendar).
-      </p>
-    </div>
-    }
-    <!--/content-when-webcal-disabled-->
+      @if (webcal.enabled) {
+        <div>
+          <p>
+            The web calendar displays due dates of your tasks as calendar events. Use the following
+            URL to subscribe to your web calendar from your iCalendar client. You can also opt in to
+            HelpHubs and classes below. Calendar providers decide how often to refresh changes.
+          </p>
 
-    @if (webcal.enabled) {
-    <div>
-      <p>
-        The web calendar displays due dates of your tasks as calendar events. Use the following URL to subscribe to your
-        web calendar from your iCalendar client.
-      </p>
-      <div fxLayout="row">
-        <div fxFlex="grow" class="webcal-url-container">
-          <a [href]="webcalUrl | safe">{{ webcalUrl }}</a>
-        </div>
-        <div fxLayout="row">
-          <button
-            mat-icon-button
-            matTooltip="Copy URL"
-            matTooltipPosition="above"
-            [cdkCopyToClipboard]="webcalUrl"
-            (click)="onCopyWebcalUrl()"
-          >
-            <mat-icon>{{ copying ? 'done' : 'content_copy' }}</mat-icon>
-          </button>
-          <button
-            mat-icon-button
-            matTooltip="Regenerate URL"
-            matTooltipPosition="above"
-            [disabled]="working"
-            (click)="onChangeWebcalUrl()"
-          >
-            <mat-icon>refresh</mat-icon>
-          </button>
-        </div>
-      </div>
-      <!--/webcal-url-->
+          <mat-card appearance="outlined">
+            <mat-card-header>
+              <mat-card-title>Options</mat-card-title>
+              <mat-card-subtitle>Included units in my calendar:</mat-card-subtitle>
+            </mat-card-header>
 
-      <mat-card appearance="outlined" class="webcal-options-card">
-        <h3 style="margin-bottom: 0">Options</h3>
+            <mat-card-content>
+              <div class="pb-4">
+                <mat-chip-listbox>
+                  @for (project of includedProjects; track project) {
+                    <mat-chip-option
+                      [disabled]="working"
+                      [removable]="true"
+                      [selectable]="false"
+                      (removed)="includeExclusion(project)"
+                    >
+                      {{ project.unit.code }} {{ project.unit.name }}
+                      <mat-icon matChipRemove>cancel</mat-icon>
+                    </mat-chip-option>
+                  }
+                  @if (excludedProjects.length > 0) {
+                    <mat-chip-option
+                      [disabled]="working"
+                      [matMenuTriggerFor]="menu"
+                      [selectable]="false"
+                    >
+                      <mat-icon class="mt-1">add</mat-icon>
+                      <mat-menu #menu="matMenu">
+                        @for (project of excludedProjects; track project) {
+                          <button
+                            mat-menu-item
+                            [disabled]="working"
+                            (click)="removeExclusion(project)"
+                          >
+                            {{ project.unit.code }} {{ project.unit.name }}
+                          </button>
+                        }
+                      </mat-menu>
+                    </mat-chip-option>
+                  }
+                </mat-chip-listbox>
+              </div>
 
-        <div fxLayout="row" fxLayoutAlign="start center" class="webcal-options-inclusions">
-          <span style="font-weight: bold; margin-right: 1em">Included units in my calendar:</span>
-        </div>
+              <mat-checkbox
+                [disabled]="working"
+                [(ngModel)]="newReminderActive"
+                (change)="onToggleReminderActive()"
+              >
+                Remind me
+              </mat-checkbox>
+              <mat-form-field appearance="outline" class="ml-4 w-20">
+                <mat-label>Time</mat-label>
+                <input
+                  matInput
+                  min="1"
+                  type="number"
+                  [disabled]="working || !newReminderActive"
+                  [(ngModel)]="newReminderTime"
+                />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="ml-4 w-28">
+                <mat-label>Unit</mat-label>
+                <mat-select
+                  [disabled]="working || !newReminderActive"
+                  [(ngModel)]="newReminderUnit"
+                >
+                  <mat-option value="W">Weeks</mat-option>
+                  <mat-option value="D">Days</mat-option>
+                  <mat-option value="H">Hours</mat-option>
+                  <mat-option value="M">Minutes</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <span class="ml-4 font-bold">before each event</span>
 
-        <div class="webcal-options-inclusions-chips">
-          <mat-chip-listbox>
-            @for (project of includedProjects; track project) {
-            <mat-chip-option [selectable]="true" [removable]="true" (removed)="includeExclusion(project)">
-              {{ project.unit.code }}
-              <mat-icon matChipRemove>cancel</mat-icon>
-            </mat-chip-option>
-            } @if (excludedProjects.length > 0) {
-            <mat-chip-option [matMenuTriggerFor]="menu">
-              <mat-icon>add</mat-icon>
-              <mat-menu #menu="matMenu">
-                @for (project of excludedProjects; track project) {
-                <button mat-menu-item (click)="removeExclusion(project)">
-                  {{ project.unit.code }}: {{ project.unit.name }}
+              <!--
+                Show controls to save & cancel reminder edits only if the user enables the reminder option when it was
+                previously disabled, or edits the time & unit of the reminder that previously exits.
+              -->
+              @if (
+                (!webcal.reminder && newReminderActive) ||
+                (webcal.reminder &&
+                  (newReminderTime !== webcal.reminder.time ||
+                    newReminderUnit !== webcal.reminder.unit))
+              ) {
+                <button
+                  class="ml-4"
+                  color="primary"
+                  mat-icon-button
+                  matTooltip="Save changes"
+                  matTooltipPosition="above"
+                  [disabled]="working"
+                  (click)="onSaveReminderEdits()"
+                >
+                  <mat-icon>save</mat-icon>
                 </button>
-                }
-              </mat-menu>
-            </mat-chip-option>
-            }
-          </mat-chip-listbox>
-        </div>
-        <!--/unit-inclusions-options-->
-
-        <mat-checkbox [(ngModel)]="newReminderActive" (change)="onToggleReminderActive()" [disabled]="working">
-          Remind me
-        </mat-checkbox>
-        <mat-form-field style="width: 5em; margin-left: 1em">
-          <mat-label>Time</mat-label>
-          <input
-            matInput
-            type="number"
-            min="1"
-            [(ngModel)]="newReminderTime"
-            [disabled]="working || !newReminderActive"
-          />
-        </mat-form-field>
-        <mat-form-field style="width: 7em; margin-left: 1em">
-          <mat-label>Unit</mat-label>
-          <mat-select [(ngModel)]="newReminderUnit" [disabled]="working || !newReminderActive">
-            <mat-option value="W">Weeks</mat-option>
-            <mat-option value="D">Days</mat-option>
-            <mat-option value="H">Hours</mat-option>
-            <mat-option value="M">Minutes</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <span style="margin-left: 1em; font-weight: bold">before each event</span>
-        <!--
-            Show controls to save & cancel reminder edits only if the user enables the reminder option when it was
-            previously disabled, or edits the time & unit of the reminder that previously exits.
-          -->
-        @if ( (!webcal.reminder && newReminderActive) || (webcal.reminder && (newReminderTime !== webcal.reminder.time
-        || newReminderUnit !== webcal.reminder.unit)) ) {
+                <button
+                  mat-icon-button
+                  matTooltip="Cancel"
+                  matTooltipPosition="above"
+                  [disabled]="working"
+                  (click)="onCancelReminderEdits()"
+                >
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
+              <br />
 
-        <button
-          mat-icon-button
-          matTooltip="Save changes"
-          matTooltipPosition="above"
-          style="margin-left: 1em"
-          color="primary"
-          [disabled]="working"
-          (click)="onSaveReminderEdits()"
-        >
-          <mat-icon>save</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          matTooltip="Cancel"
-          matTooltipPosition="above"
-          [disabled]="working"
-          (click)="onCancelReminderEdits()"
-        >
-          <mat-icon>close</mat-icon>
-        </button>
-        }<!--/reminder-option-->
+              <mat-checkbox
+                [disabled]="working"
+                [(ngModel)]="webcal.includeStartDates"
+                (change)="toggleIncludeTaskStartDates()"
+              >
+                Include task start dates in web calendar
+              </mat-checkbox>
+              <br />
+              <mat-checkbox
+                [disabled]="working || demoMode.enabled"
+                [(ngModel)]="webcal.includeLearningSessions"
+                (change)="toggleIncludeLearningSessions()"
+              >
+                Include unit HelpHubs, lectures and classes
+              </mat-checkbox>
+              @if (demoMode.enabled) {
+                <p class="text-sm">Session subscription changes are disabled in demo mode.</p>
+              }
+              <p class="text-sm">
+                This shares session times and joining links with your calendar provider. Your unit
+                exclusions apply to sessions too. Keep your subscription URL private.
+              </p>
+            </mat-card-content>
+          </mat-card>
+          <div
+            class="my-3 rounded border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-gray-700"
+          >
+            <mat-tab-group
+              animationDuration="0ms"
+              [selectedIndex]="selectedCalendarProviderIndex"
+              (selectedIndexChange)="selectedCalendarProviderIndex = $event"
+            >
+              <mat-tab label="For Google"></mat-tab>
+              <mat-tab label="For Apple"></mat-tab>
+              <mat-tab label="For Outlook"></mat-tab>
+            </mat-tab-group>
 
-        <br />
+            <div class="py-3">
+              @switch (selectedCalendarProviderIndex) {
+                @case (0) {
+                  In Google Calendar, choose <strong>Add other calendars</strong>, choose
+                  <strong>From URL</strong>, then paste the URL below. Use a desktop browser for
+                  this setup; the subscribed calendar will then also appear on mobile.
+                }
+                @case (1) {
+                  In Apple Calendar, choose <strong>File</strong>,
+                  <strong>New Calendar Subscription</strong>, then paste the URL below.
+                }
+                @case (2) {
+                  In Outlook Calendar, choose <strong>Add calendar</strong>,
+                  <strong>Subscribe from web</strong>, then paste the URL below.
+                }
+              }
+            </div>
 
-        <mat-checkbox
-          [(ngModel)]="webcal.includeStartDates"
-          [disabled]="working"
-          (change)="toggleIncludeTaskStartDates()"
-        >
-          Include task start dates in web calendar </mat-checkbox
-        ><!--/include-start-dates-option-->
+            <div class="mt-3 rounded border border-gray-300 bg-white px-4 py-2">
+              <div class="flex items-center">
+                <div class="flex min-w-0 flex-1 items-center">
+                  <a
+                    class="flex items-center gap-1 break-all text-blue-700 hover:text-blue-900"
+                    [attr.aria-label]="'Subscribe to web calendar: ' + webcalUrl + '.ics'"
+                    [href]="webcalUrl + '.ics'"
+                  >
+                    <mat-icon aria-hidden="true">link</mat-icon>{{ webcalUrl }}.ics
+                  </a>
+                </div>
+                <div class="flex shrink-0 items-center">
+                  <button
+                    aria-label="Copy web calendar URL"
+                    mat-icon-button
+                    matTooltip="Copy URL"
+                    matTooltipPosition="above"
+                    [cdkCopyToClipboard]="webcalSubscriptionUrl"
+                    (cdkCopyToClipboardCopied)="onCopyResult($event)"
+                  >
+                    <mat-icon>{{ copying ? 'done' : 'content_copy' }}</mat-icon>
+                  </button>
+                  <button
+                    aria-label="Regenerate web calendar URL"
+                    mat-icon-button
+                    matTooltip="Regenerate URL"
+                    matTooltipPosition="above"
+                    [disabled]="working"
+                    (click)="onChangeWebcalUrl()"
+                  >
+                    <mat-icon>refresh</mat-icon>
+                  </button>
+                </div>
+              </div>
+            </div>
 
-        <div mat-dialog-actions style="float: right; overflow-y: hidden">
-          <button mat-dialog-close mat-stroked-button color="warn">Cancel</button>
+            <div class="mt-3">
+              <button mat-stroked-button [disabled]="working" (click)="downloadCalendar()">
+                <mat-icon aria-hidden="true">download</mat-icon>
+                Download a copy
+              </button>
+            </div>
+          </div>
         </div>
-        <!--/webcal-cancel-button--> </mat-card
-      ><!--/webcal-options-->
-    </div>
+      }
     }
-    <!--/content-when-webcal-disabled-->
-    }<!--/content-when-webcal-loaded-->
   </div>
-  <!--/content-->
+
+  <div class="shrink-0 justify-end overflow-y-hidden" mat-dialog-actions>
+    <button color="warn" mat-dialog-close mat-stroked-button>Close</button>
+  </div>
 </div>
diff --git a/src/app/common/modals/calendar-modal/calendar-modal.component.scss b/src/app/common/modals/calendar-modal/calendar-modal.component.scss
index f5e8c6f195..e69de29bb2 100644
--- a/src/app/common/modals/calendar-modal/calendar-modal.component.scss
+++ b/src/app/common/modals/calendar-modal/calendar-modal.component.scss
@@ -1,27 +0,0 @@
-.calendar-modal-component {
-  max-width: 600px;
-  overflow-x: hidden;
-
-  .webcal-progress-spinner {
-    margin: 0 auto;
-  }
-
-  .webcal-url-container {
-    display: flex;
-    align-items: center;
-  }
-
-  .webcal-options-card {
-    margin-top: 1em;
-    box-shadow: none;
-    padding: 0;
-  }
-
-  .webcal-options-inclusions {
-    padding: 0.8em 0 0.4em 0;
-  }
-
-  .webcal-options-inclusions-chips {
-    padding-bottom: 1em;
-  }
-}
diff --git a/src/app/common/modals/calendar-modal/calendar-modal.component.spec.ts b/src/app/common/modals/calendar-modal/calendar-modal.component.spec.ts
new file mode 100644
index 0000000000..4d99eea79d
--- /dev/null
+++ b/src/app/common/modals/calendar-modal/calendar-modal.component.spec.ts
@@ -0,0 +1,364 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {CdkCopyToClipboard, Clipboard, ClipboardModule} from '@angular/cdk/clipboard';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {By} from '@angular/platform-browser';
+import {Subject, of} from 'rxjs';
+import {ProjectService, Webcal, WebcalService} from 'src/app/api/models/doubtfire-model';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {DEMO_TOOLS_AVAILABLE} from 'src/app/demo/demo-mode.store';
+import {FileDownloaderService} from '../../file-downloader/file-downloader.service';
+import {AlertService} from '../../services/alert.service';
+import {ConfirmationModalService} from '../confirmation-modal/confirmation-modal.service';
+import {CalendarModalComponent} from './calendar-modal.component';
+
+const emptyProvider = {};
+
+describe('CalendarModalComponent', () => {
+  let component: CalendarModalComponent;
+  let fixture: ComponentFixture<CalendarModalComponent>;
+  let fileDownloaderStub: {downloadFile: ReturnType<typeof vi.fn>};
+
+  beforeEach(async () => {
+    fileDownloaderStub = {downloadFile: vi.fn()};
+
+    await TestBed.configureTestingModule({
+      declarations: [CalendarModalComponent],
+      providers: [
+        {provide: DEMO_TOOLS_AVAILABLE, useValue: true},
+        {provide: WebcalService, useValue: emptyProvider},
+        {provide: DoubtfireConstants, useValue: {API_URL: 'https://doubtfire.test/api'}},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: ProjectService, useValue: emptyProvider},
+        {provide: MAT_DIALOG_DATA, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+        {provide: FileDownloaderService, useValue: fileDownloaderStub},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(CalendarModalComponent, {set: {template: ''}})
+      .compileComponents();
+
+    fixture = TestBed.createComponent(CalendarModalComponent);
+    component = fixture.componentInstance;
+    // The dialog opens in its loading state. These tests start after the webcal has loaded.
+    component.working = false;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('restores saved settings and allows a retry after a failed save', () => {
+    const first: Subject<Webcal> = new Subject();
+    const retry: Subject<Webcal> = new Subject();
+    const update = vi.fn().mockReturnValueOnce(first).mockReturnValueOnce(retry);
+    const error = vi.fn();
+    const internals = component as unknown as {
+      webcalService: {update: typeof update};
+      alerts: {error: typeof error};
+      loadWebcal: (value: Webcal) => void;
+    };
+    internals.webcalService = {update};
+    internals.alerts = {error};
+    const webcal = Object.assign(new Webcal(), {
+      enabled: true,
+      guid: 'saved-guid',
+      unitExclusions: [],
+      includeStartDates: false,
+    });
+    internals.loadWebcal(webcal);
+
+    component.includeExclusion({unit: {id: 7}});
+    first.error(new Error('offline'));
+
+    expect(component.working).toBe(false);
+    expect(component.webcal.unitExclusions).toEqual([]);
+    expect(error).toHaveBeenCalledOnce();
+    component.includeExclusion({unit: {id: 7}});
+    expect(update).toHaveBeenCalledTimes(2);
+    expect(component.working).toBe(true);
+  });
+
+  it('keeps learning sessions opt-in and restores the saved preference after a failed update', () => {
+    const response: Subject<Webcal> = new Subject();
+    const update = vi.fn().mockReturnValue(response);
+    const internals = component as unknown as {
+      webcalService: {update: typeof update};
+      alerts: {error: ReturnType<typeof vi.fn>};
+      loadWebcal: (value: Webcal) => void;
+    };
+    internals.webcalService = {update};
+    internals.alerts = {error: vi.fn()};
+    const webcal = Object.assign(new Webcal(), {
+      enabled: true,
+      guid: 'saved-guid',
+      unitExclusions: [],
+    });
+    expect(webcal.includeLearningSessions).toBe(false);
+    internals.loadWebcal(webcal);
+    component.webcal.includeLearningSessions = true;
+    component.toggleIncludeLearningSessions();
+    expect(update).toHaveBeenCalledWith(expect.objectContaining({includeLearningSessions: true}));
+    expect(component.working).toBe(true);
+    response.error(new Error('offline'));
+    expect(component.webcal.includeLearningSessions).toBe(false);
+    expect(component.working).toBe(false);
+  });
+
+  it('blocks the new session subscription preference even when demo users open Calendar from the account menu', () => {
+    const update = vi.fn();
+    const internals = component as unknown as {
+      webcalService: {update: typeof update};
+      loadWebcal: (value: Webcal) => void;
+    };
+    internals.webcalService = {update};
+    internals.loadWebcal(
+      Object.assign(new Webcal(), {enabled: true, guid: 'saved-guid', unitExclusions: []}),
+    );
+    component.demoMode.setEnabled(true);
+    component.webcal.includeLearningSessions = true;
+    component.toggleIncludeLearningSessions();
+    expect(update).not.toHaveBeenCalled();
+    expect(component.webcal.includeLearningSessions).toBe(false);
+    component.demoMode.reset();
+  });
+
+  it('downloads the feed as an .ics file when the webcal is enabled', () => {
+    const webcal = new Webcal();
+    webcal.enabled = true;
+    webcal.guid = 'abc-123';
+    component.webcal = webcal;
+
+    component.downloadCalendar();
+
+    expect(fileDownloaderStub.downloadFile).toHaveBeenCalledOnce();
+    expect(fileDownloaderStub.downloadFile).toHaveBeenCalledWith(
+      'https://doubtfire.test/api/webcal/abc-123',
+      'ontrack-calendar.ics',
+    );
+  });
+
+  it('does not download when the webcal is disabled', () => {
+    const webcal = new Webcal();
+    webcal.enabled = false;
+    webcal.guid = 'abc-123';
+    component.webcal = webcal;
+
+    component.downloadCalendar();
+
+    expect(fileDownloaderStub.downloadFile).not.toHaveBeenCalled();
+  });
+
+  it('does not download when the webcal is enabled but has no guid', () => {
+    const webcal = new Webcal();
+    webcal.enabled = true;
+    webcal.guid = undefined;
+    component.webcal = webcal;
+
+    component.downloadCalendar();
+
+    expect(fileDownloaderStub.downloadFile).not.toHaveBeenCalled();
+  });
+
+  it('does not download when there is no webcal loaded yet', () => {
+    component.webcal = null;
+
+    component.downloadCalendar();
+
+    expect(fileDownloaderStub.downloadFile).not.toHaveBeenCalled();
+  });
+
+  it('refuses every other save while one is in flight and holds the download until it lands', () => {
+    // Each request gets its own pending response, so resolving the first cannot hide a second.
+    const pending: Subject<Webcal>[] = [];
+    const update = vi.fn(() => {
+      const response: Subject<Webcal> = new Subject();
+      pending.push(response);
+      return response.asObservable();
+    });
+    const internals = component as unknown as {
+      webcalService: {update: typeof update};
+      confirmationModal: {show: (title: string, message: string, confirm: () => void) => void};
+    };
+    internals.webcalService = {update};
+    // Hold on to each confirmation, so it can be confirmed later, while a save is running.
+    const confirmations: (() => void)[] = [];
+    internals.confirmationModal = {
+      show: (_title, _message, confirm) => confirmations.push(confirm),
+    };
+
+    const webcal = new Webcal();
+    webcal.enabled = true;
+    webcal.guid = 'abc-123';
+    webcal.unitExclusions = [];
+    webcal.reminder = {time: 1, unit: 'W'};
+    component.webcal = webcal;
+    component.newReminderActive = true;
+    component.newReminderTime = 1;
+    component.newReminderUnit = 'W';
+
+    // Open both confirmations before any save starts.
+    component.onChangeWebcalUrl();
+    component.onWebcalToggle();
+    expect(confirmations).toHaveLength(2);
+
+    component.includeExclusion({unit: {id: 1}});
+
+    // Every save entry point while the first save is pending.
+    component.includeExclusion({unit: {id: 2}});
+    component.removeExclusion({unit: {id: 1}});
+    component.toggleIncludeTaskStartDates();
+    component.newReminderTime = 3;
+    component.newReminderUnit = 'D';
+    component.onSaveReminderEdits();
+    component.newReminderActive = false;
+    component.onToggleReminderActive();
+    // Confirming the regenerate and disable dialogs now must not start a save either.
+    confirmations.forEach((confirm) => confirm());
+    component.downloadCalendar();
+
+    expect(update).toHaveBeenCalledOnce();
+    expect(webcal.unitExclusions).toEqual([1]);
+    expect(webcal.reminder).toEqual({time: 1, unit: 'W'});
+    expect(webcal.shouldChangeGuid).toBeFalsy();
+    expect(webcal.enabled).toBe(true);
+    // The refused reminder switch goes back to match the stored reminder.
+    expect(component.newReminderActive).toBe(true);
+    expect(component.newReminderTime).toBe(1);
+    expect(component.newReminderUnit).toBe('W');
+    expect(fileDownloaderStub.downloadFile).not.toHaveBeenCalled();
+
+    pending[0].next(webcal);
+    component.downloadCalendar();
+
+    expect(component.working).toBe(false);
+    expect(fileDownloaderStub.downloadFile).toHaveBeenCalledOnce();
+  });
+
+  it('does not download while a settings update is still saving', () => {
+    const webcal = new Webcal();
+    webcal.enabled = true;
+    webcal.guid = 'abc-123';
+    component.webcal = webcal;
+    component.working = true;
+
+    component.downloadCalendar();
+
+    expect(fileDownloaderStub.downloadFile).not.toHaveBeenCalled();
+  });
+});
+
+describe('CalendarModalComponent accessible URL controls', () => {
+  let fixture: ComponentFixture<CalendarModalComponent>;
+  let clipboard: {copy: ReturnType<typeof vi.fn>};
+  let alerts: {success: ReturnType<typeof vi.fn>; error: ReturnType<typeof vi.fn>};
+
+  beforeEach(async () => {
+    clipboard = {copy: vi.fn().mockReturnValue(true)};
+    alerts = {success: vi.fn(), error: vi.fn()};
+    const webcal = Object.assign(new Webcal(), {
+      enabled: true,
+      guid: 'synthetic-calendar',
+      reminder: null,
+      unitExclusions: [],
+    });
+    await TestBed.configureTestingModule({
+      declarations: [CalendarModalComponent],
+      imports: [ClipboardModule, MatIconModule, MatSlideToggleModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        {provide: MAT_DIALOG_DATA, useValue: {}},
+        {provide: WebcalService, useValue: {get: () => of(webcal)}},
+        {provide: ProjectService, useValue: {query: () => of([])}},
+        {provide: DoubtfireConstants, useValue: {API_URL: 'https://example.test/api'}},
+        {provide: AlertService, useValue: alerts},
+        {provide: Clipboard, useValue: clipboard},
+        {provide: ConfirmationModalService, useValue: {}},
+        {provide: FileDownloaderService, useValue: {}},
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(CalendarModalComponent);
+    fixture.detectChanges();
+  });
+
+  it('renders a named subscription link with the complete ICS URL', () => {
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector(
+      'a[aria-label^="Subscribe"]',
+    );
+    expect(link.href).toBe('https://example.test/api/webcal/synthetic-calendar.ics');
+    expect(link.getAttribute('aria-label')).toContain(link.href);
+    expect(link.querySelector('mat-icon')?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('copies the complete subscription URL from only the separate copy button', () => {
+    vi.useFakeTimers();
+    try {
+      const copyControls = fixture.debugElement.queryAll(By.directive(CdkCopyToClipboard));
+      expect(copyControls).toHaveLength(1);
+      const copy = copyControls[0].nativeElement as HTMLButtonElement;
+      expect(copy.tagName).toBe('BUTTON');
+      expect(copy.getAttribute('aria-label')).toBe('Copy web calendar URL');
+
+      copy.click();
+
+      expect(clipboard.copy).toHaveBeenCalledExactlyOnceWith(
+        'https://example.test/api/webcal/synthetic-calendar.ics',
+      );
+      expect(alerts.success).toHaveBeenCalledOnce();
+      expect(alerts.error).not.toHaveBeenCalled();
+      expect(fixture.componentInstance.copying).toBe(true);
+      vi.runAllTimers();
+      expect(fixture.componentInstance.copying).toBe(false);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('reports a refused clipboard write without claiming the URL was copied', () => {
+    clipboard.copy.mockReturnValue(false);
+    const copy: HTMLButtonElement = fixture.nativeElement.querySelector(
+      'button[aria-label="Copy web calendar URL"]',
+    );
+
+    copy.click();
+
+    expect(clipboard.copy).toHaveBeenCalledExactlyOnceWith(
+      'https://example.test/api/webcal/synthetic-calendar.ics',
+    );
+    expect(alerts.success).not.toHaveBeenCalled();
+    expect(alerts.error).toHaveBeenCalledOnce();
+    expect(fixture.componentInstance.copying).toBe(false);
+  });
+
+  it('gives the adjacent icon-only copy and regenerate buttons separate accessible names', () => {
+    const root: HTMLElement = fixture.nativeElement;
+    const copy = root.querySelector<HTMLButtonElement>('button[matTooltip="Copy URL"]')!;
+    const regenerate = root.querySelector<HTMLButtonElement>(
+      'button[matTooltip="Regenerate URL"]',
+    )!;
+    expect(copy.getAttribute('aria-label')).toBe('Copy web calendar URL');
+    expect(regenerate.getAttribute('aria-label')).toBe('Regenerate web calendar URL');
+    expect(copy.disabled).toBe(false);
+    expect(regenerate.disabled).toBe(false);
+    expect(
+      copy.compareDocumentPosition(regenerate) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it('disables the download a copy button while a settings update is saving', () => {
+    const root: HTMLElement = fixture.nativeElement;
+    const download = Array.from(root.querySelectorAll<HTMLButtonElement>('button')).find((button) =>
+      button.textContent?.includes('Download a copy'),
+    )!;
+    expect(download.disabled).toBe(false);
+
+    fixture.componentInstance.working = true;
+    fixture.detectChanges();
+
+    expect(download.disabled).toBe(true);
+  });
+});
diff --git a/src/app/common/modals/calendar-modal/calendar-modal.component.ts b/src/app/common/modals/calendar-modal/calendar-modal.component.ts
index 8be7f8898b..167ba0beef 100644
--- a/src/app/common/modals/calendar-modal/calendar-modal.component.ts
+++ b/src/app/common/modals/calendar-modal/calendar-modal.component.ts
@@ -1,21 +1,35 @@
-import {Component, OnInit, Inject, ViewChild, AfterViewInit} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {MatSlideToggle} from '@angular/material/slide-toggle';
 import {Project, ProjectService, Webcal, WebcalService} from 'src/app/api/models/doubtfire-model';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {FileDownloaderService} from '../../file-downloader/file-downloader.service';
 import {AlertService} from '../../services/alert.service';
+import {ConfirmationModalService} from '../confirmation-modal/confirmation-modal.service';
 
 @Component({
   selector: 'calendar-modal',
   templateUrl: './calendar-modal.component.html',
   styleUrls: ['./calendar-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class CalendarModalComponent implements OnInit, AfterViewInit {
   @ViewChild('webcalToggle') webcalToggle: MatSlideToggle;
 
   webcal: Webcal | null;
+  private savedWebcal: Webcal | null = null;
   working: boolean = true;
   copying: boolean = false;
+  selectedCalendarProviderIndex: number = 0;
   projects: Project[] = [];
 
   // Used to store user interaction with the reminder option. These values aren't bound directly to `this.webcal`
@@ -29,7 +43,10 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
     private constants: DoubtfireConstants,
     private alerts: AlertService,
     private projectService: ProjectService,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA) public data: object,
+    private confirmationModal: ConfirmationModalService,
+    private fileDownloader: FileDownloaderService,
+    readonly demoMode: DemoModeStore,
   ) {}
 
   ngOnInit() {
@@ -61,25 +78,91 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
     return this.webcal?.getUrl(this.constants.API_URL).toString();
   }
 
+  /**
+   * The subscription URL exactly as it is shown to the user, with the `.ics`
+   * suffix, so the copied string matches what is on screen.
+   */
+  get webcalSubscriptionUrl(): string | null {
+    const url = this.webcalUrl;
+    return url ? `${url}.ics` : null;
+  }
+
   /**
    * Invoked when the user toggles the webcal.
    */
   onWebcalToggle() {
-    this.working = true;
-    this.webcal.enabled = !this.webcal.enabled;
+    if (this.working) {
+      return;
+    }
+    if (this.webcal.enabled) {
+      this.confirmationModal.show(
+        'Disable web calendar',
+        'Disabling your web calendar will expire the current subscription URL. Any calendar apps using this URL will stop updating, and a new URL will be generated if you enable the calendar again.',
+        () => this.updateWebcalEnabled(false),
+      );
+      return;
+    }
 
-    this.webcalService.update(this.webcal).subscribe((webcal) => {
-      this.loadWebcal(webcal);
-      this.working = false;
+    this.updateWebcalEnabled(true);
+  }
+
+  private updateWebcalEnabled(enabled: boolean) {
+    this.saveWebcal(() => (this.webcal.enabled = enabled));
+  }
+
+  /**
+   * Saves the webcal, one request at a time. `apply` changes the model and only runs when no
+   * save is in flight, because an overlapping save would let the earlier response clear
+   * `working` while the later one is still pending, reopening Download a copy too early.
+   * Every save in this dialog goes through here, including the ones behind a confirmation.
+   * Returns false when a save was already running and nothing changed.
+   */
+  private saveWebcal(apply: () => void): boolean {
+    if (this.working) {
+      return false;
+    }
+    const previous = this.savedWebcal ?? this.copyWebcal(this.webcal);
+    apply();
+    this.working = true;
+    this.webcalService.update(this.webcal).subscribe({
+      next: (webcal) => {
+        this.loadWebcal(webcal);
+        this.working = false;
+      },
+      error: () => {
+        this.loadWebcal(Object.assign(this.webcal, previous));
+        this.working = false;
+        this.alerts.error('Could not save calendar settings. Please try again.', 4000);
+      },
     });
+    return true;
+  }
+
+  /**
+   * Downloads the current web calendar feed as an .ics file. Skipped while a settings update
+   * is still saving, the same as every other control in this dialog, so the copy never reflects
+   * settings the server has not stored yet or a URL that is being regenerated.
+   */
+  downloadCalendar() {
+    if (this.working || !this.webcal?.enabled || !this.webcal.guid) {
+      return;
+    }
+
+    const feedUrl = `${this.constants.API_URL}/webcal/${this.webcal.guid}`;
+    this.fileDownloader.downloadFile(feedUrl, 'ontrack-calendar.ics');
   }
 
   /**
-   * Displays a notification that the webcal URL has been copied.
-   * `cdkCopyToClipboard` is expected do the actual copying.
-   * Changes mat-icon temporarily for a second after copying.
+   * Invoked by cdkCopyToClipboard once it has attempted the copy. Only
+   * confirm on a real success, so a refused clipboard write does not claim
+   * the URL was copied. Changes mat-icon temporarily for a second after.
    */
-  onCopyWebcalUrl() {
+  onCopyResult(success: boolean) {
+    if (!success) {
+      this.alerts.error('Could not copy the URL, select it and copy it manually', 4000);
+      return;
+    }
+
     this.alerts.success('Web calendar URL copied to the clipboard', 2000);
     this.copying = true;
 
@@ -92,12 +175,14 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
    * Invoked when the user requests their webcal URL to be changed.
    */
   onChangeWebcalUrl() {
-    this.working = true;
-    this.webcal.shouldChangeGuid = true;
-    this.webcalService.update(this.webcal).subscribe((webcal) => {
-      this.loadWebcal(webcal);
-      this.working = false;
-    });
+    if (this.working) {
+      return;
+    }
+    this.confirmationModal.show(
+      'Regenerate URL',
+      'Regenerating your calendar URL will disable the current subscription link. Any calendar apps using the old URL will stop updating until you subscribe again with the new one.',
+      () => this.saveWebcal(() => (this.webcal.shouldChangeGuid = true)),
+    );
   }
 
   /**
@@ -116,13 +201,10 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
     } else {
       // ...and a reminder does exist, make backend request to remove it.
       if (this.webcal.reminder) {
-        this.working = true;
-        this.webcal.reminder = null;
-
-        this.webcalService.update(this.webcal).subscribe((webcal) => {
-          this.loadWebcal(webcal);
-          this.working = false;
-        });
+        // If a save is already running, put the switch back to match the stored reminder.
+        if (!this.saveWebcal(() => (this.webcal.reminder = null))) {
+          this.loadWebcal(this.webcal);
+        }
 
         // ...otherwise, reset.
       } else {
@@ -136,15 +218,13 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
    */
   onSaveReminderEdits() {
     if (this.newReminderTime > 0) {
-      this.working = true;
-      this.webcal.reminder = {
-        time: this.newReminderTime,
-        unit: this.newReminderUnit,
-      };
-      this.webcalService.update(this.webcal).subscribe((webcal) => {
-        this.loadWebcal(webcal);
-        this.working = false;
-      });
+      this.saveWebcal(
+        () =>
+          (this.webcal.reminder = {
+            time: this.newReminderTime,
+            unit: this.newReminderUnit,
+          }),
+      );
     } else {
       this.alerts.error('Please specify a valid reminder time', 2000);
     }
@@ -161,11 +241,18 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
    * Includes task 'Start Dates' in the Webcal.
    */
   toggleIncludeTaskStartDates() {
-    this.working = true;
-    this.webcalService.update(this.webcal).subscribe((webcal) => {
-      this.loadWebcal(webcal);
-      this.working = false;
-    });
+    // The checkbox has already changed the model through ngModel, so there is nothing to apply.
+    this.saveWebcal(() => undefined);
+  }
+
+  toggleIncludeLearningSessions() {
+    if (this.demoMode.enabled) {
+      if (this.savedWebcal) {
+        this.loadWebcal(this.copyWebcal(this.savedWebcal));
+      }
+      return;
+    }
+    this.saveWebcal(() => undefined);
   }
 
   /**
@@ -194,24 +281,21 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
    * Removes the specified project exclusion from the webcal.
    */
   removeExclusion(project) {
-    this.working = true;
-    this.webcal.unitExclusions = this.webcal.unitExclusions.filter((p) => p !== project.unit.id);
-    this.webcalService.update(this.webcal).subscribe((webcal) => {
-      this.loadWebcal(webcal);
-      this.working = false;
-    });
+    this.saveWebcal(
+      () =>
+        (this.webcal.unitExclusions = this.webcal.unitExclusions.filter(
+          (p) => p !== project.unit.id,
+        )),
+    );
   }
 
   /**
    * Excludes the specified project from the webcal.
    */
   includeExclusion(project) {
-    this.working = true;
-    this.webcal.unitExclusions = [...this.webcal.unitExclusions, project.unit.id];
-    this.webcalService.update(this.webcal).subscribe((webcal) => {
-      this.loadWebcal(webcal);
-      this.working = false;
-    });
+    this.saveWebcal(
+      () => (this.webcal.unitExclusions = [...this.webcal.unitExclusions, project.unit.id]),
+    );
   }
 
   /**
@@ -219,6 +303,7 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
    */
   private loadWebcal(webcal: Webcal) {
     this.webcal = webcal;
+    this.savedWebcal = webcal ? this.copyWebcal(webcal) : null;
     if (webcal) {
       if (webcal.reminder) {
         this.newReminderActive = true;
@@ -230,4 +315,12 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
       }
     }
   }
+
+  private copyWebcal(webcal: Webcal): Webcal {
+    return Object.assign(new Webcal(), webcal, {
+      reminder: webcal.reminder ? {...webcal.reminder} : null,
+      unitExclusions: [...(webcal.unitExclusions ?? [])],
+      shouldChangeGuid: false,
+    });
+  }
 }
diff --git a/src/app/common/modals/calendar-modal/calendar-modal.service.ts b/src/app/common/modals/calendar-modal/calendar-modal.service.ts
index 37ddb1d51c..fd1c6bec9f 100644
--- a/src/app/common/modals/calendar-modal/calendar-modal.service.ts
+++ b/src/app/common/modals/calendar-modal/calendar-modal.service.ts
@@ -1,6 +1,7 @@
-import { Injectable } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import { CalendarModalComponent } from './calendar-modal.component';
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {CalendarModalComponent} from './calendar-modal.component';
 
 @Injectable({
   providedIn: 'root',
@@ -8,8 +9,12 @@ import { CalendarModalComponent } from './calendar-modal.component';
 export class CalendarModalService {
   constructor(public dialog: MatDialog) {}
 
-  public show(task: any) {
-    let dialogRef: MatDialogRef<CalendarModalComponent, any>;
-    dialogRef = this.dialog.open(CalendarModalComponent);
+  public show(_task?: Task) {
+    this.dialog.open(CalendarModalComponent, {
+      height: 'h-min',
+      maxHeight: '90vh',
+      width: '800px',
+      maxWidth: '95vw',
+    });
   }
 }
diff --git a/src/app/common/modals/comments-modal/comments-modal.coffee b/src/app/common/modals/comments-modal/comments-modal.coffee
deleted file mode 100644
index 59874c47e1..0000000000
--- a/src/app/common/modals/comments-modal/comments-modal.coffee
+++ /dev/null
@@ -1,32 +0,0 @@
-angular.module("doubtfire.common.modals.comments-modal", [])
-#
-# Modal to contain an image used in user comments.
-#
-.factory("CommentsModal", ($modal) ->
-  CommentsModal = {}
-  CommentsModal.show = (commentResourceUrl, commentType) ->
-    $modal.open
-      templateUrl: 'common/modals/comments-modal/comments-modal.tpl.html'
-      controller: 'CommentsModalCtrl'
-      size: 'lg'
-      resolve:
-        commentResourceUrl: -> commentResourceUrl
-        commentType: -> commentType
-  CommentsModal
-)
-.controller("CommentsModalCtrl", ($scope, $modalInstance, $sce, commentResourceUrl, commentType, alertService, fileDownloaderService) ->
-  # $scope.commentResourceUrl = $sce.trustAsResourceUrl(commentResourceUrl)
-  $scope.commentType = commentType
-  $scope.close = ->
-    fileDownloaderService.releaseBlob($scope.rawResourceUrl)
-    $modalInstance.dismiss()
-
-  fileDownloaderService.downloadBlob(
-    commentResourceUrl,
-    (url, response) ->
-      $scope.rawResourceUrl = url
-      $scope.commentResourceUrl = $sce.trustAsResourceUrl(url)
-    (error) ->
-      alertService.error( "Error downloading comment: #{error}")
-  )
-)
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.html b/src/app/common/modals/comments-modal/comments-modal.component.html
new file mode 100644
index 0000000000..86be41b59f
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.component.html
@@ -0,0 +1,11 @@
+<div class="p-3.5">
+  @if (taskComment.commentType === 'image') {
+    <img
+      alt="Image attachment"
+      class="size-full rounded border-none p-0"
+      [src]="commentResourceUrl"
+    />
+  } @else if (taskComment.commentType === 'pdf') {
+    <f-pdf-viewer class="block h-[85vh] w-full" [pdfUrl]="commentResourceUrl"> </f-pdf-viewer>
+  }
+</div>
diff --git a/src/app/common/f-chip/f-chip.component.scss b/src/app/common/modals/comments-modal/comments-modal.component.scss
similarity index 100%
rename from src/app/common/f-chip/f-chip.component.scss
rename to src/app/common/modals/comments-modal/comments-modal.component.scss
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.ts b/src/app/common/modals/comments-modal/comments-modal.component.ts
new file mode 100644
index 0000000000..7cb5d80dc3
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.component.ts
@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component, Inject, Input, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+
+export interface CommentsModalData {
+  comment: TaskComment;
+  commentResourceUrl: string;
+}
+
+@Component({
+  selector: 'comments-modal',
+  templateUrl: './comments-modal.component.html',
+  styleUrls: ['./comments-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class CommentsModalComponent implements OnInit {
+  @Input() taskComment: TaskComment;
+  @Input() commentResourceUrl: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: CommentsModalData) {}
+
+  ngOnInit(): void {
+    this.taskComment = this.data.comment;
+    this.commentResourceUrl = this.data.commentResourceUrl;
+  }
+}
diff --git a/src/app/common/modals/comments-modal/comments-modal.scss b/src/app/common/modals/comments-modal/comments-modal.scss
deleted file mode 100644
index 22ccacf4f8..0000000000
--- a/src/app/common/modals/comments-modal/comments-modal.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.modal-comment {
-  .image-comment {
-      width: 100%;
-      height: 100%;
-      align-content: center;
-      border-radius: 5px;
-      padding: 0;
-      border: none;
-  }
-  .pdf-comment {
-    width: 100%;
-    height: 80vh;
-    align-content: center;
-  }
-}
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.service.ts b/src/app/common/modals/comments-modal/comments-modal.service.ts
new file mode 100644
index 0000000000..353c9c6c37
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.service.ts
@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+import {CommentsModalComponent, CommentsModalData} from './comments-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(commentResourceUrl: string, comment: TaskComment) {
+    this.dialog.open<CommentsModalComponent, CommentsModalData>(CommentsModalComponent, {
+      data: {commentResourceUrl, comment},
+      width: '100%',
+      maxWidth: '900px',
+      panelClass: 'overflow-y-auto',
+    });
+  }
+}
diff --git a/src/app/common/modals/comments-modal/comments-modal.tpl.html b/src/app/common/modals/comments-modal/comments-modal.tpl.html
deleted file mode 100644
index 59985945ff..0000000000
--- a/src/app/common/modals/comments-modal/comments-modal.tpl.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="modal-comment">
-  <div class="modal-body">
-    <div ng-if="commentType == 'image'">
-      <img class="image-comment" ng-src="{{commentResourceUrl}}" />
-    </div>
-    <div ng-if="commentType == 'pdf'">
-      <iframe class="pdf-comment" ng-src="{{commentResourceUrl}}" type="application/pdf" />
-    </div>
-  </div>
-</div>
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.coffee b/src/app/common/modals/confirmation-modal/confirmation-modal.coffee
deleted file mode 100644
index c7999098cf..0000000000
--- a/src/app/common/modals/confirmation-modal/confirmation-modal.coffee
+++ /dev/null
@@ -1,35 +0,0 @@
-angular.module("doubtfire.common.modals.confirmation-modal", [])
-
-.factory("ConfirmationModal", ($modal) ->
-  ConfirmationModal = {}
-
-  #
-  # Show a modal asking the user to confirm their indicated action.
-  #
-  ConfirmationModal.show = (title, message, action) ->
-    modalInstance = $modal.open
-      templateUrl: 'common/modals/confirmation-modal/confirmation-modal.tpl.html'
-      controller: 'ConfirmationModalCtrl'
-      resolve:
-        title: -> title
-        message: -> message
-        action: -> action
-
-  ConfirmationModal
-)
-
-#
-# Controller for confirmation modal
-#
-.controller('ConfirmationModalCtrl', ($scope, $modalInstance, title, message, action, alertService) ->
-  $scope.title = title
-  $scope.message = message
-
-  $scope.confirmAction = ->
-    action()
-    $modalInstance.dismiss()
-
-  $scope.cancelAction = ->
-    alertService.message "#{title} action cancelled", 3000
-    $modalInstance.dismiss()
-)
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.component.html b/src/app/common/modals/confirmation-modal/confirmation-modal.component.html
new file mode 100644
index 0000000000..a682ebf91e
--- /dev/null
+++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.html
@@ -0,0 +1,23 @@
+<div class="m-0 flex flex-col items-center justify-center gap-1 p-0 pt-5">
+  <h2
+    class="m-0 flex flex-col items-center justify-center gap-4 p-0 leading-none before:hidden"
+    mat-dialog-title
+  >
+    <mat-icon class="size-10 text-[40px]">help</mat-icon>{{ title }}
+  </h2>
+  <!-- <small>Please confirm that you want to perform this action</small> -->
+</div>
+<mat-dialog-content>
+  <p class="mx-auto max-w-100 text-center text-sm">
+    {{ message }}
+  </p>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <div class="flex w-full justify-center gap-2">
+    <button color="warn" mat-button (click)="cancelAction()">{{ cancelText }}</button>
+    <button color="primary" mat-raised-button (click)="confirmAction()">
+      <mat-icon>check</mat-icon>
+      {{ confirmText }}
+    </button>
+  </div>
+</mat-dialog-actions>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.scss b/src/app/common/modals/confirmation-modal/confirmation-modal.component.scss
similarity index 100%
rename from src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.scss
rename to src/app/common/modals/confirmation-modal/confirmation-modal.component.scss
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts
new file mode 100644
index 0000000000..5427fc020c
--- /dev/null
+++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts
@@ -0,0 +1,62 @@
+import {ChangeDetectionStrategy, Component, Inject, Input, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {AlertService} from '../../services/alert.service';
+
+export interface ConfirmationModalData {
+  title: string;
+  message: string;
+  action?: () => void;
+  cancelAction?: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+@Component({
+  selector: 'confirmation-modal',
+  templateUrl: './confirmation-modal.component.html',
+  styleUrls: ['./confirmation-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ConfirmationModalComponent implements OnInit {
+  @Input() title: string;
+  @Input() message: string;
+  @Input() action: () => void;
+  @Input() cancelActionFn: () => void;
+  @Input() confirmText: string;
+  @Input() cancelText: string;
+
+  constructor(
+    @Inject(AlertService) private alertService: AlertService,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmationModalData,
+
+    public dialogRef: MatDialogRef<ConfirmationModalComponent>,
+  ) {}
+
+  ngOnInit(): void {
+    this.title = this.data.title;
+    this.message = this.data.message;
+    this.action = this.data.action;
+    this.cancelActionFn = this.data.cancelAction;
+    this.confirmText = this.data.confirmText ?? 'Confirm';
+    this.cancelText = this.data.cancelText ?? 'Cancel';
+  }
+
+  public confirmAction() {
+    if (typeof this.action === 'function') {
+      this.action();
+    } else {
+      this.alertService.error(`${this.title} action failed.`);
+    }
+    this.dialogRef.close();
+  }
+
+  public cancelAction() {
+    if (typeof this.cancelActionFn === 'function') {
+      this.cancelActionFn();
+    } else {
+      this.alertService.success(`${this.title} action cancelled.`);
+    }
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.scss b/src/app/common/modals/confirmation-modal/confirmation-modal.scss
deleted file mode 100644
index f30b0e345c..0000000000
--- a/src/app/common/modals/confirmation-modal/confirmation-modal.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.confirmation-modal .modal-body {
-  font-size: 1.5em;
-}
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts
new file mode 100644
index 0000000000..b14d252ebb
--- /dev/null
+++ b/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts
@@ -0,0 +1,36 @@
+import {Injectable} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {ConfirmationModalComponent, ConfirmationModalData} from './confirmation-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmationModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(
+    title: string,
+    message: string,
+    action?: () => void,
+    cancelAction?: () => void,
+    confirmText?: string,
+    cancelText?: string,
+  ): MatDialogRef<ConfirmationModalComponent, ConfirmationModalData> {
+    return this.dialog.open<ConfirmationModalComponent, ConfirmationModalData>(
+      ConfirmationModalComponent,
+      {
+        data: {
+          title,
+          message,
+          action,
+          cancelAction,
+          confirmText,
+          cancelText,
+        },
+        position: {top: '2.5%'},
+        width: '100%',
+        maxWidth: '650px',
+      },
+    );
+  }
+}
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html b/src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html
deleted file mode 100644
index 4bd87f6868..0000000000
--- a/src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="confirmation-modal">
-  <div class="modal-header clearfix">
-    <h3 class="modal-title">
-      <i class="fa fa-question-circle fa-2x pull-left"></i>
-      <div>{{title}}</div>
-      <small>Please confirm that you want to perform this action.</small>
-    </h3>
-  </div>
-  <div class="modal-body">
-    {{message}}
-  </div>
-  <div class="modal-footer clearfix">
-    <div class="btn-group">
-      <label class="btn btn-success" ng-click="confirmAction()">
-        <i class="fa fa-check"></i> Confirm
-      </label>
-      <label class="btn btn-danger" ng-click="cancelAction()">
-        <i class="fa fa-times"></i> Cancel
-      </label>
-    </div>
-  </div>
-</div>
diff --git a/src/app/common/modals/csv-result-modal/csv-result-modal.coffee b/src/app/common/modals/csv-result-modal/csv-result-modal.coffee
deleted file mode 100644
index 0536d68003..0000000000
--- a/src/app/common/modals/csv-result-modal/csv-result-modal.coffee
+++ /dev/null
@@ -1,105 +0,0 @@
-angular.module("doubtfire.common.modals.csv-result-modal", [])
-
-#
-# Services for making new modals
-#
-.factory("CsvResultModal", ($modal, alertService) ->
-  CsvResultModal = {}
-
-  #
-  # Show the results from a CSV upload with the provided title.
-  #
-  # Response should be a hash with the following data:
-  #
-  #   {
-  #     success: [ {row: ..., message:""}, ... ],
-  #     errors: [ {row: ..., message:""}, ... ],
-  #     ignored: [ {row: ..., message:""}, ... ]
-  #   }
-  #
-  CsvResultModal.show = (title, response) ->
-    if response.errors.length == 0
-      alertService.success( "Data uploaded. Success with #{response.success.length} items.", 2000)
-    else if response.success.length > 0
-      alertService.message( "Data uploaded, success with #{response.success.length} items, but #{response.errors.length} errors.", 6000)
-    else
-      alertService.error( "Data uploaded but #{response.errors.length} errors", 6000)
-
-    $modal.open
-      templateUrl: 'common/modals/csv-result-modal/csv-result-modal.tpl.html'
-      controller: 'CsvResultModalCtrl'
-      resolve:
-        title: -> title
-        response: -> response
-
-  CsvResultModal
-)
-
-#
-# Controller for CSV result modal
-#
-.controller('CsvResultModalCtrl', ($scope, $modalInstance, title, response) ->
-  $scope.title = title
-  $scope.response = response
-
-  # Pagination details
-  $scope.currentPage = 1
-  $scope.maxSize = 5
-  $scope.pageSize = 5
-
-  if response.errors.length > 0
-    $scope.activeCsvResponseSelection = 'errors'
-  else if response.success.length > 0
-    $scope.activeCsvResponseSelection = 'success'
-  else
-    $scope.activeCsvResponseSelection = 'ignored'
-
-  $scope.itemData = (selector) ->
-    $scope.response[selector]
-
-  $scope.close = ->
-    $modalInstance.dismiss()
-)
-
-
-.factory("CsvUploadModal", ($modal, alertService) ->
-  CsvUploadModal = {}
-
-  #
-  # Shows a dialog to allow people to upload a CSV.
-  #
-  CsvUploadModal.show = (title, message, batchFiles, url, onSuccess) ->
-    $modal.open
-      templateUrl: 'common/modals/csv-result-modal/csv-upload-modal.tpl.html'
-      controller: 'CsvUploadModalCtrl'
-      resolve:
-        title: -> title
-        message: -> message
-        batchFiles: -> batchFiles
-        url: -> url
-        onSuccess: -> onSuccess
-
-  CsvUploadModal
-)
-
-#
-# Controller for CSV result modal
-#
-.controller('CsvUploadModalCtrl', ($scope, $modalInstance, title, message, batchFiles, url, onSuccess) ->
-
-  wrapSuccess = (response) ->
-    $modalInstance.dismiss()
-    onSuccess(response)
-
-  $scope.title = title
-  $scope.message = message
-  $scope.batchFiles = batchFiles
-  $scope.url = url
-  $scope.onSuccess = wrapSuccess
-
-
-
-  $scope.close = ->
-    $modalInstance.dismiss()
-)
-
diff --git a/src/app/common/modals/csv-result-modal/csv-result-modal.component.html b/src/app/common/modals/csv-result-modal/csv-result-modal.component.html
new file mode 100644
index 0000000000..da02267371
--- /dev/null
+++ b/src/app/common/modals/csv-result-modal/csv-result-modal.component.html
@@ -0,0 +1,85 @@
+<h2 mat-dialog-title>{{ data.title }}</h2>
+
+<mat-dialog-content class="overflow-hidden">
+  <mat-button-toggle-group
+    class="mb-3"
+    [value]="activeCsvResponseSelection"
+    (change)="selectResponse($event.value)"
+  >
+    @for (selection of csvResponseSelections; track selection.key) {
+      <mat-button-toggle
+        [ngClass]="{
+          '!border-green-700 !bg-green-600 !text-white':
+            selection.key === 'success' && activeCsvResponseSelection === 'success',
+          '!border-green-300 !bg-green-50 !text-green-800':
+            selection.key === 'success' && activeCsvResponseSelection !== 'success',
+          '!border-red-700 !bg-red-600 !text-white':
+            selection.key === 'errors' && activeCsvResponseSelection === 'errors',
+          '!border-red-300 !bg-red-50 !text-red-800':
+            selection.key === 'errors' && activeCsvResponseSelection !== 'errors',
+          '!border-amber-600 !bg-amber-500 !text-white':
+            selection.key === 'ignored' && activeCsvResponseSelection === 'ignored',
+          '!border-amber-300 !bg-amber-50 !text-amber-800':
+            selection.key === 'ignored' && activeCsvResponseSelection !== 'ignored',
+        }"
+        [value]="selection.key"
+      >
+        {{ selection.label }} ({{ itemData(selection.key).length }})
+      </mat-button-toggle>
+    }
+  </mat-button-toggle-group>
+
+  @if (dataSource.data.length === 0) {
+    <p>No data to show</p>
+  } @else {
+    <div class="max-h-[55vh] overflow-auto">
+      <table class="min-w-max" mat-table [dataSource]="dataSource">
+        <ng-container matColumnDef="message">
+          <th *matHeaderCellDef mat-header-cell>Message</th>
+          <td *matCellDef="let row" mat-cell>
+            <div class="max-w-[500px] break-words whitespace-pre-wrap">
+              {{ displayMessage(row.item) }}
+            </div>
+          </td>
+        </ng-container>
+
+        @for (columnId of dynamicColumnIds; track columnId) {
+          <ng-container [matColumnDef]="columnId">
+            <th *matHeaderCellDef mat-header-cell>{{ headerForColumn(columnId) }}</th>
+            <td *matCellDef="let row" mat-cell>
+              <div class="max-w-[500px] break-words whitespace-pre-wrap">
+                {{ rowValueForColumn(row.rowObject, columnId) }}
+              </div>
+            </td>
+          </ng-container>
+        }
+
+        <ng-container matColumnDef="other">
+          <th *matHeaderCellDef mat-header-cell>Other</th>
+          <td *matCellDef="let row" mat-cell>
+            <div class="max-w-[500px] break-words whitespace-pre-wrap">
+              {{ row.otherData || '-' }}
+            </div>
+          </td>
+        </ng-container>
+
+        <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+        <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+      </table>
+    </div>
+  }
+</mat-dialog-content>
+
+<mat-dialog-actions class="flex w-full items-center gap-1">
+  @if (dataSource.data.length > 0) {
+    <mat-paginator
+      class="flex-1"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="[5, 10, 25, 50, 100, 500]"
+    ></mat-paginator>
+  } @else {
+    <span class="flex-1"></span>
+  }
+
+  <button color="primary" mat-button type="button" (click)="close()">Done</button>
+</mat-dialog-actions>
diff --git a/src/app/sessions/states/states.coffee b/src/app/common/modals/csv-result-modal/csv-result-modal.component.scss
similarity index 100%
rename from src/app/sessions/states/states.coffee
rename to src/app/common/modals/csv-result-modal/csv-result-modal.component.scss
diff --git a/src/app/common/modals/csv-result-modal/csv-result-modal.component.ts b/src/app/common/modals/csv-result-modal/csv-result-modal.component.ts
new file mode 100644
index 0000000000..8d1f1a6d70
--- /dev/null
+++ b/src/app/common/modals/csv-result-modal/csv-result-modal.component.ts
@@ -0,0 +1,216 @@
+import {AfterViewInit, ChangeDetectionStrategy, Component, Inject, ViewChild} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatTableDataSource} from '@angular/material/table';
+import {CsvResult, CsvResultModalData, CsvRow} from './csv-result-modal.service';
+
+type CsvResultSelection = 'success' | 'errors' | 'ignored';
+
+interface CsvDisplayRow {
+  item: CsvRow;
+  rowObject: Record<string, unknown> | null;
+  otherData: string;
+}
+
+@Component({
+  selector: 'f-csv-result-modal',
+  templateUrl: './csv-result-modal.component.html',
+  styleUrls: ['./csv-result-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class CsvResultModalComponent implements AfterViewInit {
+  public readonly pageSize = 10;
+  public activeCsvResponseSelection: CsvResultSelection;
+  public commonKeys: string[] = [];
+  public displayedColumns: string[] = ['message', 'other'];
+  public dynamicColumnIds: string[] = [];
+  public dataSource: MatTableDataSource<CsvDisplayRow> = new MatTableDataSource([]);
+  private columnKeyById: Map<string, string> = new Map();
+
+  @ViewChild(MatPaginator) paginator?: MatPaginator;
+
+  public readonly csvResponseSelections: {key: CsvResultSelection; label: string}[] = [
+    {key: 'success', label: 'Success'},
+    {key: 'errors', label: 'Errors'},
+    {key: 'ignored', label: 'Ignored'},
+  ];
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CsvResultModalData,
+    private dialogRef: MatDialogRef<CsvResultModalComponent>,
+  ) {
+    this.data.csvResult = this.normaliseResponse(data.csvResult);
+    this.activeCsvResponseSelection = this.defaultSelection(this.data.csvResult);
+    this.rebuildTableData();
+  }
+
+  public ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+  }
+
+  public itemData(selection: CsvResultSelection): CsvRow[] {
+    return this.data.csvResult[selection] ?? [];
+  }
+
+  public selectResponse(selection: CsvResultSelection): void {
+    if (this.activeCsvResponseSelection === selection) {
+      return;
+    }
+
+    this.activeCsvResponseSelection = selection;
+    this.rebuildTableData();
+  }
+
+  public displayMessage(item: CsvRow): string {
+    return item.message ?? item.error ?? '';
+  }
+
+  public rowValue(rowObject: Record<string, unknown> | null, key: string): string {
+    if (!rowObject || !Object.prototype.hasOwnProperty.call(rowObject, key)) {
+      return '';
+    }
+
+    return this.formatValue(rowObject[key]);
+  }
+
+  public headerForColumn(columnId: string): string {
+    return this.columnKeyById.get(columnId) ?? columnId;
+  }
+
+  public rowValueForColumn(rowObject: Record<string, unknown> | null, columnId: string): string {
+    const key = this.columnKeyById.get(columnId);
+    if (!key) {
+      return '';
+    }
+
+    return this.rowValue(rowObject, key);
+  }
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+
+  private defaultSelection(csvResult: CsvResult): CsvResultSelection {
+    if ((csvResult.errors?.length ?? 0) > 0) {
+      return 'errors';
+    }
+    if ((csvResult.success?.length ?? 0) > 0) {
+      return 'success';
+    }
+    return 'ignored';
+  }
+
+  private normaliseResponse(csvResult: CsvResult): CsvResult {
+    return {
+      success: csvResult?.success ?? [],
+      errors: csvResult?.errors ?? [],
+      ignored: csvResult?.ignored ?? [],
+    };
+  }
+
+  private rebuildTableData(): void {
+    const items = this.itemData(this.activeCsvResponseSelection);
+    const rowObjects = items.map((item) => this.toRowObject(item.row));
+    const keyCounts: Map<string, number> = new Map();
+
+    rowObjects.forEach((rowObject) => {
+      if (!rowObject) {
+        return;
+      }
+
+      Object.keys(rowObject).forEach((key) => {
+        keyCounts.set(key, (keyCounts.get(key) ?? 0) + 1);
+      });
+    });
+
+    this.commonKeys = [...keyCounts.entries()]
+      .filter(([, count]) => count === items.length)
+      .map(([key]) => key)
+      .sort((a, b) => a.localeCompare(b));
+
+    this.dynamicColumnIds = this.commonKeys.map((_, index) => `csv_col_${index}`);
+    this.columnKeyById.clear();
+    this.dynamicColumnIds.forEach((columnId, index) => {
+      this.columnKeyById.set(columnId, this.commonKeys[index]);
+    });
+
+    const displayRows = items.map((item, index) => {
+      const rowObject = rowObjects[index];
+
+      return {
+        item,
+        rowObject,
+        otherData: this.buildOtherData(item.row, rowObject, this.commonKeys),
+      };
+    });
+
+    const hasAnyOtherData = displayRows.some((row) => row.otherData.trim().length > 0);
+    this.displayedColumns = hasAnyOtherData
+      ? ['message', ...this.dynamicColumnIds, 'other']
+      : ['message', ...this.dynamicColumnIds];
+    this.dataSource.data = displayRows;
+    this.paginator?.firstPage();
+  }
+
+  private buildOtherData(
+    rawRow: unknown,
+    rowObject: Record<string, unknown> | null,
+    commonKeys: string[],
+  ): string {
+    if (!rowObject) {
+      return this.formatValue(rawRow);
+    }
+
+    const commonKeySet = new Set(commonKeys);
+    const additionalEntries = Object.entries(rowObject).filter(([key]) => !commonKeySet.has(key));
+    if (additionalEntries.length === 0) {
+      return '';
+    }
+
+    return additionalEntries
+      .map(([key, value]) => `${key}: ${this.formatValue(value)}`)
+      .join(' | ');
+  }
+
+  private toRowObject(row: unknown): Record<string, unknown> | null {
+    if (row && typeof row === 'object' && !Array.isArray(row)) {
+      return row as Record<string, unknown>;
+    }
+
+    // Some backend CSV imports return rows as [key, value][] tuples.
+    // Convert those into an object so each key can become a table column.
+    if (Array.isArray(row)) {
+      const entries = row.filter(
+        (entry): entry is [string, unknown] =>
+          Array.isArray(entry) && entry.length >= 2 && typeof entry[0] === 'string',
+      );
+
+      if (entries.length === row.length && entries.length > 0) {
+        return Object.fromEntries(entries);
+      }
+    }
+
+    return null;
+  }
+
+  private formatValue(value: unknown): string {
+    if (value === null || value === undefined) {
+      return '';
+    }
+
+    if (typeof value === 'string') {
+      return value;
+    }
+
+    if (typeof value === 'number' || typeof value === 'boolean') {
+      return `${value}`;
+    }
+
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return `${value}`;
+    }
+  }
+}
diff --git a/src/app/common/modals/csv-result-modal/csv-result-modal.scss b/src/app/common/modals/csv-result-modal/csv-result-modal.scss
deleted file mode 100644
index 9f56205b97..0000000000
--- a/src/app/common/modals/csv-result-modal/csv-result-modal.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.csv-result-modal {
-
-  .modal-header small {
-    display: block;
-  }
-
-  table {
-    table-layout: fixed;
-  }
-
-  table th.message { width: 20%; }
-  table th.data    { width: 80%; }
-
-  td.csv-row {
-    display: block;
-    overflow-x: scroll;
-    font-family: monospace;
-    white-space: nowrap;
-  }
-
-}
diff --git a/src/app/common/modals/csv-result-modal/csv-result-modal.service.ts b/src/app/common/modals/csv-result-modal/csv-result-modal.service.ts
new file mode 100644
index 0000000000..20a41f3fb8
--- /dev/null
+++ b/src/app/common/modals/csv-result-modal/csv-result-modal.service.ts
@@ -0,0 +1,74 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {AlertService} from '../../services/alert.service';
+import {CsvResultModalComponent} from './csv-result-modal.component';
+
+export interface CsvRow {
+  row: unknown;
+  message?: string;
+  error?: string;
+}
+
+export interface CsvResult {
+  success?: CsvRow[];
+  errors?: CsvRow[];
+  ignored?: CsvRow[];
+}
+
+export interface CsvResultModalData {
+  title: string;
+  csvResult: CsvResult;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CsvResultModalService {
+  constructor(
+    public dialog: MatDialog,
+    private alertService: AlertService,
+  ) {}
+
+  public show(title: string, csvResult: CsvResult) {
+    const normalised = this.normaliseResponse(csvResult);
+    this.showSummaryAlert(normalised);
+
+    this.dialog.open<CsvResultModalComponent, CsvResultModalData>(CsvResultModalComponent, {
+      width: '90vw',
+      maxWidth: '1200px',
+      maxHeight: '90vh',
+      data: {
+        title,
+        csvResult: normalised,
+      },
+    });
+  }
+
+  private normaliseResponse(csvResult: CsvResult): CsvResult {
+    return {
+      success: csvResult?.success ?? [],
+      errors: csvResult?.errors ?? [],
+      ignored: csvResult?.ignored ?? [],
+    };
+  }
+
+  private showSummaryAlert(csvResult: CsvResult): void {
+    const successCount = csvResult.success?.length ?? 0;
+    const errorCount = csvResult.errors?.length ?? 0;
+
+    if (errorCount === 0) {
+      this.alertService.success(`Data uploaded. Success with ${successCount} items.`, 2000);
+      return;
+    }
+
+    if (successCount > 0) {
+      this.alertService.message(
+        `Data uploaded, success with ${successCount} items, but ${errorCount} errors.`,
+        6000,
+      );
+      return;
+    }
+
+    this.alertService.error(`Data uploaded but ${errorCount} errors`, 6000);
+  }
+}
diff --git a/src/app/common/modals/csv-result-modal/csv-result-modal.tpl.html b/src/app/common/modals/csv-result-modal/csv-result-modal.tpl.html
deleted file mode 100644
index 0e0b38f0d3..0000000000
--- a/src/app/common/modals/csv-result-modal/csv-result-modal.tpl.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<div class="csv-result-modal">
-  <div class="modal-header clearfix">
-    <h3 class="modal-title">
-      <i class="fa fa-file-excel-o fa-2x pull-left"></i>
-      {{title}}
-      <small>Response details</small>
-    </h3>
-  </div>
-  <div class="modal-body clearfix">
-    <p class="btn-group col-sm-8 col-sm-offset-2">
-        <button class="btn btn-default col-sm-4" ng-class="{ 'btn-success': activeCsvResponseSelection == 'success' }" ng-model="activeCsvResponseSelection" btn-radio="'success'">
-          Success <span class="badge pull-right">{{response.success.length}}</span>
-        </button>
-        <button class="btn btn-default col-sm-4" ng-class="{ 'btn-danger': activeCsvResponseSelection == 'errors' }" ng-model="activeCsvResponseSelection" btn-radio="'errors'">
-          Errors <span class="badge pull-right">{{response.errors.length}}</span>
-        </button>
-        <button class="btn btn-default col-sm-4" ng-class="{ 'btn-warning': activeCsvResponseSelection == 'ignored' }" ng-model="activeCsvResponseSelection" btn-radio="'ignored'">
-          Ignored <span class="badge pull-right">{{response.ignored.length}}</span>
-        </button>
-    </p>
-    <div ng-hide="response[activeCsvResponseSelection].length > 0" class="callout callout-info col-sm-12">
-      No data to show
-    </div>
-    <table ng-show="response[activeCsvResponseSelection].length > 0" class="table table-condensed table-hover">
-      <thead>
-          <tr>
-              <th class="message">
-                  Message
-              </th>
-              <th class="data">
-                  Data
-              </th>
-          </tr>
-      </thead>
-      <tbody>
-          <tr ng-repeat="item in response[activeCsvResponseSelection] | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize">
-              <td>
-                {{item.message}}
-              </td>
-              <td class="csv-row">
-                {{item.row}}
-              </td>
-          </tr>
-      </tbody>
-  </table><!--/enrolment-table-->
-  </div>
-  <div class="modal-footer clearfix">
-    <pagination ng-show="response[activeCsvResponseSelection].length > pageSize" total-items="response[activeCsvResponseSelection].length" ng-model="currentPage" items-per-page="pageSize" max-size="maxSize" class="pagination-sm pull-left" boundary-links="true" rotate="false"></pagination>
-    <button class="btn btn-primary pull-right" ng-click="close()">Done</button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/common/modals/csv-result-modal/csv-upload-modal.tpl.html b/src/app/common/modals/csv-result-modal/csv-upload-modal.tpl.html
deleted file mode 100644
index 6112f50c7e..0000000000
--- a/src/app/common/modals/csv-result-modal/csv-upload-modal.tpl.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="csv-result-modal">
-  <div class="modal-header clearfix">
-    <h3 class="modal-title">
-      <i class="fa fa-file-excel-o fa-2x pull-left"></i>
-      {{title}}
-      <small>Response details</small>
-    </h3>
-  </div>
-  <div class="modal-body clearfix">
-    <file-uploader files="batchFiles" url="url" on-success="onSuccess"></file-uploader>
-  </div>
-  <div class="modal-footer clearfix">
-    <button class="btn btn-primary pull-right" ng-click="close()">Done</button>
-  </div>
-</div>
diff --git a/src/app/common/modals/csv-upload-modal/csv-upload-modal.component.html b/src/app/common/modals/csv-upload-modal/csv-upload-modal.component.html
new file mode 100644
index 0000000000..11b7db0a4d
--- /dev/null
+++ b/src/app/common/modals/csv-upload-modal/csv-upload-modal.component.html
@@ -0,0 +1,14 @@
+<h2 mat-dialog-title>{{ data.title }}</h2>
+
+<mat-dialog-content>
+  @if (data.message) {
+    <p>{{ data.message }}</p>
+  }
+
+  <f-file-uploader [files]="data.batchFiles" [onSuccess]="onUploadSuccess" [url]="data.url">
+  </f-file-uploader>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button color="primary" mat-button type="button" (click)="close()">Done</button>
+</mat-dialog-actions>
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.scss b/src/app/common/modals/csv-upload-modal/csv-upload-modal.component.scss
similarity index 100%
rename from src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.scss
rename to src/app/common/modals/csv-upload-modal/csv-upload-modal.component.scss
diff --git a/src/app/common/modals/csv-upload-modal/csv-upload-modal.component.ts b/src/app/common/modals/csv-upload-modal/csv-upload-modal.component.ts
new file mode 100644
index 0000000000..809dd0abae
--- /dev/null
+++ b/src/app/common/modals/csv-upload-modal/csv-upload-modal.component.ts
@@ -0,0 +1,40 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+export interface CsvUploadFileSpec {
+  name: string;
+  type: string;
+}
+
+export type CsvUploadFileMap = Record<string, CsvUploadFileSpec>;
+
+export interface CsvUploadModalData {
+  title: string;
+  message?: string;
+  batchFiles: CsvUploadFileMap;
+  url: string;
+  onSuccess?: (response: unknown) => void;
+}
+
+@Component({
+  selector: 'f-csv-upload-modal',
+  templateUrl: './csv-upload-modal.component.html',
+  styleUrls: ['./csv-upload-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class CsvUploadModalComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CsvUploadModalData,
+    private dialogRef: MatDialogRef<CsvUploadModalComponent>,
+  ) {}
+
+  public onUploadSuccess = (response: unknown): void => {
+    this.dialogRef.close();
+    this.data.onSuccess?.(response);
+  };
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/common/modals/csv-upload-modal/csv-upload-modal.service.ts b/src/app/common/modals/csv-upload-modal/csv-upload-modal.service.ts
new file mode 100644
index 0000000000..6d8ea40c53
--- /dev/null
+++ b/src/app/common/modals/csv-upload-modal/csv-upload-modal.service.ts
@@ -0,0 +1,35 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {
+  CsvUploadFileMap,
+  CsvUploadModalComponent,
+  CsvUploadModalData,
+} from './csv-upload-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CsvUploadModalService {
+  constructor(private dialog: MatDialog) {}
+
+  public show(
+    title: string,
+    message: string,
+    batchFiles: CsvUploadFileMap,
+    url: string,
+    onSuccess?: (response: unknown) => void,
+  ): void {
+    this.dialog.open<CsvUploadModalComponent, CsvUploadModalData>(CsvUploadModalComponent, {
+      width: '90vw',
+      maxWidth: '900px',
+      maxHeight: '90vh',
+      data: {
+        title,
+        message,
+        batchFiles,
+        url,
+        onSuccess,
+      },
+    });
+  }
+}
diff --git a/src/app/common/modals/date-change-modal/task-date-slider.component.html b/src/app/common/modals/date-change-modal/task-date-slider.component.html
new file mode 100644
index 0000000000..3471580e68
--- /dev/null
+++ b/src/app/common/modals/date-change-modal/task-date-slider.component.html
@@ -0,0 +1,87 @@
+<div class="flex flex-col gap-1">
+  @if (showTaskAbbr && editMode) {
+    <label>{{ task.definition.name }}</label>
+  }
+  <div class="flex flex-row items-center gap-2.5">
+    @if (showTaskAbbr) {
+      <label>{{ task.definition.abbreviation }}: </label>
+    } @else {
+      <label>Complete By: </label>
+    }
+    <mat-slider class="grow" min="0" [max]="max">
+      <input
+        matSliderThumb
+        [disabled]="!editMode"
+        [(ngModel)]="value"
+        (input)="updateExtension($event)"
+      />
+    </mat-slider>
+    <label class="grow-0" style="min-width: 4em">{{ task.localDueDateString() }}</label>
+
+    @if (task.unit.allowFlexibleDates) {
+      <button
+        mat-stroked-button
+        [queryParams]="{taskDef: task.definition.id}"
+        [routerLink]="['/projects', task.project.id, 'plan']"
+      >
+        Edit in Task Planner
+      </button>
+    }
+    <!-- @if (editMode) {
+      <button
+        mat-icon-button
+        aria-label="Save task due date"
+        matTooltip="Save task due date"
+        (click)="saveDueDate()"
+      >
+        <mat-icon>save</mat-icon>
+      </button>
+
+      <button
+        mat-icon-button
+        aria-label="Cancel editing task due date"
+        matTooltip="Cancel editing task due date"
+        (click)="cancelEdit()"
+      >
+        <mat-icon>cancel</mat-icon>
+      </button>
+    } @else {
+      <button
+        mat-icon-button
+        aria-label="Edit task due date"
+        matTooltip="Change task due date"
+        (click)="editDueDate()"
+        [disabled]="!canEdit()"
+        color=""
+      >
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button
+        mat-icon-button
+        aria-label="Cancel editing task due date"
+        matTooltip="Cancel editing task due date"
+        (click)="cancelEdit()"
+        disabled="true"
+      >
+        <mat-icon>cancel</mat-icon>
+      </button>
+    } -->
+  </div>
+  <div class="flex flex-row">
+    @if (editMode) {
+      @if (afterDeadline()) {
+        <label class="bg-orange-100 p-1 text-sm">
+          <strong>Warning: </strong>
+          Your planned due date is after the last date to receive feedback for this task. You will
+          not receive feedback on this task to help you ensure it is up to the required standard.
+        </label>
+      } @else if (closeToDeadline()) {
+        <label class="bg-yellow-100 p-1 text-sm">
+          <strong>Caution: </strong>
+          Your planned due date is close to the last date to receive feedback for this task. This
+          may make it challenging to have sufficient time to address any feedback you receive.
+        </label>
+      }
+    }
+  </div>
+</div>
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.spec.ts b/src/app/common/modals/date-change-modal/task-date-slider.component.scss
similarity index 100%
rename from src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.spec.ts
rename to src/app/common/modals/date-change-modal/task-date-slider.component.scss
diff --git a/src/app/common/modals/date-change-modal/task-date-slider.component.ts b/src/app/common/modals/date-change-modal/task-date-slider.component.ts
new file mode 100644
index 0000000000..5947ff626a
--- /dev/null
+++ b/src/app/common/modals/date-change-modal/task-date-slider.component.ts
@@ -0,0 +1,105 @@
+import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {Task} from 'src/app/api/models/doubtfire-model';
+import {MappingFunctions} from 'src/app/api/services/mapping-fn';
+import {AlertService} from '../../services/alert.service';
+import {ConfirmationModalService} from '../confirmation-modal/confirmation-modal.service';
+
+@Component({
+  selector: 'f-task-date-slider',
+  styleUrl: './task-date-slider.component.scss',
+  templateUrl: './task-date-slider.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskDateSliderComponent implements OnChanges {
+  @Input() task: Task;
+  @Input() showTaskAbbr: boolean = false;
+
+  /**
+   * The value of the slider, representing the number of weeks
+   */
+  public value: number;
+
+  private _originalDueDate: Date;
+  private _originalExtension: number;
+
+  /**
+   * Switch between edit and view mode.
+   */
+  public editMode: boolean = false;
+
+  public constructor(
+    private alerts: AlertService,
+    private confirmationModalService: ConfirmationModalService,
+  ) {}
+
+  public get max(): number {
+    return this.task.unit.totalWeeks + Math.ceil(this.task.project.specConDays / 7);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.task && changes.task.currentValue) {
+      if (this.editMode) {
+        this.cancelEdit();
+      }
+
+      this.value = this.task.dueWeek;
+      this._originalDueDate = this.task.dueDate;
+      this._originalExtension = this.task.extensions;
+    }
+  }
+
+  public cancelEdit(): void {
+    this.editMode = false;
+    // Reset the task to its original state
+    this.task.dueDate = this._originalDueDate;
+    this.task.extensions = this._originalExtension;
+    this.value = this.task.dueWeek;
+  }
+
+  public updateExtension(event: Event): void {
+    const value = (event.target as HTMLInputElement).valueAsNumber;
+    this.task.dueWeek = value;
+  }
+
+  public editDueDate(): void {
+    this.editMode = true;
+  }
+
+  public saveDueDate(): void {
+    const save = () =>
+      this.task.savePlannedDate().subscribe({
+        next: () => {
+          this.alerts.success('Plan updated successfully.');
+          this.editMode = false;
+          this.task.project.calcTopTasks();
+        },
+        error: (message) => {
+          this.alerts.error(`Error updating due date: ${message}`, 6000);
+          this.cancelEdit();
+        },
+      });
+
+    if (this.afterDeadline()) {
+      this.confirmationModalService.show(
+        'Due date is after feedback deadline',
+        'You won’t receive feedback for this task if you submit after the feedback cutoff. Do you want to continue?',
+        save,
+      );
+    } else {
+      save();
+    }
+  }
+
+  public afterDeadline(): boolean {
+    return this.task.localDueDate() > this.task.localDeadlineDate();
+  }
+
+  public closeToDeadline(): boolean {
+    return MappingFunctions.addDays(this.task.localDueDate(), 7) > this.task.localDeadlineDate();
+  }
+
+  public canEdit(): boolean {
+    return !this.task.isGroupTask() && this.task.unit.allowFlexibleDates;
+  }
+}
diff --git a/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.html b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.html
new file mode 100644
index 0000000000..5eb196bf48
--- /dev/null
+++ b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.html
@@ -0,0 +1,33 @@
+<h2 mat-dialog-title>{{ data.title }}</h2>
+
+<mat-dialog-content class="flex flex-col gap-2.5">
+  <p>{{ data.prompt }}</p>
+
+  <div>
+    {{ data.prefix }}
+  </div>
+
+  <mat-form-field appearance="outline" class="w-full">
+    <mat-label>Reason</mat-label>
+    <textarea
+      matInput
+      maxlength="1000"
+      placeholder="Add the rest of the tutor note here."
+      rows="5"
+      [(ngModel)]="reasonBody"
+    ></textarea>
+    @if (reasonBody.length > 0 && !hasReasonBody) {
+      <mat-error> Please enter at least {{ minimumReasonLength }} characters. </mat-error>
+    }
+    <div class="flex justify-end">
+      <mat-hint>{{ trimmedReasonBody.length }}/1000</mat-hint>
+    </div>
+  </mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-stroked-button (click)="cancel()">Cancel</button>
+  <button color="primary" mat-raised-button [disabled]="!hasReasonBody" (click)="submit()">
+    Save and Mark Discussed
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.scss b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.scss
new file mode 100644
index 0000000000..5bf3e5c253
--- /dev/null
+++ b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.scss
@@ -0,0 +1,7 @@
+.mat-mdc-dialog-content {
+  min-width: min(640px, 80vw);
+}
+
+.prefix-preview {
+  white-space: pre-wrap;
+}
diff --git a/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.ts b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.ts
new file mode 100644
index 0000000000..0166f2fc3d
--- /dev/null
+++ b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component.ts
@@ -0,0 +1,49 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+export interface DiscussedInClassReasonModalData {
+  title: string;
+  prompt: string;
+  prefix: string;
+}
+
+@Component({
+  selector: 'f-discussed-in-class-reason-modal',
+  templateUrl: './discussed-in-class-reason-modal.component.html',
+  styleUrl: './discussed-in-class-reason-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class DiscussedInClassReasonModalComponent {
+  public readonly minimumReasonLength = 25;
+  public reasonBody = '';
+
+  constructor(
+    public dialogRef: MatDialogRef<DiscussedInClassReasonModalComponent, string | undefined>,
+    @Inject(MAT_DIALOG_DATA) public data: DiscussedInClassReasonModalData,
+  ) {}
+
+  public get trimmedReasonBody(): string {
+    return this.reasonBody.trim();
+  }
+
+  public get hasReasonBody(): boolean {
+    return this.trimmedReasonBody.length >= this.minimumReasonLength;
+  }
+
+  public get notePreview(): string {
+    return `${this.data.prefix} ${this.trimmedReasonBody}`.trim();
+  }
+
+  public cancel(): void {
+    this.dialogRef.close(undefined);
+  }
+
+  public submit(): void {
+    if (!this.hasReasonBody) {
+      return;
+    }
+
+    this.dialogRef.close(this.notePreview);
+  }
+}
diff --git a/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.service.ts b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.service.ts
new file mode 100644
index 0000000000..f67abc3e8a
--- /dev/null
+++ b/src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.service.ts
@@ -0,0 +1,35 @@
+import {Injectable} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {
+  DiscussedInClassReasonModalComponent,
+  DiscussedInClassReasonModalData,
+} from './discussed-in-class-reason-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DiscussedInClassReasonModalService {
+  constructor(private dialog: MatDialog) {}
+
+  public show(
+    title: string,
+    prompt: string,
+    prefix: string,
+  ): MatDialogRef<DiscussedInClassReasonModalComponent, string | undefined> {
+    return this.dialog.open<
+      DiscussedInClassReasonModalComponent,
+      DiscussedInClassReasonModalData,
+      string | undefined
+    >(DiscussedInClassReasonModalComponent, {
+      data: {
+        title,
+        prompt,
+        prefix,
+      },
+      position: {top: '2.5%'},
+      width: '100%',
+      maxWidth: '700px',
+      autoFocus: false,
+    });
+  }
+}
diff --git a/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.spec.ts b/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.spec.ts
index 4fd1a66445..664fe42413 100644
--- a/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.spec.ts
+++ b/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
-
-import { EditProfileDialogService } from './edit-profile-dialog.service';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {EditProfileDialogService} from './edit-profile-dialog.service';
 
 describe('EditProfileDialogService', () => {
   let service: EditProfileDialogService;
diff --git a/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts b/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts
index 2fc14b6339..4a14715c36 100644
--- a/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts
+++ b/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts
@@ -1,7 +1,7 @@
-import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { User } from 'src/app/api/models/doubtfire-model';
-import { EditProfileFormComponent } from '../../edit-profile-form/edit-profile-form.component';
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {User} from 'src/app/api/models/doubtfire-model';
+import {EditProfileFormComponent} from '../../edit-profile-form/edit-profile-form.component';
 
 @Injectable({
   providedIn: 'root',
@@ -11,8 +11,10 @@ export class EditProfileDialogService {
 
   openDialog(user: User, mode: 'edit' | 'create' | 'new'): void {
     this.dialog.open(EditProfileFormComponent, {
-      width: '800px',
-      data: {user, mode: mode},
+      width: '100%',
+      maxWidth: '800px',
+      data: {user, mode: mode, modal: true},
+      panelClass: 'overflow-y-auto',
     });
   }
 }
diff --git a/src/app/common/modals/extension-modal/extension-modal.component.html b/src/app/common/modals/extension-modal/extension-modal.component.html
index a71b745224..30beb590e5 100644
--- a/src/app/common/modals/extension-modal/extension-modal.component.html
+++ b/src/app/common/modals/extension-modal/extension-modal.component.html
@@ -5,14 +5,14 @@ <h3 mat-dialog-title>Extension request</h3>
     request shortly.
   </p>
 
-  <mat-form-field style="width: 100%" appearance="outline">
+  <mat-form-field appearance="outline" style="width: 100%">
     <mat-label>Reason</mat-label>
     <textarea
-      type="text"
       matInput
-      [formControl]="extensionData.controls.extensionReason"
-      [errorStateMatcher]="matcher"
       placeholder="Reason"
+      type="text"
+      [errorStateMatcher]="matcher"
+      [formControl]="extensionData.controls.extensionReason"
     ></textarea>
     <mat-hint align="end"
       >{{ extensionData.controls.extensionReason.value.length }} / {{ reasonMaxLength }}</mat-hint
@@ -32,11 +32,11 @@ <h3 mat-dialog-title>Extension request</h3>
     <mat-label>Choose a date</mat-label>
     <input
       matInput
-      [min]="minDate"
-      [max]="maxDate"
+      placeholder="Choose a date"
       [matDatepicker]="extensionDatePicker"
+      [max]="maxDate"
+      [min]="minDate"
       (dateInput)="addEvent('input', $event)"
-      placeholder="Choose a date"
     />
     <mat-datepicker-toggle matSuffix [for]="extensionDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #extensionDatePicker></mat-datepicker>
@@ -44,13 +44,13 @@ <h3 mat-dialog-title>Extension request</h3>
 </div>
 
 <div mat-dialog-actions style="float: right">
-  <button mat-dialog-close mat-stroked-button color="warn">Cancel</button>
+  <button color="warn" mat-dialog-close mat-stroked-button>Cancel</button>
   <button
-    mat-dialog-close
-    style="margin-right: 10px"
-    mat-stroked-button
     color="primary"
     mat-button
+    mat-dialog-close
+    mat-stroked-button
+    style="margin-right: 10px"
     [disabled]="!extensionData.valid"
     (click)="submitApplication()"
   >
@@ -58,7 +58,7 @@ <h3 mat-dialog-title>Extension request</h3>
     {{
       extensionDate.toLocaleDateString(currentLocale, {
         month: 'long',
-        day: 'numeric'
+        day: 'numeric',
       })
     }}
   </button>
diff --git a/src/app/common/modals/extension-modal/extension-modal.component.spec.ts b/src/app/common/modals/extension-modal/extension-modal.component.spec.ts
new file mode 100644
index 0000000000..5e3e05784f
--- /dev/null
+++ b/src/app/common/modals/extension-modal/extension-modal.component.spec.ts
@@ -0,0 +1,21 @@
+import {describe, expect, it, vi} from 'vitest';
+import {ExtensionModalComponent} from './extension-modal.component';
+
+// scrollCommentsDown reaches into the DOM for div.comments-body, which is not
+// mounted on every screen the modal can open from. Exercise it on a bare
+// instance with no such element present.
+describe('ExtensionModalComponent scrollCommentsDown', () => {
+  it('does not throw when the comments panel is not on the page', () => {
+    vi.useFakeTimers();
+    const component = Object.create(ExtensionModalComponent.prototype) as {
+      scrollCommentsDown(): void;
+    };
+
+    expect(() => {
+      component.scrollCommentsDown();
+      vi.runAllTimers();
+    }).not.toThrow();
+
+    vi.useRealTimers();
+  });
+});
diff --git a/src/app/common/modals/extension-modal/extension-modal.component.ts b/src/app/common/modals/extension-modal/extension-modal.component.ts
index ff3dcdf7d7..87f8e9f9f9 100644
--- a/src/app/common/modals/extension-modal/extension-modal.component.ts
+++ b/src/app/common/modals/extension-modal/extension-modal.component.ts
@@ -1,11 +1,11 @@
-import {Component, Inject, LOCALE_ID} from '@angular/core';
-import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import {TaskComment, TaskCommentService, Task} from 'src/app/api/models/doubtfire-model';
-import {AppInjector} from 'src/app/app-injector';
-import {FormControl, Validators, FormGroup, FormGroupDirective, NgForm} from '@angular/forms';
-import {MatDatepickerInputEvent} from '@angular/material/datepicker';
-import {differenceInWeeks, differenceInDays, isAfter, addDays} from 'date-fns';
+import {addDays, differenceInDays, differenceInWeeks, isAfter} from 'date-fns';
+import {ChangeDetectionStrategy, Component, Inject, LOCALE_ID} from '@angular/core';
+import {FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
+import {MatDatepickerInputEvent} from '@angular/material/datepicker';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Task, TaskComment, TaskCommentService} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
 import {AlertService} from '../../services/alert.service';
 
 /** Error when invalid control is dirty, touched, or submitted. */
@@ -19,6 +19,8 @@ export class ReasonErrorStateMatcher implements ErrorStateMatcher {
 @Component({
   selector: 'extension-modal',
   templateUrl: './extension-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class ExtensionModalComponent {
   protected reasonMinLength: number = 15;
@@ -67,8 +69,10 @@ export class ExtensionModalComponent {
 
   private scrollCommentsDown(): void {
     setTimeout(() => {
-      const objDiv = document.querySelector('div.comments-body');
-      // let wrappedResult = angular.element(objDiv);
+      const objDiv = document.querySelector<HTMLElement>('div.comments-body');
+      if (!objDiv) {
+        return;
+      }
       objDiv.scrollTop = objDiv.scrollHeight;
     }, 50);
   }
diff --git a/src/app/common/modals/extension-modal/extension-modal.service.ts b/src/app/common/modals/extension-modal/extension-modal.service.ts
index 1b1283fdcd..19709c908e 100644
--- a/src/app/common/modals/extension-modal/extension-modal.service.ts
+++ b/src/app/common/modals/extension-modal/extension-modal.service.ts
@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {Task} from 'src/app/api/models/task';
-import {MatDialogRef, MatDialog} from '@angular/material/dialog';
 import {ExtensionModalComponent} from './extension-modal.component';
 
 @Injectable({
@@ -9,18 +9,19 @@ import {ExtensionModalComponent} from './extension-modal.component';
 export class ExtensionModalService {
   constructor(public dialog: MatDialog) {}
 
-  public show(task: Task, afterApplication?: any) {
-    let dialogRef: MatDialogRef<ExtensionModalComponent, any>;
-
-    dialogRef = this.dialog.open(ExtensionModalComponent, {
-      data: {
-        task,
-        afterApplication,
+  public show(task: Task, afterApplication?: () => void) {
+    const dialogRef: MatDialogRef<ExtensionModalComponent, void> = this.dialog.open(
+      ExtensionModalComponent,
+      {
+        data: {
+          task,
+          afterApplication,
+        },
       },
-    });
+    );
 
-    dialogRef.afterOpened().subscribe((result: any) => {});
+    dialogRef.afterOpened().subscribe();
 
-    dialogRef.afterClosed().subscribe((result: any) => {});
+    dialogRef.afterClosed().subscribe();
   }
 }
diff --git a/src/app/common/modals/modals.coffee b/src/app/common/modals/modals.coffee
deleted file mode 100644
index 16d2be1ec8..0000000000
--- a/src/app/common/modals/modals.coffee
+++ /dev/null
@@ -1,5 +0,0 @@
-angular.module("doubtfire.common.modals", [
-  'doubtfire.common.modals.csv-result-modal'
-  'doubtfire.common.modals.confirmation-modal'
-  'doubtfire.common.modals.comments-modal'
-])
diff --git a/src/app/common/modals/qr-modal/qr-modal.component.html b/src/app/common/modals/qr-modal/qr-modal.component.html
new file mode 100644
index 0000000000..8cca3b1df3
--- /dev/null
+++ b/src/app/common/modals/qr-modal/qr-modal.component.html
@@ -0,0 +1,9 @@
+<div class="w-full max-w-[500px] p-6">
+  <div class="text-center">
+    {{ caption }}
+  </div>
+  <img alt="QR Code for tutor assessment" class="w-full" [src]="qrCodeImage" />
+  @if (footer) {
+    <div class="text-center">{{ footer }}</div>
+  }
+</div>
diff --git a/src/app/common/modals/qr-modal/qr-modal.component.scss b/src/app/common/modals/qr-modal/qr-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/common/modals/qr-modal/qr-modal.component.ts b/src/app/common/modals/qr-modal/qr-modal.component.ts
new file mode 100644
index 0000000000..92f1784ee7
--- /dev/null
+++ b/src/app/common/modals/qr-modal/qr-modal.component.ts
@@ -0,0 +1,37 @@
+import QRCode from 'qrcode';
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {QrModalData} from './qr-modal.service';
+
+@Component({
+  selector: 'f-qr-modal',
+  templateUrl: './qr-modal.component.html',
+  styleUrls: ['./qr-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class QrModalComponent implements OnInit {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: QrModalData) {}
+
+  qrCodeImage: string;
+  caption: string;
+  footer: string;
+
+  ngOnInit() {
+    this.caption = this.data.caption;
+    this.footer = this.data.footer;
+    if (this.data?.qrCodeImage) {
+      this.generateQr();
+    }
+  }
+
+  generateQr() {
+    const u = new URL(this.data.qrCodeImage);
+    u.searchParams.set('time', Math.floor(Date.now() / 1000).toString());
+    this.qrCodeImage = u.toString();
+
+    QRCode.toDataURL(u.toString()).then((url) => {
+      this.qrCodeImage = url;
+    });
+  }
+}
diff --git a/src/app/common/modals/qr-modal/qr-modal.service.ts b/src/app/common/modals/qr-modal/qr-modal.service.ts
new file mode 100644
index 0000000000..04871d938a
--- /dev/null
+++ b/src/app/common/modals/qr-modal/qr-modal.service.ts
@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {QrModalComponent} from './qr-modal.component';
+
+export interface QrModalData {
+  qrCodeImage: string;
+  caption: string;
+  footer: string;
+  liveTimestamp: boolean;
+}
+@Injectable({
+  providedIn: 'root',
+})
+export class QrModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(
+    qrText: string,
+    caption: string,
+    footer: string = '',
+    liveTimestamp: boolean = false,
+  ) {
+    const _dialogRef = this.dialog.open<QrModalComponent, QrModalData>(QrModalComponent, {
+      data: {
+        qrCodeImage: qrText,
+        caption,
+        footer,
+        liveTimestamp,
+      },
+    });
+  }
+}
diff --git a/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.component.html b/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.component.html
new file mode 100644
index 0000000000..89b4341889
--- /dev/null
+++ b/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.component.html
@@ -0,0 +1,45 @@
+<h3 mat-dialog-title>Extra attempt request</h3>
+<div mat-dialog-content [formGroup]="extensionData">
+  <p class="w-full">
+    Please explain why you require an extra attempt for this knowledge check, the teaching team will
+    assess the request shortly.
+  </p>
+
+  <mat-form-field appearance="outline" style="width: 100%">
+    <mat-label>Reason</mat-label>
+    <textarea
+      matInput
+      placeholder="Reason"
+      type="text"
+      [errorStateMatcher]="matcher"
+      [formControl]="extensionData.controls.extensionReason"
+    ></textarea>
+    <mat-hint align="end"
+      >{{ extensionData.controls.extensionReason.value.length }} / {{ reasonMaxLength }}</mat-hint
+    >
+    @if (extensionData.controls.extensionReason.hasError('required')) {
+      <mat-error>You must enter a reason</mat-error>
+    }
+    @if (extensionData.controls.extensionReason.hasError('minlength')) {
+      <mat-error>The reason must be at least {{ reasonMinLength }} characters long</mat-error>
+    }
+    @if (extensionData.controls.extensionReason.hasError('maxlength')) {
+      <mat-error>The reason must be less than {{ reasonMaxLength }} characters long</mat-error>
+    }
+  </mat-form-field>
+</div>
+
+<div mat-dialog-actions style="float: right">
+  <button color="warn" mat-dialog-close mat-stroked-button>Cancel</button>
+  <button
+    color="primary"
+    mat-button
+    mat-dialog-close
+    mat-stroked-button
+    style="margin-right: 10px"
+    [disabled]="!extensionData.valid"
+    (click)="submitApplication()"
+  >
+    Request extra attempt
+  </button>
+</div>
diff --git a/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.component.ts b/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.component.ts
new file mode 100644
index 0000000000..20ffb78b20
--- /dev/null
+++ b/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.component.ts
@@ -0,0 +1,71 @@
+import {ChangeDetectionStrategy, Component, Inject, LOCALE_ID} from '@angular/core';
+import {FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Task, TaskComment, TaskCommentService} from 'src/app/api/models/doubtfire-model';
+import {AppInjector} from 'src/app/app-injector';
+import {AlertService} from '../../services/alert.service';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class ReasonErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
+
+@Component({
+  selector: 'f-scorm-extension-modal',
+  templateUrl: './scorm-extension-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ScormExtensionModalComponent {
+  protected reasonMinLength: number = 15;
+  protected reasonMaxLength: number = 256;
+  constructor(
+    public dialogRef: MatDialogRef<ScormExtensionModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: {task: Task; afterApplication?: () => void},
+    private alerts: AlertService,
+  ) {}
+
+  matcher = new ReasonErrorStateMatcher();
+  currentLocale = AppInjector.get(LOCALE_ID);
+  extensionData = new FormGroup({
+    extensionReason: new FormControl('', [
+      Validators.required,
+      Validators.minLength(this.reasonMinLength),
+      Validators.maxLength(this.reasonMaxLength),
+    ]),
+  });
+
+  private scrollCommentsDown(): void {
+    setTimeout(() => {
+      const objDiv = document.querySelector<HTMLElement>('div.comments-body');
+      if (!objDiv) {
+        return;
+      }
+      objDiv.scrollTop = objDiv.scrollHeight;
+    }, 50);
+  }
+
+  submitApplication() {
+    const tcs: TaskCommentService = AppInjector.get(TaskCommentService);
+    tcs
+      .requestScormExtension(this.extensionData.controls.extensionReason.value, this.data.task)
+      .subscribe({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        next: ((tc: TaskComment) => {
+          this.alerts.success('Extra attempt requested.', 2000);
+          this.scrollCommentsDown();
+          if (typeof this.data.afterApplication === 'function') {
+            this.data.afterApplication();
+          }
+        }).bind(this),
+        error: ((response: never) => {
+          this.alerts.error('Error requesting extra attempt ' + response);
+          console.log(response);
+        }).bind(this),
+      });
+  }
+}
diff --git a/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.service.ts b/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.service.ts
new file mode 100644
index 0000000000..64b5326cfd
--- /dev/null
+++ b/src/app/common/modals/scorm-extension-modal/scorm-extension-modal.service.ts
@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {ScormExtensionModalComponent} from './scorm-extension-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScormExtensionModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(task: Task, afterApplication?: () => void) {
+    const dialogRef: MatDialogRef<ScormExtensionModalComponent, void> = this.dialog.open(
+      ScormExtensionModalComponent,
+      {
+        data: {
+          task,
+          afterApplication,
+        },
+      },
+    );
+
+    dialogRef.afterOpened().subscribe();
+
+    dialogRef.afterClosed().subscribe();
+  }
+}
diff --git a/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.html b/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.html
new file mode 100644
index 0000000000..b026fd960f
--- /dev/null
+++ b/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.html
@@ -0,0 +1,22 @@
+<div>
+  <h3 mat-dialog-title>Active jobs in progress</h3>
+  <mat-dialog-content>
+    <div>
+      @for (jobEntry of sidekiqJobs; track jobEntry) {
+        <div class="flex items-center justify-between p-1">
+          <div>{{ jobEntry.title }}</div>
+          <div class="flex items-center">
+            <div class="mr-6 text-center">{{ jobEntry.job?.status?.toUpperCase() }}</div>
+            <div class="flex gap-2.5">
+              <button color="primary" mat-raised-button (click)="viewJob(jobEntry)">View</button>
+              <button color="red" mat-raised-button (click)="removeJob(jobEntry)">Clear</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  </mat-dialog-content>
+  <mat-dialog-actions class="flex justify-between">
+    <button mat-raised-button (click)="dismissModal()">Close</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.scss b/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.ts b/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.ts
new file mode 100644
index 0000000000..dceebc3455
--- /dev/null
+++ b/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component.ts
@@ -0,0 +1,50 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+import {SidekiqJobEntry, SidekiqJobService} from 'src/app/api/services/sidekiq-job.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from '../../services/alert.service';
+
+@Component({
+  selector: 'f-sidekiq-jobs-modal',
+  templateUrl: './sidekiq-jobs-modal.component.html',
+  styleUrl: './sidekiq-jobs-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class SidekiqJobsModalComponent implements OnInit {
+  constructor(
+    @Inject(AlertService) private alertService: AlertService,
+
+    public dialogRef: MatDialogRef<SidekiqJobsModalComponent>,
+    private sidekiqJobService: SidekiqJobService,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
+  ) {}
+
+  sidekiqJobs: SidekiqJobEntry[] = [];
+  ngOnInit(): void {
+    this.sidekiqJobService.sidekiqJobsSubject.subscribe((jobs) => {
+      this.sidekiqJobs = jobs;
+      if (jobs.length === 0) {
+        this.dismissModal();
+      }
+    });
+  }
+
+  viewJob(jobEntry: SidekiqJobEntry) {
+    this.sidekiqProgressModalService.show(jobEntry.title, jobEntry.job.id).subscribe({
+      next: (job) => {
+        jobEntry.resultSubject.next(job);
+      },
+    });
+
+    this.dismissModal();
+  }
+
+  removeJob(jobEntry: SidekiqJobEntry) {
+    this.sidekiqJobService.removeJob(jobEntry.job.id);
+  }
+
+  public dismissModal() {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.service.ts b/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.service.ts
new file mode 100644
index 0000000000..8bff4123ff
--- /dev/null
+++ b/src/app/common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.service.ts
@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {SidekiqJobsModalComponent} from './sidekiq-jobs-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SidekiqJobsModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show() {
+    this.dialog.open<SidekiqJobsModalComponent>(SidekiqJobsModalComponent, {
+      position: {top: '2.5%'},
+      width: '100%',
+      maxWidth: '650px',
+    });
+  }
+}
diff --git a/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.html b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.html
new file mode 100644
index 0000000000..c39d262374
--- /dev/null
+++ b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.html
@@ -0,0 +1,37 @@
+<div>
+  <h3 mat-dialog-title>
+    {{ data.title }}
+  </h3>
+  <mat-dialog-content>
+    <div>
+      This job is running in the background. You can close this dialog and monitor progress anytime.
+    </div>
+    <div class="mt-3 mb-1 flex w-full justify-between">
+      @if (job?.status === 'complete') {
+        <div>COMPLETE</div>
+      } @else {
+        <div>{{ job?.status.toUpperCase() }}{{ job?.message ? ': ' + job.message : '' }}</div>
+      }
+      <div>
+        {{ job?.status === 'complete' ? job?.totalCount : job?.processedCount }}/{{
+          job?.totalCount
+        }}
+        ({{ job?.status === 'complete' ? '100' : job?.pctComplete }}%)
+      </div>
+    </div>
+    @if (job?.status === 'queued') {
+      <mat-progress-bar mode="buffer" [value]="job?.pctComplete ?? 0"></mat-progress-bar>
+    } @else {
+      <mat-progress-bar
+        mode="determinate"
+        [value]="job?.status === 'complete' ? 100 : (job?.pctComplete ?? 0)"
+      ></mat-progress-bar>
+    }
+  </mat-dialog-content>
+  <mat-dialog-actions class="flex justify-between">
+    <button mat-raised-button (click)="dismissModal()">Dismiss</button>
+    @if (job?.status !== 'working' && job?.result) {
+      <button color="primary" mat-raised-button (click)="viewResult()">View Result</button>
+    }
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.scss b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.spec.ts b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.spec.ts
new file mode 100644
index 0000000000..6bedbb62b2
--- /dev/null
+++ b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.spec.ts
@@ -0,0 +1,42 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {SidekiqJobService} from 'src/app/api/services/sidekiq-job.service';
+import {AlertService} from '../../services/alert.service';
+import {SidekiqProgressModalComponent} from './sidekiq-progress-modal.component';
+import {SidekiqProgressModalService} from './sidekiq-progress-modal.service';
+
+const emptyProvider = {};
+
+describe('SidekiqProgressModalComponent', () => {
+  let component: SidekiqProgressModalComponent;
+  let fixture: ComponentFixture<SidekiqProgressModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SidekiqProgressModalComponent],
+      providers: [
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: MAT_DIALOG_DATA, useValue: emptyProvider},
+        {provide: MatDialogRef, useValue: emptyProvider},
+        {provide: SidekiqJobService, useValue: emptyProvider},
+        {provide: SidekiqProgressModalService, useValue: emptyProvider},
+        {provide: MatSnackBar, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(SidekiqProgressModalComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidekiqProgressModalComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.ts b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.ts
new file mode 100644
index 0000000000..440d1ebf5d
--- /dev/null
+++ b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component.ts
@@ -0,0 +1,100 @@
+import {ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Subject} from 'rxjs';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {SidekiqJobService} from 'src/app/api/services/sidekiq-job.service';
+import {AlertService} from '../../services/alert.service';
+import {SidekiqProgressModalService} from './sidekiq-progress-modal.service';
+
+export interface SidekiqProgressModalData {
+  title: string;
+  jobId: string;
+  subject: Subject<SidekiqJob>;
+  pollFailureLimit?: number;
+}
+
+@Component({
+  selector: 'f-sidekiq-progress-modal',
+  templateUrl: './sidekiq-progress-modal.component.html',
+  styleUrl: './sidekiq-progress-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class SidekiqProgressModalComponent implements OnInit, OnDestroy {
+  private readonly pollingInterval: number = 1250;
+
+  private jobPollingInterval; // NodeJS.timeout
+
+  pollFailureCount: number = 0;
+  pollFailureLimit: number = 5;
+
+  public job?: SidekiqJob;
+
+  constructor(
+    @Inject(AlertService) private alertService: AlertService,
+    @Inject(MAT_DIALOG_DATA) public data: SidekiqProgressModalData,
+
+    public dialogRef: MatDialogRef<SidekiqProgressModalComponent, SidekiqProgressModalData>,
+    private sidekiqJobService: SidekiqJobService,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
+    private snackBar: MatSnackBar,
+  ) {}
+
+  ngOnInit(): void {
+    this.pollFailureLimit = this.data.pollFailureLimit ?? 5;
+    this.pollFailureCount = 0;
+
+    this.getSidekiqJob();
+    this.jobPollingInterval = setInterval(() => {
+      this.getSidekiqJob();
+    }, this.pollingInterval);
+
+    this.dialogRef.afterClosed().subscribe(() => {
+      clearInterval(this.jobPollingInterval);
+    });
+  }
+
+  private getSidekiqJob() {
+    if (!this.data.jobId) {
+      clearInterval(this.jobPollingInterval);
+      this.dialogRef.close();
+    }
+
+    this.sidekiqJobService.getSidekiqJob(this.data.jobId).subscribe({
+      next: (job) => {
+        this.sidekiqJobService.setJob(job.id, this.data.title, this.data.subject, job);
+        this.job = job;
+        this.pollFailureCount = 0;
+
+        if (job.status === 'complete' || job.status === 'failed') {
+          clearInterval(this.jobPollingInterval);
+        }
+      },
+      error: (error) => {
+        console.error(error);
+        this.pollFailureCount += 1;
+
+        if (this.pollFailureCount >= this.pollFailureLimit) {
+          this.alertService.error(error, 6000);
+          clearInterval(this.jobPollingInterval);
+        }
+      },
+    });
+  }
+
+  ngOnDestroy(): void {
+    clearInterval(this.jobPollingInterval);
+  }
+
+  public viewResult() {
+    this.data.subject.next(this.job);
+
+    this.dialogRef.close();
+    this.sidekiqJobService.removeJob(this.data.jobId);
+  }
+
+  public dismissModal() {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service.ts b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service.ts
new file mode 100644
index 0000000000..3881a3d7e6
--- /dev/null
+++ b/src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service.ts
@@ -0,0 +1,41 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Subject} from 'rxjs';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {SidekiqJobService} from 'src/app/api/services/sidekiq-job.service';
+import {
+  SidekiqProgressModalComponent,
+  SidekiqProgressModalData,
+} from './sidekiq-progress-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SidekiqProgressModalService {
+  constructor(
+    public dialog: MatDialog,
+    private sidekiqJobService: SidekiqJobService,
+  ) {}
+
+  public show(title: string, jobId: string) {
+    const subject: Subject<SidekiqJob> = new Subject();
+
+    this.sidekiqJobService.setJob(jobId, title, subject);
+
+    this.dialog.open<SidekiqProgressModalComponent, SidekiqProgressModalData>(
+      SidekiqProgressModalComponent,
+      {
+        data: {
+          title,
+          jobId,
+          subject: subject,
+          pollFailureLimit: 5,
+        },
+        position: {top: '2.5%'},
+        width: '100%',
+        maxWidth: '650px',
+      },
+    );
+    return subject;
+  }
+}
diff --git a/src/app/common/modals/spec-con-modal/spec-con-modal.component.html b/src/app/common/modals/spec-con-modal/spec-con-modal.component.html
new file mode 100644
index 0000000000..182c88c0f6
--- /dev/null
+++ b/src/app/common/modals/spec-con-modal/spec-con-modal.component.html
@@ -0,0 +1,25 @@
+<h3 mat-dialog-title>Grant Extension / Special Consideration</h3>
+<div mat-dialog-content>
+  <p class="w-full">
+    Please enter number of days to extend the portfolio due date and all tasks for this student.
+  </p>
+
+  <mat-form-field appearance="outline">
+    <mat-label>Number of days</mat-label>
+    <input matInput min="0" placeholder="Number of days" type="number" [(ngModel)]="days" />
+  </mat-form-field>
+</div>
+
+<div mat-dialog-actions style="float: right">
+  <button color="warn" mat-dialog-close mat-stroked-button>Cancel</button>
+  <button
+    color="primary"
+    mat-button
+    mat-dialog-close
+    mat-stroked-button
+    style="margin-right: 10px"
+    (click)="save()"
+  >
+    Apply
+  </button>
+</div>
diff --git a/src/app/common/modals/spec-con-modal/spec-con-modal.component.ts b/src/app/common/modals/spec-con-modal/spec-con-modal.component.ts
new file mode 100644
index 0000000000..ee96ac0396
--- /dev/null
+++ b/src/app/common/modals/spec-con-modal/spec-con-modal.component.ts
@@ -0,0 +1,37 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Project} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from '../../services/alert.service';
+
+@Component({
+  selector: 'f-spec-con-modal',
+  templateUrl: './spec-con-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class SpecConModalComponent {
+  public days: number = 0;
+
+  constructor(
+    public dialogRef: MatDialogRef<SpecConModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: {project: Project},
+    private alerts: AlertService,
+  ) {
+    this.days = this.data.project.specConDays;
+  }
+
+  public get project(): Project {
+    return this.data.project;
+  }
+
+  public save(): void {
+    this.project.applySpecCon(this.days).subscribe({
+      next: (_project: Project) => {
+        this.alerts.success('Extension applied.');
+      },
+      error: (message) => {
+        this.alerts.error(`Error applying extension: ${message}`);
+      },
+    });
+  }
+}
diff --git a/src/app/common/modals/spec-con-modal/spec-con-modal.service.ts b/src/app/common/modals/spec-con-modal/spec-con-modal.service.ts
new file mode 100644
index 0000000000..cf34b4b5d8
--- /dev/null
+++ b/src/app/common/modals/spec-con-modal/spec-con-modal.service.ts
@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {Project} from 'src/app/api/models/doubtfire-model';
+import {SpecConModalComponent} from './spec-con-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SpecConModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(project: Project) {
+    const _dialogRef: MatDialogRef<SpecConModalComponent, {project: Project}> = this.dialog.open(
+      SpecConModalComponent,
+      {
+        data: {project: project},
+      },
+    );
+  }
+}
diff --git a/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.html b/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.html
index 080a65cfd6..1e3f606499 100644
--- a/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.html
+++ b/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.html
@@ -1,15 +1,21 @@
 <div class="submission-history-modal">
-  <h3 mat-dialog-title class="panel-title">Overseer Assessment</h3>
+  <h3 class="panel-title" mat-dialog-title>Overseer Assessment</h3>
   <mat-dialog-content style="height: calc(100% - 7em)">
-    <task-submission-history [task]="task" (hasNoData)="setNoDataFlag($event)" [refreshTrigger]="refreshTrigger">
-    </task-submission-history>
+    <f-task-overseer-report [loadOverseerAssessmentId]="overseerAssessmentId" [task]="task">
+    </f-task-overseer-report>
   </mat-dialog-content>
   <div mat-dialog-actions style="float: right">
     @if (noDataFlag) {
-    <button mat-button mat-raised-button color="primary" style="margin-right: 6px" (click)="resfreshChildComponent()">
-      <i class="fa fa-refresh"></i> Refresh
-    </button>
+      <button
+        color="primary"
+        mat-button
+        mat-raised-button
+        style="margin-right: 6px"
+        (click)="resfreshChildComponent()"
+      >
+        <mat-icon inline>refresh</mat-icon> Refresh
+      </button>
     }
-    <button mat-dialog-close mat-stroked-button color="warn">Cancel</button>
+    <button color="warn" mat-dialog-close mat-stroked-button>Cancel</button>
   </div>
 </div>
diff --git a/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.scss b/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.scss
index c9e26fca56..2ca54d9c09 100644
--- a/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.scss
+++ b/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.scss
@@ -1,4 +1,3 @@
-
 /* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version. */
 /* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version. */
 mat-dialog-container.mat-mdc-dialog-container {
@@ -7,7 +6,7 @@ mat-dialog-container.mat-mdc-dialog-container {
   max-height: unset;
 }
 
-.mat-mdc-dialog-title{
+.mat-mdc-dialog-title {
   padding-top: 0;
   margin: 1em;
 }
diff --git a/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.ts b/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.ts
index 06c8fb3246..c37611915f 100644
--- a/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.ts
+++ b/src/app/common/modals/task-assessment-modal/task-assessment-modal.component.ts
@@ -1,25 +1,30 @@
-import {Component, OnInit, Inject, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject, Input, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Subject} from 'rxjs';
 import {Task} from 'src/app/api/models/doubtfire-model';
+import {TaskAssessmentModalData} from './task-assessment-modal.service';
 
 @Component({
   selector: 'task-assessment-modal',
   templateUrl: './task-assessment-modal.component.html',
   styleUrls: ['./task-assessment-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskAssessmentModalComponent implements OnInit {
   @Input() task: Task;
+  @Input() overseerAssessmentId?: number;
   noDataFlag: boolean;
   refreshTrigger: Subject<boolean> = new Subject();
 
   constructor(
     public dialogRef: MatDialogRef<TaskAssessmentModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA) public data: TaskAssessmentModalData,
   ) {}
 
   ngOnInit() {
-    this.task = this.data;
+    this.task = this.data.task;
+    this.overseerAssessmentId = this.data.overseerAssessmentId;
   }
 
   setNoDataFlag($event) {
diff --git a/src/app/common/modals/task-assessment-modal/task-assessment-modal.service.ts b/src/app/common/modals/task-assessment-modal/task-assessment-modal.service.ts
index 927c861a04..de21c465a2 100644
--- a/src/app/common/modals/task-assessment-modal/task-assessment-modal.service.ts
+++ b/src/app/common/modals/task-assessment-modal/task-assessment-modal.service.ts
@@ -1,21 +1,30 @@
-import { Injectable } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
 import {TaskAssessmentModalComponent} from './task-assessment-modal.component';
 
+export interface TaskAssessmentModalData {
+  task: Task;
+  overseerAssessmentId: number;
+}
+
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class TaskAssessmentModalService {
-  constructor(
-    public dialog: MatDialog,
-    ) { }
+  constructor(public dialog: MatDialog) {}
 
-  public show(task: any) {
-    let dialogRef: MatDialogRef<TaskAssessmentModalComponent, any>;
-    dialogRef = this.dialog.open(TaskAssessmentModalComponent, {
-      data: task,
-      width: '80%',
-      panelClass: 'submission-history-modal'
-    });
+  public show(task: Task, overseerAssessmentId?: number) {
+    this.dialog.open<TaskAssessmentModalComponent, TaskAssessmentModalData>(
+      TaskAssessmentModalComponent,
+      {
+        data: {
+          task: task,
+          overseerAssessmentId,
+        },
+        width: '80%',
+        panelClass: 'submission-history-modal',
+      },
+    );
   }
 }
diff --git a/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.html b/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.html
new file mode 100644
index 0000000000..176eebc049
--- /dev/null
+++ b/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.html
@@ -0,0 +1,5 @@
+<f-tutor-notes-view
+  class="h-full p-3 pb-0"
+  [task]="task"
+  [unitRole]="unitRole"
+></f-tutor-notes-view>
diff --git a/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.scss b/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.ts b/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.ts
new file mode 100644
index 0000000000..bb34f4495f
--- /dev/null
+++ b/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.component.ts
@@ -0,0 +1,24 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {TutorNotesModalData} from './tutor-notes-modal.service';
+
+@Component({
+  selector: 'f-tutor-notes-modal',
+  templateUrl: './tutor-notes-modal.component.html',
+  styleUrl: './tutor-notes-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TutorNotesModalComponent implements OnInit {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: TutorNotesModalData) {}
+
+  task?: Task;
+  unitRole?: UnitRole;
+
+  ngOnInit() {
+    this.task = this.data.task;
+    this.unitRole = this.data.unitRole;
+  }
+}
diff --git a/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.service.ts b/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.service.ts
new file mode 100644
index 0000000000..ef32e890c6
--- /dev/null
+++ b/src/app/common/modals/tutor-notes-modal/tutor-notes-modal.service.ts
@@ -0,0 +1,33 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {TutorNotesModalComponent} from './tutor-notes-modal.component';
+
+export interface TutorNotesModalData {
+  task?: Task;
+  unitRole?: UnitRole;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TutorNotesModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(task?: Task, unitRole?: UnitRole) {
+    const _dialogRef = this.dialog.open<TutorNotesModalComponent, TutorNotesModalData>(
+      TutorNotesModalComponent,
+      {
+        data: {
+          task,
+          unitRole,
+        },
+        width: '100%',
+        height: '90vh',
+        maxWidth: '1200px',
+        panelClass: 'overflow-y-auto',
+      },
+    );
+  }
+}
diff --git a/src/app/common/notification-settings/notification-settings.component.html b/src/app/common/notification-settings/notification-settings.component.html
new file mode 100644
index 0000000000..b1e1f69d2a
--- /dev/null
+++ b/src/app/common/notification-settings/notification-settings.component.html
@@ -0,0 +1,54 @@
+<section class="notification-settings flex size-full flex-col">
+  <h3>Notification Settings</h3>
+
+  <p class="notification-settings__intro">
+    Choose which notification categories you want to receive.
+  </p>
+
+  @if (showNotificationsLink) {
+    <p>
+      You can view the notifications controlled by these preferences on the
+      <a routerLink="/notifications">Notifications page</a>.
+    </p>
+  }
+
+  <div class="notification-setting">
+    <mat-checkbox
+      aria-describedby="task-notification-description"
+      color="primary"
+      [ngModelOptions]="{standalone: true}"
+      [(ngModel)]="user.receiveTaskNotifications"
+    >
+      Task notifications
+    </mat-checkbox>
+    <small id="task-notification-description">Receive notifications for task-related events.</small>
+  </div>
+
+  <div class="notification-setting">
+    <mat-checkbox
+      aria-describedby="feedback-notification-description"
+      color="primary"
+      [ngModelOptions]="{standalone: true}"
+      [(ngModel)]="user.receiveFeedbackNotifications"
+    >
+      Feedback notifications
+    </mat-checkbox>
+    <small id="feedback-notification-description">
+      Receive notifications for feedback-related events.
+    </small>
+  </div>
+
+  <div class="notification-setting">
+    <mat-checkbox
+      aria-describedby="portfolio-notification-description"
+      color="primary"
+      [ngModelOptions]="{standalone: true}"
+      [(ngModel)]="user.receivePortfolioNotifications"
+    >
+      Portfolio notifications
+    </mat-checkbox>
+    <small id="portfolio-notification-description">
+      Receive notifications for portfolio-related events.
+    </small>
+  </div>
+</section>
diff --git a/src/app/common/notification-settings/notification-settings.component.scss b/src/app/common/notification-settings/notification-settings.component.scss
new file mode 100644
index 0000000000..e29d7a879c
--- /dev/null
+++ b/src/app/common/notification-settings/notification-settings.component.scss
@@ -0,0 +1,19 @@
+.notification-settings {
+  gap: 12px;
+  padding: 12px 0;
+}
+
+.notification-settings h3,
+.notification-settings__intro {
+  margin: 0;
+}
+
+.notification-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.notification-setting small {
+  margin-left: 32px;
+}
diff --git a/src/app/common/notification-settings/notification-settings.component.spec.ts b/src/app/common/notification-settings/notification-settings.component.spec.ts
new file mode 100644
index 0000000000..a2d9cbbaa6
--- /dev/null
+++ b/src/app/common/notification-settings/notification-settings.component.spec.ts
@@ -0,0 +1,124 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
+import {RouterModule} from '@angular/router';
+import {User} from 'src/app/api/models/user/user';
+import {NotificationSettingsComponent} from './notification-settings.component';
+
+const makeUser = (): User =>
+  ({
+    id: 1,
+    systemRole: 'Student',
+    receiveTaskNotifications: false,
+    receiveFeedbackNotifications: false,
+    receivePortfolioNotifications: false,
+  }) as User;
+
+describe('NotificationSettingsComponent', () => {
+  let component: NotificationSettingsComponent;
+  let fixture: ComponentFixture<NotificationSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NotificationSettingsComponent],
+      imports: [FormsModule, MatCheckboxModule, RouterModule.forRoot([])],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NotificationSettingsComponent);
+    component = fixture.componentInstance;
+    component.user = makeUser();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('shows the three notification preferences', async () => {
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+
+    expect(checkboxes.length).toBe(3);
+
+    expect(await checkboxes[0].getLabelText()).toBe('Task notifications');
+    expect(await checkboxes[1].getLabelText()).toBe('Feedback notifications');
+    expect(await checkboxes[2].getLabelText()).toBe('Portfolio notifications');
+  });
+
+  it('updates the correct user preference when toggled', async () => {
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+
+    const taskCheckbox = await loader.getHarness(
+      MatCheckboxHarness.with({label: 'Task notifications'}),
+    );
+    const feedbackCheckbox = await loader.getHarness(
+      MatCheckboxHarness.with({label: 'Feedback notifications'}),
+    );
+    const portfolioCheckbox = await loader.getHarness(
+      MatCheckboxHarness.with({label: 'Portfolio notifications'}),
+    );
+
+    await taskCheckbox.check();
+
+    expect(component.user.receiveTaskNotifications).toBe(true);
+    expect(component.user.receiveFeedbackNotifications).toBe(false);
+    expect(component.user.receivePortfolioNotifications).toBe(false);
+
+    await feedbackCheckbox.check();
+
+    expect(component.user.receiveFeedbackNotifications).toBe(true);
+
+    await portfolioCheckbox.check();
+
+    expect(component.user.receivePortfolioNotifications).toBe(true);
+  });
+
+  it('shows help text for each notification category', () => {
+    const text = fixture.nativeElement.textContent;
+
+    expect(text).toContain('Receive notifications for task-related events.');
+    expect(text).toContain('Receive notifications for feedback-related events.');
+    expect(text).toContain('Receive notifications for portfolio-related events.');
+  });
+
+  it('associates each checkbox with its help text', () => {
+    const inputs = fixture.nativeElement.querySelectorAll('input[type="checkbox"]');
+    const descriptions = fixture.nativeElement.querySelectorAll('.notification-setting small');
+    const descriptionIds = [
+      'task-notification-description',
+      'feedback-notification-description',
+      'portfolio-notification-description',
+    ];
+
+    expect(inputs.length).toBe(3);
+    expect(descriptions.length).toBe(3);
+
+    descriptionIds.forEach((id, index) => {
+      expect(descriptions[index].id).toBe(id);
+      expect(inputs[index].getAttribute('aria-describedby')).toBe(id);
+      expect(inputs[index].hasAttribute('name')).toBe(false);
+    });
+  });
+
+  it('links the notification preferences to the notifications page', () => {
+    fixture.componentRef.setInput('showNotificationsLink', true);
+    fixture.detectChanges();
+
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a[href="/notifications"]');
+
+    expect(link).not.toBeNull();
+    expect(link.textContent.trim()).toBe('Notifications page');
+  });
+
+  // The admin Users dialog and the first-login form render these settings too,
+  // and neither should link to the viewer's own notifications.
+  it('leaves the notifications page link out unless asked to show it', () => {
+    expect(fixture.nativeElement.querySelector('a[href="/notifications"]')).toBeNull();
+    expect(fixture.nativeElement.textContent).not.toContain('Notifications page');
+  });
+});
diff --git a/src/app/common/notification-settings/notification-settings.component.ts b/src/app/common/notification-settings/notification-settings.component.ts
new file mode 100644
index 0000000000..734fec2c9c
--- /dev/null
+++ b/src/app/common/notification-settings/notification-settings.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from '@angular/core';
+import {User} from 'src/app/api/models/user/user';
+
+@Component({
+  selector: 'f-notification-settings',
+  templateUrl: './notification-settings.component.html',
+  styleUrl: './notification-settings.component.scss',
+  standalone: false,
+})
+export class NotificationSettingsComponent {
+  @Input({required: true}) user!: User;
+
+  /**
+   * Show the link to the notifications page. Off by default because the same
+   * settings also render in the admin Users dialog, where the user belongs to
+   * someone else, and on the first-login setup form.
+   */
+  @Input() showNotificationsLink = false;
+}
diff --git a/src/app/common/notifications-page/notifications-page.component.html b/src/app/common/notifications-page/notifications-page.component.html
new file mode 100644
index 0000000000..098b2585f7
--- /dev/null
+++ b/src/app/common/notifications-page/notifications-page.component.html
@@ -0,0 +1,135 @@
+<div class="notifications-page mx-auto my-6 max-w-3xl px-4">
+  <div class="notifications-header mb-4 flex items-center justify-between gap-3">
+    <div>
+      <h1 class="text-2xl">Notifications</h1>
+      <p class="notification-time">
+        Comments on your tasks, feedback and reminders appear here.<br />
+        Mark all read marks notifications as read but does not remove them.<br />
+        Deleting a notification permanently removes it and cannot be undone.
+      </p>
+    </div>
+
+    <!--
+      Keep the control rendered once the list is visible, even after the last
+      unread row changes. Removing a focused button would drop keyboard focus to
+      the document body. disabledInteractive keeps it focusable while the guard
+      in markAllRead prevents another request.
+    -->
+    @if (!loading && !loadFailed && notifications.length) {
+      <!--
+        The label is hidden below sm and the icon carries it there, so the
+        aria-label is not a duplicate of visible text, it is the only wording
+        left at that size.
+      -->
+      <button
+        aria-label="Mark all read"
+        class="notification-mark-all"
+        mat-stroked-button
+        [disabled]="!hasUnread || markAllReadPending"
+        [disabledInteractive]="true"
+        (click)="markAllRead()"
+      >
+        <mat-icon>done_all</mat-icon>
+        <span class="notification-mark-all-label">Mark all read</span>
+      </button>
+    }
+  </div>
+
+  @if (loading) {
+    <div class="flex items-center gap-3 py-6">
+      <mat-spinner [diameter]="24"></mat-spinner>
+      <span>Loading your notifications</span>
+    </div>
+  } @else if (loadFailed) {
+    <!--
+      Kept apart from the empty state on purpose. "You have none" and "we could
+      not find out" look the same and mean opposite things, and only one of them
+      has a way out.
+    -->
+    <div class="notifications-placeholder py-6">
+      <p>We could not load your notifications.</p>
+      <button class="notifications-retry" mat-stroked-button (click)="load()">Try again</button>
+    </div>
+  } @else if (!notifications.length) {
+    <div class="notifications-placeholder py-6">
+      <p>You have no notifications yet.</p>
+      <p class="notification-time">
+        Comments on your tasks, feedback and reminders will show up here.
+      </p>
+    </div>
+  } @else {
+    <!--
+      Plain buttons rather than mat-list-item. Material lays a list row out with
+      its own leading-icon and content wrappers, and the dropdown in the header
+      is a mat-menu-item with a different set of wrappers again, so the two
+      never lined up. Both now use the same .notification-line markup and the
+      same stylesheet block, and Material lays out neither.
+
+      Still a <button>: a div with a click handler is a row only a mouse can
+      open.
+    -->
+    <div class="notification-list">
+      @for (notification of visible; track notification.id) {
+        <!--
+          The delete button is a sibling of the row and not inside it. A button
+          inside a button is not valid html, the browser unnests them, and the
+          two end up as separate controls in an order nobody chose. Being
+          siblings is also what stops a click on delete from opening the
+          notification, with no need to stop the event.
+        -->
+        <div class="notification-item flex w-full items-center">
+          <button
+            class="notification-row grow"
+            type="button"
+            [attr.aria-label]="rowLabel(notification)"
+            (click)="open(notification)"
+          >
+            <span class="notification-line">
+              <!--
+                Same five categories and the same colours as the dropdown in the
+                header, so a notification looks like itself wherever it is read.
+              -->
+              <span class="notification-glyph" [class]="'tone-' + toneFor(notification)">
+                <mat-icon>{{ iconFor(notification) }}</mat-icon>
+              </span>
+
+              <span class="notification-body">
+                <span class="notification-message" [class.unread]="!notification.isRead">{{
+                  notification.message
+                }}</span>
+                <span class="notification-time">{{ timeAgo(notification) }}</span>
+              </span>
+
+              <span
+                aria-hidden="true"
+                class="notification-unread-dot"
+                [class.is-read]="notification.isRead"
+              ></span>
+            </span>
+          </button>
+
+          <button
+            class="notification-delete"
+            mat-icon-button
+            matTooltip="Delete"
+            [attr.aria-label]="deleteLabel(notification)"
+            [disabled]="isDeleting(notification)"
+            [disabledInteractive]="true"
+            (click)="confirmDelete(notification)"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+      }
+    </div>
+
+    <mat-paginator
+      class="mat-elevation-z0"
+      [length]="notifications.length"
+      [pageIndex]="pageIndex"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizeOptions"
+      (page)="onPage($event)"
+    ></mat-paginator>
+  }
+</div>
diff --git a/src/app/common/notifications-page/notifications-page.component.scss b/src/app/common/notifications-page/notifications-page.component.scss
new file mode 100644
index 0000000000..b4bc3e2839
--- /dev/null
+++ b/src/app/common/notifications-page/notifications-page.component.scss
@@ -0,0 +1,187 @@
+.notification-list {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+// The row and its delete button, side by side. The separator and the hover both
+// live out here rather than on the button, so they run the full width of the
+// list instead of stopping short of the delete column.
+.notification-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding-right: 4px;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+}
+
+// A plain button carrying the shared row shape. Material lays out neither this
+// nor the header dropdown's rows, which is the only way the two match.
+.notification-row {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  display: block;
+  font: inherit;
+  // No right padding. The delete button beside it brings its own, and doubling
+  // up would push the unread dot away from the edge it marks.
+  padding: 14px 0 14px 12px;
+  // Without this the row keeps its content width inside the flex line, and a
+  // list of short messages leaves the delete buttons in a different place on
+  // every row.
+  min-width: 0;
+
+  &:focus-visible {
+    outline: 2px solid #3939ff;
+    outline-offset: -2px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Shared row shape. The header's notification-bell carries a copy of this
+// block, deliberately: the two components are on sibling branches so neither
+// can import from the other yet, and a row has to look the same in both places.
+// Both copies belong in one stylesheet once they have merged. Keep them equal.
+// ---------------------------------------------------------------------------
+.notification-line {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+
+.notification-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  text-align: left;
+}
+
+.notification-glyph {
+  align-items: center;
+  border-radius: 50%;
+  display: inline-flex;
+  flex: 0 0 36px;
+  height: 36px;
+  justify-content: center;
+  width: 36px;
+
+  // mat-icon ships as a 24px inline-block with a 24px line box. Left alone the
+  // glyph is nearly as wide as the circle and sits low in it, because an inline
+  // box aligns on its baseline. A block with a line-height equal to its own
+  // height and no margin takes that out, and the flex centring above then does
+  // what it looks like it does.
+  .mat-icon {
+    // Explicitly, not by inheritance. Material colours icons inside a menu item
+    // with .mat-mdc-menu-item .mat-icon { color: ... }, so a tone set on the
+    // circle around it is simply overridden and the glyph comes out black in
+    // the dropdown while the same glyph is coloured on the page.
+    color: inherit;
+    display: block;
+    font-size: 20px;
+    height: 20px;
+    line-height: 20px;
+    margin: 0;
+    overflow: visible;
+    width: 20px;
+  }
+
+  &.tone-feedback {
+    background: rgba(57, 57, 255, 0.12);
+    color: #2a2ad6;
+  }
+
+  &.tone-task {
+    background: rgba(199, 119, 0, 0.12);
+    color: #b26a00;
+  }
+
+  &.tone-portfolio {
+    background: rgba(123, 63, 242, 0.12);
+    color: #7b3ff2;
+  }
+
+  &.tone-extension {
+    background: rgba(31, 138, 76, 0.12);
+    color: #1f8a4c;
+  }
+
+  &.tone-general {
+    background: rgba(95, 99, 104, 0.12);
+    color: #5f6368;
+  }
+}
+
+.notification-message {
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 14px;
+  line-height: 1.35;
+  white-space: normal;
+
+  &.unread {
+    font-weight: 600;
+  }
+}
+
+.notification-unread-dot {
+  background: #3939ff;
+  border-radius: 50%;
+  flex: 0 0 7px;
+  height: 7px;
+  width: 7px;
+
+  &.is-read {
+    visibility: hidden;
+  }
+}
+
+.notification-time {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.notifications-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+// The delete button competes with the message for attention on a list nobody
+// opened to delete things from, so it is drawn down to match the dropdown's.
+.notification-delete {
+  color: rgba(0, 0, 0, 0.54);
+  flex: none;
+
+  .mat-icon {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+  }
+}
+
+// Never shrinks, and on a phone it drops its label and keeps the icon. It sits
+// beside an h1 in a flex row, and at 320px the heading and a full width button
+// do not both fit; letting the button squeeze instead wraps "Mark all read"
+// onto two lines inside itself.
+//
+// The aria-label on the button is what carries the wording once the span is
+// gone, since display: none takes it out of the accessibility tree too.
+.notification-mark-all {
+  flex: none;
+
+  .mat-icon {
+    margin-right: 6px;
+  }
+
+  @media (max-width: 599px) {
+    min-width: 0;
+
+    .mat-icon {
+      margin-right: 0;
+    }
+
+    .notification-mark-all-label {
+      display: none;
+    }
+  }
+}
diff --git a/src/app/common/notifications-page/notifications-page.component.spec.ts b/src/app/common/notifications-page/notifications-page.component.spec.ts
new file mode 100644
index 0000000000..e5230fba61
--- /dev/null
+++ b/src/app/common/notifications-page/notifications-page.component.spec.ts
@@ -0,0 +1,721 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Router} from '@angular/router';
+import {Observable, Subject, defer, of, throwError} from 'rxjs';
+import {Notification} from 'src/app/api/models/notification';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {NotificationRouteService} from 'src/app/api/services/notification-route.service';
+import {NotificationService} from 'src/app/api/services/notification.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {ConfirmationModalService} from '../modals/confirmation-modal/confirmation-modal.service';
+import {NotificationsPageComponent} from './notifications-page.component';
+
+/**
+ * Three of these are the states the ticket names, loading, empty and the list
+ * itself, and they are tested through the rendered page because that is where
+ * the difference between them lives. The fourth is the one the ticket does not
+ * name and is the same trap as in the dropdown: a request that failed must not
+ * be drawn as a user with no notifications.
+ *
+ * The paging tests drive the real paginator rather than calling onPage, so the
+ * binding between them counts. They hold the api at arm's length deliberately:
+ * there is one fetch and one only, and every page after the first has to come
+ * out of what is already here.
+ */
+describe('NotificationsPageComponent', () => {
+  let component: NotificationsPageComponent;
+  let fixture: ComponentFixture<NotificationsPageComponent>;
+
+  let list: Subject<Notification[]>;
+  let subscribedTo: Set<string>;
+  let notificationService: {
+    list: ReturnType<typeof vi.fn>;
+    markRead: ReturnType<typeof vi.fn>;
+    markAllRead: ReturnType<typeof vi.fn>;
+    remove: ReturnType<typeof vi.fn>;
+  };
+  let authenticationService: {afterAuthCall: ReturnType<typeof vi.fn>};
+  let confirmationModal: {show: ReturnType<typeof vi.fn>};
+  let alerts: {success: ReturnType<typeof vi.fn>; error: ReturnType<typeof vi.fn>};
+  let router: {navigateByUrl: ReturnType<typeof vi.fn>};
+  let notificationRoutes: {navigate: ReturnType<typeof vi.fn>};
+
+  /**
+   * A stand-in that records whether anybody actually subscribed.
+   *
+   * A spy that only counts calls is happy either way, and markRead returns a
+   * cold observable, so dropping the .subscribe() sends no request at all while
+   * the call count stays exactly the same.
+   */
+  const answers = <T>(name: string, value: T): Observable<T> =>
+    defer(() => {
+      subscribedTo.add(name);
+      return of(value);
+    });
+
+  const notification = (id: number, over: Partial<Notification> = {}): Notification => {
+    const built = new Notification();
+    built.id = id;
+    built.message = `notification ${id}`;
+    built.link = `/projects/${id}/dashboard`;
+    built.notificationType = 'feedback';
+    built.readAt = null;
+    // Newest id first, so a page of them reads in a checkable order.
+    built.createdAt = new Date(2026, 0, 1, 0, 0, id);
+    return Object.assign(built, over);
+  };
+
+  const many = (count: number): Notification[] =>
+    Array.from({length: count}, (_unused, index) => notification(count - index));
+
+  const rows = (): HTMLElement[] =>
+    Array.from(fixture.nativeElement.querySelectorAll('.notification-row'));
+
+  const rowText = (): string[] =>
+    rows().map((row) => row.querySelector('.notification-message').textContent.trim());
+
+  const pageText = (): string => fixture.nativeElement.textContent;
+
+  const paginator = (): MatPaginator =>
+    fixture.debugElement.query(By.directive(MatPaginator)).componentInstance;
+
+  beforeEach(async () => {
+    list = new Subject<Notification[]>();
+    subscribedTo = new Set<string>();
+
+    notificationService = {
+      list: vi.fn().mockReturnValue(list),
+      markRead: vi.fn(() => answers('markRead', undefined)),
+      markAllRead: vi.fn(() => answers('markAllRead', undefined)),
+      remove: vi.fn(() => answers('remove', undefined)),
+    };
+    // Signed in and settled, unless a test says otherwise.
+    authenticationService = {afterAuthCall: vi.fn((callback) => callback(true))};
+    confirmationModal = {show: vi.fn()};
+    alerts = {success: vi.fn(), error: vi.fn()};
+    router = {navigateByUrl: vi.fn()};
+    notificationRoutes = {navigate: vi.fn().mockResolvedValue(true)};
+
+    await TestBed.configureTestingModule({
+      declarations: [NotificationsPageComponent],
+      imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        MatTooltipModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {provide: NotificationService, useValue: notificationService},
+        {provide: AuthenticationService, useValue: authenticationService},
+        {provide: ConfirmationModalService, useValue: confirmationModal},
+        {provide: AlertService, useValue: alerts},
+        {provide: Router, useValue: router},
+        {provide: NotificationRouteService, useValue: notificationRoutes},
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NotificationsPageComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('says it is loading before the list arrives', () => {
+    fixture.detectChanges();
+
+    expect(pageText()).toContain('Loading your notifications');
+    expect(rows()).toHaveLength(0);
+
+    list.next([notification(1)]);
+    fixture.detectChanges();
+
+    expect(pageText()).not.toContain('Loading your notifications');
+    expect(rows()).toHaveLength(1);
+  });
+
+  it('says something friendly when there is nothing to show', () => {
+    fixture.detectChanges();
+
+    list.next([]);
+    fixture.detectChanges();
+
+    expect(pageText()).toContain('You have no notifications yet');
+    expect(rows()).toHaveLength(0);
+  });
+
+  it('explains what notifications are and what the available actions do', () => {
+    fixture.detectChanges();
+
+    expect(pageText()).toContain('Comments on your tasks, feedback and reminders appear here.');
+    expect(pageText()).toContain(
+      'Mark all read marks notifications as read but does not remove them.',
+    );
+    expect(pageText()).toContain(
+      'Deleting a notification permanently removes it and cannot be undone.',
+    );
+  });
+
+  it('keeps the notification guidance visible when loading the list fails', () => {
+    fixture.detectChanges();
+
+    list.error(new Error('GET /notifications failed'));
+    fixture.detectChanges();
+
+    expect(pageText()).toContain('could not load');
+    expect(pageText()).toContain(
+      'Mark all read marks notifications as read but does not remove them.',
+    );
+    expect(pageText()).toContain(
+      'Deleting a notification permanently removes it and cannot be undone.',
+    );
+  });
+
+  it('says it could not load rather than claiming there is nothing', () => {
+    fixture.detectChanges();
+
+    list.error(new Error('GET /notifications failed'));
+    fixture.detectChanges();
+
+    expect(pageText()).toContain('could not load');
+    expect(pageText()).not.toContain('You have no notifications yet');
+  });
+
+  it('reads the list again when the retry is clicked', () => {
+    fixture.detectChanges();
+    list.error(new Error('GET /notifications failed'));
+    fixture.detectChanges();
+
+    list = new Subject<Notification[]>();
+    notificationService.list.mockReturnValue(list);
+
+    fixture.nativeElement.querySelector('.notifications-retry').click();
+    fixture.detectChanges();
+
+    expect(notificationService.list).toHaveBeenCalledTimes(2);
+    expect(pageText()).toContain('Loading your notifications');
+
+    list.next([notification(1)]);
+    fixture.detectChanges();
+
+    expect(rowText()).toEqual(['notification 1']);
+  });
+
+  it('shows the newest first', () => {
+    fixture.detectChanges();
+
+    list.next([notification(1), notification(3), notification(2)]);
+    fixture.detectChanges();
+
+    expect(rowText()).toEqual(['notification 3', 'notification 2', 'notification 1']);
+  });
+
+  it('makes each row a real button so a keyboard can open it', () => {
+    fixture.detectChanges();
+    list.next([notification(1)]);
+    fixture.detectChanges();
+
+    // Structural, and it has to be. A mat-list-item on its own is static list
+    // content: no focus, no Enter, no Space. Only the element type gives the
+    // row those, and the test environment does not simulate the browser
+    // behaviour that would let this be asserted any other way.
+    expect(rows()[0].tagName).toBe('BUTTON');
+  });
+
+  it('gives each category the same icon and colour the dropdown gives it', () => {
+    fixture.detectChanges();
+    list.next([
+      notification(5, {notificationType: 'feedback'}),
+      notification(4, {notificationType: 'task'}),
+      notification(3, {notificationType: 'portfolio'}),
+      notification(2, {notificationType: 'extension'}),
+      notification(1, {notificationType: 'general'}),
+    ]);
+    fixture.detectChanges();
+
+    const glyphs: HTMLElement[] = Array.from(
+      fixture.nativeElement.querySelectorAll('.notification-glyph'),
+    );
+
+    expect(glyphs.map((g) => g.querySelector('mat-icon').textContent.trim())).toEqual([
+      'chat_bubble',
+      'assignment',
+      'collections_bookmark',
+      'more_time',
+      'campaign',
+    ]);
+    expect(glyphs.map((g) => Array.from(g.classList).find((n) => n.startsWith('tone-')))).toEqual([
+      'tone-feedback',
+      'tone-task',
+      'tone-portfolio',
+      'tone-extension',
+      'tone-general',
+    ]);
+  });
+
+  it('still draws something for a category it has never heard of', () => {
+    fixture.detectChanges();
+    list.next([notification(1, {notificationType: 'announcement'})]);
+    fixture.detectChanges();
+
+    const glyph = fixture.nativeElement.querySelector('.notification-glyph');
+
+    expect(glyph.querySelector('mat-icon').textContent.trim()).toBe('notifications');
+    expect(Array.from(glyph.classList)).toContain('tone-general');
+  });
+
+  it('says unread in words, not only in bold', () => {
+    fixture.detectChanges();
+    list.next([
+      notification(2, {message: 'Andrew Cain commented on 1.1P.'}),
+      notification(1, {message: 'Your extension was granted.', readAt: new Date(2026, 0, 2)}),
+    ]);
+    fixture.detectChanges();
+
+    expect(rows()[0].getAttribute('aria-label')).toContain('Unread.');
+    expect(rows()[1].getAttribute('aria-label')).toContain('Read.');
+  });
+
+  it('shows one page at a time out of a single fetch', () => {
+    fixture.detectChanges();
+
+    list.next(many(45));
+    fixture.detectChanges();
+
+    expect(rows()).toHaveLength(20);
+    expect(rowText()[0]).toBe('notification 45');
+    expect(paginator().length).toBe(45);
+
+    // Through the paginator and not through onPage. Calling the handler
+    // directly passes just as well with the (page) binding deleted, and then
+    // the real Next button does nothing.
+    paginator().nextPage();
+    fixture.detectChanges();
+
+    expect(rowText()[0]).toBe('notification 25');
+    expect(rows()).toHaveLength(20);
+
+    // The last page is the short one, and it is where an off by one shows up.
+    paginator().nextPage();
+    fixture.detectChanges();
+
+    expect(rows()).toHaveLength(5);
+    expect(rowText()).toEqual([
+      'notification 5',
+      'notification 4',
+      'notification 3',
+      'notification 2',
+      'notification 1',
+    ]);
+
+    // One request for the whole thing. Paging is over what is already here,
+    // because the api has no page parameters to send.
+    expect(notificationService.list).toHaveBeenCalledTimes(1);
+  });
+
+  it('follows a change of page size', () => {
+    fixture.detectChanges();
+    list.next(many(45));
+    fixture.detectChanges();
+
+    paginator()._changePageSize(50);
+    fixture.detectChanges();
+
+    expect(rows()).toHaveLength(45);
+  });
+
+  it('does not strand the reader past the end when a reload is shorter', () => {
+    fixture.detectChanges();
+    list.next(many(45));
+    fixture.detectChanges();
+
+    paginator().nextPage();
+    paginator().nextPage();
+    fixture.detectChanges();
+    expect(rows()).toHaveLength(5);
+
+    // Same page number, far fewer notifications behind it. Left alone this
+    // renders an empty page with a paginator insisting it is page three of one.
+    list = new Subject<Notification[]>();
+    notificationService.list.mockReturnValue(list);
+    component.load();
+    list.next(many(4));
+    fixture.detectChanges();
+
+    expect(component.pageIndex).toBe(0);
+    expect(rows()).toHaveLength(4);
+  });
+
+  it('marks a row read and follows its link when it is clicked', () => {
+    fixture.detectChanges();
+    list.next([notification(1, {link: '/projects/9/dashboard'})]);
+    fixture.detectChanges();
+
+    rows()[0].click();
+
+    expect(notificationService.markRead).toHaveBeenCalledTimes(1);
+    expect(notificationService.markRead.mock.calls[0][0].id).toBe(1);
+    expect(subscribedTo.has('markRead')).toBe(true);
+    expect(notificationRoutes.navigate).toHaveBeenCalledWith('/projects/9/dashboard');
+  });
+
+  it('does not mark a row read twice', () => {
+    fixture.detectChanges();
+    list.next([notification(1, {readAt: new Date(2026, 0, 2)})]);
+    fixture.detectChanges();
+
+    rows()[0].click();
+
+    expect(notificationService.markRead).not.toHaveBeenCalled();
+    expect(notificationRoutes.navigate).toHaveBeenCalledTimes(1);
+  });
+
+  it('marks a row read even when it has nowhere to go', () => {
+    fixture.detectChanges();
+    list.next([notification(1, {link: null})]);
+    fixture.detectChanges();
+
+    rows()[0].click();
+
+    // link is nullable on the api. Refusing to mark it read would leave a
+    // number on the bell that the user has no way to clear.
+    expect(notificationService.markRead).toHaveBeenCalledTimes(1);
+    expect(notificationRoutes.navigate).not.toHaveBeenCalled();
+  });
+
+  it('says so when a notification could not be marked as read', () => {
+    notificationService.markRead.mockReturnValue(throwError(() => new Error('PUT read failed')));
+
+    fixture.detectChanges();
+    list.next([notification(1, {link: null})]);
+    fixture.detectChanges();
+
+    rows()[0].click();
+
+    expect(alerts.error).toHaveBeenCalledTimes(1);
+  });
+
+  /**
+   * The split that matters is which action asks first. Marking read destroys
+   * nothing and a dialog on it is a step to click through; delete has no undo
+   * anywhere in this feature and gets one.
+   *
+   * The one thing here that the dropdown has no version of is the paging. Five
+   * rows in a menu have no pages to fall off the end of.
+   */
+  describe('the bulk actions', () => {
+    // The dialog is a callback, not a promise. show() is handed the function to
+    // run on confirm and the one to run on cancel, so a test drives it by
+    // reaching for whichever of those it wants.
+    const confirmed = (): void => confirmationModal.show.mock.calls[0][2]();
+    const cancelled = (): void => confirmationModal.show.mock.calls[0][3]();
+
+    const deleteButtons = (): HTMLElement[] =>
+      Array.from(fixture.nativeElement.querySelectorAll('.notification-delete'));
+
+    const markAllButton = (): HTMLElement =>
+      fixture.nativeElement.querySelector('.notification-mark-all');
+
+    const read = (id: number) => notification(id, {readAt: new Date(2026, 0, 2)});
+
+    // Swap in a fresh list request and reload through it, so a test can hold the
+    // second response open or answer it with something different.
+    const reloadWith = (): Subject<Notification[]> => {
+      const refresh: Subject<Notification[]> = new Subject();
+      notificationService.list.mockReturnValue(refresh);
+      component.load();
+      fixture.detectChanges();
+      return refresh;
+    };
+
+    beforeEach(() => {
+      fixture.detectChanges();
+      list.next([notification(2), read(1)]);
+      fixture.detectChanges();
+    });
+
+    it('marks everything read without asking first', () => {
+      component.markAllRead();
+
+      expect(notificationService.markAllRead).toHaveBeenCalledTimes(1);
+      expect(subscribedTo.has('markAllRead')).toBe(true);
+      expect(confirmationModal.show).not.toHaveBeenCalled();
+      expect(alerts.success).toHaveBeenCalledWith('All notifications marked as read');
+    });
+
+    it('keeps the focused action available but disabled when nothing is unread', () => {
+      const refresh = reloadWith();
+      refresh.next([read(2), read(1)]);
+      fixture.detectChanges();
+
+      expect(markAllButton()).not.toBeNull();
+      expect(markAllButton().getAttribute('aria-disabled')).toBe('true');
+
+      component.markAllRead();
+
+      expect(notificationService.markAllRead).not.toHaveBeenCalled();
+    });
+
+    it('does not send mark all read twice while the request is pending', () => {
+      const pending: Subject<void> = new Subject();
+      notificationService.markAllRead.mockReturnValue(pending);
+
+      component.markAllRead();
+      component.markAllRead();
+
+      expect(notificationService.markAllRead).toHaveBeenCalledTimes(1);
+      expect(component.markAllReadPending).toBe(true);
+
+      pending.next();
+
+      expect(component.markAllReadPending).toBe(false);
+    });
+
+    it('keeps focus on mark all read after the rows become read', () => {
+      notificationService.markAllRead.mockImplementation(() =>
+        defer(() => {
+          component.notifications.forEach((row) => (row.readAt = new Date()));
+          return of(undefined);
+        }),
+      );
+
+      const button = markAllButton();
+      button.focus();
+      button.click();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(button);
+      expect(button.getAttribute('aria-disabled')).toBe('true');
+    });
+
+    it('offers it on a phone, where nothing refreshes the shared unread count', () => {
+      // The button is drawn from the rows this page loaded and not from
+      // NotificationService.unreadCount$. That subject seeds at zero and the
+      // only thing that refreshes it is the bell, which the header does not
+      // render below xs. Reading it here would hide this button on the one size
+      // where this page is the only way to the notifications at all.
+      expect(markAllButton()).not.toBeNull();
+      expect(notificationService.list).toHaveBeenCalledTimes(1);
+    });
+
+    it('says so when marking everything read fails', () => {
+      notificationService.markAllRead.mockReturnValue(
+        throwError(() => new Error('PUT read_all failed')),
+      );
+
+      markAllButton().click();
+
+      expect(alerts.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('asks before it deletes anything', () => {
+      deleteButtons()[0].click();
+
+      expect(confirmationModal.show).toHaveBeenCalledTimes(1);
+      expect(notificationService.remove).not.toHaveBeenCalled();
+      expect(confirmationModal.show.mock.calls[0][1]).toContain('notification 2');
+    });
+
+    it('deletes only once the dialog is agreed to', () => {
+      deleteButtons()[0].click();
+      confirmed();
+
+      expect(notificationService.remove).toHaveBeenCalledTimes(1);
+      expect(notificationService.remove.mock.calls[0][0].id).toBe(2);
+      expect(subscribedTo.has('remove')).toBe(true);
+
+      fixture.detectChanges();
+      expect(rowText()).toEqual(['notification 1']);
+    });
+
+    it('does not delete the same notification twice while the first request is pending', () => {
+      const pending: Subject<void> = new Subject();
+      notificationService.remove.mockReturnValue(pending);
+
+      deleteButtons()[0].click();
+      confirmed();
+      confirmed();
+      fixture.detectChanges();
+
+      expect(notificationService.remove).toHaveBeenCalledTimes(1);
+      expect(deleteButtons()[0].getAttribute('aria-disabled')).toBe('true');
+
+      pending.next();
+      fixture.detectChanges();
+
+      expect(component.isDeleting(notificationService.remove.mock.calls[0][0])).toBe(false);
+    });
+
+    it('moves focus to the row that replaces a deleted row', () => {
+      const button = deleteButtons()[0];
+      button.click();
+      button.focus();
+
+      confirmed();
+
+      expect(rowText()).toEqual(['notification 1']);
+      expect(document.activeElement).toBe(rows()[0]);
+    });
+
+    it('leaves the notification alone when the dialog is cancelled', () => {
+      deleteButtons()[0].click();
+      cancelled();
+      fixture.detectChanges();
+
+      expect(notificationService.remove).not.toHaveBeenCalled();
+      expect(rowText()).toEqual(['notification 2', 'notification 1']);
+    });
+
+    it('keeps the row when the delete fails', () => {
+      notificationService.remove.mockReturnValue(throwError(() => new Error('DELETE failed')));
+
+      const lastPageDelete = deleteButtons()[0];
+      lastPageDelete.click();
+      lastPageDelete.focus();
+      confirmed();
+      fixture.detectChanges();
+
+      // Taking the row out first and putting it back on failure would be worse
+      // than leaving it. The user reads the row vanishing as the delete having
+      // worked.
+      expect(rowText()).toEqual(['notification 2', 'notification 1']);
+      expect(alerts.error).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not open the notification when its delete button is clicked', () => {
+      deleteButtons()[0].click();
+
+      // The delete button is a sibling of the row rather than inside it, and
+      // that is what keeps this true without stopping the event. Nesting them
+      // would make asking to delete one mark it read and navigate away from the
+      // page it was asked on.
+      expect(notificationService.markRead).not.toHaveBeenCalled();
+      expect(notificationRoutes.navigate).not.toHaveBeenCalled();
+    });
+
+    it('names the notification on its delete button', () => {
+      // Twenty rows means twenty of these buttons. Identical labels leave
+      // somebody tabbing through them hearing the same three words over and
+      // over with nothing to tell them apart.
+      expect(deleteButtons()[0].getAttribute('aria-label')).toBe('Delete: notification 2');
+      expect(deleteButtons()[1].getAttribute('aria-label')).toBe('Delete: notification 1');
+    });
+
+    it('pulls the reader back when the last row on the last page is deleted', () => {
+      const refresh = reloadWith();
+      refresh.next(many(21));
+      fixture.detectChanges();
+
+      paginator().nextPage();
+      fixture.detectChanges();
+      expect(rows()).toHaveLength(1);
+
+      deleteButtons()[0].click();
+      confirmed();
+      fixture.detectChanges();
+
+      // Without the clamp the reader is left on page two of a list that now has
+      // one page. That draws no rows at all and does not take the empty state
+      // either, because there are still twenty notifications.
+      expect(component.pageIndex).toBe(0);
+      expect(rows()).toHaveLength(20);
+      expect(document.activeElement).toBe(rows()[0]);
+    });
+
+    it('shows the empty state once the last one is deleted', () => {
+      const refresh = reloadWith();
+      refresh.next([notification(1)]);
+      fixture.detectChanges();
+
+      deleteButtons()[0].click();
+      confirmed();
+      fixture.detectChanges();
+
+      expect(pageText()).toContain('You have no notifications yet');
+      expect(alerts.success).toHaveBeenCalledTimes(1);
+    });
+
+    it('drops a list read still in flight when everything is marked read', () => {
+      const refresh = reloadWith();
+      expect(refresh.observed).toBe(true);
+
+      component.markAllRead();
+
+      // That response was worked out before the click, and NotificationService
+      // writes list responses into the shared entity cache, so letting it land
+      // would put readAt back to null on every row.
+      expect(refresh.observed).toBe(false);
+    });
+
+    it('drops a list read still in flight when one is deleted', () => {
+      // Driven through the component rather than the dom, and that is worth a
+      // word. A reload replaces the rows with the spinner, so while one is in
+      // flight there is no delete button on screen to click, and the sequence
+      // this guards cannot be produced by clicking today. It is reachable the
+      // moment anything reloads this page on a timer or a navigation, which is
+      // what the bell already does to the count, and the response is written
+      // into a cache the whole app shares. Cheap guard, real hazard.
+      component.confirmDelete(component.visible[0]);
+      const refresh = reloadWith();
+      expect(refresh.observed).toBe(true);
+
+      confirmed();
+
+      // Worse here than for a mark read. That response still holds the row that
+      // was just deleted, so landing late would put it back on screen.
+      expect(refresh.observed).toBe(false);
+    });
+
+    it('does not leave a spinner over the list when a reload is abandoned', () => {
+      reloadWith();
+      expect(pageText()).toContain('Loading your notifications');
+
+      component.markAllRead();
+      fixture.detectChanges();
+
+      // Cancelling the request without clearing the flag sits a spinner over a
+      // list that nothing is going to replace now.
+      expect(pageText()).not.toContain('Loading your notifications');
+      expect(rows()).toHaveLength(2);
+    });
+  });
+
+  describe('before anyone is signed in', () => {
+    it('asks nothing of the api until authentication has settled', () => {
+      let resume: (signedIn: boolean) => void;
+      authenticationService.afterAuthCall.mockImplementation((callback) => {
+        resume = callback;
+      });
+
+      fixture.detectChanges();
+
+      // An anonymous GET /notifications comes back 403, and HttpErrorInterceptor
+      // reads a 403 on an anonymous user as an expired session: it alerts
+      // "Authentication timed out" and redirects to /timeout. Opening a
+      // bookmark while signed out would look like being thrown out.
+      expect(notificationService.list).not.toHaveBeenCalled();
+
+      resume(true);
+      fixture.detectChanges();
+
+      expect(notificationService.list).toHaveBeenCalledTimes(1);
+    });
+
+    it('sends the visitor to sign in instead of asking the api', () => {
+      authenticationService.afterAuthCall.mockImplementation((callback) => callback(false));
+
+      fixture.detectChanges();
+
+      expect(notificationService.list).not.toHaveBeenCalled();
+      expect(router.navigateByUrl).toHaveBeenCalledWith('/sign_in');
+    });
+  });
+});
diff --git a/src/app/common/notifications-page/notifications-page.component.ts b/src/app/common/notifications-page/notifications-page.component.ts
new file mode 100644
index 0000000000..566d4e0ce7
--- /dev/null
+++ b/src/app/common/notifications-page/notifications-page.component.ts
@@ -0,0 +1,401 @@
+import moment from 'moment';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {PageEvent} from '@angular/material/paginator';
+import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';
+import {Notification} from 'src/app/api/models/notification';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {NotificationRouteService} from 'src/app/api/services/notification-route.service';
+import {NotificationService} from 'src/app/api/services/notification.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {ConfirmationModalService} from '../modals/confirmation-modal/confirmation-modal.service';
+
+/**
+ * The whole notification list, on a page of its own.
+ *
+ * Lives under common/ next to the other routed components that are not part of
+ * a unit or a project, scorm-player and submission-files-download.
+ *
+ * Paged here and not by the api. GET /notifications takes unread_only and
+ * nothing else and answers with every row the user has, so this holds the lot
+ * and shows a page of it. That is fine at the sizes this feature produces and
+ * it is wrong at some size, which is an api ticket and not this one.
+ */
+@Component({
+  selector: 'f-notifications-page',
+  templateUrl: './notifications-page.component.html',
+  styleUrls: ['./notifications-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class NotificationsPageComponent implements OnInit, OnDestroy {
+  public readonly pageSizeOptions: number[] = [10, 20, 50];
+
+  /**
+   * The icon and colour for a notification's category.
+   *
+   * The same five as the header dropdown, deliberately, so a notification looks
+   * like itself wherever it is read. Duplicated rather than shared because the
+   * dropdown is on a sibling branch and neither can import from the other yet;
+   * this belongs in one place once both have merged, along with open().
+   *
+   * Keyed on notificationType because that is all NotificationEntity exposes.
+   * The event naming the specific thing that happened is not in the payload, so
+   * a new task, a due date change and a due soon reminder share the task icon.
+   */
+  private static readonly CATEGORIES: Record<string, {icon: string; tone: string}> = {
+    feedback: {icon: 'chat_bubble', tone: 'feedback'},
+    task: {icon: 'assignment', tone: 'task'},
+    portfolio: {icon: 'collections_bookmark', tone: 'portfolio'},
+    extension: {icon: 'more_time', tone: 'extension'},
+    general: {icon: 'campaign', tone: 'general'},
+  };
+
+  private static readonly UNKNOWN_CATEGORY = {icon: 'notifications', tone: 'general'};
+
+  notifications: Notification[] = [];
+
+  /**
+   * The rows actually on screen.
+   *
+   * Held rather than worked out in the template. A getter that slices would
+   * build a new array on every change detection pass, and with a click handler
+   * on every row there are a lot of those.
+   */
+  visible: Notification[] = [];
+
+  loading = true;
+  loadFailed = false;
+
+  pageIndex = 0;
+  pageSize = 20;
+
+  private listSubscription: Subscription | null = null;
+  private readonly deletingNotificationIds: Set<number> = new Set();
+  markAllReadPending = false;
+
+  constructor(
+    private notificationService: NotificationService,
+    private authenticationService: AuthenticationService,
+    private confirmationModal: ConfirmationModalService,
+    private alerts: AlertService,
+    private router: Router,
+    private changeDetectorRef: ChangeDetectorRef,
+    private elementRef: ElementRef<HTMLElement>,
+    private notificationRoutes: NotificationRouteService,
+  ) {}
+
+  /**
+   * Whether the mark all read button has anything to do.
+   *
+   * Worked out from the rows this page is holding, and deliberately not from
+   * NotificationService.unreadCount$. That subject seeds at zero and only moves
+   * when somebody calls refreshUnreadCount(), and the only thing in the app that
+   * calls it on a schedule is the bell, which the header does not render below
+   * xs. Reading it here would hide this button on a phone, which is the one size
+   * where this page is the only way to the notifications at all.
+   *
+   * A getter rather than a field kept in step by hand. It has to answer after a
+   * mark all read, after a delete, after a row is opened and after a reload, and
+   * a boolean that four call sites have to remember to update is a boolean that
+   * will eventually be wrong. Nothing is allocated, so unlike the visible slice
+   * this is safe to recompute on every change detection pass.
+   */
+  get hasUnread(): boolean {
+    return this.notifications.some((notification) => !notification.isRead);
+  }
+
+  /**
+   * Wait for authentication before asking the api for anything.
+   *
+   * The route has no guard, so this component is built for whoever opens the
+   * url, signed in or not. An anonymous GET /notifications comes back 403, and
+   * HttpErrorInterceptor reads a 403 on an anonymous user as an expired
+   * session: it shows "Authentication timed out" and redirects to /timeout,
+   * instead of the sign in page somebody following a stale bookmark should get.
+   *
+   * afterAuthCall is what EditProfileComponent does for the same reason, and it
+   * waits rather than guessing, so a page opened while the session is still
+   * being restored still loads.
+   */
+  ngOnInit(): void {
+    this.authenticationService.afterAuthCall((signedIn) => {
+      if (!signedIn) {
+        this.router.navigateByUrl('/sign_in');
+        return;
+      }
+
+      this.load();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.listSubscription?.unsubscribe();
+  }
+
+  /**
+   * Read every notification, once.
+   *
+   * Also the retry. A failed load is the one state on this page with nothing
+   * useful on it, so the way out has to be on the page rather than a refresh of
+   * the browser.
+   */
+  load(): void {
+    this.loading = true;
+    this.loadFailed = false;
+
+    this.listSubscription?.unsubscribe();
+
+    this.listSubscription = this.notificationService.list().subscribe({
+      next: (notifications) => {
+        this.notifications = [...notifications].sort(
+          (a, b) => b.createdAt.getTime() - a.createdAt.getTime(),
+        );
+
+        // A retry after a run of deletes can leave the reader stranded on a
+        // page that no longer exists, staring at nothing.
+        this.pageIndex = Math.min(this.pageIndex, this.lastPageIndex());
+        this.loading = false;
+        this.updateVisible();
+      },
+      error: () => {
+        this.loading = false;
+        this.loadFailed = true;
+      },
+    });
+  }
+
+  onPage(event: PageEvent): void {
+    this.pageIndex = event.pageIndex;
+    this.pageSize = event.pageSize;
+    this.updateVisible();
+  }
+
+  /**
+   * Open one notification: mark it read, then go where it points.
+   *
+   * The same shape as the dropdown in the header. They are on separate branches
+   * so neither can call the other today, and once both have merged this belongs
+   * in one place.
+   */
+  open(notification: Notification): void {
+    if (!notification.isRead) {
+      // A read that went out before this click is out of date now, and
+      // NotificationService writes list responses into the shared entity cache,
+      // so one landing late would put readAt back to null.
+      this.cancelPendingList();
+
+      this.notificationService.markRead(notification).subscribe({
+        error: () => this.alerts.error('That notification could not be marked as read'),
+      });
+    }
+
+    if (notification.link) {
+      void this.notificationRoutes.navigate(notification.link);
+    }
+  }
+
+  /**
+   * Mark the lot as read.
+   *
+   * Every one of them and not only the page on screen. read_all is the endpoint
+   * and it takes no arguments, and a button labelled "mark all read" that left
+   * pages two onwards unread would be lying about what it did.
+   *
+   * No confirmation. Nothing is lost by it and every notification is still here
+   * to read afterwards, so a dialog would only be a step to click through.
+   * Delete is the one that asks.
+   *
+   * The rows redraw without anything here touching them. NotificationService
+   * writes readAt onto the entities in its cache, and the rows this page is
+   * holding came out of that same cache, so they are the same objects. Setting
+   * readAt again here would be a second copy of that arithmetic that could only
+   * ever come to disagree with it.
+   */
+  markAllRead(): void {
+    if (!this.hasUnread || this.markAllReadPending) {
+      return;
+    }
+
+    this.markAllReadPending = true;
+
+    // A list read raised before this is out of date now, and its response goes
+    // straight into the shared cache, so landing late would draw every row
+    // unread again.
+    this.cancelPendingList();
+
+    this.notificationService.markAllRead().subscribe({
+      next: () => {
+        this.markAllReadPending = false;
+        this.alerts.success('All notifications marked as read');
+      },
+      error: () => {
+        this.markAllReadPending = false;
+        this.alerts.error('Your notifications could not be marked as read');
+      },
+    });
+  }
+
+  /**
+   * Ask first, then delete.
+   *
+   * Delete is the only one of the five endpoints that destroys anything and
+   * there is no undo anywhere in this feature, so it gets the dialog the house
+   * already has rather than a new one.
+   *
+   * The empty cancel function is deliberate. ConfirmationModalService pops a
+   * green success snackbar reading "<title> action cancelled" when none is
+   * given, and telling somebody they successfully did not delete something is
+   * noise.
+   */
+  confirmDelete(notification: Notification): void {
+    if (this.isDeleting(notification)) {
+      return;
+    }
+
+    this.confirmationModal.show(
+      'Delete notification',
+      `Delete "${notification.message}"? This removes the notification permanently.`,
+      () => this.remove(notification),
+      () => undefined,
+      'Delete',
+    );
+  }
+
+  iconFor(notification: Notification): string {
+    return this.categoryFor(notification).icon;
+  }
+
+  toneFor(notification: Notification): string {
+    return this.categoryFor(notification).tone;
+  }
+
+  /**
+   * What a screen reader should read for a row.
+   *
+   * Unread is drawn as bold text, and that is a thing you have to be able to
+   * see. The message and the time are already in the button, so this only
+   * exists to put the state into words.
+   */
+  rowLabel(notification: Notification): string {
+    const state = notification.isRead ? 'Read' : 'Unread';
+
+    return `${state}. ${notification.message}. ${this.timeAgo(notification)}`;
+  }
+
+  /**
+   * What a screen reader should call a delete button.
+   *
+   * The message and not a bare "Delete notification". A page of twenty rows has
+   * twenty of these buttons, and identical labels leave somebody tabbing through
+   * them hearing the same three words over and over with nothing to tell them
+   * apart. The dropdown gets away with the generic wording because it shows five
+   * rows at most and the delete sits beside the row you just heard.
+   */
+  deleteLabel(notification: Notification): string {
+    return `Delete: ${notification.message}`;
+  }
+
+  isDeleting(notification: Notification): boolean {
+    return this.deletingNotificationIds.has(notification.id);
+  }
+
+  timeAgo(notification: Notification): string {
+    return moment(notification.createdAt).fromNow();
+  }
+
+  private categoryFor(notification: Notification): {icon: string; tone: string} {
+    return (
+      NotificationsPageComponent.CATEGORIES[notification.notificationType] ??
+      NotificationsPageComponent.UNKNOWN_CATEGORY
+    );
+  }
+
+  /**
+   * Retire a list request that is still in the air.
+   *
+   * Anything changed from this page is newer than a read that went out before
+   * it. NotificationService writes list responses into the shared cache, so one
+   * arriving late does not merely show stale rows, it undoes the change.
+   *
+   * loading is cleared with it. A reload that has been abandoned is not still
+   * loading, and leaving the flag set would sit a spinner over the list nobody
+   * is going to replace now.
+   */
+  private cancelPendingList(): void {
+    this.listSubscription?.unsubscribe();
+    this.listSubscription = null;
+    this.loading = false;
+  }
+
+  /**
+   * Delete it for real, once the dialog has been agreed to.
+   *
+   * The row is dropped from the held list on success rather than by reading the
+   * list again. A second GET for something already known would leave the row on
+   * screen for a round trip after the user asked for it to go.
+   *
+   * On failure the row stays exactly where it is. Removing it first and putting
+   * it back would read as the delete having worked and then being undone by
+   * something, which is a worse story than it not having worked.
+   */
+  private remove(notification: Notification): void {
+    if (this.isDeleting(notification)) {
+      return;
+    }
+
+    this.deletingNotificationIds.add(notification.id);
+    this.cancelPendingList();
+
+    const visibleIndex = this.visible.indexOf(notification);
+
+    this.notificationService.remove(notification).subscribe({
+      next: () => {
+        this.deletingNotificationIds.delete(notification.id);
+        this.notifications = this.notifications.filter((row) => row !== notification);
+
+        // Deleting the only row on the last page leaves the reader on a page
+        // that no longer exists, staring at nothing while the paginator insists
+        // there are three of them. Same clamp as a reload does.
+        this.pageIndex = Math.min(this.pageIndex, this.lastPageIndex());
+        this.updateVisible();
+        this.alerts.success('Notification deleted');
+        this.changeDetectorRef.detectChanges();
+        this.restoreFocusAfterDelete(visibleIndex);
+      },
+      error: () => {
+        this.deletingNotificationIds.delete(notification.id);
+        this.alerts.error('That notification could not be deleted');
+      },
+    });
+  }
+
+  private restoreFocusAfterDelete(previousIndex: number): void {
+    if (document.activeElement !== document.body) {
+      return;
+    }
+
+    const rows = Array.from(
+      this.elementRef.nativeElement.querySelectorAll<HTMLElement>('.notification-row'),
+    );
+    const nextIndex = Math.min(Math.max(previousIndex, 0), rows.length - 1);
+
+    rows[nextIndex]?.focus();
+  }
+
+  private updateVisible(): void {
+    const start = this.pageIndex * this.pageSize;
+    this.visible = this.notifications.slice(start, start + this.pageSize);
+  }
+
+  private lastPageIndex(): number {
+    return Math.max(0, Math.ceil(this.notifications.length / this.pageSize) - 1);
+  }
+}
diff --git a/src/app/common/obect-select/object-select.component.html b/src/app/common/obect-select/object-select.component.html
index a553ccd7cd..a94a68f337 100644
--- a/src/app/common/obect-select/object-select.component.html
+++ b/src/app/common/obect-select/object-select.component.html
@@ -1,21 +1,22 @@
 <mat-form-field appearance="outline">
   @if (label) {
-  <mat-label>{{ label }}</mat-label>
+    <mat-label>{{ label }}</mat-label>
   }
   <mat-select
-    [(value)]="target"
+    [compareWith]="compareFn"
     [placeholder]="placeholder"
+    [(value)]="target"
     (selectionChange)="selectionChange($event)"
-    [compareWith]="compareFn"
   >
     @if (placeholder) {
-    <mat-option [value]="null">
-      {{ placeholder }}
-    </mat-option>
-    } @for (element of source; track element) {
-    <mat-option [value]="element.value">
-      {{ element.text }}
-    </mat-option>
+      <mat-option [value]="null">
+        {{ placeholder }}
+      </mat-option>
+    }
+    @for (element of source; track element) {
+      <mat-option [value]="element.value">
+        {{ element.text }}
+      </mat-option>
     }
   </mat-select>
 </mat-form-field>
diff --git a/src/app/common/obect-select/object-select.component.ts b/src/app/common/obect-select/object-select.component.ts
index 278925d7a3..386429f338 100644
--- a/src/app/common/obect-select/object-select.component.ts
+++ b/src/app/common/obect-select/object-select.component.ts
@@ -1,5 +1,5 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { MatSelectChange } from '@angular/material/select';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+import {MatSelectChange} from '@angular/material/select';
 
 /**
  * Object select component used to overcome limitations with the angularjs version used.
@@ -9,14 +9,15 @@ import { MatSelectChange } from '@angular/material/select';
 @Component({
   selector: 'object-select',
   templateUrl: 'object-select.component.html',
-  // styleUrls: ['object-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class ObjectSelectComponent<T> {
-  @Input() source: { value: T; text: string }[];
+  @Input() source: {value: T; text: string}[];
   @Input() target: T;
   @Input() label: string;
   @Input() placeholder: string = null;
-  @Output() targetChange = new EventEmitter<T>();
+  @Output() targetChange: EventEmitter<T> = new EventEmitter();
 
   selectionChange($event: MatSelectChange) {
     this.target = $event.value;
diff --git a/src/app/common/page-container/page-container.component.html b/src/app/common/page-container/page-container.component.html
new file mode 100644
index 0000000000..0f16dbb224
--- /dev/null
+++ b/src/app/common/page-container/page-container.component.html
@@ -0,0 +1,3 @@
+<div class="mx-auto w-full px-4 sm:px-6 lg:px-8" [class.max-w-screen-xl]="!fullWidth">
+  <ng-content></ng-content>
+</div>
diff --git a/src/app/common/page-container/page-container.component.spec.html b/src/app/common/page-container/page-container.component.spec.html
new file mode 100644
index 0000000000..79b2eb2ba5
--- /dev/null
+++ b/src/app/common/page-container/page-container.component.spec.html
@@ -0,0 +1,3 @@
+<f-page-container [fullWidth]="fullWidth">
+  <span data-testid="projected-content">Projected content</span>
+</f-page-container>
diff --git a/src/app/common/page-container/page-container.component.spec.ts b/src/app/common/page-container/page-container.component.spec.ts
new file mode 100644
index 0000000000..58801448c6
--- /dev/null
+++ b/src/app/common/page-container/page-container.component.spec.ts
@@ -0,0 +1,51 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {PageContainerComponent} from './page-container.component';
+
+@Component({
+  templateUrl: './page-container.component.spec.html',
+  standalone: false,
+})
+class PageContainerTestHostComponent {
+  fullWidth = false;
+}
+
+describe('PageContainerComponent', () => {
+  let fixture: ComponentFixture<PageContainerTestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PageContainerComponent, PageContainerTestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageContainerTestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('renders a block-level constrained container with projected content', () => {
+    const host: HTMLElement = fixture.nativeElement.querySelector('f-page-container');
+    const container: HTMLElement = host.querySelector(':scope > div');
+
+    expect(host.classList.contains('block')).toBe(true);
+    expect(host.classList.contains('w-full')).toBe(true);
+    expect(new Set(container.classList)).toEqual(
+      new Set(['mx-auto', 'w-full', 'px-4', 'sm:px-6', 'lg:px-8', 'max-w-screen-xl']),
+    );
+    expect(container.querySelector('[data-testid="projected-content"]')?.textContent).toContain(
+      'Projected content',
+    );
+  });
+
+  it('removes the width constraint while retaining responsive padding', () => {
+    const pageContainerFixture = TestBed.createComponent(PageContainerComponent);
+    pageContainerFixture.componentRef.setInput('fullWidth', true);
+    pageContainerFixture.detectChanges();
+
+    const container: HTMLElement = pageContainerFixture.nativeElement.querySelector('div');
+
+    expect(new Set(container.classList)).toEqual(
+      new Set(['mx-auto', 'w-full', 'px-4', 'sm:px-6', 'lg:px-8']),
+    );
+  });
+});
diff --git a/src/app/common/page-container/page-container.component.ts b/src/app/common/page-container/page-container.component.ts
new file mode 100644
index 0000000000..463eb57634
--- /dev/null
+++ b/src/app/common/page-container/page-container.component.ts
@@ -0,0 +1,11 @@
+import {Component, Input, booleanAttribute} from '@angular/core';
+
+@Component({
+  selector: 'f-page-container',
+  templateUrl: './page-container.component.html',
+  host: {class: 'block w-full'},
+  standalone: false,
+})
+export class PageContainerComponent {
+  @Input({transform: booleanAttribute}) fullWidth = false;
+}
diff --git a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.html b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.html
index ef5d4765ef..9a6e4548f5 100644
--- a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.html
+++ b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.html
@@ -5,19 +5,27 @@
   </div>
   <!--/panel-body-->
   @if (!hideFooter) {
-  <div class="pdf-viewer-footer">
-    <div class="pull-left text-muted" [hidden]="!footerText"><strong>Note:</strong> {{ footerText }}</div>
-    <div class="pull-right btn-group">
-      @if (resourcesUrl) {
-      <a (click)="downloadResources()" class="btn btn-primary">
-        <i class="fa fa-download"></i><span> Resources</span>
-      </a>
-      }
-      <button (click)="downloadPdf()" class="btn btn-success">
-        <i class="fa fa-download"></i><span [hidden]="!resourcesUrl"> PDF</span>
-      </button>
+    <div class="pdf-viewer-footer">
+      <div class="pull-left text-muted" [hidden]="!footerText">
+        <strong>Note:</strong> {{ footerText }}
+      </div>
+      <div class="pull-right btn-group">
+        @if (resourcesUrl) {
+          <button class="btn btn-primary" type="button" (click)="downloadResources()">
+            <mat-icon aria-hidden="true" inline>download</mat-icon><span> Resources</span>
+          </button>
+        }
+        <button
+          aria-label="Download submission PDF"
+          class="btn btn-success"
+          type="button"
+          (click)="downloadPdf()"
+        >
+          <mat-icon aria-hidden="true" inline>download</mat-icon
+          ><span [hidden]="!resourcesUrl"> PDF</span>
+        </button>
+      </div>
     </div>
-  </div>
   }
   <!--/panel-footer-->
 </div>
diff --git a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.scss b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.scss
index 96d34e7765..1a00bb118f 100644
--- a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.scss
+++ b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/common/doubtfire-panel.scss';
+@use 'styles/common/doubtfire-panel' as *;
 
 .pdf-viewer-panel {
   .pdf-viewer-body {
diff --git a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.spec.ts b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.spec.ts
index d9b08196f1..0ffc3b5425 100644
--- a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.spec.ts
+++ b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.spec.ts
@@ -1,31 +1,66 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HttpClientModule } from '@angular/common/http';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+import {PdfViewerPanelComponent} from './pdf-viewer-panel.component';
 
-import { FileDownloaderService } from '../file-downloader/file-downloader.service';
-import { PdfViewerPanelComponent } from './pdf-viewer-panel.component';
+const emptyProvider = {};
 
 describe('PdfViewerPanelComponent', () => {
   let component: PdfViewerPanelComponent;
   let fixture: ComponentFixture<PdfViewerPanelComponent>;
-  let fileDownloaderServiceStub: Partial<FileDownloaderService>;
-
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [PdfViewerPanelComponent],
-        imports: [HttpClientModule],
-        providers: [{ provide: FileDownloaderService, useValue: fileDownloaderServiceStub }],
-      }).compileComponents();
-    })
-  );
-
-  beforeEach(() => {
+
+  beforeEach(async () => {
+    // The real template is rendered here on purpose. The accessibility fix
+    // (A11Y-KB05) lives in the footer markup, so the tests need the actual DOM
+    // rather than a blank template.
+    await TestBed.configureTestingModule({
+      declarations: [PdfViewerPanelComponent],
+      providers: [{provide: FileDownloaderService, useValue: emptyProvider}],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(PdfViewerPanelComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
+  const footer = (): HTMLElement => fixture.nativeElement as HTMLElement;
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('renders the resources control as a real button so keyboard users can reach it', () => {
+    component.resourcesUrl = 'https://example.test/resources.zip';
+    fixture.detectChanges();
+
+    // Before the fix this control was an anchor with no href, which is not
+    // focusable and carries no link role, so the keyboard tab order skipped it.
+    expect(footer().querySelector('a.btn-primary')).toBeNull();
+
+    const resourcesButton = footer().querySelector('button.btn-primary');
+    expect(resourcesButton).not.toBeNull();
+    expect(resourcesButton!.getAttribute('type')).toBe('button');
+  });
+
+  it('keeps a name on the PDF button when the visible label is hidden', () => {
+    // With no resources the " PDF" text is inside a hidden span, so the button
+    // needs an aria-label to keep an accessible name instead of announcing only
+    // "button".
+    component.resourcesUrl = undefined;
+    fixture.detectChanges();
+
+    const pdfButton = footer().querySelector('button.btn-success');
+    expect(pdfButton).not.toBeNull();
+    expect(pdfButton!.getAttribute('aria-label')).toBe('Download submission PDF');
+  });
+
+  it('hides both download icons from assistive technology', () => {
+    component.resourcesUrl = 'https://example.test/resources.zip';
+    fixture.detectChanges();
+
+    const icons = footer().querySelectorAll('mat-icon');
+    expect(icons.length).toBe(2);
+    icons.forEach((icon) => expect(icon.getAttribute('aria-hidden')).toBe('true'));
+  });
 });
diff --git a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.ts b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.ts
index 1d5a948ef4..5fa911c55a 100644
--- a/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.ts
+++ b/src/app/common/pdf-viewer-panel/pdf-viewer-panel.component.ts
@@ -1,22 +1,22 @@
-import { Component, OnInit, Input, Inject } from '@angular/core';
-import { FileDownloaderService } from '../file-downloader/file-downloader.service';
+import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
 
 @Component({
   selector: 'pdf-viewer-panel',
   templateUrl: './pdf-viewer-panel.component.html',
   styleUrls: ['./pdf-viewer-panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class PdfViewerPanelComponent implements OnInit {
+export class PdfViewerPanelComponent {
   @Input() pdfUrl: string;
   @Input() footerText: string;
   @Input() resourcesUrl: string;
   @Input() hideFooter: boolean;
   constructor(@Inject(FileDownloaderService) private fileDownloader: FileDownloaderService) {}
 
-  ngOnInit(): void {}
-
   downloadPdf() {
-    this.fileDownloader.downloadFile(this.pdfUrl + "?as_attachment=true", 'displayed-pdf.pdf');
+    this.fileDownloader.downloadFile(this.pdfUrl + '?as_attachment=true', 'displayed-pdf.pdf');
   }
 
   downloadResources() {
diff --git a/src/app/common/pdf-viewer/pdf-viewer.component.html b/src/app/common/pdf-viewer/pdf-viewer.component.html
index 232c89d5ed..c279de74ed 100644
--- a/src/app/common/pdf-viewer/pdf-viewer.component.html
+++ b/src/app/common/pdf-viewer/pdf-viewer.component.html
@@ -1,27 +1,67 @@
 <div id="pdfContainer">
-  <div id="pdfActions" [hidden]="!loaded">
-    <form #loginForm="ngForm">
-      <mat-form-field floatLabel="never" appearance="outline" class="pdf-form-field" ngSubmit>
-        <mat-icon matPrefix>search</mat-icon>
-        <input matInput type="text" placeholder="Search PDF" [(ngModel)]="pdfSearchString" (ngModelChange)="searchPdf(pdfSearchString)" name="pdfSearchString" />
+  <div id="actionBar">
+    <div id="pdfViewActions" [hidden]="!pdfBlobUrl">
+      <button aria-label="Switch viewer" mat-icon-button (click)="toggleNativePdfViewer()">
+        @if (useNativePdfViewer) {
+          <mat-icon>toggle_on</mat-icon>
+        } @else {
+          <mat-icon>toggle_off</mat-icon>
+        }
+      </button>
+      <button aria-label="Download pdf" mat-icon-button (click)="downloadPdf()">
+        <mat-icon>download</mat-icon>
+      </button>
+    </div>
+    <div id="pdfActions" [hidden]="!loaded || useNativePdfViewer">
+      <form #loginForm="ngForm">
+        <mat-form-field appearance="outline" class="pdf-form-field" floatLabel="auto" ngSubmit>
+          <mat-label>Search PDF</mat-label>
+          <mat-icon matPrefix>search</mat-icon>
+          <input
+            matInput
+            name="pdfSearchString"
+            placeholder="Search PDF"
+            type="text"
+            [(ngModel)]="pdfSearchString"
+            (ngModelChange)="searchPdf(pdfSearchString)"
+          />
 
-        <button matSuffix mat-icon-button type="button" (click)="zoomOut()" aria-label="Zoom in PDF button">
-          <mat-icon>zoom_out</mat-icon>
-        </button>
-        <button matSuffix mat-icon-button type="button" (click)="zoomIn()" aria-label="Zoom in PDF button">
-          <mat-icon>zoom_in</mat-icon>
-        </button>
-      </mat-form-field>
-    </form>
+          <button aria-label="Zoom out" mat-icon-button matSuffix type="button" (click)="zoomOut()">
+            <mat-icon>zoom_out</mat-icon>
+          </button>
+          <button aria-label="Zoom in" mat-icon-button matSuffix type="button" (click)="zoomIn()">
+            <mat-icon>zoom_in</mat-icon>
+          </button>
+        </mat-form-field>
+      </form>
+    </div>
   </div>
+
   @if (pdfBlobUrl) {
-  <pdf-viewer
-    [zoom]="zoomValue"
-    [src]="pdfBlobUrl"
-    [render-text]="true"
-    [original-size]="false"
-    (after-load-complete)="onLoaded()"
-    (page-rendered)="loaded = true"
-  ></pdf-viewer>
+    @if (useNativePdfViewer) {
+      @if (pdfBlobUrl) {
+        <object title="Submission PDF" type="application/pdf" [data]="pdfBlobUrl | safe">
+          PDF Preview
+        </object>
+      }
+    } @else {
+      <pdf-viewer
+        [original-size]="false"
+        [render-text]="true"
+        [show-all]="true"
+        [src]="pdfBlobUrl"
+        [zoom]="zoomValue"
+        [(page)]="pageNumber"
+        (after-load-complete)="onLoaded($event)"
+        (text-layer-rendered)="onTextLayerRendered()"
+      ></pdf-viewer>
+    }
+  } @else {
+    <mat-spinner
+      aria-label="Loading PDF"
+      color="accent"
+      diameter="100"
+      strokeWidth="2"
+    ></mat-spinner>
   }
 </div>
diff --git a/src/app/common/pdf-viewer/pdf-viewer.component.scss b/src/app/common/pdf-viewer/pdf-viewer.component.scss
index 6942d03e8b..b5787040ba 100644
--- a/src/app/common/pdf-viewer/pdf-viewer.component.scss
+++ b/src/app/common/pdf-viewer/pdf-viewer.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/mixins/scrollable.scss';
+@use 'styles/mixins/scrollable' as *;
 
 #pdfContainer {
   flex-direction: column;
@@ -12,6 +12,30 @@
   align-items: center;
 }
 
+#actionBar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+object {
+  height: 100%;
+  min-width: 100%;
+  width: 100%;
+}
+
+#pdfViewActions {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  margin-right: auto;
+
+  button {
+    margin-bottom: 28px;
+  }
+}
+
 #pdfActions {
   padding-top: 1rem;
   padding-right: 1rem;
diff --git a/src/app/common/pdf-viewer/pdf-viewer.component.spec.ts b/src/app/common/pdf-viewer/pdf-viewer.component.spec.ts
new file mode 100644
index 0000000000..e649491e2d
--- /dev/null
+++ b/src/app/common/pdf-viewer/pdf-viewer.component.spec.ts
@@ -0,0 +1,65 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {SafePipe} from '../pipes/safe.pipe';
+import {fPdfViewerComponent} from './pdf-viewer.component';
+
+vi.mock('ng2-pdf-viewer', () => ({
+  PdfViewerComponent: class {},
+  PDFDocumentProxy: class {},
+}));
+
+describe('fPdfViewerComponent', () => {
+  let component: fPdfViewerComponent;
+  let fixture: ComponentFixture<fPdfViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [fPdfViewerComponent, SafePipe],
+      imports: [FormsModule],
+      providers: [
+        {provide: FileDownloaderService, useValue: {releaseBlob: () => {}}},
+        {provide: AlertService, useValue: {error: () => {}}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(fPdfViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('labels the two zoom buttons with different accessible names instead of both announcing "Zoom in PDF button"', () => {
+    const buttons = fixture.nativeElement.querySelectorAll('#pdfActions button');
+    expect(buttons.length).toBe(2);
+
+    const zoomOutButton = buttons[0] as HTMLButtonElement;
+    const zoomInButton = buttons[1] as HTMLButtonElement;
+
+    expect(zoomOutButton.getAttribute('aria-label')).toBe('Zoom out');
+    expect(zoomInButton.getAttribute('aria-label')).toBe('Zoom in');
+    expect(zoomOutButton.getAttribute('aria-label')).not.toBe(
+      zoomInButton.getAttribute('aria-label'),
+    );
+  });
+
+  it('gives the search field a mat-label and the loading spinner an accessible name, instead of leaving them unnamed', () => {
+    const matLabel = fixture.nativeElement.querySelector('mat-form-field mat-label');
+    expect(matLabel?.textContent?.trim()).toBe('Search PDF');
+
+    const spinner = fixture.nativeElement.querySelector('mat-spinner');
+    expect(spinner.getAttribute('aria-label')).toBe('Loading PDF');
+  });
+
+  it('titles the embedded PDF object so the native viewer is not an untitled embed', () => {
+    component.pdfBlobUrl = 'blob:http://localhost/fake-pdf';
+    component.useNativePdfViewer = true;
+    fixture.detectChanges();
+
+    const object = fixture.nativeElement.querySelector('object');
+    expect(object.getAttribute('title')).toBe('Submission PDF');
+  });
+});
diff --git a/src/app/common/pdf-viewer/pdf-viewer.component.ts b/src/app/common/pdf-viewer/pdf-viewer.component.ts
index 23d5029b2f..a8a2de519f 100644
--- a/src/app/common/pdf-viewer/pdf-viewer.component.ts
+++ b/src/app/common/pdf-viewer/pdf-viewer.component.ts
@@ -1,14 +1,16 @@
+import {PDFDocumentProxy, PdfViewerComponent} from 'ng2-pdf-viewer';
 import {HttpResponse} from '@angular/common/http';
 import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
-  Input,
   Inject,
+  Input,
+  OnChanges,
   OnDestroy,
   SimpleChanges,
-  OnChanges,
   ViewChild,
 } from '@angular/core';
-import {PdfViewerComponent} from 'ng2-pdf-viewer';
 import {FileDownloaderService} from '../file-downloader/file-downloader.service';
 import {AlertService} from '../services/alert.service';
 
@@ -16,11 +18,24 @@ import {AlertService} from '../services/alert.service';
   selector: 'f-pdf-viewer',
   templateUrl: './pdf-viewer.component.html',
   styleUrls: ['./pdf-viewer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class fPdfViewerComponent implements OnDestroy, OnChanges {
+export class fPdfViewerComponent implements OnDestroy, OnChanges, AfterViewInit {
+  private readonly ZOOM_MIN = 0.5;
+  private readonly ZOOM_MAX = 2.5;
+
   private _pdfUrl: string;
   public pdfBlobUrl: string;
+  public useNativePdfViewer = false;
+  public pdfTotalPages?: number | undefined;
+  public pdfHasRendered: boolean = false;
+
   @Input() pdfUrl: string;
+  @Input() startPage: number = 1;
+
+  public pageNumber: number = 1;
+
   @ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;
   pdfSearchString: string;
   zoomValue = 1;
@@ -38,6 +53,13 @@ export class fPdfViewerComponent implements OnDestroy, OnChanges {
     }
   }
 
+  ngAfterViewInit(): void {
+    this.useNativePdfViewer = localStorage.getItem('useNativePdfViewer') === 'true';
+    const storedZoomValue = parseFloat(localStorage.getItem('pdfViewerZoom')) || 1;
+    // Clamp zoom value between ZOOM_MIN and ZOOM_MAX
+    this.zoomValue = Math.min(Math.max(storedZoomValue, this.ZOOM_MIN), this.ZOOM_MAX);
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     this.pdfUrlChanges(changes.pdfUrl.currentValue);
   }
@@ -53,7 +75,12 @@ export class fPdfViewerComponent implements OnDestroy, OnChanges {
       // Get the new blob
       this._pdfUrl = value;
       this.loaded = false;
-      this.downloadBlob(value);
+      this.pdfHasRendered = false;
+      if (value?.startsWith('blob:')) {
+        this.pdfBlobUrl = value;
+      } else {
+        this.downloadBlob(value);
+      }
     }
   }
 
@@ -68,31 +95,68 @@ export class fPdfViewerComponent implements OnDestroy, OnChanges {
     });
   }
 
-  zoomIn() {
-    if (this.zoomValue < 2.5) {
+  scrollToPage(pageNumber: number) {
+    if (pageNumber <= this.pdfComponent.pdfViewer.pagesCount) {
+      this.pdfComponent.pdfViewer.scrollPageIntoView({
+        pageNumber,
+      });
+    }
+  }
+
+  public zoomIn() {
+    if (this.zoomValue < this.ZOOM_MAX) {
       this.zoomValue += 0.1;
+      localStorage.setItem('pdfViewerZoom', this.zoomValue.toString());
     }
   }
-  zoomOut() {
-    if (this.zoomValue > 0.5) {
+  public zoomOut() {
+    if (this.zoomValue > this.ZOOM_MIN) {
       this.zoomValue -= 0.1;
+      localStorage.setItem('pdfViewerZoom', this.zoomValue.toString());
     }
   }
 
+  public downloadPdf() {
+    this.fileDownloader.downloadBlobToFile(this.pdfBlobUrl, 'displayed-pdf.pdf');
+  }
+
+  public toggleNativePdfViewer() {
+    this.useNativePdfViewer = !this.useNativePdfViewer;
+    localStorage.setItem('useNativePdfViewer', this.useNativePdfViewer.toString());
+  }
+
   private downloadBlob(downloadUrl: string): void {
     this.fileDownloader.downloadBlob(
       downloadUrl,
-      (url: string, response: HttpResponse<Blob>) => {
+      (url: string, _response: HttpResponse<Blob>) => {
         this.pdfBlobUrl = url;
       },
-      (error: any) => {
+      (error: unknown) => {
         this.alerts.error(`Error downloading PDF. ${error}`, 6000);
       },
     );
   }
 
-  onLoaded() {
+  onLoaded(event: PDFDocumentProxy) {
     this.loaded = true;
     window.dispatchEvent(new Event('resize'));
+    this.pdfTotalPages = event.numPages;
+  }
+
+  onTextLayerRendered() {
+    if (this.pdfHasRendered) {
+      return;
+    }
+    this.pdfHasRendered = true;
+    setTimeout(() => {
+      if (
+        this.startPage &&
+        this.startPage > 1 &&
+        this.pdfTotalPages &&
+        this.startPage <= this.pdfTotalPages
+      ) {
+        this.pageNumber = Number(this.startPage);
+      }
+    });
   }
 }
diff --git a/src/app/common/pipes/humanized-date.pipe.spec.ts b/src/app/common/pipes/humanized-date.pipe.spec.ts
index 0698daa95c..62839a0c26 100644
--- a/src/app/common/pipes/humanized-date.pipe.spec.ts
+++ b/src/app/common/pipes/humanized-date.pipe.spec.ts
@@ -1,4 +1,5 @@
-import { HumanizedDatePipe } from './humanized-date.pipe';
+import {describe, expect, it} from 'vitest';
+import {HumanizedDatePipe} from './humanized-date.pipe';
 
 describe('HumanizedDatePipe', () => {
   it('create an instance', () => {
diff --git a/src/app/common/pipes/humanized-date.pipe.ts b/src/app/common/pipes/humanized-date.pipe.ts
index fcffa6ae65..7341035833 100644
--- a/src/app/common/pipes/humanized-date.pipe.ts
+++ b/src/app/common/pipes/humanized-date.pipe.ts
@@ -1,13 +1,14 @@
-import { Pipe, PipeTransform } from '@angular/core';
 import moment from 'moment';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'humanizedDate',
+  standalone: false,
 })
 export class HumanizedDatePipe implements PipeTransform {
-  transform(value: unknown, ...args: unknown[]): unknown {
+  transform(value: unknown, ..._args: unknown[]): string {
     if (value == null) {
-      return;
+      return '';
     }
     return moment(value).calendar(null, {
       sameDay: '',
diff --git a/src/app/common/pipes/is-active-unit-role.pipe.ts b/src/app/common/pipes/is-active-unit-role.pipe.ts
index d6675aac9d..e78f149260 100644
--- a/src/app/common/pipes/is-active-unit-role.pipe.ts
+++ b/src/app/common/pipes/is-active-unit-role.pipe.ts
@@ -1,11 +1,12 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { UnitRole } from 'src/app/api/models/unit-role';
+import {Pipe, PipeTransform} from '@angular/core';
+import {UnitRole} from 'src/app/api/models/unit-role';
 
 @Pipe({
   name: 'isActiveUnitRole',
+  standalone: false,
 })
 export class IsActiveUnitRole implements PipeTransform {
-  transform(array: UnitRole[], ...args: any[]): UnitRole[] {
+  transform(array: UnitRole[]): UnitRole[] {
     if (array == null) {
       return;
     }
diff --git a/src/app/common/pipes/localized-date.pipe.ts b/src/app/common/pipes/localized-date.pipe.ts
new file mode 100644
index 0000000000..1cec7ca02a
--- /dev/null
+++ b/src/app/common/pipes/localized-date.pipe.ts
@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'localizedDateTime',
+  standalone: false,
+})
+export class LocalizedDatePipe implements PipeTransform {
+  transform(value: string | Date): string {
+    return new Date(value).toLocaleString();
+  }
+}
diff --git a/src/app/common/pipes/marked.pipe.spec.ts b/src/app/common/pipes/marked.pipe.spec.ts
index 4173514ebc..0092cdb163 100644
--- a/src/app/common/pipes/marked.pipe.spec.ts
+++ b/src/app/common/pipes/marked.pipe.spec.ts
@@ -1,8 +1,28 @@
-import { MarkedPipe } from './marked.pipe';
+import {describe, expect, it} from 'vitest';
+import {MarkedPipe} from './marked.pipe';
 
 describe('MarkedPipe', () => {
   it('create an instance', () => {
     const pipe = new MarkedPipe();
     expect(pipe).toBeTruthy();
   });
+
+  it('renders a fenced code block as <pre>', () => {
+    const pipe = new MarkedPipe();
+    const html = pipe.transform('```\ncode\n```');
+    expect(html).toContain('<pre>');
+  });
+
+  it('renders a markdown list as a <ul> with two items', () => {
+    const pipe = new MarkedPipe();
+    const html = pipe.transform('- a\n- b');
+    expect(html).toContain('<ul>');
+    expect((html.match(/<li>/g) || []).length).toBe(2);
+  });
+
+  it('still turns a soft line break into a single <br>', () => {
+    const pipe = new MarkedPipe();
+    const html = pipe.transform('line1\nline2');
+    expect((html.match(/<br\s*\/?>/g) || []).length).toBe(1);
+  });
 });
diff --git a/src/app/common/pipes/marked.pipe.ts b/src/app/common/pipes/marked.pipe.ts
index 1f19fa6b26..571609fab5 100644
--- a/src/app/common/pipes/marked.pipe.ts
+++ b/src/app/common/pipes/marked.pipe.ts
@@ -1,8 +1,9 @@
-import {Pipe, PipeTransform} from '@angular/core';
 import * as marked from 'marked';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'marked',
+  standalone: false,
 })
 export class MarkedPipe implements PipeTransform {
   // Set the options for the markdown renderer
@@ -15,9 +16,9 @@ export class MarkedPipe implements PipeTransform {
     });
   }
 
-  transform(value: string, ...args: any[]): string {
+  transform(value: string): string {
     if (value && value.length > 0) {
-      return <string>marked.parse(value.replaceAll(/\r\n|\r|\n/g, '<br />'), {async: false});
+      return marked.parse(value, {async: false}) as string;
     }
     return value;
   }
diff --git a/src/app/common/pipes/safe.pipe.spec.ts b/src/app/common/pipes/safe.pipe.spec.ts
index 283c5ece0b..fe9e9153ec 100644
--- a/src/app/common/pipes/safe.pipe.spec.ts
+++ b/src/app/common/pipes/safe.pipe.spec.ts
@@ -1,7 +1,22 @@
-import { Sanitizer } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { SafePipe } from './safe.pipe';
+import {describe, expect, it, vi} from 'vitest';
+import {DomSanitizer} from '@angular/platform-browser';
+import {SafePipe} from './safe.pipe';
 
 describe('SafePipe', () => {
-  it('create an instance', () => {});
+  it('hands a blob url to the sanitizer bypass', () => {
+    const bypass = vi.fn().mockReturnValue('trusted-blob');
+    const pipe = new SafePipe({bypassSecurityTrustResourceUrl: bypass} as unknown as DomSanitizer);
+    const blobUrl = 'blob:https://doubtfire.deakin.edu.au/8f14e45f-ceea-4d9e-9915-99b1c4e2f2d1';
+
+    expect(pipe.transform(blobUrl)).toBe('trusted-blob');
+    expect(bypass).toHaveBeenCalledWith(blobUrl);
+  });
+
+  it('hands a regular url to the sanitizer bypass', () => {
+    const bypass = vi.fn().mockReturnValue('trusted');
+    const pipe = new SafePipe({bypassSecurityTrustResourceUrl: bypass} as unknown as DomSanitizer);
+
+    expect(pipe.transform('https://example.test/doc.pdf')).toBe('trusted');
+    expect(bypass).toHaveBeenCalledWith('https://example.test/doc.pdf');
+  });
 });
diff --git a/src/app/common/pipes/safe.pipe.ts b/src/app/common/pipes/safe.pipe.ts
index 41044b40a5..27fd6a6c11 100644
--- a/src/app/common/pipes/safe.pipe.ts
+++ b/src/app/common/pipes/safe.pipe.ts
@@ -1,7 +1,10 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import {Pipe, PipeTransform} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
 
-@Pipe({ name: 'safe' })
+@Pipe({
+  name: 'safe',
+  standalone: false,
+})
 export class SafePipe implements PipeTransform {
   constructor(private sanitizer: DomSanitizer) {}
   transform(url: string) {
diff --git a/src/app/common/project-card/project-card.component.html b/src/app/common/project-card/project-card.component.html
new file mode 100644
index 0000000000..5300e34f54
--- /dev/null
+++ b/src/app/common/project-card/project-card.component.html
@@ -0,0 +1,34 @@
+@if (project) {
+  <article class="project-card">
+    <div class="project-card__header">
+      <div>
+        @if (project.unitCode) {
+          <p class="project-card__unit">{{ project.unitCode }}</p>
+        }
+        <h3 class="project-card__title">{{ project.title }}</h3>
+      </div>
+
+      <span class="project-card__status">
+        <span class="project-card__status-label">Project status: </span>{{ project.status }}
+      </span>
+    </div>
+
+    <p class="project-card__summary">
+      {{ project.progressSummary }}
+    </p>
+
+    @if (project.description) {
+      <p class="project-card__description">
+        {{ project.description }}
+      </p>
+    }
+
+    <a
+      class="project-card__link"
+      [attr.aria-label]="'Open ' + project.title + ' project details'"
+      [href]="project.destinationUrl"
+    >
+      Open project
+    </a>
+  </article>
+}
diff --git a/src/app/common/project-card/project-card.component.scss b/src/app/common/project-card/project-card.component.scss
new file mode 100644
index 0000000000..e90278716d
--- /dev/null
+++ b/src/app/common/project-card/project-card.component.scss
@@ -0,0 +1,77 @@
+.project-card {
+  border: 1px solid #d6d6d6;
+  border-radius: 12px;
+  padding: 1rem;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 420px;
+}
+
+.project-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.project-card__unit {
+  margin: 0 0 0.25rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #555555;
+}
+
+.project-card__title {
+  margin: 0;
+  font-size: 1.1rem;
+  line-height: 1.3;
+}
+
+.project-card__status {
+  border-radius: 999px;
+  padding: 0.25rem 0.6rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  background: #eeeeee;
+  white-space: nowrap;
+}
+
+.project-card__status-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.project-card__summary,
+.project-card__description {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.project-card__link {
+  align-self: flex-start;
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+@media (max-width: 520px) {
+  .project-card {
+    max-width: 100%;
+  }
+
+  .project-card__header {
+    flex-direction: column;
+  }
+
+  .project-card__status {
+    align-self: flex-start;
+  }
+}
diff --git a/src/app/common/project-card/project-card.component.spec.ts b/src/app/common/project-card/project-card.component.spec.ts
new file mode 100644
index 0000000000..5d8a798c81
--- /dev/null
+++ b/src/app/common/project-card/project-card.component.spec.ts
@@ -0,0 +1,74 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ProjectCardComponent, ProjectCardData} from './project-card.component';
+
+describe('ProjectCardComponent', () => {
+  let component: ProjectCardComponent;
+  let fixture: ComponentFixture<ProjectCardComponent>;
+
+  const sampleProject: ProjectCardData = {
+    title: 'Cross-Project Dashboard',
+    unitCode: 'CPD-F02',
+    status: 'In progress',
+    progressSummary: 'Reusable dashboard project-card component is being prepared.',
+    description: 'This card summarises one project without hardcoding the dashboard data.',
+    destinationUrl: '/projects/cpd-f02',
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ProjectCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectCardComponent);
+    component = fixture.componentInstance;
+    component.project = sampleProject;
+    fixture.detectChanges();
+  });
+
+  it('should create the project card component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the supplied project details', () => {
+    const text = fixture.nativeElement.textContent;
+
+    expect(text).toContain('Cross-Project Dashboard');
+    expect(text).toContain('CPD-F02');
+    expect(text).toContain('In progress');
+    expect(text).toContain('Reusable dashboard project-card component is being prepared.');
+  });
+
+  it('should provide an accessible project link', () => {
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toBe('/projects/cpd-f02');
+    expect(link.getAttribute('aria-label')).toBe('Open Cross-Project Dashboard project details');
+  });
+
+  it('should expose the project status to assistive technology', () => {
+    const status: HTMLSpanElement = fixture.nativeElement.querySelector('.project-card__status');
+
+    expect(status.textContent.replace(/\s+/g, ' ').trim()).toBe('Project status: In progress');
+  });
+
+  it('should handle missing optional fields', () => {
+    fixture.componentRef.setInput('project', {
+      title: 'Sample Project',
+      status: 'Completed',
+      progressSummary: 'Core details are still displayed.',
+      destinationUrl: '/projects/sample',
+    });
+
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent;
+
+    expect(text).toContain('Sample Project');
+    expect(text).toContain('Completed');
+    expect(text).toContain('Core details are still displayed.');
+
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+    expect(link.getAttribute('aria-label')).toBe('Open Sample Project project details');
+  });
+});
diff --git a/src/app/common/project-card/project-card.component.ts b/src/app/common/project-card/project-card.component.ts
new file mode 100644
index 0000000000..89e0704e66
--- /dev/null
+++ b/src/app/common/project-card/project-card.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+
+export interface ProjectCardData {
+  title: string;
+  status: string;
+  progressSummary: string;
+  destinationUrl: string;
+  unitCode?: string;
+  description?: string;
+}
+
+@Component({
+  selector: 'project-card',
+  standalone: false,
+  templateUrl: './project-card.component.html',
+  styleUrls: ['./project-card.component.scss'],
+})
+export class ProjectCardComponent {
+  @Input() project!: ProjectCardData;
+}
diff --git a/src/app/common/project-progress-bar/project-progress-bar.component.spec.ts b/src/app/common/project-progress-bar/project-progress-bar.component.spec.ts
index 648e4d54c0..0bd437cb91 100644
--- a/src/app/common/project-progress-bar/project-progress-bar.component.spec.ts
+++ b/src/app/common/project-progress-bar/project-progress-bar.component.spec.ts
@@ -1,6 +1,7 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProjectProgressBarComponent } from './project-progress-bar.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ProjectProgressBarComponent} from './project-progress-bar.component';
 
 describe('ProjectProgressBarComponent', () => {
   let component: ProjectProgressBarComponent;
@@ -8,13 +9,16 @@ describe('ProjectProgressBarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ProjectProgressBarComponent ]
+      declarations: [ProjectProgressBarComponent],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(ProjectProgressBarComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ProjectProgressBarComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/common/project-progress-bar/project-progress-bar.component.ts b/src/app/common/project-progress-bar/project-progress-bar.component.ts
index ff9b79ff73..d1935aa561 100644
--- a/src/app/common/project-progress-bar/project-progress-bar.component.ts
+++ b/src/app/common/project-progress-bar/project-progress-bar.component.ts
@@ -1,17 +1,16 @@
-import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
-import { Project } from 'src/app/api/models/project';
+import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 
 @Component({
   selector: 'f-project-progress-bar',
   templateUrl: './project-progress-bar.component.html',
   styleUrls: ['./project-progress-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class ProjectProgressBarComponent {
-  @Input() progress: any[];
+export class ProjectProgressBarComponent implements OnChanges {
+  @Input() progress: {value: number}[];
   public percentProgress: number = 0;
 
-  constructor() {}
-
   ngOnChanges(changes: SimpleChanges) {
     if (changes.progress) {
       if (changes.progress.currentValue) {
diff --git a/src/app/common/project-progress/project-progress-gauge.component.css b/src/app/common/project-progress/project-progress-gauge.component.css
new file mode 100644
index 0000000000..5d4e87f30f
--- /dev/null
+++ b/src/app/common/project-progress/project-progress-gauge.component.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/app/common/project-progress/project-progress-gauge.component.html b/src/app/common/project-progress/project-progress-gauge.component.html
new file mode 100644
index 0000000000..f6543fc09a
--- /dev/null
+++ b/src/app/common/project-progress/project-progress-gauge.component.html
@@ -0,0 +1,18 @@
+<ngx-charts-gauge
+  units="%"
+  [angleSpan]="359"
+  [bigSegments]="1"
+  [legend]="legend"
+  [legendPosition]="rightLegendPosition"
+  [max]="100"
+  [min]="0"
+  [results]="gaugeData"
+  [showAxis]="false"
+  [showText]="true"
+  [smallSegments]="0"
+  [startAngle]="1"
+  [textValue]="gaugeData[0].value.toString()"
+  [tooltipDisabled]="true"
+  [view]="view"
+>
+</ngx-charts-gauge>
diff --git a/src/app/common/project-progress/project-progress-gauge.component.ts b/src/app/common/project-progress/project-progress-gauge.component.ts
new file mode 100644
index 0000000000..40e3f9a2f0
--- /dev/null
+++ b/src/app/common/project-progress/project-progress-gauge.component.ts
@@ -0,0 +1,43 @@
+import {LegendPosition} from '@swimlane/ngx-charts';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Project} from 'src/app/api/models/project';
+
+@Component({
+  selector: 'f-project-progress-gauge',
+  templateUrl: './project-progress-gauge.component.html',
+  styleUrl: './project-progress-gauge.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectProgressGaugeComponent {
+  @Input() project: Project;
+
+  protected gaugeData = [
+    {
+      'name': 'Pass',
+      'value': 100,
+    },
+    {
+      'name': 'Credit',
+      'value': 79,
+    },
+    {
+      'name': 'Distinction',
+      'value': 40,
+    },
+    {
+      'name': 'HD',
+      'value': 19,
+    },
+  ];
+
+  smallView: [number, number] = [90, 90];
+  view: [number, number] = [500, 500];
+  legend: boolean = true;
+  legendPosition: LegendPosition = LegendPosition.Below;
+  rightLegendPosition: LegendPosition = LegendPosition.Right;
+
+  colorScheme = {
+    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5'],
+  };
+}
diff --git a/src/app/common/scorm-player/scorm-player.component.html b/src/app/common/scorm-player/scorm-player.component.html
new file mode 100644
index 0000000000..0214ecc7ab
--- /dev/null
+++ b/src/app/common/scorm-player/scorm-player.component.html
@@ -0,0 +1,3 @@
+@if (iframeSrc) {
+  <iframe data-sentry-block referrerpolicy="no-referrer" [src]="iframeSrc"></iframe>
+}
diff --git a/src/app/common/scorm-player/scorm-player.component.scss b/src/app/common/scorm-player/scorm-player.component.scss
new file mode 100644
index 0000000000..f011d35aee
--- /dev/null
+++ b/src/app/common/scorm-player/scorm-player.component.scss
@@ -0,0 +1,13 @@
+f-scorm-player {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+}
+
+iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/app/common/scorm-player/scorm-player.component.spec.ts b/src/app/common/scorm-player/scorm-player.component.spec.ts
new file mode 100644
index 0000000000..677d27327f
--- /dev/null
+++ b/src/app/common/scorm-player/scorm-player.component.spec.ts
@@ -0,0 +1,42 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {DomSanitizer} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
+import {AuthenticationService, UserService} from 'src/app/api/models/doubtfire-model';
+import {ScormAdapterService} from 'src/app/api/services/scorm-adapter.service';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {ScormPlayerComponent} from './scorm-player.component';
+
+const emptyProvider = {};
+
+describe('ScormPlayerComponent', () => {
+  let component: ScormPlayerComponent;
+  let fixture: ComponentFixture<ScormPlayerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ScormPlayerComponent],
+      providers: [
+        {provide: GlobalStateService, useValue: emptyProvider},
+        {provide: ScormAdapterService, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: AuthenticationService, useValue: emptyProvider},
+        {provide: DomSanitizer, useValue: emptyProvider},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(ScormPlayerComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScormPlayerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/common/scorm-player/scorm-player.component.ts b/src/app/common/scorm-player/scorm-player.component.ts
new file mode 100644
index 0000000000..2673912134
--- /dev/null
+++ b/src/app/common/scorm-player/scorm-player.component.ts
@@ -0,0 +1,123 @@
+import {ChangeDetectionStrategy, Component, HostListener, Input, OnInit} from '@angular/core';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
+import {
+  AuthenticationService,
+  ScormPlayerContext,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {ScormAdapterService} from 'src/app/api/services/scorm-adapter.service';
+import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+
+declare global {
+  interface Window {
+    API_1484_11: {
+      Initialize: () => void;
+      Terminate: () => void;
+      GetValue: (element: string) => string;
+      SetValue: (element: string, value: string) => void;
+      Commit: () => void;
+      GetLastError: () => string;
+      GetErrorString: (errorCode: string) => string;
+      GetDiagnostic: (errorCode: string) => string;
+    };
+  }
+}
+
+@Component({
+  selector: 'f-scorm-player',
+  templateUrl: './scorm-player.component.html',
+  styleUrls: ['./scorm-player.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ScormPlayerComponent implements OnInit {
+  context: ScormPlayerContext;
+
+  @Input()
+  projectId: number;
+
+  @Input()
+  taskDefId: number;
+
+  @Input()
+  mode: 'browse' | 'normal' | 'review' | 'preview';
+
+  @Input()
+  testAttemptId: number;
+
+  iframeSrc: SafeResourceUrl;
+
+  constructor(
+    private globalState: GlobalStateService,
+    private scormAdapter: ScormAdapterService,
+    private userService: UserService,
+    private authService: AuthenticationService,
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit(): void {
+    this.projectId = this.projectId ?? Number(this.route.snapshot.paramMap.get('projectId'));
+    this.taskDefId = this.taskDefId ?? Number(this.route.snapshot.paramMap.get('taskDefId'));
+    this.testAttemptId =
+      this.testAttemptId ?? Number(this.route.snapshot.paramMap.get('testAttemptId'));
+    this.mode = this.mode ?? (this.route.snapshot.data.mode as ScormPlayerComponent['mode']);
+
+    this.globalState.setView(ViewType.OTHER);
+    this.globalState.hideHeader();
+    this.authService.afterAuthCall((result) => {
+      if (!result) {
+        return;
+      }
+      this.authService.getScormToken().subscribe((value: string) => this.setupScorm(value));
+    });
+  }
+
+  private setupScorm(token: string): void {
+    this.scormAdapter.mode = this.mode;
+    if (this.mode === 'normal') {
+      this.scormAdapter.projectId = this.projectId;
+      this.scormAdapter.taskDefId = this.taskDefId;
+    } else if (this.mode === 'review') {
+      this.scormAdapter.testAttemptId = this.testAttemptId;
+    }
+
+    if (this.mode !== 'preview') {
+      window.API_1484_11 = {
+        Initialize: () => this.scormAdapter.Initialize(),
+        Terminate: () => this.scormAdapter.Terminate(),
+        GetValue: (element: string) => this.scormAdapter.GetValue(element),
+        SetValue: (element: string, value: string) => this.scormAdapter.SetValue(element, value),
+        Commit: () => this.scormAdapter.Commit(),
+        GetLastError: () => this.scormAdapter.GetLastError(),
+        GetErrorString: (errorCode: string) => this.scormAdapter.GetErrorString(errorCode),
+        GetDiagnostic: (errorCode: string) => this.scormAdapter.GetDiagnostic(errorCode),
+      };
+    } else {
+      window.API_1484_11 = undefined;
+    }
+
+    // Encode . as %2e to avoid issue with grape treating the username as a file extension
+    const username = this.userService.currentUser.username.replaceAll('.', '%2e');
+
+    this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(
+      `${AppInjector.get(DoubtfireConstants).API_URL}/scorm/${this.taskDefId}/${username}/${token}/index.html`,
+    );
+  }
+
+  @HostListener('window:beforeunload', ['$event'])
+  beforeUnload(_event: Event): void {
+    if (this.scormAdapter.state == 'Initialized') {
+      // console.log('SCORM player closing during an initialized session, commiting DataModel');
+      this.scormAdapter.Commit();
+    }
+  }
+
+  @HostListener('window:unload', ['$event'])
+  onUnload(_event: Event): void {
+    this.scormAdapter.destroy();
+  }
+}
diff --git a/src/app/common/services/alert-service.service.spec.ts b/src/app/common/services/alert-service.service.spec.ts
index e2a7a5e972..72cf8816c6 100644
--- a/src/app/common/services/alert-service.service.spec.ts
+++ b/src/app/common/services/alert-service.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
-
-import { AlertService } from './alert.service';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {AlertService} from './alert.service';
 
 describe('AlertServiceService', () => {
   let service: AlertService;
diff --git a/src/app/common/services/alert.component.html b/src/app/common/services/alert.component.html
new file mode 100644
index 0000000000..e565e82c95
--- /dev/null
+++ b/src/app/common/services/alert.component.html
@@ -0,0 +1,10 @@
+<span class="center-items flex items-center space-x-2.5">
+  <span class="flex">
+    <mat-icon>{{ data?.icon }}</mat-icon>
+  </span>
+  <span class="flex-grow">{{ data?.message }}</span>
+
+  <span class="ml-auto" matSnackBarActions>
+    <button mat-button matSnackBarAction (click)="snackBarRef.dismissWithAction()">Close</button>
+  </span>
+</span>
diff --git a/src/app/common/services/alert.service.ts b/src/app/common/services/alert.service.ts
index bd14ae14b3..bf27c6f386 100644
--- a/src/app/common/services/alert.service.ts
+++ b/src/app/common/services/alert.service.ts
@@ -1,8 +1,12 @@
-import {Component, Inject, Injectable, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject, Injectable, inject} from '@angular/core';
 import {MAT_SNACK_BAR_DATA, MatSnackBar, MatSnackBarRef} from '@angular/material/snack-bar';
-
 import {ConfettiService} from './confetti.service';
 
+interface AlertData {
+  message: string;
+  icon: string;
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -44,18 +48,11 @@ export class AlertService {
 
 @Component({
   selector: 'f-alert',
-  template: `<span class="flex space-x-4 items-center center-items">
-    <span class="flex">
-      <mat-icon>{{ data?.icon }}</mat-icon>
-    </span>
-    <span class="flex-grow">{{ data?.message }}</span>
-
-    <span matSnackBarActions class="ml-auto">
-      <button mat-button matSnackBarAction (click)="snackBarRef.dismissWithAction()">Close</button>
-    </span></span
-  >`,
+  templateUrl: './alert.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class AlertComponent {
   snackBarRef = inject(MatSnackBarRef);
-  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {}
+  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: AlertData) {}
 }
diff --git a/src/app/common/services/analytics-service.coffee b/src/app/common/services/analytics-service.coffee
deleted file mode 100644
index 971fc0f37a..0000000000
--- a/src/app/common/services/analytics-service.coffee
+++ /dev/null
@@ -1,42 +0,0 @@
-angular.module("doubtfire.common.services.analytics", [])
-#
-# Services for analytics
-#
-.factory("analyticsService", ($analytics, newUserService) ->
-  analyticsService = {}
-
-  #
-  # Logs a new event with the specified category and event name
-  #
-  # For consistency, use like this:
-  #   category: 'Visualisations' (Pluralised)
-  #   eventName: 'Refreshed All' (Past-Tense)
-  #
-  # Label is optional and should be a string
-  # Value is optional and must be a positive numerical value
-  #
-  analyticsService.event = (category, eventName, label, value) ->
-    # Critical! Don't log unless user has opted in
-    # Do not remove this as we'd be breaching the law!
-    return unless newUserService.currentUser.optInToResearch
-
-    if value? and typeof value isnt 'number' and value < 0
-      throw new Error "Value needs to be a positive number"
-    $analytics.eventTrack eventName, {
-      category: category
-      label: label
-      value: value
-    }
-
-  analyticsService.watchEvent = ( scope, toWatch, category, label) ->
-    scope.$watch toWatch, (newVal, oldVal) ->
-      if newVal? && newVal != oldVal
-        if _.isFunction label
-          analyticsService.event category, "Changed #{toWatch}", label(newVal)
-        else if _.isInteger newVal
-          analyticsService.event category, "Changed #{toWatch}", label, newVal
-        else
-          analyticsService.event category, "Changed #{toWatch}", newVal
-
-  analyticsService
-)
diff --git a/src/app/common/services/comment-draft.service.ts b/src/app/common/services/comment-draft.service.ts
new file mode 100644
index 0000000000..26f4d51f64
--- /dev/null
+++ b/src/app/common/services/comment-draft.service.ts
@@ -0,0 +1,29 @@
+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+
+@Injectable({providedIn: 'root'})
+export class CommentDraftService {
+  private readonly PREFIX = 'df_comment_draft_'; // Prefix for localStorage keys
+
+  getDraft(projectId: number, taskDefinitionId: number): Observable<string> {
+    const key = this.generateKey(projectId, taskDefinitionId);
+    const draft = localStorage.getItem(key);
+    return of(draft || ''); // Return empty string if no draft exists
+  }
+
+  saveDraft(projectId: number, taskDefinitionId: number, text: string): Observable<boolean> {
+    const key = this.generateKey(projectId, taskDefinitionId);
+    localStorage.setItem(key, text);
+    return of(true); // Simulate successful save
+  }
+
+  clearDraft(projectId: number, taskDefinitionId: number): Observable<boolean> {
+    const key = this.generateKey(projectId, taskDefinitionId);
+    localStorage.removeItem(key);
+    return of(true); // Simulate successful deletion
+  }
+
+  private generateKey(projectId: number, taskDefinitionId: number): string {
+    return `${this.PREFIX}p${projectId}_td${taskDefinitionId}`;
+  }
+}
diff --git a/src/app/common/services/confetti.service.spec.ts b/src/app/common/services/confetti.service.spec.ts
index 803fa8a931..5adbef2d05 100644
--- a/src/app/common/services/confetti.service.spec.ts
+++ b/src/app/common/services/confetti.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ConfettiService } from './confetti.service';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {ConfettiService} from './confetti.service';
 
 describe('ConfettiService', () => {
   let service: ConfettiService;
diff --git a/src/app/common/services/confetti.service.ts b/src/app/common/services/confetti.service.ts
index d65a3f5eb6..92a51c8ad2 100644
--- a/src/app/common/services/confetti.service.ts
+++ b/src/app/common/services/confetti.service.ts
@@ -1,18 +1,16 @@
-import { Injectable } from '@angular/core';
 import confetti from 'canvas-confetti';
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ConfettiService {
-  constructor() {}
-
   public canon(x: number = 0, y: number = 0, angle = 210): void {
     confetti({
       angle: angle,
       spread: 80,
       particleCount: 100,
-      origin: { y: y, x: x },
+      origin: {y: y, x: x},
     });
   }
 }
diff --git a/src/app/common/services/date-service.coffee b/src/app/common/services/date-service.coffee
deleted file mode 100644
index 10cffe1980..0000000000
--- a/src/app/common/services/date-service.coffee
+++ /dev/null
@@ -1,31 +0,0 @@
-angular.module("doubtfire.common.services.dates", [])
-#
-# Services for making alerts
-#
-.factory("dateService", ->
-
-  dateService = {}
-
-  monthNames = [
-    "Jan", "Feb", "Mar",
-    "Apr", "May", "Jun", "Jul",
-    "Aug", "Sep", "Oct",
-    "Nov", "Dec"
-  ]
-
-  dateService.showDate = (dateValue) ->
-    if (dateValue?)
-      date = new Date(dateValue)
-      "#{monthNames[date.getMonth()]} #{date.getFullYear()}"
-    else
-      "-"
-
-  dateService.showFullDate = (dateValue) ->
-    if (dateValue?)
-      date = new Date(dateValue)
-      "#{date.getDate()} #{monthNames[date.getMonth()]} #{date.getFullYear()}"
-    else
-      "-"
-
-  dateService
-)
diff --git a/src/app/common/services/date.service.spec.ts b/src/app/common/services/date.service.spec.ts
new file mode 100644
index 0000000000..9f4df416bb
--- /dev/null
+++ b/src/app/common/services/date.service.spec.ts
@@ -0,0 +1,16 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {DateService} from './date.service';
+
+describe('DateService', () => {
+  let service: DateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/common/services/date.service.ts b/src/app/common/services/date.service.ts
new file mode 100644
index 0000000000..915fd96fcc
--- /dev/null
+++ b/src/app/common/services/date.service.ts
@@ -0,0 +1,69 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root', // Available throughout the app.
+})
+export class DateService {
+  private monthNames: string[] = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+
+  constructor() {
+    // Bind the methods to ensure `this` context is correct
+    this.showDate = this.showDate.bind(this);
+    this.showFullDate = this.showFullDate.bind(this);
+  }
+
+  /**
+   * Returns a dateString for the passed-in `date`,
+   * in the format of `MMM-YYYY`.
+   *
+   * Note: If you are going to pass in a `dateString`, please ensure it is in
+   * `ISO 8601` format.
+   *
+   * @param {string | Date} dateValue
+   *
+   * @returns {string}
+   */
+  showDate(dateValue?: string | Date): string {
+    if (dateValue) {
+      const date = new Date(dateValue);
+
+      return `${this.monthNames[date.getMonth()]} ${date.getFullYear()}`;
+    } else {
+      return '-';
+    }
+  }
+
+  /**
+   * Returns a dateString for the passed-in `date`,
+   * in the format of `D-MM-YYYY`.
+   *
+   *  Note: If you are going to pass in a `dateString`, please ensure it is in
+   * `ISO 8601` format.
+   *
+   * @param {string | Date} dateValue
+   *
+   * @returns {string}
+   */
+  showFullDate(dateValue?: string | Date): string {
+    if (dateValue) {
+      const date = new Date(dateValue);
+
+      return `${date.getDate()} ${this.monthNames[date.getMonth()]} ${date.getFullYear()}`;
+    } else {
+      return '-';
+    }
+  }
+}
diff --git a/src/app/common/services/emoji.service.spec.ts b/src/app/common/services/emoji.service.spec.ts
new file mode 100644
index 0000000000..7361195639
--- /dev/null
+++ b/src/app/common/services/emoji.service.spec.ts
@@ -0,0 +1,24 @@
+import {EmojiSearch} from '@ctrl/ngx-emoji-mart';
+import {describe, expect, it} from 'vitest';
+import {EmojiService} from './emoji.service';
+
+describe('EmojiService', () => {
+  const emojiSearch = {
+    emojisList: {
+      v: {colons: ':v:', native: '✌️'},
+      thumbsup: {colons: ':thumbsup:', native: '👍'},
+    },
+  } as unknown as EmojiSearch;
+
+  const service = new EmojiService(emojiSearch);
+
+  it('does not convert slash-delimited SharePoint URL path segments to emoji', () => {
+    const url = 'https://example.com/:v:/g/abc123';
+
+    expect(service.colonsToNative(url)).toBe(url);
+  });
+
+  it('still converts emoji shortcodes in comment text to native emoji', () => {
+    expect(service.colonsToNative('Nice work :thumbsup:')).toBe('Nice work 👍');
+  });
+});
diff --git a/src/app/common/services/emoji.service.ts b/src/app/common/services/emoji.service.ts
index 28fbf0a6c7..4cb4705b7f 100644
--- a/src/app/common/services/emoji.service.ts
+++ b/src/app/common/services/emoji.service.ts
@@ -1,17 +1,17 @@
-/* eslint-disable @typescript-eslint/no-inferrable-types */
-import { Injectable } from '@angular/core';
-import { EmojiSearch } from '@ctrl/ngx-emoji-mart';
-import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import {EmojiSearch} from '@ctrl/ngx-emoji-mart';
+import {EmojiData} from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
 export class EmojiService {
   // DO NOT CHANGE THIS LINE EVEN WITH AN ESLINT RULE
-  // eslint-disable-next-line max-len, prettier/prettier
+  // prettier-ignore
+  // eslint-disable-next-line no-misleading-character-class
   emojiMatch: RegExp = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/;
-  // eslint-disable-next-line no-useless-escape
-  colonPairMatch: RegExp = /(\:)(\w|\+|\-)+(\:)/;
+
+  colonPairMatch: RegExp = /(^|[^\w/])(:[\w+-]+:)(?!\/)/;
 
   constructor(private emojiSearch: EmojiSearch) {}
 
@@ -34,6 +34,7 @@ export class EmojiService {
     const emojiList: EmojiData[] = Object.values(this.emojiSearch.emojisList);
     let result = emojiList.find((e) => e.colons === emojiString)?.native;
     if (result === undefined) {
+      // eslint-disable-next-line no-useless-escape
       result = emojiString.replace(/\:/, '<><>');
     }
     return result;
@@ -47,12 +48,16 @@ export class EmojiService {
     let replaced = true;
     while (replaced) {
       replaced = false;
-      s = s.replace(this.colonPairMatch, (matched: string, p1?: string) => {
-        replaced = true;
-        return this.mapStringToEmoji(matched);
-      });
+      s = s.replace(
+        this.colonPairMatch,
+        (_matched: string, prefix: string, emojiString: string) => {
+          replaced = true;
+          return `${prefix}${this.mapStringToEmoji(emojiString)}`;
+        },
+      );
     }
-    const result = s.replace(/\<\>\<\>/, ':');
+
+    const result = s.replaceAll('<><>', ':');
     return result;
   }
 
@@ -64,7 +69,7 @@ export class EmojiService {
     let replaced = true;
     while (replaced) {
       replaced = false;
-      s = s.replace(this.emojiMatch, (matched: string, p1?: string) => {
+      s = s.replace(this.emojiMatch, (matched: string, _p1?: string) => {
         replaced = true;
         return this.mapEmojiToString(matched);
       });
diff --git a/src/app/common/services/grade.service.spec.ts b/src/app/common/services/grade.service.spec.ts
index 640228e3c3..86789ec7d8 100644
--- a/src/app/common/services/grade.service.spec.ts
+++ b/src/app/common/services/grade.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
-
-import { GradeService } from './grade.service';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {GradeService} from './grade.service';
 
 describe('GradeService', () => {
   let service: GradeService;
@@ -13,4 +13,19 @@ describe('GradeService', () => {
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+
+  it('uses all target grades when a unit has no custom configuration', () => {
+    expect(service.gradeValuesFor()).toEqual([0, 1, 2, 3]);
+  });
+
+  it('uses the grades enabled for a unit', () => {
+    const unit = {gradeValues: [0]};
+
+    expect(service.gradeValuesFor(unit)).toEqual([0]);
+    expect(service.allGradeValuesFor(unit)).toEqual([-1, 0]);
+    expect(service.gradeViewDataFor(unit, true)).toEqual([
+      {value: -1, viewValue: 'Fail'},
+      {value: 0, viewValue: 'Pass'},
+    ]);
+  });
 });
diff --git a/src/app/common/services/grade.service.ts b/src/app/common/services/grade.service.ts
index d2c0ee6213..e0242e123a 100644
--- a/src/app/common/services/grade.service.ts
+++ b/src/app/common/services/grade.service.ts
@@ -1,14 +1,27 @@
 import {Injectable} from '@angular/core';
-import {Project} from 'src/app/api/models/project';
+import type {GradeDefinition} from 'src/app/api/models/unit';
+
+interface UnitGradeConfiguration {
+  gradeValues?: number[];
+  gradeDefinitions?: GradeDefinition[];
+}
 
 @Injectable({
   providedIn: 'root',
 })
 export class GradeService {
+  public readonly defaultGradeDefinitions: GradeDefinition[] = [
+    {id: 'fail', value: -1, label: 'Fail', abbreviation: 'F'},
+    {id: 'pass', value: 0, label: 'Pass', abbreviation: 'P'},
+    {id: 'credit', value: 1, label: 'Credit', abbreviation: 'C'},
+    {id: 'distinction', value: 2, label: 'Distinction', abbreviation: 'D'},
+    {id: 'high-distinction', value: 3, label: 'High Distinction', abbreviation: 'HD'},
+  ];
+
   allGradeValues = [-1, 0, 1, 2, 3];
   gradeValues = [0, 1, 2, 3];
 
-  grades = {
+  public grades = {
     '-1': 'Fail',
     0: 'Pass',
     1: 'Credit',
@@ -16,7 +29,7 @@ export class GradeService {
     3: 'High Distinction',
   };
 
-  gradeIndex = {
+  public gradeIndex = {
     Fail: -1,
     Pass: 0,
     Credit: 1,
@@ -24,7 +37,7 @@ export class GradeService {
     'High Distinction': 3,
   };
 
-  gradeViewData = [
+  public gradeViewData = [
     {value: -1, viewValue: 'Fail'},
     {value: 0, viewValue: 'Pass'},
     {value: 1, viewValue: 'Credit'},
@@ -71,7 +84,57 @@ export class GradeService {
     HD: '#80FF00',
   };
 
-  public stringToGrade(value: string): number {
-    return this.gradeIndex[value];
+  public stringToGrade(value: string, unit?: UnitGradeConfiguration): number {
+    return (
+      this.gradeDefinitionsFor(unit).find((definition) => definition.label === value)?.value ??
+      this.gradeIndex[value]
+    );
+  }
+
+  public gradeDefinitionsFor(unit?: UnitGradeConfiguration): GradeDefinition[] {
+    if (unit?.gradeDefinitions?.length) {
+      return unit.gradeDefinitions;
+    }
+
+    if (unit?.gradeValues?.length) {
+      return this.defaultGradeDefinitions.filter(
+        (definition) => definition.value === -1 || unit.gradeValues.includes(definition.value),
+      );
+    }
+
+    return this.defaultGradeDefinitions;
+  }
+
+  public gradeValuesFor(unit?: UnitGradeConfiguration): number[] {
+    return this.gradeDefinitionsFor(unit)
+      .filter((definition) => definition.value >= 0)
+      .map((definition) => definition.value);
+  }
+
+  public allGradeValuesFor(unit?: UnitGradeConfiguration): number[] {
+    return [-1, ...this.gradeValuesFor(unit)];
+  }
+
+  public gradeViewDataFor(
+    unit?: UnitGradeConfiguration,
+    includeFail: boolean = false,
+  ): {value: number; viewValue: string}[] {
+    return this.gradeDefinitionsFor(unit)
+      .filter((definition) => includeFail || definition.value >= 0)
+      .map((definition) => ({value: definition.value, viewValue: definition.label}));
+  }
+
+  public gradeLabel(value: number, unit?: UnitGradeConfiguration): string {
+    return (
+      this.gradeDefinitionsFor(unit).find((definition) => definition.value === value)?.label ??
+      this.grades[value]
+    );
+  }
+
+  public gradeAbbreviation(value: number, unit?: UnitGradeConfiguration): string {
+    return (
+      this.gradeDefinitionsFor(unit).find((definition) => definition.value === value)
+        ?.abbreviation ?? this.gradeAcronyms[value]
+    );
   }
 }
diff --git a/src/app/common/services/http-authentication.interceptor.ts b/src/app/common/services/http-authentication.interceptor.ts
index 44e0cd5d12..359495a24d 100644
--- a/src/app/common/services/http-authentication.interceptor.ts
+++ b/src/app/common/services/http-authentication.interceptor.ts
@@ -1,21 +1,28 @@
-import { Injectable } from '@angular/core';
-import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import API_URL from 'src/app/config/constants/apiURL';
-import { UserService } from 'src/app/api/services/user.service';
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {UserService} from 'src/app/api/services/user.service';
+import API_URL from 'src/app/config/constants/apiUrl';
+import LTI_API_URL from 'src/app/config/constants/ltiApiUrl';
 
 @Injectable()
 export class HttpAuthenticationInterceptor implements HttpInterceptor {
-  constructor(
-    private userService: UserService
-  ) {}
+  constructor(private userService: UserService) {}
 
-  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (request.url.startsWith(API_URL) && this.userService.currentUser.authenticationToken) {
+  intercept(
+    request: HttpRequest<object | string | null>,
+    next: HttpHandler,
+  ): Observable<HttpEvent<object | string | null>> {
+    if (request.url.startsWith(API_URL) || request.url.startsWith(LTI_API_URL)) {
       request = request.clone({
         setHeaders: {
-          'Auth-Token': `${this.userService.currentUser.authenticationToken}`,
-          Username: `${this.userService.currentUser.username}`,
+          ...(this.userService.currentUser.authenticationToken && {
+            'Auth-Token': this.userService.currentUser.authenticationToken,
+            Username: this.userService.currentUser.username,
+          }),
+          ...(this.userService.currentUser.ltik && {
+            Authorization: `Bearer ${this.userService.currentUser.ltik}`,
+          }),
         },
       });
     }
diff --git a/src/app/common/services/http-error.interceptor.spec.ts b/src/app/common/services/http-error.interceptor.spec.ts
new file mode 100644
index 0000000000..c0f78b6cf6
--- /dev/null
+++ b/src/app/common/services/http-error.interceptor.spec.ts
@@ -0,0 +1,80 @@
+import {describe, expect, it} from 'vitest';
+import {HttpErrorResponse, HttpHandler, HttpRequest} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {HttpErrorInterceptor} from './http-error.interceptor';
+
+// authenticationTokenExpiry is null on purpose. isAccessTokenExpired parses it,
+// gets NaN and returns false, so the request reaches the handler below instead
+// of being turned into a synthetic 419.
+const userService = {
+  currentUser: {
+    authenticationToken: 'tok',
+    authenticationTokenExpiry: null as string | null,
+    username: 'u',
+  },
+  isAnonymousUser: () => false,
+};
+
+const authenticationService = {
+  attemptLoginUsingRefreshToken: () => {},
+  timeoutAuthentication: () => {},
+};
+
+function messageFor(error: HttpErrorResponse): Promise<unknown> {
+  const interceptor = new HttpErrorInterceptor(
+    authenticationService as never,
+    userService as never,
+  );
+
+  const handler: HttpHandler = {
+    handle: (): Observable<never> => throwError(() => error),
+  };
+
+  return new Promise((resolve) => {
+    interceptor
+      .intercept(new HttpRequest('GET', '/api/units'), handler)
+      .subscribe({error: (message: unknown) => resolve(message)});
+  });
+}
+
+describe('HttpErrorInterceptor', () => {
+  it('falls back to the status text when the response body is empty', async () => {
+    const message = await messageFor(
+      new HttpErrorResponse({status: 502, statusText: 'Bad Gateway', error: null}),
+    );
+
+    expect(message).toBe('Bad Gateway');
+  });
+
+  it('uses the message from an ordinary api error', async () => {
+    const message = await messageFor(
+      new HttpErrorResponse({
+        status: 404,
+        statusText: 'Not Found',
+        error: {error: 'Unit not found'},
+      }),
+    );
+
+    expect(message).toBe('Unit not found');
+  });
+
+  it('passes a plain string body through unchanged', async () => {
+    const message = await messageFor(
+      new HttpErrorResponse({status: 500, statusText: 'Server Error', error: 'went wrong'}),
+    );
+
+    expect(message).toBe('went wrong');
+  });
+
+  it('falls back to the status text when the body could not be parsed', async () => {
+    const message = await messageFor(
+      new HttpErrorResponse({
+        status: 500,
+        statusText: 'Internal Server Error',
+        error: {error: new SyntaxError('Unexpected token <'), text: '<html></html>'},
+      }),
+    );
+
+    expect(message).toBe('Internal Server Error');
+  });
+});
diff --git a/src/app/common/services/http-error.interceptor.ts b/src/app/common/services/http-error.interceptor.ts
index 76f5a9a4b0..63da593597 100644
--- a/src/app/common/services/http-error.interceptor.ts
+++ b/src/app/common/services/http-error.interceptor.ts
@@ -1,52 +1,174 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { Injectable } from '@angular/core';
-import { AuthenticationService, UserService } from 'src/app/api/models/doubtfire-model';
+import * as Sentry from '@sentry/angular';
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable, Subject, throwError} from 'rxjs';
+import {catchError, filter, finalize, switchMap, take} from 'rxjs/operators';
+import {AuthenticationService, UserService} from 'src/app/api/models/doubtfire-model';
 
 @Injectable()
 export class HttpErrorInterceptor implements HttpInterceptor {
-  constructor(private authenticationService: AuthenticationService, private userService: UserService) {}
+  private refreshTokenInProgress = false;
+  private refreshTokenSubject: Subject<any> = new BehaviorSubject<any>(null);
 
-  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    // const retryTimes: number = 3;
-    // const delayDuration: number = 100;
-
-    return next.handle(request).pipe(
-      // retryWhen(errors => errors
-      //   .pipe(
-      //     concatMap((error, count) => {
-      //       if (count < retryTimes && (error.status === 400 || error.status === 0)) {
-      //         return of(error.status);
-      //       }
-      //       return throwError(error);
-      //     }),
-      //     delay(delayDuration)
-      //   )
-      // ),
-      catchError((error: HttpErrorResponse) => {
-        let errorMessage: string = '';
-        let logMessage: string = '';
-        if (error.error instanceof ErrorEvent) {
-          // client-side error
-          errorMessage = error.error.message;
-        } else if (error.error instanceof ProgressEvent) {
-          errorMessage = error.statusText;
+  constructor(
+    private authenticationService: AuthenticationService,
+    private userService: UserService,
+  ) {}
+
+  attemptRefresh$(): Observable<void> {
+    return new Observable<void>((observer) => {
+      this.authenticationService.attemptLoginUsingRefreshToken((result: boolean) => {
+        if (result) {
+          observer.next();
+          observer.complete();
         } else {
-          // server-side error
-          errorMessage = error.error.error;
-          logMessage = `Error Code: ${error.status}`;
+          this.authenticationService.timeoutAuthentication();
+          this.refreshTokenInProgress = false;
+          observer.error(new Error('Authentication timed out'));
         }
+      }, false); // Don't display splashscreen
+    });
+  }
 
-        console.error(`${logMessage}: ${errorMessage}`);
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const request$ = this.isAccessTokenExpired(request)
+      ? throwError(() => new HttpErrorResponse({status: 419}))
+      : next.handle(request);
 
-        if (error.status === 419 || (error.status === 403 && this.userService.isAnonymousUser())) {
-          this.authenticationService.timeoutAuthentication();
+    return request$.pipe(
+      catchError((error: HttpErrorResponse) => {
+        if (this.isAuthError(error)) {
+          if (this.isAccessTokenRequest(request)) {
+            return throwError(() => this.extractErrorMessage(error));
+          }
+
+          if (!this.refreshTokenInProgress) {
+            console.log('Refreshing access token');
+            this.refreshTokenInProgress = true;
+            this.refreshTokenSubject.next(null);
+            return this.attemptRefresh$().pipe(
+              switchMap(() => {
+                this.refreshTokenSubject.next(this.userService.currentUser.authenticationToken);
+                return next.handle(this.injectToken(request));
+              }),
+              catchError((err: HttpErrorResponse) => {
+                this.refreshTokenInProgress = false;
+                if (this.isAuthError(err)) {
+                  this.authenticationService.timeoutAuthentication();
+                }
+                if (!(err instanceof HttpErrorResponse)) {
+                  return throwError(() => err);
+                }
+                return throwError(() => this.extractErrorMessage(err));
+              }),
+              finalize(() => (this.refreshTokenInProgress = false)),
+            );
+          } else {
+            return this.refreshTokenSubject.pipe(
+              filter((result) => result !== null),
+              take(1),
+              switchMap(() => next.handle(this.injectToken(request))),
+              catchError((err: HttpErrorResponse) => {
+                return throwError(() => this.extractErrorMessage(err));
+              }),
+            );
+          }
         }
 
-        return throwError(() => errorMessage);
-      })
+        return throwError(() => this.extractErrorMessage(error));
+      }),
+    );
+  }
+
+  private isAuthError(error: HttpErrorResponse) {
+    return error.status === 419 || (error.status === 403 && this.userService.isAnonymousUser());
+  }
+
+  private isAccessTokenExpired(request: HttpRequest<any>) {
+    const user = this.userService.currentUser;
+    const expiry = Date.parse(user.authenticationTokenExpiry);
+
+    return (
+      !this.isAccessTokenRequest(request) &&
+      !!user.authenticationToken &&
+      !Number.isNaN(expiry) &&
+      expiry <= Date.now()
     );
   }
+
+  private isAccessTokenRequest(request: HttpRequest<any>) {
+    return request.url.endsWith('/auth/access-token');
+  }
+
+  private extractErrorMessage(error: HttpErrorResponse) {
+    let errorMessage: string;
+    let logMessage: string = '';
+    if (error.error instanceof ErrorEvent) {
+      // client-side error
+      errorMessage = error.error.message;
+    } else if (error.error instanceof ProgressEvent) {
+      errorMessage = error.statusText;
+    } else {
+      // Server-side error. error.error is null whenever the response body was
+      // empty, which is every 502 from a proxy and every 500 that returns
+      // nothing, so the property read has to come after the checks rather than
+      // before them. The blob check moves up for the same reason: it only worked
+      // where it was because a Blob happens to have no error property.
+      const body: unknown = error.error;
+      if (body instanceof Blob) {
+        errorMessage = error.statusText;
+      } else if (typeof body === 'string') {
+        errorMessage = body;
+      } else {
+        // An unparseable body arrives as {error: SyntaxError, text: '<html>'},
+        // so the nested value has to be a string before it is used as one.
+        const nested = (body as {error?: unknown})?.error;
+        errorMessage =
+          typeof nested === 'string' ? nested : error.statusText || 'Something went wrong';
+      }
+      logMessage = `Error Code: ${error.status}`;
+    }
+
+    this.reportError(`${logMessage}: ${errorMessage}`, error.status);
+
+    console.error(`${logMessage}: ${errorMessage}`);
+    return errorMessage;
+  }
+
+  injectToken(request: HttpRequest<any>) {
+    return request.clone({
+      setHeaders: {
+        'Auth-Token': this.userService.currentUser.authenticationToken,
+        Username: this.userService.currentUser.username,
+      },
+    });
+  }
+
+  // Reports the failure rather than throwing at Sentry. The old version threw
+  // inside a startSpan callback, which rethrows, inside a then() with no catch,
+  // so every failed request in the app left an unhandled promise rejection that
+  // nothing in the observable chain could see. Named reportError because rxjs
+  // throwError is imported into this same file.
+  private reportError(message: string, statusCode: number) {
+    Sentry.captureException(new HttpRequestError(message, statusCode), {
+      tags: {'http.response.status_code': statusCode},
+    });
+  }
+}
+
+class HttpRequestError extends Error {
+  constructor(
+    message: string | undefined,
+    public readonly statusCode: number,
+  ) {
+    super(message);
+    this.name = 'HttpRequestError';
+  }
 }
diff --git a/src/app/common/services/listener-service.coffee b/src/app/common/services/listener-service.coffee
deleted file mode 100644
index 120365765c..0000000000
--- a/src/app/common/services/listener-service.coffee
+++ /dev/null
@@ -1,11 +0,0 @@
-angular.module("doubtfire.common.services.listener", [])
-
-.factory("listenerService", ->
-  listeners = {}
-  listenerService = {}
-  listenerService.listenTo = (scope) ->
-    listeners[scope.$id] ?= []
-    scope.$on '$destroy', -> _.each(listeners[scope.$id], (l) -> l())
-    listeners[scope.$id]
-  listenerService
-)
diff --git a/src/app/common/services/media-service.coffee b/src/app/common/services/media-service.coffee
deleted file mode 100644
index 21c6cefa08..0000000000
--- a/src/app/common/services/media-service.coffee
+++ /dev/null
@@ -1,20 +0,0 @@
-angular.module("doubtfire.common.services.media-service", [])
-#
-# Services for working with media APIs
-#
-.factory("mediaService", ($rootScope, $timeout, $sce) ->
-  mediaService = {}
-
-  mediaService.audioCtx = mediaService.audioCtx? || (new (window.AudioContext || webkitAudioContext)())
-
-  mediaService.getMimeType = () ->
-    mimeType = 'audio/webm'
-    if !MediaRecorder.isTypeSupported(mimeType)
-      if navigator.userAgent.toLowerCase().indexOf('firefox') > -1
-        mimeType = 'audio/ogg'
-      else
-        mimeType = ''
-    mimeType
-
-  mediaService
-)
diff --git a/src/app/common/services/outcome-service.coffee b/src/app/common/services/outcome-service.coffee
deleted file mode 100644
index e8c19ca445..0000000000
--- a/src/app/common/services/outcome-service.coffee
+++ /dev/null
@@ -1,144 +0,0 @@
-angular.module("doubtfire.common.services.outcome-service", [])
-
-#
-# Services for handling Outcomes
-#
-.factory("outcomeService", (gradeService, newTaskService) ->
-  outcomeService = {}
-
-  # outcomeService.unitTaskStatusFactor = ->
-  #   (taskDefinitionId) -> 1
-
-  # outcomeService.projectTaskStatusFactor = (project) ->
-  #   (taskDefinitionId) ->
-  #     task = project.findTaskForDefinition(taskDefinitionId)
-  #     if task?
-  #       newTaskService.learningWeight.get(task.status)
-  #     else
-  #       0
-
-  outcomeService.alignmentLabels = [
-    "The task is not related to this outcome at all",
-    "The task is slightly related to this outcome",
-    "The task is related to this outcome",
-    "The task is a reasonable example for this outcome",
-    "The task is a strong example of this outcome",
-    "The task is the best example of this outcome",
-  ]
-
-  outcomeService.individualTaskStatusFactor = (project, task) ->
-    (taskDefinitionId) ->
-      if task.definition.id == taskDefinitionId
-        newTaskService.learningWeight.get(project.findTaskForDefinition(taskDefinitionId).status)
-      else
-        0
-
-  outcomeService.individualTaskPotentialFactor = (project, task) ->
-    (taskDefinitionId) ->
-      if task.definition.id == taskDefinitionId then 1 else 0
-
-  outcomeService.calculateTargets = (unit, source, taskStatusFactor) ->
-    outcomes = {}
-    # For each learning outcome (LO) -- produce a map with grades containing task scores
-    # calculated from alignment details, task target grade, and task status factor.
-    #
-    # The Task Status Factor for projects will be a value between 0 and 1
-    # In the unit the taskStatusFactor will always be 1 (100%) to show potential values
-    # for the unit -- in effect removing the task status from unit calculations
-    _.each unit.ilos, (outcome) ->
-      # Add grade map for this LO to outcomes map
-      outcomes[outcome.id] = {
-        # Using 0..3 so that it can be used to calculate the grade scale below
-        0: [] # Pass grade... -- will contain scores for pass grade tasks
-        1: [] # Credit grade... -- etc.
-        2: []
-        3: []
-      }
-
-    # For each outcome / task alignment...
-    _.each source.taskOutcomeAlignments, (align) ->
-      # Get the task definition
-      td = unit.taskDef(align.taskDefinition.id)
-      # Store a partial score for this task in the relevant outcomes ( outcomes[outcome id][grade] << score )
-      # At this stage it is just rating * taskFactor (1 to 5 times 0 to 1)
-      outcomes[align.learningOutcome.id][td.targetGrade].push align.rating * taskStatusFactor(td)
-
-    # Finally reduce all of these into one score for each outcome / grade
-    _.each outcomes, (outcome, key) ->
-      # For this outcome
-      _.each outcome, (tmp, key1) ->
-        # get a scale for the grade
-        scale = Math.pow(2, parseInt(key1,10))
-        # Reduce all task partial scores and * grade scale -- replace array with single value
-        outcome[key1] = _.reduce(tmp, ((memo, num) -> memo + num), 0) * scale
-
-    # Returns map of...
-    # {
-    #   <OutcomeID>: {
-    #     0: <score>
-    #     1: <score> ...
-    #   },
-    #   86: {   <--- OutcomeID 86 --> "Programming Principles"
-    #     0: 27 <--- Pass: 27 score (from rating * task status factor * scale reduced)
-    #     1: 53 ...
-    #   },
-    # }
-    outcomes
-
-  outcomeService.calculateTaskContribution = (unit, project, task) ->
-    outcome_set = []
-    outcome_set[0] = outcomeService.calculateTargets(unit, unit, outcomeService.individualTaskStatusFactor(project, task))
-
-    _.each outcome_set[0], (outcome, key) ->
-      outcome_set[0][key] = _.reduce(outcome, ((memo, num) -> memo + num), 0)
-
-    outcome_set[0].title = 'Current Task Contribution'
-    outcome_set
-
-  outcomeService.calculateTaskPotentialContribution = (unit, project, task) ->
-    outcomes = outcomeService.calculateTargets(unit, unit, outcomeService.individualTaskPotentialFactor(project, task))
-
-    _.each outcomes, (outcome, key) ->
-      outcomes[key] = _.reduce(outcome, ((memo, num) -> memo + num), 0)
-
-    outcomes['title'] = 'Potential Task Contribution'
-    outcomes
-
-  outcomeService.calculateProgress = (unit, project) ->
-    outcome_set = []
-
-    outcome_set[0] = outcomeService.calculateTargets(unit, unit, project.taskStatusFactor.bind(project))
-    # outcome_set[1] = outcomeService.calculateTargets(unit, project, outcomeService.projectTaskStatusFactor(project))
-
-    _.each outcome_set, (outcomes, key) ->
-      _.each outcomes, (outcome, key) ->
-        outcomes[key] = _.reduce(outcome, ((memo, num) -> memo + num), 0)
-
-    outcome_set[0].title = "Your Progress" # - Staff Suggestion"
-    # outcome_set[1].title = "Your Progress - Your Reflection"
-
-    outcome_set
-
-
-  outcomeService.targetsByGrade = (unit, source) ->
-    result = []
-    outcomes = outcomeService.calculateTargets(unit, source, unit.taskStatusFactor)
-
-    values = {
-      '0': []
-      '1': []
-      '2': []
-      '3': []
-    }
-
-    _.each outcomes, (outcome, key) ->
-      _.each outcome, (tmp, key1) ->
-        values[key1].push { label: $sce.getTrustedHtml(unit.outcome(parseInt(key,10)).abbreviation), value:  tmp }
-
-    _.each values, (vals, idx) ->
-      result.push { key: gradeService.grades[idx], values: vals }
-
-    result
-
-  outcomeService
-)
diff --git a/src/app/common/services/ppi-progress-calculation.md b/src/app/common/services/ppi-progress-calculation.md
new file mode 100644
index 0000000000..191e0ee8ec
--- /dev/null
+++ b/src/app/common/services/ppi-progress-calculation.md
@@ -0,0 +1,15 @@
+# PPI Progress Calculation Rules
+
+Completion percentage is calculated as:
+
+completed available tasks / total available tasks × 100
+
+Results are rounded to the nearest whole number using `Math.round()`.
+
+If there are no available tasks, the result is treated as unavailable rather than dividing by zero.
+
+If cohort data is missing or suppressed, the student-to-cohort comparison is also treated as unavailable.
+
+The current comparison value is calculated as:
+
+student completion percentage - cohort completion percentage
diff --git a/src/app/common/services/ppi-progress-calculation.service.spec.ts b/src/app/common/services/ppi-progress-calculation.service.spec.ts
new file mode 100644
index 0000000000..cb251dd084
--- /dev/null
+++ b/src/app/common/services/ppi-progress-calculation.service.spec.ts
@@ -0,0 +1,51 @@
+import {describe, expect, it} from 'vitest';
+import {
+  calculateCompletionPercentage,
+  calculateProgressComparison,
+} from './ppi-progress-calculation.service';
+
+describe('PPI progress calculations', () => {
+  describe('calculateCompletionPercentage', () => {
+    it('returns 0 when no tasks are completed', () => {
+      expect(calculateCompletionPercentage(0, 20)).toBe(0);
+    });
+
+    it('calculates partial completion', () => {
+      expect(calculateCompletionPercentage(5, 20)).toBe(25);
+    });
+
+    it('returns 100 when all tasks are completed', () => {
+      expect(calculateCompletionPercentage(20, 20)).toBe(100);
+    });
+
+    it('returns null when no tasks are available', () => {
+      expect(calculateCompletionPercentage(0, 0)).toBeNull();
+    });
+
+    it('returns null when completed tasks exceed available tasks', () => {
+      expect(calculateCompletionPercentage(25, 20)).toBeNull();
+    });
+
+    it('rounds to the nearest whole percentage', () => {
+      expect(calculateCompletionPercentage(2, 3)).toBe(67);
+    });
+  });
+
+  describe('calculateProgressComparison', () => {
+    it('returns a positive value when student is ahead', () => {
+      expect(calculateProgressComparison(60, 50)).toBe(10);
+    });
+
+    it('returns a negative value when student is behind', () => {
+      expect(calculateProgressComparison(40, 50)).toBe(-10);
+    });
+
+    it('returns zero when student matches the cohort', () => {
+      expect(calculateProgressComparison(50, 50)).toBe(0);
+    });
+
+    it('returns null when cohort data is unavailable', () => {
+      expect(calculateProgressComparison(50, null)).toBeNull();
+    });
+  });
+});
diff --git a/src/app/common/services/ppi-progress-calculation.service.ts b/src/app/common/services/ppi-progress-calculation.service.ts
new file mode 100644
index 0000000000..ff0bb0ec80
--- /dev/null
+++ b/src/app/common/services/ppi-progress-calculation.service.ts
@@ -0,0 +1,32 @@
+export function calculateCompletionPercentage(completed: number, available: number): number | null {
+  if (
+    !Number.isFinite(completed) ||
+    !Number.isFinite(available) ||
+    completed < 0 ||
+    available <= 0 ||
+    completed > available
+  ) {
+    return null;
+  }
+
+  return Math.round((completed / available) * 100);
+}
+
+export function calculateProgressComparison(
+  studentPercentage: number,
+  cohortPercentage: number | null,
+): number | null {
+  if (
+    cohortPercentage === null ||
+    !Number.isFinite(studentPercentage) ||
+    !Number.isFinite(cohortPercentage) ||
+    studentPercentage < 0 ||
+    studentPercentage > 100 ||
+    cohortPercentage < 0 ||
+    cohortPercentage > 100
+  ) {
+    return null;
+  }
+
+  return Math.round(studentPercentage - cohortPercentage);
+}
diff --git a/src/app/common/services/recorder-service.coffee b/src/app/common/services/recorder-service.coffee
deleted file mode 100644
index b3e6408e4e..0000000000
--- a/src/app/common/services/recorder-service.coffee
+++ /dev/null
@@ -1,259 +0,0 @@
-# Parts adapted from https://github.com/kaliatech/web-audio-recording-tests
-
-angular.module("doubtfire.common.services.recorder-service", [])
-#
-# Services for working with cross-platform, media Recording APIs
-#
-.factory("recorderService", ($rootScope, $timeout, $sce) ->
-  return class RecorderService
-    constructor: () ->
-      window.AudioContext = window.AudioContext || window.webkitAudioContext
-
-      @em = document.createDocumentFragment()
-      @state = 'inactive'
-      @audioCtx = {}
-      @chunks = []
-      @chunkType = ''
-
-      @usingMediaRecorder = window.MediaRecorder || false
-
-      # MediaRecording on Safari is broken for us in some specific way which I'm not sure how to fix yet.
-      if /^((?!chrome|android).)*safari/i.test(navigator.userAgent) then @usingMediaRecorder = false
-
-      @encoderMimeType
-
-      @config = {
-        broadcastAudioProcessEvents: false,
-        createAnalyserNode: true,
-        createDynamicsCompressorNode: false,
-        forceScriptProcessor: false,
-        manualEncoderId: 'wav',
-        micGain: 1.0,
-        processorBufferSize: 2048,
-        stopTracksAndCloseCtxWhenFinished: true,
-        userMediaConstraints: {
-          audio: true
-        }
-        audioBitsPerSecond: 128000
-      }
-      return
-
-    # Called once when the recording is initated
-    startRecording: () ->
-      if (@state != 'inactive')
-        return
-
-      #  This is the case on ios/chrome, when clicking links from within ios/slack (sometimes), etc.
-      if (!navigator || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia)
-        console.error('Missing support for navigator.mediaDevices.getUserMedia') # temp: helps when testing for strange issues on ios/safari
-        return
-
-      @audioCtx = new AudioContext()
-      @micGainNode = @audioCtx.createGain()
-      @outputGainNode = @audioCtx.createGain()
-
-      if (@config.createDynamicsCompressorNode)
-        @dynamicsCompressorNode = audioCtx.createDynamicsCompressor()
-
-
-      if (@config.createAnalyserNode)
-        @analyserNode = @audioCtx.createAnalyser()
-
-
-      #  If not using MediaRecorder(i.e. safari and edge), then a script processor is required. It's optional
-      #  on browsers using MediaRecorder and is only useful if wanting to do custom analysis or manipulation of
-      #  recorded audio data.
-      if (@config.forceScriptProcessor || @config.broadcastAudioProcessEvents || !@usingMediaRecorder)
-        @processorNode = @audioCtx.createScriptProcessor(@config.processorBufferSize, 1, 1) # TODO: Get the number of channels from mic
-
-      #  Create stream destination on chrome/firefox because, AFAICT, we have no other way of feeding audio graph output
-      #  in to MediaRecorderSafari/Edge don't have this method as of 2018-04.
-      if (@audioCtx.createMediaStreamDestination)
-        @destinationNode = @audioCtx.createMediaStreamDestination()
-      else
-        @destinationNode = @audioCtx.destination
-
-      #  Create web worker for doing the encoding
-      if (!@usingMediaRecorder)
-        @encoderWorker = new Worker('/assets/wav-worker.js')
-        @encoderMimeType = 'audio/wav'
-
-        that = this
-        @encoderWorker.addEventListener('message', (e) ->
-          event = new Event('dataavailable')
-          if (that.config.manualEncoderId == 'ogg')
-            event.data = e.data
-          else
-            event.data = new Blob(e.data, { type: that.encoderMimeType })
-          that._onDataAvailable(event)
-        )
-
-      #  This will prompt user for permission if needed
-      that = this
-      return navigator.mediaDevices.getUserMedia(@config.userMediaConstraints)
-        .then((stream) ->
-          that._startRecordingWithStream(stream)
-        )
-        .catch((error) ->
-          return
-        )
-      return
-
-    setMicGain: (newGain) ->
-      @config.micGain = newGain
-      if (@audioCtx && @micGainNode)
-        @micGainNode.gain.setValueAtTime(newGain, @audioCtx.currentTime)
-      return
-
-    _startRecordingWithStream: (stream) ->
-      @micAudioStream = stream
-      @inputStreamNode = @audioCtx.createMediaStreamSource(@micAudioStream)
-      @audioCtx = @inputStreamNode.context
-
-      #  Kind-of a hack to allow hooking in to audioGraph mediaRecorder.inputStreamNode
-      if (@onGraphSetupWithInputStream)
-        @onGraphSetupWithInputStream(@inputStreamNode)
-
-      @inputStreamNode.connect(@micGainNode)
-      @micGainNode.gain.setValueAtTime(@config.micGain, @audioCtx.currentTime)
-
-      nextNode = @micGainNode
-      if (@dynamicsCompressorNode)
-        @micGainNode.connect(@dynamicsCompressorNode)
-        nextNode = @dynamicsCompressorNode
-
-      @state = 'recording'
-
-      if (@processorNode)
-        nextNode.connect(@processorNode)
-        @processorNode.connect(@outputGainNode)
-        that = this
-        @processorNode.onaudioprocess = (e) -> that._onAudioProcess(e)
-      else
-        nextNode.connect(@outputGainNode)
-
-      if (@analyserNode)
-        nextNode.connect(@analyserNode)
-
-      @outputGainNode.connect(@destinationNode)
-
-      if (@usingMediaRecorder)
-        @mediaRecorder = new MediaRecorder(@destinationNode.stream, { audioBitsPerSecond: @config.audioBitsPerSecond })
-        that = this
-        @mediaRecorder.addEventListener('dataavailable', (evt) -> that._onDataAvailable(evt))
-        @mediaRecorder.addEventListener('error', (evt) -> @_onError(evt))
-
-        @mediaRecorder.start()
-      else
-        @outputGainNode.gain.setValueAtTime(0, @audioCtx.currentTime)
-      return
-
-    _onAudioProcess: (e) ->
-      if (@config.broadcastAudioProcessEvents)
-        @em.dispatchEvent(new CustomEvent('onaudioprocess', {
-          detail: {
-            inputBuffer: e.inputBuffer,
-            outputBuffer: e.outputBuffer
-          }
-        }))
-      if (!@usingMediaRecorder)
-        if (@state == 'recording')
-          if (@config.broadcastAudioProcessEvents)
-            @encoderWorker.postMessage(['encode', e.outputBuffer.getChannelData(0)])
-          else
-            @encoderWorker.postMessage(['encode', e.inputBuffer.getChannelData(0)])
-      return
-
-    processChunks: () ->
-      if (@state == 'inactive')
-        return
-      this._dumpChunks()
-      return
-
-    _dumpChunks: () ->
-      if(@usingMediaRecorder)
-        @mediaRecorder.requestData()
-
-      if (!@usingMediaRecorder)
-        @encoderWorker.postMessage(['dump', @audioCtx.sampleRate])
-        clearInterval(@slicing)
-
-    # Called once when the recording has been stopped
-    stopRecording: () ->
-      if (@state == 'inactive')
-        return
-      if (@usingMediaRecorder)
-        @state = 'inactive'
-        @mediaRecorder.stop()
-      else
-        @state = 'inactive'
-        @encoderWorker.postMessage(['dump', @audioCtx.sampleRate])
-        clearInterval(@slicing)
-      return
-
-    # Called each time a chunk of recording becomes available
-    _onDataAvailable: (evt) ->
-      @chunks.push(evt.data)
-      @chunkType = evt.data.type
-
-      blob = new Blob(@chunks, { 'type': @chunkType })
-      blobUrl = URL.createObjectURL(blob)
-      recording = {
-        ts: new Date().getTime(),
-        blobUrl: blobUrl,
-        mimeType: blob.type,
-        size: blob.size
-        blob: blob
-      }
-
-      @em.dispatchEvent(new CustomEvent('recording', { detail: { recording: recording } }))
-
-      @chunks = []
-
-      if (@state != 'inactive')
-        return
-
-      this._cleanup()
-      return
-
-    _cleanup: () ->
-      @chunkType = null
-      if (@destinationNode)
-        @destinationNode.disconnect()
-        @destinationNode = null
-      if (@outputGainNode)
-        @outputGainNode.disconnect()
-        @outputGainNode = null
-      if (@analyserNode)
-        @analyserNode.disconnect()
-        @analyserNode = null
-      if (@processorNode)
-        @processorNode.disconnect()
-        @processorNode = null
-      if (@encoderWorker)
-        @encoderWorker.postMessage(['close'])
-        @encoderWorker = null
-      if (@dynamicsCompressorNode)
-        @dynamicsCompressorNode.disconnect()
-        @dynamicsCompressorNode = null
-      if (@micGainNode)
-        @micGainNode.disconnect()
-        @micGainNode = null
-      if (@inputStreamNode)
-        @inputStreamNode.disconnect()
-        @inputStreamNode = null
-
-      if (@config.stopTracksAndCloseCtxWhenFinished)
-        # This removes the red bar in iOS/Safari
-        @micAudioStream.getTracks().forEach((track) -> track.stop())
-        @micAudioStream = null
-
-        @audioCtx.close()
-        @audioCtx = null
-
-      return
-
-    _onError: (evt) ->
-      @em.dispatchEvent(new Event('error'))
-      return
-)
diff --git a/src/app/common/services/recorder-service.ts b/src/app/common/services/recorder-service.ts
new file mode 100644
index 0000000000..2c50415efc
--- /dev/null
+++ b/src/app/common/services/recorder-service.ts
@@ -0,0 +1,324 @@
+import {Injectable} from '@angular/core';
+
+type RecorderState = 'inactive' | 'recording';
+
+interface RecorderConfig {
+  broadcastAudioProcessEvents: boolean;
+  createAnalyserNode: boolean;
+  createDynamicsCompressorNode: boolean;
+  forceScriptProcessor: boolean;
+  manualEncoderId: 'wav' | 'ogg';
+  micGain: number;
+  processorBufferSize: number;
+  stopTracksAndCloseCtxWhenFinished: boolean;
+  userMediaConstraints: MediaStreamConstraints;
+  audioBitsPerSecond: number;
+}
+
+@Injectable()
+export class MediaRecorderService {
+  em: DocumentFragment;
+  state: RecorderState;
+  audioCtx: AudioContext | null;
+  chunks: BlobPart[];
+  chunkType: string | null;
+  usingMediaRecorder: boolean;
+  encoderMimeType?: string;
+  config: RecorderConfig;
+
+  micGainNode: GainNode | null;
+  outputGainNode: GainNode | null;
+  dynamicsCompressorNode: DynamicsCompressorNode | null;
+  analyserNode: AnalyserNode | null;
+  processorNode: ScriptProcessorNode | null;
+  destinationNode: MediaStreamAudioDestinationNode | AudioDestinationNode | null;
+  encoderWorker: Worker | null;
+  micAudioStream: MediaStream | null;
+  inputStreamNode: MediaStreamAudioSourceNode | null;
+  mediaRecorder: MediaRecorder | null;
+  onGraphSetupWithInputStream?: (inputStream: MediaStreamAudioSourceNode) => void;
+
+  constructor() {
+    const audioWindow = window as typeof window & {
+      webkitAudioContext?: typeof AudioContext;
+    };
+    audioWindow.AudioContext = audioWindow.AudioContext || audioWindow.webkitAudioContext;
+
+    this.em = document.createDocumentFragment();
+    this.state = 'inactive';
+    this.audioCtx = null;
+    this.chunks = [];
+    this.chunkType = '';
+
+    this.micGainNode = null;
+    this.outputGainNode = null;
+    this.dynamicsCompressorNode = null;
+    this.analyserNode = null;
+    this.processorNode = null;
+    this.destinationNode = null;
+    this.encoderWorker = null;
+    this.micAudioStream = null;
+    this.inputStreamNode = null;
+    this.mediaRecorder = null;
+
+    this.usingMediaRecorder = Boolean(window.MediaRecorder);
+
+    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+      this.usingMediaRecorder = false;
+    }
+
+    this.config = {
+      broadcastAudioProcessEvents: false,
+      createAnalyserNode: true,
+      createDynamicsCompressorNode: false,
+      forceScriptProcessor: false,
+      manualEncoderId: 'wav',
+      micGain: 1.0,
+      processorBufferSize: 2048,
+      stopTracksAndCloseCtxWhenFinished: true,
+      userMediaConstraints: {
+        audio: true,
+      },
+      audioBitsPerSecond: 128000,
+    };
+  }
+
+  startRecording(): Promise<void> | void {
+    if (this.state !== 'inactive') {
+      return;
+    }
+
+    if (!navigator?.mediaDevices?.getUserMedia) {
+      console.error('Missing support for navigator.mediaDevices.getUserMedia');
+      return;
+    }
+
+    this.audioCtx = new AudioContext();
+    this.micGainNode = this.audioCtx.createGain();
+    this.outputGainNode = this.audioCtx.createGain();
+
+    if (this.config.createDynamicsCompressorNode) {
+      this.dynamicsCompressorNode = this.audioCtx.createDynamicsCompressor();
+    }
+
+    if (this.config.createAnalyserNode) {
+      this.analyserNode = this.audioCtx.createAnalyser();
+    }
+
+    if (
+      this.config.forceScriptProcessor ||
+      this.config.broadcastAudioProcessEvents ||
+      !this.usingMediaRecorder
+    ) {
+      this.processorNode = this.audioCtx.createScriptProcessor(
+        this.config.processorBufferSize,
+        1,
+        1,
+      );
+    }
+
+    if (this.audioCtx.createMediaStreamDestination) {
+      this.destinationNode = this.audioCtx.createMediaStreamDestination();
+    } else {
+      this.destinationNode = this.audioCtx.destination;
+    }
+
+    if (!this.usingMediaRecorder) {
+      this.encoderWorker = new Worker('/assets/wav-worker.js');
+      this.encoderMimeType = 'audio/wav';
+
+      this.encoderWorker.addEventListener('message', (e: MessageEvent<BlobPart[] | Blob>) => {
+        const event = new Event('dataavailable') as Event & {data: Blob};
+        if (this.config.manualEncoderId === 'ogg') {
+          event.data = e.data as Blob;
+        } else {
+          event.data = new Blob(e.data as BlobPart[], {type: this.encoderMimeType});
+        }
+        this._onDataAvailable(event);
+      });
+    }
+
+    return navigator.mediaDevices
+      .getUserMedia(this.config.userMediaConstraints)
+      .then((stream) => {
+        this._startRecordingWithStream(stream);
+      })
+      .catch(() => undefined);
+  }
+
+  setMicGain(newGain: number): void {
+    this.config.micGain = newGain;
+    if (this.audioCtx && this.micGainNode) {
+      this.micGainNode.gain.setValueAtTime(newGain, this.audioCtx.currentTime);
+    }
+  }
+
+  processChunks(): void {
+    if (this.state === 'inactive') {
+      return;
+    }
+    this._dumpChunks();
+  }
+
+  stopRecording(): void {
+    if (this.state === 'inactive') {
+      return;
+    }
+    this.state = 'inactive';
+
+    if (this.usingMediaRecorder) {
+      this.mediaRecorder?.stop();
+      return;
+    }
+
+    this.encoderWorker?.postMessage(['dump', this.audioCtx?.sampleRate]);
+  }
+
+  private _startRecordingWithStream(stream: MediaStream): void {
+    if (!this.audioCtx || !this.micGainNode || !this.outputGainNode || !this.destinationNode) {
+      return;
+    }
+
+    this.micAudioStream = stream;
+    this.inputStreamNode = this.audioCtx.createMediaStreamSource(this.micAudioStream);
+    this.audioCtx = this.inputStreamNode.context as AudioContext;
+
+    this.onGraphSetupWithInputStream?.(this.inputStreamNode);
+
+    this.inputStreamNode.connect(this.micGainNode);
+    this.micGainNode.gain.setValueAtTime(this.config.micGain, this.audioCtx.currentTime);
+
+    let nextNode: AudioNode = this.micGainNode;
+    if (this.dynamicsCompressorNode) {
+      this.micGainNode.connect(this.dynamicsCompressorNode);
+      nextNode = this.dynamicsCompressorNode;
+    }
+
+    this.state = 'recording';
+
+    if (this.processorNode) {
+      nextNode.connect(this.processorNode);
+      this.processorNode.connect(this.outputGainNode);
+      this.processorNode.onaudioprocess = (e: AudioProcessingEvent) => this._onAudioProcess(e);
+    } else {
+      nextNode.connect(this.outputGainNode);
+    }
+
+    if (this.analyserNode) {
+      nextNode.connect(this.analyserNode);
+    }
+
+    this.outputGainNode.connect(this.destinationNode);
+
+    if (this.usingMediaRecorder) {
+      const streamDestination = this.destinationNode as MediaStreamAudioDestinationNode;
+      this.mediaRecorder = new MediaRecorder(streamDestination.stream, {
+        audioBitsPerSecond: this.config.audioBitsPerSecond,
+      });
+      this.mediaRecorder.addEventListener('dataavailable', (evt) => this._onDataAvailable(evt));
+      this.mediaRecorder.addEventListener('error', (evt) => this._onError(evt));
+      this.mediaRecorder.start();
+    } else {
+      this.outputGainNode.gain.setValueAtTime(0, this.audioCtx.currentTime);
+    }
+  }
+
+  private _onAudioProcess(e: AudioProcessingEvent): void {
+    if (this.config.broadcastAudioProcessEvents) {
+      this.em.dispatchEvent(
+        new CustomEvent('onaudioprocess', {
+          detail: {
+            inputBuffer: e.inputBuffer,
+            outputBuffer: e.outputBuffer,
+          },
+        }),
+      );
+    }
+
+    if (!this.usingMediaRecorder && this.state === 'recording' && this.encoderWorker) {
+      if (this.config.broadcastAudioProcessEvents) {
+        this.encoderWorker.postMessage(['encode', e.outputBuffer.getChannelData(0)]);
+      } else {
+        this.encoderWorker.postMessage(['encode', e.inputBuffer.getChannelData(0)]);
+      }
+    }
+  }
+
+  private _dumpChunks(): void {
+    if (this.usingMediaRecorder) {
+      this.mediaRecorder?.requestData();
+      return;
+    }
+
+    this.encoderWorker?.postMessage(['dump', this.audioCtx?.sampleRate]);
+  }
+
+  private _onDataAvailable(evt: BlobEvent | (Event & {data: Blob})): void {
+    this.chunks.push(evt.data);
+    this.chunkType = evt.data.type;
+
+    const blob = new Blob(this.chunks, {type: this.chunkType});
+    const blobUrl = URL.createObjectURL(blob);
+    const recording = {
+      ts: new Date().getTime(),
+      blobUrl,
+      mimeType: blob.type,
+      size: blob.size,
+      blob,
+    };
+
+    this.em.dispatchEvent(new CustomEvent('recording', {detail: {recording}}));
+
+    this.chunks = [];
+
+    if (this.state !== 'inactive') {
+      return;
+    }
+
+    this._cleanup();
+  }
+
+  private _cleanup(): void {
+    this.chunkType = null;
+
+    this.destinationNode?.disconnect();
+    this.destinationNode = null;
+
+    this.outputGainNode?.disconnect();
+    this.outputGainNode = null;
+
+    this.analyserNode?.disconnect();
+    this.analyserNode = null;
+
+    this.processorNode?.disconnect();
+    this.processorNode = null;
+
+    if (this.encoderWorker) {
+      this.encoderWorker.postMessage(['close']);
+      this.encoderWorker = null;
+    }
+
+    this.dynamicsCompressorNode?.disconnect();
+    this.dynamicsCompressorNode = null;
+
+    this.micGainNode?.disconnect();
+    this.micGainNode = null;
+
+    this.inputStreamNode?.disconnect();
+    this.inputStreamNode = null;
+
+    if (this.config.stopTracksAndCloseCtxWhenFinished) {
+      this.micAudioStream?.getTracks().forEach((track) => track.stop());
+      this.micAudioStream = null;
+
+      this.audioCtx?.close();
+      this.audioCtx = null;
+    }
+
+    this.mediaRecorder = null;
+  }
+
+  private _onError(_evt: Event): void {
+    this.em.dispatchEvent(new Event('error'));
+  }
+}
diff --git a/src/app/common/services/services.coffee b/src/app/common/services/services.coffee
deleted file mode 100644
index e88e7a7bdc..0000000000
--- a/src/app/common/services/services.coffee
+++ /dev/null
@@ -1,7 +0,0 @@
-angular.module("doubtfire.common.services", [
-  'doubtfire.common.services.outcome-service'
-  'doubtfire.common.services.analytics'
-  'doubtfire.common.services.dates'
-  'doubtfire.common.services.listener'
-  'doubtfire.common.services.recorder-service'
-])
diff --git a/src/app/common/services/task-submission.service.ts b/src/app/common/services/task-submission.service.ts
index 47249fd975..453b6450bb 100644
--- a/src/app/common/services/task-submission.service.ts
+++ b/src/app/common/services/task-submission.service.ts
@@ -1,15 +1,15 @@
-import {Injectable, Inject} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {
-  Task,
   OverseerAssessment,
   OverseerAssessmentService,
   OverseerImage,
   OverseerImageService,
+  Task,
 } from 'src/app/api/models/doubtfire-model';
 import {AppInjector} from 'src/app/app-injector';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 
 export interface TaskAssessmentResult {
   id?: number;
@@ -27,6 +27,15 @@ export interface TestResult {
   is_successful: boolean;
 }
 
+export interface TaskAssessmentResponse {
+  result: string;
+}
+
+export interface SubmissionResult {
+  label: string;
+  result: string;
+}
+
 export interface DockerImageInfo {
   name: string;
   packages?: string[];
@@ -50,22 +59,25 @@ export class TaskSubmissionService {
     private overseerAssessmentService: OverseerAssessmentService,
   ) {}
 
-  public getLatestTaskAssessment(taskInfo: Task): Observable<any> {
+  public getLatestTaskAssessment(taskInfo: Task): Observable<TaskAssessmentResponse> {
     const url = `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${
       taskInfo.project.id
     }/task_def_id/${taskInfo.definition.id}/submissions/latest`;
-    return this.http.get<any>(url);
+    return this.http.get<TaskAssessmentResponse>(url);
   }
 
   public getLatestSubmissionsTimestamps(taskInfo: Task): Observable<OverseerAssessment[]> {
     return this.overseerAssessmentService.queryForTask(taskInfo);
   }
 
-  public getSubmissionByTimestamp(taskInfo: Task, timestamp: string): Observable<any> {
+  public getSubmissionByTimestamp(
+    taskInfo: Task,
+    timestamp: string,
+  ): Observable<SubmissionResult[]> {
     const url = `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${
       taskInfo.project.id
     }/task_def_id/${taskInfo.definition.id}/submissions/timestamps/${timestamp}`;
-    return this.http.get<any>(url);
+    return this.http.get<SubmissionResult[]>(url);
   }
 
   public getDockerImages(): Observable<OverseerImage[]> {
diff --git a/src/app/common/status-icon/status-icon.component.html b/src/app/common/status-icon/status-icon.component.html
index b87e0eac58..3c37fa7c66 100644
--- a/src/app/common/status-icon/status-icon.component.html
+++ b/src/app/common/status-icon/status-icon.component.html
@@ -1,10 +1,17 @@
 <div
-  [ngClass]="statusClass(status)"
-  matTooltip="{{ statusLabel(status) }}"
+  class="status-chip mx-0.5 flex h-7 min-h-[30px] items-center justify-center rounded-full"
+  matTooltip="{{ statusLabel }}"
   matTooltipPosition="above"
+  role="img"
+  style="font-size: 14px"
+  [attr.aria-label]="statusLabel"
   [matTooltipDisabled]="!showTooltip"
-  class="status-chip rounded-full cursor-pointer pl-6 pr-6 min-h-12 h-12 ml-1 mr-1 flex justify-center items-center"
-  style="font-size: 14px; min-width: 50px"
+  [ngClass]="[statusClass, compact ? 'max-w-[30px] min-w-[30px]' : 'min-w-[50px] px-3']"
 >
-  <span class="text-md self-center justify-self-center"><i class="fa {{ statusIcon(status) }}"></i> </span>
+  <mat-icon
+    aria-hidden="true"
+    class="m-0 scale-75 place-self-center"
+    [ngClass]="{'font-black': resolvedStatus === 'complete'}"
+    >{{ statusIcon }}</mat-icon
+  >
 </div>
diff --git a/src/app/common/status-icon/status-icon.component.scss b/src/app/common/status-icon/status-icon.component.scss
index 169fd24de6..86633746ce 100644
--- a/src/app/common/status-icon/status-icon.component.scss
+++ b/src/app/common/status-icon/status-icon.component.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/mixins/task-status-colors-generator.scss';
+@use 'styles/mixins/task-status-colors-generator' as *;
 
 :host {
   font-size: 1em;
@@ -32,12 +32,18 @@
   &.time-exceeded {
     @include status-icon('time-exceeded');
   }
+  &.assess-in-portfolio {
+    @include status-icon('assess-in-portfolio');
+  }
   &.redo {
     @include status-icon('redo');
   }
   &.discuss {
     @include status-icon('discuss');
   }
+  &.rediscuss {
+    @include status-icon('rediscuss');
+  }
   &.demonstrate {
     @include status-icon('demonstrate');
   }
@@ -47,4 +53,7 @@
   &.fail {
     @include status-icon('fail');
   }
+  &.attention-required {
+    @include status-icon('attention-required');
+  }
 }
diff --git a/src/app/common/status-icon/status-icon.component.spec.ts b/src/app/common/status-icon/status-icon.component.spec.ts
index f09c362828..b013caa4ca 100644
--- a/src/app/common/status-icon/status-icon.component.spec.ts
+++ b/src/app/common/status-icon/status-icon.component.spec.ts
@@ -1,28 +1,72 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { StatusIconComponent } from './status-icon.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {StatusIconComponent} from './status-icon.component';
 
 describe('StatusIconComponent', () => {
   let component: StatusIconComponent;
   let fixture: ComponentFixture<StatusIconComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-
-      TestBed.configureTestingModule({
-        declarations: [StatusIconComponent],
-        providers: [],
-      }).compileComponents();
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [StatusIconComponent],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-  );
+      .overrideComponent(StatusIconComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StatusIconComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 });
+
+describe('StatusIconComponent accessible name (A11Y-COLOUR01)', () => {
+  let fixture: ComponentFixture<StatusIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [StatusIconComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StatusIconComponent);
+  });
+
+  function wrapperEl(): HTMLElement {
+    return fixture.nativeElement.querySelector('.status-chip');
+  }
+
+  it('exposes the status as an accessible name for two different statuses', () => {
+    fixture.componentInstance.status = 'complete';
+    fixture.detectChanges();
+    expect(wrapperEl().getAttribute('role')).toBe('img');
+    expect(wrapperEl().getAttribute('aria-label')).toBe(fixture.componentInstance.statusLabel);
+    expect(wrapperEl().getAttribute('aria-label')).toBe('Complete');
+
+    fixture.componentInstance.status = 'need_help';
+    fixture.detectChanges();
+    expect(wrapperEl().getAttribute('aria-label')).toBe(fixture.componentInstance.statusLabel);
+    expect(wrapperEl().getAttribute('aria-label')).toBe('Need Help');
+  });
+
+  it('hides the icon glyph from assistive tech so the name is never announced twice', () => {
+    fixture.componentInstance.status = 'complete';
+    fixture.detectChanges();
+    const icon = fixture.nativeElement.querySelector('mat-icon');
+    expect(icon.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('still exposes an accessible name for an unrecognised status, via the not_started fallback', () => {
+    // resolvedStatus falls back to 'not_started' for any value outside STATUS_KEYS.
+    fixture.componentInstance.status = 'this-is-not-a-real-status' as never;
+    fixture.detectChanges();
+    expect(wrapperEl().getAttribute('aria-label')).toBe('Not Started');
+    expect(wrapperEl().getAttribute('role')).toBe('img');
+  });
+});
diff --git a/src/app/common/status-icon/status-icon.component.ts b/src/app/common/status-icon/status-icon.component.ts
index 57811fa153..7a9667694a 100644
--- a/src/app/common/status-icon/status-icon.component.ts
+++ b/src/app/common/status-icon/status-icon.component.ts
@@ -1,27 +1,39 @@
-import { Component, Input, Inject, OnInit } from '@angular/core';
-import { TaskStatus, TaskStatusEnum } from 'src/app/api/models/task-status';
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {TaskStatus, TaskStatusEnum} from 'src/app/api/models/task-status';
 
 @Component({
   selector: 'status-icon',
   templateUrl: './status-icon.component.html',
   styleUrls: ['./status-icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class StatusIconComponent implements OnInit {
-  @Input() status: TaskStatusEnum = 'not_started';
+  @Input() status?: TaskStatusEnum = 'not_started';
   @Input() showTooltip: boolean;
-
-  statusIcon: (status: TaskStatusEnum) => string;
-  statusLabel: (status: TaskStatusEnum) => string;
-  statusClass: (status: TaskStatusEnum) => string;
-
-  constructor() {}
+  @Input() compact = false;
 
   ngOnInit(): void {
     if (this.showTooltip == null) {
       this.showTooltip = true;
     }
-    this.statusIcon = (status: TaskStatusEnum) => TaskStatus.STATUS_ICONS.get(status);
-    this.statusLabel = (status: TaskStatusEnum) => TaskStatus.STATUS_LABELS.get(status);
-    this.statusClass = (status: TaskStatusEnum) => TaskStatus.statusClass(status);
+  }
+
+  get statusIcon(): string {
+    return TaskStatus.STATUS_MATERIAL_ICONS.get(this.resolvedStatus) ?? 'pause';
+  }
+
+  get statusLabel(): string {
+    return TaskStatus.STATUS_LABELS.get(this.resolvedStatus) ?? 'Not Started';
+  }
+
+  get statusClass(): string {
+    return TaskStatus.statusClass(this.resolvedStatus);
+  }
+
+  get resolvedStatus(): TaskStatusEnum {
+    return this.status && TaskStatus.STATUS_KEYS.includes(this.status)
+      ? this.status
+      : 'not_started';
   }
 }
diff --git a/src/app/common/submission-files-download/submission-files-download.component.html b/src/app/common/submission-files-download/submission-files-download.component.html
new file mode 100644
index 0000000000..f3348a38bd
--- /dev/null
+++ b/src/app/common/submission-files-download/submission-files-download.component.html
@@ -0,0 +1,26 @@
+<main class="flex min-h-screen flex-col items-center justify-center gap-4">
+  @switch (downloadState) {
+    @case ('downloading') {
+      <mat-spinner diameter="32" />
+      <p class="mat-body-1">Downloading submitted files...</p>
+    }
+
+    @case ('downloaded') {
+      <mat-icon class="size-12 text-5xl" color="primary">check_circle</mat-icon>
+      <p class="mat-body-1">Submitted files downloaded.</p>
+      <button color="primary" mat-raised-button type="button" (click)="download()">
+        <mat-icon>download</mat-icon>
+        Download again
+      </button>
+    }
+
+    @case ('failed') {
+      <mat-icon class="size-12 text-5xl" color="warn">error</mat-icon>
+      <p class="mat-body-1">Could not download submitted files.</p>
+      <button color="primary" mat-raised-button type="button" (click)="download()">
+        <mat-icon>download</mat-icon>
+        Try again
+      </button>
+    }
+  }
+</main>
diff --git a/src/app/common/submission-files-download/submission-files-download.component.ts b/src/app/common/submission-files-download/submission-files-download.component.ts
new file mode 100644
index 0000000000..5d0e75f629
--- /dev/null
+++ b/src/app/common/submission-files-download/submission-files-download.component.ts
@@ -0,0 +1,57 @@
+import {HttpResponse} from '@angular/common/http';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {FileDownloaderService} from '../file-downloader/file-downloader.service';
+
+type DownloadState = 'downloading' | 'downloaded' | 'failed';
+
+@Component({
+  selector: 'f-submission-files-download',
+  templateUrl: './submission-files-download.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class SubmissionFilesDownloadComponent implements OnInit {
+  protected downloadState: DownloadState = 'downloading';
+  private downloadUrl = '';
+
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly constants: DoubtfireConstants,
+    private readonly fileDownloader: FileDownloaderService,
+  ) {}
+
+  public ngOnInit(): void {
+    const projectId = this.route.snapshot.paramMap.get('projectId');
+    const taskDefId = this.route.snapshot.paramMap.get('taskDefId');
+
+    this.downloadUrl = `${this.constants.API_URL}/projects/${projectId}/task_def_id/${taskDefId}/submission_files?as_attachment=true`;
+    this.download();
+  }
+
+  protected download(): void {
+    this.downloadState = 'downloading';
+
+    this.fileDownloader.downloadBlob(
+      this.downloadUrl,
+      (resourceUrl: string, response: HttpResponse<Blob>) => {
+        this.fileDownloader.downloadBlobToFile(
+          resourceUrl,
+          this.filenameFromResponse(response) ?? 'submitted-files.zip',
+        );
+        this.downloadState = 'downloaded';
+      },
+      () => {
+        this.downloadState = 'failed';
+      },
+    );
+  }
+
+  private filenameFromResponse(response: HttpResponse<Blob>): string | null {
+    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+    const matches = filenameRegex.exec(response.headers.get('Content-Disposition'));
+
+    return matches?.[1]?.replace(/['"]/g, '') ?? null;
+  }
+}
diff --git a/src/app/common/success-close/success-close.component.html b/src/app/common/success-close/success-close.component.html
new file mode 100644
index 0000000000..604e15a0d3
--- /dev/null
+++ b/src/app/common/success-close/success-close.component.html
@@ -0,0 +1,2 @@
+<h1>Success</h1>
+<p>Your action was successfully completed. This window will now close.</p>
diff --git a/src/app/common/success-close/success-close.component.scss b/src/app/common/success-close/success-close.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/common/success-close/success-close.component.ts b/src/app/common/success-close/success-close.component.ts
new file mode 100644
index 0000000000..558e7b7ecc
--- /dev/null
+++ b/src/app/common/success-close/success-close.component.ts
@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'f-success-close',
+  templateUrl: 'success-close.component.html',
+  styleUrls: ['success-close.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class SuccessCloseComponent implements OnInit {
+  ngOnInit(): void {
+    setTimeout(() => {
+      window.close();
+    }, 3000);
+  }
+}
diff --git a/src/app/common/task-badge/task-badge.component.css b/src/app/common/task-badge/task-badge.component.css
index f81d9056aa..01f2399341 100644
--- a/src/app/common/task-badge/task-badge.component.css
+++ b/src/app/common/task-badge/task-badge.component.css
@@ -3,6 +3,15 @@
   position: relative;
 }
 
+.task-badge {
+  color: #111827;
+}
+
+.task-badge.task-badge-highlight {
+  background-color: var(--mat-theme-primary, #3939ff) !important;
+  color: #ffffff;
+}
+
 .mat-icon {
   font-size: 50px;
   height: 50px;
diff --git a/src/app/common/task-badge/task-badge.component.html b/src/app/common/task-badge/task-badge.component.html
index 565c943555..c0801d02c6 100644
--- a/src/app/common/task-badge/task-badge.component.html
+++ b/src/app/common/task-badge/task-badge.component.html
@@ -1,5 +1,8 @@
-<div class="aspect-square w-16 rounded-md flex items-center justify-center bg-gray-200">
-  <p class="m-0 text-black">
+<div
+  class="task-badge flex aspect-square w-10 items-center justify-center rounded-md bg-gray-200"
+  [class.task-badge-highlight]="highlight"
+>
+  <p class="m-0">
     {{ abbreviation }}
   </p>
 </div>
diff --git a/src/app/common/task-badge/task-badge.component.ts b/src/app/common/task-badge/task-badge.component.ts
index 01430984c5..9868e4fb80 100644
--- a/src/app/common/task-badge/task-badge.component.ts
+++ b/src/app/common/task-badge/task-badge.component.ts
@@ -1,24 +1,25 @@
-import {Component, Input, type OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {TaskDefinition} from 'src/app/api/models/task-definition';
 
 @Component({
   selector: 'f-task-badge',
   templateUrl: './task-badge.component.html',
   styleUrl: './task-badge.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class FTaskBadgeComponent implements OnInit {
+export class FTaskBadgeComponent {
   @Input() taskDef: TaskDefinition;
   @Input() size = 100;
+  @Input() highlight = false;
 
   lineHeight = 12;
 
   get abbreviation(): string {
     // return the first 3 characters of the task abbreviation
-    return this.taskDef.abbreviation.substring(0, 4);
+    return this.taskDef?.abbreviation.substring(0, 4);
   }
 
-  ngOnInit(): void {}
-
   calculateFontSize(length: number): string {
     const baseFontSize = 1.5; // Base font size in rem
     const maxLength = 3; // Maximum length before font size reduction
diff --git a/src/app/common/theme/theme-demo.component.html b/src/app/common/theme/theme-demo.component.html
new file mode 100644
index 0000000000..68e41631d1
--- /dev/null
+++ b/src/app/common/theme/theme-demo.component.html
@@ -0,0 +1,102 @@
+<div class="theme-demo">
+  <header class="theme-demo__bar">
+    <div>
+      <h1>OnTrack theme foundation</h1>
+      <p class="muted">
+        Every colour below resolves from a <code>--ot-*</code> token off the
+        <code>data-ot-theme</code> marker. Flip the preference — the page repaints, no reload. Each
+        cell is proven in both themes by switching.
+      </p>
+    </div>
+    <div aria-label="Theme preference" class="switch" role="group">
+      @for (opt of preferences; track opt.value) {
+        <button
+          class="switch__btn"
+          type="button"
+          [attr.aria-pressed]="preference() === opt.value"
+          [class.switch__btn--active]="preference() === opt.value"
+          (click)="choose(opt.value)"
+        >
+          <mat-icon>{{ opt.icon }}</mat-icon>
+          {{ opt.label }}
+        </button>
+      }
+    </div>
+  </header>
+
+  <section>
+    <h2>Semantic tokens</h2>
+    <div class="grid">
+      @for (name of semantic; track name) {
+        <div class="swatch">
+          <span class="swatch__chip" [style.background]="'var(--ot-color-' + name + ')'"></span>
+          <code>--ot-color-{{ name }}</code>
+        </div>
+      }
+    </div>
+  </section>
+
+  <section>
+    <h2>Task status</h2>
+    <div class="chips">
+      @for (s of statuses; track s) {
+        <span
+          class="chip"
+          [style.background]="'var(--ot-status-' + s + ')'"
+          [style.color]="'var(--ot-status-' + s + '-on)'"
+        >
+          {{ s }}
+        </span>
+      }
+    </div>
+  </section>
+
+  <section>
+    <h2>Component-state matrix</h2>
+    <p class="muted">Contract section 13. Colour is never the only signal.</p>
+    <div class="matrix">
+      <button class="cell" type="button">Normal</button>
+      <button class="cell cell--hover" type="button">Hover</button>
+      <button class="cell cell--focus" type="button">Focus</button>
+      <button class="cell cell--active" type="button">Active</button>
+      <button aria-current="true" class="cell cell--selected" type="button">Selected</button>
+      <button aria-disabled="true" class="cell cell--disabled" disabled type="button">
+        Disabled
+      </button>
+      <div class="cell cell--success" role="status">
+        <mat-icon>check_circle</mat-icon>
+        <span>Success message</span>
+      </div>
+      <div class="cell cell--warning" role="status">
+        <mat-icon>warning</mat-icon>
+        <span>Warning message</span>
+      </div>
+      <div class="cell cell--error" role="alert">
+        <mat-icon>error</mat-icon>
+        <span>Error message</span>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Surfaces</h2>
+    <div class="surfaces">
+      <div class="card card--surface">
+        <strong>surface</strong>
+        <p class="muted">Body text on a card. Links look <a href="#">like this</a>.</p>
+      </div>
+      <div class="card card--raised">
+        <strong>surface-raised</strong>
+        <p class="muted">Menus and popovers separate by hue in dark mode.</p>
+      </div>
+      <div class="card card--primary">
+        <strong>primary / on-primary</strong>
+        <p>Text on a primary fill, e.g. a raised action button.</p>
+      </div>
+      <div class="card card--inverse">
+        <strong>inverse-surface / inverse-text</strong>
+        <p>A snackbar or tooltip that inverts against the page.</p>
+      </div>
+    </div>
+  </section>
+</div>
diff --git a/src/app/common/theme/theme-demo.component.scss b/src/app/common/theme/theme-demo.component.scss
new file mode 100644
index 0000000000..c1660ecc52
--- /dev/null
+++ b/src/app/common/theme/theme-demo.component.scss
@@ -0,0 +1,235 @@
+// Every colour here is a var(--ot-*); no literal hex/rgb/hsl, so the section 14
+// grep gate stays green and the whole page follows the resolved theme.
+.theme-demo {
+  min-height: 100vh;
+  padding: 2rem;
+  background-color: var(--ot-color-page);
+  color: var(--ot-color-text);
+
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+
+  h2 {
+    margin: 2rem 0 0.75rem;
+    font-size: 1.1rem;
+    border-bottom: 1px solid var(--ot-color-divider);
+    padding-bottom: 0.25rem;
+  }
+
+  .muted {
+    color: var(--ot-color-text-muted);
+  }
+
+  a {
+    color: var(--ot-color-link);
+  }
+
+  code {
+    font-family: monospace;
+    font-size: 0.8rem;
+  }
+}
+
+.theme-demo__bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.switch {
+  display: inline-flex;
+  border: 1px solid var(--ot-color-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.switch__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.8rem;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  background: var(--ot-color-surface);
+  color: var(--ot-color-text);
+
+  &:not(:last-child) {
+    border-right: 1px solid var(--ot-color-divider);
+  }
+
+  &--active {
+    background: var(--ot-color-selected);
+    color: var(--ot-color-selected-text);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ot-color-focus);
+    outline-offset: 2px;
+  }
+
+  mat-icon {
+    font-size: 1.1rem;
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.5rem;
+}
+
+.swatch {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &__chip {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: 1px solid var(--ot-color-border);
+    flex: 0 0 auto;
+  }
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.chip {
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+// Section 13 component-state matrix. Focus, hover, active and selected are
+// deliberately independent, each proven with its second (non-colour) channel.
+.matrix {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 0.75rem;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 56px;
+  padding: 0.75rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  background: var(--ot-color-surface);
+  color: var(--ot-color-text);
+  border: 1px solid var(--ot-color-border);
+
+  // Live states on the Normal cell, so keyboard and pointer both prove out.
+  &:hover {
+    background:
+      linear-gradient(var(--ot-color-hover), var(--ot-color-hover)), var(--ot-color-surface);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ot-color-focus);
+    outline-offset: 2px;
+  }
+
+  // Static reproductions of each state, so every cell is visible without interaction.
+  &--hover {
+    background:
+      linear-gradient(var(--ot-color-hover), var(--ot-color-hover)), var(--ot-color-surface);
+  }
+
+  &--focus {
+    outline: 2px solid var(--ot-color-focus);
+    outline-offset: 2px;
+  }
+
+  &--active {
+    background:
+      linear-gradient(var(--ot-color-hover), var(--ot-color-hover)),
+      linear-gradient(var(--ot-color-hover), var(--ot-color-hover)), var(--ot-color-surface);
+  }
+
+  &--selected {
+    background: var(--ot-color-selected);
+    color: var(--ot-color-selected-text);
+    border-color: var(--ot-color-primary);
+  }
+
+  &--disabled {
+    background: var(--ot-color-disabled-surface);
+    color: var(--ot-color-disabled-text);
+    border-color: var(--ot-color-divider);
+    cursor: not-allowed;
+  }
+
+  &--success {
+    color: var(--ot-color-success);
+    border-color: var(--ot-color-success);
+    cursor: default;
+  }
+
+  &--warning {
+    color: var(--ot-color-warning);
+    border-color: var(--ot-color-warning);
+    cursor: default;
+  }
+
+  &--error {
+    color: var(--ot-color-error);
+    border-color: var(--ot-color-error);
+    cursor: default;
+  }
+
+  mat-icon {
+    font-size: 1.2rem;
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+}
+
+.surfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.card {
+  flex: 1 1 240px;
+  padding: 1rem;
+  border-radius: 10px;
+  border: 1px solid var(--ot-color-border);
+  box-shadow: var(--ot-elevation-1);
+
+  &--surface {
+    background-color: var(--ot-color-surface);
+  }
+
+  &--raised {
+    background-color: var(--ot-color-surface-raised);
+  }
+
+  &--primary {
+    background-color: var(--ot-color-primary);
+    color: var(--ot-color-on-primary);
+    border-color: var(--ot-color-primary);
+  }
+
+  &--inverse {
+    background-color: var(--ot-color-inverse-surface);
+    color: var(--ot-color-inverse-text);
+    border-color: var(--ot-color-inverse-surface);
+  }
+}
diff --git a/src/app/common/theme/theme-demo.component.ts b/src/app/common/theme/theme-demo.component.ts
new file mode 100644
index 0000000000..3f583c4e4c
--- /dev/null
+++ b/src/app/common/theme/theme-demo.component.ts
@@ -0,0 +1,67 @@
+import {Component, inject} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {ThemePreference, ThemeService} from './theme.service';
+
+/**
+ * THM-F01 implementation proof (contract section 13). Every colour on this page
+ * resolves from a --ot-* token off the data-ot-theme marker, so switching the
+ * preference repaints the whole page with no reload. The three-button switch
+ * here is a throwaway proof control that drives ThemeService directly; the
+ * accessible product toggle is THM-F02, deliberately not used here.
+ */
+@Component({
+  selector: 'app-theme-demo',
+  standalone: true,
+  imports: [MatIconModule],
+  templateUrl: './theme-demo.component.html',
+  styleUrl: './theme-demo.component.scss',
+})
+export class ThemeDemoComponent {
+  private readonly theme = inject(ThemeService);
+  readonly preference = this.theme.preference;
+
+  readonly preferences: {value: ThemePreference; label: string; icon: string}[] = [
+    {value: 'light', label: 'Light', icon: 'light_mode'},
+    {value: 'system', label: 'System', icon: 'brightness_auto'},
+    {value: 'dark', label: 'Dark', icon: 'dark_mode'},
+  ];
+
+  readonly semantic = [
+    'page',
+    'surface',
+    'surface-raised',
+    'text',
+    'text-muted',
+    'border',
+    'divider',
+    'focus',
+    'link',
+    'primary',
+    'success',
+    'warning',
+    'error',
+    'info',
+  ];
+
+  readonly statuses = [
+    'ready-for-feedback',
+    'not-started',
+    'working-on-it',
+    'need-help',
+    'fix-and-resubmit',
+    'feedback-exceeded',
+    'redo',
+    'discuss',
+    'rediscuss',
+    'demonstrate',
+    'complete',
+    'fail',
+    'time-exceeded',
+    'assess-in-portfolio',
+    'attention-required',
+  ];
+
+  choose(pref: ThemePreference): void {
+    this.theme.setPreference(pref);
+  }
+}
diff --git a/src/app/common/theme/theme-settings.component.html b/src/app/common/theme/theme-settings.component.html
new file mode 100644
index 0000000000..cf888128f5
--- /dev/null
+++ b/src/app/common/theme/theme-settings.component.html
@@ -0,0 +1,27 @@
+<section
+  aria-labelledby="theme-preference-title"
+  class="theme-preference m-0 flex size-full min-h-full min-w-full flex-col"
+>
+  <h3 id="theme-preference-title">Appearance</h3>
+  <mat-radio-group
+    aria-describedby="theme-preference-description"
+    aria-labelledby="theme-preference-title"
+    class="theme-preference__options flex flex-col gap-1 sm:flex-row sm:gap-4"
+    name="themePreference"
+    [value]="preference()"
+    (change)="onPreferenceChange($event)"
+  >
+    <mat-radio-button color="primary" id="theme-preference-light" value="light"
+      >Light</mat-radio-button
+    >
+    <mat-radio-button color="primary" id="theme-preference-dark" value="dark"
+      >Dark</mat-radio-button
+    >
+    <mat-radio-button color="primary" id="theme-preference-system" value="system"
+      >System</mat-radio-button
+    >
+  </mat-radio-group>
+  <small id="theme-preference-description">
+    System follows your device's Light or Dark setting and updates automatically if it changes.
+  </small>
+</section>
diff --git a/src/app/common/theme/theme-settings.component.spec.ts b/src/app/common/theme/theme-settings.component.spec.ts
new file mode 100644
index 0000000000..037bba888b
--- /dev/null
+++ b/src/app/common/theme/theme-settings.component.spec.ts
@@ -0,0 +1,69 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {signal} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatRadioModule} from '@angular/material/radio';
+import {ThemeSettingsComponent} from './theme-settings.component';
+import {ThemePreference, ThemeService} from './theme.service';
+
+describe('ThemeSettingsComponent interaction (THM-F02)', () => {
+  it('writes the chosen preference through the service, unchanged', () => {
+    const setPreference = vi.fn();
+    const theme = {
+      preference: signal<ThemePreference>('system').asReadonly(),
+      setPreference,
+    } as unknown as ThemeService;
+    TestBed.configureTestingModule({providers: [{provide: ThemeService, useValue: theme}]});
+    const component = TestBed.runInInjectionContext(() => new ThemeSettingsComponent());
+
+    component.onPreferenceChange({value: 'dark'} as never);
+
+    expect(setPreference).toHaveBeenCalledWith('dark');
+  });
+});
+
+describe('ThemeSettingsComponent rendering (THM-F02)', () => {
+  let fixture: ComponentFixture<ThemeSettingsComponent>;
+
+  function render(initial: ThemePreference) {
+    const theme = {
+      preference: signal(initial).asReadonly(),
+      setPreference: vi.fn(),
+    } as unknown as ThemeService;
+
+    TestBed.configureTestingModule({
+      declarations: [ThemeSettingsComponent],
+      imports: [MatRadioModule],
+      providers: [{provide: ThemeService, useValue: theme}],
+    });
+    fixture = TestBed.createComponent(ThemeSettingsComponent);
+    fixture.detectChanges();
+  }
+
+  function radioInput(value: ThemePreference): HTMLInputElement {
+    return fixture.nativeElement.querySelector(`#theme-preference-${value} input`);
+  }
+
+  beforeEach(() => render('dark'));
+
+  it('shows the stored preference as the selected option on load', () => {
+    expect(radioInput('dark').checked).toBe(true);
+    expect(radioInput('light').checked).toBe(false);
+    expect(radioInput('system').checked).toBe(false);
+  });
+
+  it('names all three choices in words, not icons alone', () => {
+    const text: string = fixture.nativeElement.textContent;
+    expect(text).toContain('Light');
+    expect(text).toContain('Dark');
+    expect(text).toContain('System');
+  });
+
+  it('exposes an accessible group label naming the control and a one-line System explanation', () => {
+    const group: HTMLElement = fixture.nativeElement.querySelector('mat-radio-group');
+    expect(group.getAttribute('role')).toBe('radiogroup');
+    expect(group.getAttribute('aria-labelledby')).toBe('theme-preference-title');
+    expect(fixture.nativeElement.textContent).toContain(
+      "System follows your device's Light or Dark setting",
+    );
+  });
+});
diff --git a/src/app/common/theme/theme-settings.component.ts b/src/app/common/theme/theme-settings.component.ts
new file mode 100644
index 0000000000..2428f644fb
--- /dev/null
+++ b/src/app/common/theme/theme-settings.component.ts
@@ -0,0 +1,25 @@
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {MatRadioChange} from '@angular/material/radio';
+import {ThemePreference, ThemeService} from './theme.service';
+
+/**
+ * The THM-F02 Light/Dark/System control: three explicit, named, keyboard- and
+ * screen-reader-accessible choices, backed directly by the THM-F01 service. It
+ * only ever reads `preference` (the stored choice) and writes through
+ * `setPreference`; persistence, account sync and storage-failure fallback all
+ * live in the service, not here.
+ */
+@Component({
+  selector: 'f-theme-settings',
+  templateUrl: './theme-settings.component.html',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThemeSettingsComponent {
+  private readonly theme = inject(ThemeService);
+  readonly preference = this.theme.preference;
+
+  onPreferenceChange(change: MatRadioChange): void {
+    this.theme.setPreference(change.value as ThemePreference);
+  }
+}
diff --git a/src/app/common/theme/theme-toggle.component.html b/src/app/common/theme/theme-toggle.component.html
new file mode 100644
index 0000000000..601449455c
--- /dev/null
+++ b/src/app/common/theme/theme-toggle.component.html
@@ -0,0 +1,9 @@
+<button
+  class="theme-toggle"
+  mat-icon-button
+  [attr.aria-label]="isDark() ? 'Switch to light theme' : 'Switch to dark theme'"
+  [matTooltip]="isDark() ? 'Light mode' : 'Dark mode'"
+  (click)="toggle()"
+>
+  <mat-icon>{{ isDark() ? 'light_mode' : 'dark_mode' }}</mat-icon>
+</button>
diff --git a/src/app/common/theme/theme-toggle.component.scss b/src/app/common/theme/theme-toggle.component.scss
new file mode 100644
index 0000000000..2cd195f083
--- /dev/null
+++ b/src/app/common/theme/theme-toggle.component.scss
@@ -0,0 +1,5 @@
+.theme-toggle {
+  mat-icon {
+    color: var(--ot-color-text);
+  }
+}
diff --git a/src/app/common/theme/theme-toggle.component.spec.ts b/src/app/common/theme/theme-toggle.component.spec.ts
new file mode 100644
index 0000000000..fed845fc65
--- /dev/null
+++ b/src/app/common/theme/theme-toggle.component.spec.ts
@@ -0,0 +1,30 @@
+import {describe, expect, it, vi} from 'vitest';
+import {signal} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {ThemeToggleComponent} from './theme-toggle.component';
+import {ThemeService} from './theme.service';
+
+// Method-level, no rendering: the component reads isDark and writes the opposite
+// preference. Constructed in an injection context so its inject(ThemeService)
+// resolves the stub, without pulling in Material rendering.
+describe('ThemeToggleComponent', () => {
+  function make(isDark: boolean) {
+    const setPreference = vi.fn();
+    const theme = {isDark: signal(isDark), setPreference} as unknown as ThemeService;
+    TestBed.configureTestingModule({providers: [{provide: ThemeService, useValue: theme}]});
+    const component = TestBed.runInInjectionContext(() => new ThemeToggleComponent());
+    return {component, setPreference};
+  }
+
+  it('switches to dark when the resolved theme is light', () => {
+    const {component, setPreference} = make(false);
+    component.toggle();
+    expect(setPreference).toHaveBeenCalledWith('dark');
+  });
+
+  it('switches to light when the resolved theme is dark', () => {
+    const {component, setPreference} = make(true);
+    component.toggle();
+    expect(setPreference).toHaveBeenCalledWith('light');
+  });
+});
diff --git a/src/app/common/theme/theme-toggle.component.ts b/src/app/common/theme/theme-toggle.component.ts
new file mode 100644
index 0000000000..712b737659
--- /dev/null
+++ b/src/app/common/theme/theme-toggle.component.ts
@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ThemeService} from './theme.service';
+
+/**
+ * Single-button theme control. Flips between light and dark from whatever is on
+ * screen now: it reads the resolved theme for the icon (a sun while dark, a moon
+ * while light) and writes the opposite as an explicit preference.
+ */
+@Component({
+  selector: 'app-theme-toggle',
+  standalone: true,
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule],
+  templateUrl: './theme-toggle.component.html',
+  styleUrl: './theme-toggle.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThemeToggleComponent {
+  private readonly theme = inject(ThemeService);
+  readonly isDark = this.theme.isDark;
+
+  toggle(): void {
+    this.theme.setPreference(this.isDark() ? 'light' : 'dark');
+  }
+}
diff --git a/src/app/common/theme/theme.service.spec.ts b/src/app/common/theme/theme.service.spec.ts
new file mode 100644
index 0000000000..f74cee084f
--- /dev/null
+++ b/src/app/common/theme/theme.service.spec.ts
@@ -0,0 +1,461 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {of, throwError} from 'rxjs';
+import {
+  THEME_ACCOUNT_ID_STORAGE_KEY,
+  THEME_STORAGE_KEY,
+  THEME_UPDATED_AT_STORAGE_KEY,
+  ThemeService,
+} from './theme.service';
+
+/**
+ * A real in-memory Storage, installed fresh per test. This repo's jsdom does not
+ * provide localStorage on its own, so the spec owns its store rather than relying
+ * on another spec having defined one first in the shared worker.
+ */
+function installLocalStorage(): void {
+  const map: Map<string, string> = new Map();
+  const store: Storage = {
+    get length() {
+      return map.size;
+    },
+    clear: () => map.clear(),
+    getItem: (k: string) => (map.has(k) ? (map.get(k) as string) : null),
+    key: (i: number) => Array.from(map.keys())[i] ?? null,
+    removeItem: (k: string) => {
+      map.delete(k);
+    },
+    setItem: (k: string, v: string) => {
+      map.set(k, String(v));
+    },
+  };
+  Object.defineProperty(window, 'localStorage', {value: store, configurable: true, writable: true});
+}
+
+/** Minimal MediaQueryList stub. Modern and legacy listener APIs share the same
+ * callback set so this stub remains compatible with Angular CDK consumers, and
+ * dispatch() simulates a live OS appearance change. */
+function stubMatchMedia(matches: boolean) {
+  const listeners: Set<() => void> = new Set();
+  const mql = {
+    matches,
+    media: '(prefers-color-scheme: dark)',
+    addEventListener: vi.fn((_: string, cb: () => void) => listeners.add(cb)),
+    removeEventListener: vi.fn((_: string, cb: () => void) => listeners.delete(cb)),
+    addListener: vi.fn((cb: () => void) => listeners.add(cb)),
+    removeListener: vi.fn((cb: () => void) => listeners.delete(cb)),
+    dispatch: () => listeners.forEach((cb) => cb()),
+  };
+  (window as unknown as {matchMedia: unknown}).matchMedia = () => mql;
+  return mql;
+}
+
+function inject(): ThemeService {
+  return TestBed.inject(ThemeService);
+}
+
+function marker(): string | null {
+  return document.documentElement.getAttribute('data-ot-theme');
+}
+
+describe('ThemeService', () => {
+  beforeEach(() => {
+    installLocalStorage();
+    document.documentElement.removeAttribute('data-ot-theme');
+    document.documentElement.style.colorScheme = '';
+    stubMatchMedia(false);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('is created', () => {
+    expect(inject()).toBeTruthy();
+  });
+
+  it('resolves to system (not a hard dark) when the key is missing', () => {
+    const svc = inject();
+    expect(svc.preference()).toBe('system');
+    expect(svc.resolved()).toBe('light');
+  });
+
+  it('falls back to system for every non-allowlisted value and never rewrites it', () => {
+    // Contract section 14 item 3, verbatim inputs.
+    for (const bad of ['Dark', 'midnight', '', '{}', '<script>']) {
+      localStorage.setItem(THEME_STORAGE_KEY, bad);
+      TestBed.resetTestingModule();
+      const svc = inject();
+      expect(svc.preference(), `input ${JSON.stringify(bad)}`).toBe('system');
+      expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe(bad); // untouched
+    }
+  });
+
+  it('resolves to system without throwing when getItem throws', () => {
+    vi.spyOn(window.localStorage, 'getItem').mockImplementation(() => {
+      throw new Error('blocked');
+    });
+    const svc = inject();
+    expect(svc.preference()).toBe('system');
+    expect(marker()).toBe('light');
+  });
+
+  it('keeps the in-memory preference when setItem throws', () => {
+    vi.spyOn(window.localStorage, 'setItem').mockImplementation(() => {
+      throw new Error('quota');
+    });
+    const svc = inject();
+    expect(() => svc.setPreference('dark')).not.toThrow();
+    expect(svc.preference()).toBe('dark');
+    expect(marker()).toBe('dark');
+  });
+
+  it('resolves a stored dark preference to dark at construction', () => {
+    localStorage.setItem(THEME_STORAGE_KEY, 'dark');
+    const svc = inject();
+    expect(svc.preference()).toBe('dark');
+    expect(svc.resolved()).toBe('dark');
+    expect(marker()).toBe('dark');
+  });
+
+  it('system + OS dark resolves dark; system + OS light resolves light', () => {
+    stubMatchMedia(true);
+    localStorage.setItem(THEME_STORAGE_KEY, 'system');
+    expect(inject().resolved()).toBe('dark');
+
+    TestBed.resetTestingModule();
+    stubMatchMedia(false);
+    expect(inject().resolved()).toBe('light');
+  });
+
+  it('resolves to light without throwing when matchMedia is unavailable', () => {
+    (window as unknown as {matchMedia: unknown}).matchMedia = undefined;
+    const svc = inject();
+    expect(svc.resolved()).toBe('light');
+    expect(marker()).toBe('light');
+  });
+
+  it('an explicit choice ignores the OS', () => {
+    stubMatchMedia(true); // OS is dark
+    localStorage.setItem(THEME_STORAGE_KEY, 'light');
+    expect(inject().resolved()).toBe('light');
+  });
+
+  it('repaints on a live OS change while stored is system, and only then', () => {
+    const mql = stubMatchMedia(false);
+    localStorage.setItem(THEME_STORAGE_KEY, 'system');
+    const svc = inject();
+    expect(svc.resolved()).toBe('light');
+
+    mql.matches = true;
+    mql.dispatch();
+    expect(svc.resolved()).toBe('dark');
+
+    // A pinned preference must not follow the OS, and must not even repaint.
+    // Spy after pinning so the guard's skip is observable, not just the value:
+    // without the `preference === 'system'` guard this fails on the marker write.
+    svc.setPreference('light');
+    const setAttr = vi.spyOn(document.documentElement, 'setAttribute');
+    mql.matches = false;
+    mql.dispatch();
+    mql.matches = true;
+    mql.dispatch();
+    expect(svc.resolved()).toBe('light');
+    expect(setAttr).not.toHaveBeenCalledWith('data-ot-theme', expect.anything());
+  });
+
+  it('registers the change listener once and removes it on destroy', () => {
+    const mql = stubMatchMedia(false);
+    inject();
+    expect(mql.addEventListener).toHaveBeenCalledTimes(1);
+    expect(mql.addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+
+    TestBed.resetTestingModule(); // tears down the root injector -> DestroyRef fires
+    expect(mql.removeEventListener).toHaveBeenCalledTimes(1);
+    expect(mql.removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+  });
+
+  it('ignores an invalid setPreference value and writes nothing', () => {
+    const svc = inject();
+    svc.setPreference('midnight' as never); // a JS caller bypassing the type
+    expect(svc.preference()).toBe('system');
+    expect(localStorage.getItem(THEME_STORAGE_KEY)).toBeNull();
+  });
+
+  it('isDark and explicit resolve() follow the resolved theme', () => {
+    stubMatchMedia(true); // OS reports dark
+    const svc = inject();
+    expect(svc.resolve('system')).toBe('dark');
+    expect(svc.resolve('light')).toBe('light');
+    expect(svc.resolve('dark')).toBe('dark');
+    svc.setPreference('dark');
+    expect(svc.isDark()).toBe(true);
+    svc.setPreference('light');
+    expect(svc.isDark()).toBe(false);
+  });
+
+  it('writes only the resolved value to the marker, never "system"', () => {
+    localStorage.setItem(THEME_STORAGE_KEY, 'system');
+    inject();
+    expect(['light', 'dark']).toContain(marker());
+    expect(marker()).not.toBe('system');
+  });
+
+  it('tracks document colorScheme with the resolved theme', () => {
+    const svc = inject();
+    svc.setPreference('dark');
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+    svc.setPreference('light');
+    expect(document.documentElement.style.colorScheme).toBe('light');
+  });
+
+  it('setPreference persists the choice and moves the marker', () => {
+    const svc = inject();
+    svc.setPreference('dark');
+    expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
+    expect(marker()).toBe('dark');
+    svc.setPreference('light');
+    expect(marker()).toBe('light');
+  });
+
+  it('writes nothing when both local and account preferences are absent', () => {
+    const save = vi.fn();
+    const svc = inject();
+
+    svc.connectAccount(1, null, null, save);
+
+    expect(svc.preference()).toBe('system');
+    expect(localStorage.getItem(THEME_STORAGE_KEY)).toBeNull();
+    expect(localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY)).toBeNull();
+    expect(localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY)).toBeNull();
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  it('adopts a present account preference when the local preference is absent', () => {
+    const save = vi.fn();
+    const svc = inject();
+
+    svc.connectAccount(1, 'dark', '2026-08-20T01:02:03Z', save);
+
+    expect(svc.preference()).toBe('dark');
+    expect(marker()).toBe('dark');
+    expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
+    expect(localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY)).toBe('2026-08-20T01:02:03.000Z');
+    expect(localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY)).toBe('1');
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  it('keeps and uploads a present local preference when the account is absent', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-09-01T00:00:00Z'));
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, 'light');
+      const save = vi.fn(() => of({preference: 'light', updatedAt: '2026-09-01T00:00:00Z'}));
+      const svc = inject();
+
+      svc.connectAccount(1, null, null, save);
+
+      expect(svc.preference()).toBe('light');
+      expect(save).toHaveBeenCalledOnce();
+      expect(save).toHaveBeenCalledWith('light');
+      expect(localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY)).toBe('2026-09-01T00:00:00.000Z');
+      expect(localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY)).toBe('1');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('uploads the newer local preference when both stores are present', () => {
+    localStorage.setItem(THEME_STORAGE_KEY, 'light');
+    localStorage.setItem(THEME_UPDATED_AT_STORAGE_KEY, '2026-08-30T12:00:00Z');
+    const save = vi.fn(() => of({preference: 'light', updatedAt: '2026-09-01T02:00:00Z'}));
+    const svc = inject();
+
+    svc.connectAccount(1, 'dark', '2026-08-29T12:00:00Z', save);
+
+    expect(save).toHaveBeenCalledWith('light');
+    expect(svc.preference()).toBe('light');
+    expect(localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY)).toBe('2026-09-01T02:00:00.000Z');
+  });
+
+  it('converges a newer local timestamp even when both preference values match', () => {
+    localStorage.setItem(THEME_STORAGE_KEY, 'dark');
+    localStorage.setItem(THEME_UPDATED_AT_STORAGE_KEY, '2026-08-30T12:00:00Z');
+    const save = vi.fn(() => of({preference: 'dark', updatedAt: '2026-09-01T02:00:00Z'}));
+    const svc = inject();
+
+    svc.connectAccount(1, 'dark', '2026-08-29T12:00:00Z', save);
+
+    expect(save).toHaveBeenCalledWith('dark');
+    expect(localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY)).toBe('2026-09-01T02:00:00.000Z');
+  });
+
+  it('takes the account preference when both timestamps tie', () => {
+    localStorage.setItem(THEME_STORAGE_KEY, 'light');
+    localStorage.setItem(THEME_UPDATED_AT_STORAGE_KEY, '2026-08-30T12:00:00Z');
+    const save = vi.fn();
+    const svc = inject();
+
+    svc.connectAccount(1, 'dark', '2026-08-30T12:00:00Z', save);
+
+    expect(save).not.toHaveBeenCalled();
+    expect(svc.preference()).toBe('dark');
+    expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
+  });
+
+  it('takes a present account value when the local timestamp is invalid', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-09-01T00:00:00Z'));
+    try {
+      for (const timestamp of [
+        null,
+        'not-a-date',
+        '08/31/2026', // Date.parse accepts it, but the account contract does not
+        '2026-02-30T12:00:00Z',
+        '2026-09-02T00:00:00Z',
+      ]) {
+        installLocalStorage();
+        localStorage.setItem(THEME_STORAGE_KEY, 'light');
+        if (timestamp !== null) {
+          localStorage.setItem(THEME_UPDATED_AT_STORAGE_KEY, timestamp);
+        }
+        TestBed.resetTestingModule();
+        const svc = inject();
+
+        svc.connectAccount(1, 'dark', '2026-08-30T12:00:00Z', vi.fn());
+
+        expect(svc.preference(), `timestamp ${String(timestamp)}`).toBe('dark');
+      }
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('debounces real choices and sends the stored preference, not the resolved theme', () => {
+    vi.useFakeTimers();
+    try {
+      stubMatchMedia(true); // system resolves dark, but the account must receive system
+      const save = vi.fn((preference) => of({preference, updatedAt: '2026-09-01T01:00:00Z'}));
+      const svc = inject();
+      svc.connectAccount(1, 'system', '2026-08-30T12:00:00Z', save);
+
+      svc.setPreference('light');
+      svc.setPreference('dark');
+      svc.setPreference('system');
+      vi.advanceTimersByTime(300);
+
+      expect(save).toHaveBeenCalledOnce();
+      expect(save).toHaveBeenCalledWith('system');
+      expect(svc.resolved()).toBe('dark');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('keeps the local choice silently when the account write fails', () => {
+    vi.useFakeTimers();
+    try {
+      const save = vi.fn(() => throwError(() => new Error('offline')));
+      const svc = inject();
+      svc.connectAccount(1, 'light', '2026-08-30T12:00:00Z', save);
+
+      expect(() => {
+        svc.setPreference('dark');
+        vi.advanceTimersByTime(300);
+      }).not.toThrow();
+      expect(svc.preference()).toBe('dark');
+      expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('disconnects without clearing local theme state and cancels a pending write', () => {
+    vi.useFakeTimers();
+    try {
+      const save = vi.fn();
+      const svc = inject();
+      svc.connectAccount(1, 'light', '2026-08-30T12:00:00Z', save);
+      svc.setPreference('dark');
+
+      svc.disconnectAccount();
+      vi.advanceTimersByTime(300);
+
+      expect(save).not.toHaveBeenCalled();
+      expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
+      expect(localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY)).not.toBeNull();
+      expect(localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY)).toBe('1');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('takes the incoming account preference instead of uploading another account choice', () => {
+    const saveFirstAccount = vi.fn();
+    const saveSecondAccount = vi.fn();
+    const svc = inject();
+
+    svc.connectAccount(1, 'light', '2026-09-01T00:00:00Z', saveFirstAccount);
+    svc.disconnectAccount();
+    svc.connectAccount(2, 'dark', '2026-08-01T00:00:00Z', saveSecondAccount);
+
+    expect(saveFirstAccount).not.toHaveBeenCalled();
+    expect(saveSecondAccount).not.toHaveBeenCalled();
+    expect(svc.preference()).toBe('dark');
+    expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
+    expect(localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY)).toBe('2026-08-01T00:00:00.000Z');
+    expect(localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY)).toBe('2');
+  });
+
+  it('keeps another account theme for first paint without inventing a choice for an empty account', () => {
+    vi.useFakeTimers();
+    try {
+      const saveFirstAccount = vi.fn();
+      const saveSecondAccount = vi.fn((preference) =>
+        of({preference, updatedAt: '2026-09-01T01:00:00Z'}),
+      );
+      const svc = inject();
+
+      svc.connectAccount(1, 'light', '2026-08-30T12:00:00Z', saveFirstAccount);
+      svc.disconnectAccount();
+      svc.connectAccount(2, null, null, saveSecondAccount);
+
+      expect(svc.preference()).toBe('light');
+      expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('light');
+      expect(localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY)).toBe('1');
+      expect(saveSecondAccount).not.toHaveBeenCalled();
+
+      // Even choosing the same visible value is a real choice by account 2: it
+      // claims the retained presentation state and may now be synced.
+      svc.setPreference('light');
+      vi.advanceTimersByTime(300);
+      expect(saveSecondAccount).toHaveBeenCalledOnce();
+      expect(saveSecondAccount).toHaveBeenCalledWith('light');
+      expect(localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY)).toBe('2');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('an OS appearance change never writes to storage, so it cannot reach the server', () => {
+    // The only user-driven write is setPreference. The System listener repaints
+    // and stops, so an OS flip twice a day cannot turn into a persisted write.
+    const mql = stubMatchMedia(false);
+    localStorage.setItem(THEME_STORAGE_KEY, 'system');
+    const svc = inject();
+    const setItem = vi.spyOn(window.localStorage, 'setItem');
+
+    mql.matches = true;
+    mql.dispatch();
+
+    expect(svc.resolved()).toBe('dark');
+    expect(setItem).not.toHaveBeenCalled();
+  });
+
+  // The no-flash script (THM-F04) duplicates this literal because it runs before
+  // any module loads. Pin the value here; THM-F04's drift test asserts the two
+  // are byte-identical.
+  it('exposes the agreed storage key literal', () => {
+    expect(THEME_STORAGE_KEY).toBe('ontrack.theme.preference');
+  });
+});
diff --git a/src/app/common/theme/theme.service.ts b/src/app/common/theme/theme.service.ts
new file mode 100644
index 0000000000..023ba96c75
--- /dev/null
+++ b/src/app/common/theme/theme.service.ts
@@ -0,0 +1,427 @@
+import {DestroyRef, Injectable, computed, inject, signal} from '@angular/core';
+import {Observable, Subscription} from 'rxjs';
+
+/**
+ * OnTrack theme foundation (THM-F01). Implements the state model fixed in
+ * docs/theme/THEME-CONTRACT.md sections 4, 6 and 11.
+ *
+ * Two vocabularies, never mixed:
+ *   - preference: what the user chose        -> 'light' | 'dark' | 'system'
+ *   - resolved:   what is on screen right now -> 'light' | 'dark'
+ * 'system' is an instruction, never a resolved value.
+ *
+ * This service owns the token layer's marker and the resolved-theme signal. The
+ * no-flash <head> script (THM-F04), the Tailwind dark variant (THM-F03), the
+ * accessible toggle (THM-F02) and the browser theme-color chrome (THM-W01) are
+ * deliberately out of scope here.
+ */
+
+export type ThemePreference = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+
+const THEME_PREFERENCES: readonly ThemePreference[] = ['light', 'dark', 'system'] as const;
+
+/** Duplicated as a literal in the THM-F04 no-flash script; THM-T01 asserts they match. */
+export const THEME_STORAGE_KEY = 'ontrack.theme.preference';
+export const THEME_UPDATED_AT_STORAGE_KEY = 'ontrack.theme.preference.updatedAt';
+export const THEME_ACCOUNT_ID_STORAGE_KEY = 'ontrack.theme.preference.accountId';
+
+export interface AccountThemePreference {
+  preference: unknown;
+  updatedAt: unknown;
+}
+
+type SaveAccountThemePreference = (
+  preference: ThemePreference,
+) => Observable<AccountThemePreference>;
+
+const ACCOUNT_WRITE_DEBOUNCE_MS = 300;
+const ISO_8601_TIMESTAMP =
+  /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.\d{1,9})?(?:Z|[+-](\d{2}):(\d{2}))$/;
+
+export function isThemePreference(v: unknown): v is ThemePreference {
+  return typeof v === 'string' && (THEME_PREFERENCES as readonly string[]).includes(v);
+}
+
+/** Reads the stored preference. Any junk, or storage throwing, resolves to 'system'. */
+export function readThemePreference(): ThemePreference {
+  try {
+    const raw = localStorage.getItem(THEME_STORAGE_KEY);
+    return isThemePreference(raw) ? raw : 'system';
+  } catch {
+    return 'system';
+  }
+}
+
+@Injectable({providedIn: 'root'})
+export class ThemeService {
+  private readonly _preference = signal<ThemePreference>(readThemePreference());
+  private readonly _resolved = signal<ResolvedTheme>('light');
+
+  /** The stored choice. The toggle (THM-F02) binds to this so it can highlight 'system'. */
+  readonly preference = this._preference.asReadonly();
+  /** What is actually painted. Anything that needs the on-screen theme reads this. */
+  readonly resolved = this._resolved.asReadonly();
+  readonly isDark = computed(() => this._resolved() === 'dark');
+
+  private readonly query: MediaQueryList | null = this.mediaQuery();
+  private saveAccountPreference: SaveAccountThemePreference | null = null;
+  private accountWriteTimer: ReturnType<typeof setTimeout> | null = null;
+  private activeAccountWrite: Subscription | null = null;
+  private accountConnectionGeneration = 0;
+  private activeAccountId: string | null = null;
+
+  // Held as a stable reference so the same listener can be removed on destroy.
+  // One listener for the whole app; it repaints only while the stored choice is
+  // 'system'. Contract section 11, item 11.
+  private readonly onSystemChange = (): void => {
+    if (this._preference() === 'system') {
+      this.applyResolved();
+    }
+  };
+
+  constructor() {
+    this.query?.addEventListener('change', this.onSystemChange);
+    inject(DestroyRef).onDestroy(() => {
+      this.query?.removeEventListener('change', this.onSystemChange);
+      this.disconnectAccount();
+    });
+    this.applyResolved();
+  }
+
+  /**
+   * Record a new preference. The type gate means an invalid value cannot be
+   * stored through the service at all. A storage failure leaves the in-memory
+   * preference applied and does not throw.
+   *
+   * This is the only user-driven write. If a path is ever added that pushes the
+   * preference back to the server, it belongs here and nowhere else. The OS
+   * change listener (onSystemChange) must never write anywhere: an appearance
+   * flip while 'system' is selected is the operating system's decision, not the
+   * user's, so it repaints and stops there.
+   */
+  setPreference(pref: ThemePreference): void {
+    if (!isThemePreference(pref)) {
+      return;
+    }
+    const localAccountId = this.readLocalAccountId();
+    const ownershipMatches =
+      this.activeAccountId === null
+        ? localAccountId === null
+        : localAccountId === this.activeAccountId;
+    if (this.readLocalPreference() === pref && ownershipMatches) {
+      return;
+    }
+
+    const updatedAt = new Date().toISOString();
+    this.commitPreference(pref, updatedAt, this.activeAccountId);
+    this.queueAccountWrite(pref);
+  }
+
+  /**
+   * Reconcile the signed-in account and this device using the phase-two table in
+   * contract section 6.2. Presence is decided before timestamps, then a newer
+   * timestamp wins when both stores hold a real preference (ties go to account).
+   * The save callback keeps this service independent of authentication and API
+   * implementation details while still making it the only owner of theme writes.
+   */
+  connectAccount(
+    accountId: number,
+    accountPreference: unknown,
+    accountUpdatedAt: unknown,
+    save: SaveAccountThemePreference,
+  ): void {
+    this.disconnectAccount();
+    const accountStorageId = this.normaliseAccountId(accountId);
+    if (accountStorageId === null) {
+      return;
+    }
+
+    this.activeAccountId = accountStorageId;
+    this.saveAccountPreference = save;
+    const generation = this.accountConnectionGeneration;
+
+    const localPreference = this.readLocalPreference();
+    const localAccountId = this.readLocalAccountId();
+    const accountPreferenceIsValid = isThemePreference(accountPreference);
+    const belongsToAnotherAccount = localAccountId !== null && localAccountId !== accountStorageId;
+
+    // The theme itself is deliberately retained at sign-out for first paint,
+    // but its sync provenance is account-scoped. A retained choice from account
+    // A may remain on screen while B signs in; it must never be uploaded to B.
+    if (belongsToAnotherAccount) {
+      if (accountPreferenceIsValid) {
+        this.commitPreference(
+          accountPreference,
+          this.normaliseAccountTimestamp(accountUpdatedAt),
+          accountStorageId,
+        );
+      }
+      return;
+    }
+
+    // New device and new account: follow system without inventing a choice.
+    if (localPreference === null && !accountPreferenceIsValid) {
+      return;
+    }
+
+    // A new device adopts the account and becomes flash-free next boot.
+    if (localPreference === null && accountPreferenceIsValid) {
+      this.commitPreference(
+        accountPreference,
+        this.normaliseAccountTimestamp(accountUpdatedAt),
+        accountStorageId,
+      );
+      return;
+    }
+
+    // Day-one migration: a real local choice beats an empty account even when
+    // phase one never wrote a timestamp. Stamp the honest upload time now.
+    if (localPreference !== null && !accountPreferenceIsValid) {
+      this.commitPreference(localPreference, new Date().toISOString(), accountStorageId);
+      this.persistAccount(localPreference, generation);
+      return;
+    }
+
+    const localUpdatedAt = this.readLocalTimestamp();
+    const accountTimestamp = this.normaliseAccountTimestamp(accountUpdatedAt);
+    const accountUpdatedAtMs = accountTimestamp === null ? null : Date.parse(accountTimestamp);
+
+    // A missing, malformed, or future local timestamp is older. An account
+    // timestamp that is absent is also not sufficient evidence to override the
+    // account value, so the tie/default remains account-side.
+    const localWins =
+      localUpdatedAt !== null && accountUpdatedAtMs !== null && localUpdatedAt > accountUpdatedAtMs;
+
+    if (localWins) {
+      this.writeLocalAccountId(accountStorageId);
+      this.persistAccount(localPreference as ThemePreference, generation);
+    } else {
+      this.commitPreference(
+        accountPreference as ThemePreference,
+        accountTimestamp,
+        accountStorageId,
+      );
+    }
+  }
+
+  /** Stop account writes without clearing presentation state from this device. */
+  disconnectAccount(): void {
+    this.accountConnectionGeneration += 1;
+    this.activeAccountId = null;
+    this.saveAccountPreference = null;
+    if (this.accountWriteTimer !== null) {
+      clearTimeout(this.accountWriteTimer);
+      this.accountWriteTimer = null;
+    }
+    this.activeAccountWrite?.unsubscribe();
+    this.activeAccountWrite = null;
+  }
+
+  /** Store a validated preference, optional timestamp, and repaint. */
+  private commitPreference(
+    pref: ThemePreference,
+    updatedAt?: string | null,
+    accountId?: string | null,
+  ): void {
+    this._preference.set(pref);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, pref);
+      if (updatedAt === null) {
+        localStorage.removeItem(THEME_UPDATED_AT_STORAGE_KEY);
+      } else if (updatedAt !== undefined) {
+        localStorage.setItem(THEME_UPDATED_AT_STORAGE_KEY, updatedAt);
+      }
+      if (accountId === null) {
+        localStorage.removeItem(THEME_ACCOUNT_ID_STORAGE_KEY);
+      } else if (accountId !== undefined) {
+        localStorage.setItem(THEME_ACCOUNT_ID_STORAGE_KEY, accountId);
+      }
+    } catch {
+      /* storage blocked; in-memory preference still applies */
+    }
+    this.applyResolved();
+  }
+
+  private queueAccountWrite(pref: ThemePreference): void {
+    if (this.saveAccountPreference === null) {
+      return;
+    }
+    if (this.accountWriteTimer !== null) {
+      clearTimeout(this.accountWriteTimer);
+    }
+    this.activeAccountWrite?.unsubscribe();
+    this.activeAccountWrite = null;
+    const generation = this.accountConnectionGeneration;
+    this.accountWriteTimer = setTimeout(() => {
+      this.accountWriteTimer = null;
+      this.persistAccount(pref, generation);
+    }, ACCOUNT_WRITE_DEBOUNCE_MS);
+  }
+
+  private persistAccount(pref: ThemePreference, generation: number): void {
+    const save = this.saveAccountPreference;
+    if (save === null || generation !== this.accountConnectionGeneration) {
+      return;
+    }
+
+    this.activeAccountWrite?.unsubscribe();
+    this.activeAccountWrite = save(pref).subscribe({
+      next: (account) => {
+        if (
+          generation !== this.accountConnectionGeneration ||
+          this._preference() !== pref ||
+          account.preference !== pref
+        ) {
+          return;
+        }
+        const updatedAt = this.normaliseAccountTimestamp(account.updatedAt);
+        if (updatedAt !== null) {
+          try {
+            localStorage.setItem(THEME_UPDATED_AT_STORAGE_KEY, updatedAt);
+            if (this.activeAccountId !== null) {
+              localStorage.setItem(THEME_ACCOUNT_ID_STORAGE_KEY, this.activeAccountId);
+            }
+          } catch {
+            /* storage blocked; the local preference remains applied */
+          }
+        }
+      },
+      error: () => {
+        // Presentation state is deliberately local-first. Offline/server errors
+        // are silent and retried by reconciliation on the next sign-in.
+      },
+    });
+  }
+
+  private readLocalPreference(): ThemePreference | null {
+    try {
+      const raw = localStorage.getItem(THEME_STORAGE_KEY);
+      return isThemePreference(raw) ? raw : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private readLocalAccountId(): string | null {
+    try {
+      const raw = localStorage.getItem(THEME_ACCOUNT_ID_STORAGE_KEY);
+      return raw !== null && raw.length > 0 ? raw : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private writeLocalAccountId(accountId: string): void {
+    try {
+      localStorage.setItem(THEME_ACCOUNT_ID_STORAGE_KEY, accountId);
+    } catch {
+      /* storage blocked; the in-memory preference remains applied */
+    }
+  }
+
+  private normaliseAccountId(accountId: number): string | null {
+    return Number.isSafeInteger(accountId) && accountId > 0 ? String(accountId) : null;
+  }
+
+  /** A malformed or future device timestamp cannot win a conflict. */
+  private readLocalTimestamp(): number | null {
+    try {
+      const raw = localStorage.getItem(THEME_UPDATED_AT_STORAGE_KEY);
+      if (raw === null) {
+        return null;
+      }
+      const timestamp = this.parseIsoTimestamp(raw);
+      return timestamp !== null && timestamp <= Date.now() ? timestamp : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private normaliseAccountTimestamp(value: unknown): string | null {
+    if (value instanceof Date && Number.isFinite(value.getTime())) {
+      return value.toISOString();
+    }
+    if (typeof value !== 'string') {
+      return null;
+    }
+    const timestamp = this.parseIsoTimestamp(value);
+    return timestamp === null ? null : new Date(timestamp).toISOString();
+  }
+
+  /** Date.parse accepts locale dates and normalises impossible calendar dates. */
+  private parseIsoTimestamp(value: string): number | null {
+    const match = ISO_8601_TIMESTAMP.exec(value);
+    if (match === null) {
+      return null;
+    }
+
+    const [
+      ,
+      yearRaw,
+      monthRaw,
+      dayRaw,
+      hourRaw,
+      minuteRaw,
+      secondRaw,
+      offsetHourRaw,
+      offsetMinuteRaw,
+    ] = match;
+    const year = Number(yearRaw);
+    const month = Number(monthRaw);
+    const day = Number(dayRaw);
+    const hour = Number(hourRaw);
+    const minute = Number(minuteRaw);
+    const second = Number(secondRaw);
+    const offsetHour = offsetHourRaw === undefined ? 0 : Number(offsetHourRaw);
+    const offsetMinute = offsetMinuteRaw === undefined ? 0 : Number(offsetMinuteRaw);
+    const daysInMonth =
+      month >= 1 && month <= 12 ? new Date(Date.UTC(year, month, 0)).getUTCDate() : 0;
+
+    if (
+      day < 1 ||
+      day > daysInMonth ||
+      hour > 23 ||
+      minute > 59 ||
+      second > 59 ||
+      offsetHour > 23 ||
+      offsetMinute > 59
+    ) {
+      return null;
+    }
+
+    const timestamp = Date.parse(value);
+    return Number.isFinite(timestamp) ? timestamp : null;
+  }
+
+  /** stored === 'system' ? follow the OS : the stored value. Section 4, one line. */
+  resolve(pref: ThemePreference = this._preference()): ResolvedTheme {
+    if (pref === 'system') {
+      return this.prefersDark() ? 'dark' : 'light';
+    }
+    return pref;
+  }
+
+  private applyResolved(): void {
+    const resolved = this.resolve();
+    this._resolved.set(resolved);
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const root = document.documentElement;
+    // Only ever 'light' or 'dark' reaches the attribute. Section 5.
+    root.setAttribute('data-ot-theme', resolved);
+    root.style.colorScheme = resolved;
+  }
+
+  private prefersDark(): boolean {
+    return this.query?.matches ?? false;
+  }
+
+  private mediaQuery(): MediaQueryList | null {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return null; // matchMedia unavailable -> light. Section 11 fallback chain.
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)');
+  }
+}
diff --git a/src/app/common/unit-code/unit-code.component.css b/src/app/common/unit-code/unit-code.component.css
index a571170e3c..5d4e87f30f 100644
--- a/src/app/common/unit-code/unit-code.component.css
+++ b/src/app/common/unit-code/unit-code.component.css
@@ -1,5 +1,3 @@
 :host {
   display: block;
-
 }
-
diff --git a/src/app/common/unit-code/unit-code.component.html b/src/app/common/unit-code/unit-code.component.html
index 8e33ff9a06..cd8724577c 100644
--- a/src/app/common/unit-code/unit-code.component.html
+++ b/src/app/common/unit-code/unit-code.component.html
@@ -1,10 +1,5 @@
 <f-chip>
-  <div
-
-    [style.minWidth.px]="width"
-    [ngClass]="{'justify-between': isDropdown, 'justify-center': !isDropdown}"
-    class="flex flex-row items-center"
-  >
+  <div class="flex flex-row items-center justify-center px-2" [style.minWidth.px]="width">
     @if (isDualBadge && shiftBetweenBadges) {
       @for (part of unitCodeParts; track part; let i = $index) {
         @if (i === currentIndex) {
diff --git a/src/app/common/unit-code/unit-code.component.ts b/src/app/common/unit-code/unit-code.component.ts
index 462597afe1..a01278f7dc 100644
--- a/src/app/common/unit-code/unit-code.component.ts
+++ b/src/app/common/unit-code/unit-code.component.ts
@@ -1,5 +1,5 @@
-import {trigger, state, style, animate, transition} from '@angular/animations';
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {UnitCodeService} from './unit-code.service';
 
@@ -20,6 +20,8 @@ import {UnitCodeService} from './unit-code.service';
       ]),
     ]),
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class UnitCodeComponent implements OnInit, OnDestroy {
   @Input() unit_code: string;
@@ -34,12 +36,20 @@ export class UnitCodeComponent implements OnInit, OnDestroy {
   constructor(private unitCodeService: UnitCodeService) {}
 
   get isDualBadge() {
-    return this.unit_code?.includes('/');
+    return this.unit_code?.includes('/') || this.unit_code?.includes('-');
   }
 
   get unitCodeParts() {
     if (this.shiftBetweenBadges) {
-      return this.isDualBadge ? this.unit_code.split('/') : [this.unit_code];
+      if (this.isDualBadge) {
+        if (this.unit_code.includes('/')) {
+          return this.unit_code.split('/');
+        } else {
+          return this.unit_code.split('-');
+        }
+      } else {
+        return [this.unit_code];
+      }
     }
     return this.unit_code;
   }
diff --git a/src/app/common/user-badge/user-badge.component.html b/src/app/common/user-badge/user-badge.component.html
index 548f6e3485..22511072e4 100644
--- a/src/app/common/user-badge/user-badge.component.html
+++ b/src/app/common/user-badge/user-badge.component.html
@@ -1,21 +1,33 @@
-<div class="flex flex-row justify-start items-start">
-  <a (click)="!unselected ? goToStudent() : null" style="display: flex">
+<div class="flex flex-row items-start justify-start">
+  <a
+    style="display: flex"
+    [queryParams]="unselected ? null : {tutor: true}"
+    [routerLink]="studentDashboardRoute"
+  >
     <user-icon
-      size="40"
-      [unselected]="unselected"
-      [user]="selectedTask?.project.student"
       style="margin-right: 8px"
+      [size]="40"
+      [unselected]="unselected"
+      [user]="$safeNavigationMigration(selectedTask?.project.student)"
     ></user-icon>
   </a>
-  <div class="flex-col justify-center items-start" style="line-height: 0.5em; margin-top: 4px">
-    <div style="margin-top: 6px" id="placeholder1" [hidden]="!unselected"></div>
+  <div class="flex-col items-start justify-center" style="line-height: 0.5em; margin-top: 4px">
+    <div id="placeholder1" style="margin-top: 6px" [hidden]="!unselected"></div>
     <div id="placeholder2" [hidden]="!unselected"></div>
-    <a (click)="!unselected ? goToStudent() : null" style="display: flex">
-      <h4 style="margin-bottom: 1px" class="mat-h4">
-        {{ selectedTask?.project.student.firstName }} {{ selectedTask?.project.student.lastName }}
+    <a
+      style="display: flex"
+      [queryParams]="unselected ? null : {tutor: true}"
+      [routerLink]="studentDashboardRoute"
+    >
+      <h4 class="mat-h4" style="margin-bottom: 1px">
+        {{ selectedTask?.project.student.displayName }}
       </h4>
     </a>
-    <a (click)="!unselected ? goToStudentTask() : null" style="display: flex">
+    <a
+      style="display: flex"
+      [queryParams]="unselected ? null : {tutor: true}"
+      [routerLink]="studentTaskRoute"
+    >
       <p class="mat-caption">{{ selectedTask?.definition.name }}</p>
     </a>
   </div>
diff --git a/src/app/common/user-badge/user-badge.component.scss b/src/app/common/user-badge/user-badge.component.scss
index ed194fa2c5..d4762075c1 100644
--- a/src/app/common/user-badge/user-badge.component.scss
+++ b/src/app/common/user-badge/user-badge.component.scss
@@ -1,46 +1,46 @@
+@use 'sass:color';
+
 :host {
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 a h4 {
-    font-weight: 400;
-    // font-family: 'Grotesk';
-    font-size: 14px;
+  font-weight: 400;
+  // font-family: 'Grotesk';
+  font-size: 14px;
 }
 
 a {
-    color: black
+  color: black;
 }
 
 a h4,
 a p {
-    margin: 0;
-    line-height: 1.2em;
+  margin: 0;
+  line-height: 1.2em;
 }
 
 a p {
-  color: (lighten($color: #000000, $amount: 15));
+  color: color.adjust(#000000, $lightness: 15%);
   font-size: 12px;
 }
 
 #placeholder1 {
-    margin-left: -4px;
-    line-height: 1.2em;
-    width: 200px;
-    height: 16px;
-    background: rgba(0, 0, 0, 0.08);
-    border-radius: 10px;
-    margin-bottom: 3px;
+  margin-left: -4px;
+  line-height: 1.2em;
+  width: 200px;
+  height: 16px;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  margin-bottom: 3px;
 }
 
 #placeholder2 {
-    margin-left: -4px;
-    line-height: 1.2em;
-    width: 200px;
-    height: 12px;
-    background: rgba(0, 0, 0, 0.08);
-    border-radius: 10px;
+  margin-left: -4px;
+  line-height: 1.2em;
+  width: 200px;
+  height: 12px;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
 }
-
-
diff --git a/src/app/common/user-badge/user-badge.component.spec.ts b/src/app/common/user-badge/user-badge.component.spec.ts
index 6c161dfacf..87b04a194d 100644
--- a/src/app/common/user-badge/user-badge.component.spec.ts
+++ b/src/app/common/user-badge/user-badge.component.spec.ts
@@ -1,6 +1,7 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { UserBadgeComponent } from './user-badge.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {UserBadgeComponent} from './user-badge.component';
 
 describe('UserBadgeComponent', () => {
   let component: UserBadgeComponent;
@@ -9,11 +10,15 @@ describe('UserBadgeComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [UserBadgeComponent],
-    }).compileComponents();
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(UserBadgeComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(UserBadgeComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/common/user-badge/user-badge.component.ts b/src/app/common/user-badge/user-badge.component.ts
index ed501ffbc7..52f1a7b93d 100644
--- a/src/app/common/user-badge/user-badge.component.ts
+++ b/src/app/common/user-badge/user-badge.component.ts
@@ -1,14 +1,14 @@
-import { Component, Input } from '@angular/core';
-import { UIRouter } from '@uirouter/angular';
-import { Task } from 'src/app/api/models/doubtfire-model';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Task} from 'src/app/api/models/doubtfire-model';
 
 @Component({
   selector: 'f-user-badge',
   templateUrl: './user-badge.component.html',
   styleUrls: ['./user-badge.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class UserBadgeComponent {
-  constructor(private router: UIRouter) {}
   @Input() selectedTask: Task;
 
   get unselected(): boolean {
@@ -19,19 +19,18 @@ export class UserBadgeComponent {
     return this.selectedTask == null;
   }
 
-  goToStudent(): void {
-    this.router.stateService.go('projects/dashboard', {
-      projectId: this.selectedTask.project.id,
-      tutor: true,
-      taskAbbr: '',
-    });
+  get studentDashboardRoute(): unknown[] | null {
+    return this.unselected ? null : ['/projects', this.selectedTask.project.id, 'dashboard'];
   }
 
-  goToStudentTask(): void {
-    this.router.stateService.go('projects/dashboard', {
-      projectId: this.selectedTask.project.id,
-      taskAbbr: this.selectedTask.definition.abbreviation,
-      tutor: true,
-    });
+  get studentTaskRoute(): unknown[] | null {
+    return this.unselected
+      ? null
+      : [
+          '/projects',
+          this.selectedTask.project.id,
+          'dashboard',
+          this.selectedTask.definition.abbreviation,
+        ];
   }
 }
diff --git a/src/app/common/user-icon/user-icon.component.html b/src/app/common/user-icon/user-icon.component.html
index 0d24efdceb..82690f70c2 100644
--- a/src/app/common/user-icon/user-icon.component.html
+++ b/src/app/common/user-icon/user-icon.component.html
@@ -1,4 +1,4 @@
-<svg [hidden]="unselected" #svg></svg>
+<svg #svg [hidden]="unselected"></svg>
 @if (unselected) {
-<mat-icon disabled>account_circle</mat-icon>
+  <mat-icon disabled>account_circle</mat-icon>
 }
diff --git a/src/app/common/user-icon/user-icon.component.scss b/src/app/common/user-icon/user-icon.component.scss
index 3d001bf71f..357a10175c 100644
--- a/src/app/common/user-icon/user-icon.component.scss
+++ b/src/app/common/user-icon/user-icon.component.scss
@@ -9,4 +9,4 @@
   width: 50px;
   margin-left: -6px;
   color: rgba(0, 0, 0, 0.12);
-}
\ No newline at end of file
+}
diff --git a/src/app/common/user-icon/user-icon.component.ts b/src/app/common/user-icon/user-icon.component.ts
index 07f3a8d27e..212eee6e02 100644
--- a/src/app/common/user-icon/user-icon.component.ts
+++ b/src/app/common/user-icon/user-icon.component.ts
@@ -1,23 +1,60 @@
-import { Component, Input, ViewChild, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
-import { User, UserService } from 'src/app/api/models/doubtfire-model';
-import { Md5 } from 'ts-md5/dist/md5';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {User, UserService} from 'src/app/api/models/doubtfire-model';
+
+interface D3Selection {
+  append(name: string): D3Selection;
+  attr(
+    name: string,
+    value: string | number | ((datum: IconLine, index: number) => string | number),
+  ): D3Selection;
+  call(
+    callback: (selection: D3Selection, size: number, radius: number) => void,
+    size: number,
+    radius: number,
+  ): D3Selection;
+  data(data: IconLine[]): D3Selection;
+  enter(): D3Selection;
+  remove(): D3Selection;
+  selectAll(selector: string): D3Selection;
+  style(name: string, value: string): D3Selection;
+  text(value: (datum: IconLine) => string): D3Selection;
+}
+
+interface IconLine {
+  width: number;
+  text: string;
+}
 
-declare var d3: any;
+declare const d3: {
+  select(element: SVGElement): D3Selection;
+};
 
 @Component({
   selector: 'user-icon',
   templateUrl: './user-icon.component.html',
   styleUrls: ['./user-icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class UserIconComponent implements AfterViewInit, OnChanges {
   @Input() user: User;
   @Input() unselected: boolean;
   @Input() size = 100;
 
-  @ViewChild('svg') svg: { nativeElement: any };
+  @ViewChild('svg') svg: ElementRef<SVGElement>;
 
   lineHeight = 12;
   usingCurrentUser: boolean;
+  private renderSequence = 0;
 
   ngAfterViewInit(): void {
     if (this.user == null) {
@@ -35,18 +72,26 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
 
   constructor(private userService: UserService) {}
 
-  get backgroundUrl(): string {
-    const hash = this.email != null ? Md5.hashStr(this.email.trim().toLowerCase()) : Md5.hashStr('');
+  private async backgroundUrl(): Promise<string> {
+    const hash = await this.sha256(this.email?.trim().toLowerCase() ?? '');
     return `https://www.gravatar.com/avatar/${hash}.png?default=blank&size=${this.size * 4}`;
   }
 
+  private async sha256(value: string): Promise<string> {
+    const bytes = new TextEncoder().encode(value);
+    const digest = await crypto.subtle.digest('SHA-256', bytes);
+    return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, '0')).join(
+      '',
+    );
+  }
+
   get email(): string {
     return this.user?.email;
   }
 
   get initials(): string {
-    const result = this.user?.name != null ? this.user.name.split(' ') : '  ';
-    return result.length > 1 ? `${result[0][0]}${result[1][0]}`.toUpperCase() : '  ';
+    const words = this.user?.name.split(' ').filter(Boolean) ?? [];
+    return words.length > 1 ? `${words[0][0]}${words[1][0]}`.toUpperCase() : '  ';
   }
 
   get words(): string[] {
@@ -61,8 +106,8 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
     return Math.max(this.size / 2, 4);
   }
 
-  private generateLines(): any[] {
-    let line;
+  private generateLines(): IconLine[] {
+    let line: IconLine;
     let lineWidth0 = Infinity;
     const result = [];
     for (let i = 0, n = this.words.length; i < n; ++i) {
@@ -73,7 +118,7 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
         line.text = lineText1;
       } else {
         lineWidth0 = this.measureWidth(this.words[i]);
-        line = { width: lineWidth0, text: this.words[i] };
+        line = {width: lineWidth0, text: this.words[i]};
         result.push(line);
       }
     }
@@ -115,21 +160,28 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
     return context.measureText(text).width;
   }
 
-  drawUserIcon(): void {
+  async drawUserIcon(): Promise<void> {
+    const svgElement = this.svg?.nativeElement;
+    if (!svgElement) {
+      return;
+    }
+
+    const renderSequence = ++this.renderSequence;
+    const backgroundUrl = await this.backgroundUrl();
+    if (renderSequence !== this.renderSequence) {
+      return;
+    }
+
     // TODO: Consider caching SVG on a per-user basis
     // clear svg
-    d3.select(this.svg?.nativeElement).selectAll('*').remove();
+    d3.select(svgElement).selectAll('*').remove();
     // if this.unselected is undefined or true
-    if (!this.unselected == null || this.unselected) {
-      if (this.svg?.nativeElement) {
-        // hide div from DOM (but don't remove it)
-        this.svg.nativeElement.style.display = 'none';
-      }
+    if (this.unselected) {
+      // hide div from DOM (but don't remove it)
+      svgElement.style.display = 'none';
     } else {
-      if (this.svg?.nativeElement) {
-        // add div to DOM
-        this.svg.nativeElement.style.display = 'block';
-      }
+      // add div to DOM
+      svgElement.style.display = 'block';
     }
     const lines = this.generateLines();
 
@@ -141,7 +193,7 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
     }
 
     const svg = d3
-      .select(this.svg?.nativeElement)
+      .select(svgElement)
       .style('font', '8px sans-serif')
       .attr('width', this.size)
       .attr('shape-rendering', 'geometricPrecision')
@@ -149,7 +201,7 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
       .attr('height', this.size)
       .attr('text-anchor', 'middle');
 
-    function appendCircle(selection, size, radius) {
+    function appendCircle(selection: D3Selection, size: number, radius: number) {
       selection
         .append('circle')
         .attr('cx', size / 2)
@@ -160,7 +212,10 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
     const id = this.generateUniqueId();
     const defs = svg.append('defs');
 
-    defs.append('clipPath').attr('id', `image-clip-${id}`).call(appendCircle, this.size, this.radius);
+    defs
+      .append('clipPath')
+      .attr('id', `image-clip-${id}`)
+      .call(appendCircle, this.size, this.radius);
 
     svg
       .append('circle')
@@ -171,7 +226,10 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
 
     svg
       .append('text')
-      .attr('transform', `translate(${this.size / 2},${this.size / 2}) scale(${this.radius / textRadius})`)
+      .attr(
+        'transform',
+        `translate(${this.size / 2},${this.size / 2}) scale(${this.radius / textRadius})`,
+      )
       .selectAll('tspan')
       .data(lines)
       .enter()
@@ -183,7 +241,7 @@ export class UserIconComponent implements AfterViewInit, OnChanges {
 
     svg
       .append('image')
-      .attr('xlink:href', this.backgroundUrl)
+      .attr('xlink:href', backgroundUrl)
       .attr('width', this.size)
       .attr('height', this.size)
       .attr('x', 0)
diff --git a/src/app/config/analytics/analytics.coffee b/src/app/config/analytics/analytics.coffee
deleted file mode 100644
index 641d80653b..0000000000
--- a/src/app/config/analytics/analytics.coffee
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module('doubtfire.config.analytics', [])
-#
-# Configuration for analytics
-#
-.config( ($analyticsProvider) ->
-  # Disable virtual page views for analytics
-  $analyticsProvider.virtualPageviews(false)
-)
diff --git a/src/app/config/config.coffee b/src/app/config/config.coffee
deleted file mode 100644
index 853d046373..0000000000
--- a/src/app/config/config.coffee
+++ /dev/null
@@ -1,17 +0,0 @@
-#
-# The Doubtfire configuration module stores all configuration settings
-# for Doubtfire loaded at runtime.
-#
-# The order in which the modules load here is IMPORTANT so do not rearrange
-# them
-#
-angular.module('doubtfire.config', [
-  'doubtfire.config.vendor-dependencies'
-  'doubtfire.config.local-storage'
-  'doubtfire.config.routing'
-  'doubtfire.config.analytics'
-  'doubtfire.config.runtime'
-  'doubtfire.config.root-controller'
-  'doubtfire.config.debug'
-  'doubtfire.config.privacy-policy'
-])
diff --git a/src/app/config/constants/apiURL.devcontainer.ts b/src/app/config/constants/apiURL.devcontainer.ts
deleted file mode 100644
index db635c6083..0000000000
--- a/src/app/config/constants/apiURL.devcontainer.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-const API_URL = `${window.location.origin}/api`;
-export default API_URL;
diff --git a/src/app/config/constants/apiURL.prod.ts b/src/app/config/constants/apiURL.prod.ts
deleted file mode 100644
index 2657e240f9..0000000000
--- a/src/app/config/constants/apiURL.prod.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-let API_URL: string;
-
-API_URL = `${window.location.origin}/api`;
-export default API_URL;
diff --git a/src/app/config/constants/apiURL.ts b/src/app/config/constants/apiURL.ts
deleted file mode 100644
index 737aad40bd..0000000000
--- a/src/app/config/constants/apiURL.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-let API_URL: string;
-
-API_URL = `${window.location.protocol}//${window.location.hostname}:3000/api`;
-export default API_URL;
diff --git a/src/app/config/constants/apiUrl.ts b/src/app/config/constants/apiUrl.ts
new file mode 100644
index 0000000000..74c355b7ce
--- /dev/null
+++ b/src/app/config/constants/apiUrl.ts
@@ -0,0 +1,4 @@
+import HOST_URL from './hostUrl';
+
+const API_URL: string = `${HOST_URL}/api`;
+export default API_URL;
diff --git a/src/app/config/constants/doubtfire-constants.spec.ts b/src/app/config/constants/doubtfire-constants.spec.ts
new file mode 100644
index 0000000000..3a87a6e08c
--- /dev/null
+++ b/src/app/config/constants/doubtfire-constants.spec.ts
@@ -0,0 +1,269 @@
+import {provideHttpClient} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {
+  AuthenticatedSettingsResponseFormat,
+  DoubtfireConstants,
+} from 'src/app/config/constants/doubtfire-constants';
+
+describe('DoubtfireConstants', () => {
+  let httpMock: HttpTestingController;
+
+  const publicSettings = {
+    externalName: 'OnTrack',
+    hasLogo: true,
+    logoUrl: '/logo.svg',
+    logoLinkUrl: '/',
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  function flushSignoutUrl(): void {
+    const request = httpMock.expectOne(`${API_URL}/auth/signout_url`);
+    request.flush({auth_signout_url: '/sign_out'});
+  }
+
+  /**
+   * Bring the service up through the normal bootstrap path and answer the two
+   * requests the constructor makes, so a test can start from a signed out
+   * browser without repeating the plumbing.
+   */
+  function bootstrap(): DoubtfireConstants {
+    const service = TestBed.inject(DoubtfireConstants);
+
+    httpMock.expectOne(`${API_URL}/settings/public`).flush(publicSettings);
+    flushSignoutUrl();
+
+    return service;
+  }
+
+  it('loads public branding without authentication headers', () => {
+    const service = TestBed.inject(DoubtfireConstants);
+
+    const request = httpMock.expectOne(`${API_URL}/settings/public`);
+
+    expect(request.request.headers.has('Auth-Token')).toBe(false);
+    expect(request.request.headers.has('Username')).toBe(false);
+
+    request.flush(publicSettings);
+    flushSignoutUrl();
+
+    expect(service.ExternalName.value).toBe('OnTrack');
+    expect(service.LogoSettings.value).toEqual({
+      hasLogo: true,
+      logoUrl: '/logo.svg',
+      logoLinkUrl: '/',
+    });
+  });
+
+  it('falls back to the legacy settings route during a staged deployment', () => {
+    const service = TestBed.inject(DoubtfireConstants);
+
+    const publicRequest = httpMock.expectOne(`${API_URL}/settings/public`);
+    publicRequest.flush(
+      {error: 'Not found'},
+      {
+        status: 404,
+        statusText: 'Not Found',
+      },
+    );
+
+    const legacyRequest = httpMock.expectOne(`${API_URL}/settings`);
+    legacyRequest.flush({
+      ...publicSettings,
+      overseerEnabled: true,
+      tiiEnabled: true,
+      d2lEnabled: true,
+    });
+
+    flushSignoutUrl();
+
+    expect(service.ExternalName.value).toBe('OnTrack');
+  });
+
+  it('applies feature flags received after authentication', () => {
+    const service = bootstrap();
+
+    service.applyAuthenticatedSettings({
+      overseerEnabled: true,
+      tiiEnabled: true,
+      d2lEnabled: false,
+      pushEnabled: true,
+      vapidPublicKey: 'BTestVapidPublicKey',
+    });
+
+    expect(service.IsOverseerEnabled.value).toBe(true);
+    expect(service.IsTiiEnabled.value).toBe(true);
+    expect(service.IsD2LEnabled.value).toBe(false);
+  });
+
+  /**
+   * Push configuration moved behind authentication when /settings did. The
+   * pre-auth client here carries no token on purpose, so nothing it fetches may
+   * be trusted to populate these two. A signed out browser has to read as "push
+   * is not available", because PushNotificationService gates the opt-in on
+   * IsPushEnabled and VapidPublicKey both being truthy.
+   */
+  it('reports push as unavailable before anyone signs in', () => {
+    const service = bootstrap();
+
+    expect(service.IsPushEnabled.value).toBe(false);
+    expect(service.VapidPublicKey.value).toBe('');
+  });
+
+  /**
+   * The regression this file exists to catch. An older api still answers the
+   * legacy /settings with push fields in the body, and the bootstrap request is
+   * anonymous. Reading them there would hand the VAPID key to an unauthenticated
+   * caller and would also mean the flags never refresh at sign in, so bootstrap
+   * has to ignore them whatever the body says.
+   */
+  it('ignores push fields returned by the legacy settings route', () => {
+    const service = TestBed.inject(DoubtfireConstants);
+
+    httpMock.expectOne(`${API_URL}/settings/public`).flush(
+      {error: 'Not found'},
+      {
+        status: 404,
+        statusText: 'Not Found',
+      },
+    );
+
+    httpMock.expectOne(`${API_URL}/settings`).flush({
+      ...publicSettings,
+      overseerEnabled: true,
+      tiiEnabled: true,
+      d2lEnabled: true,
+      pushEnabled: true,
+      vapidPublicKey: 'BLegacyKeyFromAnonymousRequest',
+    });
+
+    flushSignoutUrl();
+
+    expect(service.IsPushEnabled.value).toBe(false);
+    expect(service.VapidPublicKey.value).toBe('');
+  });
+
+  it('publishes the push configuration once the authenticated settings arrive', () => {
+    const service = bootstrap();
+
+    service.applyAuthenticatedSettings({
+      overseerEnabled: false,
+      tiiEnabled: false,
+      d2lEnabled: false,
+      pushEnabled: true,
+      vapidPublicKey: 'BTestVapidPublicKey',
+    });
+
+    expect(service.IsPushEnabled.value).toBe(true);
+    expect(service.VapidPublicKey.value).toBe('BTestVapidPublicKey');
+  });
+
+  /**
+   * The api sends null rather than an empty string when DOUBTFIRE_VAPID_PUBLIC_KEY
+   * is unset, so pushEnabled is false and the key is absent. VapidPublicKey is a
+   * BehaviorSubject<string> and PushNotificationService reads .value directly, so
+   * a null landing in it would read as truthy nowhere but would still be the wrong
+   * type. It has to normalise to ''.
+   */
+  it('normalises a null vapid public key to an empty string', () => {
+    const service = bootstrap();
+
+    service.applyAuthenticatedSettings({
+      overseerEnabled: false,
+      tiiEnabled: false,
+      d2lEnabled: false,
+      pushEnabled: false,
+      vapidPublicKey: null,
+    });
+
+    expect(service.IsPushEnabled.value).toBe(false);
+    expect(service.VapidPublicKey.value).toBe('');
+    expect(service.VapidPublicKey.value).not.toBeNull();
+  });
+
+  /**
+   * The other half of a staged deployment: a web build carrying push talking to
+   * an api that predates it, so /settings answers with the three original flags
+   * and neither push field. The assertion is what makes the ?? in
+   * applyAuthenticatedSettings load bearing rather than decoration.
+   *
+   * AuthenticatedSettingsResponseFormat keeps the two push fields optional for
+   * this staged-deployment case.
+   */
+  it('leaves push disabled when the api omits the push fields entirely', () => {
+    const service = bootstrap();
+
+    const settingsFromAnOlderApi = {
+      overseerEnabled: true,
+      tiiEnabled: false,
+      d2lEnabled: true,
+    } as AuthenticatedSettingsResponseFormat;
+
+    service.applyAuthenticatedSettings(settingsFromAnOlderApi);
+
+    expect(service.IsOverseerEnabled.value).toBe(true);
+    expect(service.IsD2LEnabled.value).toBe(true);
+    expect(service.IsPushEnabled.value).toBe(false);
+    expect(service.VapidPublicKey.value).toBe('');
+  });
+
+  /**
+   * Signing out and back in as somebody on a server that has since had its keys
+   * pulled must not leave the previous key sitting in the subject. Every apply
+   * overwrites both, it never merges.
+   */
+  it('clears a previously published key when push is later turned off', () => {
+    const service = bootstrap();
+
+    service.applyAuthenticatedSettings({
+      overseerEnabled: false,
+      tiiEnabled: false,
+      d2lEnabled: false,
+      pushEnabled: true,
+      vapidPublicKey: 'BFirstKey',
+    });
+
+    service.applyAuthenticatedSettings({
+      overseerEnabled: false,
+      tiiEnabled: false,
+      d2lEnabled: false,
+      pushEnabled: false,
+      vapidPublicKey: null,
+    });
+
+    expect(service.IsPushEnabled.value).toBe(false);
+    expect(service.VapidPublicKey.value).toBe('');
+  });
+
+  it('resets every authenticated setting to its signed-out default', () => {
+    const service = bootstrap();
+
+    service.applyAuthenticatedSettings({
+      overseerEnabled: true,
+      tiiEnabled: true,
+      d2lEnabled: true,
+      pushEnabled: true,
+      vapidPublicKey: 'BPreviousSessionKey',
+    });
+
+    service.resetAuthenticatedSettings();
+
+    expect(service.IsOverseerEnabled.value).toBe(false);
+    expect(service.IsTiiEnabled.value).toBe(false);
+    expect(service.IsD2LEnabled.value).toBe(false);
+    expect(service.IsPushEnabled.value).toBe(false);
+    expect(service.VapidPublicKey.value).toBe('');
+  });
+});
diff --git a/src/app/config/constants/doubtfire-constants.ts b/src/app/config/constants/doubtfire-constants.ts
index 93b97d7885..794efa4a98 100644
--- a/src/app/config/constants/doubtfire-constants.ts
+++ b/src/app/config/constants/doubtfire-constants.ts
@@ -1,35 +1,53 @@
-import { HttpClient, HttpBackend } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import {HttpBackend, HttpClient, HttpErrorResponse} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, catchError, throwError} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import HOST_URL from 'src/app/config/constants/hostUrl';
 
-import API_URL from 'src/app/config/constants/apiURL';
-
-interface SettingsResponseFormat {
+interface PublicSettingsResponseFormat {
   externalName: string;
+  hasLogo: boolean;
+  logoUrl: string;
+  logoLinkUrl: string;
+}
+
+export interface AuthenticatedSettingsResponseFormat {
   overseerEnabled: boolean;
   tiiEnabled: boolean;
+  d2lEnabled: boolean;
+  // Optional so an existing caller that predates push still type-checks, and
+  // because applyAuthenticatedSettings already defaults both below.
+  pushEnabled?: boolean;
+  vapidPublicKey?: string | null;
+}
+
+export interface LogoSettings {
+  hasLogo: boolean;
+  logoUrl: string;
+  logoLinkUrl: string;
 }
 
 interface SignOutUrlResponseFormat {
   auth_signout_url: string;
 }
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class DoubtfireConstants {
   private http: HttpClient;
 
-  public mainContributors: ReadonlyArray<string> = [
+  public mainContributors: readonly string[] = [
     'macite', // Andrew Cain
     'alexcu', // Alex Cummaudo
     'jakerenzella', // Jake Renzella
   ];
 
+  public HOST_URL: string = HOST_URL;
   public API_URL: string = API_URL;
 
   // Where should we redirect users on signout?
   public SignoutURL: string;
 
-  // initialise exernal name to loading.
+  // Initialise external name to loading.
   public ExternalName: BehaviorSubject<string> = new BehaviorSubject<string>('Loading...');
 
   /**
@@ -37,35 +55,113 @@ export class DoubtfireConstants {
    */
   public IsOverseerEnabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
+  /**
+   * Whether or not the D2L integration is enabled.
+   */
+  public IsD2LEnabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   * Details on the logo.
+   */
+  public LogoSettings: BehaviorSubject<LogoSettings> = new BehaviorSubject<LogoSettings>({
+    hasLogo: false,
+    logoUrl: '/assets/images/institution-logo.png',
+    logoLinkUrl: '/',
+  });
+
   /**
    * Whether or not the TurnItIn integration is enabled.
    */
   public IsTiiEnabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
-  private readonly settingsUrl: string = `${this.API_URL}/settings`;
+  /**
+   * Whether the api has VAPID keys configured. False means push cannot work at
+   * all, so the opt-in is not offered.
+   *
+   * Populated after sign-in, not at bootstrap. /settings is authenticated, and
+   * the pre-auth client here deliberately carries no token.
+   */
+  public IsPushEnabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   * The VAPID public key the browser needs to subscribe to push. Not a secret —
+   * it is sent to the push service in the clear. Empty until settings load.
+   */
+  public VapidPublicKey: BehaviorSubject<string> = new BehaviorSubject<string>('');
+
+  private readonly publicSettingsUrl: string = `${this.API_URL}/settings/public`;
+  private readonly legacySettingsUrl: string = `${this.API_URL}/settings`;
 
   constructor(handler: HttpBackend) {
-    // Don't use interceptors for Doubtfire Constants
+    // Do not use interceptors for pre-authentication Doubtfire constants.
     this.http = new HttpClient(handler);
-    this.loadExternalName();
+    this.loadPublicSettings();
     this.loadSignoutUrl();
   }
 
-  private loadSignoutUrl() {
+  private loadSignoutUrl(): void {
     const url: string = `${this.API_URL}/auth/signout_url`;
 
-    this.http.get<SignOutUrlResponseFormat>(url).subscribe(
-      (result) => (this.SignoutURL = result.auth_signout_url),
-      (error) => console.error(error)
-    );
+    this.http.get<SignOutUrlResponseFormat>(url).subscribe({
+      next: (result) => (this.SignoutURL = result.auth_signout_url),
+      error: (error) => console.error(error),
+    });
   }
 
-  // publish update to ExternalName when get request finishes.
-  private loadExternalName() {
-    this.http.get<SettingsResponseFormat>(this.settingsUrl).subscribe((result) => {
-      this.ExternalName.next(result.externalName);
-      this.IsOverseerEnabled.next(result.overseerEnabled);
-      this.IsTiiEnabled.next(result.tiiEnabled);
-    });
+  /**
+   * Load branding needed before the user signs in.
+   *
+   * The fallback allows this web change to be deployed before the API change.
+   * The current API returns the same branding fields from /settings.
+   */
+  private loadPublicSettings(): void {
+    this.http
+      .get<PublicSettingsResponseFormat>(this.publicSettingsUrl)
+      .pipe(
+        catchError((error: HttpErrorResponse) => {
+          if (error.status === 404) {
+            return this.http.get<PublicSettingsResponseFormat>(this.legacySettingsUrl);
+          }
+
+          return throwError(() => error);
+        }),
+      )
+      .subscribe({
+        next: (result) => {
+          this.ExternalName.next(result.externalName);
+          this.LogoSettings.next({
+            hasLogo: result.hasLogo,
+            logoUrl: result.logoUrl,
+            logoLinkUrl: result.logoLinkUrl,
+          });
+        },
+        error: (error) => console.error('Unable to load public settings', error),
+      });
+  }
+
+  /**
+   * Apply settings returned after successful authentication.
+   */
+  public applyAuthenticatedSettings(result: AuthenticatedSettingsResponseFormat): void {
+    this.IsOverseerEnabled.next(result.overseerEnabled);
+    this.IsTiiEnabled.next(result.tiiEnabled);
+    this.IsD2LEnabled.next(result.d2lEnabled);
+    this.IsPushEnabled.next(result.pushEnabled ?? false);
+    this.VapidPublicKey.next(result.vapidPublicKey ?? '');
+  }
+
+  /**
+   * Remove configuration that may only be used by an authenticated session.
+   *
+   * DoubtfireConstants is a root singleton, so these subjects otherwise retain
+   * the previous session's values after sign out. Keep the defaults fail closed
+   * while signed out and when the authenticated settings request fails.
+   */
+  public resetAuthenticatedSettings(): void {
+    this.IsOverseerEnabled.next(false);
+    this.IsTiiEnabled.next(false);
+    this.IsD2LEnabled.next(false);
+    this.IsPushEnabled.next(false);
+    this.VapidPublicKey.next('');
   }
 }
diff --git a/src/app/config/constants/hostUrl.devcontainer.ts b/src/app/config/constants/hostUrl.devcontainer.ts
new file mode 100644
index 0000000000..372945cbf8
--- /dev/null
+++ b/src/app/config/constants/hostUrl.devcontainer.ts
@@ -0,0 +1,2 @@
+const HOST_URL: string = `${window.location.origin}`;
+export default HOST_URL;
diff --git a/src/app/config/constants/hostUrl.prod.ts b/src/app/config/constants/hostUrl.prod.ts
new file mode 100644
index 0000000000..372945cbf8
--- /dev/null
+++ b/src/app/config/constants/hostUrl.prod.ts
@@ -0,0 +1,2 @@
+const HOST_URL: string = `${window.location.origin}`;
+export default HOST_URL;
diff --git a/src/app/config/constants/hostUrl.ts b/src/app/config/constants/hostUrl.ts
new file mode 100644
index 0000000000..7503d2e19c
--- /dev/null
+++ b/src/app/config/constants/hostUrl.ts
@@ -0,0 +1,2 @@
+const HOST_URL: string = `${window.location.protocol}//${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}`;
+export default HOST_URL;
diff --git a/src/app/config/constants/ltiApiUrl.ts b/src/app/config/constants/ltiApiUrl.ts
new file mode 100644
index 0000000000..a29f000427
--- /dev/null
+++ b/src/app/config/constants/ltiApiUrl.ts
@@ -0,0 +1,4 @@
+import HOST_URL from './hostUrl';
+
+const LTI_API_URL: string = `${HOST_URL}/lti/api`;
+export default LTI_API_URL;
diff --git a/src/app/config/debug/debug.coffee b/src/app/config/debug/debug.coffee
deleted file mode 100644
index 06dafe8555..0000000000
--- a/src/app/config/debug/debug.coffee
+++ /dev/null
@@ -1,10 +0,0 @@
-angular.module('doubtfire.config.debug', [])
-
-#
-# You can define any debug helpers here
-#
-
-# Debug helper method
-scope = ($0) ->
-  throw new Error "Select a DOM element using 'Inspect Element' first, then call using scope($0)" unless $0?
-  angular.element($0).scope()
diff --git a/src/app/config/local-storage/local-storage.coffee b/src/app/config/local-storage/local-storage.coffee
deleted file mode 100644
index f6b5c0403e..0000000000
--- a/src/app/config/local-storage/local-storage.coffee
+++ /dev/null
@@ -1,7 +0,0 @@
-angular.module('doubtfire.config.local-storage', [])
-#
-# Local Storage Configuration
-#
-.config((localStorageServiceProvider) ->
-  localStorageServiceProvider.setPrefix('doubtfire')
-)
diff --git a/src/app/config/privacy-policy/privacy-policy.coffee b/src/app/config/privacy-policy/privacy-policy.coffee
deleted file mode 100644
index a7a1a84efa..0000000000
--- a/src/app/config/privacy-policy/privacy-policy.coffee
+++ /dev/null
@@ -1,17 +0,0 @@
-angular.module("doubtfire.config.privacy-policy", [])
-
-.factory('PrivacyPolicy', ($http, DoubtfireConstants) ->
-  privacyPolicy = {
-    privacy: '',
-    plagiarism: '',
-    loaded: false,
-  }
-
-  $http.get("#{DoubtfireConstants.API_URL}/settings/privacy").then ((response) ->
-    privacyPolicy.privacy = response.data.privacy
-    privacyPolicy.plagiarism = response.data.plagiarism
-    privacyPolicy.loaded = true
-  )
-
-  privacyPolicy
-)
diff --git a/src/app/config/privacy-policy/privacy-policy.spec.ts b/src/app/config/privacy-policy/privacy-policy.spec.ts
new file mode 100644
index 0000000000..634447dd0a
--- /dev/null
+++ b/src/app/config/privacy-policy/privacy-policy.spec.ts
@@ -0,0 +1,33 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {provideHttpClient, withXhr} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import {PrivacyPolicy} from './privacy-policy';
+
+describe('PrivacyPolicy', () => {
+  let service: PrivacyPolicy;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(withXhr()), provideHttpClientTesting()],
+    });
+    service = TestBed.inject(PrivacyPolicy);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should load the privacy and plagiarism policies', () => {
+    httpMock
+      .expectOne('http://localhost:3000/api/settings/privacy')
+      .flush({privacy: 'Privacy policy', plagiarism: 'Plagiarism policy'});
+
+    expect(service).toBeTruthy();
+    expect(service.privacy).toBe('Privacy policy');
+    expect(service.plagiarism).toBe('Plagiarism policy');
+    expect(service.loaded).toBe(true);
+  });
+});
diff --git a/src/app/config/privacy-policy/privacy-policy.ts b/src/app/config/privacy-policy/privacy-policy.ts
new file mode 100644
index 0000000000..9f18c9e4af
--- /dev/null
+++ b/src/app/config/privacy-policy/privacy-policy.ts
@@ -0,0 +1,29 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import API_URL from 'src/app/config/constants/apiUrl';
+
+interface Response {
+  privacy: string;
+  plagiarism: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PrivacyPolicy {
+  privacy = '';
+  plagiarism = '';
+  loaded = false;
+
+  public API_URL: string = API_URL;
+
+  constructor(private http: HttpClient) {
+    const url: string = `${this.API_URL}/settings/privacy`;
+
+    this.http.get<Response>(url).subscribe((response) => {
+      this.privacy = response.privacy;
+      this.plagiarism = response.plagiarism;
+      this.loaded = true;
+    });
+  }
+}
diff --git a/src/app/config/root-controller/root-controller.coffee b/src/app/config/root-controller/root-controller.coffee
deleted file mode 100644
index 4a9854fc0e..0000000000
--- a/src/app/config/root-controller/root-controller.coffee
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module('doubtfire.config.root-controller', [])
-
-#
-# The Doubtfire root application controller
-#
-.controller("AppCtrl", (GlobalStateService) ->
-
-)
diff --git a/src/app/config/routing/routing.coffee b/src/app/config/routing/routing.coffee
deleted file mode 100644
index 0091a888a7..0000000000
--- a/src/app/config/routing/routing.coffee
+++ /dev/null
@@ -1,13 +0,0 @@
-angular.module('doubtfire.config.routing', [])
-#
-# Configuration for angular routing
-#
-.config(($urlRouterProvider, $httpProvider) ->
-  # Catch bad URLs.
-  # $urlRouterProvider.otherwise "/not_found"
-  $urlRouterProvider.when "", "/"
-
-  # Map root/home URL to a default state of our choosing.
-  # TODO: (@alexcu) probably change it to map to /dashboard at some point.
-  $urlRouterProvider.when "/", "/home"
-)
diff --git a/src/app/config/runtime/runtime.coffee b/src/app/config/runtime/runtime.coffee
deleted file mode 100644
index bd6cd78354..0000000000
--- a/src/app/config/runtime/runtime.coffee
+++ /dev/null
@@ -1,52 +0,0 @@
-#
-# Runtime settings for when Doubtfire is about to launch
-#
-angular.module('doubtfire.config.runtime', [])
-
-.run(($rootScope, $state, $filter, $location, authenticationService, editableOptions, editableThemes, $transitions) ->
-  # Angular xeditable
-  editableOptions.theme = 'bs3'
-  editableThemes.bs3.inputClass = 'input-sm'
-  editableThemes.bs3.buttonsClass = 'btn-sm'
-
-  serialize = (obj, prefix) ->
-    str = []
-    for p, v of obj
-      k = if prefix then prefix + "[" + p + "]" else p
-      if typeof v == "object"
-        str.push(serialize(v, k))
-      else
-        str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v))
-
-    str.join("&")
-
-  handleUnauthorisedDest = (toState) ->
-    if authenticationService.isAuthenticated()
-      $state.go "unauthorised"
-    else if $state.current.name isnt "sign_in"
-      $state.go "sign_in", { dest: toState.name }
-
-  handleTokenTimeout = ->
-    if $state.current.name isnt "timeout"
-      $state.go "timeout", { dest: $state.current.name, params: serialize($state.params) }
-
-  handleUnauthorised = ->
-    handleUnauthorisedDest($state.current)
-
-  # Don't let the user see pages not intended for their role
-
-  # Redirect the user if they make an unauthorised API request
-  $rootScope.$on "unauthorisedRequestIntercepted", handleUnauthorised
-
-  # Redirect the user if their token expires
-  $rootScope.$on("tokenTimeout", handleTokenTimeout)
-
-  # Watch for state transition and check role whitelist
-  $transitions.onStart {}, (trans) ->
-    toState = trans.to()
-    return true unless toState.data.roleWhitelist
-
-    unless authenticationService.isAuthorised toState.data.roleWhitelist
-      handleUnauthorisedDest(toState)
-      return false
-)
diff --git a/src/app/config/vendor-dependencies/vendor-dependencies.coffee b/src/app/config/vendor-dependencies/vendor-dependencies.coffee
deleted file mode 100644
index 5d91403d40..0000000000
--- a/src/app/config/vendor-dependencies/vendor-dependencies.coffee
+++ /dev/null
@@ -1,33 +0,0 @@
-#
-# Use this module to define all third-party dependencies
-# that are used in Doubtfire
-#
-angular.module('doubtfire.config.vendor-dependencies', [
-  # ng*
-  'ngCookies'
-  'ngCsv'
-  'ngSanitize'
-
-  # templates
-  'templates-app'
-
-  # ui.*
-  'ui.router'
-  'ui.router.upgrade'
-  'ui.bootstrap'
-  'ui.codemirror'
-
-  # other libraries
-  'angularFileUpload'
-  'angular.filter'
-  'localization'
-  'markdown'
-  'nvd3'
-  'xeditable'
-  'LocalStorageModule'
-  'angular-md5'
-
-  # analytics
-  'angulartics'
-  'angulartics.google.analytics'
-])
diff --git a/src/app/dashboard/f-cross-dashboard.component.html b/src/app/dashboard/f-cross-dashboard.component.html
new file mode 100644
index 0000000000..ade2821c20
--- /dev/null
+++ b/src/app/dashboard/f-cross-dashboard.component.html
@@ -0,0 +1,354 @@
+<div class="panel-full-screen flex h-full min-w-0 flex-col overflow-y-auto sm:overflow-hidden">
+  <div
+    aria-label="Global dashboard filters"
+    class="grid shrink-0 grid-cols-1 items-end gap-3 px-4 pt-4 sm:flex sm:flex-wrap sm:gap-4 sm:px-16"
+    role="search"
+  >
+    <mat-form-field appearance="outline" class="w-full sm:max-w-64">
+      <mat-label>Unit scope</mat-label>
+      <mat-select [value]="unitScope" (selectionChange)="setUnitScope($event.value)">
+        <mat-option value="active">Active units</mat-option>
+        <mat-option value="previous">Previous units</mat-option>
+        <mat-option value="all">All units</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full min-w-0 sm:max-w-96 sm:min-w-64">
+      <mat-label>Search all units and tasks</mat-label>
+      <input
+        aria-label="Global search"
+        autocomplete="off"
+        matInput
+        type="search"
+        [value]="globalSearchTerm"
+        (input)="setGlobalSearch($any($event.target).value)"
+      />
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+
+    <button
+      aria-controls="dashboard-secondary-filters"
+      class="flex min-h-12 w-full items-center justify-between rounded border border-gray-400 bg-white px-4 font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current sm:hidden"
+      data-mobile-global-filter-toggle
+      type="button"
+      [attr.aria-expanded]="mobileGlobalFiltersExpanded"
+      (click)="toggleMobileGlobalFilters()"
+    >
+      <span>More filters</span>
+      <span class="flex items-center gap-2">
+        @if (mobileSecondaryFilterCount > 0) {
+          <span class="rounded-full bg-formatif-blue px-2 py-0.5 text-sm text-white">
+            {{ mobileSecondaryFilterCount }} active
+          </span>
+        }
+        <mat-icon aria-hidden="true">
+          {{ mobileGlobalFiltersExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
+        </mat-icon>
+      </span>
+    </button>
+
+    <div
+      class="dashboard-global-advanced-filters min-w-0"
+      id="dashboard-secondary-filters"
+      [class.is-mobile-open]="mobileGlobalFiltersExpanded"
+    >
+      <mat-form-field appearance="outline" class="w-full sm:max-w-64">
+        <mat-label>Task statuses</mat-label>
+        <mat-select
+          aria-label="Task statuses"
+          multiple
+          [value]="selectedStatuses"
+          (selectionChange)="setStatuses($event.value)"
+        >
+          @for (option of statusOptions; track option.value) {
+            <mat-option [value]="option.value">{{ option.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="w-full sm:max-w-64">
+        <mat-label>Target grades</mat-label>
+        <mat-select
+          aria-label="Target grades"
+          multiple
+          [value]="selectedGrades"
+          (selectionChange)="setGrades($event.value)"
+        >
+          @for (option of gradeOptions; track option.value) {
+            <mat-option [value]="option.value">{{ option.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      <button
+        class="h-12 sm:mb-5"
+        mat-stroked-button
+        type="button"
+        [disabled]="!hasGlobalToolbarChanges"
+        (click)="clearGlobalFilters()"
+      >
+        Clear all
+      </button>
+
+      <div class="flex min-w-0 flex-col gap-1 sm:pb-5">
+        <label class="font-medium" for="dashboard-start-date">Start date</label>
+        <input
+          class="h-12 min-w-0 rounded border border-gray-400 bg-white px-3"
+          id="dashboard-start-date"
+          type="date"
+          [attr.aria-describedby]="isDateRangeInvalid ? 'date-range-error' : null"
+          [attr.aria-invalid]="isDateRangeInvalid ? 'true' : null"
+          [value]="startDate"
+          (input)="setStartDate($any($event.target).value)"
+        />
+      </div>
+      <div class="flex min-w-0 flex-col gap-1 sm:pb-5">
+        <label class="font-medium" for="dashboard-end-date">End date</label>
+        <input
+          class="h-12 min-w-0 rounded border border-gray-400 bg-white px-3"
+          id="dashboard-end-date"
+          type="date"
+          [attr.aria-describedby]="isDateRangeInvalid ? 'date-range-error' : null"
+          [attr.aria-invalid]="isDateRangeInvalid ? 'true' : null"
+          [value]="endDate"
+          (input)="setEndDate($any($event.target).value)"
+        />
+      </div>
+      <button
+        class="h-12 rounded border border-gray-400 bg-white px-4 font-medium disabled:cursor-not-allowed disabled:opacity-50 sm:mb-5"
+        type="button"
+        [disabled]="!startDate && !endDate"
+        (click)="clearDateRange()"
+      >
+        Clear dates
+      </button>
+
+      @if (isDateRangeInvalid) {
+        <p class="text-red-700 sm:mb-5" id="date-range-error" role="alert">
+          Start date must be on or before end date.
+        </p>
+      }
+    </div>
+  </div>
+  <div
+    class="dashboard-units-layout flex min-h-0 flex-1 flex-col gap-3 overflow-x-hidden px-4 pt-1 pb-4 sm:flex-row sm:gap-8 sm:overflow-x-auto sm:overflow-y-hidden sm:px-16 sm:pt-0"
+  >
+    @for (unit of displayedUnits; track unit.projectId) {
+      <section
+        class="flex h-auto w-full min-w-0 shrink-0 flex-col overflow-hidden rounded-lg shadow sm:h-full sm:w-128"
+        [attr.aria-label]="unit.code + ' project tasks'"
+      >
+        <div
+          class="flex w-full shrink-0 flex-col p-4 sm:flex-row sm:items-center sm:gap-4"
+          [class.bg-formatif-blue]="!unit.isPrevious"
+          [class.bg-green-600]="unit.isPrevious"
+        >
+          <h2 class="m-0 sm:hidden">
+            <button
+              class="flex min-h-12 w-full min-w-0 items-center gap-3 rounded text-left text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              data-mobile-unit-toggle
+              type="button"
+              [attr.aria-controls]="
+                'dashboard-unit-controls-' +
+                unit.projectId +
+                ' dashboard-unit-content-' +
+                unit.projectId
+              "
+              [attr.aria-expanded]="isMobileProjectExpanded(unit.projectId)"
+              (click)="toggleMobileProject(unit.projectId)"
+            >
+              <span class="min-w-0 grow">
+                <span class="block text-lg leading-tight font-semibold break-words">
+                  {{ unit.code }}
+                </span>
+                <span class="mt-1 block text-sm leading-tight break-words text-white/90">
+                  {{ unit.name }} · {{ unit.isPrevious ? 'Previous' : 'Active' }}
+                </span>
+                <span class="mt-2 flex min-w-0 flex-wrap gap-x-3 gap-y-1 text-sm">
+                  <span>{{ unit.mobileSummary.taskCountLabel }}</span>
+                  <span
+                    class="min-w-0 break-words"
+                    [class.font-semibold]="unit.mobileSummary.hasDeadlineWarning"
+                  >
+                    {{ unit.mobileSummary.deadlineLabel }}
+                  </span>
+                </span>
+              </span>
+              <mat-icon aria-hidden="true" class="shrink-0">
+                {{
+                  isMobileProjectExpanded(unit.projectId)
+                    ? 'keyboard_arrow_up'
+                    : 'keyboard_arrow_down'
+                }}
+              </mat-icon>
+            </button>
+          </h2>
+
+          <div class="hidden min-w-0 grow sm:block">
+            <a
+              class="m-0 mt-2 block truncate text-xl font-semibold text-white hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              [routerLink]="['/projects', unit.projectId, 'dashboard']"
+            >
+              {{ unit.code }}
+            </a>
+            <p class="m-0 truncate text-xl font-normal text-white">
+              {{ unit.isPrevious ? 'Previous' : 'Active' }}
+            </p>
+          </div>
+
+          <div
+            class="dashboard-project-controls min-w-0"
+            [class.is-mobile-open]="isMobileProjectExpanded(unit.projectId)"
+            [id]="'dashboard-unit-controls-' + unit.projectId"
+          >
+            <a
+              class="rounded py-2 text-sm font-semibold text-white underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:hidden"
+              [routerLink]="['/projects', unit.projectId, 'dashboard']"
+            >
+              Open {{ unit.code }} dashboard
+            </a>
+
+            <input
+              autocomplete="off"
+              class="text-md h-12 min-w-0 rounded-md bg-white p-2 px-4 text-gray-900 placeholder:text-gray-600 placeholder:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:h-full sm:w-56"
+              placeholder="Search tasks..."
+              type="search"
+              [attr.aria-label]="'Search tasks in ' + unit.code"
+              [value]="getSearchTerm(unit.projectId)"
+              (input)="setSearch(unit.projectId, $any($event.target).value)"
+            />
+
+            <div class="flex min-h-12 flex-wrap items-center gap-1">
+              <button
+                mat-icon-button
+                [attr.aria-label]="'Sort tasks in ' + unit.code"
+                [matMenuTriggerFor]="sortmenu"
+              >
+                <mat-icon style="color: white">sort</mat-icon>
+              </button>
+              <mat-menu #sortmenu="matMenu">
+                @for (mode of sortOptions; track mode) {
+                  <button mat-menu-item (click)="setSort(unit.projectId, mode)">
+                    {{ mode }}
+                  </button>
+                }
+              </mat-menu>
+
+              <button
+                mat-icon-button
+                [attr.aria-label]="'Filter tasks in ' + unit.code"
+                [matMenuTriggerFor]="filtermenu"
+              >
+                <mat-icon style="color: white">filter_list_alt</mat-icon>
+              </button>
+              <mat-menu #filtermenu="matMenu">
+                @for (mode of filterOptions; track mode) {
+                  <div
+                    mat-menu-item
+                    (click)="$event.stopPropagation(); toggleFilter(unit.projectId, mode)"
+                  >
+                    <mat-checkbox [checked]="isFilterEnabled(unit.projectId, mode)" />
+                    {{ mode }}
+                  </div>
+                }
+              </mat-menu>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="dashboard-project-content min-h-0 flex-col"
+          [class.is-mobile-open]="isMobileProjectExpanded(unit.projectId)"
+          [id]="'dashboard-unit-content-' + unit.projectId"
+        >
+          @if (unit.gradeSummaries.length > 0) {
+            <div
+              class="border-x border-gray-300 bg-gray-50 px-4 py-3"
+              [attr.aria-label]="'Grade task completion for ' + unit.code"
+            >
+              <p class="m-0 text-sm font-semibold">Grade task completion</p>
+              <div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                @for (summary of unit.gradeSummaries; track summary.targetGrade) {
+                  <span>
+                    @if (summary.total === 0) {
+                      {{ summary.label }}: 0 tasks
+                    } @else {
+                      {{ summary.label }}: {{ summary.completed }} of {{ summary.total }} complete
+                      ({{ summary.percentage }}%)
+                    }
+                  </span>
+                }
+              </div>
+            </div>
+          }
+
+          <div class="flex min-h-0 flex-col overflow-visible sm:overflow-y-auto">
+            @for (task of unit.tasks; track task.abbreviation) {
+              <div class="min-w-0 border-b border-gray-300">
+                <f-dashboard-list-item [task]="task"></f-dashboard-list-item>
+              </div>
+            }
+
+            @if (unit.tasks.length === 0) {
+              <div class="border border-t-0 border-gray-300 p-6 text-center" role="status">
+                @if (hasActiveTaskCriteria(unit.projectId)) {
+                  <p class="m-0">No tasks match the current search and filters.</p>
+                } @else {
+                  <p class="m-0">No tasks are available.</p>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </section>
+    }
+
+    @if (
+      hasGlobalTaskCriteria &&
+      displayedUnits.length === 0 &&
+      !loadingPreviousUnits &&
+      !previousUnitsLoadError
+    ) {
+      <div
+        class="flex w-full max-w-2xl shrink-0 items-center self-start rounded border border-gray-300 bg-white p-6"
+        role="status"
+      >
+        <p class="m-0">No tasks match the current global search and filters.</p>
+      </div>
+    }
+
+    @if (unitScope !== 'active' && loadingPreviousUnits) {
+      <div
+        class="flex w-full shrink-0 items-center self-start rounded border border-gray-300 p-6 sm:w-80"
+      >
+        Loading previous units...
+      </div>
+    }
+
+    @if (unitScope !== 'active' && previousUnitsLoadError) {
+      <div
+        class="flex w-full shrink-0 flex-col self-start rounded border border-gray-300 p-6 sm:w-96"
+      >
+        <h3 class="mt-0">Previous units</h3>
+        <p class="mb-0">Previous units could not be loaded.</p>
+      </div>
+    }
+
+    @if (
+      unitScope !== 'active' &&
+      previousUnitsLoaded &&
+      !loadingPreviousUnits &&
+      previousUnits.length === 0 &&
+      !hasGlobalTaskCriteria
+    ) {
+      <div class="flex w-full shrink-0 flex-col self-start overflow-hidden rounded shadow sm:w-96">
+        <div class="bg-green-600 p-4 text-white">
+          <h3 class="m-0">Previous units</h3>
+        </div>
+        <div class="border border-t-0 border-gray-300 p-6">
+          <p class="m-0">No previous units are available.</p>
+        </div>
+      </div>
+    }
+  </div>
+</div>
diff --git a/src/app/dashboard/f-cross-dashboard.component.scss b/src/app/dashboard/f-cross-dashboard.component.scss
new file mode 100644
index 0000000000..33956fd2bd
--- /dev/null
+++ b/src/app/dashboard/f-cross-dashboard.component.scss
@@ -0,0 +1,50 @@
+.dashboard-global-advanced-filters {
+  display: none !important;
+}
+
+.dashboard-global-advanced-filters.is-mobile-open {
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+}
+
+.dashboard-project-controls,
+.dashboard-project-content {
+  display: none !important;
+}
+
+.dashboard-project-controls.is-mobile-open,
+.dashboard-project-content.is-mobile-open {
+  display: flex !important;
+}
+
+.dashboard-project-controls {
+  width: 100%;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .dashboard-global-advanced-filters,
+  .dashboard-global-advanced-filters.is-mobile-open {
+    display: contents !important;
+  }
+
+  .dashboard-project-controls,
+  .dashboard-project-content {
+    display: flex !important;
+  }
+
+  .dashboard-project-controls {
+    width: auto;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 0;
+  }
+
+  .dashboard-project-content {
+    flex: 1 1 auto;
+  }
+}
diff --git a/src/app/dashboard/f-cross-dashboard.component.spec.ts b/src/app/dashboard/f-cross-dashboard.component.spec.ts
new file mode 100644
index 0000000000..80e65c2411
--- /dev/null
+++ b/src/app/dashboard/f-cross-dashboard.component.spec.ts
@@ -0,0 +1,1531 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonHarness} from '@angular/material/button/testing';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSelectHarness} from '@angular/material/select/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {ActivatedRoute, Router, convertToParamMap} from '@angular/router';
+import {BehaviorSubject, Observable, ReplaySubject, Subject, of, throwError} from 'rxjs';
+import {Grade} from '../api/models/grade';
+import {Project} from '../api/models/project';
+import {Task} from '../api/models/task';
+import {TaskStatus, TaskStatusEnum} from '../api/models/task-status';
+import {ProjectService} from '../api/services/project.service';
+import {
+  TaskRecommendation,
+  TaskRecommendationService,
+} from '../api/services/task-recommendation.service';
+import {TaskService} from '../api/services/task.service';
+import {GlobalStateService} from '../projects/states/index/global-state.service';
+import {CrossDashboardComponent} from './f-cross-dashboard.component';
+
+describe('CrossDashboardComponent', () => {
+  let component: CrossDashboardComponent;
+  let fixture: ComponentFixture<CrossDashboardComponent>;
+  let projectsSubject: BehaviorSubject<Project[]>;
+  let projectServiceQuery: ReturnType<typeof vi.fn>;
+  let recommendationsSubject: ReplaySubject<TaskRecommendation[]>;
+  let recommendationServiceGetAll: ReturnType<typeof vi.fn>;
+  let taskStatusSubject: Subject<Task>;
+  let nextTaskDefinitionId: number;
+
+  const syncView = async (): Promise<void> => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  };
+
+  const makeDate = (day: number, hour = 12): Date => new Date(2026, 7, day, hour, 0, 0);
+
+  const makeTask = (
+    name: string,
+    abbreviation: string,
+    status: TaskStatusEnum,
+    dueDate: Date | null | undefined,
+    topWeight: number = 0,
+    targetGrade: number = 0,
+    targetGradeText: string = Grade.GRADES[targetGrade],
+  ): Task =>
+    ({
+      status,
+      topWeight,
+      numNewComments: 0,
+      localDueDate: vi.fn().mockReturnValue(dueDate),
+      inSubmittedState: vi.fn().mockReturnValue(TaskStatus.SUBMITTED_STATUSES.includes(status)),
+      definition: {
+        id: nextTaskDefinitionId++,
+        name,
+        abbreviation,
+        targetGrade,
+        targetGradeText,
+        description: `${name} description`,
+        targetDate: dueDate,
+      },
+    }) as unknown as Task;
+
+  const makeProject = (
+    id: number,
+    code: string,
+    isActive: boolean,
+    tasks: Task[] = [],
+    name: string = `${code} Unit`,
+  ): Project => {
+    const project = {
+      id,
+      tasks,
+      unit: {
+        code,
+        name,
+        isActive,
+        taskDefinitions: [],
+      },
+      calcTopTasks: vi.fn(),
+      activeTasks: vi.fn().mockReturnValue(tasks),
+    } as unknown as Project;
+
+    tasks.forEach((task) => (task.project = project));
+    return project;
+  };
+
+  beforeEach(async () => {
+    projectsSubject = new BehaviorSubject<Project[]>([]);
+    projectServiceQuery = vi.fn().mockReturnValue(of([]));
+    recommendationsSubject = new ReplaySubject<TaskRecommendation[]>(1);
+    recommendationsSubject.next([]);
+    recommendationServiceGetAll = vi.fn().mockReturnValue(recommendationsSubject.asObservable());
+    taskStatusSubject = new Subject<Task>();
+    nextTaskDefinitionId = 100;
+
+    const globalStateServiceStub = {
+      onLoad: (callback: () => void): void => callback(),
+      currentUserProjects: {
+        values: projectsSubject.asObservable(),
+        get currentValues(): Project[] {
+          return projectsSubject.value;
+        },
+      },
+    };
+
+    const projectServiceStub = {
+      query: projectServiceQuery,
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [CrossDashboardComponent],
+      imports: [
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatSelectModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {provide: ActivatedRoute, useValue: {queryParamMap: of(convertToParamMap({}))}},
+        {provide: Router, useValue: {navigate: vi.fn().mockResolvedValue(true)}},
+        {
+          provide: GlobalStateService,
+          useValue: globalStateServiceStub,
+        },
+        {
+          provide: ProjectService,
+          useValue: projectServiceStub,
+        },
+        {
+          provide: TaskRecommendationService,
+          useValue: {getAll: recommendationServiceGetAll},
+        },
+        {
+          provide: TaskService,
+          useValue: {taskStatusUpdated$: taskStatusSubject.asObservable()},
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CrossDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    projectsSubject.complete();
+    recommendationsSubject.complete();
+    taskStatusSubject.complete();
+  });
+
+  const recommendationFor = (task: Task, projectId: number, score: number): TaskRecommendation => ({
+    task_id: null,
+    task_definition_id: task.definition.id,
+    task_name: task.definition.name,
+    project_id: projectId,
+    unit_id: 20,
+    priority_score: score,
+  });
+
+  it('uses Active units as the default scope', () => {
+    expect(component.unitScope).toBe('active');
+    expect(projectServiceQuery).not.toHaveBeenCalled();
+  });
+
+  it('keeps only active projects in the active-unit collection', () => {
+    projectsSubject.next([makeProject(1, 'COS10001', true), makeProject(2, 'COS30046', false)]);
+
+    expect(component.activeUnits.map((unit) => unit.code)).toEqual(['COS10001']);
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['COS10001']);
+  });
+
+  it('includes authorised tasks above the project target grade', () => {
+    const passTask = makeTask('Pass Task', 'P1', 'complete', makeDate(10), 0, 0);
+    const distinctionTask = makeTask('Distinction Task', 'D1', 'redo', makeDate(11), 0, 2);
+    const project = makeProject(1, 'COS20007', true, [passTask, distinctionTask]);
+    const targetGradeTasks = vi.fn().mockReturnValue([passTask]);
+
+    project.targetGrade = 0;
+    project.activeTasks = targetGradeTasks;
+    projectsSubject.next([project]);
+
+    expect(targetGradeTasks).not.toHaveBeenCalled();
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'D1',
+      'P1',
+    ]);
+  });
+
+  it('maps each task using its effective due date and submitted state', () => {
+    const targetDate = makeDate(30);
+    const effectiveDate = makeDate(23);
+    const activeTask = makeTask('Active task', '1.1P', 'working_on_it', targetDate);
+    const submittedTask = makeTask('Submitted task', '1.2P', 'ready_for_feedback', targetDate);
+
+    vi.mocked(activeTask.localDueDate).mockReturnValue(effectiveDate);
+    projectsSubject.next([makeProject(1, 'COS10001', true, [activeTask, submittedTask])]);
+
+    expect(component.activeUnits[0].tasks[0]).toMatchObject({
+      dueDate: effectiveDate,
+      showDueWarning: true,
+    });
+    expect(component.activeUnits[0].tasks[1].showDueWarning).toBe(false);
+  });
+
+  it('maps feedback metadata and safely defaults missing metadata to false', () => {
+    const noMetadataTask = makeTask('No feedback metadata', '1.1P', 'working_on_it', makeDate(10));
+    const feedbackTask = makeTask('Task with feedback', '1.2P', 'fix_and_resubmit', makeDate(11));
+
+    feedbackTask.hasFeedback = true;
+
+    projectsSubject.next([makeProject(1, 'COS10001', true, [noMetadataTask, feedbackTask])]);
+
+    const mappedTasks = component.activeUnits[0].tasks;
+
+    expect(mappedTasks.find((task) => task.abbreviation === '1.1P')?.hasFeedback).toBe(false);
+    expect(mappedTasks.find((task) => task.abbreviation === '1.2P')?.hasFeedback).toBe(true);
+  });
+
+  it('loads and displays previous units in Previous units mode', () => {
+    projectServiceQuery.mockReturnValue(
+      of([makeProject(1, 'COS10001', true), makeProject(2, 'COS30046', false)]),
+    );
+
+    component.setUnitScope('previous');
+
+    expect(projectServiceQuery).toHaveBeenCalledTimes(1);
+    expect(component.previousUnitsLoaded).toBe(true);
+    expect(component.loadingPreviousUnits).toBe(false);
+    expect(component.previousUnits.map((unit) => unit.code)).toEqual(['COS30046']);
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['COS30046']);
+    expect(component.previousUnits[0].isPrevious).toBe(true);
+  });
+
+  it('shows active units first and previous units afterward in All units mode', () => {
+    projectsSubject.next([makeProject(1, 'COS10001', true), makeProject(2, 'COS20007', true)]);
+
+    projectServiceQuery.mockReturnValue(
+      of([
+        makeProject(1, 'COS10001', true),
+        makeProject(2, 'COS20007', true),
+        makeProject(3, 'COS30046', false),
+      ]),
+    );
+
+    component.setUnitScope('all');
+
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual([
+      'COS10001',
+      'COS20007',
+      'COS30046',
+    ]);
+  });
+
+  it('does not request previous units again after they have loaded', () => {
+    projectServiceQuery.mockReturnValue(of([makeProject(3, 'COS30046', false)]));
+
+    component.setUnitScope('previous');
+    component.setUnitScope('active');
+    component.setUnitScope('all');
+
+    expect(projectServiceQuery).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the no-previous-units empty state', () => {
+    projectServiceQuery.mockReturnValue(of([]));
+
+    component.setUnitScope('previous');
+    fixture.detectChanges();
+
+    expect(component.previousUnitsLoaded).toBe(true);
+    expect(component.loadingPreviousUnits).toBe(false);
+    expect(component.previousUnits).toEqual([]);
+    expect(fixture.nativeElement.textContent).toContain('Previous units');
+    expect(fixture.nativeElement.textContent).toContain('No previous units are available.');
+  });
+
+  it('shows an error state when previous units cannot be loaded', () => {
+    projectServiceQuery.mockReturnValue(
+      throwError(() => new Error('Unable to load previous units')),
+    );
+
+    component.setUnitScope('previous');
+    fixture.detectChanges();
+
+    expect(component.previousUnitsLoadError).toBe(true);
+    expect(component.loadingPreviousUnits).toBe(false);
+    expect(fixture.nativeElement.textContent).toContain('Previous units could not be loaded.');
+  });
+
+  it('filters only the selected unit and ignores case and outer whitespace', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'not_started', new Date(2026, 7, 12)),
+        makeTask('Leadership Report', '5.3D', 'not_started', new Date(2026, 7, 18)),
+      ]),
+      makeProject(2, 'SIT782', true, [
+        makeTask('Security Report', '2.1P', 'not_started', new Date(2026, 7, 15)),
+      ]),
+    ]);
+
+    await syncView();
+
+    expect(component.displayedUnits).toHaveLength(2);
+
+    const searchInputs = fixture.nativeElement.querySelectorAll(
+      'input[aria-label^="Search tasks in"]',
+    ) as NodeListOf<HTMLInputElement>;
+
+    expect(searchInputs).toHaveLength(2);
+
+    searchInputs[0].value = '  RETROSPECTIVE  ';
+    searchInputs[0].dispatchEvent(new Event('input', {bubbles: true}));
+
+    await syncView();
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['5.1P']);
+
+    expect(component.displayedUnits[1].tasks.map((task) => task.abbreviation)).toEqual(['2.1P']);
+  });
+
+  it('matches abbreviation, status, unit code and displayed due date', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'ready_for_feedback', new Date(2026, 7, 12)),
+      ]),
+    ]);
+
+    const matchingQueries = [
+      '5.1p',
+      'Awaiting Feedback',
+      'sit764',
+      'Wednesday 12 August',
+      '12/08/2026',
+      '2026-08-12',
+    ];
+
+    for (const query of matchingQueries) {
+      component.setSearch(1, query);
+
+      expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['5.1P']);
+    }
+  });
+
+  it('renders per-unit search with an explicit readable surface and placeholder', async () => {
+    projectsSubject.next([makeProject(1, 'SIT764', true)]);
+
+    await syncView();
+
+    const searchInput = fixture.nativeElement.querySelector(
+      'input[aria-label="Search tasks in SIT764"]',
+    ) as HTMLInputElement;
+
+    expect(searchInput.classList.contains('bg-white')).toBe(true);
+    expect(searchInput.classList.contains('text-gray-900')).toBe(true);
+    expect(searchInput.classList.contains('placeholder:text-gray-600')).toBe(true);
+    expect(searchInput.classList.contains('placeholder:opacity-100')).toBe(true);
+  });
+
+  it('does not confuse Australian dates that contain the same numbers in another order', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('December Task', 'DEC', 'not_started', new Date(2026, 11, 8)),
+      ]),
+    ]);
+
+    component.setSearch(1, '12/08/2026');
+    expect(component.displayedUnits[0].tasks).toEqual([]);
+
+    component.setSearch(1, '08/12/2026');
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['DEC']);
+  });
+
+  it('matches subtitle and description text shown on the task card', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'not_started', new Date(2026, 7, 12)),
+      ]),
+    ]);
+
+    component.setSearch(1, 'Pass');
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['5.1P']);
+
+    component.setSearch(1, 'description');
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['5.1P']);
+
+    component.setSearch(1, 'not shown anywhere');
+    expect(component.displayedUnits[0].tasks).toEqual([]);
+  });
+
+  it('keeps punctuation-only input visible without filtering tasks', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'not_started', new Date(2026, 7, 12)),
+        makeTask('Leadership Report', '5.3D', 'not_started', new Date(2026, 7, 18)),
+      ]),
+    ]);
+
+    await syncView();
+
+    const searchInput = fixture.nativeElement.querySelector(
+      'input[aria-label^="Search tasks in"]',
+    ) as HTMLInputElement;
+
+    searchInput.value = 'retro';
+    searchInput.dispatchEvent(new Event('input', {bubbles: true}));
+    await syncView();
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['5.1P']);
+
+    searchInput.value = '-';
+    searchInput.dispatchEvent(new Event('input', {bubbles: true}));
+    await syncView();
+
+    expect(component.getSearchTerm(1)).toBe('-');
+    expect(component.hasSearchTerm(1)).toBe(false);
+    expect(searchInput.value).toBe('-');
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      '5.1P',
+      '5.3D',
+    ]);
+  });
+
+  it('clears the search and restores the original task list', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'not_started', new Date(2026, 7, 12)),
+        makeTask('Leadership Report', '5.3D', 'not_started', new Date(2026, 7, 18)),
+      ]),
+    ]);
+
+    component.setSearch(1, 'does not exist');
+
+    expect(component.displayedUnits[0].tasks).toEqual([]);
+
+    component.setSearch(1, '   ');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      '5.1P',
+      '5.3D',
+    ]);
+  });
+
+  it('combines search with the Hide Completed filter', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Completed Security Review', '1.1P', 'complete', new Date(2026, 7, 10)),
+        makeTask('Open Security Review', '1.2P', 'not_started', new Date(2026, 7, 12)),
+        makeTask('Open Calendar Review', '1.3P', 'not_started', new Date(2026, 7, 14)),
+      ]),
+    ]);
+
+    component.setSearch(1, 'security');
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      '1.2P',
+      '1.1P',
+    ]);
+
+    component.toggleFilter(1, component.filterOptions[0]);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['1.2P']);
+
+    component.setSearch(1, '');
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      '1.2P',
+      '1.3P',
+    ]);
+  });
+
+  it('preserves Due Date sorting after search is applied', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Later Security Review', 'LATE', 'not_started', new Date(2026, 7, 20)),
+        makeTask('Calendar Setup', 'OTHER', 'not_started', new Date(2026, 7, 5)),
+        makeTask('Earlier Security Review', 'EARLY', 'not_started', new Date(2026, 7, 10)),
+      ]),
+    ]);
+
+    const dueDateSort = component.sortOptions.find((mode) => mode === 'Due Date');
+
+    if (!dueDateSort) {
+      throw new Error('Due Date sort option is missing');
+    }
+
+    component.setSort(1, dueDateSort);
+    component.setSearch(1, 'security');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'EARLY',
+      'LATE',
+    ]);
+  });
+
+  it('sorts recommendations by project and task-definition id, including virtual tasks', () => {
+    const lowerPriority = makeTask('Lower priority', 'LOW', 'not_started', makeDate(10), 1);
+    const recommended = makeTask('Recommended next', 'NEXT', 'not_started', makeDate(20), 4);
+    const project = makeProject(7, 'DEMO20007', true, [lowerPriority, recommended]);
+
+    projectsSubject.next([project]);
+    recommendationsSubject.next([recommendationFor(recommended, project.id, 95)]);
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'NEXT',
+      'LOW',
+    ]);
+  });
+
+  it('refreshes recommendations after a status change in an active project', async () => {
+    const task = makeTask('Current task', 'CURRENT', 'working_on_it', makeDate(10));
+    const project = makeProject(7, 'DEMO20007', true, [task]);
+
+    projectsSubject.next([project]);
+    const callsBeforeStatusChange = recommendationServiceGetAll.mock.calls.length;
+    taskStatusSubject.next(task);
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(recommendationServiceGetAll).toHaveBeenCalledTimes(callsBeforeStatusChange + 1);
+  });
+
+  it('refreshes recommendation scores whenever the active project cache changes', () => {
+    const callsBeforeProjectChanges = recommendationServiceGetAll.mock.calls.length;
+
+    projectsSubject.next([makeProject(1, 'COS10001', true)]);
+    projectsSubject.next([makeProject(1, 'COS10001', true), makeProject(2, 'COS30046', true)]);
+
+    expect(recommendationServiceGetAll).toHaveBeenCalledTimes(callsBeforeProjectChanges + 2);
+  });
+
+  it('does not refresh recommendations for task changes in an inactive project', async () => {
+    const task = makeTask('Previous task', 'PREVIOUS', 'working_on_it', makeDate(10));
+    const project = makeProject(8, 'COS30046', false, [task]);
+
+    projectsSubject.next([project]);
+    const callsBeforeStatusChange = recommendationServiceGetAll.mock.calls.length;
+    taskStatusSubject.next(task);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(recommendationServiceGetAll).toHaveBeenCalledTimes(callsBeforeStatusChange);
+  });
+
+  it('cancels a recommendation request superseded by a newer project snapshot', () => {
+    const cancelled = vi.fn();
+    const pendingRequest: Observable<TaskRecommendation[]> = new Observable(() => cancelled);
+
+    recommendationServiceGetAll.mockImplementationOnce(() => pendingRequest);
+    recommendationServiceGetAll.mockImplementation(() => of([]));
+
+    projectsSubject.next([makeProject(1, 'COS10001', true)]);
+    expect(cancelled).not.toHaveBeenCalled();
+
+    projectsSubject.next([makeProject(1, 'COS10001', true), makeProject(2, 'COS20007', true)]);
+
+    expect(cancelled).toHaveBeenCalledOnce();
+  });
+
+  it('retries after a recommendation error on the next active task status change', async () => {
+    const lowerPriority = makeTask('Lower priority', 'LOW', 'working_on_it', makeDate(10), 0);
+    const higherPriority = makeTask('Higher priority', 'HIGH', 'working_on_it', makeDate(20), 5);
+    const project = makeProject(1, 'COS10001', true, [lowerPriority, higherPriority]);
+
+    recommendationServiceGetAll.mockImplementationOnce(() =>
+      throwError(() => new Error('Recommendations unavailable')),
+    );
+    recommendationServiceGetAll.mockImplementation(() =>
+      of([
+        recommendationFor(lowerPriority, project.id, 25),
+        recommendationFor(higherPriority, project.id, 90),
+      ]),
+    );
+
+    projectsSubject.next([project]);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'LOW',
+      'HIGH',
+    ]);
+
+    taskStatusSubject.next(lowerPriority);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'HIGH',
+      'LOW',
+    ]);
+  });
+
+  it('stops project and task-status refreshes after destruction', async () => {
+    const task = makeTask('Current task', 'CURRENT', 'working_on_it', makeDate(10));
+    const project = makeProject(1, 'COS10001', true, [task]);
+
+    projectsSubject.next([project]);
+    const callsBeforeDestruction = recommendationServiceGetAll.mock.calls.length;
+    fixture.destroy();
+
+    projectsSubject.next([project, makeProject(2, 'COS20007', true)]);
+    taskStatusSubject.next(task);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(recommendationServiceGetAll).toHaveBeenCalledTimes(callsBeforeDestruction);
+  });
+
+  it('keeps final-state tasks below open tasks in every sort mode', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Completed First', 'DONE-FIRST', 'complete', makeDate(3), 0),
+        makeTask('Open Later', 'OPEN-LATE', 'not_started', makeDate(20), 4),
+        makeTask('Final Later', 'DONE-LATE', 'fail', makeDate(25), 5),
+        makeTask('Open Earlier', 'OPEN-EARLY', 'working_on_it', makeDate(10), 1),
+      ]),
+    ]);
+
+    const expectedByMode: Record<string, string[]> = {
+      Recommended: ['OPEN-EARLY', 'OPEN-LATE', 'DONE-FIRST', 'DONE-LATE'],
+      'Due Date': ['OPEN-EARLY', 'OPEN-LATE', 'DONE-FIRST', 'DONE-LATE'],
+      Default: ['OPEN-EARLY', 'OPEN-LATE', 'DONE-FIRST', 'DONE-LATE'],
+    };
+
+    component.sortOptions.forEach((mode) => {
+      component.setSort(1, mode);
+
+      expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(
+        expectedByMode[mode],
+      );
+    });
+  });
+
+  it('applies separate search state in All and Previous unit scopes', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Current Task', 'CUR', 'not_started', new Date(2026, 7, 12)),
+      ]),
+    ]);
+
+    projectServiceQuery.mockReturnValue(
+      of([
+        makeProject(2, 'SIT704', false, [
+          makeTask('Archived Security Task', 'OLD1', 'complete', new Date(2025, 7, 12)),
+          makeTask('Archived Project Task', 'OLD2', 'complete', new Date(2025, 7, 15)),
+        ]),
+      ]),
+    );
+
+    component.setUnitScope('all');
+    component.setSearch(2, 'security');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['CUR']);
+
+    expect(component.displayedUnits[1].tasks.map((task) => task.abbreviation)).toEqual(['OLD1']);
+
+    component.setUnitScope('previous');
+
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT704']);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['OLD1']);
+  });
+
+  it('shows a no-results message without hiding the unit', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'not_started', new Date(2026, 7, 12)),
+      ]),
+    ]);
+
+    await syncView();
+
+    expect(fixture.nativeElement.textContent).toContain('SIT764');
+    expect(fixture.nativeElement.querySelectorAll('f-dashboard-list-item')).toHaveLength(1);
+
+    component.setSearch(1, 'not a matching task');
+
+    await syncView();
+
+    expect(component.displayedUnits[0].tasks).toEqual([]);
+    expect(fixture.nativeElement.textContent).toContain('SIT764');
+    expect(fixture.nativeElement.textContent).toContain(
+      'No tasks match the current search and filters.',
+    );
+    expect(fixture.nativeElement.querySelectorAll('f-dashboard-list-item')).toHaveLength(0);
+
+    component.setSearch(1, '');
+
+    await syncView();
+
+    expect(component.displayedUnits[0].tasks).toHaveLength(1);
+    expect(component.displayedUnits[0].tasks[0].title).toBe('Individual Retrospective');
+    expect(fixture.nativeElement.querySelectorAll('f-dashboard-list-item')).toHaveLength(1);
+    expect(fixture.nativeElement.textContent).not.toContain(
+      'No tasks match the current search and filters.',
+    );
+  });
+
+  it('includes tasks exactly on the start and end boundaries', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Before Task', 'BEFORE', 'not_started', makeDate(9)),
+        makeTask('Start Task', 'START', 'not_started', makeDate(10, 23)),
+        makeTask('End Task', 'END', 'not_started', makeDate(20, 1)),
+        makeTask('After Task', 'AFTER', 'not_started', makeDate(21)),
+      ]),
+    ]);
+
+    component.setStartDate('2026-08-10');
+    component.setEndDate('2026-08-20');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'START',
+      'END',
+    ]);
+  });
+
+  it('supports start-date-only filtering', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Before Task', 'BEFORE', 'not_started', makeDate(9)),
+        makeTask('Boundary Task', 'BOUNDARY', 'not_started', makeDate(10)),
+        makeTask('After Task', 'AFTER', 'not_started', makeDate(11)),
+      ]),
+    ]);
+
+    component.setStartDate('2026-08-10');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'BOUNDARY',
+      'AFTER',
+    ]);
+  });
+
+  it('supports end-date-only filtering', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Before Task', 'BEFORE', 'not_started', makeDate(9)),
+        makeTask('Boundary Task', 'BOUNDARY', 'not_started', makeDate(10)),
+        makeTask('After Task', 'AFTER', 'not_started', makeDate(11)),
+      ]),
+    ]);
+
+    component.setEndDate('2026-08-10');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'BEFORE',
+      'BOUNDARY',
+    ]);
+  });
+
+  it('detects a reversed date range and does not apply it', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('First Task', 'TASK1', 'not_started', makeDate(10)),
+        makeTask('Second Task', 'TASK2', 'not_started', makeDate(20)),
+      ]),
+    ]);
+
+    component.setStartDate('2026-08-20');
+    component.setEndDate('2026-08-10');
+
+    expect(component.startDate).toBe('2026-08-20');
+    expect(component.endDate).toBe('2026-08-10');
+    expect(component.isDateRangeInvalid).toBe(true);
+    expect(component.isDateFilterActive).toBe(false);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'TASK1',
+      'TASK2',
+    ]);
+  });
+
+  it('keeps undated tasks without a filter and excludes them while filtering', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Valid Task', 'VALID', 'not_started', makeDate(15)),
+        makeTask('Missing Date Task', 'MISSING', 'not_started', undefined),
+        makeTask('Invalid Date Task', 'INVALID', 'not_started', new Date('invalid')),
+      ]),
+    ]);
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'VALID',
+      'MISSING',
+      'INVALID',
+    ]);
+
+    component.setStartDate('2026-08-10');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['VALID']);
+  });
+
+  it('clears both dates and restores the unfiltered task list', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Early Task', 'EARLY', 'not_started', makeDate(5)),
+        makeTask('Late Task', 'LATE', 'not_started', makeDate(20)),
+      ]),
+    ]);
+
+    component.setStartDate('2026-08-10');
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['LATE']);
+
+    component.clearDateRange();
+
+    expect(component.startDate).toBe('');
+    expect(component.endDate).toBe('');
+    expect(component.isDateFilterActive).toBe(false);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'EARLY',
+      'LATE',
+    ]);
+  });
+
+  it('keeps a unit visible when no tasks match the selected date range', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [makeTask('Early Task', 'TASK1', 'not_started', makeDate(5))]),
+    ]);
+
+    component.setStartDate('2026-08-20');
+
+    expect(component.isDateFilterActive).toBe(true);
+    expect(component.displayedUnits).toHaveLength(1);
+    expect(component.displayedUnits[0].code).toBe('SIT764');
+    expect(component.displayedUnits[0].tasks).toHaveLength(0);
+  });
+
+  it('combines date filtering with Hide Completed and Due Date sorting', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Later Review', 'LATER', 'not_started', makeDate(18), 3),
+        makeTask('Completed Review', 'COMPLETE', 'complete', makeDate(12), 1),
+        makeTask('Earlier Review', 'EARLIER', 'not_started', makeDate(15), 2),
+        makeTask('Outside Review', 'OUTSIDE', 'not_started', makeDate(25), 4),
+      ]),
+    ]);
+
+    component.setStartDate('2026-08-10');
+    component.setEndDate('2026-08-20');
+
+    const hideCompleted = component.filterOptions.find((mode) => mode === 'Hide Completed');
+    if (!hideCompleted) {
+      throw new Error('Hide Completed filter option is missing');
+    }
+    component.toggleFilter(1, hideCompleted);
+
+    const dueDateSort = component.sortOptions.find((mode) => mode === 'Due Date');
+    if (!dueDateSort) {
+      throw new Error('Due Date sort option is missing');
+    }
+    component.setSort(1, dueDateSort);
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'EARLIER',
+      'LATER',
+    ]);
+  });
+
+  it('applies the same date range in Active, Previous and All unit views', () => {
+    const activeProject = makeProject(1, 'SIT764', true, [
+      makeTask('Active Early Task', 'ACTIVE-EARLY', 'not_started', makeDate(10)),
+    ]);
+    const previousProject = makeProject(2, 'SIT704', false, [
+      makeTask('Previous Late Task', 'PREVIOUS-LATE', 'not_started', makeDate(20)),
+    ]);
+
+    projectsSubject.next([activeProject]);
+    projectServiceQuery.mockReturnValue(of([activeProject, previousProject]));
+
+    component.setStartDate('2026-08-15');
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764']);
+    expect(component.displayedUnits[0].tasks).toHaveLength(0);
+
+    component.setUnitScope('previous');
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT704']);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'PREVIOUS-LATE',
+    ]);
+
+    component.setUnitScope('all');
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764', 'SIT704']);
+    expect(component.displayedUnits[0].tasks).toHaveLength(0);
+    expect(component.displayedUnits[1].tasks.map((task) => task.abbreviation)).toEqual([
+      'PREVIOUS-LATE',
+    ]);
+  });
+
+  it('combines per-unit search with dashboard date filtering', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Early Security Review', 'EARLY', 'not_started', makeDate(8)),
+        makeTask('In-range Security Review', 'MATCH', 'not_started', makeDate(15)),
+        makeTask('In-range Calendar Setup', 'OTHER', 'not_started', makeDate(16)),
+      ]),
+    ]);
+
+    component.setSearch(1, 'security');
+    component.setStartDate('2026-08-10');
+    component.setEndDate('2026-08-20');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['MATCH']);
+  });
+
+  it('renders one labelled global toolbar with canonical status and grade choices', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'not_started', makeDate(12)),
+      ]),
+    ]);
+
+    await syncView();
+
+    expect(
+      fixture.nativeElement.querySelectorAll('[aria-label="Global dashboard filters"]'),
+    ).toHaveLength(1);
+    expect(
+      fixture.nativeElement.querySelectorAll('input[aria-label="Global search"]'),
+    ).toHaveLength(1);
+    expect(
+      fixture.nativeElement.querySelectorAll('input[aria-label^="Search tasks in"]'),
+    ).toHaveLength(1);
+
+    expect(component.statusOptions).toEqual(
+      TaskStatus.STATUS_KEYS.map((value) => ({
+        value,
+        label: TaskStatus.STATUS_LABELS.get(value),
+      })),
+    );
+    expect(component.statusOptions).toEqual(
+      expect.arrayContaining([
+        {value: 'complete', label: 'Complete'},
+        {value: 'not_started', label: 'Not Started'},
+        {value: 'redo', label: 'Redo'},
+        {value: 'fix_and_resubmit', label: 'Resubmit'},
+      ]),
+    );
+    expect(component.gradeOptions).toEqual([
+      {value: 0, label: 'Pass'},
+      {value: 1, label: 'Credit'},
+      {value: 2, label: 'Distinction'},
+      {value: 3, label: 'High Distinction'},
+    ]);
+  });
+
+  it('binds both multiple-select controls and Clear all through the rendered toolbar', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Security Pass Task', 'P1', 'complete', makeDate(10), 0, 0),
+        makeTask('Security Distinction Task', 'D1', 'redo', makeDate(11), 0, 2),
+      ]),
+    ]);
+    await syncView();
+
+    const mobileFilterToggle = fixture.nativeElement.querySelector(
+      'button[data-mobile-global-filter-toggle]',
+    ) as HTMLButtonElement;
+    mobileFilterToggle.click();
+    await syncView();
+
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const statusSelect = await loader.getHarness(
+      MatSelectHarness.with({selector: '[aria-label="Task statuses"]'}),
+    );
+    const gradeSelect = await loader.getHarness(
+      MatSelectHarness.with({selector: '[aria-label="Target grades"]'}),
+    );
+
+    expect(await statusSelect.isMultiple()).toBe(true);
+    expect(await gradeSelect.isMultiple()).toBe(true);
+
+    await statusSelect.open();
+    await statusSelect.clickOptions({text: /^(Redo|Complete)$/});
+    await statusSelect.close();
+
+    await gradeSelect.open();
+    await gradeSelect.clickOptions({text: /^(Pass|Distinction)$/});
+    await gradeSelect.close();
+
+    const globalSearch = fixture.nativeElement.querySelector(
+      'input[aria-label="Global search"]',
+    ) as HTMLInputElement;
+    globalSearch.value = 'security';
+    globalSearch.dispatchEvent(new Event('input', {bubbles: true}));
+    component.setStartDate('2026-08-01');
+    await syncView();
+
+    expect(component.selectedStatuses.slice().sort()).toEqual(['complete', 'redo']);
+    expect(component.selectedGrades).toEqual([0, 2]);
+    expect(component.mobileSecondaryFilterCount).toBe(5);
+    expect(await statusSelect.getValueText()).toContain('Redo');
+    expect(await statusSelect.getValueText()).toContain('Complete');
+    expect(await gradeSelect.getValueText()).toContain('Pass');
+    expect(await gradeSelect.getValueText()).toContain('Distinction');
+
+    const clearAll = await loader.getHarness(MatButtonHarness.with({text: 'Clear all'}));
+    expect(await clearAll.isDisabled()).toBe(false);
+    await clearAll.click();
+    await syncView();
+
+    expect(component.globalSearchTerm).toBe('');
+    expect(component.selectedStatuses).toEqual([]);
+    expect(component.selectedGrades).toEqual([]);
+    expect(component.startDate).toBe('');
+    expect(component.mobileSecondaryFilterCount).toBe(0);
+    expect(component.mobileGlobalFiltersExpanded).toBe(true);
+    expect(globalSearch.value).toBe('');
+    expect(await statusSelect.getValueText()).toBe('');
+    expect(await gradeSelect.getValueText()).toBe('');
+    expect(await clearAll.isDisabled()).toBe(true);
+  });
+
+  it('keeps secondary filters in a labelled mobile disclosure with an active count', async () => {
+    projectsSubject.next([makeProject(1, 'SIT764', true)]);
+    await syncView();
+
+    const toggle = fixture.nativeElement.querySelector(
+      'button[data-mobile-global-filter-toggle]',
+    ) as HTMLButtonElement;
+    const filters = fixture.nativeElement.querySelector(
+      '#dashboard-secondary-filters',
+    ) as HTMLElement;
+
+    expect(toggle.classList).toContain('min-h-12');
+    expect(toggle.getAttribute('aria-controls')).toBe('dashboard-secondary-filters');
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(filters.classList).not.toContain('is-mobile-open');
+    expect(toggle.textContent).not.toContain('active');
+
+    component.setStatuses(['complete', 'redo']);
+    component.setGrades([1]);
+    component.setStartDate('2026-08-01');
+    await syncView();
+
+    expect(component.mobileSecondaryFilterCount).toBe(4);
+    expect(toggle.textContent).toContain('4 active');
+
+    toggle.click();
+    await syncView();
+
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(filters.classList).toContain('is-mobile-open');
+  });
+
+  it('globally searches every required unit and task field case-insensitively', () => {
+    projectsSubject.next([
+      makeProject(
+        1,
+        'SIT764',
+        true,
+        [
+          makeTask(
+            'Individual Retrospective',
+            '5.1D',
+            'ready_for_feedback',
+            new Date(2026, 7, 12),
+            0,
+            2,
+          ),
+        ],
+        'Human Centred Design',
+      ),
+      makeProject(
+        2,
+        'SIT782',
+        true,
+        [makeTask('Network Plan', '2.1P', 'not_started', new Date(2026, 7, 18))],
+        'Secure Networks',
+      ),
+    ]);
+
+    const matchingQueries = [
+      '  sit764  ',
+      'HUMAN CENTRED',
+      'individual retrospective',
+      '5.1d',
+      'Awaiting Feedback',
+      'Distinction',
+      'Wednesday 12 August',
+      '12/08/2026',
+      '2026-08-12',
+    ];
+
+    for (const query of matchingQueries) {
+      component.setGlobalSearch(query);
+
+      expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764']);
+      expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['5.1D']);
+    }
+
+    component.setGlobalSearch(' - ');
+    expect(component.globalSearchTerm).toBe(' - ');
+    expect(component.hasGlobalTaskCriteria).toBe(false);
+    expect(component.hasGlobalToolbarChanges).toBe(true);
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764', 'SIT782']);
+
+    component.clearGlobalFilters();
+    expect(component.globalSearchTerm).toBe('');
+    expect(component.hasGlobalToolbarChanges).toBe(false);
+  });
+
+  it('filters by every trusted target-grade value and supports multiple grades', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Pass Task', 'LOOKS-HD', 'not_started', makeDate(10), 0, 0),
+        makeTask('Credit Task', 'CREDIT', 'not_started', makeDate(11), 0, 1),
+        makeTask('Distinction Task', 'DISTINCTION', 'not_started', makeDate(12), 0, 2),
+        makeTask('High Distinction Task', 'LOOKS-P', 'not_started', makeDate(13), 0, 3),
+      ]),
+    ]);
+
+    for (const option of component.gradeOptions) {
+      component.setGrades([option.value]);
+
+      expect(component.displayedUnits[0].tasks).toHaveLength(1);
+      expect(component.displayedUnits[0].tasks[0].targetGrade).toBe(option.value);
+      expect(component.displayedUnits[0].tasks[0].targetGradeLabel).toBe(option.label);
+    }
+
+    component.setGrades([0, 2]);
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.targetGrade)).toEqual([0, 2]);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'LOOKS-HD',
+      'DISTINCTION',
+    ]);
+  });
+
+  it('filters by every existing task status and supports multiple statuses', () => {
+    const tasks = TaskStatus.STATUS_KEYS.map((status, index) =>
+      makeTask(
+        `${TaskStatus.STATUS_LABELS.get(status)} Task`,
+        `TASK-${index}`,
+        status,
+        makeDate(10),
+      ),
+    );
+    projectsSubject.next([makeProject(1, 'SIT764', true, tasks)]);
+
+    for (const status of TaskStatus.STATUS_KEYS) {
+      component.setStatuses([status]);
+
+      expect(component.displayedUnits[0].tasks).toHaveLength(1);
+      expect(component.displayedUnits[0].tasks[0].status).toBe(status);
+    }
+
+    component.setStatuses(['complete', 'redo', 'fix_and_resubmit']);
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.status).sort()).toEqual([
+      'complete',
+      'fix_and_resubmit',
+      'redo',
+    ]);
+  });
+
+  it('uses OR within filter groups and AND across search, status and grade groups', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Security Pass', 'MATCH-P', 'complete', makeDate(10), 0, 0),
+        makeTask('Security Credit', 'MATCH-C', 'fix_and_resubmit', makeDate(11), 0, 1),
+        makeTask('Security Distinction', 'GRADE-OUT', 'complete', makeDate(12), 0, 2),
+        makeTask('Security Redo', 'STATUS-OUT', 'redo', makeDate(13), 0, 0),
+        makeTask('Calendar Credit', 'SEARCH-OUT', 'complete', makeDate(14), 0, 1),
+      ]),
+    ]);
+
+    component.setGlobalSearch('security');
+    component.setStatuses(['complete', 'fix_and_resubmit']);
+    component.setGrades([0, 1]);
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'MATCH-C',
+      'MATCH-P',
+    ]);
+  });
+
+  it('applies global criteria in Previous units scope after authorised units load', () => {
+    projectServiceQuery.mockReturnValue(
+      of([
+        makeProject(2, 'SIT704', false, [
+          makeTask('Archived Pass Task', 'OLD-P', 'complete', makeDate(10), 0, 0),
+          makeTask('Archived Distinction Task', 'OLD-D', 'complete', makeDate(11), 0, 2),
+          makeTask('Archived Distinction Redo', 'OLD-REDO', 'redo', makeDate(12), 0, 2),
+        ]),
+      ]),
+    );
+
+    component.setUnitScope('previous');
+    component.setGlobalSearch('archived');
+    component.setStatuses(['complete']);
+    component.setGrades([2]);
+
+    expect(component.unitScope).toBe('previous');
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT704']);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['OLD-D']);
+  });
+
+  it('applies global search before an independent per-unit search', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Security Report', 'REPORT', 'not_started', makeDate(10)),
+        makeTask('Security Plan', 'PLAN', 'not_started', makeDate(11)),
+      ]),
+      makeProject(2, 'SIT782', true, [
+        makeTask('Security Calendar', 'CALENDAR', 'not_started', makeDate(12)),
+      ]),
+    ]);
+
+    component.setGlobalSearch('security');
+
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764', 'SIT782']);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'REPORT',
+      'PLAN',
+    ]);
+    expect(component.displayedUnits[1].tasks.map((task) => task.abbreviation)).toEqual([
+      'CALENDAR',
+    ]);
+
+    component.setSearch(1, 'report');
+
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764', 'SIT782']);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['REPORT']);
+    expect(component.displayedUnits[1].tasks.map((task) => task.abbreviation)).toEqual([
+      'CALENDAR',
+    ]);
+
+    component.setSearch(1, '');
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'REPORT',
+      'PLAN',
+    ]);
+  });
+
+  it('clears global criteria, restores Active units and leaves canonical results', () => {
+    const activeProject = makeProject(1, 'SIT764', true, [
+      makeTask('Active Pass Task', 'ACTIVE-P', 'complete', makeDate(10), 0, 0),
+      makeTask('Active Credit Task', 'ACTIVE-C', 'not_started', makeDate(11), 0, 1),
+    ]);
+    const previousProject = makeProject(2, 'SIT704', false, [
+      makeTask('Previous Pass Task', 'PREVIOUS-P', 'complete', makeDate(12), 0, 0),
+    ]);
+
+    projectsSubject.next([activeProject]);
+    projectServiceQuery.mockReturnValue(of([activeProject, previousProject]));
+
+    component.setUnitScope('all');
+    component.setGlobalSearch('pass');
+    component.setStatuses(['complete']);
+    component.setGrades([0]);
+    component.setStartDate('2026-08-01');
+    component.setEndDate('2026-08-31');
+
+    expect(component.hasGlobalToolbarChanges).toBe(true);
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764', 'SIT704']);
+
+    component.clearGlobalFilters();
+
+    expect(component.unitScope).toBe('active');
+    expect(component.globalSearchTerm).toBe('');
+    expect(component.selectedStatuses).toEqual([]);
+    expect(component.selectedGrades).toEqual([]);
+    expect(component.startDate).toBe('');
+    expect(component.endDate).toBe('');
+    expect(component.hasGlobalToolbarChanges).toBe(false);
+    expect(component.displayedUnits.map((unit) => unit.code)).toEqual(['SIT764']);
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual([
+      'ACTIVE-C',
+      'ACTIVE-P',
+    ]);
+    expect(component.displayedUnits[0].gradeSummaries).toEqual([]);
+  });
+
+  it('removes globally empty units and renders the global no-results state', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Individual Retrospective', '5.1P', 'not_started', makeDate(12)),
+      ]),
+    ]);
+
+    component.setGlobalSearch('not a matching task');
+    await syncView();
+
+    expect(component.displayedUnits).toEqual([]);
+    expect(fixture.nativeElement.textContent).not.toContain('SIT764');
+    expect(fixture.nativeElement.textContent).toContain(
+      'No tasks match the current global search and filters.',
+    );
+    expect(fixture.nativeElement.textContent).not.toContain(
+      'No tasks match the current search and filters.',
+    );
+  });
+
+  it('renders the global no-results state when the selected scope contains no units', async () => {
+    projectsSubject.next([]);
+
+    component.setGlobalSearch('security');
+    await syncView();
+
+    expect(component.displayedUnits).toEqual([]);
+    expect(fixture.nativeElement.textContent).toContain(
+      'No tasks match the current global search and filters.',
+    );
+  });
+
+  it('keeps grade summaries independent of global and per-unit search and status filters', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Completed Pass One', 'P1', 'complete', makeDate(10), 0, 0),
+        makeTask('Completed Pass Two', 'P2', 'complete', makeDate(11), 0, 0),
+        makeTask('Open Pass One', 'P3', 'not_started', makeDate(12), 0, 0),
+        makeTask('Portfolio Pass', 'P4', 'assess_in_portfolio', makeDate(13), 0, 0),
+      ]),
+    ]);
+
+    component.setGrades([0]);
+    component.setStatuses(['not_started']);
+    component.setGlobalSearch('open');
+    component.setSearch(1, 'one');
+    await syncView();
+
+    expect(component.displayedUnits[0].tasks.map((task) => task.abbreviation)).toEqual(['P3']);
+    expect(component.displayedUnits[0].gradeSummaries).toEqual([
+      {
+        targetGrade: 0,
+        label: 'Pass',
+        completed: 2,
+        total: 4,
+        percentage: 50,
+      },
+    ]);
+    expect(fixture.nativeElement.textContent).toContain('Pass: 2 of 4 complete (50%)');
+  });
+
+  it('shows a zero-task summary for a selected grade on an otherwise visible unit', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Credit Task', 'C1', 'not_started', makeDate(10), 0, 1),
+      ]),
+    ]);
+
+    component.setGrades([0, 1]);
+    await syncView();
+
+    expect(component.displayedUnits).toHaveLength(1);
+    expect(component.displayedUnits[0].gradeSummaries).toEqual([
+      {
+        targetGrade: 0,
+        label: 'Pass',
+        completed: 0,
+        total: 0,
+        percentage: null,
+      },
+      {
+        targetGrade: 1,
+        label: 'Credit',
+        completed: 0,
+        total: 1,
+        percentage: 0,
+      },
+    ]);
+    expect(fixture.nativeElement.textContent).toContain('Pass: 0 tasks');
+    expect(fixture.nativeElement.textContent).toContain('Credit: 0 of 1 complete (0%)');
+    expect(fixture.nativeElement.textContent).not.toContain('Pass: 0 of 0 complete (0%)');
+  });
+
+  it('calculates summaries independently per unit using trusted task-definition labels', () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [
+        makeTask('Foundation Complete', 'F1', 'complete', makeDate(10), 0, 0, 'Foundation'),
+        makeTask('Foundation Open', 'F2', 'not_started', makeDate(11), 0, 0, 'Foundation'),
+      ]),
+      makeProject(2, 'SIT782', true, [
+        makeTask('Entry Complete One', 'E1', 'complete', makeDate(12), 0, 0, 'Entry'),
+        makeTask('Entry Complete Two', 'E2', 'complete', makeDate(13), 0, 0, 'Entry'),
+        makeTask('Entry Open', 'E3', 'redo', makeDate(14), 0, 0, 'Entry'),
+      ]),
+    ]);
+
+    component.setGrades([0]);
+
+    expect(component.displayedUnits[0].gradeSummaries).toEqual([
+      {
+        targetGrade: 0,
+        label: 'Foundation',
+        completed: 1,
+        total: 2,
+        percentage: 50,
+      },
+    ]);
+    expect(component.displayedUnits[1].gradeSummaries).toEqual([
+      {
+        targetGrade: 0,
+        label: 'Entry',
+        completed: 2,
+        total: 3,
+        percentage: 67,
+      },
+    ]);
+  });
+
+  it('hides all grade summaries until a grade filter is selected', async () => {
+    projectsSubject.next([
+      makeProject(1, 'SIT764', true, [makeTask('Pass Task', 'P1', 'complete', makeDate(10), 0, 0)]),
+    ]);
+
+    await syncView();
+
+    expect(component.displayedUnits[0].gradeSummaries).toEqual([]);
+    expect(fixture.nativeElement.textContent).not.toContain('Grade task completion');
+  });
+
+  it('renders one accessible mobile accordion control and summary per unit', async () => {
+    const overdueDate = new Date(Date.now() - 24 * 60 * 60 * 1000);
+    const laterDate = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000);
+
+    projectsSubject.next([
+      makeProject(
+        1,
+        'SIT764',
+        true,
+        [
+          makeTask('Overdue review', 'OVERDUE', 'not_started', overdueDate),
+          makeTask('Later review', 'LATER', 'not_started', laterDate),
+        ],
+        'Human Centred Design',
+      ),
+      makeProject(2, 'SIT782', true, [makeTask('Submitted plan', 'DONE', 'complete', laterDate)]),
+    ]);
+
+    await syncView();
+
+    const toggles = fixture.nativeElement.querySelectorAll(
+      'button[data-mobile-unit-toggle]',
+    ) as NodeListOf<HTMLButtonElement>;
+
+    expect(toggles).toHaveLength(2);
+    expect(toggles[0].parentElement?.tagName).toBe('H2');
+    expect(toggles[0].classList).toContain('min-h-12');
+    expect(toggles[0].getAttribute('aria-expanded')).toBe('false');
+    expect(toggles[0].getAttribute('aria-controls')).toBe(
+      'dashboard-unit-controls-1 dashboard-unit-content-1',
+    );
+    expect(toggles[0].textContent).toContain('SIT764');
+    expect(toggles[0].textContent).toContain('Human Centred Design · Active');
+    expect(toggles[0].textContent).toContain('2 tasks');
+    expect(toggles[0].textContent).toContain('Overdue: OVERDUE');
+    expect(toggles[1].textContent).toContain('1 task');
+    expect(toggles[1].textContent).toContain('No upcoming deadlines');
+    expect(toggles[0].querySelector('a, input, button')).toBeNull();
+    expect(fixture.nativeElement.querySelector('#dashboard-unit-controls-1')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('#dashboard-unit-content-1')).not.toBeNull();
+
+    // The responsive view reuses each task row instead of duplicating separate mobile markup.
+    expect(fixture.nativeElement.querySelectorAll('f-dashboard-list-item')).toHaveLength(3);
+  });
+
+  it('opens only one mobile unit at a time and resets expansion when scope changes', async () => {
+    projectsSubject.next([makeProject(1, 'SIT764', true), makeProject(2, 'SIT782', true)]);
+    await syncView();
+
+    const toggles = fixture.nativeElement.querySelectorAll(
+      'button[data-mobile-unit-toggle]',
+    ) as NodeListOf<HTMLButtonElement>;
+    const firstControls = fixture.nativeElement.querySelector(
+      '#dashboard-unit-controls-1',
+    ) as HTMLElement;
+    const firstContent = fixture.nativeElement.querySelector(
+      '#dashboard-unit-content-1',
+    ) as HTMLElement;
+    const secondContent = fixture.nativeElement.querySelector(
+      '#dashboard-unit-content-2',
+    ) as HTMLElement;
+
+    toggles[0].click();
+    await syncView();
+
+    expect(toggles[0].getAttribute('aria-expanded')).toBe('true');
+    expect(firstControls.classList).toContain('is-mobile-open');
+    expect(firstContent.classList).toContain('is-mobile-open');
+
+    toggles[1].click();
+    await syncView();
+
+    expect(toggles[0].getAttribute('aria-expanded')).toBe('false');
+    expect(toggles[1].getAttribute('aria-expanded')).toBe('true');
+    expect(firstControls.classList).not.toContain('is-mobile-open');
+    expect(firstContent.classList).not.toContain('is-mobile-open');
+    expect(secondContent.classList).toContain('is-mobile-open');
+
+    component.setUnitScope('active');
+    await syncView();
+
+    expect(component.expandedMobileProjectId).toBeNull();
+    expect(toggles[1].getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('uses phone-safe widths while retaining the fixed desktop card strip', async () => {
+    projectsSubject.next([makeProject(1, 'SIT764', true)]);
+    await syncView();
+
+    const toolbar = fixture.nativeElement.querySelector(
+      '[aria-label="Global dashboard filters"]',
+    ) as HTMLElement;
+    const globalSearchField = fixture.nativeElement
+      .querySelector('input[aria-label="Global search"]')
+      .closest('mat-form-field') as HTMLElement;
+    const layout = fixture.nativeElement.querySelector('.dashboard-units-layout') as HTMLElement;
+    const card = layout.querySelector('section') as HTMLElement;
+
+    expect(Array.from(toolbar.classList)).toEqual(expect.arrayContaining(['px-4', 'sm:px-16']));
+    expect(Array.from(globalSearchField.classList)).toEqual(
+      expect.arrayContaining(['min-w-0', 'sm:min-w-64']),
+    );
+    expect(Array.from(layout.classList)).toEqual(
+      expect.arrayContaining([
+        'flex-col',
+        'overflow-x-hidden',
+        'sm:flex-row',
+        'sm:overflow-x-auto',
+      ]),
+    );
+    expect(Array.from(card.classList)).toEqual(
+      expect.arrayContaining(['h-auto', 'w-full', 'min-w-0', 'sm:h-full', 'sm:w-128']),
+    );
+  });
+});
diff --git a/src/app/dashboard/f-cross-dashboard.component.ts b/src/app/dashboard/f-cross-dashboard.component.ts
new file mode 100644
index 0000000000..15e388b6a0
--- /dev/null
+++ b/src/app/dashboard/f-cross-dashboard.component.ts
@@ -0,0 +1,760 @@
+import {EntityCache} from 'ngx-entity-service';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  OnInit,
+} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {ActivatedRoute, Router} from '@angular/router';
+import {catchError, debounceTime, filter, map, merge, of, switchMap, tap} from 'rxjs';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {Grade} from '../api/models/grade';
+import {Project} from '../api/models/project';
+import {Task} from '../api/models/task';
+import {TaskStatus, TaskStatusEnum} from '../api/models/task-status';
+import {ProjectService} from '../api/services/project.service';
+import {
+  TaskRecommendation,
+  TaskRecommendationService,
+} from '../api/services/task-recommendation.service';
+import {TaskService} from '../api/services/task.service';
+import {DashboardTask, getDueDateWarning} from './list-item/dashboard-list-item.component';
+
+type UnitScope = 'active' | 'previous' | 'all';
+
+enum Filter {
+  HideCompleted = 'Hide Completed',
+}
+
+enum SortMode {
+  Recommended = 'Recommended',
+  SubmissionDate = 'Due Date',
+  Default = 'Default',
+}
+
+const completedTypes: readonly TaskStatusEnum[] = ['complete'];
+const finalTypes: readonly TaskStatusEnum[] = TaskStatus.FINAL_STATUSES;
+
+const displayedDueDateFormatter = new Intl.DateTimeFormat('en-AU', {
+  weekday: 'long',
+  day: 'numeric',
+  month: 'long',
+});
+
+const mobileDueDateFormatter = new Intl.DateTimeFormat('en-AU', {
+  day: 'numeric',
+  month: 'short',
+});
+
+type MobileUnitSummary = {
+  taskCountLabel: string;
+  deadlineLabel: string;
+  hasDeadlineWarning: boolean;
+};
+
+type DashboardUnit = {
+  projectId: number;
+  code: string;
+  name: string;
+  tasks: DashboardTask[];
+  gradeSummaries: GradeCompletionSummary[];
+  mobileSummary: MobileUnitSummary;
+  isPrevious: boolean;
+};
+
+type GradeCompletionSummary = {
+  targetGrade: number;
+  label: string;
+  completed: number;
+  total: number;
+  percentage: number | null;
+};
+
+@Component({
+  selector: 'f-cross-dashboard',
+  templateUrl: './f-cross-dashboard.component.html',
+  styleUrl: './f-cross-dashboard.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class CrossDashboardComponent implements OnInit {
+  activeUnits: DashboardUnit[] = [];
+  previousUnits: DashboardUnit[] = [];
+
+  unitScope: UnitScope = 'active';
+
+  globalSearchTerm = '';
+  selectedStatuses: TaskStatusEnum[] = [];
+  selectedGrades: number[] = [];
+
+  readonly statusOptions = TaskStatus.STATUS_KEYS.flatMap((value) => {
+    const label = TaskStatus.STATUS_LABELS.get(value);
+    return label ? [{value, label}] : [];
+  });
+  readonly gradeOptions = Grade.PASS_RANGE.map((value) => ({
+    value,
+    label: Grade.GRADES[value],
+  }));
+
+  startDate = '';
+  endDate = '';
+
+  previousUnitsLoaded = false;
+  loadingPreviousUnits = false;
+  previousUnitsLoadError = false;
+
+  filterOptions = Object.values(Filter);
+  sortOptions = Object.values(SortMode);
+  unitsProcessed: DashboardUnit[] = [];
+  expandedMobileProjectId: number | null = null;
+  mobileGlobalFiltersExpanded = false;
+
+  private readonly previousProjectsCache: EntityCache<Project> = new EntityCache();
+  private filters: Map<number, Filter[]> = new Map();
+  private sorting: Map<number, SortMode> = new Map();
+  private searchTerms: Map<number, string> = new Map();
+  private recommendationScores: Map<string, number> = new Map();
+
+  constructor(
+    private globalStateService: GlobalStateService,
+    private projectService: ProjectService,
+    private taskRecommendationService: TaskRecommendationService,
+    private taskService: TaskService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private destroyRef: DestroyRef,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
+
+  ngOnInit(): void {
+    this.globalStateService.onLoad(() => {
+      this.route.queryParamMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
+        const requested = params.get('scope');
+        const scope: UnitScope =
+          requested === 'previous' || requested === 'all' ? requested : 'active';
+        if (scope !== this.unitScope) {
+          this.applyUnitScope(scope);
+        }
+      });
+
+      const projectChanges = this.globalStateService.currentUserProjects.values.pipe(
+        tap((projects) => this.refreshActiveUnits(projects)),
+        map(() => undefined),
+      );
+      const activeTaskStatusChanges = this.taskService.taskStatusUpdated$.pipe(
+        filter((task) => this.isTaskInActiveProject(task)),
+        debounceTime(0),
+        tap(() =>
+          this.refreshActiveUnits(this.globalStateService.currentUserProjects.currentValues),
+        ),
+        map(() => undefined),
+      );
+
+      merge(projectChanges, activeTaskStatusChanges)
+        .pipe(
+          switchMap(() => this.taskRecommendationService.getAll().pipe(catchError(() => of([])))),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe((recommendations) => {
+          this.setRecommendationScores(recommendations);
+          this.processTasks();
+        });
+    });
+  }
+
+  private refreshActiveUnits(projects: readonly Project[]): void {
+    const activeProjects = projects.filter((project) => project.unit.isActive);
+    this.activeUnits = this.mapProjects(activeProjects);
+    this.processTasks();
+  }
+
+  private isTaskInActiveProject(task: Task): boolean {
+    const projectId = task.project?.id;
+
+    return this.globalStateService.currentUserProjects.currentValues.some(
+      (project) => project.id === projectId && project.unit.isActive,
+    );
+  }
+
+  get displayedUnits(): DashboardUnit[] {
+    return this.unitsProcessed;
+  }
+
+  get isDateRangeInvalid(): boolean {
+    return !!this.startDate && !!this.endDate && this.startDate > this.endDate;
+  }
+
+  get isDateFilterActive(): boolean {
+    return !this.isDateRangeInvalid && (!!this.startDate || !!this.endDate);
+  }
+
+  get hasGlobalTaskCriteria(): boolean {
+    return (
+      this.normaliseSearchText(this.globalSearchTerm).length > 0 ||
+      this.selectedStatuses.length > 0 ||
+      this.selectedGrades.length > 0
+    );
+  }
+
+  get hasGlobalToolbarChanges(): boolean {
+    return (
+      this.unitScope !== 'active' ||
+      this.globalSearchTerm.length > 0 ||
+      this.selectedStatuses.length > 0 ||
+      this.selectedGrades.length > 0 ||
+      !!this.startDate ||
+      !!this.endDate
+    );
+  }
+
+  get mobileSecondaryFilterCount(): number {
+    return (
+      this.selectedStatuses.length +
+      this.selectedGrades.length +
+      Number(!!this.startDate) +
+      Number(!!this.endDate)
+    );
+  }
+
+  setUnitScope(scope: UnitScope): void {
+    this.applyUnitScope(scope);
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {scope: scope === 'active' ? null : scope},
+      queryParamsHandling: 'merge',
+      preserveFragment: true,
+      replaceUrl: true,
+    });
+  }
+
+  private applyUnitScope(scope: UnitScope): void {
+    this.unitScope = scope;
+    this.expandedMobileProjectId = null;
+    this.processTasks();
+
+    const needsPreviousUnits = scope === 'previous' || scope === 'all';
+
+    if (needsPreviousUnits && !this.previousUnitsLoaded && !this.loadingPreviousUnits) {
+      this.loadPreviousUnits();
+    }
+  }
+
+  setGlobalSearch(value: string): void {
+    this.globalSearchTerm = value ?? '';
+    this.processTasks();
+  }
+
+  toggleMobileProject(projectId: number): void {
+    this.expandedMobileProjectId = this.expandedMobileProjectId === projectId ? null : projectId;
+  }
+
+  toggleMobileGlobalFilters(): void {
+    this.mobileGlobalFiltersExpanded = !this.mobileGlobalFiltersExpanded;
+  }
+
+  isMobileProjectExpanded(projectId: number): boolean {
+    return this.expandedMobileProjectId === projectId;
+  }
+
+  setStatuses(statuses: readonly TaskStatusEnum[] | null): void {
+    this.selectedStatuses = [...(statuses ?? [])];
+    this.processTasks();
+  }
+
+  setGrades(grades: readonly number[] | null): void {
+    this.selectedGrades = [...(grades ?? [])];
+    this.processTasks();
+  }
+
+  clearGlobalFilters(): void {
+    this.globalSearchTerm = '';
+    this.selectedStatuses = [];
+    this.selectedGrades = [];
+    this.startDate = '';
+    this.endDate = '';
+
+    if (this.unitScope !== 'active') {
+      this.setUnitScope('active');
+      return;
+    }
+
+    this.processTasks();
+  }
+
+  setStartDate(value: string): void {
+    this.startDate = value;
+    this.processTasks();
+  }
+
+  setEndDate(value: string): void {
+    this.endDate = value;
+    this.processTasks();
+  }
+
+  clearDateRange(): void {
+    this.startDate = '';
+    this.endDate = '';
+    this.processTasks();
+  }
+
+  setSort(project: number, mode: SortMode): void {
+    this.sorting.set(project, mode);
+    this.processTasks();
+  }
+
+  toggleFilter(project: number, filter: Filter): void {
+    let filters = this.filters.get(project) ?? [];
+    if (filters.includes(filter)) {
+      filters = filters.filter((currentFilter) => currentFilter !== filter);
+    } else {
+      filters = [...filters, filter];
+    }
+    this.filters.set(project, filters);
+    this.processTasks();
+  }
+
+  isFilterEnabled(project: number, filter: Filter): boolean {
+    return this.filters.get(project)?.includes(filter) === true;
+  }
+
+  setSearch(project: number, value: string): void {
+    this.searchTerms.set(project, value ?? '');
+    this.processTasks();
+  }
+
+  getSearchTerm(project: number): string {
+    return this.searchTerms.get(project) ?? '';
+  }
+
+  hasSearchTerm(project: number): boolean {
+    return this.normaliseSearchText(this.getSearchTerm(project)).length > 0;
+  }
+
+  hasActiveTaskCriteria(project: number): boolean {
+    return (
+      this.isDateFilterActive ||
+      this.hasSearchTerm(project) ||
+      (this.filters.get(project)?.length ?? 0) > 0
+    );
+  }
+
+  private loadPreviousUnits(): void {
+    this.loadingPreviousUnits = true;
+    this.previousUnitsLoadError = false;
+
+    this.projectService
+      .query(undefined, {
+        cache: this.previousProjectsCache,
+        params: {
+          include_inactive: true,
+          include_task_definitions: true,
+        },
+      })
+      .subscribe({
+        next: (projects: Project[]) => {
+          const previousProjects = projects.filter((project) => !project.unit.isActive);
+
+          this.previousUnits = this.mapProjects(previousProjects);
+          this.previousUnitsLoaded = true;
+          this.loadingPreviousUnits = false;
+          this.processTasks();
+
+          this.changeDetectorRef.detectChanges();
+        },
+        error: () => {
+          this.previousUnitsLoadError = true;
+          this.loadingPreviousUnits = false;
+          this.processTasks();
+
+          this.changeDetectorRef.detectChanges();
+        },
+      });
+  }
+
+  private processTasks(): void {
+    const units = this.getUnitsForCurrentScope();
+
+    this.unitsProcessed = units
+      .map((unit) => ({
+        unit,
+        globallyFilteredTasks: unit.tasks.filter((task) =>
+          this.taskMatchesGlobalCriteria(task, unit),
+        ),
+      }))
+      .filter(
+        ({globallyFilteredTasks}) =>
+          !this.hasGlobalTaskCriteria || globallyFilteredTasks.length > 0,
+      )
+      .map(({unit, globallyFilteredTasks}) => ({
+        ...unit,
+        gradeSummaries: this.buildGradeSummaries(unit.tasks),
+        tasks: globallyFilteredTasks
+          .filter((task) => {
+            const filters = this.filters.get(unit.projectId) ?? [];
+            const isHiddenCompletedTask =
+              filters.includes(Filter.HideCompleted) && completedTypes.includes(task.status);
+
+            return (
+              !isHiddenCompletedTask &&
+              this.taskMatchesDateRange(task) &&
+              this.taskMatchesPerUnitSearch(task, unit)
+            );
+          })
+          .sort((a, b) => {
+            const sort = this.sorting.get(unit.projectId) ?? SortMode.Recommended;
+
+            if (finalTypes.includes(a.status) && !finalTypes.includes(b.status)) {
+              return 1;
+            }
+
+            if (!finalTypes.includes(a.status) && finalTypes.includes(b.status)) {
+              return -1;
+            }
+
+            switch (sort) {
+              case SortMode.Recommended:
+                return this.compareRecommendations(a, b);
+              case SortMode.SubmissionDate:
+                return this.compareDueDates(a.dueDate, b.dueDate);
+              case SortMode.Default:
+                return a.weight - b.weight;
+            }
+
+            return 0;
+          }),
+      }));
+
+    this.unitsProcessed = this.unitsProcessed.map((unit) => ({
+      ...unit,
+      mobileSummary: this.buildMobileUnitSummary(unit.tasks),
+    }));
+
+    this.changeDetectorRef.markForCheck();
+  }
+
+  private setRecommendationScores(recommendations: readonly TaskRecommendation[]): void {
+    this.recommendationScores = new Map(
+      recommendations
+        .filter((recommendation) => Number.isFinite(recommendation.priority_score))
+        .map((recommendation) => [
+          this.recommendationKey(recommendation.project_id, recommendation.task_definition_id),
+          recommendation.priority_score,
+        ]),
+    );
+  }
+
+  private compareRecommendations(first: DashboardTask, second: DashboardTask): number {
+    const firstScore = this.recommendationScores.get(
+      this.recommendationKey(first.projectId, first.taskDefinitionId),
+    );
+    const secondScore = this.recommendationScores.get(
+      this.recommendationKey(second.projectId, second.taskDefinitionId),
+    );
+
+    if (firstScore !== undefined && secondScore !== undefined) {
+      return secondScore - firstScore || first.weight - second.weight;
+    }
+
+    if (firstScore !== undefined) {
+      return -1;
+    }
+
+    if (secondScore !== undefined) {
+      return 1;
+    }
+
+    return first.weight - second.weight;
+  }
+
+  private recommendationKey(projectId: number, taskDefinitionId: number): string {
+    return `${projectId}:${taskDefinitionId}`;
+  }
+
+  private taskMatchesGlobalCriteria(task: DashboardTask, unit: DashboardUnit): boolean {
+    const matchesStatus =
+      this.selectedStatuses.length === 0 || this.selectedStatuses.includes(task.status);
+    const matchesGrade =
+      this.selectedGrades.length === 0 || this.selectedGrades.includes(task.targetGrade);
+
+    return matchesStatus && matchesGrade && this.taskMatchesGlobalSearch(task, unit);
+  }
+
+  private buildGradeSummaries(tasks: readonly DashboardTask[]): GradeCompletionSummary[] {
+    return this.selectedGrades.map((targetGrade) => {
+      const tasksInGrade = tasks.filter((task) => task.targetGrade === targetGrade);
+      const completed = tasksInGrade.filter((task) => task.status === 'complete').length;
+      const total = tasksInGrade.length;
+
+      return {
+        targetGrade,
+        label:
+          tasksInGrade[0]?.targetGradeLabel ??
+          this.gradeOptions.find((option) => option.value === targetGrade)?.label ??
+          '',
+        completed,
+        total,
+        percentage: total === 0 ? null : Math.round((completed / total) * 100),
+      };
+    });
+  }
+
+  private buildMobileUnitSummary(tasks: readonly DashboardTask[]): MobileUnitSummary {
+    const taskCount = tasks.length;
+    const nextDueTask = tasks
+      .filter(
+        (task) =>
+          task.showDueWarning &&
+          !finalTypes.includes(task.status) &&
+          task.dueDate instanceof Date &&
+          !Number.isNaN(task.dueDate.getTime()),
+      )
+      .sort((first, second) => this.compareDueDates(first.dueDate, second.dueDate))[0];
+
+    if (!nextDueTask || !(nextDueTask.dueDate instanceof Date)) {
+      return {
+        taskCountLabel: `${taskCount} ${taskCount === 1 ? 'task' : 'tasks'}`,
+        deadlineLabel: 'No upcoming deadlines',
+        hasDeadlineWarning: false,
+      };
+    }
+
+    const warning = getDueDateWarning(nextDueTask.dueDate, true);
+
+    return {
+      taskCountLabel: `${taskCount} ${taskCount === 1 ? 'task' : 'tasks'}`,
+      deadlineLabel: warning
+        ? `${warning.label}: ${nextDueTask.abbreviation}`
+        : `Next due ${mobileDueDateFormatter.format(nextDueTask.dueDate)}: ${
+            nextDueTask.abbreviation
+          }`,
+      hasDeadlineWarning: warning !== null,
+    };
+  }
+
+  private taskMatchesDateRange(task: DashboardTask): boolean {
+    if (!this.isDateFilterActive) {
+      return true;
+    }
+
+    const taskDate = this.formatDateAsIso(task.dueDate);
+
+    if (!taskDate) {
+      return false;
+    }
+
+    if (this.startDate && taskDate < this.startDate) {
+      return false;
+    }
+
+    if (this.endDate && taskDate > this.endDate) {
+      return false;
+    }
+
+    return true;
+  }
+
+  private compareDueDates(
+    firstDate: Date | null | undefined,
+    secondDate: Date | null | undefined,
+  ): number {
+    const firstTime =
+      firstDate instanceof Date && !Number.isNaN(firstDate.getTime()) ? firstDate.getTime() : null;
+
+    const secondTime =
+      secondDate instanceof Date && !Number.isNaN(secondDate.getTime())
+        ? secondDate.getTime()
+        : null;
+
+    if (firstTime === null && secondTime === null) {
+      return 0;
+    }
+
+    if (firstTime === null) {
+      return 1;
+    }
+
+    if (secondTime === null) {
+      return -1;
+    }
+
+    return firstTime - secondTime;
+  }
+
+  private taskMatchesGlobalSearch(task: DashboardTask, unit: DashboardUnit): boolean {
+    return this.taskMatchesSearchText(task, this.globalSearchTerm, [
+      unit.code,
+      unit.name,
+      task.title,
+      task.abbreviation,
+      task.statusLabel,
+      task.targetGradeLabel,
+    ]);
+  }
+
+  private taskMatchesPerUnitSearch(task: DashboardTask, unit: DashboardUnit): boolean {
+    return this.taskMatchesSearchText(task, this.getSearchTerm(unit.projectId), [
+      task.title,
+      task.subtitle,
+      task.description,
+      task.abbreviation,
+      task.statusLabel,
+      unit.code,
+    ]);
+  }
+
+  private taskMatchesSearchText(
+    task: DashboardTask,
+    rawSearchTerm: string,
+    searchableValues: readonly string[],
+  ): boolean {
+    const searchTerm = this.normaliseSearchText(rawSearchTerm);
+
+    if (!searchTerm) {
+      return true;
+    }
+
+    const {numericDates, remainingText} = this.extractNumericDateSearches(rawSearchTerm);
+    const taskDate = this.formatDateAsIso(task.dueDate);
+
+    if (numericDates.some((date) => date !== taskDate)) {
+      return false;
+    }
+
+    const remainingSearchTerm = this.normaliseSearchText(remainingText);
+
+    if (!remainingSearchTerm) {
+      return numericDates.length > 0;
+    }
+
+    const searchableText = this.normaliseSearchText(
+      [...searchableValues, this.formatDateForSearch(task.dueDate)].join(' '),
+    );
+
+    return remainingSearchTerm.split(' ').every((term) => searchableText.includes(term));
+  }
+
+  private extractNumericDateSearches(value: string): {
+    numericDates: string[];
+    remainingText: string;
+  } {
+    const numericDates: string[] = [];
+    let remainingText = value;
+
+    remainingText = remainingText.replace(
+      /\b(\d{4})-(\d{1,2})-(\d{1,2})\b/g,
+      (_match: string, year: string, month: string, day: string) => {
+        numericDates.push(this.normaliseNumericDate(year, month, day));
+        return ' ';
+      },
+    );
+
+    remainingText = remainingText.replace(
+      /\b(\d{1,2})\/(\d{1,2})\/(\d{4})\b/g,
+      (_match: string, day: string, month: string, year: string) => {
+        numericDates.push(this.normaliseNumericDate(year, month, day));
+        return ' ';
+      },
+    );
+
+    return {numericDates, remainingText};
+  }
+
+  private normaliseNumericDate(year: string, month: string, day: string): string {
+    return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+  }
+
+  private normaliseSearchText(value: string): string {
+    return value
+      .toLocaleLowerCase('en-AU')
+      .replace(/[^\p{L}\p{N}]+/gu, ' ')
+      .trim();
+  }
+
+  private formatDateAsIso(date: Date | null | undefined): string {
+    if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    return this.normaliseNumericDate(
+      String(date.getFullYear()),
+      String(date.getMonth() + 1),
+      String(date.getDate()),
+    );
+  }
+
+  private formatDateForSearch(date: Date | null | undefined): string {
+    if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    const isoDate = this.formatDateAsIso(date);
+    const [year, month, day] = isoDate.split('-');
+
+    return [displayedDueDateFormatter.format(date), `${day}/${month}/${year}`, isoDate].join(' ');
+  }
+
+  private getUnitsForCurrentScope(): DashboardUnit[] {
+    if (this.unitScope === 'previous') {
+      return this.previousUnits;
+    }
+
+    if (this.unitScope === 'all') {
+      return [...this.activeUnits, ...this.previousUnits];
+    }
+
+    return this.activeUnits;
+  }
+
+  private mapProjects(projects: readonly Project[]): DashboardUnit[] {
+    return projects.map((project) => {
+      project.calcTopTasks();
+      const unit = project.unit;
+
+      return {
+        projectId: project.id,
+        code: unit.code,
+        name: unit.name,
+        // The cross-unit dashboard is an authorised-task view, not a target-grade plan.
+        // `activeTasks()` excludes definitions above the student's current target grade,
+        // even though those tasks are returned by the API and remain available to them.
+        tasks: this.mapTasks(project.tasks, project.id, unit.code),
+        gradeSummaries: [],
+        mobileSummary: {
+          taskCountLabel: '0 tasks',
+          deadlineLabel: 'No upcoming deadlines',
+          hasDeadlineWarning: false,
+        },
+        isPrevious: !unit.isActive,
+      };
+    });
+  }
+
+  private mapTasks(tasks: readonly Task[], projectId: number, unitCode: string): DashboardTask[] {
+    return tasks.map((task) => {
+      const def = task.definition;
+
+      return {
+        taskDefinitionId: def.id,
+        title: def.name,
+        subtitle: `${def.abbreviation} - ${def.targetGradeText} Task`,
+        statusLabel: TaskStatus.STATUS_LABELS.get(task.status),
+        abbreviation: def.abbreviation,
+        color: TaskStatus.STATUS_COLORS.get(task.status),
+        comments: task.numNewComments ?? 0,
+        hasFeedback: task.hasFeedback ?? false,
+        status: task.status,
+        targetGrade: def.targetGrade,
+        targetGradeLabel: def.targetGradeText,
+        weight: task.topWeight,
+        projectId,
+        description: def.description,
+        taskDef: def,
+        unitCode,
+        dueDate: task.localDueDate(),
+        showDueWarning: !task.inSubmittedState(),
+      };
+    });
+  }
+}
diff --git a/src/app/dashboard/f-cross-dashboard.route.spec.ts b/src/app/dashboard/f-cross-dashboard.route.spec.ts
new file mode 100644
index 0000000000..4ed9242237
--- /dev/null
+++ b/src/app/dashboard/f-cross-dashboard.route.spec.ts
@@ -0,0 +1,158 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {Router, provideRouter} from '@angular/router';
+import {RouterTestingHarness} from '@angular/router/testing';
+import {BehaviorSubject, EMPTY, of} from 'rxjs';
+import {AuthenticationService} from '../api/services/authentication.service';
+import {ProjectService} from '../api/services/project.service';
+import {TaskRecommendationService} from '../api/services/task-recommendation.service';
+import {TaskService} from '../api/services/task.service';
+import {UserService} from '../api/services/user.service';
+import {routes} from '../app.routes';
+import {GlobalStateService} from '../projects/states/index/global-state.service';
+import {CrossDashboardComponent} from './f-cross-dashboard.component';
+
+describe('Cross-Project Dashboard route (/dashboard)', () => {
+  const userServiceMock = {
+    currentUser: {role: 'Student'},
+  };
+
+  const isAuthorisedMock = vi.fn((roleWhitelist: string[], role?: string) => {
+    return role !== undefined && roleWhitelist.includes(role);
+  });
+
+  const globalStateMock = {
+    isLoadingSubject: new BehaviorSubject<boolean>(false),
+    loadedUnitRoles: {currentValues: []},
+    currentUserProjects: {values: of([])},
+    onLoad: (run: () => void) => run(),
+  };
+
+  const projectServiceMock = {
+    query: vi.fn().mockReturnValue(of([])),
+  };
+
+  beforeEach(() => {
+    userServiceMock.currentUser.role = 'Student';
+    isAuthorisedMock.mockClear();
+    projectServiceMock.query.mockClear();
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideRouter(routes),
+        {
+          provide: AuthenticationService,
+          useValue: {isAuthorised: isAuthorisedMock},
+        },
+        {
+          provide: UserService,
+          useValue: userServiceMock,
+        },
+        {
+          provide: GlobalStateService,
+          useValue: globalStateMock,
+        },
+        {
+          provide: ProjectService,
+          useValue: projectServiceMock,
+        },
+        {
+          provide: TaskRecommendationService,
+          useValue: {getAll: () => of([])},
+        },
+        {
+          provide: TaskService,
+          useValue: {taskStatusUpdated$: EMPTY},
+        },
+      ],
+    });
+  });
+
+  it('AC1: allows a Student to navigate directly to /dashboard', async () => {
+    const harness = await RouterTestingHarness.create('/dashboard');
+    const router = TestBed.inject(Router);
+
+    expect(router.url).toBe('/dashboard');
+    expect(harness.routeNativeElement).toBeTruthy();
+    expect(isAuthorisedMock).toHaveBeenCalledTimes(1);
+    expect(isAuthorisedMock).toHaveBeenCalledWith(['Student'], 'Student');
+  });
+
+  it('AC3: redirects a non-whitelisted Tutor to /unauthorised', async () => {
+    userServiceMock.currentUser.role = 'Tutor';
+
+    const harness = await RouterTestingHarness.create('/dashboard');
+    const router = TestBed.inject(Router);
+
+    expect(router.url).toBe('/unauthorised');
+    expect(harness.routeNativeElement).toBeTruthy();
+    expect(isAuthorisedMock).toHaveBeenCalledTimes(1);
+    expect(isAuthorisedMock).toHaveBeenCalledWith(['Student'], 'Tutor');
+  });
+
+  // RouterTestingHarness performs client-side navigation. It does not restart
+  // the browser or Angular application, so real refresh coverage belongs in
+  // a future browser-level end-to-end test.
+
+  it.each(['previous', 'all'] as const)(
+    'AC4: restores %s unit scope on direct navigation',
+    async (scope) => {
+      const harness = await RouterTestingHarness.create();
+      const component = await harness.navigateByUrl(
+        `/dashboard?scope=${scope}`,
+        CrossDashboardComponent,
+      );
+      expect(component.unitScope).toBe(scope);
+      expect(projectServiceMock.query).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  it.each(['/dashboard', '/dashboard?scope=invalid', '/dashboard?scope=active'])(
+    'defaults to active for %s without loading previous units',
+    async (url) => {
+      const harness = await RouterTestingHarness.create();
+      const component = await harness.navigateByUrl(url, CrossDashboardComponent);
+      expect(component.unitScope).toBe('active');
+      expect(projectServiceMock.query).not.toHaveBeenCalled();
+    },
+  );
+
+  it('follows query-only navigation on a reused dashboard without reloading previous units', async () => {
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl(
+      '/dashboard?scope=previous',
+      CrossDashboardComponent,
+    );
+    const next = await harness.navigateByUrl('/dashboard?scope=all', CrossDashboardComponent);
+    expect(next).toBe(component);
+    expect(component.unitScope).toBe('all');
+    await harness.navigateByUrl('/dashboard', CrossDashboardComponent);
+    expect(component.unitScope).toBe('active');
+    expect(projectServiceMock.query).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the open phone card when unrelated query parameters change', async () => {
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl('/dashboard?scope=all', CrossDashboardComponent);
+    component.expandedMobileProjectId = 42;
+    await harness.navigateByUrl('/dashboard?scope=all&tab=tasks', CrossDashboardComponent);
+    expect(component.expandedMobileProjectId).toBe(42);
+    expect(projectServiceMock.query).toHaveBeenCalledTimes(1);
+  });
+
+  it('writes scope changes while preserving unrelated query parameters and the fragment', async () => {
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl(
+      '/dashboard?tab=tasks#units',
+      CrossDashboardComponent,
+    );
+    const router = TestBed.inject(Router);
+    component.setUnitScope('previous');
+    await harness.fixture.whenStable();
+    expect(router.url).toBe('/dashboard?tab=tasks&scope=previous#units');
+    component.clearGlobalFilters();
+    await harness.fixture.whenStable();
+    expect(router.url).toBe('/dashboard?tab=tasks#units');
+    expect(component.unitScope).toBe('active');
+  });
+});
diff --git a/src/app/dashboard/list-item/dashboard-list-item.component.html b/src/app/dashboard/list-item/dashboard-list-item.component.html
new file mode 100644
index 0000000000..b7cb23bc4d
--- /dev/null
+++ b/src/app/dashboard/list-item/dashboard-list-item.component.html
@@ -0,0 +1,64 @@
+<div class="flex flex-row">
+  <div class="mr-6 w-4 shrink-0" [style.background-color]="task.color"></div>
+  <div class="flex min-w-0 shrink grow flex-col py-4">
+    <h4 class="mb-1 min-w-0 grow">
+      <a
+        class="block truncate rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+        [routerLink]="['/projects', task.projectId, 'dashboard', task.abbreviation]"
+      >
+        {{ task.title }}
+      </a>
+    </h4>
+    <div class="flex flex-wrap items-center gap-2">
+      <p class="mb-0">{{ task.subtitle }}</p>
+      @if (dueDateWarning; as warning) {
+        <span
+          class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap"
+          [ngClass]="{
+            'bg-red-100 text-red-800': warning.state === 'overdue',
+            'bg-orange-100 text-orange-800': warning.state === 'within24Hours',
+            'bg-yellow-100 text-yellow-900': warning.state === 'within3Days',
+            'bg-blue-100 text-blue-800': warning.state === 'within7Days',
+          }"
+        >
+          <mat-icon aria-hidden="true" class="!size-3.5 !text-sm !leading-none">
+            {{ warning.icon }}
+          </mat-icon>
+          <span>{{ warning.label }}</span>
+        </span>
+      }
+      @if (task.hasFeedback) {
+        <span
+          class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium whitespace-nowrap text-green-800"
+        >
+          <mat-icon aria-hidden="true" class="!size-3.5 !text-sm !leading-none">
+            feedback
+          </mat-icon>
+          <span>Staff feedback</span>
+        </span>
+      }
+    </div>
+    <p class="mt-1 mb-0 text-sm font-medium">Status: {{ task.statusLabel }}</p>
+  </div>
+  <div class="mr-6 ml-2 flex flex-row items-center justify-end gap-4">
+    @if (!isExpanded && task.comments > 0) {
+      <div class="flex size-8 rounded-full bg-red-500">
+        <span class="m-auto text-xl font-medium text-white">{{ task.comments }}</span>
+      </div>
+    }
+    <button
+      mat-icon-button
+      type="button"
+      [attr.aria-expanded]="isExpanded"
+      [attr.aria-label]="(isExpanded ? 'Collapse ' : 'Expand ') + task.title + ' details'"
+      (click)="isExpanded = !isExpanded"
+    >
+      <mat-icon>{{ isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>
+    </button>
+  </div>
+</div>
+<div class="flex flex-row">
+  @if (isExpanded) {
+    <f-expanded-list-item [task]="task"></f-expanded-list-item>
+  }
+</div>
diff --git a/src/app/dashboard/list-item/dashboard-list-item.component.spec.ts b/src/app/dashboard/list-item/dashboard-list-item.component.spec.ts
new file mode 100644
index 0000000000..d1504cc6d0
--- /dev/null
+++ b/src/app/dashboard/list-item/dashboard-list-item.component.spec.ts
@@ -0,0 +1,195 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {TaskDefinition} from '../../api/models/task-definition';
+import {
+  DashboardListItemComponent,
+  DashboardTask,
+  getDueDateWarning,
+} from './dashboard-list-item.component';
+
+describe('getDueDateWarning', () => {
+  const now = new Date('2026-08-23T00:00:00.000Z');
+  const day = 24 * 60 * 60 * 1000;
+
+  it.each([
+    {offset: -1, state: 'overdue', label: 'Overdue', icon: 'error'},
+    {
+      offset: day,
+      state: 'within24Hours',
+      label: 'Due within 24 hours',
+      icon: 'schedule',
+    },
+    {
+      offset: day + 1,
+      state: 'within3Days',
+      label: 'Due within 3 days',
+      icon: 'warning',
+    },
+    {
+      offset: 3 * day,
+      state: 'within3Days',
+      label: 'Due within 3 days',
+      icon: 'warning',
+    },
+    {
+      offset: 3 * day + 1,
+      state: 'within7Days',
+      label: 'Due within 7 days',
+      icon: 'event',
+    },
+    {
+      offset: 7 * day,
+      state: 'within7Days',
+      label: 'Due within 7 days',
+      icon: 'event',
+    },
+  ])('returns $state at the expected boundary', ({offset, state, label, icon}) => {
+    const dueDate = new Date(now.getTime() + offset);
+
+    expect(getDueDateWarning(dueDate, true, now)).toEqual({state, label, icon});
+  });
+
+  it('treats a task due now as due within 24 hours', () => {
+    expect(getDueDateWarning(now, true, now)?.state).toBe('within24Hours');
+  });
+
+  it('does not warn more than seven days before the due date', () => {
+    const dueDate = new Date(now.getTime() + 7 * day + 1);
+
+    expect(getDueDateWarning(dueDate, true, now)).toBeNull();
+  });
+
+  it('does not warn for a submitted task', () => {
+    const overdueDate = new Date(now.getTime() - day);
+
+    expect(getDueDateWarning(overdueDate, false, now)).toBeNull();
+  });
+
+  it.each([null, undefined, new Date('invalid')])(
+    'ignores a missing or invalid date',
+    (dueDate) => {
+      expect(getDueDateWarning(dueDate, true, now)).toBeNull();
+    },
+  );
+});
+
+describe('DashboardListItemComponent', () => {
+  let component: DashboardListItemComponent;
+  let fixture: ComponentFixture<DashboardListItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DashboardListItemComponent],
+      imports: [MatButtonModule, MatIconModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DashboardListItemComponent);
+    component = fixture.componentInstance;
+    component.task = {
+      taskDefinitionId: 10,
+      title: 'Security Review',
+      subtitle: '1.1P - Pass Task',
+      statusLabel: 'Resubmit',
+      abbreviation: '1.1P',
+      color: '#123456',
+      comments: 0,
+      hasFeedback: false,
+      status: 'fix_and_resubmit',
+      targetGrade: 0,
+      targetGradeLabel: 'Pass',
+      weight: 0,
+      projectId: 1,
+      description: 'Review the security findings.',
+      taskDef: {} as TaskDefinition,
+      unitCode: 'SIT764',
+      dueDate: new Date(2026, 7, 12),
+      showDueWarning: false,
+    } satisfies DashboardTask;
+    fixture.detectChanges();
+  });
+
+  it('shows a textual status without requiring the colour indicator', () => {
+    expect(fixture.nativeElement.textContent).toContain('Status: Resubmit');
+  });
+
+  it('uses a labelled native button with expanded state for task details', () => {
+    const button = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+
+    expect(button.getAttribute('aria-label')).toBe('Expand Security Review details');
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+
+    button.click();
+    fixture.detectChanges();
+
+    expect(button.getAttribute('aria-label')).toBe('Collapse Security Review details');
+    expect(button.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('uses a keyboard-focusable link for the task title', () => {
+    const titleLink = fixture.nativeElement.querySelector('h4 a') as HTMLAnchorElement;
+
+    expect(titleLink).not.toBeNull();
+    expect(titleLink.textContent.trim()).toBe('Security Review');
+    expect(titleLink.classList).toContain('focus-visible:outline-2');
+  });
+
+  it('shows the staff feedback indicator only when feedback is present', () => {
+    expect(fixture.nativeElement.textContent).not.toContain('Staff feedback');
+
+    fixture.componentRef.setInput('task', {
+      ...component.task,
+      hasFeedback: true,
+    });
+    fixture.detectChanges();
+
+    const feedbackBadge = fixture.nativeElement.querySelector('.bg-green-100') as HTMLElement;
+    const feedbackIcon = feedbackBadge.querySelector('mat-icon') as HTMLElement;
+
+    expect(feedbackBadge).not.toBeNull();
+    expect(feedbackBadge.textContent).toContain('Staff feedback');
+    expect(feedbackIcon.textContent.trim()).toBe('feedback');
+    expect(feedbackIcon.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('renders warning text and an icon alongside the separate status colour', () => {
+    fixture.componentRef.setInput('task', {
+      taskDefinitionId: 10,
+      title: 'Accessible task',
+      subtitle: '1.1P - Pass Task',
+      statusLabel: 'Not Started',
+      abbreviation: '1.1P',
+      color: '#123456',
+      comments: 0,
+      hasFeedback: false,
+      status: 'not_started',
+      targetGrade: 0,
+      targetGradeLabel: 'Pass',
+      weight: 0,
+      projectId: 1,
+      description: 'Description',
+      taskDef: {} as DashboardTask['taskDef'],
+      unitCode: 'COS10001',
+      dueDate: new Date(Date.now() + 12 * 60 * 60 * 1000),
+      showDueWarning: true,
+    } satisfies DashboardTask);
+
+    fixture.detectChanges();
+
+    expect(component.dueDateWarning?.state).toBe('within24Hours');
+
+    const badge = fixture.nativeElement.querySelector('.bg-orange-100') as HTMLElement;
+    const icon = badge.querySelector('mat-icon') as HTMLElement;
+    const statusStrip = fixture.nativeElement.firstElementChild.firstElementChild as HTMLElement;
+
+    expect(badge.textContent).toContain('Due within 24 hours');
+    expect(icon.textContent.trim()).toBe('schedule');
+    expect(icon.getAttribute('aria-hidden')).toBe('true');
+    expect(icon.classList).toContain('!leading-none');
+    expect(statusStrip.style.backgroundColor).toBe('rgb(18, 52, 86)');
+    expect(fixture.nativeElement.textContent).toContain('Status: Not Started');
+  });
+});
diff --git a/src/app/dashboard/list-item/dashboard-list-item.component.ts b/src/app/dashboard/list-item/dashboard-list-item.component.ts
new file mode 100644
index 0000000000..6a4450d12c
--- /dev/null
+++ b/src/app/dashboard/list-item/dashboard-list-item.component.ts
@@ -0,0 +1,77 @@
+import {Component, Input} from '@angular/core';
+import {TaskDefinition} from '../../api/models/task-definition';
+import {TaskStatusEnum} from '../../api/models/task-status';
+
+export type DueDateWarning = {
+  state: 'overdue' | 'within24Hours' | 'within3Days' | 'within7Days';
+  label: string;
+  icon: string;
+};
+
+const DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
+
+export function getDueDateWarning(
+  dueDate: Date | null | undefined,
+  showWarning: boolean,
+  now: Date = new Date(),
+): DueDateWarning | null {
+  if (!showWarning || !(dueDate instanceof Date) || Number.isNaN(dueDate.getTime())) {
+    return null;
+  }
+
+  const millisecondsUntilDue = dueDate.getTime() - now.getTime();
+
+  if (millisecondsUntilDue < 0) {
+    return {state: 'overdue', label: 'Overdue', icon: 'error'};
+  }
+
+  if (millisecondsUntilDue <= DAY_IN_MILLISECONDS) {
+    return {state: 'within24Hours', label: 'Due within 24 hours', icon: 'schedule'};
+  }
+
+  if (millisecondsUntilDue <= 3 * DAY_IN_MILLISECONDS) {
+    return {state: 'within3Days', label: 'Due within 3 days', icon: 'warning'};
+  }
+
+  if (millisecondsUntilDue <= 7 * DAY_IN_MILLISECONDS) {
+    return {state: 'within7Days', label: 'Due within 7 days', icon: 'event'};
+  }
+
+  return null;
+}
+
+export type DashboardTask = {
+  taskDefinitionId: number;
+  title: string;
+  subtitle: string;
+  statusLabel: string;
+  abbreviation: string;
+  color: string;
+  comments: number;
+  hasFeedback: boolean;
+  status: TaskStatusEnum;
+  targetGrade: number;
+  targetGradeLabel: string;
+  weight: number;
+  projectId: number;
+  description: string;
+  taskDef: TaskDefinition;
+  unitCode: string;
+  dueDate: Date | null | undefined;
+  showDueWarning: boolean;
+};
+
+@Component({
+  selector: 'f-dashboard-list-item',
+  standalone: false,
+  templateUrl: './dashboard-list-item.component.html',
+})
+export class DashboardListItemComponent {
+  @Input() task: DashboardTask;
+
+  isExpanded = false;
+
+  get dueDateWarning(): DueDateWarning | null {
+    return getDueDateWarning(this.task?.dueDate, this.task?.showDueWarning ?? false);
+  }
+}
diff --git a/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html
new file mode 100644
index 0000000000..a09d738599
--- /dev/null
+++ b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html
@@ -0,0 +1,43 @@
+<div class="flex flex-row">
+  <div class="mr-6 w-4 shrink-0" [style.background-color]="task.color"></div>
+  <div class="flex min-w-0 shrink grow flex-col pb-4">
+    <p class="font-bold">{{ task.statusLabel }}</p>
+    <p class="pt-2">{{ task.description }}</p>
+    <p style="font-size: 13px">
+      Complete by
+      <span class="font-bold">{{ task.dueDate | date: 'EEEE d MMMM' }}</span>
+    </p>
+    <div class="flex flex-row flex-wrap gap-2 pt-2">
+      <button
+        class="truncate"
+        mat-stroked-button
+        [hidden]="!task?.taskDef?.hasTaskSheet"
+        (click)="downloadTaskSheet()"
+      >
+        <mat-icon aria-label="Download" style="width: 15px; height: 15px; font-size: 15px">
+          description
+        </mat-icon>
+        Task
+      </button>
+      <button
+        class="truncate"
+        mat-stroked-button
+        [hidden]="!task?.taskDef?.hasTaskResources"
+        (click)="downloadResources()"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px">download</mat-icon>
+        Resources
+      </button>
+      <button
+        mat-stroked-button
+        matBadgeColor="warn"
+        matBadgePosition="after"
+        [matBadge]="task.comments > 0 ? task.comments : null"
+        [routerLink]="['/projects', task.projectId, 'dashboard', task.abbreviation]"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px">open_in_new</mat-icon>
+        More
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.scss b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.scss
new file mode 100644
index 0000000000..a3b7bc573e
--- /dev/null
+++ b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.scss
@@ -0,0 +1,3 @@
+.mat-badge-warn {
+  --mat-badge-text-color: white;
+}
diff --git a/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.ts b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.ts
new file mode 100644
index 0000000000..beaf1733c4
--- /dev/null
+++ b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.ts
@@ -0,0 +1,29 @@
+import {Component, Input} from '@angular/core';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {DashboardTask} from '../dashboard-list-item.component';
+
+@Component({
+  selector: 'f-expanded-list-item',
+  standalone: false,
+  templateUrl: './expanded-list-item.component.html',
+  styleUrls: ['./expanded-list-item.component.scss'],
+})
+export class DashboardExpandedListItemComponent {
+  @Input() task: DashboardTask;
+
+  constructor(private fileDownloader: FileDownloaderService) {}
+
+  downloadTaskSheet() {
+    this.fileDownloader.downloadFile(
+      this.task.taskDef.getTaskPDFUrl(true),
+      `${this.task.unitCode}-${this.task.abbreviation}-TaskSheet.pdf`,
+    );
+  }
+
+  downloadResources() {
+    this.fileDownloader.downloadFile(
+      this.task.taskDef.getTaskResourcesUrl(true),
+      `${this.task.unitCode}-${this.task.abbreviation}-TaskResources.zip`,
+    );
+  }
+}
diff --git a/src/app/demo/README.md b/src/app/demo/README.md
new file mode 100644
index 0000000000..87b20e0e44
--- /dev/null
+++ b/src/app/demo/README.md
@@ -0,0 +1,98 @@
+# Centralised local demo mode
+
+This folder owns the controls and shared state for the combined local walkthrough. Unit Hub's
+sample content is in `src/app/unit-hub/unit-hub-demo.fixtures.ts`. Demo tools are available only when
+`environment.enableDemoTools` is true and
+`environment.production` is false. They start off and persist only for the current browser tab.
+
+When demo mode is off in local development, the HTTP mask keeps `DEMO20007` (or one fallback
+project), hides notification rows/counts, and the task PPI service returns a labelled masked state.
+When it is on, those API-backed surfaces pass through unchanged. The unit-summary percentage,
+burndown curve and push preview use fabricated presentation values. Unit Hub has its own explicit
+demo fixtures: with the switch off, it always reads the signed-in account's authorised live API
+content, including in a development build.
+
+The push preview is visual only. It must never inject `SwPush`, request `Notification` permission,
+or call `/push_subscriptions`.
+
+## Unit Hub walkthrough
+
+Enable **Demo mode** in **Demo controls**, then open **Unit Hub**. The fictional student is enrolled
+in SIT111. The sample contains announcements, two HelpHubs and a lecture. SIT102 rows deliberately
+exist in the raw fixture to check that unrelated unit content is excluded from the displayed feed.
+Click an announcement title or **Read full announcement** to read the complete post. Click a session
+title or **View full details** for its description, time, joining and calendar choices. The detail
+dialog closes and clears its selected content when the unit, route or demo mode changes.
+
+The sample dates are generated relative to the local browser date and are not an official timetable.
+Staff editing, live API writes and calendar subscriptions remain disabled in the Unit Hub demo.
+Google Calendar drafts and downloaded ICS copies are explicitly labelled **DEMO**. They are created
+only when the user chooses and do not receive later schedule changes.
+
+### Optional hosted HelpHub links
+
+In **Demo controls → Use your own HelpHub links**, paste a Teams joining link for either or both
+HelpHubs, then choose **Save demo links**. Open Unit Hub again to see **Join hosted demo**. The lecture
+keeps its sample description and calendar actions without a fabricated joining destination.
+
+Only supported HTTPS joining paths on `teams.microsoft.com` are accepted. The host-provided links
+are stored in `sessionStorage` for the current browser tab. They are never sent to OnTrack's API,
+seeded into production or committed to the repository. **Clear demo links**, signing out or ending
+the browser tab session removes them. Turning demo mode off hides the hosted links but retains them
+for another walkthrough in the same tab. Production builds cannot use this store.
+
+A hosted link opens a real meeting supplied by the presenter. Calendar copies include that link
+with fictional dates and a clear demo notice. Opening a Google Calendar draft shares its chosen
+details with Google. Keep links out of public screenshots, test fixtures and handover documents.
+Without a host-provided link, the sample offers no joining action.
+
+### Try the Teams meeting draft
+
+The optional **Try the Teams meeting draft** section opens a real Teams invitation draft with a
+**DEMO** title and fictional details. Opening it sends no invitation. Review the example times and
+attendees; press **Send** in Teams only if deliberately creating that meeting. Tests inspect the
+generated URL without following it or sending anything.
+
+The same composer is available to assigned teaching staff in the normal session editor and session
+detail view. It prefills the subject, description, start/end instants and optional university sign-in
+email addresses. Draft-only description edits leave the unsaved OnTrack session intact. Teams
+creates the actual meeting join URL after the invitation is sent; copy that URL back into the
+OnTrack session and save/publish it. An existing joining or source URL is not automatically copied
+into a new invitation.
+
+Microsoft documents [the scheduling fields and required time offsets](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-link-workflow).
+Repeating schedules must be set in Teams before sending; the link opens one occurrence. Location is
+included as description text because the scheduling URL has no location parameter. Details or
+attendees that exceed OnTrack's URL bound must be shortened for the draft or added directly in Teams.
+The [HTTPS deep-link chooser](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links)
+offers the app or web client. If a phone cannot open the scheduling draft, use a desktop browser or
+copy the displayed details into Teams. This does not require the optional Graph announcement sync
+connection, and a separate Teams sign-in may be requested by Microsoft.
+
+## Study essentials
+
+Unit Hub, available from the home-page link, shows public university entry points using the explicit
+`studyEssentialsProfile` in `src/app/study-essentials/study-essentials.config.ts`. This fork sets
+`'deakin'` for development, production and the demo. Other institutions should set it to `''` before
+building, or provide their own reviewed profile. The choice is never inferred from a unit code,
+email address or product name. See [the Study essentials handover](../study-essentials/README.md).
+
+The panel links to DeakinSync, CloudDeakin, StudentConnect, timetable guidance, the library and
+Student Central. Each destination controls its own sign-in. No account, enrolment, course or meeting
+details are appended to these public links. Unit-specific content remains in the scoped Unit Hub.
+
+## Removal
+
+1. Remove `DemoToolsModule` from `doubtfire-angular.module.ts` and delete this folder.
+2. Remove `/demo-controls` and its imports from `app.routes.ts`.
+3. Remove the Demo controls item/store injection from `common/header/header.component.*`.
+4. Remove `<f-demo-mode-banner>` from `app.component.html`.
+5. Remove `enableDemoTools` from both environment files.
+6. Remove the `DemoModeStore.reset()` sign-out hook from `authentication.service.ts`.
+7. Remove demo gating/imports from the PPI indicator, progress dashboard, and burndown chart.
+8. Either delete the demo-only unit summary and peer-median UI or replace them with authorised live
+   API adapters before retaining those surfaces.
+9. Remove Unit Hub's demo fixture branch and hosted-link store dependency from `UnitHubService`,
+   keeping its authorised API path. Remove demo notices/actions from Unit Hub, its details dialog
+   and calendar exports. Remove the demo fixture file and demo-only session marker once unused.
+   Retain the production Teams meeting composer and the configured Study essentials panel.
diff --git a/src/app/demo/demo-controls/demo-controls.component.html b/src/app/demo/demo-controls/demo-controls.component.html
new file mode 100644
index 0000000000..13a92e4211
--- /dev/null
+++ b/src/app/demo/demo-controls/demo-controls.component.html
@@ -0,0 +1,342 @@
+<main aria-labelledby="demo-controls-title" class="demo-controls">
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-icon aria-hidden="true" mat-card-avatar>science</mat-icon>
+      <mat-card-title id="demo-controls-title">Demo controls</mat-card-title>
+      <mat-card-subtitle>Local development only</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <p>
+        Demo mode combines the feature surfaces used for walkthroughs. It does not replace live CPD
+        task data or recommendation scores with fabricated values.
+      </p>
+
+      <mat-slide-toggle
+        aria-describedby="demo-mode-description"
+        color="primary"
+        [checked]="demoMode.enabled"
+        (change)="setDemoMode($event)"
+      >
+        Demo mode {{ demoMode.enabled ? 'on' : 'off' }}
+      </mat-slide-toggle>
+
+      <p id="demo-mode-description">
+        Changing this setting reloads OnTrack so project and notification caches cannot mix quiet
+        and demonstration data.
+      </p>
+
+      <h2>What the switch does</h2>
+      <dl>
+        <dt>Off — quiet baseline</dt>
+        <dd>
+          Keeps one baseline unit (DEMO20007 when available) and hides the demo notification and
+          peer-comparison surfaces.
+        </dd>
+        <dt>On — complete walkthrough</dt>
+        <dd>
+          Shows the complete cross-unit scenario, a privacy-safe lifecycle spread (60% submitted and
+          10% complete), and all seven curated local notifications.
+        </dd>
+      </dl>
+
+      <h2>Affected surfaces</h2>
+      <ul>
+        @for (surface of affectedSurfaces; track surface) {
+          <li>{{ surface }}</li>
+        }
+      </ul>
+
+      <section aria-labelledby="hub-demo-title" class="push-preview">
+        <h2 id="hub-demo-title">Unit Hub: announcements, HelpHubs and classes</h2>
+        <p>
+          Turn demo mode on above, then open Unit Hub to preview a student enrolled only in SIT111.
+          The sample includes announcements, two HelpHubs and a lecture. SIT102 content stays
+          hidden.
+        </p>
+        <p>
+          Demo dates and content are fictional. Subscriptions and editing are disabled. You can
+          export a calendar copy labelled DEMO. With demo mode off, Unit Hub reads real content for
+          your account.
+        </p>
+        <form
+          class="hub-meeting-links"
+          [formGroup]="meetingLinksForm"
+          (ngSubmit)="saveMeetingLinks()"
+        >
+          <h3>Use your own HelpHub links</h3>
+          <p id="hosted-links-note">
+            Optional: add Teams joining links you host. They stay in this browser tab and are
+            cleared on sign out. Demo Join buttons and calendar copies will use these real links
+            with fictional dates. Opening a calendar draft shares its details with your chosen
+            calendar provider.
+          </p>
+          <label for="demo-helphub-link">HelpHub meeting link</label>
+          <input
+            aria-describedby="hosted-links-note"
+            autocomplete="off"
+            formControlName="helpHub"
+            id="demo-helphub-link"
+            maxlength="4096"
+            spellcheck="false"
+            type="url"
+          />
+          <label for="demo-extra-helphub-link">Extra HelpHub meeting link</label>
+          <input
+            aria-describedby="hosted-links-note"
+            autocomplete="off"
+            formControlName="extraHelpHub"
+            id="demo-extra-helphub-link"
+            maxlength="4096"
+            spellcheck="false"
+            type="url"
+          />
+          @if (meetingLinksError) {
+            <p role="alert">{{ meetingLinksError }}</p>
+          }
+          @if (meetingLinksStatus) {
+            <p role="status">{{ meetingLinksStatus }}</p>
+          }
+          <div class="hub-meeting-links__actions">
+            <button mat-stroked-button type="submit">Save demo links</button>
+            <button mat-button type="button" (click)="clearMeetingLinks()">Clear demo links</button>
+          </div>
+        </form>
+        <a mat-stroked-button routerLink="/unit-hub"
+          ><mat-icon aria-hidden="true">campaign</mat-icon>Open Unit Hub</a
+        >
+        <details>
+          <summary>Try the Teams meeting draft</summary>
+          <p>
+            This example opens a real Teams invitation draft with fictional details. OnTrack sends
+            nothing. In the normal version, assigned teaching staff prepare meetings from the
+            session editor using their own title, dates and description.
+          </p>
+          <f-teams-meeting-composer unitCode="SIT111" [draft]="demoMeetingDraft" />
+        </details>
+      </section>
+
+      <section aria-labelledby="ppi-preview-title" class="ppi-preview">
+        <div class="ppi-preview__heading">
+          <mat-icon aria-hidden="true">groups</mat-icon>
+          <div>
+            <h2 id="ppi-preview-title">Peer Progress Indicator visual preview</h2>
+            <p>
+              Sample only — fabricated anonymous percentages. Switching previews never calls the API
+              or changes a profile.
+            </p>
+          </div>
+        </div>
+
+        <div aria-label="Choose a peer progress preview state" class="ppi-preview__choices">
+          @for (option of ppiPreviewOptions; track option.kind) {
+            <button
+              mat-stroked-button
+              type="button"
+              [attr.aria-pressed]="ppiPreviewKind === option.kind"
+              [class.ppi-preview__choice--active]="ppiPreviewKind === option.kind"
+              (click)="setPpiPreview(option.kind)"
+            >
+              {{ option.label }}
+            </button>
+          }
+        </div>
+
+        <article
+          aria-labelledby="ppi-preview-card-title"
+          aria-live="polite"
+          class="ppi-preview-card"
+        >
+          <header class="ppi-preview-card__header">
+            <div class="ppi-preview-card__identity">
+              <span aria-hidden="true" class="ppi-preview-card__avatar">
+                <mat-icon aria-hidden="true">groups</mat-icon>
+              </span>
+              <span>
+                <strong id="ppi-preview-card-title">Peer Progress Indicator</strong>
+                <small>Anonymous peers at your target grade</small>
+              </span>
+            </div>
+
+            @if (!ppiPreview.isSuppressed) {
+              <button
+                aria-controls="ppi-preview-advanced-panel"
+                aria-label="Advanced peer status breakdown"
+                class="ppi-preview-card__toggle"
+                role="switch"
+                type="button"
+                [attr.aria-checked]="ppiPreviewAdvanced"
+                [attr.aria-expanded]="ppiPreviewAdvanced"
+                (click)="setPpiPreviewAdvanced(!ppiPreviewAdvanced)"
+              >
+                <span aria-hidden="true" class="ppi-preview-card__toggle-track">
+                  <span class="ppi-preview-card__toggle-thumb"></span>
+                </span>
+                <span>Advanced</span>
+              </button>
+            }
+          </header>
+
+          @if (ppiPreview.isSuppressed) {
+            <div class="ppi-preview-card__safe-state">
+              <mat-icon aria-hidden="true">privacy_tip</mat-icon>
+              <span>
+                <strong>Progress is hidden to protect privacy</strong>
+                {{ ppiPreview.unavailableMessage }}
+              </span>
+            </div>
+          } @else {
+            <div class="ppi-preview-card__summary">
+              <span
+                aria-label="Peer completion progress at your target grade"
+                class="ppi-preview-card__value"
+              >
+                <strong>{{ formatPpiPercentage(ppiPreviewPercentage) }}%</strong>
+                <span>of peers have completed this task</span>
+              </span>
+              <span class="ppi-preview-card__visual">
+                <span
+                  class="ppi-preview-card__track"
+                  role="progressbar"
+                  [attr.aria-label]="
+                    formatPpiPercentage(ppiPreviewPercentage) +
+                    '% of peers at your target grade have completed this task'
+                  "
+                  [attr.aria-valuemax]="100"
+                  [attr.aria-valuemin]="0"
+                  [attr.aria-valuenow]="ppiPreviewPercentage"
+                >
+                  <span [style.width]="ppiPreviewWidth"></span>
+                </span>
+                <small aria-hidden="true" class="ppi-preview-card__scale">
+                  <span>{{ formatPpiPercentage(ppiPreviewPercentage) }}%</span>
+                  <span>Peer cohort</span>
+                </small>
+              </span>
+            </div>
+
+            @if (ppiPreviewAdvanced) {
+              <section class="ppi-preview-card__advanced" id="ppi-preview-advanced-panel">
+                <div class="ppi-preview-card__metrics">
+                  <span class="is-complete"
+                    >Completed <strong>{{ ppiPreview.completedPercentage }}%</strong></span
+                  >
+                  <span class="is-submitted"
+                    >Submitted <strong>{{ ppiPreview.submittedPercentage }}%</strong></span
+                  >
+                </div>
+
+                <span class="ppi-preview-card__advanced-heading">
+                  <strong>Task status breakdown</strong>
+                  <small>Independently privacy-rounded; values may not total 100%</small>
+                </span>
+
+                @if (!ppiPreview.distributionAvailable) {
+                  <div class="ppi-preview-card__safe-state">
+                    <mat-icon aria-hidden="true">privacy_tip</mat-icon>
+                    <span>
+                      <strong>Detailed breakdown protected</strong>
+                      The overall percentage is safe to show, but detailed statuses are hidden to
+                      prevent individual progress being inferred.
+                    </span>
+                  </div>
+                } @else if (ppiPreviewUsesStackedDistribution) {
+                  <div aria-label="Sample peer task status distribution" class="ppi-preview-bar">
+                    @for (segment of ppiPreviewSegments; track segment.status) {
+                      <span
+                        [attr.title]="
+                          segment.label + ': ' + formatPpiPercentage(segment.percentage) + '%'
+                        "
+                        [style.background-color]="segment.color"
+                        [style.flex-grow]="segment.percentage"
+                      ></span>
+                    }
+                  </div>
+                  <ul class="ppi-preview-legend">
+                    @for (segment of ppiPreviewSegments; track segment.status) {
+                      <li>
+                        <span [style.background-color]="segment.color"></span>
+                        <span class="ppi-preview-legend__name">{{ segment.label }}</span>
+                        <strong>{{ formatPpiPercentage(segment.percentage) }}%</strong>
+                      </li>
+                    }
+                  </ul>
+                } @else {
+                  <div class="ppi-preview-independent">
+                    <p id="ppi-preview-independent-note" role="note">
+                      These privacy-rounded statuses total
+                      {{ formatPpiPercentage(ppiPreviewDistributionTotal) }}%. Each bar uses its own
+                      0&ndash;100% scale, so values are not stretched to fill 100%.
+                    </p>
+                    <ul aria-label="Independently scaled sample peer task status percentages">
+                      @for (segment of ppiPreviewSegments; track segment.status) {
+                        <li [attr.data-status]="segment.status">
+                          <span>
+                            <span
+                              aria-hidden="true"
+                              [style.background-color]="segment.color"
+                            ></span>
+                            {{ segment.label }}
+                          </span>
+                          <span
+                            aria-describedby="ppi-preview-independent-note"
+                            class="ppi-preview-independent__track"
+                            role="progressbar"
+                            [attr.aria-label]="segment.label + ' sample peer status percentage'"
+                            [attr.aria-valuemax]="100"
+                            [attr.aria-valuemin]="0"
+                            [attr.aria-valuenow]="segment.percentage"
+                          >
+                            <span
+                              aria-hidden="true"
+                              class="ppi-preview-independent__fill"
+                              [style.background-color]="segment.color"
+                              [style.width.%]="segment.percentage"
+                            ></span>
+                          </span>
+                          <strong>{{ formatPpiPercentage(segment.percentage) }}%</strong>
+                        </li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </section>
+            }
+          }
+        </article>
+
+        <p class="ppi-preview__safety" role="note">
+          These preview states are local visual fixtures. Production always uses the authenticated,
+          privacy-filtered API response.
+        </p>
+      </section>
+
+      <section aria-labelledby="push-preview-title" class="push-preview">
+        <div class="push-preview__heading">
+          <mat-icon aria-hidden="true">notifications_active</mat-icon>
+          <div>
+            <h2 id="push-preview-title">Push notification visual preview</h2>
+            <p>Preview only — no browser permission or push subscription is changed.</p>
+          </div>
+        </div>
+
+        <div aria-label="Example push notification" class="push-preview__notification" role="img">
+          <strong>{{ pushPreview.appName }}</strong>
+          <span>{{ pushPreview.title }}</span>
+          <span>{{ pushPreview.message }}</span>
+          <small>Would open: {{ pushPreview.destination }}</small>
+        </div>
+
+        <p class="push-preview__safety" role="note">
+          This preview never calls Notification permission APIs, Angular SwPush, or
+          <code>/push_subscriptions</code>.
+        </p>
+
+        <a mat-stroked-button routerLink="/edit_profile">
+          <mat-icon aria-hidden="true">manage_accounts</mat-icon>
+          Open My Profile for real notifications
+        </a>
+      </section>
+    </mat-card-content>
+  </mat-card>
+</main>
diff --git a/src/app/demo/demo-controls/demo-controls.component.scss b/src/app/demo/demo-controls/demo-controls.component.scss
new file mode 100644
index 0000000000..964d809d51
--- /dev/null
+++ b/src/app/demo/demo-controls/demo-controls.component.scss
@@ -0,0 +1,562 @@
+.demo-controls {
+  margin: 0 auto;
+  max-width: 56rem;
+  padding: 2rem 1rem 4rem;
+}
+
+.hub-meeting-links {
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+
+  h3 {
+    margin: 0;
+  }
+
+  input {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--ot-color-border, #d4d4d8);
+    border-radius: 6px;
+    padding: 0.75rem;
+    background: var(--ot-color-surface, #fff);
+    color: var(--ot-color-text, #202124);
+  }
+}
+
+.hub-meeting-links__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+mat-card-content {
+  display: grid;
+  gap: 1rem;
+  padding-top: 1.5rem;
+}
+
+h2,
+p,
+ul,
+dl,
+dd {
+  margin: 0;
+}
+
+dl {
+  display: grid;
+  gap: 0.5rem 1rem;
+  grid-template-columns: max-content 1fr;
+}
+
+dt {
+  font-weight: 600;
+}
+
+.push-preview {
+  border-top: 1px solid #d4d4d8;
+  display: grid;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  padding-top: 1.5rem;
+}
+
+.ppi-preview {
+  border-top: 1px solid #d4d4d8;
+  display: grid;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  min-width: 0;
+  padding-top: 1.5rem;
+}
+
+.ppi-preview__heading {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.75rem;
+}
+
+.ppi-preview__choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.ppi-preview__choice--active {
+  background: #ecebff;
+  border-color: #3939ff;
+  color: #3029a5;
+}
+
+.ppi-preview-card {
+  background:
+    radial-gradient(circle at 92% -10%, rgb(57 57 255 / 12%), transparent 34%),
+    linear-gradient(135deg, #ffffff, #fbfbff);
+  border: 1px solid #d9d9ef;
+  border-radius: 12px;
+  box-sizing: border-box;
+  box-shadow: 0 3px 12px rgb(29 25 78 / 8%);
+  container: ppi-preview-card / inline-size;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ppi-preview-card__header {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  padding: 9px 12px 5px;
+}
+
+.ppi-preview-card__identity {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+
+  > span:last-child {
+    min-width: 0;
+  }
+
+  strong,
+  small {
+    display: block;
+  }
+
+  strong {
+    font-size: 15px;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+  }
+
+  small {
+    color: #52525f;
+    font-size: 11px;
+    line-height: 1.3;
+    margin-top: 1px;
+  }
+}
+
+.ppi-preview-card__avatar {
+  align-items: center;
+  background: linear-gradient(145deg, #eeecff, #dcd9ff);
+  border: 1px solid #b7b1ff;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 58%);
+  color: #2d23b8;
+  display: inline-flex;
+  flex: 0 0 34px;
+  height: 34px;
+  justify-content: center;
+
+  mat-icon {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+  }
+}
+
+.ppi-preview-card__toggle {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: #33333e;
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  gap: 5px;
+  min-height: 28px;
+  padding: 3px 4px;
+  white-space: nowrap;
+
+  &:focus-visible {
+    outline: 2px solid #3939ff;
+    outline-offset: 2px;
+  }
+}
+
+.ppi-preview-card__toggle-track {
+  background: #737582;
+  border-radius: 999px;
+  display: inline-flex;
+  flex: 0 0 28px;
+  height: 15px;
+  padding: 2px;
+  transition: background 160ms ease;
+}
+
+.ppi-preview-card__toggle-thumb {
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 28%);
+  height: 11px;
+  transform: translateX(0);
+  transition: transform 160ms ease;
+  width: 11px;
+}
+
+.ppi-preview-card__toggle[aria-checked='true'] .ppi-preview-card__toggle-track {
+  background: #3939ff;
+}
+
+.ppi-preview-card__toggle[aria-checked='true'] .ppi-preview-card__toggle-thumb {
+  transform: translateX(13px);
+}
+
+.ppi-preview-card__summary {
+  align-items: center;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
+  padding: 2px 12px 10px 54px;
+}
+
+.ppi-preview-card__value {
+  align-items: baseline;
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+
+  > span {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  strong {
+    color: #2d23b8;
+    font-size: 28px;
+    letter-spacing: -0.04em;
+    line-height: 1;
+  }
+}
+
+.ppi-preview-card__visual {
+  min-width: 0;
+}
+
+.ppi-preview-card__visual,
+.ppi-preview-card__scale {
+  display: block;
+}
+
+.ppi-preview-card__track {
+  background: #e9e9ef;
+  border-radius: 999px;
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  display: block;
+  height: 9px;
+  overflow: hidden;
+
+  span {
+    background: linear-gradient(90deg, #4637ff, #6559ff 62%, #766cfb);
+    border-radius: inherit;
+    box-shadow: 0 0 10px rgb(57 57 255 / 34%);
+    display: block;
+    height: 100%;
+    transition: width 260ms ease;
+  }
+}
+
+.ppi-preview-card__scale {
+  color: #52525f;
+  display: flex;
+  font-size: 10px;
+  font-weight: 600;
+  justify-content: space-between;
+  margin-top: 3px;
+}
+
+.ppi-preview-card__advanced {
+  background: rgb(246 246 255 / 76%);
+  border-top: 1px solid #e1e0f2;
+  display: grid;
+  gap: 9px;
+  padding: 10px 12px 12px;
+}
+
+.ppi-preview-card__metrics {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  > span {
+    align-items: center;
+    background: #ffffff;
+    border: 1px solid #dedee8;
+    border-left: 4px solid;
+    border-radius: 6px;
+    display: flex;
+    font-size: 12px;
+    font-weight: 600;
+    gap: 12px;
+    justify-content: space-between;
+    min-width: 0;
+    padding: 5px 8px;
+  }
+
+  strong {
+    font-size: 16px;
+  }
+
+  .is-complete {
+    border-left-color: #45a049;
+  }
+
+  .is-submitted {
+    border-left-color: #0079d8;
+  }
+}
+
+.ppi-preview-card__advanced-heading,
+.ppi-preview-card__advanced-heading small {
+  display: block;
+}
+
+.ppi-preview-card__advanced-heading small {
+  color: #626272;
+  font-size: 11px;
+  margin-top: 2px;
+}
+
+.ppi-preview-card__advanced-heading strong {
+  font-size: 14px;
+}
+
+.ppi-preview-bar {
+  background: #e4e4e7;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
+  display: flex;
+  height: 14px;
+  overflow: hidden;
+
+  span {
+    flex-basis: 0;
+
+    & + span {
+      border-left: 1px solid rgb(255 255 255 / 58%);
+    }
+  }
+}
+
+.ppi-preview-legend {
+  display: grid;
+  gap: 4px 6px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  list-style: none;
+  padding: 0;
+
+  li {
+    align-items: center;
+    background: rgb(255 255 255 / 86%);
+    border: 1px solid #e2e2eb;
+    border-radius: 5px;
+    display: grid;
+    font-size: 10px;
+    gap: 5px;
+    grid-template-columns: 9px minmax(0, 1fr) auto;
+    min-height: 20px;
+    padding: 2px 4px;
+  }
+
+  li > span:first-child {
+    border: 1px solid rgb(0 0 0 / 12%);
+    border-radius: 50%;
+    height: 9px;
+    width: 9px;
+  }
+
+  .ppi-preview-legend__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.ppi-preview-independent {
+  display: grid;
+  gap: 7px;
+
+  > p {
+    background: #ffffff;
+    border-left: 3px solid #3939ff;
+    border-radius: 6px;
+    color: #52525f;
+    font-size: 11px;
+    line-height: 1.45;
+    padding: 5px 7px;
+  }
+
+  > ul {
+    display: grid;
+    gap: 5px;
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    align-items: center;
+    display: grid;
+    font-size: 11px;
+    gap: 7px;
+    grid-template-columns: minmax(110px, 0.55fr) minmax(80px, 1fr) 34px;
+  }
+
+  li > span:first-child {
+    align-items: center;
+    display: flex;
+    font-weight: 600;
+    gap: 7px;
+    min-width: 0;
+  }
+
+  li > span:first-child > span {
+    border: 1px solid rgb(0 0 0 / 12%);
+    border-radius: 50%;
+    flex: 0 0 9px;
+    height: 9px;
+    width: 9px;
+  }
+
+  li > strong {
+    text-align: right;
+  }
+}
+
+.ppi-preview-independent__track {
+  background: #e4e4e7;
+  border-radius: 999px;
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
+  display: block;
+  height: 9px;
+  overflow: hidden;
+}
+
+.ppi-preview-independent__fill {
+  border-radius: inherit;
+  display: block;
+  height: 100%;
+}
+
+.ppi-preview-card__safe-state {
+  align-items: flex-start;
+  display: flex;
+  gap: 12px;
+  min-height: 42px;
+  padding: 3px 12px 10px 54px;
+
+  span,
+  strong {
+    display: block;
+  }
+}
+
+.ppi-preview-card__advanced .ppi-preview-card__safe-state {
+  background: #fffaf0;
+  border: 1px solid #ead8a7;
+  border-radius: 8px;
+  color: #5f4a17;
+  font-size: 12px;
+  line-height: 1.45;
+  min-height: 0;
+  padding: 8px 9px;
+}
+
+.ppi-preview__safety {
+  color: #52525b;
+  font-size: 0.75rem;
+}
+
+@container ppi-preview-card (width < 460px) {
+  .ppi-preview-card__header {
+    align-items: flex-start;
+  }
+
+  .ppi-preview-card__summary,
+  .ppi-preview-card__safe-state {
+    padding-left: 12px;
+  }
+}
+
+@container ppi-preview-card (width < 350px) {
+  .ppi-preview-card__header {
+    flex-wrap: wrap;
+  }
+
+  .ppi-preview-card__toggle {
+    margin-left: 42px;
+  }
+
+  .ppi-preview-card__value strong {
+    font-size: 25px;
+  }
+
+  .ppi-preview-card__summary {
+    grid-template-columns: 1fr;
+  }
+
+  .ppi-preview-legend {
+    grid-template-columns: 1fr;
+  }
+
+  .ppi-preview-independent li {
+    align-items: start;
+    grid-template-columns: 1fr auto;
+  }
+
+  .ppi-preview-independent__track {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ppi-preview-card__track span,
+  .ppi-preview-card__toggle-track,
+  .ppi-preview-card__toggle-thumb {
+    transition: none;
+  }
+}
+
+.push-preview__heading {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.75rem;
+}
+
+.push-preview__notification {
+  background: #ffffff;
+  border: 1px solid #d4d4d8;
+  border-radius: 0.75rem;
+  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 12%);
+  display: grid;
+  gap: 0.25rem;
+  max-width: 30rem;
+  padding: 1rem;
+}
+
+.push-preview__notification small,
+.push-preview__safety {
+  color: #52525b;
+}
+
+@media (width < 40rem) {
+  dl {
+    grid-template-columns: 1fr;
+  }
+
+  dd:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}
diff --git a/src/app/demo/demo-controls/demo-controls.component.spec.ts b/src/app/demo/demo-controls/demo-controls.component.spec.ts
new file mode 100644
index 0000000000..ea1e862fed
--- /dev/null
+++ b/src/app/demo/demo-controls/demo-controls.component.spec.ts
@@ -0,0 +1,176 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {provideHttpClient} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {provideRouter} from '@angular/router';
+import {SwPush} from '@angular/service-worker';
+import {DemoModeStore} from '../demo-mode.store';
+import {DemoToolsModule} from '../demo-tools.module';
+import {DEMO_RELOAD, DemoControlsComponent} from './demo-controls.component';
+
+describe('DemoControlsComponent', () => {
+  let fixture: ComponentFixture<DemoControlsComponent>;
+  let demoMode: {
+    available: boolean;
+    enabled: boolean;
+    setEnabled: ReturnType<typeof vi.fn>;
+  };
+  let reload: ReturnType<typeof vi.fn>;
+  let requestPermission: ReturnType<typeof vi.fn>;
+  let requestSubscription: ReturnType<typeof vi.fn>;
+  let httpTesting: HttpTestingController;
+  let originalNotification: typeof Notification | undefined;
+
+  beforeEach(async () => {
+    demoMode = {available: true, enabled: false, setEnabled: vi.fn()};
+    reload = vi.fn();
+    requestPermission = vi.fn();
+    requestSubscription = vi.fn();
+    originalNotification = globalThis.Notification;
+    Object.defineProperty(globalThis, 'Notification', {
+      configurable: true,
+      value: {permission: 'default', requestPermission},
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [DemoToolsModule, NoopAnimationsModule],
+      providers: [
+        {provide: DemoModeStore, useValue: demoMode},
+        {provide: DEMO_RELOAD, useValue: reload},
+        {provide: SwPush, useValue: {requestSubscription}},
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DemoControlsComponent);
+    fixture.detectChanges();
+    httpTesting = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTesting.verify();
+    Object.defineProperty(globalThis, 'Notification', {
+      configurable: true,
+      value: originalNotification,
+    });
+  });
+
+  it('shows an accessible control and an exact description of affected surfaces', () => {
+    const text = fixture.nativeElement.textContent;
+    const toggle = fixture.nativeElement.querySelector('mat-slide-toggle');
+
+    expect(toggle.getAttribute('aria-describedby')).toBe('demo-mode-description');
+    expect(text).toContain('Demo mode off');
+    expect(text).toContain('Off — quiet baseline');
+    expect(text).toContain('one baseline unit (DEMO20007 when available)');
+    expect(text).toContain('On — complete walkthrough');
+    expect(text).toContain('privacy-safe lifecycle spread (60% submitted and 10% complete)');
+    expect(text).toContain('all seven curated local notifications');
+    expect(text).toContain('live local project cards');
+    expect(text).toContain('live notification bell');
+    expect(text).toContain('Live task-level peer comparison');
+    expect(text).toContain('unit summary');
+    expect(text).toContain('Peer Progress Indicator visual preview');
+    expect(text).toContain('Full status data');
+    expect(text).toContain('Insufficient cohort');
+    expect(text).toContain('Advanced details protected');
+    expect(text).toContain('Rounded total 90%');
+    expect(text).toContain('Rounded total 110%');
+    expect(fixture.nativeElement.querySelectorAll('.ppi-preview__choices button').length).toBe(5);
+  });
+
+  it('persists the switch and reloads to avoid mixed entity caches', () => {
+    fixture.componentInstance.setDemoMode({checked: true} as MatSlideToggleChange);
+
+    expect(demoMode.setEnabled).toHaveBeenCalledWith(true);
+    expect(reload).toHaveBeenCalledOnce();
+  });
+
+  it('renders a visual-only push preview without browser, SwPush, or API calls', () => {
+    const text = fixture.nativeElement.textContent;
+
+    expect(text).toContain('Preview only');
+    expect(text).toContain('Feedback is ready');
+    expect(text).toContain('Open My Profile for real notifications');
+    expect(
+      fixture.nativeElement.querySelector('a[href="/edit_profile"]').getAttribute('href'),
+    ).toBe('/edit_profile');
+    expect(requestPermission).not.toHaveBeenCalled();
+    expect(requestSubscription).not.toHaveBeenCalled();
+    httpTesting.expectNone((request) => request.url.includes('/push_subscriptions'));
+  });
+
+  it('switches between complete and privacy-safe peer progress preview states locally', () => {
+    fixture.componentInstance.setPpiPreviewAdvanced(true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('Task status breakdown');
+    expect(fixture.nativeElement.textContent).toContain('60%');
+    expect(fixture.nativeElement.textContent).toContain('10%');
+
+    fixture.componentInstance.setPpiPreview('details-protected');
+    fixture.componentInstance.setPpiPreviewAdvanced(true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('Detailed breakdown protected');
+    expect(fixture.nativeElement.textContent).not.toContain('Redo');
+
+    fixture.componentInstance.setPpiPreview('insufficient');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('Progress is hidden to protect privacy');
+    expect(fixture.nativeElement.textContent).toContain('Not enough students');
+
+    httpTesting.expectNone((request) => request.url.includes('/peer_progress'));
+  });
+
+  it('keeps the sample compact by default and exposes details through a small accessible switch', () => {
+    const preview = fixture.nativeElement.querySelector('.ppi-preview-card') as HTMLElement;
+    const toggle = preview.querySelector('button[role="switch"]') as HTMLButtonElement;
+    const progress = preview.querySelector('[role="progressbar"]') as HTMLElement;
+
+    expect(toggle.getAttribute('aria-label')).toBe('Advanced peer status breakdown');
+    expect(toggle.getAttribute('aria-controls')).toBe('ppi-preview-advanced-panel');
+    expect(toggle.getAttribute('aria-checked')).toBe('false');
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(preview.querySelector('.ppi-preview-card__advanced')).toBeNull();
+    expect(progress.getAttribute('aria-label')).toBe(
+      '10% of peers at your target grade have completed this task',
+    );
+
+    toggle.click();
+    fixture.detectChanges();
+
+    expect(toggle.getAttribute('aria-checked')).toBe('true');
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(preview.querySelector('#ppi-preview-advanced-panel')).toBeTruthy();
+    expect(preview.textContent).toContain('Redo');
+    expect(preview.textContent).toContain('Resubmit');
+  });
+
+  it.each([
+    {kind: 'rounded-90' as const, total: 90},
+    {kind: 'rounded-110' as const, total: 110},
+  ])('previews a $total% rounded vector without visually renormalising it', ({kind, total}) => {
+    fixture.componentInstance.setPpiPreview(kind);
+    fixture.componentInstance.setPpiPreviewAdvanced(true);
+    fixture.detectChanges();
+
+    const independent = fixture.nativeElement.querySelector('.ppi-preview-independent');
+    const workingFill = fixture.nativeElement.querySelector(
+      '[data-status="working_on_it"] .ppi-preview-independent__fill',
+    ) as HTMLElement;
+    const workingTrack = fixture.nativeElement.querySelector(
+      '[data-status="working_on_it"] [role="progressbar"]',
+    ) as HTMLElement;
+
+    expect(fixture.componentInstance.ppiPreviewDistributionTotal).toBe(total);
+    expect(fixture.nativeElement.querySelector('.ppi-preview-bar')).toBeNull();
+    expect(independent.textContent).toContain(`total ${total}%`);
+    expect(independent.textContent).toContain('not stretched to fill 100%');
+    expect(workingFill.style.width).toBe('20%');
+    expect(workingTrack.getAttribute('aria-valuenow')).toBe('20');
+    expect(workingTrack.getAttribute('aria-describedby')).toBe('ppi-preview-independent-note');
+  });
+});
diff --git a/src/app/demo/demo-controls/demo-controls.component.ts b/src/app/demo/demo-controls/demo-controls.component.ts
new file mode 100644
index 0000000000..18be520b63
--- /dev/null
+++ b/src/app/demo/demo-controls/demo-controls.component.ts
@@ -0,0 +1,174 @@
+import {ChangeDetectionStrategy, Component, Inject, InjectionToken} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+import {PeerProgressIndicator} from 'src/app/api/models/peer-progress-indicator';
+import {TaskStatus, TaskStatusEnum} from 'src/app/api/models/task-status';
+import {TeamsMeetingDraft} from '../../unit-hub/teams-meeting-draft';
+import {unitHubDemo} from '../../unit-hub/unit-hub-demo.fixtures';
+import {DemoMeetingLinksStore} from '../demo-meeting-links.store';
+import {DemoModeStore} from '../demo-mode.store';
+import {
+  DETAIL_PROTECTED_STATE,
+  NORMAL_STATE,
+  ROUNDED_90_STATE,
+  ROUNDED_110_STATE,
+  SUPPRESSED_STATE,
+} from '../fixtures/peer-progress-demo.fixtures';
+import {DEMO_PUSH_PREVIEW} from '../fixtures/push-preview.fixture';
+
+type PpiPreviewKind = 'full' | 'rounded-90' | 'rounded-110' | 'insufficient' | 'details-protected';
+
+interface PpiPreviewSegment {
+  status: TaskStatusEnum;
+  label: string;
+  color: string;
+  percentage: number;
+}
+
+export const DEMO_RELOAD: InjectionToken<() => void> = new InjectionToken('DEMO_RELOAD', {
+  providedIn: 'root',
+  factory: () => () => globalThis.location?.reload(),
+});
+
+@Component({
+  selector: 'f-demo-controls',
+  templateUrl: './demo-controls.component.html',
+  styleUrls: ['./demo-controls.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class DemoControlsComponent {
+  readonly demoMeetingDraft: TeamsMeetingDraft = {
+    ...unitHubDemo().sessions[0],
+    title: 'DEMO · HelpHub meeting draft',
+    description:
+      'Fictional OnTrack demonstration. Review the example date and time before sending any invitation.',
+  };
+  readonly meetingLinksForm = new FormGroup({
+    helpHub: new FormControl('', {nonNullable: true}),
+    extraHelpHub: new FormControl('', {nonNullable: true}),
+  });
+  meetingLinksError = '';
+  meetingLinksStatus = '';
+  readonly pushPreview = DEMO_PUSH_PREVIEW;
+  readonly ppiPreviewOptions: {kind: PpiPreviewKind; label: string}[] = [
+    {kind: 'full', label: 'Full status data'},
+    {kind: 'rounded-90', label: 'Rounded total 90%'},
+    {kind: 'rounded-110', label: 'Rounded total 110%'},
+    {kind: 'insufficient', label: 'Insufficient cohort'},
+    {kind: 'details-protected', label: 'Advanced details protected'},
+  ];
+
+  ppiPreviewKind: PpiPreviewKind = 'full';
+  ppiPreviewAdvanced = false;
+  private readonly ppiStatusDisplayIndex = new Map(
+    TaskStatus.PEER_PROGRESS_DISPLAY_ORDER.map((status, index) => [status, index]),
+  );
+
+  readonly affectedSurfaces = [
+    'Unit Hub: fictional SIT111 announcements and sessions, with SIT102 excluded and API writes disabled',
+    'All live local project cards, tasks, deadline warnings, filters, and recommendation scores',
+    'The live notification bell, unread count, and notification history',
+    'Live task-level peer comparison data returned by the local API',
+    'A privacy-safe lifecycle spread (60% submitted and 10% complete), unit summary, and anonymous burndown sample',
+  ];
+
+  constructor(
+    readonly demoMode: DemoModeStore,
+    @Inject(DEMO_RELOAD) private reload: () => void,
+    private meetingLinks: DemoMeetingLinksStore,
+  ) {
+    this.meetingLinksForm.setValue(this.meetingLinks.links);
+  }
+
+  saveMeetingLinks(): void {
+    this.meetingLinksError = '';
+    this.meetingLinksStatus = '';
+    try {
+      this.meetingLinks.save(this.meetingLinksForm.getRawValue());
+      this.meetingLinksStatus =
+        'Saved for this browser tab. Open Unit Hub to use the links in demo mode.';
+    } catch (error) {
+      this.meetingLinksError =
+        error instanceof Error ? error.message : 'The links could not be saved.';
+    }
+  }
+
+  clearMeetingLinks(): void {
+    this.meetingLinks.clear();
+    this.meetingLinksForm.reset();
+    this.meetingLinksError = '';
+    this.meetingLinksStatus = 'Hosted links removed. Sample meetings will be disabled.';
+  }
+
+  setDemoMode(change: MatSlideToggleChange): void {
+    if (change.checked === this.demoMode.enabled) {
+      return;
+    }
+
+    this.demoMode.setEnabled(change.checked);
+    this.reload();
+  }
+
+  setPpiPreview(kind: PpiPreviewKind): void {
+    this.ppiPreviewKind = kind;
+    this.ppiPreviewAdvanced = false;
+  }
+
+  setPpiPreviewAdvanced(advanced: boolean): void {
+    this.ppiPreviewAdvanced = advanced;
+  }
+
+  get ppiPreview(): PeerProgressIndicator {
+    switch (this.ppiPreviewKind) {
+      case 'insufficient':
+        return SUPPRESSED_STATE;
+      case 'details-protected':
+        return DETAIL_PROTECTED_STATE;
+      case 'rounded-90':
+        return ROUNDED_90_STATE;
+      case 'rounded-110':
+        return ROUNDED_110_STATE;
+      default:
+        return NORMAL_STATE;
+    }
+  }
+
+  get ppiPreviewPercentage(): number {
+    return this.ppiPreview.completedPercentage ?? this.ppiPreview.submittedPercentage ?? 0;
+  }
+
+  get ppiPreviewWidth(): string {
+    return `${Math.min(100, Math.max(0, this.ppiPreviewPercentage))}%`;
+  }
+
+  get ppiPreviewSegments(): PpiPreviewSegment[] {
+    return this.ppiPreview.statusDistribution
+      .filter((entry) => entry.percentage > 0)
+      .sort(
+        (left, right) =>
+          (this.ppiStatusDisplayIndex.get(left.status) ?? Number.MAX_SAFE_INTEGER) -
+          (this.ppiStatusDisplayIndex.get(right.status) ?? Number.MAX_SAFE_INTEGER),
+      )
+      .map((entry) => ({
+        ...entry,
+        label:
+          entry.status === 'ready_for_feedback'
+            ? 'Ready for Feedback'
+            : (TaskStatus.STATUS_LABELS.get(entry.status) ?? entry.status),
+        color: TaskStatus.STATUS_COLORS.get(entry.status) ?? '#64748b',
+      }));
+  }
+
+  get ppiPreviewDistributionTotal(): number {
+    return this.ppiPreviewSegments.reduce((total, segment) => total + segment.percentage, 0);
+  }
+
+  get ppiPreviewUsesStackedDistribution(): boolean {
+    return this.ppiPreviewDistributionTotal === 100;
+  }
+
+  formatPpiPercentage(value: number): string {
+    return Number.isInteger(value) ? `${value}` : value.toFixed(1).replace(/\.0$/, '');
+  }
+}
diff --git a/src/app/demo/demo-data-mask.interceptor.spec.ts b/src/app/demo/demo-data-mask.interceptor.spec.ts
new file mode 100644
index 0000000000..7531b42331
--- /dev/null
+++ b/src/app/demo/demo-data-mask.interceptor.spec.ts
@@ -0,0 +1,91 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {
+  HTTP_INTERCEPTORS,
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {
+  DemoDataMaskInterceptor,
+  filterProjectCollectionForQuietMode,
+} from './demo-data-mask.interceptor';
+import {DemoModeStore} from './demo-mode.store';
+
+describe('DemoDataMaskInterceptor', () => {
+  let http: HttpClient;
+  let httpTesting: HttpTestingController;
+  let demoMode: {shouldMaskApiData: boolean};
+
+  beforeEach(() => {
+    demoMode = {shouldMaskApiData: true};
+
+    TestBed.configureTestingModule({
+      providers: [
+        {provide: DemoModeStore, useValue: demoMode},
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: DemoDataMaskInterceptor,
+          multi: true,
+        },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    });
+
+    http = TestBed.inject(HttpClient);
+    httpTesting = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTesting.verify();
+  });
+
+  it('retains only DEMO20007 from the live projects response while demo mode is off', () => {
+    let result: unknown;
+    http.get(`${API_URL}/projects`).subscribe((value) => (result = value));
+
+    httpTesting.expectOne(`${API_URL}/projects`).flush([
+      {id: 1, unit: {code: 'COS10001'}},
+      {id: 2, unit: {code: 'DEMO20007'}},
+      {id: 3, unit: {code: 'COS30003'}},
+    ]);
+
+    expect(result).toEqual([{id: 2, unit: {code: 'DEMO20007'}}]);
+  });
+
+  it('falls back to one project for a legacy local dataset', () => {
+    expect(
+      filterProjectCollectionForQuietMode([
+        {id: 1, unit: {code: 'COS10001'}},
+        {id: 2, unit: {code: 'COS20002'}},
+      ]),
+    ).toEqual([{id: 1, unit: {code: 'COS10001'}}]);
+  });
+
+  it('masks notification rows and unread count without calling the backend', () => {
+    let notifications: unknown;
+    let unread: unknown;
+
+    http.get(`${API_URL}/notifications/`).subscribe((value) => (notifications = value));
+    http.get(`${API_URL}/notifications/unread_count`).subscribe((value) => (unread = value));
+
+    httpTesting.expectNone(`${API_URL}/notifications/`);
+    httpTesting.expectNone(`${API_URL}/notifications/unread_count`);
+    expect(notifications).toEqual([]);
+    expect(unread).toEqual({count: 0});
+  });
+
+  it('passes API-backed data through unchanged when demo mode is on or unavailable', () => {
+    demoMode.shouldMaskApiData = false;
+    let result: unknown;
+    http.get(`${API_URL}/notifications/`).subscribe((value) => (result = value));
+
+    const live = [{id: 8, message: 'Live notification'}];
+    httpTesting.expectOne(`${API_URL}/notifications/`).flush(live);
+
+    expect(result).toEqual(live);
+  });
+});
diff --git a/src/app/demo/demo-data-mask.interceptor.ts b/src/app/demo/demo-data-mask.interceptor.ts
new file mode 100644
index 0000000000..36423e743a
--- /dev/null
+++ b/src/app/demo/demo-data-mask.interceptor.ts
@@ -0,0 +1,78 @@
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+  HttpResponse,
+} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, map, of} from 'rxjs';
+import {DemoModeStore} from './demo-mode.store';
+
+const DEMO_UNIT_CODE = 'DEMO20007';
+
+type JsonRecord = Record<string, unknown>;
+
+export function filterProjectCollectionForQuietMode(body: unknown): unknown {
+  if (Array.isArray(body)) {
+    return filterProjects(body);
+  }
+
+  if (isRecord(body) && Array.isArray(body.data)) {
+    return {...body, data: filterProjects(body.data)};
+  }
+
+  return body;
+}
+
+function filterProjects(projects: unknown[]): unknown[] {
+  const preferred = projects.filter((project) => projectUnitCode(project) === DEMO_UNIT_CODE);
+  return preferred.length > 0 ? preferred : projects.slice(0, 1);
+}
+
+function projectUnitCode(project: unknown): string | null {
+  if (!isRecord(project)) {
+    return null;
+  }
+
+  const unit = isRecord(project.unit) ? project.unit : null;
+  const value = unit?.code ?? project.unit_code ?? project.unitCode;
+  return typeof value === 'string' ? value.toUpperCase() : null;
+}
+
+function isRecord(value: unknown): value is JsonRecord {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+@Injectable()
+export class DemoDataMaskInterceptor implements HttpInterceptor {
+  constructor(private demoMode: DemoModeStore) {}
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    if (!this.demoMode.shouldMaskApiData) {
+      return next.handle(request);
+    }
+
+    if (request.method === 'GET' && /\/api\/notifications\/?$/.test(request.url)) {
+      return of(new HttpResponse({body: [], status: 200, url: request.urlWithParams}));
+    }
+
+    if (request.method === 'GET' && /\/api\/notifications\/unread_count\/?$/.test(request.url)) {
+      return of(new HttpResponse({body: {count: 0}, status: 200, url: request.urlWithParams}));
+    }
+
+    if (request.method === 'GET' && /\/api\/projects\/?$/.test(request.url)) {
+      return next
+        .handle(request)
+        .pipe(
+          map((event) =>
+            event instanceof HttpResponse
+              ? event.clone({body: filterProjectCollectionForQuietMode(event.body)})
+              : event,
+          ),
+        );
+    }
+
+    return next.handle(request);
+  }
+}
diff --git a/src/app/demo/demo-meeting-links.store.spec.ts b/src/app/demo/demo-meeting-links.store.spec.ts
new file mode 100644
index 0000000000..fefee5c114
--- /dev/null
+++ b/src/app/demo/demo-meeting-links.store.spec.ts
@@ -0,0 +1,86 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {DemoMeetingLinksStore, safeDemoMeetingUrl} from './demo-meeting-links.store';
+import {DEMO_MEETING_LINKS_KEY, DemoModeStore} from './demo-mode.store';
+
+const hosted = 'https://teams.microsoft.com/meet/123456789?p=demo-example';
+
+describe('Host-provided demo meeting links', () => {
+  beforeEach(() => sessionStorage.clear());
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    sessionStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('accepts both Microsoft joining formats and preserves encoded meeting context', () => {
+    expect(safeDemoMeetingUrl(hosted)).toBe(hosted);
+    const legacy =
+      'https://teams.microsoft.com/l/meetup-join/19%3Aexample%40thread.tacv2/12345?context=%7B%22Tid%22%3A%22example%22%7D';
+    expect(safeDemoMeetingUrl(legacy)).toBe(legacy);
+  });
+
+  it.each([
+    'javascript:alert(1)',
+    'http://teams.microsoft.com/meet/123',
+    'https://teams.microsoft.com.evil.test/meet/123',
+    'https://evil.test/meet/123',
+    'https://teams.microsoft.com@evil.test/meet/123',
+    'https://user:password@teams.microsoft.com/meet/123',
+    'https://teams.microsoft.com:8443/meet/123',
+    'https://teams.microsoft.com/l/meeting/new?subject=example',
+    'https://teams.microsoft.com/meet/123#redirect',
+    'https://teams.microsoft.com/meet/123\n',
+  ])('rejects unsafe or non-joining URL %s', (url) => {
+    expect(safeDemoMeetingUrl(url)).toBeNull();
+  });
+
+  it('persists only in the current tab and revalidates stored data', () => {
+    const store = new DemoMeetingLinksStore(true);
+    store.save({helpHub: hosted, extraHelpHub: ''});
+    expect(new DemoMeetingLinksStore(true).links.helpHub).toBe(hosted);
+    sessionStorage.setItem(
+      DEMO_MEETING_LINKS_KEY,
+      JSON.stringify({helpHub: 'https://evil.test/meet/123', extraHelpHub: 42}),
+    );
+    expect(store.links).toEqual({helpHub: '', extraHelpHub: ''});
+    sessionStorage.setItem(DEMO_MEETING_LINKS_KEY, 'null');
+    expect(store.links).toEqual({helpHub: '', extraHelpHub: ''});
+  });
+
+  it('rejects invalid edits without replacing the existing configuration', () => {
+    const store = new DemoMeetingLinksStore(true);
+    store.save({helpHub: hosted, extraHelpHub: ''});
+    expect(() => store.save({helpHub: hosted, extraHelpHub: 'https://evil.test'})).toThrow();
+    expect(store.links.helpHub).toBe(hosted);
+  });
+
+  it('disables and clears links without demo tools, including forged saved values', () => {
+    sessionStorage.setItem(DEMO_MEETING_LINKS_KEY, JSON.stringify({helpHub: hosted}));
+    const store = new DemoMeetingLinksStore(false);
+    expect(store.links.helpHub).toBe('');
+    expect(sessionStorage.getItem(DEMO_MEETING_LINKS_KEY)).toBeNull();
+    expect(() => store.save({helpHub: hosted, extraHelpHub: ''})).toThrow();
+  });
+
+  it('retains links across mode toggles but clears them when authentication resets demo state', () => {
+    const store = new DemoMeetingLinksStore(true);
+    const mode = new DemoModeStore(true);
+    store.save({helpHub: hosted, extraHelpHub: ''});
+    mode.setEnabled(true);
+    mode.setEnabled(false);
+    expect(store.links.helpHub).toBe(hosted);
+    mode.reset();
+    expect(store.links.helpHub).toBe('');
+  });
+
+  it('reports storage failure instead of claiming the links were saved', () => {
+    vi.stubGlobal('sessionStorage', {
+      setItem: () => {
+        throw new Error('denied');
+      },
+    });
+    expect(() => new DemoMeetingLinksStore(true).save({helpHub: hosted, extraHelpHub: ''})).toThrow(
+      'could not save',
+    );
+  });
+});
diff --git a/src/app/demo/demo-meeting-links.store.ts b/src/app/demo/demo-meeting-links.store.ts
new file mode 100644
index 0000000000..36969c367b
--- /dev/null
+++ b/src/app/demo/demo-meeting-links.store.ts
@@ -0,0 +1,90 @@
+import {Inject, Injectable} from '@angular/core';
+import {DEMO_MEETING_LINKS_KEY, DEMO_TOOLS_AVAILABLE} from './demo-mode.store';
+
+export interface DemoMeetingLinks {
+  helpHub: string;
+  extraHelpHub: string;
+}
+
+/** Accept joining links only: no redirects, credentials, ports or arbitrary websites. */
+export function safeDemoMeetingUrl(value: string): string | null {
+  if (!value || value.length > 4096 || /[\p{Cc}\s]/u.test(value)) {
+    return null;
+  }
+  try {
+    const url = new URL(value);
+    return url.protocol === 'https:' &&
+      url.hostname === 'teams.microsoft.com' &&
+      !url.port &&
+      !url.username &&
+      !url.password &&
+      !url.hash &&
+      (/^\/meet\/\d+\/?$/.test(url.pathname) ||
+        /^\/l\/meetup-join\/[^/]+\/\d+\/?$/.test(url.pathname))
+      ? url.href
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Host-provided access links belong to this browser tab, never API data or public fixtures. */
+@Injectable({providedIn: 'root'})
+export class DemoMeetingLinksStore {
+  constructor(@Inject(DEMO_TOOLS_AVAILABLE) private available: boolean) {
+    if (!available) {
+      this.clear();
+    }
+  }
+
+  get links(): DemoMeetingLinks {
+    const empty = {helpHub: '', extraHelpHub: ''};
+    if (!this.available) {
+      return empty;
+    }
+    try {
+      const stored = JSON.parse(sessionStorage.getItem(DEMO_MEETING_LINKS_KEY) || '{}');
+      return {
+        helpHub:
+          typeof stored?.helpHub === 'string' ? safeDemoMeetingUrl(stored.helpHub) || '' : '',
+        extraHelpHub:
+          typeof stored?.extraHelpHub === 'string'
+            ? safeDemoMeetingUrl(stored.extraHelpHub) || ''
+            : '',
+      };
+    } catch {
+      return empty;
+    }
+  }
+
+  save(links: DemoMeetingLinks): void {
+    if (!this.available) {
+      throw new Error('Hosted demo links are available only in development.');
+    }
+    const checked: DemoMeetingLinks = {helpHub: '', extraHelpHub: ''};
+    for (const key of ['helpHub', 'extraHelpHub'] as const) {
+      const value = links[key].trim();
+      if (value && !safeDemoMeetingUrl(value)) {
+        throw new Error(
+          'Use a complete HTTPS Teams joining link for each HelpHub, or leave it blank.',
+        );
+      }
+      checked[key] = value ? safeDemoMeetingUrl(value)! : '';
+    }
+    try {
+      sessionStorage.setItem(DEMO_MEETING_LINKS_KEY, JSON.stringify(checked));
+    } catch {
+      throw new Error(
+        'This browser could not save the links. Allow session storage and try again.',
+      );
+    }
+  }
+
+  clear(): void {
+    try {
+      globalThis.sessionStorage?.removeItem(DEMO_MEETING_LINKS_KEY);
+    } catch {
+      // Production cannot read hosted links even when storage is unavailable.
+    }
+  }
+}
diff --git a/src/app/demo/demo-mode-banner/demo-mode-banner.component.html b/src/app/demo/demo-mode-banner/demo-mode-banner.component.html
new file mode 100644
index 0000000000..d81e59f1d9
--- /dev/null
+++ b/src/app/demo/demo-mode-banner/demo-mode-banner.component.html
@@ -0,0 +1,8 @@
+@if (demoMode.enabled$ | async) {
+  <aside aria-label="Demo mode is active" class="demo-mode-banner" role="status">
+    <mat-icon aria-hidden="true">science</mat-icon>
+    <span><strong>Demo mode:</strong> local walkthrough surfaces are visible.</span>
+    <a mat-button routerLink="/demo-controls">Controls</a>
+    <button mat-stroked-button type="button" (click)="exitDemo()">Exit demo</button>
+  </aside>
+}
diff --git a/src/app/demo/demo-mode-banner/demo-mode-banner.component.scss b/src/app/demo/demo-mode-banner/demo-mode-banner.component.scss
new file mode 100644
index 0000000000..7247eb0865
--- /dev/null
+++ b/src/app/demo/demo-mode-banner/demo-mode-banner.component.scss
@@ -0,0 +1,16 @@
+.demo-mode-banner {
+  align-items: center;
+  background: #fff4cc;
+  border-bottom: 1px solid #9a6700;
+  color: #5f3b00;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+}
+
+.demo-mode-banner a,
+.demo-mode-banner button {
+  color: inherit;
+}
diff --git a/src/app/demo/demo-mode-banner/demo-mode-banner.component.spec.ts b/src/app/demo/demo-mode-banner/demo-mode-banner.component.spec.ts
new file mode 100644
index 0000000000..d0871ff50d
--- /dev/null
+++ b/src/app/demo/demo-mode-banner/demo-mode-banner.component.spec.ts
@@ -0,0 +1,46 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {provideRouter} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+import {DEMO_RELOAD} from '../demo-controls/demo-controls.component';
+import {DemoModeStore} from '../demo-mode.store';
+import {DemoToolsModule} from '../demo-tools.module';
+import {DemoModeBannerComponent} from './demo-mode-banner.component';
+
+describe('DemoModeBannerComponent', () => {
+  let fixture: ComponentFixture<DemoModeBannerComponent>;
+  let enabled: BehaviorSubject<boolean>;
+  let reset: ReturnType<typeof vi.fn>;
+  let reload: ReturnType<typeof vi.fn>;
+
+  beforeEach(async () => {
+    enabled = new BehaviorSubject(true);
+    reset = vi.fn(() => enabled.next(false));
+    reload = vi.fn();
+
+    await TestBed.configureTestingModule({
+      imports: [DemoToolsModule, NoopAnimationsModule],
+      providers: [
+        {provide: DemoModeStore, useValue: {enabled$: enabled.asObservable(), reset}},
+        {provide: DEMO_RELOAD, useValue: reload},
+        provideRouter([]),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DemoModeBannerComponent);
+    fixture.detectChanges();
+  });
+
+  it('stays visible across routes while demo mode is active', () => {
+    expect(fixture.nativeElement.textContent).toContain('Demo mode:');
+    expect(fixture.nativeElement.textContent).toContain('Exit demo');
+  });
+
+  it('exits demo mode and reloads the application', () => {
+    fixture.componentInstance.exitDemo();
+
+    expect(reset).toHaveBeenCalledOnce();
+    expect(reload).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/app/demo/demo-mode-banner/demo-mode-banner.component.ts b/src/app/demo/demo-mode-banner/demo-mode-banner.component.ts
new file mode 100644
index 0000000000..0d71af378b
--- /dev/null
+++ b/src/app/demo/demo-mode-banner/demo-mode-banner.component.ts
@@ -0,0 +1,22 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {DEMO_RELOAD} from '../demo-controls/demo-controls.component';
+import {DemoModeStore} from '../demo-mode.store';
+
+@Component({
+  selector: 'f-demo-mode-banner',
+  templateUrl: './demo-mode-banner.component.html',
+  styleUrls: ['./demo-mode-banner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class DemoModeBannerComponent {
+  constructor(
+    readonly demoMode: DemoModeStore,
+    @Inject(DEMO_RELOAD) private reload: () => void,
+  ) {}
+
+  exitDemo(): void {
+    this.demoMode.reset();
+    this.reload();
+  }
+}
diff --git a/src/app/demo/demo-mode.store.spec.ts b/src/app/demo/demo-mode.store.spec.ts
new file mode 100644
index 0000000000..a547ee6bf9
--- /dev/null
+++ b/src/app/demo/demo-mode.store.spec.ts
@@ -0,0 +1,46 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {DEMO_MODE_STORAGE_KEY, DemoModeStore} from './demo-mode.store';
+
+describe('DemoModeStore', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  it('is available but defaults off in a development demo build', () => {
+    const store = new DemoModeStore(true);
+
+    expect(store.available).toBe(true);
+    expect(store.enabled).toBe(false);
+    expect(store.shouldMaskApiData).toBe(true);
+  });
+
+  it('persists the enabled state in session storage', () => {
+    const firstStore = new DemoModeStore(true);
+    firstStore.setEnabled(true);
+
+    expect(sessionStorage.getItem(DEMO_MODE_STORAGE_KEY)).toBe('true');
+    expect(new DemoModeStore(true).enabled).toBe(true);
+  });
+
+  it('reset fails closed and removes the stored state', () => {
+    const store = new DemoModeStore(true);
+    store.setEnabled(true);
+
+    store.reset();
+
+    expect(store.enabled).toBe(false);
+    expect(sessionStorage.getItem(DEMO_MODE_STORAGE_KEY)).toBeNull();
+  });
+
+  it('cannot enable in production and leaves genuine API data unmasked', () => {
+    sessionStorage.setItem(DEMO_MODE_STORAGE_KEY, 'true');
+    const store = new DemoModeStore(false);
+
+    store.setEnabled(true);
+
+    expect(store.available).toBe(false);
+    expect(store.enabled).toBe(false);
+    expect(store.shouldMaskApiData).toBe(false);
+    expect(sessionStorage.getItem(DEMO_MODE_STORAGE_KEY)).toBeNull();
+  });
+});
diff --git a/src/app/demo/demo-mode.store.ts b/src/app/demo/demo-mode.store.ts
new file mode 100644
index 0000000000..0e9d231552
--- /dev/null
+++ b/src/app/demo/demo-mode.store.ts
@@ -0,0 +1,93 @@
+import {environment} from 'src/environments/environment';
+import {Inject, Injectable, InjectionToken} from '@angular/core';
+import {BehaviorSubject, Observable, distinctUntilChanged} from 'rxjs';
+
+export const DEMO_MODE_STORAGE_KEY = 'ontrack_demo_mode_enabled';
+export const DEMO_MEETING_LINKS_KEY = 'ontrack_demo_meeting_links';
+
+export const DEMO_TOOLS_AVAILABLE: InjectionToken<boolean> = new InjectionToken(
+  'DEMO_TOOLS_AVAILABLE',
+  {
+    providedIn: 'root',
+    factory: () => environment.enableDemoTools === true && environment.production === false,
+  },
+);
+
+@Injectable({providedIn: 'root'})
+export class DemoModeStore {
+  private readonly enabledSubject: BehaviorSubject<boolean>;
+
+  readonly enabled$: Observable<boolean>;
+
+  constructor(@Inject(DEMO_TOOLS_AVAILABLE) readonly available: boolean) {
+    const enabled = available && this.readStoredValue();
+
+    if (!available) {
+      this.removeStoredValue();
+    }
+
+    this.enabledSubject = new BehaviorSubject(enabled);
+    this.enabled$ = this.enabledSubject.asObservable().pipe(distinctUntilChanged());
+  }
+
+  get enabled(): boolean {
+    return this.available && this.enabledSubject.value;
+  }
+
+  /**
+   * Local development starts in the intentionally quiet state. Production and
+   * builds without demo tools must always pass API data through unchanged.
+   */
+  get shouldMaskApiData(): boolean {
+    return this.available && !this.enabled;
+  }
+
+  setEnabled(enabled: boolean): void {
+    if (!this.available) {
+      this.reset();
+      return;
+    }
+
+    if (enabled) {
+      this.writeStoredValue();
+    } else {
+      this.removeStoredValue();
+    }
+
+    this.enabledSubject.next(enabled);
+  }
+
+  reset(): void {
+    this.removeStoredValue();
+    try {
+      globalThis.sessionStorage?.removeItem(DEMO_MEETING_LINKS_KEY);
+    } catch {
+      // Hosted demo links are unavailable unless demo tools and mode are both enabled.
+    }
+    this.enabledSubject.next(false);
+  }
+
+  private readStoredValue(): boolean {
+    try {
+      return globalThis.sessionStorage?.getItem(DEMO_MODE_STORAGE_KEY) === 'true';
+    } catch {
+      return false;
+    }
+  }
+
+  private writeStoredValue(): void {
+    try {
+      globalThis.sessionStorage?.setItem(DEMO_MODE_STORAGE_KEY, 'true');
+    } catch {
+      // Storage can be unavailable in private or hardened browser contexts.
+    }
+  }
+
+  private removeStoredValue(): void {
+    try {
+      globalThis.sessionStorage?.removeItem(DEMO_MODE_STORAGE_KEY);
+    } catch {
+      // The in-memory state still fails closed when storage is unavailable.
+    }
+  }
+}
diff --git a/src/app/demo/demo-tools.guard.ts b/src/app/demo/demo-tools.guard.ts
new file mode 100644
index 0000000000..bbc49aa88b
--- /dev/null
+++ b/src/app/demo/demo-tools.guard.ts
@@ -0,0 +1,8 @@
+import {inject} from '@angular/core';
+import {CanActivateFn, Router} from '@angular/router';
+import {DemoModeStore} from './demo-mode.store';
+
+export const demoToolsGuard: CanActivateFn = () => {
+  const demoMode = inject(DemoModeStore);
+  return demoMode.available ? true : inject(Router).createUrlTree(['/home']);
+};
diff --git a/src/app/demo/demo-tools.module.ts b/src/app/demo/demo-tools.module.ts
new file mode 100644
index 0000000000..c7275aed9b
--- /dev/null
+++ b/src/app/demo/demo-tools.module.ts
@@ -0,0 +1,36 @@
+import {CommonModule} from '@angular/common';
+import {HTTP_INTERCEPTORS} from '@angular/common/http';
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {RouterModule} from '@angular/router';
+import {TeamsMeetingComposerComponent} from '../unit-hub/teams-meeting-composer.component';
+import {DemoControlsComponent} from './demo-controls/demo-controls.component';
+import {DemoDataMaskInterceptor} from './demo-data-mask.interceptor';
+import {DemoModeBannerComponent} from './demo-mode-banner/demo-mode-banner.component';
+
+@NgModule({
+  declarations: [DemoControlsComponent, DemoModeBannerComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    TeamsMeetingComposerComponent,
+    RouterModule,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatSlideToggleModule,
+  ],
+  exports: [DemoModeBannerComponent],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: DemoDataMaskInterceptor,
+      multi: true,
+    },
+  ],
+})
+export class DemoToolsModule {}
diff --git a/src/app/demo/fixtures/peer-progress-demo.fixtures.ts b/src/app/demo/fixtures/peer-progress-demo.fixtures.ts
new file mode 100644
index 0000000000..b0e8aa22d6
--- /dev/null
+++ b/src/app/demo/fixtures/peer-progress-demo.fixtures.ts
@@ -0,0 +1,207 @@
+import {PeerProgressState} from 'src/app/api/models/peer-progress';
+import {PeerProgressIndicator} from 'src/app/api/models/peer-progress-indicator';
+import {PeerProgressUnitSummary} from 'src/app/api/models/peer-progress-unit-summary';
+
+export const DEMO_STATUS_DISTRIBUTION: PeerProgressIndicator['statusDistribution'] = [
+  {status: 'not_started', percentage: 20},
+  {status: 'feedback_exceeded', percentage: 0},
+  {status: 'redo', percentage: 10},
+  {status: 'need_help', percentage: 0},
+  {status: 'working_on_it', percentage: 20},
+  {status: 'fix_and_resubmit', percentage: 10},
+  {status: 'ready_for_feedback', percentage: 20},
+  {status: 'discuss', percentage: 0},
+  {status: 'demonstrate', percentage: 0},
+  {status: 'complete', percentage: 10},
+  {status: 'fail', percentage: 10},
+  {status: 'time_exceeded', percentage: 0},
+  {status: 'assess_in_portfolio', percentage: 0},
+  {status: 'attention_required', percentage: 0},
+  {status: 'rediscuss', percentage: 0},
+];
+
+export type DemoPeerProgressState =
+  | 'normal'
+  | 'zero'
+  | 'suppressed'
+  | 'unavailable'
+  | 'stale'
+  | 'disabled';
+
+const currentTimestamp = (): string => new Date().toISOString();
+
+export const NORMAL_STATE: PeerProgressIndicator = {
+  taskDefinitionId: 0,
+  unitId: 0,
+  targetGrade: 0,
+  submittedPercentage: 60,
+  completedPercentage: 10,
+  distributionAvailable: true,
+  statusDistribution: DEMO_STATUS_DISTRIBUTION,
+  isUserEnabled: true,
+  isSuppressed: false,
+  isStale: false,
+  isFeatureEnabled: true,
+  lastUpdatedAt: currentTimestamp(),
+  unavailableMessage: '',
+  unavailableReason: null,
+  distributionUnavailableReason: null,
+};
+
+export const ROUNDED_90_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  statusDistribution: DEMO_STATUS_DISTRIBUTION.map((entry) =>
+    entry.status === 'fail' ? {...entry, percentage: 0} : {...entry},
+  ),
+};
+
+export const ROUNDED_110_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  statusDistribution: DEMO_STATUS_DISTRIBUTION.map((entry) =>
+    entry.status === 'fail' ? {...entry, percentage: 20} : {...entry},
+  ),
+};
+
+export const ZERO_PERCENT_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  submittedPercentage: 0,
+  completedPercentage: 0,
+  statusDistribution: [
+    {status: 'not_started', percentage: 50},
+    {status: 'feedback_exceeded', percentage: 0},
+    {status: 'redo', percentage: 0},
+    {status: 'need_help', percentage: 10},
+    {status: 'working_on_it', percentage: 30},
+    {status: 'fix_and_resubmit', percentage: 10},
+    {status: 'ready_for_feedback', percentage: 0},
+    {status: 'discuss', percentage: 0},
+    {status: 'demonstrate', percentage: 0},
+    {status: 'complete', percentage: 0},
+    {status: 'fail', percentage: 0},
+    {status: 'time_exceeded', percentage: 0},
+    {status: 'assess_in_portfolio', percentage: 0},
+    {status: 'attention_required', percentage: 0},
+    {status: 'rediscuss', percentage: 0},
+  ],
+};
+
+export const SUPPRESSED_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isSuppressed: true,
+  unavailableMessage: 'Not enough students to show progress.',
+  unavailableReason: 'insufficient_cohort',
+  distributionUnavailableReason: 'insufficient_cohort',
+};
+
+export const UNAVAILABLE_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  unavailableMessage: 'Progress unavailable.',
+  unavailableReason: 'snapshot_unavailable',
+  distributionUnavailableReason: 'snapshot_unavailable',
+};
+
+export const STALE_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isStale: true,
+  lastUpdatedAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3).toISOString(),
+  unavailableMessage: 'Peer progress is currently unavailable.',
+  unavailableReason: 'stale',
+  distributionUnavailableReason: 'stale',
+};
+
+export const DISABLED_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isFeatureEnabled: false,
+  unavailableMessage: 'Peer Progress Indicator is disabled for this unit.',
+  unavailableReason: 'feature_disabled',
+  distributionUnavailableReason: 'feature_disabled',
+};
+
+export const DETAIL_PROTECTED_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  submittedPercentage: 60,
+  completedPercentage: 10,
+  distributionAvailable: false,
+  statusDistribution: [],
+  distributionUnavailableReason: 'privacy_protection',
+};
+
+export const USER_DISABLED_STATE: PeerProgressIndicator = {
+  ...NORMAL_STATE,
+  submittedPercentage: null,
+  completedPercentage: null,
+  distributionAvailable: false,
+  statusDistribution: [],
+  isUserEnabled: false,
+  unavailableMessage: 'Peer progress is turned off in your profile settings.',
+  unavailableReason: 'user_disabled',
+  distributionUnavailableReason: 'user_disabled',
+};
+
+export const DEMO_WEEKLY_REMAINING: readonly number[] = [
+  1.0, 0.98, 0.93, 0.88, 0.8, 0.73, 0.66, 0.58, 0.51, 0.44, 0.36, 0.28, 0.2, 0.13, 0.07, 0.02, 0.0,
+];
+
+export const DEMO_PEER_MEDIAN_STATE: PeerProgressState = 'ready';
+
+export function createDemoUnitSummary(
+  unitId: number,
+  targetGrade: number,
+  studentPercentage: number | null,
+  state: DemoPeerProgressState = 'normal',
+): PeerProgressUnitSummary {
+  const cohort = demoPeerProgressState(state);
+
+  return {
+    unitId,
+    targetGrade,
+    studentPercentage,
+    submittedPercentage: cohort.submittedPercentage,
+    isSuppressed: cohort.isSuppressed,
+    isStale: cohort.isStale,
+    isFeatureEnabled: cohort.isFeatureEnabled,
+    lastUpdatedAt: cohort.lastUpdatedAt,
+    unavailableMessage: cohort.unavailableMessage,
+  };
+}
+
+export function createMaskedPeerProgressIndicator(taskDefinitionId: number): PeerProgressIndicator {
+  return {
+    ...DISABLED_STATE,
+    taskDefinitionId,
+    unavailableMessage: 'Enable demo mode to show live peer comparison data.',
+  };
+}
+
+function demoPeerProgressState(state: DemoPeerProgressState): PeerProgressIndicator {
+  switch (state) {
+    case 'normal':
+      return NORMAL_STATE;
+    case 'zero':
+      return ZERO_PERCENT_STATE;
+    case 'suppressed':
+      return SUPPRESSED_STATE;
+    case 'unavailable':
+      return UNAVAILABLE_STATE;
+    case 'stale':
+      return STALE_STATE;
+    case 'disabled':
+      return DISABLED_STATE;
+  }
+}
diff --git a/src/app/demo/fixtures/push-preview.fixture.ts b/src/app/demo/fixtures/push-preview.fixture.ts
new file mode 100644
index 0000000000..d7a388e97f
--- /dev/null
+++ b/src/app/demo/fixtures/push-preview.fixture.ts
@@ -0,0 +1,6 @@
+export const DEMO_PUSH_PREVIEW = {
+  appName: 'OnTrack demo',
+  title: 'Feedback is ready',
+  message: 'New feedback is available for Demo Task 2.1P.',
+  destination: 'Demo task dashboard',
+} as const;
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index 9284745988..d211acd5f1 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -1,241 +1,493 @@
-import {interval} from 'rxjs';
-import {take} from 'rxjs/operators';
-
-import {NgModule, Injector, DoBootstrap} from '@angular/core';
-import {BrowserModule, DomSanitizer, Title} from '@angular/platform-browser';
-import {UpgradeModule} from '@angular/upgrade/static';
-import {AppInjector, setAppInjector} from './app-injector';
-import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-
-// Lottie animation module
-// import {LottieModule, LottieCacheModule} from 'ngx-lottie';
-import {provideLottieOptions, LottieComponent} from 'ngx-lottie';
+import {PickerModule} from '@ctrl/ngx-emoji-mart';
+import {EmojiModule} from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import {CodeEditorModule} from '@ngstack/code-editor';
+import * as Sentry from '@sentry/angular';
+import {NgxChartsModule} from '@swimlane/ngx-charts';
+import {
+  GANTT_GLOBAL_CONFIG,
+  GANTT_I18N_LOCALE_TOKEN,
+  type GanttI18nLocaleConfig,
+  GanttLinkLineType,
+  NgxGanttModule,
+  enUsLocale,
+} from '@worktile/gantt';
+import {DateAdapter as CalendarDateAdapter, CalendarModule} from 'angular-calendar';
+import {adapterFactory} from 'angular-calendar/date-adapters/date-fns';
+import {enAU} from 'date-fns/locale';
 import player from 'lottie-web';
+import {PdfViewerModule} from 'ng2-pdf-viewer';
+import {FlexLayoutModule} from 'ng-flex-layout';
+import {LottieComponent, provideLottieOptions} from 'ngx-lottie';
+// TODO: replace back to original ngx-monaco-editor-v2 once it supports angular 22
+import {MonacoEditorModule} from 'ngx-monaco-editor-v2-alternative';
+import {NgxSkeletonLoaderModule} from 'ngx-skeleton-loader';
+import {environment} from 'src/environments/environment';
 import {ClipboardModule} from '@angular/cdk/clipboard';
 import {DragDropModule} from '@angular/cdk/drag-drop';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatSelectModule} from '@angular/material/select';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
+import {APP_INITIALIZER, ErrorHandler, Injector, NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {DateFnsAdapter} from '@angular/material-date-fns-adapter';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatBadgeModule} from '@angular/material/badge';
 import {MatButtonModule} from '@angular/material/button';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatChipListbox, MatChipsModule} from '@angular/material/chips';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+  MatNativeDateModule,
+  MatOptionModule,
+} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatDividerModule} from '@angular/material/divider';
+import {MatExpansionModule} from '@angular/material/expansion';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatGridListModule} from '@angular/material/grid-list';
 import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatBadgeModule} from '@angular/material/badge';
 import {MatListModule} from '@angular/material/list';
-import {MatCardModule} from '@angular/material/card';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {MatStepperModule} from '@angular/material/stepper';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatGridListModule} from '@angular/material/grid-list';
-import {PdfViewerModule} from 'ng2-pdf-viewer';
-import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
-import {MatDialogModule as MatDialogModuleNew} from '@angular/material/dialog';
-import {AlertService} from 'src/app/common/services/alert.service';
-import {AlertComponent} from 'src/app/common/services/alert.service';
-
-import {setTheme} from 'ngx-bootstrap/utils';
-
-import {AboutDoubtfireModalService} from 'src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.service';
+import {MatSortModule} from '@angular/material/sort';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTableModule} from '@angular/material/table';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {
+  MAT_TOOLTIP_DEFAULT_OPTIONS,
+  MatTooltipDefaultOptions,
+  MatTooltipModule,
+} from '@angular/material/tooltip';
+import {MatTreeModule} from '@angular/material/tree';
+import {BrowserModule, DomSanitizer, Title} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {Router, RouterModule} from '@angular/router';
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {interval} from 'rxjs';
+import {take} from 'rxjs/operators';
 import {
   AboutDoubtfireModal,
   AboutDoubtfireModalContent,
 } from 'src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component';
-import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {AboutDoubtfireModalService} from 'src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.service';
+import {AlertComponent, AlertService} from 'src/app/common/services/alert.service';
 import {FTaskBadgeComponent} from 'src/app/common/task-badge/task-badge.component';
-import {DoubtfireAngularJSModule} from 'src/app/doubtfire-angularjs.module';
-import {HttpAuthenticationInterceptor} from './common/services/http-authentication.interceptor';
-import {
-  visualisationsProvider,
-  analyticsServiceProvider,
-  dateServiceProvider,
-  CsvUploadModalProvider,
-  UnitStudentEnrolmentModalProvider,
-  CsvResultModalProvider,
-  AudioRecorderProvider,
-  AudioRecorderServiceProvider,
-  commentsModalProvider,
-  plagiarismReportModalProvider,
-  rootScopeProvider,
-  aboutDoubtfireModalProvider,
-  calendarModalProvider,
-  gradeTaskModalProvider,
-  uploadSubmissionModalProvider,
-  ConfirmationModalProvider,
-} from './ajs-upgraded-providers';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {AttachmentConfirmationDialogComponent} from 'src/app/tasks/task-comment-composer/attachment-confirmation-dialog/attachment-confirmation-dialog.component';
 import {
-  TaskCommentComposerComponent,
   DiscussionComposerDialog,
+  TaskCommentComposerComponent,
 } from 'src/app/tasks/task-comment-composer/task-comment-composer.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-
-import {AudioCommentRecorderComponent} from './common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder';
-import {DiscussionPromptComposerComponent} from './tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {
-  IntelligentDiscussionPlayerComponent,
-  IntelligentDiscussionDialog,
-} from './tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component';
-import {MicrophoneTesterComponent} from './common/audio-recorder/audio/microphone-tester/microphone-tester.component';
-import {IntelligentDiscussionRecorderComponent} from './tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component';
-import {FlexLayoutModule} from 'ng-flex-layout';
-import {ExtensionCommentComponent} from './tasks/task-comments-viewer/extension-comment/extension-comment.component';
-import {CampusListComponent} from './admin/institution-settings/campuses/campus-list/campus-list.component';
-import {ExtensionModalComponent} from './common/modals/extension-modal/extension-modal.component';
-import {CalendarModalComponent} from './common/modals/calendar-modal/calendar-modal.component';
-import {MatRadioModule} from '@angular/material/radio';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MAT_DATE_LOCALE, MatOptionModule} from '@angular/material/core';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {doubtfireStates} from './doubtfire.states';
-import {MatTableModule} from '@angular/material/table';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatSortModule} from '@angular/material/sort';
+import {EditProfileComponent} from './account/edit-profile/edit-profile.component';
 import {ActivityTypeListComponent} from './admin/institution-settings/activity-type-list/activity-type-list.component';
-import {UnitStudentsEditorComponent} from './units/states/edit/directives/unit-students-editor/unit-students-editor.component';
+import {CampusListComponent} from './admin/institution-settings/campuses/campus-list/campus-list.component';
 import {InstitutionSettingsComponent} from './admin/institution-settings/institution-settings.component';
-import {UnitTutorialsListComponent} from './units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component';
-import {UnitTutorialsManagerComponent} from './units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component';
-import {CommentBubbleActionComponent} from './tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component';
-import {StudentTutorialSelectComponent} from './units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component';
-import {StudentCampusSelectComponent} from './units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component';
-import {ServiceWorkerModule} from '@angular/service-worker';
-import {environment} from 'src/environments/environment';
-import {PickerModule} from '@ctrl/ngx-emoji-mart';
-import {EmojiModule} from '@ctrl/ngx-emoji-mart/ngx-emoji';
-import {EmojiService} from './common/services/emoji.service';
-import {TaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component';
-import {CreatePortfolioTaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component';
-import {TaskDescriptionCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component';
-import {TaskCommentsViewerComponent} from './tasks/task-comments-viewer/task-comments-viewer.component';
-import {MarkedPipe} from './common/pipes/marked.pipe';
-import {UserIconComponent} from './common/user-icon/user-icon.component';
-import {AudioPlayerComponent} from './common/audio-player/audio-player.component';
-import {HumanizedDatePipe} from './common/pipes/humanized-date.pipe';
-import {DragDropDirective} from './common/directives/drag-drop.directive';
-import {fPdfViewerComponent} from './common/pdf-viewer/pdf-viewer.component';
-import {SafePipe} from './common/pipes/safe.pipe';
-import {PdfViewerPanelComponent} from './common/pdf-viewer-panel/pdf-viewer-panel.component';
-import {StaffTaskListComponent} from './units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component';
-import {FiltersPipe} from './common/filters/filters.pipe';
-import {TasksOfTaskDefinitionPipe} from './common/filters/tasks-of-task-definition.pipe';
-import {TasksInTutorialsPipe} from './common/filters/tasks-in-tutorials.pipe';
-import {TasksForInboxSearchPipe} from './common/filters/tasks-for-inbox-search.pipe';
-import {StatusIconComponent} from './common/status-icon/status-icon.component';
-import {ScrollingModule} from '@angular/cdk/scrolling';
-import {CheckForUpdateService} from './sessions/service-worker-updater/check-for-update.service';
+import {OverseerImageListComponent} from './admin/institution-settings/overseer-images/overseer-image-list.component';
+import {CreateNewUnitModalContentComponent} from './admin/modals/create-new-unit-modal/create-new-unit-modal-content.component';
+import {CreateNewUnitModal} from './admin/modals/create-new-unit-modal/create-new-unit-modal.component';
+import {
+  NewTeachingPeriodDialogComponent,
+  TeachingPeriodListComponent,
+} from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
+import {
+  TeachingPeriodUnitImportDialogComponent,
+  TeachingPeriodUnitImportService,
+} from './admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog';
+import {FUnitsComponent} from './admin/states/units/units.component';
+import {FUsersComponent} from './admin/states/users/users.component';
+import {TiiActionLogComponent} from './admin/tii-action-log/tii-action-log.component';
 import {
   ActivityTypeService,
-  CampusService,
   AuthenticationService,
+  CampusService,
+  D2lAssessmentMappingService,
+  EngagementCommentService,
+  EngagementService,
   GroupSetService,
-  OverseerImageService,
+  LearningOutcomeService,
   OverseerAssessmentService,
+  OverseerImageService,
+  ProjectService,
+  SubmissionHistoryService,
   TaskCommentService,
-  TeachingPeriodService,
+  TaskService,
+  TaskSimilarityService,
   TeachingPeriodBreakService,
+  TeachingPeriodService,
   TutorialService,
   TutorialStreamService,
-  UnitService,
-  TaskService,
-  ProjectService,
   UnitRoleService,
+  UnitService,
   UserService,
   WebcalService,
-  LearningOutcomeService,
-  TaskSimilarityService,
 } from './api/models/doubtfire-model';
+import {CommunicationActionService} from './api/services/communication-action.service';
+import {CommunicationConditionService} from './api/services/communication-condition.service';
+import {CommunicationRuleService} from './api/services/communication-rule.service';
+import {CommunicationSetService} from './api/services/communication-set.service';
+import {DiscussionPromptService} from './api/services/discussion-prompt.service';
+import {FeedbackTemplateService} from './api/services/feedback-template.service';
+import {GroupService} from './api/services/group.service';
+import {LtiService} from './api/services/lti.service';
+import {MarkingSessionService} from './api/services/marking-session.service';
+import {OverseerStepResultService} from './api/services/overseer-step-result.service';
+import {OverseerStepService} from './api/services/overseer-step.service';
+import {ScormAdapterService} from './api/services/scorm-adapter.service';
+import {SidekiqJobService} from './api/services/sidekiq-job.service';
+import {StaffNoteService} from './api/services/staff-note.service';
+import {TaskDefinitionService} from './api/services/task-definition.service';
+import {TaskOutcomeAlignmentService} from './api/services/task-outcome-alignment.service';
+import {TaskPrerequisiteService} from './api/services/task-prerequisite.service';
+import {TestAttemptService} from './api/services/test-attempt.service';
+import {TiiActionService} from './api/services/tii-action.service';
+import {TutorNoteService} from './api/services/tutor-note.service';
+import {setAppInjector} from './app-injector';
+import {AppComponent} from './app.component';
+import {routes} from './app.routes';
+import {ArchiveViewerComponent} from './common/archive-viewer/archive-viewer.component';
+import {AudioPlayerComponent} from './common/audio-player/audio-player.component';
+import {AudioCommentRecorderComponent} from './common/audio-recorder/audio/audio-comment-recorder/audio-comment-recorder';
+import {MicrophoneTesterComponent} from './common/audio-recorder/audio/microphone-tester/microphone-tester.component';
+import {ChartBaseComponent} from './common/chart-base/chart-base-component/chart-base-component.component';
+import {DragDropDirective} from './common/directives/drag-drop.directive';
+import {EditProfileFormComponent} from './common/edit-profile-form/edit-profile-form.component';
+import {FChipComponent} from './common/f-chip/chip.component';
+import {FeedbackTemplateEditorComponent} from './common/feedback-template-editor/feedback-template-editor.component';
 import {FileDownloaderService} from './common/file-downloader/file-downloader.service';
-import {PdfImageCommentComponent} from './tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component';
-import {OverseerImageListComponent} from './admin/institution-settings/overseer-images/overseer-image-list.component';
-
-import {TaskAssessmentCommentComponent} from './tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component';
-import {TaskAssessmentModalComponent} from './common/modals/task-assessment-modal/task-assessment-modal.component';
-
-import {TaskSubmissionHistoryComponent} from './tasks/task-submission-history/task-submission-history.component';
-import {HomeComponent} from './home/states/home/home.component';
-import {IsActiveUnitRole} from './common/pipes/is-active-unit-role.pipe';
+import {FileDropComponent} from './common/file-drop/file-drop.component';
+// import {GradeTaskModalComponent} from './tasks/modals/grade-task-modal/grade-task-modal.component';
+// import {PrivacyPolicy} from './config/privacy-policy/privacy-policy';
+import {FileUploaderComponent} from './common/file-uploader/file-uploader.component';
+import {FileViewerComponent} from './common/file-viewer/file-viewer.component';
+import {FiltersPipe} from './common/filters/filters.pipe';
+import {OrderByPipe} from './common/filters/order-by.pipe';
+import {TasksForGroupsetPipe} from './common/filters/tasks-for-group-set.pipe';
+import {TasksForInboxSearchPipe} from './common/filters/tasks-for-inbox-search.pipe';
+import {TasksInTutorialsPipe} from './common/filters/tasks-in-tutorials.pipe';
+import {TasksOfTaskDefinitionPipe} from './common/filters/tasks-of-task-definition.pipe';
+import {FooterComponent} from './common/footer/footer.component';
+import {GradeIconComponent} from './common/grade-icon/grade-icon.component';
 import {HeaderComponent} from './common/header/header.component';
-import {UnitDropdownComponent} from './common/header/unit-dropdown/unit-dropdown.component';
+import {NotificationBellComponent} from './common/header/notification-bell/notification-bell.component';
 import {TaskDropdownComponent} from './common/header/task-dropdown/task-dropdown.component';
-import {SplashScreenComponent} from './home/splash-screen/splash-screen.component';
-import {HttpErrorInterceptor} from './common/services/http-error.interceptor';
-import {TaskDefinitionService} from './api/services/task-definition.service';
-import {NewTeachingPeriodDialogComponent} from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
-import {MatNativeDateModule} from '@angular/material/core';
-import {TaskOutcomeAlignmentService} from './api/services/task-outcome-alignment.service';
-import {GroupService} from './api/services/group.service';
-import {ObjectSelectComponent} from './common/obect-select/object-select.component';
-import {WelcomeComponent} from './welcome/welcome.component';
+import {UnitDropdownComponent} from './common/header/unit-dropdown/unit-dropdown.component';
 import {HeroSidebarComponent} from './common/hero-sidebar/hero-sidebar.component';
-import {SignInComponent} from './sessions/states/sign-in/sign-in.component';
-import {EditProfileFormComponent} from './common/edit-profile-form/edit-profile-form.component';
-import {TransitionHooksService} from './sessions/transition-hooks.service';
-import {EditProfileComponent} from './account/edit-profile/edit-profile.component';
+import {LearningOutcomeEditorComponent} from './common/learning-outcome-editor/learning-outcome-editor.component';
+import {NestedCsvDownloadModalComponent} from './common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.component';
+import {NestedCsvDownloadModalService} from './common/learning-outcome-editor/nested-csv-download-modal/nested-csv-download-modal.service';
+import {CalendarModalComponent} from './common/modals/calendar-modal/calendar-modal.component';
+import {CommentsModalComponent} from './common/modals/comments-modal/comments-modal.component';
+import {ConfirmationModalComponent} from './common/modals/confirmation-modal/confirmation-modal.component';
+import {CsvResultModalComponent} from './common/modals/csv-result-modal/csv-result-modal.component';
+import {CsvResultModalService} from './common/modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalComponent} from './common/modals/csv-upload-modal/csv-upload-modal.component';
+import {CsvUploadModalService} from './common/modals/csv-upload-modal/csv-upload-modal.service';
+import {TaskDateSliderComponent} from './common/modals/date-change-modal/task-date-slider.component';
+import {DiscussedInClassReasonModalComponent} from './common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.component';
+import {ExtensionModalComponent} from './common/modals/extension-modal/extension-modal.component';
+import {QrModalComponent} from './common/modals/qr-modal/qr-modal.component';
+import {ScormExtensionModalComponent} from './common/modals/scorm-extension-modal/scorm-extension-modal.component';
+import {SidekiqJobsModalComponent} from './common/modals/sidekiq-jobs-modal/sidekiq-jobs-modal.component';
+import {SidekiqProgressModalComponent} from './common/modals/sidekiq-progress-modal/sidekiq-progress-modal.component';
+import {SpecConModalComponent} from './common/modals/spec-con-modal/spec-con-modal.component';
+import {SpecConModalService} from './common/modals/spec-con-modal/spec-con-modal.service';
+import {TaskAssessmentModalComponent} from './common/modals/task-assessment-modal/task-assessment-modal.component';
+import {TutorNotesModalComponent} from './common/modals/tutor-notes-modal/tutor-notes-modal.component';
+import {NotificationSettingsComponent} from './common/notification-settings/notification-settings.component';
+import {NotificationsPageComponent} from './common/notifications-page/notifications-page.component';
+import {ObjectSelectComponent} from './common/obect-select/object-select.component';
+import {PageContainerComponent} from './common/page-container/page-container.component';
+import {PdfViewerPanelComponent} from './common/pdf-viewer-panel/pdf-viewer-panel.component';
+import {fPdfViewerComponent} from './common/pdf-viewer/pdf-viewer.component';
+import {HumanizedDatePipe} from './common/pipes/humanized-date.pipe';
+import {IsActiveUnitRole} from './common/pipes/is-active-unit-role.pipe';
+import {LocalizedDatePipe} from './common/pipes/localized-date.pipe';
+import {MarkedPipe} from './common/pipes/marked.pipe';
+import {SafePipe} from './common/pipes/safe.pipe';
+import {ProjectCardComponent} from './common/project-card/project-card.component';
+import {ProjectProgressBarComponent} from './common/project-progress-bar/project-progress-bar.component';
+import {ProjectProgressGaugeComponent} from './common/project-progress/project-progress-gauge.component';
+import {ScormPlayerComponent} from './common/scorm-player/scorm-player.component';
+import {EmojiService} from './common/services/emoji.service';
+import {GradeService} from './common/services/grade.service';
+import {HttpAuthenticationInterceptor} from './common/services/http-authentication.interceptor';
+import {HttpErrorInterceptor} from './common/services/http-error.interceptor';
+import {StatusIconComponent} from './common/status-icon/status-icon.component';
+import {SubmissionFilesDownloadComponent} from './common/submission-files-download/submission-files-download.component';
+import {SuccessCloseComponent} from './common/success-close/success-close.component';
+import {ThemeSettingsComponent} from './common/theme/theme-settings.component';
+import {ThemeToggleComponent} from './common/theme/theme-toggle.component';
+import {UnitCodeComponent} from './common/unit-code/unit-code.component';
 import {UserBadgeComponent} from './common/user-badge/user-badge.component';
-import {TaskStatusCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component';
-import {TaskDueCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component';
-import {FooterComponent} from './common/footer/footer.component';
+import {UserIconComponent} from './common/user-icon/user-icon.component';
+import {PrivacyPolicy} from './config/privacy-policy/privacy-policy';
+import {CrossDashboardComponent} from './dashboard/f-cross-dashboard.component';
+import {DashboardListItemComponent} from './dashboard/list-item/dashboard-list-item.component';
+import {DashboardExpandedListItemComponent} from './dashboard/list-item/expanded-list-item/expanded-list-item.component';
+import {DemoToolsModule} from './demo/demo-tools.module';
+import {TimeoutComponent} from './errors/states/timeout/timeout.component';
+import {UnauthorisedComponent} from './errors/states/unauthorised/unauthorised.component';
+import {UnavailableCardComponent} from './errors/unavailable-card/unavailable-card.component';
+import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
+import {GroupMemberContributionAssignerComponent} from './groups/group-member-contribution-assigner/group-member-contribution-assigner.component';
+import {GroupMemberListComponent} from './groups/group-member-list/group-member-list.component';
+import {GroupSelectorComponent} from './groups/group-selector/group-selector.component';
+import {GroupSetManagerComponent} from './groups/group-set-manager/group-set-manager.component';
+import {GroupSetSelectorComponent} from './groups/group-set-selector/group-set-selector.component';
+import {SplashScreenComponent} from './home/splash-screen/splash-screen.component';
+import {HomeComponent} from './home/states/home/home.component';
+import {LtiDashboardComponent} from './home/states/lti-dashboard/lti-dashboard.component';
+import {LtiUnitLinkComponent} from './home/states/lti-unit-link/lti-unit-link.component';
+import {LegacyRoutePlaceholderComponent} from './legacy-route-placeholder.component';
+import {ProjectProgressDashboardComponent} from './projects/project-progress-dashboard/project-progress-dashboard.component';
+import {AddEngagementDialogComponent} from './projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component';
+import {EngagementDetailDialogComponent} from './projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component';
+import {EngagementPassportCardComponent} from './projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component';
+import {PeerProgressUnitSummaryComponent} from './projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component';
+import {ProgressDashboardComponent} from './projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component';
+import {DownloadFilterDialogComponent} from './projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component';
+import {TaskPlannerCardComponent} from './projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component';
+import {CreatePortfolioTaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component';
+import {TaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component';
+import {DiscussionPromptsViewComponent} from './projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component';
+import {StaffNotesViewComponent} from './projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component';
 import {TaskAssessmentCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component';
+import {PpiWidgetComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component';
+import {TaskDescriptionCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component';
+import {TaskDueCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component';
+import {TaskIlosCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component';
+import {SubmissionFilesModalComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component';
+import {TaskOverseerReportComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component';
+import {TaskPrerequisitesCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component';
+import {TaskScormCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component';
+import {TaskSimilarityViewComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component';
+import {TaskStatusCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component';
 import {TaskSubmissionCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component';
+import {TutorNotesViewComponent} from './projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component';
 import {TaskDashboardComponent} from './projects/states/dashboard/directives/task-dashboard/task-dashboard.component';
-import {InboxComponent} from './units/states/tasks/inbox/inbox.component';
-import {ProjectProgressBarComponent} from './common/project-progress-bar/project-progress-bar.component';
-import {TeachingPeriodListComponent} from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
-import {FChipComponent} from './common/f-chip/f-chip.component';
-import {TaskSimilarityViewComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component';
-import {FileViewerComponent} from './common/file-viewer/file-viewer.component';
+import {ProjectDashboardComponent} from './projects/states/dashboard/project-dashboard/project-dashboard.component';
+import {DiscussionPromptsComponent} from './projects/states/discussion-prompts/discussion-prompts.component';
+import {ProjectGroupsStateComponent} from './projects/states/groups/project-groups-state.component';
+import {ProjectGroupsComponent} from './projects/states/groups/project-groups/project-groups.component';
+import {JplagReportViewerComponent} from './projects/states/jplag/jplag-report-viewer.component';
+import {ProjectPlanComponent} from './projects/states/plan/project-plan.component';
+import {TaskPlannerPrerequisitesModalComponent} from './projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component';
+import {TaskPlannerPrerequisitesModalService} from './projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.service';
+import {TaskPlannerComponent} from './projects/states/plan/task-planner/task-planner.component';
+import {PortfolioAddExtraFilesStepComponent} from './projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component';
+import {PortfolioGradeSelectStepComponent} from './projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component';
+import {PortfolioLearningSummaryReportStepComponent} from './projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component';
+import {PortfolioIncludedTasksComponent} from './projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component';
+import {PortfolioReviewStepComponent} from './projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component';
+import {PortfolioWelcomeStepComponent} from './projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component';
+import {PortfolioStateComponent} from './projects/states/portfolio/portfolio-state.component';
+import {ProjectRootStateComponent} from './projects/states/project-root-state.component';
+import {StaffNotesComponent} from './projects/states/staff-notes/staff-notes.component';
+import {TutorDiscussionComponent} from './projects/states/tutor-discussion/tutor-discussion.component';
+import {TutorNotesComponent} from './projects/states/tutor-notes/tutor-notes.component';
+import {TutorialsComponent} from './projects/states/tutorials/tutorials.component';
+import {InstallPromptService} from './sessions/install-prompt/install-prompt.service';
+// import {GradeTaskModalComponent} from './tasks/modals/grade-task-modal/grade-task-modal.component';
+// import {PrivacyPolicy} from './config/privacy-policy/privacy-policy';
+// import {GradeTaskModalComponent} from './tasks/modals/grade-task-modal/grade-task-modal.component';
+// import {PrivacyPolicy} from './config/privacy-policy/privacy-policy';
+import {CheckForUpdateService} from './sessions/service-worker-updater/check-for-update.service';
+import {SignInComponent} from './sessions/states/sign-in/sign-in.component';
+import {FeedbackAppealModalComponent} from './tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component';
+import {GradeTaskModalComponent} from './tasks/modals/grade-task-modal/grade-task-modal.component';
+import {SubmissionTypeModalComponent} from './tasks/modals/submission-type-modal/submission-type-modal.component';
+import {TaskUploadRequirementsComponent} from './tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component';
+import {UploadSubmissionModalComponent} from './tasks/modals/upload-submission-modal/upload-submission-modal.component';
+import {ProjectTasksListComponent} from './tasks/project-tasks-list/project-tasks-list.component';
+import {DiscussionPromptComposerComponent} from './tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component';
+import {TaskFeedbackTemplatesComponent} from './tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component';
+import {CommentBubbleActionComponent} from './tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component';
+import {ExtensionCommentComponent} from './tasks/task-comments-viewer/extension-comment/extension-comment.component';
+import {
+  IntelligentDiscussionDialog,
+  IntelligentDiscussionPlayerComponent,
+} from './tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component';
+import {IntelligentDiscussionRecorderComponent} from './tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component';
+import {PdfImageCommentComponent} from './tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component';
+import {ScormCommentComponent} from './tasks/task-comments-viewer/scorm-comment/scorm-comment.component';
+import {ScormExtensionCommentComponent} from './tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component';
+import {TaskAssessmentCommentComponent} from './tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component';
+import {TaskCommentsViewerComponent} from './tasks/task-comments-viewer/task-comments-viewer.component';
+import {UnitStudentEnrolmentModalComponent} from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component';
+import {AnalyticsTutorTimesComponent} from './units/states/analytics/directives/analytics-tutor-times.component';
+import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
+import {ChangeTargetGradeActionComponent} from './units/states/edit/directives/unit-communications-editor/actions/change-target-grade-action/change-target-grade-action.component';
+import {CommunicationActionsComponent} from './units/states/edit/directives/unit-communications-editor/actions/communication-actions.component';
+import {EmailStaffActionComponent} from './units/states/edit/directives/unit-communications-editor/actions/email-staff-action/email-staff-action.component';
+import {EmailStudentActionComponent} from './units/states/edit/directives/unit-communications-editor/actions/email-student-action/email-student-action.component';
+import {TaskCommentActionComponent} from './units/states/edit/directives/unit-communications-editor/actions/task-comment-action/task-comment-action.component';
+import {CommunicationScheduleModalComponent} from './units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedule-modal.component';
+import {CommunicationSchedulesComponent} from './units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedules.component';
+import {CommunicationConditionsComponent} from './units/states/edit/directives/unit-communications-editor/conditions/communication-conditions.component';
+import {UnitCommunicationsEditorComponent} from './units/states/edit/directives/unit-communications-editor/unit-communications-editor.component';
+import {
+  D2lUnitDetailsFormComponent,
+  D2lUnitDetailsModal,
+} from './units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component';
+import {UnitDetailsEditorComponent} from './units/states/edit/directives/unit-details-editor/unit-details-editor.component';
+import {UnitGroupSetEditorComponent} from './units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component';
+import {BulkImportStaffModalComponent} from './units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.component';
+import {UnitStaffEditorComponent} from './units/states/edit/directives/unit-staff-editor/unit-staff-editor.component';
+import {StudentCampusSelectComponent} from './units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component';
+import {StudentTutorialSelectComponent} from './units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component';
+import {UnitStudentsEditorComponent} from './units/states/edit/directives/unit-students-editor/unit-students-editor.component';
+import {TaskDefinitionDatesComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component';
+import {TaskDefinitionDiscussionPromptsComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component';
 import {TaskDefinitionEditorComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component';
 import {TaskDefinitionGeneralComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component';
-import {TaskDefinitionWhoComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component';
-import {TaskDefinitionDatesComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component';
-import {TaskDefinitionUploadComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component';
 import {TaskDefinitionOptionsComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component';
-import {TaskDefinitionResourcesComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component';
+import {OverseerScriptEditorModalComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component';
 import {TaskDefinitionOverseerComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component';
-import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
-import {FileDropComponent} from './common/file-drop/file-drop.component';
+import {TaskDefinitionPrerequisitesComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component';
+import {TaskDefinitionResourcesComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component';
+import {TaskDefinitionScormComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component';
+import {TaskDefinitionUploadComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component';
+import {TaskDefinitionWhoComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component';
 import {UnitTaskEditorComponent} from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
-import {FUsersComponent} from './admin/states/f-users/f-users.component';
-
-import {CreateNewUnitModal} from './admin/modals/create-new-unit-modal/create-new-unit-modal.component';
-import {CreateNewUnitModalContentComponent} from './admin/modals/create-new-unit-modal/create-new-unit-modal-content.component';
+import {UnitTutorialsListComponent} from './units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component';
+import {UnitTutorialsManagerComponent} from './units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component';
+import {UnitAdminStateComponent} from './units/states/edit/unit-admin-state.component';
+import {UnitGroupsComponent} from './units/states/groups/unit-groups/unit-groups.component';
 import {
-  TeachingPeriodUnitImportDialogComponent,
-  TeachingPeriodUnitImportService,
-} from './admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog';
-import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
-import {TiiActionLogComponent} from './admin/tii-action-log/tii-action-log.component';
-import {TiiActionService} from './api/services/tii-action.service';
-import {FUnitsComponent} from './admin/states/f-units/f-units.component';
-import {FUnitTaskListComponent} from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
-import {FTaskDetailsViewComponent} from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
-import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
-import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
-import {UnitCodeComponent} from './common/unit-code/unit-code.component';
-import {GradeService} from './common/services/grade.service';
+  D2lTransferComponent,
+  D2lTransferModal,
+} from './units/states/portfolios/d2l-transfer-modal/d2l-transfer.component';
+import {PortfoliosAssessmentComponent} from './units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component';
+import {PortfoliosListComponent} from './units/states/portfolios/directives/portfolios-list/portfolios-list.component';
+import {PortfoliosPortfolioViewComponent} from './units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component';
+import {PortfoliosProjectProgressComponent} from './units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component';
+import {DownloadStaffNotesComponent} from './units/states/portfolios/download-staff-notes/download-staff-notes.component';
+import {PortfoliosComponent} from './units/states/portfolios/portfolios.component';
+import {UploadGradesComponent} from './units/states/portfolios/upload-grades/upload-grades.component';
+import {RolloverComponent} from './units/states/rollover/rollover.component';
+import {StudentsListComponent} from './units/states/students-list/students-list.component';
+import {InboxDashboardComponent} from './units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component';
+import {ConfirmModerationModalComponent} from './units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component';
+import {ModerationComponent} from './units/states/tasks/inbox/directives/moderation/moderation.component';
+import {BatchFeedbackWorkflowDialogComponent} from './units/states/tasks/inbox/directives/staff-task-list/batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component';
+import {StaffTaskListComponent} from './units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component';
+import {TaskClaimComponent} from './units/states/tasks/inbox/directives/task-claim/task-claim.component';
+import {InboxComponent} from './units/states/tasks/inbox/inbox.component';
+import {UnitTaskInboxStateComponent} from './units/states/tasks/inbox/unit-task-inbox-state.component';
+import {FTaskDetailsViewComponent} from './units/task-viewer/directives/task-details-view/task-details-view.component';
+import {FTaskSheetViewComponent} from './units/task-viewer/directives/task-sheet-view/task-sheet-view.component';
+import {FUnitTaskListComponent} from './units/task-viewer/directives/unit-task-list/unit-task-list.component';
+import {TaskViewerStateComponent} from './units/task-viewer/task-viewer-state.component';
+import {UnitRootStateComponent} from './units/unit-root-state.component';
+import {ProgressBurndownChartComponent} from './visualisations/progress-burndown-chart/progress-burndown-chart.component';
+import {TaskStatusPieChartComponent} from './visualisations/task-status-pie-chart/task-status-pie-chart.component';
+import {TaskVisualisationComponent} from './visualisations/task-visualisation/task-visualisation.component';
+import {WelcomeComponent} from './welcome/welcome.component';
+
+// See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036
+const MY_DATE_FORMAT = {
+  parse: {
+    dateInput: 'dd/MM/yyyy', // this is how your date will be parsed from Input
+  },
+  display: {
+    dateInput: 'dd/MM/yyyy', // this is how your date will get displayed on the Input
+    monthYearLabel: 'MMMM yyyy',
+    dateA11yLabel: 'do MMMM yyyy',
+    monthYearA11yLabel: 'MMMM yyyy',
+  },
+};
+
+const DOUBTFIRE_GANTT_LOCALE = 'doubtfire-en-au';
+
+const DOUBTFIRE_GANTT_LOCALE_CONFIG: GanttI18nLocaleConfig = {
+  ...enUsLocale,
+  id: DOUBTFIRE_GANTT_LOCALE,
+  views: {
+    ...enUsLocale.views,
+    day: {
+      ...enUsLocale.views.day,
+      tickFormats: {
+        ...enUsLocale.views.day.tickFormats,
+        unit: 'd EEE',
+      },
+    },
+  },
+};
+
+const GANTT_CHART_LOCALE_CONFIG = {
+  provide: GANTT_I18N_LOCALE_TOKEN,
+  useValue: DOUBTFIRE_GANTT_LOCALE_CONFIG,
+  multi: true,
+};
+
+const GANTT_CHART_CONFIG = {
+  provide: GANTT_GLOBAL_CONFIG,
+  useValue: {
+    locale: DOUBTFIRE_GANTT_LOCALE,
+    dateOptions: {
+      weekStartsOn: 1,
+    },
+    linkOptions: {
+      showArrow: true,
+      lineType: GanttLinkLineType.curve,
+    },
+    styleOptions: {
+      headerHeight: 52,
+      // lineHeight: '25',
+      // barHeight: '23',
+      // headerHeight: '50px',
+    },
+  },
+};
+
+const DEFAULT_TOOLTIP_OPTIONS: MatTooltipDefaultOptions = {
+  showDelay: 0,
+  hideDelay: 0,
+  touchendHideDelay: 1500,
+  position: 'above',
+};
 
 @NgModule({
   // Components we declare
   declarations: [
+    AppComponent,
+    CrossDashboardComponent,
+    DashboardListItemComponent,
+    DashboardExpandedListItemComponent,
+    TaskStatusPieChartComponent,
     AlertComponent,
+    AddEngagementDialogComponent,
+    EngagementPassportCardComponent,
+    EngagementDetailDialogComponent,
+    PeerProgressUnitSummaryComponent,
+    ProgressDashboardComponent,
+    UnitStudentEnrolmentModalComponent,
     AboutDoubtfireModalContent,
+    D2lUnitDetailsFormComponent,
+    D2lTransferComponent,
     TeachingPeriodUnitImportDialogComponent,
+    ProjectTasksListComponent,
     TaskCommentComposerComponent,
+    AttachmentConfirmationDialogComponent,
     AudioCommentRecorderComponent,
     MicrophoneTesterComponent,
     DiscussionPromptComposerComponent,
     IntelligentDiscussionPlayerComponent,
+    TaskDateSliderComponent,
     IntelligentDiscussionDialog,
     DiscussionComposerDialog,
     IntelligentDiscussionRecorderComponent,
@@ -245,14 +497,20 @@ import {GradeService} from './common/services/grade.service';
     ActivityTypeListComponent,
     OverseerImageListComponent,
     ExtensionModalComponent,
+    SpecConModalComponent,
     CalendarModalComponent,
+    ConfirmationModalComponent,
+    DiscussedInClassReasonModalComponent,
     InstitutionSettingsComponent,
+    ProjectPlanComponent,
+    SuccessCloseComponent,
     HomeComponent,
     CommentBubbleActionComponent,
     UnitTutorialsListComponent,
     UnitTutorialsManagerComponent,
     FileDropComponent,
     UnitStudentsEditorComponent,
+    StudentsListComponent,
     UnitTaskEditorComponent,
     TaskDefinitionEditorComponent,
     TaskDefinitionGeneralComponent,
@@ -262,16 +520,19 @@ import {GradeService} from './common/services/grade.service';
     TaskDefinitionOptionsComponent,
     TaskDefinitionResourcesComponent,
     TaskDefinitionOverseerComponent,
+    TaskDefinitionScormComponent,
     UnitAnalyticsComponent,
     StudentTutorialSelectComponent,
     StudentCampusSelectComponent,
     TaskListItemComponent,
     CreatePortfolioTaskListItemComponent,
     TaskDescriptionCardComponent,
+    PpiWidgetComponent,
     StatusIconComponent,
     TaskCommentsViewerComponent,
     UserIconComponent,
     AudioPlayerComponent,
+    ProjectProgressDashboardComponent,
     MarkedPipe,
     HumanizedDatePipe,
     IsActiveUnitRole,
@@ -280,7 +541,10 @@ import {GradeService} from './common/services/grade.service';
     SafePipe,
     PdfViewerPanelComponent,
     StaffTaskListComponent,
+    BatchFeedbackWorkflowDialogComponent,
     TaskSimilarityViewComponent,
+    TasksForGroupsetPipe,
+    OrderByPipe,
     FiltersPipe,
     TasksOfTaskDefinitionPipe,
     TasksInTutorialsPipe,
@@ -288,11 +552,16 @@ import {GradeService} from './common/services/grade.service';
     StatusIconComponent,
     TaskAssessmentCommentComponent,
     TaskAssessmentModalComponent,
-    TaskSubmissionHistoryComponent,
+    GradeIconComponent,
     HeaderComponent,
     UnitDropdownComponent,
     TaskDropdownComponent,
+    NotificationBellComponent,
     SplashScreenComponent,
+    SubmissionFilesDownloadComponent,
+    ProjectDashboardComponent,
+    GradeIconComponent,
+    GradeTaskModalComponent,
     ObjectSelectComponent,
     WelcomeComponent,
     AcceptEulaComponent,
@@ -304,30 +573,135 @@ import {GradeService} from './common/services/grade.service';
     TaskStatusCardComponent,
     TaskDueCardComponent,
     FooterComponent,
+    PageContainerComponent,
     TaskAssessmentCardComponent,
     TaskSubmissionCardComponent,
     TaskDashboardComponent,
     InboxComponent,
+    InboxDashboardComponent,
     ProjectProgressBarComponent,
     TeachingPeriodListComponent,
     CreateNewUnitModal,
     CreateNewUnitModalContentComponent,
     TiiActionLogComponent,
     FChipComponent,
+    ProjectCardComponent,
     UnitCodeComponent,
     NewTeachingPeriodDialogComponent,
     FileViewerComponent,
+    ArchiveViewerComponent,
     AlertComponent,
     FUnitTaskListComponent,
     FTaskDetailsViewComponent,
     FTaskSheetViewComponent,
-    TasksViewerComponent,
+    UnitRootStateComponent,
+    ProjectRootStateComponent,
+    TaskViewerStateComponent,
     FUsersComponent,
+    ProjectProgressGaugeComponent,
     FTaskBadgeComponent,
     FUnitsComponent,
+    CommentsModalComponent,
+    UnauthorisedComponent,
+    TimeoutComponent,
+    ChartBaseComponent,
+    ProgressBurndownChartComponent,
+    TaskVisualisationComponent,
+    ScormPlayerComponent,
+    NotificationsPageComponent,
+    ScormCommentComponent,
+    TaskScormCardComponent,
+    ScormExtensionCommentComponent,
+    ScormExtensionModalComponent,
+    UnitAdminStateComponent,
+    FeedbackTemplateEditorComponent,
+    LearningOutcomeEditorComponent,
+    TaskFeedbackTemplatesComponent,
+    NestedCsvDownloadModalComponent,
+    TutorDiscussionComponent,
+    TaskIlosCardComponent,
+    JplagReportViewerComponent,
+    StaffNotesComponent,
+    StaffNotesViewComponent,
+    QrModalComponent,
+    LocalizedDatePipe,
+    SubmissionTypeModalComponent,
+    SidekiqProgressModalComponent,
+    SidekiqJobsModalComponent,
+    UnavailableCardComponent,
+    LtiDashboardComponent,
+    LtiUnitLinkComponent,
+    TaskDefinitionPrerequisitesComponent,
+    TaskPrerequisitesCardComponent,
+    UnitStaffEditorComponent,
+    BulkImportStaffModalComponent,
+    GroupSetSelectorComponent,
+    UnitDetailsEditorComponent,
+    PortfolioGradeSelectStepComponent,
+    AnalyticsTutorTimesComponent,
+    PortfolioIncludedTasksComponent,
+    PortfolioReviewStepComponent,
+    OverseerScriptEditorModalComponent,
+    UploadGradesComponent,
+    DiscussionPromptsComponent,
+    TaskDefinitionDiscussionPromptsComponent,
+    DiscussionPromptsViewComponent,
+    TaskPlannerComponent,
+    DownloadStaffNotesComponent,
+    TaskPlannerCardComponent,
+    DownloadFilterDialogComponent,
+    TaskPlannerPrerequisitesModalComponent,
+    TaskOverseerReportComponent,
+    SubmissionFilesModalComponent,
+    TutorNotesComponent,
+    TutorNotesViewComponent,
+    ModerationComponent,
+    TutorNotesModalComponent,
+    FeedbackAppealModalComponent,
+    UploadSubmissionModalComponent,
+    ConfirmModerationModalComponent,
+    TaskClaimComponent,
+    ChangeTargetGradeActionComponent,
+    CommunicationActionsComponent,
+    CommunicationConditionsComponent,
+    CommunicationScheduleModalComponent,
+    CommunicationSchedulesComponent,
+    EmailStaffActionComponent,
+    EmailStudentActionComponent,
+    TaskCommentActionComponent,
+    UnitCommunicationsEditorComponent,
+    TutorialsComponent,
+    UnitStaffEditorComponent,
+    PortfolioGradeSelectStepComponent,
+    GroupMemberListComponent,
+    GroupSelectorComponent,
+    GroupSetManagerComponent,
+    FileUploaderComponent,
+    TaskUploadRequirementsComponent,
+    PortfolioWelcomeStepComponent,
+    PortfolioLearningSummaryReportStepComponent,
+    PortfolioAddExtraFilesStepComponent,
+    PortfolioStateComponent,
+    PortfoliosComponent,
+    PortfoliosListComponent,
+    PortfoliosProjectProgressComponent,
+    PortfoliosPortfolioViewComponent,
+    PortfoliosAssessmentComponent,
+    UnitGroupsComponent,
+    RolloverComponent,
+    ProjectGroupsComponent,
+    ProjectGroupsStateComponent,
+    GroupMemberContributionAssignerComponent,
+    CsvResultModalComponent,
+    CsvUploadModalComponent,
+    UnitGroupSetEditorComponent,
+    UnitTaskInboxStateComponent,
+    LegacyRoutePlaceholderComponent,
+    NotificationSettingsComponent,
+    ThemeSettingsComponent,
   ],
-  // Services we provide
   providers: [
+    // Services we provide
     AlertService,
     MarkedPipe,
     CampusService,
@@ -335,6 +709,7 @@ import {GradeService} from './common/services/grade.service';
     GroupSetService,
     GroupService,
     UnitService,
+    D2lAssessmentMappingService,
     ProjectService,
     UnitRoleService,
     LearningOutcomeService,
@@ -353,29 +728,19 @@ import {GradeService} from './common/services/grade.service';
     ActivityTypeService,
     OverseerImageService,
     OverseerAssessmentService,
+    SubmissionHistoryService,
     EmojiService,
     FileDownloaderService,
     CheckForUpdateService,
+    InstallPromptService,
     TaskOutcomeAlignmentService,
-    visualisationsProvider,
-    commentsModalProvider,
-    rootScopeProvider,
-    calendarModalProvider,
-    aboutDoubtfireModalProvider,
-    uploadSubmissionModalProvider,
-    gradeTaskModalProvider,
-    analyticsServiceProvider,
-    dateServiceProvider,
-    CsvUploadModalProvider,
-    CsvResultModalProvider,
-    {provide: MAT_DATE_LOCALE, useValue: 'en-AU'},
-    UnitStudentEnrolmentModalProvider,
+    // rootScopeProvider,
+    {provide: MAT_DATE_LOCALE, useValue: enAU},
+    {provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE]},
+    {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT},
     TaskCommentService,
-    AudioRecorderProvider,
-    AudioRecorderServiceProvider,
-    plagiarismReportModalProvider,
-    UnitStudentsEditorComponent,
-    ConfirmationModalProvider,
+    EngagementCommentService,
+    EngagementService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpAuthenticationInterceptor,
@@ -390,26 +755,76 @@ import {GradeService} from './common/services/grade.service';
     },
     AboutDoubtfireModal,
     AboutDoubtfireModalService,
+    SpecConModalService,
     DoubtfireConstants,
     TasksOfTaskDefinitionPipe,
     TasksInTutorialsPipe,
     TasksForInboxSearchPipe,
     IsActiveUnitRole,
+    D2lUnitDetailsModal,
+    D2lTransferModal,
     CreateNewUnitModal,
+    ScormAdapterService,
+    TestAttemptService,
+    PrivacyPolicy,
     provideLottieOptions({
       player: () => player,
     }),
+    FeedbackTemplateService,
+    NestedCsvDownloadModalService,
+    StaffNoteService,
+    SidekiqJobService,
+    LtiService,
+    TaskPrerequisiteService,
+    MarkingSessionService,
+    DiscussionPromptService,
+    GANTT_CHART_LOCALE_CONFIG,
+    GANTT_CHART_CONFIG,
+    TaskPlannerPrerequisitesModalService,
+    OverseerStepService,
+    OverseerStepResultService,
+    TutorNoteService,
+    CommunicationActionService,
+    CommunicationConditionService,
+    CommunicationRuleService,
+    CommunicationSetService,
+    CsvResultModalService,
+    CsvUploadModalService,
+    {
+      provide: ErrorHandler,
+      useValue: Sentry.createErrorHandler(),
+    },
+    {
+      provide: Sentry.TraceService,
+      deps: [Router],
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true,
+    },
+    {
+      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+      useValue: DEFAULT_TOOLTIP_OPTIONS,
+    },
   ],
   imports: [
+    ThemeToggleComponent,
     FlexLayoutModule,
     BrowserModule,
     BrowserAnimationsModule,
+    DemoToolsModule,
+    RouterModule.forRoot(routes, {
+      initialNavigation: 'enabledNonBlocking',
+    }),
     FormsModule,
     HttpClientModule,
     ClipboardModule,
     DragDropModule,
     ScrollingModule,
     MatToolbarModule,
+    MatSidenavModule,
     MatFormFieldModule,
     MatAutocompleteModule,
     MatInputModule,
@@ -437,46 +852,52 @@ import {GradeService} from './common/services/grade.service';
     MatSliderModule,
     MatDatepickerModule,
     MatExpansionModule,
-    MatCardModule,
     MatGridListModule,
-    MatSelectModule,
-    MatToolbarModule,
     MatTabsModule,
-    UpgradeModule,
+    MatTreeModule,
     MatTableModule,
-    MatTabsModule,
     MatChipsModule,
     MatSnackBarModule,
     ReactiveFormsModule,
     PickerModule,
     EmojiModule,
+    NgxChartsModule,
     PdfViewerModule,
     LottieComponent,
-    UIRouterUpgradeModule.forRoot({states: doubtfireStates}),
     ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
+      // Push notifications need the worker running in development too, so this
+      // is a flag rather than just `environment.production`. See
+      // docs/service-worker.md for how to turn it off and how to clear a stuck
+      // worker.
+      enabled: environment.production || environment.enableServiceWorker,
+
+      // Registration happens six seconds after bootstrap, not at bootstrap.
+      // Anything that asks for the worker during app init finds nothing there.
       registrationStrategy: () => interval(6000).pipe(take(1)),
     }),
-    MatDatepickerModule,
-    MatNativeDateModule,
-    MatDialogModuleNew,
+    CalendarModule.forRoot({provide: CalendarDateAdapter, useFactory: adapterFactory}),
+    CodeEditorModule.forRoot(),
+    NgxGanttModule,
+    MonacoEditorModule.forRoot(),
+    MatChipListbox,
+    NgxSkeletonLoaderModule,
   ],
+  bootstrap: [AppComponent],
 })
 
 // There is no longer any requirement for an EntryComponents section
 // since Angular 9 introduced the IVY renderer
-export class DoubtfireAngularModule implements DoBootstrap {
+export class DoubtfireAngularModule {
   constructor(
     injector: Injector,
-    private upgrade: UpgradeModule,
     private constants: DoubtfireConstants,
     private title: Title,
     private updater: CheckForUpdateService,
+    private installer: InstallPromptService,
     private matIconRegistry: MatIconRegistry,
     private domSanitizer: DomSanitizer,
   ) {
     setAppInjector(injector);
-    setTheme('bs3'); // or 'bs4'
 
     this.constants.ExternalName.subscribe((result) => {
       this.title.setTitle(result);
@@ -487,11 +908,4 @@ export class DoubtfireAngularModule implements DoBootstrap {
       this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/logo.svg'),
     );
   }
-
-  ngDoBootstrap(): void {
-    this.upgrade.bootstrap(document.body, [DoubtfireAngularJSModule.name], {
-      strictDi: false,
-    });
-    AppInjector.get(TransitionHooksService);
-  }
 }
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
deleted file mode 100644
index 868e381213..0000000000
--- a/src/app/doubtfire-angularjs.module.ts
+++ /dev/null
@@ -1,478 +0,0 @@
-// #
-// # Doubtfire - A lightweight, modern learning management system
-// #
-// # Doubtfire is modularised into many modules, as indicated by the directory
-// # tree inside app/
-// #
-
-import * as angular from 'angular';
-import {downgradeInjectable, downgradeComponent} from '@angular/upgrade/static';
-
-// Here are the old angular node modules, previously loaded via grunt
-//#region
-import 'angular-cookies/angular-cookies.js';
-import 'angular-local-storage/dist/angular-local-storage.js';
-import 'angular-resource/angular-resource.js';
-import 'angular-ui-bootstrap/ui-bootstrap-tpls.js';
-import 'angular-nvd3/dist/angular-nvd3.js';
-import 'angular-file-upload/angular-file-upload.js';
-import 'ng-file-upload/dist/ng-file-upload-all.min.js';
-import 'angular-sanitize/angular-sanitize.js';
-import 'ng-csv/build/ng-csv.js';
-import 'angular-xeditable/dist/js/xeditable.js';
-import 'angular-filter/dist/angular-filter.js';
-import 'angular-ui-codemirror/src/ui-codemirror.js';
-import 'angular-markdown-filter/markdown.js';
-import 'angulartics/dist/angulartics.min.js';
-import 'angulartics-google-analytics/lib/angulartics-google-analytics.js';
-import 'angular-md5/angular-md5.js';
-
-// Ok... here is what we need to convert!
-
-import 'build/templates-app.js';
-import 'build/assets/wav-worker.js';
-import 'build/src/app/visualisations/summary-task-status-scatter.js';
-import 'build/src/app/visualisations/student-task-status-pie-chart.js';
-import 'build/src/app/visualisations/progress-burndown-chart.js';
-import 'build/src/app/visualisations/target-grade-pie-chart.js';
-import 'build/src/app/visualisations/task-status-pie-chart.js';
-import 'build/src/app/visualisations/task-completion-box-plot.js';
-import 'build/src/app/visualisations/visualisations.js';
-import 'build/src/app/visualisations/alignment-bullet-chart.js';
-import 'build/src/app/visualisations/achievement-custom-bar-chart.js';
-import 'build/src/app/visualisations/alignment-bar-chart.js';
-import 'build/src/app/visualisations/achievement-box-plot.js';
-import 'build/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.js';
-import 'build/src/app/tasks/modals/grade-task-modal/grade-task-modal.js';
-import 'build/src/app/tasks/modals/modals.js';
-import 'build/src/app/tasks/tasks.js';
-import 'build/src/app/tasks/project-tasks-list/project-tasks-list.js';
-import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment.js';
-import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.js';
-import 'build/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.js';
-import 'build/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.js';
-import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.js';
-import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.js';
-import 'build/src/app/config/privacy-policy/privacy-policy.js';
-import 'build/src/app/config/runtime/runtime.js';
-import 'build/src/app/config/config.js';
-import 'build/src/app/config/root-controller/root-controller.js';
-import 'build/src/app/config/local-storage/local-storage.js';
-import 'build/src/app/config/routing/routing.js';
-import 'build/src/app/config/vendor-dependencies/vendor-dependencies.js';
-import 'build/src/app/config/analytics/analytics.js';
-import 'build/src/app/config/debug/debug.js';
-import 'build/src/app/projects/projects.js';
-import 'build/src/app/projects/project-progress-dashboard/project-progress-dashboard.js';
-import 'build/src/app/projects/states/groups/groups.js';
-import 'build/src/app/projects/states/feedback/feedback.js';
-import 'build/src/app/projects/states/states.js';
-import 'build/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.js';
-import 'build/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.js';
-import 'build/src/app/projects/states/dashboard/directives/directives.js';
-import 'build/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.js';
-import 'build/src/app/projects/states/dashboard/dashboard.js';
-import 'build/src/app/projects/states/outcomes/outcomes.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.js';
-import 'build/src/app/projects/states/portfolio/directives/directives.js';
-import 'build/src/app/projects/states/portfolio/portfolio.js';
-import 'build/src/app/projects/states/index/index.js';
-import 'build/src/app/projects/states/tutorials/tutorials.js';
-import 'build/src/app/projects/project-outcome-alignment/project-outcome-alignment.js';
-import 'build/src/app/admin/modals/modals.js';
-import 'build/src/app/admin/modals/create-unit-modal/create-unit-modal.js';
-import 'build/src/app/groups/group-selector/group-selector.js';
-import 'build/src/app/groups/group-set-manager/group-set-manager.js';
-import 'build/src/app/groups/groups.js';
-import 'build/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.js';
-import 'build/src/app/groups/group-member-list/group-member-list.js';
-import 'build/src/app/groups/group-set-selector/group-set-selector.js';
-import 'build/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.js';
-import 'build/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.js';
-import 'build/src/app/units/modals/modals.js';
-import 'build/src/app/units/units.js';
-import 'build/src/app/units/states/tasks/inbox/inbox.js';
-import 'build/src/app/units/states/tasks/tasks.js';
-import 'build/src/app/units/states/tasks/viewer/directives/directives.js';
-import 'build/src/app/units/states/tasks/viewer/viewer.js';
-import 'build/src/app/units/states/tasks/definition/definition.js';
-import 'build/src/app/units/states/portfolios/portfolios.js';
-import 'build/src/app/units/states/groups/groups.js';
-import 'build/src/app/units/states/states.js';
-import 'build/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.js';
-import 'build/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.js';
-import 'build/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.js';
-import 'build/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.js';
-import 'build/src/app/units/states/edit/directives/directives.js';
-import 'build/src/app/units/states/edit/edit.js';
-import 'build/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.js';
-import 'build/src/app/units/states/rollover/directives/directives.js';
-import 'build/src/app/units/states/rollover/rollover.js';
-import 'build/src/app/units/states/index/index.js';
-import 'build/src/app/units/states/students-list/students-list.js';
-import 'build/src/app/units/states/analytics/analytics.js';
-import 'build/src/app/common/filters/filters.js';
-import 'build/src/app/common/content-editable/content-editable.js';
-import 'build/src/app/common/modals/confirmation-modal/confirmation-modal.js';
-import 'build/src/app/common/modals/comments-modal/comments-modal.js';
-import 'build/src/app/common/modals/csv-result-modal/csv-result-modal.js';
-import 'build/src/app/common/modals/modals.js';
-import 'build/src/app/common/grade-icon/grade-icon.js';
-import 'build/src/app/common/file-uploader/file-uploader.js';
-import 'build/src/app/common/common.js';
-import 'build/src/app/common/services/listener-service.js';
-import 'build/src/app/common/services/outcome-service.js';
-import 'build/src/app/common/services/services.js';
-import 'build/src/app/common/services/recorder-service.js';
-import 'build/src/app/common/services/media-service.js';
-import 'build/src/app/common/services/analytics-service.js';
-import 'build/src/app/common/services/date-service.js';
-import 'build/src/app/sessions/auth/http-auth-injector.js';
-import 'build/src/app/sessions/sessions.js';
-import 'build/src/app/errors/errors.js';
-import 'build/src/app/errors/states/unauthorised/unauthorised.js';
-import 'build/src/app/errors/states/timeout/timeout.js';
-import 'build/src/app/errors/states/states.js';
-import 'build/src/common/utilService/utilService.js';
-import 'build/src/common/i18n/localize.js';
-import 'build/src/i18n/resources-locale_default.js';
-import 'build/src/i18n/resources-locale_en-US.js';
-import 'build/src/i18n/resources-locale_en-AU.js';
-import 'build/src/i18n/resources-locale_en-GB.js';
-//#endregion
-
-import {AboutDoubtfireModal} from 'src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component';
-import {TaskCommentComposerComponent} from 'src/app/tasks/task-comment-composer/task-comment-composer.component';
-import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
-import {IntelligentDiscussionPlayerComponent} from './tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component';
-import {ExtensionCommentComponent} from './tasks/task-comments-viewer/extension-comment/extension-comment.component';
-import {TaskAssessmentCommentComponent} from './tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component';
-import {ExtensionModalService} from './common/modals/extension-modal/extension-modal.service';
-import {CalendarModalService} from './common/modals/calendar-modal/calendar-modal.service';
-import {CampusListComponent} from './admin/institution-settings/campuses/campus-list/campus-list.component';
-import {ActivityTypeListComponent} from './admin/institution-settings/activity-type-list/activity-type-list.component';
-import {InstitutionSettingsComponent} from './admin/institution-settings/institution-settings.component';
-import {CommentBubbleActionComponent} from './tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component';
-import {UnitTutorialsListComponent} from './units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component';
-import {UnitTutorialsManagerComponent} from './units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component';
-import {TutorialService} from './api/services/tutorial.service';
-import {TutorialStreamService} from './api/services/tutorial-stream.service';
-import {UnitStudentsEditorComponent} from './units/states/edit/directives/unit-students-editor/unit-students-editor.component';
-import {CampusService} from './api/services/campus.service';
-import {WebcalService} from './api/services/webcal.service';
-import {StudentTutorialSelectComponent} from './units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component';
-import {StudentCampusSelectComponent} from './units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component';
-import {EmojiService} from './common/services/emoji.service';
-import {TaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component';
-import {CreatePortfolioTaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component';
-import {TaskDescriptionCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component';
-import {TaskCommentsViewerComponent} from './tasks/task-comments-viewer/task-comments-viewer.component';
-import {UserIconComponent} from './common/user-icon/user-icon.component';
-import {fPdfViewerComponent} from './common/pdf-viewer/pdf-viewer.component';
-import {PdfViewerPanelComponent} from './common/pdf-viewer-panel/pdf-viewer-panel.component';
-import {StaffTaskListComponent} from './units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component';
-import {StatusIconComponent} from './common/status-icon/status-icon.component';
-import {
-  GroupSetService,
-  LearningOutcomeService,
-  TaskCommentService,
-  TaskOutcomeAlignmentService,
-  TaskService,
-  TeachingPeriodService,
-  UnitRoleService,
-  UnitService,
-  UserService,
-} from './api/models/doubtfire-model';
-import {FileDownloaderService} from './common/file-downloader/file-downloader.service';
-import {CheckForUpdateService} from './sessions/service-worker-updater/check-for-update.service';
-import {TaskSubmissionService} from './common/services/task-submission.service';
-import {TaskAssessmentModalService} from './common/modals/task-assessment-modal/task-assessment-modal.service';
-import {TaskSubmissionHistoryComponent} from './tasks/task-submission-history/task-submission-history.component';
-import {HeaderComponent} from './common/header/header.component';
-import {SplashScreenComponent} from './home/splash-screen/splash-screen.component';
-import {GlobalStateService} from './projects/states/index/global-state.service';
-import {TransitionHooksService} from './sessions/transition-hooks.service';
-import {AuthenticationService} from './api/services/authentication.service';
-import {ProjectService} from './api/services/project.service';
-import {ObjectSelectComponent} from './common/obect-select/object-select.component';
-import {TaskDefinitionService} from './api/services/task-definition.service';
-import {EditProfileDialogService} from './common/modals/edit-profile-dialog/edit-profile-dialog.service';
-import {GroupService} from './api/services/group.service';
-import {UserBadgeComponent} from './common/user-badge/user-badge.component';
-import {TaskStatusCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component';
-import {TaskDueCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component';
-import {FooterComponent} from './common/footer/footer.component';
-import {TaskAssessmentCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component';
-import {TaskSubmissionCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component';
-import {InboxComponent} from './units/states/tasks/inbox/inbox.component';
-import {TaskDefinitionEditorComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component';
-import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
-import {UnitTaskEditorComponent} from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
-import {TeachingPeriodUnitImportService} from './admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog';
-import {CreateNewUnitModal} from './admin/modals/create-new-unit-modal/create-new-unit-modal.component';
-import {FUsersComponent} from './admin/states/f-users/f-users.component';
-import {FUnitTaskListComponent} from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
-import {FTaskDetailsViewComponent} from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
-import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
-import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
-
-import {FUnitsComponent} from './admin/states/f-units/f-units.component';
-import {MarkedPipe} from './common/pipes/marked.pipe';
-import {AlertService} from './common/services/alert.service';
-import {GradeService} from './common/services/grade.service';
-export const DoubtfireAngularJSModule = angular.module('doubtfire', [
-  'doubtfire.config',
-  'doubtfire.sessions',
-  'doubtfire.common',
-  'doubtfire.errors',
-  'doubtfire.units',
-  'doubtfire.tasks',
-  'doubtfire.projects',
-  'doubtfire.groups',
-  'doubtfire.visualisations',
-]);
-
-// Downgrade angular modules that we need...
-// factory -> service
-DoubtfireAngularJSModule.factory('AboutDoubtfireModal', downgradeInjectable(AboutDoubtfireModal));
-DoubtfireAngularJSModule.factory(
-  'TeachingPeriodUnitImportService',
-  downgradeInjectable(TeachingPeriodUnitImportService),
-);
-DoubtfireAngularJSModule.factory('DoubtfireConstants', downgradeInjectable(DoubtfireConstants));
-DoubtfireAngularJSModule.factory('ExtensionModal', downgradeInjectable(ExtensionModalService));
-DoubtfireAngularJSModule.factory('Marked', downgradeInjectable(MarkedPipe));
-DoubtfireAngularJSModule.factory('CalendarModal', downgradeInjectable(CalendarModalService));
-DoubtfireAngularJSModule.factory('TaskCommentService', downgradeInjectable(TaskCommentService));
-DoubtfireAngularJSModule.factory('alertService', downgradeInjectable(AlertService));
-DoubtfireAngularJSModule.factory('tutorialService', downgradeInjectable(TutorialService));
-DoubtfireAngularJSModule.factory('streamService', downgradeInjectable(TutorialStreamService));
-DoubtfireAngularJSModule.factory('campusService', downgradeInjectable(CampusService));
-DoubtfireAngularJSModule.factory(
-  'authenticationService',
-  downgradeInjectable(AuthenticationService),
-);
-DoubtfireAngularJSModule.factory('newUserService', downgradeInjectable(UserService));
-DoubtfireAngularJSModule.factory('newUnitService', downgradeInjectable(UnitService));
-DoubtfireAngularJSModule.factory('newUnitRoleService', downgradeInjectable(UnitRoleService));
-DoubtfireAngularJSModule.factory('newTaskService', downgradeInjectable(TaskService));
-DoubtfireAngularJSModule.factory(
-  'newTaskDefinitionService',
-  downgradeInjectable(TaskDefinitionService),
-);
-DoubtfireAngularJSModule.factory(
-  'newTeachingPeriodService',
-  downgradeInjectable(TeachingPeriodService),
-);
-DoubtfireAngularJSModule.factory('newProjectService', downgradeInjectable(ProjectService));
-DoubtfireAngularJSModule.factory('newGroupService', downgradeInjectable(GroupService));
-DoubtfireAngularJSModule.factory('newGroupSetService', downgradeInjectable(GroupSetService));
-DoubtfireAngularJSModule.factory(
-  'newTaskOutcomeAlignmentService',
-  downgradeInjectable(TaskOutcomeAlignmentService),
-);
-DoubtfireAngularJSModule.factory('webcalService', downgradeInjectable(WebcalService));
-DoubtfireAngularJSModule.factory(
-  'newLearningOutcomeService',
-  downgradeInjectable(LearningOutcomeService),
-);
-DoubtfireAngularJSModule.factory('emojiService', downgradeInjectable(EmojiService));
-DoubtfireAngularJSModule.factory('gradeService', downgradeInjectable(GradeService));
-DoubtfireAngularJSModule.factory(
-  'fileDownloaderService',
-  downgradeInjectable(FileDownloaderService),
-);
-DoubtfireAngularJSModule.factory(
-  'checkForUpdateService',
-  downgradeInjectable(CheckForUpdateService),
-);
-DoubtfireAngularJSModule.factory(
-  'TaskAssessmentModal',
-  downgradeInjectable(TaskAssessmentModalService),
-);
-DoubtfireAngularJSModule.factory('TaskSubmission', downgradeInjectable(TaskSubmissionService));
-DoubtfireAngularJSModule.factory('GlobalStateService', downgradeInjectable(GlobalStateService));
-DoubtfireAngularJSModule.factory(
-  'TransitionHooksService',
-  downgradeInjectable(TransitionHooksService),
-);
-DoubtfireAngularJSModule.factory(
-  'EditProfileService',
-  downgradeInjectable(EditProfileDialogService),
-);
-DoubtfireAngularJSModule.factory('CreateNewUnitModal', downgradeInjectable(CreateNewUnitModal));
-
-// directive -> component
-DoubtfireAngularJSModule.directive(
-  'taskCommentComposer',
-  downgradeComponent({component: TaskCommentComposerComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'objectSelect',
-  downgradeComponent({component: ObjectSelectComponent}),
-);
-DoubtfireAngularJSModule.directive('appHeader', downgradeComponent({component: HeaderComponent}));
-DoubtfireAngularJSModule.directive(
-  'splashScreen',
-  downgradeComponent({component: SplashScreenComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'userBadge',
-  downgradeComponent({component: UserBadgeComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fTaskSubmissionCard',
-  downgradeComponent({component: TaskSubmissionCardComponent}),
-);
-
-DoubtfireAngularJSModule.directive('fFooter', downgradeComponent({component: FooterComponent}));
-DoubtfireAngularJSModule.directive(
-  'intelligentDiscussionPlayer',
-  downgradeComponent({component: IntelligentDiscussionPlayerComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fUnitAnalytics',
-  downgradeComponent({component: UnitAnalyticsComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'extensionComment',
-  downgradeComponent({component: ExtensionCommentComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fUnitTaskList',
-  downgradeComponent({component: FUnitTaskListComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fTaskDetailsView',
-  downgradeComponent({component: FTaskDetailsViewComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fTaskSheetView',
-  downgradeComponent({component: FTaskSheetViewComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'campusList',
-  downgradeComponent({component: CampusListComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'activityTypeList',
-  downgradeComponent({component: ActivityTypeListComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fTaskStatusCard',
-  downgradeComponent({component: TaskStatusCardComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fTasksViewer',
-  downgradeComponent({component: TasksViewerComponent}),
-);
-DoubtfireAngularJSModule.directive('fInbox', downgradeComponent({component: InboxComponent}));
-DoubtfireAngularJSModule.directive(
-  'fTaskDueCard',
-  downgradeComponent({component: TaskDueCardComponent}),
-);
-DoubtfireAngularJSModule.directive('fUsers', downgradeComponent({component: FUsersComponent}));
-DoubtfireAngularJSModule.directive(
-  'fTaskAssessmentCard',
-  downgradeComponent({component: TaskAssessmentCardComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'institutionSettings',
-  downgradeComponent({component: InstitutionSettingsComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'commentBubbleAction',
-  downgradeComponent({component: CommentBubbleActionComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'unitTutorialsList',
-  downgradeComponent({component: UnitTutorialsListComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'unitTutorialsManager',
-  downgradeComponent({component: UnitTutorialsManagerComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'unitStudentsEditor',
-  downgradeComponent({component: UnitStudentsEditorComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fTaskDefinitionEditor',
-  downgradeComponent({component: TaskDefinitionEditorComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'fUnitTaskEditor',
-  downgradeComponent({component: UnitTaskEditorComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'studentTutorialSelect',
-  downgradeComponent({component: StudentTutorialSelectComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'studentCampusSelect',
-  downgradeComponent({component: StudentCampusSelectComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'taskListItem',
-  downgradeComponent({component: TaskListItemComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'createPortfolioTaskListItem',
-  downgradeComponent({component: CreatePortfolioTaskListItemComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'taskDescriptionCard',
-  downgradeComponent({component: TaskDescriptionCardComponent}),
-);
-
-DoubtfireAngularJSModule.directive(
-  'taskAssessmentComment',
-  downgradeComponent({component: TaskAssessmentCommentComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'taskSubmissionHistory',
-  downgradeComponent({component: TaskSubmissionHistoryComponent}),
-);
-DoubtfireAngularJSModule.directive('fUnits', downgradeComponent({component: FUnitsComponent}));
-
-// Global configuration
-DoubtfireAngularJSModule.directive(
-  'taskCommentsViewer',
-  downgradeComponent({component: TaskCommentsViewerComponent}),
-);
-DoubtfireAngularJSModule.directive('userIcon', downgradeComponent({component: UserIconComponent}));
-DoubtfireAngularJSModule.directive(
-  'fPdfViewer',
-  downgradeComponent({component: fPdfViewerComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'pdfViewerPanel',
-  downgradeComponent({component: PdfViewerPanelComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'staffTaskList',
-  downgradeComponent({component: StaffTaskListComponent}),
-);
-DoubtfireAngularJSModule.directive(
-  'statusIcon',
-  downgradeComponent({component: StatusIconComponent}),
-);
-DoubtfireAngularJSModule.directive('newFUnits', downgradeComponent({component: FUnitsComponent}));
-
-// Global configuration
-
-// If the user enters a URL that doesn't match any known URL (state), send them to `/home`
-const otherwiseConfigBlock = [
-  '$urlRouterProvider',
-  '$locationProvider',
-  ($urlRouterProvider, $locationProvider) => {
-    $locationProvider.hashPrefix('');
-    $urlRouterProvider.otherwise('/home');
-  },
-];
-DoubtfireAngularJSModule.config(otherwiseConfigBlock);
diff --git a/src/app/doubtfire.states.ts b/src/app/doubtfire.states.ts
deleted file mode 100644
index b9f95e88af..0000000000
--- a/src/app/doubtfire.states.ts
+++ /dev/null
@@ -1,309 +0,0 @@
-import {NgHybridStateDeclaration} from '@uirouter/angular-hybrid';
-import {InstitutionSettingsComponent} from './admin/institution-settings/institution-settings.component';
-import {HomeComponent} from './home/states/home/home.component';
-import {WelcomeComponent} from './welcome/welcome.component';
-import {SignInComponent} from './sessions/states/sign-in/sign-in.component';
-import {EditProfileComponent} from './account/edit-profile/edit-profile.component';
-import {TeachingPeriodListComponent} from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
-import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
-import {FUsersComponent} from './admin/states/f-users/f-users.component';
-import {FUnitsComponent} from './admin/states/f-units/f-units.component';
-
-/*
- * Use this file to store any states that are sourced by angular components.
- */
-
-/**
- * Define the institution settings state - used to edit campus data.
- */
-const institutionSettingsState: NgHybridStateDeclaration = {
-  name: 'institutionsettings', // This is the name of the state to jump to - so ui-sref="institutionsettings" to jump here
-  url: '/admin/institution-settings', // You get here with this url
-  views: {
-    main: {
-      // Main body links to angular component
-      component: InstitutionSettingsComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Institution Settings',
-    roleWhiteList: ['Admin'],
-  },
-};
-
-const usersState: NgHybridStateDeclaration = {
-  name: 'admin/users', // This is the name of the state to jump to - so ui-sref="users" to jump here
-  url: '/admin/users', // You get here with this url
-  views: {
-    main: {
-      // Main body links to angular component
-      component: FUsersComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Administer users',
-    roleWhiteList: ['Admin'],
-  },
-};
-
-/**
- * Define the new home state.
- */
-const HomeState: NgHybridStateDeclaration = {
-  name: 'home',
-  url: '/home',
-  views: {
-    main: {
-      component: HomeComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Home Page',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
-  },
-};
-
-// const unitParentState: NgHybridStateDeclaration = {
-//   name: 'units',
-//   url: '/units/:unit_id',
-//   // template for the parent state
-//   views: {
-//     main: {
-//       component: IndexComponent,
-//     },
-//   },
-//   resolve: {
-//     unit: function ($stateParams) {
-//       const unitService = AppInjector.get(UnitService);
-//       const globalState = AppInjector.get(GlobalStateService);
-//       globalState.onLoad(() => {});
-//       console.log($stateParams);
-//       unitService.query({ id: $stateParams.unit_id }).subscribe((unit) => {
-//         console.log($stateParams.unit_id);
-//         console.log(unit);
-//         return unit;
-//       });
-//     },
-//     unitRole: function ($stateParams) {
-//       const globalStateService = AppInjector.get(GlobalStateService);
-
-//       globalStateService.unitRolesSubject.subscribe((unitRoles) => {
-//         return unitRoles.find((unitRole) => unitRole.id === $stateParams.unit_id);
-//       });
-//     },
-//   },
-// };
-
-/**
- * Define the new home state.
- */
-// const InboxState: NgHybridStateDeclaration = {
-//   name: 'inbox',
-//   url: '/units/:unit_id/inbox/:task_key',
-
-//   params: {
-//     // unitRole: UnitRole,
-//     // taskKey: null,
-//     // taskData:
-//     // unit,
-//   },
-//   views: {
-//     main: {
-//       component: InboxComponent,
-//     },
-//   },
-//   data: {
-//     task: 'Task Inbox',
-//     pageTitle: '_Home_',
-//     roleWhitelist: ['Tutor', 'Convenor', 'Admin'],
-//   },
-//   resolve: {
-//     unit$: function ($stateParams) {
-//       const unitService = AppInjector.get(UnitService);
-//       const globalState = AppInjector.get(GlobalStateService);
-//       globalState.onLoad(() => {});
-//       console.log($stateParams);
-//       return unitService.get({ id: $stateParams.unit_id });
-//     },
-//     unitRole$: function ($stateParams) {
-//       const globalStateService = AppInjector.get(GlobalStateService);
-
-//       const result = globalStateService.loadedUnitRoles.values.pipe(
-//         map((unitRoles) => unitRoles.find((unitRole) => unitRole.id == $stateParams.unit_id))
-//       );
-//       return result;
-//     },
-//     taskData$: function () {
-//       const taskService = AppInjector.get(TaskService);
-//       const taskData = {
-//         taskKey: null,
-//         source: null,
-//         selectedTask: null,
-//         onSelectedTaskChange: (task) =>{
-//           const taskKey = task?.taskKey()
-//           $scope.taskData.taskKey = taskKey
-//           setTaskKeyAsUrlParams(task);
-//         }
-//       }
-//       taskData.source = taskService.queryTasksForTaskInbox.bind(taskService);
-//       taskData.taskDefMode = false;
-//       return of(taskData);
-//     },
-//   },
-// };
-
-/**
- * Define the welcome state.
- */
-const WelcomeState: NgHybridStateDeclaration = {
-  name: 'welcome',
-  url: '/welcome',
-  views: {
-    main: {
-      component: WelcomeComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Welcome',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
-  },
-};
-
-/**
- * Define the Sign In state.
- */
-const SignInState: NgHybridStateDeclaration = {
-  name: 'sign_in',
-  url: '/sign_in?dest&params&authToken&username',
-  views: {
-    main: {
-      component: SignInComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Sign In',
-  },
-};
-
-/**
- * Define the Edit Profile state.
- */
-const EditProfileState: NgHybridStateDeclaration = {
-  name: 'edit_profile',
-  url: '/edit_profile',
-  views: {
-    main: {
-      component: EditProfileComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Edit Profile',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
-  },
-};
-
-const TeachingPeriodsState: NgHybridStateDeclaration = {
-  name: 'teaching_periods',
-  url: '/admin/teachingperiods',
-  views: {
-    main: {
-      component: TeachingPeriodListComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Teaching Periods',
-    roleWhitelist: ['Convenor', 'Admin'],
-  },
-};
-
-const EulaState: NgHybridStateDeclaration = {
-  name: 'eula',
-  url: '/eula',
-  views: {
-    main: {
-      component: AcceptEulaComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Teaching Periods',
-    roleWhitelist: ['Convenor', 'Admin'],
-  },
-};
-
-const ViewAllProjectsState: NgHybridStateDeclaration = {
-  name: 'view-all-projects',
-  url: '/view-all-projects',
-  resolve: {
-    'mode': function () {
-      return 'student';
-    },
-  },
-  views: {
-    main: {
-      component: FUnitsComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Teaching Periods',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin'],
-  },
-};
-
-const AdministerUnits: NgHybridStateDeclaration = {
-  name: 'admin/units', // This is the name of the state to jump to - so ui-sref="users" to jump here
-  url: '/admin/units', // You get here with this url
-  resolve: {
-    'mode': function () {
-      return 'admin';
-    },
-  },
-  views: {
-    main: {
-      // Main body links to angular component
-      component: FUnitsComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Administer units',
-    roleWhiteList: ['Admin'],
-  },
-};
-
-
-const ViewAllUnits: NgHybridStateDeclaration = {
-  name: 'view-all-units',
-  url: '/view-all-units',
-  // passes 'mode' as @Input to the component
-  resolve: {
-    'mode': function () {
-      return 'tutor';
-    },
-  },
-  views: {
-    main: {
-      component: FUnitsComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Teaching Periods',
-    mode: 'tutor',
-    roleWhitelist: ['Tutor', 'Convenor', 'Admin'],
-  },
-};
-
-/**
- * Export the list of states we have created in angular
- */
-export const doubtfireStates = [
-  institutionSettingsState,
-  TeachingPeriodsState,
-  HomeState,
-  WelcomeState,
-  SignInState,
-  EditProfileState,
-  EulaState,
-  usersState,
-  ViewAllProjectsState,
-  ViewAllUnits,
-  AdministerUnits,
-];
diff --git a/src/app/errors/errors.coffee b/src/app/errors/errors.coffee
deleted file mode 100644
index c3965ecd52..0000000000
--- a/src/app/errors/errors.coffee
+++ /dev/null
@@ -1,6 +0,0 @@
-#
-# Doubtfire errors module
-#
-angular.module("doubtfire.errors", [
-  "doubtfire.errors.states"
-])
diff --git a/src/app/errors/errors.scss b/src/app/errors/errors.scss
deleted file mode 100644
index bb20204bca..0000000000
--- a/src/app/errors/errors.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.error-container {
-  h1 + p {
-    margin-top: 20px;
-  }
-  i {
-    margin-top: 30px;
-    font-size: 100px;
-  }
-}
diff --git a/src/app/errors/states/states.coffee b/src/app/errors/states/states.coffee
deleted file mode 100644
index 4d76d4af26..0000000000
--- a/src/app/errors/states/states.coffee
+++ /dev/null
@@ -1,4 +0,0 @@
-angular.module("doubtfire.errors.states", [
-  "doubtfire.errors.states.timeout"
-  "doubtfire.errors.states.unauthorised"
-])
diff --git a/src/app/errors/states/timeout/timeout.coffee b/src/app/errors/states/timeout/timeout.coffee
deleted file mode 100644
index 2eb125c4dc..0000000000
--- a/src/app/errors/states/timeout/timeout.coffee
+++ /dev/null
@@ -1,20 +0,0 @@
-angular.module("doubtfire.errors.states.timeout", [])
-
-#
-# Define the timeout state
-#
-.config(($stateProvider) ->
-  stateData =
-    url: "/timeout?dest&params"
-    views:
-      main:
-        controller: "TimeoutCtrl"
-        templateUrl: "errors/states/timeout/timeout.tpl.html"
-    data:
-      pageTitle: "_Timeout_"
-  $stateProvider.state "timeout", stateData, 'TimeoutCtrl'
-)
-# this can be removed... timeout should just sign out and redirect to login
-.controller("TimeoutCtrl", (authenticationService) ->
-  authenticationService.signOut(false)
-)
diff --git a/src/app/errors/states/timeout/timeout.component.html b/src/app/errors/states/timeout/timeout.component.html
new file mode 100644
index 0000000000..589e06bc89
--- /dev/null
+++ b/src/app/errors/states/timeout/timeout.component.html
@@ -0,0 +1,7 @@
+<div class="flex flex-col items-center justify-center">
+  <mat-icon class="my-12 scale-[4]">schedule</mat-icon>
+  <h1>Authentication Timeout</h1>
+  <p>Your session has expired and you need to log back in to proceed.</p>
+  <p>Taking you back to the sign in page in a few seconds.</p>
+  <button color="primary" mat-button type="button" (click)="signInAgain()">Sign in again</button>
+</div>
diff --git a/src/app/errors/states/timeout/timeout.component.spec.ts b/src/app/errors/states/timeout/timeout.component.spec.ts
new file mode 100644
index 0000000000..d348e8b049
--- /dev/null
+++ b/src/app/errors/states/timeout/timeout.component.spec.ts
@@ -0,0 +1,26 @@
+import {describe, expect, it, vi} from 'vitest';
+import {TimeoutComponent} from './timeout.component';
+
+describe('TimeoutComponent', () => {
+  it('signs in again immediately when the user asks to', () => {
+    const auth = {signOut: vi.fn()};
+    const component = new TimeoutComponent(auth as never);
+
+    component.signInAgain();
+
+    expect(auth.signOut).toHaveBeenCalledWith(false);
+  });
+
+  it('does not sign the user out twice after they act', () => {
+    vi.useFakeTimers();
+    const auth = {signOut: vi.fn()};
+    const component = new TimeoutComponent(auth as never);
+
+    component.ngOnInit();
+    component.signInAgain();
+    vi.runAllTimers();
+
+    expect(auth.signOut).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
+  });
+});
diff --git a/src/app/errors/states/timeout/timeout.component.ts b/src/app/errors/states/timeout/timeout.component.ts
new file mode 100644
index 0000000000..f006b4463f
--- /dev/null
+++ b/src/app/errors/states/timeout/timeout.component.ts
@@ -0,0 +1,35 @@
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {AuthenticationService} from '../../../api/services/authentication.service';
+
+@Component({
+  selector: 'f-timeout',
+  templateUrl: 'timeout.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TimeoutComponent implements OnInit, OnDestroy {
+  private timeoutHandle: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(private readonly authenticationService: AuthenticationService) {}
+
+  ngOnInit(): void {
+    this.timeoutHandle = setTimeout(() => {
+      this.authenticationService.signOut(false);
+    }, 5000);
+  }
+
+  signInAgain(): void {
+    if (this.timeoutHandle) {
+      clearTimeout(this.timeoutHandle);
+      this.timeoutHandle = null;
+    }
+    this.authenticationService.signOut(false);
+  }
+
+  ngOnDestroy(): void {
+    if (this.timeoutHandle) {
+      clearTimeout(this.timeoutHandle);
+      this.timeoutHandle = null;
+    }
+  }
+}
diff --git a/src/app/errors/states/timeout/timeout.tpl.html b/src/app/errors/states/timeout/timeout.tpl.html
deleted file mode 100644
index 19cf9ee6d0..0000000000
--- a/src/app/errors/states/timeout/timeout.tpl.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="container text-center">
-  <div class="error-container">
-    <i class="fa fa-clock-o"></i>
-    <h1>Authentication Timeout</h1>
-    <p>Your session has expired and you need to log back in to proceed.</p>
-  </div>
-</div>
diff --git a/src/app/errors/states/unauthorised/unauthorised.coffee b/src/app/errors/states/unauthorised/unauthorised.coffee
deleted file mode 100644
index 67d89a38c9..0000000000
--- a/src/app/errors/states/unauthorised/unauthorised.coffee
+++ /dev/null
@@ -1,19 +0,0 @@
-angular.module("doubtfire.errors.states.unauthorised", [])
-
-#
-# Define the unauthorised state
-#
-.config(($stateProvider) ->
-  stateData =
-    url: "/unauthorised"
-    views:
-      main:
-        controller: "UnauthorisedCtrl"
-        templateUrl: "errors/states/unauthorised/unauthorised.tpl.html"
-    data:
-      pageTitle: "_Unauthorised_"
-
-  $stateProvider.state "unauthorised", stateData
-)
-
-.controller("UnauthorisedCtrl", ($scope) ->)
diff --git a/src/app/errors/states/unauthorised/unauthorised.component.html b/src/app/errors/states/unauthorised/unauthorised.component.html
new file mode 100644
index 0000000000..5f1e2da7ac
--- /dev/null
+++ b/src/app/errors/states/unauthorised/unauthorised.component.html
@@ -0,0 +1,8 @@
+<div class="mt-3 flex flex-col items-center justify-center">
+  <mat-icon class="!h-[65px] !w-[65px] !text-[65px]">warning</mat-icon>
+  <h1>Unauthorised</h1>
+  <p>
+    You do not have sufficient permissions to access this resource, or your session has expired.
+  </p>
+  <button color="primary" mat-button type="button" (click)="goBack()">Go back</button>
+</div>
diff --git a/src/app/errors/states/unauthorised/unauthorised.component.scss b/src/app/errors/states/unauthorised/unauthorised.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/errors/states/unauthorised/unauthorised.component.spec.ts b/src/app/errors/states/unauthorised/unauthorised.component.spec.ts
new file mode 100644
index 0000000000..b0902a02aa
--- /dev/null
+++ b/src/app/errors/states/unauthorised/unauthorised.component.spec.ts
@@ -0,0 +1,31 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {Location} from '@angular/common';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {UnauthorisedComponent} from './unauthorised.component';
+
+const emptyProvider = {};
+
+describe('UnauthorisedComponent', () => {
+  let component: UnauthorisedComponent;
+  let fixture: ComponentFixture<UnauthorisedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UnauthorisedComponent],
+      providers: [{provide: Location, useValue: emptyProvider}],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(UnauthorisedComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnauthorisedComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/errors/states/unauthorised/unauthorised.component.ts b/src/app/errors/states/unauthorised/unauthorised.component.ts
new file mode 100644
index 0000000000..da3f9dddb8
--- /dev/null
+++ b/src/app/errors/states/unauthorised/unauthorised.component.ts
@@ -0,0 +1,17 @@
+import {Location} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'unauthorised',
+  templateUrl: 'unauthorised.component.html',
+  styleUrls: ['unauthorised.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnauthorisedComponent {
+  constructor(private location: Location) {}
+
+  goBack() {
+    this.location.back();
+  }
+}
diff --git a/src/app/errors/states/unauthorised/unauthorised.tpl.html b/src/app/errors/states/unauthorised/unauthorised.tpl.html
deleted file mode 100644
index a0f26d25c2..0000000000
--- a/src/app/errors/states/unauthorised/unauthorised.tpl.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="container text-center">
-  <div class="error-container">
-    <i class="fa fa-exclamation-triangle"></i>
-    <h1>Unauthorised</h1>
-    <p>You do not have sufficient permissions to access this resource, or your session has expired.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/errors/unavailable-card/unavailable-card.component.html b/src/app/errors/unavailable-card/unavailable-card.component.html
new file mode 100644
index 0000000000..151f295a19
--- /dev/null
+++ b/src/app/errors/unavailable-card/unavailable-card.component.html
@@ -0,0 +1,10 @@
+<mat-card
+  appearance="outlined"
+  class="maintenance flex size-full max-w-4xl flex-col items-center justify-center gap-9 border-none p-6 select-none"
+>
+  <div class="text-3xl font-black text-gray-600">Temporarily Unavailable</div>
+  <mat-icon class="icon-size text-gray-300">engineering</mat-icon>
+  <div class="font-bold text-gray-500">
+    We apologise for the inconvenience.<br />Please check back again soon.
+  </div>
+</mat-card>
diff --git a/src/app/errors/unavailable-card/unavailable-card.component.scss b/src/app/errors/unavailable-card/unavailable-card.component.scss
new file mode 100644
index 0000000000..d7cc3dcb91
--- /dev/null
+++ b/src/app/errors/unavailable-card/unavailable-card.component.scss
@@ -0,0 +1,9 @@
+.icon-size {
+  font-size: 100px;
+  height: 100px;
+  width: 100px;
+}
+
+.maintenance {
+  font-family: 'Grotesk';
+}
diff --git a/src/app/errors/unavailable-card/unavailable-card.component.ts b/src/app/errors/unavailable-card/unavailable-card.component.ts
new file mode 100644
index 0000000000..f949856e31
--- /dev/null
+++ b/src/app/errors/unavailable-card/unavailable-card.component.ts
@@ -0,0 +1,10 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'f-unavailable-card',
+  templateUrl: './unavailable-card.component.html',
+  styleUrls: ['./unavailable-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnavailableCardComponent {}
diff --git a/src/app/eula/accept-eula/accept-eula.component.html b/src/app/eula/accept-eula/accept-eula.component.html
index b0cc9f6c5c..5de43cf604 100644
--- a/src/app/eula/accept-eula/accept-eula.component.html
+++ b/src/app/eula/accept-eula/accept-eula.component.html
@@ -1,5 +1,5 @@
 <div class="flex justify-center">
-  <div class="flex flex-col w-screen md:w-2/3">
+  <div class="flex w-screen flex-col md:w-2/3">
     <h1>End User License Agreements</h1>
     <p>
       In order to use {{ toolName | async }}, you need to accept the following end user license
@@ -7,10 +7,10 @@ <h1>End User License Agreements</h1>
     </p>
     <iframe
       #iframe
-      (load)="onIframeLoad(iframe)"
       style="width: 100%; height: 30em; border: 0"
+      (load)="onIframeLoad(iframe)"
     ></iframe>
-    <button (click)="acceptEula()" mat-raised-button color="primary" style="margin-top: 20px">
+    <button color="primary" mat-raised-button style="margin-top: 20px" (click)="acceptEula()">
       Accept
     </button>
   </div>
diff --git a/src/app/eula/accept-eula/accept-eula.component.spec.ts b/src/app/eula/accept-eula/accept-eula.component.spec.ts
index cb749c8c4b..90b765c3fa 100644
--- a/src/app/eula/accept-eula/accept-eula.component.spec.ts
+++ b/src/app/eula/accept-eula/accept-eula.component.spec.ts
@@ -1,23 +1,99 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {BehaviorSubject, Subscription, of} from 'rxjs';
+import {UserService} from 'src/app/api/models/doubtfire-model';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {TiiService} from 'src/app/api/services/tii.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {AcceptEulaComponent} from './accept-eula.component';
 
-import { AcceptEulaComponent } from './accept-eula.component';
+const emptyProvider = {};
 
 describe('AcceptEulaComponent', () => {
   let component: AcceptEulaComponent;
   let fixture: ComponentFixture<AcceptEulaComponent>;
+  let afterAuthCallback: ((authenticated: boolean) => void) | undefined;
+  let authenticationSubscription: Subscription;
+  let tiiEnabled: BehaviorSubject<boolean>;
+  let tiiService: {getTiiEula: ReturnType<typeof vi.fn>};
+  let router: {navigateByUrl: ReturnType<typeof vi.fn>};
 
   beforeEach(async () => {
+    afterAuthCallback = undefined;
+    authenticationSubscription = new Subscription();
+    tiiEnabled = new BehaviorSubject<boolean>(false);
+    tiiService = {getTiiEula: vi.fn().mockReturnValue(of('<p>EULA</p>'))};
+    router = {navigateByUrl: vi.fn()};
+
     await TestBed.configureTestingModule({
-      declarations: [ AcceptEulaComponent ]
+      declarations: [AcceptEulaComponent],
+      providers: [
+        {
+          provide: DoubtfireConstants,
+          useValue: {
+            ExternalName: of('OnTrack'),
+            IsTiiEnabled: tiiEnabled,
+          },
+        },
+        {
+          provide: AuthenticationService,
+          useValue: {
+            afterAuthCall: vi.fn((callback: (authenticated: boolean) => void) => {
+              afterAuthCallback = callback;
+              return authenticationSubscription;
+            }),
+          },
+        },
+        {provide: TiiService, useValue: tiiService},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: Router, useValue: router},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(AcceptEulaComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(AcceptEulaComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('does not treat the pre-authentication TurnItIn default as a disabled feature', () => {
+    expect(afterAuthCallback).toBeDefined();
+    expect(router.navigateByUrl).not.toHaveBeenCalled();
+    expect(tiiService.getTiiEula).not.toHaveBeenCalled();
+  });
+
+  it('loads the EULA after authenticated settings enable TurnItIn', () => {
+    tiiEnabled.next(true);
+
+    afterAuthCallback?.(true);
+
+    expect(tiiService.getTiiEula).toHaveBeenCalledTimes(1);
+    expect(router.navigateByUrl).not.toHaveBeenCalled();
+  });
+
+  it('redirects after authenticated settings disable TurnItIn', () => {
+    afterAuthCallback?.(true);
+
+    expect(tiiService.getTiiEula).not.toHaveBeenCalled();
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/home');
+  });
+
+  it('stops waiting for authentication when the component is destroyed', () => {
+    const unsubscribe = vi.spyOn(authenticationSubscription, 'unsubscribe');
+
+    fixture.destroy();
+
+    expect(unsubscribe).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/app/eula/accept-eula/accept-eula.component.ts b/src/app/eula/accept-eula/accept-eula.component.ts
index fa6c4abadb..cd59a8ee4e 100644
--- a/src/app/eula/accept-eula/accept-eula.component.ts
+++ b/src/app/eula/accept-eula/accept-eula.component.ts
@@ -1,7 +1,8 @@
-import {Component} from '@angular/core';
-import {StateService} from '@uirouter/core';
-import {Observable, ReplaySubject, take} from 'rxjs';
+import {ChangeDetectionStrategy, Component, OnDestroy} from '@angular/core';
+import {Router} from '@angular/router';
+import {Observable, ReplaySubject, Subscription, take} from 'rxjs';
 import {UserService} from 'src/app/api/models/doubtfire-model';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
 import {TiiService} from 'src/app/api/services/tii.service';
 import {AlertService} from 'src/app/common/services/alert.service';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
@@ -10,32 +11,44 @@ import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
   selector: 'f-accept-eula',
   templateUrl: './accept-eula.component.html',
   styleUrls: ['./accept-eula.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class AcceptEulaComponent {
+export class AcceptEulaComponent implements OnDestroy {
   public toolName: Observable<string>;
   public eulaHtml: string;
 
-  public iframeDoc$ = new ReplaySubject<any>(1);
+  public iframeDoc$: ReplaySubject<Document> = new ReplaySubject(1);
+
+  private authenticationSubscription: Subscription;
 
   constructor(
     private constants: DoubtfireConstants,
+    private authenticationService: AuthenticationService,
     private tiiService: TiiService,
     private userService: UserService,
     private alertService: AlertService,
-    private state: StateService,
+    private router: Router,
   ) {
-    this.constants.IsTiiEnabled.subscribe((enabled) => {
-      if (enabled) {
+    // Auth completion now includes the protected settings request. Do not react
+    // to IsTiiEnabled's pre-authentication false default: on a cold /eula load
+    // that used to redirect before a remembered session could be restored.
+    this.authenticationSubscription = this.authenticationService.afterAuthCall((authenticated) => {
+      if (authenticated && this.constants.IsTiiEnabled.value) {
         this.getEulaHtml();
       } else {
-        this.state.go('home');
+        this.router.navigateByUrl('/home');
       }
     });
 
     this.toolName = constants.ExternalName;
   }
 
-  public getEulaHtml() {
+  public ngOnDestroy(): void {
+    this.authenticationSubscription.unsubscribe();
+  }
+
+  public getEulaHtml(): void {
     this.tiiService.getTiiEula().subscribe((eulaHtml) => {
       this.eulaHtml = eulaHtml;
       this.updateHtmlEulaInIFrame();
@@ -45,15 +58,17 @@ export class AcceptEulaComponent {
   public acceptEula(): void {
     this.userService.currentUser.acceptTiiEula().subscribe(() => {
       this.alertService.success('You have accepted the EULAs');
-      this.state.go('home');
+      this.router.navigateByUrl('/home');
     });
   }
 
-  public onIframeLoad(iframe): void {
-    this.iframeDoc$.next(iframe.contentDocument || iframe.contentWindow);
+  public onIframeLoad(iframe: HTMLIFrameElement): void {
+    if (iframe.contentDocument) {
+      this.iframeDoc$.next(iframe.contentDocument);
+    }
   }
 
-  getIframeDoc(): Observable<any> {
+  getIframeDoc(): Observable<Document> {
     return this.iframeDoc$.asObservable();
   }
 
diff --git a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.coffee b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.coffee
deleted file mode 100644
index b949a95d98..0000000000
--- a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.coffee
+++ /dev/null
@@ -1,74 +0,0 @@
-angular.module('doubtfire.groups.group-member-contribution-assigner', [])
-
-#
-# Directive to rate each student's contributions
-# in a group task assessment
-#
-.directive('groupMemberContributionAssigner', ->
-  restrict: 'E'
-  templateUrl: 'groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html'
-  replace: true
-  scope:
-    task: '='
-    project: '='
-    team: '=' #out parameter
-
-  controller: ($scope, gradeService) ->
-    $scope.selectedGroupSet = $scope.task.definition.groupSet
-    unless $scope.task.isTestSubmission
-      $scope.selectedGroup = $scope.project.getGroupForTask($scope.task)
-
-    $scope.memberSortOrder = 'project.student.name'
-    $scope.numStars = 5
-    $scope.initialStars = 3
-
-    $scope.percentages = {
-      danger: 0,
-      warning: 25,
-      info: 50,
-      success: 100
-    }
-
-    $scope.checkClearRating = (contrib) ->
-      if contrib.confRating == 1 && contrib.overStar == 1 && contrib.rating == 0
-        contrib.rating = contrib.percent = 0
-      else if contrib.confRating == 1 && contrib.overStar == 1 && contrib.rating == 0
-        contrib.rating = 1
-      contrib.confRating = contrib.rating
-
-    memberPercentage = (contrib, rating) ->
-      (100 * (rating / $scope.selectedGroup.contributionSum($scope.team.memberContributions, contrib, rating))).toFixed()
-
-    $scope.hoveringOver = (contrib, value) ->
-      contrib.overStar = value
-      contrib.percent = memberPercentage(contrib, value)
-
-    $scope.gradeFor = gradeService.gradeFor
-
-    if $scope.selectedGroup && $scope.selectedGroupSet
-      $scope.selectedGroup.getMembers().subscribe({
-        next: (members) ->
-          $scope.team.memberContributions = _.map(members, (member) ->
-            result = {
-              project: member,
-              rating: $scope.initialStars,
-              confRating: $scope.initialStars,
-              percent: 0
-            }
-            result.percent = memberPercentage(result, $scope.initialStars)
-            result
-          )
-          # Need the '+' to convert to number
-          $scope.percentages.warning = +(25 / members.length).toFixed()
-          $scope.percentages.info    = +(50 / members.length).toFixed()
-          $scope.percentages.success = +(95 / members.length).toFixed()
-      })
-    else
-      $scope.team.memberContributions = []
-
-    $scope.percentClass = (pct) ->
-      return 'label-success'  if pct >= $scope.percentages.success
-      return 'label-info'     if $scope.percentages.info    <= pct < $scope.percentages.success
-      return 'label-warning'  if $scope.percentages.warning <= pct < $scope.percentages.info
-      return 'label-danger'   if $scope.percentages.danger  <= pct < $scope.percentages.warning
-)
diff --git a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.html b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.html
new file mode 100644
index 0000000000..4d62d51d5b
--- /dev/null
+++ b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.html
@@ -0,0 +1,51 @@
+<table
+  mat-table
+  matSort
+  matSortActive="name"
+  matSortDirection="asc"
+  matSortDisableClear
+  [dataSource]="dataSource"
+  (matSortChange)="sortTableData($event)"
+>
+  <ng-container matColumnDef="name" sticky>
+    <th *matHeaderCellDef mat-header-cell mat-sort-header>Team Member</th>
+    <td *matCellDef="let member" mat-cell>
+      {{ member.project.student.name }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="target-grade" sticky>
+    <th *matHeaderCellDef mat-header-cell mat-sort-header>Target Grade</th>
+    <td *matCellDef="let member" mat-cell>
+      <f-grade-icon [grade]="member.project.targetGrade" [unit]="project.unit"></f-grade-icon>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="contribution" sticky>
+    <th *matHeaderCellDef mat-header-cell mat-sort-header>Contribution</th>
+    <td *matCellDef="let member" mat-cell>
+      @for (i of [].constructor(numStars); track $index) {
+        <mat-icon
+          class="cursor-pointer px-0.5 align-middle text-2xl"
+          [matTooltip]="member.percent + '% effort'"
+          [ngClass]="{
+            'text-amber-400':
+              member.overStar !== null
+                ? $index + 1 <= member.overStar
+                : $index + 1 <= member.rating,
+            'text-gray-300':
+              member.overStar !== null ? $index + 1 > member.overStar : $index + 1 > member.rating,
+          }"
+          (click)="selectRating(member, $index + 1)"
+          (mouseenter)="hoveringOver(member, $index + 1)"
+          (mouseleave)="hoveringOver(member, null)"
+        >
+          person
+        </mat-icon>
+      }
+    </td>
+  </ng-container>
+
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+</table>
diff --git a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.scss b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.ts b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.ts
new file mode 100644
index 0000000000..6f75ea24ea
--- /dev/null
+++ b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.component.ts
@@ -0,0 +1,161 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {Sort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+import {GroupSet} from 'src/app/api/models/doubtfire-model';
+import {Group, MemberContribution} from 'src/app/api/models/groups/group';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+
+@Component({
+  selector: 'f-group-member-contribution-assigner',
+  templateUrl: './group-member-contribution-assigner.component.html',
+  styleUrls: ['./group-member-contribution-assigner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class GroupMemberContributionAssignerComponent implements OnInit, OnChanges {
+  @Input() isTestSubmission: boolean;
+
+  @Input() task: Task;
+  @Input() project: Project;
+  @Input() team = {memberContributions: [] as MemberContribution[]};
+  @Output() teamChange: EventEmitter<{memberContributions: MemberContribution[]}> =
+    new EventEmitter();
+
+  selectedGroupSet: GroupSet;
+  selectedGroup: Group;
+
+  numStars = 5;
+  initialStars = 3;
+
+  percentages = {
+    danger: 0,
+    warning: 25,
+    info: 50,
+    success: 100,
+  };
+
+  displayedColumns = ['name', 'target-grade', 'contribution'];
+  dataSource: MatTableDataSource<MemberContribution> = new MatTableDataSource([]);
+
+  ngOnInit(): void {
+    this.initializeGroupData();
+    this.loadMembers();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['task'] || changes['project']) {
+      this.initializeGroupData();
+      this.loadMembers();
+    }
+  }
+
+  private initializeGroupData(): void {
+    this.selectedGroupSet = this.task?.definition?.groupSet;
+    // Check if this is an overseer test submission
+    if (!this.isTestSubmission) {
+      const group = this.project?.getGroupForTask(this.task);
+      this.selectedGroup = group;
+      if (!this.selectedGroup && this.selectedGroupSet?.groups?.length > 0) {
+        this.selectedGroup = this.selectedGroupSet.groups[0];
+      }
+    }
+  }
+
+  private loadMembers(): void {
+    if (!this.selectedGroup && this.selectedGroupSet?.groups?.length > 0) {
+      console.error(`Could not find project's group`);
+      this.team.memberContributions = [];
+      return;
+    }
+    if (this.selectedGroup && this.selectedGroupSet) {
+      this.selectedGroup.getMembers().subscribe({
+        next: (members) => {
+          this.team.memberContributions = members.map((member) => {
+            const result: MemberContribution = {
+              project: member,
+              rating: this.initialStars,
+              percent: 0,
+              overStar: null,
+            };
+            result.percent = this.memberPercentage(result, this.initialStars);
+            return result;
+          });
+
+          // Update percentages based on member count
+          this.percentages.warning = +(25 / members.length).toFixed();
+          this.percentages.info = +(50 / members.length).toFixed();
+          this.percentages.success = +(95 / members.length).toFixed();
+
+          this.teamChange.emit(this.team);
+          this.dataSource.data = [...this.team.memberContributions];
+        },
+      });
+    } else {
+      this.team.memberContributions = [];
+      this.teamChange.emit(this.team);
+    }
+  }
+
+  private memberPercentage(contrib: MemberContribution, rating: number): number {
+    return +(
+      100 *
+      (rating /
+        this.selectedGroup.contributionSum(this.team.memberContributions, contrib.project, rating))
+    ).toFixed();
+  }
+
+  selectRating(contrib: MemberContribution, rating: number) {
+    if (contrib.rating !== rating) {
+      contrib.rating = rating;
+      this.hoveringOver(contrib, rating);
+    } else {
+      contrib.rating = 0;
+      this.hoveringOver(contrib, 0);
+    }
+  }
+
+  hoveringOver(contrib: MemberContribution, value: number): void {
+    contrib.overStar = value;
+    contrib.percent = this.memberPercentage(contrib, value);
+  }
+
+  private sortCompare(aValue: number | string, bValue: number | string, isAsc: boolean) {
+    return (aValue < bValue ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  sortTableData(sort: Sort) {
+    if (!sort.active || sort.direction === '') {
+      return;
+    }
+    this.dataSource.data = this.dataSource.data.sort((a, b) => {
+      switch (sort.active) {
+        case 'name':
+          return this.sortCompare(
+            a.project.student.name,
+            b.project.student.name,
+            sort.direction === 'asc',
+          );
+        case 'target-grade':
+          return this.sortCompare(
+            a.project.targetGrade,
+            b.project.targetGrade,
+            sort.direction === 'asc',
+          );
+        case 'contribution':
+          return this.sortCompare(a.rating, b.rating, sort.direction === 'asc');
+        default:
+          return 0;
+      }
+    });
+  }
+}
diff --git a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.scss b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.scss
deleted file mode 100644
index 8199fd2757..0000000000
--- a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.group-member-contribution-assigner {
-  .group-member-contribution-rating {
-    &:focus {
-      outline: none;
-    }
-    i {
-      font-size: 2em;
-      cursor: pointer;
-    }
-    .icon-colorful {
-      color: rgb(255, 247, 141);
-      -webkit-text-stroke-width: 1px;
-      -webkit-text-stroke-color: orange;
-    }
-    .icon-disable {
-      color: #ccc;
-    }
-  }
-}
diff --git a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html
deleted file mode 100644
index 4caab308f5..0000000000
--- a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="group-member-contribution-assigner">
-  <table class="table table-condensed table-hover">
-    <thead>
-      <tr>
-        <th><a ng-click="memberSortOrder='student_name'; reverse=!reverse">Team Member</a></th>
-        <th><a ng-click="memberSortOrder='targetGrade'; reverse=!reverse">Target Grade</a></th>
-        <th class="col-sm-4"><a ng-click="memberSortOrder='rating'; reverse=!reverse">Contribution</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr ng-repeat="contrib in team.memberContributions | orderBy:memberSortOrder:reverse">
-        <td>{{contrib.project.student.name}}</td>
-        <td class="text-left">
-          <grade-icon grade="contrib.project.targetGrade"></grade-icon>
-        </td>
-        <td>
-          <rating
-            class="group-member-contribution-rating"
-            ng-click="checkClearRating(contrib)"
-            ng-model="contrib.rating"
-            on-hover="hoveringOver(contrib, value)"
-            on-leave="hoveringOver(contrib, null)"
-            max="numStars"
-            state-on="'fa fa-child rating-outline'"
-            state-off="'fa fa-child rating-disabled'">
-          </rating>
-          <span
-            class="label {{percentClass(contrib.percent)}}"
-            ng-show="contrib.overStar">
-            <span ng-show="contrib.percent > 0">
-              {{contrib.percent}} % effort
-            </span>
-            <span ng-hide="contrib.percent > 0">
-              No effort
-            </span>
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/src/app/groups/group-member-list/group-member-list.coffee b/src/app/groups/group-member-list/group-member-list.coffee
deleted file mode 100644
index ddb80ece67..0000000000
--- a/src/app/groups/group-member-list/group-member-list.coffee
+++ /dev/null
@@ -1,58 +0,0 @@
-angular.module('doubtfire.groups.group-member-list', [])
-
-#
-# Lists members in a group
-#
-.directive('groupMemberList', ->
-  restrict: 'E'
-  templateUrl: 'groups/group-member-list/group-member-list.tpl.html'
-  scope:
-    unit: '='
-    project: '='
-    unitRole: '='
-    selectedGroup: '='
-    onMembersLoaded: '=?'
-  controller: ($scope, $timeout, gradeService, alertService, listenerService) ->
-    # Cleanup
-    listeners = listenerService.listenTo($scope)
-
-    # Initial sort orders
-    $scope.tableSort =
-      order: 'student_name'
-      reverse: false
-
-    # Table sorting
-    $scope.sortTableBy = (column) ->
-      $scope.tableSort.order = column
-      $scope.tableSort.reverse = !$scope.tableSort.reverse
-
-    # Loading
-    startLoading  = -> $scope.loaded = false
-    finishLoading = -> $timeout(->
-      $scope.loaded = true
-      $scope.onMembersLoaded?()
-    , 500)
-
-    # Initially not loaded
-    $scope.loaded = false
-
-    # Remove group members
-    $scope.removeMember = (member) ->
-      $scope.selectedGroup.removeMember(member)
-
-    # Listen for changes to group
-    listeners.push $scope.$watch "selectedGroup.id", (newGroupId) ->
-      return unless newGroupId?
-      startLoading()
-      $scope.canRemoveMembers = $scope.unitRole || ($scope.selectedGroup.groupSet.allowStudentsToManageGroups && !$scope.selectedGroup.locked)
-
-      $scope.selectedGroup.getMembers().subscribe({
-        next: (members) ->
-          finishLoading()
-        error: (failure) ->
-          $timeout((->
-            alertService.error( "Unauthorised to view members in this group", 3000)
-            $scope.selectedGroup = null
-          ), 1000)
-      })
-)
diff --git a/src/app/groups/group-member-list/group-member-list.component.html b/src/app/groups/group-member-list/group-member-list.component.html
new file mode 100644
index 0000000000..e87db81839
--- /dev/null
+++ b/src/app/groups/group-member-list/group-member-list.component.html
@@ -0,0 +1,55 @@
+@if (loading) {
+  <div class="flex-start flex size-full items-center justify-center text-gray-400 italic">
+    Loading members...
+  </div>
+} @else if (!selectedGroup || selectedGroup.members.length === 0) {
+  <div class="flex size-full flex-col items-center justify-center p-2.5 text-gray-400">
+    <mat-icon class="scale-125">group_off</mat-icon>
+    <p class="p-2.5">There are no members in this group</p>
+  </div>
+} @else {
+  <table mat-table [dataSource]="dataSource">
+    <ng-container matColumnDef="student_id">
+      <th *matHeaderCellDef mat-header-cell>{{ unitRole ? 'Student ID' : '' }}</th>
+      <td *matCellDef="let member" mat-cell>
+        @if (unitRole) {
+          {{ member.student.username || 'N/A' }}
+        }
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+      <th *matHeaderCellDef mat-header-cell>Name</th>
+      <td *matCellDef="let member" mat-cell>
+        {{ member.student.name }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="target_grade">
+      <th *matHeaderCellDef mat-header-cell>{{ unitRole ? 'Target Grade' : '' }}</th>
+      <td *matCellDef="let member" mat-cell>
+        @if (unitRole) {
+          <f-grade-icon [grade]="member.targetGrade" [unit]="unit"></f-grade-icon>
+        }
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th *matHeaderCellDef mat-header-cell>{{ canRemoveMembers ? 'Actions' : '' }}</th>
+      <td *matCellDef="let member" mat-cell>
+        @if (canRemoveMembers) {
+          @if (!project && unitRole) {
+            <button color="warn" mat-icon-button (click)="removeMember(member)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          } @else if (project && project.id === member.id) {
+            <button mat-raised-button (click)="removeMember(member)">Leave</button>
+          }
+        }
+      </td>
+    </ng-container>
+
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  </table>
+}
diff --git a/src/app/groups/group-member-list/group-member-list.component.scss b/src/app/groups/group-member-list/group-member-list.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/groups/group-member-list/group-member-list.component.ts b/src/app/groups/group-member-list/group-member-list.component.ts
new file mode 100644
index 0000000000..162c552139
--- /dev/null
+++ b/src/app/groups/group-member-list/group-member-list.component.ts
@@ -0,0 +1,81 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {MatTableDataSource} from '@angular/material/table';
+import {Subscription} from 'rxjs';
+import {Group, UnitRole} from 'src/app/api/models/doubtfire-model';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-group-member-list',
+  templateUrl: './group-member-list.component.html',
+  styleUrls: ['./group-member-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class GroupMemberListComponent implements OnInit, OnChanges {
+  @Input() unit: Unit;
+  @Input() unitRole: UnitRole;
+  @Input() project: Project;
+  @Input() selectedGroup: Group;
+  @Input() onMembersLoaded: () => void;
+
+  loading = false;
+
+  canRemoveMembers = false;
+
+  displayedColumns: string[] = ['student_id', 'name', 'target_grade', 'actions'];
+  groupMembers: Project[] = [];
+  dataSource = new MatTableDataSource();
+
+  private groupMembersSub?: Subscription;
+
+  constructor(private alertService: AlertService) {}
+
+  ngOnInit() {
+    if (!this.selectedGroup) {
+      return;
+    }
+
+    this.groupMembersSub = this.selectedGroup.projectsCache.values.subscribe((values) => {
+      this.dataSource.data = values;
+    });
+  }
+
+  public removeMember(member: Project) {
+    this.selectedGroup.removeMember(member);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['selectedGroup'] && this.selectedGroup) {
+      this.loading = true;
+      this.selectedGroup.getMembers().subscribe({
+        next: (members) => {
+          this.loading = false;
+          this.onMembersLoaded?.();
+          this.canRemoveMembers =
+            !!this.unitRole ||
+            (this.selectedGroup.groupSet.allowStudentsToManageGroups && !this.selectedGroup.locked);
+
+          this.dataSource.data = members;
+
+          this.groupMembersSub?.unsubscribe();
+          this.groupMembersSub = this.selectedGroup.projectsCache.values.subscribe((values) => {
+            this.dataSource.data = values;
+          });
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to fetch group members: ${error}`, 6000);
+          this.selectedGroup = null;
+        },
+      });
+    }
+  }
+}
diff --git a/src/app/groups/group-member-list/group-member-list.scss b/src/app/groups/group-member-list/group-member-list.scss
deleted file mode 100644
index 75fb259794..0000000000
--- a/src/app/groups/group-member-list/group-member-list.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-group-member-list table {
-  th.student-id    { width: 25%; }
-  th.student-name  { width: 50%; }
-  th.actions       { width: 25%; }
-  th.student-grade { width: 50%; }
-}
diff --git a/src/app/groups/group-member-list/group-member-list.tpl.html b/src/app/groups/group-member-list/group-member-list.tpl.html
deleted file mode 100644
index f483b4acbd..0000000000
--- a/src/app/groups/group-member-list/group-member-list.tpl.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<div class="panel-body panel-loading" ng-hide="loaded">
-  <i class="fa fa-spinner fa-pulse"></i> Loading Members...
-</div><!--/loading-->
-<div class="panel-body" ng-show="loaded && selectedGroup.members.length == 0">
-  <div class="callout callout-primary">
-    <h4>No members in group</h4>
-    <p>There are no members in this group</p>
-  </div>
-</div><!--no-members-->
-<table ng-show="loaded && selectedGroup.members.length > 0" class="table table-condensed table-hover table-pointer">
-  <thead>
-    <tr>
-      <th ng-show="unitRole">
-        <a ng-click="sortTableBy('student.username')">
-          Student ID
-          <i ng-show="tableSort.order == 'student.username'" class="fa fa-caret-{{tableSort.reverse ? 'up' : 'down'}}"></i>
-        </a>
-      </th>
-      <th>
-        <a ng-click="sortTableBy('student.name')">
-          Name
-          <i ng-show="tableSort.order == 'student.name'" class="fa fa-caret-{{tableSort.reverse ? 'up' : 'down'}}"></i>
-        </a>
-      </th>
-      <th ng-show="unitRole">
-        <a ng-click="sortTableBy('targetGrade')">
-          Target Grade
-          <i ng-show="tableSort.order == 'targetGrade'" class="fa fa-caret-{{tableSort.reverse ? 'up' : 'down'}}"></i>
-        </a>
-      </th>
-      <th ng-if="canRemoveMembers">
-        Actions
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr ng-repeat="member in selectedGroup.members | orderBy:tableSort.order:tableSort.reverse">
-      <td class="student-id" ng-show="unitRole">{{member.student.username || "N/A"}}</td>
-      <td class="student-name">{{member.student.name}}</td>
-      <td ng-show="unitRole" class="student-grade text-left">
-        <grade-icon grade="member.targetGrade"></grade-icon>
-      </td>
-      <td class="actions" ng-if="canRemoveMembers">
-        <button ng-click="removeMember(member)" class="btn btn-sm btn-danger" ng-hide="project">
-          <i class="fa fa-minus"></i>
-          <span ng-hide="member.id == project.id">Remove</span>
-        </button>
-        <button ng-click="removeMember(member)" class="btn btn-sm btn-danger" ng-show="member.id == project.id">
-          <i class="fa fa-minus"></i>
-          <span>Leave</span>
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
diff --git a/src/app/groups/group-selector/group-selector.coffee b/src/app/groups/group-selector/group-selector.coffee
deleted file mode 100644
index 0c79db4f74..0000000000
--- a/src/app/groups/group-selector/group-selector.coffee
+++ /dev/null
@@ -1,209 +0,0 @@
-angular.module('doubtfire.groups.group-selector', [])
-
-#
-# Allows tutors and students to select (and create if applicable)
-# new groups for teamwork
-#
-.directive('groupSelector', ->
-  restrict: 'E'
-  templateUrl: 'groups/group-selector/group-selector.tpl.html'
-  scope:
-    unit: "="
-    # Use project for student context
-    project: "=?"
-    # Use unit role for tutor context
-    unitRole: "=?"
-    # Pass in a groupset to set the groupset context
-    selectedGroupSet: '='
-    # Bind the selected group for switching
-    selectedGroup: '=?'
-    # Shows the groupset selector
-    showGroupSetSelector: '=?'
-    # On change of a group
-    onSelect: '=?'
-  controller: ($scope, $filter, $timeout, alertService, listenerService, newUserService, newGroupService) ->
-    # Cleanup
-    listeners = listenerService.listenTo($scope)
-
-    # Unit role or project should be included in $scope
-    if !$scope.unitRole? && !$scope.project? || $scope.unitRole? && $scope.project?
-      throw Error "Group selector must have exactly one unit role or one project"
-
-    # Filtering
-    applyFilters = ->
-      if $scope.unitRole? # apply staff filter
-        filteredGroups = $filter('groupsInTutorials')($scope.selectedGroupSet.groups, $scope.unitRole, $scope.staffFilter)
-      else # apply project filter
-        filteredGroups = $scope.selectedGroupSet.groups
-      # Apply remaining filters
-      $scope.filteredGroups = $filter('paginateAndSort')(filteredGroups, $scope.pagination, $scope.tableSort)
-
-    $scope.setStaffFilter = (scope) ->
-      $scope.staffFilter = scope
-      applyFilters()
-
-    # Pagination values
-    $scope.pagination =
-      currentPage: 1
-      maxSize: 10
-      pageSize: 10
-      totalSize: null
-      show: false
-      onChange: applyFilters
-
-    # Initial sort orders
-    $scope.tableSort =
-      order: 'name'
-      reverse: false
-
-    # Table sorting
-    $scope.sortTableBy = (column) ->
-      $scope.tableSort.order = column
-      $scope.tableSort.reverse = !$scope.tableSort.reverse
-      applyFilters()
-
-    # Loading
-    startLoading  = -> $scope.loaded = false
-    finishLoading = -> $timeout((->
-      $scope.loaded = true
-      if $scope.project?
-        $scope.selectGroup($scope.project.groupForGroupSet($scope.selectedGroupSet))
-    ), 500)
-
-    # Select group function
-    $scope.selectGroup = (group) ->
-      return if $scope.project? && ! $scope.project.inGroup(group) # its the student view
-
-      $scope.selectedGroup = group
-      $scope.onSelect?(group)
-
-    # Sets the placeholder text (useful to know named
-    # groups are technically optional)
-    resetNewGroupForm = () ->
-      $scope.newGroupName = ""
-
-    # Group set selector
-    $scope.selectedGroupSet ?= _.first($scope.unit.groupSets)
-    $scope.showGroupSetSelector ?= $scope.unit.groupSets.length > 1
-    $scope.selectGroupSet = (groupSet) ->
-      return unless groupSet?
-      startLoading()
-      $scope.selectGroup(null)
-      # Can only create groups if unitRole provided and selectedGroupSet
-      $scope.canCreateGroups = $scope.unitRole? || groupSet?.allowStudentsToCreateGroups
-      $scope.unit.getGroups(groupSet).subscribe({
-        next: (groups) ->
-          $scope.selectedGroupSet = groupSet
-          finishLoading()
-          resetNewGroupForm()
-          applyFilters()
-        error: (message) ->
-          finishLoading()
-          alertService.error( "Unable to get groups #{message}", 6000)
-      })
-
-    $scope.selectGroupSet($scope.selectedGroupSet)
-
-    # Load groups if not loaded
-    # $scope.unit.getGroups($scope.selectedGroupSet.id) if $scope.selectedGroupSet?.groups?
-
-    # Staff filter options (convenor should see all)
-    $scope.staffFilter = {
-      Convenor: 'all',
-      Tutor: 'mine'
-    }[$scope.unitRole.role] if $scope.unitRole?
-
-    # Changing staff filter reapplies filter
-    $scope.onChangeStaffFilter = applyFilters
-
-    # Search text reapplies filter
-    $scope.searchTextChanged = applyFilters
-
-    # Adds a group to the unit
-    $scope.addGroup = (name) ->
-      if $scope.unit.tutorials.length == 0
-        alertService.error( "Please ensure there is at least one tutorial before groups are created", 6000)
-      # Student context
-      if $scope.project
-        #TODO: Need to add stream to group set
-        tutorialId = $scope.project.tutorials[0].id || $scope.unit.tutorials[0].id
-      else
-        # Convenor or Tutor
-        tutorName = $scope.unitRole?.name || newUserService.currentUser.name
-        tutorialId = _.find($scope.unit.tutorials, (tute) -> tute.tutor?.name == tutorName)?.id
-        # Default to first tutorial if can't find
-        tutorialId ?= _.first($scope.unit.tutorials).id
-
-      newGroupService.create({
-        unitId: $scope.unit.id,
-        groupSetId: $scope.selectedGroupSet.id,
-      }, {
-        cache: $scope.selectedGroupSet.groupsCache,
-        constructorParams: $scope.unit
-        body: {
-          group: {
-            name: name,
-            tutorial_id: tutorialId
-          }
-        }
-      }).subscribe({
-        next: (group) ->
-          resetNewGroupForm()
-          applyFilters()
-          $scope.selectedGroup = group
-        error: (message) -> alertService.error( message, 6000)
-      })
-
-    # Join or leave group as project
-    $scope.projectInGroup = (group) ->
-      $scope.project?.inGroup(group)
-
-    $scope.joinGroup = (group) ->
-      return unless $scope.project?
-      partOfGroup = $scope.projectInGroup(group)
-      return alertService.error( "You are already member of this group") if partOfGroup
-      group.addMember($scope.project,
-        () ->
-          $scope.selectedGroup = group
-        () ->
-      )
-
-    # Update group function
-    $scope.updateGroup = (data, group) ->
-      group.capacityAdjustment = data.capacityAdjustment
-      group.tutorial = data.tutorial
-      group.name = data.name
-
-      newGroupService.update(group).subscribe({
-        next: () ->
-          alertService.success( "Updated group", 2000)
-          applyFilters()
-        error: (message) -> alertService.error( "Failed to update group. #{message}", 6000)
-      })
-
-    # Remove group function
-    $scope.deleteGroup = (group) ->
-      newGroupService.delete(group, { cache: $scope.selectedGroupSet.groupsCache }).subscribe({
-        next: () ->
-          alertService.success( "Deleted group", 2000)
-          $scope.selectedGroup = null if group.id == $scope.selectedGroup?.id
-          resetNewGroupForm()
-          applyFilters()
-        error: () -> alertService.error( "Failed to delete group. #{message}", 6000)
-      })
-
-    # Toggle lockable group
-    $scope.toggleLocked = (group) ->
-      group.locked = !group.locked
-      $scope.unit.updateGroup(group,
-        (success) ->
-          group.locked = success.locked
-          alertService.success( "Group updated", 2000)
-      )
-
-    # Watch selected group set changes
-    listeners.push $scope.$on 'UnitGroupSetEditor/SelectedGroupSetChanged', (evt, args) ->
-      newGroupSet = $scope.unit.findGroupSet(args.id)
-      # return if newGroupSet == $scope.selectedGroupSet
-      $scope.selectGroupSet(newGroupSet)
-)
diff --git a/src/app/groups/group-selector/group-selector.component.html b/src/app/groups/group-selector/group-selector.component.html
new file mode 100644
index 0000000000..ccc01c2506
--- /dev/null
+++ b/src/app/groups/group-selector/group-selector.component.html
@@ -0,0 +1,203 @@
+<mat-card appearance="outlined">
+  <mat-card-header>
+    <div class="flex w-full flex-col">
+      <div class="flex w-full flex-row justify-between">
+        <div class="flex items-center gap-1">
+          <mat-card-title>
+            Groups for
+            @if (!showGroupSetSelector && selectedGroup) {
+              "{{ selectedGroupSet?.name }}"
+            }
+          </mat-card-title>
+
+          @if (showGroupSetSelector) {
+            <mat-form-field appearance="outline" class="mt-[22px]">
+              <mat-select [(ngModel)]="selectedGroupSet" (ngModelChange)="selectGroupSet($event)">
+                @for (gs of unit.groupSets; track gs.id) {
+                  <mat-option [value]="gs">{{ gs.name }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
+        </div>
+        @if (unitRole || selectedGroupSet?.allowStudentsToCreateGroups) {
+          <div class="flex items-center gap-1">
+            <mat-form-field appearance="outline" class="mt-[22px]">
+              <input
+                matInput
+                placeholder="Group Name"
+                [(ngModel)]="newGroupName"
+                (ngModelChange)="onGroupNameChange()"
+              />
+            </mat-form-field>
+            <button color="primary" mat-raised-button (click)="addGroup(newGroupName)">
+              Create
+            </button>
+          </div>
+        }
+      </div>
+      @if (unitRole) {
+        <div class="mb-[22px] flex w-full justify-center">
+          <mat-button-toggle-group
+            [ngModel]="staffTutorialFilter"
+            (change)="onTutorialFilterChange($event)"
+          >
+            <mat-button-toggle value="all">All Tutorials</mat-button-toggle>
+            <mat-button-toggle value="mine">My Tutorials</mat-button-toggle>
+          </mat-button-toggle-group>
+        </div>
+      }
+    </div>
+  </mat-card-header>
+
+  @if (selectedGroupSet && selectedGroupSet.groups.length === 0) {
+    <div class="flex size-full flex-col items-center justify-center p-2.5 text-gray-400">
+      <mat-icon class="scale-125">group_off</mat-icon>
+      <p class="p-2.5">There are no groups in this set</p>
+    </div>
+  } @else {
+    <table class="" mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="name" [formGroup]="formData">
+        <th *matHeaderCellDef mat-header-cell>Name</th>
+        <td *matCellDef="let group" mat-cell>
+          @if (editing(group)) {
+            <mat-form-field appearance="outline" class="mt-[22px] p-1">
+              <input formControlName="name" matInput placeholder="Name" required />
+            </mat-form-field>
+          } @else {
+            {{ group.name || 'Not set' }}
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="tutorial" [formGroup]="formData">
+        <th *matHeaderCellDef mat-header-cell>Tutorial</th>
+        <td *matCellDef="let group" mat-cell>
+          @if (editing(group)) {
+            <mat-form-field appearance="outline" class="mt-[22px] p-1">
+              <mat-select formControlName="tutorial" placeholder="Tutorial">
+                @for (tutorial of unit.tutorials; track tutorial) {
+                  <mat-option [value]="tutorial">{{ tutorial.abbreviation }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          } @else {
+            {{ group.tutorial.abbreviation }}
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="capacity_adjustment" [formGroup]="formData">
+        <th *matHeaderCellDef mat-header-cell>
+          @if (unitRole) {
+            Capacity Adjustment
+          }
+        </th>
+        <td *matCellDef="let group" mat-cell>
+          @if (unitRole) {
+            @if (editing(group)) {
+              <mat-form-field appearance="outline" class="mt-[22px] p-1">
+                <input
+                  formControlName="capacityAdjustment"
+                  matInput
+                  placeholder="Capacity Adjustment"
+                  required
+                />
+              </mat-form-field>
+            } @else {
+              {{ group.capacityAdjustment }}
+            }
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="capacity">
+        <th *matHeaderCellDef mat-header-cell>Capacity</th>
+        <td *matCellDef="let group" mat-cell>
+          @if (group.hasSpace()) {
+            Available
+          } @else {
+            Full
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th *matHeaderCellDef mat-header-cell>
+          @if (unitRole || (project && selectedGroupSet.allowStudentsToManageGroups)) {
+            Actions
+          }
+        </th>
+        <td *matCellDef="let group" mat-cell>
+          @if (isPartOfGroup(project, group)) {
+            <div class="text-center font-bold text-green-500">Joined</div>
+          } @else if (project && group.hasSpace() && selectedGroupSet.allowStudentsToManageGroups) {
+            <div class="flex w-full justify-center">
+              @if (!group.locked && !selectedGroupSet.locked) {
+                <button
+                  mat-raised-button
+                  [disabled]="isPartOfGroup(project, group)"
+                  (click)="joinGroup(group)"
+                >
+                  Join
+                </button>
+              } @else {
+                <mat-icon>lock</mat-icon>
+              }
+            </div>
+          }
+          @if (unitRole) {
+            <div class="flex gap-1">
+              @if (editing(group)) {
+                <div class="flex gap-1">
+                  <button mat-icon-button (click)="saveEdit($event)">
+                    <mat-icon>save</mat-icon>
+                  </button>
+                  <button mat-icon-button (click)="cancelEditGroup($event)">
+                    <mat-icon>close</mat-icon>
+                  </button>
+                </div>
+              } @else {
+                <button mat-icon-button (click)="startEditGroup($event, group)">
+                  <mat-icon>edit</mat-icon>
+                </button>
+                <button
+                  mat-icon-button
+                  [color]="group.locked ? 'warn' : 'accent'"
+                  (click)="toggleLocked($event, group)"
+                >
+                  @if (group.locked) {
+                    <mat-icon>lock_outline</mat-icon>
+                  } @else {
+                    <mat-icon>lock_open</mat-icon>
+                  }
+                </button>
+                <button color="warn" mat-icon-button (click)="deleteGroup($event, group)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              }
+            </div>
+          }
+        </td>
+      </ng-container>
+
+      <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+      <tr *matRowDef="let row; columns: displayedColumns" mat-row (click)="selectGroup(row)"></tr>
+    </table>
+    <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[10, 15, 20, 25]"></mat-paginator>
+  }
+
+  @if (
+    selectedGroupSet &&
+    selectedGroupSet.keepGroupsInSameClass &&
+    selectedGroupSet.groups.length > 0 &&
+    !unitRole
+  ) {
+    <p>
+      Can't see the group you need to join? Groups shown are limited to those in your allocated
+      tutorials. Use the
+      <a [routerLink]="['/projects', project.id, 'tutorials']">Tutorial List</a> to check and update
+      your tutorial enrolment if needed.
+    </p>
+  }
+</mat-card>
diff --git a/src/app/groups/group-selector/group-selector.component.scss b/src/app/groups/group-selector/group-selector.component.scss
new file mode 100644
index 0000000000..a0120998f7
--- /dev/null
+++ b/src/app/groups/group-selector/group-selector.component.scss
@@ -0,0 +1,9 @@
+.mat-mdc-row .mat-mdc-cell {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  cursor: pointer;
+}
+
+.mat-mdc-row:hover {
+  background-color: var(--ot-color-hover);
+}
diff --git a/src/app/groups/group-selector/group-selector.component.ts b/src/app/groups/group-selector/group-selector.component.ts
new file mode 100644
index 0000000000..0a9b475738
--- /dev/null
+++ b/src/app/groups/group-selector/group-selector.component.ts
@@ -0,0 +1,267 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {UntypedFormControl, Validators} from '@angular/forms';
+import {MatButtonToggleChange} from '@angular/material/button-toggle';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatTableDataSource} from '@angular/material/table';
+import {Subscription} from 'rxjs';
+import {Group, GroupSet, UnitRole, UserService} from 'src/app/api/models/doubtfire-model';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+import {GroupService} from 'src/app/api/services/group.service';
+import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-group-selector',
+  templateUrl: './group-selector.component.html',
+  styleUrls: ['./group-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class GroupSelectorComponent
+  extends EntityFormComponent<Group>
+  implements OnInit, OnChanges, AfterViewInit
+{
+  @Input() unit: Unit;
+  @Input() unitRole: UnitRole;
+  @Input() project: Project;
+  @Input() selectedGroup: Group;
+  @Input() selectedGroupSet: GroupSet;
+  @Input() onSelect: (group: Group) => void;
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  displayedColumns: string[] = ['name', 'tutorial', 'capacity_adjustment', 'capacity', 'actions'];
+  public groups: Group[] = [];
+
+  public newGroupName: string;
+  public staffTutorialFilter: 'all' | 'mine' = 'all';
+
+  private groupsSub?: Subscription;
+
+  constructor(
+    private userService: UserService,
+    private groupService: GroupService,
+    private alertService: AlertService,
+  ) {
+    super(
+      {
+        name: new UntypedFormControl('', [Validators.required]),
+        tutorial: new UntypedFormControl(null, [Validators.required]),
+        capacityAdjustment: new UntypedFormControl('', [Validators.required]),
+      },
+      'Group',
+    );
+  }
+
+  public get showGroupSetSelector() {
+    return this.unit.groupSets.length > 1;
+  }
+
+  ngOnInit(): void {
+    if (this.unit.groupSets.length > 0) {
+      this.selectedGroupSet = this.unit.groupSets[0];
+    }
+  }
+
+  selectGroupSet(groupSet: GroupSet) {
+    this.selectedGroupSet = groupSet;
+    this.refreshGroups();
+  }
+
+  ngAfterViewInit() {
+    this.dataSource = new MatTableDataSource();
+    this.dataSource.paginator = this.paginator;
+
+    if (this.unit.groupSets.length > 0) {
+      this.selectedGroupSet = this.unit.groupSets[0];
+    }
+
+    this.refreshGroups();
+  }
+
+  refreshGroups() {
+    this.groupsSub?.unsubscribe();
+    this.groupsSub = this.selectedGroupSet?.groupsCache.values.subscribe((values) => {
+      this.groups = [...values];
+    });
+    this.applyFilters();
+  }
+
+  onGroupNameChange() {
+    this.applyFilters();
+  }
+
+  applyFilters() {
+    const filteredGroups = this.groups
+      .filter(
+        (g) =>
+          this.staffTutorialFilter === 'all' ||
+          (this.unitRole && g.tutorial.tutor.id === this.unitRole.user.id),
+      )
+      .filter(
+        (g) => !this.newGroupName || g.name.toLowerCase().includes(this.newGroupName.toLowerCase()),
+      );
+
+    this.dataSource.data = filteredGroups.sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['selectedGroupSet'] && this.selectedGroupSet) {
+      if (!this.dataSource) {
+        this.dataSource = new MatTableDataSource();
+      }
+      this.refreshGroups();
+    }
+  }
+
+  onTutorialFilterChange(event: MatButtonToggleChange) {
+    this.staffTutorialFilter = event.value;
+    this.applyFilters();
+  }
+
+  addGroup(name: string) {
+    if (this.unit.tutorials.length == 0) {
+      this.alertService.error(
+        `Please ensure there is at least one tutorial before groups are created`,
+        6000,
+      );
+      return;
+    }
+    let tutorialId;
+    if (this.project) {
+      tutorialId = this.project.tutorials[0].id || this.unit.tutorials[0].id;
+    } else {
+      const tutorName = this.unitRole?.user.name || this.userService.currentUser.name;
+      tutorialId =
+        this.unit.tutorials.find((t) => t.tutor?.name === tutorName)?.id ??
+        this.unit.tutorials[0].id;
+    }
+
+    this.groupService
+      .create(
+        {
+          unitId: this.unit.id,
+          groupSetId: this.selectedGroupSet.id,
+        },
+        {
+          cache: this.selectedGroupSet.groupsCache,
+          constructorParams: this.unit,
+          body: {
+            group: {
+              name,
+              tutorial_id: tutorialId,
+            },
+          },
+        },
+      )
+      .subscribe({
+        next: (group) => {
+          this.alertService.success('Successfully created group', 3000);
+          this.selectedGroup = group;
+          this.newGroupName = '';
+          this.applyFilters();
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to create group: ${error}`);
+        },
+      });
+  }
+
+  isPartOfGroup(project: Project, group: Group) {
+    return group && project?.inGroup(group);
+  }
+
+  joinGroup(group: Group) {
+    if (!this.project) {
+      return;
+    }
+
+    if (this.isPartOfGroup(this.project, group)) {
+      this.alertService.error('You are already member of this group');
+      return;
+    }
+
+    group.addMember(this.project, () => {
+      this.selectedGroup = group;
+      this.selectGroup(group);
+    });
+  }
+
+  selectGroup(group: Group) {
+    if (this.project && !this.project.inGroup(group)) {
+      // Return because we're in the student view
+      return;
+    }
+
+    if (this.editing(group)) {
+      return;
+    }
+
+    this.selectedGroup = group;
+    this.onSelect(group);
+  }
+
+  deleteGroup(event: Event, group: Group) {
+    event.stopPropagation();
+
+    this.groupService.delete(group, {cache: this.selectedGroupSet.groupsCache}).subscribe({
+      next: () => {
+        this.alertService.success('Deleted group', 3000);
+        if (group.id === this.selectedGroup?.id) {
+          this.selectedGroup = null;
+          this.selectGroup(null);
+        }
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to delete group: ${error}`, 6000);
+      },
+    });
+  }
+
+  toggleLocked(event: Event, group: Group) {
+    event.stopPropagation();
+
+    const originalLockedState = group.locked;
+    group.locked = !group.locked;
+
+    this.groupService.update(group).subscribe({
+      next: (success) => {
+        group.locked = success.locked;
+        this.alertService.success(`Group has been ${!group.locked ? 'un' : ''}locked`, 3000);
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to ${!group.locked ? 'un' : ''}lock group: ${error}`, 6000);
+        group.locked = originalLockedState;
+      },
+    });
+  }
+
+  startEditGroup(event: Event, group: Group) {
+    event.stopPropagation();
+    this.flagEdit(group);
+  }
+
+  cancelEditGroup(event: Event) {
+    event.stopPropagation();
+    this.cancelEdit();
+  }
+
+  saveEdit(event: Event) {
+    event.stopPropagation();
+    super.submit(this.groupService, this.alertService, this.onSuccess.bind(this));
+    this.cancelEdit();
+  }
+
+  onSuccess(): void {
+    this.refreshGroups();
+  }
+}
diff --git a/src/app/groups/group-selector/group-selector.scss b/src/app/groups/group-selector/group-selector.scss
deleted file mode 100644
index c176bf951a..0000000000
--- a/src/app/groups/group-selector/group-selector.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-group-selector {
-  display: block;
-}
-group-selector table {
-  th.name {
-    width: 25%;
-  }
-  th.tutorial {
-    width: 15%;
-  }
-  th.capacity_adjustment {
-    width: 15%;
-  }
-  th.capacity {
-    width: 15%;
-  }
-  th.actions {
-    width: 25%;
-  }
-}
-group-selector .panel-title > group-set-selector {
-  display: inline-block;
-  max-width: 50%;
-  padding-left: 1ex;
-}
-@media (max-width: $screen-md) {
-  group-selector .input-group.staff-filter {
-    margin-bottom: 1em;
-    &,
-    .btn-group {
-      width: 100%;
-    }
-    .btn {
-      width: 50%;
-    }
-  }
-}
-
-.lockButton {
-  width: 70px;
-}
-
-.joinButton {
-  width: 70px;
-}
diff --git a/src/app/groups/group-selector/group-selector.tpl.html b/src/app/groups/group-selector/group-selector.tpl.html
deleted file mode 100644
index 3e52cc4402..0000000000
--- a/src/app/groups/group-selector/group-selector.tpl.html
+++ /dev/null
@@ -1,220 +0,0 @@
-<div class="panel-heading">
-  <h4 class="panel-title">
-    Groups for
-    <strong ng-hide="showGroupSetSelector"> {{selectedGroupSet.name}} </strong>
-    <group-set-selector
-      ng-show="showGroupSetSelector"
-      unit="unit"
-      ng-model="selectedGroupSet"
-      on-change="selectGroupSet"
-    >
-    </group-set-selector>
-  </h4>
-</div>
-<!--/panel-heading-->
-<div
-  class="panel-body panel-toolbar"
-  ng-show="loaded && canCreateGroups && (unitRole || project.tutorials.length > 0)"
->
-  <div class="clearfix">
-    <div class="input-group pull-left col-md-6 staff-filter" ng-if="unitRole">
-      <div class="btn-group">
-        <label
-          class="btn btn-default col-sm-6"
-          ng-model="staffFilter"
-          btn-radio="'all'"
-          ng-click="setStaffFilter('all')"
-        >
-          <i class="fa fa-university"></i> All Tutorials
-        </label>
-        <label
-          class="btn btn-default col-sm-6"
-          ng-model="staffFilter"
-          btn-radio="'mine'"
-          ng-click="setStaffFilter('mine')"
-        >
-          <i class="fa fa-pencil"></i> My Tutorials
-        </label>
-      </div>
-    </div>
-    <!--/staff-filter-button-group-->
-    <div
-      class="input-group pull-right col-md-6"
-    >
-      <input class="form-control" placeholder="Group Name" ng-model="newGroupName" />
-      <span class="input-group-btn" ng-if="canCreateGroups">
-        <button class="btn btn-success" ng-click="addGroup(newGroupName)"><i class="fa fa-plus"></i> Create Group</button>
-      </span>
-    </div>
-    <!--/group-name-create-->
-  </div>
-</div>
-<!--/creation-options-->
-<div class="panel-body panel-loading" ng-show="!loaded"><i class="fa fa-spinner fa-pulse"></i> Loading Groups...</div>
-<!--/loading-spinner-->
-<div class="panel-body" ng-show="loaded && shownGroups.length == 0">
-  <div class="callout callout-primary row">
-    <h4>No Groups To Show</h4>
-    <p>
-      There are no groups available for <strong>{{selectedGroupSet.name}}</strong>{{staffFilter == 'mine' ||
-      selectedGroupSet.keepGroupsInSameClass ? " in your tutorials." : ""}}{{newGroupName.length > 0 ? " with name " + newGroupName + "." : "."}}
-    </p>
-    <p ng-show="selectedGroupSet.keepGroupsInSameClass">
-      Please make sure that you are enrolled in the correct tutorial. You can only join a group that is running in your
-      allocated tutorial. Use the <a ui-sref="projects/tutorials({projectId: project.id})">Tutorial List</a> to
-      check and update your tutorial enrolment.
-    </p>
-  </div>
-</div>
-<!--/no-groups-->
-<table ng-show="loaded && shownGroups.length > 0" class="table table-condensed table-hover table-pointer">
-  <thead>
-    <tr>
-      <th class="name">
-        <a ng-click="sortTableBy('name')">
-          Name <i ng-show="tableSort.order == 'name'" class="fa fa-caret-{{tableSort.reverse ? 'up' : 'down'}}"></i>
-        </a>
-      </th>
-      <th class="tutorial">
-        <a ng-click="sortTableBy('tutorial.abbreviation')">
-          Tutorial
-          <i ng-show="tableSort.order == 'tutorial.abbreviation'" class="fa fa-caret-{{tableSort.reverse ? 'up' : 'down'}}"></i>
-        </a>
-      </th>
-      <th class="capacityAdjustment" ng-show="unitRole">
-        <a ng-click="sortTableBy('capacityAdjustment')">
-          Capacity Adjustment
-          <i
-            ng-show="tableSort.order == 'capacityAdjustment'"
-            class="fa fa-caret-{{tableSort.reverse ? 'up' : 'down'}}"
-          ></i>
-        </a>
-      </th>
-      <th class="capacity">
-        <a ng-click="sortTableBy('hasSpace()')">
-          Capacity
-          <i ng-show="tableSort.order == 'hasSpace()'" class="fa fa-caret-{{tableSort.reverse ? 'up' : 'down'}}"></i>
-        </a>
-      </th>
-      <th class="actions" ng-show="(project && selectedGroupSet.allowStudentsToManageGroups) || unitRole">
-        Actions
-      </th>
-    </tr>
-  </thead>
-  <!--/header-->
-  <tbody>
-    <tr
-      ng-class="{info: group.id == selectedGroup.id}"
-      ng-repeat="group in shownGroups = (filteredGroups | groupsForStudent:project:selectedGroupSet | groupsWithName:newGroupName)"
-    >
-      <th ng-click="selectGroup(group)">
-        <span editable-text="group.name" e-name="name" e-form="groupRowForm" e-required>
-          {{ group.name || 'Not Set' }}
-        </span>
-      </th>
-      <!--/group-name-->
-      <td ng-click="selectGroup(group)">
-        <span
-          editable-select="group.tutorial"
-          e-name="tutorial"
-          e-form="groupRowForm"
-          e-ng-options="t as (t.abbreviation + ' - ' + t.description) for t in unit.tutorials | orderBy: 'abbreviation'"
-        >
-          <span tooltip="{{group.tutorial.description}}" tooltip-popup-delay="200" tooltip-append-to-body="true">
-            {{group.tutorial.abbreviation}}
-          </span>
-        </span>
-      </td>
-      <!--/group-tutorial-->
-      <td ng-show="unitRole" ng-click="selectGroup(group)">
-        <span editable-text="group.capacityAdjustment" e-form="groupRowForm" e-name="capacityAdjustment">
-          {{group.capacityAdjustment}}
-        </span>
-      </td>
-      <!--/capacityAdjustment-->
-      <td ng-click="selectGroup(group)">
-        <span ng-show="group.hasSpace()">Available</span>
-        <span ng-hide="group.hasSpace()">Full</span>
-      </td>
-      <!--/capacity-->
-      <td ng-show="(project && selectedGroupSet.allowStudentsToManageGroups) || unitRole">
-        <div ng-show="project">
-          <span ng-show="group.hasSpace()">
-            <button
-              ng-click="joinGroup(group)"
-              ng-disabled="projectInGroup(group)"
-              class="btn btn-success btn-sm joinButton"
-              ng-show="!group.locked && !selectedGroupSet.locked"
-            >
-              <i class="fa fa-plus"></i> Join
-            </button>
-            <button class="btn btn-sm joinButton" ng-show="group.locked || selectedGroupSet.locked">
-              <i class="fa fa-lock"></i> Locked
-            </button>
-          </span>
-        </div>
-        <div ng-show="unitRole">
-          <form
-            editable-form
-            name="groupRowForm"
-            onbeforesave="updateGroup($data, group)"
-            ng-show="groupRowForm.$visible"
-            shown="inserted.id == group.id"
-          >
-            <button type="submit" ng-disabled="groupRowForm.$waiting" class="btn btn-default btn-sm">
-              <i class="fa fa-floppy-o"></i> Save
-            </button>
-            <button
-              type="button"
-              ng-disabled="groupRowForm.$waiting"
-              ng-click="groupRowForm.$cancel()"
-              class="btn btn-default btn-sm"
-            >
-              <i class="fa fa-times"></i> Cancel
-            </button>
-          </form>
-          <div ng-hide="groupRowForm.$visible">
-            <button ng-click="groupRowForm.$show()" class="btn btn-default btn-sm">
-              <i class="fa fa-pencil"></i> Edit
-            </button>
-            <a
-              class="btn btn-sm lockButton"
-              ng-class="{true: 'btn-warning', false: 'btn-info'}[!group.locked]"
-              ng-click="toggleLocked(group)"
-            >
-              <i ng-class="{true: 'fa fa-lock', false: 'fa fa-unlock'}[!group.locked]"></i>
-              {{!group.locked && "Lock" || "Unlock"}}
-            </a>
-            <button ng-click="deleteGroup(group)" class="btn btn-danger btn-sm">
-              <i class="fa fa-trash-o"></i> Delete
-            </button>
-          </div>
-          <!--/actions-->
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<div
-  class="panel-footer text-center"
-  ng-show="pagination.show || selectedGroupSet.keepGroupsInSameClass && shownGroups.length > 0 && !unitRole"
->
-  <pagination
-    ng-show="pagination.show"
-    total-items="pagination.totalSize"
-    ng-change="pagination.onChange()"
-    ng-model="pagination.currentPage"
-    items-per-page="pagination.pageSize"
-    max-size="pagination.maxSize"
-    class="pagination-sm"
-    boundary-links="true"
-    rotate="false"
-  >
-  </pagination>
-
-  <p ng-show="selectedGroupSet.keepGroupsInSameClass && shownGroups.length > 0 && !unitRole">
-    Can't see the group you need to join? Groups shown are limited to those in your allocated tutorials. Use the
-    <a ui-sref="projects/tutorials({projectId: project.id})">Tutorial List</a> to check and update your tutorial
-    enrolment if needed.
-  </p>
-</div>
diff --git a/src/app/groups/group-set-manager/group-set-manager.coffee b/src/app/groups/group-set-manager/group-set-manager.coffee
deleted file mode 100644
index 5e8506f7cb..0000000000
--- a/src/app/groups/group-set-manager/group-set-manager.coffee
+++ /dev/null
@@ -1,44 +0,0 @@
-angular.module('doubtfire.groups.group-set-manager', [])
-
-#
-# Manager directive for tutors to add and remove group
-# members from a group within a group set context
-#
-.directive('groupSetManager', ->
-  restrict: 'E'
-  templateUrl: 'groups/group-set-manager/group-set-manager.tpl.html'
-  scope:
-    unit: '='
-    unitRole: '='
-    project: '='
-    selectedGroupSet: '='
-    showGroupSetSelector: '=?'
-  controller: ($scope, newGroupService, gradeService, alertService) ->
-    if !$scope.unitRole? && !$scope.project?
-      throw Error "Group set group manager must have exactly one unit role or project"
-    # Reset member panel toolbar visibility
-    $scope.newGroupSelected = ->
-      $scope.showMemberPanelToolbar = false if $scope.unitRole?
-    $scope.groupMembersLoaded = ->
-      $scope.showMemberPanelToolbar = true if $scope.unitRole?
-
-    # Add new member to the group
-    $scope.addMember = (member) ->
-      $scope.selectedGroup.addMember(member)
-      $scope.selectedStudent = null
-
-    # Update name of group
-    $scope.updateGroup = (data) ->
-      newGroupService.update({
-        unitId: $scope.unit.id,
-        groupSetId: $scope.selectedGroupSet.id,
-        id: $scope.selectedGroup.id,
-      }, {
-        entity: data
-      }).subscribe({
-        next: (response) ->
-          alertService.success( "Group changed", 2000)
-        error: (response) ->
-          alertService.error( response, 6000)
-      })
-)
diff --git a/src/app/groups/group-set-manager/group-set-manager.component.html b/src/app/groups/group-set-manager/group-set-manager.component.html
new file mode 100644
index 0000000000..3c06e2f542
--- /dev/null
+++ b/src/app/groups/group-set-manager/group-set-manager.component.html
@@ -0,0 +1,76 @@
+<div class="flex w-full gap-3">
+  <f-group-selector
+    class="w-full"
+    [onSelect]="groupSelectHandler"
+    [project]="project"
+    [selectedGroup]="selectedGroup"
+    [selectedGroupSet]="selectedGroupSet"
+    [unit]="unit"
+    [unitRole]="unitRole"
+  >
+  </f-group-selector>
+
+  @if (selectedGroup) {
+    <mat-card appearance="outlined" class="flex w-full flex-col self-stretch">
+      <mat-card-header class="flex items-center justify-between">
+        <mat-card-title class="flex items-center"
+          >Members of
+          @if (!editingGroupName) {
+            {{ selectedGroup?.name }}
+            @if (unitRole || selectedGroup.groupSet?.allowStudentsToManageGroups) {
+              <button class="p-1" mat-icon-button (click)="startEditingGroupName()">
+                <mat-icon>edit</mat-icon>
+              </button>
+            }
+          } @else {
+            @if (unitRole || selectedGroup.groupSet?.allowStudentsToManageGroups) {
+              <mat-form-field appearance="outline" class="mt-[22px] ml-1">
+                <input matInput required [(ngModel)]="selectedGroup.name" />
+              </mat-form-field>
+              <button class="p-1" mat-icon-button (click)="updateGroup()">
+                <mat-icon>save</mat-icon>
+              </button>
+              <button class="p-1" mat-icon-button (click)="stopEditingGroupName()">
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+          }
+        </mat-card-title>
+        @if (selectedGroup.locked) {
+          <mat-icon>lock</mat-icon>
+        }
+      </mat-card-header>
+
+      <f-group-member-list
+        class="flex-1"
+        [project]="project"
+        [selectedGroup]="selectedGroup"
+        [unit]="unit"
+        [unitRole]="unitRole"
+      >
+      </f-group-member-list>
+      @if (unitRole) {
+        <mat-card-footer class="mt-auto">
+          <mat-form-field appearance="outline" class="mt-3 w-full px-3">
+            <input
+              matInput
+              placeholder="Enter student name or username..."
+              type="text"
+              [formControl]="control"
+              [matAutocomplete]="auto"
+            />
+            <mat-autocomplete
+              #auto="matAutocomplete"
+              [displayWith]="displayFn"
+              (optionSelected)="addMember($event.option.value)"
+            >
+              @for (project of filteredProjects | async; track project) {
+                <mat-option [value]="project"> {{ project.student.name }} </mat-option>
+              }
+            </mat-autocomplete>
+          </mat-form-field>
+        </mat-card-footer>
+      }
+    </mat-card>
+  }
+</div>
diff --git a/src/app/groups/group-set-manager/group-set-manager.component.scss b/src/app/groups/group-set-manager/group-set-manager.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/groups/group-set-manager/group-set-manager.component.spec.ts b/src/app/groups/group-set-manager/group-set-manager.component.spec.ts
new file mode 100644
index 0000000000..3ed7dcf22f
--- /dev/null
+++ b/src/app/groups/group-set-manager/group-set-manager.component.spec.ts
@@ -0,0 +1,53 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {Subject} from 'rxjs';
+import {Group} from 'src/app/api/models/doubtfire-model';
+import {GroupSetManagerComponent} from './group-set-manager.component';
+
+describe('GroupSetManagerComponent group-name updates', () => {
+  let component: GroupSetManagerComponent;
+  let updateResult: Subject<Group>;
+  let originalGroup: Group;
+  let nextGroup: Group;
+
+  beforeEach(() => {
+    updateResult = new Subject<Group>();
+    component = new GroupSetManagerComponent(
+      {update: vi.fn(() => updateResult)} as never,
+      {success: vi.fn(), error: vi.fn()} as never,
+    );
+    component.unit = {id: 1, studentsForGroupTypeAhead: () => []} as never;
+    originalGroup = {
+      id: 10,
+      name: 'Original name',
+      groupSet: {id: 20},
+      projects: [],
+    } as never;
+    nextGroup = {
+      id: 11,
+      name: 'Next group',
+      groupSet: {id: 20},
+      projects: [],
+    } as never;
+    component.selectedGroup = originalGroup;
+    component.startEditingGroupName();
+    originalGroup.name = 'Saved name';
+  });
+
+  it('keeps the submitted name when another group is selected before the request resolves', () => {
+    component.updateGroup();
+
+    component.newGroupSelected(nextGroup);
+    updateResult.next(originalGroup);
+
+    expect(originalGroup.name).toBe('Saved name');
+  });
+
+  it('restores the previous name if the pending update fails after selection changes', () => {
+    component.updateGroup();
+    component.newGroupSelected(nextGroup);
+
+    updateResult.error('update failed');
+
+    expect(originalGroup.name).toBe('Original name');
+  });
+});
diff --git a/src/app/groups/group-set-manager/group-set-manager.component.ts b/src/app/groups/group-set-manager/group-set-manager.component.ts
new file mode 100644
index 0000000000..62eb5d16d5
--- /dev/null
+++ b/src/app/groups/group-set-manager/group-set-manager.component.ts
@@ -0,0 +1,125 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable, map, startWith} from 'rxjs';
+import {Group, GroupSet, Project, Unit, UnitRole} from 'src/app/api/models/doubtfire-model';
+import {GroupService} from 'src/app/api/services/group.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-group-set-manager',
+  templateUrl: './group-set-manager.component.html',
+  styleUrls: ['./group-set-manager.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class GroupSetManagerComponent implements OnInit {
+  @Input() project: Project;
+  @Input() unit: Unit;
+  @Input() selectedGroupSet: GroupSet;
+  @Input() showGroupSetSelector: boolean;
+  @Input() unitRole: UnitRole;
+
+  public selectedGroup: Group;
+
+  editingGroupName = false;
+
+  control = new FormControl('');
+  projects: Project[] = [];
+  filteredProjects: Observable<Project[]>;
+
+  constructor(
+    private groupService: GroupService,
+    private alertService: AlertService,
+  ) {}
+
+  ngOnInit(): void {
+    this.filteredProjects = this.control.valueChanges.pipe(
+      startWith(''),
+      map((value) => this._filter(value)),
+    );
+  }
+
+  get groupSelectHandler() {
+    return (group: Group) => this.newGroupSelected(group);
+  }
+
+  displayFn(project: Project): string {
+    return project && project.student.name ? project.student.name : '';
+  }
+
+  newGroupSelected(group: Group) {
+    if (this.selectedGroup) {
+      this.selectedGroup.name = this.originalGroupName;
+    }
+    this.editingGroupName = false;
+    this.selectedGroup = group;
+
+    const students = this.unit.studentsForGroupTypeAhead(group) || [];
+    this.projects = students.filter((project) => !group.projects.find((p) => project.id === p.id));
+
+    this.originalGroupName = group.name;
+  }
+
+  private _filter(value: string | Project): Project[] {
+    if (typeof value !== 'string') {
+      return;
+    }
+
+    const filterValue = value.toLowerCase();
+    return this.projects.filter(
+      (project) =>
+        project.student.name.toLowerCase().includes(filterValue.toLowerCase()) && // Find by name
+        !this.selectedGroup.projects.find((p) => project.id === p.id), // Not already assigned to the group
+    );
+  }
+
+  addMember(project: Project) {
+    this.selectedGroup.addMember(project);
+    this.control.setValue('');
+  }
+
+  private originalGroupName: string;
+  startEditingGroupName() {
+    this.originalGroupName = this.selectedGroup.name;
+    this.editingGroupName = true;
+  }
+
+  stopEditingGroupName() {
+    this.selectedGroup.name = this.originalGroupName;
+    this.editingGroupName = false;
+  }
+
+  updateGroup() {
+    this.editingGroupName = false;
+    // Capture the group being saved and its baseline now: the response is
+    // async and the user may select or edit another group before it arrives.
+    const group = this.selectedGroup;
+    const savedName = group.name;
+    const previousName = this.originalGroupName;
+    // Treat the submitted name as the new selection baseline immediately. A
+    // user can select another group before the request completes, and
+    // newGroupSelected() must not undo the name that is already being saved.
+    // The captured previousName remains available for an error rollback.
+    this.originalGroupName = savedName;
+    this.groupService
+      .update(
+        {
+          unitId: this.unit.id,
+          groupSetId: group.groupSet.id,
+          id: group.id,
+        },
+        {
+          entity: group,
+        },
+      )
+      .subscribe({
+        next: () => {
+          this.alertService.success('Successfully updated group', 3000);
+        },
+        error: (error) => {
+          group.name = previousName;
+          this.alertService.error(`Failed to update group: ${error}`, 6000);
+        },
+      });
+  }
+}
diff --git a/src/app/groups/group-set-manager/group-set-manager.scss b/src/app/groups/group-set-manager/group-set-manager.scss
deleted file mode 100644
index b65662abca..0000000000
--- a/src/app/groups/group-set-manager/group-set-manager.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@media (min-width: $screen-lg) {
-  group-set-manager {
-    display: block;
-    @include panel-row;
-  }
-}
diff --git a/src/app/groups/group-set-manager/group-set-manager.tpl.html b/src/app/groups/group-set-manager/group-set-manager.tpl.html
deleted file mode 100644
index 09386b1daa..0000000000
--- a/src/app/groups/group-set-manager/group-set-manager.tpl.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<group-selector
-  unit="unit"
-  unit-role="unitRole"
-  project="project"
-  selected-group="selectedGroup"
-  selected-group-set="selectedGroupSet"
-  show-group-set-selector="showGroupSetSelector"
-  on-select="newGroupSelected"
-  class="panel panel-primary"
->
-</group-selector>
-<div class="panel panel-default panel-group-memberships" ng-show="selectedGroup">
-  <div class="panel-heading">
-    <div class="row">
-      <div class="col-xs-11">
-        <h4 class="panel-title">
-          Members of
-          <a
-            editable-text="selectedGroup.name"
-            class="strong"
-            ng-show="unitRole || selectedGroupSet.allowStudentsToManageGroups"
-            onaftersave="updateGroup(selectedGroup)"
-            >{{selectedGroup.name}}</a
-          >
-        </h4>
-      </div>
-      <div class="col-xs-1 text-right">
-        <i class="fa fa-lock" ng-show="selectedGroup.locked" tooltip="This group is locked."></i>
-      </div>
-    </div>
-  </div>
-  <!--/panel-heading-->
-  <div class="panel-body panel-toolbar" ng-show="showMemberPanelToolbar">
-    <form name="addMemberForm" ng-submit="addMember(selectedStudent)" class="input-group">
-      <input
-        type="search"
-        class="form-control"
-        placeholder="Enter student name or username..."
-        ng-model="selectedStudent"
-        typeahead-select-on-exact="true"
-        typeahead-on-select="addMember(selectedStudent)"
-        typeahead="
-          project as project.student.name
-          for project in unit.studentsForGroupTypeAhead(selectedGroup) |
-          projectFilter:$viewValue |
-          limitTo:8"
-        typeahead-wait-ms="200"
-        typeahead-editable="false"
-        autocomplete="off"
-      />
-      <div class="input-group-btn">
-        <button type="submit" ng-disabled="!selectedStudent.id" class="btn btn-success">
-          <i class="fa fa-plus"></i> Add Member
-        </button>
-      </div>
-    </form>
-  </div>
-  <!--/panel-body-->
-  <group-member-list
-    unit="unit"
-    unit-role="unitRole"
-    project="project"
-    selected-group="selectedGroup"
-    on-members-loaded="groupMembersLoaded"
-  >
-  </group-member-list>
-</div>
-<!--/panel-group-memberships-->
diff --git a/src/app/groups/group-set-selector/group-set-selector.coffee b/src/app/groups/group-set-selector/group-set-selector.coffee
deleted file mode 100644
index 62e99b74d0..0000000000
--- a/src/app/groups/group-set-selector/group-set-selector.coffee
+++ /dev/null
@@ -1,18 +0,0 @@
-angular.module('doubtfire.groups.group-set-selector', [])
-
-#
-# Directive that can switch context of a specific group set
-#
-.directive('groupSetSelector', ->
-  restrict: 'E'
-  templateUrl: 'groups/group-set-selector/group-set-selector.tpl.html'
-  scope:
-    unit: '='
-    selectedGroupSet: '=ngModel'
-    onSelectGroupSet: '=onChange'
-  controller: ($scope) ->
-    unless $scope.unit?
-      throw Error "Unit not supplied to group set selector"
-    $scope.selectGroupSet = ->
-      $scope.onSelectGroupSet?($scope.selectedGroupSet)
-)
diff --git a/src/app/groups/group-set-selector/group-set-selector.component.html b/src/app/groups/group-set-selector/group-set-selector.component.html
new file mode 100644
index 0000000000..09ff83321d
--- /dev/null
+++ b/src/app/groups/group-set-selector/group-set-selector.component.html
@@ -0,0 +1,7 @@
+<mat-form-field>
+  <mat-select [(ngModel)]="selectedGroupSet" (ngModelChange)="selectGroupSet($event)">
+    @for (gs of unit.groupSets; track gs.id) {
+      <mat-option [value]="gs">{{ gs.name }}</mat-option>
+    }
+  </mat-select>
+</mat-form-field>
diff --git a/src/app/groups/group-set-selector/group-set-selector.scss b/src/app/groups/group-set-selector/group-set-selector.component.scss
similarity index 100%
rename from src/app/groups/group-set-selector/group-set-selector.scss
rename to src/app/groups/group-set-selector/group-set-selector.component.scss
diff --git a/src/app/groups/group-set-selector/group-set-selector.component.ts b/src/app/groups/group-set-selector/group-set-selector.component.ts
new file mode 100644
index 0000000000..b6b7103d67
--- /dev/null
+++ b/src/app/groups/group-set-selector/group-set-selector.component.ts
@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import {GroupSet, Unit} from 'src/app/api/models/doubtfire-model';
+
+@Component({
+  selector: 'group-set-selector',
+  templateUrl: './group-set-selector.component.html',
+  styleUrls: ['./group-set-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class GroupSetSelectorComponent implements OnInit {
+  @Input() unit: Unit;
+  @Input() selectedGroupSet: GroupSet;
+  @Output() selectedGroupSetChange: EventEmitter<GroupSet> = new EventEmitter();
+
+  ngOnInit(): void {
+    if (!this.unit) {
+      throw new Error('Unit not supplied to group set selector');
+    }
+  }
+
+  /**
+   * Emits the selected group set and updates the parent component.
+   *
+   * Also updates the local state.
+   *
+   * @param {GroupSet} groupSet
+   */
+  selectGroupSet(groupSet: GroupSet): void {
+    this.selectedGroupSet = groupSet;
+    this.selectedGroupSetChange.emit(this.selectedGroupSet);
+  }
+}
diff --git a/src/app/groups/group-set-selector/group-set-selector.tpl.html b/src/app/groups/group-set-selector/group-set-selector.tpl.html
deleted file mode 100644
index e735686bb4..0000000000
--- a/src/app/groups/group-set-selector/group-set-selector.tpl.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<select
-  class="form-control"
-  ng-change="selectGroupSet()"
-  ng-options="gs as gs.name for gs in unit.groupSets"
-  ng-model="selectedGroupSet">
-</select>
diff --git a/src/app/groups/groups.coffee b/src/app/groups/groups.coffee
deleted file mode 100644
index 031080f0b1..0000000000
--- a/src/app/groups/groups.coffee
+++ /dev/null
@@ -1,7 +0,0 @@
-angular.module('doubtfire.groups', [
-  'doubtfire.groups.group-member-contribution-assigner'
-  'doubtfire.groups.group-member-list'
-  'doubtfire.groups.group-selector'
-  'doubtfire.groups.group-set-manager'
-  'doubtfire.groups.group-set-selector'
-])
diff --git a/src/app/home/splash-screen/LoadingService.service.ts b/src/app/home/splash-screen/LoadingService.service.ts
index 471a6f3356..ff66ce1229 100644
--- a/src/app/home/splash-screen/LoadingService.service.ts
+++ b/src/app/home/splash-screen/LoadingService.service.ts
@@ -5,7 +5,7 @@ import {BehaviorSubject} from 'rxjs';
   providedIn: 'root',
 })
 export class LoadingService {
-  private loadingSubject = new BehaviorSubject<boolean>(false);
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   loading$ = this.loadingSubject.asObservable();
 
@@ -16,6 +16,4 @@ export class LoadingService {
   loadingOff() {
     this.loadingSubject.next(false);
   }
-
-  constructor() {}
 }
diff --git a/src/app/home/splash-screen/splash-screen.component.spec.ts b/src/app/home/splash-screen/splash-screen.component.spec.ts
index 152b2a2bea..6f13f45e5f 100644
--- a/src/app/home/splash-screen/splash-screen.component.spec.ts
+++ b/src/app/home/splash-screen/splash-screen.component.spec.ts
@@ -1,35 +1,32 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BehaviorSubject } from 'rxjs';
-import { GlobalStateService } from 'src/app/projects/states/index/global-state.service';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {LoadingService} from './LoadingService.service';
+import {SplashScreenComponent} from './splash-screen.component';
 
-import { SplashScreenComponent } from './splash-screen.component';
+const emptyProvider = {};
 
 describe('SplashScreenComponent', () => {
   let component: SplashScreenComponent;
   let fixture: ComponentFixture<SplashScreenComponent>;
-  let globalStateServiceStub: Partial<GlobalStateService>;
 
-  beforeEach(
-    waitForAsync(() => {
-      const isLoadingSubject = new BehaviorSubject<boolean>(true);
-
-      globalStateServiceStub = {
-        isLoadingSubject: isLoadingSubject,
-      };
-
-      TestBed.configureTestingModule({
-        declarations: [SplashScreenComponent],
-        imports: [BrowserAnimationsModule],
-        providers: [{ provide: GlobalStateService, useValue: globalStateServiceStub }],
-      }).compileComponents();
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SplashScreenComponent],
+      providers: [
+        {provide: GlobalStateService, useValue: emptyProvider},
+        {provide: LoadingService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-  );
+      .overrideComponent(SplashScreenComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SplashScreenComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/home/splash-screen/splash-screen.component.ts b/src/app/home/splash-screen/splash-screen.component.ts
index a037652d4f..f53ae1d1ad 100644
--- a/src/app/home/splash-screen/splash-screen.component.ts
+++ b/src/app/home/splash-screen/splash-screen.component.ts
@@ -1,13 +1,15 @@
-import {Component, ContentChild, OnInit, TemplateRef} from '@angular/core';
 import {AnimationOptions} from 'ngx-lottie';
+import {ChangeDetectionStrategy, Component, ContentChild, OnInit, TemplateRef} from '@angular/core';
 import {Observable} from 'rxjs';
 import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
 import {LoadingService} from './LoadingService.service';
-import {AnimationItem} from 'lottie-web';
+
 @Component({
   selector: 'splash-screen',
   templateUrl: './splash-screen.component.html',
   styleUrls: ['./splash-screen.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class SplashScreenComponent implements OnInit {
   constructor(
@@ -39,5 +41,4 @@ export class SplashScreenComponent implements OnInit {
       }
     });
   }
-
 }
diff --git a/src/app/home/states/home/home.component.html b/src/app/home/states/home/home.component.html
index e668fe00fd..da5c46b52c 100644
--- a/src/app/home/states/home/home.component.html
+++ b/src/app/home/states/home/home.component.html
@@ -1,135 +1,167 @@
-<div id="home" class="w-full px-20">
-  <div class="text-center" [hidden]="!notEnrolled">
-    <h1>You are not enrolled in {{ externalName.value }}.</h1>
-    <p class="mat-lead">Contact your unit convenor or tutor to enrol you in a subject.</p>
-  </div>
-
-  <div
-    class="text-center"
-    *ngIf="!notEnrolled && projects?.length === 0 && unitRoles?.length === 0"
-  >
-    <h1 class="mat-headline-5">You are not enrolled in any {{ externalName.value }} units.</h1>
-    <p class="mat-lead">Contact your unit convenor or tutor to enrol you in a subject.</p>
-  </div>
-
-  <div [hidden]="unitRoles?.length === 0">
+<f-page-container id="home">
+  <a class="home-hub-entry" routerLink="/unit-hub">
+    <mat-icon aria-hidden="true">campaign</mat-icon>
+    <span
+      ><strong>Unit Hub</strong
+      ><span>Your unit announcements, HelpHubs and upcoming classes, together.</span></span
+    >
+    <mat-icon aria-hidden="true">arrow_forward</mat-icon>
+  </a>
+  @if (notEnrolled) {
+    <div class="text-center">
+      <h1 class="mat-headline-5">You are not enrolled in any {{ externalName.value }} units.</h1>
+      <p class="mat-lead">Contact your unit convenor or tutor to enrol you in a subject.</p>
+    </div>
+  }
+  <div [hidden]="!unitRoles?.length">
     <h2>Units you teach</h2>
-    <div [hidden]="!loadingUnitRoles" style="height: 185px">
-      <mat-spinner diameter="40" color="accent"></mat-spinner>
+    <div style="height: 185px" [hidden]="!loadingUnitRoles">
+      <mat-spinner color="accent" diameter="40"></mat-spinner>
     </div>
-    <div [hidden]="loadingUnitRoles" class="flex flex-row flex-wrap items-center">
-      <div *ngFor="let unitRole of unitRoles | isActiveUnitRole as filteredUnitRoles">
-        <div
-          uiSref="units/tasks/inbox"
-          [uiParams]="{unitId: unitRole.unit?.id}"
-          class="removeStyle"
-          *ngIf="!unitRole.unit.teachingPeriod || unitRole.unit.teachingPeriod?.active"
-        >
-          <mat-card class="unit-card">
-            <mat-card-header>
-              <mat-card-title class="f-card-title">{{ unitRole.unit?.name }}</mat-card-title>
-              <mat-card-subtitle>{{ unitRole.unit?.code }}</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-              <mat-divider></mat-divider>
-            </mat-card-content>
-            <mat-card-actions>
-              <f-chip>
-                {{ unitRole.teachingPeriod?.name || showDate(unitRole.unit.startDate) }}
-              </f-chip>
-              <f-chip>
-                {{ unitRole.role }}
-              </f-chip>
-            </mat-card-actions>
-            <mat-card-footer
-              matTooltip="{{ unitRole.unit.teachingPeriodProgress }}% through the teaching period."
+    <div class="flex flex-row flex-wrap items-center" [hidden]="loadingUnitRoles">
+      @for (unitRole of unitRoles | isActiveUnitRole; track unitRole) {
+        <div>
+          @if (!unitRole.unit.teachingPeriod || unitRole.unit.teachingPeriod?.active) {
+            <div
+              class="removeStyle"
+              [routerLink]="[
+                '/units',
+                $safeNavigationMigration(unitRole.unit?.id),
+                'tasks',
+                'inbox',
+              ]"
             >
-              <mat-progress-bar
-                class="unit-progress-slider"
-                mode="determinate"
-                [value]="unitRole.unit.teachingPeriodProgress"
-              ></mat-progress-bar>
-            </mat-card-footer>
-          </mat-card>
+              <mat-card class="unit-card">
+                <mat-card-header>
+                  <mat-card-title class="f-card-title">{{ unitRole.unit?.name }}</mat-card-title>
+                  <mat-card-subtitle>{{ unitRole.unit?.code }}</mat-card-subtitle>
+                </mat-card-header>
+                <mat-card-content>
+                  <mat-divider></mat-divider>
+                </mat-card-content>
+                <mat-card-actions>
+                  <f-chip>
+                    {{ unitRole.unit.teachingPeriod?.name || showDate(unitRole.unit.startDate) }}
+                  </f-chip>
+                  <f-chip>
+                    {{ unitRole.role }}
+                  </f-chip>
+                </mat-card-actions>
+                <mat-card-footer
+                  matTooltip="{{
+                    unitRole.unit.teachingPeriodProgress
+                  }}% through the teaching period."
+                >
+                  <mat-progress-bar
+                    class="unit-progress-slider"
+                    mode="determinate"
+                    [value]="unitRole.unit.teachingPeriodProgress"
+                  ></mat-progress-bar>
+                </mat-card-footer>
+              </mat-card>
+            </div>
+          }
         </div>
-      </div>
+      }
       <mat-card
         appearance="outlined"
         class="unit-card"
-        [hidden]="(unitRoles | isActiveUnitRole)?.length > 0"
+        [hidden]="$safeNavigationMigration((unitRoles | isActiveUnitRole)?.length) > 0"
       >
         <mat-card-content>
           <p>You do not teach any active units</p>
         </mat-card-content></mat-card
       >
 
-      <a uiSref="view-all-units">
+      <a routerLink="/view-all-units">
         <button
-          matTooltip="View previous units"
-          matTooltipPosition="above"
+          aria-label="view all units"
           color="primary"
-          mat-fab
           extended
-          aria-label="view all units"
+          mat-fab
+          matTooltip="View previous units"
+          matTooltipPosition="above"
         >
-          <mat-icon class="items-center" style="color: white; padding-right: 1px">history</mat-icon
+          <mat-icon
+            class="items-center"
+            style="color: var(--ot-color-on-primary, #fff); padding-right: 1px"
+            >history</mat-icon
           >View all
         </button>
       </a>
     </div>
   </div>
-  <div [hidden]="notEnrolled">
-    <div class="my-4" [hidden]="projects?.length === 0">
+  <div>
+    @if (unitRoles?.length && projects?.length) {
+      <mat-divider class="my-5"></mat-divider>
+    }
+    <div class="my-2.5" [hidden]="projects?.length === 0">
       <h2>Enrolled units</h2>
-      <div [hidden]="!loadingProjects" style="height: 185px">
-        <mat-spinner diameter="40" color="accent"></mat-spinner>
+      <div style="height: 185px" [hidden]="!loadingProjects">
+        <mat-spinner color="accent" diameter="40"></mat-spinner>
       </div>
 
-      <div [hidden]="loadingProjects" class="flex flex-row flex-wrap items-center">
-        <div *ngFor="let project of projects">
-          <div
-            *ngIf="project.unit.isActive"
-            uiSref="projects/dashboard"
-            [uiParams]="{projectId: project.id, taskAbbr: ''}"
-            class="removeStyle"
-          >
-            <mat-card class="unit-card">
-              <mat-card-header>
-                <mat-card-title class="f-card-title">{{ project.unit.name }}</mat-card-title>
-                <mat-card-subtitle>{{ project.unit.code }}</mat-card-subtitle>
-              </mat-card-header>
-              <mat-card-content>
-                <mat-divider></mat-divider>
-              </mat-card-content>
-              <mat-card-actions>
-                <f-chip>
-                  {{ project.unit.teachingPeriod?.name || showDate(project.unit.startDate) }}
-                </f-chip>
-              </mat-card-actions>
-              <mat-card-footer
-                matTooltip="{{ project.unit.teachingPeriodProgress }}% through the teaching period."
-              >
-                <mat-progress-bar
-                  mode="determinate"
-                  [value]="project.unit.teachingPeriodProgress"
-                ></mat-progress-bar>
-              </mat-card-footer>
-            </mat-card>
+      <div class="flex flex-row flex-wrap items-center" [hidden]="loadingProjects">
+        @for (project of projects; track project) {
+          <div>
+            @if (project.unit.isActive) {
+              <div class="removeStyle" [routerLink]="['/projects', project.id, 'dashboard']">
+                <mat-card class="unit-card">
+                  <mat-card-header>
+                    <mat-card-title class="f-card-title">{{ project.unit.name }}</mat-card-title>
+                    <mat-card-subtitle>{{ project.unit.code }}</mat-card-subtitle>
+                  </mat-card-header>
+                  <mat-card-content>
+                    <mat-divider></mat-divider>
+                  </mat-card-content>
+                  <mat-card-actions>
+                    <f-chip>
+                      {{ project.unit.teachingPeriod?.name || showDate(project.unit.startDate) }}
+                    </f-chip>
+                  </mat-card-actions>
+                  <mat-card-footer
+                    matTooltip="{{
+                      project.unit.teachingPeriodProgress
+                    }}% through the teaching period."
+                  >
+                    <mat-progress-bar
+                      mode="determinate"
+                      [value]="project.unit.teachingPeriodProgress"
+                    ></mat-progress-bar>
+                  </mat-card-footer>
+                </mat-card>
+              </div>
+            }
           </div>
+        }
+        <!-- Cross-unit dashboard feature -->
+        <div class="flex h-60 flex-col items-start justify-around">
+          <a routerLink="/dashboard">
+            <button
+              aria-label="view cross-unit dashboard"
+              color="primary"
+              extended
+              mat-fab
+              matTooltip="View current units"
+              matTooltipPosition="above"
+            >
+              <mat-icon style="color: white">dashboard</mat-icon> View all
+            </button>
+          </a>
+          <a routerLink="/view-all-projects">
+            <button
+              aria-label="view previous projects"
+              color="primary"
+              extended
+              mat-fab
+              matTooltip="View previous units"
+              matTooltipPosition="above"
+            >
+              <mat-icon style="color: white">history</mat-icon> View previous
+            </button>
+          </a>
         </div>
-        <a uiSref="view-all-projects">
-          <button
-            matTooltip="View previous units"
-            matTooltipPosition="above"
-            color="primary"
-            mat-fab
-            extended
-            aria-label="view all projects"
-          >
-            <mat-icon style="color: white">history</mat-icon> View all
-          </button>
-        </a>
       </div>
     </div>
   </div>
-</div>
+</f-page-container>
diff --git a/src/app/home/states/home/home.component.scss b/src/app/home/states/home/home.component.scss
index ea7ef284e4..9d847b5b7c 100644
--- a/src/app/home/states/home/home.component.scss
+++ b/src/app/home/states/home/home.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../theme.scss';
+@use 'theme' as *;
 
 #home {
   padding-top: 10px;
@@ -42,8 +42,8 @@
 
   .f-card-title {
     font-size: 18px;
-    max-height: 30px;
-    white-space: nowrap;
+    min-height: 65px; // Ensures consistent card height while allowing text to wrap
+    white-space: wrap;
     text-overflow: ellipsis;
     width: 100%;
     overflow: hidden;
@@ -55,7 +55,7 @@
     color: white;
     opacity: 1;
     border-style: none;
-    --mdc-chip-disabled-label-text-color: white;
+    --mat-chip-disabled-label-text-color: white;
   }
 }
 
@@ -86,6 +86,41 @@
 }
 
 :host {
-  --mdc-linear-progress-track-height: 16px;
-  --mdc-linear-progress-active-indicator-height: 16px;
+  --mat-progress-bar-track-height: 16px;
+  --mat-progress-bar-active-indicator-height: 16px;
+}
+
+.home-hub-entry {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  margin: 8px 0 24px;
+  border: 1px solid var(--ot-color-border, #c6d6dd);
+  border-radius: 14px;
+  color: var(--ot-color-link);
+  background: var(--ot-color-surface, #fff);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  > span {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  strong {
+    font-size: 1.1rem;
+  }
+  > span > span {
+    font-size: 0.88rem;
+    color: var(--ot-color-text, #243746);
+  }
+  > mat-icon {
+    flex-shrink: 0;
+  }
+  &:focus-visible {
+    outline: 3px solid var(--ot-color-primary, #006b80);
+    outline-offset: 3px;
+  }
 }
diff --git a/src/app/home/states/home/home.component.spec.ts b/src/app/home/states/home/home.component.spec.ts
new file mode 100644
index 0000000000..e716980640
--- /dev/null
+++ b/src/app/home/states/home/home.component.spec.ts
@@ -0,0 +1,63 @@
+import {describe, expect, it, vi} from 'vitest';
+import {BehaviorSubject, of} from 'rxjs';
+import {HomeComponent} from './home.component';
+
+// The home template goes through the migration shim, so these tests drive the
+// component class directly rather than rendering it.
+function homeFor(projects: unknown[], unitRoles: unknown[]) {
+  const loading: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  const globalState = {
+    showHeader: vi.fn(),
+    setView: vi.fn(),
+    unitRolesSubject: of(unitRoles),
+    projectsSubject: of(projects),
+    onLoad: (run: () => void) => {
+      loading.subscribe((isLoading) => {
+        if (!isLoading) {
+          run();
+        }
+      });
+    },
+  };
+  const component = new HomeComponent(
+    {ExternalName: {value: 'OnTrack'}} as never,
+    globalState as never,
+    {currentUser: {role: 'Student', preferredName: 'Sam'}} as never,
+    {showDate: vi.fn()} as never,
+    {navigateByUrl: vi.fn()} as never,
+  );
+  component.ngOnInit();
+  return {component, loading};
+}
+
+describe('HomeComponent not enrolled message', () => {
+  it('stays hidden while units and projects are still loading', () => {
+    const {component} = homeFor([], []);
+
+    expect(component.notEnrolled).toBe(false);
+  });
+
+  it('shows once loading finishes with no projects and no unit roles', () => {
+    const {component, loading} = homeFor([], []);
+
+    loading.next(false);
+
+    expect(component.notEnrolled).toBe(true);
+  });
+
+  it('stays hidden for a student with a project', () => {
+    const {component, loading} = homeFor([{unit: {myRole: 'Student'}}], []);
+
+    loading.next(false);
+
+    expect(component.notEnrolled).toBe(false);
+  });
+
+  it('stays hidden for staff with a unit role', () => {
+    const {component, loading} = homeFor([], [{id: 1}]);
+
+    loading.next(false);
+
+    expect(component.notEnrolled).toBe(false);
+  });
+});
diff --git a/src/app/home/states/home/home.component.ts b/src/app/home/states/home/home.component.ts
index ece46282a3..68ec4b7ecc 100644
--- a/src/app/home/states/home/home.component.ts
+++ b/src/app/home/states/home/home.component.ts
@@ -1,56 +1,49 @@
-import {Component, Inject, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';
+import {Project, UnitRole, User, UserService} from 'src/app/api/models/doubtfire-model';
+import {DateService} from 'src/app/common/services/date.service';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
-import {analyticsService, dateService} from 'src/app/ajs-upgraded-providers';
-import {UIRouter} from '@uirouter/angular';
 import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
-import {Project, UnitRole, User, UserService} from 'src/app/api/models/doubtfire-model';
-import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'home',
   templateUrl: 'home.component.html',
   styleUrls: ['home.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class HomeComponent implements OnInit, OnDestroy {
   projects: Project[];
   unitRoles: UnitRole[];
   showSpinner: boolean;
-  dataLoaded: boolean;
-  notEnrolled: boolean;
+  dataLoaded = false;
   ifAdmin: boolean;
   ifConvenor: boolean;
   loadingUnitRoles: boolean;
   loadingProjects: boolean;
 
   constructor(
-    private renderer: Renderer2,
     private constants: DoubtfireConstants,
     private globalState: GlobalStateService,
     private userService: UserService,
-    @Inject(analyticsService) private AnalyticsService: any,
-    @Inject(dateService) private DateService: any,
-    @Inject(UIRouter) private router: UIRouter,
+    @Inject(DateService) private DateService: DateService,
+    private router: Router,
   ) {
-    // this.renderer.setStyle(document.body, 'background-color', '#f0f2f5');
     // projects and units are loaded as part of global state service at login
   }
 
   public externalName = this.constants.ExternalName;
-  public userFirstName = this.currentUser.nickname || this.currentUser.firstName;
+  public userFirstName = this.currentUser.preferredName;
 
   private subscriptions: Subscription[] = [];
 
   ngOnDestroy(): void {
-    // this.renderer.setStyle(document.body, 'background-color', '#fff');
     this.subscriptions.forEach((sub) => sub.unsubscribe());
   }
 
   ngOnInit(): void {
-    if (this.userService.isAnonymousUser()) {
-      this.router.stateService.go('sign_in');
-    }
-
-    this.AnalyticsService.event('Home', 'Viewed Home page');
+    this.globalState.showHeader();
     this.globalState.setView(ViewType.OTHER);
 
     this.loadingUnitRoles = true;
@@ -59,7 +52,6 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.globalState.unitRolesSubject.subscribe({
         next: (unitRoles) => this.unitRolesLoaded(unitRoles),
-        error: (err) => {},
       }),
     );
 
@@ -69,18 +61,25 @@ export class HomeComponent implements OnInit, OnDestroy {
           projects = projects.filter((project) => project.unit.myRole === 'Student');
           this.projectsLoaded(projects);
         },
-        error: (err) => {},
       }),
     );
 
-    this.notEnrolled = this.checkEnrolled();
-
     if (this.currentUser.role === 'Auditor') {
-      this.router.stateService.go('admin/units');
+      this.router.navigateByUrl('/admin/units');
     }
 
     this.ifAdmin = this.currentUser.role === 'Admin';
     this.ifConvenor = this.currentUser.role === 'Convenor';
+
+    // Both lists start out empty before the first load finishes, so wait for it before
+    // deciding the user has no units.
+    this.globalState.onLoad(() => {
+      this.dataLoaded = true;
+    });
+  }
+
+  get notEnrolled(): boolean {
+    return this.dataLoaded && this.projects?.length === 0 && this.unitRoles?.length === 0;
   }
 
   get currentUser(): User {
@@ -97,14 +96,5 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.loadingProjects = false;
   }
 
-  checkEnrolled(): boolean {
-    if (this.unitRoles != null || this.projects != null) return false;
-
-    return (
-      (this.unitRoles?.length === 0 && this.currentUser.role === 'Tutor') ||
-      (this.projects?.length === 0 && this.currentUser.role === 'Student')
-    );
-  }
-
   showDate = this.DateService.showDate;
 }
diff --git a/src/app/home/states/lti-dashboard/lti-dashboard.component.html b/src/app/home/states/lti-dashboard/lti-dashboard.component.html
new file mode 100644
index 0000000000..6be88fafcf
--- /dev/null
+++ b/src/app/home/states/lti-dashboard/lti-dashboard.component.html
@@ -0,0 +1,101 @@
+<div class="h-screen w-full items-center justify-center px-12" id="home">
+  <div class="mx-auto flex h-screen w-full max-w-2xl flex-col items-center justify-center gap-3">
+    <div class="flex items-center justify-center">
+      <mat-icon
+        aria-label="Formatif logo"
+        class="formatif-icon size-[100px]"
+        svgIcon="formatif-logo"
+      ></mat-icon>
+      <h1 class="m-0 ml-3 text-4xl">OnTrack</h1>
+    </div>
+
+    @if (isLoading) {
+      @if (unauthorised) {
+        <div class="w-full rounded-lg bg-red-200 p-3 text-center font-semibold text-red-800">
+          An error occurred. Please refresh the page.
+        </div>
+      } @else {
+        <!-- TODO: spinner -->
+        <p>Loading...</p>
+      }
+    } @else {
+      <div class="flex justify-center gap-3">
+        @if (currentUser?.systemRole === 'Convenor' || currentUser?.systemRole === 'Admin') {
+          <button
+            aria-label=""
+            class="relative size-[60px]"
+            color="default"
+            mat-fab
+            matTooltip="Sync enrolments"
+            matTooltipPosition="above"
+            [disabled]="!linkedUnit || isSyncingEnrolments || isSyncingGrades"
+            [ngClass]="{'bg-gray-300': isSyncingEnrolments}"
+            (click)="syncEnrolments()"
+          >
+            @if (isSyncingEnrolments) {
+              <mat-spinner
+                class="absolute top-1/2 left-1/2 z-50 -translate-1/2"
+                diameter="35"
+              ></mat-spinner>
+            }
+            <mat-icon mat-icon-button>people</mat-icon>
+          </button>
+          <button
+            aria-label=""
+            class="relative size-[60px]"
+            color="default"
+            mat-fab
+            matTooltip="Sync grades"
+            matTooltipPosition="above"
+            [disabled]="!linkedUnit || isSyncingEnrolments || isSyncingGrades"
+            [ngClass]="{'bg-gray-300': isSyncingGrades}"
+            (click)="syncStudentsGrades()"
+          >
+            <mat-icon mat-icon-button>grade</mat-icon>
+
+            @if (isSyncingGrades) {
+              <mat-spinner
+                class="absolute top-1/2 left-1/2 z-50 -translate-1/2"
+                diameter="35"
+              ></mat-spinner>
+            }
+          </button>
+        }
+      </div>
+      <button
+        class="my-3 h-[50px] w-full max-w-lg"
+        color="primary"
+        extended
+        mat-fab
+        target="_blank"
+        (click)="launchApplication()"
+      >
+        <mat-icon>rocket_launch</mat-icon>
+        Launch {{ linkedUnit ? linkedUnit.code : 'OnTrack' }}
+      </button>
+      <div class="mt-2.5 w-full text-center text-gray-300">
+        @if (linkedUnit) {
+          {{ linkedUnit.code }} &mdash; {{ linkedUnit.name }}
+          @if (currentUser?.systemRole === 'Convenor' || currentUser?.systemRole === 'Admin') {
+            <br />
+            <button class="text-blue-400 underline" mat-button (click)="removeLink()">
+              Unlink
+            </button>
+          }
+        } @else {
+          This course has not yet been linked to an OnTrack Unit.
+
+          @if (currentUser?.systemRole === 'Convenor' || currentUser?.systemRole === 'Admin') {
+            <br />
+            <button class="text-blue-400 underline" mat-button (click)="goToLinkUnit()">
+              Link it now
+            </button>
+          } @else {
+            <br />
+            Only OnTrack staff are permitted to link this course.
+          }
+        }
+      </div>
+    }
+  </div>
+</div>
diff --git a/src/app/home/states/lti-dashboard/lti-dashboard.component.scss b/src/app/home/states/lti-dashboard/lti-dashboard.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/home/states/lti-dashboard/lti-dashboard.component.ts b/src/app/home/states/lti-dashboard/lti-dashboard.component.ts
new file mode 100644
index 0000000000..4cdcaf7df9
--- /dev/null
+++ b/src/app/home/states/lti-dashboard/lti-dashboard.component.ts
@@ -0,0 +1,217 @@
+import {AfterViewInit, ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Router} from '@angular/router';
+import {ProjectService, User} from 'src/app/api/models/doubtfire-model';
+import {Unit} from 'src/app/api/models/unit';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {LtiService} from 'src/app/api/services/lti.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {CsvResultModalService} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-lti-dashboard',
+  templateUrl: 'lti-dashboard.component.html',
+  styleUrls: ['lti-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class LtiDashboardComponent implements AfterViewInit {
+  constructor(
+    private router: Router,
+    private ltiService: LtiService,
+    private userService: UserService,
+    private authenticationService: AuthenticationService,
+    private alertsService: AlertService,
+    private unitService: UnitService,
+    private projectService: ProjectService,
+    private confirmationModalService: ConfirmationModalService,
+    private csvResultModalService: CsvResultModalService,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
+  ) {}
+
+  @Input() ltik: string;
+
+  // linkedUnit: UnitLink;
+  linkedUnit: Unit;
+  currentUser: User;
+  unauthorised: boolean = false;
+
+  loadingState: 'creatingUser' | 'enrollingUser' | 'fetchingUnit';
+  isLoading: boolean;
+
+  isSyncingGrades: boolean;
+  isSyncingEnrolments: boolean;
+
+  ngAfterViewInit(): void {
+    this.ltik = this.ltik ?? this.userService.currentUser.ltik;
+
+    // Scroll to the bottom of the page in case the header is visible
+    // Ensures our action buttons are centered
+    setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 100);
+
+    this.isLoading = true;
+    // TODO: add a spinner or loading indicator until final loading state is complete
+
+    this.authenticationService.afterAuthCall(() => {
+      this.userService.currentUser.ltik = this.ltik;
+      this.currentUser = this.userService.currentUser;
+
+      // Retrieve linked unit ID
+      this.ltiService.getUnitLink().subscribe({
+        next: (link) => {
+          if (!link) {
+            console.log('no link, cant enrol');
+            this.isLoading = false;
+            return;
+          }
+
+          // this.getGrade();
+
+          // Ensure user is enrolled into the linked unit
+          this.ltiService.enrolUser(link).subscribe({
+            next: () => {
+              // Fetch unit information
+              this.unitService.get(link.unitId).subscribe({
+                next: (unit) => {
+                  this.linkedUnit = unit;
+                  this.isLoading = false;
+                },
+                error: (error) => {
+                  this.alertsService.error(error.error || error, 6000);
+                  this.isLoading = false;
+                },
+              });
+            },
+            error: (error) => {
+              console.error(error);
+              this.isLoading = false;
+            },
+          });
+        },
+        error: (_error) => {
+          this.alertsService.error('Unauthorised. Please relaunch the app.', 6000);
+          this.unauthorised = true;
+        },
+      });
+    });
+  }
+
+  goToLinkUnit(): void {
+    this.router.navigateByUrl('/lti/link');
+  }
+
+  removeLink(): void {
+    this.ltiService.removeUnitLink().subscribe({
+      next: (link) => {
+        this.linkedUnit = null;
+        console.log(link);
+      },
+      error: (error) => {
+        console.error(error);
+        this.alertsService.error(error.error, 6000);
+      },
+    });
+  }
+
+  // getGrade(): void {
+  //   this.ltiService.getGrade().subscribe({
+  //     next: (result) => {
+  //       console.log('grade result?: ', result);
+  //       console.log(JSON.stringify(result));
+  //     },
+  //     error: (error) => {
+  //       console.log(error);
+  //     },
+  //   });
+  // }
+
+  // syncMyGrade(): void {
+  //   this.ltiService.syncGrade().subscribe({
+  //     next: (result) => {
+  //       console.log('Successfully synced grade from OnTrack');
+  //       this.alertsService.success('Successfully synced grade from OnTrack', 5000);
+  //     },
+  //     error: (error) => {
+  //       console.log(error);
+  //       this.alertsService.error(`Failed to retrieve grade`);
+  //     },
+  //   });
+  // }
+
+  syncEnrolments(): void {
+    if (!this.linkedUnit) {
+      this.alertsService.error(
+        `Course must be linked to an OnTrack unit before you can sync members.`,
+        6000,
+      );
+      return;
+    }
+
+    this.ltiService.getMembers().subscribe({
+      next: (members) => {
+        this.confirmationModalService.show(
+          'Sync Enrolments into OnTrack',
+          `Are you sure you want to import ${members.members.length} users into ${this.linkedUnit.code} ${this.linkedUnit.name}`,
+          () => {
+            this.isSyncingEnrolments = true;
+            this.ltiService.syncEnrolments().subscribe({
+              next: (job) => {
+                if (!job) {
+                  this.isSyncingEnrolments = false;
+                  return this.alertsService.error(`Failed to sync enrolments`);
+                }
+
+                this.sidekiqProgressModalService
+                  .show('Syncing users into OnTrack', job.id)
+                  .subscribe((completedJob) => {
+                    this.isSyncingEnrolments = false;
+                    this.csvResultModalService.show(
+                      'Enrolment sync',
+                      JSON.parse(completedJob.result),
+                    );
+                    this.alertsService.success('Successfully imported users into OnTrack', 5000);
+                  });
+              },
+              error: (error) => {
+                console.log(error);
+                this.alertsService.error(`Failed to sync enrolments`);
+                this.isSyncingEnrolments = false;
+              },
+            });
+          },
+        );
+      },
+      error: (_error) => {
+        this.alertsService.error('Failed to retrieve course members', 6000);
+      },
+    });
+  }
+
+  syncStudentsGrades(): void {
+    this.confirmationModalService.show(
+      'Sync Grades from OnTrack',
+      'Are you sure you want to sync portfolio grades from OnTrack? Please confirm that grades are final and approved for release.',
+      () => {
+        this.isSyncingGrades = true;
+        this.ltiService.syncStudentsGrades().subscribe({
+          next: (result) => {
+            this.isSyncingGrades = false;
+            this.alertsService.success('Successfully synced grades from OnTrack', 5000);
+            this.csvResultModalService.show('Grade sync', result);
+          },
+          error: (error) => {
+            console.log(error);
+            this.alertsService.error(`Failed to retrieve grade`);
+            this.isSyncingGrades = true;
+          },
+        });
+      },
+    );
+  }
+  public launchApplication(): void {
+    window.open('/home', '_blank');
+  }
+}
diff --git a/src/app/home/states/lti-unit-link/lti-unit-link.component.html b/src/app/home/states/lti-unit-link/lti-unit-link.component.html
new file mode 100644
index 0000000000..452bfc8bc6
--- /dev/null
+++ b/src/app/home/states/lti-unit-link/lti-unit-link.component.html
@@ -0,0 +1,45 @@
+<div class="h-screen w-full items-center justify-center px-12" id="home">
+  <div class="mx-auto flex h-screen w-full max-w-4xl flex-col items-center justify-center gap-3">
+    <div class="flex items-center justify-center">
+      <mat-icon
+        aria-label="Formatif logo"
+        class="formatif-icon size-[100px]"
+        svgIcon="formatif-logo"
+      ></mat-icon>
+      <h1 class="m-0 ml-3 text-4xl">OnTrack</h1>
+    </div>
+
+    @if (loadingUnits) {
+      <p>Loading...</p>
+    } @else if (!activeUnits.length) {
+      <p class="w-full max-w-2xl text-center text-gray-400">
+        You must already be a Convenor or Admin to link a unit. You are not currently assigned to
+        any units.
+      </p>
+    } @else {
+      <p class="w-full max-w-2xl text-center">
+        Students will be automatically enrolled in this unit when they launch the OnTrack tool from
+        this course.
+      </p>
+      <mat-form-field class="w-full">
+        <mat-label>Select a unit to link</mat-label>
+        <mat-select [(value)]="selectedUnit">
+          @for (unit of activeUnits; track unit) {
+            <mat-option [value]="unit"
+              >{{ unit.code }} {{ unit.name }} ({{ getTeachingPeriod(unit) }})</mat-option
+            >
+          }
+        </mat-select>
+      </mat-form-field>
+      <button
+        class="w-full max-w-lg"
+        color="primary"
+        mat-raised-button
+        [disabled]="!selectedUnit"
+        (click)="submit()"
+      >
+        Confirm
+      </button>
+    }
+  </div>
+</div>
diff --git a/src/app/home/states/lti-unit-link/lti-unit-link.component.scss b/src/app/home/states/lti-unit-link/lti-unit-link.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/home/states/lti-unit-link/lti-unit-link.component.ts b/src/app/home/states/lti-unit-link/lti-unit-link.component.ts
new file mode 100644
index 0000000000..e2cff995e4
--- /dev/null
+++ b/src/app/home/states/lti-unit-link/lti-unit-link.component.ts
@@ -0,0 +1,128 @@
+import {AfterViewInit, ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Router} from '@angular/router';
+import {CreateNewUnitModal} from 'src/app/admin/modals/create-new-unit-modal/create-new-unit-modal.component';
+import {Unit} from 'src/app/api/models/unit';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {LtiService} from 'src/app/api/services/lti.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-lti-unit-link',
+  templateUrl: 'lti-unit-link.component.html',
+  styleUrls: ['lti-unit-link.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class LtiUnitLinkComponent implements AfterViewInit {
+  constructor(
+    private createUnitModalService: CreateNewUnitModal,
+    private unitService: UnitService,
+    private authenticationService: AuthenticationService,
+    private confirmationModalService: ConfirmationModalService,
+    private alertsService: AlertService,
+    private ltiService: LtiService,
+    private userService: UserService,
+    private router: Router,
+  ) {}
+
+  @Input() ltik: string;
+
+  public selectedUnit: Unit;
+  public activeUnits: Unit[] = [];
+
+  public unitLinked: boolean = false;
+
+  public loadingUnits: boolean;
+
+  ngAfterViewInit(): void {
+    this.ltik = this.ltik ?? this.userService.currentUser.ltik;
+    this.loadingUnits = true;
+
+    // Scroll to the bottom of the page in case the header is visible
+    // Ensures our action buttons are centered
+    setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 100);
+
+    this.authenticationService.afterAuthCall(() => {
+      this.userService.currentUser.ltik = this.ltik;
+      this.loadUnits();
+    });
+
+    // TODO: query our LTI API to see if we have already linked a unit
+  }
+
+  public submit(): void {
+    this.confirmationModalService.show(
+      `Are you sure you want to link ${this.selectedUnit.code} ${this.selectedUnit.name} (${this.getTeachingPeriod(this.selectedUnit)}) to this course?`,
+      'Once you have linked an OnTrack unit, students who launch this app will be enrolled automatically. Unlinking a unit will not withdraw students automatically.',
+      () => {
+        // Trigger API call to LTI.js with our unit link request
+        console.log('Trigger API call to LTI.js');
+        this.linkUnit(this.selectedUnit);
+      },
+    );
+  }
+
+  private formatTeachingPeriod(date): string {
+    const month = date.toLocaleString('en-US', {month: 'short'});
+    const year = String(date.getFullYear()).slice(-2);
+    return `${month} '${year}`;
+  }
+
+  public getTeachingPeriod(unit: Unit) {
+    if (unit.teachingPeriod?.name) {
+      return unit.teachingPeriod.name;
+    }
+
+    return `${this.formatTeachingPeriod(unit.startDate)} - ${this.formatTeachingPeriod(unit.endDate)}`;
+  }
+
+  private async linkUnit(unit: Unit) {
+    this.ltiService
+      .setUnitLink({
+        unitId: unit.id.toString(),
+        // unitCode: unit.code,
+        // unitName: unit.name,
+      })
+      .subscribe({
+        next: (link) => {
+          console.log(link);
+
+          this.alertsService.success(`Successfully linked ${unit.code}`, 5000);
+
+          this.router.navigateByUrl('/lti');
+        },
+        error: (error) => {
+          console.log(error);
+          this.alertsService.error(`Failed to link unit: ${error.error}`, 6000);
+        },
+      });
+  }
+
+  public loadUnits(): void {
+    // Load units that current user is a convenor/admin of
+    this.unitService
+      .fetchAll(
+        {},
+        {
+          params: {
+            include_in_active: true,
+          },
+        },
+      )
+      .subscribe({
+        next: (units) => {
+          // Show newer units first
+          this.activeUnits = [...units].sort(
+            (a, b) => b.startDate.getTime() - a.startDate.getTime(),
+          );
+          this.loadingUnits = false;
+        },
+        error: (_error) => {
+          this.alertsService.error(`Failed to fetch units`, 6000);
+        },
+      });
+  }
+}
diff --git a/src/app/legacy-route-placeholder.component.html b/src/app/legacy-route-placeholder.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/legacy-route-placeholder.component.scss b/src/app/legacy-route-placeholder.component.scss
new file mode 100644
index 0000000000..cc36f78bfa
--- /dev/null
+++ b/src/app/legacy-route-placeholder.component.scss
@@ -0,0 +1,3 @@
+:host {
+  display: none;
+}
diff --git a/src/app/legacy-route-placeholder.component.ts b/src/app/legacy-route-placeholder.component.ts
new file mode 100644
index 0000000000..dc364e55dc
--- /dev/null
+++ b/src/app/legacy-route-placeholder.component.ts
@@ -0,0 +1,10 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'legacy-route-placeholder',
+  templateUrl: './legacy-route-placeholder.component.html',
+  styleUrl: './legacy-route-placeholder.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class LegacyRoutePlaceholderComponent {}
diff --git a/src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee b/src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee
deleted file mode 100644
index 896a2eb2c7..0000000000
--- a/src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee
+++ /dev/null
@@ -1,48 +0,0 @@
-angular.module("doubtfire.projects.project-outcome-alignment", [])
-
-.directive("projectOutcomeAlignment", ->
-  restrict: 'E'
-  templateUrl: 'projects/project-outcome-alignment/project-outcome-alignment.tpl.html'
-  controller: ($scope, $rootScope, $timeout, outcomeService, alertService, analyticsService, Visualisation, newUnitService) ->
-    $scope.poaView = {
-      activeTab: 'list'
-    }
-    $scope.targets = outcomeService.calculateTargets($scope.unit, $scope.unit, $scope.unit.taskStatusFactor)
-    $scope.currentProgress = outcomeService.calculateProgress($scope.unit, $scope.project)
-
-    $scope.refreshCharts = Visualisation.refreshAll
-
-    refreshAlignmentData = ->
-      $scope.currentProgress.length = 0
-      $scope.currentProgress = _.extend $scope.currentProgress, outcomeService.calculateProgress($scope.unit, $scope.project)
-
-    # $scope.$watch 'project', ->
-    #   refreshAlignmentData()
-    #   $rootScope.$broadcast('ProgressUpdated')
-
-    # $scope.$watch 'project.tasks', ->
-    #   refreshAlignmentData()
-    #   $rootScope.$broadcast('ProgressUpdated')
-
-    $scope.selectTab = (tab) ->
-      if tab is 'progress'
-        if !$scope.classStats?
-          newUnitService.loadLearningProgressClassStats($scope.unit).subscribe({
-            next: (response) -> $scope.classStats = response
-            error: (response) ->
-              alertService.error( response, 6000)
-              $scope.classStats = {}
-          })
-      $scope.poaView.activeTab = tab
-      eventName = if tab is 'progress' then "View Learning Progress Tab" else "Reflect on Learning Tab"
-      $scope.refreshCharts()
-
-    # Default tab
-    $scope.selectTab('progress')
-
-    $scope.$on('UpdateAlignmentChart', ->
-      refreshAlignmentData()
-      $rootScope.$broadcast('ProgressUpdated')
-    )
-
-)
diff --git a/src/app/projects/project-outcome-alignment/project-outcome-alignment.tpl.html b/src/app/projects/project-outcome-alignment/project-outcome-alignment.tpl.html
deleted file mode 100644
index 66de997bd9..0000000000
--- a/src/app/projects/project-outcome-alignment/project-outcome-alignment.tpl.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<tabset>
-  <tab ng-click="selectTab('progress')">
-    <tab-heading>
-      Outcome Achievement
-    </tab-heading>
-  </tab>
-  <tab ng-click="selectTab('reflect')">
-    <tab-heading>
-      Outcome Alignment
-    </tab-heading>
-  </tab>
-</tabset><!--/tab-selector-->
-<div class="panel panel-default" ng-show="poaView.activeTab == 'progress'">
-  <div class="panel-heading">
-    <h3 class="panel-title">
-      Outcome Achievement
-    </h3>
-  </div>
-  <div class="panel-body view-alignment">
-    Overall progress on unit outcome are shown below
-  </div>
-  <task-ilo-alignment-viewer
-    project="project"
-    unit="unit"
-    class-stats="classStats"
-    current-progress="currentProgress"
-    summary-only="true"></task-ilo-alignment-viewer>
-</div><!--/achievement-panel-->
-<div class="panel panel-default clearfix" ng-show="poaView.activeTab == 'progress'">
-  <div class="panel-heading">
-    <h3 class="panel-title">
-      Visualise Achievement
-    </h3>
-  </div>
-  <div class="panel-body">
-    Your achievement with all ILOs are visualised below
-  </div>
-  <achievement-custom-bar-chart
-    show-legend="false"
-    unit="unit"
-    project="project"
-    class="col-sm-12">
-  </achievement-custom-bar-chart>
-</div><!--/visualisation-achievement-->
-<div ng-show="poaView.activeTab == 'reflect'">
-  <task-ilo-alignment-editor show-csv="false" unit="unit" project="project"></task-ilo-alignment-editor>
-</div><!--ilo-editor-->
diff --git a/src/app/projects/project-progress-dashboard/project-progress-dashboard.coffee b/src/app/projects/project-progress-dashboard/project-progress-dashboard.coffee
deleted file mode 100644
index d28a0d31b5..0000000000
--- a/src/app/projects/project-progress-dashboard/project-progress-dashboard.coffee
+++ /dev/null
@@ -1,46 +0,0 @@
-angular.module('doubtfire.projects.project-progress-dashboard',[])
-
-#
-# Progress tab for the student's project
-#
-# Basically a dashboard where students can see everything about their
-# project in one area including burndown chart, tasks to work on
-# and their target grade
-#
-.directive('projectProgressDashboard', ->
-  restrict: 'E'
-  templateUrl: 'projects/project-progress-dashboard/project-progress-dashboard.tpl.html'
-  controller: ($scope, $state, $rootScope, $stateParams, newProjectService, alertService, gradeService, newTaskService, listenerService) ->
-    if $stateParams.projectId?
-      $scope.studentProjectId = $stateParams.projectId
-    else if $scope.project?
-      $scope.studentProjectId = $scope.project.id
-
-    $scope.grades = gradeService.grades
-
-    $scope.currentVisualisation = 'burndown'
-
-    $scope.chooseGrade = (idx) ->
-      $scope.project.targetGrade = idx
-      newProjectService.update($scope.project).subscribe(
-        (response) ->
-          alertService.success( "Target updated")
-      )
-      updateTaskCompletionStats()
-
-    $scope.taskCount = ->
-      $scope.unit.taskDefinitionCount
-
-    $scope.taskStats = {}
-
-    # Update move to task and project...
-    updateTaskCompletionStats = ->
-      $scope.taskStats.numberOfTasksCompleted = $scope.project.tasksByStatus(newTaskService.completeStatus).length
-      $scope.taskStats.numberOfTasksRemaining = $scope.project.activeTasks().length - $scope.taskStats.numberOfTasksCompleted
-
-    $scope.$on 'TaskStatusUpdated', ->
-      updateTaskCompletionStats()
-
-
-    updateTaskCompletionStats()
-)
diff --git a/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.html b/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.html
new file mode 100644
index 0000000000..caf278704d
--- /dev/null
+++ b/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.html
@@ -0,0 +1,66 @@
+@if (project$ | async; as project) {
+  <div class="grid size-full grid-cols-12 gap-2.5">
+    <!-- Column -->
+    <div class="col-span-12 lg:col-span-6">
+      <mat-card class="h-[250px] w-full px-7 py-14">
+        <mat-card-content>
+          <!-- <f-unit-code class="w-28" [unit_code]="project.unit.code"></f-unit-code> -->
+          <h1 class="mb-1 text-3xl">{{ project.student.displayName }}'s {{ project.unit.name }}</h1>
+          <p class="text-base">{{ project.unit.description }}</p>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-span-12 lg:col-span-6">
+      <mat-card class="h-[250px] w-full px-7 py-14">
+        <mat-card-content class="w-full">
+          <span class="mb-5 flex flex-row items-center">
+            <h1 class="mr-1 mb-0 text-3xl">Targetting</h1>
+            <mat-icon matTooltip="Your target grade changes which tasks you need to complete.">
+              info</mat-icon
+            >
+          </span>
+          <mat-form-field appearance="outline" class="w-full">
+            <mat-label>Target grade</mat-label>
+            <mat-select [(value)]="project.targetGrade">
+              @for (grade of grades; track grade.value) {
+                <mat-option [value]="grade.value" (click)="targetGradeClicked(grade.value)">{{
+                  grade.viewValue
+                }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+          <p class="caption-bottom"></p>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <!-- Column -->
+    <div class="col-span-12 md:col-span-12 xl:col-span-12">
+      <mat-card class="size-full">
+        <mat-card-header>
+          <mat-card-title>Your progress</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <div class="flex size-full items-center justify-center">
+            <!-- <f-project-progress-gauge [project]="project"></f-project-progress-gauge> -->
+            <f-progress-burndown-chart
+              [grade]="project.targetGrade"
+              [project]="project"
+              [unit]="project.unit"
+            ></f-progress-burndown-chart>
+            <f-task-status-pie-chart
+              [grade]="project.targetGrade"
+              [project]="project"
+              [unit]="project.unit"
+            ></f-task-status-pie-chart>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <!-- Column -->
+    <!-- <div class="col-span-12 md:col-span-12 xl:col-span-12">
+      <mat-card>
+        <mat-card-content></mat-card-content>
+      </mat-card>
+    </div> -->
+  </div>
+}
diff --git a/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.scss b/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.scss
new file mode 100644
index 0000000000..3a2b24d37b
--- /dev/null
+++ b/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.scss
@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  color: black;
+}
diff --git a/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.ts b/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.ts
new file mode 100644
index 0000000000..c6cc3cb2de
--- /dev/null
+++ b/src/app/projects/project-progress-dashboard/project-progress-dashboard.component.ts
@@ -0,0 +1,49 @@
+import {ChangeDetectionStrategy, Component, Input, type OnInit} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+
+@Component({
+  selector: 'f-project-progress-dashboard',
+  templateUrl: './project-progress-dashboard.component.html',
+  styleUrl: './project-progress-dashboard.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectProgressDashboardComponent implements OnInit {
+  @Input() project$: Observable<Project>;
+  private project: Project;
+  protected grades;
+
+  constructor(
+    private gradeService: GradeService,
+    private projectService: ProjectService,
+    private alertService: AlertService,
+  ) {}
+
+  ngOnInit(): void {
+    this.project$.subscribe((project) => {
+      this.project = project;
+      this.grades = this.gradeService.gradeViewDataFor(project.unit);
+    });
+
+    setTimeout(() => {
+      console.log(this.project.taskStats);
+    }, 3000);
+  }
+
+  protected targetGradeClicked(grade: number): void {
+    this.project.targetGrade = grade;
+    this.projectService.update(this.project).subscribe({
+      next: (_project) => {
+        this.alertService.success('Target grade updated');
+      },
+      error: (error) => {
+        console.error(error);
+        this.alertService.error('Error updating target grade', error);
+      },
+    });
+  }
+}
diff --git a/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html b/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html
deleted file mode 100644
index 5dc40dc5b0..0000000000
--- a/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<div ng-if="unit" class="project-progress-dashboard">
-  <div class="col-md-4 col-md-push-8">
-    <div class="row">
-      <div class="col-sm-6 col-md-12">
-        <div class="panel panel-primary">
-          <div class="panel-heading clearfix">
-            <div class="pull-left">
-              <h4 class="panel-title">Task List</h4>
-            </div>
-          </div>
-          <div class="panel-body">
-            <project-tasks-list project="project" student-project-id="studentProjectId" task-def="taskDef" unit="unit" assessing-unit-role="assessingUnitRole" on-select="showTaskView"></project-tasks-list>
-          </div>
-        </div><!--task-lists-->
-      </div>
-      <div class="col-sm-6 col-md-12">
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">Target Grade</h3>
-            Select the grade you wish to achieve in the unit.
-          </div>
-          <div class="panel-body text-center">
-            <p class="btn-group">
-              <label ng-repeat="grade in grades" ng-if="$index != 4" ng-click="chooseGrade($index)" class="btn btn-default col-sm-3 text-center" ng-model="project.targetGrade" btn-radio="{{$index}}">
-                <grade-icon grade="grade" tooltip="Select a {{grade}} as your target grade" tooltip-append-to-body="true" class="text-{{$index == project.targetGrade ? 'primary' : 'muted'}}"></grade-icon>
-              </label>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div><!--right-hand-panel-->
-
-  <div class="col-md-8 col-md-pull-4">
-    <div class="panel panel-default">
-      <div class="panel-heading clearfix">
-        <div class="pull-left">
-          <div ng-show="currentVisualisation == 'burndown'">
-            <h3 class="panel-title">Burndown Chart</h3>
-            The Burndown chart shows how much work remains for you to achieve your target grade.
-          </div>
-          <div ng-show="currentVisualisation == 'taskSummary'">
-            <h3 class="panel-title">Task Summary Chart</h3>
-            Summary of each of your task statuses
-          </div>
-        </div><!--/headings-->
-        <div class="pull-right text-right toolbar">
-          <div class="buttons">
-            <div class="btn-group">
-              <label class="btn btn-default text-center" btn-radio="'burndown'" ng-model="currentVisualisation">
-                <i class="fa fa-line-chart"></i>
-              </label>
-              <label class="btn btn-default text-center" btn-radio="'taskSummary'" ng-model="currentVisualisation">
-                <i class="fa fa-pie-chart"></i>
-              </label>
-            </div>
-          </div>
-        </div><!--/button-switch-->
-      </div>
-      <div class="panel-body">
-        <div class="burndown-chart" ng-if="currentVisualisation == 'burndown'">
-          <progress-burndown-chart project="project" unit="unit"></progress-burndown-chart>
-        </div>
-        <div ng-if="currentVisualisation == 'taskSummary'">
-          <student-task-status-pie-chart project="project"></student-task-status-pie-chart>
-        </div>
-      </div>
-      <div class="panel-footer text-center">
-        <div ng-show="currentVisualisation == 'taskSummary'">
-          You have completed
-          <strong>{{taskStats.numberOfTasksCompleted}}</strong>
-          tasks and have
-          <strong>{{taskStats.numberOfTasksRemaining}}</strong>
-          left to complete to achieve a
-          <strong>{{grade.names[project.targetGrade]}}</strong>.
-        </div>
-        <div ng-show="currentVisualisation == 'burndown'">
-          Aim to keep your
-          <strong style="color: #e01b5d">Complete</strong>
-          line close to or ahead of the
-          <strong class="text-muted">Target</strong>
-          line to keep on track.
-        </div>
-      </div>
-    </div>
-  </div><!--primary-panel-->
-</div>
diff --git a/src/app/projects/project.resolver.ts b/src/app/projects/project.resolver.ts
new file mode 100644
index 0000000000..0fe0af8cb6
--- /dev/null
+++ b/src/app/projects/project.resolver.ts
@@ -0,0 +1,42 @@
+import {inject} from '@angular/core';
+import {ResolveFn} from '@angular/router';
+import {Observable} from 'rxjs';
+import {Project, ProjectService} from 'src/app/api/models/doubtfire-model';
+import {GlobalStateService, ViewType} from './states/index/global-state.service';
+
+export const resolveProject: ResolveFn<Project> = (route, state) => {
+  const projectService = inject(ProjectService);
+  const globalState = inject(GlobalStateService);
+  const projectId = Number(route.paramMap.get('projectId'));
+  const resolveProgressively = state.url.split('?')[0].includes('/dashboard');
+
+  return new Observable<Project>((observer) => {
+    const mappingCompleteCallback = (project: Project) => {
+      globalState.setView(ViewType.PROJECT, project);
+      if (!resolveProgressively) {
+        observer.next(project);
+        observer.complete();
+      }
+    };
+
+    globalState.onLoad(() => {
+      if (resolveProgressively) {
+        observer.next(projectService.cache.getOrCreate(projectId, projectService, {id: projectId}));
+        observer.complete();
+        return;
+      }
+
+      projectService
+        .get(
+          {id: projectId},
+          {
+            cacheBehaviourOnGet: 'cacheQuery',
+            mappingCompleteCallback,
+          },
+        )
+        .subscribe({
+          error: (error) => observer.error(error),
+        });
+    });
+  });
+};
diff --git a/src/app/projects/projects.coffee b/src/app/projects/projects.coffee
deleted file mode 100644
index 8499f03af4..0000000000
--- a/src/app/projects/projects.coffee
+++ /dev/null
@@ -1,5 +0,0 @@
-angular.module('doubtfire.projects', [
-  'doubtfire.projects.states'
-  'doubtfire.projects.project-outcome-alignment'
-  'doubtfire.projects.project-progress-dashboard'
-])
diff --git a/src/app/projects/states/dashboard/dashboard.coffee b/src/app/projects/states/dashboard/dashboard.coffee
deleted file mode 100644
index d4d073c8ad..0000000000
--- a/src/app/projects/states/dashboard/dashboard.coffee
+++ /dev/null
@@ -1,58 +0,0 @@
-angular.module('doubtfire.projects.states.dashboard', [
-  'doubtfire.projects.states.dashboard.directives'
-])
-
-#
-# Tasks state for projects
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'projects/dashboard', {
-    parent: 'projects/index'
-    url: '/dashboard/:taskAbbr?tutor'
-    controller: 'ProjectsDashboardStateCtrl'
-    templateUrl: 'projects/states/dashboard/dashboard.tpl.html'
-    params:
-      taskAbbr: dynamic: true
-    data:
-      task: "Dashboard"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
-   }
-)
-
-.controller("ProjectsDashboardStateCtrl", ($scope, $urlRouter, $state, $stateParams, listenerService) ->
-  # Cleanup
-  listeners = listenerService.listenTo($scope)
-
-  # Load in task task abbreviation
-  $scope.taskData = {
-    selectedTask: null
-    onSelectedTaskChange: (task) ->
-      setTaskAbbrAsUrlParams(task)
-  }
-
-  # Sets URL parameters for the task key
-  setTaskAbbrAsUrlParams = (task) ->
-    taskAbbr = if _.isString(task) then task else task?.definition.abbreviation
-    taskAbbr = if taskAbbr then taskAbbr else ''
-    # Change URL of new task without notify
-    $state.go($state.$current, {taskAbbr: taskAbbr}, {notify: false})
-
-  # Sets selected task from URL parameters
-  setSelectedTaskFromUrlParams = (taskAbbr) ->
-    $scope.taskData.selectedTask = null unless taskAbbr?
-    $scope.taskData.selectedTask = $scope.project.activeTasks().find((t) ->
-      t.definition.abbreviation.toLowerCase() == taskAbbr?.toLowerCase()
-    )
-
-  # False task abbreviation provided?
-  unless setSelectedTaskFromUrlParams($stateParams.taskAbbr)?
-    setTaskAbbrAsUrlParams(null)
-
-
-  # Task complete
-  listeners.push $scope.$on('TaskSubmissionUploadComplete', ($event) ->
-    # Go back to the dashboard
-    $scope.taskData.selectedTask = null
-  )
-)
diff --git a/src/app/projects/states/dashboard/dashboard.tpl.html b/src/app/projects/states/dashboard/dashboard.tpl.html
index e79f1af1ca..2171877d44 100644
--- a/src/app/projects/states/dashboard/dashboard.tpl.html
+++ b/src/app/projects/states/dashboard/dashboard.tpl.html
@@ -7,14 +7,14 @@
     style="padding: 0 8px 0 8px"
     ><!--/panel-1-->
   </student-task-list>
-  <progress-dashboard
-    project="project"
-    on-update-target-grade="targetGradeUpdated"
+  <f-progress-dashboard
+    [project]="project"
+    (doUpdateTargetGrade)="targetGradeUpdated()"
     class="col-xs-12 col-md-9"
     ng-if="!taskData.selectedTask"
     style="padding: 0 8px 0 8px"
   >
-  </progress-dashboard
+  </f-progress-dashboard
   ><!--/panel-2-->
   <task-dashboard
     task="taskData.selectedTask"
diff --git a/src/app/projects/states/dashboard/directives/directives.coffee b/src/app/projects/states/dashboard/directives/directives.coffee
deleted file mode 100644
index 8ac3fe3ed8..0000000000
--- a/src/app/projects/states/dashboard/directives/directives.coffee
+++ /dev/null
@@ -1,5 +0,0 @@
-angular.module('doubtfire.projects.states.dashboard.directives', [
-  'doubtfire.projects.states.dashboard.directives.student-task-list'
-  'doubtfire.projects.states.dashboard.directives.progress-dashboard'
-  'doubtfire.projects.states.dashboard.directives.task-dashboard'
-])
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.html b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.html
new file mode 100644
index 0000000000..15d8a2d71d
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.html
@@ -0,0 +1,125 @@
+<h2 mat-dialog-title>Add Engagement Stamp</h2>
+
+<mat-dialog-content>
+  <p>
+    Students can see engagement stamps, including any notes and evidence you add. They can also
+    leave comments under each engagement.
+  </p>
+  <form class="flex min-w-0 flex-col gap-1 pt-1" [formGroup]="form" (ngSubmit)="submit()">
+    <mat-form-field appearance="outline">
+      <mat-label>Engagement type</mat-label>
+      <input
+        #engagementTypeInput
+        formControlName="engagementType"
+        matInput
+        maxlength="255"
+        placeholder="e.g. Attendance"
+        [matAutocomplete]="engagementTypeOptions"
+      />
+      <mat-autocomplete
+        #engagementTypeOptions="matAutocomplete"
+        (optionSelected)="engagementTypeSelected(engagementTypeInput)"
+      >
+        @for (type of engagementTypes; track type) {
+          <mat-option [value]="type">{{ type }}</mat-option>
+        }
+      </mat-autocomplete>
+      <mat-hint>Choose a suggestion or enter another type.</mat-hint>
+      @if (form.controls.engagementType.hasError('required')) {
+        <mat-error>Enter an engagement type.</mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" floatLabel="always">
+      <mat-label>Note</mat-label>
+      <textarea
+        formControlName="note"
+        matInput
+        maxlength="4095"
+        rows="4"
+        [placeholder]="notePlaceholder"
+      ></textarea>
+      <mat-hint align="end">{{ form.controls.note.value.length }} / 4095</mat-hint>
+    </mat-form-field>
+
+    <div class="grid grid-cols-2 gap-2">
+      <mat-form-field appearance="outline" class="min-w-0">
+        <mat-label>Date</mat-label>
+        <input formControlName="occurredDate" matInput [matDatepicker]="occurredDatePicker" />
+        <mat-datepicker-toggle matIconSuffix [for]="occurredDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #occurredDatePicker></mat-datepicker>
+        @if (form.controls.occurredDate.hasError('required')) {
+          <mat-error>Select when the engagement occurred.</mat-error>
+        }
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="min-w-0">
+        <mat-label>Time</mat-label>
+        <input formControlName="occurredTime" matInput type="time" />
+        @if (form.controls.occurredTime.hasError('required')) {
+          <mat-error>Select a time.</mat-error>
+        }
+      </mat-form-field>
+    </div>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Evidence</mat-label>
+      <mat-select formControlName="evidenceMode" (selectionChange)="evidenceModeChanged()">
+        <mat-option value="none">No evidence</mat-option>
+        <mat-option value="url">External URL</mat-option>
+        <mat-option value="attachment">Upload image or PDF</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    @if (form.controls.evidenceMode.value === 'url') {
+      <mat-form-field appearance="outline">
+        <mat-label>Evidence URL</mat-label>
+        <input
+          formControlName="evidenceUrl"
+          matInput
+          placeholder="https://example.com/evidence"
+          type="url"
+        />
+        @if (
+          form.controls.evidenceUrl.hasError('pattern') ||
+          (form.controls.evidenceUrl.touched && !form.controls.evidenceUrl.value.trim())
+        ) {
+          <mat-error>Enter a valid HTTP or HTTPS URL.</mat-error>
+        }
+      </mat-form-field>
+    }
+
+    @if (form.controls.evidenceMode.value === 'attachment') {
+      <div class="mb-4 rounded-md border border-gray-300 p-4">
+        <label class="mb-2 block text-sm font-medium text-gray-700" for="engagement-evidence">
+          Image or PDF
+        </label>
+        <input
+          accept="image/*,.pdf,application/pdf"
+          class="block w-full text-sm text-gray-600 file:mr-3 file:rounded-md file:border-0 file:bg-gray-100 file:px-3 file:py-2 file:font-medium file:text-gray-700 hover:file:bg-gray-200"
+          id="engagement-evidence"
+          type="file"
+          (change)="fileSelected($event)"
+        />
+        <p class="mt-2 text-xs text-gray-500">Maximum file size: 30 MB.</p>
+        @if (attachmentError) {
+          <p class="mt-2 text-sm text-red-600">{{ attachmentError }}</p>
+        }
+      </div>
+    }
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button type="button" [disabled]="saving" [mat-dialog-close]="undefined">
+    Cancel
+  </button>
+  <button color="primary" mat-flat-button type="button" [disabled]="!canSubmit" (click)="submit()">
+    @if (saving) {
+      <mat-spinner class="mr-2 inline-block" diameter="18"></mat-spinner>
+      Adding...
+    } @else {
+      Add Stamp
+    }
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.scss b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.scss
new file mode 100644
index 0000000000..cdca2a91a1
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.scss
@@ -0,0 +1,12 @@
+// Prevent mobile devices from zooming in engagement stamp modal inputs
+@media (max-width: 768px) {
+  :host ::ng-deep {
+    .mat-mdc-input-element,
+    .mat-mdc-select,
+    .mat-mdc-select-value,
+    .mat-mdc-select-trigger,
+    .mat-mdc-select-min-line {
+      font-size: 20px !important;
+    }
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.ts
new file mode 100644
index 0000000000..523b4e6a69
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component.ts
@@ -0,0 +1,177 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Engagement, EngagementService, Project} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+type EvidenceMode = 'none' | 'url' | 'attachment';
+
+interface AddEngagementForm {
+  engagementType: FormControl<string>;
+  note: FormControl<string>;
+  occurredDate: FormControl<Date>;
+  occurredTime: FormControl<string>;
+  evidenceMode: FormControl<EvidenceMode>;
+  evidenceUrl: FormControl<string>;
+}
+
+@Component({
+  selector: 'f-add-engagement-dialog',
+  templateUrl: './add-engagement-dialog.component.html',
+  styleUrl: './add-engagement-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class AddEngagementDialogComponent {
+  readonly engagementTypes = ['Discuss', 'Attendance', 'Forum', 'Email', 'Attention'];
+  readonly notePlaceholders: Record<string, string> = {
+    attendance: 'Attended tutorial and participated in class activities.',
+    discuss: 'Discussed tasks during tutorial.',
+    discussion: 'Discussed tasks during tutorial.',
+    forum: 'Posted to the unit forum and engaged with discussion.',
+    email: 'Discussed unit progress with the teaching team via email.',
+    attention: 'Engagement concern noted for follow-up.',
+  };
+  readonly maxAttachmentSize = 30 * 1024 * 1024;
+  readonly form: FormGroup<AddEngagementForm>;
+
+  attachment?: File;
+  attachmentError?: string;
+  saving = false;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) readonly data: {project: Project},
+    private dialogRef: MatDialogRef<AddEngagementDialogComponent>,
+    private engagementService: EngagementService,
+    private alerts: AlertService,
+  ) {
+    const now = new Date();
+    this.form = new FormGroup<AddEngagementForm>({
+      engagementType: new FormControl('', {
+        nonNullable: true,
+        validators: [Validators.required, Validators.maxLength(255)],
+      }),
+      note: new FormControl('', {
+        nonNullable: true,
+        validators: [Validators.maxLength(4095)],
+      }),
+      occurredDate: new FormControl(now, {
+        nonNullable: true,
+        validators: [Validators.required],
+      }),
+      occurredTime: new FormControl(this.formatTime(now), {
+        nonNullable: true,
+        validators: [Validators.required],
+      }),
+      evidenceMode: new FormControl<EvidenceMode>('none', {nonNullable: true}),
+      evidenceUrl: new FormControl('', {
+        nonNullable: true,
+        validators: [Validators.pattern(/^https?:\/\/.+/i)],
+      }),
+    });
+  }
+
+  get canSubmit(): boolean {
+    if (this.form.invalid || this.saving || this.attachmentError !== undefined) {
+      return false;
+    }
+
+    const mode = this.form.controls.evidenceMode.value;
+    if (mode === 'url') {
+      return this.form.controls.evidenceUrl.value.trim().length > 0;
+    }
+    if (mode === 'attachment') {
+      return this.attachment !== undefined;
+    }
+
+    return true;
+  }
+
+  get notePlaceholder(): string {
+    const engagementType = this.form.controls.engagementType.value.trim().toLowerCase();
+    return (
+      this.notePlaceholders[engagementType] ?? 'Describe how the student engaged with the unit.'
+    );
+  }
+
+  engagementTypeSelected(input: HTMLInputElement): void {
+    window.setTimeout(() => input.blur());
+  }
+
+  evidenceModeChanged(): void {
+    const mode = this.form.controls.evidenceMode.value;
+
+    if (mode !== 'url') {
+      this.form.controls.evidenceUrl.setValue('');
+    }
+    this.attachment = undefined;
+    this.attachmentError = undefined;
+  }
+
+  fileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    this.attachment = undefined;
+    this.attachmentError = undefined;
+
+    if (!file) {
+      return;
+    }
+    if (file.size === 0) {
+      this.attachmentError = 'The selected file is empty.';
+      input.value = '';
+      return;
+    }
+    if (file.size > this.maxAttachmentSize) {
+      this.attachmentError = 'The selected file must be no larger than 30 MB.';
+      input.value = '';
+      return;
+    }
+    if (file.type !== 'application/pdf' && !file.type.startsWith('image/')) {
+      this.attachmentError = 'Select an image or PDF file.';
+      input.value = '';
+      return;
+    }
+
+    this.attachment = file;
+  }
+
+  submit(): void {
+    if (!this.canSubmit) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    const values = this.form.getRawValue();
+    const occurredAt = new Date(values.occurredDate);
+    const [hours, minutes] = values.occurredTime.split(':').map(Number);
+    occurredAt.setHours(hours, minutes, 0, 0);
+
+    this.saving = true;
+    this.engagementService
+      .createEngagement(this.data.project, {
+        engagementType: values.engagementType.trim(),
+        note: values.note.trim() || this.notePlaceholder,
+        occurredAt,
+        evidenceUrl: values.evidenceMode === 'url' ? values.evidenceUrl.trim() : undefined,
+        attachment: values.evidenceMode === 'attachment' ? this.attachment : undefined,
+      })
+      .subscribe({
+        next: (engagement: Engagement) => {
+          this.alerts.success('Engagement stamp added.');
+          this.dialogRef.close(engagement);
+        },
+        error: (error) => {
+          this.saving = false;
+          this.alerts.error(error?.error ?? 'Unable to add the engagement stamp.');
+        },
+      });
+  }
+
+  private formatTime(date: Date): string {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${hours}:${minutes}`;
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.html b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.html
new file mode 100644
index 0000000000..ada4749f3f
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.html
@@ -0,0 +1,286 @@
+<div class="flex max-h-[85vh] min-h-[75vh] flex-col overflow-hidden">
+  <div class="flex w-full shrink-0 items-start py-5" mat-dialog-title>
+    <div class="flex w-full items-start justify-between gap-4">
+      <div>
+        <div>{{ engagement.engagementType }} Engagement</div>
+        <p class="mt-1 text-sm font-normal text-gray-500">
+          Added by {{ engagement.user?.displayName }}
+          <span class="mx-1">·</span>
+          <span matTooltipPosition="above" [matTooltip]="engagement.occurredAt | localizedDateTime">
+            {{ engagement.occurredAt | humanizedDate }}
+          </span>
+        </p>
+      </div>
+
+      <button aria-label="Close engagement" mat-dialog-close mat-icon-button type="button">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+  </div>
+
+  <mat-dialog-content class="!max-h-none min-h-0 flex-1 overflow-y-auto !p-0">
+    @if (loading) {
+      <div class="flex min-h-60 items-center justify-center">
+        <mat-spinner diameter="36"></mat-spinner>
+      </div>
+    } @else if (loadFailed) {
+      <p class="p-6 text-sm text-red-600">Unable to load this engagement.</p>
+    } @else {
+      <div
+        class="p-2.5 font-['Inter','open-sans','Roboto'] text-[15px] leading-6 font-normal tracking-normal text-[rgba(0,0,0,0.87)]"
+      >
+        <mat-card class="mb-2.5 p-3">
+          <div class="flex justify-between gap-3">
+            <mat-card-title class="flex min-w-0 items-center">
+              <user-icon class="mr-2" [size]="25" [user]="engagement.user"></user-icon>
+              <span class="truncate">
+                {{ engagement.user?.displayName }}
+              </span>
+            </mat-card-title>
+            <div class="flex shrink-0 items-center">
+              <mat-card-subtitle
+                [matTooltip]="
+                  'This engagement was added on ' + (engagement.createdAt | localizedDateTime)
+                "
+              >
+                {{ engagement.createdAt | humanizedDate }}
+              </mat-card-subtitle>
+            </div>
+          </div>
+
+          <mat-card-content class="py-2.5">
+            <div class="whitespace-pre-wrap">{{ engagement.note }}</div>
+
+            @if (engagement.evidenceUrl || engagement.hasAttachment) {
+              <div class="mt-3 border-t border-gray-200 pt-3">
+                <p class="mb-2 text-sm font-medium text-gray-600">Evidence</p>
+
+                @if (engagement.evidenceUrl) {
+                  <a
+                    class="inline-flex items-center gap-2 text-sm text-blue-700 hover:underline"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    [href]="engagement.evidenceUrl"
+                  >
+                    <mat-icon>link</mat-icon>
+                    {{ engagement.evidenceUrl }}
+                  </a>
+                }
+
+                @if (engagement.hasAttachment && engagement.contentType === 'image') {
+                  @if (evidenceLoading) {
+                    <div class="flex min-h-32 items-center justify-center rounded-md bg-gray-50">
+                      <mat-spinner diameter="28"></mat-spinner>
+                    </div>
+                  } @else if (evidenceBlobUrl) {
+                    <button class="block" type="button" (click)="openAttachment()">
+                      <img
+                        class="max-h-64 max-w-full rounded-md border border-gray-200 object-contain"
+                        [alt]="engagement.attachmentFileName || 'Engagement evidence'"
+                        [src]="evidenceBlobUrl | safe"
+                        (load)="scrollToBottom()"
+                      />
+                    </button>
+                  }
+                } @else if (engagement.hasAttachment) {
+                  <button
+                    class="inline-flex items-center gap-2 rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-wait disabled:opacity-60"
+                    type="button"
+                    [disabled]="evidenceLoading || !evidenceBlobUrl"
+                    (click)="openAttachment()"
+                  >
+                    @if (evidenceLoading) {
+                      <mat-spinner diameter="20"></mat-spinner>
+                    } @else {
+                      <mat-icon>picture_as_pdf</mat-icon>
+                    }
+                    {{ engagement.attachmentFileName || 'View attached PDF' }}
+                  </button>
+                }
+
+                @if (evidenceLoadFailed) {
+                  <p class="text-sm text-red-600">Unable to load the attached evidence.</p>
+                }
+              </div>
+            }
+          </mat-card-content>
+        </mat-card>
+
+        @for (comment of comments; track comment.id) {
+          @if (comment.replyToId) {
+            <div
+              class="flex items-center justify-between rounded-t-md border border-gray-300 p-1 text-sm select-none"
+            >
+              <div
+                class="flex items-center"
+                [ngClass]="comment.replyTo && 'cursor-pointer hover:text-blue-500 hover:underline'"
+                (click)="scrollToComment(comment.replyTo)"
+              >
+                <mat-icon class="mr-2">reply</mat-icon>
+                <div class="flex flex-col">
+                  @if (comment.replyTo) {
+                    <span class="font-medium">
+                      Replying to {{ comment.replyTo.user?.preferredName }}
+                      {{ comment.replyTo.user?.lastName }}
+                    </span>
+                    <span class="text-xs text-gray-600">{{ comment.replyTo.comment }}</span>
+                  } @else {
+                    <span class="text-xs text-gray-400 italic">Replying to: Deleted comment</span>
+                  }
+                </div>
+              </div>
+            </div>
+          }
+
+          <mat-card
+            class="mb-2.5 p-3"
+            [class.!rounded-t-none]="comment.replyToId"
+            [id]="'engagement-comment-' + comment.id"
+          >
+            <div class="action absolute right-3 bottom-3 z-10 flex items-center">
+              @if (comment.currentUserCanEdit) {
+                <mat-icon
+                  aria-label="Edit comment"
+                  matTooltip="Edit"
+                  type="button"
+                  (click)="editComment(comment)"
+                >
+                  edit
+                </mat-icon>
+              }
+              <mat-icon
+                aria-label="Reply to comment"
+                matTooltip="Reply"
+                type="button"
+                (click)="replyToComment(comment)"
+              >
+                reply
+              </mat-icon>
+              @if (comment.currentUserCanDelete) {
+                <mat-icon
+                  aria-label="Delete comment"
+                  matTooltip="Delete"
+                  type="button"
+                  (click)="deleteComment(comment)"
+                >
+                  delete
+                </mat-icon>
+              }
+            </div>
+
+            <div class="flex justify-between">
+              <mat-card-title class="flex items-center">
+                <user-icon style="margin-right: 8px" [size]="25" [user]="comment.user"></user-icon>
+                {{ comment.user?.displayName }}
+              </mat-card-title>
+              <div class="flex items-center">
+                <mat-card-subtitle
+                  matTooltipPosition="above"
+                  matTooltipShowDelay="1000"
+                  [matTooltip]="comment.createdAt | localizedDateTime"
+                >
+                  {{ comment.createdAt | humanizedDate }}
+                </mat-card-subtitle>
+              </div>
+            </div>
+
+            <mat-card-content class="pt-2.5 pb-8">
+              @if (editingComment?.id === comment.id) {
+                <mat-form-field appearance="outline" class="flex w-full items-center">
+                  <mat-label>Update Comment</mat-label>
+                  <textarea
+                    class="w-full resize-none overflow-hidden px-1 py-0.5 placeholder:px-1 placeholder:py-0.5"
+                    matInput
+                    maxlength="4095"
+                    [(ngModel)]="editingCommentText"
+                    (keydown.control.enter)="updateComment()"
+                    (keydown.meta.enter)="updateComment()"
+                  ></textarea>
+                  <div class="flex justify-end gap-1">
+                    <button mat-raised-button type="button" (click)="cancelEdit()">Cancel</button>
+                    <button
+                      color="primary"
+                      mat-raised-button
+                      type="button"
+                      [disabled]="!editingCommentText.trim()"
+                      (click)="updateComment()"
+                    >
+                      Update Comment
+                    </button>
+                  </div>
+                </mat-form-field>
+              } @else {
+                <div class="markdown-to-html" [innerHTML]="comment.comment | marked"></div>
+              }
+            </mat-card-content>
+          </mat-card>
+        }
+
+        @if (comments.length === 0) {
+          <p class="py-2 text-center text-sm text-gray-400">No comments yet.</p>
+        }
+
+        <span #commentsEnd aria-hidden="true"></span>
+      </div>
+    }
+  </mat-dialog-content>
+
+  @if (!loading && !loadFailed) {
+    <div
+      class="shrink-0 overflow-hidden border-t border-gray-300 p-2.5"
+      [ngClass]="replyingToComment ? 'h-[205px]' : 'h-[150px]'"
+    >
+      @if (replyingToComment) {
+        <div class="h-[55px]">
+          <div
+            class="flex h-full items-center justify-between rounded-t-md border border-b-0 border-gray-300 p-1 text-sm select-none"
+          >
+            <div class="flex min-w-0 items-center">
+              <mat-icon class="mr-2 shrink-0">reply</mat-icon>
+              <div class="min-w-0">
+                <span class="block font-medium">
+                  Replying to {{ replyingToComment.user?.preferredName }}
+                  {{ replyingToComment.user?.lastName }}
+                </span>
+                <span class="block truncate text-xs text-gray-600">
+                  {{ replyingToComment.comment }}
+                </span>
+              </div>
+            </div>
+            <button aria-label="Cancel reply" mat-icon-button type="button" (click)="cancelReply()">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+        </div>
+      }
+
+      <mat-form-field appearance="outline" class="flex w-full items-center">
+        <mat-label>Comment</mat-label>
+        <textarea
+          class="w-full resize-none px-1 py-0.5 placeholder:px-1 placeholder:py-0.5"
+          matInput
+          maxlength="4095"
+          [(ngModel)]="commentText"
+          (keydown.control.enter)="submitComment()"
+          (keydown.meta.enter)="submitComment()"
+        ></textarea>
+        <div class="flex justify-end">
+          <button
+            color="primary"
+            mat-raised-button
+            type="button"
+            [disabled]="!commentText.trim() || submitting"
+            (click)="submitComment()"
+          >
+            @if (submitting) {
+              <mat-spinner class="mr-2 inline-block" diameter="18"></mat-spinner>
+              Posting...
+            } @else {
+              Submit
+            }
+          </button>
+        </div>
+      </mat-form-field>
+    </div>
+  }
+</div>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.scss b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.scss
new file mode 100644
index 0000000000..684d95154b
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.scss
@@ -0,0 +1,14 @@
+.action .mat-icon {
+  color: #9696969d;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: center;
+  margin-left: 0.3em;
+}
+
+.action .mat-icon:hover {
+  color: black;
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.ts
new file mode 100644
index 0000000000..e6f00e8b38
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-detail-dialog/engagement-detail-dialog.component.ts
@@ -0,0 +1,204 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Inject,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {
+  Engagement,
+  EngagementComment,
+  EngagementCommentService,
+  EngagementService,
+} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-engagement-detail-dialog',
+  templateUrl: './engagement-detail-dialog.component.html',
+  styleUrl: './engagement-detail-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class EngagementDetailDialogComponent implements OnInit, OnDestroy {
+  @ViewChild('commentsEnd') commentsEnd?: ElementRef<HTMLElement>;
+
+  engagement: Engagement;
+  commentText = '';
+  loading = true;
+  loadFailed = false;
+  submitting = false;
+  replyingToComment?: EngagementComment;
+  editingComment?: EngagementComment;
+  editingCommentText = '';
+  evidenceBlobUrl?: string;
+  evidenceLoading = false;
+  evidenceLoadFailed = false;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) readonly data: {engagement: Engagement},
+    private engagementService: EngagementService,
+    private engagementCommentService: EngagementCommentService,
+    private fileDownloader: FileDownloaderService,
+    private alerts: AlertService,
+    private confirmationModal: ConfirmationModalService,
+  ) {
+    this.engagement = data.engagement;
+  }
+
+  get comments(): readonly EngagementComment[] {
+    return [...this.engagement.comments].sort(
+      (first, second) => first.createdAt.getTime() - second.createdAt.getTime(),
+    );
+  }
+
+  ngOnInit(): void {
+    this.engagementService.loadEngagement(this.engagement).subscribe({
+      next: (engagement) => {
+        this.engagement = engagement;
+        this.loading = false;
+        this.loadAttachment();
+        this.scrollToBottom();
+      },
+      error: () => {
+        this.loadFailed = true;
+        this.loading = false;
+      },
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.evidenceBlobUrl) {
+      this.fileDownloader.releaseBlob(this.evidenceBlobUrl);
+    }
+  }
+
+  openAttachment(): void {
+    if (this.evidenceBlobUrl) {
+      window.open(this.evidenceBlobUrl, '_blank', 'noopener,noreferrer');
+    }
+  }
+
+  submitComment(): void {
+    const comment = this.commentText.trim();
+    if (!comment || this.submitting) {
+      return;
+    }
+
+    this.submitting = true;
+    this.engagementCommentService
+      .addComment(this.engagement, comment, this.replyingToComment)
+      .subscribe({
+        next: () => {
+          this.commentText = '';
+          this.submitting = false;
+          this.replyingToComment = undefined;
+          this.scrollToBottom();
+        },
+        error: (error) => {
+          this.submitting = false;
+          this.alerts.error(error?.error ?? 'Unable to add your comment.');
+        },
+      });
+  }
+
+  replyToComment(comment: EngagementComment): void {
+    this.replyingToComment = comment;
+  }
+
+  cancelReply(): void {
+    this.replyingToComment = undefined;
+  }
+
+  editComment(comment: EngagementComment): void {
+    if (!comment.currentUserCanEdit) {
+      return;
+    }
+
+    this.editingComment = comment;
+    this.editingCommentText = comment.comment;
+  }
+
+  cancelEdit(): void {
+    this.editingComment = undefined;
+    this.editingCommentText = '';
+  }
+
+  updateComment(): void {
+    const text = this.editingCommentText.trim();
+    if (!this.editingComment || !text) {
+      return;
+    }
+
+    this.engagementCommentService.updateComment(this.editingComment, text).subscribe({
+      next: () => this.cancelEdit(),
+      error: (error) => this.alerts.error(error?.error ?? 'Unable to update this comment.'),
+    });
+  }
+
+  deleteComment(comment: EngagementComment): void {
+    if (!comment.currentUserCanDelete) {
+      return;
+    }
+
+    this.confirmationModal.show(
+      'Delete comment',
+      'Are you sure you want to delete this engagement comment?',
+      () => {
+        this.engagementCommentService.deleteComment(comment).subscribe({
+          next: () => {
+            if (this.replyingToComment?.id === comment.id) {
+              this.cancelReply();
+            }
+          },
+          error: (error) => this.alerts.error(error?.error ?? 'Unable to delete this comment.'),
+        });
+      },
+    );
+  }
+
+  scrollToComment(comment?: EngagementComment): void {
+    if (!comment) {
+      return;
+    }
+
+    const element = document.getElementById(`engagement-comment-${comment.id}`);
+    element?.scrollIntoView({behavior: 'smooth', block: 'center'});
+  }
+
+  private loadAttachment(): void {
+    if (!this.engagement.hasAttachment) {
+      return;
+    }
+
+    this.evidenceLoading = true;
+    this.fileDownloader.downloadBlob(
+      this.engagement.attachmentUrl,
+      (blobUrl) => {
+        this.evidenceBlobUrl = blobUrl;
+        this.evidenceLoading = false;
+        this.scrollToBottom();
+      },
+      () => {
+        this.evidenceLoadFailed = true;
+        this.evidenceLoading = false;
+      },
+    );
+  }
+
+  scrollToBottom(): void {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const container = this.commentsEnd?.nativeElement.closest(
+          '.mat-mdc-dialog-content',
+        ) as HTMLElement | null;
+        container?.scrollTo({top: container.scrollHeight});
+      });
+    });
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.html b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.html
new file mode 100644
index 0000000000..aa79b48871
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.html
@@ -0,0 +1,100 @@
+<mat-card appearance="outlined" class="h-full">
+  <mat-card-header>
+    <div class="flex w-full items-start justify-between gap-4">
+      <div>
+        <mat-card-title>Engagement Passport</mat-card-title>
+        <mat-card-subtitle class="mb-2.5">
+          A semester view of your engagement with the unit and teaching team.
+        </mat-card-subtitle>
+      </div>
+
+      @if (currentUserCanAddEngagement) {
+        <button
+          aria-label="Add engagement stamp"
+          mat-icon-button
+          matTooltip="Add engagement"
+          type="button"
+          (click)="openAddEngagementDialog()"
+        >
+          <mat-icon>add</mat-icon>
+        </button>
+      }
+    </div>
+  </mat-card-header>
+
+  <mat-card-content>
+    <div aria-label="Engagement stamp legend" class="mb-4 flex flex-wrap gap-x-5 gap-y-2">
+      @for (item of legend; track item.type) {
+        <div class="flex items-center gap-1.5 text-sm text-gray-600">
+          <span
+            class="inline-flex size-6 shrink-0 items-center justify-center rounded-full border"
+            [ngClass]="item.classes"
+          >
+            <mat-icon aria-hidden="true" class="!size-[15px] !text-[15px]">
+              {{ item.icon }}
+            </mat-icon>
+          </span>
+          <span>{{ item.label }}</span>
+        </div>
+      }
+    </div>
+
+    @if (loading) {
+      <div class="flex min-h-[210px] items-center justify-center">
+        <mat-spinner diameter="36"></mat-spinner>
+      </div>
+    } @else {
+      <div class="overflow-x-auto pb-1">
+        <div
+          aria-label="Engagement stamps across the semester"
+          class="flex min-w-[812px] border-b border-gray-300"
+        >
+          @for (week of weeks; track week.week) {
+            <div
+              class="flex flex-1 flex-col border-r border-gray-200 first:border-l"
+              [class.bg-blue-50]="week.week === currentWeek"
+              [style.min-width.px]="weekWidth(week.stamps)"
+            >
+              <div class="flex min-h-[210px] flex-1 items-end justify-center gap-[5px] px-2 py-2.5">
+                @for (column of stampColumns(week.stamps); track $index) {
+                  <div class="flex flex-col-reverse gap-[5px]">
+                    @for (stamp of column; track $index) {
+                      <button
+                        class="inline-flex size-[35px] shrink-0 cursor-pointer items-center justify-center rounded-full border"
+                        type="button"
+                        [attr.aria-label]="stamp.label"
+                        [matTooltip]="stamp.label"
+                        [ngClass]="stamp.classes"
+                        (click)="openEngagement(stamp.engagement)"
+                      >
+                        <mat-icon aria-hidden="true" class="!size-[18px] !text-[18px]">
+                          {{ stamp.icon }}
+                        </mat-icon>
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+
+              <div
+                class="flex flex-col items-center border-t border-gray-300 px-0.5 py-[7px] text-[11px] leading-[1.15] text-gray-500"
+                [class.!text-blue-700]="week.week === currentWeek"
+              >
+                <span>Week</span>
+                <strong class="mt-0.5 text-sm text-current">{{ week.week }}</strong>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    @if (loadFailed) {
+      <p class="mt-3 text-sm text-red-600">Unable to load engagement stamps.</p>
+    }
+
+    <p class="mt-3 text-sm font-light text-gray-500">
+      Each stamp records a moment of engagement. Hover over or focus a stamp for more detail.
+    </p>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.scss b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.ts
new file mode 100644
index 0000000000..305e2c4e60
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/engagement-passport-card/engagement-passport-card.component.ts
@@ -0,0 +1,202 @@
+import {ChangeDetectionStrategy, Component, Input, OnChanges} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {
+  Engagement,
+  EngagementService,
+  Project,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {AddEngagementDialogComponent} from './add-engagement-dialog/add-engagement-dialog.component';
+import {EngagementDetailDialogComponent} from './engagement-detail-dialog/engagement-detail-dialog.component';
+
+interface EngagementPresentation {
+  label: string;
+  icon: string;
+  classes: string;
+}
+
+interface EngagementStamp {
+  engagement: Engagement;
+  type: string;
+  label: string;
+  icon: string;
+  classes: string;
+}
+
+interface EngagementWeek {
+  week: number;
+  stamps: EngagementStamp[];
+}
+
+interface EngagementLegendItem extends EngagementPresentation {
+  type: string;
+}
+
+@Component({
+  selector: 'f-engagement-passport-card',
+  templateUrl: './engagement-passport-card.component.html',
+  styleUrl: './engagement-passport-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class EngagementPassportCardComponent implements OnChanges {
+  @Input() project: Project;
+
+  loading = false;
+  loadFailed = false;
+  weeks: EngagementWeek[] = [];
+
+  private readonly fallbackPresentation: EngagementPresentation = {
+    label: 'Other engagement',
+    icon: 'star',
+    classes: 'border-gray-300 bg-gray-50 text-gray-700',
+  };
+
+  private readonly presentations: Record<string, EngagementPresentation> = {
+    attendance: {
+      label: 'Class attendance',
+      icon: 'groups',
+      classes: 'border-green-300 bg-green-50 text-green-700',
+    },
+    discussion: {
+      label: 'Discussion',
+      icon: 'record_voice_over',
+      classes: 'border-cyan-300 bg-cyan-50 text-cyan-700',
+    },
+    forum: {
+      label: 'Forum post',
+      icon: 'forum',
+      classes: 'border-blue-300 bg-blue-50 text-blue-700',
+    },
+    email: {
+      label: 'Tutor email',
+      icon: 'mail',
+      classes: 'border-violet-300 bg-violet-50 text-violet-700',
+    },
+    attention: {
+      label: 'Needs attention',
+      icon: 'feedback',
+      classes: 'border-yellow-300 bg-yellow-50 text-yellow-700',
+    },
+  };
+
+  readonly legend: EngagementLegendItem[] = Object.entries(this.presentations).map(
+    ([type, presentation]) => ({type, ...presentation}),
+  );
+
+  constructor(
+    private engagementService: EngagementService,
+    private dialog: MatDialog,
+    private userService: UserService,
+  ) {}
+
+  get currentWeek(): number | null {
+    return this.project?.unit?.currentUnitWeek ?? null;
+  }
+
+  get currentUserCanAddEngagement(): boolean {
+    const currentUserId = this.userService.currentUser?.id;
+    return (
+      currentUserId !== undefined &&
+      this.project?.unit?.staff.some((unitRole) => unitRole.user.id === currentUserId)
+    );
+  }
+
+  ngOnChanges(): void {
+    if (!this.project?.id) {
+      return;
+    }
+
+    const cachedEngagements = this.project.engagementCache.currentValues;
+    this.buildWeeks(cachedEngagements);
+    this.loading = cachedEngagements.length === 0;
+    this.loadFailed = false;
+
+    this.engagementService.loadEngagements(this.project, true).subscribe({
+      next: (engagements) => {
+        this.buildWeeks(engagements);
+        this.loading = false;
+      },
+      error: () => {
+        this.loadFailed = true;
+        this.loading = false;
+      },
+    });
+  }
+
+  stampColumns(stamps: EngagementStamp[]): EngagementStamp[][] {
+    const columns: EngagementStamp[][] = [];
+
+    for (let index = 0; index < stamps.length; index += 5) {
+      columns.push(stamps.slice(index, index + 5));
+    }
+
+    return columns;
+  }
+
+  weekWidth(stamps: EngagementStamp[]): number {
+    const columnCount = Math.max(1, Math.ceil(stamps.length / 5));
+    const stampWidth = 35;
+    const columnGap = 5;
+    const horizontalPadding = 16;
+
+    return Math.max(
+      58,
+      columnCount * stampWidth + (columnCount - 1) * columnGap + horizontalPadding,
+    );
+  }
+
+  openAddEngagementDialog(): void {
+    const dialogRef = this.dialog.open(AddEngagementDialogComponent, {
+      data: {project: this.project},
+      width: 'calc(100vw - 32px)',
+      maxWidth: '640px',
+      autoFocus: false,
+    });
+
+    dialogRef.afterClosed().subscribe((engagement?: Engagement) => {
+      if (engagement) {
+        this.buildWeeks(this.project.engagementCache.currentValues);
+      }
+    });
+  }
+
+  openEngagement(engagement: Engagement): void {
+    this.dialog.open(EngagementDetailDialogComponent, {
+      data: {engagement},
+      width: 'calc(100vw - 32px)',
+      maxWidth: '900px',
+      autoFocus: false,
+    });
+  }
+
+  private buildWeeks(engagements: readonly Engagement[]): void {
+    const totalWeeks = Math.max(1, this.project.unit.totalWeeks);
+    this.weeks = Array.from({length: totalWeeks}, (_, index) => ({
+      week: index + 1,
+      stamps: [],
+    }));
+
+    for (const engagement of engagements) {
+      const weekNumber = this.project.unit.weekNumber(engagement.occurredAt);
+      if (weekNumber === null || weekNumber < 1 || weekNumber > totalWeeks) {
+        continue;
+      }
+
+      const type = this.normalizeEngagementType(engagement.engagementType);
+      const presentation = this.presentations[type] ?? this.fallbackPresentation;
+      this.weeks[weekNumber - 1].stamps.push({
+        engagement,
+        type,
+        label: engagement.note,
+        icon: presentation.icon,
+        classes: presentation.classes,
+      });
+    }
+  }
+
+  private normalizeEngagementType(engagementType: string): string {
+    const type = engagementType?.trim().toLowerCase();
+    return type === 'discuss' ? 'discussion' : type;
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.html b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.html
new file mode 100644
index 0000000000..e51661115f
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.html
@@ -0,0 +1,82 @@
+<mat-card appearance="outlined" class="h-full">
+  <mat-card-header>
+    <mat-card-title>Peer Progress Summary</mat-card-title>
+    <mat-card-subtitle class="mb-2.5">
+      Your unit progress and anonymous cohort progress.
+    </mat-card-subtitle>
+  </mat-card-header>
+
+  <mat-card-content>
+    @switch (view.state) {
+      @case ('loading') {
+        <div aria-live="polite" class="flex items-center gap-2 py-4" role="status">
+          <mat-spinner diameter="20"></mat-spinner>
+          <span>Loading peer progress...</span>
+        </div>
+      }
+
+      @case ('error') {
+        <div class="flex items-center gap-2 py-4" role="alert">
+          <mat-icon aria-hidden="true">error</mat-icon>
+          <span>{{ view.message || 'Could not load peer progress.' }}</span>
+        </div>
+      }
+
+      @case ('disabled') {
+        <div class="flex items-center gap-2 py-4" role="status">
+          <mat-icon aria-hidden="true">block</mat-icon>
+          <span>{{ view.message || 'Peer progress is disabled for this unit.' }}</span>
+        </div>
+      }
+
+      @default {
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <section aria-label="Your unit progress" class="rounded-md border border-gray-200 p-4">
+            <h5 class="mb-2 font-semibold">Your progress</h5>
+
+            @if (studentPercentage !== null) {
+              <p class="mb-2 text-2xl font-semibold">{{ studentPercentage }}%</p>
+
+              <mat-progress-bar
+                mode="determinate"
+                [attr.aria-label]="'Your unit progress: ' + studentPercentage + ' percent'"
+                [value]="studentPercentage"
+              ></mat-progress-bar>
+            } @else {
+              <p class="text-gray-600">Your progress is unavailable.</p>
+            }
+          </section>
+
+          <section
+            aria-label="Anonymous cohort unit progress"
+            class="rounded-md border border-gray-200 p-4"
+          >
+            <h5 class="mb-2 font-semibold">Anonymous cohort</h5>
+
+            @if (canShowCohortPercentage) {
+              <p class="mb-2 text-2xl font-semibold">{{ cohortPercentage }}%</p>
+
+              <mat-progress-bar
+                mode="determinate"
+                [attr.aria-label]="
+                  'Anonymous cohort unit progress: ' + cohortPercentage + ' percent'
+                "
+                [value]="cohortPercentage ?? 0"
+              ></mat-progress-bar>
+            } @else {
+              <div aria-live="polite" class="flex items-center gap-2 text-gray-600" role="status">
+                <mat-icon aria-hidden="true">
+                  {{ cohortStateIcon }}
+                </mat-icon>
+
+                <span>
+                  {{ view.message || 'Anonymous cohort progress is unavailable.' }}
+                </span>
+              </div>
+            }
+          </section>
+        </div>
+      }
+    }
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.scss b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.scss
new file mode 100644
index 0000000000..5d4e87f30f
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.spec.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.spec.ts
new file mode 100644
index 0000000000..dbf4941626
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.spec.ts
@@ -0,0 +1,165 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {PeerProgressUnitSummary} from 'src/app/api/models/peer-progress-unit-summary';
+import {resolvePeerProgressUnitSummaryState} from 'src/app/api/models/peer-progress-unit-summary-state';
+import {PeerProgressUnitSummaryComponent} from './peer-progress-unit-summary.component';
+
+describe('PeerProgressUnitSummaryComponent', () => {
+  let component: PeerProgressUnitSummaryComponent;
+  let fixture: ComponentFixture<PeerProgressUnitSummaryComponent>;
+
+  const baseSummary: PeerProgressUnitSummary = {
+    unitId: 123456,
+    targetGrade: 3,
+    studentPercentage: 65,
+    submittedPercentage: 42,
+    isSuppressed: false,
+    isStale: false,
+    isFeatureEnabled: true,
+    lastUpdatedAt: '2026-08-19T00:00:00.000Z',
+    unavailableMessage: '',
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PeerProgressUnitSummaryComponent],
+      imports: [MatCardModule, MatIconModule, MatProgressBarModule, MatProgressSpinnerModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PeerProgressUnitSummaryComponent);
+    component = fixture.componentInstance;
+  });
+
+  function render(summary: PeerProgressUnitSummary): string {
+    fixture.componentRef.setInput(
+      'view',
+      resolvePeerProgressUnitSummaryState(false, null, summary),
+    );
+
+    fixture.detectChanges();
+
+    return String(fixture.nativeElement.textContent).replace(/\s+/g, ' ').trim();
+  }
+
+  it('shows separately labelled student and anonymous cohort progress', () => {
+    const text = render(baseSummary);
+
+    expect(component.view.state).toBe('success');
+    expect(text).toContain('Your progress');
+    expect(text).toContain('65%');
+    expect(text).toContain('Anonymous cohort');
+    expect(text).toContain('42%');
+
+    expect(
+      fixture.nativeElement.querySelector('[aria-label="Your unit progress: 65 percent"]'),
+    ).toBeTruthy();
+
+    expect(
+      fixture.nativeElement.querySelector(
+        '[aria-label="Anonymous cohort unit progress: 42 percent"]',
+      ),
+    ).toBeTruthy();
+
+    expect(fixture.nativeElement.querySelectorAll('mat-progress-bar')).toHaveLength(2);
+
+    expect(text).not.toContain('123456');
+  });
+
+  it('keeps genuine zero progress visible as a real value', () => {
+    const text = render({
+      ...baseSummary,
+      studentPercentage: 0,
+      submittedPercentage: 0,
+    });
+
+    expect(component.view.state).toBe('no-data');
+    expect((text.match(/0%/g) ?? []).length).toBe(2);
+    expect(text).not.toContain('Progress unavailable.');
+    expect(text).not.toContain('disabled');
+  });
+
+  it('does not reveal a cohort percentage when data is suppressed', () => {
+    const text = render({
+      ...baseSummary,
+      submittedPercentage: 91,
+      isSuppressed: true,
+      unavailableMessage: 'Not enough students to show progress.',
+    });
+
+    expect(component.view.state).toBe('hidden');
+    expect(component.view.data?.studentPercentage).toBe(65);
+    expect(component.view.data?.submittedPercentage).toBeNull();
+
+    expect(text).toContain('65%');
+    expect(text).toContain('Not enough students to show progress.');
+    expect(text).not.toContain('91%');
+  });
+
+  it('keeps unavailable cohort data separate from student progress', () => {
+    const text = render({
+      ...baseSummary,
+      submittedPercentage: null,
+      unavailableMessage: 'Progress unavailable.',
+    });
+
+    expect(component.view.state).toBe('unavailable');
+    expect(text).toContain('65%');
+    expect(text).toContain('Progress unavailable.');
+
+    expect(fixture.nativeElement.querySelectorAll('mat-progress-bar')).toHaveLength(1);
+  });
+
+  it('does not render percentages when the feature is disabled', () => {
+    const text = render({
+      ...baseSummary,
+      isFeatureEnabled: false,
+      unavailableMessage: 'Peer Progress Indicator is disabled for this unit.',
+    });
+
+    expect(component.view.state).toBe('disabled');
+    expect(component.view.data?.studentPercentage).toBeNull();
+    expect(component.view.data?.submittedPercentage).toBeNull();
+
+    expect(text).toContain('Peer Progress Indicator is disabled for this unit.');
+    expect(text).not.toContain('%');
+  });
+
+  it('keeps stale cohort information privacy safe', () => {
+    const text = render({
+      ...baseSummary,
+      submittedPercentage: 88,
+      isStale: true,
+      unavailableMessage: 'Peer progress is currently unavailable.',
+    });
+
+    expect(component.view.state).toBe('stale');
+    expect(component.view.data?.studentPercentage).toBe(65);
+    expect(component.view.data?.submittedPercentage).toBeNull();
+
+    expect(text).toContain('65%');
+    expect(text).toContain('Peer progress is currently unavailable.');
+    expect(text).not.toContain('88%');
+  });
+
+  it('updates when its typed input changes', () => {
+    let text = render(baseSummary);
+
+    expect(text).toContain('65%');
+    expect(text).toContain('42%');
+
+    text = render({
+      ...baseSummary,
+      studentPercentage: 80,
+      submittedPercentage: 50,
+    });
+
+    expect(text).toContain('80%');
+    expect(text).toContain('50%');
+    expect(text).not.toContain('65%');
+    expect(text).not.toContain('42%');
+  });
+});
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.ts
new file mode 100644
index 0000000000..9e135cef57
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/peer-progress-unit-summary/peer-progress-unit-summary.component.ts
@@ -0,0 +1,43 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {PeerProgressUnitSummaryViewModel} from 'src/app/api/models/peer-progress-unit-summary-state';
+
+@Component({
+  selector: 'f-peer-progress-unit-summary',
+  templateUrl: './peer-progress-unit-summary.component.html',
+  styleUrls: ['./peer-progress-unit-summary.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class PeerProgressUnitSummaryComponent {
+  @Input({required: true}) view: PeerProgressUnitSummaryViewModel = {
+    state: 'loading',
+    data: null,
+    message: null,
+  };
+
+  get studentPercentage(): number | null {
+    return this.view.data?.studentPercentage ?? null;
+  }
+
+  get cohortPercentage(): number | null {
+    return this.view.data?.submittedPercentage ?? null;
+  }
+
+  get canShowCohortPercentage(): boolean {
+    return (
+      (this.view.state === 'success' || this.view.state === 'no-data') &&
+      this.cohortPercentage !== null
+    );
+  }
+
+  get cohortStateIcon(): string {
+    switch (this.view.state) {
+      case 'hidden':
+        return 'visibility_off';
+      case 'stale':
+        return 'history';
+      default:
+        return 'info';
+    }
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.coffee b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.coffee
deleted file mode 100644
index 0a82f1ab9a..0000000000
--- a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.coffee
+++ /dev/null
@@ -1,44 +0,0 @@
-angular.module('doubtfire.projects.states.dashboard.directives.progress-dashboard', [])
-#
-# Summary dashboard showing some graphs and way to change the
-# current target grade
-#
-.directive('progressDashboard', ->
-  restrict: 'E'
-  templateUrl: 'projects/states/dashboard/directives/progress-dashboard/progress-dashboard.tpl.html'
-  scope:
-    project: '='
-    onUpdateTargetGrade: '='
-  controller: ($scope, $stateParams, newProjectService, gradeService, analyticsService, alertService) ->
-    # Is the current user a tutor?
-    $scope.tutor = $stateParams.tutor
-    # Number of tasks completed and remaining
-    updateTaskCompletionValues  = ->
-      completedTasks = $scope.project.numberTasks("complete")
-      $scope.numberOfTasks =
-        completed: completedTasks
-        remaining: $scope.project.activeTasks().length - completedTasks
-    updateTaskCompletionValues()
-
-    # Expose grade names and values
-    $scope.grades =
-      names: gradeService.grades
-      values: gradeService.gradeValues
-
-    $scope.updateTargetGrade = (newGrade) ->
-      $scope.project.targetGrade = newGrade
-      newProjectService.update($scope.project).subscribe(
-        (project) ->
-          project.refreshBurndownChartData()
-
-          # Update task completions and re-render task status graph
-          updateTaskCompletionValues()
-          $scope.renderTaskStatusPieChart?()
-          $scope.onUpdateTargetGrade?()
-          analyticsService.event("Student Project View - Progress Dashboard", "Grade Changed", $scope.grades.names[newGrade])
-          alertService.success( "Updated target grade successfully", 2000)
-
-        (failure) ->
-          alertService.error( "Failed to update target grade", 4000)
-      )
-)
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.html b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.html
new file mode 100644
index 0000000000..8eb72cbf50
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.html
@@ -0,0 +1,148 @@
+<div class="overflow-hidden rounded-lg bg-white shadow-md max-[991px]:mt-6 min-[992px]:mt-0">
+  <div class="items-center bg-neutral-100 px-3.5">
+    <h4 class="py-3.5 font-semibold text-gray-800">
+      Progress Dashboard
+      @if (viewingOtherStudentProject) {
+        <span>for {{ project?.student?.name }}</span>
+      }
+    </h4>
+  </div>
+  <div class="grid grid-cols-1 items-stretch gap-3.5 p-3.5 xl:grid-cols-2">
+    <!-- Task Planner Card -->
+    <div
+      class="size-full"
+      [ngClass]="
+        showSubmittedGrade
+          ? 'xl:col-span-2 xl:mx-auto xl:w-[calc((100%-0.875rem)/2)]'
+          : 'xl:col-span-1'
+      "
+    >
+      <f-task-planner-card class="block size-full" [project]="project"></f-task-planner-card>
+    </div>
+
+    <!-- Target Grade Card -->
+    <div class="h-full xl:col-span-1">
+      <mat-card appearance="outlined" class="flex h-full flex-col">
+        <mat-card-header>
+          <mat-card-title>Target Grade</mat-card-title>
+          <mat-card-subtitle class="mb-2.5">
+            <p>Your target grade changes which tasks you need to complete.</p>
+          </mat-card-subtitle>
+        </mat-card-header>
+
+        <mat-card-content class="flex flex-1 items-center">
+          <div class="w-full">
+            <mat-form-field appearance="fill" class="w-full">
+              <mat-label>Select Target Grade</mat-label>
+              <mat-select
+                aria-label="Target grade"
+                [disabled]="isUpdatingTargetGrade || viewingOtherStudentProject"
+                [value]="project.targetGrade"
+                (selectionChange)="updateTargetGrade($event.value)"
+              >
+                @for (grade of grades.values; track grade) {
+                  <mat-option [value]="grade">
+                    {{ grades.names[grade] }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            <div class="ml-0.5 py-1 text-gray-600">
+              Plan task dates and prerequisites in the
+              <a class="cursor-pointer underline" [routerLink]="['/projects', project.id, 'plan']">
+                Task Planner
+              </a>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+
+    @if (showSubmittedGrade) {
+      <!-- Submitted Grade Card -->
+      <div class="h-full xl:col-span-1">
+        <mat-card appearance="outlined" class="flex h-full flex-col">
+          <mat-card-header>
+            <mat-card-title>Submitted Grade</mat-card-title>
+            <mat-card-subtitle class="mb-2.5">
+              <p>The grade you are submitting your portfolio for.</p>
+            </mat-card-subtitle>
+          </mat-card-header>
+
+          <mat-card-content class="flex flex-1 items-center">
+            <div class="w-full">
+              <mat-form-field appearance="fill" class="w-full">
+                <mat-label>Select Submitted Grade</mat-label>
+                <mat-select disabled [value]="project.submittedGrade">
+                  @for (grade of grades.values; track grade) {
+                    <mat-option [value]="grade">
+                      {{ grades.names[grade] }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    }
+
+    <!-- Unit learning outcomes -->
+    <div class="xl:col-span-2">
+      <f-task-ilos-card [iloContextType]="'Unit'" [unit]="project.unit"></f-task-ilos-card>
+    </div>
+
+    <!-- Engagement Passport Card -->
+    <div class="xl:col-span-2">
+      <f-engagement-passport-card [project]="project"></f-engagement-passport-card>
+    </div>
+    <!-- PPI-F02 Unit Peer Progress Summary -->
+    @if (showDemoPeerProgress) {
+      <div class="xl:col-span-2">
+        <f-peer-progress-unit-summary [view]="peerProgressView"></f-peer-progress-unit-summary>
+      </div>
+    }
+
+    <div class="grid grid-cols-1 items-stretch gap-3.5 xl:col-span-2 xl:grid-cols-2">
+      <mat-card appearance="outlined" class="h-full min-w-0">
+        <mat-card-header>
+          <mat-card-title>Progress Burndown</mat-card-title>
+          <mat-card-subtitle>
+            The burndown chart shows how much work remains for you to achieve your target grade.
+          </mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content class="min-w-0">
+          <f-progress-burndown-chart
+            class="block min-w-0"
+            [grade]="project.targetGrade"
+            [project]="project"
+            [unit]="project.unit"
+          ></f-progress-burndown-chart>
+          <div class="mt-2.5 p-2.5 font-light text-gray-600">
+            Aim to keep your
+            <strong class="font-semibold text-red-500">Complete</strong>
+            line close to or ahead of the
+            <strong class="font-semibold text-gray-500">Target</strong>
+            line to keep on track.
+          </div>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card appearance="outlined" class="h-full min-w-0">
+        <mat-card-header>
+          <mat-card-title>Task Statuses</mat-card-title>
+          <mat-card-subtitle>
+            Breakdown of tasks at or below your selected target grade
+          </mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content class="min-w-0">
+          <f-task-visualisation
+            class="block min-w-0"
+            [grade]="project.targetGrade"
+            [project]="project"
+          ></f-task-visualisation>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.scss b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.spec.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.spec.ts
new file mode 100644
index 0000000000..d4c2cc655f
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.spec.ts
@@ -0,0 +1,229 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {NO_ERRORS_SCHEMA, SimpleChange} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSelectHarness} from '@angular/material/select/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {of, throwError} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {PeerProgressIndicatorService} from 'src/app/api/services/peer-progress-indicator.service';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {ProgressDashboardComponent} from './progress-dashboard.component';
+
+describe('ProgressDashboardComponent', () => {
+  let component: ProgressDashboardComponent;
+  let fixture: ComponentFixture<ProgressDashboardComponent>;
+  let project: Project;
+  let projectServiceUpdate: ReturnType<typeof vi.fn>;
+  let alertSuccess: ReturnType<typeof vi.fn>;
+  let alertError: ReturnType<typeof vi.fn>;
+
+  beforeEach(async () => {
+    project = {
+      id: 18,
+      targetGrade: 0,
+      unit: {
+        myRole: 'Student',
+        gradeDefinitions: [
+          {value: 0, label: 'Pass'},
+          {value: 1, label: 'Credit'},
+        ],
+      },
+      activeTasks: vi
+        .fn()
+        .mockReturnValue([{status: 'complete'}, {status: 'not_started'}, {status: 'not_started'}]),
+      refreshBurndownChartData: vi.fn(),
+    } as unknown as Project;
+
+    projectServiceUpdate = vi.fn().mockReturnValue(of(project));
+    alertSuccess = vi.fn();
+    alertError = vi.fn();
+
+    await TestBed.configureTestingModule({
+      declarations: [ProgressDashboardComponent],
+      imports: [MatCardModule, MatFormFieldModule, MatSelectModule, NoopAnimationsModule],
+      providers: [
+        {
+          provide: GradeService,
+          useValue: {
+            grades: {0: 'Pass', 1: 'Credit'},
+            gradeValues: [0, 1],
+            gradeValuesFor: () => [0, 1],
+          },
+        },
+        {
+          provide: PeerProgressIndicatorService,
+          useValue: {getDemoUnitSummary: vi.fn().mockReturnValue(of(null))},
+        },
+        {provide: DemoModeStore, useValue: {enabled: true}},
+        {provide: ProjectService, useValue: {update: projectServiceUpdate}},
+        {provide: AlertService, useValue: {success: alertSuccess, error: alertError}},
+        {provide: UserService, useValue: {currentUser: {id: 25}}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProgressDashboardComponent);
+    component = fixture.componentInstance;
+    component.project = project;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('lets the student select a target grade directly from the dashboard', async () => {
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const select = await loader.getHarness(
+      MatSelectHarness.with({selector: '[aria-label="Target grade"]'}),
+    );
+
+    expect(await select.isDisabled()).toBe(false);
+    expect(await select.getValueText()).toBe('Pass');
+
+    await select.open();
+    await select.clickOptions({text: 'Credit'});
+
+    expect(project.targetGrade).toBe(1);
+    expect(projectServiceUpdate).toHaveBeenCalledWith(project);
+    expect(alertSuccess).toHaveBeenCalledWith('Updated target grade successfully', 2000);
+    expect(component.numberOfTasks).toEqual({completed: 1, remaining: 2});
+  });
+
+  it('locks the selector when staff are viewing another student project', async () => {
+    project.unit.myRole = 'Tutor';
+    project.student = {id: 99} as Project['student'];
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const select = await loader.getHarness(
+      MatSelectHarness.with({selector: '[aria-label="Target grade"]'}),
+    );
+
+    expect(component.viewingOtherStudentProject).toBe(true);
+    expect(await select.isDisabled()).toBe(true);
+  });
+
+  it('restores the previous target grade when the update fails', () => {
+    projectServiceUpdate.mockReturnValueOnce(throwError(() => new Error('update failed')));
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    component.updateTargetGrade(1);
+
+    expect(project.targetGrade).toBe(0);
+    expect(component.isUpdatingTargetGrade).toBe(false);
+    expect(alertError).toHaveBeenCalledWith('Failed to update target grade', 4000);
+  });
+
+  it('uses the target-scoped task collection for completion totals', () => {
+    component.ngOnInit();
+
+    expect(component.numberOfTasks).toEqual({completed: 1, remaining: 2});
+  });
+
+  it('does not cap or clip the burndown and status cards', () => {
+    const host = fixture.nativeElement as HTMLElement;
+    const cardTitles = Array.from(host.querySelectorAll<HTMLElement>('mat-card-title'));
+    const burndownCard = cardTitles
+      .find((title) => title.textContent.trim() === 'Progress Burndown')
+      ?.closest('mat-card') as HTMLElement;
+    const statusCard = cardTitles
+      .find((title) => title.textContent.trim() === 'Task Statuses')
+      ?.closest('mat-card') as HTMLElement;
+    const burndownContent = burndownCard?.querySelector('mat-card-content') as HTMLElement;
+
+    // jsdom loads no stylesheets and lays nothing out, so every element measures 0 high
+    // and a utility class never reaches getComputedStyle. The computed pair catches a cap
+    // set inline or in the component styles, and the class scan covers the utility route
+    // the regression actually took, for any height cap rather than the one literal value.
+    const clipping = (element: HTMLElement) => {
+      const computed = getComputedStyle(element);
+      return {
+        maxHeight: computed.maxHeight,
+        overflowY: computed.overflowY,
+        clippingClasses: Array.from(element.classList).filter((name) =>
+          /^max-h-|^overflow-(y-)?hidden$/.test(name),
+        ),
+      };
+    };
+    const uncapped = {maxHeight: 'none', overflowY: 'visible', clippingClasses: []};
+
+    expect(burndownCard).toBeTruthy();
+    expect(statusCard).toBeTruthy();
+    expect(burndownContent).toBeTruthy();
+    expect(clipping(burndownCard)).toEqual(uncapped);
+    expect(clipping(statusCard)).toEqual(uncapped);
+    expect(clipping(burndownContent)).toEqual(uncapped);
+  });
+
+  it('renders fabricated unit peer progress only while demo mode is enabled', () => {
+    expect(fixture.nativeElement.querySelector('f-peer-progress-unit-summary')).toBeTruthy();
+
+    (component.demoMode as {enabled: boolean}).enabled = false;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('f-peer-progress-unit-summary')).toBeNull();
+  });
+});
+
+describe('ProgressDashboardComponent route reuse', () => {
+  it('refreshes summary data when the active project changes', () => {
+    const gradeValuesFor = vi.fn(() => [0]);
+    const component = new ProgressDashboardComponent(
+      {
+        grades: {0: 'Pass'},
+        gradeValues: [0],
+        gradeValuesFor,
+      } as unknown as GradeService,
+      {
+        getDemoUnitSummary: vi.fn().mockReturnValue(of(null)),
+      } as unknown as PeerProgressIndicatorService,
+      {} as ProjectService,
+      {} as AlertService,
+      {} as UserService,
+      {enabled: true} as DemoModeStore,
+    );
+    const firstProject = {
+      id: 2,
+      targetGrade: 0,
+      unit: {gradeDefinitions: [{value: 0, label: 'Pass'}]},
+      numberTasks: vi.fn(() => 1),
+      activeTasks: vi.fn(() => [{}, {}, {}]),
+      refreshBurndownChartData: vi.fn(),
+    } as unknown as Project;
+    const nextProject = {
+      id: 18,
+      targetGrade: 0,
+      unit: {gradeDefinitions: [{value: 0, label: 'Pass'}]},
+      numberTasks: vi.fn(() => 2),
+      activeTasks: vi.fn(() => [
+        {status: 'complete'},
+        {status: 'complete'},
+        {status: 'not_started'},
+        {status: 'not_started'},
+      ]),
+      refreshBurndownChartData: vi.fn(),
+    } as unknown as Project;
+    component.project = firstProject;
+    component.ngOnInit();
+    vi.clearAllMocks();
+
+    component.project = nextProject;
+    component.ngOnChanges({project: new SimpleChange(firstProject, nextProject, false)});
+
+    expect(gradeValuesFor).toHaveBeenCalledWith(nextProject.unit);
+    expect(component.numberOfTasks).toEqual({completed: 2, remaining: 2});
+    expect(nextProject.refreshBurndownChartData).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.ts
new file mode 100644
index 0000000000..4d617675e4
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.ts
@@ -0,0 +1,174 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {take} from 'rxjs/operators';
+import {
+  PeerProgressUnitSummaryViewModel,
+  resolvePeerProgressUnitSummaryState,
+} from 'src/app/api/models/peer-progress-unit-summary-state';
+import {Project} from 'src/app/api/models/project';
+import {PeerProgressIndicatorService} from 'src/app/api/services/peer-progress-indicator.service';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {calculateCompletionPercentage} from 'src/app/common/services/ppi-progress-calculation.service';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+
+@Component({
+  selector: 'f-progress-dashboard',
+  templateUrl: './progress-dashboard.component.html',
+  styleUrls: ['./progress-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProgressDashboardComponent implements OnChanges, OnInit {
+  @Input() project: Project;
+  @Input() showSubmittedGrade?: boolean = false;
+  @Output() doUpdateTargetGrade: EventEmitter<void> = new EventEmitter();
+
+  grades: {names: Record<number, string>; values: number[]} = {
+    names: this.gradeService.grades,
+    values: this.gradeService.gradeValues,
+  };
+  numberOfTasks = {
+    completed: 0,
+    remaining: 0,
+  };
+  isUpdatingTargetGrade = false;
+
+  peerProgressView: PeerProgressUnitSummaryViewModel = resolvePeerProgressUnitSummaryState(
+    true,
+    null,
+    null,
+  );
+
+  constructor(
+    private gradeService: GradeService,
+    private peerProgressService: PeerProgressIndicatorService,
+    private projectService: ProjectService,
+    private alertService: AlertService,
+    private userService: UserService,
+    readonly demoMode: DemoModeStore,
+  ) {}
+
+  ngOnInit(): void {
+    this.refreshProjectSummary();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('project' in changes && !changes.project.firstChange) {
+      this.refreshProjectSummary();
+    }
+  }
+
+  private refreshProjectSummary(): void {
+    if (!this.project?.unit) {
+      return;
+    }
+
+    this.grades.values = this.gradeService.gradeValuesFor(this.project.unit);
+    this.grades.names = Object.fromEntries(
+      this.project.unit.gradeDefinitions.map((definition) => [definition.value, definition.label]),
+    );
+    this.updateTaskCompletionValues();
+    this.loadPeerProgressUnitSummary();
+    this.project?.refreshBurndownChartData();
+  }
+
+  public get viewingOtherStudentProject(): boolean {
+    const role = this.project?.unit?.myRole;
+    const currentUser = this.userService.currentUser;
+
+    return !!role && role !== 'Student' && this.project?.student?.id !== currentUser?.id;
+  }
+
+  public get showDemoPeerProgress(): boolean {
+    return this.demoMode.enabled && !this.viewingOtherStudentProject;
+  }
+
+  updateTargetGrade(newGrade: number): void {
+    if (
+      this.isUpdatingTargetGrade ||
+      newGrade === undefined ||
+      newGrade === null ||
+      newGrade === this.project.targetGrade
+    ) {
+      return;
+    }
+
+    const previousTargetGrade = this.project.targetGrade;
+    this.project.targetGrade = newGrade;
+    this.isUpdatingTargetGrade = true;
+
+    this.projectService.update(this.project).subscribe({
+      next: (project) => {
+        this.isUpdatingTargetGrade = false;
+        project.refreshBurndownChartData();
+        this.updateTaskCompletionValues();
+        this.loadPeerProgressUnitSummary();
+        this.doUpdateTargetGrade.emit();
+        this.alertService.success('Updated target grade successfully', 2000);
+      },
+      error: (error) => {
+        this.isUpdatingTargetGrade = false;
+        this.project.targetGrade = previousTargetGrade;
+        this.updateTaskCompletionValues();
+        this.loadPeerProgressUnitSummary();
+        this.doUpdateTargetGrade.emit();
+        console.error('Error updating target grade:', error);
+        this.alertService.error('Failed to update target grade', 4000);
+      },
+    });
+  }
+
+  private loadPeerProgressUnitSummary(): void {
+    if (!this.showDemoPeerProgress) {
+      return;
+    }
+
+    const availableTasks = this.numberOfTasks.completed + this.numberOfTasks.remaining;
+
+    const studentPercentage = calculateCompletionPercentage(
+      this.numberOfTasks.completed,
+      availableTasks,
+    );
+
+    this.peerProgressView = resolvePeerProgressUnitSummaryState(true, null, null);
+
+    // PPI-F02 demonstration only.
+    // A live authorised unit-level API remains future work.
+    this.peerProgressService
+      .getDemoUnitSummary(
+        this.project.unit.id,
+        this.project.targetGrade,
+        studentPercentage,
+        'normal',
+      )
+      .pipe(take(1))
+      .subscribe({
+        next: (data) => {
+          this.peerProgressView = resolvePeerProgressUnitSummaryState(false, null, data);
+        },
+        error: (error) => {
+          this.peerProgressView = resolvePeerProgressUnitSummaryState(false, error, null);
+        },
+      });
+  }
+
+  private updateTaskCompletionValues(): void {
+    const activeTasks = this.project.activeTasks();
+    const completedTasks = activeTasks.filter((task) => task.status === 'complete').length;
+    this.numberOfTasks = {
+      completed: completedTasks,
+      remaining: activeTasks.length - completedTasks,
+    };
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.tpl.html b/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.tpl.html
deleted file mode 100644
index 53269a2a95..0000000000
--- a/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.tpl.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="panel panel-default panel-scrollable">
-  <div class="panel-heading">
-    <h4 class="panel-title">
-      Progress Dashboard <span ng-show="tutor">for {{project.student.name}}</span>
-    </h4>
-  </div><!--/panel-heading-->
-  <div class="panel-body">
-    <div class="col-sm-12 col-xl-6">
-      <div class="card card-default card-sm card-target-grade">
-        <div class="card-heading">
-          <h4>Target Grade</h4>
-        </div><!--/target-grade-heading-->
-        <div class="card-body">
-          <select
-            class="form-control input-lg"
-            ng-model="project.targetGrade"
-            ng-options="grade as grades.names[grade] for grade in grades.values"
-            ng-if="$index != 4"
-            ng-change="updateTargetGrade(project.targetGrade)"></select>
-        </div><!--/target-grade-body-->
-      </div><!--/target-grade-card-->
-      <div class="card card-default card-lg card-burndown">
-        <div class="card-heading">
-          <h4>Progress Burndown</h4>
-          <div class="text-muted">
-            The burndown chart shows how much work remains for you to achieve your target grade.
-          </div>
-        </div><!--/burndown-heading-->
-        <div class="card-body">
-          <progress-burndown-chart project="project" unit="project.unit"></progress-burndown-chart>
-        </div><!--/burndown-body-->
-        <div class="card-footer">
-          Aim to keep your
-          <strong style="color: #e01b5d">Complete</strong>
-          line close to or ahead of the
-          <strong class="text-muted">Target</strong>
-          line to keep on track.
-        </div><!--/burndown-footer-->
-      </div><!--/burndown-card-->
-    </div><!--/burndown-column-->
-    <div class="col-sm-12 col-xl-6">
-      <div class="card card-default card-lg card-pie-chart">
-        <div class="card-heading">
-          <h4>Task Statuses</h4>
-          <div class="text-muted">
-            Breakdown summary of each of your task statuses.
-          </div>
-        </div><!--/pie-chart-heading-->
-        <div class="card-body">
-          <student-task-status-pie-chart
-            project="project"
-            update-data="renderTaskStatusPieChart">
-          </student-task-status-pie-chart>
-        </div><!--/pie-chart-body-->
-      </div><!--/pie-chart-card-->
-    </div><!--/pie-chart-column-->
-  </div><!--/panel-body-->
-</div>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.html b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.html
new file mode 100644
index 0000000000..77fa88a440
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.html
@@ -0,0 +1,43 @@
+<h2 mat-dialog-title>Download options</h2>
+
+<mat-dialog-content class="pt-1">
+  <mat-form-field appearance="outline" class="w-full">
+    <mat-label>Grade</mat-label>
+    <mat-select class="w-full" [(ngModel)]="grade">
+      @for (value of data.gradeValues; track value) {
+        <mat-option [value]="value">{{ data.gradeLabel(value) }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-button-toggle-group
+    aria-label="Grade range"
+    class="mb-2 w-full"
+    vertical
+    [(ngModel)]="direction"
+  >
+    <mat-button-toggle class="w-full" value="upTo">Up to this grade</mat-button-toggle>
+    <mat-button-toggle class="w-full" value="andAbove">This grade and above</mat-button-toggle>
+  </mat-button-toggle-group>
+
+  <p class="mb-3 text-sm text-gray-600">{{ directionLabel }}</p>
+
+  <mat-checkbox [(ngModel)]="excludeCompleted">Exclude completed tasks</mat-checkbox>
+
+  @if (!canConfirm) {
+    <p class="mt-3 text-sm text-red-600">No tasks match this selection.</p>
+  }
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button type="button" [mat-dialog-close]="undefined">Cancel</button>
+  <button
+    color="primary"
+    mat-flat-button
+    type="button"
+    [disabled]="!canConfirm"
+    (click)="confirm()"
+  >
+    Download .ics
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.spec.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.spec.ts
new file mode 100644
index 0000000000..369cb3c3b4
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.spec.ts
@@ -0,0 +1,171 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {
+  DownloadDirection,
+  DownloadFilterDialogComponent,
+  DownloadFilterDialogData,
+} from './download-filter-dialog.component';
+
+const GRADE_LABELS: Record<number, string> = {
+  0: 'Pass',
+  1: 'Credit',
+  2: 'Distinction',
+  3: 'High Distinction',
+};
+
+function gradeLabel(grade: number): string {
+  return GRADE_LABELS[grade];
+}
+
+describe('DownloadFilterDialogComponent', () => {
+  let component: DownloadFilterDialogComponent;
+  let fixture: ComponentFixture<DownloadFilterDialogComponent>;
+  let dialogRefStub: {close: ReturnType<typeof vi.fn>};
+  let matchingTaskCountStub: ReturnType<
+    typeof vi.fn<(grade: number, direction: DownloadDirection, excludeCompleted: boolean) => number>
+  >;
+  let dialogData: DownloadFilterDialogData;
+
+  function configure(data: DownloadFilterDialogData): void {
+    dialogData = data;
+
+    TestBed.resetTestingModule();
+    dialogRefStub = {close: vi.fn()};
+
+    TestBed.configureTestingModule({
+      declarations: [DownloadFilterDialogComponent],
+      imports: [
+        FormsModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {provide: MAT_DIALOG_DATA, useValue: dialogData},
+        {provide: MatDialogRef, useValue: dialogRefStub},
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DownloadFilterDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
+
+  beforeEach(() => {
+    matchingTaskCountStub = vi.fn(() => 1);
+
+    configure({
+      gradeValues: [0, 1, 2, 3],
+      gradeLabel,
+      initialGrade: 2,
+      initialDirection: 'upTo',
+      initialExcludeCompleted: false,
+      matchingTaskCount: matchingTaskCountStub,
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the grade select, direction toggle and exclude-completed checkbox', () => {
+    expect(fixture.nativeElement.querySelector('mat-select')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('mat-button-toggle-group')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('mat-checkbox')).not.toBeNull();
+  });
+
+  it('stacks the direction choices at full width for narrow screens', () => {
+    const group: HTMLElement = fixture.nativeElement.querySelector('mat-button-toggle-group');
+    const toggles: HTMLElement[] = Array.from(group.querySelectorAll('mat-button-toggle'));
+
+    expect(group.classList.contains('mat-button-toggle-vertical')).toBe(true);
+    expect(group.getAttribute('aria-label')).toBe('Grade range');
+    expect(toggles).toHaveLength(2);
+    toggles.forEach((toggle) => expect(toggle.classList.contains('w-full')).toBe(true));
+  });
+
+  it('seeds its selection from the initial values in dialog data', () => {
+    expect(component.grade).toBe(2);
+    expect(component.direction).toBe('upTo');
+    expect(component.excludeCompleted).toBe(false);
+  });
+
+  it('labels "up to this grade" as "Everything up to <grade>"', () => {
+    component.direction = 'upTo';
+    expect(component.directionLabel).toBe('Everything up to Distinction');
+  });
+
+  it('labels "this grade and above" as "<grade> and above"', () => {
+    component.direction = 'andAbove';
+    expect(component.directionLabel).toBe('Distinction and above');
+  });
+
+  it('disables confirm and shows a message when the selection matches no tasks', () => {
+    matchingTaskCountStub.mockReturnValue(0);
+    fixture.detectChanges();
+
+    expect(component.canConfirm).toBe(false);
+    const confirmButton: HTMLButtonElement = fixture.nativeElement.querySelector(
+      'mat-dialog-actions button[color="primary"]',
+    );
+    expect(confirmButton.disabled).toBe(true);
+    expect(fixture.nativeElement.textContent).toContain('No tasks match this selection.');
+  });
+
+  it('enables confirm when the selection matches at least one task', () => {
+    matchingTaskCountStub.mockReturnValue(3);
+    fixture.detectChanges();
+
+    expect(component.canConfirm).toBe(true);
+    const confirmButton: HTMLButtonElement = fixture.nativeElement.querySelector(
+      'mat-dialog-actions button[color="primary"]',
+    );
+    expect(confirmButton.disabled).toBe(false);
+  });
+
+  it('closes the dialog with the current selection when confirmed', () => {
+    component.grade = 3;
+    component.direction = 'andAbove';
+    component.excludeCompleted = true;
+    matchingTaskCountStub.mockReturnValue(1);
+
+    component.confirm();
+
+    expect(dialogRefStub.close).toHaveBeenCalledWith({
+      grade: 3,
+      direction: 'andAbove',
+      excludeCompleted: true,
+    });
+  });
+
+  it('does not close the dialog when confirmed with a zero-match selection', () => {
+    // If canConfirm were bypassed, this would still close the dialog and hand back a
+    // selection that downloads an empty .ics.
+    matchingTaskCountStub.mockReturnValue(0);
+
+    component.confirm();
+
+    expect(dialogRefStub.close).not.toHaveBeenCalled();
+  });
+
+  it('closes the dialog with no result when cancelled', () => {
+    const cancelButton: HTMLButtonElement = fixture.nativeElement.querySelector(
+      'mat-dialog-actions button[type="button"]:not([color="primary"])',
+    );
+    cancelButton.click();
+
+    expect(dialogRefStub.close).toHaveBeenCalledWith(undefined);
+  });
+});
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.ts
new file mode 100644
index 0000000000..a470c1e394
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/download-filter-dialog/download-filter-dialog.component.ts
@@ -0,0 +1,78 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+export type DownloadDirection = 'upTo' | 'andAbove';
+
+export interface DownloadFilterSelection {
+  grade: number;
+  direction: DownloadDirection;
+  excludeCompleted: boolean;
+}
+
+export interface DownloadFilterDialogData {
+  gradeValues: number[];
+  gradeLabel: (grade: number) => string;
+  initialGrade: number;
+  initialDirection: DownloadDirection;
+  initialExcludeCompleted: boolean;
+  matchingTaskCount: (
+    grade: number,
+    direction: DownloadDirection,
+    excludeCompleted: boolean,
+  ) => number;
+}
+
+@Component({
+  selector: 'f-download-filter-dialog',
+  templateUrl: './download-filter-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class DownloadFilterDialogComponent {
+  grade: number;
+  direction: DownloadDirection;
+  excludeCompleted: boolean;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: DownloadFilterDialogData,
+    private dialogRef: MatDialogRef<DownloadFilterDialogComponent, DownloadFilterSelection>,
+  ) {
+    this.grade = data.initialGrade;
+    this.direction = data.initialDirection;
+    this.excludeCompleted = data.initialExcludeCompleted;
+  }
+
+  get selectedGradeLabel(): string {
+    return this.data.gradeLabel(this.grade);
+  }
+
+  /**
+   * "This grade and above" covers the exact-grade case at the top end (selecting HD yields
+   * HD-only), so the label must not read as a range that stops short of it.
+   */
+  get directionLabel(): string {
+    return this.direction === 'andAbove'
+      ? `${this.selectedGradeLabel} and above`
+      : `Everything up to ${this.selectedGradeLabel}`;
+  }
+
+  get matchingTaskCount(): number {
+    return this.data.matchingTaskCount(this.grade, this.direction, this.excludeCompleted);
+  }
+
+  get canConfirm(): boolean {
+    return this.matchingTaskCount > 0;
+  }
+
+  confirm(): void {
+    if (!this.canConfirm) {
+      return;
+    }
+
+    this.dialogRef.close({
+      grade: this.grade,
+      direction: this.direction,
+      excludeCompleted: this.excludeCompleted,
+    });
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.html b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.html
new file mode 100644
index 0000000000..ec08fd1618
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.html
@@ -0,0 +1,39 @@
+<mat-card appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Plan Your Tasks</mat-card-title>
+    <mat-card-subtitle class="mb-2.5">
+      <p>
+        The Task Planner shows a timeline of your tasks, their due dates, and prerequisite
+        relationships. Use it to plan when to start and submit tasks, ensuring prerequisites are
+        completed early so you have time for feedback.
+      </p>
+      @if (unit.allowFlexibleDates) {
+        <p>
+          You can set your own start and target dates. Be mindful of each task’s
+          <strong>Feedback Deadline</strong> — submissions after this date will not be checked. Aim
+          to finish at least one week before the deadline, especially if you are targeting a higher
+          grade.
+        </p>
+      }
+    </mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content class="task-planner-controls flex flex-col items-start gap-4">
+    <button mat-stroked-button [routerLink]="['/projects', project.id, 'plan']">
+      <mat-icon aria-label="Launch icon" style="width: 20px; height: 20px; font-size: 20px">
+        launch
+      </mat-icon>
+      View Task Planner
+    </button>
+    <button
+      class="download-ics-link"
+      mat-stroked-button
+      [disabled]="!hasDownloadableTasks"
+      (click)="openDownloadDialog()"
+    >
+      <mat-icon aria-label="Download icon" style="width: 20px; height: 20px; font-size: 20px">
+        download
+      </mat-icon>
+      Download .ics
+    </button>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.scss b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.spec.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.spec.ts
new file mode 100644
index 0000000000..a8f31e0aee
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.spec.ts
@@ -0,0 +1,462 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialog} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSelectModule} from '@angular/material/select';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {of} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {TaskStatusEnum} from 'src/app/api/models/task-status';
+import {Unit} from 'src/app/api/models/unit';
+import {buildIcsCalendar} from 'src/app/api/services/ics-calendar-builder';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {DownloadFilterSelection} from './download-filter-dialog/download-filter-dialog.component';
+import {TaskPlannerCardComponent} from './task-planner-card.component';
+
+function buildProjectWithTasks(
+  tasks: {dueDate?: Date; targetGrade?: number; status?: TaskStatusEnum}[],
+  projectTargetGrade: number | undefined = 0,
+): Project {
+  const unit = new Unit();
+  unit.id = 7;
+  unit.code = 'COS10001';
+  unit.allowFlexibleDates = false;
+
+  const project = new Project(unit);
+  project.targetGrade = projectTargetGrade;
+
+  tasks.forEach(({dueDate, targetGrade, status}, index) => {
+    const definition = new TaskDefinition(unit);
+    definition.id = index + 1;
+    definition.abbreviation = `${index + 1}.1P`;
+    definition.name = `Task ${index + 1}`;
+    definition.targetGrade = targetGrade ?? 0;
+    definition.targetDate = dueDate;
+
+    const task = new Task(unit);
+    task.id = index + 1;
+    task.definition = definition;
+    task.dueDate = dueDate;
+    task.project = project;
+    if (status) {
+      task.status = status;
+    }
+
+    project.taskCache.add(task);
+  });
+
+  return project;
+}
+
+describe('TaskPlannerCardComponent', () => {
+  let component: TaskPlannerCardComponent;
+  let fixture: ComponentFixture<TaskPlannerCardComponent>;
+  let fileDownloaderStub: {
+    downloadBlobToFile: ReturnType<typeof vi.fn>;
+    releaseBlob: ReturnType<typeof vi.fn>;
+  };
+  let matDialogStub: {open: ReturnType<typeof vi.fn>};
+
+  beforeEach(async () => {
+    fileDownloaderStub = {
+      downloadBlobToFile: vi.fn(),
+      releaseBlob: vi.fn(),
+    };
+    matDialogStub = {open: vi.fn()};
+
+    await TestBed.configureTestingModule({
+      declarations: [TaskPlannerCardComponent],
+      imports: [
+        MatButtonModule,
+        MatCheckboxModule,
+        MatIconModule,
+        MatSelectModule,
+        FormsModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {provide: FileDownloaderService, useValue: fileDownloaderStub},
+        {provide: MatDialog, useValue: matDialogStub},
+        GradeService,
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TaskPlannerCardComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('disables the download button when there are no active tasks yet', () => {
+    // Simulates the dashboard's progressive resolution (project.resolver.ts), where
+    // project.tasks can still be empty on first render.
+    component.project = buildProjectWithTasks([]);
+    fixture.detectChanges();
+
+    const downloadButton: HTMLButtonElement =
+      fixture.nativeElement.querySelector('.download-ics-link');
+
+    expect(downloadButton).not.toBeNull();
+    expect(downloadButton.disabled).toBe(true);
+  });
+
+  it('enables the download button once tasks at the selected grade are present', () => {
+    component.project = buildProjectWithTasks([{dueDate: new Date(2026, 8, 15, 23, 59, 59, 999)}]);
+    fixture.detectChanges();
+
+    const downloadButton: HTMLButtonElement =
+      fixture.nativeElement.querySelector('.download-ics-link');
+
+    expect(downloadButton.disabled).toBe(false);
+  });
+
+  it('stacks the planner controls with space between them on phones', () => {
+    component.project = buildProjectWithTasks([]);
+    fixture.detectChanges();
+
+    const controls: HTMLElement = fixture.nativeElement.querySelector('.task-planner-controls');
+    const plannerButton = controls.querySelector('button');
+    const downloadButton = controls.querySelector('.download-ics-link');
+
+    expect(controls.classList.contains('flex-col')).toBe(true);
+    expect(controls.classList.contains('gap-4')).toBe(true);
+    expect(plannerButton?.nextElementSibling).toBe(downloadButton);
+    // The grade field and the exclude-completed choice now live in the download dialog.
+    expect(controls.querySelector('mat-form-field')).toBeNull();
+    expect(controls.querySelector('mat-checkbox')).toBeNull();
+  });
+
+  it('does not call the file downloader when there are no active tasks, guarding against an empty file', () => {
+    component.project = buildProjectWithTasks([]);
+    fixture.detectChanges();
+
+    component.downloadIcs();
+
+    expect(fileDownloaderStub.downloadBlobToFile).not.toHaveBeenCalled();
+    expect(fileDownloaderStub.releaseBlob).not.toHaveBeenCalled();
+  });
+
+  it('downloads a blob named after the unit code and the selected grade abbreviation', () => {
+    component.project = buildProjectWithTasks([{dueDate: new Date(2026, 8, 15, 23, 59, 59, 999)}]);
+    fixture.detectChanges();
+    // Pinned false so this test's filename expectation is decoupled from the excludeCompleted
+    // default (true) - this test is about the grade/unit code portion of the filename only.
+    component.excludeCompleted = false;
+
+    const createObjectURLSpy = vi
+      .spyOn(window.URL, 'createObjectURL')
+      .mockReturnValue('blob:mock-url');
+
+    expect(component.hasDownloadableTasks).toBe(true);
+    component.downloadIcs();
+
+    expect(createObjectURLSpy).toHaveBeenCalledOnce();
+    const [blobArg] = createObjectURLSpy.mock.calls[0];
+    expect((blobArg as Blob).type).toBe('text/calendar;charset=utf-8');
+    // Default project.targetGrade is 0 (Pass, abbreviation 'P').
+    expect(fileDownloaderStub.downloadBlobToFile).toHaveBeenCalledWith(
+      'blob:mock-url',
+      'COS10001-tasks-P.ics',
+    );
+    expect(fileDownloaderStub.releaseBlob).toHaveBeenCalledWith('blob:mock-url');
+  });
+
+  it('defaults selectedDownloadGrade to project.targetGrade', () => {
+    component.project = buildProjectWithTasks([], 2);
+    fixture.detectChanges();
+
+    expect(component.selectedDownloadGrade).toBe(2);
+  });
+
+  it('falls back to the highest grade value when project.targetGrade is not set', () => {
+    const project = buildProjectWithTasks([]);
+    project.targetGrade = undefined;
+    component.project = project;
+    fixture.detectChanges();
+
+    // GradeService.gradeValues is [0, 1, 2, 3], the highest is 3 (High Distinction).
+    expect(component.selectedDownloadGrade).toBe(3);
+  });
+
+  it('does not persist the selection: does not write project.targetGrade', () => {
+    component.project = buildProjectWithTasks([], 1);
+    fixture.detectChanges();
+
+    component.selectedDownloadGrade = 3;
+
+    expect(component.project.targetGrade).toBe(1);
+  });
+
+  it('only includes tasks at or below the selected grade in the generated calendar', () => {
+    // Two tasks: one at grade 0 (Pass), one at grade 2 (Distinction). If the grade filter
+    // were ignored, both event UIDs would be present in the generated calendar.
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 0},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), targetGrade: 2},
+    ]);
+    fixture.detectChanges();
+    component.selectedDownloadGrade = 0;
+
+    const selectedTasks = component['tasksForSelectedGrade']();
+    const ics = buildIcsCalendar(selectedTasks, new Date('2026-08-24T00:00:00Z'));
+    expect(selectedTasks.map((task) => task.definition.id)).toEqual([1]);
+    expect(ics).toContain('UID:E-1');
+    expect(ics).not.toContain('UID:E-2');
+  });
+
+  it('hasDownloadableTasks reflects whether any tasks are loaded, regardless of the filter selection', () => {
+    // The filter selection now lives in the dialog, opened after this gate. A selection that
+    // would yield zero results (e.g. grade 0 with a grade-2 task) is guarded inside the dialog
+    // instead, so this gate must stay true as long as the project has any tasks at all.
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 2},
+    ]);
+    fixture.detectChanges();
+
+    component.selectedDownloadGrade = 0;
+    expect(component.hasDownloadableTasks).toBe(true);
+
+    component.excludeCompleted = true;
+    expect(component.hasDownloadableTasks).toBe(true);
+  });
+
+  it('includes the selected grade abbreviation in the filename, not the default', () => {
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 0},
+    ]);
+    fixture.detectChanges();
+    component.selectedDownloadGrade = 1; // Credit, abbreviation 'C'.
+    // Pinned false so this test's filename expectation is decoupled from the excludeCompleted
+    // default (true) - this test is about the grade override portion of the filename only.
+    component.excludeCompleted = false;
+
+    vi.spyOn(window.URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+
+    component.downloadIcs();
+
+    expect(fileDownloaderStub.downloadBlobToFile).toHaveBeenCalledWith(
+      'blob:mock-url',
+      'COS10001-tasks-C.ics',
+    );
+  });
+
+  it('excludes tasks in a final state from the generated calendar when excludeCompleted is on', () => {
+    // Task 1 is complete (a final status), Task 2 is still in progress. If the completed
+    // filter were ignored, both event UIDs would be present in the generated calendar.
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), status: 'complete'},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), status: 'working_on_it'},
+    ]);
+    fixture.detectChanges();
+    component.excludeCompleted = true;
+
+    const ics = buildIcsCalendar(component['tasksForDownload'](), new Date('2026-08-24T00:00:00Z'));
+    expect(ics).not.toContain('UID:E-1');
+    expect(ics).toContain('UID:E-2');
+  });
+
+  it('includes both completed and outstanding tasks when excludeCompleted is unticked', () => {
+    // CAL-F09 flipped the default to true (see the excludeCompleted field). This test now
+    // covers the unticked path explicitly rather than relying on it being the default.
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), status: 'complete'},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), status: 'working_on_it'},
+    ]);
+    fixture.detectChanges();
+    component.excludeCompleted = false;
+
+    const ics = buildIcsCalendar(component['tasksForDownload'](), new Date('2026-08-24T00:00:00Z'));
+    expect(ics).toContain('UID:E-1');
+    expect(ics).toContain('UID:E-2');
+  });
+
+  it('defaults excludeCompleted to true, so an untouched download excludes completed tasks and carries the -outstanding suffix', async () => {
+    // Discriminating for the CAL-F09 default flip: if excludeCompleted silently reverted to
+    // false, the boolean check below would fail, the completed task's UID would leak into the
+    // ICS output, and the filename would lose its -outstanding suffix.
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), status: 'complete'},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), status: 'working_on_it'},
+    ]);
+    fixture.detectChanges();
+
+    expect(component.excludeCompleted).toBe(true);
+
+    const ics = buildIcsCalendar(component['tasksForDownload'](), new Date('2026-08-24T00:00:00Z'));
+    expect(ics).not.toContain('UID:E-1');
+    expect(ics).toContain('UID:E-2');
+
+    const createObjectURLSpy = vi
+      .spyOn(window.URL, 'createObjectURL')
+      .mockReturnValue('blob:mock-url');
+    component.downloadIcs();
+    expect(fileDownloaderStub.downloadBlobToFile).toHaveBeenCalledWith(
+      'blob:mock-url',
+      'COS10001-tasks-P-outstanding.ics',
+    );
+
+    // Read the file the download actually built, so a downloadIcs() that skipped the
+    // completed filter would fail here even though the helper above is still correct.
+    const [blobArg] = createObjectURLSpy.mock.calls[0];
+    const downloaded = await (blobArg as Blob).text();
+    expect(downloaded).not.toContain('UID:E-1');
+    expect(downloaded).toContain('UID:E-2');
+  });
+
+  it('composes the completed filter with the grade filter', () => {
+    // Task 1: grade 0, complete. Task 2: grade 2, outstanding. Task 3: grade 0, outstanding.
+    // With selectedDownloadGrade 0 and excludeCompleted true, only Task 3 should remain.
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 0, status: 'complete'},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), targetGrade: 2, status: 'working_on_it'},
+      {dueDate: new Date(2026, 8, 22, 23, 59, 59, 999), targetGrade: 0, status: 'working_on_it'},
+    ]);
+    fixture.detectChanges();
+    component.selectedDownloadGrade = 0;
+    component.excludeCompleted = true;
+
+    const tasks = component['tasksForDownload']();
+    expect(tasks.map((task) => task.definition.id)).toEqual([3]);
+  });
+
+  it('this grade and above with HD selected yields only targetGrade 3 tasks', () => {
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 0},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), targetGrade: 2},
+      {dueDate: new Date(2026, 8, 22, 23, 59, 59, 999), targetGrade: 3},
+    ]);
+    fixture.detectChanges();
+    component.selectedDownloadGrade = 3;
+    component.downloadDirection = 'andAbove';
+
+    const tasks = component['tasksForSelectedGrade']();
+    expect(tasks.map((task) => task.definition.id)).toEqual([3]);
+  });
+
+  it('this grade and above with Distinction selected yields targetGrade 2 and 3 only, excluding a Pass task', () => {
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 0},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), targetGrade: 2},
+      {dueDate: new Date(2026, 8, 22, 23, 59, 59, 999), targetGrade: 3},
+    ]);
+    fixture.detectChanges();
+    component.selectedDownloadGrade = 2;
+    component.downloadDirection = 'andAbove';
+
+    const tasks = component['tasksForSelectedGrade']();
+    expect(tasks.map((task) => task.definition.id)).toEqual([2, 3]);
+    expect(tasks.map((task) => task.definition.id)).not.toContain(1);
+  });
+
+  it('composes this grade and above with exclude-completed', () => {
+    // Task 1: grade 0, complete. Task 2: grade 2, outstanding. Task 3: grade 3, complete.
+    // Task 4: grade 3, outstanding. With direction andAbove, selectedDownloadGrade 2 and
+    // excludeCompleted true, only Task 2 and Task 4 should remain.
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 0, status: 'complete'},
+      {dueDate: new Date(2026, 8, 20, 23, 59, 59, 999), targetGrade: 2, status: 'working_on_it'},
+      {dueDate: new Date(2026, 8, 22, 23, 59, 59, 999), targetGrade: 3, status: 'complete'},
+      {dueDate: new Date(2026, 8, 23, 23, 59, 59, 999), targetGrade: 3, status: 'working_on_it'},
+    ]);
+    fixture.detectChanges();
+    component.selectedDownloadGrade = 2;
+    component.downloadDirection = 'andAbove';
+    component.excludeCompleted = true;
+
+    const tasks = component['tasksForDownload']();
+    expect(tasks.map((task) => task.definition.id)).toEqual([2, 4]);
+  });
+
+  it('inserts -and-above into the filename for the and-above direction, leaving up-to filenames unchanged', () => {
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 2},
+    ]);
+    fixture.detectChanges();
+    component.selectedDownloadGrade = 2;
+    // Pinned false so the filenames below isolate the direction suffix from the
+    // excludeCompleted default (true), which appends its own suffix.
+    component.excludeCompleted = false;
+
+    vi.spyOn(window.URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+
+    component.downloadDirection = 'upTo';
+    component.downloadIcs();
+    expect(fileDownloaderStub.downloadBlobToFile).toHaveBeenCalledWith(
+      'blob:mock-url',
+      'COS10001-tasks-D.ics',
+    );
+
+    fileDownloaderStub.downloadBlobToFile.mockClear();
+    component.downloadDirection = 'andAbove';
+    component.downloadIcs();
+    expect(fileDownloaderStub.downloadBlobToFile).toHaveBeenCalledWith(
+      'blob:mock-url',
+      'COS10001-tasks-D-and-above.ics',
+    );
+  });
+
+  it('applies the values returned by the download dialog and downloads accordingly', () => {
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), targetGrade: 3},
+    ]);
+    fixture.detectChanges();
+
+    const selection: DownloadFilterSelection = {
+      grade: 3,
+      direction: 'andAbove',
+      excludeCompleted: false,
+    };
+    matDialogStub.open.mockReturnValue({afterClosed: () => of(selection)});
+    vi.spyOn(window.URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+
+    component.openDownloadDialog();
+
+    expect(matDialogStub.open).toHaveBeenCalledOnce();
+    expect(component.selectedDownloadGrade).toBe(3);
+    expect(component.downloadDirection).toBe('andAbove');
+    expect(fileDownloaderStub.downloadBlobToFile).toHaveBeenCalledWith(
+      'blob:mock-url',
+      'COS10001-tasks-HD-and-above.ics',
+    );
+  });
+
+  it('does not download when the dialog is cancelled', () => {
+    // If afterClosed's result were ignored (or a cancel treated as a selection), this would
+    // still call the file downloader.
+    component.project = buildProjectWithTasks([{dueDate: new Date(2026, 8, 15, 23, 59, 59, 999)}]);
+    fixture.detectChanges();
+
+    matDialogStub.open.mockReturnValue({afterClosed: () => of(undefined)});
+
+    component.openDownloadDialog();
+
+    expect(fileDownloaderStub.downloadBlobToFile).not.toHaveBeenCalled();
+  });
+
+  it('appends -outstanding to the filename when excludeCompleted is on', () => {
+    component.project = buildProjectWithTasks([
+      {dueDate: new Date(2026, 8, 15, 23, 59, 59, 999), status: 'working_on_it'},
+    ]);
+    fixture.detectChanges();
+    component.excludeCompleted = true;
+
+    vi.spyOn(window.URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+
+    component.downloadIcs();
+
+    expect(fileDownloaderStub.downloadBlobToFile).toHaveBeenCalledWith(
+      'blob:mock-url',
+      'COS10001-tasks-P-outstanding.ics',
+    );
+  });
+});
diff --git a/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.ts b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.ts
new file mode 100644
index 0000000000..7e607d320e
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component.ts
@@ -0,0 +1,148 @@
+import {ChangeDetectionStrategy, Component, Inject, Input, OnInit} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+import {buildIcsCalendar} from 'src/app/api/services/ics-calendar-builder';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {
+  DownloadDirection,
+  DownloadFilterDialogComponent,
+  DownloadFilterSelection,
+} from './download-filter-dialog/download-filter-dialog.component';
+
+@Component({
+  selector: 'f-task-planner-card',
+  templateUrl: './task-planner-card.component.html',
+  styleUrl: './task-planner-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskPlannerCardComponent implements OnInit {
+  @Input() project: Project;
+  public get unit() {
+    return this.project?.unit;
+  }
+
+  /**
+   * Local to the download only, not persisted. Deliberately never written back through
+   * projectService.update or to project.targetGrade, the Target Grade card on this same
+   * dashboard is intentionally read-only, this selector must not become a second way to
+   * change the saved grade.
+   */
+  public selectedDownloadGrade: number;
+
+  /**
+   * Local to the download only, not persisted, same as selectedDownloadGrade above. Defaults to
+   * "up to this grade" so an existing user's download is unchanged until they open the dialog
+   * and choose otherwise.
+   */
+  public downloadDirection: DownloadDirection = 'upTo';
+
+  /**
+   * Local to the download only, not persisted, same as selectedDownloadGrade above. Defaults to
+   * true: someone downloading a calendar of due dates almost always wants the work still ahead
+   * of them, not tasks they already finished. The checkbox stays available to see the full set.
+   */
+  public excludeCompleted = true;
+
+  constructor(
+    @Inject(FileDownloaderService) private fileDownloader: FileDownloaderService,
+    private gradeService: GradeService,
+    private dialog: MatDialog,
+  ) {}
+
+  ngOnInit(): void {
+    this.selectedDownloadGrade = this.project?.targetGrade ?? Math.max(...this.gradeValues);
+  }
+
+  public get gradeValues(): number[] {
+    return this.gradeService.gradeValuesFor(this.unit);
+  }
+
+  public gradeLabel(grade: number): string {
+    return this.gradeService.gradeLabel(grade, this.unit);
+  }
+
+  /**
+   * The dashboard route resolves progressively (project.resolver.ts), so project.tasks can
+   * still be empty on first render. Gates the button so it cannot open the dialog before tasks
+   * have loaded. Deliberately does not consider the filter selection: that selection now lives
+   * in the dialog, and a zero-result selection is guarded there instead, via canConfirm.
+   */
+  public get hasDownloadableTasks(): boolean {
+    return !!this.project && this.project.tasks.length > 0;
+  }
+
+  private tasksForSelectedGrade(
+    grade: number = this.selectedDownloadGrade,
+    direction: DownloadDirection = this.downloadDirection,
+  ): Task[] {
+    return this.project.tasks.filter((task) =>
+      direction === 'andAbove'
+        ? task.definition.targetGrade >= grade
+        : task.definition.targetGrade <= grade,
+    );
+  }
+
+  private tasksForDownload(
+    grade: number = this.selectedDownloadGrade,
+    direction: DownloadDirection = this.downloadDirection,
+    excludeCompleted: boolean = this.excludeCompleted,
+  ): Task[] {
+    const tasks = this.tasksForSelectedGrade(grade, direction);
+    return excludeCompleted ? tasks.filter((task) => !task.inFinalState()) : tasks;
+  }
+
+  public openDownloadDialog(): void {
+    if (!this.hasDownloadableTasks) {
+      return;
+    }
+
+    const dialogRef = this.dialog.open(DownloadFilterDialogComponent, {
+      data: {
+        gradeValues: this.gradeValues,
+        gradeLabel: (grade: number) => this.gradeLabel(grade),
+        initialGrade: this.selectedDownloadGrade,
+        initialDirection: this.downloadDirection,
+        initialExcludeCompleted: this.excludeCompleted,
+        matchingTaskCount: (
+          grade: number,
+          direction: DownloadDirection,
+          excludeCompleted: boolean,
+        ) => this.tasksForDownload(grade, direction, excludeCompleted).length,
+      },
+      width: 'calc(100vw - 32px)',
+      maxWidth: '480px',
+      autoFocus: false,
+    });
+
+    dialogRef.afterClosed().subscribe((selection?: DownloadFilterSelection) => {
+      if (!selection) {
+        return;
+      }
+
+      this.selectedDownloadGrade = selection.grade;
+      this.downloadDirection = selection.direction;
+      this.excludeCompleted = selection.excludeCompleted;
+      this.downloadIcs();
+    });
+  }
+
+  public downloadIcs(): void {
+    const tasks = this.tasksForDownload();
+    if (tasks.length === 0) {
+      return;
+    }
+
+    const ics = buildIcsCalendar(tasks);
+    const blob = new Blob([ics], {type: 'text/calendar;charset=utf-8'});
+    const url = window.URL.createObjectURL(blob);
+    const directionSuffix = this.downloadDirection === 'andAbove' ? '-and-above' : '';
+    const completedSuffix = this.excludeCompleted ? '-outstanding' : '';
+    const filename = `${this.project.unit.code}-tasks-${this.unit.gradeAbbreviation(this.selectedDownloadGrade)}${directionSuffix}${completedSuffix}.ics`;
+
+    this.fileDownloader.downloadBlobToFile(url, filename);
+    this.fileDownloader.releaseBlob(url);
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.html b/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.html
index 5a0d017e41..6ec126d3a2 100644
--- a/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.html
+++ b/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.html
@@ -1,12 +1,21 @@
-<div class="task-data" (click)="switchToPortfolioCreation()">
-  <h4 style="margin-bottom: 0" class="list-group-item-heading">Create Portfolio</h4>
-  <p style="margin-bottom: 0" class="list-group-item-text">
-    <i class="fa fa-user" aria-hidden="true"></i> Create and submit your portfolio
-  </p>
-</div>
-<!--/task-data-->
-<div class="task-badges">
-  <status-icon [status]="status()"></status-icon>
-</div>
-<!--/badges-->
-<!--/task-->
+<a
+  class="mr-2 flex w-full items-center text-inherit no-underline"
+  [routerLink]="['/projects', project.id, 'portfolio']"
+>
+  <div class="flex min-w-0 flex-1 items-center gap-3">
+    <div class="flex min-w-0 items-center gap-3 truncate text-ellipsis">
+      <div class="flex flex-col justify-start truncate text-ellipsis">
+        <div class="truncate text-ellipsis">Create Portfolio</div>
+
+        <div class="flex min-w-0 items-center gap-0.5">
+          <mat-icon class="size-6 flex-none scale-75 text-gray-600">person</mat-icon>
+          <div class="min-w-0 truncate text-[14px] text-gray-500">
+            Create and submit your portfolio
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <status-icon class="ml-[1.5ex] flex-none" [status]="status()"></status-icon>
+</a>
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.scss b/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.scss
index 7d8d6c541d..669be340c5 100644
--- a/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.scss
+++ b/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.scss
@@ -1,4 +1,4 @@
 :host {
   width: 100%;
-  display: flex;
+  display: block;
 }
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.ts b/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.ts
index ba97c9b39b..a6796a9cf7 100644
--- a/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.ts
+++ b/src/app/projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component.ts
@@ -1,27 +1,22 @@
-import { Component, Input, Inject } from '@angular/core';
-import { UIRouter } from '@uirouter/angular';
-import { Project, Task } from 'src/app/api/models/doubtfire-model';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Project, Task, TaskStatusEnum} from 'src/app/api/models/doubtfire-model';
 
 @Component({
   selector: 'create-portfolio-task-list-item',
   templateUrl: 'create-portfolio-task-list-item.component.html',
   styleUrls: ['create-portfolio-task-list-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class CreatePortfolioTaskListItemComponent {
   @Input() setSelectedTask: Task;
   @Input() project: Project;
 
-  constructor(@Inject(UIRouter) private router: UIRouter) {}
-
-  public status(): string {
+  public status(): TaskStatusEnum {
     return this.project.portfolioTaskStatus();
   }
 
   public statusClass(): string {
     return this.project.portfolioTaskStatusClass();
   }
-
-  public switchToPortfolioCreation() {
-    this.router.stateService.go('projects/portfolio');
-  }
 }
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.coffee b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.coffee
deleted file mode 100644
index a504f3f1c6..0000000000
--- a/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.coffee
+++ /dev/null
@@ -1,62 +0,0 @@
-angular.module('doubtfire.projects.states.dashboard.directives.student-task-list', [])
-#
-# View a list of tasks
-#
-.directive('studentTaskList', ->
-  restrict: 'E'
-  templateUrl: 'projects/states/dashboard/directives/student-task-list/student-task-list.tpl.html'
-  scope:
-    project: '='
-    # Function to invoke to refresh tasks
-    refreshTasks: '=?'
-    # Special taskData object (wraps the selectedTask)
-    taskData: '='
-  controller: ($scope, $timeout, $filter, gradeService) ->
-    # Check taskSource exists
-    unless $scope.taskData?
-      throw Error "Invalid taskData provided. Must wrap the selectedTask and selectedTaskAbbr"
-    # Set up initial filtered tasks
-    $scope.filteredTasks = []
-    # Set up filters
-    $scope.filters = {
-      taskName: null
-    }
-    # Sets new filteredTasks variable
-    applyFilters = ->
-      filteredTasks = $filter('tasksWithName')($scope.project.activeTasks(), $scope.filters.taskName)
-      $scope.filteredTasks = filteredTasks
-      $scope.showCreatePortfolio = !$scope.filters.taskName? || 'create portfolio'.indexOf($scope.filters.taskName.toLowerCase()) >= 0
-    # Apply filters first-time
-    applyFilters()
-    # Sort the tasks according to priority.
-    $scope.project.calcTopTasks()
-    # When refreshing tasks, we are just reloading the active tasks
-    $scope.refreshTasks = applyFilters
-    # Expose grade service names
-    $scope.gradeNames = gradeService.grades
-    # On task name change, reapply filters
-    $scope.taskNameChanged = applyFilters
-    # UI call to change currently selected task
-    $scope.setSelectedTask = (task) ->
-      # Clicking on already selected task will disable that selection
-      task = null if $scope.isSelectedTask(task)
-      $scope.taskData.selectedTask = task
-      $scope.taskData.onSelectedTaskChange?(task)
-      scrollToTaskInList(task) if task?
-    scrollToTaskInList = (task) ->
-      taskEl = document.querySelector("student-task-list-#{task.taskKeyToIdString()}")
-      return unless taskEl?
-      funcName = if taskEl.scrollIntoViewIfNeeded? then 'scrollIntoViewIfNeeded' else if taskEl.scrollIntoView? then 'scrollIntoView'
-      return unless funcName?
-      taskEl[funcName]({behavior: 'smooth'})
-    $timeout ->
-      scrollToTaskInList($scope.taskData.selectedTask) if $scope.taskData.selectedTask?
-    $scope.isSelectedTask = (task) ->
-      # Compare by definition
-      task.definition.id == $scope.taskData?.selectedTask?.definition.id
-    $scope.nearEnd = () ->
-      lateDate = new Date($scope.project.unit.endDate) # Get end date as date
-      lateDate.setDate(lateDate.getDate() - 21) # subtract 21 days
-      new Date() > lateDate
-
-)
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.css b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.css
new file mode 100644
index 0000000000..5d4e87f30f
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.html b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.html
new file mode 100644
index 0000000000..46d732c34a
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.html
@@ -0,0 +1,2 @@
+<p>student-task-list works!</p>
+,
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.ts b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.ts
new file mode 100644
index 0000000000..a4bd5296cd
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.ts
@@ -0,0 +1,11 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'f-student-task-list',
+  standalone: true,
+  imports: [],
+  templateUrl: './student-task-list.component.html',
+  styleUrl: './student-task-list.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+export class StudentTaskListComponent {}
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.tpl.html b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.tpl.html
index 93573d01c9..5e666e5409 100644
--- a/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.tpl.html
+++ b/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.tpl.html
@@ -28,8 +28,8 @@
         <h4 style="margin-bottom: 0" class="list-group-item-heading">{{task.definition.name}}</h4>
         <p style="margin-bottom: 0" class="list-group-item-text">
           <i class="fa fa-users" aria-hidden="true" ng-show="task.isGroupTask()"></i
-          ><i class="fa fa-user" aria-hidden="true" ng-hide="task.isGroupTask()"></i> {{task.definition.abbreviation}} -
-          {{gradeNames[task.definition.targetGrade]}} Task
+          ><i class="fa fa-user" aria-hidden="true" ng-hide="task.isGroupTask()"></i>
+          {{task.definition.abbreviation}} - {{gradeNames[task.definition.targetGrade]}} Task
           <span class="due-time" ng-if="task.isBeforeStartDate() && !task.inSubmittedState()"
             ><i class="fa fa-hourglass-start"></i> {{task.timeToStart()}}</span
           ><span class="due-time" ng-if="!task.isBeforeStartDate() && !task.inSubmittedState()"
@@ -44,16 +44,24 @@ <h4 style="margin-bottom: 0" class="list-group-item-heading">{{task.definition.n
           <span class="task-superscript-badge new-comments-badge" ng-if="task.numNewComments > 0">
             {{task.numNewComments}}
           </span>
-          <span class="task-superscript-badge plagiarism-detected-badge" ng-if="task.similaritiesDetected">
+          <span
+            class="task-superscript-badge plagiarism-detected-badge"
+            ng-if="task.similaritiesDetected"
+          >
             <i class="fa fa-eye"></i>
           </span>
         </div>
         <div class="task-subscript-badges">
-          <span class="task-subscript-badge grade-badge" ng-if="task.hasGrade()"> {{task.gradeDesc()}} </span>
+          <span class="task-subscript-badge grade-badge" ng-if="task.hasGrade()">
+            {{task.gradeDesc()}}
+          </span>
           <span class="task-subscript-badge quality-badge" ng-if="task.hasQualityPoints()">
             <sup>{{task.qualityQts}}</sup>&frasl;<sub>{{task.definition.maxQualityPts}}</sub>
           </span>
-          <span class="task-subscript-badge soon-badge" ng-if="task.isDueSoon() && !task.inFinalState()">
+          <span
+            class="task-subscript-badge soon-badge"
+            ng-if="task.isDueSoon() && !task.inFinalState()"
+          >
             <i class="fa fa-clock-o"></i>
           </span>
           <span
@@ -62,7 +70,10 @@ <h4 style="margin-bottom: 0" class="list-group-item-heading">{{task.definition.n
           >
             <i class="fa fa-clock-o"></i>
           </span>
-          <span class="task-subscript-badge due-badge" ng-if="task.isPastDeadline() && !task.inFinalState()">
+          <span
+            class="task-subscript-badge due-badge"
+            ng-if="task.isPastDeadline() && !task.inFinalState()"
+          >
             <i class="fa fa-clock-o"></i><strong>!</strong>
           </span>
         </div>
@@ -77,7 +88,10 @@ <h4 style="margin-bottom: 0" class="list-group-item-heading">{{task.definition.n
       <create-portfolio-task-list-item [project]="project" [set-selected-task]="setSelectedTask">
       </create-portfolio-task-list-item>
     </li>
-    <li ng-show="filteredTasks.length == 0 && !showCreatePortfolio" class="list-group-item text-center text-muted">
+    <li
+      ng-show="filteredTasks.length == 0 && !showCreatePortfolio"
+      class="list-group-item text-muted text-center"
+    >
       No tasks to display.
     </li>
   </ul>
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.html b/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.html
index 538bfa1c08..b206215363 100644
--- a/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.html
+++ b/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.html
@@ -4,15 +4,15 @@ <h4 class="list-group-item-heading">
   </h4>
   <p class="list-group-item-text">
     @if (task.isGroupTask()) {
-      <i class="fa fa-users" matTooltip="Group Task" aria-hidden="true"></i>
+      <mat-icon aria-hidden="true" inline matTooltip="Group Task">groups</mat-icon>
     }
     @if (!task.isGroupTask()) {
-      <i class="fa fa-user" matTooltip="Individual Task" aria-hidden="true"></i>
+      <mat-icon aria-hidden="true" inline matTooltip="Individual Task">person</mat-icon>
     }
     {{ task.definition.abbreviation }} - {{ gradeNames[task.definition.targetGrade] }} Task
     @if (task.isBeforeStartDate() && !task.inSubmittedState()) {
       <span class="due-time" matTooltip="Start task in {{ task.timeToStart() }}">
-        <i class="fa fa-hourglass-start"></i> {{ task.timeToStart() }}
+        <mat-icon inline>hourglass_empty</mat-icon> {{ task.timeToStart() }}
       </span>
     }
     @if (!task.isBeforeStartDate() && !task.inSubmittedState()) {
@@ -22,7 +22,7 @@ <h4 class="list-group-item-heading">
           task.isOverdue() ? 'Task Overdue!' : 'Complete task in ' + task.timeToDue()
         }}"
       >
-        <i class="fa fa-hourglass-end"></i> {{ task.timeToDue() }}
+        <mat-icon inline>hourglass_bottom</mat-icon> {{ task.timeToDue() }}
       </span>
     }
   </p>
@@ -34,19 +34,19 @@ <h4 class="list-group-item-heading">
   <div class="task-superscript-badges">
     <span
       class="task-superscript-badge new-comments-badge"
-      [hidden]="task.numNewComments <= 0"
       matTooltip="{{ task.numNewComments }} new {{
         task.numNewComments > 1 ? 'comments' : 'comment'
       }}"
+      [hidden]="task.numNewComments <= 0"
     >
       {{ task.numNewComments }}
     </span>
     <span
       class="task-superscript-badge plagiarism-detected-badge"
-      [hidden]="!task.similaritiesDetected"
       matTooltip="Plagiarism detected"
+      [hidden]="!task.similaritiesDetected"
     >
-      <i class="fa fa-eye"></i>
+      <mat-icon inline>visibility</mat-icon>
     </span>
   </div>
 
@@ -62,7 +62,7 @@ <h4 class="list-group-item-heading">
       class="task-subscript-badge soon-badge"
       [hidden]="!(task.isDueSoon() && !task.inFinalState())"
     >
-      <i class="fa fa-clock-o"></i>
+      <mat-icon inline>schedule</mat-icon>
     </span>
     <span
       class="task-subscript-badge due-badge"
@@ -70,13 +70,13 @@ <h4 class="list-group-item-heading">
         !(task.betweenDueDateAndDeadlineDate() && !task.isPastDeadline() && !task.inFinalState())
       "
     >
-      <i class="fa fa-clock-o"></i>
+      <mat-icon inline>schedule</mat-icon>
     </span>
     <span
       class="task-subscript-badge due-badge"
       [hidden]="!(task.isPastDeadline() && !task.inFinalState())"
     >
-      <i class="fa fa-clock-o"></i><strong>!</strong>
+      <mat-icon inline>schedule</mat-icon><strong>!</strong>
     </span>
   </div>
 </div>
diff --git a/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.ts b/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.ts
index b6c8d1c30f..2f2351cc40 100644
--- a/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.ts
+++ b/src/app/projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
 import {Task} from 'src/app/api/models/doubtfire-model';
 import {GradeService} from 'src/app/common/services/grade.service';
 
@@ -6,13 +6,15 @@ import {GradeService} from 'src/app/common/services/grade.service';
   selector: 'task-list-item',
   templateUrl: 'task-list-item.component.html',
   styleUrls: ['task-list-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskListItemComponent implements OnInit {
   @Input() task: Task;
-  @Input() setSelectedTask: any;
-  @Input() isSelectedTask: any;
+  @Input() setSelectedTask: (task: Task) => void;
+  @Input() isSelectedTask: (task: Task) => boolean;
 
-  public gradeNames: {};
+  public gradeNames: GradeService['grades'];
 
   constructor(private gs: GradeService) {}
 
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.html
new file mode 100644
index 0000000000..781e0aa244
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.html
@@ -0,0 +1,11 @@
+<div class="h-[calc(100%-50px)] p-2.5">
+  <div class="flex items-center">
+    <mat-icon class="mr-1">comment</mat-icon>
+    <h1 class="mat-headline m-0">Discussion Prompts for {{ project?.student?.name }}</h1>
+  </div>
+
+  <f-discussion-prompts
+    [project]="project"
+    [taskDefinition]="taskDefinition"
+  ></f-discussion-prompts>
+</div>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.ts
new file mode 100644
index 0000000000..864f64226f
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/discussion-prompts-view/discussion-prompts-view.component.ts
@@ -0,0 +1,13 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'f-discussion-prompts-view',
+  templateUrl: './discussion-prompts-view.component.html',
+  styleUrls: ['./discussion-prompts-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class DiscussionPromptsViewComponent {
+  @Input() project;
+  @Input() taskDefinition;
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.html
new file mode 100644
index 0000000000..b2ea951404
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.html
@@ -0,0 +1,9 @@
+<div class="h-[calc(100%-50px)] p-2.5">
+  <div class="flex items-center">
+    <mat-icon class="mr-1">comment</mat-icon>
+    <h1 class="mat-headline m-0">Student Notes for {{ project?.student?.name }}</h1>
+  </div>
+  <p>Use these notes for private staff discussions about the student. Students cannot view them.</p>
+
+  <f-staff-notes [project]="project"></f-staff-notes>
+</div>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.ts
new file mode 100644
index 0000000000..e61a9d1a43
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/staff-notes-view/staff-notes-view.component.ts
@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'f-staff-notes-view',
+  templateUrl: './staff-notes-view.component.html',
+  styleUrls: ['./staff-notes-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class StaffNotesViewComponent {
+  @Input() project;
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.html
index 54ca0810cb..65f939f5be 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.html
@@ -1,16 +1,19 @@
-<mat-card appearance="outlined" [hidden]="!(task.definition.isGraded || task.definition.maxQualityPts > 0)">
+<mat-card
+  appearance="outlined"
+  [hidden]="!(task.definition.isGraded || task.definition.maxQualityPts > 0)"
+>
   <mat-card-header>
     <mat-card-title>Assessment Information</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <div [hidden]="!task.definition.isGraded">
-      <div [hidden]="task.hasBeenGraded()" class="callout callout-info">
+      <div class="callout callout-info" [hidden]="task.hasBeenGraded()">
         <p>
           This task will be graded against a grade standard. Your work will be assessed and assigned
-          a grade according to a Pass, Credit, Distinction or High Distinction standard.
+          a grade according to the {{ gradeStandardLabels }} standards configured for this unit.
         </p>
       </div>
-      <div [hidden]="!task.hasBeenGraded()" class="callout callout-success">
+      <div class="callout callout-success" [hidden]="!task.hasBeenGraded()">
         <b>This task has been assigned a grade.</b>
         <p>
           Your tutor has marked you on this task to a
@@ -21,13 +24,13 @@
     <!--/graded-task-is-graded-->
     <!--/graded-task-->
     <div [hidden]="!(task.definition.maxQualityPts > 0)">
-      <p [hidden]="task.hasBeenGivenQualityPoints()" class="callout callout-info">
+      <p class="callout callout-info" [hidden]="task.hasBeenGivenQualityPoints()">
         This task will be graded against a quality scale from
         <strong>0 to {{ task.definition.maxQualityPts }}</strong
         >. Your work will assessed and assigned a star rating based on the quality of your
         submission.
       </p>
-      <div [hidden]="!task.hasBeenGivenQualityPoints()" class="callout callout-success">
+      <div class="callout callout-success" [hidden]="!task.hasBeenGivenQualityPoints()">
         <b>This task has been assessed for quality.</b>
         <p>
           You have been awarded
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.spec.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.spec.ts
index d9dc27547d..ced1674ccc 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.spec.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.spec.ts
@@ -1,6 +1,11 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TaskService} from 'src/app/api/services/task.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {TaskAssessmentCardComponent} from './task-assessment-card.component';
 
-import { TaskAssessmentCardComponent } from './task-assessment-card.component';
+const emptyProvider = {};
 
 describe('TaskAssessmentCardComponent', () => {
   let component: TaskAssessmentCardComponent;
@@ -8,13 +13,20 @@ describe('TaskAssessmentCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TaskAssessmentCardComponent ]
+      declarations: [TaskAssessmentCardComponent],
+      providers: [
+        {provide: TaskService, useValue: emptyProvider},
+        {provide: GradeService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(TaskAssessmentCardComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(TaskAssessmentCardComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.ts
index 34885faa0e..db8db18949 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.component.ts
@@ -1,16 +1,33 @@
-import { Component, Input } from '@angular/core';
-import { Task } from 'src/app/api/models/task';
-import { TaskService } from 'src/app/api/services/task.service';
-import { GradeService } from 'src/app/common/services/grade.service';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Task} from 'src/app/api/models/task';
+import {TaskService} from 'src/app/api/services/task.service';
+import {GradeService} from 'src/app/common/services/grade.service';
 
 @Component({
   selector: 'f-task-assessment-card',
   templateUrl: './task-assessment-card.component.html',
   styleUrls: ['./task-assessment-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskAssessmentCardComponent {
-  constructor(private taskService: TaskService, private gradeService: GradeService) {}
+  constructor(
+    private taskService: TaskService,
+    private gradeService: GradeService,
+  ) {}
 
   @Input() task: Task;
-  gradeNames = this.gradeService.grades;
+
+  get gradeNames() {
+    return Object.fromEntries(
+      this.task.unit.gradeDefinitions.map((definition) => [definition.value, definition.label]),
+    );
+  }
+
+  get gradeStandardLabels(): string {
+    return this.task.unit.gradeDefinitions
+      .filter((definition) => definition.value >= 0)
+      .map((definition) => definition.label)
+      .join(', ');
+  }
 }
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.tpl.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.tpl.html
index c849365e0f..0aa6c58092 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.tpl.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-assessment-card/task-assessment-card.tpl.html
@@ -1,4 +1,7 @@
-<div class="card card-default card-sm" ng-show="task.definition.isGraded || task.definition.maxQualityPts > 0">
+<div
+  class="card card-default card-sm"
+  ng-show="task.definition.isGraded || task.definition.maxQualityPts > 0"
+>
   <div class="card-heading">
     <h4>Assessment Information</h4>
   </div>
@@ -7,38 +10,38 @@ <h4>Assessment Information</h4>
       <h5>This task {{assessmentCards.hasBeenGraded ? 'has been' : 'will be'}} assigned a grade</h5>
       <div ng-hide="hasBeenGraded(task)">
         <p>
-          This task will be graded against a grade standard. Your work will
-          be assessed and assigned a grade according to a Pass, Credit,
-          Distinction or High Distinction standard.
+          This task will be graded against a grade standard. Your work will be assessed and assigned
+          a grade according to a Pass, Credit, Distinction or High Distinction standard.
         </p>
         <div class="callout callout-primary">
           <h5>Advice for achieving a {{task.project.targetGradeWord}}</h5>
           <p>
-            As you are attempting to achieve a {{task.project.targetGradeWord}} in this unit,
-            you should attempt to achieve a <strong>{{task.project.targetGradeWord}}</strong> grade
-            on this task. Ask your tutor to find out more on what they are looking for when they are assessing
-            this work to a specific grade.
+            As you are attempting to achieve a {{task.project.targetGradeWord}} in this unit, you
+            should attempt to achieve a <strong>{{task.project.targetGradeWord}}</strong> grade on
+            this task. Ask your tutor to find out more on what they are looking for when they are
+            assessing this work to a specific grade.
           </p>
         </div>
-      </div><!--/graded-task-is-not-graded-->
+      </div>
+      <!--/graded-task-is-not-graded-->
       <div ng-show="hasBeenGraded(task)">
         Your tutor has marked you on this task to a <strong>{{task.gradeWord}}</strong> standard.
-      </div><!--/graded-task-is-graded-->
-    </div><!--/graded-task-->
-    <hr ng-show="task.definition.isGraded && task.definition.maxQualityPts > 0">
+      </div>
+      <!--/graded-task-is-graded-->
+    </div>
+    <!--/graded-task-->
+    <hr ng-show="task.definition.isGraded && task.definition.maxQualityPts > 0" />
     <div ng-show="task.definition.maxQualityPts > 0">
       <h5>
         <span ng-hide="hasBeenGivenStars(task)">
           This task will be assessed on a scale to {{task.definition.maxQualityPts}}
         </span>
-        <span ng-show="hasBeenGivenStars(task)">
-          This task has been assessed for quality
-        </span>
+        <span ng-show="hasBeenGivenStars(task)"> This task has been assessed for quality </span>
       </h5>
       <p ng-hide="hasBeenGivenStars(task)">
         This task will be graded against a quality scale from
-        <strong>0 to {{task.definition.maxQualityPts}}</strong>. Your work will assessed
-        and assigned a star rating based on the quality of your submission.
+        <strong>0 to {{task.definition.maxQualityPts}}</strong>. Your work will assessed and
+        assigned a star rating based on the quality of your submission.
       </p>
       <div ng-show="hasBeenGivenStars(task)">
         <rating
@@ -47,7 +50,8 @@ <h5>
           max="task.definition.maxQualityPts"
           state-on="'fa fa-star rating-outline'"
           state-off="'fa fa-star rating-disabled'"
-          readonly="true">
+          readonly="true"
+        >
         </rating>
         <p>
           You have been awarded out
@@ -55,6 +59,9 @@ <h5>
           avaliable points for this task.
         </p>
       </div>
-    </div><!--/quality-star-task-->
-  </div><!--/assessment-body-->
-</div><!--/assessment-card-->
+    </div>
+    <!--/quality-star-task-->
+  </div>
+  <!--/assessment-body-->
+</div>
+<!--/assessment-card-->
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.html
new file mode 100644
index 0000000000..2871588484
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.html
@@ -0,0 +1,258 @@
+<article
+  aria-live="polite"
+  class="ppi-card"
+  [attr.aria-busy]="view.state === 'loading'"
+  [attr.aria-labelledby]="titleId"
+  [class.is-error]="view.state === 'error'"
+  [class.is-muted]="
+    view.state === 'unavailable' ||
+    view.state === 'disabled' ||
+    view.state === 'preference-disabled' ||
+    view.state === 'hidden'
+  "
+  [class.is-warning]="view.state === 'stale'"
+>
+  <header class="ppi-head">
+    <div class="ppi-identity">
+      <span aria-hidden="true" class="ppi-avatar">
+        <mat-icon aria-hidden="true">groups</mat-icon>
+      </span>
+      <span>
+        <span class="ppi-title" [id]="titleId">Peer Progress Indicator</span>
+        <span class="ppi-subtitle">Anonymous peers at your target grade</span>
+      </span>
+    </div>
+
+    @if (isCompactResult) {
+      <button
+        class="ppi-toggle"
+        role="switch"
+        type="button"
+        [attr.aria-checked]="advanced"
+        [attr.aria-controls]="advancedPanelId"
+        [attr.aria-expanded]="advanced"
+        [attr.aria-label]="advancedToggleLabel"
+        (click)="setAdvanced(!advanced)"
+      >
+        <span aria-hidden="true" class="ppi-toggle-track">
+          <span class="ppi-toggle-thumb"></span>
+        </span>
+        <span>Advanced</span>
+      </button>
+    }
+  </header>
+
+  @if (isCompactResult) {
+    <section class="ppi-summary">
+      <div
+        class="ppi-value"
+        role="group"
+        [attr.aria-label]="
+          summaryVerb === 'completed'
+            ? 'Peer completion progress at your target grade'
+            : 'Peer submission progress at your target grade'
+        "
+      >
+        <strong>{{ formatPercentage(summaryPercentage) }}%</strong>
+        <span>of peers have {{ summaryVerb }} this task</span>
+      </div>
+
+      <div class="ppi-visual">
+        <div
+          class="ppi-track"
+          role="progressbar"
+          [attr.aria-label]="
+            formatPercentage(summaryPercentage) +
+            '% of peers at your target grade have ' +
+            summaryVerb +
+            ' this task'
+          "
+          [attr.aria-valuemax]="100"
+          [attr.aria-valuemin]="0"
+          [attr.aria-valuenow]="summaryPercentage"
+        >
+          <span class="ppi-fill" [style.width]="summaryWidth"></span>
+        </div>
+        <div aria-hidden="true" class="ppi-scale">
+          <span>{{ formatPercentage(summaryPercentage) }}%</span>
+          <span>Peer cohort</span>
+        </div>
+      </div>
+    </section>
+
+    @if (advanced) {
+      <section class="ppi-advanced" [id]="advancedPanelId">
+        <div aria-label="Peer progress summary metrics" class="ppi-metrics">
+          @if (hasCompletedPercentage) {
+            <div class="ppi-metric is-complete">
+              <span>Completed</span>
+              <strong>{{ formatPercentage(view.data?.completedPercentage ?? 0) }}%</strong>
+            </div>
+          }
+          @if (hasSubmittedPercentage) {
+            <div class="ppi-metric is-submitted">
+              <span>Submitted</span>
+              <strong>{{ formatPercentage(view.data?.submittedPercentage ?? 0) }}%</strong>
+            </div>
+          }
+        </div>
+
+        <div class="ppi-heading">
+          <div>
+            <strong>Task status breakdown</strong>
+            <small>Independently privacy-rounded; values may not total 100%</small>
+          </div>
+        </div>
+
+        @if (!view.data?.distributionAvailable) {
+          <div class="ppi-notice" role="note">
+            <mat-icon aria-hidden="true">privacy_tip</mat-icon>
+            <span>
+              <strong>{{ distributionNoticeTitle }}</strong>
+              {{ distributionNoticeText }}
+            </span>
+          </div>
+        } @else if (displaySegments.length === 0) {
+          <div class="ppi-notice" role="status">
+            <mat-icon aria-hidden="true">hourglass_empty</mat-icon>
+            <span>
+              <strong>No detailed statuses yet</strong>
+              The cohort is privacy-safe, but there is no status breakdown available for this task
+              yet.
+            </span>
+          </div>
+        } @else if (usesStackedDistribution) {
+          <div class="ppi-distribution" role="img" [attr.aria-label]="distributionAriaLabel">
+            @for (segment of displaySegments; track segment.status) {
+              <span
+                aria-hidden="true"
+                class="ppi-segment"
+                [attr.title]="segment.label + ': ' + formatPercentage(segment.percentage) + '%'"
+                [style.background-color]="segment.color"
+                [style.flex-grow]="segment.percentage"
+              ></span>
+            }
+          </div>
+
+          <ul aria-label="Peer task status percentages" class="ppi-legend">
+            @for (segment of displaySegments; track segment.status) {
+              <li>
+                <span
+                  aria-hidden="true"
+                  class="ppi-swatch"
+                  [style.background-color]="segment.color"
+                ></span>
+                <span class="ppi-name">{{ segment.label }}</span>
+                <strong>{{ formatPercentage(segment.percentage) }}%</strong>
+              </li>
+            }
+          </ul>
+        } @else {
+          <div class="ppi-independent">
+            <p class="ppi-rounding" role="note" [id]="independentScaleNoticeId">
+              These privacy-rounded statuses total {{ formatPercentage(distributionTotal) }}%. Each
+              bar uses its own 0&ndash;100% scale, so values are not stretched to fill 100%.
+            </p>
+
+            <ul aria-label="Independently scaled peer task status percentages" class="ppi-list">
+              @for (segment of displaySegments; track segment.status) {
+                <li [attr.data-status]="segment.status">
+                  <span class="ppi-status">
+                    <span
+                      aria-hidden="true"
+                      class="ppi-swatch"
+                      [style.background-color]="segment.color"
+                    ></span>
+                    {{ segment.label }}
+                  </span>
+                  <span
+                    class="ppi-independent__track"
+                    role="progressbar"
+                    [attr.aria-describedby]="independentScaleNoticeId"
+                    [attr.aria-label]="segment.label + ' peer status percentage'"
+                    [attr.aria-valuemax]="100"
+                    [attr.aria-valuemin]="0"
+                    [attr.aria-valuenow]="segment.percentage"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ppi-independent__fill"
+                      [style.background-color]="segment.color"
+                      [style.width.%]="segment.percentage"
+                    ></span>
+                  </span>
+                  <strong>{{ formatPercentage(segment.percentage) }}%</strong>
+                </li>
+              }
+            </ul>
+          </div>
+        }
+
+        @if (view.data?.lastUpdatedAt) {
+          <small class="ppi-updated">
+            Updated {{ view.data?.lastUpdatedAt | date: 'd MMM, h:mm a' }}
+          </small>
+        }
+      </section>
+    }
+  } @else {
+    <section class="ppi-state">
+      @switch (view.state) {
+        @case ('loading') {
+          <mat-spinner aria-label="Loading peer progress" diameter="22"></mat-spinner>
+          <span>
+            <strong>Loading peer progress</strong>
+            Fetching the latest anonymous cohort snapshot&hellip;
+          </span>
+        }
+        @case ('error') {
+          <mat-icon aria-hidden="true">error_outline</mat-icon>
+          <span>
+            <strong>Peer progress could not be loaded</strong>
+            {{ view.message }}
+          </span>
+          <button mat-stroked-button type="button" (click)="retry()">Try again</button>
+        }
+        @case ('hidden') {
+          <mat-icon aria-hidden="true">privacy_tip</mat-icon>
+          <span>
+            <strong>Progress is hidden to protect privacy</strong>
+            {{ view.message }}
+          </span>
+          <button mat-button type="button" (click)="retry()">Check again</button>
+        }
+        @case ('unavailable') {
+          <mat-icon aria-hidden="true">info_outline</mat-icon>
+          <span>
+            <strong>Peer progress is not available yet</strong>
+            {{ view.message }}
+          </span>
+          <button mat-button type="button" (click)="retry()">Check again</button>
+        }
+        @case ('disabled') {
+          <mat-icon aria-hidden="true">visibility_off</mat-icon>
+          <span>
+            <strong>Peer progress is unavailable for this unit</strong>
+            {{ view.message }}
+          </span>
+        }
+        @case ('preference-disabled') {
+          <mat-icon aria-hidden="true">visibility_off</mat-icon>
+          <span>
+            <strong>Peer progress is turned off</strong>
+            {{ view.message }}
+          </span>
+        }
+        @case ('stale') {
+          <mat-icon aria-hidden="true">history</mat-icon>
+          <span>
+            <strong>Fresh peer progress is not available</strong>
+            {{ view.message }}
+          </span>
+          <span class="ppi-badge">Data may be outdated</span>
+          <button mat-button type="button" (click)="retry()">Refresh</button>
+        }
+      }
+    </section>
+  }
+</article>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.scss
new file mode 100644
index 0000000000..f21ca8ff6e
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.scss
@@ -0,0 +1,509 @@
+:host {
+  container-type: inline-size;
+  display: block;
+  min-width: 0;
+}
+
+.ppi-card {
+  background:
+    radial-gradient(circle at 92% -10%, rgb(57 57 255 / 12%), transparent 34%),
+    linear-gradient(135deg, #ffffff, #fbfbff);
+  border: 1px solid #d9d9ef;
+  border-radius: 12px;
+  box-sizing: border-box;
+  box-shadow: 0 3px 12px rgb(29 25 78 / 8%);
+  color: #24242e;
+  max-width: 100%;
+  overflow: hidden;
+
+  &.is-error {
+    border-color: #f0b5a8;
+  }
+
+  &.is-warning {
+    border-color: #e9c36d;
+  }
+
+  &.is-muted {
+    background: linear-gradient(135deg, #ffffff, #fafafa);
+    border-color: #dedee5;
+  }
+}
+
+.ppi-head {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  padding: 9px 12px 5px;
+}
+
+.ppi-identity {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+
+  > span:last-child {
+    min-width: 0;
+  }
+}
+
+.ppi-avatar {
+  align-items: center;
+  background: linear-gradient(145deg, #eeecff, #dcd9ff);
+  border: 1px solid #b7b1ff;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 58%);
+  color: #2d23b8;
+  display: inline-flex;
+  flex: 0 0 34px;
+  height: 34px;
+  justify-content: center;
+
+  mat-icon {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+  }
+}
+
+.ppi-title,
+.ppi-subtitle {
+  display: block;
+}
+
+.ppi-title {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+}
+
+.ppi-subtitle {
+  color: #52525f;
+  font-size: 11px;
+  line-height: 1.3;
+  margin-top: 1px;
+}
+
+.ppi-toggle {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: #33333e;
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  gap: 5px;
+  min-height: 28px;
+  padding: 3px 4px;
+  white-space: nowrap;
+
+  &:focus-visible {
+    outline: 2px solid #3939ff;
+    outline-offset: 2px;
+  }
+}
+
+.ppi-toggle-track {
+  background: #737582;
+  border-radius: 999px;
+  display: inline-flex;
+  flex: 0 0 28px;
+  height: 15px;
+  padding: 2px;
+  transition: background 160ms ease;
+}
+
+.ppi-toggle-thumb {
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 28%);
+  height: 11px;
+  transform: translateX(0);
+  transition: transform 160ms ease;
+  width: 11px;
+}
+
+.ppi-toggle[aria-checked='true'] .ppi-toggle-track {
+  background: #3939ff;
+}
+
+.ppi-toggle[aria-checked='true'] .ppi-toggle-thumb {
+  transform: translateX(13px);
+}
+
+.ppi-summary {
+  align-items: center;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
+  padding: 2px 12px 10px 54px;
+}
+
+.ppi-value {
+  align-items: baseline;
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+
+  strong {
+    color: #2d23b8;
+    font-size: 28px;
+    letter-spacing: -0.04em;
+    line-height: 1;
+  }
+
+  span {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+}
+
+.ppi-visual {
+  min-width: 0;
+}
+
+.ppi-track,
+.ppi-independent__track {
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.ppi-track {
+  background: #e9e9ef;
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  height: 9px;
+}
+
+.ppi-fill,
+.ppi-independent__fill {
+  border-radius: inherit;
+  display: block;
+  height: 100%;
+}
+
+.ppi-fill {
+  background: linear-gradient(90deg, #4637ff, #6559ff 62%, #766cfb);
+  box-shadow: 0 0 10px rgb(57 57 255 / 34%);
+  transition: width 260ms ease;
+}
+
+.ppi-scale {
+  color: #52525f;
+  display: flex;
+  font-size: 10px;
+  font-weight: 600;
+  justify-content: space-between;
+  margin-top: 3px;
+}
+
+.ppi-advanced {
+  background: rgb(246 246 255 / 76%);
+  border-top: 1px solid #e1e0f2;
+  display: grid;
+  gap: 9px;
+  padding: 10px 12px 12px;
+}
+
+.ppi-metrics {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.ppi-metric {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #dedee8;
+  border-left: 4px solid;
+  border-radius: 6px;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 5px 8px;
+
+  span {
+    color: #52525f;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  strong {
+    font-size: 16px;
+  }
+
+  &.is-complete {
+    border-left-color: #45a049;
+  }
+
+  &.is-submitted {
+    border-left-color: #0079d8;
+  }
+}
+
+.ppi-heading {
+  small {
+    display: block;
+  }
+
+  strong {
+    font-size: 14px;
+  }
+
+  small {
+    color: #626272;
+    font-size: 11px;
+    margin-top: 2px;
+  }
+}
+
+.ppi-distribution {
+  background: #e4e4e7;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
+  display: flex;
+  height: 14px;
+  overflow: hidden;
+}
+
+.ppi-segment {
+  flex-basis: 0;
+
+  & + & {
+    border-left: 1px solid rgb(255 255 255 / 58%);
+  }
+}
+
+.ppi-legend,
+.ppi-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ppi-legend {
+  display: grid;
+  gap: 4px 6px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+
+  li {
+    align-items: center;
+    background: rgb(255 255 255 / 86%);
+    border: 1px solid #e2e2eb;
+    border-radius: 5px;
+    display: grid;
+    font-size: 10px;
+    gap: 5px;
+    grid-template-columns: 9px minmax(0, 1fr) auto;
+    min-height: 20px;
+    padding: 2px 4px;
+  }
+}
+
+.ppi-swatch {
+  border: 1px solid rgb(0 0 0 / 12%);
+  border-radius: 50%;
+  height: 9px;
+  width: 9px;
+}
+
+.ppi-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ppi-independent {
+  display: grid;
+  gap: 7px;
+}
+
+.ppi-rounding {
+  background: #ffffff;
+  border-left: 3px solid #3939ff;
+  border-radius: 6px;
+  color: #52525f;
+  font-size: 11px;
+  line-height: 1.45;
+  margin: 0;
+  padding: 5px 7px;
+}
+
+.ppi-list {
+  display: grid;
+  gap: 5px;
+
+  li {
+    align-items: center;
+    display: grid;
+    font-size: 11px;
+    gap: 7px;
+    grid-template-columns: minmax(110px, 0.55fr) minmax(80px, 1fr) 34px;
+  }
+
+  strong {
+    text-align: right;
+  }
+}
+
+.ppi-status {
+  align-items: center;
+  display: flex;
+  font-weight: 600;
+  gap: 7px;
+  min-width: 0;
+}
+
+.ppi-status .ppi-swatch {
+  flex: 0 0 9px;
+}
+
+.ppi-independent__track {
+  background: #e4e4e7;
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
+  display: block;
+  height: 9px;
+}
+
+.ppi-notice {
+  align-items: flex-start;
+  background: #fffaf0;
+  border: 1px solid #ead8a7;
+  border-radius: 8px;
+  color: #5f4a17;
+  display: flex;
+  font-size: 12px;
+  gap: 10px;
+  line-height: 1.45;
+  padding: 8px 9px;
+
+  strong {
+    display: block;
+    margin-bottom: 1px;
+  }
+}
+
+.ppi-updated {
+  color: #6b6b78;
+  font-size: 10px;
+  justify-self: end;
+}
+
+.ppi-state {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  min-height: 42px;
+  padding: 3px 12px 10px 54px;
+
+  > mat-icon {
+    color: #686879;
+    flex: 0 0 auto;
+  }
+
+  > span:not(.ppi-badge) {
+    color: #5d5d68;
+    flex: 1 1 auto;
+    font-size: 12px;
+    line-height: 1.4;
+
+    strong {
+      color: #2c2c35;
+      display: block;
+      font-size: 13px;
+      margin-bottom: 1px;
+    }
+  }
+}
+
+.is-error .ppi-state > mat-icon {
+  color: #c73717;
+}
+
+.is-warning .ppi-state > mat-icon {
+  color: #9a6700;
+}
+
+.ppi-badge {
+  background: #fff1c7;
+  border-radius: 999px;
+  color: #76550c;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 4px 8px;
+  white-space: nowrap;
+}
+
+@container (width < 460px) {
+  .ppi-head {
+    align-items: flex-start;
+  }
+
+  .ppi-subtitle {
+    max-width: 25rem;
+  }
+
+  .ppi-summary {
+    padding-left: 12px;
+  }
+
+  .ppi-state {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding-left: 12px;
+
+    button {
+      margin-left: 30px;
+    }
+  }
+}
+
+@container (width < 350px) {
+  .ppi-head {
+    flex-wrap: wrap;
+  }
+
+  .ppi-toggle {
+    margin-left: 42px;
+  }
+
+  .ppi-value strong {
+    font-size: 25px;
+  }
+
+  .ppi-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .ppi-legend {
+    grid-template-columns: 1fr;
+  }
+
+  .ppi-list li {
+    align-items: start;
+    grid-template-columns: 1fr auto;
+  }
+
+  .ppi-independent__track {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ppi-fill,
+  .ppi-toggle-track,
+  .ppi-toggle-thumb {
+    transition: none;
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.spec.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.spec.ts
new file mode 100644
index 0000000000..a720831865
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.spec.ts
@@ -0,0 +1,324 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {CommonModule} from '@angular/common';
+import {HttpErrorResponse} from '@angular/common/http';
+import {SimpleChange} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {Observable, Subject, of, throwError} from 'rxjs';
+import {PeerProgressIndicator} from 'src/app/api/models/peer-progress-indicator';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {PeerProgressIndicatorService} from 'src/app/api/services/peer-progress-indicator.service';
+import {
+  DETAIL_PROTECTED_STATE,
+  DISABLED_STATE,
+  NORMAL_STATE,
+  ROUNDED_90_STATE,
+  ROUNDED_110_STATE,
+  STALE_STATE,
+  SUPPRESSED_STATE,
+  UNAVAILABLE_STATE,
+  USER_DISABLED_STATE,
+  ZERO_PERCENT_STATE,
+} from 'src/app/demo/fixtures/peer-progress-demo.fixtures';
+import {PpiWidgetComponent} from './ppi-widget.component';
+
+describe('PpiWidgetComponent', () => {
+  let component: PpiWidgetComponent;
+  let fixture: ComponentFixture<PpiWidgetComponent>;
+  let getIndicator: ReturnType<typeof vi.fn>;
+
+  const mockTask = {project: {id: 7, unit: {id: 1}, targetGrade: 2}} as unknown as Task;
+  const mockTaskDef = {id: 99} as unknown as TaskDefinition;
+
+  beforeEach(async () => {
+    getIndicator = vi.fn();
+
+    await TestBed.configureTestingModule({
+      declarations: [PpiWidgetComponent],
+      imports: [CommonModule, MatIconModule, MatProgressSpinnerModule, MatButtonModule],
+      providers: [{provide: PeerProgressIndicatorService, useValue: {getIndicator}}],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PpiWidgetComponent);
+    component = fixture.componentInstance;
+    component.task = mockTask;
+    component.taskDef = mockTaskDef;
+  });
+
+  function load(response$: Observable<PeerProgressIndicator>) {
+    getIndicator.mockReturnValue(response$);
+    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+    fixture.detectChanges();
+  }
+
+  it('should create', () => {
+    load(of(NORMAL_STATE));
+    expect(component).toBeTruthy();
+  });
+
+  it('shows the completion percentage on a normal response', () => {
+    load(of(NORMAL_STATE));
+    expect(getIndicator).toHaveBeenCalledWith(7, 99);
+    expect(component.view.state).toBe('success');
+    expect(fixture.nativeElement.textContent).toContain('10%');
+    expect(fixture.nativeElement.textContent).toContain('have completed this task');
+  });
+
+  it('labels the rolling-API fallback as submitted rather than completed', () => {
+    load(of({...NORMAL_STATE, completedPercentage: null}));
+
+    const summary = fixture.nativeElement.querySelector('.ppi-value');
+    expect(summary.textContent).toContain('60%');
+    expect(summary.textContent).toContain('have submitted this task');
+    expect(summary.getAttribute('aria-label')).toBe(
+      'Peer submission progress at your target grade',
+    );
+  });
+
+  it('shows a rounded zero as data rather than unavailable', () => {
+    load(of(ZERO_PERCENT_STATE));
+    expect(component.view.state).toBe('no-data');
+    expect(fixture.nativeElement.textContent).toContain('0%');
+    expect(fixture.nativeElement.textContent).toContain('have completed this task');
+    expect(fixture.nativeElement.querySelector('.ppi-fill').style.width).toBe('0%');
+  });
+
+  it('shows the API-provided hidden message for a suppressed response', () => {
+    load(of(SUPPRESSED_STATE));
+    expect(component.view.state).toBe('hidden');
+    expect(fixture.nativeElement.textContent).toContain(SUPPRESSED_STATE.unavailableMessage);
+    expect(fixture.nativeElement.textContent).not.toMatch(/\d+ students?/);
+  });
+
+  it('shows the API-provided unavailable message', () => {
+    load(of(UNAVAILABLE_STATE));
+    expect(component.view.state).toBe('unavailable');
+    expect(fixture.nativeElement.textContent).toContain(UNAVAILABLE_STATE.unavailableMessage);
+  });
+
+  it('shows the API-provided disabled message when the feature is turned off', () => {
+    load(of(DISABLED_STATE));
+    expect(component.view.state).toBe('disabled');
+    expect(fixture.nativeElement.textContent).toContain(DISABLED_STATE.unavailableMessage);
+  });
+
+  it('uses a local neutral message when the profile preference is disabled', () => {
+    load(of(USER_DISABLED_STATE));
+
+    expect(component.view.state).toBe('preference-disabled');
+    expect(fixture.nativeElement.textContent).toContain('Peer progress is turned off');
+    expect(fixture.nativeElement.textContent).toContain('profile settings');
+    expect(fixture.nativeElement.textContent).not.toContain('60%');
+  });
+
+  it('shows a distinct visible stale state when data is outdated', () => {
+    load(of(STALE_STATE));
+    expect(component.view.state).toBe('stale');
+    expect(component.view.data?.submittedPercentage).toBeNull();
+    expect(component.view.message).toBe(STALE_STATE.unavailableMessage);
+    expect(fixture.nativeElement.textContent).toContain('Peer progress is currently unavailable.');
+    expect(fixture.nativeElement.textContent).not.toContain('55%');
+  });
+
+  it('transitions from loading to success once the request resolves', () => {
+    const subject: Subject<PeerProgressIndicator> = new Subject();
+    getIndicator.mockReturnValue(subject.asObservable());
+
+    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+    expect(component.view.state).toBe('loading');
+
+    subject.next(NORMAL_STATE);
+    expect(component.view.state).toBe('success');
+  });
+
+  it.each([404, 503])(
+    'shows a generic error for HTTP %s without leaking server details',
+    (status) => {
+      const subject: Subject<PeerProgressIndicator> = new Subject();
+      getIndicator.mockReturnValue(subject.asObservable());
+
+      component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+      expect(component.view.state).toBe('loading');
+
+      subject.error(
+        new HttpErrorResponse({
+          status,
+          error: {error: 'Peer progress is unavailable for this project or task.'},
+        }),
+      );
+      fixture.detectChanges();
+
+      expect(component.view.state).toBe('error');
+      expect(component.view.data).toBeNull();
+      expect(fixture.nativeElement.textContent).toContain('Could not load peer progress.');
+      expect(fixture.nativeElement.textContent).not.toContain(
+        'unavailable for this project or task',
+      );
+    },
+  );
+
+  it('does not render a stale value if a request fails after a new one has already started', () => {
+    load(of(NORMAL_STATE));
+    expect(fixture.nativeElement.textContent).toContain('10%');
+
+    load(throwError(() => new Error('network down')));
+    fixture.detectChanges();
+    expect(component.view.state).toBe('error');
+    expect(fixture.nativeElement.textContent).not.toContain('10%');
+  });
+
+  it('cancels a previous in-flight request when the task changes before it resolves', () => {
+    const first: Subject<PeerProgressIndicator> = new Subject();
+    const second: Subject<PeerProgressIndicator> = new Subject();
+    getIndicator
+      .mockReturnValueOnce(first.asObservable())
+      .mockReturnValueOnce(second.asObservable());
+
+    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+
+    first.next(NORMAL_STATE);
+    expect(component.view.state).toBe('loading');
+
+    second.next(SUPPRESSED_STATE);
+    expect(component.view.state).toBe('hidden');
+  });
+
+  it('hides decorative icons from screen readers', () => {
+    load(throwError(() => new Error('network down')));
+    fixture.detectChanges();
+
+    const icons = fixture.nativeElement.querySelectorAll('mat-icon');
+
+    icons.forEach((icon: HTMLElement) => {
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
+  });
+
+  it.each([
+    {response: NORMAL_STATE, metric: 'completion', verb: 'completed', percentage: 10},
+    {
+      response: {...NORMAL_STATE, completedPercentage: null},
+      metric: 'submission',
+      verb: 'submitted',
+      percentage: 60,
+    },
+    {response: ZERO_PERCENT_STATE, metric: 'completion', verb: 'completed', percentage: 0},
+  ])(
+    'exposes the $percentage% $metric value in a named semantic group',
+    ({response, metric, verb, percentage}) => {
+      load(of(response));
+
+      const value = fixture.nativeElement.querySelector('.ppi-value[role="group"]');
+
+      expect(value).toBeTruthy();
+      expect(value.getAttribute('aria-label')).toBe(`Peer ${metric} progress at your target grade`);
+      expect(value.textContent).toContain(`${percentage}%`);
+      expect(value.textContent).toContain(`of peers have ${verb} this task`);
+    },
+  );
+
+  it('keeps the visible summary concise while retaining cohort context for assistive technology', () => {
+    load(of(NORMAL_STATE));
+
+    const summary = fixture.nativeElement.querySelector('.ppi-value') as HTMLElement;
+    const progress = fixture.nativeElement.querySelector('.ppi-track') as HTMLElement;
+
+    expect(summary.querySelector('strong')?.textContent).toBe('10%');
+    expect(summary.querySelector('span')?.textContent).toBe('of peers have completed this task');
+    expect(summary.textContent).not.toContain('target grade');
+    expect(progress.getAttribute('aria-label')).toBe(
+      '10% of peers at your target grade have completed this task',
+    );
+  });
+
+  it('uses a compact accessible switch for the optional detailed panel', () => {
+    load(of(NORMAL_STATE));
+
+    const toggle = fixture.nativeElement.querySelector(
+      'button[role="switch"]',
+    ) as HTMLButtonElement;
+    expect(toggle.getAttribute('aria-label')).toBe('Advanced peer status breakdown');
+    expect(toggle.getAttribute('aria-checked')).toBe('false');
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(fixture.nativeElement.querySelector('.ppi-advanced')).toBeNull();
+
+    toggle.click();
+    fixture.detectChanges();
+
+    expect(toggle.getAttribute('aria-checked')).toBe('true');
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(toggle.getAttribute('aria-label')).toBe('Advanced peer status breakdown');
+    expect(fixture.nativeElement.querySelector('.ppi-advanced')).toBeTruthy();
+  });
+
+  it('reveals the full non-zero status distribution through the Advanced switch', () => {
+    load(of(NORMAL_STATE));
+
+    component.setAdvanced(true);
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent;
+    expect(text).toContain('Task status breakdown');
+    expect(text).toContain('Redo');
+    expect(text).toContain('Resubmit');
+    expect(fixture.nativeElement.querySelector('.ppi-distribution')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('.ppi-independent')).toBeNull();
+    expect(fixture.nativeElement.querySelectorAll('.ppi-legend li').length).toBe(7);
+    expect(
+      Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.ppi-name')).map((label) =>
+        label.textContent.trim(),
+      ),
+    ).toEqual([
+      'Not Started',
+      'Working On It',
+      'Ready for Feedback',
+      'Resubmit',
+      'Redo',
+      'Complete',
+      'Fail',
+    ]);
+  });
+
+  it.each([
+    {state: ROUNDED_90_STATE, total: 90},
+    {state: ROUNDED_110_STATE, total: 110},
+  ])('does not visually renormalise a privacy-rounded $total% vector', ({state, total}) => {
+    load(of(state));
+
+    component.setAdvanced(true);
+    fixture.detectChanges();
+
+    const independent = fixture.nativeElement.querySelector('.ppi-independent');
+    const workingFill = fixture.nativeElement.querySelector(
+      '[data-status="working_on_it"] .ppi-independent__fill',
+    ) as HTMLElement;
+    const workingTrack = fixture.nativeElement.querySelector(
+      '[data-status="working_on_it"] [role="progressbar"]',
+    ) as HTMLElement;
+
+    expect(component.distributionTotal).toBe(total);
+    expect(fixture.nativeElement.querySelector('.ppi-distribution')).toBeNull();
+    expect(independent.textContent).toContain(`total ${total}%`);
+    expect(independent.textContent).toContain('not stretched to fill 100%');
+    expect(workingFill.style.width).toBe('20%');
+    expect(workingTrack.getAttribute('aria-valuenow')).toBe('20');
+    expect(workingTrack.getAttribute('aria-describedby')).toBe(component.independentScaleNoticeId);
+  });
+
+  it('keeps the compact value while explaining a privacy-withheld detailed vector', () => {
+    load(of(DETAIL_PROTECTED_STATE));
+
+    component.setAdvanced(true);
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent;
+    expect(text).toContain('10%');
+    expect(text).toContain('Detailed breakdown protected');
+    expect(text).not.toContain('Redo');
+    expect(fixture.nativeElement.querySelector('.ppi-distribution')).toBeNull();
+  });
+});
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.ts
new file mode 100644
index 0000000000..4e6517ccd9
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.ts
@@ -0,0 +1,203 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+} from '@angular/core';
+import {Subscription} from 'rxjs';
+import {
+  PeerProgressViewModel,
+  resolvePeerProgressState,
+} from 'src/app/api/models/peer-progress-indicator-state';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {TaskStatus, TaskStatusEnum} from 'src/app/api/models/task-status';
+import {PeerProgressIndicatorService} from 'src/app/api/services/peer-progress-indicator.service';
+
+interface PeerProgressDisplaySegment {
+  status: TaskStatusEnum;
+  label: string;
+  color: string;
+  percentage: number;
+}
+
+// f-ppi-widget: renders the privacy-safe peer progress indicator below a task submission.
+@Component({
+  selector: 'f-ppi-widget',
+  templateUrl: './ppi-widget.component.html',
+  styleUrls: ['./ppi-widget.component.scss'],
+  standalone: false,
+})
+export class PpiWidgetComponent implements OnChanges, OnDestroy {
+  @Input({required: true}) task: Task;
+  @Input({required: true}) taskDef: TaskDefinition;
+
+  view: PeerProgressViewModel = {state: 'loading', data: null, message: null};
+  advanced = false;
+
+  private activeRequest?: Subscription;
+  private readonly statusDisplayIndex = new Map(
+    TaskStatus.PEER_PROGRESS_DISPLAY_ORDER.map((status, index) => [status, index]),
+  );
+
+  constructor(
+    private ppiService: PeerProgressIndicatorService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.task || changes.taskDef) {
+      this.advanced = false;
+      this.load();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.activeRequest?.unsubscribe();
+  }
+
+  retry(): void {
+    this.load();
+  }
+
+  setAdvanced(enabled: boolean): void {
+    this.advanced = enabled;
+    this.cdr.markForCheck();
+  }
+
+  get isCompactResult(): boolean {
+    return this.view.state === 'success' || this.view.state === 'no-data';
+  }
+
+  get summaryPercentage(): number {
+    return this.view.data?.completedPercentage ?? this.view.data?.submittedPercentage ?? 0;
+  }
+
+  get summaryVerb(): 'completed' | 'submitted' {
+    return this.hasCompletedPercentage ? 'completed' : 'submitted';
+  }
+
+  get hasCompletedPercentage(): boolean {
+    return (
+      this.view.data?.completedPercentage !== null &&
+      this.view.data?.completedPercentage !== undefined
+    );
+  }
+
+  get hasSubmittedPercentage(): boolean {
+    return (
+      this.view.data?.submittedPercentage !== null &&
+      this.view.data?.submittedPercentage !== undefined
+    );
+  }
+
+  get summaryWidth(): string {
+    return `${Math.min(100, Math.max(0, this.summaryPercentage))}%`;
+  }
+
+  get displaySegments(): PeerProgressDisplaySegment[] {
+    return (this.view.data?.statusDistribution ?? [])
+      .filter((entry) => entry.percentage > 0)
+      .sort(
+        (left, right) =>
+          (this.statusDisplayIndex.get(left.status) ?? Number.MAX_SAFE_INTEGER) -
+          (this.statusDisplayIndex.get(right.status) ?? Number.MAX_SAFE_INTEGER),
+      )
+      .map((entry) => ({
+        ...entry,
+        label: this.statusLabel(entry.status),
+        color: TaskStatus.STATUS_COLORS.get(entry.status) ?? '#64748b',
+      }));
+  }
+
+  get distributionTotal(): number {
+    return this.displaySegments.reduce((total, segment) => total + segment.percentage, 0);
+  }
+
+  get usesStackedDistribution(): boolean {
+    return this.distributionTotal === 100;
+  }
+
+  get distributionAriaLabel(): string {
+    const detail = this.displaySegments
+      .map((segment) => `${segment.label} ${this.formatPercentage(segment.percentage)}%`)
+      .join(', ');
+
+    return `Anonymous peer task status distribution: ${detail}`;
+  }
+
+  get titleId(): string {
+    return `peer-progress-title-${this.taskDef?.id ?? 'loading'}`;
+  }
+
+  get advancedPanelId(): string {
+    return `peer-progress-advanced-${this.taskDef?.id ?? 'loading'}`;
+  }
+
+  get independentScaleNoticeId(): string {
+    return `peer-progress-independent-scale-${this.taskDef?.id ?? 'loading'}`;
+  }
+
+  get advancedToggleLabel(): string {
+    return 'Advanced peer status breakdown';
+  }
+
+  get distributionNoticeTitle(): string {
+    return this.isDistributionPrivacyProtected
+      ? 'Detailed breakdown protected'
+      : 'Detailed breakdown not available';
+  }
+
+  get distributionNoticeText(): string {
+    return this.isDistributionPrivacyProtected
+      ? 'This cohort can show an overall percentage, but the status-by-status view is hidden because individual progress could otherwise be inferred.'
+      : 'The overall percentage is available, but a privacy-safe status-by-status snapshot has not been prepared yet.';
+  }
+
+  formatPercentage(value: number): string {
+    return Number.isInteger(value) ? `${value}` : value.toFixed(1).replace(/\.0$/, '');
+  }
+
+  private humaniseStatus(status: string): string {
+    return status
+      .split('_')
+      .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+      .join(' ');
+  }
+
+  private statusLabel(status: TaskStatusEnum): string {
+    return status === 'ready_for_feedback'
+      ? 'Ready for Feedback'
+      : (TaskStatus.STATUS_LABELS.get(status) ?? this.humaniseStatus(status));
+  }
+
+  private get isDistributionPrivacyProtected(): boolean {
+    const reason = this.view.data?.distributionUnavailableReason;
+    return reason === 'privacy_protection' || reason === 'insufficient_cohort';
+  }
+
+  private setView(next: PeerProgressViewModel): void {
+    this.view = next;
+    this.cdr.markForCheck();
+  }
+
+  private load(): void {
+    if (!this.task?.project || !this.taskDef) {
+      return;
+    }
+
+    // Cancel the previous request first so a late response cannot replace the
+    // loading state for a newly selected task.
+    this.activeRequest?.unsubscribe();
+    this.setView(resolvePeerProgressState(true, null, null));
+
+    this.activeRequest = this.ppiService
+      .getIndicator(this.task.project.id, this.taskDef.id)
+      .subscribe({
+        next: (data) => this.setView(resolvePeerProgressState(false, null, data)),
+        error: (err) => this.setView(resolvePeerProgressState(false, err, null)),
+      });
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.html
index 5c7cc82d56..04d3586355 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.html
@@ -1,36 +1,94 @@
-<mat-card appearance="">
+<mat-card>
   <mat-card-header>
-    <div class="flex mb-4">
-      <f-task-badge [taskDef]="taskDef" class="mr-4"></f-task-badge>
+    <div class="mb-2.5 flex">
+      <f-task-badge class="mr-2.5" [taskDef]="taskDef"></f-task-badge>
       <mat-card-title>{{ taskDef?.name }}</mat-card-title>
     </div>
   </mat-card-header>
   <mat-card-content>
-    <div class="markdown-to-pdf" [innerHTML]="taskDef?.description | marked"></div>
+    <div
+      class="markdown-to-pdf"
+      [innerHTML]="$safeNavigationMigration(taskDef?.description) | marked"
+    ></div>
+    @if (task) {
+      <f-task-date-slider [task]="task" />
+    }
     <ul>
       <li>{{ grades.names[taskDef?.targetGrade] }} Task</li>
-      <li>Start Date &mdash; Aim to start this task by {{ startDate() | date: 'EEE d MMM' }}.</li>
-      <li [hidden]="!task?.extensions || task?.extensions <= 0">
-        Extension &mdash; You have an extension for
-        {{ task?.extensions }} week{{ task?.extensions > 1 ? 's' : '' }}.
-      </li>
-      <li>Due Date &mdash; Aim to complete by {{ dueDate() | date: 'EEE d MMM' }}.</li>
+
+      @if (unit?.allowFlexibleDates ?? taskDef?.unit?.allowFlexibleDates) {
+        <li>I'm planning to <b>start</b> this task by {{ startDate() | date: 'EEE d MMM' }}.</li>
+        <li [hidden]="!task?.extensions || task?.extensions <= 0">
+          The due date has been <b>extended</b> by {{ task?.extensions }} week{{
+            task?.extensions > 1 ? 's' : ''
+          }}.
+        </li>
+        <li>I'm aiming to <b>submit</b> this task by {{ dueDate() | date: 'EEE d MMM' }}.</li>
+        @if (feedbackDate()) {
+          <li [class.text-amber-600]="shouldShowDeadline()">
+            To receive <b>feedback</b>, I must submit this task by
+            {{ feedbackDate() | date: 'EEE d MMM' }}.
+          </li>
+        }
+      } @else {
+        <li>
+          Start Date &mdash; I'm aiming to <b>start</b> this task by
+          {{ startDate() | date: 'EEE d MMM' }}.
+        </li>
+        <li [hidden]="!task?.extensions || task?.extensions <= 0">
+          Extension &mdash; The due date has been extended by
+          {{ task?.extensions }} week{{ task?.extensions > 1 ? 's' : '' }}.
+        </li>
+        <li>
+          Due Date &mdash; I'm aiming to <b>submit</b> this task by
+          {{ dueDate() | date: 'EEE d MMM' }}.
+        </li>
+        @if (feedbackDate()) {
+          <li [class.text-amber-600]="shouldShowDeadline()">
+            Feedback Deadline &mdash; To receive <b>feedback</b>, I must submit this task by
+            {{ feedbackDate() | date: 'EEE d MMM' }}.
+          </li>
+        }
+      }
     </ul>
   </mat-card-content>
   <mat-card-actions
-    class="space-x-2"
+    class="space-x-1"
     [hidden]="!(taskDef?.hasTaskSheet || taskDef?.hasTaskResources)"
   >
+    <!-- <button mat-stroked-button [hidden]="!taskDef?.hasTaskSheet" (click)="viewTaskSheet()">
+      <mat-icon style="width: 20px; height: 20px; font-size: 20px" aria-label="View icon"
+        >description</mat-icon
+      >
+      Task Sheet
+    </button> -->
     <button mat-stroked-button [hidden]="!taskDef?.hasTaskSheet" (click)="downloadTaskSheet()">
-      <mat-icon style="width: 20px; height: 20px; font-size: 20px" aria-label="Download icon"
+      <mat-icon aria-label="Download icon" style="width: 20px; height: 20px; font-size: 20px"
         >download</mat-icon
       >
       Task Sheet
     </button>
     <button mat-stroked-button [hidden]="!taskDef?.hasTaskResources" (click)="downloadResources()">
-      <mat-icon style="width: 20px; height: 20px; font-size: 20px" inline aria-label="Download icon"
+      <mat-icon aria-label="Download icon" inline style="width: 20px; height: 20px; font-size: 20px"
         >download</mat-icon
       ><span>Resources</span>
     </button>
   </mat-card-actions>
+  @if (googleCalendarUrl; as calendarUrl) {
+    <mat-card-actions class="space-x-1">
+      <a
+        aria-label="Add to Google Calendar, opens in a new tab"
+        class="add-to-google-calendar-link"
+        mat-stroked-button
+        rel="noopener noreferrer"
+        target="_blank"
+        [href]="calendarUrl"
+        (keydown)="handleCalendarLinkKeydown($event)"
+      >
+        <mat-icon aria-hidden="true" style="width: 20px; height: 20px; font-size: 20px"
+          >event</mat-icon
+        ><span>Add to Google Calendar</span>
+      </a>
+    </mat-card-actions>
+  }
 </mat-card>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.spec.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.spec.ts
new file mode 100644
index 0000000000..11a5f9d01e
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.spec.ts
@@ -0,0 +1,349 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {MarkedPipe} from 'src/app/common/pipes/marked.pipe';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {TaskDescriptionCardComponent} from './task-description-card.component';
+
+function buildTask(overrides: {
+  unitCode?: string;
+  abbreviation?: string;
+  name?: string;
+  taskDefId?: number;
+  dueDate?: Date;
+  hasTaskSheet?: boolean;
+  hasTaskResources?: boolean;
+}): Task {
+  const unit = new Unit();
+  unit.code = overrides.unitCode ?? 'COS10001';
+  unit.allowFlexibleDates = false;
+
+  const definition = new TaskDefinition(unit);
+  definition.id = overrides.taskDefId ?? 42;
+  definition.abbreviation = overrides.abbreviation ?? '1.1P';
+  definition.name = overrides.name ?? 'Hello World';
+  definition.description = '';
+  definition.targetDate = undefined;
+  definition.startDate = new Date(2026, 8, 1);
+  definition.targetGrade = 0;
+  definition.hasTaskSheet = overrides.hasTaskSheet ?? true;
+  definition.hasTaskResources = overrides.hasTaskResources ?? false;
+
+  const task = new Task(unit);
+  task.definition = definition;
+  task.dueDate = overrides.dueDate;
+
+  return task;
+}
+
+describe('TaskDescriptionCardComponent', () => {
+  let component: TaskDescriptionCardComponent;
+  let fixture: ComponentFixture<TaskDescriptionCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TaskDescriptionCardComponent, MarkedPipe],
+      imports: [NoopAnimationsModule, MatButtonModule, MatIconModule],
+      providers: [
+        GradeService,
+        {provide: FileDownloaderService, useValue: {downloadFile: () => undefined}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TaskDescriptionCardComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    // window.open is a real global. vi.spyOn replaces it in place and, without this,
+    // the replacement and its call history persist across tests, since neither
+    // restoreMocks nor clearMocks is configured globally for this project (checked
+    // angular.json's test builder options and src/vitest-setup.ts, neither sets
+    // either). vi.restoreAllMocks() restores the original window.open and clears the
+    // spy's history after every test, not just the ones that create it directly.
+    vi.restoreAllMocks();
+  });
+
+  it('renders the Add to Google Calendar button when the task has a due date, with a correct href, target and rel', () => {
+    // 23:59:59.999 local, the only time-of-day Task.dueDate actually carries. It maps
+    // through MappingFunctions.mapDateToEndOfDay in the real app (task.service.ts), a
+    // bare local-midnight fixture is not a value the app ever produces.
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+    component.task = task;
+    component.taskDef = task.definition;
+    component.unit = task.unit;
+    fixture.detectChanges();
+
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector(
+      'a.add-to-google-calendar-link',
+    );
+
+    expect(link).not.toBeNull();
+    expect(link.getAttribute('href')).toBe(component.googleCalendarUrl);
+    expect(link.getAttribute('target')).toBe('_blank');
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+
+  it('is absent from the DOM when the task has no resolvable due date', () => {
+    const task = buildTask({dueDate: undefined});
+    component.task = task;
+    component.taskDef = task.definition;
+    component.unit = task.unit;
+    fixture.detectChanges();
+
+    const link = fixture.nativeElement.querySelector('a.add-to-google-calendar-link');
+
+    expect(link).toBeNull();
+  });
+
+  it('renders the button when the task has a due date but neither a task sheet nor resources', () => {
+    // The button's own container used to be mat-card-actions, hidden unless
+    // hasTaskSheet or hasTaskResources is true. The calendar button now has its own
+    // container gated only by whether a due date resolves, this proves it is no longer
+    // tied to that unrelated condition.
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate, hasTaskSheet: false, hasTaskResources: false});
+    component.task = task;
+    component.taskDef = task.definition;
+    component.unit = task.unit;
+    fixture.detectChanges();
+
+    const link = fixture.nativeElement.querySelector('a.add-to-google-calendar-link');
+
+    expect(link).not.toBeNull();
+  });
+
+  it('builds the exact Google Calendar URL, with an exclusive end date one day after the due date', () => {
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({
+      unitCode: 'COS10001',
+      abbreviation: '1.1P',
+      name: 'Hello World',
+      taskDefId: 42,
+      dueDate,
+    });
+    component.task = task;
+
+    const url = component.googleCalendarUrl;
+
+    expect(url).toBe(
+      'https://calendar.google.com/calendar/render?' +
+        'action=TEMPLATE&' +
+        'text=COS10001%3A%201.1P%3A%20Hello%20World&' +
+        'dates=20260915%2F20260916',
+    );
+  });
+
+  it('keeps the rendered and activated calendar URL current when the same task is mutated', () => {
+    const task = buildTask({dueDate: new Date(2026, 8, 15, 23, 59, 59, 999)});
+    task.project = new Project(task.unit);
+    task.project.targetGrade = 0;
+    task.definition.dueDate = new Date(2026, 11, 1, 23, 59, 59, 999);
+    component.task = task;
+    component.taskDef = task.definition;
+    component.unit = task.unit;
+    fixture.detectChanges();
+
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector(
+      'a.add-to-google-calendar-link',
+    );
+    expect(link.getAttribute('href')).toContain('dates=20260915%2F20260916');
+
+    task.dueDate = new Date(2026, 8, 22, 23, 59, 59, 999);
+    fixture.detectChanges();
+
+    expect(link.getAttribute('href')).toContain('dates=20260922%2F20260923');
+
+    task.unit.allowFlexibleDates = true;
+    task.targetDueDate = new Date(2026, 8, 29, 23, 59, 59, 999);
+    const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    link.dispatchEvent(new KeyboardEvent('keydown', {key: ' ', cancelable: true}));
+
+    expect(windowOpenSpy).toHaveBeenCalledWith(
+      expect.stringContaining('dates=20260929%2F20260930'),
+      '_blank',
+      'noopener,noreferrer',
+    );
+
+    fixture.detectChanges();
+    expect(link.getAttribute('href')).toContain('dates=20260929%2F20260930');
+  });
+
+  it('produces the correct dates range for a due date the day before Melbourne DST starts, which the old MappingFunctions.addDays approach got wrong', () => {
+    // Confirmed against the ICU timezone database: 2026-10-03 is AEST (UTC+10),
+    // 2026-10-04 is AEDT (UTC+11). Melbourne's clocks spring forward overnight
+    // between these two dates.
+    //
+    // The old approach (before this fix) held event.date as a Date instant and
+    // called MappingFunctions.addDays, which adds a fixed 24 hours of real
+    // elapsed time, then read the result back via local calendar getters. For a
+    // task due 2026-10-03, Task.localDueDate() resolved to 23:59:59.999 local
+    // time, 13:59:59.999 UTC while still on AEST. Reconstructed here exactly, to
+    // prove what that approach actually produced, since the buggy code itself no
+    // longer exists in this file to call directly.
+    const dueDateInstantUtc = Date.UTC(2026, 9, 3, 13, 59, 59, 999);
+    const oldBuggyEndInstant = dueDateInstantUtc + 24 * 60 * 60 * 1000;
+    const melbourneCivilDate = new Intl.DateTimeFormat('en-CA', {
+      timeZone: 'Australia/Melbourne',
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    });
+
+    // Adding a fixed 24 hours crosses the DST transition, so the wall-clock
+    // result lands an hour later than a plain "next day" would, which is enough
+    // to push it past midnight into a second day. The old approach's end date is
+    // 2026-10-05, not 2026-10-04, confirmed both by this direct reconstruction
+    // and empirically against the real ICU timezone database before writing this
+    // test. This assertion is the proof this test would fail against the old
+    // approach, not a description of it.
+    expect(melbourneCivilDate.format(oldBuggyEndInstant)).toBe('2026-10-05');
+
+    // The test container itself runs in UTC (confirmed separately), which has no
+    // DST, so exercising the real component pipeline in this environment cannot
+    // by itself distinguish old from new behaviour, UTC never crosses a DST
+    // transition regardless of which calendar date is chosen. The assertion
+    // above is what makes this test meaningful, the assertion below confirms
+    // the current, fixed production code produces the correct civil-date
+    // arithmetic (2026-10-03 to 2026-10-04) that the old approach failed to.
+    // Reuses dueDateInstantUtc, the same 23:59:59.999-Melbourne-local instant
+    // established above, as the realistic Task.dueDate fixture value.
+    const task = buildTask({dueDate: new Date(dueDateInstantUtc)});
+    component.task = task;
+
+    const url = component.googleCalendarUrl;
+
+    expect(url).toContain('dates=20261003%2F20261004');
+  });
+
+  it('opens the calendar URL in a new tab, with noopener and noreferrer, when Space is pressed on the link', () => {
+    // jsdom cannot assert on actual navigation, so this spies on window.open, the
+    // browser API handleCalendarLinkKeydown calls directly, and dispatches a real
+    // keydown so the (keydown) template binding itself is exercised, not just the
+    // handler method in isolation. ' ' is the real browser event.key value for the
+    // space bar, not code: 'Space'.
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+    component.task = task;
+    component.taskDef = task.definition;
+    component.unit = task.unit;
+    fixture.detectChanges();
+
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector(
+      'a.add-to-google-calendar-link',
+    );
+    const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    const keyboardEvent = new KeyboardEvent('keydown', {key: ' ', cancelable: true});
+    const preventDefaultSpy = vi.spyOn(keyboardEvent, 'preventDefault');
+
+    link.dispatchEvent(keyboardEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalledOnce();
+    expect(windowOpenSpy).toHaveBeenCalledWith(
+      component.googleCalendarUrl,
+      '_blank',
+      'noopener,noreferrer',
+    );
+  });
+
+  it('does not call window.open for a keydown that is not Space', () => {
+    // The handler now receives every keydown on the link, not just Space, since the
+    // template binding is plain (keydown) rather than Angular's (keydown.space)
+    // modifier. This proves the handler's own key check actually filters, it is not
+    // relying on Angular to only call it for the space key.
+    const dueDate = new Date(2026, 8, 15, 23, 59, 59, 999);
+    const task = buildTask({dueDate});
+    component.task = task;
+    component.taskDef = task.definition;
+    component.unit = task.unit;
+    fixture.detectChanges();
+
+    const link: HTMLAnchorElement = fixture.nativeElement.querySelector(
+      'a.add-to-google-calendar-link',
+    );
+    const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+
+    link.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', cancelable: true}));
+
+    expect(windowOpenSpy).not.toHaveBeenCalled();
+  });
+
+  it('does not call window.open on Space when there is no resolvable due date', () => {
+    // Defensive coverage for handleCalendarLinkKeydown's own null guard. The anchor
+    // only renders inside @if (googleCalendarUrl), so this branch is unreachable through
+    // the DOM, called directly here rather than left untested.
+    const task = buildTask({dueDate: undefined});
+    component.task = task;
+
+    const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    const keyboardEvent = new KeyboardEvent('keydown', {key: ' ', cancelable: true});
+
+    component.handleCalendarLinkKeydown(keyboardEvent);
+
+    expect(windowOpenSpy).not.toHaveBeenCalled();
+  });
+});
+
+// The template guards the feedback deadline line on feedbackDate() and
+// emphasises it with shouldShowDeadline(). Rendering the real template in a
+// unit test is avoided here for the same reason the header spec blanks its
+// own: the template calls a migration-shim global and pulls in DI-heavy
+// children, and standing that up pollutes the shared vitest worker. Build a
+// bare instance instead so the delegation those bindings rely on is locked in.
+function bareCard(): TaskDescriptionCardComponent {
+  return Object.create(TaskDescriptionCardComponent.prototype) as TaskDescriptionCardComponent;
+}
+
+describe('TaskDescriptionCardComponent feedback deadline (SXP-05)', () => {
+  const deadline = new Date('2026-09-01T00:00:00Z');
+
+  it('feedbackDate reads the task deadline when a task is present', () => {
+    const component = bareCard();
+    component.task = {localDeadlineDate: () => deadline} as unknown as Task;
+
+    expect(component.feedbackDate()).toBe(deadline);
+  });
+
+  it('feedbackDate falls back to the task definition deadline with no task', () => {
+    const component = bareCard();
+    component.task = undefined;
+    component.taskDef = {localDeadlineDate: () => deadline} as unknown as TaskDefinition;
+
+    expect(component.feedbackDate()).toBe(deadline);
+  });
+
+  it('feedbackDate is undefined when neither carries a deadline', () => {
+    const component = bareCard();
+    component.task = undefined;
+    component.taskDef = undefined;
+
+    expect(component.feedbackDate()).toBeUndefined();
+  });
+
+  it('shouldShowDeadline is true only within 14 days of the deadline', () => {
+    const near = bareCard();
+    near.task = {daysUntilDeadlineDate: () => 10} as unknown as Task;
+    expect(near.shouldShowDeadline()).toBe(true);
+
+    const far = bareCard();
+    far.task = {daysUntilDeadlineDate: () => 21} as unknown as Task;
+    expect(far.shouldShowDeadline()).toBe(false);
+  });
+
+  it('shouldShowDeadline is falsy with no task', () => {
+    const component = bareCard();
+    component.task = undefined;
+
+    expect(component.shouldShowDeadline()).toBeFalsy();
+  });
+});
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.ts
index cf88db9f7b..95e9ac41d6 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component.ts
@@ -1,20 +1,94 @@
-import {Component, Input, Inject} from '@angular/core';
-
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  Output,
+} from '@angular/core';
 import {Task, TaskDefinition, Unit} from 'src/app/api/models/doubtfire-model';
+import {WebCalEvent, buildCalendarEvent} from 'src/app/api/services/calendar-event-builder';
 import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
 import {GradeService} from 'src/app/common/services/grade.service';
 
+function formatGoogleCalendarDate(civilDate: string): string {
+  return civilDate.replaceAll('-', '');
+}
+
+function isLeapYear(year: number): boolean {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+}
+
+function daysInMonth(year: number, month: number): number {
+  const daysByMonth = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  return daysByMonth[month - 1];
+}
+
+/**
+ * Adds one day to a 'YYYY-MM-DD' civil date using plain integer arithmetic, with no Date
+ * object and no timezone involved anywhere. A civil date has no time-of-day, so it needs
+ * no DST awareness, this sidesteps the DST bug entirely rather than working around it.
+ * MappingFunctions.addDays previously did this step by adding a fixed 86,400,000 ms to a
+ * Date instant, which lands on the wrong calendar day across a DST transition, confirmed
+ * for a task due the day before Melbourne's October transition, see the spec for CAL-F01.
+ */
+function addOneCivilDay(civilDate: string): string {
+  let [year, month, day] = civilDate.split('-').map(Number);
+
+  day += 1;
+  if (day > daysInMonth(year, month)) {
+    day = 1;
+    month += 1;
+    if (month > 12) {
+      month = 1;
+      year += 1;
+    }
+  }
+
+  return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+}
+
+/**
+ * Builds a Google Calendar "add event" link from a calendar event snapshot. The dates
+ * range end is exclusive, one day after the event's date, since that is what Google's
+ * all-day date range expects. This is a different convention to webcal.rb's ICS output,
+ * which sets DTEND == DTSTART for the same single day, see calendar-event-builder.ts for
+ * why those two conventions cannot share one date pair. formatGoogleCalendarDate is
+ * calibrated for this URL only, CAL-F02's ICS output must not reuse it.
+ */
+function buildGoogleCalendarUrl(event: WebCalEvent): string {
+  const start = formatGoogleCalendarDate(event.date);
+  const end = formatGoogleCalendarDate(addOneCivilDay(event.date));
+
+  const params = [
+    ['action', 'TEMPLATE'],
+    ['text', event.title],
+    ['dates', `${start}/${end}`],
+  ]
+    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+    .join('&');
+
+  return `https://calendar.google.com/calendar/render?${params}`;
+}
+
 @Component({
   selector: 'f-task-description-card',
   templateUrl: 'task-description-card.component.html',
   styleUrls: ['task-description-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDescriptionCardComponent {
+  @Output() switchView$: EventEmitter<string> = new EventEmitter();
+
   @Input() task: Task;
   @Input() taskDef: TaskDefinition;
   @Input() unit: Unit;
 
-  public grades: {names: any; acronyms: any};
+  public grades: {
+    names: GradeService['grades'];
+    acronyms: GradeService['gradeAcronyms'];
+  };
 
   constructor(
     private GradeService: GradeService,
@@ -33,6 +107,10 @@ export class TaskDescriptionCardComponent {
     );
   }
 
+  public viewTaskSheet() {
+    this.switchView$.emit('task');
+  }
+
   public downloadResources() {
     this.fileDownloader.downloadFile(
       this.taskDef.getTaskResourcesUrl(true),
@@ -41,16 +119,75 @@ export class TaskDescriptionCardComponent {
   }
 
   public dueDate(): Date {
-    if (this.task) return this.task.localDueDate();
-    else if (this.taskDef) return this.taskDef.targetDate;
-    else return undefined;
+    if (this.task) {
+      return this.task.localDueDate();
+    } else if (this.taskDef) {
+      return this.taskDef.targetDate;
+    } else {
+      return undefined;
+    }
   }
 
   public startDate(): Date {
-    return this.taskDef?.startDate;
+    return this.task?.startDate ?? this.taskDef?.startDate;
+  }
+
+  public feedbackDate(): Date {
+    // A task with no resolvable deadline (no project, or a definition with no due
+    // date) makes localDeadlineDate throw rather than return nothing. The template
+    // guards this line with @if (feedbackDate()), so keep it absent instead.
+    try {
+      if (this.task) {
+        return this.task.localDeadlineDate();
+      }
+      return this.taskDef?.localDeadlineDate();
+    } catch {
+      return undefined;
+    }
   }
 
   public shouldShowDeadline(): boolean {
     return this.task && this.task.daysUntilDeadlineDate() <= 14;
   }
+
+  /**
+   * Google Calendar's TEMPLATE link has no identifier parameter, so this always opens a
+   * fresh "add event" dialog rather than updating an existing calendar entry. The date is
+   * a snapshot of the due date at click time and will not track later changes. That is
+   * inherent to this mechanism, not a defect.
+   *
+   * Task entities are updated in place when planned dates or extensions change, so this
+   * derives the URL from the current task state instead of caching it by object identity.
+   * The template aliases this getter in its @if block, so it is evaluated only once per
+   * change detection pass for both visibility and href.
+   */
+  public get googleCalendarUrl(): string | null {
+    if (!this.task) {
+      return null;
+    }
+
+    const event = buildCalendarEvent(this.task);
+    return event ? buildGoogleCalendarUrl(event) : null;
+  }
+
+  /**
+   * An <a> responds natively to Enter but not Space. Binds plain (keydown) rather than
+   * Angular's (keydown.space) modifier syntax, since the template type checker cannot
+   * infer KeyboardEvent through that modifier and falls back to the plain Event type,
+   * this way the parameter is genuinely typed as KeyboardEvent with no cast needed.
+   * Navigates directly with window.open rather than simulating a click on the anchor,
+   * since googleCalendarUrl is already a typed string here, no DOM element reference or
+   * type narrowing is needed to use it. The noopener,noreferrer window features match
+   * the anchor's own rel attribute.
+   */
+  public handleCalendarLinkKeydown(event: KeyboardEvent): void {
+    if (event.key !== ' ') {
+      return;
+    }
+
+    event.preventDefault();
+    if (this.googleCalendarUrl) {
+      window.open(this.googleCalendarUrl, '_blank', 'noopener,noreferrer');
+    }
+  }
 }
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.html
index 52b9a12b4b..0e308f0ffa 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.html
@@ -1,99 +1,168 @@
-@if ( (!task?.inFinalState() || (task?.inTimeExceeded() && !task?.isPastDeadline())) && !task?.inAwaitingFeedbackState()
+@if (
+  (!task?.inFinalState() || (task?.inTimeExceeded() && !task?.isPastDeadline())) &&
+  !task?.inAwaitingFeedbackState()
 ) {
-<div>
-  <!--Only show this if it matters... not in final or waiting for tutor input-->
-  @if (task?.isDueSoon() && !task?.isPastDueDate()) {
-  <mat-card appearance="outlined">
-    <!--Due soon-->
-    <mat-card-header>
-      <mat-card-title>Aim To Complete Soon - Due in {{ task?.timeUntilDueDateDescription() }}</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-      <!--Due and not in discuss-->
-      <p [hidden]="task?.inDiscussState()">
-        This task's due date is <strong>{{ task?.localDueDateString() }}</strong
-        >. You should aim to complete this task before then to keep your progress on track.
-      </p>
-    </mat-card-content>
-    <mat-card-content [hidden]="!task?.inDiscussState()">
-      <!--Due but in discuss-->
-      <p>
-        This task's due date is <strong>{{ task?.localDueDateString() }}</strong
-        >. Make sure to discuss this task with your tutor as soon as possible.
-      </p>
-      <p class="mat-caption">
-        Tasks are only considered <strong>Completed</strong> once your tutor has <strong>Discussed</strong> your work
-        with you.
-      </p>
-    </mat-card-content>
-  </mat-card>
-  }
+  <div>
+    <!--Only show this if it matters... not in final or waiting for tutor input-->
+    @if (task?.isDueSoon() && !task?.isPastDueDate()) {
+      <mat-card appearance="outlined">
+        <!--Due soon-->
+        <mat-card-header>
+          <mat-card-title
+            >Aim To Complete Soon - Due in {{ task?.timeUntilDueDateDescription() }}</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content>
+          <!--Due and not in discuss-->
+          @if (flexibleDatesEnabled) {
+            <p [hidden]="$safeNavigationMigration(task?.inDiscussState())">
+              Your target due date for this task is
+              <strong>{{ task?.localDueDateString() }}</strong
+              >. You should aim to complete this task before then to keep your progress on track.
+            </p>
+          } @else {
+            <p [hidden]="$safeNavigationMigration(task?.inDiscussState())">
+              This task's due date is <strong>{{ task?.localDueDateString() }}</strong
+              >. You should aim to complete this task before then to keep your progress on track.
+            </p>
+          }
+        </mat-card-content>
+        <mat-card-content [hidden]="!task?.inDiscussState()">
+          <!--Due but in discuss-->
+          @if (flexibleDatesEnabled) {
+            <p>
+              This target due date for this task is <strong>{{ task?.localDueDateString() }}</strong
+              >. Make sure to discuss this task with your tutor as soon as possible.
+            </p>
+            <p class="mat-caption">
+              Tasks are only considered <strong>Completed</strong> once your tutor has
+              <strong>Discussed</strong> your work with you.
+            </p>
+          } @else {
+            <p>
+              This task's due date is <strong>{{ task?.localDueDateString() }}</strong
+              >. Make sure to discuss this task with your tutor as soon as possible.
+            </p>
+            <p class="mat-caption">
+              Tasks are only considered <strong>Completed</strong> once your tutor has
+              <strong>Discussed</strong> your work with you.
+            </p>
+          }
+        </mat-card-content>
+      </mat-card>
+    }
 
-  <!--/is due soon-->
-  @if (task?.betweenDueDateAndDeadlineDate()) {
-  <mat-card appearance="outlined">
-    <mat-card-header class="bg-yellow-600 text-white">
-      <mat-card-title class="flex items-center mb-4"
-        ><mat-icon>warning</mat-icon>
-        <span class="ml-4">Past Due Date By {{ task?.timePastDueDateDescription() }}</span></mat-card-title
-      >
-    </mat-card-header>
+    <!--/is due soon-->
+    @if (task?.betweenDueDateAndDeadlineDate()) {
+      <mat-card appearance="outlined">
+        <mat-card-header class="bg-yellow-600 text-white">
+          <mat-card-title class="mb-2.5 flex items-center"
+            ><mat-icon>warning</mat-icon>
+            @if (flexibleDatesEnabled) {
+              <span class="ml-2.5"
+                >Past Target Date By {{ task?.timePastDueDateDescription() }}</span
+              >
+            } @else {
+              <span class="ml-2.5">Past Due Date By {{ task?.timePastDueDateDescription() }}</span>
+            }
+          </mat-card-title>
+        </mat-card-header>
 
-    <mat-card-content class="bg-yellow-50" [hidden]="task?.inDiscussState()">
-      <!--Not in submitted state and overdue-->
-      <p class="mt-2">
-        You should have completed this task by <strong>{{ task?.localDueDateString() }}</strong
-        >. Try and finish it as soon as possible to avoid falling behind. You will need to request an extension in order
-        to have this task checked and marked as complete by your tutor.
-      </p>
-    </mat-card-content>
-    <mat-card-content [hidden]="!task?.inDiscussState()">
-      <!--Not discussed-->
-      <p>
-        You should have completed this task by <strong>{{ task?.localDueDateString() }}</strong
-        >. Make sure to discuss this task with your tutor as soon as possible. If this task remains on this state for an
-        extended period, it will be marked as Time Exceeded.
-      </p>
-      <p class="mat-caption">
-        Tasks are only considered <strong>completed</strong> once your tutor has <strong>discussed</strong> your work
-        with you.
-      </p>
-    </mat-card-content>
-  </mat-card>
-  }
+        <mat-card-content
+          class="bg-yellow-50"
+          [hidden]="$safeNavigationMigration(task?.inDiscussState())"
+        >
+          <!--Not in submitted state and overdue-->
+          @if (flexibleDatesEnabled) {
+            <p class="mt-1 p-1">
+              You should have submitted this task by
+              <strong>{{ task?.localDueDateString() }}</strong> to keep your progress on track. Try
+              to finish it as soon as possible to avoid delays. You can revise your project plan
+              dates, but ensure you submit before the deadline to receive feedback.
+            </p>
+          } @else {
+            <p class="mt-1 p-1">
+              You should have completed this task by
+              <strong>{{ task?.localDueDateString() }}</strong
+              >. Try and finish it as soon as possible to avoid falling behind. You will need to
+              request an extension in order to have this task checked and marked as complete by your
+              tutor.
+            </p>
+          }
+        </mat-card-content>
+        <mat-card-content [hidden]="!task?.inDiscussState()">
+          <!--Not discussed-->
+          @if (flexibleDatesEnabled) {
+            <p>
+              You should have completed this task by
+              <strong>{{ task?.localDueDateString() }}</strong
+              >. Make sure to discuss this task with your tutor as soon as possible.
+            </p>
+            <p class="mat-caption">
+              Tasks are only considered <strong>completed</strong> once your tutor has
+              <strong>discussed</strong> your work with you.
+            </p>
+          } @else {
+            <p>
+              You should have completed this task by
+              <strong>{{ task?.localDueDateString() }}</strong
+              >. Make sure to discuss this task with your tutor as soon as possible.
+            </p>
+            <p class="mat-caption">
+              Tasks are only considered <strong>completed</strong> once your tutor has
+              <strong>discussed</strong> your work with you.
+            </p>
+          }
+        </mat-card-content>
+      </mat-card>
+    }
 
-  <!--/between due date and deadline-->
-  @if (task?.isPastDeadline()) {
-  <mat-card appearance="outlined">
-    <mat-card-header class="bg-red-600 text-white">
-      <mat-card-title class="flex items-center mb-4"
-        ><mat-icon>error</mat-icon>
-        <span class="ml-4">Passed Due Date By {{ task?.timePastDueDateDescription() }}</span></mat-card-title
-      >
-    </mat-card-header>
-    <mat-card-content class="bg-red-50" [hidden]="task?.inDiscussState()">
-      <!--Past deadline and not submitted-->
-      <p class="p-2">
-        You should have completed this task by <strong>{{ task?.localDueDateString() }}</strong
-        >. This task is now past the deadline and will be marked as <em>Time Exceeded</em> when submitted. You should
-        consult with the unit assessment details to determine the impact of failing to complete this task within the
-        allocated time.
-      </p>
-    </mat-card-content>
-    <mat-card-content [hidden]="!task?.inDiscussState()">
-      <!--Past deadline but in discuss or awaiting feedback-->
-      <p>
-        You should have completed this task by <strong>{{ task?.localDueDateString() }}</strong
-        >. Make sure to discuss this task with your tutor as soon as possible.
-      </p>
-      <p class="mat-caption">
-        Tasks are only considered <strong>Completed</strong> once it demonstrates the required standard, and it is
-        <strong>discussed</strong> with your tutor.
-      </p>
-    </mat-card-content>
-  </mat-card>
-  }
-</div>
+    <!--/between due date and deadline-->
+    @if (task?.isPastDeadline()) {
+      <mat-card appearance="outlined">
+        <mat-card-header class="bg-red-600 text-white">
+          <mat-card-title class="mb-2.5 flex items-center"
+            ><mat-icon>error</mat-icon>
+            <span class="ml-2.5"
+              >Passed Due Date By {{ task?.timePastDueDateDescription() }}</span
+            ></mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content
+          class="bg-red-50"
+          [hidden]="$safeNavigationMigration(task?.inDiscussState())"
+        >
+          <!--Past deadline and not submitted-->
+          <p class="p-1">
+            @if (task?.definition?.unit.markLateSubmissionsAsAssessInPortfolio) {
+              You should have completed this task by
+              <strong>{{ task?.localDueDateString() }}</strong
+              >. This task is now past the deadline and can only be submitted directly for your
+              portfolio without feedback.
+            } @else {
+              You should have completed this task by
+              <strong>{{ task?.localDueDateString() }}</strong
+              >. This task is now past the deadline and will be marked as
+              <em>Time Exceeded</em> when submitted. You should consult with the unit assessment
+              details to determine the impact of failing to complete this task within the allocated
+              time.
+            }
+          </p>
+        </mat-card-content>
+        <mat-card-content [hidden]="!task?.inDiscussState()">
+          <!--Past deadline but in discuss or awaiting feedback-->
+          <p>
+            You should have completed this task by <strong>{{ task?.localDueDateString() }}</strong
+            >. Make sure to discuss this task with your tutor as soon as possible.
+          </p>
+          <p class="mat-caption">
+            Tasks are only considered <strong>Completed</strong> once it demonstrates the required
+            standard, and it is <strong>discussed</strong> with your tutor.
+          </p>
+        </mat-card-content>
+      </mat-card>
+    }
+  </div>
 }
 <!--/past deadline-->
 
@@ -105,7 +174,8 @@
     <p>
       You have submitted this task and should now wait for feedback from your tutor.
       <span [hidden]="!task?.isPastDeadline()"
-        >Do not re-upload new files at this time as the status will be changed to <strong>Time Exceeded</strong>.</span
+        >Do not re-upload new files at this time as the status will be changed to
+        <strong>Time Exceeded</strong>.</span
       >
     </p>
   </mat-card-content>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.spec.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.spec.ts
index bd5706f423..ea4330e5de 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.spec.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.spec.ts
@@ -1,6 +1,7 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TaskDueCardComponent } from './task-due-card.component';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TaskDueCardComponent} from './task-due-card.component';
 
 describe('TaskDueCardComponent', () => {
   let component: TaskDueCardComponent;
@@ -8,13 +9,16 @@ describe('TaskDueCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TaskDueCardComponent ]
+      declarations: [TaskDueCardComponent],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(TaskDueCardComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(TaskDueCardComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.ts
index b6886013d0..4cba264c1b 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.component.ts
@@ -1,14 +1,17 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Task } from 'src/app/api/models/task';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Task} from 'src/app/api/models/task';
 
 @Component({
   selector: 'f-task-due-card',
   templateUrl: './task-due-card.component.html',
   styleUrls: ['./task-due-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class TaskDueCardComponent implements OnInit {
+export class TaskDueCardComponent {
   @Input() task: Task;
-  constructor() {}
 
-  ngOnInit(): void {}
+  public get flexibleDatesEnabled(): boolean {
+    return this.task?.unit?.allowFlexibleDates;
+  }
 }
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.tpl.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.tpl.html
index 6f14f303b2..a4ea4b1999 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.tpl.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-due-card/task-due-card.tpl.html
@@ -1,39 +1,47 @@
-<div ng-if="(!task.inFinalState() || (task.inTimeExceeded() && !task.isPastDeadline())) && !task.inAwaitingFeedbackState()"> <!--Only show this if it matters... not in final or waiting for tutor input-->
-  <div ng-if="task.isDueSoon() && !task.pastDueDate()"> <!--Due soon-->
+<div
+  ng-if="(!task.inFinalState() || (task.inTimeExceeded() && !task.isPastDeadline())) && !task.inAwaitingFeedbackState()"
+>
+  <!--Only show this if it matters... not in final or waiting for tutor input-->
+  <div ng-if="task.isDueSoon() && !task.pastDueDate()">
+    <!--Due soon-->
     <div class="card card-warning card-sm">
       <div class="card-heading">
         <h4>Aim To Complete Soon - Due in {{task.timeUntilDueDateDescription()}}</h4>
       </div>
-      <div class="card-body" ng-hide="task.inDiscussState()"> <!--Due and not in discuss-->
+      <div class="card-body" ng-hide="task.inDiscussState()">
+        <!--Due and not in discuss-->
         <p>
-          This task's due date is <strong>{{task.localDueDateString()}}</strong>.
-          You should aim to complete this task before then to keep your progress on track.
+          This task's due date is <strong>{{task.localDueDateString()}}</strong>. You should aim to
+          complete this task before then to keep your progress on track.
         </p>
       </div>
-      <div class="card-body" ng-show="task.inDiscussState()"> <!--Due but in discuss-->
+      <div class="card-body" ng-show="task.inDiscussState()">
+        <!--Due but in discuss-->
         <p>
-          This task's due date is <strong>{{task.localDueDateString()}}</strong>.
-          Make sure to discuss this task with your tutor as soon as possible.
+          This task's due date is <strong>{{task.localDueDateString()}}</strong>. Make sure to
+          discuss this task with your tutor as soon as possible.
         </p>
         <p class="text-muted">
-          Tasks are only considered <strong>Completed</strong> once your tutor has <strong>Discussed</strong> your work
-          with you.
+          Tasks are only considered <strong>Completed</strong> once your tutor has
+          <strong>Discussed</strong> your work with you.
         </p>
       </div>
     </div>
-  </div> <!--/is due soon-->
+  </div>
+  <!--/is due soon-->
   <div ng-if="task.betweenDueDateAndDeadlineDate()">
     <div class="card card-danger card-sm">
       <div class="card-heading">
         <h4>Past Due Date By {{task.timePastDueDateDescription()}}</h4>
       </div>
-      <div class="card-body" ng-hide="task.inDiscussState()"> <!--Not in submitted state and overdue-->
+      <div class="card-body" ng-hide="task.inDiscussState()">
+        <!--Not in submitted state and overdue-->
         <p>
-          You should have completed this task by <strong>{{task.localDueDateString()}}</strong>.
-          Try and finish it as soon as possible to avoid falling behind. As you will submit this
-          task after the deadline for feedback, it will not be reviewed by a tutor and it is now
-          your sole responsibility to ensure that this submission meets the required standard.
-          The task will be assessed as part of the portfolio.
+          You should have completed this task by <strong>{{task.localDueDateString()}}</strong>. Try
+          and finish it as soon as possible to avoid falling behind. As you will submit this task
+          after the deadline for feedback, it will not be reviewed by a tutor and it is now your
+          sole responsibility to ensure that this submission meets the required standard. The task
+          will be assessed as part of the portfolio.
         </p>
         <p>
           Aim to submit future tasks before the deadline to make good use of the opportunity to
@@ -41,11 +49,12 @@ <h4>Past Due Date By {{task.timePastDueDateDescription()}}</h4>
           submission meets all the requirements.
         </p>
       </div>
-      <div class="card-body" ng-show="task.inDiscussState()"> <!--Not discussed-->
+      <div class="card-body" ng-show="task.inDiscussState()">
+        <!--Not discussed-->
         <p>
           You should have completed this task by <strong>{{task.localDueDateString()}}</strong>.
-          Make sure to discuss this task with your tutor as soon as possible. If this task remains on
-          this state for an extended period, it will be marked as Time Exceeded.
+          Make sure to discuss this task with your tutor as soon as possible. If this task remains
+          on this state for an extended period, it will be marked as Time Exceeded.
         </p>
         <p class="text-muted">
           Tasks are only considered <strong>completed</strong> once your tutor has
@@ -53,33 +62,37 @@ <h4>Past Due Date By {{task.timePastDueDateDescription()}}</h4>
         </p>
       </div>
     </div>
-  </div> <!--/between due date and deadline-->
+  </div>
+  <!--/between due date and deadline-->
   <div ng-if="task.isPastDeadline()">
     <div class="card card-danger card-sm">
       <div class="card-heading">
         <h4>Passed Due Date By {{task.timePastDueDateDescription()}}</h4>
       </div>
-      <div class="card-body" ng-hide="task.inDiscussState()"> <!--Past deadline and not submitted-->
+      <div class="card-body" ng-hide="task.inDiscussState()">
+        <!--Past deadline and not submitted-->
         <p>
           You should have completed this task by <strong>{{task.localDueDateString()}}</strong>.
-          This task is now past the deadline and will be marked as <em>Time Exceeded</em> when submitted. You should
-          consult with the unit assessment details to determine the impact of failing to complete this task within
-          the allocated time.
+          This task is now past the deadline and will be marked as <em>Time Exceeded</em> when
+          submitted. You should consult with the unit assessment details to determine the impact of
+          failing to complete this task within the allocated time.
         </p>
       </div>
-      <div class="card-body" ng-show="task.inDiscussState()"> <!--Past deadline but in discuss or awaiting feedback-->
+      <div class="card-body" ng-show="task.inDiscussState()">
+        <!--Past deadline but in discuss or awaiting feedback-->
         <p>
           You should have completed this task by <strong>{{task.localDueDateString()}}</strong>.
           Make sure to discuss this task with your tutor as soon as possible.
         </p>
         <p class="text-muted">
-          Tasks are only considered <strong>Completed</strong> once it demonstrates the required standard, and it is
-          <strong>discussed</strong> with your tutor.
+          Tasks are only considered <strong>Completed</strong> once it demonstrates the required
+          standard, and it is <strong>discussed</strong> with your tutor.
         </p>
       </div>
     </div>
   </div>
-</div> <!--/past deadline-->
+</div>
+<!--/past deadline-->
 <div class="card card-info card-sm" ng-show="task.inAwaitingFeedbackState()">
   <div class="card-heading">
     <h4>Wait for Tutor Feedback</h4>
@@ -87,8 +100,10 @@ <h4>Wait for Tutor Feedback</h4>
   <div class="card-body">
     <p>
       You have submitted this task and should now wait for feedback from your tutor.
-      <span ng-show="task.isPastDeadline()">Do not re-upload new files at this time as the status will be changed to
-        <strong>Time Exceeded</strong>.</span>
+      <span ng-show="task.isPastDeadline()"
+        >Do not re-upload new files at this time as the status will be changed to
+        <strong>Time Exceeded</strong>.</span
+      >
     </p>
   </div>
 </div>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.html
new file mode 100644
index 0000000000..596c316bd1
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.html
@@ -0,0 +1,28 @@
+@if (learningOutcomes.length) {
+  <mat-card appearance="outlined" class="p-[16px]">
+    <mat-card-title class="f-card-title"
+      >{{ getIloContextLabel() }} Learning Outcomes</mat-card-title
+    >
+    <mat-card-subtitle class="mb-2.5"
+      >These outcomes describe the key skills and knowledge you are aiming to achieve by completing
+      this {{ getIloContextLabel().toLowerCase() }}.</mat-card-subtitle
+    >
+    <table class="overflow-hidden rounded-lg">
+      <tbody>
+        @for (ilo of learningOutcomes; track ilo) {
+          <tr class="border-b border-gray-200 odd:bg-gray-100 even:bg-white">
+            <td class="px-3.5 py-2.5 text-black uppercase">{{ ilo.abbreviation }}</td>
+            <td class="px-3.5 py-2.5 text-gray-500">{{ ilo.fullOutcomeDescription }}</td>
+            <td class="flex justify-end px-3.5 py-2.5 text-gray-500">
+              @for (outcome of getLinkedOutcomes(ilo); track outcome.abbreviation) {
+                <mat-chip-row class="m-0.5" matTooltip="{{ outcome.shortDescription }}">{{
+                  outcome.abbreviation
+                }}</mat-chip-row>
+              }
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </mat-card>
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.ts
new file mode 100644
index 0000000000..033e5d5b6a
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-ilos-card/task-ilos-card.component.ts
@@ -0,0 +1,81 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {LearningOutcome} from 'src/app/api/models/learning-outcome';
+import {Project} from 'src/app/api/models/project';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+
+@Component({
+  selector: 'f-task-ilos-card',
+  templateUrl: './task-ilos-card.component.html',
+  styleUrls: ['./task-ilos-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskIlosCardComponent implements OnInit, OnChanges {
+  @Input() iloContextType: 'Unit' | 'TaskDefinition' | 'Course' | 'Global';
+  @Input() unit: Unit | undefined;
+  @Input() taskDef: TaskDefinition | undefined;
+  @Input() project: Project;
+
+  allOutcomesCache: LearningOutcome[] = []; // Track linked outcomes
+  learningOutcomes: LearningOutcome[] = [];
+
+  public ngOnChanges(_changes: SimpleChanges) {
+    this.getIlos();
+  }
+
+  public ngOnInit(): void {
+    this.getIlos();
+  }
+
+  private getIlos() {
+    this.learningOutcomes = [];
+
+    if (this.iloContextType === 'Unit' && this.unit) {
+      this.addIlosToCache(this.unit.ilos as LearningOutcome[]);
+      this.learningOutcomes.push(...this.unit.ilos);
+    } else if (this.iloContextType === 'TaskDefinition' && this.taskDef) {
+      this.addIlosToCache(this.taskDef.unit.ilos as LearningOutcome[]);
+      this.taskDef.learningOutcomesCache.values.subscribe((ilos) => {
+        this.learningOutcomes.push(...ilos);
+        this.addIlosToCache(ilos);
+      });
+    }
+
+    // TODO: implement Course and Global learning outcomes when available
+  }
+
+  private addIlosToCache(outcomes: LearningOutcome[]): void {
+    for (const ilo of outcomes) {
+      if (!this.allOutcomesCache.find((existing) => existing.id === ilo.id)) {
+        this.allOutcomesCache.push(ilo);
+      }
+    }
+  }
+
+  getLinkedOutcomes(ilo: LearningOutcome): LearningOutcome[] {
+    return this.allOutcomesCache.filter((outcome) => ilo.linkedOutcomeIds.includes(outcome.id));
+  }
+
+  public getIloContextLabel(): string {
+    switch (this.iloContextType) {
+      case 'TaskDefinition':
+        return 'Task';
+      case 'Unit':
+        return 'Unit';
+      case 'Course':
+        return 'Course';
+      case 'Global':
+        return 'Global';
+      default:
+        return 'N/A';
+    }
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.html
new file mode 100644
index 0000000000..597a3efaab
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.html
@@ -0,0 +1,208 @@
+<div class="flex justify-between p-6">
+  <div class="min-w-0">
+    <h3 class="mb-0">
+      @if (compareMode) {
+        Compare Submission Files
+      } @else {
+        Submission Files
+      }
+    </h3>
+    <div class="truncate text-slate-600">
+      {{ data.assessment.task.definition.abbreviation }}
+      {{ data.assessment.task.definition.name }} ({{
+        data.assessment.task.project.student.displayName
+      }})
+    </div>
+  </div>
+
+  <button color="warn" mat-dialog-close mat-stroked-button>Close</button>
+</div>
+
+<div class="flex min-h-0 flex-1 overflow-hidden p-6">
+  @if (isLoading) {
+    <div class="flex size-full min-h-[300px] items-center justify-center">
+      <mat-spinner [diameter]="56"></mat-spinner>
+    </div>
+  } @else if (errorMessage) {
+    <div class="flex size-full min-h-[300px] items-center justify-center text-xs text-red-700">
+      {{ errorMessage }}
+    </div>
+  } @else if (compareMode) {
+    @if (archiveBlob && comparedArchiveBlob) {
+      <div class="flex size-full min-h-0 flex-col gap-2.5">
+        <div class="grid min-h-0 w-full grid-cols-1 gap-2.5 lg:grid-cols-2">
+          <div class="flex min-h-0 flex-col overflow-hidden rounded">
+            <ng-container
+              [ngTemplateOutlet]="submissionHeading"
+              [ngTemplateOutletContext]="{
+                number: data.assessmentNumber,
+                isMostRecent: data.assessmentIsMostRecent,
+                timestamp: data.assessment.timestamp,
+              }"
+            ></ng-container>
+            <f-archive-viewer
+              class="block size-full min-h-0 overflow-hidden"
+              [archiveFile]="archiveBlob"
+              [preloadSelectedFile]="true"
+              [readOnly]="true"
+              [showPreview]="false"
+              [uploadRequirementNames]="uploadRequirementNames"
+              (filesLoaded)="onPrimaryFilesLoaded()"
+              (selectedFileChanged)="onPrimarySelectionChange($event)"
+            ></f-archive-viewer>
+          </div>
+
+          <div class="flex min-h-0 flex-col overflow-hidden rounded">
+            <ng-container
+              [ngTemplateOutlet]="submissionHeading"
+              [ngTemplateOutletContext]="{
+                number: data.comparedWithNumber,
+                isMostRecent: data.comparedWithIsMostRecent,
+                timestamp: $safeNavigationMigration(data.comparedWith?.timestamp),
+              }"
+            ></ng-container>
+            @if (primaryArchiveParsed) {
+              <f-archive-viewer
+                class="block size-full min-h-0 overflow-hidden"
+                [archiveFile]="comparedArchiveBlob"
+                [preloadSelectedFile]="true"
+                [readOnly]="true"
+                [showPreview]="false"
+                [uploadRequirementNames]="uploadRequirementNames"
+                (filesLoaded)="onComparedFilesLoaded()"
+                (selectedFileChanged)="onComparedSelectionChange($event)"
+              ></f-archive-viewer>
+            } @else {
+              <div class="flex h-full min-h-[240px] items-center justify-center text-slate-500">
+                Loading archive...
+              </div>
+            }
+          </div>
+        </div>
+
+        <div class="flex min-h-0 flex-1 overflow-hidden rounded">
+          @if (!bothSelectionsReady) {
+            <div class="flex size-full items-center justify-center px-2.5 text-xs text-slate-500">
+              Select a file in both submissions to compare.
+            </div>
+          } @else if (canShowDiffEditor) {
+            <div class="flex size-full min-h-0 flex-col">
+              <div class="grid w-full grid-cols-1 gap-2.5 px-2 py-1 text-slate-500 lg:grid-cols-2">
+                <div class="min-w-0 truncate overflow-hidden whitespace-nowrap">
+                  {{ primarySelectedFile?.path ?? primarySelectedFile?.name }}
+                </div>
+                <div class="min-w-0 truncate overflow-hidden whitespace-nowrap">
+                  {{ comparedSelectedFile?.path ?? comparedSelectedFile?.name }}
+                </div>
+              </div>
+              <ngx-monaco-diff-editor
+                class="block size-full flex-1"
+                [modifiedModel]="diffModifiedModel"
+                [options]="diffEditorOptions"
+                [originalModel]="diffOriginalModel"
+              ></ngx-monaco-diff-editor>
+            </div>
+          } @else {
+            <div class="grid size-full grid-cols-1 gap-2.5 p-2.5 lg:grid-cols-2">
+              <ng-container
+                [ngTemplateOutlet]="selectedFilePreviewPane"
+                [ngTemplateOutletContext]="{
+                  file: primarySelectedFile,
+                  editorOptions: primarySingleEditorOptions,
+                }"
+              ></ng-container>
+              <ng-container
+                [ngTemplateOutlet]="selectedFilePreviewPane"
+                [ngTemplateOutletContext]="{
+                  file: comparedSelectedFile,
+                  editorOptions: comparedSingleEditorOptions,
+                }"
+              ></ng-container>
+            </div>
+          }
+        </div>
+      </div>
+    } @else {
+      <div class="flex size-full min-h-[300px] items-center justify-center text-xs text-slate-500">
+        Unable to load one or both submission archives.
+      </div>
+    }
+  } @else if (archiveBlob) {
+    <div class="flex size-full min-h-0 flex-col overflow-hidden rounded">
+      <ng-container
+        [ngTemplateOutlet]="submissionHeading"
+        [ngTemplateOutletContext]="{
+          number: data.assessmentNumber,
+          isMostRecent: data.assessmentIsMostRecent,
+          timestamp: data.assessment.timestamp,
+        }"
+      ></ng-container>
+      <f-archive-viewer
+        class="block size-full min-h-0 overflow-hidden"
+        [archiveFile]="archiveBlob"
+        [readOnly]="true"
+        [uploadRequirementNames]="uploadRequirementNames"
+      ></f-archive-viewer>
+    </div>
+  } @else {
+    <div class="flex size-full min-h-[300px] items-center justify-center text-xs text-slate-500">
+      Unable to load submission files.
+    </div>
+  }
+</div>
+
+<ng-template
+  #submissionHeading
+  let-isMostRecent="isMostRecent"
+  let-number="number"
+  let-timestamp="timestamp"
+>
+  <div class="shrink-0 px-2 py-1 text-slate-500">
+    Submission{{ number !== undefined ? ' ' + number : ''
+    }}{{ isMostRecent ? ' (Most recent)' : '' }}:
+    {{ timestamp | date: 'dd/MM/yyyy HH:mm' }}
+  </div>
+</ng-template>
+
+<ng-template #selectedFilePreviewPane let-editorOptions="editorOptions" let-file="file">
+  <div class="flex min-h-0 flex-col overflow-hidden rounded">
+    <div
+      class="flex shrink-0 items-center gap-1 px-2 py-1 text-slate-500"
+      [title]="file?.path ?? ''"
+    >
+      <span class="min-w-0 flex-1 truncate overflow-hidden whitespace-nowrap">
+        {{ file?.path ?? file?.name }}
+      </span>
+      @if (selectedFilesMatch !== null) {
+        <span
+          class="shrink-0"
+          [class.text-green-700]="selectedFilesMatch"
+          [class.text-red-700]="!selectedFilesMatch"
+        >
+          {{ selectedFilesMatch ? 'Identical' : 'Different' }}
+        </span>
+      }
+    </div>
+    @if (isArchiveCodeOrTextFile(file)) {
+      <ngx-monaco-editor
+        class="block size-full"
+        [ngModel]="file?.textContent ?? ''"
+        [options]="editorOptions"
+      ></ngx-monaco-editor>
+    } @else if (isArchivePdfFile(file)) {
+      <f-pdf-viewer class="block size-full" [pdfUrl]="file?.blobUrl ?? ''"></f-pdf-viewer>
+    } @else if (isArchiveImageFile(file)) {
+      <div class="flex size-full items-center justify-center p-2">
+        <img
+          class="max-h-full max-w-full object-contain"
+          [alt]="$safeNavigationMigration(file?.name)"
+          [src]="$safeNavigationMigration(file?.blobUrl)"
+        />
+      </div>
+    } @else {
+      <div class="flex size-full items-center justify-center p-2 text-slate-500">
+        Preview not available for this file type.
+      </div>
+    }
+  </div>
+</ng-template>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.scss
new file mode 100644
index 0000000000..dd674872c8
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.ts
new file mode 100644
index 0000000000..5a1cce8f98
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/submission-files-modal/submission-files-modal.component.ts
@@ -0,0 +1,281 @@
+import * as monaco from 'monaco-editor';
+import {HttpResponse} from '@angular/common/http';
+import {ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {SubmissionArchive} from 'src/app/api/models/submission-history';
+import {
+  ArchiveFileEntry,
+  isArchiveCodeOrTextFile,
+  isArchiveImageFile,
+  isArchivePdfFile,
+} from 'src/app/common/archive-viewer/archive-viewer.helpers';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+export interface SubmissionFilesModalData {
+  assessment: SubmissionArchive;
+  assessmentNumber?: number;
+  assessmentIsMostRecent?: boolean;
+  comparedWith?: SubmissionArchive;
+  comparedWithNumber?: number;
+  comparedWithIsMostRecent?: boolean;
+}
+
+@Component({
+  selector: 'f-submission-files-modal',
+  templateUrl: './submission-files-modal.component.html',
+  styleUrls: ['./submission-files-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class SubmissionFilesModalComponent implements OnInit, OnDestroy {
+  private readonly diffOriginalUri = monaco.Uri.parse('inmemory://submission-compare/original');
+  private readonly diffModifiedUri = monaco.Uri.parse('inmemory://submission-compare/modified');
+  public readonly isArchiveCodeOrTextFile = isArchiveCodeOrTextFile;
+  public readonly isArchiveImageFile = isArchiveImageFile;
+  public readonly isArchivePdfFile = isArchivePdfFile;
+
+  public archiveBlob: Blob | null = null;
+  public comparedArchiveBlob: Blob | null = null;
+  public isLoading = true;
+  public uploadRequirementNames: string[] = [];
+  public errorMessage: string | null = null;
+  public primarySelectedFile: ArchiveFileEntry | null = null;
+  public comparedSelectedFile: ArchiveFileEntry | null = null;
+  public primaryArchiveParsed = false;
+  public comparedArchiveParsed = false;
+  public selectedFilesMatch: boolean | null = null;
+  private selectedFilesComparisonToken = 0;
+
+  public diffEditorOptions = {
+    theme: 'vs',
+    language: 'plaintext',
+    renderMinimap: false,
+    readOnly: true,
+    domReadOnly: true,
+    renderMarginRevertIcon: false,
+    enableSplitViewResizing: false,
+    useInlineViewWhenSpaceIsLimited: false,
+    renderSideBySideInlineBreakpoint: 1000,
+    renderSideBySide: true,
+    compactMode: false,
+    minimap: {
+      enabled: false,
+    },
+    lineNumbers: 'off',
+    automaticLayout: true,
+  };
+  public singleEditorOptions = {
+    theme: 'vs',
+    language: 'plaintext',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    renderMinimap: false,
+    readOnly: true,
+    minimap: {
+      enabled: false,
+    },
+  };
+  public primarySingleEditorOptions = {...this.singleEditorOptions};
+  public comparedSingleEditorOptions = {...this.singleEditorOptions};
+  public diffOriginalModel: {language: string; code: string; uri: monaco.Uri} = {
+    language: 'plaintext',
+    code: '',
+    uri: this.diffOriginalUri,
+  };
+  public diffModifiedModel: {language: string; code: string; uri: monaco.Uri} = {
+    language: 'plaintext',
+    code: '',
+    uri: this.diffModifiedUri,
+  };
+
+  constructor(
+    private fileDownloader: FileDownloaderService,
+    private alerts: AlertService,
+    public dialogRef: MatDialogRef<SubmissionFilesModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: SubmissionFilesModalData,
+  ) {}
+
+  public get compareMode(): boolean {
+    return !!this.data.comparedWith;
+  }
+
+  public get bothSelectionsReady(): boolean {
+    return !!this.primarySelectedFile && !!this.comparedSelectedFile;
+  }
+
+  public get canShowDiffEditor(): boolean {
+    return (
+      this.bothSelectionsReady &&
+      isArchiveCodeOrTextFile(this.primarySelectedFile) &&
+      isArchiveCodeOrTextFile(this.comparedSelectedFile)
+    );
+  }
+
+  ngOnInit(): void {
+    this.uploadRequirementNames =
+      this.data.assessment.task?.definition?.uploadRequirements?.map(
+        (requirement) => requirement?.name?.trim() ?? '',
+      ) ?? [];
+
+    void this.loadSubmissionArchives();
+  }
+
+  ngOnDestroy(): void {
+    monaco.editor.getModel(this.diffOriginalUri)?.dispose();
+    monaco.editor.getModel(this.diffModifiedUri)?.dispose();
+  }
+
+  private async loadSubmissionArchives(): Promise<void> {
+    this.isLoading = true;
+    this.errorMessage = null;
+    this.primaryArchiveParsed = false;
+    this.comparedArchiveParsed = false;
+    this.primarySelectedFile = null;
+    this.comparedSelectedFile = null;
+    this.selectedFilesMatch = null;
+    this.resetDiffModels();
+    this.resetSingleEditorOptions();
+
+    try {
+      if (this.data.comparedWith) {
+        this.archiveBlob = await this.downloadSubmissionArchive(this.data.assessment);
+        this.comparedArchiveBlob = await this.downloadSubmissionArchive(this.data.comparedWith);
+      } else {
+        this.archiveBlob = await this.downloadSubmissionArchive(this.data.assessment);
+      }
+    } catch (error) {
+      this.errorMessage = `Failed to load submission files: ${error}`;
+      this.alerts.error(this.errorMessage, 6000);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  private downloadSubmissionArchive(assessment: SubmissionArchive): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      this.fileDownloader.downloadBlob(
+        assessment.submissionFilesUrl(),
+        (_resourceUrl: string, response: HttpResponse<Blob>) => {
+          if (!response.body) {
+            reject('No submission archive returned.');
+            return;
+          }
+          resolve(response.body);
+        },
+        (error) => {
+          reject(error?.error?.error ?? error);
+        },
+      );
+    });
+  }
+
+  public onPrimarySelectionChange(file: ArchiveFileEntry | null): void {
+    this.applySelectionChange(file, (value) => {
+      this.primarySelectedFile = value;
+    });
+  }
+
+  public onComparedSelectionChange(file: ArchiveFileEntry | null): void {
+    this.applySelectionChange(file, (value) => {
+      this.comparedSelectedFile = value;
+    });
+  }
+
+  private applySelectionChange(
+    file: ArchiveFileEntry | null,
+    assignSelection: (value: ArchiveFileEntry | null) => void,
+  ): void {
+    if (file && !file.isLoaded) {
+      return;
+    }
+    assignSelection(file);
+    this.refreshSingleEditorOptions();
+    this.refreshDiffModels();
+    void this.refreshSelectedFilesMatch();
+  }
+
+  public onPrimaryFilesLoaded(): void {
+    this.primaryArchiveParsed = true;
+  }
+
+  public onComparedFilesLoaded(): void {
+    this.comparedArchiveParsed = true;
+  }
+
+  private resetDiffModels(): void {
+    this.diffOriginalModel = {language: 'plaintext', code: '', uri: this.diffOriginalUri};
+    this.diffModifiedModel = {language: 'plaintext', code: '', uri: this.diffModifiedUri};
+  }
+
+  private refreshDiffModels(): void {
+    if (!this.canShowDiffEditor) {
+      this.resetDiffModels();
+      return;
+    }
+
+    this.diffOriginalModel = {
+      language: this.primarySelectedFile?.language ?? 'plaintext',
+      code: this.primarySelectedFile?.textContent ?? '',
+      uri: this.diffOriginalUri,
+    };
+    this.diffModifiedModel = {
+      language: this.comparedSelectedFile?.language ?? 'plaintext',
+      code: this.comparedSelectedFile?.textContent ?? '',
+      uri: this.diffModifiedUri,
+    };
+  }
+
+  private resetSingleEditorOptions(): void {
+    this.primarySingleEditorOptions = {...this.singleEditorOptions, language: 'plaintext'};
+    this.comparedSingleEditorOptions = {...this.singleEditorOptions, language: 'plaintext'};
+  }
+
+  private refreshSingleEditorOptions(): void {
+    this.primarySingleEditorOptions = {
+      ...this.singleEditorOptions,
+      language: this.primarySelectedFile?.language ?? 'plaintext',
+    };
+    this.comparedSingleEditorOptions = {
+      ...this.singleEditorOptions,
+      language: this.comparedSelectedFile?.language ?? 'plaintext',
+    };
+  }
+
+  private async refreshSelectedFilesMatch(): Promise<void> {
+    const token = ++this.selectedFilesComparisonToken;
+    if (!this.primarySelectedFile || !this.comparedSelectedFile) {
+      this.selectedFilesMatch = null;
+      return;
+    }
+
+    const [primaryHash, comparedHash] = await Promise.all([
+      this.computeFileHash(this.primarySelectedFile),
+      this.computeFileHash(this.comparedSelectedFile),
+    ]);
+
+    if (token !== this.selectedFilesComparisonToken) {
+      return;
+    }
+
+    this.selectedFilesMatch = primaryHash === comparedHash;
+  }
+
+  private async computeFileHash(file: ArchiveFileEntry): Promise<string> {
+    let bytes: Uint8Array | null = file.data ?? null;
+    if (!bytes && file.textContent !== undefined) {
+      bytes = new TextEncoder().encode(file.textContent);
+    }
+    if (!bytes && file.blob) {
+      bytes = new Uint8Array(await file.blob.arrayBuffer());
+    }
+    if (!bytes) {
+      return '';
+    }
+
+    const digest = await crypto.subtle.digest('SHA-256', new Uint8Array(bytes).buffer);
+    return Array.from(new Uint8Array(digest))
+      .map((value) => value.toString(16).padStart(2, '0'))
+      .join('');
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.html
new file mode 100644
index 0000000000..a1b1b889de
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.html
@@ -0,0 +1,260 @@
+<div class="mb-3 flex justify-end">
+  <button mat-stroked-button (click)="loadHistory(true)">Refresh</button>
+</div>
+@if (loading) {
+  <div class="flex min-h-[240px] items-center justify-center">
+    <mat-spinner [diameter]="48"></mat-spinner>
+  </div>
+} @else {
+  <mat-accordion>
+    @for (history of histories; track history.id; let idx = $index) {
+      <mat-expansion-panel
+        [attr.id]="'history-panel-' + history.id"
+        [expanded]="
+          assessmentFor(history) && assessmentFor(history)?.id === loadOverseerAssessmentId
+        "
+        [hideToggle]="!assessmentFor(history)"
+        (opened)="onHistoryOpen(history)"
+      >
+        <mat-expansion-panel-header class="flex items-center justify-between">
+          <mat-panel-title class="flex items-center gap-3">
+            @if (assessmentFor(history); as oa) {
+              @if (oa.taskStatus) {
+                <status-icon [status]="oa.taskStatus"></status-icon>
+              }
+            }
+            <div class="flex flex-col">
+              <div>
+                Submission {{ histories.length - idx }}
+                @if (idx === 0) {
+                  <span class="text-gray-500">(Most recent)</span>
+                }
+                @if (isComparisonSource(history)) {
+                  <span class="text-blue-600">(Selected for comparison)</span>
+                }
+              </div>
+              <div class="text-xs font-normal text-gray-500">
+                {{ history.timestamp | date: 'dd/MM/yyyy HH:mm' }}
+              </div>
+            </div>
+          </mat-panel-title>
+
+          <div
+            class="flex items-center gap-3"
+            [ngClass]="{
+              'pr-15': !currentUnitRole,
+            }"
+          >
+            @if (assessmentFor(history); as oa) {
+              @if (oa.reportReady) {
+                <span class="text-xs text-gray-500">Click to view Overseer report</span>
+                <span class="text-gray-500"> {{ oa.passedSteps }} / {{ oa.totalSteps }}</span>
+                @if (oa.passedSteps === oa.totalSteps) {
+                  <mat-icon color="primary">done</mat-icon>
+                } @else {
+                  <mat-icon color="warn">cancel</mat-icon>
+                }
+              } @else {
+                <span class="flex items-center gap-3 uppercase">
+                  Tests In Progress
+                  <mat-progress-spinner mode="indeterminate" [diameter]="25"></mat-progress-spinner>
+                </span>
+              }
+            }
+
+            @if (history.hasSubmissionFiles && currentUnitRole) {
+              <button
+                #submissionMenuTrigger="matMenuTrigger"
+                aria-label="Submission options"
+                mat-icon-button
+                [matMenuTriggerFor]="menu"
+                (click)="viewSubmissionOptions($event)"
+              >
+                <mat-icon>more_vert</mat-icon>
+              </button>
+              <mat-menu #menu="matMenu">
+                <button mat-menu-item (click)="viewSubmissionFiles(history, $event)">
+                  <mat-icon>folder_zip</mat-icon>
+                  View Submission Files
+                </button>
+                @if (hasComparisonSourceFor(history)) {
+                  <button mat-menu-item (click)="compareWithSelected(history, $event)">
+                    <mat-icon>compare_arrows</mat-icon>
+                    Compare With Selected
+                  </button>
+                } @else if (isComparisonSource(history)) {
+                  <button mat-menu-item (click)="clearComparisonSource($event)">
+                    <mat-icon>close</mat-icon>
+                    Clear Compare Selection
+                  </button>
+                } @else {
+                  <button
+                    mat-menu-item
+                    (click)="selectComparisonSource(history, $event, submissionMenuTrigger)"
+                  >
+                    <mat-icon>task_alt</mat-icon>
+                    Select For Comparison
+                  </button>
+                }
+              </mat-menu>
+            }
+          </div>
+        </mat-expansion-panel-header>
+
+        @if (assessmentFor(history); as oa) {
+          <div class="mb-4">
+            <mat-accordion>
+              @for (
+                result of oa.stepResultsCache.values | async;
+                track result.id;
+                let idx = $index
+              ) {
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header class="flex items-center justify-between">
+                    <mat-panel-title>
+                      Step {{ idx + 1 }}: {{ result.overseerStep?.displayName }}</mat-panel-title
+                    >
+                    <div class="mr-9">
+                      @if (result.pass) {
+                        <mat-icon color="primary">done</mat-icon>
+                      } @else {
+                        <mat-icon color="warn">cancel</mat-icon>
+                      }
+                    </div>
+                  </mat-expansion-panel-header>
+
+                  <!-- <p>Exit Status: {{ result.exitStatus }}</p> -->
+                  <!-- <p>Pass?: {{ result.pass }}</p> -->
+
+                  @if (!result.pass) {
+                    <p class="text-normal w-full p-1 text-left tracking-wide text-gray-500">
+                      {{ result.feedbackMessage }}
+                    </p>
+                  }
+
+                  @if (
+                    result.expectedOutput &&
+                    result.expectedOutput !== result.stdout &&
+                    (result.overseerStep?.stepType === 'output_diff' || !result.overseerStep)
+                  ) {
+                    <div class="w-fill mb-3 flex items-center justify-center gap-1">
+                      <button
+                        mat-stroked-button
+                        [color]="viewOutput === 'your_output' ? 'primary' : undefined"
+                        (click)="submissionOutput()"
+                      >
+                        Your Output
+                      </button>
+
+                      <button
+                        mat-stroked-button
+                        [color]="viewOutput === 'expected_output' ? 'primary' : undefined"
+                        (click)="expectedOutput()"
+                      >
+                        Expected Output
+                      </button>
+                      <button
+                        mat-stroked-button
+                        [color]="viewOutput === 'diff' ? 'primary' : undefined"
+                        (click)="diff()"
+                      >
+                        Diff
+                      </button>
+
+                      <button
+                        mat-stroked-button
+                        [color]="viewOutput === 'split_diff' ? 'primary' : undefined"
+                        (click)="splitDiff()"
+                      >
+                        Split Diff
+                      </button>
+                    </div>
+                    @if (viewOutput === 'diff' || viewOutput === 'split_diff') {
+                      @if (result.expectedOutput !== result.stdout) {
+                        <ngx-monaco-diff-editor
+                          [modifiedModel]="{
+                            language: 'plainttext',
+                            code: result.stdout,
+                          }"
+                          [options]="diffEditorOptions"
+                          [originalModel]="{
+                            language: 'plaintext',
+                            code: result.expectedOutput,
+                          }"
+                        ></ngx-monaco-diff-editor>
+                      }
+                    } @else if (viewOutput === 'your_output') {
+                      <ngx-monaco-editor
+                        class="w-full p-3"
+                        [options]="editorOptions"
+                        [(ngModel)]="result.stdout"
+                      ></ngx-monaco-editor>
+                    } @else if (viewOutput === 'expected_output') {
+                      <ngx-monaco-editor
+                        class="w-full p-3"
+                        [options]="editorOptions"
+                        [(ngModel)]="result.expectedOutput"
+                      ></ngx-monaco-editor>
+                    }
+                  } @else if (result.stdout) {
+                    <pre
+                      class="max-h-64 max-w-full scrollbar-gutter-stable overflow-auto rounded-md border border-gray-200 bg-gray-50 p-3 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-gray-800 shadow-inner"
+                    ><code [innerHTML]="renderOutput(result.stdout)"></code></pre>
+                  } @else if (result.pass) {
+                    <div class="w-full text-center tracking-wide text-gray-400 uppercase">
+                      SUCCESS
+                    </div>
+                    <div
+                      class="text-normal w-full p-1 text-center tracking-wide text-gray-200 uppercase"
+                    >
+                      (No Output)
+                    </div>
+                  }
+                </mat-expansion-panel>
+              }
+              @if (loadingAssessments.has(oa.id)) {
+                <div class="flex w-full items-center justify-center">
+                  <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+                </div>
+              } @else {
+                @for (skipped of oa.stepsSkipped; track skipped.id; let idx = $index) {
+                  <!-- TODO: filter oa.stepsSkipped, if this overseer assessment passed, then we can ignore this (dont render) skipped step -->
+                  <!-- TODO: because it proably means the test was added after the assessment -->
+                  <mat-expansion-panel disabled>
+                    <mat-expansion-panel-header class="flex items-center justify-between">
+                      <mat-panel-title>
+                        Step {{ oa.stepResultsCache.currentValues.length + idx + 1 }}:
+                        {{ skipped?.displayName ?? '-' }}
+                        <span class="ml-3 italic">(Skipped)</span>
+                      </mat-panel-title>
+
+                      <mat-icon class="opacity-80">pause</mat-icon>
+                    </mat-expansion-panel-header>
+                  </mat-expansion-panel>
+                }
+              }
+            </mat-accordion>
+          </div>
+        }
+        @if (history.hasSubmissionFiles && currentUnitRole) {
+          <div class="flex justify-center">
+            <button
+              color="primary"
+              mat-raised-button
+              (click)="viewSubmissionFiles(history, $event)"
+            >
+              View Submission
+            </button>
+          </div>
+        }
+      </mat-expansion-panel>
+    } @empty {
+      <div class="flex size-full flex-col items-center justify-center text-[#c5c5c5]">
+        <mat-icon style="height: 120px; width: 120px; font-size: 120px; color: #c5c5c5"
+          >subtitles_off</mat-icon
+        >
+        <div>No retained submissions for this task.</div>
+      </div>
+    }
+  </mat-accordion>
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.ts
new file mode 100644
index 0000000000..37c24bb6e0
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component.ts
@@ -0,0 +1,294 @@
+import Convert from 'ansi-to-html';
+import DOMPurify from 'dompurify';
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {MatMenuTrigger} from '@angular/material/menu';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
+import {forkJoin} from 'rxjs';
+import {OverseerAssessment, UnitRole, UserService} from 'src/app/api/models/doubtfire-model';
+import {SubmissionHistory} from 'src/app/api/models/submission-history';
+import {Task} from 'src/app/api/models/task';
+import {OverseerAssessmentService} from 'src/app/api/services/overseer-assessment.service';
+import {OverseerStepResultService} from 'src/app/api/services/overseer-step-result.service';
+import {SubmissionHistoryService} from 'src/app/api/services/submission-history.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {SubmissionFilesModalComponent} from './submission-files-modal/submission-files-modal.component';
+
+@Component({
+  selector: 'f-task-overseer-report',
+  templateUrl: './task-overseer-report.component.html',
+  styleUrl: './task-overseer-report.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskOverseerReportComponent implements OnInit {
+  @Input() task: Task;
+  @Input() loadOverseerAssessmentId?: number;
+  public histories: SubmissionHistory[] = [];
+  public overseerAssessments: OverseerAssessment[] = [];
+  public comparisonSourceHistoryId: number | null = null;
+  public loading = false;
+
+  constructor(
+    private alerts: AlertService,
+    private submissionHistoryService: SubmissionHistoryService,
+    private overseerAssessmentService: OverseerAssessmentService,
+    private overseerStepResultsService: OverseerStepResultService,
+    private dialog: MatDialog,
+    private readonly sanitizer: DomSanitizer,
+    private userService: UserService,
+  ) {
+    DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => {
+      if (data.attrName !== 'style') {
+        return;
+      }
+      data.attrValue = data.attrValue
+        .split(';')
+        .map((rule) => rule.trim())
+        .filter((rule) =>
+          /^(color|background-color|font-weight|font-style)\s*:\s*(#[0-9a-f]{3,8}|[a-z]+|\d+)\b/i.test(
+            rule,
+          ),
+        )
+        .join('; ');
+    });
+  }
+
+  public get currentUnitRole(): UnitRole | undefined {
+    const currentUser = this.userService.currentUser;
+    return this.task.unit.staff.find((ur) => ur.user.id === currentUser.id);
+  }
+
+  public viewOutput: 'your_output' | 'expected_output' | 'diff' | 'split_diff' = 'your_output';
+
+  stdoutOptions = {
+    theme: 'vs-dark',
+    language: 'plaintext',
+    renderMinimap: false,
+    lineNumbers: false,
+
+    minimap: {
+      enabled: false,
+    },
+  };
+  editorOptions = {
+    theme: 'vs',
+    language: 'text',
+    renderMinimap: false,
+    minimap: {
+      enabled: false,
+    },
+    readOnly: true,
+  };
+
+  diffEditorOptions = {
+    theme: 'vs',
+    language: 'plaintext',
+    renderMinimap: false,
+    readOnly: true,
+    domReadOnly: true,
+    renderMarginRevertIcon: false,
+    enableSplitViewResizing: false,
+    useInlineViewWhenSpaceIsLimited: false,
+    renderSideBySideInlineBreakpoint: 1000,
+    renderSideBySide: true,
+    compactMode: true,
+    minimap: {
+      enabled: false,
+    },
+    lineNumbers: 'off',
+  };
+
+  private ansi = new Convert({
+    newline: false,
+    escapeXML: true,
+    fg: '#1f2937',
+    bg: '#f9fafb',
+  });
+
+  protected renderOutput(output?: string | null): SafeHtml {
+    const html = this.ansi.toHtml(output ?? '');
+
+    const clean = DOMPurify.sanitize(html, {
+      ALLOWED_TAGS: ['span', 'br', 'i', 'b', 'strong', 'em', 'code'],
+      ALLOWED_ATTR: ['style'],
+    });
+
+    return this.sanitizer.bypassSecurityTrustHtml(clean);
+  }
+
+  diff() {
+    this.diffEditorOptions.renderSideBySide = false;
+    this.diffEditorOptions.compactMode = true;
+    this.diffEditorOptions = {...this.diffEditorOptions};
+    this.viewOutput = 'diff';
+  }
+
+  splitDiff() {
+    this.diffEditorOptions.renderSideBySide = true;
+    this.diffEditorOptions.compactMode = false;
+    this.diffEditorOptions = {...this.diffEditorOptions};
+    setTimeout(() => {
+      this.viewOutput = 'split_diff';
+    }, 100);
+  }
+
+  submissionOutput() {
+    this.viewOutput = 'your_output';
+  }
+
+  expectedOutput() {
+    this.viewOutput = 'expected_output';
+  }
+
+  public get comparisonSourceHistory(): SubmissionHistory | null {
+    if (!this.comparisonSourceHistoryId) {
+      return null;
+    }
+    return this.histories.find((history) => history.id === this.comparisonSourceHistoryId) ?? null;
+  }
+
+  ngOnInit(): void {
+    this.loadHistory();
+  }
+
+  loadHistory(isRefresh: boolean = false) {
+    if (isRefresh) {
+      this.loadOverseerAssessmentId = null;
+    }
+    this.loading = true;
+
+    forkJoin({
+      histories: this.submissionHistoryService.queryForTask(this.task),
+      assessments: this.overseerAssessmentService.queryForTask(this.task),
+    }).subscribe({
+      next: ({histories, assessments}) => {
+        this.histories = histories;
+        this.overseerAssessments = assessments;
+
+        if (
+          this.comparisonSourceHistoryId &&
+          !this.histories.some((history) => history.id === this.comparisonSourceHistoryId)
+        ) {
+          this.comparisonSourceHistoryId = null;
+        }
+
+        for (const oa of this.overseerAssessments) {
+          for (const result of oa.stepResultsCache.currentValues) {
+            result.overseerStep = this.task.definition.overseerStepsCache.currentValues.find(
+              (step) => step.id === result.overseerStepId,
+            );
+          }
+        }
+        this.loading = false;
+      },
+      error: (error) => {
+        this.loading = false;
+        this.alerts.error(`Failed to load submission history: ${error}`, 6000);
+      },
+    });
+  }
+
+  loadingAssessments: Set<number> = new Set();
+
+  assessmentFor(history: SubmissionHistory): OverseerAssessment | undefined {
+    return this.overseerAssessments.find(
+      (assessment) => assessment.submissionHistoryId === history.id,
+    );
+  }
+
+  onHistoryOpen(history: SubmissionHistory) {
+    const overseerAssessment = this.assessmentFor(history);
+    if (!overseerAssessment) {
+      return;
+    }
+
+    if (this.loadOverseerAssessmentId === overseerAssessment.id) {
+      setTimeout(() => {
+        const el = document.getElementById(`history-panel-${history.id}`);
+        el?.scrollIntoView({behavior: 'smooth', block: 'start'});
+      }, 250);
+    }
+
+    this.loadingAssessments.add(overseerAssessment.id);
+
+    this.overseerStepResultsService.getOverseerStepResults(overseerAssessment).subscribe({
+      next: () => {
+        for (const oa of this.overseerAssessments) {
+          for (const result of oa.stepResultsCache.currentValues) {
+            result.overseerStep = this.task.definition.overseerStepsCache.currentValues.find(
+              (step) => step.id === result.overseerStepId,
+            );
+          }
+        }
+        this.loadingAssessments.delete(overseerAssessment.id);
+      },
+      error: (error) => {
+        console.error(error);
+        this.loadingAssessments.delete(overseerAssessment.id);
+      },
+    });
+  }
+
+  viewSubmissionOptions(event: Event) {
+    event.stopPropagation();
+  }
+
+  isComparisonSource(history: SubmissionHistory): boolean {
+    return this.comparisonSourceHistoryId === history.id;
+  }
+
+  hasComparisonSourceFor(history: SubmissionHistory): boolean {
+    return this.comparisonSourceHistoryId !== null && this.comparisonSourceHistoryId !== history.id;
+  }
+
+  selectComparisonSource(history: SubmissionHistory, event?: Event, menuTrigger?: MatMenuTrigger) {
+    event?.stopPropagation();
+    this.comparisonSourceHistoryId = history.id;
+    menuTrigger?.closeMenu();
+    this.alerts.message(`Selected submission ${history.timestampString} for comparison.`, 3500);
+  }
+
+  clearComparisonSource(event?: Event) {
+    event?.stopPropagation();
+    this.comparisonSourceHistoryId = null;
+  }
+
+  compareWithSelected(history: SubmissionHistory, event?: Event) {
+    event?.stopPropagation();
+    const selected = this.comparisonSourceHistory;
+    if (!selected || selected.id === history.id) {
+      return;
+    }
+
+    this.openSubmissionFilesDialog(history, selected);
+  }
+
+  viewSubmissionFiles(history: SubmissionHistory, event?: Event) {
+    event?.stopPropagation();
+    this.openSubmissionFilesDialog(history);
+  }
+
+  private openSubmissionFilesDialog(history: SubmissionHistory, comparedWith?: SubmissionHistory) {
+    const historyIndex = this.histories.findIndex((item) => item.id === history.id);
+    const comparedWithIndex = comparedWith
+      ? this.histories.findIndex((item) => item.id === comparedWith.id)
+      : -1;
+
+    this.dialog.open(SubmissionFilesModalComponent, {
+      data: {
+        assessment: history,
+        assessmentNumber: historyIndex >= 0 ? this.histories.length - historyIndex : undefined,
+        assessmentIsMostRecent: historyIndex === 0,
+        comparedWith,
+        comparedWithNumber:
+          comparedWithIndex >= 0 ? this.histories.length - comparedWithIndex : undefined,
+        comparedWithIsMostRecent: comparedWithIndex === 0,
+      },
+      maxWidth: '95vw',
+      width: '100%',
+      height: '90vh',
+      panelClass: 'submission-files-dialog',
+    });
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.html
new file mode 100644
index 0000000000..e5489003ec
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.html
@@ -0,0 +1,16 @@
+<mat-card appearance="outlined" class="p-[16px]" [hidden]="!task.hasPrerequisiteTasks()">
+  <div class="flex w-full items-center justify-between">
+    <mat-card-title class="f-card-title">Prerequisite Tasks</mat-card-title>
+    <mat-icon>pending_actions</mat-icon>
+  </div>
+
+  <mat-card-subtitle class="mb-2.5">
+    You must meet the prerequisites for this task before submitting
+    {{ taskDefinition.abbreviation }} {{ taskDefinition.name }}.</mat-card-subtitle
+  >
+  <f-task-definition-prerequisites
+    [staffView]="false"
+    [task]="task"
+    [taskDefinition]="taskDefinition"
+  ></f-task-definition-prerequisites>
+</mat-card>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.ts
new file mode 100644
index 0000000000..659232c1c8
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-prerequisites-card/task-prerequisites-card.component.ts
@@ -0,0 +1,15 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+
+@Component({
+  selector: 'f-task-prerequisites-card',
+  templateUrl: './task-prerequisites-card.component.html',
+  styleUrls: ['./task-prerequisites-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskPrerequisitesCardComponent {
+  @Input() taskDefinition: TaskDefinition;
+  @Input() task?: Task;
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.html
new file mode 100644
index 0000000000..f0f16f4ff5
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.html
@@ -0,0 +1,92 @@
+@if (isPassed) {
+  <mat-card appearance="outlined" [hidden]="!task.scormEnabled">
+    @if (this.task.latestCompletedTestAttempt.scoreScaled === 1) {
+      <mat-card-header class="bg-green-600 text-white">
+        <mat-card-title class="mb-2.5 flex items-center"
+          ><mat-icon class="font-extrabold">check</mat-icon>
+          <span class="ml-2.5">Knowledge Check Passed Without Mistakes</span></mat-card-title
+        >
+      </mat-card-header>
+    }
+    @if (this.task.latestCompletedTestAttempt.scoreScaled !== 1) {
+      <mat-card-header class="bg-green-500 text-white">
+        <mat-card-title class="mb-2.5 flex items-center"
+          ><mat-icon class="font-extrabold">check</mat-icon>
+          <span class="ml-2.5">Knowledge Check Passed</span></mat-card-title
+        >
+      </mat-card-header>
+    }
+    <mat-card-content class="bg-green-50">
+      <p class="pt-1 pb-0.5">
+        You have successfully completed this knowledge check. You can now proceed to submitting task
+        files.
+      </p>
+    </mat-card-content>
+    <mat-card-actions
+      class="space-x-1 bg-green-50 px-3"
+      [hidden]="!user.isStaff && !task.definition.scormAllowReview"
+    >
+      <button mat-stroked-button (click)="reviewLatestCompletedAttempt()">
+        Review last attempt
+      </button>
+    </mat-card-actions>
+  </mat-card>
+}
+@if (!isPassed) {
+  <mat-card appearance="outlined" [hidden]="!task.scormEnabled">
+    @if (isPassed === false) {
+      <mat-card-header class="bg-red-600 text-white">
+        <mat-card-title class="mb-2.5 flex items-center"
+          ><mat-icon class="font-extrabold">close</mat-icon>
+          <span class="ml-2.5">Knowledge Check Unsuccessful</span></mat-card-title
+        >
+      </mat-card-header>
+    }
+    @if (isPassed === undefined) {
+      <mat-card-header>
+        <mat-card-title>Knowledge Check</mat-card-title>
+      </mat-card-header>
+    }
+    <mat-card-content>
+      <p class="pt-1">You have to successfully pass this knowledge check to complete the task.</p>
+      <p>
+        You have {{ attemptsLeft !== undefined ? attemptsLeft : 'unlimited' }} attempts left to
+        complete this test.
+      </p>
+      <p class="mb-2.5" [hidden]="!task.definition.scormTimeDelayEnabled">
+        There will be an increased time delay between test attempts. First 2 attempts will not have
+        a time delay in between.
+      </p>
+    </mat-card-content>
+    <mat-card-actions class="space-x-1 px-3 pt-0">
+      <button
+        mat-stroked-button
+        [disabled]="isNotStudent()"
+        [hidden]="attemptsLeft === 0"
+        (click)="launchScormPlayer()"
+      >
+        <mat-icon aria-label="Launch icon" style="width: 20px; height: 20px; font-size: 20px">
+          launch
+        </mat-icon>
+        Attempt test
+      </button>
+      <button
+        mat-stroked-button
+        [hidden]="
+          (!user.isStaff && !task.definition.scormAllowReview) ||
+          !this.task.latestCompletedTestAttempt
+        "
+        (click)="reviewLatestCompletedAttempt()"
+      >
+        Review last attempt
+      </button>
+      <button
+        mat-stroked-button
+        [hidden]="task.definition.scormAttemptLimit === 0 || attemptsLeft !== 0"
+        (click)="requestExtraAttempt()"
+      >
+        Request extra attempt
+      </button>
+    </mat-card-actions>
+  </mat-card>
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.ts
new file mode 100644
index 0000000000..c3f2cf3db3
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component.ts
@@ -0,0 +1,68 @@
+import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {Task, User, UserService} from 'src/app/api/models/doubtfire-model';
+import {ScormExtensionModalService} from 'src/app/common/modals/scorm-extension-modal/scorm-extension-modal.service';
+
+@Component({
+  selector: 'f-task-scorm-card',
+  templateUrl: './task-scorm-card.component.html',
+  styleUrls: ['./task-scorm-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskScormCardComponent implements OnChanges {
+  @Input() task: Task;
+  attemptsLeft: number;
+  isPassed: boolean;
+  user: User;
+
+  constructor(
+    private extensions: ScormExtensionModalService,
+    private userService: UserService,
+  ) {
+    this.user = this.userService.currentUser;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.task && changes.task.currentValue && changes.task.currentValue.scormEnabled) {
+      this.attemptsLeft = undefined;
+      this.isPassed = undefined;
+
+      this.task?.fetchTestAttempts().subscribe(() => {
+        this.getAttemptsLeft();
+        if (this.task.latestCompletedTestAttempt) {
+          this.isPassed = this.task.scormPassed;
+        }
+      });
+    }
+  }
+
+  getAttemptsLeft(): void {
+    if (this.task.definition.scormAttemptLimit != 0) {
+      const attempts = this.task.testAttemptCache.currentValues;
+      let count = attempts.length;
+      if (count > 0 && attempts[0].terminated === false) {
+        count--;
+      }
+      this.attemptsLeft =
+        this.task.definition.scormAttemptLimit + this.task.scormExtensions - count;
+    }
+  }
+
+  isNotStudent(): boolean {
+    return this.user !== this.task.project.student;
+  }
+
+  launchScormPlayer(): void {
+    this.task.launchScormPlayer();
+  }
+
+  reviewLatestCompletedAttempt(): void {
+    this.task.latestCompletedTestAttempt.review();
+  }
+
+  requestExtraAttempt(): void {
+    this.extensions.show(this.task, () => {
+      this.task.refresh();
+    });
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html
index f068cb609f..c96b1d69bc 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html
@@ -1,60 +1,101 @@
-<div class="p-4">
+<div class="p-2.5">
   <div class="flex items-center">
-    <mat-icon class="mr-2">crisis_alert</mat-icon>
+    <mat-icon class="mr-1">crisis_alert</mat-icon>
     <h1 class="mat-headline m-0">Similarities</h1>
     <span class="grow"></span>
     <div class="example-action-buttons">
-      <button mat-button (click)="accordion.closeAll()">Collapse All</button>
+      @if (!jplagOpenState) {
+        <button mat-button (click)="accordion.closeAll()">Collapse All</button>
+      }
+      @if (jplagOpenState) {
+        <button mat-button (click)="jplagOpenState = false">Back to Summary</button>
+      }
     </div>
   </div>
 
-  <mat-accordion multi>
-    @for (similarity of task?.similarityCache.values | async; track similarity) {
-      <h1 class="mat-headline"></h1>
-      @for (part of similarity.parts; track part; let i = $index) {
-        <mat-expansion-panel
-          hideToggle
-          (opened)="part.panelOpenState = true"
-          (closed)="part.panelOpenState = false"
-        >
-          <mat-expansion-panel-header [ngClass]="{flagged: similarity.flagged}">
-            <mat-panel-title>
-              {{ similarity.friendlyTypeName }}
-            </mat-panel-title>
-            <mat-panel-description> {{ part.description }} </mat-panel-description>
-            @if (similarity.readyForViewer) {
-              <button
-                matTooltip="View report for this similarity"
-                mat-icon-button
-                aria-label="View Detailed Report"
-                (click)="openReport($event, similarity)"
-              >
-                <mat-icon>summarize</mat-icon>
-              </button>
-            }
-            @if (i === 0) {
-              <button
-                [matTooltip]="similarity.flagged ? 'Unflag similarity' : 'Flag similarity'"
-                mat-icon-button
-                aria-label="Flag similarities"
-                (click)="toggleFlag($event, similarity)"
-              >
-                <mat-icon [color]="similarity.flagged ? 'warn' : ''">{{
-                  similarity.flagged ? 'flag_circle' : 'check_circle'
-                }}</mat-icon>
-              </button>
-            }
-          </mat-expansion-panel-header>
-          @if (part.panelOpenState && part.format) {
-            <f-file-viewer
-              [fileType]="part.format"
-              [src]="similarity.fileUrl(part.idx)"
-            ></f-file-viewer>
-          } @else {
-            <p>There is no local similarity file for this.</p>
+  <f-jplag-report-viewer #jplagViewer [hidden]="!jplagOpenState" />
+
+  @if (!jplagOpenState) {
+    <mat-accordion multi>
+      @for (
+        similarity of $safeNavigationMigration(task?.similarityCache.values) | async;
+        track similarity
+      ) {
+        <div class="my-3">
+          @for (part of similarity.parts; track part; let i = $index) {
+            <mat-expansion-panel
+              hideToggle
+              (closed)="part.panelOpenState = false"
+              (opened)="part.panelOpenState = true"
+            >
+              <mat-expansion-panel-header [ngClass]="{flagged: similarity.flagged}">
+                <mat-panel-title>
+                  {{ similarity.friendlyTypeName }}
+                </mat-panel-title>
+                <mat-panel-description> {{ part.description }} </mat-panel-description>
+                @if (similarity.readyForViewer) {
+                  @if (similarity.type === 'JplagTaskSimilarity') {
+                    <button
+                      aria-label="View Detailed Report"
+                      mat-icon-button
+                      matTooltip="View JPlag report for this similarity"
+                      (click)="viewJplagReport(similarity); $event.stopPropagation()"
+                    >
+                      <mat-icon>summarize</mat-icon>
+                    </button>
+                  } @else if (similarity.type === 'TiiTaskSimilarity') {
+                    <button
+                      aria-label="View report"
+                      mat-icon-button
+                      matTooltip="View report in TurnItIn"
+                      (click)="openReport($event, similarity)"
+                    >
+                      <mat-icon>summarize</mat-icon>
+                    </button>
+                  }
+                }
+                @if (i === 0) {
+                  <button
+                    aria-label="Flag similarities"
+                    mat-icon-button
+                    [matTooltip]="similarity.flagged ? 'Unflag similarity' : 'Flag similarity'"
+                    (click)="toggleFlag($event, similarity)"
+                  >
+                    <mat-icon [color]="similarity.flagged ? 'warn' : ''">{{
+                      similarity.flagged ? 'flag_circle' : 'check_circle'
+                    }}</mat-icon>
+                  </button>
+                }
+              </mat-expansion-panel-header>
+              @if (part.panelOpenState) {
+                @if (part.format) {
+                  @if (part.format === 'html' || part.format === 'pdf') {
+                    <f-file-viewer
+                      [fileType]="part.format"
+                      [src]="similarity.fileUrl(part.idx)"
+                    ></f-file-viewer>
+                  } @else if (part.format === 'jplag') {
+                    <button
+                      class="mx-auto block"
+                      color="primary"
+                      mat-raised-button
+                      (click)="viewJplagReport(similarity)"
+                    >
+                      View JPlag Similarity
+                    </button>
+                  }
+                } @else {
+                  <p>There is no local similarity file for this.</p>
+                }
+              }
+            </mat-expansion-panel>
           }
-        </mat-expansion-panel>
+        </div>
+      } @empty {
+        <div class="mt-6 w-full text-center text-gray-400">
+          There are no similarities for this submission
+        </div>
       }
-    }
-  </mat-accordion>
+    </mat-accordion>
+  }
 </div>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts
index 2a6739207a..a4132637a8 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts
@@ -1,30 +1,46 @@
-import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
-import { MatAccordion } from '@angular/material/expansion';
-import { Task } from 'src/app/api/models/task';
-import { TaskSimilarity } from 'src/app/api/models/task-similarity';
-import { TaskSimilarityService } from 'src/app/api/services/task-similarity.service';
-import { AlertService } from 'src/app/common/services/alert.service';
-import { SelectedTaskService } from '../../../../selected-task.service';
+import {HttpResponse} from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {MatAccordion} from '@angular/material/expansion';
+import {Task} from 'src/app/api/models/task';
+import {TaskSimilarity} from 'src/app/api/models/task-similarity';
+import {TaskSimilarityService} from 'src/app/api/services/task-similarity.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {JplagReportViewerComponent} from 'src/app/projects/states/jplag/jplag-report-viewer.component';
+import {SelectedTaskService} from '../../../../selected-task.service';
 
 @Component({
   selector: 'f-task-similarity-view',
   templateUrl: './task-similarity-view.component.html',
   styleUrls: ['./task-similarity-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskSimilarityViewComponent implements OnChanges {
   @Input() task: Task;
   @ViewChild(MatAccordion) accordion: MatAccordion;
+  @ViewChild('jplagViewer') jplagViewer!: JplagReportViewerComponent;
   panelOpenState = false;
+  jplagOpenState = false;
 
   constructor(
     private taskSimilarityService: TaskSimilarityService,
     private alertsService: AlertService,
-    private selectedTaskService: SelectedTaskService
+    private selectedTaskService: SelectedTaskService,
+    private fileDownloaderService: FileDownloaderService,
   ) {}
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.task && changes.task.currentValue && this.task?.id) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      this.jplagOpenState = false;
+
       this.task?.fetchSimilarities().subscribe((_) => {
         console.log('similarities fetched');
       });
@@ -35,7 +51,7 @@ export class TaskSimilarityViewComponent implements OnChanges {
     e.stopPropagation();
     similarity.flagged = !similarity.flagged;
     this.taskSimilarityService
-      .update({ taskId: similarity.task.id, id: similarity.id }, { entity: similarity })
+      .update({taskId: similarity.task.id, id: similarity.id}, {entity: similarity})
       .subscribe((_) => {
         this.alertsService.success('Similarity flag updated');
         similarity.task.similarityFlag = similarity.task.similarityCache.currentValues
@@ -50,8 +66,38 @@ export class TaskSimilarityViewComponent implements OnChanges {
   openReport(e: Event, similarity: TaskSimilarity) {
     e.stopPropagation();
     // Open similarity report in new tab
-    similarity.fetchSimilarityReportUrl().subscribe((url) => {
-      window.open(url, '_blank');
+    similarity.fetchSimilarityReportUrl().subscribe({
+      next: (url) => {
+        window.open(url, '_blank');
+      },
+      error: (err) => {
+        this.alertsService.error(`Error accessing TurnItIn: ${err}`);
+      },
     });
   }
+
+  viewJplagReport(similarity: TaskSimilarity) {
+    // Students are identified by their username in JPlag reports (configured by API)
+    // In most cases, usernames are a combination of their first and last names
+    this.fileDownloaderService.downloadBlob(
+      this.task.definition.getJplagReportUrl(),
+      (_, response: HttpResponse<Blob>) => {
+        // Open JPlag report viewer in embedded iframe
+        setTimeout(() => {
+          this.jplagViewer.uploadReport(response.body);
+          setTimeout(() => {
+            // Open comparison between the two students
+            this.jplagViewer.openComparison(
+              similarity.task.project.student.username,
+              similarity.otherStudent.username,
+            );
+            this.jplagOpenState = true;
+          }, 100);
+        }, 100);
+      },
+      (error) => {
+        console.error(error);
+      },
+    );
+  }
 }
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html
index e210890833..52631d7d38 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html
@@ -1,44 +1,82 @@
 <mat-card appearance="outlined">
   @if (triggers?.length > 0) {
-  <mat-form-field class="px-4 pt-4" appearance="outline">
-    <mat-select [value]="task?.status" (selectionChange)="triggerTransition($event.value)">
-      <mat-select-trigger>
-        <span style="display: inline-flex">
-          <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
-          <h2 class="mb-0">{{ task?.statusLabel() }}</h2>
-        </span>
-      </mat-select-trigger>
-      @for (trigger of triggers; track trigger) {
-      <mat-option [value]="trigger.status">
-        <status-icon [status]="trigger.status" [showTooltip]="false"></status-icon>
-        <span style="display: inline-flex; margin-left: 10px"
-          ><h5>{{ trigger.label }}</h5></span
-        >
-      </mat-option>
-      }
-    </mat-select>
-  </mat-form-field>
-  } @if (triggers?.length < 0) {
-  <mat-card-title>
-    <span style="display: inline-flex">
-      <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
-      <h5>{{ task?.statusLabel() }}</h5>
-    </span>
-  </mat-card-title>
+    <mat-form-field appearance="outline" class="px-2.5 pt-2.5">
+      <mat-select
+        [disabled]="task?.blockedByPrerequisiteTasks() && !isTutor"
+        [value]="$safeNavigationMigration(task?.status)"
+        (selectionChange)="triggerTransition($event.value)"
+      >
+        <mat-select-trigger>
+          <span style="display: inline-flex">
+            <status-icon
+              style="margin-right: 10px"
+              [status]="$safeNavigationMigration(task?.status)"
+            ></status-icon>
+            <h2 class="mb-0">{{ task?.statusLabel() }}</h2>
+          </span>
+        </mat-select-trigger>
+        @for (trigger of triggers; track trigger) {
+          <mat-option [value]="trigger.status">
+            <div class="flex items-center">
+              <status-icon [showTooltip]="false" [status]="trigger.status"></status-icon>
+              <h5 class="m-0 ml-2">{{ trigger.label }}</h5>
+            </div>
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+  @if (triggers?.length < 0) {
+    <mat-card-title>
+      <span style="display: inline-flex">
+        <status-icon
+          style="margin-right: 10px"
+          [status]="$safeNavigationMigration(task?.status)"
+        ></status-icon>
+        <h5>{{ task?.statusLabel() }}</h5>
+      </span>
+    </mat-card-title>
   }
 
   <mat-card-content>
     <p>{{ task?.statusHelp().reason }} {{ task?.statusHelp().action }}</p>
+    @if (task?.blockedByPrerequisiteTasks()) {
+      <p>
+        To submit this task, you must first complete all tasks that are listed as prerequisites.
+      </p>
+    }
   </mat-card-content>
 
-  @if ( task?.unit.currentUserIsStaff || task?.canApplyForExtension() || (task?.inSubmittedState() &&
-  task?.requiresFileUpload()) ) {
-  <mat-card-actions class="space-x-2">
-    @if (task?.canApplyForExtension()) {
-    <button mat-stroked-button (click)="applyForExtension()">Request extension</button>
-    } @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
-    <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
-    }
+  <mat-card-actions class="w-full justify-between">
+    <div class="space-x-1">
+      <button
+        mat-stroked-button
+        [disabled]="
+          isReadyForFeedback() ||
+          (task?.blockedByPrerequisiteTasks() && !isTutor) ||
+          isSubmittedForPortfolio()
+        "
+        (click)="uploadSubmission()"
+      >
+        Upload Submission
+      </button>
+
+      @if (task?.canApplyForExtension()) {
+        <button mat-stroked-button (click)="applyForExtension()">Request extension</button>
+      }
+      @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
+        <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
+      }
+    </div>
+
+    <div>
+      <button aria-label="More task options" mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <div class="flex-1"></div>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="openFeedbackAppealModal()">Request Feedback Review</button>
+      </mat-menu>
+    </div>
   </mat-card-actions>
-  }
 </mat-card>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.spec.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.spec.ts
index 10fe559f67..d377730a00 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.spec.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.spec.ts
@@ -1,6 +1,21 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute} from '@angular/router';
+import {EMPTY} from 'rxjs';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {ExtensionModalService} from 'src/app/common/modals/extension-modal/extension-modal.service';
+import {QrModalService} from 'src/app/common/modals/qr-modal/qr-modal.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {FeedbackAppealModalService} from 'src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.service';
+import {SubmissionTypeModalService} from 'src/app/tasks/modals/submission-type-modal/submission-type-modal.service';
+import {TaskStatusCardComponent} from './task-status-card.component';
 
-import { TaskStatusCardComponent } from './task-status-card.component';
+const taskServiceStub = {
+  taskStatusUpdated$: EMPTY,
+};
+const emptyProvider = {};
 
 describe('TaskStatusCardComponent', () => {
   let component: TaskStatusCardComponent;
@@ -8,13 +23,26 @@ describe('TaskStatusCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TaskStatusCardComponent ]
+      declarations: [TaskStatusCardComponent],
+      providers: [
+        {provide: ExtensionModalService, useValue: emptyProvider},
+        {provide: TaskService, useValue: taskServiceStub},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+        {provide: QrModalService, useValue: emptyProvider},
+        {provide: DoubtfireConstants, useValue: emptyProvider},
+        {provide: SubmissionTypeModalService, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: FeedbackAppealModalService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(TaskStatusCardComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(TaskStatusCardComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts
index d33646b066..b0ffc76283 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts
@@ -1,35 +1,66 @@
-import { AfterViewInit, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { UIRouter } from '@uirouter/core';
-import * as _ from 'lodash';
-import { Task } from 'src/app/api/models/task';
-import { TaskStatusEnum } from 'src/app/api/models/task-status';
-import { TaskService } from 'src/app/api/services/task.service';
-import { ExtensionModalService } from 'src/app/common/modals/extension-modal/extension-modal.service';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Subscription} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+import {TaskStatusEnum, TaskStatusUiData} from 'src/app/api/models/task-status';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {ExtensionModalService} from 'src/app/common/modals/extension-modal/extension-modal.service';
+import {QrModalService} from 'src/app/common/modals/qr-modal/qr-modal.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {FeedbackAppealModalService} from 'src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.service';
+import {SubmissionTypeModalService} from 'src/app/tasks/modals/submission-type-modal/submission-type-modal.service';
 
 @Component({
   selector: 'f-task-status-card',
   templateUrl: './task-status-card.component.html',
   styleUrls: ['./task-status-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  triggers: any;
+export class TaskStatusCardComponent implements OnChanges, AfterViewInit, OnDestroy {
+  triggers: TaskStatusUiData[];
   textCss: string;
+  private taskStatusSub: Subscription;
+
   constructor(
     private extensions: ExtensionModalService,
     private taskService: TaskService,
-    private router: UIRouter,
-  ) {}
+    private route: ActivatedRoute,
+    private qrModalService: QrModalService,
+    private doubtfireConstants: DoubtfireConstants,
+    private submissionTypeModalService: SubmissionTypeModalService,
+    private userService: UserService,
+    private feedbackAppealService: FeedbackAppealModalService,
+  ) {
+    this.taskStatusSub = this.taskService.taskStatusUpdated$.subscribe((task) => {
+      if (this.isCurrentTask(task)) {
+        this.reapplyTriggers();
+      }
+    });
+  }
 
   @Input() task: Task;
   taskStatusColor: string;
 
+  private project?: Project;
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.task) {
       this.task = changes.task.currentValue;
       this.reapplyTriggers();
       this.taskStatusColor = this.taskService.statusColors.get(this.task.statusClass());
-
+      this.project = this.task.project;
       this.textCss = `::ng-deep f-task-status-card .mat-mdc-text-field-wrapper.mdc-text-field {
         background-color: #${this.taskStatusColor} !important;
       }`;
@@ -40,30 +71,105 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
     document.getElementsByTagName('style')[0].append(this.textCss);
   }
 
+  ngOnDestroy(): void {
+    this.taskStatusSub?.unsubscribe();
+  }
+
+  private isCurrentTask(task: Task): boolean {
+    return (
+      task &&
+      this.task &&
+      task.project?.id === this.task.project?.id &&
+      task.definition?.id === this.task.definition?.id
+    );
+  }
+
   reapplyTriggers(): void {
     // if tutor is in queryParam
-    if (this.router.globals.params.tutor != null) {
-      this.triggers = this.taskService.statusKeys.map(this.taskService.statusData);
+    if (this.isTutor) {
+      this.triggers = this.taskService.statusKeys
+        .map((k) => this.taskService.statusData(k))
+        .filter((trigger) => {
+          if (trigger.status !== 'complete') {
+            return true;
+          }
+
+          return this.task.canMarkComplete || this.task.status === 'complete';
+        });
     } else {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const studentTriggers = _.map(this.taskService.switchableStates.student, this.taskService.statusData) as any;
+      const studentTriggers = (this.taskService.switchableStates.student as TaskStatusEnum[]).map(
+        (k) => this.taskService.statusData(k),
+      );
       const filteredStudentTriggers = this.task.filterFutureStates(studentTriggers);
       this.triggers = filteredStudentTriggers;
+      // Ensure the current task's status is in the list
+      if (!this.triggers.find((t) => t.status === this.task.status)) {
+        this.triggers.push(this.taskService.statusData(this.task.status));
+      }
     }
-    this.taskService.statusKeys;
+  }
+
+  public isReadyForFeedback(): boolean {
+    return this.task.status === 'ready_for_feedback';
+  }
+
+  public isSubmittedForPortfolio(): boolean {
+    return this.task.status === 'assess_in_portfolio';
   }
 
   triggerTransition(trigger: TaskStatusEnum): void {
-    this.task.triggerTransition(trigger);
+    if (trigger === 'complete' && !this.task.canMarkComplete) {
+      return;
+    }
+
+    if (trigger === 'ready_for_feedback') {
+      this.uploadSubmission();
+    } else {
+      this.task.triggerTransition(trigger);
+    }
+  }
+
+  uploadSubmission(): void {
+    if (this.task.definition.assessInPortfolioOnly) {
+      this.submissionTypeModalService.show(this.task);
+    } else {
+      this.task.triggerTransition('ready_for_feedback');
+    }
   }
 
   updateFilesInSubmission(): void {
     this.task.presentTaskSubmissionModal(this.task.status, true);
   }
 
+  openDiscussionQrCode(): void {
+    const hostName = this.doubtfireConstants.HOST_URL;
+    const url = `${hostName}/tutor-discussion?unitId=${this.task.unit.id}&username=${this.userService.currentUser.username}`;
+    this.qrModalService.show(
+      url,
+      'Display this QR code during your class so your tutor can scan it to view your submissions and mark your tasks as complete.',
+    );
+  }
+
   applyForExtension(): void {
     this.extensions.show(this.task, () => {
       this.task.refresh();
     });
   }
+
+  openFeedbackAppealModal(): void {
+    this.feedbackAppealService.show(this.task);
+  }
+
+  public get currentUnitRole(): UnitRole | undefined {
+    const currentUser = this.userService.currentUser;
+    return this.project?.unit?.staff.find((ur) => ur.user.id === currentUser.id);
+  }
+
+  public get isTutor(): boolean {
+    return (
+      this.currentUnitRole?.role === 'Convenor' ||
+      this.currentUnitRole?.role === 'Tutor' ||
+      this.userService.currentUser.systemRole === 'Admin'
+    );
+  }
 }
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.html
index ca9f850437..6eb158a21b 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.html
@@ -1,57 +1,73 @@
-<mat-card appearance="outlined" [hidden]="!(submission?.isUploaded || submission?.isProcessing)">
+<mat-card appearance="outlined" [hidden]="!(task?.hasPdf || task?.processingPdf)">
   <mat-card-header>
-    <mat-card-title>Submission <span [hidden]="!submission?.isProcessing">Processing</span></mat-card-title>
+    <mat-card-title
+      >Submission <span [hidden]="!task?.processingPdf">Processing</span></mat-card-title
+    >
   </mat-card-header>
   <mat-card-content>
-    <p [hidden]="!submission?.isProcessing">
-      Your submission is being processed and will be avaliable to view soon. You will also be able to download your most
-      recently submitted files.
+    <p [hidden]="!task?.processingPdf">
+      Your submission is being processed and will be avaliable to view soon. You will also be able
+      to download your most recently submitted files.
     </p>
-    <p [hidden]="!submission?.isUploaded">
-      You can choose to download your <em [hidden]="!submission?.isProcessing">previous</em>
+    <p [hidden]="!task?.hasPdf">
+      You can choose to download your <em [hidden]="!task?.processingPdf">previous</em>
       submission or the files you uploaded below.
     </p>
-    <p [hidden]="!submission?.isUploaded">
-      You uploaded this submission <strong>{{ task.submissionDate | humanizedDate }}</strong
-      >.
-    </p>
+    @if (task?.hasPdf && task.submissionDate) {
+      <p>
+        You uploaded this submission <strong>{{ task.submissionDate | date: 'dd/MM/yyyy' }}</strong
+        >.
+      </p>
+    }
     <p [hidden]="!canRegeneratePdf">
-      If you feel there has been an error in your submission, you can request to regenerate your submission under the
-      "Actions" dropdown menu.
+      If you feel there has been an error in your submission, you can request to regenerate your
+      submission under the "Actions" dropdown menu.
     </p>
-    <p [hidden]="!canReuploadEvidence">
-      If you would like to submit alternate evidence for use in your portfolio, you can upload alternate files under the
-      "Actions" dropdown menu.
+    <p [hidden]="!task?.inSubmittedState()">
+      If you would like to submit alternate evidence for use in your portfolio, you can upload
+      alternate files under the "Actions" dropdown menu.
     </p></mat-card-content
   >
-  <mat-card-actions class="space-x-2" [hidden]="!(submission?.isUploaded || canReuploadEvidence || canRegeneratePdf)">
-    <button mat-stroked-button [hidden]="!submission?.isUploaded" (click)="downloadSubmission()">
+  <mat-card-actions
+    class="space-x-1"
+    [hidden]="!(task?.hasPdf || task?.inSubmittedState() || canRegeneratePdf)"
+  >
+    <button mat-stroked-button [hidden]="!task?.hasPdf" (click)="downloadSubmission()">
       Download submission
     </button>
     <button
-      mat-icon-button
       aria-label="More download options"
+      mat-icon-button
+      [hidden]="!task?.hasPdf"
       [matMenuTriggerFor]="menu"
-      [hidden]="!submission?.isUploaded"
     >
       <mat-icon>more_vert</mat-icon>
     </button>
-    <div fxFlex></div>
+    <div class="flex-1"></div>
     <mat-menu #menu="matMenu">
       <button mat-menu-item (click)="downloadSubmissionFiles()">Download original files</button>
     </mat-menu>
 
-    <button [hidden]="!canReuploadEvidence || !canRegeneratePdf" mat-stroked-button [matMenuTriggerFor]="menu2">
+    <button
+      mat-stroked-button
+      [hidden]="!task?.inSubmittedState() || !canRegeneratePdf"
+      [matMenuTriggerFor]="menu2"
+    >
       Actions
-      <mat-icon aria-hidden="false" aria-label="dropdown icon" style="width: 20px; height: 20px; font-size: 20px"
+      <mat-icon
+        aria-hidden="false"
+        aria-label="dropdown icon"
+        style="width: 20px; height: 20px; font-size: 20px"
         >arrow_drop_down</mat-icon
       >
     </button>
     <mat-menu #menu2="matMenu">
-      <button [hidden]="!canReuploadEvidence" mat-menu-item (click)="uploadAlternateFiles()">
+      <button mat-menu-item [hidden]="!task?.inSubmittedState()" (click)="uploadAlternateFiles()">
         Upload alternate files
       </button>
-      <button [hidden]="!canRegeneratePdf" mat-menu-item (click)="regeneratePdf()">Regenerate PDFs</button>
+      <button mat-menu-item [hidden]="!canRegeneratePdf" (click)="regeneratePdf()">
+        Regenerate PDFs
+      </button>
     </mat-menu>
   </mat-card-actions>
 </mat-card>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.spec.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.spec.ts
index a07544b4ed..21b537a0ca 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.spec.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.spec.ts
@@ -1,6 +1,12 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TaskService} from 'src/app/api/services/task.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TaskSubmissionCardComponent} from './task-submission-card.component';
 
-import { TaskSubmissionCardComponent } from './task-submission-card.component';
+const emptyProvider = {};
 
 describe('TaskSubmissionCardComponent', () => {
   let component: TaskSubmissionCardComponent;
@@ -8,13 +14,21 @@ describe('TaskSubmissionCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TaskSubmissionCardComponent ]
+      declarations: [TaskSubmissionCardComponent],
+      providers: [
+        {provide: TaskService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: FileDownloaderService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(TaskSubmissionCardComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(TaskSubmissionCardComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.ts
index 771b1ce53e..1af683d9ad 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.component.ts
@@ -1,27 +1,44 @@
-import { Component, Inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { uploadSubmissionModal } from 'src/app/ajs-upgraded-providers';
-import { Task } from 'src/app/api/models/task';
-import { TaskService } from 'src/app/api/services/task.service';
-import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {Task} from 'src/app/api/models/task';
+import {TaskService} from 'src/app/api/services/task.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'f-task-submission-card',
   templateUrl: './task-submission-card.component.html',
   styleUrls: ['./task-submission-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskSubmissionCardComponent implements OnChanges, OnInit {
   @Input() task: Task;
-  canReuploadEvidence: boolean;
-  canRegeneratePdf: boolean;
-  submission: { isProcessing: boolean; isUploaded: boolean } = { isProcessing: false, isUploaded: false };
-  urls: { pdf: string; files: string };
+
+  public get canRegeneratePdf(): boolean {
+    return (
+      this.taskService.pdfRegeneratableStatuses.includes(this.task?.status) && this.task?.hasPdf
+    );
+  }
+
+  public get taskPdfUrl(): string {
+    return this.task?.submissionUrl(true);
+  }
+
+  public get taskFilesUrl(): string {
+    return this.task?.submittedFilesUrl();
+  }
 
   constructor(
     private taskService: TaskService,
-    @Inject(uploadSubmissionModal) private UploadSubmissionModal,
     private alerts: AlertService,
-    private fileDownloader: FileDownloaderService
+    private fileDownloader: FileDownloaderService,
   ) {}
 
   ngOnInit(): void {
@@ -37,18 +54,7 @@ export class TaskSubmissionCardComponent implements OnChanges, OnInit {
   }
 
   reapplySubmissionData(): void {
-    this.task.getSubmissionDetails().subscribe(() => {
-      this.canReuploadEvidence = this.task.inSubmittedState();
-      this.canRegeneratePdf = this.taskService.pdfRegeneratableStatuses.includes(this.task.status) && this.task.hasPdf;
-      this.submission = {
-        isProcessing: this.task.processingPdf,
-        isUploaded: this.task.hasPdf,
-      };
-      this.urls = {
-        pdf: this.task.submissionUrl(true),
-        files: this.task.submittedFilesUrl(),
-      };
-    });
+    this.task.getSubmissionDetails().subscribe();
   }
 
   uploadAlternateFiles(): void {
@@ -57,28 +63,28 @@ export class TaskSubmissionCardComponent implements OnChanges, OnInit {
 
   regeneratePdf(): void {
     this.task.recreateSubmissionPdf().subscribe({
-      next: (response: any) => {
+      next: (response: {result: string}) => {
         if (response.result === 'false') {
           this.alerts.error('There was an error regenerating the PDF', 6000);
         } else {
           this.task.processingPdf = true;
           this.alerts.success(
             'The PDF is being regenerated. Please refresh the page in a few minutes.',
-            6000
+            6000,
           );
         }
       },
-      error: (response: any) => {
+      error: (_response: Error) => {
         this.alerts.error('Request failed, cannot recreate PDF at this time.', 6000);
       },
     });
   }
 
   downloadSubmission(): void {
-    this.fileDownloader.downloadFile(this.urls.pdf, `${this.task.definition.abbreviation}.pdf`);
+    this.fileDownloader.downloadFile(this.taskPdfUrl, `${this.task.definition.abbreviation}.pdf`);
   }
 
   downloadSubmissionFiles(): void {
-    this.fileDownloader.downloadFile(this.urls.files, `${this.task.definition.abbreviation}.zip`);
+    this.fileDownloader.downloadFile(this.taskFilesUrl, `${this.task.definition.abbreviation}.zip`);
   }
 }
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.tpl.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.tpl.html
index b4d417cc17..ec25e0f0d2 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.tpl.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-submission-card/task-submission-card.tpl.html
@@ -4,29 +4,34 @@ <h4>
       Submission
       <span ng-show="submission.isProcessing">Processing</span>
     </h4>
-  </div><!--/card-heading-->
-  <div class="card-body" >
+  </div>
+  <!--/card-heading-->
+  <div class="card-body">
     <p ng-show="submission.isProcessing">
-      Your submission is being processed and will be avaliable to view soon. You will also
-      be able to download your most recently submitted files.
+      Your submission is being processed and will be avaliable to view soon. You will also be able
+      to download your most recently submitted files.
     </p>
     <p ng-show="submission.isUploaded">
       You can choose to download your <em ng-show="submission.isProcessing">previous</em>
       submission or the files you uploaded below.
     </p>
     <p ng-show="submission.isUploaded">
-      You uploaded this submission <strong>{{task.submissionDate | humanizedDate}}</strong>.
+      You uploaded this submission <strong>{{task.submissionDate | date: 'dd/MM/yyyy'}}</strong>.
     </p>
     <p ng-show="canRegeneratePdf">
-      If you feel there has been an error in your submission, you can request to
-      regenerate your submission under the "Actions" dropdown menu.
+      If you feel there has been an error in your submission, you can request to regenerate your
+      submission under the "Actions" dropdown menu.
     </p>
     <p ng-show="canReuploadEvidence">
-      If you would like to submit alternate evidence for use in your portfolio, you can
-      upload alternate files under the "Actions" dropdown menu.
+      If you would like to submit alternate evidence for use in your portfolio, you can upload
+      alternate files under the "Actions" dropdown menu.
     </p>
-  </div><!--/card-body-->
-  <div class="card-footer clearfix" ng-show="submission.isUploaded || canReuploadEvidence || canRegeneratePdf">
+  </div>
+  <!--/card-body-->
+  <div
+    class="card-footer clearfix"
+    ng-show="submission.isUploaded || canReuploadEvidence || canRegeneratePdf"
+  >
     <div class="btn-group" ng-show="submission.isUploaded" dropdown>
       <button class="btn btn-primary" ng-click="downloadSubmission()">
         <i class="fa fa-download"></i>
@@ -37,12 +42,11 @@ <h4>
       </button>
       <ul class="dropdown-menu">
         <li>
-          <a ng-click="downloadSubmissionFiles()">
-            Download Uploaded Files
-          </a>
+          <a ng-click="downloadSubmissionFiles()"> Download Uploaded Files </a>
         </li>
       </ul>
-    </div><!--/download-submission-->
+    </div>
+    <!--/download-submission-->
     <div class="task-status pull-right" ng-show="canReuploadEvidence || canRegeneratePdf" dropdown>
       <button type="button" class="btn btn-default" dropdown-toggle>
         Actions <span class="caret"></span>
@@ -55,6 +59,9 @@ <h4>
           <a ng-click="regeneratePdf()">Regenerate PDF</a>
         </li>
       </ul>
-    </div><!--/more-dropdown-->
-  </div><!--/card-footer-->
-</div><!--/card-->
+    </div>
+    <!--/more-dropdown-->
+  </div>
+  <!--/card-footer-->
+</div>
+<!--/card-->
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.html
new file mode 100644
index 0000000000..d499e7309c
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.html
@@ -0,0 +1,20 @@
+<div class="h-[calc(100%-154px)] p-2.5">
+  <div class="flex items-center">
+    <mat-icon class="mr-1">comment</mat-icon>
+    <h1 class="mat-headline m-0">Moderation Notes for {{ unitRole?.user?.name }}</h1>
+  </div>
+  @if (task) {
+    <p>
+      {{ task.definition.abbreviation }} {{ task.definition.name }} ({{
+        task.project.student.displayName
+      }})
+    </p>
+  }
+  <p>
+    Notes left here are for staff-only discussion about the feedback given to the student. Use this
+    space to question, clarify, or discuss the tutor’s feedback. These notes are visible to
+    {{ unitRole?.user?.name }} and other convenors.
+  </p>
+
+  <f-tutor-notes [task]="task" [unitRole]="unitRole"></f-tutor-notes>
+</div>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.ts
new file mode 100644
index 0000000000..6b44ee689b
--- /dev/null
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/tutor-notes-view/tutor-notes-view.component.ts
@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {UnitRole} from 'src/app/api/models/unit-role';
+
+@Component({
+  selector: 'f-tutor-notes-view',
+  templateUrl: './tutor-notes-view.component.html',
+  styleUrls: ['./tutor-notes-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TutorNotesViewComponent implements OnChanges {
+  @Input() task?;
+  @Input() unitRole: UnitRole;
+
+  private inferredUnitRole = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.unitRole?.currentValue) {
+      this.inferredUnitRole = false;
+    }
+
+    if (this.task && (!this.unitRole || this.inferredUnitRole)) {
+      this.unitRole = this.task.tutor;
+      this.inferredUnitRole = true;
+    }
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.coffee b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.coffee
deleted file mode 100644
index 62292ad919..0000000000
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.coffee
+++ /dev/null
@@ -1,79 +0,0 @@
-angular.module('doubtfire.projects.states.dashboard.directives.task-dashboard', [])
-#
-# Dashboard of task-related info
-#
-.directive('taskDashboard', ->
-  restrict: 'E'
-  templateUrl: 'projects/states/dashboard/directives/task-dashboard/task-dashboard.tpl.html'
-  scope:
-    task: '='
-    showFooter: '@?'
-    showSubmission: '@?'
-  controller: ($scope, $stateParams, listenerService, newTaskService, DoubtfireConstants, TaskAssessmentModal, fileDownloaderService) ->
-    $scope.overseerEnabled = DoubtfireConstants.IsOverseerEnabled
-
-    $scope.overseerEnabled = () ->
-      DoubtfireConstants.IsOverseerEnabled.value && $scope.task?.overseerEnabled
-
-    # Is the current user a tutor?
-    $scope.tutor = $stateParams.tutor
-    # the ways in which the dashboard can be viewed
-    $scope.dashboardViews = ["details", "submission", "task"]
-
-    # set the current dashboard view to details by default
-    updateCurrentView = ->
-      if $scope.showSubmission
-        $scope.currentView = $scope.dashboardViews[1]
-      else
-        $scope.currentView = $scope.dashboardViews[0]
-
-    updateCurrentView()
-
-    # Cleanup
-    listeners = listenerService.listenTo($scope)
-    # Required changes when task changes
-    listeners.push $scope.$watch('task.id', ->
-      return unless $scope.task?
-      # get the url for the task sheet and the submissions
-      $scope.urls = {
-        taskSheetPdfUrl: $scope.task.definition.getTaskPDFUrl()
-        taskSubmissionPdfUrl: $scope.task.submissionUrl()
-        taskSubmissionPdfAttachmentUrl: $scope.task.submissionUrl(true)
-        taskFilesUrl: $scope.task.submittedFilesUrl()
-      }
-
-      updateCurrentView()
-    )
-
-    # Set the selected dashboard view
-    $scope.setSelectedDashboardView = (view) ->
-      if view in $scope.dashboardViews
-        $scope.currentView = view
-    # Is the current view?
-    $scope.isCurrentView = (view) ->
-      return $scope.currentView == view
-
-    $scope.showSubmissionHistoryModal = ->
-      TaskAssessmentModal.show($scope.task)
-
-    # Now also load in the assessment details
-    if $scope.showFooter
-      $scope.taskStatusData =
-        keys:   _.sortBy(newTaskService.markedStatuses, (s) -> newTaskService.statusSeq.get(s))
-        help:   newTaskService.helpDescriptions
-        icons:  newTaskService.statusIcons
-        labels: newTaskService.statusLabels
-        class:  newTaskService.statusClass
-
-      # Triggers a new update to the task status
-      $scope.triggerTransition = (status) ->
-        $scope.task.updateTaskStatus(status)
-
-    $scope.downloadSubmission = () ->
-      fileDownloaderService.downloadFile($scope.urls.taskSubmissionPdfAttachmentUrl)
-
-    $scope.downloadSubmittedFiles = () ->
-      fileDownloaderService.downloadFile($scope.urls.taskFilesUrl)
-
-
-)
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html
index b2d723387c..daab0c8a7b 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html
@@ -1,27 +1,193 @@
-<div class="w-full h-full overflow-auto">
-  <ng-container [ngSwitch]="currentView">
-    <ng-template [ngSwitchCase]="DashboardViews.task">
-      <ng-container *ngIf="selectedTaskService.hasTaskSheet; then pdfViewer; else noPdfUrl"></ng-container>
-    </ng-template>
+<div class="flex size-full flex-col overflow-hidden">
+  <div class="z-10 flex w-full shrink-0 items-center gap-1">
+    <mat-tab-group
+      class="task-dashboard-tabs min-w-0 flex-1"
+      dynamicHeight
+      [(selectedIndex)]="currentIndex"
+      (selectedTabChange)="onTabChange($event)"
+    >
+      <mat-tab label="Task Details"></mat-tab>
+      <mat-tab label="Task Sheet" [disabled]="!task.definition.hasTaskSheet"></mat-tab>
+      <mat-tab [disabled]="!task.hasPdf && !task.processingPdf">
+        <ng-template mat-tab-label>
+          <span class="flex items-center gap-1">
+            Your Submission
+            @if (task.processingPdf) {
+              <mat-spinner diameter="16"></mat-spinner>
+            }
+          </span>
+        </ng-template>
+      </mat-tab>
+      @if (canAccessStaffViews) {
+        <mat-tab label="History"></mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="inline-flex items-center gap-1">
+              Similarities
+              @if (task.similaritiesDetected) {
+                <mat-icon class="text-red-500">warning</mat-icon>
+              }
+            </span>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="inline-flex items-center gap-1">
+              Student Notes
+              @if (task.project.staffNoteCount) {
+                <span
+                  class="ml-0.5 inline-flex size-[22px] items-center justify-center rounded-full p-0 text-[12px] leading-[22px] font-semibold text-white"
+                  style="background-color: #3939ff"
+                >
+                  {{ task.project.staffNoteCount }}
+                </span>
+              }
+            </span>
+          </ng-template>
+        </mat-tab>
+        @if (canAccessTutorNotes) {
+          <mat-tab label="Mod Notes"></mat-tab>
+        }
+      }
+    </mat-tab-group>
 
-    <ng-template [ngSwitchCase]="DashboardViews.submission">
-      <ng-container *ngIf="selectedTaskService.hasSubmissionPdf; then pdfViewer; else noPdfUrl"></ng-container>
-    </ng-template>
+    <button
+      aria-label="Task actions"
+      class="shrink-0 text-gray-600"
+      mat-icon-button
+      [matMenuTriggerFor]="taskMenu"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
 
-    <ng-template [ngSwitchCase]="DashboardViews.similarity">
-      <f-task-similarity-view [task]="task"></f-task-similarity-view>
-    </ng-template>
-  </ng-container>
+    <mat-menu #taskMenu="matMenu" xPosition="before">
+      <button mat-menu-item [disabled]="!task.hasPdf" (click)="downloadSubmission()">
+        <mat-icon>download</mat-icon>
+        <span>Download submission PDF</span>
+      </button>
+      <button mat-menu-item [disabled]="!task.hasPdf" (click)="downloadSubmittedFiles()">
+        <mat-icon>folder_zip</mat-icon>
+        <span>Download submitted files</span>
+      </button>
+    </mat-menu>
+  </div>
 
-  <!-- The PDF Viewer -->
-  <ng-template #pdfViewer>
-    <f-pdf-viewer [pdfUrl]="pdfUrl"></f-pdf-viewer>
+  <div class="min-h-0 flex-1 overflow-auto">
+    @switch (currentView) {
+      @case (DashboardViews.details) {
+        <div class="flex flex-col gap-3 p-3">
+          <f-task-ilos-card
+            [iloContextType]="'TaskDefinition'"
+            [taskDef]="task.definition"
+          ></f-task-ilos-card>
+          <f-task-description-card
+            [task]="task"
+            [taskDef]="task.definition"
+            [unit]="task.unit"
+          ></f-task-description-card>
+          <f-task-prerequisites-card
+            [task]="task"
+            [taskDefinition]="task.definition"
+          ></f-task-prerequisites-card>
+          <f-task-scorm-card [task]="task"></f-task-scorm-card>
+          <f-task-status-card [task]="task"></f-task-status-card>
+          <f-task-due-card [task]="task"></f-task-due-card>
+          <f-task-assessment-card [task]="task"></f-task-assessment-card>
+          <f-task-submission-card [task]="task"></f-task-submission-card>
+          @if (canViewPeerProgress) {
+            <f-ppi-widget [task]="task" [taskDef]="task.definition"></f-ppi-widget>
+          }
+        </div>
+      }
+      <!-- <ng-template [ngSwitchCase]="DashboardViews.task">
+    <ng-container
+      *ngIf="selectedTaskService.hasTaskSheet; then pdfViewer; else noPdfUrl"
+    ></ng-container>
   </ng-template>
+  <ng-template [ngSwitchCase]="DashboardViews.submission">
+    <ng-container
+      *ngIf="selectedTaskService.hasSubmissionPdf; then pdfViewer; else noPdfUrl"
+    ></ng-container>
+  </ng-template> -->
+      @case (DashboardViews.task) {
+        @if (task && task.blockedByPrerequisiteTasks()) {
+          <div
+            class="flex items-center border-x-4 border-yellow-500 bg-yellow-100 px-2.5 py-2 text-center text-yellow-700"
+          >
+            <mat-icon class="mr-1">warning</mat-icon>
+            Warning: This task has
+            {{ task.definition.taskPrerequisitesCache.currentValues.length }} prerequisite{{
+              task.definition.taskPrerequisitesCache.currentValues.length > 1 ? 's' : ''
+            }}
+            that you still need to complete. You won’t be able to submit this task until all
+            prerequisites are met.
+          </div>
+        }
+        @if (task.definition.hasTaskSheet) {
+          <f-pdf-viewer [pdfUrl]="task.definition.getTaskPDFUrl()" [startPage]="1"></f-pdf-viewer>
+        } @else {
+          <div class="flex size-full flex-col items-center justify-center">
+            <mat-icon class="empty-state-icon">subtitles_off</mat-icon>
+          </div>
+        }
+      }
+      @case (DashboardViews.submission) {
+        @if (task.hasPdf) {
+          <f-pdf-viewer [pdfUrl]="task.submissionUrl()" [startPage]="2"></f-pdf-viewer>
+        } @else {
+          <div class="flex size-full flex-col items-center justify-center">
+            <mat-icon class="empty-state-icon">subtitles_off</mat-icon>
+          </div>
+        }
+      }
+      @case (DashboardViews.similarity) {
+        @if (canAccessStaffViews) {
+          <div class="h-full overflow-auto">
+            <f-task-similarity-view [task]="task"></f-task-similarity-view>
+          </div>
+        }
+      }
+      @case (DashboardViews.submission_history) {
+        @if (canAccessStaffViews) {
+          <div class="h-full overflow-auto">
+            <f-task-overseer-report [task]="task"></f-task-overseer-report>
+          </div>
+        }
+      }
+      @case (DashboardViews.staff_notes) {
+        @if (canAccessStaffViews) {
+          <div class="h-full">
+            <f-staff-notes-view [project]="task.project"></f-staff-notes-view>
+          </div>
+        }
+      }
+      @case (DashboardViews.tutor_notes) {
+        <div class="h-full overflow-auto">
+          @if (canAccessTutorNotes) {
+            <f-tutor-notes-view [task]="task"></f-tutor-notes-view>
+          }
+        </div>
+      }
+      @case (DashboardViews.discussion_prompts) {
+        @if (canAccessStaffViews) {
+          <f-discussion-prompts-view
+            [project]="task.project"
+            [taskDefinition]="task.definition"
+          ></f-discussion-prompts-view>
+        }
+      }
+    }
+  </div>
+
+  <!-- The PDF Viewer -->
+  <!-- <ng-template #pdfViewer>
+<f-pdf-viewer [pdfUrl]="pdfUrl" [startPage]="2"></f-pdf-viewer>
+</ng-template> -->
 
   <!-- Render if no PDF URL is available for the current view -->
   <ng-template #noPdfUrl>
-    <div class="flex flex-col w-full h-full justify-center items-center">
-      <mat-icon>subtitles_off</mat-icon>
+    <div class="flex size-full flex-col items-center justify-center">
+      <mat-icon class="empty-state-icon">subtitles_off</mat-icon>
     </div>
   </ng-template>
 </div>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.scss b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.scss
index d8fe31e746..2b2f7b6954 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.scss
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.scss
@@ -1,4 +1,4 @@
-mat-icon {
+.empty-state-icon {
   height: 120px;
   width: 120px;
   font-size: 120px;
@@ -9,3 +9,24 @@ mat-icon {
   font-size: 2.5rem;
   color: #c5c5c5;
 }
+
+:host ::ng-deep .task-dashboard-tabs {
+  .mat-mdc-tab-header {
+    justify-content: center;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+
+  .mat-mdc-tab-label-container {
+    flex: 0 0 auto;
+    margin: 0 auto;
+    overflow: visible;
+  }
+
+  .mat-mdc-tab-list,
+  .mat-mdc-tab-labels {
+    width: max-content;
+  }
+}
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.spec.ts b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.spec.ts
index abd4a08b1f..a7b5a2f898 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.spec.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.spec.ts
@@ -1,23 +1,222 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatMenuModule} from '@angular/material/menu';
+import {ActivatedRoute} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+import {Project, Task, User} from 'src/app/api/models/doubtfire-model';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {DashboardViews, SelectedTaskService} from '../../selected-task.service';
+import {TaskDashboardComponent} from './task-dashboard.component';
 
-import { TaskDashboardComponent } from './task-dashboard.component';
+const emptyProvider = {};
+const taskServiceStub = {
+  markedStatuses: [],
+  helpDescriptions: new Map(),
+  statusIcons: new Map(),
+  statusLabels: new Map(),
+  statusClass: new Map(),
+  statusSeq: new Map(),
+};
+const selectedTaskServiceStub = {
+  currentView$: new BehaviorSubject(DashboardViews.details),
+};
 
 describe('TaskDashboardComponent', () => {
   let component: TaskDashboardComponent;
   let fixture: ComponentFixture<TaskDashboardComponent>;
 
+  const userServiceStub: {currentUser?: User} = {};
+
   beforeEach(async () => {
+    userServiceStub.currentUser = undefined;
     await TestBed.configureTestingModule({
-      declarations: [ TaskDashboardComponent ]
-    })
-    .compileComponents();
+      declarations: [TaskDashboardComponent],
+      imports: [MatMenuModule],
+      providers: [
+        {provide: TaskService, useValue: taskServiceStub},
+        {provide: FileDownloaderService, useValue: emptyProvider},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+        {provide: UserService, useValue: userServiceStub},
+        {provide: SelectedTaskService, useValue: selectedTaskServiceStub},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(TaskDashboardComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('allows the project owner to view peer progress', () => {
+    const student = new User();
+    student.id = 10;
+
+    const project = new Project();
+    project.student = student;
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = student;
+
+    expect(component.canViewPeerProgress).toBe(true);
+  });
+
+  it('allows the project owner while the student relationship is still hydrating', () => {
+    const student = new User();
+    student.id = 10;
+
+    const project = new Project();
+    project.originalJson = {user_id: student.id};
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = student;
+
+    expect(project.student).toBeUndefined();
+    expect(component.canViewPeerProgress).toBe(true);
+  });
+
+  it('does not allow another user to view peer progress', () => {
+    const student = new User();
+    student.id = 10;
+
+    const otherUser = new User();
+    otherUser.id = 20;
+
+    const project = new Project();
+    project.student = student;
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = otherUser;
+
+    expect(component.canViewPeerProgress).toBe(false);
+  });
+
+  it('hides peer progress when the project owner turns the profile preference off', () => {
+    const student = new User();
+    student.id = 10;
+    student.displayPeerProgress = false;
+
+    const project = new Project();
+    project.student = student;
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = student;
+
+    expect(component.canViewPeerProgress).toBe(false);
+  });
+
+  it('preserves the project owner profile opt-out while the student relationship hydrates', () => {
+    const student = new User();
+    student.id = 10;
+    student.displayPeerProgress = false;
+
+    const project = new Project();
+    project.originalJson = {user_id: student.id};
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = student;
+
+    expect(component.canViewPeerProgress).toBe(false);
+  });
+
+  it('does not use raw ownership data to override a hydrated student mismatch', () => {
+    const currentUser = new User();
+    currentUser.id = 10;
+
+    const hydratedStudent = new User();
+    hydratedStudent.id = 20;
+
+    const project = new Project();
+    project.student = hydratedStudent;
+    project.originalJson = {user_id: currentUser.id};
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = currentUser;
+
+    expect(component.canViewPeerProgress).toBe(false);
+  });
+
+  it.each([undefined, null, '10', NaN, Infinity, 0, -10, 10.5])(
+    'rejects malformed raw project ownership value %s',
+    (rawUserId) => {
+      const student = new User();
+      student.id = 10;
+
+      const project = new Project();
+      project.originalJson = {user_id: rawUserId};
+
+      component.task = new Task(project);
+      userServiceStub.currentUser = student;
+
+      expect(component.canViewPeerProgress).toBe(false);
+    },
+  );
+
+  it('keeps peer progress on for a rolling API user without the new preference field', () => {
+    const student = new User();
+    student.id = 10;
+    student.displayPeerProgress = undefined;
+
+    const project = new Project();
+    project.student = student;
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = student;
+
+    expect(component.canViewPeerProgress).toBe(true);
+  });
+
+  it('hides peer progress when there is no current user', () => {
+    const student = new User();
+    student.id = 10;
+
+    const project = new Project();
+    project.student = student;
+
+    component.task = new Task(project);
+    userServiceStub.currentUser = undefined;
+
+    expect(component.canViewPeerProgress).toBe(false);
+  });
+
+  it('places the peer progress indicator after the submission panel in task details', () => {
+    const student = new User();
+    student.id = 10;
+    student.displayPeerProgress = true;
+
+    const project = new Project();
+    project.student = student;
+
+    component.task = {
+      project,
+      unit: {staff: []},
+      definition: {hasTaskSheet: false, hasTaskResources: false},
+      hasPdf: false,
+      processingPdf: false,
+    } as unknown as Task;
+    component.currentView = DashboardViews.details;
+    component.currentIndex = 0;
+    userServiceStub.currentUser = student;
+
+    fixture.detectChanges();
+
+    const details = fixture.nativeElement.querySelector('.flex.flex-col.gap-3.p-3');
+    const children = Array.from(details.children) as HTMLElement[];
+    const submissionIndex = children.findIndex(
+      (element) => element.tagName.toLowerCase() === 'f-task-submission-card',
+    );
+    const peerProgressIndex = children.findIndex(
+      (element) => element.tagName.toLowerCase() === 'f-ppi-widget',
+    );
+
+    expect(submissionIndex).toBeGreaterThan(-1);
+    expect(peerProgressIndex).toBe(submissionIndex + 1);
+  });
 });
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts
index 8446b9b113..47e2fb8fe4 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts
@@ -1,10 +1,18 @@
-import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import {UIRouter} from '@uirouter/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {ActivatedRoute} from '@angular/router';
+import {UnitRole} from 'src/app/api/models/doubtfire-model';
 import {Task} from 'src/app/api/models/task';
 import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
 import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
-import {TaskAssessmentModalService} from 'src/app/common/modals/task-assessment-modal/task-assessment-modal.service';
-import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 import {SelectedTaskService} from '../../selected-task.service';
 import {DashboardViews} from '../../selected-task.service';
 
@@ -12,37 +20,62 @@ import {DashboardViews} from '../../selected-task.service';
   selector: 'f-task-dashboard',
   templateUrl: './task-dashboard.component.html',
   styleUrls: ['./task-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDashboardComponent implements OnInit, OnChanges {
   @Input() task: Task;
   @Input() pdfUrl: string;
-
   public DashboardViews = DashboardViews;
 
-  public taskStatusData: any;
-  public tutor = this.router.globals.params.tutor;
+  public taskStatusData: {
+    keys: TaskService['markedStatuses'];
+    help: TaskService['helpDescriptions'];
+    icons: TaskService['statusIcons'];
+    labels: TaskService['statusLabels'];
+    class: TaskService['statusClass'];
+  };
+  public tutor = false;
   public urls: {
     taskSubmissionPdfAttachmentUrl: string;
     taskFilesUrl: string;
     taskSheetPdfUrl?: string;
     taskSubmissionPdfUrl?: string;
   };
-  public overseerEnabledObs = this.doubtfire.IsOverseerEnabled;
   public currentView: DashboardViews;
+  public currentIndex = 0;
+
+  private readonly tabViews: DashboardViews[] = [
+    DashboardViews.details,
+    DashboardViews.task,
+    DashboardViews.submission,
+    DashboardViews.submission_history,
+    DashboardViews.similarity,
+    DashboardViews.staff_notes,
+    DashboardViews.tutor_notes,
+  ];
+
+  onTabChange(event: MatTabChangeEvent) {
+    const view = this.tabViews[event.index];
+    if (view !== undefined) {
+      this.setSelectedDashboardView(view);
+    }
+  }
 
   constructor(
-    private doubtfire: DoubtfireConstants,
     private taskService: TaskService,
-    private taskAssessmentModal: TaskAssessmentModalService,
     private fileDownloader: FileDownloaderService,
-    private router: UIRouter,
+    private route: ActivatedRoute,
+    private userService: UserService,
     public selectedTaskService: SelectedTaskService,
   ) {}
 
   ngOnInit(): void {
-    this.selectedTaskService.currentView$.next(DashboardViews.submission);
+    this.tutor = this.currentUnitRole !== undefined;
+    this.setSelectedDashboardView(DashboardViews.details);
     this.selectedTaskService.currentView$.subscribe((view) => {
-      this.currentView = view;
+      this.currentView = this.canAccessDashboardView(view) ? view : DashboardViews.details;
+      this.currentIndex = this.tabIndexForView(this.currentView);
     });
 
     this.taskStatusData = {
@@ -64,15 +97,86 @@ export class TaskDashboardComponent implements OnInit, OnChanges {
         taskSubmissionPdfAttachmentUrl: changes.task.currentValue.submissionUrl(true),
         taskFilesUrl: changes.task.currentValue.submittedFilesUrl(),
       };
+      this.setSelectedDashboardView(DashboardViews.details);
+    }
+  }
+
+  setSelectedDashboardView(view: DashboardViews): void {
+    const nextView = this.canAccessDashboardView(view) ? view : DashboardViews.details;
+    this.selectedTaskService.currentView$.next(nextView);
+    this.currentView = nextView;
+    this.currentIndex = this.tabIndexForView(nextView);
+  }
+
+  private tabIndexForView(view: DashboardViews): number {
+    const index = this.tabViews.indexOf(view);
+    return index >= 0 ? index : 0;
+  }
+
+  private canAccessDashboardView(view: DashboardViews): boolean {
+    switch (view) {
+      case DashboardViews.similarity:
+      case DashboardViews.submission_history:
+      case DashboardViews.staff_notes:
+      case DashboardViews.discussion_prompts:
+        return this.canAccessStaffViews;
+      case DashboardViews.tutor_notes:
+        return this.canAccessTutorNotes;
+      default:
+        return true;
     }
   }
 
-  public get overseerEnabled() {
-    return this.doubtfire.IsOverseerEnabled.value && this.task?.overseerEnabled;
+  public get canAccessStaffViews(): boolean {
+    return this.tutor || !!this.currentUnitRole;
+  }
+
+  public get currentUnitRole(): UnitRole | undefined {
+    const currentUser = this.userService.currentUser;
+    if (!currentUser) {
+      return undefined;
+    }
+
+    return this.task?.unit?.staff?.find((ur) => ur.user?.id === currentUser.id);
+  }
+
+  public get canAccessTutorNotes(): boolean {
+    const tutor = this.task?.tutor;
+    if (!tutor) {
+      return false;
+    }
+
+    if (!this.currentUnitRole) {
+      return false;
+    }
+
+    tutor.unit = this.task.unit;
+
+    return (
+      this.currentUnitRole.role === 'Convenor' ||
+      this.currentUnitRole.role === 'Admin' ||
+      (tutor.mentor && tutor.mentor.id === this.currentUnitRole.id)
+    );
+  }
+
+  public get canViewPeerProgress(): boolean {
+    const currentUser = this.userService.currentUser;
+    const currentUserId = this.validUserId(currentUser?.id);
+    const hydratedStudentId = this.validUserId(this.task?.project?.student?.id);
+    const rawStudentId = this.validUserId(this.task?.project?.originalJson?.['user_id']);
+    const projectStudentId = hydratedStudentId ?? rawStudentId;
+
+    return (
+      currentUserId !== undefined &&
+      currentUserId === projectStudentId &&
+      currentUser.displayPeerProgress !== false
+    );
   }
 
-  showSubmissionHistoryModal() {
-    this.taskAssessmentModal.show(this.task);
+  private validUserId(value: unknown): number | undefined {
+    return typeof value === 'number' && Number.isSafeInteger(value) && value > 0
+      ? value
+      : undefined;
   }
 
   downloadSubmission() {
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.tpl.html b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.tpl.html
index 0962ddd82a..b7adf8c446 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.tpl.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.tpl.html
@@ -2,12 +2,13 @@
   <div class="panel-heading" ng-show="task">
     <div class="panel-title">
       <span ng-hide="tutor || showFooter">{{task.definition.name}}</span>
-      <span ng-show="tutor || showFooter" style="display: inline-flex">{{task.definition.name}} </span>
-
+      <span ng-show="tutor || showFooter" style="display: inline-flex"
+        >{{task.definition.name}}
+      </span>
       <div
         class="dropdown pull-right"
         dropdown
-        ng-show="task.hasPdf || task.definition.hasTaskSheet || overseerEnabled.value"
+        ng-show="task.hasPdf || task.definition.hasTaskSheet || overseerEnabled()"
       >
         <button class="btn btn-default dropdown-toggle" dropdown-toggle>
           <i class="fa fa-search"></i>
@@ -23,6 +24,12 @@
           <li ng-show="task.definition.hasTaskSheet">
             <a ng-click="setSelectedDashboardView('task')">View Task Sheet</a>
           </li>
+          <li ng-show="tutor">
+            <a ng-click="setSelectedDashboardView('similarities')">View Similarities</a>
+          </li>
+          <li ng-if="overseerEnabled()">
+            <a ng-click="setSelectedDashboardView('overseer')">View Overseer Reports</a>
+          </li>
           <li class="divider" ng-show="task.hasPdf"></li>
           <li ng-show="task.hasPdf">
             <a ng-click="downloadSubmission()">Download Submission PDF</a>
@@ -30,9 +37,9 @@
           <li ng-show="task.hasPdf">
             <a ng-click="downloadSubmittedFiles()">Download Submitted Files</a>
           </li>
-          <li ng-if="overseerEnabled">
-            <a ng-click="showSubmissionHistoryModal()">View Submission History</a>
-          </li>
+          <!-- <li ng-if="overseerEnabled()">
+            <a ng-click="showSubmissionHistoryModal()">Execution History</a>
+          </li> -->
         </ul>
       </div>
       <!--/download-dropdown-->
@@ -42,9 +49,23 @@
   <div class="panel-body task-detail-cards" ng-show="isCurrentView('details')">
     <!-- <div class="col-sm-12 col-xl-6"> -->
     <!-- migrated -->
+    <f-task-ilos-card
+      [task-def]="task.definition"
+      [ilo-context-type]="'TaskDefinition'"
+    ></f-task-ilos-card>
+    <task-description-card
+      [task-def]="task.definition"
+      [task]="task"
+      [unit]="task.unit"
+      (switch-view$)="switchView($event)"
+    ></task-description-card>
+    <f-task-prerequisites-card
+      [task-definition]="task.definition"
+      [task]="task"
+    ></f-task-prerequisites-card>
+    <f-task-scorm-card [task]="task"></f-task-scorm-card>
     <f-task-status-card [task]="task"></f-task-status-card>
     <f-task-due-card [task]="task"></f-task-due-card>
-    <task-description-card [task-def]="task.definition" [task]="task" [unit]="task.unit"></task-description-card>
     <!-- </div> -->
     <!--/task-description-column-->
     <!-- <div class="col-sm-12 col-xl-6"> -->
@@ -55,6 +76,18 @@
     <!--/task-description-column-->
   </div>
   <!--/panel-body-->
+  <!-- Incomplete Task Prerequisites Warning -->
+  <div
+    ng-if="task && isCurrentView('task') && task.blockedByPrerequisiteTasks()"
+    class="flex items-center border-r-4 border-l-4 border-yellow-500 bg-yellow-100 px-2.5 py-2 text-center text-yellow-700"
+  >
+    <i class="fa fa-exclamation-triangle fa-lg mr-1"></i>
+    Warning: This task has {{task.definition.taskPrerequisitesCache.currentValues.length}}
+    prerequisite{{ task.definition.taskPrerequisitesCache.currentValues.length > 1 ? 's' : '' }}
+    that you still need to complete. You won’t be able to submit this task until all prerequisites
+    are met.
+  </div>
+  <!-- /Incomplete Task Prerequisites Warning -->
   <div class="panel-body has-pdf" ng-if="isCurrentView('task')">
     <f-pdf-viewer [pdf-url]="urls.taskSheetPdfUrl"></f-pdf-viewer>
   </div>
@@ -63,6 +96,12 @@
     <!-- <pdf-viewer-panel [pdf-url]="urls.taskSubmissionPdfUrl"></pdf-viewer-panel> -->
     <f-pdf-viewer [pdf-url]="urls.taskSubmissionPdfUrl"></f-pdf-viewer>
   </div>
+  <div class="panel-body" ng-if="isCurrentView('similarities')">
+    <f-task-similarity-view [task]="task"></f-task-similarity-view>
+  </div>
+  <div class="panel-body" ng-if="isCurrentView('overseer')">
+    <f-task-overseer-report [task]="task" class="max-w-full"></f-task-overseer-report>
+  </div>
   <!--/panel-body-->
   <div class="panel-body text-muted no-pdf" ng-show="isCurrentView('submission') && !task.hasPdf">
     <i class="fa fa-file-pdf-o"></i>
diff --git a/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.html b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.html
new file mode 100644
index 0000000000..d34030928a
--- /dev/null
+++ b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.html
@@ -0,0 +1,345 @@
+<ng-template #TaskListSkeleton>
+  <div class="task-list-skeleton flex h-full flex-col p-1">
+    <div class="mb-2 rounded-2xl bg-white p-1">
+      <div class="flex items-center gap-2">
+        <ngx-skeleton-loader
+          appearance="circle"
+          [theme]="{width: '32px', height: '32px', margin: '0'}"
+        ></ngx-skeleton-loader>
+        <ngx-skeleton-loader
+          class="min-w-0 flex-1"
+          [theme]="{height: '16px', width: '100%', 'border-radius': '999px', margin: '0'}"
+        ></ngx-skeleton-loader>
+      </div>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-hidden rounded-lg bg-white">
+      @for (row of skeletonRows; track row) {
+        <div
+          class="skeleton-task-row flex h-[65px] items-center gap-2 border-b border-gray-200 px-2"
+        >
+          <div class="min-w-0 flex-1">
+            <ngx-skeleton-loader
+              [theme]="{height: '12px', width: '82%', 'border-radius': '999px', margin: '0 0 8px'}"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              [theme]="{height: '10px', width: '58%', 'border-radius': '999px', margin: '0'}"
+            ></ngx-skeleton-loader>
+          </div>
+          <ngx-skeleton-loader
+            appearance="circle"
+            [theme]="{width: '34px', height: '34px', margin: '0'}"
+          ></ngx-skeleton-loader>
+        </div>
+      }
+    </div>
+  </div>
+</ng-template>
+
+@if (project$ | async; as project) {
+  @let selectedTaskDefinition = selectedTaskDefinition$ | async;
+  <div class="project-dashboard-shell w-full overflow-hidden">
+    @if (isPhoneLayout) {
+      <header class="mobile-task-toolbar">
+        @if (selectedTaskDefinition && mobilePane !== 'overview') {
+          <div class="mobile-task-heading">
+            <div class="min-w-0 px-3">
+              <div class="truncate text-sm font-bold text-gray-900">
+                {{ selectedTaskDefinition.abbreviation }}
+              </div>
+              <div class="truncate text-xs text-gray-600">
+                {{ selectedTaskDefinition.name }}
+              </div>
+            </div>
+          </div>
+        }
+
+        <nav aria-label="Project dashboard navigation" class="mobile-task-tabs">
+          <button
+            aria-label="Show project overview"
+            class="mobile-task-tab"
+            type="button"
+            [attr.aria-pressed]="mobilePane === 'overview'"
+            [class.mobile-task-tab--active]="mobilePane === 'overview'"
+            (click)="showMobilePane('overview')"
+          >
+            <mat-icon>insights</mat-icon>
+            <span>Overview</span>
+          </button>
+          <button
+            aria-label="Show task list"
+            class="mobile-task-tab"
+            type="button"
+            [attr.aria-pressed]="!selectedTaskDefinition && mobilePane === 'task'"
+            [class.mobile-task-tab--active]="!selectedTaskDefinition && mobilePane === 'task'"
+            (click)="clearTaskSelection()"
+          >
+            <mat-icon>list</mat-icon>
+            <span>Tasks</span>
+          </button>
+          <button
+            aria-label="Show task details"
+            class="mobile-task-tab"
+            type="button"
+            [attr.aria-pressed]="!!selectedTaskDefinition && mobilePane === 'task'"
+            [class.mobile-task-tab--active]="!!selectedTaskDefinition && mobilePane === 'task'"
+            [disabled]="!selectedTaskDefinition"
+            (click)="showMobilePane('task')"
+          >
+            <mat-icon>assignment</mat-icon>
+            <span>Details</span>
+          </button>
+          <button
+            aria-label="Show feedback"
+            class="mobile-task-tab"
+            type="button"
+            [attr.aria-pressed]="!!selectedTaskDefinition && mobilePane === 'feedback'"
+            [class.mobile-task-tab--active]="!!selectedTaskDefinition && mobilePane === 'feedback'"
+            [disabled]="!selectedTaskDefinition"
+            (click)="showMobilePane('feedback')"
+          >
+            <mat-icon>forum</mat-icon>
+            <span>Feedback</span>
+          </button>
+        </nav>
+      </header>
+    }
+
+    <div #boundary class="project-dashboard-layout flex h-full min-h-0 flex-row">
+      @if (subs$ | async) {
+        @if (isProjectTaskListReady(project)) {
+          <f-unit-task-list
+            #leftPanel
+            class="project-task-list-panel h-full min-h-0 flex-none p-1"
+            [class.project-task-list-panel--phone-hidden]="
+              isPhoneLayout && (!!selectedTaskDefinition || mobilePane === 'overview')
+            "
+            [isCollapsed]="taskListCollapsed"
+            [mode]="'project'"
+            [project]="project"
+            [selectedTaskDefinition$]="selectedTaskDefinition$"
+            [selectionUrlBase]="taskSelectionUrlBase"
+            [style.width.px]="isPhoneLayout ? null : leftWidth"
+            [targetGrade]="project.targetGrade"
+            [taskDefinitions]="taskDefinitionsForProject(project)"
+            [tasks]="project.tasks"
+          ></f-unit-task-list>
+        } @else {
+          <div
+            class="project-task-list-panel h-full min-h-0 flex-none"
+            [class.project-task-list-panel--phone-hidden]="
+              isPhoneLayout && (!!selectedTaskDefinition || mobilePane === 'overview')
+            "
+            [style.width.px]="isPhoneLayout ? null : leftWidth"
+          >
+            <ng-container *ngTemplateOutlet="TaskListSkeleton"></ng-container>
+          </div>
+        }
+        <div
+          class="project-task-resizer relative flex-none"
+          [class.project-task-resizer--phone-hidden]="isPhoneLayout"
+          [style.width.px]="3"
+        >
+          <div
+            #leftResizerEl
+            cdkDrag
+            cdkDragLockAxis="x"
+            class="absolute inset-y-0 left-0 z-50 w-[3px] cursor-ew-resize bg-slate-100"
+            [cdkDragBoundary]="boundary"
+            (cdkDragEnded)="stoppedDragging($event, boundary)"
+            (cdkDragMoved)="dragging($event, boundary)"
+            (cdkDragStarted)="startedDragging($event, boundary)"
+          ></div>
+        </div>
+      }
+      @if (isPhoneLayout && mobilePane === 'overview') {
+        <section aria-label="Project overview" class="mobile-overview-view min-w-0 flex-1 bg-white">
+          <div class="mobile-overview-pane">
+            @if (isProjectTaskListReady(project)) {
+              <f-progress-dashboard
+                class="block w-full"
+                [project]="project"
+                [showSubmittedGrade]="showSubmittedGrade"
+              ></f-progress-dashboard>
+            } @else {
+              <div class="dashboard-skeleton min-h-full rounded-lg bg-white p-2.5">
+                <ngx-skeleton-loader
+                  [theme]="{
+                    height: '28px',
+                    width: '220px',
+                    'border-radius': '999px',
+                    margin: '0 0 20px',
+                  }"
+                ></ngx-skeleton-loader>
+                <ngx-skeleton-loader
+                  [theme]="{
+                    height: '140px',
+                    width: '100%',
+                    'border-radius': '8px',
+                    margin: '0 0 16px',
+                  }"
+                ></ngx-skeleton-loader>
+                <ngx-skeleton-loader
+                  [theme]="{
+                    height: '220px',
+                    width: '100%',
+                    'border-radius': '8px',
+                    margin: '0',
+                  }"
+                ></ngx-skeleton-loader>
+              </div>
+            }
+          </div>
+        </section>
+      } @else if (selectedTaskDefinition) {
+        @if (isPhoneLayout) {
+          <section aria-label="Selected task" class="mobile-task-view min-w-0 flex-1 bg-white">
+            <div class="mobile-task-pane">
+              @if (mobilePane === 'task') {
+                <f-task-dashboard
+                  [task]="project.findTaskForDefinition(selectedTaskDefinition.id)"
+                ></f-task-dashboard>
+              } @else {
+                <task-comments-viewer
+                  [task]="project.findTaskForDefinition(selectedTaskDefinition.id)"
+                ></task-comments-viewer>
+              }
+            </div>
+          </section>
+        } @else {
+          <div class="desktop-task-dashboard min-w-0 flex-1 rounded-lg bg-white p-1">
+            <f-task-dashboard
+              [task]="project.findTaskForDefinition(selectedTaskDefinition.id)"
+            ></f-task-dashboard>
+          </div>
+          @if (isCommentsNarrow && commentsCollapsed) {
+            <button
+              aria-label="Open task comments"
+              class="comments-floating-toggle"
+              color="primary"
+              mat-mini-fab
+              matTooltip="Open comments"
+              type="button"
+              (click)="toggleCommentsPanel()"
+            >
+              <mat-icon class="comments-floating-toggle__edge-icon">chevron_left</mat-icon>
+              <mat-icon class="comments-floating-toggle__hover-icon">forum</mat-icon>
+            </button>
+          }
+          <div
+            #commentspanel
+            class="comments-sidebar w-1/4 flex-none bg-white p-1"
+            [class.comments-sidebar--narrow]="isCommentsNarrow"
+            [class.hidden]="commentsPanelCollapsed"
+          >
+            @if (isCommentsNarrow && !commentsCollapsed) {
+              <button
+                aria-label="Collapse task comments"
+                class="comments-sidebar__collapse"
+                mat-icon-button
+                matTooltip="Collapse comments"
+                type="button"
+                (click)="toggleCommentsPanel()"
+              >
+                <mat-icon>chevron_right</mat-icon>
+              </button>
+            }
+            <task-comments-viewer [task]="project.findTaskForDefinition(selectedTaskDefinition.id)">
+            </task-comments-viewer>
+          </div>
+        }
+      } @else if (!isProjectTaskListReady(project)) {
+        <div
+          class="project-dashboard-placeholder min-h-0 flex-1 overflow-y-auto p-1"
+          [class.project-dashboard-placeholder--phone-hidden]="isPhoneLayout"
+        >
+          <div class="dashboard-skeleton h-full rounded-lg bg-white p-2.5">
+            <ngx-skeleton-loader
+              [theme]="{
+                height: '28px',
+                width: '220px',
+                'border-radius': '999px',
+                margin: '0 0 20px',
+              }"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              [theme]="{height: '140px', width: '100%', 'border-radius': '8px', margin: '0 0 16px'}"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              [theme]="{height: '220px', width: '100%', 'border-radius': '8px', margin: '0'}"
+            ></ngx-skeleton-loader>
+          </div>
+        </div>
+      } @else {
+        <div
+          class="project-dashboard-placeholder min-h-0 flex-1 overflow-y-auto p-1"
+          [class.project-dashboard-placeholder--phone-hidden]="isPhoneLayout"
+        >
+          <f-progress-dashboard
+            class="w-full"
+            [project]="project"
+            [showSubmittedGrade]="showSubmittedGrade"
+          ></f-progress-dashboard>
+        </div>
+      }
+    </div>
+  </div>
+}
+
+<!--
+<div class="panel-footer">
+  <ng-container *ngIf="footerComponent">
+    <ng-container *ngComponentOutlet="footerComponent"></ng-container>
+  </ng-container>
+</div> -->
+
+<!--
+<div #mobile fxLayout="row" fxFill fxHide fxShow.lt-md>
+  <div id="inboxpanel" #inboxpanel class="inbox-panel mobile" [hidden]="taskSelected">
+    @if (taskData) {
+      <df-staff-task-list
+        [isNarrow]="false"
+        [showSearchOptions]="showSearchOptions"
+        [filters]="filters"
+        [taskData]="taskData"
+        [unit]="unit"
+        [unitRole]="unitRole"
+      ></df-staff-task-list>
+    }
+  </div>
+  <div [hidden]="!taskSelected" fxLayout="column" fxFill fxLayoutAlign="space-between stretch">
+    <div class="flex items-center">
+      <button
+        mat-icon-button
+        aria-label="Back to inbox"
+        matTooltip="Back to inbox"
+        (click)="taskSelected = false"
+        >
+        <mat-icon>arrow_back_ios_new</mat-icon>
+      </button>
+      <h3 class="mb-0">{{ taskData?.selectedTask?.project.student.nickname }}</h3>
+      <div fxFlex></div>
+      <button
+        [disabled]="!this.taskData?.selectedTask?.hasPdf"
+        mat-icon-button
+        aria-label="Open Submission"
+        (click)="openPdfInNewTab()"
+        matTooltip="Open submission"
+        >
+        <mat-icon>description</mat-icon>
+      </button>
+      <button
+        mat-icon-button
+        aria-label="Go to student"
+        matTooltip="Go to student"
+        (click)="goToStudent()"
+        >
+        <mat-icon>account_circle</mat-icon>
+      </button>
+    </div>
+
+    <div #commentspanel fxFlex class="inbox-panel task-comment-panel mobile">
+      <task-comments-viewer [task]="taskData.selectedTask"> </task-comments-viewer>
+    </div>
+  </div>
+</div> -->
diff --git a/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.scss b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.scss
new file mode 100644
index 0000000000..f522e8e498
--- /dev/null
+++ b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.scss
@@ -0,0 +1,222 @@
+:host {
+  display: block;
+}
+
+.project-dashboard-shell {
+  height: calc((var(--vh, 1vh) * 100) - 100px);
+}
+
+.desktop-task-dashboard > f-task-dashboard {
+  display: block;
+  height: 100%;
+}
+
+.mobile-task-view,
+.mobile-overview-view {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.5rem;
+}
+
+.mobile-task-toolbar {
+  position: relative;
+  z-index: 20;
+  flex: none;
+  border-bottom: 1px solid #e2e8f0;
+  background: white;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+}
+
+.mobile-task-heading {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  gap: 0.25rem;
+  padding-right: 0.75rem;
+}
+
+.mobile-task-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-top: 1px solid #f1f5f9;
+}
+
+.mobile-task-tab {
+  display: flex;
+  min-width: 0;
+  min-height: 52px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  padding: 0.25rem 0.125rem;
+  border-bottom: 3px solid transparent;
+  color: #475569;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease;
+}
+
+.mobile-task-tab mat-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+.mobile-task-tab:hover,
+.mobile-task-tab:focus-visible {
+  background: #f8fafc;
+}
+
+.mobile-task-tab:focus-visible {
+  outline: 2px solid #3939ff;
+  outline-offset: -2px;
+}
+
+.mobile-task-tab--active {
+  border-bottom-color: #3939ff;
+  background: #eef2ff;
+  color: #3939ff;
+}
+
+.mobile-task-tab:disabled {
+  cursor: default;
+  background: white;
+  color: #94a3b8;
+}
+
+.mobile-task-pane {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  background: white;
+}
+
+.mobile-task-pane > f-task-dashboard,
+.mobile-task-pane > task-comments-viewer {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.mobile-overview-pane {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  background: white;
+}
+
+.mobile-overview-pane > f-progress-dashboard {
+  min-width: 0;
+}
+
+@media (max-width: 639.98px) {
+  .project-dashboard-shell {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .project-dashboard-layout {
+    height: auto !important;
+    min-height: 0;
+    flex: 1;
+    width: 100%;
+  }
+
+  .project-task-list-panel {
+    width: 100% !important;
+    min-width: 0;
+    padding-right: 0.25rem !important;
+  }
+
+  .project-task-list-panel--phone-hidden,
+  .project-task-resizer--phone-hidden,
+  .project-dashboard-placeholder--phone-hidden,
+  .comments-floating-toggle {
+    display: none !important;
+  }
+}
+
+.comments-floating-toggle {
+  position: fixed;
+  top: 50%;
+  right: -20px;
+  z-index: 300;
+  opacity: 0.55;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+  transform: translateY(-50%);
+}
+
+.comments-floating-toggle mat-icon {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  transition: opacity 150ms ease;
+}
+
+.comments-floating-toggle:hover,
+.comments-floating-toggle:focus-visible {
+  opacity: 1;
+  transform: translate(-20px, -50%);
+}
+
+.comments-floating-toggle__edge-icon {
+  opacity: 1;
+  transform: translateX(-6px);
+}
+
+.comments-floating-toggle__hover-icon {
+  opacity: 0;
+}
+
+.comments-floating-toggle:hover .comments-floating-toggle__edge-icon,
+.comments-floating-toggle:focus-visible .comments-floating-toggle__edge-icon {
+  opacity: 0;
+}
+
+.comments-floating-toggle:hover .comments-floating-toggle__hover-icon,
+.comments-floating-toggle:focus-visible .comments-floating-toggle__hover-icon {
+  opacity: 1;
+}
+
+.comments-sidebar {
+  position: relative;
+}
+
+.comments-sidebar--narrow {
+  flex-basis: 375px !important;
+  min-width: 375px;
+  width: 375px !important;
+  border-radius: 0 !important;
+  box-shadow: -2px 0 6px rgba(15, 23, 42, 0.08);
+  z-index: 250;
+}
+
+.comments-sidebar__collapse {
+  position: absolute;
+  top: 50%;
+  left: -20px;
+  z-index: 260;
+  transform: translateY(-50%);
+  background: white;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
+}
diff --git a/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.spec.ts b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.spec.ts
new file mode 100644
index 0000000000..00eff7fb8c
--- /dev/null
+++ b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.spec.ts
@@ -0,0 +1,402 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {CommonModule} from '@angular/common';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute, Router, convertToParamMap} from '@angular/router';
+import {BehaviorSubject, EMPTY, Subject, of, tap} from 'rxjs';
+import {Project, Task, TaskDefinition, Unit} from 'src/app/api/models/doubtfire-model';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {GlobalStateService, ViewType} from '../../index/global-state.service';
+import {ProjectDashboardComponent} from './project-dashboard.component';
+
+describe('ProjectDashboardComponent task selection', () => {
+  let component: ProjectDashboardComponent;
+  let fixture: ComponentFixture<ProjectDashboardComponent>;
+  let taskStatusUpdated$: Subject<Task>;
+  let taskSubmissionCompleted$: Subject<Task>;
+
+  const project = {id: 7} as Project;
+  const selectedTaskDefinition = {id: 42} as TaskDefinition;
+
+  beforeEach(async () => {
+    taskStatusUpdated$ = new Subject<Task>();
+    taskSubmissionCompleted$ = new Subject<Task>();
+
+    await TestBed.configureTestingModule({
+      declarations: [ProjectDashboardComponent],
+      providers: [
+        {provide: UserService, useValue: {}},
+        {provide: ProjectService, useValue: {get: () => EMPTY}},
+        {
+          provide: TaskService,
+          useValue: {taskStatusUpdated$, taskSubmissionCompleted$},
+        },
+        {provide: UnitService, useValue: {}},
+        {provide: GlobalStateService, useValue: {setView: vi.fn()}},
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            parent: {
+              snapshot: {
+                data: {project},
+                paramMap: {get: () => String(project.id)},
+              },
+            },
+          },
+        },
+        {
+          provide: BreakpointObserver,
+          useValue: {observe: () => of({matches: false, breakpoints: {}})},
+        },
+        {provide: Router, useValue: {navigate: vi.fn().mockResolvedValue(true)}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(ProjectDashboardComponent, {set: {template: ''}})
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ProjectDashboardComponent);
+    component = fixture.componentInstance;
+    component.project$ = of(project);
+    fixture.detectChanges();
+    component.selectedTaskDefinition$.next(selectedTaskDefinition);
+  });
+
+  it('keeps the selected task when an unrelated status-change event is emitted', () => {
+    taskStatusUpdated$.next({project, definition: selectedTaskDefinition} as Task);
+
+    expect(component.selectedTaskDefinition$.value).toBe(selectedTaskDefinition);
+  });
+
+  it('returns to the dashboard after the selected task submission completes', () => {
+    taskSubmissionCompleted$.next({project, definition: selectedTaskDefinition} as Task);
+
+    expect(component.selectedTaskDefinition$.value).toBeNull();
+  });
+
+  it('ignores submission events from another project or task definition', () => {
+    taskSubmissionCompleted$.next({
+      project: {id: project.id + 1},
+      definition: selectedTaskDefinition,
+    } as Task);
+    expect(component.selectedTaskDefinition$.value).toBe(selectedTaskDefinition);
+
+    taskSubmissionCompleted$.next({
+      project,
+      definition: {id: selectedTaskDefinition.id + 1},
+    } as Task);
+    expect(component.selectedTaskDefinition$.value).toBe(selectedTaskDefinition);
+  });
+});
+
+describe('ProjectDashboardComponent route reuse', () => {
+  let firstProject: Project;
+  let secondProject: Project;
+  let firstUnit: Unit;
+  let secondUnit: Unit;
+
+  beforeEach(() => {
+    firstUnit = {
+      id: 101,
+      taskDefinitions: [],
+      studentCache: {add: vi.fn()},
+    } as unknown as Unit;
+    secondUnit = {
+      id: 202,
+      taskDefinitions: [],
+      studentCache: {add: vi.fn()},
+    } as unknown as Unit;
+    firstProject = {id: 2, targetGrade: 0, unit: firstUnit} as Project;
+    secondProject = {id: 18, targetGrade: 0, unit: secondUnit} as Project;
+  });
+
+  it('loads and displays each project emitted by a reused parent route', () => {
+    const routeProjects: BehaviorSubject<Project> = new BehaviorSubject(firstProject);
+    const loadedProjects = new Map([
+      [firstProject.id, firstProject],
+      [secondProject.id, secondProject],
+    ]);
+    const loadedUnits = new Map([
+      [firstUnit.id, firstUnit],
+      [secondUnit.id, secondUnit],
+    ]);
+    const projectGet = vi.fn(
+      (params: {id: number}, options: {mappingCompleteCallback: (project: Project) => void}) => {
+        const project = loadedProjects.get(params.id);
+        options.mappingCompleteCallback(project);
+        return of(project);
+      },
+    );
+    const unitGet = vi.fn((id: number) => of(loadedUnits.get(id)));
+    const setView = vi.fn();
+    const component = new ProjectDashboardComponent(
+      {} as UserService,
+      {get: projectGet} as unknown as ProjectService,
+      {taskSubmissionCompleted$: new Subject<Task>()} as unknown as TaskService,
+      {get: unitGet} as unknown as UnitService,
+      {setView} as unknown as GlobalStateService,
+      {
+        parent: {
+          data: of({project: firstProject}),
+          snapshot: {paramMap: convertToParamMap({projectId: firstProject.id})},
+        },
+      } as unknown as ActivatedRoute,
+      {observe: () => of({matches: false, breakpoints: {}})} as unknown as BreakpointObserver,
+      {navigate: vi.fn().mockResolvedValue(true)} as unknown as Router,
+    );
+    component.project$ = routeProjects.asObservable();
+
+    component.ngOnInit();
+    component.selectedTaskDefinition$.next({id: 999} as TaskDefinition);
+    routeProjects.next(secondProject);
+
+    let displayedProject: Project;
+    component.project$.subscribe((project) => (displayedProject = project));
+
+    expect(projectGet.mock.calls.map(([params]) => params.id)).toEqual([2, 18]);
+    expect(unitGet.mock.calls.map(([id]) => id)).toEqual([101, 202]);
+    expect(displayedProject.id).toBe(18);
+    expect(component.selectedTaskDefinition$.value).toBeNull();
+    expect(setView).toHaveBeenLastCalledWith(ViewType.PROJECT, secondProject);
+
+    component.ngOnDestroy();
+  });
+
+  it('ignores a delayed response from an earlier visit to the same project', () => {
+    const routeProjects: BehaviorSubject<Project> = new BehaviorSubject(firstProject);
+    const projectResponses: Subject<Project>[] = [];
+    const projectGet = vi.fn(
+      (_params: {id: number}, options: {mappingCompleteCallback: (project: Project) => void}) => {
+        const response: Subject<Project> = new Subject();
+        projectResponses.push(response);
+        return response.pipe(tap((project) => options.mappingCompleteCallback(project)));
+      },
+    );
+    const oldUnit = {...firstUnit, id: 301} as Unit;
+    const latestUnit = {...firstUnit, id: 303} as Unit;
+    const oldProject = {id: firstProject.id, targetGrade: 0, unit: oldUnit} as Project;
+    const latestProject = {id: firstProject.id, targetGrade: 0, unit: latestUnit} as Project;
+    const unitGet = vi.fn((id: number) => of(id === latestUnit.id ? latestUnit : oldUnit));
+    const component = new ProjectDashboardComponent(
+      {} as UserService,
+      {get: projectGet} as unknown as ProjectService,
+      {taskSubmissionCompleted$: new Subject<Task>()} as unknown as TaskService,
+      {get: unitGet} as unknown as UnitService,
+      {setView: vi.fn()} as unknown as GlobalStateService,
+      {
+        parent: {
+          data: of({project: firstProject}),
+          snapshot: {paramMap: convertToParamMap({projectId: firstProject.id})},
+        },
+      } as unknown as ActivatedRoute,
+      {observe: () => of({matches: false, breakpoints: {}})} as unknown as BreakpointObserver,
+      {navigate: vi.fn().mockResolvedValue(true)} as unknown as Router,
+    );
+    component.project$ = routeProjects.asObservable();
+
+    component.ngOnInit();
+    routeProjects.next(secondProject);
+    routeProjects.next({...firstProject} as Project);
+    projectResponses[2].next(latestProject);
+    projectResponses[0].next(oldProject);
+
+    let displayedProject: Project;
+    component.project$.subscribe((project) => (displayedProject = project));
+
+    expect(displayedProject).toBe(latestProject);
+    expect(unitGet).toHaveBeenCalledTimes(1);
+    expect(unitGet).toHaveBeenCalledWith(latestUnit.id);
+
+    component.ngOnDestroy();
+  });
+
+  it('cancels a pending unit load when a reused route changes projects', () => {
+    const routeProjects: BehaviorSubject<Project> = new BehaviorSubject(firstProject);
+    const oldUnitResponse: Subject<Unit> = new Subject();
+    const delayedOldUnit = {
+      ...firstUnit,
+      studentCache: {add: vi.fn()},
+    } as unknown as Unit;
+    const latestUnit = {...firstUnit, id: 303} as Unit;
+    const oldProject = {id: firstProject.id, targetGrade: 0, unit: firstUnit} as Project;
+    const latestProject = {id: firstProject.id, targetGrade: 0, unit: latestUnit} as Project;
+    const loadedProjects = [oldProject, secondProject, latestProject];
+    let projectLoad = 0;
+    const projectGet = vi.fn(
+      (_params: {id: number}, options: {mappingCompleteCallback: (project: Project) => void}) => {
+        const project = loadedProjects[projectLoad++];
+        options.mappingCompleteCallback(project);
+        return of(project);
+      },
+    );
+    const unitGet = vi.fn((id: number) => {
+      if (id === firstUnit.id) {
+        return oldUnitResponse;
+      }
+      return of(id === secondUnit.id ? secondUnit : latestUnit);
+    });
+    const component = new ProjectDashboardComponent(
+      {} as UserService,
+      {get: projectGet} as unknown as ProjectService,
+      {taskSubmissionCompleted$: new Subject<Task>()} as unknown as TaskService,
+      {get: unitGet} as unknown as UnitService,
+      {setView: vi.fn()} as unknown as GlobalStateService,
+      {
+        parent: {
+          data: of({project: firstProject}),
+          snapshot: {paramMap: convertToParamMap({projectId: firstProject.id})},
+        },
+      } as unknown as ActivatedRoute,
+      {observe: () => of({matches: false, breakpoints: {}})} as unknown as BreakpointObserver,
+      {navigate: vi.fn().mockResolvedValue(true)} as unknown as Router,
+    );
+    component.project$ = routeProjects.asObservable();
+
+    component.ngOnInit();
+    routeProjects.next(secondProject);
+    routeProjects.next({...firstProject} as Project);
+    oldUnitResponse.next(delayedOldUnit);
+
+    let displayedProject: Project;
+    component.project$.subscribe((project) => (displayedProject = project));
+
+    expect(displayedProject).toBe(latestProject);
+    expect(oldProject.unit).toBe(firstUnit);
+    expect(delayedOldUnit.studentCache.add).not.toHaveBeenCalled();
+
+    component.ngOnDestroy();
+  });
+});
+
+describe('ProjectDashboardComponent rendered by its host', () => {
+  let fixture: ComponentFixture<ProjectDashboardComponent>;
+  let component: ProjectDashboardComponent;
+  let hostProject$: BehaviorSubject<Project>;
+  let project: Project;
+  let unit: Unit;
+  let projectResponses: Subject<Project>[];
+  let projectGet: ReturnType<typeof vi.fn>;
+  let unitGet: ReturnType<typeof vi.fn>;
+  let routerNavigate: ReturnType<typeof vi.fn>;
+
+  // The portfolios progress tab hands its dashboard a new task selection url every check, because
+  // the host builds that array in a getter. Each one re-runs the host's ngOnChanges, which pushes
+  // the project it is already showing back down the same subject.
+  const rebindHost = (): void => {
+    fixture.componentRef.setInput('taskSelectionUrlBase', [
+      '/units',
+      1,
+      'students',
+      'portfolios',
+      project.id,
+      'progress',
+    ]);
+    hostProject$.next(project);
+    fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    unit = {
+      id: 101,
+      taskDefinitions: [],
+      studentCache: {add: vi.fn()},
+    } as unknown as Unit;
+    project = {
+      id: 2,
+      targetGrade: 0,
+      unit,
+      tasks: [],
+      findTaskForDefinition: () => null,
+    } as unknown as Project;
+
+    projectResponses = [];
+    projectGet = vi.fn(
+      (_params: {id: number}, options: {mappingCompleteCallback: (project: Project) => void}) => {
+        const response: Subject<Project> = new Subject();
+        projectResponses.push(response);
+        return response.pipe(tap((loaded) => options.mappingCompleteCallback(loaded)));
+      },
+    );
+    unitGet = vi.fn(() => of(unit));
+    routerNavigate = vi.fn().mockResolvedValue(true);
+
+    await TestBed.configureTestingModule({
+      imports: [CommonModule],
+      declarations: [ProjectDashboardComponent],
+      providers: [
+        {provide: UserService, useValue: {}},
+        {provide: ProjectService, useValue: {get: projectGet}},
+        {
+          provide: TaskService,
+          useValue: {taskSubmissionCompleted$: new Subject<Task>()},
+        },
+        {provide: UnitService, useValue: {get: unitGet}},
+        {provide: GlobalStateService, useValue: {setView: vi.fn()}},
+        {
+          provide: ActivatedRoute,
+          useValue: {parent: {data: of({}), snapshot: {paramMap: convertToParamMap({})}}},
+        },
+        {
+          provide: BreakpointObserver,
+          useValue: {observe: () => of({matches: false, breakpoints: {}})},
+        },
+        {provide: Router, useValue: {navigate: routerNavigate}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectDashboardComponent);
+    component = fixture.componentInstance;
+    hostProject$ = new BehaviorSubject(project);
+    fixture.componentRef.setInput('project$', hostProject$);
+    fixture.detectChanges();
+  });
+
+  it('keeps the loaded project and the open task when the host re-emits the same project', () => {
+    projectResponses[0].next(project);
+    fixture.detectChanges();
+
+    const selectedTaskDefinition = {id: 7} as TaskDefinition;
+    component.selectedTaskDefinition$.next(selectedTaskDefinition);
+    fixture.detectChanges();
+
+    rebindHost();
+    rebindHost();
+
+    expect(component.selectedTaskDefinition$.value).toBe(selectedTaskDefinition);
+    expect(component.isProjectTaskListReady(project)).toBe(true);
+    expect(projectGet).toHaveBeenCalledTimes(1);
+    expect(unitGet).toHaveBeenCalledTimes(1);
+
+    fixture.destroy();
+  });
+
+  it('does not cancel a load that is still in flight when the same project comes back', () => {
+    rebindHost();
+
+    expect(projectGet).toHaveBeenCalledTimes(1);
+
+    projectResponses[0].next(project);
+    fixture.detectChanges();
+
+    expect(component.isProjectTaskListReady(project)).toBe(true);
+
+    fixture.destroy();
+  });
+
+  it('does not navigate out of an embedded staff portfolio when its phone pane changes', () => {
+    rebindHost();
+    component.selectedTaskDefinition$.next({id: 7, abbreviation: '1.1P'} as TaskDefinition);
+
+    component.showMobilePane('feedback');
+
+    expect(component.mobilePane).toBe('feedback');
+    expect(routerNavigate).not.toHaveBeenCalled();
+
+    fixture.destroy();
+  });
+});
diff --git a/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts
new file mode 100644
index 0000000000..b3539490b3
--- /dev/null
+++ b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts
@@ -0,0 +1,395 @@
+import {CdkDragEnd, CdkDragMove, CdkDragStart} from '@angular/cdk/drag-drop';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {BehaviorSubject, Observable, Subject, filter, map, of, takeUntil} from 'rxjs';
+import {Project, TaskDefinition} from 'src/app/api/models/doubtfire-model';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {FUnitTaskListComponent} from 'src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component';
+import {GlobalStateService, ViewType} from '../../index/global-state.service';
+
+@Component({
+  selector: 'f-project-dashboard',
+  templateUrl: './project-dashboard.component.html',
+  styleUrl: './project-dashboard.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectDashboardComponent implements OnInit, OnDestroy {
+  @ViewChild('leftPanel') private leftPanel?: FUnitTaskListComponent;
+
+  @Input() public project$: Observable<Project>;
+  @Input() public defaultTaskListCollapsed = false;
+  @Input() public taskSelectionUrlBase: unknown[] | null = null;
+  @Input() public showSubmittedGrade?: boolean = false;
+  @Input() public set taskListWidth(width: number | undefined) {
+    if (typeof width === 'number') {
+      this._leftWidth = width;
+    }
+  }
+
+  @Output() public taskListWidthChange: EventEmitter<number> = new EventEmitter();
+
+  /**
+   * The currently selected task definition - selected in the unit task list.
+   * This is crated here, and passed to children to interact with and share across context.
+   */
+  public selectedTaskDefinition$: BehaviorSubject<TaskDefinition> =
+    new BehaviorSubject<TaskDefinition>(null);
+
+  subs$: Observable<unknown> = of(true);
+  readonly skeletonRows = Array.from({length: 10}, (_, index) => index);
+  private readonly projectSubject: BehaviorSubject<Project> = new BehaviorSubject(null);
+
+  private readonly destroy$: Subject<void> = new Subject();
+  private readonly projectLoadCancel$: Subject<void> = new Subject();
+  private projectReady = false;
+  private activeProjectId: number | null = null;
+  private projectActivation = 0;
+
+  projectTasks = [];
+
+  constructor(
+    private currentUser: UserService,
+    private projectService: ProjectService,
+    private taskService: TaskService,
+    private unitService: UnitService,
+    private globalStateService: GlobalStateService,
+    private route: ActivatedRoute,
+    private breakpointObserver: BreakpointObserver,
+    private angularRouter: Router,
+  ) {}
+
+  public readonly taskListCollapsedWidth = 75;
+  public readonly taskListExpandedWidth = 400;
+  public readonly taskListCollapseThreshold = 125;
+  private _leftWidth = this.taskListExpandedWidth;
+  public lastX;
+  public startWidth = 0;
+
+  public startLeftX = 0;
+  public isCommentsNarrow = false;
+  public commentsCollapsed = false;
+  public isPhoneLayout = false;
+  public mobilePane: 'overview' | 'task' | 'feedback' = 'task';
+
+  private readonly commentsBreakpoint = '(max-width: 999.98px)';
+  private readonly phoneBreakpoint = '(max-width: 639.98px)';
+
+  public get commentsPanelCollapsed(): boolean {
+    return this.isCommentsNarrow && this.commentsCollapsed;
+  }
+
+  public get taskListCollapsed(): boolean {
+    return this.leftWidth < this.taskListCollapseThreshold;
+  }
+
+  public get leftWidth(): number {
+    return this._leftWidth;
+  }
+
+  public set leftWidth(width: number) {
+    this._leftWidth = width;
+    this.taskListWidthChange.emit(width);
+  }
+
+  public isProjectTaskListReady(project: Project): boolean {
+    return (
+      this.projectReady &&
+      !!project?.id &&
+      !!project.unit?.id &&
+      project.targetGrade !== undefined &&
+      project.targetGrade !== null
+    );
+  }
+
+  public taskDefinitionsForProject(project: Project): readonly TaskDefinition[] {
+    if (!this.isProjectTaskListReady(project)) {
+      return [];
+    }
+
+    return project.unit.taskDefinitions;
+  }
+
+  startedDragging(event: CdkDragStart, boundary: HTMLElement) {
+    document.body.classList.add('split-pane-resizing');
+    event.source.element.nativeElement.classList.add('hovering');
+    const rect = boundary.getBoundingClientRect();
+    // x relative to the container
+    this.startLeftX = (event.event as MouseEvent).clientX - rect.left;
+    this.startWidth = this.leftWidth;
+  }
+
+  dragging(event: CdkDragMove, boundary: HTMLElement) {
+    const rect = boundary.getBoundingClientRect();
+    const x = (event.event as MouseEvent).clientX - rect.left;
+
+    const delta = x - this.startLeftX;
+    const newWidth = this.startWidth + delta;
+
+    this.leftWidth = Math.max(this.taskListCollapsedWidth, Math.min(500, newWidth));
+
+    // keep the handle visually glued to the divider
+    event.source.reset();
+  }
+
+  stoppedDragging(event: CdkDragEnd, _div: HTMLDivElement) {
+    document.body.classList.remove('split-pane-resizing');
+    event.source.element.nativeElement.classList.remove('hovering');
+  }
+
+  ngOnInit(): void {
+    this.breakpointObserver
+      .observe(this.commentsBreakpoint)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(({matches}) => {
+        this.isCommentsNarrow = matches;
+        this.commentsCollapsed = matches;
+        window.dispatchEvent(new Event('resize'));
+      });
+
+    this.breakpointObserver
+      .observe(this.phoneBreakpoint)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(({matches}) => {
+        this.isPhoneLayout = matches;
+        if (matches && this.selectedTaskDefinition$.value) {
+          this.mobilePane = this.shouldOpenFeedback(this.selectedTaskDefinition$.value)
+            ? 'feedback'
+            : 'task';
+        }
+        window.dispatchEvent(new Event('resize'));
+      });
+
+    this.selectedTaskDefinition$.pipe(takeUntil(this.destroy$)).subscribe((taskDefinition) => {
+      if (!taskDefinition) {
+        this.mobilePane = 'task';
+        return;
+      }
+
+      if (this.isPhoneLayout) {
+        // A task opened from a notification/deep link should expose its feedback immediately.
+        // A task chosen from the list is selected before its route is updated, so it starts on
+        // the task pane instead.
+        this.mobilePane = this.shouldOpenFeedback(taskDefinition) ? 'feedback' : 'task';
+      }
+    });
+
+    this.route.paramMap?.pipe(takeUntil(this.destroy$)).subscribe((params) => {
+      if (
+        this.isPhoneLayout &&
+        params.get('mobilePane') === 'feedback' &&
+        this.selectedTaskDefinition$.value
+      ) {
+        this.mobilePane = 'feedback';
+      }
+    });
+
+    if (this.defaultTaskListCollapsed) {
+      this.leftWidth = this.taskListCollapsedWidth;
+    }
+
+    this.taskService.taskSubmissionCompleted$.pipe(takeUntil(this.destroy$)).subscribe((task) => {
+      const activeProject = this.projectSubject.value;
+      const selectedTaskDefinition = this.selectedTaskDefinition$.value;
+      if (
+        activeProject?.id === task.project?.id &&
+        selectedTaskDefinition?.id === task.definition?.id
+      ) {
+        this.selectedTaskDefinition$.next(null);
+      }
+    });
+
+    const initialProject$ =
+      this.project$ ??
+      this.route.parent.data.pipe(
+        map((data) => data.project as Project),
+        filter((project): project is Project => !!project),
+      );
+    this.project$ = this.projectSubject.asObservable();
+    initialProject$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((project) =>
+        this.activateProject(
+          project,
+          project?.id ?? Number(this.route.parent?.snapshot.paramMap.get('projectId')),
+        ),
+      );
+
+    window.dispatchEvent(new Event('resize'));
+  }
+
+  ngOnDestroy(): void {
+    document.body.classList.remove('split-pane-resizing');
+    this.projectLoadCancel$.next();
+    this.projectLoadCancel$.complete();
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public toggleCommentsPanel(): void {
+    this.commentsCollapsed = !this.commentsCollapsed;
+    window.dispatchEvent(new Event('resize'));
+  }
+
+  public showMobilePane(pane: 'overview' | 'task' | 'feedback'): void {
+    this.mobilePane = pane;
+    this.syncSelectedTaskRoute(pane);
+  }
+
+  public clearTaskSelection(): void {
+    const selectedTaskDefinition = this.selectedTaskDefinition$.value;
+    if (selectedTaskDefinition && this.leftPanel) {
+      // Let the task list clear both its shared selection and the task segment in the URL.
+      this.leftPanel.setSelectedTaskDefinition(selectedTaskDefinition);
+    } else {
+      this.selectedTaskDefinition$.next(null);
+    }
+    this.mobilePane = 'task';
+  }
+
+  private get hasTaskRouteSelection(): boolean {
+    return !!this.route.snapshot?.paramMap?.get('taskAbbreviation');
+  }
+
+  private get hasFeedbackRouteSelection(): boolean {
+    return this.route.snapshot?.paramMap?.get('mobilePane') === 'feedback';
+  }
+
+  private syncSelectedTaskRoute(pane: 'overview' | 'task' | 'feedback'): void {
+    const selectedTaskDefinition = this.selectedTaskDefinition$.value;
+    // The dashboard is also embedded in the staff portfolio progress screen, whose task
+    // destination is supplied by its host. That route has no feedback suffix and must not be
+    // replaced with the student's standalone project dashboard route.
+    if (this.taskSelectionUrlBase) {
+      return;
+    }
+
+    const projectId =
+      this.activeProjectId ?? Number(this.route.parent?.snapshot.paramMap.get('projectId'));
+    if (!selectedTaskDefinition || !projectId) {
+      return;
+    }
+
+    const feedbackRoute = pane === 'feedback';
+    if (feedbackRoute === this.hasFeedbackRouteSelection) {
+      return;
+    }
+
+    const commands: Array<string | number> = [
+      '/projects',
+      projectId,
+      'dashboard',
+      selectedTaskDefinition.abbreviation,
+    ];
+    if (feedbackRoute) {
+      commands.push('feedback');
+    }
+
+    void this.angularRouter.navigate(commands, {replaceUrl: true});
+  }
+
+  private shouldOpenFeedback(taskDefinition: TaskDefinition): boolean {
+    const task = this.projectSubject.value?.findTaskForDefinition(taskDefinition.id);
+    return (
+      this.hasFeedbackRouteSelection ||
+      (this.hasTaskRouteSelection && (task?.numNewComments ?? 0) > 0)
+    );
+  }
+
+  private activateProject(project: Project, projectId: number): void {
+    if (!projectId) {
+      return;
+    }
+
+    // Hosts re-emit the project they are already showing. The portfolios progress tab does it on
+    // every change detection pass, and the reset below would drop the loaded project back to its
+    // skeleton and close the open task each time. Activating is only for a project we are not
+    // already showing or already fetching, so a repeat of the active one is left alone.
+    if (projectId === this.activeProjectId) {
+      return;
+    }
+
+    this.projectLoadCancel$.next();
+    const activation = ++this.projectActivation;
+    this.activeProjectId = projectId;
+    this.projectReady = false;
+    this.selectedTaskDefinition$.next(null);
+    this.projectSubject.next(project);
+
+    if (project?.unit?.id) {
+      this.globalStateService.setView(ViewType.PROJECT, project);
+    }
+
+    this.loadProject(projectId, activation);
+  }
+
+  private loadProject(projectId: number, activation: number): void {
+    if (!projectId) {
+      return;
+    }
+
+    this.projectService
+      .get(
+        {id: projectId},
+        {
+          cacheBehaviourOnGet: 'cacheQuery',
+          mappingCompleteCallback: (project: Project) => {
+            if (activation === this.projectActivation && project.id === this.activeProjectId) {
+              this.loadUnit(project, activation);
+            }
+          },
+        },
+      )
+      .pipe(takeUntil(this.projectLoadCancel$), takeUntil(this.destroy$))
+      .subscribe();
+  }
+
+  private loadUnit(project: Project, activation: number): void {
+    const unitId = project.unit?.id;
+    if (!unitId) {
+      this.showLoadedProject(project, activation);
+      return;
+    }
+
+    this.unitService
+      .get(unitId)
+      .pipe(takeUntil(this.projectLoadCancel$), takeUntil(this.destroy$))
+      .subscribe({
+        next: (unit) => {
+          if (activation !== this.projectActivation || project.id !== this.activeProjectId) {
+            return;
+          }
+
+          project.unit = unit;
+          unit.studentCache.add(project);
+          this.showLoadedProject(project, activation);
+        },
+        error: () => {
+          this.showLoadedProject(project, activation);
+        },
+      });
+  }
+
+  private showLoadedProject(project: Project, activation: number): void {
+    if (activation !== this.projectActivation || project.id !== this.activeProjectId) {
+      return;
+    }
+
+    this.projectReady = true;
+    this.globalStateService.setView(ViewType.PROJECT, project);
+    this.projectSubject.next(project);
+  }
+}
diff --git a/src/app/projects/states/dashboard/project-dashboard/project-dashboard.mobile.spec.ts b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.mobile.spec.ts
new file mode 100644
index 0000000000..054719f01a
--- /dev/null
+++ b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.mobile.spec.ts
@@ -0,0 +1,336 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {BreakpointObserver, BreakpointState} from '@angular/cdk/layout';
+import {CommonModule} from '@angular/common';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute, Router, convertToParamMap} from '@angular/router';
+import {BehaviorSubject, Subject, of, tap} from 'rxjs';
+import {Project, Task, TaskDefinition, Unit} from 'src/app/api/models/doubtfire-model';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {GlobalStateService} from '../../index/global-state.service';
+import {ProjectDashboardComponent} from './project-dashboard.component';
+
+describe('ProjectDashboardComponent phone task workspace', () => {
+  let fixture: ComponentFixture<ProjectDashboardComponent>;
+  let component: ProjectDashboardComponent;
+  let phoneState$: BehaviorSubject<BreakpointState>;
+  let commentsState$: BehaviorSubject<BreakpointState>;
+  let observeBreakpoint: ReturnType<typeof vi.fn>;
+  let routeTaskAbbreviation: string | null;
+  let routeMobilePane: string | null;
+  let routeParams$: BehaviorSubject<ReturnType<typeof convertToParamMap>>;
+  let routerNavigate: ReturnType<typeof vi.fn>;
+
+  const taskDefinition = {
+    id: 42,
+    abbreviation: '1.1P',
+    name: 'First task',
+  } as TaskDefinition;
+  const unit = {
+    id: 101,
+    taskDefinitions: [taskDefinition],
+    studentCache: {add: vi.fn()},
+  } as unknown as Unit;
+  const task = {definition: taskDefinition, numNewComments: 1} as Task;
+  const project = {
+    id: 2,
+    targetGrade: 0,
+    unit,
+    tasks: [task],
+    findTaskForDefinition: (id: number) => (id === taskDefinition.id ? task : null),
+  } as unknown as Project;
+
+  const renderSelectedTask = (): void => {
+    component.selectedTaskDefinition$.next(taskDefinition);
+    fixture.detectChanges();
+  };
+
+  const query = <T extends Element = HTMLElement>(selector: string): T | null =>
+    fixture.nativeElement.querySelector(selector) as T | null;
+
+  beforeEach(async () => {
+    routeTaskAbbreviation = null;
+    routeMobilePane = null;
+    routeParams$ = new BehaviorSubject(convertToParamMap({}));
+    routerNavigate = vi.fn().mockResolvedValue(true);
+    task.numNewComments = 1;
+    phoneState$ = new BehaviorSubject<BreakpointState>({
+      matches: true,
+      breakpoints: {},
+    });
+    commentsState$ = new BehaviorSubject<BreakpointState>({
+      matches: true,
+      breakpoints: {},
+    });
+    observeBreakpoint = vi.fn((value: string | readonly string[]) => {
+      const queryText = Array.isArray(value) ? value.join(',') : value;
+      return queryText.includes('999.98px') ? commentsState$ : phoneState$;
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [CommonModule],
+      declarations: [ProjectDashboardComponent],
+      providers: [
+        {provide: UserService, useValue: {}},
+        {
+          provide: ProjectService,
+          useValue: {
+            get: (
+              _params: {id: number},
+              options: {mappingCompleteCallback: (loaded: Project) => void},
+            ) => of(project).pipe(tap((loaded) => options.mappingCompleteCallback(loaded))),
+          },
+        },
+        {
+          provide: TaskService,
+          useValue: {taskSubmissionCompleted$: new Subject<Task>()},
+        },
+        {provide: UnitService, useValue: {get: () => of(unit)}},
+        {provide: GlobalStateService, useValue: {setView: vi.fn()}},
+        {
+          provide: ActivatedRoute,
+          useFactory: () => ({
+            paramMap: routeParams$.asObservable(),
+            snapshot: {
+              get paramMap() {
+                return convertToParamMap({
+                  taskAbbreviation: routeTaskAbbreviation,
+                  mobilePane: routeMobilePane,
+                });
+              },
+            },
+            parent: {
+              data: of({project}),
+              snapshot: {
+                data: {project},
+                paramMap: convertToParamMap({projectId: project.id}),
+              },
+            },
+          }),
+        },
+        {provide: BreakpointObserver, useValue: {observe: observeBreakpoint}},
+        {provide: Router, useValue: {navigate: routerNavigate}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  const createComponent = (): void => {
+    routeParams$.next(
+      convertToParamMap({
+        taskAbbreviation: routeTaskAbbreviation,
+        mobilePane: routeMobilePane,
+      }),
+    );
+    fixture = TestBed.createComponent(ProjectDashboardComponent);
+    component = fixture.componentInstance;
+    component.project$ = of(project);
+    fixture.detectChanges();
+  };
+
+  it('uses a single full-width feedback pane for a task opened from a phone deep link', () => {
+    routeTaskAbbreviation = taskDefinition.abbreviation;
+    createComponent();
+    renderSelectedTask();
+
+    expect(observeBreakpoint).toHaveBeenCalledWith('(max-width: 639.98px)');
+    expect(component.isPhoneLayout).toBe(true);
+    expect(component.mobilePane).toBe('feedback');
+    expect(query('.project-task-list-panel')?.classList).toContain(
+      'project-task-list-panel--phone-hidden',
+    );
+    expect(query('.project-task-resizer')?.classList).toContain(
+      'project-task-resizer--phone-hidden',
+    );
+    expect(query('.mobile-task-view')).not.toBeNull();
+    expect(query('.mobile-task-pane task-comments-viewer')).not.toBeNull();
+    expect(query('.mobile-task-pane f-task-dashboard')).toBeNull();
+    expect(query('.comments-sidebar')).toBeNull();
+  });
+
+  it('keeps project navigation visible while the phone task list is open', () => {
+    createComponent();
+
+    const overviewButton = query<HTMLButtonElement>('button[aria-label="Show project overview"]');
+    const taskListButton = query<HTMLButtonElement>('button[aria-label="Show task list"]');
+    const detailsButton = query<HTMLButtonElement>('button[aria-label="Show task details"]');
+    const feedbackButton = query<HTMLButtonElement>('button[aria-label="Show feedback"]');
+
+    expect(query('nav[aria-label="Project dashboard navigation"]')).not.toBeNull();
+    expect(overviewButton?.getAttribute('aria-pressed')).toBe('false');
+    expect(taskListButton?.getAttribute('aria-pressed')).toBe('true');
+    expect(taskListButton?.classList).toContain('mobile-task-tab--active');
+    expect(detailsButton?.disabled).toBe(true);
+    expect(feedbackButton?.disabled).toBe(true);
+    expect(query('.project-task-list-panel')?.classList).not.toContain(
+      'project-task-list-panel--phone-hidden',
+    );
+  });
+
+  it('exposes the complete progress dashboard from the phone overview tab', () => {
+    createComponent();
+
+    query<HTMLButtonElement>('button[aria-label="Show project overview"]')?.click();
+    fixture.detectChanges();
+
+    const overviewButton = query<HTMLButtonElement>('button[aria-label="Show project overview"]');
+    expect(component.mobilePane).toBe('overview');
+    expect(overviewButton?.getAttribute('aria-pressed')).toBe('true');
+    expect(overviewButton?.classList).toContain('mobile-task-tab--active');
+    expect(query('section[aria-label="Project overview"]')).not.toBeNull();
+    expect(query('.mobile-overview-pane f-progress-dashboard')).not.toBeNull();
+    expect(query('.project-task-list-panel')?.classList).toContain(
+      'project-task-list-panel--phone-hidden',
+    );
+    expect(query('.mobile-task-view')).toBeNull();
+  });
+
+  it('keeps the selected task available while viewing progress on a phone', () => {
+    createComponent();
+    renderSelectedTask();
+
+    query<HTMLButtonElement>('button[aria-label="Show project overview"]')?.click();
+    fixture.detectChanges();
+
+    expect(component.selectedTaskDefinition$.value).toBe(taskDefinition);
+    expect(query('.mobile-overview-pane f-progress-dashboard')).not.toBeNull();
+
+    query<HTMLButtonElement>('button[aria-label="Show feedback"]')?.click();
+    fixture.detectChanges();
+
+    expect(component.selectedTaskDefinition$.value).toBe(taskDefinition);
+    expect(component.mobilePane).toBe('feedback');
+    expect(query('.mobile-task-pane task-comments-viewer')).not.toBeNull();
+    expect(query('.mobile-overview-pane')).toBeNull();
+  });
+
+  it('opens task details first when a student selects a task from the phone list', () => {
+    createComponent();
+    renderSelectedTask();
+
+    expect(component.mobilePane).toBe('task');
+    expect(query('.mobile-task-pane f-task-dashboard')).not.toBeNull();
+    expect(query('.mobile-task-pane task-comments-viewer')).toBeNull();
+  });
+
+  it('switches exclusively between the task and feedback panes', () => {
+    createComponent();
+    renderSelectedTask();
+
+    const feedbackButton = query<HTMLButtonElement>('button[aria-label="Show feedback"]');
+    feedbackButton?.click();
+    fixture.detectChanges();
+
+    expect(
+      query<HTMLButtonElement>('button[aria-label="Show feedback"]')?.getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(query('.mobile-task-pane task-comments-viewer')).not.toBeNull();
+    expect(query('.mobile-task-pane f-task-dashboard')).toBeNull();
+
+    const detailsButton = query<HTMLButtonElement>('button[aria-label="Show task details"]');
+    detailsButton?.click();
+    fixture.detectChanges();
+
+    expect(
+      query<HTMLButtonElement>('button[aria-label="Show task details"]')?.getAttribute(
+        'aria-pressed',
+      ),
+    ).toBe('true');
+    expect(query('.mobile-task-pane f-task-dashboard')).not.toBeNull();
+    expect(query('.mobile-task-pane task-comments-viewer')).toBeNull();
+  });
+
+  it('keeps a non-feedback deep link on task details when there are no unread comments', () => {
+    routeTaskAbbreviation = taskDefinition.abbreviation;
+    task.numNewComments = 0;
+    createComponent();
+    renderSelectedTask();
+
+    expect(component.mobilePane).toBe('task');
+    expect(query('.mobile-task-pane f-task-dashboard')).not.toBeNull();
+    expect(query('.mobile-task-pane task-comments-viewer')).toBeNull();
+  });
+
+  it('opens an explicit feedback destination even after its comments were already read', () => {
+    routeTaskAbbreviation = taskDefinition.abbreviation;
+    routeMobilePane = 'feedback';
+    task.numNewComments = 0;
+    createComponent();
+    renderSelectedTask();
+
+    expect(component.mobilePane).toBe('feedback');
+    expect(query('.mobile-task-pane task-comments-viewer')).not.toBeNull();
+    expect(query('.mobile-task-pane f-task-dashboard')).toBeNull();
+  });
+
+  it('reopens feedback when the same task receives another notification after changing panes', () => {
+    routeTaskAbbreviation = taskDefinition.abbreviation;
+    routeMobilePane = 'feedback';
+    task.numNewComments = 0;
+    createComponent();
+    renderSelectedTask();
+
+    query<HTMLButtonElement>('button[aria-label="Show project overview"]')?.click();
+    fixture.detectChanges();
+
+    expect(component.mobilePane).toBe('overview');
+    expect(routerNavigate).toHaveBeenLastCalledWith(
+      ['/projects', project.id, 'dashboard', taskDefinition.abbreviation],
+      {replaceUrl: true},
+    );
+
+    routeMobilePane = null;
+    routeParams$.next(convertToParamMap({taskAbbreviation: taskDefinition.abbreviation}));
+    routeMobilePane = 'feedback';
+    routeParams$.next(
+      convertToParamMap({
+        taskAbbreviation: taskDefinition.abbreviation,
+        mobilePane: routeMobilePane,
+      }),
+    );
+    fixture.detectChanges();
+
+    expect(component.mobilePane).toBe('feedback');
+    expect(query('.mobile-task-pane task-comments-viewer')).not.toBeNull();
+    expect(query('.mobile-overview-pane')).toBeNull();
+  });
+
+  it('returns to the full-width task list from the selected phone workspace', () => {
+    createComponent();
+    renderSelectedTask();
+
+    const clearThroughTaskList = vi.fn(() => component.selectedTaskDefinition$.next(null));
+    Reflect.set(component, 'leftPanel', {setSelectedTaskDefinition: clearThroughTaskList});
+
+    query<HTMLButtonElement>('button[aria-label="Show task list"]')?.click();
+    fixture.detectChanges();
+
+    expect(clearThroughTaskList).toHaveBeenCalledWith(taskDefinition);
+    expect(component.selectedTaskDefinition$.value).toBeNull();
+    expect(component.mobilePane).toBe('task');
+    expect(query('.mobile-task-view')).toBeNull();
+    expect(query('nav[aria-label="Project dashboard navigation"]')).not.toBeNull();
+    expect(
+      query<HTMLButtonElement>('button[aria-label="Show task list"]')?.getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(query('.project-task-list-panel')?.classList).not.toContain(
+      'project-task-list-panel--phone-hidden',
+    );
+  });
+
+  it('preserves the three-pane desktop layout above the phone breakpoint', () => {
+    phoneState$.next({matches: false, breakpoints: {}});
+    commentsState$.next({matches: false, breakpoints: {}});
+    createComponent();
+    renderSelectedTask();
+
+    expect(component.isPhoneLayout).toBe(false);
+    expect(query('.mobile-task-view')).toBeNull();
+    expect(query('.desktop-task-dashboard f-task-dashboard')).not.toBeNull();
+    expect(query('.comments-sidebar task-comments-viewer')).not.toBeNull();
+    expect(query<HTMLElement>('.project-task-list-panel')?.style.width).toBe('400px');
+  });
+});
diff --git a/src/app/projects/states/dashboard/selected-task.service.spec.ts b/src/app/projects/states/dashboard/selected-task.service.spec.ts
index 7883cf970a..cecaef3b82 100644
--- a/src/app/projects/states/dashboard/selected-task.service.spec.ts
+++ b/src/app/projects/states/dashboard/selected-task.service.spec.ts
@@ -1,12 +1,22 @@
-import { TestBed } from '@angular/core/testing';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {TaskService} from 'src/app/api/services/task.service';
+import {GlobalStateService} from '../index/global-state.service';
+import {SelectedTaskService} from './selected-task.service';
 
-import { SelectedTaskService } from './selected-task.service';
+const emptyProvider = {};
 
 describe('SelectedTaskService', () => {
   let service: SelectedTaskService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [
+        SelectedTaskService,
+        {provide: TaskService, useValue: emptyProvider},
+        {provide: GlobalStateService, useValue: emptyProvider},
+      ],
+    });
     service = TestBed.inject(SelectedTaskService);
   });
 
diff --git a/src/app/projects/states/dashboard/selected-task.service.ts b/src/app/projects/states/dashboard/selected-task.service.ts
index 6a6684c81c..cfcc9efd81 100644
--- a/src/app/projects/states/dashboard/selected-task.service.ts
+++ b/src/app/projects/states/dashboard/selected-task.service.ts
@@ -5,9 +5,14 @@ import {TaskService} from 'src/app/api/services/task.service';
 import {GlobalStateService} from '../index/global-state.service';
 
 export enum DashboardViews {
+  details,
   submission,
   task,
   similarity,
+  staff_notes,
+  tutor_notes,
+  discussion_prompts,
+  submission_history,
 }
 
 @Injectable({
@@ -19,10 +24,12 @@ export class SelectedTaskService {
     private globalState: GlobalStateService,
   ) {}
 
-  private task$ = new BehaviorSubject<Task>(null);
-  public currentPdfUrl$ = new BehaviorSubject<string>(null);
+  private task$: BehaviorSubject<Task> = new BehaviorSubject(null);
+  public currentPdfUrl$: BehaviorSubject<string> = new BehaviorSubject(null);
 
-  public currentView$ = new BehaviorSubject<DashboardViews>(DashboardViews.submission);
+  public currentView$: BehaviorSubject<DashboardViews> = new BehaviorSubject(
+    DashboardViews.submission,
+  );
 
   public get hasTaskSheet(): boolean {
     return this.task$.value?.definition?.hasTaskSheet;
@@ -46,6 +53,13 @@ export class SelectedTaskService {
     } else {
       this.task$.next(task);
 
+      if (!task) {
+        this.currentPdfUrl$.next(null);
+        this.currentView$.next(DashboardViews.submission);
+        this.checkFooterHeight();
+        return;
+      }
+
       task?.getSubmissionDetails().subscribe();
     }
     this.checkFooterHeight();
@@ -61,8 +75,30 @@ export class SelectedTaskService {
     this.currentView$.next(DashboardViews.similarity);
   }
 
+  public showStaffNotes() {
+    this.currentView$.next(DashboardViews.staff_notes);
+  }
+
+  public showTutorNotes() {
+    this.currentView$.next(DashboardViews.tutor_notes);
+  }
+
+  public showOverseerReports() {
+    this.currentView$.next(DashboardViews.submission_history);
+  }
+
+  public showSubmissionHistory() {
+    this.currentView$.next(DashboardViews.submission_history);
+  }
+
+  public showDiscussionPrompts() {
+    this.currentView$.next(DashboardViews.discussion_prompts);
+  }
+
   public showSubmission() {
-    if (!this.task$.value) return;
+    if (!this.task$.value) {
+      return;
+    }
     this.currentPdfUrl$.next(this.task$.value.submissionUrl(false));
     this.currentView$.next(DashboardViews.submission);
   }
diff --git a/src/app/projects/states/discussion-prompts/discussion-prompts.component.html b/src/app/projects/states/discussion-prompts/discussion-prompts.component.html
new file mode 100644
index 0000000000..e792873915
--- /dev/null
+++ b/src/app/projects/states/discussion-prompts/discussion-prompts.component.html
@@ -0,0 +1,23 @@
+<div class="flex w-full flex-col gap-3 p-3">
+  @for (prompt of discussionPrompts; track prompt) {
+    <mat-card appearance="outlined">
+      <mat-card-content class="flex items-center justify-evenly gap-3">
+        <div
+          class="flex max-h-5 w-20 items-center justify-center rounded-full bg-gray-200 p-3"
+          matTooltipPosition="above"
+          [matTooltip]="prompt.taskDefinition.name"
+        >
+          {{ prompt.taskDefinition.abbreviation }}
+        </div>
+        <div class="w-full">
+          {{ prompt.content }}
+        </div>
+        <div class="w-20 text-center">
+          {{ prompt.priorityLabel }}
+        </div>
+      </mat-card-content>
+    </mat-card>
+  } @empty {
+    <div class="mt-10 size-full text-center text-gray-400">No discussion prompts for this task</div>
+  }
+</div>
diff --git a/src/app/projects/states/discussion-prompts/discussion-prompts.component.scss b/src/app/projects/states/discussion-prompts/discussion-prompts.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/discussion-prompts/discussion-prompts.component.ts b/src/app/projects/states/discussion-prompts/discussion-prompts.component.ts
new file mode 100644
index 0000000000..cc81e95a94
--- /dev/null
+++ b/src/app/projects/states/discussion-prompts/discussion-prompts.component.ts
@@ -0,0 +1,59 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {DiscussionPrompt} from 'src/app/api/models/discussion-prompt';
+import {Project, TaskDefinition, UserService} from 'src/app/api/models/doubtfire-model';
+import {StaffNote} from 'src/app/api/models/staff-note';
+import {DiscussionPromptService} from 'src/app/api/services/discussion-prompt.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-discussion-prompts',
+  templateUrl: './discussion-prompts.component.html',
+  styleUrl: './discussion-prompts.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class DiscussionPromptsComponent implements OnInit {
+  @ViewChild('staffNotesContainer') staffNotesContainer!: ElementRef;
+  @ViewChild('staffNoteEditor', {static: false}) staffNoteEditor!: ElementRef<HTMLTextAreaElement>;
+
+  @Input() project: Project;
+  @Input() taskDefinition: TaskDefinition;
+
+  loadingStaffNotes: boolean = true;
+
+  noteText: string = '';
+
+  editingNote?: StaffNote;
+  editingNoteText?: string = '';
+
+  replyingToNote?: StaffNote;
+
+  hoveredNoteId: number | null = null;
+
+  discussionPrompts: DiscussionPrompt[] = [];
+
+  constructor(
+    private userService: UserService,
+    private discussionPromptService: DiscussionPromptService,
+    private alertService: AlertService,
+    private confirmationModalService: ConfirmationModalService,
+  ) {}
+  ngOnInit(): void {
+    console.log('task def?', this.taskDefinition);
+    this.loadingStaffNotes = true;
+    this.discussionPromptService
+      .loadDiscussionPromptsForPoject(this.project)
+      .subscribe((prompts) => {
+        console.log(prompts);
+        this.discussionPrompts = prompts;
+      });
+  }
+}
diff --git a/src/app/projects/states/feedback/feedback.coffee b/src/app/projects/states/feedback/feedback.coffee
deleted file mode 100644
index 43e92a7e88..0000000000
--- a/src/app/projects/states/feedback/feedback.coffee
+++ /dev/null
@@ -1,13 +0,0 @@
-angular.module('doubtfire.projects.states.feedback', [])
-
-#
-# Skips directly to feedback view (is a child of projects#show)
-# of a specific task id
-#
-# This may be completely gone...
-# .config(($stateProvider) ->
-#   projectsFeedbackStateData =
-#     url: ":viewing/:showTaskId"
-#     parent: 'projects#show'
-#   $stateProvider.state "projects#feedback", projectsFeedbackStateData
-# )
diff --git a/src/app/projects/states/groups/groups.coffee b/src/app/projects/states/groups/groups.coffee
deleted file mode 100644
index a20d2c0d8c..0000000000
--- a/src/app/projects/states/groups/groups.coffee
+++ /dev/null
@@ -1,21 +0,0 @@
-angular.module('doubtfire.projects.states.groups', [])
-
-#
-# Tasks state for projects
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'projects/groups', {
-    parent: 'projects/index'
-    url: '/groups'
-    controller: 'ProjectsGroupsStateCtrl'
-    templateUrl: 'projects/states/groups/groups.tpl.html'
-    data:
-      task: "Groups List"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
-   }
-)
-
-.controller("ProjectsGroupsStateCtrl", ($scope) ->
-  # TODO: (@alexcu) move directive inot state
-)
diff --git a/src/app/projects/states/groups/groups.tpl.html b/src/app/projects/states/groups/groups.tpl.html
deleted file mode 100644
index e5086ab3c6..0000000000
--- a/src/app/projects/states/groups/groups.tpl.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="container" ng-if="unit.hasGroupwork()">
-  <group-set-manager
-    project="project"
-    unit="unit"
-    selected-group-set="selectedGroupSet">
-  </group-set-manager>
-</div><!--/has-groupwork-->
-<div class="container" ng-hide="unit.hasGroupwork()">
-  <div class="large-notice-block">
-    <i class="fa fa-2x fa-users"></i>
-    <p>No Group Work</p>
-  </div>
-  <div class="text-center text-muted col-sm-12 col-md-6 col-md-offset-3">
-    There is no group work enabled for this unit.
-  </div>
-</div><!--/no-groupwork-->
diff --git a/src/app/projects/states/groups/project-groups-state.component.html b/src/app/projects/states/groups/project-groups-state.component.html
new file mode 100644
index 0000000000..e02214e8b7
--- /dev/null
+++ b/src/app/projects/states/groups/project-groups-state.component.html
@@ -0,0 +1,7 @@
+@if (project) {
+  <f-project-groups
+    [project]="project"
+    [selectedGroupSet]="selectedGroupSet"
+    [unit]="project.unit"
+  ></f-project-groups>
+}
diff --git a/src/app/projects/states/groups/project-groups-state.component.scss b/src/app/projects/states/groups/project-groups-state.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/groups/project-groups-state.component.ts b/src/app/projects/states/groups/project-groups-state.component.ts
new file mode 100644
index 0000000000..5d46a7c7c4
--- /dev/null
+++ b/src/app/projects/states/groups/project-groups-state.component.ts
@@ -0,0 +1,43 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, Subscription, of} from 'rxjs';
+import {GroupSet, Project} from 'src/app/api/models/doubtfire-model';
+import {GlobalStateService} from '../index/global-state.service';
+
+@Component({
+  selector: 'f-project-groups-state',
+  templateUrl: './project-groups-state.component.html',
+  styleUrls: ['./project-groups-state.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectGroupsStateComponent implements OnInit, OnDestroy {
+  @Input() public project$: Observable<Project>;
+
+  public project: Project;
+  public selectedGroupSet: GroupSet;
+
+  private projectSub?: Subscription;
+
+  constructor(
+    private globalStateService: GlobalStateService,
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit(): void {
+    this.project$ = this.project$ ?? of(this.route.parent?.snapshot.data.project as Project);
+
+    this.projectSub = this.project$?.subscribe((project) => {
+      if (!project) {
+        return;
+      }
+
+      this.project = project;
+      this.selectedGroupSet = this.selectedGroupSet ?? project.unit?.groupSets?.[0];
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.projectSub?.unsubscribe();
+  }
+}
diff --git a/src/app/projects/states/groups/project-groups/project-groups.component.html b/src/app/projects/states/groups/project-groups/project-groups.component.html
new file mode 100644
index 0000000000..80e6de1aee
--- /dev/null
+++ b/src/app/projects/states/groups/project-groups/project-groups.component.html
@@ -0,0 +1,12 @@
+<f-page-container>
+  @if (unit.hasGroupwork()) {
+    <f-group-set-manager [project]="project" [selectedGroupSet]="selectedGroupSet" [unit]="unit">
+    </f-group-set-manager>
+  } @else {
+    <div class="mx-auto flex max-w-4xl flex-col items-center justify-center">
+      <mat-icon>groups</mat-icon>
+      <h1>No Group Work</h1>
+      <p class="p-1 text-center text-gray-500">There is no group work enabled for this unit.</p>
+    </div>
+  }
+</f-page-container>
diff --git a/src/app/projects/states/groups/project-groups/project-groups.component.scss b/src/app/projects/states/groups/project-groups/project-groups.component.scss
new file mode 100644
index 0000000000..542e68a366
--- /dev/null
+++ b/src/app/projects/states/groups/project-groups/project-groups.component.scss
@@ -0,0 +1,5 @@
+.mat-icon {
+  font-size: 75px;
+  width: 75px;
+  height: 75px;
+}
diff --git a/src/app/projects/states/groups/project-groups/project-groups.component.ts b/src/app/projects/states/groups/project-groups/project-groups.component.ts
new file mode 100644
index 0000000000..6e64ae5f43
--- /dev/null
+++ b/src/app/projects/states/groups/project-groups/project-groups.component.ts
@@ -0,0 +1,17 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {GroupSet, Project} from 'src/app/api/models/doubtfire-model';
+import {Unit} from 'src/app/api/models/unit';
+
+// This component is only displayed to students (projects)
+@Component({
+  selector: 'f-project-groups',
+  templateUrl: './project-groups.component.html',
+  styleUrl: './project-groups.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectGroupsComponent {
+  @Input() unit: Unit;
+  @Input() project: Project;
+  @Input() selectedGroupSet: GroupSet;
+}
diff --git a/src/app/projects/states/index/global-state.service.ts b/src/app/projects/states/index/global-state.service.ts
index bb730a37c8..92fd097aa3 100644
--- a/src/app/projects/states/index/global-state.service.ts
+++ b/src/app/projects/states/index/global-state.service.ts
@@ -1,10 +1,11 @@
-import {Inject, Injectable, OnDestroy} from '@angular/core';
-import {MediaObserver} from 'ng-flex-layout';
-import {UIRouter} from '@uirouter/angular';
 import {EntityCache} from 'ngx-entity-service';
-import {BehaviorSubject, Observable, Subject, skip, take} from 'rxjs';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {Injectable, OnDestroy} from '@angular/core';
+import {Router} from '@angular/router';
+import {BehaviorSubject, Observable, Subject, find} from 'rxjs';
 import {
   CampusService,
+  LearningOutcomeService,
   Project,
   ProjectService,
   TeachingPeriodService,
@@ -15,7 +16,9 @@ import {
   UserService,
 } from 'src/app/api/models/doubtfire-model';
 import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {FeedbackTemplateService} from 'src/app/api/services/feedback-template.service';
 import {AlertService} from 'src/app/common/services/alert.service';
+import {AuthReturnUrlService} from 'src/app/security/auth-return-url.service';
 
 /**
  * The different types of views that can be shown. Used by the header to determine details to show.
@@ -69,6 +72,7 @@ export class GlobalStateService implements OnDestroy {
   public currentUserProjects: EntityCache<Project>;
 
   private _showFooter = false;
+  private _isInboxState = false;
   private _showFooterWarning = false;
 
   /**
@@ -106,25 +110,40 @@ export class GlobalStateService implements OnDestroy {
     private projectService: ProjectService,
     private campusService: CampusService,
     private teachingPeriodService: TeachingPeriodService,
-    @Inject(UIRouter) private router: UIRouter,
+    private learningOutcomeService: LearningOutcomeService,
+    private feedbackTemplateService: FeedbackTemplateService,
+    private router: Router,
     private alerts: AlertService,
-    private mediaObserver: MediaObserver,
+    private breakpointObserver: BreakpointObserver,
+    private authReturnUrl: AuthReturnUrlService,
   ) {
     this.loadedUnitRoles = this.unitRoleService.cache;
     this.loadedUnits = this.unitService.cache;
     this.currentUserProjects = this.projectService.cache;
 
-    this.authenticationService.checkUserCookie();
-
+    // Use timeout to ensure everything is loaded before we try to login
     setTimeout(() => {
-      if (this.authenticationService.isAuthenticated()) {
-        this.loadGlobals();
-      } else {
-        // not loading anything as no user - just redirect to sign in
-        this.isLoadingSubject.next(false);
-        this.router.stateService.go('sign_in');
-      }
-    }, 800);
+      // Try to login using the refresh token
+      this.authenticationService.attemptLoginUsingRefreshToken((result: boolean) => {
+        if (result) {
+          if (
+            this.userService.currentUser.hasRunFirstTimeSetup === false &&
+            window.location.pathname !== '/welcome'
+          ) {
+            this.router.navigateByUrl('/welcome');
+          }
+        } else {
+          // Loading is finshed...
+          this.isLoadingSubject.next(false);
+
+          // and if we are not going to the sign in page, then redirect to it
+          if (window.location.pathname !== '/sign_in') {
+            this.authReturnUrl.rememberCurrentUrl();
+            this.router.navigateByUrl('/sign_in');
+          }
+        }
+      });
+    }, 100);
 
     // this is a hack to workaround horrific IOS "feature"
     // https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
@@ -138,7 +157,9 @@ export class GlobalStateService implements OnDestroy {
     setTimeout(() => {
       const vh = window.innerHeight * 0.01;
 
-      if (!this.mediaObserver.isActive('gt-sm') || !this._showFooter) {
+      if (this._isInboxState) {
+        document.body.style.setProperty('--vh', `${vh}px`);
+      } else if (!this.breakpointObserver.isMatched('(min-width: 960px)') || !this._showFooter) {
         document.body.style.setProperty('--vh', `${vh - 0.2}px`);
       } else {
         if (this._showFooter && !this._showFooterWarning) {
@@ -151,24 +172,27 @@ export class GlobalStateService implements OnDestroy {
   }
 
   public get isInboxState(): boolean {
-    return this._showFooter;
+    return this._isInboxState;
   }
 
   public setInboxState() {
-    this._showFooter = true;
-    // set background color to white
-    document.body.style.setProperty('background-color', '#f5f5f5');
+    this._isInboxState = true;
+    // THM-M01: inbox grey, was hardcoded #f5f5f5 inline. Onto the page token so it
+    // follows the resolved theme; the fallback keeps the legacy value pre-boot.
+    document.body.style.setProperty('background-color', 'var(--ot-color-page, #f5f5f5)');
+    this.resetHeight();
   }
 
   public goHome() {
     this.showHeader();
-    document.body.style.setProperty('background-color', '#f5f5f5');
+    document.body.style.setProperty('background-color', 'var(--ot-color-page, #f5f5f5)');
   }
 
   public setNotInboxState() {
-    this._showFooter = false;
-    // set background color to white
-    document.body.style.setProperty('background-color', '#fff');
+    this._isInboxState = false;
+    // THM-M01: was hardcoded #fff inline.
+    document.body.style.setProperty('background-color', 'var(--ot-color-surface, #fff)');
+    this.resetHeight();
   }
 
   public showFooter(): void {
@@ -184,14 +208,18 @@ export class GlobalStateService implements OnDestroy {
   // called when we need to set the footer to be a bit taller
   // to account for the alert div
   public showFooterWarning(): void {
-    if (!this._showFooter) return;
+    if (!this._showFooter) {
+      return;
+    }
     this._showFooterWarning = true;
     this.resetHeight();
   }
 
   // called when we need to set the footer to be normal sized
   public hideFooterWarning(): void {
-    if (!this._showFooter) return;
+    if (!this._showFooter) {
+      return;
+    }
     this._showFooterWarning = false;
     this.resetHeight();
   }
@@ -201,9 +229,8 @@ export class GlobalStateService implements OnDestroy {
     this.isLoadingSubject.next(true);
     this.userService.cache.clear();
     this.clearUnitsAndProjects();
-    this.authenticationService.signOut();
     this.isLoadingSubject.next(false);
-    this.router.stateService.go('sign_in');
+    this.authenticationService.signOut();
   }
 
   public ngOnDestroy(): void {
@@ -213,24 +240,53 @@ export class GlobalStateService implements OnDestroy {
   }
 
   public loadGlobals(): void {
+    let loaded = 0;
+    // Indicate we are loading data...
     this.isLoadingSubject.next(true);
 
     // Loading observer watches for loading of campuses, and teaching periods before loading unit roles, and projects
     const loadingObserver = new Observable((subscriber) => {
       // Loading campuses
       this.campusService.query().subscribe({
-        next: (_reponse) => {
-          subscriber.next(true);
+        next: (_response) => {
+          subscriber.next(++loaded);
         },
         error: (_response) => {
           this.alerts.error('Unable to access service. Failed loading campuses.', 6000);
         },
       });
 
+      if (this.userService.currentUser.isStaff) {
+        this.learningOutcomeService
+          .query({}, {endpointFormat: LearningOutcomeService.globalEndpoint})
+          .subscribe({
+            next: (_response) => {
+              subscriber.next(null);
+            },
+            error: (_response) => {
+              this.alerts.error('Unable to access service. Failed loading GLOs.', 6000);
+            },
+          });
+
+        this.feedbackTemplateService
+          .query({}, {endpointFormat: FeedbackTemplateService.globalEndpoint})
+          .subscribe({
+            next: (_response) => {
+              subscriber.next(null);
+            },
+            error: (_response) => {
+              this.alerts.error(
+                'Unable to access service. Failed loading GLO feedback templates.',
+                6000,
+              );
+            },
+          });
+      }
+
       // Loading teaching periods
       this.teachingPeriodService.query().subscribe({
         next: (_response) => {
-          subscriber.next(true);
+          subscriber.next(++loaded);
         },
         error: (_response) => {
           this.alerts.error('Unable to access service. Failed loading teaching periods.', 6000);
@@ -239,7 +295,7 @@ export class GlobalStateService implements OnDestroy {
     });
 
     // Watch for load of campuses and teaching periods, then trigger loading of unit roles and projects
-    loadingObserver.pipe(skip(1), take(1)).subscribe({
+    loadingObserver.pipe(find((loaded) => loaded === 2)).subscribe({
       next: () => {
         // trigger loading of units and projects - this will end the loading when complete
         this.loadUnitsAndProjects();
@@ -251,20 +307,31 @@ export class GlobalStateService implements OnDestroy {
    * Query the API for the units taught and studied by the current user.
    */
   private loadUnitsAndProjects() {
-    this.isLoadingSubject.next(true);
     this.unitRoleService.query().subscribe({
       next: (_unitRoles: UnitRole[]) => {
         // unit roles are now in the cache
 
-        this.projectService.query(undefined, {params: {include_in_active: false}}).subscribe({
-          next: (_projects: Project[]) => {
-            // projects updated in cache
-
-            setTimeout(() => {
-              this.isLoadingSubject.next(false);
-            }, 800);
-          },
-        });
+        this.projectService
+          .query(undefined, {
+            params: {
+              include_inactive: false,
+              include_task_definitions: true,
+            },
+          })
+          .subscribe({
+            next: (_projects: Project[]) => {
+              // projects updated in cache
+              setTimeout(() => {
+                this.isLoadingSubject.next(false);
+              }, 800);
+            },
+            error: (_response) => {
+              this.alerts.error('Unable to access the units you study.', 6000);
+            },
+          });
+      },
+      error: (_response) => {
+        this.alerts.error('Unable to access your units.', 6000);
       },
     });
   }
diff --git a/src/app/projects/states/index/index.coffee b/src/app/projects/states/index/index.coffee
deleted file mode 100644
index 8a0f4dfde8..0000000000
--- a/src/app/projects/states/index/index.coffee
+++ /dev/null
@@ -1,51 +0,0 @@
-angular.module('doubtfire.projects.states.index', [])
-
-#
-# Root state for projects
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'projects/index', {
-    url: "/projects/:projectId"
-    abstract: true
-    views:
-      main:
-        controller: "ProjectsIndexStateCtrl"
-        templateUrl: "units/states/index/index.tpl.html" # We can re-use unit's index here
-    data:
-      pageTitle: "_Home_"
-      roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor']
-  }
-)
-
-.controller("ProjectsIndexStateCtrl", ($scope, $rootScope, $state, $stateParams, newProjectService, listenerService, GlobalStateService) ->
-  # Error - required projectId is missing!
-  projectId = +$stateParams.projectId
-  return $state.go('home') unless projectId
-
-  GlobalStateService.onLoad () ->
-    # Load in project
-    newProjectService.get(projectId, {
-      # Ensure that we cache queries here... so that we get any projects we are in
-      # even when we are also teaching that unit
-      cacheBehaviourOnGet: 'cacheQuery',
-      mappingCompleteCallback: (project)->
-        # Wait for the project mapping to complete - ensuring unit details are loaded
-        $scope.unit = project.unit
-
-    }).subscribe(
-      {
-        next: (project) ->
-          # Broadcast change in project
-          $scope.project = project
-          $scope.unit = project.unit if project.unit.taskDefinitions.length > 0 && project.tasks.length == project.unit.taskDefinitions.length
-
-          GlobalStateService.setView('PROJECT', $scope.project)
-
-          # Go home if no project was found
-          return $state.go('home') unless project?
-
-        error: (failure) ->
-          $state.go('home')
-      }
-    )
-)
diff --git a/src/app/projects/states/jplag/jplag-report-viewer.component.html b/src/app/projects/states/jplag/jplag-report-viewer.component.html
new file mode 100644
index 0000000000..1b5e99f233
--- /dev/null
+++ b/src/app/projects/states/jplag/jplag-report-viewer.component.html
@@ -0,0 +1,9 @@
+<iframe
+  #jplagIframe
+  class="h-screen w-full overflow-hidden"
+  frameborder="0"
+  src="/JPlag/"
+  style="overflow: hidden"
+  [hidden]="hidden"
+  [scrolling]="false"
+></iframe>
diff --git a/src/app/projects/states/jplag/jplag-report-viewer.component.ts b/src/app/projects/states/jplag/jplag-report-viewer.component.ts
new file mode 100644
index 0000000000..043f456ac7
--- /dev/null
+++ b/src/app/projects/states/jplag/jplag-report-viewer.component.ts
@@ -0,0 +1,80 @@
+import {ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-jplag-report-viewer',
+  templateUrl: './jplag-report-viewer.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class JplagReportViewerComponent {
+  @ViewChild('jplagIframe', {static: true}) jplagIframe!: ElementRef<HTMLIFrameElement>;
+
+  @Input() hidden: boolean = false;
+
+  constructor(private alertService: AlertService) {}
+
+  public uploadReport(file: Blob) {
+    const blobUrl = URL.createObjectURL(file);
+    this.jplagIframe.nativeElement.src = `/JPlag/?file=${encodeURIComponent(blobUrl)}`;
+  }
+
+  public openComparison(firstSubmissionId: string, secondSubmissionId: string) {
+    const iframe = this.jplagIframe.nativeElement;
+
+    const findLink = (doc: Document) =>
+      (doc.querySelector(
+        `a[href="/JPlag/comparison/${firstSubmissionId}/${secondSubmissionId}"]`,
+      ) ||
+        doc.querySelector(
+          `a[href="/JPlag/comparison/${secondSubmissionId}/${firstSubmissionId}"]`,
+        )) as HTMLElement | null;
+
+    // If the Vue component isn't rendered yet, try to scroll down the window until we find it
+    const getScroller = (doc: Document) => {
+      const wrapper = doc.querySelector(
+        '.vue-recycle-scroller__item-wrapper',
+      ) as HTMLElement | null;
+      if (!wrapper) {
+        return null;
+      }
+
+      let cur = wrapper.parentElement as HTMLElement | null;
+      while (cur) {
+        const overflowY = getComputedStyle(cur).overflowY;
+        if (
+          (overflowY === 'auto' || overflowY === 'scroll') &&
+          cur.scrollHeight > cur.clientHeight
+        ) {
+          return cur;
+        }
+        cur = cur.parentElement;
+      }
+
+      return doc.scrollingElement as HTMLElement | null;
+    };
+
+    let elapsed = 0;
+    const interval = setInterval(() => {
+      const doc = iframe.contentDocument;
+      if (!doc) {
+        return;
+      }
+
+      const el = findLink(doc);
+      if (el) {
+        el.click();
+        clearInterval(interval);
+        return;
+      }
+
+      getScroller(doc)?.scrollBy(0, 600);
+
+      elapsed += 50;
+      if (elapsed >= 10000) {
+        clearInterval(interval);
+        this.alertService.error('Could not open JPlag comparison.', 6000);
+      }
+    }, 50);
+  }
+}
diff --git a/src/app/projects/states/outcomes/outcomes.coffee b/src/app/projects/states/outcomes/outcomes.coffee
deleted file mode 100644
index 5c5d610928..0000000000
--- a/src/app/projects/states/outcomes/outcomes.coffee
+++ /dev/null
@@ -1,52 +0,0 @@
-angular.module('doubtfire.projects.states.outcomes', [])
-
-#
-# ILO outcomes visualisations
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'projects/outcomes', {
-    parent: 'projects/index'
-    url: '/outcomes'
-    controller: 'LearningOutcomesStateCtrl'
-    templateUrl: 'projects/states/outcomes/outcomes.tpl.html'
-    data:
-      task: "Learning Outcomes"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
-   }
-)
-
-.controller("LearningOutcomesStateCtrl", ($scope, $rootScope, $timeout, alertService, outcomeService, newUnitService, Visualisation) ->
-  $scope.poaView = {
-    activeTab: 'list'
-  }
-  $scope.targets = outcomeService.calculateTargets($scope.unit, $scope.unit, $scope.unit.taskStatusFactor)
-  $scope.currentProgress = outcomeService.calculateProgress($scope.unit, $scope.project)
-
-  $scope.refreshCharts = Visualisation.refreshAll
-
-  refreshAlignmentData = ->
-    $scope.currentProgress.length = 0
-    $scope.currentProgress = _.extend $scope.currentProgress, outcomeService.calculateProgress($scope.unit, $scope.project)
-
-  $scope.selectTab = (tab) ->
-    if tab is 'progress'
-      if !$scope.classStats?
-        newUnitService.loadLearningProgressClassStats($scope.unit).subscribe({
-          next: (response) -> $scope.classStats = response
-          error: (response) ->
-            alertService.error( response, 6000)
-            $scope.classStats = {}
-        })
-    $scope.poaView.activeTab = tab
-    eventName = if tab is 'progress' then "View Learning Progress Tab" else "Reflect on Learning Tab"
-    $scope.refreshCharts()
-
-  # Default tab
-  $scope.selectTab('progress')
-
-  $scope.$on('UpdateAlignmentChart', ->
-    refreshAlignmentData()
-    $rootScope.$broadcast('ProgressUpdated')
-  )
-)
diff --git a/src/app/projects/states/outcomes/outcomes.tpl.html b/src/app/projects/states/outcomes/outcomes.tpl.html
deleted file mode 100644
index c247911d94..0000000000
--- a/src/app/projects/states/outcomes/outcomes.tpl.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="container" ng-show="unit.ilos.length > 0">
-  <project-outcome-alignment></project-outcome-alignment>
-</div><!--/ilos-->
-<div class="container" ng-hide="unit.ilos.length > 0">
-  <div class="large-notice-block">
-    <i class="fa fa-2x fa-graduation-cap"></i>
-    <p>No Learning Outcomes</p>
-  </div>
-  <div class="text-muted text-center col-sm-12 col-md-6 col-md-offset-3">
-    There are no learning outcomes for this unit.
-  </div>
-</div><!--/no-ilos-->
-
diff --git a/src/app/projects/states/plan/project-plan.component.html b/src/app/projects/states/plan/project-plan.component.html
new file mode 100644
index 0000000000..0194e0ea6f
--- /dev/null
+++ b/src/app/projects/states/plan/project-plan.component.html
@@ -0,0 +1,53 @@
+@if (project) {
+  <f-page-container>
+    <div class="flex flex-col">
+      <h2>
+        Task Planner
+        @if (viewingOtherStudentProject) {
+          for {{ project.student.displayName }}
+        }
+      </h2>
+      <p>
+        @if (unit.allowFlexibleDates) {
+          View and adjust the due dates for your tasks. Remember to leave time to get and respond to
+          feedback.
+        } @else {
+          View the task deadlines for your project, so you can organise your work and ensure you
+          meet all submission requirements on time.
+        }
+      </p>
+      <p>
+        Click on a task in the timeline to see how it connects to other tasks. This will show you
+        which tasks must be completed before it, and which tasks depend on it being completed first.
+      </p>
+      <div class="flex w-full justify-center">
+        <mat-form-field appearance="outline" class="w-full max-w-3xl">
+          <mat-label>Target Grade</mat-label>
+          <mat-select
+            aria-label="Target grade"
+            class="w-full"
+            [disabled]="viewingOtherStudentProject"
+            [(ngModel)]="selectedTargetGrade"
+            (selectionChange)="onTargetGradeChange($event)"
+          >
+            @for (grade of gradeValues; track grade) {
+              <mat-option [value]="grade">{{ gradeString(grade) }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <p>
+        Subscribe to your unit calendar to be reminded about your due dates.
+        <button color="primary" mat-stroked-button type="button" (click)="openCalendar()">
+          Open calendar
+        </button>
+      </p>
+    </div>
+  </f-page-container>
+
+  <f-page-container [fullWidth]="true">
+    <div [style.height.px]="(planner?.items.length + 2) * 43">
+      <f-task-planner [project]="project" [targetGrade]="selectedTargetGrade"></f-task-planner>
+    </div>
+  </f-page-container>
+}
diff --git a/src/app/projects/states/plan/project-plan.component.scss b/src/app/projects/states/plan/project-plan.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/plan/project-plan.component.spec.ts b/src/app/projects/states/plan/project-plan.component.spec.ts
new file mode 100644
index 0000000000..36aa3beab7
--- /dev/null
+++ b/src/app/projects/states/plan/project-plan.component.spec.ts
@@ -0,0 +1,92 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSelectHarness} from '@angular/material/select/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {ActivatedRoute} from '@angular/router';
+import {of} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {CalendarModalService} from 'src/app/common/modals/calendar-modal/calendar-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {ProjectPlanComponent} from './project-plan.component';
+
+describe('ProjectPlanComponent', () => {
+  let component: ProjectPlanComponent;
+  let fixture: ComponentFixture<ProjectPlanComponent>;
+  let project: Project;
+
+  const buildProject = (myRole: string, studentId: number): Project =>
+    ({
+      id: 18,
+      targetGrade: 0,
+      student: {id: studentId},
+      unit: {
+        myRole,
+        allowFlexibleDates: false,
+        gradeDefinitions: [
+          {value: 0, label: 'Pass', abbreviation: 'P'},
+          {value: 1, label: 'Credit', abbreviation: 'C'},
+        ],
+      },
+    }) as unknown as Project;
+
+  const createComponent = async (currentProject: Project) => {
+    project = currentProject;
+
+    await TestBed.configureTestingModule({
+      declarations: [ProjectPlanComponent],
+      imports: [FormsModule, MatFormFieldModule, MatSelectModule, NoopAnimationsModule],
+      providers: [
+        {
+          provide: GradeService,
+          useValue: {
+            gradeValuesFor: () => [0, 1],
+            gradeLabel: (grade: number) => (grade === 0 ? 'Pass' : 'Credit'),
+          },
+        },
+        {provide: ProjectService, useValue: {update: vi.fn()}},
+        {provide: AlertService, useValue: {success: vi.fn(), error: vi.fn()}},
+        {provide: CalendarModalService, useValue: {show: vi.fn()}},
+        {provide: UserService, useValue: {currentUser: {id: 25}}},
+        {provide: ActivatedRoute, useValue: {parent: null}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectPlanComponent);
+    component = fixture.componentInstance;
+    component.project$ = of(project);
+    fixture.detectChanges();
+    await fixture.whenStable();
+  };
+
+  const targetGradeSelect = () =>
+    TestbedHarnessEnvironment.loader(fixture).getHarness(
+      MatSelectHarness.with({selector: '[aria-label="Target grade"]'}),
+    );
+
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('lets a student change their own target grade', async () => {
+    await createComponent(buildProject('Student', 25));
+
+    expect(component.viewingOtherStudentProject).toBe(false);
+    expect(await (await targetGradeSelect()).isDisabled()).toBe(false);
+  });
+
+  it('locks the selector when staff are viewing another student project', async () => {
+    await createComponent(buildProject('Tutor', 99));
+
+    expect(component.viewingOtherStudentProject).toBe(true);
+    expect(await (await targetGradeSelect()).isDisabled()).toBe(true);
+  });
+});
diff --git a/src/app/projects/states/plan/project-plan.component.ts b/src/app/projects/states/plan/project-plan.component.ts
new file mode 100644
index 0000000000..fc4965c8cc
--- /dev/null
+++ b/src/app/projects/states/plan/project-plan.component.ts
@@ -0,0 +1,107 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {MatSelectChange} from '@angular/material/select';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, Subscription, of} from 'rxjs';
+import {Project, ProjectService, UserService} from 'src/app/api/models/doubtfire-model';
+import {CalendarModalService} from 'src/app/common/modals/calendar-modal/calendar-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {TaskPlannerComponent} from './task-planner/task-planner.component';
+
+@Component({
+  selector: 'f-project-plan',
+  templateUrl: 'project-plan.component.html',
+  styleUrls: ['project-plan.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectPlanComponent implements OnInit, OnDestroy {
+  @Input() public project$: Observable<Project>;
+
+  public project: Project;
+
+  @ViewChild(TaskPlannerComponent) planner!: TaskPlannerComponent;
+
+  public get unit() {
+    return this.project?.unit;
+  }
+
+  public get gradeValues() {
+    return this.gradeService.gradeValuesFor(this.unit);
+  }
+
+  public get gradeAcronyms() {
+    return Object.fromEntries(
+      this.unit.gradeDefinitions.map((definition) => [definition.value, definition.abbreviation]),
+    );
+  }
+
+  public gradeString(grade: number) {
+    return this.gradeService.gradeLabel(grade, this.unit);
+  }
+
+  public selectedTargetGrade: number;
+
+  private projectSub?: Subscription;
+
+  constructor(
+    private gradeService: GradeService,
+    private projectService: ProjectService,
+    private alertService: AlertService,
+    private route: ActivatedRoute,
+    private calendarModal: CalendarModalService,
+    private userService: UserService,
+  ) {}
+
+  ngOnInit(): void {
+    this.project$ = this.project$ ?? of(this.route.parent?.snapshot.data.project as Project);
+
+    this.projectSub = this.project$?.subscribe((project) => {
+      if (!project) {
+        return;
+      }
+
+      this.project = project;
+      this.selectedTargetGrade = project.targetGrade;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.projectSub?.unsubscribe();
+  }
+
+  openCalendar(): void {
+    this.calendarModal.show(null);
+  }
+
+  public get viewingOtherStudentProject(): boolean {
+    const role = this.project?.unit?.myRole;
+    const currentUser = this.userService.currentUser;
+
+    return !!role && role !== 'Student' && this.project?.student?.id !== currentUser?.id;
+  }
+
+  onTargetGradeChange(event: MatSelectChange) {
+    const previousTargetGrade = this.project.targetGrade;
+    this.project.targetGrade = event.value;
+
+    this.projectService.update(this.project).subscribe({
+      next: () => {
+        this.alertService.success(`Succesfully updated target grade`, 2000);
+        this.planner.refreshItems(false);
+      },
+      error: (error) => {
+        this.project.targetGrade = previousTargetGrade;
+        this.selectedTargetGrade = previousTargetGrade;
+        this.alertService.error(`Failed to update target grade: ${error}`, 6000);
+      },
+    });
+  }
+}
diff --git a/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.html b/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.html
new file mode 100644
index 0000000000..8bc5faa0fc
--- /dev/null
+++ b/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.html
@@ -0,0 +1,79 @@
+<mat-card appearance="outlined">
+  <mat-card-header class="flex w-full items-center justify-between">
+    <mat-card-title class="w-full">
+      {{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
+    </mat-card-title>
+    <status-icon [status]="taskDefinition.projectTask(project).status"></status-icon>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-card-subtitle class="py-3"
+      >Task Description:
+      <p>{{ taskDefinition.description }}</p></mat-card-subtitle
+    >
+    <f-task-prerequisites-card
+      [task]="task"
+      [taskDefinition]="taskDefinition"
+    ></f-task-prerequisites-card>
+    @if (!task.hasPrerequisiteTasks()) {
+      <div class="w-full p-3 text-center text-gray-400">This task has no prerequisites.</div>
+    }
+    <mat-divider class="my-3"></mat-divider>
+    @if (dependents.length) {
+      <mat-card appearance="outlined" class="mt-3">
+        <mat-card-header>
+          <mat-card-title>Required by</mat-card-title>
+        </mat-card-header>
+
+        <mat-card-content>
+          <mat-card-subtitle class="mb-2.5">
+            <strong>{{ taskDefinition.abbreviation }} {{ taskDefinition.name }}</strong> is a
+            prerequisite for the following tasks. In some cases,
+            <strong>{{ taskDefinition.abbreviation }} {{ taskDefinition.name }}</strong> needs to
+            reach the <strong>Discuss</strong> or <strong>Complete</strong> status, which requires
+            tutor feedback. Plan ahead to avoid being locked out of submission.
+          </mat-card-subtitle>
+          <table mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="task-definition">
+              <th *matHeaderCellDef mat-header-cell>Task</th>
+              <td *matCellDef="let link" mat-cell>
+                {{ link.taskDefinition?.abbreviation }} {{ link.taskDefinition?.name }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="current-status">
+              <th *matHeaderCellDef mat-header-cell>Submission Open</th>
+              <td *matCellDef="let link" mat-cell>
+                @if (link.taskDefinition.projectTask(project).blockedByPrerequisiteTasks()) {
+                  <mat-icon>block_outlined</mat-icon>
+                } @else {
+                  <mat-icon>check_circle</mat-icon>
+                }
+                <!-- <status-icon
+                matBadgePosition="before"
+                [status]="link.taskDefinition?.projectTask(task?.project)?.status ?? 'not_started'"
+              ></status-icon> -->
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="required-status">
+              <th *matHeaderCellDef class="whitespace-nowrap" mat-header-cell>Required Status</th>
+              <td *matCellDef="let link" mat-cell>
+                <status-icon
+                  matBadgePosition="before"
+                  matTooltip=""
+                  [status]="link.taskStatus ?? 'complete'"
+                ></status-icon>
+              </td>
+            </ng-container>
+            <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+            <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+          </table>
+        </mat-card-content>
+      </mat-card>
+    } @else {
+      <div class="w-full p-3 text-center text-gray-400">
+        This task is not a prerequisite for any other tasks.
+      </div>
+    }
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.scss b/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.ts b/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.ts
new file mode 100644
index 0000000000..7af70513b0
--- /dev/null
+++ b/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.component.ts
@@ -0,0 +1,41 @@
+import {ChangeDetectionStrategy, Component, Inject, Input, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatTableDataSource} from '@angular/material/table';
+import {Project} from 'src/app/api/models/project';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {TaskPrerequisite} from 'src/app/api/models/task-prerequisite';
+
+export interface TaskPlannerPrerequisitesModalData {
+  taskDefinition: TaskDefinition;
+  project: Project;
+  dependents: TaskPrerequisite[];
+}
+
+@Component({
+  selector: 'f-task-planner-prerequisites-modal',
+  templateUrl: './task-planner-prerequisites-modal.component.html',
+  styleUrl: './task-planner-prerequisites-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskPlannerPrerequisitesModalComponent implements OnInit {
+  @Input() taskDefinition: TaskDefinition;
+  @Input() project: Project;
+  @Input() dependents: TaskPrerequisite[];
+
+  public dataSource: MatTableDataSource<TaskPrerequisite> = new MatTableDataSource();
+  public displayedColumns: string[] = ['task-definition', 'current-status', 'required-status'];
+
+  public get task() {
+    return this.project?.findTaskForDefinition(this.taskDefinition?.id);
+  }
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: TaskPlannerPrerequisitesModalData) {}
+
+  ngOnInit(): void {
+    this.taskDefinition = this.data.taskDefinition;
+    this.project = this.data.project;
+    this.dependents = this.data.dependents;
+    this.dataSource.data = this.dependents;
+  }
+}
diff --git a/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.service.ts b/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.service.ts
new file mode 100644
index 0000000000..eb243b1d3d
--- /dev/null
+++ b/src/app/projects/states/plan/task-planner/task-planner-prerequisites-modal/task-planner-prerequisites-modal.service.ts
@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Project, TaskDefinition} from 'src/app/api/models/doubtfire-model';
+import {TaskPrerequisite} from 'src/app/api/models/task-prerequisite';
+import {
+  TaskPlannerPrerequisitesModalComponent,
+  TaskPlannerPrerequisitesModalData,
+} from './task-planner-prerequisites-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TaskPlannerPrerequisitesModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(project: Project, taskDefinition: TaskDefinition, dependents: TaskPrerequisite[]) {
+    this.dialog.open<TaskPlannerPrerequisitesModalComponent, TaskPlannerPrerequisitesModalData>(
+      TaskPlannerPrerequisitesModalComponent,
+      {
+        data: {taskDefinition, project, dependents},
+        width: '100%',
+        maxWidth: '900px',
+        panelClass: 'overflow-y-auto',
+      },
+    );
+  }
+}
diff --git a/src/app/projects/states/plan/task-planner/task-planner.component.html b/src/app/projects/states/plan/task-planner/task-planner.component.html
new file mode 100644
index 0000000000..0c65128129
--- /dev/null
+++ b/src/app/projects/states/plan/task-planner/task-planner.component.html
@@ -0,0 +1,142 @@
+<div class="flex items-center justify-between p-3">
+  <div class="flex items-center gap-2">
+    <mat-slide-toggle [(ngModel)]="showDatesColumn">Show Task Dates</mat-slide-toggle>
+    <mat-slide-toggle
+      [ngModel]="showTasksAboveTargetGrade"
+      (ngModelChange)="setShowTasksAboveTargetGrade($event)"
+    >
+      Show tasks beyond target grade
+    </mat-slide-toggle>
+  </div>
+  @if (unit.allowFlexibleDates) {
+    <div class="flex items-center gap-2">
+      <button color="primary" mat-button (click)="saveImage()">
+        <mat-icon>save_alt</mat-icon> Download Chart
+      </button>
+      <button
+        color="primary"
+        mat-raised-button
+        [disabled]="!anyUnsavedChanges()"
+        (click)="confirmSaveTargetDates()"
+      >
+        Save Dates
+      </button>
+      <button mat-raised-button (click)="confirmResetTargetDates()">Reset To Unit Default</button>
+    </div>
+  }
+</div>
+<ngx-gantt
+  #gantt
+  class="h-full overflow-hidden"
+  [async]="false"
+  [baselineItems]="unit.allowFlexibleDates ? baselineItems : []"
+  [class.flexible-dates]="overlayLines"
+  [disabledLoadOnScroll]="true"
+  [draggable]="project.unit.allowFlexibleDates"
+  [end]="latestEndDate"
+  [items]="items"
+  [start]="earliestStartDate"
+  [viewOptions]="viewOptions"
+  [viewType]="viewType"
+  [virtualScrollEnabled]="false"
+>
+  <ngx-gantt-table>
+    <ngx-gantt-column name="Tasks" width="350px">
+      <ng-template #cell let-item="item">
+        <!-- TODO: redirect to new project dashboard -->
+        <div
+          class="flex items-center justify-between"
+          [routerLink]="['/projects', project.id, 'dashboard', item.taskDefinition.abbreviation]"
+        >
+          <div class="flex w-full min-w-0 items-center gap-3">
+            <f-grade-icon
+              [colorful]="true"
+              [grade]="item.taskDefinition.targetGrade"
+              [unit]="unit"
+            ></f-grade-icon>
+            <div class="w-full min-w-0 flex-1 truncate">
+              {{ item.title }}
+            </div>
+          </div>
+          <status-icon [status]="item.task.status"></status-icon>
+        </div>
+      </ng-template>
+    </ngx-gantt-column>
+
+    @if (showDatesColumn) {
+      <ngx-gantt-column name="Start Date" width="110px">
+        <ng-template #cell class="text-center" let-item="item">
+          {{ toDateString(item.start) }}
+        </ng-template>
+      </ngx-gantt-column>
+
+      <ngx-gantt-column name="Target Date" width="110px">
+        <ng-template #cell class="text-center" let-item="item">
+          {{ toDateString(item.end) }}
+        </ng-template>
+      </ngx-gantt-column>
+
+      <ngx-gantt-column name="Deadline" width="110px">
+        <ng-template #cell class="text-center" let-item="item">
+          {{ item.task.localDeadlineDate() ? toDateString(item.task.localDeadlineDate()) : 'N/A' }}
+        </ng-template>
+      </ngx-gantt-column>
+    }
+
+    <ng-template #bar let-item="item">
+      <span
+        class="gantt-bar flex h-[35px] w-full items-center justify-between gap-1 p-1 text-white"
+        matTooltipPosition="above"
+        matTooltipShowDelay="500"
+        role="button"
+        tabindex="0"
+        [attr.data-gantt-id]="item.id"
+        [matTooltip]="getTooltip(item)"
+        [ngClass]="getItemClasses(item)"
+        (blur)="onBarLeave(item)"
+        (click)="barClick(item)"
+        (focus)="onBarHover(item)"
+        (keydown.enter)="onBarKeydown($event, item)"
+        (keydown.space)="onBarKeydown($event, item)"
+        (mouseleave)="onBarLeave(item)"
+        (mouseover)="onBarHover(item)"
+        ><div class="flex items-center gap-1">
+          <div class="flex items-center gap-1">
+            @if (unsavedChanges(item)) {
+              <mat-icon class="scale-95">change_circle</mat-icon>
+            }
+            @if (prerequisiteConflict(item)) {
+              <mat-icon
+                class="scale-90"
+                matTooltip="This task must be completed earlier because other tasks depend on it"
+                >warning</mat-icon
+              >
+            } @else if (isBlockedByPrerequisite(item)) {
+              <mat-icon
+                class="scale-90"
+                matTooltip="You will not be able to complete this task until all prerequisites are met"
+                >warning</mat-icon
+              >
+            }
+            @if (isPastFeedbackDeadline(item)) {
+              <mat-icon
+                class="scale-90"
+                matTooltip="Your planned target date is past the feedback deadline."
+                >dangerous</mat-icon
+              >
+            }
+            @if (isCloseToFeedbackDeadline(item)) {
+              <mat-icon
+                class="scale-90"
+                matTooltip="Your planned target date is close to the last date to receive feedback for this task."
+                >query_builder</mat-icon
+              >
+            }
+          </div>
+
+          &nbsp;&nbsp;{{ item.title }}
+        </div>
+      </span>
+    </ng-template>
+  </ngx-gantt-table>
+</ngx-gantt>
diff --git a/src/app/projects/states/plan/task-planner/task-planner.component.scss b/src/app/projects/states/plan/task-planner/task-planner.component.scss
new file mode 100644
index 0000000000..a3848ec38f
--- /dev/null
+++ b/src/app/projects/states/plan/task-planner/task-planner.component.scss
@@ -0,0 +1,49 @@
+:host ::ng-deep .flexible-dates .gantt-links-overlay svg {
+  z-index: 999 !important;
+  pointer-events: none;
+}
+
+:host ::ng-deep .flexible-dates .gantt-links-overlay-main {
+  height: 1px;
+  overflow: visible !important;
+  pointer-events: none;
+}
+
+:host ::ng-deep gantt-calendar-header .secondary-text {
+  font-size: 11px;
+  line-height: 1.15;
+  transform: translateY(-0.45em);
+  white-space: pre-line;
+}
+
+:host ::ng-deep gantt-calendar-header .today-rect {
+  display: flex;
+  height: 28px !important;
+  transform: translateY(-0.35rem);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  line-height: 1;
+}
+
+:host ::ng-deep gantt-calendar-header .today-weekday {
+  font-size: 9px;
+  font-weight: 500;
+}
+
+.gantt-bar {
+  background-color: var(--bar-bg);
+}
+
+// The bar is reachable by tab, so its focus has to be visible. currentColor is already
+// chosen per bar to contrast with that bar's background, so it works on every colour the
+// planner uses.
+.gantt-bar:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -3px;
+}
+
+.flash {
+  transition: background-color 500ms ease-in-out;
+}
diff --git a/src/app/projects/states/plan/task-planner/task-planner.component.spec.ts b/src/app/projects/states/plan/task-planner/task-planner.component.spec.ts
new file mode 100644
index 0000000000..46176bd7e0
--- /dev/null
+++ b/src/app/projects/states/plan/task-planner/task-planner.component.spec.ts
@@ -0,0 +1,326 @@
+import {GanttPrintService} from '@worktile/gantt';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {CommonModule} from '@angular/common';
+import {EmbeddedViewRef, NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute, Router} from '@angular/router';
+import {EMPTY} from 'rxjs';
+import {Project, TaskDefinition} from 'src/app/api/models/doubtfire-model';
+import {TaskPrerequisiteService} from 'src/app/api/services/task-prerequisite.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {TaskPlannerPrerequisitesModalService} from './task-planner-prerequisites-modal/task-planner-prerequisites-modal.service';
+import {TaskPlannerComponent} from './task-planner.component';
+
+const taskDefinition = (id: number, targetGrade: number): TaskDefinition =>
+  ({
+    id,
+    targetGrade,
+    startDate: new Date(2026, 0, id),
+  }) as TaskDefinition;
+
+describe('TaskPlannerComponent target-grade filtering', () => {
+  it('shows tasks beyond the target grade only when the student opts in', () => {
+    const passTask = taskDefinition(1, 0);
+    const creditTask = taskDefinition(2, 1);
+    const component = Object.create(TaskPlannerComponent.prototype) as TaskPlannerComponent;
+    component.project = {
+      unit: {taskDefinitions: [passTask, creditTask]},
+      findTaskForDefinition: () => null,
+    } as unknown as Project;
+    component.targetGrade = 0;
+    component.showTasksAboveTargetGrade = false;
+
+    expect(component.taskDefs()).toEqual([passTask]);
+
+    component.showTasksAboveTargetGrade = true;
+
+    expect(component.taskDefs()).toEqual([passTask, creditTask]);
+  });
+
+  it('reveals an above-target task requested by a direct planner link', () => {
+    const passTask = taskDefinition(1, 0);
+    const creditTask = taskDefinition(2, 1);
+    const component = Object.create(TaskPlannerComponent.prototype) as TaskPlannerComponent;
+    component.project = {
+      id: 15,
+      unit: {taskDefinitions: [passTask, creditTask]},
+      findTaskForDefinition: () => null,
+    } as unknown as Project;
+    component.targetGrade = 0;
+    component.showTasksAboveTargetGrade = false;
+
+    const plannerInternals = component as unknown as {
+      revealRequestedTaskDefinition(taskDefinitionId: string | null): void;
+    };
+    plannerInternals.revealRequestedTaskDefinition('2');
+
+    expect(component.showTasksAboveTargetGrade).toBe(true);
+    expect(component.taskDefs()).toEqual([passTask, creditTask]);
+  });
+});
+
+const emptyProvider = {};
+
+/** Records what barClick asks the modal to open, so the keyboard path can be checked. */
+class RecordingPrerequisitesModal {
+  public shown: unknown[][] = [];
+
+  public show(...args: unknown[]) {
+    this.shown.push(args);
+  }
+}
+
+/**
+ * Two tasks where the second depends on the first, which is the shape the planner
+ * highlights when a bar is hovered or focused.
+ */
+function twoLinkedItems() {
+  return [
+    {
+      id: 'a',
+      links: [{link: 'b', color: {active: 'rgba(0,0,0,1)', default: 'rgba(0,0,0,1)'}}],
+    },
+    {
+      id: 'b',
+      links: [],
+    },
+  ];
+}
+
+describe('TaskPlannerComponent', () => {
+  let component: TaskPlannerComponent;
+  let fixture: ComponentFixture<TaskPlannerComponent>;
+  let prerequisitesModal: RecordingPrerequisitesModal;
+
+  beforeEach(async () => {
+    prerequisitesModal = new RecordingPrerequisitesModal();
+
+    await TestBed.configureTestingModule({
+      declarations: [TaskPlannerComponent],
+      providers: [
+        {provide: GradeService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+        {provide: TaskPlannerPrerequisitesModalService, useValue: prerequisitesModal},
+        {provide: TaskPrerequisiteService, useValue: emptyProvider},
+        {provide: Router, useValue: emptyProvider},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+        {provide: GanttPrintService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(TaskPlannerComponent, {set: {template: '', providers: []}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TaskPlannerComponent);
+    component = fixture.componentInstance;
+    component.items = twoLinkedItems() as never;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('prerequisite highlighting', () => {
+    it('lights up the dependency links when the pointer is over a bar', () => {
+      component.onBarLeave(component.items[0]);
+      component.onBarHover(component.items[0]);
+
+      expect(component.overlayLines).toBe(true);
+      expect(component.items[0].links[0]).toMatchObject({color: {default: 'rgba(0,0,0,1)'}});
+    });
+
+    it('lights up the same links when a bar takes keyboard focus', () => {
+      component.onBarLeave(component.items[0]);
+      const dimmed = structuredClone(component.items[0].links[0]);
+
+      // The template binds (focus) to onBarHover, the same handler as (mouseover).
+      component.onBarHover(component.items[0]);
+
+      expect(component.overlayLines).toBe(true);
+      expect(component.items[0].links[0]).not.toMatchObject(dimmed as object);
+    });
+
+    it('does not apply the highlight twice when hover and focus both fire', () => {
+      component.onBarHover(component.items[0]);
+      const afterFirst = structuredClone(component.items[0].links[0]);
+
+      component.onBarHover(component.items[0]);
+
+      expect(component.items[0].links[0]).toMatchObject(afterFirst as object);
+    });
+
+    it('does not dim twice when blur and mouseleave both fire', () => {
+      component.onBarLeave(component.items[0]);
+      const afterFirst = structuredClone(component.items[0].links[0]);
+
+      component.onBarLeave(component.items[0]);
+
+      expect(component.items[0].links[0]).toMatchObject(afterFirst as object);
+      expect(component.overlayLines).toBe(false);
+    });
+  });
+
+  describe('keyboard activation', () => {
+    beforeEach(() => {
+      component.taskPrerequisites = [];
+      component.items[0].taskDefinition = {id: 1} as never;
+    });
+
+    it('opens the prerequisites modal from a key press, the way a click does', () => {
+      const event = new KeyboardEvent('keydown', {key: 'Enter'});
+
+      component.onBarKeydown(event, component.items[0]);
+
+      expect(prerequisitesModal.shown.length).toBe(1);
+      expect(prerequisitesModal.shown[0][1]).toBe(component.items[0].taskDefinition);
+    });
+
+    it('swallows the key press so space does not scroll the planner', () => {
+      const event = new KeyboardEvent('keydown', {cancelable: true, key: ' '});
+
+      component.onBarKeydown(event, component.items[0]);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+  });
+});
+
+function plannerItem(id: string) {
+  const day = 24 * 60 * 60;
+  const start = Math.floor(Date.UTC(2026, 0, 5) / 1000);
+
+  return {
+    id,
+    title: `Task ${id}`,
+    start,
+    end: start + day,
+    links: [] as {link: string; color: {active: string; default: string}}[],
+    taskDefinition: {id: 1, targetGrade: 0},
+    task: {
+      status: 'not_started',
+      startDate: new Date(start * 1000),
+      localDueDate: () => new Date((start + day) * 1000),
+      localDeadlineDate: () => new Date((start + 30 * day) * 1000),
+    },
+  };
+}
+
+/**
+ * Renders the real #bar template out of the real component template, rather than a copy of
+ * the markup pasted into the spec. ngx-gantt normally stamps that template, but it sizes the
+ * chart from real layout and so draws no bars under jsdom, which is why the template is
+ * stamped directly here. Deleting role, tabindex or either keydown binding from
+ * task-planner.component.html fails these tests.
+ */
+describe('TaskPlannerComponent gantt bar keyboard access', () => {
+  let fixture: ComponentFixture<TaskPlannerComponent>;
+  let component: TaskPlannerComponent;
+  let prerequisitesModal: RecordingPrerequisitesModal;
+  let view: EmbeddedViewRef<{item: unknown}>;
+  let bar: HTMLElement;
+
+  function stampBar(item: unknown) {
+    view = component.barTemplate.createEmbeddedView({item} as never);
+    view.detectChanges();
+
+    const rendered = view.rootNodes.find(
+      (node: Node): node is HTMLElement =>
+        node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).matches('span.gantt-bar'),
+    );
+
+    if (!rendered) {
+      throw new Error('the gantt bar did not render from the #bar template');
+    }
+
+    // Events only reach Angular's listeners once the node is in a document.
+    document.body.appendChild(rendered);
+    return rendered;
+  }
+
+  beforeEach(async () => {
+    prerequisitesModal = new RecordingPrerequisitesModal();
+
+    await TestBed.configureTestingModule({
+      declarations: [TaskPlannerComponent],
+      imports: [CommonModule],
+      providers: [
+        {provide: GradeService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+        {provide: TaskPlannerPrerequisitesModalService, useValue: prerequisitesModal},
+        {provide: TaskPrerequisiteService, useValue: emptyProvider},
+        {provide: Router, useValue: emptyProvider},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+        {provide: GanttPrintService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TaskPlannerComponent);
+    component = fixture.componentInstance;
+    component.project = {
+      id: 1,
+      unit: {
+        allowFlexibleDates: false,
+        taskDefinitions: [],
+        gradeDefinitions: [],
+        getTaskPrerequisites: () => EMPTY,
+      },
+      findTaskForDefinition: () => null,
+    } as never;
+    component.targetGrade = 0;
+    component.taskPrerequisites = [];
+    component.items = [plannerItem('a')] as never;
+
+    fixture.detectChanges();
+    bar = stampBar(component.items[0]);
+  });
+
+  afterEach(() => {
+    bar?.remove();
+    view?.destroy();
+  });
+
+  it('gives the bar a role and a tab stop, so a keyboard can reach it', () => {
+    expect(bar.getAttribute('role')).toBe('button');
+    expect(bar.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('opens the prerequisites modal when Enter is pressed on the bar', () => {
+    bar.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, key: 'Enter'}));
+
+    expect(prerequisitesModal.shown.length).toBe(1);
+    expect(prerequisitesModal.shown[0][1]).toBe(component.items[0].taskDefinition);
+  });
+
+  it('opens the prerequisites modal on Space, and swallows the page scroll', () => {
+    const event = new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key: ' '});
+
+    bar.dispatchEvent(event);
+
+    expect(prerequisitesModal.shown.length).toBe(1);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('lights the dependency links on focus, the way it does on hover', () => {
+    const linked = plannerItem('a');
+    linked.links = [{link: 'b', color: {active: 'rgba(0,0,0,1)', default: 'rgba(0,0,0,1)'}}];
+    component.items = [linked, plannerItem('b')] as never;
+
+    bar.remove();
+    view.destroy();
+    bar = stampBar(component.items[0]);
+
+    component.onBarLeave(component.items[0]);
+    expect(component.overlayLines).toBe(false);
+
+    bar.dispatchEvent(new FocusEvent('focus'));
+
+    expect(component.overlayLines).toBe(true);
+  });
+});
diff --git a/src/app/projects/states/plan/task-planner/task-planner.component.ts b/src/app/projects/states/plan/task-planner/task-planner.component.ts
new file mode 100644
index 0000000000..8f4c0cf192
--- /dev/null
+++ b/src/app/projects/states/plan/task-planner/task-planner.component.ts
@@ -0,0 +1,872 @@
+import {
+  GanttBaselineItem,
+  GanttDate,
+  GanttItem,
+  GanttLink,
+  GanttLinkType,
+  GanttPrintService,
+  GanttViewOptions,
+  GanttViewType,
+  NgxGanttComponent,
+} from '@worktile/gantt';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {TaskPrerequisite} from 'src/app/api/models/task-prerequisite';
+import {TaskPrerequisiteService} from 'src/app/api/services/task-prerequisite.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {TaskPlannerPrerequisitesModalService} from './task-planner-prerequisites-modal/task-planner-prerequisites-modal.service';
+
+interface TaskGanttItem extends GanttItem {
+  start: number;
+  end: number;
+  highlighted?: boolean;
+  taskDefinition: TaskDefinition;
+  task: Task;
+  originalLinks: GanttLink[];
+}
+
+@Component({
+  selector: 'f-task-planner',
+  templateUrl: './task-planner.component.html',
+  styleUrl: './task-planner.component.scss',
+  providers: [GanttPrintService],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskPlannerComponent implements OnInit, AfterViewInit, OnDestroy {
+  // Show a warning if the task's target end date is within this many days of the feedback deadline
+  public readonly CLOSE_TO_FEEDBACK_DEADLINE_THRESHOLD = 7;
+  private readonly svgNamespace = 'http://www.w3.org/2000/svg';
+  private ganttHeaderObserver?: MutationObserver;
+
+  @Input() project: Project;
+  @Input() targetGrade: number;
+
+  @ViewChild('gantt') ganttComponent: NgxGanttComponent;
+
+  /**
+   * The markup for a single gantt bar. ngx-gantt stamps this out itself once it has
+   * measured the chart, so holding the reference here is what lets the bar be rendered
+   * and driven on its own, away from that measurement.
+   */
+  @ViewChild('bar') barTemplate: TemplateRef<{item: TaskGanttItem}>;
+
+  public viewType: GanttViewType = GanttViewType.day;
+  public viewOptions: GanttViewOptions;
+
+  public allTaskPrerequisites: TaskPrerequisite[];
+  public taskPrerequisites: TaskPrerequisite[];
+
+  public items: TaskGanttItem[] = [];
+
+  // TaskDefinition default dates for reference
+  public baselineItems: GanttBaselineItem[] = [];
+
+  public animateBackground: boolean = false;
+  public showDatesColumn: boolean = false;
+  public showTasksAboveTargetGrade: boolean = false;
+  public overlayLines: boolean = false;
+
+  public get unit() {
+    return this.project?.unit;
+  }
+
+  private get showTasksAboveTargetGradeStorageKey(): string {
+    return `ontrack.taskPlanner.${this.project?.id ?? 'unknown'}.showTasksAboveTargetGrade`;
+  }
+
+  constructor(
+    private elementRef: ElementRef<HTMLElement>,
+    private gradeService: GradeService,
+    private alertService: AlertService,
+    private confirmationModalService: ConfirmationModalService,
+    private taskPlannerPrerequisitesModal: TaskPlannerPrerequisitesModalService,
+    private taskPrerequisiteService: TaskPrerequisiteService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private ganttPrintService: GanttPrintService,
+  ) {}
+
+  ngAfterViewInit(): void {
+    setTimeout(() => this.setupGanttHeaderObserver());
+  }
+
+  ngOnDestroy(): void {
+    this.ganttHeaderObserver?.disconnect();
+  }
+
+  public get gradeValues() {
+    return this.gradeService.gradeValuesFor(this.unit);
+  }
+
+  public get gradeAcronyms() {
+    return Object.fromEntries(
+      this.unit.gradeDefinitions.map((definition) => [definition.value, definition.abbreviation]),
+    );
+  }
+
+  public gradeString(grade: number) {
+    return this.gradeService.gradeLabel(grade, this.unit);
+  }
+
+  onBarHover(item: TaskGanttItem) {
+    this.setLinkColors(item, true);
+  }
+
+  onBarLeave(item: TaskGanttItem) {
+    this.setLinkColors(item, false);
+  }
+
+  setLinkColors(item: TaskGanttItem, active: boolean) {
+    this.overlayLines = active;
+
+    const ganttItem = this.items.find((i) => i.id === item.id);
+    ganttItem.links.forEach((linkItem) => {
+      const link = linkItem as GanttLink;
+      this.toggleLinkOpacity(link, active);
+    });
+
+    const prerequisites = this.items.filter((i) => {
+      const links = i.links;
+      if (typeof links === 'string') {
+        return false;
+      }
+
+      return links.some((l) => typeof l !== 'string' && l.link === item.id);
+    });
+
+    prerequisites.forEach((prereq) => {
+      prereq.links.forEach((linkItem) => {
+        const link = linkItem as GanttLink;
+        if (link.link == item.id) {
+          this.toggleLinkOpacity(link, active);
+        }
+      });
+    });
+
+    this.items = [...this.items];
+  }
+
+  private toggleLinkOpacity(link: GanttLink, active: boolean) {
+    const color = link.color as {active: string; default: string};
+
+    if (!active && !color.default.endsWith('0.1)')) {
+      // Dim link by lowering alpha
+      color.default = color.default.slice(0, -2) + '0.1)';
+    } else if (active && color.default.endsWith('0.1)')) {
+      // Restore full opacity
+      color.default = color.default.slice(0, -4) + '1)';
+    }
+  }
+
+  /**
+   * Open the prerequisites modal from the keyboard. The bar carries role="button" and
+   * tabindex="0" so it can be reached by tab, and a span gets no activation behaviour of
+   * its own, so Enter and Space have to be wired up by hand. Space is prevented from
+   * scrolling the planner underneath. The key is already matched by the (keydown.enter)
+   * and (keydown.space) bindings, which is why this takes a plain Event.
+   */
+  onBarKeydown(event: Event, item: TaskGanttItem) {
+    event.preventDefault();
+    this.barClick(item);
+  }
+
+  barClick(item: TaskGanttItem) {
+    const td = item.taskDefinition;
+    const prereqs = this.taskPrerequisites.filter((p) => p.prerequisiteId === td.id);
+    this.taskPlannerPrerequisitesModal.show(this.project, td, prereqs);
+  }
+
+  setShowTasksAboveTargetGrade(value: boolean) {
+    this.showTasksAboveTargetGrade = value;
+    this.preferenceStorage?.setItem(
+      this.showTasksAboveTargetGradeStorageKey,
+      JSON.stringify(value),
+    );
+    this.refreshItems(false);
+  }
+
+  private mapPrerequisites() {
+    for (const prerequisite of this.allTaskPrerequisites) {
+      prerequisite.taskDefinition = this.unit.taskDefinitions.find(
+        (td) => td.id === prerequisite.taskDefinitionId,
+      );
+      prerequisite.prerequisite = this.unit.taskDefinitions.find(
+        (td) => td.id === prerequisite.prerequisiteId,
+      );
+    }
+    this.allTaskPrerequisites = [...this.allTaskPrerequisites];
+  }
+
+  public blockedDependents: Map<string, boolean> = new Map();
+
+  // Check to see if this task is a prerequisite for another task
+  // If it is, ensure the end date on the task is before the start of its dependent task
+  prerequisiteConflict(item: TaskGanttItem) {
+    if (!item.links.length) {
+      return false;
+    }
+
+    let isAfterDependentStartDate: boolean = false;
+    for (const ganttLink of item.links) {
+      if (typeof ganttLink === 'string') {
+        continue;
+      }
+
+      const ganttItem = this.items.find((i) => i.id === ganttLink.link);
+      if (!ganttItem) {
+        return false;
+      }
+      const diff = this.normalizeDateUTC(item.end) - this.normalizeDateUTC(ganttItem.end);
+
+      if (diff > 0) {
+        isAfterDependentStartDate = true;
+      }
+
+      continue;
+    }
+
+    return isAfterDependentStartDate;
+  }
+
+  isBlockedByPrerequisite(item: TaskGanttItem) {
+    const prerequisites = this.items.filter((i) => {
+      const links = i.links;
+      if (typeof links === 'string') {
+        return false;
+      }
+
+      return links.some((l) => typeof l !== 'string' && l.link === item.id);
+    });
+
+    for (const link of prerequisites) {
+      if (this.prerequisiteConflict(link)) {
+        const diff = this.normalizeDateUTC(link.end) - this.normalizeDateUTC(item.end);
+        if (diff > 0) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  getItemClasses(item: TaskGanttItem): string[] {
+    const classes: string[] = ['gantt-bar'];
+    if (this.animateBackground) {
+      classes.push('flash');
+    }
+    if (item.highlighted) {
+      classes.push('[--bar-bg:#03c6fc]');
+    } else if (this.isAboveTargetGrade(item)) {
+      classes.push('[--bar-bg:#9ca3af]', 'text-white');
+    } else if (this.isPastFeedbackDeadline(item)) {
+      classes.push('[--bar-bg:#cd3704]', 'text-white');
+    } else if (this.isBlockedByPrerequisite(item)) {
+      classes.push('[--bar-bg:#e88307]', 'text-black');
+    } else if (this.isCloseToFeedbackDeadline(item)) {
+      classes.push('[--bar-bg:#ffc53d]', 'text-black');
+    } else {
+      classes.push('[--bar-bg:#0e467b]', 'text-white');
+    }
+
+    return classes;
+  }
+
+  isAboveTargetGrade(item: TaskGanttItem) {
+    return item.taskDefinition.targetGrade > this.targetGrade;
+  }
+
+  isPastFeedbackDeadline(item: TaskGanttItem) {
+    return item.end > item.task.localDeadlineDate().getTime() / 1000;
+  }
+
+  isCloseToFeedbackDeadline(item: TaskGanttItem) {
+    if (!this.unit.allowFlexibleDates) {
+      return false;
+    }
+
+    const task = item.task;
+    const diff =
+      this.normalizeDateUTC(task.localDeadlineDate().getTime() / 1000) -
+      this.normalizeDateUTC(item.end);
+
+    return diff >= 0 && diff <= this.CLOSE_TO_FEEDBACK_DEADLINE_THRESHOLD * 24 * 60 * 60;
+  }
+
+  toDateStr = (timestamp: number) => {
+    const d = new Date(timestamp * 1000);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+  };
+
+  saveTargetDates() {
+    for (const item of this.items) {
+      const td = item.taskDefinition;
+      if (!td) {
+        continue;
+      }
+      if (this.unsavedChanges(item)) {
+        this.saveTargetDate(item);
+      }
+    }
+  }
+
+  saveTargetDate(item: TaskGanttItem) {
+    const td = item.taskDefinition;
+    const task = item.task;
+
+    task.saveTargetDates(this.toDateStr(item.start), this.toDateStr(item.end)).subscribe({
+      next: (data) => {
+        task.targetDueDate = data.targetDueDate;
+        task.targetStartDate = data.targetStartDate;
+        item.start = this.normalizeDateUTC(data.targetStartDate.getTime() / 1000);
+        item.end = this.normalizeDateUTC(data.targetDueDate.getTime() / 1000);
+        this.items = [...this.items];
+      },
+      error: (error) => {
+        this.alertService.error(
+          `Failed to save target date for ${td.abbreviation}: ${error}`,
+          6000,
+        );
+      },
+    });
+  }
+
+  anyUnsavedChanges() {
+    return this.items.some((i) => this.unsavedChanges(i));
+  }
+
+  confirmSaveTargetDates() {
+    this.confirmationModalService.show(
+      'Save Task Dates?',
+      `Do you want to save these new target dates for your tasks? You can always reset them to the unit's default later.`,
+      () => {
+        this.saveTargetDates();
+      },
+    );
+  }
+
+  confirmResetTargetDates() {
+    this.confirmationModalService.show(
+      'Reset Task Dates?',
+      `Are you sure you want to reset all target dates to the unit's default? All modified dates will be reset.`,
+      () => {
+        this.project.resetTargetDates().subscribe({
+          next: (_project) => {
+            for (const task of this.project.tasks) {
+              task.targetDueDate = null;
+              task.targetStartDate = null;
+
+              const item = this.items.find((item) => item.id === task.definition.id.toString());
+              if (item) {
+                item.start = this.normalizeDateUTC(task.startDate.getTime() / 1000);
+                item.end = this.normalizeDateUTC(task.localDueDate().getTime() / 1000);
+              }
+            }
+            this.items = [...this.items];
+          },
+          error: (error) => {
+            this.alertService.error(`Failed to reset target dates: ${error}`, 6000);
+          },
+        });
+      },
+    );
+  }
+
+  async saveImage() {
+    const ganttEl = this.ganttComponent.element;
+    const mainContainer = ganttEl.querySelector<HTMLElement>('.gantt-main-container');
+    const side = ganttEl.querySelector<HTMLElement>('.gantt-side');
+
+    if (!mainContainer || !side) {
+      return;
+    }
+
+    const originalStyle = {
+      width: ganttEl.style.width,
+      height: ganttEl.style.height,
+      overflow: ganttEl.style.overflow,
+    };
+    const scrollElements = Array.from(
+      ganttEl.querySelectorAll<HTMLElement>(
+        '.gantt-main-container, .gantt-side-container, .gantt-virtual-scroll-viewport',
+      ),
+    );
+    const scrollPositions = scrollElements.map((element) => ({
+      element,
+      left: element.scrollLeft,
+      top: element.scrollTop,
+    }));
+    const windowScrollPosition = {
+      left: window.scrollX,
+      top: window.scrollY,
+    };
+
+    try {
+      await this.renderAllGanttBars(ganttEl);
+      this.resetGanttScroll(scrollElements);
+      window.scrollTo(windowScrollPosition.left, windowScrollPosition.top);
+      await this.waitForStableLayout(mainContainer);
+
+      const fullWidth = side.offsetWidth + this.ganttComponent.view.width;
+      const fullHeight =
+        ganttEl.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
+
+      ganttEl.style.width = `${fullWidth}px`;
+      ganttEl.style.height = `${fullHeight}px`;
+      ganttEl.style.overflow = 'visible';
+
+      this.resetGanttScroll(scrollElements);
+      await this.waitForStableLayout(mainContainer);
+
+      const canvas = await this.ganttPrintService.html2canvas();
+      this.downloadCanvas(canvas, `${this.unit.code}-Task-Plan.png`);
+    } catch (error) {
+      this.alertService.error(`Failed to download task plan: ${error}`, 6000);
+    } finally {
+      ganttEl.style.width = originalStyle.width;
+      ganttEl.style.height = originalStyle.height;
+      ganttEl.style.overflow = originalStyle.overflow;
+
+      await this.nextAnimationFrame();
+      for (const position of scrollPositions) {
+        position.element.scrollTo(position.left, position.top);
+      }
+      window.scrollTo(windowScrollPosition.left, windowScrollPosition.top);
+    }
+  }
+
+  private resetGanttScroll(scrollElements: HTMLElement[]) {
+    for (const element of scrollElements) {
+      element.scrollTo(0, 0);
+    }
+  }
+
+  private async waitForStableLayout(element: HTMLElement) {
+    let previousSize = '';
+    let stableFrames = 0;
+
+    for (let attempt = 0; attempt < 30 && stableFrames < 3; attempt++) {
+      await this.nextAnimationFrame();
+
+      const size = `${element.offsetWidth}:${element.offsetHeight}:${element.scrollWidth}:${element.scrollHeight}`;
+      if (size === previousSize) {
+        stableFrames++;
+      } else {
+        previousSize = size;
+        stableFrames = 0;
+      }
+    }
+  }
+
+  private async renderAllGanttBars(ganttEl: HTMLElement) {
+    for (let pass = 0; pass < 4; pass++) {
+      if (ganttEl.querySelectorAll('[data-gantt-id]').length >= this.items.length) {
+        return;
+      }
+
+      const placeholders = Array.from(
+        ganttEl.querySelectorAll<HTMLElement>('gantt-bar-placeholder'),
+      );
+
+      for (const placeholder of placeholders) {
+        placeholder.scrollIntoView({
+          block: 'center',
+          inline: 'center',
+        });
+        await this.nextAnimationFrame();
+        await this.nextAnimationFrame();
+      }
+    }
+
+    if (ganttEl.querySelectorAll('[data-gantt-id]').length < this.items.length) {
+      throw new Error('Some chart items could not be rendered');
+    }
+  }
+
+  private nextAnimationFrame() {
+    return new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+  }
+
+  private downloadCanvas(canvas: HTMLCanvasElement, filename: string) {
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+  }
+
+  normalizeDateUTC = (ts: number) => {
+    const d = new GanttDate(ts * 1000);
+    // d.setHours(0, 0, 0, 0);
+    return Math.floor(d.startOfDay().getTime() / 1000);
+  };
+
+  toDateString(timestamp: number | Date) {
+    const date = timestamp instanceof Date ? timestamp : new Date(timestamp * 1000);
+    return date.toLocaleDateString('en-AU', {
+      month: 'short',
+      day: 'numeric',
+      // year: '2-digit',
+    });
+  }
+
+  unsavedChanges(item: TaskGanttItem) {
+    const task = item.task;
+    const start = this.normalizeDateUTC(task.startDate.getTime() / 1000);
+    const end = this.normalizeDateUTC(task.localDueDate().getTime() / 1000);
+    return start !== this.normalizeDateUTC(item.start) || end !== this.normalizeDateUTC(item.end);
+  }
+
+  getTooltip(item: TaskGanttItem) {
+    return `${this.toDateString(item.start)} — ${this.toDateString(item.end)}`;
+  }
+
+  public get earliestStartDate() {
+    const today = this.normalizeDateUTC(Date.now() / 1000);
+    const tasks = this.taskDefs()
+      .map((td) => this.project.findTaskForDefinition(td.id))
+      .filter((t) => t?.startDate);
+
+    if (!tasks.length) {
+      return today;
+    }
+
+    const earliestTaskStart = Math.min(...tasks.map((t) => t.startDate.getTime() / 1000));
+
+    return Math.floor(Math.min(today, earliestTaskStart));
+  }
+
+  public get latestEndDate() {
+    const oneWeekInSeconds = 7 * 24 * 60 * 60;
+    const tasks = this.taskDefs()
+      .map((td) => this.project.findTaskForDefinition(td.id))
+      .filter((t) => t?.localDueDate());
+
+    if (!tasks.length) {
+      return this.earliestStartDate + oneWeekInSeconds;
+    }
+
+    const latestTaskEnd = Math.max(...tasks.map((t) => t.localDueDate().getTime() / 1000));
+
+    return Math.floor(latestTaskEnd) + oneWeekInSeconds;
+  }
+
+  ngOnInit(): void {
+    this.loadShowTasksAboveTargetGradePreference();
+
+    this.viewOptions = {
+      precisionUnit: 'day',
+      start: new GanttDate(this.earliestStartDate),
+      end: new GanttDate(this.latestEndDate),
+      unitWidth: 40,
+      dragTooltipFormat: 'MMM dd',
+    };
+
+    this.unit.getTaskPrerequisites().subscribe({
+      next: (prereqs) => {
+        this.allTaskPrerequisites = prereqs;
+        this.mapPrerequisites();
+        for (const prerequisite of this.allTaskPrerequisites) {
+          prerequisite.taskDefinition.taskPrerequisitesCache.getOrCreate(
+            prerequisite.id,
+            this.taskPrerequisiteService,
+            prerequisite,
+          );
+        }
+
+        for (const td of this.unit.taskDefinitions) {
+          const prerequisites = td.taskPrerequisitesCache.currentValues;
+          const definitions = this.unit.taskDefinitions;
+          for (const prerequisite of prerequisites) {
+            prerequisite.taskDefinition = definitions.find(
+              (td) => td.id === prerequisite.taskDefinitionId,
+            );
+            prerequisite.prerequisite = definitions.find(
+              (td) => td.id === prerequisite.prerequisiteId,
+            );
+          }
+        }
+
+        this.refreshItems();
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to get task prerequisites: ${error}`, 6000);
+      },
+    });
+  }
+
+  private loadShowTasksAboveTargetGradePreference(): void {
+    const rawPreference = this.preferenceStorage?.getItem(this.showTasksAboveTargetGradeStorageKey);
+    try {
+      this.showTasksAboveTargetGrade = rawPreference ? JSON.parse(rawPreference) === true : false;
+    } catch {
+      this.showTasksAboveTargetGrade = false;
+    }
+  }
+
+  private setupGanttHeaderObserver(): void {
+    const ganttElement = this.elementRef.nativeElement.querySelector('ngx-gantt');
+
+    if (!ganttElement) {
+      return;
+    }
+
+    this.ganttHeaderObserver?.disconnect();
+    this.ganttHeaderObserver = new MutationObserver(() => this.formatGanttHeaderLabels());
+    this.ganttHeaderObserver.observe(ganttElement, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    this.formatGanttHeaderLabels();
+  }
+
+  private formatGanttHeaderLabels(): void {
+    this.formatGanttDayLabels();
+    this.formatGanttTodayLabel();
+  }
+
+  private formatGanttDayLabels(): void {
+    const dayLabels = this.elementRef.nativeElement.querySelectorAll<SVGTextElement>(
+      'gantt-calendar-header .secondary-text',
+    );
+
+    dayLabels.forEach((label) => {
+      if (label.querySelector('tspan')) {
+        return;
+      }
+
+      const [date, day] = label.textContent?.trim().split(/\s+/) ?? [];
+
+      if (!date || !day) {
+        return;
+      }
+
+      const x = label.getAttribute('x') ?? '0';
+      const dateLine = document.createElementNS(this.svgNamespace, 'tspan');
+      dateLine.setAttribute('x', x);
+      dateLine.textContent = date;
+
+      const dayLine = document.createElementNS(this.svgNamespace, 'tspan');
+      dayLine.setAttribute('x', x);
+      dayLine.setAttribute('dy', '1.15em');
+      dayLine.textContent = day;
+
+      label.textContent = '';
+      label.append(dateLine, dayLine);
+    });
+  }
+
+  private formatGanttTodayLabel(): void {
+    const todayLabel = this.elementRef.nativeElement.querySelector<HTMLElement>(
+      'gantt-calendar-header .today-rect',
+    );
+
+    if (!todayLabel || todayLabel.querySelector('.today-weekday')) {
+      return;
+    }
+
+    const today = new Date();
+    const date = todayLabel.textContent?.trim() || today.getDate().toString();
+    const day = new Intl.DateTimeFormat('en-US', {weekday: 'short'}).format(today);
+
+    todayLabel.replaceChildren();
+
+    const dateLine = document.createElement('span');
+    dateLine.textContent = date;
+
+    const dayLine = document.createElement('span');
+    dayLine.classList.add('today-weekday');
+    dayLine.textContent = day;
+
+    todayLabel.append(dateLine, dayLine);
+  }
+
+  refreshItems(scroll: boolean = true) {
+    const requestedTaskDefinitionId = scroll
+      ? this.route.snapshot.queryParamMap.get('taskDef')
+      : null;
+    this.revealRequestedTaskDefinition(requestedTaskDefinitionId);
+
+    this.taskPrerequisites = this.allTaskPrerequisites.filter((pre) =>
+      this.taskDefs().find((td) => td.id === pre.taskDefinitionId),
+    );
+
+    const taskDefinitions = this.taskDefs();
+    this.items = [];
+    this.baselineItems = [];
+
+    const _items: TaskGanttItem[] = [];
+    const _baselineItems: GanttBaselineItem[] = [];
+
+    for (const td of taskDefinitions) {
+      const task = this.project.findTaskForDefinition(td.id);
+
+      const item: TaskGanttItem = {
+        id: td.id.toString(),
+        title: `${td.abbreviation} ${td.name}`,
+        start: this.normalizeDateUTC(task.startDate.getTime() / 1000),
+        end: this.normalizeDateUTC(task.localDueDate().getTime() / 1000),
+        expandable: false,
+        draggable: this.project.unit.allowFlexibleDates,
+        // color: this.gradeService.gradeColors[td.targetGrade],
+        expanded: false,
+        color: '#3333ff',
+        taskDefinition: td,
+        task: task,
+        // progress: 0.5,
+        originalLinks: [],
+        links: this.taskPrerequisites
+          .filter((p) => p.prerequisiteId === td.id)
+          // .filter((p) => p.taskDefinitionId === td.id)
+          .map((p) => {
+            let color: string;
+
+            switch (p.taskStatus) {
+              case 'ready_for_feedback':
+                color = 'rgba(0, 121, 216, 0.1)';
+                break;
+              case 'complete':
+                color = 'rgba(91, 183, 91, 0.1)';
+                break;
+              case 'discuss':
+                color = 'rgba(49, 176, 213, 0.1)';
+                break;
+              case 'demonstrate':
+                color = 'rgba(49, 176, 213, 0.1)';
+                break;
+              default:
+                color = 'gray';
+            }
+            const link: GanttLink = {
+              type: GanttLinkType.fs,
+              link: p.taskDefinitionId.toString(),
+              // link: p.prerequisiteId.toString(),
+              color: {
+                default: color,
+                active: color,
+              },
+            };
+
+            return link;
+          }),
+      };
+
+      const originalItem = {...item};
+      item.originalLinks = [...(originalItem.links as GanttLink[])];
+
+      this.items.push(item);
+      _items.push(item);
+
+      // Create baseline item
+      const tdTargetDate = td.gradeTargetDate(this.targetGrade) ?? td.targetDate;
+      const tdStartDate = td.gradeStartDate(this.targetGrade) ?? td.startDate;
+
+      const baselineItem: GanttBaselineItem = {
+        id: item.id,
+        start: this.normalizeDateUTC(tdStartDate.getTime() / 1000),
+        end: this.normalizeDateUTC(tdTargetDate.getTime() / 1000),
+      };
+
+      _baselineItems.push(baselineItem);
+    }
+
+    this.items = [..._items];
+    setTimeout(() => {
+      this.baselineItems = [..._baselineItems];
+    });
+
+    if (scroll) {
+      this.ganttComponent.scrollToToday();
+    }
+
+    if (requestedTaskDefinitionId) {
+      const taskItem = this.items.find((item) => item.id === requestedTaskDefinitionId);
+      if (taskItem) {
+        this.ganttComponent.scrollToDate(taskItem.start);
+        taskItem.highlighted = true;
+        this.animateBackground = true;
+
+        setTimeout(() => {
+          const el = document.querySelector(`[data-gantt-id="${taskItem.id}"]`) as HTMLElement;
+
+          el?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest',
+          });
+        });
+        setTimeout(() => (taskItem.highlighted = false), 1000);
+        setTimeout(() => (this.animateBackground = false), 2000);
+      }
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: {taskDef: null},
+        queryParamsHandling: 'merge',
+        replaceUrl: true,
+      });
+    }
+  }
+
+  public taskDefs(): TaskDefinition[] {
+    if (!this.project || !this.project.unit.taskDefinitions) {
+      return [];
+    }
+
+    return this.project.unit.taskDefinitions
+      .filter(
+        (taskDef) => this.showTasksAboveTargetGrade || taskDef.targetGrade <= this.targetGrade,
+      )
+      .sort((a, b) => {
+        const taskA = this.project.findTaskForDefinition(a.id);
+        const taskB = this.project.findTaskForDefinition(b.id);
+
+        const dateA = taskA?.startDate ?? a.startDate;
+        const dateB = taskB?.startDate ?? b.startDate;
+
+        return new Date(dateA).getTime() - new Date(dateB).getTime();
+      });
+  }
+
+  private revealRequestedTaskDefinition(taskDefinitionId: string | null): void {
+    const requestedTaskDefinition = taskDefinitionId
+      ? this.project.unit.taskDefinitions.find(
+          (taskDefinition) => taskDefinition.id.toString() === taskDefinitionId,
+        )
+      : null;
+
+    if (
+      requestedTaskDefinition?.targetGrade > this.targetGrade &&
+      !this.showTasksAboveTargetGrade
+    ) {
+      this.showTasksAboveTargetGrade = true;
+      this.preferenceStorage?.setItem(
+        this.showTasksAboveTargetGradeStorageKey,
+        JSON.stringify(true),
+      );
+    }
+  }
+
+  private get preferenceStorage(): Storage | null {
+    try {
+      return globalThis.localStorage ?? null;
+    } catch {
+      return null;
+    }
+  }
+}
diff --git a/src/app/projects/states/portfolio/directives/directives.coffee b/src/app/projects/states/portfolio/directives/directives.coffee
deleted file mode 100644
index 8ce9be0be3..0000000000
--- a/src/app/projects/states/portfolio/directives/directives.coffee
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio.directives', [
-  'doubtfire.projects.states.portfolio.directives.portfolio-add-extra-files-step'
-  'doubtfire.projects.states.portfolio.directives.portfolio-grade-select-step'
-  'doubtfire.projects.states.portfolio.directives.portfolio-learning-summary-report-step'
-  'doubtfire.projects.states.portfolio.directives.portfolio-review-step'
-  'doubtfire.projects.states.portfolio.directives.portfolio-tasks-step'
-  'doubtfire.projects.states.portfolio.directives.portfolio-welcome-step'
-])
diff --git a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.coffee b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.coffee
deleted file mode 100644
index f62984ff63..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.coffee
+++ /dev/null
@@ -1,25 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio.directives.portfolio-add-extra-files-step', [])
-
-#
-# Allow students to add additional files to the end of their portfolio
-# They can choose any file they want to upload
-#
-.directive('portfolioAddExtraFilesStep', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.tpl.html'
-  controller: ($scope) ->
-    otherFileFileUploadData = (type) ->
-      type: {
-        file0: { name: "Other", type: type }
-      },
-      payload: {
-        name: "Other"
-        kind: type
-      }
-
-    $scope.uploadType = 'document'
-    $scope.$watch 'uploadType', (newType) ->
-      return unless newType?
-      $scope.uploadFileData = otherFileFileUploadData newType
-)
diff --git a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.html b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.html
new file mode 100644
index 0000000000..315af39ff8
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.html
@@ -0,0 +1,52 @@
+<mat-card appearance="outlined" class="mx-auto max-w-[1100px]">
+  <mat-card-header>
+    <mat-card-title>Upload Other Files</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <p class="py-3">
+      Now is your chance to upload any extra files to include in your portfolio. They'll appear at
+      the very top of your portfolio, before your tasks.
+    </p>
+    <div class="pb-3">
+      <ol>
+        @for (file of extraFiles; track file) {
+          <li class="flex items-center justify-between border-b-2 border-b-gray-100 py-1">
+            <div class="flex items-center justify-between gap-1">
+              <mat-icon>{{ icons[file.kind] }}</mat-icon>
+              {{ file.name }}
+            </div>
+            <button color="primary" mat-button (click)="deleteFileFromPortfolio(file)">
+              Remove
+            </button>
+          </li>
+        } @empty {
+          <p>If you do not have any files to add, you can skip this step.</p>
+        }
+      </ol>
+    </div>
+    <div class="flex items-center justify-center">
+      <mat-form-field appearance="outline" class="w-full max-w-2xl">
+        <mat-label>Select type of file:</mat-label>
+        <mat-select [(ngModel)]="uploadType" (selectionChange)="onTypeChange($event)">
+          <mat-option value="document">Document File</mat-option>
+          <mat-option value="code">Code File</mat-option>
+          <mat-option value="image">Image File</mat-option>
+          <mat-option value="zip">ZIP File</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <f-file-uploader
+      [files]="uploadFileType"
+      [isUploading]="isUploading"
+      [onSuccess]="addNewFilesToPortfolio.bind(this)"
+      [payload]="uploadFilePayload"
+      [showName]="false"
+      [url]="project.portfolioUrl()"
+    >
+    </f-file-uploader>
+  </mat-card-content>
+  <mat-card-footer class="flex w-full justify-between p-3">
+    <button mat-raised-button (click)="advanceActiveTab(-1)">Back</button>
+    <button color="primary" mat-raised-button (click)="advanceActiveTab(1)">Next</button>
+  </mat-card-footer>
+</mat-card>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.scss b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.ts b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.ts
new file mode 100644
index 0000000000..2d2316b633
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.component.ts
@@ -0,0 +1,98 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {MatSelectChange} from '@angular/material/select';
+import {Project} from 'src/app/api/models/project';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-portfolio-add-extra-files-step',
+  templateUrl: 'portfolio-add-extra-files-step.component.html',
+  styleUrls: ['portfolio-add-extra-files-step.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfolioAddExtraFilesStepComponent implements OnInit {
+  @Input() project: Project;
+  @Input() onAdvanceActiveTab?: (index: 1 | -1) => void;
+
+  public uploadType: 'document' | 'code' | 'image' | 'zip' = 'document';
+
+  public isUploading: boolean;
+
+  public uploadFileType = {
+    file0: {
+      name: 'Other',
+      type: 'document',
+    },
+  };
+
+  public uploadFilePayload = {
+    name: 'Other',
+    kind: 'document',
+  };
+
+  constructor(private alertService: AlertService) {}
+
+  public readonly icons = {
+    document: 'article_outlined',
+    code: 'integration_instructions_outlined',
+    image: 'image_outlined',
+    zip: 'zip_outlined',
+  };
+
+  ngOnInit(): void {
+    this.uploadType = 'document';
+
+    this.uploadFileType = {
+      file0: {
+        name: 'Other',
+        type: 'document',
+      },
+    };
+
+    this.uploadFilePayload = {
+      name: 'Other',
+      kind: 'document',
+    };
+  }
+  onTypeChange(event: MatSelectChange) {
+    console.log('on type change', event);
+    this.uploadFileType = {
+      file0: {
+        name: 'Other',
+        type: event.value,
+      },
+    };
+
+    this.uploadFilePayload = {
+      name: 'Other',
+      kind: event.value,
+    };
+  }
+
+  public get extraFiles() {
+    // If file.idx === 0, then it's the Learning Summary Report, so we ignore it here
+    return this.project?.portfolioFiles.filter((file) => file.idx !== 0);
+  }
+
+  deleteFileFromPortfolio(file: {idx: number; kind: string; name: string}) {
+    this.project.deleteFileFromPortfolio(file).subscribe({
+      next: () => {
+        this.alertService.success('Succesfully delete file', 3000);
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to delete file: ${error}`, 6000);
+      },
+    });
+  }
+
+  advanceActiveTab(index: 1 | -1) {
+    if (this.onAdvanceActiveTab) {
+      this.onAdvanceActiveTab(index);
+      return;
+    }
+  }
+
+  addNewFilesToPortfolio(newFile: {kind: string; name: string; idx: number}) {
+    this.project.portfolioFiles.push(newFile);
+  }
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.scss b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.scss
deleted file mode 100644
index 47c481a372..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.portfolio-add-extra-files-step {
-  a.clear-upload {
-    margin-left: 1ex;
-    &:hover i {
-      font-size: 1.15em;
-      color: $brand-danger;
-    }
-    display: inline-block;
-  }
-}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.tpl.html
deleted file mode 100644
index 4de3b6f696..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.tpl.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">{{activeTab.title}}</h3>
-  </div>
-  <div class="panel-body">
-    <p>
-      Now is your chance to upload extra files to include in your portfolio.
-      These files will be added at to your portfolio before your selected tasks
-      from the previous step.
-    </p>
-    <div class="card">
-      <div class="card-heading" ng-show="extraFiles().length == 0">
-        <h4>No files to add?</h4>
-        <p>If you do not have any files to add you can skip this step.</p>
-      </div>
-      <div class="card-heading" ng-show="extraFiles().length > 0">
-        <h4>Extra file{{extraFiles().length > 1 ? 's' : ''}} added</h4>
-        <p>
-          {{extraFiles().length > 1 ? 'The files you add will appear in the portfolio in the order shown below.' : ''}}
-          If you want to delete a file, click the cross beside the file's name.
-        </p>
-        <ol>
-          <li ng-repeat="file in extraFiles()">
-            <i class="fa fa-file-{{file.kind}}-o"></i> {{file.name}}
-            <a class="clear-upload text-muted" ng-click="deleteFileFromPortfolio(file)">
-              <i class="fa fa-times"></i>
-            </a>
-          </li>
-        </ol>
-      </div>
-      <div class="card-body">
-        <div class="form-group clearfix" ng-hide="isUploading">
-          <label class="col-sm-3 text-right">Select type of file:</label>
-          <div class="col-sm-7">
-            <select ng-model="uploadType" class="form-control input-sm">
-              <option value="document">
-                <i class="fa fa-file-pdf-o"></i> Document File</option>
-              <option value="code">Code File</option>
-              <option value="image">Image File</option>
-            </select>
-          </div>
-        </div>
-        <file-uploader
-          show-name="false"
-          files="uploadFileData.type"
-          payload="uploadFileData.payload"
-          is-uploading="isUploading"
-          url="project.portfolioUrl()"
-          on-success="addNewFilesToPortfolio">
-        </file-uploader>
-      </div>
-    </div>
-  </div><!--/add-some-more-files-->
-  <div class="panel-footer clearfix">
-    <button class="btn btn-primary pull-left" ng-click="advanceActiveTab(-1)"><i class="fa fa-arrow-left"></i> Back</button>
-    <button class="btn btn-primary pull-right" ng-click="advanceActiveTab(1)">Next <i class="fa fa-arrow-right"></i></button>
-  </div>
-</div>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.coffee b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.coffee
deleted file mode 100644
index d29d0f65da..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.coffee
+++ /dev/null
@@ -1,19 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio.directives.portfolio-grade-select-step', [])
-
-#
-# Allows students to select the target grade they are hoping
-# to achieve with their portfolio
-#
-.directive('portfolioGradeSelectStep', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html'
-  controller: ($scope, newProjectService, gradeService) ->
-    $scope.grades = gradeService.grades
-    $scope.agreedToAssessmentCriteria = $scope.projectHasLearningSummaryReport()
-    $scope.chooseGrade = (idx) ->
-      $scope.project.submittedGrade = idx
-      newProjectService.update($scope.project).subscribe((project) ->
-        $scope.project.refreshBurndownChartData()
-      )
-)
diff --git a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.html b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.html
new file mode 100644
index 0000000000..008b8109a3
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.html
@@ -0,0 +1,100 @@
+<div class="project-portfolio-wizard w-full" id="portfolio-state">
+  <mat-card class="mx-auto max-w-7xl">
+    <!-- Main Header -->
+    <mat-card-header>
+      <mat-card-title class="grade-card-title">
+        <h3>Select Grade</h3>
+      </mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <p class="m-2.5">
+        In preparing your portfolio, you need to undertake a self-assessment. Use the unit's
+        assessment criteria to determine the grade your portfolio should be awarded.
+      </p>
+
+      <!-- Warning Card -->
+      <mat-card class="mx-1 mt-2.5">
+        <mat-card-header class="bg-red-500 text-white">
+          <mat-card-title class="flex flex-row items-center gap-1">
+            <mat-icon class="warning-icon">warning</mat-icon>
+            Read the assessment criteria
+          </mat-card-title>
+        </mat-card-header>
+
+        <mat-card-content class="bg-red-500 text-white">
+          <p class="m-2">
+            Make sure that you have reviewed the Assessment Criteria for the grade you are applying
+            for. Each grade will have a list of criteria that you can use to determine if you meet
+            the requirements to achieve that grade.
+          </p>
+        </mat-card-content>
+
+        <mat-card-actions>
+          <mat-checkbox [(ngModel)]="agreedToAssessmentCriteria">
+            I have read the Assessment Criteria for this unit
+          </mat-checkbox>
+        </mat-card-actions>
+      </mat-card>
+
+      <!-- Grade Selection -->
+
+      @if (agreedToAssessmentCriteria) {
+        <mat-card class="mx-1 mt-2.5">
+          <mat-card-header>
+            <mat-card-title class="flex flex-row items-center gap-1">
+              Grade Application
+            </mat-card-title>
+          </mat-card-header>
+
+          <mat-card-content>
+            <p class="m-2">
+              Select the <strong>grade</strong> you are applying for {{ unit.code }}
+              {{ unit.name }} below.
+            </p>
+          </mat-card-content>
+
+          <mat-card-content class="text-center">
+            <mat-button-toggle-group
+              hideSingleSelectionIndicator
+              [ngModel]="project.submittedGrade"
+            >
+              @for (grade of gradeValues; track grade) {
+                <mat-button-toggle
+                  class="p-1 py-2.5"
+                  [value]="grade"
+                  (click)="updateSubmittedGrade(grade)"
+                >
+                  <f-grade-icon [grade]="grade" [unit]="unit"></f-grade-icon>
+                </mat-button-toggle>
+              }
+            </mat-button-toggle-group>
+
+            <p class="mt-2.5 text-gray-600">
+              Make sure your <strong>Learning Summary Report</strong> justifies how your portfolio
+              demonstrates you have
+              <strong>met all unit learning outcomes to a {{ targetGrade }} level</strong>
+            </p>
+          </mat-card-content>
+        </mat-card>
+      }
+    </mat-card-content>
+
+    <!-- Footer Buttons -->
+    <mat-card-actions class="flex justify-between">
+      <button color="primary" mat-raised-button (click)="goToPreviousStep()">Back</button>
+      <button
+        color="primary"
+        mat-raised-button
+        [disabled]="
+          !agreedToAssessmentCriteria ||
+          project.submittedGrade === null ||
+          project.submittedGrade === undefined
+        "
+        (click)="goToNextStep()"
+      >
+        Next
+      </button>
+    </mat-card-actions>
+  </mat-card>
+</div>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.scss b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.ts b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.ts
new file mode 100644
index 0000000000..22c8c6d250
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component.ts
@@ -0,0 +1,65 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Project, Unit} from 'src/app/api/models/doubtfire-model';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+
+@Component({
+  selector: 'f-portfolio-grade-select-step',
+  templateUrl: 'portfolio-grade-select-step.component.html',
+  styleUrls: ['portfolio-grade-select-step.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfolioGradeSelectStepComponent {
+  @Input() project: Project;
+  @Input() unit: Unit;
+  @Input() onAdvanceActiveTab?: (index: 1 | -1) => void;
+
+  public agreedToAssessmentCriteria: boolean = false;
+
+  constructor(
+    private gradeService: GradeService,
+    private projectService: ProjectService,
+    private alertService: AlertService,
+  ) {}
+
+  public get gradeValues() {
+    return this.gradeService.gradeValuesFor(this.unit);
+  }
+
+  public get targetGrade(): string {
+    return this.gradeService.grades[this.project.submittedGrade] ?? 'selected grade';
+  }
+
+  updateSubmittedGrade(newGrade: number): void {
+    const previousSubmittedGrade = this.project.submittedGrade;
+    this.project.submittedGrade = newGrade;
+
+    this.projectService.update(this.project).subscribe(
+      (project) => {
+        project.refreshBurndownChartData?.();
+      },
+      (error) => {
+        this.project.submittedGrade = previousSubmittedGrade;
+        console.error('Error updating target grade:', error);
+        this.alertService.error(`Could not update grade: ${error}`, 6000);
+      },
+    );
+  }
+
+  private navigate(index: 1 | -1): void {
+    if (this.onAdvanceActiveTab) {
+      this.onAdvanceActiveTab(index);
+      return;
+    }
+  }
+
+  goToNextStep(): void {
+    this.navigate(1);
+  }
+
+  goToPreviousStep(): void {
+    this.navigate(-1);
+  }
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.scss b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.scss
deleted file mode 100644
index bfc229c4b1..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.project-portfolio-wizard .portfolio-grade-select-step {
-  .confirm-read-assessment-criteria {
-    font-size: 1.2em;
-  }
-  .select-the-grade {
-    .btn {
-      padding: 1em;
-    }
-  }
-}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html
deleted file mode 100644
index 244c110857..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Select Grade</h3>
-  </div>
-  <div class="panel-body">
-    <p>
-      In preparing your portfolio, you need to undertake a self assessment. Use the unit's assessment criteria to
-      determine the grade your portfolio should be awarded.
-    </p>
-    <div class="card card-danger">
-      <div class="card-heading">
-        <h4><i class="fa fa-warning"></i> Read the assessment criteria</h4>
-        Make sure that you have reviewed the Assessment Criteria for the grade you are applying for. Each grade will
-        have a list of criteria that you can use to determine if you meet the requirements to achieve that grade.
-      </div>
-      <div class="card-body text-center" style="font-size: 1.25em">
-        <input type="checkbox" class="pointer" id="agree-read" ng-model="agreedToAssessmentCriteria" />
-        <label class="pointer" for="agree-read">I have read the Assessment Criteria for this unit</label>
-      </div>
-    </div>
-    <!--/confirm-read-assessment-criteria-->
-    <div class="card card-default" collapse="!agreedToAssessmentCriteria">
-      <div class="card-heading">
-        <h4>Grade Application</h4>
-        Select the <strong>grade</strong> you are applying for {{unit.name}} below.
-      </div>
-      <div class="card-body text-center">
-        <div class="btn-group">
-          <label
-            ng-repeat="grade in grades"
-            ng-if="$index != 4"
-            ng-click="chooseGrade($index); status.isopen=false"
-            class="btn btn-default col-sm-3"
-            ng-model="project.submittedGrade"
-            btn-radio="{{$index}}"
-          >
-            <grade-icon
-              grade="grade"
-              class="text-{{project.submittedGrade == grades.indexOf(grade) ? 'success' : 'muted'}}"
-            ></grade-icon>
-          </label>
-        </div>
-        <p class="help-block">
-          Make sure your <strong>Learning Summary Report</strong> justifies how your portfolio demonstrates you have
-          <strong>met all unit learning outcomes to a {{targetGrade}} level</strong>
-        </p>
-      </div>
-    </div>
-    <!--/select-the-grade-->
-  </div>
-  <!--/content-->
-  <div class="panel-footer clearfix">
-    <button class="btn btn-primary pull-left" ng-click="advanceActiveTab(-1)">
-      <i class="fa fa-arrow-left"></i> Back
-    </button>
-    <button class="btn btn-primary pull-right" ng-disabled="!agreedToAssessmentCriteria" ng-click="advanceActiveTab(1)">
-      Next <i class="fa fa-arrow-right"></i>
-    </button>
-  </div>
-</div>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.coffee b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.coffee
deleted file mode 100644
index f2f27caaf7..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.coffee
+++ /dev/null
@@ -1,29 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio.directives.portfolio-learning-summary-report-step', [])
-
-#
-# Step to justify the portfolio with a Learning Summary Report
-#
-.directive('portfolioLearningSummaryReportStep', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.tpl.html'
-  controller: ($scope) ->
-    $scope.forceLSRSubmit = false
-    $scope.acceptUploadNewLearningSummary = false
-
-    $scope.learningSummaryReportFileUploadData = {
-      type: {
-        file0: { name: "Learning Summary Report", type: "document" }
-      },
-      payload: {
-        name: "LearningSummaryReport" # DO NOT MODIFY - case senstitive on API
-        kind: "document"
-      }
-    }
-
-    $scope.addNewFile = (newFile) ->
-      $scope.addNewFilesToPortfolio(newFile)
-      $scope.projectHasDraftLearningSummaryReport = false
-      $scope.acceptUploadNewLearningSummary = false
-      $scope.forceLSRSubmit = false
-)
diff --git a/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.html b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.html
new file mode 100644
index 0000000000..38681c7334
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.html
@@ -0,0 +1,91 @@
+<mat-card appearance="outlined" class="mx-auto max-w-[1100px]">
+  <mat-card-header>
+    <mat-card-title>Learning Summary Report</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <p class="pt-3">
+      Upload the Learning Summary Report, the primary porfolio document which justifies your desired
+      grade.
+    </p>
+    <p>
+      Your Learning Summary Report is a
+      <strong>summary of what you have learnt in this unit</strong>. It consists of two sections:
+    </p>
+
+    <ol class="ml-2.5 list-inside list-decimal space-y-1 py-3">
+      <li>a self-assessment, and</li>
+      <li>your reflections on the unit.</li>
+    </ol>
+
+    <p>
+      The <strong>self-assessment</strong> indicates how your portfolio aligns with the assessment
+      criteria, and which grade you are applying for.
+    </p>
+
+    <p>
+      Your <strong>reflections</strong> are a personal comment on what you have learnt in the unit,
+      and how your knowledge and skills have developed.
+    </p>
+
+    @if (
+      projectHasDraftLearningSummaryReport && !forceLSRSubmit && !acceptUploadNewLearningSummary
+    ) {
+      <div class="mx-auto flex max-w-4xl flex-col items-center justify-center py-3 text-center">
+        <div class="submitted flex items-center justify-center gap-3 py-3 text-center text-2xl">
+          <mat-icon color="primary">check_circle</mat-icon>
+          Learning Summary Report Submitted
+        </div>
+        @if (draftTaskDefinitionWasUsed()) {
+          <div class="w-full max-w-2xl py-1 text-center text-xs text-gray-400">
+            Your learning summary report was automatically submitted from your
+            {{ unit.draftTaskDefinition.abbreviation }} {{ unit.draftTaskDefinition.name }}
+            submission.
+          </div>
+        }
+
+        <!-- <button mat-button (click)="downloadLearningSummaryReport()" color="primary">
+          View Learning Summary Report
+        </button> -->
+        <button color="primary" mat-button (click)="forceLSRSubmit = true">Upload a new one</button>
+      </div>
+    }
+    <div
+      [hidden]="
+        projectHasDraftLearningSummaryReport && !(forceLSRSubmit || acceptUploadNewLearningSummary)
+      "
+    >
+      <div
+        class="mx-auto flex items-center justify-center gap-3 rounded border-yellow-500 bg-yellow-200 p-2.5"
+      >
+        <mat-icon>warning</mat-icon>
+
+        Remember to provide a justification for why you believe you have achieved a
+        {{ targetGradeLabel }} in {{ unit.code }} {{ unit.name }}.
+      </div>
+      <f-file-uploader
+        [files]="learningSummaryReportFileUploadData.type"
+        [onSuccess]="addNewFile.bind(this)"
+        [payload]="learningSummaryReportFileUploadData.payload"
+        [url]="project.portfolioUrl()"
+      ></f-file-uploader>
+    </div>
+  </mat-card-content>
+  <mat-card-footer class="flex w-full justify-between p-3">
+    <button mat-raised-button (click)="advanceActiveTab(-1)">Back</button>
+    <div class="flex items-center justify-center gap-3">
+      @if (!projectHasDraftLearningSummaryReport) {
+        <div class="text-gray-400">
+          You're missing a Learning Summary Report. Upload one to continue.
+        </div>
+      }
+      <button
+        color="primary"
+        mat-raised-button
+        [disabled]="!projectHasDraftLearningSummaryReport"
+        (click)="advanceActiveTab(1)"
+      >
+        Next
+      </button>
+    </div>
+  </mat-card-footer>
+</mat-card>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.scss b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.scss
new file mode 100644
index 0000000000..fde6acc603
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.scss
@@ -0,0 +1,5 @@
+.submitted .mat-icon {
+  font-size: 50px;
+  width: 50px;
+  height: 50px;
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.ts b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.ts
new file mode 100644
index 0000000000..7dfb134cbb
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.component.ts
@@ -0,0 +1,72 @@
+import {ChangeDetectionStrategy, Component, Injector, Input} from '@angular/core';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+import {GradeService} from 'src/app/common/services/grade.service';
+
+@Component({
+  selector: 'f-portfolio-learning-summary-report-step',
+  templateUrl: 'portfolio-learning-summary-report-step.component.html',
+  styleUrls: ['portfolio-learning-summary-report-step.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfolioLearningSummaryReportStepComponent {
+  @Input() unit: Unit;
+  @Input() project: Project;
+  @Input() onAdvanceActiveTab?: (index: 1 | -1) => void;
+
+  public learningSummaryReportFileUploadData = {
+    type: {
+      file0: {name: 'Learning Summary Report', type: 'document'},
+    },
+    payload: {
+      name: 'LearningSummaryReport', // DO NOT MODIFY - case sensitive on API
+      kind: 'document',
+    },
+  };
+
+  public forceLSRSubmit: boolean = false;
+  public acceptUploadNewLearningSummary: boolean = false;
+
+  constructor(
+    private injector: Injector,
+    private gradeService: GradeService,
+  ) {}
+
+  public get projectHasDraftLearningSummaryReport() {
+    return (
+      this.project?.usesDraftLearningSummary ||
+      this.project?.portfolioFiles.find((f) => f.idx === 0)
+    );
+  }
+
+  public get targetGradeLabel(): string {
+    return this.gradeService.gradeLabel(this.project.targetGrade, this.unit);
+  }
+
+  advanceActiveTab(index: 1 | -1) {
+    if (this.onAdvanceActiveTab) {
+      this.onAdvanceActiveTab(index);
+      return;
+    }
+  }
+
+  addNewFile(newFile: {kind: string; name: string; idx: number}) {
+    this.project.portfolioFiles.push(newFile);
+    this.acceptUploadNewLearningSummary = false;
+    this.forceLSRSubmit = false;
+  }
+
+  draftTaskDefinitionWasUsed(): boolean {
+    const draftTaskDef = this.unit.draftTaskDefinition;
+    if (draftTaskDef) {
+      const task = this.project.findTaskForDefinition(draftTaskDef.id);
+      if (task && task.inSubmittedState()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // downloadLearningSummaryReport(){}
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.tpl.html
deleted file mode 100644
index 960c0014ab..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.tpl.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">
-      {{activeTab.title}}
-    </h3>
-  </div>
-  <div class="panel-body">
-    <p>
-      Upload the Learning Summary Report, the primary porfolio document which
-      justifies your desired grade.
-    </p>
-    <p>
-      Your Learning Summary Report is a <strong>summary of what you have learnt in this unit</strong>.
-      It consists of two sections:
-      <ol>
-        <li>a self-assessment, and</li>
-        <li>your reflections on the unit.</li>
-      </ol>
-    </p>
-    <p>
-      The <strong>self-assessment</strong> indicates how your portfolio aligns
-      with the assessment criteria, and which grade you are applying for.
-    </p>
-    <p>
-      Your <strong>reflections</strong> are a personal comment on what you have
-      learnt in the unit, and how your knowledge and skills have developed.
-    </p>
-    <div class="card card-danger" ng-show="projectHasDraftLearningSummaryReport">
-      <div class="card-heading">
-        <h4>
-          <i class="fa fa-warning"></i> Before you submit your portfolio...
-        </h4>
-        Your draft learning summary has already been copied over,
-        it is <strong>advised</strong> you upload a revised copy.
-      </div>
-      <div class="card-body text-center" style="font-size: 1.25em;">
-        <input type="checkbox" class="pointer" id="agree-read" ng-model="acceptUploadNewLearningSummary">
-        <label class="pointer" for="agree-read">I would like to upload a revised learning summary</label>
-      </div>
-    </div> <!--/confirmed-revised-learning-summary-->
-
-    <div class="card card-success" ng-class="{'card-danger': 'projectHasLearningSummaryReport() && !forceLSRSubmit', 'card-success': '!(projectHasLearningSummaryReport() && !forceLSRSubmit)'}" collapse="!acceptUploadNewLearningSummary && projectHasDraftLearningSummaryReport">
-      <div class="card-heading" ng-show="projectHasLearningSummaryReport() && !forceLSRSubmit && !acceptUploadNewLearningSummary">
-        <h4>
-          <i class="fa fa-check"></i> Learning Summary Report Submitted
-        </h4>
-        Click <a ng-click="forceLSRSubmit = true">here</a> to re-upload a new Learning Summary Report
-      </div><!--/lsr-uploaded-->
-
-      <div class="card-heading" ng-hide="projectHasLearningSummaryReport() && !forceLSRSubmit && !acceptUploadNewLearningSummary">
-        <h4>
-          <i class="fa fa-warning"></i> Before you submit the Learning Summary Report...
-        </h4>
-        Remember to <strong>provide a justification</strong> for why you believe
-        you have achieved a {{targetGrade}} in {{unit.name}}.
-      </div>
-      <div class="card-body" ng-show="!projectHasLearningSummaryReport() || (projectHasLearningSummaryReport() && (forceLSRSubmit || acceptUploadNewLearningSummary))">
-        <file-uploader
-          files="learningSummaryReportFileUploadData.type"
-          payload="learningSummaryReportFileUploadData.payload"
-          url="project.portfolioUrl()"
-          on-success="addNewFile"></file-uploader>
-      </div>
-    </div>
-  </div>
-  <div class="panel-footer clearfix">
-    <button class="btn btn-primary pull-left" ng-click="advanceActiveTab(-1)"><i class="fa fa-arrow-left"></i> Back</button>
-    <button class="btn btn-primary pull-right" ng-disabled="!projectHasLearningSummaryReport()" ng-click="advanceActiveTab(1)">Next <i class="fa fa-arrow-right"></i></button>
-    <div class="help-block pull-right text-right col-md-8 col-sm-12" ng-hide="projectHasLearningSummaryReport()">
-      You're missing a Learning Summary Report. Upload one to continue.
-    </div>
-  </div>
-</div>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.html b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.html
new file mode 100644
index 0000000000..3944af9a70
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.html
@@ -0,0 +1,55 @@
+@if (loadingIncludedTasks) {
+  <div class="flex min-h-[150px] w-full flex-col items-center justify-center gap-3">
+    <div>Loading tasks...</div>
+    <mat-progress-spinner mode="indeterminate"> </mat-progress-spinner>
+  </div>
+} @else {
+  @if (tasksInPortfolio.length === 0) {
+    <div class="flex size-full flex-col items-center justify-center p-2.5 text-gray-400">
+      <mat-icon class="scale-125">assignment_late</mat-icon>
+      <p class="p-2.5">No tasks found</p>
+    </div>
+  } @else {
+    <ol>
+      @for (task of tasksInPortfolio; track task) {
+        <li class="my-1">
+          <div class="flex justify-between">
+            <div class="flex items-center gap-1">
+              <div>{{ task.definition.abbreviation }} &mdash; {{ task.definition.name }}</div>
+            </div>
+            <status-icon [status]="task.status"></status-icon>
+          </div>
+        </li>
+      }
+    </ol>
+  }
+  @if (tasksStillProcessing.length > 0) {
+    <div class="my-4 rounded-md border border-amber-200 bg-amber-50 p-4">
+      <div class="mb-3 flex items-start gap-3">
+        <mat-icon class="text-amber-600">hourglass_top</mat-icon>
+        <div>
+          <p class="font-medium text-amber-900">Tasks still processing</p>
+          <p class="mt-1 text-sm text-amber-800">
+            Please wait until these tasks have finished processing before creating your portfolio to
+            ensure they are included.
+          </p>
+        </div>
+      </div>
+      <ol class="border-t border-amber-200">
+        @for (task of tasksStillProcessing; track task) {
+          <li class="flex items-center justify-between gap-3 py-3">
+            <div class="text-sm text-amber-950">
+              {{ task.definition.abbreviation }} &mdash; {{ task.definition.name }}
+            </div>
+            <div class="shrink-0">
+              <mat-progress-spinner diameter="20" mode="indeterminate"></mat-progress-spinner>
+            </div>
+          </li>
+        }
+      </ol>
+      <p class="mt-4 px-4 py-3 text-center text-sm text-amber-800">
+        This list will automatically refresh as tasks finish processing.
+      </p>
+    </div>
+  }
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.scss b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.ts b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.ts
new file mode 100644
index 0000000000..3be9d74844
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-included-tasks/portfolio-included-tasks.component.ts
@@ -0,0 +1,111 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import {Subscription, interval} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-portfolio-included-tasks',
+  templateUrl: 'portfolio-included-tasks.component.html',
+  styleUrls: ['portfolio-included-tasks.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfolioIncludedTasksComponent implements OnInit, OnDestroy {
+  @Input() project: Project;
+  @Output() canCreatePortfolioChange: EventEmitter<boolean> = new EventEmitter();
+
+  constructor(private alertService: AlertService) {}
+
+  loadingIncludedTasks: boolean = false;
+  loadingProcessingTasks: boolean = false;
+  hasTasksStillProcessing: boolean = false;
+
+  tasksInPortfolio: Task[] = [];
+  tasksStillProcessing: Task[] = [];
+
+  private processingTasksPoll?: Subscription;
+
+  ngOnInit() {
+    this.getTasksIncludedInPortfolio();
+    this.getProcessingTasks();
+  }
+
+  ngOnDestroy(): void {
+    this.processingTasksPoll?.unsubscribe();
+  }
+
+  public getTasksIncludedInPortfolio() {
+    this.loadingIncludedTasks = true;
+    this.canCreatePortfolioChange.emit(false);
+    this.project.getTasksIncludedInPortfolio().subscribe({
+      next: (tasks) => {
+        this.tasksInPortfolio = this.getProjectTasks(tasks);
+
+        this.loadingIncludedTasks = false;
+        this.updateCanCreatePortfolio();
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to get tasks for portfolio: ${error}`, 6000);
+      },
+    });
+  }
+
+  public getProcessingTasks(refreshIncludedTasksOnCountChange: boolean = false) {
+    this.loadingProcessingTasks = true;
+    this.canCreatePortfolioChange.emit(false);
+    this.project.getTasksStillProcessing().subscribe({
+      next: (tasks) => {
+        const processingTaskCountChanged = tasks.length !== this.tasksStillProcessing.length;
+
+        this.hasTasksStillProcessing = tasks.length > 0;
+        this.tasksStillProcessing = this.getProjectTasks(tasks);
+
+        if (refreshIncludedTasksOnCountChange && processingTaskCountChanged) {
+          this.getTasksIncludedInPortfolio();
+        }
+
+        this.updateProcessingTasksPoll();
+        this.loadingProcessingTasks = false;
+        this.updateCanCreatePortfolio();
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to get tasks for portfolio: ${error}`, 6000);
+      },
+    });
+  }
+
+  private getProjectTasks(taskIds: number[]): Task[] {
+    return taskIds
+      .map((taskId) => this.project.tasks.find((task) => task.id === taskId))
+      .filter((task): task is Task => task !== undefined);
+  }
+
+  private updateProcessingTasksPoll(): void {
+    if (this.hasTasksStillProcessing && !this.processingTasksPoll) {
+      this.processingTasksPoll = interval(30_000).subscribe(() => {
+        this.getProcessingTasks(true);
+      });
+      return;
+    }
+
+    if (!this.hasTasksStillProcessing) {
+      this.processingTasksPoll?.unsubscribe();
+      this.processingTasksPoll = undefined;
+    }
+  }
+
+  private updateCanCreatePortfolio(): void {
+    this.canCreatePortfolioChange.emit(
+      !this.loadingIncludedTasks && !this.loadingProcessingTasks && !this.hasTasksStillProcessing,
+    );
+  }
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee
deleted file mode 100644
index 4c8ca4ac9d..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee
+++ /dev/null
@@ -1,49 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio.directives.portfolio-review-step', [])
-
-#
-# Step for students to view their portfolio and optionally delete it
-#
-.directive('portfolioReviewStep', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html'
-  controller: ($scope, alertService, newProjectService, DoubtfireConstants, ConfirmationModal, fileDownloaderService) ->
-
-    # Get the confugurable, external name of Doubtfire
-    $scope.externalName = DoubtfireConstants.ExternalName
-
-    # Watch when portfolio value is changed to reassess
-    $scope.$watch 'project.portfolioAvailable', ->
-      $scope.hasLSR = $scope.projectHasLearningSummaryReport()
-      $scope.hasTasksSelected = $scope.selectedTasks().length > 0
-      $scope.portfolioIsCompiling = $scope.project.compilePortfolio
-      $scope.canCompilePortfolio = (not $scope.portfolioIsCompiling) and $scope.hasTasksSelected and $scope.hasLSR and not $scope.project.portfolioAvailable
-
-    #
-    # Compile portfolio
-    #
-    $scope.toggleCompileProject = ->
-      $scope.project.compilePortfolio = not $scope.project.compilePortfolio
-
-      newProjectService.update($scope.project).subscribe(
-        (response) ->
-          $scope.portfolioIsCompiling = true
-          $scope.canCompilePortfolio  = false
-          $scope.project.portfolioStatus = 0.5
-      )
-    #
-    # PDF Local Funcs
-    #
-    $scope.deletePortfolio = ->
-      doDelete = ->
-        $scope.project.deletePortfolio().subscribe(       (response) ->
-          $scope.project.portfolioAvailable = false
-          $scope.project.portfolioStatus = 0
-          alertService.message( "Portfolio has been deleted!", 5000)
-        )
-      ConfirmationModal.show("Delete Portfolio?", 'Are you sure you want to delete your portfolio? You will need to recreate your porfolio again if you do so.', doDelete)
-
-    # Download the pdf
-    $scope.downloadPortfolio = ->
-      fileDownloaderService.downloadFile($scope.project.portfolioUrl(true), "#{$scope.project.student.username}-portfolio.pdf")
-)
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.html b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.html
new file mode 100644
index 0000000000..889d52931e
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.html
@@ -0,0 +1,160 @@
+<mat-card appearance="outlined" class="mx-auto max-w-[1100px]">
+  <mat-card-header>
+    <mat-card-title>Review Portfolio</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content class="p-3 px-12">
+    @if (!hasLearningSummaryReport || !hasTasksSelected) {
+      <mat-card appearance="outlined" class="p-1">
+        <mat-card-header class="bg-red-500 text-white">
+          <mat-card-title class="flex items-center gap-1">
+            <mat-icon>warning</mat-icon>
+            There are issues with your portfolio
+          </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          @if (!hasLearningSummaryReport) {
+            <p class="py-2">
+              Your portfolio <strong>must</strong> include a learning summary report. Upload this
+              before you schedule your portfolio to be compiled.
+            </p>
+          }
+
+          @if (!hasTasksSelected) {
+            @if (unitHasILOs) {
+              <p class="py-2">
+                Your portfolio <strong>must</strong> include tasks aligned to the unit's
+                <strong>{{ unit?.ilos?.length }} intended learning outcomes</strong>. Please
+                indicate which tasks you think align to the unit's learning outcomes before you
+                schedule your portfolio to be compiled.
+              </p>
+            } @else {
+              <p class="py-2">
+                Your portfolio <strong>must</strong> include tasks that you have completed this
+                teaching period. Please indicate which tasks you would like to include in your
+                portfolio before you schedule your portfolio to be compiled.
+              </p>
+            }
+          }
+        </mat-card-content>
+      </mat-card>
+    }
+
+    @if (portfolioIsCompiling) {
+      <mat-card appearance="outlined" class="mx-auto max-w-5xl p-1">
+        <mat-card-header>
+          <mat-card-title>Portfolio Processing</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <p class="py-2">
+            Your portfolio compilation is scheduled with {{ externalName }}. This process will take
+            some time, check back soon to see if your portfolio is available.
+          </p>
+        </mat-card-content>
+      </mat-card>
+    }
+
+    @if (canCompilePortfolio) {
+      <p>
+        {{ externalName }} will create your portfolio once you are happy with your submissions so
+        far.
+      </p>
+
+      @if (extraFiles.length > 0) {
+        <p>
+          You have attached
+          <strong>{{ extraFiles.length }} extra file{{ extraFiles.length > 1 ? 's' : '' }}</strong>
+          to your portfolio. You may add more files or remove
+          {{ extraFiles.length > 1 ? 'these' : 'this' }}
+          file{{ extraFiles.length > 1 ? 's' : '' }} in the previous step.
+        </p>
+
+        <ol class="list-inside list-decimal space-y-1 pb-2">
+          @for (file of extraFiles; track file) {
+            <li class="flex items-center gap-1">
+              <mat-icon>{{ getIcon(file.kind) }}</mat-icon>
+              {{ file.name }}
+            </li>
+          }
+        </ol>
+      }
+
+      <p>
+        Only submitted tasks will be included in your portfolio. If a task is missing from the list,
+        ensure that you have submitted it before compiling your portfolio. All feedback and comments
+        for each task will appear in the final portfolio, so you can add any additional comments now
+        if there's something you'd like to address.
+      </p>
+
+      <p>The following tasks will be included automatically in this order:</p>
+      <f-portfolio-included-tasks
+        [project]="project"
+        (canCreatePortfolioChange)="canCreatePortfolio = $event"
+      ></f-portfolio-included-tasks>
+
+      <mat-card appearance="outlined" class="p-1">
+        <mat-card-header>
+          <mat-card-title>Create Your Portfolio</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <p class="py-2">
+            Once you click Create Portfolio, the construction of your portfolio will be scheduled
+            with {{ externalName }}. This process will take some time, and you will be emailed when
+            your portfolio is ready to review if you have enabled portfolio notifications.
+          </p>
+          <p>
+            <strong>
+              If you would like to make any further changes after you have created your portfolio,
+              you will need to delete and recreate your portfolio.
+            </strong>
+          </p>
+        </mat-card-content>
+        <mat-card-actions class="">
+          <button
+            class="m-3 mx-auto w-full max-w-4xl"
+            color="primary"
+            mat-raised-button
+            [disabled]="!canCreatePortfolio"
+            (click)="createPortfolio()"
+          >
+            <mat-icon>menu_book</mat-icon>
+            Create My Portfolio
+          </button>
+        </mat-card-actions>
+      </mat-card>
+    }
+
+    @if (project?.portfolioAvailable) {
+      <mat-card appearance="outlined" class="p-1">
+        <mat-card-header>
+          <mat-card-title>Download Portfolio</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <p class="py-1">
+            <strong>You're done!</strong> There's nothing left for you to do. Your portfolio has
+            been submitted.
+          </p>
+          <p class="py-1">
+            This is the <strong>exact same document</strong> your assessor will see.
+          </p>
+          <p class="py-1">
+            If you need to update any tasks or upload additional files, delete your portfolio and
+            compile it again before the submission deadline.
+          </p>
+        </mat-card-content>
+        <mat-card-actions class="flex gap-2 py-3">
+          <button class="text-white" color="warn" mat-raised-button (click)="deletePortfolio()">
+            Delete Portfolio
+          </button>
+          <button color="primary" mat-raised-button (click)="downloadPortfolio()">
+            Download Portfolio
+          </button>
+        </mat-card-actions>
+      </mat-card>
+    }
+  </mat-card-content>
+
+  <mat-card-footer class="flex w-full justify-start p-3">
+    <button mat-raised-button (click)="goBack()">Back</button>
+  </mat-card-footer>
+</mat-card>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.scss b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.ts b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.ts
new file mode 100644
index 0000000000..865e9449c0
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.ts
@@ -0,0 +1,137 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {Project} from 'src/app/api/models/project';
+import {Task} from 'src/app/api/models/task';
+import {Unit} from 'src/app/api/models/unit';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+@Component({
+  selector: 'f-portfolio-review-step',
+  templateUrl: 'portfolio-review-step.component.html',
+  styleUrls: ['portfolio-review-step.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfolioReviewStepComponent implements OnInit {
+  @Input() project: Project;
+  @Input() unit: Unit;
+  @Input() onAdvanceActiveTab?: (index: 1 | -1) => void;
+
+  public externalName: string = 'OnTrack';
+  public canCreatePortfolio: boolean = false;
+
+  public readonly icons: Record<string, string> = {
+    document: 'article_outlined',
+    code: 'integration_instructions_outlined',
+    image: 'image_outlined',
+    zip: 'zip_outlined',
+  };
+
+  constructor(
+    private constants: DoubtfireConstants,
+    private projectService: ProjectService,
+    private taskService: TaskService,
+    private alertService: AlertService,
+    private confirmationModal: ConfirmationModalService,
+    private fileDownloaderService: FileDownloaderService,
+  ) {}
+
+  ngOnInit(): void {
+    this.constants.ExternalName.subscribe((name) => {
+      this.externalName = name;
+    });
+  }
+
+  public get hasLearningSummaryReport(): boolean {
+    return (this.project?.portfolioFiles ?? []).some((file) => file.idx === 0);
+  }
+
+  public get hasTasksSelected(): boolean {
+    return this.selectedTasks.length > 0;
+  }
+
+  public get portfolioIsCompiling(): boolean {
+    return Boolean(this.project?.compilePortfolio);
+  }
+
+  public get canCompilePortfolio(): boolean {
+    return (
+      !this.portfolioIsCompiling &&
+      this.hasTasksSelected &&
+      this.hasLearningSummaryReport &&
+      !this.project?.portfolioAvailable
+    );
+  }
+
+  public get unitHasILOs(): boolean {
+    return (this.unit?.ilos?.length ?? 0) > 0;
+  }
+
+  public get extraFiles(): {kind: string; name: string; idx: number}[] {
+    return (this.project?.portfolioFiles ?? []).filter((file) => file.idx !== 0);
+  }
+
+  public get selectedTasks(): Task[] {
+    const toBeWorkedOn = this.taskService?.toBeWorkedOn ?? [];
+    return [...(this.project?.tasks ?? [])]
+      .filter((task) => !toBeWorkedOn.includes(task.status))
+      .sort((a, b) => a.definition.seq - b.definition.seq);
+  }
+
+  public getIcon(kind: string): string {
+    return this.icons[kind] ?? 'insert_drive_file';
+  }
+
+  public createPortfolio(): void {
+    this.project.compilePortfolio = !this.project.compilePortfolio;
+
+    this.projectService.update(this.project).subscribe({
+      next: () => {
+        this.project.compilePortfolio = true;
+        this.project.portfolioStatus = 0.5;
+      },
+      error: (error) => {
+        this.project.compilePortfolio = false;
+        this.alertService.error(`Could not create portfolio: ${error}`, 6000);
+      },
+    });
+  }
+
+  public deletePortfolio(): void {
+    this.confirmationModal.show(
+      'Delete Portfolio?',
+      'Are you sure you want to delete your portfolio? You will need to recreate your portfolio again if you do so.',
+      () => {
+        this.project.deletePortfolio().subscribe({
+          next: () => {
+            this.project.portfolioAvailable = false;
+            this.project.portfolioStatus = 0;
+            this.alertService.message('Portfolio has been deleted!', 5000);
+          },
+          error: (error) => {
+            this.alertService.error(`Could not delete portfolio: ${error}`, 6000);
+          },
+        });
+      },
+    );
+  }
+
+  public downloadPortfolio(): void {
+    const username = this.project?.student?.username ?? 'student';
+    this.fileDownloaderService.downloadFile(
+      this.project.portfolioUrl(true),
+      `${username}-portfolio.pdf`,
+    );
+  }
+
+  goBack() {
+    if (this.onAdvanceActiveTab) {
+      this.onAdvanceActiveTab(-1);
+      return;
+    }
+  }
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.scss b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.scss
deleted file mode 100644
index 1a35a9a0c3..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.project-portfolio-wizard .panel-body .portfolio-review-step {
-  &.expanded {
-    // override with !important to override mixins in project-portfolio-wizard.scss
-    margin: 0 auto !important;
-    width: 100% !important;
-    float: none !important;
-    padding: 0 !important;
-  }
-
-  .pdf-viewer-panel {
-    border-top: 1px solid $brand-primary;
-    border-bottom: 1px solid $brand-primary;
-    margin-top: 2em;
-  }
-
-  .portfolio-tool-buttons {
-    margin-top: 2em;
-  }
-}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html
deleted file mode 100644
index ba23ed6f53..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">{{activeTab.title}}</h3>
-  </div>
-  <div class="panel-body">
-    <div class="card card-danger" ng-hide="hasLSR && hasTasksSelected">
-      <div class="card-heading">
-        <h4><i class="fa fa-warning"></i> There are issues with your portfolio</h4>
-      </div>
-      <div class="card-body">
-        <p ng-hide="hasLSR">
-          Your portfolio <strong>must</strong> include a learning summary report. Upload this before you schedule your
-          portfolio to be compiled.
-        </p>
-        <p ng-hide="hasTasksSelected"></p>
-        <p ng-show="unitHasILOs">
-          Your portfolio <strong>must</strong> include tasks aligned to the unit's
-          <strong>{{unit.ilos.length}} intended learning outcomes</strong>. Please indicate which tasks you think align
-          to the unit's learning outcomes before you schedule your portfolio to be compiled.
-        </p>
-        <p ng-hide="unitHasILOs">
-          Your portfolio <strong>must</strong> include tasks that you have completed this teaching period. Please
-          indicate which tasks you you would like to include in your portfolio before you schedule your portfolio to be
-          compiled.
-        </p>
-      </div>
-    </div>
-    <!--/warnings-->
-    <div class="card card-default" ng-show="portfolioIsCompiling">
-      <div class="card-heading">
-        <h4>Portfolio Processing</h4>
-      </div>
-      <div class="card-body">
-        <p>
-          Your portfolio compilation is scheduled with {{externalName.value}}. This process will take some time, check
-          back soon to see if your portfolio is available.
-        </p>
-      </div>
-    </div>
-    <!--/processing-->
-    <div ng-show="canCompilePortfolio">
-      <p>{{externalName.value}} will create your portfolio once you are happy with your submissions so far.</p>
-      <div ng-show="extraFiles().length > 0">
-        <p>
-          You have attached <strong>{{extraFiles().length}} extra file{{extraFiles().length > 1 ? 's' : ''}}</strong>
-          to your portfolio. You may add more files or remove {{extraFiles().length > 1 ? 'these' : 'this'}}
-          file{{extraFiles().length > 1 ? 's' : ''}} in the previous step. Each file is listed in order of attachment
-          below:
-        </p>
-        <ol>
-          <li ng-repeat="file in extraFiles()"><i class="fa fa-file-{{file.kind}}-o"></i> {{file.name}}</li>
-        </ol>
-      </div>
-      <div ng-show="selectedTasks().length > 0">
-        <p>
-          You have included <strong>{{selectedTasks().length}} tasks</strong> in your portfolio. If you wish to add or
-          remove some of these tasks, please review the <em>Select Tasks</em> step to adjust your alignments of each
-          task to the unit's learning outcomes. Each task will be attached in the order below:
-        </p>
-        <ol>
-          <li ng-repeat="task in selectedTasks()">
-            <label class="label label-info">{{task.definition.abbreviation}}</label>
-            {{task.definition.name}}
-          </li>
-        </ol>
-      </div>
-    </div>
-    <div class="card card-default" ng-show="canCompilePortfolio">
-      <div class="card-heading">
-        <h4>Create Your Portfolio</h4>
-      </div>
-      <div class="card-body">
-        <p>
-          Once you click Create Portfolio, the construction of your portfolio will be scheduled with
-          {{externalName.value}}. This process will take some time, and you will be emailed when your portfolio is ready
-          to review if you have enabled portfolio notifications.
-        </p>
-        <p class="strong">
-          If you would like to make any further changes after you have created your portfolio, you will need to delete
-          and recreate your portfolio.
-        </p>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-success form-control" ng-click="toggleCompileProject()">
-          <i class="fa fa-book"></i> Create My Portfolio
-        </button>
-      </div>
-    </div>
-    <!--/create-portfolio-->
-    <div class="card card-default" ng-show="project.portfolioAvailable">
-      <div class="card-heading">
-        <h4>Download Portfolio</h4>
-      </div>
-      <div class="card-body">This is the <strong>exact same document</strong> your assessor will see</div>
-      <div class="card-footer">
-        <button class="btn btn-danger" ng-click="deletePortfolio()">
-          <i class="fa fa-trash-o"></i> Delete Portfolio
-        </button>
-        <button class="btn btn-success" ng-click="downloadPortfolio()">
-          <i class="fa fa-download"></i> Download Portfolio
-        </button>
-      </div>
-    </div>
-  </div>
-  <div class="panel-footer clearfix">
-    <button class="btn btn-primary pull-left" ng-click="advanceActiveTab(-1)">
-      <i class="fa fa-arrow-left"></i> Back
-    </button>
-  </div>
-</div>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.coffee b/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.coffee
deleted file mode 100644
index a3fd83fed1..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.coffee
+++ /dev/null
@@ -1,14 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio.directives.portfolio-tasks-step', [])
-
-#
-# Allows students to select which tasks they have completed can
-# be included in their portfolio
-#
-.directive('portfolioTasksStep', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.tpl.html'
-  controller: ($scope) ->
-    $scope.noTasksSelected = ->
-      $scope.selectedTasks().length is 0
-)
diff --git a/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.scss b/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.scss
deleted file mode 100644
index 0195fe8ba4..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.project-portfolio-wizard .panel-body .portfolio-tasks-step {
-  // override with !important to override mixins in project-portfolio-wizard.scss
-  margin: 0 auto !important;
-  width: 90% !important;
-  float: none !important;
-}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.tpl.html
deleted file mode 100644
index 1b4267f5cd..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.tpl.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="panel panel-default">
-  <div class="panel-heading" ng-show="unitHasILOs">
-    <h3 class="panel-title"> Relate ILOs to Tasks </h3>
-  </div>
-  <div class="panel-heading" ng-hide="unitHasILOs">
-    <h3 class="panel-title"> Select tasks to include </h3>
-  </div>
-  <div class="panel-body">
-    <p ng-show="unitHasILOs">
-      For each task, please indicate whether you think this task is related to one
-      or more of the unit's <strong>{{unit.ilos.length}} learning outcomes</strong>.
-      You may provide a rationale for each task selected, which will be noted in
-      your portfolio.
-    </p>
-    <p ng-hide="unitHasILOs">
-      Please indicate which tasks you would like to include in your portfolio.
-    </p>
-  </div>
-  <task-ilo-alignment-editor
-    unit="unit"
-    class="card-body"
-    project="project"
-    hide-panel="true"
-    hide-graph="true"
-    show-include-tasks="true"></task-ilo-alignment-editor>
-  <div class="panel-footer clearfix">
-    <button class="btn btn-primary pull-left" ng-click="advanceActiveTab(-1)"><i class="fa fa-arrow-left"></i> Back</button>
-    <button class="btn btn-primary pull-right" ng-disabled="noTasksSelected()" ng-click="advanceActiveTab(1)">Next <i class="fa fa-arrow-right"></i></button>
-    <div class="help-block pull-right col-sm-4" ng-show="noTasksSelected()">
-      You need to select at least one task {{unitHasILOs ? 'that is aligned to an ILO above' : 'above'}}, otherwise your portfolio will be consist of no tasks.
-    </div>
-  </div>
-</div>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.coffee b/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.coffee
deleted file mode 100644
index c34f31b354..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.coffee
+++ /dev/null
@@ -1,10 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio.directives.portfolio-welcome-step', [])
-
-#
-# Welcome introductory step
-#
-.directive('portfolioWelcomeStep', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.tpl.html'
-)
diff --git a/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.html b/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.html
new file mode 100644
index 0000000000..26ec79f3a3
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.html
@@ -0,0 +1,23 @@
+<mat-card appearance="outlined" class="mx-auto max-w-[1100px]">
+  <mat-card-header>
+    <mat-card-title>Portfolio Preparation</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <p>Preparing your portfolio involves 5 steps:</p>
+    <ol class="ml-2.5 list-inside list-decimal space-y-1 py-3">
+      <li>Select your <strong>Grade</strong> you are applying for</li>
+      <li>Upload your <strong>Learning Summary Report</strong></li>
+      <li>Upload any <strong>Other Resources</strong> you want to add</li>
+      <li><strong>Compile</strong> your resources into your portfolio and review</li>
+    </ol>
+    <p>
+      Once you have completed all of these steps, your portfolio will be prepared by
+      {{ externalName }} and you will be notified when it is ready. You can then check your work,
+      and if you want to make any corrections repeat these steps to create a new version of your
+      portfolio.
+    </p>
+  </mat-card-content>
+  <mat-card-footer class="flex w-full justify-end p-3">
+    <button color="primary" mat-raised-button (click)="goNextStep()">Next</button>
+  </mat-card-footer>
+</mat-card>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.scss b/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.ts b/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.ts
new file mode 100644
index 0000000000..e2c9bda66c
--- /dev/null
+++ b/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.ts
@@ -0,0 +1,30 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+@Component({
+  selector: 'f-portfolio-welcome-step',
+  templateUrl: 'portfolio-welcome-step.component.html',
+  styleUrls: ['portfolio-welcome-step.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfolioWelcomeStepComponent implements OnInit {
+  @Input() onAdvanceActiveTab?: (index: 1 | -1) => void;
+
+  public externalName: string = 'OnTrack';
+
+  constructor(private constants: DoubtfireConstants) {}
+
+  ngOnInit(): void {
+    this.constants.ExternalName.subscribe((name) => {
+      this.externalName = name;
+    });
+  }
+
+  goNextStep() {
+    if (this.onAdvanceActiveTab) {
+      this.onAdvanceActiveTab(1);
+      return;
+    }
+  }
+}
diff --git a/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.tpl.html
deleted file mode 100644
index 524101329b..0000000000
--- a/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.tpl.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Portfolio Preparation</h3>
-  </div>
-  <div class="panel-body">
-    <p>Preparing your portfolio involves 5 steps:</p>
-    <ol>
-      <li>Select your <strong>Grade</strong> you are applying for</li>
-      <li>Upload your <strong>Learning Summary Report</strong></li>
-      <li>Select the <strong>Tasks</strong> you want included</li>
-      <li>Upload any <strong>Other Resources</strong> you want to add</li>
-      <li><strong>Compile</strong> your resources into your portfolio and review</li>
-    </ol>
-    <p>
-      Once you have completed all of these steps, your portfolio will be prepared by {{externalName.value}} and you will be notified when it is ready. You can then check your work, and if you want to make any corrections repeat these steps to create a new version of your portfolio.
-    </p>
-  </div><!--/welcome-step-->
-  <div class="panel-footer clearfix">
-    <button class="btn btn-primary pull-right" ng-click="advanceActiveTab(1)">Next <i class="fa fa-arrow-right"></i></button>
-  </div>
-</div>
diff --git a/src/app/projects/states/portfolio/portfolio-state.component.html b/src/app/projects/states/portfolio/portfolio-state.component.html
new file mode 100644
index 0000000000..e464e313b9
--- /dev/null
+++ b/src/app/projects/states/portfolio/portfolio-state.component.html
@@ -0,0 +1,49 @@
+@if (project) {
+  <div class="w-full" id="portfolio-state">
+    <mat-tab-group
+      class="mb-3"
+      [dynamicHeight]="true"
+      [selectedIndex]="selectedTabIndex"
+      (selectedIndexChange)="onSelectedTabIndexChange($event)"
+    >
+      @for (tab of orderedTabs; track tab.seq) {
+        <mat-tab
+          [disabled]="isTabDisabled(tab)"
+          [label]="'Step ' + tab.seq + ': ' + tab.title"
+        ></mat-tab>
+      }
+    </mat-tab-group>
+    @if (activeTab === tabs.welcomeStep) {
+      <f-portfolio-welcome-step
+        [onAdvanceActiveTab]="advanceActiveTab.bind(this)"
+      ></f-portfolio-welcome-step>
+    }
+    @if (activeTab === tabs.gradeStep) {
+      <f-portfolio-grade-select-step
+        [onAdvanceActiveTab]="advanceActiveTab.bind(this)"
+        [project]="project"
+        [unit]="project.unit"
+      ></f-portfolio-grade-select-step>
+    }
+    @if (activeTab === tabs.summaryStep) {
+      <f-portfolio-learning-summary-report-step
+        [onAdvanceActiveTab]="advanceActiveTab.bind(this)"
+        [project]="project"
+        [unit]="project.unit"
+      ></f-portfolio-learning-summary-report-step>
+    }
+    @if (activeTab === tabs.otherFilesStep) {
+      <f-portfolio-add-extra-files-step
+        [onAdvanceActiveTab]="advanceActiveTab.bind(this)"
+        [project]="project"
+      ></f-portfolio-add-extra-files-step>
+    }
+    @if (activeTab === tabs.reviewStep) {
+      <f-portfolio-review-step
+        [onAdvanceActiveTab]="advanceActiveTab.bind(this)"
+        [project]="project"
+        [unit]="project.unit"
+      ></f-portfolio-review-step>
+    }
+  </div>
+}
diff --git a/src/app/projects/states/portfolio/portfolio-state.component.scss b/src/app/projects/states/portfolio/portfolio-state.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/portfolio/portfolio-state.component.ts b/src/app/projects/states/portfolio/portfolio-state.component.ts
new file mode 100644
index 0000000000..e96f5d2eec
--- /dev/null
+++ b/src/app/projects/states/portfolio/portfolio-state.component.ts
@@ -0,0 +1,175 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, Subscription, of} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {GlobalStateService} from '../index/global-state.service';
+
+interface PortfolioStepTab {
+  title: string;
+  seq: number;
+  active?: boolean;
+}
+
+@Component({
+  selector: 'f-portfolio-state',
+  templateUrl: './portfolio-state.component.html',
+  styleUrls: ['./portfolio-state.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfolioStateComponent implements OnInit, OnDestroy {
+  @Input() public project$: Observable<Project>;
+
+  public project: Project;
+
+  public readonly tabs: {
+    welcomeStep: PortfolioStepTab;
+    gradeStep: PortfolioStepTab;
+    summaryStep: PortfolioStepTab;
+    otherFilesStep: PortfolioStepTab;
+    reviewStep: PortfolioStepTab;
+  } = {
+    welcomeStep: {
+      title: 'Portfolio Preparation',
+      seq: 1,
+    },
+    gradeStep: {
+      title: 'Select Grade',
+      seq: 2,
+    },
+    summaryStep: {
+      title: 'Learning Summary Report',
+      seq: 3,
+    },
+    otherFilesStep: {
+      title: 'Upload Other Files',
+      seq: 4,
+    },
+    reviewStep: {
+      title: 'Review Portfolio',
+      seq: 5,
+    },
+  };
+
+  public readonly orderedTabs = Object.values(this.tabs).sort((a, b) => a.seq - b.seq);
+  public activeTab: PortfolioStepTab = this.tabs.welcomeStep;
+
+  private projectSub?: Subscription;
+
+  constructor(
+    private globalStateService: GlobalStateService,
+    private route: ActivatedRoute,
+  ) {}
+
+  public get selectedTabIndex(): number {
+    return Math.max(0, (this.activeTab?.seq ?? 1) - 1);
+  }
+
+  public get hasSubmittedGrade(): boolean {
+    return this.project?.submittedGrade !== null && this.project?.submittedGrade !== undefined;
+  }
+
+  public get hasLearningSummaryReport(): boolean {
+    return (
+      Boolean(this.project?.usesDraftLearningSummary) ||
+      (this.project?.portfolioFiles ?? []).some((file) => file.idx === 0)
+    );
+  }
+
+  ngOnInit(): void {
+    this.project$ = this.project$ ?? of(this.route.parent?.snapshot.data.project as Project);
+
+    this.projectSub = this.project$?.subscribe((project) => {
+      if (!project) {
+        return;
+      }
+
+      this.project = project;
+      this.setInitialActiveTab();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.projectSub?.unsubscribe();
+  }
+
+  public onSelectedTabIndexChange(index: number): void {
+    const targetTab = this.orderedTabs[index];
+    if (!targetTab || this.isTabDisabled(targetTab)) {
+      return;
+    }
+
+    this.setActiveTab(targetTab);
+  }
+
+  public isTabDisabled(tab: PortfolioStepTab): boolean {
+    if (!tab || !this.project) {
+      return true;
+    }
+
+    // Keep the current tab selectable even when other steps are locked.
+    if (tab.seq === this.activeTab?.seq) {
+      return false;
+    }
+
+    // Portfolio is compiling or ready; review step only.
+    if (this.project.portfolioAvailable || this.project.compilePortfolio) {
+      return tab.seq !== this.tabs.reviewStep.seq;
+    }
+
+    // No submitted grade: allow steps 1-2.
+    if (!this.hasSubmittedGrade) {
+      return tab.seq > this.tabs.gradeStep.seq;
+    }
+
+    // No learning summary report: allow steps 1-3.
+    if (!this.hasLearningSummaryReport) {
+      return tab.seq > this.tabs.summaryStep.seq;
+    }
+
+    // Once grade + learning summary requirements are met, allow review before compilation.
+    return false;
+  }
+
+  public setActiveTab(tab: PortfolioStepTab): void {
+    if (!tab) {
+      return;
+    }
+
+    if (this.activeTab === tab) {
+      return;
+    }
+
+    this.activeTab = tab;
+    this.orderedTabs.forEach((currentTab) => {
+      currentTab.active = currentTab === tab;
+    });
+  }
+
+  public advanceActiveTab(advanceBy: 1 | -1): void {
+    const newSeq = (this.activeTab?.seq ?? 1) + advanceBy;
+    const nextTab = this.orderedTabs.find((tab) => tab.seq === newSeq);
+
+    if (nextTab) {
+      this.setActiveTab(nextTab);
+    }
+  }
+
+  private projectHasLearningSummaryReportFile(): boolean {
+    return (this.project?.portfolioFiles ?? []).some((file) => file.idx === 0);
+  }
+
+  private setInitialActiveTab(): void {
+    if (this.project.portfolioAvailable || this.project.compilePortfolio) {
+      this.setActiveTab(this.tabs.reviewStep);
+    } else if (!this.hasSubmittedGrade) {
+      this.setActiveTab(this.tabs.welcomeStep);
+    } else if (this.project.usesDraftLearningSummary) {
+      this.setActiveTab(this.tabs.summaryStep);
+    } else if (this.projectHasLearningSummaryReportFile()) {
+      this.setActiveTab(this.tabs.otherFilesStep);
+    } else {
+      this.setActiveTab(this.tabs.welcomeStep);
+    }
+  }
+}
diff --git a/src/app/projects/states/portfolio/portfolio.coffee b/src/app/projects/states/portfolio/portfolio.coffee
deleted file mode 100644
index 4257ab1757..0000000000
--- a/src/app/projects/states/portfolio/portfolio.coffee
+++ /dev/null
@@ -1,117 +0,0 @@
-angular.module('doubtfire.projects.states.portfolio', [
-  'doubtfire.projects.states.portfolio.directives'
-])
-
-#
-# Tasks state for projects
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'projects/portfolio', {
-    parent: 'projects/index'
-    url: '/portfolio'
-    controller: 'ProjectsPortfolioStateCtrl'
-    templateUrl: 'projects/states/portfolio/portfolio.tpl.html'
-    data:
-      task: "Portfolio Creation"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
-   }
-)
-
-.controller("ProjectsPortfolioStateCtrl", ($scope, alertService, DoubtfireConstants, newTaskService, gradeService, analyticsService) ->
-  #
-  # Active task tab group
-  #
-  $scope.tabs =
-    welcomeStep:
-      title: "Portfolio Preparation"
-      seq: 1
-    gradeStep:
-      title: "Select Grade"
-      seq: 2
-    summaryStep:
-      title: "Learning Summary Report"
-      seq: 3
-    taskStep:
-      title: "Select Tasks"
-      seq: 4
-    otherFilesStep:
-      title: "Upload Other Files"
-      seq: 5
-    reviewStep:
-      title: "Review Portfolio"
-      seq: 6
-  $scope.setActiveTab = (tab) ->
-    $scope.activeTab = tab
-    $scope.activeTab.active = true
-    analyticsService.event 'Portfolio Wizard', 'Switched to Step', "#{tab.title} Step"
-  $scope.advanceActiveTab = (advanceBy) ->
-    newSeq = $scope.activeTab.seq + advanceBy
-    $scope.setActiveTab (tab for tabKey, tab of $scope.tabs when tab.seq is newSeq)[0]
-
-  $scope.projectHasLearningSummaryReport = ->
-    _.filter($scope.project.portfolioFiles, { idx: 0 }).length > 0
-
-  # Determine whether project is using draft learning summary
-  $scope.projectHasDraftLearningSummaryReport = $scope.project.usesDraftLearningSummary
-
-  # Called whenever a new file is added to the portfolio
-  $scope.addNewFilesToPortfolio = (newFile) ->
-    $scope.project.portfolioFiles.push newFile
-
-  # Delete file from the portfolio
-  $scope.deleteFileFromPortfolio = (file) ->
-    $scope.project.deleteFileFromPortfolio(file).subscribe({
-      next: (response) ->
-        alertService.success( "File removed.", 2000)
-        $scope.project.portfolioFiles.splice
-      error: (response) ->
-        alertService.error "Error removing file - #{response}"
-    })
-
-  # Update targetGrade value on change
-  $scope.$watch 'project.targetGrade', (newValue) ->
-    $scope.targetGrade = gradeService.grades[newValue]
-
-  # Get the confugurable, external name of Doubtfire
-  $scope.externalName = DoubtfireConstants.ExternalName
-
-  # Get only extra files submitted
-  $scope.extraFiles = ->
-    _.filter $scope.project.portfolioFiles, (f) ->
-      # when f.idx is 0 it's the LSR
-      f.idx isnt 0
-
-  # Gets whether the unit has ilos
-  $scope.unitHasILOs = $scope.unit.ilos.length > 0
-
-  # Gets selected tasks in the task selector
-  $scope.selectedTasks = ->
-    if $scope.unitHasILOs
-      # Filter by aligned tasks that are included
-      tasks = _.filter $scope.project.tasks, (t) ->
-        hasAlignmentsForTask = _.find($scope.project.taskOutcomeAlignments, (ta) -> ta.task.id ==  t.id )?
-        t.includeInPortfolio and hasAlignmentsForTask
-    else
-      # Filter by included in portfolio
-      tasks = _.filter $scope.project.tasks, (t) -> t.includeInPortfolio
-    tasks = _.filter tasks, (t) -> !_.includes(newTaskService.toBeWorkedOn, t.status)
-    _.sortBy tasks, (t) -> t.definition.seq
-
-  # Jump to a step
-  if $scope.project.portfolioAvailable or $scope.project.compilePortfolio
-    $scope.setActiveTab $scope.tabs.reviewStep
-  else if $scope.projectHasDraftLearningSummaryReport
-    $scope.setActiveTab $scope.tabs.summaryStep
-  else if $scope.projectHasLearningSummaryReport()
-    $scope.setActiveTab $scope.tabs.taskStep
-  else
-    $scope.setActiveTab $scope.tabs.welcomeStep
-
-  #
-  # Functions from newTaskService to get data
-  #
-  $scope.statusText = newTaskService.statusText
-  $scope.statusData = newTaskService.statusData
-  $scope.statusClass = newTaskService.statusClass
-)
diff --git a/src/app/projects/states/portfolio/portfolio.scss b/src/app/projects/states/portfolio/portfolio.scss
deleted file mode 100644
index 464a6b4838..0000000000
--- a/src/app/projects/states/portfolio/portfolio.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-#portfolio-state > .panel {
-  width: 75%;
-  margin: 0 auto;
-  .card {
-    margin-top: 1.5em;
-    margin-left: auto;
-    margin-right: auto;
-    width: 90%;
-  }
-}
diff --git a/src/app/projects/states/portfolio/portfolio.tpl.html b/src/app/projects/states/portfolio/portfolio.tpl.html
deleted file mode 100644
index 1c009b47ab..0000000000
--- a/src/app/projects/states/portfolio/portfolio.tpl.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="container" id="portfolio-state">
-  <tabset class="tabset-icon">
-    <tab ng-repeat="tab in tabs | toArray | orderBy: 'seq'" active="tab.active" disabled="true">
-      <tab-heading>
-        <strong>Step {{tab.seq}}:</strong> {{tab.title}}
-      </tab-heading>
-    </tab>
-  </tabset><!--/tabs-->
-  <portfolio-welcome-step ng-if="activeTab == tabs.welcomeStep"></portfolio-welcome-step>
-  <portfolio-grade-select-step ng-if="activeTab == tabs.gradeStep"></portfolio-grade-select-step>
-  <portfolio-learning-summary-report-step ng-if="activeTab == tabs.summaryStep"></portfolio-learning-summary-report-step>
-  <portfolio-tasks-step ng-if="activeTab == tabs.taskStep"></portfolio-tasks-step>
-  <portfolio-add-extra-files-step ng-if="activeTab == tabs.otherFilesStep"></portfolio-add-extra-files-step>
-  <portfolio-review-step ng-if="activeTab == tabs.reviewStep"></portfolio-review-step>
-</div>
diff --git a/src/app/projects/states/project-root-state.component.css b/src/app/projects/states/project-root-state.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/project-root-state.component.html b/src/app/projects/states/project-root-state.component.html
new file mode 100644
index 0000000000..795a7e5baf
--- /dev/null
+++ b/src/app/projects/states/project-root-state.component.html
@@ -0,0 +1 @@
+<router-outlet (activate)="onActivate($event)"></router-outlet>
diff --git a/src/app/projects/states/project-root-state.component.spec.ts b/src/app/projects/states/project-root-state.component.spec.ts
new file mode 100644
index 0000000000..d31cfd7740
--- /dev/null
+++ b/src/app/projects/states/project-root-state.component.spec.ts
@@ -0,0 +1,24 @@
+import {describe, expect, it} from 'vitest';
+import {ActivatedRoute, Data} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+import {Project} from 'src/app/api/models/doubtfire-model';
+import {ProjectRootStateComponent} from './project-root-state.component';
+
+describe('ProjectRootStateComponent', () => {
+  it('passes project resolver updates to a reused child route', () => {
+    const firstProject = {id: 2} as Project;
+    const secondProject = {id: 18} as Project;
+    const routeData: BehaviorSubject<Data> = new BehaviorSubject({project: firstProject});
+    const component = new ProjectRootStateComponent({
+      data: routeData.asObservable(),
+    } as ActivatedRoute);
+    const child: {project$?: typeof component.project$} = {project$: undefined};
+    const projectIds: number[] = [];
+
+    component.onActivate(child);
+    child.project$.subscribe((project) => projectIds.push(project.id));
+    routeData.next({project: secondProject});
+
+    expect(projectIds).toEqual([2, 18]);
+  });
+});
diff --git a/src/app/projects/states/project-root-state.component.ts b/src/app/projects/states/project-root-state.component.ts
new file mode 100644
index 0000000000..ce724d3ecd
--- /dev/null
+++ b/src/app/projects/states/project-root-state.component.ts
@@ -0,0 +1,55 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, Subscription, filter, map, shareReplay} from 'rxjs';
+import {Project} from 'src/app/api/models/doubtfire-model';
+
+interface ProjectRouteChild {
+  project$?: Observable<Project>;
+  taskListWidth?: number;
+  taskListWidthChange?: EventEmitter<number>;
+}
+
+@Component({
+  selector: 'f-project-root-state',
+  templateUrl: './project-root-state.component.html',
+  styleUrl: './project-root-state.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectRootStateComponent implements OnDestroy {
+  @Input() public project$: Observable<Project>;
+
+  private readonly taskListExpandedWidth = 400;
+  private taskListWidth = this.taskListExpandedWidth;
+  private taskListWidthSub?: Subscription;
+
+  constructor(private activatedRoute: ActivatedRoute) {
+    this.project$ = this.activatedRoute.data.pipe(
+      map((data) => data.project as Project),
+      filter((project): project is Project => !!project),
+      shareReplay({bufferSize: 1, refCount: true}),
+    );
+  }
+
+  onActivate(component: ProjectRouteChild): void {
+    this.taskListWidthSub?.unsubscribe();
+
+    if ('project$' in component) {
+      component.project$ = this.project$;
+    }
+
+    if ('taskListWidth' in component) {
+      component.taskListWidth = this.taskListWidth;
+    }
+
+    if (component.taskListWidthChange) {
+      this.taskListWidthSub = component.taskListWidthChange.subscribe((width) => {
+        this.taskListWidth = width;
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.taskListWidthSub?.unsubscribe();
+  }
+}
diff --git a/src/app/projects/states/staff-notes/staff-notes.component.html b/src/app/projects/states/staff-notes/staff-notes.component.html
new file mode 100644
index 0000000000..e101c8dc8f
--- /dev/null
+++ b/src/app/projects/states/staff-notes/staff-notes.component.html
@@ -0,0 +1,141 @@
+<div class="flex h-full flex-col">
+  @if (!loadingStaffNotes && project?.staffNoteCount === 0) {
+    <div class="flex size-full items-center justify-center text-gray-300">
+      No staff notes for {{ project.student.displayName }}
+    </div>
+  }
+  <div #staffNotesContainer class="flex-1 overflow-auto p-2.5">
+    @if (!loadingStaffNotes) {
+      @for (note of project?.staffNoteCache?.currentValues; track note) {
+        @if (note.replyToId) {
+          <div
+            class="flex items-center justify-between rounded-t-md border border-gray-300 p-1 text-sm select-none"
+          >
+            <div
+              class="flex items-center"
+              [ngClass]="note.replyTo && 'cursor-pointer hover:text-blue-500 hover:underline'"
+              (click)="scrollToNote(note.replyTo)"
+            >
+              <mat-icon class="mr-2">reply</mat-icon>
+              <div class="flex flex-col">
+                @if (note.replyTo) {
+                  <span class="font-medium">
+                    Replying to {{ note.replyTo.user.preferredName }}
+                    {{ note.replyTo.user.lastName }} ({{ note.replyTo.user.nickname }})
+                  </span>
+                  <span class="text-xs text-gray-600">{{ note.replyTo.note }}</span>
+                } @else {
+                  <span class="text-xs text-gray-400 italic">Replying to: Deleted note</span>
+                }
+              </div>
+            </div>
+          </div>
+        }
+        <mat-card class="note-card mb-2.5 p-3" [id]="'note-' + note.id">
+          <div class="note-actions absolute right-3 bottom-3 flex">
+            @if (note.authorIsMe) {
+              <button
+                aria-label="Edit this note"
+                class="note-action"
+                type="button"
+                (click)="editNote(note)"
+              >
+                <mat-icon>edit</mat-icon>
+              </button>
+            }
+            <button
+              aria-label="Reply to this note"
+              class="note-action"
+              type="button"
+              (click)="replyToNote(note)"
+            >
+              <mat-icon>reply</mat-icon>
+            </button>
+            <button
+              aria-label="Delete this note"
+              class="note-action"
+              type="button"
+              (click)="deleteNote(note)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+          <div class="flex justify-between">
+            <mat-card-title class="flex items-center">
+              <user-icon style="margin-right: 8px" [size]="25" [user]="note.user"></user-icon>
+              {{ note.user?.displayName }}</mat-card-title
+            >
+            <div class="flex items-center">
+              <mat-card-subtitle
+                matTooltipPosition="above"
+                matTooltipShowDelay="1000"
+                [matTooltip]="note.createdAt | localizedDateTime"
+                >{{ note.createdAt | humanizedDate }}</mat-card-subtitle
+              >
+            </div>
+          </div>
+
+          <mat-card-content class="py-2.5">
+            @if (editingNote && editingNote.id === note.id) {
+              <mat-form-field appearance="outline" class="flex w-full items-center">
+                <mat-label>Update Note</mat-label>
+                <textarea
+                  #staffNoteEditor
+                  class="w-full resize-none overflow-hidden px-1 py-0.5 placeholder:px-1 placeholder:py-0.5"
+                  matInput
+                  [(ngModel)]="editingNoteText"
+                  (input)="autoResizeStaffNoteEditor()"
+                ></textarea>
+                <div class="flex justify-end gap-1">
+                  <button color="" mat-raised-button (click)="cancelEditingNote()">Cancel</button>
+                  <button color="primary" mat-raised-button (click)="updateNote()">
+                    Update Note
+                  </button>
+                </div>
+              </mat-form-field>
+            } @else {
+              <div class="markdown-to-html" [innerHTML]="note.note | marked"></div>
+            }
+          </mat-card-content>
+        </mat-card>
+      }
+    } @else {
+      <!-- <div id="spinner">
+          <mat-spinner
+            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50"
+          ></mat-spinner>
+        </div> -->
+    }
+  </div>
+
+  <div class="h-[150px] border-t border-gray-300 p-2.5">
+    @if (replyingToNote) {
+      <div
+        class="flex items-center justify-between rounded-t-md border border-b-0 border-gray-300 p-1 text-sm select-none"
+      >
+        <div class="flex items-center">
+          <mat-icon class="mt-0.5 mr-2">reply</mat-icon>
+          <div class="flex flex-col">
+            <span class="font-medium">
+              Replying to {{ replyingToNote.user.displayName }} ({{ replyingToNote.user.nickname }})
+            </span>
+            <span class="text-xs text-gray-600">{{ replyingToNote.note }}</span>
+          </div>
+        </div>
+        <mat-icon class="cursor-pointer" (click)="cancelReplyingToNote()">close</mat-icon>
+      </div>
+    }
+
+    <mat-form-field appearance="outline" class="flex w-full items-center">
+      <mat-label>Staff Note</mat-label>
+      <textarea
+        class="w-full resize-none px-1 py-0.5 placeholder:px-1 placeholder:py-0.5"
+        matInput
+        [(ngModel)]="noteText"
+      ></textarea>
+      <div class="flex justify-end">
+        <button color="primary" mat-raised-button (click)="submitNote()">Submit</button>
+      </div>
+    </mat-form-field>
+  </div>
+</div>
diff --git a/src/app/projects/states/staff-notes/staff-notes.component.scss b/src/app/projects/states/staff-notes/staff-notes.component.scss
new file mode 100644
index 0000000000..8fd9c46e72
--- /dev/null
+++ b/src/app/projects/states/staff-notes/staff-notes.component.scss
@@ -0,0 +1,62 @@
+.mat-icon {
+  color: #9696969d;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: center;
+  margin-left: 0.3em;
+}
+
+.mat-icon:hover {
+  color: black;
+}
+
+// Edit, reply and delete are real buttons, stripped back to look the way the bare icons
+// they replaced did.
+.note-action {
+  padding: 0;
+  border: 0;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+}
+
+.note-action:focus-visible {
+  border-radius: 2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.note-action:hover .mat-icon,
+.note-action:focus-visible .mat-icon {
+  color: black;
+}
+
+// The row used to be shown by a mouseover handler writing hoveredNoteId, which no keyboard
+// user could ever set. The reveal is CSS now, so it answers to focus inside the note as
+// well as to the pointer. It has to be opacity rather than display or visibility, both of
+// which would drop the buttons out of the tab order and leave :focus-within with no way to
+// ever become true.
+.note-actions {
+  opacity: 0;
+}
+
+.note-card:hover .note-actions,
+.note-card:focus-within .note-actions {
+  opacity: 1;
+}
+
+@keyframes blueGlowFade {
+  0% {
+    background-color: rgba(66, 133, 244, 0.6);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.flash-highlight {
+  animation: blueGlowFade 1s ease-out;
+}
diff --git a/src/app/projects/states/staff-notes/staff-notes.component.spec.ts b/src/app/projects/states/staff-notes/staff-notes.component.spec.ts
new file mode 100644
index 0000000000..d0cab3f099
--- /dev/null
+++ b/src/app/projects/states/staff-notes/staff-notes.component.spec.ts
@@ -0,0 +1,124 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {EMPTY} from 'rxjs';
+import {UserService} from 'src/app/api/models/doubtfire-model';
+import {StaffNote} from 'src/app/api/models/staff-note';
+import {StaffNoteService} from 'src/app/api/services/staff-note.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {HumanizedDatePipe} from 'src/app/common/pipes/humanized-date.pipe';
+import {LocalizedDatePipe} from 'src/app/common/pipes/localized-date.pipe';
+import {MarkedPipe} from 'src/app/common/pipes/marked.pipe';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {StaffNotesComponent} from './staff-notes.component';
+
+const emptyProvider = {};
+const staffNoteServiceStub = {
+  loadStaffNotes: () => EMPTY,
+  updateStaffNoteReplies: () => undefined,
+};
+
+describe('StaffNotesComponent', () => {
+  let component: StaffNotesComponent;
+  let fixture: ComponentFixture<StaffNotesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [StaffNotesComponent, HumanizedDatePipe, LocalizedDatePipe, MarkedPipe],
+      providers: [
+        {provide: UserService, useValue: emptyProvider},
+        {provide: StaffNoteService, useValue: staffNoteServiceStub},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(StaffNotesComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StaffNotesComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+describe('StaffNotesComponent note actions', () => {
+  let component: StaffNotesComponent;
+  let fixture: ComponentFixture<StaffNotesComponent>;
+  let note: StaffNote;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [StaffNotesComponent, HumanizedDatePipe, LocalizedDatePipe, MarkedPipe],
+      providers: [
+        {provide: UserService, useValue: emptyProvider},
+        {provide: StaffNoteService, useValue: staffNoteServiceStub},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StaffNotesComponent);
+    component = fixture.componentInstance;
+    note = {id: 7, replyToId: null, note: 'a note', user: {}, authorIsMe: true} as StaffNote;
+
+    fixture.detectChanges();
+    component.loadingStaffNotes = false;
+    component.project = {
+      student: {preferredName: 'Ada', lastName: 'Lovelace', displayName: 'Ada Lovelace'},
+      staffNoteCache: {currentValues: [note]},
+    } as never;
+    fixture.detectChanges();
+  });
+
+  function card(): HTMLElement {
+    return fixture.nativeElement.querySelector('.note-card') as HTMLElement;
+  }
+
+  function editButton(): HTMLButtonElement {
+    return card().querySelector('.note-actions button') as HTMLButtonElement;
+  }
+
+  it('renders the note actions instead of gating them behind a pointer flag', () => {
+    const actions = card().querySelector('.note-actions') as HTMLElement;
+
+    expect(actions).toBeTruthy();
+    expect(actions.hasAttribute('hidden')).toBe(false);
+  });
+
+  it('builds the actions out of real buttons rather than bare icons', () => {
+    const buttons = card().querySelectorAll('.note-actions button');
+
+    expect(buttons.length).toBe(3);
+    expect(editButton().getAttribute('aria-label')).toBe('Edit this note');
+  });
+
+  it('does not meet the reveal condition while nothing in the note has focus', () => {
+    expect(card().matches(':focus-within')).toBe(false);
+  });
+
+  it('meets the reveal condition once the keyboard reaches the actions', () => {
+    editButton().focus();
+
+    expect(document.activeElement).toBe(editButton());
+    expect(card().matches(':focus-within')).toBe(true);
+  });
+
+  it('opens the editor through the button the pointer uses, not through injected state', () => {
+    const button = editButton();
+    button.focus();
+    button.click();
+    fixture.detectChanges();
+
+    expect(component.editingNote).toBe(note);
+    expect(card().querySelector('textarea')).toBeTruthy();
+  });
+});
diff --git a/src/app/projects/states/staff-notes/staff-notes.component.ts b/src/app/projects/states/staff-notes/staff-notes.component.ts
new file mode 100644
index 0000000000..5cbf267a29
--- /dev/null
+++ b/src/app/projects/states/staff-notes/staff-notes.component.ts
@@ -0,0 +1,153 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {Project, UserService} from 'src/app/api/models/doubtfire-model';
+import {StaffNote} from 'src/app/api/models/staff-note';
+import {StaffNoteService} from 'src/app/api/services/staff-note.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-staff-notes',
+  templateUrl: './staff-notes.component.html',
+  styleUrl: './staff-notes.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class StaffNotesComponent implements OnInit {
+  @ViewChild('staffNotesContainer') staffNotesContainer!: ElementRef;
+  @ViewChild('staffNoteEditor', {static: false}) staffNoteEditor!: ElementRef<HTMLTextAreaElement>;
+
+  @Input() project: Project;
+
+  loadingStaffNotes: boolean = true;
+
+  noteText: string = '';
+
+  editingNote?: StaffNote;
+  editingNoteText?: string = '';
+
+  replyingToNote?: StaffNote;
+
+  constructor(
+    private userService: UserService,
+    private staffNoteService: StaffNoteService,
+    private alertService: AlertService,
+    private confirmationModalService: ConfirmationModalService,
+  ) {}
+  ngOnInit(): void {
+    this.loadingStaffNotes = true;
+    this.staffNoteService.loadStaffNotes(this.project).subscribe((_notes) => {
+      this.loadingStaffNotes = false;
+      this.staffNoteService.updateStaffNoteReplies(this.project?.staffNoteCache.currentValues);
+      this.scrollDown();
+    });
+  }
+
+  scrollToComment(commentID: number) {
+    document.querySelector(`#comment-${commentID}`).scrollIntoView();
+  }
+
+  scrollDown() {
+    setTimeout(() => {
+      const el = this.staffNotesContainer.nativeElement;
+      el.scrollTop = el.scrollHeight;
+    }, 50);
+  }
+
+  public submitNote() {
+    const noteText = this.noteText.trim();
+    if (noteText === '') {
+      return;
+    }
+
+    this.noteText = '';
+
+    this.staffNoteService.addNote(this.project, noteText, this.replyingToNote).subscribe({
+      next: (_note) => {
+        this.alertService.success('Succesfully submitted note', 4000);
+        this.scrollDown();
+        this.project.staffNoteCount++;
+        this.replyingToNote = null;
+        this.staffNoteService.updateStaffNoteReplies(this.project?.staffNoteCache.currentValues);
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to create note: ${error}`, 4000);
+        this.noteText = noteText;
+      },
+    });
+  }
+
+  public updateNote() {
+    const noteText = this.editingNoteText.trim();
+    if (noteText === '' || !this.editingNote) {
+      return;
+    }
+
+    this.staffNoteService.updateNote(this.project, this.editingNote, noteText).subscribe({
+      next: (_note) => {
+        this.alertService.success('Succesfully updated note', 4000);
+        this.editingNote = null;
+        this.editingNoteText = '';
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to update note: ${error}`, 4000);
+      },
+    });
+  }
+
+  public deleteNote(note: StaffNote) {
+    this.confirmationModalService.show(
+      'Delete note',
+      'Are you sure want to delete this staff note?',
+      () => {
+        note.delete();
+      },
+    );
+  }
+
+  public replyToNote(note: StaffNote) {
+    this.replyingToNote = note;
+  }
+  public cancelReplyingToNote() {
+    this.replyingToNote = null;
+  }
+
+  public editNote(note: StaffNote) {
+    if (!note.authorIsMe) {
+      return;
+    }
+
+    this.editingNote = note;
+    this.editingNoteText = note.note;
+    setTimeout(() => {
+      this.autoResizeStaffNoteEditor();
+      this.staffNoteEditor?.nativeElement.focus();
+    });
+  }
+
+  public cancelEditingNote() {
+    this.editingNote = null;
+    this.editingNoteText = '';
+  }
+
+  public autoResizeStaffNoteEditor() {
+    const el = this.staffNoteEditor.nativeElement;
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+  }
+
+  scrollToNote(note: StaffNote): void {
+    const el = document.getElementById(`note-${note.id}`);
+    if (el) {
+      el.scrollIntoView({behavior: 'smooth', block: 'center'});
+      el.classList.add('flash-highlight');
+      setTimeout(() => el.classList.remove('flash-highlight'), 1000);
+    }
+  }
+}
diff --git a/src/app/projects/states/states.coffee b/src/app/projects/states/states.coffee
deleted file mode 100644
index 01b9d42dd4..0000000000
--- a/src/app/projects/states/states.coffee
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module('doubtfire.projects.states', [
-  'doubtfire.projects.states.index'
-  'doubtfire.projects.states.dashboard'
-  'doubtfire.projects.states.tutorials'
-  'doubtfire.projects.states.portfolio'
-  'doubtfire.projects.states.groups'
-  'doubtfire.projects.states.outcomes'
-])
diff --git a/src/app/projects/states/tutor-discussion/tutor-discussion.component.html b/src/app/projects/states/tutor-discussion/tutor-discussion.component.html
new file mode 100644
index 0000000000..3f112c19e3
--- /dev/null
+++ b/src/app/projects/states/tutor-discussion/tutor-discussion.component.html
@@ -0,0 +1,277 @@
+<div
+  class="absolute top-1/2 left-1/2 z-40 h-screen w-screen -translate-1/2 transform overflow-hidden bg-gray-500/50 backdrop-blur"
+  [hidden]="!scanningQr"
+>
+  @if (loadingStudentData) {
+    <mat-spinner
+      class="absolute top-1/2 left-1/2 z-50 -translate-x-1/2 transform"
+      color="blue"
+    ></mat-spinner>
+  }
+  <div [ngClass]="{'qr-reader-hide-bloat': hideQrScannerBloat}">
+    <div class="absolute top-1/2 w-full -translate-y-1/2 transform" id="qr-reader"></div>
+  </div>
+  <div
+    class="pointer-events-none absolute top-[150px] left-1/2 z-10 w-full -translate-x-1/2 transform px-6 py-3 text-center text-sm font-bold text-white"
+  >
+    Scan a student's QR code to instantly load their project and mark submissions.
+  </div>
+  <button
+    class="absolute bottom-[150px] left-1/2 my-3 max-w-md -translate-x-1/2 transform"
+    color="secondary"
+    mat-raised-button
+    (click)="closeQrReader()"
+  >
+    {{ project ? 'Cancel' : 'Exit' }}
+  </button>
+</div>
+
+<!-- We offset the height by 145px to compensate for the header -->
+<f-page-container>
+  <div class="flex h-[calc(100vh-145px)] flex-col">
+    @if (attendance && unit) {
+      <div class="flex items-center gap-2.5">
+        <mat-form-field appearance="outline" class="mt-[22px] w-full">
+          <mat-select
+            placeholder="Select a task"
+            [disabled]="!!selectedTaskDefinition"
+            [(ngModel)]="selectedTaskDefinition"
+          >
+            @for (
+              td of $safeNavigationMigration(unit?.taskDefinitionCache.values) | async;
+              track td
+            ) {
+              <mat-option [value]="td">{{ td.abbreviation }} - {{ td.name }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        @if (selectedTaskDefinition) {
+          <button color="red" mat-raised-button (click)="selectedTaskDefinition = null">
+            Clear
+          </button>
+        }
+      </div>
+    }
+
+    <div class="task-inbox flex w-full flex-1 flex-col items-center justify-normal">
+      <div class="relative mb-5 flex w-full justify-between px-10">
+        @if (project && project?.student) {
+          <button
+            aria-label="Add engagement stamp"
+            color="primary"
+            mat-icon-button
+            matTooltip="Add engagement"
+            (click)="openAddEngagementDialog()"
+          >
+            <mat-icon>approval</mat-icon>
+          </button>
+          <div class="absolute left-1/2 -translate-x-1/2 transform text-center">
+            <div class="text-center">
+              {{ project?.student?.displayName }}
+              @if (project?.student.studentId) {
+                ({{ project?.student.studentId }})
+              }
+            </div>
+            <div class="text-center">
+              Target Grade:
+              {{ getTargetTradeString($safeNavigationMigration(project?.targetGrade)) }}
+            </div>
+          </div>
+        } @else {
+          <div></div>
+          <div class="mt-3 text-gray-500 italic">Click the QR code to open the scanner..</div>
+        }
+        <button class="scale-[2]" color="primary" mat-icon-button (click)="scanQrCode()">
+          <mat-icon>qr_code_scanner</mat-icon>
+        </button>
+      </div>
+
+      @if (project && !filteredTasks.length) {
+        <div class="py-6 text-gray-400 italic">No tasks to discuss.</div>
+      }
+      <mat-selection-list #tasks class="m-0 h-min p-0">
+        @for (task of filteredTasks; track task) {
+          <mat-list-option
+            class="clearfix w-full"
+            style="padding: 0; min-height: 60px; height: min-content"
+            togglePosition="before"
+            [selected]="
+              (['discuss', 'rediscuss'].includes(task.status) || attendance) &&
+              (!task.definition.lockAssessmentsToTutorialStream ||
+                currentUserTutorsInStream(task.definition.tutorialStream))
+            "
+            [value]="task"
+          >
+            @if (task) {
+              <div class="w-full" id="{{ task.id }}">
+                <div class="inbox-entry flex items-center">
+                  <span
+                    class="notification"
+                    [ngClass]="{
+                      active: task.numNewComments > 0 || task.similaritiesDetected,
+                      similarities: task.similaritiesDetected,
+                    }"
+                  ></span>
+                  <user-icon
+                    class="self-center"
+                    [size]="30"
+                    [user]="$safeNavigationMigration(project?.student)"
+                  >
+                  </user-icon>
+                  <div class="mt-0 flex-1 break-words whitespace-normal" [hidden]="isNarrow">
+                    <h4 class="mt-[8px] mb-[2px] text-[15px]">{{ task.definition.name }}</h4>
+                    <span class="mb-0 inline text-[12px]">
+                      {{ task.definition.abbreviation }} -
+                      {{ getTargetTradeString(task.definition.targetGrade) }} Task
+                    </span>
+                  </div>
+                  @if (task.hasGrade()) {
+                    <div
+                      matTooltip="The grade assigned to the submission"
+                      matTooltipPosition="above"
+                    >
+                      <mat-chip-option style="margin-right: 6px" [hidden]="isNarrow"
+                        >{{ task.gradeDesc() }}
+                      </mat-chip-option>
+                    </div>
+                  }
+                  <status-icon
+                    class="ml-2"
+                    matBadge="{{ task.status === 'attention_required' ? '!' : '' }}"
+                    matBadgeColor="warn"
+                    matBadgePosition="after"
+                    [hidden]="isNarrow"
+                    [status]="task.status"
+                  ></status-icon>
+
+                  <button
+                    aria-label="task-comments"
+                    mat-icon-button
+                    [ngClass]="task.id === selectedTask?.id ? 'text-blue-500' : 'text-gray-400'"
+                    (click)="loadTaskComments($event, task)"
+                  >
+                    <mat-icon>chat-bubble</mat-icon>
+                  </button>
+                </div>
+                <!--/badges-->
+              </div>
+            }
+          </mat-list-option>
+        }
+
+        <!--/task-->
+      </mat-selection-list>
+      @if (project) {
+        <div class="mt-2.5 flex w-full justify-center">
+          @if (this.allTasks?.length > 0) {
+            @if (this.filteredTasks?.length < this.allTasks?.length) {
+              <button color="primary" mat-button (click)="viewAllSubmittedTasks()">
+                Load all submitted tasks
+              </button>
+            } @else {
+              <button color="primary" mat-button (click)="viewAllFilteredTasks()">
+                Hide all submitted tasks
+              </button>
+            }
+          }
+        </div>
+      }
+
+      <!-- </cdk-virtual-scroll-viewport> -->
+    </div>
+
+    @if (project && filteredTasks.length) {
+      <div class="mt-1">
+        <div class="my-2 flex w-full items-center justify-center gap-5">
+          @if (attendance) {
+            <button
+              class="medium-icon-button bg-gray-100"
+              color="secondary"
+              mat-fab
+              [disabled]="!tasks.selectedOptions.selected.length"
+              (click)="markSelectedTasksCheckedIn()"
+            >
+              <!-- Redo -->
+              <mat-icon>how_to_reg</mat-icon>
+            </button>
+          } @else {
+            <button
+              class="medium-icon-button bg-gray-100"
+              color="secondary"
+              mat-fab
+              [disabled]="!tasks.selectedOptions.selected.length"
+              (click)="setSelectedTasksStatus('fix_and_resubmit')"
+            >
+              <!-- Redo -->
+              <mat-icon>construction</mat-icon>
+            </button>
+            <button
+              class="medium-icon-button bg-green-400"
+              mat-fab
+              [disabled]="!canMarkSelectedTasksComplete"
+              (click)="setSelectedTasksStatus('complete')"
+            >
+              <!-- Mark as Complete -->
+              <mat-icon>done</mat-icon>
+            </button>
+
+            <button
+              class="medium-icon-button bg-blue-300"
+              mat-fab
+              [disabled]="!tasks.selectedOptions.selected.length"
+              (click)="markSelectedTasksDicussed()"
+            >
+              <!-- Mark as Discussed -->
+              <mat-icon>group</mat-icon>
+            </button>
+            @if (selectedTasksIncludeDiscuss) {
+              <button
+                class="medium-icon-button bg-[#126352] text-white"
+                mat-fab
+                matTooltip="Mark as Rediscuss"
+                [disabled]="!tasks.selectedOptions.selected.length"
+                (click)="setSelectedTasksStatus('rediscuss')"
+              >
+                <mat-icon>feedback</mat-icon>
+              </button>
+            }
+          }
+        </div>
+      </div>
+    }
+
+    @if (selectedTask && project) {
+      <mat-tab-group dynamicHeight (selectedTabChange)="onTabChange($event)">
+        <mat-tab label="Task Comments"></mat-tab>
+
+        <mat-tab
+          label="Student Notes{{
+            project?.staffNoteCount ? ' (' + project.staffNoteCount + ')' : ''
+          }}"
+          [matBadge]="$safeNavigationMigration(project?.staffNoteCount)"
+        ></mat-tab>
+        <mat-tab label="Discussion Prompts"></mat-tab>
+      </mat-tab-group>
+
+      @if (footerTabView === TutorDiscussionTabView.SHOW_COMMENTS) {
+        <div #commentspanel class="task-comment-panel inbox-panel w-full flex-1">
+          <!-- <div class="w-full text-center py-2.5">{{ selectedTask?.definition.name }}</div> -->
+
+          <task-comments-viewer
+            class="h-full"
+            ng-if="selectedTask"
+            refocus-on-task-change="true"
+            style="padding: 0 8px 0 12px; background: white; border-radius: 12px"
+            [project]="project"
+            [task]="selectedTask"
+          >
+          </task-comments-viewer>
+        </div>
+      } @else if (footerTabView === TutorDiscussionTabView.SHOW_STAFF_NOTES) {
+        <f-staff-notes class="min-h-[350px]" [project]="project"></f-staff-notes>
+      } @else if (footerTabView === TutorDiscussionTabView.SHOW_DISCUSSION_PROMPTS) {
+        <f-discussion-prompts class="min-h-[350px]" [project]="project"></f-discussion-prompts>
+      }
+    }
+  </div>
+</f-page-container>
diff --git a/src/app/projects/states/tutor-discussion/tutor-discussion.component.scss b/src/app/projects/states/tutor-discussion/tutor-discussion.component.scss
new file mode 100644
index 0000000000..b2d80373f0
--- /dev/null
+++ b/src/app/projects/states/tutor-discussion/tutor-discussion.component.scss
@@ -0,0 +1,138 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// $my-palette: mat.define-palette(mat.$indigo-palette);
+@use 'theme' as *;
+@use 'styles/mixins/task-list' as *;
+@use 'styles/mixins/scrollable' as *;
+
+// $my-palette: mat.define-palette($md-formatif);
+
+:host {
+  --background-gray: rgba(0, 0, 0, 0.04);
+  padding-right: 8px;
+  border-right-color: rgba(0, 0, 0, 0.1);
+  border-right-style: solid;
+  border-right-width: 1px;
+}
+
+:host ::ng-deep div.mat-expansion-panel-body {
+  padding-right: 0 !important;
+}
+
+user-icon {
+  margin-right: 10px;
+}
+
+.mat-mdc-list-item {
+  border: none;
+}
+
+.mat-mdc-list-item .notification {
+  height: 8px;
+  width: 8px;
+  margin-right: 8px;
+
+  border-radius: 50%;
+  display: inline-block;
+
+  background-color: transparent;
+
+  &.active {
+    // background-color: mat.get-color-from-palette($my-palette, 500);
+    background-color: #3939ff;
+  }
+
+  &.active.similarities {
+    background-color: #f44336;
+  }
+}
+
+.mat-mdc-list-item .item-content {
+  height: 60px;
+  border-radius: 20px;
+}
+
+.mat-mdc-list-item .item-content:hover {
+  cursor: pointer;
+}
+
+// .tasks-viewport.list-group-item-text-extended {
+//   margin-top: 0.5em;
+//   line-height: 1.3;
+
+//   p {
+//     margin-bottom: 0;
+//     padding: 0;
+//     color: gray;
+//   }
+// }
+
+.mdc-list-item__start.mat-mdc-list-option-checkbox-before {
+  margin-right: 0 !important;
+  padding: 0 !important;
+}
+
+.medium-icon-button {
+  width: 75px !important;
+  height: 75px !important;
+}
+
+// Hide auto-injected QR scanner elements that are not needed in the UI
+// We only hide this if we found a "back camera" on user's device
+.qr-reader-hide-bloat #qr-reader__header_message,
+.qr-reader-hide-bloat #qr-reader__dashboard_section,
+.qr-reader-hide-bloat #qr-reader__dashboard_section_csr,
+.qr-reader-hide-bloat #qr-reader > div:not([id]):not([class]),
+.qr-reader-hide-bloat #qr-reader__scan_region > div:not([id]):not([class]),
+.qr-reader-hide-bloat #html5-qrcode-button-camera-stop,
+.qr-reader-hide-bloat #html5-qrcode-button-camera-start {
+  display: none !important;
+}
+
+#qr-reader img,
+#html5-qrcode-anchor-scan-type-change {
+  display: none !important;
+}
+
+#html5-qrcode-button-camera-stop,
+#html5-qrcode-button-camera-start {
+  width: 100%;
+  max-width: 1000px;
+  height: 45px;
+  padding: 0.25rem 0.625rem;
+  margin-top: 15px;
+  border-radius: 0.25rem;
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 10%),
+    0 1px 2px -1px rgb(0 0 0 / 10%);
+  font-weight: 500;
+  color: white;
+  text-transform: uppercase;
+  background-color: #2563eb;
+}
+
+#html5-qrcode-button-camera-stop:hover,
+#html5-qrcode-button-camera-start:hover,
+#html5-qrcode-button-camera-permission:hover {
+  background-color: #1d4ed8;
+}
+
+#html5-qrcode-button-camera-permission {
+  width: 100%;
+  max-width: 250px;
+  height: 60px;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.25rem;
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 10%),
+    0 1px 2px -1px rgb(0 0 0 / 10%);
+  font-weight: 500;
+  color: white;
+  text-transform: uppercase;
+  background-color: #2563eb;
+}
+
+.comment-user-icon-wrapper.ng-star-inserted {
+  width: auto !important;
+}
diff --git a/src/app/projects/states/tutor-discussion/tutor-discussion.component.spec.ts b/src/app/projects/states/tutor-discussion/tutor-discussion.component.spec.ts
new file mode 100644
index 0000000000..75306dc282
--- /dev/null
+++ b/src/app/projects/states/tutor-discussion/tutor-discussion.component.spec.ts
@@ -0,0 +1,58 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDialog} from '@angular/material/dialog';
+import {ActivatedRoute, Router} from '@angular/router';
+import {
+  AuthenticationService,
+  ProjectService,
+  TaskCommentService,
+  TaskService,
+  UnitService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {DiscussedInClassReasonModalService} from 'src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {TutorDiscussionComponent} from './tutor-discussion.component';
+
+const emptyProvider = {};
+
+describe('TutorDiscussionComponent', () => {
+  let component: TutorDiscussionComponent;
+  let fixture: ComponentFixture<TutorDiscussionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TutorDiscussionComponent],
+      providers: [
+        {provide: UnitService, useValue: emptyProvider},
+        {provide: AuthenticationService, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: ProjectService, useValue: emptyProvider},
+        {provide: GradeService, useValue: emptyProvider},
+        {provide: Router, useValue: emptyProvider},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+        {provide: DiscussedInClassReasonModalService, useValue: emptyProvider},
+        {provide: TaskCommentService, useValue: emptyProvider},
+        {provide: TaskService, useValue: emptyProvider},
+        {provide: MatDialog, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(TutorDiscussionComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TutorDiscussionComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/projects/states/tutor-discussion/tutor-discussion.component.ts b/src/app/projects/states/tutor-discussion/tutor-discussion.component.ts
new file mode 100644
index 0000000000..f9c2723554
--- /dev/null
+++ b/src/app/projects/states/tutor-discussion/tutor-discussion.component.ts
@@ -0,0 +1,674 @@
+import {Html5QrcodeScanner, Html5QrcodeScannerState} from 'html5-qrcode';
+import {DOCUMENT} from '@angular/common';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnDestroy,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {MatSelectionList} from '@angular/material/list';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {ActivatedRoute, Router} from '@angular/router';
+import {
+  AuthenticationService,
+  Project,
+  ProjectService,
+  Task,
+  TaskCommentService,
+  TaskDefinition,
+  TaskService,
+  TaskStatusEnum,
+  TutorialStream,
+  Unit,
+  UnitService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {DiscussedInClassReasonModalService} from 'src/app/common/modals/discussed-in-class-reason-modal/discussed-in-class-reason-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {AddEngagementDialogComponent} from '../dashboard/directives/progress-dashboard/engagement-passport-card/add-engagement-dialog/add-engagement-dialog.component';
+
+enum TutorDiscussionTabView {
+  SHOW_COMMENTS,
+  SHOW_STAFF_NOTES,
+  SHOW_DISCUSSION_PROMPTS,
+}
+@Component({
+  selector: 'f-tutor-discussion',
+  templateUrl: './tutor-discussion.component.html',
+  styleUrl: './tutor-discussion.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TutorDiscussionComponent implements AfterViewInit, OnDestroy {
+  private readonly discussedInClassNotePrefix = `I'm manually marking this discussed in class because...`;
+  private readonly mobileDiscussionViewportContent =
+    'width=device-width, initial-scale=0.8, maximum-scale=5';
+
+  @Input() unitId: number;
+  @Input() username: string;
+  @Input() attendance: boolean;
+
+  @ViewChild('tasks') tasksList: MatSelectionList;
+  selectedTaskDefinition: TaskDefinition | null = null;
+
+  public filteredTasks: Task[] = [];
+  public allTasks: Task[] = [];
+
+  public unit: Unit | null;
+  public project: Project | null;
+
+  public selectedTask: Task | null;
+  public isNarrow = false;
+
+  public scanningQr: boolean = false;
+  public loadingStudentData: boolean = false;
+
+  private html5QrcodeScanner?: Html5QrcodeScanner;
+  private originalViewportContent: string | null = null;
+  private mobileDiscussionZoomApplied = false;
+
+  private _unitId: number;
+  private _username: string;
+
+  public TutorDiscussionTabView = TutorDiscussionTabView;
+  public footerTabView: TutorDiscussionTabView = TutorDiscussionTabView.SHOW_COMMENTS;
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private unitService: UnitService,
+    private authService: AuthenticationService,
+    private userService: UserService,
+    private projectService: ProjectService,
+    private gradeService: GradeService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private alertService: AlertService,
+    private confirmationModalService: ConfirmationModalService,
+    private discussedInClassReasonModal: DiscussedInClassReasonModalService,
+    private taskCommentService: TaskCommentService,
+    private taskService: TaskService,
+    private dialog: MatDialog,
+  ) {}
+
+  public ngOnDestroy(): void {
+    this.stopQrScanner();
+    this.restoreViewportZoom();
+  }
+
+  public currentUserTutorsInStream(tutorialStream: TutorialStream): boolean {
+    const user = this.userService.currentUser;
+    const tutorials = this.unit.tutorials.filter(
+      (t) =>
+        t.tutorialStream.abbreviation === tutorialStream.abbreviation &&
+        t.tutorialStream.name === tutorialStream.name,
+    );
+    if (tutorials.some((t) => t.tutor.id === user.id)) {
+      return true;
+    }
+    return false;
+  }
+
+  onTabChange(event: MatTabChangeEvent): void {
+    if (event.index === 0) {
+      this.showComments();
+    } else if (event.index === 1) {
+      this.showStaffNotes();
+    } else if (event.index === 2) {
+      this.showDiscussionPrompts();
+    }
+  }
+
+  public showComments() {
+    this.footerTabView = TutorDiscussionTabView.SHOW_COMMENTS;
+  }
+
+  public showStaffNotes() {
+    this.footerTabView = TutorDiscussionTabView.SHOW_STAFF_NOTES;
+  }
+
+  public showDiscussionPrompts() {
+    this.footerTabView = TutorDiscussionTabView.SHOW_DISCUSSION_PROMPTS;
+  }
+
+  public ngAfterViewInit(): void {
+    this.unitId =
+      this.unitId ??
+      Number(
+        this.activatedRoute.parent?.snapshot.paramMap.get('unitId') ??
+          this.activatedRoute.snapshot.queryParamMap.get('unitId'),
+      );
+    this.username = this.username ?? this.activatedRoute.snapshot.queryParamMap.get('username');
+    this.attendance =
+      this.attendance ??
+      this.activatedRoute.snapshot.data.attendance ??
+      this.activatedRoute.snapshot.queryParamMap.get('attendance') === 'true';
+
+    this.authService.afterAuthCall((result) => {
+      if (!result) {
+        return this.router.navigateByUrl('/sign_in');
+      } else {
+        if (this.userService.currentUser.systemRole === 'Student') {
+          // Avoid prompting students for camera permissions before redirecting to unauthorised state
+          return;
+        }
+        if (this.unitId) {
+          this._unitId = Number(this.unitId);
+          if (!this.attendance) {
+            // Tutor discussion view
+            if (this.username) {
+              this._username = this.username;
+              this.getStudentTasks();
+            } else {
+              setTimeout(() => this.scanQrCode());
+            }
+          } else {
+            this.getUnit().then((u) => {
+              this.unit = u;
+            });
+          }
+        }
+      }
+    });
+  }
+
+  private decodeQrCode(data: string) {
+    if (!this.scanningQr || this.loadingStudentData) {
+      return;
+    }
+
+    try {
+      const params = new URL(data).searchParams;
+      const unitId = parseInt(params.get('unitId'));
+      const projectId = parseInt(params.get('projectId'));
+      const username = params.get('username');
+
+      if ((!isNaN(unitId) && !isNaN(projectId)) || username) {
+        if (unitId) {
+          this._unitId = unitId;
+        }
+        if (username) {
+          this._username = username;
+        }
+
+        this.changeProject();
+      }
+    } catch {
+      // QR code data is invalid
+    }
+  }
+
+  public closeQrReader(): void {
+    if (!this.project) {
+      // Exiting the route entirely
+      this.stopQrScanner();
+      if (this.unitId) {
+        this.router.navigate(['/units', this.unitId, 'tasks', 'inbox']);
+      } else {
+        this.router.navigateByUrl('/home');
+      }
+    } else {
+      // Close the camera view
+      this.scanningQr = false;
+      this.stopQrScanner();
+    }
+  }
+
+  private changeProject() {
+    this.html5QrcodeScanner?.pause(true);
+    this.loadingStudentData = true;
+    setTimeout(() => {
+      try {
+        this.getStudentTasks();
+      } catch (_e) {
+        this.alertService.error(`Invalid QR code`, 2000);
+        this.loadingStudentData = false;
+
+        setTimeout(() => {
+          this.html5QrcodeScanner?.resume();
+        }, 2000);
+      }
+    });
+  }
+
+  private applyMobileDiscussionZoom(): void {
+    if (!window.matchMedia('(max-width: 768px)').matches) {
+      return;
+    }
+
+    const viewport = this.document.querySelector<HTMLMetaElement>('meta[name="viewport"]');
+    if (!viewport) {
+      return;
+    }
+
+    this.originalViewportContent ??= viewport.getAttribute('content');
+    viewport.setAttribute('content', this.mobileDiscussionViewportContent);
+    this.mobileDiscussionZoomApplied = true;
+  }
+
+  private restoreViewportZoom(): void {
+    if (!this.mobileDiscussionZoomApplied) {
+      return;
+    }
+
+    const viewport = this.document.querySelector<HTMLMetaElement>('meta[name="viewport"]');
+    if (viewport && this.originalViewportContent) {
+      viewport.setAttribute('content', this.originalViewportContent);
+    }
+
+    this.mobileDiscussionZoomApplied = false;
+  }
+
+  hideQrScannerBloat: boolean = true;
+
+  private async stopQrScanner(): Promise<void> {
+    if (!this.html5QrcodeScanner) {
+      return;
+    }
+
+    try {
+      await this.html5QrcodeScanner.clear();
+    } catch (_e) {
+      // The scanner may already be stopped by its own controls.
+    } finally {
+      this.html5QrcodeScanner = undefined;
+    }
+  }
+
+  private async getCameraPermissionState(): Promise<PermissionState | null> {
+    if (!navigator.permissions?.query) {
+      return null;
+    }
+
+    try {
+      const permissionStatus = await navigator.permissions.query({
+        name: 'camera' as PermissionName,
+      });
+      return permissionStatus.state;
+    } catch (_e) {
+      return null;
+    }
+  }
+
+  private async prepareQrScannerCamera(): Promise<void> {
+    const cachedScannerData = localStorage.getItem('HTML5_QRCODE_DATA');
+    const cameraPermissionState = await this.getCameraPermissionState();
+    if (cachedScannerData) {
+      try {
+        const html5QrcodeData = JSON.parse(cachedScannerData);
+        if (html5QrcodeData?.hasPermission && cameraPermissionState === 'granted') {
+          this.hideQrScannerBloat = html5QrcodeData.lastUsedCameraId ? true : false;
+          return;
+        }
+      } catch (_e) {
+        localStorage.removeItem('HTML5_QRCODE_DATA');
+      }
+    }
+
+    // Trigger video permissions once so device labels are available for back camera selection.
+    // Stopping these tracks releases the camera; the browser keeps the permission grant.
+    const stream = await navigator.mediaDevices.getUserMedia({video: true});
+
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+
+      // Find the deviceId of the back camera
+      const backCameras = devices.filter(
+        (d) => d.kind === 'videoinput' && d.label.toLowerCase().includes('back camera'),
+      );
+
+      const html5QrcodeData = {
+        hasPermission: true,
+        lastUsedCameraId: backCameras[0]?.deviceId ?? null,
+      };
+      localStorage.setItem('HTML5_QRCODE_DATA', JSON.stringify(html5QrcodeData));
+
+      // Hide most of the UI if we found and set the back camera
+      // Otherwise, we need to reveal the UI so that the user can select which camera to use
+      this.hideQrScannerBloat = html5QrcodeData.lastUsedCameraId ? true : false;
+    } finally {
+      stream.getTracks().forEach((track) => track.stop());
+    }
+  }
+
+  public scanQrCode() {
+    if (this.attendance && !this.selectedTaskDefinition) {
+      this.alertService.error('You must select a task first', 3000);
+      return;
+    }
+
+    this.scanningQr = true;
+    this.loadingStudentData = false;
+
+    if (this.html5QrcodeScanner?.getState() === Html5QrcodeScannerState.PAUSED) {
+      this.html5QrcodeScanner.resume();
+    } else {
+      this.stopQrScanner()
+        .then(() => this.prepareQrScannerCamera())
+        .then(() => {
+          setTimeout(() => {
+            this.html5QrcodeScanner = new Html5QrcodeScanner(
+              'qr-reader', // id of the div in the html
+              {fps: 10, qrbox: 250},
+              false,
+            );
+
+            this.html5QrcodeScanner.render(
+              (data) => {
+                this.decodeQrCode(data);
+              },
+              (_error) => {
+                // console.error(_error);
+              },
+            );
+          });
+        })
+        .catch((_e) => {
+          this.scanningQr = false;
+          this.alertService.error('Camera permission is required to scan QR codes', 3000);
+        });
+    }
+  }
+
+  public openAddEngagementDialog(): void {
+    if (!this.project) {
+      return;
+    }
+
+    this.dialog.open(AddEngagementDialogComponent, {
+      data: {project: this.project},
+      width: 'calc(100vw - 32px)',
+      maxWidth: '640px',
+      autoFocus: false,
+    });
+  }
+
+  public loadTaskComments(event: MouseEvent, task: Task) {
+    event.stopPropagation();
+    this.selectedTask = task;
+  }
+
+  public async setSelectedTasksStatus(status: TaskStatusEnum) {
+    const selectedTasks = this.tasksList.selectedOptions.selected.map((taskOption) => {
+      return taskOption.value as Task;
+    });
+
+    if (status === 'complete') {
+      const blockedTasks = selectedTasks.filter(
+        (task) => !task.definition.assessInPortfolioOnly && !task.canMarkComplete,
+      );
+      if (blockedTasks.length > 0) {
+        this.alertService.error(
+          'Some selected tasks cannot be marked as complete until they are marked as discussed in class.',
+          5000,
+        );
+      }
+    }
+
+    if (status === 'fix_and_resubmit') {
+      try {
+        const hasReadyDependents = (
+          await Promise.all(
+            selectedTasks.map((task) =>
+              task?.definition && task?.project ? task.hasReadyForFeedbackDependents() : false,
+            ),
+          )
+        ).some(Boolean);
+
+        if (hasReadyDependents) {
+          this.confirmationModalService.show(
+            'Move dependent tasks to Fix and Resubmit?',
+            'One or more selected tasks are prerequisites for other tasks submitted by this student that are Ready for Feedback. Do you want to move those tasks to Fix and Resubmit as well?',
+            () => {
+              this.updateSelectedTasksStatus(selectedTasks, status, true);
+            },
+            () => {
+              this.updateSelectedTasksStatus(selectedTasks, status, false);
+            },
+            'Yes, update dependent tasks',
+            'No, just selected tasks',
+          );
+          return;
+        }
+      } catch (error) {
+        this.alertService.error(`Failed to check dependent task statuses: ${error}`, 6000);
+      }
+    }
+
+    this.updateSelectedTasksStatus(selectedTasks, status, false);
+  }
+
+  private updateSelectedTasksStatus(
+    selectedTasks: Task[],
+    status: TaskStatusEnum,
+    moveDependentTasks: boolean,
+  ) {
+    for (const task of selectedTasks) {
+      if (
+        status === 'complete' &&
+        !task.definition.assessInPortfolioOnly &&
+        !task.canMarkComplete
+      ) {
+        continue;
+      }
+
+      if (task.definition.assessInPortfolioOnly) {
+        task.updateTaskStatus(status === 'complete' ? 'working_on_it' : status, true);
+      } else if (status === 'fix_and_resubmit') {
+        task.updateTaskStatus(status, true, moveDependentTasks);
+      } else {
+        task.updateTaskStatus(status, true);
+      }
+    }
+  }
+
+  public get canMarkSelectedTasksComplete(): boolean {
+    const selectedTasks = this.tasksList?.selectedOptions?.selected ?? [];
+    if (!selectedTasks.length) {
+      return false;
+    }
+
+    return selectedTasks.every((taskOption) => {
+      const task = taskOption.value as Task;
+      return task.definition.assessInPortfolioOnly || task.canMarkComplete;
+    });
+  }
+
+  public get selectedTasksIncludeDiscuss(): boolean {
+    const selectedTasks = this.tasksList?.selectedOptions?.selected ?? [];
+    return selectedTasks.some((taskOption) => {
+      const task = taskOption.value as Task;
+      return task.status === 'discuss';
+    });
+  }
+
+  public markSelectedTasksDicussed() {
+    const selectedTasks = this.tasksList.selectedOptions.selected;
+    if (!this.unit?.enforceFeedbackBeforeDiscussedInClass) {
+      for (const taskOption of selectedTasks) {
+        const task = taskOption.value as Task;
+        task.markAsDiscussed();
+      }
+      return;
+    }
+
+    this.discussedInClassReasonModal
+      .show(
+        'Mark Discussed in Class',
+        `Add a tutor note explaining why ${selectedTasks.length} task${
+          selectedTasks.length === 1 ? '' : 's'
+        } ${selectedTasks.length === 1 ? 'is' : 'are'} being marked as discussed in class.`,
+        this.discussedInClassNotePrefix,
+      )
+      .afterClosed()
+      .subscribe((reason) => {
+        if (!reason) {
+          return;
+        }
+
+        for (const taskOption of selectedTasks) {
+          const task = taskOption.value as Task;
+          task.markAsDiscussed(reason);
+        }
+      });
+  }
+
+  public markSelectedTasksCheckedIn() {
+    const selectedTasks = this.tasksList.selectedOptions.selected;
+    if (selectedTasks.length > 1) {
+      this.alertService.error('Can only check-in 1 task at a time', 5000);
+      return;
+    }
+    for (const taskOption of selectedTasks) {
+      const task = taskOption.value as Task;
+      this.taskService.checkInTaskForStudent(task).subscribe({
+        next: () => {
+          this.taskService.notifyStatusChange(task);
+          this.alertService.success('Successfully checked in', 2500);
+        },
+        error: (_error) => {
+          this.alertService.error('Failed to check-in', 5000);
+        },
+      });
+    }
+  }
+
+  private getUnit(): Promise<Unit> {
+    return new Promise((resolve, reject) => {
+      this.unitService.get({id: this._unitId}).subscribe({
+        next: (unit) => {
+          setTimeout(() => {
+            resolve(unit);
+          });
+        },
+        error: (err) => {
+          reject(err);
+        },
+      });
+    });
+  }
+
+  private loadStudents(unit: Unit): Promise<Project> {
+    return new Promise((resolve, reject) => {
+      this.projectService.loadStudents(unit, false, false).subscribe((projects) => {
+        const project = projects.find((p) => p.student.username === this._username);
+        if (!project) {
+          reject('Student is not a part of this unit');
+        }
+        resolve(project);
+      });
+    });
+  }
+
+  private getProject(unit: Unit, projectId: number): Promise<Project> {
+    return new Promise((resolve, reject) => {
+      this.projectService.loadProject(projectId, unit, true).subscribe((project) => {
+        if (!project) {
+          reject('No project found');
+        }
+        resolve(project);
+      });
+    });
+  }
+
+  public getTargetTradeString(grade: number) {
+    return this.gradeService.gradeLabel(grade, this.project?.unit);
+  }
+
+  public refresh() {
+    this.decodeQrCode('{"unitId":2,"projectId":20}');
+  }
+
+  statusesToInclude: TaskStatusEnum[] = [
+    'demonstrate',
+    'ready_for_feedback',
+    'discuss',
+    'attention_required',
+    'need_help',
+    // 'complete',
+    'fix_and_resubmit',
+    'redo',
+    'rediscuss',
+  ];
+
+  public viewAllSubmittedTasks() {
+    this.filteredTasks = [...this.allTasks];
+  }
+
+  private filteredDiscussionTasks(tasks: readonly Task[]): Task[] {
+    return tasks.filter((task) => {
+      if (!this.statusesToInclude.includes(task.status)) {
+        return false;
+      }
+
+      if (
+        this.unit?.enforceFeedbackBeforeDiscussedInClass &&
+        task.status === 'ready_for_feedback'
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+  }
+
+  public viewAllFilteredTasks() {
+    const discussionTasks = this.filteredDiscussionTasks(this.project?.tasks ?? []);
+    this.filteredTasks = [...discussionTasks];
+  }
+
+  public getStudentTasks(): void {
+    console.time('getStudentTasks()');
+    // this.project = null;
+    // this.filteredTasks = [];
+    // this.selectedTask = null;
+
+    this.getUnit()
+      .then((_unit) => {
+        this.unit = _unit;
+        return this.loadStudents(this.unit);
+      })
+      .then((student) => {
+        return this.getProject(this.unit, student.id);
+      })
+      .then((project) => {
+        const discussionTasks = this.filteredDiscussionTasks(project.tasks);
+        if (!this.attendance) {
+          this.filteredTasks = [...discussionTasks];
+          this.allTasks = [
+            ...project.tasks.filter(
+              (task) =>
+                task.status !== 'not_started' && // Filter out tasks with no submissions yet
+                task.definition.targetGrade <= project.targetGrade, // Filter out tasks that are higher than student's target grade
+            ),
+          ];
+        } else {
+          this.filteredTasks = [
+            project.tasks.find((t) => t.definition.id === this.selectedTaskDefinition.id),
+          ];
+        }
+
+        this.selectedTask = this.filteredTasks[0] ?? null;
+        this.project = project;
+        this.scanningQr = false;
+        this.loadingStudentData = false;
+        this.stopQrScanner();
+        this.applyMobileDiscussionZoom();
+      })
+      .catch((e) => {
+        console.error(e);
+        this.alertService.error(e, 5000);
+        this.scanQrCode();
+      })
+      .finally(() => {
+        console.timeEnd('getStudentTasks()');
+      });
+  }
+}
diff --git a/src/app/projects/states/tutor-notes/tutor-notes.component.html b/src/app/projects/states/tutor-notes/tutor-notes.component.html
new file mode 100644
index 0000000000..2c8b1a6c4c
--- /dev/null
+++ b/src/app/projects/states/tutor-notes/tutor-notes.component.html
@@ -0,0 +1,189 @@
+<div class="flex h-full flex-col">
+  <!-- @if (!loadingStaffNotes && project?.staffNoteCount === 0) {
+    <div class="flex justify-center items-center w-full h-full text-gray-300">
+      No staff notes for {{ project.student.displayName }}
+    </div>
+  } -->
+  <div #tutorNotesContainer class="flex-1 overflow-auto p-2.5">
+    @if (!loadingTutorNotes) {
+      @for (note of filteredNotes; track note) {
+        @if (note.replyToId) {
+          <div
+            class="flex items-center justify-between rounded-t-md border border-gray-300 p-1 text-sm select-none"
+          >
+            <div
+              class="flex items-center"
+              [ngClass]="note.replyTo && 'cursor-pointer hover:text-blue-500 hover:underline'"
+              (click)="scrollToNote(note.replyTo)"
+            >
+              <mat-icon class="mr-2">reply</mat-icon>
+              <div class="flex flex-col">
+                @if (note.replyTo) {
+                  <span class="font-medium">
+                    Replying to {{ note.replyTo.user.preferredName }}
+                    {{ note.replyTo.user.lastName }} ({{ note.replyTo.user.nickname }})
+                  </span>
+                  <span class="text-xs text-gray-600">{{ note.replyTo.note }}</span>
+                } @else {
+                  <span class="text-xs text-gray-400 italic">Replying to: Deleted note</span>
+                }
+              </div>
+            </div>
+          </div>
+        }
+        <mat-card class="note-card mb-2.5 p-3 pb-7" [id]="'note-' + note.id">
+          <div class="absolute right-3 bottom-3 flex items-center gap-3">
+            <div class="note-actions flex items-center">
+              @if (note.authorIsMe) {
+                <button
+                  aria-label="Edit this note"
+                  class="note-action"
+                  type="button"
+                  (click)="editNote(note)"
+                >
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+              <button
+                aria-label="Reply to this note"
+                class="note-action"
+                type="button"
+                (click)="replyToNote(note)"
+              >
+                <mat-icon>reply</mat-icon>
+              </button>
+              <button
+                aria-label="Delete this note"
+                class="note-action"
+                type="button"
+                (click)="deleteNote(note)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+            @if (!note.readByUnitRole) {
+              @if (note.noteIsForMe) {
+                <button color="primary" mat-stroked-button (click)="markAsRead(note)">
+                  Mark as read
+                </button>
+              }
+            } @else {
+              <div class="px-3 text-gray-400 italic">Read by tutor</div>
+            }
+          </div>
+
+          <div class="flex justify-between">
+            <mat-card-title class="flex items-center">
+              <user-icon style="margin-right: 8px" [size]="25" [user]="note.user"></user-icon>
+              {{ note.user?.displayName }}</mat-card-title
+            >
+            <div class="flex items-center">
+              <mat-card-subtitle
+                matTooltipPosition="above"
+                matTooltipShowDelay="1000"
+                [matTooltip]="note.createdAt | localizedDateTime"
+                >{{ note.createdAt | humanizedDate }}</mat-card-subtitle
+              >
+            </div>
+          </div>
+
+          <div class="flex gap-3 py-1">
+            @if (note.taskDefinition) {
+              <mat-chip class="w-fit"
+                >{{ note.taskDefinition?.abbreviation }} {{ note.taskDefinition.name }}</mat-chip
+              >
+            }
+            @if (note.project) {
+              <mat-chip
+                chipListSelectable
+                class="w-fit cursor-pointer"
+                matTooltip="Click to view student"
+                matTooltipPosition="above"
+                (click)="openProject($event, note)"
+                >{{ note.project?.student.displayName }}</mat-chip
+              >
+            }
+          </div>
+
+          <mat-card-content class="py-2.5">
+            @if (editingNote && editingNote.id === note.id) {
+              <mat-form-field appearance="outline" class="flex w-full items-center">
+                <mat-label>Update Note</mat-label>
+                <textarea
+                  #tutorNoteEditor
+                  class="w-full resize-none overflow-hidden px-1 py-0.5 placeholder:px-1 placeholder:py-0.5"
+                  matInput
+                  [(ngModel)]="editingNoteText"
+                  (input)="autoResizeTutorNoteEditor()"
+                ></textarea>
+                <div class="flex justify-end gap-1">
+                  <button color="" mat-raised-button (click)="cancelEditingNote()">Cancel</button>
+                  <button color="primary" mat-raised-button (click)="updateNote()">
+                    Update Note
+                  </button>
+                </div>
+              </mat-form-field>
+            } @else {
+              <div class="markdown-to-html" [innerHTML]="note.note | marked"></div>
+            }
+          </mat-card-content>
+        </mat-card>
+      }
+    } @else {
+      <!-- <div id="spinner">
+          <mat-spinner
+            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50"
+          ></mat-spinner>
+        </div> -->
+    }
+  </div>
+
+  <div class="h-[150px] border-t border-gray-300 p-2.5">
+    <mat-chip-listbox class="mb-2.5" multiple selectable>
+      <mat-chip-option
+        value="all"
+        [selected]="selectedTaskDefinitions.get('all')"
+        (click)="toggleSelection('all')"
+        >All Tasks</mat-chip-option
+      >
+      @for (option of taskDefinitionFilters; track option) {
+        <mat-chip-option
+          [selected]="selectedTaskDefinitions.get(option)"
+          [value]="option"
+          (click)="toggleSelection(option)"
+        >
+          {{ option }}
+        </mat-chip-option>
+      }
+    </mat-chip-listbox>
+
+    @if (replyingToNote) {
+      <div
+        class="flex items-center justify-between rounded-t-md border border-b-0 border-gray-300 p-1 text-sm select-none"
+      >
+        <div class="flex items-center">
+          <mat-icon class="mt-0.5 mr-2">reply</mat-icon>
+          <div class="flex flex-col">
+            <span class="font-medium">
+              Replying to {{ replyingToNote.user.displayName }} ({{ replyingToNote.user.nickname }})
+            </span>
+            <span class="text-xs text-gray-600">{{ replyingToNote.note }}</span>
+          </div>
+        </div>
+        <mat-icon class="cursor-pointer" (click)="cancelReplyingToNote()">close</mat-icon>
+      </div>
+    }
+
+    <mat-form-field appearance="outline" class="flex w-full items-center">
+      <mat-label>Tutor note</mat-label>
+      <textarea
+        class="w-full resize-none px-1 py-0.5 placeholder:px-1 placeholder:py-0.5"
+        matInput
+        [(ngModel)]="noteText"
+      ></textarea>
+      <div class="flex justify-end">
+        <button color="primary" mat-raised-button (click)="submitNote()">Submit</button>
+      </div>
+    </mat-form-field>
+  </div>
+</div>
diff --git a/src/app/projects/states/tutor-notes/tutor-notes.component.scss b/src/app/projects/states/tutor-notes/tutor-notes.component.scss
new file mode 100644
index 0000000000..8fd9c46e72
--- /dev/null
+++ b/src/app/projects/states/tutor-notes/tutor-notes.component.scss
@@ -0,0 +1,62 @@
+.mat-icon {
+  color: #9696969d;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: center;
+  margin-left: 0.3em;
+}
+
+.mat-icon:hover {
+  color: black;
+}
+
+// Edit, reply and delete are real buttons, stripped back to look the way the bare icons
+// they replaced did.
+.note-action {
+  padding: 0;
+  border: 0;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+}
+
+.note-action:focus-visible {
+  border-radius: 2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.note-action:hover .mat-icon,
+.note-action:focus-visible .mat-icon {
+  color: black;
+}
+
+// The row used to be shown by a mouseover handler writing hoveredNoteId, which no keyboard
+// user could ever set. The reveal is CSS now, so it answers to focus inside the note as
+// well as to the pointer. It has to be opacity rather than display or visibility, both of
+// which would drop the buttons out of the tab order and leave :focus-within with no way to
+// ever become true.
+.note-actions {
+  opacity: 0;
+}
+
+.note-card:hover .note-actions,
+.note-card:focus-within .note-actions {
+  opacity: 1;
+}
+
+@keyframes blueGlowFade {
+  0% {
+    background-color: rgba(66, 133, 244, 0.6);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.flash-highlight {
+  animation: blueGlowFade 1s ease-out;
+}
diff --git a/src/app/projects/states/tutor-notes/tutor-notes.component.spec.ts b/src/app/projects/states/tutor-notes/tutor-notes.component.spec.ts
new file mode 100644
index 0000000000..d72f63f1ed
--- /dev/null
+++ b/src/app/projects/states/tutor-notes/tutor-notes.component.spec.ts
@@ -0,0 +1,104 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {EMPTY} from 'rxjs';
+import {UserService} from 'src/app/api/models/doubtfire-model';
+import {TutorNote} from 'src/app/api/models/tutor-note';
+import {TutorNoteService} from 'src/app/api/services/tutor-note.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {HumanizedDatePipe} from 'src/app/common/pipes/humanized-date.pipe';
+import {LocalizedDatePipe} from 'src/app/common/pipes/localized-date.pipe';
+import {MarkedPipe} from 'src/app/common/pipes/marked.pipe';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TutorNotesComponent} from './tutor-notes.component';
+
+const emptyProvider = {};
+const tutorNoteServiceStub = {
+  loadTutorNotes: () => EMPTY,
+  updateTutorNoteReplies: () => undefined,
+};
+
+describe('TutorNotesComponent', () => {
+  let component: TutorNotesComponent;
+  let fixture: ComponentFixture<TutorNotesComponent>;
+  let note: TutorNote;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TutorNotesComponent, HumanizedDatePipe, LocalizedDatePipe, MarkedPipe],
+      providers: [
+        {provide: UserService, useValue: emptyProvider},
+        {provide: TutorNoteService, useValue: tutorNoteServiceStub},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TutorNotesComponent);
+    component = fixture.componentInstance;
+    note = {
+      id: 3,
+      replyToId: null,
+      note: 'a tutor note',
+      user: {},
+      authorIsMe: true,
+      noteIsForMe: true,
+      readByUnitRole: false,
+    } as TutorNote;
+    component.unitRole = {tutorNotesCache: {currentValues: [note]}} as never;
+
+    fixture.detectChanges();
+    component.loadingTutorNotes = false;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  function card(): HTMLElement {
+    return fixture.nativeElement.querySelector('.note-card') as HTMLElement;
+  }
+
+  function editButton(): HTMLButtonElement {
+    return card().querySelector('.note-actions button') as HTMLButtonElement;
+  }
+
+  it('renders the note actions instead of gating them behind a pointer flag', () => {
+    const actions = card().querySelector('.note-actions') as HTMLElement;
+
+    expect(actions).toBeTruthy();
+    expect(actions.hasAttribute('hidden')).toBe(false);
+  });
+
+  it('builds the actions out of real buttons rather than bare icons', () => {
+    const buttons = card().querySelectorAll('.note-actions button');
+
+    expect(buttons.length).toBe(3);
+    expect(editButton().getAttribute('aria-label')).toBe('Edit this note');
+  });
+
+  it('does not meet the reveal condition while nothing in the note has focus', () => {
+    expect(card().matches(':focus-within')).toBe(false);
+  });
+
+  it('meets the reveal condition once the keyboard reaches the actions', () => {
+    editButton().focus();
+
+    expect(document.activeElement).toBe(editButton());
+    expect(card().matches(':focus-within')).toBe(true);
+  });
+
+  it('opens the editor through the button the pointer uses, not through injected state', () => {
+    const button = editButton();
+    button.focus();
+    button.click();
+    fixture.detectChanges();
+
+    expect(component.editingNote).toBe(note);
+    expect(card().querySelector('textarea')).toBeTruthy();
+  });
+});
diff --git a/src/app/projects/states/tutor-notes/tutor-notes.component.ts b/src/app/projects/states/tutor-notes/tutor-notes.component.ts
new file mode 100644
index 0000000000..4ee499642b
--- /dev/null
+++ b/src/app/projects/states/tutor-notes/tutor-notes.component.ts
@@ -0,0 +1,225 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {Task, UnitRole, UserService} from 'src/app/api/models/doubtfire-model';
+import {TutorNote} from 'src/app/api/models/tutor-note';
+import {TutorNoteService} from 'src/app/api/services/tutor-note.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-tutor-notes',
+  templateUrl: './tutor-notes.component.html',
+  styleUrl: './tutor-notes.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TutorNotesComponent implements OnInit {
+  @ViewChild('tutorNotesContainer') tutorNotesContainer!: ElementRef;
+  @ViewChild('tutorNoteEditor', {static: false}) tutorNoteEditor!: ElementRef<HTMLTextAreaElement>;
+
+  @Input() unitRole: UnitRole;
+  @Input() task: Task;
+
+  loadingTutorNotes: boolean = true;
+
+  noteText: string = '';
+
+  editingNote?: TutorNote;
+  editingNoteText?: string = '';
+
+  replyingToNote?: TutorNote;
+
+  constructor(
+    private userService: UserService,
+    private tutorNoteService: TutorNoteService,
+    private alertService: AlertService,
+    private confirmationModalService: ConfirmationModalService,
+  ) {}
+  ngOnInit(): void {
+    if (this.task && !this.unitRole) {
+      this.unitRole = this.task.tutor;
+    }
+
+    this.loadingTutorNotes = true;
+    this.tutorNoteService.loadTutorNotes(this.unitRole).subscribe((_notes) => {
+      this.loadingTutorNotes = false;
+      this.tutorNoteService.updateTutorNoteReplies(this.unitRole?.tutorNotesCache.currentValues);
+      this.scrollDown();
+    });
+    if (this.task) {
+      this.selectedTaskDefinitions.set(this.task.definition.abbreviation, true);
+    } else {
+      this.selectedTaskDefinitions.set('all', true);
+    }
+  }
+
+  scrollToComment(commentID: number) {
+    document.querySelector(`#comment-${commentID}`).scrollIntoView();
+  }
+
+  scrollDown() {
+    setTimeout(() => {
+      const el = this.tutorNotesContainer.nativeElement;
+      el.scrollTop = el.scrollHeight;
+    }, 50);
+  }
+
+  public submitNote() {
+    const noteText = this.noteText.trim();
+    if (noteText === '') {
+      return;
+    }
+
+    this.noteText = '';
+
+    this.tutorNoteService
+      .addNote(this.unitRole, noteText, this.task, this.replyingToNote)
+      .subscribe({
+        next: (_note) => {
+          this.alertService.success('Succesfully submitted note', 4000);
+          this.scrollDown();
+          this.replyingToNote = null;
+          this.tutorNoteService.updateTutorNoteReplies(
+            this.unitRole?.tutorNotesCache.currentValues,
+          );
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to create note: ${error}`, 4000);
+          this.noteText = noteText;
+        },
+      });
+  }
+
+  public updateNote() {
+    const noteText = this.editingNoteText.trim();
+    if (noteText === '' || !this.editingNote) {
+      return;
+    }
+
+    this.tutorNoteService.updateNote(this.unitRole, this.editingNote, noteText).subscribe({
+      next: (_note) => {
+        this.alertService.success('Succesfully updated note', 4000);
+        this.editingNote = null;
+        this.editingNoteText = '';
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to update note: ${error}`, 4000);
+      },
+    });
+  }
+
+  public markAsRead(note: TutorNote) {
+    this.tutorNoteService.markAsRead(this.unitRole, note).subscribe({
+      next: (response) => {
+        if (response) {
+          this.alertService.success(`Marked note as read`, 3000);
+        } else {
+          this.alertService.error(`Failed to mark as read`, 6000);
+        }
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to mark as read: ${error}`, 6000);
+      },
+    });
+  }
+
+  public deleteNote(note: TutorNote) {
+    this.confirmationModalService.show(
+      'Delete note',
+      'Are you sure want to delete this tutor note?',
+      () => {
+        note.delete();
+      },
+    );
+  }
+
+  public replyToNote(note: TutorNote) {
+    this.replyingToNote = note;
+  }
+  public cancelReplyingToNote() {
+    this.replyingToNote = null;
+  }
+
+  public editNote(note: TutorNote) {
+    if (!note.authorIsMe) {
+      return;
+    }
+
+    this.editingNote = note;
+    this.editingNoteText = note.note;
+    setTimeout(() => {
+      this.autoResizeTutorNoteEditor();
+      this.tutorNoteEditor?.nativeElement.focus();
+    });
+  }
+
+  public cancelEditingNote() {
+    this.editingNote = null;
+    this.editingNoteText = '';
+  }
+
+  public autoResizeTutorNoteEditor() {
+    const el = this.tutorNoteEditor.nativeElement;
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+  }
+
+  scrollToNote(note: TutorNote): void {
+    const el = document.getElementById(`note-${note.id}`);
+    if (el) {
+      el.scrollIntoView({behavior: 'smooth', block: 'center'});
+      el.classList.add('flash-highlight');
+      setTimeout(() => el.classList.remove('flash-highlight'), 1000);
+    }
+  }
+
+  public selectedTaskDefinitions: Map<string, boolean> = new Map<string, boolean>();
+
+  public get filteredNotes() {
+    const selected = this.selectedTaskDefinitions;
+    const allSelected = selected.size === 0 || selected.get('all');
+
+    return (
+      this.unitRole?.tutorNotesCache?.currentValues?.filter((note) => {
+        const abbr = note.taskDefinition?.abbreviation;
+        // if (!abbr) return false; // skip notes without taskDefinition
+        if (allSelected) {
+          return true;
+        }
+        return selected.get(abbr);
+      }) ?? []
+    );
+  }
+
+  toggleSelection(option: string) {
+    if (this.selectedTaskDefinitions.get(option)) {
+      this.selectedTaskDefinitions.set(option, false);
+    } else {
+      this.selectedTaskDefinitions.set(option, true);
+    }
+  }
+
+  public get taskDefinitionFilters() {
+    const abbrs =
+      this.unitRole.tutorNotesCache.currentValues
+        .map((note) => note.taskDefinition?.abbreviation)
+        .filter(Boolean) ?? [];
+
+    // Remove duplicates
+    return Array.from(new Set(abbrs));
+  }
+
+  openProject(event: Event, note: TutorNote) {
+    event.stopPropagation();
+    const link = document.createElement('a');
+    link.href = `/projects/${note.project.id}/dashboard/${note.taskDefinition.abbreviation}?tutor=true`;
+    link.target = '_blank';
+    link.click();
+  }
+}
diff --git a/src/app/projects/states/tutorials/tutorials.coffee b/src/app/projects/states/tutorials/tutorials.coffee
deleted file mode 100644
index 06c8d3d531..0000000000
--- a/src/app/projects/states/tutorials/tutorials.coffee
+++ /dev/null
@@ -1,24 +0,0 @@
-angular.module('doubtfire.projects.states.tutorials', [])
-
-#
-# Tasks state for projects
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'projects/tutorials', {
-    parent: 'projects/index'
-    url: '/tutorials'
-    controller: 'ProjectsTutorialsStateCtrl'
-    templateUrl: 'projects/states/tutorials/tutorials.tpl.html'
-    data:
-      task: "Tutorial List"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
-   }
-)
-
-.controller("ProjectsTutorialsStateCtrl", ($scope) ->
-  if $scope.unit.tutorialStreamsCache.size > 0
-    $scope.sortOrder = 'tutorialStream.name'
-  else
-    $scope.sortOrder = 'abbreviation'
-)
diff --git a/src/app/projects/states/tutorials/tutorials.component.html b/src/app/projects/states/tutorials/tutorials.component.html
new file mode 100644
index 0000000000..8d518cd183
--- /dev/null
+++ b/src/app/projects/states/tutorials/tutorials.component.html
@@ -0,0 +1,110 @@
+@if (project && unit) {
+  <f-page-container>
+    <div class="flex w-full flex-col gap-3">
+      <div>
+        <h2>Tutorials</h2>
+        <p class="max-w-5xl">
+          View available tutorials and manage your enrolment. Note that availability is subject to
+          capacity. If you are unable to enrol in a tutorial, please contact your unit coordinator.
+        </p>
+      </div>
+      <table
+        mat-table
+        matSort
+        matSortActive="stream"
+        matSortDirection="asc"
+        matSortDisableClear
+        [dataSource]="dataSource"
+        (matSortChange)="sortTableData($event)"
+      >
+        <ng-container matColumnDef="stream" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Stream</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            @if (unit.tutorialStreamsCache.size > 0) {
+              <div>{{ tutorial.tutorialStream?.name || 'All' }}</div>
+            } @else {
+              <div>N/A</div>
+            }
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="campus" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Campus</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            {{ tutorial.campus?.name || 'All' }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="code" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Code</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            {{ tutorial.abbreviation }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="day" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Day</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            {{ tutorial.meetingDay }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="time" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Time</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            {{ shortTime(tutorial.meetingTime) }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="room" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Room</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            {{ tutorial.meetingLocation }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="tutor" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Tutor</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            {{ tutorial.tutorName }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="actions" sticky>
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>Actions</th>
+          <td *matCellDef="let tutorial" mat-cell>
+            @if (project.isEnrolledIn(tutorial)) {
+              @if (unit.allowStudentChangeTutorial) {
+                <button mat-raised-button (click)="project.switchToTutorial(tutorial)">
+                  Withdraw
+                </button>
+              } @else {
+                <div
+                  class="text-green-600"
+                  matTooltip="You can not manually change tutorials for this unit"
+                  matTooltipPosition="above"
+                  matTooltipShowDelay="1000"
+                >
+                  Enrolled
+                </div>
+              }
+            } @else if (unit.allowStudentChangeTutorial) {
+              <button
+                color="primary"
+                mat-raised-button
+                [disabled]="!tutorial.hasCapacity()"
+                (click)="project.switchToTutorial(tutorial)"
+              >
+                Enrol
+              </button>
+            } @else {
+              <div></div>
+              <!-- <div>N/A</div> -->
+            }
+          </td>
+        </ng-container>
+        <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+        <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+      </table>
+    </div>
+  </f-page-container>
+}
diff --git a/src/app/projects/states/tutorials/tutorials.component.scss b/src/app/projects/states/tutorials/tutorials.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/projects/states/tutorials/tutorials.component.spec.ts b/src/app/projects/states/tutorials/tutorials.component.spec.ts
new file mode 100644
index 0000000000..6335871c7d
--- /dev/null
+++ b/src/app/projects/states/tutorials/tutorials.component.spec.ts
@@ -0,0 +1,57 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute} from '@angular/router';
+import {TutorialsComponent} from './tutorials.component';
+
+describe('TutorialsComponent', () => {
+  let component: TutorialsComponent;
+  let fixture: ComponentFixture<TutorialsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TutorialsComponent],
+      providers: [{provide: ActivatedRoute, useValue: {}}],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(TutorialsComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TutorialsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('shortTime', () => {
+    it('pads a single-digit hour and minute to HH:mm', () => {
+      expect(component.shortTime('9:5')).toBe('09:05');
+    });
+
+    it('leaves an already-valid HH:mm time unchanged', () => {
+      expect(component.shortTime('09:05')).toBe('09:05');
+    });
+
+    it('returns the raw string unchanged when it has no colon, instead of throwing', () => {
+      expect(component.shortTime('9am')).toBe('9am');
+    });
+
+    it('returns an empty string for an empty input, instead of throwing', () => {
+      expect(component.shortTime('')).toBe('');
+    });
+
+    it('returns an empty string for an undefined input, instead of throwing', () => {
+      expect(component.shortTime(undefined)).toBe('');
+    });
+
+    it('never throws, for any malformed or missing input', () => {
+      expect(() => component.shortTime('9am')).not.toThrow();
+      expect(() => component.shortTime('')).not.toThrow();
+      expect(() => component.shortTime(undefined)).not.toThrow();
+    });
+  });
+});
diff --git a/src/app/projects/states/tutorials/tutorials.component.ts b/src/app/projects/states/tutorials/tutorials.component.ts
new file mode 100644
index 0000000000..9a9150b39f
--- /dev/null
+++ b/src/app/projects/states/tutorials/tutorials.component.ts
@@ -0,0 +1,163 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Sort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, Subscription, of} from 'rxjs';
+import {Project, Tutorial, Unit} from 'src/app/api/models/doubtfire-model';
+
+@Component({
+  selector: 'f-tutorials',
+  templateUrl: './tutorials.component.html',
+  styleUrls: ['./tutorials.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TutorialsComponent implements OnInit, OnDestroy {
+  @Input() public project$: Observable<Project>;
+
+  filteredTutorials: Tutorial[] = [];
+
+  project: Project;
+  unit: Unit;
+
+  displayedColumns: string[] = [
+    'stream',
+    'campus',
+    'code',
+    'day',
+    'time',
+    'room',
+    'tutor',
+    'actions',
+  ];
+
+  dataSource: MatTableDataSource<Tutorial> = new MatTableDataSource([]);
+
+  private projectSub?: Subscription;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.project$ = this.project$ ?? of(this.route.parent?.snapshot.data.project as Project);
+
+    this.projectSub = this.project$?.subscribe((project) => {
+      if (!project || !project.unit) {
+        return;
+      }
+
+      this.project = project;
+      this.unit = project.unit;
+      this.filteredTutorials = this.tutorialCampusFilter([...(this.unit.tutorials ?? [])], project);
+      this.dataSource.data = this.filteredTutorials;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.projectSub?.unsubscribe();
+  }
+
+  /**
+   * Switches to the passed-in tutorial.
+   *
+   * @param tutorial
+   *
+   * @returns void
+   */
+  switchToTutorial(tutorial: Tutorial): void {
+    this.project.switchToTutorial(tutorial);
+  }
+
+  /**
+   * Filters a collection of passed-in tutorials based on the campus_id of the passed-in project.
+   *
+   * @param tutorials
+   * @param project
+   *
+   * @returns Tutorial[]
+   */
+  tutorialCampusFilter(tutorials: Tutorial[], project: Project): Tutorial[] {
+    if (!project) {
+      return tutorials;
+    }
+    return tutorials.filter((tutorial) => {
+      return (
+        !project.campus?.id ||
+        !tutorial.campus ||
+        tutorial.campus.id === project.campus.id ||
+        project.isEnrolledIn(tutorial)
+      );
+    });
+  }
+
+  /**
+   * Formats the passed-in time string to the format of: HH:mm
+   * Falls back to the raw value (or an empty string) when it is not a
+   * "hours:minutes" string, instead of throwing.
+   *
+   * @param meetingTime
+   *
+   * @returns string
+   */
+  shortTime(meetingTime?: string): string {
+    if (!meetingTime) {
+      return '';
+    }
+    const [hours, minutes] = meetingTime.split(':');
+    if (minutes === undefined) {
+      return meetingTime;
+    }
+    return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+  }
+
+  private sortCompare(
+    aValue: number | string | undefined,
+    bValue: number | string | undefined,
+    isAsc: boolean,
+  ) {
+    const left = aValue ?? '';
+    const right = bValue ?? '';
+
+    if (left === right) {
+      return 0;
+    }
+
+    return (left < right ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  sortTableData(sort: Sort) {
+    if (!sort.active || sort.direction === '') {
+      return;
+    }
+    this.dataSource.data = this.dataSource.data.sort((a, b) => {
+      switch (sort.active) {
+        case 'stream':
+          return this.sortCompare(
+            a.tutorialStream?.name,
+            b.tutorialStream?.name,
+            sort.direction === 'asc',
+          );
+        case 'campus':
+          return this.sortCompare(a.campus?.name, b.campus?.name, sort.direction === 'asc');
+        case 'code':
+          return this.sortCompare(a.abbreviation, b.abbreviation, sort.direction === 'asc');
+        case 'day': {
+          return this.sortCompare(a.meetingDay, b.meetingDay, sort.direction === 'asc');
+        }
+        case 'time': {
+          return this.sortCompare(
+            this.shortTime(a.meetingTime),
+            this.shortTime(b.meetingTime),
+            sort.direction === 'asc',
+          );
+        }
+        case 'room': {
+          return this.sortCompare(a.meetingLocation, b.meetingLocation, sort.direction === 'asc');
+        }
+        case 'tutor':
+          return this.sortCompare(a.tutorName, b.tutorName, sort.direction === 'asc');
+        default:
+          return 0;
+      }
+    });
+  }
+}
diff --git a/src/app/projects/states/tutorials/tutorials.scss b/src/app/projects/states/tutorials/tutorials.scss
deleted file mode 100644
index d402eae6a6..0000000000
--- a/src/app/projects/states/tutorials/tutorials.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-#tutorials-state table {
-  th.stream    { width: 10%; }
-  th.campus    { width: 20%; }
-  th.code    { width: 10%; }
-  th.day     { width: 10%; }
-  th.time    { width: 10%; }
-  th.room    { width: 10%; }
-  th.tutor   { width: 15%; }
-  th.actions { width: 15%; }
-}
diff --git a/src/app/projects/states/tutorials/tutorials.tpl.html b/src/app/projects/states/tutorials/tutorials.tpl.html
deleted file mode 100644
index fae91d6ae3..0000000000
--- a/src/app/projects/states/tutorials/tutorials.tpl.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<div class="container" id="tutorials-state">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h4 class="panel-title">Select a Tutorial</h4>
-    </div>
-    <div class="panel-body">
-      <p>
-        Click the plus on the specific tutorial to enrol in that tutorial, or click the minus icon to withdraw from your
-        current tutorial.
-      </p>
-    </div>
-    <table class="table table-condensed table-hover">
-      <thead>
-        <tr>
-          <th class="stream" ng-show="unit.tutorialStreamsCache.size > 0">
-            <a ng-click="sortOrder='tutorialStream.name'; reverse=!reverse">Stream</a>
-          </th>
-          <th class="campus">
-            <a ng-click="sortOrder='campus.name'; reverse=!reverse">Campus</a>
-          </th>
-          <th class="code">
-            <a ng-click="sortOrder='abbreviation'; reverse=!reverse">Code</a>
-          </th>
-          <th class="day">
-            <a ng-click="sortOrder='meetingDay'; reverse=!reverse">Day</a>
-          </th>
-          <th class="time">
-            <a ng-click="sortOrder='meetingTime'; reverse=!reverse">Time</a>
-          </th>
-          <th class="room">
-            <a ng-click="sortOrder='meetingLocation'; reverse=!reverse">Room</a>
-          </th>
-          <th class="tutor">
-            <a ng-click="sortOrder='tutorName'; reverse=!reverse">Tutor</a>
-          </th>
-          <th class="actions">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          ng-repeat="tutorial in unit.tutorials | tutorialCampusFilter:project | orderBy:sortOrder:reverse"
-          ng-class="{'info': tutorial == project.tutorial}"
-        >
-          <td ng-show="unit.tutorialStreamsCache.size > 0">{{tutorial.tutorialStream.name || 'All'}}</td>
-          <td>{{tutorial.campus ? tutorial.campus.name : 'All'}}</td>
-          <td>{{tutorial.abbreviation}}</td>
-          <td>{{tutorial.meetingDay}}</td>
-          <td>{{tutorial.meetingTime | date: 'shortTime'}}</td>
-          <td>{{tutorial.meetingLocation}}</td>
-          <td>{{tutorial.tutorName}}</td>
-          <td>
-            <button
-              class="btn btn-default btn-sm"
-              ng-click="project.switchToTutorial(tutorial)"
-              ng-hide="project.isEnrolledIn(tutorial) || !tutorial.hasCapacity()"
-            >
-              <i class="fa fa-plus"></i> Enrol
-            </button>
-            <button
-              class="btn btn-default btn-sm"
-              ng-click="project.switchToTutorial(tutorial)"
-              ng-show="project.isEnrolledIn(tutorial)"
-            >
-              <i class="fa fa-minus"></i> Withdraw
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
diff --git a/src/app/security/auth-callback.spec.ts b/src/app/security/auth-callback.spec.ts
new file mode 100644
index 0000000000..c55b1d1b33
--- /dev/null
+++ b/src/app/security/auth-callback.spec.ts
@@ -0,0 +1,103 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {
+  buildAuthCallbackFragment,
+  captureAndScrubAuthCallback,
+  consumeAuthCallback,
+  redactAuthCallbackFromUrl,
+  resetAuthCallbackForTest,
+} from './auth-callback';
+
+const SENTINEL = 'SECRET_CALLBACK_SENTINEL_7f91';
+
+describe('authentication callback security', () => {
+  beforeEach(() => resetAuthCallbackForTest());
+
+  it('captures a fragment callback and removes credentials before startup', () => {
+    let cleanUrl = '';
+
+    const safe = captureAndScrubAuthCallback(
+      `https://ontrack.example/sign_in#authToken=${SENTINEL}&username=student%40example.edu`,
+      (_data, _unused, url) => {
+        cleanUrl = String(url);
+      },
+    );
+
+    expect(safe).toBe(true);
+    expect(cleanUrl).toBe('/sign_in');
+    expect(cleanUrl).not.toContain(SENTINEL);
+    expect(consumeAuthCallback()).toEqual({
+      username: 'student@example.edu',
+      authToken: SENTINEL,
+      ltiToken: undefined,
+      ltik: undefined,
+      isLtiLogin: false,
+    });
+    expect(consumeAuthCallback()).toBeUndefined();
+  });
+
+  it('supports and scrubs a legacy LTI query while preserving unrelated values', () => {
+    let cleanUrl = '';
+
+    captureAndScrubAuthCallback(
+      `https://ontrack.example/sign_in?theme=dark&ltiToken=${SENTINEL}&ltik=launch-token&isLtiLogin=true#panel=help`,
+      (_data, _unused, url) => {
+        cleanUrl = String(url);
+      },
+    );
+
+    expect(cleanUrl).toBe('/sign_in?theme=dark#panel=help');
+    expect(consumeAuthCallback()).toMatchObject({
+      ltiToken: SENTINEL,
+      ltik: 'launch-token',
+      isLtiLogin: true,
+    });
+  });
+
+  it('disables telemetry and drops the callback when history cannot be scrubbed', () => {
+    const safe = captureAndScrubAuthCallback(
+      `https://ontrack.example/sign_in#authToken=${SENTINEL}`,
+      () => {
+        throw new Error('history unavailable');
+      },
+    );
+
+    expect(safe).toBe(false);
+    expect(consumeAuthCallback()).toBeUndefined();
+  });
+
+  it('encodes fragment callbacks without putting values in a query', () => {
+    const fragment = buildAuthCallbackFragment({
+      username: 'student+alias@example.edu',
+      authToken: `${SENTINEL}+/=`,
+      isLtiLogin: true,
+    });
+    const values = new URLSearchParams(fragment);
+
+    expect(fragment).not.toContain('?');
+    expect(values.get('username')).toBe('student+alias@example.edu');
+    expect(values.get('authToken')).toBe(`${SENTINEL}+/=`);
+    expect(values.get('isLtiLogin')).toBe('true');
+  });
+
+  it('redacts callback secrets from telemetry URLs', () => {
+    const callbackUsername = 'student.person@example.edu';
+    const redacted = redactAuthCallbackFromUrl(
+      `https://ontrack.example/sign_in?authToken=${SENTINEL}&username=${encodeURIComponent(callbackUsername)}#ltik=${SENTINEL}&user_name=${encodeURIComponent(callbackUsername)}`,
+    );
+
+    expect(redacted).not.toContain(SENTINEL);
+    expect(redacted).not.toContain('student.person');
+    expect(redacted).not.toContain(encodeURIComponent(callbackUsername));
+    expect(redacted).toContain('%5BFiltered%5D');
+  });
+
+  it('redacts inherited SCORM path credentials from telemetry URLs', () => {
+    const redacted = redactAuthCallbackFromUrl(
+      `https://ontrack.example/api/scorm/42/student/${SENTINEL}/index.html`,
+    );
+
+    expect(redacted).not.toContain('student');
+    expect(redacted).not.toContain(SENTINEL);
+    expect(redacted).toContain('/api/scorm/42/[Filtered]/[Filtered]/index.html');
+  });
+});
diff --git a/src/app/security/auth-callback.ts b/src/app/security/auth-callback.ts
new file mode 100644
index 0000000000..6cc54adab4
--- /dev/null
+++ b/src/app/security/auth-callback.ts
@@ -0,0 +1,151 @@
+export interface AuthCallbackParameters {
+  username?: string;
+  authToken?: string;
+  ltiToken?: string;
+  ltik?: string;
+  isLtiLogin?: boolean;
+}
+
+type ReplaceState = (data: unknown, unused: string, url?: string | URL | null) => void;
+
+const CALLBACK_KEYS = [
+  'username',
+  'authToken',
+  'auth_token',
+  'ltiToken',
+  'lti_token',
+  'ltik',
+  'isLtiLogin',
+] as const;
+const SECRET_KEYS = ['authToken', 'auth_token', 'ltiToken', 'lti_token', 'ltik'] as const;
+const TELEMETRY_KEYS = [...SECRET_KEYS, 'username', 'user_name'] as const;
+
+let pendingCallback: AuthCallbackParameters | undefined;
+
+const firstValue = (
+  fragment: URLSearchParams,
+  query: URLSearchParams,
+  ...keys: string[]
+): string | undefined => {
+  for (const key of keys) {
+    const value = fragment.get(key) ?? query.get(key);
+    if (value !== null) {
+      return value;
+    }
+  }
+
+  return undefined;
+};
+
+const callbackFragment = (hash: string): URLSearchParams =>
+  new URLSearchParams(hash.replace(/^#\??/, ''));
+
+/**
+ * Capture a one-time authentication callback in module memory and remove it
+ * from the address bar before telemetry or Angular start. No callback value is
+ * persisted in browser storage or exposed on window.
+ */
+export const captureAndScrubAuthCallback = (
+  href: string = globalThis.location.href,
+  replaceState: ReplaceState = (data, unused, url) =>
+    globalThis.history.replaceState(data, unused, url),
+): boolean => {
+  try {
+    const url = new URL(href);
+    const fragment = callbackFragment(url.hash);
+    const containsSecret = SECRET_KEYS.some(
+      (key) => fragment.has(key) || url.searchParams.has(key),
+    );
+
+    if (!containsSecret) {
+      return true;
+    }
+
+    const callback: AuthCallbackParameters = {
+      username: firstValue(fragment, url.searchParams, 'username'),
+      authToken: firstValue(fragment, url.searchParams, 'authToken', 'auth_token'),
+      ltiToken: firstValue(fragment, url.searchParams, 'ltiToken', 'lti_token'),
+      ltik: firstValue(fragment, url.searchParams, 'ltik'),
+      isLtiLogin: firstValue(fragment, url.searchParams, 'isLtiLogin')?.toLowerCase() === 'true',
+    };
+
+    for (const key of CALLBACK_KEYS) {
+      fragment.delete(key);
+      url.searchParams.delete(key);
+    }
+
+    const remainingFragment = fragment.toString();
+    url.hash = remainingFragment ? `#${remainingFragment}` : '';
+    replaceState(globalThis.history?.state ?? null, '', `${url.pathname}${url.search}${url.hash}`);
+    pendingCallback = callback;
+    return true;
+  } catch {
+    // If the browser cannot remove the credential from the address bar, keep
+    // telemetry disabled and force the user through a fresh sign-in.
+    pendingCallback = undefined;
+    return false;
+  }
+};
+
+export const consumeAuthCallback = (): AuthCallbackParameters | undefined => {
+  const callback = pendingCallback;
+  pendingCallback = undefined;
+  return callback;
+};
+
+export const buildAuthCallbackFragment = (callback: AuthCallbackParameters): string => {
+  const params = new URLSearchParams();
+
+  if (callback.username) {
+    params.set('username', callback.username);
+  }
+  if (callback.authToken) {
+    params.set('authToken', callback.authToken);
+  }
+  if (callback.ltiToken) {
+    params.set('ltiToken', callback.ltiToken);
+  }
+  if (callback.ltik) {
+    params.set('ltik', callback.ltik);
+  }
+  if (callback.isLtiLogin) {
+    params.set('isLtiLogin', 'true');
+  }
+
+  return params.toString();
+};
+
+/** Replace credentials defensively if an error SDK later receives a URL. */
+export const redactAuthCallbackFromUrl = (value: string): string => {
+  try {
+    const url = new URL(value, globalThis.location?.origin ?? 'https://invalid.local');
+    const fragment = callbackFragment(url.hash);
+
+    // The inherited SCORM launch endpoint embeds username/token path segments.
+    // Redact them from browser telemetry until that endpoint is replaced by a
+    // cookie/header-backed launch exchange.
+    url.pathname = url.pathname.replace(
+      /(\/scorm\/[^/]+\/)[^/]+\/[^/]+(?=\/|$)/,
+      '$1[Filtered]/[Filtered]',
+    );
+
+    for (const key of TELEMETRY_KEYS) {
+      if (url.searchParams.has(key)) {
+        url.searchParams.set(key, '[Filtered]');
+      }
+      if (fragment.has(key)) {
+        fragment.set(key, '[Filtered]');
+      }
+    }
+
+    const redactedFragment = fragment.toString();
+    url.hash = redactedFragment ? `#${redactedFragment}` : '';
+    return url.toString();
+  } catch {
+    return '[Filtered URL]';
+  }
+};
+
+export const resetAuthCallbackForTest = (): void => {
+  pendingCallback = undefined;
+};
diff --git a/src/app/security/auth-return-url.service.spec.ts b/src/app/security/auth-return-url.service.spec.ts
new file mode 100644
index 0000000000..bc6ff66e84
--- /dev/null
+++ b/src/app/security/auth-return-url.service.spec.ts
@@ -0,0 +1,91 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {AuthReturnUrlService, normaliseAuthReturnUrl} from './auth-return-url.service';
+
+describe('AuthReturnUrlService', () => {
+  let service: AuthReturnUrlService;
+
+  beforeEach(() => {
+    sessionStorage.clear();
+    service = new AuthReturnUrlService();
+  });
+
+  afterEach(() => {
+    sessionStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('restores a protected route exactly once after authentication', () => {
+    const target = '/projects/2/dashboard/1.1P/feedback?source=push#latest';
+
+    expect(service.remember(target)).toBe(true);
+    expect(service.consume()).toBe(target);
+    expect(service.consume()).toBeNull();
+  });
+
+  it('survives a full-page SSO round trip in the same tab', () => {
+    const target = '/projects/2/dashboard/1.1P/feedback';
+    service.remember(target);
+
+    // A new root service instance represents the application booting again
+    // after the identity provider redirects back to /sign_in.
+    const serviceAfterSsoCallback = new AuthReturnUrlService();
+
+    expect(serviceAfterSsoCallback.consume()).toBe(target);
+  });
+
+  it.each([
+    'https://evil.example/projects/2',
+    '//evil.example/projects/2',
+    '/\\evil.example/projects/2',
+    '/sign_in?returnUrl=%2Fprojects%2F2',
+    '/timeout',
+    '/welcome',
+    '/lti',
+    '/lti/link',
+  ])('rejects unsafe or auth-loop destination %s', (target) => {
+    expect(service.remember(target)).toBe(false);
+    expect(service.consume()).toBeNull();
+  });
+
+  it.each([
+    '/projects/2?authToken=secret',
+    '/projects/2#auth_token=secret',
+    '/projects/2#ltiToken=secret&ltik=launch',
+  ])('does not persist callback credentials from %s', (target) => {
+    expect(service.remember(target)).toBe(false);
+  });
+
+  it('normalises only same-origin application paths', () => {
+    expect(normaliseAuthReturnUrl('/notifications?filter=unread', 'https://ontrack.example')).toBe(
+      '/notifications?filter=unread',
+    );
+    expect(
+      normaliseAuthReturnUrl('https://ontrack.example/notifications', 'https://ontrack.example'),
+    ).toBeNull();
+  });
+
+  it('clears a pending destination on explicit sign out', () => {
+    service.remember('/projects/2/dashboard/1.1P/feedback');
+
+    service.clear();
+
+    expect(new AuthReturnUrlService().consume()).toBeNull();
+  });
+
+  it('drops a stale destination instead of surprising a later login', () => {
+    const clock = vi.spyOn(Date, 'now').mockReturnValue(1_000);
+    service.remember('/projects/2/dashboard/1.1P/feedback');
+    clock.mockReturnValue(1_000 + 30 * 60 * 1000 + 1);
+
+    expect(service.consume()).toBeNull();
+  });
+
+  it('drops a stored destination with a non-finite timestamp', () => {
+    sessionStorage.setItem(
+      'doubtfire_auth_return_url',
+      '{"url":"/projects/2/dashboard/1.1P/feedback","capturedAt":1e999}',
+    );
+
+    expect(service.consume()).toBeNull();
+  });
+});
diff --git a/src/app/security/auth-return-url.service.ts b/src/app/security/auth-return-url.service.ts
new file mode 100644
index 0000000000..e6cf89f471
--- /dev/null
+++ b/src/app/security/auth-return-url.service.ts
@@ -0,0 +1,165 @@
+import {Injectable} from '@angular/core';
+
+const STORAGE_KEY = 'doubtfire_auth_return_url';
+const MAX_AGE_MS = 30 * 60 * 1000;
+const MAX_URL_LENGTH = 4096;
+
+const AUTH_FLOW_PATHS = new Set([
+  '/sign_in',
+  '/timeout',
+  '/welcome',
+  '/unauthorised',
+  '/success-close',
+  '/lti',
+  '/lti/link',
+]);
+
+const CALLBACK_SECRET_KEYS = new Set(['authToken', 'auth_token', 'ltiToken', 'lti_token', 'ltik']);
+
+interface StoredReturnUrl {
+  url: string;
+  capturedAt: number;
+}
+
+const hasControlCharacters = (value: string): boolean =>
+  Array.from(value).some((character) => {
+    const code = character.charCodeAt(0);
+    return code <= 0x1f || code === 0x7f;
+  });
+
+const containsCallbackSecret = (url: URL): boolean => {
+  if ([...CALLBACK_SECRET_KEYS].some((key) => url.searchParams.has(key))) {
+    return true;
+  }
+
+  const fragment = new URLSearchParams(url.hash.replace(/^#\??/, ''));
+  return [...CALLBACK_SECRET_KEYS].some((key) => fragment.has(key));
+};
+
+/**
+ * Accept only a local application path. This value is eventually handed to
+ * Router.navigateByUrl, so rejecting absolute and protocol-relative URLs here
+ * prevents the saved destination becoming an open redirect in a future auth
+ * integration.
+ */
+export const normaliseAuthReturnUrl = (
+  candidate: string,
+  origin: string = globalThis.location?.origin ?? 'https://invalid.local',
+): string | null => {
+  if (
+    !candidate ||
+    candidate.length > MAX_URL_LENGTH ||
+    !candidate.startsWith('/') ||
+    candidate.startsWith('//') ||
+    candidate.includes('\\') ||
+    hasControlCharacters(candidate)
+  ) {
+    return null;
+  }
+
+  try {
+    const base = new URL(origin);
+    const url = new URL(candidate, base);
+
+    if (url.origin !== base.origin || AUTH_FLOW_PATHS.has(url.pathname)) {
+      return null;
+    }
+
+    if (containsCallbackSecret(url)) {
+      return null;
+    }
+
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Keeps a protected destination across the sign-in page and a full-page SSO
+ * round trip. Session storage is intentionally tab-scoped; a destination from
+ * one user or tab must not unexpectedly redirect another browser session.
+ */
+@Injectable({providedIn: 'root'})
+export class AuthReturnUrlService {
+  private memoryFallback: StoredReturnUrl | null = null;
+
+  public remember(url: string): boolean {
+    const normalised = normaliseAuthReturnUrl(url);
+    if (!normalised) {
+      return false;
+    }
+
+    const entry: StoredReturnUrl = {url: normalised, capturedAt: Date.now()};
+    this.memoryFallback = entry;
+
+    try {
+      globalThis.sessionStorage?.setItem(STORAGE_KEY, JSON.stringify(entry));
+    } catch {
+      // Some embedded or privacy-restricted browsers disable storage. The
+      // in-memory value still handles a database login without a page reload.
+    }
+
+    return true;
+  }
+
+  public rememberCurrentUrl(): boolean {
+    try {
+      return this.remember(
+        `${globalThis.location.pathname}${globalThis.location.search}${globalThis.location.hash}`,
+      );
+    } catch {
+      return false;
+    }
+  }
+
+  public consume(): string | null {
+    const entry = this.readAndRemove();
+    if (
+      !entry ||
+      !Number.isFinite(entry.capturedAt) ||
+      Date.now() - entry.capturedAt > MAX_AGE_MS ||
+      entry.capturedAt > Date.now()
+    ) {
+      return null;
+    }
+
+    return normaliseAuthReturnUrl(entry.url);
+  }
+
+  public clear(): void {
+    this.memoryFallback = null;
+    try {
+      globalThis.sessionStorage?.removeItem(STORAGE_KEY);
+    } catch {
+      // Nothing else to clear when browser storage is unavailable.
+    }
+  }
+
+  private readAndRemove(): StoredReturnUrl | null {
+    let entry = this.memoryFallback;
+    this.memoryFallback = null;
+
+    try {
+      const stored = globalThis.sessionStorage?.getItem(STORAGE_KEY);
+      globalThis.sessionStorage?.removeItem(STORAGE_KEY);
+      if (stored) {
+        const parsed: unknown = JSON.parse(stored);
+        if (
+          typeof parsed === 'object' &&
+          parsed !== null &&
+          typeof parsed['url'] === 'string' &&
+          typeof parsed['capturedAt'] === 'number'
+        ) {
+          entry = parsed as StoredReturnUrl;
+        } else {
+          entry = null;
+        }
+      }
+    } catch {
+      // Use the in-memory copy when storage is blocked or malformed.
+    }
+
+    return entry;
+  }
+}
diff --git a/src/app/sessions/auth/http-auth-injector.coffee b/src/app/sessions/auth/http-auth-injector.coffee
deleted file mode 100644
index 56ef98961e..0000000000
--- a/src/app/sessions/auth/http-auth-injector.coffee
+++ /dev/null
@@ -1,37 +0,0 @@
-angular.module("doubtfire.sessions.auth.http-auth-injector", [])
-#
-# This module is responsible for injecting the auth credentials to
-# all
-#
-.config(($httpProvider) ->
-  $httpProvider.interceptors.push ($q, $rootScope, DoubtfireConstants, newUserService) ->
-    #
-    # Inject authentication token for requests
-    #
-    injectAuthForRequest = (request) ->
-      # Intercept API requests and inject the auth token.
-      if _.startsWith(request.url, DoubtfireConstants.API_URL) and newUserService.currentUser.authenticationToken?
-        request.headers = {} unless _.has(request, "headers")
-        request.headers.Auth_Token = newUserService.currentUser.authenticationToken
-        request.headers.Username = newUserService.currentUser.username
-      request or $q.when request
-
-    #
-    # Inject handlers for 419 and 401 response errors
-    #
-    injectAuthForResponseWithError = (response) ->
-      # Intercept unauthorised API responses and fire an event.
-      if response.config && response.config.url and _.startsWith(response.config.url, DoubtfireConstants.API_URL)
-        # Timeout?
-        if response.status is 419
-          $rootScope.$broadcast "tokenTimeout"
-        # Unauthorised?
-        else if response.status is 401
-          $rootScope.$broadcast "unauthorisedRequestIntercepted"
-      $q.reject response
-
-    {
-      request: injectAuthForRequest
-      responseError: injectAuthForResponseWithError
-    }
-)
diff --git a/src/app/sessions/install-prompt/install-prompt.service.spec.ts b/src/app/sessions/install-prompt/install-prompt.service.spec.ts
new file mode 100644
index 0000000000..6257ead951
--- /dev/null
+++ b/src/app/sessions/install-prompt/install-prompt.service.spec.ts
@@ -0,0 +1,166 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Subject} from 'rxjs';
+import {BeforeInstallPromptEvent, InstallPromptService} from './install-prompt.service';
+
+interface InstallPromptServicePrivate {
+  isIos(): boolean;
+  isStandalone(): boolean;
+}
+
+describe('InstallPromptService', () => {
+  let snackBarSpy: {open: ReturnType<typeof vi.fn>};
+  let snackBarRefSpy: {
+    onAction: ReturnType<typeof vi.fn>;
+    afterDismissed: ReturnType<typeof vi.fn>;
+  };
+  let actionSubject: Subject<void>;
+  let afterDismissedSubject: Subject<void>;
+  let localStorageMock: Storage;
+
+  beforeEach(() => {
+    actionSubject = new Subject<void>();
+    afterDismissedSubject = new Subject<void>();
+
+    snackBarRefSpy = {
+      onAction: vi.fn().mockReturnValue(actionSubject.asObservable()),
+      afterDismissed: vi.fn().mockReturnValue(afterDismissedSubject.asObservable()),
+    };
+
+    snackBarSpy = {
+      open: vi.fn().mockReturnValue(snackBarRefSpy),
+    };
+
+    const storedValues: Map<string, string> = new Map();
+    localStorageMock = {
+      get length() {
+        return storedValues.size;
+      },
+      clear: vi.fn(() => storedValues.clear()),
+      getItem: vi.fn((key: string) => storedValues.get(key) ?? null),
+      key: vi.fn((index: number) => [...storedValues.keys()][index] ?? null),
+      removeItem: vi.fn((key: string) => storedValues.delete(key)),
+      setItem: vi.fn((key: string, value: string) => storedValues.set(key, value)),
+    };
+    Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      value: localStorageMock,
+    });
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+    vi.restoreAllMocks();
+  });
+
+  function createService(): InstallPromptService {
+    TestBed.configureTestingModule({
+      providers: [InstallPromptService, {provide: MatSnackBar, useValue: snackBarSpy}],
+    });
+    return TestBed.inject(InstallPromptService);
+  }
+
+  it('should be created', () => {
+    const service = createService();
+    expect(service).toBeTruthy();
+  });
+
+  it('should do nothing if previously dismissed in localStorage', () => {
+    localStorageMock.setItem('ontrack_pwa_install_dismissed', 'true');
+    createService();
+
+    expect(snackBarSpy.open).not.toHaveBeenCalled();
+  });
+
+  describe('Non-iOS Flow', () => {
+    beforeEach(() => {
+      vi.spyOn(
+        InstallPromptService.prototype as unknown as InstallPromptServicePrivate,
+        'isIos',
+      ).mockReturnValue(false);
+    });
+
+    it('should open snackbar and trigger prompt on user action', async () => {
+      createService();
+
+      const mockEvent = new Event('beforeinstallprompt') as BeforeInstallPromptEvent;
+      const promptSpy = vi.fn().mockResolvedValue(undefined);
+      const preventDefaultSpy = vi.spyOn(mockEvent, 'preventDefault');
+      Object.defineProperty(mockEvent, 'prompt', {value: promptSpy});
+      Object.defineProperty(mockEvent, 'userChoice', {
+        value: Promise.resolve({outcome: 'accepted', platform: 'web'}),
+      });
+
+      window.dispatchEvent(mockEvent);
+
+      expect(preventDefaultSpy).toHaveBeenCalled();
+      expect(snackBarSpy.open).toHaveBeenCalledWith(
+        'Install OnTrack for quicker access and notifications',
+        'Install',
+        {duration: 10000},
+      );
+
+      actionSubject.next();
+      await Promise.resolve();
+      expect(promptSpy).toHaveBeenCalled();
+    });
+
+    it('should save dismissal to localStorage when snackbar is dismissed', () => {
+      createService();
+
+      const mockEvent = new Event('beforeinstallprompt');
+      window.dispatchEvent(mockEvent);
+
+      afterDismissedSubject.next();
+      expect(localStorageMock.getItem('ontrack_pwa_install_dismissed')).toBe('true');
+    });
+  });
+
+  describe('iOS Flow', () => {
+    beforeEach(() => {
+      vi.spyOn(
+        InstallPromptService.prototype as unknown as InstallPromptServicePrivate,
+        'isIos',
+      ).mockReturnValue(true);
+    });
+
+    it('should show iOS prompt if not in standalone mode', () => {
+      vi.spyOn(
+        InstallPromptService.prototype as unknown as InstallPromptServicePrivate,
+        'isStandalone',
+      ).mockReturnValue(false);
+
+      createService();
+
+      expect(snackBarSpy.open).toHaveBeenCalledWith(
+        'To install OnTrack: tap Share then "Add to Home Screen"',
+        'Got it',
+        {duration: 10000},
+      );
+    });
+
+    it('should not show prompt if already in standalone mode', () => {
+      vi.spyOn(
+        InstallPromptService.prototype as unknown as InstallPromptServicePrivate,
+        'isStandalone',
+      ).mockReturnValue(true);
+
+      createService();
+
+      expect(snackBarSpy.open).not.toHaveBeenCalled();
+    });
+
+    it('should save dismissal to localStorage when iOS snackbar is dismissed', () => {
+      vi.spyOn(
+        InstallPromptService.prototype as unknown as InstallPromptServicePrivate,
+        'isStandalone',
+      ).mockReturnValue(false);
+
+      createService();
+
+      afterDismissedSubject.next();
+      expect(localStorageMock.getItem('ontrack_pwa_install_dismissed')).toBe('true');
+    });
+  });
+});
diff --git a/src/app/sessions/install-prompt/install-prompt.service.ts b/src/app/sessions/install-prompt/install-prompt.service.ts
new file mode 100644
index 0000000000..88b90e6b04
--- /dev/null
+++ b/src/app/sessions/install-prompt/install-prompt.service.ts
@@ -0,0 +1,100 @@
+import {Injectable, OnDestroy} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+
+export interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[];
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+}
+
+const DISMISSED_KEY = 'ontrack_pwa_install_dismissed';
+const PROMPT_DURATION = 10000;
+
+@Injectable()
+export class InstallPromptService implements OnDestroy {
+  private beforeInstallPrompt: BeforeInstallPromptEvent | null = null;
+  private readonly handleBeforeInstallPrompt = (event: Event): void => {
+    event.preventDefault();
+
+    this.beforeInstallPrompt = event as BeforeInstallPromptEvent;
+
+    const snackBarRef = this._snackBar.open(
+      'Install OnTrack for quicker access and notifications',
+      'Install',
+      {duration: PROMPT_DURATION},
+    );
+
+    snackBarRef.onAction().subscribe(() => {
+      void this.showInstallPrompt();
+    });
+
+    snackBarRef.afterDismissed().subscribe(() => {
+      this.rememberDismissal();
+    });
+  };
+
+  constructor(private _snackBar: MatSnackBar) {
+    if (window.localStorage.getItem(DISMISSED_KEY) === 'true' || this.isStandalone()) {
+      return;
+    }
+
+    if (this.isIos()) {
+      this.showIosPrompt();
+      return;
+    }
+
+    window.addEventListener('beforeinstallprompt', this.handleBeforeInstallPrompt);
+  }
+
+  public ngOnDestroy(): void {
+    window.removeEventListener('beforeinstallprompt', this.handleBeforeInstallPrompt);
+  }
+
+  private async showInstallPrompt(): Promise<void> {
+    const prompt = this.beforeInstallPrompt;
+    this.beforeInstallPrompt = null;
+
+    if (!prompt) {
+      return;
+    }
+
+    await prompt.prompt();
+    await prompt.userChoice;
+  }
+
+  private showIosPrompt(): void {
+    const snackBarRef = this._snackBar.open(
+      'To install OnTrack: tap Share then "Add to Home Screen"',
+      'Got it',
+      {duration: PROMPT_DURATION},
+    );
+
+    snackBarRef.afterDismissed().subscribe(() => {
+      this.rememberDismissal();
+    });
+  }
+
+  private rememberDismissal(): void {
+    window.localStorage.setItem(DISMISSED_KEY, 'true');
+  }
+
+  private isIos(): boolean {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    return (
+      /iphone|ipad|ipod/.test(userAgent) ||
+      (userAgent.includes('macintosh') && window.navigator.maxTouchPoints > 1)
+    );
+  }
+
+  private isStandalone(): boolean {
+    return (
+      (typeof window.matchMedia === 'function' &&
+        window.matchMedia('(display-mode: standalone)').matches) ||
+      ('standalone' in window.navigator &&
+        (window.navigator as unknown as {standalone: boolean}).standalone)
+    );
+  }
+}
diff --git a/src/app/sessions/service-worker-updater/check-for-update.service.spec.ts b/src/app/sessions/service-worker-updater/check-for-update.service.spec.ts
new file mode 100644
index 0000000000..6ffeac7e92
--- /dev/null
+++ b/src/app/sessions/service-worker-updater/check-for-update.service.spec.ts
@@ -0,0 +1,152 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {ApplicationRef} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {SwUpdate, UnrecoverableStateEvent, VersionEvent} from '@angular/service-worker';
+import {Subject} from 'rxjs';
+import {CheckForUpdateService} from './check-for-update.service';
+
+const APP_STABILITY_DELAY_MS = 10 * 1000;
+const UPDATE_CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000;
+
+describe('CheckForUpdateService', () => {
+  let service: CheckForUpdateService;
+  let appIsStable: Subject<boolean>;
+  let versionUpdates: Subject<VersionEvent>;
+  let unrecoverable: Subject<UnrecoverableStateEvent>;
+  let updateActions: Subject<void>[];
+  let reload: ReturnType<typeof vi.fn>;
+  let updates: {
+    isEnabled: boolean;
+    versionUpdates: Subject<VersionEvent>;
+    unrecoverable: Subject<UnrecoverableStateEvent>;
+    checkForUpdate: ReturnType<typeof vi.fn>;
+    activateUpdate: ReturnType<typeof vi.fn>;
+  };
+  let snackBar: {open: ReturnType<typeof vi.fn>};
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    appIsStable = new Subject<boolean>();
+    versionUpdates = new Subject<VersionEvent>();
+    unrecoverable = new Subject<UnrecoverableStateEvent>();
+    updateActions = [];
+    reload = vi.fn();
+    updates = {
+      isEnabled: true,
+      versionUpdates,
+      unrecoverable,
+      checkForUpdate: vi.fn().mockResolvedValue(false),
+      activateUpdate: vi.fn().mockResolvedValue(true),
+    };
+    snackBar = {
+      open: vi.fn(() => {
+        const action: Subject<void> = new Subject();
+        updateActions.push(action);
+        return {onAction: () => action};
+      }),
+    };
+
+    service = new CheckForUpdateService(
+      {isStable: appIsStable} as unknown as ApplicationRef,
+      updates as unknown as SwUpdate,
+      snackBar as unknown as MatSnackBar,
+      {location: {reload}} as unknown as Document,
+    );
+  });
+
+  afterEach(() => {
+    service.ngOnDestroy();
+    vi.useRealTimers();
+  });
+
+  it('checks after the app is stable for ten seconds and then every four hours', async () => {
+    appIsStable.next(false);
+    await vi.advanceTimersByTimeAsync(APP_STABILITY_DELAY_MS);
+    expect(updates.checkForUpdate).not.toHaveBeenCalled();
+
+    appIsStable.next(true);
+    await vi.advanceTimersByTimeAsync(APP_STABILITY_DELAY_MS - 1);
+    expect(updates.checkForUpdate).not.toHaveBeenCalled();
+
+    await vi.advanceTimersByTimeAsync(1);
+    expect(updates.checkForUpdate).toHaveBeenCalledTimes(1);
+
+    await vi.advanceTimersByTimeAsync(UPDATE_CHECK_INTERVAL_MS);
+    expect(updates.checkForUpdate).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not poll after the service is destroyed', async () => {
+    appIsStable.next(true);
+    await vi.advanceTimersByTimeAsync(APP_STABILITY_DELAY_MS);
+    expect(updates.checkForUpdate).toHaveBeenCalledTimes(1);
+
+    service.ngOnDestroy();
+    await vi.advanceTimersByTimeAsync(UPDATE_CHECK_INTERVAL_MS * 2);
+
+    expect(updates.checkForUpdate).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not check for updates when the service worker is disabled', async () => {
+    updates.isEnabled = false;
+    appIsStable.next(true);
+
+    await vi.advanceTimersByTimeAsync(APP_STABILITY_DELAY_MS + UPDATE_CHECK_INTERVAL_MS);
+
+    expect(updates.checkForUpdate).not.toHaveBeenCalled();
+  });
+
+  it('offers a reload for a ready version and reloads only after activation', async () => {
+    let finishActivation: (activated: boolean) => void;
+    updates.activateUpdate.mockReturnValue(
+      new Promise<boolean>((resolve) => {
+        finishActivation = resolve;
+      }),
+    );
+
+    versionUpdates.next({
+      type: 'VERSION_READY',
+      currentVersion: {hash: 'old'},
+      latestVersion: {hash: 'new'},
+    });
+
+    expect(snackBar.open).toHaveBeenCalledWith(
+      'A new version of OnTrack is ready. Reload to update now.',
+      'Reload',
+    );
+
+    updateActions[0].next();
+    expect(updates.activateUpdate).toHaveBeenCalledTimes(1);
+    expect(reload).not.toHaveBeenCalled();
+
+    finishActivation(true);
+    await Promise.resolve();
+
+    expect(reload).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores version events that are not ready to activate', () => {
+    versionUpdates.next({type: 'VERSION_DETECTED', version: {hash: 'new'}});
+    versionUpdates.next({type: 'NO_NEW_VERSION_DETECTED', version: {hash: 'current'}});
+    versionUpdates.next({
+      type: 'VERSION_INSTALLATION_FAILED',
+      version: {hash: 'broken'},
+      error: 'Download failed',
+    });
+
+    expect(snackBar.open).not.toHaveBeenCalled();
+  });
+
+  it('offers a direct reload when the current version is unrecoverable', () => {
+    unrecoverable.next({type: 'UNRECOVERABLE_STATE', reason: 'Cache is corrupt'});
+
+    expect(snackBar.open).toHaveBeenCalledWith(
+      'This version of OnTrack can no longer run safely. Reload to recover.',
+      'Reload',
+    );
+
+    updateActions[0].next();
+
+    expect(updates.activateUpdate).not.toHaveBeenCalled();
+    expect(reload).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/app/sessions/service-worker-updater/check-for-update.service.ts b/src/app/sessions/service-worker-updater/check-for-update.service.ts
index 409e444719..8bdfeb84e4 100644
--- a/src/app/sessions/service-worker-updater/check-for-update.service.ts
+++ b/src/app/sessions/service-worker-updater/check-for-update.service.ts
@@ -1,43 +1,71 @@
-import { ApplicationRef, Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-import { interval } from 'rxjs';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { delay } from 'rxjs/operators';
-import { concat } from 'rxjs';
+import {DOCUMENT} from '@angular/common';
+import {ApplicationRef, Inject, Injectable, OnDestroy} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {SwUpdate} from '@angular/service-worker';
+import {Subject, concat, delay, filter, from, interval, of, switchMap, take, takeUntil} from 'rxjs';
+
+const APP_STABILITY_DELAY_MS = 10 * 1000;
+const UPDATE_CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000;
 
 @Injectable()
-export class CheckForUpdateService {
-  constructor(appRef: ApplicationRef, private updates: SwUpdate, private _snackBar: MatSnackBar) {
-    // Allow the app to stabilize first, before starting polling for updates with `interval()`.
-    // const appIsStable$ = appRef.isStable.pipe(delay(10000));
-
-    // Checks every 4 hours
-    // const updateInterval$ = interval(4 * 60 * 60 * 1000);
-    // const updateIntervalOnceAppIsStable$ = concat(appIsStable$, updateInterval$);
-
-    // updateIntervalOnceAppIsStable$.subscribe((() => {
-    //   this.checkForUpdate();
-    // }).bind(this));
-    this.updates.versionUpdates.subscribe((updateEvent) => {
-      if (updateEvent.type === 'VERSION_READY') {
-        const snackBarRef = _snackBar.open(
-          'An update to the app has been found, would you like to refresh now?',
-          'refresh'
-        );
-        snackBarRef.onAction().subscribe((result) => {
-          updates.activateUpdate().then(() => document.location.reload());
-        });
+export class CheckForUpdateService implements OnDestroy {
+  private readonly destroy$: Subject<void> = new Subject();
+
+  constructor(
+    appRef: ApplicationRef,
+    private updates: SwUpdate,
+    private snackBar: MatSnackBar,
+    @Inject(DOCUMENT) private document: Document,
+  ) {
+    appRef.isStable
+      .pipe(
+        filter((isStable) => isStable),
+        take(1),
+        delay(APP_STABILITY_DELAY_MS),
+        switchMap(() => concat(of(0), interval(UPDATE_CHECK_INTERVAL_MS))),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(() => this.checkForUpdate());
+
+    this.updates.versionUpdates.pipe(takeUntil(this.destroy$)).subscribe((updateEvent) => {
+      if (updateEvent.type !== 'VERSION_READY') {
+        return;
       }
+
+      const snackBarRef = this.snackBar.open(
+        'A new version of OnTrack is ready. Reload to update now.',
+        'Reload',
+      );
+      snackBarRef
+        .onAction()
+        .pipe(
+          take(1),
+          switchMap(() => from(this.updates.activateUpdate())),
+          takeUntil(this.destroy$),
+        )
+        .subscribe(() => this.document.location.reload());
     });
 
-    this.updates.unrecoverable.subscribe((event) => {
-      _snackBar.open('An error occurred during update, please refresh the page');
+    this.updates.unrecoverable.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      const snackBarRef = this.snackBar.open(
+        'This version of OnTrack can no longer run safely. Reload to recover.',
+        'Reload',
+      );
+      snackBarRef
+        .onAction()
+        .pipe(take(1), takeUntil(this.destroy$))
+        .subscribe(() => this.document.location.reload());
     });
   }
 
-  public checkForUpdate() {
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public checkForUpdate(): void {
     if (this.updates.isEnabled) {
-      this.updates.checkForUpdate();
+      void this.updates.checkForUpdate();
     }
   }
 }
diff --git a/src/app/sessions/sessions.coffee b/src/app/sessions/sessions.coffee
deleted file mode 100644
index ccf6e6b5f1..0000000000
--- a/src/app/sessions/sessions.coffee
+++ /dev/null
@@ -1,3 +0,0 @@
-angular.module('doubtfire.sessions', [
-  "doubtfire.sessions.auth.http-auth-injector"
-])
diff --git a/src/app/sessions/states/sign-in/sign-in.component.html b/src/app/sessions/states/sign-in/sign-in.component.html
index cf7b12c70c..4777907528 100644
--- a/src/app/sessions/states/sign-in/sign-in.component.html
+++ b/src/app/sessions/states/sign-in/sign-in.component.html
@@ -1,55 +1,86 @@
-<section class="welcome flex flex-row custom-md-h-screen">
-  <f-hero-sidebar class="sidebar self-start flex-col h-full"></f-hero-sidebar>
-  <section class="content flex flex-col custom-md-h-screen">
-    <div class="container">
-      <div class="subcontainer">
-        <div class="wordmark flex-row place-content-start">
-          <img src="../../../assets/images/logo-bw.svg" width="40px" alt="Homepage Logo" />
-          <p>{{ externalName.value }}</p>
-        </div>
-        <h1 class="welcome-heading flex flex-row place-content-start">
-          Welcome to {{ externalName.value }}
-        </h1>
-        <form
-          #form="ngForm"
-          (ngSubmit)="signIn({username: formData.username, password: formData.password})"
-          class="sign-in-form flex flex-col"
-        >
-          @if (showCredentials) {
-            <mat-form-field appearance="outline" class="flex-1 h-full w-full">
-              <mat-label>Username</mat-label>
-              <input matInput name="username" required [(ngModel)]="formData.username" />
-            </mat-form-field>
-          }
-
-          @if (showCredentials) {
-            <mat-form-field appearance="outline" class="flex-1 h-full w-full">
-              <mat-label>Password</mat-label>
-              <input
-                type="password"
-                matInput
-                name="password"
-                required
-                [(ngModel)]="formData.password"
-              />
-            </mat-form-field>
-          }
-          @if (!showCredentials) {
-            <mat-checkbox matInput name="autoLogin" [(ngModel)]="formData.autoLogin"
-              >Login via Institution</mat-checkbox
+<section class="welcome custom-md-h-screen flex flex-row">
+  <f-hero-sidebar class="sidebar h-full flex-col self-start"></f-hero-sidebar>
+  <section class="content custom-md-h-screen flex flex-col">
+    @if (!isLoading) {
+      @if (!isLoading) {
+        <div class="m-auto w-full max-w-md p-4">
+          <div class="subcontainer">
+            <div class="wordmark flex-row place-content-start">
+              <img alt="Homepage Logo" src="../../../assets/images/logo-bw.svg" width="40px" />
+              <p>{{ externalName.value }}</p>
+            </div>
+            <h1 class="welcome-heading flex flex-row place-content-start">
+              Welcome to {{ externalName.value }}
+            </h1>
+            <form
+              #form="ngForm"
+              class="sign-in-form flex flex-col"
+              (ngSubmit)="
+                signIn({
+                  username: formData.username,
+                  password: formData.password,
+                  remember: authService.rememberMe,
+                  autoLogin: autoLogin,
+                })
+              "
             >
-          }
-          <button
-            class="w-full"
-            mat-flat-button
-            color="primary"
-            type="form"
-            [disabled]="form.invalid"
-          >
-            Sign In
-          </button>
-        </form>
+              @if (showCredentials) {
+                <mat-form-field appearance="outline" class="size-full flex-1">
+                  <mat-label>Username</mat-label>
+                  <input
+                    autocomplete="username"
+                    matInput
+                    name="username"
+                    required
+                    [(ngModel)]="formData.username"
+                  />
+                </mat-form-field>
+              }
+              @if (showCredentials) {
+                <mat-form-field appearance="outline" class="size-full flex-1">
+                  <mat-label>Password</mat-label>
+                  <input
+                    autocomplete="current-password"
+                    matInput
+                    name="password"
+                    required
+                    type="password"
+                    [(ngModel)]="formData.password"
+                  />
+                </mat-form-field>
+              }
+              @if (!showCredentials) {
+                <mat-checkbox matInput name="autoLogin" [(ngModel)]="autoLogin">
+                  Automatically redirect
+                </mat-checkbox>
+              }
+              <mat-checkbox matInput name="remember" [(ngModel)]="authService.rememberMe">
+                Stay logged in
+              </mat-checkbox>
+              <button
+                class="w-full"
+                color="primary"
+                mat-flat-button
+                type="form"
+                [disabled]="form.invalid"
+              >
+                <div class="flex items-center gap-1">
+                  @if (redirectingSSO) {
+                    Signing In...
+                    <mat-spinner diameter="20"></mat-spinner>
+                  } @else {
+                    Sign In
+                  }
+                </div>
+              </button>
+            </form>
+          </div>
+        </div>
+      }
+    } @else if (authMethodFailed) {
+      <div class="maintenance flex flex-1 flex-col items-center justify-center text-center">
+        <f-unavailable-card></f-unavailable-card>
       </div>
-    </div>
+    }
   </section>
 </section>
diff --git a/src/app/sessions/states/sign-in/sign-in.component.scss b/src/app/sessions/states/sign-in/sign-in.component.scss
index da91789cc2..d7b57ef6e9 100644
--- a/src/app/sessions/states/sign-in/sign-in.component.scss
+++ b/src/app/sessions/states/sign-in/sign-in.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/common/hero-sidebar-layout.scss';
+@use 'styles/common/hero-sidebar-layout' as *;
 
 .sign-in-form {
   section {
@@ -9,7 +9,7 @@
   }
 }
 
-.subcontainer {
+.content-panel {
   overflow-y: hidden;
 }
 
@@ -19,3 +19,7 @@
     height: 100vh !important;
   }
 }
+
+.custom-md-h-screen {
+  height: 100vh !important;
+}
diff --git a/src/app/sessions/states/sign-in/sign-in.component.spec.ts b/src/app/sessions/states/sign-in/sign-in.component.spec.ts
index e0d4c2f0d0..d63dff79c5 100644
--- a/src/app/sessions/states/sign-in/sign-in.component.spec.ts
+++ b/src/app/sessions/states/sign-in/sign-in.component.spec.ts
@@ -1,25 +1,211 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SignInComponent } from './sign-in.component';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {HttpClient} from '@angular/common/http';
+import {Directive, NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {BehaviorSubject, of} from 'rxjs';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {AuthReturnUrlService} from 'src/app/security/auth-return-url.service';
+import {SignInComponent} from './sign-in.component';
 
 describe('SignInComponent', () => {
   let component: SignInComponent;
   let fixture: ComponentFixture<SignInComponent>;
+  let afterAuthCallback: ((result: boolean) => void) | undefined;
+  let router: {navigateByUrl: ReturnType<typeof vi.fn>};
+  let authReturnUrl: {consume: ReturnType<typeof vi.fn>; clear: ReturnType<typeof vi.fn>};
+  let userService: {currentUser: {hasRunFirstTimeSetup: boolean; ltik?: string}};
+  let globalState: {
+    goHome: ReturnType<typeof vi.fn>;
+    hideHeader: ReturnType<typeof vi.fn>;
+    onLoad: ReturnType<typeof vi.fn>;
+  };
 
   beforeEach(async () => {
+    afterAuthCallback = undefined;
+    router = {navigateByUrl: vi.fn().mockResolvedValue(true)};
+    authReturnUrl = {consume: vi.fn().mockReturnValue(null), clear: vi.fn()};
+    userService = {currentUser: {hasRunFirstTimeSetup: true}};
+    globalState = {
+      goHome: vi.fn(),
+      hideHeader: vi.fn(),
+      onLoad: vi.fn(),
+    };
+
     await TestBed.configureTestingModule({
-      declarations: [ SignInComponent ]
+      declarations: [SignInComponent],
+      providers: [
+        {
+          provide: AuthenticationService,
+          useValue: {
+            afterAuthCall: vi.fn((callback: (result: boolean) => void) => {
+              afterAuthCallback = callback;
+            }),
+            signIn: vi.fn().mockReturnValue(of(void 0)),
+            rememberMe: true,
+          },
+        },
+        {provide: UserService, useValue: userService},
+        {provide: Router, useValue: router},
+        {provide: DoubtfireConstants, useValue: {}},
+        {provide: HttpClient, useValue: {}},
+        {provide: GlobalStateService, useValue: globalState},
+        {provide: AlertService, useValue: {error: vi.fn()}},
+        {provide: AuthReturnUrlService, useValue: authReturnUrl},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
-  });
+      .overrideComponent(SignInComponent, {set: {template: ''}})
+      .compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(SignInComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('returns a database login to the protected notification destination', () => {
+    const target = '/projects/2/dashboard/1.1P/feedback';
+    authReturnUrl.consume.mockReturnValue(target);
+
+    component.signIn({username: 'student', password: 'password', remember: true, autoLogin: false});
+
+    expect(globalState.goHome).toHaveBeenCalledOnce();
+    expect(router.navigateByUrl).toHaveBeenCalledWith(target);
+  });
+
+  it('uses the same destination after an authentication callback', () => {
+    const target = '/projects/2/dashboard/1.1P/feedback';
+    authReturnUrl.consume.mockReturnValue(target);
+    fixture.detectChanges();
+
+    afterAuthCallback?.(true);
+
+    expect(router.navigateByUrl).toHaveBeenCalledWith(target);
+  });
+
+  it('does not let a second authentication observer replace the destination with home', () => {
+    const target = '/projects/2/dashboard/1.1P/feedback';
+    authReturnUrl.consume.mockReturnValue(target);
+    fixture.detectChanges();
+
+    component.signIn({username: 'student', password: 'password', remember: true, autoLogin: false});
+    afterAuthCallback?.(true);
+
+    expect(authReturnUrl.consume).toHaveBeenCalledOnce();
+    expect(router.navigateByUrl).toHaveBeenCalledOnce();
+    expect(router.navigateByUrl).toHaveBeenCalledWith(target);
+  });
+
+  it('falls back to home when there is no pending destination', () => {
+    component.signIn({username: 'student', password: 'password', remember: true, autoLogin: false});
+
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/home');
+  });
+
+  it('keeps mandatory first-time setup ahead of a pending destination', () => {
+    userService.currentUser.hasRunFirstTimeSetup = false;
+    authReturnUrl.consume.mockReturnValue('/projects/2/dashboard/1.1P/feedback');
+
+    component.signIn({username: 'student', password: 'password', remember: true, autoLogin: false});
+
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/welcome');
+    expect(authReturnUrl.clear).toHaveBeenCalledOnce();
+    expect(authReturnUrl.consume).not.toHaveBeenCalled();
+  });
+
+  it('keeps LTI routing ahead of and clears a pending destination', () => {
+    component.isLtiLogin = true;
+    component.ltik = 'launch-token';
+    authReturnUrl.consume.mockReturnValue('/projects/2/dashboard/1.1P/feedback');
+
+    component.signIn({username: 'student', password: 'password', remember: true, autoLogin: false});
+
+    expect(globalState.hideHeader).toHaveBeenCalledOnce();
+    expect(userService.currentUser.ltik).toBe('launch-token');
+    expect(router.navigateByUrl).toHaveBeenCalledWith('/lti');
+    expect(authReturnUrl.clear).toHaveBeenCalledOnce();
+    expect(authReturnUrl.consume).not.toHaveBeenCalled();
+  });
+});
+
+// A11Y-FORM06: WCAG 1.3.5 Identify Input Purpose (AA).
+// Renders the real sign-in template and asserts the two credential inputs
+// declare their autocomplete purpose token, so browser autofill and password
+// managers reliably offer the stored credential. Standing in for the whole
+// Material/Forms stack, StubNgForm satisfies `#form="ngForm"` while
+// NO_ERRORS_SCHEMA lets the unknown mat-* elements render as plain markup, so
+// the static autocomplete attribute is what we assert on.
+@Directive({selector: 'form', exportAs: 'ngForm', standalone: false})
+class StubNgFormSignIn {
+  public invalid = false;
+}
+
+describe('SignInComponent autocomplete purpose (A11Y-FORM06)', () => {
+  let fixture: ComponentFixture<SignInComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SignInComponent, StubNgFormSignIn],
+      providers: [
+        {
+          provide: AuthenticationService,
+          useValue: {
+            afterAuthCall: vi.fn(),
+            signIn: vi.fn().mockReturnValue(of(void 0)),
+            rememberMe: false,
+          },
+        },
+        {provide: UserService, useValue: {currentUser: {hasRunFirstTimeSetup: true}}},
+        {provide: Router, useValue: {navigateByUrl: vi.fn()}},
+        {provide: DoubtfireConstants, useValue: {}},
+        {provide: HttpClient, useValue: {}},
+        {
+          provide: GlobalStateService,
+          useValue: {goHome: vi.fn(), hideHeader: vi.fn(), onLoad: vi.fn()},
+        },
+        {provide: AlertService, useValue: {error: vi.fn()}},
+        {provide: AuthReturnUrlService, useValue: {consume: vi.fn(), clear: vi.fn()}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SignInComponent);
+    const component = fixture.componentInstance;
+    // Reveal the credential fields (both guarded behind @if in the template).
+    component.isLoading = false;
+    component.showCredentials = true;
+    component.externalName = new BehaviorSubject<string>('OnTrack');
+    component.formData = {username: '', password: '', remember: false, autoLogin: false};
+    fixture.detectChanges();
+  });
+
+  const input = (name: string): HTMLElement | null =>
+    fixture.nativeElement.querySelector(`input[name="${name}"]`);
+
+  it('declares autocomplete="username" on the sign-in username field', () => {
+    const username = input('username');
+    expect(username).toBeTruthy();
+    expect(username?.getAttribute('autocomplete')).toBe('username');
+  });
+
+  it('declares autocomplete="current-password" on the sign-in password field', () => {
+    const password = input('password');
+    expect(password).toBeTruthy();
+    expect(password?.getAttribute('autocomplete')).toBe('current-password');
+  });
+
+  // Failure path: the fix must be scoped to the credential inputs. The
+  // "stay logged in" control is not a fillable text field and must not be
+  // handed a purpose token.
+  it('does not put an autocomplete purpose token on the non-credential controls', () => {
+    const remember = fixture.nativeElement.querySelector('[name="remember"]');
+    expect(remember?.getAttribute('autocomplete') ?? null).toBeNull();
+  });
 });
diff --git a/src/app/sessions/states/sign-in/sign-in.component.ts b/src/app/sessions/states/sign-in/sign-in.component.ts
index f41b944018..cf696b9a99 100644
--- a/src/app/sessions/states/sign-in/sign-in.component.ts
+++ b/src/app/sessions/states/sign-in/sign-in.component.ts
@@ -1,10 +1,14 @@
-import { HttpClient } from '@angular/common/http';
-import { Component, Inject, OnInit } from '@angular/core';
-import { StateService, Transition } from '@uirouter/core';
-import { AuthenticationService } from 'src/app/api/services/authentication.service';
-import { AlertService } from 'src/app/common/services/alert.service';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { GlobalStateService } from 'src/app/projects/states/index/global-state.service';
+import {HttpClient} from '@angular/common/http';
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {consumeAuthCallback} from 'src/app/security/auth-callback';
+import {AuthReturnUrlService} from 'src/app/security/auth-return-url.service';
 
 type signInData =
   | {
@@ -25,32 +29,73 @@ type signInData =
   selector: 'f-sign-in',
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class SignInComponent implements OnInit {
-  signingIn: boolean;
-  showCredentials = false;
-  invalidCredentials: boolean;
-  api: string;
-  SSOLoginUrl: any;
-  authMethodLoaded: boolean;
-  externalName: any;
-  formData: signInData;
+  public signingIn: boolean;
+  public showCredentials: boolean = false;
+  public invalidCredentials: boolean;
+  public api: string;
+  public SSOLoginUrl: string;
+  public authMethodLoaded: boolean;
+  public externalName: BehaviorSubject<string>;
+  public formData: signInData;
+  public isLoading: boolean = true;
+  public authMethodFailed: boolean = false;
+
+  public redirectingSSO: boolean = false;
+
+  private postSignInNavigationStarted = false;
+
+  // Get query params from the resolve in the router state
+  @Input() username: string;
+  @Input() authToken: string;
+  @Input() ltiToken: string;
+  @Input() ltik: string;
+  @Input() isLtiLogin: boolean;
+
   constructor(
-    private authService: AuthenticationService,
-    private state: StateService,
+    public authService: AuthenticationService,
+    private userService: UserService,
+    private router: Router,
     private constants: DoubtfireConstants,
     private http: HttpClient,
-    private transition: Transition,
     private globalState: GlobalStateService,
     private alerts: AlertService,
+    private authReturnUrl: AuthReturnUrlService,
   ) {}
 
   ngOnInit(): void {
+    const callback = consumeAuthCallback();
+    this.username = callback?.username ?? this.username;
+    this.authToken = callback?.authToken ?? this.authToken;
+    this.ltiToken = callback?.ltiToken ?? this.ltiToken;
+    this.ltik = callback?.ltik ?? this.ltik;
+    this.isLtiLogin = callback?.isLtiLogin ?? this.isLtiLogin;
+
+    this.authService.afterAuthCall((result) => {
+      if (result) {
+        this.isLoading = false;
+        return this.actionSignInSuccess();
+      }
+      this.isLoading = true;
+    });
+
+    this.globalState.onLoad(() => this.initAfterGlobalLoad());
+  }
+
+  private initAfterGlobalLoad(): void {
+    if (!this.isLoading) {
+      // return out if we're already redirecting elsewhere in the afterAuthCall
+      return;
+    }
+
     this.formData = {
       username: '',
       password: '',
-      remember: false,
-      autoLogin: localStorage.getItem('autoLogin') ? true : false,
+      remember: this.authService.rememberMe,
+      autoLogin: this.autoLogin,
     };
     // Check for SSO
     this.globalState.hideHeader();
@@ -58,48 +103,115 @@ export class SignInComponent implements OnInit {
     this.externalName = this.constants.ExternalName;
 
     // wait 2 seconds with rxjs
-    const wait = new Promise((resolve) => setTimeout(resolve, 2000));
-    this.http.get(`${this.constants.API_URL}/auth/method`).subscribe((response: any) => {
-      // if there is a string in response.data.redirect_to
-      this.SSOLoginUrl = response.redirect_to || false;
-
-      if (this.SSOLoginUrl) {
-        if (this.transition.params().authToken) {
-          // This is SSO and we just got an auth_token? Must request to sign in
+    const wait = new Promise((resolve) => setTimeout(resolve, 3000));
+    this.http.get(`${this.constants.API_URL}/auth/method`).subscribe({
+      next: (response: {redirect_to?: string}) => {
+        this.isLoading = false;
+
+        // if there is a string in response.data.redirect_to
+        this.SSOLoginUrl = response.redirect_to || '';
+
+        if (this.authToken) {
+          // We have an auth token - so attempt to convert to access token
           return this.signIn({
-            auth_token: this.transition.params().authToken,
-            username: this.transition.params().username,
-            remember: true,
-          });
-        } else if (this.formData.autoLogin) {
-          return wait.then(() => {
-            // Double check in case changed in the meantime
-            if (this.formData.autoLogin) {
-              this.redirectToSSO();
-            }
+            auth_token: this.authToken,
+            username: this.username,
+            remember: this.authService.rememberMe,
           });
+        } else if (this.ltiToken) {
+          // We have a signed Lti token containing user data
+          // Forward it to the API and request a one time auth token
+          this.signingIn = true;
+
+          this.authService
+            .signInWithLti({
+              ltik: this.ltik,
+              lti_token: this.ltiToken,
+            })
+            .subscribe({
+              next: () => {
+                // this.globalState.goHome();
+                // this.actionSignInSuccess();
+              },
+              error: (err) => {
+                this.signingIn = false;
+                this.formData.password = '';
+                this.invalidCredentials = true;
+                this.alerts.error(err, 6000);
+              },
+            });
+        } else if (this.SSOLoginUrl) {
+          if (this.autoLogin) {
+            this.redirectingSSO = true;
+            return wait.then(() => {
+              // Double check in case changed in the meantime
+              if (this.autoLogin) {
+                this.redirectToSSO();
+              } else {
+                this.redirectingSSO = false;
+              }
+            });
+          } else {
+            this.globalState.isLoadingSubject.next(false);
+            // We are SSO and no credentials
+            this.showCredentials = false;
+            return wait.then();
+          }
         } else {
-          // We are SSO and no credentials
-          this.showCredentials = false;
+          this.globalState.isLoadingSubject.next(false);
+          this.authMethodLoaded = true;
+          this.showCredentials = true;
           return wait.then();
         }
-      } else {
-        this.authMethodLoaded = true;
-        this.showCredentials = true;
-        return wait.then();
-      }
-    }),
-      function (err) {
+      },
+      error: (_err) => {
         this.authMethodFailed = true;
-        this.error = err;
+        // this.error = err;
 
-        // return after waiting 1500 with the wait promise
+        // return after waiting with the wait promise
         return wait.then();
-      };
+      },
+    });
+  }
+
+  public get autoLogin(): boolean {
+    // Check if autoLogin is set in localStorage
+    return localStorage.getItem('autoLogin') === 'true';
+  }
+
+  public set autoLogin(value: boolean) {
+    // Set autoLogin in localStorage
+    localStorage.setItem('autoLogin', value ? 'true' : 'false');
+  }
+
+  /**
+   * Perform the actions needed when the user successfully signs in.
+   */
+  private actionSignInSuccess(): void {
+    // Authentication completion is observed both by afterAuthCall and by the
+    // direct sign-in subscription. Only the first observer should navigate;
+    // otherwise the second one can replace a restored deep link with /home.
+    if (this.postSignInNavigationStarted) {
+      return;
+    }
+    this.postSignInNavigationStarted = true;
+
+    if (this.isLtiLogin && this.ltik) {
+      this.authReturnUrl.clear();
+      this.globalState.hideHeader();
+      this.userService.currentUser.ltik = this.ltik;
+      void this.router.navigateByUrl('/lti');
+      return;
+    }
 
-    if (this.authService.isAuthenticated()) {
-      this.state.go('home');
+    if (this.userService.currentUser.hasRunFirstTimeSetup === false) {
+      this.authReturnUrl.clear();
+      void this.router.navigateByUrl('/welcome');
+      return;
     }
+
+    this.globalState.goHome();
+    void this.router.navigateByUrl(this.authReturnUrl.consume() ?? '/home');
   }
 
   /**
@@ -107,7 +219,7 @@ export class SignInComponent implements OnInit {
    */
   private redirectToSSO(): void {
     if (this.SSOLoginUrl) {
-      if (this.formData.autoLogin) {
+      if (this.autoLogin) {
         localStorage.setItem('autoLogin', 'true');
       } else {
         localStorage.removeItem('autoLogin');
@@ -117,18 +229,26 @@ export class SignInComponent implements OnInit {
     }
   }
 
-  signIn(signInCredentials: signInData): void {
+  /**
+   * Sign in using the provided credentials. For SSO, this will redirect to the SSO login URL
+   * if the auth token is not provided. Then when the api redirects hack to us, with the auth token,
+   * we will then use the passed login auth token to get an access token.#form
+   *
+   * For all logins, if rememberMe is set, the api will also send a secure cookie
+   * with the refresh token. This will be used to get an access token when the user
+   * refreshes the page / returns to the app / etc.
+   */
+  public signIn(signInCredentials: signInData): void {
+    // Redirect to SSO if we do not have an auth token already (from SSO callback)
     if (this.SSOLoginUrl && !signInCredentials.auth_token) {
       return this.redirectToSSO();
     }
 
-    signInCredentials.remember = true;
+    // Indicate we are signing in...
     this.signingIn = true;
 
     this.authService.signIn(signInCredentials).subscribe({
-      next: () => {
-        this.state.go('home');
-      },
+      next: () => this.actionSignInSuccess(),
       error: (err) => {
         this.signingIn = false;
         this.formData.password = '';
diff --git a/src/app/sessions/transition-hooks.service.spec.ts b/src/app/sessions/transition-hooks.service.spec.ts
deleted file mode 100644
index 90d821953b..0000000000
--- a/src/app/sessions/transition-hooks.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TransitionHooksService } from './transition-hooks.service';
-
-describe('TransitionHooksService', () => {
-  let service: TransitionHooksService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(TransitionHooksService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/src/app/sessions/transition-hooks.service.ts b/src/app/sessions/transition-hooks.service.ts
deleted file mode 100644
index 218e0c5397..0000000000
--- a/src/app/sessions/transition-hooks.service.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Injectable } from '@angular/core';
-import { TransitionService } from '@uirouter/angular';
-import { UserService } from '../api/services/user.service';
-import { DoubtfireAngularModule } from '../doubtfire-angular.module';
-import { GlobalStateService } from '../projects/states/index/global-state.service';
-import { DoubtfireConstants } from '../config/constants/doubtfire-constants';
-
-/**
- * The TransitionHooksService is responsible for intercepting transitions between states.
- * This is used to update the global state, and enforce certain routing rules - such as redirecting
- * to the welcome page if the user has not completed first time setup, and accepting the eula.
- */
-@Injectable({
-  providedIn: DoubtfireAngularModule,
-})
-export class TransitionHooksService {
-  private tiiEnabled = false;
-
-  constructor(
-    private userService: UserService,
-    private transitions: TransitionService,
-    private globalState: GlobalStateService,
-    private constants: DoubtfireConstants
-  ) {
-    // Get the tii settings...
-    this.constants.IsTiiEnabled.subscribe((enabled) => {
-      this.tiiEnabled = enabled;
-    });
-
-    // Hook into "onBefore" to check transitions before they occur
-    this.transitions.onBefore({}, (transition) => {
-      // Where is the transition coming from and going to?
-      const toState = transition.to().name;
-      // const fromState = transition.from().name;
-
-      // Setup the global state
-      if (this.isInboxState(toState)) {
-        this.globalState.setInboxState();
-      } else {
-        this.globalState.setNotInboxState();
-      }
-
-      // Adjust settings such as headers
-      switch (toState) {
-        case 'timeout':
-          return true;
-        case 'sign_in':
-          this.globalState.hideHeader();
-          break;
-        case 'welcome':
-          // block acess to welcome once run
-          if (this.userService.currentUser.hasRunFirstTimeSetup || this.userService.isAnonymousUser()) {
-            return false;
-          }
-          this.globalState.hideHeader();
-          break;
-        case 'home':
-          this.globalState.goHome();
-          break;
-        default:
-          break;
-      }
-
-      // Redirect to welcome if user has not run first time setup
-      if (
-        !this.userService.isAnonymousUser() &&
-        !userService.currentUser.hasRunFirstTimeSetup &&
-        toState !== 'welcome'
-      ) {
-        return transition.router.stateService.target('welcome');
-      }
-
-      // Redirect to eula if user has not accepted eula
-      // they are loged in, have run first time setup,
-      // but not accepted eula
-      if ( this.tiiEnabled &&
-        !this.userService.isAnonymousUser() &&
-        userService.currentUser.hasRunFirstTimeSetup &&
-        !userService.currentUser.acceptedTiiEula &&
-        toState !== 'eula'
-      ) {
-        return transition.router.stateService.target('eula');
-      }
-    });
-  }
-
-  // function to return true if navigating to inbox or task definition
-  private isInboxState(toState: string): boolean {
-    // return toState.startsWith('units/tasks/inbox') || toState.endsWith('tasks/definition');
-    return toState.startsWith('units/tasks') || toState.endsWith('tasks/definition');
-  }
-}
diff --git a/src/app/study-essentials/README.md b/src/app/study-essentials/README.md
new file mode 100644
index 0000000000..3deeb05348
--- /dev/null
+++ b/src/app/study-essentials/README.md
@@ -0,0 +1,23 @@
+# Study essentials
+
+Import `StudyEssentialsComponent` into a standalone component's `imports` and use
+`<f-study-essentials />`. It takes no inputs and makes no API requests.
+
+The shared deployment choice is `studyEssentialsProfile` in
+`study-essentials.config.ts`. This Deakin fork sets it to `'deakin'`. Operators at
+other institutions should set it to `''` before building to hide the panel, or
+add a reviewed institution profile. Development, production and the demo all use
+the same choice. Product names, emails and unit codes never select a profile.
+
+These are outbound public entry points. Each service controls its own sign-in
+and permissions. No credentials, enrolment details, meeting links or course IDs
+are appended. Unit-specific course and meeting links belong in scoped unit
+content, never this global panel.
+
+The links were checked on 14 September 2026 using Deakin's official pages:
+
+- [Our systems](https://www.deakin.edu.au/students/new-students/new-domestic-students/digital-setup/our-systems) links to DeakinSync and StudentConnect.
+- [CloudDeakin](https://www.deakin.edu.au/clouddeakin) links its Single SignOn button to the D2L base URL.
+- [Study timetables](https://www.deakin.edu.au/students/study-support/study-timetables) maintains the current STAR destination and calendar guidance. The panel uses this stable page because direct STAR addresses alternate between odd and even years.
+- [Library](https://www.deakin.edu.au/library) provides books, articles and unit readings.
+- [Student Central](https://www.deakin.edu.au/students/help/student-central) provides course advice and student enquiries.
diff --git a/src/app/study-essentials/study-essentials.component.html b/src/app/study-essentials/study-essentials.component.html
new file mode 100644
index 0000000000..41790ef48f
--- /dev/null
+++ b/src/app/study-essentials/study-essentials.component.html
@@ -0,0 +1,33 @@
+@if (links.length) {
+  <section aria-label="Study essentials" class="study-essentials">
+    <div class="essentials-heading">
+      <div>
+        <h2>Study essentials</h2>
+        <p>Your Deakin services, together.</p>
+      </div>
+      <span class="external-note">Opens in a new tab</span>
+    </div>
+    <ul class="essentials-links">
+      @for (link of links; track link.url) {
+        <li>
+          <a
+            referrerpolicy="no-referrer"
+            rel="noopener noreferrer"
+            target="_blank"
+            [href]="link.url"
+          >
+            <span class="essential-icon"
+              ><mat-icon aria-hidden="true">{{ link.icon }}</mat-icon></span
+            >
+            <span class="essential-copy">
+              <strong>{{ link.title }}</strong>
+              <span>{{ link.description }}</span>
+              <span class="visually-hidden">Opens in a new tab</span>
+            </span>
+            <mat-icon aria-hidden="true" class="external-icon">open_in_new</mat-icon>
+          </a>
+        </li>
+      }
+    </ul>
+  </section>
+}
diff --git a/src/app/study-essentials/study-essentials.component.scss b/src/app/study-essentials/study-essentials.component.scss
new file mode 100644
index 0000000000..09124cc4bf
--- /dev/null
+++ b/src/app/study-essentials/study-essentials.component.scss
@@ -0,0 +1,134 @@
+:host {
+  display: block;
+  min-width: 0;
+  color: var(--ot-color-text);
+}
+
+.study-essentials {
+  padding: 22px;
+  border: 1px solid var(--ot-color-border);
+  border-radius: 14px;
+  background: var(--ot-color-surface);
+}
+
+.essentials-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px 20px;
+  margin-bottom: 18px;
+}
+
+h2,
+p {
+  margin: 0;
+}
+
+h2 {
+  font-size: 1.15rem;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+p,
+.external-note {
+  margin-top: 4px;
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+.essentials-links {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  min-width: 0;
+}
+
+a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  min-height: 80px;
+  box-sizing: border-box;
+  padding: 14px;
+  border: 1px solid var(--ot-color-border);
+  border-radius: 10px;
+  color: inherit;
+  text-decoration: none;
+  touch-action: manipulation;
+  overflow-wrap: anywhere;
+
+  &:hover {
+    background: var(--ot-color-surface-raised);
+    border-color: var(--ot-color-link);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ot-color-primary);
+    outline-offset: 3px;
+  }
+}
+
+.essential-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 36px;
+  height: 36px;
+  border-radius: 9px;
+  background: var(--ot-color-surface-raised);
+  color: var(--ot-color-link);
+}
+
+.essential-copy {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+
+  strong {
+    color: var(--ot-color-link);
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  > span {
+    font-size: 0.76rem;
+    line-height: 1.5;
+  }
+}
+
+.external-icon {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  color: var(--ot-color-link);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 599px) {
+  .study-essentials {
+    padding: 18px 14px;
+  }
+}
diff --git a/src/app/study-essentials/study-essentials.component.spec.ts b/src/app/study-essentials/study-essentials.component.spec.ts
new file mode 100644
index 0000000000..75bbbe26c1
--- /dev/null
+++ b/src/app/study-essentials/study-essentials.component.spec.ts
@@ -0,0 +1,64 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {StudyEssentialsComponent} from './study-essentials.component';
+import {STUDY_ESSENTIALS_PROFILE, studyEssentialsFor} from './study-essentials.config';
+
+describe('Study essentials', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [StudyEssentialsComponent]});
+  });
+
+  it('shows the six public Deakin services from the shared configured profile', () => {
+    const fixture = TestBed.createComponent(StudyEssentialsComponent);
+    fixture.detectChanges();
+    const element = fixture.nativeElement as HTMLElement;
+    const titles = Array.from(element.querySelectorAll('a strong')).map((node) => node.textContent);
+    expect(titles).toEqual([
+      'DeakinSync',
+      'CloudDeakin',
+      'StudentConnect',
+      'STAR timetable',
+      'Deakin Library',
+      'Student Central',
+    ]);
+    expect(element.querySelector('section')?.getAttribute('aria-label')).toBe('Study essentials');
+  });
+
+  it('renders safe external links with no opener or referrer access', () => {
+    const fixture = TestBed.createComponent(StudyEssentialsComponent);
+    fixture.detectChanges();
+    const links = Array.from((fixture.nativeElement as HTMLElement).querySelectorAll('a'));
+    expect(links).toHaveLength(6);
+    for (const link of links) {
+      expect(link.target).toBe('_blank');
+      expect(link.rel).toBe('noopener noreferrer');
+      expect(link.getAttribute('referrerpolicy')).toBe('no-referrer');
+      expect(link.textContent).toContain('Opens in a new tab');
+    }
+  });
+
+  it('uses only public Deakin entry points without course, account or meeting identifiers', () => {
+    for (const link of studyEssentialsFor('deakin')) {
+      const url = new URL(link.url);
+      expect(url.protocol).toBe('https:');
+      expect(url.hostname.endsWith('.deakin.edu.au')).toBe(true);
+      expect(url.username).toBe('');
+      expect(url.password).toBe('');
+      expect(url.port).toBe('');
+      expect(url.search).toBe('');
+      expect(url.hash).toBe('');
+      expect(url.pathname).not.toMatch(/\d|meeting|\/d2l\/home\//i);
+    }
+    const timetable = studyEssentialsFor('deakin').find((link) => link.title === 'STAR timetable');
+    expect(timetable.url).toBe('https://www.deakin.edu.au/students/study-support/study-timetables');
+  });
+
+  it('renders no Deakin links or panel when the institution profile is disabled', () => {
+    TestBed.overrideProvider(STUDY_ESSENTIALS_PROFILE, {useValue: ''});
+    const fixture = TestBed.createComponent(StudyEssentialsComponent);
+    fixture.detectChanges();
+    expect(studyEssentialsFor('')).toEqual([]);
+    expect((fixture.nativeElement as HTMLElement).querySelector('section')).toBeNull();
+    expect((fixture.nativeElement as HTMLElement).querySelector('a')).toBeNull();
+  });
+});
diff --git a/src/app/study-essentials/study-essentials.component.ts b/src/app/study-essentials/study-essentials.component.ts
new file mode 100644
index 0000000000..6c0541948a
--- /dev/null
+++ b/src/app/study-essentials/study-essentials.component.ts
@@ -0,0 +1,15 @@
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {STUDY_ESSENTIALS_PROFILE, studyEssentialsFor} from './study-essentials.config';
+
+@Component({
+  selector: 'f-study-essentials',
+  standalone: true,
+  imports: [MatIconModule],
+  templateUrl: './study-essentials.component.html',
+  styleUrl: './study-essentials.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StudyEssentialsComponent {
+  readonly links = studyEssentialsFor(inject(STUDY_ESSENTIALS_PROFILE));
+}
diff --git a/src/app/study-essentials/study-essentials.config.ts b/src/app/study-essentials/study-essentials.config.ts
new file mode 100644
index 0000000000..971f4500f6
--- /dev/null
+++ b/src/app/study-essentials/study-essentials.config.ts
@@ -0,0 +1,70 @@
+import {InjectionToken} from '@angular/core';
+
+export type StudyEssentialsProfile = 'deakin' | '';
+
+/**
+ * Shared deployment choice for development, production and the demo.
+ * This fork serves Deakin. Operators at another institution should set this
+ * to '' before building to hide these links, or add their own reviewed profile.
+ * Never infer institution membership from an email, product name or unit code.
+ */
+export const studyEssentialsProfile: StudyEssentialsProfile = 'deakin';
+
+export const STUDY_ESSENTIALS_PROFILE: InjectionToken<StudyEssentialsProfile> = new InjectionToken(
+  'Study essentials profile',
+  {providedIn: 'root', factory: () => studyEssentialsProfile},
+);
+
+export interface StudyEssential {
+  readonly title: string;
+  readonly description: string;
+  readonly url: string;
+  readonly icon: string;
+}
+
+// Public, non-session entry points verified against Deakin's official pages
+// on 14 September 2026. Course sites and meeting links belong to their units.
+const deakinEssentials: readonly StudyEssential[] = [
+  {
+    title: 'DeakinSync',
+    description: 'Your unit sites and university services.',
+    url: 'https://sync.deakin.edu.au/',
+    icon: 'dashboard',
+  },
+  {
+    title: 'CloudDeakin',
+    description: 'Learning materials and assessments.',
+    url: 'https://d2l.deakin.edu.au/',
+    icon: 'school',
+  },
+  {
+    title: 'StudentConnect',
+    description: 'Enrolment, fees and results.',
+    url: 'https://studentconnect.deakin.edu.au/connect/webconnect',
+    icon: 'account_circle',
+  },
+  {
+    title: 'STAR timetable',
+    description: 'Your timetable and calendar guidance.',
+    // The direct STAR application alternates between odd/even year addresses.
+    // Deakin maintains the current entry point on this stable public page.
+    url: 'https://www.deakin.edu.au/students/study-support/study-timetables',
+    icon: 'calendar_month',
+  },
+  {
+    title: 'Deakin Library',
+    description: 'Books, articles and unit readings.',
+    url: 'https://www.deakin.edu.au/library',
+    icon: 'local_library',
+  },
+  {
+    title: 'Student Central',
+    description: 'Course advice and student enquiries.',
+    url: 'https://www.deakin.edu.au/students/help/student-central',
+    icon: 'support_agent',
+  },
+];
+
+export function studyEssentialsFor(profile: StudyEssentialsProfile): readonly StudyEssential[] {
+  return profile === 'deakin' ? deakinEssentials : [];
+}
diff --git a/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.html b/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.html
new file mode 100644
index 0000000000..676ed612b4
--- /dev/null
+++ b/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.html
@@ -0,0 +1,46 @@
+<h2 mat-dialog-title>Request Feedback Review</h2>
+<mat-dialog-content>
+  <p>
+    If you believe the feedback or marking on this task does not accurately reflect your work, you
+    may request a review. This allows another tutor to reassess the feedback and determine whether
+    it should be confirmed or revised.
+  </p>
+
+  <p>
+    You have
+    <b>
+      {{ task.project.escalationAttemptsRemaining }} review request{{
+        task.project.escalationAttemptsRemaining !== 1 ? 's' : ''
+      }}
+    </b>
+    remaining for this unit. If the original feedback is revised as a result of this review, the
+    request will not be counted against your remaining total.
+  </p>
+
+  <mat-form-field appearance="outline" class="mt-2.5 w-full">
+    <mat-label>Reason for review request</mat-label>
+    <textarea
+      matInput
+      maxlength="1000"
+      placeholder="Briefly explain why you believe this feedback should be reviewed. Refer to specific criteria if relevant."
+      rows="4"
+      [(ngModel)]="reviewComment"
+    ></textarea>
+    <div class="flex justify-end">
+      <mat-hint> {{ reviewComment?.length || 0 }}/1000 </mat-hint>
+    </div>
+  </mat-form-field>
+  <p class="opacity-70">Review decisions are final once resolved.</p>
+
+  <mat-dialog-actions class="flex justify-between">
+    <button mat-raised-button (click)="dismissModal()">Cancel</button>
+    <button
+      color="primary"
+      mat-raised-button
+      [disabled]="!reviewComment || submitting"
+      (click)="submit()"
+    >
+      Submit
+    </button>
+  </mat-dialog-actions>
+</mat-dialog-content>
diff --git a/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.scss b/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.ts b/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.ts
new file mode 100644
index 0000000000..271630413a
--- /dev/null
+++ b/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component.ts
@@ -0,0 +1,59 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {TaskService} from 'src/app/api/services/task.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {FeedbackAppealModalData} from './feedback-appeal-modal.service';
+
+@Component({
+  selector: 'f-feedback-appeal-modal',
+  templateUrl: './feedback-appeal-modal.component.html',
+  styleUrl: './feedback-appeal-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FeedbackAppealModalComponent implements OnInit {
+  task: Task;
+
+  reviewComment: string;
+  submitting: boolean;
+
+  constructor(
+    public dialogRef: MatDialogRef<FeedbackAppealModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: FeedbackAppealModalData,
+    private alerts: AlertService,
+    private taskService: TaskService,
+  ) {}
+
+  ngOnInit() {
+    this.task = this.data.task;
+  }
+
+  submit(): void {
+    this.submitting = true;
+    this.task.requestFeedbackReview().subscribe({
+      next: (_response) => {
+        this.alerts.success(
+          `Requested feedback review for ${this.task.definition.abbreviation} ${this.task.definition.name}`,
+          3000,
+        );
+        setTimeout(() => {
+          // Fetch the "Feedback Review Requested" comment
+          this.taskService.notifyStatusChange(this.task);
+          setTimeout(() => {
+            this.task.addComment(this.reviewComment);
+          }, 250);
+          this.dismissModal();
+        }, 250);
+      },
+      error: (error) => {
+        this.alerts.error(`An error occurred: ${error}`, 3000);
+        this.submitting = false;
+      },
+    });
+  }
+
+  public dismissModal() {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.service.ts b/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.service.ts
new file mode 100644
index 0000000000..622d3bf99f
--- /dev/null
+++ b/src/app/tasks/modals/feedback-appeal-modal/feedback-appeal-modal.service.ts
@@ -0,0 +1,29 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {FeedbackAppealModalComponent} from './feedback-appeal-modal.component';
+
+export interface FeedbackAppealModalData {
+  task: Task;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FeedbackAppealModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(task: Task) {
+    const _dialogRef = this.dialog.open<FeedbackAppealModalComponent, FeedbackAppealModalData>(
+      FeedbackAppealModalComponent,
+      {
+        data: {
+          task: task,
+        },
+        position: {top: '2.5%'},
+        width: '100%',
+        maxWidth: '700px',
+      },
+    );
+  }
+}
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.coffee b/src/app/tasks/modals/grade-task-modal/grade-task-modal.coffee
deleted file mode 100644
index 057dffee92..0000000000
--- a/src/app/tasks/modals/grade-task-modal/grade-task-modal.coffee
+++ /dev/null
@@ -1,41 +0,0 @@
-angular.module('doubtfire.tasks.modals.grade-task-modal', [])
-
-#
-# A modal to grade a graded task
-#
-.factory('GradeTaskModal', ($modal) ->
-  GradeTaskModal = {}
-
-  #
-  # Open a grade task modal with the provided task
-  #
-  GradeTaskModal.show = (task) ->
-    $modal.open
-      templateUrl: 'tasks/modals/grade-task-modal/grade-task-modal.tpl.html'
-      controller: 'GradeTaskModal'
-      resolve:
-        task: -> task
-
-  GradeTaskModal
-)
-.controller('GradeTaskModal', ($scope, $modalInstance, gradeService, task) ->
-  $scope.task = task
-  $scope.data = { desiredGrade: task.grade, rating: task.qualityPts || 1, overStar: 0, confRating: 0 }
-  $scope.gradeValues = gradeService.allGradeValues
-  $scope.grades = gradeService.grades
-  $scope.dismiss = $modalInstance.dismiss
-  $scope.numStars = task.definition.maxQualityPts || 5
-  $scope.close = ->
-    $modalInstance.close { qualityPts: $scope.data.rating, selectedGrade: $scope.data.desiredGrade}
-
-  $scope.hoveringOver = (value) ->
-    $scope.data.overStar = value
-
-  $scope.checkClearRating = ->
-    if $scope.data.confRating == 1 && $scope.data.rating == 1 && $scope.data.overStar == 1
-      $scope.data.rating = 0
-    else if $scope.data.confRating == 1 && $scope.data.overStar == 1 && $scope.data.rating == 0
-      $scope.data.rating = 1
-
-    $scope.data.confRating = $scope.data.rating
-)
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.html b/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.html
new file mode 100644
index 0000000000..2b8072a9dd
--- /dev/null
+++ b/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.html
@@ -0,0 +1,75 @@
+<mat-card class="w-125 px-4">
+  <mat-card-header>
+    <mat-card-title> Assess Task Quality </mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <!-- For Grade Tasks -->
+    @if (task.definition.isGraded) {
+      <div class="grade-task-item">
+        <p>
+          Please provide a grade for task:
+          <span
+            class="ml-2 inline-flex size-10 items-center justify-center rounded-full bg-formatif-blue font-bold text-white"
+          >
+            {{ task.definition.abbreviation }}
+          </span>
+        </p>
+        <div class="flex justify-center">
+          <mat-button-toggle-group
+            #group="matButtonToggleGroup"
+            hideSingleSelectionIndicator="true"
+            [value]="selectedGrade"
+            [(ngModel)]="selectedGrade"
+          >
+            @for (idx of gradeValues; track idx) {
+              <mat-button-toggle
+                aria-describedby="This student completed the task to a {{
+                  gradeName(idx)
+                }} standard"
+                aria-label="Mark task as {{ gradeName(idx) }}"
+                class="p-2"
+                matTooltip="This student completed the task to a {{ gradeName(idx) }} standard"
+                [matTooltipShowDelay]="500"
+                [value]="idx"
+              >
+                <f-grade-icon [grade]="idx" [unit]="task.unit"></f-grade-icon>
+              </mat-button-toggle>
+            }
+          </mat-button-toggle-group>
+        </div>
+      </div>
+    }
+    <!-- For Quality Points Tasks -->
+    @if (task.definition.maxQualityPts > 0) {
+      <div class="pt-4">
+        <p>
+          Please provide a quality rating for task:
+          <span
+            class="ml-2 inline-flex size-10 items-center justify-center rounded-full bg-formatif-blue font-bold text-white"
+          >
+            {{ task.definition.abbreviation }}
+          </span>
+        </p>
+        <mat-slider class="w-full" [discrete]="true" [max]="totalRating" [min]="0" [step]="1">
+          <input matSliderThumb [ngModel]="rating" (ngModelChange)="updateRating($event)" />
+        </mat-slider>
+        <div class="flex justify-end">
+          <p>Rating: {{ rating }} / {{ totalRating }}</p>
+        </div>
+      </div>
+    }
+  </mat-card-content>
+  <mat-card-actions>
+    <div class="flex w-full justify-between">
+      <button mat-raised-button (click)="dismiss()">Dismiss</button>
+      <button
+        color="primary"
+        mat-raised-button
+        [disabled]="!isValid()"
+        [mat-dialog-close]="{grade: selectedGrade, qualityPts: rating}"
+      >
+        Submit
+      </button>
+    </div>
+  </mat-card-actions>
+</mat-card>
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.scss b/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.spec.ts b/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.spec.ts
new file mode 100644
index 0000000000..ba20795fb0
--- /dev/null
+++ b/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.spec.ts
@@ -0,0 +1,196 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {GradeTaskModalComponent} from './grade-task-modal.component';
+
+describe('GradeTaskModalComponent', () => {
+  let component: GradeTaskModalComponent;
+  let fixture: ComponentFixture<GradeTaskModalComponent>;
+  let gradeServiceStub: GradeService;
+  let dialogRefMock: {close: () => void};
+  let dialogDataStub: {
+    task: {
+      grade?: number;
+      qualityPts?: number;
+      definition: {maxQualityPts?: number};
+    };
+  };
+
+  beforeEach(async () => {
+    gradeServiceStub = new GradeService();
+
+    dialogDataStub = {
+      task: {
+        grade: undefined,
+        qualityPts: undefined,
+        definition: {
+          maxQualityPts: undefined,
+        },
+      },
+    };
+
+    dialogRefMock = {
+      close: () => {
+        /* empty */
+      },
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [GradeTaskModalComponent],
+      providers: [
+        {provide: GradeService, useValue: gradeServiceStub},
+        {provide: MatDialogRef, useValue: dialogRefMock},
+        {provide: MAT_DIALOG_DATA, useValue: dialogDataStub},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GradeTaskModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should return rating & grade when closed', () => {
+    vi.spyOn(component.dialogRef, 'close');
+
+    component.rating = 5;
+    component.selectedGrade = 2;
+    component.close();
+
+    expect(component.dialogRef.close).toHaveBeenCalledWith({
+      qualityPts: 5,
+      selectedGrade: 2,
+    });
+  });
+
+  it('should dismiss', () => {
+    vi.spyOn(component.dialogRef, 'close');
+    component.dismiss();
+    expect(component.dialogRef.close).toHaveBeenCalled();
+  });
+
+  /**
+   * For Rating tasks
+   */
+  it('should accept a new task object', () => {
+    const newRatingTask = {
+      grade: undefined,
+      qualityPts: 5,
+      definition: {
+        maxQualityPts: 10,
+      },
+    };
+    dialogDataStub.task = newRatingTask;
+
+    component.ngOnInit();
+    expect(component.task).toEqual(newRatingTask);
+    expect(component.rating).toEqual(newRatingTask.qualityPts);
+    expect(component.selectedGrade).toEqual(0);
+    expect(component.totalRating).toEqual(newRatingTask.definition.maxQualityPts);
+  });
+
+  it('should treat an unrated quality task as unselected in the modal', () => {
+    dialogDataStub.task = {
+      grade: undefined,
+      qualityPts: -1,
+      definition: {
+        maxQualityPts: 5,
+      },
+    };
+
+    component.ngOnInit();
+
+    expect(component.rating).toEqual(0);
+    expect(component.ratingLabel).toEqual('0 / 5');
+    expect(component.qualityRatingSelected).toBe(false);
+    expect(component.isValid()).toBe(false);
+  });
+
+  it('should allow 0 as a selected quality rating', () => {
+    dialogDataStub.task = {
+      grade: undefined,
+      qualityPts: -1,
+      definition: {
+        maxQualityPts: 5,
+      },
+    };
+
+    component.ngOnInit();
+    component.updateRating(0);
+
+    expect(component.rating).toEqual(0);
+    expect(component.qualityRatingSelected).toBe(true);
+    expect(component.isValid()).toBe(true);
+  });
+
+  it('should not allow a rating higher than the max rating', () => {
+    component.ngOnInit();
+    component.rating = 1;
+    component.totalRating = 10;
+    component.updateRating(20);
+
+    expect(component.rating).toEqual(1);
+    expect(component.totalRating).toEqual(10);
+  });
+
+  it('should not allow a rating lower than 0', () => {
+    component.ngOnInit();
+    component.totalRating = 10;
+    component.updateRating(-10);
+
+    expect(component.rating).toEqual(0);
+    expect(component.totalRating).toEqual(10);
+  });
+
+  it('should accept a new valid rating', () => {
+    component.ngOnInit();
+    component.totalRating = 10;
+    component.updateRating(9);
+
+    expect(component.rating).toEqual(9);
+    expect(component.totalRating).toEqual(10);
+  });
+
+  it('should reflect the rating in the rating label', () => {
+    component.ngOnInit();
+    expect(component.ratingLabel).toEqual('0 / 5');
+
+    component.updateRating(-1);
+    expect(component.ratingLabel).toEqual('0 / 5');
+
+    component.updateRating(12);
+    expect(component.ratingLabel).toEqual('0 / 5');
+
+    component.updateRating(2);
+    expect(component.ratingLabel).toEqual('2 / 5');
+
+    component.updateRating(5);
+    expect(component.ratingLabel).toEqual('5 / 5');
+  });
+
+  /**
+   * For Graded Tasks
+   */
+  it('should accept a new valid grade', () => {
+    component.ngOnInit();
+    component.updateGrade(3);
+    expect(component.selectedGrade).toEqual(3);
+  });
+
+  it('should not accept a new invalid grade', () => {
+    component.ngOnInit();
+    component.updateGrade(10);
+    expect(component.selectedGrade).toEqual(0);
+
+    component.updateGrade(-10);
+    expect(component.selectedGrade).toEqual(0);
+  });
+});
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.ts b/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.ts
new file mode 100644
index 0000000000..b6a8adb053
--- /dev/null
+++ b/src/app/tasks/modals/grade-task-modal/grade-task-modal.component.ts
@@ -0,0 +1,82 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {GradeService, Task} from 'src/app/api/models/doubtfire-model';
+
+@Component({
+  selector: 'grade-task-modal',
+  templateUrl: './grade-task-modal.component.html',
+  styleUrls: ['./grade-task-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class GradeTaskModalComponent implements OnInit {
+  task: Task;
+  gradeValues: number[];
+
+  // Task Rating
+  totalRating: number;
+  rating: number;
+  ratingLabel: string;
+  qualityRatingSelected: boolean;
+
+  // Grade Select
+  selectedGrade: number;
+
+  constructor(
+    public dialogRef: MatDialogRef<GradeTaskModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialogData: {task: Task},
+    private gradeService: GradeService,
+  ) {}
+
+  ngOnInit(): void {
+    this.task = this.dialogData.task;
+    this.rating = this.task.qualityPts > 0 ? this.task.qualityPts : 0;
+    this.qualityRatingSelected = this.task.qualityPts >= 0;
+    this.selectedGrade = this.task.grade || 0;
+    this.totalRating = this.task.definition.maxQualityPts || 5;
+    this.gradeValues = this.gradeService.allGradeValuesFor(this.task.unit);
+    this.updateRatingLabel();
+  }
+
+  gradeName(grade: number): string {
+    return this.gradeService.gradeLabel(grade, this.task.unit);
+  }
+
+  dismiss(): void {
+    this.dialogRef.close();
+  }
+
+  close(): void {
+    // Pass values back to service
+    this.dialogRef.close({
+      qualityPts: this.rating,
+      selectedGrade: this.selectedGrade,
+    });
+  }
+
+  isValid() {
+    return (
+      (this.task.definition.isGraded && this.selectedGrade) ||
+      (this.task.definition.maxQualityPts > 0 && this.qualityRatingSelected)
+    );
+  }
+
+  updateRating(value: number): void {
+    if (value >= 0 && value <= this.totalRating) {
+      this.rating = value;
+      this.qualityRatingSelected = true;
+      this.updateRatingLabel();
+    }
+  }
+
+  updateRatingLabel(): void {
+    this.ratingLabel = `${this.rating} / ${this.totalRating}`;
+  }
+
+  updateGrade(grade: number | string): void {
+    const gradeValue = Number(grade);
+    if (this.gradeValues.includes(gradeValue)) {
+      this.selectedGrade = gradeValue;
+    }
+  }
+}
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.scss b/src/app/tasks/modals/grade-task-modal/grade-task-modal.scss
deleted file mode 100644
index 29e7941885..0000000000
--- a/src/app/tasks/modals/grade-task-modal/grade-task-modal.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.grade-task-modal {
-  .task-quality-rating {
-    &:focus {
-      outline: none;
-    }
-    i {
-      font-size: 2em;
-      cursor: pointer;
-    }
-    .icon-colorful {
-      color: rgb(255, 247, 141);
-      -webkit-text-stroke-width: 1px;
-      -webkit-text-stroke-color: orange;
-    }
-    .icon-disable {
-      color: #ccc;
-    }
-  }
-}
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.service.ts b/src/app/tasks/modals/grade-task-modal/grade-task-modal.service.ts
new file mode 100644
index 0000000000..aa24a9b56a
--- /dev/null
+++ b/src/app/tasks/modals/grade-task-modal/grade-task-modal.service.ts
@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/doubtfire-model';
+import {GradeTaskModalComponent} from './grade-task-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GradeTaskModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(
+    task: Task,
+    successCallback: (response: {grade: number; qualityPts: number}) => void,
+    errorCallback: () => void,
+  ): void {
+    this.dialog
+      .open(GradeTaskModalComponent, {
+        data: {
+          task: task,
+        },
+      })
+      .afterClosed()
+      .subscribe((result) => {
+        if (result) {
+          successCallback(result);
+        } else {
+          errorCallback();
+        }
+      });
+  }
+}
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html b/src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html
deleted file mode 100644
index 0906d7b593..0000000000
--- a/src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="grade-task-modal">
-  <div class="modal-header">
-    <h3>Assess Task Quality</h3>
-  </div>
-  <div class="modal-body text-center">
-    <div ng-if="task.definition.isGraded">
-      <p>Please provide a grade to change the student's status for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
-      <p class="btn-group">
-        <label ng-repeat="idx in gradeValues" class="btn btn-default col-sm-15 text-center" ng-model="data.desiredGrade" btn-radio="{{idx}}">
-          <grade-icon grade="grades[idx]" tooltip="This student completed the task to a {{grades[idx]}} standard" tooltip-append-to-body="true"></grade-icon>
-        </label>
-      </p>
-    </div>
-    <div ng-if="task.definition.maxQualityPts > 0">
-      <p>Please provide a quality rating for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
-      <rating class="task-quality-rating" ng-click="checkClearRating()" ng-model="data.rating" on-hover="hoveringOver(value)" on-leave="hoveringOver(null)" max="numStars" state-on="'fa fa-3x fa-star icon-colorful'" state-off="'fa fa-3x fa-star icon-disable'"></rating>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button class="btn btn-default" ng-click="dismiss()">
-      <i class="fa fa-times"></i>
-    </button>
-    <button class="btn btn-primary" ng-click="close()" ng-disabled="task.isGraded && data.desiredGrade == null">
-      <i class="fa fa-check"></i>
-    </button>
-  </div>
-</div>
diff --git a/src/app/tasks/modals/modals.coffee b/src/app/tasks/modals/modals.coffee
deleted file mode 100644
index 9dcd33874f..0000000000
--- a/src/app/tasks/modals/modals.coffee
+++ /dev/null
@@ -1,4 +0,0 @@
-angular.module('doubtfire.tasks.modals', [
-  'doubtfire.tasks.modals.grade-task-modal'
-  'doubtfire.tasks.modals.upload-submission-modal'
-])
diff --git a/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.html b/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.html
new file mode 100644
index 0000000000..f4eff4dfd0
--- /dev/null
+++ b/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.html
@@ -0,0 +1,81 @@
+<h2 mat-dialog-title>Select submission type</h2>
+<mat-dialog-content>
+  <p>
+    This task won't be marked as complete by your tutor. It will be assessed as part of your final
+    portfolio.
+  </p>
+  @if (!isPastFeedbackDeadline) {
+    <p>
+      You can submit it for feedback before the deadline, but you'll need to resubmit it later for
+      portfolio assessment.
+    </p>
+  }
+  <div class="flex justify-center gap-3 p-3">
+    <button
+      class="text-align flex size-[175px] flex-col items-center gap-2 p-1"
+      mat-raised-button
+      matTooltip="Receive feedback from your tutor"
+      [color]="selectedTransition === 'ready_for_feedback' ? 'primary' : 'default'"
+      [disabled]="isPastFeedbackDeadline"
+      (click)="selectRff()"
+    >
+      <mat-icon class="icon-size">grading</mat-icon>
+      <div class="text-center">I would like feedback</div>
+    </button>
+    <button
+      class="text-align flex size-[175px] flex-col items-center gap-2 p-1"
+      mat-raised-button
+      matTooltip="Submit directly for portfolio assessment"
+      [color]="selectedTransition === 'assess_in_portfolio' ? 'primary' : 'default'"
+      (click)="selectAip()"
+    >
+      <mat-icon class="icon-size">auto_stories</mat-icon>
+
+      <div class="text-center">I'm done!</div>
+    </button>
+  </div>
+  @if (isPastFeedbackDeadline) {
+    <div
+      class="flex items-start gap-3 rounded-md border border-l-4 border-red-300 bg-red-50 p-4 text-red-900"
+      role="alert"
+    >
+      <mat-icon class="shrink-0 text-red-600">warning</mat-icon>
+      <div>
+        <p class="m-0 font-semibold">Feedback deadline passed</p>
+        <p class="mt-1 mb-0">
+          This task can now only be submitted for assessment in your portfolio.
+        </p>
+      </div>
+    </div>
+  } @else if (selectedTransition === 'ready_for_feedback') {
+    <p>
+      You've made progress on this task and would like feedback, clarification, or to discuss
+      questions with your tutor.
+    </p>
+    <p>
+      If submitted before the deadline, your tutor will review it and provide feedback. After making
+      changes, you'll need to resubmit it before the portfolio deadline, using the
+      <strong>I’m done!</strong> button.
+    </p>
+  } @else if (selectedTransition === 'assess_in_portfolio') {
+    <p>
+      You’re done with this task and satisfied with your submission. You don’t require any further
+      feedback.
+    </p>
+    <p>
+      This submission will not be reviewed again by your tutor and will be assessed directly in your
+      final portfolio. You can resubmit as many times as you like until the portfolio deadline.
+    </p>
+  }
+</mat-dialog-content>
+<mat-dialog-actions class="flex justify-between">
+  <button mat-raised-button [mat-dialog-close]>Cancel</button>
+  <button
+    color="primary"
+    mat-raised-button
+    [disabled]="selectedTransition === null"
+    (click)="submit()"
+  >
+    Submit
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.scss b/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.scss
new file mode 100644
index 0000000000..50781aeafa
--- /dev/null
+++ b/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.scss
@@ -0,0 +1,6 @@
+.icon-size {
+  font-size: 35px;
+  height: 35px;
+  width: 35px;
+  margin: 0;
+}
diff --git a/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.ts b/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.ts
new file mode 100644
index 0000000000..ef90da6a05
--- /dev/null
+++ b/src/app/tasks/modals/submission-type-modal/submission-type-modal.component.ts
@@ -0,0 +1,60 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {TaskStatusEnum} from 'src/app/api/models/task-status';
+
+export interface SubmissionTypeModalData {
+  task: Task;
+}
+
+@Component({
+  selector: 'f-submission-type-modal',
+  templateUrl: './submission-type-modal.component.html',
+  styleUrls: ['./submission-type-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class SubmissionTypeModalComponent {
+  selectedTransition: 'ready_for_feedback' | 'assess_in_portfolio' = null;
+
+  public get isPastFeedbackDeadline(): boolean {
+    return Date.now() > this.data.task.localDeadlineDate().getTime();
+  }
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: SubmissionTypeModalData,
+    private dialogRef: MatDialogRef<SubmissionTypeModalComponent>,
+  ) {}
+
+  public selectRff() {
+    if (this.isPastFeedbackDeadline) {
+      return;
+    }
+
+    this.selectedTransition = 'ready_for_feedback';
+  }
+
+  public selectAip() {
+    this.selectedTransition = 'assess_in_portfolio';
+  }
+
+  public submit() {
+    if (
+      this.selectedTransition === null ||
+      (this.selectedTransition === 'ready_for_feedback' && this.isPastFeedbackDeadline)
+    ) {
+      return;
+    }
+
+    this.triggerTransition(this.selectedTransition);
+  }
+
+  private triggerTransition(status: TaskStatusEnum) {
+    this.data.task.triggerTransition(status);
+    this.dismissModal();
+  }
+
+  private dismissModal() {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/tasks/modals/submission-type-modal/submission-type-modal.service.ts b/src/app/tasks/modals/submission-type-modal/submission-type-modal.service.ts
new file mode 100644
index 0000000000..05381ad5c8
--- /dev/null
+++ b/src/app/tasks/modals/submission-type-modal/submission-type-modal.service.ts
@@ -0,0 +1,29 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {
+  SubmissionTypeModalComponent,
+  SubmissionTypeModalData,
+} from './submission-type-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SubmissionTypeModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(task: Task) {
+    const _dialogRef = this.dialog.open<SubmissionTypeModalComponent, SubmissionTypeModalData>(
+      SubmissionTypeModalComponent,
+      {
+        autoFocus: false,
+        data: {
+          task: task,
+        },
+        position: {top: '2.5%'},
+        width: '100%',
+        maxWidth: '700px',
+      },
+    );
+  }
+}
diff --git a/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.html b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.html
new file mode 100644
index 0000000000..19ed440ed1
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.html
@@ -0,0 +1,58 @@
+<div class="task-upload-requirements" [id]="elementId">
+  @if (hasRequirements) {
+    <p class="requirements-summary"><strong>Files required:</strong> {{ requiredFileCount }}</p>
+
+    <ul class="requirements-list">
+      @for (summary of summaries; track $index) {
+        <li class="requirement">
+          <p class="requirement-category">
+            <strong>Required file type:</strong> {{ summary.categoryLabel }}
+          </p>
+          @if (summary.name) {
+            <p class="requirement-name">{{ summary.name }}</p>
+          }
+          <p class="requirement-formats">
+            <strong>Accepted formats:</strong>
+            @if (summary.extensions.length) {
+              {{ summary.previewExtensions.join(', ') }}
+              @if (summary.hasMoreExtensions) {
+                <span>, &hellip;</span>
+              }
+            } @else {
+              Not specified for this task
+            }
+          </p>
+          <p class="requirement-max-size">
+            <strong>Maximum size:</strong> Not provided by the server. Upload limits still apply.
+          </p>
+
+          @if (summary.hasMoreExtensions) {
+            <button
+              class="extensions-toggle"
+              type="button"
+              [attr.aria-controls]="elementId + '-ext-' + $index"
+              [attr.aria-expanded]="isExpanded(summary)"
+              (click)="toggleExpanded(summary)"
+            >
+              {{ isExpanded(summary) ? 'Hide' : 'View' }} all accepted extensions
+            </button>
+            <ul
+              class="extensions-list"
+              [hidden]="!isExpanded(summary)"
+              [id]="elementId + '-ext-' + $index"
+            >
+              @for (extension of summary.extensions; track extension) {
+                <li>{{ extension }}</li>
+              }
+            </ul>
+          }
+        </li>
+      }
+    </ul>
+  } @else {
+    <p class="requirements-missing">
+      Upload requirements for this task are not currently available. Contact your teaching team if
+      this message persists.
+    </p>
+  }
+</div>
diff --git a/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.scss b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.scss
new file mode 100644
index 0000000000..37a5354fe8
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.scss
@@ -0,0 +1,63 @@
+.task-upload-requirements {
+  margin-bottom: 1em;
+  margin-top: 1em;
+  min-width: 0;
+}
+
+.requirements-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.requirement {
+  padding: 0.5em 0.75em;
+  margin-bottom: 0.5em;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  word-break: break-word;
+}
+
+.requirements-missing {
+  color: inherit;
+  font-style: italic;
+}
+
+.extensions-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: inherit;
+
+  &:hover,
+  &:focus {
+    outline: 2px solid currentColor;
+    outline-offset: 3px;
+  }
+}
+
+.extensions-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em 0.75em;
+  list-style: none;
+  margin: 0.5em 0 0;
+  padding: 0;
+
+  li {
+    border: 1px solid currentColor;
+    border-radius: 3px;
+    padding: 0.1em 0.5em;
+  }
+}
+
+// Narrow screens: stack extension chips full-width instead of relying on wrapping alone
+@media (max-width: 480px) {
+  .extensions-list {
+    flex-direction: column;
+    gap: 0.25em;
+  }
+}
diff --git a/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.spec.ts b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.spec.ts
new file mode 100644
index 0000000000..7dce66a720
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.spec.ts
@@ -0,0 +1,142 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {UploadRequirement} from 'src/app/api/models/task-definition';
+import {TaskUploadRequirementsComponent} from './task-upload-requirements.component';
+
+describe('TaskUploadRequirementsComponent', () => {
+  let component: TaskUploadRequirementsComponent;
+  let fixture: ComponentFixture<TaskUploadRequirementsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TaskUploadRequirementsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TaskUploadRequirementsComponent);
+    component = fixture.componentInstance;
+  });
+
+  function setRequirements(requirements: UploadRequirement[] | null | undefined) {
+    component.requirements = requirements;
+    component.ngOnChanges({
+      requirements: {
+        currentValue: requirements,
+        previousValue: undefined,
+        firstChange: true,
+        isFirstChange: () => true,
+      },
+    });
+    fixture.detectChanges();
+  }
+
+  it('should create', () => {
+    setRequirements([]);
+    expect(component).toBeTruthy();
+  });
+
+  describe('normal state', () => {
+    it('shows the category, accepted formats and required file count for each requirement', () => {
+      setRequirements([
+        {key: 'file0', name: 'Report', type: 'document'},
+        {key: 'file1', name: 'Data', type: 'csv'},
+      ]);
+
+      const text = (fixture.nativeElement as HTMLElement).textContent;
+      expect(text).toContain('Files required:');
+      expect(text).toContain('2');
+      expect(text).toContain('Document');
+      expect(text).toContain('PDF');
+      expect(text).toContain('Spreadsheet');
+      expect(text).toContain('CSV');
+      expect(text).toContain('XLS');
+      expect(text).toContain('XLSX');
+    });
+
+    it('does not show an expand control when the extension list is short', () => {
+      setRequirements([{key: 'file0', name: 'Report', type: 'document'}]);
+
+      const toggle = fixture.nativeElement.querySelector('.extensions-toggle');
+      expect(toggle).toBeNull();
+    });
+  });
+
+  describe('long extension list state', () => {
+    it('truncates a long extension list behind a collapsed, keyboard-operable toggle', () => {
+      setRequirements([{key: 'file0', name: 'Source code', type: 'code'}]);
+
+      const toggle: HTMLButtonElement = fixture.nativeElement.querySelector('.extensions-toggle');
+      expect(toggle).not.toBeNull();
+      expect(toggle.getAttribute('aria-expanded')).toBe('false');
+
+      const list: HTMLUListElement = fixture.nativeElement.querySelector('.extensions-list');
+      expect(list.hidden).toBe(true);
+
+      toggle.click();
+      fixture.detectChanges();
+
+      expect(toggle.getAttribute('aria-expanded')).toBe('true');
+      expect(list.hidden).toBe(false);
+      expect(list.textContent).toContain('JSON');
+      expect(list.textContent).toContain('IPYNB');
+    });
+  });
+
+  describe('missing policy state', () => {
+    it('shows a safe message when there are no upload requirements', () => {
+      setRequirements([]);
+
+      const text = (fixture.nativeElement as HTMLElement).textContent;
+      expect(text).toContain('not currently available');
+      expect(text).not.toContain('undefined');
+      expect(text).not.toContain('NaN');
+    });
+
+    it('shows a safe message when upload requirements are null', () => {
+      setRequirements(null);
+
+      const text = (fixture.nativeElement as HTMLElement).textContent;
+      expect(text).toContain('not currently available');
+    });
+
+    it('does not invent a size limit when the API does not expose one', () => {
+      setRequirements([{key: 'file0', name: 'Report', type: 'document'}]);
+
+      const text = (fixture.nativeElement as HTMLElement).textContent;
+      expect(text).toContain('Maximum size:');
+      expect(text).toContain('Not provided by the server');
+    });
+  });
+
+  it('uses current uploader extensions including Vue and compressed tar aliases', () => {
+    setRequirements([
+      {key: 'file0', name: 'Source', type: 'code'},
+      {key: 'file1', name: 'Archive', type: 'archive'},
+    ]);
+    expect(component.summaries[0].extensions).toContain('VUE');
+    expect(component.summaries[1].categoryLabel).toBe('Archive');
+    expect(component.summaries[1].extensions).toContain('TGZ');
+  });
+
+  it('uses unique description ids when two instances are rendered', () => {
+    const second = TestBed.createComponent(TaskUploadRequirementsComponent);
+    expect(second.componentInstance.elementId).not.toBe(component.elementId);
+    second.destroy();
+  });
+
+  it('clears expanded state when the requirements change', () => {
+    setRequirements([{key: 'file0', name: 'Source', type: 'code'}]);
+    component.toggleExpanded(component.summaries[0]);
+    setRequirements([{key: 'file0', name: 'New source', type: 'code'}]);
+    expect(component.isExpanded(component.summaries[0])).toBe(false);
+  });
+
+  describe('invalid/unrecognised requirement type state', () => {
+    it('falls back to a safe label instead of crashing or showing undefined', () => {
+      setRequirements([{key: 'file0', name: 'Mystery file', type: 'not-a-real-type'}]);
+
+      const text = (fixture.nativeElement as HTMLElement).textContent;
+      expect(text).toContain('not-a-real-type');
+      expect(text).toContain('Not specified for this task');
+      expect(text).not.toContain('undefined');
+    });
+  });
+});
diff --git a/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.ts b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.ts
new file mode 100644
index 0000000000..3e9652f0e5
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/task-upload-requirements.component.ts
@@ -0,0 +1,57 @@
+import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {UploadRequirement} from 'src/app/api/models/task-definition';
+import {UploadRequirementSummary, summariseUploadRequirement} from './upload-category';
+
+let nextRequirementsId = 0;
+
+/**
+ * Shows the accepted file category, formats and required file count for a task's
+ * upload requirements before a student opens the file picker or drops a file.
+ *
+ * This is a display-only component: file selection, drag-and-drop and rejected-file
+ * feedback all remain owned by the existing `f-file-uploader` component.
+ */
+@Component({
+  selector: 'f-task-upload-requirements',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  templateUrl: './task-upload-requirements.component.html',
+  styleUrls: ['./task-upload-requirements.component.scss'],
+})
+export class TaskUploadRequirementsComponent implements OnChanges {
+  @Input() requirements: UploadRequirement[] | null | undefined;
+
+  public readonly elementId = `task-upload-requirements-${nextRequirementsId++}`;
+
+  public summaries: UploadRequirementSummary[] = [];
+  private expandedKeys: Set<string> = new Set();
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.requirements) {
+      this.summaries = (this.requirements ?? []).map((requirement) =>
+        summariseUploadRequirement(requirement),
+      );
+      this.expandedKeys.clear();
+    }
+  }
+
+  public get hasRequirements(): boolean {
+    return this.summaries.length > 0;
+  }
+
+  public get requiredFileCount(): number {
+    return this.summaries.length;
+  }
+
+  public isExpanded(summary: UploadRequirementSummary): boolean {
+    return this.expandedKeys.has(summary.key);
+  }
+
+  public toggleExpanded(summary: UploadRequirementSummary): void {
+    if (this.expandedKeys.has(summary.key)) {
+      this.expandedKeys.delete(summary.key);
+    } else {
+      this.expandedKeys.add(summary.key);
+    }
+  }
+}
diff --git a/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/upload-category.ts b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/upload-category.ts
new file mode 100644
index 0000000000..94a219e580
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/task-upload-requirements/upload-category.ts
@@ -0,0 +1,41 @@
+import {UploadRequirement} from 'src/app/api/models/task-definition';
+import {ACCEPTED_TYPES} from 'src/app/common/file-uploader/file-upload-types';
+
+const CATEGORY_LABELS: Record<keyof typeof ACCEPTED_TYPES, string> = {
+  document: 'Document',
+  csv: 'Spreadsheet',
+  code: 'Code',
+  image: 'Image',
+  zip: 'Archive',
+};
+
+export const EXTENSION_PREVIEW_LIMIT = 8;
+
+export interface UploadRequirementSummary {
+  key: string;
+  name: string;
+  categoryLabel: string;
+  extensions: string[];
+  previewExtensions: string[];
+  hasMoreExtensions: boolean;
+}
+
+export function summariseUploadRequirement(
+  requirement: UploadRequirement,
+): UploadRequirementSummary {
+  // Match the uploader's archive alias and read the same extension policy.
+  const type = requirement.type === 'archive' ? 'zip' : requirement.type;
+  const knownType = Object.hasOwn(ACCEPTED_TYPES, type);
+  const category = knownType ? ACCEPTED_TYPES[type as keyof typeof ACCEPTED_TYPES] : undefined;
+  const extensions = (category?.extensions ?? []).map((extension) => extension.toUpperCase());
+  return {
+    key: requirement.key,
+    name: requirement.name,
+    categoryLabel: knownType
+      ? CATEGORY_LABELS[type as keyof typeof ACCEPTED_TYPES]
+      : type || 'File',
+    extensions,
+    previewExtensions: extensions.slice(0, EXTENSION_PREVIEW_LIMIT),
+    hasMoreExtensions: extensions.length > EXTENSION_PREVIEW_LIMIT,
+  };
+}
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.coffee b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.coffee
deleted file mode 100644
index b9c9ebd2b9..0000000000
--- a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.coffee
+++ /dev/null
@@ -1,266 +0,0 @@
-angular.module('doubtfire.tasks.modals.upload-submission-modal', [])
-
-#
-# A modal to run through uploading a submission
-#
-.factory('UploadSubmissionModal', ($modal, alertService) ->
-  UploadSubmissionModal = {}
-  #
-  # Open a grade task modal with the provided task
-  #
-  UploadSubmissionModal.show = (task, reuploadEvidence, isTestSubmission = false) ->
-    # Refuse to open modal if group task and not in a group
-    if !isTestSubmission && task.isGroupTask() && !task.group
-      alertService.error( "This is a group task. Join a #{task.definition.groupSet.name} group to submit this task.", 8000)
-      return null
-
-    if isTestSubmission
-      task.canReuploadEvidence = -> false
-      # task.definition = {id: task.id, abbreviation: task.abbreviation, upload_requirements: task.uploadRequirements}
-      # task.project = -> project
-      task.isTestSubmission = isTestSubmission
-
-    $modal.open
-      templateUrl: 'tasks/modals/upload-submission-modal/upload-submission-modal.tpl.html'
-      controller: 'UploadSubmissionModalCtrl'
-      size: 'lg'
-      keyboard: false
-      backdrop: 'static'
-      resolve:
-        task: -> task
-        reuploadEvidence: -> reuploadEvidence
-
-  UploadSubmissionModal
-)
-.controller('UploadSubmissionModalCtrl', ($scope, $rootScope, $timeout, $modalInstance, newTaskService, newProjectService, task, reuploadEvidence, outcomeService, PrivacyPolicy) ->
-  $scope.privacyPolicy = PrivacyPolicy
-  # Expose task to scope
-  $scope.task = task
-
-  # Set up submission types
-  submissionTypes = _.chain(newTaskService.submittableStatuses).map((status) ->
-    [ status, newTaskService.statusLabels.get(status) ]
-  ).fromPairs().value()
-
-  if $scope.task.inSubmittedState()
-    submissionTypes['reupload_evidence'] = 'New Evidence'
-
-  # Load in submission type
-  if $scope.task.isTestSubmission
-    $scope.submissionType = 'test_submission'
-    submissionTypes = {'test_submission': 'Test Submission'}
-    # submissionTypes['test_submission'] = 'Test Submission'
-  else
-    $scope.submissionType = if reuploadEvidence then 'reupload_evidence' else $scope.task.status
-
-  $scope.submissionTypes = submissionTypes
-
-  # Upload files
-  $scope.uploader = {
-    # url: Task.generateSubmissionUrl($scope.task.project, $scope.task)
-    url: if $scope.task.isTestSubmission then $scope.task.testSubmissionUrl() else $scope.task.submissionUrl()
-    files: _.chain(task.definition.uploadRequirements).map((file) ->
-      [file.key, { name: file.name, type: file.type }]
-    ).fromPairs().value()
-    payload: {}
-    isUploading: null # initialised by uploader
-    isReady: null # initialised by uploader
-    start: null # initialised by uploader
-    onBeforeUpload: ->
-      $scope.uploader.payload.contributions = mapTeamToPayload() if _.includes(states.shown, 'group')
-      $scope.uploader.payload.alignment_data = mapAlignmentDataToPayload() if _.includes(states.shown, 'alignment')
-      $scope.uploader.payload.trigger = 'need_help' if $scope.submissionType == 'need_help'
-    onSuccess: (response) ->
-      $scope.uploader.response = response
-      if $scope.task.isTestSubmission
-        newProjectService.loadProject(response.project_id, $scope.task.unit).subscribe({
-          next: (response) ->
-            $scope.task.project = response
-        })
-    onFailureCancel: $modalInstance.dismiss
-    onComplete: ->
-      $modalInstance.close(task)
-      unless $scope.task.isTestSubmission
-        # Add comment if requested
-        task.addComment($scope.comment) if $scope.comment.trim().length > 0
-      # Broadcast that upload is complete
-      $rootScope.$broadcast('TaskSubmissionUploadComplete', task)
-      # Perform as timeout to show 'Upload Complete'
-      $timeout((->
-        unless $scope.task.isTestSubmission
-          response = $scope.uploader.response
-          expectedStatus = if ["need_help", "ready_for_feedback"].includes($scope.submissionType) then $scope.submissionType else response.status
-
-          $scope.task.updateFromJson(response, newTaskService.mapping)
-
-          $scope.task.processTaskStatusChange(expectedStatus, alertService)
-      ), 1500)
-  }
-
-  # States functionality
-  states = {
-    # All possible states
-    all: ['group', 'files', 'alignment', 'comments', 'uploading']
-    # Only states which are shown (populated in initialise)
-    shown: []
-    # The currently active state (set in initialise)
-    active: null
-    # Current index of the active state
-    activeIdx: -> states.shown.indexOf(states.active)
-    # Sets the active state
-    setActive: (state) -> states.active = state
-    # Sets the active state to the next state that should be shown
-    next: -> states.setActive(states.shown[states.activeIdx() + 1])
-    # Sets the active state to the previous state that should be shown
-    previous: -> states.setActive(states.shown[states.activeIdx() - 1])
-    # Decides whether this state is hidden to the left or right of the active state
-    isHidden: (state) -> {
-      left: states.shown.indexOf(state) < states.activeIdx(),
-      right: states.shown.indexOf(state) > states.activeIdx()
-    }
-    # Conditions on which to remove specific states
-    removed: ->
-      # Only show some states if RFF
-      isRFF = $scope.submissionType == 'ready_for_feedback'
-      isTestSubmission = $scope.submissionType == 'test_submission'
-      removed = []
-      # Remove group and alignment states
-      removed.push('group') if !isRFF || !task.isGroupTask()
-      removed.push('alignment') if !isRFF || !task.unit.ilos.length > 0
-      removed.push('comments') if isTestSubmission
-      removed
-    # Initialises the states
-    initialise: ->
-      # Each 'state' or 'step' in the wizard
-      states.shown = _.difference(states.all, states.removed())
-      states.setActive(_.first(states.shown))
-  }
-  states.initialise()
-
-  # If the submission type changes, then modify status (if applicable) and
-  # reinitialise states
-  $scope.onSelectNewSubmissionType = (newType) ->
-    # Only change status if not reuploading evidence
-    $scope.task.status = newType unless newType == 'reupload_evidence'
-    $scope.submissionType = newType
-    states.initialise()
-
-  # Whether to apply ng-hide to state
-  $scope.isHidden = states.isHidden
-
-  # Go to next or previous state
-  $scope.goToState = {
-    next: states.next
-    previous: states.previous
-  }
-
-  # Whether or not we should disable this button
-  $scope.shouldDisableBtn = {
-    next: ->
-      shouldDisableByState = {
-        # Disable group if group members not allocated anything
-        group: ->
-          _.chain($scope.team.memberContributions).map('confRating').compact().value().length == 0
-        # Disable alignment if no alignments made (need at least 1) and
-        # if description is blank
-        alignment: ->
-          _.chain($scope.alignments).map('rating').compact().value().length == 0 ||
-          $scope.alignmentsRationale.trim().length == 0
-        # Disable files if no files made
-        files: ->
-          !$scope.uploader.isReady
-      }
-      shouldDisableByState[states.active]?() || false
-    back: ->
-      false
-    submit: ->
-      # Disable if no comment is supplied with need_help
-      !$scope.uploader.isReady || ($scope.comment.trim().length == 0 && $scope.submissionType == 'need_help')
-    cancel: ->
-      # Can't cancel whilst uploading
-      $scope.uploader.isUploading
-  }
-
-  # Whether or not we should show this button
-  $scope.shouldShowBtn = {
-    cancel: ->
-      # Can't cancel whilst uploading
-      !$scope.uploader.isUploading
-    next: ->
-      nextState = states.shown[states.activeIdx() + 1]
-      nextState? && nextState != 'uploading'
-    back: ->
-      prevState = states.shown[states.activeIdx() - 1]
-      prevState? && prevState != 'uploading'
-    submit: ->
-      # Show submit only if state before uploading
-      states.activeIdx() == states.shown.indexOf('uploading') - 1
-  }
-
-  # Click upload on UI
-  $scope.uploadButtonClicked = ->
-    # Move files to the end to simulate as though state move
-    states.shown = _.without(states.shown, 'files')
-    states.shown.push('files')
-    $timeout((->
-      states.setActive('files')
-      $scope.uploader.start()
-    ), 251)
-
-  # Team for group state (populated by assignment rater)
-  $scope.team = { memberContributions: [] }
-
-  # Maps team data to payload data
-  mapTeamToPayload = ->
-    total = task.group.contributionSum($scope.team.memberContributions)
-    _.map($scope.team.memberContributions,
-      (member) -> {
-        project_id: member.project.id,
-        pct: (100 * member.rating / total).toFixed(0),
-        pts: member.rating
-      }
-    )
-
-  # Comment on the task
-  $scope.comment = ""
-
-  # Maps the alignment data to payload data
-  mapAlignmentDataToPayload = ->
-    _.chain($scope.alignments)
-    .map((alignment, key) ->
-      alignment.rationale = $scope.alignmentsRationale
-      alignment.ilo_id = +key
-      alignment
-    )
-    .filter((alignment) ->
-      alignment.rating > 0
-    )
-    .value()
-
-  unless $scope.task.isTestSubmission
-    # Get initial alignment data...
-    initialAlignments = task.project.taskOutcomeAlignments.filter( (a) -> a.taskDefinition.id == task.definition.id )
-    # ILO alignment defaults
-    $scope.alignmentsRationale = if initialAlignments.length > 0 then initialAlignments[0].description else ""
-    staffAlignments = $scope.task.staffAlignments()
-    $scope.ilos = _.map(task.unit.ilos, (ilo) ->
-      staffAlignment = _.find(staffAlignments, (sa) -> sa.learningOutcome.id ==  ilo.id)
-      staffAlignment ?= {}
-      staffAlignment.rating ?= 0
-      staffAlignment.label = outcomeService.alignmentLabels[staffAlignment.rating]
-      ilo.staffAlignment = staffAlignment
-      ilo
-    )
-    $scope.alignments = _.chain(task.unit.ilos)
-      .map((ilo) ->
-        value = initialAlignments.filter((a) -> a.learningOutcome.id == ilo.id)?[0]?.rating
-        value ?= 0
-        [ilo.id, {rating: value }]
-      )
-      .fromPairs()
-      .value()
-  else
-    $scope.ilos = []
-    $scope.alignments = []
-    $scope.alignmentsRationale = ""
-)
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.html b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.html
new file mode 100644
index 0000000000..0103af6ae4
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.html
@@ -0,0 +1,218 @@
+<div class="flex flex-col items-start justify-between sm:flex-row sm:items-center">
+  <h2 mat-dialog-title>Submit {{ task.definition.abbreviation }} {{ task.definition.name }}</h2>
+  <mat-form-field
+    appearance="outline"
+    class="my-2.5 w-full px-6 sm:mt-[22px] sm:mr-[24px] sm:px-0 lg:max-w-sm"
+  >
+    <mat-label>Submission type</mat-label>
+    <mat-select
+      [disabled]="uploadStarted || isUploading"
+      [(ngModel)]="submissionType"
+      (ngModelChange)="onSubmissionTypeChange($event)"
+    >
+      @for (option of submissionTypeOptions; track option.id) {
+        <mat-option [value]="option.id">{{ option.label }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+</div>
+
+<mat-dialog-content>
+  <div class="flex flex-col gap-2.5">
+    @if (isGroupStage && !uploadStarted) {
+      <mat-card>
+        <mat-card-content class="flex flex-col gap-2 pt-3.5">
+          <div>
+            <h3 class="font-semibold">Team Contribution</h3>
+            <p class="text-gray-600">
+              Please rate each team member's effort on {{ task.definition.name }}.
+            </p>
+            <p class="text-gray-500">Click the same rating twice to record no contribution.</p>
+          </div>
+
+          <f-group-member-contribution-assigner
+            [isTestSubmission]="data.isTestSubmission"
+            [project]="task.project"
+            [task]="task"
+            [(team)]="team"
+          >
+          </f-group-member-contribution-assigner>
+        </mat-card-content>
+      </mat-card>
+    }
+
+    <mat-card [class.hidden]="!isDetailsStage && !uploadStarted">
+      <mat-card-content class="flex flex-col gap-2 pt-3.5">
+        @if (!uploadStarted) {
+          <div>
+            <h3 class="font-semibold">
+              Select {{ submissionType === 'need_help' ? 'files' : 'evidence' }} to upload
+            </h3>
+
+            @if (submissionType === 'need_help') {
+              <p class="text-gray-600">
+                Upload the required files so your tutor can help with this task, even if they are
+                not finished yet.
+              </p>
+            } @else {
+              <p class="text-gray-600">
+                Upload files that show your evidence of work until each required file has been
+                selected.
+              </p>
+            }
+          </div>
+        }
+
+        <f-task-upload-requirements
+          #uploadRequirements
+          [hidden]="uploadStarted || isUploading"
+          [requirements]="task.definition.uploadRequirements"
+        ></f-task-upload-requirements>
+
+        <f-file-uploader
+          #fileUploader
+          [describedBy]="uploadStarted || isUploading ? null : uploadRequirements.elementId"
+          [files]="fileRequirements"
+          [onBeforeUpload]="onBeforeUpload"
+          [onClickFailureCancel]="cancel"
+          [onComplete]="onUploadComplete"
+          [onSuccess]="onUploadSuccess"
+          [payload]="payload"
+          [resetAfterUpload]="false"
+          [showUploadButton]="false"
+          [singleDropZone]="true"
+          [url]="uploadUrl"
+          (isReadyChange)="onReadyChange($event)"
+          (uploadReady)="onUploaderReady($event)"
+        >
+        </f-file-uploader>
+      </mat-card-content>
+    </mat-card>
+
+    @if (!uploadStarted && isCommentsStage) {
+      <div class="flex flex-col gap-2.5">
+        <mat-card>
+          <mat-card-content class="flex flex-col gap-2.5 pt-3.5">
+            <div>
+              @if (submissionType === 'need_help') {
+                <h3 class="font-semibold">What do you need help with?</h3>
+                <p class="text-gray-600">
+                  Add a short comment so your tutor knows what help you need on this task.
+                </p>
+              } @else {
+                <h3 class="font-semibold">Final comments</h3>
+                @if (task.definition.assessInPortfolioOnly) {
+                  <p class="text-gray-600">
+                    Please specify which areas of your submission you would like feedback on.
+                  </p>
+                } @else {
+                  <p class="text-gray-600">
+                    Add an optional note for your tutor to read while assessing this submission.
+                  </p>
+                }
+              }
+            </div>
+
+            <mat-form-field appearance="outline" class="w-full">
+              <mat-label>Comment</mat-label>
+              <textarea
+                matInput
+                rows="4"
+                [placeholder]="commentPlaceholder"
+                [(ngModel)]="comment"
+              ></textarea>
+            </mat-form-field>
+
+            <div class="text-right text-gray-500">
+              Character count: {{ comment.length }}
+              @if (requiresComment) {
+                <span>(Min. {{ minCommentLength }})</span>
+              }
+            </div>
+          </mat-card-content>
+        </mat-card>
+
+        @if (privacyPolicy.privacy) {
+          <mat-card>
+            <mat-card-content class="flex flex-col gap-2 pt-3.5">
+              <div>
+                <h3 class="font-semibold">Declaration</h3>
+                <p class="text-[14px] text-gray-600">{{ privacyPolicy.privacy }}</p>
+              </div>
+
+              <div>
+                <button
+                  color="primary"
+                  mat-stroked-button
+                  type="button"
+                  (click)="showPlagiarism = !showPlagiarism"
+                >
+                  Plagiarism and collusion
+                </button>
+
+                @if (showPlagiarism) {
+                  <div class="mt-1 text-[13px] text-gray-600">
+                    {{ privacyPolicy.plagiarism }}
+                  </div>
+                }
+              </div>
+            </mat-card-content>
+          </mat-card>
+        }
+      </div>
+    }
+  </div>
+</mat-dialog-content>
+
+@if (!uploadStarted) {
+  <mat-dialog-actions align="end">
+    <button class="mr-auto" color="warn" mat-button type="button" (click)="cancel()">
+      Cancel Submission
+    </button>
+
+    @if (isGroupStage) {
+      <button
+        color="primary"
+        mat-raised-button
+        type="button"
+        [disabled]="shouldDisableNext()"
+        (click)="goToDetailsStage()"
+      >
+        Next
+      </button>
+    }
+
+    @if (isDetailsStage && showCommentsSection) {
+      <button
+        color="primary"
+        mat-raised-button
+        type="button"
+        [disabled]="shouldDisableNext()"
+        (click)="goToCommentsStage()"
+      >
+        Next
+      </button>
+    }
+
+    @if (isDetailsStage && showGroupSection) {
+      <button mat-button type="button" (click)="goToGroupStage()">Back</button>
+    }
+
+    @if (isCommentsStage) {
+      <button mat-button type="button" (click)="goToDetailsStage()">Back</button>
+    }
+
+    @if ((!showCommentsSection && isDetailsStage) || isCommentsStage) {
+      <button
+        color="primary"
+        mat-flat-button
+        type="button"
+        [disabled]="shouldDisableSubmit()"
+        [matTooltip]="submitTooltip"
+        (click)="uploadButtonClicked()"
+      >
+        Upload Submission
+      </button>
+    }
+  </mat-dialog-actions>
+}
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.scss b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.spec.ts b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.spec.ts
new file mode 100644
index 0000000000..7e2343867f
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.spec.ts
@@ -0,0 +1,89 @@
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {BehaviorSubject} from 'rxjs';
+import {ProjectService, TaskService} from 'src/app/api/models/doubtfire-model';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileUploaderComponent} from 'src/app/common/file-uploader/file-uploader.component';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {EmojiService} from 'src/app/common/services/emoji.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {PrivacyPolicy} from 'src/app/config/privacy-policy/privacy-policy';
+import {TaskUploadRequirementsComponent} from './task-upload-requirements/task-upload-requirements.component';
+import {UploadSubmissionModalComponent} from './upload-submission-modal.component';
+
+describe('UploadSubmissionModalComponent upload guidance', () => {
+  let fixture: ComponentFixture<UploadSubmissionModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        UploadSubmissionModalComponent,
+        FileUploaderComponent,
+        TaskUploadRequirementsComponent,
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            isTestSubmission: true,
+            task: {
+              definition: {
+                abbreviation: '1.1P',
+                name: 'Upload evidence',
+                uploadRequirements: [{key: 'file0', name: 'Source code', type: 'code'}],
+              },
+              testSubmissionUrl: () => '/api/test-submission',
+              isGroupTask: () => false,
+            },
+          },
+        },
+        {provide: MatDialogRef, useValue: {}},
+        {provide: TaskService, useValue: {}},
+        {provide: ProjectService, useValue: {}},
+        {provide: PrivacyPolicy, useValue: {}},
+        {provide: AlertService, useValue: {}},
+        {provide: EmojiService, useValue: {}},
+        {provide: UserService, useValue: {}},
+        {provide: DoubtfireConstants, useValue: {ExternalName: new BehaviorSubject('OnTrack')}},
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(UploadSubmissionModalComponent);
+    fixture.detectChanges();
+  });
+
+  it('shows guidance before selection and describes the real file picker controls', () => {
+    const root: HTMLElement = fixture.nativeElement;
+    const button = root.querySelector<HTMLButtonElement>('.file-drop-zone')!;
+    const input = root.querySelector<HTMLInputElement>('input[type=file]')!;
+    const help = root.querySelector<HTMLElement>('.task-upload-requirements')!;
+    expect(help.textContent).toContain('Files required: 1');
+    expect(button.getAttribute('aria-describedby')).toBe(help.id);
+    expect(input.getAttribute('aria-describedby')).toBe(help.id);
+    expect(help.compareDocumentPosition(button) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(input.accept).toContain('.vue');
+    expect(fixture.componentInstance.isUploaderReady).toBe(false);
+  });
+
+  it('preserves invalid-file feedback and enables submission only after an accepted selection', () => {
+    const input: HTMLInputElement = fixture.nativeElement.querySelector('input[type=file]');
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: [new File(['x'], 'bad.exe')],
+    });
+    input.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('Invalid file provided');
+    expect(fixture.componentInstance.isUploaderReady).toBe(false);
+
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: [new File(['x'], 'source.vue')],
+    });
+    input.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.isUploaderReady).toBe(true);
+    expect(fixture.nativeElement.textContent).toContain('source.vue');
+  });
+});
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.ts b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.ts
new file mode 100644
index 0000000000..f5f6d42b6d
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.component.ts
@@ -0,0 +1,357 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit, ViewChild} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MemberContribution} from 'src/app/api/models/groups/group';
+import {Task} from 'src/app/api/models/task';
+import {TaskStatusEnum} from 'src/app/api/models/task-status';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {FileUploaderComponent} from 'src/app/common/file-uploader/file-uploader.component';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {EmojiService} from 'src/app/common/services/emoji.service';
+import {PrivacyPolicy} from 'src/app/config/privacy-policy/privacy-policy';
+
+type UploadStage = 'group' | 'details' | 'comments';
+type UploadSubmissionType = TaskStatusEnum | 'reupload_evidence' | 'test_submission';
+
+interface UploadSubmissionTypeOption {
+  id: UploadSubmissionType;
+  label: string;
+}
+
+interface UploadSubmissionFileSpec {
+  name: string;
+  type: string;
+}
+
+type UploadSubmissionFileMap = Record<string, UploadSubmissionFileSpec>;
+
+interface TeamData {
+  memberContributions: MemberContribution[];
+}
+
+interface UploadSubmissionResponse {
+  id: number;
+  project_id: number;
+  status: TaskStatusEnum;
+  [key: string]: unknown;
+}
+
+export interface UploadSubmissionModalData {
+  task: Task;
+  reuploadEvidence: boolean;
+  isTestSubmission: boolean;
+}
+
+export interface UploadSubmissionModalCloseResult {
+  value: Task;
+}
+
+export interface UploadSubmissionModalDismissResult {
+  dismissed: true;
+}
+
+export type UploadSubmissionModalResult =
+  | UploadSubmissionModalCloseResult
+  | UploadSubmissionModalDismissResult;
+
+@Component({
+  selector: 'f-upload-submission-modal',
+  templateUrl: './upload-submission-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UploadSubmissionModalComponent implements OnInit {
+  @ViewChild(FileUploaderComponent) private fileUploader?: FileUploaderComponent;
+
+  public readonly minCommentLength = 25;
+  public readonly task = this.data.task;
+  public readonly privacyPolicy = this.privacyPolicyService;
+  public readonly fileRequirements: UploadSubmissionFileMap =
+    this.task.definition.uploadRequirements.reduce((files, file) => {
+      files[file.key] = {
+        name: file.name,
+        type: file.type,
+      };
+      return files;
+    }, {} as UploadSubmissionFileMap);
+  public readonly uploadUrl = this.data.isTestSubmission
+    ? this.task.testSubmissionUrl()
+    : this.task.submissionUrl();
+
+  public submissionTypeOptions: UploadSubmissionTypeOption[] = [];
+  public submissionType: UploadSubmissionType = 'ready_for_feedback';
+  public currentStage: UploadStage = 'details';
+  public payload: Record<string, unknown> = {};
+  public team: TeamData = {memberContributions: []};
+  public comment = '';
+  public showPlagiarism = false;
+  public isUploaderReady = false;
+  public uploadStarted = false;
+  public uploadSubmitLocked = false;
+
+  private uploadResponse: UploadSubmissionResponse | null = null;
+  private startUpload?: () => void;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: UploadSubmissionModalData,
+    private dialogRef: MatDialogRef<UploadSubmissionModalComponent, UploadSubmissionModalResult>,
+    private taskService: TaskService,
+    private projectService: ProjectService,
+    private privacyPolicyService: PrivacyPolicy,
+    private alertService: AlertService,
+    private emojiService: EmojiService,
+  ) {}
+
+  ngOnInit(): void {
+    this.submissionTypeOptions = this.buildSubmissionTypeOptions();
+    this.submissionType = this.data.isTestSubmission
+      ? 'test_submission'
+      : this.data.reuploadEvidence
+        ? 'reupload_evidence'
+        : this.task.status;
+
+    this.resetUploadState();
+  }
+
+  public get isUploading(): boolean {
+    return this.fileUploader?.isUploading ?? false;
+  }
+
+  public get showGroupSection(): boolean {
+    return this.submissionType === 'ready_for_feedback' && this.task.isGroupTask();
+  }
+
+  public get showCommentsSection(): boolean {
+    return this.submissionType !== 'test_submission';
+  }
+
+  public get isDetailsStage(): boolean {
+    return this.currentStage === 'details';
+  }
+
+  public get isGroupStage(): boolean {
+    return this.currentStage === 'group' && this.showGroupSection;
+  }
+
+  public get isCommentsStage(): boolean {
+    return this.currentStage === 'comments' && this.showCommentsSection;
+  }
+
+  public get requiresComment(): boolean {
+    return (
+      this.submissionType === 'need_help' ||
+      ((this.submissionType === 'ready_for_feedback' ||
+        this.submissionType === 'reupload_evidence') &&
+        this.task.definition.assessInPortfolioOnly)
+    );
+  }
+
+  public get submitTooltip(): string {
+    return this.requiresComment && this.comment.trim().length < this.minCommentLength
+      ? 'This submission requires a comment'
+      : '';
+  }
+
+  public get commentPlaceholder(): string {
+    if (this.submissionType === 'need_help') {
+      return 'I need help with...';
+    }
+
+    if (
+      this.submissionType === 'ready_for_feedback' &&
+      this.task.definition.assessInPortfolioOnly
+    ) {
+      return 'I would like feedback with...';
+    }
+
+    return 'Make a comment...';
+  }
+
+  public get hasRatedTeamMember(): boolean {
+    return this.team.memberContributions.some((member) => !!member.rating);
+  }
+
+  public shouldDisableNext(): boolean {
+    if (this.isGroupStage) {
+      return !this.hasRatedTeamMember;
+    }
+
+    if (this.isDetailsStage) {
+      return !this.isUploaderReady;
+    }
+
+    return false;
+  }
+
+  public shouldDisableSubmit(): boolean {
+    return (
+      this.uploadSubmitLocked ||
+      (this.showGroupSection && !this.hasRatedTeamMember) ||
+      !this.isUploaderReady ||
+      (this.requiresComment && this.comment.trim().length < this.minCommentLength)
+    );
+  }
+
+  public onSubmissionTypeChange(newType: UploadSubmissionType): void {
+    if (newType !== 'reupload_evidence' && newType !== 'test_submission') {
+      this.task.status = newType as TaskStatusEnum;
+    }
+
+    this.submissionType = newType;
+    this.resetUploadState();
+  }
+
+  public goToCommentsStage(): void {
+    if (this.showCommentsSection && !this.shouldDisableNext()) {
+      this.currentStage = 'comments';
+    }
+  }
+
+  public goToGroupStage(): void {
+    if (this.showGroupSection) {
+      this.currentStage = 'group';
+    }
+  }
+
+  public goToDetailsStage(): void {
+    this.currentStage = 'details';
+  }
+
+  public cancel = (): void => {
+    this.uploadSubmitLocked = false;
+    this.dialogRef.close({dismissed: true});
+  };
+
+  public onReadyChange(isReady: boolean): void {
+    this.isUploaderReady = isReady;
+  }
+
+  public onUploaderReady(startUpload: () => void): void {
+    this.startUpload = startUpload;
+  }
+
+  public onBeforeUpload = (): void => {
+    Object.keys(this.payload).forEach((key) => delete this.payload[key]);
+
+    if (this.showGroupSection) {
+      this.payload['contributions'] = this.mapTeamToPayload();
+    }
+
+    if (this.submissionType === 'need_help') {
+      this.payload['trigger'] = 'need_help';
+    }
+
+    if (
+      this.submissionType === 'assess_in_portfolio' ||
+      this.task.status === 'assess_in_portfolio'
+    ) {
+      this.payload['trigger'] = 'assess_in_portfolio';
+    }
+
+    const trimmedComment = this.comment.trim();
+    if (trimmedComment !== '') {
+      this.payload['comment'] = this.emojiService.nativeEmojiToColons(trimmedComment);
+    }
+  };
+
+  public onUploadSuccess = (response: unknown): void => {
+    if (this.isValidUploadResponse(response)) {
+      this.uploadResponse = response;
+
+      if (this.data.isTestSubmission) {
+        this.projectService.loadProject(response.project_id, this.task.unit).subscribe({
+          next: (project) => {
+            this.task.project = project;
+          },
+        });
+      }
+
+      return;
+    }
+
+    console.error('Invalid response', response);
+    this.dialogRef.close({value: this.task});
+    this.alertService.error(
+      'Upload failed. Please try again, or contact your tutor if the issue continues.',
+      8000,
+    );
+  };
+
+  public onUploadComplete = (): void => {
+    this.uploadSubmitLocked = false;
+
+    if (!this.uploadResponse?.id) {
+      return;
+    }
+
+    const response = this.uploadResponse;
+    this.dialogRef.close({value: this.task});
+
+    window.setTimeout(() => {
+      if (this.data.isTestSubmission) {
+        return;
+      }
+
+      const expectedStatus =
+        this.submissionType === 'need_help' || this.submissionType === 'ready_for_feedback'
+          ? this.submissionType
+          : response.status;
+
+      this.task.updateFromJson(response, this.taskService.mapping);
+      this.task.processTaskStatusChange(expectedStatus as TaskStatusEnum, this.alertService, true);
+    }, 1500);
+  };
+
+  public uploadButtonClicked(): void {
+    if (this.uploadSubmitLocked || this.isUploading) {
+      return;
+    }
+
+    this.uploadSubmitLocked = true;
+    this.uploadStarted = true;
+    this.currentStage = 'details';
+    this.startUpload?.();
+  }
+
+  private buildSubmissionTypeOptions(): UploadSubmissionTypeOption[] {
+    if (this.data.isTestSubmission) {
+      return [{id: 'test_submission', label: 'Test Submission'}];
+    }
+
+    const options: UploadSubmissionTypeOption[] = this.taskService.submittableStatuses.map(
+      (status) => ({
+        id: status,
+        label: this.taskService.statusLabels.get(status) ?? status,
+      }),
+    );
+
+    if (this.task.inSubmittedState()) {
+      options.push({id: 'reupload_evidence', label: 'New Evidence'});
+    }
+
+    return options;
+  }
+
+  private resetUploadState(): void {
+    this.uploadStarted = false;
+    this.uploadSubmitLocked = false;
+    this.uploadResponse = null;
+    this.currentStage = this.showGroupSection ? 'group' : 'details';
+  }
+
+  private mapTeamToPayload(): {project_id: number; pct: string; pts: number}[] {
+    const total = this.task.group?.contributionSum(this.team.memberContributions) ?? 0;
+
+    return this.team.memberContributions.map((member) => ({
+      project_id: member.project.id,
+      pct: total > 0 ? ((100 * member.rating) / total).toFixed(0) : '0',
+      pts: member.rating,
+    }));
+  }
+
+  private isValidUploadResponse(response: unknown): response is UploadSubmissionResponse {
+    const candidate = response as Partial<UploadSubmissionResponse> | null;
+
+    return !!candidate && typeof candidate === 'object' && !!candidate.id && !!candidate.project_id;
+  }
+}
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.scss b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.scss
deleted file mode 100644
index 335602a147..0000000000
--- a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.upload-submission-modal {
-  .modal-header {
-    padding-left: 12px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-  }
-  select.submission-type {
-    width: auto !important;
-    display: inline-block;
-    margin-left: 0.6ex;
-    font-size: 20px;
-  }
-  .modal-body {
-    min-height: 420px;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-  .state {
-    position: absolute;
-    left: $panel-body-padding;
-    right: $panel-body-padding;
-    opacity: 1;
-    transition: 0.25s ease-in-out left, 0.25s ease-in-out right, 0.25s linear opacity;
-    &.state-hidden-left {
-      left: -100%;
-      right: 100%;
-      opacity: 0;
-    }
-    &.state-hidden-right {
-      left: 100%;
-      right: -100%;
-      opacity: 0;
-    }
-  }
-  .state.state-files {
-    .file-uploader {
-      margin: 0;
-      .well {
-        padding: 10px;
-      }
-      .error-message-area {
-        font-size: $font-size-base;
-      }
-    }
-    &.state-files-uploading {
-      top: 40%;
-      width: 50%;
-      margin: 0 auto;
-      font-size: 2em;
-    }
-    .card-body {
-      padding: 8px;
-    }
-    .card-heading {
-      padding: 8px  ;
-    }
-  }
-  .state.state-alignment {
-    table th {
-      width: 50%;
-    }
-    table td {
-      border-top-style: none;
-    }
-    table td .panel {
-      margin-top: 1em;
-    }
-    .task-ilo-alignment-rater {
-      height: 55px;
-    }
-  }
-}
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.service.ts b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.service.ts
new file mode 100644
index 0000000000..051fab0bbf
--- /dev/null
+++ b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.service.ts
@@ -0,0 +1,70 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Task} from 'src/app/api/models/task';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {
+  UploadSubmissionModalCloseResult,
+  UploadSubmissionModalComponent,
+  UploadSubmissionModalData,
+  UploadSubmissionModalDismissResult,
+  UploadSubmissionModalResult,
+} from './upload-submission-modal.component';
+
+export interface UploadSubmissionModalHandle<T = unknown> {
+  result: Promise<T>;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UploadSubmissionModalService {
+  constructor(
+    private dialog: MatDialog,
+    private alertService: AlertService,
+  ) {}
+
+  public show(
+    task: Task,
+    reuploadEvidence: boolean,
+    isTestSubmission: boolean = false,
+  ): UploadSubmissionModalHandle<Task> | null {
+    if (!isTestSubmission && task.isGroupTask() && !task.group) {
+      this.alertService.error(
+        `This is a group task. Join a ${task.definition.groupSet.name} group to submit this task.`,
+        8000,
+      );
+      return null;
+    }
+
+    const dialogRef = this.dialog.open<
+      UploadSubmissionModalComponent,
+      UploadSubmissionModalData,
+      UploadSubmissionModalResult
+    >(UploadSubmissionModalComponent, {
+      autoFocus: false,
+      disableClose: true,
+      position: {top: '2.5%'},
+      width: '100%',
+      maxWidth: '960px',
+      maxHeight: '95vh',
+      data: {
+        task,
+        reuploadEvidence,
+        isTestSubmission,
+      },
+    });
+
+    return {
+      result: new Promise<Task>((resolve, reject) => {
+        dialogRef.afterClosed().subscribe((result) => {
+          if ((result as UploadSubmissionModalDismissResult | undefined)?.dismissed) {
+            reject(result);
+            return;
+          }
+
+          resolve((result as UploadSubmissionModalCloseResult | undefined)?.value ?? task);
+        });
+      }),
+    };
+  }
+}
diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.tpl.html b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.tpl.html
deleted file mode 100644
index 9caab7897e..0000000000
--- a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.tpl.html
+++ /dev/null
@@ -1,205 +0,0 @@
-<div class="upload-submission-modal">
-  <div class="modal-header">
-    <h3>Submit
-      <strong>{{task.definition.abbreviation}}</strong> as
-      <select
-        class="form-control input-lg submission-type"
-        ng-if="!uploader.isUploading"
-        ng-change="onSelectNewSubmissionType(submissionType)"
-        ng-model="submissionType"
-        ng-options="id as label for (id, label) in submissionTypes">
-      </select>
-      <span ng-show="uploader.isUploading">
-        {{submissionTypes[submissionType]}}
-      </span>
-    </h3>
-  </div><!--/modal-header-->
-  <div class="modal-body">
-    <div
-      class="state state-group"
-      ng-class="{'state-hidden-left': isHidden('group').left,
-                 'state-hidden-right': isHidden('group').right}">
-      <div class="card card-default">
-        <div class="card-heading">
-          <h4>
-            Team Contribution
-          </h4>
-          <p>
-            Please rate each team member's effort on working on {{task.definition.name}}
-            by clicking on a <i class="fa fa-child"></i> icon that represents their
-            assigned effort.
-          </p>
-          <p class="text-muted">
-            To mark a team member as contributing <strong> no effort </strong> click
-            on a <i class="fa fa-child"></i> icon twice.
-          </p>
-        </div>
-        <!--/card-heading-->
-        <group-member-contribution-assigner
-          task="task"
-          class="card-body"
-          project="task.project"
-          team="team">
-        </group-member-contribution-assigner><!--/group-member-contribution-->
-      </div><!--/card-group-->
-    </div><!--/state-group-->
-    <div class="state state-files" ng-class="{'state-hidden-left': isHidden('files').left,
-                 'state-hidden-right': isHidden('files').right,
-                 'state-files-uploading': uploader.isUploading}">
-      <div ng-class="{'card card-default': !uploader.isUploading}">
-        <div class="card-heading" ng-hide="uploader.isUploading">
-          <h4>
-            Select {{submissionType == 'need_help' ? 'files' : 'evidence'}} to upload
-          </h4>
-          <span ng-hide="submissionType == 'need_help'">
-            Select files from your device that show evidence of your work until no more required files are pending.
-          </span>
-          <span ng-show="submissionType == 'need_help'">
-            Select files from your device that you need help with. You will need to upload all required files for this submission to
-            get help on this task but it does not matter if they are not finished.
-          </span>
-        </div>
-        <div class="card-body">
-          <file-uploader
-            files="uploader.files"
-            url="uploader.url"
-            payload="uploader.payload"
-            single-drop-zone="true"
-            show-upload-button="false"
-            reset-after-upload="false"
-            is-ready="uploader.isReady"
-            is-uploading="uploader.isUploading"
-            initiate-upload="uploader.start"
-            on-click-failure-cancel="uploader.onFailureCancel"
-            on-before-upload="uploader.onBeforeUpload"
-            on-success="uploader.onSuccess"
-            on-complete="uploader.onComplete"></file-uploader>
-        </div>
-      </div>
-    </div>
-    <!--/state-files-->
-    <div
-      class="state state-alignment"
-      ng-class="{'state-hidden-left': isHidden('alignment').left,
-                 'state-hidden-right': isHidden('alignment').right}">
-      <div class="card card-default">
-        <div class="card-heading">
-          <h4>
-            Learning Outcome Alignment <b class="text-red-500">*</b>
-          </h4>
-          <p>
-            Please rate the relevancy of this task to the specific learning outcome.
-            You must relate this task to at least one outcome and provide a rationale to proceed.
-          </p>
-          <p class="text-muted">
-            If you think the task is not related to a specific outcome, click the highest filled circle to remove its relevancy.
-          </p>
-        </div>
-        <!--/card-heading-->
-        <div class="list-group">
-          <div class="list-group-item clearfix" ng-repeat="ilo in ilos | orderBy: 'iloNumber'">
-            <div class="col-sm-12 col-md-7 pointer" ng-click="ilo.collapsed = !ilo.collapsed">
-              <h4>
-                <strong>{{ilo.abbreviation}}</strong>
-                <small>{{ilo.name}}</small>
-              </h4>
-              <div>Staff believe that {{ilo.staffAlignment.label | lcfirst}}. Click to expand.</div>
-              <div class="panel panel-default" collapse="!ilo.collapsed">
-                <div class="panel-body">
-                  <p>
-                    <h5>Outcome Description</h5>
-                    <div class="markdown-to-html" ng-bind-html="ilo.description | marked | to_trusted"></div>
-                  </p>
-                  <p ng-show="ilo.staffAlignment.rating > 0">
-                    <h5>Rationale</h5>
-                    <div class="markdown-to-html" ng-bind-html="ilo.staffAlignment.rationale | marked | to_trusted"></div>
-                  </p>
-                </div>
-              </div>
-            </div><!--/ilo-description-->
-            <div class="col-sm-12 col-md-5">
-              <task-ilo-alignment-rater
-                readonly="false"
-                unit="task.unit"
-                show-zero-rating="true"
-                ng-model="alignments[ilo.id]">
-              </task-ilo-alignment-rater>
-            </div><!--/alignment-rater-->
-          </div>
-        </div><!--/alignment-list-group-->
-        <div class="card-footer">
-          <p>
-            Justify your relevancy alignments with a comment to explain your choices. <b class="text-red-500">*</b>
-          </p>
-          <textarea ng-model="alignmentsRationale" class="form-control input-lg" rows="3" placeholder="My rationale is...">
-          </textarea>
-        </div><!--/comments-for-alignment-->
-      </div><!--/card-alignment-->
-    </div><!--/state-alignment-->
-    <div
-      class="state state-comments"
-      ng-class="{'state-hidden-left': isHidden('comments').left,
-                 'state-hidden-right': isHidden('comments').right}">
-      <div class="card card-default">
-        <div class="card-heading">
-          <h4 ng-show="submissionType == 'need_help'">
-            What do you need help with?
-          </h4>
-          <h4 ng-hide="submissionType == 'need_help'">
-            Final comments
-          </h4>
-          <span ng-show="submissionType == 'need_help'">
-            Supply a comment on what you would like help on for this task so your tutor can assist you.
-          </span>
-          <span ng-hide="submissionType == 'need_help'">
-            Supply an <strong>optional</strong> comment about this submission for your tutor to read as they assess.
-          </span>
-        </div><!--/card-heading-->
-        <div class="card-body">
-          <textarea ng-model="comment" class="form-control input-lg" rows="3" placeholder="{{submissionType == 'need_help' ? 'I need help with...' : 'Make a comment...'}}">
-          </textarea>
-        </div>
-      </div><!--/card-comments-->
-      <div class="card card-default" ng-show="privacyPolicy.privacy">
-        <div class="card-heading">
-          <h4>
-            Declaration
-          </h4>
-        </div><!--/card-heading-->
-        <div class="card-body">
-          <span>
-            {{privacyPolicy.privacy}}
-          </span>
-          <a href="#" ng-click="showPlagiarism = !showPlagiarism">Plagiarism and collusion</a>
-          <div ng-show="showPlagiarism">
-            <h4>Plagiarism and Collusion</h4>
-            <span>
-              {{privacyPolicy.plagiarism}}
-            </span>
-          </div>
-        </div>
-      </div><!--/declaration-->
-    </div><!--/state-comments-->
-  </div>
-</div><!--/modal-body-->
-<div class="modal-footer" ng-hide="uploader.isUploading">
-  <button class="btn btn-danger pull-left" ng-click="$dismiss()" ng-disabled="shouldDisableBtn.cancel()" ng-show="shouldShowBtn.cancel()">
-    <i class="fa fa-times"></i> Cancel Submission
-  </button>
-  <!--/cancel-button-->
-  <button class="btn btn-default" ng-click="goToState.previous()" ng-disabled="shouldDisableBtn.back()" ng-show="shouldShowBtn.back()">
-    <i class="fa fa-arrow-left"></i> Back
-  </button>
-  <!--/back-button-->
-  <button class="btn btn-default" ng-click="goToState.next()" ng-disabled="shouldDisableBtn.next()" ng-show="shouldShowBtn.next()">
-    Next
-    <i class="fa fa-arrow-right"></i>
-  </button>
-  <!--/next-button-->
-  <button class="btn btn-success" ng-click="uploadButtonClicked()" ng-disabled="shouldDisableBtn.submit()" ng-show="shouldShowBtn.submit()">
-    <i class="fa fa-upload"></i> Upload Submission
-  </button>
-  <!--/upload-button-->
-</div>
-<!--/modal-footer-->
-</div>
diff --git a/src/app/tasks/project-tasks-list/project-tasks-list.coffee b/src/app/tasks/project-tasks-list/project-tasks-list.coffee
deleted file mode 100644
index 5e1dc4fd56..0000000000
--- a/src/app/tasks/project-tasks-list/project-tasks-list.coffee
+++ /dev/null
@@ -1,59 +0,0 @@
-angular.module('doubtfire.tasks.project-tasks-list', [])
-
-#
-# Displays the tasks associated with a student's project which
-# when a task is clicked will automatically jump to the task viewer
-# of the task that was clicked
-#
-.directive('projectTasksList', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'tasks/project-tasks-list/project-tasks-list.tpl.html'
-  scope:
-    unit: "="
-    project: "="
-    onSelect: "="
-    inMenu: '@'
-
-  controller: ($scope, $modal, newTaskService, analyticsService, gradeService) ->
-    analyticsService.event 'Student Project View', "Showed Task Button List"
-
-    $scope.groupTasks = []
-
-    $scope.groupTasks.push.apply $scope.groupTasks, $scope.unit.groupSets.map (gs) ->
-      {
-        groupSet: gs,
-        name: gs.name
-      }
-
-    $scope.groupTasks.push {groupSet: null, name: 'Individual Work'}
-
-    # functions from task service
-    $scope.statusClass = newTaskService.statusClass
-    $scope.statusText = newTaskService.statusText
-
-    $scope.taskDisabled = (task) ->
-      task.definition.targetGrade > $scope.project.targetGrade
-
-    $scope.groupSetName = (id) ->
-      $scope.unit.groupSetsCache.get(id)?.name || "Individual Work"
-
-    $scope.hideGroupSetName = $scope.unit.groupSets.length is 0
-
-    $scope.taskText = (task) ->
-      result = task.definition.abbreviation
-
-      if task.definition.isGraded
-        if task.grade?
-          result += " (" + gradeService.gradeAcronyms[task.grade] + ")"
-        else
-          result += " (?)"
-
-      if task.definition.maxQualityPts > 0
-        if task.qualityPts?
-          result += " (" + task.qualityPts + "/" + task.definition.maxQualityPts + ")"
-        else
-          result += " (?/" + task.definition.maxQualityPts + ")"
-
-      result
-)
diff --git a/src/app/tasks/project-tasks-list/project-tasks-list.component.html b/src/app/tasks/project-tasks-list/project-tasks-list.component.html
new file mode 100644
index 0000000000..ed091e545e
--- /dev/null
+++ b/src/app/tasks/project-tasks-list/project-tasks-list.component.html
@@ -0,0 +1,37 @@
+<ul class="project-tasks-list">
+  @for (grouping of groupTasks; track grouping) {
+    <div class="clearfix">
+      @if (!hideGroupSetName) {
+        <h5 class="group-set-name">{{ grouping.name }}</h5>
+      }
+      <div class="grid grid-cols-3 gap-1 outline-1 sm:grid-cols-4">
+        @for (
+          task of project.tasks
+            | tasksForGroupset: grouping.groupSet
+            | orderBy: ['definition.targetGrade', 'definition.seq'];
+          track task;
+          let i = $index
+        ) {
+          <mat-chip
+            #tooltip="matTooltip"
+            class="task-status chip truncate text-center"
+            matTooltip="{{ task.definition.name }}: {{ task.statusLabel() }}"
+            [class.mat-chip-clicked]="selectedTask === task"
+            [ngClass]="newTaskService.statusClass(task.status)"
+            [style.--mat-chip-elevated-container-color]="
+              newTaskService.statusColors.get(task.status)
+            "
+            (click)="selectChip(task)"
+          >
+            @if (task.similarityFlag) {
+              <mat-icon svgIcon="visibility"></mat-icon>
+            }
+            <span class="{{ task.status === 'not_started' ? 'text-black' : '' }}">{{
+              taskText(task)
+            }}</span></mat-chip
+          >
+        }
+      </div>
+    </div>
+  }
+</ul>
diff --git a/src/app/tasks/project-tasks-list/project-tasks-list.component.scss b/src/app/tasks/project-tasks-list/project-tasks-list.component.scss
new file mode 100644
index 0000000000..36bd44ade0
--- /dev/null
+++ b/src/app/tasks/project-tasks-list/project-tasks-list.component.scss
@@ -0,0 +1,25 @@
+.project-tasks-list {
+  .chip {
+    border-radius: 4px;
+    ::ng-deep .mdc-evolution-chip__text-label {
+      color: inherit !important;
+    }
+  }
+
+  .group-set-name {
+    color: #777;
+    text-align: center;
+    font-size: 1em;
+    font-weight: bold;
+  }
+
+  .mat-chip-clicked {
+    outline: #007bff auto 1px !important;
+  }
+
+  .task-status {
+    ::ng-deep .mdc-evolution-chip__cell {
+      justify-content: center !important;
+    }
+  }
+}
diff --git a/src/app/tasks/project-tasks-list/project-tasks-list.component.ts b/src/app/tasks/project-tasks-list/project-tasks-list.component.ts
new file mode 100644
index 0000000000..e5bacbc2f6
--- /dev/null
+++ b/src/app/tasks/project-tasks-list/project-tasks-list.component.ts
@@ -0,0 +1,82 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import {
+  GradeService,
+  Project,
+  Task,
+  TaskService,
+  TaskStatusEnum,
+  Unit,
+} from 'src/app/api/models/doubtfire-model';
+
+@Component({
+  selector: 'f-project-tasks-list',
+  templateUrl: './project-tasks-list.component.html',
+  styleUrls: ['./project-tasks-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProjectTasksListComponent implements OnInit {
+  @Input() unit?: Unit;
+  @Input() project?: Project;
+  @Output() selectTask = new EventEmitter();
+  selectedTask: Task | null = null;
+
+  groupTasks = [];
+
+  constructor(
+    public newTaskService: TaskService,
+    public gradeService: GradeService,
+  ) {}
+
+  ngOnInit(): void {
+    this.groupTasks.push(
+      ...this.unit.groupSets.map((gs) => ({
+        groupSet: gs,
+        name: gs.name,
+      })),
+    );
+    this.groupTasks.push({groupSet: null, name: 'Individual Work'});
+  }
+
+  statusClass(status: TaskStatusEnum): string {
+    return this.newTaskService.statusClass(status);
+  }
+
+  statusText(status: TaskStatusEnum): string {
+    return this.newTaskService.statusText(status);
+  }
+
+  get hideGroupSetName(): boolean {
+    return this.unit.groupSets.length === 0;
+  }
+
+  taskText(task: Task): string {
+    let result = task.definition.abbreviation;
+    if (task.definition.isGraded) {
+      if (task.grade !== undefined && task.grade !== null) {
+        result += ` (${this.gradeService.gradeAbbreviation(task.grade, this.unit)})`;
+      } else {
+        result += ' (?)';
+      }
+    }
+    if (task.definition.maxQualityPts > 0) {
+      if (task.qualityPts >= 0) {
+        result += ` (${task.qualityPts}/${task.definition.maxQualityPts})`;
+      } else {
+        result += ` (?/${task.definition.maxQualityPts})`;
+      }
+    }
+    return result;
+  }
+
+  selectChip(task: Task): void {
+    this.selectedTask = task;
+  }
+}
diff --git a/src/app/tasks/project-tasks-list/project-tasks-list.scss b/src/app/tasks/project-tasks-list/project-tasks-list.scss
deleted file mode 100644
index 4f94364fad..0000000000
--- a/src/app/tasks/project-tasks-list/project-tasks-list.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.project-tasks-list {
-  @include remove-list-padding;
-  text-align: center;
-
-  .groupset-name {
-    color: #777;
-    text-align: center;
-    font-size: 1em;
-    font-weight: bold;
-  }
-
-  li {
-    display: inline;
-    padding: 2px;
-  }
-
-  .groupset-tasks:first-child .groupset-name {
-    margin-top: 0;
-  }
-
-  // As a dropdown menu
-  &.dropdown-menu {
-    padding: 15px;
-    width: 400px;
-  }
-}
diff --git a/src/app/tasks/project-tasks-list/project-tasks-list.tpl.html b/src/app/tasks/project-tasks-list/project-tasks-list.tpl.html
deleted file mode 100644
index ee9b845aed..0000000000
--- a/src/app/tasks/project-tasks-list/project-tasks-list.tpl.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<ul class="project-tasks-list">
-  <div ng-repeat="grouping in groupTasks" class="group-set-tasks clearfix">
-    <h5 class="group-set-name" ng-hide="hideGroupSetName">{{grouping.name}}</h5>
-    <li class="col-xs-4 col-lg-3" ng-repeat="task in project.tasks | tasksForGroupset: grouping.groupSet | orderBy: ['definition.targetGrade','definition.seq']">
-      <button type="button" class="col-xs-12 btn task-status {{statusClass(task.status)}}" ng-click="onSelect(task, 'Task Button List')" tooltip-popup-delay='200' tooltip-placement="bottom" tooltip-html-unsafe="<strong>{{task.definition.name}}:</strong><br>{{task.statusLabel()}}">
-        <i class="fa fa-eye" ng-show="task.similarityFlag"></i> {{taskText(task)}}
-      </button>
-    </li>
-  </div>
-</ul>
diff --git a/src/app/tasks/task-comment-composer/attachment-confirmation-dialog/attachment-confirmation-dialog.component.html b/src/app/tasks/task-comment-composer/attachment-confirmation-dialog/attachment-confirmation-dialog.component.html
new file mode 100644
index 0000000000..3496eea554
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/attachment-confirmation-dialog/attachment-confirmation-dialog.component.html
@@ -0,0 +1,62 @@
+<div (keydown.enter)="$event.preventDefault(); $event.stopPropagation()">
+  <h2 mat-dialog-title>Post Attachment?</h2>
+
+  <mat-dialog-content>
+    <p>This attachment is ready to post as a task comment.</p>
+
+    <div
+      class="mx-auto flex min-h-[180px] w-full max-w-[520px] items-center justify-center overflow-hidden rounded-xl bg-black/5"
+    >
+      @if (isImage) {
+        <img
+          class="aspect-square w-full max-w-[520px] object-contain object-center"
+          [alt]="file.name"
+          [src]="previewUrl"
+        />
+      } @else if (isPdf) {
+        <div class="flex items-center gap-2 p-3">
+          <mat-icon class="size-5 text-[2rem]">picture_as_pdf</mat-icon>
+          <div class="flex flex-col gap-px break-all">
+            <strong>{{ file.name }}</strong>
+            <span>PDF document</span>
+          </div>
+        </div>
+      } @else if (isAudio) {
+        <div class="w-full p-3">
+          <div class="flex items-center gap-2">
+            <mat-icon class="size-5 text-[2rem]">audio_file</mat-icon>
+            <div class="flex flex-col gap-px break-all">
+              <strong>{{ file.name }}</strong>
+              <span>{{ file.type || 'Audio file' }}</span>
+            </div>
+          </div>
+
+          <audio class="mt-2.5 w-full" controls [src]="previewUrl"></audio>
+        </div>
+      } @else {
+        <div class="flex items-center gap-2 p-3">
+          <mat-icon class="size-5 text-[2rem]">attach_file</mat-icon>
+          <div class="flex flex-col gap-px break-all">
+            <strong>{{ file.name }}</strong>
+            <span>{{ file.type || 'Attachment' }}</span>
+          </div>
+        </div>
+      }
+    </div>
+
+    <div class="mt-2 flex flex-col gap-1 text-base break-all opacity-80">
+      <span><strong>File:</strong> {{ file.name }}</span>
+      <span><strong>Type:</strong> {{ file.type || 'Unknown' }}</span>
+      @if (file.size) {
+        <span><strong>Size:</strong> {{ formatFileSize(file.size) }}</span>
+      }
+    </div>
+  </mat-dialog-content>
+
+  <mat-dialog-actions align="end">
+    <button mat-button type="button" (click)="dismiss(false)">Cancel</button>
+    <button color="primary" mat-raised-button type="button" (click)="dismiss(true)">
+      Post Attachment
+    </button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/tasks/task-comment-composer/attachment-confirmation-dialog/attachment-confirmation-dialog.component.ts b/src/app/tasks/task-comment-composer/attachment-confirmation-dialog/attachment-confirmation-dialog.component.ts
new file mode 100644
index 0000000000..644281e04e
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/attachment-confirmation-dialog/attachment-confirmation-dialog.component.ts
@@ -0,0 +1,61 @@
+import {ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+export interface AttachmentConfirmationDialogData {
+  file: File;
+}
+
+@Component({
+  selector: 'f-attachment-confirmation-dialog',
+  templateUrl: './attachment-confirmation-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class AttachmentConfirmationDialogComponent implements OnInit, OnDestroy {
+  public file: File;
+  public previewUrl: string | null = null;
+
+  constructor(
+    public dialogRef: MatDialogRef<AttachmentConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AttachmentConfirmationDialogData,
+  ) {}
+
+  ngOnInit() {
+    this.file = this.data.file;
+    this.previewUrl = URL.createObjectURL(this.file);
+  }
+
+  ngOnDestroy() {
+    if (this.previewUrl) {
+      URL.revokeObjectURL(this.previewUrl);
+    }
+  }
+
+  get isImage(): boolean {
+    return this.file?.type?.startsWith('image/') ?? false;
+  }
+
+  get isPdf(): boolean {
+    return this.file?.type === 'application/pdf' || this.file?.name?.toLowerCase().endsWith('.pdf');
+  }
+
+  get isAudio(): boolean {
+    return this.file?.type?.startsWith('audio/') ?? false;
+  }
+
+  dismiss(confirmed: boolean) {
+    this.dialogRef.close(confirmed);
+  }
+
+  formatFileSize(size: number): string {
+    if (size < 1024) {
+      return `${size} B`;
+    }
+
+    if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(1)} KB`;
+    }
+
+    return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+  }
+}
diff --git a/src/app/tasks/task-comment-composer/discussion-prompt-composer-dialog.html b/src/app/tasks/task-comment-composer/discussion-prompt-composer-dialog.html
index 19e37cbcbc..07649e2788 100644
--- a/src/app/tasks/task-comment-composer/discussion-prompt-composer-dialog.html
+++ b/src/app/tasks/task-comment-composer/discussion-prompt-composer-dialog.html
@@ -1,28 +1,47 @@
-<button id="dialogCloseButton" mat-icon-button mat-dialog-close aria-label="Close dialog button">
+<button
+  aria-label="Close dialog button"
+  class="float-right mb-5 !text-red-600"
+  id="dialogCloseButton"
+  mat-dialog-close
+  mat-icon-button
+>
   <mat-icon aria-label="Quit cross icon">close</mat-icon>
 </button>
 
-<mat-horizontal-stepper id="discussionPromptStepper" [linear]="true" #stepper>
+<mat-horizontal-stepper #stepper class="mt-5" id="discussionPromptStepper" [linear]="true">
   <mat-step>
     <ng-template matStepLabel>Introduction</ng-template>
-    <div class="introduction-text">
-      <img id="discussion-splash-image" src="/assets/images/discussion_splash_1.svg" alt="Discussion Splash Image">
-      <p>
-        Discussions are a great way for both you and your students to gauge student's understanding of concepts and is a
-        great learning opportunity for them.
-        <br> <br>
+    <div class="mt-16 inline-flex">
+      <img
+        alt="Discussion Splash Image"
+        class="m-auto max-h-[300px] max-w-[800px] float-left align-middle"
+        id="discussion-splash-image"
+        src="/assets/images/discussion_splash_1.svg"
+      />
+      <p
+        class="float-right ml-12 mt-0 text-justify font-sans text-[1.1em] leading-[1.1] antialiased [text-rendering:optimizeLegibility]"
+      >
+        Discussions are a great way for both you and your students to gauge student's understanding
+        of concepts and is a great learning opportunity for them.
+        <br />
+        <br />
 
-        Discussion comments allow you to present up to three discussion prompts to a students on a task. These
-        prompts are presented to the student, at which point their spoken reply will be recorded in real time. This
-        means you are receiving their unfiltered and immediate response, just like an informal chat in the classroom.
-        <br> <br>
+        Discussion comments allow you to present up to three discussion prompts to a students on a
+        task. These prompts are presented to the student, at which point their spoken reply will be
+        recorded in real time. This means you are receiving their unfiltered and immediate response,
+        just like an informal chat in the classroom.
+        <br />
+        <br />
 
-        These discussions are designed to be casual and informal and will require a working microphone and speakers.
+        These discussions are designed to be casual and informal and will require a working
+        microphone and speakers.
       </p>
     </div>
 
     <div>
-      <button mat-button mat-raised-button matStepperNext color="primary" style="float: right;">Next</button>
+      <button class="float-right" color="primary" mat-button mat-raised-button matStepperNext>
+        Next
+      </button>
     </div>
   </mat-step>
 
@@ -31,7 +50,9 @@
     <discussion-prompt-composer [task]="data.task"></discussion-prompt-composer>
 
     <div>
-      <button mat-button mat-raised-button matStepperNext color="primary" matStepperPrevious>Back</button>
+      <button color="primary" mat-button mat-raised-button matStepperNext matStepperPrevious>
+        Back
+      </button>
     </div>
   </mat-step>
 </mat-horizontal-stepper>
diff --git a/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.html b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.html
index cae98595e2..6f0dc1f062 100644
--- a/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.html
+++ b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.html
@@ -1,47 +1,117 @@
-<h4>Step 1. Record and add up to 3 prompts.</h4>
-<div [hidden]="!canRecord || isSending" fxLayout="row" fxLayoutAlign="space-around center">
-  <div>
-    <button mat-icon-button aria-label="Record icon button" [disabled]="!canAddRecording" id='btnRecordPrompt' (click)="recordingToggle()">
-      <mat-icon [hidden]="!isRecording">stop_rounded</mat-icon>
-      <mat-icon [hidden]="isRecording">fiber_manual_record</mat-icon>
-    </button>
-  </div>
-
-  <div class="audio-recorder">
-    <p [hidden]="canRecord">Audio recording <br> only supported in modern versions of Chrome, Firefox and Safari.</p>
-    <mat-spinner class="send-audio-spinner" [diameter]="72" [strokeWidth]="2" [hidden]="!isSending"></mat-spinner>
-    <div fxLayout="row" fxLayoutAlign="center center">
-      <canvas #discussionPromptComposerCanvas class="discussion-prompt-audio-visualiser"></canvas>
+<div class="space-y-5 rounded-lg border border-gray-200 bg-white p-4">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h3 class="m-0 text-lg font-semibold text-gray-900">Create discussion prompts</h3>
+      <p class="m-0 mt-1 text-sm text-gray-600">
+        Record up to three short prompts. Students will hear them one at a time and respond out
+        loud.
+      </p>
     </div>
-    <audio #discussionPromptComposerAudio></audio>
+    <span
+      class="shrink-0 self-start rounded-full bg-gray-100 px-3 py-1 text-xs font-medium whitespace-nowrap text-gray-700"
+    >
+      {{ recordings.length }} / 3 prompts
+    </span>
   </div>
 
-  <div>
-    <button mat-icon-button type="button" id='btnSave' (click)="saveRecording()"
-      [disabled]="!recordingAvailable || !canAddRecording" class="btn-circle">
-      <i class="fa fa-plus"></i>
+  @if (!canRecord) {
+    <p class="rounded-md bg-amber-50 p-3 text-sm text-amber-800">
+      Audio recording is only supported in modern versions of Chrome, Firefox and Safari.
+    </p>
+  }
+
+  <mat-spinner
+    class="mx-auto my-4"
+    [diameter]="72"
+    [hidden]="!isSending"
+    [strokeWidth]="2"
+  ></mat-spinner>
+
+  @if (canRecord && !isSending) {
+    @if (recordings.length < 3) {
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <button
+          aria-label="Record discussion prompt"
+          class="shrink-0 text-white shadow-sm transition"
+          id="btnRecordPrompt"
+          mat-icon-button
+          type="button"
+          [class.!bg-blue-600]="!isRecording"
+          [class.!bg-red-600]="isRecording"
+          [disabled]="!canAddRecording"
+          (click)="recordingToggle()"
+        >
+          <mat-icon>{{ isRecording ? 'stop' : 'mic' }}</mat-icon>
+        </button>
+
+        <div
+          class="relative min-w-[180px] grow overflow-hidden rounded-lg border border-blue-100 bg-blue-50"
+        >
+          <canvas #discussionPromptComposerCanvas class="h-[72px] w-full"></canvas>
+          <div
+            class="pointer-events-none absolute inset-0 bg-gradient-to-r from-white/50 via-transparent to-white/50"
+          ></div>
+        </div>
+
+        <button
+          color="primary"
+          id="btnSave"
+          mat-stroked-button
+          type="button"
+          [disabled]="!recordingAvailable || !canAddRecording"
+          (click)="saveRecording()"
+        >
+          Add prompt
+        </button>
+      </div>
+    } @else {
+      <div class="rounded-md bg-blue-50 p-3 text-sm text-blue-900">
+        You have recorded the maximum of three prompts.
+      </div>
+    }
+  }
+
+  <audio #discussionPromptComposerAudio></audio>
+
+  <mat-action-list class="mb-3 h-full" id="recordingList">
+    <h3 mat-subheader>Discussion Prompts</h3>
+    @if (recordings.length === 0) {
+      <div class="px-4 pb-3 text-sm text-gray-500">No prompts recorded yet.</div>
+    }
+
+    @for (recording of recordings; track recording; let i = $index) {
+      <mat-list-item class="cursor-pointer" (click)="playRecording(recording, i)">
+        <mat-icon class="text-black" matListItemIcon>
+          {{ isRecordingPlaying(i) ? 'stop_circle' : 'play_arrow_rounded' }}
+        </mat-icon>
+        <span matListItemTitle>Prompt {{ i + 1 }}</span>
+        <span matListItemLine
+          >Click to {{ isRecordingPlaying(i) ? 'stop' : 'play' }} recording</span
+        >
+        <button
+          aria-label="Delete discussion prompt"
+          class="mt-3 flex items-center justify-center"
+          mat-icon-button
+          matListItemMeta
+          type="button"
+          (click)="deleteRecording(i); $event.stopPropagation()"
+        >
+          <mat-icon>delete</mat-icon>
+        </button>
+      </mat-list-item>
+    }
+  </mat-action-list>
+
+  <div class="flex justify-end">
+    <button
+      color="primary"
+      mat-dialog-close
+      mat-raised-button
+      type="button"
+      [disabled]="recordings.length === 0"
+      (click)="sendRecording()"
+    >
+      Send discussion prompts
     </button>
   </div>
 </div>
-
-<h4>Step 2. Optionally play back prompts.</h4>
-<mat-action-list id="recordingList">
-  <h3 mat-subheader>Discussion Prompts</h3>
-  @for (recording of recordings; track recording; let i = $index) {
-  <button mat-list-item (click)="playRecording(getUrl(recording))">
-    <mat-icon mat-list-icon>play_arrow_rounded</mat-icon>
-    <h4 mat-line>Prompt {{i + 1}}</h4>
-    <p mat-line> Click to play recording </p>
-  </button>
-}
-</mat-action-list>
-
-<h4>Step 3. Send.</h4>
-<div fxLayout="row" fxLayoutAlign="end center">
-  <button mat-raised-button color="primary" type="button" mat-dialog-close
-    (click)="sendRecording()" [hidden]="recordings.length === 0">
-    Send
-  </button>
-</div>
-
-<mat-divider style="margin: 3em 0 3em 0;"></mat-divider>
diff --git a/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.scss b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.scss
index 80ff2d1450..e69de29bb2 100644
--- a/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.scss
+++ b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.scss
@@ -1,101 +0,0 @@
-#discussion-recordings-list {
-  flex-grow: 1;
-  max-height: 130px;
-  margin-top: -10px;
-}
-
-#dialogCloseButton {
-  float: right;
-  margin-bottom: 20px;
-  color: red;
-}
-
-mat-action-list {
-  height: 100%;
-}
-
-#btnRecordPrompt {
-  background-color: #f03d25;
-  color: white;
-}
-
-.discussion-prompt-audio-visualiser {
-  // max-width: 100px;
-}
-
-.btn-circle-small {
-  user-select: none;
-  background-color: #f03d25;
-  border-radius: 72px;
-  color: #fff;
-  height: 40px;
-  transition: width 0.1s, height 0.1s;
-  width: 40px;
-  border: none;
-  outline: none;
-}
-
-.btn-circle-small:disabled {
-  background-color: #c42a15;
-}
-
-.btn-circle-small i {
-  font-size: 14px;
-}
-
-#recordingList {
-  margin-bottom: 2em;
-}
-
-#audio-recorder-visualiser.discussion-audio-visualiser {
-  height: 60px;
-  width: 115px;
-  bottom: 10px;
-  left: 65px;
-}
-
-:host .mat-mdc-list-item-icon {
-  color: black;
-}
-
-:host .mat-mdc-dialog-container {
-  max-width: 800px !important;
-}
-
-:host #intelligentDiscussionStepper {
-  margin-top: 20px;
-}
-
-:host img#discussion-splash-image {
-  float: left;
-  margin: auto;
-  max-width: 800px;
-  max-height: 300px;
-  vertical-align: middle;
-}
-
-:host .introduction-text {
-  margin-top: 4em;
-  display: inline-flex;
-}
-
-:host .introduction-text p {
-  font-family: "Helvetica Neue", "Segoe UI", "Helvetica", "Arial", "sans-serif";
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1.1;
-  font-size: 1.1em;
-  text-align: justify;
-  margin-left: 3em;
-  margin-top: 0;
-  float: right;
-}
-
-:host #discussionRecorderContainer {
-  line-height: 1.2em;
-  font-family: "Helvetica Neue", "Segoe UI", "Helvetica", "Arial", "sans-serif";
-
-  p {
-    font-size: 1.2em;
-  }
-}
diff --git a/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.spec.ts b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.spec.ts
new file mode 100644
index 0000000000..b65604ea97
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.spec.ts
@@ -0,0 +1,122 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {of} from 'rxjs';
+import {Task, TaskComment, TaskCommentService} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {MediaRecorderService} from 'src/app/common/services/recorder-service';
+import {DiscussionPromptComposerComponent} from './discussion-prompt-composer.component';
+
+class TestableDiscussionPromptComposerComponent extends DiscussionPromptComposerComponent {
+  set testAudio(audio: HTMLAudioElement) {
+    this.audio = audio;
+  }
+
+  get testAudio(): HTMLAudioElement {
+    return this.audio;
+  }
+
+  set testBlob(blob: Blob) {
+    this.blob = blob;
+  }
+
+  get testBlob(): Blob {
+    return this.blob;
+  }
+}
+
+describe('DiscussionPromptComposerComponent', () => {
+  let component: TestableDiscussionPromptComposerComponent;
+  let taskCommentService: {addComment: ReturnType<typeof vi.fn>};
+  let createObjectURL: ReturnType<typeof vi.fn>;
+  let revokeObjectURL: ReturnType<typeof vi.fn>;
+  let originalCreateObjectURL: typeof URL.createObjectURL;
+  let originalRevokeObjectURL: typeof URL.revokeObjectURL;
+
+  beforeEach(() => {
+    originalCreateObjectURL = URL.createObjectURL;
+    originalRevokeObjectURL = URL.revokeObjectURL;
+    createObjectURL = vi.fn((blob: Blob) => `blob:${blob.size}:${blob.type}`);
+    revokeObjectURL = vi.fn();
+    Object.defineProperty(URL, 'createObjectURL', {configurable: true, value: createObjectURL});
+    Object.defineProperty(URL, 'revokeObjectURL', {configurable: true, value: revokeObjectURL});
+
+    taskCommentService = {
+      addComment: vi.fn(() => of({} as TaskComment)),
+    };
+    component = new TestableDiscussionPromptComposerComponent(
+      {} as MediaRecorderService,
+      taskCommentService as unknown as TaskCommentService,
+      {error: vi.fn()} as unknown as AlertService,
+    );
+    component.task = {id: 1} as Task;
+    component.testAudio = {
+      src: '',
+      pause: vi.fn(),
+      removeAttribute: vi.fn(function (this: {src: string}, attribute: string) {
+        if (attribute === 'src') {
+          this.src = '';
+        }
+      }),
+      load: vi.fn(),
+      play: vi.fn(),
+    } as unknown as HTMLAudioElement;
+  });
+
+  afterEach(() => {
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: originalCreateObjectURL,
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: originalRevokeObjectURL,
+    });
+  });
+
+  it('saves a recording as a reusable object URL and clears the active blob', () => {
+    const recording = new Blob(['prompt one'], {type: 'audio/webm'});
+    component.testBlob = recording;
+    component.recordingAvailable = true;
+
+    component.saveRecording();
+
+    expect(component.recordings).toEqual([{blob: recording, url: 'blob:10:audio/webm'}]);
+    expect(createObjectURL).toHaveBeenCalledWith(recording);
+    expect(component.testBlob.size).toBe(0);
+    expect(component.recordingAvailable).toBe(false);
+  });
+
+  it('deletes a saved prompt and revokes its object URL', () => {
+    const recording = {blob: new Blob(['prompt one']), url: 'blob:prompt-one'};
+    component.recordings = [recording];
+    component.testAudio.src = recording.url;
+    component.playingRecordingIndex = 0;
+
+    component.deleteRecording(0);
+
+    expect(component.recordings).toEqual([]);
+    expect(component.testAudio.pause).toHaveBeenCalled();
+    expect(component.testAudio.removeAttribute).toHaveBeenCalledWith('src');
+    expect(component.testAudio.load).toHaveBeenCalled();
+    expect(component.playingRecordingIndex).toBeNull();
+    expect(revokeObjectURL).toHaveBeenCalledWith(recording.url);
+  });
+
+  it('uploads only the remaining saved prompt blobs', () => {
+    const first = {blob: new Blob(['prompt one']), url: 'blob:prompt-one'};
+    const second = {blob: new Blob(['prompt two']), url: 'blob:prompt-two'};
+    component.recordings = [first, second];
+    component.deleteRecording(0);
+
+    component.sendRecording();
+
+    expect(taskCommentService.addComment).toHaveBeenCalledWith(
+      component.task,
+      undefined,
+      'discussion',
+      undefined,
+      [second.blob],
+    );
+    expect(component.isSending).toBe(false);
+    expect(component.recordingAvailable).toBe(false);
+  });
+});
diff --git a/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.ts b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.ts
index a589b8dc6d..171938e4dc 100644
--- a/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.ts
+++ b/src/app/tasks/task-comment-composer/discussion-prompt-composer/discussion-prompt-composer.component.ts
@@ -1,23 +1,39 @@
-import {Component, Inject, Input, ViewChild, ElementRef} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Inject,
+  Input,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import {Task, TaskComment, TaskCommentService} from 'src/app/api/models/doubtfire-model';
 import {BaseAudioRecorderComponent} from 'src/app/common/audio-recorder/audio/base-audio-recorder';
-import {audioRecorderService} from 'src/app/ajs-upgraded-providers';
-import {TaskComment, TaskCommentService, Task} from 'src/app/api/models/doubtfire-model';
 import {AlertService} from 'src/app/common/services/alert.service';
+import {MediaRecorderService} from 'src/app/common/services/recorder-service';
 
 @Component({
   selector: 'discussion-prompt-composer',
   templateUrl: './discussion-prompt-composer.component.html',
   styleUrls: ['./discussion-prompt-composer.component.scss'],
+  providers: [MediaRecorderService],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class DiscussionPromptComposerComponent extends BaseAudioRecorderComponent {
+export class DiscussionPromptComposerComponent
+  extends BaseAudioRecorderComponent
+  implements AfterViewInit, OnDestroy
+{
   @Input() task: Task;
 
-  @ViewChild('discussionPromptComposerCanvas', {static: true}) canvasRef: ElementRef;
-  @ViewChild('discussionPromptComposerAudio', {static: true}) audioRef: ElementRef;
-  recordings: Blob[] = new Array<Blob>();
+  @ViewChild('discussionPromptComposerCanvas') canvasRef: ElementRef;
+  @ViewChild('discussionPromptComposerAudio') audioRef: ElementRef;
+  recordings: {blob: Blob; url: string}[] = [];
   canvas: HTMLCanvasElement;
   canvasCtx: CanvasRenderingContext2D;
   isSending: boolean = false;
+  playingRecordingIndex: number = null;
 
   get canAddRecording(): boolean {
     return this.recordings.length < 3;
@@ -28,7 +44,7 @@ export class DiscussionPromptComposerComponent extends BaseAudioRecorderComponen
   }
 
   constructor(
-    @Inject(audioRecorderService) mediaRecorderService: any,
+    private mediaRecorderService: MediaRecorderService,
     @Inject(TaskCommentService) private taskCommentService: TaskCommentService,
     private alerts: AlertService,
   ) {
@@ -43,27 +59,65 @@ export class DiscussionPromptComposerComponent extends BaseAudioRecorderComponen
     }
   }
 
+  ngOnDestroy(): void {
+    this.recordings.forEach((recording) => URL.revokeObjectURL(recording.url));
+  }
+
   init(): void {
     super.init();
     this.audio = this.audioRef.nativeElement;
+    this.audio.onended = () => {
+      this.playingRecordingIndex = null;
+    };
     this.canvas = this.canvasRef.nativeElement;
     this.canvasCtx = this.canvas.getContext('2d');
   }
 
-  getUrl(b: Blob) {
-    return URL.createObjectURL(b);
+  isRecordingPlaying(index: number): boolean {
+    return this.playingRecordingIndex === index;
   }
 
-  playRecording(url: string) {
-    this.audio.src = url;
+  playRecording(recording: {blob: Blob; url: string}, index: number) {
+    if (this.isRecordingPlaying(index)) {
+      this.audio.pause();
+      this.audio.currentTime = 0;
+      this.playingRecordingIndex = null;
+      return;
+    }
+
+    this.playingRecordingIndex = index;
+    this.audio.src = recording.url;
     this.audio.load();
     this.audio.play();
   }
 
+  deleteRecording(index: number): void {
+    const [recording] = this.recordings.splice(index, 1);
+    if (!recording) {
+      return;
+    }
+
+    if (this.audio.src === recording.url) {
+      this.audio.pause();
+      this.audio.removeAttribute('src');
+      this.audio.load();
+      this.playingRecordingIndex = null;
+    }
+
+    URL.revokeObjectURL(recording.url);
+  }
+
   saveRecording(): void {
     if (this.blob && this.blob.size > 0) {
       if (this.canAddRecording) {
-        this.recordings.push(this.blob);
+        this.audio.pause();
+        this.audio.removeAttribute('src');
+        this.audio.load();
+        this.playingRecordingIndex = null;
+        this.recordings.push({
+          blob: this.blob,
+          url: URL.createObjectURL(this.blob),
+        });
       }
       this.blob = new Blob();
       this.recordingAvailable = false;
@@ -71,18 +125,22 @@ export class DiscussionPromptComposerComponent extends BaseAudioRecorderComponen
   }
 
   sendRecording(): void {
+    this.isSending = true;
     this.taskCommentService
-      .addComment(this.task, undefined, 'discussion', undefined, this.recordings)
+      .addComment(
+        this.task,
+        undefined,
+        'discussion',
+        undefined,
+        this.recordings.map((recording) => recording.blob),
+      )
       .subscribe(
-        (tc: TaskComment) => {
+        (_tc: TaskComment) => {
           this.isSending = false;
         },
-        (failure: any) => {
-          this.alerts.error(
-            `Failed to create discussion comment. ${
-              failure.data != null ? failure.data.error : failure
-            }`,
-          );
+        (failure: {data?: {error?: string}} | string) => {
+          const message = typeof failure === 'string' ? failure : failure.data?.error || failure;
+          this.alerts.error(`Failed to create discussion comment. ${String(message)}`);
           this.isSending = false;
         },
       );
@@ -105,6 +163,7 @@ export class DiscussionPromptComposerComponent extends BaseAudioRecorderComponen
         const bar_x = i * 8;
         const bar_y = HEIGHT / 2;
         const bar_height = -(dataArray[i] / 4) + 1;
+        this.canvasCtx.fillStyle = '#2563eb';
         this.canvasCtx.fillRect(bar_x, bar_y, bar_width, bar_height);
         this.canvasCtx.fillRect(bar_x, bar_y - bar_height, bar_width, bar_height);
         i++;
diff --git a/src/app/tasks/task-comment-composer/task-comment-composer.component.html b/src/app/tasks/task-comment-composer/task-comment-composer.component.html
index 448f88f46c..c531606a94 100644
--- a/src/app/tasks/task-comment-composer/task-comment-composer.component.html
+++ b/src/app/tasks/task-comment-composer/task-comment-composer.component.html
@@ -1,44 +1,59 @@
 <emoji-mart
-  [darkMode]="false"
-  [isNative]="true"
-  [hideRecent]="false"
-  [hidden]="!this.showEmojiPicker"
   class="emoji-picker"
-  title="Pick your emoji…"
   emoji="thumbsup"
+  title="Pick your emoji…"
+  [darkMode]="false"
+  [hidden]="!this.showEmojiPicker"
+  [hideRecent]="false"
+  [isNative]="true"
   (emojiSelect)="addEmoji($event)"
 ></emoji-mart>
 
 @if (task) {
   <div id="replyContainer" [hidden]="originalComment === null">
-    <div>
-      <div class="replying-wrap">
-        Replying to:
-        <b>{{ originalComment !== null ? originalComment.author.name : '' }}</b>
-        <button
-          id="cancelReplyButton"
-          (click)="cancelReply()"
-          mat-icon-button
-          aria-label="Close reply"
-        >
-          <mat-icon inline="true" aria-label="Quit cross icon">close</mat-icon>
-        </button>
-      </div>
-      <p>{{ originalComment !== null ? originalComment.text : '' }}</p>
+    <div class="replying-wrap" style="width: 100%">
+      <button
+        aria-label="Close reply"
+        id="cancelReplyButton"
+        mat-icon-button
+        (click)="cancelReply()"
+      >
+        <mat-icon aria-label="Quit cross icon">close</mat-icon>
+      </button>
+      Replying to:
+      <b>{{ originalComment !== null ? originalComment.author.displayName : '' }}</b>
+    </div>
+    <p>{{ originalComment !== null ? originalComment.text : '' }}</p>
+  </div>
+}
+
+@if (task) {
+  <div id="replyContainer" [hidden]="editingComment === null">
+    <div class="replying-wrap" style="width: 100%">
+      <button
+        aria-label="Cancel editing"
+        id="cancelEditButton"
+        mat-icon-button
+        (click)="cancelEdit()"
+      >
+        <mat-icon aria-label="Quit cross icon">close</mat-icon>
+      </button>
+      Editing your comment
     </div>
+    <p>Changes can only be saved within 10 minutes of posting.</p>
   </div>
 }
 
 <mat-action-list
-  [hidden]="!emojiSearchMode || !(emojiSearchResults?.length > 0)"
   dense
   id="emojiSearchResults"
+  [hidden]="!emojiSearchMode || !(emojiSearchResults?.length > 0)"
 >
   @for (emoji of emojiSearchResults; track emoji) {
     <mat-list-item (click)="emojiSelected(emoji.native)">
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <ngx-emoji style="align-items: center" [emoji]="emoji" set="apple" size="20"></ngx-emoji>
-        <div class="emoji-details" fxLayout="column" fxLayoutAlign="center start">
+      <div class="flex flex-row items-center justify-start">
+        <ngx-emoji set="apple" style="align-items: center" [emoji]="emoji" [size]="20"></ngx-emoji>
+        <div class="emoji-details flex flex-col items-start justify-center">
           <div style="font-weight: 500; font-size: 12px">{{ emoji.name }}</div>
           <div style="font-size: 10px">{{ emoji.colons }}</div>
         </div>
@@ -48,113 +63,116 @@
 </mat-action-list>
 
 <form
-  [hidden]="!this.task"
-  style="display: flex; width: 100%"
-  class="input-group col-sm-12 comment-submitter"
+  class="input-group col-sm-12 comment-submitter flex-col"
   ng-submit="addComment()"
   role="form"
+  style="display: flex; width: 100%"
+  [hidden]="!this.task"
 >
-  <div fxLayout="row" fxLayoutAlign="space-around center" class="composer-container">
+  @if (task) {
+    <f-task-feedback-templates
+      class="feedback-template-picker pt-2"
+      [hidden]="!this.showFeedbackTemplatePicker"
+      [task]="task"
+      (templateSelected)="addFeedback($event)"
+    ></f-task-feedback-templates>
+  }
+  <div class="composer-container flex flex-row items-center justify-around">
     <div class="composer-action-group" [@shrinkgrow]="$userIsTyping | async">
       <!-- if active -->
-      <div fxLayout="row" fxLayoutAlign="start center">
+      <div class="composer-action-row flex flex-row items-center justify-start">
         @if ($userIsTyping | async) {
           <button
-            (click)="$userIsTyping.next(false); recording = false"
+            aria-label="Expand action buttons"
+            class="btn-no-outline"
+            mat-icon-button
             matTooltip="Expand action buttons"
             matTooltipShowDelay="400"
-            mat-icon-button
-            class="btn-no-outline"
-            type="button"
-            aria-label="Expand action buttons"
             style="margin-right: -4px; margin-left: -4px"
+            type="button"
+            (click)="$userIsTyping.next(false); recording = false"
           >
             <mat-icon>{{ recording ? 'cancel' : 'chevron_right' }}</mat-icon>
           </button>
         }
 
-        <!-- <button
-          [hidden]="shrinkGrowToggle"
-          *ngIf="isStaff"
-          matTooltip="Create a Real Talk discussion"
-          matTooltipShowDelay="400"
-          mat-icon-button
-          class="btn-no-outline"
-          type="button"
-          aria-label="launch real talk took"
-          (click)="openDiscussionComposer()"
-        >
-          <mat-icon>crisis_alert</mat-icon>
-        </button> -->
-
         @if (isStaff) {
+          @if (!isEditing) {
+            <button
+              aria-label="launch real talk took"
+              class="btn-no-outline"
+              mat-icon-button
+              matTooltip="Create a Real Talk discussion"
+              matTooltipShowDelay="400"
+              type="button"
+              [hidden]="$userIsTyping | async"
+              (click)="openDiscussionComposer()"
+            >
+              <mat-icon class="message-inbox-icon">mark_chat_read</mat-icon>
+            </button>
+          }
+        }
+
+        @if (!isEditing) {
           <button
-            [hidden]="$userIsTyping | async"
-            matTooltip="Create a Real Talk discussion"
-            matTooltipShowDelay="400"
+            aria-label="Attach a file"
+            class="btn-no-outline composer-touch-action"
             mat-icon-button
-            class="btn-no-outline"
+            matTooltip="Attach a file"
+            matTooltipShowDelay="400"
             type="button"
-            aria-label="launch real talk took"
-            (click)="openDiscussionComposer()"
+            [hidden]="$userIsTyping | async"
+            (click)="openFile()"
           >
-            <mat-icon class="message-inbox-icon">mark_chat_read</mat-icon>
+            <mat-icon class="message-inbox-icon">attach_file</mat-icon>
+            <input
+              #uploader
+              accept="audio/*,image/*,.pdf"
+              multiple="multiple"
+              style="display: none"
+              type="file"
+              (change)="uploadFiles($event.target.files)"
+            />
           </button>
         }
 
-        <button
-          [hidden]="$userIsTyping | async"
-          matTooltip="Attach a file"
-          matTooltipShowDelay="400"
-          mat-icon-button
-          class="btn-no-outline"
-          type="button"
-          (click)="openFile()"
-          aria-label="attach a file icon button"
-        >
-          <mat-icon class="message-inbox-icon">attach_file</mat-icon>
-          <input
-            #uploader
-            type="file"
-            multiple="multiple"
-            accept="audio/*,image/*,.pdf"
-            style="display: none"
-            (change)="uploadFiles($event.target.files)"
-          />
-        </button>
-
-        <button
-          [hidden]="$userIsTyping | async"
-          matTooltip="Send a recording"
-          matTooltipShowDelay="400"
-          mat-icon-button
-          class="btn-no-outline"
-          type="button"
-          aria-label="audio recording button"
-          (click)="recordingMode()"
-        >
-          <mat-icon class="message-inbox-icon">mic</mat-icon>
-        </button>
+        @if (!isEditing) {
+          <button
+            aria-label="Record audio feedback"
+            class="btn-no-outline composer-touch-action"
+            mat-icon-button
+            matTooltip="Send a recording"
+            matTooltipShowDelay="400"
+            type="button"
+            [hidden]="$userIsTyping | async"
+            (click)="recordingMode()"
+          >
+            <mat-icon class="message-inbox-icon">mic</mat-icon>
+          </button>
+        }
       </div>
     </div>
     <div
       id="textFieldContainer"
       [class.active]="$userIsTyping | async"
-      [ngClass]="{recording: recording}"
+      [ngClass]="{recording: recording, 'draft-loaded': isDraftLoaded}"
     >
       <div
-        [hidden]="recording"
-        (focus)="$userIsTyping.next(true)"
-        (blur)="$userIsTyping.next(false)"
-        [class.active]="($userIsTyping | async) === false"
         #commentInput
+        enterkeyhint="send"
         id="textField"
+        name="commentComposer"
+        placeholder="Aa"
         [attr.contenteditable]="contentEditableValue() && !recording"
-        (keydown.enter)="send($event)"
+        [class.active]="($userIsTyping | async) === false"
+        [hidden]="recording"
+        (beforeinput)="handleBeforeInput($event)"
+        (blur)="$userIsTyping.next(false)"
+        (focus)="$userIsTyping.next(true)"
+        (input)="onInputChange($event)"
         (keydown)="keyTyped()"
-        placeholder="Aa"
-        name="commentComposer"
-        enterkeyhint="send"
+        (keydown.enter)="send($event)"
+        (paste)="handlePaste($event)"
       ></div>
       @if (recording) {
         <audio-comment-recorder
@@ -163,16 +181,40 @@
         ></audio-comment-recorder>
       }
       <div id="innerButtons" [hidden]="recording">
+        @if (isEditing) {
+          <mat-icon
+            aria-label="Save edited comment"
+            id="emojiButton"
+            matTooltip="Save edited comment"
+            matTooltipShowDelay="400"
+            (click)="saveEditedComment()"
+          >
+            check</mat-icon
+          >
+        }
         <mat-icon
+          aria-label="Emoji picker button"
+          id="emojiButton"
           matTooltip="Choose an emoji"
           matTooltipShowDelay="400"
-          id="emojiButton"
           (click)="this.showEmojiPicker = !this.showEmojiPicker"
-          aria-label="Emoji picker button"
         >
           emoji_emotions</mat-icon
         >
       </div>
+      <div id="innerButtons" [hidden]="recording || !isStaff">
+        @if (!isEditing) {
+          <mat-icon
+            aria-label="Feedback template button"
+            id="feedbackTemplateButton"
+            matTooltip="Choose feedback templates"
+            matTooltipShowDelay="400"
+            (click)="showFeedbackPicker()"
+          >
+            task</mat-icon
+          >
+        }
+      </div>
     </div>
   </div>
 </form>
diff --git a/src/app/tasks/task-comment-composer/task-comment-composer.component.scss b/src/app/tasks/task-comment-composer/task-comment-composer.component.scss
index a79e6a5be4..19da5d09d5 100644
--- a/src/app/tasks/task-comment-composer/task-comment-composer.component.scss
+++ b/src/app/tasks/task-comment-composer/task-comment-composer.component.scss
@@ -1,7 +1,6 @@
-$emoji-color: lighten(
-  $color: black,
-  $amount: 25,
-);
+@use 'sass:color';
+
+$emoji-color: color.adjust(black, $lightness: 25%);
 
 .composer-container {
   padding-bottom: 0;
@@ -46,7 +45,6 @@ $emoji-color: lighten(
     word-break: break-word;
     text-wrap: wrap;
     user-select: text;
-
   }
 
   #textField[placeholder]:empty::before {
@@ -64,6 +62,41 @@ $emoji-color: lighten(
   }
 }
 
+#textField.draft-loaded {
+  animation: draftFadeIn 0.3s ease-in;
+}
+
+@keyframes draftFadeIn {
+  from {
+    opacity: 0.5;
+    background-color: rgba(0, 0, 255, 0.05);
+  }
+  to {
+    opacity: 1;
+    background-color: transparent;
+  }
+}
+
+.draft-loaded {
+  animation: blueGlowFade 1.5s ease;
+  border-radius: 4px;
+}
+
+@keyframes blueGlowFade {
+  0% {
+    background-color: rgba(66, 133, 244, 0.2);
+    box-shadow: 0 0 8px 2px rgba(66, 133, 244, 0.6);
+  }
+  70% {
+    background-color: rgba(66, 133, 244, 0.1);
+    box-shadow: 0 0 6px 1px rgba(66, 133, 244, 0.3);
+  }
+  100% {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
 #innerButtons {
   align-items: flex-end;
   display: flex;
@@ -92,7 +125,7 @@ $emoji-color: lighten(
   border-radius: 12px;
   border-style: solid;
   border-width: 1px;
-  border-color: darken($color: white, $amount: 10);
+  border-color: color.adjust($color: white, $lightness: -10%);
 }
 
 #replyContainer {
@@ -103,7 +136,7 @@ $emoji-color: lighten(
     color: rgba(0, 0, 0, 0.5);
     font-size: 12px;
     max-lines: 2;
-    max-height: 30px;
+    max-height: 35px;
     line-clamp: 2;
     line-height: 15.36px;
     overflow-x: hidden;
@@ -214,3 +247,51 @@ button.btn-no-outline {
 #commentComposerFoter {
   border-top: none;
 }
+
+@media (max-width: 639.98px) {
+  .composer-container {
+    box-sizing: border-box;
+    gap: 4px;
+    padding-left: max(8px, env(safe-area-inset-left));
+    padding-right: max(8px, env(safe-area-inset-right));
+
+    #textFieldContainer {
+      min-height: 44px;
+      margin-right: 0;
+    }
+  }
+
+  .composer-action-group {
+    flex: 0 0 auto;
+    margin-right: 0;
+  }
+
+  .composer-action-row {
+    gap: 4px;
+  }
+
+  button.btn-no-outline.composer-touch-action {
+    width: 48px;
+    min-width: 48px;
+    height: 48px;
+    min-height: 48px;
+    margin: 0;
+    padding: 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 9999px;
+    background-color: #f8fafc;
+    color: #334155;
+    transform: none;
+  }
+
+  button.btn-no-outline.composer-touch-action:focus-visible {
+    outline: 2px solid #3939ff;
+    outline-offset: 2px;
+  }
+
+  button.btn-no-outline.composer-touch-action .message-inbox-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+}
diff --git a/src/app/tasks/task-comment-composer/task-comment-composer.component.spec.ts b/src/app/tasks/task-comment-composer/task-comment-composer.component.spec.ts
new file mode 100644
index 0000000000..becad286bf
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/task-comment-composer.component.spec.ts
@@ -0,0 +1,287 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {of, throwError} from 'rxjs';
+import {TaskCommentComposerComponent} from './task-comment-composer.component';
+
+// The composer is a large component with a long constructor. These tests only
+// exercise focused behaviour, so collaborators that are not used are stubs.
+function composerFor(currentUser: {id: number | null}): TaskCommentComposerComponent {
+  const differs = {find: () => ({create: () => ({})})};
+  const userService = {currentUser};
+
+  return new TaskCommentComposerComponent(
+    differs as never,
+    {} as never, // dialog
+    {} as never, // emojiSearch
+    {} as never, // emojiService
+    {} as never, // commentsViewer
+    {} as never, // alerts
+    {} as never, // taskCommentService
+    {} as never, // cdRef
+    userService as never,
+  );
+}
+
+// getDraftKey, saveDraftForTask and loadDraftForTask are private. Reaching them
+// by name is deliberate: the behaviour under test is which storage key gets
+// written, and there is no public surface that reveals it.
+function draftKeyFor(composer: TaskCommentComposerComponent, task: unknown): string | null {
+  return (composer as never as {getDraftKey(t: unknown): string | null}).getDraftKey(task);
+}
+
+function saveDraft(composer: TaskCommentComposerComponent, task: unknown, text: string): void {
+  (composer as never as {input: unknown}).input = {first: {nativeElement: {innerText: text}}};
+  (composer as never as {task: unknown}).task = task;
+  (composer as never as {saveDraftForTask(t: unknown): void}).saveDraftForTask(task);
+}
+
+function clipboardComposer(text = 'draft text') {
+  const component = composerFor({id: 1});
+  const nativeElement = {innerText: text};
+  const alerts = {error: vi.fn()};
+  const cdRef = {detectChanges: vi.fn()};
+
+  component.input = {first: {nativeElement}} as never;
+  (component as never as {alerts: typeof alerts}).alerts = alerts;
+  (component as never as {cdRef: typeof cdRef}).cdRef = cdRef;
+
+  const uploadSpy = vi.spyOn(component, 'uploadFiles').mockImplementation(() => {});
+
+  return {component, nativeElement, alerts, uploadSpy};
+}
+
+function clipboardPasteEvent(files: File[]) {
+  return {
+    clipboardData: {
+      files,
+      items: [],
+    },
+    preventDefault: vi.fn(),
+  } as never as ClipboardEvent;
+}
+
+function beforeInputPasteEvent(files: File[]) {
+  return {
+    inputType: 'insertFromPaste',
+    dataTransfer: {files},
+    preventDefault: vi.fn(),
+  } as never as InputEvent;
+}
+
+describe('TaskCommentComposerComponent drafts', () => {
+  const task = {id: 123};
+
+  beforeEach(() => {
+    localStorage.clear();
+    sessionStorage.clear();
+  });
+
+  // The ticket. Two people, one browser, the same task.
+  it('does not hand one user the draft another user left on the same task', () => {
+    const userOne = composerFor({id: 1});
+    saveDraft(userOne, task, 'feedback only user one should see');
+
+    expect(localStorage.getItem(draftKeyFor(userOne, task))).toBe(
+      'feedback only user one should see',
+    );
+
+    const userTwo = composerFor({id: 2});
+    expect(localStorage.getItem(draftKeyFor(userTwo, task))).toBeNull();
+  });
+
+  it('names the signed in user in the key', () => {
+    const composer = composerFor({id: 7});
+
+    expect(draftKeyFor(composer, task)).toBe('task_comment_draft_uid7_123');
+    expect(draftKeyFor(composer, {projectId: 4, definition: {id: 9}})).toBe(
+      'task_comment_draft_uid7_4_9',
+    );
+  });
+
+  // currentUser is the anonymous user during sign out, and the composer can still
+  // be torn down at that point.
+  it('writes nothing when nobody is signed in', () => {
+    const composer = composerFor({id: null});
+
+    expect(draftKeyFor(composer, task)).toBeNull();
+
+    saveDraft(composer, task, 'orphaned text');
+    expect(localStorage.length).toBe(0);
+  });
+});
+
+// Method-level test on a bare instance. The composer's constructor wires up a
+// KeyValueDiffer and session storage, so we drive addCommentWithType directly
+// with stubbed collaborators.
+describe('TaskCommentComposerComponent addCommentWithType', () => {
+  it('clears the draft and posts without placeholder debug logging', () => {
+    const component = Object.create(TaskCommentComposerComponent.prototype) as {
+      taskCommentService: {addComment: ReturnType<typeof vi.fn>};
+      task: unknown;
+      comment: {text: string; type: string};
+      commentsViewer: {scrollDown: ReturnType<typeof vi.fn>};
+      alerts: {error: ReturnType<typeof vi.fn>};
+      addCommentWithType(comment: string, type: string): void;
+    };
+    component.taskCommentService = {addComment: vi.fn(() => of({}))};
+    component.task = {};
+    component.comment = {text: 'hello', type: 'text'};
+    component.commentsViewer = {scrollDown: vi.fn()};
+    component.alerts = {error: vi.fn()};
+    const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+
+    component.addCommentWithType('hello', 'text');
+
+    expect(logSpy).not.toHaveBeenCalled();
+    expect(component.comment.text).toBe('');
+    expect(component.commentsViewer.scrollDown).toHaveBeenCalled();
+    logSpy.mockRestore();
+  });
+});
+
+describe('TaskCommentComposerComponent clipboard image paste', () => {
+  beforeEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('accepts an approved image from the paste event', () => {
+    const {component, uploadSpy} = clipboardComposer();
+    const image = new File(['image'], 'screenshot.png', {
+      type: 'image/png',
+      lastModified: 10,
+    });
+    const event = clipboardPasteEvent([image]);
+
+    component.handlePaste(event);
+
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(uploadSpy).toHaveBeenCalledOnce();
+    expect(uploadSpy).toHaveBeenCalledWith([image]);
+  });
+
+  it('accepts an approved image from the beforeinput path', () => {
+    const {component, uploadSpy} = clipboardComposer();
+    const image = new File(['image'], 'screenshot.png', {
+      type: 'image/png',
+      lastModified: 20,
+    });
+    const event = beforeInputPasteEvent([image]);
+
+    component.handleBeforeInput(event);
+
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(uploadSpy).toHaveBeenCalledOnce();
+    expect(uploadSpy).toHaveBeenCalledWith([image]);
+  });
+
+  it('prevents beforeinput and paste from creating the same attachment twice', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-09-17T12:00:00Z'));
+
+    const {component, uploadSpy} = clipboardComposer();
+    const image = new File(['image'], 'screenshot.png', {
+      type: 'image/png',
+      lastModified: 30,
+    });
+
+    component.handleBeforeInput(beforeInputPasteEvent([image]));
+    component.handlePaste(clipboardPasteEvent([image]));
+
+    expect(uploadSpy).toHaveBeenCalledOnce();
+
+    vi.useRealTimers();
+  });
+
+  it('preserves text already typed when an image is pasted', () => {
+    vi.useFakeTimers();
+
+    const {component, nativeElement} = clipboardComposer('keep this text');
+    const image = new File(['image'], 'screenshot.png', {
+      type: 'image/png',
+      lastModified: 40,
+    });
+
+    component.handlePaste(clipboardPasteEvent([image]));
+
+    // Simulate browser-inserted placeholder content before the deferred restore runs.
+    nativeElement.innerText = 'temporary pasted placeholder';
+    vi.runAllTimers();
+
+    expect(nativeElement.innerText).toBe('keep this text');
+
+    vi.useRealTimers();
+  });
+
+  it('rejects unsupported clipboard files with a clear message', () => {
+    const {component, alerts, uploadSpy} = clipboardComposer();
+    const pdf = new File(['pdf'], 'evidence.pdf', {
+      type: 'application/pdf',
+      lastModified: 50,
+    });
+    const event = clipboardPasteEvent([pdf]);
+
+    component.handlePaste(event);
+
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(uploadSpy).not.toHaveBeenCalled();
+    expect(alerts.error).toHaveBeenCalledWith(
+      'Clipboard paste supports approved image files only.',
+      4000,
+    );
+  });
+
+  it('leaves normal text or HTML paste alone when there is no clipboard file', () => {
+    const {component, alerts, uploadSpy} = clipboardComposer();
+    const event = {
+      clipboardData: {
+        files: [],
+        items: [],
+        types: ['text/plain', 'text/html'],
+      },
+      preventDefault: vi.fn(),
+    } as never as ClipboardEvent;
+
+    component.handlePaste(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(uploadSpy).not.toHaveBeenCalled();
+    expect(alerts.error).not.toHaveBeenCalled();
+  });
+
+  it('does not post an attachment when confirmation is cancelled', () => {
+    const component = composerFor({id: 1});
+    const image = new File(['image'], 'cancelled.png', {type: 'image/png'});
+    const dialog = {
+      open: vi.fn(() => ({
+        afterClosed: () => of(false),
+      })),
+    };
+    component.dialog = dialog as never;
+    const postSpy = vi.spyOn(component, 'postAttachmentComment').mockImplementation(() => {});
+
+    (
+      component as never as {
+        confirmAttachmentsSequentially(files: File[], index?: number): void;
+      }
+    ).confirmAttachmentsSequentially([image]);
+
+    expect(dialog.open).toHaveBeenCalledOnce();
+    expect(postSpy).not.toHaveBeenCalled();
+  });
+
+  it('shows the API failure when a confirmed image cannot be posted', () => {
+    const component = composerFor({id: 1});
+    const alerts = {error: vi.fn()};
+    const taskCommentService = {
+      addComment: vi.fn(() => throwError(() => new Error('Upload failed'))),
+    };
+
+    component.task = {} as never;
+    (component as never as {alerts: typeof alerts}).alerts = alerts;
+    (component as never as {taskCommentService: typeof taskCommentService}).taskCommentService =
+      taskCommentService;
+
+    component.postAttachmentComment(new File(['image'], 'failed.png', {type: 'image/png'}));
+
+    expect(alerts.error).toHaveBeenCalledWith('Upload failed', 2000);
+  });
+});
diff --git a/src/app/tasks/task-comment-composer/task-comment-composer.component.ts b/src/app/tasks/task-comment-composer/task-comment-composer.component.ts
index 9a4a3297ea..53f8017750 100644
--- a/src/app/tasks/task-comment-composer/task-comment-composer.component.ts
+++ b/src/app/tasks/task-comment-composer/task-comment-composer.component.ts
@@ -1,33 +1,52 @@
+import {EmojiSearch} from '@ctrl/ngx-emoji-mart';
+import {EmojiData} from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import {animate, style, transition, trigger} from '@angular/animations';
 import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  OnInit,
+  DoCheck,
+  ElementRef,
   Inject,
   Input,
-  ViewChildren,
-  QueryList,
-  KeyValueDiffers,
   KeyValueDiffer,
-  ElementRef,
+  KeyValueDiffers,
+  OnChanges,
+  QueryList,
+  SimpleChanges,
   ViewChild,
-  DoCheck,
+  ViewChildren,
 } from '@angular/core';
-import {trigger, style, animate, transition} from '@angular/animations';
-import {analyticsService} from 'src/app/ajs-upgraded-providers';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import {EmojiSearch} from '@ctrl/ngx-emoji-mart';
-import {EmojiData} from '@ctrl/ngx-emoji-mart/ngx-emoji/';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {BehaviorSubject, Subscription} from 'rxjs';
+import {
+  FeedbackTemplate,
+  Task,
+  TaskComment,
+  TaskCommentService,
+} from 'src/app/api/models/doubtfire-model';
+import {UserService} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
 import {EmojiService} from 'src/app/common/services/emoji.service';
-import {Task, TaskComment, TaskCommentService} from 'src/app/api/models/doubtfire-model';
 import {TaskCommentsViewerComponent} from '../task-comments-viewer/task-comments-viewer.component';
-import {BehaviorSubject} from 'rxjs';
-import {AlertService} from 'src/app/common/services/alert.service';
+import {AttachmentConfirmationDialogComponent} from './attachment-confirmation-dialog/attachment-confirmation-dialog.component';
+
+interface ApiError {
+  error?: string;
+  message?: string;
+  status?: number;
+}
 
 /**
  * The task comment viewer needs to share data with the Task Comment Composer. The data needed
  * id defined through this interface.
  */
+
 export interface TaskCommentComposerData {
+  [key: string]: TaskComment;
   originalComment: TaskComment;
+  editingComment: TaskComment;
 }
 
 const ACCEPTED_FILE_TYPES = [
@@ -45,6 +64,13 @@ const ACCEPTED_FILE_TYPES = [
   'image/jpg',
   'image/jpeg',
 ];
+const APPROVED_CLIPBOARD_IMAGE_TYPES = [
+  'image/png',
+  'image/bmp',
+  'image/tiff',
+  'image/jpeg',
+  'image/gif',
+];
 
 /**
  * The task comment composer is responsible for creating and adding comments to a given task.
@@ -55,17 +81,26 @@ const ACCEPTED_FILE_TYPES = [
   styleUrls: ['./task-comment-composer.component.scss'],
   animations: [
     trigger('shrinkgrow', [
-      // 38.4 and 80 are the precise sizes of the buttons to the left of the input field
       transition('true => false', [style({width: 38.4}), animate('150ms 0ms ease-in-out')]),
       transition('false => true', [style({width: 80}), animate('150ms 0ms ease-in-out')]),
     ]),
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class TaskCommentComposerComponent implements DoCheck {
+export class TaskCommentComposerComponent implements AfterViewInit, DoCheck, OnChanges {
   @Input() task: Task;
   @Input() sharedData: TaskCommentComposerData;
 
-  public $userIsTyping = new BehaviorSubject<boolean>(false);
+  public $userIsTyping: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  private draftSaveSubscription = new Subscription();
+  private readonly DRAFT_KEY_PREFIX = 'task_comment_draft_';
+  private readonly SUBMITTED_KEY_PREFIX = 'task_comments_submitted_';
+  public isDraftLoaded = false;
+  private submittedTaskIds: Set<number | string> = new Set();
+
+  public isSending: boolean = false;
+  private draftBeforeEdit: string = '';
 
   comment = {
     text: '',
@@ -76,12 +111,14 @@ export class TaskCommentComposerComponent implements DoCheck {
   @ViewChildren('cag') cag: QueryList<ElementRef>;
   @ViewChild('uploader') uploader: ElementRef;
 
-  differ: KeyValueDiffer<string, any>;
-  showEmojiPicker: boolean = false;
-  emojiSearchMode: boolean = false;
+  differ: KeyValueDiffer<string, TaskComment>;
+  showEmojiPicker = false;
+  emojiSearchMode = false;
+  // eslint-disable-next-line no-useless-escape
   emojiRegex: RegExp = /(?:\:)(.*?)(?=\:|$)/;
   emojiSearchResults: EmojiData[] = [];
   emojiMatch: string;
+  showFeedbackTemplatePicker: boolean = false;
   recording = false;
   cagStartWidth: number;
 
@@ -91,11 +128,249 @@ export class TaskCommentComposerComponent implements DoCheck {
     private emojiSearch: EmojiSearch,
     private emojiService: EmojiService,
     private commentsViewer: TaskCommentsViewerComponent,
-    @Inject(analyticsService) private analytics,
     private alerts: AlertService,
     @Inject(TaskCommentService) private taskCommentService: TaskCommentService,
+    private cdRef: ChangeDetectorRef,
+    private userService: UserService,
   ) {
     this.differ = this.differs.find({}).create();
+    // submitted tasks from sessionStorage, for this user only
+    try {
+      const key = this.submittedKey();
+      const saved = key ? sessionStorage.getItem(key) : null;
+      if (saved) {
+        this.submittedTaskIds = new Set(JSON.parse(saved));
+      }
+    } catch (e) {
+      console.error('Error loading submitted tasks:', e);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.showFeedbackTemplatePicker = false;
+
+    if (changes.task && changes.task.currentValue !== changes.task.previousValue) {
+      const newTask = changes.task.currentValue as Task;
+      // Check if the task has changed
+
+      this.cancelEdit();
+      this.cancelReply();
+
+      this.clearInput();
+
+      if (newTask) {
+        this.loadDraftForTask(newTask);
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      if (this.task?.id) {
+        this.loadDraftForTask(this.task);
+      }
+    }, 100);
+  }
+
+  // ngOnDestroy() {
+  //   if (this.task?.id) {
+  //     try {
+  //       const inputElement = this.input?.first?.nativeElement;
+  //       if (inputElement) {
+  //         const text = inputElement.innerText.trim();
+  //         if (text && !this.hasSubmittedComment) {
+  //           localStorage.setItem(this.getDraftKey(this.task), text);
+  //         } else {
+  //         }
+  //       }
+  //     } catch (error) {}
+  //   }
+  // }
+
+  // Update onInputChange to reset submitted status
+  onInputChange(event: Event) {
+    if (this.isEditing) {
+      return;
+    }
+
+    const target = event.target as HTMLElement;
+    const text = target.innerText;
+    const _raw = target.innerText;
+
+    // If user is typing something new after submission, reset the submitted status
+    if (this.task) {
+      const taskKey =
+        this.task.id ||
+        `${this.task.projectId || this.task.project?.id}_${this.task.definition?.id}`;
+
+      // If this was a previously submitted task and user is typing again,
+      // remove from submitted set
+      if (this.submittedTaskIds.has(taskKey) && text.trim()) {
+        this.submittedTaskIds.delete(taskKey);
+
+        // Update session storage
+        try {
+          const submittedKey = this.submittedKey();
+          if (submittedKey) {
+            sessionStorage.setItem(submittedKey, JSON.stringify([...this.submittedTaskIds]));
+          }
+        } catch (e) {
+          console.error('Error saving submitted tasks:', e);
+        }
+      }
+
+      const _draftKey = this.getDraftKey(this.task);
+      // this.taskDraftContents.set(draftKey, raw);
+    }
+
+    this.saveCurrentDraft();
+  }
+
+  // The id of whoever is signed in, or null during sign out when currentUser has
+  // already been swapped for the anonymous user. A draft with nobody to own it is
+  // not worth keeping, so callers return early on null rather than inventing a
+  // key. The id and not the username or the email: ids are stable, and an email
+  // in a storage key is personal data sitting in plain sight in dev tools.
+  private currentUserId(): number | null {
+    const id = this.userService?.currentUser?.id;
+    return typeof id === 'number' && id > 0 ? id : null;
+  }
+
+  private submittedKey(): string | null {
+    const userId = this.currentUserId();
+    return userId === null ? null : `${this.SUBMITTED_KEY_PREFIX}${userId}`;
+  }
+
+  // The key used to name a task identified the task and never the person, so on a
+  // shared machine the next person to open the same task was handed the previous
+  // person's unsent words.
+  //
+  // The user segment is written as uid<id> rather than the bare number. A legacy
+  // key is task_comment_draft_<taskId> or task_comment_draft_<projectId>_<defId>,
+  // so a bare number would make task_comment_draft_5_7 mean both "user 5, task 7"
+  // and "project 5, definition 7". The marker makes the two shapes impossible to
+  // confuse, which is what lets sign out sweep the old ones safely.
+  private getDraftKey(task: Task): string | null {
+    const userId = this.currentUserId();
+    if (userId === null) {
+      return null;
+    }
+
+    // If task has an ID, use it
+    if (task.id) {
+      return `${this.DRAFT_KEY_PREFIX}uid${userId}_${task.id}`;
+    }
+
+    // For "not started" tasks, create a composite key using only valid properties
+    const projectId = task.projectId || task.project?.id || 'unknown';
+    // Fix: Use task.definition.id instead of task.definition_id
+    const definitionId = task.definition?.id || 'unknown';
+
+    return `${this.DRAFT_KEY_PREFIX}uid${userId}_${projectId}_${definitionId}`;
+  }
+
+  private hasContent(raw: string): boolean {
+    return raw.replace(/\s+/g, '').length > 0;
+  }
+
+  // Update saveDraftForTask to use the taskDraftContents map
+  private saveDraftForTask(task: Task, _rawFromDom?: string): void {
+    if (!task) {
+      return;
+    }
+
+    const draftKey = this.getDraftKey(task);
+    if (draftKey === null) {
+      return;
+    }
+
+    try {
+      let raw: string;
+      if (this.task?.id === task.id && this.input.first) {
+        raw = this.input.first.nativeElement.innerText;
+      } else {
+        // raw = this.taskDraftContents.get(draftKey) ?? '';
+      }
+
+      if (!this.hasContent(raw)) {
+        // No text to save, removing draft from localStorage
+        // this.taskDraftContents.delete(draftKey);
+        localStorage.removeItem(draftKey);
+        return;
+      }
+
+      const text = raw.trim();
+      // Save comment draf
+      // this.taskDraftContents.set(draftKey, text);
+      localStorage.setItem(draftKey, text);
+    } catch (error) {
+      console.error('saveDraftForTask error:', error);
+    }
+  }
+
+  private loadDraftForTask(task: Task) {
+    if (!task) {
+      return;
+    }
+
+    const taskKey = task.id || `${task.projectId || task.project?.id}_${task.definition?.id}`;
+
+    if (this.submittedTaskIds.has(taskKey)) {
+      return;
+    }
+
+    const draftKey = this.getDraftKey(task);
+    if (draftKey === null) {
+      return;
+    }
+
+    try {
+      const draft = localStorage.getItem(draftKey);
+
+      if (!draft) {
+        return;
+      }
+
+      const maxRetries = 5;
+      const retryWithTimeout = (attempt = 0) => {
+        if (!this.input || !this.input.first || !this.input.first.nativeElement) {
+          if (attempt < maxRetries) {
+            setTimeout(() => retryWithTimeout(attempt + 1), 200);
+            return;
+          } else {
+            return;
+          }
+        }
+
+        this.input.first.nativeElement.innerText = draft;
+        // this.taskDraftContents.set(draftKey, draft);
+        this.isDraftLoaded = true;
+        this.cdRef.detectChanges();
+
+        setTimeout(() => {
+          this.isDraftLoaded = false;
+          this.cdRef.detectChanges();
+        }, 1500);
+      };
+
+      retryWithTimeout();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  private clearInput() {
+    if (this.input?.first?.nativeElement) {
+      this.input.first.nativeElement.innerText = '';
+      this.cdRef.detectChanges();
+    }
+  }
+
+  private saveCurrentDraft() {
+    if (!this.task) {
+      return;
+    }
+    this.saveDraftForTask(this.task);
   }
 
   ngDoCheck() {
@@ -105,11 +380,7 @@ export class TaskCommentComposerComponent implements DoCheck {
       change.forEachChangedItem((item) => {
         // If it has changed to be an actual comment
         if (item != null) {
-          // Set the input field as focused, so the user can start typing
-          // timeout is required
-          setTimeout(() => {
-            this.input.first.nativeElement.focus();
-          });
+          this.syncComposerState();
         }
       });
     }
@@ -119,6 +390,14 @@ export class TaskCommentComposerComponent implements DoCheck {
     return this.sharedData.originalComment;
   }
 
+  get editingComment(): TaskComment {
+    return this.sharedData.editingComment;
+  }
+
+  get isEditing(): boolean {
+    return this.editingComment != null;
+  }
+
   get isStaff() {
     return this.task?.unit?.currentUserIsStaff;
   }
@@ -127,6 +406,11 @@ export class TaskCommentComposerComponent implements DoCheck {
     this.sharedData.originalComment = null;
   }
 
+  cancelEdit() {
+    this.sharedData.editingComment = null;
+    this.restoreDraftAfterEdit();
+  }
+
   contentEditableValue() {
     const UA = navigator.userAgent;
     const isWebkit = /WebKit/.test(UA) && !/Edge/.test(UA);
@@ -156,7 +440,11 @@ export class TaskCommentComposerComponent implements DoCheck {
     this.emojiSearchMode = false;
     this.showEmojiPicker = false;
     if (this.input.first.nativeElement.innerText.trim() !== '') {
-      this.addComment();
+      if (this.isEditing) {
+        this.saveEditedComment();
+      } else {
+        this.addComment();
+      }
     }
   }
 
@@ -242,6 +530,21 @@ export class TaskCommentComposerComponent implements DoCheck {
     ].join('');
   }
 
+  addFeedback(template: FeedbackTemplate): void {
+    const char = template.commentText;
+    const text = this.input.first.nativeElement.innerText;
+    const position = this.caretOffset();
+    this.input.first.nativeElement.innerText = [
+      text.slice(0, position),
+      char,
+      text.slice(position),
+    ].join('');
+    this.input.first.nativeElement.focus();
+    setTimeout(() => {
+      this.saveDraftForTask(this.task);
+    });
+  }
+
   openDiscussionComposer() {
     this.dialog.open(DiscussionComposerDialog, {
       data: {
@@ -259,29 +562,77 @@ export class TaskCommentComposerComponent implements DoCheck {
   }
 
   addComment() {
+    if (this.isSending) {
+      return;
+    }
+    this.isSending = true;
+
     const originalComment = this.sharedData.originalComment;
     if (originalComment != null) {
       this.cancelReply();
     }
+
     const text = this.emojiService.nativeEmojiToColons(this.input.first.nativeElement.innerText);
 
-    this.taskCommentService.addComment(this.task, text, 'text', originalComment).subscribe(
-      (tc: TaskComment) => {
+    const taskKey =
+      this.task.id || `${this.task.projectId || this.task.project?.id}_${this.task.definition?.id}`;
+
+    const draftKey = this.getDraftKey(this.task);
+    this.taskCommentService.addComment(this.task, text, 'text', originalComment).subscribe({
+      next: (_tc: TaskComment) => {
+        this.isSending = false;
+
+        this.submittedTaskIds.add(taskKey);
+
+        try {
+          const submittedKey = this.submittedKey();
+          if (submittedKey) {
+            sessionStorage.setItem(submittedKey, JSON.stringify([...this.submittedTaskIds]));
+          }
+        } catch (e) {
+          console.error('Error saving submitted tasks:', e);
+        }
+
+        if (this.task) {
+          localStorage.removeItem(draftKey);
+        }
+
         this.input.first.nativeElement.innerText = '';
       },
-      (error: any) => {
-        this.alerts.error(error || error?.message, 2000);
+      error: (error: ApiError) => {
+        this.isSending = false;
+        this.alerts.error(error.error || error.message || `Failed to add comment: ${error}`, 6000);
       },
-    );
+    });
+  }
+
+  saveEditedComment() {
+    if (this.isSending || !this.editingComment) {
+      return;
+    }
+
+    this.isSending = true;
+    const text = this.emojiService.nativeEmojiToColons(this.input.first.nativeElement.innerText);
+
+    this.taskCommentService.editComment(this.editingComment, text).subscribe({
+      next: (_tc: TaskComment) => {
+        this.isSending = false;
+        this.sharedData.editingComment = null;
+        this.draftBeforeEdit = '';
+        this.clearInput();
+      },
+      error: (error: ApiError) => {
+        this.isSending = false;
+        this.alerts.error(error.error || error.message || `Failed to edit comment: ${error}`, 6000);
+      },
+    });
   }
 
   addCommentWithType(comment: string, type: string) {
     this.taskCommentService.addComment(this.task, comment, type).subscribe({
-      next: (success: TaskComment) => {
+      next: (_success: TaskComment) => {
         this.comment.text = '';
         this.commentsViewer.scrollDown();
-        console.log('implement - check map comments');
-        //this.task.comments = this.ts.mapComments(this.task.comments);
       },
       error: (message: string) => this.alerts.error(message, 6000),
     });
@@ -291,45 +642,240 @@ export class TaskCommentComposerComponent implements DoCheck {
     this.uploader.nativeElement.click();
   }
 
-  uploadFiles(event) {
-    [...event].forEach((file) => {
+  handlePaste(event: ClipboardEvent) {
+    const files = this.getClipboardFiles(event);
+    this.handleClipboardFiles(files, event);
+  }
+
+  handleBeforeInput(event: InputEvent) {
+    if (event.inputType !== 'insertFromPaste') {
+      return;
+    }
+
+    const files = Array.from(event.dataTransfer?.files ?? []);
+    this.handleClipboardFiles(files, event);
+  }
+
+  uploadFiles(files: ArrayLike<File>) {
+    const acceptedFiles: File[] = [];
+
+    Array.from(files).forEach((file) => {
       if (
         ACCEPTED_FILE_TYPES.includes(file.type) ||
         file.type.startsWith('audio/') ||
         file.type.startsWith('image/')
       ) {
-        this.postAttachmentComment(file);
+        acceptedFiles.push(file);
       } else {
         this.alerts.error('Cannot upload that file - only images, audio, and PDFs.', 4000);
       }
     });
+
+    this.confirmAttachmentsSequentially(acceptedFiles);
+    this.resetUploader();
+  }
+
+  private lastClipboardPasteSignature = '';
+  private lastClipboardPasteAt = 0;
+  private readonly CLIPBOARD_DUPLICATE_WINDOW_MS = 250;
+
+  private handleClipboardFiles(files: File[], event: ClipboardEvent | InputEvent) {
+    if (files.length === 0) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const approvedImages = files.filter((file) =>
+      APPROVED_CLIPBOARD_IMAGE_TYPES.includes(file.type.toLowerCase()),
+    );
+
+    if (approvedImages.length !== files.length) {
+      this.alerts.error('Clipboard paste supports approved image files only.', 4000);
+    }
+
+    if (approvedImages.length === 0) {
+      return;
+    }
+
+    const signature = approvedImages
+      .map((file) => `${file.name}:${file.type}:${file.size}:${file.lastModified}`)
+      .sort()
+      .join('|');
+
+    const now = Date.now();
+
+    if (
+      signature === this.lastClipboardPasteSignature &&
+      now - this.lastClipboardPasteAt < this.CLIPBOARD_DUPLICATE_WINDOW_MS
+    ) {
+      return;
+    }
+
+    this.lastClipboardPasteSignature = signature;
+    this.lastClipboardPasteAt = now;
+
+    const existingText = this.input?.first?.nativeElement?.innerText ?? '';
+
+    this.clearPastedPlaceholderContent(existingText);
+    this.uploadFiles(approvedImages);
+  }
+
+  private getClipboardFiles(event: ClipboardEvent): File[] {
+    const clipboardData = event.clipboardData;
+
+    if (!clipboardData) {
+      return [];
+    }
+
+    const directFiles = Array.from(clipboardData.files ?? []);
+    if (directFiles.length > 0) {
+      return directFiles;
+    }
+
+    return Array.from(clipboardData.items ?? [])
+      .filter((item) => item.kind === 'file')
+      .map((item) => item.getAsFile())
+      .filter((file): file is File => file != null);
+  }
+
+  private clearPastedPlaceholderContent(existingText: string) {
+    if (!this.input?.first?.nativeElement) {
+      return;
+    }
+
+    // Let the browser finish the paste event lifecycle, then restore the pre-paste text
+    // so clipboard attachment placeholders do not replace an in-progress draft.
+    setTimeout(() => {
+      this.input.first.nativeElement.innerText = existingText;
+      this.saveCurrentDraft();
+      this.cdRef.detectChanges();
+    });
   }
 
   // # Upload image files as comments to a given task
   postAttachmentComment(file) {
     this.taskCommentService.addComment(this.task, file, 'file', null).subscribe(
-      (tc: TaskComment) => {
+      (_tc: TaskComment) => {
         this.commentsViewer.scrollDown();
       },
-      (error: any) => {
-        this.alerts.error(error || error?.message, 2000);
+      (error: Error) => {
+        this.alerts.error(error.message, 2000);
       },
     );
   }
+
+  private confirmAttachmentsSequentially(files: File[], index: number = 0) {
+    if (index >= files.length) {
+      return;
+    }
+
+    const dialogRef = this.dialog.open(AttachmentConfirmationDialogComponent, {
+      data: {
+        file: files[index],
+      },
+      maxWidth: '720px',
+      width: 'min(92vw, 720px)',
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed: boolean) => {
+      if (confirmed) {
+        this.postAttachmentComment(files[index]);
+      }
+
+      this.confirmAttachmentsSequentially(files, index + 1);
+    });
+  }
+
+  private resetUploader() {
+    if (this.uploader?.nativeElement) {
+      this.uploader.nativeElement.value = '';
+    }
+  }
+
+  showFeedbackPicker() {
+    this.showFeedbackTemplatePicker = !this.showFeedbackTemplatePicker;
+    this.commentsViewer.scrollDown();
+  }
+
+  private syncComposerState() {
+    if (this.isEditing) {
+      this.beginEditingComment();
+      return;
+    }
+
+    setTimeout(() => {
+      this.input.first.nativeElement.focus();
+    });
+  }
+
+  private beginEditingComment() {
+    const currentText = this.input?.first?.nativeElement?.innerText ?? '';
+    const nextText = this.editingComment?.text ?? '';
+
+    if (this.sharedData.originalComment != null) {
+      this.sharedData.originalComment = null;
+    }
+
+    if (currentText !== nextText) {
+      this.draftBeforeEdit = currentText;
+      this.setComposerText(nextText);
+    }
+
+    setTimeout(() => {
+      this.focusComposerAtEnd();
+    });
+  }
+
+  private restoreDraftAfterEdit() {
+    const draft = this.draftBeforeEdit;
+    this.draftBeforeEdit = '';
+    this.setComposerText(draft);
+  }
+
+  private setComposerText(text: string) {
+    if (!this.input?.first?.nativeElement) {
+      return;
+    }
+
+    this.input.first.nativeElement.innerText = text;
+    this.cdRef.detectChanges();
+  }
+
+  private focusComposerAtEnd() {
+    const element = this.input?.first?.nativeElement;
+    if (!element) {
+      return;
+    }
+
+    element.focus();
+
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
 }
 
 // The discussion prompt composer dialog Component
-// eslint-disable-next-line max-classes-per-file
+
 @Component({
   selector: 'discussion-prompt-composer-dialog.html',
   templateUrl: 'discussion-prompt-composer-dialog.html',
   styleUrls: ['./discussion-prompt-composer/discussion-prompt-composer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class DiscussionComposerDialog implements OnInit {
+export class DiscussionComposerDialog {
   constructor(
     public dialogRef: MatDialogRef<DiscussionComposerDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA) public data: {task: Task},
   ) {}
-
-  ngOnInit() {}
 }
diff --git a/src/app/tasks/task-comment-composer/task-comment-composer.touch-targets.spec.ts b/src/app/tasks/task-comment-composer/task-comment-composer.touch-targets.spec.ts
new file mode 100644
index 0000000000..1743c51a9c
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/task-comment-composer.touch-targets.spec.ts
@@ -0,0 +1,117 @@
+import {EmojiSearch} from '@ctrl/ngx-emoji-mart';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {CommonModule} from '@angular/common';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDialog} from '@angular/material/dialog';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
+import {TaskCommentService, UserService} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {EmojiService} from 'src/app/common/services/emoji.service';
+import {TaskCommentsViewerComponent} from '../task-comments-viewer/task-comments-viewer.component';
+import {TaskCommentComposerComponent} from './task-comment-composer.component';
+
+function memoryStorage(): Storage {
+  const values: Map<string, string> = new Map();
+
+  return {
+    get length() {
+      return values.size;
+    },
+    clear: () => values.clear(),
+    getItem: (key: string) => values.get(key) ?? null,
+    key: (index: number) => Array.from(values.keys())[index] ?? null,
+    removeItem: (key: string) => values.delete(key),
+    setItem: (key: string, value: string) => values.set(key, String(value)),
+  };
+}
+
+describe('TaskCommentComposerComponent phone actions', () => {
+  let fixture: ComponentFixture<TaskCommentComposerComponent>;
+
+  beforeEach(async () => {
+    // Node exposes storage globals without values unless it is launched with storage files.
+    // Use isolated browser-compatible stores while rendering this storage-aware component.
+    Object.defineProperty(globalThis, 'localStorage', {
+      configurable: true,
+      value: memoryStorage(),
+    });
+    Object.defineProperty(globalThis, 'sessionStorage', {
+      configurable: true,
+      value: memoryStorage(),
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [CommonModule],
+      declarations: [TaskCommentComposerComponent],
+      providers: [
+        provideNoopAnimations(),
+        {provide: MatDialog, useValue: {}},
+        {provide: EmojiSearch, useValue: {}},
+        {provide: EmojiService, useValue: {}},
+        {provide: TaskCommentsViewerComponent, useValue: {}},
+        {provide: AlertService, useValue: {}},
+        {provide: TaskCommentService, useValue: {}},
+        {provide: UserService, useValue: {currentUser: {id: 1}}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TaskCommentComposerComponent);
+    fixture.componentRef.setInput('task', {
+      id: 123,
+      unit: {currentUserIsStaff: false},
+    });
+    fixture.componentRef.setInput('sharedData', {
+      originalComment: null,
+      editingComment: null,
+    });
+    fixture.detectChanges();
+  });
+
+  const componentStyles = (): string =>
+    (
+      TaskCommentComposerComponent as unknown as {
+        ɵcmp: {styles: string[]};
+      }
+    ).ɵcmp.styles.join('\n');
+
+  it('keeps clear accessible names on the attachment and microphone controls', () => {
+    const attach = fixture.nativeElement.querySelector(
+      'button[aria-label="Attach a file"]',
+    ) as HTMLButtonElement;
+    const record = fixture.nativeElement.querySelector(
+      'button[aria-label="Record audio feedback"]',
+    ) as HTMLButtonElement;
+
+    expect(attach).toBeTruthy();
+    expect(record).toBeTruthy();
+    expect(attach.classList).toContain('composer-touch-action');
+    expect(record.classList).toContain('composer-touch-action');
+  });
+
+  it('gives both phone controls 48px touch targets without changing their desktop rule', () => {
+    const styles = componentStyles();
+    const phoneMediaStart = styles.indexOf('@media (max-width: 639.98px)');
+    const desktopStyles = styles.slice(0, phoneMediaStart);
+    const phoneStyles = styles.slice(phoneMediaStart);
+
+    expect(phoneMediaStart).toBeGreaterThan(-1);
+    expect(desktopStyles).not.toContain('composer-touch-action');
+    expect(phoneStyles).toMatch(/min-width:\s*48px/);
+    expect(phoneStyles).toMatch(/min-height:\s*48px/);
+    expect(phoneStyles).toMatch(/width:\s*48px/);
+    expect(phoneStyles).toMatch(/height:\s*48px/);
+    expect(phoneStyles).toMatch(/transform:\s*none/);
+    expect(phoneStyles).toMatch(/border:\s*1px solid #cbd5e1/);
+    expect(phoneStyles).toMatch(/background-color:\s*#f8fafc/);
+  });
+
+  it('keeps the phone composer away from both safe-area edges', () => {
+    const styles = componentStyles();
+    const phoneStyles = styles.slice(styles.indexOf('@media (max-width: 639.98px)'));
+
+    expect(phoneStyles).toMatch(/padding-left:\s*max\(8px,\s*env\(safe-area-inset-left\)\)/);
+    expect(phoneStyles).toMatch(/padding-right:\s*max\(8px,\s*env\(safe-area-inset-right\)\)/);
+  });
+});
diff --git a/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.html b/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.html
new file mode 100644
index 0000000000..02c21111bc
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.html
@@ -0,0 +1,165 @@
+<mat-card
+  class="flex h-[423px] w-[338px] flex-col rounded-lg border border-gray-300 bg-white shadow-none"
+>
+  <mat-tab-group class="category-tab-group" (selectedTabChange)="scrollToSection($event)">
+    @for (category of categories; track category) {
+      <mat-tab [label]="category"></mat-tab>
+    }
+  </mat-tab-group>
+
+  <mat-form-field appearance="outline" class="template-search w-full px-1 pt-1">
+    <input
+      matInput
+      placeholder="Search templates"
+      (input)="onSearchTermChange($event.target.value)"
+    />
+    <mat-icon matSuffix>search</mat-icon>
+  </mat-form-field>
+
+  <div class="flex-grow overflow-y-auto px-2.5 pt-0 pb-3">
+    <div class="template-category my-1">
+      <div class="template-grid mt-3 flex flex-wrap gap-1">
+        @for (template of genTemplates$ | async; track template) {
+          <mat-chip
+            class="cursor-pointer rounded-full px-1 py-0.5 transition-shadow duration-200 hover:shadow-lg"
+            [hidden]="template.chipText === 'Summarise feedback' && selectedTemplates.length < 1"
+            [ngStyle]="isTemplateSelected(template) ? {'border': '1px solid'} : {}"
+            (click)="selectTemplate(template)"
+            (mouseenter)="onHoverTemplate(template)"
+            (mouseleave)="onHoverTemplate(null)"
+          >
+            @if (isTemplateSelected(template)) {
+              <mat-icon matChipAvatar>check_circle</mat-icon>
+            }
+            {{ template.chipText }}
+          </mat-chip>
+        }
+      </div>
+    </div>
+
+    <div #tloSection class="template-category my-1">
+      @for (item of tlos$ | async; track item) {
+        <div class="outcome-section mt-2.5">
+          <h5 class="font-extrabold text-formatif-blue">
+            {{ item.outcome.abbreviation }} - {{ item.outcome.shortDescription }}
+          </h5>
+          <div class="template-grid mt-0.5 flex flex-wrap gap-1">
+            @for (template of item.templates; track template) {
+              <mat-chip
+                class="cursor-pointer rounded-full px-1 py-0.5 transition-shadow duration-200 hover:shadow-lg"
+                [ngStyle]="isTemplateSelected(template) ? {'border': '1px solid'} : {}"
+                (click)="selectTemplate(template)"
+                (mouseenter)="onHoverTemplate(template)"
+                (mouseleave)="onHoverTemplate(null)"
+              >
+                @if (isTemplateSelected(template)) {
+                  <mat-icon matChipAvatar>check_circle</mat-icon>
+                }
+                @if (!isTemplateSelected(template) && template.taskStatus) {
+                  <mat-icon matChipAvatar>{{
+                    taskService.statusData(template.taskStatus).materialIcon
+                  }}</mat-icon>
+                }
+                @if (template.type === 'group' && !isGroupExpanded(template)) {
+                  <mat-icon matChipAvatar>folder</mat-icon>
+                }
+                @if (template.type === 'group' && isGroupExpanded(template)) {
+                  <mat-icon matChipAvatar>chevron_right</mat-icon>
+                }
+                {{ template.chipText }}
+              </mat-chip>
+            }
+          </div>
+        </div>
+      }
+    </div>
+
+    <div #uloSection class="template-category my-1">
+      @for (item of ulos$ | async; track item) {
+        <div class="outcome-section mt-2.5">
+          <h5 class="font-extrabold text-formatif-blue">
+            {{ item.outcome.abbreviation }} - {{ item.outcome.shortDescription }}
+          </h5>
+          <div class="template-grid mt-0.5 flex flex-wrap gap-1">
+            @for (template of item.templates; track template) {
+              <mat-chip
+                class="cursor-pointer rounded-full px-1 py-0.5 transition-shadow duration-200 hover:shadow-lg"
+                [ngStyle]="isTemplateSelected(template) ? {'border': '1px solid'} : {}"
+                (click)="selectTemplate(template)"
+                (mouseenter)="onHoverTemplate(template)"
+                (mouseleave)="onHoverTemplate(null)"
+              >
+                @if (isTemplateSelected(template)) {
+                  <mat-icon matChipAvatar>check_circle</mat-icon>
+                }
+                @if (!isTemplateSelected(template) && template.taskStatus) {
+                  <mat-icon matChipAvatar>{{
+                    taskService.statusData(template.taskStatus).materialIcon
+                  }}</mat-icon>
+                }
+                @if (template.type === 'group' && !isGroupExpanded(template)) {
+                  <mat-icon matChipAvatar>folder</mat-icon>
+                }
+                @if (template.type === 'group' && isGroupExpanded(template)) {
+                  <mat-icon matChipAvatar>chevron_right</mat-icon>
+                }
+                {{ template.chipText }}
+              </mat-chip>
+            }
+          </div>
+        </div>
+      }
+    </div>
+
+    <div #gloSection class="template-category my-1">
+      @for (item of glos$ | async; track item) {
+        <div class="outcome-section mt-2.5">
+          <h5 class="font-extrabold text-formatif-blue">
+            {{ item.outcome.abbreviation }} - {{ item.outcome.shortDescription }}
+          </h5>
+          <div class="template-grid mt-0.5 flex flex-wrap gap-1">
+            @for (template of item.templates; track template) {
+              <mat-chip
+                class="cursor-pointer rounded-full px-1 py-0.5 transition-shadow duration-200 hover:shadow-lg"
+                [ngStyle]="isTemplateSelected(template) ? {'border': '1px solid'} : {}"
+                (click)="selectTemplate(template)"
+                (mouseenter)="onHoverTemplate(template)"
+                (mouseleave)="onHoverTemplate(null)"
+              >
+                @if (isTemplateSelected(template)) {
+                  <mat-icon matChipAvatar>check_circle</mat-icon>
+                }
+                @if (!isTemplateSelected(template) && template.taskStatus) {
+                  <mat-icon matChipAvatar>{{
+                    taskService.statusData(template.taskStatus).materialIcon
+                  }}</mat-icon>
+                }
+                @if (template.type === 'group' && !isGroupExpanded(template)) {
+                  <mat-icon matChipAvatar>folder</mat-icon>
+                }
+                @if (template.type === 'group' && isGroupExpanded(template)) {
+                  <mat-icon matChipAvatar>chevron_right</mat-icon>
+                }
+                {{ template.chipText }}
+              </mat-chip>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+
+  <div class="flex items-center border-t border-gray-300 p-3">
+    <mat-icon class="mr-2 flex-shrink-0 text-2xl">{{
+      hoveredTemplate?.type === 'group' ? 'folder' : 'description'
+    }}</mat-icon>
+    <div class="flex flex-col">
+      <p class="mb-0 text-xs font-semibold">
+        {{ hoveredTemplate?.chipText || 'Select a feedback chip' }}
+      </p>
+      <p class="mb-0 text-xs text-gray-500">
+        {{ hoveredTemplate?.description || 'This will populate the comment area with feedback.' }}
+      </p>
+    </div>
+  </div>
+</mat-card>
diff --git a/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.scss b/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.scss
new file mode 100644
index 0000000000..ebab784fe9
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.scss
@@ -0,0 +1,32 @@
+.category-tab-group .mat-mdc-tab-header {
+  --mat-tab-container-height: 40px;
+}
+
+.template-search .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+  height: 0px;
+}
+
+.template-search .mat-mdc-text-field-wrapper,
+.template-search .mat-mdc-form-field {
+  height: 40px;
+}
+
+.template-search .mat-mdc-form-field-infix {
+  min-height: 40px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.template-search .mat-mdc-input-element {
+  font-size: 14px;
+  padding-top: 3px;
+}
+
+.template-search .material-icons {
+  font-size: 19px;
+  padding-top: 5px;
+}
+
+.template-grid .mdc-evolution-chip__graphic.mat-mdc-chip-graphic.ng-star-inserted {
+  padding-right: 2px;
+}
diff --git a/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.ts b/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.ts
new file mode 100644
index 0000000000..816f4c6e2d
--- /dev/null
+++ b/src/app/tasks/task-comment-composer/task-feedback-templates/task-feedback-templates.component.ts
@@ -0,0 +1,261 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {BehaviorSubject, Observable, combineLatest, map} from 'rxjs';
+import {
+  FeedbackTemplate,
+  FeedbackTemplateService,
+  LearningOutcome,
+  LearningOutcomeService,
+  Task,
+  TaskService,
+} from 'src/app/api/models/doubtfire-model';
+
+@Component({
+  selector: 'f-task-feedback-templates',
+  styleUrl: './task-feedback-templates.component.scss',
+  templateUrl: './task-feedback-templates.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskFeedbackTemplatesComponent implements OnInit, OnChanges {
+  @Input() task: Task;
+  @Output() templateSelected: EventEmitter<FeedbackTemplate> = new EventEmitter();
+
+  categories = ['TLO', 'ULO', 'GLO'];
+  selectedTemplates: FeedbackTemplate[] = [];
+  hoveredTemplate: FeedbackTemplate;
+
+  private generalTemplatesSubject: BehaviorSubject<FeedbackTemplate[]> = new BehaviorSubject([]);
+  generalTemplates$ = this.generalTemplatesSubject.asObservable();
+
+  private navigationStackSubject: BehaviorSubject<Map<number, number[]>> = new BehaviorSubject(
+    new Map<number, number[]>(),
+  );
+  navigationStack$ = this.navigationStackSubject.asObservable();
+
+  private searchTermSubject: BehaviorSubject<string> = new BehaviorSubject('');
+  searchTerm$ = this.searchTermSubject.asObservable();
+
+  public genTemplates$ = combineLatest([this.generalTemplates$, this.searchTerm$]).pipe(
+    map(([templates, searchTerm]) =>
+      templates.filter((template) =>
+        template.chipText.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    ),
+  );
+  public tlos$: Observable<{outcome: LearningOutcome; templates: FeedbackTemplate[]}[]>;
+  public ulos$: Observable<{outcome: LearningOutcome; templates: FeedbackTemplate[]}[]>;
+  public glos$ = combineLatest([
+    this.learningOutcomeService.cache.values,
+    this.feedbackTemplateService.cache.values,
+    this.navigationStack$,
+    this.searchTerm$,
+  ]).pipe(
+    map(([outcomes, templates, navigationStack, searchTerm]) =>
+      outcomes
+        .filter((outcome) => outcome.contextType === null)
+        .map((outcome) => ({
+          outcome: outcome,
+          templates: this.getTemplatesToDisplay(outcome.id, templates, navigationStack, searchTerm),
+        }))
+        .filter((glo) => glo.templates.length > 0),
+    ),
+  );
+
+  constructor(
+    private learningOutcomeService: LearningOutcomeService,
+    private feedbackTemplateService: FeedbackTemplateService,
+    public taskService: TaskService,
+  ) {}
+
+  ngOnInit(): void {
+    const greetingTemplate = new FeedbackTemplate();
+    greetingTemplate.type = 'template';
+    greetingTemplate.chipText = 'Greeting';
+    greetingTemplate.description = "Insert a greeting with the student's name.";
+
+    const summaryTemplate = new FeedbackTemplate();
+    summaryTemplate.type = 'template';
+    summaryTemplate.chipText = 'Summarise feedback';
+    summaryTemplate.description = 'Summarise the given feedback.';
+
+    this.generalTemplatesSubject.next([greetingTemplate, summaryTemplate]);
+  }
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.selectedTemplates = [];
+    this.navigationStackSubject.next(new Map<number, number[]>());
+    this.searchTermSubject.next('');
+
+    if (this.task && this.task.definition) {
+      this.tlos$ = combineLatest([
+        this.task.definition.learningOutcomesCache.values,
+        this.feedbackTemplateService.cache.values,
+        this.navigationStack$,
+        this.searchTerm$,
+      ]).pipe(
+        map(([outcomes, templates, navigationStack, searchTerm]) =>
+          outcomes
+            .map((outcome) => ({
+              outcome: outcome,
+              templates: this.getTemplatesToDisplay(
+                outcome.id,
+                templates,
+                navigationStack,
+                searchTerm,
+              ),
+            }))
+            .filter((tlo) => tlo.templates.length > 0),
+        ),
+      );
+    }
+
+    if (this.task.unit) {
+      this.ulos$ = combineLatest([
+        this.task.unit.learningOutcomesCache.values,
+        this.feedbackTemplateService.cache.values,
+        this.navigationStack$,
+        this.searchTerm$,
+      ]).pipe(
+        map(([outcomes, templates, navigationStack, searchTerm]) =>
+          outcomes
+            .map((outcome) => ({
+              outcome: outcome,
+              templates: this.getTemplatesToDisplay(
+                outcome.id,
+                templates,
+                navigationStack,
+                searchTerm,
+              ),
+            }))
+            .filter((ulo) => ulo.templates.length > 0),
+        ),
+      );
+    }
+  }
+
+  private getTemplatesToDisplay(
+    outcomeId: number,
+    templates: FeedbackTemplate[],
+    navigationStack: Map<number, number[]>,
+    searchTerm: string,
+  ): FeedbackTemplate[] {
+    const allTemplates = templates.filter((template) => template.learningOutcomeId === outcomeId);
+    let templatesToDisplay: FeedbackTemplate[] = [];
+
+    if (navigationStack.get(outcomeId) && navigationStack.get(outcomeId).length > 0) {
+      const outcomeStack = navigationStack.get(outcomeId);
+      const groupId = outcomeStack[outcomeStack.length - 1];
+
+      templatesToDisplay.push(allTemplates.find((template) => template.id === groupId));
+      allTemplates.forEach((template) => {
+        if (template.parentChipId === groupId) {
+          templatesToDisplay.push(template);
+        }
+      });
+    } else {
+      templatesToDisplay = allTemplates.filter((template) => !template.parentChipId);
+    }
+
+    templatesToDisplay = templatesToDisplay.filter((template) =>
+      template.chipText.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+
+    return templatesToDisplay;
+  }
+
+  onSearchTermChange(searchTerm: string): void {
+    this.searchTermSubject.next(searchTerm);
+  }
+
+  @ViewChild('tloSection') tloSection!: ElementRef;
+  @ViewChild('uloSection') uloSection!: ElementRef;
+  @ViewChild('gloSection') gloSection!: ElementRef;
+
+  scrollToSection(event: MatTabChangeEvent) {
+    const sections = [this.tloSection, this.uloSection, this.gloSection];
+    const selectedSection = sections[event.index];
+
+    if (selectedSection) {
+      selectedSection.nativeElement.scrollIntoView({behavior: 'smooth', block: 'start'});
+    }
+  }
+
+  selectTemplate(template: FeedbackTemplate) {
+    if (template.type === 'template') {
+      if (template.chipText === 'Greeting') {
+        template.commentText = `Hi ${this.task.project.student.preferredName}. `;
+      } else if (template.chipText === 'Summarise feedback') {
+        if (!this.selectedTemplates || this.selectedTemplates.length < 1) {
+          return;
+        }
+        template.commentText = 'Summary of the given feedback:';
+        this.selectedTemplates.forEach((t) => {
+          if (!t.summaryText) {
+            return;
+          }
+          template.commentText += '\n- ' + t.summaryText;
+        });
+      } else {
+        this.selectedTemplates.push(template);
+        this.suggestTaskStatus(template);
+      }
+      this.templateSelected.emit(template);
+    } else {
+      const updatedStack = new Map(this.navigationStackSubject.getValue());
+      const outcomeStack = updatedStack.get(template.learningOutcomeId) || [];
+      const index = outcomeStack.indexOf(template.id);
+      if (index === -1) {
+        outcomeStack.push(template.id);
+      } else {
+        outcomeStack.splice(index, 1);
+      }
+      updatedStack.set(template.learningOutcomeId, outcomeStack);
+      this.navigationStackSubject.next(updatedStack);
+    }
+  }
+
+  isTemplateSelected(template: FeedbackTemplate): boolean {
+    return this.selectedTemplates.includes(template);
+  }
+
+  isGroupExpanded(template: FeedbackTemplate): boolean {
+    const stack = this.navigationStackSubject.getValue();
+    const outcomeStack = stack.get(template.learningOutcomeId) || [];
+    const index = outcomeStack.indexOf(template.id);
+    if (index === -1) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  onHoverTemplate(template: FeedbackTemplate) {
+    this.hoveredTemplate = template;
+  }
+
+  private suggestTaskStatus(template: FeedbackTemplate) {
+    if (template.taskStatus && this.task.suggestedTaskStatus) {
+      const currentSeq = this.taskService.statusSeq.get(this.task.suggestedTaskStatus);
+      const templateSeq = this.taskService.statusSeq.get(template.taskStatus);
+      if (templateSeq < currentSeq) {
+        this.task.suggestedTaskStatus = template.taskStatus;
+      }
+    } else {
+      this.task.suggestedTaskStatus = template.taskStatus;
+    }
+  }
+}
diff --git a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.html b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.html
index fa43ccb7ee..a0703f57bb 100644
--- a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.html
+++ b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.html
@@ -1,25 +1,38 @@
-<div id="overflowContainer">
+<div class="mr-3.5 flex justify-end gap-0.5" id="overflowContainer">
   <!-- <button type="button" (click)="react()" matTooltip="React to this comment" mat-icon-button
     aria-label="React to this comment">
     <mat-icon>tag_faces</mat-icon>
   </button> -->
-  <mat-icon
-    type="button"
-    (click)="reply()"
+  <button
+    aria-label="Reply to this comment"
+    class="bubble-action"
     matTooltip="Reply to this comment"
     matTooltipPosition="above"
-    aria-label="Example icon-button with a heart icon"
-  >
-    reply</mat-icon
-  >
-  <mat-icon
     type="button"
-    (click)="delete()"
-    matTooltip="Delete this comment"
+    (click)="reply()"
+  >
+    <mat-icon>reply</mat-icon>
+  </button>
+  <button
+    aria-label="Edit this comment"
+    class="bubble-action"
+    matTooltip="Edit this comment"
     matTooltipPosition="above"
-    aria-label="Example icon-button with a heart icon"
+    type="button"
     [hidden]="!comment.currentUserCanEdit"
+    (click)="edit()"
   >
-    delete</mat-icon
+    <mat-icon>edit</mat-icon>
+  </button>
+  <button
+    aria-label="Delete this comment"
+    class="bubble-action"
+    matTooltip="Delete this comment"
+    matTooltipPosition="above"
+    type="button"
+    [hidden]="!comment.currentUserCanDelete"
+    (click)="delete()"
   >
+    <mat-icon>delete</mat-icon>
+  </button>
 </div>
diff --git a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.scss b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.scss
index 5ff063b4e3..9ee762ba6c 100644
--- a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.scss
+++ b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.scss
@@ -1,3 +1,20 @@
+// Reply, edit and delete used to be bare mat-icon elements carrying a click handler, so
+// nothing here was in the tab order and the surrounding comment could never match
+// :focus-within. They are real buttons now, stripped back to look the way the icons did.
+.bubble-action {
+  padding: 0;
+  border: 0;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+}
+
+.bubble-action:focus-visible {
+  border-radius: 2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 .mat-icon {
   color: #9696969d;
   font-size: 16px;
@@ -6,10 +23,11 @@
   cursor: pointer;
   vertical-align: middle;
   text-align: center;
-  margin-left: 0.3em
+  margin-left: 0.3em;
 }
 
-.mat-icon:hover {
+.bubble-action:hover .mat-icon,
+.bubble-action:focus-visible .mat-icon {
   color: black;
 }
 
diff --git a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.spec.ts b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.spec.ts
index 5bb9a879fa..7e7508a7d2 100644
--- a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.spec.ts
+++ b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.spec.ts
@@ -1,33 +1,31 @@
-// import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-// import { TaskComment } from 'src/app/api/models/doubtfire-model';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {CommentBubbleActionComponent} from './comment-bubble-action.component';
 
-// import { CommentBubbleActionComponent } from './comment-bubble-action.component';
+const emptyProvider = {};
 
-// describe('CommentBubbleActionComponent', () => {
-//   let component: CommentBubbleActionComponent;
-//   let fixture: ComponentFixture<CommentBubbleActionComponent>;
-//   let taskComment: TaskComment;
+describe('CommentBubbleActionComponent', () => {
+  let component: CommentBubbleActionComponent;
+  let fixture: ComponentFixture<CommentBubbleActionComponent>;
 
-//   beforeEach(
-//     waitForAsync(() => {
-//       TestBed.configureTestingModule({
-//         declarations: [CommentBubbleActionComponent],
-//       }).compileComponents();
-//     })
-//   );
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CommentBubbleActionComponent],
+      providers: [{provide: ConfirmationModalService, useValue: emptyProvider}],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(CommentBubbleActionComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
-//   beforeEach(() => {
-//     fixture = TestBed.createComponent(CommentBubbleActionComponent);
-//     component = fixture.componentInstance;
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentBubbleActionComponent);
+    component = fixture.componentInstance;
+  });
 
-//     taskComment = jasmine.createSpyObj('TaskComment', ['currentUserCanEdit']);
-//     taskComment.currentUserCanEdit.and.returnValue(false);
-//     component.comment = taskComment;
-
-//     fixture.detectChanges();
-//   });
-
-//   it('should create', () => {
-//     expect(component).toBeTruthy();
-//   });
-// });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.ts b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.ts
index 4c53949ae3..dc68053e56 100644
--- a/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.ts
+++ b/src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.ts
@@ -1,24 +1,38 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { TaskComment } from 'src/app/api/models/doubtfire-model';
-import { TaskCommentComposerData } from '../../task-comment-composer/task-comment-composer.component';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {TaskCommentComposerData} from '../../task-comment-composer/task-comment-composer.component';
 
 @Component({
   selector: 'comment-bubble-action',
   templateUrl: './comment-bubble-action.component.html',
   styleUrls: ['./comment-bubble-action.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class CommentBubbleActionComponent implements OnInit {
+export class CommentBubbleActionComponent {
   @Input() comment: TaskComment;
   @Input() sharedData: TaskCommentComposerData;
 
-  constructor() {}
-  ngOnInit() {}
+  constructor(private confirmationModalService: ConfirmationModalService) {}
 
   reply() {
+    this.sharedData.editingComment = null;
     this.sharedData.originalComment = this.comment;
   }
 
+  edit() {
+    this.sharedData.originalComment = null;
+    this.sharedData.editingComment = this.comment;
+  }
+
   delete() {
-    this.comment.delete();
+    this.confirmationModalService.show(
+      `Delete comment`,
+      `Are you sure you want to delete this comment?`,
+      () => {
+        this.comment.delete();
+      },
+    );
   }
 }
diff --git a/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.html b/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.html
index 927ee7e260..e5d5e305b7 100644
--- a/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.html
+++ b/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.html
@@ -1,27 +1,32 @@
-<div fxLayout="row" fxLayoutAlign="space-evenly center">
+<div class="flex flex-row items-center justify-evenly">
   @if (comment.assessed) {
-<div fxLayout="column" fxLayoutAlign="space-around center">
-    <hr class="hr-text" [attr.data-content]="message" />
-    <p class="fade-text"><strong> reason:</strong> {{ comment.text }}</p>
-  </div>
-}
+    <div class="flex flex-col items-center justify-around">
+      <hr class="hr-text" [attr.data-content]="message" />
+      <p class="fade-text"><strong> reason:</strong> {{ comment.text }}</p>
+    </div>
+  }
 
   @if (!comment.assessed) {
-<div fxLayout="column" fxLayoutAlign="space-around center">
-    <hr class="hr-fade" />
-    <p>
-      {{ message }} <br />
-      <strong> reason:</strong> {{ comment.text }}
-    </p>
-    @if (isNotStudent) {
-<div fxLayout="row" fxLayoutAlign="space-evenly center">
-      <button (click)="grantExtension()" mat-flat-button color="primary" style="background-color: #43a047">
-        Grant
-      </button>
-      <button (click)="denyExtension()" mat-flat-button color="warn">Deny</button>
+    <div class="flex flex-col items-center justify-around">
+      <hr class="hr-fade" />
+      <p>
+        {{ message }} <br />
+        <strong> reason:</strong> {{ comment.text }}
+      </p>
+      @if (isNotStudent) {
+        <div class="flex flex-row items-center justify-evenly">
+          <button
+            color="primary"
+            mat-flat-button
+            style="background-color: #43a047"
+            (click)="grantExtension()"
+          >
+            Grant
+          </button>
+          <button color="warn" mat-flat-button (click)="denyExtension()">Deny</button>
+        </div>
+      }
+      <hr class="hr-fade" />
     </div>
-}
-    <hr class="hr-fade" />
-  </div>
-}
+  }
 </div>
diff --git a/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.scss b/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.scss
index c2917f902e..1a5626b320 100644
--- a/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.scss
+++ b/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.scss
@@ -32,7 +32,7 @@ hr {
   height: 1.5em;
   opacity: 0.8;
   &:before {
-    content: "";
+    content: '';
     background: linear-gradient(to right, transparent, #9696969d, transparent);
     position: absolute;
     left: 0;
diff --git a/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.ts b/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.ts
index 27d437d928..ccbcd712cb 100644
--- a/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.ts
+++ b/src/app/tasks/task-comments-viewer/extension-comment/extension-comment.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, Input, Inject} from '@angular/core';
-import {TaskComment, Task} from 'src/app/api/models/doubtfire-model';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Task, TaskComment} from 'src/app/api/models/doubtfire-model';
 import {ExtensionComment} from 'src/app/api/models/task-comment/extension-comment';
 import {AlertService} from 'src/app/common/services/alert.service';
 
@@ -7,21 +7,21 @@ import {AlertService} from 'src/app/common/services/alert.service';
   selector: 'extension-comment',
   templateUrl: './extension-comment.component.html',
   styleUrls: ['./extension-comment.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class ExtensionCommentComponent implements OnInit {
+export class ExtensionCommentComponent {
   @Input() comment: ExtensionComment;
   @Input() task: Task;
 
   constructor(private alerts: AlertService) {}
 
-  private handleError(error: any) {
+  private handleError(error: {data: {error: string}}) {
     this.alerts.error('Error: ' + error.data.error, 6000);
   }
 
-  ngOnInit() {}
-
   get message() {
-    const studentName = this.comment.author.name;
+    const studentName = this.comment.author.displayName;
     if (this.comment.assessed) {
       return this.comment.extensionResponse;
     }
@@ -42,7 +42,7 @@ export class ExtensionCommentComponent implements OnInit {
 
   denyExtension() {
     this.comment.deny().subscribe({
-      next: (tc: TaskComment) => {
+      next: (_tc: TaskComment) => {
         this.alerts.success('Extension updated', 2000);
       },
       error: (response) => {
@@ -53,7 +53,7 @@ export class ExtensionCommentComponent implements OnInit {
 
   grantExtension() {
     this.comment.grant().subscribe({
-      next: (tc: TaskComment) => {
+      next: (_tc: TaskComment) => {
         this.alerts.success('Extension updated', 2000);
       },
       error: (response) => {
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-dialog.html b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-dialog.html
index 8ba35a616f..78ae16364b 100644
--- a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-dialog.html
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-dialog.html
@@ -1,75 +1,155 @@
-<button id="dialogCloseButton" mat-icon-button mat-dialog-close aria-label="Close dialog button">
+<button
+  aria-label="Close dialog button"
+  class="float-right"
+  id="dialogCloseButton"
+  mat-dialog-close
+  mat-icon-button
+>
   <mat-icon aria-label="Quit cross icon">close</mat-icon>
 </button>
-<mat-horizontal-stepper id="intelligentDiscussionStepper" [linear]="true" #stepper>
+
+<mat-horizontal-stepper #stepper class="mt-5" id="intelligentDiscussionStepper" [linear]="true">
   <mat-step>
     <ng-template matStepLabel>Introduction</ng-template>
-    <div class="introduction-text">
-      <img id="discussion-splash-image" src="/assets/images/discussion_splash_1.svg" alt="Discussion Splash Image">
-      <p>
-        Your tutor would like to discuss some topics with you regarding this task
-
-        Discussions are a great way for you and your tutor to gauge your understanding of concepts and are an important
-        aspect of your portfolio.
-
-        These discussions are designed to be casual and informal, and will <strong>require a working microphone and
-          speakers.</strong>
 
-        These are timed discussions, <strong> you will have a few minutes from when you hear your tutor's discussion
-          prompt to reply.</strong> <br><br><br><br>
-
-        You should only proceed once you are in a suitably quiet environment.
-      </p>
+    <div class="mt-8 flex flex-col gap-6 md:flex-row md:items-center">
+      <img
+        alt="Discussion Splash Image"
+        class="max-h-[260px] w-full max-w-[360px] self-center"
+        id="discussion-splash-image"
+        src="/assets/images/discussion_splash_1.svg"
+      />
 
+      <div class="space-y-4 text-sm leading-6 text-gray-700">
+        <h2 class="m-0 text-xl font-semibold text-gray-900">
+          Your tutor would like to discuss this task
+        </h2>
+        <p>
+          You will hear one or more short prompts, then respond out loud. The discussion is casual,
+          but it is recorded as part of your task conversation.
+        </p>
+        <p class="rounded-md bg-blue-50 p-3 text-blue-900">
+          You will need a working microphone and speakers. Start only when you are somewhere quiet.
+        </p>
+      </div>
     </div>
-    <div>
-      <button mat-button mat-raised-button matStepperNext color="primary" style="float: right;">Next</button>
+
+    <div class="mt-6 flex justify-end">
+      <button color="primary" mat-button mat-raised-button matStepperNext>Next</button>
     </div>
   </mat-step>
 
   <mat-step [completed]="confirmed">
-    <ng-template matStepLabel>Test everything is working</ng-template>
+    <ng-template matStepLabel>Microphone check</ng-template>
+
     <microphone-tester #testRecorder></microphone-tester>
-    <button mat-button mat-raised-button matStepperNext color="primary" matStepperPrevious>Back</button>
-    <div style="float: right">
-      <mat-checkbox style="margin-right: 20px;" [(ngModel)]="confirmed" matStepperNext required> Ready to go!
-      </mat-checkbox>
-      <button [disabled]="!confirmed" (click)="disableTester()" mat-button mat-raised-button matStepperNext
-        color="primary" matStepperNext>Next</button>
+
+    <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <button color="primary" mat-button mat-raised-button matStepperPrevious>Back</button>
+
+      <div class="flex items-center justify-end gap-4">
+        <mat-checkbox matStepperNext required [(ngModel)]="confirmed">Ready to go</mat-checkbox>
+        <button
+          color="primary"
+          mat-button
+          mat-raised-button
+          matStepperNext
+          [disabled]="!confirmed"
+          (click)="disableTester()"
+        >
+          Next
+        </button>
+      </div>
     </div>
   </mat-step>
 
   <mat-step>
     <ng-template matStepLabel>Discussion</ng-template>
-    <div fxLayout="row" fxLayoutAlign="space-around center" id="discussionRecorderContainer">
 
-      <intelligent-discussion-recorder [task]="data.task" [discussion]="data.dc" #discussionRecorder>
-      </intelligent-discussion-recorder>
-      <div fxLayout="column" fxLayoutAlign="start end">
-        <p id="discussionCountdown">{{guide.text}}</p>
-        <!-- <p>remaining</p> -->
+    <div class="space-y-5">
+      <div class="rounded-lg border border-gray-200 bg-white p-5">
+        <div>
+          <p class="m-0 text-sm font-medium uppercase tracking-wide text-gray-500">
+            Prompt {{ activePromptId + 1 }} of {{ numberOfPrompts }}
+          </p>
+          <h2 class="m-0 mt-1 text-2xl font-semibold text-gray-900">{{ discussionStatusTitle }}</h2>
+          <p class="m-0 mt-2 max-w-2xl text-sm text-gray-600">{{ discussionStatusHint }}</p>
+        </div>
+
+        <div class="mt-5 grid gap-3 sm:grid-cols-2">
+          <div
+            class="rounded-md border p-3"
+            [class.bg-blue-50]="promptLoading || promptPlaying"
+            [class.border-blue-300]="promptLoading || promptPlaying"
+          >
+            <mat-icon class="text-blue-600">
+              {{ promptLoading ? 'hourglass_empty' : promptPlaying ? 'volume_up' : 'hearing' }}
+            </mat-icon>
+            <p class="m-0 mt-2 text-sm font-semibold text-gray-900">Listen</p>
+            <p class="m-0 text-xs text-gray-600">The tutor prompt will play first.</p>
+          </div>
+
+          <div
+            class="rounded-md border p-3"
+            [class.bg-green-50]="responseRecording"
+            [class.border-green-300]="responseRecording"
+          >
+            <mat-icon class="text-green-600">
+              {{ responseRecording ? 'record_voice_over' : 'chat_bubble_outline' }}
+            </mat-icon>
+            <p class="m-0 mt-2 text-sm font-semibold text-gray-900">Respond</p>
+            <p class="m-0 text-xs text-gray-600">Answer after the tone.</p>
+          </div>
+        </div>
+
+        <intelligent-discussion-recorder
+          #discussionRecorder
+          class="mt-4 block"
+          [countdownText]="countdownValue"
+          [discussion]="data.dc"
+          [promptActive]="promptLoading || promptPlaying"
+          [task]="data.task"
+        ></intelligent-discussion-recorder>
       </div>
-    </div>
-    <mat-divider></mat-divider>
-    <button style="margin-bottom: 3em" mat-button mat-stroked-button [hidden]="startedDiscussion" (click)="startDiscussion()">Start
-      discussion</button>
-    <div fxLayout="row" fxLayoutAlign="space-evenly center" [hidden]="!inDiscussion">
-      <h2 class="mat-headline-5">Prompt {{activePromptId+1}} of {{numberOfPrompts}}</h2>
-      <button style="margin-bottom: 3em;" [hidden]="activePromptId === numberOfPrompts " mat-button mat-stroked-button
-        (click)="responseConfirmed($event)">{{activePromptId+1 === numberOfPrompts ? 'Finish' : 'Next Prompt' }}
-      </button>
-    </div>
 
-    <div>
-      <button [disabled]="!discussionComplete" mat-button mat-raised-button matStepperNext color="primary"
-        matStepperNext required style="float: right;">Complete</button>
-      <button [disabled]="startedDiscussion" mat-button mat-raised-button matStepperNext color="primary"
-        matStepperPrevious>Back</button>
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <button
+          color="primary"
+          mat-button
+          mat-raised-button
+          matStepperPrevious
+          [disabled]="startedDiscussion"
+        >
+          Back
+        </button>
+
+        <div class="flex justify-end gap-3">
+          @if (!startedDiscussion) {
+          <button color="primary" mat-raised-button type="button" (click)="startDiscussion()">
+            Start discussion
+          </button>
+          } @else if (!discussionComplete) {
+          <button
+            color="primary"
+            mat-raised-button
+            type="button"
+            [disabled]="!canAdvancePrompt"
+            (click)="responseConfirmed($event)"
+          >
+            {{ activePromptId + 1 === numberOfPrompts ? 'Finish discussion' : 'Next prompt' }}
+          </button>
+          } @else {
+          <button color="primary" mat-raised-button matStepperNext required>Complete</button>
+          }
+        </div>
+      </div>
     </div>
   </mat-step>
 
   <mat-step>
     <ng-template matStepLabel>Done</ng-template>
-    Thank you for completing the discussion.
+    <div class="rounded-lg bg-green-50 p-5 text-green-900">
+      Thank you for completing the discussion.
+    </div>
   </mat-step>
 </mat-horizontal-stepper>
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.html b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.html
index c000036835..8f80d2763b 100644
--- a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.html
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.html
@@ -1,71 +1,73 @@
-<div class="comment-bubble discussion-comment-player">
-  <mat-spinner [hidden]="!loading"></mat-spinner>
+<div class="my-2 max-w-[375px] rounded-lg border border-gray-200 bg-white p-4">
+  <mat-spinner class="mx-auto my-4" [hidden]="!loading"></mat-spinner>
+
   <div [hidden]="loading">
-    <h4 id="discussion-title">
-      Discussion {{ discussion.status }}
-      <mat-icon aria-label="discussion comment status">question_answer</mat-icon>
-    </h4>
-    <mat-divider></mat-divider>
-    <div>
-      @if (discussion.status === 'opened' && isNotStudent) {
-<div>
-        Warning: The student has opened the discussion prompts without sending a response.
-      </div>
-}
+    <div class="mb-3 flex items-center justify-between gap-3">
+      <h4
+        class="m-0 flex items-center gap-2 text-base font-semibold antialiased [text-rendering:optimizeLegibility]"
+        id="discussion-title"
+      >
+        <mat-icon aria-label="discussion comment status" class="text-blue-600">
+          question_answer
+        </mat-icon>
+        Discussion {{ discussion.status }}
+      </h4>
+
+      <span class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
+        {{ discussion.numberOfPrompts }} prompt{{ discussion.numberOfPrompts === 1 ? '' : 's' }}
+      </span>
+    </div>
+
+    <mat-divider class="mb-4"></mat-divider>
+
+    @if (discussion.status === 'opened' && isNotStudent) {
       <div
-        fxLayout="column"
-        fxLayoutAlign="space-around center"
-        [hidden]="!responseAvailable"
-        class="audio-comment-container"
+        class="mb-4 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800"
       >
-        <audio-player #player></audio-player>
-        <mat-button-toggle-group value="response">
-          <mat-button-toggle
-            matTooltip="Plays the first discussion prompt"
-            matTooltipPosition="above"
-            (click)="setPromptTrack('prompt', 0)"
-            aria-label="Prompt toggle"
-          >
-            P1
-          </mat-button-toggle>
-          @if (discussion.numberOfPrompts > 1) {
-<mat-button-toggle
-            matTooltip="Plays the second discussion prompt"
-            matTooltipPosition="above"
-           
-            (click)="setPromptTrack('prompt', 1)"
-            aria-label="Prompt toggle"
-          >
-            P2
-          </mat-button-toggle>
-}
-          @if (discussion.numberOfPrompts > 2) {
-<mat-button-toggle
-            matTooltip="Plays the third discussion prompt"
-            matTooltipPosition="above"
-            (click)="setPromptTrack('prompt', 2)"
-           
-            aria-label="Prompt toggle"
-          >
-            P3
-          </mat-button-toggle>
-}
-          <mat-button-toggle
-            matTooltip="Plays the prompts, followed by the students response"
-            matTooltipPosition="above"
-            value="response"
-            (click)="setPromptTrack('response')"
-            aria-label="Response Toggle"
-          >
-            Response
-          </mat-button-toggle>
-        </mat-button-toggle-group>
+        The student has opened the discussion prompts without sending a response.
       </div>
-    </div>
+    }
 
-    <div [hidden]="responseAvailable || isNotStudent">
-      <p>Your tutor would like to discuss this task with you.</p>
-      <button id="startDiscussionBtn" mat-flat-button (click)="beginDiscussion()">Begin</button>
-    </div>
+    @if (isNotStudent || responseAvailable) {
+      <audio-player #player class="hidden" (playingChange)="audioPlaying = $event"></audio-player>
+
+      <mat-action-list>
+        <h3 mat-subheader>Discussion audio</h3>
+
+        @for (promptNumber of promptNumbers; track promptNumber) {
+          <mat-list-item class="max-h-10 cursor-pointer" (click)="togglePromptTrack(promptNumber)">
+            <mat-icon class="text-black" matListItemIcon>
+              {{
+                isTrackPlaying(promptTrackKey(promptNumber)) ? 'stop_circle' : 'play_arrow_rounded'
+              }}
+            </mat-icon>
+            <span matListItemTitle>Prompt {{ promptNumber + 1 }}</span>
+          </mat-list-item>
+        }
+
+        @if (responseAvailable) {
+          <mat-list-item class="cursor-pointer" (click)="toggleResponseTrack()">
+            <mat-icon class="text-black" matListItemIcon>
+              {{ isTrackPlaying('response') ? 'stop_circle' : 'record_voice_over' }}
+            </mat-icon>
+            <span matListItemTitle>Student response</span>
+            <span class="whitespace-normal" matListItemLine>
+              Recorded response to the prompt sequence
+            </span>
+          </mat-list-item>
+        }
+      </mat-action-list>
+    }
+
+    @if (!responseAvailable && !isNotStudent) {
+      <div class="rounded-md bg-blue-50 p-4">
+        <p class="mb-4 text-sm text-blue-900">
+          Your tutor would like to discuss this task with you.
+        </p>
+        <button color="primary" id="startDiscussionBtn" mat-flat-button (click)="beginDiscussion()">
+          Begin discussion
+        </button>
+      </div>
+    }
   </div>
 </div>
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.scss b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.scss
index 58ff4d0db0..e69de29bb2 100644
--- a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.scss
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.scss
@@ -1,93 +0,0 @@
-:host mat-divider {
-  margin-bottom: 20px;
-}
-
-#discussion-title {
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-mat-divider {
-  background-color: white;
-}
-
-#startDiscussionBtn {
-  margin: 20px;
-  float: right;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-.mat-button-toggle-group {
-  border-radius: 12px;
-}
-
-.mat-mdc-progress-bar {
-  width: 100%;
-  margin-bottom: 1em;
-}
-
-audio-player {
-  width: 100%;
-}
-
-microphone-tester .btn-circle-xl {
-  position: inherit;
-}
-
-:host .mat-mdc-dialog-container {
-  max-width: 800px !important;
-}
-
-:host #intelligentDiscussionStepper {
-  margin-top: 20px;
-}
-
-:host .introduction-text {
-  margin-top: 4em;
-  display: inline-flex;
-}
-
-:host img#discussion-splash-image {
-  float: left;
-  margin: auto;
-  max-width: 800px;
-  max-height: 300px;
-  vertical-align: middle;
-}
-
-:host .introduction-text p {
-  font-family: "Helvetica Neue", "Segoe UI", "Helvetica", "Arial", "sans-serif";
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1.1;
-  font-size: 1.1em;
-  text-align: justify;
-  margin-left: 3em;
-  margin-top: 0;
-  float: right;
-}
-
-:host #dialogCloseButton {
-  float: right;
-  margin-bottom: 20px;
-  color: red;
-}
-
-:host #discussionReadout {
-  overflow: hidden;
-}
-
-:host #discussionRecorderContainer {
-  line-height: 1.2em;
-  font-family: "Helvetica Neue", "Segoe UI", "Helvetica", "Arial", "sans-serif";
-
-  p {
-    font-size: 1.2em;
-  }
-
-  p#discussionCountdown {
-    font-size: 3em;
-    font-weight: bold;
-  }
-}
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.spec.ts b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.spec.ts
new file mode 100644
index 0000000000..070a96755f
--- /dev/null
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.spec.ts
@@ -0,0 +1,98 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDialog} from '@angular/material/dialog';
+import {DiscussionComment, Task, TaskCommentService} from 'src/app/api/models/doubtfire-model';
+import {AudioPlayerComponent} from 'src/app/common/audio-player/audio-player.component';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {IntelligentDiscussionPlayerComponent} from './intelligent-discussion-player.component';
+
+describe('IntelligentDiscussionPlayerComponent', () => {
+  let component: IntelligentDiscussionPlayerComponent;
+  let fixture: ComponentFixture<IntelligentDiscussionPlayerComponent>;
+  let fileDownloader: {downloadBlob: ReturnType<typeof vi.fn>};
+  let audioPlayer: {
+    setSrc: ReturnType<typeof vi.fn>;
+    play: ReturnType<typeof vi.fn>;
+    stop: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(async () => {
+    fileDownloader = {
+      downloadBlob: vi.fn((url: string, onSuccess: (blobUrl: string) => void) => {
+        onSuccess(`blob:${url}`);
+      }),
+    };
+    audioPlayer = {
+      setSrc: vi.fn(),
+      play: vi.fn(),
+      stop: vi.fn(),
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [IntelligentDiscussionPlayerComponent],
+      providers: [
+        {provide: MatDialog, useValue: {open: vi.fn()}},
+        {provide: TaskCommentService, useValue: {}},
+        {provide: FileDownloaderService, useValue: fileDownloader},
+        {provide: AlertService, useValue: {error: vi.fn()}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(IntelligentDiscussionPlayerComponent, {set: {template: ''}})
+      .compileComponents();
+
+    fixture = TestBed.createComponent(IntelligentDiscussionPlayerComponent);
+    component = fixture.componentInstance;
+    component.discussion = {
+      id: 69,
+      numberOfPrompts: 2,
+      status: 'complete',
+      responseUrl: '/discussion/response',
+      generateDiscussionPromptUrl: (promptNumber: number) => `/discussion/prompt/${promptNumber}`,
+    } as unknown as DiscussionComment;
+    component.task = {unit: {currentUserIsStaff: true}} as Task;
+    component.audioPlayer = audioPlayer as unknown as AudioPlayerComponent;
+  });
+
+  it('downloads and plays a selected prompt', () => {
+    component.togglePromptTrack(1);
+
+    expect(fileDownloader.downloadBlob).toHaveBeenCalledWith(
+      '/discussion/prompt/1',
+      expect.any(Function),
+      expect.any(Function),
+    );
+    expect(audioPlayer.setSrc).toHaveBeenCalledWith('blob:/discussion/prompt/1');
+    expect(audioPlayer.play).toHaveBeenCalled();
+    expect(component.selectedTrackLabel).toEqual('Prompt 2');
+    expect(component.selectedTrackKey).toEqual('prompt-1');
+  });
+
+  it('stops the current prompt instead of downloading it again', () => {
+    component.selectedTrackKey = 'prompt-1';
+    component.audioPlaying = true;
+
+    component.togglePromptTrack(1);
+
+    expect(audioPlayer.stop).toHaveBeenCalled();
+    expect(fileDownloader.downloadBlob).not.toHaveBeenCalled();
+  });
+
+  it('only downloads and plays the response when requested', () => {
+    expect(fileDownloader.downloadBlob).not.toHaveBeenCalled();
+
+    component.toggleResponseTrack();
+
+    expect(fileDownloader.downloadBlob).toHaveBeenCalledWith(
+      '/discussion/response',
+      expect.any(Function),
+      expect.any(Function),
+    );
+    expect(audioPlayer.setSrc).toHaveBeenCalledWith('blob:/discussion/response');
+    expect(audioPlayer.play).toHaveBeenCalled();
+    expect(component.selectedTrackLabel).toEqual('Response');
+    expect(component.selectedTrackKey).toEqual('response');
+  });
+});
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.ts b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.ts
index a862e70dd8..ec89ec49c8 100644
--- a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.ts
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-player.component.ts
@@ -1,30 +1,46 @@
-import { Component, Inject, OnInit, ViewChild, Input, AfterViewInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import { timer, Subscription } from 'rxjs';
-import { IntelligentDiscussionPlayerService } from './intelligent-discussion-player.service';
 import moment from 'moment';
-import { MicrophoneTesterComponent } from 'src/app/common/audio-recorder/audio/microphone-tester/microphone-tester.component';
-import { IntelligentDiscussionRecorderComponent } from './intelligent-discussion-recorder/intelligent-discussion-recorder.component';
-import { AudioPlayerComponent } from 'src/app/common/audio-player/audio-player.component';
-import { Task, DiscussionComment } from 'src/app/api/models/doubtfire-model';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {Subscription, timer} from 'rxjs';
+import {DiscussionComment, Task} from 'src/app/api/models/doubtfire-model';
+import {AudioPlayerComponent} from 'src/app/common/audio-player/audio-player.component';
+import {MicrophoneTesterComponent} from 'src/app/common/audio-recorder/audio/microphone-tester/microphone-tester.component';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {IntelligentDiscussionPlayerService} from './intelligent-discussion-player.service';
+import {IntelligentDiscussionRecorderComponent} from './intelligent-discussion-recorder/intelligent-discussion-recorder.component';
+
 @Component({
   selector: 'intelligent-discussion-player',
   templateUrl: './intelligent-discussion-player.component.html',
   styleUrls: ['./intelligent-discussion-player.component.scss'],
   providers: [IntelligentDiscussionPlayerService],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class IntelligentDiscussionPlayerComponent implements AfterViewInit {
+export class IntelligentDiscussionPlayerComponent {
   @Input() discussion: DiscussionComment;
   @Input() task: Task;
   @ViewChild('player') audioPlayer: AudioPlayerComponent;
   loading: boolean = false;
   audioProgress: number = 0;
+  selectedTrackLabel = 'Response';
+  selectedTrackKey = 'response';
+  audioPlaying = false;
 
-  constructor(public dialog: MatDialog, private discussionService: IntelligentDiscussionPlayerService) {}
-
-  ngAfterViewInit() {
-    this.setPromptTrack('response');
-  }
+  constructor(
+    public dialog: MatDialog,
+    private discussionService: IntelligentDiscussionPlayerService,
+    private fileDownloader: FileDownloaderService,
+    private alerts: AlertService,
+  ) {}
 
   get responseAvailable() {
     return this.discussion.status === 'complete';
@@ -34,70 +50,136 @@ export class IntelligentDiscussionPlayerComponent implements AfterViewInit {
     return this.task.unit.currentUserIsStaff;
   }
 
+  get promptNumbers(): number[] {
+    return Array.from({length: this.discussion.numberOfPrompts}, (_, index) => index);
+  }
+
+  promptTrackKey(promptNumber: number): string {
+    return `prompt-${promptNumber}`;
+  }
+
+  isTrackPlaying(trackKey: string): boolean {
+    return this.selectedTrackKey === trackKey && this.audioPlaying;
+  }
+
+  togglePromptTrack(promptNumber: number): void {
+    const trackKey = this.promptTrackKey(promptNumber);
+    if (this.isTrackPlaying(trackKey)) {
+      this.audioPlayer?.stop();
+      return;
+    }
+
+    this.setPromptTrack('prompt', promptNumber);
+  }
+
+  toggleResponseTrack(): void {
+    if (this.isTrackPlaying('response')) {
+      this.audioPlayer?.stop();
+      return;
+    }
+
+    this.setPromptTrack('response');
+  }
+
   setPromptTrack(track: string, promptNumber?: number) {
-    let url: string = '';
+    let url: string;
     if (track === 'prompt') {
       url = this.discussion.generateDiscussionPromptUrl(promptNumber);
+      this.selectedTrackLabel = `Prompt ${promptNumber + 1}`;
+      this.selectedTrackKey = this.promptTrackKey(promptNumber);
     } else {
       url = this.discussion.responseUrl;
+      this.selectedTrackLabel = 'Response';
+      this.selectedTrackKey = 'response';
     }
 
-    this.audioPlayer.setSrc(url);
+    this.fileDownloader.downloadBlob(
+      url,
+      (blobUrl) => {
+        if (!this.audioPlayer) {
+          return;
+        }
+
+        this.audioPlayer.setSrc(blobUrl);
+        this.audioPlayer.play();
+      },
+      (error) => {
+        this.alerts.error(`Error loading discussion audio. ${error}`, 6000);
+      },
+    );
   }
 
   beginDiscussion(): void {
-    let dialogRef: MatDialogRef<IntelligentDiscussionDialog, any>;
-
-    dialogRef = this.dialog.open(IntelligentDiscussionDialog, {
-      data: {
-        dc: this.discussion,
-        task: this.task,
-        audioRef: this.audioPlayer.audio,
+    const dialogRef: MatDialogRef<IntelligentDiscussionDialog, void> = this.dialog.open(
+      IntelligentDiscussionDialog,
+      {
+        data: {
+          dc: this.discussion,
+          task: this.task,
+          audioRef: new Audio(),
+        },
+        maxWidth: '800px',
+        disableClose: true,
       },
-      maxWidth: '800px',
-      disableClose: true,
-    });
+    );
 
-    dialogRef.afterOpened().subscribe((result: any) => {});
+    dialogRef.afterOpened().subscribe();
 
-    dialogRef.afterClosed().subscribe((result: any) => {});
+    dialogRef.afterClosed().subscribe();
   }
 }
 
 // The Dialog Component
-// eslint-disable-next-line max-classes-per-file
+
 @Component({
   selector: 'intelligent-discussion-dialog',
   templateUrl: 'intelligent-discussion-dialog.html',
   styleUrls: ['./intelligent-discussion-player.component.scss'],
   providers: [IntelligentDiscussionPlayerService],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class IntelligentDiscussionDialog implements OnInit {
+export class IntelligentDiscussionDialog implements OnDestroy {
   confirmed = false;
   timerText: string = '15m:00s';
   ticks: number = 0;
   startedDiscussion = false;
   inDiscussion = false;
   discussionComplete: boolean = false;
+  promptLoading = false;
+  promptPlaying = false;
+  responseRecording = false;
+  countdownValue: number = null;
   count: number = 3 * 60 * 1000; // 3 minutes
   activePromptId: number = 0;
   counter: Subscription;
-  guide = { text: 'Click start to begin' };
+  private countdownTimer: ReturnType<typeof setInterval>;
+  guide = {text: 'Click start to begin'};
+  private promptBlobUrl: string;
 
-  @ViewChild('testRecorder', { static: true }) testRecorder: MicrophoneTesterComponent;
-  @ViewChild('discussionRecorder', { static: true }) discussionRecorder: IntelligentDiscussionRecorderComponent;
+  @ViewChild('testRecorder', {static: true}) testRecorder: MicrophoneTesterComponent;
+  @ViewChild('discussionRecorder', {static: true})
+  discussionRecorder: IntelligentDiscussionRecorderComponent;
 
   constructor(
     public dialogRef: MatDialogRef<IntelligentDiscussionDialog>,
     private discussionService: IntelligentDiscussionPlayerService,
-    @Inject(MAT_DIALOG_DATA) public data: {
+    private fileDownloader: FileDownloaderService,
+    private alerts: AlertService,
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
       dc: DiscussionComment;
       task: Task;
       audioRef: HTMLAudioElement;
-    }
+    },
   ) {}
 
-  ngOnInit() {}
+  ngOnDestroy(): void {
+    this.counter?.unsubscribe();
+    this.clearCountdown();
+    this.data.audioRef.pause();
+    this.releasePromptBlob();
+  }
 
   disableTester() {
     this.testRecorder.stopRecording();
@@ -111,68 +193,163 @@ export class IntelligentDiscussionDialog implements OnInit {
     return this.data.dc.numberOfPrompts;
   }
 
+  get canAdvancePrompt(): boolean {
+    return this.inDiscussion && this.responseRecording;
+  }
+
+  get discussionStatusTitle(): string {
+    if (this.countdownValue) {
+      return 'Starting discussion';
+    }
+    if (!this.startedDiscussion) {
+      return 'Ready when you are';
+    }
+    if (this.promptLoading) {
+      return 'Loading prompt';
+    }
+    if (this.promptPlaying) {
+      return `Listening to prompt ${this.activePromptId + 1}`;
+    }
+    if (this.responseRecording) {
+      return 'Respond now';
+    }
+    if (this.discussionComplete) {
+      return 'Discussion complete';
+    }
+    return 'Discussion in progress';
+  }
+
+  get discussionStatusHint(): string {
+    if (this.countdownValue) {
+      return 'Get ready. Recording will begin when the countdown finishes.';
+    }
+    if (!this.startedDiscussion) {
+      return 'When you start, your microphone will begin recording and the first prompt will play.';
+    }
+    if (this.promptLoading) {
+      return 'Getting the next tutor prompt ready.';
+    }
+    if (this.promptPlaying) {
+      return 'Listen carefully. Wait for the tone before responding.';
+    }
+    if (this.responseRecording) {
+      return 'Speak your answer now. When you are ready, move to the next prompt or finish the discussion.';
+    }
+    if (this.discussionComplete) {
+      return 'Your response has been recorded. Select Complete to close out the discussion.';
+    }
+    return '';
+  }
+
   finishDiscussion() {
     this.discussionComplete = true;
     this.inDiscussion = false;
-    this.guide = { text: '' };
+    this.promptLoading = false;
+    this.promptPlaying = false;
+    this.responseRecording = false;
+    this.clearCountdown();
+    this.guide = {text: ''};
     this.discussionRecorder.stopRecording();
     this.data.audioRef.pause();
     this.data.audioRef.currentTime = 0;
-    this.counter.unsubscribe();
+    this.counter?.unsubscribe();
     this.data.dc.status = 'complete';
   }
 
   startDiscussion() {
     if (!this.startedDiscussion) {
-      this.setPrompt();
-
-      // start recording
-      this.discussionRecorder.startRecording();
-
-      // start the discussion
       this.startedDiscussion = true;
       this.inDiscussion = true;
+      this.startCountdown();
+    }
+  }
 
-      // get the cutoff date from the server
-      // For now this is stubbed as 15 minutes from now.
-      const discussionCutoff = moment().add(15, 'minutes');
+  private beginRecordingAndFirstPrompt(): void {
+    // start recording
+    this.discussionRecorder.startRecording();
 
-      this.counter = timer(0, 1000).subscribe((val) => {
-        let difference = discussionCutoff.diff(moment());
-        if (difference <= 0) {
-          difference = 0;
-        }
-        this.timerText = moment.utc(difference).format('mm[m]:ss[s]');
-        this.ticks = val;
+    this.setPrompt();
 
-        if (difference === 0) {
-          this.inDiscussion = false;
-          this.counter.unsubscribe();
-        }
-      });
+    // get the cutoff date from the server
+    // For now this is stubbed as 15 minutes from now.
+    const discussionCutoff = moment().add(15, 'minutes');
+
+    this.counter = timer(0, 1000).subscribe((val) => {
+      let difference = discussionCutoff.diff(moment());
+      if (difference <= 0) {
+        difference = 0;
+      }
+      this.timerText = moment.utc(difference).format('mm[m]:ss[s]');
+      this.ticks = val;
+
+      if (difference === 0) {
+        this.inDiscussion = false;
+        this.counter.unsubscribe();
+      }
+    });
+  }
+
+  private startCountdown(): void {
+    this.countdownValue = 3;
+    this.guide.text = 'Starting discussion';
+
+    this.countdownTimer = setInterval(() => {
+      this.countdownValue--;
+
+      if (this.countdownValue <= 0) {
+        this.clearCountdown();
+        this.beginRecordingAndFirstPrompt();
+      }
+    }, 1000);
+  }
+
+  private clearCountdown(): void {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+      this.countdownTimer = undefined;
     }
+    this.countdownValue = null;
   }
 
   setPrompt() {
-    this.data.audioRef.src = this.data.dc.generateDiscussionPromptUrl(
-      this.activePromptId
+    this.promptLoading = true;
+    this.promptPlaying = false;
+    this.responseRecording = false;
+    this.guide.text = 'Loading prompt';
+    this.data.audioRef.pause();
+    this.releasePromptBlob();
+
+    this.fileDownloader.downloadBlob(
+      this.data.dc.generateDiscussionPromptUrl(this.activePromptId),
+      (blobUrl) => {
+        this.promptBlobUrl = blobUrl;
+        this.data.audioRef.src = blobUrl;
+        this.guide.text = 'Listening to prompt';
+        this.promptLoading = false;
+        this.promptPlaying = true;
+        this.data.audioRef.load();
+        this.data.audioRef.play();
+        this.data.audioRef.onended = () => {
+          this.promptPlaying = false;
+          const audio = new Audio();
+          audio.src = '/assets/sounds/discussion-start-signal.wav';
+          audio.load();
+          audio.play();
+          this.guide.text = 'Start responding';
+          this.responseRecording = true;
+        };
+      },
+      (error) => {
+        this.promptLoading = false;
+        this.promptPlaying = false;
+        this.responseRecording = false;
+        this.guide.text = 'Unable to load prompt';
+        this.alerts.error(`Error loading discussion prompt. ${error}`, 6000);
+      },
     );
-    this.guide.text = 'Listening to prompt';
-    this.data.audioRef.load();
-    this.data.audioRef.play();
-    const _this = this;
-    this.data.audioRef.addEventListener('ended', () => {
-      setTimeout(() => {
-        const audio = new Audio();
-        audio.src = '/assets/sounds/discussion-start-signal.wav';
-        audio.load();
-        audio.play();
-        _this.guide.text = 'Start responding';
-      }, 400);
-    });
   }
 
-  responseConfirmed(e: any) {
+  responseConfirmed(_event: Event) {
     if (this.activePromptId !== this.numberOfPrompts - 1) {
       this.activePromptId++;
       this.setPrompt();
@@ -180,4 +357,11 @@ export class IntelligentDiscussionDialog implements OnInit {
       this.finishDiscussion();
     }
   }
+
+  private releasePromptBlob(): void {
+    if (this.promptBlobUrl) {
+      this.fileDownloader.releaseBlob(this.promptBlobUrl);
+      this.promptBlobUrl = undefined;
+    }
+  }
 }
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.css b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.css
index 7d53ba95fc..e69de29bb2 100644
--- a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.css
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.css
@@ -1,4 +0,0 @@
-:host #mainDiscussionRecorderVisualiser {
-  height: 100px;
-  width: 300px;
-}
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.html b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.html
index cdd5382198..a7c0bc6331 100644
--- a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.html
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.html
@@ -1,7 +1,37 @@
-<div class="audio-recorder">
-  <p [hidden]="canRecord">Audio recording <br> only supported in modern versions of Chrome, Firefox and Safari.</p>
-  <mat-spinner class="send-audio-spinner" [diameter]="72" [strokeWidth]="2" [hidden]="!isSending"></mat-spinner>
-  <div id="mainDIscussionVisualiser" [hidden]="!canRecord || isSending">
-    <canvas class="audio-visualiser" id="mainDiscussionRecorderVisualiser"></canvas>
+<div>
+  <p class="rounded-md bg-amber-50 p-3 text-sm text-amber-800" [hidden]="canRecord">
+    Audio recording is only supported in modern versions of Chrome, Firefox and Safari.
+  </p>
+  <div
+    class="relative overflow-hidden rounded-lg border"
+    id="mainDIscussionVisualiser"
+    [class.bg-blue-50]="!isRecording"
+    [class.bg-gray-100]="isRecording && promptActive"
+    [class.bg-red-50]="isRecording && !promptActive"
+    [class.border-blue-100]="!isRecording"
+    [class.border-gray-200]="isRecording && promptActive"
+    [class.border-red-100]="isRecording && !promptActive"
+    [hidden]="!canRecord"
+  >
+    <canvas
+      #mainDiscussionRecorderVisualiser
+      class="h-[72px] w-full"
+      id="mainDiscussionRecorderVisualiser"
+    ></canvas>
+    <div
+      class="pointer-events-none absolute inset-0 bg-gradient-to-r from-white/50 via-transparent to-white/50"
+    ></div>
+    <div
+      class="absolute inset-0 flex items-center justify-center text-4xl font-semibold text-blue-700"
+      [hidden]="!countdownText"
+    >
+      {{ countdownText }}
+    </div>
+    <div
+      class="absolute inset-0 flex items-center justify-center bg-white/70"
+      [hidden]="!isSending"
+    >
+      <mat-spinner [diameter]="36" [strokeWidth]="2"></mat-spinner>
+    </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.ts b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.ts
index 0e22045160..0450b050a7 100644
--- a/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.ts
+++ b/src/app/tasks/task-comments-viewer/intelligent-discussion-player/intelligent-discussion-recorder/intelligent-discussion-recorder.component.ts
@@ -1,30 +1,47 @@
-import { Component, Inject, AfterViewInit, Input } from '@angular/core';
-import { BaseAudioRecorderComponent } from 'src/app/common/audio-recorder/audio/base-audio-recorder';
-import { IntelligentDiscussionPlayerService } from '../intelligent-discussion-player.service';
-import { audioRecorderService } from 'src/app/ajs-upgraded-providers';
-import { DiscussionComment, Task } from 'src/app/api/models/doubtfire-model';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import {DiscussionComment, Task} from 'src/app/api/models/doubtfire-model';
+import {TaskCommentService} from 'src/app/api/models/doubtfire-model';
+import {
+  BaseAudioRecorderComponent,
+  RecordingEvent,
+} from 'src/app/common/audio-recorder/audio/base-audio-recorder';
+import {MediaRecorderService} from 'src/app/common/services/recorder-service';
 
 @Component({
   selector: 'intelligent-discussion-recorder',
   templateUrl: './intelligent-discussion-recorder.component.html',
   styleUrls: ['./intelligent-discussion-recorder.component.css'],
+  providers: [MediaRecorderService],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class IntelligentDiscussionRecorderComponent extends BaseAudioRecorderComponent implements AfterViewInit {
+export class IntelligentDiscussionRecorderComponent
+  extends BaseAudioRecorderComponent
+  implements AfterViewInit
+{
+  @Input() countdownText: number;
   @Input() discussion: DiscussionComment;
+  @Input() promptActive = false;
   @Input() task: Task;
+  @ViewChild('mainDiscussionRecorderVisualiser') canvasRef: ElementRef<HTMLCanvasElement>;
   canvas: HTMLCanvasElement;
   canvasCtx: CanvasRenderingContext2D;
-  isSending: boolean;
+  isSending: boolean = false;
 
   constructor(
-    @Inject(audioRecorderService) mediaRecorderService: any,
-    @Inject(IntelligentDiscussionPlayerService) private dps: any
+    private mediaRecorderService: MediaRecorderService,
+    private taskCommentService: TaskCommentService,
   ) {
     super(mediaRecorderService);
   }
 
-  ngOnInit() {}
-
   ngAfterViewInit() {
     if (this.canRecord) {
       this.init();
@@ -33,11 +50,12 @@ export class IntelligentDiscussionRecorderComponent extends BaseAudioRecorderCom
 
   init(): void {
     super.init();
-    this.canvas = document.getElementById('mainDiscussionRecorderVisualiser') as HTMLCanvasElement;
+    this.canvas = this.canvasRef.nativeElement;
     this.canvasCtx = this.canvas.getContext('2d');
+    this.clearWaveform();
   }
 
-  onNewRecording(evt: any): void {
+  onNewRecording(evt: RecordingEvent): void {
     this.blob = evt.detail.recording.blob;
     this.recordingAvailable = true;
     this.sendRecording();
@@ -48,23 +66,78 @@ export class IntelligentDiscussionRecorderComponent extends BaseAudioRecorderCom
     if (this.isRecording) {
       this.mediaRecorder.stopRecording();
       this.isRecording = false;
+      this.clearWaveform();
     }
   }
 
   sendRecording() {
     if (this.blob && this.blob.size > 0) {
-      this.dps.addDiscussionReply(
-        this.task,
-        this.discussion.id,
-        this.blob,
-        () => {
+      this.isSending = true;
+      this.taskCommentService.postDiscussionReply(this.discussion, this.blob).subscribe({
+        next: () => {
           this.isSending = false;
         },
-        (failure: { data: { error: any } }) => {
+        error: (failure: {data: {error: string}}) => {
           console.error(failure);
-        }
-      );
+          this.isSending = false;
+        },
+      });
       this.blob = {} as Blob;
     }
   }
+
+  protected visualise(): void {
+    const draw = () => {
+      let WIDTH: number;
+      let HEIGHT: number;
+
+      this.canvas.width = 1;
+      this.canvas.height = 1;
+
+      this.canvas.width = WIDTH = this.canvas.clientWidth;
+      this.canvas.height = HEIGHT = this.canvas.clientHeight;
+      requestAnimationFrame(draw);
+      analyser.getByteTimeDomainData(dataArray);
+      analyser.getByteFrequencyData(dataArray);
+
+      this.canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+      const barWidth = 2;
+      const barGap = 2;
+
+      for (let i = 0; i < WIDTH; i++) {
+        const barX = i * (barWidth + barGap);
+        const barY = HEIGHT / 2;
+        const barHeight = -(dataArray[i] / 8) + 1;
+        this.canvasCtx.fillStyle = this.waveformColour;
+        this.canvasCtx.fillRect(barX, barY, barWidth, barHeight);
+        this.canvasCtx.fillRect(barX, barY - barHeight, barWidth, barHeight);
+      }
+    };
+
+    const analyser = this.mediaRecorder.analyserNode;
+    analyser.fftSize = 2048;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    draw();
+  }
+
+  private get waveformColour(): string {
+    if (!this.isRecording) {
+      return '#2563eb';
+    }
+
+    return this.promptActive ? '#b91c1c66' : '#dc2626';
+  }
+
+  private clearWaveform(): void {
+    if (!this.canvas || !this.canvasCtx) {
+      return;
+    }
+
+    this.canvas.width = this.canvas.clientWidth;
+    this.canvas.height = this.canvas.clientHeight;
+
+    this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
 }
diff --git a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.html b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.html
index 729b8016e3..9f759eed40 100644
--- a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.html
+++ b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.html
@@ -1,8 +1,10 @@
 <a (click)="openCommentsModal()">
   @if (comment.commentType === 'image' && resourceUrl) {
-<img [src]="resourceUrl | safe" width="100%" height="100%" />
-}
+    <img alt="Image attachment preview" height="100%" width="100%" [src]="resourceUrl | safe" />
+  }
   @if (comment.commentType === 'pdf') {
-<p><i class="fa fa-file-pdf-o"></i> view pdf</p>
-}
+    <div class="flex cursor-pointer items-center gap-1 text-formatif-blue hover:text-blue-800">
+      <mat-icon class="">picture_as_pdf</mat-icon> view pdf
+    </div>
+  }
 </a>
diff --git a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
index c2b6e6761e..62b41df3a1 100644
--- a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
+++ b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
@@ -1,13 +1,15 @@
-import { Component, OnInit, Input, Inject, OnDestroy } from '@angular/core';
-import { commentsModal } from 'src/app/ajs-upgraded-providers';
-import { Project, TaskComment, Task } from 'src/app/api/models/doubtfire-model';
-import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Project, Task, TaskComment} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {CommentsModalService} from 'src/app/common/modals/comments-modal/comments-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'pdf-image-comment',
   templateUrl: './pdf-image-comment.component.html',
   styleUrls: [],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class PdfImageCommentComponent implements OnInit, OnDestroy {
   @Input() comment: TaskComment;
@@ -18,12 +20,14 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
 
   constructor(
     private alerts: AlertService,
-    @Inject(commentsModal) private commentsModalRef: any,
+    private commentsModalRef: CommentsModalService,
     private fileDownloaderService: FileDownloaderService,
   ) {}
 
   ngOnInit() {
-    if (this.comment.commentType === 'image') this.downloadCommentResource();
+    if (this.comment.commentType === 'image') {
+      this.downloadCommentResource();
+    }
   }
 
   ngOnDestroy(): void {
@@ -38,17 +42,19 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
 
     this.fileDownloaderService.downloadBlob(
       url,
-      ((blobUrl, response) => {
+      ((blobUrl, _response) => {
         this.resourceUrl = blobUrl;
-        if (fn) fn(blobUrl);
+        if (fn) {
+          fn(blobUrl);
+        }
       }).bind(this),
-      ((error) => this.alerts.error(`Unable to download image comment. ${error}`, 6000)).bind(this)
+      ((error) => this.alerts.error(`Unable to download image comment. ${error}`, 6000)).bind(this),
     );
   }
 
   public openCommentsModal() {
     if (this.resourceUrl) {
-      this.commentsModalRef.show(this.resourceUrl, this.comment.commentType);
+      this.commentsModalRef.show(this.resourceUrl, this.comment);
     } else {
       this.downloadCommentResource(this.openCommentsModal.bind(this));
     }
diff --git a/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.html b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.html
new file mode 100644
index 0000000000..c9c39db6a6
--- /dev/null
+++ b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.html
@@ -0,0 +1,37 @@
+<hr class="hr-text my-2" data-content="Knowledge Check Summary" [hidden]="!comment.firstInSeries" />
+<div class="flex w-full flex-col justify-center">
+  @if (!user.isStaff && !task.definition.scormAllowReview) {
+    <div class="markdown-to-html m-auto my-0.5 text-center" [innerHTML]="comment.text"></div>
+  } @else {
+    <div class="markdown-to-html grow text-center" [innerHTML]="comment.text"></div>
+  }
+  <div class="relative flex w-full items-center justify-center py-4">
+    <button
+      color="primary"
+      mat-stroked-button
+      [hidden]="!user.isStaff && !task.definition.scormAllowReview"
+      (click)="reviewScormTest()"
+    >
+      Review
+    </button>
+    <button
+      #menuState="matMenuTrigger"
+      class="absolute right-0 h-7 p-0"
+      mat-icon-button
+      [hidden]="!user.isStaff"
+      [matMenuTriggerFor]="menu"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button
+        mat-menu-item
+        [hidden]="this.comment.testAttempt.successStatus"
+        (click)="passScormAttempt()"
+      >
+        Pass attempt
+      </button>
+      <button mat-menu-item (click)="deleteScormAttempt()">Delete attempt</button>
+    </mat-menu>
+  </div>
+</div>
diff --git a/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.scss b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.scss
new file mode 100644
index 0000000000..da3e3ff584
--- /dev/null
+++ b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.scss
@@ -0,0 +1,47 @@
+p {
+  color: #2c2c2c;
+  text-align: center;
+}
+
+hr {
+  width: 100%;
+}
+
+.hr-fade {
+  background: linear-gradient(to right, transparent, #9696969d, transparent);
+  width: 100%;
+  margin-top: 6px;
+}
+
+.hr-text {
+  margin: 0;
+  line-height: 1em;
+  position: relative;
+  outline: 0;
+  border: 0;
+  color: black;
+  text-align: center;
+  height: 1.5em;
+  opacity: 0.8;
+  &:before {
+    content: '';
+    background: linear-gradient(to right, transparent, #9696969d, transparent);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+  }
+  &:after {
+    content: attr(data-content);
+    position: relative;
+    display: inline-block;
+    color: black;
+
+    padding: 0 0.5em;
+    line-height: 1.5em;
+
+    color: #9696969d;
+    background-color: #fff;
+  }
+}
diff --git a/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.ts b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.ts
new file mode 100644
index 0000000000..5cf6e6845c
--- /dev/null
+++ b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.ts
@@ -0,0 +1,56 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {
+  ScormComment,
+  Task,
+  TestAttemptService,
+  User,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+
+@Component({
+  selector: 'f-scorm-comment',
+  templateUrl: './scorm-comment.component.html',
+  styleUrls: ['./scorm-comment.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ScormCommentComponent {
+  @Input() task: Task;
+  @Input() comment: ScormComment;
+
+  user: User;
+
+  constructor(
+    private userService: UserService,
+    private testAttemptService: TestAttemptService,
+    private confirmationModal: ConfirmationModalService,
+  ) {
+    this.user = this.userService.currentUser;
+  }
+
+  reviewScormTest() {
+    this.comment.testAttempt.review();
+  }
+
+  passScormAttempt() {
+    this.confirmationModal.show(
+      'Pass Test Attempt',
+      'Are you sure you want to pass this test attempt? This action will override the success status of this test attempt to a pass.',
+      () => {
+        this.testAttemptService.overrideSuccessStatus(this.comment.testAttempt.id, true);
+      },
+    );
+  }
+
+  deleteScormAttempt() {
+    this.confirmationModal.show(
+      'Delete Test Attempt',
+      'Are you sure you want to delete this test attempt? This action is final and will delete information associated with this test attempt.',
+      () => {
+        this.testAttemptService.deleteAttempt(this.comment.testAttempt.id);
+        this.comment.delete();
+      },
+    );
+  }
+}
diff --git a/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.html b/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.html
new file mode 100644
index 0000000000..ae9073e8bb
--- /dev/null
+++ b/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.html
@@ -0,0 +1,34 @@
+<div class="w-full py-2">
+  @if (comment.assessed) {
+    <div class="flex w-full flex-col items-center gap-2 text-center">
+      <div class="flex w-full items-center gap-3 text-[#969696]">
+        <span class="h-px flex-1 bg-gradient-to-r from-transparent to-[#9696969d]"></span>
+        <span class="text-sm font-medium">{{ message }}</span>
+        <span class="h-px flex-1 bg-gradient-to-r from-[#9696969d] to-transparent"></span>
+      </div>
+      <p class="m-0 text-sm text-[#969696] opacity-80">
+        <strong>Reason:</strong> {{ comment.text }}
+      </p>
+    </div>
+  }
+
+  @if (!comment.assessed) {
+    <div class="flex w-full flex-col items-center gap-3 text-center">
+      <span
+        class="h-px w-full bg-gradient-to-r from-transparent via-[#9696969d] to-transparent"
+      ></span>
+      <p class="m-0 text-sm text-[#2c2c2c]">
+        <span class="block">{{ message }}</span>
+        <strong>Reason:</strong> {{ comment.text }}
+      </p>
+      @if (isNotStudent) {
+        <button class="!bg-[#43a047]" color="primary" mat-flat-button (click)="grantExtension()">
+          Grant
+        </button>
+      }
+      <span
+        class="h-px w-full bg-gradient-to-r from-transparent via-[#9696969d] to-transparent"
+      ></span>
+    </div>
+  }
+</div>
diff --git a/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.scss b/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.scss
new file mode 100644
index 0000000000..1a5626b320
--- /dev/null
+++ b/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.scss
@@ -0,0 +1,55 @@
+div {
+  width: 100%;
+}
+
+p {
+  color: #2c2c2c;
+  text-align: center;
+}
+
+hr {
+  width: 100%;
+}
+
+.hr-fade {
+  background: linear-gradient(to right, transparent, #9696969d, transparent);
+  width: 100%;
+}
+
+.fade-text {
+  color: #9696969d;
+  opacity: 0.8;
+}
+
+.hr-text {
+  margin: 0;
+  line-height: 1em;
+  position: relative;
+  outline: 0;
+  border: 0;
+  color: black;
+  text-align: center;
+  height: 1.5em;
+  opacity: 0.8;
+  &:before {
+    content: '';
+    background: linear-gradient(to right, transparent, #9696969d, transparent);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+  }
+  &:after {
+    content: attr(data-content);
+    position: relative;
+    display: inline-block;
+    color: black;
+
+    padding: 0 0.5em;
+    line-height: 1.5em;
+
+    color: #9696969d;
+    background-color: #fff;
+  }
+}
diff --git a/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.ts b/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.ts
new file mode 100644
index 0000000000..3a69e96b9a
--- /dev/null
+++ b/src/app/tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component.ts
@@ -0,0 +1,52 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ScormExtensionComment, Task, TaskComment} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-scorm-extension-comment',
+  templateUrl: './scorm-extension-comment.component.html',
+  styleUrls: ['./scorm-extension-comment.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ScormExtensionCommentComponent {
+  @Input() comment: ScormExtensionComment;
+  @Input() task: Task;
+
+  constructor(private alerts: AlertService) {}
+
+  private handleError(error: {data: {error: string}}) {
+    this.alerts.error('Error: ' + error.data.error, 6000);
+  }
+
+  get message() {
+    const studentName = this.comment.author.displayName;
+    if (this.comment.assessed && this.comment.granted) {
+      return 'Extra attempt granted.';
+    } else if (this.comment.assessed && !this.comment.granted) {
+      return 'Extra attempt request rejected.';
+    }
+    const subject = this.isStudent ? 'You have ' : studentName + ' has ';
+    const message = 'requested an extra attempt for the knowledge check.';
+    return subject + message;
+  }
+
+  get isStudent() {
+    return !this.isNotStudent;
+  }
+
+  get isNotStudent() {
+    return this.task.unit.currentUserIsStaff;
+  }
+
+  grantExtension() {
+    this.comment.grant().subscribe({
+      next: (_tc: TaskComment) => {
+        this.alerts.success('Attempt request granted', 2000);
+      },
+      error: (response) => {
+        this.handleError(response);
+      },
+    });
+  }
+}
diff --git a/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.html b/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.html
index d30837fce0..18c1508a16 100644
--- a/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.html
+++ b/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.html
@@ -1,16 +1,49 @@
-<div fxLayout="row" fxLayoutAlign="space-evenly center">
-  <div fxLayout="column" fxLayoutAlign="space-around center">
-    @if ((comment.assessment_result && comment.assessment_result.is_successful)) {
-    <div>
-      <hr class="hr-text" data-content="Assessment Summary" />
-      <div class="markdown-to-html" [innerHTML]="comment.text | marked"></div>
-      <button mat-button (click)="showTaskAssessmentResult()">view report</button>
-      <hr class="hr-fade" />
-    </div>
-    } @else {
+<div class="mx-auto flex w-full flex-col items-center justify-center overflow-hidden">
+  <!-- TODO: dont render this comment if we're still in pre_queued and the submission timestamp is over 1 hour etc -->
+  <div class="flex w-full items-center justify-center text-center text-[#9696969d] opacity-80">
+    <div
+      class="h-px w-full flex-grow bg-gradient-to-r from-transparent via-gray-400/60 to-transparent"
+    ></div>
 
-    <hr class="hr-text" data-content="Tests in Progress" />
+    <div class="flex items-center gap-1 bg-white px-1 whitespace-nowrap">
+      @if (comment.overseerStatus === 'pre_queued') {
+        Tests In Progress
+      } @else if (comment.overseerStatus === 'passed') {
+        Tests Passed {{ comment.overseerPassedSteps }} / {{ comment.overseerTotalSteps }}
+      } @else if (comment.overseerStatus === 'failed') {
+        Tests Failed {{ comment.overseerPassedSteps }} / {{ comment.overseerTotalSteps }}
+      }
+    </div>
 
-    }
+    <div
+      class="h-px w-full flex-grow bg-gradient-to-r from-transparent via-gray-400/60 to-transparent"
+    ></div>
   </div>
+
+  @if (comment.overseerStatus === 'passed') {
+    <mat-icon
+      class="my-1 text-green-500 opacity-70"
+      style="width: 35px; height: 35px; font-size: 35px"
+      >check_circle</mat-icon
+    >
+  } @else if (comment.overseerStatus === 'failed') {
+    <mat-icon
+      class="my-1 opacity-70"
+      color="warn"
+      style="width: 35px; height: 35px; font-size: 35px"
+      >highlight_off_outline</mat-icon
+    >
+  } @else if (comment.overseerStatus === 'pre_queued') {
+    <mat-progress-spinner mode="indeterminate" [diameter]="25"></mat-progress-spinner>
+  }
+
+  @if (comment.overseerStatus !== 'pre_queued') {
+    <button
+      class="mb-1"
+      mat-stroked-button
+      (click)="showTaskAssessmentResult(comment.overseerAssessmentId)"
+    >
+      View report
+    </button>
+  }
 </div>
diff --git a/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.scss b/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.scss
index 816d3724e7..e69de29bb2 100644
--- a/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.scss
+++ b/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.scss
@@ -1,56 +0,0 @@
-div {
-  width: 100%;
-}
-
-p {
-  color: #2c2c2c;
-  text-align: center;
-}
-
-hr {
-  width: 100%;
-}
-
-.hr-fade {
-  background: linear-gradient(to right, transparent, #9696969d, transparent);
-  width: 100%;
-  margin-top: 1px;
-}
-
-.fade-text {
-  color: #9696969d;
-  opacity: 0.8;
-}
-
-.hr-text {
-  margin: 0;
-  line-height: 1em;
-  position: relative;
-  outline: 0;
-  border: 0;
-  color: black;
-  text-align: center;
-  height: 1.5em;
-  opacity: 0.8;
-  &:before {
-    content: "";
-    background: linear-gradient(to right, transparent, #9696969d, transparent);
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 100%;
-    height: 1px;
-  }
-  &:after {
-    content: attr(data-content);
-    position: relative;
-    display: inline-block;
-    color: black;
-
-    padding: 0 0.5em;
-    line-height: 1.5em;
-
-    color: #9696969d;
-    background-color: #fff;
-  }
-}
diff --git a/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.ts b/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.ts
index 44e22eea8b..2c4e842f98 100644
--- a/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.ts
+++ b/src/app/tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component.ts
@@ -1,8 +1,11 @@
-import { Component, OnInit, Input, Inject } from '@angular/core';
-import { TaskSubmissionService, TaskAssessmentResult } from 'src/app/common/services/task-submission.service';
-import { TaskAssessmentModalService } from 'src/app/common/modals/task-assessment-modal/task-assessment-modal.service';
-import { Task } from 'src/app/api/models/doubtfire-model';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {Task} from 'src/app/api/models/doubtfire-model';
+import {TaskAssessmentModalService} from 'src/app/common/modals/task-assessment-modal/task-assessment-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {
+  TaskAssessmentResult,
+  TaskSubmissionService,
+} from 'src/app/common/services/task-submission.service';
 
 export interface User {
   id: number;
@@ -23,14 +26,21 @@ export interface TaskAssessmentComment {
   recipient_read_time?: Date;
   // new fields that extend regular Comment Interface. TODO: create a separate Comment entity and extend it.
   assessment_result?: TaskAssessmentResult;
+  overseerAssessmentId: number;
+  overseerPassedSteps: number;
+  overseerTotalSteps: number;
+  overseerInProgress: boolean;
+  overseerStatus: string;
 }
 
 @Component({
   selector: 'app-task-assessment-comment',
   templateUrl: './task-assessment-comment.component.html',
   styleUrls: ['./task-assessment-comment.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class TaskAssessmentCommentComponent implements OnInit {
+export class TaskAssessmentCommentComponent {
   @Input() task: Task;
   @Input() comment: TaskAssessmentComment;
 
@@ -45,20 +55,16 @@ export class TaskAssessmentCommentComponent implements OnInit {
     this.alerts.error('Error: ' + error, 6000);
   }
 
-  ngOnInit() {
-    this.update();
-  }
-
   get message() {
     return this.comment.assessment_result.assessment_output;
   }
 
-  showTaskAssessmentResult() {
-    this.modalService.show(this.task);
+  showTaskAssessmentResult(overseerAssessmentId?: number) {
+    this.modalService.show(this.task, overseerAssessmentId);
   }
 
   scroll(el: HTMLElement) {
-    el.scrollIntoView({ behavior: 'smooth' });
+    el.scrollIntoView({behavior: 'smooth'});
   }
 
   update(): void {
diff --git a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.html b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.html
index d104df63af..51e1d71cf9 100644
--- a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.html
+++ b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.html
@@ -1,156 +1,310 @@
-<div class="comments-panel h-full" appDragDrop (fileDropped)="uploadFiles($event)" fxLayout="column">
-  <div fxFlex class="comments-body" #commentsBody fxLayout="column" style="place-content: stretch !important">
-    <div [hidden]="!loading" class="h-full" fxLayout="row" fxLayoutAlign="center center">
-      <mat-spinner strokeWidth="2" diameter="100" color="accent"></mat-spinner>
+<div
+  appDragDrop
+  class="comments-panel flex h-full min-h-0 flex-col"
+  (fileDropped)="uploadFiles($event)"
+>
+  <div
+    #commentsBody
+    class="comments-body flex flex-1 flex-col"
+    style="place-content: stretch !important"
+  >
+    <div class="flex h-full flex-row items-center justify-center" [hidden]="!loading">
+      <mat-spinner color="accent" diameter="100" strokeWidth="2"></mat-spinner>
     </div>
 
-    <div
-      *ngIf="!task || task.comments.length === 0"
-      fxFlexFill
-      fxLayout="column"
-      fxLayoutAlign="center center"
-    >
-      <mat-icon id="noView">forum</mat-icon>
-    </div>
+    @if (!loading && (!task || task.comments.length === 0)) {
+      <div
+        class="m-0 flex size-full min-h-full min-w-full flex-col items-center justify-center px-3 text-center"
+        role="status"
+      >
+        <mat-icon aria-hidden="true" id="noView">forum</mat-icon>
+        <p>No comments on this task yet.</p>
+      </div>
+    }
 
-    <div *ngIf="task" class="comments-scroll-content" [hidden]="loading">
-      <span>
-        <div
-          id="comment-{{ comment.id }}"
-          *ngFor="let comment of task.comments"
-          (mouseover)="comment.hover = true"
-          (mouseout)="comment.hover = false"
-          class="anchor"
-        >
-          <p
-            id="commentTimestamp"
-            *ngIf="comment.shouldShowTimestamp"
-            [ngClass]="{own: comment.authorIsMe}"
-          >
-            {{ comment.author.firstName }} {{ comment.author.lastName }}
-            {{ comment.createdAt | humanizedDate }}
-          </p>
-          <div
-            class="comment"
-            [ngClass]="{
-              'comment-by-other-user': !comment.authorIsMe,
-              'new-comment': comment.isNew
-            }"
-            [fxLayout]="comment.authorIsMe ? 'row-reverse' : 'row'"
-            fxLayoutAlign="start end"
-          >
-            <div
-              *ngIf="!comment.authorIsMe && shouldShowAuthorIcon(comment.commentType)"
-              class="comment-user-icon-wrapper"
-            >
-              <user-icon
-                *ngIf="comment.shouldShowAvatar && shouldShowAuthorIcon(comment.commentType)"
-                [size]="28"
-                [user]="comment.author"
-                [ngClass]="{'hidden-xs hidden-sm': comment.authorIsMe}"
-                matTooltip="{{ comment.author.name }}"
-                matTooltipPosition="left"
+    @if (task) {
+      <div class="comments-scroll-content" [hidden]="loading">
+        <span>
+          @for (comment of task.comments; track comment) {
+            <div class="anchor" id="comment-{{ comment.id }}">
+              @if (comment.shouldShowTimestamp) {
+                <p
+                  id="commentTimestamp"
+                  matTooltipPosition="above"
+                  [matTooltip]="comment.createdAt | localizedDateTime"
+                  [ngClass]="{own: comment.authorIsMe}"
+                >
+                  {{ comment.author.displayName }}
+                  {{ comment.createdAt | humanizedDate }}
+                </p>
+              }
+              <div
+                class="comment flex items-end justify-start"
+                [ngClass]="{
+                  'flex-row-reverse': comment.authorIsMe,
+                  'flex-row': !comment.authorIsMe,
+                  'comment-by-other-user': !comment.authorIsMe,
+                  'new-comment': comment.isNew,
+                }"
               >
-              </user-icon>
-            </div>
+                @if (!comment.authorIsMe && shouldShowAuthorIcon(comment.commentType)) {
+                  <div class="comment-user-icon-wrapper">
+                    @if (comment.shouldShowAvatar && shouldShowAuthorIcon(comment.commentType)) {
+                      <user-icon
+                        matTooltip="{{ comment.author.displayName }}"
+                        matTooltipPosition="left"
+                        [ngClass]="{'hidden-xs hidden-sm': comment.authorIsMe}"
+                        [size]="28"
+                        [user]="comment.author"
+                      >
+                      </user-icon>
+                    }
+                  </div>
+                }
 
-            <div
-              class="comment-container"
-              [fxLayout]="comment.authorIsMe ? 'row-reverse' : 'row'"
-              fxLayoutAlign="start center"
-              [ngSwitch]="comment.commentType"
-            >
-              <div *ngSwitchCase="'status'" class="comment-status">
-                <hr class="hr-text" [attr.data-content]="comment.text" />
-              </div>
+                <div
+                  class="comment-container flex items-center justify-start"
+                  [ngClass]="comment.authorIsMe ? 'flex-row-reverse' : 'flex-row'"
+                >
+                  @switch (comment.commentType) {
+                    @case ('status') {
+                      <div
+                        class="comment-status"
+                        matTooltipPosition="above"
+                        matTooltipShowDelay="1000"
+                        [matTooltip]="comment.createdAt | localizedDateTime"
+                      >
+                        <hr class="hr-text" [attr.data-content]="comment.text" />
+                      </div>
+                    }
 
-              <div *ngSwitchCase="'assessment'" class="comment-assessment">
-                <app-task-assessment-comment
-                  [task]="task"
-                  [comment]="comment"
-                  *ngIf="overseerEnabled"
-                ></app-task-assessment-comment>
-              </div>
+                    @case ('discussed_in_class') {
+                      <div
+                        class="my-1 flex w-full flex-col items-center"
+                        matTooltipPosition="above"
+                        matTooltipShowDelay="1000"
+                        [matTooltip]="comment.createdAt | localizedDateTime"
+                      >
+                        <mat-card appearance="outlined" class="w-full self-end">
+                          <mat-card-header>
+                            <mat-icon class="m-auto" style="color: #9696969d">group</mat-icon>
+                          </mat-card-header>
 
-              <div class="bubble" [ngClass]="commentClasses(comment)">
-                <a
-                  (click)="scrollToComment(comment.originalComment.id)"
-                  class="original-comment"
-                  *ngIf="!!comment.replyToId"
-                >
-                  <p class="reply-text">
-                    <i class="fa fa-reply"></i>
-                    {{ comment.originalComment ? comment.originalComment.text : 'comment removed' }}
-                  </p>
-                </a>
-                <div *ngSwitchCase="'extension'" class="comment-extension">
-                  <extension-comment [task]="task" [comment]="comment"> </extension-comment>
-                </div>
+                          <mat-card-content
+                            class="flex flex-col items-center justify-center"
+                            style="color: #9696969d"
+                          >
+                            {{ comment.text }}
+                          </mat-card-content>
+                        </mat-card>
+                      </div>
+                    }
 
-                <div *ngSwitchCase="'text'" class="comment-text">
-                  <div class="markdown-to-html" [innerHTML]="comment.text | marked"></div>
-                </div>
+                    @case ('feedback_review_request') {
+                      <div
+                        class="my-1 flex w-full flex-col items-center"
+                        matTooltipPosition="above"
+                        matTooltipShowDelay="1000"
+                        [matTooltip]="comment.createdAt | localizedDateTime"
+                      >
+                        <mat-card appearance="outlined" class="w-full self-end">
+                          <mat-card-header>
+                            <mat-icon class="m-auto" style="color: #9696969d">comment</mat-icon>
+                          </mat-card-header>
 
-                <div *ngSwitchCase="'audio'" class="comment-audio">
-                  <audio-player
-                    [task]="task"
-                    [project]="project"
-                    [comment]="comment"
-                  ></audio-player>
-                </div>
+                          <mat-card-content
+                            class="flex flex-col items-center justify-center"
+                            style="color: #9696969d"
+                          >
+                            {{ comment.text }}
+                          </mat-card-content>
+                        </mat-card>
+                      </div>
+                    }
 
-                <div *ngSwitchCase="'discussion'" class="comment-discussion">
-                  <intelligent-discussion-player
-                    [task]="task"
-                    [discussion]="comment"
-                  ></intelligent-discussion-player>
-                </div>
+                    @case ('checked_in') {
+                      <div
+                        class="my-1 flex w-full flex-col items-center"
+                        matTooltipPosition="above"
+                        matTooltipShowDelay="1000"
+                        [matTooltip]="comment.createdAt | localizedDateTime"
+                      >
+                        <mat-card appearance="outlined" class="w-full self-end">
+                          <mat-card-header>
+                            <mat-icon class="m-auto" style="color: #9696969d">how_to_reg</mat-icon>
+                          </mat-card-header>
 
-                <div *ngSwitchCase="'image'" class="comment-image">
-                  <pdf-image-comment
-                    [comment]="comment"
-                    [project]="project"
-                    [task]="task"
-                  ></pdf-image-comment>
-                </div>
+                          <mat-card-content
+                            class="flex flex-col items-center justify-center"
+                            style="color: #9696969d"
+                          >
+                            {{ comment.text }}
+                          </mat-card-content>
+                        </mat-card>
+                      </div>
+                    }
+
+                    @case ('plan') {
+                      <div
+                        class="comment-status"
+                        matTooltipPosition="above"
+                        matTooltipShowDelay="1000"
+                        [matTooltip]="comment.createdAt | localizedDateTime"
+                      >
+                        <hr class="hr-text" [attr.data-content]="comment.text" />
+                      </div>
+                    }
+
+                    @case ('assessment') {
+                      <div class="comment-assessment mx-auto max-w-87.5 overflow-x-scroll">
+                        @if (
+                          overseerEnabled && asAssessmentComment(comment);
+                          as assessmentComment
+                        ) {
+                          <app-task-assessment-comment
+                            [comment]="assessmentComment"
+                            [task]="task"
+                          ></app-task-assessment-comment>
+                        }
+                      </div>
+                    }
 
-                <div *ngSwitchCase="'pdf'" class="comment-pdf">
-                  <pdf-image-comment
-                    [comment]="comment"
-                    [project]="project"
-                    [task]="task"
-                  ></pdf-image-comment>
+                    @case ('scorm') {
+                      <div class="comment-scorm my-2">
+                        @if (scormEnabled && asScormComment(comment); as scormComment) {
+                          <f-scorm-comment [comment]="scormComment" [task]="task"></f-scorm-comment>
+                        }
+                      </div>
+                    }
+                  }
+
+                  <div class="bubble" [ngClass]="commentClasses(comment)">
+                    @if (!!comment.replyToId) {
+                      <a
+                        class="original-comment"
+                        [class.disabled]="!comment.originalComment"
+                        (click)="scrollToComment(comment.originalComment?.id)"
+                      >
+                        <p class="reply-text">
+                          <mat-icon inline>reply</mat-icon>
+                          {{
+                            comment.originalComment
+                              ? comment.originalComment.text
+                              : 'comment removed'
+                          }}
+                        </p>
+                      </a>
+                    }
+
+                    @switch (comment.commentType) {
+                      @case ('extension') {
+                        <div class="comment-extension">
+                          @if (asExtensionComment(comment); as extensionComment) {
+                            <extension-comment [comment]="extensionComment" [task]="task">
+                            </extension-comment>
+                          }
+                        </div>
+                      }
+
+                      @case ('scorm_extension') {
+                        <div class="comment-scorm-extension">
+                          @if (asScormExtensionComment(comment); as scormExtensionComment) {
+                            <f-scorm-extension-comment
+                              [comment]="scormExtensionComment"
+                              [task]="task"
+                            >
+                            </f-scorm-extension-comment>
+                          }
+                        </div>
+                      }
+
+                      @case ('text') {
+                        <div
+                          class="comment-text"
+                          matTooltipPosition="above"
+                          matTooltipShowDelay="1000"
+                          [matTooltip]="comment.createdAt | localizedDateTime"
+                        >
+                          <div class="markdown-to-html" [innerHTML]="comment.text | marked"></div>
+                        </div>
+                      }
+
+                      @case ('audio') {
+                        <div class="comment-audio">
+                          <audio-player
+                            [comment]="comment"
+                            [project]="project"
+                            [task]="task"
+                          ></audio-player>
+                        </div>
+                      }
+
+                      @case ('discussion') {
+                        <div class="comment-discussion-asdf">
+                          @if (asDiscussionComment(comment); as discussionComment) {
+                            <intelligent-discussion-player
+                              [discussion]="discussionComment"
+                              [task]="task"
+                            ></intelligent-discussion-player>
+                          }
+                        </div>
+                      }
+
+                      @case ('image') {
+                        <div class="comment-image">
+                          <pdf-image-comment
+                            [comment]="comment"
+                            [project]="project"
+                            [task]="task"
+                          ></pdf-image-comment>
+                        </div>
+                      }
+
+                      @case ('pdf') {
+                        <div class="comment-pdf">
+                          <pdf-image-comment
+                            [comment]="comment"
+                            [project]="project"
+                            [task]="task"
+                          ></pdf-image-comment>
+                        </div>
+                      }
+                    }
+                  </div>
+                  @if (comment.isBubbleComment) {
+                    <div class="comment-overflow">
+                      <comment-bubble-action
+                        [comment]="comment"
+                        [sharedData]="sharedCommentComposerData"
+                      ></comment-bubble-action>
+                    </div>
+                  }
                 </div>
               </div>
-              <div *ngIf="comment.isBubbleComment" class="comment-overflow">
-                <comment-bubble-action
-                  [hidden]="!comment.hover"
-                  [comment]="comment"
-                  [sharedData]="sharedCommentComposerData"
-                ></comment-bubble-action>
-              </div>
+              @if (comment.lastRead && shouldShowReadReceipt()) {
+                <div class="read-receipt">
+                  <user-icon
+                    matTooltip="Read {{ comment.recipientReadTime | humanizedDate }} by {{
+                      comment.recipient.name
+                    }}"
+                    matTooltipPosition="above"
+                    [size]="18"
+                    [user]="comment.recipient"
+                  >
+                  </user-icon>
+                </div>
+              }
             </div>
-          </div>
-          <div *ngIf="comment.lastRead && shouldShowReadReceipt()" class="read-receipt">
-            <user-icon
-              matTooltip="Read {{ comment.recipientReadTime | humanizedDate }} by {{
-                comment.recipient.name
-              }}"
-              matTooltipPosition="above"
-              [size]="18"
-              [user]="comment.recipient"
-            >
-            </user-icon>
-          </div>
-        </div>
-      </span>
-    </div>
+          }
+        </span>
+      </div>
+    }
   </div>
   <!--/comment-list-->
   <div class="comments-footer" id="commentComposerFoter">
     <task-comment-composer
-      [task]="task"
       [sharedData]="sharedCommentComposerData"
+      [task]="task"
     ></task-comment-composer>
   </div>
 </div>
diff --git a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.scss b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.scss
index 0ee9fbb91c..fb18bef021 100644
--- a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.scss
+++ b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.scss
@@ -1,7 +1,8 @@
-@import '../../../styles/mixins/scrollable.scss';
+@use 'sass:color';
+@use 'styles/mixins/scrollable' as *;
 
 :host {
-  min-width: 230px;
+  min-width: 0;
 }
 
 ::ng-deep .text-bubble .comment-text .markdown-to-html p {
@@ -9,9 +10,12 @@
 }
 
 $comment-bubble-color: #3939ff;
-$comment-bubble-color-darker: darken($comment-bubble-color, 10%);
+$comment-bubble-color-darker: color.adjust($comment-bubble-color, $lightness: -10%);
 $comment-bubble-color-other-user: rgb(241, 240, 240);
-$comment-bubble-color-other-user-darker: darken($comment-bubble-color-other-user, 10%);
+$comment-bubble-color-other-user-darker: color.adjust(
+  $comment-bubble-color-other-user,
+  $lightness: -10%
+);
 $comment-author-bubble-size: 38px;
 $comment-text-padding: 12px;
 
@@ -65,7 +69,7 @@ $comment-inner-border-radius: 4px;
 }
 
 :host {
-  overflow-x: none;
+  overflow-x: hidden;
 
   p#commentTimestamp {
     color: #9696969d;
@@ -78,7 +82,7 @@ $comment-inner-border-radius: 4px;
     // padding-left: 40px;
 
     // &.own {
-      // display: none;
+    // display: none;
     // }
   }
 
@@ -128,6 +132,20 @@ $comment-inner-border-radius: 4px;
     }
   }
 
+  // The reply/edit/delete actions used to be shown by a mouseover handler writing a flag
+  // on the comment, which no keyboard user could ever set. The reveal is CSS now, so it
+  // answers to focus inside the comment as well as to the pointer. It has to be opacity
+  // rather than display or visibility, both of which would drop the buttons out of the
+  // tab order and leave :focus-within with no way to ever become true.
+  .comment-overflow comment-bubble-action {
+    opacity: 0;
+  }
+
+  .anchor:hover .comment-overflow comment-bubble-action,
+  .anchor:focus-within .comment-overflow comment-bubble-action {
+    opacity: 1;
+  }
+
   .comment-by-other-user .comment-container {
     display: flex;
     flex-grow: 2;
@@ -140,11 +158,13 @@ $comment-inner-border-radius: 4px;
     }
   }
 
-  .comment-container .comment-extension {
+  .comment-container .comment-extension,
+  .comment-container .comment-scorm-extension {
     width: 100%;
   }
 
-  .comment-container .comment-assessment {
+  .comment-container .comment-assessment,
+  .comment-container .comment-scorm {
     width: 100%;
   }
 
@@ -222,7 +242,7 @@ $comment-inner-border-radius: 4px;
       .reply-text {
         margin: 0 0.4em 1em 0;
         max-lines: 2;
-        max-height: 30px;
+        max-height: 35px;
         line-clamp: 2;
         line-height: 15.36px;
         margin-left: 0.8em;
@@ -230,7 +250,7 @@ $comment-inner-border-radius: 4px;
         overflow-y: hidden;
         -webkit-box-orient: vertical;
         -webkit-font-smoothing: antialiased;
-        overflow-wrap: break-word;
+        overflow-wrap: anywhere;
         text-align: left;
         text-rendering: optimizelegibility;
         user-select: text;
@@ -250,7 +270,11 @@ $comment-inner-border-radius: 4px;
   .comment.comment-by-other-user user-icon .user-icon-initials {
     box-shadow: 0 0 0 1px $comment-bubble-color-other-user-darker;
     background: $comment-bubble-color-other-user;
-    background: linear-gradient(to left, $comment-bubble-color-other-user, $comment-bubble-color-other-user-darker);
+    background: linear-gradient(
+      to left,
+      $comment-bubble-color-other-user,
+      $comment-bubble-color-other-user-darker
+    );
     // color: $text-color;
     color: black;
   }
@@ -332,7 +356,6 @@ $comment-inner-border-radius: 4px;
 
     .comment-text,
     .comment-pdf,
-    .comment-discussion,
     .markdown-to-html p {
       padding-right: 6px;
       padding-left: 4px;
@@ -354,7 +377,8 @@ $comment-inner-border-radius: 4px;
     }
   }
 
-  .comment .extension-bubble {
+  .comment .extension-bubble,
+  .comment .scorm_extension-bubble {
     width: 100%;
     background-color: transparent;
   }
@@ -418,7 +442,7 @@ $comment-inner-border-radius: 4px;
   }
 
   // Disucssion comments
-  .comment .discussion-bubble {
+  /* .comment .discussion-bubble {
     @include base-bubble;
     max-width: 300px;
 
@@ -427,7 +451,7 @@ $comment-inner-border-radius: 4px;
     }
 
     background: $discussion-comment-bubble-color;
-  }
+  } */
 
   .comment.comment-by-other-user .text-bubble {
     background: $comment-bubble-color-other-user;
diff --git a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.spec.ts b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.spec.ts
index d28e56ff6b..e42e7d28e4 100644
--- a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.spec.ts
+++ b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.spec.ts
@@ -1,47 +1,267 @@
-// import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-// import { EventEmitter } from '@angular/core';
-// import { alertService, commentsModal } from 'src/app/ajs-upgraded-providers';
-// import { TaskComment, TaskCommentService } from 'src/app/api/models/doubtfire-model';
-// import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-
-// import { TaskCommentsViewerComponent } from './task-comments-viewer.component';
-
-// describe('TaskCommentsViewerComponent', () => {
-//   let component: TaskCommentsViewerComponent;
-//   let fixture: ComponentFixture<TaskCommentsViewerComponent>;
-//   let taskCommentServiceStub: Partial<TaskCommentService>;
-//   let doubtfireConstantsStub: Partial<DoubtfireConstants>;
-//   let commentsModalStub: jasmine.SpyObj<any>;
-//   let taskStub: jasmine.SpyObj<any>;
-//   let alertServiceStub: jasmine.SpyObj<any>;
-
-//   beforeEach(
-//     waitForAsync(() => {
-//       const commentAdded: EventEmitter<TaskComment> = new EventEmitter();
-//       taskCommentServiceStub = {
-//         commentAdded$: commentAdded,
-//       };
-
-//       TestBed.configureTestingModule({
-//         declarations: [TaskCommentsViewerComponent],
-//         providers: [
-//           { provide: TaskCommentService, useValue: taskCommentServiceStub },
-//           { provide: DoubtfireConstants, useValue: doubtfireConstantsStub },
-//           { provide: commentsModal, useValue: commentsModalStub },
-//           { provide: Task, useValue: taskStub },
-//           { provide: alertService, useValue: alertServiceStub },
-//         ],
-//       }).compileComponents();
-//     })
-//   );
-
-//   beforeEach(() => {
-//     fixture = TestBed.createComponent(TaskCommentsViewerComponent);
-//     component = fixture.componentInstance;
-//     fixture.detectChanges();
-//   });
-
-//   it('should create', () => {
-//     expect(component).toBeTruthy();
-//   });
-// });
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {EMPTY, of} from 'rxjs';
+import {
+  Project,
+  Task,
+  TaskComment,
+  TaskCommentService,
+  TaskService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {FeedbackTemplateService} from 'src/app/api/services/feedback-template.service';
+import {CommentsModalService} from 'src/app/common/modals/comments-modal/comments-modal.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {HumanizedDatePipe} from 'src/app/common/pipes/humanized-date.pipe';
+import {LocalizedDatePipe} from 'src/app/common/pipes/localized-date.pipe';
+import {MarkedPipe} from 'src/app/common/pipes/marked.pipe';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {CommentBubbleActionComponent} from './comment-bubble-action/comment-bubble-action.component';
+import {TaskCommentsViewerComponent} from './task-comments-viewer.component';
+
+const taskCommentServiceStub = {
+  commentAdded$: EMPTY,
+  fetchAll: vi.fn(),
+};
+const taskServiceStub = {
+  taskStatusUpdated$: EMPTY,
+};
+const emptyProvider = {};
+
+describe('TaskCommentsViewerComponent', () => {
+  let component: TaskCommentsViewerComponent;
+  let fixture: ComponentFixture<TaskCommentsViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TaskCommentsViewerComponent],
+      providers: [
+        {provide: TaskCommentService, useValue: taskCommentServiceStub},
+        {provide: FeedbackTemplateService, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: TaskService, useValue: taskServiceStub},
+        {provide: DoubtfireConstants, useValue: emptyProvider},
+        {provide: CommentsModalService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(TaskCommentsViewerComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TaskCommentsViewerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('removes cached comments missing from the latest response', () => {
+    const keptComment = {
+      id: 1,
+      text: 'keep',
+      recipientReadTime: null,
+      recipientIsMe: false,
+    } as unknown as TaskComment;
+
+    const staleComment = {
+      id: 2,
+      text: 'remove',
+      recipientReadTime: null,
+      recipientIsMe: false,
+    } as unknown as TaskComment;
+
+    const latestComment = {
+      ...keptComment,
+    } as TaskComment;
+
+    const deleteFromCache = vi.fn();
+
+    const task = {
+      comments: [keptComment, staleComment],
+      commentCache: {
+        get: vi.fn((id: number) => (id === 1 ? keptComment : undefined)),
+        add: vi.fn(),
+        set: vi.fn(),
+        delete: deleteFromCache,
+      },
+      definition: {id: 1},
+      numNewComments: 2,
+      refreshCommentData: vi.fn(),
+    } as unknown as Task;
+
+    component.project = {
+      id: 1,
+      unit: {currentUserIsStaff: false},
+    } as unknown as Project;
+
+    component.scrollDown = vi.fn();
+    taskCommentServiceStub.fetchAll.mockReturnValue(of([latestComment]));
+
+    component.fetchComments(task, false);
+
+    expect(deleteFromCache).toHaveBeenCalledTimes(1);
+    expect(deleteFromCache).toHaveBeenCalledWith(2);
+  });
+
+  // Regression: clicking the reply banner of a deleted comment used to pass an
+  // undefined id and throw when scrollIntoView was called on a null element.
+  it('scrollToComment does not throw when the comment id is missing', () => {
+    expect(() => component.scrollToComment(undefined)).not.toThrow();
+  });
+});
+
+describe('TaskCommentsViewerComponent bubble actions', () => {
+  let component: TaskCommentsViewerComponent;
+  let fixture: ComponentFixture<TaskCommentsViewerComponent>;
+  let comment: Record<string, unknown>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        TaskCommentsViewerComponent,
+        CommentBubbleActionComponent,
+        HumanizedDatePipe,
+        LocalizedDatePipe,
+        MarkedPipe,
+      ],
+      providers: [
+        {provide: TaskCommentService, useValue: taskCommentServiceStub},
+        {provide: FeedbackTemplateService, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: TaskService, useValue: taskServiceStub},
+        {provide: DoubtfireConstants, useValue: {IsOverseerEnabled: {value: false}}},
+        {provide: CommentsModalService, useValue: emptyProvider},
+        {provide: ConfirmationModalService, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TaskCommentsViewerComponent);
+    component = fixture.componentInstance;
+
+    comment = {
+      id: 11,
+      commentType: 'text',
+      text: 'a comment',
+      replyToId: null,
+      isNew: false,
+      isBubbleComment: true,
+      authorIsMe: false,
+      shouldShowTimestamp: false,
+      shouldShowAvatar: false,
+      firstInSeries: false,
+      lastRead: false,
+      createdAt: new Date(),
+      author: {
+        preferredName: 'Ada',
+        lastName: 'Lovelace',
+        name: 'Ada Lovelace',
+        displayName: 'Ada Lovelace',
+      },
+    };
+    component.task = {comments: [comment], scormEnabled: false} as never;
+
+    fixture.detectChanges();
+    component.loading = false;
+    fixture.detectChanges();
+  });
+
+  it('renders accessible empty-state text from the real template after loading', () => {
+    component.task = {comments: [], scormEnabled: false} as never;
+    fixture.detectChanges();
+
+    const icon = fixture.nativeElement.querySelector('#noView') as HTMLElement;
+    expect(icon.getAttribute('aria-hidden')).toBe('true');
+    expect(icon.parentElement.getAttribute('role')).toBe('status');
+    expect(icon.parentElement.textContent).toContain('No comments on this task yet.');
+  });
+
+  it('does not claim the comments are empty while they are loading', () => {
+    component.task = {comments: [], scormEnabled: false} as never;
+    component.loading = true;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('#noView')).toBeNull();
+  });
+
+  it('renders the empty state safely when no task is selected', () => {
+    component.task = undefined;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('[role="status"]').textContent).toContain(
+      'No comments on this task yet.',
+    );
+  });
+
+  it('omits the empty state when the task has a comment', () => {
+    expect(fixture.nativeElement.querySelector('#noView')).toBeNull();
+  });
+
+  function anchor(): HTMLElement {
+    return fixture.nativeElement.querySelector('.anchor') as HTMLElement;
+  }
+
+  function replyButton(): HTMLButtonElement {
+    return anchor().querySelector(
+      '.comment-overflow comment-bubble-action button',
+    ) as HTMLButtonElement;
+  }
+
+  it('renders the comment actions instead of gating them behind a pointer flag', () => {
+    const actions = fixture.nativeElement.querySelector('comment-bubble-action') as HTMLElement;
+
+    expect(actions).toBeTruthy();
+    expect(actions.hasAttribute('hidden')).toBe(false);
+  });
+
+  it('builds the actions out of real buttons rather than bare icons', () => {
+    const buttons = anchor().querySelectorAll('comment-bubble-action button');
+
+    expect(buttons.length).toBe(3);
+    expect(replyButton().getAttribute('aria-label')).toBe('Reply to this comment');
+  });
+
+  it('does not meet the reveal condition while nothing in the comment has focus', () => {
+    expect(anchor().matches(':focus-within')).toBe(false);
+  });
+
+  it('meets the reveal condition once the keyboard reaches the actions', () => {
+    replyButton().focus();
+
+    expect(document.activeElement).toBe(replyButton());
+    expect(anchor().matches(':focus-within')).toBe(true);
+  });
+
+  it('replies to the comment when the focused button is activated', () => {
+    replyButton().focus();
+    replyButton().click();
+
+    expect(component.sharedCommentComposerData.originalComment).toBe(comment);
+  });
+});
+
+describe('TaskCommentsViewerComponent uploadFiles', () => {
+  it('does not write placeholder debug logging when a file is uploaded', () => {
+    const component = Object.create(TaskCommentsViewerComponent.prototype) as {
+      alerts: {error: ReturnType<typeof vi.fn>};
+      uploadFiles(event: unknown): void;
+    };
+    component.alerts = {error: vi.fn()};
+    const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+
+    // A rejected file type takes the alerts.error path and does not upload,
+    // which is enough to reach the end of uploadFiles where the log used to be.
+    component.uploadFiles([{type: 'text/plain'}]);
+
+    expect(logSpy).not.toHaveBeenCalled();
+    logSpy.mockRestore();
+  });
+});
diff --git a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts
index 1abfa9934d..6dca871e89 100644
--- a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts
+++ b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts
@@ -1,91 +1,205 @@
-import { Component, OnInit, Input, Inject, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
-import { commentsModal } from 'src/app/ajs-upgraded-providers';
-import { Task, Project, TaskComment, TaskCommentService } from 'src/app/api/models/doubtfire-model';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
-import { TaskCommentComposerData } from '../task-comment-composer/task-comment-composer.component';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {Subscription} from 'rxjs';
+import {
+  DiscussionComment,
+  Project,
+  ScormComment,
+  ScormExtensionComment,
+  Task,
+  TaskComment,
+  TaskCommentService,
+  TaskService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {ExtensionComment} from 'src/app/api/models/task-comment/extension-comment';
+import {FeedbackTemplateService} from 'src/app/api/services/feedback-template.service';
+import {CommentsModalService} from 'src/app/common/modals/comments-modal/comments-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {TaskCommentComposerData} from '../task-comment-composer/task-comment-composer.component';
+import {TaskAssessmentComment} from './task-assessment-comment/task-assessment-comment.component';
 
 @Component({
   selector: 'task-comments-viewer',
   templateUrl: './task-comments-viewer.component.html',
   styleUrls: ['./task-comments-viewer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class TaskCommentsViewerComponent implements OnChanges, OnInit {
+export class TaskCommentsViewerComponent implements OnChanges, OnDestroy {
   // Get the comments body from the HTML template
   @ViewChild('commentsBody') commentsBody: ElementRef;
 
   lastComment: TaskComment;
-  project: Project;
+  @Input() project: Project;
   loading: boolean = true;
 
   sharedCommentComposerData: TaskCommentComposerData = {
     originalComment: null,
+    editingComment: null,
   };
 
   @Input() comment?: TaskComment;
   @Input() task: Task;
   @Input() refocusOnTaskChange: boolean;
 
+  private taskStatusSub: Subscription;
+  private commentAddedSub: Subscription;
+
   constructor(
     private taskCommentService: TaskCommentService,
+    private feedbackTemplateService: FeedbackTemplateService,
+    private userService: UserService,
+    private taskService: TaskService,
     private constants: DoubtfireConstants,
-    @Inject(commentsModal) private commentsModalRef: any,
+    private commentsModalRef: CommentsModalService,
     private alerts: AlertService,
   ) {
-    const self = this;
-    this.taskCommentService.commentAdded$.subscribe((tc: TaskComment) => {
-      self.scrollDown();
+    this.commentAddedSub = this.taskCommentService.commentAdded$.subscribe((_tc: TaskComment) => {
+      this.scrollDown();
     });
+
+    this.taskStatusSub = this.taskService.taskStatusUpdated$.subscribe((task) => {
+      if (task && task.project && this.project && task.project.id === this.project.id) {
+        this.fetchComments(task, false);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.taskStatusSub?.unsubscribe();
+    this.commentAddedSub?.unsubscribe();
   }
 
-  ngOnInit(): void {}
+  public asAssessmentComment(comment: TaskComment): TaskAssessmentComment | null {
+    return comment.commentType === 'assessment'
+      ? (comment as unknown as TaskAssessmentComment)
+      : null;
+  }
 
-  ngOnChanges(changes: SimpleChanges) {
-    this.loading = true;
+  public asScormComment(comment: TaskComment): ScormComment | null {
+    return comment.commentType === 'scorm' ? (comment as ScormComment) : null;
+  }
+
+  public asExtensionComment(comment: TaskComment): ExtensionComment | null {
+    return comment.commentType === 'extension' ? (comment as ExtensionComment) : null;
+  }
+
+  public asScormExtensionComment(comment: TaskComment): ScormExtensionComment | null {
+    return comment.commentType === 'scorm_extension' ? (comment as ScormExtensionComment) : null;
+  }
+
+  public asDiscussionComment(comment: TaskComment): DiscussionComment | null {
+    return comment.commentType === 'discussion' ? (comment as DiscussionComment) : null;
+  }
 
+  ngOnChanges(changes: SimpleChanges) {
     // Must have project for task to be mapped
     if (changes.task?.currentValue?.project != null) {
       this.project = changes.task.currentValue.project;
-      this.taskCommentService
-        .query(
+      this.fetchComments(this.task, true, true);
+    } else {
+      this.loading = false;
+    }
+  }
+
+  fetchComments(task: Task, useCache: boolean = true, fetchAfterCache: boolean = false) {
+    if (!task.comments.length) {
+      // If the cache is empty we know the query will attempt to fetch, so we can avoid fetching a second time
+      useCache = false;
+      fetchAfterCache = false;
+    }
+
+    const request$ = !useCache
+      ? this.taskCommentService.fetchAll({
+          projectId: this.project.id,
+          taskDefinitionId: task.definition.id,
+        })
+      : this.taskCommentService.query(
           {
             projectId: this.project.id,
-            taskDefinitionId: this.task.definition.id,
+            taskDefinitionId: task.definition.id,
           },
-          this.task,
+          task,
           {
-            cache: this.task.commentCache,
-            constructorParams: this.task,
+            cache: task.commentCache,
+            constructorParams: task,
           },
-        )
-        .subscribe((comments) => {
-          // this.task.comments = comments;
+        );
+
+    request$.subscribe((comments) => {
+      // Remove task notification
+      task.numNewComments = 0;
+
+      for (const comment of comments) {
+        const existingComment = task.commentCache.get(comment.id);
+        comment.task = task;
+        if (!existingComment) {
+          // Update the cache with any new comments
+          task.commentCache.add(comment);
+        } else if (
+          existingComment.recipientReadTime !== comment.recipientReadTime ||
+          existingComment.text !== comment.text
+        ) {
+          // Update cached read receipts or edited messages
+          task.commentCache.set(comment.id, comment);
+        }
+      }
+
+      const commentIds = new Set(comments.map((comment) => comment.id));
 
-          this.task.refreshCommentData();
+      for (const cachedComment of [...task.comments]) {
+        if (!commentIds.has(cachedComment.id)) {
+          // This comment is in cache but not in the latest comments list
+          task.commentCache.delete(cachedComment.id);
+        }
+      }
+      task.refreshCommentData();
 
-          const lastReadComment: TaskComment = this.task.comments
-            .slice()
-            .reverse()
-            .find((comment: TaskComment) => comment.recipientReadTime != null && !comment.recipientIsMe);
+      const lastReadComment: TaskComment = task.comments
+        .slice()
+        .reverse()
+        .find(
+          (comment: TaskComment) => comment.recipientReadTime != null && !comment.recipientIsMe,
+        );
 
-          setTimeout(() => {
-            this.loading = false;
-            this.scrollDown();
-          }, 1000);
+      setTimeout(() => {
+        this.loading = false;
+        this.scrollDown();
+        if (useCache && fetchAfterCache) {
+          this.fetchComments(task, false, false);
+        }
+      }, 100);
+
+      if (lastReadComment) {
+        for (const comment of task.comments) {
+          comment.lastRead = false;
+        }
+        lastReadComment.lastRead = true;
+      }
+    });
 
-          if (lastReadComment) {
-            lastReadComment.lastRead = true;
-          }
+    if (this.project.unit.currentUserIsStaff) {
+      this.feedbackTemplateService
+        .query({contextType: 'task_definitions', contextId: task.definition.id}, {})
+        .subscribe({
+          error: () => this.alerts.error('Error loading task feedback templates.'),
         });
-    } else {
-      this.loading = false;
     }
   }
 
   scrollDown() {
-    const component: TaskCommentsViewerComponent = this;
     setTimeout(() => {
-      const element = component.commentsBody.nativeElement;
+      const element = this.commentsBody.nativeElement;
       element.scrollTop = element.scrollHeight;
     }, 50);
   }
@@ -98,6 +212,10 @@ export class TaskCommentsViewerComponent implements OnChanges, OnInit {
     return this.constants.IsOverseerEnabled.value;
   }
 
+  get scormEnabled(): boolean {
+    return this.task.scormEnabled;
+  }
+
   uploadFiles(event) {
     [...event].forEach((file) => {
       if (
@@ -124,33 +242,39 @@ export class TaskCommentsViewerComponent implements OnChanges, OnInit {
         this.alerts.error('I cannot upload that file - only images, audio, and PDFs.', 4000);
       }
     });
-    console.log('implement - check map comments');
-    // this.task.comments = this.ts.mapComments(this.task.comments);
   }
 
   // # Upload image files as comments to a given task
   postAttachmentComment(file) {
-    const self: TaskCommentsViewerComponent = this;
-
-    this.taskCommentService.addComment(this.task, file, 'file', null).subscribe(
-      (tc: TaskComment) => {},
-      (error: any) => {
+    this.taskCommentService.addComment(this.task, file, 'file', null).subscribe({
+      error: (error) => {
         this.alerts.error(error || error?.message, 2000);
       },
-    );
+    });
   }
 
-  scrollToComment(commentID) {
-    document.querySelector(`#comment-${commentID}`).scrollIntoView();
+  scrollToComment(commentID?: number) {
+    if (!commentID) {
+      return;
+    }
+    document.querySelector(`#comment-${commentID}`)?.scrollIntoView();
   }
 
   openCommentsModal(comment: TaskComment) {
     const resourceUrl = comment.attachmentUrl;
-    this.commentsModalRef.show(resourceUrl, comment.commentType);
+    this.commentsModalRef.show(resourceUrl, comment);
   }
 
   shouldShowAuthorIcon(commentType: string) {
-    return !(commentType === 'extension' || commentType === 'status' || commentType == 'assessment');
+    return !(
+      commentType === 'extension' ||
+      commentType === 'status' ||
+      commentType == 'assessment' ||
+      commentType === 'scorm' ||
+      commentType === 'scorm_extension' ||
+      commentType === 'discussed_in_class' ||
+      commentType === 'checked_in'
+    );
   }
 
   commentClasses(comment: TaskComment): object {
diff --git a/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.coffee b/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.coffee
deleted file mode 100644
index 51633d4fb6..0000000000
--- a/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.coffee
+++ /dev/null
@@ -1,93 +0,0 @@
-angular.module('doubtfire.tasks.task-ilo-alignment.modals.task-ilo-alignment-modal', [])
-
-#
-# Shows a modal where users can align tasks to ILOs
-#
-.factory('TaskILOAlignmentModal', ($modal) ->
-  TaskILOAlignmentModal = {}
-
-  TaskILOAlignmentModal.show = (task, ilo, alignment, unit, project, source) ->
-    $modal.open
-      controller: 'TaskILOAlignmentModalCtrl'
-      templateUrl: 'tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.tpl.html'
-      resolve:
-        task: -> task
-        ilo: -> ilo
-        alignment: -> alignment
-        unit: -> unit
-        project: -> project
-        source: -> source
-
-  TaskILOAlignmentModal
-)
-
-.controller('TaskILOAlignmentModalCtrl', ($scope, $rootScope, $modalInstance, alertService, newTaskOutcomeAlignmentService, task, ilo, alignment, unit, project, source) ->
-  $scope.source = source
-  $scope.unit = unit
-  $scope.task = task
-  $scope.ilo = ilo
-  $scope.alignment = alignment
-  $scope.project = project
-
-  if !$scope.alignment
-    $scope.alignment = newTaskOutcomeAlignmentService.createInstanceFrom({}, $scope.source)
-    $scope.alignment.learningOutcome = $scope.ilo
-    $scope.alignment.taskDefinition = task.definition
-    $scope.alignment.rating = 0
-    $scope.alignment.description = ""
-
-  $scope.editingRationale = false
-
-  $scope.toggleEditRationale = ->
-    if $scope.editingRationale
-      updateAlignment()
-    $scope.editingRationale = !$scope.editingRationale
-
-  $scope.removeAlignmentItem = ->
-    if $scope.project?
-      params = {
-        project_id: $scope.project.id
-      }
-    newTaskOutcomeAlignmentService.delete($scope.alignment, {cache: $scope.alignment.within.taskOutcomeAlignmentsCache, params: params}).subscribe({
-      next: (response) ->
-        alertService.success( "Task - Outcome alignment rating removed", 2000)
-        $rootScope.$broadcast('UpdateAlignmentChart')
-        $modalInstance.close $scope.alignment
-      error: (message) -> alertService.error( message, 6000)
-    })
-
-  updateAlignment = ->
-    if $scope.project?
-      params = {
-        project_id: $scope.project.id
-      }
-    newTaskOutcomeAlignmentService.update($scope.alignment, {cache: $scope.alignment.within.taskOutcomeAlignmentsCache, params: params}).subscribe({
-      next: (response) ->
-        alertService.success( "Task - Outcome alignment rating saved", 2000)
-        $rootScope.$broadcast('UpdateAlignmentChart')
-      error: (message) -> alertService.error( message, 6000)
-    })
-
-  addAlignment = ->
-    if $scope.project?
-      params = {
-        project_id: $scope.project.id
-      }
-    newTaskOutcomeAlignmentService.store($scope.alignment, {cache: $scope.source.taskOutcomeAlignmentsCache, constructorParams: $scope.source, params: params}).subscribe({
-      next: (response) ->
-        $scope.alignment = response
-        $rootScope.$broadcast('UpdateAlignmentChart')
-      error: (message) -> alertService.error( message, 6000)
-    })
-
-  $scope.updateRating = (alignment) ->
-    unless $scope.alignment.id?
-      addAlignment alignment
-    else
-      updateAlignment alignment
-
-  $scope.closeModal = ->
-    if $scope.editingRationale
-      $scope.updateRating $scope.alignment
-    $modalInstance.close $scope.alignment
-)
diff --git a/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.tpl.html b/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.tpl.html
deleted file mode 100644
index 91fdabc350..0000000000
--- a/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.tpl.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="task-ilo-alignment-modal">
-  <div class="modal-header text-center">
-    <h3>
-      How much does <label class="label label-info" tooltip="{{task.definition.name}}">{{task.definition.abbreviation}}</label> relate to <label class="label label-info" tooltip="{{ilo.name}}">{{ilo.abbreviation}}</label>?
-    </h3>
-  </div>
-  <div class="modal-body clearfix">
-    <p class="help-block col-sm-12 text-center">
-      Hover and click over a rating value below
-    </p>
-    <task-ilo-alignment-rater ng-model="alignment" on-rating-changed="updateRating"></task-ilo-alignment-rater>
-    <div class="col-sm-12 rationale-wrapper" ng-show="alignment.rating > 0">
-      <div tooltip="Click to edit rationale" tooltip-placement="left" tooltip-append-to-body="false" tooltip-popup-delay="300" tooltip-enable="alignment.description != null" ng-click="toggleEditRationale()" class="rationale" ng-class="{'no-rationale': alignment.description == null}" ng-hide="editingRationale">
-        <label class="text-muted" ng-show="alignment.description != null">
-          Provided Rationale
-        </label>
-        <div ng-bind-html="(alignment.description || 'No rationale provided') | markdown | to_trusted"></div>
-        <div class="small" ng-hide="alignment.description">Click to add one</div>
-      </div>
-      <div ng-if="editingRationale" class="clearfix">
-        <!-- <markdown-editor
-          height="200"
-          ng-model="alignment.description"
-          placeholder="Edit rationale..."
-          autofocus="true">
-        </markdown-editor> -->
-        <div contenteditable ng-model="alignment.description" placeholder="Edit rationale here..." autofocus="true" style="border-style: solid; border-width: thin; height: 200px" ></div>
-        <a ng-click="toggleEditRationale(alignment)" class="pull-right">Done Editing</a>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button ng-click="closeModal()" class="btn btn-primary">
-      <i class="fa fa-check"></i>
-    </button>
-    <button ng-click="removeAlignmentItem(alignment)" ng-if="alignment" tooltip="Remove this alignment" tooltip-append-to-body="true" class="btn btn-danger">
-      <i class="fa fa-trash-o"></i>
-    </button>
-  </div>
-</div>
diff --git a/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.coffee b/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.coffee
deleted file mode 100644
index 8217d7b43f..0000000000
--- a/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.coffee
+++ /dev/null
@@ -1,3 +0,0 @@
-angular.module('doubtfire.tasks.task-ilo-alignment.modals', [
-  'doubtfire.tasks.task-ilo-alignment.modals.task-ilo-alignment-modal'
-])
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.coffee b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.coffee
deleted file mode 100644
index b8aad86bb6..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.coffee
+++ /dev/null
@@ -1,101 +0,0 @@
-angular.module('doubtfire.tasks.task-ilo-alignment.task-ilo-alignment-editor',[])
-
-.directive('taskIloAlignmentEditor', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.tpl.html'
-  scope:
-    unit: "="
-    project: "=?"
-    showCsv: "="
-    hidePanel: '=?'
-    # select tasks to include in portfolio
-    showIncludeTasks: '=?'
-  controller: ($scope, $modal, $rootScope, $filter, alertService, gradeService, Visualisation, fileDownloaderService, CsvResultModal, outcomeService, TaskILOAlignmentModal, newTaskService, newTaskOutcomeAlignmentService) ->
-    $scope.showTaskName = $scope.unit.ilos.length < 5
-    $scope.showGraph = false
-    $scope.closeGraph = ->
-      $scope.showGraph = false
-    # Set source
-    if $scope.project?
-      $scope.source = $scope.project
-      $scope.tasks = $scope.project.tasks
-      $scope.taskStatusFactor = $scope.project.taskStatusFactor.bind($scope.project)
-    else
-      $scope.source = $scope.unit
-      #TODO unsubscribe on destroy
-      $scope.unit.taskDefinitionCache.values.subscribe(
-        (taskDefs) ->
-          $scope.tasks = _.map taskDefs, (td) ->
-            { definition: td }
-      )
-
-      $scope.taskStatusFactor = $scope.unit.taskStatusFactor
-
-    alignments = []
-    $scope.$watch 'source.taskOutcomeAlignments.length', ->
-      return unless $scope.source.taskOutcomeAlignments?
-      alignments =
-        _ .chain($scope.source.taskOutcomeAlignments)
-          .filter( (d) -> d.rating > 0 )
-          .groupBy('taskDefinition.id')
-          .map (d, i) ->
-            d = _ .chain(d)
-                  .groupBy('learningOutcome.id')
-                  .map( (d, i) -> [i, d[0]] )
-                  .fromPairs()
-                  .value()
-            [i, d]
-          .fromPairs()
-          .value()
-      alignments
-
-    $scope.showAlignmentModal = (task, ilo, alignment) ->
-      TaskILOAlignmentModal.show task, ilo, alignment, $scope.unit, $scope.project, $scope.source
-
-    $scope.alignmentForTaskAndIlo = (task, ilo) ->
-      if task.definition
-        result = alignments[task.definition.id]?[ilo.id]
-        td = task.definition
-      else
-        result = alignments[task.id]?[ilo.id]
-        td = task
-
-      result
-
-    $scope.disableInclude = (task) ->
-      # if there are no ILOs, you can always include tasks
-      if $scope.unit.ilos.length > 0
-        alignments[task.definition.id] is undefined
-      else
-        false
-
-    $scope.includeTaskInPorfolio = (task) ->
-      task.includeInPortfolio = !task.includeInPortfolio
-      newTaskService.update(task).subscribe({
-        next: (success) -> alertService.success( "Task updated", 2000)
-        error: (message) -> alertService.error( message, 6000)
-      })
-
-
-    # CSV stuff
-    $scope.csvImportResponse = {}
-    $scope.taskAlignmentCSV = { file: { name: 'Task Outcome Link CSV', type: 'csv'  } }
-
-    $scope.isTaskCSVUploading = null
-    $scope.onTaskAlignmentCSVSuccess = (response) ->
-      CsvResultModal.show 'Task CSV upload results.', response
-      $rootScope.$broadcast('UpdateAlignmentChart', response, { batch: true })
-      if $scope.project?
-        $scope.project.refresh($scope.unit)
-      else
-        $scope.unit.refresh()
-    $scope.onTaskAlignmentCSVComplete = ->
-      $scope.isTaskCSVUploading = null
-
-    $scope.downloadTaskAlignmentCSV = ->
-      if $scope.project?
-        fileDownloaderService.downloadFile($scope.project.taskAlignmentCSVUploadUrl, "#{$scope.project.student.name}-alignments.csv")
-      else
-        fileDownloaderService.downloadFile($scope.unit.taskAlignmentCSVUploadUrl, "#{$scope.unit.code}-alignments.csv")
-)
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.scss b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.scss
deleted file mode 100644
index 9cf6bd10fa..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.task-ilo-alignment-editor {
-  .alignment-panels .panel-body {
-    overflow: scroll;
-  }
-
-  table.table-task-alignment {
-    td.task-abbreviation    { width: 5ex;  }
-    td.task-status-icon     { width: 6em;  }
-    td.task-name            { width: 10ex; }
-    td.include-in-portfolio { width: 10ex; }
-    td.task-abbreviation label {
-      display: inline-block;
-      width: 100%;
-      padding: 0.55em; // to match height of status
-    }
-    td.include-in-portfolio {
-      button, .button-wrapper {
-        width: 100%;
-        height: 3em;
-      }
-    }
-    td.ilo-alignment {
-      .btn.btn-alignment {
-        width: 6em;
-        padding: 0.25em;
-        margin: 0 auto;
-      }
-    }
-  }
-
-  .visualisation {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    z-index: 3;
-    opacity: 0.6;
-    margin: 0;
-    border-radius: 0;
-    &:hover {
-      cursor: pointer;
-      opacity: 1;
-    }
-  }
-}
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.tpl.html b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.tpl.html
deleted file mode 100644
index e95245bd46..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.tpl.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<div class="task-ilo-alignment-editor row ">
-  <div class="alignment-panels" ng-class="{'col-md-9': showCsv}">
-    <div class="{{hidePanel ? '' : 'panel panel-primary'}}">
-      <div ng-hide="hidePanel" class="panel-heading clearfix">
-        <h3 class="panel-title">
-          {{showIncludeTasks ? 'Select Tasks' : 'Intended Learning Outcome Alignment'}}
-        </h3>
-        <div class="col-sm-8 pull-left" style="padding-left: 0;">
-          <div ng-show="showIncludeTasks" >
-            Select tasks to include and showcase in your portfolio that demonstrates your
-            understanding of each Learning Outcome.
-          </div>
-          <div ng-hide="showIncludeTasks">
-            Align tasks to an Intended Learning Outcome by selecting the red circle and choosing a rating,
-            providing an optional rational to justify why that task is related to the outcome selected.
-          </div>
-        </div>
-        <div class="btn-group pull-right">
-          <button class="btn btn-default" ng-model="showGraph" btn-radio="true" uncheckable>
-            <i class="fa fa-bar-chart"></i>
-          </button>
-        </div>
-      </div><!--/heading-->
-
-      <div class="panel-body">
-        <div class="large-notice-block" ng-hide="tasks.length > 0">
-          <i class="fa fa-2x fa-tasks"></i>
-          <p>No tasks in this unit</p>
-        </div>
-        <div class="large-notice-block" ng-hide="unit.ilos.length > 0 || showIncludeTasks">
-          <i class="fa fa-2x fa-graduation-cap"></i>
-          <p>No learning outcomes in this unit</p>
-        </div>
-        <table class="table table-task-alignment col-sm-12" ng-hide="tasks.length == 0 || (unit.ilos.length == 0 && ! showIncludeTasks)">
-          <thead>
-            <tr>
-              <th class="task" colspan="{{(showTaskName ? 3 : 2) - (source === unit ? 1 : 0)}}">Task</th>
-              <th class="ilo text-center" ng-repeat="ilo in unit.ilos | orderBy: 'abbreviation'" tooltip="{{ilo.name}}" tooltip-append-to-body="true">
-                <label class="label label-info">{{ilo.abbreviation}}</label>
-              </th>
-              <th ng-if="showIncludeTasks" class="include-in-portfolio">Include</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-repeat="task in tasks | taskForPortfolio: source === project | orderBy: 'definition.seq'">
-              <td class="task-abbreviation" tooltip="{{task.definition.name}}" tooltip-append-to-body="true">
-                <label class="label label-info">{{task.definition.abbreviation}}</label>
-              </td>
-              <td class="task-status-icon" ng-if="source === project">
-                <status-icon [status]="task.status"></status-icon>
-              </td>
-              <td class="task-name" ng-show="showTaskName">
-                {{task.definition.name}}
-              </td>
-              <td ng-repeat="ilo in unit.ilos | orderBy: 'abbreviation'" class="ilo-alignment text-center">
-                {{alignment = alignmentForTaskAndIlo(task, ilo); ''}}
-                <button ng-click="showAlignmentModal(task, ilo, alignment)" class="btn btn-sm btn-default btn-alignment">
-                  <task-ilo-alignment-rater ng-if="alignment" ng-model="alignment" compact="true"></task-ilo-alignment-rater>
-                  <i ng-hide="alignment" class="fa fa-circle-o fa-3x text-danger" tooltip-append-to-body="true" tooltip="You decided {{task.definition.abbreviation}} is not aligned to {{ilo.abbreviation}}"></i>
-                </button>
-              </td>
-              <td ng-if="showIncludeTasks" class="include-in-portfolio">
-                <div
-                  tooltip-enable="disableInclude(task)"
-                  tooltip="You cannot select this task as it is not aligned to any ILOs"
-                  tooltip-placement="left"
-                  tooltip-append-to-body="true"
-                  class="button-wrapper">
-                  <button
-                    class="btn btn-sm btn-{{task.includeInPortfolio ? 'success' : 'default'}} col-sm-6 text-center"
-                    ng-click="includeTaskInPorfolio(task)"
-                    ng-if="!disableInclude(task)">
-                    <i class="fa fa-{{task.includeInPortfolio ? 'check' : 'times'}}"></i>
-                  </button>
-                  <button
-                    class="btn btn-sm btn-warning col-sm-6 text-center"
-                    ng-disabled="disableInclude(task)"
-                    ng-show="disableInclude(task)">
-                    <i class="fa fa-question"></i>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div><!--/select-panel-body-->
-    </div><!--/select-panel-->
-    <div class="panel panel-default visualisation" ng-if="showGraph">
-      <div class="panel-heading clearfix">
-          <h4 class="panel-title pull-left">Visualisation</h4>
-          <button class="pull-right close" ng-click="closeGraph()">&times;</button>
-      </div>
-      <div class="panel-body">
-        <alignment-bar-chart unit="unit" project="project" source="source" task-status-factor="taskStatusFactor"></alignment-bar-chart>
-      </div>
-      <div class="panel-footer text-center">
-        Hover over this panel to highlight
-      </div>
-    </div><!--/visualisation-->
-  </div><!--/main-panels-->
-  <div class="col-md-3" ng-if="showCsv">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">Import Task Outcome Alignments</h3>
-        Import links between tasks and outcomes from a CSV containing: unit_code, learning_outcome, task_abbr, rating.
-      </div>
-      <div class="panel-body">
-        <file-uploader
-          files="taskAlignmentCSV"
-          url="source.taskAlignmentCSVUploadUrl"
-          is-uploading="isTaskAlignmentCSVUploading"
-          on-success="onTaskAlignmentCSVSuccess"
-          on-complete="onTaskAlignmentCSVComplete"></file-uploader>
-      </div>
-      <div class="panel-heading">
-        <h3 class="panel-title">Export Task Outcome Alignments</h3>
-        Download a CSV of task outcome alignment details.
-      </div>
-      <div class="panel-body text-center">
-        <button class="btn btn-primary btn-download" ng-click="downloadTaskAlignmentCSV()">
-          <i class="fa fa-download"></i> Download
-        </button>
-      </div>
-    </div><!--/csv-import-export-->
-  </div><!--/csv-panels-->
-</div>
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.coffee b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.coffee
deleted file mode 100644
index 0dfeb7598c..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.coffee
+++ /dev/null
@@ -1,61 +0,0 @@
-angular.module('doubtfire.tasks.task-ilo-alignment.task-ilo-alignment-rater',[])
-
-#
-# A star-based rater where the strength of an alignment between a
-# task and an ILO can be specified, along with a provided rationale
-# for that strength
-#
-.directive('taskIloAlignmentRater', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.tpl.html'
-  scope:
-    readonly: '=?'
-    # pass in whole align object
-    ngModel:  '='
-    unit: '='
-    # Function to call when rating is changed
-    onRatingChanged: '=?'
-    # Show tooltip when hovering (defaults to true)
-    tooltips: '=?'
-    # Is in colour? (defaults to true)
-    colorful: '=?'
-    # Show static tooltip for selected rating (defaults to true)
-    selectedTooltip: '=?'
-    # Show as tooltips instead (false)
-    showTooltips: '=?'
-    # Hide labels
-    hideLabels: '=?'
-    # Compact version
-    compact: '=?'
-    # Expose label outwards
-    label: '=?'
-    # Show the zero label
-    showZeroRating: '=?'
-  controller: ($scope, outcomeService) ->
-    $scope.max = 5
-
-    $scope.hideLabels ?= false
-
-    $scope.showZeroRating ?= false
-
-    $scope.readonly = true if $scope.compact
-
-    $scope.tooltips = outcomeService.alignmentLabels
-
-    $scope.setHoverValue = (value) ->
-      return $scope.ngModel if $scope.readonly and not $scope.showTooltips
-      $scope.hoveringOver = value
-      $scope.label = $scope.tooltips[value]
-
-    # Set defaults
-    for property in ['tooltips', 'colorful', 'selectedTooltip']
-      $scope[property] = if $scope[property]? then $scope[property] else true
-
-    $scope.showTooltips = if $scope.showTooltips? then $scope.showTooltips else false
-
-    if $scope.onRatingChanged?
-      $scope.$watch 'ngModel.rating', (newValue, oldValue) ->
-        if newValue? and newValue isnt oldValue
-          $scope.onRatingChanged($scope.ngModel)
-)
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.scss b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.scss
deleted file mode 100644
index dc25163248..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.task-ilo-alignment-rater {
-  &.colorful {
-    $base-color: hsl(219, 74%, 83%);
-
-    // Generates colors for 0..5 stars
-    @for $i from 1 through 5 {
-      $color: darken($base-color, $i * 10%);
-      .rating-static-tooltip .badge.rating-#{$i}, .compact-rating.rating-#{$i} {
-        background-color: $color !important;
-        color: white;
-      }
-      .rating-area {
-        i:nth-of-type(#{$i}) { color: $color; }
-      }
-    }
-  }
-  .compact-rating {
-    border-radius: 2em;
-    font-size: 2em;
-    text-align: center;
-    width: 1.5em;
-    cursor: pointer;
-    margin: 0 auto;
-  }
-  .rating-area {
-    & + *:not(.ng-hide) {
-      margin-top: 10px;
-    }
-    width: 100%;
-    text-align: center;
-    display: flex;
-    flex-wrap: nowrap;
-    &:focus {
-      outline: none;
-    }
-    i {
-      cursor: pointer;
-      padding: 0 10px;
-    }
-  }
-}
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.tpl.html b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.tpl.html
deleted file mode 100644
index cde629302d..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.tpl.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="task-ilo-alignment-rater" ng-class="{colorful: colorful}">
-  <rating ng-hide="compact" on-leave="setHoverValue(null)" on-hover="setHoverValue(value)" titles="null" ng-model="ngModel.rating" max="max" state-on="'fa fa-2x fa-circle'" state-off="'fa fa-2x fa-circle-o'" tooltip="{{label}}" tooltip-placement="right" tooltip-class="tooltip-rating-{{hoveringOver}}" tooltip-append-to-body="true" tooltip-popup-delay="200" tooltip-enable="showTooltips" readonly="readonly" class="rating-area"></rating>
-  <div ng-show="!hideLabels && selectedTooltip && !showTooltips && !compact" class="text-center rating-static-tooltip">
-    <span class="rating-{{hoveringOver || ngModel.rating}} badge" ng-hide="(hoveringOver || ngModel.rating) == 0">{{tooltips[(hoveringOver || ngModel.rating)]}}</span>
-    <span class="text-muted" ng-show="showZeroRating && !hoveringOver && ngModel.rating == 0">This task is not related to this outcome at all</span>
-  </div>
-  <div ng-show="compact && readonly" class="compact-rating rating-{{ngModel.rating}}" tooltip="{{tooltips[ngModel.rating]}}" tooltip-class="tooltip-rating-{{ngModel.rating}}" tooltip-append-to-body="true">
-    {{ngModel.rating}}
-  </div>
-</div>
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.coffee b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.coffee
deleted file mode 100644
index 2980696c1c..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.coffee
+++ /dev/null
@@ -1,35 +0,0 @@
-angular.module('doubtfire.tasks.task-ilo-alignment.task-ilo-alignment-viewer', [])
-
-#
-# Views the alignment between a task and an ILO, with descriptive
-# text of the alignment and ILO
-#
-.directive('taskIloAlignmentViewer', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.tpl.html'
-  scope:
-    currentProgress: '=?'
-    classStats: '=?'
-    project: '=?'
-    task: '=?'
-    unit: '='
-    alignments: '=?'
-    summaryOnly: '=?'
-    hideVisualisation: '=?'
-  controller: ($scope, Visualisation, outcomeService) ->
-    $scope.hideVisualisation = if $scope.hideVisualisation? then $scope.hideVisualisation else false
-    $scope.targets = outcomeService.calculateTargets($scope.unit, $scope.unit, $scope.unit.taskStatusFactor)
-
-    $scope.toggleExpanded = (align) ->
-      align.expanded = !align.expanded
-      if align.expanded
-        Visualisation.refreshAll()
-
-    $scope.alignments = $scope.unit.ilos unless $scope.alignments?
-
-    if $scope.project? and $scope.task?
-      $scope.classStats = outcomeService.calculateTaskPotentialContribution($scope.unit, $scope.project, $scope.task)
-      $scope.currentProgress = outcomeService.calculateTaskContribution($scope.unit, $scope.project, $scope.task)
-
-)
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.scss b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.scss
deleted file mode 100644
index 918893519a..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.task-ilo-alignment-viewer {
-  .related-outcome-tasks {
-    max-height: 200px;
-    overflow: scroll;
-    background-color: #ffffff;
-    border: 1px solid #dddddd;
-    border-radius: 4px;
-    .list-group li {
-      border-left: none;
-      border-right: none;
-      &:first-child {
-        border-top: none;
-      }
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-    .task-def-alignment-item {
-      font-size: 1.5em;
-      label {
-        margin-top: 10px;
-      }
-    }
-  }
-  .alignment-list {
-    margin: 0;
-    & > li {
-      border-radius: 0;
-      border: 0;
-      padding: 3em 1.5em;
-      cursor: pointer;
-      &:hover {
-        background-color: #eee;
-      }
-      &.expanded {
-        background-color: #f9f9f9;
-      }
-      header {
-        display: flex;
-        .header-item {
-          display: flex;
-          align-items: center;
-        }
-        .header-item.pull-right {
-          justify-content: flex-end;
-        }
-        .expand-icon {
-          margin-left: 2em;
-        }
-      }
-      .alignment-content {
-        h5 {
-          margin-top: 2em;
-          color: #666;
-          font-size: 1.2em;
-          font-weight: bold;
-          text-transform: uppercase;
-        }
-        .markdown-to-html {
-          font-size: 1.5em;
-        }
-      }
-    }
-    svg.nvd3-svg {
-      margin: initial;
-    }
-    & > li:not(:first-child) {
-      border-top: 1px solid #dddddd;
-    }
-  }
-}
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.tpl.html b/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.tpl.html
deleted file mode 100644
index 2032d7bf1d..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.tpl.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<div class="task-ilo-alignment-viewer">
-  <div class="clearfix" ng-if="alignments.length > 0">
-    <ul class="list-group alignment-list">
-      <li ng-click="toggleExpanded(align)" ng-class="{expanded: align.expanded}" ng-repeat="align in alignments | orderBy: 'iloNumber'" class="list-group-item col-sm-12">
-        <header class="clearfix">
-          <div class="col-sm-6 pull-left header-item">
-            {{ilo = summaryOnly ? align : unit.outcome(align.learningOutcome.id); ''}}
-            <h3 class="list-group-item-heading outcome-heading col-sm-12" style="padding: 0;">
-              <span class="col-sm-3 label label-info pull-left">{{ilo.abbreviation}}</span>
-              <span class="col-sm-9 pull-left">{{ilo.name}}</span>
-            </h3>
-          </div>
-          <div class="col-sm-6 pull-right clearfix header-item">
-            <task-ilo-alignment-rater
-              ng-hide="summaryOnly"
-              readonly="true"
-              unit="unit"
-              ng-model="align"></task-ilo-alignment-rater>
-            <div ng-if="ilo && classStats && summaryOnly">
-              <alignment-bullet-chart
-                show-legend="false"
-                unit="unit"
-                project="project"
-                ilo="ilo"
-                targets="targets"
-                current-progress="currentProgress"
-                class-stats="classStats"></alignment-bullet-chart>
-            </div>
-            <div class="expand-icon text-muted text-{{align.expanded ? 'primary' : 'muted'}}">
-              <i class="fa fa-3x fa-chevron-circle-{{align.expanded ? 'up' : 'down'}}"></i>
-            </div>
-          </div>
-        </header><!--/alignment-header-->
-        <div class="list-group-item-text alignment-content col-sm-8" ng-show="align.expanded">
-          <div ng-show="ilo.description">
-            <h5>Description</h5>
-            <div class="markdown-to-html" ng-bind-html="ilo.description | markdown | to_trusted"></div>
-          </div>
-          <div ng-if="ilo && classStats &&!hideVisualisation">
-            <h5>Visualisation</h5>
-            <alignment-bullet-chart
-              show-legend="false"
-              unit="unit"
-              project="project"
-              ilo="ilo"
-              targets="targets"
-              current-progress="currentProgress"
-              class-stats="classStats">
-            </alignment-bullet-chart>
-          </div>
-          <div ng-show="!summaryOnly && align.description">
-            <h5>Rationale</h5>
-            <div class="markdown-to-html" ng-bind-html="align.description | markdown | to_trusted"></div>
-          </div>
-          <div ng-show="summaryOnly">
-            <h5>Related Tasks</h5>
-            <div class="related-outcome-tasks">
-              <ul class="list-group">
-                <li class="list-group-item" ng-repeat="align in unit.taskOutcomeAlignments | outcomeFilter: ilo.id | orderBy: 'seq'">
-                  <div class="clearfix">
-                    <task-ilo-alignment-rater
-                      class="pull-right"
-                      readonly="true"
-                      unit="unit"
-                      show-tooltips="true"
-                      ng-model="align">
-                    </task-ilo-alignment-rater>
-                    <div class="task-def-alignment-item">
-                      <label class="label label-info task-def-label pull-left">{{align.taskDefinition.abbreviation}}</label>
-                      <span class="col-sm-6">{{align.taskDefinition.name}}</span>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-  <div class="large-notice-block" ng-hide="alignments.length > 0">
-    <i class="fa fa-2x fa-graduation-cap"></i>
-    <p>No alignments</p>
-  </div>
-</div>
diff --git a/src/app/tasks/task-ilo-alignment/task-ilo-alignment.coffee b/src/app/tasks/task-ilo-alignment/task-ilo-alignment.coffee
deleted file mode 100644
index 3de80debf5..0000000000
--- a/src/app/tasks/task-ilo-alignment/task-ilo-alignment.coffee
+++ /dev/null
@@ -1,6 +0,0 @@
-angular.module('doubtfire.tasks.task-ilo-alignment', [
-  'doubtfire.tasks.task-ilo-alignment.modals'
-  'doubtfire.tasks.task-ilo-alignment.task-ilo-alignment-editor'
-  'doubtfire.tasks.task-ilo-alignment.task-ilo-alignment-rater'
-  'doubtfire.tasks.task-ilo-alignment.task-ilo-alignment-viewer'
-])
diff --git a/src/app/tasks/task-submission-history/task-submission-history.component.html b/src/app/tasks/task-submission-history/task-submission-history.component.html
deleted file mode 100644
index 4f261b27bd..0000000000
--- a/src/app/tasks/task-submission-history/task-submission-history.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="submission-wrap">
-  <div class="submission-main">
-    <div class="submission-sidenav panel panel-primary">
-      <div class="panel-heading panel-title submission-heading">Submissions</div>
-      <mat-list class="list-group">
-        @for (tab of tabs; track tab) {
-  <mat-list-item class="list-group-item"
-          [class.selected]="tab.timestampString === selectedTab.timestampString"
-         
-          (click)="openSubmission(tab)">
-          <div style="-webkit-box-flex: 1; flex: 1;">{{tab.timestamp | date: 'dd/MM/yy, hh:mm a'}}</div>
-           &nbsp; <status-icon [status]="tab.taskStatus" ></status-icon>
-        </mat-list-item>
-}
-      </mat-list>
-    </div>
-    <div class="submisson-result">
-      <mat-tab-group dynamicHeight>
-        @for (selTab of selectedTab.content; track selTab) {
-  <mat-tab label="{{selTab.label}}">
-          <pre class="terminal-output">{{selTab.result}} </pre>
-          <button mat-button mat-flat-button [hidden]="selTab.label !== 'Error'" (click)="triggerOverseer(selectedTab)">Run Again</button>
-        </mat-tab>
-}
-      </mat-tab-group>
-    </div>
-  </div>
-</div>
diff --git a/src/app/tasks/task-submission-history/task-submission-history.component.scss b/src/app/tasks/task-submission-history/task-submission-history.component.scss
deleted file mode 100644
index 892d10e0c4..0000000000
--- a/src/app/tasks/task-submission-history/task-submission-history.component.scss
+++ /dev/null
@@ -1,184 +0,0 @@
-// @import "src/styles/mixins/flex-center";
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `$screen-xs` as of v3.0.1
-// $screen-xs:                  480px !default;
-// //** Deprecated `$screen-xs-min` as of v3.2.0
-// $screen-xs-min:              $screen-xs !default;
-// //** Deprecated `$screen-phone` as of v3.0.1
-// $screen-phone:               $screen-xs-min !default;
-
-// // Small screen / tablet
-// //** Deprecated `$screen-sm` as of v3.0.1
-// $screen-sm:                  768px !default;
-// $screen-sm-min:              $screen-sm !default;
-// //** Deprecated `$screen-tablet` as of v3.0.1
-// $screen-tablet:              $screen-sm-min !default;
-
-// // Medium screen / desktop
-// //** Deprecated `$screen-md` as of v3.0.1
-// $screen-md:                  992px !default;
-// $screen-md-min:              $screen-md !default;
-// //** Deprecated `$screen-desktop` as of v3.0.1
-// $screen-desktop:             $screen-md-min !default;
-
-// // Large screen / wide desktop
-// //** Deprecated `$screen-lg` as of v3.0.1
-// $screen-lg:                  1200px !default;
-// $screen-lg-min:              $screen-lg !default;
-// //** Deprecated `$screen-lg-desktop` as of v3.0.1
-// $screen-lg-desktop:          $screen-lg-min !default;
-
-// // So media queries don't overlap when required, provide a maximum
-// $screen-xs-max:              ($screen-sm-min - 1) !default;
-// $screen-sm-max:              ($screen-md-min - 1) !default;
-// $screen-md-max:              ($screen-lg-min - 1) !default;
-
-.submission-wrap {
-  height: 100%;
-  display: flex;
-}
-
-.submission-main {
-  flex: 1;
-  display: flex;
-  width: 100%;
-}
-
-@media (max-width: 992px) {
-  .submission-main {
-    flex-direction: column;
-  }
-}
-
-.submission-sidenav, .submisson-result {
-  overflow-y: scroll;
-  padding: 1em 1em 0 1em;
-}
-
-/*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
-/*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
-mat-list.list-group {
-  overflow-y: scroll;
-}
-
-.terminal-output {
-  padding: 10px;
-  margin: 1em 0 0 0;
-  // margin-bottom: 0;
-}
-
-.submission-sidenav {
-  flex: 1;
-  width: 100%;
-  padding: 0;
-  display: inline-block;
-  line-height: 1;
-}
-
-.submission-sidenav.panel.panel-primary{
-  margin-bottom: 0;
-}
-
-@media (max-width: 992px) {
-  .submission-sidenav.panel.panel-primary{
-    margin-bottom: 2em;
-  }
-}
-
-.submission-sidenav .panel-heading {
-  line-height: 2;
-}
-
-.submisson-result {
-  flex: 3;
-  height: 100%;
-  padding-top: 0;
-
-  padding-right: 0;
-}
-@media (max-width: 992px) {
-  .submisson-result {
-    padding-left: 0;
-  }
-}
-
-.panel-heading.panel-title.submission-heading {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-pre{
-  white-space: pre-wrap;
-}
-
-/*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
-/*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
-mat-list, mat-nav-list{
-  padding-top: 0;
-  border-bottom-width: 1px;
-  padding-bottom: 1px;
-}
-
-/*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-/*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-mat-tab-header.mat-mdc-tab-header {
-  margin-bottom: 5px;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: white;
-}
-
-
-/*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-/*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-mat-tab-body.mat-mdc-tab-body.mat-tab-body-active {
-  z-index: 1;
-}
-
-.submission-heading {
-  border-radius: 0;
-  background-color: #337ab7;
-  color: white;
-}
-
-@mixin custom-box-shadow($color) {
-  box-shadow: -15px 0 $color inset;
-}
-
-/*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
-/*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
-mat-list-item {
-  border-bottom-width: 1px !important;
-  border-color: #f5f5f5;
-  transition: all 200ms ease-out;
-  transition-property: box-shadow, padding-right;
-  display: flex;
-  &:hover, &:focus {
-    cursor: pointer;
-    text-decoration: none;
-    background-color: #F5F5F5;
-    @include custom-box-shadow(lighten(#0079D8, 15%));
-  }
-  &.selected {
-    background-color: rgb(231, 231, 231);
-    @include custom-box-shadow(#0079D8);
-  }
-}
-
-.panel > .list-group:last-child .list-group-item:last-child,
-.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
-  border-color: #f5f5f5;
-  border-style: solid;
-  border-radius: 0;
-}
-
-.panel .panel-heading {
-  margin-bottom: 0;
-  padding: 6px 15px;
-}
diff --git a/src/app/tasks/task-submission-history/task-submission-history.component.ts b/src/app/tasks/task-submission-history/task-submission-history.component.ts
deleted file mode 100644
index 916c6cd043..0000000000
--- a/src/app/tasks/task-submission-history/task-submission-history.component.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import {Component, OnInit, Inject, Input, Output, EventEmitter} from '@angular/core';
-import {TaskSubmissionService} from 'src/app/common/services/task-submission.service';
-import {Subject} from 'rxjs';
-import {OverseerAssessmentService, Task} from 'src/app/api/models/doubtfire-model';
-import {OverseerAssessment} from 'src/app/api/models/doubtfire-model';
-import {AlertService} from 'src/app/common/services/alert.service';
-
-@Component({
-  selector: 'task-submission-history',
-  templateUrl: './task-submission-history.component.html',
-  styleUrls: ['./task-submission-history.component.scss'],
-})
-export class TaskSubmissionHistoryComponent implements OnInit {
-  @Input() task: Task;
-  @Output() hasNoData = new EventEmitter<boolean>();
-  tabs: OverseerAssessment[];
-  // timestamps: string[];
-  selectedTab: OverseerAssessment = new OverseerAssessment();
-  @Input() refreshTrigger: Subject<boolean>;
-
-  constructor(
-    private alerts: AlertService,
-    private submissions: TaskSubmissionService,
-    private overseerAssessmentService: OverseerAssessmentService,
-  ) {}
-
-  ngOnInit() {
-    this.fillTabs();
-
-    this.refreshTrigger.subscribe(() => {
-      this.fillTabs();
-    });
-  }
-
-  private handleError(error: any) {
-    this.alerts.error('Error: ' + error, 6000);
-  }
-
-  fillTabs(): void {
-    // this.submissions.getLatestSubmissionsTimestamps(this.task);
-    // let transformedData = this.overseerAssessmentService.queryForTask(this.task).pipe(
-    //   map(data => {
-    //     return data.map((ts: any) => {
-    //       let result = new SubmissionTab();
-    //         timestamp: new Date(ts.submission_timestamp * 1000),
-    //         content: '',
-    //         timestampString: ts.submission_timestamp,
-    //         taskStatus: ts.result_task_status,
-    //         submissionStatus: ts.status,
-    //         createdAt: ts.created_at,
-    //         updatedAt: ts.updated_at,
-    //         taskId: ts.task_id};
-    //     });
-    //   })
-    // );
-
-    this.overseerAssessmentService.queryForTask(this.task).subscribe(
-      (tabs) => {
-        if (tabs.length === 0) {
-          this.tabs = [new OverseerAssessment()];
-          this.selectedTab.content = [
-            {label: 'No Data', result: 'There are no submissions for this task at the moment.'},
-          ];
-        } else {
-          this.tabs = tabs;
-        }
-        // if (this.selectedTab.timestampString) {
-        //   this.openSubmission(tabs.filter(x => x.timestampString === this.selectedTab.timestampString)[0]);
-        // } else {
-        //   this.openSubmission(tabs[0]);
-        // }
-      },
-      (error) => {
-        this.handleError(error);
-      },
-    );
-  }
-
-  triggerOverseer(tab: OverseerAssessment) {
-    this.overseerAssessmentService.triggerOverseer(tab).subscribe(
-      (response: OverseerAssessment) => {
-        this.alerts.success('Overseer assessment will be run again.', 2000);
-      },
-      (response: any) => {
-        this.alerts.error('Error requesting overseer assessment.', 6000);
-      },
-    );
-  }
-
-  openSubmission(tab: OverseerAssessment) {
-    this.selectedTab = tab;
-    // this.selectedTab.timestamp = tab.timestamp;
-    // this.selectedTab.timestampString = tab.timestampString;
-    // this.selectedTab.taskStatus = tab.taskStatus;
-    // this.selectedTab.submissionStatus = tab.submissionStatus;
-
-    this.submissions.getSubmissionByTimestamp(this.task, tab.timestampString).subscribe(
-      (sub) => {
-        this.selectedTab.content = sub;
-        this.hasNoData.emit(false);
-      },
-      (error) => {
-        // TODO: make error handling more readable...
-        this.selectedTab.content = [{label: 'Error', result: error?.error?.error}];
-        this.hasNoData.emit(true);
-      },
-    );
-  }
-}
diff --git a/src/app/tasks/tasks.coffee b/src/app/tasks/tasks.coffee
deleted file mode 100644
index 5144dc6667..0000000000
--- a/src/app/tasks/tasks.coffee
+++ /dev/null
@@ -1,5 +0,0 @@
-angular.module('doubtfire.tasks', [
-  'doubtfire.tasks.modals'
-  'doubtfire.tasks.task-ilo-alignment'
-  'doubtfire.tasks.project-tasks-list'
-])
diff --git a/src/app/test.service.spec.ts b/src/app/test.service.spec.ts
index 5ec9e41130..6c5f5a280c 100644
--- a/src/app/test.service.spec.ts
+++ b/src/app/test.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TestService } from './test.service';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {TestService} from './test.service';
 
 describe('TestService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/test.service.ts b/src/app/test.service.ts
index 4069839fc0..92fe881ec0 100644
--- a/src/app/test.service.ts
+++ b/src/app/test.service.ts
@@ -1,9 +1,6 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
-export class TestService {
-
-  constructor() { }
-}
+export class TestService {}
diff --git a/src/app/unit-hub/teams-meeting-composer.component.html b/src/app/unit-hub/teams-meeting-composer.component.html
new file mode 100644
index 0000000000..5495ba846b
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-composer.component.html
@@ -0,0 +1,59 @@
+<section aria-label="Prepare a Teams meeting" class="teams-composer">
+  <h3>Make a Teams meeting</h3>
+  <p>Open a draft with these session details. Check the invitation, then press Send in Teams.</p>
+  @if (draft) {
+    <p class="meeting-subject">
+      <strong>{{ unitCode }} · {{ draft.title }}</strong
+      ><br />{{ schedule }}
+    </p>
+    <label class="field">
+      <span>Attendees (optional)</span>
+      <input
+        autocapitalize="none"
+        autocomplete="off"
+        maxlength="5100"
+        placeholder="name@university.edu, another@university.edu"
+        spellcheck="false"
+        type="text"
+        [formControl]="attendees"
+        (keydown.enter)="$event.preventDefault()"
+      />
+      <small>Use university sign-in email addresses. You can add more people in Teams.</small>
+    </label>
+    <label class="field">
+      <span>Teams details</span>
+      <textarea maxlength="20500" rows="5" [formControl]="content"></textarea>
+      <small>Edits here apply to the Teams draft. Your OnTrack session stays as entered.</small>
+    </label>
+    @if (draft.recurrence === 'weekly') {
+      <p class="repeat-note">
+        This opens one session. Set the weekly repeat schedule in Teams before sending.
+        @if (draft.recurrence_until) {
+          Use {{ draft.recurrence_until }} as the last date.
+        }
+      </p>
+    }
+  }
+  @let result = launch;
+  @if (result.url) {
+    <a
+      aria-label="Open Teams draft in a new tab"
+      mat-flat-button
+      rel="noopener noreferrer"
+      target="_blank"
+      [href]="result.url"
+      >Open Teams draft</a
+    >
+  } @else {
+    <button disabled mat-flat-button type="button">Open Teams draft</button>
+    <p class="draft-error" role="status">{{ result.error }}</p>
+  }
+  <p class="handoff-note">
+    Your OnTrack form stays open. After sending in Teams, copy the meeting’s join link back into the
+    session and save it.
+  </p>
+  <p class="fallback-note">
+    Teams may ask you to sign in or choose its app or website. If the draft does not open on your
+    phone, use a desktop browser or copy the details into Teams.
+  </p>
+</section>
diff --git a/src/app/unit-hub/teams-meeting-composer.component.scss b/src/app/unit-hub/teams-meeting-composer.component.scss
new file mode 100644
index 0000000000..dbb7a4fcf3
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-composer.component.scss
@@ -0,0 +1,78 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+.teams-composer {
+  padding: 1rem;
+  border: 1px solid #b9c9df;
+  border-radius: 0.75rem;
+  background: #f5f8fd;
+  color: #20344d;
+  overflow-wrap: anywhere;
+}
+
+h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+}
+
+p {
+  margin: 0.6rem 0;
+}
+.meeting-subject {
+  line-height: 1.6;
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  margin: 1rem 0;
+  font-weight: 600;
+}
+
+input,
+textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 0.65rem;
+  border: 1px solid #8498b2;
+  border-radius: 0.35rem;
+  background: white;
+  color: #172b43;
+  font: inherit;
+  font-weight: 400;
+}
+
+textarea {
+  resize: vertical;
+}
+small,
+.handoff-note,
+.fallback-note {
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+.repeat-note {
+  font-weight: 600;
+}
+.draft-error {
+  color: #9b241a;
+}
+input:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+  outline: 3px solid #215da6;
+  outline-offset: 2px;
+}
+
+@media (max-width: 480px) {
+  .teams-composer {
+    padding: 0.8rem;
+  }
+  a,
+  button {
+    width: 100%;
+  }
+}
diff --git a/src/app/unit-hub/teams-meeting-composer.component.spec.ts b/src/app/unit-hub/teams-meeting-composer.component.spec.ts
new file mode 100644
index 0000000000..8e62e89ec6
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-composer.component.spec.ts
@@ -0,0 +1,146 @@
+import {describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {TeamsMeetingComposerComponent} from './teams-meeting-composer.component';
+import {TeamsMeetingDraft} from './teams-meeting-draft';
+
+const session = (): TeamsMeetingDraft => ({
+  title: 'Computer Systems HelpHub',
+  description: 'Bring your questions.',
+  start_at: '2026-09-17T07:00:00Z',
+  end_at: '2026-09-17T08:00:00Z',
+  timezone: 'Australia/Melbourne',
+  recurrence: 'none',
+});
+
+function open(draft: TeamsMeetingDraft | null = session()) {
+  const fixture = TestBed.createComponent(TeamsMeetingComposerComponent);
+  fixture.componentRef.setInput('draft', draft);
+  fixture.componentRef.setInput('unitCode', 'SIT111');
+  fixture.detectChanges();
+  return {
+    fixture,
+    component: fixture.componentInstance,
+    element: fixture.nativeElement as HTMLElement,
+  };
+}
+
+describe('Teams meeting composer', () => {
+  it('does not submit an enclosing OnTrack form when Enter is pressed in attendees', () => {
+    const {element} = open();
+    const event = new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, cancelable: true});
+    element.querySelector('input').dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('renders a labelled, explicit draft link without any meeting creation action', () => {
+    const {element} = open();
+    const link = element.querySelector('a') as HTMLAnchorElement;
+    expect(link.textContent).toContain('Open Teams draft');
+    expect(link.origin).toBe('https://teams.microsoft.com');
+    expect(link.pathname).toBe('/l/meeting/new');
+    expect(link.target).toBe('_blank');
+    expect(link.rel).toBe('noopener noreferrer');
+    expect(element.textContent).toContain('press Send in Teams');
+    expect(element.textContent).toContain('copy the meeting’s join link back');
+    expect(element.querySelector('input')?.closest('label')?.textContent).toContain('Attendees');
+    expect(element.querySelector('textarea')?.closest('label')?.textContent).toContain(
+      'Teams details',
+    );
+    expect(element.querySelector('form')).toBeNull();
+  });
+
+  it('shows an actionable reason when the parent form is incomplete', () => {
+    const {fixture, element} = open(null);
+    fixture.componentRef.setInput('unavailableReason', 'Choose a valid end time.');
+    fixture.detectChanges();
+    expect(element.querySelector('a')).toBeNull();
+    expect(element.querySelector('button')?.disabled).toBe(true);
+    expect(element.querySelector('button')?.type).toBe('button');
+    expect(element.querySelector('[role="status"]')?.textContent).toContain(
+      'Choose a valid end time',
+    );
+  });
+
+  it('uses locally edited details and attendees while leaving the parent draft untouched', () => {
+    const draft = Object.freeze(session());
+    const {fixture, component, element} = open(draft);
+    component.content.setValue('Shorter invitation');
+    component.attendees.setValue('tutor@example.edu');
+    fixture.detectChanges();
+    const url = new URL((element.querySelector('a') as HTMLAnchorElement).href);
+    expect(url.searchParams.get('content')).toBe('Shorter invitation');
+    expect(url.searchParams.get('attendees')).toBe('tutor@example.edu');
+    expect(draft.description).toBe('Bring your questions.');
+    expect(draft.title).toBe('Computer Systems HelpHub');
+  });
+
+  it('retains composer edits across equivalent snapshots and time adjustments', () => {
+    const {fixture, component} = open();
+    component.content.setValue('My draft details');
+    component.attendees.setValue('tutor@example.edu');
+    fixture.componentRef.setInput('draft', {...session()});
+    fixture.detectChanges();
+    expect(component.content.value).toBe('My draft details');
+    fixture.componentRef.setInput('draft', {...session(), end_at: '2026-09-17T09:00:00Z'});
+    fixture.detectChanges();
+    expect(component.content.value).toBe('My draft details');
+    expect(new URL(component.launch.url).searchParams.get('endTime')).toBe(
+      '2026-09-17T09:00:00.000Z',
+    );
+  });
+
+  it('clears attendee selection when the unit changes or the draft is removed', () => {
+    const {fixture, component} = open();
+    component.attendees.setValue('previous-unit@example.edu');
+    fixture.componentRef.setInput('unitCode', 'SIT102');
+    fixture.detectChanges();
+    expect(component.attendees.value).toBe('');
+    expect(component.content.value).toContain('SIT102');
+    component.attendees.setValue('tutor@example.edu');
+    fixture.componentRef.setInput('draft', null);
+    fixture.detectChanges();
+    expect(component.attendees.value).toBe('');
+    expect(component.content.value).toBe('');
+    expect(component.launch.url).toBeNull();
+  });
+
+  it('updates details from changed session content and never renders it as HTML', () => {
+    const {fixture, component, element} = open();
+    fixture.componentRef.setInput('draft', {
+      ...session(),
+      description: '<img src=x onerror=alert(1)>',
+    });
+    fixture.detectChanges();
+    expect(component.content.value).toContain('<img');
+    expect(element.querySelector('img')).toBeNull();
+    expect(element.querySelector('textarea')?.value).toContain('<img');
+  });
+
+  it('discloses repeating schedule and mobile fallback limitations', () => {
+    const {element} = open({...session(), recurrence: 'weekly', recurrence_until: '2026-11-26'});
+    expect(element.textContent).toContain('Set the weekly repeat schedule in Teams');
+    expect(element.textContent).toContain('2026-11-26');
+    expect(element.textContent).toContain('If the draft does not open on your phone');
+    expect(
+      new URL((element.querySelector('a') as HTMLAnchorElement).href).searchParams.has(
+        'recurrence',
+      ),
+    ).toBe(false);
+  });
+
+  it('removes the actionable link for invalid attendees and oversized drafts, then recovers', () => {
+    const {fixture, component, element} = open();
+    component.attendees.setValue('not an email');
+    fixture.detectChanges();
+    expect(element.querySelector('a')).toBeNull();
+    expect(element.textContent).toContain('sign-in email addresses');
+    component.attendees.setValue('');
+    component.content.setValue('🙂'.repeat(1500));
+    fixture.detectChanges();
+    expect(element.querySelector('a')).toBeNull();
+    expect(element.textContent).toContain('Shorten the Teams details');
+    component.content.setValue('Shortened safely');
+    fixture.detectChanges();
+    expect(element.querySelector('a')).not.toBeNull();
+  });
+});
diff --git a/src/app/unit-hub/teams-meeting-composer.component.ts b/src/app/unit-hub/teams-meeting-composer.component.ts
new file mode 100644
index 0000000000..ad6f0f918b
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-composer.component.ts
@@ -0,0 +1,86 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Input, OnChanges} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {TeamsMeetingDraft, teamsMeetingContent, teamsMeetingDraftUrl} from './teams-meeting-draft';
+
+@Component({
+  selector: 'f-teams-meeting-composer',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, MatButtonModule],
+  templateUrl: './teams-meeting-composer.component.html',
+  styleUrl: './teams-meeting-composer.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+export class TeamsMeetingComposerComponent implements OnChanges {
+  @Input() draft: TeamsMeetingDraft | null = null;
+  @Input() unitCode = '';
+  @Input() unavailableReason = '';
+
+  readonly attendees = new FormControl('', {nonNullable: true});
+  readonly content = new FormControl('', {nonNullable: true});
+  private previousUnit = '';
+  private initialContent: string | null = null;
+
+  ngOnChanges(): void {
+    if (this.previousUnit !== this.unitCode || !this.draft) {
+      this.attendees.setValue('');
+      this.previousUnit = this.unitCode;
+    }
+    if (!this.draft) {
+      this.initialContent = null;
+      this.content.setValue('');
+      return;
+    }
+    try {
+      const initial = teamsMeetingContent(this.draft, this.unitCode);
+      // A parent getter can return a fresh snapshot on every change detection pass.
+      if (initial !== this.initialContent) {
+        this.initialContent = initial;
+        this.content.setValue(initial);
+      }
+    } catch {
+      this.initialContent = null;
+      this.content.setValue('');
+    }
+  }
+
+  get launch(): {url: string | null; error: string} {
+    if (!this.draft) {
+      return {
+        url: null,
+        error: this.unavailableReason || 'Enter the session title, dates and time zone first.',
+      };
+    }
+    try {
+      return {
+        url: teamsMeetingDraftUrl(this.draft, this.unitCode, {
+          attendees: this.attendees.value,
+          content: this.content.value,
+        }),
+        error: '',
+      };
+    } catch (error) {
+      return {
+        url: null,
+        error: error instanceof Error ? error.message : 'Check the meeting details.',
+      };
+    }
+  }
+
+  get schedule(): string {
+    if (!this.draft) {
+      return '';
+    }
+    try {
+      const format = new Intl.DateTimeFormat(undefined, {
+        timeZone: this.draft.timezone,
+        dateStyle: 'medium',
+        timeStyle: 'short',
+      });
+      return `${format.format(new Date(this.draft.start_at))} – ${format.format(new Date(this.draft.end_at))} (${this.draft.timezone})`;
+    } catch {
+      return '';
+    }
+  }
+}
diff --git a/src/app/unit-hub/teams-meeting-draft.spec.ts b/src/app/unit-hub/teams-meeting-draft.spec.ts
new file mode 100644
index 0000000000..ccec892c85
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-draft.spec.ts
@@ -0,0 +1,166 @@
+import {describe, expect, it} from 'vitest';
+import {
+  TEAMS_MEETING_MAX_URL_LENGTH,
+  TeamsMeetingDraft,
+  teamsMeetingAttendees,
+  teamsMeetingContent,
+  teamsMeetingDraftUrl,
+} from './teams-meeting-draft';
+import {dateTimeToIso} from './unit-hub-calendar';
+
+const session = (): TeamsMeetingDraft => ({
+  title: 'Hardware questions & answers',
+  description: 'Bring your circuit questions.\nWe will discuss the next task.',
+  start_at: '2026-09-17T17:00:00+10:00',
+  end_at: '2026-09-17T18:00:00+10:00',
+  timezone: 'Australia/Melbourne',
+  location: 'Online',
+  recurrence: 'none',
+});
+
+describe('Teams meeting draft URLs', () => {
+  it('uses the supported HTTPS scheduling endpoint and only documented parameters', () => {
+    const value = teamsMeetingDraftUrl(session(), 'SIT111');
+    const url = new URL(value);
+    expect(url.origin + url.pathname).toBe('https://teams.microsoft.com/l/meeting/new');
+    expect([...url.searchParams.keys()]).toEqual(['subject', 'startTime', 'endTime', 'content']);
+    expect(url.searchParams.get('subject')).toBe('SIT111 · Hardware questions & answers');
+    expect(url.searchParams.get('startTime')).toBe('2026-09-17T07:00:00.000Z');
+    expect(url.searchParams.get('endTime')).toBe('2026-09-17T08:00:00.000Z');
+    expect(url.searchParams.get('content')).toContain('Location: Online');
+    expect(value).toContain('%20');
+    expect(value).not.toContain('+');
+  });
+
+  it('converts Melbourne summer time without depending on the device time zone', () => {
+    const draft = {
+      ...session(),
+      start_at: dateTimeToIso('2026-10-08T17:00', 'Australia/Melbourne'),
+      end_at: dateTimeToIso('2026-10-08T18:00', 'Australia/Melbourne'),
+    };
+    const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+    expect(url.searchParams.get('startTime')).toBe('2026-10-08T06:00:00.000Z');
+    expect(url.searchParams.get('endTime')).toBe('2026-10-08T07:00:00.000Z');
+  });
+
+  it('handles half-hour offsets and an end time on the next local day', () => {
+    const draft = {
+      ...session(),
+      timezone: 'Asia/Kolkata',
+      start_at: '2026-09-17T23:30:00+05:30',
+      end_at: '2026-09-18T00:30:00+05:30',
+    };
+    const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+    expect(url.searchParams.get('startTime')).toBe('2026-09-17T18:00:00.000Z');
+    expect(url.searchParams.get('endTime')).toBe('2026-09-17T19:00:00.000Z');
+  });
+
+  it.each([
+    '2026-09-17T17:00',
+    '2026-02-30T17:00:00Z',
+    '2026-09-17T24:00:00Z',
+    '2026-09-17T17:00:60Z',
+    'not a date',
+  ])('rejects an invalid or unzoned time: %s', (value) => {
+    expect(() => teamsMeetingDraftUrl({...session(), start_at: value}, 'SIT111')).toThrow();
+  });
+
+  it('rejects cancelled sessions, backwards times and invalid time zones', () => {
+    expect(() => teamsMeetingDraftUrl({...session(), cancelled: true}, 'SIT111')).toThrow(
+      /scheduled/,
+    );
+    expect(() =>
+      teamsMeetingDraftUrl({...session(), end_at: session().start_at}, 'SIT111'),
+    ).toThrow(/after/);
+    expect(() => teamsMeetingDraftUrl({...session(), timezone: 'Mars/Anywhere'}, 'SIT111')).toThrow(
+      /time zone/,
+    );
+    expect(() => teamsMeetingDraftUrl({...session(), timezone: ''}, 'SIT111')).toThrow(/time zone/);
+  });
+
+  it('encodes query delimiters, literal plus signs and Unicode as data', () => {
+    const draft = {
+      ...session(),
+      title: 'C++ & 电路 #1',
+      description: '<b>Review</b> &attendees=other@example.edu',
+    };
+    const url = new URL(
+      teamsMeetingDraftUrl(draft, 'SIT111', {attendees: 'person+lab@example.edu'}),
+    );
+    expect([...url.searchParams.keys()]).toHaveLength(5);
+    expect(url.searchParams.get('subject')).toBe('SIT111 · C++ & 电路 #1');
+    expect(url.searchParams.get('content')).toContain('<b>Review</b> &attendees=other@example.edu');
+    expect(url.searchParams.get('attendees')).toBe('person+lab@example.edu');
+    expect(url.hash).toBe('');
+  });
+
+  it('accepts explicit Entra UPNs, removes duplicates and omits empty attendees', () => {
+    expect(teamsMeetingAttendees('A@example.edu; b@example.edu\nA@EXAMPLE.edu')).toEqual([
+      'A@example.edu',
+      'b@example.edu',
+    ]);
+    expect(
+      new URL(teamsMeetingDraftUrl(session(), 'SIT111', {attendees: ' '})).searchParams.has(
+        'attendees',
+      ),
+    ).toBe(false);
+    expect(teamsMeetingAttendees('guest_example.com#EXT#@tenant.onmicrosoft.com')).toHaveLength(1);
+  });
+
+  it.each([
+    'Display Name <a@example.edu>',
+    'a@example.edu&content=bad',
+    'a@-bad.edu',
+    'a@example..edu',
+    'a@example.edu,',
+    'a@example.edu\r\nBcc: b@example.edu',
+  ])('rejects malformed attendee input: %s', (value) => {
+    expect(() => teamsMeetingAttendees(value)).toThrow(/sign-in/);
+  });
+
+  it('bounds attendees and URL length without silently losing details', () => {
+    const many = Array.from({length: 21}, (_, i) => `person${i}@example.edu`).join(',');
+    expect(() => teamsMeetingAttendees(many)).toThrow(/20 attendees/);
+    const draft = {...session(), description: '🙂'.repeat(1500)};
+    expect(() => teamsMeetingDraftUrl(draft, 'SIT111')).toThrow(/too long/);
+    const shortened = teamsMeetingDraftUrl(draft, 'SIT111', {content: 'Short draft details'});
+    expect(shortened.length).toBeLessThanOrEqual(TEAMS_MEETING_MAX_URL_LENGTH);
+    expect(draft.description).toHaveLength(3000);
+  });
+
+  it('never copies an existing join URL, source URL or invents recurrence parameters', () => {
+    const draft = {
+      ...session(),
+      recurrence: 'weekly' as const,
+      recurrence_until: '2026-11-26',
+      join_url: 'https://teams.microsoft.com/l/meetup-join/existing',
+      source_url: 'https://example.edu/private',
+    };
+    const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+    expect(url.searchParams.has('recurrence')).toBe(false);
+    expect(url.searchParams.has('location')).toBe(false);
+    expect(url.searchParams.get('content')).not.toContain('https://');
+  });
+
+  it('rejects control characters and overlong fields while preserving ordinary line breaks', () => {
+    expect(teamsMeetingContent({...session(), description: 'First\r\nSecond'}, 'SIT111')).toContain(
+      'First\nSecond',
+    );
+    expect(() => teamsMeetingDraftUrl({...session(), title: 'bad\nsubject'}, 'SIT111')).toThrow(
+      /one line/,
+    );
+    expect(() =>
+      teamsMeetingDraftUrl({...session(), description: 'bad\u0000text'}, 'SIT111'),
+    ).toThrow(/characters/);
+    expect(() => teamsMeetingDraftUrl({...session(), title: 'x'.repeat(201)}, 'SIT111')).toThrow(
+      /200/,
+    );
+  });
+
+  it('opens a draft for an API session saved without a description', () => {
+    const draft = {...session(), description: null as unknown as string, location: null};
+    expect(teamsMeetingContent(draft, 'SIT111')).toBe('Unit: SIT111');
+    const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+    expect(url.searchParams.get('content')).toBe('Unit: SIT111');
+  });
+});
diff --git a/src/app/unit-hub/teams-meeting-draft.ts b/src/app/unit-hub/teams-meeting-draft.ts
new file mode 100644
index 0000000000..40027f2bd7
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-draft.ts
@@ -0,0 +1,151 @@
+/** A snapshot of the editor. Times are resolved instants, not local input values. */
+export interface TeamsMeetingDraft {
+  title: string;
+  description: string;
+  start_at: string;
+  end_at: string;
+  timezone: string;
+  location?: string | null;
+  recurrence?: 'none' | 'weekly';
+  recurrence_until?: string | null;
+  cancelled?: boolean;
+}
+
+export interface TeamsMeetingOptions {
+  attendees?: string;
+  content?: string;
+}
+
+// These are OnTrack's bounds for a portable draft URL, not Microsoft service limits.
+export const TEAMS_MEETING_MAX_URL_LENGTH = 8000;
+export const TEAMS_MEETING_MAX_ATTENDEES = 20;
+
+function plainText(value: string, label: string, maximum: number): string {
+  if (typeof value !== 'string' || value.length > maximum) {
+    throw new Error(`${label} must be ${maximum} characters or fewer.`);
+  }
+  if (/\p{Cc}/u.test(value.replace(/[\r\n\t]/g, ''))) {
+    throw new Error(`${label} contains unsupported characters.`);
+  }
+  return value.replace(/\r\n?/g, '\n').trim();
+}
+
+function instant(value: string): string {
+  const match =
+    typeof value === 'string' &&
+    value.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})(?::(\d{2})(\.\d{1,3})?)?(Z|[+-]\d{2}:\d{2})$/);
+  if (!match) {
+    throw new Error('Set a complete start and end time, including the time zone.');
+  }
+  const wall = `${match[1]}:${match[2] || '00'}`;
+  const wallDate = new Date(`${wall}Z`);
+  const date = new Date(value);
+  if (
+    !Number.isFinite(date.getTime()) ||
+    !Number.isFinite(wallDate.getTime()) ||
+    wallDate.toISOString().slice(0, 19) !== wall
+  ) {
+    throw new Error('Set a valid start and end time.');
+  }
+  return date.toISOString();
+}
+
+export function teamsMeetingAttendees(value = ''): string[] {
+  if (value.length > 5100) {
+    throw new Error(`Add no more than ${TEAMS_MEETING_MAX_ATTENDEES} attendees.`);
+  }
+  const entries = value.trim() ? value.split(/[,;\n]+/).map((entry) => entry.trim()) : [];
+  const attendees: string[] = [];
+  const seen: Set<string> = new Set();
+  for (const entry of entries) {
+    const pieces = entry.split('@');
+    const validDomain = pieces[1]
+      ?.split('.')
+      .every((label) => /^[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?$/i.test(label));
+    if (
+      entry.length > 254 ||
+      pieces.length !== 2 ||
+      !validDomain ||
+      !/^[a-z\d.!#$%&'*+/=?^_`{|}~-]+$/i.test(pieces[0])
+    ) {
+      throw new Error('Enter university sign-in email addresses, separated by commas.');
+    }
+    const key = entry.toLowerCase();
+    if (!seen.has(key)) {
+      attendees.push(entry);
+      seen.add(key);
+    }
+  }
+  if (attendees.length > TEAMS_MEETING_MAX_ATTENDEES) {
+    throw new Error(
+      `Add no more than ${TEAMS_MEETING_MAX_ATTENDEES} attendees here; add others in Teams.`,
+    );
+  }
+  return attendees;
+}
+
+export function teamsMeetingContent(draft: TeamsMeetingDraft, unitCode: string): string {
+  const code = plainText(unitCode, 'Unit code', 50);
+  // The API returns null when a session was saved without a description.
+  const description = plainText(draft.description || '', 'Session details', 20000);
+  const location = plainText(draft.location || '', 'Location', 300);
+  return [code ? `Unit: ${code}` : '', description, location ? `Location: ${location}` : '']
+    .filter(Boolean)
+    .join('\n\n');
+}
+
+/**
+ * Open a scheduling draft only. This never creates a meeting or discovers a join URL.
+ * https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-link-workflow
+ * Only documented fields are used. Recurrence and location are not URL parameters.
+ */
+export function teamsMeetingDraftUrl(
+  draft: TeamsMeetingDraft,
+  unitCode: string,
+  options: TeamsMeetingOptions = {},
+): string {
+  if (!draft || draft.cancelled) {
+    throw new Error('Use a scheduled session to prepare a Teams meeting.');
+  }
+  const title = plainText(draft.title, 'Session title', 200);
+  const code = plainText(unitCode, 'Unit code', 50);
+  if (!title || /[\r\n]/.test(title) || /[\r\n]/.test(code)) {
+    throw new Error('Enter a session title on one line.');
+  }
+  const start = instant(draft.start_at);
+  const end = instant(draft.end_at);
+  if (new Date(end).getTime() <= new Date(start).getTime()) {
+    throw new Error('The end time must be after the start time.');
+  }
+  try {
+    new Intl.DateTimeFormat('en', {timeZone: draft.timezone}).format(new Date(start));
+    if (!draft.timezone) {
+      throw new Error();
+    }
+  } catch {
+    throw new Error('Choose a valid session time zone.');
+  }
+  const defaultContent = teamsMeetingContent(draft, code);
+  const content = plainText(options.content ?? defaultContent, 'Teams details', 20500);
+  const attendees = teamsMeetingAttendees(options.attendees);
+  const parameters: Record<string, string> = {
+    subject: code ? `${code} · ${title}` : title,
+    startTime: start,
+    endTime: end,
+    content,
+  };
+  if (attendees.length) {
+    parameters.attendees = attendees.join(',');
+  }
+  // URLSearchParams uses + for spaces, which this Teams endpoint does not support.
+  const query = Object.entries(parameters)
+    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+    .join('&');
+  const url = `https://teams.microsoft.com/l/meeting/new?${query}`;
+  if (url.length > TEAMS_MEETING_MAX_URL_LENGTH) {
+    throw new Error(
+      'This draft is too long to open reliably. Shorten the Teams details or add attendees in Teams.',
+    );
+  }
+  return url;
+}
diff --git a/src/app/unit-hub/unit-hub-calendar.spec.ts b/src/app/unit-hub/unit-hub-calendar.spec.ts
new file mode 100644
index 0000000000..cf8004d69c
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-calendar.spec.ts
@@ -0,0 +1,93 @@
+import {describe, expect, it} from 'vitest';
+import {
+  dateTimeInZone,
+  dateTimeToIso,
+  googleSessionUrl,
+  safeHttpsUrl,
+  sessionIcs,
+} from './unit-hub-calendar';
+import {unitHubDemo} from './unit-hub-demo.fixtures';
+
+const session = {
+  ...unitHubDemo().sessions[0],
+  start_at: '2026-09-17T17:00:00+10:00',
+  end_at: '2026-09-17T18:00:00+10:00',
+  title: 'HelpHub & questions / hardware',
+  join_url: 'https://teams.microsoft.com/l/meetup-join/abc?context=%7B%22Tid%22%3A%22x%22%7D',
+};
+
+describe('Unit Hub calendar exports and time zones', () => {
+  it('encodes a one-off Google draft with exact UTC times and an intact joining URL', () => {
+    const url = new URL(googleSessionUrl(session, 'SIT111'));
+    expect(url.origin).toBe('https://calendar.google.com');
+    expect(url.searchParams.get('dates')).toBe('20260917T070000Z/20260917T080000Z');
+    expect(url.searchParams.get('text')).toBe('SIT111 · HelpHub & questions / hardware');
+    expect(url.searchParams.get('details')).toContain(session.join_url);
+    expect(url.searchParams.has('recur')).toBe(false);
+  });
+
+  it('creates a timed ICS event with stable identity and end time', () => {
+    const ics = sessionIcs(session, 'SIT111', new Date('2026-09-01T00:00:00Z'));
+    expect(ics).toContain('DTSTART:20260917T070000Z\r\nDTEND:20260917T080000Z');
+    expect(ics).toContain('UID:unit-111-session-1-20260917T070000Z@ontrack');
+    expect(ics).toContain('DTSTAMP:20260901T000000Z');
+    expect(ics).not.toContain('VALUE=DATE');
+    expect(ics.endsWith('\r\n')).toBe(true);
+  });
+
+  it('escapes injected ICS lines and folds Unicode without splitting code points', () => {
+    const ics = sessionIcs(
+      {
+        ...session,
+        title: '界'.repeat(60),
+        description: 'Hello\r\nEND:VEVENT\r\nBEGIN:VEVENT;attacker,hello',
+      },
+      'SIT111',
+    );
+    expect(ics.split('\r\n').filter((line) => line === 'BEGIN:VEVENT')).toHaveLength(1);
+    expect(ics).toContain('Hello\\nEND:VEVENT\\nBEGIN:VEVENT\\;attacker\\,hello');
+    for (const line of ics.split('\r\n')) {
+      expect(new TextEncoder().encode(line).length).toBeLessThanOrEqual(75);
+    }
+    expect(ics).not.toContain('�');
+  });
+
+  it.each([
+    'javascript:alert(1)',
+    'data:text/html,hello',
+    '//evil.example/a',
+    'http://teams.example/a',
+    'https://u:p@example.com',
+    'https://example.com/\nattack',
+  ])('rejects unsafe URL %s', (url) => {
+    expect(safeHttpsUrl(url)).toBeNull();
+  });
+
+  it.each([
+    ['2026-09-17T17:00', '2026-09-17T07:00:00.000Z'],
+    ['2026-10-08T17:00', '2026-10-08T06:00:00.000Z'],
+  ])('resolves Melbourne local time %s across daylight saving', (local, iso) => {
+    expect(dateTimeToIso(local, 'Australia/Melbourne')).toBe(iso);
+    expect(dateTimeInZone(iso, 'Australia/Melbourne')).toBe(local);
+  });
+
+  it('rejects missing or repeated wall-clock times instead of silently moving a meeting', () => {
+    expect(() => dateTimeToIso('2026-10-04T02:30', 'Australia/Melbourne')).toThrow('clocks change');
+    expect(() => dateTimeToIso('2026-04-05T02:30', 'Australia/Melbourne')).toThrow('clocks change');
+    expect(() => dateTimeToIso('2026-02-30T10:00', 'Australia/Melbourne')).toThrow();
+  });
+
+  it('gives demo calendar copies a separate UID from real sessions', () => {
+    const now = new Date('2026-09-14T00:00:00Z');
+    const demo = sessionIcs(session, 'SIT111', now, 'demo');
+    const live = sessionIcs(session, 'SIT111', now);
+    expect(demo).toContain('UID:demo-unit-111-session-1');
+    expect(live).toContain('UID:unit-111-session-1');
+    expect(demo).not.toContain('UID:unit-111-session-1');
+  });
+
+  it('does not export a cancelled or reversed session', () => {
+    expect(() => googleSessionUrl({...session, cancelled: true}, 'SIT111')).toThrow();
+    expect(() => sessionIcs({...session, end_at: session.start_at}, 'SIT111')).toThrow();
+  });
+});
diff --git a/src/app/unit-hub/unit-hub-calendar.ts b/src/app/unit-hub/unit-hub-calendar.ts
new file mode 100644
index 0000000000..384a4a7b1e
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-calendar.ts
@@ -0,0 +1,154 @@
+import {LearningSession} from './unit-hub.models';
+
+export function safeHttpsUrl(value: string | null | undefined): string | null {
+  if (!value || /[\p{Cc}\s]/u.test(value)) {
+    return null;
+  }
+  try {
+    const url = new URL(value);
+    return url.protocol === 'https:' && !url.username && !url.password ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+function utcStamp(value: string | Date): string {
+  const date = new Date(value);
+  if (!Number.isFinite(date.getTime())) {
+    throw new Error('This session has an invalid date.');
+  }
+  return date
+    .toISOString()
+    .replace(/[-:]/g, '')
+    .replace(/\.\d{3}/, '');
+}
+
+function validSession(session: LearningSession): void {
+  if (
+    session.cancelled ||
+    new Date(session.end_at).getTime() <= new Date(session.start_at).getTime()
+  ) {
+    throw new Error('Only scheduled sessions with a valid end time can be added.');
+  }
+}
+
+export function googleSessionUrl(session: LearningSession, unitCode: string): string {
+  validSession(session);
+  const details = [
+    session.description,
+    safeHttpsUrl(session.join_url),
+    safeHttpsUrl(session.source_url),
+  ]
+    .filter(Boolean)
+    .join('\n\n');
+  const params = new URLSearchParams({
+    action: 'TEMPLATE',
+    text: `${unitCode} · ${session.title}`,
+    dates: `${utcStamp(session.start_at)}/${utcStamp(session.end_at)}`,
+    details,
+    location: session.location || safeHttpsUrl(session.join_url) || 'Online',
+  });
+  return `https://calendar.google.com/calendar/render?${params.toString()}`;
+}
+
+function escapeIcs(value: string): string {
+  return value
+    .replace(/\\/g, '\\\\')
+    .replace(/\r\n|\r|\n/g, '\\n')
+    .replace(/;/g, '\\;')
+    .replace(/,/g, '\\,')
+    .replace(/\p{Cc}/gu, '');
+}
+
+/** RFC 5545 lines are folded at 75 UTF-8 octets, without breaking a code point. */
+function foldIcs(line: string): string {
+  const encoder = new TextEncoder();
+  let folded = '';
+  let octets = 0;
+  for (const character of line) {
+    const size = encoder.encode(character).length;
+    if (octets + size > 75) {
+      folded += '\r\n ';
+      octets = 1;
+    }
+    folded += character;
+    octets += size;
+  }
+  return folded;
+}
+
+export function sessionIcs(
+  session: LearningSession,
+  unitCode: string,
+  now = new Date(),
+  namespace: 'live' | 'demo' = 'live',
+): string {
+  validSession(session);
+  const start = utcStamp(session.start_at);
+  const description = [
+    session.description,
+    safeHttpsUrl(session.join_url),
+    safeHttpsUrl(session.source_url),
+  ]
+    .filter(Boolean)
+    .join('\n\n');
+  return [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'PRODID:-//OnTrack//Unit Hub//EN',
+    'CALSCALE:GREGORIAN',
+    'BEGIN:VEVENT',
+    `UID:${namespace === 'demo' ? 'demo-' : ''}unit-${session.unit_id}-session-${session.id}-${start}@ontrack`,
+    `DTSTAMP:${utcStamp(now)}`,
+    `DTSTART:${start}`,
+    `DTEND:${utcStamp(session.end_at)}`,
+    `SUMMARY:${escapeIcs(`${unitCode} · ${session.title}`)}`,
+    `DESCRIPTION:${escapeIcs(description)}`,
+    `LOCATION:${escapeIcs(session.location || safeHttpsUrl(session.join_url) || 'Online')}`,
+    'END:VEVENT',
+    'END:VCALENDAR',
+    '',
+  ]
+    .map(foldIcs)
+    .join('\r\n');
+}
+
+export function dateTimeInZone(iso: string, timeZone: string): string {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hourCycle: 'h23',
+  }).formatToParts(new Date(iso));
+  const part = (type: string) => parts.find((item) => item.type === type)?.value;
+  return `${part('year')}-${part('month')}-${part('day')}T${part('hour')}:${part('minute')}`;
+}
+
+/** Resolve a wall-clock value in its named time zone. Reject DST gaps and ambiguous times. */
+export function dateTimeToIso(value: string, timeZone: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value)) {
+    throw new Error('Enter a complete date and time.');
+  }
+  const wallClock = new Date(`${value}:00Z`).getTime();
+  if (!Number.isFinite(wallClock)) {
+    throw new Error('Enter a valid date and time.');
+  }
+  const offsets: Set<number> = new Set();
+  for (const delta of [-86400000, 0, 86400000]) {
+    const sample = wallClock + delta;
+    const local = dateTimeInZone(new Date(sample).toISOString(), timeZone);
+    offsets.add(new Date(`${local}:00Z`).getTime() - sample);
+  }
+  const candidates = [...offsets]
+    .map((offset) => new Date(wallClock - offset).toISOString())
+    .filter((candidate) => dateTimeInZone(candidate, timeZone) === value);
+  if (candidates.length !== 1) {
+    throw new Error(
+      'This time is missing or repeated when clocks change. Choose a different time.',
+    );
+  }
+  return candidates[0];
+}
diff --git a/src/app/unit-hub/unit-hub-demo.fixtures.ts b/src/app/unit-hub/unit-hub-demo.fixtures.ts
new file mode 100644
index 0000000000..12fdd090b8
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-demo.fixtures.ts
@@ -0,0 +1,92 @@
+import {DemoMeetingLinks, safeDemoMeetingUrl} from '../demo/demo-meeting-links.store';
+import {UnitHubFeed} from './unit-hub.models';
+
+/** Synthetic content only. SIT102 deliberately exists in the raw fixture as an isolation test. */
+export function unitHubDemo(now = new Date(), links?: DemoMeetingLinks): UnitHubFeed {
+  const helpHubLink = safeDemoMeetingUrl(links?.helpHub || '');
+  const extraLink = safeDemoMeetingUrl(links?.extraHelpHub || '');
+  const start = new Date(now);
+  start.setDate(start.getDate() + 1);
+  start.setHours(17, 0, 0, 0);
+  const lecture = new Date(start.getTime() + 86400000);
+  const shared = {
+    description: 'Bring your questions and join the teaching team for a guided session.',
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    published: true,
+    cancelled: false,
+    recurrence: 'none' as const,
+    join_url: null,
+    location: 'Online in Teams',
+  };
+  return {
+    units: [{id: 111, code: 'SIT111', name: 'Computer Systems', can_manage: false}],
+    announcements: [
+      {
+        id: 1,
+        unit_id: 111,
+        title: 'Your week in Computer Systems',
+        body: 'Review the hardware concepts, bring questions to HelpHub and check your upcoming classes here. This is a fictional example for the OnTrack demonstration.',
+        published_at: now.toISOString(),
+        pinned: true,
+      },
+      {
+        id: 2,
+        unit_id: 111,
+        title: 'Extra help before your next task',
+        body: 'The teaching team has added an online HelpHub. Open the session card for its time and meeting options.',
+        published_at: new Date(now.getTime() - 86400000).toISOString(),
+        pinned: false,
+      },
+      {
+        id: 3,
+        unit_id: 102,
+        title: 'SIT102 announcement must stay hidden',
+        body: 'Other unit sample',
+        published_at: now.toISOString(),
+        pinned: false,
+      },
+    ],
+    sessions: [
+      {
+        ...shared,
+        id: 1,
+        unit_id: 111,
+        title: 'Computer Systems HelpHub',
+        kind: 'helphub',
+        join_url: helpHubLink,
+        demo_hosted_join: !!helpHubLink,
+        start_at: start.toISOString(),
+        end_at: new Date(start.getTime() + 3600000).toISOString(),
+      },
+      {
+        ...shared,
+        id: 2,
+        unit_id: 111,
+        title: 'Hardware review lecture',
+        kind: 'lecture',
+        start_at: lecture.toISOString(),
+        end_at: new Date(lecture.getTime() + 3600000).toISOString(),
+      },
+      {
+        ...shared,
+        id: 4,
+        unit_id: 111,
+        title: 'Computer Systems extra HelpHub',
+        kind: 'helphub',
+        join_url: extraLink,
+        demo_hosted_join: !!extraLink,
+        start_at: new Date(lecture.getTime() + 86400000).toISOString(),
+        end_at: new Date(lecture.getTime() + 90000000).toISOString(),
+      },
+      {
+        ...shared,
+        id: 3,
+        unit_id: 102,
+        title: 'SIT102 HelpHub must stay hidden',
+        kind: 'helphub',
+        start_at: start.toISOString(),
+        end_at: new Date(start.getTime() + 3600000).toISOString(),
+      },
+    ],
+  };
+}
diff --git a/src/app/unit-hub/unit-hub-details.component.html b/src/app/unit-hub/unit-hub-details.component.html
new file mode 100644
index 0000000000..0f44f8bfd1
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-details.component.html
@@ -0,0 +1,207 @@
+@if (content; as detail) {
+  <header class="details-header">
+    <div>
+      <p class="detail-unit">{{ detail.unitCode }} · {{ detail.unitName }}</p>
+      <h2 id="unit-hub-detail-title" mat-dialog-title tabindex="-1">{{ title }}</h2>
+    </div>
+    <button aria-label="Close details" mat-icon-button type="button" (click)="close()">
+      <mat-icon aria-hidden="true">close</mat-icon>
+    </button>
+  </header>
+
+  <mat-dialog-content class="details-content">
+    @if (detail.demo) {
+      <aside class="detail-notice">
+        <mat-icon aria-hidden="true">science</mat-icon>
+        <p>
+          <strong>OnTrack demonstration</strong><br />This content and its schedule are fictional.
+          Calendar copies are labelled DEMO and are added only if you choose.
+          @if (detail.joinUrl) {
+            The joining button opens a real meeting supplied by the demo host; sample times are not
+            an official timetable.
+          }
+        </p>
+      </aside>
+    }
+    @if (detail.announcement; as announcement) {
+      <dl class="detail-facts">
+        <div>
+          <dt>Unit</dt>
+          <dd>{{ detail.unitCode }} · {{ detail.unitName }}</dd>
+        </div>
+        <div>
+          <dt>Source</dt>
+          <dd>{{ sourceLabel }}</dd>
+        </div>
+        @if (announcement.published_at) {
+          <div>
+            <dt>Published</dt>
+            <dd>
+              <time [attr.datetime]="announcement.published_at">{{
+                announcement.published_at | date: 'EEEE, d MMMM yyyy, h:mm a'
+              }}</time
+              ><small>{{ deviceTimeZone }}</small>
+            </dd>
+          </div>
+        }
+        @if (announcement.author_name) {
+          <div>
+            <dt>Posted by</dt>
+            <dd>{{ announcement.author_name }}</dd>
+          </div>
+        }
+        @if (announcement.expires_at) {
+          <div>
+            <dt>Visible until</dt>
+            <dd>
+              {{ announcement.expires_at | date: 'd MMMM yyyy, h:mm a'
+              }}<small>{{ deviceTimeZone }}</small>
+            </dd>
+          </div>
+        }
+        @if (announcement.pinned) {
+          <div>
+            <dt>Priority</dt>
+            <dd>Pinned announcement</dd>
+          </div>
+        }
+      </dl>
+      <section aria-label="Full announcement" class="full-content">
+        <p>{{ announcement.body }}</p>
+      </section>
+      @if (safeUrl(announcement.source_url)) {
+        <a
+          class="detail-source"
+          rel="noopener noreferrer"
+          target="_blank"
+          [href]="safeUrl(announcement.source_url)"
+          >Open original post <mat-icon aria-hidden="true">open_in_new</mat-icon></a
+        >
+      }
+    }
+
+    @if (detail.session; as session) {
+      @if (session.cancelled) {
+        <p class="cancelled-notice" role="status">
+          <strong>Cancelled</strong> · this session will not run.
+        </p>
+      }
+      <dl class="detail-facts">
+        <div>
+          <dt>Session</dt>
+          <dd>{{ sessionKind }}</dd>
+        </div>
+        <div>
+          <dt>Unit</dt>
+          <dd>{{ detail.unitCode }} · {{ detail.unitName }}</dd>
+        </div>
+        <div>
+          <dt>Starts</dt>
+          <dd>
+            <time [attr.datetime]="session.start_at">{{
+              session.start_at | date: 'EEEE, d MMMM yyyy, h:mm a'
+            }}</time
+            ><small>{{ deviceTimeZone }}</small>
+          </dd>
+        </div>
+        <div>
+          <dt>Ends</dt>
+          <dd>
+            <time [attr.datetime]="session.end_at">{{
+              session.end_at | date: 'EEEE, d MMMM yyyy, h:mm a'
+            }}</time
+            ><small>{{ deviceTimeZone }}</small>
+          </dd>
+        </div>
+        @if (session.timezone !== deviceTimeZone) {
+          <div>
+            <dt>Schedule time zone</dt>
+            <dd>
+              {{ session.timezone }}<small>Dates above are converted to your time zone.</small>
+            </dd>
+          </div>
+        }
+        @if (session.location) {
+          <div>
+            <dt>Location</dt>
+            <dd>{{ session.location }}</dd>
+          </div>
+        }
+        <div>
+          <dt>Repeat</dt>
+          <dd>
+            {{ session.recurrence === 'weekly' ? 'Part of a weekly series' : 'One session' }}
+            @if (session.recurrence === 'weekly' && session.recurrence_until) {
+              <small>Series ends {{ session.recurrence_until | date: 'd MMMM yyyy' }}</small>
+            }
+          </dd>
+        </div>
+      </dl>
+      <section aria-label="Full session description" class="full-content">
+        <p>{{ session.description || 'Your teaching team has not added any further details.' }}</p>
+      </section>
+      @if (safeUrl(session.source_url)) {
+        <a
+          class="detail-source"
+          rel="noopener noreferrer"
+          target="_blank"
+          [href]="safeUrl(session.source_url)"
+          >View original session details <mat-icon aria-hidden="true">open_in_new</mat-icon></a
+        >
+      }
+      @if (!session.cancelled) {
+        <aside class="calendar-guidance">
+          <h3>Choose how to add this session</h3>
+          <p>
+            Google Calendar and .ics downloads add a copy of this occurrence. Copies do not receive
+            changes.
+            @if (!detail.demo) {
+              Use Calendar settings to opt in to a subscription that follows schedule updates.
+            } @else {
+              Demo schedules are not available as subscriptions.
+            }
+          </p>
+          @if (!detail.demo) {
+            <button mat-button type="button" (click)="calendarSettings()">
+              Open calendar settings
+            </button>
+          }
+        </aside>
+      }
+      @if (detail.canManage && !detail.demo && !session.cancelled) {
+        <f-teams-meeting-composer [draft]="session" [unitCode]="detail.unitCode" />
+      }
+    }
+    <p class="detail-status" role="status">{{ status }}</p>
+  </mat-dialog-content>
+
+  <mat-dialog-actions class="details-actions">
+    @if (detail.session && !detail.session.cancelled) {
+      @if (safeUrl(detail.joinUrl)) {
+        <a
+          mat-flat-button
+          rel="noopener noreferrer"
+          target="_blank"
+          [href]="safeUrl(detail.joinUrl)"
+          ><mat-icon aria-hidden="true">videocam</mat-icon
+          >{{ detail.demo ? 'Join hosted demo' : 'Join session' }}</a
+        >
+      }
+      @if (safeUrl(detail.googleCalendarUrl)) {
+        <a
+          mat-stroked-button
+          rel="noopener noreferrer"
+          target="_blank"
+          [href]="safeUrl(detail.googleCalendarUrl)"
+          >{{ detail.demo ? 'Preview DEMO in Google Calendar' : 'Add to Google Calendar' }}</a
+        >
+      }
+      @if (detail.download) {
+        <button mat-button type="button" (click)="download()">
+          {{ detail.demo ? 'Download DEMO .ics' : 'Download .ics' }}
+        </button>
+      }
+    }
+    <button mat-button type="button" (click)="close()">Close</button>
+  </mat-dialog-actions>
+}
diff --git a/src/app/unit-hub/unit-hub-details.component.scss b/src/app/unit-hub/unit-hub-details.component.scss
new file mode 100644
index 0000000000..0d955cb721
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-details.component.scss
@@ -0,0 +1,175 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 90dvh;
+  color: var(--ot-color-text);
+}
+.details-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 22px 20px 12px 24px;
+  flex-shrink: 0;
+}
+.details-header > div {
+  flex: 1;
+  min-width: 0;
+}
+.details-header > button {
+  flex-shrink: 0;
+}
+.detail-unit {
+  margin: 0 0 8px;
+  color: var(--ot-color-text-muted);
+  font-size: 0.82rem;
+  overflow-wrap: anywhere;
+}
+h2[mat-dialog-title] {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+h2[mat-dialog-title]::before {
+  display: none;
+}
+.details-content {
+  min-height: 0;
+  flex: 1;
+  max-height: none;
+  padding: 6px 24px 24px;
+  color: inherit;
+  overflow-wrap: anywhere;
+}
+.detail-facts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+  margin: 16px 0 24px;
+}
+.detail-facts > div {
+  min-width: 0;
+}
+dt {
+  color: var(--ot-color-text-muted);
+  font-size: 0.78rem;
+  margin-bottom: 4px;
+}
+dd {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+small {
+  display: block;
+  color: var(--ot-color-text-muted);
+  font-size: 0.76rem;
+  margin-top: 3px;
+}
+.full-content {
+  line-height: 1.7;
+  border-top: 1px solid var(--ot-color-divider);
+  padding-top: 16px;
+}
+.full-content p {
+  white-space: pre-wrap;
+  margin: 0;
+}
+.detail-notice,
+.calendar-guidance {
+  background: var(--ot-color-surface-raised);
+  padding: 14px;
+  border-radius: 10px;
+  margin: 6px 0 18px;
+  font-size: 0.84rem;
+  line-height: 1.6;
+}
+.detail-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.detail-notice mat-icon {
+  flex-shrink: 0;
+}
+.detail-notice p {
+  margin: 0;
+}
+.calendar-guidance {
+  margin: 24px 0 0;
+}
+.calendar-guidance h3 {
+  font-size: 0.95rem;
+  margin: 0 0 7px;
+}
+.calendar-guidance p {
+  margin: 0 0 8px;
+}
+.cancelled-notice {
+  color: var(--ot-color-error);
+  border: 1px solid currentColor;
+  padding: 12px;
+  border-radius: 8px;
+}
+.detail-source {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 22px;
+  color: var(--ot-color-link);
+  text-underline-offset: 3px;
+}
+.detail-source mat-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+.details-actions {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid var(--ot-color-divider);
+  padding: 14px 24px;
+}
+.details-actions a {
+  text-decoration: none;
+}
+.detail-status:empty {
+  display: none;
+}
+.detail-status {
+  font-size: 0.84rem;
+  margin-top: 14px;
+}
+a:focus-visible,
+button:focus-visible {
+  outline: 3px solid var(--ot-color-focus);
+  outline-offset: 3px;
+}
+@media (max-width: 599px) {
+  .details-header {
+    padding: 18px 14px 10px 18px;
+  }
+  .details-content {
+    padding: 6px 18px 18px;
+  }
+  .details-actions {
+    padding: 12px 18px;
+  }
+  .detail-facts {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+  h2[mat-dialog-title] {
+    font-size: 1.22rem;
+  }
+  .details-actions a,
+  .details-actions button {
+    min-height: 44px;
+  }
+}
diff --git a/src/app/unit-hub/unit-hub-details.component.spec.ts b/src/app/unit-hub/unit-hub-details.component.spec.ts
new file mode 100644
index 0000000000..5c639f0dad
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-details.component.spec.ts
@@ -0,0 +1,124 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {unitHubDemo} from './unit-hub-demo.fixtures';
+import {UnitHubDetailsComponent, UnitHubDetailsData} from './unit-hub-details.component';
+
+const session = () => unitHubDemo(new Date('2026-09-14T06:00:00Z')).sessions[0];
+
+describe('Unit Hub full details', () => {
+  let close: ReturnType<typeof vi.fn>;
+  beforeEach(() => {
+    close = vi.fn();
+  });
+
+  async function render(data: Partial<UnitHubDetailsData>) {
+    TestBed.configureTestingModule({
+      imports: [UnitHubDetailsComponent],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            unitCode: 'SIT111',
+            unitName: 'Computer Systems',
+            demo: false,
+            canManage: false,
+            ...data,
+          },
+        },
+        {provide: MatDialogRef, useValue: {close}},
+      ],
+    });
+    const fixture = TestBed.createComponent(UnitHubDetailsComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    return {
+      fixture,
+      component: fixture.componentInstance,
+      element: fixture.nativeElement as HTMLElement,
+    };
+  }
+
+  it('shows full dates, zone, recurrence, source and content without injecting HTML', async () => {
+    const row = {
+      ...session(),
+      recurrence: 'weekly' as const,
+      recurrence_until: '2026-10-14',
+      description: 'First line\n<script>alert(1)</script>\nLast line',
+      source_url: 'https://teams.microsoft.com/l/message/example',
+    };
+    const {element} = await render({session: row});
+    const text = element.textContent.replace(/\s+/g, ' ');
+    expect(text).toContain('First line <script>alert(1)</script> Last line');
+    expect(element.querySelector('script')).toBeNull();
+    expect(element.querySelector(`time[datetime="${row.start_at}"]`)).not.toBeNull();
+    expect(element.querySelector(`time[datetime="${row.end_at}"]`)).not.toBeNull();
+    expect(text).toContain(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    expect(text).toContain('Part of a weekly series');
+    expect(
+      element
+        .querySelector('a[href="https://teams.microsoft.com/l/message/example"]')
+        ?.getAttribute('rel'),
+    ).toBe('noopener noreferrer');
+  });
+
+  it('suppresses unsafe links even when supplied to the dialog directly', async () => {
+    const {element} = await render({
+      session: {...session(), source_url: 'javascript:alert(1)'},
+      joinUrl: 'https://user:password@example.test/meet',
+      googleCalendarUrl: 'data:text/html,test',
+    });
+    expect(element.querySelector('a')).toBeNull();
+  });
+
+  it('stops download and calendar callbacks after selected data is cleared', async () => {
+    const download = vi.fn();
+    const calendarSettings = vi.fn();
+    const {component, fixture, element} = await render({
+      session: session(),
+      download,
+      calendarSettings,
+    });
+    component.clear();
+    fixture.detectChanges();
+    component.download();
+    component.calendarSettings();
+    expect(download).not.toHaveBeenCalled();
+    expect(calendarSettings).not.toHaveBeenCalled();
+    expect(element.textContent.trim()).toBe('');
+  });
+
+  it('blocks cancelled downloads and demo subscriptions at method level', async () => {
+    const download = vi.fn();
+    const calendarSettings = vi.fn();
+    const {component, element} = await render({
+      session: {...session(), cancelled: true},
+      demo: true,
+      canManage: true,
+      download,
+      calendarSettings,
+    });
+    component.download();
+    component.calendarSettings();
+    expect(download).not.toHaveBeenCalled();
+    expect(calendarSettings).not.toHaveBeenCalled();
+    expect(element.querySelector('f-teams-meeting-composer')).toBeNull();
+    expect(element.querySelector('a[href^="https://calendar.google.com"]')).toBeNull();
+  });
+
+  it('uses the explicit copy action and calendar settings only after clicks', async () => {
+    const download = vi.fn();
+    const calendarSettings = vi.fn();
+    const {component, element} = await render({session: session(), download, calendarSettings});
+    expect(download).not.toHaveBeenCalled();
+    expect(calendarSettings).not.toHaveBeenCalled();
+    const button = Array.from(element.querySelectorAll('button')).find((item) =>
+      item.textContent.includes('Download .ics'),
+    );
+    button.click();
+    expect(download).toHaveBeenCalledOnce();
+    component.calendarSettings();
+    expect(calendarSettings).toHaveBeenCalledOnce();
+    expect(close).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/app/unit-hub/unit-hub-details.component.ts b/src/app/unit-hub/unit-hub-details.component.ts
new file mode 100644
index 0000000000..e07c277051
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-details.component.ts
@@ -0,0 +1,92 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {TeamsMeetingComposerComponent} from './teams-meeting-composer.component';
+import {safeHttpsUrl} from './unit-hub-calendar';
+import {LearningSession, SESSION_KINDS, UnitAnnouncement} from './unit-hub.models';
+
+export interface UnitHubDetailsData {
+  unitCode: string;
+  unitName: string;
+  demo: boolean;
+  announcement?: Readonly<UnitAnnouncement>;
+  session?: Readonly<LearningSession>;
+  joinUrl?: string | null;
+  googleCalendarUrl?: string | null;
+  canManage: boolean;
+  download?: () => void;
+  calendarSettings?: () => void;
+}
+
+@Component({
+  selector: 'f-unit-hub-details',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+    TeamsMeetingComposerComponent,
+  ],
+  templateUrl: './unit-hub-details.component.html',
+  styleUrl: './unit-hub-details.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+export class UnitHubDetailsComponent {
+  readonly deviceTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  readonly safeUrl = safeHttpsUrl;
+  content: UnitHubDetailsData | null;
+  status = '';
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) data: UnitHubDetailsData,
+    private dialogRef: MatDialogRef<UnitHubDetailsComponent>,
+  ) {
+    this.content = data;
+  }
+
+  get title(): string {
+    return this.content?.announcement?.title ?? this.content?.session?.title ?? '';
+  }
+
+  get sourceLabel(): string {
+    const announcement = this.content?.announcement;
+    return announcement?.managed_externally || announcement?.source_provider === 'microsoft_teams'
+      ? 'Microsoft Teams'
+      : 'OnTrack';
+  }
+
+  get sessionKind(): string {
+    return (
+      SESSION_KINDS.find((kind) => kind.value === this.content?.session?.kind)?.label ?? 'Session'
+    );
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+
+  /** Remove the selected record immediately when the parent account/unit/mode changes. */
+  clear(): void {
+    this.content = null;
+    this.status = '';
+  }
+
+  download(): void {
+    if (!this.content?.session || this.content.session.cancelled) {
+      return;
+    }
+    this.content.download?.();
+    this.status = this.content.demo ? 'DEMO calendar copy requested.' : 'Calendar copy requested.';
+  }
+
+  calendarSettings(): void {
+    if (!this.content || this.content.demo) {
+      return;
+    }
+    this.content.calendarSettings?.();
+    this.close();
+  }
+}
diff --git a/src/app/unit-hub/unit-hub.component.html b/src/app/unit-hub/unit-hub.component.html
new file mode 100644
index 0000000000..90bf440e2b
--- /dev/null
+++ b/src/app/unit-hub/unit-hub.component.html
@@ -0,0 +1,704 @@
+<main aria-labelledby="unit-hub-title" class="unit-hub">
+  <header class="hub-heading">
+    <div>
+      <a class="back-link" routerLink="/home"
+        ><mat-icon aria-hidden="true">arrow_back</mat-icon> Home</a
+      >
+      <p class="eyebrow">YOUR LEARNING, TOGETHER</p>
+      <h1 id="unit-hub-title">Unit Hub</h1>
+      <p>Announcements, HelpHubs and classes for the units you belong to.</p>
+    </div>
+    <div class="heading-actions">
+      <button mat-stroked-button type="button" [disabled]="demo.enabled" (click)="openCalendar()">
+        <mat-icon aria-hidden="true">calendar_add_on</mat-icon> Calendar settings
+      </button>
+      @if (manageableUnits.length) {
+        <button mat-flat-button type="button" [disabled]="saving" (click)="toggleManage()">
+          <mat-icon aria-hidden="true">edit_calendar</mat-icon>
+          {{ managing ? 'View student feed' : 'Manage updates' }}
+        </button>
+      }
+    </div>
+  </header>
+  <f-study-essentials />
+
+  @if (demo.enabled) {
+    <aside aria-label="Demonstration content" class="notice demo-notice">
+      <mat-icon aria-hidden="true">science</mat-icon>
+      <div>
+        <strong>Demo: a student enrolled in SIT111</strong>
+        <p>
+          Fictional announcements and schedules. SIT102 content is excluded. A host can add real
+          meeting links in demo controls; the sample times are not an official timetable.
+          Subscriptions and editing are disabled. Calendar copies are clearly marked DEMO and are
+          only added if you choose.
+        </p>
+        <a routerLink="/demo-controls">Open demo controls to return to real data</a>
+      </div>
+    </aside>
+  }
+  <p class="status" role="status">{{ status }}</p>
+
+  @if (loading) {
+    <section class="empty-state" role="status">
+      <mat-icon aria-hidden="true">hourglass_top</mat-icon>
+      <h2>Loading your unit updates…</h2>
+    </section>
+  } @else if (loadError) {
+    <section class="empty-state" role="alert">
+      <mat-icon aria-hidden="true">cloud_off</mat-icon>
+      <h2>Updates are unavailable</h2>
+      <p>{{ loadError }}</p>
+      <button mat-stroked-button type="button" (click)="reload()">Try again</button>
+    </section>
+  } @else if (managing) {
+    <section aria-labelledby="manage-title" class="manage-panel">
+      <div class="section-heading">
+        <div>
+          <h2 id="manage-title">Manage unit updates</h2>
+          <p>
+            Publish an announcement or a class with its joining details. Changes are visible to
+            members of this unit.
+          </p>
+        </div>
+      </div>
+      <label class="field unit-filter" for="manage-unit"
+        >Unit you manage
+        <select
+          id="manage-unit"
+          [disabled]="saving"
+          [value]="managedUnitId"
+          (change)="loadStaff(+$any($event.target).value)"
+        >
+          @for (unit of manageableUnits; track unit.id) {
+            <option [selected]="unit.id === managedUnitId" [value]="unit.id">
+              {{ unit.code }} · {{ unit.name }}
+            </option>
+          }
+        </select>
+      </label>
+      <p class="help-text">
+        @if (managedTeamsConfigured) {
+          Automatic Teams announcements are configured for this unit. Posts appear after a
+          successful update. Change imported posts in Teams; they cannot be edited here.
+        } @else {
+          Publish updates here or link to their original Teams post. Your university can connect
+          this unit's Teams announcements through administrator setup. Microsoft sign-in alone does
+          not turn that connection on.
+        }
+        Session schedules are maintained here.
+      </p>
+      @if (staffError) {
+        <p class="notice error-notice" role="alert">
+          {{ staffError }}
+          <button mat-button type="button" (click)="loadStaff(managedUnitId)">Retry</button>
+        </p>
+      }
+      @if (staffLoading) {
+        <p role="status">Loading drafts and published content…</p>
+      }
+      @if (!staffLoading && canManageSelected) {
+        <div class="actions">
+          <button mat-flat-button type="button" [disabled]="saving" (click)="editAnnouncement()">
+            New announcement</button
+          ><button mat-stroked-button type="button" [disabled]="saving" (click)="editSession()">
+            New session
+          </button>
+        </div>
+        @if (editor) {
+          <section aria-labelledby="editor-title" class="editor">
+            <h3 id="editor-title">{{ editingId ? 'Edit' : 'New' }} {{ editor }}</h3>
+            @if (editor === 'announcement') {
+              <form [formGroup]="announcementForm" (ngSubmit)="save()">
+                <fieldset [disabled]="saving">
+                  <label class="field" for="announcement-title"
+                    >Title
+                    <input formControlName="title" id="announcement-title" maxlength="200" required
+                  /></label>
+                  <label class="field" for="announcement-body"
+                    >Announcement
+                    <textarea
+                      formControlName="body"
+                      id="announcement-body"
+                      maxlength="20000"
+                      required
+                      rows="6"
+                    ></textarea>
+                  </label>
+                  <label class="field" for="announcement-source"
+                    >Original post link (optional)
+                    <input
+                      formControlName="source_url"
+                      id="announcement-source"
+                      placeholder="https://…"
+                      type="url"
+                  /></label>
+                  <label class="field" for="announcement-expires"
+                    >Hide after (optional, {{ deviceTimeZone }})
+                    <input
+                      formControlName="expires_at"
+                      id="announcement-expires"
+                      type="datetime-local"
+                  /></label>
+                  <label class="check-field"
+                    ><input formControlName="pinned" type="checkbox" /> Pin this announcement</label
+                  >
+                  <label class="check-field"
+                    ><input formControlName="published" type="checkbox" /> Publish to this
+                    unit</label
+                  >
+                  <p class="help-text">
+                    Leave Publish unchecked to save a draft that students cannot see.
+                  </p>
+                </fieldset>
+                <ng-container *ngTemplateOutlet="editorActions"></ng-container>
+              </form>
+            } @else {
+              <form [formGroup]="sessionForm" (ngSubmit)="save()">
+                <fieldset [disabled]="saving">
+                  <label class="field" for="session-title"
+                    >Title
+                    <input formControlName="title" id="session-title" maxlength="200" required
+                  /></label>
+                  <div class="form-grid">
+                    <label class="field" for="session-kind"
+                      >Session type
+                      <select formControlName="kind" id="session-kind">
+                        @for (kind of sessionKinds; track kind.value) {
+                          <option [value]="kind.value">{{ kind.label }}</option>
+                        }
+                      </select></label
+                    >
+                    <label class="field" for="session-zone"
+                      >Time zone
+                      <input
+                        formControlName="timezone"
+                        id="session-zone"
+                        list="hub-timezones"
+                        required /><datalist id="hub-timezones">
+                        <option value="Australia/Melbourne"></option>
+                        <option value="Australia/Sydney"></option>
+                        <option value="Australia/Brisbane"></option>
+                        <option value="Australia/Perth"></option>
+                        <option value="UTC"></option></datalist
+                    ></label>
+                    <label class="field" for="session-start"
+                      >Starts
+                      <input
+                        formControlName="start_at"
+                        id="session-start"
+                        required
+                        type="datetime-local"
+                    /></label>
+                    <label class="field" for="session-end"
+                      >Ends
+                      <input
+                        formControlName="end_at"
+                        id="session-end"
+                        required
+                        type="datetime-local"
+                    /></label>
+                  </div>
+                  <p class="help-text">
+                    Enter both times in the named time zone. Weekly sessions keep this local time
+                    when daylight saving changes.
+                  </p>
+                  <div class="form-grid">
+                    <label class="field" for="session-recurrence"
+                      >Repeat
+                      <select formControlName="recurrence" id="session-recurrence">
+                        <option value="none">Does not repeat</option>
+                        <option value="weekly">Every week</option>
+                      </select></label
+                    >
+                    @if (sessionForm.controls.recurrence.value === 'weekly') {
+                      <label class="field" for="session-repeat-until"
+                        >Last date (within six months)
+                        <input
+                          formControlName="recurrence_until"
+                          id="session-repeat-until"
+                          required
+                          type="date"
+                      /></label>
+                    }
+                  </div>
+                  <label class="field" for="session-description"
+                    >Description (optional)
+                    <textarea
+                      formControlName="description"
+                      id="session-description"
+                      maxlength="20000"
+                      rows="3"
+                    ></textarea>
+                  </label>
+                  <label class="field" for="session-join"
+                    >Join meeting link (optional)
+                    <input
+                      formControlName="join_url"
+                      id="session-join"
+                      placeholder="https://teams.microsoft.com/…"
+                      type="url"
+                  /></label>
+                  <label class="field" for="session-location"
+                    >Location (optional)
+                    <input
+                      formControlName="location"
+                      id="session-location"
+                      maxlength="300"
+                      placeholder="Online in Teams or campus room"
+                  /></label>
+                  <label class="field" for="session-source"
+                    >Original post or timetable link (optional)
+                    <input
+                      formControlName="source_url"
+                      id="session-source"
+                      placeholder="https://…"
+                      type="url"
+                  /></label>
+                  <label class="check-field"
+                    ><input formControlName="published" type="checkbox" /> Publish to this
+                    unit</label
+                  >
+                  @if (editingId) {
+                    <label class="check-field"
+                      ><input formControlName="cancelled" type="checkbox" /> Session cancelled (all
+                      weekly occurrences)</label
+                    >
+                  }
+                  <p class="help-text">
+                    Leave Publish unchecked for a draft. Editing a repeating session changes the
+                    whole series.
+                  </p>
+                </fieldset>
+                <ng-container *ngTemplateOutlet="editorActions"></ng-container>
+              </form>
+              <f-teams-meeting-composer
+                unavailableReason="Enter a title and valid start, end and time zone above to prepare a Teams meeting."
+                [draft]="teamsDraft"
+                [unitCode]="unitCode(managedUnitId)"
+              />
+            }
+            <ng-template #editorActions>
+              @if (formError) {
+                <p class="notice error-notice" role="alert">{{ formError }}</p>
+              }
+              <div class="actions">
+                <button mat-flat-button type="submit" [disabled]="saving">
+                  {{ saving ? 'Saving…' : 'Save changes' }}</button
+                ><button mat-button type="button" [disabled]="saving" (click)="editor = null">
+                  Cancel editing
+                </button>
+              </div>
+            </ng-template>
+          </section>
+        }
+        @if (deleteCandidate) {
+          <div class="notice delete-notice" role="alert">
+            <div>
+              <strong>{{
+                deleteCandidate.kind === 'sessions'
+                  ? 'Cancel this session?'
+                  : 'Remove this announcement?'
+              }}</strong>
+              <p>
+                {{ deleteCandidate.title }}.
+                {{
+                  deleteCandidate.kind === 'sessions'
+                    ? 'All weekly occurrences will be cancelled and calendar subscriptions will update on their next refresh.'
+                    : 'This removes it from the unit feed.'
+                }}
+              </p>
+              <div class="actions">
+                <button mat-flat-button type="button" [disabled]="saving" (click)="confirmRemove()">
+                  Confirm
+                  {{ deleteCandidate.kind === 'sessions' ? 'cancellation' : 'removal' }}</button
+                ><button
+                  mat-button
+                  type="button"
+                  [disabled]="saving"
+                  (click)="deleteCandidate = null"
+                >
+                  Keep it
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+        <div class="management-lists">
+          <section aria-labelledby="staff-announcements-title">
+            <h3 id="staff-announcements-title">Announcements</h3>
+            @for (row of staffAnnouncements; track row.id) {
+              <article class="managed-row">
+                <div>
+                  <strong>{{ row.title }}</strong
+                  ><span
+                    >{{ row.published_at ? 'Published or scheduled' : 'Draft'
+                    }}{{ row.pinned ? ' · Pinned' : ''
+                    }}{{ isManagedExternally(row) ? ' · From Teams' : '' }}</span
+                  >
+                </div>
+                <div class="actions">
+                  @if (isManagedExternally(row)) {
+                    @if (safeUrl(row.source_url)) {
+                      <a
+                        mat-button
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        [href]="safeUrl(row.source_url)"
+                        >Manage in Teams</a
+                      >
+                    } @else {
+                      <span>Managed in Teams</span>
+                    }
+                  } @else {
+                    <button
+                      mat-button
+                      type="button"
+                      [attr.aria-label]="'Edit ' + row.title"
+                      [disabled]="saving"
+                      (click)="editAnnouncement(row)"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      mat-button
+                      type="button"
+                      [attr.aria-label]="'Remove ' + row.title"
+                      [disabled]="saving"
+                      (click)="
+                        deleteCandidate = {id: row.id, title: row.title, kind: 'announcements'}
+                      "
+                    >
+                      Remove
+                    </button>
+                  }
+                </div>
+              </article>
+            } @empty {
+              <p class="help-text">No announcements yet. Create a draft to get started.</p>
+            }
+          </section>
+          <section aria-labelledby="staff-sessions-title">
+            <h3 id="staff-sessions-title">Sessions</h3>
+            @for (row of staffSessions; track row.id) {
+              <article class="managed-row">
+                <div>
+                  <strong>{{ row.title }}</strong
+                  ><span
+                    >{{ row.cancelled ? 'Cancelled' : row.published ? 'Published' : 'Draft' }} ·
+                    {{ row.start_at | date: 'medium'
+                    }}{{ row.recurrence === 'weekly' ? ' · Weekly' : '' }}</span
+                  >
+                </div>
+                <div class="actions">
+                  <button
+                    mat-button
+                    type="button"
+                    [attr.aria-label]="'Edit ' + row.title"
+                    [disabled]="saving"
+                    (click)="editSession(row)"
+                  >
+                    Edit
+                  </button>
+                  @if (!row.cancelled) {
+                    <button
+                      mat-button
+                      type="button"
+                      [attr.aria-label]="'Cancel ' + row.title"
+                      [disabled]="saving"
+                      (click)="deleteCandidate = {id: row.id, title: row.title, kind: 'sessions'}"
+                    >
+                      Cancel session
+                    </button>
+                  }
+                </div>
+              </article>
+            } @empty {
+              <p class="help-text">No sessions yet. Add a HelpHub, lecture or class.</p>
+            }
+          </section>
+        </div>
+      }
+    </section>
+  } @else if (!units.length) {
+    <section class="empty-state">
+      <mat-icon aria-hidden="true">school</mat-icon>
+      <h2>No active units to show</h2>
+      <p>
+        Your announcements and sessions will appear here when you are enrolled in an active unit, or
+        assigned to teach one.
+      </p>
+    </section>
+  } @else {
+    <div class="hub-filters">
+      <label class="field unit-filter" for="hub-unit"
+        >Showing updates for
+        <select
+          id="hub-unit"
+          [value]="selectedUnitId"
+          (change)="selectUnit($any($event.target).value)"
+        >
+          <option value="0" [selected]="!selectedUnitId">All my units</option>
+          @for (unit of units; track unit.id) {
+            <option [selected]="unit.id === selectedUnitId" [value]="unit.id">
+              {{ unit.code }} · {{ unit.name }}
+            </option>
+          }
+        </select>
+      </label>
+      <nav aria-label="Type of update" class="view-switch">
+        <button type="button" [attr.aria-pressed]="tab === 'all'" (click)="tab = 'all'">
+          All updates
+        </button>
+        <button
+          type="button"
+          [attr.aria-pressed]="tab === 'announcements'"
+          (click)="tab = 'announcements'"
+        >
+          Announcements
+        </button>
+        <button type="button" [attr.aria-pressed]="tab === 'sessions'" (click)="tab = 'sessions'">
+          Sessions
+        </button>
+      </nav>
+    </div>
+    @if (unavailableUnit) {
+      <div class="notice" role="alert">
+        This unit is not available to your account. Choose one of your units above.
+      </div>
+    }
+    <div class="hub-columns" [class.single-column]="tab !== 'all'">
+      @if (tab !== 'sessions') {
+        <section aria-labelledby="announcements-title" class="announcements-column">
+          <div class="section-heading">
+            <h2 id="announcements-title">Announcements</h2>
+            <span class="count">{{ announcements.length }}</span>
+          </div>
+          @if (feed.announcements_truncated) {
+            <p class="help-text">
+              Showing the latest 100 announcements. Check the original unit channel for older
+              updates.
+            </p>
+          }
+          @for (announcement of announcements; track announcement.id) {
+            <article class="announcement-card">
+              <div class="card-meta">
+                <span class="unit-badge">{{ unitCode(announcement.unit_id) }}</span>
+                @if (isManagedExternally(announcement)) {
+                  <span>From Teams</span>
+                }
+                @if (announcement.pinned) {
+                  <span class="pinned"
+                    ><mat-icon aria-hidden="true">push_pin</mat-icon> Pinned</span
+                  >
+                }
+                <time [attr.datetime]="announcement.published_at">{{
+                  announcement.published_at | date: 'd MMM'
+                }}</time>
+              </div>
+              <h3>
+                <button
+                  class="details-title"
+                  type="button"
+                  (click)="openAnnouncement(announcement)"
+                >
+                  {{ announcement.title }}
+                </button>
+              </h3>
+              <p class="preserve-lines card-preview">{{ announcement.body }}</p>
+              <button
+                class="details-link"
+                mat-button
+                type="button"
+                [attr.aria-label]="'Read announcement: ' + announcement.title"
+                (click)="openAnnouncement(announcement)"
+              >
+                Read full announcement <mat-icon aria-hidden="true">arrow_forward</mat-icon>
+              </button>
+              @if (safeUrl(announcement.source_url)) {
+                <a
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  [href]="safeUrl(announcement.source_url)"
+                  >Open original post <mat-icon aria-hidden="true">open_in_new</mat-icon></a
+                >
+              }
+            </article>
+          } @empty {
+            <div class="empty-card">
+              <mat-icon aria-hidden="true">campaign</mat-icon>
+              <h3>You're up to date</h3>
+              <p>No announcements have been published for these units.</p>
+            </div>
+          }
+        </section>
+      }
+      @if (tab !== 'announcements') {
+        <section aria-labelledby="sessions-title" class="sessions-column">
+          <div class="section-heading">
+            <h2 id="sessions-title">HelpHubs &amp; classes</h2>
+            <span class="count">{{ sessions.length }}</span>
+          </div>
+          <p class="help-text time-note">
+            Times shown in {{ deviceTimeZone }}.
+            @if (feed.window_end) {
+              Scheduled sessions through {{ feed.window_end | date: 'd MMM yyyy' }}.
+            }
+          </p>
+          @for (session of sessions; track session.occurrence_id || session.id + session.start_at) {
+            <article class="session-card" [class.is-cancelled]="session.cancelled">
+              <div class="session-identity">
+                <span class="session-icon"
+                  ><mat-icon aria-hidden="true">{{ kindIcon(session.kind) }}</mat-icon></span
+                >
+                <div>
+                  <div class="card-meta">
+                    <span class="unit-badge">{{ unitCode(session.unit_id) }}</span
+                    ><span>{{ kindLabel(session.kind) }}</span>
+                  </div>
+                  <h3>
+                    <button class="details-title" type="button" (click)="openSession(session)">
+                      {{ session.title }}
+                    </button>
+                  </h3>
+                </div>
+              </div>
+              <div class="session-time">
+                <mat-icon aria-hidden="true">schedule</mat-icon>
+                <div>
+                  <strong>{{ session.start_at | date: 'EEE, d MMM' }}</strong
+                  ><span
+                    >{{ session.start_at | date: 'h:mm a' }} – {{ session.end_at | date: 'h:mm a' }}
+                    @if (
+                      (session.start_at | date: 'yyyyMMdd') !== (session.end_at | date: 'yyyyMMdd')
+                    ) {
+                      · ends {{ session.end_at | date: 'd MMM' }}
+                    }
+                  </span>
+                </div>
+                @if (sessionLive(session)) {
+                  <span class="live-badge">On now</span>
+                }
+              </div>
+              @if (session.cancelled) {
+                <p class="cancelled-label">Cancelled · this session will not run</p>
+              }
+              @if (session.description) {
+                <p class="preserve-lines card-preview">{{ session.description }}</p>
+              }
+              @if (session.location) {
+                <p class="location">
+                  <mat-icon aria-hidden="true">location_on</mat-icon>{{ session.location }}
+                </p>
+              }
+              @if (session.recurrence === 'weekly') {
+                <p class="help-text">Part of a weekly series</p>
+              }
+              <button
+                class="details-link"
+                mat-button
+                type="button"
+                [attr.aria-label]="'View session details: ' + session.title"
+                (click)="openSession(session)"
+              >
+                View full details <mat-icon aria-hidden="true">arrow_forward</mat-icon>
+              </button>
+              @if (!session.cancelled) {
+                <div class="session-actions">
+                  @if (demo.enabled) {
+                    @if (joinUrl(session)) {
+                      <a
+                        mat-flat-button
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        [href]="joinUrl(session)"
+                        ><mat-icon aria-hidden="true">videocam</mat-icon>Join hosted demo</a
+                      >
+                    } @else {
+                      <span class="help-text"
+                        >No host meeting linked. Add a meeting in demo controls.</span
+                      >
+                    }
+                    <a
+                      mat-stroked-button
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      [href]="googleUrl(session, unitCode(session.unit_id))"
+                      >Preview DEMO in Google Calendar</a
+                    >
+                    <button mat-button type="button" (click)="downloadSession(session)">
+                      Download DEMO .ics
+                    </button>
+                  } @else {
+                    @if (joinUrl(session)) {
+                      <a
+                        mat-flat-button
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        [href]="joinUrl(session)"
+                        ><mat-icon aria-hidden="true">videocam</mat-icon>Join session</a
+                      >
+                    } @else {
+                      <span class="help-text">{{
+                        session.location
+                          ? 'See location details above.'
+                          : 'Joining details will be added by your teaching team.'
+                      }}</span>
+                    }
+                    <a
+                      mat-stroked-button
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      [href]="googleUrl(session, unitCode(session.unit_id))"
+                      >Add to Google Calendar</a
+                    >
+                    <button mat-button type="button" (click)="downloadSession(session)">
+                      Download .ics
+                    </button>
+                  }
+                </div>
+              }
+              @if (safeUrl(session.source_url)) {
+                <a
+                  class="source-link"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  [href]="safeUrl(session.source_url)"
+                  >View original details <mat-icon aria-hidden="true">open_in_new</mat-icon></a
+                >
+              }
+            </article>
+          } @empty {
+            <div class="empty-card">
+              <mat-icon aria-hidden="true">event_available</mat-icon>
+              <h3>No sessions scheduled yet</h3>
+              <p>Your teaching team can add HelpHubs, lectures and other classes here.</p>
+            </div>
+          }
+          <aside class="calendar-note">
+            <mat-icon aria-hidden="true">calendar_month</mat-icon>
+            <div>
+              <strong>Keep your calendar up to date</strong>
+              <p>
+                Google Calendar and .ics buttons add a copy of one session. Copies do not update
+                automatically. In Calendar settings, opt in to HelpHubs and classes and subscribe to
+                receive schedule changes.
+              </p>
+              <p>
+                For Google, set up the subscription in a desktop browser; it will then appear in
+                your mobile calendar. Calendar providers control refresh times.
+              </p>
+              <button mat-button type="button" [disabled]="demo.enabled" (click)="openCalendar()">
+                Open calendar settings
+              </button>
+            </div>
+          </aside>
+        </section>
+      }
+    </div>
+    <p class="hub-footer">
+      Only members of a unit can see its updates. Content comes from your teaching team or connected
+      unit announcement channels; linked meetings may also require your university sign-in.
+    </p>
+  }
+</main>
diff --git a/src/app/unit-hub/unit-hub.component.scss b/src/app/unit-hub/unit-hub.component.scss
new file mode 100644
index 0000000000..5421e6ac95
--- /dev/null
+++ b/src/app/unit-hub/unit-hub.component.scss
@@ -0,0 +1,536 @@
+:host {
+  display: block;
+  color: var(--ot-color-text);
+}
+.unit-hub {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 28px 28px 56px;
+}
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: clamp(2rem, 4vw, 2.6rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  margin: 5px 0 10px;
+}
+h2 {
+  font-size: 1.35rem;
+  font-weight: 650;
+}
+h3 {
+  font-size: 1.1rem;
+  font-weight: 650;
+  line-height: 1.45;
+}
+p {
+  line-height: 1.6;
+}
+a {
+  color: var(--ot-color-link);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+a,
+button,
+input,
+select,
+textarea {
+  &:focus-visible {
+    outline: 3px solid var(--ot-color-primary);
+    outline-offset: 3px;
+  }
+}
+button,
+a,
+input,
+select,
+textarea {
+  touch-action: manipulation;
+}
+button {
+  cursor: pointer;
+}
+button:disabled {
+  cursor: default;
+}
+.hub-heading,
+.section-heading,
+.hub-filters,
+.card-meta,
+.actions,
+.heading-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.hub-heading {
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 26px;
+  gap: 24px;
+}
+.hub-heading > div:first-child {
+  max-width: 620px;
+}
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 24px;
+}
+.eyebrow {
+  color: var(--ot-color-link);
+  letter-spacing: 0.13em;
+  font-size: 0.73rem;
+  font-weight: 750;
+}
+.heading-actions {
+  gap: 10px;
+}
+.notice {
+  padding: 18px;
+  border: 1px solid var(--ot-color-border);
+  border-radius: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  margin-bottom: 20px;
+  background: var(--ot-color-surface);
+}
+.notice mat-icon {
+  flex: 0 0 24px;
+}
+.notice p {
+  margin: 5px 0;
+}
+.demo-notice,
+.calendar-note {
+  background: var(--ot-color-surface-raised);
+}
+.error-notice,
+.delete-notice {
+  border-color: var(--ot-color-error);
+}
+.status:empty {
+  display: none;
+}
+.status {
+  padding: 12px 0;
+  font-weight: 600;
+}
+.hub-filters {
+  justify-content: space-between;
+  margin-bottom: 28px;
+  align-items: flex-end;
+  gap: 20px;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin-bottom: 16px;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+.field input,
+.field select,
+.field textarea {
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--ot-color-border);
+  border-radius: 8px;
+  min-height: 46px;
+  padding: 10px 12px;
+  font: inherit;
+  font-weight: 400;
+  background: var(--ot-color-surface);
+  color: inherit;
+}
+.field textarea {
+  resize: vertical;
+}
+.unit-filter {
+  width: min(100%, 390px);
+  margin: 0;
+}
+.view-switch {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  border-radius: 10px;
+  background: var(--ot-color-surface-raised);
+  padding: 4px;
+}
+.view-switch button {
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  font: inherit;
+  padding: 10px 14px;
+  min-height: 44px;
+  color: inherit;
+}
+.view-switch button[aria-pressed='true'] {
+  background: var(--ot-color-surface);
+  font-weight: 650;
+  box-shadow: var(--ot-elevation-1);
+}
+.hub-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 28px;
+  align-items: start;
+}
+.hub-columns > section {
+  min-width: 0;
+}
+.hub-columns.single-column {
+  grid-template-columns: 1fr;
+  max-width: 880px;
+}
+.section-heading {
+  margin-bottom: 16px;
+  gap: 10px;
+}
+.count {
+  font-size: 0.8rem;
+  border-radius: 999px;
+  background: var(--ot-color-surface-raised);
+  padding: 3px 9px;
+}
+.announcement-card,
+.session-card,
+.empty-card {
+  border: 1px solid var(--ot-color-border);
+  border-radius: 14px;
+  padding: 22px;
+  margin-bottom: 16px;
+  background: var(--ot-color-surface);
+  overflow-wrap: anywhere;
+}
+.announcement-card {
+  border-top: 3px solid var(--ot-color-primary);
+}
+.card-meta {
+  gap: 8px;
+  font-size: 0.76rem;
+}
+.unit-badge {
+  font-weight: 750;
+  color: var(--ot-color-link);
+  background: var(--ot-color-surface-raised);
+  border-radius: 5px;
+  padding: 4px 7px;
+}
+.pinned {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.pinned mat-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+.card-meta time {
+  margin-left: auto;
+}
+.announcement-card h3 {
+  margin: 15px 0 10px;
+}
+.preserve-lines {
+  white-space: pre-wrap;
+}
+.announcement-card a,
+.source-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 16px;
+  font-size: 0.85rem;
+}
+.announcement-card a mat-icon,
+.source-link mat-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.session-identity {
+  display: flex;
+  align-items: flex-start;
+  gap: 13px;
+  margin-bottom: 18px;
+}
+.session-identity > div {
+  min-width: 0;
+}
+.session-identity h3 {
+  margin-top: 7px;
+}
+.session-icon {
+  width: 43px;
+  height: 43px;
+  background: var(--ot-color-surface-raised);
+  color: var(--ot-color-link);
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+.session-time {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 12px 0;
+  border-top: 1px solid var(--ot-color-border);
+  border-bottom: 1px solid var(--ot-color-border);
+  margin-bottom: 14px;
+}
+.session-time div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 0.9rem;
+}
+.live-badge {
+  margin-left: auto;
+  background: var(--ot-status-complete);
+  color: var(--ot-status-complete-on);
+  font-size: 0.75rem;
+  font-weight: 650;
+  padding: 4px 8px;
+  border-radius: 999px;
+}
+.location {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 0.86rem;
+  margin-top: 12px;
+}
+.location mat-icon {
+  width: 19px;
+  height: 19px;
+  font-size: 19px;
+}
+.session-actions {
+  margin-top: 18px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.session-actions a {
+  text-decoration: none;
+}
+.is-cancelled {
+  border-style: dashed;
+}
+.cancelled-label {
+  font-weight: 650;
+  color: var(--ot-color-error);
+  margin-bottom: 10px;
+}
+.help-text {
+  font-size: 0.84rem;
+  line-height: 1.5;
+  margin: 10px 0;
+}
+.time-note {
+  margin: -4px 0 16px;
+}
+.calendar-note {
+  display: flex;
+  gap: 13px;
+  padding: 20px;
+  border-radius: 12px;
+  font-size: 0.86rem;
+}
+.calendar-note > mat-icon {
+  flex-shrink: 0;
+}
+.calendar-note p {
+  margin: 8px 0;
+}
+.hub-footer {
+  font-size: 0.8rem;
+  margin-top: 30px;
+}
+.empty-state {
+  text-align: center;
+  border: 1px solid var(--ot-color-border);
+  border-radius: 16px;
+  padding: 50px 24px;
+}
+.empty-state > mat-icon,
+.empty-card > mat-icon {
+  color: var(--ot-color-link);
+  margin-bottom: 12px;
+}
+.empty-state p {
+  max-width: 590px;
+  margin: 12px auto 20px;
+}
+.empty-card p {
+  margin-top: 8px;
+}
+.manage-panel > .actions {
+  margin: 22px 0;
+}
+.editor {
+  max-width: 820px;
+  padding: 24px;
+  border: 1px solid var(--ot-color-border);
+  border-radius: 14px;
+  margin: 20px 0;
+  background: var(--ot-color-surface);
+}
+.editor h3 {
+  margin-bottom: 22px;
+}
+fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 18px;
+}
+.check-field {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 44px;
+}
+.check-field input {
+  width: 20px;
+  height: 20px;
+  accent-color: var(--ot-color-link);
+}
+.management-lists {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 28px;
+  margin-top: 28px;
+}
+.management-lists > section {
+  min-width: 0;
+}
+.managed-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--ot-color-border);
+  overflow-wrap: anywhere;
+}
+.managed-row > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.managed-row span {
+  font-size: 0.8rem;
+}
+@media (max-width: 850px) {
+  .hub-columns,
+  .management-lists {
+    grid-template-columns: 1fr;
+  }
+  .heading-actions {
+    width: 100%;
+  }
+}
+@media (max-width: 599px) {
+  .unit-hub {
+    padding: 20px 16px 36px;
+  }
+  .hub-heading {
+    margin-bottom: 20px;
+  }
+  .back-link {
+    margin-bottom: 18px;
+  }
+  .view-switch {
+    width: 100%;
+  }
+  .view-switch button {
+    flex: 1;
+    padding: 10px 7px;
+    font-size: 0.8rem;
+  }
+  .unit-filter {
+    width: 100%;
+  }
+  .announcement-card,
+  .session-card,
+  .empty-card {
+    padding: 18px;
+  }
+  .session-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .session-actions a,
+  .session-actions button {
+    min-height: 44px;
+  }
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+  .editor {
+    padding: 18px 14px;
+  }
+  .notice {
+    padding: 15px;
+  }
+  .calendar-note {
+    padding: 16px;
+  }
+}
+
+.details-title {
+  display: block;
+  width: 100%;
+  background: none;
+  border: 0;
+  padding: 4px 0;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  text-align: left;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.details-title:hover {
+  color: var(--ot-color-link);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.details-title:focus-visible {
+  outline: 3px solid var(--ot-color-focus);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+.card-preview {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.details-link {
+  margin: 0 0 12px;
+}
diff --git a/src/app/unit-hub/unit-hub.component.spec.ts b/src/app/unit-hub/unit-hub.component.spec.ts
new file mode 100644
index 0000000000..951c5c4eb3
--- /dev/null
+++ b/src/app/unit-hub/unit-hub.component.spec.ts
@@ -0,0 +1,428 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {MatDialog} from '@angular/material/dialog';
+import {provideRouter} from '@angular/router';
+import {RouterTestingHarness} from '@angular/router/testing';
+import {Subject, of, throwError} from 'rxjs';
+import {routes} from 'src/app/app.routes';
+import {roleWhitelistGuard} from 'src/app/common/guards/role-whitelist.guard';
+import {CalendarModalService} from 'src/app/common/modals/calendar-modal/calendar-modal.service';
+import {DEMO_TOOLS_AVAILABLE, DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {unitHubDemo} from './unit-hub-demo.fixtures';
+import {UnitHubDetailsComponent} from './unit-hub-details.component';
+import {UnitHubComponent} from './unit-hub.component';
+import {UnitHubService, scopeHubFeed} from './unit-hub.service';
+
+const feed = () => scopeHubFeed(unitHubDemo(new Date('2026-09-14T06:00:00Z')));
+
+describe('Unit Hub route, forms and rendered content', () => {
+  let service: {
+    feed: ReturnType<typeof vi.fn>;
+    announcements: ReturnType<typeof vi.fn>;
+    sessions: ReturnType<typeof vi.fn>;
+    saveAnnouncement: ReturnType<typeof vi.fn>;
+    saveSession: ReturnType<typeof vi.fn>;
+    remove: ReturnType<typeof vi.fn>;
+  };
+  let calendars: {show: ReturnType<typeof vi.fn>};
+  let demo: DemoModeStore;
+  beforeEach(() => {
+    sessionStorage.clear();
+    service = {
+      feed: vi.fn().mockImplementation(() => of(feed())),
+      announcements: vi.fn().mockReturnValue(of([])),
+      sessions: vi.fn().mockReturnValue(of([])),
+      saveAnnouncement: vi.fn().mockReturnValue(of({id: 5})),
+      saveSession: vi.fn().mockReturnValue(of({id: 5})),
+      remove: vi.fn().mockReturnValue(of({success: true})),
+    };
+    calendars = {show: vi.fn()};
+    TestBed.configureTestingModule({
+      providers: [
+        provideRouter([{path: 'unit-hub', component: UnitHubComponent}]),
+        {provide: UnitHubService, useValue: service},
+        {provide: CalendarModalService, useValue: calendars},
+        {provide: DEMO_TOOLS_AVAILABLE, useValue: true},
+      ],
+    });
+    demo = TestBed.inject(DemoModeStore);
+  });
+  afterEach(() => {
+    TestBed.inject(MatDialog).closeAll();
+    sessionStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  async function open(url = '/unit-hub') {
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl(url, UnitHubComponent);
+    harness.detectChanges();
+    return {harness, component, element: harness.routeNativeElement as HTMLElement};
+  }
+
+  it('has a reachable lazy route restricted to recognised account roles', async () => {
+    const route = routes.find((item) => item.path === 'unit-hub');
+    expect(route.loadComponent).toBeDefined();
+    expect(route.canActivate).toContain(roleWhitelistGuard);
+    expect(route.data.roleWhitelist).toContain('Student');
+    const {element} = await open();
+    expect(element.querySelector('h1')?.textContent).toBe('Unit Hub');
+    expect(element.textContent).toContain('Computer Systems HelpHub');
+    expect(element.textContent).not.toContain('SIT102 HelpHub must stay hidden');
+    expect(element.textContent).not.toContain('Manage updates');
+  });
+
+  it('unknown unit deep links reveal no other unit content and show a useful message', async () => {
+    const {component, element} = await open('/unit-hub?unit=102');
+    expect(component.sessions).toEqual([]);
+    expect(component.announcements).toEqual([]);
+    expect(element.textContent).toContain('This unit is not available to your account');
+    expect(element.textContent).not.toContain('Computer Systems HelpHub');
+  });
+
+  it('switches update type from the visible controls', async () => {
+    const {harness, element} = await open();
+    const button = Array.from(element.querySelectorAll('nav button')).find(
+      (item) => item.textContent?.trim() === 'Sessions',
+    ) as HTMLButtonElement;
+    button.click();
+    harness.detectChanges();
+    expect(element.querySelector('#announcements-title')).toBeNull();
+    expect(element.querySelector('#sessions-title')).not.toBeNull();
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('renders announcement text without interpreting HTML', async () => {
+    const data = feed();
+    data.announcements[0].body = '<img src=x onerror=alert(1)> Please review your tasks.';
+    service.feed.mockReturnValue(of(data));
+    const {element} = await open();
+    expect(element.querySelector('.announcement-card img')).toBeNull();
+    expect(element.textContent).toContain('<img src=x onerror=alert(1)>');
+    const link = element.querySelector('a[href^="https://calendar.google.com"]');
+    expect(link?.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+
+  it('clears failed feeds, offers retry and shows the genuine empty state after recovery', async () => {
+    service.feed
+      .mockReturnValueOnce(throwError(() => new Error('offline')))
+      .mockReturnValueOnce(of({units: [], announcements: [], sessions: []}));
+    const {harness, component, element} = await open();
+    expect(element.textContent).toContain('Updates are unavailable');
+    expect(component.sessions).toEqual([]);
+    const retry = Array.from(element.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Try again',
+    );
+    retry.click();
+    harness.detectChanges();
+    expect(element.textContent).toContain('No active units to show');
+  });
+
+  it('demo Google drafts are marked fictional, omit joining links and never open subscription settings', async () => {
+    demo.setEnabled(true);
+    const {component, element} = await open();
+    const link = element.querySelector(
+      'a[href^="https://calendar.google.com"]',
+    ) as HTMLAnchorElement;
+    const url = new URL(link.href);
+    expect(url.searchParams.get('text')).toContain('DEMO');
+    expect(url.searchParams.get('details')).toContain('FICTIONAL ONTRACK DEMO');
+    expect(url.searchParams.get('details')).not.toContain('https://');
+    expect(url.searchParams.get('location')).toBe('Fictional demo only');
+    expect(element.querySelector('a[href*="example.invalid"]')).toBeNull();
+    component.openCalendar();
+    expect(calendars.show).not.toHaveBeenCalled();
+    component.toggleManage();
+    expect(service.announcements).not.toHaveBeenCalled();
+    expect(service.sessions).not.toHaveBeenCalled();
+  });
+
+  it('cancelled occurrences offer no join or export actions', async () => {
+    const data = feed();
+    data.sessions = [{...data.sessions[0], cancelled: true}];
+    service.feed.mockReturnValue(of(data));
+    const {element} = await open();
+    const card = element.querySelector('.session-card');
+    expect(card.textContent).toContain('Cancelled');
+    expect(card.querySelector('a[href^="https://calendar.google.com"]')).toBeNull();
+    expect(card.querySelector('a[href*="example.invalid"]')).toBeNull();
+  });
+
+  async function openManager() {
+    const data = feed();
+    data.units[0].can_manage = true;
+    service.feed.mockReturnValue(of(data));
+    const result = await open();
+    result.component.toggleManage();
+    result.harness.detectChanges();
+    return result;
+  }
+
+  it('shows configured Teams imports as read-only and links staff back to their source', async () => {
+    const data = feed();
+    data.units[0].can_manage = true;
+    data.units[0].teams_sync = 'configured';
+    const imported = {
+      ...data.announcements[0],
+      source_provider: 'microsoft_teams' as const,
+      managed_externally: true,
+      source_url: 'https://teams.microsoft.com/l/message/example',
+    };
+    service.feed.mockReturnValue(of(data));
+    service.announcements.mockReturnValue(of([imported]));
+    const {component, harness, element} = await open();
+    component.toggleManage();
+    harness.detectChanges();
+    expect(element.textContent).toContain('Automatic Teams announcements are configured');
+    expect(
+      element.querySelector('a[href="https://teams.microsoft.com/l/message/example"]')?.textContent,
+    ).toContain('Manage in Teams');
+    expect(element.querySelector(`button[aria-label="Edit ${imported.title}"]`)).toBeNull();
+    component.editAnnouncement(imported);
+    expect(component.editor).toBeNull();
+    component.deleteCandidate = {id: imported.id, title: imported.title, kind: 'announcements'};
+    component.confirmRemove();
+    expect(service.remove).not.toHaveBeenCalled();
+  });
+
+  it('does not imply that Microsoft sign-in alone enables a Teams connection', async () => {
+    const {element} = await openManager();
+    const text = element.textContent.replace(/\s+/g, ' ');
+    expect(text).toContain('Microsoft sign-in alone does not turn that connection on.');
+    expect(text).not.toContain('Automatic Teams announcements are configured');
+  });
+
+  it('labels imported announcements for students without showing account or tenant details', async () => {
+    const data = feed();
+    data.announcements[0].source_provider = 'microsoft_teams';
+    service.feed.mockReturnValue(of(data));
+    const {element} = await open();
+    expect(element.querySelector('.announcement-card')?.textContent).toContain('From Teams');
+    expect(element.textContent).not.toContain('Manage in Teams');
+  });
+
+  it('staff can create a draft announcement only inside a manageable unit', async () => {
+    const {component, harness, element} = await openManager();
+    component.editAnnouncement();
+    harness.detectChanges();
+    expect(element.querySelector('label[for="announcement-title"]')).not.toBeNull();
+    component.announcementForm.patchValue({
+      title: 'Week update',
+      body: 'Bring questions',
+      published: false,
+    });
+    component.save();
+    expect(service.saveAnnouncement).toHaveBeenCalledWith(
+      111,
+      expect.objectContaining({title: 'Week update', published_at: null}),
+      undefined,
+    );
+    component.managedUnitId = 102;
+    component.editSession();
+    expect(component.editor).toBeNull();
+  });
+
+  it('staff session form converts the chosen time zone and preserves weekly rules', async () => {
+    const {component} = await openManager();
+    component.editSession();
+    component.sessionForm.patchValue({
+      title: 'HelpHub',
+      start_at: '2026-10-08T17:00',
+      end_at: '2026-10-08T18:00',
+      timezone: 'Australia/Melbourne',
+      recurrence: 'weekly',
+      recurrence_until: '2026-11-05',
+      published: true,
+      join_url: 'https://teams.microsoft.com/example',
+    });
+    component.save();
+    expect(service.saveSession).toHaveBeenCalledWith(
+      111,
+      expect.objectContaining({
+        start_at: '2026-10-08T06:00:00.000Z',
+        end_at: '2026-10-08T07:00:00.000Z',
+        timezone: 'Australia/Melbourne',
+        recurrence: 'weekly',
+        recurrence_until: '2026-11-05',
+      }),
+      undefined,
+    );
+  });
+
+  it('invalid dates and unsafe links never reach the write endpoint', async () => {
+    const {component} = await openManager();
+    component.editSession();
+    component.sessionForm.patchValue({
+      title: 'HelpHub',
+      start_at: '2026-10-04T02:30',
+      end_at: '2026-10-04T04:00',
+    });
+    component.save();
+    expect(component.formError).toContain('clocks change');
+    expect(service.saveSession).not.toHaveBeenCalled();
+    component.editAnnouncement();
+    component.announcementForm.patchValue({
+      title: 'Update',
+      body: 'Hello',
+      source_url: 'javascript:alert(1)',
+    });
+    component.save();
+    expect(component.formError).toContain('HTTPS');
+    expect(service.saveAnnouncement).not.toHaveBeenCalled();
+  });
+
+  it('failed saves retain entered content for correction', async () => {
+    service.saveAnnouncement.mockReturnValue(throwError(() => new Error('422')));
+    const {component} = await openManager();
+    component.editAnnouncement();
+    component.announcementForm.patchValue({title: 'My draft', body: 'Keep my work'});
+    component.save();
+    expect(component.formError).toContain('Could not save');
+    expect(component.announcementForm.controls.body.value).toBe('Keep my work');
+    expect(component.saving).toBe(false);
+  });
+
+  it('keeps both unit selectors on the unit being shown or managed, including after a save', async () => {
+    const data = feed();
+    data.units = [
+      {...data.units[0], can_manage: true},
+      {id: 222, code: 'SIT222', name: 'Other Unit', can_manage: true},
+    ];
+    service.feed.mockReturnValue(of(data));
+    const {component, harness, element} = await open('/unit-hub?unit=222');
+    expect((element.querySelector('#hub-unit') as HTMLSelectElement).value).toBe('222');
+    component.toggleManage();
+    harness.detectChanges();
+    expect((element.querySelector('#manage-unit') as HTMLSelectElement).value).toBe('222');
+    const pendingFeed: Subject<typeof data> = new Subject();
+    service.feed.mockReturnValue(pendingFeed);
+    component.editAnnouncement();
+    component.announcementForm.patchValue({title: 'Week update', body: 'Bring questions'});
+    component.save();
+    harness.detectChanges();
+    pendingFeed.next(data);
+    harness.detectChanges();
+    expect(service.saveAnnouncement).toHaveBeenCalledWith(222, expect.anything(), undefined);
+    expect((element.querySelector('#manage-unit') as HTMLSelectElement).value).toBe('222');
+  });
+
+  it('opens full plain announcement details from its title and restores focus on close', async () => {
+    const data = feed();
+    data.announcements[0].body = 'Full announcement\n<img src=x onerror=alert(1)>\nLast paragraph';
+    service.feed.mockReturnValue(of(data));
+    const {harness, element} = await open();
+    const title = element.querySelector('.announcement-card .details-title') as HTMLButtonElement;
+    title.focus();
+    title.click();
+    harness.detectChanges();
+    await harness.fixture.whenStable();
+    const dialog = TestBed.inject(MatDialog).openDialogs[0];
+    const details = dialog.componentInstance as UnitHubDetailsComponent;
+    expect(details.content.announcement.body).toContain('Last paragraph');
+    const overlay = document.querySelector('mat-dialog-container');
+    expect(overlay.textContent).toContain('<img src=x onerror=alert(1)>');
+    expect(overlay.querySelector('img')).toBeNull();
+    expect(overlay.querySelector('a a, button a, a button, button button')).toBeNull();
+    expect(overlay.getAttribute('aria-labelledby')).toBe('unit-hub-detail-title');
+    expect(document.activeElement?.id).toBe('unit-hub-detail-title');
+    (overlay.querySelector('button[aria-label="Close details"]') as HTMLButtonElement).click();
+    harness.detectChanges();
+    await harness.fixture.whenStable();
+    expect(TestBed.inject(MatDialog).openDialogs).toHaveLength(0);
+    expect(document.activeElement).toBe(title);
+  });
+
+  it('only opens details from the current permitted feed and clears them on unit or demo changes', async () => {
+    const {component, harness} = await open();
+    const dialogs = TestBed.inject(MatDialog);
+    component.openSession({...component.sessions[0], unit_id: 102});
+    component.openAnnouncement({...component.announcements[0], unit_id: 102});
+    expect(dialogs.openDialogs).toHaveLength(0);
+    component.openSession(component.sessions[0]);
+    const previous = dialogs.openDialogs[0].componentInstance as UnitHubDetailsComponent;
+    await harness.navigateByUrl('/unit-hub?unit=102', UnitHubComponent);
+    harness.detectChanges();
+    await harness.fixture.whenStable();
+    expect(previous.content).toBeNull();
+    await vi.waitFor(() => expect(dialogs.openDialogs).toHaveLength(0));
+    await harness.navigateByUrl('/unit-hub', UnitHubComponent);
+    component.openAnnouncement(component.announcements[0]);
+    const beforeMode = dialogs.openDialogs[0].componentInstance as UnitHubDetailsComponent;
+    demo.setEnabled(true);
+    harness.detectChanges();
+    await harness.fixture.whenStable();
+    expect(beforeMode.content).toBeNull();
+    await vi.waitFor(() => expect(dialogs.openDialogs).toHaveLength(0));
+  });
+
+  it('closes details on Escape and hides cancelled meeting actions', async () => {
+    const data = feed();
+    data.sessions[0].cancelled = true;
+    service.feed.mockReturnValue(of(data));
+    const {component, harness} = await open();
+    component.openSession(component.sessions[0]);
+    harness.detectChanges();
+    await harness.fixture.whenStable();
+    const overlay = document.querySelector('mat-dialog-container');
+    expect(overlay.textContent).toContain('Cancelled');
+    expect(overlay.querySelector('a[href^="https://calendar.google.com"]')).toBeNull();
+    expect(overlay.querySelector('f-teams-meeting-composer')).toBeNull();
+    document.body.dispatchEvent(
+      new KeyboardEvent('keydown', {key: 'Escape', keyCode: 27, bubbles: true}),
+    );
+    harness.detectChanges();
+    await harness.fixture.whenStable();
+    expect(TestBed.inject(MatDialog).openDialogs).toHaveLength(0);
+  });
+
+  it('keeps Teams meeting preparation staff-only and derives instants without saving', async () => {
+    const {component, harness} = await openManager();
+    component.editSession();
+    expect(component.teamsDraft).toBeNull();
+    component.sessionForm.patchValue({
+      title: 'HelpHub',
+      start_at: '2026-10-08T17:00',
+      end_at: '2026-10-08T18:00',
+    });
+    expect(component.teamsDraft.start_at).toBe('2026-10-08T06:00:00.000Z');
+    expect(service.saveSession).not.toHaveBeenCalled();
+    component.openSession(component.sessions[0]);
+    harness.detectChanges();
+    expect(document.querySelector('mat-dialog-container f-teams-meeting-composer')).not.toBeNull();
+    TestBed.inject(MatDialog).closeAll();
+    await vi.waitFor(() => expect(TestBed.inject(MatDialog).openDialogs).toHaveLength(0));
+    component.feed.units[0].can_manage = false;
+    component.openSession(component.sessions[0]);
+    harness.detectChanges();
+    expect(component.teamsDraft).toBeNull();
+    expect(document.querySelector('mat-dialog-container f-teams-meeting-composer')).toBeNull();
+  });
+
+  it('uses only explicitly hosted demo links in joining and calendar details', async () => {
+    demo.setEnabled(true);
+    const data = feed();
+    const hosted = {
+      ...data.sessions[0],
+      demo_hosted_join: true,
+      join_url: 'https://teams.microsoft.com/l/meetup-join/hosted-demo',
+    };
+    data.sessions = [hosted];
+    service.feed.mockReturnValue(of(data));
+    const {component, harness, element} = await open();
+    expect(element.textContent).toContain('Join hosted demo');
+    const url = new URL(component.googleUrl(component.sessions[0], 'SIT111'));
+    expect(url.searchParams.get('details')).toContain(hosted.join_url);
+    expect(url.searchParams.get('details')).toContain(
+      'Fictional schedule; uses a real host-provided meeting link.',
+    );
+    component.openSession(component.sessions[0]);
+    harness.detectChanges();
+    const details = TestBed.inject(MatDialog).openDialogs[0]
+      .componentInstance as UnitHubDetailsComponent;
+    expect(details.content.joinUrl).toBe(hosted.join_url);
+    expect(details.content.canManage).toBe(false);
+    expect(component.joinUrl({...hosted, demo_hosted_join: false})).toBeNull();
+    expect(component.joinUrl({...hosted, join_url: 'javascript:alert(1)'})).toBeNull();
+    expect(component.joinUrl({...hosted, cancelled: true})).toBeNull();
+  });
+});
diff --git a/src/app/unit-hub/unit-hub.component.ts b/src/app/unit-hub/unit-hub.component.ts
new file mode 100644
index 0000000000..73ba3fea62
--- /dev/null
+++ b/src/app/unit-hub/unit-hub.component.ts
@@ -0,0 +1,571 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {FormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatDialog, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {ActivatedRoute, NavigationStart, Router, RouterLink} from '@angular/router';
+import {Subscription, combineLatest, forkJoin} from 'rxjs';
+import {CalendarModalService} from 'src/app/common/modals/calendar-modal/calendar-modal.service';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {StudyEssentialsComponent} from '../study-essentials/study-essentials.component';
+import {TeamsMeetingComposerComponent} from './teams-meeting-composer.component';
+import {TeamsMeetingDraft} from './teams-meeting-draft';
+import {
+  dateTimeInZone,
+  dateTimeToIso,
+  googleSessionUrl,
+  safeHttpsUrl,
+  sessionIcs,
+} from './unit-hub-calendar';
+import {UnitHubDetailsComponent, UnitHubDetailsData} from './unit-hub-details.component';
+import {
+  HubUnit,
+  LearningSession,
+  SESSION_KINDS,
+  SessionKind,
+  UnitAnnouncement,
+  UnitHubFeed,
+} from './unit-hub.models';
+import {UnitHubService} from './unit-hub.service';
+
+@Component({
+  selector: 'f-unit-hub',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+    RouterLink,
+    StudyEssentialsComponent,
+    TeamsMeetingComposerComponent,
+  ],
+  templateUrl: './unit-hub.component.html',
+  styleUrl: './unit-hub.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+export class UnitHubComponent implements OnInit, OnDestroy {
+  readonly sessionKinds = SESSION_KINDS;
+  readonly deviceTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  readonly safeUrl = safeHttpsUrl;
+  feed: UnitHubFeed = {units: [], announcements: [], sessions: []};
+  loading = true;
+  loadError = '';
+  selectedUnitId = 0;
+  unavailableUnit = false;
+  tab: 'all' | 'announcements' | 'sessions' = 'all';
+  managing = false;
+  managedUnitId = 0;
+  staffLoading = false;
+  staffError = '';
+  staffAnnouncements: UnitAnnouncement[] = [];
+  staffSessions: LearningSession[] = [];
+  editor: 'announcement' | 'session' | null = null;
+  editingId?: number;
+  editingPublishedAt: string | null = null;
+  saving = false;
+  formError = '';
+  status = '';
+  deleteCandidate: {id: number; title: string; kind: 'announcements' | 'sessions'} | null = null;
+  private subscriptions = new Subscription();
+  private feedRequest?: Subscription;
+  private staffRequest?: Subscription;
+  private mutationRequest?: Subscription;
+  private detailsRef?: MatDialogRef<UnitHubDetailsComponent>;
+
+  readonly announcementForm;
+  readonly sessionForm;
+
+  constructor(
+    private service: UnitHubService,
+    readonly demo: DemoModeStore,
+    private calendars: CalendarModalService,
+    private route: ActivatedRoute,
+    private router: Router,
+    formBuilder: FormBuilder,
+    private dialogs: MatDialog,
+  ) {
+    this.announcementForm = formBuilder.nonNullable.group({
+      title: ['', [Validators.required, Validators.maxLength(200)]],
+      body: ['', [Validators.required, Validators.maxLength(20000)]],
+      source_url: [''],
+      pinned: [false],
+      published: [false],
+      expires_at: [''],
+    });
+    this.sessionForm = formBuilder.nonNullable.group({
+      title: ['', [Validators.required, Validators.maxLength(200)]],
+      description: ['', Validators.maxLength(20000)],
+      kind: ['helphub' as SessionKind],
+      start_at: ['', Validators.required],
+      end_at: ['', Validators.required],
+      timezone: ['Australia/Melbourne', Validators.required],
+      join_url: [''],
+      location: ['', Validators.maxLength(300)],
+      source_url: [''],
+      published: [false],
+      cancelled: [false],
+      recurrence: ['none' as 'none' | 'weekly'],
+      recurrence_until: [''],
+    });
+  }
+
+  ngOnInit(): void {
+    this.subscriptions.add(
+      this.router.events.subscribe((event) => {
+        if (event instanceof NavigationStart) {
+          this.closeDetails();
+        }
+      }),
+    );
+    this.subscriptions.add(
+      combineLatest([this.demo.enabled$, this.route.queryParamMap]).subscribe(([, params]) => {
+        this.mutationRequest?.unsubscribe();
+        this.saving = false;
+        this.managing = false;
+        this.selectedUnitId = Number(params.get('unit')) || 0;
+        this.reload();
+      }),
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.closeDetails();
+    this.subscriptions.unsubscribe();
+    this.feedRequest?.unsubscribe();
+    this.staffRequest?.unsubscribe();
+    this.mutationRequest?.unsubscribe();
+  }
+
+  get units(): HubUnit[] {
+    return this.feed.units;
+  }
+  get manageableUnits(): HubUnit[] {
+    return this.demo.enabled ? [] : this.units.filter((unit) => unit.can_manage);
+  }
+  get announcements(): UnitAnnouncement[] {
+    return this.feed.announcements.filter(
+      (row) => !this.selectedUnitId || row.unit_id === this.selectedUnitId,
+    );
+  }
+  get sessions(): LearningSession[] {
+    return this.feed.sessions.filter(
+      (row) => !this.selectedUnitId || row.unit_id === this.selectedUnitId,
+    );
+  }
+  get canManageSelected(): boolean {
+    return this.manageableUnits.some((unit) => unit.id === this.managedUnitId);
+  }
+  get managedTeamsConfigured(): boolean {
+    return this.units.find((unit) => unit.id === this.managedUnitId)?.teams_sync === 'configured';
+  }
+  isManagedExternally(row: UnitAnnouncement): boolean {
+    return row.managed_externally === true || row.source_provider === 'microsoft_teams';
+  }
+  unitCode(id: number): string {
+    return this.units.find((unit) => unit.id === id)?.code ?? '';
+  }
+  kindLabel(kind: string): string {
+    return this.sessionKinds.find((item) => item.value === kind)?.label ?? 'Class or event';
+  }
+  kindIcon(kind: string): string {
+    return this.sessionKinds.find((item) => item.value === kind)?.icon ?? 'event';
+  }
+  sessionLive(session: LearningSession): boolean {
+    const now = Date.now();
+    return (
+      !session.cancelled && Date.parse(session.start_at) <= now && Date.parse(session.end_at) > now
+    );
+  }
+
+  reload(): void {
+    this.closeDetails();
+    this.feedRequest?.unsubscribe();
+    this.staffRequest?.unsubscribe();
+    this.feed = {units: [], announcements: [], sessions: []};
+    this.staffAnnouncements = [];
+    this.staffSessions = [];
+    this.editor = null;
+    this.deleteCandidate = null;
+    this.loadError = '';
+    this.loading = true;
+    this.feedRequest = this.service.feed().subscribe({
+      next: (feed) => {
+        this.feed = feed;
+        this.unavailableUnit =
+          !!this.selectedUnitId && !feed.units.some((unit) => unit.id === this.selectedUnitId);
+        this.loading = false;
+        if (this.managing) {
+          this.loadStaff(this.managedUnitId);
+        }
+      },
+      error: () => {
+        this.loadError =
+          'We could not load your unit updates. Please try again. If this continues, contact your teaching team.';
+        this.loading = false;
+      },
+    });
+  }
+
+  selectUnit(value: string): void {
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {unit: Number(value) || null},
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  openCalendar(): void {
+    if (!this.demo.enabled) {
+      this.calendars.show();
+    }
+  }
+
+  joinUrl(session: LearningSession): string | null {
+    if (session.cancelled || (this.demo.enabled && !session.demo_hosted_join)) {
+      return null;
+    }
+    return safeHttpsUrl(session.join_url);
+  }
+
+  openAnnouncement(announcement: UnitAnnouncement): void {
+    const unit = this.units.find((item) => item.id === announcement.unit_id);
+    if (!unit || !this.announcements.includes(announcement)) {
+      return;
+    }
+    this.showDetails({
+      unitCode: unit.code,
+      unitName: unit.name,
+      demo: this.demo.enabled,
+      canManage: !this.demo.enabled && unit.can_manage,
+      announcement: Object.freeze({...announcement}),
+    });
+  }
+
+  openSession(session: LearningSession): void {
+    const unit = this.units.find((item) => item.id === session.unit_id);
+    if (!unit || !this.sessions.includes(session)) {
+      return;
+    }
+    this.showDetails({
+      unitCode: unit.code,
+      unitName: unit.name,
+      demo: this.demo.enabled,
+      canManage: !this.demo.enabled && unit.can_manage,
+      session: Object.freeze({...session}),
+      joinUrl: this.joinUrl(session),
+      googleCalendarUrl: session.cancelled ? null : this.googleUrl(session, unit.code),
+      download: () => this.downloadSession(session),
+      calendarSettings: () => this.openCalendar(),
+    });
+  }
+
+  private showDetails(data: UnitHubDetailsData): void {
+    this.closeDetails();
+    const ref = this.dialogs.open(UnitHubDetailsComponent, {
+      data,
+      width: '760px',
+      maxWidth: 'calc(100vw - 24px)',
+      maxHeight: '90dvh',
+      ariaLabelledBy: 'unit-hub-detail-title',
+      autoFocus: '#unit-hub-detail-title',
+      restoreFocus: true,
+      disableClose: false,
+      closeOnNavigation: true,
+      exitAnimationDuration: 0,
+    });
+    this.detailsRef = ref;
+    this.subscriptions.add(
+      ref.afterClosed().subscribe(() => {
+        ref.componentInstance?.clear();
+        if (this.detailsRef === ref) {
+          this.detailsRef = undefined;
+        }
+      }),
+    );
+  }
+
+  private closeDetails(): void {
+    this.detailsRef?.componentInstance?.clear();
+    this.detailsRef?.close();
+    this.detailsRef = undefined;
+  }
+
+  get teamsDraft(): TeamsMeetingDraft | null {
+    if (!this.canManageSelected || this.editor !== 'session') {
+      return null;
+    }
+    const values = this.sessionForm.getRawValue();
+    if (!values.title.trim() || !values.start_at || !values.end_at || !values.timezone) {
+      return null;
+    }
+    try {
+      const start_at = dateTimeToIso(values.start_at, values.timezone);
+      const end_at = dateTimeToIso(values.end_at, values.timezone);
+      if (Date.parse(end_at) <= Date.parse(start_at)) {
+        return null;
+      }
+      return {
+        title: values.title.trim(),
+        description: values.description,
+        start_at,
+        end_at,
+        timezone: values.timezone,
+        location: values.location,
+        recurrence: values.recurrence,
+        recurrence_until: values.recurrence_until || undefined,
+        cancelled: values.cancelled,
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  downloadSession(session: LearningSession): void {
+    if (session.cancelled || !this.sessions.includes(session)) {
+      return;
+    }
+    const content = sessionIcs(
+      this.calendarSession(session),
+      this.unitCode(session.unit_id),
+      new Date(),
+      this.demo.enabled ? 'demo' : 'live',
+    );
+    const url = URL.createObjectURL(new Blob([content], {type: 'text/calendar;charset=utf-8'}));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `ontrack-${this.demo.enabled ? 'demo-' : ''}session-${session.id}.ics`;
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    this.status = this.demo.enabled
+      ? 'Fictional DEMO calendar copy downloaded. This is not a real session.'
+      : 'Calendar copy downloaded. Subscribe to keep future changes up to date.';
+  }
+
+  googleUrl(session: LearningSession, unitCode: string): string {
+    return googleSessionUrl(this.calendarSession(session), unitCode);
+  }
+
+  private calendarSession(session: LearningSession): LearningSession {
+    return this.demo.enabled
+      ? {
+          ...session,
+          title: `DEMO · ${session.title}`,
+          description: `FICTIONAL ONTRACK DEMO. Fictional schedule and sample content.${session.demo_hosted_join ? ' Fictional schedule; uses a real host-provided meeting link.' : ''}\n\n${session.description}`,
+          join_url: session.demo_hosted_join ? safeHttpsUrl(session.join_url) : null,
+          source_url: null,
+          location: 'Fictional demo only',
+        }
+      : session;
+  }
+
+  toggleManage(): void {
+    if (!this.manageableUnits.length) {
+      return;
+    }
+    this.managing = !this.managing;
+    this.editor = null;
+    this.deleteCandidate = null;
+    if (this.managing) {
+      const unit =
+        this.manageableUnits.find((item) => item.id === this.selectedUnitId) ??
+        this.manageableUnits[0];
+      this.loadStaff(unit.id);
+    }
+  }
+
+  loadStaff(id: number): void {
+    this.closeDetails();
+    this.staffRequest?.unsubscribe();
+    this.editor = null;
+    this.deleteCandidate = null;
+    this.managedUnitId = Number(id);
+    this.staffAnnouncements = [];
+    this.staffSessions = [];
+    this.staffError = '';
+    this.staffLoading = false;
+    if (!this.canManageSelected) {
+      return;
+    }
+    this.staffLoading = true;
+    this.staffRequest = forkJoin({
+      announcements: this.service.announcements(this.managedUnitId),
+      sessions: this.service.sessions(this.managedUnitId),
+    }).subscribe({
+      next: (result) => {
+        this.staffAnnouncements = result.announcements.filter(
+          (row) => row.unit_id === this.managedUnitId,
+        );
+        this.staffSessions = result.sessions.filter((row) => row.unit_id === this.managedUnitId);
+        this.staffLoading = false;
+      },
+      error: () => {
+        this.staffLoading = false;
+        this.staffError =
+          'We could not load the content you manage. Check your unit access or try again.';
+      },
+    });
+  }
+
+  editAnnouncement(row?: UnitAnnouncement): void {
+    if (!this.canManageSelected || this.saving || (row && this.isManagedExternally(row))) {
+      return;
+    }
+    this.editor = 'announcement';
+    this.editingId = row?.id;
+    this.editingPublishedAt = row?.published_at ?? null;
+    this.formError = '';
+    this.announcementForm.reset({
+      title: row?.title ?? '',
+      body: row?.body ?? '',
+      source_url: row?.source_url ?? '',
+      pinned: row?.pinned ?? false,
+      published: !!row?.published_at,
+      expires_at: row?.expires_at ? dateTimeInZone(row.expires_at, this.deviceTimeZone) : '',
+    });
+  }
+
+  editSession(row?: LearningSession): void {
+    if (!this.canManageSelected || this.saving) {
+      return;
+    }
+    this.editor = 'session';
+    this.editingId = row?.id;
+    this.formError = '';
+    const timezone = row?.timezone ?? 'Australia/Melbourne';
+    this.sessionForm.reset({
+      title: row?.title ?? '',
+      description: row?.description ?? '',
+      kind: row?.kind ?? 'helphub',
+      start_at: row ? dateTimeInZone(row.start_at, timezone) : '',
+      end_at: row ? dateTimeInZone(row.end_at, timezone) : '',
+      timezone,
+      join_url: row?.join_url ?? '',
+      source_url: row?.source_url ?? '',
+      location: row?.location ?? '',
+      published: row?.published ?? false,
+      cancelled: row?.cancelled ?? false,
+      recurrence: row?.recurrence ?? 'none',
+      recurrence_until: row?.recurrence_until ?? '',
+    });
+  }
+
+  save(): void {
+    if (!this.canManageSelected || this.saving || !this.editor) {
+      return;
+    }
+    this.formError = '';
+    try {
+      let request;
+      if (this.editor === 'announcement') {
+        if (this.announcementForm.invalid) {
+          throw new Error('Enter a title and announcement, within the field limits.');
+        }
+        const values = this.announcementForm.getRawValue();
+        request = this.service.saveAnnouncement(
+          this.managedUnitId,
+          {
+            title: values.title.trim(),
+            body: values.body.trim(),
+            pinned: values.pinned,
+            source_url: this.checkedUrl(values.source_url),
+            published_at: values.published
+              ? (this.editingPublishedAt ?? new Date().toISOString())
+              : null,
+            expires_at: values.expires_at
+              ? dateTimeToIso(values.expires_at, this.deviceTimeZone)
+              : null,
+          },
+          this.editingId,
+        );
+      } else {
+        if (this.sessionForm.invalid) {
+          throw new Error('Enter a title, start time, end time and time zone.');
+        }
+        const values = this.sessionForm.getRawValue();
+        const start_at = dateTimeToIso(values.start_at, values.timezone);
+        const end_at = dateTimeToIso(values.end_at, values.timezone);
+        if (Date.parse(end_at) <= Date.parse(start_at)) {
+          throw new Error('End time must be after start time.');
+        }
+        if (values.recurrence === 'weekly' && !values.recurrence_until) {
+          throw new Error('Choose the last date for the weekly sessions.');
+        }
+        request = this.service.saveSession(
+          this.managedUnitId,
+          {
+            ...values,
+            title: values.title.trim(),
+            start_at,
+            end_at,
+            join_url: this.checkedUrl(values.join_url),
+            source_url: this.checkedUrl(values.source_url),
+            recurrence_until: values.recurrence === 'weekly' ? values.recurrence_until : null,
+          },
+          this.editingId,
+        );
+      }
+      this.saving = true;
+      this.mutationRequest = request.subscribe({
+        next: () => {
+          this.saving = false;
+          this.status = 'Your changes have been saved.';
+          this.reload();
+        },
+        error: () => {
+          this.saving = false;
+          this.formError =
+            'Could not save. Check the dates, field lengths, HTTPS links and your unit access, then try again.';
+        },
+      });
+    } catch (error) {
+      this.formError =
+        error instanceof RangeError
+          ? 'Enter a valid time zone, such as Australia/Melbourne.'
+          : (error as Error).message;
+    }
+  }
+
+  confirmRemove(): void {
+    if (!this.canManageSelected || !this.deleteCandidate || this.saving) {
+      return;
+    }
+    const candidate = this.deleteCandidate;
+    if (candidate.kind === 'announcements') {
+      const row = this.staffAnnouncements.find((item) => item.id === candidate.id);
+      if (row && this.isManagedExternally(row)) {
+        return;
+      }
+    }
+    this.saving = true;
+    this.mutationRequest = this.service
+      .remove(this.managedUnitId, candidate.kind, candidate.id)
+      .subscribe({
+        next: () => {
+          this.saving = false;
+          this.status =
+            candidate.kind === 'sessions'
+              ? 'Session cancelled. Calendar subscribers will receive the change when their calendar refreshes.'
+              : 'Announcement removed.';
+          this.reload();
+        },
+        error: () => {
+          this.saving = false;
+          this.staffError = 'Could not apply this change. Please try again.';
+        },
+      });
+  }
+
+  private checkedUrl(value: string): string | null {
+    if (!value.trim()) {
+      return null;
+    }
+    const safe = safeHttpsUrl(value.trim());
+    if (!safe) {
+      throw new Error('Use a complete HTTPS link without a username, password or spaces.');
+    }
+    return safe;
+  }
+}
diff --git a/src/app/unit-hub/unit-hub.models.ts b/src/app/unit-hub/unit-hub.models.ts
new file mode 100644
index 0000000000..9da262947d
--- /dev/null
+++ b/src/app/unit-hub/unit-hub.models.ts
@@ -0,0 +1,87 @@
+export interface HubUnit {
+  id: number;
+  code: string;
+  name: string;
+  can_manage: boolean;
+  teams_sync?: 'configured' | 'not_configured';
+}
+
+export interface UnitAnnouncement {
+  source_provider?: 'manual' | 'microsoft_teams';
+  managed_externally?: boolean;
+  author_name?: string | null;
+  id: number;
+  unit_id: number;
+  unit_code?: string;
+  unit_name?: string;
+  title: string;
+  body: string;
+  published_at: string | null;
+  expires_at?: string | null;
+  source_url?: string | null;
+  pinned: boolean;
+}
+
+export type SessionKind = 'helphub' | 'lecture' | 'seminar' | 'workshop' | 'other';
+
+export interface LearningSession {
+  /** Browser-local demo fixture only; never persisted or returned by the API. */
+  demo_hosted_join?: boolean;
+  id: number;
+  unit_id: number;
+  unit_code?: string;
+  unit_name?: string;
+  title: string;
+  description: string;
+  kind: SessionKind;
+  start_at: string;
+  end_at: string;
+  timezone: string;
+  join_url?: string | null;
+  location?: string | null;
+  source_url?: string | null;
+  published: boolean;
+  cancelled: boolean;
+  recurrence: 'none' | 'weekly';
+  recurrence_until?: string | null;
+  occurrence_id?: string;
+  original_start_at?: string;
+}
+
+export interface UnitHubFeed {
+  announcements_truncated?: boolean;
+  window_start?: string;
+  window_end?: string;
+  units: HubUnit[];
+  announcements: UnitAnnouncement[];
+  sessions: LearningSession[];
+}
+
+export type AnnouncementInput = Pick<
+  UnitAnnouncement,
+  'title' | 'body' | 'published_at' | 'expires_at' | 'source_url' | 'pinned'
+>;
+export type SessionInput = Pick<
+  LearningSession,
+  | 'title'
+  | 'description'
+  | 'kind'
+  | 'start_at'
+  | 'end_at'
+  | 'timezone'
+  | 'join_url'
+  | 'location'
+  | 'source_url'
+  | 'published'
+  | 'cancelled'
+  | 'recurrence'
+  | 'recurrence_until'
+>;
+
+export const SESSION_KINDS: {value: SessionKind; label: string; icon: string}[] = [
+  {value: 'helphub', label: 'HelpHub', icon: 'support_agent'},
+  {value: 'lecture', label: 'Lecture', icon: 'cast_for_education'},
+  {value: 'seminar', label: 'Seminar', icon: 'groups'},
+  {value: 'workshop', label: 'Workshop', icon: 'construction'},
+  {value: 'other', label: 'Class or event', icon: 'event'},
+];
diff --git a/src/app/unit-hub/unit-hub.service.spec.ts b/src/app/unit-hub/unit-hub.service.spec.ts
new file mode 100644
index 0000000000..102451c623
--- /dev/null
+++ b/src/app/unit-hub/unit-hub.service.spec.ts
@@ -0,0 +1,172 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {provideHttpClient} from '@angular/common/http';
+import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DEMO_TOOLS_AVAILABLE, DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {DemoMeetingLinksStore} from '../demo/demo-meeting-links.store';
+import {unitHubDemo} from './unit-hub-demo.fixtures';
+import {AnnouncementInput, SessionInput, UnitHubFeed} from './unit-hub.models';
+import {UnitHubService, scopeHubFeed} from './unit-hub.service';
+
+const announcement: AnnouncementInput = {
+  title: 'Update',
+  body: 'Bring questions',
+  pinned: false,
+  published_at: null,
+};
+const session = unitHubDemo().sessions[0] as SessionInput;
+
+describe('Unit Hub API and demo isolation', () => {
+  let service: UnitHubService;
+  let http: HttpTestingController;
+  let demo: DemoModeStore;
+
+  beforeEach(() => {
+    sessionStorage.clear();
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        {provide: DEMO_TOOLS_AVAILABLE, useValue: true},
+      ],
+    });
+    service = TestBed.inject(UnitHubService);
+    http = TestBed.inject(HttpTestingController);
+    demo = TestBed.inject(DemoModeStore);
+  });
+  afterEach(() => {
+    http.verify();
+    sessionStorage.clear();
+  });
+
+  it('normal mode reads real content even when the unrelated development quiet mask is active', () => {
+    expect(demo.shouldMaskApiData).toBe(true);
+    let result: UnitHubFeed;
+    service.feed().subscribe((value) => (result = value));
+    http.expectOne(`${API_URL}/unit_hub`).flush(unitHubDemo());
+    expect(result.units.map((unit) => unit.id)).toEqual([111]);
+    expect(result.announcements.every((row) => row.unit_id === 111)).toBe(true);
+    expect(result.sessions.every((row) => row.unit_id === 111)).toBe(true);
+  });
+
+  it('demo mode uses a synthetic enrolled-unit scope without reading the API', () => {
+    demo.setEnabled(true);
+    service.feed().subscribe((feed) => {
+      expect(feed.units.map((unit) => unit.code)).toEqual(['SIT111']);
+      expect(feed.announcements.length).toBe(2);
+      expect(feed.sessions.length).toBe(3);
+      expect(feed.announcements.some((row) => row.unit_id === 102)).toBe(false);
+    });
+    http.expectNone(`${API_URL}/unit_hub`);
+  });
+
+  it('checks demo mode when an operation is subscribed, not when it was created', () => {
+    const pending = service.saveAnnouncement(111, announcement);
+    demo.setEnabled(true);
+    const errors = vi.fn();
+    pending.subscribe({error: errors});
+    expect(errors).toHaveBeenCalledOnce();
+    http.expectNone(`${API_URL}/units/111/announcements`);
+  });
+
+  it('uses hosted links only in opted-in demo HelpHubs, without API reads or altering live rows', () => {
+    const link = 'https://teams.microsoft.com/meet/12345?p=demo';
+    TestBed.inject(DemoMeetingLinksStore).save({helpHub: link, extraHelpHub: ''});
+    demo.setEnabled(true);
+    service.feed().subscribe((feed) => {
+      expect(feed.sessions[0].join_url).toBe(link);
+      expect(feed.sessions[0].demo_hosted_join).toBe(true);
+      expect(feed.sessions.filter((row) => row.demo_hosted_join)).toHaveLength(1);
+      expect(feed.sessions.find((row) => row.kind === 'lecture').join_url).toBeNull();
+    });
+    http.expectNone(`${API_URL}/unit_hub`);
+    demo.setEnabled(false);
+    service.feed().subscribe((feed) => {
+      expect(feed.sessions[0].join_url).toBeNull();
+      expect(feed.sessions[0].demo_hosted_join).toBe(false);
+    });
+    http.expectOne(`${API_URL}/unit_hub`).flush(unitHubDemo());
+  });
+
+  it('blocks every staff read and write in demo mode', () => {
+    demo.setEnabled(true);
+    const errors = vi.fn();
+    [
+      service.announcements(111),
+      service.sessions(111),
+      service.saveAnnouncement(111, announcement),
+      service.saveAnnouncement(111, announcement, 1),
+      service.saveSession(111, session),
+      service.saveSession(111, session, 1),
+      service.remove(111, 'sessions', 1),
+      service.remove(111, 'announcements', 1),
+    ].forEach((operation) => operation.subscribe({error: errors}));
+    expect(errors).toHaveBeenCalledTimes(8);
+    http.expectNone((request) => request.url.includes('/units/'));
+  });
+
+  it('cancels live reads and writes when demo mode changes', () => {
+    const next = vi.fn();
+    service.feed().subscribe(next);
+    service.saveSession(111, session).subscribe(next);
+    const read = http.expectOne(`${API_URL}/unit_hub`);
+    const write = http.expectOne(`${API_URL}/units/111/sessions`);
+    demo.setEnabled(true);
+    expect(read.cancelled).toBe(true);
+    expect(write.cancelled).toBe(true);
+    expect(next).not.toHaveBeenCalled();
+  });
+
+  it('matches the server wrappers, HTTP methods and unit-scoped paths', () => {
+    service.saveAnnouncement(111, announcement).subscribe();
+    const created = http.expectOne(`${API_URL}/units/111/announcements`);
+    expect(created.request.method).toBe('POST');
+    expect(created.request.body).toEqual({announcement});
+    created.flush({id: 1});
+    service.saveSession(111, session, 12).subscribe();
+    const updated = http.expectOne(`${API_URL}/units/111/sessions/12`);
+    expect(updated.request.method).toBe('PUT');
+    expect(updated.request.body).toEqual({session});
+    updated.flush({id: 12});
+    service.remove(111, 'sessions', 12).subscribe();
+    const removed = http.expectOne(`${API_URL}/units/111/sessions/12`);
+    expect(removed.request.method).toBe('DELETE');
+    removed.flush({success: true});
+  });
+
+  it('cannot enable fixtures in builds without demo tools', () => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        {provide: DEMO_TOOLS_AVAILABLE, useValue: false},
+      ],
+    });
+    demo = TestBed.inject(DemoModeStore);
+    service = TestBed.inject(UnitHubService);
+    http = TestBed.inject(HttpTestingController);
+    demo.setEnabled(true);
+    expect(demo.enabled).toBe(false);
+    service.feed().subscribe();
+    http.expectOne(`${API_URL}/unit_hub`).flush({units: [], sessions: [], announcements: []});
+  });
+
+  it('drops unsafe joining/source links, invalid dates and cross-unit records while preserving display limits', () => {
+    const source = unitHubDemo();
+    source.sessions[0].join_url = 'javascript:alert(1)';
+    source.sessions[0].source_url = 'https://user:secret@example.com';
+    source.sessions[1].start_at = 'invalid';
+    const result = scopeHubFeed({
+      ...source,
+      announcements_truncated: true,
+      window_end: '2026-12-01',
+    });
+    expect(result.sessions).toHaveLength(2);
+    expect(result.sessions[0].join_url).toBeNull();
+    expect(result.sessions[0].source_url).toBeNull();
+    expect(result.announcements_truncated).toBe(true);
+    expect(result.window_end).toBe('2026-12-01');
+  });
+});
diff --git a/src/app/unit-hub/unit-hub.service.ts b/src/app/unit-hub/unit-hub.service.ts
new file mode 100644
index 0000000000..c66e56e218
--- /dev/null
+++ b/src/app/unit-hub/unit-hub.service.ts
@@ -0,0 +1,110 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, defer, map, of, skip, takeUntil, throwError} from 'rxjs';
+import API_URL from 'src/app/config/constants/apiUrl';
+import {DemoMeetingLinksStore} from 'src/app/demo/demo-meeting-links.store';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {safeHttpsUrl} from './unit-hub-calendar';
+import {unitHubDemo} from './unit-hub-demo.fixtures';
+import {
+  AnnouncementInput,
+  LearningSession,
+  SessionInput,
+  UnitAnnouncement,
+  UnitHubFeed,
+} from './unit-hub.models';
+
+/** Defence in depth; the API must enforce enrolment before returning any content. */
+export function scopeHubFeed(feed: UnitHubFeed): UnitHubFeed {
+  const units = feed.units ?? [];
+  const allowed = new Set(units.map((unit) => unit.id));
+  return {
+    announcements_truncated: feed.announcements_truncated,
+    window_start: feed.window_start,
+    window_end: feed.window_end,
+    units,
+    announcements: (feed.announcements ?? [])
+      .filter((row) => allowed.has(row.unit_id))
+      .map((row) => ({
+        ...row,
+        source_url: safeHttpsUrl(row.source_url),
+      })),
+    sessions: (feed.sessions ?? [])
+      .filter((row) => allowed.has(row.unit_id))
+      .filter(
+        (row) =>
+          Number.isFinite(Date.parse(row.start_at)) &&
+          Date.parse(row.end_at) > Date.parse(row.start_at),
+      )
+      .map((row) => ({
+        ...row,
+        join_url: row.cancelled ? null : safeHttpsUrl(row.join_url),
+        source_url: safeHttpsUrl(row.source_url),
+      })),
+  };
+}
+
+@Injectable({providedIn: 'root'})
+export class UnitHubService {
+  constructor(
+    private http: HttpClient,
+    private demo: DemoModeStore,
+    private demoLinks: DemoMeetingLinksStore,
+  ) {}
+
+  feed(): Observable<UnitHubFeed> {
+    return defer(() =>
+      this.demo.enabled
+        ? of(unitHubDemo(new Date(), this.demoLinks.links))
+        : this.http.get<UnitHubFeed>(`${API_URL}/unit_hub`),
+    ).pipe(map(scopeHubFeed), takeUntil(this.modeChanged()));
+  }
+
+  announcements(unitId: number): Observable<UnitAnnouncement[]> {
+    return this.live(() =>
+      this.http.get<UnitAnnouncement[]>(`${API_URL}/units/${unitId}/announcements`),
+    );
+  }
+
+  sessions(unitId: number): Observable<LearningSession[]> {
+    return this.live(() => this.http.get<LearningSession[]>(`${API_URL}/units/${unitId}/sessions`));
+  }
+
+  saveAnnouncement(
+    unitId: number,
+    input: AnnouncementInput,
+    id?: number,
+  ): Observable<UnitAnnouncement> {
+    const url = `${API_URL}/units/${unitId}/announcements${id ? `/${id}` : ''}`;
+    return this.live(() =>
+      id
+        ? this.http.put<UnitAnnouncement>(url, {announcement: input})
+        : this.http.post<UnitAnnouncement>(url, {announcement: input}),
+    );
+  }
+
+  saveSession(unitId: number, input: SessionInput, id?: number): Observable<LearningSession> {
+    const url = `${API_URL}/units/${unitId}/sessions${id ? `/${id}` : ''}`;
+    return this.live(() =>
+      id
+        ? this.http.put<LearningSession>(url, {session: input})
+        : this.http.post<LearningSession>(url, {session: input}),
+    );
+  }
+
+  remove(unitId: number, kind: 'announcements' | 'sessions', id: number): Observable<unknown> {
+    return this.live(() => this.http.delete(`${API_URL}/units/${unitId}/${kind}/${id}`));
+  }
+
+  private modeChanged(): Observable<boolean> {
+    return this.demo.enabled$.pipe(skip(1));
+  }
+
+  private live<T>(request: () => Observable<T>): Observable<T> {
+    return defer(() =>
+      this.demo.enabled
+        ? throwError(() => new Error('Demo content cannot change live data.'))
+        : request(),
+    ).pipe(takeUntil(this.modeChanged()));
+  }
+}
diff --git a/src/app/units/modals/modals.coffee b/src/app/units/modals/modals.coffee
deleted file mode 100644
index fb091e725e..0000000000
--- a/src/app/units/modals/modals.coffee
+++ /dev/null
@@ -1,4 +0,0 @@
-angular.module('doubtfire.units.modals', [
-  'doubtfire.units.modals.unit-ilo-edit-modal'
-  'doubtfire.units.modals.unit-student-enrolment-modal'
-])
diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.coffee b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.coffee
deleted file mode 100644
index 084f2cc69e..0000000000
--- a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.coffee
+++ /dev/null
@@ -1,54 +0,0 @@
-angular.module('doubtfire.units.modals.unit-ilo-edit-modal', [])
-#
-# Modal to edit or create a new ILO
-#
-.factory('UnitILOEditModal', ($modal) ->
-  UnitILOEditModalCtrl = {}
-
-  #
-  # Provide unit, and optionally a ILO. If no ILO is provided
-  # it will assume you want to make a new ILO
-  #
-  UnitILOEditModalCtrl.show = (unit, ilo) ->
-    $modal.open
-      controller: 'UnitILOEditModalCtrl'
-      templateUrl: 'units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html'
-      resolve: {
-        ilo: -> ilo
-        unit: -> unit
-      }
-
-  UnitILOEditModalCtrl
-)
-.controller('UnitILOEditModalCtrl', ($scope, $modalInstance, alertService, ilo, unit, newLearningOutcomeService) ->
-  prototypeIlo = { name: null, description: null, abbreviation: null }
-  $scope.ilo = ilo or prototypeIlo
-  $scope.isNew = !ilo?
-
-  $scope.saveILO = ->
-    if $scope.isNew
-      newLearningOutcomeService.create({
-        unitId: unit.id
-      }, {
-        body: {
-          name: $scope.ilo.name
-          description: $scope.ilo.description
-          abbreviation: $scope.ilo.abbreviation
-        },
-        cache: unit.learningOutcomesCache
-      }).subscribe({
-        next: (response) ->
-          $modalInstance.close(response)
-          alertService.success( "Intended Learning Outcome Added", 2000)
-        error: (response) ->
-          alertService.error( response, 6000)
-      })
-    else
-      newLearningOutcomeService.update( {unitId: unit.id, id: ilo.id}, {entity: ilo}).subscribe({
-        next: (response) ->
-          $modalInstance.close(response)
-          alertService.success( "Intended Learning Outcome Updated", 2000)
-        error: (response) ->
-          alertService.error( response, 6000)
-      })
-)
diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html
deleted file mode 100644
index 94c09e2b96..0000000000
--- a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="unit-ilo-edit-modal">
-  <form class="form-horizontal" ng-submit="saveILO()" role="form">
-    <div class="modal-header">
-      <h3>{{isNew ? "Create Learning Outcome" : "Edit Learning Outcome: " + ilo.iloNumber}}</h3>
-    </div>
-    <div class="modal-body">
-      <div class="form-group" required>
-        <label class="col-sm-3 control-label">Name</label>
-        <div class="col-sm-7">
-          <input type="text" class="form-control" ng-model="ilo.name" placeholder="Outcome Name" />
-        </div>
-      </div>
-      <div class="form-group" required>
-        <label class="col-sm-3 control-label">Abbreviation</label>
-        <div class="col-sm-7">
-          <input type="text" class="form-control" ng-model="ilo.abbreviation" placeholder="ABBR" />
-        </div>
-      </div>
-      <div class="form-group" required>
-        <label class="col-sm-3 control-label">Description</label>
-        <div class="col-sm-7">
-          <!-- <markdown-editor height="200" placeholder="Enter markdown description..." ng-model="ilo.description"></markdown-editor> -->
-          <div contenteditable ng-model="ilo.description" placeholder="Enter markdown description..." style="border-style: solid; border-width: thin; height: 200px"></div>
-        </div>
-      </div>
-    </div>
-    <div class="modal-footer text-right">
-      <input type="submit" class="btn btn-primary" ng-disabled="ilo.name == null || ilo.abbreviation == null || ilo.description == null"
-        value="{{isNew ? 'Create' : 'Update'}}" />
-    </div>
-  </form>
-</div>
diff --git a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.coffee b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.coffee
deleted file mode 100644
index 162889b6a6..0000000000
--- a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.coffee
+++ /dev/null
@@ -1,50 +0,0 @@
-angular.module('doubtfire.units.modals.unit-student-enrolment-modal', [])
-#
-# Modal to enrol a student in the given tutorial
-#
-.factory('UnitStudentEnrolmentModal', ($modal) ->
-  UnitStudentEnrolmentModal = {}
-
-  # Must provide unit
-  UnitStudentEnrolmentModal.show = (unit) ->
-    $modal.open
-      controller: 'UnitStudentEnrolmentModalCtrl'
-      templateUrl: 'units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.tpl.html'
-      resolve: {
-        unit: -> unit
-      }
-
-  UnitStudentEnrolmentModal
-)
-.controller('UnitStudentEnrolmentModalCtrl', ($scope, $modalInstance, alertService, newUserService, unit, campusService, newProjectService) ->
-  $scope.unit = unit
-  $scope.projects = unit.students
-  $scope.campuses = []
-  $scope.data = { campusId: 1 } # need in object for observing
-
-  campusService.query().subscribe( (campuses) ->
-    $scope.campuses = campuses
-    $scope.data.campusId = campuses[0].id
-  )
-
-  $scope.enrolStudent = (studentId, campusId) ->
-    if ! campusId?
-      alertService.error( 'Campus missing. Please indicate student campus', 5000)
-      return
-
-    newProjectService.create(
-      {}, {
-        cache: unit.studentCache
-        body: {
-          unit_id: unit.id,
-          student_num: studentId,
-          campus_id: campusId
-        }
-        constructorParams: unit
-      }).subscribe({
-        next: (project) ->
-          alertService.success( "Student enrolled", 2000)
-          $modalInstance.close()
-        error: (message) -> alertService.error( "Error enrolling student: #{message}", 6000)
-      })
-)
diff --git a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.html b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.html
new file mode 100644
index 0000000000..13afa33ac6
--- /dev/null
+++ b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.html
@@ -0,0 +1,41 @@
+<mat-card class="modal-complete">
+  <mat-card-header class="modal-heading-container">
+    <mat-card-title class="modal-heading">Enrol Student</mat-card-title>
+  </mat-card-header>
+  <mat-divider></mat-divider>
+  <mat-card-content>
+    <div class="modal-content-container">
+      <div class="modal-container">
+        <div>
+          <p>Student</p>
+        </div>
+        <mat-form-field appearance="fill">
+          <mat-label>Student ID or Email</mat-label>
+          <input matInput type="text" [(ngModel)]="studentIdOrEmail" />
+        </mat-form-field>
+      </div>
+      <div class="modal-container">
+        <div>
+          <p>Campus</p>
+        </div>
+        <mat-form-field appearance="fill">
+          <mat-label>Select Campus</mat-label>
+          <mat-select [(ngModel)]="selectedCampus">
+            @for (campus of campuses; track campus) {
+              <mat-option [value]="campus">{{ campus.name }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
+  </mat-card-content>
+  <mat-divider></mat-divider>
+  <mat-card-actions class="card-actions">
+    <input
+      class="btn btn-primary"
+      type="button"
+      value="Save"
+      (click)="enrolStudent(studentIdOrEmail, selectedCampus)"
+    />
+  </mat-card-actions>
+</mat-card>
diff --git a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.scss b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.scss
new file mode 100644
index 0000000000..4ffc18b0ce
--- /dev/null
+++ b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.scss
@@ -0,0 +1,27 @@
+.modal-complete {
+  width: 500px;
+}
+
+.modal-heading-container {
+  margin-bottom: 16px;
+}
+
+.modal-heading {
+  font-size: 24px;
+}
+
+.modal-content-container {
+  margin-top: 16px;
+}
+
+.modal-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card-actions {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.ts b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.ts
new file mode 100644
index 0000000000..21460b7484
--- /dev/null
+++ b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component.ts
@@ -0,0 +1,49 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Campus, Project, Unit} from 'src/app/api/models/doubtfire-model';
+import {CampusService} from 'src/app/api/services/campus.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-unit-student-enrolment-modal',
+  templateUrl: 'unit-student-enrolment-modal.component.html',
+  styleUrls: ['unit-student-enrolment-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitStudentEnrolmentModalComponent implements OnInit {
+  unit: Unit;
+  campuses: Campus[];
+  studentIdOrEmail: string;
+  selectedCampus: Campus;
+
+  constructor(
+    public dialogRef: MatDialogRef<UnitStudentEnrolmentModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: {unit: Unit},
+    public alertService: AlertService,
+    public campusService: CampusService,
+  ) {}
+
+  ngOnInit() {
+    this.unit = this.data.unit;
+    this.campusService.query().subscribe((campuses: Campus[]) => {
+      this.campuses = campuses;
+    });
+  }
+
+  enrolStudent(studentIdOrEmail: string, campus: Campus) {
+    if (!campus) {
+      this.alertService.error('Campus missing. Please indicate student campus', 5000);
+      return;
+    }
+    this.unit.enrolStudent(studentIdOrEmail, campus).subscribe({
+      next: (_: Project) => {
+        this.alertService.success('Student enrolled', 2000);
+        this.dialogRef.close();
+      },
+      error: (response: string) => {
+        this.alertService.error(`Error enrolling student: ${response}`, 6000);
+      },
+    });
+  }
+}
diff --git a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service.ts b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service.ts
new file mode 100644
index 0000000000..d3b4ee10f8
--- /dev/null
+++ b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service.ts
@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {Unit} from 'src/app/api/models/doubtfire-model';
+import {UnitStudentEnrolmentModalComponent} from './unit-student-enrolment-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UnitStudentEnrolmentModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(unit: Unit) {
+    this.dialog.open(UnitStudentEnrolmentModalComponent, {
+      data: {
+        unit: unit,
+      },
+    });
+  }
+}
diff --git a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.spec.ts b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.spec.ts
new file mode 100644
index 0000000000..c6869756c4
--- /dev/null
+++ b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.spec.ts
@@ -0,0 +1,38 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {CampusService} from 'src/app/api/services/campus.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {UnitStudentEnrolmentModalComponent} from './unit-student-enrolment-modal.component';
+
+const emptyProvider = {};
+
+describe('UnitStudentEnrolmentModalComponent', () => {
+  let component: UnitStudentEnrolmentModalComponent;
+  let fixture: ComponentFixture<UnitStudentEnrolmentModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UnitStudentEnrolmentModalComponent],
+      providers: [
+        {provide: MatDialogRef, useValue: emptyProvider},
+        {provide: MAT_DIALOG_DATA, useValue: emptyProvider},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: CampusService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(UnitStudentEnrolmentModalComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnitStudentEnrolmentModalComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.tpl.html b/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.tpl.html
deleted file mode 100644
index b522107ffb..0000000000
--- a/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.tpl.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="unit-student-enrolment-modal">
-  <div class="modal-header">
-    <h3>Enrol Student</h3>
-  </div>
-  <div class="modal-body">
-    <form class="form-horizontal">
-      <div class="form-group" required>
-        <label class="col-sm-3 control-label">Student</label>
-        <div class="col-sm-7">
-          <input type="input" class="form-control" placeholder="Student ID" ng-model="studentId">
-        </div>
-      </div>
-      <div class="form-group">
-        <label class="col-sm-3 control-label" for="teachingperiod">Campus</label>
-        <div class="col-sm-7">
-          <select class="form-control" ng-model="data.campusId">
-            <option ng-value="campus.id" ng-repeat="campus in campuses" value="{{campus.id}}">{{campus.name}}</option>
-          </select>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div class="modal-footer text-right">
-    <input type="button" ng-click="enrolStudent(studentId, data.campusId)" class="btn btn-primary" value="Save" />
-  </div>
-</div>
diff --git a/src/app/units/states/analytics/analytics.coffee b/src/app/units/states/analytics/analytics.coffee
deleted file mode 100644
index 8346a095b7..0000000000
--- a/src/app/units/states/analytics/analytics.coffee
+++ /dev/null
@@ -1,62 +0,0 @@
-angular.module('doubtfire.units.states.analytics', [])
-#
-# State for unit analytics
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/analytics', {
-    parent: 'units/index'
-    url: '/analytics'
-    templateUrl: "units/states/analytics/analytics.tpl.html"
-    controller: "UnitAnalyticsStateCtrl"
-    data:
-      task: "Unit Analytics"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
-   }
-)
-.controller("UnitAnalyticsStateCtrl", ($scope) ->
-  # TODO: (@alexcu) Refactor directives into sub states
-
-  #
-  # Active task tab group
-  #
-  $scope.tabs =
-    csvStatDownload:
-      title: "Unit Statistics"
-      subtitle: "Download details related to student progress within the unit."
-      seq: 0
-    taskStatusStats:
-      title: "Task Status Statistics"
-      subtitle: "View distribution of tasks by their current status either unit-wide or broken down into a specific tutorial or task"
-      seq: 1
-    taskCompletionStats:
-      title: "Task Completion Statistics"
-      subtitle: "View how tasks have been marked as completed as a box plot"
-      seq: 2
-    targetGradeStats:
-      title: "Target Grade Statistics"
-      subtitle: "View distribution of student target grades either unit-wide or broken down into a specific tutorial"
-      seq: 3
-    achievementStats:
-      title: "ILO Achievement Statistics"
-      subtitle: "View how ILOs have been achieved by students to their associated tasks as a box plot"
-      seq: 4
-
-  #
-  # Sets the active tab
-  #
-  $scope.setActiveTab = (tab) ->
-    # Do nothing if we're switching to the same tab
-    return if tab is $scope.activeTab
-    $scope.activeTab?.active = false
-    $scope.activeTab = tab
-    $scope.activeTab.active = true
-
-  $scope.setActiveTab($scope.tabs.csvStatDownload)
-
-  #
-  # Checks if tab is the active tab
-  #
-  $scope.isActiveTab = (tab) ->
-    tab is $scope.activeTab
-)
diff --git a/src/app/units/states/analytics/directives/analytics-tutor-times.component.html b/src/app/units/states/analytics/directives/analytics-tutor-times.component.html
new file mode 100644
index 0000000000..d02e990a5e
--- /dev/null
+++ b/src/app/units/states/analytics/directives/analytics-tutor-times.component.html
@@ -0,0 +1,132 @@
+<mat-card appearance="outlined" class="p-[16px]">
+  <mat-card-header class="mb-2.5 flex justify-between">
+    <mat-card-title>
+      <h2>Tutor Times Session Summary</h2>
+    </mat-card-title>
+
+    <div class="flex gap-1">
+      @if (role === 'Convenor') {
+        <button
+          mat-button
+          matTooltip="Download CSV summary for the selected date range"
+          matTooltipPosition="above"
+          matTooltipShowDelay="1000"
+          (click)="getTutorTimesSummary()"
+        >
+          <mat-icon>download</mat-icon> Download Summary
+        </button>
+      }
+
+      <button
+        mat-button
+        matTooltip="Download CSV of your tutor sessions for the selected date range"
+        matTooltipPosition="above"
+        matTooltipShowDelay="1000"
+        (click)="getMyTutorTimesSessions()"
+      >
+        <mat-icon>download</mat-icon> Download My Sessions
+      </button>
+    </div>
+  </mat-card-header>
+
+  <div class="flex flex-col items-center justify-center">
+    <div class="mb-3 flex flex-row gap-1">
+      <button class="w-24" color="primary" mat-raised-button (click)="goPreviousWeek()">
+        Previous
+      </button>
+      <button mat-raised-button (click)="goTodayWeek()">Today</button>
+      <button class="w-24" color="primary" mat-raised-button (click)="goNextWeek()">Next</button>
+    </div>
+    <div class="mb-3 flex flex-row gap-1">
+      <mat-form-field appearance="outline">
+        <mat-label>Choose a date</mat-label>
+        <input
+          matInput
+          [matDatepicker]="startdatepicker"
+          [(ngModel)]="tutorTimeSummaryStartDate"
+          (dateChange)="onDateChange($event)"
+        />
+        <mat-hint>Sessions from this day onward</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="startdatepicker"></mat-datepicker-toggle>
+        <mat-datepicker #startdatepicker></mat-datepicker>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Choose a date</mat-label>
+        <input
+          matInput
+          [matDatepicker]="enddatepicker"
+          [(ngModel)]="tutorTimeSummaryEndDate"
+          (dateChange)="onDateChange($event)"
+        />
+        <mat-hint>Sessions up to this day</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="enddatepicker"></mat-datepicker-toggle>
+        <mat-datepicker #enddatepicker></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div class="mb-1 flex w-full justify-end">
+      <mat-slide-toggle
+        labelPosition="before"
+        [(ngModel)]="hideSessionsDuringTutorials"
+        (toggleChange)="onToggleChangeHideSessionsDuringTutorial()"
+        >Hide sessions during tutorials</mat-slide-toggle
+      >
+    </div>
+  </div>
+
+  <ng-template #eventTooltipTemplate let-event="event">
+    <div class="z-50 rounded bg-[rgba(25,25,25,0.8)] p-1 text-white">
+      <strong
+        >{{ event.tutorName }} ({{ event.duration }} minutes)
+        {{ event.duringTutorial ? 'T' : '' }}</strong
+      ><br />
+      {{ event.startHour }} — {{ event.endHour }}<br />
+      Assessments: {{ event.assessments || 0 }}<br />
+      Comments: {{ event.commentsAdded || 0 }}<br />
+      Submissions opened: {{ event.submissionsOpened || 0 }} <br />
+      During Tutorial?: {{ event.duringTutorial ? 'yes' : 'no' }}
+    </div>
+  </ng-template>
+
+  <div class="relative">
+    @if (isLoading) {
+      <div
+        aria-label="Loading analytics"
+        class="analytics-loading-spinner absolute top-1/2 left-1/2 z-50 -translate-1/2"
+        role="status"
+      ></div>
+    }
+
+    <mwl-calendar-week-view
+      [daysInWeek]="daysInWeek"
+      [eventTemplate]="calendarEventTemplate"
+      [events]="filteredEvents"
+      [hourDuration]="60"
+      [hourSegmentHeight]="15"
+      [hourSegments]="4"
+      [minimumEventHeight]="5"
+      [viewDate]="viewDate"
+      [weekStartsOn]="0"
+      (beforeViewRender)="beforeViewRender($event)"
+      (eventClicked)="eventClicked($event)"
+    />
+
+    <ng-template #calendarEventTemplate let-eventClicked="eventClicked" let-weekEvent="weekEvent">
+      <div
+        class="cal-event"
+        role="application"
+        tabindex="0"
+        [attr.title]="sessionEventTitle(weekEvent.event)"
+        [ngStyle]="{
+          color: weekEvent.event.color?.secondaryText,
+          backgroundColor: weekEvent.event.color?.secondary,
+          borderColor: weekEvent.event.color?.primary,
+        }"
+        (click)="eventClicked.emit({sourceEvent: $event})"
+        (keydown.enter)="eventClicked.emit({sourceEvent: $event})"
+      >
+        {{ weekEvent.event.title }}
+      </div>
+    </ng-template>
+  </div>
+</mat-card>
diff --git a/src/app/units/states/analytics/directives/analytics-tutor-times.component.scss b/src/app/units/states/analytics/directives/analytics-tutor-times.component.scss
new file mode 100644
index 0000000000..298a078abc
--- /dev/null
+++ b/src/app/units/states/analytics/directives/analytics-tutor-times.component.scss
@@ -0,0 +1,31 @@
+.cal-week-view {
+  position: relative;
+  max-height: 750px;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+}
+
+.cal-day-headers {
+  position: sticky;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  background-color: white;
+  width: 100%;
+  min-height: 35px;
+}
+
+.analytics-loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgb(0 0 0 / 12%);
+  border-top-color: var(--mat-sys-primary, #3f51b5);
+  border-radius: 50%;
+  animation: analytics-spinner-rotate 800ms linear infinite;
+}
+
+@keyframes analytics-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/app/units/states/analytics/directives/analytics-tutor-times.component.ts b/src/app/units/states/analytics/directives/analytics-tutor-times.component.ts
new file mode 100644
index 0000000000..23817c377f
--- /dev/null
+++ b/src/app/units/states/analytics/directives/analytics-tutor-times.component.ts
@@ -0,0 +1,318 @@
+import {CalendarEvent} from 'angular-calendar';
+import {ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {MatDatepickerInputEvent} from '@angular/material/datepicker';
+import {Observable} from 'rxjs';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {Unit} from 'src/app/api/models/unit';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+interface SessionEvent extends CalendarEvent {
+  startHour: string;
+  endHour: string;
+  userId: number;
+  commentsAdded: number;
+  assessments: number;
+  submissionsOpened: number;
+  duration: number;
+  duringTutorial: boolean;
+  tutorName: string;
+}
+
+@Component({
+  selector: 'f-analytics-tutor-times',
+  templateUrl: 'analytics-tutor-times.component.html',
+  styleUrls: ['analytics-tutor-times.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class AnalyticsTutorTimesComponent implements OnInit {
+  @Input() unit: Unit;
+
+  @Input() downloadCsvFn!: (
+    newJob: Observable<SidekiqJob>,
+    title: string,
+    filename: string,
+  ) => void;
+
+  selectedUserId: number | null = null;
+
+  viewDate = new Date();
+  events: SessionEvent[] = [];
+  filteredEvents: SessionEvent[] = [];
+
+  tutorTimeSummaryStartDate: Date;
+  tutorTimeSummaryEndDate: Date;
+  daysInWeek: number = 7;
+
+  hideSessionsDuringTutorials: boolean = false;
+
+  public canLoadSessions: boolean = false;
+  public isLoading: boolean = false;
+
+  constructor(
+    private alertService: AlertService,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
+    private fileDownloaderService: FileDownloaderService,
+    private userService: UserService,
+  ) {}
+
+  get role() {
+    return this.unit.staff.find((s) => s.user.id === this.userService.currentUser.id)?.role;
+  }
+
+  ngOnInit(): void {
+    if (!this.sidekiqProgressModalService || !this.fileDownloaderService) {
+      // NOTE: Our `downloadCsvFn` callback requires these services because it calls `this` context
+      console.error('Failed to load tutor times analytics');
+    }
+
+    this.tutorTimeSummaryEndDate = new Date();
+    this.tutorTimeSummaryEndDate.setHours(0, 0, 0, 0);
+
+    this.tutorTimeSummaryStartDate = new Date(this.tutorTimeSummaryEndDate);
+    this.tutorTimeSummaryStartDate.setDate(this.tutorTimeSummaryEndDate.getDate() - 7);
+
+    const startOfWeek = new Date(this.viewDate);
+    startOfWeek.setDate(this.viewDate.getDate() - this.daysInWeek + 1);
+
+    this.viewDate = startOfWeek;
+
+    this.canLoadSessions = true;
+    this.getMarkingSesssions();
+  }
+
+  goPreviousWeek() {
+    this.canLoadSessions = true;
+    this.viewDate = new Date(this.viewDate.getTime() - this.daysInWeek * 24 * 60 * 60 * 1000);
+  }
+
+  goNextWeek() {
+    this.canLoadSessions = true;
+    this.viewDate = new Date(this.viewDate.getTime() + this.daysInWeek * 24 * 60 * 60 * 1000);
+  }
+
+  goTodayWeek() {
+    this.canLoadSessions = true;
+
+    this.tutorTimeSummaryEndDate = new Date();
+    this.tutorTimeSummaryStartDate = new Date(
+      this.tutorTimeSummaryEndDate.getTime() - 7 * 24 * 60 * 60 * 1000,
+    );
+    this.daysInWeek = 7;
+
+    this.viewDate = new Date();
+    const startOfWeek = new Date();
+    startOfWeek.setDate(this.viewDate.getDate() - this.daysInWeek + 1);
+
+    this.viewDate = startOfWeek;
+  }
+
+  public onToggleChangeHideSessionsDuringTutorial() {
+    setTimeout(() => {
+      this.applyFilters();
+    });
+  }
+
+  applyFilters() {
+    this.filteredEvents = this.events.filter(
+      (e) =>
+        (this.selectedUserId === null || e.userId === this.selectedUserId) &&
+        (!this.hideSessionsDuringTutorials || !e.duringTutorial) &&
+        e.duration >= 1,
+    );
+  }
+
+  onDateChange(_event: MatDatepickerInputEvent<Date>) {
+    if (!this.tutorTimeSummaryStartDate || !this.tutorTimeSummaryEndDate) {
+      return;
+    }
+
+    // Includes both the selected start & end days
+    const diffDays =
+      Math.floor(
+        (this.tutorTimeSummaryEndDate.getTime() - this.tutorTimeSummaryStartDate.getTime()) /
+          (1000 * 60 * 60 * 24),
+      ) + 1;
+
+    if (diffDays > 366) {
+      this.alertService.error('You cannot select more than a year', 3000);
+      return;
+    }
+    if (diffDays < 1) {
+      this.tutorTimeSummaryStartDate = this.tutorTimeSummaryEndDate;
+      this.alertService.error('End date must be on or after the start date');
+      return;
+    }
+    this.canLoadSessions = true;
+    this.daysInWeek = diffDays;
+    this.viewDate = new Date(this.tutorTimeSummaryStartDate);
+  }
+
+  beforeViewRender(event): void {
+    this.tutorTimeSummaryStartDate = event.period.start;
+    this.tutorTimeSummaryEndDate = event.period.end;
+
+    this.getMarkingSesssions();
+  }
+
+  public getTutorTimesSummary() {
+    const start = `${this.tutorTimeSummaryStartDate.getFullYear()}-${(this.tutorTimeSummaryStartDate.getMonth() + 1).toString().padStart(2, '0')}-${this.tutorTimeSummaryStartDate.getDate().toString().padStart(2, '0')}`;
+    const end = `${this.tutorTimeSummaryEndDate.getFullYear()}-${(this.tutorTimeSummaryEndDate.getMonth() + 1).toString().padStart(2, '0')}-${this.tutorTimeSummaryEndDate.getDate().toString().padStart(2, '0')}`;
+
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    this.downloadCsvFn(
+      this.unit.downloadTutorTimesSummaryCsv(
+        this.tutorTimeSummaryStartDate,
+        this.tutorTimeSummaryEndDate,
+        tz,
+        this.hideSessionsDuringTutorials,
+      ),
+      'Tutor Times Summary CSV',
+      `${this.unit.code}-tutor-times-summary-${start}-to-${end}-${tz}-${!this.hideSessionsDuringTutorials ? 'incl-tutorials' : ''}.csv`,
+    );
+  }
+
+  public getMyTutorTimesSessions() {
+    const start = `${this.tutorTimeSummaryStartDate.getFullYear()}-${(this.tutorTimeSummaryStartDate.getMonth() + 1).toString().padStart(2, '0')}-${this.tutorTimeSummaryStartDate.getDate().toString().padStart(2, '0')}`;
+    const end = `${this.tutorTimeSummaryEndDate.getFullYear()}-${(this.tutorTimeSummaryEndDate.getMonth() + 1).toString().padStart(2, '0')}-${this.tutorTimeSummaryEndDate.getDate().toString().padStart(2, '0')}`;
+
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    this.downloadCsvFn(
+      this.unit.downloadMyTutorTimeSessionsCsv(
+        this.tutorTimeSummaryStartDate,
+        this.tutorTimeSummaryEndDate,
+        tz,
+      ),
+      'My Marking Sessions CSV',
+      `${this.unit.code}-${this.userService.currentUser.name}-sessions-${start}-to-${end}-${tz}.csv`,
+    );
+  }
+
+  public getMarkingSesssions() {
+    if (!this.canLoadSessions) {
+      return;
+    }
+
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    this.canLoadSessions = false;
+    this.isLoading = true;
+    this.unit
+      .getUserMarkingSessions(this.tutorTimeSummaryStartDate, this.tutorTimeSummaryEndDate, tz)
+      .subscribe({
+        next: (data) => {
+          this.isLoading = false;
+          this.canLoadSessions = false;
+          this.events = data.map((session) => {
+            const tutor = this.unit.staff.find((t) => t.user.id === session.user?.id);
+
+            const primary = tutor ? this.stringToHexColor(tutor.user.firstName) : '#e0e0e0';
+            const secondary = tutor ? this.stringToHexColor(tutor.user.firstName) : '#e3e2e1';
+            return {
+              start: new Date(session.startTime),
+              end: new Date(session.endTime),
+              startHour: new Date(session.startTime).toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false,
+              }),
+              endHour: new Date(session.endTime).toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false,
+              }),
+              title: `${tutor?.user?.firstName ?? 'N/A'} (${session.durationMinutes}m) ${session.duringTutorial ? '(T)' : ''}`,
+              color: {primary: secondary, secondary: primary},
+              userId: session.user?.id,
+              commentsAdded: session.commentsAdded,
+              assessments: session.assessments,
+              submissionsOpened: session.submissionsOpened,
+              duration: session.durationMinutes,
+              duringTutorial: session.duringTutorial,
+              tutorName: tutor?.user?.firstName ?? 'N/A',
+            };
+          });
+
+          this.applyFilters();
+        },
+        error: (error) => {
+          this.canLoadSessions = false;
+          this.alertService.error(`Failed to load sessions: ${error}`, 6000);
+          console.error(error);
+        },
+      });
+  }
+
+  eventClicked({event}: {event: CalendarEvent; sourceEvent?: MouseEvent | KeyboardEvent}): void {
+    if (!this.isSessionEvent(event)) {
+      return;
+    }
+
+    if (event.userId !== undefined) {
+      if (this.selectedUserId === null) {
+        this.selectedUserId = Number(event.userId);
+      } else {
+        this.selectedUserId = null;
+      }
+      this.applyFilters();
+    }
+  }
+
+  private isSessionEvent(event: CalendarEvent): event is SessionEvent {
+    return 'userId' in event && 'duration' in event;
+  }
+
+  sessionEventTitle(event: SessionEvent): string {
+    return [
+      `${event.tutorName} (${event.duration} minutes)${event.duringTutorial ? ' T' : ''}`,
+      `${event.startHour} - ${event.endHour}`,
+      `Assessments: ${event.assessments || 0}`,
+      `Comments: ${event.commentsAdded || 0}`,
+      `Submissions opened: ${event.submissionsOpened || 0}`,
+      `During Tutorial?: ${event.duringTutorial ? 'yes' : 'no'}`,
+    ].join('\n');
+  }
+
+  private stringToHexColor(
+    name: string,
+    opts?: {hue?: [number, number]; sat?: [number, number]; lit?: [number, number]},
+  ): string {
+    const options = {
+      hue: opts?.hue || [0, 360],
+      sat: opts?.sat || [40, 70], // lower saturation → softer color
+      lit: opts?.lit || [75, 90], // higher lightness → pastel tone
+    };
+
+    const range = (hash: number, min: number, max: number) => {
+      const diff = max - min;
+      const x = ((hash % diff) + diff) % diff;
+      return x + min;
+    };
+
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+      hash = hash & hash;
+    }
+
+    const h = range(hash, options.hue[0], options.hue[1]);
+    const s = range(hash, options.sat[0], options.sat[1]) / 100;
+    const l = range(hash, options.lit[0], options.lit[1]) / 100;
+
+    const a = s * Math.min(l, 1 - l);
+    const f = (n: number) => {
+      const k = (n + h / 30) % 12;
+      const color = l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+      return Math.round(255 * color);
+    };
+
+    const toHex = (c: number) => c.toString(16).padStart(2, '0');
+    return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`;
+  }
+}
diff --git a/src/app/units/states/analytics/unit-analytics-route.component.html b/src/app/units/states/analytics/unit-analytics-route.component.html
index 643d344195..fa86127023 100644
--- a/src/app/units/states/analytics/unit-analytics-route.component.html
+++ b/src/app/units/states/analytics/unit-analytics-route.component.html
@@ -1,4 +1,41 @@
-<h1>Unit Statistics</h1>
+<f-page-container>
+  <h1>Unit Statistics</h1>
 
-<button mat-button (click)="unit.downloadTaskCompletionCsv()">Task Completion Stats</button>
-<button mat-button (click)="unit.downloadTutorAssessmentCsv()">Tutor Assessment Stats</button>
+  <div class="flex flex-col gap-2.5">
+    <mat-card appearance="outlined" class="mt-2.5 p-[16px]">
+      <mat-card-content class="flex gap-1">
+        <button mat-button (click)="getTaskCompletionCsv()">
+          <mat-icon>download</mat-icon> Task Completion Stats
+        </button>
+        <button mat-button (click)="getTutorAssessmentCsv()">
+          <mat-icon>download</mat-icon> Tutor Assessment Stats
+        </button>
+        <button mat-button (click)="getTasksAwaitingFeedbackCsv()">
+          <mat-icon>download</mat-icon> Tasks Awaiting Feedback
+        </button>
+        <button mat-button (click)="getTaskAssessmentCountCsv()">
+          <mat-icon>download</mat-icon> Task Assessment Counts
+        </button>
+        @if (role === 'Convenor' || isAdmin) {
+          <button mat-button (click)="getOverflowTaskClaimsCsv()">
+            <mat-icon>download</mat-icon> Overflow Task Claims
+          </button>
+        }
+      </mat-card-content>
+    </mat-card>
+
+    <f-analytics-tutor-times [downloadCsvFn]="downloadCsv" [unit]="unit"></f-analytics-tutor-times>
+  </div>
+</f-page-container>
+<!--
+
+  TODO: Re-implement the following charts using ngx-charts:
+    TODO: Task Status Stats (Summary Chart)
+      - View distribution of tasks by their current status either unit-wide or broken down into a specific tutorial or task
+    TODO: Target Grade Stats (Pie Chart)
+      - View distribution of student target grades either unit-wide or broken down into a specific tutorial
+    TODO: Task Completion Stats (Box Plot)
+      - View how tasks have been marked as completed as a box plot
+
+  TODO: We also want each of these as sub-states
+-->
diff --git a/src/app/units/states/analytics/unit-analytics-route.component.ts b/src/app/units/states/analytics/unit-analytics-route.component.ts
index 3029bcdd6a..cbe3905354 100644
--- a/src/app/units/states/analytics/unit-analytics-route.component.ts
+++ b/src/app/units/states/analytics/unit-analytics-route.component.ts
@@ -1,11 +1,125 @@
-import { Component, Input } from '@angular/core';
-import { Unit } from 'src/app/api/models/unit';
+import {formatDate} from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, Subscription, distinctUntilChanged, of} from 'rxjs';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {Unit} from 'src/app/api/models/unit';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'f-unit-analytics',
   templateUrl: 'unit-analytics-route.component.html',
   styleUrls: ['unit-analytics-route.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class UnitAnalyticsComponent {
-  @Input() unit: Unit;
+export class UnitAnalyticsComponent implements OnInit, OnDestroy {
+  @Input() public unit$: Observable<Unit>;
+
+  public unit: Unit;
+
+  private unitSub?: Subscription;
+
+  constructor(
+    private sidekiqProgressModalService: SidekiqProgressModalService,
+    private alertsService: AlertService,
+    private fileDownloaderService: FileDownloaderService,
+    private userService: UserService,
+    private alertService: AlertService,
+    private route: ActivatedRoute,
+    @Inject(LOCALE_ID) private locale: string,
+  ) {}
+
+  ngOnInit(): void {
+    this.unit$ = this.unit$ ?? of(this.route.parent.snapshot.data.unit);
+    this.unitSub = this.unit$
+      ?.pipe(distinctUntilChanged((a, b) => a?.id === b?.id))
+      .subscribe((unit) => {
+        this.unit = unit;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.unitSub?.unsubscribe();
+  }
+
+  get role() {
+    return this.unit?.staff.find((s) => s.user.id === this.userService.currentUser.id)?.role;
+  }
+
+  get isAdmin() {
+    return this.userService.currentUser?.systemRole === 'Admin';
+  }
+
+  public getTaskCompletionCsv() {
+    this.downloadCsv(
+      this.unit.downloadTaskCompletionCsv(),
+      'Task Completion Stats CSV',
+      `${this.unit.code}-task-completion-stats.csv`,
+    );
+  }
+
+  public getTutorAssessmentCsv() {
+    this.downloadCsv(
+      this.unit.downloadTutorAssessmentCsv(),
+      'Tutor Assessment Stats CSV',
+      `${this.unit.code}-tutor-assessment-stats.csv`,
+    );
+  }
+
+  public getTasksAwaitingFeedbackCsv() {
+    this.downloadCsv(
+      this.unit.downloadTasksAwaitingFeedbackCsv(),
+      'Tasks Awaiting Feedback CSV',
+      `${this.unit.code}-tasks-awaiting-feedback.csv`,
+    );
+  }
+
+  public getTaskAssessmentCountCsv() {
+    this.downloadCsv(
+      this.unit.downloadTaskAssessmentCountsCsv(),
+      'Task Assessment Counts CSV',
+      `${this.unit.code}-task-assessment-counts.csv`,
+    );
+  }
+
+  public getOverflowTaskClaimsCsv() {
+    const timestamp = formatDate(new Date(), 'd-MMMM-y-HHmm', this.locale).toLowerCase();
+
+    this.downloadCsv(
+      this.unit.downloadOverflowTaskClaimsCsv(),
+      'Overflow Task Claims CSV',
+      `${this.unit.code}-overflow-task-claims-${timestamp}.csv`,
+    );
+  }
+
+  public downloadCsv(newJob: Observable<SidekiqJob>, title: string, filename: string) {
+    newJob.subscribe({
+      next: (job) => {
+        if (!job || !job.id) {
+          return this.alertsService.error(`Failed to download ${title}`, 6000);
+        }
+        this.sidekiqProgressModalService.show(`Downloading ${title}`, job.id).subscribe((job) => {
+          const blob = new Blob([job.result], {type: 'text/csv'});
+          const url = URL.createObjectURL(blob);
+
+          this.fileDownloaderService.downloadBlobToFile(url, filename);
+        });
+      },
+      error: (error) => {
+        this.alertsService.error(`Could not download ${title}: ${error}`, 6000);
+      },
+    });
+  }
 }
diff --git a/src/app/units/states/edit/directives/directives.coffee b/src/app/units/states/edit/directives/directives.coffee
deleted file mode 100644
index bfb12ed317..0000000000
--- a/src/app/units/states/edit/directives/directives.coffee
+++ /dev/null
@@ -1,6 +0,0 @@
-angular.module('doubtfire.units.states.edit.directives', [
-  'doubtfire.units.states.edit.directives.unit-details-editor'
-  'doubtfire.units.states.edit.directives.unit-group-set-editor'
-  'doubtfire.units.states.edit.directives.unit-ilo-editor'
-  'doubtfire.units.states.edit.directives.unit-staff-editor'
-])
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/change-target-grade-action/change-target-grade-action.component.html b/src/app/units/states/edit/directives/unit-communications-editor/actions/change-target-grade-action/change-target-grade-action.component.html
new file mode 100644
index 0000000000..205949ae2f
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/change-target-grade-action/change-target-grade-action.component.html
@@ -0,0 +1,23 @@
+@if (mode === 'edit') {
+  <mat-form-field appearance="outline" class="w-full max-w-[30rem] self-center">
+    <mat-label>Target grade</mat-label>
+    <mat-select [(ngModel)]="editor.actionFor(rule).target_grade">
+      @for (grade of editor.targetGrades; track grade.value) {
+        <mat-option [value]="grade.value">
+          {{ grade.label }}
+        </mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+} @else {
+  <mat-form-field appearance="outline" class="w-full max-w-[30rem] self-center">
+    <mat-label>Target grade</mat-label>
+    <mat-select [(ngModel)]="editor.actionFor(rule).target_grade">
+      @for (grade of editor.targetGrades; track grade.value) {
+        <mat-option [value]="grade.value">
+          {{ grade.label }}
+        </mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/change-target-grade-action/change-target-grade-action.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/actions/change-target-grade-action/change-target-grade-action.component.ts
new file mode 100644
index 0000000000..5be3b69259
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/change-target-grade-action/change-target-grade-action.component.ts
@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommunicationRule} from 'src/app/api/models/doubtfire-model';
+import type {UnitCommunicationsEditorComponent} from '../../unit-communications-editor.component';
+
+@Component({
+  selector: 'f-change-target-grade-action',
+  standalone: false,
+  templateUrl: './change-target-grade-action.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  host: {class: 'flex w-full flex-col items-center'},
+})
+export class ChangeTargetGradeActionComponent {
+  @Input({required: true}) editor: UnitCommunicationsEditorComponent;
+  @Input({required: true}) rule: CommunicationRule;
+  @Input({required: true}) mode: 'add' | 'edit';
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/communication-actions.component.html b/src/app/units/states/edit/directives/unit-communications-editor/actions/communication-actions.component.html
new file mode 100644
index 0000000000..b1697b45d3
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/communication-actions.component.html
@@ -0,0 +1,194 @@
+<div class="flex w-full flex-col gap-4 p-6">
+  <mat-list class="overflow-visible px-3 pt-5">
+    @for (action of rule.actions; track action.id) {
+      <mat-list-item class="!h-auto items-start overflow-visible py-3">
+        @if (editor.editingActionId[rule.id] === action.id) {
+          <div class="flex w-full flex-col gap-3 pt-2">
+            <mat-form-field appearance="outline" class="w-full max-w-80">
+              <mat-label>Action</mat-label>
+              <mat-select
+                [(ngModel)]="editor.actionFor(rule).type"
+                (selectionChange)="editor.onActionTypeChange(rule)"
+              >
+                @for (type of editor.actionTypes; track type) {
+                  <mat-option [value]="type">
+                    {{ editor.actionTypeLabel(type) }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            @switch (editor.actionFor(rule).type) {
+              @case ('EmailStudentAction') {
+                <f-email-student-action mode="edit" [editor]="editor" [rule]="rule" />
+              }
+              @case ('EmailStaffAction') {
+                <f-email-staff-action mode="edit" [editor]="editor" [rule]="rule" />
+              }
+              @case ('TaskCommentAction') {
+                <f-task-comment-action mode="edit" [editor]="editor" [rule]="rule" />
+              }
+              @case ('ChangeTargetGradeAction') {
+                <f-change-target-grade-action mode="edit" [editor]="editor" [rule]="rule" />
+              }
+            }
+            <div class="flex gap-3">
+              <button color="primary" mat-flat-button (click)="editor.updateAction(rule)">
+                <mat-icon>save</mat-icon>
+                Update action
+              </button>
+              <button mat-button (click)="editor.cancelAction(rule)">Cancel</button>
+            </div>
+          </div>
+        } @else {
+          <div class="flex w-full items-start justify-between gap-3">
+            <div class="min-w-0 flex-1">
+              <div class="font-semibold text-black/90">
+                {{ editor.actionTypeLabel(action.type) }}
+              </div>
+              <div class="mt-1 text-black/70">
+                @switch (action.type) {
+                  @case ('ChangeTargetGradeAction') {
+                    <span>Change student's target grade to</span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ editor.targetGradeName(action.target_grade) }}
+                    </span>
+                  }
+                  @case ('EmailStudentAction') {
+                    @if (action.subject || action.body) {
+                      <div class="space-y-3 rounded border border-slate-200 bg-slate-50 p-3">
+                        @if (action.subject) {
+                          <div>
+                            <div class="mb-1 font-medium text-black/80">Subject</div>
+                            <div
+                              [innerHTML]="editor.renderTemplatePreview(action.subject, rule)"
+                            ></div>
+                          </div>
+                        }
+                        @if (action.body) {
+                          <div>
+                            <div class="mb-1 font-medium text-black/80">Body</div>
+                            <div
+                              [innerHTML]="editor.renderTemplatePreview(action.body, rule)"
+                            ></div>
+                          </div>
+                        }
+                      </div>
+                    }
+                  }
+                  @case ('EmailStaffAction') {
+                    <span>Send email to</span>
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.staffAudienceLabel(action) }}
+                    </span>
+                    @if (action.subject || action.body) {
+                      <div class="space-y-3 rounded border border-slate-200 bg-slate-50 p-3">
+                        @if (action.subject) {
+                          <div>
+                            <div class="mb-1 font-medium text-black/80">Subject</div>
+                            <div
+                              [innerHTML]="editor.renderTemplatePreview(action.subject, rule)"
+                            ></div>
+                          </div>
+                        }
+                        @if (action.body) {
+                          <div>
+                            <div class="mb-1 font-medium text-black/80">Body</div>
+                            <div
+                              [innerHTML]="editor.renderTemplatePreview(action.body, rule)"
+                            ></div>
+                          </div>
+                        }
+                      </div>
+                    }
+                  }
+                  @case ('TaskCommentAction') {
+                    <span>Add comment to</span>
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.taskDefinitionLabel(action.task_definition_id) }}
+                    </span>
+                    @if (action.body) {
+                      <div class="space-y-3 rounded border border-slate-200 bg-slate-50 p-3">
+                        <div>
+                          <div class="mb-1 font-medium text-black/80">Comment</div>
+                          <div [innerHTML]="editor.renderTemplatePreview(action.body, rule)"></div>
+                        </div>
+                      </div>
+                    }
+                  }
+                  @default {
+                    {{ editor.actionSummary(action) }}
+                  }
+                }
+              </div>
+            </div>
+            <div class="flex shrink-0 items-center">
+              <button mat-icon-button (click)="editor.editAction(rule, action)">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button mat-icon-button (click)="editor.deleteAction(rule, action)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        }
+      </mat-list-item>
+    }
+  </mat-list>
+
+  @if (editor.actionFormOpen[rule.id] && !editor.editingActionId[rule.id]) {
+    <div class="flex w-full flex-col flex-wrap items-stretch gap-3">
+      <mat-form-field appearance="outline" class="w-full max-w-80 self-center">
+        <mat-label>Action</mat-label>
+        <mat-select
+          [(ngModel)]="editor.actionFor(rule).type"
+          (selectionChange)="editor.onActionTypeChange(rule)"
+        >
+          @for (type of editor.actionTypes; track type) {
+            <mat-option [value]="type">
+              {{ editor.actionTypeLabel(type) }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      @switch (editor.actionFor(rule).type) {
+        @case ('EmailStudentAction') {
+          <f-email-student-action mode="add" [editor]="editor" [rule]="rule" />
+        }
+
+        @case ('EmailStaffAction') {
+          <f-email-staff-action mode="add" [editor]="editor" [rule]="rule" />
+        }
+
+        @case ('TaskCommentAction') {
+          <f-task-comment-action mode="add" [editor]="editor" [rule]="rule" />
+        }
+
+        @case ('ChangeTargetGradeAction') {
+          <f-change-target-grade-action mode="add" [editor]="editor" [rule]="rule" />
+        }
+      }
+
+      <button
+        class="w-full max-w-80 self-center"
+        color="primary"
+        mat-flat-button
+        (click)="
+          editor.editingActionId[rule.id] ? editor.updateAction(rule) : editor.addAction(rule)
+        "
+      >
+        <mat-icon>save</mat-icon>
+        {{ editor.editingActionId[rule.id] ? 'Update action' : 'Save action' }}
+      </button>
+
+      <button class="mb-[22px]" mat-button (click)="editor.cancelAction(rule)">Cancel</button>
+    </div>
+  } @else {
+    <div class="flex items-center justify-center">
+      <button color="primary" mat-stroked-button (click)="editor.showActionForm(rule)">
+        <mat-icon>add</mat-icon>
+        Add action
+      </button>
+    </div>
+  }
+</div>
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/communication-actions.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/actions/communication-actions.component.ts
new file mode 100644
index 0000000000..254e5ccf50
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/communication-actions.component.ts
@@ -0,0 +1,14 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommunicationRule} from 'src/app/api/models/doubtfire-model';
+import type {UnitCommunicationsEditorComponent} from '../unit-communications-editor.component';
+
+@Component({
+  selector: 'f-communication-actions',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  templateUrl: './communication-actions.component.html',
+})
+export class CommunicationActionsComponent {
+  @Input({required: true}) editor: UnitCommunicationsEditorComponent;
+  @Input({required: true}) rule: CommunicationRule;
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/email-staff-action/email-staff-action.component.html b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-staff-action/email-staff-action.component.html
new file mode 100644
index 0000000000..f9b756c6fc
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-staff-action/email-staff-action.component.html
@@ -0,0 +1,122 @@
+@if (mode === 'edit') {
+  <div class="flex w-full min-w-[520px] flex-col gap-3">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Subject</mat-label>
+      <input matInput [(ngModel)]="editor.actionFor(rule).subject" />
+      <button mat-icon-button matSuffix [matMenuTriggerFor]="staffSubjectVariableMenu">
+        <mat-icon>add_circle</mat-icon>
+      </button>
+    </mat-form-field>
+    <mat-menu #staffSubjectVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button
+          mat-menu-item
+          (click)="editor.insertActionVariable(rule, 'subject', variable.token)"
+        >
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+    @if (editor.actionFor(rule).subject) {
+      <div class="rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Subject Preview</div>
+        <div [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).subject, rule)"></div>
+      </div>
+    }
+    <div class="grid items-stretch gap-3 md:grid-cols-2">
+      <mat-form-field appearance="outline" class="w-full">
+        <mat-label>Body</mat-label>
+        <textarea matInput rows="8" [(ngModel)]="editor.actionFor(rule).body"></textarea>
+        <button mat-icon-button matSuffix [matMenuTriggerFor]="staffBodyVariableMenu">
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </mat-form-field>
+      <div class="flex h-full flex-col rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Body Preview</div>
+        <div class="flex-1">
+          @if (editor.actionFor(rule).body) {
+            <div
+              [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).body, rule)"
+            ></div>
+          } @else {
+            <div class="text-black/40">Preview will appear here.</div>
+          }
+        </div>
+      </div>
+    </div>
+    <mat-menu #staffBodyVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button mat-menu-item (click)="editor.insertActionVariable(rule, 'body', variable.token)">
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+    <div class="flex gap-4">
+      <mat-checkbox [(ngModel)]="editor.actionFor(rule).email_tutors">Tutors</mat-checkbox>
+      <mat-checkbox [(ngModel)]="editor.actionFor(rule).email_convenors">Convenors</mat-checkbox>
+    </div>
+    <div class="text-sm text-black/50">Sent from the main convenor.</div>
+  </div>
+} @else {
+  <div class="flex w-full min-w-[520px] flex-col gap-3">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Subject</mat-label>
+      <input matInput [(ngModel)]="editor.actionFor(rule).subject" />
+      <button mat-icon-button matSuffix [matMenuTriggerFor]="staffSubjectVariableMenu">
+        <mat-icon>add_circle</mat-icon>
+      </button>
+    </mat-form-field>
+    <mat-menu #staffSubjectVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button
+          mat-menu-item
+          (click)="editor.insertActionVariable(rule, 'subject', variable.token)"
+        >
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+
+    @if (editor.actionFor(rule).subject) {
+      <div class="rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Subject Preview</div>
+        <div [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).subject, rule)"></div>
+      </div>
+    }
+
+    <div class="grid items-stretch gap-3 md:grid-cols-2">
+      <mat-form-field appearance="outline" class="size-full">
+        <mat-label>Body</mat-label>
+        <textarea matInput rows="8" [(ngModel)]="editor.actionFor(rule).body"></textarea>
+        <button mat-icon-button matSuffix [matMenuTriggerFor]="staffBodyVariableMenu">
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </mat-form-field>
+      <div class="flex size-full flex-col rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Body Preview</div>
+        <div class="flex-1">
+          @if (editor.actionFor(rule).body) {
+            <div
+              [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).body, rule)"
+            ></div>
+          } @else {
+            <div class="text-black/40">Preview will appear here.</div>
+          }
+        </div>
+      </div>
+    </div>
+    <mat-menu #staffBodyVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button mat-menu-item (click)="editor.insertActionVariable(rule, 'body', variable.token)">
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+
+    <div class="flex gap-4">
+      <mat-checkbox [(ngModel)]="editor.actionFor(rule).email_tutors">Tutors</mat-checkbox>
+      <mat-checkbox [(ngModel)]="editor.actionFor(rule).email_convenors">Convenors</mat-checkbox>
+    </div>
+    <div class="text-sm text-black/50">Sent from the main convenor.</div>
+  </div>
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/email-staff-action/email-staff-action.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-staff-action/email-staff-action.component.ts
new file mode 100644
index 0000000000..91f2a22c79
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-staff-action/email-staff-action.component.ts
@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommunicationRule} from 'src/app/api/models/doubtfire-model';
+import type {UnitCommunicationsEditorComponent} from '../../unit-communications-editor.component';
+
+@Component({
+  selector: 'f-email-staff-action',
+  standalone: false,
+  templateUrl: './email-staff-action.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  host: {class: 'block w-full'},
+})
+export class EmailStaffActionComponent {
+  @Input({required: true}) editor: UnitCommunicationsEditorComponent;
+  @Input({required: true}) rule: CommunicationRule;
+  @Input({required: true}) mode: 'add' | 'edit';
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/email-student-action/email-student-action.component.html b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-student-action/email-student-action.component.html
new file mode 100644
index 0000000000..90bdbf0273
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-student-action/email-student-action.component.html
@@ -0,0 +1,113 @@
+@if (mode === 'edit') {
+  <div class="flex w-full min-w-[520px] flex-col gap-3">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Subject</mat-label>
+      <input matInput [(ngModel)]="editor.actionFor(rule).subject" />
+      <button mat-icon-button matSuffix [matMenuTriggerFor]="subjectVariableMenu">
+        <mat-icon>add_circle</mat-icon>
+      </button>
+    </mat-form-field>
+    <mat-menu #subjectVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button
+          mat-menu-item
+          (click)="editor.insertActionVariable(rule, 'subject', variable.token)"
+        >
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+    @if (editor.actionFor(rule).subject) {
+      <div class="rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Subject Preview</div>
+        <div [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).subject, rule)"></div>
+      </div>
+    }
+    <div class="flex items-stretch gap-3">
+      <mat-form-field appearance="outline" class="w-full">
+        <mat-label>Body</mat-label>
+        <textarea matInput rows="8" [(ngModel)]="editor.actionFor(rule).body"></textarea>
+        <button mat-icon-button matSuffix [matMenuTriggerFor]="bodyVariableMenu">
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </mat-form-field>
+      <div class="flex size-full flex-col rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Body Preview</div>
+        <div class="flex-1">
+          @if (editor.actionFor(rule).body) {
+            <div
+              [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).body, rule)"
+            ></div>
+          } @else {
+            <div class="text-black/40">Preview will appear here.</div>
+          }
+        </div>
+      </div>
+    </div>
+    <mat-menu #bodyVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button mat-menu-item (click)="editor.insertActionVariable(rule, 'body', variable.token)">
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+    <div class="text-sm text-black/50">Sent from the main convenor.</div>
+  </div>
+} @else {
+  <div class="flex w-full min-w-[520px] flex-col gap-3">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Subject</mat-label>
+      <input matInput [(ngModel)]="editor.actionFor(rule).subject" />
+      <button mat-icon-button matSuffix [matMenuTriggerFor]="subjectVariableMenu">
+        <mat-icon>add_circle</mat-icon>
+      </button>
+    </mat-form-field>
+    <mat-menu #subjectVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button
+          mat-menu-item
+          (click)="editor.insertActionVariable(rule, 'subject', variable.token)"
+        >
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+
+    @if (editor.actionFor(rule).subject) {
+      <div class="rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Subject Preview</div>
+        <div [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).subject, rule)"></div>
+      </div>
+    }
+
+    <div class="flex items-stretch gap-3">
+      <mat-form-field appearance="outline" class="w-full">
+        <mat-label>Body</mat-label>
+        <textarea matInput rows="8" [(ngModel)]="editor.actionFor(rule).body"></textarea>
+        <button mat-icon-button matSuffix [matMenuTriggerFor]="bodyVariableMenu">
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </mat-form-field>
+      <div class="flex size-full flex-col rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Body Preview</div>
+        <div class="flex-1">
+          @if (editor.actionFor(rule).body) {
+            <div
+              [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).body, rule)"
+            ></div>
+          } @else {
+            <div class="text-black/40">Preview will appear here.</div>
+          }
+        </div>
+      </div>
+    </div>
+    <mat-menu #bodyVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button mat-menu-item (click)="editor.insertActionVariable(rule, 'body', variable.token)">
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+    <div class="text-sm text-black/50">Sent from the main convenor.</div>
+  </div>
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/email-student-action/email-student-action.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-student-action/email-student-action.component.ts
new file mode 100644
index 0000000000..100e890c66
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/email-student-action/email-student-action.component.ts
@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommunicationRule} from 'src/app/api/models/doubtfire-model';
+import type {UnitCommunicationsEditorComponent} from '../../unit-communications-editor.component';
+
+@Component({
+  selector: 'f-email-student-action',
+  standalone: false,
+  templateUrl: './email-student-action.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  host: {class: 'block w-full'},
+})
+export class EmailStudentActionComponent {
+  @Input({required: true}) editor: UnitCommunicationsEditorComponent;
+  @Input({required: true}) rule: CommunicationRule;
+  @Input({required: true}) mode: 'add' | 'edit';
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/task-comment-action/task-comment-action.component.html b/src/app/units/states/edit/directives/unit-communications-editor/actions/task-comment-action/task-comment-action.component.html
new file mode 100644
index 0000000000..ab8034b1a1
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/task-comment-action/task-comment-action.component.html
@@ -0,0 +1,86 @@
+@if (mode === 'edit') {
+  <div class="flex w-full min-w-[520px] flex-col gap-3">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Task</mat-label>
+      <mat-select [(ngModel)]="editor.actionFor(rule).task_definition_id">
+        @for (taskDefinition of editor.taskDefinitions; track taskDefinition.id) {
+          <mat-option [value]="taskDefinition.id">
+            {{ taskDefinition.abbreviation }}
+            {{ taskDefinition.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <div class="grid items-stretch gap-3 md:grid-cols-2">
+      <mat-form-field appearance="outline" class="h-full">
+        <mat-label>Comment</mat-label>
+        <textarea matInput rows="8" [(ngModel)]="editor.actionFor(rule).body"></textarea>
+        <button mat-icon-button matSuffix [matMenuTriggerFor]="commentBodyVariableMenu">
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </mat-form-field>
+      <div class="flex h-full flex-col rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Comment Preview</div>
+        <div class="flex-1">
+          @if (editor.actionFor(rule).body) {
+            <div
+              [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).body, rule)"
+            ></div>
+          } @else {
+            <div class="text-black/40">Preview will appear here.</div>
+          }
+        </div>
+      </div>
+    </div>
+    <mat-menu #commentBodyVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button mat-menu-item (click)="editor.insertActionVariable(rule, 'body', variable.token)">
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+    <div class="text-sm text-black/50">Sent from the main convenor.</div>
+  </div>
+} @else {
+  <div class="flex w-full min-w-[520px] flex-col gap-3">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Task</mat-label>
+      <mat-select [(ngModel)]="editor.actionFor(rule).task_definition_id">
+        @for (taskDefinition of editor.taskDefinitions; track taskDefinition.id) {
+          <mat-option [value]="taskDefinition.id">
+            {{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <div class="grid items-stretch gap-3 md:grid-cols-2">
+      <mat-form-field appearance="outline" class="size-full">
+        <mat-label>Comment</mat-label>
+        <textarea matInput rows="8" [(ngModel)]="editor.actionFor(rule).body"></textarea>
+        <button mat-icon-button matSuffix [matMenuTriggerFor]="commentBodyVariableMenu">
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </mat-form-field>
+      <div class="flex size-full flex-col rounded border border-slate-200 bg-slate-50 p-3">
+        <div class="mb-2 font-medium">Comment Preview</div>
+        <div class="flex-1">
+          @if (editor.actionFor(rule).body) {
+            <div
+              [innerHTML]="editor.renderTemplatePreview(editor.actionFor(rule).body, rule)"
+            ></div>
+          } @else {
+            <div class="text-black/40">Preview will appear here.</div>
+          }
+        </div>
+      </div>
+    </div>
+    <mat-menu #commentBodyVariableMenu="matMenu">
+      @for (variable of editor.emailVariables; track variable.token) {
+        <button mat-menu-item (click)="editor.insertActionVariable(rule, 'body', variable.token)">
+          {{ variable.label }}
+        </button>
+      }
+    </mat-menu>
+    <div class="text-sm text-black/50">Sent from the main convenor.</div>
+  </div>
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/actions/task-comment-action/task-comment-action.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/actions/task-comment-action/task-comment-action.component.ts
new file mode 100644
index 0000000000..6c459e3d26
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/actions/task-comment-action/task-comment-action.component.ts
@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommunicationRule} from 'src/app/api/models/doubtfire-model';
+import type {UnitCommunicationsEditorComponent} from '../../unit-communications-editor.component';
+
+@Component({
+  selector: 'f-task-comment-action',
+  standalone: false,
+  templateUrl: './task-comment-action.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  host: {class: 'block w-full'},
+})
+export class TaskCommentActionComponent {
+  @Input({required: true}) editor: UnitCommunicationsEditorComponent;
+  @Input({required: true}) rule: CommunicationRule;
+  @Input({required: true}) mode: 'add' | 'edit';
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedule-modal.component.html b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedule-modal.component.html
new file mode 100644
index 0000000000..047dece923
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedule-modal.component.html
@@ -0,0 +1,91 @@
+<h2 mat-dialog-title>
+  {{ draft.id ? 'Edit communication schedule' : 'Add communication schedule' }}
+</h2>
+
+<mat-dialog-content class="flex max-h-[80vh] min-w-[52rem] flex-col gap-4 !overflow-visible">
+  <div class="grid grid-cols-2 gap-4">
+    <mat-form-field appearance="outline">
+      <mat-label>Name</mat-label>
+      <input matInput placeholder="Week 3 reminder" [(ngModel)]="draft.name" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Timezone</mat-label>
+      <input matInput [placeholder]="timezonePlaceholder" [(ngModel)]="draft.timezone" />
+    </mat-form-field>
+  </div>
+
+  <mat-slide-toggle [(ngModel)]="draft.active">Schedule active</mat-slide-toggle>
+
+  <div class="grid grid-cols-4 gap-4">
+    <mat-form-field appearance="outline">
+      <mat-label>Week</mat-label>
+      <input matInput min="1" type="number" [(ngModel)]="draft.anchor_week" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Day</mat-label>
+      <mat-select [(ngModel)]="draft.anchor_day">
+        @for (weekday of weekdays; track weekday.value) {
+          <mat-option [value]="weekday.label">{{ weekday.label }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Hour</mat-label>
+      <input matInput max="23" min="0" type="number" [(ngModel)]="draft.hour" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Minute</mat-label>
+      <input matInput max="59" min="0" type="number" [(ngModel)]="draft.minute" />
+    </mat-form-field>
+  </div>
+
+  <mat-form-field appearance="outline" class="max-w-72">
+    <mat-label>Repeat</mat-label>
+    <mat-select [(ngModel)]="draft.recurrence">
+      <mat-option value="none">One time only</mat-option>
+      <mat-option value="daily">Daily</mat-option>
+      <mat-option value="weekly">Weekly</mat-option>
+      <mat-option value="monthly">Monthly</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  @if (draft.recurrence !== 'none') {
+    <div class="grid grid-cols-3 gap-4">
+      <mat-form-field appearance="outline">
+        <mat-label>Every</mat-label>
+        <input matInput min="1" type="number" [(ngModel)]="draft.interval" />
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Stop after runs</mat-label>
+        <input matInput min="1" type="number" [(ngModel)]="draft.repeat_count" />
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Or stop on</mat-label>
+        <input matInput type="datetime-local" [(ngModel)]="untilDateTime" />
+      </mat-form-field>
+    </div>
+  }
+
+  <div>
+    <div class="mb-2">Summary</div>
+    <div>{{ scheduleSummary() }}</div>
+  </div>
+
+  <!-- <div class="rounded border border-gray-200 bg-slate-950 p-4 text-xs text-slate-100">
+    <div class="mb-2 font-medium text-slate-50">IceCube payload preview</div>
+    <pre class="overflow-auto whitespace-pre-wrap">{{ iceCubePreview() }}</pre>
+  </div> -->
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="dialogRef.close()">Cancel</button>
+  <button color="primary" mat-flat-button [disabled]="!canSave()" (click)="save()">
+    Save schedule
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedule-modal.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedule-modal.component.ts
new file mode 100644
index 0000000000..6af27bd31e
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedule-modal.component.ts
@@ -0,0 +1,196 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {
+  Campus,
+  CampusService,
+  CommunicationSetSchedule,
+  Unit,
+} from 'src/app/api/models/doubtfire-model';
+
+export interface CommunicationScheduleModalData {
+  schedule?: CommunicationSetSchedule;
+  unit?: Unit;
+}
+
+export const SCHEDULE_WEEKDAYS = [
+  {value: 0, label: 'Sunday', shortLabel: 'Sun'},
+  {value: 1, label: 'Monday', shortLabel: 'Mon'},
+  {value: 2, label: 'Tuesday', shortLabel: 'Tue'},
+  {value: 3, label: 'Wednesday', shortLabel: 'Wed'},
+  {value: 4, label: 'Thursday', shortLabel: 'Thu'},
+  {value: 5, label: 'Friday', shortLabel: 'Fri'},
+  {value: 6, label: 'Saturday', shortLabel: 'Sat'},
+] as const;
+
+@Component({
+  selector: 'f-communication-schedule-modal',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  templateUrl: './communication-schedule-modal.component.html',
+})
+export class CommunicationScheduleModalComponent implements OnInit {
+  readonly weekdays = SCHEDULE_WEEKDAYS;
+  campuses: Campus[] = [];
+  timezonePlaceholder = 'UTC';
+  draft = new CommunicationSetSchedule({
+    name: 'Schedule 1',
+    active: true,
+    anchor_week: 1,
+    anchor_day: 'Monday',
+    recurrence: 'none',
+    interval: 1,
+    timezone: 'UTC',
+    hour: 8,
+    minute: 0,
+  });
+  untilDateTime = '';
+
+  constructor(
+    private campusService: CampusService,
+    public dialogRef: MatDialogRef<CommunicationScheduleModalComponent, CommunicationSetSchedule>,
+    @Inject(MAT_DIALOG_DATA) public data: CommunicationScheduleModalData,
+  ) {
+    if (data.schedule) {
+      this.draft = new CommunicationSetSchedule({
+        ...data.schedule,
+      });
+    }
+
+    this.untilDateTime = this.asDateTimeLocal(this.draft.until_at);
+  }
+
+  ngOnInit(): void {
+    this.campusService.query().subscribe((campuses) => {
+      this.campuses = campuses;
+      const defaultTimezone = campuses[0]?.timezone;
+      if (!defaultTimezone) {
+        return;
+      }
+
+      this.timezonePlaceholder = defaultTimezone;
+      if (!this.draft.timezone || this.draft.timezone === 'UTC') {
+        this.draft.timezone = defaultTimezone;
+      }
+    });
+  }
+
+  canSave(): boolean {
+    return !!this.draft.anchor_week && !!this.draft.anchor_day;
+  }
+
+  save(): void {
+    const schedule = new CommunicationSetSchedule({
+      ...this.draft,
+      name: this.draft.name?.trim() || 'Untitled schedule',
+      until_at: this.untilDateTime || undefined,
+      anchor_week: Math.max(1, Number(this.draft.anchor_week || 1)),
+      anchor_day: this.draft.anchor_day || 'Monday',
+      hour: this.safeHour(),
+      minute: this.safeMinute(),
+    });
+
+    schedule.ice_cube_schedule = this.toIceCubePayload(schedule);
+    this.dialogRef.close(schedule);
+  }
+
+  scheduleSummary(): string {
+    const parts: string[] = [];
+    parts.push(
+      `Starts Week ${this.draft.anchor_week || 1} ${this.draft.anchor_day || 'Monday'} at ${this.timeLabel(this.safeHour(), this.safeMinute())}`,
+    );
+
+    switch (this.draft.recurrence) {
+      case 'daily':
+        parts.push(`Repeats every ${this.draft.interval || 1} day(s)`);
+        break;
+      case 'weekly':
+        parts.push(`Repeats every ${this.draft.interval || 1} week(s)`);
+        break;
+      case 'monthly':
+        parts.push(`Repeats every ${this.draft.interval || 1} month(s)`);
+        break;
+      default:
+        parts.push('Runs once');
+    }
+
+    if (this.draft.repeat_count) {
+      parts.push(`up to ${this.draft.repeat_count} times`);
+    }
+    if (this.untilDateTime) {
+      parts.push(`until ${this.untilDateTime}`);
+    }
+
+    return parts.join(' | ');
+  }
+
+  iceCubePreview(): string {
+    return JSON.stringify(this.toIceCubePayload(this.draft), null, 2);
+  }
+
+  private safeHour(): number {
+    return Math.min(23, Math.max(0, Number(this.draft.hour ?? 8)));
+  }
+
+  private safeMinute(): number {
+    return Math.min(59, Math.max(0, Number(this.draft.minute ?? 0)));
+  }
+
+  private toIceCubePayload(schedule: CommunicationSetSchedule): Record<string, unknown> {
+    const payload: Record<string, unknown> = {
+      timezone: schedule.timezone || 'UTC',
+      anchor: this.anchorPayload(schedule),
+      recurrence: schedule.recurrence,
+      interval: schedule.interval || 1,
+      limits: {
+        count: schedule.repeat_count || null,
+        until: schedule.until_at || null,
+      },
+      rules: [],
+    };
+
+    const rules = payload.rules as Record<string, unknown>[];
+    switch (schedule.recurrence) {
+      case 'daily':
+        rules.push({
+          type: 'daily',
+          interval: schedule.interval || 1,
+        });
+        break;
+      case 'weekly':
+        rules.push({
+          type: 'weekly',
+          interval: schedule.interval || 1,
+        });
+        break;
+      case 'monthly':
+        rules.push({
+          type: 'monthly',
+          interval: schedule.interval || 1,
+        });
+        break;
+      default:
+        rules.push({type: 'one_off'});
+    }
+
+    return payload;
+  }
+
+  private anchorPayload(schedule: CommunicationSetSchedule): Record<string, unknown> {
+    return {
+      week: schedule.anchor_week || 1,
+      day: schedule.anchor_day || 'Monday',
+      time_of_day: this.timeLabel(schedule.hour || 0, schedule.minute || 0),
+    };
+  }
+
+  private asDateTimeLocal(value?: string): string {
+    if (!value) {
+      return '';
+    }
+    return value.length >= 16 ? value.slice(0, 16) : value;
+  }
+
+  private timeLabel(hour: number, minute: number): string {
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedules.component.html b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedules.component.html
new file mode 100644
index 0000000000..1d5dbcf1e8
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedules.component.html
@@ -0,0 +1,71 @@
+@if (editor.setPreviewLoading) {
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+}
+
+<div class="border-b border-gray-200 px-6 py-5">
+  <div class="mb-4 flex items-center justify-between gap-4">
+    <div>
+      <div class="font-medium">Schedules</div>
+      <div class="text-black/60">Build one-off or recurring schedules for this set.</div>
+    </div>
+    <!-- <button mat-flat-button color="primary" (click)="addSchedule(set)">
+                  <mat-icon>add</mat-icon>
+                  New schedule
+                </button> -->
+  </div>
+
+  @if ((set.schedules || []).length) {
+    <div class="grid gap-3">
+      @for (schedule of set.schedules || []; track editor.scheduleTrackId(schedule)) {
+        <div class="rounded border border-gray-200 bg-gray-50 p-4">
+          <div class="mb-3 flex items-start justify-between gap-4">
+            <div>
+              <div class="font-medium">{{ schedule.name || 'Untitled schedule' }}</div>
+              <div class="text-black/60">{{ editor.scheduleSummary(schedule) }}</div>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <span
+                class="rounded-full px-3 py-1 font-medium"
+                [ngClass]="
+                  schedule.active ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-700'
+                "
+              >
+                {{ schedule.active ? 'Active' : 'Inactive' }}
+              </span>
+              <button mat-icon-button (click)="editor.editSchedule(set, schedule)">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button color="warn" mat-icon-button (click)="editor.deleteSchedule(set, schedule)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+
+          <div class="grid gap-3 md:grid-cols-4">
+            <div>
+              <div class="tracking-wide text-black/40 uppercase">Anchor</div>
+              <div class="">{{ editor.scheduleAnchorSummary(schedule) }}</div>
+            </div>
+            <div>
+              <div class="tracking-wide text-black/40 uppercase">Time</div>
+              <div class="">{{ editor.scheduleTimeSummary(schedule) }}</div>
+            </div>
+            <div>
+              <div class="tracking-wide text-black/40 uppercase">Next Run</div>
+              <div class="">{{ editor.scheduleNextRunSummary(schedule) }}</div>
+            </div>
+            <div>
+              <div class="tracking-wide text-black/40 uppercase">Last Run</div>
+              <div class="">{{ editor.scheduleLastRunSummary(schedule) }}</div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  } @else {
+    <div class="rounded border border-dashed border-gray-300 bg-white px-4 py-6 text-black/60">
+      No schedules yet. Add one to run this set on a fixed date or on a repeating cadence.
+    </div>
+  }
+</div>
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedules.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedules.component.ts
new file mode 100644
index 0000000000..aa1156619e
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/communication-schedule-modal/communication-schedules.component.ts
@@ -0,0 +1,14 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommunicationSet} from 'src/app/api/models/doubtfire-model';
+import type {UnitCommunicationsEditorComponent} from '../unit-communications-editor.component';
+
+@Component({
+  selector: 'f-communication-schedules',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  templateUrl: './communication-schedules.component.html',
+})
+export class CommunicationSchedulesComponent {
+  @Input({required: true}) editor: UnitCommunicationsEditorComponent;
+  @Input({required: true}) set: CommunicationSet;
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/conditions/communication-conditions.component.html b/src/app/units/states/edit/directives/unit-communications-editor/conditions/communication-conditions.component.html
new file mode 100644
index 0000000000..898b9b431e
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/conditions/communication-conditions.component.html
@@ -0,0 +1,497 @@
+<div class="flex flex-col p-6">
+  <div class="flex">
+    <mat-form-field appearance="outline" class="min-w-[320px]">
+      <mat-label>Conditions</mat-label>
+      <mat-select [(ngModel)]="rule.operator" (selectionChange)="editor.updateRuleOperator(rule)">
+        @for (option of editor.logicalOperatorOptions; track option.value) {
+          <mat-option [value]="option.value">
+            {{ option.label }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <mat-list class="overflow-visible px-3 pt-5">
+    @for (condition of rule.conditions; track condition.id) {
+      <mat-list-item class="!h-auto items-start overflow-visible py-3">
+        @if (editor.editingConditionId[rule.id] === condition.id) {
+          <div class="flex w-full flex-wrap items-start gap-3 pt-2">
+            <mat-form-field appearance="outline">
+              <mat-label>Condition</mat-label>
+              <mat-select
+                [(ngModel)]="editor.conditionFor(rule).type"
+                (selectionChange)="editor.onConditionTypeChange(rule)"
+              >
+                @for (type of editor.conditionTypes; track type) {
+                  <mat-option [value]="type">
+                    {{ editor.conditionTypeLabel(type) }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+
+            @if (editor.conditionFor(rule).type === 'TaskDefinitionStatusCondition') {
+              <mat-form-field appearance="outline" class="min-w-[450px]">
+                <mat-label>Task</mat-label>
+                <mat-select [(ngModel)]="editor.conditionFor(rule).task_definition_id">
+                  @for (taskDefinition of editor.taskDefinitions; track taskDefinition.id) {
+                    <mat-option [value]="taskDefinition.id">
+                      {{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+
+            <mat-form-field appearance="outline" class="min-w-[300px]">
+              <mat-label>Operator</mat-label>
+              <mat-select [(ngModel)]="editor.conditionFor(rule).operator">
+                @for (
+                  operator of editor.operatorsFor(editor.conditionFor(rule).type);
+                  track operator
+                ) {
+                  <mat-option [value]="operator">
+                    {{ editor.operatorLabel(operator) }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+
+            @if (editor.conditionFor(rule).type === 'TaskStatusCountCondition') {
+              <mat-form-field appearance="outline" class="w-32">
+                <mat-label>Count</mat-label>
+                <input
+                  matInput
+                  min="0"
+                  type="number"
+                  [(ngModel)]="editor.conditionFor(rule).task_status_count"
+                />
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="w-22">
+                <mat-label>Task grade</mat-label>
+                <mat-select [(ngModel)]="editor.conditionFor(rule).task_target_grade">
+                  @for (grade of editor.targetGrades; track grade.value) {
+                    <mat-option [value]="grade.value">
+                      {{ grade.label }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+
+            @switch (editor.conditionFor(rule).type) {
+              @case ('TargetGradeCondition') {
+                <mat-form-field appearance="outline">
+                  <mat-label>Target grade</mat-label>
+                  <mat-select [(ngModel)]="editor.conditionFor(rule).target_grade">
+                    @for (grade of editor.targetGrades; track grade.value) {
+                      <mat-option [value]="grade.value">
+                        {{ grade.label }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+              @case ('TaskDefinitionStatusCondition') {
+                <mat-form-field appearance="outline">
+                  <mat-label>Statuses</mat-label>
+                  <mat-select multiple [(ngModel)]="editor.conditionFor(rule).task_statuses">
+                    @for (status of editor.taskStatuses; track status) {
+                      <mat-option [value]="status">
+                        {{ editor.taskStatusLabel(status) }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+              @case ('TaskStatusCountCondition') {
+                <mat-form-field appearance="outline" class="min-w-[320px]">
+                  <mat-label>Statuses</mat-label>
+                  <mat-select multiple [(ngModel)]="editor.conditionFor(rule).task_statuses">
+                    @for (status of editor.taskStatuses; track status) {
+                      <mat-option [value]="status">
+                        {{ editor.taskStatusLabel(status) }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+              @case ('LoginStatusCondition') {
+                <mat-form-field appearance="outline">
+                  <mat-label>Last sign in</mat-label>
+                  <input
+                    matInput
+                    type="datetime-local"
+                    [(ngModel)]="editor.conditionFor(rule).last_sign_in_at"
+                  />
+                </mat-form-field>
+              }
+              @case ('SpecConCondition') {
+                <mat-form-field appearance="outline" class="w-32">
+                  <mat-label>Days</mat-label>
+                  <input
+                    matInput
+                    step="1"
+                    type="number"
+                    [(ngModel)]="editor.conditionFor(rule).spec_con_days"
+                  />
+                </mat-form-field>
+              }
+              @case ('TutorialEnrolmentCondition') {
+                <mat-form-field appearance="outline" class="min-w-[550px]">
+                  <mat-label>Tutorial</mat-label>
+                  <mat-select [(ngModel)]="editor.conditionFor(rule).tutorial_id">
+                    @for (tutorial of editor.tutorials; track tutorial.id) {
+                      <mat-option [value]="tutorial.id">
+                        {{ tutorial.abbreviation }} {{ tutorial.description }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+              @case ('TutorialStreamEnrolmentCondition') {
+                <mat-form-field appearance="outline" class="min-w-[350px]">
+                  <mat-label>Tutorial stream</mat-label>
+                  <mat-select [(ngModel)]="editor.conditionFor(rule).tutorial_stream_id">
+                    @for (stream of editor.tutorialStreams; track stream.id) {
+                      <mat-option [value]="stream.id">
+                        {{ stream.abbreviation }} {{ stream.name }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+              @case ('CampusCondition') {
+                <mat-form-field appearance="outline">
+                  <mat-label>Campus</mat-label>
+                  <mat-select [(ngModel)]="editor.conditionFor(rule).campus_id">
+                    @for (campus of editor.campuses; track campus.id) {
+                      <mat-option [value]="campus.id">
+                        {{ campus.abbreviation }} {{ campus.name }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+            }
+
+            <button
+              class="mb-[22px]"
+              color="primary"
+              mat-flat-button
+              (click)="editor.updateCondition(rule)"
+            >
+              <mat-icon>save</mat-icon>
+              Save
+            </button>
+            <button class="mb-[22px]" mat-button (click)="editor.cancelCondition(rule)">
+              Cancel
+            </button>
+          </div>
+        } @else {
+          <div class="flex w-full items-start justify-between gap-3">
+            <div class="min-w-0 flex-1">
+              <div class="font-semibold text-black/90">
+                {{ editor.conditionTypeLabel(condition.type) }}
+              </div>
+              <div class="text-black/70">
+                @switch (condition.type) {
+                  @case ('TargetGradeCondition') {
+                    Students with a
+                    <strong class="font-semibold text-black/90">Target Grade</strong>
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.operatorLabel(condition.operator) }}
+                    </span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ editor.targetGradeName(condition.target_grade) }}
+                    </span>
+                  }
+                  @case ('TaskDefinitionStatusCondition') {
+                    Students that have
+                    <strong class="font-semibold text-black/90">
+                      {{ editor.taskDefinitionLabel(condition.task_definition_id) }}
+                    </strong>
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.taskStatusPredicate(condition.operator) }}
+                    </span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ editor.taskStatusesLabel(condition.task_statuses) }}
+                    </span>
+                  }
+                  @case ('TaskStatusCountCondition') {
+                    Students with
+                    <strong class="font-semibold text-black/90">Task Status Count</strong>
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.operatorLabel(condition.operator) }}
+                    </span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ condition.task_status_count }}
+                    </span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ editor.targetGradeName(condition.task_target_grade) }}
+                    </span>
+                    tasks in
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ editor.taskStatusesLabel(condition.task_statuses) }}
+                    </span>
+                  }
+                  @case ('LoginStatusCondition') {
+                    Students with a
+                    <strong class="font-semibold text-black/90">Last Sign In</strong>
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.operatorLabel(condition.operator) }}
+                    </span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ editor.dateLabel(condition.last_sign_in_at) }}
+                    </span>
+                  }
+                  @case ('SpecConCondition') {
+                    Students with
+                    <strong class="font-semibold text-black/90">Special Consideration Days</strong>
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.operatorLabel(condition.operator) }}
+                    </span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ condition.spec_con_days }}
+                    </span>
+                  }
+                  @case ('TutorialEnrolmentCondition') {
+                    Students
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.enrolmentPredicate(condition.operator) }}
+                    </span>
+                    <strong class="mx-1 font-semibold text-black/90">
+                      {{ editor.tutorialLabel(condition.tutorial_id) }}
+                    </strong>
+                  }
+                  @case ('TutorialStreamEnrolmentCondition') {
+                    Students
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.enrolmentPredicate(condition.operator) }}
+                    </span>
+                    <strong class="mx-1 font-semibold text-black/90">
+                      {{ editor.tutorialStreamLabel(condition.tutorial_stream_id) }}
+                    </strong>
+                  }
+                  @case ('CampusCondition') {
+                    Students
+                    <span class="mx-1 inline-block rounded bg-blue-50 p-2 leading-6 text-blue-800">
+                      {{ editor.enrolmentPredicate(condition.operator) }}
+                    </span>
+                    <span class="mx-1 inline-block rounded bg-red-50 p-2 leading-6 text-red-800">
+                      {{ editor.campusLabel(condition.campus_id) }}
+                    </span>
+                  }
+                  @default {
+                    {{ editor.operatorLabel(condition.operator) }}
+                    {{ editor.labelFor(condition) }}
+                  }
+                }
+              </div>
+            </div>
+            <div class="flex shrink-0 items-center">
+              <button mat-icon-button (click)="editor.editCondition(rule, condition)">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button mat-icon-button (click)="editor.deleteCondition(rule, condition)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        }
+      </mat-list-item>
+    }
+  </mat-list>
+
+  @if (editor.conditionFormOpen[rule.id] && !editor.editingConditionId[rule.id]) {
+    <div class="flex flex-wrap items-center gap-3">
+      <mat-form-field appearance="outline">
+        <mat-label>Condition</mat-label>
+        <mat-select
+          [(ngModel)]="editor.conditionFor(rule).type"
+          (selectionChange)="editor.onConditionTypeChange(rule)"
+        >
+          @for (type of editor.conditionTypes; track type) {
+            <mat-option [value]="type">
+              {{ editor.conditionTypeLabel(type) }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      @if (editor.conditionFor(rule).type === 'TaskDefinitionStatusCondition') {
+        <mat-form-field appearance="outline" class="min-w-[450px]">
+          <mat-label>Task</mat-label>
+          <mat-select [(ngModel)]="editor.conditionFor(rule).task_definition_id">
+            @for (taskDefinition of editor.taskDefinitions; track taskDefinition.id) {
+              <mat-option [value]="taskDefinition.id">
+                {{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+
+      <mat-form-field appearance="outline" class="min-w-[300px]">
+        <mat-label>Operator</mat-label>
+        <mat-select [(ngModel)]="editor.conditionFor(rule).operator">
+          @for (operator of editor.operatorsFor(editor.conditionFor(rule).type); track operator) {
+            <mat-option [value]="operator">
+              {{ editor.operatorLabel(operator) }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      @if (editor.conditionFor(rule).type === 'TaskStatusCountCondition') {
+        <mat-form-field appearance="outline" class="w-32">
+          <mat-label>Count</mat-label>
+          <input
+            matInput
+            min="0"
+            type="number"
+            [(ngModel)]="editor.conditionFor(rule).task_status_count"
+          />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Task grade</mat-label>
+          <mat-select [(ngModel)]="editor.conditionFor(rule).task_target_grade">
+            @for (grade of editor.targetGrades; track grade.value) {
+              <mat-option [value]="grade.value">
+                {{ grade.label }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+
+      @switch (editor.conditionFor(rule).type) {
+        @case ('TargetGradeCondition') {
+          <mat-form-field appearance="outline">
+            <mat-label>Target grade</mat-label>
+            <mat-select [(ngModel)]="editor.conditionFor(rule).target_grade">
+              @for (grade of editor.targetGrades; track grade.value) {
+                <mat-option [value]="grade.value">
+                  {{ grade.label }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        @case ('TaskDefinitionStatusCondition') {
+          <mat-form-field appearance="outline">
+            <mat-label>Statuses</mat-label>
+            <mat-select multiple [(ngModel)]="editor.conditionFor(rule).task_statuses">
+              @for (status of editor.taskStatuses; track status) {
+                <mat-option [value]="status">
+                  {{ editor.taskStatusLabel(status) }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        @case ('TaskStatusCountCondition') {
+          <mat-form-field appearance="outline" class="min-w-[320px]">
+            <mat-label>Statuses</mat-label>
+            <mat-select multiple [(ngModel)]="editor.conditionFor(rule).task_statuses">
+              @for (status of editor.taskStatuses; track status) {
+                <mat-option [value]="status">
+                  {{ editor.taskStatusLabel(status) }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        @case ('LoginStatusCondition') {
+          <mat-form-field appearance="outline">
+            <mat-label>Last sign in</mat-label>
+            <input
+              matInput
+              type="datetime-local"
+              [(ngModel)]="editor.conditionFor(rule).last_sign_in_at"
+            />
+          </mat-form-field>
+        }
+        @case ('SpecConCondition') {
+          <mat-form-field appearance="outline" class="w-32">
+            <mat-label>Days</mat-label>
+            <input
+              matInput
+              step="1"
+              type="number"
+              [(ngModel)]="editor.conditionFor(rule).spec_con_days"
+            />
+          </mat-form-field>
+        }
+
+        @case ('TutorialEnrolmentCondition') {
+          <mat-form-field appearance="outline" class="min-w-[550px]">
+            <mat-label>Tutorial</mat-label>
+            <mat-select [(ngModel)]="editor.conditionFor(rule).tutorial_id">
+              @for (tutorial of editor.tutorials; track tutorial.id) {
+                <mat-option [value]="tutorial.id">
+                  {{ tutorial.abbreviation }} {{ tutorial.description }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        @case ('TutorialStreamEnrolmentCondition') {
+          <mat-form-field appearance="outline" class="min-w-[350px]">
+            <mat-label>Tutorial stream</mat-label>
+            <mat-select [(ngModel)]="editor.conditionFor(rule).tutorial_stream_id">
+              @for (stream of editor.tutorialStreams; track stream.id) {
+                <mat-option [value]="stream.id">
+                  {{ stream.abbreviation }} {{ stream.name }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        @case ('CampusCondition') {
+          <mat-form-field appearance="outline">
+            <mat-label>Campus</mat-label>
+            <mat-select [(ngModel)]="editor.conditionFor(rule).campus_id">
+              @for (campus of editor.campuses; track campus.id) {
+                <mat-option [value]="campus.id">
+                  {{ campus.abbreviation }} {{ campus.name }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+      }
+
+      <button
+        class="mb-[22px]"
+        color="primary"
+        mat-flat-button
+        (click)="
+          editor.editingConditionId[rule.id]
+            ? editor.updateCondition(rule)
+            : editor.addCondition(rule)
+        "
+      >
+        <mat-icon>save</mat-icon>
+        {{ editor.editingConditionId[rule.id] ? 'Update' : 'Save' }}
+      </button>
+
+      <button class="mb-[22px]" mat-button (click)="editor.cancelCondition(rule)">Cancel</button>
+    </div>
+  } @else {
+    <div class="flex justify-center">
+      <button color="primary" mat-stroked-button (click)="editor.showConditionForm(rule)">
+        <mat-icon>add</mat-icon>
+        Add condition
+      </button>
+    </div>
+  }
+</div>
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/conditions/communication-conditions.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/conditions/communication-conditions.component.ts
new file mode 100644
index 0000000000..a4167c217a
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/conditions/communication-conditions.component.ts
@@ -0,0 +1,14 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommunicationRule} from 'src/app/api/models/doubtfire-model';
+import type {UnitCommunicationsEditorComponent} from '../unit-communications-editor.component';
+
+@Component({
+  selector: 'f-communication-conditions',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  templateUrl: './communication-conditions.component.html',
+})
+export class CommunicationConditionsComponent {
+  @Input({required: true}) editor: UnitCommunicationsEditorComponent;
+  @Input({required: true}) rule: CommunicationRule;
+}
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.html b/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.html
new file mode 100644
index 0000000000..0a631f8bec
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.html
@@ -0,0 +1,345 @@
+<div class="flex flex-col gap-4">
+  <div>
+    <p>Current unit week: {{ currentUnitWeek <= 0 ? 'Not started' : currentUnitWeek }}</p>
+  </div>
+  <div class="flex flex-wrap items-center gap-3">
+    <button color="primary" mat-flat-button (click)="addSet()">
+      <mat-icon>add</mat-icon>
+      Add set
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+
+  <mat-drawer-container class="min-h-[750px] border border-gray-300">
+    <mat-drawer class="w-[320px] border-r border-gray-300" mode="side" opened>
+      <!-- <div
+        class="w-full min-h-[50px] border-b border-gray-300 bg-gray-300 px-[20px] flex items-center"
+      >
+        Communication Sets & Rules
+      </div> -->
+
+      <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl">
+        <mat-tree-node *matTreeNodeDef="let node" class="p-0" matTreeNodePadding>
+          <div
+            class="min-h-[64px] w-full border-b border-gray-200 px-4"
+            [ngClass]="{'bg-gray-100': isSelectedRuleNode(node)}"
+          >
+            <div class="flex w-full items-center justify-between gap-3">
+              <button
+                class="min-h-[64px] w-full min-w-0 flex-1 justify-start px-0"
+                mat-button
+                (click)="selectRuleNode(node.set!, node.rule!)"
+              >
+                <div class="min-w-0 text-left">
+                  <div class="truncate font-medium">Rule: {{ node.rule?.name }}</div>
+                  <div class="text-black/30">
+                    {{ node.rule?.operator === 'and' ? 'All conditions' : 'Any condition' }}
+                  </div>
+                  <div class="text-black/70">{{ studentsTabLabel(node.rule!) }}</div>
+                </div>
+              </button>
+              <button
+                color="warn"
+                mat-icon-button
+                (click)="deleteRule(node.rule!); $event.stopPropagation()"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        </mat-tree-node>
+
+        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasTreeChild">
+          <div class="border-b border-gray-200">
+            <div
+              class="flex min-h-[56px] items-center gap-2 px-2"
+              [ngClass]="{'bg-[#e7e7ff]': isSelectedSetNode(node)}"
+            >
+              <button mat-icon-button (click)="toggleSetNode(node, $event)">
+                <mat-icon>
+                  {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+                </mat-icon>
+              </button>
+
+              <button
+                class="min-w-0 flex-1 justify-start px-2"
+                mat-button
+                (click)="selectSetNode(node.set!)"
+              >
+                <span class="truncate text-left">Set: {{ node.set?.name }}</span>
+              </button>
+            </div>
+
+            @if (treeControl.isExpanded(node)) {
+              <div>
+                <ng-container matTreeNodeOutlet></ng-container>
+
+                <!-- @if (selectedSetId === node.set?.id) {
+                  <div class="border-t border-gray-200 p-4">
+                    <button
+                      mat-flat-button
+                      color="primary"
+                      class="w-full"
+                      (click)="addRule()"
+                      [disabled]="!selectedSetId"
+                    >
+                      <mat-icon>add</mat-icon>
+                      Add rule
+                    </button>
+                  </div>
+                } -->
+              </div>
+            }
+          </div>
+        </mat-nested-tree-node>
+      </mat-tree>
+    </mat-drawer>
+
+    <mat-drawer-content>
+      @if (selectedSet(); as set) {
+        <div class="flex min-h-[48rem] flex-col">
+          <div class="flex items-center justify-between px-[20px]">
+            <div class="flex min-w-0 flex-1 items-center gap-2 py-5">
+              @if (editingSetNameId === set.id) {
+                <mat-form-field appearance="outline" class="w-full max-w-[450px]">
+                  <mat-label>Set name</mat-label>
+                  <input matInput [(ngModel)]="setNameDraft" />
+                </mat-form-field>
+                <button
+                  class="mb-[22px]"
+                  color="primary"
+                  mat-icon-button
+                  (click)="saveSetName(set)"
+                >
+                  <mat-icon>save</mat-icon>
+                </button>
+                <button class="mb-[22px]" mat-icon-button (click)="cancelEditSetName()">
+                  <mat-icon>close</mat-icon>
+                </button>
+              } @else {
+                <h3 class="mt-[16px] truncate">{{ set.name }}</h3>
+                <button class="scale-75 opacity-50" mat-icon-button (click)="beginEditSetName(set)">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                color="primary"
+                mat-flat-button
+                [disabled]="!selectedSetId"
+                (click)="addRule()"
+              >
+                <mat-icon>add</mat-icon>
+                Add rule
+              </button>
+              <button mat-stroked-button (click)="addSchedule(set)">
+                <mat-icon>schedule</mat-icon>
+                Add schedule
+              </button>
+              <button mat-raised-button (click)="confirmExecuteSet(set)">Execute Set</button>
+              <button color="warn" mat-icon-button (click)="deleteSet(set)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+          <mat-divider></mat-divider>
+
+          <div class="flex flex-col">
+            <f-communication-schedules [editor]="editorContext" [set]="set" />
+
+            @if (selectedRule(); as rule) {
+              <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
+                <div class="flex w-full items-center gap-2">
+                  @if (editingRuleNameId === rule.id) {
+                    <mat-form-field appearance="outline" class="w-full max-w-[450px]">
+                      <mat-label>Rule name</mat-label>
+                      <input matInput [(ngModel)]="ruleNameDraft" />
+                    </mat-form-field>
+                    <button
+                      class="mb-[22px]"
+                      color="primary"
+                      mat-icon-button
+                      (click)="saveRuleName(rule)"
+                    >
+                      <mat-icon>save</mat-icon>
+                    </button>
+                    <button class="mb-[22px]" mat-icon-button (click)="cancelEditRuleName()">
+                      <mat-icon>close</mat-icon>
+                    </button>
+                  } @else {
+                    <div class="flex items-center gap-2">
+                      <div class="font-medium">{{ rule.name }}</div>
+                      <button
+                        class="scale-75 opacity-50"
+                        mat-icon-button
+                        (click)="beginEditRuleName(rule)"
+                      >
+                        <mat-icon>edit</mat-icon>
+                      </button>
+                    </div>
+                  }
+                </div>
+
+                <div class="flex min-w-fit items-center gap-3">
+                  <button mat-raised-button (click)="confirmExecuteRule(rule)">Execute Rule</button>
+                </div>
+              </div>
+
+              <mat-tab-group
+                dynamicHeight
+                [selectedIndex]="previewTabIndex[rule.id] || 0"
+                (selectedTabChange)="onRuleTabChange(rule, $event.index)"
+              >
+                <mat-tab label="Conditions">
+                  <f-communication-conditions [editor]="editorContext" [rule]="rule" />
+                </mat-tab>
+
+                <mat-tab label="Actions">
+                  <f-communication-actions [editor]="editorContext" [rule]="rule" />
+                </mat-tab>
+
+                <mat-tab label="Post Execution">
+                  <div class="flex flex-col gap-4 p-6">
+                    <mat-checkbox class="mb-2" [(ngModel)]="rule.send_log_to_convenors">
+                      Send action log to convenors after execution
+                    </mat-checkbox>
+
+                    <div class="flex justify-start">
+                      <button color="primary" mat-flat-button (click)="updateRule(rule)">
+                        <mat-icon>save</mat-icon>
+                        Save post execution settings
+                      </button>
+                    </div>
+                  </div>
+                </mat-tab>
+
+                <mat-tab [label]="studentsTabLabel(rule)">
+                  <div class="flex flex-col gap-4 p-6">
+                    <div class="flex justify-end">
+                      <button
+                        color="primary"
+                        mat-stroked-button
+                        [disabled]="setPreviewLoading"
+                        (click)="refreshPreview(rule)"
+                      >
+                        <mat-icon>refresh</mat-icon>
+                        Refresh preview
+                      </button>
+                    </div>
+
+                    @if (setPreviewLoading || previewLoading[rule.id]) {
+                      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+                    } @else if (previewLoaded[rule.id]) {
+                      <div class="font-medium">
+                        Selected for {{ rule.name }} ({{ studentsFor(rule).length }})
+                      </div>
+
+                      @if (studentsFor(rule).length === 0) {
+                        <div class="text-black/70">No students currently match this rule.</div>
+                      } @else {
+                        <table class="w-full" mat-table [dataSource]="studentsFor(rule)">
+                          <ng-container matColumnDef="preferred_name">
+                            <th *matHeaderCellDef mat-header-cell>Preferred Name</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.preferred_name || '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="first_name">
+                            <th *matHeaderCellDef mat-header-cell>First Name</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.first_name || '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="last_name">
+                            <th *matHeaderCellDef mat-header-cell>Last Name</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.last_name || '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="full_name">
+                            <th *matHeaderCellDef mat-header-cell>Full Name</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.full_name || '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="username">
+                            <th *matHeaderCellDef mat-header-cell>Username</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.username || '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="student_id">
+                            <th *matHeaderCellDef mat-header-cell>Student ID</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.student_id || '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="campus">
+                            <th *matHeaderCellDef mat-header-cell>Campus</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.campus || '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="target_grade">
+                            <th *matHeaderCellDef mat-header-cell>Target Grade</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{
+                                student.target_grade ? targetGradeName(student.target_grade) : '-'
+                              }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="spec_con_days">
+                            <th *matHeaderCellDef mat-header-cell>Spec Con Days</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{ student.spec_con_days ?? '-' }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="last_sign_in_at">
+                            <th *matHeaderCellDef mat-header-cell>Last Sign In</th>
+                            <td *matCellDef="let student" mat-cell>
+                              {{
+                                student.last_sign_in_at ? dateLabel(student.last_sign_in_at) : '-'
+                              }}
+                            </td>
+                          </ng-container>
+
+                          <tr *matHeaderRowDef="previewStudentColumns" mat-header-row></tr>
+                          <tr *matRowDef="let row; columns: previewStudentColumns" mat-row></tr>
+                        </table>
+                      }
+                    } @else {
+                      <div class="text-black/70">
+                        Preview data will load when you select a communication set.
+                      </div>
+                    }
+                  </div>
+                </mat-tab>
+              </mat-tab-group>
+            } @else {
+              <div class="mt-5 flex h-full items-center justify-center text-black/60">
+                Select a communication rule to edit its conditions, actions, and preview.
+              </div>
+            }
+          </div>
+        </div>
+      } @else {
+        <div class="flex h-[48rem] items-center justify-center text-black/60">
+          Create or select a communication set to begin.
+        </div>
+      }
+    </mat-drawer-content>
+  </mat-drawer-container>
+</div>
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.scss b/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.ts b/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.ts
new file mode 100644
index 0000000000..daa444376a
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-communications-editor/unit-communications-editor.component.ts
@@ -0,0 +1,1394 @@
+import {NestedTreeControl} from '@angular/cdk/tree';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {MatTreeNestedDataSource} from '@angular/material/tree';
+import {Subscription} from 'rxjs';
+import {
+  Campus,
+  CampusService,
+  CommunicationAction,
+  CommunicationActionService,
+  CommunicationCondition,
+  CommunicationConditionService,
+  CommunicationRule,
+  CommunicationRulePreviewAllocation,
+  CommunicationRulePreviewResponse,
+  CommunicationRulePreviewStudent,
+  CommunicationRuleService,
+  CommunicationSet,
+  CommunicationSetPreviewResponse,
+  CommunicationSetSchedule,
+  CommunicationSetService,
+  ProjectService,
+  TaskDefinition,
+  Tutorial,
+  TutorialStream,
+  Unit,
+} from 'src/app/api/models/doubtfire-model';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {
+  CommunicationScheduleModalComponent,
+  CommunicationScheduleModalData,
+} from './communication-schedule-modal/communication-schedule-modal.component';
+
+interface CommunicationTreeNode {
+  type: 'set' | 'rule';
+  id: number;
+  label: string;
+  set?: CommunicationSet;
+  rule?: CommunicationRule;
+  children?: CommunicationTreeNode[];
+}
+
+@Component({
+  selector: 'f-unit-communications-editor',
+  standalone: false,
+  templateUrl: './unit-communications-editor.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  styleUrl: './unit-communications-editor.component.scss',
+})
+export class UnitCommunicationsEditorComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() unit: Unit;
+
+  readonly editorContext = this;
+  sets: CommunicationSet[] = [];
+  selectedSetId?: number;
+  selectedRuleId?: number;
+  rules: CommunicationRule[] = [];
+  campuses: Campus[] = [];
+  taskDefinitions: readonly TaskDefinition[] = [];
+  tutorials: readonly Tutorial[] = [];
+  tutorialStreams: readonly TutorialStream[] = [];
+  loading = false;
+  setPreviewLoading = false;
+  readonly previewStudentColumns = [
+    'preferred_name',
+    'first_name',
+    'last_name',
+    'full_name',
+    'username',
+    'student_id',
+    'campus',
+    'target_grade',
+    'spec_con_days',
+    'last_sign_in_at',
+  ];
+
+  readonly logicalOperators = ['and', 'or'];
+  readonly logicalOperatorOptions = [
+    {value: 'and', label: 'All the following conditions'},
+    {value: 'or', label: 'Any of the following conditions'},
+  ] as const;
+  readonly conditionTypes = [
+    'TargetGradeCondition',
+    'TaskDefinitionStatusCondition',
+    'TaskStatusCountCondition',
+    'LoginStatusCondition',
+    'SpecConCondition',
+    'TutorialEnrolmentCondition',
+    'TutorialStreamEnrolmentCondition',
+    'CampusCondition',
+  ];
+  readonly conditionTypeLabels: Record<string, string> = {
+    TargetGradeCondition: 'Target Grade',
+    TaskDefinitionStatusCondition: 'Task Status',
+    TaskStatusCountCondition: 'Task Status Count',
+    LoginStatusCondition: 'Login Status',
+    SpecConCondition: 'Special Consideration Days',
+    TutorialEnrolmentCondition: 'Tutorial Enrolment',
+    TutorialStreamEnrolmentCondition: 'Tutorial Stream Enrolment',
+    CampusCondition: 'Campus',
+  };
+  readonly actionTypes = [
+    'EmailStudentAction',
+    'EmailStaffAction',
+    'ChangeTargetGradeAction',
+    'TaskCommentAction',
+  ];
+  readonly actionTypeLabels: Record<string, string> = {
+    EmailStudentAction: 'Send email to student',
+    EmailStaffAction: 'Send email to staff',
+    ChangeTargetGradeAction: 'Change Target Grade',
+    TaskCommentAction: 'Task Comment',
+  };
+  readonly gradeOperators = [
+    'greater_than',
+    'greater_than_or_equal_to',
+    'less_than',
+    'less_than_or_equal_to',
+    'equal_to',
+    'not_equal_to',
+  ];
+  readonly equalityOperators = ['equal_to', 'not_equal_to'];
+  readonly dateOperators = ['before', 'after'];
+  readonly enrolmentOperators = ['enrolled_in', 'not_enrolled_in'];
+  readonly operatorLabels: Record<string, string> = {
+    greater_than: 'Greater Than',
+    greater_than_or_equal_to: 'Greater Than Or Equal To',
+    less_than: 'Less Than',
+    less_than_or_equal_to: 'Less Than Or Equal To',
+    equal_to: 'Equal To',
+    not_equal_to: 'Not Equal To',
+    before: 'Before',
+    after: 'After',
+    enrolled_in: 'Enrolled In',
+    not_enrolled_in: 'Not Enrolled In',
+  };
+  get targetGrades() {
+    return this.unit.gradeDefinitions
+      .filter((definition) => definition.value >= 0)
+      .map((definition) => ({value: definition.value, label: definition.abbreviation}));
+  }
+  readonly emailVariables = [
+    {token: '{{student.first_name}}', label: 'Student First Name'},
+    {token: '{{student.last_name}}', label: 'Student Last Name'},
+    {token: '{{student.preferred_name}}', label: 'Student Preferred Name'},
+    {token: '{{student.full_name}}', label: 'Student Full Name'},
+    {token: '{{student.username}}', label: 'Student Username'},
+    {token: '{{student.student_id}}', label: 'Student ID'},
+    {token: '{{affected_students_count}}', label: 'Affected Students Count'},
+    {token: '{{unit.code}}', label: 'Unit Code'},
+    {token: '{{unit.name}}', label: 'Unit Name'},
+    {token: '{{rule.name}}', label: 'Rule Name'},
+    {token: '{{target_grade}}', label: 'Target Grade'},
+    // {token: '{{conditions_summary}}', label: 'Conditions Summary'},
+    // {token: '{{actions_summary}}', label: 'Actions Summary'},
+  ];
+  readonly taskStatuses = [
+    'not_started',
+    'complete',
+    'need_help',
+    'working_on_it',
+    'fix_and_resubmit',
+    'feedback_exceeded',
+    'redo',
+    'discuss',
+    'ready_for_feedback',
+    'demonstrate',
+    'fail',
+    'time_exceeded',
+    'assess_in_portfolio',
+    'attention_required',
+    'rediscuss',
+  ];
+
+  newConditions: Record<number, Partial<CommunicationCondition>> = {};
+  conditionFormOpen: Record<number, boolean> = {};
+  editingConditionId: Record<number, number | undefined> = {};
+  newActions: Record<number, Partial<CommunicationAction>> = {};
+  actionFormOpen: Record<number, boolean> = {};
+  editingActionId: Record<number, number | undefined> = {};
+  previewTabIndex: Record<number, number> = {};
+  previewLoading: Record<number, boolean> = {};
+  previewLoaded: Record<number, boolean> = {};
+  previewStudents: Record<number, CommunicationRulePreviewStudent[]> = {};
+  previewAllocations: Record<number, CommunicationRulePreviewAllocation[]> = {};
+  editingSetNameId?: number;
+  editingRuleNameId?: number;
+  setNameDraft = '';
+  ruleNameDraft = '';
+  readonly treeControl: NestedTreeControl<CommunicationTreeNode> = new NestedTreeControl(
+    (node) => node.children,
+  );
+  readonly treeDataSource: MatTreeNestedDataSource<CommunicationTreeNode> =
+    new MatTreeNestedDataSource();
+  private expandedSetIds: Set<number> = new Set();
+
+  private subscriptions: Subscription[] = [];
+
+  get currentUnitWeek(): number | null {
+    return this.unit?.currentUnitWeek ?? null;
+  }
+
+  constructor(
+    private ruleService: CommunicationRuleService,
+    private conditionService: CommunicationConditionService,
+    private actionService: CommunicationActionService,
+    private setService: CommunicationSetService,
+    private projectService: ProjectService,
+    private dialog: MatDialog,
+    private campusService: CampusService,
+    private alerts: AlertService,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
+    private confirmationModalService: ConfirmationModalService,
+  ) {}
+
+  ngOnInit(): void {
+    this.campusService.query().subscribe((campuses) => {
+      this.campuses = campuses;
+    });
+    this.refreshUnitLookups();
+    this.loadSets();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.unit && this.unit) {
+      this.refreshUnitLookups();
+      this.loadSets();
+    }
+  }
+
+  addSet(): void {
+    if (!this.unit) {
+      return;
+    }
+
+    const newSet = {
+      name: this.defaultSetName(),
+      active: true,
+    } as Pick<CommunicationSet, 'name'> & Partial<Pick<CommunicationSet, 'active'>>;
+
+    this.setService.createForUnit(this.unit.id, newSet).subscribe({
+      next: (set) => {
+        this.sets.push(set);
+        this.expandedSetIds.add(set.id);
+        this.selectedSetId = set.id;
+        this.selectSet();
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  deleteSet(set: CommunicationSet): void {
+    this.setService.deleteForUnit(this.unit.id, set.id).subscribe({
+      next: () => {
+        this.sets = this.sets.filter((item) => item.id !== set.id);
+        this.expandedSetIds.delete(set.id);
+        if (this.selectedSetId === set.id) {
+          this.selectedSetId = undefined;
+        }
+        this.selectSet();
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  beginEditSetName(set: CommunicationSet): void {
+    this.editingSetNameId = set.id;
+    this.setNameDraft = set.name;
+  }
+
+  cancelEditSetName(): void {
+    this.editingSetNameId = undefined;
+    this.setNameDraft = '';
+  }
+
+  saveSetName(set: CommunicationSet): void {
+    const name = this.setNameDraft.trim();
+    if (!name) {
+      return;
+    }
+
+    this.setService.updateForUnit(this.unit.id, set.id, {name}).subscribe({
+      next: (updated) => {
+        set.name = updated.name;
+        const matchingSet = this.sets.find((item) => item.id === set.id);
+        if (matchingSet) {
+          matchingSet.name = updated.name;
+        }
+        this.cancelEditSetName();
+        this.rebuildTree();
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  confirmExecuteSet(set: CommunicationSet): void {
+    this.confirmationModalService.show(
+      'Execute Set?',
+      'This will execute every rule in this set, in sequence. Once a student is matched by an earlier rule, they are removed from consideration for the remaining rules, so each student can only be picked up once during the set run.',
+      () => this.executeSet(set),
+      undefined,
+      'Execute Set',
+    );
+  }
+
+  executeSet(set: CommunicationSet): void {
+    this.setService.executeForUnit(this.unit.id, set.id).subscribe({
+      next: (job) => this.showExecutionProgress(job, `Executing ${set.name}`),
+      error: (error) => this.showError(error),
+    });
+  }
+
+  addSchedule(set: CommunicationSet): void {
+    this.openScheduleModal(set);
+  }
+
+  editSchedule(set: CommunicationSet, schedule: CommunicationSetSchedule): void {
+    this.openScheduleModal(set, schedule);
+  }
+
+  deleteSchedule(set: CommunicationSet, schedule: CommunicationSetSchedule): void {
+    const updatedSchedules = (set.schedules || []).filter(
+      (item) => (item.id || item.client_key) !== (schedule.id || schedule.client_key),
+    );
+    this.persistSchedules(set, updatedSchedules, 'Schedule removed');
+  }
+
+  scheduleTrackId(schedule: CommunicationSetSchedule): string | number {
+    return (
+      schedule.id ||
+      schedule.client_key ||
+      `${schedule.name || 'schedule'}-${schedule.anchor_week}-${schedule.anchor_day}`
+    );
+  }
+
+  scheduleSummary(schedule: CommunicationSetSchedule): string {
+    const cadence = this.scheduleCadence(schedule);
+    const ending = this.scheduleEnding(schedule);
+    return [cadence, ending].filter(Boolean).join(' | ');
+  }
+
+  scheduleAnchorSummary(schedule: CommunicationSetSchedule): string {
+    return `Week ${schedule.anchor_week || 1} on ${schedule.anchor_day || 'Monday'}`;
+  }
+
+  scheduleTimeSummary(schedule: CommunicationSetSchedule): string {
+    return `${this.formatTime(schedule.hour, schedule.minute)} ${schedule.timezone || 'UTC'}`;
+  }
+
+  scheduleNextRunSummary(schedule: CommunicationSetSchedule): string {
+    return schedule.next_run_at ? this.dateLabel(schedule.next_run_at) : 'Not scheduled';
+  }
+
+  scheduleLastRunSummary(schedule: CommunicationSetSchedule): string {
+    return schedule.last_run_at ? this.dateLabel(schedule.last_run_at) : 'Not yet run';
+  }
+
+  iceCubePreview(schedule: CommunicationSetSchedule): string {
+    return JSON.stringify(schedule.ice_cube_schedule || {}, null, 2);
+  }
+
+  selectSet(): void {
+    const set = this.selectedSet();
+    if (set) {
+      this.activateSet(set);
+    } else {
+      this.rules = [];
+      this.selectedRuleId = undefined;
+      this.rebuildTree();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  addRule(): void {
+    if (!this.unit) {
+      return;
+    }
+    const set = this.selectedSet();
+    if (!set) {
+      return;
+    }
+
+    const newRule = {
+      name: this.defaultRuleName(),
+      operator: 'and',
+    } as Pick<CommunicationRule, 'name' | 'operator'>;
+
+    this.ruleService.createForSet(this.unit.id, set.id, newRule).subscribe({
+      next: (rule) => {
+        this.rules.push(rule);
+        set.rules = this.rules;
+        this.selectedRuleId = rule.id;
+        this.expandedSetIds.add(set.id);
+        this.loadPreviewForSet(set);
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  deleteRule(rule: CommunicationRule): void {
+    this.ruleService.deleteForUnit(this.unit.id, rule.id).subscribe({
+      next: () => {
+        this.rules = this.rules.filter((item) => item.id !== rule.id);
+        const set = this.selectedSet();
+        if (set) {
+          set.rules = this.rules;
+          this.selectedRuleId = this.rules[0]?.id;
+          this.loadPreviewForSet(set);
+        }
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  updateRuleOperator(rule: CommunicationRule): void {
+    this.ruleService.updateForUnit(this.unit.id, rule.id, {operator: rule.operator}).subscribe({
+      next: (updated) => {
+        rule.operator = updated.operator;
+        this.refreshPreview(rule);
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  updateRule(rule: CommunicationRule): void {
+    this.ruleService
+      .updateForUnit(this.unit.id, rule.id, {
+        name: rule.name,
+        operator: rule.operator,
+        send_log_to_convenors: rule.send_log_to_convenors,
+      })
+      .subscribe({
+        next: (updated) => {
+          rule.name = updated.name;
+          rule.operator = updated.operator;
+          rule.send_log_to_convenors = updated.send_log_to_convenors;
+          const set = this.selectedSet();
+          if (set) {
+            set.rules = this.rules;
+          }
+          this.refreshPreview(rule);
+        },
+        error: (error) => this.showError(error),
+      });
+  }
+
+  beginEditRuleName(rule: CommunicationRule): void {
+    this.editingRuleNameId = rule.id;
+    this.ruleNameDraft = rule.name;
+  }
+
+  cancelEditRuleName(): void {
+    this.editingRuleNameId = undefined;
+    this.ruleNameDraft = '';
+  }
+
+  saveRuleName(rule: CommunicationRule): void {
+    const name = this.ruleNameDraft.trim();
+    if (!name) {
+      return;
+    }
+
+    this.ruleService
+      .updateForUnit(this.unit.id, rule.id, {
+        name,
+        operator: rule.operator,
+        send_log_to_convenors: rule.send_log_to_convenors,
+      })
+      .subscribe({
+        next: (updated) => {
+          rule.name = updated.name;
+          const set = this.selectedSet();
+          if (set) {
+            set.rules = this.rules;
+          }
+          this.cancelEditRuleName();
+          this.rebuildTree();
+        },
+        error: (error) => this.showError(error),
+      });
+  }
+
+  confirmExecuteRule(rule: CommunicationRule): void {
+    this.confirmationModalService.show(
+      'Execute Rule?',
+      'This will execute only this rule. However, any earlier rules in the set are still taken into account first, so students who would already have been matched earlier are excluded before this rule is applied.',
+      () => this.executeRule(rule),
+      undefined,
+      'Execute Rule',
+    );
+  }
+
+  executeRule(rule: CommunicationRule): void {
+    this.ruleService.executeForUnit(this.unit.id, rule.id).subscribe({
+      next: (job) => this.showExecutionProgress(job, `Executing ${rule.name}`),
+      error: (error) => this.showError(error),
+    });
+  }
+
+  previewRule(rule: CommunicationRule, activateStudentsTab = true): void {
+    if (activateStudentsTab) {
+      this.previewTabIndex[rule.id] = 2;
+    }
+  }
+
+  addCondition(rule: CommunicationRule): void {
+    const condition = this.newConditions[rule.id] || this.blankCondition();
+    this.conditionService.create(this.unit.id, rule.id, condition).subscribe({
+      next: (created) => {
+        rule.conditions ||= [];
+        rule.conditions.push(created);
+        this.newConditions[rule.id] = this.blankCondition();
+        this.conditionFormOpen[rule.id] = false;
+        this.editingConditionId[rule.id] = undefined;
+        this.refreshPreview(rule);
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  updateCondition(rule: CommunicationRule): void {
+    const conditionId = this.editingConditionId[rule.id];
+    if (!conditionId) {
+      return;
+    }
+
+    const condition = this.newConditions[rule.id] || this.blankCondition();
+    this.conditionService.update(this.unit.id, rule.id, conditionId, condition).subscribe({
+      next: (updated) => {
+        rule.conditions = rule.conditions.map((item) => (item.id === updated.id ? updated : item));
+        this.newConditions[rule.id] = this.blankCondition();
+        this.conditionFormOpen[rule.id] = false;
+        this.editingConditionId[rule.id] = undefined;
+        this.refreshPreview(rule);
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  showConditionForm(rule: CommunicationRule): void {
+    this.newConditions[rule.id] = this.blankCondition();
+    this.conditionFormOpen[rule.id] = true;
+    this.editingConditionId[rule.id] = undefined;
+  }
+
+  cancelCondition(rule: CommunicationRule): void {
+    this.newConditions[rule.id] = this.blankCondition();
+    this.conditionFormOpen[rule.id] = false;
+    this.editingConditionId[rule.id] = undefined;
+  }
+
+  editCondition(rule: CommunicationRule, condition: CommunicationCondition): void {
+    this.newConditions[rule.id] = {
+      ...condition,
+      task_statuses: condition.task_statuses ? [...condition.task_statuses] : [],
+    };
+    this.conditionFormOpen[rule.id] = true;
+    this.editingConditionId[rule.id] = condition.id;
+  }
+
+  deleteCondition(rule: CommunicationRule, condition: CommunicationCondition): void {
+    this.conditionService.delete(this.unit.id, rule.id, condition.id).subscribe({
+      next: () => {
+        rule.conditions = rule.conditions.filter((item) => item.id !== condition.id);
+        this.refreshPreview(rule);
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  addAction(rule: CommunicationRule): void {
+    const action = this.newActions[rule.id] || this.blankAction();
+    this.actionService.create(this.unit.id, rule.id, action).subscribe({
+      next: (created) => {
+        rule.actions ||= [];
+        rule.actions.push(created);
+        this.newActions[rule.id] = this.blankAction();
+        this.actionFormOpen[rule.id] = false;
+        this.editingActionId[rule.id] = undefined;
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  updateAction(rule: CommunicationRule): void {
+    const actionId = this.editingActionId[rule.id];
+    if (!actionId) {
+      return;
+    }
+
+    const action = this.newActions[rule.id] || this.blankAction();
+    this.actionService.update(this.unit.id, rule.id, actionId, action).subscribe({
+      next: (updated) => {
+        rule.actions = rule.actions.map((item) => (item.id === updated.id ? updated : item));
+        this.newActions[rule.id] = this.blankAction();
+        this.actionFormOpen[rule.id] = false;
+        this.editingActionId[rule.id] = undefined;
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  showActionForm(rule: CommunicationRule, _mode: 'standard' | 'post_execution' = 'standard'): void {
+    this.newActions[rule.id] = this.blankAction();
+    this.actionFormOpen[rule.id] = true;
+    this.editingActionId[rule.id] = undefined;
+  }
+
+  cancelAction(rule: CommunicationRule): void {
+    this.newActions[rule.id] = this.blankAction();
+    this.actionFormOpen[rule.id] = false;
+    this.editingActionId[rule.id] = undefined;
+  }
+
+  editAction(rule: CommunicationRule, action: CommunicationAction): void {
+    this.newActions[rule.id] = {...action};
+    this.actionFormOpen[rule.id] = true;
+    this.editingActionId[rule.id] = action.id;
+  }
+
+  deleteAction(rule: CommunicationRule, action: CommunicationAction): void {
+    this.actionService.delete(this.unit.id, rule.id, action.id).subscribe({
+      next: () => {
+        rule.actions = rule.actions.filter((item) => item.id !== action.id);
+      },
+      error: (error) => this.showError(error),
+    });
+  }
+
+  conditionFor(rule: CommunicationRule): Partial<CommunicationCondition> {
+    this.newConditions[rule.id] ||= this.blankCondition();
+    return this.newConditions[rule.id];
+  }
+
+  actionFor(rule: CommunicationRule): Partial<CommunicationAction> {
+    this.newActions[rule.id] ||= this.blankAction();
+    return this.newActions[rule.id];
+  }
+
+  selectRule(rule: CommunicationRule): void {
+    this.selectedRuleId = rule.id;
+  }
+
+  hasTreeChild = (_: number, node: CommunicationTreeNode): boolean => node.type === 'set';
+
+  isSelectedSetNode(node: CommunicationTreeNode): boolean {
+    return node.type === 'set' && node.id === this.selectedSetId;
+  }
+
+  isSelectedRuleNode(node: CommunicationTreeNode): boolean {
+    return node.type === 'rule' && node.id === this.selectedRuleId;
+  }
+
+  toggleSetNode(node: CommunicationTreeNode, event?: Event): void {
+    event?.stopPropagation();
+    if (!node.set) {
+      return;
+    }
+
+    if (this.treeControl.isExpanded(node)) {
+      this.treeControl.collapse(node);
+      this.expandedSetIds.delete(node.set.id);
+    } else {
+      this.treeControl.expand(node);
+      this.expandedSetIds.add(node.set.id);
+    }
+  }
+
+  selectSetNode(set: CommunicationSet): void {
+    this.selectedSetId = set.id;
+    this.expandedSetIds.add(set.id);
+    this.activateSet(set);
+  }
+
+  selectRuleNode(set: CommunicationSet, rule: CommunicationRule): void {
+    const setChanged = this.selectedSetId !== set.id;
+    this.selectedSetId = set.id;
+    this.expandedSetIds.add(set.id);
+
+    if (setChanged) {
+      this.activateSet(set, rule.id);
+      return;
+    }
+
+    this.selectedRuleId = rule.id;
+  }
+
+  selectedRule(): CommunicationRule | undefined {
+    return this.rules.find((rule) => rule.id === this.selectedRuleId);
+  }
+
+  onRuleTabChange(rule: CommunicationRule, index: number): void {
+    this.previewTabIndex[rule.id] = index;
+  }
+
+  studentsFor(rule: CommunicationRule): CommunicationRulePreviewStudent[] {
+    return this.previewStudents[rule.id] || [];
+  }
+
+  previewAllocationsFor(rule: CommunicationRule): CommunicationRulePreviewAllocation[] {
+    return this.previewAllocations[rule.id] || [];
+  }
+
+  isTargetPreviewAllocation(
+    rule: CommunicationRule,
+    allocation: CommunicationRulePreviewAllocation,
+  ): boolean {
+    return allocation.rule_id === rule.id;
+  }
+
+  studentsTabLabel(rule: CommunicationRule): string {
+    const matchedCount = this.previewLoaded[rule.id] ? this.studentsFor(rule).length : 0;
+    const totalStudents = this.availableStudentsForRule(rule);
+
+    return `Students (${matchedCount}/${totalStudents})`;
+  }
+
+  operatorsFor(conditionType: string): string[] {
+    switch (conditionType) {
+      case 'TargetGradeCondition':
+      case 'TaskStatusCountCondition':
+      case 'SpecConCondition':
+        return this.gradeOperators;
+      case 'TaskDefinitionStatusCondition':
+        return this.equalityOperators;
+      case 'LoginStatusCondition':
+        return this.dateOperators;
+      default:
+        return this.enrolmentOperators;
+    }
+  }
+
+  labelFor(record: CommunicationCondition | CommunicationAction): string {
+    const hiddenKeys = this.hiddenKeysForRecord(record);
+
+    return Object.entries(record)
+      .filter(
+        ([key, value]) =>
+          !hiddenKeys.includes(key) && value !== undefined && value !== null && value !== '',
+      )
+      .map(([key, value]) => `${this.prettyKey(key)}: ${this.prettyValue(key, value)}`)
+      .join(', ');
+  }
+
+  conditionTypeLabel(type: string): string {
+    return this.conditionTypeLabels[type] || type;
+  }
+
+  operatorLabel(operator: string): string {
+    return this.operatorLabels[operator] || operator;
+  }
+
+  actionTypeLabel(type: string): string {
+    return this.actionTypeLabels[type] || type;
+  }
+
+  actionSummary(action: CommunicationAction): string {
+    switch (action.type) {
+      case 'ChangeTargetGradeAction':
+        return `Change student's target grade to ${this.targetGradeName(action.target_grade)}`;
+      case 'EmailStudentAction':
+        return 'Send email to student';
+      case 'EmailStaffAction':
+        return `Send email to ${this.staffAudienceLabel(action)}`;
+      case 'TaskCommentAction':
+        return `Add comment to ${this.taskDefinitionLabel(action.task_definition_id)}`;
+      default:
+        return this.actionTypeLabel(action.type);
+    }
+  }
+
+  targetGradeName(targetGrade: number | undefined): string {
+    if (targetGrade === undefined || targetGrade === null) {
+      return '';
+    }
+
+    return this.unit.gradeLabel(targetGrade) || `${targetGrade}`;
+  }
+
+  taskDefinitionLabel(taskDefinitionId: number | undefined): string {
+    if (taskDefinitionId === undefined || taskDefinitionId === null) {
+      return 'Task';
+    }
+
+    const taskDefinition = this.taskDefinitions.find((task) => task.id === taskDefinitionId);
+
+    if (!taskDefinition) {
+      return `Task ${taskDefinitionId}`;
+    }
+
+    return `Task ${taskDefinition.abbreviation} ${taskDefinition.name}`;
+  }
+
+  taskStatusLabel(taskStatus: string): string {
+    return this.titleize(taskStatus);
+  }
+
+  taskStatusesLabel(taskStatuses: string[] = []): string {
+    return taskStatuses.map((status) => this.taskStatusLabel(status)).join(', ');
+  }
+
+  staffAudienceLabel(action: Partial<CommunicationAction>): string {
+    const audiences: string[] = [];
+    if (action.email_tutors) {
+      audiences.push('tutors');
+    }
+    if (action.email_convenors) {
+      audiences.push('convenors');
+    }
+    return audiences.join(' and ') || 'staff';
+  }
+
+  insertActionVariable(rule: CommunicationRule, field: 'subject' | 'body', token: string): void {
+    const action = this.actionFor(rule);
+    const currentValue = action[field] ?? '';
+    const separator =
+      currentValue && !currentValue.endsWith(' ') && !currentValue.endsWith('\n') ? ' ' : '';
+    action[field] = `${currentValue}${separator}${token}`;
+  }
+
+  renderTemplatePreview(value: string | undefined, rule: CommunicationRule): string {
+    if (!value) {
+      return '';
+    }
+
+    const escaped = this.escapeHtml(value);
+    const rendered = escaped.replace(/\{\{[\w.]+\}\}/g, (token) => {
+      const replacement = this.resolveTemplateVariable(token, rule) || token;
+      return `<span class="rounded bg-blue-50 px-1 text-blue-800">${this.escapeHtml(replacement)}</span>`;
+    });
+
+    return rendered.replace(/\n/g, '<br />');
+  }
+
+  refreshPreview(_rule: CommunicationRule): void {
+    const set = this.selectedSet();
+    if (set) {
+      this.loadPreviewForSet(set);
+    }
+  }
+
+  taskStatusPredicate(operator: string): string {
+    return operator === 'not_equal_to' ? 'Not In' : 'In';
+  }
+
+  tutorialLabel(tutorialId: number): string {
+    const tutorial = this.tutorials.find((item) => item.id === tutorialId);
+    return tutorial ? `${tutorial.abbreviation} ${tutorial.description}` : `Tutorial ${tutorialId}`;
+  }
+
+  tutorialStreamLabel(tutorialStreamId: number): string {
+    const tutorialStream = this.tutorialStreams.find((item) => item.id === tutorialStreamId);
+    return tutorialStream
+      ? `${tutorialStream.abbreviation} ${tutorialStream.name}`
+      : `Tutorial Stream ${tutorialStreamId}`;
+  }
+
+  campusLabel(campusId: number): string {
+    const campus = this.campuses.find((item) => item.id === campusId);
+    return campus ? campus.name : `Campus ${campusId}`;
+  }
+
+  enrolmentPredicate(operator: string): string {
+    return operator === 'not_enrolled_in' ? 'Not Enrolled In' : 'Enrolled In';
+  }
+
+  dateLabel(value: string): string {
+    return value ? new Date(value).toLocaleString() : '';
+  }
+
+  onConditionTypeChange(rule: CommunicationRule): void {
+    const current = this.conditionFor(rule);
+    this.newConditions[rule.id] = {
+      type: current.type,
+      operator: this.operatorsFor(current.type)[0],
+    };
+
+    if (current.type === 'TaskDefinitionStatusCondition') {
+      this.newConditions[rule.id].task_statuses = [];
+    }
+
+    if (current.type === 'TaskStatusCountCondition') {
+      this.newConditions[rule.id].task_statuses = [];
+      this.newConditions[rule.id].task_status_count = 2;
+      this.newConditions[rule.id].task_target_grade = 1;
+    }
+
+    if (current.type === 'SpecConCondition') {
+      this.newConditions[rule.id].spec_con_days = 0;
+    }
+  }
+
+  onActionTypeChange(rule: CommunicationRule): void {
+    const current = this.actionFor(rule);
+    this.newActions[rule.id] = {
+      type: current.type || 'EmailStudentAction',
+      email_tutors: false,
+      email_convenors: false,
+    };
+
+    if (current.type === 'TaskCommentAction') {
+      this.newActions[rule.id].body = '';
+      this.newActions[rule.id].task_definition_id = this.taskDefinitions[0]?.id;
+    }
+  }
+
+  private loadSets(): void {
+    if (!this.unit) {
+      return;
+    }
+
+    this.loading = true;
+    this.setService.getForUnit(this.unit.id).subscribe({
+      next: (sets) => {
+        this.sets = sets;
+        if (this.selectedSetId) {
+          this.expandedSetIds.add(this.selectedSetId);
+        }
+        this.rebuildTree();
+        this.selectSet();
+        this.loading = false;
+      },
+      error: (error) => {
+        this.loading = false;
+        this.showError(error);
+      },
+    });
+  }
+
+  private refreshUnitLookups(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+    this.subscriptions = [];
+
+    if (!this.unit) {
+      return;
+    }
+
+    this.taskDefinitions = this.unit.taskDefinitionCache.currentValues;
+    this.tutorials = this.unit.tutorials;
+    this.tutorialStreams = this.unit.tutorialStreams;
+    this.subscriptions.push(
+      this.unit.taskDefinitionCache.values.subscribe((taskDefinitions) => {
+        this.taskDefinitions = taskDefinitions;
+      }),
+    );
+    this.subscriptions.push(
+      // TODO: use spinner until students are loaded
+      this.projectService.loadStudents(this.unit, false, true).subscribe({
+        error: (error) => this.showError(error),
+      }),
+    );
+  }
+
+  private defaultRuleName(): string {
+    return `Rule ${this.rules.length + 1}`;
+  }
+
+  private defaultSetName(): string {
+    return `Set ${this.sets.length + 1}`;
+  }
+
+  private defaultScheduleName(set: CommunicationSet): string {
+    return `Schedule ${(set.schedules?.length || 0) + 1}`;
+  }
+
+  private activateSet(set: CommunicationSet, selectedRuleId?: number): void {
+    this.rules = set.rules ?? [];
+    this.selectedRuleId = selectedRuleId ?? this.rules[0]?.id;
+    this.loadPreviewForSet(set);
+  }
+
+  selectedSet(): CommunicationSet | undefined {
+    return this.sets.find((set) => set.id === this.selectedSetId);
+  }
+
+  private blankCondition(): Partial<CommunicationCondition> {
+    return {
+      type: 'TargetGradeCondition',
+      operator: 'greater_than_or_equal_to',
+    };
+  }
+
+  private blankAction(): Partial<CommunicationAction> {
+    return {
+      type: 'EmailStudentAction',
+      email_tutors: false,
+      email_convenors: false,
+    };
+  }
+
+  private blankSchedule(set: CommunicationSet): CommunicationSetSchedule {
+    return new CommunicationSetSchedule({
+      client_key: this.newScheduleClientKey(),
+      communication_set_id: set.id,
+      name: this.defaultScheduleName(set),
+      active: true,
+      anchor_week: 1,
+      anchor_day: 'Monday',
+      recurrence: 'none',
+      interval: 1,
+      timezone: 'UTC',
+      hour: 8,
+      minute: 0,
+      ice_cube_schedule: {
+        timezone: 'UTC',
+        recurrence: 'none',
+        rules: [{type: 'one_off'}],
+      },
+    });
+  }
+
+  private loadPreviewForSet(set: CommunicationSet): void {
+    if (!this.unit) {
+      this.setPreviewLoading = false;
+      return;
+    }
+
+    this.setPreviewLoading = true;
+    this.setService.getForUnitById(this.unit.id, set.id).subscribe({
+      next: (setResponse) => {
+        this.applySetPreviewResponse(setResponse);
+        this.setPreviewLoading = false;
+      },
+      error: (error) => {
+        this.setPreviewLoading = false;
+        this.showError(error);
+      },
+    });
+  }
+
+  private applySetPreviewResponse(setResponse: CommunicationSetPreviewResponse): void {
+    const rules = (setResponse.rules || []).map((rule) => new CommunicationRule(rule));
+    const existingSet = this.sets.find((set) => set.id === setResponse.id);
+    const schedules =
+      setResponse.schedules !== undefined
+        ? (setResponse.schedules || []).map((schedule) => new CommunicationSetSchedule(schedule))
+        : existingSet?.schedules || [];
+    const updatedSet = new CommunicationSet({
+      id: setResponse.id,
+      unit_id: setResponse.unit_id,
+      name: setResponse.name,
+      active: setResponse.active,
+      schedules,
+      rules,
+    });
+    const setIndex = this.sets.findIndex((set) => set.id === updatedSet.id);
+    if (setIndex >= 0) {
+      this.sets[setIndex] = updatedSet;
+    }
+
+    if (this.selectedSetId === updatedSet.id) {
+      this.rules = rules;
+      if (!this.rules.some((rule) => rule.id === this.selectedRuleId)) {
+        this.selectedRuleId = this.rules[0]?.id;
+      }
+    }
+
+    this.rules.forEach((rule) => {
+      this.previewLoading[rule.id] = true;
+    });
+
+    setResponse.previews.forEach((preview) => {
+      this.previewAllocations[preview.target_rule_id] = preview.allocations || [];
+      this.previewStudents[preview.target_rule_id] = this.studentsForPreviewRule(
+        preview.target_rule_id,
+        preview,
+      );
+      this.previewLoaded[preview.target_rule_id] = true;
+      this.previewLoading[preview.target_rule_id] = false;
+    });
+
+    this.rules.forEach((rule) => {
+      this.previewLoading[rule.id] = false;
+    });
+
+    this.rebuildTree();
+  }
+
+  private studentsForPreviewRule(
+    ruleId: number,
+    preview: CommunicationRulePreviewResponse,
+  ): CommunicationRulePreviewStudent[] {
+    return preview.allocations.find((allocation) => allocation.rule_id === ruleId)?.students || [];
+  }
+
+  private availableStudentsForRule(rule: CommunicationRule): number {
+    const totalStudents = this.unit?.students?.length ?? 0;
+    if (!this.previewLoaded[rule.id]) {
+      return totalStudents;
+    }
+
+    const claimedByPreviousRules = this.previewAllocationsFor(rule)
+      .filter((allocation) => allocation.rule_id !== rule.id)
+      .reduce((sum, allocation) => sum + allocation.students.length, 0);
+
+    return Math.max(0, totalStudents - claimedByPreviousRules);
+  }
+
+  private sampleStudentForRule(
+    rule: CommunicationRule,
+  ): CommunicationRulePreviewStudent | undefined {
+    return this.studentsFor(rule)[0];
+  }
+
+  private openScheduleModal(set: CommunicationSet, schedule?: CommunicationSetSchedule): void {
+    const dialogRef = this.dialog.open(CommunicationScheduleModalComponent, {
+      width: '960px',
+      maxWidth: '96vw',
+      data: {
+        schedule: schedule
+          ? new CommunicationSetSchedule({
+              ...schedule,
+            })
+          : this.blankSchedule(set),
+        unit: this.unit,
+      } satisfies CommunicationScheduleModalData,
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (!result) {
+        return;
+      }
+
+      const hydrated = new CommunicationSetSchedule({
+        ...result,
+        client_key: schedule?.client_key || result.client_key || this.newScheduleClientKey(),
+        communication_set_id: set.id,
+      });
+
+      const schedules = [...(set.schedules || [])];
+      const existingIndex = schedules.findIndex(
+        (item) => (item.id || item.client_key) === (schedule?.id || schedule?.client_key),
+      );
+
+      if (existingIndex >= 0) {
+        schedules[existingIndex] = hydrated;
+      } else {
+        schedules.push(hydrated);
+      }
+
+      this.persistSchedules(set, schedules, 'Schedule saved');
+    });
+  }
+
+  private persistSchedules(
+    set: CommunicationSet,
+    schedules: CommunicationSetSchedule[],
+    successMessage: string,
+  ): void {
+    this.setService
+      .updateForUnit(this.unit.id, set.id, {
+        name: set.name,
+        active: set.active,
+        schedules: schedules.map((schedule) => ({
+          id: schedule.id,
+          name: schedule.name,
+          active: schedule.active,
+          anchor_week: schedule.anchor_week,
+          anchor_day: schedule.anchor_day,
+          hour: schedule.hour,
+          minute: schedule.minute,
+          timezone: schedule.timezone,
+          recurrence: schedule.recurrence,
+          interval: schedule.interval,
+          repeat_count: schedule.repeat_count,
+          until_at: schedule.until_at,
+        })),
+      })
+      .subscribe({
+        next: (updatedSet) => {
+          set.schedules = updatedSet.schedules || [];
+          const setIndex = this.sets.findIndex((item) => item.id === set.id);
+          if (setIndex >= 0) {
+            this.sets[setIndex].schedules = updatedSet.schedules || [];
+          }
+          this.alerts.success(successMessage);
+        },
+        error: (error) => this.showError(error),
+      });
+  }
+
+  private showError(error): void {
+    this.alerts.error(error?.message || error?.error || error || 'Communication update failed');
+  }
+
+  private showExecutionProgress(job: SidekiqJob, title: string): void {
+    if (!job?.id) {
+      this.alerts.error('Failed to start communication execution', 6000);
+      return;
+    }
+
+    this.sidekiqProgressModalService.show(title, job.id).subscribe({
+      error: (error) => this.showError(error),
+    });
+  }
+
+  private prettyKey(key: string): string {
+    const labels: Record<string, string> = {
+      operator: 'Operator',
+      target_grade: 'Target Grade',
+      task_definition_id: 'Task',
+      task_statuses: 'Task Statuses',
+      task_status_count: 'Task Status Count',
+      task_target_grade: 'Task Target Grade',
+      last_sign_in_at: 'Last Sign In',
+      spec_con_days: 'Special Consideration Days',
+      tutorial_id: 'Tutorial',
+      tutorial_stream_id: 'Tutorial Stream',
+      campus_id: 'Campus',
+      subject: 'Subject',
+      body: 'Body',
+      email_tutors: 'Email Tutors',
+      email_convenors: 'Email Convenors',
+    };
+
+    return labels[key] || key;
+  }
+
+  private prettyValue(key: string, value: unknown): string {
+    if (key === 'operator' && typeof value === 'string') {
+      return this.operatorLabel(value);
+    }
+
+    if ((key === 'target_grade' || key === 'task_target_grade') && typeof value === 'number') {
+      return this.unit.gradeAbbreviation(value) || value.toString();
+    }
+
+    if (key === 'task_statuses' && Array.isArray(value)) {
+      return this.taskStatusesLabel(value);
+    }
+
+    if (typeof value === 'boolean') {
+      return value ? 'Yes' : 'No';
+    }
+
+    return `${value}`;
+  }
+
+  private escapeHtml(value: string): string {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  private resolveTemplateVariable(token: string, rule: CommunicationRule): string | undefined {
+    const student = this.sampleStudentForRule(rule);
+
+    switch (token) {
+      case '{{student.first_name}}':
+        return student?.first_name;
+      case '{{student.last_name}}':
+        return student?.last_name;
+      case '{{student.preferred_name}}':
+        return student?.preferred_name || student?.first_name;
+      case '{{student.full_name}}':
+        return (
+          student?.full_name || [student?.first_name, student?.last_name].filter(Boolean).join(' ')
+        );
+      case '{{student.username}}':
+        return student?.username;
+      case '{{student.student_id}}':
+        return student?.student_id;
+      case '{{affected_students_count}}':
+        return this.studentsFor(rule).length.toString();
+      case '{{unit.code}}':
+        return this.unit?.code;
+      case '{{unit.name}}':
+        return this.unit?.name;
+      case '{{rule.name}}':
+        return rule.name;
+      case '{{target_grade}}':
+        return student?.target_grade !== undefined && student?.target_grade !== null
+          ? this.targetGradeName(student.target_grade)
+          : undefined;
+      case '{{conditions_summary}}':
+        return this.conditionsSummary(rule);
+      case '{{actions_summary}}':
+        return this.actionsSummary(rule);
+      default:
+        return undefined;
+    }
+  }
+
+  private hiddenKeysForRecord(record: CommunicationCondition | CommunicationAction): string[] {
+    const baseHiddenKeys = ['id', 'type', 'communication_rule_id', 'operator'];
+
+    if (!('type' in record)) {
+      return baseHiddenKeys;
+    }
+
+    switch (record.type) {
+      case 'ChangeTargetGradeAction':
+        return [...baseHiddenKeys, 'subject', 'body', 'email_tutors', 'email_convenors'];
+      case 'EmailStudentAction':
+        return [...baseHiddenKeys, 'target_grade', 'email_tutors', 'email_convenors'];
+      case 'EmailStaffAction':
+        return [...baseHiddenKeys, 'target_grade'];
+      default:
+        return baseHiddenKeys;
+    }
+  }
+
+  conditionsSummary(rule: CommunicationRule): string {
+    return (rule.conditions || [])
+      .map((condition) =>
+        `- ${this.conditionTypeLabel(condition.type)}: ${this.labelFor(condition)}`.trim(),
+      )
+      .join('\n');
+  }
+
+  actionsSummary(rule: CommunicationRule): string {
+    return (rule.actions || []).map((action) => `- ${this.actionSummary(action)}`).join('\n');
+  }
+
+  private titleize(value: string): string {
+    return value
+      ?.split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  }
+
+  private scheduleCadence(schedule: CommunicationSetSchedule): string {
+    switch (schedule.recurrence) {
+      case 'daily':
+        return `Daily every ${schedule.interval || 1} day(s)`;
+      case 'weekly':
+        return `Weekly every ${schedule.interval || 1} week(s) from ${schedule.anchor_day || 'Monday'}`;
+      case 'monthly':
+        return `Monthly every ${schedule.interval || 1} month(s) from Week ${schedule.anchor_week || 1} ${schedule.anchor_day || 'Monday'}`;
+      default:
+        return 'One-off run';
+    }
+  }
+
+  private scheduleEnding(schedule: CommunicationSetSchedule): string {
+    if (schedule.repeat_count) {
+      return `Stops after ${schedule.repeat_count} run(s)`;
+    }
+
+    if (schedule.until_at) {
+      return `Stops at ${this.dateLabel(schedule.until_at)}`;
+    }
+
+    return 'No expiry';
+  }
+
+  private formatTime(hour = 0, minute = 0): string {
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  }
+
+  private newScheduleClientKey(): string {
+    return `schedule-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+  }
+
+  private rebuildTree(): void {
+    const treeData = this.sets.map((set) => ({
+      type: 'set' as const,
+      id: set.id,
+      label: set.name,
+      set,
+      children: (set.rules ?? []).map((rule) => ({
+        type: 'rule' as const,
+        id: rule.id,
+        label: rule.name,
+        set,
+        rule,
+      })),
+    }));
+
+    this.treeDataSource.data = treeData;
+    treeData.forEach((node) => {
+      if (this.expandedSetIds.has(node.id) || node.id === this.selectedSetId) {
+        this.treeControl.expand(node);
+      }
+    });
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.html b/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.html
new file mode 100644
index 0000000000..8c20abb5ef
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.html
@@ -0,0 +1,39 @@
+<mat-dialog-content class="mat-typography">
+  <div class="modal-header">
+    <h1>D2L Unit Details</h1>
+  </div>
+  <div class="modal-body">
+    <p>Enter the D2L identifier to allow grades to be transfered once entered.</p>
+    <mat-form-field appearance="outline">
+      <input
+        matInput
+        name="orgUnitId"
+        placeholder="Org Unit Id"
+        required
+        type="text"
+        [(ngModel)]="d2lDataMapping.orgUnitId"
+      />
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+      <input
+        matInput
+        name="orgUnitId"
+        placeholder="Grade Object Id"
+        type="text"
+        [(ngModel)]="d2lDataMapping.gradeObjectId"
+      />
+      <mat-hint align="start">Created during grades transfer if not set</mat-hint>
+    </mat-form-field>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  @if (d2lDataMapping.id) {
+    <button color="warn" mat-stroked-button (click)="delete()">Delete</button>
+  }
+  <button class="pull-right" mat-stroked-button (click)="saveAndClose()">
+    @if (d2lDataMapping.hasChanges(d2lAssessmentMappingService.mapping)) {
+      <span>Save and </span>
+    }
+    Close
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.scss b/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.scss
new file mode 100644
index 0000000000..a4e1d77cc6
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.scss
@@ -0,0 +1,3 @@
+mat-form-field {
+  padding: 1rem;
+}
diff --git a/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.ts b/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.ts
new file mode 100644
index 0000000000..5723fa15b5
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-details-editor/d2l-details-form/d2l-unit-details-form.component.ts
@@ -0,0 +1,124 @@
+//
+// Modal to show Doubtfire version info
+//
+import {ChangeDetectionStrategy, Component, Inject, Injectable, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {Observable} from 'rxjs';
+import {D2lAssessmentMapping} from 'src/app/api/models/d2l/d2l_assessment_mapping';
+import {D2lAssessmentMappingService} from 'src/app/api/models/doubtfire-model';
+import {Unit} from 'src/app/api/models/unit';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-d2l-unit-details-form',
+  templateUrl: 'd2l-unit-details-form.component.html',
+  styleUrl: 'd2l-unit-details-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class D2lUnitDetailsFormComponent implements OnInit {
+  public d2lDataMapping: D2lAssessmentMapping = new D2lAssessmentMapping(this.data);
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: Unit,
+    @Inject(MatDialogRef<D2lUnitDetailsFormComponent>)
+    public dialogRef: MatDialogRef<D2lUnitDetailsFormComponent>,
+    private alertService: AlertService,
+    public d2lAssessmentMappingService: D2lAssessmentMappingService,
+  ) {}
+
+  ngOnInit(): void {
+    this.data.loadD2lMapping().subscribe({
+      next: (d2lDataMapping) => {
+        this.d2lDataMapping = d2lDataMapping;
+      },
+      error: (_err) => {
+        // No mapping found, create a new one
+        this.d2lDataMapping = new D2lAssessmentMapping(this.data);
+      },
+    });
+  }
+
+  private saveAction(): Observable<D2lAssessmentMapping> {
+    if (!this.d2lDataMapping.id) {
+      if (!this.d2lDataMapping.orgUnitId && !this.d2lDataMapping.gradeObjectId) {
+        return null;
+      }
+      return this.d2lAssessmentMappingService.post(
+        {
+          unitId: this.data.id,
+          id: undefined,
+        },
+        {
+          entity: this.d2lDataMapping,
+          constructorParams: this.data,
+        },
+      );
+    } else if (this.d2lDataMapping.hasChanges(this.d2lAssessmentMappingService.mapping)) {
+      return this.d2lAssessmentMappingService.update(
+        {
+          unitId: this.data.id,
+          id: this.d2lDataMapping.id,
+        },
+        {
+          entity: this.d2lDataMapping,
+        },
+      );
+    } else {
+      return null;
+    }
+  }
+
+  public saveAndClose(): void {
+    const action = this.saveAction();
+
+    if (action) {
+      action.subscribe({
+        next: () => {
+          this.alertService.success('D2l details saved successfully');
+          // Close the dialog
+          this.dialogRef.close();
+        },
+        error: (err) => {
+          this.alertService.error(`Failed to save unit ${err}`);
+          console.error(err);
+        },
+      });
+    } else {
+      this.dialogRef.close();
+    }
+  }
+
+  public delete(): void {
+    this.d2lAssessmentMappingService
+      .delete({unitId: this.data.id, id: this.d2lDataMapping.id})
+      .subscribe({
+        next: () => {
+          this.alertService.success('D2l details deleted successfully');
+          this.data.d2lMapping = undefined;
+          this.dialogRef.close();
+        },
+        error: (err) => {
+          this.alertService.error(`Failed to delete D2L details: ${err}`);
+          console.error(err);
+        },
+      });
+  }
+}
+
+/**
+ * The about doubtfire modal service - used to create and show the modal
+ */
+
+@Injectable()
+export class D2lUnitDetailsModal {
+  constructor(public dialog: MatDialog) {}
+
+  public open(unit: Unit): void {
+    // Show dialog while the data above is being fetched
+    this.dialog.open(D2lUnitDetailsFormComponent, {
+      width: '600px',
+      data: unit,
+    });
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.coffee b/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.coffee
deleted file mode 100644
index c1fe9e38fa..0000000000
--- a/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.coffee
+++ /dev/null
@@ -1,84 +0,0 @@
-angular.module('doubtfire.units.states.edit.directives.unit-details-editor', [])
-
-#
-# Editor for the basic details of a unit, such as the name, code
-# start and end dates etc.
-#
-.directive('unitDetailsEditor', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'units/states/edit/directives/unit-details-editor/unit-details-editor.tpl.html'
-  controller: ($scope, $state, $rootScope, DoubtfireConstants, newUnitService, alertService, newTeachingPeriodService, TaskSubmission) ->
-    $scope.overseerEnabled = DoubtfireConstants.IsOverseerEnabled
-
-    $scope.calOptions = {
-      startOpened: false
-      endOpened: false
-      portfolioAutoGenerationOpened: false
-    }
-
-    # Get docker images available for automated task assessment for the unit.
-    TaskSubmission.getDockerImagesAsPromise().then (images) ->
-      $scope.dockerImages = images
-
-    # Get the confugurable, external name of Doubtfire
-    $scope.externalName = DoubtfireConstants.ExternalName
-
-    # get the teaching periods- gets an object with the loaded teaching periods
-    newTeachingPeriodService.query().subscribe((periods) ->
-      $scope.teachingPeriods = periods
-      $scope.teachingPeriodValues = [{value: undefined, text: "None"}]
-      other = _.map periods, (p) -> {value: p, text: "#{p.year} #{p.period}"}
-      _.each other, (d) -> $scope.teachingPeriodValues.push(d)
-    )
-
-    $scope.teachingPeriodSelected = ($event) ->
-      $scope.unit.teachingPeriod = $event
-
-    $scope.unit.taskDefinitionCache.values.subscribe(
-      (taskDefs) ->
-        $scope.taskDefinitionValues = [{value: undefined, text: "None"}]
-        other = _.map taskDefs, (td) -> {value: td, text: "#{td.abbreviation}-#{td.name}"}
-        _.each other, (d) -> $scope.taskDefinitionValues.push(d)
-    )
-
-    $scope.draftTaskDefSelected = ($event) ->
-      $scope.unit.draftTaskDefinition = $event
-
-    # Datepicker opener
-    $scope.open = ($event, pickerData) ->
-      $event.preventDefault()
-      $event.stopPropagation()
-
-      if pickerData == 'start'
-        $scope.calOptions.startOpened = ! $scope.calOptions.startOpened
-        $scope.calOptions.endOpened = false
-        $scope.calOptions.portfolioAutoGenerationOpened = false
-      else if pickerData == 'end'
-        $scope.calOptions.startOpened = false
-        $scope.calOptions.endOpened = ! $scope.calOptions.endOpened
-        $scope.calOptions.portfolioAutoGenerationOpened = false
-      else if pickerData == 'autogen'
-        $scope.calOptions.startOpened = false
-        $scope.calOptions.endOpened = false
-        $scope.calOptions.portfolioAutoGenerationOpened = ! $scope.calOptions.portfolioAutoGenerationOpened
-
-    $scope.dateOptions = {
-      formatYear: 'yy',
-      startingDay: 1
-    }
-    $scope.studentSearch = ""
-
-    $scope.saveUnit = ->
-      newUnitService.update($scope.unit).subscribe({
-        next: (unit) ->
-          alertService.success( "Unit updated.", 2000)
-        error: (response) ->
-          alertService.error( "Failed to update unit. #{response}", 6000)
-    })
-
-)
-
-
-
-
diff --git a/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.html b/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.html
new file mode 100644
index 0000000000..14971021b1
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.html
@@ -0,0 +1,417 @@
+<div class="mx-auto flex w-full flex-col gap-3">
+  <div class="header">
+    <h3>Unit Details</h3>
+    <p>Edit and configure all details and settings for this unit.</p>
+  </div>
+  <mat-card appearance="outlined" class="gap-1 p-[16px]">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Code</mat-label>
+      <input matInput required [(ngModel)]="unit.code" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Name</mat-label>
+      <input matInput required [(ngModel)]="unit.name" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Description</mat-label>
+      <textarea matInput required [(ngModel)]="unit.description"></textarea>
+    </mat-form-field>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="gap-1 p-[16px]">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Teaching Period</mat-label>
+      <mat-select placeholder="Select Teaching Period" [(ngModel)]="unit.teachingPeriod">
+        <mat-option [value]="undefined">None</mat-option>
+        @for (period of teachingPeriods; track period) {
+          <mat-option [value]="period">{{ period.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <div class="flex w-full gap-3">
+      @if (!unit.teachingPeriod) {
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>Start Date</mat-label>
+          <input matInput [matDatepicker]="startdatepicker" [(ngModel)]="unit.startDate" />
+          <mat-datepicker-toggle matIconSuffix [for]="startdatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #startdatepicker></mat-datepicker>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>End Date</mat-label>
+          <input matInput [matDatepicker]="enddatepicker" [(ngModel)]="unit.endDate" />
+          <mat-datepicker-toggle matIconSuffix [for]="enddatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #enddatepicker></mat-datepicker>
+        </mat-form-field>
+      } @else {
+        <mat-form-field appearance="outline" class="w-full" disabled>
+          <mat-label>{{ unit.teachingPeriod.name }} Start Date</mat-label>
+          <input
+            disabled
+            matInput
+            readonly
+            [value]="$safeNavigationMigration(unit.teachingPeriod?.startDate) | date"
+          />
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="w-full" disabled>
+          <mat-label>{{ unit.teachingPeriod.name }} End Date</mat-label>
+          <input
+            disabled
+            matInput
+            readonly
+            [value]="$safeNavigationMigration(unit.teachingPeriod?.endDate) | date"
+          />
+        </mat-form-field>
+      }
+    </div>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Portfolio Auto-Generation Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="potfoliogendatepicker"
+        [(ngModel)]="unit.portfolioAutoGenerationDate"
+      />
+      <mat-datepicker-toggle matIconSuffix [for]="potfoliogendatepicker"></mat-datepicker-toggle>
+      <mat-datepicker #potfoliogendatepicker> </mat-datepicker>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Draft Learning Summary</mat-label>
+      <mat-select placeholder="Select Learning Summary Task" [(ngModel)]="unit.draftTaskDefinition">
+        <mat-option [value]="undefined">None</mat-option>
+        @for (td of taskDefinitions; track td) {
+          <mat-option [value]="td">{{ td.abbreviation }} - {{ td.name }}</mat-option>
+        }
+      </mat-select>
+      <mat-hint>
+        When a draft learning summary task is selected, this will ensure a students uploaded draft
+        is automatically added to the students portfolio.
+      </mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Extension duration onresubmit </mat-label>
+      <input matInput required [(ngModel)]="unit.extensionWeeksOnResubmitRequest" />
+      <mat-hint>
+        When tutors request resubmission of a task, this setting determines how many weeks the task
+        will be extended to allow students to fix and resubmit their work.
+      </mat-hint>
+    </mat-form-field>
+
+    <div class="flex w-full gap-3">
+      <mat-form-field appearance="outline" class="w-full">
+        <mat-label>Feedback warning after (days)</mat-label>
+        <input
+          matInput
+          min="0"
+          required
+          type="number"
+          [(ngModel)]="unit.feedbackWarningThresholdDays"
+        />
+        <mat-hint>
+          Tasks in inbox are highlighted if feedback isn’t given within this many days of
+          submission.
+        </mat-hint>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="w-full">
+        <mat-label>Show task in overflow queue after (days)</mat-label>
+        <input
+          matInput
+          min="0"
+          required
+          type="number"
+          [(ngModel)]="unit.feedbackOverflowThresholdDays"
+        />
+        <mat-hint>
+          Tasks without feedback for this many days will appear in the overflow queue.
+        </mat-hint>
+      </mat-form-field>
+    </div>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="flex flex-col gap-3 p-4">
+    <div>
+      <h4 class="mb-1">Grade definitions</h4>
+      <p class="text-sm text-gray-600">
+        Index -1 is used when work fails assessment. Target grades start at index 0, and higher
+        indexes include tasks from every lower level.
+      </p>
+      <p class="text-sm text-gray-600">
+        Grades already used by tasks, students, or communications can be renamed, but cannot be
+        removed or moved to another index.
+      </p>
+    </div>
+
+    <div>
+      <table mat-table [dataSource]="gradeDefinitions">
+        <ng-container matColumnDef="index">
+          <th *matHeaderCellDef mat-header-cell>Index</th>
+          <td *matCellDef="let grade" mat-cell>{{ grade.value }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="label">
+          <th *matHeaderCellDef mat-header-cell>Label</th>
+          <td *matCellDef="let grade; let index = index" mat-cell>
+            @if (editingGradeId === grade.id) {
+              <mat-form-field appearance="outline" class="mt-4" subscriptSizing="dynamic">
+                <mat-label>Label</mat-label>
+                <input
+                  matInput
+                  maxlength="50"
+                  required
+                  [ngModel]="grade.label"
+                  (keydown.space)="$event.stopPropagation()"
+                  (ngModelChange)="updateGrade(index, 'label', $event)"
+                />
+              </mat-form-field>
+            } @else {
+              {{ grade.label }}
+            }
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="abbreviation">
+          <th *matHeaderCellDef mat-header-cell>Abbreviation</th>
+          <td *matCellDef="let grade; let index = index" mat-cell>
+            @if (editingGradeId === grade.id) {
+              <mat-form-field appearance="outline" class="mt-4" subscriptSizing="dynamic">
+                <mat-label>Abbreviation</mat-label>
+                <input
+                  matInput
+                  maxlength="10"
+                  required
+                  [ngModel]="grade.abbreviation"
+                  (keydown.space)="$event.stopPropagation()"
+                  (ngModelChange)="updateGrade(index, 'abbreviation', $event)"
+                />
+              </mat-form-field>
+            } @else {
+              {{ grade.abbreviation }}
+            }
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="order">
+          <th *matHeaderCellDef mat-header-cell>Order</th>
+          <td *matCellDef="let grade; let index = index" mat-cell>
+            <div class="flex">
+              @if (index > 0) {
+                <button
+                  aria-label="Move grade down"
+                  mat-icon-button
+                  matTooltip="Move down"
+                  type="button"
+                  [disabled]="isAddingGrade() || index === gradeDefinitions.length - 1"
+                  (click)="moveGrade(index, 1)"
+                >
+                  <mat-icon>arrow_downward</mat-icon>
+                </button>
+                <button
+                  aria-label="Move grade up"
+                  mat-icon-button
+                  matTooltip="Move up"
+                  type="button"
+                  [disabled]="isAddingGrade() || index === 1"
+                  (click)="moveGrade(index, -1)"
+                >
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+              }
+            </div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <th *matHeaderCellDef mat-header-cell>Actions</th>
+          <td *matCellDef="let grade; let index = index" mat-cell>
+            <div class="flex">
+              @if (editingGradeId === grade.id) {
+                <button
+                  aria-label="Save grade"
+                  mat-icon-button
+                  matTooltip="Save"
+                  type="button"
+                  (click)="saveGrade()"
+                >
+                  <mat-icon>save</mat-icon>
+                </button>
+              } @else {
+                <button
+                  aria-label="Edit grade"
+                  mat-icon-button
+                  matTooltip="Edit"
+                  type="button"
+                  [disabled]="isAddingGrade()"
+                  (click)="editGrade(grade)"
+                >
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+
+              @if (index > 0) {
+                <button
+                  aria-label="Remove grade"
+                  mat-icon-button
+                  matTooltip="Delete"
+                  type="button"
+                  [disabled]="
+                    gradeDefinitions.length === 2 ||
+                    (isAddingGrade() && editingGradeId !== grade.id)
+                  "
+                  (click)="removeGrade(index)"
+                >
+                  <mat-icon>delete</mat-icon>
+                </button>
+              }
+            </div>
+          </td>
+        </ng-container>
+
+        <tr *matHeaderRowDef="gradeDefinitionColumns" mat-header-row></tr>
+        <tr *matRowDef="let row; columns: gradeDefinitionColumns" mat-row></tr>
+      </table>
+    </div>
+
+    <div>
+      <button mat-stroked-button type="button" [disabled]="isAddingGrade()" (click)="addGrade()">
+        <mat-icon>add</mat-icon>
+        Add grade
+      </button>
+    </div>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="flex flex-col gap-3 p-[16px]">
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.allowFlexibleDates"
+        >Allow flexible dates</mat-slide-toggle
+      >
+      <p>Allows students to set planned due dates, without using extensions.</p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.allowStudentExtensionRequests"
+        >Allow student extensions</mat-slide-toggle
+      >
+      <p>When false only staff can request extensions on behalf of students.</p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.autoApplyExtensionBeforeDeadline"
+        >Auto apply extensions</mat-slide-toggle
+      >
+      <p>
+        When true, extensions will be automatically applied when they result in a date that is
+        between the task's due date and deadline.
+      </p>
+    </div>
+
+    <div>
+      <mat-slide-toggle
+        [(ngModel)]="unit.markLateSubmissionsAsAssessInPortfolio"
+        (change)="onToggleAssessInPortfolio($event)"
+        >Has tasks assessed in portfolio</mat-slide-toggle
+      >
+      <p>
+        When enabled, late submissions will not be automatically marked as "Time Exceeded" or
+        "Feedback Exceeded", and will instead appear as "Assess in Portfolio". Tutors can still sign
+        off tasks as complete unless the task definition has the "Assess in Portfolio Only" option
+        enabled.
+      </p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.allowStudentChangeTutorial"
+        >Allow students to change tutorial</mat-slide-toggle
+      >
+      <p>
+        When false only staff can change student tutorials. When true, students may switch between
+        tutors who provide feedback on their work.
+      </p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.enforceFeedbackBeforeDiscussedInClass"
+        >Require feedback before discussed in class</mat-slide-toggle
+      >
+      <p>
+        When true, tutors must record feedback before they can mark discussion tasks as discussed in
+        class.
+      </p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.sendNotifications"
+        >Send notification emails</mat-slide-toggle
+      >
+      <p>
+        When true, emails will be set to students each week to indicate progress and suggest future
+        tasks for them to work on.
+      </p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.enableSyncEnrolments"
+        >Synchronise enrolments</mat-slide-toggle
+      >
+      <p>
+        When true student enrolments will be synchronised with other systems where this is possible.
+      </p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.enableSyncTimetable"
+        >Synchronise timetable</mat-slide-toggle
+      >
+      <p>
+        When true timetable data will be synchronised with other systems where this is possible.
+      </p>
+    </div>
+
+    <div>
+      <mat-slide-toggle [(ngModel)]="unit.active">Active</mat-slide-toggle>
+      <p>Set to false to hide unit from students and tutors.</p>
+    </div>
+  </mat-card>
+
+  @if (overseerEnabled.value) {
+    <mat-card class="gap-1 p-[16px]">
+      <div>
+        <mat-slide-toggle [(ngModel)]="unit.assessmentEnabled"
+          >Overseer assessment</mat-slide-toggle
+        >
+        <p>If true, unit tasks will be able to make use of Overseer automated checking.</p>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Overseer Docker Image</mat-label>
+        <mat-select [(ngModel)]="unit.overseerImage">
+          @for (image of dockerImages; track image) {
+            <mat-option [value]="image">{{ image.description }}</mat-option>
+          }
+        </mat-select>
+        <mat-hint
+          >Use this to select the default container used to check tasks with Overseer.</mat-hint
+        >
+      </mat-form-field>
+    </mat-card>
+  }
+
+  <div class="flex w-full justify-end gap-3">
+    <button mat-raised-button [hidden]="!d2lEnabled.value" (click)="addD2lData()">
+      D2L Details
+    </button>
+    <button
+      mat-raised-button
+      matTooltip="Rollover the unit into a new teaching period"
+      matTooltipShowDelay="1000"
+      [routerLink]="['/units', unit.id, 'rollover']"
+    >
+      Copy
+    </button>
+    <button color="primary" mat-raised-button (click)="saveUnit()">Update</button>
+  </div>
+</div>
diff --git a/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.scss b/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.ts b/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.ts
new file mode 100644
index 0000000000..4cef34c732
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.component.ts
@@ -0,0 +1,267 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+import {OverseerImage, UnitService} from 'src/app/api/models/doubtfire-model';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {TeachingPeriod} from 'src/app/api/models/teaching-period';
+import {GradeDefinition, Unit} from 'src/app/api/models/unit';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {TeachingPeriodService} from 'src/app/api/services/teaching-period.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TaskSubmissionService} from 'src/app/common/services/task-submission.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {D2lUnitDetailsModal} from './d2l-details-form/d2l-unit-details-form.component';
+
+@Component({
+  selector: 'f-unit-details-editor',
+  templateUrl: 'unit-details-editor.component.html',
+  styleUrls: ['unit-details-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitDetailsEditorComponent implements OnInit {
+  @Input() unit: Unit;
+
+  constructor(
+    private teachingPeriodService: TeachingPeriodService,
+    private taskDefinitionService: TaskDefinitionService,
+    private doubtfireConstants: DoubtfireConstants,
+    private taskSubmissionService: TaskSubmissionService,
+    private d2lUnitDetailsModal: D2lUnitDetailsModal,
+    private unitService: UnitService,
+    private alertsService: AlertService,
+    private confirmationModal: ConfirmationModalService,
+  ) {}
+
+  public teachingPeriods: TeachingPeriod[];
+  public taskDefinitions: TaskDefinition[];
+  public dockerImages: OverseerImage[];
+  public editingGradeId: string | null = null;
+  public readonly gradeDefinitionColumns = ['index', 'label', 'abbreviation', 'order', 'actions'];
+  private editingGradeDefinitions: GradeDefinition[] | null = null;
+  private newGradeId: string | null = null;
+
+  public get gradeDefinitions(): GradeDefinition[] {
+    return this.unit.gradeDefinitions;
+  }
+
+  public addGrade(): void {
+    if (this.newGradeId) {
+      return;
+    }
+
+    const previousDefinitions = this.cloneGradeDefinitions();
+    const newGradeId = `grade-${Date.now()}`;
+    this.unit.gradeDefinitions = [
+      ...this.unit.gradeDefinitions,
+      {
+        id: newGradeId,
+        value: this.unit.gradeDefinitions.length - 1,
+        label: 'New grade',
+        abbreviation: 'NEW',
+      },
+    ];
+    this.reindexGrades();
+    this.editingGradeDefinitions = previousDefinitions;
+    this.editingGradeId = newGradeId;
+    this.newGradeId = newGradeId;
+  }
+
+  public removeGrade(index: number): void {
+    const grade = this.unit.gradeDefinitions[index];
+    if (!grade) {
+      return;
+    }
+
+    this.confirmationModal.show(
+      `Delete Grade ${grade.label}`,
+      'Are you sure you want to delete this grade? This will update the available grades for this unit.',
+      () => {
+        if (grade.id === this.newGradeId) {
+          this.unit.gradeDefinitions = this.editingGradeDefinitions ?? this.cloneGradeDefinitions();
+          this.editingGradeDefinitions = null;
+          this.editingGradeId = null;
+          this.newGradeId = null;
+          return;
+        }
+        if (this.newGradeId) {
+          return;
+        }
+
+        const previousDefinitions = this.cloneGradeDefinitions();
+        this.unit.gradeDefinitions = this.unit.gradeDefinitions.filter(
+          (_definition, definitionIndex) => definitionIndex !== index,
+        );
+        this.reindexGrades();
+        if (this.editingGradeId === grade.id) {
+          this.editingGradeId = null;
+        }
+        this.saveGradeDefinitions(previousDefinitions, 'Grade deleted.');
+      },
+      undefined,
+      'Delete',
+    );
+  }
+
+  public moveGrade(index: number, offset: -1 | 1): void {
+    const targetIndex = index + offset;
+    if (
+      this.newGradeId ||
+      index <= 0 ||
+      targetIndex <= 0 ||
+      targetIndex >= this.unit.gradeDefinitions.length
+    ) {
+      return;
+    }
+
+    const previousDefinitions = this.cloneGradeDefinitions();
+    const definitions = [...this.unit.gradeDefinitions];
+    const [definition] = definitions.splice(index, 1);
+    definitions.splice(targetIndex, 0, definition);
+    this.unit.gradeDefinitions = definitions;
+    this.reindexGrades();
+    this.saveGradeDefinitions(previousDefinitions, 'Grade order updated.');
+  }
+
+  public editGrade(grade: GradeDefinition): void {
+    if (this.newGradeId) {
+      return;
+    }
+
+    this.editingGradeDefinitions = this.cloneGradeDefinitions();
+    this.editingGradeId = grade.id;
+  }
+
+  public saveGrade(): void {
+    const previousDefinitions = this.editingGradeDefinitions ?? this.cloneGradeDefinitions();
+    this.unit.gradeDefinitions = [...this.unit.gradeDefinitions];
+    const successMessage =
+      this.editingGradeId === this.newGradeId ? 'Grade added.' : 'Grade updated.';
+    this.saveGradeDefinitions(previousDefinitions, successMessage, () => {
+      this.editingGradeDefinitions = null;
+      this.editingGradeId = null;
+      this.newGradeId = null;
+    });
+  }
+
+  public isAddingGrade(): boolean {
+    return this.newGradeId !== null;
+  }
+
+  public updateGrade(index: number, key: 'label' | 'abbreviation', value: string): void {
+    const normalizedValue = key === 'abbreviation' ? value.toUpperCase() : value;
+    const definition = this.unit.gradeDefinitions[index];
+    if (definition) {
+      definition[key] = normalizedValue;
+    }
+  }
+
+  private reindexGrades(): void {
+    this.unit.gradeDefinitions = this.unit.gradeDefinitions.map((definition, index) => ({
+      ...definition,
+      value: index - 1,
+    }));
+  }
+
+  private cloneGradeDefinitions(): GradeDefinition[] {
+    return this.unit.gradeDefinitions.map((definition) => ({...definition}));
+  }
+
+  private saveGradeDefinitions(
+    previousDefinitions: GradeDefinition[],
+    successMessage: string,
+    successAction?: () => void,
+  ): void {
+    const gradeDefinitions = this.cloneGradeDefinitions();
+    this.unitService
+      .update(this.unit, {body: {unit: {grade_definitions: gradeDefinitions}}})
+      .subscribe({
+        next: () => {
+          successAction?.();
+          this.alertsService.success(successMessage, 2000);
+        },
+        error: (response) => {
+          this.unit.gradeDefinitions = previousDefinitions;
+          if (
+            !this.unit.gradeDefinitions.some((definition) => definition.id === this.editingGradeId)
+          ) {
+            this.editingGradeId = null;
+            this.editingGradeDefinitions = null;
+          }
+          this.alertsService.error(`Failed to update grades. ${response}`, 6000);
+        },
+      });
+  }
+
+  public get overseerEnabled() {
+    return this.doubtfireConstants.IsOverseerEnabled;
+  }
+
+  public get d2lEnabled() {
+    return this.doubtfireConstants.IsD2LEnabled;
+  }
+
+  ngOnInit(): void {
+    this.teachingPeriodService.query().subscribe((periods) => {
+      this.teachingPeriods = periods;
+    });
+
+    this.unit.taskDefinitionCache.values.subscribe((taskDefs) => {
+      this.taskDefinitions = taskDefs;
+    });
+
+    this.taskSubmissionService.getDockerImagesAsPromise().then((images) => {
+      this.dockerImages = images;
+    });
+  }
+
+  addD2lData() {
+    this.d2lUnitDetailsModal.open(this.unit);
+  }
+
+  saveUnit() {
+    this.unitService.update(this.unit).subscribe({
+      next: (_unit) => {
+        this.alertsService.success('Unit updated.', 2000);
+      },
+      error: (response) => {
+        this.alertsService.error(`Failed to update unit. ${response}`, 6000);
+      },
+    });
+  }
+
+  private updatingAssessInPortfolio: boolean = false;
+
+  onToggleAssessInPortfolio(event: MatSlideToggleChange) {
+    if (!event.checked || this.updatingAssessInPortfolio) {
+      return false;
+    }
+
+    if (this.updatingAssessInPortfolio) {
+      return;
+    }
+
+    this.updatingAssessInPortfolio = true;
+
+    setTimeout(() => {
+      this.unit.markLateSubmissionsAsAssessInPortfolio = false;
+      const modal = this.confirmationModal.show(
+        'Enable Assess in Portfolio?',
+        `Are you sure you want to enable "Assess in Portfolio" for late submissions?
+        This will update any existing Time Exceeded tasks to the "Assess in Portfolio" state.
+        You will not be able to disable this setting while any tasks remain in the "Assess in Portfolio" state.`,
+        () => {
+          this.unit.markLateSubmissionsAsAssessInPortfolio = true;
+          setTimeout(() => {
+            this.updatingAssessInPortfolio = false;
+          });
+        },
+      );
+      modal.afterClosed().subscribe(() => {
+        setTimeout(() => {
+          this.updatingAssessInPortfolio = false;
+        });
+      });
+    });
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.tpl.html b/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.tpl.html
deleted file mode 100644
index 3cd81f09c4..0000000000
--- a/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.tpl.html
+++ /dev/null
@@ -1,432 +0,0 @@
-<div class="unit-details-editor">
-  <div class="panel panel-primary">
-    <div class="panel-heading" ng-if="unit.id == -1">
-      <h3 class="panel-title">Create Unit</h3>
-      Create a new unit with all overview unit details here.
-    </div>
-    <div class="panel-heading" ng-if="unit.id != -1">
-      <h3 class="panel-title">Update Unit</h3>
-      Update overview details of the unit below.
-    </div>
-    <form class="form-horizontal" role="form" name="unitForm" ng-submit="saveUnit()">
-      <div class="panel-body">
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="code">Code</label>
-          <div class="col-sm-9">
-            <input class="form-control" id="code" type="text" placeholder="COS1234567" ng-model="unit.code" />
-          </div>
-        </div>
-        <!--/code-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="name">Name</label>
-          <div class="col-sm-9">
-            <input
-              id="name"
-              type="text"
-              class="form-control"
-              ng-model="unit.name"
-              placeholder="Introduction to {{externalName.value}}"
-            />
-          </div>
-        </div>
-        <!--/name-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="description">Description</label>
-          <div class="col-sm-9">
-            <textarea id="description" class="form-control" ng-model="unit.description"></textarea>
-          </div>
-        </div>
-        <!--/description-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="teachingPeriod">Teaching Period</label>
-          <div class="col-sm-9">
-            <object-select [source]="teachingPeriodValues" [target]="unit.teachingPeriod" (target-change)="teachingPeriodSelected($event)" label="Select Teaching Period"  />
-          </div>
-        </div>
-        <!--/teaching-period-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="">Draft Learning Summary</label>
-          <div class="col-sm-9">
-            <object-select [source]="taskDefinitionValues" [target]="unit.draftTaskDefinition" (target-change)="draftTaskDefSelected($event)" label="Select Learning Summary Task"  />
-
-            <span class="help-block">
-              When a draft learning summary task is selected, this will ensure a students uploaded draft is
-              automatically added to the students portfolio.
-            </span>
-          </div>
-        </div>
-        <!--/draft-learning-summary-->
-
-        <div class="form-group">
-          <label tooltip="Date for the start of teaching in the unit." class="col-sm-2 control-label" for="startdate"
-            >Start Date</label
-          >
-          <div class="col-sm-9">
-            <div class="col-sm-4 input-group">
-              <input
-                datepicker-popup="yyyy-MM-dd"
-                is-open="calOptions.startOpened"
-                type="text"
-                class="form-control"
-                id="startdate"
-                ng-model="unit.startDate"
-                ng-required="true"
-                placeholder="yyyy-MM-dd"
-                close-text="Close"
-                ng-if="!unit.teachingPeriod"
-              />
-              <input
-                type="text"
-                class="form-control"
-                id="startdate"
-                value="{{unit.teachingPeriod.startDate | date}}"
-                ng-disabled="true"
-                ng-if="unit.teachingPeriod"
-              />
-              <span class="input-group-btn">
-                <button
-                  class="btn btn-default"
-                  type="button"
-                  ng-click="open($event,'start')"
-                  ng-disabled="unit.teachingPeriod"
-                >
-                  <i class="fa fa-calendar"></i>
-                </button>
-              </span>
-            </div>
-          </div>
-        </div>
-        <!--/start-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">End Date</label>
-          <div class="col-sm-9">
-            <div class="col-sm-4 input-group">
-              <input
-                datepicker-popup="{{format}}"
-                id="enddate"
-                type="text"
-                class="form-control"
-                ng-model="unit.endDate"
-                is-open="calOptions.endOpened"
-                ng-required="!unit.teachingPeriod"
-                close-text="Close"
-                ng-if="!unit.teachingPeriod"
-              />
-              <input
-                id="enddate"
-                type="text"
-                class="form-control"
-                ng-value="unit.teachingPeriod.endDate | date"
-                ng-disabled="true"
-                ng-if="unit.teachingPeriod"
-              />
-              <span class="input-group-btn">
-                <button
-                  class="btn btn-default"
-                  type="button"
-                  ng-click="open($event,'end')"
-                  ng-disabled="unit.teachingPeriod"
-                >
-                  <i class="fa fa-calendar"></i>
-                </button>
-              </span>
-            </div>
-          </div>
-        </div>
-        <!--/end-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="portfolioautogenerationdate">Portfolio auto-generation date</label>
-          <div class="col-sm-9">
-            <div class="col-sm-4 input-group">
-              <input
-                datepicker-popup="{{format}}"
-                id="portfolioautogenerationdate"
-                type="text"
-                class="form-control"
-                ng-model="unit.portfolioAutoGenerationDate"
-                is-open="calOptions.portfolioAutoGenerationOpened"
-                ng-required="false"
-                close-text="Close"
-              />
-              <span class="input-group-btn">
-                <button
-                  class="btn btn-default"
-                  type="button"
-                  ng-click="open($event,'autogen')"
-                >
-                  <i class="fa fa-calendar"></i>
-                </button>
-              </span>
-            </div>
-          </div>
-        </div>
-        <!--/portfolio-auto-generation-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">Allow student extensions</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.allowStudentExtensionRequests ? 'success' : 'default'}}"
-                ng-model="unit.allowStudentExtensionRequests"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.allowStudentExtensionRequests ? 'default' : 'danger'}}"
-                ng-model="unit.allowStudentExtensionRequests"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block"> When false only staff can request extensions on behalf of students. </span>
-          </div>
-        </div>
-        <!--/allowStudentExtensionRequests-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="code">Extension duration on resubmit</label>
-          <div class="col-sm-9">
-            <input
-              class="form-control"
-              id="code"
-              type="number"
-              placeholder="1"
-              ng-model="unit.extensionWeeksOnResubmitRequest"
-            />
-            <span class="help-block">
-              When tutors request resubmission of a task, this setting determines how many weeks the task will be
-              extended to allow students to fix and resubmit their work.
-            </span>
-          </div>
-        </div>
-        <!--/extensionWeeksOnResubmitRequest-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">Auto apply extensions</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.autoApplyExtensionBeforeDeadline ? 'success' : 'default'}}"
-                ng-model="unit.autoApplyExtensionBeforeDeadline"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.autoApplyExtensionBeforeDeadline ? 'default' : 'danger'}}"
-                ng-model="unit.autoApplyExtensionBeforeDeadline"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block">
-              When true, extensions will be automatically applied when they result in a date that is between the task's
-              due date and deadline.
-            </span>
-          </div>
-        </div>
-        <!--/auto apply extension-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">Allow students to change tutorial</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.allowStudentChangeTutorial ? 'success' : 'default'}}"
-                ng-model="unit.allowStudentChangeTutorial"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.allowStudentChangeTutorial ? 'default' : 'danger'}}"
-                ng-model="unit.allowStudentChangeTutorial"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block"> When false only staff can change student tutorials. </span>
-          </div>
-        </div>
-        <!--/allowStudentChangeTutorial-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">Send notification emails</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.sendNotifications ? 'success' : 'default'}}"
-                ng-model="unit.sendNotifications"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.sendNotifications ? 'default' : 'danger'}}"
-                ng-model="unit.sendNotifications"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block">
-              When true, emails will be set to students each week to indicate progress and suggest future tasks for them
-              to work on.
-            </span>
-          </div>
-        </div>
-        <!--/sendNotifications-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">Synchronise enrolments</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.enableSyncEnrolments ? 'success' : 'default'}}"
-                ng-model="unit.enableSyncEnrolments"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.enableSyncEnrolments ? 'default' : 'danger'}}"
-                ng-model="unit.enableSyncEnrolments"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block">
-              When true student enrolments will be synchronised with other systems where this is possible.
-            </span>
-          </div>
-        </div>
-        <!--/syncEnrolments-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">Synchronise Timetable</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.enableSyncTimetable ? 'success' : 'default'}}"
-                ng-model="unit.enableSyncTimetable"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.enableSyncTimetable ? 'default' : 'danger'}}"
-                ng-model="unit.enableSyncTimetable"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block">
-              When true timetable data will be synchronised with other systems where this is possible.
-            </span>
-          </div>
-        </div>
-        <!--/syncTimetable-->
-
-        <div class="form-group" ng-if="overseerEnabled.value">
-          <label class="col-sm-2 control-label">Overseer Assessment</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.assessmentEnabled ? 'success' : 'default'}}"
-                ng-model="unit.assessmentEnabled"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.assessmentEnabled ? 'default' : 'danger'}}"
-                ng-model="unit.assessmentEnabled"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block">
-              If true, unit tasks will be able to make use of Overseer automated checking.
-            </span>
-          </div>
-        </div><!--/task-assessment-enabled-->
-
-        <div class="form-group" ng-if="overseerEnabled.value">
-          <label class="col-sm-2 control-label">Docker Image Name</label>
-          <div class="col-sm-9">
-            <select class="form-control" ng-model="unit.overseerImage" ng-options="image as image.description for image in dockerImages" />
-            <span class="help-block">
-              Use this to select the default container used to check tasks with Overseer.
-            </span>
-          </div>
-        </div> <!--/docker-image-name-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">Active</label>
-          <div class="col-sm-9">
-            <div class="btn-group">
-              <label
-                class="btn btn-{{unit.active ? 'success' : 'default'}}"
-                ng-model="unit.active"
-                btn-radio="true"
-                uncheckable
-              >
-                <i class="fa fa-check"></i>
-              </label>
-              <label
-                class="btn btn-{{unit.active ? 'default' : 'danger'}}"
-                ng-model="unit.active"
-                btn-radio="false"
-                uncheckable
-              >
-                <i class="fa fa-times"></i>
-              </label>
-            </div>
-            <span class="help-block">
-              Set to false to hide unit from students and tutors.
-            </span>
-          </div>
-        </div>
-        <!--/active-->
-      </div>
-      <div class="panel-footer text-right">
-        <a class="btn btn-success" ui-sref="units/rollover">
-          <header>Rollover</header>
-        </a>
-        <input
-          type="submit"
-          value="{{ unit.id == -1 ? 'Create' : 'Update' }}"
-          class="btn btn-success"
-        />
-      </div>
-    </form>
-  </div>
-</div>
diff --git a/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.coffee b/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.coffee
deleted file mode 100644
index 9b019bdec3..0000000000
--- a/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.coffee
+++ /dev/null
@@ -1,89 +0,0 @@
-angular.module('doubtfire.units.states.edit.directives.unit-group-set-editor', [])
-
-#
-# Editor for editing a unit's group sets. Can also add new groups to
-# newly created group sets and then and add new members to those groups.
-#
-.directive('unitGroupSetEditor', ->
-  restrict: 'E'
-  templateUrl: 'units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.tpl.html'
-  replace: true
-  controller: ($scope, newGroupSetService, gradeService, alertService, CsvResultModal, fileDownloaderService) ->
-
-    $scope.addGroupSet = ->
-      groupSet = newGroupSetService.createInstanceFrom({}, $scope.unit)
-
-      gsCount = $scope.unit.groupSets.length
-      groupSet.name = if gsCount == 0 then "Group Work" else "Group Work Set #{gsCount + 1}"
-
-      newGroupSetService.store(groupSet, {cache: $scope.unit.groupSetsCache}).subscribe({
-        next: (gs) ->
-          alertService.success( "Group set created.", 2000)
-        error: (message) ->
-          alertService.error( "Failed to create group set. #{message}", 6000)
-      })
-
-    $scope.saveGroupSet = (data, groupSet) ->
-      groupSet.name = data.name
-      groupSet.allowStudentsToCreateGroups = data.allowStudentsToCreateGroups
-      groupSet.allowStudentsToManageGroups = data.allowStudentsToManageGroups
-      groupSet.keepGroupsInSameClass = data.keepGroupsInSameClass
-      groupSet.capacity = data.capacity
-
-      newGroupSetService.update(groupSet).subscribe({
-        next: (response) -> alertService.success( "Group set updated.", 2000)
-        error: (message) -> alertService.error( "Failed to update group set. #{message}", 6000)
-      })
-
-    $scope.toggleLocked = (gs) ->
-      gs.locked = !gs.locked
-      newGroupSetService.update(gs).subscribe({
-        next: (response) ->
-          alertService.success( "#{if response.locked then 'Locked' else 'Unlocked'} #{gs.name}", 2000)
-        error: (message) ->
-          alertService.error( "Failed to #{if gs.locked then 'unlock' else 'lock'} #{gs.name}. #{message}", 6000)
-      })
-
-    $scope.removeGroupSet = (gs) ->
-      newGroupSetService.delete(gs, {cache: $scope.unit.groupSetsCache}).subscribe({
-        next: (response) ->
-          if gs is $scope.selectedGroupSet
-            $scope.selectGroupSet($scope.unit.groupSets[0])
-          alertService.success( "Group set deleted.", 2000)
-        error: (message) -> alertService.error( "Failed to delete group set. #{message}", 6000)
-      })
-
-    $scope.selectGroupSet = (gs) ->
-      $scope.selectedGroupSet = gs
-      # Notify children of updates
-      $scope.$broadcast 'UnitGroupSetEditor/SelectedGroupSetChanged', { id: gs?.id }
-
-    $scope.studentStaffOptions = [
-      { value: true, text: "Staff and Students" }
-      { value: false, text: "Staff Only" }
-    ]
-
-    $scope.tutorialOptions = [
-      { value: true, text: "Same Tutorial" }
-      { value: false, text: "Any Tutorial" }
-    ]
-
-    if $scope.unit.groupSets.length > 0
-      $scope.selectGroupSet($scope.unit.groupSets[0])
-
-    $scope.csvImportResponse = {}
-    $scope.groupCSV = { file: { name: 'Group CSV', type: 'csv'  } }
-    $scope.groupCSVUploadUrl = -> $scope.selectedGroupSet.groupCSVUploadUrl()
-    $scope.groupStudentCSVUploadUrl = -> $scope.selectedGroupSet.groupStudentCSVUploadUrl()
-    $scope.isGroupCSVUploading = null
-    $scope.onGroupCSVSuccess = (response) ->
-      CsvResultModal.show 'Group CSV upload results.', response
-      $scope.selectGroupSet($scope.selectedGroupSet)
-    $scope.onGroupCSVComplete = ->
-      $scope.isGroupCSVUploading = null
-
-    $scope.downloadGroupCSV = ->
-      fileDownloaderService.downloadFile($scope.selectedGroupSet.groupCSVUploadUrl(), "#{$scope.unit.code}-group-sets.csv")
-    $scope.downloadGroupStudentCSV = ->
-      fileDownloaderService.downloadFile($scope.selectedGroupSet.groupStudentCSVUploadUrl(), "#{$scope.unit.code}-#{$scope.selectedGroupSet.name}-students.csv")
-)
diff --git a/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.html b/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.html
new file mode 100644
index 0000000000..4bdc0d0ce9
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.html
@@ -0,0 +1,287 @@
+@if (unit) {
+  <div>
+    <mat-card appearance="outlined">
+      <mat-card-header>
+        <mat-card-title>Group Sets</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <p>
+          A group set is a set of related group-work. A unit can have multiple group sets for
+          various kinds of group work which has multiple teams.
+          <button color="primary" mat-button (click)="showHelp = true">
+            Read more about group sets
+          </button>
+        </p>
+
+        @if (showHelp) {
+          <div class="callout callout-info">
+            <button
+              aria-label="Close help"
+              class="float-right"
+              mat-icon-button
+              (click)="showHelp = false"
+            >
+              <mat-icon>close</mat-icon>
+            </button>
+            <h4>About Group Sets</h4>
+            <p>
+              Once a group set has been created, you may wish to restrict certain permissions such
+              as creating and managing groups to staff only, instead of staff and students.
+            </p>
+            <p>
+              You may also decide that groups can only be restricted to students in the same
+              tutorial, otherwise students for a given group can be from any tutorial.
+            </p>
+            <p>Click Edit to modify these details.</p>
+          </div>
+        }
+
+        @if (unit.groupSets.length === 0) {
+          <div class="callout callout-primary">
+            <h4>No Group Sets Created</h4>
+            <p>This unit has no group sets. Click New Group Set below to create one.</p>
+          </div>
+        } @else {
+          <table mat-table [dataSource]="unit.groupSets">
+            <ng-container matColumnDef="name">
+              <th *matHeaderCellDef mat-header-cell>Name</th>
+              <td *matCellDef="let groupSet" mat-cell (click)="selectGroupSet(groupSet)">
+                @if (editingGroupSetId === groupSet.id && editingGroupSetModel) {
+                  <mat-form-field appearance="outline" class="w-full">
+                    <input matInput required [(ngModel)]="editingGroupSetModel.name" />
+                  </mat-form-field>
+                } @else {
+                  {{ groupSet.name || 'No Name Set' }}
+                }
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="capacity">
+              <th *matHeaderCellDef mat-header-cell>Capacity</th>
+              <td *matCellDef="let groupSet" mat-cell (click)="selectGroupSet(groupSet)">
+                @if (editingGroupSetId === groupSet.id && editingGroupSetModel) {
+                  <mat-form-field appearance="outline" class="w-full">
+                    <input
+                      matInput
+                      min="2"
+                      type="number"
+                      [(ngModel)]="editingGroupSetModel.capacity"
+                    />
+                  </mat-form-field>
+                } @else {
+                  {{ groupSet.capacity || 'Unlimited' }}
+                }
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="createGroups">
+              <th *matHeaderCellDef mat-header-cell>Create Groups</th>
+              <td *matCellDef="let groupSet" mat-cell (click)="selectGroupSet(groupSet)">
+                @if (editingGroupSetId === groupSet.id && editingGroupSetModel) {
+                  <mat-form-field appearance="outline" class="w-full">
+                    <mat-select [(ngModel)]="editingGroupSetModel.allowStudentsToCreateGroups">
+                      @for (opt of studentStaffOptions; track opt.value) {
+                        <mat-option [value]="opt.value">{{ opt.text }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                } @else {
+                  {{ groupSet.allowStudentsToCreateGroups ? 'Staff and Students' : 'Staff Only' }}
+                }
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="manageGroups">
+              <th *matHeaderCellDef mat-header-cell>Manage Groups</th>
+              <td *matCellDef="let groupSet" mat-cell (click)="selectGroupSet(groupSet)">
+                @if (editingGroupSetId === groupSet.id && editingGroupSetModel) {
+                  <mat-form-field appearance="outline" class="w-full">
+                    <mat-select [(ngModel)]="editingGroupSetModel.allowStudentsToManageGroups">
+                      @for (opt of studentStaffOptions; track opt.value) {
+                        <mat-option [value]="opt.value">{{ opt.text }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                } @else {
+                  {{ groupSet.allowStudentsToManageGroups ? 'Staff and Students' : 'Staff Only' }}
+                }
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="restrictTutorials">
+              <th *matHeaderCellDef mat-header-cell>Restrict to Tutorials</th>
+              <td *matCellDef="let groupSet" mat-cell (click)="selectGroupSet(groupSet)">
+                @if (editingGroupSetId === groupSet.id && editingGroupSetModel) {
+                  <mat-form-field appearance="outline" class="w-full">
+                    <mat-select [(ngModel)]="editingGroupSetModel.keepGroupsInSameClass">
+                      @for (opt of tutorialOptions; track opt.value) {
+                        <mat-option [value]="opt.value">{{ opt.text }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                } @else {
+                  {{ groupSet.keepGroupsInSameClass ? 'Same Tutorial' : 'Any Tutorial' }}
+                }
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+              <th *matHeaderCellDef mat-header-cell>Actions</th>
+              <td *matCellDef="let groupSet" mat-cell>
+                <div class="flex gap-1">
+                  @if (editingGroupSetId === groupSet.id) {
+                    <button color="primary" mat-button (click)="saveGroupSet(groupSet)">
+                      <mat-icon>save</mat-icon>
+                      Save
+                    </button>
+                    <button mat-button (click)="cancelEditGroupSet()">
+                      <mat-icon>close</mat-icon>
+                      Cancel
+                    </button>
+                  } @else {
+                    <button mat-button (click)="startEditGroupSet(groupSet)">
+                      <mat-icon>edit</mat-icon>
+                      Edit
+                    </button>
+                    <button
+                      mat-button
+                      [color]="groupSet.locked ? 'accent' : 'primary'"
+                      (click)="toggleLocked(groupSet)"
+                    >
+                      <mat-icon>{{ groupSet.locked ? 'lock' : 'lock_open' }}</mat-icon>
+                      {{ groupSet.locked ? 'Unlock' : 'Lock' }}
+                    </button>
+                    <button color="warn" mat-button (click)="removeGroupSet(groupSet)">
+                      <mat-icon>delete</mat-icon>
+                      Delete
+                    </button>
+                  }
+                </div>
+              </td>
+            </ng-container>
+
+            <tr
+              *matHeaderRowDef="[
+                'name',
+                'capacity',
+                'createGroups',
+                'manageGroups',
+                'restrictTutorials',
+                'actions',
+              ]"
+              mat-header-row
+            ></tr>
+            <tr
+              *matRowDef="
+                let row;
+                columns: [
+                  'name',
+                  'capacity',
+                  'createGroups',
+                  'manageGroups',
+                  'restrictTutorials',
+                  'actions',
+                ]
+              "
+              mat-row
+              [class.bg-blue-50]="row === selectedGroupSet"
+            ></tr>
+          </table>
+        }
+      </mat-card-content>
+      <mat-card-actions align="end">
+        <button color="primary" mat-raised-button (click)="addGroupSet()">
+          <mat-icon>groups</mat-icon>
+          New Group Set
+        </button>
+      </mat-card-actions>
+    </mat-card>
+
+    @if (selectedGroupSet && unit.groupSets.length > 0) {
+      <div class="mt-3">
+        <f-group-set-manager
+          [selectedGroupSet]="selectedGroupSet"
+          [showGroupSetSelector]="false"
+          [unit]="unit"
+          [unitRole]="unitRole"
+        >
+        </f-group-set-manager>
+      </div>
+
+      <div class="mt-3 grid gap-3 md:grid-cols-2">
+        <mat-card appearance="outlined">
+          <mat-card-header>
+            <mat-card-title>Import Groups for {{ selectedGroupSet.name }}</mat-card-title>
+          </mat-card-header>
+          <mat-card-content>
+            <p>
+              Import groups into the group set named
+              <strong>{{ selectedGroupSet.name }}</strong> with a CSV containing the following
+              column headings:
+            </p>
+            <ul>
+              <li><code>group_name</code> for the indicated group's name</li>
+              <li><code>tutorial</code> the group's tutorial</li>
+              <li><code>campus</code> the tutorial's campus (if the tutorial is new)</li>
+              <li><code>capacity_adjustment</code> any adjustment made to the group's capacity</li>
+            </ul>
+          </mat-card-content>
+          <mat-card-actions>
+            <button mat-button (click)="downloadGroupCSV()">
+              <mat-icon>download</mat-icon>
+              Download CSV
+            </button>
+          </mat-card-actions>
+          <mat-card-footer class="px-2.5 pb-2.5">
+            <f-file-uploader
+              [asButton]="true"
+              [files]="groupCSV"
+              [isUploading]="isGroupCSVUploading"
+              [onComplete]="onGroupCSVComplete.bind(this)"
+              [onSuccess]="onGroupCSVSuccess.bind(this)"
+              [url]="groupCSVUploadUrl()"
+            >
+            </f-file-uploader>
+          </mat-card-footer>
+        </mat-card>
+
+        <mat-card appearance="outlined">
+          <mat-card-header>
+            <mat-card-title
+              >Import Students into Groups for {{ selectedGroupSet.name }}</mat-card-title
+            >
+          </mat-card-header>
+          <mat-card-content>
+            <p>
+              Import students into groups for <strong>{{ selectedGroupSet.name }}</strong
+              >. Data is listed under the following column headings:
+            </p>
+            <ul>
+              <li><code>group_name</code> for the indicated group's name</li>
+              <li><code>group_number</code> for the indicated group's number</li>
+              <li><code>username</code> for the student's username</li>
+              <li><code>tutorial</code> for the student's tutorial</li>
+            </ul>
+          </mat-card-content>
+          <mat-card-actions>
+            <button mat-button (click)="downloadGroupStudentCSV()">
+              <mat-icon>download</mat-icon>
+              Download CSV
+            </button>
+          </mat-card-actions>
+          <mat-card-footer class="px-2.5 pb-2.5">
+            <f-file-uploader
+              [asButton]="true"
+              [files]="groupCSV"
+              [isUploading]="isGroupCSVUploading"
+              [onComplete]="onGroupCSVComplete.bind(this)"
+              [onSuccess]="onGroupCSVSuccess.bind(this)"
+              [url]="groupStudentCSVUploadUrl()"
+            >
+            </f-file-uploader>
+          </mat-card-footer>
+        </mat-card>
+      </div>
+    }
+  </div>
+}
diff --git a/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.scss b/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.ts b/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.ts
new file mode 100644
index 0000000000..737b86d08a
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.component.ts
@@ -0,0 +1,204 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {GroupSet, Unit, UnitRole} from 'src/app/api/models/doubtfire-model';
+import {GroupSetService} from 'src/app/api/services/group-set.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {
+  CsvResult,
+  CsvResultModalService,
+} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+interface GroupSetEditModel {
+  name: string;
+  capacity: number | null;
+  allowStudentsToCreateGroups: boolean;
+  allowStudentsToManageGroups: boolean;
+  keepGroupsInSameClass: boolean;
+}
+
+@Component({
+  selector: 'f-unit-group-set-editor',
+  templateUrl: './unit-group-set-editor.component.html',
+  styleUrls: ['./unit-group-set-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitGroupSetEditorComponent implements OnInit {
+  @Input() unit: Unit;
+  @Input() unitRole: UnitRole;
+
+  public selectedGroupSet: GroupSet | null = null;
+  public showHelp = false;
+  public isGroupCSVUploading: boolean | null = null;
+
+  // Keep `file` key to preserve backend form field name used in legacy implementation.
+  public groupCSV = {
+    file: {name: 'Group CSV', type: 'csv'},
+  };
+
+  public editingGroupSetId: number | null = null;
+  public editingGroupSetModel: GroupSetEditModel | null = null;
+
+  public studentStaffOptions = [
+    {value: true, text: 'Staff and Students'},
+    {value: false, text: 'Staff Only'},
+  ];
+
+  public tutorialOptions = [
+    {value: true, text: 'Same Tutorial'},
+    {value: false, text: 'Any Tutorial'},
+  ];
+
+  constructor(
+    private groupSetService: GroupSetService,
+    private alertService: AlertService,
+    private fileDownloaderService: FileDownloaderService,
+    private csvResultModal: CsvResultModalService,
+    private confirmationModal: ConfirmationModalService,
+  ) {}
+
+  ngOnInit(): void {
+    if (this.unit?.groupSets?.length > 0) {
+      this.selectGroupSet(this.unit.groupSets[0]);
+    }
+  }
+
+  addGroupSet(): void {
+    const groupSet = this.groupSetService.createInstanceFrom({}, this.unit);
+    const gsCount = this.unit.groupSets.length;
+    groupSet.name = gsCount === 0 ? 'Group Work' : `Group Work Set ${gsCount + 1}`;
+
+    this.groupSetService.store(groupSet, {cache: this.unit.groupSetsCache}).subscribe({
+      next: (createdGroupSet) => {
+        this.alertService.success('Group set created.', 2000);
+        this.selectGroupSet(createdGroupSet ?? groupSet);
+      },
+      error: (message) => this.alertService.error(`Failed to create group set. ${message}`, 6000),
+    });
+  }
+
+  startEditGroupSet(groupSet: GroupSet): void {
+    this.editingGroupSetId = groupSet.id;
+    this.editingGroupSetModel = {
+      name: groupSet.name,
+      allowStudentsToCreateGroups: !!groupSet.allowStudentsToCreateGroups,
+      allowStudentsToManageGroups: !!groupSet.allowStudentsToManageGroups,
+      keepGroupsInSameClass: !!groupSet.keepGroupsInSameClass,
+      capacity: groupSet.capacity ?? null,
+    };
+  }
+
+  cancelEditGroupSet(): void {
+    this.editingGroupSetId = null;
+    this.editingGroupSetModel = null;
+  }
+
+  saveGroupSet(groupSet: GroupSet): void {
+    if (!this.editingGroupSetModel) {
+      return;
+    }
+
+    groupSet.name = this.editingGroupSetModel.name;
+    groupSet.allowStudentsToCreateGroups = this.editingGroupSetModel.allowStudentsToCreateGroups;
+    groupSet.allowStudentsToManageGroups = this.editingGroupSetModel.allowStudentsToManageGroups;
+    groupSet.keepGroupsInSameClass = this.editingGroupSetModel.keepGroupsInSameClass;
+    groupSet.capacity = this.editingGroupSetModel.capacity;
+
+    this.groupSetService.update(groupSet).subscribe({
+      next: () => {
+        this.alertService.success('Group set updated.', 2000);
+        this.cancelEditGroupSet();
+      },
+      error: (message) => this.alertService.error(`Failed to update group set. ${message}`, 6000),
+    });
+  }
+
+  toggleLocked(groupSet: GroupSet): void {
+    const originalLockedState = groupSet.locked;
+    groupSet.locked = !groupSet.locked;
+
+    this.groupSetService.update(groupSet).subscribe({
+      next: (response) => {
+        this.alertService.success(
+          `${response.locked ? 'Locked' : 'Unlocked'} ${groupSet.name}`,
+          2000,
+        );
+      },
+      error: (message) => {
+        groupSet.locked = originalLockedState;
+        this.alertService.error(
+          `Failed to ${groupSet.locked ? 'unlock' : 'lock'} ${groupSet.name}. ${message}`,
+          6000,
+        );
+      },
+    });
+  }
+
+  removeGroupSet(groupSet: GroupSet): void {
+    this.confirmationModal.show(
+      `Delete ${groupSet.name}`,
+      'This deletes every group in this set and removes all student memberships. This cannot be undone.',
+      () => {
+        this.groupSetService.delete(groupSet, {cache: this.unit.groupSetsCache}).subscribe({
+          next: () => {
+            if (groupSet === this.selectedGroupSet) {
+              this.selectGroupSet(this.unit.groupSets[0] ?? null);
+            }
+            this.alertService.success('Group set deleted.', 2000);
+          },
+          error: (message) =>
+            this.alertService.error(`Failed to delete group set. ${message}`, 6000),
+        });
+      },
+      undefined,
+      'Delete',
+    );
+  }
+
+  selectGroupSet(groupSet: GroupSet | null): void {
+    this.selectedGroupSet = groupSet;
+    if (this.editingGroupSetId && groupSet?.id !== this.editingGroupSetId) {
+      this.cancelEditGroupSet();
+    }
+  }
+
+  groupCSVUploadUrl(): string | undefined {
+    return this.selectedGroupSet?.groupCSVUploadUrl();
+  }
+
+  groupStudentCSVUploadUrl(): string | undefined {
+    return this.selectedGroupSet?.groupStudentCSVUploadUrl();
+  }
+
+  onGroupCSVSuccess(response: CsvResult): void {
+    this.csvResultModal.show('Group CSV upload results.', response);
+    this.selectGroupSet(this.selectedGroupSet);
+  }
+
+  onGroupCSVComplete(): void {
+    this.isGroupCSVUploading = null;
+  }
+
+  downloadGroupCSV(): void {
+    if (!this.selectedGroupSet) {
+      return;
+    }
+
+    this.fileDownloaderService.downloadFile(
+      this.selectedGroupSet.groupCSVUploadUrl(),
+      `${this.unit.code}-group-sets.csv`,
+    );
+  }
+
+  downloadGroupStudentCSV(): void {
+    if (!this.selectedGroupSet) {
+      return;
+    }
+
+    this.fileDownloaderService.downloadFile(
+      this.selectedGroupSet.groupStudentCSVUploadUrl(),
+      `${this.unit.code}-${this.selectedGroupSet.name}-students.csv`,
+    );
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.tpl.html b/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.tpl.html
deleted file mode 100644
index db550ef42d..0000000000
--- a/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.tpl.html
+++ /dev/null
@@ -1,207 +0,0 @@
-<div class="unit-group-set-editor row">
-  <div class="col-sm-12">
-    <div class="panel panel-primary">
-      <div class="panel-heading">
-        <h3 class="panel-title">
-          Group Sets
-        </h3>
-      </div><!--/panel-heading-->
-      <div class="panel-body">
-        <p>
-          A group set is a set of related group-work. A unit can have multiple
-          group sets for various kinds of group work which has multiple teams.
-          <a ng-click="showHelp = true"><strong>Read more about group sets</strong></a>.
-        </p><!--/basic-help-->
-        <div ng-show="showHelp" class="callout callout-info">
-          <a class="pull-right" ng-click="showHelp = false">
-            <i class="fa fa-times fa-2x"></i>
-          </a>
-          <h4> About Group Sets </h4>
-          <p>
-            Once a group set has been created, you may wish to restrict certain
-            permissions such as creating and managing groups to staff only, instead
-            of staff and students. If you restrict this to staff only, then tutors
-            and convenors will only be allowed to create groups, and manage them
-            (i.e., assign students to groups). Otherwise, you assume that students
-            will be able to self-manage themselves in that particular group set.
-          </p>
-          <p>
-            You may also decide that groups can only be restricted to students in
-            the same tutorial, otheriwse students for a given group can be from
-            any tutorial.
-          </p>
-          <p>
-            Click the pencil icon to modify these details.
-          </p>
-        </div><!--/extended-help-->
-        <div ng-hide="unit.groupSets.length > 0" class="callout callout-primary">
-          <h4> No Group Sets Created </h4>
-          <p>
-            This unit has no group sets. Click the create group set button below to create one.
-          </p>
-        </div><!--/no-group-sets-created-->
-      </div><!--/panel-body-->
-      <table ng-show="unit.groupSets.length > 0" class="table table-hover table-pointer group-sets">
-        <thead>
-          <tr>
-            <th>
-              <span tooltip="Name of the group set">Name</span>
-            </th>
-            <th>
-              <span tooltip="Capacity for associated groups, empty for unlimited capacity">Capacity</span>
-            </th>
-            <th>
-              <span tooltip="Who can create groups?">Create Groups</span>
-            </th>
-            <th>
-              <span tooltip="Who can manage groups?">Manage Groups</span>
-            </th>
-            <th>
-              <span tooltip="Are groups restricted to tutorials?">Restrict to Tutorials</span>
-            </th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr ng-repeat="gs in unit.groupSets" ng-class="{info: gs == selectedGroupSet}">
-            <td ng-click="selectGroupSet(gs)" class="col-sm-3">
-              <span editable-text="gs.name" e-name="name" e-form="gsRowform" e-required>
-                {{ gs.name || 'No Name Set' }}
-              </span>
-            </td>
-            <td ng-click="selectGroupSet(gs)">
-              <span editable-number="gs.capacity" e-name="capacity" e-form="gsRowform" e-min="2">
-                {{ gs.capacity || 'Unlimited' }}
-              </span>
-            </td>
-            <td ng-click="selectGroupSet(gs)">
-              <span editable-select="gs.allowStudentsToCreateGroups" e-name="allowStudentsToCreateGroups" e-form="gsRowform" e-ng-options="opt.value as opt.text for opt in studentStaffOptions">
-                {{ ( (gs && gs.allowStudentsToCreateGroups) ? 'Staff and Students' : 'Staff Only' ) }}
-              </span>
-            </td>
-            <td ng-click="selectGroupSet(gs)">
-              <span editable-select="gs.allowStudentsToManageGroups" e-name="allowStudentsToManageGroups" e-form="gsRowform" e-ng-options="opt.value as opt.text for opt in studentStaffOptions">
-                {{ ( (gs && gs.allowStudentsToManageGroups) ? 'Staff and Students' : 'Staff Only' ) }}
-              </span>
-            </td>
-            <td ng-click="selectGroupSet(gs)">
-              <span editable-select="gs.keepGroupsInSameClass" e-name="keepGroupsInSameClass" e-form="gsRowform" e-ng-options="opt.value as opt.text for opt in tutorialOptions">
-                {{ ( (gs && gs.keepGroupsInSameClass) ? 'Same Tutorial' : 'Any Tutorial' ) }}
-              </span>
-            </td>
-            <td>
-              <form editable-form name="gsRowform" onbeforesave="saveGroupSet($data, gs)" ng-show="gsRowform.$visible" class="form-buttons form-inline" shown="inserted == gs">
-                <button type="submit" ng-disabled="gsRowform.$waiting" class="btn btn-default btn-sm">
-                  <i class="fa fa-floppy-o"></i> Save
-                </button>
-                <button type="button" ng-disabled="gsRowform.$waiting" ng-click="gsRowform.$cancel()" class="btn btn-default btn-sm">
-                  <i class="fa fa-times"></i> Cancel
-                </button>
-              </form>
-              <div ng-show="!gsRowform.$visible">
-                <button ng-click="gsRowform.$show()" class="btn btn-default btn-sm">
-                  <i class="fa fa-pencil"></i> Edit
-                </button>
-                <a class="btn btn-sm lockButton"
-                  ng-class="{true: 'btn-warning', false: 'btn-info'}[!gs.locked]"
-                  ng-click="toggleLocked(gs)">
-                <i ng-class="{true: 'fa fa-lock', false: 'fa fa-unlock'}[!gs.locked]"></i>
-                  {{!gs.locked && "Lock" || "Unlock"}}
-                </a>
-                <button ng-click="removeGroupSet(gs)" class="btn btn-danger btn-sm">
-                  <i class="fa fa-trash-o"></i> Delete
-                </button>
-              </div>
-              <!--/actions-->
-            </td>
-          </tr>
-        </tbody>
-      </table><!--/group-set-table-->
-      <div class="panel-footer clearfix">
-        <button class="btn pull-right btn-success" ng-click="addGroupSet()">
-          <i class="fa fa-users"></i>
-          <i class="fa fa-plus"></i>
-          New Group Set
-        </button>
-      </div><!--/panel-footer-->
-    </div><!--/panel-->
-  </div><!--/group-sets-->
-  <div class="clearfix">
-    <group-set-manager
-      ng-show="selectedGroupSet && unit.groupSets.length > 0"
-      unit="unit"
-      selected-group-set="selectedGroupSet"
-      show-group-set-selector="false"
-      unit-role="unitRole"
-      class="col-sm-12"></group-set-manager>
-  </div>
-  <div class="file-io col-sm-12" ng-if="selectedGroupSet && unit.groupSets.length > 0">
-    <hr>
-    <div class="panel-row">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h4 class="panel-title">Import Groups for <strong>{{selectedGroupSet.name}}</strong></h4>
-        </div>
-        <div class="panel-body">
-          <p>
-            Import groups into the group set named <strong>{{selectedGroupSet.name}}</strong>
-            with a CSV containing the following column headings:
-          </p>
-          <ul>
-            <li><code>group_name</code> for the indicated group's name,</li>
-            <li><code>tutorial</code> the group's tutorial.</li>
-            <li><code>campus</code> the tutorial's campus (if the tutorial is new), and </li>
-            <li><code>capacity_adjustment</code> any adjustment made to the group's capacity</li>
-          </ul>
-        </div>
-        <div class="panel-footer">
-          <button class="btn btn-success form-control" ng-click="downloadGroupCSV()">
-            <i class="fa fa-download"></i> Download CSV
-          </button>
-          <hr />
-          <file-uploader
-            files="groupCSV"
-            url="groupCSVUploadUrl()"
-            is-uploading="isGroupCSVUploading"
-            on-success="onGroupCSVSuccess"
-            on-complete="onGroupCSVComplete"
-            as-button="true">
-          </file-uploader>
-        </div>
-      </div><!--/import-group-->
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3 class="panel-title">
-            Import Students into Groups for <strong>{{selectedGroupSet.name}}</strong>
-          </h3>
-        </div>
-        <div class="panel-body">
-          <p>
-            Import students into groups for <strong>{{selectedGroupSet.name}}</strong>.
-            Data is listed under the following column headings:
-          </p>
-          <ul>
-            <li><code>group_name</code> for the indicated group's name,</li>
-            <li><code>group_number</code> for the indicated group's number,</li>
-            <li><code>username</code> for the student's username, and </li>
-            <li><code>tutorial</code> for the student's tutorial.</li>
-          </ul>
-        </div>
-        <div class="panel-footer">
-          <button class="btn btn-success form-control" ng-click="downloadGroupStudentCSV()">
-            <i class="fa fa-download"></i> Download CSV
-          </button>
-          <hr />
-          <file-uploader
-            files="groupCSV"
-            url="groupStudentCSVUploadUrl()"
-            is-uploading="isGroupCSVUploading"
-            on-success="onGroupCSVSuccess"
-            on-complete="onGroupCSVComplete"
-            as-button="true">
-          </file-uploader>
-        </div><!--/download-panel-->
-      </div>
-    </div>
-  </div><!--/file-io-->
-</div>
diff --git a/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.coffee b/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.coffee
deleted file mode 100644
index 54209881ac..0000000000
--- a/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.coffee
+++ /dev/null
@@ -1,40 +0,0 @@
-angular.module('doubtfire.units.states.edit.directives.unit-ilo-editor',[])
-
-#
-# Editor for modifying a unit's ILOs
-#
-.directive('unitIloEditor', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.tpl.html'
-  controller: ($scope, $modal, $rootScope, newLearningOutcomeService, alertService, CsvResultModal, UnitILOEditModal, fileDownloaderService) ->
-    $scope.unit.learningOutcomesCache.values.subscribe(
-      (ilos) ->
-        $scope.ilos = ilos
-    )
-
-    $scope.batchFiles = { file: { name: 'CSV Data', type: 'csv'  } }
-    $scope.batchOutcomeUrl = ->
-      $scope.unit.getOutcomeBatchUploadUrl()
-    $scope.onBatchOutcomeSuccess = (response) ->
-      CsvResultModal.show "Outcome CSV Upload Results", response
-      if response.success.length > 0
-        $scope.unit.refresh()
-
-    $scope.editILO = (ilo) ->
-      UnitILOEditModal.show $scope.unit, ilo
-
-    $scope.createILO = ->
-      $scope.editILO()
-
-    $scope.downloadCSV = ->
-      fileDownloaderService.downloadFile($scope.batchOutcomeUrl(), "#{$scope.unit.code}-learning-outcomes.csv")
-
-    $scope.deleteILO = (ilo) ->
-      newLearningOutcomeService.delete({ id: ilo.id, unitId: $scope.unit.id }, {entity: ilo, cache: $scope.unit.learningOutcomesCache}).subscribe({
-        next: (response) ->
-          alertService.success( "ILO #{ilo.id} was deleted successfully", 2000)
-        error: (response) ->
-          alertService.error( "Error: " + response, 6000)
-      })
-)
diff --git a/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.tpl.html b/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.tpl.html
deleted file mode 100644
index 3ce30ff314..0000000000
--- a/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.tpl.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<div class="unit-ilo-editor row">
-  <div class="col-md-9">
-    <div class="panel panel-primary">
-      <div class="panel-heading">
-        <h3 class="panel-title">Edit Intended Learning Outcomes</h3>
-        Add, edit or delete intended learning outcomes for this unit
-      </div>
-      <div class="panel-body">
-        <div class="callout callout-info" ng-hide="ilos.length > 0">
-          This unit has no Intended Learning Outcomes
-        </div>
-        <div ng-show="ilos.length > 0">
-          <div style="overflow: auto; position: relative">
-            <table class="table table-pointer table-hover" style="min-width: 720px">
-              <thead>
-                <tr>
-                  <th>Number</th>
-                  <th>Abbreviation</th>
-                  <th>Name</th>
-                  <th>Description</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr ng-repeat="ilo in ilos | orderBy:'iloNumber'">
-                  <td ng-click="editILO(ilo)">{{ilo.iloNumber}}</td>
-                  <td ng-click="editILO(ilo)">{{ilo.abbreviation}}</td>
-                  <td ng-click="editILO(ilo)">{{ilo.name}}</td>
-                  <td ng-click="editILO(ilo)">{{ilo.description}}</td>
-                  <td>
-                    <button class="btn btn-danger" ng-click="deleteILO(ilo)">
-                      <i class="fa fa-trash-o"></i>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div class="panel-footer clearfix">
-        <button class="btn btn-success pull-right" ng-click="createILO()">
-          <i class="fa fa-graduation-cap"></i>
-          <i class="fa fa-plus"></i> Add Outcome
-        </button>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-3">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h4 class="panel-title">Batch Upload Outcome Definitions</h4>
-        Batch upload learning outcome definitions with a CSV containing: unit_code, iloNumber, abbreviation, name, and
-        description.
-      </div>
-      <div class="panel-body">
-        <file-uploader files="batchFiles" url="batchOutcomeUrl()" on-success="onBatchOutcomeSuccess"></file-uploader>
-      </div>
-      <!--batch-withdraw-->
-      <div class="panel-heading">
-        <h4 class="panel-title">Download Outcomes</h4>
-        Download all outcomes for the unit.
-      </div>
-      <div class="panel-body text-center">
-        <button ng-click="downloadCSV()" class="btn btn-primary btn-download">
-          <i class="fa fa-download"></i> Download
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.component.html b/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.component.html
new file mode 100644
index 0000000000..8240189388
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.component.html
@@ -0,0 +1,22 @@
+<h3 mat-dialog-title>Bulk Import Staff</h3>
+
+<div mat-dialog-content>
+  <p>Paste one staff email per line to add them to this unit as tutors.</p>
+
+  <mat-form-field appearance="outline" class="w-full">
+    <mat-label>Staff emails</mat-label>
+    <textarea
+      matInput
+      placeholder="tutor@example.edu.au&#10;convenor@example.edu.au"
+      rows="10"
+      [(ngModel)]="emailList"
+    ></textarea>
+  </mat-form-field>
+</div>
+
+<div align="end" mat-dialog-actions>
+  <button color="warn" mat-stroked-button (click)="cancel()">Cancel</button>
+  <button color="primary" mat-flat-button [disabled]="!emailList.trim()" (click)="submit()">
+    Import staff
+  </button>
+</div>
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.component.ts b/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.component.ts
new file mode 100644
index 0000000000..0456d484ed
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.component.ts
@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+  selector: 'bulk-import-staff-modal',
+  templateUrl: './bulk-import-staff-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class BulkImportStaffModalComponent {
+  public emailList = '';
+
+  constructor(public dialogRef: MatDialogRef<BulkImportStaffModalComponent, string | undefined>) {}
+
+  public cancel(): void {
+    this.dialogRef.close(undefined);
+  }
+
+  public submit(): void {
+    const trimmedEmails = this.emailList.trim();
+    if (!trimmedEmails) {
+      return;
+    }
+
+    this.dialogRef.close(trimmedEmails);
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.service.ts b/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.service.ts
new file mode 100644
index 0000000000..816a659ad8
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-staff-editor/bulk-import-staff-modal/bulk-import-staff-modal.service.ts
@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {BulkImportStaffModalComponent} from './bulk-import-staff-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BulkImportStaffModalService {
+  constructor(private dialog: MatDialog) {}
+
+  public show(): MatDialogRef<BulkImportStaffModalComponent, string | undefined> {
+    return this.dialog.open<BulkImportStaffModalComponent, undefined, string | undefined>(
+      BulkImportStaffModalComponent,
+      {
+        position: {top: '2.5%'},
+        width: '100%',
+        maxWidth: '700px',
+      },
+    );
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.coffee b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.coffee
deleted file mode 100644
index 3856daefe5..0000000000
--- a/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.coffee
+++ /dev/null
@@ -1,58 +0,0 @@
-angular.module('doubtfire.units.states.edit.directives.unit-staff-editor', [])
-
-#
-# Editor for adding new staff to a unit and assigning those staff
-# members new unit roles within the unit
-#
-.directive('unitStaffEditor', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'units/states/edit/directives/unit-staff-editor/unit-staff-editor.tpl.html'
-  controller: ($scope, $rootScope, alertService, newUnitService, newUnitRoleService) ->
-    temp = []
-    users = []
-
-    $scope.unit.staffCache.values.subscribe( (staff) -> $scope.unitStaff = staff )
-
-    $scope.changeRole = (unitRole, role_id) ->
-      unitRole.roleId = role_id
-      newUnitRoleService.update(unitRole).subscribe({
-        next: (response)  -> alertService.success( "Role changed", 2000)
-        error: (response) -> alertService.error( response, 6000)
-      })
-
-    $scope.changeMainConvenor = (staff) ->
-      $scope.unit.changeMainConvenor(staff).subscribe({
-        next: (response) ->
-          alertService.success( "Main convenor changed", 2000)
-        error: (response) ->
-          alertService.error( response, 6000)
-      })
-
-    $scope.addSelectedStaff = ->
-      staff = $scope.selectedStaff
-      $scope.selectedStaff = null
-      $scope.unit.staff = [] unless $scope.unit.staff
-
-      if staff.id?
-        $scope.unit.addStaff(staff).subscribe({
-          next:  (response) -> alertService.success( "Staff member added", 2000)
-          error: (response) -> alertService.error( response, 6000)
-        })
-      else
-        alertService.error( "Unable to add staff member. Ensure they have a tutor or convenor account in User admin first.", 6000)
-
-    # Used in the typeahead to filter staff already in unit
-    $scope.filterStaff = (staff) ->
-      not _.find($scope.unit.staff, (listStaff) -> staff.id == listStaff.user.id)
-
-    $scope.removeStaff = (staff) ->
-      newUnitRoleService.delete(staff, {cache: $scope.unit.staffCache}).subscribe({
-        next:  (response) -> alertService.success( "Staff member removed", 2000)
-        error: (response) -> alertService.error( response, 6000)
-      })
-
-    $scope.groupSetName = (id) ->
-      $scope.unit.groupSetsCache.get(id)?.name || "Individual Work"
-
-)
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.html b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.html
new file mode 100644
index 0000000000..cabf83d1fe
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.html
@@ -0,0 +1,163 @@
+<div>
+  <div class="header">
+    <h3>Unit Staff</h3>
+    <p>Manage unit staff by adding members and assigning them as convenors or tutors.</p>
+  </div>
+  <table mat-table matSort [dataSource]="dataSource">
+    <ng-container matColumnDef="name">
+      <th *matHeaderCellDef mat-header-cell>Name</th>
+
+      <td *matCellDef="let unitRole" mat-cell>
+        <div class="flex items-center gap-3">
+          <user-icon aria-hidden="true" [size]="30" [user]="unitRole.user"></user-icon
+          >{{ unitRole.user.displayName }}
+        </div>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="role">
+      <th *matHeaderCellDef mat-header-cell>Role</th>
+      <td *matCellDef="let unitRole" mat-cell>
+        <mat-button-toggle-group
+          appearance="legacy"
+          class="my-3"
+          hideSingleSelectionIndicator
+          name="role"
+          [ngModel]="unitRole.role"
+          (change)="onRoleChange(unitRole, $event)"
+        >
+          <mat-button-toggle
+            matTooltip="Tutors deliver unit content"
+            matTooltipPosition="above"
+            matTooltipShowDelay="1000"
+            value="Tutor"
+            >Tutor</mat-button-toggle
+          >
+          <mat-button-toggle
+            matTooltip="Convenors manage the unit"
+            matTooltipPosition="above"
+            matTooltipShowDelay="1000"
+            value="Convenor"
+            >Convenor</mat-button-toggle
+          >
+        </mat-button-toggle-group>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="main-convenor">
+      <th *matHeaderCellDef mat-header-cell>Main Convenor</th>
+      <td *matCellDef="let unitRole" mat-cell>
+        @if (unitRole?.role === 'Convenor') {
+          <button
+            aria-label="Make staff member the Main Convenor"
+            mat-icon-button
+            [disabled]="unitRole.id === unit?.mainConvenor?.id"
+            (click)="changeMainConvenor(unitRole)"
+          >
+            <mat-icon aria-hidden="true">
+              {{ unitRole.id === unit?.mainConvenor?.id ? 'check' : 'close' }}
+            </mat-icon>
+          </button>
+        }
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="observer-only">
+      <th *matHeaderCellDef mat-header-cell>Observer Only</th>
+      <td *matCellDef="let unitRole" mat-cell>
+        <mat-slide-toggle
+          matTooltip="This staff member will have read-only access as an observer"
+          matTooltipPosition="above"
+          matTooltipShowDelay="1000"
+          [checked]="unitRole.observerOnly"
+          [disabled]="unitRole.id === unit?.mainConvenor?.id"
+          (change)="toggleObserverOnly(unitRole)"
+        ></mat-slide-toggle>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="overflow-marking">
+      <th *matHeaderCellDef mat-header-cell>Overflow Marking</th>
+      <td *matCellDef="let unitRole" mat-cell>
+        <mat-slide-toggle
+          matTooltip="This staff member can mark overflow tasks"
+          matTooltipPosition="above"
+          matTooltipShowDelay="1000"
+          [checked]="unitRole.canMarkOverflowTasks"
+          (change)="toggleCanOverflowMark(unitRole)"
+        ></mat-slide-toggle>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="mentor">
+      <th *matHeaderCellDef mat-header-cell>Mentor</th>
+      <td *matCellDef="let unitRole" mat-cell>
+        <mat-select
+          canSelectNullableOptions
+          class="w-full min-w-[140px]"
+          [ngModel]="unitRole.mentorId"
+          (selectionChange)="selectMentor(unitRole, $event)"
+        >
+          <mat-option [value]="null">(None)</mat-option>
+          @for (staffMember of unitStaff; track staffMember) {
+            @if (staffMember.id !== unitRole.id) {
+              <mat-option class="w-full min-w-fit" [value]="staffMember.id">
+                {{ staffMember.user.displayName }}</mat-option
+              >
+            }
+          }
+        </mat-select>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th *matHeaderCellDef mat-header-cell>Actions</th>
+      <td *matCellDef="let unitRole" mat-cell>
+        <div class="flex gap-1">
+          <button
+            mat-icon-button
+            matTooltip="View Moderation Notes"
+            (click)="openTutorNotes(unitRole)"
+          >
+            <mat-icon>local_library</mat-icon>
+          </button>
+          <button color="warn" mat-icon-button (click)="removeStaff(unitRole)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      </td>
+    </ng-container>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  </table>
+  <div class="mt-3 flex flex-col items-center gap-2 md:flex-row md:items-start">
+    <mat-form-field appearance="outline" class="w-full">
+      <input
+        matInput
+        placeholder="Staff Name"
+        [matAutocomplete]="auto"
+        [(ngModel)]="searchTerm"
+        (ngModelChange)="filterStaffList()"
+      />
+      <mat-autocomplete
+        #auto="matAutocomplete"
+        [displayWith]="displayStaffName"
+        (optionSelected)="addSelectedStaff($event.option.value)"
+      >
+        @for (staff of filteredStaff; track staff) {
+          <mat-option [value]="staff">
+            {{ staff.name }}
+          </mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+
+    <button
+      class="mt-[11px] min-w-fit"
+      color="primary"
+      mat-stroked-button
+      type="button"
+      (click)="openBulkImportModal()"
+    >
+      Bulk Import
+    </button>
+  </div>
+</div>
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.spec.ts b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.spec.ts
new file mode 100644
index 0000000000..02a89e653b
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.spec.ts
@@ -0,0 +1,42 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {of} from 'rxjs';
+import {UnitStaffEditorComponent} from './unit-staff-editor.component';
+
+// STAFF-05: the mentor dropdown must clear a mentor to null, not the empty
+// string, so PUT /unit_roles/:id actually resets the numeric mentor_id.
+describe('UnitStaffEditorComponent selectMentor', () => {
+  let component: UnitStaffEditorComponent;
+  let update: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    update = vi.fn(() => of({}));
+    const unitRoleService = {update} as never;
+    const alertService = {success: vi.fn(), error: vi.fn()} as never;
+    component = new UnitStaffEditorComponent(
+      alertService,
+      unitRoleService,
+      {} as never,
+      {} as never,
+      {} as never,
+      {} as never,
+      {} as never,
+    );
+  });
+
+  it('clears the mentor to null when (None) is chosen', () => {
+    const unitRole = {mentorId: 7, role: 'Tutor', roleId: 2};
+
+    component.selectMentor(unitRole as never, {value: null} as never);
+
+    expect(unitRole.mentorId).toBeNull();
+    expect(update).toHaveBeenCalledOnce();
+  });
+
+  it('sets the mentor id when a staff member is chosen', () => {
+    const unitRole = {mentorId: null, role: 'Tutor', roleId: 2};
+
+    component.selectMentor(unitRole as never, {value: 5} as never);
+
+    expect(unitRole.mentorId).toBe(5);
+  });
+});
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.ts b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.ts
new file mode 100644
index 0000000000..756d2be781
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.component.ts
@@ -0,0 +1,423 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {MatButtonToggleChange} from '@angular/material/button-toggle';
+import {MatSelectChange} from '@angular/material/select';
+import {MatTableDataSource} from '@angular/material/table';
+import {Tutorial, User} from 'src/app/api/models/doubtfire-model';
+import {Unit} from 'src/app/api/models/unit';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {UnitRoleService} from 'src/app/api/services/unit-role.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {
+  CsvResult,
+  CsvResultModalService,
+  CsvRow,
+} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {TutorNotesModalService} from 'src/app/common/modals/tutor-notes-modal/tutor-notes-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {BulkImportStaffModalService} from './bulk-import-staff-modal/bulk-import-staff-modal.service';
+
+@Component({
+  selector: 'unit-staff-editor',
+  templateUrl: 'unit-staff-editor.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitStaffEditorComponent implements OnInit {
+  @Input() unit: Unit;
+  @Input() staff: User[];
+
+  temp = [];
+  users = [];
+  unitStaff: UnitRole[];
+  filteredStaff: User[] = []; // Filtered staff members
+  searchTerm: string = ''; // Search term entered by the user
+
+  displayedColumns: string[] = [
+    'name',
+    'role',
+    'main-convenor',
+    'observer-only',
+    'overflow-marking',
+    'mentor',
+    'actions',
+  ];
+  dataSource: MatTableDataSource<UnitRole> = new MatTableDataSource();
+
+  // Inject services here
+  constructor(
+    private alertService: AlertService,
+    private unitRoleService: UnitRoleService,
+    private userService: UserService,
+    private confirmationModalService: ConfirmationModalService,
+    private tutorNotesModal: TutorNotesModalService,
+    private bulkImportStaffModal: BulkImportStaffModalService,
+    private csvResultModal: CsvResultModalService,
+  ) {}
+
+  ngOnInit(): void {
+    // Subscribe to staff cache
+    this.unit.staffCache.values.subscribe((staff: UnitRole[]) => {
+      this.unitStaff = staff;
+      this.dataSource.data = staff;
+    });
+  }
+
+  onRoleChange(unitRole: UnitRole, event: MatButtonToggleChange) {
+    const role = event.value;
+    if (role !== 'Tutor' && role !== 'Convenor') {
+      return;
+    }
+    const roleId = role === 'Tutor' ? 2 : 3; // map however you like
+    this.changeRole(unitRole, roleId, role);
+  }
+  /**
+   * Changes the role of a staff member.
+   *
+   * @param UnitRole unitRole
+   * @param number role_id
+   *
+   * @returns void
+   */
+  changeRole(unitRole: UnitRole, roleId: number, role: string) {
+    const previousRoleId = unitRole.roleId;
+    const previousRole = unitRole.role;
+
+    unitRole.roleId = roleId;
+    unitRole.role = role;
+    this.unitRoleService.update(unitRole).subscribe({
+      next: () => this.alertService.success('Role changed', 2000),
+      error: (response) => {
+        // Revert changes on error
+        unitRole.roleId = previousRoleId;
+        unitRole.role = previousRole;
+        this.alertService.error(response, 6000);
+      },
+    });
+  }
+
+  toggleObserverOnly(unitRole: UnitRole) {
+    const previousValue = unitRole.observerOnly;
+    unitRole.observerOnly = !unitRole.observerOnly;
+    unitRole.roleId = unitRole.role === 'Tutor' ? 2 : 3;
+    this.unitRoleService.update(unitRole).subscribe({
+      next: () => this.alertService.success('Observer status updated', 2000),
+      error: (response) => {
+        // Revert changes on error
+        unitRole.observerOnly = previousValue;
+        this.alertService.error(response, 6000);
+      },
+    });
+  }
+
+  toggleCanOverflowMark(unitRole: UnitRole) {
+    const previousValue = unitRole.canMarkOverflowTasks;
+    unitRole.canMarkOverflowTasks = !unitRole.canMarkOverflowTasks;
+    unitRole.roleId = unitRole.role === 'Tutor' ? 2 : 3;
+    this.unitRoleService.update(unitRole).subscribe({
+      next: () => this.alertService.success('Overflow marking permissions updated', 2000),
+      error: (response) => {
+        // Revert changes on error
+        unitRole.canMarkOverflowTasks = previousValue;
+        this.alertService.error(response, 6000);
+      },
+    });
+  }
+
+  selectMentor(unitRole: UnitRole, event: MatSelectChange) {
+    const previousValue = unitRole.mentorId;
+    unitRole.mentorId = event.value ?? null;
+    unitRole.roleId = unitRole.role === 'Tutor' ? 2 : 3;
+
+    this.unitRoleService.update(unitRole).subscribe({
+      next: () => this.alertService.success('Mentor updated', 2000),
+      error: (response) => {
+        // Revert changes on error
+        unitRole.mentorId = previousValue;
+        this.alertService.error(response, 6000);
+      },
+    });
+  }
+  /**
+   * Changes who the `Main Convenor` of the unit is.
+   *
+   * @param UnitRole staff
+   *
+   * @returns void
+   */
+  changeMainConvenor(staff: UnitRole) {
+    this.confirmationModalService.show(
+      'Set Main Convenor',
+      `Do you want to make ${staff.user.displayName} the main convenor for this unit?`,
+      () => {
+        this.unit.changeMainConvenor(staff).subscribe({
+          next: (_response) => this.alertService.success('Main convenor changed', 2000),
+          error: (response) => this.alertService.error(response, 6000),
+        });
+      },
+    );
+  }
+
+  /**
+   * Adds a staff member to the unit.
+   *
+   * @param User selectedStaff
+   *
+   * @returns void
+   */
+  addSelectedStaff(selectedStaff: User) {
+    if (selectedStaff?.id) {
+      this.unit.addStaff(selectedStaff).subscribe({
+        next: () => {
+          this.alertService.success('Staff member added', 2000);
+          this.searchTerm = ''; // Clear the input field
+          this.filterStaffList(); // Refilter the list
+        },
+        error: (response) => this.alertService.error(response, 6000),
+      });
+    } else {
+      this.alertService.error(
+        'Unable to add staff member. Ensure they have a tutor or convenor account in User admin first',
+      );
+    }
+  }
+
+  openBulkImportModal() {
+    this.bulkImportStaffModal
+      .show()
+      .afterClosed()
+      .subscribe((emailList) => {
+        if (!emailList) {
+          return;
+        }
+
+        this.bulkImportStaffFromEmailList(emailList);
+      });
+  }
+
+  /**
+   * Used in filtering the staff list. The `searchTerm` is bound to the auto-complete input in this class's template.
+   *
+   * @returns void
+   */
+  filterStaffList(): void {
+    // `this.searchTerm` holds the selected staff member object from the dropdown OR the auto-complete input searchTerm (never at the same time).
+    // Thus, check the type here and exit early if string filtering is not needed.
+    if (typeof this.searchTerm !== 'string') {
+      return;
+    }
+    this.filteredStaff = this.staff.filter(
+      (staff) =>
+        staff.matches(this.searchTerm.toLowerCase()) && // Find by name
+        !this.unit.staff.find((listStaff) => staff.id === listStaff.user.id) && // Not already assigned to the unit
+        // Filter out students from the staff search
+        // NOTE: This is a hotfix to an issue where loading the inbox populates this.staff with students...
+        staff.isStaff,
+    );
+  }
+
+  /**
+   * Generates a human-readable name made up of the passed-in staff member's `first` and `last` names.
+   *
+   * @param User staff
+   *
+   * @returns void
+   */
+  displayStaffName(staff: User): string {
+    return staff ? staff.name : '';
+  }
+
+  /**
+   * Removes a staff member from the unit.
+   *
+   * @param UnitRole staff
+   *
+   * @returns void
+   */
+  removeStaff(staff: UnitRole) {
+    const assignedTutorials = this.tutorialsForUnitRole(staff);
+
+    if (assignedTutorials.length > 0) {
+      const targetRole = this.reassignmentTargetFor(staff);
+
+      if (!targetRole) {
+        this.alertService.error(
+          'Unable to reassign tutorials because there is no valid staff member to receive them.',
+          6000,
+        );
+        return;
+      }
+
+      const tutorialList = assignedTutorials.map((tutorial) => tutorial.abbreviation).join(', ');
+
+      this.confirmationModalService.show(
+        'Reassign Tutorials',
+        `You cannot remove ${staff.user.displayName} from the unit as they tutor the following tutorials: ${tutorialList}.`,
+        () => {
+          this.unitRoleService
+            .delete(staff, {
+              cache: this.unit.staffCache,
+              params: {reassign_to_unit_role_id: targetRole.id},
+            })
+            .subscribe({
+              next: () => {
+                assignedTutorials.forEach((tutorial) => {
+                  tutorial.tutor = targetRole.user;
+                });
+                this.alertService.success('Staff member removed and tutorials reassigned', 2000);
+              },
+              error: (response) => this.alertService.error(response, 6000),
+            });
+        },
+        undefined,
+        'Reassign to me',
+        'Cancel',
+      );
+      return;
+    }
+
+    this.confirmationModalService.show(
+      'Remove staff member',
+      `Are you sure you want to remove ${staff.user.displayName} from ${this.unit.code} ${this.unit.name}?`,
+      () => {
+        this.unitRoleService.delete(staff, {cache: this.unit.staffCache}).subscribe({
+          next: () => this.alertService.success('Staff member removed', 2000),
+          error: (response) => this.alertService.error(response, 6000),
+        });
+      },
+    );
+  }
+
+  private tutorialsForUnitRole(unitRole: UnitRole): Tutorial[] {
+    return this.unit.tutorials.filter((tutorial) => tutorial.tutor?.id === unitRole.user.id);
+  }
+
+  private reassignmentTargetFor(unitRole: UnitRole): UnitRole | undefined {
+    const currentUserRole = this.unit.staff.find(
+      (staffRole) =>
+        staffRole.user.id === this.userService.currentUser.id && staffRole.id !== unitRole.id,
+    );
+
+    if (currentUserRole) {
+      return currentUserRole;
+    }
+
+    if (this.unit.mainConvenor?.id && this.unit.mainConvenor.id !== unitRole.id) {
+      return this.unit.mainConvenor;
+    }
+
+    return undefined;
+  }
+
+  groupSetName(id: number) {
+    return this.unit.groupSetsCache.get(id).name || 'Individual Work';
+  }
+
+  openTutorNotes(unitRole: UnitRole) {
+    unitRole.unit = this.unit; // HACK: ensure unit is mapped within the UnitRole
+    this.tutorNotesModal.show(null, unitRole);
+  }
+
+  private bulkImportStaffFromEmailList(emailList: string): void {
+    const parsedEmails = this.parseEmailList(emailList);
+
+    if (parsedEmails.length === 0) {
+      this.alertService.error('Please enter at least one valid email address.', 6000);
+      return;
+    }
+
+    const existingStaffEmails: Set<string> = new Set(
+      this.unit.staff
+        .map((unitRole) => unitRole.user.email?.trim().toLowerCase())
+        .filter((email): email is string => !!email),
+    );
+    const staffByEmail = new Map(
+      this.staff
+        .filter((staff) => staff.isStaff && staff.email)
+        .map((staff) => [staff.email.trim().toLowerCase(), staff] as const),
+    );
+
+    const alreadyAssignedEmails = parsedEmails.filter((email) => existingStaffEmails.has(email));
+    const matchedUsers = parsedEmails
+      .filter((email) => !existingStaffEmails.has(email))
+      .map((email) => staffByEmail.get(email))
+      .filter((staff): staff is User => !!staff);
+    const unmatchedEmails = parsedEmails.filter(
+      (email) => !existingStaffEmails.has(email) && !staffByEmail.has(email),
+    );
+    const ignoredRows = alreadyAssignedEmails.map((email) =>
+      this.csvResultRow(email, 'Staff member is already assigned to this unit'),
+    );
+    const unmatchedRows = unmatchedEmails.map((email) =>
+      this.csvResultRow(email, 'No matching staff user was found'),
+    );
+
+    if (matchedUsers.length === 0) {
+      this.csvResultModal.show(
+        'Bulk staff import results',
+        this.csvResultResponse([], unmatchedRows, ignoredRows),
+      );
+      return;
+    }
+
+    this.addStaffUsersSequentially(matchedUsers, [], [], ({addedEmails, failedEmails}) => {
+      const successRows = addedEmails.map((email) =>
+        this.csvResultRow(email, 'Staff member added'),
+      );
+      const failedRows = failedEmails.map((email) =>
+        this.csvResultRow(email, 'Could not add staff member to this unit'),
+      );
+
+      this.csvResultModal.show(
+        'Bulk staff import results',
+        this.csvResultResponse(successRows, [...unmatchedRows, ...failedRows], ignoredRows),
+      );
+    });
+  }
+
+  private addStaffUsersSequentially(
+    users: User[],
+    addedEmails: string[],
+    failedEmails: string[],
+    onComplete: (result: {addedEmails: string[]; failedEmails: string[]}) => void,
+  ): void {
+    if (users.length === 0) {
+      onComplete({addedEmails, failedEmails});
+      return;
+    }
+
+    const [nextUser, ...remainingUsers] = users;
+
+    this.unit.addStaff(nextUser).subscribe({
+      next: () => {
+        addedEmails.push(nextUser.email);
+        this.addStaffUsersSequentially(remainingUsers, addedEmails, failedEmails, onComplete);
+      },
+      error: () => {
+        failedEmails.push(nextUser.email);
+        this.addStaffUsersSequentially(remainingUsers, addedEmails, failedEmails, onComplete);
+      },
+    });
+  }
+
+  private parseEmailList(emailList: string): string[] {
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    return Array.from(
+      new Set(
+        emailList
+          .split(/\r?\n/)
+          .map((email) => email.trim().toLowerCase())
+          .filter((email) => emailPattern.test(email)),
+      ),
+    );
+  }
+
+  private csvResultRow(row: string, message: string): CsvRow {
+    return {row, message};
+  }
+
+  private csvResultResponse(success: CsvRow[], errors: CsvRow[], ignored: CsvRow[]): CsvResult {
+    return {success, errors, ignored};
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.tpl.html b/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.tpl.html
deleted file mode 100644
index f8b38cecb0..0000000000
--- a/src/app/units/states/edit/directives/unit-staff-editor/unit-staff-editor.tpl.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<div class="unit-staff-editor">
-  <script type="text/ng-template" id="staffAvatar.html">
-    <a>
-      <!-- This is where a user icon can go -->
-      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
-    </a>
-  </script>
-  <div class="panel panel-primary">
-    <div class="panel-heading">
-      <h3 class="panel-title">Modify Unit Staff</h3>
-      Add staff members to the unit, assigning them a convenor or tutor role.
-    </div>
-    <div class="panel-body">
-      <div class="col-sm-12">
-        <div class="callout callout-info" ng-hide="unitStaff.length > 0">This unit has no staff assigned</div>
-        <div ng-show="unitStaff.length > 0">
-          <table class="table table-condensed table-hover">
-            <thead>
-              <tr>
-                <th colspan="2">Name</th>
-                <th>Role</th>
-                <th>Main Convenor</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr ng-repeat="staff in unitStaff">
-                <td style="width: 30px">
-                  <user-icon [size]="30" [user]="staff.user"></user-icon>
-                </td>
-                <td>{{staff.user.name}}</td>
-                <td>
-                  <div class="btn-group">
-                    <label
-                      class="btn btn-default"
-                      tooltip="Tutors deliver unit content."
-                      ng-model="staff.role"
-                      btn-radio="'Tutor'"
-                      ng-click="changeRole(staff,2)"
-                      >Tutor</label
-                    >
-                    <label
-                      class="btn btn-default"
-                      tooltip="Convenors manage the unit."
-                      ng-model="staff.role"
-                      btn-radio="'Convenor'"
-                      ng-click="changeRole(staff,3)"
-                      >Convenor</label
-                    >
-                  </div>
-                </td>
-                <td>
-                  <button
-                    ng-show="staff.role == 'Convenor'"
-                    ng-disabled="staff.id == unit.mainConvenor.id"
-                    type="button"
-                    class="btn btn-default"
-                    ng-model="unit.mainConvenor"
-                    ng-click="changeMainConvenor(staff)"
-                    btn-checkbox
-                  >
-                    <i class="fa fa-{{staff.id == unit.mainConvenor.id ? 'check' : 'times'}}"></i>
-                  </button>
-                </td>
-                <td>
-                  <button class="btn btn-danger" ng-click="removeStaff(staff)">
-                    <i class="fa fa-trash-o"></i>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <div class="panel-footer clearfix">
-      <div class="input-group col-sm-12">
-        <input
-          class="form-control"
-          id="convenors"
-          placeholder="Staff Name"
-          ng-model="selectedStaff"
-          typeahead="staff as staff.name for staff in staff | filter: $viewValue | filter: filterStaff"
-          autocomplete="off"
-          typeahead-editable="false"
-          typeahead-wait-ms="200"
-          typeahead-template-url="staffAvatar.html"
-          typeahead-select-on-exact="true"
-          typeahead-on-select="addSelectedStaff()"
-        />
-
-        <span class="input-group-btn">
-          <button class="btn btn-success pull-right" ng-click="addSelectedStaff()">
-            <i class="fa fa-male"></i>
-            <i class="fa fa-plus"></i> Add Staff
-          </button>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.html b/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.html
index 79237858bf..0be9ed0567 100644
--- a/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.html
+++ b/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.html
@@ -1,4 +1,4 @@
-<mat-form-field floatLabel="never" class="data-entry" appearance="outline">
+<mat-form-field appearance="outline" class="data-entry" floatLabel="auto">
   <mat-select [(value)]="student.campus" (selectionChange)="campusChange($event)">
     <mat-option [value]="null">None</mat-option>
     @for (campus of campuses; track campus) {
diff --git a/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.ts b/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.ts
index 92a80265a2..bb80001e70 100644
--- a/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.ts
+++ b/src/app/units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component.ts
@@ -1,14 +1,16 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
-import { Campus, CampusService, Project, Unit } from 'src/app/api/models/doubtfire-model';
-import { MatSelectChange } from '@angular/material/select';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit} from '@angular/core';
+import {MatSelectChange} from '@angular/material/select';
+import {Campus, CampusService, Project, Unit} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'student-campus-select',
   templateUrl: 'student-campus-select.component.html',
   styleUrls: ['student-campus-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class StudentCampusSelectComponent implements OnInit {
+export class StudentCampusSelectComponent implements OnChanges, OnInit {
   @Input() unit: Unit;
   @Input() student: Project;
   @Input() update: boolean;
@@ -19,7 +21,7 @@ export class StudentCampusSelectComponent implements OnInit {
   constructor(
     private campusService: CampusService,
     private alerts: AlertService,
-  ) { }
+  ) {}
 
   ngOnChanges() {
     this.originalCampus = this.student.campus;
@@ -41,8 +43,8 @@ export class StudentCampusSelectComponent implements OnInit {
         error: (message) => {
           this.student.campus = this.originalCampus;
           this.alerts.error(message, 6000);
-        }
-      })
+        },
+      });
     }
   }
 }
diff --git a/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.html b/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.html
index d135f777e9..ba2377910a 100644
--- a/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.html
+++ b/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.html
@@ -1,4 +1,4 @@
-<mat-form-field floatLabel="never" class="data-entry" appearance="outline">
+<mat-form-field appearance="outline" class="data-entry" floatLabel="auto">
   <mat-select multiple [compareWith]="compareSelection" [value]="student.tutorials">
     @if (tutorialsForStreamAndStudent(student).length > 0) {
       <mat-optgroup label="No stream">
diff --git a/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.ts b/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.ts
index f3c47ba355..452ecd3fa6 100644
--- a/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.ts
+++ b/src/app/units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component.ts
@@ -1,10 +1,12 @@
-import { Component, Input } from '@angular/core';
-import { Project, Tutorial, TutorialStream, Unit } from 'src/app/api/models/doubtfire-model';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Project, Tutorial, TutorialStream, Unit} from 'src/app/api/models/doubtfire-model';
 
 @Component({
   selector: 'student-tutorial-select',
   templateUrl: 'student-tutorial-select.component.html',
   styleUrls: ['student-tutorial-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class StudentTutorialSelectComponent {
   @Input() unit: Unit;
@@ -26,8 +28,12 @@ export class StudentTutorialSelectComponent {
   public tutorialsForStreamAndStudent(student: Project, stream?: TutorialStream) {
     return this.unit.tutorials.filter((tutorial) => {
       const result: boolean =
-        student.campus == null || tutorial.campus == null || student.campus.id === tutorial.campus.id;
-      if (!result) return result;
+        student.campus == null ||
+        tutorial.campus == null ||
+        student.campus.id === tutorial.campus.id;
+      if (!result) {
+        return result;
+      }
       if (tutorial.tutorialStream && stream) {
         return tutorial.tutorialStream.abbreviation === stream.abbreviation;
       } else if (!tutorial.tutorialStream && !stream) {
diff --git a/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html b/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html
index 4797fff33b..9110f1dac4 100644
--- a/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html
+++ b/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html
@@ -8,63 +8,112 @@ <h3>Enrolled Students</h3>
     <div class="filter">
       <mat-form-field appearance="outline">
         <mat-label>Search</mat-label>
-        <input matInput (keyup)="applyFilter($event)" />
+        <input matInput [disabled]="loadingStudents" (keyup)="applyFilter($event)" />
       </mat-form-field>
     </div>
   </div>
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortTableData($event)" class="f-table">
+  @if (loadingStudents) {
+    <div aria-busy="true" aria-label="Loading students" class="overflow-hidden">
+      <div class="flex h-14 items-center gap-6 border-b border-gray-300 px-4">
+        @for (width of ['10%', '12%', '12%', '20%', '10%', '20%', '8%', '8%']; track $index) {
+          <ngx-skeleton-loader
+            [theme]="{width: width, height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+        }
+      </div>
+
+      @for (row of [0, 1, 2, 3, 4, 5, 6, 7]; track row) {
+        <div class="flex h-[72px] items-center gap-6 border-b border-gray-300 px-4">
+          <ngx-skeleton-loader
+            class="w-[10%]"
+            [theme]="{width: '100%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[12%]"
+            [theme]="{width: '100%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[12%]"
+            [theme]="{width: '100%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[20%]"
+            [theme]="{width: '100%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          @for (column of [0, 1, 2, 3]; track column) {
+            <ngx-skeleton-loader
+              class="w-[10%]"
+              [theme]="{width: '100%', height: '25px', 'border-radius': '4px', margin: '0'}"
+            ></ngx-skeleton-loader>
+          }
+        </div>
+      }
+    </div>
+  }
+  <table
+    class=""
+    mat-table
+    matSort
+    [dataSource]="dataSource"
+    [hidden]="loadingStudents"
+    (matSortChange)="sortTableData($event)"
+  >
     <!-- Username Column -->
     <ng-container matColumnDef="username" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Username</th>
-      <td mat-cell *matCellDef="let project">
+      <th *matHeaderCellDef class="bg-white" mat-header-cell mat-sort-header>Username</th>
+      <td *matCellDef="let project" class="bg-white" mat-cell>
         {{ project.student.username }}
       </td>
     </ng-container>
 
     <!-- First name Column -->
-    <ng-container matColumnDef="firstName" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>
-      <td mat-cell *matCellDef="let project">
+    <ng-container matColumnDef="firstName">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>First Name</th>
+      <td *matCellDef="let project" mat-cell>
         {{ project.student.firstName }}
       </td>
     </ng-container>
 
     <!-- Last name Column -->
-    <ng-container matColumnDef="lastName" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
-      <td mat-cell *matCellDef="let project">
+    <ng-container matColumnDef="lastName">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Last Name</th>
+      <td *matCellDef="let project" mat-cell>
         {{ project.student.lastName }}
       </td>
     </ng-container>
 
     <!-- email Column -->
-    <ng-container matColumnDef="email" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
-      <td mat-cell *matCellDef="let project">
+    <ng-container matColumnDef="email">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Email</th>
+      <td *matCellDef="let project" mat-cell>
         {{ project.student.email }}
       </td>
     </ng-container>
 
     <!-- campus Column -->
-    <ng-container matColumnDef="campus" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Campus</th>
-      <td mat-cell *matCellDef="let project" class="pt-4">
-        <student-campus-select [unit]="unit" [student]="project" [update]="true"></student-campus-select>
+    <ng-container matColumnDef="campus">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Campus</th>
+      <td *matCellDef="let project" class="pt-2.5" mat-cell>
+        <student-campus-select
+          [student]="project"
+          [unit]="unit"
+          [update]="true"
+        ></student-campus-select>
       </td>
     </ng-container>
 
     <!-- Tutorial Column -->
-    <ng-container matColumnDef="tutorial" sticky>
-      <th mat-header-cell *matHeaderCellDef>Tutorial</th>
-      <td mat-cell *matCellDef="let project" class="pt-4">
-        <student-tutorial-select [unit]="unit" [student]="project"></student-tutorial-select>
+    <ng-container matColumnDef="tutorial">
+      <th *matHeaderCellDef mat-header-cell>Tutorial</th>
+      <td *matCellDef="let project" class="pt-2.5" mat-cell>
+        <student-tutorial-select [student]="project" [unit]="unit"></student-tutorial-select>
       </td>
     </ng-container>
 
     <!-- Enrolled Column -->
-    <ng-container matColumnDef="enrolled" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Enrolled</th>
-      <td mat-cell *matCellDef="let project">
+    <ng-container matColumnDef="enrolled">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Enrolled</th>
+      <td *matCellDef="let project" mat-cell>
         <mat-checkbox
           color="primary"
           [(ngModel)]="project.enrolled"
@@ -74,40 +123,51 @@ <h3>Enrolled Students</h3>
     </ng-container>
 
     <!-- Goto Column -->
-    <ng-container matColumnDef="goto" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
-      <td mat-cell *matCellDef="let project">
-        <button mat-button target="_blank" (click)="gotoStudent(project)">
-          <i class="fa fa-share"></i>
-        </button>
+    <ng-container matColumnDef="goto">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header></th>
+      <td *matCellDef="let project" mat-cell>
+        <div class="flex flex-row">
+          <button mat-icon-button (click)="updateSpecCon(project)">
+            <mat-icon>edit</mat-icon>
+          </button>
+
+          <button mat-icon-button (click)="gotoStudent(project)">
+            <mat-icon>chevron_right</mat-icon>
+          </button>
+        </div>
       </td>
     </ng-container>
 
     <!-- Disclaimer column -->
     <ng-container matColumnDef="actions">
-      <td mat-footer-cell *matFooterCellDef [colSpan]="columns.length">
+      <td *matFooterCellDef mat-footer-cell [colSpan]="columns.length">
         <mat-toolbar>
           <mat-toolbar-row>
-            <button mat-button target="_blank" (click)="enrolStudent()"><i class="fa fa-user"></i> Enrol</button>
+            <button mat-button target="_blank" (click)="enrolStudent()">
+              <mat-icon inline>person</mat-icon> Enrol
+            </button>
             <span class="spacer"></span>
             <button mat-button target="_blank" (click)="downloadEnrolments()">
-              <i class="fa fa-download"></i> Download
+              <mat-icon inline>download</mat-icon> Download
             </button>
             <button mat-button target="_blank" (click)="uploadEnrolments()">
-              <i class="fa fa-upload"></i> Batch Enrol
+              <mat-icon inline>upload</mat-icon> Batch Enrol
             </button>
             <button mat-button target="_blank" (click)="uploadWithdrawals()">
-              <i class="fa fa-upload"></i> Batch Withdraw
+              <mat-icon inline>upload</mat-icon> Batch Withdraw
             </button>
             <span class="spacer"></span>
-            <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+            <mat-paginator
+              class="mat-elevation-z0"
+              [pageSizeOptions]="[5, 10, 25, 100]"
+            ></mat-paginator>
           </mat-toolbar-row>
         </mat-toolbar>
       </td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="columns"></tr>
-    <tr mat-row *matRowDef="let row; columns: columns" class="table-row"></tr>
-    <tr mat-footer-row *matFooterRowDef="['actions']"></tr>
+    <tr *matHeaderRowDef="columns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: columns" class="table-row" mat-row></tr>
+    <tr *matFooterRowDef="['actions']" mat-footer-row></tr>
   </table>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.ts b/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.ts
index f29d36c605..3643756f6d 100644
--- a/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.ts
+++ b/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.ts
@@ -1,67 +1,93 @@
+import {HttpClient} from '@angular/common/http';
 import {
-  csvUploadModalService,
-  csvResultModalService,
-  unitStudentEnrolmentModal,
-} from './../../../../../ajs-upgraded-providers';
-import { ViewChild, Component, Input, Inject, AfterViewInit, OnDestroy } from '@angular/core';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { MatSort, Sort } from '@angular/material/sort';
-import { MatPaginator } from '@angular/material/paginator';
-import { HttpClient } from '@angular/common/http';
-import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service';
-import { Project, ProjectService, Unit } from 'src/app/api/models/doubtfire-model';
-import { UIRouter } from '@uirouter/angular';
-import { Subscription } from 'rxjs';
-import { AlertService } from 'src/app/common/services/alert.service';
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {Router} from '@angular/router';
+import {Subscription, finalize, timer} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
+import {Project, ProjectService, Unit} from 'src/app/api/models/doubtfire-model';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {
+  CsvResult,
+  CsvResultModalService,
+} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalService} from 'src/app/common/modals/csv-upload-modal/csv-upload-modal.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {SpecConModalService} from 'src/app/common/modals/spec-con-modal/spec-con-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {UnitStudentEnrolmentModalService} from 'src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service';
 
 @Component({
   selector: 'unit-students-editor',
   templateUrl: 'unit-students-editor.component.html',
   styleUrls: ['unit-students-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class UnitStudentsEditorComponent implements AfterViewInit, OnDestroy {
-  @ViewChild(MatTable, { static: false }) table: MatTable<Project>;
-  @ViewChild(MatSort, { static: false }) sort: MatSort;
-  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+export class UnitStudentsEditorComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(MatTable, {static: false}) table: MatTable<Project>;
+  @ViewChild(MatSort, {static: false}) sort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
 
   @Input() unit: Unit;
 
   private subscriptions: Subscription[] = [];
 
-  columns: string[] = ['username', 'firstName', 'lastName', 'email', 'campus', 'tutorial', 'enrolled', 'goto'];
-  dataSource: MatTableDataSource<Project>;
+  columns: string[] = [
+    'username',
+    'firstName',
+    'lastName',
+    'email',
+    'campus',
+    'tutorial',
+    'enrolled',
+    'goto',
+  ];
+  dataSource: MatTableDataSource<Project> = new MatTableDataSource([]);
+  loadingStudents = true;
 
   // Calls the parent's constructor, passing in an object
   // that maps all of the form controls that this form consists of.
   constructor(
     private httpClient: HttpClient,
-    @Inject(unitStudentEnrolmentModal) private enrolModal: any,
+    private enrolModal: UnitStudentEnrolmentModalService,
     private alerts: AlertService,
-    @Inject(csvUploadModalService) private csvUploadModal: any,
-    @Inject(csvResultModalService) private csvResultModal: any,
+    private csvUploadModal: CsvUploadModalService,
+    private csvResultModal: CsvResultModalService,
     private fileDownloader: FileDownloaderService,
-    private router: UIRouter,
-    private projectService: ProjectService
+    private router: Router,
+    private projectService: ProjectService,
+    private specConModalService: SpecConModalService,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
   ) {}
 
-  // The paginator is inside the table
-  ngAfterViewInit() {
-    this.dataSource = new MatTableDataSource(this.unit.studentCache.currentValuesClone());
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-    this.dataSource.filterPredicate = (data: any, filter: string) => data.matches(filter);
+  ngOnInit(): void {
+    this.dataSource.data = this.unit.studentCache.currentValuesClone();
+    this.dataSource.filterPredicate = (data: Project, filter: string) => data.matches(filter);
 
     this.subscriptions.push(
       this.unit.studentCache.values.subscribe((students) => {
         this.dataSource.data = students;
-      })
+      }),
     );
 
-    this.subscriptions.push(
-      this.projectService.loadStudents(this.unit, true).subscribe(() => {
-        // projects included in unit...
-      })
-    );
+    this.refreshStudentsAfterRender();
+  }
+
+  // The paginator is inside the table
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
   }
 
   ngOnDestroy(): void {
@@ -76,7 +102,25 @@ export class UnitStudentsEditorComponent implements AfterViewInit, OnDestroy {
     }
   }
 
+  private refreshStudentsAfterRender(): void {
+    this.subscriptions.push(
+      timer(0)
+        .pipe(
+          switchMap(() => this.projectService.loadStudents(this.unit, false, true)),
+          finalize(() => {
+            this.loadingStudents = false;
+          }),
+        )
+        .subscribe(() => {
+          // projects included in unit...
+        }),
+    );
+  }
+
   private sortCompare(aValue: number | string, bValue: number | string, isAsc: boolean) {
+    if (aValue === bValue) {
+      return 0;
+    }
     return (aValue < bValue ? -1 : 1) * (isAsc ? 1 : -1);
   }
 
@@ -90,11 +134,15 @@ export class UnitStudentsEditorComponent implements AfterViewInit, OnDestroy {
       const isAsc = sort.direction === 'asc';
       switch (sort.active) {
         case 'username':
+          return this.sortCompare(a.student.username, b.student.username, isAsc);
         case 'firstName':
+          return this.sortCompare(a.student.firstName, b.student.firstName, isAsc);
         case 'lastName':
+          return this.sortCompare(a.student.lastName, b.student.lastName, isAsc);
         case 'email':
+          return this.sortCompare(a.student.email, b.student.email, isAsc);
         case 'enrolled':
-          return this.sortCompare(a[sort.active], b[sort.active], isAsc);
+          return this.sortCompare(Number(a.enrolled), Number(b.enrolled), isAsc);
         case 'campus':
           return this.sortCompare(a.campus?.abbreviation, b.campus?.abbreviation, isAsc);
         default:
@@ -104,7 +152,7 @@ export class UnitStudentsEditorComponent implements AfterViewInit, OnDestroy {
   }
 
   public gotoStudent(student: Project) {
-    this.router.stateService.go('projects/dashboard', { projectId: student.id, tutor: true, taskAbbr: '' });
+    this.router.navigate(['/projects', student.id, 'dashboard'], {queryParams: {tutor: true}});
   }
 
   enrolStudent() {
@@ -114,32 +162,45 @@ export class UnitStudentsEditorComponent implements AfterViewInit, OnDestroy {
   uploadEnrolments() {
     this.csvUploadModal.show(
       'Upload Students to Enrol',
-      'Test message',
-      { file: { name: 'Enrol CSV Data', type: 'csv' } },
+      'Upload a CSV to enrol students.',
+      {file: {name: 'Enrol CSV Data', type: 'csv'}},
       this.unit.enrolStudentsCSVUrl,
-      (response: any) => {
-        // at least one student?
-        this.csvResultModal.show('Enrol Student CSV Results', response);
-        if (response.success.length > 0) {
-          this.unit.refreshStudents(true);
+      (response: SidekiqJob) => {
+        if (!response || !response.id) {
+          return this.alerts.error('Failed to start student import job', 6000);
         }
-      }
+        this.sidekiqProgressModalService
+          .show(`Importing Students: ${this.unit.code}`, response.id)
+          .subscribe({
+            next: (job) => {
+              const result = JSON.parse(job.result);
+              this.csvResultModal.show('Enrol Student CSV Results', result);
+              // at least one student?
+              if (result.success.length > 0) {
+                this.unit.refreshStudents(true);
+              }
+            },
+            error: (error) => {
+              console.error(error);
+            },
+          });
+      },
     );
   }
 
   uploadWithdrawals() {
     this.csvUploadModal.show(
       'Upload Students to Withdraw',
-      'Test message',
-      { file: { name: 'Withdraw CSV Data', type: 'csv' } },
+      'Upload a CSV to withdraw students.',
+      {file: {name: 'Withdraw CSV Data', type: 'csv'}},
       this.unit.withdrawStudentsCSVUrl,
-      (response: any) => {
+      (response: CsvResult) => {
         // at least one student?
         this.csvResultModal.show('Withdraw Student CSV Results', response);
         if (response.success.length > 0) {
           this.unit.refreshStudents(true);
         }
-      }
+      },
     );
   }
 
@@ -148,4 +209,8 @@ export class UnitStudentsEditorComponent implements AfterViewInit, OnDestroy {
 
     this.fileDownloader.downloadFile(url, `${this.unit.code}-students.csv`);
   }
+
+  public updateSpecCon(student: Project) {
+    this.specConModalService.show(student);
+  }
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.html
index a2285a0969..f94c7e6037 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.html
@@ -1,43 +1,43 @@
-<div class="flex flex-row gap-4">
-  <mat-form-field appearance="outline" class="basis-1/2">
-    <mat-label>Start date to suggested completion date</mat-label>
-    <mat-date-range-input
-      [rangePicker]="picker"
-      [comparisonStart]="taskDefinition.targetDate"
-      [comparisonEnd]="taskDefinition.dueDate"
-    >
-      <input matStartDate placeholder="Start date" [(ngModel)]="taskDefinition.startDate" name="startDate" required />
-      <input matEndDate placeholder="Target date" [(ngModel)]="taskDefinition.targetDate" name="targetDate" required />
-    </mat-date-range-input>
-
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-date-range-picker #picker></mat-date-range-picker>
+<div class="flex flex-row gap-2.5">
+  <mat-form-field appearance="outline" class="basis-1/3">
+    <mat-label>Start Date</mat-label>
+    <input
+      matInput
+      placeholder="Start date"
+      required
+      [matDatepicker]="startdatepicker"
+      [(ngModel)]="taskDefinition.startDate"
+    />
+    <mat-datepicker-toggle matIconSuffix [for]="startdatepicker"></mat-datepicker-toggle>
+    <mat-datepicker #startdatepicker></mat-datepicker>
+    <mat-hint>Suggested date for students to begin the task.</mat-hint>
   </mat-form-field>
 
-  <mat-form-field appearance="outline" class="basis-1/2">
-    <mat-label>Suggestion completion date to final feedback </mat-label>
-    <mat-date-range-input
-      [rangePicker]="duePicker"
-      [comparisonStart]="taskDefinition.startDate"
-      [comparisonEnd]="taskDefinition.targetDate"
-    >
-      <input
-        matStartDate
-        placeholder="Target date"
-        [(ngModel)]="taskDefinition.targetDate"
-        name="targetDate"
-        required
-      />
-      <input
-        matEndDate
-        placeholder="Final feedback date"
-        [(ngModel)]="taskDefinition.dueDate"
-        name="dueDate"
-        required
-      />
-    </mat-date-range-input>
+  <mat-form-field appearance="outline" class="basis-1/3">
+    <mat-label>Target Date</mat-label>
+    <input
+      matInput
+      placeholder="Target date"
+      required
+      [matDatepicker]="targetdatepicker"
+      [(ngModel)]="taskDefinition.targetDate"
+    />
+    <mat-datepicker-toggle matIconSuffix [for]="targetdatepicker"></mat-datepicker-toggle>
+    <mat-datepicker #targetdatepicker></mat-datepicker>
+    <mat-hint>Recommended target date for students to complete the task.</mat-hint>
+  </mat-form-field>
 
-    <mat-datepicker-toggle matIconSuffix [for]="duePicker"></mat-datepicker-toggle>
-    <mat-date-range-picker #duePicker></mat-date-range-picker>
+  <mat-form-field appearance="outline" class="basis-1/3">
+    <mat-label>Final Feedback Date</mat-label>
+    <input
+      matInput
+      placeholder="Final feedback date"
+      required
+      [matDatepicker]="finaldatepicker"
+      [(ngModel)]="taskDefinition.dueDate"
+    />
+    <mat-datepicker-toggle matIconSuffix [for]="finaldatepicker"></mat-datepicker-toggle>
+    <mat-datepicker #finaldatepicker></mat-datepicker>
+    <mat-hint>Final deadline for receiving feedback.</mat-hint>
   </mat-form-field>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.ts
index f0d5d6dc23..40d0f325c5 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-dates/task-definition-dates.component.ts
@@ -1,11 +1,13 @@
-import { Component, Input } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
 
 @Component({
   selector: 'f-task-definition-dates',
   templateUrl: 'task-definition-dates.component.html',
   styleUrls: ['task-definition-dates.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDefinitionDatesComponent {
   @Input() taskDefinition: TaskDefinition;
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.html
new file mode 100644
index 0000000000..b3d0eb258b
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.html
@@ -0,0 +1,107 @@
+<div class="flex flex-col">
+  <div class="flex flex-grow flex-row">
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="content">
+        <th *matHeaderCellDef mat-header-cell>Discussion Prompt</th>
+        <td *matCellDef="let prompt" class="py-3" mat-cell>
+          @if (!editing(prompt)) {
+            {{ prompt.content }}
+          } @else {
+            <mat-form-field appearance="outline" class="w-full">
+              <mat-label>Discussion Prompt</mat-label>
+              <textarea matInput pattern=".*\S.*" required [(ngModel)]="prompt.content"></textarea>
+            </mat-form-field>
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="priority">
+        <th *matHeaderCellDef mat-header-cell>Priority</th>
+        <td *matCellDef="let prompt" mat-cell>
+          @if (!editing(prompt)) {
+            {{ prompt.priorityLabel }}
+          } @else {
+            <div class="flex flex-col justify-start">
+              <mat-form-field appearance="outline">
+                <mat-label>Priority</mat-label>
+
+                <mat-select matInput placeholder="Priority" [(ngModel)]="prompt.weight">
+                  <mat-option [value]="3">High</mat-option>
+                  <mat-option [value]="2">Medium</mat-option>
+                  <mat-option [value]="1">Low</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th *matHeaderCellDef mat-header-cell>Actions</th>
+        <td *matCellDef="let prompt" mat-cell>
+          <div class="flex">
+            @if (editing(prompt)) {
+              <button mat-icon-button (click)="cancelEdit()">
+                <mat-icon>close</mat-icon>
+              </button>
+              <button mat-icon-button (click)="submit()">
+                <mat-icon>save</mat-icon>
+              </button>
+            } @else {
+              <button mat-icon-button (click)="flagEdit(prompt)">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button mat-icon-button (click)="deletePrompt(prompt)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            }
+          </div>
+        </td>
+      </ng-container>
+
+      <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+      <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+    </table>
+  </div>
+  @if (!dataSource.data.length) {
+    <div class="m-3 w-full text-center text-gray-400">No discussion prompts</div>
+  }
+  @if (!creatingNewDiscussionPrompt) {
+    <div class="m-3 flex justify-center">
+      <button color="primary" mat-raised-button (click)="createNewDiscussionPrompt()">
+        Add Discussion Prompt
+      </button>
+    </div>
+  }
+
+  @if (creatingNewDiscussionPrompt) {
+    <mat-card>
+      <mat-card-content>
+        <div class="flex w-full flex-row gap-3">
+          <mat-form-field appearance="outline" class="w-full">
+            <mat-label>Discussion Prompt</mat-label>
+            <textarea
+              matInput
+              pattern=".*\S.*"
+              required
+              [(ngModel)]="newDiscussionPromptContent"
+            ></textarea>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="max-h-10 w-full max-w-lg">
+            <mat-label>Priority</mat-label>
+
+            <mat-select matInput placeholder="Priority" [(ngModel)]="newDiscussionPromptWeight">
+              <mat-option [value]="3">High</mat-option>
+              <mat-option [value]="2">Medium</mat-option>
+              <mat-option [value]="1">Low</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="flex justify-end">
+          <button mat-button (click)="cancelNewDiscussionPrompt()">Cancel</button>
+          <button color="primary" mat-raised-button (click)="addNewPrompt()">Save</button>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  }
+</div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.scss b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.ts
new file mode 100644
index 0000000000..7f9de46ef7
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-discussion-prompts/task-definition-discussion-prompts.component.ts
@@ -0,0 +1,167 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {UntypedFormControl, Validators} from '@angular/forms';
+import {MatTableDataSource} from '@angular/material/table';
+import {Observable, Subscription} from 'rxjs';
+import {DiscussionPrompt} from 'src/app/api/models/discussion-prompt';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {TaskPrerequisite} from 'src/app/api/models/task-prerequisite';
+import {Unit} from 'src/app/api/models/unit';
+import {DiscussionPromptService} from 'src/app/api/services/discussion-prompt.service';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {TaskPrerequisiteService} from 'src/app/api/services/task-prerequisite.service';
+import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-task-definition-discussion-prompts',
+  templateUrl: 'task-definition-discussion-prompts.component.html',
+  styleUrls: ['task-definition-discussion-prompts.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskDefinitionDiscussionPromptsComponent
+  extends EntityFormComponent<DiscussionPrompt>
+  implements OnInit, OnChanges
+{
+  @Input() taskDefinition: TaskDefinition;
+  @Input() staffView: boolean;
+  @Input() task: Task;
+
+  displayedColumns: string[] = ['content', 'priority', 'actions'];
+
+  private prereqSub?: Subscription;
+
+  public dataSource: MatTableDataSource<DiscussionPrompt> = new MatTableDataSource();
+
+  creatingNewDiscussionPrompt: boolean = false;
+
+  newDiscussionPromptContent: string;
+  newDiscussionPromptWeight: number = 2;
+
+  constructor(
+    private taskDefinitionService: TaskDefinitionService,
+    private alertService: AlertService,
+    private taskPrerequisiteService: TaskPrerequisiteService,
+    private discussionPromptService: DiscussionPromptService,
+  ) {
+    super(
+      {
+        content: new UntypedFormControl('', [Validators.required]),
+        priority: new UntypedFormControl('', [Validators.required]),
+      },
+      'Discussion Prompt',
+    );
+  }
+  public get unit(): Unit {
+    return this.taskDefinition?.unit;
+  }
+
+  public get prerequisites(): Observable<TaskPrerequisite[]> {
+    return this.taskDefinition.taskPrerequisitesCache.values;
+  }
+
+  ngOnInit(): void {
+    this.prereqSub = this.taskDefinition.discussionPromptsCache.values.subscribe((values) => {
+      this.dataSource.data = values;
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes.taskDefinition &&
+      changes.taskDefinition.previousValue?.id !== changes.taskDefinition.currentValue?.id
+    ) {
+      this.prereqSub?.unsubscribe();
+      this.prereqSub = this.taskDefinition.discussionPromptsCache.values.subscribe((values) => {
+        this.dataSource.data = values;
+      });
+      this.fetchDiscussionPrompts();
+    }
+  }
+
+  private fetchDiscussionPrompts() {
+    const taskDefinition = this.taskDefinition;
+    if (!taskDefinition.id) {
+      return;
+    }
+    this.discussionPromptService.loadDiscussionPrompts(null, taskDefinition).subscribe({
+      next: (data) => {
+        this.dataSource.data = data;
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to load discussion prompts: ${error}`, 6000);
+      },
+    });
+  }
+
+  public addNewPrompt() {
+    const content = this.newDiscussionPromptContent;
+    const priority = this.newDiscussionPromptWeight;
+    this.discussionPromptService
+      .create(
+        {
+          task_definition_id: this.taskDefinition.id,
+          content: content,
+          priority: priority,
+        },
+        {
+          cache: this.taskDefinition.discussionPromptsCache,
+          constructorParams: this.taskDefinition,
+        },
+      )
+      .subscribe({
+        next: (_result) => {
+          this.cancelNewDiscussionPrompt();
+          this.prereqSub?.unsubscribe();
+          this.prereqSub = this.taskDefinition.discussionPromptsCache.values.subscribe((values) => {
+            this.dataSource.data = values;
+          });
+          this.alertService.success(`Succesfully created prompt`, 3000);
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to create prompt: ${error}`, 6000);
+        },
+      });
+  }
+
+  public deletePrompt(prompt: DiscussionPrompt) {
+    prompt.delete();
+  }
+
+  createNewDiscussionPrompt() {
+    this.creatingNewDiscussionPrompt = true;
+  }
+
+  cancelNewDiscussionPrompt() {
+    this.creatingNewDiscussionPrompt = false;
+    this.newDiscussionPromptContent = '';
+    this.newDiscussionPromptWeight = 2;
+  }
+
+  submit() {
+    this.discussionPromptService
+      .put({
+        id: this.selected.id,
+        task_definition_id: this.taskDefinition.id,
+        content: this.selected.content,
+        priority: this.selected.priority,
+      })
+      .subscribe({
+        next: (_response) => {
+          this.cancelEdit();
+          this.alertService.success('Successfully saved prompt', 3000);
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to update prompt: ${error}`, 6000);
+        },
+      });
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html
index 5bbf1e64e5..5958295741 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html
@@ -1,146 +1,175 @@
-<div class="flex-col pr-32">
-  <div class="flex mt-10">
-    <div class="mr-6">
-      <div
-        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-      >
-        1
-      </div>
-    </div>
+<div class="sticky top-0 z-10 w-full bg-white pb-2" id="task-def-head">
+  <h3>Details for {{ taskDefinition.abbreviation }} - {{ taskDefinition.name }}</h3>
+  <mat-divider></mat-divider>
+</div>
 
-    <div class="w-full">
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task details</h3>
-      <p class="font-normal text-gray-700">Name the task and set target grade</p>
-      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-        <f-task-definition-general [taskDefinition]="taskDefinition"></f-task-definition-general>
-      </div>
+<div class="flex flex-col items-start gap-2.5 md:flex-row">
+  <aside class="sticky top-0 z-[9] w-full self-start md:top-12 md:w-[240px] md:shrink-0">
+    <div class="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto rounded-xl bg-white p-1">
+      @for (section of visibleSections; track section.id) {
+        <button
+          class="w-full cursor-pointer rounded-lg border-0 bg-transparent px-2 py-3 text-left whitespace-nowrap transition-colors"
+          type="button"
+          [ngClass]="{
+            'font-semibold': activeSectionId === section.id,
+            'text-gray-700 hover:bg-gray-100': activeSectionId !== section.id,
+          }"
+          [style.backgroundColor]="activeSectionId === section.id ? '#e7e7ff' : null"
+          [style.color]="
+            activeSectionId === section.id ? 'var(--mat-theme-primary, #3939ff)' : null
+          "
+          (click)="scrollToSection(section.id)"
+        >
+          {{ section.label }}
+        </button>
+      }
     </div>
-  </div>
+  </aside>
 
-  <div class="flex mt-10">
-    <div class="mr-6">
-      <div
-        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-      >
-        2
-      </div>
-    </div>
+  <div #sectionScrollContainer class="w-full flex-1 pr-0.5 pb-28 md:pb-40">
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="task-details"
+    >
+      <h3>Task Details</h3>
+      <p class="pb-1 font-normal text-gray-500">Name the task and set target grade</p>
+      <f-task-definition-general [taskDefinition]="taskDefinition"></f-task-definition-general>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
+
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="task-learning-outcomes"
+    >
+      <h3>Task Learning Outcomes</h3>
+      <p class="pb-1 font-normal text-gray-500">Add learning outcomes for this task</p>
+      <f-learning-outcome-editor [context]="taskDefinition"></f-learning-outcome-editor>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-    <div class="w-full">
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Inbox</h3>
-      <p class="font-normal text-gray-700">
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="inbox"
+    >
+      <h3>Inbox</h3>
+      <p class="pb-1 font-normal text-gray-500">
         Who assesses {{ unit.hasGroupwork() ? 'and submits ' : '' }}this task?
       </p>
-      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-        <f-task-definition-who [taskDefinition]="taskDefinition"></f-task-definition-who>
-      </div>
-    </div>
-  </div>
+      <f-task-definition-who [taskDefinition]="taskDefinition"></f-task-definition-who>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-  <div class="flex mt-10">
-    <div class="mr-6">
-      <div
-        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-      >
-        3
-      </div>
-    </div>
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="due-dates"
+    >
+      <h3>Due Dates</h3>
+      <p class="pb-1 font-normal text-gray-500">When is the task due?</p>
+      <f-task-definition-dates [taskDefinition]="taskDefinition"></f-task-definition-dates>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-    <div class="w-full">
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Due dates</h3>
-      <p class="font-normal text-gray-700">When is this task due?</p>
-      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-        <f-task-definition-dates [taskDefinition]="taskDefinition"></f-task-definition-dates>
-      </div>
-    </div>
-  </div>
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="upload-requirements"
+    >
+      <h3>Upload Requirements</h3>
+      <p class="pb-1 font-normal text-gray-500">What do students need to upload?</p>
+      <f-task-definition-upload [taskDefinition]="taskDefinition"></f-task-definition-upload>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-  <div class="flex mt-10">
-    <div class="mr-6">
-      <div
-        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-      >
-        4
-      </div>
-    </div>
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="task-resources"
+    >
+      <h3>Task Resources</h3>
+      <p class="pb-1 font-normal text-gray-500">Upload task descriptions and resources</p>
+      <f-task-definition-resources [taskDefinition]="taskDefinition"></f-task-definition-resources>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-    <div class="w-full">
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Upload requirements</h3>
-      <p class="font-normal text-gray-700">What do students need to upload?</p>
-      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-        <f-task-definition-upload [taskDefinition]="taskDefinition"></f-task-definition-upload>
-      </div>
-    </div>
-  </div>
-
-  <div class="flex mt-10">
-    <div class="mr-6">
-      <div
-        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-      >
-        5
-      </div>
-    </div>
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="prerequisite-tasks"
+    >
+      <h3>Prerequisite Tasks</h3>
+      <p class="pb-1 font-normal text-gray-500">
+        Select which tasks need to be submitted before
+        <span class="font-bold">{{ taskDefinition.abbreviation }} {{ taskDefinition.name }}</span>
+        can be submitted
+      </p>
+      <f-task-definition-prerequisites [staffView]="true" [taskDefinition]="taskDefinition">
+      </f-task-definition-prerequisites>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-    <div class="w-full">
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">
-        Task description and resources
-      </h3>
-      <p class="font-normal text-gray-700">Upload task descriptions and resources</p>
-      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-        <f-task-definition-resources
-          [taskDefinition]="taskDefinition"
-        ></f-task-definition-resources>
-      </div>
-    </div>
-  </div>
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="discussion-prompts"
+    >
+      <h3>Discussion Prompts</h3>
+      <p class="pb-1 font-normal text-gray-500">
+        Discussion prompts for tutors to use when discussing student tasks in class
+      </p>
+      <f-task-definition-discussion-prompts [staffView]="true" [taskDefinition]="taskDefinition">
+      </f-task-definition-discussion-prompts>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-  <div class="flex mt-10">
-    <div class="mr-6">
-      <div
-        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+    @if (overseerEnabled) {
+      <section
+        #sectionElement
+        class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+        data-section-id="task-assessment-automation"
       >
-        6
-      </div>
-    </div>
+        <h3>Task Assessment Automation</h3>
+        <p class="pb-1 font-normal text-gray-500">Configure automated assessment</p>
+        <f-task-definition-overseer [taskDefinition]="taskDefinition"></f-task-definition-overseer>
+      </section>
+      <mat-divider class="my-[25px]"></mat-divider>
+    }
 
-    <div class="w-full">
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">
-        Task assessment automation
-      </h3>
-      <p class="font-normal text-gray-700" *ngIf="!overseerEnabled">Automation is not enabled</p>
-      <p class="font-normal text-gray-700" *ngIf="overseerEnabled">
-        Configure automated assessment
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="scorm-test"
+    >
+      <h3>SCORM Test</h3>
+      <p class="pb-1 font-normal text-gray-500">
+        Upload the corresponding SCORM 2004 test (e.g. Numbas)
       </p>
-      <div class="bg-white border border-gray-200 rounded-xl shadow p-6" *ngIf="overseerEnabled">
-        <f-task-definition-overseer [taskDefinition]="taskDefinition"></f-task-definition-overseer>
-      </div>
-    </div>
-  </div>
+      <f-task-definition-scorm [taskDefinition]="taskDefinition"></f-task-definition-scorm>
+    </section>
+    <mat-divider class="my-[25px]"></mat-divider>
 
-  <div class="flex mt-10">
-    <div class="mr-6">
-      <div
-        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-      >
-        7
-      </div>
-    </div>
+    <section
+      #sectionElement
+      class="mb-0 scroll-mt-28 rounded-xl bg-white p-2.5"
+      data-section-id="optional-settings"
+    >
+      <h3>Optional Settings</h3>
+      <p class="pb-1 font-normal text-gray-500">Apply other options</p>
+      <f-task-definition-options [taskDefinition]="taskDefinition"></f-task-definition-options>
+    </section>
 
-    <div class="w-full">
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Optional settings</h3>
-      <p class="font-normal text-gray-700">Configure automated assessment</p>
-      <mat-accordion>
-        <mat-expansion-panel>
-          <mat-expansion-panel-header>
-            <mat-panel-title> Options </mat-panel-title>
-          </mat-expansion-panel-header>
-          <f-task-definition-options [taskDefinition]="taskDefinition"></f-task-definition-options>
-        </mat-expansion-panel>
-      </mat-accordion>
-    </div>
+    <!-- 725px is enough space to ensure the last section ("Optional Settings") can be scrolled to the top of the browser -->
+    <!-- This value may need to change as we add or modify task-definition-editor components -->
+    <div aria-hidden="true" class="h-[725px]"></div>
   </div>
 </div>
-<div class="w-full flex flex-row place-content-end sticky bottom-16 z-10">
-  <button mat-fab color="primary" (click)="save()"><mat-icon>save</mat-icon></button>
+<div class="fixed right-[50px] bottom-[50px] z-50">
+  <div>
+    <button color="primary" mat-fab (click)="save()">
+      <mat-icon>save</mat-icon>
+    </button>
+  </div>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.scss b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.scss
index 05e8bffddc..e69de29bb2 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.scss
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.scss
@@ -1,10 +0,0 @@
-.mat-toolbar {
-  background-color: white;
-  // position: fixed;
-  // bottom: 0;
-  // width: 100%;
-}
-
-.form-group {
-
-}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.ts
index 88f7ccfe2d..f6f6d51382 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.ts
@@ -1,24 +1,177 @@
-import { Component, Input } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
-import { TaskDefinitionService } from 'src/app/api/services/task-definition.service';
-import { AlertService } from 'src/app/common/services/alert.service';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  QueryList,
+  SimpleChanges,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import {Subscription} from 'rxjs';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+type TaskDefinitionSectionId =
+  | 'task-details'
+  | 'task-learning-outcomes'
+  | 'inbox'
+  | 'due-dates'
+  | 'upload-requirements'
+  | 'task-resources'
+  | 'prerequisite-tasks'
+  | 'discussion-prompts'
+  | 'task-assessment-automation'
+  | 'scorm-test'
+  | 'optional-settings';
+
+interface TaskDefinitionSection {
+  id: TaskDefinitionSectionId;
+  label: string;
+}
 
 @Component({
   selector: 'f-task-definition-editor',
   templateUrl: 'task-definition-editor.component.html',
   styleUrls: ['task-definition-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class TaskDefinitionEditorComponent {
+export class TaskDefinitionEditorComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
   @Input() taskDefinition: TaskDefinition;
   @Input() unit: Unit;
+  @ViewChild('sectionScrollContainer') sectionScrollContainer: ElementRef<HTMLElement>;
+  @ViewChildren('sectionElement') sectionElements: QueryList<ElementRef<HTMLElement>>;
+
+  public overseerEnabled: boolean = false;
+  public activeSectionId: TaskDefinitionSectionId = 'task-details';
+  public readonly sectionList: TaskDefinitionSection[] = [
+    {id: 'task-details', label: 'Task Details'},
+    {id: 'task-learning-outcomes', label: 'Task Learning Outcomes'},
+    {id: 'inbox', label: 'Inbox'},
+    {id: 'due-dates', label: 'Due Dates'},
+    {id: 'upload-requirements', label: 'Upload Requirements'},
+    {id: 'task-resources', label: 'Task Resources'},
+    {id: 'prerequisite-tasks', label: 'Prerequisite Tasks'},
+    {id: 'discussion-prompts', label: 'Discussion Prompts'},
+    {id: 'task-assessment-automation', label: 'Task Assessment Automation'},
+    {id: 'scorm-test', label: 'SCORM Test'},
+    {id: 'optional-settings', label: 'Optional Settings'},
+  ];
+
+  private sectionElementMap: Map<TaskDefinitionSectionId, HTMLElement> = new Map();
+  private sectionChangesSubscription?: Subscription;
+  private overseerEnabledSubscription?: Subscription;
+  private readonly scrollTopOffsetPx: number = 112;
+
+  constructor(
+    private taskDefinitionService: TaskDefinitionService,
+    private alerts: AlertService,
+    private constants: DoubtfireConstants,
+  ) {}
 
-  constructor(private taskDefinitionService: TaskDefinitionService, private alerts: AlertService, private constants: DoubtfireConstants) {
-    constants.IsOverseerEnabled.subscribe((enabled) => (this.overseerEnabled = enabled && this.unit.overseerEnabled));
+  public ngOnInit() {
+    this.overseerEnabledSubscription = this.constants.IsOverseerEnabled.subscribe((enabled) => {
+      this.overseerEnabled = enabled && this.unit.overseerEnabled;
+      this.ensureActiveSectionIsVisible();
+      this.rebuildSectionElementMap();
+    });
   }
 
-  public overseerEnabled: boolean = false;
+  public ngAfterViewInit() {
+    this.rebuildSectionElementMap();
+    this.sectionChangesSubscription = this.sectionElements.changes.subscribe(() => {
+      this.rebuildSectionElementMap();
+      this.syncActiveSectionOnScroll();
+    });
+    queueMicrotask(() => this.syncActiveSectionOnScroll());
+  }
+
+  public ngOnChanges(changes: SimpleChanges) {
+    if (changes.taskDefinition && !changes.taskDefinition.firstChange) {
+      this.ensureActiveSectionIsVisible();
+      queueMicrotask(() => this.syncActiveSectionOnScroll());
+    }
+  }
+
+  public ngOnDestroy() {
+    this.sectionChangesSubscription?.unsubscribe();
+    this.overseerEnabledSubscription?.unsubscribe();
+  }
+
+  public get visibleSections(): TaskDefinitionSection[] {
+    return this.overseerEnabled
+      ? this.sectionList
+      : this.sectionList.filter((section) => section.id !== 'task-assessment-automation');
+  }
+
+  public scrollToSection(sectionId: TaskDefinitionSectionId) {
+    this.activeSectionId = sectionId;
+
+    const container = this.sectionScrollContainer?.nativeElement;
+    const target = this.sectionElementMap.get(sectionId);
+
+    if (!container || !target) {
+      return;
+    }
+
+    if (this.isContainerScrollable(container)) {
+      const targetTop = this.getSectionTopInContainer(container, target);
+      container.scrollTo({
+        top: Math.max(targetTop - 8, 0),
+        behavior: 'smooth',
+      });
+      return;
+    }
+
+    target.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  }
+
+  public syncActiveSectionOnScroll() {
+    const container = this.sectionScrollContainer?.nativeElement;
+    if (!container) {
+      return;
+    }
+
+    if (!this.isContainerScrollable(container)) {
+      this.syncActiveSectionOnWindowScroll();
+      return;
+    }
+
+    const scrollPosition = container.scrollTop + 48;
+    let nextActiveSection = this.visibleSections[0]?.id;
+
+    this.visibleSections.forEach((section) => {
+      const sectionElement = this.sectionElementMap.get(section.id);
+      if (
+        sectionElement &&
+        this.getSectionTopInContainer(container, sectionElement) <= scrollPosition
+      ) {
+        nextActiveSection = section.id;
+      }
+    });
+
+    if (nextActiveSection) {
+      this.activeSectionId = nextActiveSection;
+    }
+  }
+
+  @HostListener('window:scroll')
+  @HostListener('window:resize')
+  public onWindowScroll() {
+    this.syncActiveSectionOnScroll();
+  }
 
   public save() {
     this.taskDefinition.save().subscribe({
@@ -29,4 +182,49 @@ export class TaskDefinitionEditorComponent {
       error: (message) => this.alerts.error(message),
     });
   }
+
+  private ensureActiveSectionIsVisible() {
+    if (!this.visibleSections.some((section) => section.id === this.activeSectionId)) {
+      this.activeSectionId = this.visibleSections[0]?.id ?? 'task-details';
+    }
+  }
+
+  private rebuildSectionElementMap() {
+    this.sectionElementMap.clear();
+
+    this.sectionElements?.forEach((sectionElementRef) => {
+      const nativeElement = sectionElementRef.nativeElement;
+      const sectionId = nativeElement.getAttribute('data-section-id') as TaskDefinitionSectionId;
+
+      if (sectionId) {
+        this.sectionElementMap.set(sectionId, nativeElement);
+      }
+    });
+  }
+
+  private getSectionTopInContainer(container: HTMLElement, sectionElement: HTMLElement): number {
+    const containerRect = container.getBoundingClientRect();
+    const sectionRect = sectionElement.getBoundingClientRect();
+    return container.scrollTop + (sectionRect.top - containerRect.top);
+  }
+
+  private syncActiveSectionOnWindowScroll() {
+    const threshold = this.scrollTopOffsetPx + 12;
+    let nextActiveSection = this.visibleSections[0]?.id;
+
+    this.visibleSections.forEach((section) => {
+      const sectionElement = this.sectionElementMap.get(section.id);
+      if (sectionElement && sectionElement.getBoundingClientRect().top <= threshold) {
+        nextActiveSection = section.id;
+      }
+    });
+
+    if (nextActiveSection) {
+      this.activeSectionId = nextActiveSection;
+    }
+  }
+
+  private isContainerScrollable(container: HTMLElement): boolean {
+    return container.scrollHeight > container.clientHeight + 1;
+  }
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html
index 5ec2551e03..bd4e07d144 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html
@@ -1,8 +1,8 @@
-<div class="flex flex-row gap-4">
+<div class="flex flex-row gap-2.5">
   <mat-form-field appearance="outline" class="basis-1/3">
     <mat-label>Grade where task appears</mat-label>
-    <mat-select [(ngModel)]="taskDefinition.targetGrade" required>
-      @for (grade of grades; track grade) {
+    <mat-select required [(ngModel)]="taskDefinition.targetGrade">
+      @for (grade of grades; track grade.value) {
         <mat-option [value]="grade.value">{{ grade.viewValue }}</mat-option>
       }
     </mat-select>
@@ -10,21 +10,21 @@
 
   <mat-form-field appearance="outline" class="basis-1/3">
     <mat-label>Abbreviation - Week, sequence, and grade. eg 1.1P</mat-label>
-    <input matInput [(ngModel)]="taskDefinition.abbreviation" required />
+    <input matInput required [(ngModel)]="taskDefinition.abbreviation" />
   </mat-form-field>
 
   <mat-form-field appearance="outline" class="flex-grow">
     <mat-label>Weight - Effort relative to other tasks.</mat-label>
-    <input matInput type="number" [(ngModel)]="taskDefinition.weighting" required />
+    <input matInput required type="number" [(ngModel)]="taskDefinition.weighting" />
   </mat-form-field>
 </div>
 
 <mat-form-field appearance="outline" class="flex flex-grow">
   <mat-label>Descriptive task name</mat-label>
-  <input matInput [(ngModel)]="taskDefinition.name" required />
+  <input matInput required [(ngModel)]="taskDefinition.name" />
 </mat-form-field>
 
 <mat-form-field appearance="outline" class="flex flex-grow">
   <mat-label>Task description</mat-label>
-  <textarea matInput [(ngModel)]="taskDefinition.description" required> </textarea>
+  <textarea matInput required [(ngModel)]="taskDefinition.description"> </textarea>
 </mat-form-field>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.ts
index 3bfe2ecd0c..ab781061d2 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.ts
@@ -1,20 +1,22 @@
-import { Component, Input } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
-import { GradeService } from 'src/app/common/services/grade.service';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {GradeService} from 'src/app/common/services/grade.service';
 
 @Component({
   selector: 'f-task-definition-general',
   templateUrl: 'task-definition-general.component.html',
   styleUrls: ['task-definition-general.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDefinitionGeneralComponent {
   @Input() taskDefinition: TaskDefinition;
 
-  public grades: { value: number; viewValue: string }[];
+  constructor(private gradeService: GradeService) {}
 
-  constructor(private gradeService: GradeService) {
-    this.grades = this.gradeService.gradeViewData.filter((grade) => grade.value !== -1);
+  public get grades(): {value: number; viewValue: string}[] {
+    return this.gradeService.gradeViewDataFor(this.unit);
   }
 
   public get unit(): Unit {
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.html
index a479f20ce3..92a1002ce2 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.html
@@ -1,32 +1,57 @@
-<div class="flex flex-col gap-4">
-  <div class="flex-grow flex flex-row gap-4">
+<div class="flex flex-col gap-3">
+  <div class="flex flex-grow flex-row items-center gap-3">
     <mat-checkbox class="basis-1/2" matInput [(ngModel)]="taskDefinition.restrictStatusUpdates">
       Restrict updates
     </mat-checkbox>
     <span class="basis-1/2">
-      This task will be locked once it goes into a staff-allocated status. Students will not be able to resubmit, even
-      if placed on the fix status.
+      This task will be locked once it goes into a staff-allocated status. Students will not be able
+      to resubmit, even if placed on the fix status.
     </span>
   </div>
 
-  <div class="flex-grow flex flex-row gap-4">
-    <mat-checkbox class="basis-1/2" matInput [(ngModel)]="taskDefinition.isGraded">Graded</mat-checkbox>
+  <div class="flex flex-grow flex-row items-center gap-3">
+    <mat-checkbox
+      class="basis-1/2"
+      matInput
+      [(ngModel)]="taskDefinition.assessInPortfolioOnly"
+      (change)="onToggleAssessInPortfolioOnly()"
+      >Assess in Portfolio Only</mat-checkbox
+    >
     <span class="basis-1/2">
-      Provide a grade along with the complete or discuss status. We recommend avoiding this practice.
+      This task cannot be signed off as complete and will only be assessed in the final portfolio.
+      Tutors can leave feedback and return it to the "Working on it" state. Students must then
+      update the status to "Assess in Portfolio" to ensure it's included in their portfolio.
     </span>
   </div>
 
-  <div class="flex-grow flex flex-row gap-4">
+  <div class="flex flex-grow flex-row items-center gap-3">
+    <mat-checkbox class="basis-1/2" matInput [(ngModel)]="taskDefinition.requiresDiscussion">
+      Requires Discussion
+    </mat-checkbox>
+    <span class="basis-1/2">
+      Tutors cannot mark this task as complete unless it has first been marked as discussed in
+      class.
+    </span>
+  </div>
+
+  <div class="flex flex-grow flex-row items-center gap-3">
+    <mat-checkbox class="basis-1/2" matInput [(ngModel)]="taskDefinition.isGraded"
+      >Graded</mat-checkbox
+    >
+    <span class="basis-1/2">
+      Provide a grade along with the complete or discuss status. We recommend avoiding this
+      practice.
+    </span>
+  </div>
+
+  <div class="flex flex-grow flex-row items-center gap-3">
     <mat-form-field appearance="outline" class="basis-1/2">
-      <mat-label>Maximum Score</mat-label>
-      <input
-        matInput
-        min="0"
-        max="100"
-        type="number"
-        [(ngModel)]="taskDefinition.maxQualityPts"
-      />
+      <mat-label>Quality Stars</mat-label>
+      <input matInput max="100" min="0" type="number" [(ngModel)]="taskDefinition.maxQualityPts" />
     </mat-form-field>
-    <span class="basis-1/2">Provide a score alongside the task status. We recommend avoiding this practice.</span>
+    <span class="mb-[22px] basis-1/2"
+      >Provide a number of stars alongside the task status. Make sure you have a clear reason for
+      each star within your task description.</span
+    >
   </div>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.ts
index 7fc62fa813..29037633b7 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-options/task-definition-options.component.ts
@@ -1,16 +1,39 @@
-import { Component, Input } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
 
 @Component({
   selector: 'f-task-definition-options',
   templateUrl: 'task-definition-options.component.html',
   styleUrls: ['task-definition-options.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDefinitionOptionsComponent {
   @Input() taskDefinition: TaskDefinition;
+  constructor(private confirmationModal: ConfirmationModalService) {}
 
   public get unit(): Unit {
     return this.taskDefinition?.unit;
   }
+
+  public onToggleAssessInPortfolioOnly() {
+    if (!this.taskDefinition.assessInPortfolioOnly) {
+      return;
+    }
+
+    setTimeout(() => {
+      this.taskDefinition.assessInPortfolioOnly = false;
+      console.log(this.taskDefinition.assessInPortfolioOnly);
+
+      this.confirmationModal.show(
+        `Enable Assess in Portfolio Only?`,
+        `Enabling Assess in Portfolio Only will update all overdue tasks for ${this.taskDefinition.name} to the Assess in Portfolio state`,
+        () => {
+          this.taskDefinition.assessInPortfolioOnly = true;
+        },
+      );
+    });
+  }
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.html
new file mode 100644
index 0000000000..3e53b5fd7d
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.html
@@ -0,0 +1,18 @@
+<div class="w-full p-6">
+  <div class="w-full text-center">
+    <p>{{ data.taskDefinition.abbreviation }} {{ data.taskDefinition.name }}</p>
+    <p>Overseer script</p>
+  </div>
+  <div class="flex justify-end">
+    <button mat-icon-button (click)="save()">
+      <mat-icon>save</mat-icon>
+    </button>
+  </div>
+  @if (!loading) {
+    <ngs-code-editor
+      class="h-[70vh] w-full"
+      [codeModel]="model"
+      [readOnly]="true"
+    ></ngs-code-editor>
+  }
+</div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.scss b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.ts
new file mode 100644
index 0000000000..c2bc724c2e
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component.ts
@@ -0,0 +1,63 @@
+import {CodeModel} from '@ngstack/code-editor';
+import {HttpClient} from '@angular/common/http';
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {OverseerScriptEditorModalData} from './overseer-script-editor-modal.service';
+
+@Component({
+  selector: 'f-overseer-script-editor-modal',
+  templateUrl: './overseer-script-editor-modal.component.html',
+  styleUrls: ['./overseer-script-editor-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class OverseerScriptEditorModalComponent implements OnInit {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: OverseerScriptEditorModalData,
+    public dialogRef: MatDialogRef<OverseerScriptEditorModalData>,
+    private httpClient: HttpClient,
+    private alertService: AlertService,
+  ) {}
+
+  public model: CodeModel = {
+    language: 'shell',
+    uri: 'run.sh',
+    value: '',
+  };
+
+  scriptContent: string;
+
+  loading: boolean = false;
+  ngOnInit() {
+    this.loading = true;
+    this.httpClient
+      .get(this.data.taskDefinition.taskOverseerExecutionScriptUrl)
+      .subscribe((data: string) => {
+        this.model.value = data;
+        this.loading = false;
+      });
+  }
+
+  save() {
+    const scriptOriginal = this.model.value;
+    const scriptEncoded = this.base64UrlEncode(scriptOriginal);
+
+    this.httpClient
+      .put(this.data.taskDefinition.taskOverseerExecutionScriptUrl, {
+        script_content: scriptEncoded,
+      })
+      .subscribe({
+        next: (_result) => {
+          this.dialogRef.close();
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to save script: ${error}`, 6000);
+        },
+      });
+  }
+
+  private base64UrlEncode(str) {
+    return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.service.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.service.ts
new file mode 100644
index 0000000000..a7e360800c
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.service.ts
@@ -0,0 +1,28 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {OverseerScriptEditorModalComponent} from './overseer-script-editor-modal.component';
+
+export interface OverseerScriptEditorModalData {
+  taskDefinition: TaskDefinition;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OverseerScriptEditorModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(taskDefinition: TaskDefinition) {
+    const _dialogRef = this.dialog.open<
+      OverseerScriptEditorModalComponent,
+      OverseerScriptEditorModalData
+    >(OverseerScriptEditorModalComponent, {
+      data: {
+        taskDefinition: taskDefinition,
+      },
+      width: '100%',
+      maxWidth: '1200px',
+    });
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.html
index 92ef121ff3..249f683e26 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.html
@@ -1,40 +1,415 @@
-<div class="flex flex-col gap-4">
-  <mat-checkbox matInput required [(ngModel)]="taskDefinition.assessmentEnabled" [disabled]="!overseerEnabled">
-    Automation Enabled
-  </mat-checkbox>
+<div class="flex flex-col gap-2.5">
+  <div>
+    <mat-checkbox
+      matInput
+      required
+      [disabled]="!overseerEnabled"
+      [(ngModel)]="taskDefinition.assessmentEnabled"
+    >
+      Automation Enabled
+    </mat-checkbox>
+    <br />
+    <mat-hint>
+      You can add or modify Overseer steps while keeping this unchecked and use the test submission
+      feature. Once everything is ready, enable automation to apply it to all student submissions.
+    </mat-hint>
+  </div>
 
-  <mat-form-field class="flex-grow" appearance="outline">
+  <mat-form-field appearance="outline" class="flex-grow">
     <mat-label>Docker Image</mat-label>
-    <mat-select [(value)]="taskDefinition.overseerImageId" [disabled]="!overseerEnabled">
-      @for (image of images | async; track image) {
-  <mat-option [value]="image.id">{{ image.description }}</mat-option>
-}
+    <mat-select [disabled]="!overseerEnabled" [(value)]="taskDefinition.overseerImageId">
+      @for (image of images | async; track image.id) {
+        <mat-option [value]="image.id">{{ image.description }}</mat-option>
+      }
     </mat-select>
     <mat-hint>Docker image for Overseer</mat-hint>
   </mat-form-field>
 
-  <f-file-drop mode="event" (filesDropped)="uploadOverseerResources($event)" accept="application/zip" [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' Overseer zip'" />
+  <f-file-drop
+    accept="application/zip,application/x-zip-compressed"
+    mode="event"
+    [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' Overseer zip'"
+    (filesDropped)="uploadOverseerResources($event)"
+  />
+  @if (taskDefinition.hasTaskAssessmentResources) {
+    <div class="flex flex-row flex-wrap gap-2.5 pt-2.5">
+      <button class="grow" color="warn" mat-flat-button (click)="removeOverseerResources()">
+        Delete Overseer Resources Zip
+      </button>
+      <button class="grow" color="accent" mat-flat-button (click)="downloadOverseerResources()">
+        Download Overseer Resources Zip
+      </button>
+      <button
+        class="grow"
+        color="primary"
+        mat-flat-button
+        (click)="toggleOverseerResourcesEditor()"
+      >
+        <mat-icon>{{ showOverseerResourcesEditor ? 'visibility_off' : 'edit' }}</mat-icon>
+        {{
+          showOverseerResourcesEditor
+            ? 'Hide Overseer Resource Editor'
+            : 'Edit Overseer Resources Zip'
+        }}
+      </button>
+    </div>
+
+    @if (showOverseerResourcesEditor) {
+      <div class="mt-2.5 rounded border border-slate-200 p-1">
+        @if (isLoadingOverseerResourcesArchive) {
+          <div class="flex h-[32rem] items-center justify-center text-slate-600">
+            Loading Overseer Resources archive...
+          </div>
+        } @else if (overseerResourcesArchive) {
+          <f-archive-viewer
+            class="block h-[400px] w-full overflow-hidden"
+            navigationMode="tree"
+            [archiveFile]="overseerResourcesArchive"
+            [readOnly]="false"
+            [saveEndpoint]="taskDefinition.taskOverseerResourcesUploadUrl"
+            [saveFileName]="'Task ' + taskDefinition.abbreviation + ' Overseer zip'"
+            [saveMethod]="'POST'"
+            (saveSuccess)="onOverseerResourcesArchiveSaved($event)"
+          ></f-archive-viewer>
+        } @else {
+          <div class="flex h-[32rem] items-center justify-center text-slate-600">
+            Unable to load Overseer Resources archive.
+          </div>
+        }
+      </div>
+    }
+  }
 
-  <div class="flex flex-row gap-4">
+  <div class="flex flex-row gap-2.5 pt-2.5">
     <button
-      mat-button
-      mat-raised-button
+      class="me-4 flex-grow"
       color="primary"
-      [disabled]="!taskDefinition.id || !taskDefinition.hasTaskAssessmentResources"
+      mat-flat-button
+      [disabled]="!taskDefinition.id"
       (click)="testSubmission()"
-      style="width: 100%; line-height: 36px; padding: 0 16px"
     >
       <mat-icon>upload_file</mat-icon> Test Submission
     </button>
     <button
-      mat-button
-      mat-raised-button
+      class="ms-4 flex-grow"
       color="accent"
-      [disabled]="!currentUserTask"
+      mat-flat-button
+      [disabled]="!this.currentUserTask?.project"
       (click)="testSubmissionHistory()"
-      style="width: 100%; line-height: 36px; padding: 0 16px"
     >
-      <mat-icon>preview</mat-icon> Test Submission History
+      <mat-icon>preview</mat-icon> Submission History
     </button>
   </div>
 </div>
+
+<div class="mt-3"></div>
+
+@if (taskDefinition.overseerImageId) {
+  @if (!taskDefinitionHasChanges()) {
+    <div class="flex justify-end">
+      <div class="flex gap-1">
+        @if (this.selectedOverseerStep) {
+          <button color="warn" mat-raised-button (click)="deleteStep()">Delete</button>
+          <button color="primary" mat-raised-button (click)="saveStep()">Save</button>
+        }
+      </div>
+    </div>
+
+    <mat-drawer-container class="example-container">
+      <mat-drawer class="min-w-[300px] border border-gray-300" mode="side" opened>
+        <div
+          class="flex min-h-[50px] w-[300px] items-center justify-between border border-gray-300 bg-gray-300 px-[20px]"
+        >
+          <div>Overseer Steps</div>
+          @if (!newOverseerStep) {
+            <button mat-icon-button (click)="addStep()"><mat-icon>add</mat-icon></button>
+          }
+        </div>
+        <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+          @for (step of overseerSteps; track step.id) {
+            <div
+              cdkDrag
+              class="example-box"
+              [ngClass]="{
+                'bg-gray-100': selectedOverseerStep?.id === step.id,
+              }"
+              (click)="selectStep(step)"
+            >
+              <mat-icon cdkDragHandle class="cursor-move">drag_indicator</mat-icon>
+              {{ step.sortOrder }}. {{ step.name ?? 'Untitled Step' }}
+            </div>
+          }
+          @if (newOverseerStep) {
+            <div
+              cdkDrag
+              cdkDragDisabled
+              class="example-box bg-gray-100"
+              (click)="selectStep(newOverseerStep)"
+            >
+              {{ newOverseerStep.sortOrder }}. {{ newOverseerStep.name || 'Untitled Step' }}
+            </div>
+          }
+        </div>
+      </mat-drawer>
+      <mat-drawer-content>
+        @if (selectedOverseerStep) {
+          <mat-card class="min-h-[350px] w-full">
+            <mat-card-content class="flex w-full flex-col">
+              <div class="flex w-full gap-3">
+                <mat-form-field appearance="outline" class="basis-1/3" subscriptSizing="dynamic">
+                  <mat-label>Step Name</mat-label>
+                  <input matInput required [(ngModel)]="selectedOverseerStep.name" />
+                  <mat-hint>Visible to staff only</mat-hint>
+                </mat-form-field>
+                <mat-form-field
+                  appearance="outline"
+                  class="w-full"
+                  required
+                  subscriptSizing="dynamic"
+                >
+                  <mat-label>Description</mat-label>
+                  <input
+                    matInput
+                    placeholder="Description"
+                    required
+                    [(ngModel)]="selectedOverseerStep.description"
+                  />
+                  <mat-hint>Visible to staff only</mat-hint>
+                </mat-form-field>
+              </div>
+
+              <mat-form-field appearance="outline" class="mt-3">
+                <mat-label>Step Type</mat-label>
+                <mat-select required [(ngModel)]="selectedOverseerStep.stepType">
+                  <mat-option value="status_check">Custom Script</mat-option>
+                  <mat-option value="output_diff">Input/Output</mat-option>
+                </mat-select>
+              </mat-form-field>
+
+              @if (selectedOverseerStep.stepType === 'output_diff') {
+                <div class="flex w-full gap-3">
+                  <div class="w-full">
+                    <mat-form-field appearance="outline" class="w-full">
+                      <mat-label>Script Input File</mat-label>
+                      <!-- Input for command (Standard input)-->
+                      <mat-select [(ngModel)]="selectedOverseerStep.stdinInputFile">
+                        <mat-option value="">(none)</mat-option>
+                        @for (file of taskDefinition.overseerResourceFiles; track file) {
+                          <mat-option [value]="file">{{ file }}</mat-option>
+                        }
+                      </mat-select>
+                      <mat-hint
+                        >The selected file will be passed as standard input to the program when it
+                        runs.
+                      </mat-hint>
+                    </mat-form-field>
+                    <mat-slide-toggle class="mt-1" [(ngModel)]="selectedOverseerStep.showStdin">
+                      Show input file to student
+                    </mat-slide-toggle>
+                  </div>
+                  <div class="w-full">
+                    <mat-form-field appearance="outline" class="w-full">
+                      <mat-label>Expected Output File</mat-label>
+                      <mat-select [(ngModel)]="selectedOverseerStep.expectedOutputFile">
+                        <mat-option value="">(none)</mat-option>
+                        @for (file of taskDefinition.overseerResourceFiles; track file) {
+                          <mat-option [value]="file">{{ file }}</mat-option>
+                        }
+                      </mat-select>
+                      <mat-hint> Program output must exactly match this file to pass. </mat-hint>
+                    </mat-form-field>
+                    <mat-slide-toggle
+                      class="mt-1"
+                      [(ngModel)]="selectedOverseerStep.showExpectedOutput"
+                    >
+                      Show expected output file to student
+                    </mat-slide-toggle>
+                    <br />
+                    <mat-slide-toggle
+                      class="mt-1"
+                      [(ngModel)]="selectedOverseerStep.partialOutputDiff"
+                      >Partial Output Comparison</mat-slide-toggle
+                    >
+                    <br />
+                    <mat-hint>
+                      If enabled, test passes if the expected output appears anywhere in the
+                      student's output. Otherwise, only exact matches pass.
+                    </mat-hint>
+                  </div>
+                </div>
+              }
+
+              <div class="mt-1 flex items-end justify-between py-1">
+                <div class="pl-1">Execution Script</div>
+                <mat-form-field appearance="outline">
+                  <mat-label>Language</mat-label>
+                  <mat-select
+                    [(ngModel)]="selectedOverseerStep.commandLanguage"
+                    (selectionChange)="onLanguageChange($event)"
+                  >
+                    @for (language of getLanguages; track language) {
+                      <mat-option [value]="language.id">{{
+                        language.id ?? language.aliases?.[0] ?? language.id
+                      }}</mat-option>
+                    }
+                  </mat-select>
+                  <mat-hint>Visual use only</mat-hint>
+                </mat-form-field>
+              </div>
+
+              <div class="w-full">
+                <ngx-monaco-editor
+                  #editor
+                  class="w-full"
+                  [options]="editorOptions"
+                  [(ngModel)]="selectedOverseerStep.decodedRunCommand"
+                  (ngModelChange)="onRunCommandChange(selectedOverseerStep, $event)"
+                ></ngx-monaco-editor>
+                <mat-hint class="w-full pl-1 text-xs">
+                  @if (selectedOverseerStep.stepType === 'status_check') {
+                    This step passes only if the script exits with status 0. Any non-zero exit code
+                    marks the step as failed.
+                  } @else if (selectedOverseerStep.stepType === 'output_diff') {
+                    The script output is compared against the expected output. If noisy warnings
+                    cause failures, move that logic into a separate step.
+                  }
+                </mat-hint>
+              </div>
+              <mat-form-field appearance="outline" class="mt-3 w-full" subscriptSizing="dynamic">
+                <mat-label>Time Limit (s)</mat-label>
+                <input
+                  matInput
+                  name="Time Limit"
+                  placeholder="60"
+                  required
+                  [(ngModel)]="selectedOverseerStep.timeout"
+                />
+                <mat-hint
+                  >How long the code can execute for before overseer automatically kills the
+                  process. A timeout will result in a failed test (Exit status 124)</mat-hint
+                >
+              </mat-form-field>
+              <div class="flex w-full gap-3">
+                <div class="w-full">
+                  <!-- <div class="pb-1 mt-3">Success:</div> -->
+                  <div class="w-full">
+                    <mat-slide-toggle
+                      class="my-1 min-w-fit"
+                      matTooltip="Whether consecutive tasks should run even if this task fails"
+                      [(ngModel)]="selectedOverseerStep.haltOnSuccess"
+                      >Halt on success
+                    </mat-slide-toggle>
+                    @if (selectedOverseerStep.haltOnSuccess) {
+                      <mat-form-field appearance="outline" class="w-full">
+                        <mat-label>Status on Success</mat-label>
+                        <mat-select [(ngModel)]="selectedOverseerStep.statusOnSuccess">
+                          <mat-option value="no_change">No Change</mat-option>
+                          @for (status of statusKeys; track status) {
+                            <mat-option [value]="status">{{ statusName(status) }}</mat-option>
+                          }
+                        </mat-select>
+                      </mat-form-field>
+                    }
+                  </div>
+                </div>
+                <mat-divider [vertical]="true"></mat-divider>
+                <div class="w-full">
+                  <!-- <div class="py-1 mt-1">Fail:</div> -->
+                  <div class="w-full">
+                    <!-- On Sucesss, which status, should halt? -->
+                    <mat-slide-toggle
+                      class="my-1 min-w-fit"
+                      matTooltip="Whether consecutive tasks should run even if this task fails"
+                      [(ngModel)]="selectedOverseerStep.haltOnFailure"
+                      >Halt on failure
+                    </mat-slide-toggle>
+                    @if (selectedOverseerStep.haltOnFailure) {
+                      <mat-form-field appearance="outline" class="w-full">
+                        <!-- On Fail, which status, should halt, feedback message? -->
+                        <mat-label>Status on Fail</mat-label>
+                        <mat-select [(ngModel)]="selectedOverseerStep.statusOnFailure">
+                          <mat-option value="no_change">No Change</mat-option>
+                          @for (status of statusKeys; track status) {
+                            <mat-option [value]="status">{{ statusName(status) }}</mat-option>
+                          }
+                        </mat-select>
+                      </mat-form-field>
+                    }
+                  </div>
+                </div>
+              </div>
+
+              <mat-divider class="my-3"></mat-divider>
+              <div class="mt-3 flex w-full gap-3">
+                <!-- TODO: checkbox to use same as overseer step name -->
+                <mat-form-field appearance="outline" class="basis-1/3" subscriptSizing="dynamic">
+                  <mat-label>Test Name</mat-label>
+                  <input
+                    matInput
+                    name="Name"
+                    required
+                    [(ngModel)]="selectedOverseerStep.displayName"
+                  />
+                  <mat-hint>Shown to student in overseer report</mat-hint>
+                </mat-form-field>
+                <mat-form-field appearance="outline" class="w-full" subscriptSizing="dynamic">
+                  <mat-label>Description</mat-label>
+                  <input matInput required [(ngModel)]="selectedOverseerStep.displayDescription" />
+                  <mat-hint>Shown to student in overseer report</mat-hint>
+                </mat-form-field>
+              </div>
+              <mat-form-field
+                appearance="outline"
+                class="mt-3 w-full"
+                floatLabel="always"
+                subscriptSizing="dynamic"
+              >
+                <mat-label>Feedback message</mat-label>
+                <input
+                  matInput
+                  [placeholder]="getFeedbackMessagePlaceholder()"
+                  [(ngModel)]="selectedOverseerStep.feedbackMessage"
+                />
+                <mat-hint
+                  >Feedback to provide to the student if the task failed. You can leave this blank
+                  and a default will message will be used instead.</mat-hint
+                >
+              </mat-form-field>
+
+              <div class="mt-3">
+                <mat-slide-toggle [(ngModel)]="selectedOverseerStep.enabled"
+                  >Enabled</mat-slide-toggle
+                >
+                <br />
+                <mat-hint>
+                  If disabled, this step will not run and will not appear in the Overseer report for
+                  students.
+                </mat-hint>
+              </div>
+
+              <div class="mt-3">
+                <mat-slide-toggle [(ngModel)]="selectedOverseerStep.showStdout"
+                  >Show output</mat-slide-toggle
+                >
+                <br />
+                <mat-hint>
+                  When enabled, students can see this step’s standard output, including script
+                  output, program output, and compile errors.
+                </mat-hint>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        } @else {
+          <div class="flex min-h-[350px] w-full flex-col items-center justify-center bg-gray-50">
+            No steps selected
+            <mat-icon style="width: 75px; height: 75px; font-size: 75px">tab_unselected</mat-icon>
+          </div>
+        }
+      </mat-drawer-content>
+    </mat-drawer-container>
+  } @else {
+    <div class="p-3 text-center text-gray-500">
+      Please save the task definition before configuring the overseer steps.
+    </div>
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.scss b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.scss
index e69de29bb2..ff10c528b0 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.scss
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.scss
@@ -0,0 +1,50 @@
+.example-list {
+  width: 300px;
+  max-width: 100%;
+  border: solid 1px #ccc;
+  min-height: 50px;
+  height: 100%;
+  display: block;
+  background: white;
+  // border-radius: 4px;
+  overflow: hidden;
+}
+
+.example-box {
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  height: 50px;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  // justify-content: space-between;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: white;
+  font-size: 14px;
+  font-family: sans-serif;
+  user-select: none;
+}
+
+.cdk-drag-preview {
+  border: none;
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.example-box:last-child {
+  border: none;
+}
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.ts
index f9b30dde0d..f9bcd613bc 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component.ts
@@ -1,39 +1,258 @@
-import { Component, Input, OnChanges } from '@angular/core';
-import { Observable } from 'rxjs';
+import * as monaco from 'monaco-editor';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {HttpClient, HttpResponse} from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {MatSelectChange} from '@angular/material/select';
+import {Observable} from 'rxjs';
 import {
-  OverseerAssessment,
   OverseerImage,
   OverseerImageService,
   Task,
+  TaskService,
+  TaskStatusEnum,
   User,
   UserService,
 } from 'src/app/api/models/doubtfire-model';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
-import { TaskDefinitionService } from 'src/app/api/services/task-definition.service';
-import { TaskAssessmentModalService } from 'src/app/common/modals/task-assessment-modal/task-assessment-modal.service';
-import { AlertService } from 'src/app/common/services/alert.service';
-import { TaskSubmissionService } from 'src/app/common/services/task-submission.service';
+import {OverseerStep} from 'src/app/api/models/overseer/overseer-step';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {OverseerStepService} from 'src/app/api/services/overseer-step.service';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {TaskAssessmentModalService} from 'src/app/common/modals/task-assessment-modal/task-assessment-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {TaskSubmissionService} from 'src/app/common/services/task-submission.service';
+import {OverseerScriptEditorModalService} from './overseer-script-editor-modal/overseer-script-editor-modal.service';
 
 @Component({
   selector: 'f-task-definition-overseer',
   templateUrl: 'task-definition-overseer.component.html',
   styleUrls: ['task-definition-overseer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class TaskDefinitionOverseerComponent implements OnChanges {
+export class TaskDefinitionOverseerComponent implements OnChanges, OnInit {
   @Input() taskDefinition: TaskDefinition;
 
+  @ViewChild('editor') editorComponent;
+
   public currentUserTask: Task;
 
+  editorOptions = {
+    theme: 'vs',
+    language: 'shell',
+    renderMinimap: false,
+
+    minimap: {
+      enabled: false,
+    },
+  };
+
+  public stepType: 'status_check' | 'output_diff' = 'status_check';
+  public visibility = 'public';
+  public showOverseerResourcesEditor = false;
+  public isLoadingOverseerResourcesArchive = false;
+  public overseerResourcesArchive: Blob | File | null = null;
+  public images: Observable<OverseerImage[]>;
+
   constructor(
+    private http: HttpClient,
     private alerts: AlertService,
     private overseerImageService: OverseerImageService,
     private modalService: TaskAssessmentModalService,
     private submissions: TaskSubmissionService,
     private userService: UserService,
-    private taskDefinitionService: TaskDefinitionService
+    private taskDefinitionService: TaskDefinitionService,
+    private fileDownloaderService: FileDownloaderService,
+    private overseerScriptEditorModal: OverseerScriptEditorModalService,
+    private overseerStepService: OverseerStepService,
+    private taskService: TaskService,
   ) {}
 
+  public get statusKeys() {
+    return this.taskService.statusKeys;
+  }
+
+  public statusName(status: TaskStatusEnum) {
+    return this.taskService.statusLabels.get(status);
+  }
+
+  public selectedOverseerStep: OverseerStep = null;
+  public newOverseerStep: OverseerStep = null;
+
+  public overseerSteps: OverseerStep[] = [];
+
+  onRunCommandChange(step: OverseerStep, value: string) {
+    step.runCommand = `b64:${this.base64UrlEncode(value)}`;
+  }
+
+  private base64UrlEncode(str) {
+    return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+  }
+
+  selectStep(step: OverseerStep) {
+    this.selectedOverseerStep = step;
+    setTimeout(() => {
+      const editor = this.editorComponent?._editor;
+      if (editor) {
+        editor.revealLine(1);
+        editor.setScrollPosition({scrollTop: 0});
+      }
+    });
+  }
+
+  addStep() {
+    this.newOverseerStep = new OverseerStep(this.taskDefinition);
+    this.newOverseerStep.stepType = 'status_check';
+    this.newOverseerStep.timeout = 30;
+    this.newOverseerStep.enabled = true;
+    this.newOverseerStep.showStdout = true;
+    this.newOverseerStep.statusOnFailure = 'no_change';
+    this.newOverseerStep.statusOnSuccess = 'no_change';
+    this.newOverseerStep.commandLanguage = 'shell';
+    this.newOverseerStep.decodedRunCommand = '#!/bin/bash\n\n';
+    this.newOverseerStep.runCommand = '#!/bin/bash\n\n';
+    this.newOverseerStep.showExpectedOutput = true;
+
+    this.newOverseerStep.sortOrder = this.taskDefinition.overseerStepsCache.currentValues.length;
+    this.selectedOverseerStep = this.newOverseerStep;
+  }
+
+  getFeedbackMessagePlaceholder() {
+    // If the feedback message is blank, this is what will automatically be used
+    // (If this changes, ensure to update it in AcceptOverseerJob)
+    switch (this.selectedOverseerStep.stepType) {
+      case 'status_check':
+        return 'This test did not complete successfully. Check the output for any errors.';
+      case 'output_diff':
+        return 'Your output did not match the expected result.';
+    }
+  }
+
+  ngOnInit(): void {
+    this.images = this.overseerImageService.query();
+
+    this.taskDefinition.overseerStepsCache.values.subscribe((steps) => {
+      this.overseerSteps = [...steps];
+    });
+  }
+
+  public get getLanguages() {
+    return monaco?.languages.getLanguages() ?? [];
+  }
+
+  onLanguageChange(event: MatSelectChange) {
+    const value = event.value;
+    this.editorOptions.language = value;
+    this.editorOptions = {...this.editorOptions};
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    if (this.newOverseerStep) {
+      this.alerts.error('Please save changes before re-ordering steps', 3000);
+      return;
+    }
+    moveItemInArray(this.overseerSteps, event.previousIndex, event.currentIndex);
+    // TODO: open endpoint to update sort orders in a single request
+    for (let i = 0; i < this.overseerSteps.length; i++) {
+      const step = this.taskDefinition.overseerStepsCache.get(this.overseerSteps[i].id);
+      if (step.sortOrder === i) {
+        // Ignore if no change
+        continue;
+      }
+      step.sortOrder = i;
+      this.overseerStepService
+        .update(
+          {
+            id: step.id,
+            unitId: this.unit.id,
+            taskDefId: this.taskDefinition.id,
+          },
+          {
+            entity: step,
+            constructorParams: this.taskDefinition,
+          },
+        )
+        .subscribe({
+          next: () => {
+            // console.log('updated!');
+          },
+          error: (error) => {
+            this.alerts.error(`Failed to update order of steps: ${error}`, 6000);
+          },
+        });
+    }
+  }
+
+  deleteStep() {
+    if (this.selectedOverseerStep && this.selectedOverseerStep === this.newOverseerStep) {
+      this.newOverseerStep = null;
+      this.selectedOverseerStep = null;
+      return;
+    }
+    this.selectedOverseerStep?.delete();
+    this.selectedOverseerStep = null;
+  }
+
+  saveStep() {
+    if (!this.selectedOverseerStep.id) {
+      // this.newOverseerStep.runCommand = this.model.value;
+      this.overseerStepService
+        .create(
+          {
+            unitId: this.unit.id,
+            taskDefId: this.taskDefinition.id,
+          },
+          {
+            entity: this.newOverseerStep,
+          },
+        )
+        .subscribe({
+          next: (result) => {
+            this.alerts.success('Added overseer step', 3000);
+            result.taskDefinition = this.taskDefinition;
+            this.taskDefinition.overseerStepsCache.add(result);
+            this.selectStep(result);
+            this.newOverseerStep = null;
+          },
+          error: (error) => {
+            console.error(error);
+            this.alerts.error(error, 3000);
+          },
+        });
+    } else {
+      this.overseerStepService
+        .update(
+          {
+            id: this.selectedOverseerStep.id,
+            unitId: this.unit.id,
+            taskDefId: this.taskDefinition.id,
+          },
+          {
+            entity: this.selectedOverseerStep,
+            cache: this.taskDefinition.overseerStepsCache,
+          },
+        )
+        .subscribe({
+          next: (_result) => {
+            this.alerts.success('Saved overseer step', 3000);
+          },
+          error: (error) => {
+            console.error(error);
+            this.alerts.error(error, 3000);
+          },
+        });
+    }
+  }
+
   public get overseerEnabled(): boolean {
     return this.unit.overseerEnabled;
   }
@@ -42,20 +261,28 @@ export class TaskDefinitionOverseerComponent implements OnChanges {
     return this.taskDefinition?.unit;
   }
 
-  public get images(): Observable<OverseerImage[]> {
-    return this.overseerImageService.query();
-  }
-
   get currentUser(): User {
     return this.userService.currentUser;
   }
 
-  public ngOnChanges() {
+  public taskDefinitionHasChanges(): boolean {
+    return this.taskDefinition.hasChanges(this.taskDefinitionService.mapping);
+  }
+
+  public ngOnChanges(changes: SimpleChanges) {
     const proj = this.unit.findProjectForUsername(this.currentUser.username);
     if (proj) {
       this.currentUserTask = proj.findTaskForDefinition(this.taskDefinition.id);
       this.hasAnySubmissions();
     }
+    if (changes['taskDefinition']) {
+      this.taskDefinition.overseerStepsCache.values.subscribe((steps) => {
+        this.overseerSteps = [...steps];
+      });
+      this.showOverseerResourcesEditor = false;
+      this.isLoadingOverseerResourcesArchive = false;
+      this.overseerResourcesArchive = null;
+    }
   }
 
   testSubmission() {
@@ -65,37 +292,105 @@ export class TaskDefinitionOverseerComponent implements OnChanges {
       this.currentUserTask.definition = this.taskDefinition;
       this.currentUserTask.status = 'ready_for_feedback';
       this.currentUserTask.id = this.taskDefinition.id; // set a default id...
-      this.hasAnySubmissions();
+      // this.hasAnySubmissions();
     }
 
     this.currentUserTask.presentTaskSubmissionModal(this.currentUserTask.status, false, true);
   }
 
+  editScript() {
+    this.overseerScriptEditorModal.show(this.taskDefinition);
+  }
+
   testSubmissionHistory() {
     this.modalService.show(this.currentUserTask);
   }
 
   private hasAnySubmissions() {
-    if (!this.currentUserTask) return;
+    if (!this.currentUserTask) {
+      return;
+    }
 
     this.submissions.getLatestSubmissionsTimestamps(this.currentUserTask).subscribe({
-      next: (result: OverseerAssessment[]) => {},
       error: (error) => {
         this.alerts.error('Error: ' + error, 6000);
       },
     });
   }
 
-  public uploadOverseerResources(files: FileList) {
-    const validFiles = Array.from(files as ArrayLike<File>).filter((f) => f.type === 'application/zip');
+  public removeOverseerResources() {
+    this.taskDefinition.deleteOverseerResources().subscribe({
+      next: () => {
+        this.alerts.success('Deleted Overseer Resources', 2000);
+        this.taskDefinition.hasTaskAssessmentResources = false;
+        this.showOverseerResourcesEditor = false;
+        this.overseerResourcesArchive = null;
+      },
+    });
+  }
+
+  public downloadOverseerResources() {
+    this.fileDownloaderService.downloadFile(
+      this.taskDefinition.getOverseerResourcesUrl(),
+      this.taskDefinition.name + '.zip',
+    );
+  }
+
+  public uploadOverseerResources(files: ArrayLike<File>) {
+    const validFiles = Array.from(files as ArrayLike<File>).filter(
+      (f) => f.type === 'application/zip' || f.type === 'application/x-zip-compressed',
+    );
     if (validFiles.length > 0) {
       const file = validFiles[0];
-      this.taskDefinitionService.uploadTaskResources(this.taskDefinition, file).subscribe({
-        next: () => this.alerts.success('Uploaded task sheet', 2000),
+      this.taskDefinitionService.uploadOverseerResources(this.taskDefinition, file).subscribe({
+        next: (resourceFiles) => {
+          this.alerts.success('Uploaded Overseer Resources', 2000);
+          this.taskDefinition.hasTaskAssessmentResources = true;
+          this.taskDefinition.overseerResourceFiles = [...resourceFiles];
+          this.overseerResourcesArchive = file;
+        },
         error: (message) => this.alerts.error(message, 6000),
       });
     } else {
-      this.alerts.error('Please drop a PDF to upload for this task', 6000);
+      this.alerts.error('Please drop a zip with scripts for this task to upload', 6000);
+    }
+  }
+
+  public toggleOverseerResourcesEditor() {
+    this.showOverseerResourcesEditor = !this.showOverseerResourcesEditor;
+    if (
+      this.showOverseerResourcesEditor &&
+      !this.overseerResourcesArchive &&
+      this.taskDefinition?.hasTaskAssessmentResources
+    ) {
+      this.loadOverseerResourcesArchive();
+    }
+  }
+
+  public onOverseerResourcesArchiveSaved(response: HttpResponse<unknown>) {
+    this.taskDefinition.hasTaskAssessmentResources = true;
+
+    if (Array.isArray(response.body)) {
+      this.taskDefinition.overseerResourceFiles = response.body.filter(
+        (file): file is string => typeof file === 'string',
+      );
     }
   }
+
+  private loadOverseerResourcesArchive() {
+    this.isLoadingOverseerResourcesArchive = true;
+    this.http.get(this.taskDefinition.getOverseerResourcesUrl(), {responseType: 'blob'}).subscribe({
+      next: (archiveBlob) => {
+        this.overseerResourcesArchive = archiveBlob;
+      },
+      error: (error) => {
+        this.isLoadingOverseerResourcesArchive = false;
+        this.showOverseerResourcesEditor = false;
+        this.alerts.error(`Failed to load Overseer Resources Zip: ${error?.error?.error ?? error}`);
+      },
+      complete: () => {
+        this.isLoadingOverseerResourcesArchive = false;
+      },
+    });
+  }
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.html
new file mode 100644
index 0000000000..62decec78a
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.html
@@ -0,0 +1,119 @@
+<div class="flex flex-col">
+  <div class="flex flex-grow flex-row">
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="task-definition">
+        <th *matHeaderCellDef mat-header-cell>Task</th>
+        <td
+          *matCellDef="let link"
+          mat-cell
+          [class.line-through]="link.hasMetRequiredState($safeNavigationMigration(task?.project))"
+        >
+          {{ link.prerequisite?.abbreviation }} {{ link.prerequisite?.name }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="minimum-required-state">
+        <th *matHeaderCellDef mat-header-cell>
+          @if (staffView) {
+            Minimum Required Status
+          } @else {
+            Current Status
+          }
+        </th>
+        <td
+          *matCellDef="let link"
+          mat-cell
+          [class.line-through]="link.hasMetRequiredState($safeNavigationMigration(task?.project))"
+        >
+          @if (!staffView) {
+            <status-icon
+              matBadgePosition="before"
+              [status]="
+                link.prerequisite?.projectTask($safeNavigationMigration(task?.project))?.status ??
+                'not_started'
+              "
+            ></status-icon>
+          } @else {
+            @if (link.taskStatus) {
+              <mat-select
+                matTooltip="Task must reach this state before students can submit"
+                matTooltipShowDelay="1000"
+                placeholder="Select required status"
+                [(value)]="link.taskStatus"
+                (selectionChange)="updateTaskPrerequisite(link)"
+              >
+                @for (state of stateOptions; track state) {
+                  <mat-option [value]="state.value">
+                    {{ state.label }}
+                  </mat-option>
+                }
+              </mat-select>
+            }
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th *matHeaderCellDef class="whitespace-nowrap" mat-header-cell>
+          @if (staffView) {
+            Actions
+          } @else {
+            Required Status
+          }
+        </th>
+        <td *matCellDef="let link" mat-cell>
+          @if (staffView) {
+            <td class="px-2 py-1 text-right">
+              <button
+                aria-label="Remove prerequisite"
+                color="warn"
+                mat-icon-button
+                (click)="removePrerequisite(link)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </td>
+          } @else {
+            <status-icon
+              matBadgePosition="before"
+              [status]="link.taskStatus ?? 'complete'"
+            ></status-icon>
+          }
+        </td>
+      </ng-container>
+      <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+      <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+    </table>
+  </div>
+
+  @if (staffView) {
+    <div class="flex flex-grow flex-row items-center">
+      <mat-form-field appearance="outline" class="mt-[22px] w-full">
+        <input
+          matInput
+          placeholder="Select a task prerequisite"
+          type="text"
+          [formControl]="searchCtrl"
+          [matAutocomplete]="auto"
+          [(ngModel)]="selectedTaskPrerequisite"
+        />
+        <button
+          class="mr-2.5"
+          color="primary"
+          mat-raised-button
+          matSuffix
+          [disabled]="!selectedTaskPrerequisite"
+          (click)="addTaskPrerequisite($event)"
+        >
+          <mat-icon class="icon_display">add</mat-icon>
+          Add
+        </button>
+        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+          @for (td of filteredTaskDefs; track td) {
+            <mat-option [value]="td"> {{ td.abbreviation }} - {{ td.name }} </mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
+  }
+</div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.scss b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.ts
new file mode 100644
index 0000000000..7870470c2c
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-prerequisites/task-definition-prerequisites.component.ts
@@ -0,0 +1,250 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {MatTableDataSource} from '@angular/material/table';
+import {Observable, Subscription} from 'rxjs';
+import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {TaskPrerequisite} from 'src/app/api/models/task-prerequisite';
+import {TaskStatusEnum} from 'src/app/api/models/task-status';
+import {Unit} from 'src/app/api/models/unit';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {TaskPrerequisiteService} from 'src/app/api/services/task-prerequisite.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-task-definition-prerequisites',
+  templateUrl: 'task-definition-prerequisites.component.html',
+  styleUrls: ['task-definition-prerequisites.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskDefinitionPrerequisitesComponent implements OnInit, OnChanges {
+  @Input() taskDefinition: TaskDefinition;
+  @Input() staffView: boolean;
+  @Input() task: Task;
+
+  displayedColumns: string[] = ['task-definition', 'minimum-required-state', 'actions'];
+
+  private prereqSub?: Subscription;
+
+  public dataSource: MatTableDataSource<TaskPrerequisite> = new MatTableDataSource();
+
+  selectedTaskPrerequisite: TaskDefinition | null = null;
+  searchCtrl = new FormControl('');
+
+  // All other task definitions in the unit (exclude the current one)
+  filteredTaskDefs: TaskDefinition[] = [];
+
+  public readonly STATES: Partial<Record<TaskStatusEnum, number>> = {
+    ready_for_feedback: 1,
+    assess_in_portfolio: 1,
+    discuss: 2,
+    attention_required: 0,
+    demonstrate: 2,
+    complete: 3,
+  };
+
+  public readonly stateOptions = [
+    {value: 'ready_for_feedback', label: 'Ready for Feedback'},
+    {value: 'discuss', label: 'Discuss'},
+    {value: 'complete', label: 'Complete'},
+  ];
+
+  constructor(
+    private taskDefinitionService: TaskDefinitionService,
+    private alertService: AlertService,
+    private taskPrerequisiteService: TaskPrerequisiteService,
+  ) {}
+  public get unit(): Unit {
+    return this.taskDefinition?.unit;
+  }
+
+  public get prerequisites(): Observable<TaskPrerequisite[]> {
+    return this.taskDefinition.taskPrerequisitesCache.values;
+  }
+
+  ngOnInit(): void {
+    this.searchCtrl.valueChanges.subscribe((value: string | TaskDefinition) => {
+      const search = (typeof value === 'string' ? value : value?.name || '').toLowerCase();
+      this.filterTaskDefs(search);
+    });
+
+    this.prereqSub = this.taskDefinition.taskPrerequisitesCache.values.subscribe((values) => {
+      this.dataSource.data = values;
+    });
+
+    // this.fetchTaskPrerequisites();
+  }
+
+  private mapPrerequisites(taskDefinition: TaskDefinition) {
+    const prerequisites = taskDefinition.taskPrerequisitesCache.currentValues;
+    const definitions = taskDefinition.unit.taskDefinitions;
+    for (const prerequisite of prerequisites) {
+      prerequisite.taskDefinition = definitions.find(
+        (td) => td.id === prerequisite.taskDefinitionId,
+      );
+      prerequisite.prerequisite = definitions.find((td) => td.id === prerequisite.prerequisiteId);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes.taskDefinition &&
+      changes.taskDefinition.previousValue?.id !== changes.taskDefinition.currentValue?.id
+    ) {
+      this.filterTaskDefs(this.searchCtrl.value ?? '');
+      this.prereqSub?.unsubscribe();
+      this.prereqSub = this.taskDefinition.taskPrerequisitesCache.values.subscribe((values) => {
+        this.dataSource.data = values;
+      });
+      this.fetchTaskPrerequisites();
+    }
+  }
+
+  private fetchTaskPrerequisites() {
+    const taskDefinition = this.taskDefinition;
+    if (!taskDefinition.id) {
+      return;
+    }
+    this.taskPrerequisiteService
+      .query(
+        {
+          unitId: this.unit.id,
+          taskDefId: taskDefinition.id,
+        },
+        {
+          cache: taskDefinition.taskPrerequisitesCache,
+        },
+      )
+      .subscribe({
+        next: (data) => {
+          for (const prereq of data) {
+            if (prereq.taskDefinitionId !== taskDefinition.id) {
+              continue;
+            }
+            taskDefinition.taskPrerequisitesCache.getOrCreate(
+              prereq.id,
+              this.taskPrerequisiteService,
+              prereq,
+            );
+          }
+          this.mapPrerequisites(taskDefinition);
+          this.filterTaskDefs(this.searchCtrl.value ?? '');
+        },
+        error: (error) => {
+          this.alertService.error(
+            `Failed to fetch prerequisites for task definition: ${error}`,
+            6000,
+          );
+        },
+      });
+  }
+
+  private filterTaskDefs(search: string) {
+    this.filteredTaskDefs = this.taskDefinition.unit.taskDefinitionCache.currentValues
+      // Hide self from the list
+      .filter((td) => td.id !== this.taskDefinition.id)
+      // Hide tasks already added as a prerequisite
+      .filter(
+        (td) =>
+          !this.taskDefinition.taskPrerequisitesCache.currentValues.some(
+            (p: TaskPrerequisite) => p.prerequisite.id === td.id,
+          ),
+      )
+      // Higher target grades can not be a prerequisite
+      .filter((td) => td.targetGrade <= this.taskDefinition.targetGrade)
+      // Tasks with a later due date can not be a prerequisite
+      // .filter((td) => td.targetDate <= this.taskDefinition.targetDate)
+      // Search filter
+      .filter(
+        (td) =>
+          td.name.toLowerCase().includes(search) || td.abbreviation.toLowerCase().includes(search),
+      );
+  }
+
+  displayFn(td: TaskDefinition): string {
+    return td && td.abbreviation ? `${td.abbreviation} - ${td.name}` : '';
+  }
+
+  public addTaskPrerequisite(event: Event): void {
+    event.stopPropagation();
+    const taskDefinition = this.taskDefinition;
+    const selectedTaskPrerequisite = this.selectedTaskPrerequisite;
+
+    this.selectedTaskPrerequisite = null;
+
+    if (!taskDefinition) {
+      return this.alertService.error('Invalid task definition', 6000);
+    }
+
+    if (!selectedTaskPrerequisite) {
+      return this.alertService.error(
+        'Please select a task definition to add as a prerequisite',
+        6000,
+      );
+    }
+
+    this.taskDefinitionService
+      .addTaskPrerequisite(taskDefinition, selectedTaskPrerequisite)
+      .subscribe({
+        next: (response) => {
+          if (!response) {
+            this.alertService.error('Failed to add task prerequisite', 6000);
+            return;
+          }
+          taskDefinition.taskPrerequisitesCache.getOrCreate(
+            response.id,
+            this.taskPrerequisiteService,
+            response,
+          );
+          this.mapPrerequisites(taskDefinition);
+
+          this.alertService.success(
+            `Successfully added task ${selectedTaskPrerequisite.abbreviation} as a prerequisite`,
+            5000,
+          );
+          this.unit.refresh();
+          this.filterTaskDefs(this.searchCtrl.value ?? '');
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to add task prerequisite: ${error}`, 6000);
+        },
+      });
+  }
+
+  public updateTaskPrerequisite(prerequisiteLink: TaskPrerequisite) {
+    this.taskDefinitionService
+      .updateTaskPrerequisite(prerequisiteLink, prerequisiteLink.taskStatus)
+      .subscribe({
+        next: (response) => {
+          if (!response) {
+            this.alertService.error('Failed to update task prerequisite', 6000);
+            return;
+          }
+          this.alertService.success(
+            `Successfully updated prerequisite ${prerequisiteLink.prerequisite.abbreviation} to ${prerequisiteLink.taskStatus} `,
+            5000,
+          );
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to update task prerequisite: ${error}`, 6000);
+        },
+      });
+  }
+
+  public removePrerequisite(prerequisiteToRemove: TaskPrerequisite) {
+    if (!prerequisiteToRemove) {
+      return;
+    }
+    prerequisiteToRemove.delete().subscribe(() => {
+      this.filterTaskDefs(this.searchCtrl.value ?? '');
+    });
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.html
index 82ae176482..b007b7cdeb 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.html
@@ -1,36 +1,43 @@
-<div class="flex flex-row gap-4">
-  <div class="basis-1/2 flex flex-col">
+<div class="flex flex-row gap-2.5">
+  <div class="flex basis-1/2 flex-col">
     <f-file-drop
-      mode="event"
-      (filesDropped)="uploadTaskSheet($event)"
       accept="application/pdf"
+      mode="event"
       [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' pdf'"
+      (filesDropped)="uploadTaskSheet($event)"
     />
     @if (taskDefinition.hasTaskSheet) {
-<div class="flex flex-row gap-4 pt-4">
-      <button mat-flat-button color="warn" (click)="removeTaskSheet()" class="flex-grow me-4">Delete Task Sheet</button>
-      <button mat-flat-button color="accent" (click)="downloadTaskSheet()" class="flex-grow ms-4">
-        Download Task Sheet
-      </button>
-    </div>
-}
+      <div class="flex flex-row gap-2.5 pt-2.5">
+        <button class="me-4 flex-grow" color="warn" mat-flat-button (click)="removeTaskSheet()">
+          Delete Task Sheet
+        </button>
+        <button class="ms-4 flex-grow" color="accent" mat-flat-button (click)="downloadTaskSheet()">
+          Download Task Sheet
+        </button>
+      </div>
+    }
   </div>
-  <div class="basis-1/2 flex flex-col">
+  <div class="flex basis-1/2 flex-col">
     <f-file-drop
+      accept="application/zip,application/x-zip-compressed"
       mode="event"
-      (filesDropped)="uploadTaskResources($event)"
-      accept="application/zip"
       [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' zip'"
+      (filesDropped)="uploadTaskResources($event)"
     />
     @if (taskDefinition.hasTaskResources) {
-<div class="flex flex-row gap-4 pt-4">
-      <button mat-flat-button color="warn" (click)="removeTaskResources()" class="flex-grow me-4">
-        Delete Task Zip
-      </button>
-      <button mat-flat-button color="accent" (click)="downloadTaskResources()" class="flex-grow ms-4">
-        Download Task Zip
-      </button>
-    </div>
-}
+      <div class="flex flex-row gap-2.5 pt-2.5">
+        <button class="me-4 flex-grow" color="warn" mat-flat-button (click)="removeTaskResources()">
+          Delete Task Zip
+        </button>
+        <button
+          class="ms-4 flex-grow"
+          color="accent"
+          mat-flat-button
+          (click)="downloadTaskResources()"
+        >
+          Download Task Zip
+        </button>
+      </div>
+    }
   </div>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.ts
index aa62abe87f..a3894a0ef1 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-resources/task-definition-resources.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {TaskDefinition} from 'src/app/api/models/task-definition';
 import {Unit} from 'src/app/api/models/unit';
 import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
@@ -9,6 +9,8 @@ import {AlertService} from 'src/app/common/services/alert.service';
   selector: 'f-task-definition-resources',
   templateUrl: 'task-definition-resources.component.html',
   styleUrls: ['task-definition-resources.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDefinitionResourcesComponent {
   @Input() taskDefinition: TaskDefinition;
@@ -51,7 +53,7 @@ export class TaskDefinitionResourcesComponent {
     });
   }
 
-  public uploadTaskSheet(files: FileList) {
+  public uploadTaskSheet(files: ArrayLike<File>) {
     const validFiles = Array.from(files as ArrayLike<File>).filter(
       (f) => f.type === 'application/pdf',
     );
@@ -69,9 +71,9 @@ export class TaskDefinitionResourcesComponent {
     }
   }
 
-  public uploadTaskResources(files: FileList) {
+  public uploadTaskResources(files: ArrayLike<File>) {
     const validFiles = Array.from(files as ArrayLike<File>).filter(
-      (f) => f.type === 'application/zip',
+      (f) => f.type === 'application/zip' || f.type === 'application/x-zip-compressed',
     );
     if (validFiles.length > 0) {
       const file = validFiles[0];
@@ -83,7 +85,7 @@ export class TaskDefinitionResourcesComponent {
         error: (message) => this.alerts.error(message, 6000),
       });
     } else {
-      this.alerts.error('Please drop a PDF to upload for this task', 6000);
+      this.alerts.error('Please drop a Zip to upload for this task', 6000);
     }
   }
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.html
new file mode 100644
index 0000000000..fed230e694
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.html
@@ -0,0 +1,64 @@
+<div class="flex flex-col gap-2.5">
+  <mat-checkbox matInput required [(ngModel)]="taskDefinition.scormEnabled">
+    Enable test for task
+  </mat-checkbox>
+
+  @if (taskDefinition.scormEnabled) {
+    <f-file-drop
+      accept="application/zip"
+      mode="event"
+      [desiredFileName]="'SCORM zip'"
+      (filesDropped)="uploadScormData($event)"
+    />
+    @if (taskDefinition.hasScormData) {
+      <div class="flex flex-row gap-2.5 pt-2.5">
+        <button class="me-4 flex-grow" color="warn" mat-flat-button (click)="removeScormData()">
+          Delete SCORM Zip
+        </button>
+        <button class="mx-4 flex-grow" color="accent" mat-flat-button (click)="downloadScormData()">
+          Download SCORM Zip
+        </button>
+        <button class="me-4 flex-grow" color="accent" mat-flat-button (click)="previewScormTest()">
+          Preview SCORM Test
+        </button>
+      </div>
+    }
+
+    <div class="flex flex-grow flex-row gap-2.5 pt-2.5">
+      <div class="basis-1/2">
+        <mat-checkbox matInput required [(ngModel)]="taskDefinition.scormAllowReview">
+          Allow students to review completed test attempt
+        </mat-checkbox>
+        <mat-checkbox matInput required [(ngModel)]="taskDefinition.scormBypassTest">
+          Allow file upload regardless of test pass status
+        </mat-checkbox>
+      </div>
+      <mat-form-field appearance="outline" class="basis-1/2">
+        <mat-label>Limit to this number of attempts - 0 is unlimited</mat-label>
+        <input
+          matInput
+          max="100"
+          min="0"
+          type="number"
+          [(ngModel)]="taskDefinition.scormAttemptLimit"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="flex flex-grow flex-row gap-2.5 pt-2.5">
+      <mat-checkbox
+        class="basis-1/2"
+        disabled
+        matInput
+        required
+        [(ngModel)]="taskDefinition.scormTimeDelayEnabled"
+      >
+        Enable incremental time delays between test attempts
+      </mat-checkbox>
+      <span class="basis-1/2" disabled
+        >If enabled, first 2 attempts can be completed immediately. Subsequently, a time delay will
+        be added, increasing by 2 hours every attempt made.</span
+      >
+    </div>
+  }
+</div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.scss b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.ts
new file mode 100644
index 0000000000..d0eae3dfdd
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component.ts
@@ -0,0 +1,68 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-task-definition-scorm',
+  templateUrl: 'task-definition-scorm.component.html',
+  styleUrls: ['task-definition-scorm.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskDefinitionScormComponent {
+  @Input() taskDefinition: TaskDefinition;
+
+  constructor(
+    private fileDownloaderService: FileDownloaderService,
+    private alerts: AlertService,
+    private taskDefinitionService: TaskDefinitionService,
+  ) {}
+
+  public get unit(): Unit {
+    return this.taskDefinition?.unit;
+  }
+
+  /**
+   * Open the SCORM test in a new tab - using preview mode.
+   */
+  public previewScormTest() {
+    this.taskDefinition.previewScormTest();
+  }
+
+  public downloadScormData() {
+    this.fileDownloaderService.downloadFile(
+      this.taskDefinition.getScormDataUrl(true),
+      this.taskDefinition.name + '-SCORM.zip',
+    );
+  }
+
+  public removeScormData() {
+    this.taskDefinition.deleteScormData().subscribe({
+      next: () => this.alerts.success('Deleted SCORM test data', 2000),
+      error: (message) => this.alerts.error(message, 6000),
+    });
+  }
+
+  public uploadScormData(files: ArrayLike<File>) {
+    // console.log(Array.from(files).map((f) => f.type));
+    const validMimeTypes = ['application/zip', 'application/x-zip-compressed', 'multipart/x-zip'];
+    const validFiles = Array.from(files as ArrayLike<File>).filter((f) =>
+      validMimeTypes.includes(f.type),
+    );
+    if (validFiles.length > 0) {
+      const file = validFiles[0];
+      this.taskDefinitionService.uploadScormData(this.taskDefinition, file).subscribe({
+        next: () => {
+          this.alerts.success('Uploaded SCORM test data', 2000);
+          this.taskDefinition.hasScormData = true;
+        },
+        error: (message) => this.alerts.error(message, 6000),
+      });
+    } else {
+      this.alerts.error('Please drop a zip file to upload SCORM test data for this task', 6000);
+    }
+  }
+}
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.html
index fe96cfb2df..c0c8ff6d21 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.html
@@ -1,57 +1,73 @@
-<table #upreqTable mat-table [dataSource]="taskDefinition.uploadRequirements" class="table-fixed">
+<table #upreqTable class="table-fixed" mat-table [dataSource]="taskDefinition.uploadRequirements">
   <!-- File name Column -->
   <ng-container matColumnDef="file-name" sticky>
-    <th style="width: 30%" mat-header-cell *matHeaderCellDef>Filename</th>
-    <td style="width: 30%" mat-cell *matCellDef="let upreq">
+    <th *matHeaderCellDef mat-header-cell style="width: 30%">Filename</th>
+    <td *matCellDef="let upreq" mat-cell style="width: 30%">
       <mat-form-field appearance="outline">
-        <input matInput [(ngModel)]="upreq.name" required />
+        <input matInput required [(ngModel)]="upreq.name" />
       </mat-form-field>
     </td>
   </ng-container>
 
   <!-- File Type Column -->
   <ng-container matColumnDef="file-type" sticky>
-    <th style="width: 20%" mat-header-cell *matHeaderCellDef>Type</th>
-    <td style="width: 20%" mat-cell *matCellDef="let upreq">
+    <th *matHeaderCellDef mat-header-cell style="width: 20%">Type</th>
+    <td *matCellDef="let upreq" mat-cell style="width: 20%">
       <mat-select placeholder="File Type" [(ngModel)]="upreq.type">
         <mat-option value="code">Code</mat-option>
         <mat-option value="document">Document</mat-option>
         <mat-option value="image">Image</mat-option>
+        <mat-option value="zip">ZIP</mat-option>
       </mat-select>
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="submission-history" sticky>
+    <th *matHeaderCellDef mat-header-cell style="width: 15%">Submission History</th>
+    <td *matCellDef="let upreq" mat-cell style="width: 15%">
+      <mat-checkbox
+        matTooltip="Retain this file in the task's submission history"
+        [(ngModel)]="upreq.submissionHistory"
+      ></mat-checkbox>
+    </td>
+  </ng-container>
+
   <!-- TurnItIn Check Column -->
   <ng-container matColumnDef="tii-check" sticky>
-    <th style="width: 20%" mat-header-cell *matHeaderCellDef>Check Similarity</th>
-    <td style="width: 20%" mat-cell *matCellDef="let upreq">
-      @if (upreq.type === 'document') {
-<mat-checkbox [(ngModel)]="upreq.tiiCheck">TurnItIn</mat-checkbox>
-}
+    <th *matHeaderCellDef mat-header-cell style="width: 20%">Check Similarity</th>
+    <td *matCellDef="let upreq" mat-cell style="width: 20%">
+      @if (upreq.type === 'document' && tiiEnabled()) {
+        <mat-checkbox [(ngModel)]="upreq.tiiCheck">TurnItIn</mat-checkbox>
+      }
       @if (upreq.type === 'code') {
-<mat-checkbox [(ngModel)]="upreq.tiiCheck">Moss</mat-checkbox>
-}
+        <mat-checkbox [(ngModel)]="upreq.tiiCheck">Jplag</mat-checkbox>
+      }
     </td>
   </ng-container>
 
   <!-- Flag Pct -->
   <ng-container matColumnDef="flag-pct" sticky>
-    <th style="width: 20%" mat-header-cell *matHeaderCellDef>Flag At</th>
-    <td style="width: 20%" mat-cell *matCellDef="let upreq">
-      @if (upreq.type === 'document' && upreq.tiiCheck) {
-<mat-form-field appearance="outline" style="width: 7em">
-        <input matInput [(ngModel)]="upreq.tiiPct" type="number" />
-        <span matTextSuffix>&nbsp;%</span>
-      </mat-form-field>
-}
+    <th *matHeaderCellDef mat-header-cell style="width: 20%">Flag At</th>
+    <td *matCellDef="let upreq" mat-cell style="width: 20%">
+      @if (upreq.type === 'document' && upreq.tiiCheck && tiiEnabled()) {
+        <mat-form-field appearance="outline" style="width: 7em">
+          <input matInput type="number" [(ngModel)]="upreq.tiiPct" />
+          <span matTextSuffix>&nbsp;%</span>
+        </mat-form-field>
+      }
     </td>
   </ng-container>
 
   <!-- Actions -->
   <ng-container matColumnDef="row-actions" sticky>
-    <th style="width: 10%" mat-header-cell *matHeaderCellDef></th>
-    <td style="width: 10%" mat-cell *matCellDef="let upreq">
-      <button mat-icon-button aria-label="delete upload requirement" color="warn" (click)="removeUpReq(upreq)">
+    <th *matHeaderCellDef mat-header-cell style="width: 10%"></th>
+    <td *matCellDef="let upreq" mat-cell style="width: 10%">
+      <button
+        aria-label="delete upload requirement"
+        color="warn"
+        mat-icon-button
+        (click)="removeUpReq(upreq)"
+      >
         <mat-icon>delete</mat-icon>
       </button>
     </td>
@@ -59,35 +75,72 @@
 
   <!-- Disclaimer column -->
   <ng-container matColumnDef="actions">
-    <td mat-footer-cell *matFooterCellDef [colSpan]="columns.length">
+    <td *matFooterCellDef mat-footer-cell [colSpan]="columns.length">
       <mat-toolbar>
         <mat-toolbar-row>
           <span class="flex flex-grow"></span>
-          <button mat-flat-button color="primary" (click)="addUpReq()"><mat-icon>add</mat-icon> Add</button>
+          <button color="primary" mat-flat-button (click)="addUpReq()">
+            <mat-icon>add</mat-icon> Add
+          </button>
         </mat-toolbar-row>
       </mat-toolbar>
     </td>
   </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="columns"></tr>
-  <tr mat-row *matRowDef="let row; columns: columns" class="table-row"></tr>
-  <tr mat-footer-row *matFooterRowDef="['actions']"></tr>
+  <tr *matHeaderRowDef="columns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: columns" class="table-row" mat-row></tr>
+  <tr *matFooterRowDef="['actions']" mat-footer-row></tr>
 </table>
 
-@if (taskDefinition.needsMoss) {
-<div class="flex-grow flex flex-row gap-4">
-  <mat-form-field appearance="outline" class="basis-1/2">
-    <mat-label>Language used for Moss checks</mat-label>
-    <mat-select [(ngModel)]="taskDefinition.mossLanguage">
-      <mat-option value="moss c">C</mat-option>
-      <mat-option value="moss csharp">C#</mat-option>
-      <mat-option value="moss cc">C++</mat-option>
-      <mat-option value="moss python">Python</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field appearance="outline" class="basis-1/2">
-    <mat-label>Similarity percent to flag for Moss checks</mat-label>
-    <input matInput [(ngModel)]="taskDefinition.plagiarismWarnPct" type="number" />
-  </mat-form-field>
-</div>
+@if (missingOverseerSubmissionHistory) {
+  <div class="mt-2 text-sm text-red-700">
+    Overseer requires at least one upload requirement to be retained in submission history.
+  </div>
+}
+
+@if (taskDefinition.needsJplag) {
+  <div class="flex flex-grow flex-row gap-2.5">
+    <mat-form-field appearance="outline" class="basis-1/2">
+      <mat-label>Language used for JPLAG checks</mat-label>
+      <mat-select [(ngModel)]="taskDefinition.similarityLanguage">
+        <mat-option value="java">Java</mat-option>
+        <mat-option value="c">C</mat-option>
+        <mat-option value="cpp">C++</mat-option>
+        <mat-option value="csharp">C#</mat-option>
+        <mat-option value="python3">Python</mat-option>
+        <mat-option value="javascript">JavaScript</mat-option>
+        <mat-option value="typescript">TypeScript</mat-option>
+        <mat-option value="golang">Go</mat-option>
+        <mat-option value="kotlin">Kotlin</mat-option>
+        <mat-option value="rlang">R</mat-option>
+        <mat-option value="rust">Rust</mat-option>
+        <mat-option value="swift">Swift</mat-option>
+        <mat-option value="scala">Scala</mat-option>
+        <mat-option value="llvmir">LLVM IR</mat-option>
+        <mat-option value="scheme">Scheme</mat-option>
+        <mat-option value="emf">EMF Metamodel</mat-option>
+        <mat-option value="emf-model">EMF Model</mat-option>
+        <mat-option value="scxml">SCXML</mat-option>
+        <mat-option value="text">Text</mat-option>
+        <mat-option value="multi">Multi-language</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field appearance="outline" class="basis-1/2">
+      <mat-label>Similarity percent to flag for JPLAG checks</mat-label>
+      <input matInput type="number" [(ngModel)]="taskDefinition.plagiarismWarnPct" />
+    </mat-form-field>
+  </div>
+  <div class="flex flex-grow">
+    <div class="basis-1/2">
+      <mat-slide-toggle [(ngModel)]="taskDefinition.useResourcesForJplagBaseCode">
+        Use Task Resources for JPlag Base Code</mat-slide-toggle
+      >
+      <p>
+        Base code is a common framework included in all submissions. When enabled, student code
+        matching this base code will be ignored during JPlag similarity checks. The base code will
+        be automatically extracted from the task resources.
+      </p>
+    </div>
+    <div class="basis-1/2"></div>
+  </div>
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.ts
index a8915d843b..0cb7e0b0d7 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-upload/task-definition-upload.component.ts
@@ -1,18 +1,30 @@
-import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { TaskDefinition, UploadRequirement } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
+import {ChangeDetectionStrategy, Component, Input, ViewChild} from '@angular/core';
+import {MatTable} from '@angular/material/table';
+import {TaskDefinition, UploadRequirement} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 
 @Component({
   selector: 'f-task-definition-upload',
   templateUrl: 'task-definition-upload.component.html',
   styleUrls: ['task-definition-upload.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDefinitionUploadComponent {
   @Input() public taskDefinition: TaskDefinition;
-  @ViewChild('upreqTable', { static: true }) table: MatTable<any>;
+  @ViewChild('upreqTable', {static: true}) table: MatTable<UploadRequirement>;
 
-  public columns: string[] = ['file-name', 'file-type', 'tii-check', 'flag-pct', 'row-actions'];
+  public columns: string[] = [
+    'file-name',
+    'file-type',
+    'submission-history',
+    'tii-check',
+    'flag-pct',
+    'row-actions',
+  ];
+
+  constructor(private constants: DoubtfireConstants) {}
 
   public get unit(): Unit {
     return this.taskDefinition?.unit;
@@ -26,13 +38,25 @@ export class TaskDefinitionUploadComponent {
       name: '',
       tiiCheck: false,
       tiiPct: 30,
+      submissionHistory: false,
     });
     this.table.renderRows();
   }
 
+  public tiiEnabled(): boolean {
+    return this.constants.IsTiiEnabled.value;
+  }
+
+  public get missingOverseerSubmissionHistory(): boolean {
+    return (
+      this.taskDefinition.assessmentEnabled &&
+      !this.taskDefinition.uploadRequirements.some((requirement) => requirement.submissionHistory)
+    );
+  }
+
   public removeUpReq(upreq: UploadRequirement) {
     this.taskDefinition.uploadRequirements = this.taskDefinition.uploadRequirements.filter(
-      (anUpReq) => anUpReq.key != upreq.key
+      (anUpReq) => anUpReq.key != upreq.key,
     );
   }
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.html
index 814e814197..e857fed00c 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.html
@@ -1,33 +1,64 @@
 @if (unit.hasGroupwork()) {
-<mat-form-field appearance="outline" class="flex flex-grow">
-  <mat-label>Is this an individual or group task? Select group that submits</mat-label>
-  <mat-select required [(value)]="taskDefinition.groupSet">
-    @for (gs of unit.groupSets; track gs) {
-  <mat-option [value]="gs">{{ gs.name }}</mat-option>
-}
-    <mat-option value="null">None - Individual Submission</mat-option>
-  </mat-select>
-</mat-form-field>
+  <mat-form-field appearance="outline" class="flex flex-grow">
+    <mat-label>Is this an individual or group task? Select group that submits</mat-label>
+    <mat-select required [(value)]="taskDefinition.groupSet">
+      @for (gs of unit.groupSets; track gs) {
+        <mat-option [value]="gs">{{ gs.name }}</mat-option>
+      }
+      <mat-option value="null">None - Individual Submission</mat-option>
+    </mat-select>
+  </mat-form-field>
 }
 
-<div class="flex flex-row gap-10">
+<div class="flex flex-row gap-6">
   <mat-form-field appearance="outline" class="basis-1/2">
     <mat-label>Tutorial Stream - Which tutor provides feedback?</mat-label>
-    <mat-select required [(value)]="taskDefinition.tutorialStream">
+    <mat-select
+      required
+      [(value)]="taskDefinition.tutorialStream"
+      (selectionChange)="onTutorialStreamChange()"
+    >
       @for (stream of unit.tutorialStreams; track stream) {
-  <mat-option [value]="stream">{{ stream.name }}</mat-option>
-}
+        <mat-option [value]="stream">{{ stream.name }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
   <span class="flex-grow">
     <strong class="">Related tutorials</strong>
     <ul>
-      @for (tutorial of taskDefinition.tutorialStream?.tutorialsIn(unit); track tutorial) {
-  <li>
-        {{ tutorial?.abbreviation }} {{ tutorial.tutor?.name }}
-      </li>
-}
+      @for (
+        tutorial of $safeNavigationMigration(taskDefinition.tutorialStream?.tutorialsIn(unit))
+          | slice: 0 : (showAllTutorials ? undefined : 3);
+        track tutorial
+      ) {
+        <li>{{ tutorial?.abbreviation }} {{ tutorial.tutor?.name }}</li>
+      }
+
+      @if (!showAllTutorials && taskDefinition.tutorialStream?.tutorialsIn(unit)?.length > 3) {
+        <li class="mt-0.5">
+          +{{ taskDefinition.tutorialStream.tutorialsIn(unit).length - 3 }} more tutorials
+        </li>
+      }
+      @if (taskDefinition.tutorialStream?.tutorialsIn(unit).length > 3) {
+        <div class="mt-2.5">
+          @if (!showAllTutorials) {
+            <button color="primary" mat-button (click)="showAllTutorials = true">
+              View all tutorials
+            </button>
+          } @else {
+            <button color="warn" mat-button (click)="showAllTutorials = false">
+              Collapse list
+            </button>
+          }
+        </div>
+      }
     </ul>
   </span>
 </div>
+
+<div>
+  <mat-slide-toggle [(ngModel)]="taskDefinition.lockAssessmentsToTutorialStream"
+    >Only allow tutors in this tutorial stream to assess this task</mat-slide-toggle
+  >
+</div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.ts
index 9732998592..7ef4f65c5a 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-who/task-definition-who.component.ts
@@ -1,16 +1,23 @@
-import { Component, Input } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
 
 @Component({
   selector: 'f-task-definition-who',
   templateUrl: 'task-definition-who.component.html',
   styleUrls: ['task-definition-who.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class TaskDefinitionWhoComponent {
   @Input() taskDefinition: TaskDefinition;
 
+  showAllTutorials: boolean = false;
   public get unit(): Unit {
     return this.taskDefinition?.unit;
   }
+
+  onTutorialStreamChange() {
+    this.showAllTutorials = false;
+  }
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
index d346b1ce84..a239a50f97 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
@@ -1,163 +1,265 @@
-<div class="flex flex-row gap-8">
-  <div class="flex-grow flex flex-col gap-8 gap-y-0">
-    <div class="flex flex-row">
-      <div>
-        <h3>Task List</h3>
-        <p>Plan the list of tasks for students to complete.</p>
+<div class="flex flex-grow flex-col gap-5 gap-y-0">
+  <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+    <div>
+      <h3>Task List</h3>
+      <p>Plan the list of tasks for students to complete.</p>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 md:justify-end">
+      <div class="flex items-center">
+        <label>Definitions CSV</label>
+        <div class="flex items-center">
+          <button mat-icon-button (click)="unit.downloadTaskDefinitionsCsv()">
+            <mat-icon>download</mat-icon>
+          </button>
+          <button mat-icon-button (click)="uploadTaskDefinitionsCsv()">
+            <mat-icon>upload_file</mat-icon>
+          </button>
+        </div>
       </div>
-      <span class="flex-grow"></span>
-      <div>
-        <mat-form-field appearance="outline">
-          <input
-            matInput
-            (keyup)="applyFilter($event.target.value)"
-            placeholder="Filter"
-            [(ngModel)]="filter"
-          />
-        </mat-form-field>
+      <div class="flex items-center">
+        <label>Resources as Zip</label>
+        <div class="flex items-center">
+          <button mat-icon-button (click)="unit.downloadAllTaskResourcesZip()">
+            <mat-icon>download</mat-icon>
+          </button>
+          <button mat-icon-button (click)="uploadTaskResourcesZip()">
+            <mat-icon>upload_file</mat-icon>
+          </button>
+        </div>
       </div>
     </div>
+  </div>
+  <div class="my-2 flex w-full items-center justify-end gap-2">
+    @if (unit.allowFlexibleDates) {
+      <button mat-raised-button (click)="manageDueDates = !manageDueDates">Manage Due Dates</button>
+    }
+    <button color="primary" mat-raised-button (click)="createTaskDefinition()">Add Task</button>
+  </div>
+
+  @if (unit.allowFlexibleDates) {
+    @if (manageDueDates) {
+      <br />
+      <mat-divider class="my-3"></mat-divider>
+      <br />
+      <div>
+        <h3>Manage Target Dates</h3>
+        <p>Modify or add target dates for each target grade</p>
+      </div>
+      <div class="mt-3.5">
+        <table class="mat-elevation-z0 w-full" mat-table [dataSource]="taskDefinitionSource">
+          <ng-container matColumnDef="taskDefinition">
+            <th *matHeaderCellDef mat-header-cell>Task</th>
+            <td *matCellDef="let td" class="w-fit whitespace-nowrap" mat-cell>
+              {{ td.abbreviation }} {{ td.name }}
+            </td>
+          </ng-container>
+
+          @for (grade of gradeColumns; track grade.value) {
+            <ng-container [matColumnDef]="gradeColumnId(grade)">
+              <th *matHeaderCellDef class="w-[160px] text-center" mat-header-cell>
+                <div class="flex w-full justify-center">
+                  <f-grade-icon [grade]="grade.value" [unit]="unit"></f-grade-icon>
+                </div>
+              </th>
+              <td *matCellDef="let td" mat-cell>
+                <div class="flex flex-col gap-1">
+                  <mat-form-field
+                    appearance="outline"
+                    class="flex w-[250px] items-center justify-center pt-[22px]"
+                    [ngClass]="{
+                      'date-error': isStartAfterTarget(td, grade),
+                    }"
+                  >
+                    <mat-label> Start Date </mat-label>
+                    <input
+                      matInput
+                      placeholder="Select date"
+                      [matDatepicker]="dpStart"
+                      [ngClass]="{
+                        'fallback-date': isFallbackStartDate(td, grade),
+                      }"
+                      [ngModel]="getGradeStartDate(td, grade)"
+                      (ngModelChange)="setGradeStartDate(td, grade, $event)"
+                    />
+                    <mat-datepicker-toggle matSuffix [for]="dpStart"></mat-datepicker-toggle>
+                    <mat-datepicker #dpStart></mat-datepicker>
+                  </mat-form-field>
+                  <mat-form-field
+                    appearance="outline"
+                    class="flex w-[250px] items-center justify-center"
+                    [ngClass]="{
+                      'date-error': isStartAfterTarget(td, grade),
+                    }"
+                  >
+                    <mat-label> Target Date </mat-label>
+                    <input
+                      matInput
+                      placeholder="Select date"
+                      [matDatepicker]="dpTarget"
+                      [ngClass]="{
+                        'fallback-date': isFallbackTargetDate(td, grade),
+                      }"
+                      [ngModel]="getGradeDueDate(td, grade)"
+                      (ngModelChange)="setGradeDueDate(td, grade, $event)"
+                    />
+                    @if (isStartAfterTarget(td, grade)) {
+                      <mat-hint class="text-red-500">
+                        Target date must be after start date
+                      </mat-hint>
+                    }
+                    <mat-datepicker-toggle matSuffix [for]="dpTarget"></mat-datepicker-toggle>
+                    <mat-datepicker #dpTarget></mat-datepicker>
+                  </mat-form-field>
+                </div>
+              </td>
+            </ng-container>
+          }
+
+          <tr *matHeaderRowDef="dueDateColumns" mat-header-row></tr>
+          <tr *matRowDef="let row; columns: dueDateColumns" mat-row></tr>
+        </table>
+      </div>
+    }
+  }
 
-    <table
-      class="flex-grow f-table selectable"
-      mat-table
-      [dataSource]="taskDefinitionSource"
-      matSort
-      (matSortChange)="sortData($event)"
+  <div class="flex flex-col items-start gap-2.5 md:flex-row">
+    <aside
+      class="self-start md:sticky md:top-2.5 md:shrink-0"
+      [ngClass]="{
+        'w-full md:w-[420px]': !isTaskListCollapsed,
+        'w-full md:w-[92px]': isTaskListCollapsed,
+      }"
     >
-      <ng-container matColumnDef="name" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Task Name</th>
-        <td
-          mat-cell
-          *matCellDef="let taskDefinition"
-          (click)="selectTaskDefinition(taskDefinition)"
-        >
-          {{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="grade" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Grade</th>
-        <td
-          mat-cell
-          *matCellDef="let taskDefinition"
-          (click)="selectTaskDefinition(taskDefinition)"
-        >
-          {{ taskDefinition.targetGradeText }}
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="startDate" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</th>
-        <td
-          mat-cell
-          *matCellDef="let taskDefinition"
-          (click)="selectTaskDefinition(taskDefinition)"
+      <div class="overflow-hidden rounded-2xl bg-white md:flex md:h-[calc(100vh-2rem)] md:flex-col">
+        <div
+          class="text-left text-[15px]"
+          [ngClass]="{
+            'px-0.5': !isTaskListCollapsed,
+            'px-0': isTaskListCollapsed,
+          }"
         >
-          {{ taskDefinition.startDate | date: 'd LLL y' }}
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="targetDate" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Due Date</th>
-        <td
-          mat-cell
-          *matCellDef="let taskDefinition"
-          (click)="selectTaskDefinition(taskDefinition)"
-        >
-          {{ taskDefinition.targetDate | date: 'd LLL y' }}
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="deadlineDate" sticky>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Deadline</th>
-        <td
-          mat-cell
-          *matCellDef="let taskDefinition"
-          (click)="selectTaskDefinition(taskDefinition)"
-        >
-          {{ taskDefinition.dueDate | date: 'd LLL y' }}
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="taskDefAction" sticky>
-        <th mat-header-cell *matHeaderCellDef></th>
-        <td mat-cell *matCellDef="let taskDefinition">
-          @if (taskDefinitionHasChanges(taskDefinition)) {
+          <div class="flex items-center" [ngClass]="{'justify-center': isTaskListCollapsed}">
             <button
+              class="flex flex-none items-center"
               mat-icon-button
-              aria-label="save task definition"
-              color="primary"
-              (click)="saveTaskDefinition(taskDefinition)"
+              [attr.aria-label]="isTaskListCollapsed ? 'Expand task list' : 'Collapse task list'"
+              (click)="toggleTaskListCollapsed()"
             >
-              <mat-icon>save</mat-icon>
+              <mat-icon class="flex items-center">
+                {{ isTaskListCollapsed ? 'chevron_right' : 'chevron_left' }}
+              </mat-icon>
             </button>
-          }
-          <button
-            mat-icon-button
-            aria-label="delete task definition"
-            color="warn"
-            (click)="deleteTaskDefinition(taskDefinition)"
-          >
-            <mat-icon>delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
+            @if (!isTaskListCollapsed) {
+              <button
+                aria-label="Search Icon"
+                class="flex flex-none items-center"
+                disabled
+                mat-icon-button
+              >
+                <mat-icon class="flex items-center">search</mat-icon>
+              </button>
+              <div class="grow pr-1">
+                <input
+                  autocomplete="off"
+                  class="w-full border-0 bg-transparent outline-none"
+                  placeholder="Search Tasks"
+                  spellcheck="false"
+                  type="text"
+                  [(ngModel)]="filter"
+                  (ngModelChange)="applyFilter($event)"
+                />
+              </div>
+            }
+          </div>
+        </div>
 
-      <!-- Action footer row -->
-      <ng-container matColumnDef="actions">
-        <td mat-footer-cell *matFooterCellDef [colSpan]="columns.length"></td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="columns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: columns"
-        [style.background]="selectedTaskDefinition === row ? 'lightblue' : ''"
-      ></tr>
-    </table>
-    <span class="flex items-center">
-      <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
-      <span class="flex-grow"></span>
-      <label>Definitions CSV</label>
-      <button mat-icon-button (click)="unit.downloadTaskDefinitionsCsv()">
-        <mat-icon>download</mat-icon>
-      </button>
-      <button mat-icon-button (click)="uploadTaskDefinitionsCsv()">
-        <mat-icon>upload_file</mat-icon>
-      </button>
-      <span class="flex-grow"></span>
-      <label>Resources as Zip</label>
-      <button mat-icon-button (click)="unit.downloadAllTaskResourcesZip()">
-        <mat-icon>download</mat-icon>
-      </button>
-      <button mat-icon-button (click)="uploadTaskResourcesZip()">
-        <mat-icon>upload_file</mat-icon>
-      </button>
-      <span class="flex-grow"></span>
-      <button mat-raised-button color="primary" (click)="createTaskDefinition()">Add Task</button>
-    </span>
-    @if (selectedTaskDefinition) {
-      <f-task-definition-editor
-        [taskDefinition]="selectedTaskDefinition"
-        [unit]="unit"
-      ></f-task-definition-editor>
-    }
-  </div>
-  <!-- <div class="flex flex-col gap-4">
-    <h3>Batch Upload Tasks</h3>
-    <p>Batch upload task definitions with a CSV. Download to get format.</p>
-
-    <f-file-drop
-      mode="endpoint"
-      [endpoint]="unit.getTaskDefinitionBatchUploadUrl()"
-      desiredFileName="Task Definition csv"
-      accept="text/csv"
-      (uploadSuccess)="onSuccessTaskDefinitionBatchUpload($event)"
-    />
-
-    <h3>Download Tasks</h3>
-    <p>Download all task definitions for this unit.</p>
+        <div class="h-[560px] overflow-auto md:h-auto md:flex-1">
+          <mat-selection-list [multiple]="false">
+            @if ((taskDefinitionSource?.filteredData ?? []).length === 0) {
+              <div class="text-muted p-2 text-center">No task definitions to display</div>
+            }
+            @for (
+              taskDefinition of taskDefinitionSource?.filteredData ?? [];
+              track taskDefinition
+            ) {
+              <mat-list-item class="clearfix h-[60px] p-0" [disableRipple]="true">
+                <div
+                  class="flex h-[60px] w-full cursor-pointer items-center rounded-[6px] hover:bg-gray-50"
+                  matTooltipPosition="above"
+                  [matTooltip]="taskDefinition.name"
+                  [matTooltipDisabled]="!isTaskListCollapsed"
+                  [matTooltipShowDelay]="250"
+                  [ngClass]="{
+                    'bg-[#e7e7ff]': isSelectedTaskDefinition(taskDefinition),
+                  }"
+                  (click)="selectTaskDefinition(taskDefinition)"
+                >
+                  <div class="flex w-full items-center px-[6px]">
+                    <div
+                      class="flex w-full items-center"
+                      [ngClass]="{'justify-center': isTaskListCollapsed}"
+                    >
+                      <f-task-badge
+                        [highlight]="isSelectedTaskDefinition(taskDefinition)"
+                        [taskDef]="taskDefinition"
+                      ></f-task-badge>
 
+                      @if (!isTaskListCollapsed) {
+                        <div class="ml-2.5 min-w-0 flex-1 flex-col">
+                          <h4 class="mt-[8px] mb-[-2px] line-clamp-1 text-[15px]">
+                            {{ taskDefinition.name }}
+                          </h4>
+                          <div class="mb-0 text-[12px]">
+                            {{ gradeNames[taskDefinition.targetGrade] }} Task
+                          </div>
+                        </div>
 
+                        <div
+                          class="flex items-center gap-0.5 pr-0.5"
+                          (click)="$event.stopPropagation()"
+                        >
+                          @if (taskDefinitionHasChanges(taskDefinition)) {
+                            <button
+                              aria-label="save task definition"
+                              color="primary"
+                              mat-icon-button
+                              (click)="saveTaskDefinition(taskDefinition)"
+                            >
+                              <mat-icon>save</mat-icon>
+                            </button>
+                          }
+                          <button
+                            aria-label="delete task definition"
+                            color="warn"
+                            mat-icon-button
+                            (click)="deleteTaskDefinition(taskDefinition)"
+                          >
+                            <mat-icon>delete</mat-icon>
+                          </button>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                </div>
+              </mat-list-item>
+            }
+          </mat-selection-list>
+        </div>
+      </div>
+    </aside>
 
-    <h3>Batch Upload Task PDFs</h3>
-    <p>Upload all of the task PDFs in a Zip file.</p>
-    <f-file-drop [endpoint]="unit.taskUploadUrl" accept="application/zip" desiredFileName="Task PDFs in zip" (uploadSuccess)="onSuccessTaskZipUpload($event)" />
-  </div> -->
+    <div class="w-full min-w-0 flex-1">
+      @if (selectedTaskDefinition) {
+        <f-task-definition-editor
+          [taskDefinition]="selectedTaskDefinition"
+          [unit]="unit"
+        ></f-task-definition-editor>
+      } @else {
+        <div class="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-5 text-gray-600">
+          <h4>Select a task definition</h4>
+          <p>Pick a task from the left list to edit its details.</p>
+        </div>
+      }
+    </div>
+  </div>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.scss b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.scss
index 5996af349a..da9f77f5b0 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.scss
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.scss
@@ -1,6 +1,16 @@
-.mat-toolbar {
-  background-color: white;
-  // position: fixed;
-  // bottom: 0;
-  // width: 100%;
+::ng-deep input.mat-mdc-input-element.fallback-date {
+  font-style: italic;
+  color: #bfbfbf !important;
+  -webkit-text-fill-color: #bfbfbf !important; /* fixes some WebKit cases */
+}
+
+::ng-deep .date-error .mdc-notched-outline__leading,
+::ng-deep .date-error .mdc-notched-outline__notch,
+::ng-deep .date-error .mdc-notched-outline__trailing {
+  border-color: #ef4444 !important; // tailwind red-500
+}
+
+::ng-deep .date-error .mat-mdc-input-element {
+  color: #ef4444 !important;
+  -webkit-text-fill-color: #ef4444 !important;
 }
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.spec.ts b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.spec.ts
new file mode 100644
index 0000000000..c3f7f27e02
--- /dev/null
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.spec.ts
@@ -0,0 +1,111 @@
+import {describe, expect, it, vi} from 'vitest';
+import {UnitTaskEditorComponent} from './unit-task-editor.component';
+
+// The component is constructed directly rather than through TestBed. The three
+// handlers under test touch only the selected task definition, the filter and
+// the confirmation modal, so a real component tree buys nothing here.
+function editorWith(selected: unknown) {
+  const confirmationModal = {show: vi.fn()};
+  const taskDefinitionService = {mapping: {}};
+
+  const component = new UnitTaskEditorComponent(
+    taskDefinitionService as never,
+    {query: () => ({subscribe: () => {}})} as never, // feedbackTemplateService
+    {error: () => {}} as never, // alerts
+    {} as never, // csvResultModalService
+    {} as never, // csvUploadModal
+    confirmationModal as never,
+  );
+
+  component.selectedTaskDefinition = selected as never;
+  return {component, confirmationModal};
+}
+
+// A saved task that has not been edited. hasChanges is what the component asks.
+function savedTask(abbreviation: string) {
+  return {
+    id: 1,
+    abbreviation,
+    isNew: false,
+    hasOriginalSaveData: true,
+    hasChanges: () => false,
+    setOriginalSaveData: () => {},
+  };
+}
+
+// A task built by Add Task and never saved. isNew is true and hasChanges is
+// false, because nothing ever recorded original save data for it.
+function unsavedTask() {
+  return {
+    id: undefined as number | undefined,
+    abbreviation: '1.1P',
+    isNew: true,
+    hasOriginalSaveData: false,
+    hasChanges: () => false,
+    setOriginalSaveData: () => {},
+  };
+}
+
+describe('UnitTaskEditorComponent unsaved task guard', () => {
+  it('keeps an unsaved task on screen while the list is filtered', () => {
+    const {component} = editorWith(unsavedTask());
+    const task = component.selectedTaskDefinition;
+
+    component.taskDefinitionSource.filter = '';
+    component.applyFilter('a');
+
+    expect(component.taskDefinitionSource.filter).toBe('a');
+    expect(component.selectedTaskDefinition).toBe(task);
+  });
+
+  it('asks before another task replaces an unsaved one', () => {
+    const {component, confirmationModal} = editorWith(unsavedTask());
+    const task = component.selectedTaskDefinition;
+    const other = savedTask('2.1C');
+
+    component.selectTaskDefinition(other as never);
+
+    expect(confirmationModal.show).toHaveBeenCalledTimes(1);
+    expect(confirmationModal.show).toHaveBeenCalledWith(
+      'Discard unsaved changes',
+      'This task has unsaved changes. If you continue, they will be lost.',
+      expect.any(Function),
+    );
+    expect(component.selectedTaskDefinition).toBe(task);
+
+    // Running the callback is what the convenor choosing to discard looks like.
+    const proceed = confirmationModal.show.mock.calls[0][2] as () => void;
+    proceed();
+
+    expect(component.selectedTaskDefinition).toBe(other);
+  });
+
+  it('asks before a second Add Task discards the first one', () => {
+    const {component, confirmationModal} = editorWith(unsavedTask());
+
+    component.createTaskDefinition();
+
+    expect(confirmationModal.show).toHaveBeenCalledTimes(1);
+  });
+
+  // The guard must not get in the way of ordinary use.
+  it('does not ask when nothing is selected', () => {
+    const {component, confirmationModal} = editorWith(null);
+    const other = savedTask('2.1C');
+
+    component.selectTaskDefinition(other as never);
+
+    expect(confirmationModal.show).not.toHaveBeenCalled();
+    expect(component.selectedTaskDefinition).toBe(other);
+  });
+
+  it('does not ask when the selected task is saved and untouched', () => {
+    const {component, confirmationModal} = editorWith(savedTask('1.1P'));
+    const other = savedTask('2.1C');
+
+    component.selectTaskDefinition(other as never);
+
+    expect(confirmationModal.show).not.toHaveBeenCalled();
+    expect(component.selectedTaskDefinition).toBe(other);
+  });
+});
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
index ee0f135c26..fad9c8e198 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
@@ -1,54 +1,123 @@
-import { AfterViewInit, Component, Inject, Input, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { Subscription } from 'rxjs';
-import { confirmationModal, csvResultModalService, csvUploadModalService } from 'src/app/ajs-upgraded-providers';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
-import { TaskDefinitionService } from 'src/app/api/services/task-definition.service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {addWeeks} from 'date-fns';
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {MatTableDataSource} from '@angular/material/table';
+import {Subscription} from 'rxjs';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {GradeDefinition, Unit} from 'src/app/api/models/unit';
+import {FeedbackTemplateService} from 'src/app/api/services/feedback-template.service';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {
+  CsvResult,
+  CsvResultModalService,
+} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalService} from 'src/app/common/modals/csv-upload-modal/csv-upload-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'f-unit-task-editor',
   templateUrl: 'unit-task-editor.component.html',
   styleUrls: ['unit-task-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class UnitTaskEditorComponent implements AfterViewInit {
-  @ViewChild(MatTable, { static: false }) table: MatTable<TaskDefinition>;
-  @ViewChild(MatSort, { static: false }) sort: MatSort;
-  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
-
+export class UnitTaskEditorComponent implements OnInit, OnDestroy {
   @Input() unit: Unit;
 
-  public taskDefinitionSource: MatTableDataSource<TaskDefinition>;
-  public columns: string[] = ['name', 'grade', 'startDate', 'targetDate', 'deadlineDate', 'taskDefAction'];
-  public filter: string;
+  public taskDefinitionSource: MatTableDataSource<TaskDefinition> = new MatTableDataSource([]);
+  public filter: string = '';
   public selectedTaskDefinition: TaskDefinition;
+  public isTaskListCollapsed: boolean = false;
+
+  public dueDateSource: MatTableDataSource<TaskDefinition> = new MatTableDataSource([]);
+
+  public manageDueDates: boolean = false;
+
+  protected get gradeNames(): Record<number, string> {
+    return Object.fromEntries(
+      this.unit.gradeDefinitions.map((definition) => [definition.value, definition.label]),
+    );
+  }
+
+  public get gradeColumns(): GradeDefinition[] {
+    return this.unit.gradeDefinitions.filter((definition) => definition.value >= 0);
+  }
+
+  public get dueDateColumns(): string[] {
+    return [
+      'taskDefinition',
+      ...this.gradeColumns.map((definition) => this.gradeColumnId(definition)),
+    ];
+  }
+
+  public gradeColumnId(grade: GradeDefinition): string {
+    return `grade-${grade.value}`;
+  }
+
+  isStartAfterTarget(td: TaskDefinition, grade: GradeDefinition): boolean {
+    const start = this.getGradeStartDate(td, grade);
+    const target = this.getGradeDueDate(td, grade);
+    if (!start || !target) {
+      return false;
+    }
+    return new Date(start).getTime() > new Date(target).getTime();
+  }
+
+  getGradeStartDate(td: TaskDefinition, grade: GradeDefinition): Date | null {
+    return grade.value === 0 ? td.startDate : (td.gradeStartDate(grade.value) ?? td.startDate);
+  }
+
+  isFallbackStartDate(td: TaskDefinition, grade: GradeDefinition): boolean {
+    return grade.value !== 0 && !td.gradeStartDate(grade.value);
+  }
+
+  setGradeStartDate(td: TaskDefinition, grade: GradeDefinition, value: Date | null): void {
+    td.setGradeStartDate(grade.value, value);
+    this.saveTaskDefinition(td);
+  }
+
+  getGradeDueDate(td: TaskDefinition, grade: GradeDefinition): Date | null {
+    return grade.value === 0 ? td.targetDate : (td.gradeTargetDate(grade.value) ?? td.targetDate);
+  }
+
+  isFallbackTargetDate(td: TaskDefinition, grade: GradeDefinition): boolean {
+    return grade.value !== 0 && !td.gradeTargetDate(grade.value);
+  }
+
+  setGradeDueDate(td: TaskDefinition, grade: GradeDefinition, value: Date | null): void {
+    td.setGradeTargetDate(grade.value, value);
+    this.saveTaskDefinition(td);
+  }
 
   constructor(
     private taskDefinitionService: TaskDefinitionService,
+    private feedbackTemplateService: FeedbackTemplateService,
     private alerts: AlertService,
-    @Inject(csvResultModalService) private csvResultModalService: any,
-    @Inject(csvUploadModalService) private csvUploadModal: any,
-    @Inject(confirmationModal) private confirmationModal: any
-  ) {}
+    private csvResultModalService: CsvResultModalService,
+    private csvUploadModal: CsvUploadModalService,
+    private confirmationModal: ConfirmationModalService,
+  ) {
+    this.taskDefinitionSource.filterPredicate = (data: TaskDefinition, filter: string) =>
+      data.matches(filter);
+  }
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     this.subscriptions.push(
       this.unit.taskDefinitionCache.values.subscribe((taskDefinitions) => {
-        this.taskDefinitionSource = new MatTableDataSource<TaskDefinition>(taskDefinitions);
-        this.taskDefinitionSource.paginator = this.paginator;
-        this.taskDefinitionSource.sort = this.sort;
-        this.taskDefinitionSource.filterPredicate = (data: any, filter: string) => data.matches(filter);
-      })
+        this.taskDefinitionSource.data = taskDefinitions;
+      }),
     );
   }
 
   public saveTaskDefinition(taskDefinition: TaskDefinition) {
-    taskDefinition.save().subscribe(() => {
-      this.alerts.success('Task Saved');
-      taskDefinition.setOriginalSaveData(this.taskDefinitionService.mapping);
+    taskDefinition.save().subscribe({
+      next: () => {
+        this.alerts.success('Task Saved');
+        taskDefinition.setOriginalSaveData(this.taskDefinitionService.mapping);
+      },
+      error: (error) => {
+        this.alerts.error(`Failed to update task: ${error}`, 6000);
+      },
     });
   }
 
@@ -58,57 +127,81 @@ export class UnitTaskEditorComponent implements AfterViewInit {
   }
 
   public selectTaskDefinition(taskDefinition: TaskDefinition) {
+    // Clicking the task that is already open is not a discard, so it must not
+    // ask. Keep this ahead of the guard.
     if (this.selectedTaskDefinition === taskDefinition) {
-      this.selectedTaskDefinition = null;
-    } else {
-      this.selectedTaskDefinition = taskDefinition;
+      return;
+    }
 
-      // Record original save data if none present
-      if (!this.selectedTaskDefinition.hasOriginalSaveData) {
-        this.selectedTaskDefinition.setOriginalSaveData(this.taskDefinitionService.mapping);
-      }
+    this.confirmDiscardingUnsavedTask(() => this.applySelectedTaskDefinition(taskDefinition));
+  }
+
+  private applySelectedTaskDefinition(taskDefinition: TaskDefinition) {
+    this.selectedTaskDefinition = taskDefinition;
+
+    // Record original save data if none present
+    if (!this.selectedTaskDefinition.hasOriginalSaveData) {
+      this.selectedTaskDefinition.setOriginalSaveData(this.taskDefinitionService.mapping);
     }
+
+    this.feedbackTemplateService
+      .query({contextType: 'task_definitions', contextId: this.selectedTaskDefinition.id}, {})
+      .subscribe({
+        error: () => this.alerts.error('Error loading task feedback templates.'),
+      });
   }
 
-  public sortData(sort: Sort) {
-    const data = this.taskDefinitionSource.data;
+  // A task being edited is unsaved if it has never been saved at all, or if it
+  // has been changed since it was loaded.
+  //
+  // isNew has to be tested and it has to come first. TaskDefinition.hasChanges
+  // returns false when there is no originalSaveData, and only selectTaskDefinition
+  // and a successful save ever set that, so a brand new task with every field
+  // filled in reports no changes whatsoever. A guard built on hasChanges alone
+  // protects the case that was already safe and leaves this one exactly as it was.
+  private hasUnsavedTaskDefinition(): boolean {
+    const selected = this.selectedTaskDefinition;
+    return !!selected && (selected.isNew || this.taskDefinitionHasChanges(selected));
+  }
 
-    if (!sort.active || sort.direction === '') {
-      this.taskDefinitionSource.data = data;
+  private confirmDiscardingUnsavedTask(proceed: () => void) {
+    if (!this.hasUnsavedTaskDefinition()) {
+      proceed();
       return;
     }
 
-    this.taskDefinitionSource.data = data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return this.compare(a.abbreviation, b.abbreviation, isAsc);
-        case 'grade':
-          return this.compare(a.targetGrade, b.targetGrade, isAsc);
-        case 'startDate':
-          return this.compare(a.startDate.getTime(), b.startDate.getTime(), isAsc);
-        case 'targetDate':
-          return this.compare(a.targetDate.getTime(), b.targetDate.getTime(), isAsc);
-        case 'deadlineDate':
-          return this.compare(a.dueDate.getTime(), b.dueDate.getTime(), isAsc);
-        default:
-          return 0;
-      }
-    });
+    this.confirmationModal.show(
+      'Discard unsaved changes',
+      'This task has unsaved changes. If you continue, they will be lost.',
+      proceed,
+    );
+  }
+
+  public isSelectedTaskDefinition(taskDefinition: TaskDefinition): boolean {
+    return this.selectedTaskDefinition === taskDefinition;
   }
 
-  public compare(a: number | string, b: number | string, isAsc: boolean): number {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  public toggleTaskListCollapsed(): void {
+    this.isTaskListCollapsed = !this.isTaskListCollapsed;
   }
 
   applyFilter(filterValue: string) {
-    this.taskDefinitionSource.filter = filterValue.trim().toLowerCase();
+    if (!this.taskDefinitionSource) {
+      return;
+    }
 
-    this.selectedTaskDefinition = null;
+    this.taskDefinitionSource.filter = filterValue.trim().toLowerCase();
 
-    if (this.taskDefinitionSource.paginator) {
-      this.taskDefinitionSource.paginator.firstPage();
+    // No dialog here on purpose. The box is [(ngModel)] bound and this runs from
+    // ngModelChange, so the character is already typed by the time we see it, and
+    // cancelling would mean writing the text back one keystroke at a time while
+    // the convenor answers a modal per letter. Filtering the list underneath an
+    // open editor is the behaviour that was wanted anyway.
+    if (this.hasUnsavedTaskDefinition()) {
+      return;
     }
+
+    this.selectedTaskDefinition = null;
   }
 
   private guessTaskAbbreviation() {
@@ -137,45 +230,47 @@ export class UnitTaskEditorComponent implements AfterViewInit {
       () => {
         this.unit.deleteTaskDefinition(taskDefinition);
         //TODO: reinstate ProgressModal.show "Deleting Task #{task.abbreviation}", 'Please wait while student projects are updated.', promise
-
-        this.alerts.success('Task deleted');
-      }
+      },
     );
   }
 
   public uploadTaskDefinitionsCsv() {
     this.csvUploadModal.show(
       'Upload Task Definitions as CSV',
-      'Test message',
-      { file: { name: 'Task Definition CSV Data', type: 'csv' } },
+      'Upload a CSV of task definitions.',
+      {file: {name: 'Task Definition CSV Data', type: 'csv'}},
       this.unit.getTaskDefinitionBatchUploadUrl(),
-      (response: any) => {
+      (response: CsvResult) => {
         // at least one student?
         this.csvResultModalService.show('Task Definition Import Results', response);
         if (response.success.length > 0) {
           this.unit.refresh();
         }
-      }
+      },
     );
   }
 
   public uploadTaskResourcesZip() {
     this.csvUploadModal.show(
       'Upload Task Sheets and Resources as Zip',
-      'Test message',
-      { file: { name: 'Task Sheets and Resources', type: 'zip' } },
+      'Upload a ZIP of task sheets and resources.',
+      {file: {name: 'Task Sheets and Resources', type: 'zip'}},
       this.unit.taskUploadUrl,
-      (response: any) => {
+      (response: CsvResult) => {
         // at least one student?
         this.csvResultModalService.show('Task Sheet and Resources Import Results', response);
         if (response.success.length > 0) {
           this.unit.refresh();
         }
-      }
+      },
     );
   }
 
   public createTaskDefinition() {
+    this.confirmDiscardingUnsavedTask(() => this.buildNewTaskDefinition());
+  }
+
+  private buildNewTaskDefinition() {
     const abbr = this.guessTaskAbbreviation();
     const task = new TaskDefinition(this.unit);
 
@@ -183,7 +278,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
     task.abbreviation = abbr;
     task.description = 'New Description';
     task.startDate = new Date();
-    task.targetDate = new Date();
+    task.targetDate = addWeeks(new Date(), 2);
     task.uploadRequirements = [];
     task.weighting = 4;
     task.targetGrade = 0;
diff --git a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html
index 7f24e23587..965230a659 100644
--- a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html
+++ b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html
@@ -1,260 +1,278 @@
 <div>
   <div class="header">
-    <div *ngIf="stream; else noStream">
-      <div *ngIf="!editingStream; else doStreamEdit">
-        <h4>{{ stream.name }} - {{ stream.abbreviation }}</h4>
-        <button mat-icon-button (click)="setEditStream(true)">
-          <mat-icon>edit</mat-icon>
-        </button>
-      </div>
-
-      <ng-template #doStreamEdit>
-        <mat-form-field appearance="outline">
-          <mat-label>Name</mat-label>
-          <input matInput [(ngModel)]="stream.name" />
-        </mat-form-field>
-        <span>-</span>
-        <mat-form-field appearance="outline">
-          <mat-label>Abbreviation</mat-label>
-          <input matInput [(ngModel)]="stream.abbreviation" />
-        </mat-form-field>
-
-        <button mat-icon-button doStreamEdit (click)="setEditStream(false)">
-          <mat-icon color="warn">cancel</mat-icon>
-        </button>
-        <button mat-icon-button #doStreamEditt (click)="saveStream()">
-          <mat-icon color="warn">save</mat-icon>
-        </button>
-        <button mat-icon-button color="warn" (click)="deleteStream()" #doStreamEdit>
-          <mat-icon>delete</mat-icon>
-        </button>
-      </ng-template>
-    </div>
+    @if (stream) {
+      <div>
+        @if (!editingStream) {
+          <div>
+            <h4>{{ stream.name }} - {{ stream.abbreviation }}</h4>
+            <button mat-icon-button (click)="setEditStream(true)">
+              <mat-icon>edit</mat-icon>
+            </button>
+          </div>
+        } @else {
+          <mat-form-field appearance="outline">
+            <mat-label>Name</mat-label>
+            <input matInput [(ngModel)]="stream.name" />
+          </mat-form-field>
+          <span>-</span>
+          <mat-form-field appearance="outline">
+            <mat-label>Abbreviation</mat-label>
+            <input matInput [(ngModel)]="stream.abbreviation" />
+          </mat-form-field>
 
-    <ng-template #noStream>
+          <button doStreamEdit mat-icon-button (click)="setEditStream(false)">
+            <mat-icon color="warn">cancel</mat-icon>
+          </button>
+          <button mat-icon-button (click)="saveStream()">
+            <mat-icon color="warn">save</mat-icon>
+          </button>
+          <button color="warn" mat-icon-button (click)="deleteStream()">
+            <mat-icon>delete</mat-icon>
+          </button>
+        }
+      </div>
+    } @else {
       <h4>Tutorials without a stream</h4>
-    </ng-template>
+    }
   </div>
 
   <table
+    class="f-table"
     mat-table
-    [dataSource]="dataSource"
     matSort
+    [dataSource]="dataSource"
     (matSortChange)="sortTableData($event)"
-    class="f-table"
   >
     <!-- Abbreviation Column -->
-    <ng-container [formGroup]="formData" matColumnDef="abbreviation" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Abbreviation</th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div *ngIf="!editing(tutorial); else edit">
-          {{ tutorial.abbreviation }}
-        </div>
-        <ng-template #edit>
+    <ng-container matColumnDef="abbreviation" sticky [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Abbreviation</th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div>
+            {{ tutorial.abbreviation }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
-            <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
+            <input formControlName="abbreviation" matInput placeholder="Abbreviation" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
+          <input formControlName="abbreviation" matInput placeholder="Abbreviation" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Campus Column -->
-    <ng-container [formGroup]="formData" matColumnDef="campus">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Campus</th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div *ngIf="!editing(tutorial); else edit">
-          {{ tutorial.campus ? tutorial.campus.name : '' }}
-        </div>
-        <ng-template #edit>
+    <ng-container matColumnDef="campus" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Campus</th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div>
+            {{ tutorial.campus ? tutorial.campus.name : '' }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
             <mat-label>Campus</mat-label>
-            <mat-select [compareWith]="compareSelection" formControlName="campus">
+            <mat-select formControlName="campus" [compareWith]="compareSelection">
               <mat-option [value]="null">Not Specified</mat-option>
-              <mat-option *ngFor="let campus of campuses" [value]="campus">
-                {{ campus.name }}
-              </mat-option>
+              @for (campus of campuses; track campus) {
+                <mat-option [value]="campus">
+                  {{ campus.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
           <mat-label>Campus</mat-label>
           <mat-select formControlName="campus">
             <mat-option [value]="null">Not Specified</mat-option>
-            <mat-option *ngFor="let campus of campuses" [value]="campus">
-              {{ campus.name }}
-            </mat-option>
+            @for (campus of campuses; track campus) {
+              <mat-option [value]="campus">
+                {{ campus.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Location Column -->
-    <ng-container [formGroup]="formData" matColumnDef="location" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div *ngIf="!editing(tutorial); else edit">
-          {{ tutorial.meetingLocation }}
-        </div>
-        <ng-template #edit>
+    <ng-container matColumnDef="location" sticky [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Location</th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div>
+            {{ tutorial.meetingLocation }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
-            <input matInput required formControlName="meetingLocation" placeholder="Location" />
+            <input formControlName="meetingLocation" matInput placeholder="Location" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="meetingLocation" placeholder="Location" />
+          <input formControlName="meetingLocation" matInput placeholder="Location" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Day Column -->
-    <ng-container [formGroup]="formData" matColumnDef="day">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Day</th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div *ngIf="!editing(tutorial); else edit">
-          {{ tutorial.meetingDay }}
-        </div>
-        <ng-template #edit>
+    <ng-container matColumnDef="day" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Day</th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div>
+            {{ tutorial.meetingDay }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
             <mat-label>Day</mat-label>
-            <mat-select required formControlName="meetingDay">
-              <mat-option *ngFor="let day of days" [value]="day">
-                {{ day }}
-              </mat-option>
+            <mat-select formControlName="meetingDay" required>
+              @for (day of days; track day) {
+                <mat-option [value]="day">
+                  {{ day }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
           <mat-label>Day</mat-label>
-          <mat-select required formControlName="meetingDay">
-            <mat-option *ngFor="let day of days" [value]="day">
-              {{ day }}
-            </mat-option>
+          <mat-select formControlName="meetingDay" required>
+            @for (day of days; track day) {
+              <mat-option [value]="day">
+                {{ day }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Time Column -->
-    <ng-container [formGroup]="formData" matColumnDef="time" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Time</th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div *ngIf="!editing(tutorial); else edit">
-          {{ tutorial.meetingTime }}
-        </div>
-        <ng-template #edit>
+    <ng-container matColumnDef="time" sticky [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Time</th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div>
+            {{ tutorial.meetingTime }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
             <input
+              formControlName="meetingTime"
               matInput
+              placeholder="Time"
               required
-              formControlName="meetingTime"
               [value]="formData.get('meetingTime').value"
-              placeholder="Time"
             />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="meetingTime" placeholder="Time" />
+          <input formControlName="meetingTime" matInput placeholder="Time" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Tutor Column -->
-    <ng-container [formGroup]="formData" matColumnDef="tutor">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Tutor</th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div *ngIf="!editing(tutorial); else edit">
-          {{ tutorial.tutor?.name }}
-        </div>
-        <ng-template #edit>
+    <ng-container matColumnDef="tutor" [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Tutor</th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div>
+            {{ tutorial.tutor?.name }}
+          </div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
             <mat-label>Tutor</mat-label>
-            <mat-select required [compareWith]="compareSelection" formControlName="tutor">
-              <mat-option *ngFor="let tutor of unit.staffUsers" [value]="tutor">
-                {{ tutor.name }}
-              </mat-option>
+            <mat-select formControlName="tutor" required [compareWith]="compareSelection">
+              @for (tutor of unit.staffUsers; track tutor) {
+                <mat-option [value]="tutor">
+                  {{ tutor.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
           <mat-label>Tutor</mat-label>
-          <mat-select required formControlName="tutor">
-            <mat-option *ngFor="let tutor of unit.staffUsers" [value]="tutor">
-              {{ tutor.name }}
-            </mat-option>
+          <mat-select formControlName="tutor" required>
+            @for (tutor of unit.staffUsers; track tutor) {
+              <mat-option [value]="tutor">
+                {{ tutor.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Capacity Column -->
-    <ng-container [formGroup]="formData" matColumnDef="capacity" sticky>
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Capacity</th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div *ngIf="!editing(tutorial); else edit">
-          {{ tutorial.capacity }}
-        </div>
-        <ng-template #edit>
+    <ng-container matColumnDef="capacity" sticky [formGroup]="formData">
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Capacity</th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div>{{ tutorial.numStudents }} / {{ tutorial.capacity }}</div>
+        } @else {
           <mat-form-field appearance="outline" class="data-entry">
-            <input matInput required formControlName="capacity" placeholder="Capacity" />
+            <input formControlName="capacity" matInput placeholder="Capacity" required />
           </mat-form-field>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <mat-form-field appearance="outline" class="data-entry">
-          <input matInput required formControlName="capacity" placeholder="Capacity" />
+          <input formControlName="capacity" matInput placeholder="Capacity" required />
         </mat-form-field>
       </td>
     </ng-container>
 
     <!-- Options Column -->
     <ng-container matColumnDef="options" stickyEnd>
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let tutorial">
-        <div class="right" *ngIf="!editing(tutorial); else edit">
-          <button mat-icon-button (click)="flagEdit(tutorial)">
-            <mat-icon>edit</mat-icon>
-          </button>
-        </div>
-        <ng-template #edit>
-          <div class="edit-actions right">
-            <button mat-icon-button color="primary" (click)="submit()">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let tutorial" mat-cell>
+        @if (!editing(tutorial)) {
+          <div class="right mr-3">
+            <button mat-icon-button (click)="flagEdit(tutorial)">
+              <mat-icon>edit</mat-icon>
+            </button>
+          </div>
+        } @else {
+          <div class="edit-actions right mr-3">
+            <button color="primary" mat-icon-button (click)="submit()">
               <mat-icon>save</mat-icon>
             </button>
-            <button mat-icon-button color="warn" (click)="cancelEdit()">
+            <button color="warn" mat-icon-button (click)="cancelEdit()">
               <mat-icon>cancel</mat-icon>
             </button>
-            <button mat-icon-button color="warn" (click)="deleteTutorial(tutorial)">
+            <button color="warn" mat-icon-button (click)="deleteTutorial(tutorial)">
               <mat-icon>delete</mat-icon>
             </button>
           </div>
-        </ng-template>
+        }
       </td>
-      <td mat-footer-cell *matFooterCellDef>
+      <td *matFooterCellDef mat-footer-cell>
         <div class="edit-actions right">
-          <button mat-icon-button (click)="submit()">
+          <button class="mr-3 mb-[22px]" mat-icon-button (click)="submit()">
             <mat-icon>add</mat-icon>
           </button>
         </div>
       </td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="columns"></tr>
-    <tr mat-row *matRowDef="let row; columns: columns"></tr>
-    <tr [hidden]="selected" mat-footer-row *matFooterRowDef="columns"></tr>
+    <tr *matHeaderRowDef="columns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: columns" mat-row></tr>
+    <tr *matFooterRowDef="columns" mat-footer-row [hidden]="selected"></tr>
   </table>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
index a130e080e9..9619531dfe 100644
--- a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
+++ b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
@@ -1,40 +1,74 @@
-import { Component, Input, Inject, ViewChild, AfterViewInit } from '@angular/core';
-import { confirmationModal } from 'src/app/ajs-upgraded-providers';
-import { MatSort, Sort } from '@angular/material/sort';
-import { MatTableDataSource, MatTable } from '@angular/material/table';
+import {RequestOptions} from 'ngx-entity-service';
+import {HttpErrorResponse} from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {UntypedFormControl, Validators} from '@angular/forms';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {Subscription} from 'rxjs';
 import {
-  Tutorial,
-  TutorialService,
   Campus,
   CampusService,
-  User,
+  Tutorial,
+  TutorialService,
   TutorialStream,
   TutorialStreamService,
   Unit,
+  User,
 } from 'src/app/api/models/doubtfire-model';
-import { EntityFormComponent } from 'src/app/common/entity-form/entity-form.component';
-import { UntypedFormControl, Validators } from '@angular/forms';
-import { RequestOptions } from 'ngx-entity-service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {EntityFormComponent} from 'src/app/common/entity-form/entity-form.component';
+import {ConfirmationModalService} from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'df-unit-tutorials-list',
   templateUrl: 'unit-tutorials-list.component.html',
   styleUrls: ['unit-tutorials-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> implements AfterViewInit {
-  @ViewChild(MatTable, { static: true }) table: MatTable<any>;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+export class UnitTutorialsListComponent
+  extends EntityFormComponent<Tutorial>
+  implements OnInit, OnDestroy
+{
+  @ViewChild(MatTable, {static: true}) table: MatTable<Tutorial>;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
   @Input() stream: TutorialStream;
   @Input() unit: Unit;
 
-  days: string[] = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Asynchronous'];
+  days: string[] = [
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday',
+    'Asynchronous',
+  ];
 
   campuses: Campus[] = new Array<Campus>();
-  columns: string[] = ['abbreviation', 'campus', 'location', 'day', 'time', 'tutor', 'capacity', 'options'];
-  tutorials: Tutorial[];
+  columns: string[] = [
+    'abbreviation',
+    'campus',
+    'location',
+    'day',
+    'time',
+    'tutor',
+    'capacity',
+    'options',
+  ];
+  tutorials: Tutorial[] = [];
+  dataSource: MatTableDataSource<Tutorial> = new MatTableDataSource();
 
-  private editingStream: boolean = false;
+  public editingStream: boolean = false;
+  private subscriptions: Subscription[] = [];
 
   /**
    * The original stream abbreviation is required to update the stream - as it may change but is used in the url.
@@ -46,7 +80,7 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
     private tutorialService: TutorialService,
     private tutorialStreamService: TutorialStreamService,
     private campusService: CampusService,
-    @Inject(confirmationModal) private confirmationModal: any,
+    private confirmationModal: ConfirmationModalService,
     private alerts: AlertService,
   ) {
     super(
@@ -63,7 +97,7 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
     );
   }
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     if (this.stream) {
       this.origStreamAbbr = this.stream.abbreviation;
       this.origName = this.stream.name;
@@ -73,22 +107,28 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
       this.campuses.push(...campuses);
     });
 
-    this.dataSource = new MatTableDataSource();
     this.filterTutorials();
 
-    this.unit.tutorialsCache.values.subscribe((_t) => this.filterTutorials());
+    this.subscriptions.push(
+      this.unit.tutorialsCache.values.subscribe((_t) => this.filterTutorials()),
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
   }
 
   private filterTutorials(): void {
     this.tutorials = this.unit.tutorials.filter(
-      (tutorial) => tutorial.tutorialStream === this.stream || (!tutorial.tutorialStream && !this.stream),
+      (tutorial) =>
+        tutorial.tutorialStream === this.stream || (!tutorial.tutorialStream && !this.stream),
     );
     this.dataSource.data = this.tutorials;
   }
 
   public saveStream(): void {
     this.tutorialStreamService
-      .update({ abbreviation: this.origStreamAbbr, unit_id: this.unit.id }, { entity: this.stream })
+      .update({abbreviation: this.origStreamAbbr, unit_id: this.unit.id}, {entity: this.stream})
       .subscribe({
         next: (stream: TutorialStream) => {
           this.stream = stream;
@@ -97,14 +137,13 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
           this.editingStream = false;
           this.alerts.success('Stream updated successfully', 2000);
         },
-        error: (error: any) => {
+        error: (error: HttpErrorResponse) => {
           this.alerts.error('Something went wrong - ' + JSON.stringify(error.error), 6000);
         },
       });
   }
 
   public setEditStream(value: boolean): void {
-    console.log('set edit stream', value)
     if (!value) {
       this.stream.abbreviation = this.origStreamAbbr;
       this.stream.name = this.origName;
@@ -123,8 +162,14 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
   // Push the values that will be displayed in the table
   // to the datasource
   private pushToTable(value: Tutorial | Tutorial[]) {
-    if (!value) return;
-    value instanceof Array ? this.tutorials.push(...value) : this.tutorials.push(value);
+    if (!value) {
+      return;
+    }
+    if (value instanceof Array) {
+      this.tutorials.push(...value);
+    } else {
+      this.tutorials.push(value);
+    }
     this.renderTable();
   }
 
@@ -161,14 +206,14 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
   // tutorial. The function is bound to the compareFn attribute on the related
   // mat-selects.
   // See: https://angular.io/api/forms/SelectControlValueAccessor
-  compareSelection(aEntity: User | Campus | any, bEntity: User | Campus) {
+  compareSelection(aEntity: User | Campus | {user_id: number}, bEntity: User | Campus) {
     if (!aEntity || !bEntity) {
       return;
     }
     if (bEntity instanceof User) {
-      return aEntity.user_id === bEntity.id;
+      return 'user_id' in aEntity && aEntity.user_id === bEntity.id;
     } else {
-      return aEntity.id === bEntity.id;
+      return 'id' in aEntity && aEntity.id === bEntity.id;
     }
   }
 
@@ -198,7 +243,9 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
   /**
    * Ensure that the unit is passed to the Tutorial entity when create it called.
    */
-  protected override optionsOnRequest(kind: 'create' | 'update' | 'delete'): RequestOptions<Tutorial> {
+  protected override optionsOnRequest(
+    _kind: 'create' | 'update' | 'delete',
+  ): RequestOptions<Tutorial> {
     return {
       constructorParams: this.unit,
       cache: this.unit.tutorialsCache,
@@ -223,9 +270,13 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
       const isAsc = sort.direction === 'asc';
       switch (sort.active) {
         case 'campus':
-          return this.sortCompare(a.campus ? a.campus.abbreviation : '', b.campus ? b.campus.abbreviation : '', isAsc);
+          return this.sortCompare(
+            a.campus ? a.campus.abbreviation : '',
+            b.campus ? b.campus.abbreviation : '',
+            isAsc,
+          );
         case 'tutor':
-          return this.sortCompare(a.tutor.name, b.tutor.name, isAsc);
+          return this.sortCompare(a.tutor?.name ?? '', b.tutor?.name ?? '', isAsc);
         default:
           return 0;
       }
diff --git a/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.html b/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.html
index 6159d62f94..b0ccf6bd49 100644
--- a/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.html
+++ b/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.html
@@ -1,21 +1,30 @@
 <div>
-  <df-unit-tutorials-list [unit]="unit"></df-unit-tutorials-list>
+  <!-- <df-unit-tutorials-list [unit]="unit"></df-unit-tutorials-list> -->
   @for (stream of unit.tutorialStreams; track stream) {
-  <df-unit-tutorials-list
-   
-    [unit]="unit"
-    [stream]="stream"
-  ></df-unit-tutorials-list>
-}
-  <button class="new-activity-stream-button" mat-raised-button [matMenuTriggerFor]="activities">
-    <mat-icon>add</mat-icon>
-    New Tutorial Stream
-  </button>
+    <df-unit-tutorials-list [stream]="stream" [unit]="unit"></df-unit-tutorials-list>
+  } @empty {
+    <div class="no-tutorials container mx-auto">
+      <div class="mx-auto flex max-w-4xl flex-col items-center justify-center">
+        <mat-icon>groups</mat-icon>
+        <h1>No Tutorials</h1>
+        <p class="p-1 text-center text-gray-500">
+          There are no tutorials yet. Create a tutorial stream to begin adding tutorials.
+        </p>
+      </div>
+    </div>
+  }
+  <div class="mt-3 flex w-full justify-center">
+    <button class="mx-auto" color="primary" mat-raised-button [matMenuTriggerFor]="activities">
+      <mat-icon>add</mat-icon>
+      New Tutorial Stream
+    </button>
+  </div>
+
   <mat-menu #activities="matMenu">
     @for (activityType of activityTypes; track activityType) {
-  <button mat-menu-item (click)="onClickNewActivity(activityType)">
-      <span>{{ activityType.name }}</span>
-    </button>
-}
+      <button mat-menu-item (click)="onClickNewActivity(activityType)">
+        <span>{{ activityType.name }}</span>
+      </button>
+    }
   </mat-menu>
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.scss b/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.scss
index 95fde129f0..7f40e10c71 100644
--- a/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.scss
+++ b/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.scss
@@ -1,5 +1,5 @@
-.new-activity-stream-button {
-  display: flex;
-  margin: 0 auto;
-  padding-left: 4px;
+.no-tutorials .mat-icon {
+  font-size: 75px;
+  width: 75px;
+  height: 75px;
 }
diff --git a/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.ts b/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.ts
index 9c558e2e7c..2a71c1c6c7 100644
--- a/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.ts
+++ b/src/app/units/states/edit/directives/unit-tutorials-manager/unit-tutorials-manager.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
 import {
   ActivityType,
   ActivityTypeService,
@@ -11,13 +11,13 @@ import {AlertService} from 'src/app/common/services/alert.service';
   selector: 'unit-tutorials-manager',
   templateUrl: 'unit-tutorials-manager.component.html',
   styleUrls: ['unit-tutorials-manager.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class UnitTutorialsManagerComponent {
+export class UnitTutorialsManagerComponent implements OnInit {
   @Input() unit: Unit;
 
   activityTypes: ActivityType[] = new Array<ActivityType>();
-  tutorialsByStream: any[] = new Array<any>();
-
   constructor(
     private activityTypeService: ActivityTypeService,
     private alertService: AlertService,
diff --git a/src/app/units/states/edit/edit.coffee b/src/app/units/states/edit/edit.coffee
deleted file mode 100644
index 7951553c54..0000000000
--- a/src/app/units/states/edit/edit.coffee
+++ /dev/null
@@ -1,72 +0,0 @@
-angular.module('doubtfire.units.states.edit', [
-  'doubtfire.units.states.edit.directives'
-])
-
-#
-# State for convenors to edit a particular unit
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/admin', {
-    parent: 'units/index'
-    url: '/admin'
-    controller: 'EditUnitStateCtrl'
-    templateUrl: 'units/states/edit/edit.tpl.html'
-    data:
-      task: 'Unit Administration'
-      pageTitle: "_Unit Administration_"
-      roleWhitelist: ['Convenor', 'Admin', 'Auditor']
-   }
-)
-.controller('EditUnitStateCtrl', ($scope, $state, $stateParams, alertService, analyticsService, newUnitService, newUserService, GlobalStateService) ->
-  GlobalStateService.onLoad () ->
-    $scope.currentStaff = $scope.unit.staff
-
-    $scope.assessingUnitRole = GlobalStateService.loadedUnitRoles.currentValues.find((role) -> role.unit == $scope.unit)
-
-    newUserService.getTutors().subscribe( (tutors) -> $scope.staff = tutors )
-
-  #
-  # Active tab group
-  #
-  $scope.tabs =
-    unitTab:
-      title: "Unit Details"
-      seq:   0
-    learningOutcomesTab:
-      title: "Learning Outcomes"
-      seq:   1
-    staffTab:
-      title: "Staff"
-      seq:   2
-    tutorialsTab:
-      title: "Tutorials"
-      seq:   3
-    studentsTab:
-      title: "Students"
-      seq:   4
-    tasksTab:
-      title: "Tasks"
-      seq:   5
-    taskAlignmentTab:
-      title: "Task Alignment"
-      seq:   5
-    groupsTab:
-      title: "Groups"
-      seq:   6
-
-  # Set the active tab
-  $scope.setActiveTab = (tab) ->
-    # Do nothing if we're switching to the same tab
-    return if tab is $scope.activeTab
-
-    # Actions to perform when changing tab
-    $scope.activeTab?.active = false  # Deactivate original tab
-
-    # run de-select actions...
-    $scope.activeTab.deselect?()
-
-    $scope.activeTab = tab            # Switch tabs
-    $scope.activeTab.active = true    # Make it active
-
-  $scope.activeTab = $scope.tabs.unitTab
-)
diff --git a/src/app/units/states/edit/edit.tpl.html b/src/app/units/states/edit/edit.tpl.html
deleted file mode 100644
index 3ba73129a5..0000000000
--- a/src/app/units/states/edit/edit.tpl.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="container" style="width: 100%;">
-  <tabset class="tabset-icon">
-    <tab ng-repeat="tab in tabs | toArray | orderBy: 'seq'" active="tab.active" ng-click="setActiveTab(tab)">
-      <tab-heading>{{tab.title}}</tab-heading>
-    </tab>
-  </tabset><!--/tabs-->
-  <unit-details-editor unit="unit" ng-if="activeTab === tabs.unitTab"></unit-details-editor>
-  <unit-ilo-editor ng-if="activeTab === tabs.learningOutcomesTab"></unit-ilo-editor>
-  <unit-staff-editor ng-if="activeTab === tabs.staffTab"></unit-staff-editor>
-  <unit-tutorials-manager ng-if="activeTab === tabs.tutorialsTab" [unit]="unit"></unit-tutorials-manager>
-  <unit-students-editor [unit]="unit" ng-if="activeTab === tabs.studentsTab"></unit-students-editor>
-  <f-unit-task-editor ng-if="activeTab === tabs.tasksTab" [unit]="unit"></f-unit-task-editor>
-  <task-ilo-alignment-editor show-csv="true" unit="unit" ng-if="activeTab === tabs.taskAlignmentTab"></task-ilo-alignment-editor>
-  <unit-group-set-editor ng-if="activeTab === tabs.groupsTab"></unit-group-set-editor>
-</div>
diff --git a/src/app/units/states/edit/unit-admin-state.component.html b/src/app/units/states/edit/unit-admin-state.component.html
new file mode 100644
index 0000000000..eaedf22db4
--- /dev/null
+++ b/src/app/units/states/edit/unit-admin-state.component.html
@@ -0,0 +1,132 @@
+<div class="flex size-full flex-col">
+  <mat-tab-group
+    class="mx-auto mb-6"
+    dynamicHeight
+    [selectedIndex]="currentIndex"
+    (selectedTabChange)="onTabChange($event)"
+  >
+    @for (tab of tabs; track tab.routeSegment) {
+      <mat-tab [label]="tab.label"></mat-tab>
+    }
+  </mat-tab-group>
+
+  <div class="min-h-0 flex-1">
+    @if (loadingUnit) {
+      <f-page-container [fullWidth]="currentTab.routeSegment === 'tasks'">
+        <div aria-busy="true" aria-label="Loading unit details">
+          <div class="flex flex-col">
+            <ngx-skeleton-loader
+              [theme]="{
+                width: '220px',
+                height: '24px',
+                'border-radius': '999px',
+                margin: '0 0 8px',
+              }"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              [theme]="{width: '420px', height: '14px', 'border-radius': '999px', margin: '0'}"
+            ></ngx-skeleton-loader>
+          </div>
+
+          <div class="mt-3 rounded">
+            <ngx-skeleton-loader
+              animation="pulse"
+              [theme]="{width: '100%', height: '300px', 'border-radius': '4px', margin: '0 0 14px'}"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              [theme]="{width: '50%', height: '14px', 'border-radius': '999px', margin: '0 0 10px'}"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              [theme]="{width: '75%', height: '14px', 'border-radius': '999px', margin: '0 0 10px'}"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              animation="pulse"
+              [theme]="{width: '100%', height: '300px', 'border-radius': '4px', margin: '0 0 14px'}"
+            ></ngx-skeleton-loader>
+          </div>
+        </div>
+      </f-page-container>
+    } @else {
+      @switch (currentTab.routeSegment) {
+        @case ('details') {
+          @if (unit) {
+            <f-page-container>
+              <f-unit-details-editor [unit]="unit"></f-unit-details-editor>
+            </f-page-container>
+          }
+        }
+        @case ('learning-outcomes') {
+          @if (unit) {
+            <f-page-container>
+              <div class="header">
+                <h3>Unit Learning Outcomes</h3>
+                <p>Manage unit outcomes and related feedback templates.</p>
+              </div>
+              <f-learning-outcome-editor [context]="unit"></f-learning-outcome-editor>
+            </f-page-container>
+          }
+        }
+        @case ('staff') {
+          @if (unit) {
+            <f-page-container>
+              <unit-staff-editor [staff]="staff" [unit]="unit"></unit-staff-editor>
+            </f-page-container>
+          }
+        }
+        @case ('tutorials') {
+          @if (unit) {
+            <f-page-container>
+              <div class="header">
+                <h3>Tutorials</h3>
+                <p>Manage tutorial streams and classes for this unit.</p>
+              </div>
+              <unit-tutorials-manager [unit]="unit"></unit-tutorials-manager>
+            </f-page-container>
+          }
+        }
+        @case ('students') {
+          @if (unit) {
+            <f-page-container>
+              <unit-students-editor [unit]="unit"></unit-students-editor>
+            </f-page-container>
+          }
+        }
+        @case ('tasks') {
+          @if (unit) {
+            <f-page-container [fullWidth]="true">
+              <f-unit-task-editor [unit]="unit"></f-unit-task-editor>
+            </f-page-container>
+          }
+        }
+        @case ('groups') {
+          @if (unit) {
+            <f-page-container>
+              <div class="header">
+                <h3>Groups</h3>
+                <p>Configure group sets and manage team-based activities.</p>
+              </div>
+              <f-unit-group-set-editor
+                [unit]="unit"
+                [unitRole]="assessingUnitRole"
+              ></f-unit-group-set-editor>
+            </f-page-container>
+          }
+        }
+        @case ('communication') {
+          @if (unit) {
+            <f-page-container>
+              <div class="header">
+                <h3>Communication System</h3>
+                <p>
+                  Create communication sets and rules to target students and automate follow-up
+                  actions.
+                </p>
+              </div>
+              <f-unit-communications-editor [unit]="unit"></f-unit-communications-editor>
+            </f-page-container>
+          }
+        }
+      }
+    }
+  </div>
+</div>
diff --git a/src/app/units/states/edit/unit-admin-state.component.ts b/src/app/units/states/edit/unit-admin-state.component.ts
new file mode 100644
index 0000000000..d36745df00
--- /dev/null
+++ b/src/app/units/states/edit/unit-admin-state.component.ts
@@ -0,0 +1,164 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Observable, Subscription, first, of} from 'rxjs';
+import {Unit, UnitRole, User, UserService} from 'src/app/api/models/doubtfire-model';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+
+type UnitAdminTabKey =
+  | 'details'
+  | 'learning-outcomes'
+  | 'staff'
+  | 'tutorials'
+  | 'students'
+  | 'tasks'
+  | 'groups'
+  | 'communication';
+
+interface UnitAdminTab {
+  label: string;
+  routeSegment: UnitAdminTabKey;
+}
+
+@Component({
+  selector: 'f-unit-admin-state',
+  templateUrl: './unit-admin-state.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitAdminStateComponent implements OnInit, OnDestroy {
+  @Input() public unit$: Observable<Unit>;
+
+  public readonly tabs: UnitAdminTab[] = [
+    {label: 'Unit Details', routeSegment: 'details'},
+    {label: 'Learning Outcomes', routeSegment: 'learning-outcomes'},
+    {label: 'Staff', routeSegment: 'staff'},
+    {label: 'Tutorials', routeSegment: 'tutorials'},
+    {label: 'Students', routeSegment: 'students'},
+    {label: 'Tasks', routeSegment: 'tasks'},
+    {label: 'Groups', routeSegment: 'groups'},
+    {label: 'Communications', routeSegment: 'communication'},
+  ];
+
+  public unit: Unit | null = null;
+  public staff: User[] = [];
+  public assessingUnitRole: UnitRole | null = null;
+  public currentTab: UnitAdminTab = this.tabs[0];
+  public loadingUnit = true;
+
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private userService: UserService,
+    private globalStateService: GlobalStateService,
+  ) {}
+
+  public ngOnInit(): void {
+    this.updateCurrentTabFromState(this.route.snapshot.paramMap.get('tab'));
+
+    this.unit$ = this.unit$ ?? of(this.route.parent.snapshot.data.unit);
+    if (this.unit$) {
+      this.subscriptions.push(
+        this.unit$.pipe(first()).subscribe((unit) => {
+          if (!unit) {
+            return;
+          }
+
+          this.assessingUnitRole = this.findUnitRole(unit.id);
+          this.loadTutors();
+          this.loadUnit(unit);
+        }),
+      );
+    }
+
+    this.subscriptions.push(
+      this.route.paramMap.subscribe((params) => this.updateCurrentTabFromState(params.get('tab'))),
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  public get currentIndex(): number {
+    const index = this.tabs.findIndex((tab) => tab.routeSegment === this.currentTab.routeSegment);
+    return index >= 0 ? index : 0;
+  }
+
+  public onTabChange(event: MatTabChangeEvent): void {
+    const nextTab = this.tabs[event.index] ?? this.tabs[0];
+    this.currentTab = nextTab;
+    if (this.route.parent?.snapshot.data.unit) {
+      this.router.navigate(
+        [
+          '/units',
+          this.route.parent.snapshot.paramMap.get('unitId'),
+          'admin',
+          nextTab.routeSegment,
+        ],
+        {replaceUrl: true},
+      );
+      return;
+    }
+  }
+
+  private updateCurrentTabFromState(tabParam?: string | null): void {
+    this.currentTab =
+      this.tabs.find((tab) => tab.routeSegment === tabParam) ??
+      this.tabs.find((tab) => tab.routeSegment === 'details') ??
+      this.tabs[0];
+  }
+
+  private findUnitRole(unitId: number): UnitRole | null {
+    const currentView = this.globalStateService.currentViewAndEntitySubject$.value;
+
+    if (currentView?.viewType === ViewType.UNIT) {
+      const currentUnitRole = currentView.entity as UnitRole;
+      if (currentUnitRole?.unit?.id === unitId) {
+        return currentUnitRole;
+      }
+    }
+
+    let unitRole = this.globalStateService.loadedUnitRoles.currentValues.find(
+      (role) => role.unit.id === unitId,
+    );
+
+    if (
+      !unitRole &&
+      (this.userService.currentUser.role === 'Admin' ||
+        this.userService.currentUser.role === 'Auditor')
+    ) {
+      unitRole = this.userService.adminOrAuditorRoleFor(
+        this.userService.currentUser.role,
+        unitId,
+        this.userService.currentUser,
+      );
+    }
+
+    return unitRole ?? null;
+  }
+
+  private loadTutors(): void {
+    this.subscriptions.push(
+      this.userService.getTutors().subscribe((tutors) => {
+        this.staff = tutors;
+      }),
+    );
+  }
+
+  private loadUnit(unit: Unit): void {
+    this.loadingUnit = false;
+    this.unit = unit;
+
+    if (this.assessingUnitRole) {
+      this.assessingUnitRole.unit = unit;
+    }
+
+    this.globalStateService.setView(
+      ViewType.UNIT,
+      this.assessingUnitRole ? this.assessingUnitRole : unit,
+    );
+  }
+}
diff --git a/src/app/units/states/groups/groups.coffee b/src/app/units/states/groups/groups.coffee
deleted file mode 100644
index 90e10afbad..0000000000
--- a/src/app/units/states/groups/groups.coffee
+++ /dev/null
@@ -1,20 +0,0 @@
-angular.module('doubtfire.units.states.groups', [])
-#
-# State for convenors/students assessing ]student groups
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/students/groups', {
-    parent: 'units/index'
-    url: '/students/groups'
-    templateUrl: "units/states/groups/groups.tpl.html"
-    controller: "UnitGroupsStateCtrl"
-    data:
-      task: "Student Groups"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
-   }
-)
-.controller("UnitGroupsStateCtrl", ($scope) ->
-  # No controller needed if there is no groupwork
-  return unless $scope.unit.hasGroupwork()
-)
diff --git a/src/app/units/states/groups/groups.tpl.html b/src/app/units/states/groups/groups.tpl.html
deleted file mode 100644
index 319f46e08f..0000000000
--- a/src/app/units/states/groups/groups.tpl.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="container" ng-if="unit.hasGroupwork()">
-  <group-set-manager
-    class="row"
-    unit="unit"
-    unit-role="unitRole"
-    selected-group-set="selectedGroupSet">
-  </group-set-manager>
-</div><!--/has-groupwork-->
-<div class="container" ng-hide="unit.hasGroupwork()">
-  <div class="large-notice-block">
-    <i class="fa fa-2x fa-users"></i>
-    <p>No Groupwork Enabled</p>
-  </div>
-  <div class="text-center col-sm-12 col-md-6 col-md-offset-3">
-    <p class="text-muted">
-      There is no group work enabled for this unit. Convenors should create at
-      least one group set first for groups to be created. This can be found under
-      the groups tab in the unit administration settings.
-    </p>
-    <a class="btn btn-default" ui-sref="units/admin({unitId: unit.id})">Unit Administration</a>
-  </div>
-</div><!--/no-groupwork-->
diff --git a/src/app/units/states/groups/unit-groups/unit-groups.component.html b/src/app/units/states/groups/unit-groups/unit-groups.component.html
new file mode 100644
index 0000000000..a3d3f64058
--- /dev/null
+++ b/src/app/units/states/groups/unit-groups/unit-groups.component.html
@@ -0,0 +1,21 @@
+<f-page-container>
+  @if (unit.hasGroupwork()) {
+    <f-group-set-manager [selectedGroupSet]="selectedGroupSet" [unit]="unit" [unitRole]="unitRole">
+    </f-group-set-manager>
+  } @else {
+    <div class="mx-auto flex max-w-4xl flex-col items-center justify-center">
+      <mat-icon>groups</mat-icon>
+
+      <h1>No Groupwork Enabled</h1>
+
+      <p class="p-1 text-center text-gray-500">
+        There is no group work enabled for this unit. Convenors should create at least one group set
+        first for groups to be created. This can be found under the groups tab in the unit
+        administration settings.
+      </p>
+      <button mat-raised-button [routerLink]="['/units', unit.id, 'admin', 'groups']">
+        Unit Administration
+      </button>
+    </div>
+  }
+</f-page-container>
diff --git a/src/app/units/states/groups/unit-groups/unit-groups.component.scss b/src/app/units/states/groups/unit-groups/unit-groups.component.scss
new file mode 100644
index 0000000000..542e68a366
--- /dev/null
+++ b/src/app/units/states/groups/unit-groups/unit-groups.component.scss
@@ -0,0 +1,5 @@
+.mat-icon {
+  font-size: 75px;
+  width: 75px;
+  height: 75px;
+}
diff --git a/src/app/units/states/groups/unit-groups/unit-groups.component.ts b/src/app/units/states/groups/unit-groups/unit-groups.component.ts
new file mode 100644
index 0000000000..08edc57065
--- /dev/null
+++ b/src/app/units/states/groups/unit-groups/unit-groups.component.ts
@@ -0,0 +1,79 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, Subscription, distinctUntilChanged, of} from 'rxjs';
+import {GroupSet, Unit, UnitRole, UserService} from 'src/app/api/models/doubtfire-model';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+
+// This component is only displayed to staff
+// Students will be shown the projects/states/groups (project-groups) component
+@Component({
+  selector: 'f-unit-groups',
+  templateUrl: './unit-groups.component.html',
+  styleUrl: './unit-groups.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitGroupsComponent implements OnInit, OnDestroy {
+  @Input() unit$: Observable<Unit>;
+
+  @Input() unit: Unit;
+  @Input() unitRole: UnitRole;
+  @Input() selectedGroupSet: GroupSet;
+
+  private unitSub?: Subscription;
+
+  constructor(
+    private globalStateService: GlobalStateService,
+    private userService: UserService,
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit(): void {
+    this.unit$ = this.unit$ ?? of(this.route.parent.snapshot.data.unit);
+    this.unitSub = this.unit$
+      ?.pipe(distinctUntilChanged((a, b) => a?.id === b?.id))
+      .subscribe((unit) => {
+        if (!unit) {
+          return;
+        }
+
+        this.unit = unit;
+        this.unitRole = this.findUnitRole(unit.id);
+        this.selectedGroupSet =
+          this.selectedGroupSet?.unit?.id === unit.id ? this.selectedGroupSet : unit.groupSets?.[0];
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.unitSub?.unsubscribe();
+  }
+
+  private findUnitRole(unitId: number): UnitRole {
+    const currentView = this.globalStateService.currentViewAndEntitySubject$.value;
+
+    if (currentView?.viewType === ViewType.UNIT) {
+      const currentUnitRole = currentView.entity as UnitRole;
+      if (currentUnitRole?.unit?.id === unitId) {
+        return currentUnitRole;
+      }
+    }
+
+    let unitRole = this.globalStateService.loadedUnitRoles.currentValues.find(
+      (role) => role.unit.id === unitId,
+    );
+
+    if (
+      !unitRole &&
+      (this.userService.currentUser.role === 'Admin' ||
+        this.userService.currentUser.role === 'Auditor')
+    ) {
+      unitRole = this.userService.adminOrAuditorRoleFor(
+        this.userService.currentUser.role,
+        unitId,
+        this.userService.currentUser,
+      );
+    }
+
+    return unitRole;
+  }
+}
diff --git a/src/app/units/states/index/index.coffee b/src/app/units/states/index/index.coffee
deleted file mode 100644
index 7a7346a319..0000000000
--- a/src/app/units/states/index/index.coffee
+++ /dev/null
@@ -1,50 +0,0 @@
-angular.module('doubtfire.units.states.index', [])
-
-#
-# Root state for units
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/index', {
-    url: "/units/:unitId"
-    abstract: true
-    views:
-      main:
-        controller: "UnitsIndexStateCtrl"
-        templateUrl: "units/states/index/index.tpl.html"
-    data:
-      pageTitle: "_Home_"
-      roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor']
-  }
-)
-
-.controller("UnitsIndexStateCtrl", ($scope, $rootScope, $state, $stateParams, newUnitService, newProjectService, listenerService, GlobalStateService, newUserService, alertService) ->
-  # Error - required unitId is missing!
-  unitId = +$stateParams.unitId
-  return $state.go('home') unless unitId
-
-  GlobalStateService.onLoad () ->
-    # Load assessing unit role
-    $scope.unitRole = GlobalStateService.loadedUnitRoles.currentValues.find((unitRole) -> unitRole.unit.id == unitId)
-
-    if (! $scope.unitRole?) && ( newUserService.currentUser.role == "Admin" || newUserService.currentUser.role == "Auditor" )
-      $scope.unitRole = newUserService.adminOrAuditorRoleFor(newUserService.currentUser.role, unitId, newUserService.currentUser)
-
-    # Go home if no unit role was found
-    return $state.go('home') unless $scope.unitRole?
-
-    GlobalStateService.setView("UNIT", $scope.unitRole)
-
-    newUnitService.get(unitId).subscribe({
-      next: (unit)->
-        newProjectService.loadStudents(unit).subscribe({
-          next: (students)->
-            $scope.unit = unit
-          error: (err)->
-            alertService.error( "Error loading students: " + err, 8000)
-            setTimeout((()-> $state.go('home')), 5000)
-        })
-      error: (err)->
-        alertService.error( "Error loading unit: " + err, 8000)
-        setTimeout((()-> $state.go('home')), 5000)
-    })
-)
diff --git a/src/app/units/states/index/index.tpl.html b/src/app/units/states/index/index.tpl.html
deleted file mode 100644
index 795574f613..0000000000
--- a/src/app/units/states/index/index.tpl.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div ng-hide="unit && (unitRole || project)" class="large-notice-block">
-  <i class="fa fa-2x fa-spinner fa-pulse"></i>
-  <p>Loading unit details...</p>
-</div><!--/loading-->
-<div ng-if="unit && (unitRole || project)">
-  <ui-view/>
-</div>
diff --git a/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.html b/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.html
new file mode 100644
index 0000000000..d5f194b3c2
--- /dev/null
+++ b/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.html
@@ -0,0 +1,83 @@
+<mat-dialog-content class="mat-typography">
+  <div class="modal-header">
+    <h1>D2L Grade Transfer</h1>
+  </div>
+  <div class="modal-body" [hidden]="hasD2lMapping()">
+    <p>
+      There are no D2L mapping details for this unit. Please update in the Unit Administration page.
+    </p>
+  </div>
+  <div class="modal-body" [hidden]="!hasD2lMapping()">
+    <p>
+      Make sure that all student grades are ready to be transferred. Then run the following actions
+      in order.
+    </p>
+
+    <ol>
+      <li class="flex flex-row items-center">
+        <button color="primary" mat-icon-button (click)="openD2l()">
+          <mat-icon>open_in_new</mat-icon>
+        </button>
+        <div>
+          <strong>1. Login to D2L</strong>.
+          <p>
+            This will open a new window, where you need to login to D2L to authenticate for the
+            grade transfer process.
+          </p>
+        </div>
+      </li>
+      <li class="flex flex-row items-center">
+        <button color="primary" mat-icon-button (click)="startTransfer()">
+          <mat-icon>start</mat-icon>
+        </button>
+        <div>
+          <strong>2. Begin Grade Transfer</strong>
+          <p>This will start transferring grades to D2L. This may take a few minutes.</p>
+        </div>
+      </li>
+      <li class="flex flex-row items-center" [hidden]="!hasWeight()">
+        <button color="primary" mat-icon-button (click)="openWeightPage()">
+          <mat-icon>open_in_new</mat-icon>
+        </button>
+        <div>
+          <strong>3. Update the weight</strong>
+          <p>
+            Use the following button to open D2L. Update the weight based on the weight of the
+            portfolio in the unit. If this is the only assessment consider changing to a Points
+            grading scheme in D2L.
+          </p>
+        </div>
+      </li>
+      <li class="flex flex-row items-center">
+        <button color="primary" mat-icon-button>
+          <mat-icon>hourglass_empty</mat-icon>
+        </button>
+        <div>
+          <strong
+            ><span [hidden]="hasWeight()">3</span><span [hidden]="!hasWeight()">4</span>. Wait for
+            Email</strong
+          >
+          <p>Once the transfer is complete, you will receive an email with the results.</p>
+        </div>
+      </li>
+      <li class="flex flex-row items-center">
+        <button color="primary" mat-icon-button (click)="downloadRecord()">
+          <mat-icon>download</mat-icon>
+        </button>
+        <div>
+          <strong
+            ><span [hidden]="hasWeight()">4</span><span [hidden]="!hasWeight()">5</span>. Download
+            record</strong
+          >
+          <p>
+            Once the transfer is complete, you can download the record of the transfer. This will
+            show you any errors that may have occurred.
+          </p>
+        </div>
+      </li>
+    </ol>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-dialog-close mat-stroked-button>Close</button>
+</mat-dialog-actions>
diff --git a/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.scss b/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.scss
new file mode 100644
index 0000000000..0e78119808
--- /dev/null
+++ b/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.scss
@@ -0,0 +1,13 @@
+mat-form-field {
+  padding: 1rem;
+}
+
+li {
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+li button {
+  margin-right: 1rem;
+}
diff --git a/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.ts b/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.ts
new file mode 100644
index 0000000000..b03e252a6f
--- /dev/null
+++ b/src/app/units/states/portfolios/d2l-transfer-modal/d2l-transfer.component.ts
@@ -0,0 +1,159 @@
+//
+// Modal to show Doubtfire version info
+//
+import {HttpClient} from '@angular/common/http';
+import {ChangeDetectionStrategy, Component, Inject, Injectable, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {D2lAssessmentMapping} from 'src/app/api/models/d2l/d2l_assessment_mapping';
+import {D2lAssessmentMappingService} from 'src/app/api/models/doubtfire-model';
+import {Unit} from 'src/app/api/models/unit';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+
+@Component({
+  selector: 'f-d2l-transfer',
+  templateUrl: 'd2l-transfer.component.html',
+  styleUrl: 'd2l-transfer.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class D2lTransferComponent implements OnInit {
+  public d2lDataMapping: D2lAssessmentMapping = new D2lAssessmentMapping(this.data);
+  private apiEndpoint: string;
+  private weightedUnit: boolean = false;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: Unit,
+    @Inject(MatDialogRef<D2lTransferComponent>)
+    public dialogRef: MatDialogRef<D2lTransferComponent>,
+    private alertService: AlertService,
+    public d2lAssessmentMappingService: D2lAssessmentMappingService,
+    public httpClient: HttpClient,
+    public doubtfireConstants: DoubtfireConstants,
+    public fileDownloader: FileDownloaderService,
+  ) {}
+
+  public ngOnInit(): void {
+    this.data.loadD2lMapping().subscribe({
+      next: (d2lDataMapping) => {
+        this.d2lDataMapping = d2lDataMapping;
+
+        // If we have the org unit it, then we can check the grading standard
+        if (this.d2lDataMapping.orgUnitId) {
+          this.checkUnitGradesWeighted();
+        }
+      },
+      error: (_err) => {
+        // No mapping found, create a new one
+        this.d2lDataMapping = new D2lAssessmentMapping(this.data);
+      },
+    });
+
+    this.httpClient.get<string>(`${this.doubtfireConstants.API_URL}/d2l/endpoint`).subscribe({
+      next: (response) => {
+        this.apiEndpoint = response;
+      },
+      error: (err) => {
+        this.alertService.error(`Failed to get locaiton of D2L instance: ${err}`);
+      },
+    });
+  }
+
+  public checkUnitGradesWeighted(): void {
+    this.httpClient
+      .get<boolean>(`${this.doubtfireConstants.API_URL}/units/${this.data.id}/d2l/grades/weighted`)
+      .subscribe({
+        next: (response) => {
+          this.weightedUnit = response;
+        },
+        error: (err) => {
+          this.alertService.error(`Failed to get unit weighted status: ${err}`);
+        },
+      });
+  }
+
+  public openD2l(): void {
+    const url = `${this.doubtfireConstants.API_URL}/d2l/login_url`;
+    this.httpClient.post<string>(url, {}).subscribe({
+      next: (response) => {
+        window.open(response, '_blank');
+      },
+      error: (err) => {
+        this.alertService.error(`Failed to get D2L login URL: ${err}`);
+      },
+    });
+  }
+
+  public openWeightPage(): void {
+    const url = `${this.apiEndpoint}/d2l/lms/grades/admin/manage/item_props_newedit.d2l?objectId=${this.d2lDataMapping.gradeObjectId}&ou=${this.d2lDataMapping.orgUnitId}&scroll=weight`;
+    console.log(url);
+    window.open(url, '_blank');
+  }
+
+  public hasD2lMapping(): boolean {
+    return this.d2lDataMapping.id !== undefined;
+  }
+
+  public hasWeight(): boolean {
+    return this.weightedUnit;
+  }
+
+  public startTransfer(): void {
+    const url = `${this.doubtfireConstants.API_URL}/units/${this.data.id}/d2l/grades`;
+    this.httpClient.post(url, {}).subscribe({
+      next: () => {
+        this.alertService.success('Transfer started');
+      },
+      error: (err) => {
+        this.alertService.error(`Failed to start transfer: ${err}`);
+      },
+    });
+  }
+
+  public downloadRecord(): void {
+    this.httpClient
+      .get<GradesAvailableResponse>(
+        `${this.doubtfireConstants.API_URL}/units/${this.data.id}/d2l/grades/available`,
+      )
+      .subscribe({
+        next: (response) => {
+          if (response.running) {
+            this.alertService.error('Transfer in progress, please wait');
+          } else if (response.available) {
+            const url = `${this.doubtfireConstants.API_URL}/units/${this.data.id}/d2l/grades`;
+            this.fileDownloader.downloadFile(url, `${this.data.code}-d2l-grades.csv`);
+          } else {
+            this.alertService.error(
+              'No grade transfer results are available, and grade transfer does not appear to be in progress',
+            );
+          }
+        },
+        error: (err) => {
+          this.alertService.error(`Failed to download record: ${err}`);
+        },
+      });
+  }
+}
+
+/**
+ * The about doubtfire modal service - used to create and show the modal
+ */
+
+@Injectable()
+export class D2lTransferModal {
+  constructor(public dialog: MatDialog) {}
+
+  public open(unit: Unit): void {
+    // Show dialog while the data above is being fetched
+    this.dialog.open(D2lTransferComponent, {
+      width: '600px',
+      data: unit,
+    });
+  }
+}
+
+interface GradesAvailableResponse {
+  available: boolean;
+  running: boolean;
+}
diff --git a/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.html b/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.html
new file mode 100644
index 0000000000..73fe7e03fb
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.html
@@ -0,0 +1,40 @@
+<div class="p-3">
+  <h2>Grade for {{ project.student.name }}</h2>
+  <p>Assign grade for this project.</p>
+  <mat-form-field appearance="outline" class="w-full">
+    <mat-label>Rationale</mat-label>
+    <textarea matInput rows="5" [(ngModel)]="project.gradeRationale"></textarea>
+  </mat-form-field>
+  @for (group of gradeResults; track group) {
+    <div class="mt-3 flex items-center justify-between gap-1">
+      <div class="w-[200px]">
+        <strong>{{ group.name }}</strong>
+      </div>
+
+      <div class="flex flex-1 justify-end gap-1">
+        @for (score of group.scores; track score) {
+          <button
+            mat-raised-button
+            [color]="project.grade === score ? 'primary' : 'default'"
+            [disabled]="!project.gradeRationale"
+            [style.flex]="'0 0 ' + 100 / maxScoresPerRow + '%'"
+            [value]="score"
+            (click)="project.assignGrade(score, project.gradeRationale)"
+          >
+            {{ score }}
+          </button>
+        }
+      </div>
+    </div>
+  }
+  <div class="mt-6 flex w-full justify-end">
+    <button
+      color="primary"
+      mat-raised-button
+      [disabled]="!project.gradeRationale"
+      (click)="project.assignGrade(project.grade, project.gradeRationale)"
+    >
+      Save
+    </button>
+  </div>
+</div>
diff --git a/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.scss b/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.ts b/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.ts
new file mode 100644
index 0000000000..54f33d479e
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-assessment/portfolios-assessment.component.ts
@@ -0,0 +1,44 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+
+@Component({
+  selector: 'f-portfolios-assessment',
+  templateUrl: './portfolios-assessment.component.html',
+  styleUrl: './portfolios-assessment.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfoliosAssessmentComponent {
+  @Input() project: Project;
+  @Input() unit: Unit;
+
+  public gradeResults = [
+    {
+      name: 'Fail',
+      scores: [0, 10, 20, 30, 40, 44],
+    },
+    {
+      name: 'Pass',
+      scores: [50, 53, 55, 57],
+    },
+    {
+      name: 'Credit',
+      scores: [60, 63, 65, 67],
+    },
+    {
+      name: 'Distinction',
+      scores: [70, 73, 75, 77],
+    },
+    {
+      name: 'High Distinction',
+      scores: [80, 83, 85, 87],
+    },
+    {
+      name: 'High Distinction',
+      scores: [90, 93, 95, 97, 100],
+    },
+  ];
+
+  public maxScoresPerRow = Math.max(...this.gradeResults.map((g) => g.scores.length));
+}
diff --git a/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.html b/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.html
new file mode 100644
index 0000000000..f96d14c411
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.html
@@ -0,0 +1,309 @@
+<div class="">
+  <h2>Mark portfolios</h2>
+  <p>Assess student portfolios</p>
+  <div class="flex items-center justify-between">
+    <div class="flex flex-row items-center justify-end gap-3">
+      <mat-form-field appearance="outline" class="mt-[22px]">
+        <mat-label>Filter</mat-label>
+        <input
+          #input
+          matInput
+          placeholder="Eg. Student ID"
+          [disabled]="loading"
+          [value]="filterText"
+          (input)="applyFilter($event)"
+        />
+      </mat-form-field>
+      <mat-button-toggle-group
+        hideSingleSelectionIndicator
+        [disabled]="loading"
+        [(ngModel)]="portfolioFilter"
+        (change)="onPortfolioFilterChange($event)"
+      >
+        <mat-button-toggle
+          matTooltip="Show all students, even those without portfolios"
+          matTooltipPosition="above"
+          value="all"
+          ><mat-icon>public</mat-icon></mat-button-toggle
+        >
+        <mat-button-toggle
+          matTooltip="Show only students with a submitted portfolio"
+          matTooltipPosition="above"
+          value="submitted_only"
+          ><mat-icon>menu_book</mat-icon></mat-button-toggle
+        >
+      </mat-button-toggle-group>
+
+      <mat-button-toggle-group
+        hideSingleSelectionIndicator
+        [disabled]="loading"
+        [(ngModel)]="tutorialFilter"
+        (change)="onTutorialFilterChange($event)"
+      >
+        <mat-button-toggle
+          matTooltip="Show students from all tutorials"
+          matTooltipPosition="above"
+          value="all"
+          ><mat-icon>account_balance</mat-icon></mat-button-toggle
+        >
+        <mat-button-toggle
+          matTooltip="Show students from my tutorials"
+          matTooltipPosition="above"
+          value="mine"
+          ><mat-icon>edit</mat-icon></mat-button-toggle
+        >
+      </mat-button-toggle-group>
+
+      <mat-button-toggle-group
+        hideSingleSelectionIndicator
+        [disabled]="loading"
+        [(ngModel)]="gradeFilter"
+        (change)="onGradeFilterChange($event)"
+      >
+        <mat-button-toggle
+          matTooltip="Show students aiming for any grade"
+          matTooltipPosition="above"
+          [value]="null"
+        >
+          All
+        </mat-button-toggle>
+        @for (grade of gradeValues; track grade) {
+          <mat-button-toggle
+            class="flex items-center justify-center"
+            matTooltip="Show students aiming for a {{ gradeLabel(grade) }}"
+            matTooltipPosition="above"
+            [value]="grade"
+          >
+            <f-grade-icon [grade]="grade" [unit]="unit"></f-grade-icon>
+          </mat-button-toggle>
+        }
+      </mat-button-toggle-group>
+    </div>
+  </div>
+  <div class="mb-1 flex items-center justify-start gap-1">
+    <button mat-button [disabled]="loading" (click)="downloadGrades()">
+      <mat-icon>download</mat-icon>Download Grades
+    </button>
+
+    <button
+      mat-button
+      matTooltip="Downloading all portfolios may take a long time"
+      matTooltipPosition="above"
+      matTooltipShowDelay="500"
+      [disabled]="loading"
+      (click)="downloadPortfolios()"
+    >
+      <mat-icon>download</mat-icon>Download Portfolios
+    </button>
+
+    <f-download-staff-notes [unit]="unit"></f-download-staff-notes>
+    <f-upload-grades [unit]="unit"></f-upload-grades>
+
+    @if (hasD2lMapping()) {
+      <button mat-button [disabled]="loading" (click)="transferToD2l()">
+        <mat-icon>upload</mat-icon>Transfer Grades to D2L
+      </button>
+    }
+  </div>
+  @if (loading) {
+    <div aria-busy="true" aria-label="Loading student portfolios" class="overflow-x-auto">
+      <div class="min-w-[1600px]">
+        <div class="flex h-14 items-center gap-6 border-b border-gray-300 px-4">
+          @for (
+            column of [
+              {columnWidth: '110px', rowWidth: '100%'},
+              {columnWidth: '170px', rowWidth: '50%'},
+              {columnWidth: '180px', rowWidth: '50%'},
+              {columnWidth: '130px', rowWidth: '75%'},
+              {columnWidth: '80px', rowWidth: '28px'},
+              {columnWidth: '80px', rowWidth: '28px'},
+              {columnWidth: '180px', rowWidth: '100%'},
+              {columnWidth: '400px', rowWidth: '100%'},
+              {columnWidth: '80px', rowWidth: '100%'},
+            ];
+            track $index
+          ) {
+            <ngx-skeleton-loader
+              class="block shrink-0"
+              [style.width]="column.columnWidth"
+              [theme]="{
+                width: column.rowWidth,
+                height: '12px',
+                'border-radius': '999px',
+                margin: '0',
+              }"
+            ></ngx-skeleton-loader>
+          }
+        </div>
+
+        @for (row of [0, 1, 2, 3, 4, 5, 6, 7]; track row) {
+          <div class="flex h-15 items-center gap-6 border-b border-gray-300 px-4">
+            @for (
+              column of [
+                {columnWidth: '110px', rowWidth: '100%'},
+                {columnWidth: '170px', rowWidth: '100%'},
+                {columnWidth: '180px', rowWidth: '75%'},
+                {columnWidth: '130px', rowWidth: '70%'},
+                {columnWidth: '80px', rowWidth: '28px'},
+                {columnWidth: '80px', rowWidth: '28px'},
+                {columnWidth: '180px', rowWidth: '100%'},
+                {columnWidth: '400px', rowWidth: '100%'},
+                {columnWidth: '80px', rowWidth: '100%'},
+              ];
+              track $index
+            ) {
+              @if ($index === 4 || $index === 5) {
+                <ngx-skeleton-loader
+                  appearance="circle"
+                  class="block shrink-0"
+                  [style.width]="column.columnWidth"
+                  [theme]="{width: column.rowWidth, height: '28px', margin: '0'}"
+                ></ngx-skeleton-loader>
+              } @else {
+                <ngx-skeleton-loader
+                  class="block shrink-0"
+                  [style.width]="column.columnWidth"
+                  [theme]="{
+                    width: column.rowWidth,
+                    height: $index === 7 ? '25px' : '12px',
+                    'border-radius': $index === 7 ? '4px' : '999px',
+                    margin: '0',
+                  }"
+                ></ngx-skeleton-loader>
+              }
+            }
+          </div>
+        }
+      </div>
+    </div>
+  }
+
+  <table
+    class="table-selectable"
+    mat-table
+    matSort
+    matSortActive="student"
+    matSortDirection="asc"
+    matSortDisableClear
+    [dataSource]="dataSource"
+    [hidden]="loading"
+    (matSortChange)="sortTableData($event)"
+  >
+    <ng-container matColumnDef="student" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Student</th>
+      <td *matCellDef="let project" mat-cell>
+        {{ project.student.studentId || project.student.username }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
+      <td *matCellDef="let project" mat-cell>
+        {{ project.student.name }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="tutor" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Tutor</th>
+      <td *matCellDef="let project" mat-cell>
+        {{ project.tutorNames() }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="tutorial" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Tutorial</th>
+      <td *matCellDef="let project" mat-cell>
+        {{ project.shortTutorialDescription() }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="target" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Target</th>
+      <td *matCellDef="let project" mat-cell>
+        <f-grade-icon [grade]="project.targetGrade" [unit]="unit"></f-grade-icon>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="submitted-as" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Submitted as</th>
+      <td *matCellDef="let project" mat-cell>
+        <f-grade-icon [grade]="project.submittedGrade" [unit]="unit"></f-grade-icon>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="submission-date" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Submission Date</th>
+      <td *matCellDef="let project" mat-cell>
+        {{ project.portfolioSubmissionDate | date: 'EEE d MMM y, h:mm a' }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="has-portfolio" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Has Portfolio</th>
+      <td *matCellDef="let project" mat-cell>
+        {{ project.hasPortfolio ? 'Yes' : 'No' }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="stats" sticky>
+      <th *matHeaderCellDef mat-header-cell>Stats</th>
+      <td *matCellDef="let project" mat-cell>
+        <div class="flex h-[25px] w-[400px] overflow-hidden rounded">
+          @for (bar of project.taskStats; track bar) {
+            <div
+              class="flex h-[25px] items-center justify-center overflow-hidden"
+              matTooltipDelay="100"
+              matTooltipPosition="above"
+              [matTooltip]="statusLabel(bar.key) + ' ' + bar.value + '%'"
+              [ngStyle]="{
+                width: bar.value + '%',
+                background: statusColor(bar.key),
+              }"
+            >
+              @if (bar.key === 'not_started') {
+                <span class="text-xs text-black"> {{ bar.value }}% </span>
+              }
+              @if (bar.key === 'complete') {
+                <span class="text-xs text-white"> {{ bar.value }}% </span>
+              }
+            </div>
+          }
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="grade" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>Grade</th>
+      <td *matCellDef="let project" mat-cell>
+        {{ project.grade }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions" sticky>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>View</th>
+      <td *matCellDef="let project" mat-cell>
+        <button mat-icon-button (click)="openProject($event, project)">
+          <mat-icon>launch</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr
+      *matRowDef="let project; columns: displayedColumns"
+      mat-row
+      (click)="selectStudent(project)"
+    ></tr>
+
+    <tr *matNoDataRow class="mat-row w-full">
+      <td class="mat-cell w-full p-3 text-center" colspan="4">No students found</td>
+    </tr>
+  </table>
+
+  <mat-paginator
+    [disabled]="loading"
+    [hidden]="loading"
+    [pageSize]="25"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+  ></mat-paginator>
+</div>
diff --git a/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.scss b/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.ts b/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.ts
new file mode 100644
index 0000000000..e479389a55
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.ts
@@ -0,0 +1,311 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {MatButtonToggleChange} from '@angular/material/button-toggle';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+import {Project} from 'src/app/api/models/project';
+import {TaskStatusEnum} from 'src/app/api/models/task-status';
+import {Unit} from 'src/app/api/models/unit';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+import {D2lTransferModal} from '../../d2l-transfer-modal/d2l-transfer.component';
+
+export interface PortfolioListFilters {
+  portfolioFilter: 'all' | 'submitted_only';
+  tutorialFilter: 'all' | 'mine';
+  gradeFilter: number | null;
+  filterText: string;
+}
+
+export const DEFAULT_PORTFOLIO_LIST_FILTERS: PortfolioListFilters = {
+  portfolioFilter: 'submitted_only',
+  tutorialFilter: 'all',
+  gradeFilter: null,
+  filterText: '',
+};
+
+@Component({
+  selector: 'f-portfolios-list',
+  templateUrl: './portfolios-list.component.html',
+  styleUrl: './portfolios-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfoliosListComponent implements OnChanges, AfterViewInit {
+  @Input() unit: Unit;
+  @Input() loading = true;
+  @Input() filters: PortfolioListFilters = DEFAULT_PORTFOLIO_LIST_FILTERS;
+
+  @Output()
+  public studentSelected: EventEmitter<Project> = new EventEmitter();
+  @Output()
+  public filtersChange: EventEmitter<PortfolioListFilters> = new EventEmitter();
+
+  displayedColumns: string[] = [];
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  dataSource: MatTableDataSource<Project> = new MatTableDataSource([]);
+
+  public portfolioFilter: 'all' | 'submitted_only' = 'submitted_only';
+  public tutorialFilter: 'all' | 'mine' = 'all';
+  public gradeFilter: number | null = null;
+  public filterText = '';
+
+  constructor(
+    private taskService: TaskService,
+    private userService: UserService,
+    private gradeService: GradeService,
+    private fileDownloaderService: FileDownloaderService,
+    private unitService: UnitService,
+    private alertService: AlertService,
+    private sidekiq: SidekiqProgressModalService,
+    private d2lTransferModal: D2lTransferModal,
+  ) {}
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.applyTextFilter();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.filters) {
+      this.portfolioFilter = this.filters.portfolioFilter;
+      this.tutorialFilter = this.filters.tutorialFilter;
+      this.gradeFilter = this.filters.gradeFilter;
+      this.filterText = this.filters.filterText;
+    }
+
+    if (!this.loading && this.unit && (changes.loading || changes.unit)) {
+      this.updateDataSource();
+    }
+
+    if (changes.filters) {
+      this.applyTextFilter();
+      if (!this.loading && this.unit) {
+        this.updateDataSource();
+      }
+    }
+  }
+
+  openProject(event: Event, project: Project) {
+    event.stopPropagation();
+    window.open(`/projects/${project.id}/dashboard/?tutor=true`, '_blank');
+  }
+
+  downloadGrades() {
+    this.fileDownloaderService.downloadFile(this.unit.gradesUrl, `${this.unit.code}-grades.csv`);
+  }
+
+  downloadPortfolios() {
+    this.unitService.zipPortfolios(this.unit).subscribe({
+      next: (newJob) => {
+        this.sidekiq.show(`Downloading Portfolios: ${this.unit.code}`, newJob.id).subscribe({
+          next: () => {
+            this.fileDownloaderService.downloadFile(
+              this.unit.portfoliosUrl,
+              `${this.unit.code}-portfolios.zip`,
+            );
+          },
+          error: (error) => {
+            this.alertService.error(error, 6000);
+          },
+        });
+      },
+      error: (error) => {
+        this.alertService.error(`Could not download portfolios: ${error}`, 6000);
+      },
+    });
+  }
+
+  public hasD2lMapping() {
+    return this.unit.hasD2lMapping();
+  }
+
+  transferToD2l() {
+    this.d2lTransferModal.open(this.unit);
+  }
+
+  public get gradeValues() {
+    return this.gradeService.gradeValuesFor(this.unit);
+  }
+
+  public gradeLabel(grade) {
+    return this.gradeService.gradeLabel(grade, this.unit);
+  }
+
+  updateDataSource() {
+    const currentUser = this.userService.currentUser;
+
+    const students = this.unit.students
+      .filter((p) =>
+        this.portfolioFilter === 'submitted_only' ? p.hasPortfolio || p.portfolioAvailable : true,
+      )
+      .filter((p) => (this.tutorialFilter === 'mine' ? p.hasTutor(currentUser) : true))
+      .filter((p) => (this.gradeFilter !== null ? p.submittedGrade === this.gradeFilter : true));
+
+    this.displayedColumns = [
+      'student',
+      'name',
+      'tutor',
+      'tutorial',
+      'target',
+      'submitted-as',
+      'submission-date',
+      ...(this.portfolioFilter === 'all' ? ['has-portfolio'] : []),
+      'stats',
+      'grade',
+      'actions',
+    ];
+
+    this.dataSource.data = students;
+    this.dataSource.paginator?.firstPage();
+    this.applyTextFilter();
+  }
+
+  onPortfolioFilterChange(event: MatButtonToggleChange) {
+    this.portfolioFilter = event.value;
+    this.updateDataSource();
+    this.emitFilters();
+  }
+
+  onTutorialFilterChange(event: MatButtonToggleChange) {
+    this.tutorialFilter = event.value;
+    this.updateDataSource();
+    this.emitFilters();
+  }
+
+  onGradeFilterChange(event: MatButtonToggleChange) {
+    this.gradeFilter = event.value;
+    this.updateDataSource();
+    this.emitFilters();
+  }
+
+  applyFilter(event: Event) {
+    this.filterText = (event.target as HTMLInputElement).value;
+    this.applyTextFilter();
+    this.emitFilters();
+  }
+
+  private applyTextFilter() {
+    this.dataSource.filterPredicate = (project, filter) => {
+      const text = [
+        project.student.studentId,
+        project.student.username,
+        project.student.name,
+        project.tutorNames(),
+        project.shortTutorialDescription(),
+        String(project.grade),
+      ]
+        .join(' ')
+        .toLowerCase();
+
+      return text.includes(filter);
+    };
+
+    this.dataSource.filter = this.filterText.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  private emitFilters() {
+    this.filtersChange.emit({
+      portfolioFilter: this.portfolioFilter,
+      tutorialFilter: this.tutorialFilter,
+      gradeFilter: this.gradeFilter,
+      filterText: this.filterText,
+    });
+  }
+
+  selectStudent(project: Project) {
+    this.studentSelected.emit(project);
+  }
+
+  public statusColor(status: TaskStatusEnum): string {
+    return this.taskService.statusColors.get(status);
+  }
+
+  public statusLabel(status: TaskStatusEnum): string {
+    return this.taskService.statusLabels.get(status);
+  }
+
+  private sortCompare(aValue: number | string, bValue: number | string, isAsc: boolean) {
+    return (aValue < bValue ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
+  private sortDateValue(value: Date | string | number | null | undefined): number {
+    if (value === null || value === undefined || value === '') {
+      return 0;
+    }
+
+    const time = new Date(value).getTime();
+    return Number.isFinite(time) ? time : 0;
+  }
+
+  sortTableData(sort: Sort) {
+    if (!sort.active || sort.direction === '') {
+      return;
+    }
+    this.dataSource.data = this.dataSource.data.sort((a, b) => {
+      switch (sort.active) {
+        case 'student':
+          return this.sortCompare(
+            a.student.studentId || a.student.username,
+            b.student.studentId || b.student.username,
+            sort.direction === 'asc',
+          );
+        case 'name':
+          return this.sortCompare(a.student?.name, b.student?.name, sort.direction === 'asc');
+        case 'tutor': {
+          return this.sortCompare(a.tutorNames(), b.tutorNames(), sort.direction === 'asc');
+        }
+        case 'tutorial':
+          return this.sortCompare(
+            a.shortTutorialDescription(),
+            b.shortTutorialDescription(),
+            sort.direction === 'asc',
+          );
+
+        case 'target':
+          return this.sortCompare(a.targetGrade, b.targetGrade, sort.direction === 'asc');
+        case 'submitted-as':
+          return this.sortCompare(a.submittedGrade, b.submittedGrade, sort.direction === 'asc');
+        case 'submission-date':
+          return this.sortCompare(
+            this.sortDateValue(a.portfolioSubmissionDate),
+            this.sortDateValue(b.portfolioSubmissionDate),
+            sort.direction === 'asc',
+          );
+        case 'has-portfolio':
+          return this.sortCompare(
+            a.hasPortfolio.toString(),
+            b.hasPortfolio.toString(),
+            sort.direction === 'asc',
+          );
+        case 'grade':
+          return this.sortCompare(a.grade, b.grade, sort.direction === 'asc');
+        default:
+          return 0;
+      }
+    });
+  }
+}
diff --git a/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.html b/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.html
new file mode 100644
index 0000000000..abe9bf9a51
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.html
@@ -0,0 +1,14 @@
+<div class="p-3">
+  <h2>Review portfolio of {{ project.student.name }}</h2>
+  <p>View or download portfolio for assessment.</p>
+
+  @if (project.portfolioAvailable) {
+    <f-pdf-viewer class="flex h-screen w-full flex-grow" [pdfUrl]="project.portfolioUrl()">
+    </f-pdf-viewer>
+  } @else {
+    <div class="mt-12 flex w-full flex-col items-center justify-center gap-3 p-6">
+      <mat-icon>menu_book</mat-icon>
+      <h3 class="text-2xl">No Portfolio Submitted</h3>
+    </div>
+  }
+</div>
diff --git a/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.scss b/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.ts b/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.ts
new file mode 100644
index 0000000000..53efce9faa
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-portfolio-view/portfolios-portfolio-view.component.ts
@@ -0,0 +1,13 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Project} from 'src/app/api/models/project';
+
+@Component({
+  selector: 'f-portfolios-portfolio-view',
+  templateUrl: './portfolios-portfolio-view.component.html',
+  styleUrl: './portfolios-portfolio-view.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfoliosPortfolioViewComponent {
+  @Input() project: Project;
+}
diff --git a/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.html b/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.html
new file mode 100644
index 0000000000..ec5c89dfd0
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.html
@@ -0,0 +1,109 @@
+<div class="p-3">
+  <h2>Review progress of {{ project.student.name }}</h2>
+  <p>Review the students progress through the unit's tasks.</p>
+  <!-- <div class="flex w-full gap-3">
+    <mat-card appearance="outlined" class="w-full">
+      <mat-card-header>
+        <mat-card-title>Target Grade</mat-card-title>
+      </mat-card-header>
+      <mat-card-content class="p-3">
+        <div class="flex flex-col items-center justify-center gap-3 p-3">
+          <div class="flex flex-col items-center justify-center gap-1">
+            <mat-button-toggle-group hideSingleSelectionIndicator [ngModel]="project.targetGrade">
+              @for (grade of gradeValues; track grade) {
+                <mat-button-toggle
+                  [value]="grade"
+                  class="p-1 py-2.5"
+                  (click)="updatedTargetGrade(grade)"
+                >
+                  <f-grade-icon [grade]="grade"></f-grade-icon>
+                </mat-button-toggle>
+              }
+            </mat-button-toggle-group>
+          </div>
+          {{ gradeWord(project.targetGrade) ?? 'N/A' }}
+        </div>
+      </mat-card-content>
+    </mat-card>
+    <mat-card appearance="outlined" class="w-full">
+      <mat-card-header>
+        <mat-card-title>Submitted Grade</mat-card-title>
+      </mat-card-header>
+      <mat-card-content class="p-3">
+        <div class="flex flex-col items-center justify-center gap-3 p-3">
+          <div class="flex items-center justify-center gap-1">
+            <mat-button-toggle-group
+              hideSingleSelectionIndicator
+              [ngModel]="project.submittedGrade"
+            >
+              @for (grade of gradeValues; track grade) {
+                <mat-button-toggle
+                  [value]="grade"
+                  class="p-1 py-2.5"
+                  (click)="updateSubmittedGrade(grade)"
+                >
+                  <f-grade-icon [grade]="grade"></f-grade-icon>
+                </mat-button-toggle>
+              }
+            </mat-button-toggle-group>
+          </div>
+          {{ gradeWord(project.submittedGrade) ?? 'N/A' }}
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div> -->
+  <f-project-dashboard
+    class="block min-h-fit min-w-0"
+    [defaultTaskListCollapsed]="true"
+    [project$]="project$"
+    [showSubmittedGrade]="showSubmittedGrade"
+    [taskSelectionUrlBase]="taskSelectionUrlBase"
+  ></f-project-dashboard>
+
+  <!-- <div class="flex w-full flex-col items-center justify-center gap-3">
+
+    <mat-card appearance="outlined" class="w-full">
+      <mat-card-header>
+        <mat-card-title>Task List</mat-card-title>
+      </mat-card-header>
+      <mat-card-content class="p-3">
+        <f-project-tasks-list
+          [project]="project"
+          [unit]="unit"
+          class="max-w-4xl"
+        ></f-project-tasks-list>
+      </mat-card-content>
+    </mat-card>
+    <div class="flex w-full flex-col gap-3 2xl:flex-row">
+      <mat-card appearance="outlined" class="w-full">
+        <mat-card-header>
+          <mat-card-title>Task Summary Chart</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="p-3">
+          <f-task-status-pie-chart
+            [project]="project"
+            [grade]="project.targetGrade"
+          ></f-task-status-pie-chart>
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="w-full">
+        <mat-card-header>
+          <mat-card-title>Burndown Chart</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="p-3">
+          <div class="p-3 text-center">
+            {{ project.student.name }} has completed {{ taskStats.numberOfTasksCompleted }} tasks
+            and have {{ taskStats.numberOfTasksRemaining }} left to complete to achieve their target
+            of a
+            {{ grades[project.targetGrade] }}
+          </div>
+          <f-progress-burndown-chart
+            [project]="project"
+            [unit]="unit"
+            [grade]="project.targetGrade"
+          ></f-progress-burndown-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div> -->
+</div>
diff --git a/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.scss b/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.ts b/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.ts
new file mode 100644
index 0000000000..02e826996e
--- /dev/null
+++ b/src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.ts
@@ -0,0 +1,185 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+
+@Component({
+  selector: 'f-portfolios-project-progress',
+  templateUrl: './portfolios-project-progress.component.html',
+  styleUrl: './portfolios-project-progress.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfoliosProjectProgressComponent implements OnChanges {
+  @Input() project: Project;
+  @Input() unit: Unit;
+  @Input() taskSelectionUrlBase: unknown[] | null = null;
+  @Input() showSubmittedGrade?: boolean = false;
+
+  @Input()
+  public project$: BehaviorSubject<Project> = new BehaviorSubject(null);
+
+  public taskStats: {numberOfTasksCompleted: number; numberOfTasksRemaining: number} = {
+    numberOfTasksCompleted: 0,
+    numberOfTasksRemaining: 0,
+  };
+
+  constructor(
+    private elementRef: ElementRef<HTMLElement>,
+    private gradeService: GradeService,
+    private projectService: ProjectService,
+    private alertService: AlertService,
+    private taskService: TaskService,
+  ) {}
+
+  @HostListener('wheel', ['$event'])
+  public prioritisePageScroll(event: WheelEvent): void {
+    if (event.deltaY === 0 || !(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    const projectDashboard = event.target.closest('f-project-dashboard');
+    if (!projectDashboard || !this.elementRef.nativeElement.contains(projectDashboard)) {
+      return;
+    }
+
+    if (event.target.closest('f-unit-task-list')) {
+      return;
+    }
+
+    const innerScrollContainer = this.findInnerScrollContainer(event.target, projectDashboard);
+    if (
+      event.deltaY < 0 &&
+      innerScrollContainer &&
+      this.canScroll(innerScrollContainer, event.deltaY)
+    ) {
+      return;
+    }
+
+    const scrollContainer = this.findOuterScrollContainer(projectDashboard);
+    if (!scrollContainer || !this.canScroll(scrollContainer, event.deltaY)) {
+      return;
+    }
+
+    event.preventDefault();
+    scrollContainer.scrollBy({top: event.deltaY});
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.project && this.project) {
+      this.project$.next(this.project);
+    }
+  }
+
+  public get gradeValues() {
+    return this.gradeService.gradeValuesFor(this.unit);
+  }
+  public get grades() {
+    return Object.fromEntries(
+      this.unit.gradeDefinitions.map((definition) => [definition.value, definition.label]),
+    );
+  }
+
+  public gradeWord(grade) {
+    return this.gradeService.gradeLabel(grade, this.unit);
+  }
+
+  updateTaskCompletionStats() {
+    this.taskStats.numberOfTasksCompleted = this.project.tasksByStatus(
+      this.taskService.completeStatus,
+    ).length;
+    this.taskStats.numberOfTasksRemaining =
+      this.project.activeTasks().length - this.taskStats.numberOfTasksCompleted;
+  }
+
+  updateSubmittedGrade(newGrade: number): void {
+    const previousSubmittedGrade = this.project.submittedGrade;
+    this.project.submittedGrade = newGrade;
+
+    this.projectService.update(this.project).subscribe({
+      next: (project) => {
+        project.refreshBurndownChartData?.();
+        this.alertService.success(`Updated project's submitted grade`);
+        this.updateTaskCompletionStats();
+      },
+      error: (error) => {
+        this.project.submittedGrade = previousSubmittedGrade;
+        this.alertService.error(`Failed to update submitted grade: ${error}`);
+      },
+    });
+  }
+
+  updatedTargetGrade(newGrade: number): void {
+    const previousTargetGrade = this.project.targetGrade;
+    this.project.targetGrade = newGrade;
+
+    this.projectService.update(this.project).subscribe({
+      next: (project) => {
+        project.refreshBurndownChartData?.();
+        this.alertService.success(`Updated project's target grade`);
+        this.updateTaskCompletionStats();
+      },
+      error: (error) => {
+        this.project.targetGrade = previousTargetGrade;
+        this.alertService.error(`Failed to update target grade: ${error}`);
+      },
+    });
+  }
+
+  private findInnerScrollContainer(target: HTMLElement, root: Element): HTMLElement | null {
+    let element: HTMLElement | null = target;
+
+    while (element && element !== root) {
+      if (this.isScrollable(element)) {
+        return element;
+      }
+
+      element = element.parentElement;
+    }
+
+    return null;
+  }
+
+  private findOuterScrollContainer(projectDashboard: Element): HTMLElement {
+    let parent = projectDashboard.parentElement;
+
+    while (parent) {
+      if (this.isScrollable(parent)) {
+        return parent;
+      }
+
+      parent = parent.parentElement;
+    }
+
+    return document.scrollingElement as HTMLElement;
+  }
+
+  private isScrollable(element: HTMLElement): boolean {
+    if (element.scrollHeight <= element.clientHeight) {
+      return false;
+    }
+
+    const overflowY = getComputedStyle(element).overflowY;
+    return overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';
+  }
+
+  private canScroll(element: HTMLElement, deltaY: number): boolean {
+    if (deltaY > 0) {
+      return element.scrollTop + element.clientHeight < element.scrollHeight;
+    }
+
+    return element.scrollTop > 0;
+  }
+}
diff --git a/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.html b/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.html
new file mode 100644
index 0000000000..89963fcfef
--- /dev/null
+++ b/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.html
@@ -0,0 +1,3 @@
+<button class="pr-2.5" mat-button (click)="downloadStaffNotesCsv()">
+  <mat-icon inline>download</mat-icon> Download Staff Notes CSV
+</button>
diff --git a/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.scss b/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.ts b/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.ts
new file mode 100644
index 0000000000..6c102ef91c
--- /dev/null
+++ b/src/app/units/states/portfolios/download-staff-notes/download-staff-notes.component.ts
@@ -0,0 +1,26 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {Unit} from 'src/app/api/models/unit';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-download-staff-notes',
+  templateUrl: 'download-staff-notes.component.html',
+  styleUrl: 'download-staff-notes.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class DownloadStaffNotesComponent implements OnInit {
+  @Input() unit: Unit;
+
+  constructor(private alertService: AlertService) {}
+
+  public ngOnInit(): void {
+    if (!this.unit) {
+      return console.error(`Invalid unit`);
+    }
+  }
+
+  public downloadStaffNotesCsv() {
+    this.unit.downloadStaffNotesCsv();
+  }
+}
diff --git a/src/app/units/states/portfolios/portfolios.coffee b/src/app/units/states/portfolios/portfolios.coffee
deleted file mode 100644
index ebbc09ec9b..0000000000
--- a/src/app/units/states/portfolios/portfolios.coffee
+++ /dev/null
@@ -1,127 +0,0 @@
-angular.module('doubtfire.units.states.portfolios', [])
-#
-# State for staff viewing portfolios
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/students/portfolios', {
-    parent: 'units/index'
-    url: '/students/portfolios'
-    templateUrl: "units/states/portfolios/portfolios.tpl.html"
-    controller: "UnitPortfoliosStateCtrl"
-    data:
-      task: "Student Portfolios"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
-   }
-)
-.controller("UnitPortfoliosStateCtrl", ($scope, alertService, analyticsService, gradeService, newProjectService, Visualisation, newTaskService, fileDownloaderService, newUserService) ->
-  # TODO: (@alexcu) Break this down into smaller directives/substates
-
-  $scope.downloadGrades = -> fileDownloaderService.downloadFile($scope.unit.gradesUrl, "#{$scope.unit.code}-grades.csv")
-  $scope.downloadPortfolios = -> fileDownloaderService.downloadFile($scope.unit.portfoliosUrl, "#{$scope.unit.code}-portfolios.zip")
-
-  $scope.studentFilter = 'allStudents'
-  $scope.portfolioFilter = 'withPortfolio'
-
-  $scope.statusClass = newTaskService.statusClass
-  $scope.statusText = newTaskService.statusText
-
-  refreshCharts = Visualisation.refreshAll
-
-  #
-  # Sets the active tab
-  #
-  $scope.setActiveTab = (tab) ->
-    # Do nothing if we're switching to the same tab
-    return if tab is $scope.activeTab
-    $scope.activeTab?.active = false
-    $scope.activeTab = tab
-    $scope.activeTab.active = true
-
-    if $scope.activeTab == $scope.tabs.viewProgress
-      refreshCharts()
-
-  #
-  # Active task tab group
-  #
-  $scope.tabs =
-    selectStudent:
-      title: "Select Student"
-      subtitle: "Select the student to assess"
-      seq: 0
-    viewProgress:
-      title: "View Progress"
-      subtitle: "See the progress of the student"
-      seq: 1
-    viewPortfolio:
-      title: "View Portfolio"
-      subtitle: "See the portfolio of the student"
-      seq: 2
-    assessPortfolio:
-      title: "Assess Portfolio"
-      subtitle: "Enter a grade for the student"
-      seq: 3
-
-  $scope.setActiveTab($scope.tabs.selectStudent)
-
-  $scope.tutor = newUserService.currentUser
-
-  $scope.search = ""
-
-  # Pagination details
-  $scope.currentPage = 1
-  $scope.maxSize = 5
-  $scope.pageSize = 10
-
-  $scope.filterOptions = {selectedGrade: -1}
-  $scope.gradeValues = gradeService.gradeValues
-  $scope.grades = gradeService.grades
-  $scope.gradeAcronyms = gradeService.gradeAcronyms
-
-  $scope.selectedStudent = null
-
-  $scope.gradeResults = [
-    {
-      name: 'Fail',
-      scores: [ 0, 10, 20, 30, 40, 44 ]
-    }
-    {
-      name: 'Pass',
-      scores: [ 50, 53, 55, 57 ]
-    }
-    {
-      name: 'Credit',
-      scores: [ 60, 63, 65, 67 ]
-    }
-    {
-      name: 'Distinction',
-      scores: [ 70, 73, 75, 77 ]
-    }
-    {
-      name: 'High Distinction',
-      scores: [ 80, 83, 85, 87 ]
-    }
-    {
-      name: 'High Distinction',
-      scores: [ 90, 93, 95, 97, 100 ]
-    }
-  ]
-
-  $scope.editingRationale = false
-
-  $scope.toggleEditRationale = ->
-    $scope.editingRationale = !$scope.editingRationale
-
-
-  analyticsService.watchEvent $scope, 'studentFilter', 'Teacher View - Grading Tab'
-  analyticsService.watchEvent $scope, 'sortOrder', 'Teacher View - Grading Tab'
-  analyticsService.watchEvent $scope, 'currentPage', 'Teacher View - Grading Tab', 'Selected Page'
-
-  $scope.selectStudent = (student) ->
-    $scope.selectedStudent = student
-    $scope.project = null
-    newProjectService.loadProject(student, $scope.unit).subscribe({
-      next: (project) -> $scope.project = project
-      error: (message) -> alertService.error( message, 6000)
-    })
-)
diff --git a/src/app/units/states/portfolios/portfolios.component.html b/src/app/units/states/portfolios/portfolios.component.html
new file mode 100644
index 0000000000..40d45df3cb
--- /dev/null
+++ b/src/app/units/states/portfolios/portfolios.component.html
@@ -0,0 +1,65 @@
+<f-page-container>
+  @if (unit) {
+    <mat-tab-group
+      class="mx-auto mb-6 max-w-fit"
+      dynamicHeight
+      [selectedIndex]="currentIndex"
+      (selectedTabChange)="onTabChange($event)"
+    >
+      @for (tab of tabs; track tab.routeSegment) {
+        <mat-tab [disabled]="tab.requiresProject && !selectedProject" [label]="tab.label"></mat-tab>
+      }
+    </mat-tab-group>
+
+    <div class="min-h-0 flex-1">
+      @switch (currentTab.routeSegment) {
+        @case ('select') {
+          <f-portfolios-list
+            [filters]="portfolioListFilters"
+            [loading]="loadingStudents"
+            [unit]="unit"
+            (filtersChange)="portfolioListFiltersChange($event)"
+            (studentSelected)="studentSelected($event)"
+          ></f-portfolios-list>
+        }
+        @case ('progress') {
+          @if (selectedProject) {
+            <f-portfolios-project-progress
+              [project]="selectedProject"
+              [project$]="selectedProject$"
+              [showSubmittedGrade]="true"
+              [taskSelectionUrlBase]="progressTaskSelectionUrlBase"
+              [unit]="unit"
+            ></f-portfolios-project-progress>
+          }
+        }
+        @case ('student-notes') {
+          @if (selectedProject) {
+            <div class="h-[calc(100vh-250px)] p-3">
+              <h2>Student Notes for {{ selectedProject.student.name }}</h2>
+              <p>
+                Use these notes for private staff discussions about the student. Students cannot
+                view them.
+              </p>
+
+              <f-staff-notes class="h-full" [project]="selectedProject"></f-staff-notes>
+            </div>
+          }
+        }
+        @case ('portfolio') {
+          @if (selectedProject) {
+            <f-portfolios-portfolio-view [project]="selectedProject"></f-portfolios-portfolio-view>
+          }
+        }
+        @case ('assessment') {
+          @if (selectedProject) {
+            <f-portfolios-assessment
+              [project]="selectedProject"
+              [unit]="unit"
+            ></f-portfolios-assessment>
+          }
+        }
+      }
+    </div>
+  }
+</f-page-container>
diff --git a/src/app/units/states/portfolios/portfolios.component.scss b/src/app/units/states/portfolios/portfolios.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/portfolios/portfolios.component.ts b/src/app/units/states/portfolios/portfolios.component.ts
new file mode 100644
index 0000000000..62e93f6ef5
--- /dev/null
+++ b/src/app/units/states/portfolios/portfolios.component.ts
@@ -0,0 +1,314 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {ActivatedRoute, ParamMap, Router} from '@angular/router';
+import {BehaviorSubject, Observable, Subscription, distinctUntilChanged, of} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {
+  DEFAULT_PORTFOLIO_LIST_FILTERS,
+  PortfolioListFilters,
+} from './directives/portfolios-list/portfolios-list.component';
+
+type PortfolioTabKey = 'select' | 'progress' | 'student-notes' | 'portfolio' | 'assessment';
+
+interface PortfolioTab {
+  label: string;
+  routeSegment: PortfolioTabKey;
+  requiresProject: boolean;
+}
+
+@Component({
+  selector: 'f-portfolios',
+  templateUrl: './portfolios.component.html',
+  styleUrl: './portfolios.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class PortfoliosComponent implements OnInit, OnDestroy {
+  @Input() unit$: Observable<Unit>;
+
+  public readonly tabs: PortfolioTab[] = [
+    {label: 'Select Student', routeSegment: 'select', requiresProject: false},
+    {label: 'View Progress', routeSegment: 'progress', requiresProject: true},
+    {label: 'View Student Notes', routeSegment: 'student-notes', requiresProject: true},
+    {label: 'View Portfolio', routeSegment: 'portfolio', requiresProject: true},
+    {label: 'Assess Portfolio', routeSegment: 'assessment', requiresProject: true},
+  ];
+
+  public unit: Unit = null;
+  public selectedProject: Project | null = null;
+  public selectedProject$: BehaviorSubject<Project | null> = new BehaviorSubject(null);
+  public loadingStudents = true;
+  public currentTab: PortfolioTab = this.tabs[0];
+  public portfolioListFilters: PortfolioListFilters = {...DEFAULT_PORTFOLIO_LIST_FILTERS};
+
+  private subscriptions: Subscription[] = [];
+  private selectedProjectId: number | null = null;
+  private progressTaskSelectionUrlBaseCache: unknown[] | null = null;
+  private progressTaskSelectionUrlBaseKey: string | null = null;
+  private routeParamsSubscribed = false;
+
+  constructor(
+    private projectService: ProjectService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private alertService: AlertService,
+    private userService: UserService,
+  ) {}
+
+  public ngOnInit(): void {
+    this.unit$ = this.unit$ ?? of(this.route.parent.snapshot.data.unit);
+    this.subscriptions.push(
+      this.unit$.pipe(distinctUntilChanged((a, b) => a?.id === b?.id)).subscribe({
+        next: (unit) => {
+          const unitChanged = this.unit != null && this.unit.id !== unit.id;
+          this.unit = unit;
+
+          if (unitChanged) {
+            this.resetStudentSelection();
+          }
+
+          if (
+            this.userService.currentUser.systemRole === 'Admin' ||
+            this.userService.currentUser.systemRole === 'Convenor'
+          ) {
+            this.unit.loadD2lMapping().subscribe();
+          }
+
+          this.loadingStudents = true;
+          this.loadStudents();
+          this.subscribeToRouteParams();
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to load unit: ${error}`, 6000);
+          this.router.navigateByUrl('/home');
+        },
+      }),
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  public get currentIndex(): number {
+    const index = this.tabs.findIndex((tab) => tab.routeSegment === this.currentTab.routeSegment);
+    return index >= 0 ? index : 0;
+  }
+
+  public get progressTaskSelectionUrlBase(): unknown[] | null {
+    if (!this.unit || !this.selectedProject) {
+      return null;
+    }
+
+    // Cache the array so the binding keeps the same reference between change detection passes.
+    // A new literal each call makes the input dirty every check, which pushes the progress tab
+    // to re-emit its project over and over.
+    const key = `${this.unit.id}/${this.selectedProject.id}`;
+    if (key !== this.progressTaskSelectionUrlBaseKey) {
+      this.progressTaskSelectionUrlBaseKey = key;
+      this.progressTaskSelectionUrlBaseCache = [
+        '/units',
+        this.unit.id,
+        'students',
+        'portfolios',
+        this.selectedProject.id,
+        'progress',
+      ];
+    }
+
+    return this.progressTaskSelectionUrlBaseCache;
+  }
+
+  public studentSelected(project: Project): void {
+    this.navigateToProject(project.id, 'progress');
+  }
+
+  public portfolioListFiltersChange(filters: PortfolioListFilters): void {
+    this.portfolioListFilters = {...filters};
+
+    if (this.currentTab.routeSegment === 'select') {
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: this.portfolioListFilterQueryParams(),
+        replaceUrl: true,
+      });
+    }
+  }
+
+  public onTabChange(event: MatTabChangeEvent): void {
+    const nextTab = this.tabs[event.index] ?? this.tabs[0];
+    this.currentTab = nextTab;
+
+    if (nextTab.routeSegment === 'select' || !this.selectedProject) {
+      this.router.navigate(['/units', this.unit.id, 'students', 'portfolios'], {
+        queryParams: this.portfolioListFilterQueryParams(),
+        replaceUrl: true,
+      });
+      return;
+    }
+
+    this.navigateToProject(this.selectedProject.id, nextTab.routeSegment);
+  }
+
+  // The selected student belongs to the unit we just left, so drop it and go back to
+  // the student list rather than showing someone who is not enrolled in the new unit.
+  private resetStudentSelection(): void {
+    const hadSelection = this.selectedProjectId != null;
+
+    this.selectedProjectId = null;
+    this.selectedProject = null;
+    this.selectedProject$.next(null);
+    this.currentTab = this.tabs[0];
+
+    if (hadSelection) {
+      this.router.navigate(['/units', this.unit.id, 'students', 'portfolios'], {
+        queryParams: this.portfolioListFilterQueryParams(),
+        replaceUrl: true,
+      });
+    }
+  }
+
+  // The unit stream fires again on every unit change, so this has to be idempotent or
+  // a switch would stack a second pair of route subscriptions on top of the first.
+  private subscribeToRouteParams(): void {
+    if (this.routeParamsSubscribed) {
+      return;
+    }
+
+    this.routeParamsSubscribed = true;
+    this.subscriptions.push(
+      this.route.paramMap.subscribe((params) => {
+        this.updateCurrentTabFromState(params.get('tab'), params.get('projectId'));
+      }),
+      this.route.queryParamMap.subscribe((params) => {
+        this.updatePortfolioListFiltersFromQueryParams(params);
+      }),
+    );
+  }
+
+  private loadStudents(): void {
+    this.projectService.loadStudents(this.unit, false).subscribe({
+      next: () => {
+        this.loadingStudents = false;
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to load unit: ${error}`, 6000);
+        this.router.navigateByUrl('/home');
+      },
+    });
+  }
+
+  private updatePortfolioListFiltersFromQueryParams(params: ParamMap): void {
+    const filters: PortfolioListFilters = {
+      portfolioFilter: params.get('portfolio') === 'all' ? 'all' : 'submitted_only',
+      tutorialFilter: params.get('tutorial') === 'mine' ? 'mine' : 'all',
+      gradeFilter: this.gradeFilterFromQueryParam(params.get('grade')),
+      filterText: params.get('search') ?? '',
+    };
+
+    if (!this.portfolioListFiltersEqual(filters, this.portfolioListFilters)) {
+      this.portfolioListFilters = filters;
+    }
+  }
+
+  private gradeFilterFromQueryParam(grade: string | null): number | null {
+    if (grade === null) {
+      return null;
+    }
+
+    const gradeValue = Number(grade);
+    return Number.isFinite(gradeValue) ? gradeValue : null;
+  }
+
+  private portfolioListFilterQueryParams(): Record<string, string | number | null> {
+    return {
+      portfolio:
+        this.portfolioListFilters.portfolioFilter === DEFAULT_PORTFOLIO_LIST_FILTERS.portfolioFilter
+          ? null
+          : this.portfolioListFilters.portfolioFilter,
+      tutorial:
+        this.portfolioListFilters.tutorialFilter === DEFAULT_PORTFOLIO_LIST_FILTERS.tutorialFilter
+          ? null
+          : this.portfolioListFilters.tutorialFilter,
+      grade: this.portfolioListFilters.gradeFilter,
+      search: this.portfolioListFilters.filterText.trim() || null,
+    };
+  }
+
+  private portfolioListFiltersEqual(a: PortfolioListFilters, b: PortfolioListFilters): boolean {
+    return (
+      a.portfolioFilter === b.portfolioFilter &&
+      a.tutorialFilter === b.tutorialFilter &&
+      a.gradeFilter === b.gradeFilter &&
+      a.filterText === b.filterText
+    );
+  }
+
+  private updateCurrentTabFromState(
+    tabParam?: string | null,
+    projectIdParam?: string | null,
+  ): void {
+    const projectId = projectIdParam ? Number(projectIdParam) : null;
+    const requestedTab = this.tabFromRoute(tabParam, !!projectId);
+
+    this.currentTab = requestedTab;
+
+    if (!projectId) {
+      this.selectedProjectId = null;
+      this.selectedProject = null;
+      this.selectedProject$.next(null);
+      return;
+    }
+
+    if (this.selectedProject?.id === projectId) {
+      return;
+    }
+
+    this.loadProject(projectId);
+  }
+
+  private tabFromRoute(tabParam: string | null, hasProject: boolean): PortfolioTab {
+    if (!hasProject) {
+      return this.tabs[0];
+    }
+
+    const routeTab = this.tabs.find(
+      (tab) => tab.routeSegment === tabParam && tab.routeSegment !== 'select',
+    );
+
+    return routeTab ?? this.tabs.find((tab) => tab.routeSegment === 'progress') ?? this.tabs[0];
+  }
+
+  private loadProject(projectId: number): void {
+    this.selectedProjectId = projectId;
+
+    this.projectService.loadProject(projectId, this.unit).subscribe({
+      next: (project) => {
+        if (this.selectedProjectId !== project.id) {
+          return;
+        }
+
+        this.selectedProject = project;
+        this.selectedProject$.next(project);
+      },
+      error: (error) => {
+        this.selectedProjectId = null;
+        this.selectedProject = null;
+        this.selectedProject$.next(null);
+        this.alertService.error(`Failed to load project: ${error}`, 6000);
+        console.error(error);
+      },
+    });
+  }
+
+  private navigateToProject(projectId: number, tab: PortfolioTabKey): void {
+    this.router.navigate(['/units', this.unit.id, 'students', 'portfolios', projectId, tab], {
+      queryParams: this.portfolioListFilterQueryParams(),
+      replaceUrl: true,
+    });
+  }
+}
diff --git a/src/app/units/states/portfolios/portfolios.scss b/src/app/units/states/portfolios/portfolios.scss
deleted file mode 100644
index 704ea095ff..0000000000
--- a/src/app/units/states/portfolios/portfolios.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.unit-student-portfolio-list {
-  .select-portfolio-grade.btn-group {
-    @media (min-width: $screen-sm-max) {
-      margin: auto 1.2ex;
-    }
-    label.btn {
-      padding: 4px 7px;
-      font-size: 0.9em;
-      height: 34px;
-    }
-  }
-}
diff --git a/src/app/units/states/portfolios/portfolios.tpl.html b/src/app/units/states/portfolios/portfolios.tpl.html
deleted file mode 100644
index 51f09b077c..0000000000
--- a/src/app/units/states/portfolios/portfolios.tpl.html
+++ /dev/null
@@ -1,274 +0,0 @@
-<div id="student-portfolios" class="container">
-  <tabset>
-    <tab
-      ng-repeat="tab in tabs | toArray | orderBy: 'seq'"
-      active="tab.active"
-      disable="!selectedStudent"
-      ng-click="selectedStudent && setActiveTab(tab)"
-    >
-      <tab-heading>{{tab.title}}</tab-heading>
-    </tab>
-  </tabset>
-  <!--/tabs-->
-  <div class="panel panel-primary" ng-show="activeTab == tabs.selectStudent">
-    <div class="panel-heading clearfix">
-      <div class="pull-left">
-        <h4 class="panel-title">Mark Portfolios</h4>
-        Assess student portfolios
-      </div>
-      <div class="pull-right toolbar">
-        <div class="buttons">
-          <div class="btn-group">
-            <label class="btn btn-default" ng-model="portfolioFilter" btn-radio="'allStudents'">
-              <i
-                class="fa fa-globe"
-                tooltip-placement="top"
-                tooltip="Show all students, even those without portfolios"
-              ></i>
-            </label>
-            <label class="btn btn-default" ng-model="portfolioFilter" btn-radio="'withPortfolio'">
-              <i class="fa fa-book" tooltip-placement="top" tooltip="Show only students with portfolios"></i>
-            </label>
-          </div>
-          <div class="btn-group">
-            <label class="btn btn-default" ng-model="studentFilter" btn-radio="'allStudents'">
-              <i class="fa fa-university" tooltip-placement="top" tooltip="Show all students"></i>
-            </label>
-            <label class="btn btn-default" ng-model="studentFilter" btn-radio="'myStudents'">
-              <i class="fa fa-pencil" tooltip-placement="top" tooltip="Show only my students"></i>
-            </label>
-          </div>
-          <div class="btn-group btn-group-sm select-portfolio-grade">
-            <label class="btn btn-default text-center" ng-model="filterOptions.selectedGrade" btn-radio="-1">
-              <span
-                class="grade-icon"
-                tooltip="Show all portfolios"
-                class="text-{{$index == filterOptions.selectedGrade ? 'primary' : 'muted'}}"
-                >All</span
-              >
-            </label>
-          </div>
-          <div class="btn-group btn-group-sm select-portfolio-grade">
-            <label
-              ng-repeat="grade in gradeValues"
-              ng-if="$index != 4"
-              class="btn btn-default col-sm-3 text-center"
-              ng-model="filterOptions.selectedGrade"
-              btn-radio="{{$index}}"
-            >
-              <grade-icon
-                grade="grade"
-                tooltip="Select to show student's aiming for {{grades[grade]}}"
-                tooltip-append-to-body="true"
-                class="text-{{$index == filterOptions.selectedGrade ? 'primary' : 'muted'}}"
-              ></grade-icon>
-            </label>
-          </div>
-        </div>
-        <!--/buttons-->
-        <form role="search" class="form-horizontal">
-          <input
-            id="searchbar"
-            class="input-md form-control"
-            placeholder="Search..."
-            type="search"
-            ng-model="search"
-            autocomplete="off"
-            typeahead="text for text in unit.studentFilterTypeAheadData | filter:$viewValue | limitTo:8"
-            typeahead-wait-ms="200"
-            autofocus
-          />
-          <p ng-show="filteredStudents.length < allStudents.length && filteredStudents.length != 0">
-            Showing {{filteredStudents.length}} of {{unit.students.length}} students enrolled.
-          </p>
-        </form>
-        <!--/search-->
-      </div>
-      <!--/toolbar-->
-    </div>
-    <!--header-->
-    <div class="panel-body unit-student-list">
-      <div class="panel-body large-notice-block" ng-hide="filteredStudents.length > 0">
-        <i class="fa fa-book"></i>
-        <p>No portfolios found</p>
-      </div>
-      <table ng-hide="filteredStudents.length == 0" class="table table-condensed table-hover table-pointer">
-        <thead>
-          <tr>
-            <th class="student-id">
-              <a ng-click="sortOrder='student.studentId'; reverse=!reverse">
-                Student <i ng-show="sortOrder=='student.studentId'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th class="name">
-              <a ng-click="sortOrder='name'; reverse=!reverse">
-                Name <i ng-show="sortOrder=='name'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th>
-              <a ng-click="sortOrder='tutorial.tutorName'; reverse=!reverse">
-                Tutor <i ng-show="sortOrder=='tutorial.tutorName'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th class="tutorial">
-              <a ng-click="sortOrder='tutorial.abbreviation'; reverse=!reverse">
-                Tutorial
-                <i ng-show="sortOrder=='tutorial.abbreviation'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th>
-              <a ng-click="sortOrder='targetGrade'; reverse=!reverse">
-                Target <i ng-show="sortOrder=='targetGrade'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th>
-              <a ng-click="sortOrder='submittedGrade'; reverse=!reverse">
-                Submitted as
-                <i ng-show="sortOrder=='submittedGrade'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th>
-              <a ng-click="sortOrder='orderScale'; reverse=!reverse">
-                Stats<i ng-show="sortOrder=='orderScale'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th class="has-portfolio" ng-show="portfolioFilter == 'allStudents'">
-              <a ng-click="sortOrder='hasPortfolio'; reverse=!reverse">
-                Portfolio? <i ng-show="sortOrder=='hasPortfolio'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-            <th class="grade">
-              <a ng-click="sortOrder='grade'; reverse=!reverse">
-                Grade <i ng-show="sortOrder=='grade'" class="fa fa-caret-{{reverse ? 'down' : 'up'}}"></i>
-              </a>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            class="task-progress-row"
-            ng-repeat="student in filteredStudents = (allStudents = (unit.students | showStudents:studentFilter:tutor | studentsWithPortfolio:portfolioFilter | studentsWithSubmittedGrade:filterOptions.selectedGrade) | projectFilter:search) | orderBy:sortOrder:reverse | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize"
-            ng-class="{'info': selectedStudent == student}"
-            ng-click="selectStudent(student)"
-          >
-            <td>{{student.student.studentId || student.student.username}}</td>
-            <td>{{student.student.name}}</td>
-            <td>{{student.tutorNames()}}</td>
-            <td>{{student.shortTutorialDescription()}}</td>
-            <td class="flags-data">
-              <grade-icon grade="student.targetGrade"></grade-icon>
-            </td>
-            <td class="flags-data">
-              <grade-icon grade="student.submittedGrade"></grade-icon>
-            </td>
-            <td class="task-progress-bar">
-              <progress class="task-progress" animate="true">
-                <bar
-                  ng-repeat="bar in student.taskStats | filter:barLargerZero track by $index"
-                  value="bar.value"
-                  type="{{statusClass(bar.key)}}"
-                >
-                  <span ng-hide="bar.value < 10">{{bar.value}}%</span>
-                </bar>
-              </progress>
-            </td>
-            <td ng-show="portfolioFilter == 'allStudents'">{{student.hasPortfolio ? "Yes" : "No"}}</td>
-            <td>{{student.grade}}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="panel-footer clearfix">
-      <pagination
-        total-items="filteredStudents.length"
-        ng-model="currentPage"
-        items-per-page="pageSize"
-        max-size="maxSize"
-        class="pagination-sm pull-left"
-        boundary-links="true"
-        rotate="false"
-      ></pagination>
-      <div class="pull-right">
-        <!-- <button
-          class="btn btn-info"
-          ng-click="downloadPortfolios()"
-          tooltip-html-unsafe="<i class='fa fa-warning'></i> <strong>WARNING:</strong> Downloading all portfolios may take a long time"
-          tooltip-append-to-body="true"
-        >
-          <i class="fa fa-download"></i> Download All Portfolios
-        </button> -->
-        <button ng-click="downloadGrades()"><i class="fa fa-download"></i> Download Grades</button>
-      </div>
-    </div>
-  </div>
-  <div class="panel panel-primary" ng-show="activeTab != tabs.selectStudent && !selectedStudent">
-    <div class="panel-heading clearfix">
-      <div class="pull-left">
-        <h4 class="panel-title" ng-hide="selectedStudent">Portfolio Details</h4>
-        Review portfolio and assign grade.
-      </div>
-    </div>
-    <div class="panel-body large-notice-block" ng-hide="selectedStudent">
-      <i class="fa fa-book"></i>
-      <p>Select student to view portfolio and assign grade</p>
-    </div>
-  </div>
-  <div ng-if="selectedStudent">
-    <div class="panel panel-primary" ng-show="activeTab == tabs.viewProgress">
-      <div class="panel-heading clearfix">
-        <div class="pull-left">
-          <h3 class="panel-title">Review Progress of {{selectedStudent.student.name}}</h3>
-          Review the students progress through the unit's tasks.
-        </div>
-      </div>
-      <div class="panel-body">
-        <project-progress-dashboard ng-if="project"></project-progress-dashboard>
-      </div>
-    </div>
-
-    <div class="panel panel-primary" ng-show="activeTab == tabs.viewPortfolio">
-      <div class="panel-heading clearfix">
-        <div class="pull-left">
-          <h3 class="panel-title">Review Portfolio of {{selectedStudent.student.name}}</h3>
-          View or download portfolio for assessment.
-        </div>
-      </div>
-      <div class="panel-body large-notice-block" ng-hide="project.portfolioAvailable">
-        <i class="fa fa-book"></i>
-        <p>No Portfolio Submitted</p>
-      </div>
-      <pdf-viewer-panel ng-if="activeTab == tabs.viewPortfolio && project.portfolioAvailable" [pdf-url]="project.portfolioUrl()"></pdf-viewer-panel>
-    </div>
-
-    <div class="panel panel-primary" ng-show="activeTab == tabs.assessPortfolio">
-      <div class="panel-heading clearfix">
-        <div class="pull-left">
-          <h4 class="panel-title">Grade for {{selectedStudent.student.name}}</h4>
-          Assign Grade for this work.
-        </div>
-      </div>
-      <div class="panel-body alignment-rater">
-        <div class="col-sm-12 rationale-wrapper">
-          <textarea id="gradeRationale" style="height: 160px" class="form-control" ng-model="project.gradeRationale"></textarea>
-        </div>
-
-        <div ng-repeat="results in gradeResults">
-          <h5 class="col-sm-2">{{results.name}}</h5>
-          <p class="btn-group col-sm-10">
-            <label
-              ng-repeat="resultScore in results.scores"
-              ng-click="project.assignGrade(resultScore, project.gradeRationale)"
-              ng-disabled="!project.gradeRationale"
-              class="btn col-sm-2 text-center {{project.grade == resultScore ? 'btn-primary' : 'btn-default'}}"
-            >
-              {{resultScore}}
-            </label>
-          </p>
-        </div>
-        <div>
-          <button class="btn btn-primary pull-right col-md-3" ng-click="project.assignGrade(project.grade, project.gradeRationale)" ng-disabled="!project.gradeRationale">Save</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/units/states/portfolios/upload-grades/upload-grades.component.html b/src/app/units/states/portfolios/upload-grades/upload-grades.component.html
new file mode 100644
index 0000000000..f42a9a62a0
--- /dev/null
+++ b/src/app/units/states/portfolios/upload-grades/upload-grades.component.html
@@ -0,0 +1,3 @@
+<button class="pr-2.5" mat-button (click)="uploadGradesCSV()">
+  <mat-icon inline>upload</mat-icon> Upload Grades CSV
+</button>
diff --git a/src/app/units/states/portfolios/upload-grades/upload-grades.component.scss b/src/app/units/states/portfolios/upload-grades/upload-grades.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/portfolios/upload-grades/upload-grades.component.ts b/src/app/units/states/portfolios/upload-grades/upload-grades.component.ts
new file mode 100644
index 0000000000..fe302d5415
--- /dev/null
+++ b/src/app/units/states/portfolios/upload-grades/upload-grades.component.ts
@@ -0,0 +1,58 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {Unit} from 'src/app/api/models/unit';
+import {CsvResultModalService} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalService} from 'src/app/common/modals/csv-upload-modal/csv-upload-modal.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-upload-grades',
+  templateUrl: 'upload-grades.component.html',
+  styleUrl: 'upload-grades.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UploadGradesComponent implements OnInit {
+  @Input() unit: Unit;
+
+  constructor(
+    private sidekiqModalService: SidekiqProgressModalService,
+    private csvUploadModal: CsvUploadModalService,
+    private csvResultModal: CsvResultModalService,
+    private alertService: AlertService,
+  ) {}
+
+  public ngOnInit(): void {
+    if (!this.unit) {
+      return console.error(`Invalid unit`);
+    }
+  }
+
+  public uploadGradesCSV() {
+    this.csvUploadModal.show(
+      'Upload Student Grades as CSV',
+      'Import student grades',
+      {
+        file: {name: 'Feedback Templates CSV Data', type: 'csv'},
+      },
+      this.unit.gradesCSVUploadUrl,
+      (response: SidekiqJob) => {
+        if (!response) {
+          this.alertService.error('Failed to import grades', 6000);
+          return;
+        }
+
+        this.sidekiqModalService.show('Import student grades', response.id).subscribe({
+          next: (job) => {
+            this.csvResultModal.show('Student grade import results', JSON.parse(job.result));
+          },
+          error: (error) => {
+            console.error(error);
+            this.alertService.error('Failed to import grades', 6000);
+          },
+        });
+      },
+    );
+  }
+}
diff --git a/src/app/units/states/rollover/directives/directives.coffee b/src/app/units/states/rollover/directives/directives.coffee
deleted file mode 100644
index 4f892f1291..0000000000
--- a/src/app/units/states/rollover/directives/directives.coffee
+++ /dev/null
@@ -1,3 +0,0 @@
-angular.module('doubtfire.units.states.rollover.directives', [
-  'doubtfire.units.states.rollover.directives.unit-dates-selector'
-])
\ No newline at end of file
diff --git a/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.coffee b/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.coffee
deleted file mode 100644
index 07569a20a0..0000000000
--- a/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.coffee
+++ /dev/null
@@ -1,79 +0,0 @@
-angular.module('doubtfire.units.states.rollover.directives.unit-dates-selector', [])
-
-#
-# Editor for the basic details of a unit, such as the name, code
-# start and end dates etc.
-#
-.directive('unitDatesSelector', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'units/states/rollover/directives/unit-dates-selector/unit-dates-selector.tpl.html'
-  controller: ($scope, $state, $rootScope, DoubtfireConstants, alertService, newTeachingPeriodService) ->
-    $scope.calOptions = {
-      startOpened: false
-      endOpened: false
-    }
-
-    # Get the configurable, external name of Doubtfire
-    $scope.externalName = DoubtfireConstants.ExternalName
-
-    $scope.saveData = {
-      id: $scope.unit.id,
-      toPeriod: null,
-      startDate: null,
-      endDate: null
-    }
-
-    # get the teaching periods- gets an object with the loaded teaching periods
-    newTeachingPeriodService.cache.values.subscribe(
-      (periods) ->
-        $scope.teachingPeriodValues = [{value: undefined, text: "None"}]
-        other = periods.filter((tp) -> tp.endDate > Date.now()).map((p) -> {value: p, text: "#{p.year} #{p.period}"})
-        _.each other, (d) -> $scope.teachingPeriodValues.push(d)
-
-        if (periods.length > 0)
-          $scope.saveData.toPeriod = periods[periods.length - 1]
-    )
-
-    $scope.teachingPeriodSelected = ($event) ->
-      $scope.saveData.toPeriod = $event
-
-    # Datepicker opener
-    $scope.open = ($event, pickerData) ->
-      $event.preventDefault()
-      $event.stopPropagation()
-
-      if pickerData == 'start'
-        $scope.calOptions.startOpened = ! $scope.calOptions.startOpened
-        $scope.calOptions.endOpened = false
-      else
-        $scope.calOptions.startOpened = false
-        $scope.calOptions.endOpened = ! $scope.calOptions.endOpened
-
-    $scope.dateOptions = {
-      formatYear: 'yy',
-      startingDay: 1
-    }
-
-    $scope.saveUnit = ->
-      if $scope.saveData.toPeriod
-        body = {
-          teaching_period_id: $scope.saveData.toPeriod.id
-        }
-      else
-        body = {
-          start_date: $scope.saveData.startDate
-          end_date: $scope.saeData.endDate
-        }
-      $scope.unit.rolloverTo(body).subscribe({
-        next: (response) ->
-          alertService.success( "Unit created.", 2000)
-          $state.go("units/admin", {unitId: response.id})
-        error: (response) ->
-          alertService.error "Error creating unit - #{response}"
-
-      })
-
-
-
-)
diff --git a/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.tpl.html b/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.tpl.html
deleted file mode 100644
index 08d6a1a87d..0000000000
--- a/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.tpl.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<div class="unit-dates-selector">
-  <div class="panel panel-primary">
-    <div class="panel-heading">
-      <h3 class="panel-title">Create Unit</h3>
-      Duplicate an existing unit by specifying the time period.
-    </div>
-    <form class="form-horizontal" role="form" name="rolloverUnitForm" ng-submit="saveUnit()">
-      <div class="panel-body">
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="teachingperiod">Teaching Period</label>
-          <div class="col-sm-9">
-            <object-select [source]="teachingPeriodValues" [target]="saveData.toPeriod" (target-change)="teachingPeriodSelected($event)" label="Select Teaching Period"  />
-          </div>
-        </div><!--/teaching-period-date-->
-
-        <div class="form-group">
-          <label tooltip="Date for the start of teaching in the unit." class="col-sm-2 control-label" for="startdate">Start Date</label>
-          <div class="col-sm-9">
-            <div class="col-sm-4 input-group">
-              <input datepicker-popup="yyyy-MM-dd" is-open="calOptions.startOpened" type="text" class="form-control" id="startdate" ng-model="saveData.startDate" ng-required="true" placeholder="yyyy-MM-dd" close-text="Close" ng-if="!saveData.toPeriod" />
-              <input
-                type="text"
-                class="form-control"
-                id="startdate"
-                value="{{saveData.toPeriod.startDate | date}}"
-                ng-disabled="true"
-                ng-if="saveData.toPeriod"
-              />
-              <span class="input-group-btn">
-                <button class="btn btn-default" type="button" ng-click="open($event,'start')" ng-disabled="saveData.toPeriod">
-                  <i class="fa fa-calendar"></i>
-                </button>
-              </span>
-            </div>
-          </div>
-        </div><!--/start-date-->
-
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="enddate">End Date</label>
-          <div class="col-sm-9">
-            <div class="col-sm-4 input-group">
-              <input datepicker-popup="{{format}}" id="enddate" type="text" class="form-control" ng-model="unit.endDate" is-open="calOptions.endOpened" ng-required="true" close-text="Close" ng-if="!saveData.toPeriod" />
-              <input
-                type="text"
-                class="form-control"
-                id="startdate"
-                value="{{saveData.toPeriod.endDate | date}}"
-                ng-disabled="true"
-                ng-if="saveData.toPeriod"
-              />
-              <span class="input-group-btn">
-                <button class="btn btn-default" type="button" ng-click="open($event,'end')" ng-disabled="saveData.toPeriod">
-                  <i class="fa fa-calendar"></i>
-                </button>
-              </span>
-            </div>
-          </div>
-        </div><!--/end-date-->
-      </div>
-      <div class="panel-footer text-right">
-        <input type="submit" value="Create Unit" class="btn btn-success" />
-      </div>
-    </form>
-  </div>
-</div>
diff --git a/src/app/units/states/rollover/rollover.coffee b/src/app/units/states/rollover/rollover.coffee
deleted file mode 100644
index 0bbeff1152..0000000000
--- a/src/app/units/states/rollover/rollover.coffee
+++ /dev/null
@@ -1,40 +0,0 @@
-angular.module('doubtfire.units.states.rollover', [
-  'doubtfire.units.states.rollover.directives'
-])
-
-.config(($stateProvider) ->
-  $stateProvider.state 'units/rollover', {
-    parent: 'units/index'
-    url: '/rollover'
-    controller: 'RolloverUnitState'
-    templateUrl: 'units/states/rollover/rollover.tpl.html'
-    data:
-      task: 'Unit Rollover'
-      pageTitle: "_Unit Rollover_"
-      roleWhitelist: ['Convenor', 'Admin']
-   }
-)
-.controller("RolloverUnitState", ($scope, $state, $stateParams, newUserService, alertService, newUnitService, GlobalStateService) ->
-  unitId = +$stateParams.unitId
-  return $state.go('home') unless unitId
-
-  GlobalStateService.onLoad () ->
-    # Load assessing unit role
-    $scope.unitRole = GlobalStateService.loadedUnitRoles.currentValues.find((unitRole) -> unitRole.unit.id == unitId)
-
-    if (! $scope.unitRole?) && ( newUserService.currentUser.role == "Admin" )
-      $scope.unitRole = newUserService.adminRoleFor(unitId, newUserService.currentUser)
-
-    # Go home if no unit role was found
-    return $state.go('home') unless $scope.unitRole?
-
-    GlobalStateService.setView("UNIT", $scope.unitRole)
-
-    newUnitService.get(unitId).subscribe({
-      next: (unit)-> $scope.unit = unit
-      error: (err)->
-        alertService.error( "Error loading unit: " + err, 8000)
-        setTimeout((()-> $state.go('home')), 5000)
-    })
-
-)
diff --git a/src/app/units/states/rollover/rollover.component.html b/src/app/units/states/rollover/rollover.component.html
new file mode 100644
index 0000000000..57aa93020c
--- /dev/null
+++ b/src/app/units/states/rollover/rollover.component.html
@@ -0,0 +1,67 @@
+<f-page-container>
+  <mat-card appearance="outlined" class="mx-auto max-w-7xl">
+    <mat-card-header>
+      <mat-card-title>Copy {{ unit?.code }} {{ unit?.nameAndPeriod }}</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content class="py-3">
+      <p>
+        Duplicate this unit by copying it to the indicated teaching period, or a custom start and
+        end date.
+      </p>
+
+      <div class="py-3">
+        <mat-form-field appearance="outline">
+          <mat-label>Teaching Period</mat-label>
+          <mat-select [(ngModel)]="teachingPeriod">
+            <mat-option [value]="false">Custom Date</mat-option>
+            @for (period of teachingPeriods; track period) {
+              <mat-option [value]="period">{{ period.year }} {{ period.period }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <div class="flex gap-1">
+          @if (!teachingPeriod) {
+            <mat-form-field appearance="outline" class="w-full">
+              <mat-label>Start Date</mat-label>
+              <input matInput [matDatepicker]="startdatepicker" [(ngModel)]="newStartDate" />
+              <mat-hint>DD/MM/YYYY</mat-hint>
+              <mat-datepicker-toggle matIconSuffix [for]="startdatepicker"></mat-datepicker-toggle>
+              <mat-datepicker #startdatepicker></mat-datepicker>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="w-full">
+              <mat-label>End Date</mat-label>
+              <input matInput [matDatepicker]="enddatepicker" [(ngModel)]="newEndDate" />
+              <mat-hint>DD/MM/YYYY</mat-hint>
+              <mat-datepicker-toggle matIconSuffix [for]="enddatepicker"></mat-datepicker-toggle>
+              <mat-datepicker #enddatepicker></mat-datepicker>
+            </mat-form-field>
+          } @else {
+            <mat-form-field appearance="outline" class="w-full" disabled>
+              <mat-label>{{ teachingPeriod.name }} Start Date</mat-label>
+              <input
+                disabled
+                matInput
+                readonly
+                [value]="$safeNavigationMigration(teachingPeriod?.startDate) | date"
+              />
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="w-full" disabled>
+              <mat-label>{{ teachingPeriod.name }} End Date</mat-label>
+              <input
+                disabled
+                matInput
+                readonly
+                [value]="$safeNavigationMigration(teachingPeriod?.endDate) | date"
+              />
+            </mat-form-field>
+          }
+        </div>
+      </div>
+      <mat-card-footer class="flex justify-end">
+        <button color="primary" mat-raised-button (click)="createUnit()">Create Unit</button>
+      </mat-card-footer>
+    </mat-card-content>
+  </mat-card>
+</f-page-container>
diff --git a/src/app/units/states/rollover/rollover.component.scss b/src/app/units/states/rollover/rollover.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/rollover/rollover.component.ts b/src/app/units/states/rollover/rollover.component.ts
new file mode 100644
index 0000000000..a9c255c5bd
--- /dev/null
+++ b/src/app/units/states/rollover/rollover.component.ts
@@ -0,0 +1,86 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {TeachingPeriod} from 'src/app/api/models/teaching-period';
+import {Unit} from 'src/app/api/models/unit';
+import {TeachingPeriodService} from 'src/app/api/services/teaching-period.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+
+@Component({
+  selector: 'f-rollover',
+  templateUrl: './rollover.component.html',
+  styleUrl: './rollover.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class RolloverComponent implements OnInit {
+  @Input() unitId: number;
+
+  public unit: Unit;
+
+  public teachingPeriods: TeachingPeriod[] = [];
+
+  public teachingPeriod: TeachingPeriod;
+
+  public newStartDate: Date;
+  public newEndDate: Date;
+
+  constructor(
+    private globalStateService: GlobalStateService,
+    private unitService: UnitService,
+    private alertService: AlertService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private teachingPeriodService: TeachingPeriodService,
+  ) {}
+  ngOnInit(): void {
+    this.unitId = this.unitId ?? Number(this.route.parent?.snapshot.paramMap.get('unitId'));
+    this.globalStateService.onLoad(() => {
+      this.unitService.get(this.unitId).subscribe({
+        next: (unit) => {
+          this.unit = unit;
+          this.globalStateService.setView(ViewType.UNIT, unit);
+          setTimeout(() => {
+            this.initUnit();
+          });
+        },
+        error: (error) => {
+          this.alertService.error(`Failed to load unit: ${error}`, 6000);
+          this.router.navigateByUrl('/home');
+        },
+      });
+    });
+  }
+
+  initUnit() {
+    this.teachingPeriodService.cache.values.subscribe((periods) => {
+      this.teachingPeriods = periods;
+      this.teachingPeriods = periods.filter((p) => p.endDate.getTime() > Date.now());
+      if (this.teachingPeriods.length) {
+        this.teachingPeriod = this.teachingPeriods[this.teachingPeriods.length - 1];
+      }
+    });
+  }
+
+  createUnit() {
+    const body = this.teachingPeriod
+      ? {teaching_period_id: this.teachingPeriod.id}
+      : {start_date: this.newStartDate, end_date: this.newEndDate};
+
+    this.unit.rolloverTo(body).subscribe({
+      next: (response) => {
+        this.alertService.success(`Unit created`, 2000);
+        if (this.route.parent?.snapshot.data.unit) {
+          this.router.navigate(['/units', response.id, 'admin']);
+          return;
+        }
+
+        this.router.navigate(['/units', response.id, 'admin']);
+      },
+      error: (error) => {
+        this.alertService.error(`Error creating unit: ${error}`, 6000);
+      },
+    });
+  }
+}
diff --git a/src/app/units/states/rollover/rollover.tpl.html b/src/app/units/states/rollover/rollover.tpl.html
deleted file mode 100644
index aa2a80abe2..0000000000
--- a/src/app/units/states/rollover/rollover.tpl.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="container">
-  <unit-dates-selector unit="unit"></unit-dates-selector>
-</div>
diff --git a/src/app/units/states/states.coffee b/src/app/units/states/states.coffee
deleted file mode 100644
index 7d68872f4a..0000000000
--- a/src/app/units/states/states.coffee
+++ /dev/null
@@ -1,11 +0,0 @@
-angular.module('doubtfire.units.states', [
-  # 'doubtfire.units.states.all'
-  'doubtfire.units.states.index'
-  'doubtfire.units.states.edit'
-  'doubtfire.units.states.tasks'
-  'doubtfire.units.states.groups'
-  'doubtfire.units.states.students'
-  'doubtfire.units.states.analytics'
-  'doubtfire.units.states.portfolios'
-  'doubtfire.units.states.rollover'
-])
diff --git a/src/app/units/states/students-list/students-list.coffee b/src/app/units/states/students-list/students-list.coffee
deleted file mode 100644
index 7d2f363e1c..0000000000
--- a/src/app/units/states/students-list/students-list.coffee
+++ /dev/null
@@ -1,123 +0,0 @@
-angular.module('doubtfire.units.states.students', [])
-#
-# State for convenors and tutors to view students
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/students/list', {
-    parent: 'units/index'
-    url: '/students'
-    templateUrl: "units/states/students-list/students-list.tpl.html"
-    controller: "UnitStudentsStateCtrl"
-    data:
-      task: "Student List"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
-   }
-)
-.controller("UnitStudentsStateCtrl", ($scope, $state, $filter, $timeout, UnitStudentEnrolmentModal, alertService, newTaskService, gradeService, analyticsService, newUserService) ->
-  # Filtering
-  applyFilters = ->
-    filteredProjects = $filter('showStudents')($scope.unit.students, $scope.staffFilter, $scope.tutor)
-    # At this point know the length of all students
-    allStudentsLength = filteredProjects.length
-    # Apply filter for projects and determine to show CSV button
-    filteredProjects = $filter('projectFilter')(filteredProjects, $scope.searchText) if $scope.searchText?.trim().length > 0
-    # Paginate and sort
-    $scope.filteredProjects = $filter('paginateAndSort')(filteredProjects, $scope.pagination, $scope.tableSort)
-
-  # Pagination values
-  $scope.pagination =
-    currentPage: 1
-    maxSize: 15
-    pageSize: 15
-    totalSize: null
-    show: false
-    onChange: applyFilters
-
-  # Initial sort orders
-  $scope.tableSort =
-    order: 'name'
-    reverse: false
-
-  # Staff filter options (convenor should see all)
-  $scope.staffFilter = {
-    Convenor: 'all',
-    Tutor: 'mine'
-  }[$scope.unitRole.role]
-
-  # Scope for student name
-  $scope.tutor = newUserService.currentUser
-
-  # Send initial apply filter
-  applyFilters()
-
-  # Table sorting
-  $scope.sortTableBy = (column) ->
-    if column == 'flags'
-      $scope.showSearchOptions = true
-      $timeout(->
-        document.querySelector('#students-list .panel-body.search-options .form-group.flag-sort button:first-child').focus()
-      , 500)
-      $scope.tableSort.reverse = !$scope.tableSort.reverse if $scope.tableSort.order == column
-      return
-    $scope.tableSort.order = column
-    $scope.tableSort.reverse = !$scope.tableSort.reverse
-    applyFilters()
-
-  # Changing staff filter reapplies filter
-  $scope.staffFilterChanged = (newFilter) ->
-    $scope.staffFilter = newFilter
-    applyFilters()
-
-  # Changing search text reapplies filter
-  $scope.searchTextChanged = applyFilters
-
-  # CSV header func
-  $scope.getCSVHeader = ->
-    result = ['username', 'name', 'email', 'portfolio']
-    if $scope.unit.tutorialStreamsCache.size > 0
-      _.each $scope.unit.tutorialStreams, (ts) ->
-        result.push ts.abbreviation
-    else
-      result.push 'tutorial'
-    result
-
-  # CSV data row func
-  $scope.getCSVData = ->
-    filteredProjects = $filter('filter')($filter('showStudents')($scope.unit.students, $scope.staffFilter, $scope.tutor), $scope.searchText)
-    result = []
-    angular.forEach(filteredProjects, (project) ->
-      row = {}
-      row['username'] = project.student.username
-      row['name'] = project.student.name
-      row['email'] = project.student.email
-      row['portfolio'] = project.portfolioStatus
-      if $scope.unit.tutorialStreamsCache.size > 0
-        _.each $scope.unit.tutorialStreams, (ts) ->
-          row[ts.abbreviation] = project.tutorialForStream(ts)?.abbreviation || ''
-      else
-        row['tutorial'] = project.tutorials[0]?.abbreviation || ''
-      result.push row
-    )
-    result
-
-  # Expose the status labels and classes for the bar stats
-  $scope.statusClass = newTaskService.statusClass
-  $scope.statusText = newTaskService.statusText
-
-  # View a student
-  $scope.viewStudent = (student) ->
-    $state.go("projects/dashboard", {projectId: student.id, tutor: true, taskAbbr:''})
-
-  # Sets the flag sorting
-  $scope.sortTableByFlag = (flag) ->
-    if $scope.tableSort.order == flag
-      $scope.tableSort.reverse = !$scope.tableSort.reverse
-    else
-      $scope.tableSort.order = flag
-
-  # Shows the enrolment modal
-  $scope.showEnrolModal = ->
-    analyticsService.event 'Teacher View - Students Tab', 'Enrol Student'
-    UnitStudentEnrolmentModal.show $scope.unit
-)
diff --git a/src/app/units/states/students-list/students-list.component.html b/src/app/units/states/students-list/students-list.component.html
new file mode 100644
index 0000000000..599aea6d7f
--- /dev/null
+++ b/src/app/units/states/students-list/students-list.component.html
@@ -0,0 +1,222 @@
+<f-page-container>
+  <div class="flex flex-col gap-2.5 lg:flex-row lg:items-start lg:justify-between">
+    <div>
+      <h2>Students</h2>
+      <p>Browse progress, filter tutorial groups, and manage enrolments.</p>
+    </div>
+
+    <mat-form-field appearance="outline" class="w-full lg:w-auto">
+      <mat-label>Search for students or tutors...</mat-label>
+      <input
+        matInput
+        [disabled]="loadingStudents"
+        [matAutocomplete]="studentSearch"
+        [(ngModel)]="searchText"
+        (ngModelChange)="onSearchChange()"
+      />
+      <mat-autocomplete #studentSearch="matAutocomplete">
+        @for (suggestion of filteredSuggestions; track suggestion) {
+          <mat-option [value]="suggestion">{{ suggestion }}</mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+  </div>
+
+  <div class="flex w-full justify-center">
+    <mat-button-toggle-group
+      class="w-full max-w-lg"
+      [disabled]="loadingStudents"
+      [ngModel]="staffFilter"
+      (ngModelChange)="setStaffFilter($event)"
+    >
+      <mat-button-toggle class="w-full" value="all">All Tutorials</mat-button-toggle>
+      <mat-button-toggle class="w-full" value="mine">My Tutorials</mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+
+  @if (loadingStudents) {
+    <div aria-busy="true" aria-label="Loading students" class="overflow-hidden">
+      <div class="flex h-14 items-center gap-6 border-b border-gray-300 px-4">
+        @for (width of ['4%', '10%', '16%', '28%', '8%', '8%', '8%', '10%', '10%']; track $index) {
+          <ngx-skeleton-loader
+            [theme]="{width: width, height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+        }
+      </div>
+
+      @for (row of [0, 1, 2, 3, 4, 5, 6, 7]; track row) {
+        <div class="flex h-[72px] items-center gap-6 border-b border-gray-300 px-4">
+          <ngx-skeleton-loader
+            appearance="circle"
+            [theme]="{width: '30px', height: '30px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[10%]"
+            [theme]="{width: '100%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[16%]"
+            [theme]="{width: '100%', height: '12px', 'border-radius': '999px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            class="w-[28%]"
+            [theme]="{width: '100%', height: '25px', 'border-radius': '4px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          @for (column of [0, 1, 2, 3, 4]; track column) {
+            <ngx-skeleton-loader
+              class="w-[8%]"
+              [theme]="{width: '100%', height: '12px', 'border-radius': '999px', margin: '0'}"
+            ></ngx-skeleton-loader>
+          }
+        </div>
+      }
+    </div>
+  }
+
+  <div class="overflow-x-auto" [hidden]="loadingStudents">
+    <table
+      class="min-w-full"
+      mat-table
+      matSort
+      [dataSource]="dataSource"
+      [matSortActive]="sortState.active"
+      [matSortDirection]="sortState.direction"
+      (matSortChange)="sortTableData($event)"
+    >
+      <ng-container matColumnDef="avatar">
+        <th *matHeaderCellDef mat-header-cell></th>
+        <td *matCellDef="let project" mat-cell>
+          <user-icon [size]="30" [user]="project.student"></user-icon>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="username">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Username</th>
+        <td *matCellDef="let project" mat-cell>
+          {{ project.student?.username || 'N/A' }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
+        <td *matCellDef="let project" mat-cell>
+          {{ project.student?.displayName || 'N/A' }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="stats">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header="stats">Stats</th>
+        <td *matCellDef="let project" mat-cell>
+          <div class="flex h-[25px] w-[400px] overflow-hidden rounded">
+            @for (bar of project.taskStats; track bar.key) {
+              <div
+                class="flex h-[25px] items-center justify-center overflow-hidden"
+                matTooltipDelay="100"
+                matTooltipPosition="above"
+                [matTooltip]="statusLabel(bar.key) + ' ' + bar.value + '%'"
+                [ngStyle]="{
+                  width: bar.value + '%',
+                  background: statusColor(bar.key),
+                }"
+              >
+                @if (bar.key === 'not_started') {
+                  <span class="text-black">{{ bar.value }}%</span>
+                }
+                @if (bar.key === 'complete') {
+                  <span class="text-white">{{ bar.value }}%</span>
+                }
+              </div>
+            }
+          </div>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="grade">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header="grade">Target Grade</th>
+        <td *matCellDef="let project" mat-cell>
+          <f-grade-icon [grade]="project.targetGrade" [unit]="unit"></f-grade-icon>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="portfolio">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header="portfolio">Portfolio</th>
+        <td *matCellDef="let project" mat-cell>
+          @if (project.hasPortfolio) {
+            <mat-icon [class.text-muted]="project.compilePortfolio">menu_book</mat-icon>
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="similarity">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header="similarity">Similarity</th>
+        <td *matCellDef="let project" mat-cell>
+          @if (project.similarityFlag) {
+            <mat-icon>visibility</mat-icon>
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="campus">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Campus</th>
+        <td *matCellDef="let project" mat-cell (click)="$event.stopPropagation()">
+          <div class="pt-[22px]">
+            <student-campus-select
+              [student]="project"
+              [unit]="unit"
+              [update]="true"
+            ></student-campus-select>
+          </div>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="tutorial">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>Tutorial</th>
+        <td *matCellDef="let project" mat-cell (click)="$event.stopPropagation()">
+          <div class="pt-[22px]">
+            <student-tutorial-select [student]="project" [unit]="unit"></student-tutorial-select>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+      <tr
+        *matRowDef="let project; columns: displayedColumns"
+        class="cursor-pointer"
+        mat-row
+        (click)="viewStudent(project)"
+      ></tr>
+
+      <tr *matNoDataRow class="mat-row">
+        <td class="mat-cell p-2.5 text-center" [attr.colspan]="displayedColumns.length">
+          No students were found using the filters specified.
+        </td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="flex flex-col gap-2.5 lg:flex-row lg:items-center lg:justify-between">
+    <div class="flex flex-wrap gap-1">
+      <button mat-stroked-button type="button" [disabled]="loadingStudents" (click)="exportCsv()">
+        <mat-icon>download</mat-icon>
+        Export CSV
+      </button>
+      <button
+        color="primary"
+        mat-flat-button
+        type="button"
+        [disabled]="loadingStudents"
+        (click)="showEnrolModal()"
+      >
+        <mat-icon>person_add</mat-icon>
+        Enrol Student
+      </button>
+    </div>
+
+    <mat-paginator
+      showFirstLastButtons
+      [disabled]="loadingStudents"
+      [pageSize]="15"
+      [pageSizeOptions]="[15, 25, 50, 100]"
+    ></mat-paginator>
+  </div>
+</f-page-container>
diff --git a/src/app/units/states/students-list/students-list.component.spec.ts b/src/app/units/states/students-list/students-list.component.spec.ts
new file mode 100644
index 0000000000..4d4a1e0e4a
--- /dev/null
+++ b/src/app/units/states/students-list/students-list.component.spec.ts
@@ -0,0 +1,108 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {MatPaginator} from '@angular/material/paginator';
+import {ActivatedRoute, Router} from '@angular/router';
+import {BehaviorSubject, of} from 'rxjs';
+import {Project} from 'src/app/api/models/project';
+import {Unit} from 'src/app/api/models/unit';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {UnitStudentEnrolmentModalService} from '../../modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service';
+import {UnitRootStateComponent} from '../../unit-root-state.component';
+import {StudentsListComponent} from './students-list.component';
+
+function studentStub(name: string): Project {
+  return {
+    student: {name, displayName: name, username: name.toLowerCase()},
+    hasTutor: () => true,
+    matches: () => true,
+  } as unknown as Project;
+}
+
+function unitStub(id: number, studentNames: string[]): Unit {
+  const students = studentNames.map(studentStub);
+
+  return {
+    id,
+    myRole: 'Convenor',
+    students,
+    studentFilterTypeAheadData: studentNames,
+    studentCache: {values: of(students)},
+  } as unknown as Unit;
+}
+
+describe('StudentsListComponent', () => {
+  const unitA = unitStub(1, ['Ana Amos']);
+  const unitB = unitStub(2, ['Bo Barnes']);
+  let routeData: BehaviorSubject<{unit: Unit}>;
+
+  beforeEach(async () => {
+    routeData = new BehaviorSubject<{unit: Unit}>({unit: unitA});
+
+    await TestBed.configureTestingModule({
+      declarations: [UnitRootStateComponent, StudentsListComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {data: routeData, parent: {snapshot: {data: {}}}},
+        },
+        {provide: Router, useValue: {}},
+        {provide: UserService, useValue: {currentUser: {id: 1}}},
+        {
+          provide: TaskService,
+          useValue: {statusColors: new Map(), statusLabels: new Map()},
+        },
+        {provide: ProjectService, useValue: {loadStudents: () => of([])}},
+        {provide: UnitStudentEnrolmentModalService, useValue: {}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(UnitRootStateComponent, {set: {template: ''}})
+      .overrideComponent(StudentsListComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  it('shows the students of the unit the route resolved, and follows it to another unit', () => {
+    const root = TestBed.createComponent(UnitRootStateComponent).componentInstance;
+    root.ngOnInit();
+
+    const component = TestBed.createComponent(StudentsListComponent).componentInstance;
+    component.paginator = {firstPage: () => {}} as unknown as MatPaginator;
+
+    // The outlet hands the child its stream before the child runs ngOnInit.
+    root.onActivate(component);
+    component.ngOnInit();
+
+    expect(component.unit.id).toBe(unitA.id);
+    expect(component.dataSource.data.map((project) => project.student.displayName)).toEqual([
+      'Ana Amos',
+    ]);
+
+    routeData.next({unit: unitB});
+
+    expect(component.unit.id).toBe(unitB.id);
+    expect(component.dataSource.data.map((project) => project.student.displayName)).toEqual([
+      'Bo Barnes',
+    ]);
+  });
+
+  it('does not rebuild the list when the route resolves the same unit again', () => {
+    const root = TestBed.createComponent(UnitRootStateComponent).componentInstance;
+    root.ngOnInit();
+
+    const component = TestBed.createComponent(StudentsListComponent).componentInstance;
+    component.paginator = {firstPage: () => {}} as unknown as MatPaginator;
+
+    root.onActivate(component);
+    component.ngOnInit();
+
+    const firstData = component.dataSource.data;
+
+    routeData.next({unit: unitStub(unitA.id, ['Ana Amos'])});
+
+    expect(component.unit.id).toBe(unitA.id);
+    expect(component.dataSource.data).toBe(firstData);
+  });
+});
diff --git a/src/app/units/states/students-list/students-list.component.ts b/src/app/units/states/students-list/students-list.component.ts
new file mode 100644
index 0000000000..c7b2387f4b
--- /dev/null
+++ b/src/app/units/states/students-list/students-list.component.ts
@@ -0,0 +1,292 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Observable, Subscription, distinctUntilChanged, finalize, first, of} from 'rxjs';
+import {
+  Project,
+  ProjectService,
+  TaskService,
+  TaskStatusEnum,
+  Unit,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {UnitStudentEnrolmentModalService} from '../../modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service';
+
+// State for both convenors and tutors to access student list
+@Component({
+  selector: 'f-students-list',
+  templateUrl: './students-list.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class StudentsListComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input() unit$: Observable<Unit>;
+
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  displayedColumns: string[] = [
+    'avatar',
+    'username',
+    'name',
+    'stats',
+    'grade',
+    'portfolio',
+    'similarity',
+    'campus',
+    'tutorial',
+  ];
+  dataSource: MatTableDataSource<Project> = new MatTableDataSource([]);
+
+  searchText = '';
+  staffFilter: 'all' | 'mine' = 'all';
+  filteredSuggestions: string[] = [];
+  loadingStudents = true;
+  unit: Unit;
+
+  private subscriptions: Subscription[] = [];
+  private studentCacheSub?: Subscription;
+  public sortState: Sort = {active: 'name', direction: 'asc'};
+
+  constructor(
+    private enrolModal: UnitStudentEnrolmentModalService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private userService: UserService,
+    private taskService: TaskService,
+    private projectService: ProjectService,
+  ) {}
+
+  ngOnInit(): void {
+    this.unit$ = this.unit$ ?? of(this.route.parent.snapshot.data.unit);
+    this.subscriptions.push(
+      this.unit$?.pipe(distinctUntilChanged((a, b) => a?.id === b?.id)).subscribe((unit) => {
+        if (!unit) {
+          this.loadingStudents = false;
+          return;
+        }
+
+        this.loadingStudents = true;
+        this.unit = unit;
+        this.staffFilter = unit.myRole === 'Tutor' ? 'mine' : 'all';
+
+        this.studentCacheSub?.unsubscribe();
+        this.studentCacheSub = this.unit.studentCache.values.subscribe(() => {
+          this.updateSuggestions();
+          this.updateDataSource();
+        });
+
+        this.updateSuggestions();
+        this.updateDataSource();
+        this.projectService
+          .loadStudents(this.unit)
+          .pipe(
+            first(),
+            finalize(() => {
+              this.loadingStudents = false;
+            }),
+          )
+          .subscribe();
+      }),
+    );
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.updateDataSource();
+  }
+
+  ngOnDestroy(): void {
+    this.studentCacheSub?.unsubscribe();
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  public onSearchChange(): void {
+    this.updateSuggestions();
+    this.updateDataSource(true);
+  }
+
+  public setStaffFilter(filter: 'all' | 'mine'): void {
+    this.staffFilter = filter;
+    this.updateDataSource(true);
+  }
+
+  public sortTableData(sort: Sort): void {
+    if (!sort.active || sort.direction === '') {
+      this.sortState = {active: 'name', direction: 'asc'};
+    } else {
+      this.sortState = sort;
+    }
+
+    this.updateDataSource();
+  }
+
+  public viewStudent(project: Project): void {
+    this.router.navigate(['/projects', project.id, 'dashboard']);
+  }
+
+  public showEnrolModal(): void {
+    this.enrolModal.show(this.unit);
+  }
+
+  public exportCsv(): void {
+    const rows = [
+      this.csvHeader(),
+      ...this.filteredProjects().map((project) => this.csvRow(project)),
+    ];
+    const csvContent = rows
+      .map((row) => row.map((value) => this.csvEscape(value)).join(','))
+      .join('\n');
+    const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});
+    const link = document.createElement('a');
+
+    link.href = URL.createObjectURL(blob);
+    link.download = 'student-project-export.csv';
+    link.click();
+
+    URL.revokeObjectURL(link.href);
+  }
+
+  public statusColor(status: TaskStatusEnum): string {
+    return this.taskService.statusColors.get(status) || '#cbd5e1';
+  }
+
+  public statusLabel(status: TaskStatusEnum): string {
+    return this.taskService.statusLabels.get(status) || status;
+  }
+
+  public showBarLabel(value: number): boolean {
+    return Number.isFinite(value) && value >= 10;
+  }
+
+  private updateSuggestions(): void {
+    const searchValue = this.searchText.trim().toLowerCase();
+    const suggestions = Array.from(new Set(this.unit?.studentFilterTypeAheadData ?? []));
+
+    this.filteredSuggestions = suggestions
+      .filter((item) => !searchValue || item.toLowerCase().includes(searchValue))
+      .slice(0, 8);
+  }
+
+  private updateDataSource(resetPagination: boolean = false): void {
+    if (!this.paginator) {
+      return;
+    }
+
+    const students = this.filteredProjects();
+
+    this.dataSource.data = students;
+
+    if (resetPagination) {
+      this.paginator?.firstPage();
+    }
+  }
+
+  private filteredProjects(): Project[] {
+    const searchValue = this.searchText.trim().toLowerCase();
+    const currentUser = this.userService.currentUser;
+
+    return [...(this.unit?.students ?? [])]
+      .filter((project) => (this.staffFilter === 'mine' ? project.hasTutor(currentUser) : true))
+      .filter((project) => (searchValue ? this.matchesSearch(project, searchValue) : true))
+      .sort((a, b) => this.compareProjects(a, b));
+  }
+
+  private matchesSearch(project: Project, searchValue: string): boolean {
+    return (
+      project.matches(searchValue) || project.student.username?.toLowerCase().includes(searchValue)
+    );
+  }
+
+  private compareProjects(a: Project, b: Project): number {
+    const direction = this.sortState.direction === 'desc' ? -1 : 1;
+    const aValue = this.sortValue(a, this.sortState.active);
+    const bValue = this.sortValue(b, this.sortState.active);
+
+    if (aValue === bValue) {
+      return 0;
+    }
+
+    if (aValue == null) {
+      return -1 * direction;
+    }
+
+    if (bValue == null) {
+      return 1 * direction;
+    }
+
+    return aValue < bValue ? -1 * direction : 1 * direction;
+  }
+
+  private sortValue(project: Project, active: string): number | string {
+    switch (active) {
+      case 'username':
+        return project.student.username?.toLowerCase() || '';
+      case 'name':
+        return project.student.displayName?.toLowerCase() || '';
+      case 'stats':
+        return project.orderScale ?? 0;
+      case 'grade':
+        return project.targetGrade ?? -1;
+      case 'portfolio':
+        return project.portfolioStatus ?? -1;
+      case 'similarity':
+        return project.similarityFlag ? 1 : 0;
+      case 'campus':
+        return project.campus?.name?.toLowerCase() || '';
+      case 'tutorial':
+        return project.shortTutorialDescription().toLowerCase();
+      default:
+        return project.student.displayName?.toLowerCase() || '';
+    }
+  }
+
+  private csvHeader(): string[] {
+    const result = ['username', 'name', 'email', 'portfolio'];
+
+    if (this.unit.tutorialStreamsCache.size > 0) {
+      this.unit.tutorialStreams.forEach((stream) => result.push(stream.abbreviation));
+    } else {
+      result.push('tutorial');
+    }
+
+    return result;
+  }
+
+  private csvRow(project: Project): string[] {
+    const row = [
+      project.student.username || '',
+      project.student.displayName || '',
+      project.student.email || '',
+      String(project.portfolioStatus ?? ''),
+    ];
+
+    if (this.unit.tutorialStreamsCache.size > 0) {
+      this.unit.tutorialStreams.forEach((stream) => {
+        row.push(project.tutorialForStream(stream)?.abbreviation || '');
+      });
+    } else {
+      row.push(project.tutorials[0]?.abbreviation || '');
+    }
+
+    return row;
+  }
+
+  private csvEscape(value: string): string {
+    const normalized = String(value ?? '');
+    if (/[",\n]/.test(normalized)) {
+      return `"${normalized.replace(/"/g, '""')}"`;
+    }
+    return normalized;
+  }
+}
diff --git a/src/app/units/states/students-list/students-list.scss b/src/app/units/states/students-list/students-list.scss
index 034083aea9..e69de29bb2 100644
--- a/src/app/units/states/students-list/students-list.scss
+++ b/src/app/units/states/students-list/students-list.scss
@@ -1,80 +0,0 @@
-#students-list {
-  // Flag icons
-  $flag-icon-width: 35px;
-  $number-of-flags: 3;
-  table thead th {
-    vertical-align: middle;
-  }
-  a.sort-by-flag-anchor {
-    &:hover {
-      text-decoration: none;
-      .show-link {
-        text-decoration: underline;
-      }
-    }
-  }
-  a.sort-by-flag-anchor + .flag-sort-options {
-    display: flex;
-    max-width: $flag-icon-width * $number-of-flags;
-    margin: 0.5em 0;
-    align-items: center;
-    justify-content: space-between;
-    .flag-sort {
-      i,
-      grade-icon {
-        display: inline-block;
-      }
-    }
-    .flag-sort > i:hover {
-      color: $link-hover-color;
-    }
-    .flag-sort > grade-icon:hover span {
-      background-color: $link-hover-color;
-    }
-  }
-  table {
-    td.flags-data {
-      .flags {
-        max-width: $flag-icon-width * $number-of-flags;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
-    td.task-progress-bar {
-      padding-right: 3ex;
-      .progress {
-        border-radius: 10px;
-      }
-    }
-    td.avatar {
-      text-align: right;
-      user-icon {
-        margin-right: 1ex;
-        width: 2.5em;
-        height: 2.5em;
-      }
-    }
-    th.avatar {
-      width: 05%;
-    }
-    th.username {
-      width: 10%;
-    }
-    th.name {
-      width: 10%;
-    }
-    th.stats {
-      width: 30%;
-    }
-    th.flags {
-      width: 10%;
-    }
-    th.tutorial {
-      width: 15%;
-    }
-    th.campus {
-      width: 10%;
-    }
-  }
-}
diff --git a/src/app/units/states/students-list/students-list.tpl.html b/src/app/units/states/students-list/students-list.tpl.html
deleted file mode 100644
index 929cefe386..0000000000
--- a/src/app/units/states/students-list/students-list.tpl.html
+++ /dev/null
@@ -1,182 +0,0 @@
-<div id="students-list" class="container">
-  <div class="panel panel-primary">
-    <div class="panel-heading">
-      <div class="input-group">
-        <input
-          class="form-control input-lg"
-          placeholder="Search for students or tutors..."
-          type="search"
-          ng-model="searchText"
-          ng-change="searchTextChanged()"
-          typeahead-on-select="searchTextChanged()"
-          typeahead="text for text in
-            unit.studentFilterTypeAheadData |
-            filter:$viewValue |
-            limitTo:8"
-          typeahead-wait-ms="200"
-          autofocus><!--/search-text-->
-          <span class="input-group-btn">
-            <button class="btn btn-default btn-lg" type="button" ng-model="showSearchOptions" btn-checkbox>
-              <i class="fa fa-chevron-{{showSearchOptions ? 'up' : 'down'}}"></i>
-            </button>
-          </span><!--/search-options-toggle-->
-        </div>
-      </h4>
-    </div><!--/search-header-->
-    <form class="panel-body panel-collapseable search-options" ng-show="showSearchOptions">
-      <div class="form-group staff-filter">
-        <label>Show Students From...</label>
-        <div class="input-group">
-          <div class="btn-group">
-            <button class="btn btn-default col-sm-6" ng-model="staffFilter" ng-click="staffFilterChanged('all')" btn-radio="'all'">
-              <i class="fa fa-university"></i> All Tutorials
-            </button>
-            <button class="btn btn-default col-sm-6" ng-model="staffFilter" ng-click="staffFilterChanged('mine')" btn-radio="'mine'">
-              <i class="fa fa-pencil"></i> My Tutorials
-            </button>
-          </div>
-        </div>
-      </div><!--/staff-filter-button-group-->
-      <div class="form-group flag-sort">
-        <label>Sort Flags By...</label>
-        <div class="input-group">
-          <div class="btn-group">
-            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('targetGrade')" btn-radio="'targetGrade'">
-              <i class="fa fa-check"></i> Grade
-            </button>
-            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('similarityFlag')" btn-radio="'similarityFlag'">
-              <i class="fa fa-eye"></i> Plagiarism
-            </button>
-            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('portfolioStatus')" btn-radio="'portfolioStatus'">
-              <i class="fa fa-book"></i> Portfolio Status
-            </button>
-          </div>
-        </div>
-        <p class="help-block">
-          Click the button twice to reverse the sort ordering.
-        </p>
-      </div><!--/flag-sort-button-group-->
-    </form><!--/search-options-->
-    <div class="panel-body" ng-show="filteredProjects.length == 0">
-      <div class="callout callout-primary">
-        <h4>No students found</h4>
-        <p>
-          No students were found using the filters specified.
-        </p>
-      </div>
-    </div><!--/no-students-found-->
-    <table ng-show="filteredProjects.length > 0" class="table table-condensed table-hover table-pointer">
-      <thead>
-        <tr>
-          <th class="avatar"></th>
-          <th class="username">
-            <a ng-click="sortTableBy('student.username')">
-              Username <i ng-show="tableSort.order == 'student.username'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/id-column-header-->
-          <th class="name">
-            <a ng-click="sortTableBy('student.name')">
-              Name <i ng-show="tableSort.order == 'student.name'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/name-column-header-->
-          <th class="stats">
-            <a ng-click="sortTableBy('orderScale')">
-              Stats <i ng-show="tableSort.order == 'orderScale'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/stats-column-header-->
-          <th class="flags">
-            <a ng-click="sortTableBy('flags')">
-              Flags
-              <i ng-show="
-                tableSort.order == 'similarityFlag' ||
-                tableSort.order == 'targetGrade' ||
-                tableSort.order == 'portfolioStatus'"
-                class="ng-hide fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/flags-column-header-->
-          <th class="campus">
-            <a ng-click="sortTableBy('campus.name')">
-              Campus <i ng-show="tableSort.order == 'campus'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/campus-column-header-->
-          <th class="tutorial">
-            <a ng-click="sortTableBy('tutorial.abbreviation')">
-              Tutorial <i ng-show="tableSort.order == 'tutorial.abbreviation'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/tutorial-column-header-->
-        </tr><!--/column-headers-row-->
-      </thead>
-      <tbody>
-        <tr class="task-progress-row pl-12" ng-repeat="project in filteredProjects">
-          <td class="avatar pl-8" ng-click="viewStudent(project)">
-            <user-icon [size]="30" [user]="project.student"></user-icon>
-          </td>
-          <td ng-click="viewStudent(project)">
-            {{project.student.username || "N/A"}}
-          </td><!--/username-column-->
-          <td ng-click="viewStudent(project)">
-            <span class="truncate">{{project.student.name}}</span>
-          </td><!--/name-column-->
-          <td ng-click="viewStudent(project)" class="task-progress-bar">
-            <progress class="task-progress" animate="true">
-              <bar
-                ng-repeat="bar in project.taskStats"
-                value="bar.value"
-                type="{{statusClass(bar.key)}}">
-                <span ng-hide="bar.value < 10">{{bar.value !== bar.value ? 'No Interaction' : (bar.value + '%')}}</span>
-              </bar>
-            </progress>
-          </td><!--/progress-column-->
-          <td class="text-left" ng-click="viewStudent(project)">
-            <span class="flags">
-              <span class="flag">
-                <grade-icon grade="project.targetGrade"></grade-icon>
-              </span>
-              <span ng-show="project.similarityFlag" class="flag">
-                <i class="fa fa-eye fa-2x" ></i>
-              </span>
-              <span ng-show="project.hasPortfolio" class="flag">
-                <i class="fa fa-book fa-2x" ng-class="{'text-muted': project.compilePortfolio}"></i>
-              </span>
-            </span>
-          </td><!--/flags-column-->
-          <td>
-            <student-campus-select [unit]="unit" [student]="project" [update]="true"></student-campus-select>
-          </td><!--/campus-column-->
-          <td>
-            <student-tutorial-select class="pr-8" [unit]="unit" [student]="project"></student-tutorial-select>
-          </td><!--/tutorial-column-->
-        </tr><!--/student-row-->
-      </tbody>
-    </table><!--/student-table-->
-    <div class="panel-footer">
-      <div class="pull-right">
-        <button
-          type="button"
-          class="btn btn-default"
-          ng-csv="getCSVData"
-          lazy-load="true"
-          csv-header="getCSVHeader()"
-          filename="student-project-export.csv"
-          target="_blank">
-          <i class="fa fa-file-excel-o"></i>
-          <i class="fa fa-download"></i> Export CSV
-        </button>
-        <button type="button" class="btn btn-default" ng-click="showEnrolModal()">
-          <i class="fa fa-user"></i>
-          <i class="fa fa-plus"></i> Enrol Student
-        </button>
-      </div><!--/export-buttons-->
-      <pagination
-        total-items="pagination.totalSize"
-        ng-change="pagination.onChange()"
-        ng-model="pagination.currentPage"
-        items-per-page="pagination.pageSize"
-        max-size="pagination.maxSize"
-        class="pagination-sm"
-        boundary-links="true"
-        rotate="false">
-      </pagination><!--/pagination-->
-    </div><!--/panel-footer-->
-  </div>
-</div>
diff --git a/src/app/units/states/tasks/definition/definition.coffee b/src/app/units/states/tasks/definition/definition.coffee
index bd0bad8241..9dbdc249ea 100644
--- a/src/app/units/states/tasks/definition/definition.coffee
+++ b/src/app/units/states/tasks/definition/definition.coffee
@@ -22,6 +22,7 @@ angular.module('doubtfire.units.states.tasks.definition', [
 
 .controller('TaskDefinitionStateCtrl', ($scope, newTaskService) ->
   $scope.taskData.source = newTaskService.queryTasksForTaskExplorer.bind(newTaskService)
+  $scope.viewType = 'explorer'
   $scope.taskData.taskDefMode = true
   $scope.showSearchOptions = true
   $scope.filters = {
diff --git a/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.html b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.html
new file mode 100644
index 0000000000..cdaf5923de
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.html
@@ -0,0 +1,132 @@
+<div class="flex size-full flex-col overflow-hidden">
+  @if (task) {
+    <div class="z-10 flex w-full shrink-0 items-center gap-1">
+      <mat-tab-group
+        class="inbox-dashboard-tabs min-w-0 flex-1"
+        dynamicHeight
+        [selectedIndex]="currentIndex"
+        (selectedTabChange)="onTabChange($event)"
+      >
+        <mat-tab label="Submission"></mat-tab>
+        <mat-tab label="Task Sheet" [disabled]="!task.definition.hasTaskSheet"></mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="inline-flex items-center gap-1">
+              Similarities
+              @if (task.similaritiesDetected) {
+                <mat-icon class="text-red-500">warning</mat-icon>
+              }
+            </span>
+          </ng-template>
+        </mat-tab>
+
+        <!-- TODO: only show this if the task does not have any submission history/overseer -->
+        <mat-tab label="History"></mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="inline-flex items-center gap-1">
+              Student Notes
+              @if (task.project.staffNoteCount) {
+                <span
+                  class="ml-0.5 inline-flex size-[22px] items-center justify-center rounded-full p-0 text-[12px] leading-[22px] font-semibold text-white"
+                  style="background-color: var(--ot-color-primary, #3939ff)"
+                >
+                  {{ task.project.staffNoteCount }}
+                </span>
+              }
+            </span>
+          </ng-template>
+        </mat-tab>
+        @if (canAccessTutorNotes) {
+          <mat-tab label="Mod Notes"></mat-tab>
+        }
+      </mat-tab-group>
+
+      <button
+        aria-label="Task actions"
+        class="shrink-0 text-gray-600"
+        mat-icon-button
+        [matMenuTriggerFor]="taskMenu"
+      >
+        <mat-icon>more_vert</mat-icon>
+      </button>
+
+      <mat-menu #taskMenu="matMenu" xPosition="before">
+        <button mat-menu-item [disabled]="!task.hasPdf" (click)="downloadSubmission()">
+          <mat-icon>download</mat-icon>
+          <span>Download submission PDF</span>
+        </button>
+        <button mat-menu-item [disabled]="!task" (click)="downloadSubmittedFiles()">
+          <mat-icon>folder_zip</mat-icon>
+          <span>Download submitted files</span>
+        </button>
+      </mat-menu>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-hidden">
+      @switch (currentTab) {
+        @case (InboxDashboardTab.submission) {
+          <div class="h-full">
+            @if (task.hasPdf) {
+              <f-pdf-viewer [pdfUrl]="task.submissionUrl()"></f-pdf-viewer>
+            } @else {
+              <div class="flex h-full flex-col items-center justify-center">
+                <mat-icon
+                  class="size-[120px] text-[120px] text-[var(--ot-color-text-muted,#c5c5c5)]"
+                >
+                  description_off
+                </mat-icon>
+              </div>
+            }
+          </div>
+        }
+        @case (InboxDashboardTab.taskSheet) {
+          <div class="h-full">
+            @if (task.definition.hasTaskSheet) {
+              <f-pdf-viewer [pdfUrl]="task.definition.getTaskPDFUrl()"></f-pdf-viewer>
+            } @else {
+              <div class="flex h-full flex-col items-center justify-center">
+                <mat-icon
+                  class="size-[120px] text-[120px] text-[var(--ot-color-text-muted,#c5c5c5)]"
+                >
+                  subtitles_off
+                </mat-icon>
+              </div>
+            }
+          </div>
+        }
+        @case (InboxDashboardTab.staffNotes) {
+          <div class="h-full">
+            <f-staff-notes-view
+              [project]="$safeNavigationMigration(task?.project)"
+            ></f-staff-notes-view>
+          </div>
+        }
+        @case (InboxDashboardTab.tutorNotes) {
+          <div class="h-full overflow-auto">
+            @if (canAccessTutorNotes) {
+              <f-tutor-notes-view [task]="task"></f-tutor-notes-view>
+            }
+          </div>
+        }
+        @case (InboxDashboardTab.similarities) {
+          <div class="h-full overflow-auto">
+            <f-task-similarity-view [task]="task"></f-task-similarity-view>
+          </div>
+        }
+        @case (InboxDashboardTab.overseer) {
+          <div class="h-full">
+            <f-task-overseer-report [task]="task"></f-task-overseer-report>
+          </div>
+        }
+      }
+    </div>
+  } @else {
+    <div class="flex h-full flex-col items-center justify-center">
+      <mat-icon class="size-[120px] text-[120px] text-[var(--ot-color-text-muted,#c5c5c5)]"
+        >subtitles_off</mat-icon
+      >
+      <p class="mt-1 text-[var(--ot-color-text-muted,#c5c5c5)]">Select a task to review</p>
+    </div>
+  }
+</div>
diff --git a/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.scss b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.scss
new file mode 100644
index 0000000000..ef71185df4
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.scss
@@ -0,0 +1,20 @@
+:host ::ng-deep .inbox-dashboard-tabs {
+  .mat-mdc-tab-header {
+    justify-content: center;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+
+  .mat-mdc-tab-label-container {
+    flex: 0 0 auto;
+    margin: 0 auto;
+    overflow: visible;
+  }
+
+  .mat-mdc-tab-list,
+  .mat-mdc-tab-labels {
+    width: max-content;
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.spec.ts b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.spec.ts
new file mode 100644
index 0000000000..704f2f983d
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.spec.ts
@@ -0,0 +1,41 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {InboxDashboardComponent} from './inbox-dashboard.component';
+
+describe('InboxDashboardComponent empty-state colour tokens (THM-M03)', () => {
+  let fixture: ComponentFixture<InboxDashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [InboxDashboardComponent],
+      providers: [
+        {provide: FileDownloaderService, useValue: {}},
+        {provide: UserService, useValue: {}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InboxDashboardComponent);
+    // No task input set: renders the "Select a task to review" empty state,
+    // the only state reachable without a fully-populated Task/Unit/Project mock.
+    fixture.detectChanges();
+  });
+
+  it('carries the theme token (not a bare hex) on the empty-state icon and message', () => {
+    const icon: HTMLElement = fixture.nativeElement.querySelector('mat-icon');
+    const message: HTMLElement = fixture.nativeElement.querySelector('p');
+
+    expect(icon.className).toContain('var(--ot-color-text-muted,#c5c5c5)');
+    expect(message.className).toContain('var(--ot-color-text-muted,#c5c5c5)');
+    // Regression guard: a plain arbitrary hex class with no token reference
+    // would mean the THM-M03 migration was reverted.
+    expect(icon.className).not.toMatch(/text-\[#c5c5c5\]/);
+  });
+
+  it('shows the expected empty-state copy', () => {
+    expect(fixture.nativeElement.textContent).toContain('Select a task to review');
+  });
+});
diff --git a/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.ts b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.ts
new file mode 100644
index 0000000000..f699ffef09
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/inbox-dashboard/inbox-dashboard.component.ts
@@ -0,0 +1,132 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {UnitRole} from 'src/app/api/models/doubtfire-model';
+import {Task} from 'src/app/api/models/task';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+
+enum InboxDashboardTab {
+  submission = 0,
+  taskSheet = 1,
+  similarities = 2,
+  overseer = 3,
+  staffNotes = 4,
+  tutorNotes = 5,
+}
+
+@Component({
+  selector: 'f-inbox-dashboard',
+  templateUrl: './inbox-dashboard.component.html',
+  styleUrls: ['./inbox-dashboard.component.scss'],
+  host: {'class': 'block h-full'},
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class InboxDashboardComponent implements OnChanges {
+  @Input() task: Task;
+  @Output() visiblePdfUrlChange: EventEmitter<string> = new EventEmitter();
+
+  public readonly InboxDashboardTab = InboxDashboardTab;
+  public currentTab: InboxDashboardTab = InboxDashboardTab.submission;
+  public currentIndex = InboxDashboardTab.submission;
+
+  constructor(
+    private fileDownloader: FileDownloaderService,
+    private userService: UserService,
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.task) {
+      this.selectDefaultTab();
+    }
+  }
+
+  onTabChange(event: MatTabChangeEvent): void {
+    this.setSelectedTab(event.index as InboxDashboardTab);
+  }
+
+  downloadSubmission(): void {
+    if (!this.task?.hasPdf) {
+      return;
+    }
+
+    this.fileDownloader.downloadFile(this.task.submissionUrl(true), 'submission.pdf');
+  }
+
+  downloadSubmittedFiles(): void {
+    if (!this.task) {
+      return;
+    }
+
+    this.fileDownloader.downloadFile(this.task.submittedFilesUrl(), 'submitted-files.zip');
+  }
+
+  public get overseerEnabled(): boolean {
+    return this.task?.overseerEnabled ?? false;
+  }
+
+  private selectDefaultTab(): void {
+    if (this.task) {
+      this.setSelectedTab(InboxDashboardTab.submission);
+    } else {
+      this.currentTab = InboxDashboardTab.submission;
+      this.currentIndex = InboxDashboardTab.submission;
+      this.visiblePdfUrlChange.emit(null);
+    }
+  }
+
+  private setSelectedTab(tab: InboxDashboardTab): void {
+    this.currentTab = tab;
+    this.currentIndex = tab;
+    this.visiblePdfUrlChange.emit(this.pdfUrlForTab(tab));
+  }
+
+  private pdfUrlForTab(tab: InboxDashboardTab): string {
+    if (!this.task) {
+      return null;
+    }
+
+    switch (tab) {
+      case InboxDashboardTab.submission:
+        return this.task.hasPdf ? this.task.submissionUrl() : null;
+      case InboxDashboardTab.taskSheet:
+        return this.task.definition?.hasTaskSheet ? this.task.definition.getTaskPDFUrl() : null;
+      default:
+        return null;
+    }
+  }
+
+  public get currentUnitRole(): UnitRole | undefined {
+    const currentUser = this.userService.currentUser;
+    return this.task.unit.staff.find((ur) => ur.user.id === currentUser.id);
+  }
+
+  public get canAccessTutorNotes(): boolean {
+    const tutor = this.task.tutor;
+    if (!tutor) {
+      return false;
+    }
+
+    if (!this.currentUnitRole) {
+      return false;
+    }
+
+    // Ensure the unit is mapped correctly to access the mentor
+    tutor.unit = this.task.unit;
+
+    const canAccess =
+      this.currentUnitRole.role === 'Convenor' ||
+      this.currentUnitRole.role === 'Admin' ||
+      (tutor.mentor && tutor.mentor.id === this.currentUnitRole.id);
+
+    return canAccess;
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.html b/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.html
new file mode 100644
index 0000000000..7cca81fc35
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.html
@@ -0,0 +1,43 @@
+<h3 mat-dialog-title>
+  <div class="flex flex-row items-center">
+    <div class="mr-3 flex items-center">
+      @if (action === 'show_less') {
+        <mat-icon>thumb_up</mat-icon>
+      } @else if (action === 'show_more') {
+        <mat-icon>flag</mat-icon>
+      } @else if (action === 'dismiss_ok') {
+        <mat-icon>check_circle</mat-icon>
+      } @else if (action === 'dismiss_good') {
+        <mat-icon>task_alt</mat-icon>
+      } @else if (action === 'overturn') {
+        <mat-icon>gavel</mat-icon>
+      } @else if (action === 'upheld') {
+        <mat-icon>verified</mat-icon>
+      }
+    </div>
+    <div class="flex flex-col">
+      <div>{{ title }}</div>
+      <!-- <small>Please confirm that you want to perform this action.</small> -->
+      <small>Tutor: {{ task.tutor.user.displayName }}</small>
+    </div>
+  </div>
+</h3>
+<mat-dialog-content>
+  <p>
+    {{ description }}
+  </p>
+  @if (showDismissAll) {
+    <p>
+      <mat-checkbox [(ngModel)]="dismissAllTasks">
+        Apply this action to all {{ task.definition.abbreviation }} {{ task.definition.name }} tasks
+        from {{ task.tutor?.user.displayName ?? 'N/A' }}, currently waiting for moderation
+      </mat-checkbox>
+    </p>
+  }
+</mat-dialog-content>
+<mat-dialog-actions class="flex justify-between">
+  <button color="warn" mat-button (click)="dismiss()">Cancel</button>
+  <button color="primary" mat-raised-button (click)="runCallback()">
+    <mat-icon inline>check</mat-icon> Confirm
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.scss b/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.ts b/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.ts
new file mode 100644
index 0000000000..abfd42c886
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component.ts
@@ -0,0 +1,50 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {FeedbackModerationActionType} from 'src/app/api/models/task';
+import {Task} from 'src/app/api/models/task';
+import {TaskService} from 'src/app/api/services/task.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {ConfirmModerationModalData} from './confirm-moderation-modal.service';
+
+@Component({
+  selector: 'f-confirm-moderation-modal',
+  templateUrl: './confirm-moderation-modal.component.html',
+  styleUrl: './confirm-moderation-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ConfirmModerationModalComponent implements OnInit {
+  task: Task;
+  title: string;
+  description: string;
+  action: FeedbackModerationActionType;
+  showDismissAll: boolean;
+  callback: (applyToAll: boolean) => void;
+
+  dismissAllTasks: boolean = false;
+
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmModerationModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmModerationModalData,
+    private alerts: AlertService,
+    private taskService: TaskService,
+  ) {}
+
+  ngOnInit() {
+    this.task = this.data.task;
+    this.title = this.data.title;
+    this.description = this.data.description;
+    this.action = this.data.action;
+    this.showDismissAll = this.data.showDismissAll;
+    this.callback = this.data.callback;
+  }
+
+  public runCallback() {
+    this.callback(this.dismissAllTasks);
+    this.dismiss();
+  }
+
+  public dismiss() {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.service.ts b/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.service.ts
new file mode 100644
index 0000000000..f1fb96e002
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.service.ts
@@ -0,0 +1,47 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {FeedbackModerationActionType} from 'src/app/api/models/task';
+import {Task} from 'src/app/api/models/task';
+import {ConfirmModerationModalComponent} from './confirm-moderation-modal.component';
+
+export interface ConfirmModerationModalData {
+  task: Task;
+  title: string;
+  description: string;
+  action: FeedbackModerationActionType;
+  showDismissAll: boolean;
+  callback: (applyToAll: boolean) => void;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmModerationModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(
+    task: Task,
+    title: string,
+    description: string,
+    action: FeedbackModerationActionType,
+    showDismissAll: boolean,
+    callback: (applyToAll: boolean) => void,
+  ) {
+    const _dialogRef = this.dialog.open<
+      ConfirmModerationModalComponent,
+      ConfirmModerationModalData
+    >(ConfirmModerationModalComponent, {
+      data: {
+        task,
+        title,
+        description,
+        action,
+        showDismissAll,
+        callback,
+      },
+      position: {top: '2.5%'},
+      width: '100%',
+      maxWidth: '650px',
+    });
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.html b/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.html
new file mode 100644
index 0000000000..3862dc4a8b
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.html
@@ -0,0 +1,75 @@
+<!-- <div class="flex justify-center py-1">Tutor: {{ task.tutor?.user.name }}</div> -->
+<span class="center-buttons mx-3 flex justify-around gap-3">
+  @if (task.moderationType === 'random_sample' || task.moderationType === 'first_feedback') {
+    <button
+      aria-label=""
+      class="button"
+      mat-icon-button
+      matTooltip="Show more from this tutor"
+      matTooltipPosition="above"
+      [disabled]="task === undefined || isModerated(task)"
+      (click)="showMore()"
+    >
+      <mat-icon>flag</mat-icon>
+    </button>
+    <button
+      aria-label=""
+      class="button large-button"
+      mat-icon-button
+      matTooltip="Snooze task"
+      matTooltipPosition="above"
+      [disabled]="task === undefined || isModerated(task)"
+      (click)="snooze()"
+    >
+      <mat-icon>snooze</mat-icon>
+    </button>
+    <button
+      aria-label=""
+      class="button large-button"
+      mat-icon-button
+      matTooltip="Dismiss moderation task"
+      matTooltipPosition="above"
+      [disabled]="task === undefined || isModerated(task)"
+      (click)="dismiss()"
+    >
+      <mat-icon>archive</mat-icon>
+    </button>
+    <button
+      aria-label=""
+      class="button"
+      mat-icon-button
+      matTooltip="Show less from this tutor"
+      matTooltipPosition="above"
+      [disabled]="task === undefined || isModerated(task)"
+      (click)="showLess()"
+    >
+      <mat-icon>thumb_up</mat-icon>
+    </button>
+  } @else if (task.moderationType === 'escalation') {
+    <button
+      aria-label=""
+      class="button"
+      mat-icon-button
+      matTooltip="Overturn"
+      matTooltipPosition="above"
+      [disabled]="task === undefined || isModerated(task)"
+      (click)="overturn()"
+    >
+      <!-- <mat-icon>flag</mat-icon> -->
+      <mat-icon>gavel</mat-icon>
+    </button>
+
+    <button
+      aria-label=""
+      class="button"
+      mat-icon-button
+      matTooltip="Upheld"
+      matTooltipPosition="above"
+      [disabled]="task === undefined || isModerated(task)"
+      (click)="upheld()"
+    >
+      <!-- <mat-icon>thumb_up</mat-icon> -->
+      <mat-icon>verified</mat-icon>
+    </button>
+  }
+</span>
diff --git a/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.scss b/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.scss
new file mode 100644
index 0000000000..40199e8dd9
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.scss
@@ -0,0 +1,27 @@
+.center-buttons {
+  text-align: center;
+
+  .button {
+    // margin: 0 6px;
+    transform: scale(0.8);
+    border-radius: 100%;
+  }
+
+  .large-button {
+    transform: scale(1.15);
+    background-color: var(--ot-color-surface, white);
+  }
+
+  .large-button:hover {
+    background-color: var(--ot-color-page, #f5f5f5);
+  }
+
+  .extra-large-button {
+    padding-top: 7px;
+    transform: scale(1.25);
+  }
+
+  .extra-large-button:hover {
+    filter: brightness(0.85);
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.ts b/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.ts
new file mode 100644
index 0000000000..c1ae2b0225
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/moderation/moderation.component.ts
@@ -0,0 +1,133 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Router} from '@angular/router';
+import {FeedbackModerationActionType, Task} from 'src/app/api/models/task';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {ConfirmModerationModalService} from './confirm-moderation-modal/confirm-moderation-modal.service';
+
+@Component({
+  selector: 'f-moderation',
+  templateUrl: './moderation.component.html',
+  styleUrl: './moderation.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ModerationComponent {
+  @Input() task: Task;
+
+  public moderated: Map<Task, boolean> = new Map<Task, boolean>();
+
+  constructor(
+    private alertService: AlertService,
+    private confirmModerationModal: ConfirmModerationModalService,
+    private router: Router,
+  ) {}
+
+  overturn() {
+    this.confirmModerationModal.show(
+      this.task,
+      'Overturn',
+      `The original feedback will be revised and the task outcome updated.
+      Provide clear, constructive feedback explaining the changes made, and record any guidance for the tutor in the moderation notes section.`,
+      'overturn',
+      false,
+      () => {
+        this.moderateTask('overturn');
+      },
+    );
+  }
+
+  upheld() {
+    this.confirmModerationModal.show(
+      this.task,
+      'Upheld',
+      `After reviewing the task and feedback, you are satisfied that the original marking and comments are appropriate and align with the assessment criteria.
+      No changes will be made.
+      Ensure any concerns raised by the student have been considered and addressed where necessary.`,
+      'upheld',
+      false,
+      () => {
+        this.moderateTask('upheld');
+      },
+    );
+  }
+
+  showMore() {
+    this.confirmModerationModal.show(
+      this.task,
+      'Show more from this tutor',
+      `There were concerns with feedback and you would like to see more tasks from this tutor. You will review this task again if further feedback is provided.`,
+      'show_more',
+      false,
+      () => {
+        this.moderateTask('show_more');
+      },
+    );
+  }
+
+  showLess() {
+    this.confirmModerationModal.show(
+      this.task,
+      'Show less from this tutor',
+      `The feedback provided by the tutor is satisfactory and you would like to see less of their feedback for moderation. You won't see this task again.`,
+      'show_less',
+      true,
+      (applyToAll) => {
+        this.moderateTask('show_less', applyToAll);
+      },
+    );
+  }
+
+  dismiss() {
+    this.confirmModerationModal.show(
+      this.task,
+      'Dismiss from moderation',
+      'This task will be removed from moderation and will not get a follow up. This will not affect how many tasks from this tutor are selected for moderation.',
+      'dismiss_ok',
+      true,
+      (applyToAll) => {
+        this.moderateTask('dismiss_ok', applyToAll);
+      },
+    );
+  }
+
+  snooze() {
+    this.confirmModerationModal.show(
+      this.task,
+      'Snooze task',
+      'This task will be hidden from moderation until the tutor leaves new feedback. This will not affect how many tasks from this tutor are selected for moderation.',
+      'snooze',
+      false,
+      (applyToAll) => {
+        this.moderateTask('snooze', applyToAll);
+      },
+    );
+  }
+
+  private moderateTask(action: FeedbackModerationActionType, applyToAll: boolean = false) {
+    this.task.moderateFeedback(action, applyToAll).subscribe({
+      next: (_response) => {
+        if (applyToAll) {
+          this.alertService.success(
+            `Tasks moderated successfully. Refresh the list to view the updated queue.`,
+            6000,
+          );
+        } else {
+          this.alertService.success(`Task moderated successfully`, 2000);
+        }
+
+        this.setModerated(this.task);
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to moderate task: ${error}`, 6000);
+      },
+    });
+  }
+
+  private setModerated(task: Task) {
+    this.moderated.set(task, true);
+  }
+
+  public isModerated(task: Task): boolean {
+    return this.moderated.get(task);
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component.html b/src/app/units/states/tasks/inbox/directives/staff-task-list/batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component.html
new file mode 100644
index 0000000000..6413191bdd
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/staff-task-list/batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component.html
@@ -0,0 +1,36 @@
+<h2 mat-dialog-title>Upload Batch Feedback Zip &mdash; {{ taskLabel }}</h2>
+
+<mat-dialog-content class="flex flex-col gap-2.5">
+  <div class="flex items-start gap-2">
+    <mat-icon class="mt-px">fact_check</mat-icon>
+    <div>
+      <p class="m-0">
+        Prepare a batch feedback zip for <span>{{ taskLabel }}</span
+        >.
+      </p>
+      <p class="m-0">
+        Include a <code>marks.csv</code> file and a folder for each student using their username.
+      </p>
+    </div>
+  </div>
+
+  <div>
+    <p class="m-0">Each username folder should contain a PDF named after the student username.</p>
+    <p class="m-0">We expect files to follow the pattern <code>username/username.pdf</code>.</p>
+  </div>
+
+  <div>
+    <p class="m-0">marks.csv Columns</p>
+    <p class="m-0">
+      <code>Student Username</code> | <code>Student ID</code> | <code>Status</code> |
+      <code>Comment</code>
+    </p>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button color="primary" mat-flat-button type="button" (click)="continueToUpload()">
+    Upload Zip
+  </button>
+  <button mat-button type="button" (click)="close()">Close</button>
+</mat-dialog-actions>
diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component.ts b/src/app/units/states/tasks/inbox/directives/staff-task-list/batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component.ts
new file mode 100644
index 0000000000..3ff4d4f302
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/staff-task-list/batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component.ts
@@ -0,0 +1,38 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {TaskDefinition, Unit} from 'src/app/api/models/doubtfire-model';
+
+export interface BatchFeedbackWorkflowDialogData {
+  unit: Unit;
+  taskDefinition?: TaskDefinition;
+  myStudentsOnly?: boolean;
+}
+
+@Component({
+  selector: 'f-batch-feedback-workflow-dialog',
+  templateUrl: './batch-feedback-workflow-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class BatchFeedbackWorkflowDialogComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: BatchFeedbackWorkflowDialogData,
+    private dialogRef: MatDialogRef<BatchFeedbackWorkflowDialogComponent, {openUpload?: boolean}>,
+  ) {}
+
+  get taskLabel(): string {
+    if (!this.data.taskDefinition) {
+      return this.data.unit.code;
+    }
+
+    return `${this.data.taskDefinition.abbreviation} ${this.data.taskDefinition.name}`;
+  }
+
+  continueToUpload(): void {
+    this.dialogRef.close({openUpload: true});
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html
index bb9c9ba8ce..ec0a36972e 100644
--- a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html
+++ b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html
@@ -1,66 +1,69 @@
 <!-- The search bar template -->
 <ng-template #OmnisearchTemplate let-collapsable="collapsable" let-mobile="mobile">
-  <div class="omnisearch rounded-t-2xl md:rounded-2xl" [ngClass]="{ expanded: showSearchOptions, mobile: mobile }">
+  <div
+    class="omnisearch rounded-t-2xl md:rounded-2xl"
+    [ngClass]="{expanded: showSearchOptions, mobile: mobile}"
+  >
     <div class="flex items-center">
-      <button mat-icon-button aria-label="Search Icon" disabled class="flex-none flex items-center">
-        <mat-icon class="flex items-center" disabled>search</mat-icon>
-      </button>
+      <mat-icon aria-hidden="true" class="flex items-center">search</mat-icon>
 
       <div class="grow">
         <input
-          class="search w-full"
+          aria-label="Search the inbox"
           autocomplete="off"
+          class="search w-full"
+          placeholder="Search Inbox"
           spellcheck="false"
           type="text"
-          placeholder="Search Inbox"
           [(ngModel)]="filters.studentName"
           (ngModelChange)="applyFilters()"
         />
       </div>
       @if (collapsable) {
-      <button
-        class="flex-none flex items-center"
-        matTooltip="Filter options"
-        matTooltipPosition="below"
-        matTooltipShowDelay="400"
-        mat-icon-button
-        aria-label="Inbox search dropdown"
-        (click)="showSearchOptions = !showSearchOptions"
-      >
-        <mat-icon>{{ showSearchOptions ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>
-      </button>
-      } @if (!isTaskDefMode) {
-      <button
-        class="flex-none flex items-center"
-        matTooltip="Refresh the task inbox"
-        matTooltipPosition="below"
-        matTooltipShowDelay="400"
-        matTooltip
-        mat-icon-button
-        aria-label="Refresh Inbox"
-        (click)="refreshTasks()"
-      >
-        <mat-icon>refresh</mat-icon>
-      </button>
-      } @if (isTaskDefMode) {
-      <button
-        class="flex items-center"
-        mat-icon-button
-        matTooltip="More options"
-        matTooltipPosition="below"
-        matTooltipShowDelay="400"
-        [matMenuTriggerFor]="menu"
-        aria-label="Menu to download submission files"
-      >
-        <mat-icon>more_vert</mat-icon>
-      </button>
+        <button
+          aria-label="Inbox search dropdown"
+          class="flex flex-none items-center"
+          mat-icon-button
+          matTooltip="Filter options"
+          matTooltipPosition="below"
+          matTooltipShowDelay="400"
+          (click)="showSearchOptions = !showSearchOptions"
+        >
+          <mat-icon>{{ showSearchOptions ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>
+        </button>
+      }
+      @if (!isTaskDefMode) {
+        <button
+          aria-label="Refresh Inbox"
+          class="flex flex-none items-center"
+          mat-icon-button
+          matTooltip="Refresh the task inbox"
+          matTooltipPosition="below"
+          matTooltipShowDelay="400"
+          (click)="refreshTasks()"
+        >
+          <mat-icon>refresh</mat-icon>
+        </button>
+      }
+      @if (isTaskDefMode) {
+        <button
+          aria-label="Menu to download submission files"
+          class="flex items-center"
+          mat-icon-button
+          matTooltip="More options"
+          matTooltipPosition="below"
+          matTooltipShowDelay="400"
+          [matMenuTriggerFor]="menu"
+        >
+          <mat-icon>more_vert</mat-icon>
+        </button>
       }
       <mat-menu #menu="matMenu">
         <button
+          aria-label="Refresh Inbox"
           mat-menu-item
           matTooltip="Refresh the task inbox"
           matTooltipPosition="above"
-          aria-label="Refresh Inbox"
           (click)="refreshTasks()"
         >
           <mat-icon>refresh</mat-icon>
@@ -70,10 +73,24 @@
           <mat-icon>download</mat-icon>
           <span>Bulk Export Submission PDFs</span>
         </button>
-        <button mat-menu-item (click)="downloadSubmissions()">
+        <button mat-menu-item (click)="downloadSubmissionFiles()">
           <mat-icon>download</mat-icon>
           <span>Bulk Export Submission Files</span>
         </button>
+        @if (unitRole?.role === 'Convenor') {
+          <button mat-menu-item (click)="openBatchFeedbackDialog()">
+            <mat-icon>upload_file</mat-icon>
+            <span>Upload Batch Feedback Zip</span>
+          </button>
+        }
+        <button
+          mat-menu-item
+          [disabled]="!this.filters?.taskDefinition?.hasJplagReport"
+          (click)="downloadJPLAGReport()"
+        >
+          <mat-icon>download</mat-icon>
+          <span>Download JPLAG Report</span>
+        </button>
       </mat-menu>
     </div>
     <mat-accordion>
@@ -85,26 +102,28 @@
       >
         <form class="search-options">
           <div class="task-definition">
-            <div class="flex flex-row justify-between items-center">
+            <div class="flex flex-row items-center justify-between">
               <mat-form-field class="flex-1">
                 <mat-label>Task</mat-label>
                 <mat-select
-                  [(ngModel)]="filters.taskDefinitionIdSelected"
                   name="taskDefID"
+                  [(ngModel)]="filters.taskDefinitionIdSelected"
                   (selectionChange)="taskDefinitionIdChanged()"
                 >
-                  <mat-option value="" [hidden]="taskData.taskDefMode">All Task Definitions</mat-option>
+                  <mat-option value="" [hidden]="taskData.taskDefMode"
+                    >All Task Definitions</mat-option
+                  >
                   @for (td of unit.taskDefinitionCache.values | async; track td) {
-                  <mat-option [value]="td.id">
-                    <span class="truncate">{{ td.abbreviation + ' - ' + td.name }}</span>
-                  </mat-option>
+                    <mat-option [value]="td.id">
+                      <span class="truncate">{{ td.abbreviation + ' - ' + td.name }}</span>
+                    </mat-option>
                   }
                 </mat-select>
               </mat-form-field>
               <button
-                [disabled]="filters.taskDefinitionIdSelected || !filters.taskDefinitionIdSelected === ''"
-                mat-icon-button
                 aria-label="Sort by task definition icon"
+                mat-icon-button
+                [disabled]="!!filters.taskDefinitionIdSelected"
                 (click)="toggleTaskDefSort()"
               >
                 <mat-icon>{{ states[taskDefSort].icon }}</mat-icon>
@@ -112,22 +131,51 @@
             </div>
           </div>
           <!--/task-definition-->
-          <div class="flex flex-row justify-between items-center">
+          <div class="flex flex-row items-center justify-between">
             <mat-form-field class="flex-1">
               <mat-label>Students</mat-label>
               <mat-select
-                [(ngModel)]="filters.tutorialIdSelected"
                 name="tutorial"
-                (selectionChange)="tutorialIdChanged()"
+                [(ngModel)]="filters.tutorialIdSelected"
+                (selectionChange)="tutorialIdChanged(true, $event.value)"
               >
                 @for (t of studentFilter; track t) {
-                <mat-option [value]="t.id">
-                  <span class="truncate">{{ t.inboxDescription }}</span>
-                </mat-option>
+                  <mat-option [value]="t.id">
+                    <span class="truncate">{{ t.inboxDescription }}</span>
+                  </mat-option>
                 }
               </mat-select>
             </mat-form-field>
-            <button disabled mat-icon-button aria-label="Sort by tutorial icon" (click)="toggleTutorialSort()">
+            <button
+              aria-label="Sort by tutorial icon"
+              disabled
+              mat-icon-button
+              (click)="toggleTutorialSort()"
+            >
+              <mat-icon>{{ states[tutorialSort].icon }}</mat-icon>
+            </button>
+          </div>
+          <div class="flex flex-row items-center justify-between">
+            <mat-form-field class="flex-1">
+              <mat-label>Tutors</mat-label>
+              <mat-select
+                name="tutor"
+                [disabled]="filters.tutorialIdSelected !== 'all'"
+                [(ngModel)]="filters.unitRoleIdSelected"
+                (selectionChange)="unitRoleIdChanged()"
+              >
+                @for (g of tutorGroups; track g.label) {
+                  <mat-optgroup [label]="g.label">
+                    @for (t of g.options; track t.id) {
+                      <mat-option [value]="t.id">
+                        <span class="truncate">{{ t.inboxDescription }}</span>
+                      </mat-option>
+                    }
+                  </mat-optgroup>
+                }
+              </mat-select>
+            </mat-form-field>
+            <button aria-label="Sort by tutor icon" disabled mat-icon-button>
               <mat-icon>{{ states[tutorialSort].icon }}</mat-icon>
             </button>
           </div>
@@ -140,74 +188,159 @@
 
 <!-- Narrow width search dialog template-->
 <ng-template #searchDialog>
-  <ng-container *ngTemplateOutlet="OmnisearchTemplate; context: { collapsable: false, mobile: true }"></ng-container>
-  <div mat-dialog-actions align="end">
+  <ng-container
+    *ngTemplateOutlet="OmnisearchTemplate; context: {collapsable: false, mobile: true}"
+  ></ng-container>
+  <div align="end" mat-dialog-actions>
     <button mat-button [mat-dialog-close]>OK</button>
   </div>
 </ng-template>
 
 <!-- Actual task-inbox -->
-<div class="task-inbox flex flex-col justify-normal" [ngClass]="isNarrow ? 'narrow-width' : 'full-width'">
+<div
+  class="task-inbox flex flex-col justify-normal"
+  [ngClass]="isNarrow ? 'narrow-width' : 'full-width'"
+>
   <div class="openSearchDialog" [hidden]="!isNarrow">
-    <button mat-icon-button (click)="openDialog()" aria-label="Seach Button">
+    <button aria-label="Seach Button" mat-icon-button (click)="openDialog()">
       <mat-icon>search</mat-icon>
     </button>
   </div>
 
   @if (!isNarrow) {
-  <div>
-    <ng-container *ngTemplateOutlet="OmnisearchTemplate; context: { collapsable: true, mobile: false }"></ng-container>
-  </div>
+    <div>
+      <ng-container
+        *ngTemplateOutlet="OmnisearchTemplate; context: {collapsable: true, mobile: false}"
+      ></ng-container>
+    </div>
   }
 
-  <div class="center-task-list" [hidden]="!loading || isNarrow">
-    <mat-icon>hourglass_bottom</mat-icon>
-  </div>
+  @if (loading) {
+    <div class="min-h-0 flex-1 overflow-hidden" [ngClass]="isNarrow ? 'pt-0' : 'pt-[10px]'">
+      @for (row of skeletonRows; track row) {
+        <div
+          class="flex h-[60px] items-center"
+          [ngClass]="isNarrow ? 'justify-center gap-0 px-[5px]' : 'gap-[10px] pr-[8px] pl-[6px]'"
+        >
+          <ngx-skeleton-loader
+            appearance="circle"
+            class="flex-none"
+            [class.hidden]="isNarrow"
+            [theme]="{width: '8px', height: '8px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            appearance="circle"
+            [theme]="{width: '30px', height: '30px', margin: '0'}"
+          ></ngx-skeleton-loader>
+          <div class="min-w-0 flex-1" [hidden]="isNarrow">
+            <ngx-skeleton-loader
+              [theme]="{
+                height: '10px',
+                width: '78%',
+                'border-radius': '999px',
+                margin: '6px 0',
+              }"
+            ></ngx-skeleton-loader>
+            <ngx-skeleton-loader
+              [theme]="{
+                height: '10px',
+                width: '56%',
+                'border-radius': '999px',
+                margin: '6px 0',
+              }"
+            ></ngx-skeleton-loader>
+          </div>
+          <ngx-skeleton-loader
+            appearance="circle"
+            [hidden]="isNarrow"
+            [theme]="{width: '32px', height: '32px', margin: '0'}"
+          ></ngx-skeleton-loader>
+        </div>
+      }
+    </div>
+  }
 
-  <div class="center-task-list" [hidden]="loading || filteredTasks?.length !== 0 || isNarrow">
-    <mat-icon>done_all</mat-icon>
+  <div
+    class="center-task-list text-center"
+    role="status"
+    [hidden]="loading || filteredTasks?.length !== 0"
+  >
+    <mat-icon aria-hidden="true">done_all</mat-icon>
+    <p [class.sr-only]="isNarrow">No tasks match these filters.</p>
   </div>
-
   <!--/search-options-->
-  @if (filteredTasks) {
-  <cdk-virtual-scroll-viewport class="tasks-viewport scrollable" itemSize="60">
-    <mat-list class="m-0 p-0">
-      <mat-list-item
-        class="clearfix"
-        *cdkVirtualFor="let task of filteredTasks; templateCacheSize: 0"
-        style="padding: 0; height: 60px"
-      >
-        @if (task) {
-        <div
-          class="w-full"
-          id="{{ task.taskKeyToIdString() }}"
-          [ngClass]="{
-            selected: isSelectedTask(task),
-            'item-content': task.statusClass()
-          }"
+  @if (filteredTasks && !loading) {
+    <cdk-virtual-scroll-viewport class="tasks-viewport scrollable" itemSize="60">
+      @if (filteredTasks.length) {
+        <div class="mt-2.5 w-full text-center text-gray-400">{{ filteredTasks.length }} Tasks</div>
+      }
+      <mat-list class="m-0 p-0">
+        <mat-list-item
+          *cdkVirtualFor="let task of filteredTasks"
+          class="clearfix"
+          style="padding: 0; height: 60px"
         >
-          <div
-            (click)="setSelectedTask(task)"
-            class="inbox-entry flex items-center"
-            [ngClass]="{ hover: task.hover }"
-            (mouseover)="task.hover = allowHover"
-            (mouseout)="task.hover = task.optionsOpened"
-          >
-            <span
-              class="notification"
+          @if (task) {
+            <div
+              class="w-full"
+              id="{{ task.taskKeyToIdString() }}"
               [ngClass]="{
-                active: task.numNewComments > 0 || task.similaritiesDetected,
-                similarities: task.similaritiesDetected
+                selected: isSelectedTask(task),
+                'item-content': task.statusClass(),
               }"
-            ></span>
-            <user-icon class="self-center" [user]="task.project.student" [size]="30"> </user-icon>
-            <div class="task-list-data truncate flex-1" [hidden]="isNarrow">
-              <h4 class="student-name">{{ task.project.student.name }}</h4>
-              <div class="task-details truncate">
-                {{ task.definition.abbreviation }} -
-                {{ task.definition.name }}
-              </div>
-              <!-- <div class="muted" [hidden]="!isSelectedTask(task)">
+            >
+              <div
+                class="inbox-entry flex items-center"
+                [ngClass]="{hover: rowActionsShown(task)}"
+                (click)="setSelectedTask(task)"
+                (mouseout)="hideTaskActions(task)"
+                (mouseover)="showTaskActionsForPointer(task)"
+              >
+                <span
+                  class="notification"
+                  [ngClass]="{
+                    active: task.numNewComments > 0 || task.similaritiesDetected,
+                    similarities: task.similaritiesDetected,
+                  }"
+                ></span>
+                <user-icon class="self-center" [size]="30" [user]="task.project.student">
+                </user-icon>
+                <div class="task-list-data flex-1 truncate" [hidden]="isNarrow">
+                  <h4 class="student-name flex min-w-0 items-center gap-0.5">
+                    @if (task.moderationType === 'escalation') {
+                      <mat-icon
+                        class="shrink-0 text-amber-500"
+                        matTooltip="This task has been escalated by the student"
+                        >gavel</mat-icon
+                      >
+                    }
+                    @if (getWarningIcon(task) === 'warning') {
+                      <mat-icon
+                        class="shrink-0 text-amber-500"
+                        matTooltip="Feedback due soon — please review before it escalates."
+                      >
+                        warning
+                      </mat-icon>
+                    } @else if (getWarningIcon(task) === 'overflow') {
+                      <mat-icon
+                        class="shrink-0 text-red-500"
+                        [matTooltip]="
+                          'Feedback overdue by ' +
+                          task.daysSinceSubmission() +
+                          ' days — this task has been escalated for urgent review.'
+                        "
+                      >
+                        watch_later
+                      </mat-icon>
+                    }
+
+                    <span class="truncate">{{ task.project.student.displayName }}</span>
+                  </h4>
+                  <div class="task-details truncate">
+                    {{ task.definition.abbreviation }} -
+                    {{ task.definition.name }}
+                  </div>
+                  <!-- <div class="muted" [hidden]="!isSelectedTask(task)">
                 <p class="mat-small">
                   {{ task.shortTutorialDescription() }}
                 </p>
@@ -216,60 +349,76 @@ <h4 class="student-name">{{ task.project.student.name }}</h4>
                   Assessed {{ task.timesAssessed }} time{{ task.timesAssessed === 1 ? '' : 's' }}
                 </p>
               </div> -->
-            </div>
-            @if (task.hasGrade()) {
-            <div matTooltip="The grade assigned to the submission" matTooltipPosition="above">
-              <mat-chip-option style="margin-right: 6px" [hidden]="isNarrow">{{ task.gradeDesc() }} </mat-chip-option>
-            </div>
-            }
-            <status-icon
-              [hidden]="isNarrow"
-              matBadge="{{ task.qualityPts }}/{{ task.definition.maxQualityPts }}"
-              [matBadgeHidden]="!task.hasQualityPoints() || !task.qualityPts"
-              matBadgePosition="before"
-              [status]="task.status"
-              class="ml-3"
-            ></status-icon>
-            @if (!isTaskDefMode) {
-            <div class="overflow" [hidden]="isNarrow">
-              <button [hidden]="task.hover" mat-icon-button aria-label="task-overflow">
-                <!-- <mat-icon class="warn-icon" *ngIf="task.similaritiesDetected">remove_red_eye</mat-icon> -->
-
-                @if (task.pinned) {
-                <div class="pin-container">
-                  <mat-icon>push_pin</mat-icon>
                 </div>
+                @if (task.hasGrade()) {
+                  <div matTooltip="The grade assigned to the submission" matTooltipPosition="above">
+                    <mat-chip-option style="margin-right: 6px" [hidden]="isNarrow"
+                      >{{ task.gradeDesc() }}
+                    </mat-chip-option>
+                  </div>
                 }
-              </button>
-              <button
-                [hidden]="!task.hover"
-                mat-icon-button
-                aria-label="task overflow"
-                [matMenuTriggerFor]="overflowMenu"
-                (menuOpened)="setSelectedTask(task); task.optionsOpened = true"
-                (menuClosed)="task.hover = false; task.optionsOpened = false"
-                matTooltip="Submission options"
-                matTooltipPosition="right"
-                matTooltipShowDelay="400"
-              >
-                <mat-icon>more_horiz</mat-icon>
-              </button>
-              <mat-menu #overflowMenu="matMenu" yPosition="below">
-                <button mat-menu-item (click)="togglePin(task)" class="flex items-center">
-                  <mat-icon class="mr-0"> {{ task.pinned ? 'remove_circle' : 'add_alert' }} </mat-icon>
-                  <span class="ml-5">{{ task.pinned ? 'Unpin from inbox' : 'Pin to inbox' }} </span>
-                </button>
-              </mat-menu>
+                <status-icon
+                  class="ml-2"
+                  matBadge="{{ task.qualityPts }}/{{ task.definition.maxQualityPts }}"
+                  matBadgePosition="before"
+                  [hidden]="isNarrow"
+                  [matBadgeHidden]="!task.hasQualityPoints()"
+                  [status]="task.status"
+                ></status-icon>
+                <div class="overflow" [hidden]="isNarrow">
+                  <!-- <mat-icon class="warn-icon" *ngIf="task.similaritiesDetected">remove_red_eye</mat-icon> -->
+
+                  <!--
+                    The pin says whether the task is pinned and has no action of its own, so
+                    it is not a button. As a button it was an unlabelled tab stop on every
+                    row, empty on the rows that were not pinned, and hiding it when the
+                    options button beside it took focus meant tab landed on it on the way in
+                    while shift-tab skipped it on the way back.
+                  -->
+                  @if (task.pinned) {
+                    <div
+                      aria-label="Pinned to your inbox"
+                      class="pin-container"
+                      role="img"
+                      [hidden]="rowActionsShown(task)"
+                    >
+                      <mat-icon>push_pin</mat-icon>
+                    </div>
+                  }
+                  <button
+                    aria-label="task overflow"
+                    class="task-options"
+                    mat-icon-button
+                    matTooltip="Submission options"
+                    matTooltipPosition="right"
+                    matTooltipShowDelay="400"
+                    [matMenuTriggerFor]="overflowMenu"
+                    (blur)="hideTaskActionsForFocus(task)"
+                    (focus)="showTaskActionsForFocus(task)"
+                    (menuClosed)="task.hover = false; task.optionsOpened = false"
+                    (menuOpened)="setSelectedTask(task); task.optionsOpened = true"
+                  >
+                    <mat-icon>more_horiz</mat-icon>
+                  </button>
+                  <mat-menu #overflowMenu="matMenu" yPosition="below">
+                    <button class="flex items-center" mat-menu-item (click)="togglePin(task)">
+                      <mat-icon class="mr-0">
+                        {{ task.pinned ? 'remove_circle' : 'add_alert' }}
+                      </mat-icon>
+                      <span class="ml-3"
+                        >{{ task.pinned ? 'Unpin from inbox' : 'Pin to inbox' }}
+                      </span>
+                    </button>
+                  </mat-menu>
+                </div>
+              </div>
+              <!--/badges-->
             </div>
-            }
-          </div>
-          <!--/badges-->
-        </div>
-        }
-      </mat-list-item>
+          }
+        </mat-list-item>
 
-      <!--/task-->
-    </mat-list>
-  </cdk-virtual-scroll-viewport>
+        <!--/task-->
+      </mat-list>
+    </cdk-virtual-scroll-viewport>
   }
 </div>
diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.scss b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.scss
index 2b8b37d357..b3c9f839c5 100644
--- a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.scss
+++ b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.scss
@@ -2,20 +2,27 @@
 @use '@angular/material' as mat;
 
 // $my-palette: mat.define-palette(mat.$indigo-palette);
-@import '../../../../../../../theme.scss';
-@import '../../../../../../../styles/mixins/task-list.scss';
-@import '../../../../../../../styles/mixins/scrollable.scss';
+@use 'theme' as *;
+@use 'styles/mixins/task-list' as *;
+@use 'styles/mixins/scrollable' as *;
 
-$my-palette: mat.define-palette($md-formatif);
+$my-palette: mat.m2-define-palette($md-formatif);
 
 :host {
+  // THM-M03: rgba(black) tints read as "hover/selected" against a light surface but
+  // vanish (or invert the wrong way) against a dark one, so this needs an explicit
+  // dark override rather than a token substitution.
   --background-gray: rgba(0, 0, 0, 0.04);
   padding-right: 8px;
-  border-right-color: rgba(0, 0, 0, 0.1);
+  border-right-color: var(--ot-color-divider, rgba(0, 0, 0, 0.1));
   border-right-style: solid;
   border-right-width: 1px;
 }
 
+:host-context([data-ot-theme='dark']) {
+  --background-gray: rgba(255, 255, 255, 0.06);
+}
+
 ::ng-deep .cdk-virtual-scroll-content-wrapper {
   width: 100%;
 }
@@ -29,15 +36,17 @@ $my-palette: mat.define-palette($md-formatif);
   }
 }
 
-$warn-color: #f44336;
+$warn-color: var(--ot-color-error, #f44336);
 
 .pin-container {
   display: flex;
   justify-content: center;
   align-items: center;
+  // Fills the .overflow box now that it is no longer wrapped in a 40px icon button.
+  height: 100%;
 
   .mat-icon {
-    color: #bcc0c4;
+    color: var(--ot-color-text-muted, #bcc0c4);
   }
 }
 
@@ -88,7 +97,10 @@ $warn-color: #f44336;
   .search {
     background-color: transparent;
     border: hidden;
-    outline: none;
+  }
+  .search:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
   }
 
   .mdc-icon-button {
@@ -138,7 +150,7 @@ user-icon {
 }
 
 .muted {
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--ot-color-text-muted, rgba(0, 0, 0, 0.5));
 }
 
 .task-list-data {
@@ -160,6 +172,31 @@ user-icon {
   width: 40px;
   margin-right: -10px;
   margin-left: -10px;
+  // Holds its size while the pin indicator is swapped out, because the options button
+  // that replaces it is taken out of the flow so it can sit in the tab order unseen.
+  height: 40px;
+  position: relative;
+}
+
+// The submission options button used to be removed from the DOM until the row was
+// hovered, which put it out of reach of the keyboard. It now always sits in the tab
+// order, stacked over the pin indicator, and is only made visible when the row is
+// hovered or the button itself has focus.
+.task-options {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+// The :focus arm is the safety net. rowActionsShown() should already have put the hover
+// class on the row by the time the button is focused, but focus must never land on
+// something the user cannot see, so the button reveals itself regardless.
+.inbox-entry.hover .task-options,
+.task-options:focus {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .mat-mdc-list-item {
@@ -177,11 +214,11 @@ user-icon {
   background-color: transparent;
 
   &.active {
-    background-color: mat.get-color-from-palette($my-palette, 500);
+    background-color: mat.m2-get-color-from-palette($my-palette, 500);
   }
 
   &.active.similarities {
-    background-color: #f44336;
+    background-color: $warn-color;
   }
 }
 
@@ -215,7 +252,7 @@ user-icon {
   p {
     margin-bottom: 0;
     padding: 0;
-    color: gray;
+    color: var(--ot-color-text-muted, gray);
   }
 }
 
@@ -230,6 +267,6 @@ user-icon {
 
   .mat-icon {
     // font-size: 50px;
-    color: rgba(0, 0, 0, 0.2);
+    color: var(--ot-color-divider, rgba(0, 0, 0, 0.2));
   }
 }
diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.spec.ts b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.spec.ts
index fbf1d43a79..ac950d7263 100644
--- a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.spec.ts
+++ b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.spec.ts
@@ -1,63 +1,393 @@
-// import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-// import { MatDialogModule } from '@angular/material/dialog';
-// import { MatMenuModule } from '@angular/material/menu';
-// import { alertService, currentUser, groupService, taskDefinition, Unit } from 'src/app/ajs-upgraded-providers';
-
-// import { StaffTaskListComponent } from './staff-task-list.component';
-
-// describe('StaffTaskListComponent', () => {
-//   let component: StaffTaskListComponent;
-//   let fixture: ComponentFixture<StaffTaskListComponent>;
-//   let taskDefinitionStub: jasmine.SpyObj<any>;
-//   let unitStub: jasmine.SpyObj<any>;
-//   let currentUserStub: jasmine.SpyObj<any>;
-//   let groupServiceStub: jasmine.SpyObj<any>;
-//   let alertServiceStub: jasmine.SpyObj<any>;
-
-//   beforeEach(
-//     waitForAsync(() => {
-//       unitStub = {
-//         tasksForDefinition: [],
-//       };
-//       currentUserStub = {
-//         profile: { name: 'Bob Marley' },
-//       };
-
-//       TestBed.configureTestingModule({
-//         declarations: [StaffTaskListComponent],
-//         imports: [
-//           MatDialogModule,
-//           MatMenuModule
-//         ],
-//         providers: [
-//           { provide: taskDefinition, useValue: taskDefinitionStub },
-//           { provide: currentUser, useValue: currentUserStub },
-//           { provide: groupService, useValue: groupServiceStub },
-//           { provide: alertService, useValue: alertServiceStub },
-//         ],
-//       }).compileComponents();
-//     })
-//   );
-
-//   beforeEach(() => {
-//     fixture = TestBed.createComponent(StaffTaskListComponent);
-//     component = fixture.componentInstance;
-
-//     component.taskData = {
-//       selectedTask: null,
-//     };
-//     component.unit = {
-//       tutorialsForUserName: () => [],
-//       tutorials: [],
-//     };
-//     component.unitRole = {
-//       role: 'Convenor',
-//     };
-
-//     fixture.detectChanges();
-//   });
-
-//   it('should create', () => {
-//     expect(component).toBeTruthy();
-//   });
-// });
+import {HotkeysService} from '@ngneat/hotkeys';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {CommonModule} from '@angular/common';
+import {NO_ERRORS_SCHEMA, SimpleChange} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {MatDialog} from '@angular/material/dialog';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSelectModule} from '@angular/material/select';
+import {ActivatedRoute, Router} from '@angular/router';
+import {EMPTY, Subject, of} from 'rxjs';
+import {UserService} from 'src/app/api/models/doubtfire-model';
+import {Task} from 'src/app/api/models/task';
+import {Unit} from 'src/app/api/models/unit';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {CsvResultModalService} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalService} from 'src/app/common/modals/csv-upload-modal/csv-upload-modal.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
+import {StaffTaskListComponent} from './staff-task-list.component';
+
+const hotkeysServiceStub = {
+  getHotkeys: () => [],
+  addShortcut: () => EMPTY,
+  removeShortcuts: () => {},
+};
+const emptyProvider = {};
+
+function unitStub(id: number, tutorialAbbreviation: string): Unit {
+  return {
+    id,
+    staff: [],
+    tutorials: [{id: id * 10, abbreviation: tutorialAbbreviation, description: 'Lab'}],
+    tutorialsForUserName: () => [],
+  } as unknown as Unit;
+}
+
+function unitRoleStub(id: number): UnitRole {
+  return {id, role: 'Convenor'} as unknown as UnitRole;
+}
+
+describe('StaffTaskListComponent', () => {
+  let component: StaffTaskListComponent;
+  let fixture: ComponentFixture<StaffTaskListComponent>;
+  let sourcedUnitIds: number[];
+
+  beforeEach(async () => {
+    sourcedUnitIds = [];
+
+    await TestBed.configureTestingModule({
+      declarations: [StaffTaskListComponent],
+      providers: [
+        {provide: SelectedTaskService, useValue: {setSelectedTask: () => {}}},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: FileDownloaderService, useValue: emptyProvider},
+        {provide: MatDialog, useValue: emptyProvider},
+        {provide: CsvUploadModalService, useValue: emptyProvider},
+        {provide: CsvResultModalService, useValue: emptyProvider},
+        {provide: UserService, useValue: {currentUser: {name: 'A Tutor'}}},
+        {provide: HotkeysService, useValue: hotkeysServiceStub},
+        {provide: Router, useValue: {navigate: () => {}}},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+        {provide: TaskDefinitionService, useValue: emptyProvider},
+        {provide: SidekiqProgressModalService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(StaffTaskListComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StaffTaskListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // The screen the header dropdown can actually leave stale. This ran only in task
+  // definition mode before, so the inbox kept the previous unit's list and tutors.
+  it('rebuilds its tasks and its student filter in inbox mode when the unit changes', () => {
+    const unitA = unitStub(1, 'LA1');
+    const unitB = unitStub(2, 'LB1');
+
+    component.unit = unitA;
+    component.unitRole = unitRoleStub(11);
+    component.filters = {};
+    component.taskData = {
+      source: (unit: Unit) => {
+        sourcedUnitIds.push(unit.id);
+        return of([]);
+      },
+      selectedTask: null,
+      taskKey: null,
+      onSelectedTaskChange: () => {},
+      taskDefMode: false,
+    };
+
+    component.ngOnInit();
+
+    expect(sourcedUnitIds).toEqual([1]);
+    expect(component.studentFilter.map((option) => option.abbreviation)).toContain('LA1');
+
+    component.unit = unitB;
+    component.unitRole = unitRoleStub(12);
+    component.filters = {};
+    component.ngOnChanges({unit: new SimpleChange(unitA, unitB, false)});
+
+    expect(sourcedUnitIds).toEqual([1, 2]);
+    expect(component.studentFilter.map((option) => option.abbreviation)).toContain('LB1');
+    expect(component.studentFilter.map((option) => option.abbreviation)).not.toContain('LA1');
+  });
+
+  // The parent hands down a partial filters object on every unit change, which used to
+  // wipe the defaults this component installs for itself.
+  it('reinstates its own filter defaults when the parent replaces the filters object', () => {
+    const unitA = unitStub(1, 'LA1');
+    const unitB = unitStub(2, 'LB1');
+
+    component.unit = unitA;
+    component.unitRole = unitRoleStub(11);
+    component.filters = {};
+    component.taskData = {
+      source: () => of([]),
+      selectedTask: null,
+      taskKey: null,
+      onSelectedTaskChange: () => {},
+      taskDefMode: false,
+    };
+
+    component.ngOnInit();
+
+    component.unit = unitB;
+    component.unitRole = unitRoleStub(12);
+    component.filters = {};
+    component.ngOnChanges({unit: new SimpleChange(unitA, unitB, false)});
+
+    expect(component.filters.tutorialIdSelected).toBe('all');
+    expect(component.filters.unitRoleIdSelected).toBe('all');
+  });
+
+  it('cancels the previous task query when the unit changes', () => {
+    const unitA = unitStub(1, 'LA1');
+    const unitB = unitStub(2, 'LB1');
+    const requests: Map<number, Subject<never[]>> = new Map();
+
+    component.unit = unitA;
+    component.unitRole = unitRoleStub(11);
+    component.filters = {};
+    component.taskData = {
+      source: (unit: Unit) => {
+        const request: Subject<never[]> = new Subject();
+        requests.set(unit.id, request);
+        return request;
+      },
+      selectedTask: null,
+      taskKey: null,
+      onSelectedTaskChange: () => {},
+      taskDefMode: false,
+    };
+
+    component.ngOnInit();
+
+    component.unit = unitB;
+    component.unitRole = unitRoleStub(12);
+    component.filters = {};
+    component.ngOnChanges({unit: new SimpleChange(unitA, unitB, false)});
+
+    requests.get(unitA.id)?.next([]);
+    expect(component.loading).toBe(true);
+
+    requests.get(unitB.id)?.next([]);
+    expect(component.loading).toBe(false);
+  });
+
+  describe('row actions', () => {
+    let task: Task;
+
+    beforeEach(() => {
+      task = {id: 4, hover: false, optionsOpened: false} as Task;
+    });
+
+    it('reveals the row actions when the pointer is over the row', () => {
+      component.showTaskActionsForPointer(task);
+
+      expect(component.rowActionsShown(task)).toBe(true);
+    });
+
+    it('leaves the row actions alone on a device that has opted out of hover', () => {
+      component.allowHover = false;
+
+      component.showTaskActionsForPointer(task);
+
+      expect(component.rowActionsShown(task)).toBe(false);
+    });
+
+    it('reveals the row actions when the options button takes keyboard focus', () => {
+      component.showTaskActionsForFocus(task);
+
+      expect(component.rowActionsShown(task)).toBe(true);
+    });
+
+    it('still reveals the row actions on focus where hover is not available', () => {
+      component.allowHover = false;
+
+      component.showTaskActionsForFocus(task);
+
+      expect(component.rowActionsShown(task)).toBe(true);
+    });
+
+    it('hides the row actions again once focus leaves', () => {
+      component.showTaskActionsForFocus(task);
+      component.hideTaskActionsForFocus(task);
+
+      expect(component.rowActionsShown(task)).toBe(false);
+    });
+
+    it('keeps the row actions up while the overflow menu holds the focus', () => {
+      component.showTaskActionsForFocus(task);
+      task.optionsOpened = true;
+      component.hideTaskActionsForFocus(task);
+
+      expect(component.rowActionsShown(task)).toBe(true);
+    });
+
+    it('holds only one row open at a time', () => {
+      const other = {id: 5, hover: false, optionsOpened: false} as Task;
+
+      component.showTaskActionsForFocus(task);
+      component.showTaskActionsForFocus(other);
+
+      expect(component.rowActionsShown(task)).toBe(false);
+      expect(component.rowActionsShown(other)).toBe(true);
+    });
+
+    it('does not let a late blur close a row another row already claimed', () => {
+      const other = {id: 5, hover: false, optionsOpened: false} as Task;
+
+      component.showTaskActionsForFocus(task);
+      component.showTaskActionsForFocus(other);
+      component.hideTaskActionsForFocus(task);
+
+      expect(component.rowActionsShown(other)).toBe(true);
+    });
+
+    // The regression this pair guards: blur used to run the same handler as mouseout, so
+    // tabbing off the options button faded it out from under a pointer still on the row.
+    it('keeps the row actions up when focus leaves but the pointer is still on the row', () => {
+      component.showTaskActionsForPointer(task);
+      component.showTaskActionsForFocus(task);
+      component.hideTaskActionsForFocus(task);
+
+      expect(component.rowActionsShown(task)).toBe(true);
+    });
+
+    it('keeps the row actions up when the pointer leaves but focus is still on the button', () => {
+      component.showTaskActionsForPointer(task);
+      component.showTaskActionsForFocus(task);
+      component.hideTaskActions(task);
+
+      expect(component.rowActionsShown(task)).toBe(true);
+    });
+
+    it('closes the row only once both the pointer and the keyboard have left', () => {
+      component.showTaskActionsForPointer(task);
+      component.showTaskActionsForFocus(task);
+      component.hideTaskActions(task);
+      component.hideTaskActionsForFocus(task);
+
+      expect(component.rowActionsShown(task)).toBe(false);
+    });
+  });
+
+  it('previousTask does not throw before the task queue has loaded', () => {
+    component.filteredTasks = null;
+    expect(() => component.previousTask()).not.toThrow();
+  });
+
+  it('previousTask selects nothing when no task is selected', () => {
+    vi.spyOn(component, 'isSelectedTask').mockReturnValue(false);
+    const setSelected = vi.spyOn(component, 'setSelectedTask').mockImplementation(() => {});
+    component.filteredTasks = [{}, {}] as unknown as Task[];
+
+    component.previousTask();
+
+    expect(setSelected).not.toHaveBeenCalled();
+  });
+});
+
+describe('StaffTaskListComponent rendered empty state', () => {
+  let fixture: ComponentFixture<StaffTaskListComponent>;
+  let component: StaffTaskListComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [StaffTaskListComponent],
+      imports: [CommonModule, FormsModule, MatMenuModule, MatSelectModule, ScrollingModule],
+      providers: [
+        {provide: SelectedTaskService, useValue: {setSelectedTask: () => {}}},
+        {provide: AlertService, useValue: emptyProvider},
+        {provide: FileDownloaderService, useValue: emptyProvider},
+        {provide: MatDialog, useValue: emptyProvider},
+        {provide: CsvUploadModalService, useValue: emptyProvider},
+        {provide: CsvResultModalService, useValue: emptyProvider},
+        {provide: UserService, useValue: {currentUser: {name: 'A Tutor'}}},
+        {provide: HotkeysService, useValue: hotkeysServiceStub},
+        {provide: Router, useValue: emptyProvider},
+        {provide: ActivatedRoute, useValue: emptyProvider},
+        {provide: TaskDefinitionService, useValue: emptyProvider},
+        {provide: SidekiqProgressModalService, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+    fixture = TestBed.createComponent(StaffTaskListComponent);
+    component = fixture.componentInstance;
+    component.unit = {
+      ...unitStub(1, 'LAB'),
+      taskDefinitionCache: {values: of([])},
+    } as unknown as Unit;
+    component.unitRole = unitRoleStub(1);
+    component.filters = {};
+    component.taskData = {
+      source: () => EMPTY,
+      selectedTask: null,
+      taskKey: null,
+      onSelectedTaskChange: () => {},
+      taskDefMode: false,
+    };
+    component.isNarrow = false;
+    fixture.detectChanges();
+  });
+
+  function emptyState(): HTMLElement {
+    return fixture.nativeElement.querySelector('.center-task-list');
+  }
+
+  function finishLoading(tasks: Task[] = []): void {
+    component.filteredTasks = tasks;
+    component.loading = false;
+    fixture.detectChanges();
+  }
+
+  it('shows descriptive text and a decorative icon after an empty response', () => {
+    finishLoading();
+    const status = emptyState();
+    expect(status.hidden).toBe(false);
+    expect(status.getAttribute('role')).toBe('status');
+    expect(status.querySelector('p').textContent).toBe('No tasks match these filters.');
+    expect(status.querySelector('p').classList.contains('sr-only')).toBe(false);
+    expect(status.querySelector('mat-icon').getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('keeps the empty state hidden while the list is loading', () => {
+    expect(emptyState().hidden).toBe(true);
+  });
+
+  it('keeps the empty state hidden before a result is available', () => {
+    component.loading = false;
+    fixture.detectChanges();
+    expect(emptyState().hidden).toBe(true);
+  });
+
+  it('hides the empty state when results are present', () => {
+    const task = {
+      id: 1,
+      taskKeyToIdString: () => 'task-1',
+      statusClass: () => 'need-help',
+      project: {student: {name: 'A Student'}},
+      definition: {abbreviation: '1.1P', name: 'A Task'},
+      daysSinceSubmission: () => 0,
+      hasGrade: () => false,
+      hasQualityPoints: () => false,
+    } as unknown as Task;
+    finishLoading([task]);
+    expect(emptyState().hidden).toBe(true);
+  });
+
+  it('keeps the full message accessible in the narrow icon-only sidebar', () => {
+    component.isNarrow = true;
+    finishLoading();
+    const status = emptyState();
+    expect(status.hidden).toBe(false);
+    expect(status.querySelector('p').textContent).toBe('No tasks match these filters.');
+    expect(status.querySelector('p').classList.contains('sr-only')).toBe(true);
+    expect(status.querySelector('p').hasAttribute('aria-hidden')).toBe(false);
+  });
+});
diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.ts b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.ts
index 95b498af20..951fbdba68 100644
--- a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.ts
+++ b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.ts
@@ -1,71 +1,88 @@
-/* eslint-disable no-shadow, @typescript-eslint/no-shadow */
-
+import {HotkeysService} from '@ngneat/hotkeys';
 import {
+  ChangeDetectionStrategy,
   Component,
-  OnInit,
   Input,
   OnChanges,
+  OnDestroy,
+  OnInit,
   SimpleChanges,
-  HostListener,
-  ViewChild,
   TemplateRef,
-  OnDestroy,
+  ViewChild,
 } from '@angular/core';
-import {TasksOfTaskDefinitionPipe} from 'src/app/common/filters/tasks-of-task-definition.pipe';
-import {TasksInTutorialsPipe} from 'src/app/common/filters/tasks-in-tutorials.pipe';
-import {TasksForInboxSearchPipe} from 'src/app/common/filters/tasks-for-inbox-search.pipe';
 import {MatDialog} from '@angular/material/dialog';
-import {Unit} from 'src/app/api/models/unit';
-import {UnitRole} from 'src/app/api/models/unit-role';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Observable, Subscription} from 'rxjs';
 import {
-  Tutorial,
-  UserService,
-  Task,
   Project,
+  Task,
   TaskDefinition,
+  Tutorial,
+  UserService,
 } from 'src/app/api/models/doubtfire-model';
-import {Observable} from 'rxjs';
-import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {SidekiqJob} from 'src/app/api/models/sidekiq-job';
+import {Unit} from 'src/app/api/models/unit';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
 import {AppInjector} from 'src/app/app-injector';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {TasksByTutorPipe} from 'src/app/common/filters/tasks-by-tutor.pipe';
+import {TasksForInboxSearchPipe} from 'src/app/common/filters/tasks-for-inbox-search.pipe';
+import {TasksInTutorialsPipe} from 'src/app/common/filters/tasks-in-tutorials.pipe';
+import {TasksOfTaskDefinitionPipe} from 'src/app/common/filters/tasks-of-task-definition.pipe';
+import {CsvResultModalService} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import {CsvUploadModalService} from 'src/app/common/modals/csv-upload-modal/csv-upload-modal.service';
+import {SidekiqProgressModalService} from 'src/app/common/modals/sidekiq-progress-modal/sidekiq-progress-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
-import {AlertService} from 'src/app/common/services/alert.service';
-import {HotkeysService} from '@ngneat/hotkeys';
+import {BatchFeedbackWorkflowDialogComponent} from './batch-feedback-workflow-dialog/batch-feedback-workflow-dialog.component';
 
 @Component({
   selector: 'df-staff-task-list',
   templateUrl: './staff-task-list.component.html',
   styleUrls: ['./staff-task-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('searchDialog') searchDialog: TemplateRef<any>;
+  @ViewChild('searchDialog') searchDialog: TemplateRef<object>;
+
+  private taskRequestSub?: Subscription;
 
   @Input() task: Task;
   @Input() project: Project;
 
   @Input() taskData: {
-    source: (unit: Unit, taskDef: TaskDefinition | number) => Observable<Task[]>;
-    selectedTask: Task;
-    taskKey: string;
-    onSelectedTaskChange: (task: Task) => void;
+    source: (
+      unit: Unit,
+      taskDef?: TaskDefinition | number,
+      fetchMyStudentsOnly?: boolean,
+    ) => Observable<Task[]>;
+    selectedTask: Task | null;
+    taskKey: unknown;
+    onSelectedTaskChange: (task: Task | null) => void;
     taskDefMode: boolean;
   };
   @Input() unit: Unit;
   @Input() unitRole: UnitRole;
-  @Input() filters: {
+  @Input() filters: Partial<{
     taskDefinition: TaskDefinition;
     tutorials: Tutorial[];
     forceStream: boolean;
     studentName: string;
-    tutorialIdSelected: any;
+    tutorialIdSelected: string | number;
+    unitRoleIdSelected: number | string;
     taskDefinitionIdSelected: number | TaskDefinition;
-  };
+  }>;
   @Input() showSearchOptions = true;
 
   @Input() isNarrow: boolean;
 
+  @Input() viewType: 'inbox' | 'explorer' | 'moderation' | 'overflow';
+
   userHasTutorials: boolean;
-  filteredTasks: any[] = null;
+  filteredTasks: Task[] = null;
 
   studentFilter: {
     id: number | string;
@@ -75,16 +92,25 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
     tutorial?: Tutorial;
   }[] = null;
 
-  tasks: any[] = null;
+  tutorGroups: {
+    label: string;
+    options: {id: string | number; inboxDescription: string | undefined}[];
+  }[] = [];
+
+  tasks: Task[] = null;
+
+  // hasJplagReport: boolean = false;
 
-  watchingTaskKey: any;
+  watchingTaskKey: boolean;
 
   panelOpenState = false;
   loading = true;
+  skeletonRows = Array.from({length: 12}, (_, index) => index);
 
   definedTasksPipe = new TasksOfTaskDefinitionPipe();
   tasksInTutorialsPipe = new TasksInTutorialsPipe();
   taskWithStudentNamePipe = new TasksForInboxSearchPipe();
+  tasksByTutorPipe = new TasksByTutorPipe();
   // Let's call having a source of tasksForDefinition plus having a task definition
   // auto-selected with the search options open task def mode -- i.e., the mode
   // for selecting tasks by task definitions
@@ -97,52 +123,73 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
 
   taskDefSort = 0;
   tutorialSort = 0;
-  originalFilteredTasks: any[] = null;
+  originalFilteredTasks: Task[] = null;
   allowHover = true;
 
+  toggleTutorialSort() {
+    this.tutorialSort = (this.tutorialSort + 1) % this.states.length;
+  }
+
+  // Track if all tasks have already been fetched
+  // Avoids redundant API calls when changing tutorial filters
+  fetchedAllTasks: boolean = false;
+
   constructor(
     private selectedTaskService: SelectedTaskService,
     private alertService: AlertService,
     private fileDownloaderService: FileDownloaderService,
     public dialog: MatDialog,
+    private csvUploadModal: CsvUploadModalService,
+    private csvResultModal: CsvResultModalService,
     private userService: UserService,
     private hotkeys: HotkeysService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private taskDefinitionService: TaskDefinitionService,
+    private sidekiqProgressModalService: SidekiqProgressModalService,
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (
-      ((changes.unit &&
-        !changes.unit?.isFirstChange &&
-        changes.unit.currentValue.id &&
-        changes.unit.previousValue.id !== changes.unit.currentValue.id) ||
-        this.tasks == null) &&
-      this.isTaskDefMode &&
-      this.filters
-    ) {
-      this.refreshData();
+    if (changes.taskData && !changes.taskData.isFirstChange() && this.tasks?.length) {
+      this.setTaskDefFromTaskKey(this.taskData.taskKey);
+      this.syncSelectedTaskFromTaskKey();
+    }
+
+    const unitChanged =
+      !!changes.unit &&
+      !changes.unit.isFirstChange() &&
+      changes.unit.currentValue?.id &&
+      changes.unit.previousValue?.id !== changes.unit.currentValue?.id;
+
+    // This used to sit behind an isTaskDefMode guard, so the inbox kept the previous
+    // unit's students, tutors and tasks on screen after a unit switch.
+    if (unitChanged && this.unit && this.unitRole) {
+      this.initialiseForUnit();
     }
   }
+
   ngOnDestroy(): void {
-    this.hotkeys.removeShortcuts('meta.shift.arrowdown');
-    this.hotkeys.removeShortcuts('meta.shift.arrowup');
+    this.taskRequestSub?.unsubscribe();
+    this.hotkeys.removeShortcuts('control.shift.arrowdown');
+    this.hotkeys.removeShortcuts('control.shift.arrowup');
   }
 
   ngOnInit(): void {
     const registeredHotkeys = this.hotkeys.getHotkeys().map((hotkey) => hotkey.keys);
 
-    if (!registeredHotkeys.includes('meta.shift.arrowdown')) {
+    if (!registeredHotkeys.includes('control.shift.arrowdown')) {
       this.hotkeys
         .addShortcut({
-          keys: 'meta.shift.arrowdown',
+          keys: 'control.shift.arrowdown',
           description: 'Select next task',
         })
         .subscribe(() => this.nextTask());
     }
 
-    if (!registeredHotkeys.includes('meta.shift.arrowup')) {
+    if (!registeredHotkeys.includes('control.shift.arrowup')) {
       this.hotkeys
         .addShortcut({
-          keys: 'meta.shift.arrowup',
+          keys: 'control.shift.arrowup',
           description: 'Select previous task',
         })
         .subscribe(() => this.previousTask());
@@ -154,16 +201,41 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
       this.allowHover = false;
     }
 
+    this.initialiseForUnit();
+  }
+
+  // The filter defaults, the student and tutor lists and the task query are all built
+  // from the routed unit, so they have to be rebuilt when it changes. The router reuses
+  // this component across a unit switch, so ngOnInit does not run a second time.
+  private initialiseForUnit(): void {
+    this.fetchedAllTasks = false;
+
     // Does the current user have any tutorials?
     this.userHasTutorials =
       this.unit.tutorialsForUserName(this.userService.currentUser.name)?.length > 0;
 
+    const staff = this.unit.staff.slice();
+
+    const byName = (a: UnitRole, b: UnitRole) =>
+      (a.user?.name ?? '').localeCompare(b.user?.name ?? '');
+
+    const mentored = staff
+      .filter((ur) => ur.mentorId === this.unitRole.id)
+      .slice()
+      .sort(byName);
+
+    const allTutors = staff.slice().sort(byName);
+    const shouldDefaultToMyStudents =
+      (this.unitRole.role === 'Tutor' || this.unitRole.role === 'Convenor') &&
+      this.userHasTutorials;
+
     this.filters = Object.assign(
       {
         studentName: null,
-        tutorialIdSelected:
-          (this.unitRole.role === 'Tutor' || 'Convenor') && this.userHasTutorials ? 'mine' : 'all',
+        tutorialIdSelected: shouldDefaultToMyStudents ? 'mine' : 'all',
         tutorials: [],
+        unitRoleIdSelected:
+          mentored.length > 0 && this.viewType === 'moderation' ? 'mentoring_all' : 'all',
         taskDefinitionIdSelected: null,
         taskDefinition: null,
         forceStream: true,
@@ -191,8 +263,34 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
         };
       }),
     ];
+    this.tutorGroups = [
+      ...(mentored.length > 0
+        ? [
+            {
+              label: 'My Tutors (Mentoring)',
+              options: [
+                {id: 'mentoring_all', inboxDescription: 'Show All Mine'},
+                ...mentored.map((ur) => ({
+                  id: ur.id,
+                  inboxDescription: ur.user?.name,
+                })),
+              ],
+            },
+          ]
+        : []),
+      {
+        label: 'All Tutors',
+        options: [
+          {id: 'all', inboxDescription: 'Show All'},
+          ...allTutors.map((ur) => ({
+            id: ur.id,
+            inboxDescription: ur.user?.name,
+          })),
+        ],
+      },
+    ];
 
-    this.tutorialIdChanged();
+    this.tutorialIdChanged(false);
 
     this.setTaskDefFromTaskKey(this.taskData.taskKey);
 
@@ -208,28 +306,118 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
 
   downloadSubmissionPdfs() {
     const taskDef = this.filters.taskDefinition;
-    this.fileDownloaderService.downloadFile(
-      `${AppInjector.get(DoubtfireConstants).API_URL}/submission/unit/${
-        this.unit.id
-      }/task_definitions/${taskDef.id}/student_pdfs`,
-      `${this.unit.code}-${taskDef.abbreviation}-pdfs.zip`,
-    );
+    this.taskDefinitionService.zipSubmissionPdfs(taskDef).subscribe({
+      next: (newJob) => {
+        this.sidekiqProgressModalService
+          .show(`Downloading submission pdfs for ${taskDef.abbreviation}`, newJob.id)
+          .subscribe({
+            next: (_job) => {
+              this.fileDownloaderService.downloadFile(
+                `${AppInjector.get(DoubtfireConstants).API_URL}/submission/unit/${
+                  this.unit.id
+                }/task_definitions/${taskDef.id}/student_pdfs`,
+                `${this.unit.code}-${taskDef.abbreviation}-pdfs.zip`,
+              );
+            },
+          });
+      },
+      error: (error) => {
+        this.alertService.error(error, 6000);
+      },
+    });
+  }
+
+  downloadSubmissionFiles() {
+    const taskDef = this.filters.taskDefinition;
+    this.taskDefinitionService.zipSubmissionFiles(taskDef).subscribe({
+      next: (newJob) => {
+        this.sidekiqProgressModalService
+          .show(`Downloading submission files for ${taskDef.abbreviation}`, newJob.id)
+          .subscribe({
+            next: (_job) => {
+              this.fileDownloaderService.downloadFile(
+                `${AppInjector.get(DoubtfireConstants).API_URL}/submission/unit/${
+                  this.unit.id
+                }/task_definitions/${taskDef.id}/download_submissions`,
+                `${this.unit.code}-${taskDef.abbreviation}-submissions.zip`,
+              );
+            },
+          });
+      },
+      error: (error) => {
+        this.alertService.error(error, 6000);
+      },
+    });
+  }
+
+  openBatchFeedbackDialog() {
+    const taskDefinition = this.filters.taskDefinition ?? undefined;
+
+    if (!taskDefinition) {
+      this.alertService.error('Select a task definition before uploading batch feedback.', 5000);
+      return;
+    }
+
+    const dialogRef = this.dialog.open(BatchFeedbackWorkflowDialogComponent, {
+      width: '100%',
+      maxWidth: '840px',
+      data: {
+        unit: this.unit,
+        taskDefinition,
+        myStudentsOnly: this.filters.tutorialIdSelected === 'mine',
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (!result?.openUpload) {
+        return;
+      }
+
+      this.csvUploadModal.show(
+        `Upload ${taskDefinition.abbreviation} Batch Feedback Zip`,
+        '',
+        {
+          file: {name: 'Batch Feedback Zip', type: 'zip'},
+        },
+        this.unit.getBatchFeedbackUploadUrl(taskDefinition),
+        (response: SidekiqJob) => {
+          if (!response?.id) {
+            this.alertService.error('Batch feedback upload failed.', 6000);
+            return;
+          }
+
+          this.sidekiqProgressModalService
+            .show(`Uploading ${taskDefinition.abbreviation} Batch Feedback`, response.id)
+            .subscribe({
+              next: (job) => {
+                this.csvResultModal.show('Batch Feedback Upload Results', JSON.parse(job.result));
+                this.refreshData();
+              },
+              error: (error) => {
+                console.error(error);
+                this.alertService.error('Batch feedback upload failed.', 6000);
+              },
+            });
+        },
+      );
+    });
   }
 
-  downloadSubmissions() {
+  downloadJPLAGReport() {
     const taskDef = this.filters.taskDefinition;
     this.fileDownloaderService.downloadFile(
-      `${AppInjector.get(DoubtfireConstants).API_URL}/submission/unit/${
-        this.unit.id
-      }/task_definitions/${taskDef.id}/download_submissions`,
-      `${this.unit.code}-${taskDef.abbreviation}-submissions.zip`,
+      taskDef.getJplagReportUrl(),
+      `${this.unit.code}-${taskDef.abbreviation}-jplag-report.zip`,
     );
+
+    const url = this.router.serializeUrl(this.router.createUrlTree(['/jplag-report-viewer']));
+    window.open(url, '_blank');
   }
 
   openDialog() {
     const dialogRef = this.dialog.open(this.searchDialog);
 
-    dialogRef.afterClosed().subscribe((result) => {});
+    dialogRef.afterClosed().subscribe();
   }
 
   refreshTasks(): void {
@@ -245,7 +433,17 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
         this.filters.forceStream,
       );
     }
+
+    if (this.filters.unitRoleIdSelected) {
+      filteredTasks = this.tasksByTutorPipe.transform(
+        this.unitRole,
+        filteredTasks,
+        this.filters.unitRoleIdSelected,
+      );
+    }
+
     filteredTasks = this.taskWithStudentNamePipe.transform(filteredTasks, this.filters.studentName);
+    filteredTasks = this.sortPinnedTasksFirst(filteredTasks);
     this.filteredTasks = filteredTasks;
 
     if (this.filteredTasks != null) {
@@ -255,38 +453,65 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
     this.taskDefSort = 0;
     this.tutorialSort = 0;
 
-    // Fix selected task.
-    if (this.taskData.selectedTask && filteredTasks?.includes(this.taskData.selectedTask)) {
+    // Clear selected task only when the active filters hide it.
+    if (
+      this.taskData.selectedTask &&
+      !filteredTasks?.some((task) => task?.hasTaskKey(this.taskData.selectedTask.taskKey()))
+    ) {
       this.setSelectedTask(null);
     }
   }
 
-  openTaskDefs() {
-    // Automatically "open" the task definition select element if in task def mode
-    const selectEl: any = document.querySelector(
-      'select[ng-model="filters.taskDefinitionIdSelected"]',
-    ) as any;
-    selectEl.size = 10;
-    selectEl.focus();
+  unitRoleIdChanged(attemptRefreshData: boolean = true): void {
+    this.applyFilters();
+
+    const isExplorerView = this.isTaskDefMode;
+    if (attemptRefreshData && !this.fetchedAllTasks && !isExplorerView) {
+      this.refreshData();
+    }
   }
 
-  tutorialIdChanged(): void {
-    const tutorialId = this.filters.tutorialIdSelected;
+  tutorialIdChanged(
+    attemptRefreshData: boolean = true,
+    selectedTutorialId: string | number = this.filters.tutorialIdSelected,
+  ): void {
+    this.filters.tutorialIdSelected = selectedTutorialId;
+    const tutorialId = selectedTutorialId;
+
+    if (attemptRefreshData) {
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: {students: tutorialId},
+        queryParamsHandling: 'merge',
+        replaceUrl: true,
+      });
+    }
+
+    const filterOption = this.studentFilter.find((f) => String(f.id) === String(tutorialId));
 
-    const filterOption = this.studentFilter.find((f) => f.id === tutorialId);
+    if (!filterOption) {
+      return;
+    }
 
     this.filters.forceStream = filterOption.forceStream;
 
     if (tutorialId === 'mine') {
       this.filters.tutorials = this.unit.tutorialsForUserName(this.userService.currentUser.name);
+      this.filters.unitRoleIdSelected = 'all';
     } else if (tutorialId === 'all') {
       // Ignore tutorials filter
       this.filters.tutorials = null;
     } else {
       this.filters.tutorials = [filterOption.tutorial];
+      this.filters.unitRoleIdSelected = 'all';
     }
 
     this.applyFilters();
+
+    const isExplorerView = this.isTaskDefMode;
+    if (attemptRefreshData && !this.fetchedAllTasks && !isExplorerView) {
+      this.refreshData();
+    }
   }
 
   //  Task definition options
@@ -323,32 +548,110 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
     return this.tasks.find((t) => t?.hasTaskKey(key));
   }
 
+  private syncSelectedTaskFromTaskKey(): void {
+    if (!this.tasks?.length) {
+      return;
+    }
+
+    if (!this.taskData.taskKey) {
+      this.setSelectedTask(null);
+      return;
+    }
+
+    const task = this.findTaskForTaskKey(this.taskData.taskKey);
+    if (task) {
+      this.setSelectedTask(task);
+    }
+  }
+
   // Callback to refresh data from the task source
   private refreshData() {
+    const fetchMyStudentsOnly = this.filters.tutorialIdSelected === 'mine';
+
     this.loading = true;
+    // A unit or filter change can start a second query before the previous one
+    // returns. Cancel the older query so it cannot land late and put stale tasks
+    // back on screen after the component has moved to the new unit.
+    this.taskRequestSub?.unsubscribe();
     // Tasks for feedback or tasks for task, depending on the data source
-    this.taskData.source(this.unit, this.filters?.taskDefinitionIdSelected).subscribe({
-      next: (response) => {
-        this.tasks = response;
-        this.applyFilters();
-        this.loading = false;
-
-        // Load initial set task, either the one provided (by the URL)
-        // then load actual task in now or the first task that applies
-        // to the given set of filters.
-        const task = this.findTaskForTaskKey(this.taskData.taskKey);
-        this.setSelectedTask(task);
-
-        // For when URL has been manually changed, set the selected task
-        // using new array of tasks loaded from the new taskKey
-        if (!this.watchingTaskKey) {
-          this.watchingTaskKey = true;
-        }
-      },
-      error: (message) => {
-        this.alertService.error(message, 6000);
-      },
-    });
+    this.taskRequestSub = this.taskData
+      .source(this.unit, this.filters?.taskDefinitionIdSelected, fetchMyStudentsOnly)
+      .subscribe({
+        next: (response) => {
+          this.tasks = response;
+          this.applyFilters();
+          this.loading = false;
+
+          this.fetchedAllTasks = !fetchMyStudentsOnly && !this.isTaskDefMode;
+
+          // If the URL carries a task key, load that task once the query results arrive.
+          this.syncSelectedTaskFromTaskKey();
+
+          // For when URL has been manually changed, set the selected task
+          // using new array of tasks loaded from the new taskKey
+          if (!this.watchingTaskKey) {
+            this.watchingTaskKey = true;
+          }
+        },
+        error: (message) => {
+          this.alertService.error(message, 6000);
+          this.loading = false;
+        },
+      });
+  }
+
+  /**
+   * The task whose row actions are being held open by keyboard focus, if any. Focus is
+   * tracked separately from task.hover so that neither path can close the other: tabbing
+   * away used to run the same handler as mouseout and would fade the options button out
+   * from under a pointer that was still sitting on the row.
+   */
+  focusedTaskId: number | null = null;
+
+  /**
+   * Reveal the row actions because the pointer is over the row. Touch devices opt out
+   * of hover entirely via allowHover, which is why this is not simply `true`.
+   */
+  showTaskActionsForPointer(task: Task) {
+    task.hover = this.allowHover;
+  }
+
+  /**
+   * Hide the row actions again once the pointer leaves. This is the original mouseout
+   * behaviour and it deliberately touches nothing the keyboard owns.
+   */
+  hideTaskActions(task: Task) {
+    task.hover = task.optionsOpened;
+  }
+
+  /**
+   * Reveal the row actions because the submission options button took keyboard focus.
+   * Unlike the pointer path this always applies, since a keyboard is usable on a touch
+   * device even when hover is not.
+   */
+  showTaskActionsForFocus(task: Task) {
+    this.focusedTaskId = task.id;
+  }
+
+  /**
+   * Release the keyboard's hold on the row. Another row may already have claimed focus
+   * by the time this runs, so only the row that took it can give it back.
+   */
+  hideTaskActionsForFocus(task: Task) {
+    if (this.focusedTaskId === task.id) {
+      this.focusedTaskId = null;
+    }
+  }
+
+  /**
+   * Whether the row is showing its submission options in place of the pin indicator. Any
+   * one of the three reasons is enough: the pointer is on the row, the keyboard is on the
+   * options button, or the overflow menu it opened is still up. The menu case has to be
+   * here as well as in the pointer path, because opening the menu from the keyboard moves
+   * focus into the menu and so blurs the button that opened it.
+   */
+  rowActionsShown(task: Task): boolean {
+    return task.hover || task.optionsOpened || this.focusedTaskId === task.id;
   }
 
   setSelectedTask(task: Task) {
@@ -362,20 +665,20 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  private scrollToTaskInList(task) {
-    const taskEl = document.querySelector(`staff-task-list #${task.taskKeyToIdString()}`) as any;
+  private scrollToTaskInList(task: Task) {
+    const taskEl = document.querySelector(`#${task.taskKeyToIdString()}`) as
+      | (HTMLElement & {
+          scrollIntoViewIfNeeded?: (options?: ScrollIntoViewOptions) => void;
+        })
+      | null;
     if (!taskEl) {
       return;
     }
-    const funcName = taskEl.scrollIntoViewIfNeeded
-      ? 'scrollIntoViewIfNeeded'
-      : taskEl.scrollIntoView
-        ? 'scrollIntoView'
-        : '';
-    if (!funcName) {
-      return;
+    if (taskEl.scrollIntoViewIfNeeded) {
+      taskEl.scrollIntoViewIfNeeded({behavior: 'smooth'});
+    } else {
+      taskEl.scrollIntoView({behavior: 'smooth'});
     }
-    taskEl[funcName]({behavior: 'smooth'});
   }
 
   isSelectedTask(task: Task) {
@@ -385,6 +688,9 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   nextTask(): void {
+    if (!this.filteredTasks) {
+      return;
+    }
     const currentTaskIndex = this.filteredTasks.findIndex((task) => this.isSelectedTask(task));
     if (currentTaskIndex >= this.filteredTasks.length) {
       return;
@@ -396,8 +702,11 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   previousTask(): void {
+    if (!this.filteredTasks) {
+      return;
+    }
     const currentTaskIndex = this.filteredTasks.findIndex((task) => this.isSelectedTask(task));
-    if (currentTaskIndex === 0) {
+    if (currentTaskIndex <= 0) {
       return;
     }
     const newTask = this.filteredTasks[currentTaskIndex - 1];
@@ -425,6 +734,45 @@ export class StaffTaskListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   togglePin(task: Task) {
-    task.pinned ? task.unpin() : task.pin();
+    if (task.id === undefined) {
+      // Can't pin a task that doesn't actually exist yet
+      this.alertService.error(`This task can't be pinned yet`, 3000);
+      return;
+    }
+    const refreshOrdering = () => this.applyFilters();
+    if (task.pinned) {
+      task.unpin(refreshOrdering);
+    } else {
+      task.pin(refreshOrdering);
+    }
+  }
+
+  getWarningIcon(task: Task): 'warning' | 'overflow' | null {
+    if (!task.submissionDate) {
+      return null;
+    }
+    if (task.status !== 'ready_for_feedback') {
+      return null;
+    }
+
+    const daysSinceSubmission = task.daysSinceSubmission();
+
+    if (daysSinceSubmission >= task.unit.feedbackOverflowThresholdDays) {
+      return 'overflow';
+    }
+
+    if (daysSinceSubmission >= task.unit.feedbackWarningThresholdDays) {
+      return 'warning';
+    }
+
+    return null;
+  }
+
+  private sortPinnedTasksFirst(tasks: Task[]): Task[] {
+    if (!this.isTaskDefMode || !tasks?.length) {
+      return tasks;
+    }
+
+    return [...tasks].sort((a, b) => Number(b.pinned) - Number(a.pinned));
   }
 }
diff --git a/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.html b/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.html
new file mode 100644
index 0000000000..044efc6403
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.html
@@ -0,0 +1,34 @@
+<div
+  [matTooltip]="
+    selectedTask.claimedByUnitRoleId
+      ? selectedTask.claimedByUnitRoleId === currentUnitRole.id
+        ? 'You have claimed this task.'
+        : 'Another tutor has temporarily acquired this task and is currently providing feedback.'
+      : 'Claim this task from the overflow marking queue.'
+  "
+>
+  <button
+    class="ml-3"
+    color="primary"
+    mat-raised-button
+    [disabled]="
+      !selectedTask || selectedTask.loadingSubmissionDetails || selectedTask.claimedByUnitRoleId
+    "
+    (click)="claimTask(selectedTask)"
+  >
+    <div class="flex items-center gap-0.5">
+      @if (selectedTask.claimedByUnitRoleId) {
+        @if (selectedTask.claimedByUnitRoleId === currentUnitRole.id) {
+          <mat-icon class="scale-80">check_circle</mat-icon>
+          Claimed by you
+        } @else {
+          <mat-icon class="scale-80">event_busy</mat-icon>
+          Claimed by tutor
+        }
+      } @else {
+        <mat-icon>sync_lock</mat-icon>
+        Claim Task
+      }
+    </div>
+  </button>
+</div>
diff --git a/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.scss b/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.ts b/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.ts
new file mode 100644
index 0000000000..e79654c560
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/directives/task-claim/task-claim.component.ts
@@ -0,0 +1,46 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Task} from 'src/app/api/models/task';
+import {UnitRole} from 'src/app/api/models/unit-role';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-task-claim',
+  templateUrl: './task-claim.component.html',
+  styleUrl: './task-claim.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskClaimComponent {
+  @Input() selectedTask: Task;
+
+  constructor(
+    private taskService: TaskService,
+    private alertService: AlertService,
+    private snackBar: MatSnackBar,
+    private userService: UserService,
+  ) {}
+
+  public get currentUnitRole(): UnitRole | undefined {
+    const currentUser = this.userService.currentUser;
+    return this.selectedTask.unit.staff.find((ur) => ur.user.id === currentUser.id);
+  }
+
+  claimTask(task: Task) {
+    this.taskService.claimTask(task).subscribe({
+      next: (_response) => {
+        this.alertService.success(`Successfully claimed task`, 6000);
+        this.snackBar.open(
+          `Successfully claimed task. This task will be automatically unclaimed after 30 minutes of inactivity.`,
+          'OK',
+        );
+        task.claimedByUnitRoleId = this.currentUnitRole.id;
+      },
+      error: (error) => {
+        this.alertService.error(`Failed to claim task ${error}`, 6000);
+      },
+    });
+  }
+}
diff --git a/src/app/units/states/tasks/inbox/inbox.coffee b/src/app/units/states/tasks/inbox/inbox.coffee
deleted file mode 100644
index 9f04950ca0..0000000000
--- a/src/app/units/states/tasks/inbox/inbox.coffee
+++ /dev/null
@@ -1,24 +0,0 @@
-angular.module('doubtfire.units.states.tasks.inbox', [])
-
-#
-# Task inbox for tasks for tutors to deal with (i.e., tasksForTaskInbox)
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/tasks/inbox', {
-    parent: 'units/tasks'
-    url: '/inbox/{taskKey:any}'
-    templateUrl: "units/states/tasks/inbox/inbox.tpl.html"
-    controller: "TaskInboxStateCtrl"
-    params:
-      taskKey: dynamic: true
-    data:
-      task: "Task Inbox"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor', 'Auditor']
-   }
-)
-
-.controller('TaskInboxStateCtrl', ($scope, newTaskService) ->
-  $scope.taskData.source = newTaskService.queryTasksForTaskInbox.bind(newTaskService)
-  $scope.taskData.taskDefMode = false
-)
diff --git a/src/app/units/states/tasks/inbox/inbox.component.html b/src/app/units/states/tasks/inbox/inbox.component.html
index 84edcabe13..9d4b8f0cd1 100644
--- a/src/app/units/states/tasks/inbox/inbox.component.html
+++ b/src/app/units/states/tasks/inbox/inbox.component.html
@@ -1,86 +1,235 @@
-<div fxLayout="column" fxFill fxHide fxShow.gt-sm>
-  <div fxLayout="row" fxLayoutAlign="center stretch" fxFill>
-    <div id="inboxpanel" #inboxpanel class="staff-task-list inbox-panel">
-      @if (taskData) {
-      <df-staff-task-list
-        [isNarrow]="narrowTaskInbox"
-        [showSearchOptions]="showSearchOptions"
-        [filters]="filters"
-        [taskData]="taskData"
-        [unit]="unit"
-        [unitRole]="unitRole"
-      ></df-staff-task-list>
-      }
-    </div>
-    @if (subs$ | async) {
-    <div
-      id="leftResizerEl"
-      #leftResizerEl
-      class="resizer"
-      cdkDragLockAxis="x"
-      cdkDrag
-      (cdkDragMoved)="dragging($event, inboxpanel)"
-      (cdkDragEnded)="stoppedDragging($event, inboxpanel)"
-      (cdkDragStarted)="startedDragging($event, inboxpanel)"
-    ></div>
+<ng-template #TaskListSkeleton>
+  <div class="h-full overflow-hidden">
+    <ngx-skeleton-loader
+      [theme]="{height: '48px', 'border-radius': '16px', margin: '0 0 14px'}"
+    ></ngx-skeleton-loader>
+    @for (row of [0, 1, 2, 3, 4, 5, 6, 7]; track row) {
+      <div class="flex h-[60px] items-center gap-[10px] px-[6px]">
+        <ngx-skeleton-loader
+          appearance="circle"
+          [theme]="{width: '8px', height: '8px', margin: '0'}"
+        ></ngx-skeleton-loader>
+        <ngx-skeleton-loader
+          appearance="circle"
+          [theme]="{width: '30px', height: '30px', margin: '0'}"
+        ></ngx-skeleton-loader>
+        <div class="min-w-0 flex-1">
+          <ngx-skeleton-loader
+            [theme]="{height: '10px', width: '78%', 'border-radius': '999px', margin: '6px 0'}"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            [theme]="{height: '10px', width: '56%', 'border-radius': '999px', margin: '6px 0'}"
+          ></ngx-skeleton-loader>
+        </div>
+        <ngx-skeleton-loader
+          appearance="circle"
+          [theme]="{width: '32px', height: '32px', margin: '0'}"
+        ></ngx-skeleton-loader>
+      </div>
     }
+  </div>
+</ng-template>
+
+<ng-template #BlankPanelSkeleton>
+  <ngx-skeleton-loader
+    class="block size-full"
+    [theme]="{height: '100%', width: '100%', 'border-radius': '8px', margin: '0'}"
+  ></ngx-skeleton-loader>
+</ng-template>
 
-    <div fxFlex class="inbox-panel">
-      <f-task-dashboard [task]="taskData.selectedTask" [pdfUrl]="visiblePdfUrl"></f-task-dashboard>
+@if (!isMobileView) {
+  <div class="m-0 hidden size-full min-h-0 min-w-full flex-col px-3 min-[600px]:flex">
+    <div class="flex max-h-full min-h-0 flex-1 flex-row items-stretch justify-center">
+      <div #inboxpanel class="staff-task-list inbox-panel overflow-hidden" id="inboxpanel">
+        @if (loading) {
+          <ng-container *ngTemplateOutlet="TaskListSkeleton"></ng-container>
+        } @else if (taskData) {
+          <df-staff-task-list
+            [filters]="filters"
+            [isNarrow]="narrowTaskInbox"
+            [showSearchOptions]="showSearchOptions"
+            [taskData]="taskData"
+            [unit]="unit"
+            [unitRole]="unitRole"
+            [viewType]="viewType"
+          ></df-staff-task-list>
+        }
+      </div>
+      @if (subs$ | async) {
+        <div
+          #leftResizerEl
+          cdkDrag
+          cdkDragLockAxis="x"
+          class="resizer"
+          id="leftResizerEl"
+          (cdkDragEnded)="stoppedDragging($event, inboxpanel)"
+          (cdkDragMoved)="dragging($event, inboxpanel)"
+          (cdkDragStarted)="startedDragging($event, inboxpanel)"
+        ></div>
+      }
+
+      <div class="inbox-panel flex-1 overflow-hidden">
+        @if (loading) {
+          <ng-container *ngTemplateOutlet="BlankPanelSkeleton"></ng-container>
+        } @else {
+          <f-inbox-dashboard
+            [task]="$safeNavigationMigration(taskData?.selectedTask)"
+            (visiblePdfUrlChange)="visiblePdfUrl = $event"
+          ></f-inbox-dashboard>
+        }
+      </div>
+      @if (isCommentsNarrow && commentsCollapsed && !loading && taskData?.selectedTask) {
+        <button
+          aria-label="Open task comments"
+          class="comments-floating-toggle"
+          color="primary"
+          mat-mini-fab
+          matTooltip="Open comments"
+          type="button"
+          (click)="toggleCommentsPanel()"
+        >
+          <mat-icon class="comments-floating-toggle__edge-icon">chevron_left</mat-icon>
+          <mat-icon class="comments-floating-toggle__hover-icon">forum</mat-icon>
+        </button>
+      }
+      <div
+        #rightResizerEl
+        cdkDrag
+        cdkDragLockAxis="x"
+        class="resizer"
+        id="rightResizerEl"
+        [class.hidden]="isCommentsNarrow"
+        (cdkDragEnded)="stoppedDragging($event, commentspanel)"
+        (cdkDragMoved)="dragging($event, commentspanel)"
+        (cdkDragStarted)="startedDragging($event, commentspanel)"
+      ></div>
+      <div
+        #commentspanel
+        class="task-comment-panel comments-sidebar inbox-panel overflow-hidden"
+        [class.comments-sidebar--narrow]="isCommentsNarrow"
+        [class.hidden]="commentsPanelCollapsed"
+      >
+        @if (isCommentsNarrow && !commentsCollapsed) {
+          <button
+            aria-label="Collapse task comments"
+            class="comments-sidebar__collapse"
+            mat-icon-button
+            matTooltip="Collapse comments"
+            type="button"
+            (click)="toggleCommentsPanel()"
+          >
+            <mat-icon>chevron_right</mat-icon>
+          </button>
+        }
+        @if (loading) {
+          <ng-container *ngTemplateOutlet="BlankPanelSkeleton"></ng-container>
+        } @else {
+          <task-comments-viewer [task]="taskData.selectedTask"> </task-comments-viewer>
+        }
+      </div>
     </div>
+    <f-footer class="z-10 shrink-0" [viewType]="viewType"></f-footer>
+  </div>
+} @else {
+  <div #mobile class="m-0 hidden size-full min-h-full min-w-full flex-row max-[599.98px]:flex">
     <div
-      id="rightResizerEl"
-      #rightResizerEl
-      class="resizer"
-      cdkDragLockAxis="x"
-      cdkDrag
-      (cdkDragMoved)="dragging($event, commentspanel)"
-      (cdkDragEnded)="stoppedDragging($event, commentspanel)"
-      (cdkDragStarted)="startedDragging($event, commentspanel)"
-    ></div>
-    <div #commentspanel class="task-comment-panel inbox-panel">
-      <task-comments-viewer [task]="taskData.selectedTask"> </task-comments-viewer>
+      #inboxpanel
+      class="inbox-panel mobile overflow-hidden"
+      id="inboxpanel"
+      [hidden]="taskSelected"
+    >
+      @if (loading) {
+        <ng-container *ngTemplateOutlet="TaskListSkeleton"></ng-container>
+      } @else if (taskData) {
+        <df-staff-task-list
+          [filters]="filters"
+          [isNarrow]="false"
+          [showSearchOptions]="showSearchOptions"
+          [taskData]="taskData"
+          [unit]="unit"
+          [unitRole]="unitRole"
+          [viewType]="viewType"
+        ></df-staff-task-list>
+      }
     </div>
-  </div>
-  <f-footer></f-footer>
-</div>
+    <div
+      class="m-0 flex size-full min-h-full max-w-full min-w-full flex-col items-stretch justify-between"
+      [hidden]="!taskSelected"
+    >
+      <div class="flex items-center">
+        <button
+          aria-label="Back to inbox"
+          mat-icon-button
+          matTooltip="Back to inbox"
+          (click)="taskSelected = false"
+        >
+          <mat-icon>arrow_back_ios_new</mat-icon>
+        </button>
+        <h3 class="mb-0">{{ taskData?.selectedTask?.project.student.nickname }}</h3>
+        <div class="flex-1"></div>
+        <button
+          aria-label="Open current document"
+          mat-icon-button
+          matTooltip="Open current document"
+          [disabled]="!visiblePdfUrl"
+          (click)="openPdfInNewTab()"
+        >
+          <mat-icon>description</mat-icon>
+        </button>
+        <button
+          aria-label="Go to student"
+          mat-icon-button
+          matTooltip="Go to student"
+          (click)="goToStudent()"
+        >
+          <mat-icon>account_circle</mat-icon>
+        </button>
+      </div>
 
-<div #mobile fxLayout="row" fxFill fxHide fxShow.lt-md>
-  <div id="inboxpanel" #inboxpanel class="inbox-panel mobile" [hidden]="taskSelected">
-    @if (taskData) {
-    <df-staff-task-list
-      [isNarrow]="false"
-      [showSearchOptions]="showSearchOptions"
-      [filters]="filters"
-      [taskData]="taskData"
-      [unit]="unit"
-      [unitRole]="unitRole"
-    ></df-staff-task-list>
-    }
-  </div>
-  <div [hidden]="!taskSelected" fxLayout="column" fxFill fxLayoutAlign="space-between stretch">
-    <div class="flex items-center">
-      <button mat-icon-button aria-label="Back to inbox" matTooltip="Back to inbox" (click)="taskSelected = false">
-        <mat-icon>arrow_back_ios_new</mat-icon>
-      </button>
-      <h3 class="mb-0">{{ taskData?.selectedTask?.project.student.nickname }}</h3>
-      <div fxFlex></div>
-      <button
-        [disabled]="!this.taskData?.selectedTask?.hasPdf"
-        mat-icon-button
-        aria-label="Open Submission"
-        (click)="openPdfInNewTab()"
-        matTooltip="Open submission"
+      <div class="inbox-panel mobile flex-1 overflow-hidden">
+        @if (loading) {
+          <ng-container *ngTemplateOutlet="BlankPanelSkeleton"></ng-container>
+        } @else {
+          <f-inbox-dashboard
+            [task]="$safeNavigationMigration(taskData?.selectedTask)"
+            (visiblePdfUrlChange)="visiblePdfUrl = $event"
+          ></f-inbox-dashboard>
+        }
+      </div>
+      @if (isCommentsNarrow && commentsCollapsed && !loading && taskData?.selectedTask) {
+        <button
+          aria-label="Open task comments"
+          class="comments-floating-toggle"
+          color="primary"
+          mat-mini-fab
+          matTooltip="Open comments"
+          type="button"
+          (click)="toggleCommentsPanel()"
+        >
+          <mat-icon class="comments-floating-toggle__edge-icon">chevron_left</mat-icon>
+          <mat-icon class="comments-floating-toggle__hover-icon">forum</mat-icon>
+        </button>
+      }
+      <div
+        class="task-comment-panel comments-sidebar comments-sidebar--mobile inbox-panel overflow-hidden"
+        [class.hidden]="commentsPanelCollapsed || !taskData?.selectedTask"
       >
-        <mat-icon>description</mat-icon>
-      </button>
-      <button mat-icon-button aria-label="Go to student" matTooltip="Go to student" (click)="goToStudent()">
-        <mat-icon>account_circle</mat-icon>
-      </button>
-    </div>
-
-    <div #commentspanel fxFlex class="inbox-panel task-comment-panel mobile">
-      <task-comments-viewer [task]="taskData.selectedTask"> </task-comments-viewer>
+        @if (isCommentsNarrow && !commentsCollapsed) {
+          <button
+            aria-label="Collapse task comments"
+            class="comments-sidebar__collapse"
+            mat-icon-button
+            matTooltip="Collapse comments"
+            type="button"
+            (click)="toggleCommentsPanel()"
+          >
+            <mat-icon>chevron_right</mat-icon>
+          </button>
+        }
+        @if (!loading && taskData?.selectedTask) {
+          <task-comments-viewer [task]="taskData.selectedTask"> </task-comments-viewer>
+        }
+      </div>
     </div>
   </div>
-</div>
+}
diff --git a/src/app/units/states/tasks/inbox/inbox.component.scss b/src/app/units/states/tasks/inbox/inbox.component.scss
index 0b0bc8df17..613ec78e40 100644
--- a/src/app/units/states/tasks/inbox/inbox.component.scss
+++ b/src/app/units/states/tasks/inbox/inbox.component.scss
@@ -1,42 +1,127 @@
-.staff-task-list {}
+.staff-task-list {
+}
 
 .task-comment-panel {
-    padding-left: 12px;
-    padding-bottom: 0px;
+  padding-left: 12px;
+  padding-bottom: 0px;
 
-    &.mobile {
-        padding-left: 0px;
-        padding-bottom: 0px;
-        margin-bottom: 10px;
-    }
+  &.mobile {
+    padding-left: 0px;
+    padding-bottom: 0px;
+    margin-bottom: 10px;
+  }
 }
 
 .resizer {
-    background-color: #f5f5f5;
-    z-index: 200;
-    width: 10px //css on hover
+  background-color: var(--ot-color-page, #f5f5f5);
+  z-index: 200;
+  width: 3px;
 }
 
 .resizer:hover,
 .resizer.hovering {
-    cursor: col-resize;
-    background: linear-gradient(white, white) no-repeat center/2px 98%;
+  cursor: col-resize;
+  background: linear-gradient(white, white) no-repeat center/2px 98%;
 }
 
 .inbox-panel {
-    border-radius: 10px;
-    background-color: white;
-    padding: 8px;
-    min-width: 60px;
-    width: 350px;
+  border-radius: 10px;
+  background-color: var(--ot-color-surface, white);
+  padding: 8px;
+  min-width: 60px;
+  width: 350px;
 
-    &.mobile {
-        max-width: 100%;
-        width: 100%;
-        padding: 0px;
-    }
+  &.mobile {
+    max-width: 100%;
+    width: 100%;
+    padding: 0px;
+  }
 }
 
 .task-comment-panel.inbox-panel {
-    // padding: 0px 0px 0px 5px !important;
+  border-radius: 0;
+  // padding: 0px 0px 0px 5px !important;
+}
+
+.comments-floating-toggle {
+  position: fixed;
+  top: 50%;
+  right: -20px;
+  z-index: 300;
+  opacity: 0.55;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+  transform: translateY(-50%);
+}
+
+.comments-floating-toggle mat-icon {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  transition: opacity 150ms ease;
+}
+
+.comments-floating-toggle:hover,
+.comments-floating-toggle:focus-visible {
+  opacity: 1;
+  transform: translate(-20px, -50%);
+}
+
+.comments-floating-toggle__edge-icon {
+  opacity: 1;
+  transform: translateX(-6px);
+}
+
+.comments-floating-toggle__hover-icon {
+  opacity: 0;
+}
+
+.comments-floating-toggle:hover .comments-floating-toggle__edge-icon,
+.comments-floating-toggle:focus-visible .comments-floating-toggle__edge-icon {
+  opacity: 0;
+}
+
+.comments-floating-toggle:hover .comments-floating-toggle__hover-icon,
+.comments-floating-toggle:focus-visible .comments-floating-toggle__hover-icon {
+  opacity: 1;
+}
+
+.comments-sidebar {
+  position: relative;
+}
+
+.comments-sidebar--narrow {
+  flex-basis: 375px !important;
+  min-width: 375px;
+  width: 375px !important;
+  border-radius: 0 !important;
+  box-shadow: -2px 0 6px rgba(15, 23, 42, 0.08);
+  z-index: 250;
+}
+
+.comments-sidebar--mobile {
+  position: fixed;
+  top: 56px;
+  right: 0;
+  bottom: 0;
+  min-width: 375px;
+  width: 375px !important;
+  border-radius: 0 !important;
+  padding: 8px;
+  box-shadow: -2px 0 6px rgba(15, 23, 42, 0.08);
+  z-index: 250;
+}
+
+.comments-sidebar__collapse {
+  position: absolute;
+  top: 50%;
+  left: -20px;
+  z-index: 260;
+  transform: translateY(-50%);
+  background: var(--ot-color-surface, white);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
 }
diff --git a/src/app/units/states/tasks/inbox/inbox.component.spec.ts b/src/app/units/states/tasks/inbox/inbox.component.spec.ts
index d90eb5cb30..9252f7f270 100644
--- a/src/app/units/states/tasks/inbox/inbox.component.spec.ts
+++ b/src/app/units/states/tasks/inbox/inbox.component.spec.ts
@@ -1,6 +1,24 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {HotkeysService} from '@ngneat/hotkeys';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDialog} from '@angular/material/dialog';
+import {Router} from '@angular/router';
+import {EMPTY} from 'rxjs';
+import {UserService} from 'src/app/api/services/user.service';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
+import {InboxComponent} from './inbox.component';
 
-import { InboxComponent } from './inbox.component';
+const selectedTaskServiceStub = {
+  currentPdfUrl$: EMPTY,
+  selectedTask$: EMPTY,
+};
+const hotkeysServiceStub = {
+  removeShortcuts: () => {},
+};
+const emptyProvider = {};
 
 describe('InboxComponent', () => {
   let component: InboxComponent;
@@ -8,13 +26,25 @@ describe('InboxComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ InboxComponent ]
+      declarations: [InboxComponent],
+      providers: [
+        {provide: HotkeysService, useValue: hotkeysServiceStub},
+        {provide: SelectedTaskService, useValue: selectedTaskServiceStub},
+        {provide: FileDownloaderService, useValue: emptyProvider},
+        {provide: Router, useValue: emptyProvider},
+        {provide: MatDialog, useValue: emptyProvider},
+        {provide: UserService, useValue: emptyProvider},
+        {provide: DoubtfireConstants, useValue: emptyProvider},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
+      .overrideComponent(InboxComponent, {set: {template: ''}})
+      .compileComponents();
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(InboxComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
diff --git a/src/app/units/states/tasks/inbox/inbox.component.ts b/src/app/units/states/tasks/inbox/inbox.component.ts
index 41716a3e40..f2813830d7 100644
--- a/src/app/units/states/tasks/inbox/inbox.component.ts
+++ b/src/app/units/states/tasks/inbox/inbox.component.ts
@@ -1,6 +1,8 @@
-import {CdkDragEnd, CdkDragStart, CdkDragMove} from '@angular/cdk/drag-drop';
+import {HotkeysHelpComponent, HotkeysService} from '@ngneat/hotkeys';
+import {CdkDragEnd, CdkDragMove, CdkDragStart} from '@angular/cdk/drag-drop';
+import {BreakpointObserver} from '@angular/cdk/layout';
 import {
-  AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   ElementRef,
   Input,
@@ -8,41 +10,73 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import {MediaObserver} from 'ng-flex-layout';
-import {UIRouter} from '@uirouter/angular';
-import {auditTime, merge, Observable, of, Subject, tap, withLatestFrom} from 'rxjs';
+import {MatDialog} from '@angular/material/dialog';
+import {Router} from '@angular/router';
+import {Observable, Subject, auditTime, merge, of, takeUntil, tap, withLatestFrom} from 'rxjs';
+import {Tutorial} from 'src/app/api/models/doubtfire-model';
 import {Task} from 'src/app/api/models/task';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
 import {Unit} from 'src/app/api/models/unit';
 import {UnitRole} from 'src/app/api/models/unit-role';
+import {UserService} from 'src/app/api/services/user.service';
 import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
-import {HotkeysService, HotkeysHelpComponent} from '@ngneat/hotkeys';
-import {MatDialog} from '@angular/material/dialog';
-import {UserService} from 'src/app/api/services/user.service';
+
+interface InboxTaskData {
+  source: (
+    unit: Unit,
+    taskDef?: TaskDefinition | number,
+    fetchMyStudentsOnly?: boolean,
+  ) => Observable<Task[]> | null;
+  selectedTask: Task | null;
+  taskKey: unknown;
+  onSelectedTaskChange: (task: Task | null) => void;
+  taskDefMode: boolean;
+}
 
 @Component({
   selector: 'f-inbox',
   templateUrl: './inbox.component.html',
   styleUrls: ['./inbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class InboxComponent implements OnInit, AfterViewInit {
+export class InboxComponent implements OnInit, OnDestroy {
   @Input() unit: Unit;
   @Input() unitRole: UnitRole;
-  @Input() taskData: {selectedTask: Task; any};
-
+  @Input() taskData: InboxTaskData;
+  @Input() loading = false;
+  @Input() filters: Partial<{
+    taskDefinition: TaskDefinition;
+    tutorials: Tutorial[];
+    forceStream: boolean;
+    studentName: string;
+    tutorialIdSelected: string | number;
+    taskDefinitionIdSelected: number | TaskDefinition;
+  }>;
+  @Input() showSearchOptions: boolean;
   @ViewChild('inboxpanel') inboxPanel: ElementRef;
   @ViewChild('commentspanel') commentspanel: ElementRef;
 
+  @Input() viewType: 'inbox' | 'explorer' | 'moderation' | 'overflow';
+
   subs$: Observable<unknown>;
 
-  private inboxStartSize$ = new Subject<number>();
-  private dragMove$ = new Subject<{event: CdkDragMove; div: HTMLDivElement}>();
+  private inboxStartSize$: Subject<number> = new Subject();
+  private dragMove$: Subject<{event: CdkDragMove; div: HTMLDivElement}> = new Subject();
   private dragMoveAudited$;
+  private readonly destroy$: Subject<void> = new Subject();
+  private readonly commentsBreakpoint = '(max-width: 999.98px)';
+  /** ng-flex-layout's `xs` breakpoint. */
+  private readonly mobileBreakpoint = '(max-width: 599.98px)';
 
-  protected filters;
-  protected showSearchOptions;
+  // protected filters;
+  // protected showSearchOptions;
 
   public taskSelected = false;
+  public isCommentsNarrow = false;
+  public commentsCollapsed = false;
 
   visiblePdfUrl: string;
 
@@ -50,14 +84,23 @@ export class InboxComponent implements OnInit, AfterViewInit {
     return this.inboxPanel?.nativeElement.getBoundingClientRect().width < 150;
   }
 
+  get isMobileView(): boolean {
+    return this.breakpointObserver.isMatched(this.mobileBreakpoint);
+  }
+
+  get commentsPanelCollapsed(): boolean {
+    return this.isCommentsNarrow && this.commentsCollapsed;
+  }
+
   constructor(
     private hotkeys: HotkeysService,
     private selectedTask: SelectedTaskService,
-    public mediaObserver: MediaObserver,
     public fileDownloader: FileDownloaderService,
-    private router: UIRouter,
+    private router: Router,
     public dialog: MatDialog,
     private userService: UserService,
+    private constants: DoubtfireConstants,
+    private breakpointObserver: BreakpointObserver,
   ) {
     this.selectedTask.currentPdfUrl$.subscribe((url) => {
       this.visiblePdfUrl = url;
@@ -67,35 +110,69 @@ export class InboxComponent implements OnInit, AfterViewInit {
       this.taskSelected = task != null;
     });
   }
-  ngAfterViewInit(): void {
-    console.log('ngAfterViewInit');
-    const markers = ['Admin', 'Convenor', 'Tutor', 'Student'];
 
-    if (markers.includes(this.userService.currentUser?.role)) {
+  ngOnInit(): void {
+    this.breakpointObserver
+      .observe(this.commentsBreakpoint)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(({matches}) => {
+        this.isCommentsNarrow = matches;
+        this.commentsCollapsed = matches;
+        window.dispatchEvent(new Event('resize'));
+      });
+
+    const registeredHotkeys = this.hotkeys.getHotkeys().map((hotkey) => hotkey.keys);
+
+    if (!registeredHotkeys.includes('shift.?')) {
       this.hotkeys.registerHelpModal(() => {
         const ref = this.dialog.open(HotkeysHelpComponent, {
           // width: '250px',
         });
-        ref.componentInstance.title = 'Formatif Marking Shortcuts';
+        ref.componentInstance.title = `${this.constants.ExternalName.value} Feedback Shortcuts`;
         ref.componentInstance.dismiss.subscribe(() => ref.close());
       });
     }
-  }
 
-  ngOnInit(): void {
-    // this.hotkeys
-    //   .addShortcut({
-    //     keys: 'control.c',
-    //     description: 'Mark selected task as complete',
-    //   })
-    //   .subscribe(() => this.selectedTask.selectedTask?.updateTaskStatus('complete'));
-
-    // this.hotkeys
-    //   .addShortcut({
-    //     keys: 'control.f',
-    //     description: 'Mark selected task as fix',
-    //   })
-    //   .subscribe(() => this.selectedTask.selectedTask?.updateTaskStatus('fix_and_resubmit'));
+    if (!registeredHotkeys.includes('control.shift.f')) {
+      this.hotkeys
+        .addShortcut({
+          keys: 'control.shift.f',
+          description: 'Mark selected task as fix',
+        })
+        .subscribe(() => this.selectedTask.selectedTask?.updateTaskStatus('fix_and_resubmit'));
+    }
+
+    if (!registeredHotkeys.includes('control.shift.c')) {
+      this.hotkeys
+        .addShortcut({
+          keys: 'control.Shift.c',
+          description: 'Mark selected task as complete',
+        })
+        .subscribe(() => {
+          const task = this.selectedTask.selectedTask;
+          if (!task) {
+            return;
+          }
+
+          if (!task.canMarkComplete) {
+            return;
+          }
+
+          task.updateTaskStatus('complete');
+        });
+    }
+
+    if (!registeredHotkeys.includes('control.shift.d')) {
+      this.hotkeys
+        .addShortcut({
+          keys: 'control.shift.d',
+          description: 'Mark selected task as discuss',
+        })
+        .subscribe(() => {
+          const task = this.selectedTask.selectedTask;
+          task?.updateTaskStatus(task.status === 'discuss' ? 'rediscuss' : 'discuss');
+        });
+    }
 
     this.dragMoveAudited$ = this.dragMove$.pipe(
       withLatestFrom(this.inboxStartSize$),
@@ -128,7 +205,23 @@ export class InboxComponent implements OnInit, AfterViewInit {
     window.dispatchEvent(new Event('resize'));
   }
 
+  ngOnDestroy(): void {
+    document.body.classList.remove('split-pane-resizing');
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.hotkeys.removeShortcuts('control.shift.d');
+    this.hotkeys.removeShortcuts('control.shift.f');
+    this.hotkeys.removeShortcuts('control.shift.c');
+    this.hotkeys.removeShortcuts('shift.?');
+  }
+
+  public toggleCommentsPanel(): void {
+    this.commentsCollapsed = !this.commentsCollapsed;
+    window.dispatchEvent(new Event('resize'));
+  }
+
   startedDragging(event: CdkDragStart, div: HTMLDivElement) {
+    document.body.classList.add('split-pane-resizing');
     event.source.element.nativeElement.classList.add('hovering');
     const w = div.getBoundingClientRect().width;
     this.inboxStartSize$.next(w);
@@ -139,25 +232,32 @@ export class InboxComponent implements OnInit, AfterViewInit {
     event.source.reset();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   stoppedDragging(event: CdkDragEnd, _div: HTMLDivElement) {
+    document.body.classList.remove('split-pane-resizing');
     event.source.element.nativeElement.classList.remove('hovering');
   }
 
   goToStudent(): void {
-    this.router.stateService.go('projects/dashboard', {
-      projectId: this.taskData.selectedTask.project.id,
-      tutor: true,
-      taskAbbr: '',
-    });
+    // this.router.navigateByUrl('projects/dashboard', {
+    //   projectId: this.taskData.selectedTask.project.id,
+    //   tutor: true,
+    //   taskAbbr: '',
+    // });
+    this.router.navigate(['/projects', this.taskData.selectedTask.project.id, 'dashboard']);
   }
 
   openPdfInNewTab(): void {
-    if (this.taskData.selectedTask.hasPdf) {
-      this.fileDownloader.downloadFile(
-        this.visiblePdfUrl,
-        `${this.taskData.selectedTask.definition.abbreviation}.pdf`,
-      );
+    if (!this.visiblePdfUrl || !this.taskData?.selectedTask) {
+      return;
     }
+
+    const task = this.taskData.selectedTask;
+    const taskSheetUrl = task.definition.getTaskPDFUrl();
+    const fileName =
+      this.visiblePdfUrl === taskSheetUrl
+        ? `${task.definition.abbreviation}-task-sheet.pdf`
+        : `${task.definition.abbreviation}.pdf`;
+
+    this.fileDownloader.downloadFile(this.visiblePdfUrl, fileName);
   }
 }
diff --git a/src/app/units/states/tasks/inbox/inbox.scss b/src/app/units/states/tasks/inbox/inbox.scss
deleted file mode 100644
index d5ba842b3e..0000000000
--- a/src/app/units/states/tasks/inbox/inbox.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-f-inbox {
-  height: $main-view-max-height;
-  display: flex;
-}
\ No newline at end of file
diff --git a/src/app/units/states/tasks/inbox/inbox.tpl.html b/src/app/units/states/tasks/inbox/inbox.tpl.html
deleted file mode 100644
index d77bb14cc2..0000000000
--- a/src/app/units/states/tasks/inbox/inbox.tpl.html
+++ /dev/null
@@ -1 +0,0 @@
-<f-inbox [unit]="unit" [task-data]="taskData" [unit-role]="unitRole" [task]="task" [project]="project"></f-inbox>
diff --git a/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.html b/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.html
new file mode 100644
index 0000000000..1aba157340
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.html
@@ -0,0 +1,10 @@
+<f-inbox
+  class="flex h-[calc((var(--vh,1vh)*100)-85px)]"
+  [filters]="filters"
+  [loading]="inboxLoading"
+  [showSearchOptions]="showSearchOptions"
+  [taskData]="taskData"
+  [unit]="unit"
+  [unitRole]="unitRole"
+  [viewType]="viewType"
+></f-inbox>
diff --git a/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.spec.ts b/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.spec.ts
new file mode 100644
index 0000000000..27c5515f65
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.spec.ts
@@ -0,0 +1,186 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {ActivatedRoute, ParamMap, Router, convertToParamMap} from '@angular/router';
+import {Observable, ReplaySubject, Subject, of} from 'rxjs';
+import {Unit} from 'src/app/api/models/unit';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {TaskService} from 'src/app/api/services/task.service';
+import {UnitService} from 'src/app/api/services/unit.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {UnitTaskInboxStateComponent} from './unit-task-inbox-state.component';
+
+function unitStub(id: number): Unit {
+  return {id, taskDefinitions: []} as unknown as Unit;
+}
+
+describe('UnitTaskInboxStateComponent', () => {
+  const emptyParamMap = convertToParamMap({});
+  let fetchedUnitIds: number[];
+  let unitFetches: Map<number, ReplaySubject<Unit>>;
+  let holdUnitFetches: boolean;
+  let paramMap$: Subject<ParamMap>;
+  let queryParamMap$: Subject<ParamMap>;
+
+  // Answers straight away unless a test holds the response back, so it can stage a
+  // request for the unit the user has already navigated away from.
+  function fetchUnit(unitId: number): Observable<Unit> {
+    fetchedUnitIds.push(unitId);
+    const response: ReplaySubject<Unit> = new ReplaySubject(1);
+    unitFetches.set(unitId, response);
+
+    if (!holdUnitFetches) {
+      response.next(unitStub(unitId));
+    }
+
+    return response;
+  }
+
+  beforeEach(async () => {
+    fetchedUnitIds = [];
+    unitFetches = new Map();
+    holdUnitFetches = false;
+    // Subjects rather than of(...), which completes on subscribe and so can never
+    // show a leak, which is what the teardown test below is for.
+    paramMap$ = new Subject();
+    queryParamMap$ = new Subject();
+
+    await TestBed.configureTestingModule({
+      declarations: [UnitTaskInboxStateComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              data: {routeMode: 'inbox'},
+              paramMap: emptyParamMap,
+              queryParamMap: emptyParamMap,
+            },
+            paramMap: paramMap$,
+            queryParamMap: queryParamMap$,
+            parent: {parent: {snapshot: {data: {}}}},
+          },
+        },
+        {provide: Router, useValue: {navigate: () => {}}},
+        {
+          provide: UnitService,
+          useValue: {
+            fetch: (unitId: number) => fetchUnit(unitId),
+            get: (unitId: number) => fetchUnit(unitId),
+          },
+        },
+        {provide: ProjectService, useValue: {loadStudents: () => of([])}},
+        {
+          provide: TaskService,
+          useValue: {queryTasksForTaskInbox: () => of([]), taskKeyFromString: () => null},
+        },
+        {provide: UserService, useValue: {currentUser: {id: 1, role: 'Convenor'}}},
+        {
+          provide: GlobalStateService,
+          useValue: {
+            setInboxState: () => {},
+            setNotInboxState: () => {},
+            setView: () => {},
+            currentViewAndEntitySubject$: {value: null},
+            loadedUnitRoles: {currentValues: []},
+          },
+        },
+        {provide: SelectedTaskService, useValue: {setSelectedTask: () => {}}},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(UnitTaskInboxStateComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  it('loads the new unit when the route resolves a different unit', () => {
+    const component = TestBed.createComponent(UnitTaskInboxStateComponent).componentInstance;
+    const unit$: Subject<Unit> = new Subject();
+    component.unit$ = unit$;
+    component.ngOnInit();
+
+    unit$.next(unitStub(101));
+    expect(fetchedUnitIds).toEqual([101]);
+    expect(component.unit.id).toBe(101);
+
+    unit$.next(unitStub(102));
+    expect(fetchedUnitIds).toEqual([101, 102]);
+    expect(component.unit.id).toBe(102);
+  });
+
+  it('does not reload when the route resolves the same unit again', () => {
+    const component = TestBed.createComponent(UnitTaskInboxStateComponent).componentInstance;
+    const unit$: Subject<Unit> = new Subject();
+    component.unit$ = unit$;
+    component.ngOnInit();
+
+    unit$.next(unitStub(201));
+    unit$.next(unitStub(201));
+
+    expect(fetchedUnitIds).toEqual([201]);
+  });
+
+  // Gates card step 7. The two route subscriptions used to be left running for the
+  // rest of the session, and unit$ alone cannot show that because first() closed it.
+  it('stops listening to the route once it is destroyed', () => {
+    const component = TestBed.createComponent(UnitTaskInboxStateComponent).componentInstance;
+    const unit$: Subject<Unit> = new Subject();
+    component.unit$ = unit$;
+    component.ngOnInit();
+
+    unit$.next(unitStub(301));
+    expect(paramMap$.observed).toBe(true);
+    expect(queryParamMap$.observed).toBe(true);
+
+    component.ngOnDestroy();
+    unit$.next(unitStub(302));
+
+    expect(fetchedUnitIds).toEqual([301]);
+    expect(unit$.observed).toBe(false);
+    expect(paramMap$.observed).toBe(false);
+    expect(queryParamMap$.observed).toBe(false);
+  });
+
+  // Gates the out-of-order case: the request for the unit we left must be dropped, not
+  // allowed to land late and put that unit back on screen.
+  it('drops a slow request for the unit that was navigated away from', () => {
+    const component = TestBed.createComponent(UnitTaskInboxStateComponent).componentInstance;
+    const unit$: Subject<Unit> = new Subject();
+    component.unit$ = unit$;
+    component.ngOnInit();
+
+    holdUnitFetches = true;
+
+    unit$.next(unitStub(401));
+    unit$.next(unitStub(402));
+    expect(fetchedUnitIds).toEqual([401, 402]);
+
+    unitFetches.get(402).next(unitStub(402));
+    expect(component.unit.id).toBe(402);
+
+    // Unit 401's request finally answers, long after the user moved on.
+    unitFetches.get(401).next(unitStub(401));
+
+    expect(component.unit.id).toBe(402);
+  });
+
+  it('drops filters that refer to the previous unit', () => {
+    const component = TestBed.createComponent(UnitTaskInboxStateComponent).componentInstance;
+    const unit$: Subject<Unit> = new Subject();
+    component.unit$ = unit$;
+    component.ngOnInit();
+
+    unit$.next(unitStub(501));
+    component.filters = {
+      tutorialIdSelected: 5010,
+      tutorials: [{id: 5010}] as never,
+      unitRoleIdSelected: 5011,
+    };
+
+    unit$.next(unitStub(502));
+
+    expect(component.filters).toEqual({});
+  });
+});
diff --git a/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.ts b/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.ts
new file mode 100644
index 0000000000..252117de24
--- /dev/null
+++ b/src/app/units/states/tasks/inbox/unit-task-inbox-state.component.ts
@@ -0,0 +1,355 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {
+  Observable,
+  Subject,
+  distinctUntilChanged,
+  first,
+  of,
+  switchMap,
+  takeUntil,
+  tap,
+} from 'rxjs';
+import {
+  ProjectService,
+  TaskDefinition,
+  Tutorial,
+  Unit,
+  UnitRole,
+  UnitService,
+  UserService,
+} from 'src/app/api/models/doubtfire-model';
+import {Task} from 'src/app/api/models/task';
+import {TaskService} from 'src/app/api/services/task.service';
+import {SelectedTaskService} from 'src/app/projects/states/dashboard/selected-task.service';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+
+export type UnitTaskViewType = 'inbox' | 'explorer' | 'moderation' | 'overflow';
+export type UnitTaskRouteMode = 'inbox' | 'definition' | 'moderation' | 'overflow';
+
+export interface TaskKey {
+  studentId: string | number;
+  taskDefAbbr: string;
+}
+
+export interface TaskFilters {
+  taskDefinition: TaskDefinition | null;
+  tutorials: Tutorial[] | null;
+  forceStream: boolean;
+  studentName: string | null;
+  tutorialIdSelected: string | number;
+  unitRoleIdSelected: string | number;
+  taskDefinitionIdSelected: number | TaskDefinition | null;
+}
+
+type TaskSource = (
+  unit: Unit,
+  taskDef?: TaskDefinition | number,
+  fetchMyStudentsOnly?: boolean,
+) => Observable<Task[]>;
+
+@Component({
+  selector: 'f-unit-task-inbox-state',
+  templateUrl: './unit-task-inbox-state.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitTaskInboxStateComponent implements OnInit, OnDestroy {
+  private static readonly UNIT_REFRESH_INTERVAL_MS = 60_000;
+  private static readonly lastUnitFetchAt: Map<number, number> = new Map();
+
+  @Input() public unit$: Observable<Unit>;
+  @Input() public routeMode: UnitTaskRouteMode = 'inbox';
+
+  public viewType: UnitTaskViewType = 'inbox';
+  public showSearchOptions = true;
+
+  public unit: Unit;
+  public unitRole: UnitRole;
+  public studentsLoaded = false;
+  public filters: Partial<TaskFilters> = {};
+
+  public get inboxLoading(): boolean {
+    return !(this.unit && this.unitRole && this.studentsLoaded);
+  }
+
+  public taskData: {
+    taskKey: TaskKey | null;
+    source: TaskSource;
+    selectedTask: Task | null;
+    onSelectedTaskChange: (task: Task | null) => void;
+    taskDefMode: boolean;
+  } = {
+    taskKey: null,
+    source: null,
+    selectedTask: null,
+    onSelectedTaskChange: (task: Task | null) => {
+      this.taskData.selectedTask = task;
+      this.taskData.taskKey = task?.taskKey() ?? null;
+      this.setTaskKeyAsUrlParams(task);
+    },
+    taskDefMode: false,
+  };
+
+  private readonly destroy$: Subject<void> = new Subject();
+
+  constructor(
+    private taskService: TaskService,
+    private globalStateService: GlobalStateService,
+    private userService: UserService,
+    private unitService: UnitService,
+    private projectService: ProjectService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private selectedTaskService: SelectedTaskService,
+  ) {}
+
+  ngOnInit(): void {
+    this.globalStateService.setInboxState();
+    this.clearSelectedTask();
+
+    this.routeMode = this.route.snapshot.data.routeMode ?? this.routeMode;
+    this.configureRouteMode();
+    this.setTaskKeyFromRoute();
+
+    const routeUnit = this.route.parent?.parent?.snapshot.data.unit;
+    if (!this.unit$ && routeUnit) {
+      this.unit$ = of(routeUnit);
+    }
+
+    // switchMap so a slow request for the unit we just left is cancelled rather than
+    // landing late and putting that unit back on screen.
+    this.unit$
+      .pipe(
+        distinctUntilChanged((a, b) => a?.id === b?.id),
+        tap(() => {
+          this.studentsLoaded = false;
+        }),
+        switchMap((currentUnit) => this.loadUnit(currentUnit.id).pipe(first())),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((unit) => this.loadInboxData(unit));
+
+    this.route.paramMap.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.setTaskKeyFromRoute();
+    });
+
+    this.route.queryParamMap.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.setTaskKeyFromRoute();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.globalStateService.setNotInboxState();
+    this.clearSelectedTask();
+  }
+
+  private clearSelectedTask(): void {
+    this.taskData.selectedTask = null;
+    this.taskData.taskKey = null;
+    this.selectedTaskService.setSelectedTask(null);
+  }
+
+  private loadUnit(unitId: number): Observable<Unit> {
+    if (this.shouldRefreshUnit(unitId)) {
+      return this.unitService
+        .fetch(unitId)
+        .pipe(tap(() => UnitTaskInboxStateComponent.lastUnitFetchAt.set(unitId, Date.now())));
+    }
+
+    return this.unitService.get(unitId);
+  }
+
+  private shouldRefreshUnit(unitId: number): boolean {
+    const lastFetchedAt = UnitTaskInboxStateComponent.lastUnitFetchAt.get(unitId);
+
+    return (
+      !lastFetchedAt ||
+      Date.now() - lastFetchedAt > UnitTaskInboxStateComponent.UNIT_REFRESH_INTERVAL_MS
+    );
+  }
+
+  private getTaskSource(): TaskSource {
+    switch (this.routeMode) {
+      case 'definition':
+        return this.taskService.queryTasksForTaskExplorer.bind(this.taskService);
+      case 'moderation':
+        return this.taskService.queryTasksForMentorModeration.bind(this.taskService);
+      case 'overflow':
+        return this.taskService.queryTasksForOverflow.bind(this.taskService);
+      case 'inbox':
+      default:
+        return this.taskService.queryTasksForTaskInbox.bind(this.taskService);
+    }
+  }
+
+  private configureRouteMode(): void {
+    this.taskData.source = this.getTaskSource();
+
+    switch (this.routeMode) {
+      case 'definition':
+        this.viewType = 'explorer';
+        this.showSearchOptions = true;
+        this.taskData.taskDefMode = true;
+        break;
+      case 'moderation':
+        this.viewType = 'moderation';
+        this.showSearchOptions = false;
+        this.taskData.taskDefMode = false;
+        break;
+      case 'overflow':
+        this.viewType = 'overflow';
+        this.showSearchOptions = false;
+        this.taskData.taskDefMode = false;
+        break;
+      case 'inbox':
+      default:
+        this.viewType = 'inbox';
+        this.showSearchOptions = false;
+        this.taskData.taskDefMode = false;
+        break;
+    }
+  }
+
+  private loadInboxData(unit: Unit): void {
+    this.unit = unit;
+    this.unitRole = this.findUnitRole(unit.id);
+    if (this.unitRole) {
+      this.unitRole.unit = unit;
+      this.globalStateService.setView(ViewType.UNIT, this.unitRole);
+    } else {
+      this.globalStateService.setView(ViewType.UNIT, unit);
+    }
+
+    // Filter objects contain tutorials and role ids from one unit. Reusing the
+    // previous object after a route change can leave the new unit filtered by a
+    // tutorial that does not exist there, making a successfully loaded inbox
+    // appear empty. Start from the new route's overrides for each unit instead.
+    this.filters = {...this.getFilterOverrides(unit)};
+
+    this.projectService
+      .loadStudents(unit)
+      .pipe(first(), takeUntil(this.destroy$))
+      .subscribe({
+        next: () => {
+          this.studentsLoaded = true;
+        },
+        error: () => {
+          this.studentsLoaded = true;
+        },
+      });
+  }
+
+  private getFilterOverrides(unit: Unit): Partial<TaskFilters> {
+    const selectedStudents = this.route.snapshot.queryParamMap.get('students');
+
+    switch (this.routeMode) {
+      case 'definition':
+        return {
+          tutorialIdSelected: selectedStudents ?? 'all',
+          taskDefinitionIdSelected: unit.taskDefinitions?.[0]?.id ?? null,
+        };
+      case 'moderation':
+      case 'overflow':
+        return {
+          tutorialIdSelected: selectedStudents ?? 'all',
+          taskDefinition: null,
+          taskDefinitionIdSelected: null,
+        };
+      case 'inbox':
+      default:
+        return selectedStudents ? {tutorialIdSelected: selectedStudents} : {};
+    }
+  }
+
+  private findUnitRole(unitId: number): UnitRole {
+    const currentView = this.globalStateService.currentViewAndEntitySubject$.value;
+
+    if (currentView?.viewType === ViewType.UNIT) {
+      const currentUnitRole = currentView.entity as UnitRole;
+      if (currentUnitRole?.unit?.id === unitId) {
+        return currentUnitRole;
+      }
+    }
+
+    let unitRole = this.globalStateService.loadedUnitRoles.currentValues.find(
+      (role) => role.unit.id === unitId,
+    );
+
+    if (
+      !unitRole &&
+      (this.userService.currentUser.role === 'Admin' ||
+        this.userService.currentUser.role === 'Auditor')
+    ) {
+      unitRole = this.userService.adminOrAuditorRoleFor(
+        this.userService.currentUser.role,
+        unitId,
+        this.userService.currentUser,
+      );
+    }
+
+    return unitRole;
+  }
+
+  private setTaskKeyAsUrlParams(task: Task | null): void {
+    const nextTaskKey = task?.taskKeyToUrlString() ?? null;
+    const currentTaskKey = this.currentTaskKeyFromRoute();
+
+    if (currentTaskKey === nextTaskKey) {
+      return;
+    }
+
+    if (this.route.parent?.parent?.snapshot.data.unit) {
+      const [studentId, taskDefAbbr] = nextTaskKey?.split('/') ?? [null, null];
+
+      this.router.navigate([], {
+        relativeTo: this.route,
+        replaceUrl: true,
+        queryParams: {
+          students: this.filters.tutorialIdSelected ?? null,
+          studentId,
+          taskDefAbbr,
+        },
+        queryParamsHandling: 'merge',
+      });
+      return;
+    }
+  }
+
+  private setTaskKeyFromUrlParams(taskKeyString?: string): void {
+    this.taskData.taskKey = this.taskService.taskKeyFromString(taskKeyString);
+  }
+
+  private setTaskKeyFromRoute(): void {
+    const studentId =
+      this.route.snapshot.queryParamMap.get('studentId') ??
+      this.route.snapshot.paramMap.get('studentId');
+    const taskDefAbbr =
+      this.route.snapshot.queryParamMap.get('taskDefAbbr') ??
+      this.route.snapshot.paramMap.get('taskDefAbbr');
+
+    if (studentId && taskDefAbbr) {
+      this.taskData.taskKey = {studentId, taskDefAbbr};
+      return;
+    }
+
+    this.setTaskKeyFromUrlParams();
+  }
+
+  private currentTaskKeyFromRoute(): string | null {
+    const studentId =
+      this.route.snapshot.queryParamMap.get('studentId') ??
+      this.route.snapshot.paramMap.get('studentId');
+    const taskDefAbbr =
+      this.route.snapshot.queryParamMap.get('taskDefAbbr') ??
+      this.route.snapshot.paramMap.get('taskDefAbbr');
+
+    if (!studentId || !taskDefAbbr) {
+      return null;
+    }
+
+    return `${studentId}/${taskDefAbbr}`;
+  }
+}
diff --git a/src/app/units/states/tasks/tasks-viewer.service.spec.ts b/src/app/units/states/tasks/tasks-viewer.service.spec.ts
deleted file mode 100644
index 79439a0410..0000000000
--- a/src/app/units/states/tasks/tasks-viewer.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TasksViewerService } from './tasks-viewer.service';
-
-describe('TasksViewerService', () => {
-  let service: TasksViewerService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(TasksViewerService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/src/app/units/states/tasks/tasks-viewer.service.ts b/src/app/units/states/tasks/tasks-viewer.service.ts
deleted file mode 100644
index f2b2b627ed..0000000000
--- a/src/app/units/states/tasks/tasks-viewer.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TasksViewerService {
-  selectedTaskDef = new Subject<TaskDefinition>();
-  taskSelected = new Subject<boolean>();
-
-  public setSelectedTaskDef(taskDef: TaskDefinition) {
-    this.selectedTaskDef.next(taskDef);
-    this.taskSelected.next(true);
-  }
-
-  constructor() { }
-}
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.html b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.html
deleted file mode 100644
index 845e7203a5..0000000000
--- a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!-- Wide Window Display -->
-<div fxLayout="column" fxFill fxHide fxShow.gt-sm>
-  <div fxLayoutAlign="center stretch" fxFill>
-    <!-- Panel 1 -->
-    <div #tasklistpanel id="tasklistpanel" class="vertical-panel min-w-12">
-      <f-unit-task-list [unitTasks]="taskDefs"></f-unit-task-list>
-    </div>
-
-    <div class="vertical-spacer"></div>
-
-    <!-- Panel 2 -->
-    <div class="vertical-panel w-full h-full">
-      <div class="flex flex-col h-full">
-        <div class="shrink">
-          <f-task-details-view [taskDef]="selectedTaskDef" [unit]="unit"></f-task-details-view>
-        </div>
-        <f-task-sheet-view class="h-full" [taskDef]="selectedTaskDef"> </f-task-sheet-view>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Narrow Window / Mobile Display -->
-<div #mobile fxLayout="row" fxFill fxHide fxShow.lt-md>
-  <div class="vertical-panel mobile" [hidden]="taskSelected">
-    <f-unit-task-list [unitTasks]="taskDefs"></f-unit-task-list>
-  </div>
-
-  <div [hidden]="!taskSelected" fxLayout="column" fxFill fxLayoutAlign="space-between stretch">
-    <div class="flex items-center">
-      <button mat-icon-button aria-label="Back to task list" matTooltip="Back to list" (click)="taskSelected = false">
-        <mat-icon>arrow_back_ios_new</mat-icon>
-      </button>
-    </div>
-
-    <div fxFlex class="vertical-panel mobile">
-      <f-task-details-view [taskDef]="selectedTaskDef" [unit]="unit"></f-task-details-view>
-    </div>
-  </div>
-</div>
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.scss b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.scss
deleted file mode 100644
index cddaf52b1d..0000000000
--- a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.vertical-panel {
-  border-radius: 10px;
-  background-color: white;
-  padding: 8px;
-  min-width: 60px;
-  width: 450px;
-  height: 100%;
-
-  &.mobile {
-      max-width: 100%;
-      width: 100%;
-      padding: 0px;
-  }
-}
-
-.vertical-spacer {
-  background-color: #f5f5f5;
-  z-index: 200;
-  width: 10px
-}
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.spec.ts b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.spec.ts
deleted file mode 100644
index bc7a35f057..0000000000
--- a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TasksViewerComponent } from './tasks-viewer.component';
-
-describe('TasksViewerComponent', () => {
-  let component: TasksViewerComponent;
-  let fixture: ComponentFixture<TasksViewerComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [TasksViewerComponent],
-    });
-    fixture = TestBed.createComponent(TasksViewerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.ts b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.ts
deleted file mode 100644
index af43e37ca4..0000000000
--- a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { TasksViewerService } from '../tasks-viewer.service';
-import { Unit } from 'src/app/api/models/unit';
-
-@Component({
-  selector: 'f-tasks-viewer',
-  templateUrl: './tasks-viewer.component.html',
-  styleUrls: ['./tasks-viewer.component.scss'],
-})
-export class TasksViewerComponent implements OnInit {
-  @Input() taskDefs: TaskDefinition[];
-  @Input() unit: Unit;
-  selectedTaskDef: TaskDefinition;
-  taskSelected: boolean;
-
-  constructor(private taskViewerService: TasksViewerService) {}
-
-  ngOnInit() {
-    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
-      this.selectedTaskDef = taskDef;
-    });
-
-    this.taskViewerService.taskSelected.subscribe((taskSelected) => {
-      this.taskSelected = taskSelected;
-    });
-  }
-}
diff --git a/src/app/units/states/tasks/tasks.coffee b/src/app/units/states/tasks/tasks.coffee
deleted file mode 100644
index 141e0364c6..0000000000
--- a/src/app/units/states/tasks/tasks.coffee
+++ /dev/null
@@ -1,68 +0,0 @@
-angular.module('doubtfire.units.states.tasks', [
-  'doubtfire.units.states.tasks.inbox'
-  'doubtfire.units.states.tasks.definition'
-  'doubtfire.units.states.tasks.viewer'
-])
-
-#
-# Teacher child state for units for task-related activites
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/tasks', {
-    abstract: true
-    parent: 'units/index'
-    url: '/tasks'
-    controller: 'UnitsTasksStateCtrl'
-    template: '<ui-view/>'
-    data:
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
-   }
-)
-
-.controller('UnitsTasksStateCtrl', ($scope, $state, newTaskService, listenerService, $transition$) ->
-  # Cleanup
-  listeners = listenerService.listenTo($scope)
-
-  # Task data wraps:
-  #  * the URL task composite key (project username + task def abbreviation) sourced from the URL,
-  #  * the task source used for the task inbox list,
-  #  * the actual selectedTask reference
-  #  * the callback for when a task is updated (accepts the new task)
-  $scope.taskData = {
-    taskKey: null
-    source: null
-    selectedTask: null
-    onSelectedTaskChange: (task) ->
-      taskKey = task?.taskKey()
-      $scope.taskData.taskKey = taskKey
-      setTaskKeyAsUrlParams(task)
-  }
-
-  # Sets URL parameters for the task key
-  setTaskKeyAsUrlParams = (task) ->
-    # Change URL of new task without notify
-    $state.go($state.$current, {taskKey: task?.taskKeyToUrlString()}, {notify: false})
-
-  # Sets task key from URL parameters
-  setTaskKeyFromUrlParams = (taskKeyString) ->
-    # Propagate selected task change downward to search for actual task
-    # inside the task inbox list
-    $scope.taskData.taskKey = newTaskService.taskKeyFromString(taskKeyString)
-
-  # Child states will use taskKey to notify what task has been
-  # selected by the child on first load.
-  taskKey = $transition$.params().taskKey
-  setTaskKeyFromUrlParams(taskKey)
-
-  # Whenever the state is changed, we look at the taskKey in the URL params
-  # see if we can set it as an actual taskKey object
-  listeners.push $scope.$on '$stateChangeStart', ($event, toState, toParams, fromState, fromParams) ->
-    setTaskKeyFromUrlParams(toParams.taskKey)
-    # Use preventDefault to prevent destroying the child state's
-    # scope if they are the same states. Otherwise, if they are
-    # the same, we destroy the state's scope and recreate it again
-    # unnecessarily; doing so will cause a re-request in the task
-    # list which is not required.
-    $event.preventDefault() if fromState == toState && fromParams.unitId == toParams.unitId
-)
diff --git a/src/app/units/states/tasks/viewer/directives/directives.coffee b/src/app/units/states/tasks/viewer/directives/directives.coffee
deleted file mode 100644
index 1624d23757..0000000000
--- a/src/app/units/states/tasks/viewer/directives/directives.coffee
+++ /dev/null
@@ -1,5 +0,0 @@
-angular.module('doubtfire.units.states.tasks.viewer.directives', [
-  # 'doubtfire.units.states.tasks.viewer.directives.unit-task-list'
-  # 'doubtfire.units.states.tasks.viewer.directives.task-sheet-view'
-  # 'doubtfire.units.states.tasks.viewer.directives.task-details-view'
-])
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.html b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.html
deleted file mode 100644
index 2ee4198b7c..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="w-full h-full overflow-auto">
-  <div [hidden]="!taskDef">
-    <f-task-description-card [taskDef]="taskDef" [unit]="unit"></f-task-description-card>
-  </div>
-
-  <div [hidden]="taskDef" fxFlexFill fxLayout="column" fxLayoutAlign="center center">
-    <mat-icon>subtitles_off</mat-icon>
-  </div>
-</div>
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.scss b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.scss
deleted file mode 100644
index dda643e643..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use '@angular/material' as mat;
-
-@import '../../../../../../../theme.scss';
-
-$my-palette: mat.define-palette($md-formatif);
-
-.title {
-  font-size: 16px;
-  font-weight: bold;
-  padding-bottom: 15px;
-}
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.ts b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.ts
deleted file mode 100644
index 57ea0b7993..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
-import { TasksViewerService } from '../../../tasks-viewer.service';
-
-@Component({
-  selector: 'f-task-details-view',
-  templateUrl: './f-task-details-view.component.html',
-  styleUrls: ['./f-task-details-view.component.scss'],
-})
-export class FTaskDetailsViewComponent implements OnInit {
-  @Input() taskDef: TaskDefinition;
-  @Input() unit: Unit;
-
-  constructor(private tasksViewerService: TasksViewerService) {}
-
-  ngOnInit() {
-    this.tasksViewerService.selectedTaskDef.subscribe((taskDef) => {
-      this.taskDef = taskDef;
-    });
-  }
-}
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.html b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.html
deleted file mode 100644
index af1f34d5ae..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="w-full h-full overflow-auto">
-  @switch (taskDef) { @case (taskDef) { @if (taskDef?.hasTaskSheet) {
-
-  <f-pdf-viewer [pdfUrl]="taskDef.getTaskPDFUrl()"></f-pdf-viewer>
-
-  } @else {
-
-  <div fxFlexFill fxLayout="column" fxLayoutAlign="center center">
-    <mat-icon>subtitles_off</mat-icon> No Task Sheet
-  </div>
-
-  } } }
-
-  <!-- The PDF Viewer -->
-
-  <!-- Render if no PDF URL is available for the current view -->
-</div>
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.ts b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.ts
deleted file mode 100644
index acddd72281..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { TasksViewerService } from '../../../tasks-viewer.service';
-
-@Component({
-  selector: 'f-task-sheet-view',
-  templateUrl: './f-task-sheet-view.component.html',
-  styleUrls: ['./f-task-sheet-view.component.scss'],
-})
-export class FTaskSheetViewComponent implements OnInit {
-  @Input() taskDef: TaskDefinition;
-
-  constructor(private taskViewerService: TasksViewerService) {}
-
-  ngOnInit(): void {
-    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
-      this.taskDef = taskDef;
-    });
-  }
-}
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.html b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.html
deleted file mode 100644
index 1ca78334f0..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<div class="task-list" div fxLayout="column" fxLayoutAlign="none">
-  <!-- Search Box -->
-  <div class="omnisearch rounded-t-2xl md:rounded-2xl">
-    <div class="flex items-center">
-      <button mat-icon-button aria-label="Search Icon" disabled class="flex-none flex items-center">
-        <mat-icon class="flex items-center" disabled>search</mat-icon>
-      </button>
-      <div class="grow">
-        <input
-          class="search"
-          autocomplete="off"
-          spellcheck="false"
-          type="text"
-          placeholder="Search Tasks"
-          [(ngModel)]="taskSearch"
-          (ngModelChange)="applyFilters()"
-        />
-      </div>
-    </div>
-  </div>
-
-  <!-- Scrollable Unit Task List -->
-  <div class="tasks-viewport scrollable" itemSize="60">
-    <mat-selection-list #tasks [multiple]="false">
-      @if (filteredTasks.length === 0) {
-        <div class="text-center text-muted">No tasks to display</div>
-      }
-      @for (task of filteredTasks; track task) {
-        <mat-list-item class="clearfix p-0 h-[60px]" [disableRipple]="true">
-          @if (task) {
-            <div
-              class="flex w-full item-content items-center hover:bg-gray-50"
-              (click)="setSelectedTask(task)"
-              [ngClass]="{
-                selected: isSelectedTask(task)
-              }"
-            >
-              <div class="task-entry w-full flex items-center">
-                <div class="task-list-data flex items-center justify-center">
-                  <f-task-badge [taskDef]="task"></f-task-badge>
-                  <div class="flex-col ml-4">
-                    <h4 class="task-title line-clamp-1 mt-1">{{ task.name }}</h4>
-
-                    <span class="flex">
-                      @if (task.isGroupTask()) {
-                        <mat-icon class="text-gray-400 scale-75">group</mat-icon>
-                      }
-                      <div class="task-details">{{ gradeNames[task.targetGrade] }} Task</div>
-                    </span>
-
-                    <div></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          }
-        </mat-list-item>
-      }
-    </mat-selection-list>
-  </div>
-</div>
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.scss b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.scss
deleted file mode 100644
index 0d460d0ffd..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@use '@angular/material' as mat;
-
-@import '../../../../../../../theme.scss';
-@import '../../../../../../../styles/mixins/scrollable.scss';
-
-$my-palette: mat.define-palette($md-formatif);
-
-:host {
-  --background-gray: rgba(0, 0, 0, 0.04);
-  padding-right: 8px;
-}
-
-::ng-deep .cdk-virtual-scroll-content-wrapper {
-  width: 100%;
-}
-
-.task-list {
-  height: 100%;
-}
-
-.scrollable {
-  height: 100%;
-  @include scrollable();
-}
-
-.omnisearch {
-  font-size: 15px;
-  padding-right: 10px;
-  text-align: left;
-
-  &.expanded {
-    height: 100%;
-  }
-
-  .search {
-    background-color: transparent;
-    border: hidden;
-    outline: none;
-  }
-
-  .mdc-icon-button {
-    display: flex;
-  }
-}
-
-.full-width {
-  width: 100%;
-}
-
-.task-list-data {
-  margin-top: 0px;
-  padding-left: 6px;
-
-  .task-title {
-    font-size: 15px;
-    margin-bottom: -2px;
-    margin-top: 8px;
-  }
-
-  .task-details {
-    margin-bottom: 0px;
-    font-size: 12px;
-  }
-}
-
-.mat-mdc-list-item .item-content {
-  height: 60px;
-  border-radius: 6px;
-}
-
-.mat-mdc-list-item .item-content:hover {
-  cursor: pointer;
-}
-
-.mat-mdc-list-item .item-content.selected {
-  background-color: var(--background-gray);
-}
-
-.task-inbox.narrow-width .mat-mdc-list-item .item-content.selected {
-  margin-right: 12px;
-}
-
-.tasks-viewport {
-  height: 100%;
-}
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.spec.ts b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.spec.ts
deleted file mode 100644
index dc592e52cc..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FUnitTaskListComponent } from './f-unit-task-list.component';
-
-describe('FUnitTaskListComponent', () => {
-  let component: FUnitTaskListComponent;
-  let fixture: ComponentFixture<FUnitTaskListComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [FUnitTaskListComponent],
-    });
-    fixture = TestBed.createComponent(FUnitTaskListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.ts b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.ts
deleted file mode 100644
index 2212477466..0000000000
--- a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {Grade} from 'src/app/api/models/grade';
-import {TaskDefinition} from 'src/app/api/models/doubtfire-model';
-import {TaskDefinitionNamePipe} from 'src/app/common/filters/task-definition-name.pipe';
-import {TasksViewerService} from '../../../tasks-viewer.service';
-
-@Component({
-  selector: 'f-unit-task-list',
-  templateUrl: './f-unit-task-list.component.html',
-  styleUrls: ['./f-unit-task-list.component.scss'],
-})
-export class FUnitTaskListComponent implements OnInit {
-  @Input() unitTasks: TaskDefinition[];
-  filteredTasks: TaskDefinition[]; // list of tasks which match the taskSearch term
-  taskSearch: string = ''; // task search term from user input
-  taskDefinitionNamePipe = new TaskDefinitionNamePipe();
-  protected gradeNames: string[] = Grade.GRADES;
-  selectedTaskDef: TaskDefinition;
-  taskSelected: boolean;
-
-  constructor(private taskViewerService: TasksViewerService) {}
-
-  applyFilters() {
-    this.filteredTasks = this.taskDefinitionNamePipe.transform(this.unitTasks, this.taskSearch);
-  }
-
-  ngOnInit(): void {
-    this.applyFilters();
-
-    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
-      this.selectedTaskDef = taskDef;
-    });
-    this.taskViewerService.selectedTaskDef.next(this.unitTasks[0]);
-
-    this.taskViewerService.taskSelected.subscribe((taskSelected) => {
-      this.taskSelected = taskSelected;
-    });
-  }
-
-  setSelectedTask(task: TaskDefinition) {
-    this.taskViewerService.setSelectedTaskDef(task);
-  }
-
-  isSelectedTask(task: TaskDefinition) {
-    return this.selectedTaskDef.id == task.id;
-  }
-}
diff --git a/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.coffee b/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.coffee
deleted file mode 100644
index aa30c611e4..0000000000
--- a/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.coffee
+++ /dev/null
@@ -1,41 +0,0 @@
-angular.module('doubtfire.units.states.tasks.viewer.directives.unit-task-list', [])
-
-.directive('unitTaskList', ->
-  restrict: 'E'
-  templateUrl: 'units/states/tasks/viewer/directives/unit-task-list/unit-task-list.tpl.html'
-  scope:
-    unit: '='
-    # Function to invoke to refresh tasks
-    refreshTasks: '=?'
-    unitTasks: '='
-    selectedTaskDef: '='
-  controller: ($scope, $timeout, $filter, gradeService, listenerService) ->
-    listeners = listenerService.listenTo($scope)
-    # Set up initial filtered tasks
-    $scope.filteredTasks = []
-    # Set up filters
-    $scope.filters = {
-      taskSearch:null
-    }
-    # Sets new filteredTasks variable
-    applyFilters = ->
-      filteredTasks = $filter('taskDefinitionName')($scope.unitTasks, $scope.filters.taskSearch)
-      filteredTasks = $filter('orderBy')(filteredTasks, 'task.seq')
-      $scope.filteredTasks = filteredTasks
-    # Apply filters first-time
-    applyFilters()
-    # When refreshing tasks, we are just reloading the active tasks
-    $scope.refreshTasks = applyFilters
-    # Expose grade service names
-    $scope.gradeNames = gradeService.grades
-    # On task name change, reapply filters
-    $scope.taskNameChanged = applyFilters
-    # UI call to change currently selected task
-    $scope.setSelectedTask = (task) ->
-      $scope.selectedTaskDef = task
-
-
-    $scope.isSelectedTask = (task) ->
-      # Compare by definition
-      task.id == $scope.selectedTaskDef?.id
-)
diff --git a/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.scss b/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.scss
deleted file mode 100644
index b17c5d3b7b..0000000000
--- a/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-unit-task-list {
-  @include task-list();
-}
diff --git a/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.tpl.html b/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.tpl.html
deleted file mode 100644
index 4a0db812c4..0000000000
--- a/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.tpl.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<div class="panel panel-primary">
-  <div class="panel-heading">
-    <input
-      type="text"
-      class="form-control"
-      ng-model="filters.taskSearch"
-      ng-change="taskNameChanged()"
-      placeholder="Search tasks..."
-    />
-  </div>
-  <ul class="list-group">
-    <li
-      class="list-group-item list-group-item-task clearfix {{task.statusClass()}}"
-      id="{{task.taskKeyToIdString()}}"
-      ng-click="setSelectedTask(task)"
-      ng-class="{selected: isSelectedTask(task)}"
-      ng-repeat="task in filteredTasks"
-    >
-      <div class="task-data">
-        <h4 style="margin-bottom: 0" class="mt-0 mb-1">{{task.name}}</h4>
-        <p style="margin-bottom: 0" class="list-group-item-text my-0">
-          {{task.abbreviation}} - {{gradeNames[task.targetGrade]}} Task
-        </p>
-      </div>
-      <!--/task-data-->
-    </li>
-    <!--/task-->
-    <li ng-show="filteredTasks.length == 0" class="list-group-item text-center text-muted">No tasks to display.</li>
-  </ul>
-</div>
diff --git a/src/app/units/states/tasks/viewer/viewer.coffee b/src/app/units/states/tasks/viewer/viewer.coffee
deleted file mode 100644
index 0dde935439..0000000000
--- a/src/app/units/states/tasks/viewer/viewer.coffee
+++ /dev/null
@@ -1,23 +0,0 @@
-angular.module('doubtfire.units.states.tasks.viewer', [
-  'doubtfire.units.states.tasks.viewer.directives'
-])
-
-#
-# Give feedback when on one-to-one for students (i.e., tasksRequiringFeedback)
-#
-.config(($stateProvider) ->
-  $stateProvider.state 'units/tasks/viewer', {
-    parent: 'units/tasks'
-    url: '/viewer'
-    templateUrl: "units/states/tasks/viewer/viewer.tpl.html"
-    controller: "TaskViewerStateCtrl"
-    data:
-      task: "Task List"
-      pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
-   }
-)
-
-.controller('TaskViewerStateCtrl', ($scope) ->
-  $scope.taskDefs = $scope.unit.taskDefinitions
-)
diff --git a/src/app/units/states/tasks/viewer/viewer.scss b/src/app/units/states/tasks/viewer/viewer.scss
deleted file mode 100644
index 382bfdc247..0000000000
--- a/src/app/units/states/tasks/viewer/viewer.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-f-tasks-viewer {
-  height: calc($main-view-max-height + 70px); // temporary fix to reclaim the footer region for this specific page
-  display: flex;
-}
diff --git a/src/app/units/states/tasks/viewer/viewer.tpl.html b/src/app/units/states/tasks/viewer/viewer.tpl.html
deleted file mode 100644
index 358d6f33a2..0000000000
--- a/src/app/units/states/tasks/viewer/viewer.tpl.html
+++ /dev/null
@@ -1 +0,0 @@
-<f-tasks-viewer [task-defs]="taskDefs" [unit]="unit"></f-tasks-viewer>
diff --git a/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.html b/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.html
new file mode 100644
index 0000000000..1229204bf5
--- /dev/null
+++ b/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.html
@@ -0,0 +1,21 @@
+<div class="size-full overflow-auto">
+  <div [hidden]="!taskDef">
+    <mat-expansion-panel
+      [expanded]="true"
+      (closed)="panelOpenState.set(false)"
+      (opened)="panelOpenState.set(true)"
+    >
+      <mat-expansion-panel-header>
+        <mat-panel-title> Task Details </mat-panel-title>
+        <mat-panel-description>
+          {{ panelOpenState() ? 'Hide' : 'Show' }} task details
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <f-task-description-card [taskDef]="taskDef" [unit]="unit"></f-task-description-card>
+    </mat-expansion-panel>
+  </div>
+
+  <div class="flex size-full flex-col items-center justify-center" [hidden]="taskDef">
+    <mat-icon>subtitles_off</mat-icon>
+  </div>
+</div>
diff --git a/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.scss b/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.scss
new file mode 100644
index 0000000000..dea6d51225
--- /dev/null
+++ b/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.scss
@@ -0,0 +1,5 @@
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  padding-bottom: 15px;
+}
diff --git a/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.ts b/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.ts
new file mode 100644
index 0000000000..5360b13f58
--- /dev/null
+++ b/src/app/units/task-viewer/directives/task-details-view/task-details-view.component.ts
@@ -0,0 +1,17 @@
+import {ChangeDetectionStrategy, Component, Input, signal} from '@angular/core';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+
+@Component({
+  selector: 'f-task-details-view',
+  templateUrl: './task-details-view.component.html',
+  styleUrls: ['./task-details-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FTaskDetailsViewComponent {
+  @Input() taskDef: TaskDefinition;
+  @Input() unit: Unit;
+
+  public readonly panelOpenState = signal(false);
+}
diff --git a/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.html b/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.html
new file mode 100644
index 0000000000..a9162aedce
--- /dev/null
+++ b/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.html
@@ -0,0 +1,17 @@
+<div class="h-screen w-full overflow-auto">
+  @switch (taskDef) {
+    @case (taskDef) {
+      @if (taskDef?.hasTaskSheet) {
+        <f-pdf-viewer [pdfUrl]="taskDef.getTaskPDFUrl()"></f-pdf-viewer>
+      } @else {
+        <div class="flex size-full flex-col items-center justify-center">
+          <mat-icon>subtitles_off</mat-icon> No Task Sheet
+        </div>
+      }
+    }
+  }
+
+  <!-- The PDF Viewer -->
+
+  <!-- Render if no PDF URL is available for the current view -->
+</div>
diff --git a/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.scss b/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.spec.ts b/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.spec.ts
new file mode 100644
index 0000000000..2767eb6e97
--- /dev/null
+++ b/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.spec.ts
@@ -0,0 +1,27 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FTaskSheetViewComponent} from './task-sheet-view.component';
+
+describe('FTaskSheetViewComponent', () => {
+  let component: FTaskSheetViewComponent;
+  let fixture: ComponentFixture<FTaskSheetViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FTaskSheetViewComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(FTaskSheetViewComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FTaskSheetViewComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.ts b/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.ts
new file mode 100644
index 0000000000..7f027aab91
--- /dev/null
+++ b/src/app/units/task-viewer/directives/task-sheet-view/task-sheet-view.component.ts
@@ -0,0 +1,13 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+
+@Component({
+  selector: 'f-task-sheet-view',
+  templateUrl: './task-sheet-view.component.html',
+  styleUrls: ['./task-sheet-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FTaskSheetViewComponent {
+  @Input() taskDef: TaskDefinition;
+}
diff --git a/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.html b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.html
new file mode 100644
index 0000000000..9d137b4ba4
--- /dev/null
+++ b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.html
@@ -0,0 +1,350 @@
+<ng-template #TaskStatusBadges let-task="task">
+  <div
+    class="relative mr-1 flex shrink-0 items-center justify-center"
+    [ngClass]="{
+      'pr-0.5': !isCollapsed,
+    }"
+  >
+    <status-icon [compact]="isCollapsed" [status]="task.status"></status-icon>
+
+    <div
+      class="absolute -top-2 right-0.5 flex items-center gap-px drop-shadow-[0_4px_2px_rgba(0,0,0,0.15)]"
+    >
+      @if (task.numNewComments > 0) {
+        <span
+          class="flex size-[20px] items-center justify-center rounded-full bg-blue-500 text-[12px] leading-none font-bold text-white"
+          role="img"
+          [attr.aria-label]="newCommentsLabel(task)"
+        >
+          {{ task.numNewComments }}
+        </span>
+      }
+      @if (task.similaritiesDetected) {
+        <!--
+          The label matches the tooltip exactly. When they differ the tooltip adds
+          an aria-describedby and a screen reader reads the text twice.
+        -->
+        <span
+          aria-label="Similarities Detected"
+          class="flex size-[20px] items-center justify-center rounded-full bg-[#da532c]"
+          matTooltip="Similarities Detected"
+          role="img"
+        >
+          <mat-icon
+            aria-hidden="true"
+            class="!h-[12px] !w-[12px] !text-[12px] font-bold text-white"
+          >
+            visibility
+          </mat-icon>
+        </span>
+      }
+    </div>
+
+    <div class="absolute right-0.5 -bottom-2 flex items-center gap-px text-[10px] leading-none">
+      @if (task.hasGrade()) {
+        <span
+          class="mr-3 flex size-5.5 items-center justify-center rounded-full bg-gray-800 font-bold text-white drop-shadow-[0_-4px_2px_rgba(0,0,0,0.15)]"
+        >
+          <span>
+            {{ task.gradeDesc() }}
+          </span>
+        </span>
+      }
+      @if (task.hasQualityPoints()) {
+        <span
+          class="flex size-[22px] items-center justify-center rounded-full bg-formatif-blue font-bold text-white drop-shadow-[0_-4px_2px_rgba(0,0,0,0.15)]"
+        >
+          <span class="mr-px mb-[6px] text-[8px]">{{ task.qualityPts }}</span>
+          <span class="font-extrabold"> &frasl; </span>
+          <span class="mt-[6px] ml-px text-[8px]">{{ task.definition.maxQualityPts }}</span>
+        </span>
+      }
+      @if (task.isDueSoon() && !task.inFinalState()) {
+        <span
+          aria-label="Due soon"
+          class="flex size-[20px] items-center justify-center rounded-full bg-[#fab143] drop-shadow-[0_-4px_2px_rgba(0,0,0,0.15)]"
+          role="img"
+        >
+          <mat-icon
+            aria-hidden="true"
+            class="!h-[12px] !w-[12px] !text-[12px] font-bold text-black"
+          >
+            schedule
+          </mat-icon>
+        </span>
+      }
+      @if (task.betweenDueDateAndDeadlineDate() && !task.isPastDeadline() && !task.inFinalState()) {
+        <span
+          aria-label="Due, deadline not yet passed"
+          class="flex size-[20px] items-center justify-center rounded-full bg-[#da532c] drop-shadow-[0_-4px_2px_rgba(0,0,0,0.15)]"
+          role="img"
+        >
+          <mat-icon
+            aria-hidden="true"
+            class="!h-[12px] !w-[12px] !text-[12px] font-bold text-white"
+          >
+            schedule
+          </mat-icon>
+        </span>
+      }
+      <!--
+        Same colour as the due badge above, so the glyph has to differ too.
+        Colour alone is not enough to tell the two states apart.
+      -->
+      @if (task.isPastDeadline() && !task.inFinalState()) {
+        <span
+          aria-label="Past deadline"
+          class="flex size-[20px] items-center justify-center rounded-full bg-[#da532c] drop-shadow-[0_-4px_2px_rgba(0,0,0,0.15)]"
+          role="img"
+        >
+          <mat-icon
+            aria-hidden="true"
+            class="!h-[12px] !w-[12px] !text-[12px] font-bold text-white"
+          >
+            event_busy
+          </mat-icon>
+          <strong aria-hidden="true" class="h-min font-bold text-white">!</strong>
+        </span>
+      }
+    </div>
+  </div>
+</ng-template>
+
+<div
+  class="task-list flex min-h-0 flex-col"
+  [ngClass]="{
+    'p-1': isCollapsed,
+    'p-2': !isCollapsed,
+  }"
+>
+  @if (!isCollapsed) {
+    <div class="omnisearch rounded-t-2xl md:rounded-2xl">
+      <div class="flex items-center justify-between">
+        <div class="flex min-w-0 flex-1 items-center">
+          <mat-icon aria-hidden="true" class="flex items-center">search</mat-icon>
+
+          <input
+            aria-label="Search tasks"
+            autocomplete="off"
+            class="search w-full text-gray-900 placeholder:text-gray-600 placeholder:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-formatif-blue"
+            placeholder="Search Tasks"
+            spellcheck="false"
+            type="text"
+            [(ngModel)]="searchText"
+            (ngModelChange)="applyFilters()"
+          />
+        </div>
+        <button
+          aria-label="Task list filters"
+          mat-icon-button
+          matTooltip="Task list filters"
+          [matMenuTriggerFor]="taskListFiltersMenu"
+        >
+          <mat-icon
+            class="text-gray-500"
+            matBadgeColor="accent"
+            matBadgeSize="small"
+            [matBadge]="activeViewPreferenceCount || null"
+            >tune</mat-icon
+          >
+        </button>
+        <mat-menu #taskListFiltersMenu="matMenu" class="task-list-filters-menu" xPosition="after">
+          <div class="px-3 py-2" (click)="$event.stopPropagation()">
+            <div class="mb-1 text-xs font-bold tracking-normal text-gray-500 uppercase">
+              Sort tasks
+            </div>
+            <div class="mb-2">
+              @for (option of sortOptions; track option.value) {
+                <button
+                  class="flex h-10 w-full items-center gap-2 px-2 text-left text-sm hover:bg-gray-50"
+                  type="button"
+                  [ngClass]="{
+                    'bg-blue-50 text-formatif-blue': viewPreferences.sortBy === option.value,
+                    'text-gray-700': viewPreferences.sortBy !== option.value,
+                  }"
+                  (click)="setSortBy(option.value)"
+                >
+                  <mat-icon class="task-list-menu-icon shrink-0">{{ option.icon }}</mat-icon>
+                  <span class="min-w-0 flex-1 truncate">{{ option.label }}</span>
+                  <mat-icon
+                    class="task-list-menu-icon shrink-0"
+                    [ngClass]="{
+                      invisible: viewPreferences.sortBy !== option.value,
+                    }"
+                  >
+                    {{ sortStateIconFor(option) }}
+                  </mat-icon>
+                </button>
+              }
+            </div>
+
+            <div class="mb-1 text-xs font-bold tracking-normal text-gray-500 uppercase">
+              Filters
+            </div>
+            <div class="flex flex-col gap-1">
+              <mat-checkbox
+                color="primary"
+                [ngModel]="viewPreferences.hideCompleted"
+                (ngModelChange)="toggleHideCompleted($event)"
+              >
+                Hide completed tasks
+              </mat-checkbox>
+              <mat-checkbox
+                color="primary"
+                [disabled]="!project"
+                [ngModel]="viewPreferences.showAboveTargetGrade"
+                (ngModelChange)="toggleShowAboveTargetGrade($event)"
+              >
+                Show tasks beyond target grade
+              </mat-checkbox>
+            </div>
+
+            <div class="mt-2 flex items-center justify-end gap-2 text-xs text-gray-500">
+              <button
+                class="shrink-0 text-formatif-blue disabled:text-gray-400"
+                mat-button
+                type="button"
+                [disabled]="!hasNonDefaultViewPreferences"
+                (click)="resetViewPreferences()"
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+        </mat-menu>
+      </div>
+    </div>
+  }
+
+  <div class="scrollable min-h-0 flex-1 overflow-x-hidden" itemSize="60">
+    <mat-nav-list #taskDefinitions>
+      @for (taskDef of filteredTaskDefinitions; track taskDef) {
+        <mat-list-item
+          class="flex w-full cursor-pointer items-center border-b border-gray-200 p-1"
+          [disableRipple]="true"
+          [ngClass]="{
+            'bg-blue-50 hover:bg-blue-50': isSelectedTaskDefinition(taskDef),
+            'hover:bg-gray-50': !isSelectedTaskDefinition(taskDef),
+            'h-16.25': !isCollapsed,
+            'h-21': isCollapsed,
+          }"
+          (click)="setSelectedTaskDefinition(taskDef)"
+        >
+          @if (taskDef) {
+            @if (isCollapsed) {
+              <div
+                class="flex w-full flex-col items-center justify-center gap-2 py-2"
+                matTooltipShowDelay="250"
+                [matTooltip]="taskDef.name"
+              >
+                <span
+                  class="min-w-0 flex-1 truncate text-center text-sm leading-none font-bold text-gray-700"
+                >
+                  {{ taskDef.abbreviation }}
+                </span>
+                @if (taskListItem(taskDef); as task) {
+                  <ng-container
+                    *ngTemplateOutlet="TaskStatusBadges; context: {task: task}"
+                  ></ng-container>
+                }
+              </div>
+            } @else {
+              <div class="flex w-full items-center justify-between gap-2">
+                <div class="flex min-w-0 flex-1 items-center gap-3">
+                  <div class="flex min-w-0 items-center gap-3 truncate text-ellipsis">
+                    <div class="flex flex-col justify-start truncate text-ellipsis">
+                      <div class="truncate text-ellipsis">{{ taskDef.name }}</div>
+
+                      <div class="flex min-w-0 items-center gap-0.5">
+                        @if (taskDef.isGroupTask()) {
+                          <mat-icon class="shrink-0 scale-75 text-gray-600">groups</mat-icon>
+                        } @else {
+                          <mat-icon class="shrink-0 scale-75 text-gray-600">person</mat-icon>
+                        }
+
+                        <div class="mr-1 truncate text-[14px] leading-tight text-gray-500">
+                          {{ taskDef.abbreviation }}
+                          -
+                          {{ gradeNames[taskDef.targetGrade] }} Task
+                        </div>
+                        @if (taskListItem(taskDef); as task) {
+                          @if (taskStartApproaching(task)) {
+                            <span
+                              class="flex shrink-0 items-center gap-px text-[12px] font-normal text-sky-500"
+                            >
+                              <mat-icon class="size-4! text-[16px]!"> event_upcoming </mat-icon>
+                              {{ taskStartLabel(task) }}
+                            </span>
+                          } @else if (taskOngoing(task)) {
+                            <span
+                              class="flex shrink-0 items-center gap-px text-[12px] font-normal text-sky-500"
+                            >
+                              <mat-icon class="size-4! text-[16px]!"> event_upcoming </mat-icon>
+                              Start now
+                            </span>
+                          } @else if (!task.isBeforeStartDate() && !task.inSubmittedState()) {
+                            <span
+                              class="flex shrink-0 items-center gap-px text-[12px] font-bold"
+                              [ngClass]="{
+                                'text-[#da532c]': task.daysUntilDueDate() <= 0,
+                                'font-normal text-[#fab143]':
+                                  task.daysUntilDueDate() > 0 && task.daysUntilDueDate() < 11,
+                                'font-normal text-gray-500': task.daysUntilDueDate() > 11,
+                              }"
+                            >
+                              <mat-icon class="!h-[16px] !w-[16px] !text-[16px]">
+                                hourglass_bottom
+                              </mat-icon>
+                              {{ task.timeToDue() }}
+                            </span>
+                          }
+                        }
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                @if (taskListItem(taskDef); as task) {
+                  <ng-container
+                    *ngTemplateOutlet="TaskStatusBadges; context: {task: task}"
+                  ></ng-container>
+                }
+              </div>
+            }
+          }
+        </mat-list-item>
+      } @empty {
+        <div class="text-muted text-center">No tasks to display</div>
+      }
+
+      @if (mode === 'project' && project) {
+        <mat-list-item
+          class="item-content flex h-21 w-full cursor-pointer items-center border-b border-gray-200 p-1 hover:bg-gray-50"
+          [disableRipple]="true"
+          [ngClass]="project.portfolioTaskStatusClass()"
+        >
+          @if (isCollapsed) {
+            <a
+              class="flex w-full flex-col items-center justify-center gap-2 py-2 text-inherit no-underline"
+              [routerLink]="['/projects', project.id, 'portfolio']"
+            >
+              <span
+                class="flex min-w-0 flex-1 items-center justify-center truncate text-center text-sm leading-none text-gray-700"
+                matTooltip="Create Portfolio"
+              >
+                <mat-icon class="m-0 place-self-center">history_edu</mat-icon>
+              </span>
+              <div class="relative flex shrink-0 items-center justify-center">
+                <status-icon
+                  [compact]="isCollapsed"
+                  [status]="project.portfolioTaskStatus()"
+                ></status-icon>
+              </div>
+            </a>
+          } @else {
+            <create-portfolio-task-list-item [project]="project"></create-portfolio-task-list-item>
+          }
+        </mat-list-item>
+      }
+    </mat-nav-list>
+  </div>
+</div>
diff --git a/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.scss b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.scss
new file mode 100644
index 0000000000..788eb6fe32
--- /dev/null
+++ b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.scss
@@ -0,0 +1,112 @@
+@use '@angular/material' as mat;
+
+@use 'theme' as *;
+@use 'styles/mixins/scrollable' as *;
+
+$my-palette: mat.m2-define-palette($md-formatif);
+
+:host {
+  --background-gray: rgba(0, 0, 0, 0.04);
+  padding-right: 8px;
+}
+
+:host(.collapsed) {
+  padding-right: 0;
+
+  .mat-mdc-list-item {
+    overflow: visible;
+  }
+
+  ::ng-deep .mdc-list-item__content {
+    overflow: visible;
+  }
+}
+
+::ng-deep .cdk-virtual-scroll-content-wrapper {
+  width: 100%;
+}
+
+.task-list {
+  height: 100%;
+}
+
+.scrollable {
+  height: 100%;
+  @include scrollable();
+}
+
+.omnisearch {
+  font-size: 15px;
+  padding-right: 10px;
+  text-align: left;
+
+  &.expanded {
+    height: 100%;
+  }
+
+  .search {
+    background-color: transparent;
+    border: hidden;
+  }
+
+  .search:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+  }
+
+  .mdc-icon-button {
+    display: flex;
+  }
+}
+
+.task-list-menu-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  line-height: 20px;
+}
+
+::ng-deep .task-list-filters-menu.mat-mdc-menu-panel {
+  margin-left: 50px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.task-list-data {
+  margin-top: 0px;
+  padding-left: 6px;
+
+  .task-title {
+    font-size: 15px;
+    margin-bottom: -2px;
+    margin-top: 8px;
+  }
+
+  .task-details {
+    margin-bottom: 0px;
+    font-size: 12px;
+  }
+}
+
+.mat-mdc-list-item .item-content {
+  height: 60px;
+  border-radius: 6px;
+}
+
+.mat-mdc-list-item .item-content:hover {
+  cursor: pointer;
+}
+
+.mat-mdc-list-item.selected {
+  background-color: var(--background-gray);
+}
+
+.task-inbox.narrow-width .mat-mdc-list-item .item-content.selected {
+  margin-right: 12px;
+}
+
+.tasks-viewport {
+  height: 100%;
+}
diff --git a/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.spec.ts b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.spec.ts
new file mode 100644
index 0000000000..4cbfe2fad7
--- /dev/null
+++ b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.spec.ts
@@ -0,0 +1,643 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {Directive, NO_ERRORS_SCHEMA, SimpleChange} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute, Router, convertToParamMap} from '@angular/router';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {Project, Task, TaskDefinition} from 'src/app/api/models/doubtfire-model';
+import {FUnitTaskListComponent} from './unit-task-list.component';
+
+const emptyProvider = {};
+
+const flushTaskSelection = async (): Promise<void> => {
+  await new Promise<void>((resolve) => queueMicrotask(resolve));
+};
+
+const taskDefinition = (
+  id: number,
+  abbreviation: string,
+  startDate = new Date(2026, 0, id + 1),
+  targetGrade = 0,
+): TaskDefinition =>
+  ({
+    id,
+    seq: id,
+    abbreviation,
+    name: abbreviation,
+    startDate,
+    targetGrade,
+    targetGradeText: 'Pass',
+  }) as TaskDefinition;
+
+const taskForDefinition = (
+  definition: TaskDefinition,
+  topWeight: number,
+  numNewComments = 0,
+): Task =>
+  ({
+    definition,
+    topWeight,
+    numNewComments,
+  }) as Task;
+
+const studentProject = () =>
+  ({
+    id: 10,
+    targetGrade: 0,
+    unit: {id: 20},
+    calcTopTasks: () => undefined,
+  }) as unknown as Project;
+
+// Mirrors the wiring ngOnInit does, without the route lookup it also performs.
+const openTaskDefinition = (
+  component: FUnitTaskListComponent,
+  taskDef: TaskDefinition,
+): BehaviorSubject<TaskDefinition> => {
+  const selectedTaskDefinition$: BehaviorSubject<TaskDefinition> = new BehaviorSubject(taskDef);
+  component.selectedTaskDefinition$ = selectedTaskDefinition$;
+  selectedTaskDefinition$.subscribe((value) => (component.selectedTaskDef = value));
+
+  return selectedTaskDefinition$;
+};
+
+describe('FUnitTaskListComponent', () => {
+  let component: FUnitTaskListComponent;
+  let fixture: ComponentFixture<FUnitTaskListComponent>;
+  let routeParamMap$: Subject<ReturnType<typeof convertToParamMap>>;
+
+  beforeEach(async () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockReturnValue(null);
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => undefined);
+    routeParamMap$ = new Subject<ReturnType<typeof convertToParamMap>>();
+
+    await TestBed.configureTestingModule({
+      declarations: [FUnitTaskListComponent],
+      providers: [
+        {provide: Router, useValue: emptyProvider},
+        {
+          provide: ActivatedRoute,
+          useValue: {paramMap: routeParamMap$.asObservable()},
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(FUnitTaskListComponent, {set: {template: ''}})
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn(() => null),
+      setItem: vi.fn(),
+    });
+    fixture = TestBed.createComponent(FUnitTaskListComponent);
+    component = fixture.componentInstance;
+    component.taskDefinitions = [];
+    component.tasks = [];
+    component.selectedTaskDefinition$ = new BehaviorSubject<TaskDefinition>(null);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('follows task route changes without recreating the component', async () => {
+    const firstTask = taskDefinition(1, '1.1P');
+    const secondTask = taskDefinition(2, '2.3P');
+
+    component.taskDefinitions = [firstTask, secondTask];
+
+    fixture.detectChanges();
+
+    routeParamMap$.next(
+      convertToParamMap({
+        taskAbbreviation: firstTask.abbreviation,
+      }),
+    );
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBe(firstTask);
+    expect(component.selectedTaskDef).toBe(firstTask);
+
+    routeParamMap$.next(
+      convertToParamMap({
+        taskAbbreviation: secondTask.abbreviation,
+      }),
+    );
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBe(secondTask);
+    expect(component.selectedTaskDef).toBe(secondTask);
+  });
+
+  // The unit resolves progressively, so on a hard refresh of a deep link the
+  // route parameter arrives while taskDefinitions is still empty. Nothing used to
+  // re-apply it once the list turned up, and the screen landed on no task.
+  it('applies a deep linked task once the task definitions arrive', async () => {
+    const task = taskDefinition(1, '1.1P');
+
+    component.taskDefinitions = [];
+    fixture.detectChanges();
+
+    routeParamMap$.next(convertToParamMap({taskAbbreviation: task.abbreviation}));
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBeNull();
+
+    component.taskDefinitions = [task];
+    component.ngOnChanges({taskDefinitions: {} as never});
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBe(task);
+  });
+
+  it('clears a stale selection when the route task does not exist', async () => {
+    const existingTask = taskDefinition(1, '1.1P');
+
+    component.taskDefinitions = [existingTask];
+
+    fixture.detectChanges();
+
+    routeParamMap$.next(
+      convertToParamMap({
+        taskAbbreviation: existingTask.abbreviation,
+      }),
+    );
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBe(existingTask);
+
+    routeParamMap$.next(
+      convertToParamMap({
+        taskAbbreviation: 'does-not-exist',
+      }),
+    );
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBeNull();
+    expect(component.selectedTaskDef).toBeNull();
+  });
+
+  it('clears the selection when the task parameter is removed', async () => {
+    const existingTask = taskDefinition(1, '1.1P');
+
+    component.taskDefinitions = [existingTask];
+
+    fixture.detectChanges();
+
+    routeParamMap$.next(
+      convertToParamMap({
+        taskAbbreviation: existingTask.abbreviation,
+      }),
+    );
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBe(existingTask);
+
+    routeParamMap$.next(convertToParamMap({}));
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBeNull();
+    expect(component.selectedTaskDef).toBeNull();
+  });
+
+  it('stops following route changes after the component is destroyed', async () => {
+    const firstTask = taskDefinition(1, '1.1P');
+    const secondTask = taskDefinition(2, '2.3P');
+
+    component.taskDefinitions = [firstTask, secondTask];
+
+    fixture.detectChanges();
+
+    routeParamMap$.next(
+      convertToParamMap({
+        taskAbbreviation: firstTask.abbreviation,
+      }),
+    );
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBe(firstTask);
+
+    component.ngOnDestroy();
+
+    routeParamMap$.next(
+      convertToParamMap({
+        taskAbbreviation: secondTask.abbreviation,
+      }),
+    );
+
+    await flushTaskSelection();
+
+    expect(component.selectedTaskDefinition$.value).toBe(firstTask);
+    expect(component.selectedTaskDef).toBe(firstTask);
+  });
+
+  it('sorts task definitions by task top weight by default', () => {
+    const middlePriorityTask = taskDefinition(0, 'C');
+    const lowPriorityTask = taskDefinition(1, 'A');
+    const highPriorityTask = taskDefinition(2, 'B');
+
+    component.taskDefinitions = [lowPriorityTask, middlePriorityTask, highPriorityTask];
+
+    component.tasks = [
+      taskForDefinition(middlePriorityTask, 1),
+      taskForDefinition(lowPriorityTask, 2),
+      taskForDefinition(highPriorityTask, 0),
+    ];
+
+    component.applyFilters();
+
+    expect(component.filteredTaskDefinitions).toEqual([
+      highPriorityTask,
+      middlePriorityTask,
+      lowPriorityTask,
+    ]);
+  });
+
+  it('restores top weight order when switching back to default sorting', () => {
+    const middlePriorityTask = taskDefinition(0, 'C');
+    const lowPriorityTask = taskDefinition(1, 'A');
+    const highPriorityTask = taskDefinition(2, 'B');
+
+    component.taskDefinitions = [lowPriorityTask, middlePriorityTask, highPriorityTask];
+
+    component.tasks = [
+      taskForDefinition(middlePriorityTask, 1),
+      taskForDefinition(lowPriorityTask, 2),
+      taskForDefinition(highPriorityTask, 0),
+    ];
+
+    component.setSortBy('abbreviation');
+
+    expect(component.filteredTaskDefinitions).toEqual([
+      lowPriorityTask,
+      highPriorityTask,
+      middlePriorityTask,
+    ]);
+
+    component.setSortBy('default');
+
+    expect(component.filteredTaskDefinitions).toEqual([
+      highPriorityTask,
+      middlePriorityTask,
+      lowPriorityTask,
+    ]);
+  });
+
+  it('falls back to task definition sequence when no task is available', () => {
+    const firstTask = taskDefinition(0, 'C');
+    const secondTask = taskDefinition(1, 'A');
+    const thirdTask = taskDefinition(2, 'B');
+
+    component.taskDefinitions = [thirdTask, firstTask, secondTask];
+
+    component.applyFilters();
+
+    expect(component.filteredTaskDefinitions).toEqual([firstTask, secondTask, thirdTask]);
+  });
+
+  it('shows only tasks at or below the project target grade by default', () => {
+    const passTask = taskDefinition(1, 'P1', undefined, 0);
+    const creditTask = taskDefinition(2, 'C1', undefined, 1);
+    const distinctionTask = taskDefinition(3, 'D1', undefined, 2);
+    component.project = {
+      id: 10,
+      targetGrade: 0,
+      unit: {id: 20},
+    } as Project;
+    component.targetGrade = 0;
+    component.taskDefinitions = [passTask, creditTask, distinctionTask];
+    component.tasks = [];
+
+    component.applyFilters();
+
+    expect(component.filteredTaskDefinitions).toEqual([passTask]);
+    expect(component.activeViewPreferenceCount).toBe(1);
+  });
+
+  it('reveals tasks beyond the target grade only when explicitly selected', () => {
+    const passTask = taskDefinition(1, 'P1', undefined, 0);
+    const creditTask = taskDefinition(2, 'C1', undefined, 1);
+    component.project = {
+      id: 10,
+      targetGrade: 0,
+      unit: {id: 20},
+    } as Project;
+    component.targetGrade = 0;
+    component.taskDefinitions = [passTask, creditTask];
+    component.tasks = [];
+
+    component.toggleShowAboveTargetGrade(true);
+
+    expect(component.filteredTaskDefinitions).toEqual([passTask, creditTask]);
+    expect(component.activeViewPreferenceCount).toBe(0);
+
+    component.resetViewPreferences();
+
+    expect(component.filteredTaskDefinitions).toEqual([passTask]);
+    expect(component.activeViewPreferenceCount).toBe(1);
+  });
+
+  it('reapplies target-grade filtering when the selected target changes', () => {
+    const passTask = taskDefinition(1, 'P1', undefined, 0);
+    const creditTask = taskDefinition(2, 'C1', undefined, 1);
+    component.project = {
+      id: 10,
+      targetGrade: 0,
+      unit: {id: 20},
+    } as Project;
+    component.targetGrade = 0;
+    component.taskDefinitions = [passTask, creditTask];
+    component.tasks = [];
+    component.applyFilters();
+
+    component.targetGrade = 1;
+    component.project.targetGrade = 1;
+    component.ngOnChanges({targetGrade: new SimpleChange(0, 1, false)});
+
+    expect(component.filteredTaskDefinitions).toEqual([passTask, creditTask]);
+  });
+
+  it('does not grade-filter an all-tasks list without a student project', () => {
+    const passTask = taskDefinition(1, 'P1', undefined, 0);
+    const distinctionTask = taskDefinition(2, 'D1', undefined, 2);
+    component.mode = 'all-tasks';
+    component.taskDefinitions = [passTask, distinctionTask];
+    component.tasks = [];
+
+    component.applyFilters();
+
+    expect(component.filteredTaskDefinitions).toEqual([passTask, distinctionTask]);
+  });
+
+  it('keeps the open task selected when the search term stops matching it', () => {
+    const openTask = taskDefinition(1, 'P1');
+    const otherTask = taskDefinition(2, 'P2');
+    component.project = studentProject();
+    component.targetGrade = 0;
+    component.taskDefinitions = [openTask, otherTask];
+    component.tasks = [];
+    const selectedTaskDefinition$ = openTaskDefinition(component, openTask);
+
+    component.searchText = 'P1';
+    component.applyFilters();
+
+    expect(component.filteredTaskDefinitions).toEqual([openTask]);
+    expect(selectedTaskDefinition$.value).toBe(openTask);
+
+    component.searchText = 'P2';
+    component.applyFilters();
+
+    expect(component.filteredTaskDefinitions).toEqual([otherTask]);
+    expect(selectedTaskDefinition$.value).toBe(openTask);
+  });
+
+  it('drops the selection when a view filter hides the open task', () => {
+    const passTask = taskDefinition(1, 'P1', undefined, 0);
+    const creditTask = taskDefinition(2, 'C1', undefined, 1);
+    component.project = studentProject();
+    component.targetGrade = 0;
+    component.taskDefinitions = [passTask, creditTask];
+    component.tasks = [];
+    component.toggleShowAboveTargetGrade(true);
+    const selectedTaskDefinition$ = openTaskDefinition(component, creditTask);
+
+    component.toggleShowAboveTargetGrade(false);
+
+    expect(component.filteredTaskDefinitions).toEqual([passTask]);
+    expect(selectedTaskDefinition$.value).toBeNull();
+  });
+
+  it('drops the selection when the open task leaves the task definitions', () => {
+    const passTask = taskDefinition(1, 'P1');
+    const removedTask = taskDefinition(2, 'P2');
+    component.project = studentProject();
+    component.targetGrade = 0;
+    component.taskDefinitions = [passTask, removedTask];
+    component.tasks = [];
+    const selectedTaskDefinition$ = openTaskDefinition(component, removedTask);
+
+    component.taskDefinitions = [passTask];
+    component.applyFilters();
+
+    expect(selectedTaskDefinition$.value).toBeNull();
+  });
+
+  it('badges the filter button while tasks beyond the target grade are hidden', () => {
+    component.project = studentProject();
+    component.targetGrade = 0;
+    component.taskDefinitions = [taskDefinition(1, 'P1')];
+    component.tasks = [];
+
+    component.applyFilters();
+
+    expect(component.hidingTasksAboveTargetGrade).toBe(true);
+    expect(component.activeViewPreferenceCount).toBe(1);
+    expect(component.hasNonDefaultViewPreferences).toBe(false);
+
+    component.toggleShowAboveTargetGrade(true);
+
+    expect(component.hidingTasksAboveTargetGrade).toBe(false);
+    expect(component.activeViewPreferenceCount).toBe(0);
+    expect(component.hasNonDefaultViewPreferences).toBe(true);
+  });
+
+  it('does not badge target-grade hiding on an all-tasks list', () => {
+    component.mode = 'all-tasks';
+    component.taskDefinitions = [taskDefinition(1, 'P1')];
+    component.tasks = [];
+
+    component.applyFilters();
+
+    expect(component.activeViewPreferenceCount).toBe(0);
+  });
+
+  it('still shows a task beyond the target grade when it has unread comments', () => {
+    const passTask = taskDefinition(1, 'P1', undefined, 0);
+    const creditTask = taskDefinition(2, 'C1', undefined, 1);
+    const distinctionTask = taskDefinition(3, 'D1', undefined, 2);
+    component.project = studentProject();
+    component.targetGrade = 0;
+    component.taskDefinitions = [passTask, creditTask, distinctionTask];
+    component.tasks = [
+      taskForDefinition(creditTask, 2, 3),
+      taskForDefinition(distinctionTask, 3, 0),
+    ];
+
+    component.applyFilters();
+
+    expect(component.filteredTaskDefinitions).toEqual([passTask, creditTask]);
+  });
+});
+
+// A11Y-COLOUR03. The TaskStatusBadges template is what the dashboard and the
+// task viewer draw next to every task, and each badge is the only signal a
+// student gets that a task has new comments, similarities or a deadline state.
+// MatIcon hides the glyph and a tooltip is not a name for a non-interactive
+// element, so without a role and label a screen reader got nothing, or a bare
+// number for the comment count. These tests render the real template because
+// what assistive technology reads is a question about the markup. StubMatMenu
+// satisfies `#taskListFiltersMenu="matMenu"` in the filter menu, and
+// NO_ERRORS_SCHEMA renders the other mat-* elements as plain markup.
+@Directive({selector: 'mat-menu', exportAs: 'matMenu', standalone: false})
+class StubMatMenu {}
+
+describe('FUnitTaskListComponent task status badges', () => {
+  let fixture: ComponentFixture<FUnitTaskListComponent>;
+
+  const badgeTaskDefinition = {
+    ...taskDefinition(1, '1.1P'),
+    isGroupTask: () => false,
+  } as unknown as TaskDefinition;
+
+  // Every badge condition starts off, so each test turns on only the state it
+  // is about. Only the members the template reads are present.
+  const makeTask = (overrides: Record<string, unknown> = {}): Task =>
+    ({
+      definition: badgeTaskDefinition,
+      status: 'not_started',
+      numNewComments: 0,
+      similaritiesDetected: false,
+      qualityPts: 0,
+      hasGrade: () => false,
+      gradeDesc: () => '',
+      hasQualityPoints: () => false,
+      isDueSoon: () => false,
+      betweenDueDateAndDeadlineDate: () => false,
+      isPastDeadline: () => false,
+      inFinalState: () => false,
+      isBeforeStartDate: () => false,
+      inSubmittedState: () => false,
+      daysUntilDueDate: () => 20,
+      timeToDue: () => '',
+      localDueDate: (): Date => undefined,
+      ...overrides,
+    }) as unknown as Task;
+
+  const render = (task: Task, isCollapsed = false): void => {
+    fixture = TestBed.createComponent(FUnitTaskListComponent);
+    const component = fixture.componentInstance;
+    component.mode = 'all-tasks';
+    component.isCollapsed = isCollapsed;
+    component.taskDefinitions = [badgeTaskDefinition];
+    component.tasks = [task];
+    component.selectedTaskDefinition$ = new BehaviorSubject<TaskDefinition>(null);
+    fixture.detectChanges();
+  };
+
+  const badges = (): HTMLElement[] =>
+    Array.from(fixture.nativeElement.querySelectorAll('[role="img"]'));
+
+  const labels = (): string[] => badges().map((badge) => badge.getAttribute('aria-label'));
+
+  beforeEach(async () => {
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn(() => null),
+      setItem: vi.fn(),
+    });
+
+    await TestBed.configureTestingModule({
+      declarations: [FUnitTaskListComponent, StubMatMenu],
+      providers: [
+        {provide: Router, useValue: emptyProvider},
+        {
+          provide: ActivatedRoute,
+          useValue: {paramMap: new Subject<ReturnType<typeof convertToParamMap>>()},
+        },
+      ],
+      // The real template is rendered on purpose: the fix is in the markup.
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  // The last column is how many glyphs the badge draws. The comment badge draws
+  // only its count, and the past deadline badge adds a "!" after its icon.
+  it.each([
+    ['one new comment', {numNewComments: 1}, '1 new comment', 0],
+    ['several new comments', {numNewComments: 3}, '3 new comments', 0],
+    ['similarities', {similaritiesDetected: true}, 'Similarities Detected', 1],
+    ['due soon', {isDueSoon: () => true}, 'Due soon', 1],
+    [
+      'due before the deadline',
+      {betweenDueDateAndDeadlineDate: () => true},
+      'Due, deadline not yet passed',
+      1,
+    ],
+    ['past deadline', {isPastDeadline: () => true}, 'Past deadline', 2],
+  ])('names the %s badge and hides its glyph', (_name, overrides, label, glyphCount) => {
+    render(makeTask(overrides));
+
+    expect(labels()).toEqual([label]);
+
+    const glyphs: HTMLElement[] = Array.from(badges()[0].querySelectorAll('mat-icon, strong'));
+    expect(glyphs).toHaveLength(glyphCount);
+    glyphs.forEach((glyph) => expect(glyph.getAttribute('aria-hidden')).toBe('true'));
+  });
+
+  // MatTooltip only skips adding aria-describedby when the tooltip text is
+  // exactly the aria-label, so any difference makes a screen reader say it twice.
+  it('gives the similarities badge the same label as its tooltip', () => {
+    render(makeTask({similaritiesDetected: true}));
+
+    const [badge] = badges();
+    expect(badge.getAttribute('aria-label')).toBe(badge.getAttribute('mattooltip'));
+  });
+
+  it('keeps the visible comment count as the bare number', () => {
+    render(makeTask({numNewComments: 4}));
+
+    expect(badges()[0].textContent.trim()).toBe('4');
+    expect(labels()).toEqual(['4 new comments']);
+  });
+
+  it('uses a different glyph for past deadline than for due, so colour is not the only signal', () => {
+    render(makeTask({betweenDueDateAndDeadlineDate: () => true}));
+    const dueGlyph = badges()[0].querySelector('mat-icon').textContent.trim();
+
+    render(makeTask({isPastDeadline: () => true}));
+    const pastDeadlineGlyph = badges()[0].querySelector('mat-icon').textContent.trim();
+
+    expect(dueGlyph).toBe('schedule');
+    expect(pastDeadlineGlyph).toBe('event_busy');
+  });
+
+  it('names the badges in the collapsed list as well', () => {
+    render(makeTask({numNewComments: 2, isDueSoon: () => true}), true);
+
+    expect(labels()).toEqual(['2 new comments', 'Due soon']);
+  });
+
+  // Failure path: a badge whose condition is false is not rendered, so a
+  // student is never told about a state that does not apply.
+  it('renders no badges when nothing applies', () => {
+    render(makeTask());
+
+    expect(badges()).toEqual([]);
+  });
+
+  it('drops the deadline badges once the task is in a final state', () => {
+    render(
+      makeTask({
+        isDueSoon: () => true,
+        isPastDeadline: () => true,
+        inFinalState: () => true,
+      }),
+    );
+
+    expect(badges()).toEqual([]);
+  });
+});
diff --git a/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.ts b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.ts
new file mode 100644
index 0000000000..5cbd842976
--- /dev/null
+++ b/src/app/units/task-viewer/directives/unit-task-list/unit-task-list.component.ts
@@ -0,0 +1,595 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {BehaviorSubject, Subject, takeUntil} from 'rxjs';
+import {Project, Task, TaskDefinition} from 'src/app/api/models/doubtfire-model';
+import {TaskDefinitionNamePipe} from 'src/app/common/filters/task-definition-name.pipe';
+
+type TaskListSortOption = 'default' | 'abbreviation' | 'targetDate' | 'startDate' | 'dueDate';
+
+type TaskListSortDirection = 'asc' | 'desc';
+
+interface TaskListViewPreferences {
+  sortBy: TaskListSortOption;
+  sortDirection: TaskListSortDirection;
+  hideCompleted: boolean;
+  showAboveTargetGrade: boolean;
+}
+
+interface TaskListSortOptionView {
+  value: TaskListSortOption;
+  label: string;
+  icon: string;
+}
+
+const DEFAULT_VIEW_PREFERENCES: TaskListViewPreferences = {
+  sortBy: 'default',
+  sortDirection: 'asc',
+  hideCompleted: false,
+  showAboveTargetGrade: false,
+};
+
+const START_APPROACHING_DAYS = 7;
+
+@Component({
+  selector: 'f-unit-task-list',
+  templateUrl: './unit-task-list.component.html',
+  styleUrls: ['./unit-task-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class FUnitTaskListComponent implements OnChanges, OnInit, OnDestroy {
+  private readonly destroy$: Subject<void> = new Subject();
+  private routeTaskAbbreviation: string | null = null;
+
+  @Input() mode: 'project' | 'all-tasks';
+  @Input() project: Project;
+  @Input() targetGrade: number;
+  @Input() taskDefinitions: readonly TaskDefinition[];
+  @Input() tasks: readonly Task[];
+  @Input() isCollapsed = false;
+  @Input() selectionUrlBase: unknown[] | null = null;
+
+  @HostBinding('class.collapsed')
+  public get collapsedHostClass(): boolean {
+    return this.isCollapsed;
+  }
+
+  // What is the selected task definition
+  @Input() selectedTaskDefinition$: BehaviorSubject<TaskDefinition>;
+  selectedTaskDef: TaskDefinition;
+
+  filteredTaskDefinitions: TaskDefinition[]; // list of tasks which match the taskSearch term
+  searchText: string = ''; // task search term from user input
+  taskDefinitionNamePipe = new TaskDefinitionNamePipe();
+  viewPreferences: TaskListViewPreferences = {...DEFAULT_VIEW_PREFERENCES};
+  sortOptions: TaskListSortOptionView[] = [
+    {value: 'default', label: 'Priority', icon: 'sort'},
+    {value: 'startDate', label: 'Start date', icon: 'event_available'},
+    {value: 'targetDate', label: 'Target date', icon: 'event'},
+    {value: 'dueDate', label: 'Due date', icon: 'event_repeat'},
+    {value: 'abbreviation', label: 'Abbreviation', icon: 'sort_by_alpha'},
+  ];
+
+  protected get gradeNames(): Record<number, string> {
+    const unit = this.project?.unit ?? this.taskDefinitions?.[0]?.unit;
+    return Object.fromEntries(
+      (unit?.gradeDefinitions ?? []).map((definition) => [definition.value, definition.label]),
+    );
+  }
+
+  constructor(
+    private angularRouter: Router,
+    private route: ActivatedRoute,
+  ) {}
+
+  applyFilters() {
+    this.refreshTopTaskWeights();
+
+    const matchingTaskDefinitions = this.taskDefinitionNamePipe.transform(
+      this.taskDefinitions,
+      this.searchText,
+    );
+
+    this.filteredTaskDefinitions = matchingTaskDefinitions
+      .filter((taskDef) => this.shouldShowTaskDefinition(taskDef))
+      .sort((a, b) => this.compareTaskDefinitions(a, b));
+
+    this.deselectHiddenTaskDefinition();
+  }
+
+  // The search term only narrows what the list shows, so typing must not close the
+  // open task. Drop the selection when the task itself has gone or a view filter
+  // hides it.
+  private deselectHiddenTaskDefinition(): void {
+    if (!this.selectedTaskDef) {
+      return;
+    }
+
+    const selectedTaskDefinition = this.taskDefinitions?.find(
+      (taskDef) => taskDef.id === this.selectedTaskDef.id,
+    );
+
+    if (selectedTaskDefinition && this.shouldShowTaskDefinition(selectedTaskDefinition)) {
+      return;
+    }
+
+    this.selectedTaskDefinition$?.next(null);
+    this.replaceSelectionUrl(null);
+  }
+
+  public setSortBy(sortBy: TaskListSortOption): void {
+    const sortDirection =
+      sortBy === 'default'
+        ? DEFAULT_VIEW_PREFERENCES.sortDirection
+        : this.viewPreferences.sortBy === sortBy
+          ? this.toggledSortDirection
+          : 'asc';
+
+    this.viewPreferences = {
+      ...this.viewPreferences,
+      sortBy,
+      sortDirection,
+    };
+    this.persistViewPreferences();
+    this.applyFilters();
+  }
+
+  public toggleHideCompleted(value: boolean): void {
+    this.viewPreferences = {
+      ...this.viewPreferences,
+      hideCompleted: value,
+    };
+    this.persistViewPreferences();
+    this.applyFilters();
+  }
+
+  public toggleShowAboveTargetGrade(value: boolean): void {
+    this.viewPreferences = {
+      ...this.viewPreferences,
+      showAboveTargetGrade: value,
+    };
+    this.persistViewPreferences();
+    this.applyFilters();
+  }
+
+  public resetViewPreferences(): void {
+    this.viewPreferences = {...DEFAULT_VIEW_PREFERENCES};
+    this.persistViewPreferences();
+    this.applyFilters();
+  }
+
+  public get selectedSortLabel(): string {
+    const label =
+      this.sortOptions.find((option) => option.value === this.viewPreferences.sortBy)?.label ??
+      'Priority';
+
+    if (this.viewPreferences.sortBy === 'default') {
+      return label;
+    }
+
+    return `${label} ${this.viewPreferences.sortDirection}`;
+  }
+
+  public sortStateIconFor(option: TaskListSortOptionView): string {
+    if (option.value === 'default') {
+      return this.viewPreferences.sortBy === 'default' ? 'check' : '';
+    }
+
+    if (this.viewPreferences.sortBy !== option.value) {
+      return '';
+    }
+
+    return this.viewPreferences.sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward';
+  }
+
+  public get activeViewPreferenceCount(): number {
+    return (
+      (this.viewPreferences.sortBy !== 'default' ? 1 : 0) +
+      (this.viewPreferences.hideCompleted ? 1 : 0) +
+      (this.hidingTasksAboveTargetGrade ? 1 : 0)
+    );
+  }
+
+  // The list hides tasks beyond the target grade unless the student opts in, so the
+  // badge has to count the hiding, not the opt-in that switches it off.
+  public get hidingTasksAboveTargetGrade(): boolean {
+    return !this.viewPreferences.showAboveTargetGrade && this.effectiveTargetGrade !== null;
+  }
+
+  public get hasNonDefaultViewPreferences(): boolean {
+    return (
+      this.viewPreferences.sortBy !== DEFAULT_VIEW_PREFERENCES.sortBy ||
+      this.viewPreferences.sortDirection !== DEFAULT_VIEW_PREFERENCES.sortDirection ||
+      this.viewPreferences.hideCompleted !== DEFAULT_VIEW_PREFERENCES.hideCompleted ||
+      this.viewPreferences.showAboveTargetGrade !== DEFAULT_VIEW_PREFERENCES.showAboveTargetGrade
+    );
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('project' in changes || 'taskDefinitions' in changes) {
+      this.loadViewPreferences();
+    }
+
+    if (
+      'project' in changes ||
+      'targetGrade' in changes ||
+      'taskDefinitions' in changes ||
+      'tasks' in changes
+    ) {
+      this.applyFilters();
+      this.applyRouteTaskSelection();
+    }
+  }
+
+  public get hasTasks(): boolean {
+    return this.tasks && this.tasks.length > 0;
+  }
+
+  public taskForTaskDef(taskDef: TaskDefinition): Task {
+    if (!this.hasTasks || !taskDef) {
+      return null;
+    }
+
+    return this.tasks.find((task) => task.definition.id === taskDef?.id);
+  }
+
+  public taskListItem(taskDef: TaskDefinition): Task {
+    return this.taskForTaskDef(taskDef);
+  }
+
+  public taskStartApproaching(task: Task): boolean {
+    return (
+      !!task &&
+      !task.inFinalState() &&
+      task.isBeforeStartDate() &&
+      task.daysUntilStartDate() <= START_APPROACHING_DAYS
+    );
+  }
+
+  public taskStartLabel(task: Task): string {
+    const days = task.daysUntilStartDate();
+
+    if (days <= 0) {
+      return 'Start today';
+    }
+
+    return `Start in ${days} ${days === 1 ? 'day' : 'days'}`;
+  }
+
+  // The badge only shows the count, so its accessible name carries the unit.
+  public newCommentsLabel(task: Task): string {
+    const count = task.numNewComments;
+
+    return `${count} new ${count === 1 ? 'comment' : 'comments'}`;
+  }
+
+  public taskOngoing(task: Task): boolean {
+    if (!task || task.inFinalState()) {
+      return false;
+    }
+
+    const now = Date.now();
+    const startTime = this.dateTime(task.startDate);
+    const dueTime = this.dateTime(task.localDueDate());
+
+    return now >= startTime && now < dueTime;
+  }
+
+  /*
+    TODO: There's still an issue where loading the route for the first time will cause child components (like task-dashboard) to load trigger OnInit and OnChanges twice...
+    Causing duplicate queries to submission_details and task comments.
+    One hack would be to always keep the task-dashboard rendered using [hidden].
+  */
+
+  ngOnInit(): void {
+    this.loadViewPreferences();
+    this.applyFilters();
+
+    // Watch for changes in the selected task definition... including from us
+    this.selectedTaskDefinition$.pipe(takeUntil(this.destroy$)).subscribe((taskDef) => {
+      this.selectedTaskDef = taskDef;
+    });
+
+    // Follow the selected task in the url, rather than reading it once.
+    //
+    // Angular reuses this component when only a route parameter changes, so
+    // going from .../dashboard/1.1P to .../dashboard/2.3P never runs ngOnInit
+    // again. Reading route.snapshot here left the first task selected and the
+    // second one never opened, which is what any in-app link to another task on
+    // a dashboard the user is already looking at runs into. A notification
+    // linking to a task is exactly that.
+    this.route.paramMap.pipe(takeUntil(this.destroy$)).subscribe((params) => {
+      this.routeTaskAbbreviation = params.get('taskAbbreviation');
+      queueMicrotask(() => this.applyRouteTaskSelection());
+    });
+  }
+
+  // Applies whatever the route currently names, using the task definitions that
+  // exist at the moment it runs. Called from the paramMap subscription and again
+  // from ngOnChanges, because the unit resolves progressively and taskDefinitions
+  // is usually still empty when the parameter first arrives. Without the second
+  // call a hard refresh on a deep link lands on nothing.
+  private applyRouteTaskSelection(): void {
+    const current = this.selectedTaskDefinition$.value;
+
+    const nextTaskDefinition = this.routeTaskAbbreviation
+      ? (this.taskDefinitions?.find(
+          (taskDefinition) => taskDefinition.abbreviation === this.routeTaskAbbreviation,
+        ) ?? null)
+      : null;
+
+    // An empty list means the unit has not finished resolving, not that the task
+    // is missing. Leave the selection alone and wait for ngOnChanges to call back
+    // once the definitions arrive. A loaded list that does not contain the
+    // abbreviation is a different thing and still clears the selection below.
+    if (this.routeTaskAbbreviation && !this.taskDefinitions?.length) {
+      return;
+    }
+
+    if (nextTaskDefinition && this.isTaskDefinitionAboveTargetGrade(nextTaskDefinition)) {
+      this.viewPreferences = {...this.viewPreferences, showAboveTargetGrade: true};
+      this.persistViewPreferences();
+      this.applyFilters();
+    }
+
+    // The comparison is what stops a click looping. Selecting a task navigates,
+    // that navigation makes paramMap emit, and the emission comes straight back
+    // in here. It also collapses the duplicate write from the second rendered
+    // instance of this component in the parent template.
+    if (nextTaskDefinition !== current) {
+      this.selectedTaskDefinition$.next(nextTaskDefinition);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  setSelectedTaskDefinition(taskDef: TaskDefinition) {
+    if (this.isSelectedTaskDefinition(taskDef)) {
+      this.selectedTaskDefinition$.next(null);
+      this.replaceSelectionUrl(null);
+    } else {
+      this.selectedTaskDefinition$.next(taskDef);
+      this.replaceSelectionUrl(taskDef);
+    }
+  }
+
+  public isSelectedTaskDefinition(taskDef: TaskDefinition): boolean {
+    return this.selectedTaskDef?.id === taskDef?.id;
+  }
+
+  private replaceSelectionUrl(taskDef: TaskDefinition | null): void {
+    const urlTree = this.buildSelectionUrlTree(taskDef);
+    if (!urlTree) {
+      return;
+    }
+
+    this.angularRouter.navigateByUrl(urlTree, {replaceUrl: true});
+  }
+
+  private buildSelectionUrlTree(taskDef: TaskDefinition | null) {
+    if (this.selectionUrlBase) {
+      return this.angularRouter.createUrlTree(
+        taskDef ? [...this.selectionUrlBase, taskDef.abbreviation] : this.selectionUrlBase,
+      );
+    }
+
+    const unitId = this.route.parent?.snapshot.paramMap.get('unitId');
+    if (this.route.parent?.snapshot.data.unit && unitId) {
+      return this.angularRouter.createUrlTree(
+        taskDef ? ['/units', unitId, 'tasks', taskDef.abbreviation] : ['/units', unitId, 'tasks'],
+      );
+    }
+
+    const projectId = this.route.parent?.snapshot.paramMap.get('projectId');
+    if (this.route.parent?.snapshot.data.project && projectId) {
+      return this.angularRouter.createUrlTree(
+        taskDef
+          ? ['/projects', projectId, 'dashboard', taskDef.abbreviation]
+          : ['/projects', projectId, 'dashboard'],
+      );
+    }
+
+    return null;
+  }
+
+  private shouldShowTaskDefinition(taskDef: TaskDefinition): boolean {
+    if (!taskDef) {
+      return false;
+    }
+
+    const task = this.taskForTaskDef(taskDef);
+
+    if (this.viewPreferences.hideCompleted && task?.inFinalState() && !this.hasNewComments(task)) {
+      return false;
+    }
+
+    return !(
+      !this.viewPreferences.showAboveTargetGrade &&
+      this.isTaskDefinitionAboveTargetGrade(taskDef) &&
+      !this.hasNewComments(task)
+    );
+  }
+
+  private isTaskDefinitionAboveTargetGrade(taskDef: TaskDefinition): boolean {
+    const targetGrade = this.effectiveTargetGrade;
+
+    return targetGrade !== null && taskDef.targetGrade > targetGrade;
+  }
+
+  private get effectiveTargetGrade(): number | null {
+    const targetGrade = this.targetGrade ?? this.project?.targetGrade;
+
+    if (!this.project || targetGrade === undefined || targetGrade === null) {
+      return null;
+    }
+
+    return targetGrade;
+  }
+
+  private hasNewComments(task: Task): boolean {
+    return (task?.numNewComments ?? 0) > 0;
+  }
+
+  private compareTaskDefinitions(a: TaskDefinition, b: TaskDefinition): number {
+    let result: number;
+
+    switch (this.viewPreferences.sortBy) {
+      case 'abbreviation':
+        result = this.compareStrings(a?.abbreviation, b?.abbreviation);
+        break;
+      case 'targetDate':
+        result = this.compareDates(this.targetDateFor(a), this.targetDateFor(b));
+        break;
+      case 'startDate':
+        result = this.compareDates(this.startDateFor(a), this.startDateFor(b));
+        break;
+      case 'dueDate':
+        result = this.compareDates(this.feedbackDateFor(a), this.feedbackDateFor(b));
+        break;
+      default:
+        result = this.defaultSortWeightFor(a) - this.defaultSortWeightFor(b);
+    }
+
+    return this.viewPreferences.sortDirection === 'asc' ? result : result * -1;
+  }
+
+  private refreshTopTaskWeights(): void {
+    if (this.project && this.hasTasks) {
+      this.project.calcTopTasks();
+    }
+  }
+
+  private defaultSortWeightFor(taskDef: TaskDefinition): number {
+    return this.taskForTaskDef(taskDef)?.topWeight ?? taskDef?.seq ?? Number.MAX_SAFE_INTEGER;
+  }
+
+  private targetDateFor(taskDef: TaskDefinition): Date {
+    return this.taskForTaskDef(taskDef)?.localDueDate() ?? taskDef?.targetDate;
+  }
+
+  private startDateFor(taskDef: TaskDefinition): Date {
+    return this.taskForTaskDef(taskDef)?.startDate ?? taskDef?.startDate;
+  }
+
+  private feedbackDateFor(taskDef: TaskDefinition): Date {
+    return this.taskForTaskDef(taskDef)?.localDeadlineDate() ?? taskDef?.localDeadlineDate();
+  }
+
+  private compareDates(a: Date, b: Date): number {
+    const aTime = this.dateTime(a);
+    const bTime = this.dateTime(b);
+
+    if (aTime === bTime) {
+      return 0;
+    }
+
+    return aTime - bTime;
+  }
+
+  private compareStrings(a: string, b: string): number {
+    return (a ?? '').localeCompare(b ?? '', undefined, {
+      numeric: true,
+      sensitivity: 'base',
+    });
+  }
+
+  private dateTime(date: Date): number {
+    const time = date ? new Date(date).getTime() : NaN;
+    return Number.isFinite(time) ? time : Number.MAX_SAFE_INTEGER;
+  }
+
+  private loadViewPreferences(): void {
+    const rawPreferences = this.viewPreferencesStorage?.getItem(this.viewPreferencesStorageKey);
+
+    if (!rawPreferences) {
+      this.viewPreferences = {...DEFAULT_VIEW_PREFERENCES};
+      return;
+    }
+
+    try {
+      const parsedPreferences = JSON.parse(rawPreferences) as Partial<TaskListViewPreferences>;
+      const migratedSort = this.migrateSortOption(parsedPreferences.sortBy);
+      this.viewPreferences = {
+        sortBy: migratedSort.sortBy,
+        sortDirection: this.isSortDirection(parsedPreferences.sortDirection)
+          ? parsedPreferences.sortDirection
+          : migratedSort.sortDirection,
+        hideCompleted: !!parsedPreferences.hideCompleted,
+        // The legacy preference was named `hideAboveTargetGrade` and defaulted to false,
+        // which made higher-grade tasks visible. Treat legacy records as the new default.
+        showAboveTargetGrade: parsedPreferences.showAboveTargetGrade === true,
+      };
+    } catch {
+      this.viewPreferences = {...DEFAULT_VIEW_PREFERENCES};
+    }
+  }
+
+  private persistViewPreferences(): void {
+    this.viewPreferencesStorage?.setItem(
+      this.viewPreferencesStorageKey,
+      JSON.stringify(this.viewPreferences),
+    );
+  }
+
+  private isSortOption(value: unknown): value is TaskListSortOption {
+    return this.sortOptions.some((option) => option.value === value);
+  }
+
+  private isSortDirection(value: unknown): value is TaskListSortDirection {
+    return value === 'asc' || value === 'desc';
+  }
+
+  private migrateSortOption(value: unknown): {
+    sortBy: TaskListSortOption;
+    sortDirection: TaskListSortDirection;
+  } {
+    if (this.isSortOption(value)) {
+      return {sortBy: value, sortDirection: DEFAULT_VIEW_PREFERENCES.sortDirection};
+    }
+
+    const migrations: Record<
+      string,
+      {sortBy: TaskListSortOption; sortDirection: TaskListSortDirection}
+    > = {
+      abbreviationAsc: {sortBy: 'abbreviation', sortDirection: 'asc'},
+      abbreviationDesc: {sortBy: 'abbreviation', sortDirection: 'desc'},
+      targetDateAsc: {sortBy: 'targetDate', sortDirection: 'asc'},
+      targetDateDesc: {sortBy: 'targetDate', sortDirection: 'desc'},
+      startDateAsc: {sortBy: 'startDate', sortDirection: 'asc'},
+      startDateDesc: {sortBy: 'startDate', sortDirection: 'desc'},
+      feedbackDateAsc: {sortBy: 'dueDate', sortDirection: 'asc'},
+      feedbackDateDesc: {sortBy: 'dueDate', sortDirection: 'desc'},
+    };
+
+    return migrations[value as string] ?? DEFAULT_VIEW_PREFERENCES;
+  }
+
+  private get toggledSortDirection(): TaskListSortDirection {
+    return this.viewPreferences.sortDirection === 'asc' ? 'desc' : 'asc';
+  }
+
+  private get viewPreferencesStorageKey(): string {
+    const unitId = this.project?.unit?.id ?? this.taskDefinitions?.[0]?.unit?.id ?? 'unknown';
+    return `ontrack.unitTaskList.${unitId}.viewPreferences`;
+  }
+
+  private get viewPreferencesStorage(): Storage | null {
+    try {
+      return globalThis.localStorage ?? null;
+    } catch {
+      return null;
+    }
+  }
+}
diff --git a/src/app/units/task-viewer/task-viewer-state.component.html b/src/app/units/task-viewer/task-viewer-state.component.html
new file mode 100644
index 0000000000..9c197c9e0b
--- /dev/null
+++ b/src/app/units/task-viewer/task-viewer-state.component.html
@@ -0,0 +1,58 @@
+@if (unit$ | async; as unit) {
+  <div>
+    <!-- Wide Window Display -->
+    <div class="hidden size-full flex-col min-[960px]:flex">
+      <div class="flex size-full items-stretch justify-center">
+        <!-- Panel 1 -->
+        <div #tasklistpanel class="vertical-panel min-w-12" id="tasklistpanel">
+          <f-unit-task-list
+            [mode]="'all-tasks'"
+            [selectedTaskDefinition$]="selectedTaskDefinition$"
+            [taskDefinitions]="unit.taskDefinitions"
+          ></f-unit-task-list>
+        </div>
+        <div class="vertical-spacer"></div>
+        <!-- Panel 2 -->
+        <div class="vertical-panel size-full">
+          @if (selectedTaskDefinition$ | async; as selectedTaskDef) {
+            <div class="flex h-full flex-col">
+              <div class="shrink">
+                <f-task-details-view
+                  [taskDef]="selectedTaskDef"
+                  [unit]="unit"
+                ></f-task-details-view>
+              </div>
+              <f-task-sheet-view class="h-full" [taskDef]="selectedTaskDef"> </f-task-sheet-view>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+    <!-- Narrow Window / Mobile Display -->
+    <div #mobile class="hidden size-full flex-row max-[959px]:flex">
+      <div class="vertical-panel mobile" [hidden]="selectedTaskDefinition$ | async">
+        <f-unit-task-list
+          [mode]="'all-tasks'"
+          [selectedTaskDefinition$]="selectedTaskDefinition$"
+          [taskDefinitions]="unit.taskDefinitions"
+        ></f-unit-task-list>
+      </div>
+      <div class="flex size-full flex-col items-stretch justify-between" [hidden]="!taskSelected">
+        <div class="flex items-center">
+          <button
+            aria-label="Back to task list"
+            mat-icon-button
+            matTooltip="Back to list"
+            (click)="clearTaskSelection()"
+          >
+            <mat-icon>arrow_back_ios_new</mat-icon>
+          </button>
+        </div>
+        <div class="vertical-panel mobile flex-1">
+          <f-task-details-view [taskDef]="selectedTaskDef" [unit]="unit"></f-task-details-view>
+        </div>
+        <f-task-sheet-view class="h-full" [taskDef]="selectedTaskDef"> </f-task-sheet-view>
+      </div>
+    </div>
+  </div>
+}
diff --git a/src/app/units/task-viewer/task-viewer-state.component.scss b/src/app/units/task-viewer/task-viewer-state.component.scss
new file mode 100644
index 0000000000..f2e8670fcd
--- /dev/null
+++ b/src/app/units/task-viewer/task-viewer-state.component.scss
@@ -0,0 +1,30 @@
+.vertical-panel {
+  border-radius: 10px;
+  background-color: white;
+  padding: 8px;
+  min-width: 60px;
+  width: 450px;
+  height: 100%;
+
+  &.mobile {
+    max-width: 100%;
+    width: 100%;
+    padding: 0px;
+  }
+}
+
+.vertical-spacer {
+  background-color: #f5f5f5;
+  z-index: 200;
+  width: 10px;
+}
+
+// HACK - issue access this from the main style.scss
+$main-view-max-height: calc((var(--vh, 1vh) * (100)) - 85px);
+
+f-task-viewer-state {
+  height: calc(
+    $main-view-max-height + 70px
+  ); // temporary fix to reclaim the footer region for this specific page
+  display: flex;
+}
diff --git a/src/app/units/task-viewer/task-viewer-state.component.ts b/src/app/units/task-viewer/task-viewer-state.component.ts
new file mode 100644
index 0000000000..f19b488e82
--- /dev/null
+++ b/src/app/units/task-viewer/task-viewer-state.component.ts
@@ -0,0 +1,54 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {of} from 'rxjs';
+import {TaskDefinition, Unit} from 'src/app/api/models/doubtfire-model';
+
+@Component({
+  selector: 'f-task-viewer-state',
+  templateUrl: './task-viewer-state.component.html',
+  styleUrl: './task-viewer-state.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskViewerStateComponent {
+  @Input() public unit$: Observable<Unit>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {
+    this.unit$ = of(this.route.parent.snapshot.data.unit);
+
+    // The task abbreviation is deliberately not read here. This component is
+    // reused when only the route parameter changes, so a snapshot read runs once
+    // and leaves the first task selected for the life of the screen. The child
+    // task list follows route.paramMap instead, and it is the one component
+    // shared by all three routes that carry a :taskAbbreviation, so the read
+    // belongs there and only there.
+  }
+
+  /**
+   * Monitor and publish the selected task definition for child components.
+   * We monitor the task definition list for changes in selected task definition.
+   */
+  selectedTaskDefinition$: BehaviorSubject<TaskDefinition> = new BehaviorSubject<TaskDefinition>(
+    null,
+  );
+
+  public get taskSelected(): boolean {
+    return this.selectedTaskDef !== null;
+  }
+
+  public get selectedTaskDef(): TaskDefinition {
+    return this.selectedTaskDefinition$.value;
+  }
+
+  public clearTaskSelection(): void {
+    this.selectedTaskDefinition$.next(null);
+    if (this.route.parent?.snapshot.data.unit) {
+      this.router.navigate(['../tasks'], {relativeTo: this.route, replaceUrl: true});
+      return;
+    }
+  }
+}
diff --git a/src/app/units/unit-root-state.component.css b/src/app/units/unit-root-state.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/units/unit-root-state.component.html b/src/app/units/unit-root-state.component.html
new file mode 100644
index 0000000000..945f7bea61
--- /dev/null
+++ b/src/app/units/unit-root-state.component.html
@@ -0,0 +1,10 @@
+@if (unit || (unit$ | async)) {
+  <router-outlet (activate)="onActivate($event)"></router-outlet>
+} @else {
+  <div
+    class="mt-9 flex min-h-64 flex-col items-center justify-center gap-3 text-center text-slate-800"
+  >
+    <mat-spinner diameter="75"></mat-spinner>
+    <p class="text-[24px]">Loading unit details...</p>
+  </div>
+}
diff --git a/src/app/units/unit-root-state.component.spec.ts b/src/app/units/unit-root-state.component.spec.ts
new file mode 100644
index 0000000000..8b4a005948
--- /dev/null
+++ b/src/app/units/unit-root-state.component.spec.ts
@@ -0,0 +1,90 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {Component, Input, NO_ERRORS_SCHEMA} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {ActivatedRouteSnapshot, Router, RouterModule, provideRouter} from '@angular/router';
+import {Observable, firstValueFrom, of} from 'rxjs';
+import {Unit} from 'src/app/api/models/unit';
+import {UnitRootStateComponent} from './unit-root-state.component';
+
+// The two components below are inert test stubs, so their one-line templates belong
+// here rather than in files of their own.
+/* eslint-disable @angular-eslint/component-max-inline-declarations */
+
+function unitStub(id: number): Unit {
+  return {id} as unknown as Unit;
+}
+
+@Component({
+  selector: 'f-unit-child-stub',
+  template: '',
+  standalone: false,
+})
+class UnitChildStubComponent {
+  @Input() public unit$: Observable<Unit>;
+}
+
+@Component({
+  selector: 'f-unit-root-host',
+  template: '<router-outlet></router-outlet>',
+  standalone: false,
+})
+class UnitRootHostComponent {}
+
+describe('UnitRootStateComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UnitRootStateComponent, UnitChildStubComponent, UnitRootHostComponent],
+      imports: [RouterModule],
+      providers: [
+        provideRouter([
+          {
+            path: 'units/:unitId',
+            component: UnitRootStateComponent,
+            resolve: {
+              unit: (route: ActivatedRouteSnapshot) =>
+                of(unitStub(Number(route.paramMap.get('unitId')))),
+            },
+            children: [{path: 'students', component: UnitChildStubComponent}],
+          },
+        ]),
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  // Guards the (activate) binding on the outlet. Without it the children fall back to
+  // their own snapshot read and the whole fix is inert, with no other test noticing.
+  it('hands its unit stream to the child the outlet activates, and keeps it on the url', async () => {
+    const fixture = TestBed.createComponent(UnitRootHostComponent);
+    const router = TestBed.inject(Router);
+    fixture.detectChanges();
+
+    await router.navigateByUrl('/units/1/students');
+    fixture.detectChanges();
+
+    const child = fixture.debugElement.query(By.directive(UnitChildStubComponent))
+      .componentInstance as UnitChildStubComponent;
+    expect(child.unit$).toBeDefined();
+    expect(await firstValueFrom(child.unit$)).toMatchObject({id: 1});
+
+    await router.navigateByUrl('/units/2/students');
+    fixture.detectChanges();
+
+    const reused = fixture.debugElement.query(By.directive(UnitChildStubComponent))
+      .componentInstance as UnitChildStubComponent;
+    expect(reused).toBe(child);
+    expect(await firstValueFrom(child.unit$)).toMatchObject({id: 2});
+  });
+
+  it('leaves a child that already built its own unit stream alone', () => {
+    const fixture = TestBed.createComponent(UnitRootStateComponent);
+    const root = fixture.componentInstance;
+    const own = of(unitStub(9));
+    const child: {unit$?: Observable<Unit>} = {unit$: own};
+
+    root.onActivate(child);
+
+    expect(child.unit$).toBe(own);
+  });
+});
diff --git a/src/app/units/unit-root-state.component.ts b/src/app/units/unit-root-state.component.ts
new file mode 100644
index 0000000000..90f7e7086c
--- /dev/null
+++ b/src/app/units/unit-root-state.component.ts
@@ -0,0 +1,51 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Observable, filter, map, shareReplay} from 'rxjs';
+import {Unit} from 'src/app/api/models/doubtfire-model';
+
+interface UnitRouteChild {
+  unit$?: Observable<Unit>;
+}
+
+@Component({
+  selector: 'f-unit-root-state',
+  templateUrl: './unit-root-state.component.html',
+  styleUrl: './unit-root-state.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class UnitRootStateComponent implements OnInit {
+  @Input() public unit$: Observable<Unit>;
+  public unit: Unit;
+
+  // route.data emits again whenever the unit resolver re-runs, and it re-runs whenever
+  // :unitId changes, so this stream follows the url even when the router reuses the
+  // component instances underneath it.
+  public readonly routeUnit$ = this.route.data.pipe(
+    map((data) => data.unit as Unit),
+    filter((unit): unit is Unit => unit != null),
+    shareReplay({bufferSize: 1, refCount: true}),
+  );
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.route.data.subscribe((data) => {
+      this.unit = data.unit;
+    });
+  }
+
+  // The outlet emits this after creating the child but before its first change
+  // detection, so the stream is in place before the child runs ngOnInit.
+  //
+  // project-root-state guards the same assignment with `'project$' in component`.
+  // That check cannot work here: useDefineForClassFields is off, so an @Input with
+  // no initialiser is never written to the instance and the `in` test is always
+  // false. Guarding on the value instead leaves a child that has already built its
+  // own unit$ alone, which keeps task-viewer-state on the behaviour RTE-02 owns.
+  onActivate(component: UnitRouteChild): void {
+    if (component && !component.unit$) {
+      component.unit$ = this.unit$ ?? this.routeUnit$;
+    }
+  }
+}
diff --git a/src/app/units/unit.resolver.ts b/src/app/units/unit.resolver.ts
new file mode 100644
index 0000000000..6a7be4417b
--- /dev/null
+++ b/src/app/units/unit.resolver.ts
@@ -0,0 +1,81 @@
+import {inject} from '@angular/core';
+import {ResolveFn} from '@angular/router';
+import {Observable, first} from 'rxjs';
+import {Unit, UnitRole, UnitService, UserService} from 'src/app/api/models/doubtfire-model';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {GlobalStateService, ViewType} from 'src/app/projects/states/index/global-state.service';
+
+export const resolveUnit: ResolveFn<Unit> = (route, state) => {
+  const unitService = inject(UnitService);
+  const globalState = inject(GlobalStateService);
+  const userService = inject(UserService);
+  const alertService = inject(AlertService);
+  const unitId = Number(route.paramMap.get('unitId'));
+
+  return new Observable<Unit>((observer) => {
+    globalState.onLoad(() => {
+      let unitRole = globalState.loadedUnitRoles.currentValues.find(
+        (role) => role.unit.id === unitId,
+      );
+
+      if (
+        !unitRole &&
+        (userService.currentUser.role === 'Admin' || userService.currentUser.role === 'Auditor')
+      ) {
+        unitRole = userService.adminOrAuditorRoleFor(
+          userService.currentUser.role,
+          unitId,
+          userService.currentUser,
+        );
+      }
+
+      const resolveProgressively = shouldResolveUnitProgressively(state.url, unitId);
+      if (resolveProgressively) {
+        const unit =
+          unitRole?.unit ?? unitService.cache.getOrCreate(unitId, unitService, {id: unitId});
+        globalState.setView(ViewType.UNIT, routeEntity(unit, unitRole));
+        observer.next(unit);
+        observer.complete();
+        return;
+      }
+
+      unitService.get(unitId).subscribe({
+        next: (unit) => {
+          globalState.setView(ViewType.UNIT, routeEntity(unit, unitRole));
+          if (!resolveProgressively) {
+            observer.next(unit);
+            observer.complete();
+          }
+        },
+        error: (err) => {
+          if (unitRole?.unit) {
+            globalState.setView(ViewType.UNIT, unitRole);
+            if (!resolveProgressively) {
+              observer.next(unitRole.unit);
+              observer.complete();
+            }
+            return;
+          }
+
+          alertService.error('Error loading unit: ' + err, 8000);
+          observer.error(err);
+        },
+      });
+    });
+  }).pipe(first());
+};
+
+// Task routes can activate their outer shell while their component fetches detailed data.
+function shouldResolveUnitProgressively(url: string, unitId: number): boolean {
+  const pathname = url.split('?')[0];
+  return new RegExp(`^/units/${unitId}/tasks(?:/|$)`).test(pathname);
+}
+
+function routeEntity(unit: Unit, unitRole?: UnitRole): Unit | UnitRole {
+  if (!unitRole) {
+    return unit;
+  }
+
+  unitRole.unit = unit;
+  return unitRole;
+}
diff --git a/src/app/units/units.coffee b/src/app/units/units.coffee
deleted file mode 100644
index 1aab3228fc..0000000000
--- a/src/app/units/units.coffee
+++ /dev/null
@@ -1,4 +0,0 @@
-angular.module('doubtfire.units', [
-  'doubtfire.units.modals'
-  'doubtfire.units.states'
-])
diff --git a/src/app/visualisations/achievement-box-plot.coffee b/src/app/visualisations/achievement-box-plot.coffee
deleted file mode 100644
index 7ef7646829..0000000000
--- a/src/app/visualisations/achievement-box-plot.coffee
+++ /dev/null
@@ -1,67 +0,0 @@
-angular.module('doubtfire.visualisations.achievement-box-plot', [])
-.directive 'achievementBoxPlot', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'visualisations/visualisation.tpl.html'
-  scope:
-    rawData: '=data'
-    type: '='
-    unit: '='
-    pctHolder: '='
-    height: '=?'
-    showLegend: '=?'
-  controller: ($scope, $timeout, Visualisation, outcomeService, $sce) ->
-    $scope.showLegend = unless $scope.showLegend? then true else $scope.showLegend
-    $scope.height     = unless $scope.height?     then 600  else $scope.height
-
-    iloValues = outcomeService.calculateTargets($scope.unit, $scope.unit, $scope.unit.taskStatusFactor)
-    iloMaxes = _.mapValues iloValues, (d, k) -> _.reduce d, ((memo, value) -> memo + value), 0
-    rangeMax = _.max _.values(iloMaxes)
-
-    refreshData = (newData) ->
-      isPct = ($scope.pctHolder? and $scope.pctHolder.pct)
-      if isPct
-        $scope.options.chart.yDomain = [0, 1]
-      else
-        $scope.options.chart.yDomain = [0, rangeMax]
-
-      $scope.data = _.map newData, (d, id) ->
-        max = iloMaxes[id]
-        if (! max?) or max == 0 or ! isPct
-          max = 1
-        label = _.find($scope.unit.ilos, { id: +id }).abbreviation
-        {
-          label: $sce.getTrustedHtml(label),
-          values: {
-            Q1: d.lower / max
-            Q2: d.median / max
-            Q3: d.upper / max
-            whisker_low: d.min / max
-            whisker_high: d.max / max
-          }
-        }
-      $timeout ->
-        if $scope.api?.refresh?
-          $scope.api.refresh()
-
-    [$scope.options, $scope.config] = Visualisation 'boxPlotChart', 'ILO Achievement Box Plot', {
-      x: (d) -> d.label
-      height: $scope.height
-      showXAxis: $scope.showLegend
-      margin:
-        top:    if $scope.showLegend then 20 else 20
-        right:  if $scope.showLegend then 10 else 10
-        bottom: if $scope.showLegend then 60 else 20
-        left:   if $scope.showLegend then 80 else 40
-      yAxis:
-        axisLabel: if $scope.showLegend then "ILO Achievement"
-      tooltip:
-        enabled: $scope.showLegend
-      maxBoxWidth: 75
-      yDomain: [0, 1]
-    }, {}, 'Achievement Box Plot'
-
-    # $scope.$watch 'rawData', refreshData($scope.rawData)
-    $scope.$watch 'pctHolder.pct', (newData, oldData) -> if newData != oldData then refreshData($scope.rawData)
-
-    refreshData($scope.rawData)
diff --git a/src/app/visualisations/achievement-custom-bar-chart.coffee b/src/app/visualisations/achievement-custom-bar-chart.coffee
deleted file mode 100644
index 6eafad4c6d..0000000000
--- a/src/app/visualisations/achievement-custom-bar-chart.coffee
+++ /dev/null
@@ -1,677 +0,0 @@
-angular.module('doubtfire.visualisations.achievement-custom-bar-chart', [])
-.directive 'achievementCustomBarChart', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'visualisations/visualisation.tpl.html'
-  scope:
-    project: '='
-    unit: '='
-
-  controller: ($scope, Visualisation, outcomeService, gradeService, $sce) ->
-    $scope.showLegend = if $scope.showLegend? then $scope.showLegend else true
-    unless nv.models.achievementBar?
-      nv.models.achievementBar = ->
-        chart = (selection) ->
-          renderWatch.reset()
-          selection.each (data) ->
-            availableWidth = width - (margin.left) - (margin.right)
-            availableHeight = height - (margin.top) - (margin.bottom)
-            container = d3.select(this)
-            nv.utils.initSVG container
-            #add series index to each data point for reference
-            data.forEach (series, i) ->
-              series.values.forEach (point) ->
-                point.series = i
-                return
-              return
-            # Setup Scales
-            # remap and flatten the data for use in calculating the scales' domains
-            seriesData = if xDomain and yDomain then [] else data.map(((d) ->
-              d.values.map ((d, i) ->
-                {
-                  x: getX(d, i)
-                  y: getY(d, i)
-                  y0: d.y0
-                }
-              )
-            ))
-            x.domain(xDomain or d3.merge(seriesData).map((d) ->
-              d.x
-            )).rangeBands xRange or [
-              0
-              availableWidth
-            ], .1
-            y.domain yDomain or d3.extent(d3.merge(seriesData).map((d) ->
-              d.y
-            ).concat(forceY))
-            # If showValues, pad the Y axis range to account for label height
-            if showValues
-              y.range yRange or [
-                availableHeight - (if y.domain()[0] < 0 then 12 else 0)
-                if y.domain()[1] > 0 then 12 else 0
-              ]
-            else
-              y.range yRange or [
-                availableHeight
-                0
-              ]
-            #store old scales if they exist
-            x0 = x0 or x
-            y0 = y0 or y.copy().range([
-              y(0)
-              y(0)
-            ])
-            # Setup containers and skeleton of chart
-            wrap = container.selectAll('g.nv-wrap.nv-discretebar').data([ data ])
-            wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discretebar')
-            gEnter = wrapEnter.append('g')
-            g = wrap.select('g')
-            gEnter.append('g').attr 'class', 'nv-groups'
-            wrap.attr 'transform', 'translate(' + margin.left + ',' + margin.top + ')'
-            # TODO: (@macite) by definition, the discrete bar should not have multiple groups, will modify/remove later
-            groups = wrap.select('.nv-groups').selectAll('.nv-group').data(((d) ->
-              d
-            ), (d) ->
-              d.key
-            )
-            groups.enter().append('g').style('stroke-opacity', 1e-6).style 'fill-opacity', 1e-6
-            groups.exit().watchTransition(renderWatch, 'discreteBar: exit groups').style('stroke-opacity', 1e-6).style('fill-opacity', 1e-6).remove()
-            groups.attr('class', (d, i) ->
-              'nv-group nv-series-' + i
-            )
-            groups.watchTransition(renderWatch, 'discreteBar: groups').style('stroke-opacity', 1).style 'fill-opacity', .75
-
-            if targets? && _.size(targets) > 0
-              # Create the background bars... match one set per ILO
-              backBarSeries = groups.selectAll('g.nv-backBarSeries').data((d) ->
-                d.values
-              )
-              backBarSeries.exit().remove()
-              backBarSeries.enter().append('g')
-              backBarSeries.attr('class', (d, i) ->
-                'nv-backBarSeries nv-backSeries-' + i
-              ).classed 'hover', (d) ->
-                d.hover
-
-              backBars = backBarSeries.selectAll('g.nv-backBar').data( (d,i) -> _.map(_.values(d.targets), (v) -> { value: v, key: d.label } ) )
-              backBars.exit().remove()
-              backBarsEnter = backBars.enter().append('g')
-
-              backBarsEnter.append('rect').attr('height', 10).attr 'width', x.rangeBand() * 0.9 / data.length
-              backBarsEnter.on('mouseover', (d, i) ->
-                d3.select(this).classed 'hover', true
-                dispatch.elementMouseover
-                  data: gradeService.grades[i]
-                  index: i
-                  color: d.value.color
-                return
-              ).on('mouseout', (d, i) ->
-                d3.select(this).classed 'hover', false
-                dispatch.elementMouseout
-                  data: gradeService.grades[i]
-                  index: i
-                  color: d.value.color
-                return
-              ).on('mousemove', (d, i) ->
-                dispatch.elementMousemove
-                  data: gradeService.grades[i]
-                  index: i
-                  color: d.value.color
-                return
-              ).on('click', (d, i) ->
-                element = this
-                dispatch.elementClick
-                  data: gradeService.grades[i]
-                  index: i
-                  color: d.value.color
-                  event: d3.event
-                  element: element
-                d3.event.stopPropagation()
-                return
-              ).on('dblclick', (d, i) ->
-                dispatch.elementDblClick
-                  data: gradeService.grades[i]
-                  index: i
-                  color: d.value.color
-                d3.event.stopPropagation()
-                return
-              )
-
-              backBars.attr('class', (d, i, j) ->
-                if d.value.height < 0 then 'nv-backBar negative' else 'nv-backBar positive'
-              ).select('rect').attr('class', rectClass).style('fill-opacity', '0.2').
-                style('fill', (d) -> d.value.color).
-                watchTransition(renderWatch, 'discreteBar: backBars rect').attr 'width', x.rangeBand() * .9 / data.length
-              backBars.watchTransition(renderWatch, 'discreteBar: backBars').attr('transform', (d, i, j) ->
-                left = x(d.key) + x.rangeBand() * .05
-                top = y(d.value.height + d.value.offset)
-                'translate(' + left + ', ' + top + ')'
-              ).select('rect').attr 'height', (d, i, j) ->
-                Math.max Math.abs(y(d.value.height) - y(0)), 1
-
-            bars = groups.selectAll('g.nv-bar').data((d) ->
-              d.values
-            )
-            bars.exit().remove()
-            barsEnter = bars.enter().append('g').on('mouseover', (d, i) ->
-              # TODO: (@macite) figure out why j works above, but not here
-              d3.select(this).classed 'hover', true
-              dispatch.elementMouseover
-                data: d
-                index: i
-                color: d3.select(this).style('fill')
-              return
-            ).on('mouseout', (d, i) ->
-              d3.select(this).classed 'hover', false
-              dispatch.elementMouseout
-                data: d
-                index: i
-                color: d3.select(this).style('fill')
-              return
-            ).on('mousemove', (d, i) ->
-              dispatch.elementMousemove
-                data: d
-                index: i
-                color: d3.select(this).style('fill')
-              return
-            ).on('click', (d, i) ->
-              element = this
-              dispatch.elementClick
-                data: d
-                index: i
-                color: d3.select(this).style('fill')
-                event: d3.event
-                element: element
-              d3.event.stopPropagation()
-              return
-            ).on('dblclick', (d, i) ->
-              dispatch.elementDblClick
-                data: d
-                index: i
-                color: d3.select(this).style('fill')
-              d3.event.stopPropagation()
-              return
-            )
-
-            barsEnter.append('rect').attr('height', 0).attr 'width', x.rangeBand() * .5 / data.length
-            if showValues
-              barsEnter.append('text').attr 'text-anchor', 'middle'
-              bars.select('text').text((d, i) ->
-                valueFormat getY(d, i)
-              ).watchTransition(renderWatch, 'discreteBar: bars text').attr('x', x.rangeBand() * .5 / 2).attr 'y', (d, i) ->
-                if getY(d, i) < 0 then y(getY(d, i)) - y(0) + 12 else -4
-            else
-              bars.selectAll('text').remove()
-            bars.attr('class', (d, i) ->
-              if getY(d, i) < 0 then 'nv-bar negative' else 'nv-bar positive'
-            ).style('fill', (d, i) ->
-              d.color or color(d, i)
-            ).style('stroke', (d, i) ->
-              d.color or color(d, i)
-            ).select('rect').attr('class', rectClass).watchTransition(renderWatch, 'discreteBar: bars rect').attr 'width', x.rangeBand() * .5 / data.length
-            bars.watchTransition(renderWatch, 'discreteBar: bars').attr('transform', (d, i) ->
-              left = x(getX(d, i)) + x.rangeBand() * .25
-              top = if getY(d, i) < 0 then y(0) else if y(0) - y(getY(d, i)) < 1 then y(0) - 1 else y(getY(d, i))
-              'translate(' + left + ', ' + top + ')'
-            ).select('rect').attr 'height', (d, i) ->
-              Math.max Math.abs(y(getY(d, i)) - y(0)), 1
-            #store old scales for use in transitions on update
-            x0 = x.copy()
-            y0 = y.copy()
-            return
-          renderWatch.renderEnd 'achievementBar immediate'
-          chart
-
-        'use strict'
-        #============================================================
-        # Public Variables with Default Settings
-        #------------------------------------------------------------
-        margin =
-          top: 0
-          right: 0
-          bottom: 0
-          left: 0
-        width = 960
-        height = 500
-        id = Math.floor(Math.random() * 10000)
-        container = undefined
-        x = d3.scale.ordinal()
-        y = d3.scale.linear()
-
-        getX = (d) ->
-          d.x
-
-        getY = (d) ->
-          d.y
-
-        forceY = [ 0 ]
-        color = nv.utils.defaultColor()
-        showValues = false
-        valueFormat = d3.format(',.2f')
-        xDomain = undefined
-        yDomain = undefined
-        xRange = undefined
-        yRange = undefined
-        dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
-        rectClass = 'discreteBar'
-        duration = 250
-        #============================================================
-        # Private Variables
-        #------------------------------------------------------------
-        x0 = undefined
-        y0 = undefined
-        renderWatch = nv.utils.renderWatch(dispatch, duration)
-        #============================================================
-        # Expose Public Variables
-        #------------------------------------------------------------
-        chart.dispatch = dispatch
-        chart.options = nv.utils.optionsFunc.bind(chart)
-        chart._options = Object.create({},
-          width:
-            get: ->
-              width
-            set: (_) ->
-              width = _
-              return
-          height:
-            get: ->
-              height
-            set: (_) ->
-              height = _
-              return
-          forceY:
-            get: ->
-              forceY
-            set: (_) ->
-              forceY = _
-              return
-          showValues:
-            get: ->
-              showValues
-            set: (_) ->
-              showValues = _
-              return
-          x:
-            get: ->
-              getX
-            set: (_) ->
-              getX = _
-              return
-          y:
-            get: ->
-              getY
-            set: (_) ->
-              getY = _
-              return
-          xScale:
-            get: ->
-              x
-            set: (_) ->
-              x = _
-              return
-          yScale:
-            get: ->
-              y
-            set: (_) ->
-              y = _
-              return
-          xDomain:
-            get: ->
-              xDomain
-            set: (_) ->
-              xDomain = _
-              return
-          yDomain:
-            get: ->
-              yDomain
-            set: (_) ->
-              yDomain = _
-              return
-          xRange:
-            get: ->
-              xRange
-            set: (_) ->
-              xRange = _
-              return
-          yRange:
-            get: ->
-              yRange
-            set: (_) ->
-              yRange = _
-              return
-          valueFormat:
-            get: ->
-              valueFormat
-            set: (_) ->
-              valueFormat = _
-              return
-          id:
-            get: ->
-              id
-            set: (_) ->
-              id = _
-              return
-          rectClass:
-            get: ->
-              rectClass
-            set: (_) ->
-              rectClass = _
-              return
-          margin:
-            get: ->
-              margin
-            set: (_) ->
-              margin.top = if _.top != undefined then _.top else margin.top
-              margin.right = if _.right != undefined then _.right else margin.right
-              margin.bottom = if _.bottom != undefined then _.bottom else margin.bottom
-              margin.left = if _.left != undefined then _.left else margin.left
-              return
-          color:
-            get: ->
-              color
-            set: (_) ->
-              color = nv.utils.getColor(_)
-              return
-          duration:
-            get: ->
-              duration
-            set: (_) ->
-              duration = _
-              renderWatch.reset duration
-              return
-        )
-        nv.utils.initOptions chart
-        chart
-
-      #
-      # Chart that contains stacked bars in the background, overlaid by other bars...
-      #
-      nv.models.achievementBarChart = ->
-        chart = (selection) ->
-          renderWatch.reset()
-          renderWatch.models achievementbar
-          if showXAxis
-            renderWatch.models xAxis
-          if showYAxis
-            renderWatch.models yAxis
-          selection.each (data) ->
-            container = d3.select(this)
-            that = this
-            nv.utils.initSVG container
-            availableWidth = nv.utils.availableWidth(width, container, margin)
-            availableHeight = nv.utils.availableHeight(height, container, margin)
-
-            chart.update = ->
-              dispatch.beforeUpdate()
-              container.transition().duration(duration).call chart
-              return
-
-            chart.container = this
-
-            # Display No Data message if there's nothing to show.
-            if (!data) or (!data.length) or data.filter(((d) -> d.values.length)).length <= 0
-              nv.utils.noData chart, container
-              return chart
-            else
-              container.selectAll('.nv-noData').remove()
-
-            # Setup Scales
-            x = achievementbar.xScale()
-            y = achievementbar.yScale().clamp(true)
-            # Setup containers and skeleton of chart
-            wrap = container.selectAll('g.nv-wrap.nv-discreteBarWithAxes').data([ data ])
-            gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discreteBarWithAxes').append('g')
-            defsEnter = gEnter.append('defs')
-            g = wrap.select('g')
-            gEnter.append('g').attr 'class', 'nv-x nv-axis'
-            gEnter.append('g').attr('class', 'nv-y nv-axis').append('g').attr('class', 'nv-zeroLine').append 'line'
-            gEnter.append('g').attr 'class', 'nv-barsWrap'
-            gEnter.append('g').attr 'class', 'nv-legendWrap'
-            g.attr 'transform', 'translate(' + margin.left + ',' + margin.top + ')'
-            if showLegend
-              legend.width availableWidth
-              g.select('.nv-legendWrap').datum(data).call legend
-              if margin.top != legend.height()
-                margin.top = legend.height()
-                availableHeight = nv.utils.availableHeight(height, container, margin)
-              wrap.select('.nv-legendWrap').attr 'transform', 'translate(0,' + -margin.top + ')'
-            if rightAlignYAxis
-              g.select('.nv-y.nv-axis').attr 'transform', 'translate(' + availableWidth + ',0)'
-            if rightAlignYAxis
-              g.select('.nv-y.nv-axis').attr 'transform', 'translate(' + availableWidth + ',0)'
-            # Main Chart Component(s)
-            achievementbar.width(availableWidth).height availableHeight
-            barsWrap = g.select('.nv-barsWrap').datum(data.filter((d) ->
-              !d.disabled
-            ))
-            barsWrap.transition().call achievementbar
-            defsEnter.append('clipPath').attr('id', 'nv-x-label-clip-' + achievementbar.id()).append 'rect'
-            g.select('#nv-x-label-clip-' + achievementbar.id() + ' rect').attr('width', x.rangeBand() * (if staggerLabels then 2 else 1)).attr('height', 16).attr 'x', -x.rangeBand() / (if staggerLabels then 1 else 2)
-            # Setup Axes
-            if showXAxis
-              xAxis.scale(x)._ticks(nv.utils.calcTicksX(availableWidth / 100, data)).tickSize -availableHeight, 0
-              g.select('.nv-x.nv-axis').attr 'transform', 'translate(0,' + (y.range()[0] + (if achievementbar.showValues() and y.domain()[0] < 0 then 16 else 0)) + ')'
-              g.select('.nv-x.nv-axis').call xAxis
-              xTicks = g.select('.nv-x.nv-axis').selectAll('g')
-              if staggerLabels
-                xTicks.selectAll('text').attr 'transform', (d, i, j) ->
-                  'translate(0,' + (if j % 2 == 0 then '5' else '17') + ')'
-              if rotateLabels
-                xTicks.selectAll('.tick text').attr('transform', 'rotate(' + rotateLabels + ' 0,0)').style 'text-anchor', if rotateLabels > 0 then 'start' else 'end'
-              if wrapLabels
-                g.selectAll('.tick text').call nv.utils.wrapTicks, chart.xAxis.rangeBand()
-            if showYAxis
-              yAxis.scale(y)._ticks(nv.utils.calcTicksY(availableHeight / 36, data)).tickSize -availableWidth, 0
-              g.select('.nv-y.nv-axis').call yAxis
-            # Zero line
-            g.select('.nv-zeroLine line').attr('x1', 0).attr('x2', if rightAlignYAxis then -availableWidth else availableWidth).attr('y1', y(0)).attr 'y2', y(0)
-            return
-          renderWatch.renderEnd 'achievementBar chart immediate'
-          chart
-
-        'use strict'
-        #============================================================
-        # Public Variables with Default Settings
-        #------------------------------------------------------------
-        achievementbar = nv.models.achievementBar()
-        xAxis = nv.models.axis()
-        yAxis = nv.models.axis()
-        legend = nv.models.legend()
-        tooltip = nv.models.tooltip()
-        margin =
-          top: 15
-          right: 10
-          bottom: 50
-          left: 60
-        width = null
-        height = null
-        color = nv.utils.getColor()
-        showLegend = false
-        showXAxis = true
-        showYAxis = true
-        rightAlignYAxis = false
-        staggerLabels = false
-        wrapLabels = false
-        rotateLabels = 0
-        x = undefined
-        y = undefined
-        noData = null
-        dispatch = d3.dispatch('beforeUpdate', 'renderEnd')
-        duration = 250
-        xAxis.orient('bottom').showMaxMin(false).tickFormat (d) ->
-          d
-        yAxis.orient(if rightAlignYAxis then 'right' else 'left').tickFormat d3.format(',.1f')
-        tooltip.duration(0).headerEnabled(false).keyFormatter (d, i) ->
-          xAxis.tickFormat() d, i
-        #============================================================
-        # Private Variables
-        #------------------------------------------------------------
-        renderWatch = nv.utils.renderWatch(dispatch, duration)
-        #============================================================
-        # Event Handling/Dispatching (out of chart's scope)
-        #------------------------------------------------------------
-        achievementbar.dispatch.on 'elementMouseover.tooltip', (evt) ->
-          key = chart.x()(evt.data)
-          unless key?
-            key = "#{evt.data} task range"
-          else
-            key = "Your progress with #{key}"
-          evt['series'] =
-            key: key
-            # value: chart.y()(evt.data)
-            color: evt.color
-          tooltip.data(evt).hidden false
-          return
-        achievementbar.dispatch.on 'elementMouseout.tooltip', (evt) ->
-          tooltip.hidden true
-          return
-        achievementbar.dispatch.on 'elementMousemove.tooltip', (evt) ->
-          tooltip()
-          return
-        #============================================================
-        # Expose Public Variables
-        #------------------------------------------------------------
-        chart.dispatch = dispatch
-        chart.achievementbar = achievementbar
-        chart.legend = legend
-        chart.xAxis = xAxis
-        chart.yAxis = yAxis
-        chart.tooltip = tooltip
-        chart.options = nv.utils.optionsFunc.bind(chart)
-        chart._options = Object.create({},
-          width:
-            get: ->
-              width
-            set: (_) ->
-              width = _
-              return
-          height:
-            get: ->
-              height
-            set: (_) ->
-              height = _
-              return
-          showLegend:
-            get: ->
-              showLegend
-            set: (_) ->
-              showLegend = _
-              return
-          staggerLabels:
-            get: ->
-              staggerLabels
-            set: (_) ->
-              staggerLabels = _
-              return
-          rotateLabels:
-            get: ->
-              rotateLabels
-            set: (_) ->
-              rotateLabels = _
-              return
-          wrapLabels:
-            get: ->
-              wrapLabels
-            set: (_) ->
-              wrapLabels = ! !_
-              return
-          showXAxis:
-            get: ->
-              showXAxis
-            set: (_) ->
-              showXAxis = _
-              return
-          showYAxis:
-            get: ->
-              showYAxis
-            set: (_) ->
-              showYAxis = _
-              return
-          noData:
-            get: ->
-              noData
-            set: (_) ->
-              noData = _
-              return
-          margin:
-            get: ->
-              margin
-            set: (_) ->
-              margin.top = if _.top != undefined then _.top else margin.top
-              margin.right = if _.right != undefined then _.right else margin.right
-              margin.bottom = if _.bottom != undefined then _.bottom else margin.bottom
-              margin.left = if _.left != undefined then _.left else margin.left
-              return
-          duration:
-            get: ->
-              duration
-            set: (_) ->
-              duration = _
-              renderWatch.reset duration
-              achievementbar.duration duration
-              xAxis.duration duration
-              yAxis.duration duration
-              return
-          color:
-            get: ->
-              color
-            set: (_) ->
-              color = nv.utils.getColor(_)
-              achievementbar.color color
-              legend.color color
-              return
-          rightAlignYAxis:
-            get: ->
-              rightAlignYAxis
-            set: (_) ->
-              rightAlignYAxis = _
-              yAxis.orient if _ then 'right' else 'left'
-              return
-        )
-        nv.utils.inheritOptions chart, achievementbar
-        nv.utils.initOptions chart
-        chart
-
-
-    #
-    # Get the data and options for the chart...
-    #
-    targets = outcomeService.calculateTargets($scope.unit, $scope.unit, $scope.unit.taskStatusFactor)
-    currentProgress = outcomeService.calculateProgress($scope.unit, $scope.project)
-
-    achievementData = {
-      key: "Learning Achievement"
-      values: []
-    }
-
-    max = 0
-
-    _.each $scope.unit.ilos, (ilo) ->
-      iloTargets = { }
-      iloTargets[0] = { offset: 0, height: targets[ilo.id][0], color: gradeService.gradeColors.P }
-      iloTargets[1] = { offset: iloTargets[0].offset + iloTargets[0].height, height: targets[ilo.id][1], color: gradeService.gradeColors.C  }
-      iloTargets[2] = { offset: iloTargets[1].offset + iloTargets[1].height, height: targets[ilo.id][2], color: gradeService.gradeColors.D  }
-      iloTargets[3] = { offset: iloTargets[2].offset + iloTargets[2].height, height: targets[ilo.id][3], color: gradeService.gradeColors.HD }
-
-      if iloTargets[3].offset + iloTargets[3].height  > max
-        max = iloTargets[3].offset + iloTargets[3].height
-
-      achievementData.values.push {
-        label: $sce.getTrustedHtml(ilo.name)
-        value: currentProgress[0][ilo.id] # 0 = staff value
-        targets: iloTargets
-      }
-
-    [$scope.options, $scope.config] = Visualisation 'achievementBarChart', 'ILO Achievement Bar Chart', {
-      height: 600
-      duration: 500
-      yDomain: [0, max]
-      showValues: false
-      showYAxis: false
-      showLegend: false
-      x: (d) -> d.label
-      y: (d) -> d.value
-      color: (d) -> '#373737'
-    }, {}
-
-    $scope.data = [ achievementData ]
diff --git a/src/app/visualisations/alignment-bar-chart.coffee b/src/app/visualisations/alignment-bar-chart.coffee
deleted file mode 100644
index b137cb1dbe..0000000000
--- a/src/app/visualisations/alignment-bar-chart.coffee
+++ /dev/null
@@ -1,41 +0,0 @@
-angular.module('doubtfire.visualisations.alignment-bar-chart', [])
-.directive 'alignmentBarChart', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'visualisations/visualisation.tpl.html'
-  scope:
-    project: '='
-    unit: '='
-    source: '='
-    taskStatusFactor: '='
-  controller: ($scope, Visualisation, gradeService, outcomeService) ->
-    xFn = (d) -> d.label
-    yFn = (d) -> d.value
-
-    [$scope.options, $scope.config] = Visualisation 'multiBarChart', 'ILO Alignment Bar Chart', {
-      clipEdge: yes
-      stacked: no
-      height: 200
-      duration: 500
-      color: (d) ->
-        gradeService.gradeColors[gradeService.gradeAcronyms[d.key]]
-      x: xFn
-      y: yFn
-      forceY: 0
-      showYAxis: no
-    }, {}
-
-    $scope.data = []
-
-    $scope.calculateAlignmentVisualisation = (source, taskStatusFactor) ->
-      unit = $scope.unit
-      _.extend $scope.data, outcomeService.targetsByGrade($scope.unit, source)
-
-      if $scope.api?
-        $scope.api.update()
-
-    $scope.calculateAlignmentVisualisation($scope.source, $scope.taskStatusFactor)
-
-    $scope.$on('UpdateAlignmentChart', ->
-      $scope.calculateAlignmentVisualisation($scope.source, $scope.taskStatusFactor)
-    )
diff --git a/src/app/visualisations/alignment-bullet-chart.coffee b/src/app/visualisations/alignment-bullet-chart.coffee
deleted file mode 100644
index 9ef1f3f9e1..0000000000
--- a/src/app/visualisations/alignment-bullet-chart.coffee
+++ /dev/null
@@ -1,591 +0,0 @@
-angular.module('doubtfire.visualisations.alignment-bullet-chart', [])
-.directive 'alignmentBulletChart', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'visualisations/visualisation.tpl.html'
-  scope:
-    project: '='
-    unit: '='
-    ilo: '='
-    targets: '='
-    currentProgress: '='
-    classStats: '='
-    showLegend: '=?'
-
-  controller: ($scope, gradeService, Visualisation, $sce) ->
-    $scope.showLegend = if $scope.showLegend? then $scope.showLegend else true
-    unless nv.models.iloBullet?
-      # Chart design based on the recommendations of Stephen Few. Implementation
-      # based on the work of Clint Ivy, Jamie Love, and Jason Davies.
-      # http://projects.instantcognition.com/protovis/bulletchart/
-      nv.models.iloBullet = ->
-        chart = (selection) ->
-          selection.each (d, i) ->
-            availableWidth = width - (if $scope.legend then margin.left else 0) - (if $scope.legend then margin.right else 0)
-            availableHeight = height - (margin.top) - (margin.bottom)
-            container = d3.select(this)
-            nv.utils.initSVG container
-            rangez = ranges.call(this, d, i).slice().reverse()
-            markerz = markers.call(this, d, i).slice().sort(d3.descending)
-            measurez = measures.call(this, d, i)
-            rangeLabelz = rangeLabels.call(this, d, i).slice().reverse()
-            markerLabelz = markerLabels.call(this, d, i).slice()
-            measureLabelz = measureLabels.call(this, d, i).slice()
-
-            # Setup Scales
-            # Compute the new x-scale.
-            x1 = d3.scale.linear().domain(d3.extent(d3.merge([
-              forceX
-              rangez
-            ]))).range(if reverse then [
-              availableWidth
-              0
-            ] else [
-              0
-              availableWidth
-            ])
-            # Retrieve the old x-scale, if this is an update.
-            x0 = @__chart__ or d3.scale.linear().domain([
-              0
-              Infinity
-            ]).range(x1.range())
-
-            # Stash the new scale.
-            @__chart__ = x1
-
-            # Get the range values
-            rangeHD = rangez[0]
-            rangeD = rangez[1]
-            rangeC = rangez[2]
-            rangeP = rangez[3]
-
-            # Setup containers and skeleton of chart
-            wrap = container.selectAll('g.nv-wrap.nv-bullet').data([ d ])
-            wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bullet')
-            gEnter = wrapEnter.append('g')
-            g = wrap.select('g')
-            gEnter.append('rect').attr('class', 'nv-range nv-rangeHD').style('fill-opacity', '0.2').style('fill', gradeService.gradeColors.HD)
-            gEnter.append('rect').attr('class', 'nv-range nv-rangeD' ).style('fill-opacity', '0.2').style('fill', gradeService.gradeColors.D)
-            gEnter.append('rect').attr('class', 'nv-range nv-rangeC' ).style('fill-opacity', '0.2').style('fill', gradeService.gradeColors.C)
-            gEnter.append('rect').attr('class', 'nv-range nv-rangeP' ).style('fill-opacity', '0.2').style('fill', gradeService.gradeColors.P)
-            gEnter.append('rect').attr 'class', 'nv-measure'
-            gEnter.append('rect').attr('class', 'nv-median').style('fill-opacity', '1.0').style('fill','#ffffff')
-            wrap.attr 'transform', 'translate(' + margin.left + ',' + margin.top + ')'
-
-            w0 = (d) ->
-              Math.abs x0(d) - x0(0)
-
-            w1 = (d) ->
-              Math.abs x1(d) - x1(0)
-
-            xp0 = (d) ->
-              if d > 0 then x0(d) else x0(0)
-
-            xp1 = (d) ->
-              if d > 0 then x1(d) else x1(0)
-
-            g.select('rect.nv-rangeHD')
-              .attr('height', availableHeight)
-              .attr('width', w1(rangeHD - rangeD) )
-              .attr('x', xp1(rangeD))
-              .datum rangeHD
-
-            g.select('rect.nv-rangeD')
-              .attr('height', availableHeight)
-              .attr('width', w1(rangeD - rangeC))
-              .attr('x', xp1(rangeC))
-              .datum rangeD
-
-            g.select('rect.nv-rangeC')
-              .attr('height', availableHeight)
-              .attr('width', w1(rangeC - rangeP))
-              .attr('x', xp1(rangeP))
-              .datum rangeC
-
-            g.select('rect.nv-rangeP')
-              .attr('height', availableHeight)
-              .attr('width', w1(rangeP))
-              .attr('x', xp1(0))
-              .datum rangeP
-
-            if measurez?
-              g.select('rect.nv-median')
-                .style('fill', "#373737")
-                .style('fill-opacity',0.6)
-                .attr('height', availableHeight)
-                .attr('y', 0)
-                .attr('width', 2)
-                .attr('x', xp1(measurez.median))
-                .on('mouseover', ->
-                  dispatch.elementMouseover
-                    value: measurez.median
-                    label: 'The average student is here'
-                    color: d3.select(this).style('fill')
-                  return)
-                .on('mousemove', ->
-                  dispatch.elementMousemove
-                    value: measurez.median
-                    label: 'Class Median'
-                    color: d3.select(this).style('fill')
-                  return)
-                .on 'mouseout', ->
-                  dispatch.elementMouseout
-                    value: measurez.median
-                    label: 'Class Median'
-                    color: d3.select(this).style('fill')
-                  return
-
-              g.select('rect.nv-measure')
-                .style('fill', "#373737")
-                .style('fill-opacity',0.6)
-                .attr('height', availableHeight * 2 / 3)
-                .attr('y', availableHeight / 6)
-                .attr('width', xp1(measurez.upper) - xp1(measurez.lower))
-                .attr('x', xp1(measurez.lower))
-                .on('mouseover', ->
-                  dispatch.elementMouseover
-                    value: measurez[0]
-                    label: measureLabelz[0] or 'Current'
-                    color: d3.select(this).style('fill')
-                  return)
-                .on('mousemove', ->
-                  dispatch.elementMousemove
-                    value: measurez[0]
-                    label: measureLabelz[0] or 'Current'
-                    color: d3.select(this).style('fill')
-                  return)
-                .on 'mouseout', ->
-                  dispatch.elementMouseout
-                    value: measurez[0]
-                    label: measureLabelz[0] or 'Current'
-                    color: d3.select(this).style('fill')
-                  return
-
-            h3 = availableHeight / 6
-            markerData = markerz.map((marker, index) ->
-              {
-                value: marker
-                label: markerLabelz[index]
-              }
-            )
-            gEnter.selectAll('path.nv-markerTriangle')
-              .data(markerData)
-              .enter()
-              .append('path')
-              .attr('class', 'nv-markerTriangle')
-              .attr('d', (d,i) ->
-                if i % 2 == 0
-                  'M0,' + h3 + 'L' + h3 + ',' + -h3 + ' ' + -h3 + ',' + -h3 + 'Z'
-                else
-                  'M0,' + -h3 + 'L' + -h3 + ',0L0,' + h3 + 'L' + h3 + ',0Z'
-                )
-              .on('mouseover', (d) ->
-                dispatch.elementMouseover(
-                  value: d.value
-                  label: d.label or 'Previous'
-                  color: d3.select(this).style('fill')
-                  pos: [
-                    x1(d.value)
-                    availableHeight / 2
-                  ])
-                return )
-              .on('mousemove', (d) ->
-                dispatch.elementMousemove(
-                  value: d.value
-                  label: d.label or 'Previous'
-                  color: d3.select(this).style('fill') )
-                return )
-              .on 'mouseout', (d, i) ->
-                dispatch.elementMouseout(
-                  value: d.value
-                  label: d.label or 'Previous'
-                  color: d3.select(this).style('fill'))
-                return
-
-            g.selectAll('path.nv-markerTriangle')
-              .data(markerData).attr 'transform', (d) ->
-                'translate(' + x1(d.value) + ',' + availableHeight / 2 + ')'
-
-            wrap.selectAll('.nv-range').on('mouseover', (d, i) ->
-              label = rangeLabelz[i] or (if !i then 'Maximum' else if i == 1 then 'Mean' else 'Minimum')
-              dispatch.elementMouseover
-                value: d
-                label: label
-                color: d3.select(this).style('fill')
-              return
-            ).on('mousemove', ->
-              dispatch.elementMousemove
-                value: measurez[0]
-                label: measureLabelz[0] or 'Previous'
-                color: d3.select(this).style('fill')
-              return
-            ).on 'mouseout', (d, i) ->
-              label = rangeLabelz[i] or (if !i then 'Maximum' else if i == 1 then 'Mean' else 'Minimum')
-              dispatch.elementMouseout
-                value: d
-                label: label
-                color: d3.select(this).style('fill')
-              return
-            return
-          chart
-
-        'use strict'
-        #============================================================
-        # Public Variables with Default Settings
-        #------------------------------------------------------------
-        margin =
-          top: 0
-          right: 0
-          bottom: 0
-          left: 0
-        orient = 'left'
-        reverse = false
-
-        ranges = (d) ->
-          d.ranges
-
-        markers = (d) ->
-          if d.markers then d.markers else []
-
-        measures = (d) ->
-          d.measures
-
-        rangeLabels = (d) ->
-          if d.rangeLabels then d.rangeLabels else []
-
-        markerLabels = (d) ->
-          if d.markerLabels then d.markerLabels else []
-
-        measureLabels = (d) ->
-          if d.measureLabels then d.measureLabels else []
-
-        forceX = [ 0 ]
-        width = 380
-        height = 30
-        container = null
-        tickFormat = null
-        color = nv.utils.getColor([ '#1f77b4' ])
-        dispatch = d3.dispatch('elementMouseover', 'elementMouseout', 'elementMousemove')
-        #============================================================
-        # Expose Public Variables
-        #------------------------------------------------------------
-        chart.dispatch = dispatch
-        chart.options = nv.utils.optionsFunc.bind(chart)
-        chart._options = Object.create({},
-          ranges:
-            get: ->
-              ranges
-            set: (_) ->
-              ranges = _
-              return
-          markers:
-            get: ->
-              markers
-            set: (_) ->
-              markers = _
-              return
-          measures:
-            get: ->
-              measures
-            set: (_) ->
-              measures = _
-              return
-          forceX:
-            get: ->
-              forceX
-            set: (_) ->
-              forceX = _
-              return
-          width:
-            get: ->
-              width
-            set: (_) ->
-              width = _
-              return
-          height:
-            get: ->
-              height
-            set: (_) ->
-              height = _
-              return
-          tickFormat:
-            get: ->
-              tickFormat
-            set: (_) ->
-              tickFormat = _
-              return
-          margin:
-            get: ->
-              margin
-            set: (_) ->
-              margin.top = if _.top != undefined then _.top else margin.top
-              margin.right = if _.right != undefined then _.right else margin.right
-              margin.bottom = if _.bottom != undefined then _.bottom else margin.bottom
-              margin.left = if _.left != undefined then _.left else margin.left
-              return
-          orient:
-            get: ->
-              orient
-            set: (_) ->
-              # left, right, top, bottom
-              orient = _
-              reverse = orient == 'right' or orient == 'bottom'
-              return
-          color:
-            get: ->
-              color
-            set: (_) ->
-              color = nv.utils.getColor(_)
-              return
-        )
-        nv.utils.initOptions chart
-        chart
-
-      # ---
-      # generated by js2coffee 2.1.0
-
-
-      # Chart design based on NVD3 bullet chart.
-      nv.models.iloChart = ->
-        #============================================================
-        # Public Variables with Default Settings
-        #------------------------------------------------------------
-
-        bullet = nv.models.iloBullet()
-        tooltip = nv.models.tooltip()
-
-        # TODO: (@macite) top & bottom
-        orient = 'left'
-        reverse = false
-        margin = if $scope.legend then { top: 5, right: 40, bottom: 5, left: 120 } else { top: 5, right: 5, bottom: 5, left: 5 }
-
-        ranges = (d) -> d.ranges
-        rangeLabels = (d) -> d.rangeLabels
-        markers = (d) -> if d.markers then d.markers else []
-        measures = (d) -> d.measures
-
-        width = null
-        height = 55
-        tickFormat = null
-        ticks = null
-        noData = null
-        dispatch = d3.dispatch
-
-        tooltip
-          .duration(0)
-          .headerEnabled(false)
-
-        chart = (selection) ->
-          selection.each (d, i) ->
-            container = d3.select(this)
-            nv.utils.initSVG(container)
-
-            availableWidth = nv.utils.availableWidth(width, container, margin)
-            availableHeight = height - margin.top - margin.bottom
-            that = this
-
-            chart.update = -> chart(selection)
-            chart.container = this
-
-            # Display No Data message if there's nothing to show.
-            if (!d || !ranges.call(this, d, i))
-              nv.utils.noData(chart, container)
-              return chart
-            else
-              container.selectAll('.nv-noData').remove()
-
-            rangez = ranges.call(this, d, i).slice().sort(d3.descending)
-            markerz = markers.call(this, d, i).slice().sort(d3.descending)
-            measurez = measures.call(this, d, i)
-
-            # Setup containers and skeleton of chart
-            wrap = container.selectAll('g.nv-wrap.nv-bulletChart').data([d])
-            wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bulletChart')
-            gEnter = wrapEnter.append('g')
-            g = wrap.select('g')
-
-            gEnter.append('g').attr('class', 'nv-bulletWrap')
-            gEnter.append('g').attr('class', 'nv-titles') if $scope.legend
-
-            wrap.attr('transform', 'translate(' + (if $scope.legend then margin.left else 10) + ',' + margin.top + ')')
-
-            # Compute the new x-scale.
-            # TODO: (@macite) need to allow forceX and forceY, and xDomain, yDomain
-            x1 = d3.scale.linear()
-              .domain([0, Math.max(rangez[0], (markerz[0] || 0), measurez[0])])
-              .range(if reverse then [availableWidth, 0] else [0, availableWidth])
-
-            # Retrieve the old x-scale, if this is an update.
-            x0 = this.__chart__ || d3.scale.linear()
-              .domain([0, Infinity])
-              .range(x1.range())
-
-            # Stash the new scale.
-            this.__chart__ = x1
-
-            # TODO: (@macite) could optimize by precalculating x0(0) and x1(0)
-            w0 = (d) -> Math.abs(x0(d) - x0(0))
-            w1 = (d) -> Math.abs(x1(d) - x1(0))
-
-            if $scope.legend
-              title = gEnter.select('.nv-titles').append('g')
-                .attr('text-anchor', 'end')
-                .attr('transform', 'translate(-6,' + (height - margin.top - margin.bottom) / 2 + ')')
-
-              title.append('text')
-                .attr('class', 'nv-title')
-                .text((d) -> d.title )
-
-              title.append('text')
-                .attr('class', 'nv-subtitle')
-                .attr('dy', '1em')
-                .text( (d) -> d.subtitle )
-
-            bullet
-              .width(availableWidth)
-              .height(availableHeight)
-
-            bulletWrap = g.select('.nv-bulletWrap')
-            d3.transition(bulletWrap).call(bullet)
-
-            # # Compute the tick format.
-            # format = tickFormat || x1.tickFormat( availableWidth / 100 )
-
-            # # Update the tick groups.
-            # tick = g.selectAll('g.nv-tick')
-            #   .data x1.ticks( if ticks then ticks else (availableWidth / 50) ), (d) ->
-            #     this.textContent || format(d)
-
-            # # Initialize the ticks with the old scale, x0.
-            # tickEnter = tick.enter().append('g')
-            #   .attr('class', 'nv-tick')
-            #   .attr('transform', (d) -> 'translate(' + x0(d) + ',0)' )
-            #   .style('opacity', 1e-6)
-
-            # tickEnter.append('line')
-            #   .attr('y1', availableHeight)
-            #   .attr('y2', availableHeight * 7 / 6)
-
-            # tickEnter.append('text')
-            #   .attr('text-anchor', 'middle')
-            #   .attr('dy', '1em')
-            #   .attr('y', availableHeight * 7 / 6)
-            #   .text(format)
-
-            # # Transition the updating ticks to the new scale, x1.
-            # tickUpdate = d3.transition(tick)
-            #   .attr('transform', (d) -> 'translate(' + x1(d) + ',0)')
-            #   .style('opacity', 1)
-
-            # tickUpdate.select('line')
-            #   .attr('y1', availableHeight)
-            #   .attr('y2', availableHeight * 7 / 6)
-
-            # tickUpdate.select('text')
-            #   .attr('y', availableHeight * 7 / 6)
-
-            # #Transition the exiting ticks to the new scale, x1.
-            # d3.transition(tick.exit())
-            #   .attr('transform', (d) -> 'translate(' + x1(d) + ',0)' )
-            #   .style('opacity', 1e-6 )
-            #   .remove( )
-          # end selection each
-
-          d3.timer.flush()
-          chart
-
-        #============================================================
-        # Event Handling/Dispatching (out of chart's scope)
-        #------------------------------------------------------------
-        bullet.dispatch.on 'elementMouseover.tooltip', (evt) ->
-          evt['series'] = {
-            key: evt.label
-            # value: evt.value
-            color: evt.color
-          }
-          tooltip.data(evt).hidden(false)
-
-        bullet.dispatch.on 'elementMouseout.tooltip', (evt) ->
-          tooltip.hidden(true)
-
-        bullet.dispatch.on 'elementMousemove.tooltip', (evt) ->
-          tooltip()
-
-        #============================================================
-        # Expose Public Variables
-        #------------------------------------------------------------
-
-        chart.bullet = bullet
-        chart.dispatch = dispatch
-        chart.tooltip = tooltip
-
-        chart.options = nv.utils.optionsFunc.bind(chart)
-
-        chart._options = Object.create({}, {
-          # simple options, just get/set the necessary values
-          ranges:  {get: (-> ranges), set: ((_)-> ranges=_) }, # ranges (bad, satisfactory, good)
-          rangeLabels:  {get: (-> rangeLabels), set: ((_)-> rangeLabels=_) }, # ranges (bad, satisfactory, good)
-          markers:     {get: (-> markers), set: ((_) -> markers=_) }, # markers (previous, goal)
-          measures: {get: (-> measures), set: ((_) -> measures=_) }, # measures (actual, forecast)
-          width:    {get: (-> width), set: ((_) -> width=_) },
-          height:    {get: (-> height), set: ((_) -> height=_) },
-          tickFormat:    {get: (-> tickFormat), set: ((_) -> tickFormat=_) },
-          ticks:    {get: (-> ticks), set: ((_) -> ticks=_) },
-          noData:    {get: (-> noData), set: ((_) -> noData=_) },
-
-          # options that require extra logic in the setter
-          margin: {get: (-> margin), set: (_) ->
-            margin.top    = if _.top? then _.top else margin.top
-            margin.right  = if _.right? then _.right  else margin.right
-            margin.bottom = if _.bottom? then _.bottom else margin.bottom
-            margin.left   = if _.left? then _.left else margin.left
-          },
-          orient: {get: (-> orient), set: (_) -> # left, right, top, bottom
-            orient = _
-            reverse = orient == 'right' || orient == 'bottom'
-          }
-        })
-
-        nv.utils.inheritOptions(chart, bullet)
-        nv.utils.initOptions(chart)
-
-        chart
-
-    [$scope.options, $scope.config] = Visualisation 'iloChart', 'ILO Alignment Bullet Chart', {
-      height: 60
-      duration: 500
-    }, {}
-
-    targetP = $scope.targets[$scope.ilo.id][0]
-    targetC = targetP + $scope.targets[$scope.ilo.id][1]
-    targetD = targetC + $scope.targets[$scope.ilo.id][2]
-    targetHD = targetD + $scope.targets[$scope.ilo.id][3]
-
-    $scope.data = {
-      "title": $sce.getTrustedHtml($scope.ilo.abbreviation),    #Label the bullet chart
-      "subtitle": $sce.getTrustedHtml($scope.ilo.name),   #sub-label for bullet chart
-      "ranges":[targetP,targetC,targetD,targetHD],  #Minimum, mean and maximum values.
-      "rangeLabels":['Pass','Credit','Distinction','High Distinction'],  #Minimum, mean and maximum values.
-      "measures": {},    #Value representing current measurement (the thick blue line in the example)
-      "measureLabels": ['Most of the class are in this area']
-      "markers":[]      #Place a marker on the chart (the white triangle marker)
-      "markerLabels": ['Your Suggested Progress - Staff Suggestion', 'Your Current Progress - Self Reflection']
-    }
-
-    if $scope.classStats? && $scope.classStats.title?
-      $scope.data.measureLabels[0] = $scope.classStats.title
-
-    updateProgress = ->
-      if $scope.currentProgress?
-        _.each $scope.currentProgress, (d, i) ->
-          $scope.data.markers[i] = $scope.currentProgress[i][$scope.ilo.id]
-          if $scope.currentProgress[i].title?
-            $scope.data.markerLabels[i] = $scope.currentProgress[i].title
-
-      $scope.data.measures = if $scope.classStats? && $scope.classStats[$scope.ilo.id]? then $scope.classStats[$scope.ilo.id] else 0
-
-    updateProgress()
-
-    $scope.$on('ProgressUpdated', ->
-      updateProgress()
-    )
diff --git a/src/app/visualisations/progress-burndown-chart.scss b/src/app/visualisations/progress-burndown-chart.scss
index a3f5591bae..b18611e1f0 100644
--- a/src/app/visualisations/progress-burndown-chart.scss
+++ b/src/app/visualisations/progress-burndown-chart.scss
@@ -1,13 +1,17 @@
 progress-burndown-chart {
   // Dashed for time line
   .dashed {
-    stroke-dasharray: 5,5;
+    stroke-dasharray: 5, 5;
   }
   // :last-child applies to hide time line from legend
   .nv-legendWrap .nv-series:last-child {
     display: none;
   }
   // since we're hiding time line we can move the rest right
-  .nv-legend{ transform: translate(50px, -15px); }
-  .nv-legendWrap{ transform: translate(50px, -15px); }
+  .nv-legend {
+    transform: translate(50px, -15px);
+  }
+  .nv-legendWrap {
+    transform: translate(50px, -15px);
+  }
 }
diff --git a/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.html b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.html
new file mode 100644
index 0000000000..4c6914b24b
--- /dev/null
+++ b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.html
@@ -0,0 +1,95 @@
+<div class="progress-burndown">
+  <div class="progress-burndown__chart">
+    <ngx-charts-line-chart
+      class="progress-burndown-chart"
+      [legend]="legend"
+      [results]="data"
+      [scheme]="colorScheme"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [tooltipDisabled]="true"
+      [view]="undefined"
+      [xAxis]="xAxis"
+      [xAxisLabel]="xAxisLabel"
+      [yAxis]="yAxis"
+      [yAxisLabel]="yAxisLabel"
+      [yAxisTickFormatting]="formatPerc"
+      [yScaleMax]="yScaleMax"
+      [yScaleMin]="yScaleMin"
+      (select)="onSelect($event)"
+    >
+    </ngx-charts-line-chart>
+  </div>
+
+  @if (temp.length > 0) {
+    <div
+      aria-label="Burndown chart series visibility"
+      class="progress-burndown__legend"
+      role="group"
+    >
+      @for (series of temp; track series.name; let index = $index) {
+        <button
+          class="progress-burndown__legend-item"
+          type="button"
+          [attr.aria-pressed]="isDataShown(series.name)"
+          [attr.title]="'Show or hide ' + series.name"
+          [class.progress-burndown__legend-item--hidden]="!isDataShown(series.name)"
+          (click)="onSelect(series.name)"
+        >
+          <span
+            aria-hidden="true"
+            class="progress-burndown__legend-swatch"
+            [style.background-color]="seriesColor(index)"
+          ></span>
+
+          <span class="progress-burndown__legend-label">
+            {{ series.name }}
+          </span>
+        </button>
+      }
+    </div>
+  }
+
+  @if (demoMode.enabled) {
+    @if (peerMedianState === 'ready') {
+      <div class="progress-burndown__message" role="note">
+        <mat-icon aria-hidden="true">science</mat-icon>
+
+        <span>
+          Demo peer median through today: anonymous aggregate sample data, not live cohort data.
+        </span>
+      </div>
+    } @else {
+      <div aria-live="polite" class="progress-burndown__message" role="status">
+        @switch (peerMedianState) {
+          @case ('loading') {
+            <mat-spinner color="accent" diameter="16"></mat-spinner>
+            <span>Loading peer comparison…</span>
+          }
+
+          @case ('suppressed') {
+            <mat-icon aria-hidden="true">group_off</mat-icon>
+            <span>
+              Peer comparison is hidden because the anonymous cohort threshold was not met.
+            </span>
+          }
+
+          @case ('unavailable') {
+            <mat-icon aria-hidden="true">cloud_off</mat-icon>
+            <span>Peer median is unavailable right now.</span>
+          }
+
+          @case ('disabled') {
+            <mat-icon aria-hidden="true">visibility_off</mat-icon>
+            <span>Peer comparison is disabled for this unit.</span>
+          }
+
+          @case ('error') {
+            <mat-icon aria-hidden="true">error_outline</mat-icon>
+            <span> Peer median could not be loaded. Please try again later. </span>
+          }
+        }
+      </div>
+    }
+  }
+</div>
diff --git a/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.scss b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.scss
new file mode 100644
index 0000000000..08a778c281
--- /dev/null
+++ b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.scss
@@ -0,0 +1,149 @@
+:host {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+
+.progress-burndown {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 0.75rem;
+  padding-bottom: 1rem;
+}
+
+.progress-burndown__chart {
+  width: 100%;
+  min-width: 0;
+  height: clamp(20rem, 30vw, 26rem);
+}
+
+.progress-burndown-chart {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}
+
+.progress-burndown__legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.progress-burndown__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid rgba(127, 127, 127, 0.35);
+  border-radius: 0.4rem;
+  background: rgba(127, 127, 127, 0.08);
+  color: inherit;
+  font: inherit;
+  line-height: 1.25;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(127, 127, 127, 0.16);
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
+.progress-burndown__legend-item--hidden {
+  background: #f3f4f6;
+  color: #4b5563;
+
+  .progress-burndown__legend-label {
+    text-decoration: line-through;
+  }
+}
+
+.progress-burndown__legend-swatch {
+  width: 0.8rem;
+  height: 0.8rem;
+  flex: 0 0 0.8rem;
+  border-radius: 0.2rem;
+}
+
+.progress-burndown__legend-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: left;
+}
+
+.progress-burndown__message {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0.65rem 0.75rem;
+  border-radius: 0.45rem;
+  background: rgba(127, 127, 127, 0.1);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+
+  > span {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  mat-icon,
+  mat-spinner {
+    flex: 0 0 auto;
+    margin-top: 0.05rem;
+  }
+
+  mat-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width: 639px) {
+  .progress-burndown {
+    gap: 0.65rem;
+  }
+
+  .progress-burndown__chart {
+    height: 20rem;
+  }
+
+  .progress-burndown__legend {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.4rem;
+  }
+
+  .progress-burndown__legend-item {
+    width: 100%;
+
+    &:last-child:nth-child(odd) {
+      grid-column: 1 / -1;
+    }
+  }
+}
+
+@media (max-width: 379px) {
+  .progress-burndown__legend {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .progress-burndown__legend-item:last-child:nth-child(odd) {
+    grid-column: auto;
+  }
+}
diff --git a/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.spec.ts b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.spec.ts
new file mode 100644
index 0000000000..1815819eb3
--- /dev/null
+++ b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.spec.ts
@@ -0,0 +1,366 @@
+import {describe, expect, it, vi} from 'vitest';
+import {SimpleChange, ViewContainerRef} from '@angular/core';
+import {Subject, of, throwError} from 'rxjs';
+import {
+  PeerProgressResponse,
+  PeerProgressService,
+  PeerProgressState,
+  Project,
+} from 'src/app/api/models/doubtfire-model';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+import {ProgressBurndownChartComponent} from './progress-burndown-chart.component';
+
+describe('ProgressBurndownChartComponent peer comparison', () => {
+  const EXISTING_SERIES = ['Target', 'Projected', 'To Submit', 'To Complete'];
+
+  function makeProject(): Project {
+    const startDate = new Date(2026, 6, 1);
+    const endDate = new Date(2026, 7, 31);
+
+    return {
+      id: 123,
+      targetGrade: 2,
+      unit: {
+        startDate,
+        endDate,
+      },
+      burndownChartData: [
+        {
+          key: 'Target',
+          values: [
+            [startDate.getTime(), 1],
+            [endDate.getTime(), 0],
+          ],
+        },
+        {
+          key: 'Projected',
+          values: [
+            [startDate.getTime(), 0.9],
+            [endDate.getTime(), 0.1],
+          ],
+        },
+        {
+          key: 'To Submit',
+          values: [
+            [startDate.getTime(), 0.8],
+            [endDate.getTime(), 0.2],
+          ],
+        },
+        {
+          key: 'To Complete',
+          values: [
+            [startDate.getTime(), 0.7],
+            [endDate.getTime(), 0.3],
+          ],
+        },
+      ],
+      refreshBurndownChartData: vi.fn(),
+    } as unknown as Project;
+  }
+
+  function makeResponse(
+    project: Project,
+    state: PeerProgressState,
+    targetGrade: number = project.targetGrade,
+  ): PeerProgressResponse {
+    return {
+      project_id: project.id,
+      target_grade: targetGrade,
+      state,
+      median_burndown:
+        state === 'ready'
+          ? [
+              {
+                date: project.unit.startDate.toISOString(),
+                remaining: 0.75,
+              },
+              {
+                date: project.unit.endDate.toISOString(),
+                remaining: 0.25,
+              },
+            ]
+          : [],
+    };
+  }
+
+  function makeHarness(
+    getCohortMedian: ReturnType<typeof vi.fn>,
+    demoEnabled = true,
+  ): {
+    component: ProgressBurndownChartComponent;
+    project: Project;
+  } {
+    const project = makeProject();
+
+    const component = new ProgressBurndownChartComponent(
+      {} as ViewContainerRef,
+      {
+        getCohortMedian,
+      } as unknown as PeerProgressService,
+      {enabled: demoEnabled} as DemoModeStore,
+      'en-US',
+    );
+
+    component.project = project;
+    component.unit = project.unit;
+    component.grade = project.targetGrade;
+
+    return {
+      component,
+      project,
+    };
+  }
+
+  function initialise(component: ProgressBurndownChartComponent): void {
+    // Angular calls ngOnChanges before ngOnInit for initial inputs.
+    component.ngOnChanges({
+      grade: new SimpleChange(undefined, component.grade, true),
+    });
+
+    component.ngOnInit();
+  }
+
+  function seriesNames(component: ProgressBurndownChartComponent): string[] {
+    return component.data.map((series) => series.name);
+  }
+
+  it('does not request or render synthetic peer data when demo mode is off', () => {
+    const getCohortMedian = vi.fn();
+    const {component} = makeHarness(getCohortMedian, false);
+
+    initialise(component);
+
+    expect(getCohortMedian).not.toHaveBeenCalled();
+    expect(seriesNames(component)).toEqual(EXISTING_SERIES);
+    expect(component.peerMedianState).toBe('disabled');
+  });
+
+  function expectOnlyExistingSeries(component: ProgressBurndownChartComponent): void {
+    expect(seriesNames(component)).toEqual(EXISTING_SERIES);
+  }
+
+  it('makes one initial request and keeps the real lines while loading', () => {
+    const request: Subject<PeerProgressResponse> = new Subject();
+    const getCohortMedian = vi.fn().mockReturnValue(request.asObservable());
+
+    const {component, project} = makeHarness(getCohortMedian);
+
+    initialise(component);
+
+    expect(getCohortMedian).toHaveBeenCalledTimes(1);
+    expect(getCohortMedian).toHaveBeenCalledWith(project, 2);
+    expect(project.refreshBurndownChartData).toHaveBeenCalledTimes(1);
+    expect(component.peerMedianState).toBe('loading');
+    expectOnlyExistingSeries(component);
+
+    component.ngOnDestroy();
+  });
+
+  it('appends the demo median without replacing existing lines', () => {
+    const getCohortMedian = vi.fn();
+    const {component, project} = makeHarness(getCohortMedian);
+
+    getCohortMedian.mockReturnValue(of(makeResponse(project, 'ready')));
+
+    initialise(component);
+
+    expect(component.peerMedianState).toBe('ready');
+    expect(seriesNames(component)).toEqual([...EXISTING_SERIES, 'Peer median (demo)']);
+
+    const peerSeries = component.data.find((series) => series.name === 'Peer median (demo)');
+
+    expect(peerSeries?.series.map((point) => point.value)).toEqual([75, 25]);
+  });
+
+  it('withholds the median when the response is suppressed', () => {
+    const getCohortMedian = vi.fn();
+    const {component, project} = makeHarness(getCohortMedian);
+
+    getCohortMedian.mockReturnValue(of(makeResponse(project, 'suppressed')));
+
+    initialise(component);
+
+    expect(component.peerMedianState).toBe('suppressed');
+    expectOnlyExistingSeries(component);
+  });
+
+  it('keeps the existing lines when peer data is unavailable', () => {
+    const getCohortMedian = vi.fn();
+    const {component, project} = makeHarness(getCohortMedian);
+
+    getCohortMedian.mockReturnValue(of(makeResponse(project, 'unavailable')));
+
+    initialise(component);
+
+    expect(component.peerMedianState).toBe('unavailable');
+    expectOnlyExistingSeries(component);
+  });
+
+  it('keeps the existing lines when peer comparison is disabled', () => {
+    const getCohortMedian = vi.fn();
+    const {component, project} = makeHarness(getCohortMedian);
+
+    getCohortMedian.mockReturnValue(of(makeResponse(project, 'disabled')));
+
+    initialise(component);
+
+    expect(component.peerMedianState).toBe('disabled');
+    expectOnlyExistingSeries(component);
+  });
+
+  it('shows an error state without removing the existing lines', () => {
+    const getCohortMedian = vi.fn().mockReturnValue(throwError(() => new Error('network down')));
+
+    const {component} = makeHarness(getCohortMedian);
+
+    initialise(component);
+
+    expect(component.peerMedianState).toBe('error');
+    expectOnlyExistingSeries(component);
+  });
+
+  it('does not mutate the source burndown data while redrawing', () => {
+    const getCohortMedian = vi.fn();
+    const {component, project} = makeHarness(getCohortMedian);
+
+    getCohortMedian.mockReturnValue(of(makeResponse(project, 'ready')));
+
+    const sourceBefore = JSON.stringify(project.burndownChartData);
+
+    initialise(component);
+    component.updateData();
+
+    expect(JSON.stringify(project.burndownChartData)).toBe(sourceBefore);
+  });
+
+  it('cancels the old grade request and only applies the current result', () => {
+    const firstRequest: Subject<PeerProgressResponse> = new Subject();
+    const secondRequest: Subject<PeerProgressResponse> = new Subject();
+
+    const getCohortMedian = vi
+      .fn()
+      .mockReturnValueOnce(firstRequest.asObservable())
+      .mockReturnValueOnce(secondRequest.asObservable());
+
+    const {component, project} = makeHarness(getCohortMedian);
+
+    initialise(component);
+
+    project.targetGrade = 3;
+    component.grade = 3;
+
+    component.ngOnChanges({
+      grade: new SimpleChange(2, 3, false),
+    });
+
+    expect(getCohortMedian).toHaveBeenCalledTimes(2);
+    expect(getCohortMedian).toHaveBeenNthCalledWith(2, project, 3);
+    expect(component.peerMedianState).toBe('loading');
+    expectOnlyExistingSeries(component);
+
+    // This must have no effect because its subscription was cancelled.
+    firstRequest.next(makeResponse(project, 'ready', 2));
+
+    expect(component.peerMedianState).toBe('loading');
+    expectOnlyExistingSeries(component);
+
+    secondRequest.next(makeResponse(project, 'ready', 3));
+
+    expect(component.peerMedianState).toBe('ready');
+    expect(seriesNames(component)).toEqual([...EXISTING_SERIES, 'Peer median (demo)']);
+
+    component.ngOnDestroy();
+  });
+
+  it('refreshes both chart and peer data when a reused route receives a new project', () => {
+    const getCohortMedian = vi.fn((currentProject: Project) =>
+      of(makeResponse(currentProject, 'unavailable')),
+    );
+    const {component, project} = makeHarness(getCohortMedian);
+
+    initialise(component);
+
+    const nextProject = makeProject();
+    nextProject.id = 456;
+    component.project = nextProject;
+    component.unit = nextProject.unit;
+
+    component.ngOnChanges({
+      project: new SimpleChange(project, nextProject, false),
+      unit: new SimpleChange(project.unit, nextProject.unit, false),
+    });
+
+    expect(nextProject.refreshBurndownChartData).toHaveBeenCalledTimes(1);
+    expect(getCohortMedian).toHaveBeenLastCalledWith(nextProject, nextProject.targetGrade);
+  });
+
+  it('toggles one accessible legend series without hiding the peer series', () => {
+    const getCohortMedian = vi.fn();
+    const {component, project} = makeHarness(getCohortMedian);
+
+    getCohortMedian.mockReturnValue(of(makeResponse(project, 'ready')));
+    initialise(component);
+
+    component.onSelect('Target');
+
+    expect(component.isDataShown('Target')).toBe(false);
+    expect(component.isDataShown('Peer median (demo)')).toBe(true);
+    expect(seriesNames(component)).not.toContain('Target');
+    expect(component.temp.map((series) => series.name)).toContain('Target');
+
+    component.onSelect('Target');
+
+    expect(component.isDataShown('Target')).toBe(true);
+    expect(seriesNames(component)).toContain('Target');
+  });
+
+  it('does not mistake a genuine all-zero series for a hidden series', () => {
+    const getCohortMedian = vi.fn();
+    const {component, project} = makeHarness(getCohortMedian, false);
+
+    project.burndownChartData.push({
+      key: 'Zero progress',
+      values: [
+        [project.unit.startDate.getTime(), 0],
+        [project.unit.endDate.getTime(), 0],
+      ],
+    });
+
+    initialise(component);
+
+    expect(component.isDataShown('Zero progress')).toBe(true);
+    expect(seriesNames(component)).toContain('Zero progress');
+  });
+
+  it('hides axis titles on narrow screens', () => {
+    const {component} = makeHarness(vi.fn());
+    const originalWidth = window.innerWidth;
+
+    try {
+      Object.defineProperty(window, 'innerWidth', {
+        configurable: true,
+        value: 639,
+      });
+
+      component.onViewportResize();
+
+      expect(component.showXAxisLabel).toBe(false);
+      expect(component.showYAxisLabel).toBe(false);
+
+      Object.defineProperty(window, 'innerWidth', {
+        configurable: true,
+        value: 640,
+      });
+
+      component.onViewportResize();
+
+      expect(component.showXAxisLabel).toBe(true);
+      expect(component.showYAxisLabel).toBe(true);
+    } finally {
+      Object.defineProperty(window, 'innerWidth', {
+        configurable: true,
+        value: originalWidth,
+      });
+    }
+  });
+});
diff --git a/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.ts b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.ts
new file mode 100644
index 0000000000..d450315ada
--- /dev/null
+++ b/src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.ts
@@ -0,0 +1,379 @@
+import {Color, ScaleType} from '@swimlane/ngx-charts';
+import {formatDate} from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  ViewContainerRef,
+} from '@angular/core';
+import {Subscription} from 'rxjs';
+import {
+  PeerMedianPoint,
+  PeerProgressResponse,
+  PeerProgressService,
+  PeerProgressState,
+  Project,
+  Unit,
+} from 'src/app/api/models/doubtfire-model';
+import {ChartBaseComponent} from 'src/app/common/chart-base/chart-base-component/chart-base-component.component';
+import {DemoModeStore} from 'src/app/demo/demo-mode.store';
+
+interface BurndownPoint {
+  name: string;
+  value: number;
+}
+
+interface BurndownSeries {
+  name: string;
+  series: BurndownPoint[];
+}
+
+type PeerMedianState = 'loading' | 'error' | PeerProgressState;
+
+@Component({
+  selector: 'f-progress-burndown-chart',
+  templateUrl: './progress-burndown-chart.component.html',
+  styleUrls: ['./progress-burndown-chart.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class ProgressBurndownChartComponent
+  extends ChartBaseComponent
+  implements OnChanges, OnDestroy, OnInit
+{
+  @Input() project: Project;
+  @Input() unit: Unit;
+  @Input() grade: number;
+
+  data: BurndownSeries[] = [];
+  temp: BurndownSeries[] = [];
+
+  // Chart options
+  legend: boolean = false;
+  showLabels: boolean = true;
+  animations: boolean = true;
+  xAxis: boolean = true;
+  yAxis: boolean = true;
+  showYAxisLabel: boolean = true;
+  showXAxisLabel: boolean = true;
+  xAxisLabel: string = 'Time';
+  yAxisLabel: string = 'Tasks Remaining';
+  // ngx-charts hands the scheme domain to the series by position, so the full palette is
+  // kept here and the scheme is narrowed to whatever is on show.
+  private readonly seriesPalette: string[] = [
+    '#AAAAAA',
+    '#777777',
+    '#0079d8',
+    '#E01B5D',
+    '#7C3AED',
+  ];
+  colorScheme: Color = {
+    name: 'Burndown',
+    selectable: true,
+    group: ScaleType.Ordinal,
+    domain: [...this.seriesPalette],
+  };
+
+  yScaleMin: number = 0;
+  yScaleMax: number = 100;
+
+  /** Drives the privacy-safe status message below the chart. */
+  peerMedianState: PeerMedianState = 'disabled';
+
+  private seriesVisibility: Record<string, boolean> = {};
+  private peerMedian: PeerMedianPoint[] = [];
+  private activePeerMedianRequest?: Subscription;
+  private peerMedianRequestVersion: number = 0;
+  private initialised: boolean = false;
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+    private peerProgressService: PeerProgressService,
+    readonly demoMode: DemoModeStore,
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
+    super(viewContainerRef);
+    this.data = [];
+    this.temp = [];
+  }
+
+  ngOnInit(): void {
+    this.initialised = true;
+    this.updateResponsiveAxisLabels();
+
+    this.project.refreshBurndownChartData();
+    this.updateData();
+
+    this.data.forEach((item) => {
+      this.seriesVisibility[item.name] = true;
+    });
+
+    if (this.demoMode.enabled) {
+      this.loadPeerMedian();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const projectChanged =
+      !!changes.project &&
+      !changes.project.firstChange &&
+      changes.project.currentValue !== changes.project.previousValue;
+    const unitChanged =
+      !!changes.unit &&
+      !changes.unit.firstChange &&
+      changes.unit.currentValue !== changes.unit.previousValue;
+    const gradeChanged =
+      !!changes.grade &&
+      !changes.grade.firstChange &&
+      changes.grade.currentValue !== undefined &&
+      changes.grade.currentValue !== changes.grade.previousValue;
+
+    // Angular calls ngOnChanges before ngOnInit. Ignore that first call so the
+    // initial peer request is made exactly once from ngOnInit. Refresh for
+    // project and unit input changes as well as target-grade changes because
+    // Angular can reuse this component while switching between project routes.
+    if (!this.initialised || (!projectChanged && !unitChanged && !gradeChanged)) {
+      return;
+    }
+
+    this.project.refreshBurndownChartData();
+    this.updateData();
+
+    // The comparison cohort changes with the project, unit, or target grade.
+    if (this.demoMode.enabled) {
+      this.loadPeerMedian();
+    } else {
+      this.peerMedianState = 'disabled';
+      this.peerMedian = [];
+      this.updateData();
+    }
+  }
+
+  @HostListener('window:resize')
+  onViewportResize(): void {
+    this.updateResponsiveAxisLabels();
+  }
+
+  ngOnDestroy(): void {
+    this.peerMedianRequestVersion++;
+    this.activePeerMedianRequest?.unsubscribe();
+  }
+
+  private updateResponsiveAxisLabels(): void {
+    const viewportWidth = typeof window === 'undefined' ? 1024 : window.innerWidth;
+
+    const showAxisTitles = viewportWidth >= 640;
+
+    this.showYAxisLabel = showAxisTitles;
+    this.showXAxisLabel = showAxisTitles;
+  }
+
+  private loadPeerMedian(): void {
+    const requestVersion = ++this.peerMedianRequestVersion;
+    const requestedProjectId = this.project.id;
+    const requestedGrade = this.grade ?? this.project.targetGrade;
+
+    // Remove the old peer line immediately and cancel the previous request.
+    // This prevents an old grade result from overwriting the current grade.
+    this.activePeerMedianRequest?.unsubscribe();
+
+    this.peerMedianState = 'loading';
+    this.peerMedian = [];
+    this.updateData();
+
+    this.activePeerMedianRequest = this.peerProgressService
+      .getCohortMedian(this.project, requestedGrade)
+      .subscribe({
+        next: (response) => {
+          if (requestVersion !== this.peerMedianRequestVersion) {
+            return;
+          }
+
+          // Fail safely if an adapter returns data for a different project or
+          // grade than the one currently displayed.
+          if (
+            response.project_id !== requestedProjectId ||
+            response.target_grade !== requestedGrade
+          ) {
+            this.peerMedian = [];
+            this.peerMedianState = 'unavailable';
+            this.updateData();
+            return;
+          }
+
+          this.applyPeerMedianResponse(response);
+          this.updateData();
+        },
+
+        error: () => {
+          if (requestVersion !== this.peerMedianRequestVersion) {
+            return;
+          }
+
+          this.peerMedian = [];
+          this.peerMedianState = 'error';
+          this.updateData();
+        },
+      });
+  }
+
+  private applyPeerMedianResponse(response: PeerProgressResponse): void {
+    this.peerMedian = [];
+
+    switch (response.state) {
+      case 'ready':
+        if (response.median_burndown.length === 0) {
+          this.peerMedianState = 'unavailable';
+          return;
+        }
+
+        this.peerMedian = [...response.median_burndown];
+        this.peerMedianState = 'ready';
+        return;
+
+      case 'suppressed':
+      case 'unavailable':
+      case 'disabled':
+        this.peerMedianState = response.state;
+        return;
+    }
+  }
+
+  updateData(): void {
+    const chartData = this.project?.burndownChartData;
+    const locale = this.locale;
+    const startDate: Date = this.project.unit.startDate;
+    const endDate: Date = this.project.unit.endDate;
+
+    if (!chartData) {
+      this.temp = [];
+      this.data = [];
+      return;
+    }
+
+    // Preserve the existing OnTrack burndown series. New chart values are
+    // created instead of changing project.burndownChartData in place.
+    const formattedData: BurndownSeries[] = chartData.map((series) => ({
+      name: series.key,
+      series: series.values
+        .filter((value) => value[0] >= startDate.getTime() && value[0] <= endDate.getTime())
+        .map((value) => ({
+          name: formatDate(new Date(value[0]), 'd MMM', locale),
+          value: Math.round(Math.max(0, value[1]) * 100),
+        })),
+    }));
+
+    // Keep the existing workaround for the chart's y-axis bounds.
+    const target = formattedData.find((series) => series.name === 'Target');
+
+    if (target) {
+      const start = target.series.find(
+        (point) => point.name === formatDate(new Date(startDate), 'd MMM', locale),
+      );
+
+      const end = target.series.find(
+        (point) => point.name === formatDate(new Date(endDate), 'd MMM', locale),
+      );
+
+      if (start) {
+        start.value = 100;
+      }
+
+      if (end) {
+        end.value = 0;
+      }
+    }
+
+    // This label is intentionally explicit while the adapter uses mock data.
+    if (this.peerMedianState === 'ready' && this.peerMedian.length > 0) {
+      formattedData.push(
+        this.toSeries('Peer median (demo)', this.peerMedian, startDate, endDate, locale),
+      );
+    }
+
+    this.temp = JSON.parse(JSON.stringify(formattedData));
+    this.seriesVisibility = Object.fromEntries(
+      formattedData.map((series) => [series.name, this.seriesVisibility[series.name] !== false]),
+    );
+    this.applyVisibility();
+  }
+
+  private toSeries(
+    name: string,
+    points: PeerMedianPoint[],
+    startDate: Date,
+    endDate: Date,
+    locale: string,
+  ): BurndownSeries {
+    return {
+      name,
+      series: points
+        .filter((point) => {
+          const time = new Date(point.date).getTime();
+
+          return time >= startDate.getTime() && time <= endDate.getTime();
+        })
+        .map((point) => ({
+          name: formatDate(new Date(point.date), 'd MMM', locale),
+          value: Math.round(point.remaining * 100),
+        })),
+    };
+  }
+
+  onSelect(event: string | BurndownPoint): void {
+    if (!this.isLegend(event)) {
+      return;
+    }
+
+    this.toggleSeries(event);
+  }
+
+  toggleSeries(name: string): void {
+    if (!this.temp.some((series) => series.name === name)) {
+      return;
+    }
+
+    this.seriesVisibility[name] = !this.isDataShown(name);
+    this.applyVisibility();
+  }
+
+  // A hidden series is dropped from the chart data. Zeroing its points instead left the
+  // line drawn flat along the x axis while its legend button said it was off.
+  private applyVisibility(): void {
+    const shown = this.temp
+      .map((series, index) => ({series, index}))
+      .filter((entry) => this.isDataShown(entry.series.name));
+
+    this.data = shown.map((entry) => ({
+      name: entry.series.name,
+      series: entry.series.series.map((point) => ({...point})),
+    }));
+    this.colorScheme = {
+      ...this.colorScheme,
+      domain: shown.map((entry) => this.seriesColor(entry.index)),
+    };
+  }
+
+  isLegend(event: string | BurndownPoint): event is string {
+    return typeof event === 'string';
+  }
+
+  isDataShown(name: string): boolean {
+    return this.seriesVisibility[name] !== false;
+  }
+
+  seriesColor(index: number): string {
+    return this.seriesPalette[index % this.seriesPalette.length];
+  }
+
+  public formatPerc(input: number): string {
+    return `${input}%`;
+  }
+}
diff --git a/src/app/visualisations/student-task-status-pie-chart.coffee b/src/app/visualisations/student-task-status-pie-chart.coffee
deleted file mode 100644
index 12a8ce47ad..0000000000
--- a/src/app/visualisations/student-task-status-pie-chart.coffee
+++ /dev/null
@@ -1,41 +0,0 @@
-angular.module('doubtfire.visualisations.student-task-status-pie-chart', [])
-.directive 'studentTaskStatusPieChart', ->
-  replace: true
-  restrict: 'E'
-  templateUrl: 'visualisations/visualisation.tpl.html'
-  scope:
-    project: '='
-    updateData: '=?'
-  controller: ($scope, newTaskService, Visualisation) ->
-    colors = newTaskService.statusColors
-    $scope.data = []
-
-    $scope.updateData = ->
-      $scope.data.length = 0
-      newTaskService.statusLabels.forEach( (label, key) ->
-        count = $scope.project.tasksByStatus(key).length
-        $scope.data.push { key: label, y: count, statusKey: key }
-      )
-
-      if $scope.api
-        $scope.api.update()
-
-    $scope.$on 'TaskStatusUpdated', $scope.updateData
-
-    $scope.updateData()
-
-    [$scope.options, $scope.config] = Visualisation 'pieChart', 'Student Task Status Pie Chart', {
-      color: (d, i) ->
-        colors.get(d.statusKey)
-      x: (d) -> d.key
-      y: (d) -> d.y
-      showLabels: no
-      tooltip:
-        valueFormatter: (d) ->
-          fixed = d.toFixed()
-          pct   = Math.round((d / $scope.project.activeTasks().length) * 100)
-          task  = if fixed is "1" then "task" else "tasks"
-          "#{fixed} #{task} (#{pct}%)"
-        keyFormatter: (d) ->
-          d
-    }, {}
diff --git a/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.html b/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.html
new file mode 100644
index 0000000000..46aefcea58
--- /dev/null
+++ b/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.html
@@ -0,0 +1,13 @@
+<div class="chart-container pb-6">
+  <ngx-charts-pie-chart
+    class="task-status-pie-chart"
+    [customColors]="colors"
+    [legend]="true"
+    [legendPosition]="legendPosition"
+    [legendTitle]="''"
+    [results]="data"
+    [tooltipDisabled]="true"
+    [view]="undefined"
+  >
+  </ngx-charts-pie-chart>
+</div>
diff --git a/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.scss b/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.ts b/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.ts
new file mode 100644
index 0000000000..42948d4ae7
--- /dev/null
+++ b/src/app/visualisations/task-status-pie-chart/task-status-pie-chart.component.ts
@@ -0,0 +1,88 @@
+import {LegendPosition} from '@swimlane/ngx-charts';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {Project, TaskStatus, Unit} from 'src/app/api/models/doubtfire-model';
+import {ChartBaseComponent} from 'src/app/common/chart-base/chart-base-component/chart-base-component.component';
+
+@Component({
+  selector: 'f-task-status-pie-chart',
+  templateUrl: './task-status-pie-chart.component.html',
+  styleUrls: ['./task-status-pie-chart.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskStatusPieChartComponent extends ChartBaseComponent implements OnChanges, OnInit {
+  @Input() project: Project;
+  @Input() unit?: Unit;
+  @Input() grade: number;
+
+  data: {name: string; value: number}[] = [];
+  colors: {name: string; value: string}[];
+  view: number[] = [700, 400];
+  legendPosition: LegendPosition = LegendPosition.Below;
+
+  ngOnInit(): void {
+    this.updateData();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('grade' in changes && changes.grade.currentValue !== undefined) {
+      this.updateData();
+    }
+  }
+
+  updateData(): void {
+    if (this.project) {
+      const taskCounts = new Map(TaskStatus.STATUS_KEYS.map((status) => [status, 0]));
+      const activeTasks = this.project.activeTasks();
+      activeTasks.forEach((task) => {
+        if (task.status) {
+          taskCounts.set(task.status, (taskCounts.get(task.status) || 0) + 1);
+        }
+      });
+
+      const sortOrder = [
+        'not_started',
+        'feedback_exceeded',
+        'redo',
+        'need_help',
+        'working_on_it',
+        'fix_and_resubmit',
+        'ready_for_feedback',
+        'discuss',
+        'demonstrate',
+        'complete',
+        'fail',
+        'time_exceeded',
+      ];
+
+      this.data = Array.from(taskCounts)
+        .map(([status, count]) => {
+          return {
+            name: TaskStatus.STATUS_LABELS.get(status),
+            value: count,
+          };
+        })
+        .filter((task) => task.value > 0 || sortOrder.includes(task.name))
+        .sort((a, b) => {
+          let aIndex = sortOrder.indexOf(a.name);
+          let bIndex = sortOrder.indexOf(b.name);
+
+          aIndex = aIndex === -1 ? sortOrder.length : aIndex;
+          bIndex = bIndex === -1 ? sortOrder.length : bIndex;
+
+          return aIndex - bIndex;
+        });
+
+      this.colors = Array.from(TaskStatus.STATUS_COLORS).map(([status, color]) => {
+        return {name: TaskStatus.STATUS_LABELS.get(status), value: color};
+      });
+    }
+  }
+}
diff --git a/src/app/visualisations/task-visualisation/task-visualisation.component.html b/src/app/visualisations/task-visualisation/task-visualisation.component.html
new file mode 100644
index 0000000000..34665575a8
--- /dev/null
+++ b/src/app/visualisations/task-visualisation/task-visualisation.component.html
@@ -0,0 +1,14 @@
+<div aria-label="Task status summary" class="task-status-grid" role="list">
+  @for (status of data; track status.status) {
+    <div
+      class="task-status-card"
+      role="listitem"
+      [attr.aria-label]="status.name + ': ' + status.value"
+      [style.background-color]="status.color"
+      [style.color]="status.textColor"
+    >
+      <span class="task-status-value">{{ status.value }}</span>
+      <span class="task-status-label">{{ status.name }}</span>
+    </div>
+  }
+</div>
diff --git a/src/app/visualisations/task-visualisation/task-visualisation.component.scss b/src/app/visualisations/task-visualisation/task-visualisation.component.scss
new file mode 100644
index 0000000000..f9e62b8980
--- /dev/null
+++ b/src/app/visualisations/task-visualisation/task-visualisation.component.scss
@@ -0,0 +1,27 @@
+.task-status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: 1rem;
+}
+
+.task-status-card {
+  display: flex;
+  min-height: 10rem;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 0.25rem;
+  padding: 1.5rem;
+}
+
+.task-status-value {
+  font-size: clamp(2.5rem, 4vw, 4rem);
+  line-height: 1;
+}
+
+.task-status-label {
+  margin-top: 1.25rem;
+  overflow-wrap: anywhere;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.35;
+}
diff --git a/src/app/visualisations/task-visualisation/task-visualisation.component.spec.ts b/src/app/visualisations/task-visualisation/task-visualisation.component.spec.ts
new file mode 100644
index 0000000000..74e2f2430d
--- /dev/null
+++ b/src/app/visualisations/task-visualisation/task-visualisation.component.spec.ts
@@ -0,0 +1,83 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {SimpleChange} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Project} from 'src/app/api/models/doubtfire-model';
+import {TaskVisualisationComponent} from './task-visualisation.component';
+
+describe('TaskVisualisationComponent', () => {
+  let fixture: ComponentFixture<TaskVisualisationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TaskVisualisationComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TaskVisualisationComponent);
+    fixture.componentInstance.project = {
+      activeTasks: () => [{status: 'complete'}, {status: 'not_started'}],
+    } as unknown as Project;
+    fixture.detectChanges();
+  });
+
+  it('renders complete status labels without chart ellipsis or a false click affordance', () => {
+    const host = fixture.nativeElement as HTMLElement;
+    const cards = Array.from(host.querySelectorAll<HTMLElement>('[role="listitem"]'));
+    const awaitingFeedback = cards.find((card) => card.textContent.includes('Awaiting Feedback'));
+
+    expect(awaitingFeedback).toBeTruthy();
+    expect(awaitingFeedback?.textContent).not.toContain('...');
+    expect(awaitingFeedback?.getAttribute('aria-label')).toBe('Awaiting Feedback: 0');
+    expect(awaitingFeedback?.tagName).toBe('DIV');
+    expect(host.querySelector('ngx-charts-number-card')).toBeNull();
+    expect(host.querySelector('button')).toBeNull();
+  });
+
+  it('keeps every rendered status card above the 4.5:1 contrast floor', () => {
+    const host = fixture.nativeElement as HTMLElement;
+    const cards = Array.from(host.querySelectorAll<HTMLElement>('[role="listitem"]'));
+
+    const luminance = (color: string) => {
+      const [red, green, blue] = color
+        .replace(/[^\d,]/g, '')
+        .split(',')
+        .map((channel) => {
+          const value = Number(channel) / 255;
+          return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+        });
+      return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+    };
+    const contrast = (card: HTMLElement) => {
+      const text = luminance(card.style.color);
+      const background = luminance(card.style.backgroundColor);
+      return (Math.max(text, background) + 0.05) / (Math.min(text, background) + 0.05);
+    };
+
+    expect(cards.length).toBeGreaterThan(0);
+    expect(cards.filter((card) => contrast(card) < 4.5).map((card) => card.textContent)).toEqual(
+      [],
+    );
+  });
+});
+
+describe('TaskVisualisationComponent route reuse', () => {
+  it('updates counts for a different project at the same grade', () => {
+    const firstProject = {
+      id: 2,
+      activeTasks: () => [{status: 'complete'}],
+    } as unknown as Project;
+    const nextProject = {
+      id: 18,
+      activeTasks: () => [{status: 'ready_for_feedback'}],
+    } as unknown as Project;
+    const component = new TaskVisualisationComponent();
+    component.project = firstProject;
+    component.grade = 0;
+    component.ngOnInit();
+
+    component.project = nextProject;
+    component.ngOnChanges({project: new SimpleChange(firstProject, nextProject, false)});
+
+    expect(component.data.find(({name}) => name === 'Awaiting Feedback')?.value).toBe(1);
+    expect(component.data.find(({name}) => name === 'Complete')?.value).toBe(0);
+  });
+});
diff --git a/src/app/visualisations/task-visualisation/task-visualisation.component.ts b/src/app/visualisations/task-visualisation/task-visualisation.component.ts
new file mode 100644
index 0000000000..646792ce53
--- /dev/null
+++ b/src/app/visualisations/task-visualisation/task-visualisation.component.ts
@@ -0,0 +1,107 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {Project, TaskStatus, TaskStatusEnum} from 'src/app/api/models/doubtfire-model';
+
+interface TaskStatusSummary {
+  status: TaskStatusEnum;
+  name: string;
+  value: number;
+  color: string;
+  textColor: string;
+}
+
+@Component({
+  selector: 'f-task-visualisation',
+  templateUrl: './task-visualisation.component.html',
+  styleUrls: ['./task-visualisation.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class TaskVisualisationComponent implements OnChanges, OnInit {
+  @Input() project: Project;
+  @Input() grade: number;
+
+  data: TaskStatusSummary[] = [];
+
+  ngOnInit(): void {
+    this.updateData();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const projectChanged = 'project' in changes && !changes.project.firstChange;
+    const gradeChanged = 'grade' in changes && changes.grade.currentValue !== undefined;
+
+    if (projectChanged || gradeChanged) {
+      this.updateData();
+    }
+  }
+
+  updateData(): void {
+    if (this.project) {
+      const taskCounts = new Map(TaskStatus.STATUS_KEYS.map((status) => [status, 0]));
+      const activeTasks = this.project.activeTasks();
+      activeTasks.forEach((task) => {
+        if (task.status) {
+          taskCounts.set(task.status, (taskCounts.get(task.status) || 0) + 1);
+        }
+      });
+
+      const sortOrder: TaskStatusEnum[] = [
+        'complete',
+        'discuss',
+        'ready_for_feedback',
+        'working_on_it',
+        'not_started',
+      ];
+
+      this.data = Array.from(taskCounts)
+        .map(([status, count]) => {
+          const color = TaskStatus.STATUS_COLORS.get(status) ?? '#64748b';
+          return {
+            status,
+            name: TaskStatus.STATUS_LABELS.get(status) ?? status,
+            value: count,
+            color,
+            textColor: this.contrastingTextColor(color),
+          };
+        })
+        .filter((task) => task.value > 0 || sortOrder.includes(task.status))
+        .sort((a, b) => {
+          let aIndex = sortOrder.indexOf(a.status);
+          let bIndex = sortOrder.indexOf(b.status);
+
+          aIndex = aIndex === -1 ? sortOrder.length : aIndex;
+          bIndex = bIndex === -1 ? sortOrder.length : bIndex;
+
+          return aIndex - bIndex;
+        });
+    }
+  }
+
+  private contrastingTextColor(color: string): string {
+    const hex = color.replace('#', '');
+    if (!/^[0-9a-f]{6}$/i.test(hex)) {
+      return '#ffffff';
+    }
+
+    const channels = [0, 2, 4].map((index) => parseInt(hex.slice(index, index + 2), 16) / 255);
+    const [red, green, blue] = channels.map((channel) =>
+      channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4,
+    );
+    // #111827 was too light to be the dark option here. Against ready_for_feedback
+    // (#0079D8) it reached 3.99:1 and white only 4.44:1, so the card that always renders
+    // sat under the 4.5:1 AA floor for normal text. Black clears the floor on every
+    // status colour, and the divisor now matches the colour it is measuring.
+    const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+    const whiteContrast = 1.05 / (luminance + 0.05);
+    const darkContrast = (luminance + 0.05) / 0.05;
+
+    return whiteContrast >= darkContrast ? '#ffffff' : '#000000';
+  }
+}
diff --git a/src/app/visualisations/visualisations.coffee b/src/app/visualisations/visualisations.coffee
index f7882be92e..16808e4129 100644
--- a/src/app/visualisations/visualisations.coffee
+++ b/src/app/visualisations/visualisations.coffee
@@ -1,17 +1,14 @@
+# Component is no longer used and is unlinked from the app
+# This file is left for reference, as these need to be migrated to be used in the Unit Analytics section
+
 angular.module('doubtfire.visualisations', [
   'doubtfire.visualisations.summary-task-status-scatter'
-  'doubtfire.visualisations.progress-burndown-chart'
-  'doubtfire.visualisations.alignment-bar-chart'
-  'doubtfire.visualisations.alignment-bullet-chart'
-  'doubtfire.visualisations.student-task-status-pie-chart'
   'doubtfire.visualisations.task-status-pie-chart'
   'doubtfire.visualisations.target-grade-pie-chart'
   'doubtfire.visualisations.task-completion-box-plot'
-  'doubtfire.visualisations.achievement-box-plot'
-  'doubtfire.visualisations.achievement-custom-bar-chart'
 ])
 
-.factory('Visualisation', ($interval, analyticsService) ->
+.factory('Visualisation', ($interval) ->
   Visualisation = (type, visualisationName, opts, conf, titleOpts, subtitleOpts) ->
     DEFAULT_OPTS =
       objectequality: yes
@@ -54,9 +51,6 @@ angular.module('doubtfire.visualisations', [
 
     dirtyConf = angular.extend {}, DEFAULT_CONF, conf
 
-    # Google tracking
-    analyticsService.event 'Visualisations', 'Created Visualisation', visualisationName
-
     [ { chart: dirtyOpts, title: titleOpts, subtitle: subtitleOpts },  dirtyConf ]
 
 
diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html
index 26780c3d47..40bc7d8228 100644
--- a/src/app/welcome/welcome.component.html
+++ b/src/app/welcome/welcome.component.html
@@ -1,17 +1,19 @@
-<section class="welcome" fxFlex fxLayout="row">
-  <f-hero-sidebar fxHide.lt-md fxFlexAlign="start"></f-hero-sidebar>
-  <!-- <section class="content" fxFlex.gt-sm  > -->
-  <section class="content" fxFlex.gt-sm fxLayout.gt-sm="column" [ngClass.gt-sm]="'large'">
-    <div class="container">
+<section class="welcome flex h-screen flex-row">
+  <f-hero-sidebar class="self-start max-[959.98px]:hidden"></f-hero-sidebar>
+  <!-- <section class="content" fxFlex.gt-sm > -->
+  <section class="content flex flex-col min-[960px]:flex-1 min-[960px]:overflow-auto">
+    <div class="m-auto w-full max-w-md p-4">
       <div class="subcontainer">
-        <div class="wordmark" fxLayout="row" fxLayoutAlign="start center" fxHide.gt-sm fxFlexAlign="start">
-          <img src="../../../assets/images/logo-bw.svg" width="40px" alt="Homepage Logo" />
+        <div class="wordmark flex-row items-center justify-start self-start">
+          <img alt="Homepage Logo" src="../../../assets/images/logo-bw.svg" width="40px" />
           <p>{{ externalName.value }}</p>
         </div>
-        <h1 class="welcome-heading" fxFlexAlign="start">Welcome to {{ externalName.value }}</h1>
-        <f-edit-profile-form mode="create"></f-edit-profile-form>
+        <h1 class="welcome-heading self-start">Welcome to {{ externalName.value }}</h1>
+        @if (!loading) {
+          <f-edit-profile-form mode="create"></f-edit-profile-form>
+        }
       </div>
     </div>
   </section>
   <!-- </section> -->
-</section>
\ No newline at end of file
+</section>
diff --git a/src/app/welcome/welcome.component.scss b/src/app/welcome/welcome.component.scss
index 605000967d..a8d6875022 100644
--- a/src/app/welcome/welcome.component.scss
+++ b/src/app/welcome/welcome.component.scss
@@ -1 +1 @@
-@import '../../styles/common/hero-sidebar-layout.scss';
+@use 'styles/common/hero-sidebar-layout' as *;
diff --git a/src/app/welcome/welcome.component.spec.ts b/src/app/welcome/welcome.component.spec.ts
index 59c1c8d8ef..4725c4d866 100644
--- a/src/app/welcome/welcome.component.spec.ts
+++ b/src/app/welcome/welcome.component.spec.ts
@@ -1,13 +1,58 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { WelcomeComponent } from './welcome.component';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+import {WelcomeComponent} from './welcome.component';
 
 describe('WelcomeComponent', () => {
   let component: WelcomeComponent;
   let fixture: ComponentFixture<WelcomeComponent>;
+  let afterAuthCallback: ((result: boolean) => void) | undefined;
+  let routerStub: {navigateByUrl: ReturnType<typeof vi.fn>};
+  let globalStateStub: {hideHeader: ReturnType<typeof vi.fn>};
+  let userServiceStub: {currentUser: {hasRunFirstTimeSetup: boolean}};
 
   beforeEach(async () => {
+    afterAuthCallback = undefined;
+    routerStub = {
+      navigateByUrl: vi.fn(),
+    };
+    globalStateStub = {
+      hideHeader: vi.fn(),
+    };
+    userServiceStub = {
+      currentUser: {
+        hasRunFirstTimeSetup: false,
+      },
+    };
+
     await TestBed.configureTestingModule({
       declarations: [WelcomeComponent],
+      providers: [
+        {
+          provide: DoubtfireConstants,
+          useValue: {
+            ExternalName: new BehaviorSubject<string>('OnTrack'),
+          },
+        },
+        {provide: GlobalStateService, useValue: globalStateStub},
+        {
+          provide: AuthenticationService,
+          useValue: {
+            afterAuthCall: vi.fn((callback: (result: boolean) => void) => {
+              afterAuthCallback = callback;
+            }),
+          },
+        },
+        {provide: Router, useValue: routerStub},
+        {provide: UserService, useValue: userServiceStub},
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   });
 
@@ -20,4 +65,22 @@ describe('WelcomeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should hide the header while the welcome page is active', () => {
+    expect(globalStateStub.hideHeader).toHaveBeenCalled();
+  });
+
+  it('should redirect unauthenticated users to sign in', () => {
+    expect(afterAuthCallback).toBeDefined();
+
+    afterAuthCallback?.(false);
+
+    expect(routerStub.navigateByUrl).toHaveBeenCalledWith('/sign_in');
+  });
+
+  it('should show the expected welcome heading', () => {
+    const element: HTMLElement = fixture.nativeElement;
+
+    expect(element.textContent).toContain('Welcome to OnTrack');
+  });
 });
diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts
index f6aaafb270..afa619b690 100644
--- a/src/app/welcome/welcome.component.ts
+++ b/src/app/welcome/welcome.component.ts
@@ -1,14 +1,43 @@
-import { Component, OnInit } from '@angular/core';
-import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
+import {UserService} from '../api/services/user.service';
+import {GlobalStateService} from '../projects/states/index/global-state.service';
 
 @Component({
   selector: 'f-welcome',
   templateUrl: './welcome.component.html',
   styleUrls: ['./welcome.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class WelcomeComponent implements OnInit {
-  constructor(private constants: DoubtfireConstants) {}
-  ngOnInit(): void {}
+  public loading = true;
+
+  constructor(
+    private constants: DoubtfireConstants,
+    private globalState: GlobalStateService,
+    private authenticationService: AuthenticationService,
+    private router: Router,
+    private userService: UserService,
+  ) {}
 
   public externalName = this.constants.ExternalName;
+
+  ngOnInit(): void {
+    this.globalState.hideHeader();
+
+    this.authenticationService.afterAuthCall((result) => {
+      if (!result) {
+        return this.router.navigateByUrl('/sign_in');
+      }
+
+      if (this.userService.currentUser.hasRunFirstTimeSetup) {
+        return this.router.navigateByUrl('/home');
+      }
+
+      this.loading = false;
+    });
+  }
 }
diff --git a/src/assets/icons/android-chrome-maskable-512x512.png b/src/assets/icons/android-chrome-maskable-512x512.png
new file mode 100644
index 0000000000..ca17d722a5
Binary files /dev/null and b/src/assets/icons/android-chrome-maskable-512x512.png differ
diff --git a/src/assets/images/formatif-isolated-lottie.json b/src/assets/images/formatif-isolated-lottie.json
index f934cfb0a7..9b32225328 100644
--- a/src/assets/images/formatif-isolated-lottie.json
+++ b/src/assets/images/formatif-isolated-lottie.json
@@ -1 +1,3019 @@
-{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.4.3","a":"","k":"","d":"","tc":""},"fr":24,"ip":0,"op":92,"w":3840,"h":2160,"nm":"icon - isolated","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"NULL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1920,1080,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":33,"s":[100,100,100]},{"t":59,"s":[165,165,100]}],"ix":6}},"ao":0,"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":3,"nm":"main position","parent":1,"sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.2,"y":1},"o":{"x":0.167,"y":0.167},"t":36,"s":[50,50,0],"to":[0,0,0],"ti":[0,0,0]},{"t":54,"s":[464,50,0]}],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"scale","parent":2,"sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":23,"s":[200,200,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":35,"s":[118,118,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":38,"s":[90,90,100]},{"t":49,"s":[100,100,100]}],"ix":6}},"ao":0,"ip":23,"op":240,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":3,"nm":"arrow position","parent":3,"sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.107,"y":1},"o":{"x":0.533,"y":0},"t":23,"s":[50,-8,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.19,"y":0.642},"o":{"x":0.333,"y":0},"t":35,"s":[119.897,36,0],"to":[0,0,0],"ti":[392.376,75.374,0]},{"i":{"x":0.833,"y":0.874},"o":{"x":1,"y":0.713},"t":38,"s":[-307.61,-289.928,0],"to":[-832.969,-114.56,0],"ti":[20.667,921.704,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.115,"y":1},"t":49,"s":[-374,-134,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.538,"y":1},"o":{"x":1,"y":0},"t":53,"s":[-374,-175,0],"to":[0,0,0],"ti":[1.605,-28.883,0]},{"i":{"x":0.538,"y":1},"o":{"x":0.167,"y":0},"t":59,"s":[-374,37,0],"to":[0,0,0],"ti":[1.605,-28.883,0]},{"t":65,"s":[-374,-8,0]}],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":23,"op":243,"st":3,"bm":0},{"ddd":0,"ind":5,"ty":3,"nm":"rotation","parent":4,"sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.303],"y":[0]},"t":23,"s":[-45]},{"i":{"x":[0.773],"y":[0.886]},"o":{"x":[0.333],"y":[0]},"t":35,"s":[-45]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.06]},"t":38,"s":[-71]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.089]},"t":42,"s":[-118.941]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.087]},"t":45,"s":[-186.591]},{"t":49,"s":[-360]}],"ix":10},"p":{"a":0,"k":[18.883,127.949,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":23,"op":243,"st":3,"bm":0},{"ddd":0,"ind":6,"ty":3,"nm":"rough edges","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1920,1080,0],"ix":2},"a":{"a":0,"k":[1920,1080,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"Roughen Edges","np":17,"mn":"ADBE Roughen Edges","ix":1,"en":1,"ef":[{"ty":7,"nm":"Edge Type","mn":"ADBE Roughen Edges-0001","ix":1,"v":{"a":0,"k":1,"ix":1}},{"ty":2,"nm":"Edge Color","mn":"ADBE Roughen Edges-0010","ix":2,"v":{"a":0,"k":[0.6,0.2,0,1],"ix":2}},{"ty":0,"nm":"Border","mn":"ADBE Roughen Edges-0002","ix":3,"v":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":12,"s":[17.4]},{"t":19,"s":[2.7]}],"ix":3}},{"ty":0,"nm":"Edge Sharpness","mn":"ADBE Roughen Edges-0003","ix":4,"v":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":12,"s":[1]},{"t":19,"s":[0.1]}],"ix":4}},{"ty":0,"nm":"Fractal Influence","mn":"ADBE Roughen Edges-0004","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":0,"nm":"Scale","mn":"ADBE Roughen Edges-0005","ix":6,"v":{"a":0,"k":1000,"ix":6}},{"ty":0,"nm":"Stretch Width or Height","mn":"ADBE Roughen Edges-0006","ix":7,"v":{"a":0,"k":0,"ix":7}},{"ty":3,"nm":"Offset (Turbulence)","mn":"ADBE Roughen Edges-0007","ix":8,"v":{"a":0,"k":[0,0],"ix":8}},{"ty":0,"nm":"Complexity","mn":"ADBE Roughen Edges-0008","ix":9,"v":{"a":0,"k":2,"ix":9}},{"ty":0,"nm":"Evolution","mn":"ADBE Roughen Edges-0009","ix":10,"v":{"a":0,"k":0,"ix":10}},{"ty":6,"nm":"Evolution Options","mn":"ADBE Roughen Edges-0011","ix":11,"v":0},{"ty":7,"nm":"Cycle Evolution","mn":"ADBE Roughen Edges-0012","ix":12,"v":{"a":0,"k":0,"ix":12}},{"ty":0,"nm":"Cycle (in Revolutions)","mn":"ADBE Roughen Edges-0013","ix":13,"v":{"a":0,"k":1,"ix":13}},{"ty":0,"nm":"Random Seed","mn":"ADBE Roughen Edges-0014","ix":14,"v":{"a":0,"k":0,"ix":14}},{"ty":6,"nm":"Random Seed","mn":"ADBE Roughen Edges-0015","ix":15,"v":0}]}],"ip":0,"op":19,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":3,"nm":"echo","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1920,1080,0],"ix":2},"a":{"a":0,"k":[1920,1080,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"Echo","np":7,"mn":"ADBE Echo","ix":1,"en":1,"ef":[{"ty":0,"nm":"Echo Time (seconds)","mn":"ADBE Echo-0001","ix":1,"v":{"a":0,"k":-0.001,"ix":1}},{"ty":0,"nm":"Number Of Echoes","mn":"ADBE Echo-0002","ix":2,"v":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":31,"s":[10]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":34,"s":[67]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":49,"s":[67]},{"t":53,"s":[10]}],"ix":2}},{"ty":0,"nm":"Starting Intensity","mn":"ADBE Echo-0003","ix":3,"v":{"a":0,"k":1,"ix":3}},{"ty":0,"nm":"Decay","mn":"ADBE Echo-0004","ix":4,"v":{"a":0,"k":1,"ix":4}},{"ty":7,"nm":"Echo Operator","mn":"ADBE Echo-0005","ix":5,"v":{"a":0,"k":5,"ix":5}}]}],"ip":31,"op":53,"st":3,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"top 2","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[73.565,-23.785,0],"ix":2},"a":{"a":0,"k":[1488.448,1026.164,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"ShapeNir Slider","np":3,"mn":"ADBE Slider Control","ix":1,"en":1,"ef":[{"ty":0,"nm":"Slider","mn":"ADBE Slider Control-0001","ix":1,"v":{"a":0,"k":100,"ix":1}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.167,"y":0},"t":58,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[0,0],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[0,0],[0,0]],"v":[[-61.716,-44.574],[-57.525,-48.766],[-21.582,-61.577],[-24.345,-64.482],[-24.342,-31.648],[-24.342,-31.648],[-24.342,-31.648],[-57.186,-31.645],[-65.907,-40.383],[-61.716,-44.574]],"c":false}]},{"t":64,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[0,0],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[0,0],[0,0]],"v":[[-74.672,-57.386],[-70.481,-61.577],[-21.582,-61.577],[72.063,32.066],[72.066,64.9],[72.066,64.9],[72.066,64.9],[39.223,64.903],[-78.863,-53.195],[-74.672,-57.386]],"c":false}]}],"ix":2},"nm":"Tracciato 1_forAnimation","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.211764708161,0.568627476692,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1542.448,1082.164],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Gruppo 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 100;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 98.6485408913042;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"e":{"a":0,"k":100,"ix":2,"x":"var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 0;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 1.35145910869578;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.167,"y":0},"t":58,"s":[{"i":[[0,0],[5.418,5.419],[17.468,17.469],[25.537,-25.537]],"o":[[-3.662,6.731],[0,0],[-25.536,-25.537],[0,0]],"v":[[1518.105,1050.515],[1501.682,1034.099],[1545.158,1077.713],[1480.731,1037.589]],"c":false}]},{"t":64,"s":[{"i":[[0,0],[5.418,5.419],[17.468,17.469],[25.537,-25.537]],"o":[[-3.662,6.731],[0,0],[-25.536,-25.537],[0,0]],"v":[[1614.514,1147.064],[1598.091,1130.648],[1545.158,1077.713],[1467.776,1024.778]],"c":false}]}],"ix":2},"nm":"Tracciato 1_Bone","mn":"ADBE Vector Shape - Group","hd":false}],"ip":53,"op":126,"st":6,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"top_extra","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":29,"s":[1502.093,1035.094,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":34,"s":[1495.062,1036.428,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":51,"s":[1495.062,1036.428,0],"to":[0,0,0],"ti":[0,0,0]},{"t":53,"s":[1502.312,1036.428,0]}],"ix":2},"a":{"a":0,"k":[-98.5,-102,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":29,"s":[46.5,46.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":32,"s":[50,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":49,"s":[50,50,100]},{"t":53,"s":[45.2,45.2,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[94,94],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Tracciato ellisse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.211761474609,0.568603515625,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-98.5,-102],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellisse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":29,"op":53,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"top","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[73.565,-23.785,0],"ix":2},"a":{"a":0,"k":[1488.448,1026.164,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"ShapeNir Slider","np":3,"mn":"ADBE Slider Control","ix":1,"en":1,"ef":[{"ty":0,"nm":"Slider","mn":"ADBE Slider Control-0001","ix":1,"v":{"a":1,"k":[{"i":{"x":[0.17],"y":[1]},"o":{"x":[0.55],"y":[0]},"t":6,"s":[0]},{"t":23,"s":[100]}],"ix":1}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.55,"y":0},"t":6,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[0,0],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[0,0],[0,0]],"v":[[-74.672,-57.386],[-70.481,-61.577],[-21.582,-61.577],[194.283,154.505],[194.286,187.34],[194.286,187.34],[194.286,187.34],[161.442,187.343],[-78.863,-53.195],[-74.672,-57.386]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.55,"y":0},"t":23,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[0,0],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[0,0],[0,0]],"v":[[-74.672,-57.386],[-70.481,-61.577],[-21.582,-61.577],[72.063,32.066],[72.066,64.9],[72.066,64.9],[72.066,64.9],[39.223,64.903],[-78.863,-53.195],[-74.672,-57.386]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"t":26,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[2.122,2.171],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[-2.122,-2.171],[0,0]],"v":[[-70.801,-53.558],[-66.61,-57.749],[-21.582,-61.577],[43.259,3.22],[43.262,36.055],[43.262,36.055],[43.262,36.055],[10.419,36.058],[-66.621,-43.95],[-70.801,-53.558]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":29,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[0,0],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[0,0],[0,0]],"v":[[-61.716,-44.574],[-57.525,-48.766],[-21.582,-61.577],[-24.345,-64.482],[-24.342,-31.648],[-24.342,-31.648],[-24.342,-31.648],[-57.186,-31.645],[-65.907,-40.383],[-61.716,-44.574]],"c":false}]},{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":53,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[0,0],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[0,0],[0,0]],"v":[[-61.716,-44.574],[-57.525,-48.766],[-21.582,-61.577],[-24.345,-64.482],[-24.342,-31.648],[-24.342,-31.648],[-24.342,-31.648],[-57.186,-31.645],[-65.907,-40.383],[-61.716,-44.574]],"c":false}]},{"t":59,"s":[{"i":[[0,0],[0,0],[-13.503,-13.506],[0,0],[9.065,-9.068],[0,0],[0,0],[9.068,9.071],[0,0],[0,0]],"o":[[0,0],[13.506,-13.506],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.074],[0,0],[0,0],[0,0]],"v":[[-74.672,-57.386],[-70.481,-61.577],[-21.582,-61.577],[72.063,32.066],[72.066,64.9],[72.066,64.9],[72.066,64.9],[39.223,64.903],[-78.863,-53.195],[-74.672,-57.386]],"c":false}]}],"ix":2},"nm":"Tracciato 1_forAnimation","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.211764708161,0.568627476692,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1542.448,1082.164],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Gruppo 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 100;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 98.6485408913042;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"e":{"a":0,"k":100,"ix":2,"x":"var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 0;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 1.35145910869578;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.55,"y":0},"t":6,"s":[{"i":[[0,0],[5.418,5.419],[17.468,17.469],[25.537,-25.537]],"o":[[-3.662,6.731],[0,0],[-25.536,-25.537],[0,0]],"v":[[1736.734,1269.504],[1720.31,1253.088],[1545.158,1077.713],[1467.776,1024.778]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.55,"y":0},"t":23,"s":[{"i":[[0,0],[5.418,5.419],[17.468,17.469],[25.537,-25.537]],"o":[[-3.662,6.731],[0,0],[-25.536,-25.537],[0,0]],"v":[[1614.514,1147.064],[1598.091,1130.648],[1545.158,1077.713],[1467.776,1024.778]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":29,"s":[{"i":[[0,0],[5.418,5.419],[17.468,17.469],[25.537,-25.537]],"o":[[-3.662,6.731],[0,0],[-25.536,-25.537],[0,0]],"v":[[1518.105,1050.515],[1501.682,1034.099],[1545.158,1077.713],[1480.731,1037.589]],"c":false}]},{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":53,"s":[{"i":[[0,0],[5.418,5.419],[17.468,17.469],[25.537,-25.537]],"o":[[-3.662,6.731],[0,0],[-25.536,-25.537],[0,0]],"v":[[1518.105,1050.515],[1501.682,1034.099],[1545.158,1077.713],[1480.731,1037.589]],"c":false}]},{"t":59,"s":[{"i":[[0,0],[5.418,5.419],[17.468,17.469],[25.537,-25.537]],"o":[[-3.662,6.731],[0,0],[-25.536,-25.537],[0,0]],"v":[[1614.514,1147.064],[1598.091,1130.648],[1545.158,1077.713],[1467.776,1024.778]],"c":false}]}],"ix":2},"nm":"Tracciato 1_Bone","mn":"ADBE Vector Shape - Group","hd":false}],"ip":6,"op":29,"st":6,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"mid 2","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[15,16,0],"ix":2},"a":{"a":0,"k":[1429.883,1065.949,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"ShapeNir Slider","np":3,"mn":"ADBE Slider Control","ix":1,"en":1,"ef":[{"ty":0,"nm":"Slider","mn":"ADBE Slider Control-0001","ix":1,"v":{"a":0,"k":100,"ix":1}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":55.5,"s":[{"i":[[0,0],[0,0],[0,0],[6.673,-6.673],[0,0],[0,0],[6.673,6.673],[0,0],[0,0]],"o":[[0,0],[0,0],[6.671,6.673],[0,0],[0,0],[-6.673,6.671],[0,0],[0,0],[0,0]],"v":[[-30.953,-29.75],[-18.872,-41.83],[-9.362,-32.208],[-9.362,-8.045],[-9.362,-8.045],[-9.362,-8.045],[-33.522,-8.045],[-43.033,-17.67],[-30.953,-29.75]],"c":false}]},{"t":61.5,"s":[{"i":[[0,0],[0,0],[0,0],[9.068,-9.068],[0,0],[0,0],[9.068,9.068],[0,0],[0,0]],"o":[[0,0],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.065],[0,0],[0,0],[0,0]],"v":[[-36.143,-36.135],[-19.727,-52.551],[45.759,12.917],[45.759,45.751],[45.759,45.751],[45.759,45.751],[12.927,45.751],[-52.559,-19.719],[-36.143,-36.135]],"c":false}]}],"ix":2},"nm":"Tracciato 1_forAnimation","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.223529413342,0.223529413342,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1464.883,1099.949],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Gruppo 2","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 100;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 92.3777446239903;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"e":{"a":0,"k":100,"ix":2,"x":"var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 0;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 7.62225537600966;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":55.5,"s":[{"i":[[0,0],[11.939,11.936],[0,0]],"o":[[-0.527,-16.874],[-7.951,-7.949],[0,0]],"v":[[1455.522,1091.904],[1458.026,1094.288],[1433.931,1070.199]],"c":false}]},{"t":61.5,"s":[{"i":[[0,0],[16.224,16.22],[0,0]],"o":[[-0.717,-22.93],[-10.805,-10.802],[0,0]],"v":[[1510.642,1145.701],[1461.483,1096.548],[1428.74,1063.814]],"c":false}]}],"ix":2},"nm":"Tracciato 1_Bone","mn":"ADBE Vector Shape - Group","hd":false}],"ip":53,"op":126,"st":3,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"mid_extra","parent":13,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":29,"s":[1442.756,1079.784,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":34,"s":[1450.145,1086.357,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":51,"s":[1450.145,1086.357,0],"to":[0,0,0],"ti":[0,0,0]},{"t":53,"s":[1443.895,1080.232,0]}],"ix":2},"a":{"a":0,"k":[-120,40,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":29,"s":[37.2,37.2,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":34,"s":[50,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":49,"s":[50,50,100]},{"t":53,"s":[35.7,35.7,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[93,93],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Tracciato ellisse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.223510742188,0.223510742188,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-120,40],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellisse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":29,"op":53,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"mid","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[15,16,0],"ix":2},"a":{"a":0,"k":[1429.883,1065.949,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"ShapeNir Slider","np":3,"mn":"ADBE Slider Control","ix":1,"en":1,"ef":[{"ty":0,"nm":"Slider","mn":"ADBE Slider Control-0001","ix":1,"v":{"a":1,"k":[{"i":{"x":[0.17],"y":[1]},"o":{"x":[0.55],"y":[0]},"t":3,"s":[0]},{"t":23,"s":[100]}],"ix":1}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.55,"y":0},"t":3,"s":[{"i":[[0,0],[0,0],[0,0],[9.068,-9.068],[0,0],[0,0],[9.068,9.068],[0,0],[0,0]],"o":[[0,0],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.065],[0,0],[0,0],[0,0]],"v":[[-36.143,-36.135],[-19.727,-52.551],[119.506,86.956],[119.506,119.79],[119.506,119.79],[119.506,119.79],[86.674,119.79],[-52.559,-19.719],[-36.143,-36.135]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.55,"y":0},"t":23,"s":[{"i":[[0,0],[0,0],[0,0],[9.068,-9.068],[0,0],[0,0],[9.068,9.068],[0,0],[0,0]],"o":[[0,0],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.065],[0,0],[0,0],[0,0]],"v":[[-36.143,-36.135],[-19.727,-52.551],[45.759,12.917],[45.759,45.751],[45.759,45.751],[45.759,45.751],[12.927,45.751],[-52.559,-19.719],[-36.143,-36.135]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":29,"s":[{"i":[[0,0],[0,0],[0,0],[6.673,-6.673],[0,0],[0,0],[6.673,6.673],[0,0],[0,0]],"o":[[0,0],[0,0],[6.671,6.673],[0,0],[0,0],[-6.673,6.671],[0,0],[0,0],[0,0]],"v":[[-30.953,-29.75],[-18.872,-41.83],[-9.362,-32.208],[-9.362,-8.045],[-9.362,-8.045],[-9.362,-8.045],[-33.522,-8.045],[-43.033,-17.67],[-30.953,-29.75]],"c":false}]},{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":53,"s":[{"i":[[0,0],[0,0],[0,0],[6.673,-6.673],[0,0],[0,0],[6.673,6.673],[0,0],[0,0]],"o":[[0,0],[0,0],[6.671,6.673],[0,0],[0,0],[-6.673,6.671],[0,0],[0,0],[0,0]],"v":[[-30.953,-29.75],[-18.872,-41.83],[-9.362,-32.208],[-9.362,-8.045],[-9.362,-8.045],[-9.362,-8.045],[-33.522,-8.045],[-43.033,-17.67],[-30.953,-29.75]],"c":false}]},{"t":59,"s":[{"i":[[0,0],[0,0],[0,0],[9.068,-9.068],[0,0],[0,0],[9.068,9.068],[0,0],[0,0]],"o":[[0,0],[0,0],[9.065,9.068],[0,0],[0,0],[-9.068,9.065],[0,0],[0,0],[0,0]],"v":[[-36.143,-36.135],[-19.727,-52.551],[45.759,12.917],[45.759,45.751],[45.759,45.751],[45.759,45.751],[12.927,45.751],[-52.559,-19.719],[-36.143,-36.135]],"c":false}]}],"ix":2},"nm":"Tracciato 1_forAnimation","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.223529413342,0.223529413342,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1464.883,1099.949],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Gruppo 2","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 100;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 92.3777446239903;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"e":{"a":0,"k":100,"ix":2,"x":"var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 0;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 7.62225537600966;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.55,"y":0},"t":3,"s":[{"i":[[0,0],[16.224,16.22],[0,0]],"o":[[-0.717,-22.93],[-10.805,-10.802],[0,0]],"v":[[1584.389,1219.739],[1461.483,1096.548],[1428.74,1063.814]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.55,"y":0},"t":23,"s":[{"i":[[0,0],[16.224,16.22],[0,0]],"o":[[-0.717,-22.93],[-10.805,-10.802],[0,0]],"v":[[1510.642,1145.701],[1461.483,1096.548],[1428.74,1063.814]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":29,"s":[{"i":[[0,0],[11.939,11.936],[0,0]],"o":[[-0.527,-16.874],[-7.951,-7.949],[0,0]],"v":[[1455.522,1091.904],[1458.026,1094.288],[1433.931,1070.199]],"c":false}]},{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":53,"s":[{"i":[[0,0],[11.939,11.936],[0,0]],"o":[[-0.527,-16.874],[-7.951,-7.949],[0,0]],"v":[[1455.522,1091.904],[1458.026,1094.288],[1433.931,1070.199]],"c":false}]},{"t":59,"s":[{"i":[[0,0],[16.224,16.22],[0,0]],"o":[[-0.717,-22.93],[-10.805,-10.802],[0,0]],"v":[[1510.642,1145.701],[1461.483,1096.548],[1428.74,1063.814]],"c":false}]}],"ix":2},"nm":"Tracciato 1_Bone","mn":"ADBE Vector Shape - Group","hd":false}],"ip":3,"op":29,"st":3,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"bottom 2","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-2.559,65.635,0],"ix":2},"a":{"a":0,"k":[1412.324,1115.584,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"ShapeNir Slider","np":3,"mn":"ADBE Slider Control","ix":1,"en":1,"ef":[{"ty":0,"nm":"Slider","mn":"ADBE Slider Control-0001","ix":1,"v":{"a":0,"k":100,"ix":1}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":53,"s":[{"i":[[0,0],[0,0],[0,0],[6.334,6.334],[-6.333,6.334],[0,0],[0,0]],"o":[[0,0],[0,0],[-6.334,6.333],[-6.334,-6.334],[0,0],[0,0],[0,0]],"v":[[6.738,-2.735],[18.731,9.258],[7.38,20.609],[-16.081,20.083],[-16.606,-3.378],[-5.255,-14.728],[6.738,-2.735]],"c":false}]},{"t":59,"s":[{"i":[[0,0],[0,0],[0,0],[9.068,9.068],[-9.068,9.068],[0,0],[0,0]],"o":[[0,0],[0,0],[-9.068,9.068],[-9.068,-9.068],[0,0],[0,0],[0,0]],"v":[[11.444,-11.445],[28.615,5.726],[12.364,21.977],[-21.225,21.225],[-21.977,-12.364],[-5.726,-28.615],[11.444,-11.445]],"c":false}]}],"ix":2},"nm":"Tracciato 1_forAnimation","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.337254911661,0.223529413342,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1399.865,1127.029],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Gruppo 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 100;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 85.6245824308121;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        0.31314999326651,\n        0.62416910908086,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"e":{"a":0,"k":100,"ix":2,"x":"var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 0;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 14.3754175691879;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        0.31314966173997,\n        0.62416844828369,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0},"t":53,"s":[{"i":[[0,0],[-1.108,1.108],[-2.676,2.676],[-1.873,1.873],[0,0]],"o":[[0,0],[2.676,-2.676],[0,0],[1.873,-1.873],[0,0]],"v":[[1383.785,1147.112],[1387.144,1143.753],[1395.253,1135.644],[1400.928,1129.969],[1406.603,1124.294]],"c":false}]},{"t":59,"s":[{"i":[[0,0],[-1.587,1.587],[-3.831,3.831],[-2.681,2.681],[0,0]],"o":[[0,0],[3.831,-3.831],[0,0],[2.681,-2.681],[0,0]],"v":[[1378.641,1148.253],[1383.45,1143.444],[1395.059,1131.835],[1403.185,1123.709],[1411.31,1115.584]],"c":false}]}],"ix":2},"nm":"Tracciato 1_Bone","mn":"ADBE Vector Shape - Group","hd":false}],"ip":53,"op":126,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"bottom_extra","parent":16,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":29,"s":[1395.693,1135.648,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":34,"s":[1398.671,1131.534,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":51,"s":[1398.671,1131.534,0],"to":[0,0,0],"ti":[0,0,0]},{"t":53,"s":[1396.171,1134.409,0]}],"ix":2},"a":{"a":0,"k":[-114,181,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":29,"s":[38.5,38.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":34,"s":[50,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":49,"s":[50,50,100]},{"t":53,"s":[37,37,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[91,91],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Tracciato ellisse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.337249755859,0.223510742188,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-114,181],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellisse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":29,"op":53,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"bottom","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-2.559,65.635,0],"ix":2},"a":{"a":0,"k":[1412.324,1115.584,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"ShapeNir Slider","np":3,"mn":"ADBE Slider Control","ix":1,"en":1,"ef":[{"ty":0,"nm":"Slider","mn":"ADBE Slider Control-0001","ix":1,"v":{"a":1,"k":[{"i":{"x":[0.17],"y":[1]},"o":{"x":[0.55],"y":[0]},"t":0,"s":[0]},{"t":23,"s":[100]}],"ix":1}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.55,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0],[9.068,9.068],[-9.068,9.068],[0,0],[0,0]],"o":[[0,0],[0,0],[-9.068,9.068],[-9.068,-9.068],[0,0],[0,0],[0,0]],"v":[[11.444,-11.445],[28.615,5.726],[-95.63,130.357],[-129.219,129.605],[-129.971,96.016],[-5.726,-28.615],[11.444,-11.445]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.55,"y":0},"t":23,"s":[{"i":[[0,0],[0,0],[0,0],[9.068,9.068],[-9.068,9.068],[0,0],[0,0]],"o":[[0,0],[0,0],[-9.068,9.068],[-9.068,-9.068],[0,0],[0,0],[0,0]],"v":[[11.444,-11.445],[28.615,5.726],[12.364,21.977],[-21.225,21.225],[-21.977,-12.364],[-5.726,-28.615],[11.444,-11.445]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"t":28,"s":[{"i":[[-3.749,-3.55],[1.525,-6.804],[0,0],[6.838,6.838],[-6.838,6.838],[-5.985,0.184],[0,0]],"o":[[3.749,3.55],[-1.525,6.804],[-6.838,6.838],[-6.838,-6.838],[0,0],[5.985,-0.184],[0,0]],"v":[[12.19,-8.82],[20.555,8.606],[8.3,20.861],[-17.03,20.294],[-17.597,-5.036],[-5.342,-17.291],[12.19,-8.82]],"c":false}]},{"t":29,"s":[{"i":[[0,0],[0,0],[0,0],[6.334,6.334],[-6.333,6.334],[0,0],[0,0]],"o":[[0,0],[0,0],[-6.334,6.333],[-6.334,-6.334],[0,0],[0,0],[0,0]],"v":[[6.738,-2.735],[18.731,9.258],[7.38,20.609],[-16.081,20.083],[-16.606,-3.378],[-5.255,-14.728],[6.738,-2.735]],"c":false}]}],"ix":2},"nm":"Tracciato 1_forAnimation","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.337254911661,0.223529413342,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1399.865,1127.029],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Gruppo 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 100;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 85.6245824308121;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        0.31314999326651,\n        0.62416910908086,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"e":{"a":0,"k":100,"ix":2,"x":"var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 0;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 14.3754175691879;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        0.31314966173997,\n        0.62416844828369,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.17,"y":1},"o":{"x":0.55,"y":0},"t":0,"s":[{"i":[[0,0],[-1.587,1.587],[-3.831,3.831],[-2.681,2.681],[0,0]],"o":[[0,0],[3.831,-3.831],[0,0],[2.681,-2.681],[0,0]],"v":[[1270.646,1256.634],[1275.455,1251.825],[1287.065,1240.215],[1403.185,1123.709],[1411.31,1115.584]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.55,"y":0},"t":23,"s":[{"i":[[0,0],[-1.587,1.587],[-3.831,3.831],[-2.681,2.681],[0,0]],"o":[[0,0],[3.831,-3.831],[0,0],[2.681,-2.681],[0,0]],"v":[[1378.641,1148.253],[1383.45,1143.444],[1395.059,1131.835],[1403.185,1123.709],[1411.31,1115.584]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"t":28,"s":[{"i":[[0,0],[-1.197,1.197],[-2.889,2.889],[-2.022,2.022],[0,0]],"o":[[0,0],[2.889,-2.889],[0,0],[2.022,-2.022],[0,0]],"v":[[1382.835,1147.323],[1386.462,1143.696],[1395.217,1134.941],[1401.345,1128.813],[1412.057,1118.207]],"c":false}]},{"t":29,"s":[{"i":[[0,0],[-1.108,1.108],[-2.676,2.676],[-1.873,1.873],[0,0]],"o":[[0,0],[2.676,-2.676],[0,0],[1.873,-1.873],[0,0]],"v":[[1383.785,1147.112],[1387.144,1143.753],[1395.253,1135.644],[1400.928,1129.969],[1406.603,1124.294]],"c":false}]}],"ix":2},"nm":"Tracciato 1_Bone","mn":"ADBE Vector Shape - Group","hd":false}],"ip":0,"op":29,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
+{
+  "v": "4.8.0",
+  "meta": {"g": "LottieFiles AE 3.4.3", "a": "", "k": "", "d": "", "tc": ""},
+  "fr": 24,
+  "ip": 0,
+  "op": 92,
+  "w": 3840,
+  "h": 2160,
+  "nm": "icon - isolated",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 3,
+      "nm": "NULL",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 0, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [1920, 1080, 0], "ix": 2},
+        "a": {"a": 0, "k": [50, 50, 0], "ix": 1},
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 33,
+              "s": [100, 100, 100]
+            },
+            {"t": 59, "s": [165, 165, 100]}
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 240,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 3,
+      "nm": "main position",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 0, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": 0.2, "y": 1},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 36,
+              "s": [50, 50, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {"t": 54, "s": [464, 50, 0]}
+          ],
+          "ix": 2
+        },
+        "a": {"a": 0, "k": [50, 50, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 240,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 3,
+      "nm": "scale",
+      "parent": 2,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 0, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [50, 50, 0], "ix": 2},
+        "a": {"a": 0, "k": [50, 50, 0], "ix": 1},
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": [0.667, 0.667, 0.667], "y": [1, 1, 1]},
+              "o": {"x": [0.333, 0.333, 0.333], "y": [0, 0, 0]},
+              "t": 23,
+              "s": [200, 200, 100]
+            },
+            {
+              "i": {"x": [0.667, 0.667, 0.667], "y": [1, 1, 1]},
+              "o": {"x": [0.333, 0.333, 0.333], "y": [0, 0, 0]},
+              "t": 35,
+              "s": [118, 118, 100]
+            },
+            {
+              "i": {"x": [0.667, 0.667, 0.667], "y": [1, 1, 1]},
+              "o": {"x": [0.333, 0.333, 0.333], "y": [0, 0, 0]},
+              "t": 38,
+              "s": [90, 90, 100]
+            },
+            {"t": 49, "s": [100, 100, 100]}
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 23,
+      "op": 240,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 4,
+      "ty": 3,
+      "nm": "arrow position",
+      "parent": 3,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 0, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": 0.107, "y": 1},
+              "o": {"x": 0.533, "y": 0},
+              "t": 23,
+              "s": [50, -8, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.19, "y": 0.642},
+              "o": {"x": 0.333, "y": 0},
+              "t": 35,
+              "s": [119.897, 36, 0],
+              "to": [0, 0, 0],
+              "ti": [392.376, 75.374, 0]
+            },
+            {
+              "i": {"x": 0.833, "y": 0.874},
+              "o": {"x": 1, "y": 0.713},
+              "t": 38,
+              "s": [-307.61, -289.928, 0],
+              "to": [-832.969, -114.56, 0],
+              "ti": [20.667, 921.704, 0]
+            },
+            {
+              "i": {"x": 0.667, "y": 1},
+              "o": {"x": 0.115, "y": 1},
+              "t": 49,
+              "s": [-374, -134, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.538, "y": 1},
+              "o": {"x": 1, "y": 0},
+              "t": 53,
+              "s": [-374, -175, 0],
+              "to": [0, 0, 0],
+              "ti": [1.605, -28.883, 0]
+            },
+            {
+              "i": {"x": 0.538, "y": 1},
+              "o": {"x": 0.167, "y": 0},
+              "t": 59,
+              "s": [-374, 37, 0],
+              "to": [0, 0, 0],
+              "ti": [1.605, -28.883, 0]
+            },
+            {"t": 65, "s": [-374, -8, 0]}
+          ],
+          "ix": 2
+        },
+        "a": {"a": 0, "k": [50, 50, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ip": 23,
+      "op": 243,
+      "st": 3,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 5,
+      "ty": 3,
+      "nm": "rotation",
+      "parent": 4,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 0, "ix": 11},
+        "r": {
+          "a": 1,
+          "k": [
+            {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.303], "y": [0]}, "t": 23, "s": [-45]},
+            {"i": {"x": [0.773], "y": [0.886]}, "o": {"x": [0.333], "y": [0]}, "t": 35, "s": [-45]},
+            {
+              "i": {"x": [0.833], "y": [0.833]},
+              "o": {"x": [0.167], "y": [0.06]},
+              "t": 38,
+              "s": [-71]
+            },
+            {
+              "i": {"x": [0.833], "y": [0.833]},
+              "o": {"x": [0.167], "y": [0.089]},
+              "t": 42,
+              "s": [-118.941]
+            },
+            {
+              "i": {"x": [0.667], "y": [1]},
+              "o": {"x": [0.167], "y": [0.087]},
+              "t": 45,
+              "s": [-186.591]
+            },
+            {"t": 49, "s": [-360]}
+          ],
+          "ix": 10
+        },
+        "p": {"a": 0, "k": [18.883, 127.949, 0], "ix": 2},
+        "a": {"a": 0, "k": [50, 50, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ip": 23,
+      "op": 243,
+      "st": 3,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 6,
+      "ty": 3,
+      "nm": "rough edges",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [1920, 1080, 0], "ix": 2},
+        "a": {"a": 0, "k": [1920, 1080, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "Roughen Edges",
+          "np": 17,
+          "mn": "ADBE Roughen Edges",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 7,
+              "nm": "Edge Type",
+              "mn": "ADBE Roughen Edges-0001",
+              "ix": 1,
+              "v": {"a": 0, "k": 1, "ix": 1}
+            },
+            {
+              "ty": 2,
+              "nm": "Edge Color",
+              "mn": "ADBE Roughen Edges-0010",
+              "ix": 2,
+              "v": {"a": 0, "k": [0.6, 0.2, 0, 1], "ix": 2}
+            },
+            {
+              "ty": 0,
+              "nm": "Border",
+              "mn": "ADBE Roughen Edges-0002",
+              "ix": 3,
+              "v": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": [0.833], "y": [0.833]},
+                    "o": {"x": [0.167], "y": [0.167]},
+                    "t": 12,
+                    "s": [17.4]
+                  },
+                  {"t": 19, "s": [2.7]}
+                ],
+                "ix": 3
+              }
+            },
+            {
+              "ty": 0,
+              "nm": "Edge Sharpness",
+              "mn": "ADBE Roughen Edges-0003",
+              "ix": 4,
+              "v": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": [0.833], "y": [0.833]},
+                    "o": {"x": [0.167], "y": [0.167]},
+                    "t": 12,
+                    "s": [1]
+                  },
+                  {"t": 19, "s": [0.1]}
+                ],
+                "ix": 4
+              }
+            },
+            {
+              "ty": 0,
+              "nm": "Fractal Influence",
+              "mn": "ADBE Roughen Edges-0004",
+              "ix": 5,
+              "v": {"a": 0, "k": 1, "ix": 5}
+            },
+            {
+              "ty": 0,
+              "nm": "Scale",
+              "mn": "ADBE Roughen Edges-0005",
+              "ix": 6,
+              "v": {"a": 0, "k": 1000, "ix": 6}
+            },
+            {
+              "ty": 0,
+              "nm": "Stretch Width or Height",
+              "mn": "ADBE Roughen Edges-0006",
+              "ix": 7,
+              "v": {"a": 0, "k": 0, "ix": 7}
+            },
+            {
+              "ty": 3,
+              "nm": "Offset (Turbulence)",
+              "mn": "ADBE Roughen Edges-0007",
+              "ix": 8,
+              "v": {"a": 0, "k": [0, 0], "ix": 8}
+            },
+            {
+              "ty": 0,
+              "nm": "Complexity",
+              "mn": "ADBE Roughen Edges-0008",
+              "ix": 9,
+              "v": {"a": 0, "k": 2, "ix": 9}
+            },
+            {
+              "ty": 0,
+              "nm": "Evolution",
+              "mn": "ADBE Roughen Edges-0009",
+              "ix": 10,
+              "v": {"a": 0, "k": 0, "ix": 10}
+            },
+            {"ty": 6, "nm": "Evolution Options", "mn": "ADBE Roughen Edges-0011", "ix": 11, "v": 0},
+            {
+              "ty": 7,
+              "nm": "Cycle Evolution",
+              "mn": "ADBE Roughen Edges-0012",
+              "ix": 12,
+              "v": {"a": 0, "k": 0, "ix": 12}
+            },
+            {
+              "ty": 0,
+              "nm": "Cycle (in Revolutions)",
+              "mn": "ADBE Roughen Edges-0013",
+              "ix": 13,
+              "v": {"a": 0, "k": 1, "ix": 13}
+            },
+            {
+              "ty": 0,
+              "nm": "Random Seed",
+              "mn": "ADBE Roughen Edges-0014",
+              "ix": 14,
+              "v": {"a": 0, "k": 0, "ix": 14}
+            },
+            {"ty": 6, "nm": "Random Seed", "mn": "ADBE Roughen Edges-0015", "ix": 15, "v": 0}
+          ]
+        }
+      ],
+      "ip": 0,
+      "op": 19,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 7,
+      "ty": 3,
+      "nm": "echo",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [1920, 1080, 0], "ix": 2},
+        "a": {"a": 0, "k": [1920, 1080, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "Echo",
+          "np": 7,
+          "mn": "ADBE Echo",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 0,
+              "nm": "Echo Time (seconds)",
+              "mn": "ADBE Echo-0001",
+              "ix": 1,
+              "v": {"a": 0, "k": -0.001, "ix": 1}
+            },
+            {
+              "ty": 0,
+              "nm": "Number Of Echoes",
+              "mn": "ADBE Echo-0002",
+              "ix": 2,
+              "v": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": [0.833], "y": [0.833]},
+                    "o": {"x": [0.167], "y": [0.167]},
+                    "t": 31,
+                    "s": [10]
+                  },
+                  {
+                    "i": {"x": [0.833], "y": [0.833]},
+                    "o": {"x": [0.167], "y": [0.167]},
+                    "t": 34,
+                    "s": [67]
+                  },
+                  {
+                    "i": {"x": [0.833], "y": [0.833]},
+                    "o": {"x": [0.167], "y": [0.167]},
+                    "t": 49,
+                    "s": [67]
+                  },
+                  {"t": 53, "s": [10]}
+                ],
+                "ix": 2
+              }
+            },
+            {
+              "ty": 0,
+              "nm": "Starting Intensity",
+              "mn": "ADBE Echo-0003",
+              "ix": 3,
+              "v": {"a": 0, "k": 1, "ix": 3}
+            },
+            {
+              "ty": 0,
+              "nm": "Decay",
+              "mn": "ADBE Echo-0004",
+              "ix": 4,
+              "v": {"a": 0, "k": 1, "ix": 4}
+            },
+            {
+              "ty": 7,
+              "nm": "Echo Operator",
+              "mn": "ADBE Echo-0005",
+              "ix": 5,
+              "v": {"a": 0, "k": 5, "ix": 5}
+            }
+          ]
+        }
+      ],
+      "ip": 31,
+      "op": 53,
+      "st": 3,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 8,
+      "ty": 4,
+      "nm": "top 2",
+      "parent": 5,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [73.565, -23.785, 0], "ix": 2},
+        "a": {"a": 0, "k": [1488.448, 1026.164, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "ShapeNir Slider",
+          "np": 3,
+          "mn": "ADBE Slider Control",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 0,
+              "nm": "Slider",
+              "mn": "ADBE Slider Control-0001",
+              "ix": 1,
+              "v": {"a": 0, "k": 100, "ix": 1}
+            }
+          ]
+        }
+      ],
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": 0.17, "y": 1},
+                    "o": {"x": 0.167, "y": 0},
+                    "t": 58,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-61.716, -44.574],
+                          [-57.525, -48.766],
+                          [-21.582, -61.577],
+                          [-24.345, -64.482],
+                          [-24.342, -31.648],
+                          [-24.342, -31.648],
+                          [-24.342, -31.648],
+                          [-57.186, -31.645],
+                          [-65.907, -40.383],
+                          [-61.716, -44.574]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "t": 64,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-74.672, -57.386],
+                          [-70.481, -61.577],
+                          [-21.582, -61.577],
+                          [72.063, 32.066],
+                          [72.066, 64.9],
+                          [72.066, 64.9],
+                          [72.066, 64.9],
+                          [39.223, 64.903],
+                          [-78.863, -53.195],
+                          [-74.672, -57.386]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  }
+                ],
+                "ix": 2
+              },
+              "nm": "Tracciato 1_forAnimation",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.211764708161, 0.568627476692, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [1542.448, 1082.164], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Gruppo 3",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 0,
+            "k": 0,
+            "ix": 1,
+            "x": "var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 100;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 98.6485408913042;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "e": {
+            "a": 0,
+            "k": 100,
+            "ix": 2,
+            "x": "var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 0;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 1.35145910869578;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "o": {"a": 0, "k": 0, "ix": 3},
+          "m": 1,
+          "ix": 2,
+          "nm": "Taglia tracciati 1",
+          "mn": "ADBE Vector Filter - Trim",
+          "hd": false
+        },
+        {
+          "ind": 2,
+          "ty": "sh",
+          "ix": 3,
+          "ks": {
+            "a": 1,
+            "k": [
+              {
+                "i": {"x": 0.17, "y": 1},
+                "o": {"x": 0.167, "y": 0},
+                "t": 58,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [5.418, 5.419],
+                      [17.468, 17.469],
+                      [25.537, -25.537]
+                    ],
+                    "o": [
+                      [-3.662, 6.731],
+                      [0, 0],
+                      [-25.536, -25.537],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1518.105, 1050.515],
+                      [1501.682, 1034.099],
+                      [1545.158, 1077.713],
+                      [1480.731, 1037.589]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "t": 64,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [5.418, 5.419],
+                      [17.468, 17.469],
+                      [25.537, -25.537]
+                    ],
+                    "o": [
+                      [-3.662, 6.731],
+                      [0, 0],
+                      [-25.536, -25.537],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1614.514, 1147.064],
+                      [1598.091, 1130.648],
+                      [1545.158, 1077.713],
+                      [1467.776, 1024.778]
+                    ],
+                    "c": false
+                  }
+                ]
+              }
+            ],
+            "ix": 2
+          },
+          "nm": "Tracciato 1_Bone",
+          "mn": "ADBE Vector Shape - Group",
+          "hd": false
+        }
+      ],
+      "ip": 53,
+      "op": 126,
+      "st": 6,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 9,
+      "ty": 4,
+      "nm": "top_extra",
+      "parent": 10,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 45, "ix": 10},
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 29,
+              "s": [1502.093, 1035.094, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 34,
+              "s": [1495.062, 1036.428, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 51,
+              "s": [1495.062, 1036.428, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {"t": 53, "s": [1502.312, 1036.428, 0]}
+          ],
+          "ix": 2
+        },
+        "a": {"a": 0, "k": [-98.5, -102, 0], "ix": 1},
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 29,
+              "s": [46.5, 46.5, 100]
+            },
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 32,
+              "s": [50, 50, 100]
+            },
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 49,
+              "s": [50, 50, 100]
+            },
+            {"t": 53, "s": [45.2, 45.2, 100]}
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": {"a": 0, "k": [94, 94], "ix": 2},
+              "p": {"a": 0, "k": [0, 0], "ix": 3},
+              "nm": "Tracciato ellisse 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.211761474609, 0.568603515625, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [-98.5, -102], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellisse 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 29,
+      "op": 53,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 10,
+      "ty": 4,
+      "nm": "top",
+      "parent": 5,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [73.565, -23.785, 0], "ix": 2},
+        "a": {"a": 0, "k": [1488.448, 1026.164, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "ShapeNir Slider",
+          "np": 3,
+          "mn": "ADBE Slider Control",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 0,
+              "nm": "Slider",
+              "mn": "ADBE Slider Control-0001",
+              "ix": 1,
+              "v": {
+                "a": 1,
+                "k": [
+                  {"i": {"x": [0.17], "y": [1]}, "o": {"x": [0.55], "y": [0]}, "t": 6, "s": [0]},
+                  {"t": 23, "s": [100]}
+                ],
+                "ix": 1
+              }
+            }
+          ]
+        }
+      ],
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": 0.17, "y": 1},
+                    "o": {"x": 0.55, "y": 0},
+                    "t": 6,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-74.672, -57.386],
+                          [-70.481, -61.577],
+                          [-21.582, -61.577],
+                          [194.283, 154.505],
+                          [194.286, 187.34],
+                          [194.286, 187.34],
+                          [194.286, 187.34],
+                          [161.442, 187.343],
+                          [-78.863, -53.195],
+                          [-74.672, -57.386]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.833, "y": 0.833},
+                    "o": {"x": 0.55, "y": 0},
+                    "t": 23,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-74.672, -57.386],
+                          [-70.481, -61.577],
+                          [-21.582, -61.577],
+                          [72.063, 32.066],
+                          [72.066, 64.9],
+                          [72.066, 64.9],
+                          [72.066, 64.9],
+                          [39.223, 64.903],
+                          [-78.863, -53.195],
+                          [-74.672, -57.386]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.833, "y": 1},
+                    "o": {"x": 0.167, "y": 0.167},
+                    "t": 26,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [2.122, 2.171],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [-2.122, -2.171],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-70.801, -53.558],
+                          [-66.61, -57.749],
+                          [-21.582, -61.577],
+                          [43.259, 3.22],
+                          [43.262, 36.055],
+                          [43.262, 36.055],
+                          [43.262, 36.055],
+                          [10.419, 36.058],
+                          [-66.621, -43.95],
+                          [-70.801, -53.558]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.833, "y": 1},
+                    "o": {"x": 0.167, "y": 0},
+                    "t": 29,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-61.716, -44.574],
+                          [-57.525, -48.766],
+                          [-21.582, -61.577],
+                          [-24.345, -64.482],
+                          [-24.342, -31.648],
+                          [-24.342, -31.648],
+                          [-24.342, -31.648],
+                          [-57.186, -31.645],
+                          [-65.907, -40.383],
+                          [-61.716, -44.574]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.45, "y": 1},
+                    "o": {"x": 0.167, "y": 0},
+                    "t": 53,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-61.716, -44.574],
+                          [-57.525, -48.766],
+                          [-21.582, -61.577],
+                          [-24.345, -64.482],
+                          [-24.342, -31.648],
+                          [-24.342, -31.648],
+                          [-24.342, -31.648],
+                          [-57.186, -31.645],
+                          [-65.907, -40.383],
+                          [-61.716, -44.574]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "t": 59,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [-13.503, -13.506],
+                          [0, 0],
+                          [9.065, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.071],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [13.506, -13.506],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.074],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-74.672, -57.386],
+                          [-70.481, -61.577],
+                          [-21.582, -61.577],
+                          [72.063, 32.066],
+                          [72.066, 64.9],
+                          [72.066, 64.9],
+                          [72.066, 64.9],
+                          [39.223, 64.903],
+                          [-78.863, -53.195],
+                          [-74.672, -57.386]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  }
+                ],
+                "ix": 2
+              },
+              "nm": "Tracciato 1_forAnimation",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.211764708161, 0.568627476692, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [1542.448, 1082.164], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Gruppo 3",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 0,
+            "k": 0,
+            "ix": 1,
+            "x": "var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 100;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 98.6485408913042;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "e": {
+            "a": 0,
+            "k": 100,
+            "ix": 2,
+            "x": "var $bm_rt;\nvar mN01 = 52.2496645130989;\nvar mN02 = 0;\nvar mN01Edt = 52.2496645130989;\nvar mN02Edt = 1.35145910869578;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "o": {"a": 0, "k": 0, "ix": 3},
+          "m": 1,
+          "ix": 2,
+          "nm": "Taglia tracciati 1",
+          "mn": "ADBE Vector Filter - Trim",
+          "hd": false
+        },
+        {
+          "ind": 2,
+          "ty": "sh",
+          "ix": 3,
+          "ks": {
+            "a": 1,
+            "k": [
+              {
+                "i": {"x": 0.17, "y": 1},
+                "o": {"x": 0.55, "y": 0},
+                "t": 6,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [5.418, 5.419],
+                      [17.468, 17.469],
+                      [25.537, -25.537]
+                    ],
+                    "o": [
+                      [-3.662, 6.731],
+                      [0, 0],
+                      [-25.536, -25.537],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1736.734, 1269.504],
+                      [1720.31, 1253.088],
+                      [1545.158, 1077.713],
+                      [1467.776, 1024.778]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.833, "y": 1},
+                "o": {"x": 0.55, "y": 0},
+                "t": 23,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [5.418, 5.419],
+                      [17.468, 17.469],
+                      [25.537, -25.537]
+                    ],
+                    "o": [
+                      [-3.662, 6.731],
+                      [0, 0],
+                      [-25.536, -25.537],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1614.514, 1147.064],
+                      [1598.091, 1130.648],
+                      [1545.158, 1077.713],
+                      [1467.776, 1024.778]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.833, "y": 1},
+                "o": {"x": 0.167, "y": 0},
+                "t": 29,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [5.418, 5.419],
+                      [17.468, 17.469],
+                      [25.537, -25.537]
+                    ],
+                    "o": [
+                      [-3.662, 6.731],
+                      [0, 0],
+                      [-25.536, -25.537],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1518.105, 1050.515],
+                      [1501.682, 1034.099],
+                      [1545.158, 1077.713],
+                      [1480.731, 1037.589]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.45, "y": 1},
+                "o": {"x": 0.167, "y": 0},
+                "t": 53,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [5.418, 5.419],
+                      [17.468, 17.469],
+                      [25.537, -25.537]
+                    ],
+                    "o": [
+                      [-3.662, 6.731],
+                      [0, 0],
+                      [-25.536, -25.537],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1518.105, 1050.515],
+                      [1501.682, 1034.099],
+                      [1545.158, 1077.713],
+                      [1480.731, 1037.589]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "t": 59,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [5.418, 5.419],
+                      [17.468, 17.469],
+                      [25.537, -25.537]
+                    ],
+                    "o": [
+                      [-3.662, 6.731],
+                      [0, 0],
+                      [-25.536, -25.537],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1614.514, 1147.064],
+                      [1598.091, 1130.648],
+                      [1545.158, 1077.713],
+                      [1467.776, 1024.778]
+                    ],
+                    "c": false
+                  }
+                ]
+              }
+            ],
+            "ix": 2
+          },
+          "nm": "Tracciato 1_Bone",
+          "mn": "ADBE Vector Shape - Group",
+          "hd": false
+        }
+      ],
+      "ip": 6,
+      "op": 29,
+      "st": 6,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 11,
+      "ty": 4,
+      "nm": "mid 2",
+      "parent": 5,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [15, 16, 0], "ix": 2},
+        "a": {"a": 0, "k": [1429.883, 1065.949, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "ShapeNir Slider",
+          "np": 3,
+          "mn": "ADBE Slider Control",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 0,
+              "nm": "Slider",
+              "mn": "ADBE Slider Control-0001",
+              "ix": 1,
+              "v": {"a": 0, "k": 100, "ix": 1}
+            }
+          ]
+        }
+      ],
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": 0.45, "y": 1},
+                    "o": {"x": 0.167, "y": 0},
+                    "t": 55.5,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [6.673, -6.673],
+                          [0, 0],
+                          [0, 0],
+                          [6.673, 6.673],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [6.671, 6.673],
+                          [0, 0],
+                          [0, 0],
+                          [-6.673, 6.671],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-30.953, -29.75],
+                          [-18.872, -41.83],
+                          [-9.362, -32.208],
+                          [-9.362, -8.045],
+                          [-9.362, -8.045],
+                          [-9.362, -8.045],
+                          [-33.522, -8.045],
+                          [-43.033, -17.67],
+                          [-30.953, -29.75]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "t": 61.5,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.068],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.065],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-36.143, -36.135],
+                          [-19.727, -52.551],
+                          [45.759, 12.917],
+                          [45.759, 45.751],
+                          [45.759, 45.751],
+                          [45.759, 45.751],
+                          [12.927, 45.751],
+                          [-52.559, -19.719],
+                          [-36.143, -36.135]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  }
+                ],
+                "ix": 2
+              },
+              "nm": "Tracciato 1_forAnimation",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.223529413342, 0.223529413342, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [1464.883, 1099.949], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Gruppo 2",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 0,
+            "k": 0,
+            "ix": 1,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 100;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 92.3777446239903;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "e": {
+            "a": 0,
+            "k": 100,
+            "ix": 2,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 0;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 7.62225537600966;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "o": {"a": 0, "k": 0, "ix": 3},
+          "m": 1,
+          "ix": 2,
+          "nm": "Taglia tracciati 1",
+          "mn": "ADBE Vector Filter - Trim",
+          "hd": false
+        },
+        {
+          "ind": 2,
+          "ty": "sh",
+          "ix": 3,
+          "ks": {
+            "a": 1,
+            "k": [
+              {
+                "i": {"x": 0.45, "y": 1},
+                "o": {"x": 0.167, "y": 0},
+                "t": 55.5,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [11.939, 11.936],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [-0.527, -16.874],
+                      [-7.951, -7.949],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1455.522, 1091.904],
+                      [1458.026, 1094.288],
+                      [1433.931, 1070.199]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "t": 61.5,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [16.224, 16.22],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [-0.717, -22.93],
+                      [-10.805, -10.802],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1510.642, 1145.701],
+                      [1461.483, 1096.548],
+                      [1428.74, 1063.814]
+                    ],
+                    "c": false
+                  }
+                ]
+              }
+            ],
+            "ix": 2
+          },
+          "nm": "Tracciato 1_Bone",
+          "mn": "ADBE Vector Shape - Group",
+          "hd": false
+        }
+      ],
+      "ip": 53,
+      "op": 126,
+      "st": 3,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 12,
+      "ty": 4,
+      "nm": "mid_extra",
+      "parent": 13,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 45, "ix": 10},
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 29,
+              "s": [1442.756, 1079.784, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 34,
+              "s": [1450.145, 1086.357, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 51,
+              "s": [1450.145, 1086.357, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {"t": 53, "s": [1443.895, 1080.232, 0]}
+          ],
+          "ix": 2
+        },
+        "a": {"a": 0, "k": [-120, 40, 0], "ix": 1},
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 29,
+              "s": [37.2, 37.2, 100]
+            },
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 34,
+              "s": [50, 50, 100]
+            },
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 49,
+              "s": [50, 50, 100]
+            },
+            {"t": 53, "s": [35.7, 35.7, 100]}
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": {"a": 0, "k": [93, 93], "ix": 2},
+              "p": {"a": 0, "k": [0, 0], "ix": 3},
+              "nm": "Tracciato ellisse 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.223510742188, 0.223510742188, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [-120, 40], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellisse 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 29,
+      "op": 53,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 13,
+      "ty": 4,
+      "nm": "mid",
+      "parent": 5,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [15, 16, 0], "ix": 2},
+        "a": {"a": 0, "k": [1429.883, 1065.949, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "ShapeNir Slider",
+          "np": 3,
+          "mn": "ADBE Slider Control",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 0,
+              "nm": "Slider",
+              "mn": "ADBE Slider Control-0001",
+              "ix": 1,
+              "v": {
+                "a": 1,
+                "k": [
+                  {"i": {"x": [0.17], "y": [1]}, "o": {"x": [0.55], "y": [0]}, "t": 3, "s": [0]},
+                  {"t": 23, "s": [100]}
+                ],
+                "ix": 1
+              }
+            }
+          ]
+        }
+      ],
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": 0.17, "y": 1},
+                    "o": {"x": 0.55, "y": 0},
+                    "t": 3,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.068],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.065],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-36.143, -36.135],
+                          [-19.727, -52.551],
+                          [119.506, 86.956],
+                          [119.506, 119.79],
+                          [119.506, 119.79],
+                          [119.506, 119.79],
+                          [86.674, 119.79],
+                          [-52.559, -19.719],
+                          [-36.143, -36.135]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.833, "y": 1},
+                    "o": {"x": 0.55, "y": 0},
+                    "t": 23,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.068],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.065],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-36.143, -36.135],
+                          [-19.727, -52.551],
+                          [45.759, 12.917],
+                          [45.759, 45.751],
+                          [45.759, 45.751],
+                          [45.759, 45.751],
+                          [12.927, 45.751],
+                          [-52.559, -19.719],
+                          [-36.143, -36.135]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.833, "y": 1},
+                    "o": {"x": 0.167, "y": 0},
+                    "t": 29,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [6.673, -6.673],
+                          [0, 0],
+                          [0, 0],
+                          [6.673, 6.673],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [6.671, 6.673],
+                          [0, 0],
+                          [0, 0],
+                          [-6.673, 6.671],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-30.953, -29.75],
+                          [-18.872, -41.83],
+                          [-9.362, -32.208],
+                          [-9.362, -8.045],
+                          [-9.362, -8.045],
+                          [-9.362, -8.045],
+                          [-33.522, -8.045],
+                          [-43.033, -17.67],
+                          [-30.953, -29.75]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.45, "y": 1},
+                    "o": {"x": 0.167, "y": 0},
+                    "t": 53,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [6.673, -6.673],
+                          [0, 0],
+                          [0, 0],
+                          [6.673, 6.673],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [6.671, 6.673],
+                          [0, 0],
+                          [0, 0],
+                          [-6.673, 6.671],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-30.953, -29.75],
+                          [-18.872, -41.83],
+                          [-9.362, -32.208],
+                          [-9.362, -8.045],
+                          [-9.362, -8.045],
+                          [-9.362, -8.045],
+                          [-33.522, -8.045],
+                          [-43.033, -17.67],
+                          [-30.953, -29.75]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "t": 59,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.068],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [9.065, 9.068],
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.065],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [-36.143, -36.135],
+                          [-19.727, -52.551],
+                          [45.759, 12.917],
+                          [45.759, 45.751],
+                          [45.759, 45.751],
+                          [45.759, 45.751],
+                          [12.927, 45.751],
+                          [-52.559, -19.719],
+                          [-36.143, -36.135]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  }
+                ],
+                "ix": 2
+              },
+              "nm": "Tracciato 1_forAnimation",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.223529413342, 0.223529413342, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [1464.883, 1099.949], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Gruppo 2",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 0,
+            "k": 0,
+            "ix": 1,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 100;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 92.3777446239903;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "e": {
+            "a": 0,
+            "k": 100,
+            "ix": 2,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000976522834;\nvar mN02 = 0;\nvar mN01Edt = 50.0000976522834;\nvar mN02Edt = 7.62225537600966;\nvar mRatiosM = [\n        0,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "o": {"a": 0, "k": 0, "ix": 3},
+          "m": 1,
+          "ix": 2,
+          "nm": "Taglia tracciati 1",
+          "mn": "ADBE Vector Filter - Trim",
+          "hd": false
+        },
+        {
+          "ind": 2,
+          "ty": "sh",
+          "ix": 3,
+          "ks": {
+            "a": 1,
+            "k": [
+              {
+                "i": {"x": 0.17, "y": 1},
+                "o": {"x": 0.55, "y": 0},
+                "t": 3,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [16.224, 16.22],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [-0.717, -22.93],
+                      [-10.805, -10.802],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1584.389, 1219.739],
+                      [1461.483, 1096.548],
+                      [1428.74, 1063.814]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.833, "y": 1},
+                "o": {"x": 0.55, "y": 0},
+                "t": 23,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [16.224, 16.22],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [-0.717, -22.93],
+                      [-10.805, -10.802],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1510.642, 1145.701],
+                      [1461.483, 1096.548],
+                      [1428.74, 1063.814]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.833, "y": 1},
+                "o": {"x": 0.167, "y": 0},
+                "t": 29,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [11.939, 11.936],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [-0.527, -16.874],
+                      [-7.951, -7.949],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1455.522, 1091.904],
+                      [1458.026, 1094.288],
+                      [1433.931, 1070.199]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.45, "y": 1},
+                "o": {"x": 0.167, "y": 0},
+                "t": 53,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [11.939, 11.936],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [-0.527, -16.874],
+                      [-7.951, -7.949],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1455.522, 1091.904],
+                      [1458.026, 1094.288],
+                      [1433.931, 1070.199]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "t": 59,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [16.224, 16.22],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [-0.717, -22.93],
+                      [-10.805, -10.802],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1510.642, 1145.701],
+                      [1461.483, 1096.548],
+                      [1428.74, 1063.814]
+                    ],
+                    "c": false
+                  }
+                ]
+              }
+            ],
+            "ix": 2
+          },
+          "nm": "Tracciato 1_Bone",
+          "mn": "ADBE Vector Shape - Group",
+          "hd": false
+        }
+      ],
+      "ip": 3,
+      "op": 29,
+      "st": 3,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 14,
+      "ty": 4,
+      "nm": "bottom 2",
+      "parent": 5,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [-2.559, 65.635, 0], "ix": 2},
+        "a": {"a": 0, "k": [1412.324, 1115.584, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "ShapeNir Slider",
+          "np": 3,
+          "mn": "ADBE Slider Control",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 0,
+              "nm": "Slider",
+              "mn": "ADBE Slider Control-0001",
+              "ix": 1,
+              "v": {"a": 0, "k": 100, "ix": 1}
+            }
+          ]
+        }
+      ],
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": 0.45, "y": 1},
+                    "o": {"x": 0.167, "y": 0},
+                    "t": 53,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [6.334, 6.334],
+                          [-6.333, 6.334],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [-6.334, 6.333],
+                          [-6.334, -6.334],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [6.738, -2.735],
+                          [18.731, 9.258],
+                          [7.38, 20.609],
+                          [-16.081, 20.083],
+                          [-16.606, -3.378],
+                          [-5.255, -14.728],
+                          [6.738, -2.735]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "t": 59,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.068],
+                          [-9.068, 9.068],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.068],
+                          [-9.068, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [11.444, -11.445],
+                          [28.615, 5.726],
+                          [12.364, 21.977],
+                          [-21.225, 21.225],
+                          [-21.977, -12.364],
+                          [-5.726, -28.615],
+                          [11.444, -11.445]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  }
+                ],
+                "ix": 2
+              },
+              "nm": "Tracciato 1_forAnimation",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.337254911661, 0.223529413342, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [1399.865, 1127.029], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Gruppo 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 0,
+            "k": 0,
+            "ix": 1,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 100;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 85.6245824308121;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        0.31314999326651,\n        0.62416910908086,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "e": {
+            "a": 0,
+            "k": 100,
+            "ix": 2,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 0;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 14.3754175691879;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        0.31314966173997,\n        0.62416844828369,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "o": {"a": 0, "k": 0, "ix": 3},
+          "m": 1,
+          "ix": 2,
+          "nm": "Taglia tracciati 1",
+          "mn": "ADBE Vector Filter - Trim",
+          "hd": false
+        },
+        {
+          "ind": 2,
+          "ty": "sh",
+          "ix": 3,
+          "ks": {
+            "a": 1,
+            "k": [
+              {
+                "i": {"x": 0.45, "y": 1},
+                "o": {"x": 0.167, "y": 0},
+                "t": 53,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [-1.108, 1.108],
+                      [-2.676, 2.676],
+                      [-1.873, 1.873],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [0, 0],
+                      [2.676, -2.676],
+                      [0, 0],
+                      [1.873, -1.873],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1383.785, 1147.112],
+                      [1387.144, 1143.753],
+                      [1395.253, 1135.644],
+                      [1400.928, 1129.969],
+                      [1406.603, 1124.294]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "t": 59,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [-1.587, 1.587],
+                      [-3.831, 3.831],
+                      [-2.681, 2.681],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [0, 0],
+                      [3.831, -3.831],
+                      [0, 0],
+                      [2.681, -2.681],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1378.641, 1148.253],
+                      [1383.45, 1143.444],
+                      [1395.059, 1131.835],
+                      [1403.185, 1123.709],
+                      [1411.31, 1115.584]
+                    ],
+                    "c": false
+                  }
+                ]
+              }
+            ],
+            "ix": 2
+          },
+          "nm": "Tracciato 1_Bone",
+          "mn": "ADBE Vector Shape - Group",
+          "hd": false
+        }
+      ],
+      "ip": 53,
+      "op": 126,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 15,
+      "ty": 4,
+      "nm": "bottom_extra",
+      "parent": 16,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 45, "ix": 10},
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 29,
+              "s": [1395.693, 1135.648, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 34,
+              "s": [1398.671, 1131.534, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {"x": 0.833, "y": 0.833},
+              "o": {"x": 0.167, "y": 0.167},
+              "t": 51,
+              "s": [1398.671, 1131.534, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 0, 0]
+            },
+            {"t": 53, "s": [1396.171, 1134.409, 0]}
+          ],
+          "ix": 2
+        },
+        "a": {"a": 0, "k": [-114, 181, 0], "ix": 1},
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 29,
+              "s": [38.5, 38.5, 100]
+            },
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 34,
+              "s": [50, 50, 100]
+            },
+            {
+              "i": {"x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833]},
+              "o": {"x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167]},
+              "t": 49,
+              "s": [50, 50, 100]
+            },
+            {"t": 53, "s": [37, 37, 100]}
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": {"a": 0, "k": [91, 91], "ix": 2},
+              "p": {"a": 0, "k": [0, 0], "ix": 3},
+              "nm": "Tracciato ellisse 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.337249755859, 0.223510742188, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [-114, 181], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellisse 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 29,
+      "op": 53,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 16,
+      "ty": 4,
+      "nm": "bottom",
+      "parent": 5,
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [-2.559, 65.635, 0], "ix": 2},
+        "a": {"a": 0, "k": [1412.324, 1115.584, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "ef": [
+        {
+          "ty": 5,
+          "nm": "ShapeNir Slider",
+          "np": 3,
+          "mn": "ADBE Slider Control",
+          "ix": 1,
+          "en": 1,
+          "ef": [
+            {
+              "ty": 0,
+              "nm": "Slider",
+              "mn": "ADBE Slider Control-0001",
+              "ix": 1,
+              "v": {
+                "a": 1,
+                "k": [
+                  {"i": {"x": [0.17], "y": [1]}, "o": {"x": [0.55], "y": [0]}, "t": 0, "s": [0]},
+                  {"t": 23, "s": [100]}
+                ],
+                "ix": 1
+              }
+            }
+          ]
+        }
+      ],
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": {"x": 0.17, "y": 1},
+                    "o": {"x": 0.55, "y": 0},
+                    "t": 0,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.068],
+                          [-9.068, 9.068],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.068],
+                          [-9.068, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [11.444, -11.445],
+                          [28.615, 5.726],
+                          [-95.63, 130.357],
+                          [-129.219, 129.605],
+                          [-129.971, 96.016],
+                          [-5.726, -28.615],
+                          [11.444, -11.445]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.833, "y": 0.833},
+                    "o": {"x": 0.55, "y": 0},
+                    "t": 23,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [9.068, 9.068],
+                          [-9.068, 9.068],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [-9.068, 9.068],
+                          [-9.068, -9.068],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [11.444, -11.445],
+                          [28.615, 5.726],
+                          [12.364, 21.977],
+                          [-21.225, 21.225],
+                          [-21.977, -12.364],
+                          [-5.726, -28.615],
+                          [11.444, -11.445]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "i": {"x": 0.833, "y": 1},
+                    "o": {"x": 0.167, "y": 0.167},
+                    "t": 28,
+                    "s": [
+                      {
+                        "i": [
+                          [-3.749, -3.55],
+                          [1.525, -6.804],
+                          [0, 0],
+                          [6.838, 6.838],
+                          [-6.838, 6.838],
+                          [-5.985, 0.184],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [3.749, 3.55],
+                          [-1.525, 6.804],
+                          [-6.838, 6.838],
+                          [-6.838, -6.838],
+                          [0, 0],
+                          [5.985, -0.184],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [12.19, -8.82],
+                          [20.555, 8.606],
+                          [8.3, 20.861],
+                          [-17.03, 20.294],
+                          [-17.597, -5.036],
+                          [-5.342, -17.291],
+                          [12.19, -8.82]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  },
+                  {
+                    "t": 29,
+                    "s": [
+                      {
+                        "i": [
+                          [0, 0],
+                          [0, 0],
+                          [0, 0],
+                          [6.334, 6.334],
+                          [-6.333, 6.334],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "o": [
+                          [0, 0],
+                          [0, 0],
+                          [-6.334, 6.333],
+                          [-6.334, -6.334],
+                          [0, 0],
+                          [0, 0],
+                          [0, 0]
+                        ],
+                        "v": [
+                          [6.738, -2.735],
+                          [18.731, 9.258],
+                          [7.38, 20.609],
+                          [-16.081, 20.083],
+                          [-16.606, -3.378],
+                          [-5.255, -14.728],
+                          [6.738, -2.735]
+                        ],
+                        "c": false
+                      }
+                    ]
+                  }
+                ],
+                "ix": 2
+              },
+              "nm": "Tracciato 1_forAnimation",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.337254911661, 0.223529413342, 1, 1], "ix": 4},
+              "o": {"a": 0, "k": 100, "ix": 5},
+              "r": 1,
+              "bm": 0,
+              "nm": "Riempimento 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [1399.865, 1127.029], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Gruppo 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 0,
+            "k": 0,
+            "ix": 1,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 100;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 85.6245824308121;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosF = [\n        0,\n        0.31314999326651,\n        0.62416910908086,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosF[$bm_sub(i, 1)], mRatiosF[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "e": {
+            "a": 0,
+            "k": 100,
+            "ix": 2,
+            "x": "var $bm_rt;\nvar mN01 = 50.0000191622908;\nvar mN02 = 0;\nvar mN01Edt = 50.0000191622908;\nvar mN02Edt = 14.3754175691879;\nvar mRatiosM = [\n        0,\n        0.1472024328579,\n        0.50257634091374,\n        1\n    ];\nvar mRatiosL = [\n        0,\n        0.31314966173997,\n        0.62416844828369,\n        1\n    ];\nfunction mLinear(aInput, aInNumF, aInNumL, aOutNumF, aOutNumL) {\n    var mInputLgt = $bm_sub(aInNumL, aInNumF);\n    var mOutputLgt = $bm_sub(aOutNumL, aOutNumF);\n    var mRatio = $bm_div(mOutputLgt, mInputLgt);\n    if (aInNumF <= aInput && aInput <= aInNumL) {\n        var mOutput = $bm_sum($bm_mul($bm_sub(aInput, aInNumF), mRatio), aOutNumF);\n    } else {\n        var mOutput = aInput;\n    }\n    return mOutput;\n}\nvar mSld = $bm_div(thisLayer('ADBE Effect Parade')('ShapeNir Slider')('ADBE Slider Control-0001'), 100);\nif (mSld <= 0) {\n    var mRst = mN01;\n} else if (mSld >= 1) {\n    var mRst = mN02;\n} else {\n    for (var i = 1; i < mRatiosM.length; i++) {\n        if (mRatiosM[i - 1] <= mSld && mSld < mRatiosM[i]) {\n            var mCtl = mLinear(mSld, mRatiosM[$bm_sub(i, 1)], mRatiosM[i], mRatiosL[$bm_sub(i, 1)], mRatiosL[i]);\n            break;\n        }\n    }\n    var mRst = mLinear(mCtl, 0, 1, mN01Edt, mN02Edt);\n}\n$bm_rt = mRst;"
+          },
+          "o": {"a": 0, "k": 0, "ix": 3},
+          "m": 1,
+          "ix": 2,
+          "nm": "Taglia tracciati 1",
+          "mn": "ADBE Vector Filter - Trim",
+          "hd": false
+        },
+        {
+          "ind": 2,
+          "ty": "sh",
+          "ix": 3,
+          "ks": {
+            "a": 1,
+            "k": [
+              {
+                "i": {"x": 0.17, "y": 1},
+                "o": {"x": 0.55, "y": 0},
+                "t": 0,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [-1.587, 1.587],
+                      [-3.831, 3.831],
+                      [-2.681, 2.681],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [0, 0],
+                      [3.831, -3.831],
+                      [0, 0],
+                      [2.681, -2.681],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1270.646, 1256.634],
+                      [1275.455, 1251.825],
+                      [1287.065, 1240.215],
+                      [1403.185, 1123.709],
+                      [1411.31, 1115.584]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.833, "y": 0.833},
+                "o": {"x": 0.55, "y": 0},
+                "t": 23,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [-1.587, 1.587],
+                      [-3.831, 3.831],
+                      [-2.681, 2.681],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [0, 0],
+                      [3.831, -3.831],
+                      [0, 0],
+                      [2.681, -2.681],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1378.641, 1148.253],
+                      [1383.45, 1143.444],
+                      [1395.059, 1131.835],
+                      [1403.185, 1123.709],
+                      [1411.31, 1115.584]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "i": {"x": 0.833, "y": 1},
+                "o": {"x": 0.167, "y": 0.167},
+                "t": 28,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [-1.197, 1.197],
+                      [-2.889, 2.889],
+                      [-2.022, 2.022],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [0, 0],
+                      [2.889, -2.889],
+                      [0, 0],
+                      [2.022, -2.022],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1382.835, 1147.323],
+                      [1386.462, 1143.696],
+                      [1395.217, 1134.941],
+                      [1401.345, 1128.813],
+                      [1412.057, 1118.207]
+                    ],
+                    "c": false
+                  }
+                ]
+              },
+              {
+                "t": 29,
+                "s": [
+                  {
+                    "i": [
+                      [0, 0],
+                      [-1.108, 1.108],
+                      [-2.676, 2.676],
+                      [-1.873, 1.873],
+                      [0, 0]
+                    ],
+                    "o": [
+                      [0, 0],
+                      [2.676, -2.676],
+                      [0, 0],
+                      [1.873, -1.873],
+                      [0, 0]
+                    ],
+                    "v": [
+                      [1383.785, 1147.112],
+                      [1387.144, 1143.753],
+                      [1395.253, 1135.644],
+                      [1400.928, 1129.969],
+                      [1406.603, 1124.294]
+                    ],
+                    "c": false
+                  }
+                ]
+              }
+            ],
+            "ix": 2
+          },
+          "nm": "Tracciato 1_Bone",
+          "mn": "ADBE Vector Shape - Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 29,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}
diff --git a/src/assets/images/institution-logo.png b/src/assets/images/institution-logo.png
new file mode 100644
index 0000000000..b1d13c1071
Binary files /dev/null and b/src/assets/images/institution-logo.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000000..a874b1e6d0
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/wav-worker.js b/src/assets/wav-worker.js
index 85948edd13..9f0f1651ec 100644
--- a/src/assets/wav-worker.js
+++ b/src/assets/wav-worker.js
@@ -72,4 +72,4 @@ onmessage = function (e) {
   } else if (e.data[0] === 'close') {
     self.close();
   }
-};
\ No newline at end of file
+};
diff --git a/src/common/i18n/localize.js b/src/common/i18n/localize.js
deleted file mode 100644
index 35335f73ca..0000000000
--- a/src/common/i18n/localize.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
- * An AngularJS Localization Service
- *
- * Written by Jim Lavin
- * http://codingsmackdown.tv
- *
- */
-
-angular.module('localization', [])
-// localization service responsible for retrieving resource files from the server and
-// managing the translation dictionary
-.factory('localize', ['$http', '$rootScope', '$window', '$filter', function($http, $rootScope, $window, $filter) {
-  var localize = {
-    // use the $window service to get the language of the user's browser
-    language: $window.navigator.userLanguage || $window.navigator.language,
-    // array to hold the localized resource string entries
-    dictionary: [],
-    // flag to indicate if the service hs loaded the resource file
-    resourceFileLoaded: false,
-
-    // success handler for all server communication
-    successCallback: function(data) {
-      // store the returned array in the dictionary
-      localize.dictionary = data;
-      // set the flag that the resource are loaded
-      localize.resourceFileLoaded = true;
-      // broadcast that the file has been loaded
-      $rootScope.$broadcast('i18nReady');
-    },
-
-    // allows setting of language on the fly
-    setLanguage: function(value) {
-      localize.language = value;
-      localize.initLocalizedResources();
-    },
-
-    // loads the language resource file from the server
-    initLocalizedResources: function() {
-      // build the url to retrieve the localized resource file
-      var url = 'src/i18n/resources-locale_' + localize.language + '.js';
-      // request the resource file
-      $http({
-        method: "GET",
-        url: url,
-        cache: false
-      }).success(localize.successCallback).error(function() {
-        // the request failed set the url to the default resource file
-        var url = 'src/i18n/resources-locale_default.js';
-        // request the default resource file
-        $http({
-          method: "GET",
-          url: url,
-          cache: false
-        }).success(localize.successCallback);
-      });
-    },
-
-    // checks the dictionary for a localized resource string
-    getLocalizedString: function(value) {
-      // default the result to an empty string
-      var result = '';
-
-      // make sure the dictionary has valid data
-      if ((localize.dictionary.length !== 0) && (localize.dictionary.length > 0)) {
-        // use the filter service to only return those entries which match the value
-        // and only take the first result
-        var entry = $filter('filter')(localize.dictionary, function(element) {
-          return element.key === value;
-        })[0];
-
-        // set the result
-        result = entry.value;
-      }
-      // return the value to the call
-      return result;
-    }
-  };
-
-  // force the load of the resource file
-  localize.initLocalizedResources();
-
-  // return the local instance when called
-  return localize;
-}])
-// simple translation filter
-// usage {{ TOKEN | i18n }}
-.filter('i18n', ['localize', function(localize) {
-  return function(input) {
-    return localize.getLocalizedString(input);
-  };
-}])
-// translation directive that can handle dynamic strings
-// updates the text value of the attached element
-// usage <span data-i18n="TOKEN" ></span>
-// or
-// <span data-i18n="TOKEN|VALUE1|VALUE2" ></span>
-.directive('i18n', ['localize', function(localize) {
-  var i18nDirective = {
-    restrict: "EAC",
-    updateText: function(elm, token) {
-      var values = token.split('|');
-      if (values.length >= 1) {
-        // construct the tag to insert into the element
-        var tag = localize.getLocalizedString(values[0]);
-        // update the element only if data was returned
-        if ((tag !== null) && (tag !== undefined) && (tag !== '')) {
-          if (values.length > 1) {
-            for (var index = 1; index < values.length; index++) {
-              var target = '{' + (index - 1) + '}';
-              tag = tag.replace(target, values[index]);
-            }
-          }
-          // insert the text into the element
-          elm.text(tag);
-        }
-      }
-    },
-
-    link: function(scope, elm, attrs) {
-      scope.$on('i18nReady', function() {
-        i18nDirective.updateText(elm, attrs.i18n);
-      });
-
-      attrs.$observe('i18n', function(value) {
-        i18nDirective.updateText(elm, attrs.i18n);
-      });
-    }
-  };
-
-  return i18nDirective;
-}])
-// translation directive that can handle dynamic strings
-// updates the attribute value of the attached element
-// usage <span data-i18n-attr="TOKEN|ATTRIBUTE" ></span>
-// or
-// <span data-i18n-attr="TOKEN|ATTRIBUTE|VALUE1|VALUE2" ></span>
-.directive('i18nAttr', ['localize', function(localize) {
-  var i18NAttrDirective = {
-    restrict: "EAC",
-    updateText: function(elm, token) {
-      var values = token.split('|');
-      // construct the tag to insert into the element
-      var tag = localize.getLocalizedString(values[0]);
-      // update the element only if data was returned
-      if ((tag !== null) && (tag !== undefined) && (tag !== '')) {
-        if (values.length > 2) {
-          for (var index = 2; index < values.length; index++) {
-            var target = '{' + (index - 2) + '}';
-            tag = tag.replace(target, values[index]);
-          }
-        }
-        // insert the text into the element
-        elm.attr(values[1], tag);
-      }
-    },
-    link: function(scope, elm, attrs) {
-      scope.$on('localizeResourcesUpdated', function() {
-        i18NAttrDirective.updateText(elm, attrs.i18nAttr);
-      });
-
-      attrs.$observe('i18nAttr', function(value) {
-        i18NAttrDirective.updateText(elm, value);
-      });
-    }
-  };
-
-  return i18NAttrDirective;
-}]);
diff --git a/src/common/utilService/utilService.coffee b/src/common/utilService/utilService.coffee
deleted file mode 100644
index 0203f10d04..0000000000
--- a/src/common/utilService/utilService.coffee
+++ /dev/null
@@ -1,23 +0,0 @@
-angular.module("utilService", [])
-
-.filter "fromNow", ->
-  return (date) ->
-    return moment(new Date(date)).fromNow()
-
-.filter "titleize", ->
-  (input) -> _.titleize input
-
-.filter "humanize", ->
-  (input) -> _.humanize input
-
-.directive "autoFillSync", ($timeout) ->
-
-  # A directive to ensure browser form auto-fill works, since Angular doesn't support it.
-  # See: http://stackoverflow.com/a/14966711
-  require: "ngModel"
-  link: (scope, elem, attrs, ngModel) ->
-    origVal = elem.val()
-    $timeout (->
-      newVal = elem.val()
-      ngModel.$setViewValue newVal if ngModel.$pristine and origVal isnt newVal
-    ), 500
diff --git a/src/environments/environment.prod.spec.ts b/src/environments/environment.prod.spec.ts
new file mode 100644
index 0000000000..5b0dc75d17
--- /dev/null
+++ b/src/environments/environment.prod.spec.ts
@@ -0,0 +1,12 @@
+import {describe, expect, it} from 'vitest';
+import {environment} from './environment.prod';
+
+describe('production environment', () => {
+  it('fails closed for demos and unresolved optional telemetry settings', () => {
+    expect(environment.production).toBe(true);
+    expect(environment.enableDemoTools).toBe(false);
+    expect(environment.sentryDsn).toBe('');
+    expect(environment.sentryRelease).toBe('');
+    expect(environment.sentryDist).toBe('');
+  });
+});
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 3612073bc3..21dbe97419 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,22 @@
+/**
+ * Docker replaces optional build values before Angular compiles this file.
+ * A direct production build leaves the `${...}` marker intact; normalising
+ * unresolved markers to an empty string keeps optional telemetry disabled.
+ */
+const optionalBuildValue = (value: string): string =>
+  value.startsWith('${') && value.endsWith('}') ? '' : value;
+
 export const environment = {
-  production: true
+  production: true,
+
+  // Not read in production: `production: true` already enables the service
+  // worker. Present so both environment files have the same shape.
+  enableServiceWorker: false,
+
+  // Demo mode must never be enabled by a production build.
+  enableDemoTools: false,
+
+  sentryDsn: optionalBuildValue('${SENTRY_DSN}'),
+  sentryRelease: optionalBuildValue('${SENTRY_RELEASE}'),
+  sentryDist: optionalBuildValue('${SENTRY_DIST}'),
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 72cd63978b..fec5e071b0 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,7 +3,24 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+
+  // Runs the service worker outside a production build. Push notifications
+  // cannot arrive without it, because the service worker is the thing that
+  // receives them.
+  //
+  // Turn this off if the worker gets in your way. It caches, so a stale bundle
+  // after a rebuild is the usual symptom, and clearing it is a manual step.
+  // See docs/service-worker.md.
+  enableServiceWorker: true,
+
+  // Makes the local-only demo controls available. The mode itself still starts
+  // off and is stored only for the current browser tab.
+  enableDemoTools: true,
+
+  sentryDsn: '',
+  sentryRelease: '',
+  sentryDist: '',
 };
 
 /*
diff --git a/src/i18n/resources-locale_default.js b/src/i18n/resources-locale_default.js
index 40adeca3f1..02afa75d4b 100644
--- a/src/i18n/resources-locale_default.js
+++ b/src/i18n/resources-locale_default.js
@@ -1,4 +1,4 @@
 [
-	{ "key":"_Home_", "value":"Home" },
-	{ "key":"_User_", "value":"User" }
-]
+  {'key': '_Home_', 'value': 'Home'},
+  {'key': '_User_', 'value': 'User'},
+];
diff --git a/src/i18n/resources-locale_en-AU.js b/src/i18n/resources-locale_en-AU.js
index 6a2a83110e..02afa75d4b 100644
--- a/src/i18n/resources-locale_en-AU.js
+++ b/src/i18n/resources-locale_en-AU.js
@@ -1,4 +1,4 @@
 [
-  { "key":"_Home_", "value":"Home" },
-  { "key":"_User_", "value":"User" }
-]
+  {'key': '_Home_', 'value': 'Home'},
+  {'key': '_User_', 'value': 'User'},
+];
diff --git a/src/i18n/resources-locale_en-GB.js b/src/i18n/resources-locale_en-GB.js
index 40adeca3f1..02afa75d4b 100644
--- a/src/i18n/resources-locale_en-GB.js
+++ b/src/i18n/resources-locale_en-GB.js
@@ -1,4 +1,4 @@
 [
-	{ "key":"_Home_", "value":"Home" },
-	{ "key":"_User_", "value":"User" }
-]
+  {'key': '_Home_', 'value': 'Home'},
+  {'key': '_User_', 'value': 'User'},
+];
diff --git a/src/i18n/resources-locale_en-US.js b/src/i18n/resources-locale_en-US.js
index 40adeca3f1..02afa75d4b 100644
--- a/src/i18n/resources-locale_en-US.js
+++ b/src/i18n/resources-locale_en-US.js
@@ -1,4 +1,4 @@
 [
-	{ "key":"_Home_", "value":"Home" },
-	{ "key":"_User_", "value":"User" }
-]
+  {'key': '_Home_', 'value': 'Home'},
+  {'key': '_User_', 'value': 'User'},
+];
diff --git a/src/index.html b/src/index.html
index 54fed2d067..9af0039389 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,37 +1,54 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VJWZRWYE2C"></script>
+    <base href="/" />
+    <meta content="no-referrer" name="referrer" />
+
+    <!-- THM-F04 pre-boot theme marker. Runs synchronously before any stylesheet
+         so the resolved theme is painted before Angular boots and there is no
+         incorrect-theme flash. Mirrors ThemeService.applyResolved and reads the
+         same storage key ('ontrack.theme.preference' / THEME_STORAGE_KEY). -->
     <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
+      // Only the storage read can throw (private mode, quota). Guard it alone so a
+      // throw still falls through to the system value, exactly like
+      // ThemeService.readThemePreference, instead of skipping the paint entirely.
+      let stored = null;
+      try {
+        stored = localStorage.getItem('ontrack.theme.preference');
+      } catch {
+        /* storage blocked; treat as unset and resolve against the OS */
       }
-      gtag('js', new Date());
-
-      gtag('config', 'G-VJWZRWYE2C');
+      const prefersDark =
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const resolved =
+        stored === 'light' || stored === 'dark' ? stored : prefersDark ? 'dark' : 'light';
+      document.documentElement.setAttribute('data-ot-theme', resolved);
+      document.documentElement.style.colorScheme = resolved;
     </script>
 
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap"
+      rel="stylesheet"
+    />
     <title ng-bind="externalName.value">Loading...</title>
 
     <!-- Nice favicons for all devices -->
-    <link rel="icon" href="/assets/icons/favicon.ico" sizes="any" />
+    <link href="/assets/icons/favicon.ico" rel="icon" sizes="any" />
     <!-- 32×32 -->
-    <link rel="icon" href="/assets/icons/icon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" />
+    <link href="/assets/icons/icon.svg" rel="icon" type="image/svg+xml" />
+    <link href="/assets/icons/apple-touch-icon.png" rel="apple-touch-icon" />
     <!-- 180×180 -->
-    <link rel="manifest" href="/manifest.webmanifest" />
-    <meta name="theme-color" content="#3939ff" />
+    <link href="/manifest.webmanifest" rel="manifest" />
+    <meta content="#3939ff" name="theme-color" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta content="width=device-width, initial-scale=1" name="viewport" />
     <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
     <meta content="Learning and feedback tool." name="description" />
 
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -39,19 +56,9 @@
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
-    <style type="text/css"></style>
-    <style id="holderjs-style" type="text/css"></style>
-
-    <!-- bootstrap for ngx -->
-    <link
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
   </head>
-  <body ng-controller="AppCtrl" class="mat-typography">
-    <app-header></app-header>
-    <splash-screen> </splash-screen>
-    <div class="container-fluid" ui-view="main"></div>
+  <body class="mat-typography">
+    <app-root></app-root>
     <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
 </html>
diff --git a/src/karma-ci.conf.js b/src/karma-ci.conf.js
deleted file mode 100644
index 4393b51ebf..0000000000
--- a/src/karma-ci.conf.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    logLevel: config.LOG_DEBUG,
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    angularCli: {
-      environment: 'dev',
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    singleRun: true,
-    browsers: ['ChromeHeadless'],
-  });
-};
diff --git a/src/karma.conf.js b/src/karma.conf.js
deleted file mode 100644
index 5aa0bbb00d..0000000000
--- a/src/karma.conf.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    logLevel: config.LOG_DEBUG,
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    angularCli: {
-      environment: 'dev',
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    customLaunchers: {
-      ChromeDebug: {
-        base: 'Chrome',
-        flags: ['--remote-debugging-port=9333'],
-      },
-    },
-  });
-};
diff --git a/src/main.ts b/src/main.ts
index a03768c5fc..7ede38d3ef 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,37 +1,49 @@
-// Make sure that angular is loaded before anything else!
-import 'angular/angular.js';
-
-import { enableProdMode, NgZone, Type } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { environment } from 'src/environments/environment';
-
-import { DoubtfireAngularJSModule } from './app/doubtfire-angularjs.module';
-import { DoubtfireAngularModule } from './app/doubtfire-angular.module';
-
-import { UIRouter, UrlService } from '@uirouter/core';
+import * as Sentry from '@sentry/angular';
+import {enableProdMode, provideZoneChangeDetection} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {environment} from 'src/environments/environment';
+import {DoubtfireAngularModule} from './app/doubtfire-angular.module';
+import {
+  captureAndScrubAuthCallback,
+  redactAuthCallbackFromUrl,
+} from './app/security/auth-callback';
+
+// Authentication callbacks may contain a one-time credential. Remove it from
+// browser history before any telemetry SDK or application code can observe it.
+const telemetrySafe = captureAndScrubAuthCallback();
+
+if (environment.sentryDsn && telemetrySafe) {
+  Sentry.init({
+    dsn: environment.sentryDsn,
+    tunnel: '/api/client-reports',
+    release: environment.sentryRelease || undefined,
+    dist: environment.sentryDist || undefined,
+    // Keep telemetry to redacted error events for this release. Browser tracing
+    // and Session Replay can observe iframe/resource URLs outside beforeSend;
+    // legacy SCORM URLs still contain a reusable credential in their path.
+    // They must stay disabled until that launch protocol is redesigned.
+    enableLogs: false,
+    sendDefaultPii: false,
+    beforeSend(event) {
+      if (event.request?.url) {
+        event.request.url = redactAuthCallbackFromUrl(event.request.url);
+      }
+      return event;
+    },
+    beforeBreadcrumb(breadcrumb) {
+      const url = breadcrumb.data?.['url'];
+      if (typeof url === 'string') {
+        breadcrumb.data['url'] = redactAuthCallbackFromUrl(url);
+      }
+      return breadcrumb;
+    },
+  });
+}
 
 if (environment.production) {
   enableProdMode();
 }
 
-// Using AngularJS config block, call `deferIntercept()`.
-// This tells UI-Router to delay the initial URL sync (until all bootstrapping is complete)
-DoubtfireAngularJSModule.config(['$urlServiceProvider', ($urlService: UrlService) => $urlService.deferIntercept()]);
-
-// Manually bootstrap the Angular app
-platformBrowserDynamic()
-  .bootstrapModule(DoubtfireAngularModule)
-  .then((platformRef) => {
-    // Intialize the Angular Module
-    // get() the UIRouter instance from DI to initialize the router
-    const urlService: UrlService = platformRef.injector.get<UIRouter>(UIRouter as Type<UIRouter>).urlService;
-
-    // Instruct UIRouter to listen to URL changes
-    function startUIRouter() {
-      urlService.listen();
-      urlService.sync();
-    }
-
-    platformRef.injector.get<NgZone>(NgZone).run(startUIRouter);
-  });
+platformBrowserDynamic().bootstrapModule(DoubtfireAngularModule, {
+  applicationProviders: [provideZoneChangeDetection()],
+});
diff --git a/src/manifest.webmanifest b/src/manifest.webmanifest
index 0ddf9e42d5..63218718f9 100644
--- a/src/manifest.webmanifest
+++ b/src/manifest.webmanifest
@@ -1,6 +1,6 @@
 {
-  "name": "formatif learning and feedback",
-  "short_name": "formatif",
+  "name": "OnTrack learning and feedback",
+  "short_name": "OnTrack",
   "icons": [
     {
       "src": "/assets/icons/android-chrome-192x192.png",
@@ -11,10 +11,16 @@
       "src": "/assets/icons/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
+    },
+    {
+      "src": "/assets/icons/android-chrome-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "theme_color": "#3939ff",
-  "background_color": "#ffffff",
+  "background_color": "#3939ff",
   "display": "standalone",
   "scope": "/",
   "start_url": "/index.html"
diff --git a/src/polyfills.ts b/src/polyfills.ts
index b602050f34..c5f35359ae 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -19,7 +19,7 @@
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js'; // Included with Angular CLI.
-(window as any).global = window;
+window.global = globalThis;
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
diff --git a/src/styles.scss b/src/styles.scss
index b0756f5acd..2a1ea11a97 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,13 +1,53 @@
 // For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
+@use '@worktile/gantt/styles/index';
+@use 'theme' as *;
+@use 'styles/common/typeface';
+// Theme foundation (THM-F01): the --ot-* token layer. These two partials are the
+// only place a colour value is declared. Light is the bare :root default so the
+// app stays correct even if the pre-hydration marker script (THM-F04) never runs.
+@use 'styles/tokens/light';
+@use 'styles/tokens/dark';
+@use 'tailwindcss';
+@config '../tailwind.config.js';
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
-@import './theme.scss';
+@import '../node_modules/angular-calendar/css/angular-calendar.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+// Keep Angular's [hidden] bindings stronger than display utilities such as Tailwind's .flex.
+[hidden] {
+  display: none !important;
+}
+
+$main-view-top-padding: 30px;
+$main-view-bottom-padding: $main-view-top-padding;
+
+$main-view-max-height: calc((var(--vh, 1vh) * (100)) - 85px);
+
+// This is the new Angular Material 3 theme file which we will migrate to
+// @use './styles/m3-theme.scss';
+
+// this is a pre-defined green palette for testing.
+// $theme: mat.define-theme((
+//   color: (
+//     theme-type: light,
+//     primary: mat.$spring-green-palette,
+//   ),
+//   typography: (
+//     brand-family: 'Grotesk',
+//     bold-weight: 900
+
+//   ),
+//   density: (
+//     scale: -1
+//   )
+// ));
+
+// html {
+//   @include mat.all-component-themes($theme);
+// }
 
 .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field
   .mdc-notched-outline__notch {
@@ -28,10 +68,48 @@
 
   &.selectable {
     .mat-mdc-row:hover .mat-mdc-cell {
-      background-color: rgb(243, 243, 243);
+      background-color: var(--ot-color-hover);
     }
     .mat-mdc-row .mat-mdc-cell {
       cursor: pointer;
     }
   }
 }
+
+.table-selectable {
+  .mat-mdc-row:hover .mat-mdc-cell {
+    background-color: var(--ot-color-hover);
+  }
+  .mat-mdc-row .mat-mdc-cell {
+    cursor: pointer;
+  }
+}
+
+.mat-mdc-progress-spinner circle,
+.mat-spinner circle {
+  stroke: #ddd !important;
+}
+
+/* Ensures smooth resizing of task list in project dashboard */
+body.split-pane-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+body.split-pane-resizing iframe,
+body.split-pane-resizing object,
+body.split-pane-resizing embed,
+body.split-pane-resizing pdf-viewer {
+  pointer-events: none !important;
+}
+
+.mat-badge-accent .mat-badge-content {
+  color: white;
+}
+
+// SPIKE (THM-M01): page frame follows the resolved theme in dark. The Material
+// dark theme (theme.scss) handles component chrome; this covers the raw body.
+:root[data-ot-theme='dark'] body {
+  background-color: var(--ot-color-page);
+  color: var(--ot-color-text);
+}
diff --git a/src/styles/common/center-full-screen.scss b/src/styles/common/center-full-screen.scss
deleted file mode 100644
index 0ddbddf36d..0000000000
--- a/src/styles/common/center-full-screen.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-//
-// Ensures an element takes up the full screen and centered
-//
-.center-full-screen {
-  @include flex-center;
-  @media (min-width: $screen-sm) {
-    height: 100vh;
-  }
-}
diff --git a/src/styles/common/doubtfire-cards.scss b/src/styles/common/doubtfire-cards.scss
deleted file mode 100644
index 6646ba5a2c..0000000000
--- a/src/styles/common/doubtfire-cards.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-
-@mixin doubtfire-card {
-  border-radius: 10px;
-}
-
-.mat-mdc-card.danger-card {
-  @include doubtfire-card();
-}
diff --git a/src/styles/common/extensions/col-xl.scss b/src/styles/common/extensions/col-xl.scss
deleted file mode 100644
index 2b1c99052e..0000000000
--- a/src/styles/common/extensions/col-xl.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-// From https://gist.github.com/juukie/d71133e69877b46f060e
-
-$screen-xl:                  1560px !default;
-$screen-xl-min:              $screen-xl !default;
-$screen-xl-desktop:          $screen-xl-min !default;
-$screen-lg-max:              ($screen-xl-min - 1) !default;
-$container-xlarge-desktop:   (1530px + $grid-gutter-width) !default;
-$container-xl:               $container-xlarge-desktop !default;
-
-.container {
-  // @include container-fixed; No need for, already done.
-  @media (min-width: $screen-xl-min) {
-    width: $container-xl;
-  }
-}
-
-// xLarge grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
-
-@media (min-width: $screen-xl-min) {
-  @include make-grid(xl);
-}
-
-// Generate the xlarge columns
-@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left:  ($gutter / 2);
-  padding-right: ($gutter / 2);
-
-  @media (min-width: $screen-xl-min) {
-    float: left;
-    width: percentage(($columns / $grid-columns));
-  }
-}
-@mixin make-xl-column-offset($columns) {
-  @media (min-width: $screen-xl-min) {
-    margin-left: percentage(($columns / $grid-columns));
-  }
-}
-@mixin make-xl-column-push($columns) {
-  @media (min-width: $screen-xl-min) {
-    left: percentage(($columns / $grid-columns));
-  }
-}
-@mixin make-xl-column-pull($columns) {
-  @media (min-width: $screen-xl-min) {
-    right: percentage(($columns / $grid-columns));
-  }
-}
-
-@mixin make-grid-columns($i: 1, $list: ".col-xl-#{$i}") {
-  @for $i from (1 + 1) through $grid-columns {
-    $list: "#{$list}, .col-xl-#{$i}";
-  }
-  #{$list} {
-    position: relative;
-    // Prevent columns from collapsing when empty
-    min-height: 1px;
-    // Inner gutter via padding
-    padding-left:  ($grid-gutter-width / 2);
-    padding-right: ($grid-gutter-width / 2);
-  }
-}
-
-@include make-grid-columns;
-
-@include responsive-invisibility('.visible-xl');
-
-.visible-xl-block,
-.visible-xl-inline,
-.visible-xl-inline-block {
-  display: none !important;
-}
-
-@media (min-width: $screen-xl-min) {
-  @include responsive-invisibility('.visible-lg');
-  @include responsive-visibility('.visible-xl');
-}
-.visible-xl-block {
-  @media (min-width: $screen-xl-min) {
-    display: block !important;
-  }
-}
-.visible-xl-inline {
-  @media (min-width: $screen-xl-min) {
-    display: inline !important;
-  }
-}
-.visible-xl-inline-block {
-  @media (min-width: $screen-xl-min) {
-    display: inline-block !important;
-  }
-}
-
-@media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
-  @include responsive-invisibility('.hidden-lg');
-}
-
-@media (min-width: $screen-xl-min) {
-  @include responsive-invisibility('.hidden-xl');
-  @include responsive-visibility('.hidden-lg');
-
-  .visible-lg-block,
-  .visible-lg-inline,
-  .visible-lg-inline-block {
-    display: none !important;
-  }
-}
diff --git a/src/styles/common/extensions/fa-document-o.scss b/src/styles/common/extensions/fa-document-o.scss
deleted file mode 100644
index 3427b08681..0000000000
--- a/src/styles/common/extensions/fa-document-o.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Alias for .fa-file-pdf-o
-.#{$fa-css-prefix}-file-document-o:before { content: $fa-var-file-pdf-o; }
diff --git a/src/styles/common/extensions/panel-footer-toolbar.scss b/src/styles/common/extensions/panel-footer-toolbar.scss
deleted file mode 100644
index 325dc960c8..0000000000
--- a/src/styles/common/extensions/panel-footer-toolbar.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.panel .panel-footer 
-{
-  // With buttons in a small screen
-  @media (max-width: $screen-sm) 
-  {
-    // Increase tapping area
-    & > * 
-    {
-      width: 100%;
-    }
-    .btn-group,
-    .btn,
-    input 
-    {
-      height: 4em;
-      width: 100%;
-    }
-    .btn 
-    {
-      margin-top: 1em;
-    }
-    ul.pagination 
-    {
-      margin-top: 1em;
-      width: 100%;
-      flex: 1;
-      display: flex;
-      overflow: auto;
-      li 
-      {
-        flex: 1;
-      }
-      li > a 
-      {
-        width: 100%;
-        height: 4em;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-}
diff --git a/src/styles/common/extensions/panel-heading-toolbar.scss b/src/styles/common/extensions/panel-heading-toolbar.scss
deleted file mode 100644
index d3a2e6621c..0000000000
--- a/src/styles/common/extensions/panel-heading-toolbar.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// For all panel headings
-.panel .panel-heading {
-  // With buttons in a small screen
-  @media (max-width: $screen-sm) {
-    // Increase tapping area
-    & > * {
-      width: 100%;
-    }
-    .btn-group, .btn, input {
-      height: 4em;
-      width: 100%;
-    }
-  }
-  .toolbar {
-    @media (max-width: $screen-sm) {
-      margin: 1.5em auto;
-      width: 100%;
-      text-align: left;
-    }
-    .btn-group, .buttons > .btn {
-      @media (min-width: $screen-sm-max) {
-        margin-right: 1ex;
-      }
-    }
-    .buttons {
-      float: right;
-      @media (max-width: $screen-sm) {
-        width: 100%;
-        .btn-group {
-          margin-top: 1em;
-          display: flex;
-          float: left;
-          float: right;
-          clear: both;
-          .btn {
-            flex: 1
-          }
-          .btn {
-            @include flex-center;
-          }
-        }
-      }
-    }
-    form[role="search"] {
-      float: right;
-      margin-right: 1.5ex;
-      @media (max-width: $screen-sm) {
-        margin-right: 0;
-        width: 100%;
-        margin-top: 1em;
-        padding: 0 !important;
-      }
-    }
-  }
-}
diff --git a/src/styles/common/extensions/pointer.scss b/src/styles/common/extensions/pointer.scss
deleted file mode 100644
index 88a143e2c3..0000000000
--- a/src/styles/common/extensions/pointer.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-//
-// All anchors are pointers, as well as anything with the .pointer class
-//
-a, .pointer {
-  cursor: pointer;
-}
diff --git a/src/styles/common/extensions/strong.scss b/src/styles/common/extensions/strong.scss
deleted file mode 100644
index bb400cbf84..0000000000
--- a/src/styles/common/extensions/strong.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-//
-// Strong font weight using a .strong class
-//
-.strong {
-  font-weight: bold;
-}
diff --git a/src/styles/common/five-cols.scss b/src/styles/common/five-cols.scss
deleted file mode 100644
index 8ce22d31a0..0000000000
--- a/src/styles/common/five-cols.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.col-xs-15 {
-    width: 20%;
-    float: left;
-}
-
-@media (min-width: 768px) {
-.col-sm-15 {
-        width: 20%;
-        float: left;
-    }
-}
-
-@media (min-width: 992px) {
-    .col-md-15 {
-        width: 20%;
-        float: left;
-    }
-}
-
-@media (min-width: 1200px) {
-    .col-lg-15 {
-        width: 20%;
-        float: left;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/common/grade-colors.scss b/src/styles/common/grade-colors.scss
deleted file mode 100644
index 61a6a0f8c4..0000000000
--- a/src/styles/common/grade-colors.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// Colors for associated grades
-//
-// ********************************************************
-// IMPORTANT: Grade colours must also be matched
-// in the grade-service.coffee file
-// ********************************************************
-//
-
-$grade-color-p:  darken(#FF0000, 10%);
-$grade-color-c:  darken(#FF8000, 5%);
-$grade-color-d:  darken(#0080FF, 10%);
-$grade-color-hd: darken(#80FF00, 15%);
diff --git a/src/styles/common/hero-sidebar-layout.scss b/src/styles/common/hero-sidebar-layout.scss
index ab2213bcab..cae2d9e32d 100644
--- a/src/styles/common/hero-sidebar-layout.scss
+++ b/src/styles/common/hero-sidebar-layout.scss
@@ -4,17 +4,19 @@
 
 .welcome-heading {
   margin-bottom: 30px;
-  color: black;
+  // THM-M01: was hardcoded black, invisible in dark. Text token resolves to the
+  // same near-black in light and flips with the marker.
+  color: var(--ot-color-text, #000);
   font-size: 24px;
 }
 
-.subcontainer {
+.content-panel {
   overflow-y: hidden;
   height: auto;
   padding-top: 42px;
 
   p {
-    color: black;
+    color: var(--ot-color-text, #000);
   }
 
   img: {
@@ -42,14 +44,14 @@ h1 {
     margin-left: 8px;
     font-family: 'Grotesk';
     font-size: 2em;
-    color: black;
+    color: var(--ot-color-text, #000);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 }
 
-f-sign-in .container,
-f-welcome .container {
+f-sign-in .content-container,
+f-welcome .content-container {
   max-width: 416px;
   width: 100%;
   margin: auto;
@@ -77,7 +79,7 @@ f-welcome .container {
   .sidebar {
     display: none; /* Hide the element */
   }
-  .wordmark{
+  .wordmark {
     display: flex; /* Show the element */
   }
 }
diff --git a/src/styles/common/overrides/badge-overrides.scss b/src/styles/common/overrides/badge-overrides.scss
deleted file mode 100644
index 32057cdf12..0000000000
--- a/src/styles/common/overrides/badge-overrides.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// Overrides for all badges
-//
-.badge {
-  border-radius: 1em;
-  text-align: center;
-  display: inline-block;
-}
diff --git a/src/styles/common/overrides/body-overrides.scss b/src/styles/common/overrides/body-overrides.scss
deleted file mode 100644
index c2b92ccf27..0000000000
--- a/src/styles/common/overrides/body-overrides.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Overrides for the body (i.e., global overrdies)
-//
-$main-view-top-padding: 30px;
-$main-view-bottom-padding: $main-view-top-padding;
-
-$main-view-max-height: calc((var(--vh, 1vh) * (100)) - 85px);
-
-/* override browser default */
-html,
-body {
-  margin: 0;
-  padding: 0;
-  // background-color: #f5f5f5;
-}
-
-/* use viewport-relative units to cover page fully */
-body {
-  height: 100vh;
-  height: $main-view-max-height;
-  width: 100vw;
-  // font-family: 'Roboto', Helvetica;
-  // font-size: 1.2em;
-  // line-height: 2;
-  // font-weight: normal;
-}
-
-/* include border and padding in element width and height */
-* {
-  box-sizing: border-box;
-}
-
-// body>[ui-view="header"]:not(:empty)+[ui-view="main"] {
-//   padding-top: $main-view-top-padding;
-//   padding-bottom: $main-view-bottom-padding;
-// }
diff --git a/src/styles/common/overrides/header-overrides.scss b/src/styles/common/overrides/header-overrides.scss
deleted file mode 100644
index 970bfd5e06..0000000000
--- a/src/styles/common/overrides/header-overrides.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// Sets all font weights to the headers as 400
-//
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 400;
-}
diff --git a/src/styles/common/overrides/label-overrides.scss b/src/styles/common/overrides/label-overrides.scss
deleted file mode 100644
index 3280c214cb..0000000000
--- a/src/styles/common/overrides/label-overrides.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-//
-// Overrides for the font size to make labels larger
-//
-.label {
-  font-size: 100% !important;
-}
-
-.label.label-unit {
-  @include label-variant($label-info-bg);
-  margin-right: 1ex;
-}
diff --git a/src/styles/common/overrides/nav-tabs-overrides.scss b/src/styles/common/overrides/nav-tabs-overrides.scss
deleted file mode 100644
index 8a20557cf2..0000000000
--- a/src/styles/common/overrides/nav-tabs-overrides.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// Override nav tabs's content to be separated
-//
-.nav.nav-tabs + .tab-content {
-  margin-top: 1.5em;
-}
-
-// Support badges in nav pills
-.nav.nav-pills tab-heading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .comment-count {
-    margin-left: 1ex;
-  }
-}
diff --git a/src/styles/common/overrides/nvd3-graph-overrides.scss b/src/styles/common/overrides/nvd3-graph-overrides.scss
deleted file mode 100644
index 108d0fe58a..0000000000
--- a/src/styles/common/overrides/nvd3-graph-overrides.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-//
-// Override to center all nvd3 SVGs
-//
-svg.nvd3-svg {
-  margin: 0 auto;
-}
diff --git a/src/styles/common/overrides/panel-overrides.scss b/src/styles/common/overrides/panel-overrides.scss
deleted file mode 100644
index 28506f7d48..0000000000
--- a/src/styles/common/overrides/panel-overrides.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-//
-// Global overrides for panels
-//
-.panel-footer .pagination, .modal-footer .pagination {
-  margin: 0;
-}
-
-.panel-body + .panel-heading, .panel-body + * > .panel-heading {
-  border-top: 1px solid #ddd !important;
-  border-radius: 0 !important;
-}
-
-.panel-heading > .pull-left {
-  padding-left: 0 !important; // Override for col-sm-*
-}
-.panel-heading > .pull-right {
-  padding-right: 0 !important; // Override for col-sm-*
-}
-
-@mixin panel-row {
-  display: flex;
-  .panel {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-  .panel > *:not(.panel-heading):not(.panel-footer):not(.panel-toolbar) {
-    flex: 1;
-  }
-  .panel-heading, .panel-body, .panel-footer {
-    width: 100%;
-  }
-  .panel + .panel {
-    margin-left: $panel-body-padding;
-  }
-  // Panels with file dropzones
-  .panel-footer .well {
-    background-color: #fff;
-  }
-  .panel h3.file-title {
-    margin-top: 0;
-    font-size: 1em;
-  }
-  .panel .drop.well, .panel .file-uploader {
-    margin: 0;
-  }
-}
-.panel-row {
-  @include panel-row();
-}
-
-// New panel loading panel
-.panel-body.panel-loading {
-  @extend .text-muted;
-  @extend .text-center;
-  @extend .strong;
-  font-size: 1.3em;
-  padding-top: $panel-body-padding * 4;
-  padding-bottom: $panel-body-padding * 4;
-  i {
-    margin-right: 0.9ex;
-  }
-}
-
-.panel.panel-scrollable {
-  overflow: hidden;
-  .panel-body {
-    overflow: scroll;
-    height: 100%;
-    padding-bottom: $panel-body-padding * 3;
-  }
-}
-
-// Search options panel
-.panel-body.panel-collapseable {
-  background-color: lighten($gray-lighter, 2%);
-}
-
-// Two panel bodies next to eachother (include those with one nested in custom element)
-.panel-body:not(.ng-hide) + * > .panel-body, .panel-body:not(.ng-hide) + .panel-body {
-  padding-top: 0;
-}
-// Remove extra margin for callouts in padding
-.panel-body > .callout:first-child {
-  margin-top: 0;
-}
-.panel-body > .callout:last-child {
-  margin-bottom: 0;
-}
-
-// Full screen set of panels
-.panel-full-screen {
-  height: $main-view-max-height;
-  & > *, & > * > .panel {
-    height: 100%;
-  }
-}
-
-.panel-marking-context {
-  padding: 0;
-  .panel {
-    margin: 0;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-  }
-  .panel-submission-marking-context .panel-body {
-    padding: 60px;
-  }
-}
-
-.panel.panel-pdf {
-  @include flex-panel;
-  .panel-body.has-pdf {
-    padding: 0;
-    position: relative;
-  }
-}
\ No newline at end of file
diff --git a/src/styles/common/overrides/rating-overrides.scss b/src/styles/common/overrides/rating-overrides.scss
deleted file mode 100644
index a5986acf8f..0000000000
--- a/src/styles/common/overrides/rating-overrides.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// The generated <rating> from ui-bootstrap becomes this
-span[role="slider"] {
-  outline: none;
-}
-.rating-outline {
-  color: lighten($brand-warning, 30%);
-  -webkit-text-stroke-width: 1px;
-  -webkit-text-stroke-color: $brand-warning;
-}
-.rating-disabled {
-  color: lighten($text-muted, 30%);
-}
diff --git a/src/styles/common/overrides/table-overrides.scss b/src/styles/common/overrides/table-overrides.scss
deleted file mode 100644
index 4a9d444e8c..0000000000
--- a/src/styles/common/overrides/table-overrides.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-//
-// Global overrides for tables
-//
-table.table-pointer {
-  tr {
-    cursor: pointer;
-  }
-}
-
-table > tbody > tr {
-  & > td, & > th {
-    vertical-align: middle !important;
-  }
-}
diff --git a/src/styles/common/task-status-colors.scss b/src/styles/common/task-status-colors.scss
index 82320d524b..be4b37f690 100644
--- a/src/styles/common/task-status-colors.scss
+++ b/src/styles/common/task-status-colors.scss
@@ -1,9 +1,11 @@
+@use 'sass:color';
+
 //
 // Colours for task statuses
 //
 // ********************************************************
 // IMPORTANT: Task status colours must also be matched
-// in the task-service.coffee file
+// in the task-status.ts file
 // ********************************************************
 //
 
@@ -14,74 +16,92 @@ $task-status-foreground-color-dark: #444;
 $task-status-colors: (
   ready-for-feedback: (
     base: #0079d8,
-    dark: darken(#0079d8, 15%),
-    light: lighten(#0079d8, 15%),
+    dark: color.adjust(#0079d8, $lightness: -15%),
+    light: color.adjust(#0079d8, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   not-started: (
     base: #cccccc,
-    dark: darken(#cccccc, 15%),
-    light: lighten(#cccccc, 15%),
+    dark: color.adjust(#cccccc, $lightness: -15%),
+    light: color.adjust(#cccccc, $lightness: 15%),
     fore: $task-status-foreground-color-dark,
   ),
   working-on-it: (
     base: #eb8f06,
-    dark: darken(#eb8f06, 15%),
-    light: lighten(#eb8f06, 15%),
+    dark: color.adjust(#eb8f06, $lightness: -15%),
+    light: color.adjust(#eb8f06, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   need-help: (
     base: #a48fce,
-    dark: darken(#a48fce, 15%),
-    light: lighten(#a48fce, 15%),
+    dark: color.adjust(#a48fce, $lightness: -15%),
+    light: color.adjust(#a48fce, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   fix-and-resubmit: (
     base: #f2d85c,
-    dark: darken(#f2d85c, 15%),
-    light: lighten(#f2d85c, 15%),
+    dark: color.adjust(#f2d85c, $lightness: -15%),
+    light: color.adjust(#f2d85c, $lightness: 15%),
     fore: $task-status-foreground-color-dark,
   ),
   feedback-exceeded: (
     base: #d46b54,
-    dark: darken(#d46b54, 15%),
-    light: lighten(#d46b54, 15%),
+    dark: color.adjust(#d46b54, $lightness: -15%),
+    light: color.adjust(#d46b54, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   redo: (
     base: #804000,
-    dark: darken(#804000, 15%),
-    light: lighten(#804000, 15%),
+    dark: color.adjust(#804000, $lightness: -15%),
+    light: color.adjust(#804000, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   discuss: (
     base: #31b0d5,
-    dark: darken(#31b0d5, 15%),
-    light: lighten(#31b0d5, 15%),
+    dark: color.adjust(#31b0d5, $lightness: -15%),
+    light: color.adjust(#31b0d5, $lightness: 15%),
+    fore: $task-status-foreground-color-light,
+  ),
+  rediscuss: (
+    base: #126352,
+    dark: color.adjust(#126352, $lightness: -15%),
+    light: color.adjust(#126352, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   demonstrate: (
     base: #428bca,
-    dark: darken(#428bca, 15%),
-    light: lighten(#428bca, 15%),
+    dark: color.adjust(#428bca, $lightness: -15%),
+    light: color.adjust(#428bca, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   complete: (
     base: #5bb75b,
-    dark: darken(#5bb75b, 20%),
-    light: lighten(#5bb75b, 15%),
+    dark: color.adjust(#5bb75b, $lightness: -20%),
+    light: color.adjust(#5bb75b, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   fail: (
     base: #d93713,
-    dark: darken(#d93713, 15%),
-    light: lighten(#d93713, 15%),
+    dark: color.adjust(#d93713, $lightness: -15%),
+    light: color.adjust(#d93713, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
   time-exceeded: (
     base: #d93713,
-    dark: darken(#d93713, 15%),
-    light: lighten(#d93713, 15%),
+    dark: color.adjust(#d93713, $lightness: -15%),
+    light: color.adjust(#d93713, $lightness: 15%),
+    fore: $task-status-foreground-color-light,
+  ),
+  assess-in-portfolio: (
+    base: #f2d85c,
+    dark: color.adjust(#f2d85c, $lightness: -15%),
+    light: color.adjust(#f2d85c, $lightness: 15%),
+    fore: $task-status-foreground-color-dark,
+  ),
+  attention-required: (
+    base: #f1814d,
+    dark: color.adjust(#f1814d, $lightness: -15%),
+    light: color.adjust(#f1814d, $lightness: 15%),
     fore: $task-status-foreground-color-light,
   ),
 );
diff --git a/src/styles/common/text.scss b/src/styles/common/text.scss
deleted file mode 100644
index 9b97f6c291..0000000000
--- a/src/styles/common/text.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.with-icon {
-  display: flex;
-  align-items: center;
-}
\ No newline at end of file
diff --git a/src/styles/common/typeface.scss b/src/styles/common/typeface.scss
index d31e2038a5..c45e90c1aa 100644
--- a/src/styles/common/typeface.scss
+++ b/src/styles/common/typeface.scss
@@ -1,54 +1,75 @@
 // TODO: Evaluate when this file can be removed
 
-$roboto-path: './fonts/roboto';
+$roboto-path: '/assets/fonts/roboto';
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('#{$roboto-path}/Roboto-Light.woff') format('woff');
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url('#{$roboto-path}/Roboto-Light.woff') format('woff');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('#{$roboto-path}/Roboto-Regular.woff') format('woff');
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url('#{$roboto-path}/Roboto-Regular.woff') format('woff');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('#{$roboto-path}/Roboto-Medium.woff') format('woff');
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url('#{$roboto-path}/Roboto-Medium.woff') format('woff');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('#{$roboto-path}/Roboto-Bold.woff') format('woff');
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url('#{$roboto-path}/Roboto-Bold.woff') format('woff');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'), url('#{$roboto-path}/Roboto-Italic.woff') format('woff');
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url('#{$roboto-path}/Roboto-Italic.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Grotesk';
   font-style: normal;
-  src: local('Grotesk'), url(/assets/fonts/grotesk/grotesk-regular.otf) format('opentype');
+  src:
+    local('Grotesk'),
+    url(/assets/fonts/grotesk/grotesk-regular.otf) format('opentype');
 }
 
 @font-face {
   font-family: 'Grotesk';
   font-style: italic;
-  src: local('Grotesk'), url(/assets/fonts/grotesk/grotesk-italic.otf) format('opentype');
+  src:
+    local('Grotesk'),
+    url(/assets/fonts/grotesk/grotesk-italic.otf) format('opentype');
 }
 
 @font-face {
   font-family: 'Grotesk';
   font-style: bold;
-  src: local('Grotesk'), url(/assets/fonts/grotesk/grotesk-bold.otf) format('opentype');
+  src:
+    local('Grotesk'),
+    url(/assets/fonts/grotesk/grotesk-bold.otf) format('opentype');
 }
 
 .mat-icon {
diff --git a/src/styles/config/font-awesome.scss b/src/styles/config/font-awesome.scss
deleted file mode 100644
index 87945b4a94..0000000000
--- a/src/styles/config/font-awesome.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// This config file provides overrides for bootstrap and is injected before
-// font awesome is imported
-//
-
-// Provide the font path to the fa-fonts
-$fa-font-path: './fonts/font-awesome';
diff --git a/src/styles/m3-theme.scss b/src/styles/m3-theme.scss
new file mode 100644
index 0000000000..1e094b5f2f
--- /dev/null
+++ b/src/styles/m3-theme.scss
@@ -0,0 +1,177 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #3939FF
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #05006d,
+    20: #33314e,
+    25: #1100cb,
+    30: #1702eb,
+    35: #2a26f5,
+    40: #3b3bff,
+    50: #5e62ff,
+    60: #7f84ff,
+    70: #9fa3ff,
+    80: #c0c1ff,
+    90: #e1e0ff,
+    95: #f1efff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #191a2c,
+    20: #2e2f42,
+    25: #393a4d,
+    30: #454559,
+    35: #505165,
+    40: #5d5d72,
+    50: #75758b,
+    60: #8f8fa5,
+    70: #aaa9c1,
+    80: #c5c4dd,
+    90: #e2e0f9,
+    95: #f1efff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #2e1125,
+    20: #46263b,
+    25: #523146,
+    30: #5f3c52,
+    35: #6c475e,
+    40: #79536a,
+    50: #936b83,
+    60: #af849d,
+    70: #cb9eb8,
+    80: #e8b9d4,
+    90: #ffd8ed,
+    95: #ffecf4,
+    98: #fff8f9,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1c1b1f,
+    20: #313034,
+    25: #3c3b3f,
+    30: #47464a,
+    35: #535256,
+    40: #5f5e62,
+    50: #78767a,
+    60: #929094,
+    70: #adaaaf,
+    80: #c8c5ca,
+    90: #e5e1e6,
+    95: #f3eff4,
+    98: #fcf8fd,
+    99: #fffbff,
+    100: #ffffff,
+    4: #0e0e11,
+    6: #131316,
+    12: #201f23,
+    17: #2a292d,
+    22: #353438,
+    24: #39393c,
+    87: #dcd9de,
+    92: #eae7ec,
+    94: #f0edf1,
+    96: #f6f2f7,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1b1b23,
+    20: #303038,
+    25: #3b3b43,
+    30: #46464f,
+    35: #52515b,
+    40: #5e5d67,
+    50: #777680,
+    60: #918f9a,
+    70: #acaab4,
+    80: #c7c5d0,
+    90: #e4e1ec,
+    95: #f2effa,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: $_primary,
+      tertiary: $_tertiary,
+      use-system-variables: true,
+      system-variables-prefix: sys,
+    ),
+    typography: (
+      use-system-variables: true,
+      system-variables-prefix: sys,
+      plain-family: "Inter, 'open-sans', 'Roboto'",
+      brand-family: "'Grotesk'",
+      bold-weight: 900,
+      medium-weight: 500,
+      regular-weight: 300,
+    ),
+  )
+);
+$dark-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: dark,
+      primary: $_primary,
+      tertiary: $_tertiary,
+      use-system-variables: true,
+      system-variables-prefix: sys,
+    ),
+    typography: (
+      use-system-variables: true,
+      system-variables-prefix: sys,
+      plain-family: "Inter, 'open-sans', 'Roboto'",
+      brand-family: "'Grotesk'",
+      bold-weight: 900,
+      medium-weight: 500,
+      regular-weight: 300,
+    ),
+  )
+);
diff --git a/src/styles/mixins/animations/fade-in.scss b/src/styles/mixins/animations/fade-in.scss
deleted file mode 100644
index 9bf65d7f79..0000000000
--- a/src/styles/mixins/animations/fade-in.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-//
-// A fade in animation
-//
-@keyframes animation-fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-@mixin animation-fade-in($seconds) {
-  animation: animation-fade-in $seconds;
-}
diff --git a/src/styles/mixins/animations/grow.scss b/src/styles/mixins/animations/grow.scss
deleted file mode 100644
index 73222c87c6..0000000000
--- a/src/styles/mixins/animations/grow.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-//
-// Grow animation from 0 scale to 1 scale
-//
-@keyframes animation-grow {
-  0% {
-    opacity: 0;
-    transform: scale(.3);
-  }
-
-  50% {
-    opacity: 1;
-    transform: scale(1.05);
-  }
-
-  70% {
-    transform: scale(.9);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-@mixin animation-grow($time: 0.5s) {
-  animation-name: animation-grow;
-  animation-duration: $time;
-  animation-fill-mode: both;
-}
diff --git a/src/styles/mixins/animations/slide-down.scss b/src/styles/mixins/animations/slide-down.scss
deleted file mode 100644
index cf741fc82b..0000000000
--- a/src/styles/mixins/animations/slide-down.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-//
-// Slide animation from -2em to initial top
-//
-@keyframes animation-slide-down {
-  from { margin-top: -2em; }
-  to   { margin-top: inherit; }
-}
-@mixin animation-slide-down($seconds) {
-  animation: animation-slide-down $seconds;
-}
diff --git a/src/styles/mixins/animations/wobble.scss b/src/styles/mixins/animations/wobble.scss
deleted file mode 100644
index 89f12fa8f3..0000000000
--- a/src/styles/mixins/animations/wobble.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-//
-// Animation to wobble an element side to side
-//
-@keyframes animation-wobble {
-    0%, 100% { transform: translateX(+5px); }
-    25%, 75% { transform: translateX(0); }
-         50% { transform: translateX(-5px); }
-}
-
-@mixin animation-wobble {
-  animation-duration: 1s;
-  animation-fill-mode: both;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count:infinite;
-  animation-name: animation-wobble;
-}
-
-//
-// Animation to wobble an element side but only once
-//
-@keyframes animation-wobble-once {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(+5px); }
-  75% { transform: translateX(-5px); }
-}
-
-@mixin animation-wobble-once {
-  animation-duration: 0.15s;
-  animation-fill-mode: both;
-  animation-iteration-count: 2;
-  animation-name: animation-wobble-once;
-}
diff --git a/src/styles/mixins/callout.scss b/src/styles/mixins/callout.scss
deleted file mode 100644
index dd7689f76e..0000000000
--- a/src/styles/mixins/callout.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-//
-// A callout
-//
-@mixin callout($color, $bgcolor: lighten($color, 35%)) {
-    display: block;
-    margin: 20px 0;
-    padding: 15px 30px 15px 15px;
-    border-left: 5px solid $color;
-    background-color: $bgcolor;
-    h1, h2, h3, h4, h5, h6 {
-        margin-top: 0;
-        color: $color;
-    }
-    p:last-child {
-        margin-bottom: 0;
-    }
-    code, .highlight {
-        background-color: #fff;
-    }
-}
diff --git a/src/styles/mixins/dropdown-selector.scss b/src/styles/mixins/dropdown-selector.scss
deleted file mode 100644
index 01036b0cca..0000000000
--- a/src/styles/mixins/dropdown-selector.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@mixin dropdown-selector {
-  height: 100%;
-  padding-left: 0px;
-  padding-right: 0px;
-  // first button
-  & > button {
-    height: 100%;
-    width: 100%;
-    label, i {
-      text-align: center;
-    }
-    label {
-      font-size: 1.5em;
-      margin: 0px;
-    }
-    label.label.label-info {
-      font-size: 1em;
-      margin-left: 0.5ex;
-      cursor: pointer;
-    }
-    // not a split button group
-    span.caret {
-      margin-left: 1ex;
-    }
-  }
-  // open button
-  &.open > button {
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-  }
-  // menu underneath
-  .dropdown-menu {
-    margin-top: 0px;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-    @media (max-width: $screen-sm) {
-      position: relative;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      top: 0;
-      width: 100%;
-    }
-  }
-}
-
-.dropdown-selector {
-  @include dropdown-selector;
-}
diff --git a/src/styles/mixins/flex-center.scss b/src/styles/mixins/flex-center.scss
deleted file mode 100644
index e741a95c92..0000000000
--- a/src/styles/mixins/flex-center.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-//
-// Uses flex to align the div contents in the center
-//
-@mixin flex-center {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  height: 100%;
-}
diff --git a/src/styles/mixins/flex-panel.scss b/src/styles/mixins/flex-panel.scss
deleted file mode 100644
index a74cd163fd..0000000000
--- a/src/styles/mixins/flex-panel.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@mixin flex-panel {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  .panel-body {
-    flex: 1;
-  }
-}
diff --git a/src/styles/mixins/large-notice-block.scss b/src/styles/mixins/large-notice-block.scss
deleted file mode 100644
index 7f138f6551..0000000000
--- a/src/styles/mixins/large-notice-block.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-//
-// A large notice block is a large text with an icon
-//
-@mixin large-notice-block {
-  @include flex-center;
-  font-size: 2em;
-  text-align: center;
-  font-weight: 300;
-  & > * {
-    display: block;
-    width: 100%;
-    margin-top: 0.75em;
-    margin-bottom: 0.75em;
-  }
-  &.panel-body {
-    padding: 30px;
-  }
-}
-
-.large-notice-block {
-  @include large-notice-block;
-}
diff --git a/src/styles/mixins/logo-font-rendering.scss b/src/styles/mixins/logo-font-rendering.scss
deleted file mode 100644
index 68624bc823..0000000000
--- a/src/styles/mixins/logo-font-rendering.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-//
-// Font rendering for the DF logo
-//
-
-@mixin logo-font-rendering {
-  -webkit-font-smoothing: antialiased;
-  letter-spacing: -1px;
-  font-weight: 300;
-}
diff --git a/src/styles/mixins/no-select.scss b/src/styles/mixins/no-select.scss
deleted file mode 100644
index cb2ed50433..0000000000
--- a/src/styles/mixins/no-select.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@mixin no-select {
-  user-select: none;
-  cursor: default;
-}
diff --git a/src/styles/mixins/remove-list-padding.scss b/src/styles/mixins/remove-list-padding.scss
deleted file mode 100644
index 1b5a1b0690..0000000000
--- a/src/styles/mixins/remove-list-padding.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@mixin remove-list-padding {
-  -webkit-padding-start: 0;
-  padding-left: 0;
-}
diff --git a/src/styles/mixins/task-list.scss b/src/styles/mixins/task-list.scss
index 7709d87fea..f89e866b82 100644
--- a/src/styles/mixins/task-list.scss
+++ b/src/styles/mixins/task-list.scss
@@ -1,5 +1,6 @@
-@import './task-status-colors-generator.scss';
-@import '../common/variables.scss';
+@use 'sass:color';
+@use 'styles/mixins/task-status-colors-generator' as *;
+@use 'styles/common/variables' as *;
 
 @mixin custom-box-shadow($color) {
   box-shadow: -15px 0 $color inset;
@@ -43,40 +44,60 @@
       text-decoration: none;
       // background-color: $list-group-hover-bg;
       &.ready-for-feedback {
-        @include custom-box-shadow(lighten(task-status-color('ready-for-feedback'), 15%));
+        @include custom-box-shadow(
+          color.adjust(task-status-color('ready-for-feedback'), $lightness: 15%)
+        );
       }
       &.not-started {
-        @include custom-box-shadow(lighten(task-status-color('not-started'), 5%));
+        @include custom-box-shadow(color.adjust(task-status-color('not-started'), $lightness: 5%));
       }
       &.working-on-it {
-        @include custom-box-shadow(lighten(task-status-color('working-on-it'), 15%));
+        @include custom-box-shadow(
+          color.adjust(task-status-color('working-on-it'), $lightness: 15%)
+        );
       }
       &.need-help {
-        @include custom-box-shadow(lighten(task-status-color('need-help'), 15%));
+        @include custom-box-shadow(color.adjust(task-status-color('need-help'), $lightness: 15%));
       }
       &.fix-and-resubmit {
-        @include custom-box-shadow(lighten(task-status-color('fix-and-resubmit'), 15%));
+        @include custom-box-shadow(
+          color.adjust(task-status-color('fix-and-resubmit'), $lightness: 15%)
+        );
       }
       &.feedback-exceeded {
-        @include custom-box-shadow(lighten(task-status-color('feedback-exceeded'), 15%));
+        @include custom-box-shadow(
+          color.adjust(task-status-color('feedback-exceeded'), $lightness: 15%)
+        );
       }
       &.fail {
-        @include custom-box-shadow(lighten(task-status-color('fail'), 15%));
+        @include custom-box-shadow(color.adjust(task-status-color('fail'), $lightness: 15%));
       }
       &.redo {
-        @include custom-box-shadow(lighten(task-status-color('redo'), 15%));
+        @include custom-box-shadow(color.adjust(task-status-color('redo'), $lightness: 15%));
       }
       &.discuss {
-        @include custom-box-shadow(lighten(task-status-color('discuss'), 15%));
+        @include custom-box-shadow(color.adjust(task-status-color('discuss'), $lightness: 15%));
       }
       &.demonstrate {
-        @include custom-box-shadow(lighten(task-status-color('demonstrate'), 15%));
+        @include custom-box-shadow(color.adjust(task-status-color('demonstrate'), $lightness: 15%));
       }
       &.complete {
-        @include custom-box-shadow(lighten(task-status-color('complete'), 15%));
+        @include custom-box-shadow(color.adjust(task-status-color('complete'), $lightness: 15%));
       }
       &.time-exceeded {
-        @include custom-box-shadow(lighten(task-status-color('time-exceeded'), 15%));
+        @include custom-box-shadow(
+          color.adjust(task-status-color('time-exceeded'), $lightness: 15%)
+        );
+      }
+      &.assess-in-portfolio {
+        @include custom-box-shadow(
+          color.adjust(task-status-color('assess-in-portfolio'), $lightness: 15%)
+        );
+      }
+      &.attention-required {
+        @include custom-box-shadow(
+          color.adjust(task-status-color('attention-required'), $lightness: 15%)
+        );
       }
     }
     &.selected {
@@ -116,6 +137,12 @@
       &.time-exceeded {
         @include custom-box-shadow(task-status-color('time-exceeded'));
       }
+      &.assess-in-portfolio {
+        @include custom-box-shadow(task-status-color('assess-in-portfolio'));
+      }
+      &.attention-required {
+        @include custom-box-shadow(task-status-color('attention-required'));
+      }
     }
     .task-badges {
       width: 50px;
@@ -142,6 +169,13 @@
           & + .task-subscript-badge {
             margin-right: -3px;
           }
+          .material-icons,
+          mat-icon {
+            font-size: 12px;
+            height: 12px;
+            line-height: 12px;
+            width: 12px;
+          }
           &.grade-badge {
             background-color: #000000;
             font-size: 9px;
@@ -151,7 +185,7 @@
             font-size: 9px;
           }
           &.soon-badge {
-            background-color: lighten(#eb8f06, 15%);
+            background-color: color.adjust(#eb8f06, $lightness: 15%);
             color: black;
           }
           &.due-badge {
diff --git a/src/styles/mixins/task-status-colors-generator.scss b/src/styles/mixins/task-status-colors-generator.scss
index e37542874a..b351aca6c6 100644
--- a/src/styles/mixins/task-status-colors-generator.scss
+++ b/src/styles/mixins/task-status-colors-generator.scss
@@ -1,4 +1,5 @@
-@import '../common/task-status-colors.scss';
+@use 'sass:map';
+@use 'styles/common/task-status-colors' as *;
 
 //
 // Mixins to use that helps color task statuses
@@ -7,16 +8,16 @@
 @function task-status-color($status, $variant: null) {
   // If variant isn't specified, we get the base by default
   @if $variant == null {
-    @return map-get(map-get($task-status-colors, $status), base);
+    @return map.get(map.get($task-status-colors, $status), base);
   } @else {
-    @return map-get(map-get($task-status-colors, $status), $variant);
+    @return map.get(map.get($task-status-colors, $status), $variant);
   }
 }
 
 @mixin task-status-color($status) {
-  color: task-status-color($status, fore);
+  color: task-status-color($status, fore) !important;
   $base-color: task-status-color($status);
-  background-color: $base-color;
+  background-color: $base-color !important;
   @if $status == 'complete' {
     $lighter-color: task-status-color($status, light);
     @include gradient-vertical($lighter-color, $base-color);
@@ -47,6 +48,9 @@
 @mixin task-status-color-discuss {
   @include task-status-color('discuss');
 }
+@mixin task-status-color-rediscuss {
+  @include task-status-color('rediscuss');
+}
 @mixin task-status-color-demonstrate {
   @include task-status-color('demonstrate');
 }
@@ -59,3 +63,9 @@
 @mixin task-status-color-time-exceeded {
   @include task-status-color('time-exceeded');
 }
+@mixin task-status-color-assess-in-portfolio {
+  @include task-status-color('assess-in-portfolio');
+}
+@mixin task-status-color-attention-required {
+  @include task-status-color('attention-required');
+}
diff --git a/src/styles/modules/callout.scss b/src/styles/modules/callout.scss
deleted file mode 100644
index 6e4ba5f663..0000000000
--- a/src/styles/modules/callout.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-//
-// Callouts used for standout information
-//
-.callout-primary {
-  @include callout($brand-primary, lighten($brand-primary, 45%));
-}
-
-.callout-danger {
-  @include callout($brand-danger, lighten($brand-danger, 30%));
-}
-
-.callout-warning {
-  @include callout($brand-warning, lighten($brand-warning, 30%));
-}
-
-.callout-info {
-  @include callout($brand-info, lighten($brand-info, 30%));
-}
-
-.callout-success {
-  @include callout($brand-success, lighten($brand-success, 30%));
-}
diff --git a/src/styles/modules/cards.scss b/src/styles/modules/cards.scss
deleted file mode 100644
index c6b07da5a9..0000000000
--- a/src/styles/modules/cards.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.card {
-  $card-height-lg: 500px;
-  $card-height-md: $card-height-lg / 2;
-  $card-height-sm: $card-height-md / 2;
-  $card-body-padding: $panel-body-padding;
-  $card-footer-padding: $card-body-padding + 5px;
-  $card-header-padding: $card-body-padding $card-footer-padding;
-
-  margin-bottom: $card-footer-padding;
-  background-color: darken(#fff, 0.75%);
-  transition: box-shadow .25s;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12),
-              0 3px 1px -2px rgba(0, 0, 0, 0.2);
-
-  &.card-default > .card-heading { background-color: $panel-default-heading-bg; }
-  &.card-primary > .card-heading { background-color: $brand-primary; }
-  &.card-danger  > .card-heading { background-color: $brand-danger; }
-  &.card-success > .card-heading { background-color: $brand-success; }
-  &.card-warning > .card-heading { background-color: $brand-warning; }
-  &.card-info    > .card-heading { background-color: $brand-info; }
-  &.card-danger, &.card-success, &.card-warning, &.card-info, &.card-primary {
-    .card-heading {
-      color: #fff;
-      .text-muted {
-        color: darken(#fff, 1%);
-      }
-    }
-  }
-  .card-heading {
-    padding: $card-header-padding;
-    border-bottom: 1px solid rgba(160, 160, 160, 0.2);
-  }
-  .card-body {
-    padding: $card-body-padding;
-  }
-  .card-footer {
-    position: relative;
-    background-color: inherit;
-    padding: $card-footer-padding;
-    border-top: 1px solid rgba(160, 160, 160, 0.2);
-  }
-
-  &.card-lg {
-    min-height: $card-height-lg;
-  }
-  &.card-md {
-    min-height: $card-height-md;
-  }
-  &.card-sm {
-    min-height: $card-height-sm;
-  }
-
-  & > .list-group {
-    margin-bottom: 0;
-    .list-group-item {
-      border-width: 1px 0;
-      border-radius: 0;
-      &:first-child {
-        border-top-width: 0;
-      }
-      &:last-child {
-        border-bottom-width: 0;
-      }
-    }
-  }
-}
diff --git a/src/styles/modules/doubtfire-logo.scss b/src/styles/modules/doubtfire-logo.scss
deleted file mode 100644
index 395918c8e8..0000000000
--- a/src/styles/modules/doubtfire-logo.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-//
-// Styles for the Doubtfire Logo
-//
-
-h1.logo {
-  @include logo-font-rendering;
-  font-size: 4em;
-}
-i.logo {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  background-image: url('/assets/images/logo.svg');
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.welcome-to-doubtfire {
-  margin-top: 6em;
-  margin-bottom: 3em;
-  h1, p {
-    @include logo-font-rendering;
-    font-family: "Grotesk";
-  }
-  p.lead {
-    color: #000;
-  }
-  i.logo {
-    width: 10em;
-    height: 10em;
-  }
-}
diff --git a/src/styles/modules/drilldown-visualiser.scss b/src/styles/modules/drilldown-visualiser.scss
deleted file mode 100644
index 5f382b2719..0000000000
--- a/src/styles/modules/drilldown-visualiser.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-//
-// A drilldown for visualisations to click into graphs and see more
-// about those graphs
-//
-.drilldown-visualiser {
-  .overview-chart {
-    cursor: pointer;
-  }
-  .overview-charts .overview-chart {
-    height: 250px;
-    cursor: pointer;
-    .no-data-to-display {
-      height: 60%;
-      text-align: center;
-      padding-top: 30%;
-      border: 1px dashed #ddd;
-      color: #ddd;
-      border-radius: 1em;
-      margin: 10%;
-    }
-  }
-}
diff --git a/src/styles/modules/panel-fullscreen.scss b/src/styles/modules/panel-fullscreen.scss
deleted file mode 100644
index d9abc44ad3..0000000000
--- a/src/styles/modules/panel-fullscreen.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-//
-// Fullscreen panel mode styles
-//
-.panel.fullscreen {
-  border-radius: 0;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: 0;
-  z-index: 4;
-  border-bottom: none;
-
-  // Flex stuff
-  display: flex;
-  flex-direction: column;
-
-  .panel-heading {
-    border-radius: 0;
-  }
-
-  .panel-body.student-list {
-    height: 20vh;
-    resize: vertical;
-    max-height: 40vh;
-    overflow: scroll;
-    border-bottom: 2px solid #428bca;
-    box-shadow: 1px 1px 3px;
-  }
-  .panel-body.project-show {
-    overflow-y: scroll;
-    flex: 1;
-    position: relative;
-
-    &.no-padding {
-      padding: 0px;
-    }
-
-    .panel, .panel-heading {
-      border-radius: 0;
-    }
-
-    .nothing-selected {
-      @include large-notice-block;
-      position: absolute;
-      bottom: 0;
-      top: 0;
-      left: 0;
-      right: 0;
-      font-size: 3em;
-      text-align: center;
-      font-weight: 300;
-      i, p {
-        display: block;
-        width: 100%;
-        margin-bottom: 0.75em;
-      }
-    }
-  }
-}
diff --git a/src/styles/modules/project-task-bar.scss b/src/styles/modules/project-task-bar.scss
deleted file mode 100644
index 78d15e07f6..0000000000
--- a/src/styles/modules/project-task-bar.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-//
-// Student's progress bar styling
-//
-.task-progress {
-  tr {
-    vertical-align: middle;
-  }
-
-  margin-bottom: 0px;
-}
-
-.progress-bar {
-  span {
-    font-size: 8pt;
-  }
-
-  &[aria-valuenow='1'],
-  &[aria-valuenow='2'] {
-    min-width: 0px;
-  }
-
-  &[aria-valuenow='0'] {
-    min-width: 0px;
-  }
-}
-
-.task-progress-bar {
-  min-width: 128px;
-  width: 360px;
-
-  .panel-group {
-    margin-bottom: 0px;
-  }
-}
-
-.task-progress-accordion,
-.progress-progress-bar {
-  .panel-heading {
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-}
-
-.progress-bar-ready-for-feedback {
-  @include task-status-color-ready-for-feedback;
-}
-.progress-bar-not-started {
-  @include task-status-color-not-started;
-}
-.progress-bar-working-on-it {
-  @include task-status-color-working-on-it;
-}
-.progress-bar-need-help {
-  @include task-status-color-need-help;
-}
-.progress-bar-fix-and-resubmit {
-  @include task-status-color-fix-and-resubmit;
-}
-.progress-bar-feedback-exceeded {
-  @include task-status-color-feedback-exceeded;
-}
-.progress-bar-fail {
-  @include task-status-color-fail;
-}
-.progress-bar-redo {
-  @include task-status-color-redo;
-}
-.progress-bar-discuss {
-  @include task-status-color-discuss;
-}
-.progress-bar-demonstrate {
-  @include task-status-color-demonstrate;
-}
-.progress-bar-complete {
-  @include task-status-color-complete;
-}
-
-.progress-bar-not-started {
-  @include task-status-color-not-started;
-}
-.progress-bar-one-week-late {
-  @include task-status-color-working-on-it;
-}
-.progress-bar-two-weeks-late {
-  @include task-status-color-fail;
-}
-.progress-bar-on-time {
-  @include task-status-color-complete;
-}
-
-.progress-progress-bar {
-  height: 30px;
-  margin-bottom: 0px;
-}
diff --git a/src/styles/modules/rationale-wrapper.scss b/src/styles/modules/rationale-wrapper.scss
deleted file mode 100644
index 08693f7810..0000000000
--- a/src/styles/modules/rationale-wrapper.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-//
-// Text editor for rationale-providers
-//
-.rationale-wrapper {
-  display: table;
-  margin-top: 2em;
-}
-.rationale {
-  display: table-cell;
-  height: 200px;
-  overflow: scroll;
-  padding: 30px;
-  border-radius: 6px;
-  font-size: 1.5em;
-  cursor: pointer;
-  label {
-    font-size: 0.75em;
-    text-transform: uppercase;
-  }
-  &.no-rationale {
-    border: 1px dashed #aaa;
-    vertical-align: middle;
-    text-align: center;
-    color: #aaa;
-  }
-  &:hover {
-    border-color: #428bca;
-    color: #428bca;
-  }
-}
diff --git a/src/styles/modules/tabset-icon.scss b/src/styles/modules/tabset-icon.scss
deleted file mode 100644
index a1f721008d..0000000000
--- a/src/styles/modules/tabset-icon.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-//
-// Styling for tab headers with icons in them
-//
-.tabset-icon tab-heading {
-  text-align: center;
-  i {
-    display: block;
-    width: 100%;
-    padding-bottom: 5px;
-  }
-  i:not(:last-child) {
-    margin-right: 1ex;
-  }
-  i:not(:last-child), i + i:last-child {
-    display: inline-block;
-    width: inherit;
-  }
-}
diff --git a/src/styles/modules/task-status.scss b/src/styles/modules/task-status.scss
deleted file mode 100644
index 74d5963f48..0000000000
--- a/src/styles/modules/task-status.scss
+++ /dev/null
@@ -1,183 +0,0 @@
-//
-// Styling for all task status classes
-//
-.task-status {
-  &.ready-for-feedback {
-    @include task-status-color-ready-for-feedback;
-  }
-  &.not-started {
-    @include task-status-color-not-started;
-  }
-  &.working-on-it {
-    @include task-status-color-working-on-it;
-  }
-  &.need-help {
-    @include task-status-color-need-help;
-  }
-  &.fix-and-resubmit {
-    @include task-status-color-fix-and-resubmit;
-  }
-  &.feedback-exceeded {
-    @include task-status-color-feedback-exceeded;
-  }
-  &.fail {
-    @include task-status-color-fail;
-  }
-  &.redo {
-    @include task-status-color-redo;
-  }
-  &.discuss {
-    @include task-status-color-discuss;
-  }
-  &.demonstrate {
-    @include task-status-color-demonstrate;
-  }
-  &.complete {
-    @include task-status-color-complete;
-  }
-  &.time-exceeded {
-    @include task-status-color-time-exceeded;
-  }
-
-  &.ready-for-feedback:hover {
-    background-color: task-status-color('ready-for-feedback');
-  }
-  &.not-started:hover {
-    background-color: task-status-color('not-started');
-  }
-  &.working-on-it:hover {
-    background-color: task-status-color('working-on-it');
-  }
-  &.need-help:hover {
-    background-color: task-status-color('need-help');
-  }
-  &.fix-and-resubmit:hover {
-    background-color: task-status-color('fix-and-resubmit');
-  }
-  &.feedback-exceeded:hover {
-    background-color: task-status-color('feedback-exceeded');
-  }
-  &.fail:hover {
-    background-color: task-status-color('fail');
-  }
-  &.redo:hover {
-    background-color: task-status-color('redo');
-  }
-  &.discuss:hover {
-    background-color: task-status-color('discuss');
-  }
-  &.demonstrate:hover {
-    background-color: task-status-color('demonstrate');
-  }
-  &.complete:hover {
-    background-color: task-status-color('complete');
-  }
-  &.time-exceeded:hover {
-    background-color: task-status-color('time-exceeded');
-  }
-}
-
-.task-status > .btn-default {
-  &.ready-for-feedback,
-  &.ready-for-feedback.active,
-  &.ready-for-feedback:hover {
-    @include task-status-color-ready-for-feedback;
-  }
-  &.not-started,
-  &.not-started.active,
-  &.not-started:hover {
-    @include task-status-color-not-started;
-  }
-  &.working-on-it,
-  &.working-on-it.active,
-  &.working-on-it:hover {
-    @include task-status-color-working-on-it;
-  }
-  &.need-help,
-  &.need-help.active,
-  &.need-help:hover {
-    @include task-status-color-need-help;
-  }
-  &.fix-and-resubmit,
-  &.fix-and-resubmit.active,
-  &.fix-and-resubmit:hover {
-    @include task-status-color-fix-and-resubmit;
-  }
-  &.feedback-exceeded,
-  &.feedback-exceeded.active,
-  &.feedback-exceeded:hover {
-    @include task-status-color-feedback-exceeded;
-  }
-  &.fail,
-  &.fail.active,
-  &.fail:hover {
-    @include task-status-color-fail;
-  }
-  &.redo,
-  &.redo.active,
-  &.redo:hover {
-    @include task-status-color-redo;
-  }
-  &.discuss,
-  &.discuss.active,
-  &.discuss:hover {
-    @include task-status-color-discuss;
-  }
-  &.demonstrate,
-  &.demonstrate.active,
-  &.demonstrate:hover {
-    @include task-status-color-demonstrate;
-  }
-  &.complete,
-  &.complete.active,
-  &.complete:hover {
-    @include task-status-color-complete;
-  }
-  &.time-exceeded,
-  &.time-exceeded.active,
-  &.time-exceeded:hover {
-    @include task-status-color-time-exceeded;
-  }
-
-  &.ready-for-feedback {
-    background-color: lighten(task-status-color('ready-for-feedback'), 15%);
-  }
-  &.not-started {
-    background-color: lighten(task-status-color('not-started'), 15%);
-  }
-  &.working-on-it {
-    background-color: lighten(task-status-color('working-on-it'), 15%);
-  }
-  &.need-help {
-    background-color: lighten(task-status-color('need-help'), 10%);
-  }
-  &.fix-and-resubmit {
-    background-color: lighten(task-status-color('fix-and-resubmit'), 15%);
-  }
-  &.feedback-exceeded {
-    background-color: lighten(task-status-color('feedback-exceeded'), 15%);
-  }
-  &.fail {
-    background-color: lighten(task-status-color('fail'), 15%);
-  }
-  &.redo {
-    background-color: lighten(task-status-color('redo'), 15%);
-  }
-  &.discuss {
-    background-color: lighten(task-status-color('discuss'), 15%);
-  }
-  &.demonstrate {
-    background-color: lighten(task-status-color('demonstrate'), 15%);
-  }
-  &.complete {
-    background-color: lighten(task-status-color('complete'), 15%);
-  }
-  &.time-exceeded {
-    background-color: lighten(task-status-color('time-exceeded'), 15%);
-  }
-}
-
-i.task-status-icon {
-  display: block;
-  margin-bottom: 7px;
-}
diff --git a/src/styles/tokens/_dark.scss b/src/styles/tokens/_dark.scss
new file mode 100644
index 0000000000..0a539a6bfa
--- /dev/null
+++ b/src/styles/tokens/_dark.scss
@@ -0,0 +1,95 @@
+// OnTrack theme tokens — DARK.
+// Generated to the values fixed in docs/theme/THEME-CONTRACT.md sections 7 and 8.
+// The only block, with _light.scss, permitted to declare a colour value.
+// Applies exactly when the resolved theme marker is dark.
+
+:root[data-ot-theme='dark'] {
+  // --- 7. Semantic ---
+  // SPIKE (dark palette rework). The first pass had warm greys sitting too close
+  // together (muddy) and two competing accents. Reworked to one cohesive cool
+  // slate ramp with clearly stepped surfaces, softened whites (not #fff), and a
+  // single desaturated brand indigo used as the only accent. theme.scss builds the
+  // matching Material palette so chips/buttons/chrome use the same #818cf8.
+  --ot-color-page: #0f1216;
+  --ot-color-surface: #171b21;
+  --ot-color-surface-raised: #1f2530;
+  --ot-color-text: #e6e8ec;
+  --ot-color-text-muted: #99a2b0;
+  --ot-color-border: #434a58;
+  --ot-color-divider: #242a34;
+  // A mid indigo, not the earlier pale #818cf8: light enough to sit well on the
+  // slate, dark enough that WHITE text and icons read on it. That keeps the
+  // accent conventional (solid indigo, white label) and makes chips, buttons and
+  // the fab icon all agree instead of some going dark-on-accent.
+  // #6366f1 measured 4.47:1 against white — just under AA for normal text. Nudged
+  // to #5457e5 (white = 5.4:1) so filled buttons/chips keep white labels and pass.
+  --ot-color-focus: #5457e5;
+  --ot-color-link: #818cf8;
+  --ot-color-primary: #5457e5;
+  --ot-color-on-primary: #ffffff;
+  --ot-color-success: #5bb75b;
+  --ot-color-warning: #eb8f06;
+  --ot-color-error: #ef6445;
+  --ot-color-info: #0792ff;
+  --ot-color-inverse-surface: #e6e8ec;
+  --ot-color-inverse-text: #171b21;
+
+  // --- 8.1 Task status: --ot-status-<key> / -on ---
+  --ot-status-ready-for-feedback: #003f70;
+  --ot-status-ready-for-feedback-on: #47aeff;
+  --ot-status-not-started: #383838;
+  --ot-status-not-started-on: #a1a1a1;
+  --ot-status-working-on-it: #6d4303;
+  --ot-status-working-on-it-on: #fab042;
+  --ot-status-need-help: #31224e;
+  --ot-status-need-help-on: #9d86ca;
+  --ot-status-fix-and-resubmit: #685708;
+  --ot-status-fix-and-resubmit-on: #f1d44c;
+  --ot-status-feedback-exceeded: #5a2317;
+  --ot-status-feedback-exceeded-on: #dc8572;
+  --ot-status-redo: #703800;
+  --ot-status-redo-on: #ff9e3d;
+  --ot-status-discuss: #134c5d;
+  --ot-status-discuss-on: #5ec1de;
+  --ot-status-rediscuss: #115f4f;
+  --ot-status-rediscuss-on: #5be1c5;
+  --ot-status-demonstrate: #193a58;
+  --ot-status-demonstrate-on: #6ea6d6;
+  --ot-status-complete: #224e22;
+  --ot-status-complete-on: #78c478;
+  --ot-status-fail: #671a09;
+  --ot-status-fail-on: #f17c62;
+  --ot-status-time-exceeded: #671a09;
+  --ot-status-time-exceeded-on: #f17c62;
+  --ot-status-assess-in-portfolio: #685708;
+  --ot-status-assess-in-portfolio-on: #f1d44c;
+  --ot-status-attention-required: #682708;
+  --ot-status-attention-required-on: #f28a5a;
+
+  // --- 8.2 Everything else ---
+  --ot-urgency-overdue: #e06f4f;
+  --ot-urgency-soon: #fab143;
+  --ot-urgency-later: #adaaaf;
+
+  --ot-chart-1: #6c6cff;
+  --ot-chart-2: #007fe2;
+  --ot-chart-3: #5aa454;
+  --ot-chart-4: #e44d25;
+  --ot-chart-5: #c7587d;
+  --ot-chart-6: #eb8f06;
+  --ot-chart-grid: #353438;
+  --ot-chart-axis: #adaaaf;
+
+  --ot-code-surface: #0e0e11;
+  --ot-code-text: #e5e1e6;
+
+  --ot-scrim: rgba(0, 0, 0, 0.6);
+  --ot-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.5);
+
+  --ot-color-disabled-text: #6f6d72;
+  --ot-color-disabled-surface: #2a292d;
+
+  --ot-color-selected: #2e2e5c;
+  --ot-color-selected-text: #e5e1e6;
+  --ot-color-hover: rgba(255, 255, 255, 0.06);
+}
diff --git a/src/styles/tokens/_light.scss b/src/styles/tokens/_light.scss
new file mode 100644
index 0000000000..7bd9e05d4d
--- /dev/null
+++ b/src/styles/tokens/_light.scss
@@ -0,0 +1,86 @@
+// OnTrack theme tokens — LIGHT.
+// Generated to the values fixed in docs/theme/THEME-CONTRACT.md sections 7 and 8.
+// This file is one of only two blocks in the tree allowed to declare a colour value.
+// The bare :root selector means the app is correct in light mode even if the
+// pre-hydration marker script never runs.
+
+:root,
+:root[data-ot-theme='light'] {
+  // --- 7. Semantic ---
+  --ot-color-page: #fafafa;
+  --ot-color-surface: #ffffff;
+  --ot-color-surface-raised: #ffffff;
+  --ot-color-text: #212121;
+  --ot-color-text-muted: #616161;
+  --ot-color-border: #8a8a8a;
+  --ot-color-divider: #e0e0e0;
+  --ot-color-focus: #3939ff;
+  --ot-color-link: #3939ff;
+  --ot-color-primary: #3939ff;
+  --ot-color-on-primary: #ffffff;
+  --ot-color-success: #398239;
+  --ot-color-warning: #a56504;
+  --ot-color-error: #d73613;
+  --ot-color-info: #0075d0;
+  --ot-color-inverse-surface: #212121;
+  --ot-color-inverse-text: #fafafa;
+
+  // --- 8.1 Task status: --ot-status-<key> / -on ---
+  --ot-status-ready-for-feedback: #0078d5;
+  --ot-status-ready-for-feedback-on: #ffffff;
+  --ot-status-not-started: #cccccc;
+  --ot-status-not-started-on: #212121;
+  --ot-status-working-on-it: #eb8f06;
+  --ot-status-working-on-it-on: #212121;
+  --ot-status-need-help: #a48fce;
+  --ot-status-need-help-on: #212121;
+  --ot-status-fix-and-resubmit: #f2d85c;
+  --ot-status-fix-and-resubmit-on: #212121;
+  --ot-status-feedback-exceeded: #d46b54;
+  --ot-status-feedback-exceeded-on: #212121;
+  --ot-status-redo: #804000;
+  --ot-status-redo-on: #ffffff;
+  --ot-status-discuss: #31b0d5;
+  --ot-status-discuss-on: #212121;
+  --ot-status-rediscuss: #126352;
+  --ot-status-rediscuss-on: #ffffff;
+  --ot-status-demonstrate: #337ab7;
+  --ot-status-demonstrate-on: #ffffff;
+  --ot-status-complete: #5bb75b;
+  --ot-status-complete-on: #212121;
+  --ot-status-fail: #d93713;
+  --ot-status-fail-on: #ffffff;
+  --ot-status-time-exceeded: #d93713;
+  --ot-status-time-exceeded-on: #ffffff;
+  --ot-status-assess-in-portfolio: #f2d85c;
+  --ot-status-assess-in-portfolio-on: #212121;
+  --ot-status-attention-required: #f1814d;
+  --ot-status-attention-required-on: #212121;
+
+  // --- 8.2 Everything else ---
+  --ot-urgency-overdue: #c94823;
+  --ot-urgency-soon: #a56504;
+  --ot-urgency-later: #616161;
+
+  --ot-chart-1: #3939ff;
+  --ot-chart-2: #0079d8;
+  --ot-chart-3: #58a152;
+  --ot-chart-4: #e44d25;
+  --ot-chart-5: #a8385d;
+  --ot-chart-6: #d07e05;
+  --ot-chart-grid: #e0e0e0;
+  --ot-chart-axis: #616161;
+
+  --ot-code-surface: #f5f5f5;
+  --ot-code-text: #212121;
+
+  --ot-scrim: rgba(0, 0, 0, 0.32);
+  --ot-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12);
+
+  --ot-color-disabled-text: #9e9e9e;
+  --ot-color-disabled-surface: #eeeeee;
+
+  --ot-color-selected: #e7e7ff;
+  --ot-color-selected-text: #212121;
+  --ot-color-hover: rgba(0, 0, 0, 0.04);
+}
diff --git a/src/styles/vendor-config/bootstrap.scss b/src/styles/vendor-config/bootstrap.scss
deleted file mode 100644
index e086df4bd0..0000000000
--- a/src/styles/vendor-config/bootstrap.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// This config file provides overrides for bootstrap and is injected before
-// bootstrap is imported
-//
-
-// Provide the font path to the glyphicons
-$icon-font-path: './fonts/bootstrap/';
-
-// (Re)definition of screen sizes
-$screen-xl: 1900px !default;
-$screen-xl-min: $screen-xl !default;
-$screen-lg: 1400px !default;
-$screen-lg-max: ($screen-xl-min - 1) !default;
diff --git a/src/styles/vendor-config/font-awesome.scss b/src/styles/vendor-config/font-awesome.scss
deleted file mode 100644
index e073ddedf2..0000000000
--- a/src/styles/vendor-config/font-awesome.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// This config file provides overrides for bootstrap and is injected before
-// font awesome is imported
-//
-
-// Provide the font path to the glyphicons
-$fa-font-path: './fonts/font-awesome';
diff --git a/src/tailwind-intellisense.css b/src/tailwind-intellisense.css
new file mode 100644
index 0000000000..911f6e88a7
--- /dev/null
+++ b/src/tailwind-intellisense.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@config '../tailwind.config.js';
diff --git a/src/test.ts b/src/test.ts
deleted file mode 100644
index 280230b87b..0000000000
--- a/src/test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
-import { getTestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-
-// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare const __karma__: any;
-
-// Prevent Karma from running prematurely.
-__karma__.loaded = () => {};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
-});
-// Finally, start Karma to run the tests.
-__karma__.start();
diff --git a/src/theme.scss b/src/theme.scss
index 047760452b..29aa589b0b 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1,7 +1,8 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 /* For use in src/lib/core/theming/_palette.scss */
 $md-formatif: (
@@ -106,25 +107,43 @@ $md-formatif-warn: (
 $font-family-primary: "'Grotesk'";
 $font-family-accent: "Inter, 'open-sans', 'Roboto'";
 
-$mat-typography-primary-config: mat.define-typography-config(
-  $headline-1: mat.define-typography-level(112px, 112px, 300, $font-family-primary, $letter-spacing: -0.05em),
-  $headline-2: mat.define-typography-level(56px, 56px, 400, $font-family-primary, $letter-spacing: -0.02em),
-  $headline-3: mat.define-typography-level(45px, 48px, 400, $font-family-primary, $letter-spacing: -0.005em),
-  $headline-4: mat.define-typography-level(34px, 40px, 400, $font-family-primary),
-  $headline-5: mat.define-typography-level(24px, 32px, 400, $font-family-primary),
-  $headline-6: mat.define-typography-level(20px, 32px, 500, $font-family-primary),
-  $subtitle-1: mat.define-typography-level(16px, 28px, 400, $font-family-primary),
-  $body-1: mat.define-typography-level(15px, 24px, 400, $font-family-accent),
-  $subtitle-2: mat.define-typography-level(14px, 24px, 500, $font-family-accent),
-  $body-2: mat.define-typography-level(14px, 20px, 400, $font-family-accent),
-  $caption: mat.define-typography-level(12px, 20px, 400, $font-family-accent),
-  $button: mat.define-typography-level(14px, 14px, 500, $font-family-accent),
+$mat-typography-primary-config: mat.m2-define-typography-config(
+  $headline-1: mat.m2-define-typography-level(
+      112px,
+      112px,
+      300,
+      $font-family-primary,
+      $letter-spacing: -0.05em
+    ),
+  $headline-2: mat.m2-define-typography-level(
+      56px,
+      56px,
+      400,
+      $font-family-primary,
+      $letter-spacing: -0.02em
+    ),
+  $headline-3: mat.m2-define-typography-level(
+      45px,
+      48px,
+      400,
+      $font-family-primary,
+      $letter-spacing: -0.005em
+    ),
+  $headline-4: mat.m2-define-typography-level(34px, 40px, 400, $font-family-primary),
+  $headline-5: mat.m2-define-typography-level(24px, 32px, 400, $font-family-primary),
+  $headline-6: mat.m2-define-typography-level(20px, 32px, 500, $font-family-primary),
+  $subtitle-1: mat.m2-define-typography-level(16px, 28px, 400, $font-family-primary),
+  $body-1: mat.m2-define-typography-level(15px, 24px, 400, $font-family-accent),
+  $subtitle-2: mat.m2-define-typography-level(14px, 24px, 500, $font-family-accent),
+  $body-2: mat.m2-define-typography-level(14px, 20px, 400, $font-family-accent),
+  $caption: mat.m2-define-typography-level(12px, 20px, 400, $font-family-accent),
+  $button: mat.m2-define-typography-level(14px, 14px, 500, $font-family-accent),
 );
-$primary: mat.define-palette($md-formatif);
-$accent: mat.define-palette($md-formatif-accent);
-$warn: mat.define-palette($md-formatif-warn);
+$primary: mat.m2-define-palette($md-formatif);
+$accent: mat.m2-define-palette($md-formatif-accent);
+$warn: mat.m2-define-palette($md-formatif-warn);
 
-$theme: mat.define-light-theme(
+$theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $primary,
@@ -135,12 +154,106 @@ $theme: mat.define-light-theme(
   )
 );
 
-$color-config: mat.get-color-config($theme);
+$color-config: mat.m2-get-color-config($theme);
 $primary-palette: map.get($color-config, 'primary');
-$primary-color: mat.get-color-from-palette($primary-palette, 500);
+$primary-color: mat.m2-get-color-from-palette($primary-palette, 500);
 $accent-palette: map.get($color-config, 'accent');
 $warn-palette: map.get($color-config, 'warn');
 $is-dark-theme: map.get($color-config, 'is-dark');
 
 @include mat.all-component-typographies($theme);
 @include mat.all-component-themes($theme);
+
+// SPIKE (THM-M01): a dark Material theme keyed to the resolved marker. Emits only
+// component *colours* (typography/density stay from the light include above), so
+// every Material component flips to dark when <html data-ot-theme="dark">.
+//
+// The brand blue #3939ff is too saturated for a dark surface (it "shakes" and
+// reads harsh). This is the same blue desaturated into a slate-friendly indigo,
+// with 500 = #5457e5 to match --ot-color-primary exactly, so chips, buttons and
+// progress bars stop fighting the token accent.
+$md-formatif-dark: (
+  50: #eef0ff,
+  100: #e0e3fe,
+  200: #c7ccfc,
+  300: #a7aef9,
+  400: #818cf8,
+  500: #5457e5,
+  600: #464add,
+  700: #4a51d6,
+  800: #3d43ad,
+  900: #2f347f,
+  A100: #ffffff,
+  A200: #e0e3ff,
+  A400: #b3b8ff,
+  A700: #9aa0ff,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
+);
+// Default 500 = #5457e5 with a white contrast (white measures 5.4:1 on it), so
+// filled buttons, the fab and progress bars read as one indigo with white labels,
+// matching --ot-color-primary. (contrast for 500 is #ffffff in the map above.)
+$primary-dark: mat.m2-define-palette($md-formatif-dark, 500, 300, 700);
+
+$dark-theme: mat.m2-define-dark-theme(
+  (
+    color: (
+      primary: $primary-dark,
+      accent: $accent,
+      warn: $warn,
+    ),
+  )
+);
+
+:root[data-ot-theme='dark'] {
+  @include mat.all-component-colors($dark-theme);
+
+  // The app background is emitted once in light (mat.app-background, outside this
+  // scope), so force the main containers onto the page token here.
+  &,
+  .mat-app-background,
+  .mat-drawer-container,
+  .mat-sidenav-content,
+  .welcome .content {
+    background-color: var(--ot-color-page);
+    color: var(--ot-color-text);
+  }
+
+  // M2's dark theme paints every raised surface a neutral warm #424242, which
+  // fights the cool slate ramp and reads muddy. Repoint the container colours onto
+  // the raised token so cards, menus, dialogs and select panels sit in the same
+  // family as the page. Angular Material 22 reads the --mat-* tokens (the --mdc-*
+  // ones are not honoured), and the card also needs the literal background because
+  // M2 paints it directly.
+  .mat-mdc-card {
+    --mat-card-elevated-container-color: var(--ot-color-surface-raised);
+    --mat-card-outlined-container-color: var(--ot-color-surface-raised);
+    background-color: var(--ot-color-surface-raised);
+    color: var(--ot-color-text);
+  }
+  .mat-mdc-menu-panel {
+    --mat-menu-container-color: var(--ot-color-surface-raised);
+  }
+  .mat-mdc-dialog-container {
+    --mat-dialog-container-color: var(--ot-color-surface-raised);
+  }
+  .mat-mdc-select-panel,
+  .mat-mdc-autocomplete-panel {
+    --mat-select-panel-background-color: var(--ot-color-surface-raised);
+    background-color: var(--ot-color-surface-raised);
+  }
+}
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index 4e165072c4..3eb37000e7 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -5,5 +5,13 @@
     "types": []
   },
   "files": ["main.ts", "polyfills.ts"],
-  "include": ["src/**/*.d.ts", "src/**/*.ts"]
+  "include": ["src/**/*.d.ts", "src/**/*.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
index aabc7e3d73..8d291fc904 100644
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
@@ -2,17 +2,16 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
+    "typeRoots": ["../node_modules/@types", "../node_modules"],
+    "types": ["vitest/globals", "node"]
   },
-  "files": [
-    "test.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
\ No newline at end of file
+  "include": ["**/*.spec.ts", "**/*.d.ts", "vitest-setup.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}
diff --git a/src/vitest-setup.ts b/src/vitest-setup.ts
new file mode 100644
index 0000000000..e2b9a2ab21
--- /dev/null
+++ b/src/vitest-setup.ts
@@ -0,0 +1,10 @@
+import {vi} from 'vitest';
+import 'zone.js/plugins/vitest-patch';
+
+// The full Angular suite compiles and instantiates many large TestBed modules in
+// parallel. Give those hooks enough headroom under CI load while keeping a
+// finite timeout so genuine hangs still fail the run.
+vi.setConfig({
+  hookTimeout: 30_000,
+  testTimeout: 30_000,
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index ca0e02b4f0..0d777fce59 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,8 @@
 module.exports = {
   content: ['./src/**/*.{html,ts}'],
   important: true,
+  // SPIKE (THM-F03): bind the dark: variant to the resolved marker, not the OS.
+  darkMode: ['selector', '[data-ot-theme="dark"]'],
   theme: {
     extend: {
       colors: {
diff --git a/tsconfig.json b/tsconfig.json
index c1f136d7b7..d695845b5b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,16 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": "./",
-    "downlevelIteration": true,
     "importHelpers": true,
     "module": "es2020",
+    "rootDir": ".",
     "outDir": "./build",
     "sourceMap": true,
+    "esModuleInterop": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "noImplicitAny": false,
@@ -17,11 +19,11 @@
     "strictPropertyInitialization": false,
     "target": "ES2022",
     "typeRoots": ["node_modules/@types"],
-    "lib": ["es2020", "dom", "ES2021.String"],
     "useDefineForClassFields": false,
-    "allowSyntheticDefaultImports": true
+    "skipLibCheck": true
   },
   "angularCompilerOptions": {
-    "strictTemplates": false
+    "strictTemplates": true,
+    "typeCheckHostBindings": false
   }
 }