Merge pull request 'fix(ledger): one-line CSS fingerprints; proposer writes uses edges for judged rows (#2877)' (#123) from dev into main

First deploy of v26.08.21.1 showed two gaps:
- Every one-line CSS rule followed by a blank line hashed to sha1("") — the
  declarations live on the selector line, which the #2872 "declarations only"
  fingerprint dropped — so 68 unrelated one-liners across 17 files read as
  one body-identical copy at the top of the derive readout. The selector
  line's tail after "{" is now part of the hash; an all-blank remainder falls
  back to the whole block.
- The proposer only examined unjudged rows, so consumers that were already
  classified (auth.create_invitation → hash_token) never got a uses edge: 3
  edges for hash_token after the first refresh. Judged rows are now scanned
  for references (once per body), no proposal is made on them.
- 0084 migration docstring reworded: "function that …" at a line start parsed
  as a definition (extractor false positive).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.forgejo/workflows/ci.yml

@@ -225,6 +225,16 @@ jobs:
           UV_PROJECT_ENVIRONMENT: /opt/venv
         run: uv sync --locked --extra dev
 
+      # The hook-EXECUTION tests (test_write_path_trigger's nudge pair) run the
+      # real bash hook, which exits silently without jq — and those tests skip
+      # rather than fail when it's absent, so without this step they would
+      # quietly never be verified anywhere (ci-python ships without jq; same
+      # install the Plugin hooks job does).
+      - name: Install jq for hook execution tests
+        run: |
+          apt-get update -qq
+          apt-get install -y -qq --no-install-recommends jq
+
       - name: Run tests
         # Integration tests (real Postgres) run in the `integration` job below.
         run: /opt/venv/bin/python -m pytest tests/ -q -m "not integration"

alembic/versions/0077_chunked_embeddings.py

@@ -0,0 +1,54 @@
+"""Chunked embeddings: one note_embeddings row per chunk (#280)
+
+Revision ID: 0077
+Revises: 0076
+Create Date: 2026-08-09
+
+The embedding model reads at most 512 tokens and fastembed truncates the rest
+silently, so the old one-row-per-note shape permanently lost everything past
+~400 words of a record. A note now stores one row per chunk of
+`embeddings.chunk_document`: PK (note_id, chunk_index), plus the chunk's text
+(inspectability + future "matched section" surfacing) and the chunker version
+that produced it (so later shape changes re-embed by version comparison
+instead of repeating this wipe).
+
+Embeddings are DERIVED data (0067 precedent): rows are cleared here and the
+startup backfill regenerates the whole corpus at the new shape on next boot.
+The HNSW index is untouched — it indexes chunk rows exactly as it indexed
+note rows.
+"""
+from alembic import op
+
+
+revision = "0077"
+down_revision = "0076"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # Derived data — the version-aware startup backfill re-embeds everything
+    # at the chunked shape. Old whole-document rows would be indistinguishable
+    # from properly-chunked single-chunk notes, so they cannot be carried over.
+    op.execute("DELETE FROM note_embeddings")
+
+    # Empty table, so NOT NULL columns need no defaults and the PK swap is
+    # instant.
+    op.execute("ALTER TABLE note_embeddings ADD COLUMN chunk_index integer NOT NULL")
+    op.execute("ALTER TABLE note_embeddings ADD COLUMN chunk_text text NOT NULL")
+    op.execute("ALTER TABLE note_embeddings ADD COLUMN chunker_version integer NOT NULL")
+    op.execute("ALTER TABLE note_embeddings DROP CONSTRAINT note_embeddings_pkey")
+    op.execute(
+        "ALTER TABLE note_embeddings ADD PRIMARY KEY (note_id, chunk_index)"
+    )
+
+
+def downgrade() -> None:
+    # Same reasoning in reverse: chunk rows make no sense to a whole-document
+    # reader, so clear and let the old backfill regenerate.
+    op.execute("DELETE FROM note_embeddings")
+    op.execute("ALTER TABLE note_embeddings DROP CONSTRAINT note_embeddings_pkey")
+    op.execute("ALTER TABLE note_embeddings DROP COLUMN chunk_index")
+    op.execute("ALTER TABLE note_embeddings DROP COLUMN chunk_text")
+    op.execute("ALTER TABLE note_embeddings DROP COLUMN chunker_version")
+    op.execute("ALTER TABLE note_embeddings ADD PRIMARY KEY (note_id)")

alembic/versions/0078_forge_connections.py

@@ -0,0 +1,130 @@
+"""Forge connections move to the user level (#2778)
+
+Revision ID: 0078
+Revises: 0077
+Create Date: 2026-08-19
+
+A forge token is a user's credential, not an instance's: the single
+admin-settings config meant every user's snippet-freshness and coverage reads
+ran under the operator's token. Each user now owns a keyring of connections —
+one per forge host — and projects resolve forge reads on their OWNER's
+keyring, with an optional per-project pin (projects.forge_connection_id).
+
+The data move carries the existing admin config into a connection row for the
+first admin user (host parsed from the base URL), then deletes the old
+setting keys outright — no legacy dual-read (rule #22). The env-var channel
+(FORGE_KIND/FORGE_BASE_URL/FORGE_TOKEN) is untouched by this migration; it
+survives as an implicit keyring entry for admin users only.
+"""
+from urllib.parse import urlsplit
+
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0078"
+down_revision = "0077"
+branch_labels = None
+depends_on = None
+
+_SETTING_KEYS = ("forge_kind", "forge_base_url", "forge_token")
+
+
+def upgrade() -> None:
+    op.create_table(
+        "forge_connections",
+        sa.Column("id", sa.Integer(), primary_key=True),
+        sa.Column(
+            "user_id",
+            sa.Integer(),
+            sa.ForeignKey("users.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+        sa.Column("kind", sa.Text(), nullable=False),
+        sa.Column("base_url", sa.Text(), nullable=False),
+        sa.Column("host", sa.Text(), nullable=False),
+        sa.Column("token", sa.Text(), nullable=False),
+        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False),
+        sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False),
+        sa.UniqueConstraint("user_id", "host", name="uq_forge_connections_user_host"),
+    )
+    op.add_column(
+        "projects",
+        sa.Column(
+            "forge_connection_id",
+            sa.BigInteger(),
+            sa.ForeignKey(
+                "forge_connections.id",
+                ondelete="SET NULL",
+                name="fk_projects_forge_connection_id",
+            ),
+            nullable=True,
+        ),
+    )
+
+    # Data move: the admin-settings config becomes the first admin's keyring
+    # row. All three values must be present — a partial config never produced
+    # an adapter, so carrying it over would invent a connection that never
+    # worked.
+    conn = op.get_bind()
+    row = conn.execute(
+        sa.text(
+            "SELECT s.key, s.value FROM settings s"
+            " JOIN users u ON u.id = s.user_id"
+            " WHERE u.role = 'admin' AND s.key IN :keys"
+            " AND s.user_id = ("
+            "   SELECT MIN(id) FROM users WHERE role = 'admin'"
+            " )"
+        ).bindparams(sa.bindparam("keys", expanding=True)),
+        {"keys": list(_SETTING_KEYS)},
+    ).fetchall()
+    values = {key: (value or "").strip() for key, value in row}
+    kind = values.get("forge_kind", "").lower()
+    base_url = values.get("forge_base_url", "").rstrip("/")
+    token = values.get("forge_token", "")
+    host = (urlsplit(base_url).hostname or "").lower()
+    if kind and base_url and token and host:
+        conn.execute(
+            sa.text(
+                "INSERT INTO forge_connections"
+                " (user_id, kind, base_url, host, token, created_at, updated_at)"
+                " SELECT MIN(id), :kind, :base_url, :host, :token, NOW(), NOW()"
+                " FROM users WHERE role = 'admin'"
+            ),
+            {"kind": kind, "base_url": base_url, "host": host, "token": token},
+        )
+    conn.execute(
+        sa.text(
+            "DELETE FROM settings WHERE key IN :keys"
+        ).bindparams(sa.bindparam("keys", expanding=True)),
+        {"keys": list(_SETTING_KEYS)},
+    )
+
+
+def downgrade() -> None:
+    # Reverse data move: the first admin's row (if any) becomes the admin
+    # settings again. Other users' rows have no pre-0078 representation and
+    # are dropped with the table.
+    conn = op.get_bind()
+    row = conn.execute(
+        sa.text(
+            "SELECT user_id, kind, base_url, token FROM forge_connections"
+            " WHERE user_id = (SELECT MIN(id) FROM users WHERE role = 'admin')"
+            " ORDER BY id LIMIT 1"
+        )
+    ).fetchone()
+    if row is not None:
+        for key, value in (
+            ("forge_kind", row.kind),
+            ("forge_base_url", row.base_url),
+            ("forge_token", row.token),
+        ):
+            conn.execute(
+                sa.text(
+                    "INSERT INTO settings (user_id, key, value)"
+                    " VALUES (:uid, :key, :value)"
+                    " ON CONFLICT (user_id, key) DO UPDATE SET value = :value"
+                ),
+                {"uid": row.user_id, "key": key, "value": value},
+            )
+    op.drop_column("projects", "forge_connection_id")
+    op.drop_table("forge_connections")

alembic/versions/0079_code_shapes_ledger.py

@@ -0,0 +1,66 @@
+"""The shape ledger: code_shapes (#2787, milestone 294)
+
+Revision ID: 0079
+Revises: 0078
+Create Date: 2026-08-19
+
+The accounting half of the pattern system (governing note 2786): the snippet
+library records canon (small); this table accounts for EVERY shape the
+coverage extractor finds in a bound repo (total). Rows arrive `unclassified`
+from the coverage sync (step 2) and gain judgments — canonical / instance /
+variant / exempt — from audits, hooks, and the mechanical proposer.
+Unclassified IS the todo list.
+"""
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0079"
+down_revision = "0078"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        "code_shapes",
+        sa.Column("id", sa.Integer(), primary_key=True),
+        sa.Column(
+            "project_id",
+            sa.Integer(),
+            sa.ForeignKey("projects.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+        sa.Column("repo_key", sa.Text(), nullable=False),
+        sa.Column("path", sa.Text(), nullable=False),
+        sa.Column("symbol", sa.Text(), nullable=False),
+        sa.Column("kind", sa.Text(), nullable=False),
+        sa.Column("status", sa.Text(), nullable=False, server_default="unclassified"),
+        sa.Column(
+            "snippet_id",
+            sa.BigInteger(),
+            sa.ForeignKey("notes.id", ondelete="SET NULL"),
+            nullable=True,
+        ),
+        sa.Column("reason", sa.Text(), nullable=True),
+        sa.Column("classified_by", sa.Text(), nullable=True),
+        sa.Column("classified_at", sa.DateTime(timezone=True), nullable=True),
+        sa.Column("first_seen_commit", sa.Text(), nullable=False, server_default=""),
+        sa.Column("last_seen_commit", sa.Text(), nullable=False, server_default=""),
+        sa.Column("vanished_at", sa.DateTime(timezone=True), nullable=True),
+        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False),
+        sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False),
+        sa.UniqueConstraint(
+            "project_id", "repo_key", "path", "symbol", "kind",
+            name="uq_code_shapes_identity",
+        ),
+    )
+    op.create_index(
+        "ix_code_shapes_project_status", "code_shapes", ["project_id", "status"]
+    )
+    op.create_index("ix_code_shapes_snippet", "code_shapes", ["snippet_id"])
+
+
+def downgrade() -> None:
+    op.drop_index("ix_code_shapes_snippet", table_name="code_shapes")
+    op.drop_index("ix_code_shapes_project_status", table_name="code_shapes")
+    op.drop_table("code_shapes")

alembic/versions/0080_code_shape_proposals.py

@@ -0,0 +1,54 @@
+"""Shape fingerprints + the mechanical proposer's columns (#2792, milestone 294)
+
+Revision ID: 0080
+Revises: 0079
+Create Date: 2026-08-21
+
+Two additions to the ledger. `signature` / `body_sha` fingerprint each shape
+(definition line + a whitespace/comment-insensitive hash of its block) so the
+proposer can match on content and a later drift recheck can notice change,
+without the ledger ever storing code. The proposal columns carry the
+proposer's standing suggestion for an unclassified row — instance-of-#N with
+a basis and score, or a derive-first group key — and `proposed_sha`
+remembers the content it was judged at so a refresh re-examines only what
+changed. Mechanical and recomputable: a restore that lacks them loses
+nothing the next refresh does not rebuild.
+"""
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0080"
+down_revision = "0079"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column("code_shapes", sa.Column("signature", sa.Text(), nullable=False, server_default=""))
+    op.add_column("code_shapes", sa.Column("body_sha", sa.Text(), nullable=False, server_default=""))
+    op.add_column(
+        "code_shapes",
+        sa.Column(
+            "proposed_snippet_id",
+            sa.BigInteger(),
+            sa.ForeignKey("notes.id", ondelete="SET NULL"),
+            nullable=True,
+        ),
+    )
+    op.add_column("code_shapes", sa.Column("proposal_basis", sa.Text(), nullable=True))
+    op.add_column("code_shapes", sa.Column("proposal_score", sa.Float(), nullable=True))
+    op.add_column("code_shapes", sa.Column("proposal_group", sa.Text(), nullable=True))
+    op.add_column("code_shapes", sa.Column("proposed_at", sa.DateTime(timezone=True), nullable=True))
+    op.add_column("code_shapes", sa.Column("proposed_sha", sa.Text(), nullable=False, server_default=""))
+    op.create_index(
+        "ix_code_shapes_proposed", "code_shapes", ["project_id", "proposed_snippet_id"]
+    )
+
+
+def downgrade() -> None:
+    op.drop_index("ix_code_shapes_proposed", table_name="code_shapes")
+    for col in (
+        "proposed_sha", "proposed_at", "proposal_group", "proposal_score",
+        "proposal_basis", "proposed_snippet_id", "body_sha", "signature",
+    ):
+        op.drop_column("code_shapes", col)

alembic/versions/0081_shape_history_and_divergence.py

@@ -0,0 +1,70 @@
+"""Shape history, recheck, and the divergence flag (#2793, milestone 294)
+
+Revision ID: 0081
+Revises: 0080
+Create Date: 2026-08-21
+
+The payoff surface of the ledger. `classified_sha` remembers the fingerprint
+a judgment was made at so a later body change under an instance/variant can
+flag `recheck_at`; `diverges_from` is the button-B flag (a shape new since
+the previous refresh, where one canon dominates its directory+kind, and not
+proposed as that canon). `code_shape_events` is the what-was-used-when
+record: every classification, vanish, reappearance, and drift as it
+happened — history the row alone cannot keep once it moves on.
+"""
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0081"
+down_revision = "0080"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column("code_shapes", sa.Column("classified_sha", sa.Text(), nullable=False, server_default=""))
+    op.add_column("code_shapes", sa.Column("recheck_at", sa.DateTime(timezone=True), nullable=True))
+    op.add_column(
+        "code_shapes",
+        sa.Column(
+            "diverges_from",
+            sa.BigInteger(),
+            sa.ForeignKey("notes.id", ondelete="SET NULL"),
+            nullable=True,
+        ),
+    )
+    op.create_index("ix_code_shapes_diverges", "code_shapes", ["project_id", "diverges_from"])
+    op.create_table(
+        "code_shape_events",
+        sa.Column("id", sa.Integer(), primary_key=True),
+        sa.Column(
+            "shape_id",
+            sa.Integer(),
+            sa.ForeignKey("code_shapes.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+        sa.Column("project_id", sa.Integer(), nullable=False),
+        sa.Column("path", sa.Text(), nullable=False),
+        sa.Column("symbol", sa.Text(), nullable=False),
+        sa.Column("kind", sa.Text(), nullable=False),
+        sa.Column("event", sa.Text(), nullable=False),
+        sa.Column("status", sa.Text(), nullable=True),
+        sa.Column("snippet_id", sa.BigInteger(), nullable=True),
+        sa.Column("classified_by", sa.Text(), nullable=True),
+        sa.Column("reason", sa.Text(), nullable=True),
+        sa.Column("commit", sa.Text(), nullable=False, server_default=""),
+        sa.Column("at", sa.DateTime(timezone=True), nullable=False),
+    )
+    op.create_index("ix_code_shape_events_shape", "code_shape_events", ["shape_id", "at"])
+    op.create_index(
+        "ix_code_shape_events_project_path", "code_shape_events", ["project_id", "path"]
+    )
+
+
+def downgrade() -> None:
+    op.drop_index("ix_code_shape_events_project_path", table_name="code_shape_events")
+    op.drop_index("ix_code_shape_events_shape", table_name="code_shape_events")
+    op.drop_table("code_shape_events")
+    op.drop_index("ix_code_shapes_diverges", table_name="code_shapes")
+    for col in ("diverges_from", "recheck_at", "classified_sha"):
+        op.drop_column("code_shapes", col)

alembic/versions/0082_repo_binding_ref.py

@@ -0,0 +1,26 @@
+"""Per-binding ref — the branch a project's ledger follows (#2873, milestone 294)
+
+Revision ID: 0082
+Revises: 0081
+Create Date: 2026-08-21
+
+A repo binding used to imply the repo's default branch; the shape ledger
+therefore only saw work after a merge to main, while the operator's work
+lands on dev (rule 1). `ref` names the branch the coverage refresh reads —
+NULL keeps today's behaviour (the forge's default branch).
+"""
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0082"
+down_revision = "0081"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column("repo_bindings", sa.Column("ref", sa.Text(), nullable=True))
+
+
+def downgrade() -> None:
+    op.drop_column("repo_bindings", "ref")

alembic/versions/0083_code_shape_reason_code.py

@@ -0,0 +1,26 @@
+"""Exempt/variant reason codes — a small fixed catalogue beside the prose (#2874, milestone 294)
+
+Revision ID: 0083
+Revises: 0082
+Create Date: 2026-08-21
+
+The 2026-08 audit wrote the same free-text reason thousands of times
+("scoped rule — styles one element of this view"); a judgment's WHY stays
+prose, but an optional code from a fixed catalogue makes the ledger
+filterable and aggregable ("how many pure helpers, how many test helpers").
+"""
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0083"
+down_revision = "0082"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column("code_shapes", sa.Column("reason_code", sa.Text(), nullable=True))
+
+
+def downgrade() -> None:
+    op.drop_column("code_shapes", "reason_code")

alembic/versions/0084_code_shape_uses.py

@@ -0,0 +1,40 @@
+"""code_shape_uses — consumption edges, separate from conformance (#2870, milestone 294)
+
+Revision ID: 0084
+Revises: 0083
+Create Date: 2026-08-21
+
+A ledger row carries ONE snippet_id: what shape this is (instance/variant of
+a canon). But a shape can also CALL several canonical helpers — e.g. a
+service function both conforming to the service-function convention and
+consuming hash_token. The 2026-08 audit had to pick one; hook evidence
+("pulled #N then wrote code referencing it") was stamped as instance when it
+is a uses fact. This table holds the many-valued relation: shape → snippet,
+with the basis and the evidence. Cascades with the shape and the snippet.
+"""
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0084"
+down_revision = "0083"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        "code_shape_uses",
+        sa.Column("id", sa.Integer(), primary_key=True),
+        sa.Column("shape_id", sa.Integer(), sa.ForeignKey("code_shapes.id", ondelete="CASCADE"), nullable=False),
+        sa.Column("snippet_id", sa.Integer(), sa.ForeignKey("notes.id", ondelete="CASCADE"), nullable=False),
+        sa.Column("basis", sa.Text(), nullable=False),
+        sa.Column("evidence", sa.Text(), nullable=True),
+        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.text("now()")),
+        sa.UniqueConstraint("shape_id", "snippet_id", name="uq_code_shape_uses_shape_snippet"),
+    )
+    op.create_index("ix_code_shape_uses_snippet", "code_shape_uses", ["snippet_id"])
+
+
+def downgrade() -> None:
+    op.drop_index("ix_code_shape_uses_snippet", table_name="code_shape_uses")
+    op.drop_table("code_shape_uses")

frontend/src/App.vue

@@ -254,7 +254,7 @@ onUnmounted(() => {
   left: 0.5rem;
   z-index: 9999;
   padding: 0.4rem 0.75rem;
-  background: var(--color-primary);
+  background: var(--fs-accent);
   color: var(--fs-text-on-action);
   border-radius: 0 0 4px 4px;
   font-size: 0.875rem;
@@ -290,7 +290,7 @@ onUnmounted(() => {
   text-align: center;
   padding: 0.2rem 0;
   font-size: 0.68rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   opacity: 0.45;
   user-select: none;
   letter-spacing: 0.03em;
@@ -300,16 +300,16 @@ onUnmounted(() => {
 .shortcuts-overlay {
   position: fixed;
   inset: 0;
-  background: var(--color-overlay);
+  background: var(--fs-overlay);
   z-index: 9000;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .shortcuts-panel {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   box-shadow: 0 8px 32px var(--color-shadow);
   width: min(420px, 92vw);
   overflow: hidden;
@@ -319,25 +319,25 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 0.85rem 1rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .shortcuts-header h3 {
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .shortcuts-close {
   background: none;
   border: none;
   font-size: 1.4rem;
   line-height: 1;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   padding: 0 0.25rem;
 }
 .shortcuts-close:hover {
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .shortcuts-body {
   padding: 0.75rem 1rem 1rem;
@@ -350,7 +350,7 @@ onUnmounted(() => {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin-bottom: 0.4rem;
 }
 .shortcut-row {
@@ -365,23 +365,23 @@ onUnmounted(() => {
   justify-content: center;
   min-width: 1.8rem;
   padding: 0.15rem 0.4rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-bottom-width: 2px;
   border-radius: 4px;
   font-size: 0.78rem;
   font-family: ui-monospace, monospace;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   white-space: nowrap;
   user-select: none;
 }
 .shortcut-key-sep {
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .shortcut-desc {
   font-size: 0.875rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   margin-left: 0.25rem;
 }
 

frontend/src/api/client.ts

@@ -38,6 +38,20 @@ async function handleResponse<T>(res: Response, path: string): Promise<T> {
   return res.json() as Promise<T>;
 }
 
+/**
+ * The server's `{"error": "..."}` message from a failed call, or `fallback`
+ * when the failure carried none (network error, non-JSON body). The one place
+ * the error envelope is unpacked on the client — views used to restate this
+ * as a six-line `"body" in e` branch at every catch site.
+ */
+export function apiErrorMessage(e: unknown, fallback: string): string {
+  if (e && typeof e === "object" && "body" in e) {
+    const body = (e as { body?: { error?: unknown } }).body;
+    if (body && typeof body.error === "string" && body.error) return body.error;
+  }
+  return fallback;
+}
+
 export async function apiGet<T>(path: string): Promise<T> {
   const res = await fetch(path);
   return handleResponse<T>(res, path);

frontend/src/assets/auth-shared.css

@@ -0,0 +1,115 @@
+/* ── Auth surface (Login / Register / RegisterInvite / ForgotPassword / ResetPassword) ──
+   The five auth views used to carry byte-identical copies of these rules in
+   their scoped blocks (2026-08 shape audit). Loaded per view with
+   <style src="@/assets/auth-shared.css" />, like editor-shared.css; the form
+   rules are scoped under .auth-card so nothing leaks into the app's other
+   .field/.input usages. Per-view one-offs (Login's .divider/.forgot-link)
+   stay in the view. */
+.auth-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1rem;
+}
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
+  padding: 2rem;
+}
+.auth-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.auth-card h1 {
+  margin: 0;
+  text-align: center;
+}
+.auth-hint {
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--fs-text-secondary);
+  margin-bottom: 1rem;
+}
+.auth-hint a {
+  color: var(--fs-accent);
+}
+/* A centred status paragraph block: registration closed, invalid/expired
+   token, "check your inbox". One rule — the views used to name it
+   .closed-msg / .error-block / .success-msg with identical bodies. */
+.auth-note {
+  text-align: center;
+  color: var(--fs-text-secondary);
+  font-size: 0.95rem;
+  padding: 0.5rem 0;
+}
+.auth-note p {
+  margin: 0.5rem 0;
+}
+.auth-loading {
+  text-align: center;
+  color: var(--fs-text-tertiary);
+  font-size: 0.95rem;
+  padding: 1rem 0;
+}
+.auth-card .field {
+  margin-bottom: 1rem;
+}
+.auth-card .field label {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+.auth-card .input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  font-size: 0.95rem;
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
+  box-sizing: border-box;
+}
+.auth-card .input:focus {
+  outline: none;
+  border-color: var(--fs-accent);
+}
+.auth-card .input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.auth-card .input-error,
+.auth-card .input-error:focus {
+  border-color: var(--fs-error);
+}
+.auth-card .field-hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.8rem;
+  color: var(--fs-text-tertiary);
+}
+.auth-card .error-hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.8rem;
+  color: var(--fs-error);
+}
+.auth-card .error-msg {
+  color: var(--fs-error);
+  font-size: 0.9rem;
+  margin: 0 0 0.75rem;
+}
+.auth-footer {
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--fs-text-secondary);
+  margin: 1rem 0 0;
+}
+.auth-footer a {
+  color: var(--fs-accent);
+}

frontend/src/assets/components.css

@@ -89,19 +89,19 @@
  * are universal across the family so a Save button looks identical in every
  * app — the accent is identity, not action. */
 .btn-primary {
-  background: var(--color-action-primary);
+  background: var(--fs-action-primary);
   color: var(--fs-text-on-action);
 }
 .btn-primary:not(:disabled):hover {
-  background: var(--color-action-primary-hover);
+  background: var(--fs-action-primary-hover);
 }
 
 .btn-secondary {
-  background: var(--color-action-secondary);
+  background: var(--fs-action-secondary);
   color: var(--fs-text-on-action);
 }
 .btn-secondary:not(:disabled):hover {
-  background: var(--color-action-secondary-hover);
+  background: var(--fs-action-secondary-hover);
 }
 
 /* Ghost is an OUTLINE, which is why its border and the tertiary action colour
@@ -112,21 +112,21 @@
 .btn-ghost {
   background: none;
   border: var(--fs-border);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .btn-ghost:not(:disabled):hover {
   border: var(--fs-border-hover);
-  background: var(--color-hover);
+  background: var(--fs-surface-hover);
 }
 
 /* Destructive is NOT the error colour: an error is a failure that happened, a
  * destructive action is one about to happen. Pair with an icon. */
 .btn-danger {
-  background: var(--color-action-destructive);
+  background: var(--fs-action-destructive);
   color: var(--fs-text-on-action);
 }
 .btn-danger:not(:disabled):hover {
-  background: var(--color-action-destructive-hover);
+  background: var(--fs-action-destructive-hover);
 }
 
 /* A bare text button: no fill, no border. The most common shape in the dense
@@ -136,7 +136,7 @@
 .btn-text {
   background: none;
   border: none;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   padding: var(--fs-space-1) var(--fs-space-2);
   font-family: var(--fs-font-body);
   font-size: var(--fs-size-tiny);
@@ -144,7 +144,7 @@
   cursor: pointer;
   transition: color var(--fs-dur-fast) var(--fs-ease);
 }
-.btn-text:not(:disabled):hover { color: var(--color-text); }
+.btn-text:not(:disabled):hover { color: var(--fs-text-primary); }
 .btn-text:disabled { opacity: var(--fs-disabled-opacity); cursor: not-allowed; }
 .btn-text:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); }
 
@@ -153,11 +153,11 @@
  * a one-off: it is what a delete looks like when it must not shout. */
 .btn-danger-outline {
   background: none;
-  border: 1px solid var(--color-action-destructive);
-  color: var(--color-action-destructive);
+  border: 1px solid var(--fs-action-destructive);
+  color: var(--fs-action-destructive);
 }
 .btn-danger-outline:not(:disabled):hover {
-  background: var(--color-action-destructive);
+  background: var(--fs-action-destructive);
   color: var(--fs-text-on-action);
 }
 
@@ -221,3 +221,79 @@
                                                      is the page's main action */
   font-size: var(--fs-size-body-sm);
 }
+
+
+/* ── Modal ─────────────────────────────────────────────────────────────────
+   The one overlay/card/button shape for every in-app dialog (ConfirmDialog,
+   the create-project / merge-snippet / systems dialogs, the editors' confirm
+   prompts). Global on purpose: ConfirmDialog teleports to <body> and has no
+   styles of its own, so these must be loaded with the app, not with whichever
+   view happens to be open. Views add only their own overrides (a wider card,
+   a form layout). Destructive = action-destructive per the Hybrid rule. */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--fs-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+.modal-card {
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 8px 32px var(--color-shadow);
+}
+.modal-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.05rem;
+}
+.modal-message {
+  font-size: 0.9rem;
+  color: var(--fs-text-secondary);
+  margin: 0 0 1.25rem;
+  line-height: 1.5;
+}
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+.modal-btn {
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border-radius: var(--fs-radius-sm);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-family: inherit;
+}
+.modal-btn:hover {
+  background: var(--fs-surface-page);
+}
+.modal-btn-primary {
+  background: var(--fs-action-primary);
+  border-color: var(--fs-action-primary);
+  color: var(--fs-text-on-action);
+}
+.modal-btn-primary:hover:not(:disabled) {
+  background: var(--fs-action-primary-hover);
+}
+.modal-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.modal-btn-danger {
+  background: var(--fs-action-destructive);
+  border-color: var(--fs-action-destructive);
+  color: var(--fs-text-on-action);
+}
+.modal-btn-danger:hover {
+  background: var(--fs-action-destructive-hover);
+  border-color: var(--fs-action-destructive-hover);
+}

frontend/src/assets/editor-shared.css

@@ -13,7 +13,7 @@
   flex-direction: column;
   gap: 0.75rem;
   padding: 1rem 1.5rem 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .editor-body {
   flex: 1;
@@ -41,36 +41,36 @@
    with a Trash icon at the call site to reinforce intent. */
 .title-input:focus {
   outline: none;
-  border-bottom-color: var(--color-primary);
+  border-bottom-color: var(--fs-accent);
 }
 .title-input::placeholder {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-weight: 400;
 }
 .editor-tabs {
   display: flex;
   gap: 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .tab {
   padding: 0.45rem 1rem;
   border: none;
   background: none;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   cursor: pointer;
   font-size: 0.9rem;
   border-bottom: 2px solid transparent;
 }
 .tab.active {
-  color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
+  color: var(--fs-accent);
+  border-bottom-color: var(--fs-accent);
 }
 .preview-pane {
   padding: 0.75rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   min-height: 200px;
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
 }
 
 /* ── Tag suggestions ── */
@@ -85,21 +85,21 @@
   align-items: center;
   gap: 0.2rem;
   padding: 0.2rem 0.55rem;
-  border: 1px solid var(--color-primary);
+  border: 1px solid var(--fs-accent);
   border-radius: 999px;
   background: transparent;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   font-size: 0.8rem;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
 .tag-pill:hover:not(:disabled) {
-  background: var(--color-primary);
+  background: var(--fs-accent);
   color: var(--fs-text-on-action);
 }
 .tag-pill.applied {
-  background: var(--color-success);
-  border-color: var(--color-success);
+  background: var(--fs-success);
+  border-color: var(--fs-success);
   color: var(--fs-text-on-action);
   cursor: default;
 }
@@ -111,8 +111,8 @@
 .assist-panel {
   width: 320px;
   flex-shrink: 0;
-  border-left: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  border-left: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -123,13 +123,13 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.65rem 0.9rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .assist-panel-title {
   flex: 1;
   font-size: 0.8rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -149,13 +149,13 @@
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin-bottom: 0.2rem;
 }
 .assist-sections {
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
   max-height: 200px;
   overflow-y: auto;
   flex-shrink: 0;
@@ -165,46 +165,46 @@
   cursor: pointer;
   font-size: 0.82rem;
   border-left: 3px solid transparent;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .assist-section-item:hover {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .assist-section-item.selected {
-  border-left-color: var(--color-primary);
-  background: var(--color-bg-secondary);
+  border-left-color: var(--fs-accent);
+  background: var(--fs-surface-raised);
   font-weight: 500;
 }
 .assist-empty,
 .assist-hint {
   padding: 0.6rem 0.7rem;
   font-size: 0.82rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .assist-target-preview {
   font-size: 0.8rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .assist-target-preview em {
   font-style: normal;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .assist-instruction {
   width: 100%;
   padding: 0.5rem 0.65rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   font-size: 0.88rem;
   font-family: inherit;
   resize: vertical;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   box-sizing: border-box;
   min-height: 3.5rem;
 }
@@ -216,22 +216,22 @@
 /* Streaming */
 .assist-streaming-label {
   font-size: 0.8rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .assist-preview-box {
   padding: 0.65rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
   font-size: 0.9rem;
   max-height: 300px;
   overflow-y: auto;
 }
 .typing-indicator {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.75rem;
   letter-spacing: 0.15em;
   animation: blink 1s step-end infinite;
@@ -244,18 +244,18 @@
 .assist-active-hint {
   padding: 0.5rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-align: center;
 }
 
 /* Error */
 .assist-error {
   padding: 0.5rem 0.75rem;
-  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-  border: 1px solid var(--color-danger);
-  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--fs-error) 10%, transparent);
+  border: 1px solid var(--fs-error);
+  border-radius: var(--fs-radius-sm);
   font-size: 0.85rem;
-  color: var(--color-danger);
+  color: var(--fs-error);
 }
 
 /* Review / diff */
@@ -265,12 +265,12 @@
   justify-content: space-between;
   font-size: 0.8rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .diff-view {
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
   font-size: 0.82rem;
   font-family: monospace;
   max-height: 340px;
@@ -284,15 +284,15 @@
   line-height: 1.5;
 }
 .diff-delete {
-  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
-  color: var(--color-danger);
+  background: color-mix(in srgb, var(--fs-error) 12%, transparent);
+  color: var(--fs-error);
 }
 .diff-insert {
-  background: color-mix(in srgb, var(--color-success) 12%, transparent);
-  color: var(--color-success);
+  background: color-mix(in srgb, var(--fs-success) 12%, transparent);
+  color: var(--fs-success);
 }
 .diff-equal {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .diff-marker {
   flex-shrink: 0;
@@ -308,7 +308,7 @@
 }
 .diff-empty {
   padding: 0.5rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.82rem;
 }
 .assist-actions {
@@ -316,63 +316,16 @@
   gap: 0.5rem;
 }
 
-/* ── Modal ── */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--color-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 200;
-}
-.modal-card {
-  background: var(--color-bg-card);
-  border-radius: var(--radius-md);
-  padding: 1.5rem;
-  max-width: 400px;
-  width: 90%;
-  box-shadow: 0 8px 32px var(--color-shadow);
-}
-.modal-title {
-  margin: 0 0 0.5rem;
-  font-size: 1.1rem;
-}
-.modal-message {
-  margin: 0 0 1.25rem;
-  color: var(--color-text-secondary);
-  font-size: 0.95rem;
-}
-.modal-actions {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-}
-.modal-btn {
-  padding: 0.45rem 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  cursor: pointer;
-  font-size: 0.9rem;
-}
-.modal-btn-danger {
-  background: var(--color-danger);
-  color: var(--fs-text-on-action);
-  border-color: var(--color-danger);
-}
-
 /* ── Floating inline assist button (teleported to body) ── */
 .inline-assist-btn {
   position: fixed;
   z-index: 100;
   transform: translateX(-50%);
   padding: 0.3rem 0.75rem;
-  background: var(--color-action-primary);
+  background: var(--fs-action-primary);
   color: var(--fs-text-on-action);
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-size: 0.8rem;
   box-shadow: 0 2px 8px var(--color-shadow);
@@ -384,12 +337,12 @@
   display: none;
   width: 100%;
   padding: 0.6rem 1rem;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
   border: none;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   font-size: 0.85rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   cursor: pointer;
   text-align: left;
   font-family: inherit;
@@ -408,7 +361,7 @@
 .sb-label {
   font-size: 0.78rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -416,10 +369,10 @@
 .sb-input {
   width: 100%;
   padding: 0.35rem 0.5rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
   box-sizing: border-box;
@@ -427,11 +380,11 @@
 .sb-select:focus,
 .sb-input:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .sb-divider {
   height: 1px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   margin: 0.15rem 0;
 }
 @media (max-width: 720px) {
@@ -452,8 +405,8 @@
     width: auto;
     flex: 0 0 45%;
     border-left: none;
-    border-top: 1px solid var(--color-border);
-    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    border-top: 1px solid var(--fs-border-color);
+    border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0;
   }
   .editor-header {
     padding: 0.75rem 1rem 0.5rem;
@@ -480,14 +433,14 @@
 .btn-accept,
 .btn-generate,
 .btn-save {
-  background: var(--color-action-primary);
+  background: var(--fs-action-primary);
   color: var(--fs-text-on-action);
   border: none;
 }
 .btn-accept:not(:disabled):hover,
 .btn-generate:not(:disabled):hover,
 .btn-save:not(:disabled):hover {
-  background: var(--color-action-primary-hover);
+  background: var(--fs-action-primary-hover);
 }
 
 .btn-back,
@@ -497,7 +450,7 @@
 .btn-suggest-tags {
   background: none;
   border: var(--fs-border);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .btn-back:not(:disabled):hover,
 .btn-clear:not(:disabled):hover,
@@ -505,16 +458,16 @@
 .btn-proofread:not(:disabled):hover,
 .btn-suggest-tags:not(:disabled):hover {
   border: var(--fs-border-hover);
-  background: var(--color-hover);
+  background: var(--fs-surface-hover);
 }
 
 .btn-delete {
-  background: var(--color-action-destructive);
+  background: var(--fs-action-destructive);
   color: var(--fs-text-on-action);
   border: none;
 }
 .btn-delete:not(:disabled):hover {
-  background: var(--color-action-destructive-hover);
+  background: var(--fs-action-destructive-hover);
 }
 
 /* Shared geometry for every alias above. */
@@ -541,12 +494,12 @@
 .btn-dismiss-tags {
   background: none;
   border: none;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   padding: 2px var(--fs-space-1);
   font-size: var(--fs-size-tiny);
   line-height: 1;
 }
-.btn-dismiss-tags:hover { color: var(--color-text); }
+.btn-dismiss-tags:hover { color: var(--fs-text-primary); }
 
 .btn-accept:disabled, .btn-generate:disabled, .btn-save:disabled,
 .btn-back:disabled, .btn-clear:disabled, .btn-reject:disabled,

frontend/src/assets/prose.css

@@ -41,8 +41,8 @@
 }
 
 .prose pre {
-  background: var(--color-code-bg);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-code);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
   padding: 0.75rem;
   overflow-x: auto;
@@ -57,7 +57,7 @@
 }
 
 .prose code {
-  background: var(--color-code-inline-bg);
+  background: var(--fs-surface-code-inline);
   border-radius: 3px;
   padding: 0.15rem 0.35rem;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
@@ -73,25 +73,25 @@
 
 .prose th,
 .prose td {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   padding: 0.4rem 0.6rem;
   text-align: left;
 }
 
 .prose thead th {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
   font-weight: 600;
 }
 
 .prose tbody tr:nth-child(even) {
-  background: var(--color-table-stripe);
+  background: var(--fs-table-stripe);
 }
 
 .prose blockquote {
-  border-left: 3px solid var(--color-border);
+  border-left: 3px solid var(--fs-border-color);
   margin: 0 0 0.6rem;
   padding: 0.25rem 0 0.25rem 0.75rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .prose blockquote p:last-child {
@@ -100,7 +100,7 @@
 
 .prose hr {
   border: none;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   margin: 1rem 0;
 }
 
@@ -110,7 +110,7 @@
 }
 
 .prose a {
-  color: var(--color-primary);
+  color: var(--fs-accent);
   text-decoration: none;
 }
 
@@ -119,8 +119,8 @@
 }
 
 .prose .inline-tag {
-  color: var(--color-tag-text);
-  background: var(--color-tag-bg);
+  color: var(--fs-accent);
+  background: var(--fs-accent-soft);
   padding: 0.1rem 0.35rem;
   border-radius: 4px;
   text-decoration: none;
@@ -133,8 +133,8 @@
 }
 
 .prose .wikilink {
-  color: var(--color-wikilink);
-  background: var(--color-wikilink-bg);
+  color: var(--fs-wikilink);
+  background: var(--fs-accent-soft);
   padding: 0.1rem 0.35rem;
   border-radius: 4px;
   text-decoration: none;
@@ -168,7 +168,7 @@
 
 .prose ul[data-type="taskList"] li > label input[type="checkbox"] {
   cursor: pointer;
-  accent-color: var(--color-primary);
+  accent-color: var(--fs-accent);
   width: 0.95em;
   height: 0.95em;
   margin: 0;
@@ -180,7 +180,7 @@
 
 .prose ul[data-type="taskList"] li[data-checked="true"] > div {
   text-decoration: line-through;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* Interactive checkboxes — marked output in the list-note viewer */
@@ -196,7 +196,7 @@
 }
 .prose--checklist li input[type="checkbox"] {
   flex-shrink: 0;
-  accent-color: var(--color-primary);
+  accent-color: var(--fs-accent);
   cursor: pointer;
   width: 0.95em;
   height: 0.95em;
@@ -205,7 +205,7 @@
 .prose--checklist li:has(input[type="checkbox"]:checked) > p,
 .prose--checklist li:has(input[type="checkbox"]:checked) {
   text-decoration: line-through;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .prose--checklist li:has(input[type="checkbox"]:checked) input[type="checkbox"] {
   text-decoration: none; /* don't strike through the checkbox itself */
@@ -219,7 +219,7 @@
 }
 
 .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   content: attr(data-placeholder);
   float: left;
   height: 0;
@@ -227,12 +227,12 @@
 }
 
 .tiptap-wrapper {
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
 }
 
 .tiptap-wrapper:focus-within {
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--fs-focus-ring);
 }

frontend/src/assets/theme.css

@@ -188,126 +188,21 @@
  */
 
 /* ==========================================================================
-   COMPATIBILITY ALIASES — the app's historical names, pointing at the system.
-
-   These exist so ~55 components keep working while they migrate to --fs-*
-   one at a time. Every one is a plain var() reference, which is what lets this
-   block be declared ONCE: when [data-theme="light"] moves --fs-surface-page,
-   --color-bg follows, because the alias resolves at use time.
-
-   That is why this file lost 48 of its 60 dark-mode overrides — they were all
-   restating relationships the aliases now express directly.
-
-   Removing this block is a rename sweep across the components, tracked
-   separately. Nothing new should reference a --color-* name.
+   The compatibility-alias block that lived here is GONE (#2533). It let ~55
+   components keep their historical --color-* names while theme.css was
+   repointed at the design system; the rename sweep it promised ran on
+   2026-08-08 and every component now references --fs-* directly. Do not
+   reintroduce app-local alias names — the design system's tokens are the
+   vocabulary, and check_snippets_against_design_system can only see through
+   names the system actually declares.
    ========================================================================== */
 
 :root {
-  /* surfaces */
-  --color-bg: var(--fs-surface-page);
-  --color-bg-secondary: var(--fs-surface-raised);
-  --color-bg-card: var(--fs-surface-raised);
-  --color-surface: var(--fs-surface-hover);
-  --color-code-bg: var(--fs-surface-code);
-  --color-code-inline-bg: var(--fs-surface-code-inline);
-  --color-table-stripe: var(--fs-table-stripe);
-  --color-overlay: var(--fs-overlay);
-
-  /* text */
-  --color-text: var(--fs-text-primary);
-  --color-text-secondary: var(--fs-text-secondary);
-  --color-text-muted: var(--fs-text-tertiary);
-
-  /* lines */
-  --color-border: var(--fs-border-color);
-  --color-input-border: var(--fs-border-color);
-  --focus-ring: var(--fs-focus-ring);
-
-  /* brand */
-  --color-primary: var(--fs-accent);
-  --color-primary-solid: var(--fs-accent);
-  --color-primary-deep: var(--fs-accent-deep);
-  --color-primary-faint: var(--fs-accent-faint);
-  --color-primary-tint: var(--fs-accent-soft);
-  --color-primary-wash: var(--fs-accent-wash);
-  --color-tag-bg: var(--fs-accent-soft);
-  --color-tag-text: var(--fs-accent);
-  --color-wikilink: var(--fs-wikilink);
-  --color-wikilink-bg: var(--fs-accent-soft);
-  --gradient-cta: var(--fs-gradient-cta);
-  --glow-cta: var(--fs-glow-cta);
-  --glow-cta-hover: var(--fs-glow-cta-hover);
-
-  /* actions */
-  --color-action-primary: var(--fs-action-primary);
-  --color-action-primary-hover: var(--fs-action-primary-hover);
-  --color-action-secondary: var(--fs-action-secondary);
-  --color-action-secondary-hover: var(--fs-action-secondary-hover);
-  --color-action-destructive: var(--fs-action-destructive);
-  --color-action-destructive-hover: var(--fs-action-destructive-hover);
-
-  /* semantic */
-  --color-success: var(--fs-success);
-  --color-warning: var(--fs-warning);
-  --color-danger: var(--fs-error);
-  --color-overdue: var(--fs-overdue);
-  --color-toast-success: var(--fs-success);
-  --color-toast-error: var(--fs-error);
+  /* A VALUE, not an alias — the one survivor of the alias block. The design
+     system has no shadow-colour token yet, so this is a recorded gap: when a
+     second app needs it, promote it to an --fs-* token in the system and
+     regenerate, rather than copying this line. */
   --color-shadow: rgba(0, 0, 0, 0.4);
-
-  /* task status + priority */
-  --color-status-todo: var(--fs-status-todo);
-  --color-status-todo-bg: var(--fs-status-todo-bg);
-  --color-status-in-progress: var(--fs-status-in-progress);
-  --color-status-in-progress-bg: var(--fs-status-in-progress-bg);
-  --color-status-done: var(--fs-status-done);
-  --color-status-done-bg: var(--fs-status-done-bg);
-  --color-priority-low: var(--fs-priority-low);
-  --color-priority-low-bg: var(--fs-priority-low-bg);
-  --color-priority-medium: var(--fs-priority-medium);
-  --color-priority-medium-bg: var(--fs-priority-medium-bg);
-  --color-priority-high: var(--fs-priority-high);
-  --color-priority-high-bg: var(--fs-priority-high-bg);
-
-  /* geometry */
-  --radius-sm: var(--fs-radius-sm);
-  --radius-md: var(--fs-radius-lg);   /* NB: the app's "md" is the system's LARGE */
-  --radius-lg: var(--fs-radius-xl);   /* and the app's "lg" is the system's XL */
-  --page-max-width: var(--fs-layout-page-max);
-  --page-padding-x: var(--fs-layout-page-pad);
-  --sidebar-width: var(--fs-layout-sidebar);
-  --header-height: var(--fs-layout-header);
-
-  /* ------------------------------------------------------------------
-     Names components reference that were NEVER declared anywhere.
-
-     Each of these was reached for with a hardcoded fallback, so the page
-     rendered — but the fallback was what rendered, always, and several were
-     off-palette: --color-primary-bg fell back to an indigo, --color-destructive
-     to a brick that is not the oxblood, --color-status-cancelled to a grey from
-     no palette in this system.
-
-     Wiring them to real tokens is the whole point of the exercise. Expect small
-     visual shifts exactly where a fallback had drifted; that shift IS the fix.
-     ------------------------------------------------------------------ */
-  --color-accent: var(--fs-accent);
-  /* Foreground ON the accent, so it follows the accent's mode-independence,
-     not the page text's. Pointing this at --fs-text-primary made it invert to
-     obsidian on light — over a mid-tone accent, well under the AA floor. */
-  --color-accent-fg: var(--fs-text-on-action);
-  --color-hover: var(--fs-surface-hover);
-  --color-bg-hover: var(--fs-surface-hover);
-  --color-bg-tertiary: var(--fs-surface-hover);
-  --color-surface-2: var(--fs-surface-hover);
-  --color-surface-alt: var(--fs-surface-hover);
-  --color-surface-raised: var(--fs-surface-raised);
-  --color-input-bg: var(--fs-surface-page);
-  --color-muted: var(--fs-text-tertiary);
-  --color-destructive: var(--fs-destructive);
-  --color-primary-bg: var(--fs-accent-soft);
-  --color-status-cancelled: var(--fs-status-cancelled);
-  --font-display: var(--fs-font-display);
-  --font-mono: var(--fs-font-mono);
 }
 
 /* ==========================================================================

frontend/src/assets/viewer-shared.css

@@ -15,27 +15,27 @@
   white-space: nowrap;
 }
 .ctx-crumb-parent {
-  color: var(--color-text-muted);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  color: var(--fs-text-tertiary);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   text-decoration: none;
 }
 .ctx-crumb-parent:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+  color: var(--fs-accent);
+  border-color: var(--fs-accent);
 }
 .ctx-crumb-project {
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent);
   text-decoration: none;
   font-weight: 500;
 }
 .ctx-crumb-project:hover {
-  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 18%, transparent);
 }
 .ctx-crumb-milestone {
-  color: var(--color-text-secondary);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  color: var(--fs-text-secondary);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
 }

frontend/src/components/AppHeader.vue

@@ -124,8 +124,8 @@ router.afterEach(() => {
 
 <style scoped>
 .app-header {
-  background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
-  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
+  background: linear-gradient(180deg, var(--fs-surface-hover), var(--fs-surface-page));
+  border-bottom: 1px solid color-mix(in srgb, var(--fs-accent) 18%, transparent);
   position: relative;
 }
 /* Three tracks, not a flex row with an absolutely-centred overlay.
@@ -178,7 +178,7 @@ router.afterEach(() => {
   display: flex;
   align-items: center;
   gap: 2px;
-  background: var(--color-primary-faint);
+  background: var(--fs-accent-faint);
   border-radius: 10px;
   padding: 3px;
 }
@@ -194,7 +194,7 @@ router.afterEach(() => {
 }
 
 .nav-link {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-decoration: none;
   font-size: 0.82rem;
   padding: 0.3rem 0.75rem;
@@ -202,14 +202,14 @@ router.afterEach(() => {
   transition: background 0.15s, color 0.15s;
 }
 .nav-link:hover {
-  color: var(--color-text);
-  background: var(--color-primary-tint);
+  color: var(--fs-text-primary);
+  background: var(--fs-accent-soft);
 }
 .nav-link.router-link-active {
-  color: var(--color-primary-solid);
+  color: var(--fs-accent);
   font-weight: 500;
-  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 25%, transparent);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--fs-accent) 30%, transparent);
 }
 
 /* Status indicator */
@@ -229,7 +229,7 @@ router.afterEach(() => {
 .status-text {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 /* Status dots are indicator lights, not semantic-palette buttons —
    they want to read as vital (Moss/Warning/Error are too muted for
@@ -239,7 +239,7 @@ router.afterEach(() => {
 .status-yellow .status-dot { background: #facc15; animation: pulse-dot 2s infinite; }
 .status-orange .status-dot { background: #f97316; }
 .status-red .status-dot    { background: #ef4444; }
-.status-gray .status-dot   { background: var(--color-text-muted); animation: pulse-dot 2s infinite; }
+.status-gray .status-dot   { background: var(--fs-text-tertiary); animation: pulse-dot 2s infinite; }
 @keyframes pulse-dot {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
@@ -252,12 +252,12 @@ router.afterEach(() => {
 /* Icon buttons (?, theme, gear) */
 .btn-icon {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.45rem;
   cursor: pointer;
   font-size: 0.95rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   line-height: 1;
   display: flex;
   align-items: center;
@@ -265,9 +265,9 @@ router.afterEach(() => {
 }
 .btn-icon:hover,
 .btn-icon.active {
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  border-color: var(--color-primary);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border-color: var(--fs-accent);
 }
 
 /* User info */
@@ -277,11 +277,11 @@ router.afterEach(() => {
   gap: 0.4rem;
   margin-left: 0.25rem;
   padding-left: 0.5rem;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--fs-border-color);
 }
 .username {
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-weight: 500;
   /* The widest thing on the right and the only one that can give: a long
      username shouldn't be what decides where the nav bar sits. */
@@ -295,24 +295,24 @@ router.afterEach(() => {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
   padding: 0.1rem 0.35rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
 }
 .btn-logout {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.2rem 0.5rem;
   cursor: pointer;
   font-size: 0.8rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-family: inherit;
 }
 .btn-logout:hover {
-  color: var(--color-danger);
-  border-color: var(--color-danger);
+  color: var(--fs-error);
+  border-color: var(--fs-error);
 }
 
 /* Hamburger — mobile only */
@@ -330,7 +330,7 @@ router.afterEach(() => {
   display: block;
   width: 20px;
   height: 2px;
-  background: var(--color-text);
+  background: var(--fs-text-primary);
   border-radius: 1px;
 }
 
@@ -339,13 +339,13 @@ router.afterEach(() => {
   display: flex;
   flex-direction: column;
   padding: 0.5rem 1rem 0.75rem;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  border-top: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
   gap: 0.1rem;
 }
 .mobile-divider {
   height: 1px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   margin: 0.4rem 0;
 }
 .mobile-actions {
@@ -359,7 +359,7 @@ router.afterEach(() => {
   align-items: center;
   gap: 0.5rem;
   padding-top: 0.4rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   margin-top: 0.25rem;
 }
 
@@ -398,7 +398,7 @@ router.afterEach(() => {
     border-radius: 8px;
   }
   .mobile-menu .nav-link.router-link-active {
-    background: var(--color-primary-wash);
+    background: var(--fs-accent-wash);
     box-shadow: none;
   }
   .mobile-user .btn-logout {

frontend/src/components/AppLogo.vue

@@ -13,8 +13,8 @@ defineProps<{ size?: number }>();
   >
     <defs>
       <linearGradient id="logo-gradient" x1="0" y1="0" x2="1" y2="1">
-        <stop offset="0%" stop-color="var(--color-primary-solid)" />
-        <stop offset="100%" stop-color="var(--color-primary-deep)" />
+        <stop offset="0%" stop-color="var(--fs-accent)" />
+        <stop offset="100%" stop-color="var(--fs-accent-deep)" />
       </linearGradient>
     </defs>
     <!-- Book body -->
@@ -44,12 +44,12 @@ defineProps<{ size?: number }>();
 <style scoped>
 .logo-book {
   fill: url(#logo-gradient);
-  stroke: color-mix(in srgb, var(--color-primary) 70%, transparent);
+  stroke: color-mix(in srgb, var(--fs-accent) 70%, transparent);
 }
 .logo-spine {
-  stroke: var(--color-text-secondary);
+  stroke: var(--fs-text-secondary);
 }
 .logo-lines {
-  stroke: var(--color-text-muted);
+  stroke: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/DiffView.vue

@@ -90,9 +90,9 @@ function markerFor(type: DiffLine['type']): string {
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
   overflow: hidden;
 }
 
@@ -103,15 +103,15 @@ function markerFor(type: DiffLine['type']): string {
   display: flex;
   gap: 1rem;
   padding: 0.4rem 0.75rem;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border-bottom: 1px solid var(--fs-border-color);
   font-size: 0.78rem;
   font-family: monospace;
   font-weight: 600;
 }
 
-.diff-summary-ins { color: var(--color-success); }
-.diff-summary-del { color: var(--color-danger); }
+.diff-summary-ins { color: var(--fs-success); }
+.diff-summary-del { color: var(--fs-error); }
 
 .diff-scroll {
   flex: 1;
@@ -123,7 +123,7 @@ function markerFor(type: DiffLine['type']): string {
 .diff-empty {
   padding: 0.75rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .diff-line {
@@ -136,24 +136,24 @@ function markerFor(type: DiffLine['type']): string {
 }
 
 .diff-delete {
-  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
-  color: var(--color-danger);
+  background: color-mix(in srgb, var(--fs-error) 12%, transparent);
+  color: var(--fs-error);
 }
 
 .diff-insert {
-  background: color-mix(in srgb, var(--color-success) 12%, transparent);
-  color: var(--color-success);
+  background: color-mix(in srgb, var(--fs-success) 12%, transparent);
+  color: var(--fs-success);
 }
 
 .diff-equal {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .diff-collapse {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   opacity: 0.6;
-  border-top: 1px dashed var(--color-border);
-  border-bottom: 1px dashed var(--color-border);
+  border-top: 1px dashed var(--fs-border-color);
+  border-bottom: 1px dashed var(--fs-border-color);
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
 }

frontend/src/components/HistoryPanel.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from "vue";
 import { apiGet, pinNoteVersion, unpinNoteVersion } from "@/api/client";
 import DiffView from "@/components/DiffView.vue";
 import type { DiffLine } from "@/composables/useAssist";
+import { fmtStamp } from "@/utils/dateFormat";
 
 interface NoteVersion {
   id: number;
@@ -56,14 +57,6 @@ const diff = computed<DiffLine[]>(() => {
   return result;
 });
 
-function formatDate(iso: string): string {
-  const d = new Date(iso);
-  return d.toLocaleString(undefined, {
-    month: 'short', day: 'numeric', year: 'numeric',
-    hour: '2-digit', minute: '2-digit',
-  });
-}
-
 async function loadVersions() {
   loading.value = true;
   try {
@@ -212,7 +205,7 @@ onMounted(loadVersions);
                 v-if="v.pin_kind === 'manual' && v.pin_label"
                 class="history-item-label"
               >{{ v.pin_label }}</div>
-              <div class="history-item-date">{{ formatDate(v.created_at) }}</div>
+              <div class="history-item-date">{{ fmtStamp(v.created_at) }}</div>
             </div>
           </div>
 
@@ -309,7 +302,7 @@ onMounted(loadVersions);
   align-items: center;
   justify-content: space-between;
   padding: 0.9rem 1.25rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .history-title {
@@ -322,11 +315,11 @@ onMounted(loadVersions);
   border: none;
   font-size: 1.25rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   line-height: 1;
   padding: 0.1rem 0.3rem;
 }
-.history-close:hover { color: var(--color-text); }
+.history-close:hover { color: var(--fs-text-primary); }
 
 .history-body {
   flex: 1;
@@ -338,7 +331,7 @@ onMounted(loadVersions);
 .history-list {
   width: 220px;
   flex-shrink: 0;
-  border-right: 1px solid var(--color-border);
+  border-right: 1px solid var(--fs-border-color);
   overflow-y: auto;
 }
 
@@ -346,18 +339,18 @@ onMounted(loadVersions);
   padding: 0.6rem 0.9rem;
   cursor: pointer;
   border-left: 3px solid transparent;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
-.history-item:hover { background: var(--color-bg-secondary); }
+.history-item:hover { background: var(--fs-surface-raised); }
 .history-item.selected {
-  border-left-color: var(--color-primary);
-  background: var(--color-bg-secondary);
+  border-left-color: var(--fs-accent);
+  background: var(--fs-surface-raised);
 }
 
 .history-item-title {
   font-size: 0.85rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -365,7 +358,7 @@ onMounted(loadVersions);
 
 .history-item-date {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin-top: 0.15rem;
 }
 
@@ -381,7 +374,7 @@ onMounted(loadVersions);
 .history-empty {
   padding: 1rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .history-footer {
@@ -390,7 +383,7 @@ onMounted(loadVersions);
   gap: 0.5rem;
   justify-content: flex-end;
   padding: 0.75rem 1.25rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 
 
@@ -403,12 +396,12 @@ onMounted(loadVersions);
   font-size: 0.85em;
   line-height: 1;
 }
-.pin-badge-manual { color: var(--color-primary); }
-.pin-badge-auto { color: var(--color-text-muted); }
+.pin-badge-manual { color: var(--fs-accent); }
+.pin-badge-auto { color: var(--fs-text-tertiary); }
 
 .history-item-label {
   font-size: 0.72rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   font-style: italic;
   margin-top: 0.15rem;
   overflow: hidden;
@@ -419,7 +412,7 @@ onMounted(loadVersions);
 /* ── Pin controls above the diff ────────────────────────────────────────── */
 .version-pin-controls {
   padding: 0.4rem 0.5rem 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   font-size: 0.82rem;
 }
 .pin-actions {
@@ -430,7 +423,7 @@ onMounted(loadVersions);
 }
 .pin-state {
   font-style: italic;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -442,13 +435,13 @@ onMounted(loadVersions);
   font-size: 0.78rem;
   background: transparent;
   color: inherit;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   cursor: pointer;
 }
 .btn-pin:hover:not(:disabled), .btn-pin-edit:hover:not(:disabled) {
   background: rgba(99, 102, 241, 0.12);
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .btn-unpin:hover:not(:disabled) {
   background: rgba(239, 68, 68, 0.10);
@@ -463,27 +456,27 @@ onMounted(loadVersions);
   flex: 1;
   padding: 0.3rem 0.5rem;
   font-size: 0.85rem;
-  background: var(--color-input-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   color: inherit;
 }
 .pin-label-input:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .btn-pin-save, .btn-pin-cancel {
   padding: 0.3rem 0.7rem;
   font-size: 0.78rem;
   background: transparent;
   color: inherit;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
 }
 .btn-pin-save:hover:not(:disabled) {
   background: rgba(99, 102, 241, 0.12);
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .btn-pin-save:disabled, .btn-pin-cancel:disabled,
 .btn-pin:disabled, .btn-pin-edit:disabled, .btn-unpin:disabled {

frontend/src/components/InlineAssistPanel.vue

@@ -74,11 +74,11 @@ const markers: Record<DiffLine["type"], string> = {
 
 <style scoped>
 .iap {
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   margin-bottom: 0.75rem;
   overflow: hidden;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-page);
 }
 
 /* ── Header ── */
@@ -88,16 +88,16 @@ const markers: Record<DiffLine["type"], string> = {
   gap: 0.5rem;
   padding: 0.45rem 0.75rem;
   font-size: 0.85rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
 }
 
 /* ── Streaming ── */
 .iap-streaming {
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .iap-streaming .iap-header {
-  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-secondary));
+  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-raised));
 }
 
 .iap-pulse {
@@ -105,7 +105,7 @@ const markers: Record<DiffLine["type"], string> = {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary);
+  background: var(--fs-accent);
   flex-shrink: 0;
   animation: iap-pulse 1.2s ease-in-out infinite;
 }
@@ -117,7 +117,7 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-label {
   flex: 1;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -125,9 +125,9 @@ const markers: Record<DiffLine["type"], string> = {
 
 .iap-btn-cancel {
   background: none;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-secondary);
+  border-radius: var(--fs-radius-sm);
   padding: 0.15rem 0.5rem;
   cursor: pointer;
   font-size: 0.8rem;
@@ -135,8 +135,8 @@ const markers: Record<DiffLine["type"], string> = {
   flex-shrink: 0;
 }
 .iap-btn-cancel:hover {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
+  border-color: var(--fs-error);
+  color: var(--fs-error);
 }
 
 .iap-stream-preview {
@@ -150,29 +150,29 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-waiting {
   padding: 0.75rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* ── Review ── */
 .iap-review-title {
   flex: 1;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .iap-btn-toggle {
   background: none;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-secondary);
+  border-radius: var(--fs-radius-sm);
   padding: 0.15rem 0.5rem;
   cursor: pointer;
   font-size: 0.78rem;
   font-family: inherit;
 }
 .iap-btn-toggle:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  border-color: var(--fs-accent);
+  color: var(--fs-accent);
 }
 
 .iap-actions {
@@ -183,7 +183,7 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-btn-accept,
 .iap-btn-reject {
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   padding: 0.2rem 0.65rem;
   cursor: pointer;
   font-size: 0.8rem;
@@ -191,19 +191,19 @@ const markers: Record<DiffLine["type"], string> = {
   font-weight: var(--fs-weight-medium);
 }
 .iap-btn-accept {
-  background: var(--color-success);
+  background: var(--fs-success);
   color: var(--fs-text-on-action);
 }
 .iap-btn-accept:hover { opacity: 0.85; }
 
 .iap-btn-reject {
-  background: var(--color-bg-card);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-secondary);
+  border: 1px solid var(--fs-border-color);
 }
 .iap-btn-reject:hover {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
+  border-color: var(--fs-error);
+  color: var(--fs-error);
 }
 
 /* ── Diff ── */
@@ -224,14 +224,14 @@ const markers: Record<DiffLine["type"], string> = {
   word-break: break-word;
 }
 
-.iap-diff-equal  { color: var(--color-text-muted); }
+.iap-diff-equal  { color: var(--fs-text-tertiary); }
 .iap-diff-delete {
-  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-  color: var(--color-danger);
+  background: color-mix(in srgb, var(--fs-error) 10%, transparent);
+  color: var(--fs-error);
 }
 .iap-diff-insert {
-  background: color-mix(in srgb, var(--color-success) 10%, transparent);
-  color: var(--color-success);
+  background: color-mix(in srgb, var(--fs-success) 10%, transparent);
+  color: var(--fs-success);
 }
 
 .iap-diff-marker {
@@ -243,7 +243,7 @@ const markers: Record<DiffLine["type"], string> = {
 
 .iap-diff-empty {
   padding: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.85rem;
   font-family: inherit;
 }

frontend/src/components/MarkdownToolbar.vue

@@ -111,9 +111,9 @@ const groups = [
   align-items: center;
   gap: 2px;
   flex-wrap: wrap;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 3px 4px;
 }
 
@@ -127,7 +127,7 @@ const groups = [
   display: block;
   width: 1px;
   height: 18px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   flex-shrink: 0;
   margin: 0 3px;
 }
@@ -141,7 +141,7 @@ const groups = [
   border: none;
   border-radius: 5px;
   background: transparent;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   cursor: pointer;
   padding: 0;
   transition: background 0.12s, color 0.12s, box-shadow 0.12s;
@@ -149,19 +149,19 @@ const groups = [
 }
 
 .md-btn:hover {
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .md-btn.active {
-  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
-  color: var(--color-primary);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 14%, transparent);
+  color: var(--fs-accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fs-accent) 35%, transparent);
 }
 
 .md-btn.active:hover {
-  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
 }
 
 .btn-icon {

frontend/src/components/MilestoneSelector.vue

@@ -66,10 +66,10 @@ function onChange(e: Event) {
 <style scoped>
 .milestone-select {
   padding: 0.4rem 0.6rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
   box-sizing: border-box;
@@ -77,7 +77,7 @@ function onChange(e: Event) {
 }
 .milestone-select:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .milestone-select:disabled {
   opacity: 0.5;

frontend/src/components/NoteCard.vue

@@ -60,15 +60,15 @@ function goEdit() {
 .note-card {
   display: block;
   padding: 1rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   text-decoration: none;
   color: inherit;
-  background: var(--color-bg-card);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent);
+  background: var(--fs-surface-raised);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 6%, transparent);
   transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .note-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--color-primary) 14.0%, transparent);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 14.0%, transparent);
   transform: translateY(-2px);
 }
 
@@ -78,18 +78,18 @@ function goEdit() {
   align-items: center;
   gap: 0.6rem;
   padding: 0.45rem 0.75rem;
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
   box-shadow: none;
   border-radius: 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   transform: none !important;
 }
 .note-card.compact:first-child {
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 .note-card.compact:hover {
   box-shadow: none;
-  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 4%, transparent);
   transform: none;
 }
 .note-title-compact {
@@ -108,7 +108,7 @@ function goEdit() {
 }
 .timestamp-compact {
   font-size: 0.72rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
   white-space: nowrap;
 }
@@ -133,20 +133,20 @@ function goEdit() {
   flex-shrink: 0;
   padding: 0.25rem 0.6rem;
   font-size: 0.8rem;
-  background: var(--color-bg-card);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-secondary);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   transition: color 0.15s, border-color 0.15s;
 }
 .btn-edit:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+  color: var(--fs-accent);
+  border-color: var(--fs-accent);
 }
 .note-preview {
   margin: 0 0 0.5rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: 0.9rem;
   max-height: 7.5em;
   overflow: hidden;
@@ -163,6 +163,6 @@ function goEdit() {
 .timestamp {
   margin-left: auto;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/NotificationBell.vue

@@ -60,11 +60,11 @@ onUnmounted(() => {
 
 .btn-bell {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.45rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -72,16 +72,16 @@ onUnmounted(() => {
 }
 .btn-bell:hover,
 .btn-bell.active {
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  border-color: var(--color-primary);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border-color: var(--fs-accent);
 }
 
 .bell-badge {
   position: absolute;
   top: -5px;
   right: -5px;
-  background: var(--color-danger);
+  background: var(--fs-error);
   color: var(--fs-text-on-action);
   font-size: 0.6rem;
   font-weight: 700;

frontend/src/components/NotificationsPanel.vue

@@ -85,9 +85,9 @@ onMounted(() => store.fetchAll())
   width: 340px;
   max-height: 400px;
   overflow-y: auto;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  background: var(--fs-surface-hover);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-xl);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
   z-index: 500;
 }
@@ -97,10 +97,10 @@ onMounted(() => store.fetchAll())
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   position: sticky;
   top: 0;
-  background: var(--color-surface);
+  background: var(--fs-surface-hover);
 }
 
 .notif-panel-title {
@@ -114,12 +114,12 @@ onMounted(() => store.fetchAll())
   align-items: flex-start;
   gap: 0.6rem;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   cursor: pointer;
   transition: background 0.1s;
 }
 .notif-item:last-child { border-bottom: none; }
-.notif-item:hover { background: var(--color-hover); }
+.notif-item:hover { background: var(--fs-surface-hover); }
 
 .notif-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
 
@@ -127,10 +127,10 @@ onMounted(() => store.fetchAll())
 .notif-msg {
   margin: 0 0 0.2rem;
   font-size: 0.85rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   line-height: 1.4;
   word-break: break-word;
 }
-.notif-time { font-size: 0.75rem; color: var(--color-muted); }
+.notif-time { font-size: 0.75rem; color: var(--fs-text-tertiary); }
 
 </style>

frontend/src/components/PaginationBar.vue

@@ -74,27 +74,27 @@ function goToPage(page: number) {
 }
 .page-btn {
   padding: 0.35rem 0.7rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-size: 0.85rem;
 }
 .page-btn:hover:not(:disabled) {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .page-btn:disabled {
   opacity: 0.4;
   cursor: default;
 }
 .page-btn.active {
-  background: var(--color-primary);
+  background: var(--fs-accent);
   color: var(--fs-text-on-action);
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .ellipsis {
   padding: 0 0.25rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/PriorityBadge.vue

@@ -33,15 +33,15 @@ const labels: Record<TaskPriority, string> = {
   letter-spacing: 0.025em;
 }
 .priority-low {
-  background: var(--color-priority-low-bg);
-  color: var(--color-priority-low);
+  background: var(--fs-priority-low-bg);
+  color: var(--fs-priority-low);
 }
 .priority-medium {
-  background: var(--color-priority-medium-bg);
-  color: var(--color-priority-medium);
+  background: var(--fs-priority-medium-bg);
+  color: var(--fs-priority-medium);
 }
 .priority-high {
-  background: var(--color-priority-high-bg);
-  color: var(--color-priority-high);
+  background: var(--fs-priority-high-bg);
+  color: var(--fs-priority-high);
 }
 </style>

frontend/src/components/ProjectDesignTab.vue

@@ -128,16 +128,16 @@ watch(() => [props.projectId, props.designSystemId], run);
 }
 
 .pdt-note {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-left: 3px solid var(--color-warning);
+  background: var(--fs-surface-hover);
+  border: 1px solid var(--fs-border-color);
+  border-left: 3px solid var(--fs-warning);
   border-radius: var(--fs-radius-sm);
   padding: var(--fs-space-3) var(--fs-space-4);
 }
 
 .pdt-note p {
   margin: var(--fs-space-2) 0 0;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: var(--fs-size-body-sm);
   line-height: var(--fs-leading-body);
   max-width: 70ch;
@@ -146,18 +146,18 @@ watch(() => [props.projectId, props.designSystemId], run);
 .pdt-muted,
 .pdt-clean,
 .pdt-summary {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: var(--fs-size-body-sm);
   margin: 0 0 var(--fs-space-3);
   max-width: 70ch;
 }
 
 .pdt-clean {
-  color: var(--color-status-done);
+  color: var(--fs-status-done);
 }
 
 .pdt-summary {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .pdt-list {
@@ -170,7 +170,7 @@ watch(() => [props.projectId, props.designSystemId], run);
 }
 
 .pdt-finding {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: var(--fs-radius-md);
   padding: var(--fs-space-3);
   min-width: 0;
@@ -179,11 +179,11 @@ watch(() => [props.projectId, props.designSystemId], run);
 .pdt-title {
   display: block;
   font-weight: var(--fs-weight-medium);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   text-decoration: none;
   margin-bottom: var(--fs-space-2);
 }
-.pdt-title:hover { color: var(--color-primary-solid); }
+.pdt-title:hover { color: var(--fs-accent); }
 
 .pdt-row {
   display: flex;
@@ -205,18 +205,18 @@ watch(() => [props.projectId, props.designSystemId], run);
 }
 
 .pdt-tag.unknown {
-  background: var(--color-priority-high-bg);
-  color: var(--color-priority-high);
+  background: var(--fs-priority-high-bg);
+  color: var(--fs-priority-high);
 }
 
 .pdt-tag.local {
-  background: var(--color-priority-medium-bg);
-  color: var(--color-priority-medium);
+  background: var(--fs-priority-medium-bg);
+  color: var(--fs-priority-medium);
 }
 
 .pdt-tag.superseded {
-  background: var(--color-surface);
-  color: var(--color-text-muted);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-tertiary);
 }
 
 .pdt-detail {
@@ -224,7 +224,7 @@ watch(() => [props.projectId, props.designSystemId], run);
   flex-wrap: wrap;
   gap: var(--fs-space-2);
   font-size: var(--fs-size-code);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   min-width: 0;
 }
 

frontend/src/components/ProjectSelector.vue

@@ -51,10 +51,10 @@ function onChange(e: Event) {
 <style scoped>
 .project-selector {
   padding: 0.4rem 0.5rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   font-family: inherit;
   width: 100%;
@@ -62,6 +62,6 @@ function onChange(e: Event) {
 }
 .project-selector:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 </style>

frontend/src/components/RecurrenceEditor.vue

@@ -153,19 +153,19 @@ const calendarDayMax = computed(() =>
 }
 .rec-label {
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   min-width: 2.5rem;
 }
 .rec-num-input {
   width: 4rem;
   padding: 0.25rem 0.4rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   font-family: inherit;
 }
-.rec-num-input:focus { outline: none; border-color: var(--color-primary); }
+.rec-num-input:focus { outline: none; border-color: var(--fs-accent); }
 .rec-unit { min-width: 6rem; }
 </style>

frontend/src/components/SearchBar.vue

@@ -28,14 +28,14 @@ defineExpose({ focus: () => inputRef.value?.focus() });
 .search-input {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   font-size: 1rem;
   box-sizing: border-box;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
 }
 .search-input::placeholder {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/ShareDialog.vue

@@ -206,9 +206,9 @@ onMounted(async () => {
 }
 
 .share-dialog {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-xl);
   width: 480px;
   max-width: 95vw;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
@@ -220,7 +220,7 @@ onMounted(async () => {
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .share-title {
@@ -228,7 +228,7 @@ onMounted(async () => {
   font-size: 1.1rem;
   font-weight: 700;
   margin: 0;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 
@@ -240,17 +240,17 @@ onMounted(async () => {
 
 .share-tab {
   background: none;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
   padding: 0.3rem 0.8rem;
   font-size: 0.82rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   transition: all 0.15s;
 }
 .share-tab.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
+  background: var(--fs-accent);
+  border-color: var(--fs-accent);
   color: var(--fs-text-on-action);
 }
 
@@ -269,23 +269,23 @@ onMounted(async () => {
 .share-input {
   width: 100%;
   padding: 0.45rem 0.7rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   outline: none;
   transition: border-color 0.15s;
 }
-.share-input:focus { border-color: var(--color-primary); }
+.share-input:focus { border-color: var(--fs-accent); }
 
 .user-results {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
   margin-top: 2px;
   list-style: none;
@@ -304,24 +304,24 @@ onMounted(async () => {
   cursor: pointer;
   transition: background 0.1s;
 }
-.user-result-item:hover { background: var(--color-bg-secondary); }
+.user-result-item:hover { background: var(--fs-surface-raised); }
 
 .user-result-name { font-weight: 600; font-size: 0.88rem; }
-.user-result-email { color: var(--color-text-muted); font-size: 0.8rem; }
+.user-result-email { color: var(--fs-text-tertiary); font-size: 0.8rem; }
 
 .perm-select {
   padding: 0.45rem 0.5rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   cursor: pointer;
 }
 
 .btn-add-share {
   padding: 0.45rem 1rem;
-  background: var(--gradient-cta);
+  background: var(--fs-gradient-cta);
   color: var(--fs-text-on-action);
   border: none;
   border-radius: 6px;
@@ -342,7 +342,7 @@ onMounted(async () => {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.5rem;
 }
 
@@ -361,7 +361,7 @@ onMounted(async () => {
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 
 .share-target-icon { font-size: 1rem; flex-shrink: 0; }
@@ -369,10 +369,10 @@ onMounted(async () => {
 
 .perm-select-inline {
   padding: 0.25rem 0.4rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
-  background: var(--color-bg-card);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
   font-size: 0.8rem;
   cursor: pointer;
 }

frontend/src/components/StarterRolePicker.vue

@@ -127,7 +127,7 @@ const totalTokens = () =>
 .srp-legend {
   font-size: var(--fs-size-label);
   font-weight: var(--fs-weight-medium);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   padding: 0 var(--fs-space-2);
 }
 
@@ -135,7 +135,7 @@ const totalTokens = () =>
 .srp-note {
   margin: 0 0 var(--fs-space-3);
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   line-height: var(--fs-leading-body);
   max-width: 62ch;
 }
@@ -160,16 +160,16 @@ const totalTokens = () =>
   cursor: pointer;
   min-width: 0;
 }
-.srp-item:hover { background: var(--color-hover); }
+.srp-item:hover { background: var(--fs-surface-hover); }
 
 .srp-name {
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .srp-count {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-variant-numeric: tabular-nums;
 }
 
@@ -178,7 +178,7 @@ const totalTokens = () =>
 .srp-desc {
   grid-column: 1 / -1;
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   line-height: var(--fs-leading-body);
 }
 
@@ -196,7 +196,7 @@ const totalTokens = () =>
   align-items: center;
   gap: var(--fs-space-2);
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .srp-prefix-input {
@@ -207,6 +207,6 @@ const totalTokens = () =>
 
 .srp-total {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/StatusBadge.vue

@@ -38,20 +38,20 @@ const labels: Record<TaskStatus, string> = {
   letter-spacing: 0.025em;
 }
 .status-todo {
-  background: color-mix(in srgb, var(--color-status-todo-bg) 78%, var(--color-status-todo) 22%);
-  color: color-mix(in srgb, var(--color-status-todo) 85%, #000 15%);
+  background: color-mix(in srgb, var(--fs-status-todo-bg) 78%, var(--fs-status-todo) 22%);
+  color: color-mix(in srgb, var(--fs-status-todo) 85%, #000 15%);
 }
 .status-in_progress {
-  background: color-mix(in srgb, var(--color-status-in-progress-bg) 78%, var(--color-status-in-progress) 22%);
-  color: color-mix(in srgb, var(--color-status-in-progress) 85%, #000 15%);
+  background: color-mix(in srgb, var(--fs-status-in-progress-bg) 78%, var(--fs-status-in-progress) 22%);
+  color: color-mix(in srgb, var(--fs-status-in-progress) 85%, #000 15%);
 }
 .status-done {
-  background: color-mix(in srgb, var(--color-status-done-bg) 78%, var(--color-status-done) 22%);
-  color: color-mix(in srgb, var(--color-status-done) 85%, #000 15%);
+  background: color-mix(in srgb, var(--fs-status-done-bg) 78%, var(--fs-status-done) 22%);
+  color: color-mix(in srgb, var(--fs-status-done) 85%, #000 15%);
 }
 .status-cancelled {
-  background: color-mix(in srgb, var(--color-bg-secondary) 78%, var(--color-text-muted) 22%);
-  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--fs-surface-raised) 78%, var(--fs-text-tertiary) 22%);
+  color: var(--fs-text-tertiary);
 }
 .clickable {
   cursor: pointer;

frontend/src/components/SuggestionDropdown.vue

@@ -70,9 +70,9 @@ defineExpose({ onKeyDown });
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
   box-shadow: 0 4px 12px var(--color-shadow);
   max-height: 200px;
   overflow-y: auto;
@@ -85,6 +85,6 @@ defineExpose({ onKeyDown });
 }
 .ac-item:hover,
 .ac-item.active {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 </style>

frontend/src/components/SystemsSection.vue

@@ -253,7 +253,7 @@ async function confirmDelete() {
         <template v-else>
           <span
             class="system-swatch"
-            :style="{ background: system.color || 'var(--color-text-muted)' }"
+            :style="{ background: system.color || 'var(--fs-text-tertiary)' }"
             aria-hidden="true"
           ></span>
           <div class="system-body">
@@ -325,41 +325,41 @@ async function confirmDelete() {
 
 /* ── Open issues ──────────────────────────────────────────────── */
 .open-issues { display: flex; flex-direction: column; gap: 0.35rem; }
-.open-issues-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
+.open-issues-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fs-text-tertiary); }
 .issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
-.issue-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); font-size: 0.85rem; }
-.issue-link:hover { background: var(--color-bg-secondary); }
-.issue-mark { color: var(--color-text-muted); flex-shrink: 0; }
-.issue-mark.imk-in_progress { color: var(--color-primary); }
+.issue-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--fs-radius-sm); text-decoration: none; color: var(--fs-text-primary); font-size: 0.85rem; }
+.issue-link:hover { background: var(--fs-surface-raised); }
+.issue-mark { color: var(--fs-text-tertiary); flex-shrink: 0; }
+.issue-mark.imk-in_progress { color: var(--fs-accent); }
 .issue-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .issue-systems { display: flex; gap: 0.25rem; flex-shrink: 0; flex-wrap: wrap; }
-.issue-sys-chip { font-size: 0.66rem; color: var(--color-text-secondary); background: var(--color-bg-secondary); border-radius: 999px; padding: 0.05rem 0.4rem; }
+.issue-sys-chip { font-size: 0.66rem; color: var(--fs-text-secondary); background: var(--fs-surface-raised); border-radius: 999px; padding: 0.05rem 0.4rem; }
 
 /* ── Toolbar ──────────────────────────────────────────────────── */
 .systems-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
 .btn-add-system {
   background: none;
-  border: 1px dashed var(--color-border);
-  color: var(--color-text-secondary);
+  border: 1px dashed var(--fs-border-color);
+  color: var(--fs-text-secondary);
   padding: 0.28rem 0.65rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-size: 0.78rem;
   font-family: inherit;
 }
-.btn-add-system:hover { border-color: var(--color-primary); color: var(--color-primary); }
-.btn-add-system:focus-visible { outline: none; border-color: var(--color-primary); color: var(--color-primary); }
+.btn-add-system:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
+.btn-add-system:focus-visible { outline: none; border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .archived-toggle {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   user-select: none;
 }
-.archived-checkbox { accent-color: var(--color-primary); cursor: pointer; }
+.archived-checkbox { accent-color: var(--fs-accent); cursor: pointer; }
 
 /* ── Create / edit form ───────────────────────────────────────── */
 .system-form {
@@ -367,23 +367,23 @@ async function confirmDelete() {
   flex-direction: column;
   gap: 0.5rem;
   padding: 0.75rem;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
 }
 .system-form--inline { padding: 0; background: none; border: none; flex: 1; }
 .system-input, .system-textarea {
   padding: 0.4rem 0.6rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
   box-sizing: border-box;
   width: 100%;
 }
-.system-input:focus, .system-textarea:focus { outline: none; border-color: var(--color-primary); }
+.system-input:focus, .system-textarea:focus { outline: none; border-color: var(--fs-accent); }
 .system-textarea { resize: vertical; }
 
 .system-form-actions { display: flex; gap: 0.4rem; }
@@ -417,9 +417,9 @@ async function confirmDelete() {
   align-items: flex-start;
   gap: 0.6rem;
   padding: 0.6rem 0.75rem;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
 }
 
 .system-card--archived { opacity: 0.6; }
@@ -433,13 +433,13 @@ async function confirmDelete() {
 }
 .system-body { flex: 1; min-width: 0; }
 .system-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
-.system-name { font-weight: 500; color: var(--color-text); word-break: break-word; }
+.system-name { font-weight: 500; color: var(--fs-text-primary); word-break: break-word; }
 .issue-badge {
   font-size: 0.7rem;
   font-weight: 500;
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent);
+  color: var(--fs-accent);
   border-radius: 999px;
   padding: 0.05rem 0.45rem;
   flex-shrink: 0;
@@ -449,15 +449,15 @@ async function confirmDelete() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-text-muted);
-  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  color: var(--fs-text-tertiary);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
   border-radius: 999px;
   padding: 0.05rem 0.45rem;
 }
 .system-description {
   margin: 0.25rem 0 0;
   font-size: 0.82rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   line-height: 1.4;
   word-break: break-word;
 }
@@ -472,15 +472,15 @@ async function confirmDelete() {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   width: 26px;
   height: 26px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   transition: background 0.12s, color 0.12s;
 }
-.action-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); }
-.action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; opacity: 1; }
-.action-delete:hover { color: var(--color-danger); }
+.action-btn:hover { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
+.action-btn:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 1px; opacity: 1; }
+.action-delete:hover { color: var(--fs-error); }
 
 /* ── Empty ────────────────────────────────────────────────────── */
 .systems-empty {
@@ -490,61 +490,29 @@ async function confirmDelete() {
   gap: 0.4rem;
   padding: 2rem 1rem;
   text-align: center;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-md);
+  border: 1px dashed var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
 }
-.empty-title { margin: 0; font-weight: 500; color: var(--color-text); }
-.empty-sub { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); max-width: 32ch; }
+.empty-title { margin: 0; font-weight: 500; color: var(--fs-text-primary); }
+.empty-sub { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--fs-text-tertiary); max-width: 32ch; }
 
-.error-msg { color: var(--color-danger); font-size: 0.9rem; }
+.error-msg { color: var(--fs-error); font-size: 0.9rem; }
 
 /* ── Skeleton ─────────────────────────────────────────────────── */
 @keyframes skel-shine { to { background-position: 200% center; } }
 .systems-skeleton { display: flex; flex-direction: column; gap: 0.4rem; }
 .skel-row {
   height: 3rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   background: linear-gradient(
     90deg,
-    var(--color-bg-secondary) 25%,
-    color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-secondary)) 50%,
-    var(--color-bg-secondary) 75%
+    var(--fs-surface-raised) 25%,
+    color-mix(in srgb, var(--fs-text-tertiary) 16%, var(--fs-surface-raised)) 50%,
+    var(--fs-surface-raised) 75%
   );
   background-size: 200% 100%;
   animation: skel-shine 1.5s ease infinite;
 }
 .skel-row--short { width: 65%; }
 
-/* ── Modal ────────────────────────────────────────────────────── */
-.modal-overlay {
-  position: fixed; inset: 0;
-  background: var(--color-overlay);
-  display: flex; align-items: center; justify-content: center;
-  z-index: 200;
-}
-.modal-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 1.5rem;
-  width: 100%;
-  max-width: 400px;
-  box-shadow: 0 8px 32px var(--color-shadow);
-}
-.modal-title { margin: 0 0 0.75rem; font-size: 1.05rem; }
-.modal-message { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
-.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
-.modal-btn {
-  padding: 0.4rem 0.9rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-family: inherit;
-}
-.modal-btn:hover { background: var(--color-bg); }
-.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: var(--fs-text-on-action); }
-.modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); }
 </style>

frontend/src/components/TableOfContents.vue

@@ -60,7 +60,7 @@ function scrollTo(id: string) {
 .toc-title {
   font-size: 0.8rem;
   text-transform: uppercase;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.5rem;
   letter-spacing: 0.05em;
 }
@@ -73,11 +73,11 @@ function scrollTo(id: string) {
   margin-bottom: 0.25rem;
 }
 .toc-link {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-decoration: none;
   cursor: pointer;
 }
 .toc-link:hover {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 </style>

frontend/src/components/TagInput.vue

@@ -154,9 +154,9 @@ function focusInput() {
   align-items: center;
   gap: 0.35rem;
   padding: 0.35rem 0.6rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-card);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
   cursor: text;
   min-height: 2.25rem;
 }
@@ -166,9 +166,9 @@ function focusInput() {
   gap: 0.2rem;
   padding: 0.15rem 0.5rem;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  border: 1px solid var(--color-primary);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  border: 1px solid var(--fs-accent);
+  color: var(--fs-accent);
   font-size: 0.8rem;
   white-space: nowrap;
 }
@@ -195,7 +195,7 @@ function focusInput() {
   border: none;
   outline: none;
   background: transparent;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   padding: 0;
 }
@@ -205,9 +205,9 @@ function focusInput() {
   left: 0;
   min-width: 160px;
   max-width: 280px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   list-style: none;
   margin: 0;
@@ -218,11 +218,11 @@ function focusInput() {
   padding: 0.35rem 0.75rem;
   font-size: 0.85rem;
   cursor: pointer;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .tag-autocomplete-item:hover,
 .tag-autocomplete-item.selected {
-  background: var(--color-bg-hover);
-  color: var(--color-primary);
+  background: var(--fs-surface-hover);
+  color: var(--fs-accent);
 }
 </style>

frontend/src/components/TagPill.vue

@@ -29,8 +29,8 @@ defineEmits<{
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  background: var(--color-tag-bg);
-  color: var(--color-tag-text);
+  background: var(--fs-accent-soft);
+  color: var(--fs-accent);
   padding: 0.15rem 0.5rem;
   border-radius: 12px;
   font-size: 0.8rem;
@@ -39,13 +39,13 @@ defineEmits<{
   transition: color 0.15s, background 0.15s;
 }
 .tag-pill:hover {
-  color: var(--color-primary);
-  background: var(--color-primary-tint);
+  color: var(--fs-accent);
+  background: var(--fs-accent-soft);
 }
 .dismiss {
   background: none;
   border: none;
-  color: var(--color-tag-text);
+  color: var(--fs-accent);
   cursor: pointer;
   font-size: 0.9rem;
   line-height: 1;

frontend/src/components/TaskCard.vue

@@ -108,15 +108,15 @@ function isOverdue(): boolean {
 .task-card {
   display: block;
   padding: 1rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   text-decoration: none;
   color: inherit;
-  background: var(--color-bg-card);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent);
+  background: var(--fs-surface-raised);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 6%, transparent);
   transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .task-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--color-primary) 14.0%, transparent);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 14.0%, transparent);
   transform: translateY(-2px);
 }
 
@@ -144,19 +144,19 @@ function isOverdue(): boolean {
   opacity: 0.8;
 }
 .dot-todo {
-  background: var(--color-status-todo);
-  border: 2px solid var(--color-status-todo);
+  background: var(--fs-status-todo);
+  border: 2px solid var(--fs-status-todo);
   background: transparent;
-  border: 2px solid var(--color-text-muted);
+  border: 2px solid var(--fs-text-tertiary);
 }
 .dot-in-progress {
-  background: var(--color-status-in-progress);
+  background: var(--fs-status-in-progress);
 }
 .dot-done {
-  background: var(--color-status-done);
+  background: var(--fs-status-done);
 }
 .dot-cancelled {
-  background: var(--color-status-cancelled);
+  background: var(--fs-status-cancelled);
 }
 
 .task-title-compact {
@@ -170,10 +170,10 @@ function isOverdue(): boolean {
 }
 .project-crumb {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  color: var(--fs-text-tertiary);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.1rem 0.4rem;
   white-space: nowrap;
   flex-shrink: 0;
@@ -185,12 +185,12 @@ function isOverdue(): boolean {
 }
 .due-compact {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .due-compact.overdue {
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-weight: 600;
 }
 /* Full layout */
@@ -211,7 +211,7 @@ function isOverdue(): boolean {
 }
 .task-preview {
   margin: 0 0 0.5rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: 0.9rem;
   max-height: 7.5em;
   overflow: hidden;
@@ -224,15 +224,15 @@ function isOverdue(): boolean {
 }
 .due-date {
   font-size: 0.8rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .due-date.overdue {
-  color: var(--color-overdue);
+  color: var(--fs-overdue);
   font-weight: 600;
 }
 .timestamp {
   margin-left: auto;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/TaskLogSection.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 import { apiGet, apiPost, apiPatch, apiDelete } from "@/api/client";
 import { renderMarkdown } from "@/utils/markdown";
 import type { TaskLog } from "@/types/task";
+import { fmtStamp } from "@/utils/dateFormat";
 
 const props = defineProps<{ taskId: number }>();
 
@@ -15,13 +16,6 @@ const editingId = ref<number | null>(null);
 const editContent = ref("");
 const editDuration = ref("");
 
-function formatDate(iso: string): string {
-  const d = new Date(iso);
-  const datePart = d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
-  const timePart = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
-  return `${datePart}, ${timePart}`;
-}
-
 function formatDuration(minutes: number): string {
   if (minutes < 60) return `${minutes} min`;
   const h = Math.floor(minutes / 60);
@@ -128,7 +122,7 @@ onMounted(loadLogs);
       </template>
       <template v-else>
         <div class="log-entry-meta">
-          <span class="log-date">{{ formatDate(log.created_at) }}</span>
+          <span class="log-date">{{ fmtStamp(log.created_at) }}</span>
           <span v-if="log.duration_minutes" class="log-duration-badge">
             {{ formatDuration(log.duration_minutes) }}
           </span>
@@ -175,9 +169,9 @@ onMounted(loadLogs);
 
 <style scoped>
 .log-section {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
   padding: 0.6rem 0.75rem;
   display: flex;
   flex-direction: column;
@@ -187,7 +181,7 @@ onMounted(loadLogs);
 .log-header {
   font-size: 0.8rem;
   font-weight: 600;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 0.15rem;
@@ -195,11 +189,11 @@ onMounted(loadLogs);
 
 .log-empty {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .log-entry {
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 0.5rem;
 }
 
@@ -212,11 +206,11 @@ onMounted(loadLogs);
 }
 
 .log-date {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .log-duration-badge {
-  background: var(--color-primary);
+  background: var(--fs-accent);
   color: var(--fs-text-on-action);
   border-radius: 99px;
   padding: 0.1rem 0.5rem;
@@ -235,10 +229,10 @@ onMounted(loadLogs);
 .log-textarea {
   width: 100%;
   padding: 0.4rem 0.5rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
   resize: vertical;
@@ -247,7 +241,7 @@ onMounted(loadLogs);
 
 .log-textarea:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 
 .log-add-controls,
@@ -259,7 +253,7 @@ onMounted(loadLogs);
 
 .log-duration-label {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -268,16 +262,16 @@ onMounted(loadLogs);
 .log-duration-input {
   width: 5rem;
   padding: 0.3rem 0.4rem;
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
 }
 
 .log-duration-input:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 
 

frontend/src/components/TiptapEditor.vue

@@ -156,7 +156,7 @@ defineExpose({ editor });
 <style scoped>
 .editor-error {
   padding: 1rem;
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-size: 0.9rem;
 }
 </style>

frontend/src/components/ToastNotification.vue

@@ -57,13 +57,13 @@ const toastStore = useToastStore();
   color: var(--fs-text-on-action);
 }
 .toast--success {
-  background: var(--color-toast-success);
+  background: var(--fs-success);
 }
 .toast--error {
-  background: var(--color-toast-error);
+  background: var(--fs-error);
 }
 .toast--warning {
-  background: var(--color-warning);
+  background: var(--fs-warning);
   color: #1a1a1a;
 }
 .toast--warning .toast-close {

frontend/src/components/TokenPreview.vue

@@ -183,22 +183,22 @@ function ruleWidth(value: string): string {
   padding: 0.2rem 0.6rem;
   font: inherit;
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   background: transparent;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: var(--fs-radius-sm);
   cursor: pointer;
 }
-.tp-mode:hover { color: var(--color-text); }
+.tp-mode:hover { color: var(--fs-text-primary); }
 .tp-mode.active {
-  color: var(--color-primary-solid);
-  border-color: var(--color-primary);
-  background: var(--color-primary-faint);
+  color: var(--fs-accent);
+  border-color: var(--fs-accent);
+  background: var(--fs-accent-faint);
 }
 
 .tp-modes-note {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .tp-group { margin-bottom: var(--fs-space-6); }
@@ -207,7 +207,7 @@ function ruleWidth(value: string): string {
   text-transform: uppercase;
   letter-spacing: var(--fs-tracking-tiny);
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 var(--fs-space-3);
   padding-bottom: var(--fs-space-2);
   border-bottom: var(--fs-border);
@@ -243,7 +243,7 @@ function ruleWidth(value: string): string {
   border-radius: var(--fs-radius-sm);
   padding: var(--fs-space-1);
   overflow: hidden;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 
 /* Text-bearing specimens get no box at all — a border around a value is a
@@ -272,8 +272,8 @@ function ruleWidth(value: string): string {
   background-image:
     linear-gradient(var(--tp-fill), var(--tp-fill)),
     repeating-conic-gradient(
-      var(--color-border) 0% 25%,
-      var(--color-bg-secondary) 0% 50%
+      var(--fs-border-color) 0% 25%,
+      var(--fs-surface-raised) 0% 50%
     );
   background-size: auto, 10px 10px;
 }
@@ -282,7 +282,7 @@ function ruleWidth(value: string): string {
   width: 100%;
   height: 100%;
   border-radius: calc(var(--fs-radius-sm) - 2px);
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
 }
 
 .tp-rule-wrap {
@@ -297,27 +297,27 @@ function ruleWidth(value: string): string {
   height: 0.4rem;
   min-width: 1px;
   flex: none;
-  background: var(--color-primary-solid);
+  background: var(--fs-accent);
   border-radius: 999px;
 }
 
 .tp-rule-label {
   font-family: var(--fs-font-mono);
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
 }
 
 .tp-font {
   font-size: 1.4rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   line-height: 1;
 }
 
 .tp-plain {
   font-family: var(--fs-font-mono);
   font-size: var(--fs-size-code);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -325,7 +325,7 @@ function ruleWidth(value: string): string {
 
 .tp-undecided {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-style: italic;
 }
 
@@ -346,17 +346,17 @@ function ruleWidth(value: string): string {
 
 .tp-name {
   font-size: var(--fs-size-body-sm);
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .tp-value {
   font-family: var(--fs-font-mono);
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .tp-purpose {
   font-size: var(--fs-size-tiny);
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/components/VersionHistorySection.vue

@@ -164,7 +164,7 @@ function restore() {
 
 <style scoped>
 .vh-section {
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 
 .vh-header {
@@ -179,19 +179,19 @@ function restore() {
   font-family: inherit;
   text-align: left;
 }
-.vh-header:hover { background: var(--color-bg-secondary); }
+.vh-header:hover { background: var(--fs-surface-raised); }
 
 .vh-title {
   font-size: 0.75rem;
   font-weight: 700;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .vh-chevron {
   font-size: 0.7rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .vh-body {
@@ -201,20 +201,20 @@ function restore() {
 .vh-empty {
   padding: 0.5rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .vh-item {
   padding: 0.35rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-family: monospace;
   border-left: 2px solid transparent;
 }
 .vh-item:hover {
-  background: var(--color-bg-secondary);
-  border-left-color: var(--color-primary);
+  background: var(--fs-surface-raised);
+  border-left-color: var(--fs-accent);
 }
 
 .vh-diff-actions {
@@ -225,20 +225,20 @@ function restore() {
 
 .vh-btn-back {
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.6rem;
   font-size: 0.78rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   cursor: pointer;
   font-family: inherit;
 }
-.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.vh-btn-back:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .vh-btn-restore {
-  background: var(--color-action-primary);
+  background: var(--fs-action-primary);
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   padding: 0.25rem 0.6rem;
   font-size: 0.78rem;
   color: var(--fs-text-on-action);

frontend/src/components/WordCount.vue

@@ -50,11 +50,11 @@ const label = computed(() => {
   background: none;
   border: none;
   font-size: 0.72rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   padding: 0;
   white-space: nowrap;
   flex-shrink: 0;
 }
-.word-count:hover { color: var(--color-text); }
+.word-count:hover { color: var(--fs-text-primary); }
 </style>

frontend/src/components/WorkspaceNoteEditor.vue

@@ -11,6 +11,7 @@ import TagInput from "@/components/TagInput.vue";
 import MarkdownToolbar from "@/components/MarkdownToolbar.vue";
 import WordCount from "@/components/WordCount.vue";
 import { Trash2, X } from "lucide-vue-next";
+import { relativeTimeOrDate } from "@/composables/useRelativeTime";
 
 const props = defineProps<{
   projectId: number;
@@ -252,20 +253,6 @@ async function confirmDelete(id: number) {
   }
 }
 
-function formatDate(iso: string): string {
-  const d = new Date(iso);
-  const now = new Date();
-  const diffMs = now.getTime() - d.getTime();
-  const diffMin = Math.floor(diffMs / 60_000);
-  const diffHrs = Math.floor(diffMs / 3_600_000);
-  const diffDays = Math.floor(diffMs / 86_400_000);
-  if (diffMin < 1) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHrs < 24) return `${diffHrs}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}
-
 watch(noteTitle, () => { dirty.value = true; });
 watch(noteBody, () => { dirty.value = true; if (editingId.value) scheduleLinkCheck(); });
 watch(noteTags, () => { dirty.value = true; });
@@ -346,7 +333,7 @@ defineExpose({ reload: loadProjectNotes });
         >
           <div class="note-row-main">
             <span class="note-row-title">{{ note.title || 'Untitled' }}</span>
-            <span class="note-row-age">{{ formatDate(note.updated_at) }}</span>
+            <span class="note-row-age">{{ relativeTimeOrDate(note.updated_at) }}</span>
           </div>
           <div v-if="note.tags?.length" class="note-row-tags">
             <span
@@ -452,8 +439,8 @@ defineExpose({ reload: loadProjectNotes });
   flex-direction: row;
   height: 100%;
   overflow: hidden;
-  background: var(--color-surface);
-  border-left: 1px solid var(--color-border);
+  background: var(--fs-surface-hover);
+  border-left: 1px solid var(--fs-border-color);
 }
 
 /* ── Left rail ── */
@@ -463,7 +450,7 @@ defineExpose({ reload: loadProjectNotes });
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
 }
 
 .rail-header {
@@ -471,12 +458,12 @@ defineExpose({ reload: loadProjectNotes });
   align-items: center;
   gap: 0.3rem;
   padding: 0.5rem 0.6rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
 .rail-title {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 0.72rem;
@@ -490,7 +477,7 @@ defineExpose({ reload: loadProjectNotes });
   background: transparent;
   border: none;
   font-size: 0.78rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   min-width: 0;
   padding: 0;
 }
@@ -503,7 +490,7 @@ defineExpose({ reload: loadProjectNotes });
 .rail-state {
   padding: 1rem 0.65rem;
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* Note list */
@@ -519,16 +506,16 @@ defineExpose({ reload: loadProjectNotes });
   display: flex;
   flex-direction: column;
   padding: 0.4rem 0.6rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--fs-border-color) 60%, transparent);
   cursor: pointer;
   gap: 0.15rem;
   border-right: 2px solid transparent;
   transition: background 0.12s;
 }
-.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
+.note-row:hover { background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover)); }
 .note-row.active {
-  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
-  border-right-color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover));
+  border-right-color: var(--fs-accent);
 }
 
 .note-row-main {
@@ -544,12 +531,12 @@ defineExpose({ reload: loadProjectNotes });
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .note-row-age {
   font-size: 0.62rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -562,8 +549,8 @@ defineExpose({ reload: loadProjectNotes });
 
 .note-tag-pill {
   font-size: 0.58rem;
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 10%, transparent);
   border-radius: 999px;
   padding: 0 0.3rem;
   white-space: nowrap;
@@ -572,13 +559,13 @@ defineExpose({ reload: loadProjectNotes });
   max-width: 5rem;
 }
 .note-tag-pill.tag-match {
-  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
-  outline: 1px solid var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
+  outline: 1px solid var(--fs-accent);
 }
 
 .note-tag-more {
   font-size: 0.58rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
 }
 
@@ -606,8 +593,8 @@ defineExpose({ reload: loadProjectNotes });
   margin-left: auto;
 }
 
-.unsaved { font-size: 0.72rem; color: var(--color-text-muted); }
-.saving-txt { font-size: 0.72rem; color: var(--color-primary); }
+.unsaved { font-size: 0.72rem; color: var(--fs-text-tertiary); }
+.saving-txt { font-size: 0.72rem; color: var(--fs-accent); }
 
 /* Moss action-primary per Hybrid */
 
@@ -618,14 +605,14 @@ defineExpose({ reload: loadProjectNotes });
   font-size: 1.4rem;
   font-weight: 500;
   line-height: 1.25;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   padding: 0;
   font-family: 'Fraunces', serif;
   letter-spacing: -0.01em;
 }
 .note-title-input:focus { outline: none; }
 .note-title-input::placeholder {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .tag-row {
@@ -645,25 +632,25 @@ defineExpose({ reload: loadProjectNotes });
   align-items: center;
   gap: 0.3rem;
   padding: 0.35rem 0.6rem;
-  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
+  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
   flex-shrink: 0;
 }
-.tag-suggestions-label { font-size: 0.72rem; color: var(--color-text-muted); flex-shrink: 0; }
+.tag-suggestions-label { font-size: 0.72rem; color: var(--fs-text-tertiary); flex-shrink: 0; }
 
 .btn-tag-suggestion {
   background: none;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0.15rem 0.55rem;
   font-size: 0.75rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
 }
-.btn-tag-suggestion:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.btn-tag-suggestion:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 .btn-tag-suggestion.applied {
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  border-color: var(--fs-accent);
+  color: var(--fs-accent);
 }
 
 
@@ -673,12 +660,12 @@ defineExpose({ reload: loadProjectNotes });
   flex-wrap: wrap;
   gap: 0.25rem;
   padding: 0.3rem 0.6rem;
-  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
+  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
   flex-shrink: 0;
 }
 .link-suggest-label {
   font-size: 0.7rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
   font-weight: 500;
   text-transform: uppercase;
@@ -688,15 +675,15 @@ defineExpose({ reload: loadProjectNotes });
 
 .btn-chip-link {
   background: none;
-  border: 1px solid var(--color-primary);
+  border: 1px solid var(--fs-accent);
   border-radius: 999px;
   padding: 0.1rem 0.45rem;
   font-size: 0.7rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   cursor: pointer;
   font-family: monospace;
   white-space: nowrap;
 }
-.btn-chip-link:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
+.btn-chip-link:hover { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); }
 
 </style>

frontend/src/components/WorkspaceTaskPanel.vue

@@ -6,6 +6,7 @@ import { useToastStore } from "@/stores/toast";
 import TaskLogSection from "@/components/TaskLogSection.vue";
 import { renderMarkdown } from "@/utils/markdown";
 import { Trash2, X } from "lucide-vue-next";
+import { relativeTimeOrDate } from "@/composables/useRelativeTime";
 
 const props = defineProps<{ projectId: number }>();
 
@@ -198,20 +199,6 @@ function cancelDeleteTask() {
   deleteConfirmPending.value = false;
 }
 
-function formatDate(iso: string): string {
-  const d = new Date(iso);
-  const now = new Date();
-  const diffMs = now.getTime() - d.getTime();
-  const diffMin = Math.floor(diffMs / 60_000);
-  const diffHrs = Math.floor(diffMs / 3_600_000);
-  const diffDays = Math.floor(diffMs / 86_400_000);
-  if (diffMin < 1) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHrs < 24) return `${diffHrs}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}
-
 onMounted(loadAll);
 defineExpose({ reload: loadAll });
 </script>
@@ -256,7 +243,7 @@ defineExpose({ reload: loadAll });
               <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
               <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
               <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
-              <span class="task-age">{{ formatDate(task.updated_at) }}</span>
+              <span class="task-age">{{ relativeTimeOrDate(task.updated_at) }}</span>
             </li>
             <li v-if="groupedTasks.noMilestone.length === 0" class="empty-group">No tasks</li>
           </ul>
@@ -281,7 +268,7 @@ defineExpose({ reload: loadAll });
               <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
               <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
               <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
-              <span class="task-age">{{ formatDate(task.updated_at) }}</span>
+              <span class="task-age">{{ relativeTimeOrDate(task.updated_at) }}</span>
             </li>
             <li v-if="msTasks.length === 0" class="empty-group">No tasks</li>
           </ul>
@@ -344,8 +331,8 @@ defineExpose({ reload: loadAll });
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-border);
+  background: var(--fs-surface-hover);
+  border-right: 1px solid var(--fs-border-color);
 }
 
 /* ── List view ── */
@@ -360,17 +347,17 @@ defineExpose({ reload: loadAll });
   flex: 0 0 44%;
 }
 .task-active {
-  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) !important;
+  background: color-mix(in srgb, var(--fs-accent) 6%, var(--fs-surface-hover)) !important;
 }
 
 .panel-header {
   padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
 .panel-title {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 0.75rem;
@@ -381,20 +368,20 @@ defineExpose({ reload: loadAll });
   display: flex;
   gap: 0.4rem;
   padding: 0.45rem 0.6rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
 .task-add-input {
   flex: 1;
-  background: var(--color-input-bg);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
   border-radius: 5px;
   padding: 0.28rem 0.5rem;
   font-size: 0.83rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
-.task-add-input:focus { outline: none; border-color: var(--color-primary); }
+.task-add-input:focus { outline: none; border-color: var(--fs-accent); }
 
 .btn-add { font-size: 1rem; }   /* a '+' glyph, not a label */
 
@@ -404,7 +391,7 @@ defineExpose({ reload: loadAll });
 }
 
 .ms-group {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .ms-group-header {
@@ -413,18 +400,18 @@ defineExpose({ reload: loadAll });
   gap: 0.4rem;
   width: 100%;
   padding: 0.4rem 0.65rem;
-  background: var(--color-surface-raised);
+  background: var(--fs-surface-raised);
   border: none;
   cursor: pointer;
   text-align: left;
   font-size: 0.8rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
-.ms-group-header:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
+.ms-group-header:hover { background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover)); }
 
-.ms-chevron { font-size: 0.6rem; color: var(--color-text-muted); width: 0.8rem; }
+.ms-chevron { font-size: 0.6rem; color: var(--fs-text-tertiary); width: 0.8rem; }
 .ms-name { flex: 1; font-weight: 500; font-size: 0.8rem; }
-.ms-count { font-size: 0.72rem; color: var(--color-text-muted); background: var(--color-bg); border-radius: 10px; padding: 0 0.4rem; }
+.ms-count { font-size: 0.72rem; color: var(--fs-text-tertiary); background: var(--fs-surface-page); border-radius: 10px; padding: 0 0.4rem; }
 
 .ms-status {
   font-size: 0.68rem;
@@ -432,8 +419,8 @@ defineExpose({ reload: loadAll });
   border-radius: 10px;
   text-transform: capitalize;
 }
-.ms-status-active { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
-.ms-status-completed { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
+.ms-status-active { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: var(--fs-accent); }
+.ms-status-completed { background: color-mix(in srgb, var(--fs-success) 15%, transparent); color: var(--fs-success); }
 
 .task-items {
   list-style: none;
@@ -447,9 +434,9 @@ defineExpose({ reload: loadAll });
   gap: 0.4rem;
   padding: 0.35rem 0.65rem 0.35rem 1.4rem;
   cursor: pointer;
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--fs-border-color) 50%, transparent);
 }
-.task-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
+.task-row:hover { background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover)); }
 .task-row:last-child { border-bottom: none; }
 
 .status-dot {
@@ -457,7 +444,7 @@ defineExpose({ reload: loadAll });
   width: 1.35rem;
   height: 1.35rem;
   border-radius: 50%;
-  border: 1.5px solid var(--color-border);
+  border: 1.5px solid var(--fs-border-color);
   background: none;
   cursor: pointer;
   font-size: 0.62rem;
@@ -465,8 +452,8 @@ defineExpose({ reload: loadAll });
   align-items: center;
   justify-content: center;
 }
-.status-dot.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); }
-.status-dot.status-done { border-color: var(--color-success); color: var(--color-success); }
+.status-dot.status-in_progress { border-color: var(--fs-accent); color: var(--fs-accent); }
+.status-dot.status-done { border-color: var(--fs-success); color: var(--fs-success); }
 
 .task-title {
   flex: 1;
@@ -474,20 +461,20 @@ defineExpose({ reload: loadAll });
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
-.task-title.done { text-decoration: line-through; color: var(--color-text-muted); }
+.task-title.done { text-decoration: line-through; color: var(--fs-text-tertiary); }
 
 .task-age {
   font-size: 0.68rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
-.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--color-text-muted); }
+.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--fs-text-tertiary); }
 
-.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
+.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--fs-text-tertiary); }
 
 /* ── Detail pane (bottom split) ── */
 .task-detail {
@@ -496,8 +483,8 @@ defineExpose({ reload: loadAll });
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--color-surface);
-  border-top: 2px solid var(--color-border);
+  background: var(--fs-surface-hover);
+  border-top: 2px solid var(--fs-border-color);
 }
 
 .detail-header {
@@ -505,7 +492,7 @@ defineExpose({ reload: loadAll });
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
@@ -515,21 +502,21 @@ defineExpose({ reload: loadAll });
   font-size: 0.75rem;
   font-weight: 500;
   cursor: pointer;
-  border: 1.5px solid var(--color-border);
+  border: 1.5px solid var(--fs-border-color);
   background: none;
   text-transform: capitalize;
   user-select: none;
   margin-left: auto;
 }
-.status-badge.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
-.status-badge.status-done { border-color: var(--color-success); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
+.status-badge.status-in_progress { border-color: var(--fs-accent); color: var(--fs-accent); background: color-mix(in srgb, var(--fs-accent) 10%, transparent); }
+.status-badge.status-done { border-color: var(--fs-success); color: var(--fs-success); background: color-mix(in srgb, var(--fs-success) 10%, transparent); }
 
 .btn-edit-task { margin-left: 0.25rem; }
 .btn-edit-task:hover { text-decoration: underline; }
 
 .detail-body {
   padding: 0.5rem 0.75rem 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
   max-height: 40%;
   overflow-y: auto;
@@ -537,17 +524,17 @@ defineExpose({ reload: loadAll });
 
 .body-loading {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .detail-body .prose {
   font-size: 0.83rem;
   line-height: 1.5;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .btn-delete-task { margin-left: 0.25rem; }
-.btn-delete-task:hover { color: var(--color-action-destructive); }
+.btn-delete-task:hover { color: var(--fs-action-destructive); }
 
 .btn-delete-confirm { margin-left: 0.25rem; }
 
@@ -563,9 +550,9 @@ defineExpose({ reload: loadAll });
   font-size: 0.72rem;
   padding: 0.15rem 0.5rem;
   border-radius: 10px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-muted);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-tertiary);
   text-transform: capitalize;
 }
 
@@ -573,20 +560,20 @@ defineExpose({ reload: loadAll });
   font-size: 0.72rem;
   padding: 0.15rem 0.4rem;
   border-radius: 10px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-muted);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   max-width: 140px;
 }
 .milestone-select:disabled { opacity: 0.5; cursor: default; }
-.milestone-select:focus { outline: none; border-color: var(--color-primary); }
+.milestone-select:focus { outline: none; border-color: var(--fs-accent); }
 
 .detail-log {
   flex: 1;
   overflow-y: auto;
   padding: 0 0.6rem 0.6rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 
 /* Detail fade transition */
@@ -609,12 +596,12 @@ defineExpose({ reload: loadAll });
 /* Due date on task rows */
 .task-due {
   font-size: 0.65rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .task-due.overdue {
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-weight: 500;
 }
 

frontend/src/components/rules/PlanRulesPanel.vue

@@ -46,7 +46,7 @@ watch(() => props.projectId, load);
 <style scoped>
 .plan-rules {
   margin-top: 1.5rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 1rem;
 }
 .plan-rules h3 {
@@ -66,7 +66,7 @@ watch(() => props.projectId, load);
 }
 .plan-rules ul {
   list-style: none; padding-left: 0.75rem; margin: 0.25rem 0;
-  border-left: 2px solid var(--color-primary);
+  border-left: 2px solid var(--fs-accent);
 }
 .plan-rules li { margin: 0.35rem 0; font-size: 0.92em; }
 .truncated { opacity: 0.7; font-style: italic; font-size: 0.85em; }

frontend/src/components/rules/ProjectRulesTab.vue

@@ -329,7 +329,7 @@ h3 {
 .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
 .chip {
   display: inline-flex; align-items: center; gap: 0.25rem;
-  background: var(--color-primary-bg);
+  background: var(--fs-accent-soft);
   padding: 0.25rem 0.5rem; border-radius: 999px;
 }
 .chip a { cursor: pointer; }
@@ -337,13 +337,13 @@ h3 {
 .chip-remove:hover { opacity: 1; }
 .add {
   background: none;
-  border: 1px dashed var(--color-border);
+  border: 1px dashed var(--fs-border-color);
   padding: 0.25rem 0.75rem; border-radius: 999px; cursor: pointer;
   color: inherit;
 }
 select {
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.25rem 0.5rem;
 }
 .applicable { margin-top: 2rem; }
@@ -359,7 +359,7 @@ select {
 }
 ul { list-style: none; padding: 0; margin: 0; }
 .rule {
-  border-left: 2px solid var(--color-primary);
+  border-left: 2px solid var(--fs-accent);
   padding-left: 0.75rem; margin: 0.5rem 0;
 }
 .rule-head { cursor: pointer; }
@@ -367,12 +367,12 @@ ul { list-style: none; padding: 0; margin: 0; }
 .rule-statement { display: block; opacity: 0.85; margin-top: 0.25rem; }
 .rule-detail {
   margin-top: 0.5rem; padding: 0.5rem;
-  background: var(--color-bg); border-radius: 6px;
+  background: var(--fs-surface-page); border-radius: 6px;
 }
 .rule-detail > div { margin-bottom: 0.5rem; }
 .edit-link {
   background: none; border: none; cursor: pointer;
-  color: var(--color-primary); padding: 0.5rem 0 0 0;
+  color: var(--fs-accent); padding: 0.5rem 0 0 0;
 }
 .empty, .truncated { opacity: 0.7; font-style: italic; }
 .empty a { cursor: pointer; text-decoration: underline; }
@@ -381,18 +381,18 @@ ul { list-style: none; padding: 0; margin: 0; }
 .new-rule-form {
   display: flex; flex-direction: column; gap: 0.5rem;
   padding: 0.75rem; margin: 0.5rem 0;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
 }
 .new-rule-form input, .new-rule-form textarea {
-  background: var(--color-surface); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-hover); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem; font: inherit; resize: vertical;
 }
 .rule-list { margin-top: 0.5rem; }
 .delete-link {
   background: none; border: none; cursor: pointer;
-  color: var(--color-destructive); padding: 0.5rem 0 0 0;
+  color: var(--fs-destructive); padding: 0.5rem 0 0 0;
 }
 /* Per-rule / per-topic suppress affordance — quiet by default, reveal on hover */
 .topic-group h5 {
@@ -404,14 +404,14 @@ ul { list-style: none; padding: 0; margin: 0; }
 .rule-head-text { flex: 1; cursor: pointer; }
 .skip-btn {
   background: none; border: none; cursor: pointer;
-  color: var(--color-muted); font-size: 0.75rem;
+  color: var(--fs-text-tertiary); font-size: 0.75rem;
   padding: 0.1rem 0.4rem; opacity: 0; transition: opacity 0.15s;
   white-space: nowrap;
 }
 .topic-group h5:hover .skip-btn,
 .rule:hover .skip-btn,
 .skip-btn:focus { opacity: 1; }
-.skip-btn:hover { color: var(--color-destructive); }
+.skip-btn:hover { color: var(--fs-destructive); }
 /* Suppressed section */
 .suppressed { margin-top: 1.5rem; }
 .suppressed-toggle {
@@ -430,13 +430,13 @@ ul { list-style: none; padding: 0; margin: 0; }
 .suppressed-kind {
   font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em;
   padding: 0.1rem 0.4rem; border-radius: 3px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
 }
 .suppressed-path { flex: 1; }
 .reenable-btn {
   background: none; border: none; cursor: pointer;
-  color: var(--color-primary); font-size: 0.85em;
+  color: var(--fs-accent); font-size: 0.85em;
 }
 .reenable-btn:hover { text-decoration: underline; }
 </style>

frontend/src/components/rules/RuleEditorSlideOver.vue

@@ -98,8 +98,8 @@ watch(() => props.ruleId, load);
 .slide-over {
   position: fixed; top: 0; right: 0; bottom: 0;
   width: min(520px, 90vw);
-  background: var(--color-surface);
-  border-left: 2px solid var(--color-primary);
+  background: var(--fs-surface-hover);
+  border-left: 2px solid var(--fs-accent);
   padding: 1.5rem;
   overflow-y: auto;
   box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
@@ -110,11 +110,11 @@ header h2 {
   font-family: Fraunces, serif; font-style: italic;
 }
 label { display: block; margin-bottom: 1rem; }
-.required { color: var(--color-primary); }
+.required { color: var(--fs-accent); }
 input, textarea {
   width: 100%; margin-top: 0.25rem;
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem; font: inherit;
   font-family: inherit;
 }

frontend/src/components/rules/RuleListPane.vue

@@ -22,18 +22,18 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
+.pane { background: var(--fs-surface-hover); padding: 1rem; overflow-y: auto; }
 header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
 ul { list-style: none; padding: 0; margin: 1rem 0; }
 li {
   padding: 0.75rem;
   cursor: pointer;
   border-radius: 6px;
-  border-left: 2px solid var(--color-primary);
+  border-left: 2px solid var(--fs-accent);
   margin-bottom: 0.5rem;
   background: rgba(255, 255, 255, 0.02);
 }
-li:hover { background: var(--color-hover); }
+li:hover { background: var(--fs-surface-hover); }
 .title { font-family: Fraunces, serif; font-style: italic; font-size: 1.05em; }
 .statement { font-size: 0.9em; opacity: 0.8; margin-top: 0.25rem; }
 .new-rule { cursor: pointer; }

frontend/src/components/rules/RulebookDetailPane.vue

@@ -122,7 +122,7 @@ watch(() => props.rulebookId, () => {/* re-render of isSubscribed from existing
 </template>
 
 <style scoped>
-.pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
+.pane { background: var(--fs-surface-hover); padding: 1rem; overflow-y: auto; }
 header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
 header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
 .always-on-toggle {
@@ -133,8 +133,8 @@ header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem
 .always-on-toggle input { cursor: pointer; }
 ul { list-style: none; padding: 0; margin: 1rem 0; }
 li { padding: 0.5rem; cursor: pointer; border-radius: 6px; }
-li.active { background: var(--color-primary-bg); }
-li:hover { background: var(--color-hover); }
+li.active { background: var(--fs-accent-soft); }
+li:hover { background: var(--fs-surface-hover); }
 /* `.new-topic` and `.sub-list` are deliberately bare (#2444). The first wraps a
    button-or-form whose children style themselves; the second is a `<ul>`, and
    the bare `ul` rule above already gives it list-style, padding and margin —
@@ -142,14 +142,14 @@ li:hover { background: var(--color-hover); }
    selector. Both namespace descendant rules and assume nothing about layout. */
 .new-topic input {
   width: 100%; margin-bottom: 0.5rem;
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem;
 }
 .form-buttons { display: flex; gap: 0.5rem; }
 .subscriptions {
   margin-top: 2rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 1rem;
 }
 .subscriptions h3 { font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }

frontend/src/components/rules/RulebookListPane.vue

@@ -48,27 +48,27 @@ async function submitNew() {
 </template>
 
 <style scoped>
-.pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
+.pane { background: var(--fs-surface-hover); padding: 1rem; overflow-y: auto; }
 header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
 ul { list-style: none; padding: 0; margin: 1rem 0; }
 li { padding: 0.5rem; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 0.5rem; }
-li.active { background: var(--color-primary-bg); }
-li:hover { background: var(--color-hover); }
+li.active { background: var(--fs-accent-soft); }
+li:hover { background: var(--fs-surface-hover); }
 .always-on-badge {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.1rem 0.4rem;
   border-radius: 3px;
-  background: var(--color-accent);
-  color: var(--color-accent-fg);
+  background: var(--fs-accent);
+  color: var(--fs-text-on-action);
   margin-left: auto;
 }
 .new-rulebook { margin-top: 1rem; }
 .new-rulebook input {
   width: 100%; margin-bottom: 0.5rem;
-  background: var(--color-bg); color: inherit;
-  border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--fs-surface-page); color: inherit;
+  border: 1px solid var(--fs-border-color); border-radius: 6px;
   padding: 0.5rem;
 }
 .form-buttons { display: flex; gap: 0.5rem; }

frontend/src/composables/useRelativeTime.ts

@@ -9,3 +9,15 @@ export function relativeTime(iso: string): string {
   const days = Math.floor(hours / 24);
   return `${days}d ago`;
 }
+
+/**
+ * relativeTime() for the recent past, a short date once it's a week old —
+ * the workspace panels' list-row timestamp ("3h ago" / "Jan 15"). Two
+ * panels used to carry identical copies of this.
+ */
+export function relativeTimeOrDate(iso: string): string {
+  const d = new Date(iso);
+  const days = Math.floor((Date.now() - d.getTime()) / 86_400_000);
+  if (days < 7) return relativeTime(iso);
+  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}

frontend/src/utils/dateFormat.ts

@@ -1,65 +1,32 @@
-/** Shared date/time formatting helpers used across Calendar, Home, Knowledge, etc. */
-
-function _isSameDay(a: Date, b: Date): boolean {
-  return a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate()
-}
-
-/** "9:30 AM" */
-export function fmtTime(dt: string): string {
-  return new Date(dt).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })
-}
-
-/** "Mon, Jan 15" or "Mon, Jan 15, 9:30 AM" */
-export function fmtDateTime(dt: string, allDay: boolean): string {
-  const d = new Date(dt)
-  const datePart = d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })
-  if (allDay) return datePart
-  return `${datePart}, ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`
-}
-
 /**
- * "Today 9:30 AM" / "Tomorrow 9:30 AM" / "Mon, Jan 15 9:30 AM"
- * For all-day events returns "Today" / "Tomorrow" / "Mon, Jan 15"
+ * Shared date/time formatting — one rule per display shape. Views import
+ * these instead of carrying a local formatDate(): the 2026-08 shape audit
+ * found eight copies across views/components, three of them byte-identical.
+ * (The previous Calendar/Home helpers in this file had no callers left and
+ * were removed in the same pass.)
+ *
+ * Relative forms ("5m ago") live next door in composables/useRelativeTime.
  */
-export function fmtRelativeDateTime(dt: string, allDay: boolean): string {
-  try {
-    const d = new Date(dt)
-    const now = new Date()
-    const tomorrow = new Date(now)
-    tomorrow.setDate(now.getDate() + 1)
 
-    const timeStr = allDay ? "" : ` ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`
-
-    if (_isSameDay(d, now)) return `Today${timeStr}`
-    if (_isSameDay(d, tomorrow)) return `Tomorrow${timeStr}`
-    return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" }) + timeStr
-  } catch {
-    return dt
-  }
+/** "Jan 15, 2026" — a date with no time of day (user created_at, key expiry). */
+export function fmtDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric", month: "short", day: "numeric",
+  });
 }
 
-/**
- * Label-only: "Today" / "Tomorrow" / "Mon, Jan 15"
- */
-export function fmtDayLabel(dt: string): string {
-  try {
-    const d = new Date(dt)
-    const now = new Date()
-    const tomorrow = new Date(now)
-    tomorrow.setDate(now.getDate() + 1)
-    if (_isSameDay(d, now)) return "Today"
-    if (_isSameDay(d, tomorrow)) return "Tomorrow"
-    return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })
-  } catch {
-    return dt
-  }
+/** "Jan 15, 2026, 09:30 AM" — a full timestamp (task logs, version history). */
+export function fmtStamp(iso: string): string {
+  return new Date(iso).toLocaleString(undefined, {
+    month: "short", day: "numeric", year: "numeric",
+    hour: "2-digit", minute: "2-digit",
+  });
 }
 
-/** "Jan 15" or "Jan 15, 9:30 AM" — compact, no weekday */
-export function fmtCompact(dt: string, allDay: boolean): string {
-  const d = new Date(dt)
-  if (allDay) return d.toLocaleDateString(undefined, { month: "short", day: "numeric" })
-  return d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })
+/** "Jan 15, 09:30:05 AM" — log-table timestamp: seconds matter, the year doesn't. */
+export function fmtLogStamp(iso: string): string {
+  return new Date(iso).toLocaleString(undefined, {
+    month: "short", day: "numeric",
+    hour: "2-digit", minute: "2-digit", second: "2-digit",
+  });
 }

frontend/src/utils/palette.ts

@@ -1,10 +1,10 @@
 /** Cyclic color palette for milestone progress bars. */
 export const MILESTONE_PALETTE = [
-  'var(--color-primary)',
-  'var(--color-success, #22c55e)',
+  'var(--fs-accent)',
+  'var(--fs-success, #22c55e)',
   '#c98a00',
   '#8b5cf6',
-  'var(--color-danger, #ef4444)',
+  'var(--fs-error, #ef4444)',
   '#06b6d4',
 ]
 

frontend/src/views/DashboardView.vue

@@ -79,7 +79,7 @@ onMounted(async () => {
 
           <article v-for="p in data.active_projects" :key="p.id" class="proj-panel">
             <header class="proj-head">
-              <span class="proj-dot" :style="{ background: p.color || 'var(--color-primary)' }" />
+              <span class="proj-dot" :style="{ background: p.color || 'var(--fs-accent)' }" />
               <router-link :to="`/projects/${p.id}`" class="proj-title">{{ p.title }}</router-link>
               <span class="proj-meta">{{ relativeTime(p.last_activity) }} · {{ p.open_count }} open</span>
             </header>
@@ -156,7 +156,7 @@ onMounted(async () => {
                 :to="`/projects/${p.id}`"
                 class="pstat-row"
               >
-                <span class="pstat-dot" :style="{ background: p.color || 'var(--color-primary)' }" />
+                <span class="pstat-dot" :style="{ background: p.color || 'var(--fs-accent)' }" />
                 <span class="pstat-title">{{ p.title }}</span>
                 <span class="pstat-counts">{{ p.open_count }} open · {{ p.done_count }} done</span>
               </router-link>
@@ -180,68 +180,68 @@ onMounted(async () => {
    all the spacing between them (h1 zeroed, .dash-sub margined). Nothing in it
    assumes a flex parent, which is the tell for a deleted rule (#2444). */
 .dash-head h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; }
-.dash-sub { margin: 0.2rem 0 1.25rem; color: var(--color-muted); font-size: 0.9rem; }
-.dash-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.6rem; }
-.dash-empty { color: var(--color-muted); padding: 1rem 0; }
-.dash-empty.card { padding: 1rem; border: 1px dashed var(--color-border); border-radius: 10px; }
+.dash-sub { margin: 0.2rem 0 1.25rem; color: var(--fs-text-tertiary); font-size: 0.9rem; }
+.dash-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-text-tertiary); margin-bottom: 0.6rem; }
+.dash-empty { color: var(--fs-text-tertiary); padding: 1rem 0; }
+.dash-empty.card { padding: 1rem; border: 1px dashed var(--fs-border-color); border-radius: 10px; }
 
 .done-recent { margin-bottom: 1.5rem; }
-.done-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.86rem; }
-.done-row:hover { background: var(--color-hover); }
-.done-mark { color: var(--color-primary); flex-shrink: 0; }
+.done-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.86rem; }
+.done-row:hover { background: var(--fs-surface-hover); }
+.done-mark { color: var(--fs-accent); flex-shrink: 0; }
 .done-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.done-meta { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
-.done-more { background: none; border: none; cursor: pointer; margin-top: 0.25rem; padding: 0.2rem 0.55rem; font-size: 0.78rem; color: var(--color-primary); font-family: inherit; }
+.done-meta { font-size: 0.72rem; color: var(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
+.done-more { background: none; border: none; cursor: pointer; margin-top: 0.25rem; padding: 0.2rem 0.55rem; font-size: 0.78rem; color: var(--fs-accent); font-family: inherit; }
 .done-more:hover { text-decoration: underline; }
 
 .dash-cols { display: flex; gap: 1.25rem; align-items: flex-start; }
 .dash-main { flex: 1.7; min-width: 0; }
 .dash-rail { flex: 1; min-width: 240px; }
 
-.proj-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
+.proj-panel { background: var(--fs-surface-hover); border: 1px solid var(--fs-border-color); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
 .proj-head { display: flex; align-items: center; gap: 0.5rem; }
 .proj-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
-.proj-title { font-weight: 700; color: var(--color-text); text-decoration: none; }
-.proj-title:hover { color: var(--color-primary); }
-.proj-meta { margin-left: auto; font-size: 0.74rem; color: var(--color-muted); }
-.bar { height: 5px; background: var(--color-border); border-radius: 3px; margin: 0.55rem 0 0.2rem; }
-.bar-fill { height: 5px; background: var(--color-primary); border-radius: 3px; }
+.proj-title { font-weight: 700; color: var(--fs-text-primary); text-decoration: none; }
+.proj-title:hover { color: var(--fs-accent); }
+.proj-meta { margin-left: auto; font-size: 0.74rem; color: var(--fs-text-tertiary); }
+.bar { height: 5px; background: var(--fs-border-color); border-radius: 3px; margin: 0.55rem 0 0.2rem; }
+.bar-fill { height: 5px; background: var(--fs-accent); border-radius: 3px; }
 
 .ms-block { margin-top: 0.7rem; }
 .ms-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
-.ms-title { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
-.ms-title.ms-none { color: var(--color-muted); font-weight: 500; }
-.ms-pct { margin-left: auto; font-size: 0.72rem; color: var(--color-muted); }
+.ms-title { font-size: 0.82rem; font-weight: 600; color: var(--fs-text-primary); }
+.ms-title.ms-none { color: var(--fs-text-tertiary); font-weight: 500; }
+.ms-pct { margin-left: auto; font-size: 0.72rem; color: var(--fs-text-tertiary); }
 
-.task-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.86rem; }
-.task-row:hover { background: var(--color-hover); }
-.task-inprogress { border-left: 3px solid var(--color-primary); padding-left: calc(0.55rem - 3px); }
-.task-mark { color: var(--color-muted); }
+.task-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.86rem; }
+.task-row:hover { background: var(--fs-surface-hover); }
+.task-inprogress { border-left: 3px solid var(--fs-accent); padding-left: calc(0.55rem - 3px); }
+.task-mark { color: var(--fs-text-tertiary); }
 .task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.task-pri { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--color-border); color: var(--color-muted); }
+.task-pri { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--fs-border-color); color: var(--fs-text-tertiary); }
 .pri-high { color: #c0556b; border-color: #c0556b66; }
-.proj-more { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-primary); text-decoration: none; }
+.proj-more { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--fs-accent); text-decoration: none; }
 
-.rail-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 1.25rem; }
+.rail-card { background: var(--fs-surface-hover); border: 1px solid var(--fs-border-color); border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 1.25rem; }
 .stats { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
-.stats-sub { color: var(--color-muted); font-size: 0.78rem; }
+.stats-sub { color: var(--fs-text-tertiary); font-size: 0.78rem; }
 .proj-stats { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.45rem; }
-.pstat-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.85rem; }
-.pstat-row:hover { background: var(--color-hover); }
+.pstat-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.85rem; }
+.pstat-row:hover { background: var(--fs-surface-hover); }
 .pstat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 .pstat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
-.pstat-counts { font-size: 0.74rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
+.pstat-counts { font-size: 0.74rem; color: var(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
 .quick-add { display: flex; flex-wrap: wrap; gap: 0.4rem; }
-.qa-btn { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; color: var(--color-text); text-decoration: none; }
-.qa-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.qa-btn { background: var(--fs-surface-hover); border: 1px solid var(--fs-border-color); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; color: var(--fs-text-primary); text-decoration: none; }
+.qa-btn:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .issues-card { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.45rem; }
-.issue-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.85rem; }
-.issue-row:hover { background: var(--color-hover); }
-.issue-mark { color: var(--color-muted); flex-shrink: 0; }
-.issue-mark.imk-in_progress { color: var(--color-primary); }
+.issue-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 7px; text-decoration: none; color: var(--fs-text-primary); font-size: 0.85rem; }
+.issue-row:hover { background: var(--fs-surface-hover); }
+.issue-mark { color: var(--fs-text-tertiary); flex-shrink: 0; }
+.issue-mark.imk-in_progress { color: var(--fs-accent); }
 .issue-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.issue-meta { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
+.issue-meta { font-size: 0.72rem; color: var(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
 
 @media (max-width: 760px) { .dash-cols { flex-direction: column; } }
 </style>

frontend/src/views/DesignSystemsView.vue

@@ -1115,7 +1115,7 @@ function isSelfContainedColour(value: string): boolean {
 }
 
 .lede {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   max-width: 70ch;
   line-height: 1.6;
   margin: 0 0 1.5rem;
@@ -1137,9 +1137,9 @@ function isSelfContainedColour(value: string): boolean {
 /* Sidebar ---------------------------------------------------------------- */
 
 .ds-sidebar {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1rem;
 }
 
@@ -1156,7 +1156,7 @@ function isSelfContainedColour(value: string): boolean {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .system-list {
@@ -1173,22 +1173,22 @@ function isSelfContainedColour(value: string): boolean {
   text-align: left;
   background: none;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   padding: 0.5rem 0.6rem;
   cursor: pointer;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
 }
 
 .system-btn:hover {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 
 .system-btn.active {
-  border-color: var(--color-primary);
-  background: var(--color-bg-secondary);
+  border-color: var(--fs-accent);
+  background: var(--fs-surface-raised);
 }
 
 
@@ -1198,7 +1198,7 @@ function isSelfContainedColour(value: string): boolean {
 
 .system-kind {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* Sections --------------------------------------------------------------- */
@@ -1211,9 +1211,9 @@ function isSelfContainedColour(value: string): boolean {
 }
 
 .ds-section {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1.25rem;
 }
 
@@ -1232,7 +1232,7 @@ function isSelfContainedColour(value: string): boolean {
 
 .section-note,
 .muted {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.85rem;
   margin: 0 0 1rem;
 }
@@ -1247,17 +1247,17 @@ function isSelfContainedColour(value: string): boolean {
 }
 
 .chain-link {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .chain-link.self {
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-weight: 500;
 }
 
 .chain-arrow,
 .chain-note {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* Fields ----------------------------------------------------------------- */
@@ -1282,24 +1282,24 @@ function isSelfContainedColour(value: string): boolean {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin-bottom: 0.3rem;
 }
 
 .field-hint {
   margin: 0.3rem 0 0;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   line-height: 1.5;
 }
 
 .input {
   width: 100%;
   padding: 0.45rem 0.6rem;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  color: var(--fs-text-primary);
   font: inherit;
 }
 
@@ -1328,15 +1328,15 @@ textarea.input {
 
 .confirm-copy {
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   max-width: 40ch;
 }
 
 /* Tokens ----------------------------------------------------------------- */
 
 .token-form {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 1rem;
   margin-bottom: 1rem;
 }
@@ -1371,7 +1371,7 @@ textarea.input {
   align-items: center;
   gap: 0.6rem;
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .token-name {
@@ -1386,7 +1386,7 @@ textarea.input {
 }
 
 .token-meta {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.8rem;
   flex: 1;
   min-width: 0;
@@ -1405,18 +1405,18 @@ textarea.input {
 
 .finding-list li {
   padding: 0.6rem 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .finding-title {
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .finding-line {
   margin: 0.3rem 0 0;
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -1428,24 +1428,24 @@ textarea.input {
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 0.1rem 0.45rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   flex: none;
 }
 
 .spec-status.violated {
-  background: var(--color-priority-high-bg);
-  color: var(--color-priority-high);
+  background: var(--fs-priority-high-bg);
+  color: var(--fs-priority-high);
 }
 
 .spec-status.missing {
-  background: var(--color-priority-medium-bg);
-  color: var(--color-priority-medium);
+  background: var(--fs-priority-medium-bg);
+  color: var(--fs-priority-medium);
 }
 
 .sheet {
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.75rem 1rem;
   margin-top: 0.75rem;
   overflow-x: auto;
@@ -1472,7 +1472,7 @@ textarea.input {
 
 .supersedes {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-style: italic;
 }
 
@@ -1484,7 +1484,7 @@ textarea.input {
 }
 
 .mode-name {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-transform: uppercase;
   font-size: 0.7rem;
   letter-spacing: 0.06em;
@@ -1495,7 +1495,7 @@ textarea.input {
   width: 0.9rem;
   height: 0.9rem;
   border-radius: 3px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   flex: none;
 }
 
@@ -1510,12 +1510,12 @@ textarea.input {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .resolved-list li {
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .resolved-head {
@@ -1551,33 +1551,33 @@ textarea.input {
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 0.1rem 0.45rem;
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-muted);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-tertiary);
 }
 
 .origin-badge.own {
-  background: var(--color-primary-tint);
-  color: var(--color-primary);
+  background: var(--fs-accent-soft);
+  color: var(--fs-accent);
 }
 
 /* Notices ---------------------------------------------------------------- */
 
 .notice {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1.25rem;
   max-width: 60ch;
 }
 
 .notice-warn {
-  border-left: 3px solid var(--color-warning);
+  border-left: 3px solid var(--fs-warning);
 }
 
 .notice p {
   margin: 0.5rem 0 1rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   line-height: 1.6;
 }
 </style>

frontend/src/views/ForgotPasswordView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { apiPost } from "@/api/client";
+import { apiPost, apiErrorMessage } from "@/api/client";
 import AppLogo from "@/components/AppLogo.vue";
 
 const email = ref("");
@@ -15,12 +15,7 @@ async function handleSubmit() {
     await apiPost("/api/auth/forgot-password", { email: email.value });
     submitted.value = true;
   } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      error.value = body?.error || "Something went wrong";
-    } else {
-      error.value = "Something went wrong";
-    }
+    error.value = apiErrorMessage(e, "Something went wrong");
   } finally {
     submitting.value = false;
   }
@@ -55,7 +50,7 @@ async function handleSubmit() {
         </form>
       </template>
 
-      <div v-else class="success-msg">
+      <div v-else class="auth-note">
         <p>If an account exists with that email address, you will receive a password reset link shortly.</p>
         <p>Check your email and follow the instructions to reset your password.</p>
       </div>
@@ -67,83 +62,4 @@ async function handleSubmit() {
   </main>
 </template>
 
-<style scoped>
-.auth-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 1rem;
-}
-.auth-card {
-  width: 100%;
-  max-width: 400px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 2rem;
-}
-.auth-brand {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-.auth-card h1 {
-  margin: 0;
-  text-align: center;
-}
-.auth-hint {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin-bottom: 1rem;
-}
-.field {
-  margin-bottom: 1rem;
-}
-.field label {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 600;
-  margin-bottom: 0.35rem;
-}
-.input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: 0.95rem;
-  background: var(--color-bg);
-  color: var(--color-text);
-  box-sizing: border-box;
-}
-.input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-.error-msg {
-  color: var(--color-danger);
-  font-size: 0.9rem;
-  margin: 0 0 0.75rem;
-}
-.success-msg {
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: 0.95rem;
-  padding: 0.5rem 0;
-}
-.success-msg p {
-  margin: 0.5rem 0;
-}
-.auth-footer {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin: 1rem 0 0;
-}
-.auth-footer a {
-  color: var(--color-primary);
-}
-</style>
+<style src="@/assets/auth-shared.css" />

frontend/src/views/GraphView.vue

@@ -208,7 +208,7 @@ function initGraph() {
     .attr("orient", "auto")
     .append("path")
     .attr("d", "M0,-4L8,0L0,4")
-    .attr("fill", "var(--color-primary)")
+    .attr("fill", "var(--fs-accent)")
     .attr("opacity", "0.6");
 
   // Zoom layer
@@ -237,7 +237,7 @@ function initGraph() {
     .append("line")
     .attr("class", "graph-edge")
     .attr("stroke", (d: any) =>
-      d.type === "wikilink" ? "var(--color-primary)" : "var(--color-text-muted)"
+      d.type === "wikilink" ? "var(--fs-accent)" : "var(--fs-text-tertiary)"
     )
     .attr("stroke-opacity", (d: any) => (d.type === "wikilink" ? 0.5 : 0.4))
     .attr("stroke-dasharray", null)
@@ -295,11 +295,11 @@ function initGraph() {
     .append("circle")
     .attr("r", (d: GraphNode) => d.radius ?? 8)
     .attr("fill", (d: GraphNode) => {
-      if (d.type === "tag") return "color-mix(in srgb, var(--color-primary) 20%, transparent)";
-      return d.project_color ?? "var(--color-bg-secondary)";
+      if (d.type === "tag") return "color-mix(in srgb, var(--fs-accent) 20%, transparent)";
+      return d.project_color ?? "var(--fs-surface-raised)";
     })
     .attr("stroke", (d: GraphNode) =>
-      d.type === "tag" ? "var(--color-primary)" : "var(--color-border)"
+      d.type === "tag" ? "var(--fs-accent)" : "var(--fs-border-color)"
     )
     .attr("stroke-width", (d: GraphNode) => (d.type === "tag" ? 1.5 : 1.5))
     .attr("stroke-dasharray", (d: GraphNode) => (d.type === "task" ? "3" : null))
@@ -317,7 +317,7 @@ function initGraph() {
     .attr("dy", (d: GraphNode) => (d.radius ?? 8) + 12)
     .attr("font-size", "10px")
     .attr("fill", (d: GraphNode) =>
-      d.type === "tag" ? "var(--color-primary)" : "var(--color-text-secondary)"
+      d.type === "tag" ? "var(--fs-accent)" : "var(--fs-text-secondary)"
     )
     .attr("pointer-events", "none");
 
@@ -600,7 +600,7 @@ onUnmounted(() => {
 .graph-page {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--fs-layout-header));
   overflow: hidden;
 }
 
@@ -609,17 +609,17 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.75rem;
   padding: 0.6rem 1rem;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
   flex-wrap: wrap;
 }
 
 .graph-select {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   padding: 0.3rem 0.6rem;
   cursor: pointer;
@@ -631,27 +631,27 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.35rem;
   font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   cursor: pointer;
   user-select: none;
 }
 
 .graph-toggle input {
   cursor: pointer;
-  accent-color: var(--color-primary);
+  accent-color: var(--fs-accent);
 }
 
 .graph-stats {
   margin-left: auto;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .graph-physics-btn {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text-secondary);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  color: var(--fs-text-secondary);
   font-size: 0.875rem;
   font-family: inherit;
   padding: 0.3rem 0.7rem;
@@ -659,12 +659,12 @@ onUnmounted(() => {
   transition: border-color 0.15s, color 0.15s;
 }
 .graph-physics-btn:hover {
-  border-color: var(--color-primary);
-  color: var(--color-text);
+  border-color: var(--fs-accent);
+  color: var(--fs-text-primary);
 }
 .graph-physics-btn.active {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  border-color: var(--fs-accent);
+  color: var(--fs-accent);
 }
 
 .graph-physics-panel {
@@ -672,8 +672,8 @@ onUnmounted(() => {
   flex-wrap: wrap;
   gap: 0.5rem 1.5rem;
   padding: 0.6rem 1rem;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
@@ -688,20 +688,20 @@ onUnmounted(() => {
 
 .knob-label {
   font-size: 0.75rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   display: flex;
   justify-content: space-between;
 }
 
 .knob-label em {
   font-style: normal;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-variant-numeric: tabular-nums;
 }
 
 .physics-knob input[type="range"] {
   width: 100%;
-  accent-color: var(--color-primary);
+  accent-color: var(--fs-accent);
   cursor: pointer;
 }
 
@@ -709,7 +709,7 @@ onUnmounted(() => {
   flex: 1;
   position: relative;
   overflow: hidden;
-  background: var(--color-bg);
+  background: var(--fs-surface-page);
 }
 
 .graph-svg {
@@ -728,15 +728,15 @@ onUnmounted(() => {
 }
 
 .graph-empty p {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.95rem;
 }
 
 .spinner {
   width: 28px;
   height: 28px;
-  border: 3px solid var(--color-border);
-  border-top-color: var(--color-primary);
+  border: 3px solid var(--fs-border-color);
+  border-top-color: var(--fs-accent);
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
 }
@@ -747,9 +747,9 @@ onUnmounted(() => {
 
 .graph-tooltip {
   position: absolute;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   box-shadow: 0 4px 16px var(--color-shadow);
   padding: 0.5rem 0.75rem;
   pointer-events: none;
@@ -760,7 +760,7 @@ onUnmounted(() => {
 .tooltip-title {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   margin-bottom: 0.25rem;
 }
 
@@ -773,15 +773,15 @@ onUnmounted(() => {
 
 .tag-chip {
   font-size: 0.7rem;
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  color: var(--fs-accent);
   border-radius: 999px;
   padding: 0.1rem 0.4rem;
 }
 
 .tooltip-meta {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-transform: capitalize;
 }
 
@@ -792,8 +792,8 @@ onUnmounted(() => {
   right: 0;
   bottom: 0;
   width: 340px;
-  background: var(--color-bg-card);
-  border-left: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border-left: 1px solid var(--fs-border-color);
   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
@@ -815,7 +815,7 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 
@@ -826,10 +826,10 @@ onUnmounted(() => {
   letter-spacing: 0.05em;
   padding: 0.15rem 0.45rem;
   border-radius: 10px;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-muted);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-tertiary);
 }
-.peek-type-task { border-color: var(--color-primary); color: var(--color-primary); }
+.peek-type-task { border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .peek-actions {
   display: flex;
@@ -840,7 +840,7 @@ onUnmounted(() => {
 
 .peek-link {
   font-size: 0.78rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   text-decoration: none;
 }
 .peek-link:hover { text-decoration: underline; }
@@ -848,20 +848,20 @@ onUnmounted(() => {
 .peek-close {
   background: none;
   border: none;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.8rem;
   cursor: pointer;
   padding: 0.1rem 0.25rem;
   border-radius: 3px;
 }
-.peek-close:hover { color: var(--color-text); }
+.peek-close:hover { color: var(--fs-text-primary); }
 
 .peek-title {
   margin: 0;
   padding: 0.75rem 0.75rem 0.4rem;
   font-size: 1rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   flex-shrink: 0;
 }
 
@@ -877,7 +877,7 @@ onUnmounted(() => {
   flex: 1;
   overflow-y: auto;
   padding: 0 0.75rem 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .peek-prose {
@@ -887,7 +887,7 @@ onUnmounted(() => {
 .peek-loading,
 .peek-empty {
   font-size: 0.82rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   padding-top: 0.5rem;
 }
 
@@ -901,7 +901,7 @@ onUnmounted(() => {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin-bottom: 0.4rem;
 }
 
@@ -921,14 +921,14 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.4rem;
   font-size: 0.82rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
   padding: 0.25rem 0.4rem;
   border-radius: 4px;
 }
 .peek-linked-item:hover {
-  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-raised));
+  color: var(--fs-accent);
 }
 
 .peek-linked-type {
@@ -937,12 +937,12 @@ onUnmounted(() => {
   width: 1.1rem;
   height: 1.1rem;
   border-radius: 50%;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 </style>

frontend/src/views/KnowledgeView.vue

@@ -579,7 +579,7 @@ onUnmounted(() => {
 .knowledge-root {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--fs-layout-header));
   overflow: hidden;
 }
 
@@ -590,8 +590,8 @@ onUnmounted(() => {
   justify-content: space-between;
   gap: 12px;
   padding: 8px 20px;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
   font-size: 0.82rem;
   flex-wrap: wrap;
@@ -607,7 +607,7 @@ onUnmounted(() => {
   font-size: 0.78rem;
 }
 .today-link {
-  color: var(--color-primary);
+  color: var(--fs-accent);
   text-decoration: none;
   font-weight: 500;
   opacity: 0.85;
@@ -625,19 +625,19 @@ onUnmounted(() => {
 
 /* ── Filter panel ────────────────────────────────────────── */
 .filter-panel {
-  width: var(--sidebar-width);
+  width: var(--fs-layout-sidebar);
   flex-shrink: 0;
   padding: 16px 12px;
-  border-right: 1px solid var(--color-border);
+  border-right: 1px solid var(--fs-border-color);
   overflow-y: auto;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .filter-section { margin-bottom: 20px; }
 .filter-section + .filter-section::before {
   content: '· · ·';
   display: block;
   text-align: center;
-  color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+  color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
   font-size: 0.9rem;
   letter-spacing: 0.4em;
   padding: 4px 0 12px;
@@ -645,7 +645,7 @@ onUnmounted(() => {
 .filter-label {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 0.95rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   margin-bottom: 8px;
   padding: 0 4px;
 }
@@ -662,14 +662,14 @@ onUnmounted(() => {
   padding: 8px 12px;
   border-radius: 10px;
   border: none;
-  background: var(--gradient-cta);
+  background: var(--fs-gradient-cta);
   color: var(--fs-text-on-action);
   cursor: pointer;
   font-size: 0.85rem;
   font-weight: 500;
   transition: box-shadow 0.15s;
 }
-.btn-new-note:hover { box-shadow: var(--glow-cta-hover); }
+.btn-new-note:hover { box-shadow: var(--fs-glow-cta-hover); }
 .btn-new-icon {
   font-size: 1.1rem;
   line-height: 1;
@@ -680,8 +680,8 @@ onUnmounted(() => {
   top: calc(100% + 6px);
   left: 0;
   right: 0;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 10px;
   overflow: hidden;
   z-index: 50;
@@ -696,15 +696,15 @@ onUnmounted(() => {
   padding: 9px 14px;
   background: none;
   border: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-size: 0.84rem;
   text-align: left;
   transition: background 0.12s, color 0.12s;
 }
 .new-note-menu button:hover {
-  background: var(--color-primary-tint);
-  color: var(--color-primary);
+  background: var(--fs-accent-soft);
+  color: var(--fs-accent);
 }
 .new-note-menu button svg {
   flex-shrink: 0;
@@ -712,7 +712,7 @@ onUnmounted(() => {
 }
 .new-note-menu button:hover svg {
   opacity: 1;
-  stroke: var(--color-primary);
+  stroke: var(--fs-accent);
 }
 
 .filter-btn {
@@ -725,7 +725,7 @@ onUnmounted(() => {
   border-radius: 7px;
   border: none;
   background: transparent;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
   font-size: 0.85rem;
   margin-bottom: 2px;
@@ -734,8 +734,8 @@ onUnmounted(() => {
 }
 .filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
 .filter-btn.active {
-  background: var(--color-primary-wash);
-  color: var(--color-primary);
+  background: var(--fs-accent-wash);
+  color: var(--fs-accent);
   opacity: 1;
 }
 .filter-btn-label { flex: 1; }
@@ -744,15 +744,15 @@ onUnmounted(() => {
   padding: 1px 6px;
   border-radius: 10px;
   background: rgba(255,255,255,0.07);
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   font-weight: 500;
   min-width: 20px;
   text-align: center;
   flex-shrink: 0;
 }
 .filter-btn.active .filter-count {
-  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 20%, transparent);
+  color: var(--fs-accent);
 }
 .filter-tag { font-size: 0.78rem; }
 
@@ -772,7 +772,7 @@ onUnmounted(() => {
   gap: 10px;
   padding: 12px 20px;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .search-wrap {
   flex: 1;
@@ -783,27 +783,27 @@ onUnmounted(() => {
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   pointer-events: none;
 }
 .search-input {
   width: 100%;
   padding: 7px 12px 7px 32px;
   border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-primary);
   font-size: 0.88rem;
   outline: none;
   transition: border-color 0.15s;
 }
-.search-input:focus { border-color: var(--color-primary); }
+.search-input:focus { border-color: var(--fs-accent); }
 .sort-select {
   padding: 7px 10px;
   border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   cursor: pointer;
   outline: none;
@@ -824,9 +824,9 @@ onUnmounted(() => {
 
 .k-card {
   position: relative;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  background: var(--fs-surface-hover);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-xl);
   padding: 14px;
   cursor: pointer;
   transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
@@ -838,12 +838,12 @@ onUnmounted(() => {
 }
 .k-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
-  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
+  box-shadow: 0 8px 28px color-mix(in srgb, var(--fs-accent) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
+  border-color: color-mix(in srgb, var(--fs-accent) 35%, transparent);
 }
 
 /* Type-specific card DNA */
-.k-card--note   { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
+.k-card--note   { border-color: color-mix(in srgb, var(--fs-accent) 20%, transparent); }
 .k-card--task   { border-color: rgba(212, 160, 23, 0.18); }
 
 /* Top gradient bars */
@@ -858,7 +858,7 @@ onUnmounted(() => {
 }
 .k-card--note::before {
   right: 0;
-  background: linear-gradient(90deg, var(--color-primary), #7A6DA8);
+  background: linear-gradient(90deg, var(--fs-accent), #7A6DA8);
 }
 .k-card--task::before {
   right: 0;
@@ -877,7 +877,7 @@ onUnmounted(() => {
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.badge--note   { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: #7A6DA8; }
+.badge--note   { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: #7A6DA8; }
 .badge--task   { background: rgba(212,160,23,0.15); color: #fbbf24; }
 .badge--plan   { background: rgba(99,102,241,0.18); color: #818cf8; }
 
@@ -894,7 +894,7 @@ onUnmounted(() => {
 }
 .k-card-snippet {
   font-size: 0.8rem;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
@@ -914,9 +914,9 @@ onUnmounted(() => {
   padding: 1px 6px;
   border-radius: 8px;
   background: rgba(255,255,255,0.05);
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
 }
-.k-card-date { font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap; opacity: 0.7; }
+.k-card-date { font-size: 0.72rem; color: var(--fs-text-secondary); white-space: nowrap; opacity: 0.7; }
 /* Only rendered for a record another user owns, so an unmarked card is
    unambiguously the viewer's own. */
 .shared-tag {
@@ -924,8 +924,8 @@ onUnmounted(() => {
   padding: 0.08rem 0.35rem;
   border-radius: 4px;
   white-space: nowrap;
-  background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
-  color: var(--color-text-secondary);
+  background: color-mix(in srgb, var(--fs-text-secondary) 15%, transparent);
+  color: var(--fs-text-secondary);
 }
 
 /* ── Task card ──────────────────────────────────────────── */
@@ -945,10 +945,10 @@ onUnmounted(() => {
   border-radius: 8px;
   font-weight: 500;
 }
-.status--todo { background: var(--color-status-todo-bg); color: var(--color-status-todo); }
-.status--in_progress { background: var(--color-status-in-progress-bg); color: var(--color-status-in-progress); }
-.status--done { background: var(--color-status-done-bg); color: var(--color-status-done); }
-.status--cancelled { background: var(--color-status-todo-bg); color: var(--color-status-todo); text-decoration: line-through; }
+.status--todo { background: var(--fs-status-todo-bg); color: var(--fs-status-todo); }
+.status--in_progress { background: var(--fs-status-in-progress-bg); color: var(--fs-status-in-progress); }
+.status--done { background: var(--fs-status-done-bg); color: var(--fs-status-done); }
+.status--cancelled { background: var(--fs-status-todo-bg); color: var(--fs-status-todo); text-decoration: line-through; }
 
 .priority-badge {
   font-size: 0.7rem;
@@ -956,16 +956,16 @@ onUnmounted(() => {
   border-radius: 8px;
   font-weight: 500;
 }
-.priority--low { background: var(--color-priority-low-bg); color: var(--color-priority-low); }
-.priority--normal { background: var(--color-priority-medium-bg); color: var(--color-priority-medium); }
-.priority--high { background: var(--color-priority-high-bg); color: var(--color-priority-high); }
+.priority--low { background: var(--fs-priority-low-bg); color: var(--fs-priority-low); }
+.priority--normal { background: var(--fs-priority-medium-bg); color: var(--fs-priority-medium); }
+.priority--high { background: var(--fs-priority-high-bg); color: var(--fs-priority-high); }
 
 .task-due {
   font-size: 0.78rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .task-overdue {
-  color: var(--color-overdue);
+  color: var(--fs-overdue);
   font-weight: 500;
 }
 
@@ -977,7 +977,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   text-align: center;
   gap: 6px;
 }
@@ -985,7 +985,7 @@ onUnmounted(() => {
 .empty-narrator {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 1rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   opacity: 0.85;
 }
 
@@ -999,17 +999,17 @@ onUnmounted(() => {
 }
 .sentinel-loading {
   font-size: 0.8rem;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
 }
 
 /* ── Graph panel ─────────────────────────────────────────── */
 .graph-panel {
   width: 500px;
   flex-shrink: 0;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--fs-border-color);
   display: flex;
   flex-direction: column;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
   transition: width 0.2s ease;
 }
 .graph-panel.expanded {
@@ -1022,7 +1022,7 @@ onUnmounted(() => {
   padding: 10px 14px;
   font-size: 0.85rem;
   font-weight: 500;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   flex-shrink: 0;
 }
 /* RESTORED (#2444). The panel is a flex COLUMN and its header is
@@ -1050,15 +1050,15 @@ onUnmounted(() => {
 .dup-panel {
   margin-bottom: 1.25rem;
   padding: 0.85rem 1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 8px;
-  background: var(--color-surface-alt);
+  background: var(--fs-surface-hover);
 }
 .dup-empty,
 .dup-head {
   margin: 0 0 0.5rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .dup-empty { margin-bottom: 0; }
 .dup-group {
@@ -1067,7 +1067,7 @@ onUnmounted(() => {
   gap: 0.75rem;
   flex-wrap: wrap;
   padding: 0.5rem 0;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 .dup-members {
   display: flex;
@@ -1080,23 +1080,23 @@ onUnmounted(() => {
   font-size: 0.8rem;
   padding: 0.1rem 0.45rem;
   border-radius: 4px;
-  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
-  color: var(--color-text);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
+  color: var(--fs-text-primary);
   text-decoration: none;
   overflow-wrap: anywhere;
 }
-.dup-member:hover { background: var(--color-hover); }
+.dup-member:hover { background: var(--fs-surface-hover); }
 .dup-score {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 /* A set someone already ruled on — quiet, not celebratory: it means "skip". */
 .dup-claimed {
   font-size: 0.72rem;
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
+  color: var(--fs-text-tertiary);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
   padding: 0.05rem 0.4rem;
   white-space: nowrap;

frontend/src/views/LoginView.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import AppLogo from "@/components/AppLogo.vue";
+import { apiErrorMessage } from "@/api/client";
 
 const router = useRouter();
 const route = useRoute();
@@ -30,12 +31,7 @@ async function handleSubmit() {
     const redirect = (route.query.redirect as string) || "/";
     router.push(redirect);
   } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      error.value = body?.error || "Login failed";
-    } else {
-      error.value = "Login failed";
-    }
+    error.value = apiErrorMessage(e, "Login failed");
   } finally {
     submitting.value = false;
   }
@@ -112,92 +108,21 @@ function loginWithOAuth() {
   </main>
 </template>
 
+<style src="@/assets/auth-shared.css" />
 <style scoped>
-.auth-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 1rem;
-}
-.auth-card {
-  width: 100%;
-  max-width: 400px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 2rem;
-}
-.auth-brand {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-.auth-card h1 {
-  margin: 0;
-  text-align: center;
-}
-.auth-hint {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin-bottom: 1rem;
-}
-.auth-hint a {
-  color: var(--color-primary);
-}
-.field {
-  margin-bottom: 1rem;
-}
-.field label {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 600;
-  margin-bottom: 0.35rem;
-}
-.input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: 0.95rem;
-  background: var(--color-bg);
-  color: var(--color-text);
-  box-sizing: border-box;
-}
-.input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-.error-msg {
-  color: var(--color-danger);
-  font-size: 0.9rem;
-  margin: 0 0 0.75rem;
-}
 .divider {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin: 1.25rem 0;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: 0.85rem;
 }
 .divider::before,
 .divider::after {
   content: "";
   flex: 1;
-  border-top: 1px solid var(--color-border);
-}
-.auth-footer {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin: 1rem 0 0;
-}
-.auth-footer a {
-  color: var(--color-primary);
+  border-top: 1px solid var(--fs-border-color);
 }
 .forgot-link {
   text-align: right;
@@ -205,9 +130,9 @@ function loginWithOAuth() {
   font-size: 0.85rem;
 }
 .forgot-link a {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .forgot-link a:hover {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 </style>

frontend/src/views/LogsView.vue

@@ -3,6 +3,7 @@ import { ref, onMounted, watch } from "vue";
 import { apiGet } from "@/api/client";
 import { useToastStore } from "@/stores/toast";
 import PaginationBar from "@/components/PaginationBar.vue";
+import { fmtLogStamp } from "@/utils/dateFormat";
 
 const toastStore = useToastStore();
 
@@ -98,17 +99,6 @@ function toggleExpand(id: number) {
   expandedId.value = expandedId.value === id ? null : id;
 }
 
-function formatTime(iso: string): string {
-  const d = new Date(iso);
-  return d.toLocaleString(undefined, {
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-}
-
 function formatDetails(details: string | null): string {
   if (!details) return "";
   try {
@@ -210,7 +200,7 @@ function clearFilters() {
                 :class="{ 'row-expanded': expandedId === entry.id }"
                 @click="toggleExpand(entry.id)"
               >
-                <td class="cell-time">{{ formatTime(entry.created_at) }}</td>
+                <td class="cell-time">{{ fmtLogStamp(entry.created_at) }}</td>
                 <td>
                   <span class="category-badge" :class="'cat-' + entry.category">
                     {{ entry.category }}
@@ -263,9 +253,9 @@ function clearFilters() {
   margin: 0 0 1.5rem;
 }
 .settings-section {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1.25rem;
   margin-bottom: 1.5rem;
 }
@@ -292,23 +282,23 @@ function clearFilters() {
 .stat-count {
   font-size: 1.5rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .stat-label {
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .stat-audit {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 .stat-usage {
-  color: var(--color-success);
+  color: var(--fs-success);
 }
 .stat-error {
-  color: var(--color-danger);
+  color: var(--fs-error);
 }
 
 /* Filters */
@@ -321,10 +311,10 @@ function clearFilters() {
 .filter-input,
 .filter-date {
   padding: 0.4rem 0.6rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
 }
 .filter-select {
@@ -342,7 +332,7 @@ function clearFilters() {
 .loading-msg,
 .empty-msg {
   text-align: center;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.9rem;
   padding: 1rem 0;
 }
@@ -356,13 +346,13 @@ function clearFilters() {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .logs-table td {
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   font-size: 0.85rem;
 }
 .logs-table tbody tr:last-child td {
@@ -373,18 +363,18 @@ function clearFilters() {
   transition: background 0.1s;
 }
 .log-row:hover {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .row-expanded {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .cell-time {
   white-space: nowrap;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.8rem;
 }
 .cell-user {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .cell-action {
   max-width: 280px;
@@ -399,22 +389,22 @@ function clearFilters() {
 .cell-ip {
   font-family: monospace;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
 }
 .cell-duration {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.8rem;
   white-space: nowrap;
 }
 .detail-ip {
   font-family: monospace;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin-bottom: 0.4rem;
 }
 .text-error {
-  color: var(--color-danger);
+  color: var(--fs-error);
 }
 
 /* Category badges */
@@ -425,19 +415,19 @@ function clearFilters() {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.1rem 0.35rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
 }
 .cat-audit {
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
 }
 .cat-usage {
-  color: var(--color-success);
-  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--fs-success);
+  background: color-mix(in srgb, var(--fs-success) 15%, transparent);
 }
 .cat-error {
-  color: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+  color: var(--fs-error);
+  background: color-mix(in srgb, var(--fs-error) 15%, transparent);
 }
 
 /* Method tag */
@@ -448,8 +438,8 @@ function clearFilters() {
   font-family: monospace;
   padding: 0.05rem 0.25rem;
   border-radius: 3px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-muted);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-tertiary);
   margin-right: 0.25rem;
 }
 
@@ -458,14 +448,14 @@ function clearFilters() {
    cells don't carry, and the row exists to scope the rule below (#2444). */
 .detail-row td {
   padding: 0 0.75rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .detail-json {
   margin: 0;
   padding: 0.75rem;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   font-size: 0.8rem;
   overflow-x: auto;
   white-space: pre-wrap;

frontend/src/views/NoteEditorView.vue

@@ -633,13 +633,13 @@ onUnmounted(() => assist.clearSelection());
   gap: 0.75rem;
   flex-wrap: wrap;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 .editor-tabs {
   display: inline-flex;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
   border-radius: 8px;
   padding: 2px;
   gap: 2px;
@@ -653,14 +653,14 @@ onUnmounted(() => assist.clearSelection());
   padding: 0.22rem 0.75rem;
   font-size: 0.78rem;
   font-weight: 500;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
-.tab:hover { color: var(--color-text); }
+.tab:hover { color: var(--fs-text-primary); }
 .tab.active {
-  background: var(--color-surface);
-  color: var(--color-text);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-primary);
   box-shadow: 0 1px 3px rgba(0,0,0,0.12);
 }
 
@@ -679,14 +679,14 @@ onUnmounted(() => assist.clearSelection());
 
 .stream-label {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .stream-preview {
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.75rem;
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
   min-height: 200px;
 }
 
@@ -699,7 +699,7 @@ onUnmounted(() => assist.clearSelection());
 .note-sidebar {
   width: 280px;
   flex-shrink: 0;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--fs-border-color);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -708,17 +708,17 @@ onUnmounted(() => assist.clearSelection());
 .sb-select, .sb-input {
   width: 100%;
   padding: 5px 8px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-input-border);
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
+  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-primary);
   font-size: 0.82rem;
   font-family: inherit;
   outline: none;
   transition: border-color 0.15s;
 }
 .sb-select:focus, .sb-input:focus {
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 
 /* Tag suggest row inside sidebar */
@@ -742,13 +742,13 @@ onUnmounted(() => assist.clearSelection());
   font-size: 0.72rem;
   padding: 0.15rem 0.5rem;
   background: none;
-  border: 1px solid var(--color-primary);
-  border-radius: var(--radius-sm);
-  color: var(--color-primary);
+  border: 1px solid var(--fs-accent);
+  border-radius: var(--fs-radius-sm);
+  color: var(--fs-accent);
   cursor: pointer;
   font-family: inherit;
 }
-.btn-link-all:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
+.btn-link-all:hover { background: var(--fs-action-primary); color: var(--fs-text-on-action); }
 
 .link-suggest-list {
   display: flex;
@@ -766,14 +766,14 @@ onUnmounted(() => assist.clearSelection());
 .link-suggest-title {
   flex: 1;
   font-family: monospace;
-  color: var(--color-primary);
+  color: var(--fs-accent);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .link-suggest-count {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.72rem;
   flex-shrink: 0;
 }
@@ -783,13 +783,13 @@ onUnmounted(() => assist.clearSelection());
   font-size: 0.72rem;
   padding: 0.1rem 0.4rem;
   background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-family: inherit;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
-.btn-apply-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.btn-apply-link:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 
 /* Writing Assistant section */
 .assist-section {
@@ -801,7 +801,7 @@ onUnmounted(() => assist.clearSelection());
 .assist-section-title {
   font-size: 0.78rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -810,19 +810,19 @@ onUnmounted(() => assist.clearSelection());
 .ef-label {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 0.92rem;
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 .prompt-editor {
   width: 100%;
   min-height: 60vh;
   margin-top: 8px;
   padding: 14px 16px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 8px;
-  background: var(--color-surface);
-  color: var(--color-text);
+  background: var(--fs-surface-hover);
+  color: var(--fs-text-primary);
   /* Prompts are plain markdown — a code-style editor, not rich text. */
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 0.88rem;
   line-height: 1.55;
   tab-size: 2;
@@ -830,7 +830,7 @@ onUnmounted(() => assist.clearSelection());
   outline: none;
 }
 .prompt-editor:focus {
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 /* Narrow screen: sidebar collapses */
 @media (max-width: 720px) {
@@ -839,7 +839,7 @@ onUnmounted(() => assist.clearSelection());
   .note-sidebar {
     width: 100%;
     border-left: none;
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--fs-border-color);
     overflow-y: visible;
   }
 }

frontend/src/views/NoteViewerView.vue

@@ -340,7 +340,7 @@ async function convertToTask() {
   gap: 0.5rem;
   flex-wrap: wrap;
   font-size: 0.83rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.75rem;
 }
 .meta-item {
@@ -359,7 +359,7 @@ async function convertToTask() {
 }
 .backlinks {
   margin-top: 2.5rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 1.25rem;
 }
 .backlinks-heading {
@@ -370,14 +370,14 @@ async function convertToTask() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.75rem;
 }
 .backlinks-count {
   margin-left: 0.2rem;
   font-size: 0.72rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0 0.4rem;
   line-height: 1.4;
@@ -392,18 +392,18 @@ async function convertToTask() {
   align-items: center;
   gap: 0.6rem;
   padding: 0.5rem 0.75rem;
-  border-radius: var(--radius-md);
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  border-radius: var(--fs-radius-lg);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   transition: border-color 0.15s, box-shadow 0.15s;
   font-size: 0.9rem;
 }
 .backlink-card:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+  border-color: color-mix(in srgb, var(--fs-accent) 50%, transparent);
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 .backlink-type-badge {
   font-size: 0.68rem;
@@ -415,9 +415,9 @@ async function convertToTask() {
   flex-shrink: 0;
 }
 .badge-note {
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  color: var(--color-primary);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
+  color: var(--fs-accent);
+  border: 1px solid color-mix(in srgb, var(--fs-accent) 25%, transparent);
 }
 .badge-task {
   background: color-mix(in srgb, #f59e0b 12%, transparent);
@@ -446,12 +446,12 @@ async function convertToTask() {
 .skel-title,
 .skel-meta,
 .skel-line {
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   background: linear-gradient(
     90deg,
-    var(--color-bg-secondary) 25%,
-    color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-secondary)) 50%,
-    var(--color-bg-secondary) 75%
+    var(--fs-surface-raised) 25%,
+    color-mix(in srgb, var(--fs-text-tertiary) 18%, var(--fs-surface-raised)) 50%,
+    var(--fs-surface-raised) 75%
   );
   background-size: 200% 100%;
   animation: skel-shine 1.5s ease infinite;
@@ -463,7 +463,7 @@ async function convertToTask() {
 }
 .skel-btn { width: 70px; height: 32px; }
 .skel-btn--wide { width: 90px; }
-.skel-title { height: 2.2rem; width: 70%; border-radius: var(--radius-md); }
+.skel-title { height: 2.2rem; width: 70%; border-radius: var(--fs-radius-lg); }
 .skel-meta { height: 0.85rem; width: 40%; }
 .skel-line { height: 0.9rem; }
 .skel-line--short { width: 55%; }

frontend/src/views/ProjectListView.vue

@@ -317,9 +317,9 @@ function overallPct(project: Project): { total: number; pct: number } {
 
 <style scoped>
 .projects-list {
-  max-width: var(--page-max-width);
+  max-width: var(--fs-layout-page-max);
   margin: 2rem auto;
-  padding: 0 var(--page-padding-x);
+  padding: 0 var(--fs-layout-page-pad);
   overflow-x: clip;
 }
 
@@ -340,7 +340,7 @@ function overallPct(project: Project): { total: number; pct: number } {
   display: flex;
   gap: 0.25rem;
   margin-bottom: 1.25rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   padding-bottom: 0;
 }
 .tab-btn {
@@ -350,40 +350,40 @@ function overallPct(project: Project): { total: number; pct: number } {
   border-bottom: 2px solid transparent;
   cursor: pointer;
   font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-family: inherit;
   margin-bottom: -1px;
 }
 .tab-btn:hover {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 .tab-btn.active {
-  color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
+  color: var(--fs-accent);
+  border-bottom-color: var(--fs-accent);
   font-weight: 500;
 }
 
 .loading-msg,
 .error-msg {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.9rem;
   margin-top: 1rem;
 }
 .error-msg {
-  color: var(--color-danger);
+  color: var(--fs-error);
 }
 
-.empty-state-rich { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
+.empty-state-rich { text-align: center; padding: 3rem 1rem; color: var(--fs-text-tertiary); }
 .empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; }
-.empty-title { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.35rem; }
+.empty-title { font-size: 1rem; font-weight: 500; color: var(--fs-text-secondary); margin: 0 0 0.35rem; }
 .empty-sub { font-size: 0.85rem; margin: 0 0 1rem; }
-.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-action-primary); border-radius: var(--radius-sm); color: var(--color-action-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
-.empty-action:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
+.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--fs-action-primary); border-radius: var(--fs-radius-sm); color: var(--fs-action-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
+.empty-action:hover { background: var(--fs-action-primary); color: var(--fs-text-on-action); }
 
 .skeleton-card {
   height: 140px;
-  border-radius: var(--radius-md);
-  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
+  border-radius: var(--fs-radius-lg);
+  background: linear-gradient(90deg, var(--fs-surface-raised) 25%, var(--fs-border-color) 50%, var(--fs-surface-raised) 75%);
   background-size: 200% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
 }
@@ -404,9 +404,9 @@ function overallPct(project: Project): { total: number; pct: number } {
 }
 
 .project-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1rem 1.1rem;
   cursor: pointer;
   transition: border-color 0.15s, box-shadow 0.15s, transform 0.18s ease;
@@ -415,7 +415,7 @@ function overallPct(project: Project): { total: number; pct: number } {
   gap: 0.5rem;
 }
 .project-card:hover {
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
   box-shadow: 0 2px 8px var(--color-shadow);
   transform: translateY(-2px);
 }
@@ -429,7 +429,7 @@ function overallPct(project: Project): { total: number; pct: number } {
 .project-title {
   font-size: 1rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   min-width: 0;
   flex: 1;
   word-break: break-word;
@@ -446,32 +446,32 @@ function overallPct(project: Project): { total: number; pct: number } {
   white-space: nowrap;
 }
 .status-active {
-  background: color-mix(in srgb, var(--color-success) 15%, transparent);
-  color: var(--color-success);
+  background: color-mix(in srgb, var(--fs-success) 15%, transparent);
+  color: var(--fs-success);
 }
 .status-completed {
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  color: var(--fs-accent);
 }
 .status-archived {
-  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
-  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
+  color: var(--fs-text-tertiary);
 }
 
 .project-goal {
   font-size: 0.875rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   margin: 0;
   line-height: 1.4;
 }
 .field-label {
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .project-desc {
   font-size: 0.82rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   margin: 0;
   line-height: 1.45;
 }
@@ -486,18 +486,18 @@ function overallPct(project: Project): { total: number; pct: number } {
 .overall-bar-track {
   flex: 1;
   height: 6px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   border-radius: 999px;
   overflow: hidden;
 }
 .overall-bar-fill {
   height: 100%;
   border-radius: 999px;
-  background: var(--color-primary);
+  background: var(--fs-accent);
   transition: width 0.3s ease;
 }
 .overall-bar-pct {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   flex-shrink: 0;
   min-width: 2.5rem;
   text-align: right;
@@ -517,7 +517,7 @@ function overallPct(project: Project): { total: number; pct: number } {
   font-size: 0.72rem;
 }
 .milestone-bar-label {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   min-width: 0;
   flex: 0 0 30%;
   overflow: hidden;
@@ -527,7 +527,7 @@ function overallPct(project: Project): { total: number; pct: number } {
 .milestone-bar-track {
   flex: 1;
   height: 5px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   border-radius: 999px;
   overflow: hidden;
 }
@@ -537,7 +537,7 @@ function overallPct(project: Project): { total: number; pct: number } {
   transition: width 0.3s ease;
 }
 .milestone-bar-pct {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
   min-width: 2.5rem;
   text-align: right;
@@ -546,7 +546,7 @@ function overallPct(project: Project): { total: number; pct: number } {
 /* Deliberately quiet — it is a footnote about what is not shown, not another
    row competing with the bars above it. */
 .milestone-more {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: var(--fs-size-tiny);
   padding-top: 0.15rem;
 }
@@ -556,27 +556,11 @@ function overallPct(project: Project): { total: number; pct: number } {
 }
 .meta-date {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
-/* Modal */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--color-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 200;
-}
 .modal-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 1.5rem;
-  width: 100%;
   max-width: 480px;
-  box-shadow: 0 8px 32px var(--color-shadow);
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -593,18 +577,18 @@ function overallPct(project: Project): { total: number; pct: number } {
 .modal-field label {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .required {
-  color: var(--color-danger);
+  color: var(--fs-error);
 }
 .modal-input,
 .modal-textarea {
   padding: 0.45rem 0.7rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   font-family: inherit;
   box-sizing: border-box;
@@ -613,41 +597,11 @@ function overallPct(project: Project): { total: number; pct: number } {
 .modal-input:focus,
 .modal-textarea:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .modal-textarea {
   resize: vertical;
 }
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-.modal-btn {
-  padding: 0.4rem 0.9rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-family: inherit;
-}
-.modal-btn:hover {
-  background: var(--color-bg);
-}
-.modal-btn-primary {
-  background: var(--color-action-primary);
-  border-color: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-}
-.modal-btn-primary:hover:not(:disabled) {
-  opacity: 0.9;
-}
-.modal-btn-primary:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
 
 @media (max-width: 600px) {
   .projects-grid {

frontend/src/views/ProjectView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { apiGet, apiPatch, apiDelete, apiPost } from "@/api/client";
+import { apiGet, apiPatch, apiDelete, apiPost, apiPut } from "@/api/client";
+import { useAuthStore } from "@/stores/auth";
 import { useToastStore } from "@/stores/toast";
 import { useTasksStore } from "@/stores/tasks";
 import { relativeTime } from "@/composables/useRelativeTime";
@@ -48,6 +49,7 @@ interface Project {
   status: "active" | "paused" | "completed" | "archived";
   color: string | null;
   design_system_id: number | null;
+  forge_connection_id: number | null;
   permission?: string;
   created_at: string;
   updated_at: string;
@@ -418,11 +420,134 @@ async function loadNotes() {
   }
 }
 
+/* ── Pattern-library coverage (#2692) ─────────────────────────── */
+
+interface CoverageGap {
+  dir: string;
+  unclassified: number;
+  total: number;
+}
+interface DeriveGroup {
+  group: string;
+  kind: string;
+  label: string;
+  size: number;
+  paths: string[];
+}
+interface Coverage {
+  total: number;
+  accounted: number;
+  unclassified: number;
+  counts: Record<string, number>;
+  estimate: boolean;
+  computed_at: string;
+  repos: { repo: string; ref: string; total: number; accounted: number }[];
+  largest_gaps: CoverageGap[];
+  // The mechanical proposer's standing (#2792): canon proposals awaiting an
+  // agent's confirm, and the biggest repeats-with-no-canon families.
+  proposed?: number;
+  derive_groups?: DeriveGroup[];
+  // The divergence readout (#2793): button B where button A is canon, and
+  // judged shapes whose bodies moved since they were judged.
+  divergent?: number;
+  divergence?: Divergence[];
+  recheck?: number;
+}
+interface Divergence {
+  path: string;
+  symbol: string;
+  kind: string;
+  canon_snippet_id: number;
+}
+
+const coverage = ref<Coverage | null>(null);
+const coverageConfigured = ref(false);
+const coverageRefreshing = ref(false);
+const coverageError = ref<string | null>(null);
+
+/** Swallows failure like loadDesignSystems: no forge is the ordinary state
+ *  for most installs, and this card must never break the project page. */
+async function loadCoverage() {
+  try {
+    const res = await apiGet<{ configured: boolean; coverage: Coverage | null }>(
+      `/api/projects/${projectId.value}/coverage`
+    );
+    coverageConfigured.value = res.configured;
+    coverage.value = res.coverage;
+  } catch {
+    coverageConfigured.value = false;
+    coverage.value = null;
+  }
+}
+
+async function refreshCoverage() {
+  if (coverageRefreshing.value) return;
+  coverageRefreshing.value = true;
+  coverageError.value = null;
+  try {
+    const res = await apiPost<{ coverage: Coverage }>(
+      `/api/projects/${projectId.value}/coverage/refresh`,
+      {}
+    );
+    coverage.value = res.coverage;
+  } catch (e) {
+    coverageError.value =
+      e instanceof Error ? e.message : "Coverage refresh failed";
+  } finally {
+    coverageRefreshing.value = false;
+  }
+}
+
+/* ── Forge pin (#2778) — which of the OWNER's connections serves this
+   project. Owner-only UI: the select lists the viewer's own keyring, which
+   is only the eligible set when the viewer IS the owner. ── */
+
+const authStore = useAuthStore();
+const isProjectOwner = computed(
+  () => !!project.value && project.value.user_id === authStore.user?.id
+);
+interface ForgeConnectionOption { id: number; host: string; kind: string }
+const forgeOptions = ref<ForgeConnectionOption[]>([]);
+const forgePin = ref<number | null>(null);
+const savingForgePin = ref(false);
+
+async function loadForgeOptions() {
+  if (!isProjectOwner.value) return;
+  try {
+    const res = await apiGet<{ connections: ForgeConnectionOption[] }>(
+      "/api/settings/forge-connections"
+    );
+    forgeOptions.value = res.connections;
+    forgePin.value = project.value?.forge_connection_id ?? null;
+  } catch {
+    forgeOptions.value = [];
+  }
+}
+
+async function saveForgePin() {
+  savingForgePin.value = true;
+  try {
+    await apiPut(`/api/projects/${projectId.value}/forge`, {
+      connection_id: forgePin.value,
+    });
+    if (project.value) project.value.forge_connection_id = forgePin.value;
+    await loadCoverage();
+  } catch (e) {
+    const body = (e as { body?: { error?: string } }).body;
+    toast.show(body?.error || "Failed to change the project's forge", "error");
+    forgePin.value = project.value?.forge_connection_id ?? null;
+  } finally {
+    savingForgePin.value = false;
+  }
+}
+
 onMounted(async () => {
   await loadProject();
   loadTasks();
   loadNotes();
   loadDesignSystems();
+  loadCoverage();
+  loadForgeOptions();
 });
 
 /** Populate the design-system picker. Swallows failure on purpose: with no
@@ -440,6 +565,8 @@ watch(projectId, async () => {
   await loadProject();
   loadTasks();
   loadNotes();
+  loadCoverage();
+  loadForgeOptions();
 });
 
 watch(
@@ -592,6 +719,120 @@ async function confirmDelete() {
         </div>
       </div>
 
+      <!-- Pattern-library coverage (#2692) — only when a forge is configured;
+           forge-less installs never see this card at all. -->
+      <div v-if="coverageConfigured" class="coverage-card">
+        <div class="coverage-head">
+          <span class="coverage-title">Pattern coverage</span>
+          <span class="coverage-estimate" title="Keyword-based extraction over- and under-counts; watch the trend, not the digit">estimate</span>
+          <span v-if="coverage" class="coverage-when">computed {{ relativeTime(coverage.computed_at) }}</span>
+          <button
+            class="btn-ghost btn-compact coverage-refresh"
+            :disabled="coverageRefreshing"
+            @click="refreshCoverage"
+          >
+            {{ coverageRefreshing ? "Measuring…" : "Refresh" }}
+          </button>
+        </div>
+        <template v-if="coverage">
+          <div class="coverage-numbers">
+            <span class="coverage-count">{{ coverage.accounted }}/{{ coverage.total }}</span>
+            <span class="coverage-label">shapes accounted for</span>
+          </div>
+          <div
+            class="coverage-bar"
+            role="progressbar"
+            :aria-valuenow="coverage.accounted"
+            :aria-valuemin="0"
+            :aria-valuemax="coverage.total"
+            aria-label="Shapes classified against canon"
+          >
+            <div
+              class="coverage-bar-fill"
+              :style="{ width: (coverage.total ? (coverage.accounted / coverage.total) * 100 : 0) + '%' }"
+            ></div>
+          </div>
+          <div v-if="coverage.counts" class="coverage-gaps">
+            <span
+              v-for="k in ['canonical', 'instance', 'variant', 'exempt', 'scoped']"
+              :key="k"
+            >
+              <span v-if="coverage.counts[k]" class="coverage-gap-chip">
+                {{ coverage.counts[k] }} {{ k }}
+              </span>
+            </span>
+          </div>
+          <div v-if="coverage.largest_gaps?.length" class="coverage-gaps">
+            <span class="coverage-gaps-label">Most unclassified:</span>
+            <span v-for="gap in coverage.largest_gaps" :key="gap.dir" class="coverage-gap-chip">
+              {{ gap.dir }} <span class="coverage-gap-count">{{ gap.unclassified }}</span>
+            </span>
+          </div>
+          <div
+            v-if="coverage.proposed || coverage.derive_groups?.length"
+            class="coverage-gaps"
+            title="The proposer matched these against canon; an agent confirms them in batches (confirm_shape_proposals)."
+          >
+            <span class="coverage-gaps-label">Proposed:</span>
+            <span v-if="coverage.proposed" class="coverage-gap-chip">
+              {{ coverage.proposed }} awaiting confirm
+            </span>
+            <span
+              v-for="g in coverage.derive_groups || []"
+              :key="g.group"
+              class="coverage-gap-chip"
+              :title="'Repeats with no canon — derive one first. ' + g.paths.join(', ')"
+            >
+              {{ g.label }} <span class="coverage-gap-count">×{{ g.size }}</span>
+            </span>
+          </div>
+          <div
+            v-if="coverage.divergent || coverage.recheck"
+            class="coverage-gaps"
+            title="Divergent: a new shape where one canon dominates its directory and that isn't proposed as that canon — button B where button A is canon. Recheck: a judged shape whose body changed since it was judged."
+          >
+            <span class="coverage-gaps-label">Divergence:</span>
+            <span
+              v-for="d in coverage.divergence || []"
+              :key="d.path + '::' + d.symbol"
+              class="coverage-gap-chip coverage-divergent"
+              :title="d.path + ' — canon here is snippet #' + d.canon_snippet_id"
+            >
+              {{ d.kind === 'css' ? '.' : '' }}{{ d.symbol }}
+              <span class="coverage-gap-count">→ #{{ d.canon_snippet_id }}</span>
+            </span>
+            <span v-if="(coverage.divergent || 0) > (coverage.divergence?.length || 0)" class="coverage-gap-chip">
+              +{{ (coverage.divergent || 0) - (coverage.divergence?.length || 0) }} more
+            </span>
+            <span v-if="coverage.recheck" class="coverage-gap-chip">
+              {{ coverage.recheck }} to recheck
+            </span>
+          </div>
+        </template>
+        <p v-else class="coverage-empty">
+          Not measured yet — Refresh reads the bound repo's definitions into
+          the shape ledger and reports how many are classified against canon.
+        </p>
+        <p v-if="coverageError" class="coverage-error">{{ coverageError }}</p>
+        <!-- Forge pin (#2778): owner-only, because the eligible set is the
+             owner's own keyring. Automatic = resolve by repo host. -->
+        <div v-if="isProjectOwner && forgeOptions.length" class="coverage-forge-row">
+          <label for="forge-pin" class="coverage-gaps-label">Forge</label>
+          <select
+            id="forge-pin"
+            v-model="forgePin"
+            class="input"
+            :disabled="savingForgePin"
+            @change="saveForgePin"
+          >
+            <option :value="null">Automatic (by repo host)</option>
+            <option v-for="c in forgeOptions" :key="c.id" :value="c.id">
+              {{ c.host }} ({{ c.kind }})
+            </option>
+          </select>
+        </div>
+      </div>
+
       <div class="project-body">
 
         <!-- Edit panel -->
@@ -932,9 +1173,9 @@ async function confirmDelete() {
 <style scoped>
 /* ── Layout ─────────────────────────────────────────────────── */
 .project-view {
-  max-width: var(--page-max-width);
+  max-width: var(--fs-layout-page-max);
   margin: 2rem auto;
-  padding: 0 var(--page-padding-x);
+  padding: 0 var(--fs-layout-page-pad);
   overflow-x: clip;
 }
 
@@ -947,9 +1188,9 @@ async function confirmDelete() {
 }
 .page-header-actions { display: flex; gap: 0.5rem; align-items: center; }
 .plan-title-input {
-  background: var(--color-bg);
+  background: var(--fs-surface-page);
   color: inherit;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
   padding: 0.4rem 0.6rem;
   font: inherit;
@@ -961,7 +1202,7 @@ async function confirmDelete() {
   font-size: 1.75rem;
   font-weight: 500;
   font-family: "Fraunces", Georgia, serif;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   background: transparent;
   border: none;
   border-bottom: 1.5px solid transparent;
@@ -970,8 +1211,8 @@ async function confirmDelete() {
   min-width: 0;
   transition: border-color 0.15s;
 }
-.project-title-input:focus { border-bottom-color: var(--color-primary); }
-.project-title-input::placeholder { color: var(--color-text-muted); font-weight: 400; }
+.project-title-input:focus { border-bottom-color: var(--fs-accent); }
+.project-title-input::placeholder { color: var(--fs-text-tertiary); font-weight: 400; }
 
 .status-badge {
   font-size: 0.68rem;
@@ -982,14 +1223,14 @@ async function confirmDelete() {
   border-radius: 999px;
   flex-shrink: 0;
 }
-.status-active   { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
-.status-paused    { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
-.status-completed { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); }
-.status-archived  { background: color-mix(in srgb, var(--color-text-muted) 14%, transparent); color: var(--color-text-muted); border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); }
+.status-active   { background: color-mix(in srgb, var(--fs-success) 14%, transparent); color: var(--fs-success); border: 1px solid color-mix(in srgb, var(--fs-success) 30%, transparent); }
+.status-paused    { background: color-mix(in srgb, var(--fs-warning) 14%, transparent); color: var(--fs-warning); border: 1px solid color-mix(in srgb, var(--fs-warning) 30%, transparent); }
+.status-completed { background: color-mix(in srgb, var(--fs-accent) 14%, transparent); color: var(--fs-accent); border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent); }
+.status-archived  { background: color-mix(in srgb, var(--fs-text-tertiary) 14%, transparent); color: var(--fs-text-tertiary); border: 1px solid color-mix(in srgb, var(--fs-text-tertiary) 30%, transparent); }
 
 .project-goal {
   font-size: 1rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   margin: 0 0 0.3rem;
   line-height: 1.45;
 }
@@ -998,7 +1239,7 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.3rem;
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0;
 }
 
@@ -1015,7 +1256,7 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.35rem;
   padding: 0.3rem 0.65rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--fs-radius-lg);
   font-size: 0.82rem;
   border: 1px solid;
 }
@@ -1028,14 +1269,110 @@ async function confirmDelete() {
   border-radius: 50%;
   flex-shrink: 0;
 }
-.dot-todo      { background: transparent; border: 2px solid var(--color-text-muted); }
-.dot-inprogress { background: var(--color-status-in-progress); }
-.dot-done      { background: var(--color-status-done); }
+.dot-todo      { background: transparent; border: 2px solid var(--fs-text-tertiary); }
+.dot-inprogress { background: var(--fs-status-in-progress); }
+.dot-done      { background: var(--fs-status-done); }
 
-.stat-todo      { background: color-mix(in srgb, var(--color-text-muted) 8%, transparent); color: var(--color-text-secondary); border-color: var(--color-border); }
+.stat-todo      { background: color-mix(in srgb, var(--fs-text-tertiary) 8%, transparent); color: var(--fs-text-secondary); border-color: var(--fs-border-color); }
 .stat-inprogress { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 28%, transparent); }
-.stat-done      { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 28%, transparent); }
-.stat-notes     { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); }
+.stat-done      { background: color-mix(in srgb, var(--fs-success) 10%, transparent); color: var(--fs-success); border-color: color-mix(in srgb, var(--fs-success) 28%, transparent); }
+.stat-notes     { background: color-mix(in srgb, var(--fs-accent) 8%, transparent); color: var(--fs-accent); border-color: color-mix(in srgb, var(--fs-accent) 22%, transparent); }
+
+/* ── Pattern-library coverage card ───────────────────────────── */
+.coverage-card {
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
+  padding: 0.75rem 1rem;
+  margin-bottom: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.coverage-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.coverage-title {
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fs-text-tertiary);
+}
+.coverage-estimate {
+  font-size: 0.68rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: var(--fs-radius-lg);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-tertiary);
+  cursor: help;
+}
+.coverage-when {
+  font-size: 0.72rem;
+  color: var(--fs-text-tertiary);
+}
+.coverage-refresh { margin-left: auto; }
+.coverage-numbers {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+.coverage-count { font-size: 1.15rem; font-weight: 500; }
+.coverage-label { font-size: 0.82rem; color: var(--fs-text-secondary); }
+.coverage-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--fs-text-tertiary) 14%, transparent);
+  overflow: hidden;
+}
+.coverage-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--fs-accent);
+  transition: width 0.3s ease;
+}
+.coverage-gaps {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  font-size: 0.78rem;
+}
+
+.coverage-forge-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.6rem;
+  font-size: 0.78rem;
+}
+
+.coverage-forge-row select {
+  max-width: 20rem;
+}
+.coverage-gaps-label { color: var(--fs-text-tertiary); }
+.coverage-gap-chip {
+  padding: 0.1rem 0.5rem;
+  border-radius: var(--fs-radius-lg);
+  border: 1px solid var(--fs-border-color);
+  color: var(--fs-text-secondary);
+  font-family: var(--fs-font-mono);
+  font-size: 0.74rem;
+}
+.coverage-gap-count { opacity: 0.65; }
+.coverage-divergent { border-color: var(--fs-warning); }
+.coverage-empty {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--fs-text-tertiary);
+}
+.coverage-error {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--fs-error);
+}
 
 /* ── Two-column body ─────────────────────────────────────────── */
 /* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` track has an AUTO minimum, so it
@@ -1059,9 +1396,9 @@ async function confirmDelete() {
 
 /* ── Edit panel ──────────────────────────────────────────────── */
 .edit-panel {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1rem 1.1rem;
   display: flex;
   flex-direction: column;
@@ -1075,28 +1412,28 @@ async function confirmDelete() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .edit-field { display: flex; flex-direction: column; gap: 0.3rem; }
 .edit-label {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.03em;
 }
 .edit-input, .edit-textarea, .edit-select {
   padding: 0.4rem 0.6rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
   box-sizing: border-box;
   width: 100%;
 }
-.edit-input:focus, .edit-textarea:focus, .edit-select:focus { outline: none; border-color: var(--color-primary); }
+.edit-input:focus, .edit-textarea:focus, .edit-select:focus { outline: none; border-color: var(--fs-accent); }
 .edit-textarea { resize: vertical; }
 
 /* Save panel: Moss action-primary per Hybrid rule */
@@ -1110,27 +1447,27 @@ async function confirmDelete() {
   border-bottom: 2px solid transparent;
   cursor: pointer;
   font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-family: inherit;
   margin-bottom: -1px;
   transition: color 0.15s;
 }
-.tab-btn:hover { color: var(--color-primary); }
-.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }
+.tab-btn:hover { color: var(--fs-accent); }
+.tab-btn.active { color: var(--fs-accent); border-bottom-color: var(--fs-accent); font-weight: 500; }
 .tab-count {
   font-size: 0.7rem;
   font-weight: 500;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0 0.4rem;
   line-height: 1.5;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .tab-btn.active .tab-count {
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
+  color: var(--fs-accent);
 }
 
 /* ── Tasks view ──────────────────────────────────────────────── */
@@ -1139,28 +1476,28 @@ async function confirmDelete() {
 .milestone-actions { display: flex; align-items: center; }
 .btn-add-milestone {
   background: none;
-  border: 1px dashed var(--color-border);
-  color: var(--color-text-secondary);
+  border: 1px dashed var(--fs-border-color);
+  color: var(--fs-text-secondary);
   padding: 0.28rem 0.65rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-size: 0.78rem;
   font-family: inherit;
 }
-.btn-add-milestone:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.btn-add-milestone:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
 
 .new-milestone-row { display: flex; gap: 0.4rem; align-items: center; flex: 1; }
 .milestone-title-input {
   flex: 1;
   padding: 0.3rem 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.875rem;
   font-family: inherit;
 }
-.milestone-title-input:focus { outline: none; border-color: var(--color-primary); }
+.milestone-title-input:focus { outline: none; border-color: var(--fs-accent); }
 /* Milestone confirm: Moss action-primary; Cancel: Bronze action-secondary */
 /* RESTORED. Both of these lost their base rule to a CSS sweep and left only
    modifiers behind — `.milestone-header.clickable`, `.milestone-header:hover`.
@@ -1170,9 +1507,9 @@ async function confirmDelete() {
    the "uses space poorly" the operator saw, and it was a deletion rather than a
    design change. A dangling `:hover` is the tell, and it is now checked for. */
 .milestone-group {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   overflow: hidden;
   margin-bottom: 0.75rem;
 }
@@ -1182,20 +1519,20 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.85rem;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 
 .milestone-header.clickable { cursor: pointer; }
-.milestone-header.clickable:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-secondary)); }
+.milestone-header.clickable:hover { background: color-mix(in srgb, var(--fs-accent) 4%, var(--fs-surface-raised)); }
 
 /* Plan body: the milestone's design/intent, shown above its task columns. */
 .ms-plan {
   padding: 0.6rem 0.85rem;
-  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-card));
-  border-bottom: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--fs-accent) 3%, var(--fs-surface-raised));
+  border-bottom: 1px solid var(--fs-border-color);
 }
-.ms-plan-rendered { font-size: 0.85rem; color: var(--color-text); cursor: text; }
-.ms-plan-rendered:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
+.ms-plan-rendered { font-size: 0.85rem; color: var(--fs-text-primary); cursor: text; }
+.ms-plan-rendered:hover { background: color-mix(in srgb, var(--fs-accent) 4%, transparent); }
 
 /* max-height rather than -webkit-line-clamp: the body is rendered markdown, so
    it holds headings, lists and tables. line-clamp counts lines inside ONE inline
@@ -1216,21 +1553,21 @@ async function confirmDelete() {
   background: linear-gradient(
     to bottom,
     transparent,
-    color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-card))
+    color-mix(in srgb, var(--fs-accent) 3%, var(--fs-surface-raised))
   );
   pointer-events: none;   /* the text under the fade stays clickable to edit */
 }
 .ms-plan-toggle { padding-left: 0; margin-top: 0.15rem; }
 .ms-plan-editor {
   width: 100%;
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 0.8rem;
   line-height: 1.5;
   padding: 0.5rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 6px;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   resize: vertical;
   box-sizing: border-box;
 }
@@ -1241,19 +1578,19 @@ async function confirmDelete() {
   padding: 0.3rem 0.75rem;
   border-radius: 6px;
   cursor: pointer;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
 }
-.ms-plan-actions .btn-primary { background: var(--color-action-primary); color: var(--fs-text-on-action); border-color: var(--color-action-primary); }
+.ms-plan-actions .btn-primary { background: var(--fs-action-primary); color: var(--fs-text-on-action); border-color: var(--fs-action-primary); }
 .ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
-.ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); }
+.ms-plan-actions .btn-secondary { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
 
-.ms-chevron { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; }
-.ms-name { font-weight: 500; color: var(--color-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-chevron { display: flex; align-items: center; color: var(--fs-text-tertiary); flex-shrink: 0; }
+.ms-name { font-weight: 500; color: var(--fs-text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ms-count {
   font-size: 0.7rem;
-  color: var(--color-text-muted);
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  color: var(--fs-text-tertiary);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0.05rem 0.4rem;
   flex-shrink: 0;
@@ -1262,18 +1599,18 @@ async function confirmDelete() {
 .ms-progress-track {
   width: 72px;
   height: 6px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
   border-radius: 999px;
   overflow: hidden;
   flex-shrink: 0;
 }
 .ms-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-success)));
+  background: linear-gradient(90deg, var(--fs-accent), color-mix(in srgb, var(--fs-accent) 70%, var(--fs-success)));
   border-radius: 999px;
   transition: width 0.4s ease;
 }
-.ms-pct { font-size: 0.72rem; color: var(--color-text-secondary); flex-shrink: 0; min-width: 2.4rem; text-align: right; font-weight: 500; }
+.ms-pct { font-size: 0.72rem; color: var(--fs-text-secondary); flex-shrink: 0; min-width: 2.4rem; text-align: right; font-weight: 500; }
 
 .ms-actions { display: flex; gap: 0.15rem; margin-left: 0.2rem; opacity: 0; transition: opacity 0.15s; }
 .milestone-header:hover .ms-actions { opacity: 1; }
@@ -1284,22 +1621,22 @@ async function confirmDelete() {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   width: 24px;
   height: 24px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
 }
-.ms-action-btn:hover { background: var(--color-bg-card); color: var(--color-text); }
-.ms-action-delete:hover { color: var(--color-danger); }
+.ms-action-btn:hover { background: var(--fs-surface-raised); color: var(--fs-text-primary); }
+.ms-action-delete:hover { color: var(--fs-error); }
 
 .ms-rename-input {
   flex: 1;
   min-width: 0;
   padding: 0.1rem 0.35rem;
-  border: 1px solid var(--color-primary);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-accent);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   font-family: inherit;
   font-weight: 500;
@@ -1316,20 +1653,20 @@ async function confirmDelete() {
   gap: 0.75rem;
   align-items: start;
   padding: 0.75rem;
-  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-bg-secondary));
+  background: color-mix(in srgb, var(--fs-surface-page) 60%, var(--fs-surface-raised));
 }
 .kanban-col {
-  background: var(--color-bg-secondary);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border-radius: var(--fs-radius-lg);
   padding: 0.65rem;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   border-top: 3px solid;
 }
-.col-todo      { border-top-color: var(--color-border); }
-.col-inprogress { border-top-color: var(--color-status-in-progress); }
-.col-done      { border-top-color: var(--color-status-done); }
+.col-todo      { border-top-color: var(--fs-border-color); }
+.col-inprogress { border-top-color: var(--fs-status-in-progress); }
+.col-done      { border-top-color: var(--fs-status-done); }
 
 .kanban-col-header {
   display: flex;
@@ -1339,18 +1676,18 @@ async function confirmDelete() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   margin-bottom: 0.3rem;
 }
 .col-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
 .col-label { flex: 1; }
 .col-count {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0.05rem 0.4rem;
   font-size: 0.68rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-weight: 500;
 }
 .col-add-btn {
@@ -1359,40 +1696,40 @@ async function confirmDelete() {
   justify-content: center;
   width: 18px;
   height: 18px;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-decoration: none;
   font-size: 1rem;
   line-height: 1;
   border-radius: 3px;
   margin-left: auto;
 }
-.col-add-btn:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
+.col-add-btn:hover { color: var(--fs-accent); background: color-mix(in srgb, var(--fs-accent) 10%, transparent); }
 
 .kanban-cards { display: flex; flex-direction: column; gap: 0.3rem; }
 
 .task-card {
   display: block;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-left: 3px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   padding: 0.45rem 0.55rem;
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
   transition: border-color 0.12s, box-shadow 0.18s, transform 0.18s ease;
   box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .task-card:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
-  border-left-color: var(--color-primary);
+  border-color: color-mix(in srgb, var(--fs-accent) 50%, var(--fs-border-color));
+  border-left-color: var(--fs-accent);
   box-shadow: 0 3px 10px rgba(0,0,0,0.08);
   transform: translateY(-2px);
 }
 /* Priority left-border colors */
-.task-card.pri-high   { border-left-color: var(--color-danger); }
+.task-card.pri-high   { border-left-color: var(--fs-error); }
 .task-card.pri-medium { border-left-color: #f59e0b; }
-.task-card.pri-low    { border-left-color: var(--color-success); }
+.task-card.pri-low    { border-left-color: var(--fs-success); }
 
 .task-card-done { opacity: 0.65; }
 .task-card-done .task-title { text-decoration: line-through; }
@@ -1404,10 +1741,10 @@ async function confirmDelete() {
   flex-shrink: 0;
   display: inline-flex; align-items: center; justify-content: center;
   width: 1.4rem; height: 1.4rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
   background: transparent;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.75rem;
   cursor: pointer;
   opacity: 0;
@@ -1415,8 +1752,8 @@ async function confirmDelete() {
   line-height: 1;
 }
 .task-card:hover .task-advance-btn { opacity: 1; }
-.task-advance-btn:hover { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--fs-text-on-action); }
-.task-advance-btn--done:hover { background: var(--color-success); border-color: var(--color-success); color: var(--fs-text-on-action); }
+.task-advance-btn:hover { background: var(--fs-action-primary); border-color: var(--fs-action-primary); color: var(--fs-text-on-action); }
+.task-advance-btn--done:hover { background: var(--fs-success); border-color: var(--fs-success); color: var(--fs-text-on-action); }
 .task-advance-btn:disabled { opacity: 0.4; cursor: default; }
 
 .priority-dot {
@@ -1425,18 +1762,18 @@ async function confirmDelete() {
   border-radius: 50%;
   flex-shrink: 0;
 }
-.dot-pri-high   { background: var(--color-danger); }
+.dot-pri-high   { background: var(--fs-error); }
 .dot-pri-medium { background: #f59e0b; }
-.dot-pri-low    { background: var(--color-success); }
+.dot-pri-low    { background: var(--fs-success); }
 
-.due-date { font-size: 0.7rem; color: var(--color-text-muted); }
+.due-date { font-size: 0.7rem; color: var(--fs-text-tertiary); }
 .col-empty {
   text-align: center;
   padding: 1.25rem 0.5rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.78rem;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px dashed var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   opacity: 0.7;
 }
 
@@ -1447,62 +1784,37 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 0.9rem;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   transition: border-color 0.12s, box-shadow 0.15s, transform 0.15s;
   box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .note-row:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
+  border-color: color-mix(in srgb, var(--fs-accent) 50%, var(--fs-border-color));
   box-shadow: 0 3px 10px rgba(0,0,0,0.07);
   transform: translateY(-1px);
 }
-.note-icon { color: var(--color-text-muted); flex-shrink: 0; }
+.note-icon { color: var(--fs-text-tertiary); flex-shrink: 0; }
 .note-title { font-weight: 500; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.note-date { font-size: 0.75rem; color: var(--color-text-muted); flex-shrink: 0; }
+.note-date { font-size: 0.75rem; color: var(--fs-text-tertiary); flex-shrink: 0; }
 
-.empty-msg { color: var(--color-text-muted); font-size: 0.875rem; text-align: center; padding: 1rem; }
+.empty-msg { color: var(--fs-text-tertiary); font-size: 0.875rem; text-align: center; padding: 1rem; }
 /* Deliberately NOT styled like .empty-msg: "no tasks" and "the tasks did not
    load" look identical to a user, and conflating them is what let a silent
    failure read as an empty project. */
-.tasks-error { color: var(--color-danger); font-size: 0.875rem; padding: 1rem; text-align: center; }
+.tasks-error { color: var(--fs-error); font-size: 0.875rem; padding: 1rem; text-align: center; }
 
 /* ── Modal ───────────────────────────────────────────────────── */
 .modal-overlay {
   position: fixed; inset: 0;
-  background: var(--color-overlay);
+  background: var(--fs-overlay);
   display: flex; align-items: center; justify-content: center;
   z-index: 200;
 }
-.modal-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 1.5rem;
-  width: 100%;
-  max-width: 400px;
-  box-shadow: 0 8px 32px var(--color-shadow);
-}
-.modal-title { margin: 0 0 0.75rem; font-size: 1.05rem; }
-.modal-message { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
-.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
-.modal-btn {
-  padding: 0.4rem 0.9rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-family: inherit;
-}
-.modal-btn:hover { background: var(--color-bg); }
-.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: var(--fs-text-on-action); }
-.modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); }
 
 /* ── Skeleton ────────────────────────────────────────────────── */
 @keyframes skel-shine { to { background-position: 200% center; } }
@@ -1512,21 +1824,21 @@ async function confirmDelete() {
   gap: 0.65rem;
 }
 .skel-title, .skel-goal, .skel-stats, .skel-body, .skel-row {
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   background: linear-gradient(
     90deg,
-    var(--color-bg-secondary) 25%,
-    color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-secondary)) 50%,
-    var(--color-bg-secondary) 75%
+    var(--fs-surface-raised) 25%,
+    color-mix(in srgb, var(--fs-text-tertiary) 16%, var(--fs-surface-raised)) 50%,
+    var(--fs-surface-raised) 75%
   );
   background-size: 200% 100%;
   animation: skel-shine 1.5s ease infinite;
 }
-.skel-title  { height: 2.2rem; width: 55%; border-radius: var(--radius-md); }
+.skel-title  { height: 2.2rem; width: 55%; border-radius: var(--fs-radius-lg); }
 .skel-goal   { height: 1rem; width: 75%; }
-.skel-stats  { height: 2rem; width: 50%; border-radius: var(--radius-md); }
-.skel-body   { height: 200px; border-radius: var(--radius-md); }
-.skel-row    { height: 2.5rem; border-radius: var(--radius-sm); }
+.skel-stats  { height: 2rem; width: 50%; border-radius: var(--fs-radius-lg); }
+.skel-body   { height: 200px; border-radius: var(--fs-radius-lg); }
+.skel-row    { height: 2.5rem; border-radius: var(--fs-radius-sm); }
 .skel-row--short { width: 65%; }
 
 /* ── Responsive ──────────────────────────────────────────────── */

frontend/src/views/RegisterInviteView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { apiGet, apiPost } from "@/api/client";
+import { apiGet, apiPost, apiErrorMessage } from "@/api/client";
 import { useAuthStore } from "@/stores/auth";
 import AppLogo from "@/components/AppLogo.vue";
 
@@ -68,12 +68,7 @@ async function handleSubmit() {
     await authStore.checkAuth();
     router.push("/");
   } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      error.value = body?.error || "Registration failed";
-    } else {
-      error.value = "Registration failed";
-    }
+    error.value = apiErrorMessage(e, "Registration failed");
   } finally {
     submitting.value = false;
   }
@@ -85,9 +80,9 @@ async function handleSubmit() {
     <div class="auth-card">
       <div class="auth-brand"><AppLogo :size="32" /><h1>Accept Invitation</h1></div>
 
-      <div v-if="validating" class="loading-msg">Validating invitation...</div>
+      <div v-if="validating" class="auth-loading">Validating invitation...</div>
 
-      <div v-else-if="!token || !valid" class="error-block">
+      <div v-else-if="!token || !valid" class="auth-note">
         <p>This invitation link is invalid or has expired.</p>
         <p class="auth-footer">
           <router-link to="/login">Back to Sign In</router-link>
@@ -157,103 +152,4 @@ async function handleSubmit() {
   </main>
 </template>
 
-<style scoped>
-.auth-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 1rem;
-}
-.auth-card {
-  width: 100%;
-  max-width: 400px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 2rem;
-}
-.auth-brand {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-.auth-card h1 {
-  margin: 0;
-  text-align: center;
-}
-.loading-msg {
-  text-align: center;
-  color: var(--color-text-muted);
-  font-size: 0.95rem;
-  padding: 1rem 0;
-}
-.error-block {
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: 0.95rem;
-  padding: 0.5rem 0;
-}
-.error-block p {
-  margin: 0.5rem 0;
-}
-.field {
-  margin-bottom: 1rem;
-}
-.field label {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 600;
-  margin-bottom: 0.35rem;
-}
-.input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: 0.95rem;
-  background: var(--color-bg);
-  color: var(--color-text);
-  box-sizing: border-box;
-}
-.input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-.input-error {
-  border-color: var(--color-danger);
-}
-.input-error:focus {
-  border-color: var(--color-danger);
-}
-.field-hint {
-  margin: 0.35rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-}
-.error-hint {
-  margin: 0.35rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-danger);
-}
-.error-msg {
-  color: var(--color-danger);
-  font-size: 0.9rem;
-  margin: 0 0 0.75rem;
-}
-.auth-footer {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin: 1rem 0 0;
-}
-.auth-footer a {
-  color: var(--color-primary);
-}
-</style>
+<style src="@/assets/auth-shared.css" />

frontend/src/views/RegisterView.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import AppLogo from "@/components/AppLogo.vue";
+import { apiErrorMessage } from "@/api/client";
 
 const router = useRouter();
 const authStore = useAuthStore();
@@ -39,12 +40,7 @@ async function handleSubmit() {
     await authStore.register(username.value, password.value, email.value || undefined);
     router.push("/");
   } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      error.value = body?.error || "Registration failed";
-    } else {
-      error.value = "Registration failed";
-    }
+    error.value = apiErrorMessage(e, "Registration failed");
   } finally {
     submitting.value = false;
   }
@@ -56,9 +52,9 @@ async function handleSubmit() {
     <div class="auth-card">
       <div class="auth-brand"><AppLogo :size="32" /><h1>Create Account</h1></div>
 
-      <div v-if="checking" class="loading-msg">Checking registration status...</div>
+      <div v-if="checking" class="auth-loading">Checking registration status...</div>
 
-      <div v-else-if="!authStore.registrationOpen" class="closed-msg">
+      <div v-else-if="!authStore.registrationOpen" class="auth-note">
         <p>Registration is currently closed.</p>
         <p>Contact an administrator to get an account.</p>
         <p class="auth-footer">
@@ -130,99 +126,4 @@ async function handleSubmit() {
   </main>
 </template>
 
-<style scoped>
-.auth-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 1rem;
-}
-.auth-card {
-  width: 100%;
-  max-width: 400px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 2rem;
-}
-.auth-brand {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-.auth-card h1 {
-  margin: 0;
-  text-align: center;
-}
-.loading-msg {
-  text-align: center;
-  color: var(--color-text-muted);
-  font-size: 0.9rem;
-  padding: 1rem 0;
-}
-.closed-msg {
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: 0.95rem;
-  padding: 0.5rem 0;
-}
-.closed-msg p {
-  margin: 0.5rem 0;
-}
-.field {
-  margin-bottom: 1rem;
-}
-.field label {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 600;
-  margin-bottom: 0.35rem;
-}
-.input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: 0.95rem;
-  background: var(--color-bg);
-  color: var(--color-text);
-  box-sizing: border-box;
-}
-.input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-.input-error {
-  border-color: var(--color-danger);
-}
-.input-error:focus {
-  border-color: var(--color-danger);
-}
-.field-hint {
-  margin: 0.35rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-}
-.error-hint {
-  margin: 0.35rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-danger);
-}
-.error-msg {
-  color: var(--color-danger);
-  font-size: 0.9rem;
-  margin: 0 0 0.75rem;
-}
-.auth-footer {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin: 1rem 0 0;
-}
-.auth-footer a {
-  color: var(--color-primary);
-}
-</style>
+<style src="@/assets/auth-shared.css" />

frontend/src/views/ResetPasswordView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useRoute } from "vue-router";
-import { apiPost } from "@/api/client";
+import { apiPost, apiErrorMessage } from "@/api/client";
 import AppLogo from "@/components/AppLogo.vue";
 
 const route = useRoute();
@@ -35,12 +35,7 @@ async function handleSubmit() {
     });
     success.value = true;
   } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      error.value = body?.error || "Failed to reset password";
-    } else {
-      error.value = "Failed to reset password";
-    }
+    error.value = apiErrorMessage(e, "Failed to reset password");
   } finally {
     submitting.value = false;
   }
@@ -52,7 +47,7 @@ async function handleSubmit() {
     <div class="auth-card">
       <div class="auth-brand"><AppLogo :size="32" /><h1>Set New Password</h1></div>
 
-      <div v-if="!token" class="error-block">
+      <div v-if="!token" class="auth-note">
         <p>Invalid reset link. Please request a new password reset.</p>
         <p class="auth-footer">
           <router-link to="/forgot-password">Request new link</router-link>
@@ -94,7 +89,7 @@ async function handleSubmit() {
         </form>
       </template>
 
-      <div v-else class="success-msg">
+      <div v-else class="auth-note">
         <p>Your password has been reset successfully.</p>
         <p>You can now sign in with your new password.</p>
       </div>
@@ -106,102 +101,4 @@ async function handleSubmit() {
   </main>
 </template>
 
-<style scoped>
-.auth-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 1rem;
-}
-.auth-card {
-  width: 100%;
-  max-width: 400px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 2rem;
-}
-.auth-brand {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-.auth-card h1 {
-  margin: 0;
-  text-align: center;
-}
-.error-block {
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: 0.95rem;
-  padding: 0.5rem 0;
-}
-.error-block p {
-  margin: 0.5rem 0;
-}
-.success-msg {
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: 0.95rem;
-  padding: 0.5rem 0;
-}
-.success-msg p {
-  margin: 0.5rem 0;
-}
-.field {
-  margin-bottom: 1rem;
-}
-.field label {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 600;
-  margin-bottom: 0.35rem;
-}
-.input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: 0.95rem;
-  background: var(--color-bg);
-  color: var(--color-text);
-  box-sizing: border-box;
-}
-.input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-.input-error {
-  border-color: var(--color-danger);
-}
-.input-error:focus {
-  border-color: var(--color-danger);
-}
-.field-hint {
-  margin: 0.35rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-}
-.error-hint {
-  margin: 0.35rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-danger);
-}
-.error-msg {
-  color: var(--color-danger);
-  font-size: 0.9rem;
-  margin: 0 0 0.75rem;
-}
-.auth-footer {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin: 1rem 0 0;
-}
-.auth-footer a {
-  color: var(--color-primary);
-}
-</style>
+<style src="@/assets/auth-shared.css" />

frontend/src/views/RulesView.vue

@@ -107,10 +107,10 @@ watch(() => route.query, syncFromRoute);
   grid-template-columns: 280px 300px 1fr;
   height: 100vh;
   gap: 1px;
-  background: var(--color-border);
+  background: var(--fs-border-color);
 }
 .pane.empty {
-  background: var(--color-surface);
+  background: var(--fs-surface-hover);
   padding: 1rem;
   opacity: 0.6;
   font-style: italic;

frontend/src/views/SharedWithMeView.vue

@@ -106,11 +106,11 @@ onMounted(async () => {
   font-size: 1.8rem;
   font-weight: 700;
   margin: 0;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 
 .loading-state {
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   padding: 2rem;
   text-align: center;
 }
@@ -124,7 +124,7 @@ onMounted(async () => {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.07em;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.75rem;
 }
 
@@ -136,9 +136,9 @@ onMounted(async () => {
 
 .shared-card {
   display: flex;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  background: var(--fs-surface-hover);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-xl);
   overflow: hidden;
   text-decoration: none;
   transition: box-shadow 0.15s, transform 0.15s;
@@ -151,7 +151,7 @@ onMounted(async () => {
 .card-color-bar {
   width: 4px;
   flex-shrink: 0;
-  background: var(--color-border);
+  background: var(--fs-border-color);
 }
 
 .card-body {
@@ -163,7 +163,7 @@ onMounted(async () => {
 .card-title {
   font-weight: 600;
   font-size: 0.95rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   margin-bottom: 0.3rem;
   white-space: nowrap;
   overflow: hidden;
@@ -179,12 +179,12 @@ onMounted(async () => {
 
 .card-owner {
   font-size: 0.78rem;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .card-desc {
   font-size: 0.82rem;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   margin: 0;
   overflow: hidden;
   display: -webkit-box;
@@ -203,25 +203,25 @@ onMounted(async () => {
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 0.9rem;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-hover);
+  border: 1px solid var(--fs-border-color);
   border-radius: 8px;
   text-decoration: none;
   transition: background 0.1s;
 }
 .shared-row:hover {
-  background: var(--color-hover);
+  background: var(--fs-surface-hover);
 }
 
 .row-icon {
   font-size: 0.9rem;
   flex-shrink: 0;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
 }
 .row-title {
   flex: 1;
   font-size: 0.9rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -229,7 +229,7 @@ onMounted(async () => {
 }
 .row-owner {
   font-size: 0.78rem;
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   white-space: nowrap;
 }
 
@@ -242,12 +242,12 @@ onMounted(async () => {
   border-radius: 4px;
   white-space: nowrap;
 }
-.perm-viewer  { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
-.perm-editor  { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
-.perm-admin   { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
+.perm-viewer  { background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent); color: var(--fs-text-tertiary); }
+.perm-editor  { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: var(--fs-accent); }
+.perm-admin   { background: color-mix(in srgb, var(--fs-warning) 15%, transparent); color: var(--fs-warning); }
 
 .empty-msg {
-  color: var(--color-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.88rem;
   margin: 0;
   padding: 1rem 0;

frontend/src/views/SnippetDetailView.vue

@@ -205,7 +205,7 @@ async function confirmDelete() {
 .snippet-detail {
   max-width: 820px;
   margin: 2rem auto;
-  padding: 0 var(--page-padding-x);
+  padding: 0 var(--fs-layout-page-pad);
   overflow-x: clip;
 }
 
@@ -213,20 +213,20 @@ async function confirmDelete() {
   display: inline-block;
   margin-bottom: 1rem;
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-decoration: none;
 }
 .back-link:hover {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 
 .state-msg {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.9rem;
   margin-top: 1rem;
 }
 .error-msg {
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-size: 0.9rem;
   margin-top: 1rem;
 }
@@ -239,7 +239,7 @@ async function confirmDelete() {
 }
 .snippet-name {
   margin: 0;
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 1.4rem;
   word-break: break-word;
 }
@@ -253,7 +253,7 @@ async function confirmDelete() {
 .when-to-use {
   margin: 0.75rem 0 1.25rem;
   font-size: 1rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   line-height: 1.55;
 }
 
@@ -262,12 +262,12 @@ async function confirmDelete() {
 .shared-notice {
   margin: 0.75rem 0 0;
   padding: 0.6rem 0.85rem;
-  border-left: 3px solid var(--color-text-muted);
+  border-left: 3px solid var(--fs-text-tertiary);
   border-radius: 6px;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
   font-size: 0.85rem;
   line-height: 1.5;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 .meta-grid {
@@ -280,23 +280,23 @@ async function confirmDelete() {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   padding-top: 0.15rem;
 }
 .meta-grid dd {
   margin: 0;
   font-size: 0.9rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   min-width: 0;
 }
 .meta-grid code,
 .tag-row + * code {
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 0.82rem;
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
+  color: var(--fs-accent);
   padding: 0.08rem 0.35rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   word-break: break-all;
 }
 .location-list {
@@ -317,7 +317,7 @@ async function confirmDelete() {
   align-items: baseline;
 }
 .merged-hint {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.8rem;
 }
 .merged-entry {
@@ -328,15 +328,15 @@ async function confirmDelete() {
 .unmerge-btn {
   font-size: 0.72rem;
   padding: 0.05rem 0.35rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
   background: transparent;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   cursor: pointer;
 }
 .unmerge-btn:hover:not(:disabled) {
-  color: var(--color-text);
-  border-color: var(--color-text-muted);
+  color: var(--fs-text-primary);
+  border-color: var(--fs-text-tertiary);
 }
 .unmerge-btn:disabled {
   opacity: 0.6;
@@ -344,30 +344,30 @@ async function confirmDelete() {
 }
 .unmerge-na {
   font-size: 0.72rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   /* Cursor cues that the explanation is in the tooltip. */
   cursor: help;
 }
 
 .code-block {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   overflow: hidden;
-  background: var(--color-bg);
+  background: var(--fs-surface-page);
 }
 .code-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.4rem 0.5rem 0.4rem 0.85rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
 }
 .code-lang {
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .btn-copy {
   padding: 0.2rem 0.65rem;
@@ -379,10 +379,10 @@ async function confirmDelete() {
   overflow-x: auto;
 }
 .code-block code {
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 0.85rem;
   line-height: 1.6;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   white-space: pre;
 }
 
@@ -396,9 +396,9 @@ async function confirmDelete() {
   font-size: 0.72rem;
   padding: 0.15rem 0.5rem;
   border-radius: 999px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-secondary);
+  border: 1px solid var(--fs-border-color);
 }
 
 @media (max-width: 600px) {

frontend/src/views/SnippetEditorView.vue

@@ -365,7 +365,7 @@ function cancel() {
 .snippet-editor {
   max-width: 760px;
   margin: 2rem auto;
-  padding: 0 var(--page-padding-x);
+  padding: 0 var(--fs-layout-page-pad);
   overflow-x: clip;
 }
 .snippet-editor h1 {
@@ -376,19 +376,19 @@ function cancel() {
   display: inline-block;
   margin-bottom: 1rem;
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-decoration: none;
 }
 .back-link:hover {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 
 .state-msg {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.9rem;
 }
 .error-msg {
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-size: 0.9rem;
 }
 
@@ -415,27 +415,27 @@ function cancel() {
 .location-set legend {
   font-size: 0.8rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .required {
-  color: var(--color-danger);
+  color: var(--fs-error);
 }
 .hint {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0.1rem 0 0;
 }
 .hint-inline {
   font-weight: 400;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .input {
   padding: 0.5rem 0.7rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   font-family: inherit;
   box-sizing: border-box;
@@ -443,11 +443,11 @@ function cancel() {
 }
 .input:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--focus-ring);
+  border-color: var(--fs-accent);
+  box-shadow: var(--fs-focus-ring);
 }
 .mono {
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
 }
 .code-area {
   resize: vertical;
@@ -459,8 +459,8 @@ function cancel() {
 }
 
 .location-set {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 0.85rem 1rem 1rem;
   margin: 0;
 }
@@ -477,32 +477,32 @@ function cancel() {
 .loc-remove {
   width: 2rem;
   height: 2rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   background: transparent;
-  color: var(--color-text-muted);
-  border-radius: var(--radius-sm);
+  color: var(--fs-text-tertiary);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-size: 1.1rem;
   line-height: 1;
 }
 .loc-remove:hover {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
+  border-color: var(--fs-error);
+  color: var(--fs-error);
 }
 .loc-add {
   margin-top: 0.15rem;
   padding: 0.35rem 0.7rem;
-  border: 1px dashed var(--color-border);
+  border: 1px dashed var(--fs-border-color);
   background: transparent;
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
+  color: var(--fs-text-secondary);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
   font-size: 0.82rem;
   font-family: inherit;
 }
 .loc-add:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  border-color: var(--fs-accent);
+  color: var(--fs-accent);
 }
 
 @media (max-width: 600px) {
@@ -514,7 +514,7 @@ function cancel() {
 .field-label {
   font-size: 0.8rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .systems {
   display: flex;
@@ -528,11 +528,11 @@ function cancel() {
   align-items: center;
   gap: 0.45rem;
   font-size: 0.85rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   cursor: pointer;
 }
 .system-opt input {
-  accent-color: var(--color-primary);
+  accent-color: var(--fs-accent);
   cursor: pointer;
 }
 
@@ -541,25 +541,25 @@ function cancel() {
   flex-direction: column;
   gap: 0.4rem;
   padding: 0.85rem 1rem;
-  border: 1px solid var(--color-border);
-  border-left: 3px solid var(--color-warning);
+  border: 1px solid var(--fs-border-color);
+  border-left: 3px solid var(--fs-warning);
   border-radius: 8px;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .duplicate-title {
   margin: 0;
   font-size: 0.85rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .duplicate-body {
   margin: 0;
   font-size: 0.8rem;
   line-height: 1.5;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .duplicate-body a {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 .duplicate-actions {
   display: flex;

frontend/src/views/SnippetListView.vue

@@ -519,9 +519,9 @@ function usageTitle(s: SnippetListItem): string {
 
 <style scoped>
 .snippets-list {
-  max-width: var(--page-max-width);
+  max-width: var(--fs-layout-page-max);
   margin: 2rem auto;
-  padding: 0 var(--page-padding-x);
+  padding: 0 var(--fs-layout-page-pad);
   overflow-x: clip;
 }
 
@@ -536,7 +536,7 @@ function usageTitle(s: SnippetListItem): string {
 }
 .page-sub {
   margin: 0 0 1.25rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: 0.9rem;
   line-height: 1.5;
   max-width: 60ch;
@@ -553,8 +553,8 @@ function usageTitle(s: SnippetListItem): string {
 }
 /* Filter is engaged — the accent marks "you are here", per the design system. */
 .filter-on {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  border-color: var(--fs-accent);
+  color: var(--fs-accent);
 }
 
 .location-row {
@@ -569,12 +569,12 @@ function usageTitle(s: SnippetListItem): string {
   min-width: 0;
   max-width: 12rem;
   padding: 0.4rem 0.65rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.85rem;
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   box-sizing: border-box;
 }
 .loc-input-wide {
@@ -583,46 +583,46 @@ function usageTitle(s: SnippetListItem): string {
 }
 .loc-input::placeholder {
   font-family: inherit;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .loc-input:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--focus-ring);
+  border-color: var(--fs-accent);
+  box-shadow: var(--fs-focus-ring);
 }
 .loc-clear {
   padding: 0.4rem 0.65rem;
   border: none;
   background: transparent;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   font-size: 0.85rem;
   font-family: inherit;
   cursor: pointer;
   text-decoration: underline;
 }
 .loc-clear:hover {
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .search-input {
   width: 100%;
   max-width: 420px;
   padding: 0.5rem 0.8rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.9rem;
   font-family: inherit;
   box-sizing: border-box;
 }
 .search-input:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--focus-ring);
+  border-color: var(--fs-accent);
+  box-shadow: var(--fs-focus-ring);
 }
 
 .error-msg {
-  color: var(--color-danger);
+  color: var(--fs-error);
   font-size: 0.9rem;
   margin-top: 1rem;
 }
@@ -630,10 +630,10 @@ function usageTitle(s: SnippetListItem): string {
 .empty-state-rich {
   text-align: center;
   padding: 3rem 1rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .empty-icon {
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 2rem;
   margin-bottom: 0.75rem;
   opacity: 0.35;
@@ -641,7 +641,7 @@ function usageTitle(s: SnippetListItem): string {
 .empty-title {
   font-size: 1rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   margin: 0 0 0.35rem;
 }
 .empty-sub {
@@ -654,16 +654,16 @@ function usageTitle(s: SnippetListItem): string {
 .empty-action {
   display: inline-block;
   padding: 0.4rem 1rem;
-  border: 1px solid var(--color-action-primary);
-  border-radius: var(--radius-sm);
-  color: var(--color-action-primary);
+  border: 1px solid var(--fs-action-primary);
+  border-radius: var(--fs-radius-sm);
+  color: var(--fs-action-primary);
   background: none;
   cursor: pointer;
   font-size: 0.85rem;
   transition: background 0.15s, color 0.15s;
 }
 .empty-action:hover {
-  background: var(--color-action-primary);
+  background: var(--fs-action-primary);
   color: var(--fs-text-on-action);
 }
 
@@ -675,8 +675,8 @@ function usageTitle(s: SnippetListItem): string {
 }
 .skeleton-card {
   height: 96px;
-  border-radius: var(--radius-md);
-  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
+  border-radius: var(--fs-radius-lg);
+  background: linear-gradient(90deg, var(--fs-surface-raised) 25%, var(--fs-border-color) 50%, var(--fs-surface-raised) 75%);
   background-size: 200% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
 }
@@ -686,9 +686,9 @@ function usageTitle(s: SnippetListItem): string {
 }
 
 .snippet-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 0.9rem 1rem;
   cursor: pointer;
   transition: border-color 0.15s, box-shadow 0.15s, transform 0.18s ease;
@@ -697,14 +697,14 @@ function usageTitle(s: SnippetListItem): string {
   gap: 0.4rem;
 }
 .snippet-card:hover {
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
   box-shadow: 0 2px 8px var(--color-shadow);
   transform: translateY(-2px);
 }
 .snippet-card:focus-visible {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--focus-ring);
+  border-color: var(--fs-accent);
+  box-shadow: var(--fs-focus-ring);
 }
 
 .card-header {
@@ -716,11 +716,11 @@ function usageTitle(s: SnippetListItem): string {
 .snippet-name {
   font-size: 0.95rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   min-width: 0;
   flex: 1;
   word-break: break-word;
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
 }
 
 /* Language tag — accent pill per the design system's tag treatment. */
@@ -731,13 +731,13 @@ function usageTitle(s: SnippetListItem): string {
   border-radius: 999px;
   flex-shrink: 0;
   white-space: nowrap;
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  color: var(--color-primary);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  color: var(--fs-accent);
 }
 
 .snippet-when {
   font-size: 0.83rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   margin: 0;
   line-height: 1.45;
 }
@@ -751,7 +751,7 @@ function usageTitle(s: SnippetListItem): string {
 }
 .meta-date {
   font-size: 0.73rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 /* Marks a record someone else owns. Present only on shared rows, so an
    unmarked card is unambiguously the operator's own. */
@@ -760,24 +760,24 @@ function usageTitle(s: SnippetListItem): string {
   padding: 0.1rem 0.4rem;
   border-radius: 4px;
   white-space: nowrap;
-  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
-  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
+  color: var(--fs-text-tertiary);
 }
 
 /* Near-duplicate report */
 .dup-panel {
   margin-bottom: 1.25rem;
   padding: 0.85rem 1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 8px;
-  background: var(--color-surface-alt);
+  background: var(--fs-surface-hover);
 }
 
 .dup-empty,
 .dup-head {
   margin: 0 0 0.5rem;
   font-size: 0.85rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 .dup-empty {
@@ -790,7 +790,7 @@ function usageTitle(s: SnippetListItem): string {
   gap: 0.75rem;
   flex-wrap: wrap;
   padding: 0.5rem 0;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
 }
 
 .dup-members {
@@ -805,14 +805,14 @@ function usageTitle(s: SnippetListItem): string {
   font-size: 0.8rem;
   padding: 0.1rem 0.45rem;
   border-radius: 4px;
-  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
   /* Long snippet names must not push the row into a horizontal scroll. */
   overflow-wrap: anywhere;
 }
 
 .dup-score {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
@@ -828,8 +828,8 @@ function usageTitle(s: SnippetListItem): string {
   padding: 0.1rem 0.4rem;
   border-radius: 4px;
   white-space: nowrap;
-  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
-  color: var(--color-danger);
+  background: color-mix(in srgb, var(--fs-error) 15%, transparent);
+  color: var(--fs-error);
 }
 
 .usage-tag {
@@ -838,15 +838,15 @@ function usageTitle(s: SnippetListItem): string {
   border-radius: 4px;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
-  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
-  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
+  color: var(--fs-text-tertiary);
 }
 
 /* Dead weight is a nudge, not an error — it warns in the warning colour rather
    than the danger one, because the record isn't broken, just unearned. */
 .usage-tag.usage-dead {
-  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
-  color: var(--color-warning);
+  background: color-mix(in srgb, var(--fs-warning) 18%, transparent);
+  color: var(--fs-warning);
 }
 
 /* Header + select-mode */
@@ -858,7 +858,7 @@ function usageTitle(s: SnippetListItem): string {
 
 /* Selected card = 2px accent border per the design system (featured/active). */
 .snippet-card.selected {
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
   border-width: 2px;
   padding: calc(0.9rem - 1px) calc(1rem - 1px);
 }
@@ -867,14 +867,14 @@ function usageTitle(s: SnippetListItem): string {
   height: 16px;
   flex-shrink: 0;
   margin-top: 0.15rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--fs-border-color);
   border-radius: 4px;
   background: transparent;
   transition: background 0.12s, border-color 0.12s;
 }
 .select-box.on {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
+  background: var(--fs-accent);
+  border-color: var(--fs-accent);
 }
 
 .select-bar {
@@ -885,41 +885,26 @@ function usageTitle(s: SnippetListItem): string {
   align-items: center;
   gap: 0.75rem;
   padding: 0.6rem 0.9rem;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   box-shadow: 0 4px 16px var(--color-shadow);
 }
 .select-count {
   font-weight: 500;
   font-size: 0.9rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
 }
 .select-hint {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex: 1;
   min-width: 0;
 }
 
 /* Merge modal */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--color-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 200;
-}
 .modal-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 1.5rem;
-  width: 100%;
   max-width: 460px;
-  box-shadow: 0 8px 32px var(--color-shadow);
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -931,7 +916,7 @@ function usageTitle(s: SnippetListItem): string {
 .modal-desc {
   margin: 0;
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   line-height: 1.5;
 }
 .merge-choices {
@@ -944,18 +929,18 @@ function usageTitle(s: SnippetListItem): string {
   align-items: center;
   gap: 0.6rem;
   padding: 0.5rem 0.7rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   cursor: pointer;
 }
 .merge-choice.chosen {
-  border-color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  border-color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 8%, transparent);
 }
 .merge-choice-name {
   flex: 1;
   min-width: 0;
-  font-family: var(--font-mono);
+  font-family: var(--fs-font-mono);
   font-size: 0.85rem;
   word-break: break-word;
 }
@@ -963,39 +948,9 @@ function usageTitle(s: SnippetListItem): string {
   font-size: 0.68rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
 }
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-.modal-btn {
-  padding: 0.4rem 0.9rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-family: inherit;
-}
-.modal-btn:hover {
-  background: var(--color-bg);
-}
-.modal-btn-primary {
-  background: var(--color-action-primary);
-  border-color: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-}
-.modal-btn-primary:hover:not(:disabled) {
-  background: var(--color-action-primary-hover);
-}
-.modal-btn-primary:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
 
 @media (max-width: 600px) {
   .snippets-grid {

frontend/src/views/TaskEditorView.vue

@@ -830,7 +830,7 @@ useEditorGuards(dirty, save);
   gap: 0.75rem;
   flex-wrap: wrap;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 
 /* .task-main is a flex column; without flex-shrink: 0, long body content
@@ -852,7 +852,7 @@ useEditorGuards(dirty, save);
 .task-sidebar {
   width: 280px;
   flex-shrink: 0;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--fs-border-color);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -866,21 +866,21 @@ useEditorGuards(dirty, save);
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 1.1rem;
   line-height: 1;
   padding: 0 0.2rem;
   flex-shrink: 0;
 }
-.btn-clear-parent:hover { color: var(--color-danger); }
+.btn-clear-parent:hover { color: var(--fs-error); }
 .parent-dropdown {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   right: 0;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   box-shadow: 0 4px 12px var(--color-shadow);
   z-index: 50;
   max-height: 200px;
@@ -890,21 +890,21 @@ useEditorGuards(dirty, save);
   padding: 0.4rem 0.65rem;
   font-size: 0.85rem;
   cursor: pointer;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.parent-dropdown-item:hover { background: var(--color-bg-secondary); }
-.parent-empty { color: var(--color-text-muted); cursor: default; }
+.parent-dropdown-item:hover { background: var(--fs-surface-raised); }
+.parent-empty { color: var(--fs-text-tertiary); cursor: default; }
 .parent-empty:hover { background: none; }
 
 /* Sub-tasks */
 .subtasks-section {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.5rem 0.65rem;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .subtasks-header {
   display: flex;
@@ -915,23 +915,23 @@ useEditorGuards(dirty, save);
 .subtasks-label {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 .subtask-checkbox { flex-shrink: 0; cursor: pointer; }
 .subtask-title {
   font-size: 0.83rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   text-decoration: none;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.subtask-title:hover { color: var(--color-primary); }
-.subtask-title.done { text-decoration: line-through; color: var(--color-text-muted); }
-.subtasks-empty { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; }
+.subtask-title:hover { color: var(--fs-accent); }
+.subtask-title.done { text-decoration: line-through; color: var(--fs-text-tertiary); }
+.subtasks-empty { font-size: 0.78rem; color: var(--fs-text-tertiary); margin: 0; }
 .subtask-add-row {
   display: flex;
   align-items: center;
@@ -941,19 +941,19 @@ useEditorGuards(dirty, save);
 .subtask-input {
   flex: 1;
   padding: 0.25rem 0.4rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   font-size: 0.83rem;
   font-family: inherit;
 }
-.subtask-input:focus { outline: none; border-color: var(--color-primary); }
+.subtask-input:focus { outline: none; border-color: var(--fs-accent); }
 .stream-preview {
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   padding: 0.75rem;
-  background: var(--color-bg-card);
+  background: var(--fs-surface-raised);
   min-height: 200px;
 }
 .main-diff {
@@ -963,9 +963,9 @@ useEditorGuards(dirty, save);
 
 /* Systems multi-select (in sidebar) */
 .sb-systems { display: flex; flex-direction: column; gap: 0.25rem; max-height: 160px; overflow-y: auto; }
-.sb-system-opt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--color-text); cursor: pointer; }
-.sb-system-opt input { accent-color: var(--color-primary); cursor: pointer; }
-.sb-systems-empty { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
+.sb-system-opt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--fs-text-primary); cursor: pointer; }
+.sb-system-opt input { accent-color: var(--fs-accent); cursor: pointer; }
+.sb-systems-empty { margin: 0; font-size: 0.8rem; color: var(--fs-text-tertiary); }
 
 /* Writing Assistant section (in sidebar) */
 .assist-section {
@@ -976,7 +976,7 @@ useEditorGuards(dirty, save);
 .assist-section-title {
   font-size: 0.78rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -1007,11 +1007,11 @@ useEditorGuards(dirty, save);
   font-size: 0.75rem;
 }
 .sb-ts-label {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
 }
 .sb-ts-value {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
   text-align: right;
 }
 
@@ -1022,7 +1022,7 @@ useEditorGuards(dirty, save);
   .task-sidebar {
     width: 100%;
     border-left: none;
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--fs-border-color);
     overflow-y: visible;
   }
 }
@@ -1035,13 +1035,13 @@ useEditorGuards(dirty, save);
   margin: 0.5rem 0 0.25rem;
 }
 .task-goal-label {
-  font-family: var(--font-display);
+  font-family: var(--fs-font-display);
   font-style: italic;
   font-size: 0.78rem;
   font-weight: 500;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .task-goal-input {
   width: 100%;
@@ -1051,14 +1051,14 @@ useEditorGuards(dirty, save);
   font: inherit;
   font-size: 0.95rem;
   line-height: 1.4;
-  color: var(--color-text);
-  background: var(--color-input-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  color: var(--fs-text-primary);
+  background: var(--fs-surface-page);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
 }
 .task-goal-input:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 
 </style>

frontend/src/views/TaskViewerView.vue

@@ -475,7 +475,7 @@ const subTaskProgress = computed(() => {
   gap: 0.5rem;
   flex-wrap: wrap;
   font-size: 0.83rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.75rem;
 }
 .meta-item {
@@ -494,10 +494,10 @@ const subTaskProgress = computed(() => {
 }
 .due-date {
   font-size: 0.85rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .due-date.overdue {
-  color: var(--color-overdue);
+  color: var(--fs-overdue);
   font-weight: 500;
 }
 .task-meta-row {
@@ -508,10 +508,10 @@ const subTaskProgress = computed(() => {
 }
 .task-meta-item {
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .task-meta-recurrence {
-  color: var(--color-primary);
+  color: var(--fs-accent);
   font-weight: 500;
 }
 .tags {
@@ -524,7 +524,7 @@ const subTaskProgress = computed(() => {
 /* Sub-tasks */
 .subtasks {
   margin-top: 2rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 1rem;
 }
 .subtasks-header {
@@ -540,21 +540,21 @@ const subTaskProgress = computed(() => {
 }
 .subtasks-progress {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .subtasks-pct {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .subtasks-track {
   height: 4px;
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
   border-radius: 2px;
   margin-bottom: 0.75rem;
   overflow: hidden;
 }
 .subtasks-fill {
   height: 100%;
-  background: var(--color-status-done);
+  background: var(--fs-status-done);
   border-radius: 2px;
   transition: width 0.3s ease;
 }
@@ -571,10 +571,10 @@ const subTaskProgress = computed(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.3rem 0.5rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
 }
 .subtask-row:hover {
-  background: var(--color-bg-secondary);
+  background: var(--fs-surface-raised);
 }
 .sub-dot {
   flex-shrink: 0;
@@ -592,21 +592,21 @@ const subTaskProgress = computed(() => {
 }
 .dot-todo {
   background: transparent;
-  border: 2px solid var(--color-text-muted);
+  border: 2px solid var(--fs-text-tertiary);
 }
 .dot-in-progress {
-  background: var(--color-status-in-progress);
+  background: var(--fs-status-in-progress);
 }
 .dot-done {
-  background: var(--color-status-done);
+  background: var(--fs-status-done);
 }
 .dot-cancelled {
-  background: var(--color-text-muted);
+  background: var(--fs-text-tertiary);
 }
 .sub-title {
   flex: 1;
   font-size: 0.9rem;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   text-decoration: none;
   min-width: 0;
   overflow: hidden;
@@ -614,21 +614,21 @@ const subTaskProgress = computed(() => {
   white-space: nowrap;
 }
 .sub-title:hover {
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 .sub-title.sub-done {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   text-decoration: line-through;
 }
 .sub-due {
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   flex-shrink: 0;
 }
 
 .backlinks {
   margin-top: 2.5rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--fs-border-color);
   padding-top: 1.25rem;
 }
 .backlinks-heading {
@@ -639,14 +639,14 @@ const subTaskProgress = computed(() => {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.75rem;
 }
 .backlinks-count {
   margin-left: 0.2rem;
   font-size: 0.72rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   border-radius: 999px;
   padding: 0 0.4rem;
   line-height: 1.4;
@@ -661,18 +661,18 @@ const subTaskProgress = computed(() => {
   align-items: center;
   gap: 0.6rem;
   padding: 0.5rem 0.75rem;
-  border-radius: var(--radius-md);
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
+  border-radius: var(--fs-radius-lg);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   transition: border-color 0.15s, box-shadow 0.15s;
   font-size: 0.9rem;
 }
 .backlink-card:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+  border-color: color-mix(in srgb, var(--fs-accent) 50%, transparent);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  color: var(--color-primary);
+  color: var(--fs-accent);
 }
 .backlink-type-badge {
   font-size: 0.68rem;
@@ -684,9 +684,9 @@ const subTaskProgress = computed(() => {
   flex-shrink: 0;
 }
 .badge-note {
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  color: var(--color-primary);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
+  color: var(--fs-accent);
+  border: 1px solid color-mix(in srgb, var(--fs-accent) 25%, transparent);
 }
 .badge-task {
   background: color-mix(in srgb, #f59e0b 12%, transparent);
@@ -716,12 +716,12 @@ const subTaskProgress = computed(() => {
 .skel-meta,
 .skel-badges,
 .skel-line {
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
   background: linear-gradient(
     90deg,
-    var(--color-bg-secondary) 25%,
-    color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-secondary)) 50%,
-    var(--color-bg-secondary) 75%
+    var(--fs-surface-raised) 25%,
+    color-mix(in srgb, var(--fs-text-tertiary) 18%, var(--fs-surface-raised)) 50%,
+    var(--fs-surface-raised) 75%
   );
   background-size: 200% 100%;
   animation: skel-shine 1.5s ease infinite;
@@ -733,7 +733,7 @@ const subTaskProgress = computed(() => {
 }
 .skel-btn { width: 70px; height: 32px; }
 .skel-btn--wide { width: 90px; }
-.skel-title { height: 2.2rem; width: 65%; border-radius: var(--radius-md); }
+.skel-title { height: 2.2rem; width: 65%; border-radius: var(--fs-radius-lg); }
 .skel-meta { height: 0.85rem; width: 45%; }
 .skel-badges { height: 1.6rem; width: 30%; border-radius: 999px; }
 .skel-line { height: 0.9rem; }
@@ -742,26 +742,26 @@ const subTaskProgress = computed(() => {
 
 /* ── Goal block + auto-summary banner ─────────────────────────────────────── */
 .task-goal-display {
-  border-left: 2px solid var(--color-border);
+  border-left: 2px solid var(--fs-border-color);
   padding: 0.4rem 0 0.4rem 0.9rem;
   margin: 0.75rem 0 1.25rem;
   background: rgba(255, 255, 255, 0.02);
 }
 .goal-label {
-  font-family: var(--font-display);
+  font-family: var(--fs-font-display);
   font-style: italic;
   font-size: 0.78rem;
   font-weight: 500;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   margin: 0 0 0.25rem;
 }
 .goal-text {
   margin: 0;
   font-size: 0.95rem;
   line-height: 1.45;
-  color: var(--color-text);
+  color: var(--fs-text-primary);
   white-space: pre-wrap;
 }
 </style>

frontend/src/views/TrashView.vue

@@ -68,7 +68,7 @@ onMounted(() => store.fetchTrash());
 .batch-count { opacity: 0.6; font-weight: 400; font-size: 0.9em; margin-left: 0.35rem; }
 .batch-meta { font-size: 0.82em; opacity: 0.6; margin-top: 0.25rem; }
 .batch-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
-.batch-actions button { border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; border: 1px solid var(--color-border); background: none; color: inherit; }
-.btn-restore:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
-.btn-purge:hover { border-color: var(--color-action-destructive); color: var(--color-action-destructive); }
+.batch-actions button { border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; border: 1px solid var(--fs-border-color); background: none; color: inherit; }
+.btn-restore:hover { border-color: var(--fs-action-primary); color: var(--fs-action-primary); }
+.btn-purge:hover { border-color: var(--fs-action-destructive); color: var(--fs-action-destructive); }
 </style>

frontend/src/views/UserManagementView.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { apiGet, apiPost, apiPut, apiDelete } from "@/api/client";
+import { apiGet, apiPost, apiPut, apiDelete, apiErrorMessage } from "@/api/client";
 import { useAuthStore } from "@/stores/auth";
 import { useToastStore } from "@/stores/toast";
 import type { User } from "@/types/auth";
+import { fmtDate } from "@/utils/dateFormat";
 
 interface Invitation {
   id: number;
@@ -69,12 +70,7 @@ async function sendInvite() {
     inviteEmail.value = "";
     await fetchInvitations();
   } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      toastStore.show(body?.error || "Failed to send invitation", "error");
-    } else {
-      toastStore.show("Failed to send invitation", "error");
-    }
+    toastStore.show(apiErrorMessage(e, "Failed to send invitation"), "error");
   } finally {
     sendingInvite.value = false;
   }
@@ -128,24 +124,11 @@ async function deleteUser(userId: number) {
     users.value = users.value.filter((u) => u.id !== userId);
     toastStore.show("User deleted");
   } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      toastStore.show(body?.error || "Failed to delete user", "error");
-    } else {
-      toastStore.show("Failed to delete user", "error");
-    }
+    toastStore.show(apiErrorMessage(e, "Failed to delete user"), "error");
   } finally {
     deleting.value = null;
   }
 }
-
-function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString(undefined, {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-}
 </script>
 
 <template>
@@ -212,8 +195,8 @@ function formatDate(iso: string): string {
           <tbody>
             <tr v-for="inv in invitations" :key="inv.id">
               <td class="cell-email">{{ inv.email }}</td>
-              <td class="hide-mobile cell-date">{{ formatDate(inv.created_at) }}</td>
-              <td class="hide-mobile cell-date">{{ formatDate(inv.expires_at) }}</td>
+              <td class="hide-mobile cell-date">{{ fmtDate(inv.created_at) }}</td>
+              <td class="hide-mobile cell-date">{{ fmtDate(inv.expires_at) }}</td>
               <td class="cell-actions">
                 <button
                   class="btn-ghost btn-compact"
@@ -255,7 +238,7 @@ function formatDate(iso: string): string {
                 {{ u.role }}
               </span>
             </td>
-            <td class="hide-mobile cell-date">{{ formatDate(u.created_at) }}</td>
+            <td class="hide-mobile cell-date">{{ fmtDate(u.created_at) }}</td>
             <td class="cell-actions">
               <template v-if="u.id === authStore.user?.id">
                 <span class="you-label">You</span>
@@ -297,9 +280,9 @@ function formatDate(iso: string): string {
   margin: 0 0 1.5rem;
 }
 .settings-section {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
   padding: 1.25rem;
   margin-bottom: 1.5rem;
 }
@@ -317,16 +300,16 @@ function formatDate(iso: string): string {
 .invite-input {
   flex: 1;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-sm);
   font-size: 0.95rem;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--fs-surface-page);
+  color: var(--fs-text-primary);
   box-sizing: border-box;
 }
 .invite-input:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--fs-accent);
 }
 .invite-list {
   margin-top: 1rem;
@@ -334,7 +317,7 @@ function formatDate(iso: string): string {
 .invite-list h3 {
   margin: 0 0 0.5rem;
   font-size: 0.95rem;
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 
 /* Registration toggle */
@@ -352,33 +335,33 @@ function formatDate(iso: string): string {
   font-size: 0.95rem;
 }
 .text-success {
-  color: var(--color-success);
+  color: var(--fs-success);
 }
 .text-muted {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 .field-hint {
   margin: 0.35rem 0 0;
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 /* The one genuine override: 'close registration' must NOT read as the
    primary action it sits on. Scoped, so it beats the shared variant. */
 .btn-toggle-close {
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border: 1px solid var(--fs-border-color);
 }
 .btn-toggle-close:hover:not(:disabled) {
-  border-color: var(--color-warning);
-  color: var(--color-warning);
+  border-color: var(--fs-warning);
+  color: var(--fs-warning);
 }
 
 /* Users table */
 .loading-msg,
 .empty-msg {
   text-align: center;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.9rem;
   padding: 1rem 0;
 }
@@ -392,13 +375,13 @@ function formatDate(iso: string): string {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
 }
 .users-table td {
   padding: 0.65rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--fs-border-color);
   font-size: 0.9rem;
 }
 .users-table tbody tr:last-child td {
@@ -408,10 +391,10 @@ function formatDate(iso: string): string {
   font-weight: 600;
 }
 .cell-email {
-  color: var(--color-text-secondary);
+  color: var(--fs-text-secondary);
 }
 .cell-date {
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
   font-size: 0.85rem;
 }
 .cell-actions {
@@ -426,21 +409,21 @@ function formatDate(iso: string): string {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.15rem 0.4rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--fs-radius-sm);
 }
 .role-admin {
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
 }
 .role-user {
-  color: var(--color-text-muted);
-  background: var(--color-bg-secondary);
+  color: var(--fs-text-tertiary);
+  background: var(--fs-surface-raised);
 }
 
 /* Action buttons */
 .you-label {
   font-size: 0.8rem;
-  color: var(--color-text-muted);
+  color: var(--fs-text-tertiary);
 }
 
 @media (max-width: 768px) {

plugin/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "scribe",
   "description": "Scribe system-of-record for Claude Code: MCP tools over your notes/tasks/projects/rules, a session-start push channel that surfaces your always-on rules + active-project context, process-skills (writing-plans, systematic-debugging, verification, brainstorming, reusing-code), and your saved Scribe Processes auto-surfaced as skills (/scribe:sync). Replaces superpowers + file-memory with one app-backed plugin.",
-  "version": "0.1.25",
+  "version": "0.1.37",
   "author": { "name": "Bryan Van Deusen" },
   "mcpServers": {
     "scribe": {

plugin/README.md

@@ -50,6 +50,9 @@ On install you'll be asked for:
   (`hooks/scribe_prior_art.sh`) → `GET /api/plugin/prior-art`. Returns
   `additionalContext` with **no** permission decision, so it can inform the write
   but never stop it; silent when nothing is recorded, which is most of the time.
+  Two framings: a REUSE menu (similar/nearby records), and a SYNC nudge when a
+  snippet records the exact file being edited — "updating the record is part of
+  the edit" — each with its own once-per-session dedup.
   Toggle in **Settings → Knowledge auto-inject**.
 - `skills/` → the universal process-skills, surfaced by description match.
 - `hooks/scribe_sync_processes.sh` (a 2nd SessionStart hook) + the `/scribe:sync`

plugin/hooks/scribe_prior_art.sh

@@ -8,6 +8,18 @@
 # that path or in its directory, plus snippets resembling the code about to be
 # written. Titles + ids only, never bodies.
 #
+# The answer comes in two framings (#2708). A snippet recorded AT the exact
+# file being edited is the SYNC class — "you are editing the recorded file;
+# updating the record is part of the edit" — which is how records stay current
+# on an instance with no forge connection (decision #2707). Everything else is
+# the REUSE menu. The two dedup separately (see the state files below).
+#
+# It is also the shape ledger's write-path feed (#2791): it names the
+# definitions being written (`shapes=`), and the server — only when the
+# session has PULLED a snippet this code references or resembles — records
+# them as instance rows, classified_by=hook. Evidence, not judgment; the
+# context line says what landed so a wrong stamp is corrected in the moment.
+#
 # NEVER BLOCKS. It returns `additionalContext` with no `permissionDecision`, so
 # the write proceeds untouched and Claude sees the note beside the tool result.
 # Any failure — unconfigured, unreachable, malformed — exits 0 in silence. A
@@ -79,34 +91,72 @@ fi
 # Definition-shaped patterns only. Grepping for bare occurrences would match
 # every CALL site and drown the real finding — and a hint that is mostly noise
 # is one people learn to skip, which is worse than none.
+#
+# ALL code, not a language shortlist (#2682): the detector was born covering
+# only the languages of the repo it was written in, which silently amputated
+# this whole arm — and the record nudge gated on it — for every Go/Kotlin/Rust
+# project. Definitions are announced by a small keyword family across
+# languages (func/fun/fn/function/def/sub · class/struct/trait/interface/
+# enum/object/protocol/type), so one modifier-strip + keyword match covers
+# them all. Known out of scope: keyword-less declaration syntax (C/Java/Dart
+# `ReturnType name(...)`) needs a real parser, and `impl` blocks are excluded
+# because several per type is normal Rust, not duplication.
 # ---------------------------------------------------------------------------
-local_lines=""
-if [ -n "$repo_root" ] && [ -n "$code" ]; then
-  # kind<TAB>name for each thing this payload DEFINES.
-  names=$(printf '%s' "$code" | awk '
-    match($0, /^[[:space:]]*\.[A-Za-z][A-Za-z0-9_-]*[[:space:]]*[,{]/) {
-      t = $0; sub(/^[[:space:]]*\./, "", t); sub(/[[:space:]]*[,{].*$/, "", t);
-      if (t != "") print "css\t" t; next }
-    match($0, /^[[:space:]]*(export[[:space:]]+)?(default[[:space:]]+)?(async[[:space:]]+)?function[[:space:]]+[A-Za-z_$][A-Za-z0-9_$]*/) {
-      t = $0; sub(/^.*function[[:space:]]+/, "", t); sub(/[^A-Za-z0-9_$].*$/, "", t);
-      if (t != "") print "sym\t" t; next }
-    match($0, /^[[:space:]]*(export[[:space:]]+)?class[[:space:]]+[A-Za-z_$][A-Za-z0-9_$]*/) {
-      t = $0; sub(/^.*class[[:space:]]+/, "", t); sub(/[^A-Za-z0-9_$].*$/, "", t);
-      if (t != "") print "sym\t" t; next }
-    match($0, /^[[:space:]]*(async[[:space:]]+)?def[[:space:]]+[A-Za-z_][A-Za-z0-9_]*/) {
-      t = $0; sub(/^.*def[[:space:]]+/, "", t); sub(/[^A-Za-z0-9_].*$/, "", t);
-      if (t != "") print "sym\t" t; next }
-    match($0, /^[[:space:]]*(export[[:space:]]+)?(const|let)[[:space:]]+[A-Za-z_$][A-Za-z0-9_$]*[[:space:]]*=[[:space:]]*(async[[:space:]]*)?[(<]/) {
-      t = $0; sub(/^[[:space:]]*(export[[:space:]]+)?(const|let)[[:space:]]+/, "", t);
-      sub(/[^A-Za-z0-9_$].*$/, "", t);
-      if (t != "") print "sym\t" t; next }
-  ' 2>/dev/null | sort -u | head -12) || names=""
+# kind<TAB>name for each thing a piece of code DEFINES, in source order. One
+# program, two consumers: the local duplicate arm (every definition in the
+# payload) and the ledger feed (#2791, below: the definitions being written,
+# or the one enclosing an Edit). Rule-for-rule mirrored by the server's
+# services/coverage.py extract_shapes — ledger rows are keyed by what THAT
+# sees, so the two must agree on what counts as a definition.
+scribe_defs() {
+  awk '
+    {
+      # CSS class definition: .name { or .name,
+      if (match($0, /^[[:space:]]*\.[A-Za-z][A-Za-z0-9_-]*[[:space:]]*[,{]/)) {
+        t = $0; sub(/^[[:space:]]*\./, "", t); sub(/[[:space:]]*[,{].*$/, "", t)
+        if (t != "") print "css\t" t; next
+      }
+      line = $0; sub(/^[[:space:]]+/, "", line)
+      # Strip leading declaration modifiers so the definition keyword is the
+      # first word regardless of language (export/pub/private/suspend/...).
+      sub(/^((pub(\([a-z]+\))?|export|default|private|internal|protected|public|static|suspend|async|open|sealed|data|abstract|final|inline|unsafe|extern|override)[[:space:]]+)*/, "", line)
+      # Go method with receiver: func (r *T) Name(
+      if (match(line, /^func[[:space:]]*\([^)]*\)[[:space:]]*[A-Za-z_]/)) {
+        t = line; sub(/^func[[:space:]]*\([^)]*\)[[:space:]]*/, "", t)
+        sub(/[^A-Za-z0-9_].*$/, "", t)
+        if (t != "") print "sym\t" t; next
+      }
+      # Keyword-announced definitions, functions and named types alike.
+      # Dunders are skipped: every class defines __init__, so "already defined
+      # in N other files" is guaranteed noise for them — and noise is what
+      # teaches sessions to skip the hint.
+      if (match(line, /^(function|def|class|func|fun|fn|sub|struct|trait|interface|enum|object|protocol|type)[[:space:]]+[A-Za-z_$]/)) {
+        t = line; sub(/^[a-z]+[[:space:]]+/, "", t)
+        sub(/[^A-Za-z0-9_$].*$/, "", t)
+        if (t != "" && t !~ /^__.*__$/) print "sym\t" t; next
+      }
+      # Arrow/expression assignment: const name = (…) / let name = async (
+      if (match(line, /^(const|let)[[:space:]]+[A-Za-z_$][A-Za-z0-9_$]*[[:space:]]*=[[:space:]]*(async[[:space:]]*)?[(<]/)) {
+        t = line; sub(/^(const|let)[[:space:]]+/, "", t)
+        sub(/[^A-Za-z0-9_$].*$/, "", t)
+        if (t != "") print "sym\t" t; next
+      }
+    }
+  ' 2>/dev/null
+}
 
+names=""
+if [ -n "$code" ]; then
+  names=$(printf '%s' "$code" | scribe_defs | sort -u | head -12) || names=""
+fi
+
+local_lines=""
+if [ -n "$repo_root" ] && [ -n "$names" ]; then
   while IFS=$'\t' read -r kind name; do
     [ -n "${name:-}" ] || continue
     case "$kind" in
       css) pat="^[[:space:]]*\.${name}[[:space:]]*[,{]" ;;
-      *)   pat="(function|class|def)[[:space:]]+${name}[^A-Za-z0-9_]|(const|let)[[:space:]]+${name}[[:space:]]*=" ;;
+      *)   pat="(function|def|class|func|fun|fn|sub|struct|trait|interface|enum|object|protocol|type)[[:space:]]+${name}[^A-Za-z0-9_]|func[[:space:]]*\([^)]*\)[[:space:]]*${name}[[:space:]]*\(|(const|let)[[:space:]]+${name}[[:space:]]*=" ;;
     esac
     # -I skips binaries; :(exclude) drops the file being written, which would
     # otherwise always match itself on an Edit.
@@ -124,6 +174,38 @@ if [ -n "$local_lines" ]; then
   local_context="> Already defined elsewhere in this repo — check before adding another copy (\`git grep\` shown; this is a nudge, not a gate):"$'\n'"${local_lines}"
 fi
 
+# ---------------------------------------------------------------------------
+# THE LEDGER FEED (#2791). The server keeps a shape ledger — every definition
+# in the bound repo, classified against recorded canon — and this hook is the
+# one place that sees a shape AT THE MOMENT IT IS WRITTEN. So it names the
+# shapes in play: every definition in the payload, or — for an Edit that
+# changes the inside of a function rather than its signature — the definition
+# enclosing the edit, found by walking the target file upward from the edited
+# lines. The server decides whether evidence exists (the session pulled a
+# snippet this code references or resembles) and stamps instance rows; with
+# no pulled canon in play, nothing is recorded. Titles only still — this sends
+# names, not bodies.
+# ---------------------------------------------------------------------------
+shapes="$names"
+if [ -z "$shapes" ] && [ -f "$file_path" ] && command -v tac >/dev/null 2>&1; then
+  old_first=$(printf '%s' "$event" \
+    | jq -r '.tool_input.old_string // .tool_input.old_str // empty' 2>/dev/null \
+    | grep -m1 -v '^[[:space:]]*$') || old_first=""
+  if [ -n "$old_first" ]; then
+    ln=$(grep -nF -m1 -- "$old_first" "$file_path" 2>/dev/null | cut -d: -f1) || ln=""
+    if [ -n "$ln" ]; then
+      shapes=$(head -n "$ln" "$file_path" | tac | scribe_defs | head -1) || shapes=""
+    fi
+  fi
+fi
+shapes_q=""
+if [ -n "$shapes" ]; then
+  enc=$(printf '%s\n' "$shapes" \
+    | awk -F'\t' 'NF>=2 {printf "%s%s:%s", (n++?",":""), $1, $2}' \
+    | jq -sRr '@uri' 2>/dev/null) || enc=""
+  [ -n "$enc" ] && shapes_q="&shapes=${enc}"
+fi
+
 url=${SCRIBE_URL:-${CLAUDE_PLUGIN_OPTION_API_ENDPOINT:-}}
 token=${SCRIBE_TOKEN:-${CLAUDE_PLUGIN_OPTION_API_TOKEN:-}}
 # Guard against an unexpanded ${...} placeholder arriving as a literal.
@@ -168,31 +250,66 @@ fi
 # surface shows a given snippet at most once per session, but they don't silence
 # each other: a title that flew past in a prompt menu twenty turns ago is
 # exactly what should reappear at the moment the duplicate is being written.
+#
+# TWO channels, not one (#2708). The server answers in two classes — REUSE
+# ("something similar/nearby is recorded") and SYNC ("a snippet records the
+# exact file being edited — updating the record is part of the edit"). They
+# dedup separately: a reuse hint shown early in the session must not suppress
+# the sync nudge when the recorded file itself is edited later.
 state_dir="${TMPDIR:-/tmp}/scribe-priorart"
 mkdir -p "$state_dir" 2>/dev/null || true
 idfile=""
+syncfile=""
 exclude_q=""
+sync_exclude_q=""
 if [ -n "$session_id" ]; then
   safe_sid=$(printf '%s' "$session_id" | tr -c 'A-Za-z0-9._-' '_')
   idfile="$state_dir/${safe_sid}.ids"
+  syncfile="$state_dir/${safe_sid}.sync.ids"
   if [ -f "$idfile" ]; then
     seen=$(tr '\n' ',' < "$idfile" 2>/dev/null | sed 's/,$//')
     [ -n "$seen" ] && exclude_q="&exclude_ids=${seen}"
   fi
+  if [ -f "$syncfile" ]; then
+    sync_seen=$(tr '\n' ',' < "$syncfile" 2>/dev/null | sed 's/,$//')
+    [ -n "$sync_seen" ] && sync_exclude_q="&exclude_sync_ids=${sync_seen}"
+  fi
 fi
 
 # `|| true`, not `|| exit 0`: an unreachable instance must not discard a local
 # finding that needed no instance to produce.
 body=$(curl -fsS --max-time 5 \
   -H "Authorization: Bearer ${token}" \
-  "${url%/}/api/plugin/prior-art?path=${path_enc}&code=${code_enc}${repo_q}${exclude_q}" 2>/dev/null) || body=""
+  "${url%/}/api/plugin/prior-art?path=${path_enc}&code=${code_enc}${repo_q}${exclude_q}${sync_exclude_q}${shapes_q}" 2>/dev/null) || body=""
 
 context=""
 if [ -n "$body" ]; then
   context=$(printf '%s' "$body" | jq -r '.context // empty' 2>/dev/null) || context=""
-  # Remember what was surfaced so it isn't shown again this session.
-  if [ -n "$idfile" ] && [ -n "$context" ]; then
-    printf '%s' "$body" | jq -r '.note_ids[]? // empty' 2>/dev/null >> "$idfile" || true
+  # Remember what was surfaced so it isn't shown again this session — each
+  # class into its own channel: sync ids (snippets recording the edited file)
+  # to the sync file, everything else to the reuse file.
+  if [ -n "$context" ]; then
+    if [ -n "$idfile" ]; then
+      printf '%s' "$body" | jq -r '((.note_ids // []) - (.sync_note_ids // []))[]?' 2>/dev/null >> "$idfile" || true
+    fi
+    if [ -n "$syncfile" ]; then
+      printf '%s' "$body" | jq -r '(.sync_note_ids // [])[]?' 2>/dev/null >> "$syncfile" || true
+    fi
+  fi
+fi
+
+# ARM 1½ — the RECORD nudge (#2664). The local arm just proved the thing being
+# written already exists elsewhere in this repo, and Scribe returned no record
+# of anything for it. That is the one moment "record it" is earned rather than
+# noise: the duplication is demonstrated, not guessed. Gated on BOTH sides so
+# an ordinary new helper (no other copies) and an already-recorded one (the
+# server spoke) stay nudge-free — a reflex that fires on everything is one
+# that gets skipped. An unreachable server counts as "nothing recorded": the
+# local finding needed no server, and the nudge fails open with it.
+if [ -n "$local_lines" ]; then
+  n_recorded=$(printf '%s' "$body" | jq -r '.note_ids | length' 2>/dev/null) || n_recorded=0
+  if [ "${n_recorded:-0}" = "0" ] || [ "$n_recorded" = "" ]; then
+    local_context="${local_context}"$'\n'"> None of those existing copies is recorded in Scribe. If the version being written is the canonical one — or this edit is consolidating the copies — record it now with create_snippet (name, code, when-to-reach-for-it, location) so the next session is offered it instead of writing another copy."
   fi
 fi
 

plugin/hooks/scribe_static_context.md

@@ -37,11 +37,36 @@ for the operator's work, and as your own working memory across sessions.
   moment it's complete. When you **fix** something — even in passing — record it
   as its own issue (`create_task(kind="issue")`), not as a work-log line on an
   unrelated open task.
-- **Reuse before rebuilding** — before writing a new helper/utility/component,
-  search recorded **snippets** (reusable code recorded once for recall) and
-  reuse the prior art instead of re-solving it; when you build something
-  reusable, record it with `create_snippet` (name, code, when-to-reach-for-it,
-  location) so a later session is offered it, not left to write it again.
+- **Tag to Systems as you write** — `enter_project` lists the project's
+  Systems (its named subsystems/areas). When you create or meaningfully update
+  a record, ask which areas it is about and pass `system_ids`; if an area has
+  no System yet, create it with `create_system` (name + a one-paragraph
+  charter) rather than leaving it unmodelled. Cross-cutting records — audits,
+  sweeps, reviews — take SEVERAL tags, and are the best moment to DISCOVER
+  missing Systems: a pass that walks the subsystems has just enumerated the
+  vocabulary, so mint what it names. Create liberally; the duplicate gate on
+  `create_system` (and reviewing the existing list) is the guardrail against
+  sprawl, not restraint. Every read and write of a project record shows its
+  `systems` — that is the "am I in a System's territory?" signal, and
+  `list_system_records` reads that territory's whole pile before you work in
+  it. An untagged project record carries the `systems_hint` question instead,
+  on creates, updates, and work-logs alike — treat it as the tagging question
+  asked at the moment of work, not as noise to skip past.
+- **The pattern library: start from recorded shapes, and record every shape
+  at first build** — recorded **snippets** are the project's pattern library,
+  not a dedup net. Before building ANY shape — a button, an input field, a
+  modal, a route handler, a service class, a test scaffold, up through complex
+  subsystem patterns — search snippets and START from the recorded shape; a
+  deliberate departure is recorded as its own named variant, never left as
+  silent drift. And the FIRST time a shape is built, record it with
+  `create_snippet` (name, when-to-reach-for-it, location, code) in the same
+  breath — do not judge whether it "might recur": the builder of the first
+  instance can never know, and a missed record is invisible until it
+  resurfaces as an uninformed duplicate. A mature project's snippet corpus
+  should read as a map of every shape in it. The backstop still holds:
+  noticing the second copy of anything, or consolidating copies into a shared
+  X, means X gets recorded before that work is finished — which is how a
+  codebase is kept from growing four `.btn-primary` definitions.
 - Do **not** keep the operator's rules, plans, or project notes in local
   memory / CLAUDE.md in parallel with Scribe — Scribe holds the single copy.
 - **Compact at clean seams** — because you record as you go, a context
@@ -51,6 +76,14 @@ for the operator's work, and as your own working memory across sessions.
   `/compact` (name what you logged). You can't run it yourself — surface the
   recommendation and let them decide. Suggest it at seams, not every turn.
 
+**How the instruction surfaces divide the work:** this file carries the
+session-level reflexes (WHEN to reach for Scribe); each tool's own description
+carries its full contract (HOW to call it — read it when you load the tool);
+the bundled skills carry process arcs (planning, debugging, verification). The
+MCP server's instruction block is deliberately only a map — the client injects
+roughly its first 2,000 characters and silently cuts the rest, so nothing
+load-bearing lives below that fold.
+
 **If two Scribe instruction surfaces disagree** — this file, the MCP server's
 tool instructions, the `using-scribe` skill — **follow the one that assumes
 least about its own delivery.** This file is the floor: it ships with the

plugin/skills/reusing-code/SKILL.md

@@ -1,20 +1,24 @@
 ---
 name: reusing-code
-description: Use when you're about to write a helper, utility, hook, or reusable component — search recorded snippets FIRST so prior art is reused instead of re-solved. And the moment you build or notice something reusable, record it as a snippet so a later session finds it. Triggers on "write a util/helper", "I need a function that…", "let me add a component", or just having built something worth reusing.
+description: Use when you're about to build ANY shape — a component, control, route handler, service class, helper, test scaffold — search recorded snippets FIRST and start from the recorded shape instead of re-solving it. And the FIRST time a shape is built, record it as a snippet so every later instance starts from it. Triggers on "write a util/helper", "I need a function that…", "let me add a component/button/field/route", or having just built the first instance of anything.
 ---
 
-# Reusing code — recall before you rebuild
+# Reusing code — the pattern library
 
-Reusable code is worth writing once. Scribe stores **snippets** — a named,
-reusable function or component recorded with its language, signature, canonical
-location (repo · path · symbol), a one-line *"when to reach for it,"* and the
-code itself — so prior art can surface *before* it's re-written as a one-off.
+Snippets are the project's **pattern library**, not a dedup net. Each records a
+named shape — with its language, signature, canonical location (repo · path ·
+symbol), a one-line *"when to reach for it,"* and the code — so every later
+instance STARTS from the recorded shape: buttons start from the button shape,
+fields from the field shape, and "special" is a deliberate, named exception
+rather than drift. A mature project's snippet corpus reads as a map of every
+shape in it, from the humblest control to the most complex subsystem pattern.
 Snippets are ordinary embedded notes, so a recorded one also surfaces on its own
 through recall/auto-inject; this skill is the active reflex around that.
 
-## Before you write a new helper — search first
+## Before you build any shape — search first
 
-- About to write a utility, hook, formatter, adapter, or a reusable component?
+- About to build a component, control, route handler, service class, utility,
+  hook, formatter, adapter, or test scaffold?
   **Search snippets before writing it.** `list_snippets(q="…")` (or a plain
   `search`) — a matching one may already exist, in this project or another.
   `list_snippets` searches every project by default; that's deliberate, since a
@@ -30,6 +34,9 @@ through recall/auto-inject; this skill is the active reflex around that.
   to ask both at once.
 - If a snippet fits, pull it in full with `get_snippet(id)` and reuse it — its
   `location` points at the reference implementation. Adapt, don't re-derive.
+  The pull also does the accounting: the code you then write that references
+  or resembles it is stamped an `instance` of that canon in the shape ledger
+  (classified_by=hook) — reuse from memory leaves no row.
 - If auto-inject already surfaced a snippet title that looks relevant, that's
   your cue to `get_snippet` it rather than start from scratch.
 - **Prior art offered beside a write is not noise — read it.** When Scribe notes
@@ -37,11 +44,24 @@ through recall/auto-inject; this skill is the active reflex around that.
   it before you go any further. Either it's the helper you were about to
   duplicate — reuse it and drop yours — or it isn't, and the record needs the new
   location adding. Both are cheaper now than after the duplicate settles in.
+- **A `[records this file]` hint is a duty, not a menu.** When the hint says a
+  snippet records the very file you're editing, the record's freshness is now
+  YOUR edit's responsibility: if the edit changes the recorded shape,
+  `update_snippet(id, code=…)` with the new form as part of the same task; if
+  it doesn't, `verify_snippet(id, status="ok", commit_sha=…)` costs one call
+  and re-stamps the record as checked. Scribe never reads the repo — this
+  moment, in the session that has the context, is the only place the record
+  gets kept true.
 
-## The moment you build something reusable — record it
+## The first time a shape is built — record it
 
-- Just wrote (or noticed) a helper, hook, pattern, or component worth repeating?
-  Record it with `create_snippet` while it's fresh:
+- Just built the FIRST instance of anything with a shape — a component, a
+  field, a route, a service pattern, a scaffold? Record it with
+  `create_snippet` while it's fresh. Do **not** stop to judge whether it will
+  recur: the builder of the first instance can never know, and a missed record
+  is invisible until it resurfaces as an uninformed duplicate. Over-recording
+  is safe — dead weight shows up in the usage counters and can be pruned;
+  under-recording has no signal at all. The record is cheap — these fields:
   - **name** — what it's called, e.g. `useDebouncedRef`.
   - **code** — the implementation.
   - **when_to_use** — one sharp line on when to reach for it. This becomes part
@@ -90,9 +110,26 @@ The result is a single entry that shows every place the thing is used — which
 exactly the signal that it was worth consolidating. This is the cure the create
 gate only hints at when it blocks a near-duplicate.
 
+## Consumer maps are rows, never prose
+
+Every enumerated relationship between code and canon belongs in the shape
+ledger, not in a sentence. When you establish that call sites route through a
+canonical helper — during an audit, a verify pass, or a consolidation —
+record each consuming definition with
+`classify_shapes(project_id, [{path, symbol, status: "instance", snippet_id}])`.
+A deliberate departure is a `"variant"` (reason required — the why IS the
+record); a judged one-off is `"exempt"` (reason required). Prose in a
+verification detail cannot be sorted, queried, or diffed; rows are what make
+"what uses this?" answerable forever. `list_shapes(project_id,
+status="unclassified")` is the standing todo — and N same-shaped occurrences
+matching no canon means derive one first (consolidate, `create_snippet`,
+then classify the rest against it), never N loose classifications.
+
 ## Why this pays off
 
-A one-off written a second time is the cost this avoids. Recording a snippet
-once — with a location and a crisp "when to use" — means the next session is
-offered the prior art instead of re-solving it. Search before writing; record
-what's worth reusing.
+A one-off written a second time is the cost this avoids — and at project
+scale, the cost is an application whose buttons, fields, and services each
+exist in four diverging shapes. Recording every shape once — with a location
+and a crisp "when to use" — means every later session starts from the pattern
+library instead of re-deriving it. Search before building; record every shape
+at first build.

plugin/skills/shape-accounting/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: shape-accounting
+description: Use when a project's shape accounting needs attention — the pattern_coverage line from enter_project shows unclassified shapes or is missing on a forge-served project, the operator asks about coverage/accounting/canon, or you just proved a code-to-canon relationship (an audit enumerated call sites, a consolidation repointed consumers, a verify pass confirmed a helper's users). Triggers on "coverage", "accounted", "unclassified", "classify shapes", "what uses this", or finishing any consolidation.
+---
+
+# Shape accounting — every shape classified against canon
+
+The snippet library records **canon** (small); the shape ledger accounts for
+**every extracted definition** in a project's bound repos (total). Each ledger
+row carries a status:
+
+- `canonical` — IS a snippet's reference (the coverage sync stamps these
+  mechanically; you rarely set it).
+- `instance` of snippet N — conforms to recorded canon. Canon in another
+  project counts (a family-level button shape fully accounts for a local use).
+- `variant` of snippet N — a deliberate, named departure. **Reason required**
+  — the why IS the record.
+- `exempt` — judged genuinely one-off. **Reason required.** A recorded
+  judgment, not silence — it stops the next pass re-litigating it.
+- `scoped` — one-off **by construction**, stamped by the coverage sync
+  (a Vue component's scoped `<style>` rules and its `<script setup>`
+  functions — unreachable from any other file). Accounted for without a
+  judgment; still proposed against, grouped and flagged; any judgment you
+  make overrides it. Not the todo.
+- `unclassified` — nobody has judged it yet. **This is the todo list.**
+
+## The loop
+
+1. **Seed / refresh** — the ledger fills from coverage computation. Entering a
+   project triggers a background seed automatically; when you need it current
+   *now* (before a classification batch, or when the line is missing on a
+   forge-served project), call `refresh_pattern_coverage(project_id)` — it
+   returns the fresh accounting line. Takes seconds; it moves repo archives.
+2. **Read the todo** — `list_shapes(project_id, status="unclassified")`,
+   optionally scoped by `path` to the directories the coverage line names as
+   largest. `snippet_id=N` reads a consumer map.
+3. **Judge in batches** — `classify_shapes(project_id, [{path, symbol,
+   status, snippet_id?, reason?}])`. All-or-nothing: a bad item applies
+   nothing. Rows, never prose — a consumer list in a note or verification
+   detail cannot be sorted, queried, or diffed.
+
+## Rows that arrive on their own
+
+Two feeds keep the ledger current between your batches, so most shapes never
+need a hand judgment:
+
+- **The sync** stamps a snippet's own reference location `canonical`
+  (`classified_by: mechanical`).
+- **The write path** stamps instances as you work: when you `get_snippet` a
+  canon and then Write/Edit code that references or resembles it, the
+  definitions being written land as `instance` rows (`classified_by: hook`,
+  the evidence in `reason`), and the prior-art hook tells you what landed
+  ("Shape accounting: recorded at … → instance of #N"). Offered-but-unopened
+  snippets stamp nothing — so *pull the canon you are instantiating*; that
+  pull is what turns your reuse into accounting. A hook row is evidence, not
+  judgment: it never overrides a classification you made, and a
+  `classify_shapes` call overrides it.
+
+## The machine proposes, judgment classifies
+
+Every coverage refresh runs the **mechanical proposer** over the unclassified
+rows: same symbol as a canon elsewhere → textual containment → body
+references a canon → signature resemblance → semantic (capped per refresh). A hit
+is a *proposal* on the row, never a classification. Work the queue in bulk:
+
+1. `list_shapes(project_id, proposal="canon", snippet_id=N)` or
+   `path="dir"` — read the page; `proposal` carries snippet_id, basis, score.
+2. `confirm_shape_proposals(project_id, snippet_id=N)` (or `path=`,
+   `basis=`) for the ones that hold — hundreds at a time; `symbol` and
+   `reference` proposals are near-certain, `semantic` deserves a look.
+3. `classify_shapes` the rest — variant, exempt, or instance of a different
+   snippet. Any judgment retires the proposal.
+
+`list_shapes(project_id, proposal="derive")` lists the **derive-first
+candidates** — the same body in ≥2 places or the same name defined in ≥3
+files, with no canon at all (`proposal.group` names the family; the coverage
+payload's `derive_groups` ranks the biggest). That is the consolidation
+queue, not a classification queue: see below.
+
+## The derive-first rule
+
+N same-shaped occurrences matching **no** recorded canon is never N loose
+classifications — it is a consolidation candidate: derive one reference from
+the dominant form, `create_snippet` it, migrate the outliers, then classify
+the rest as instances. Canon is determined from the code; consistency comes
+from the derivation, not from asking permission.
+
+## The divergence readout — button B where button A is canon
+
+Three questions the ledger answers mechanically (#2793):
+
+- **Divergence** — `list_shapes(project_id, flag="divergence")` (and the
+  coverage line's "N DIVERGENT"): a shape new since the previous refresh, in
+  a directory where one canon dominates the judged siblings, that the
+  proposer did not match to that canon. `diverges_from` names the canon.
+  Judge it: `instance` if it should be built from the canon (and rebuild
+  it), `variant` with the why if the departure is deliberate. The write-path
+  hook asks the same question in-band the moment such a shape is written.
+- **History** — `shape_history(project_id, path, symbol?)`: the current rows
+  plus every `classified` / `vanished` / `reappeared` / `drifted` event with
+  its commit — "instance of #N from <date>, re-judged variant of #M because
+  R, vanished at C". Rows, not recollection.
+- **Recheck** — `list_shapes(project_id, flag="recheck")`: judged
+  instances/variants whose body changed since judged. The judgment stands;
+  re-confirm it (classify again with the same status) or re-judge.
+
+## What this buys
+
+Divergence becomes mechanical: when button B appears where button A is canon,
+the ledger says *unintended divergence* or *justified variant with its
+reason* — nobody re-derives the history. `get_snippet` shows each snippet's
+`instances` and `variants`, so "what uses this?" is answered from rows before
+any contract change lands on its consumers.

plugin/skills/using-scribe/SKILL.md

@@ -88,7 +88,13 @@ Two constraints on *how* that's achieved:
    `list_system_records` returns? If the area has no System yet, create one
    (`create_system`: name + a one-paragraph charter) — an area that plainly
    exists deserves naming the moment two records would share it; don't wait to
-   be asked. A record about no particular area takes none.
+   be asked. Cross-cutting records — audits, sweeps, reviews — take *several*
+   tags and are the prime discovery moment: a pass that walks the subsystems
+   has just enumerated the vocabulary, so mint the Systems it names as it
+   names them. Create liberally — `create_system` is duplicate-gated, and that
+   gate (plus reviewing the existing list) is the guardrail against sprawl,
+   not restraint. Only a record genuinely about no particular area goes
+   untagged.
 
 8. **State updates in place; chronicles don't.** A dev-log records what
    *happened* — write it once, never rewrite it. A durable finding (how a

src/scribe/app.py

@@ -31,6 +31,7 @@ from scribe.routes.trash import trash_bp
 from scribe.routes.dashboard import dashboard_bp
 from scribe.routes.systems import systems_bp
 from scribe.routes.snippets import snippets_bp
+from scribe.routes.webhooks import webhooks_bp
 from scribe.mcp import mount_mcp
 
 STATIC_DIR = Path(__file__).parent / "static"
@@ -95,6 +96,7 @@ def create_app() -> Quart:
     app.register_blueprint(dashboard_bp)
     app.register_blueprint(systems_bp)
     app.register_blueprint(snippets_bp)
+    app.register_blueprint(webhooks_bp)
 
     @app.before_request
     async def before_request():

src/scribe/config.py

@@ -60,6 +60,19 @@ class Config:
     # the MCP layer doesn't proxy web search (Claude has its own).
     SEARXNG_URL: str = os.environ.get("SEARXNG_URL", "")
 
+    # Git forge integration (#2689) — optional read access to a git forge so
+    # snippet bodies can be fetched/verified server-side. Connections are
+    # per-user keyring rows (#2778, Settings → Git forges); these env values
+    # survive as an implicit keyring entry for ADMIN users' projects only, so
+    # a deployment can keep the operator's token in a Docker secret instead
+    # of the database. A stored row for the same host wins over the env entry.
+    FORGE_KIND: str = os.environ.get("FORGE_KIND", "")
+    FORGE_BASE_URL: str = os.environ.get("FORGE_BASE_URL", "").rstrip("/")
+    FORGE_TOKEN: str = _read_secret("FORGE_TOKEN", "FORGE_TOKEN_FILE", "")
+    FORGE_WEBHOOK_SECRET: str = _read_secret(
+        "FORGE_WEBHOOK_SECRET", "FORGE_WEBHOOK_SECRET_FILE", ""
+    )
+
     @classmethod
     def oidc_enabled(cls) -> bool:
         return bool(cls.OIDC_ISSUER and cls.OIDC_CLIENT_ID and cls.OIDC_CLIENT_SECRET)

src/scribe/mcp/auth.py

@@ -4,20 +4,6 @@ from __future__ import annotations
 from scribe.services.api_keys import lookup_key
 
 
-async def resolve_bearer_to_user_id(auth_header: str | None) -> int | None:
-    """Parse an `Authorization: Bearer <token>` header and return the user_id.
-
-    Returns None if the header is missing, malformed, or the token is invalid
-    or revoked. The underlying lookup_key already updates last_used_at on hit.
-    """
-    if not auth_header or not auth_header.startswith("Bearer "):
-        return None
-    raw_token = auth_header[len("Bearer "):].strip()
-    if not raw_token:
-        return None
-    api_key = await lookup_key(raw_token)
-    return api_key.user_id if api_key else None
-
 
 async def resolve_bearer(auth_header: str | None) -> tuple[int, str] | None:
     """Resolve a Bearer token to (user_id, scope).

src/scribe/mcp/server.py

@@ -1,310 +1,70 @@
 """FastMCP instance + Quart mount-point. Tools are registered in mcp/tools/."""
 from __future__ import annotations
 
+import difflib
+
 from mcp.server.fastmcp import FastMCP
 from mcp.server.transport_security import TransportSecuritySettings
 from quart import Quart
 
+## The delivery budget — read before editing this block
+#
+# Claude Code injects only the FIRST ~2,048 CHARACTERS of an MCP server's
+# instructions into the system prompt; the rest is silently cut mid-word
+# (#2562 — the cut was observed live at exactly offset 2,048, and ~90% of the
+# previous 20k-char version of this block never reached any session). So this
+# block is deliberately a MAP, not a manual, and a test pins it under the
+# fold (test_instruction_surfaces_agree.py::test_instructions_fit_the_fold).
+#
+# Where the detail lives instead — each surface has one job:
+#   - Tool docstrings: the per-tool HOW. Delivered with the tool schema, at
+#     reach-for time when the client defers tools. Guidance about one tool
+#     belongs there, not here.
+#   - Plugin static context (plugin/hooks/scribe_static_context.md): the
+#     session-level reflexes (recall-first, record-as-you-go, tag-to-Systems,
+#     compaction). Always delivered in full; needs no key and no network.
+#   - Plugin skills: process arcs (planning, debugging, verification…).
+#     Their listing line is the always-visible trigger; the body loads on
+#     match. Stored Processes become skills via /scribe:sync.
+#   - The server itself: behaviors prose can't be trusted to fire (the
+#     duplicate gate, the untagged-record systems_hint) act in-band in tool
+#     responses, at the moment they apply.
+# Grow one of those, not this block.
 _INSTRUCTIONS = """
-Scribe is the user's self-hosted second-brain and project-management data
-store, and your own system of record for their work. You (Claude) are the
-assistant: record what you do here — tasks, work-logs, decisions, notes — and
-recall from here before acting. Do not keep the user's project work in local
-files (CLAUDE.md, scratch/auto memory) in parallel; Scribe holds the single copy.
+Scribe is the operator's self-hosted second brain and system of record — and
+yours: recall from it before acting, record as you go. Keep no parallel copy
+in local files (CLAUDE.md, auto-memory); Scribe holds the single copy.
 
-Hierarchy: Project -> Milestone -> Task/Note.
+Hierarchy: Project -> Milestone -> Task/Note. The map, by purpose:
+- ORIENT: enter_project(id) at session start — rules, open tasks, recent
+  notes, Systems and design system in one call.
+- DO: create_task. Fixed a problem? kind="issue" (symptom -> root cause ->
+  fix), never a work-log line on an unrelated task. Log with add_task_log;
+  keep status honest — in_progress on start, done on finish.
+- PLAN work with an arc: start_planning. The plan IS a milestone; each step is
+  a child task, not a checkbox. No local plan .md files.
+- CAPTURE: create_note. RECALL: search first, before answering about the
+  operator's work or opening a task — assume prior art exists, and pass the
+  active project_id to stay in scope.
+- WHERE work happens: Systems. Tag records with system_ids as you write;
+  create_system when the area is unmodelled.
+- HOW to work: rules are pull-only and binding — call list_always_on_rules()
+  yourself at session start.
+- UI: the project's design system is binding — resolve_design_system /
+  get_design_system_stylesheet before hand-writing a value.
+- REUSE: search snippets before writing a helper; record what you build with
+  create_snippet; classify shapes against canon (classify_shapes) — a
+  consumer map is rows, never prose. Saved procedures are Processes (follow
+  verbatim). Deletes are trash-recoverable.
 
-What each part is for, and when to reach for it:
-- Project: the top-level container for a body of work.
-- Milestone: groups related tasks within a project toward a goal (status
-  active/done). A milestone is ALSO the home of a plan — its `body` holds the
-  design/intent (Goal/Approach/Verification) and its child tasks are the steps.
-  Use one when a chunk of work needs its own arc.
-- Task: a unit of actionable work with a lifecycle (status
-  todo/in_progress/done/cancelled, optional priority). A task is a note with a
-  status — reach for one when there is something to DO. Record progress over
-  time with work-logs (add_task_log) rather than rewriting the body.
-- Issue: a task whose kind is corrective — a problem you fixed or are fixing, as
-  opposed to productive `work`. Create it with create_task(kind="issue"); the
-  body carries symptom → root cause → fix. It has the full task lifecycle, and
-  can link the originating task it arose from (arose_from_id) and the System(s)
-  it touches (system_ids). Reach for one whenever you fix something — even in
-  passing — instead of burying the fix in another task's work-log.
-- Plan: a MILESTONE acting as a plan container — HOW you'll execute a chunk of
-  work. The design/intent lives in the milestone `body`; each step is its own
-  child task (create_task(milestone_id=...)), tracked with status + work-logs —
-  NOT a checkbox buried in the body. Create one with start_planning when the
-  work has an arc (same test as a milestone, above) and you want the approach
-  reviewable before you start; read it back with get_milestone (body + steps).
-  Work without an arc is a task, not a plan. (The old kind=plan task is retired
-  — some historical plan-tasks still exist and remain readable, but don't
-  create new ones.)
-- Note: durable free-form knowledge — reference material, decisions, logs of
-  what happened.
-  No lifecycle, not actionable. Reach for one to CAPTURE something worth keeping.
-- Design system: the visual standards a project's UI is built from — design
-  tokens (name + value per mode) plus the prose a token table cannot hold
-  (aesthetic, voice, what is out of scope). Systems INHERIT: a child holds only
-  what it changes and the chain supplies the rest, so a family's house style and
-  one app's departures from it are the same structure at two depths. A project
-  points at one with set_project_design_system, and enter_project then hands it
-  back with the guidance chain-merged. Treat it as binding for UI work: reach
-  for a token (resolve_design_system / get_design_system_stylesheet) before
-  writing a colour, size, radius or duration by hand. Do NOT record a design
-  system as a rulebook — rules are for behaviour, and tokens kept as prose
-  cannot be resolved, inherited, rendered to a stylesheet, or checked against
-  code.
-- System: a per-project, reusable, self-describing subsystem/area — the
-  project's vocabulary for WHERE work happens. enter_project returns the list.
-  TAG AS YOU WRITE: when you create or meaningfully update a note, task, or
-  snippet, ask which of those areas it is about and pass system_ids. The test:
-  would someone investigating that subsystem want this record in the pile
-  list_system_records returns? Cross-cutting records take several; a record
-  about no particular area takes none — don't force it. If the area a record
-  describes has no System yet, CREATE it (create_system: name + a one-paragraph
-  charter) and tag the record — a subsystem that exists in the code deserves a
-  System the moment two records would share it, the same two-or-more test
-  snippets use; don't wait to be asked to name an area that plainly exists.
-  Read a subsystem back with list_system_records, or search(system_id=...) for
-  a ranked cut.
-- Reference note vs dev-log — STATE vs CHRONICLE. A dev-log records what
-  HAPPENED: write it once, never rewrite it. A durable finding — how a
-  subsystem works, a measured number, an architecture fact — belongs in that
-  System's REFERENCE NOTE ("«System name» — reference", tagged to the System),
-  which is UPDATED IN PLACE as the facts change. Updating loses nothing: every
-  meaningful edit is snapshotted (note versions are the changelog). Create the
-  reference note if the System lacks one; update it if it exists; have the
-  dev-log [[link]] it rather than restating state. State smeared across dated
-  logs is unreachable by search — sixteen near-identical dev-logs tie, and no
-  ranking can pick the right one, because no right one exists.
+A task is a note with status (*_note vs *_task tools).
+Creates are duplicate-gated: a near-match BLOCKS and returns the existing
+id — update it, don't force. shared:true records are another user's — a
+suggestion, not the operator's settled practice.
 
-Mechanics:
-- Notes and Tasks share a model; tasks are notes with is_task=True.
-- Use the *_note tools for notes, the *_task tools for tasks. Don't mix them.
-- Tags are plain strings (no `#` prefix). Empty list clears tags; omit to leave
-  unchanged on updates.
-- For optional integer FKs (project_id, milestone_id, parent_id), use 0 to mean
-  "not set". On update_task, -1 clears an existing FK (e.g. milestone_id=-1
-  removes the task from its milestone); 0 leaves it unchanged.
-
-Reach for Scribe to RECALL, not just to record. Scribe is a second brain —
-its value is mostly in what it already holds, so make searching it a reflex,
-not something you wait to be asked for:
-- Before you answer a question about the user's work, or start a task, search
-  Scribe first (search / list_tasks / list_notes). Assume relevant prior work
-  already exists — a related task, an earlier decision, a prior note — and look
-  before you re-derive it or open a duplicate.
-- Before creating a task, search for an existing one (search content_type=
-  'task') — don't open a second task for work already tracked.
-- create_note / create_task enforce this: if a title- or meaning-similar record
-  already exists in the same project, the call is BLOCKED and returns
-  {"duplicate": true, "existing_id": ...} instead of creating. UPDATE that
-  record (update_note / update_task / add_task_log) rather than duplicating.
-  Only pass force=true when it's genuinely a distinct record — a duplicate both
-  bloats the store and surfaces as a stale competing copy in later searches.
-- When a note genuinely IS new but overtakes an older one, say so: pass the
-  older note's id in `supersedes` on create_note / update_note. Reach for it on
-  a re-measurement, a decision that reverses an earlier one, a dev-log covering
-  ground a previous one covered. The old note stays readable and keeps its
-  place; it stops competing for the same question and arrives labelled. This is
-  the third answer alongside update-instead and force: not everything that
-  resembles an existing record should be folded into it, and not everything
-  distinct should compete with it forever. If a result carries `superseded_by`,
-  a later note claims to have brought it up to date — read it as what was true
-  when written and open the newer one before acting.
-- Scope to the project in scope. When a project is active (you called
-  enter_project), pass its project_id to search / list_tasks / list_notes so
-  results stay inside that project. Querying with no project_id pulls in every
-  project and bleeds unrelated work into the session — only do it for a
-  deliberate cross-project sweep. get_recent takes no project filter and spans
-  every project; when one is active, prefer the scoped list_* tools over it.
-  And this is not only about reads: once a project is in scope, only reference
-  or offer work on THAT project — don't surface or propose work from other
-  projects unless the operator widens scope. If something clearly belongs to a
-  different project, say so and ask before switching; never silently operate
-  cross-project. The active project does not stick on the server (each call is
-  self-contained); carrying its id forward is on you.
-
-Keep task state honest — this is what makes the project a trustworthy record:
-- When you begin working a task, set it to in_progress (update_task
-  status=in_progress).
-- Log progress as you go with add_task_log — at meaningful steps, not saved up
-  for the end.
-- The moment a task's work is complete, set it done. Never leave finished work
-  at todo/in_progress — an out-of-date status makes Scribe misrepresent what's
-  left to do.
-- At a meaningful point — finishing a task, or hitting or discovering a problem
-  that changes direction — write a short dated note on the project (create_note)
-  capturing what happened (the pivots, not just the wins), and set the finished
-  task to done.
-- When you fix a problem — even one solved in passing — record it as its own
-  issue (create_task(kind="issue")) with symptom → root cause → fix in the body,
-  NOT as a work-log line on whatever task happened to be open. An issue is
-  corrective work with its own lifecycle; recording it discretely (optionally
-  linked via arose_from_id to the task it came from, and system_ids to the
-  subsystem it touches) is what makes it findable so it isn't diagnosed from
-  scratch next time.
-
-Compaction hygiene — recommend compacting at clean seams. Because you record
-progress as you go, a context compaction is SAFE: the durable state lives in
-Scribe (task status, work-logs, decision notes), not the transcript, so it
-survives the summary. Use this rather than letting auto-compaction fire mid-task:
-- At the end of a coherent block of work (a task closed, a plan phase finished)
-  in a long session, first make sure in-flight state is actually in Scribe —
-  update task status, add a work-log, capture any decision as a note. Surface
-  the few things worth logging before suggesting the compact.
-- Then tell the operator it's a good, safe moment to /compact, naming what you
-  logged ("logged to #X/#Y — safe to /compact, nothing will be lost"). You
-  cannot run /compact yourself; surface the recommendation and let them decide.
-- Recommend it at genuine seams, not every turn. The next session's start will
-  prompt you to reload your bearings from Scribe — so a clean-seam compact plus
-  that reload loses nothing.
-
-Scribe maintains a Rulebook system (Rulebook -> Topic -> Rule). Rules carry
-an actionable statement plus optional Why and How-to-apply context. At the
-start of any session that touches Scribe, call list_always_on_rules() to
-load the standing rules — treat them as binding. When you also have a project
-in scope, get_project(id) returns applicable_rules (rules from rulebooks the
-project subscribes to) and subscribed_rulebooks; consult those too. Full text
-(Why / How-to-apply) is available via get_rule(id).
-
-Workflow and standards rules live in Scribe. When you notice a pattern
-worth codifying, call create_rule (cross-project, lands in a rulebook+topic)
-or create_project_rule (one project only, no rulebook ceremony). Do NOT add
-new engineering rules to CLAUDE.md or to ~/.claude/.../memory/feedback_*.md
-— those stores are reserved for facts about the user (preferences, role,
-communication style) and codebase onboarding pointers, respectively. Before
-creating a rule, call list_always_on_rules and list_rules(project_id=...) to
-avoid duplicates.
-
-Choose a rule's home by WHO it should bind, and keep each home's rules at the
-right altitude:
-  - Always-on rulebook (a rulebook flagged always_on) — universal norms that
-    bind EVERY one of your projects. Reserve for cross-project standards.
-  - Subscribed rulebook (always_on off; projects opt in via
-    subscribe_project_to_rulebook) — a reusable, THEMED module of general
-    rules that binds only the projects which subscribe. Its rules must make
-    sense for every project that could subscribe, never one specific project
-    (e.g. a code-review checklist, or a compliance regime a category of
-    projects shares — no rule names a single app).
-  - Project rule (create_project_rule) — anything specific to ONE project.
-Both rulebook tiers are SHARED, so their rules stay general; the difference
-between them is REACH (all projects vs opt-in by theme), not generality. Rule
-of thumb: names a specific project's files/paths/quirks -> project rule; a
-standard a CATEGORY of projects shares -> subscribed rulebook; a universal
-norm -> always-on rulebook. Coordinate with the operator on which home fits.
-
-Before writing a rule, check whether another entity already models the thing.
-A rule is prose an agent must remember and apply; the other entities are
-structure a tool can resolve, render and check. Visual standards are a DESIGN
-SYSTEM, not a rulebook — a token can be inherited, resolved per mode, rendered
-to a stylesheet and diffed against code, and none of that survives being
-written as a rule. A repeatable procedure is a PROCESS. Reusable code is a
-SNIPPET. Reach for a rule when the thing genuinely is a standing instruction
-about how to work, and nothing else can hold it.
-
-Rules are pull-only: CALL list_always_on_rules() YOURSELF at the start of a
-session, before substantive work. Do not wait to be handed them. The plugin's
-SessionStart hook also pushes the always-on rules + active-project context, but
-that is a delivery optimisation, not the bridge — it can be absent (instance
-unreachable, key not configured, or the hook itself silently inert, which is
-what #2198 was) and its absence does not announce itself. When the push did
-arrive, the pull costs one redundant call; when it didn't, skipping the pull
-means working without the operator's binding rules and having no signal that
-you are. Those two costs are not comparable, so pull.
-
-One thing NOT to do: don't bridge Scribe into a session by writing to the
-host's native memory. That explicit pull IS the bridge — it is written into
-every instruction surface the session already loads, so it needs no pointer on
-disk. So do NOT create or refresh a "rules live in Scribe" pointer in
-CLAUDE.md / AGENTS.md / ~/.claude memory, and do NOT keep rules, recall, or
-plans in those stores in parallel with Scribe — Scribe holds the single copy,
-and a pointer Scribe cannot update is one that goes stale without anyone
-noticing. Native auto-memory stays for facts about the user; CLAUDE.md for
-codebase onboarding. Never make Scribe's correctness depend on the operator
-disabling a native function (e.g. autoMemoryEnabled): the plugin must work with
-auto-memory at its default. If the plugin is ever removed the session loses both
-the push and these instructions, and rebuilds context over time — an acceptable
-cost, and far better than a silent settings change the operator may not know
-about.
-
-When you are working on a specific project, call enter_project(project_id)
-ONCE at session start (or whenever the active project changes). It returns the
-project, its applicable_rules + project_rules + subscribed_rulebooks, milestone
-summary, open tasks, and recent notes — everything you need to know the lay of
-the land before mutating. Don't call get_project + get_applicable_rules + a
-search separately when enter_project already composes them.
-
-Don't wait to be told which project you're in. At the start of a session that
-touches Scribe — or the moment work clearly belongs to a project but none is in
-scope — bootstrap project context proactively: search for a related existing
-project (search / list_projects, matching on the work's subject, the repo or
-directory name, and recent activity). If you find a confident match, propose it
-and call enter_project once the operator confirms. If nothing matches, offer to
-create a project, confirming its name and goal first. Always confirm before
-adopting or creating — never do either silently, and never guess a project into
-existence. Once a project is in scope, the enter_project handshake and the
-host-memory pointer step above both apply.
-
-When work DOES get a plan, Scribe is the plan's canonical home: it is a
-milestone (see the Plan entry above), created with start_planning and written
-into with update_milestone + child tasks. If a habit tells you to save a plan or
-spec to a local `.md` file, that's superseded here — the milestone is the
-record, not a file on disk. Whether a given piece of work wants a plan at all is
-a separate question, answered by the arc test above and by the writing-plans
-skill; these instructions do not mandate one.
-
-Deletes are recoverable: every delete_* tool moves the entity (and its
-descendants) to the trash and returns a deleted_batch_id. Use list_trash() to
-see trashed batches, restore(deleted_batch_id) to undo a deletion, and
-purge_trash(deleted_batch_id, confirmed=True) for a permanent delete. Trash
-auto-purges after the operator's retention window.
-
-Scribe stores reusable Processes — saved prompts/workflows (note_type
-"process"), e.g. a drift audit or a DRY pass. When the operator says "run the
-X process" or otherwise references a saved process, call list_processes() /
-get_process(name) and follow the returned prompt verbatim, including any
-"clarify first" steps it contains. Author a new one with create_process(title,
-body); edit with update_process; retire one with delete_process (recoverable —
-it goes to the trash like anything else). A near-duplicate is refused at create
-time, because every Process becomes a skill file that auto-surfaces on the
-operator's machine: two near-identical procedures don't merely bloat the record,
-they compete to be followed.
-
-Scribe also stores Snippets — reusable functions/components recorded once for
-recall (note_type "snippet"): a name, language, signature, canonical location
-(repo · path · symbol), a one-line "when to reach for it", and the code. They
-are ordinary embedded notes, so a recorded snippet also surfaces through the
-same search + proactive recall as everything else. Two reflexes: (1) before you
-write a new helper/utility/component, search first (list_snippets(q=...) or
-search) — reuse the prior art with get_snippet(id) instead of re-deriving a
-one-off; (2) the moment you build or notice something reusable, record it with
-create_snippet(name, code, when_to_use, language, signature, repo, path, symbol,
-project_id, system_ids) so a later session is offered it. Make when_to_use sharp
-— it becomes the title, which is what a recall menu shows. Edit an existing one
-with update_snippet rather than recording a second copy; when the same reusable
-thing already exists as several one-offs, unify them into one canonical record
-with merge_snippets (it folds every call site in as a location and trashes the
-duplicates). Keep the record honest: a snippet whose details have gone stale can
-be corrected with update_snippet (an empty string clears a field), and one that
-is wrong or obsolete should be retired with delete_snippet — a bad snippet keeps
-being offered as prior art, which costs more than none at all.
-
-Scribe is multi-user, so some records belong to other people. Anything another
-user owns comes back marked `shared: true` with an `owner`. Treat a shared
-record as THAT PERSON'S SUGGESTION, never as the operator's settled practice:
-weigh it on its merits, attribute it when you reference it, and ask before
-adopting it or acting on it. This matters most for a shared Process — do not run
-one as written; describe what it would do and get the operator's go-ahead.
-Records shared directly with the operator are also deliberately search-only:
-they surface when you look for them (pass a query), not in plain lists, so
-nobody else's material arrives unasked. Editing another user's record needs an
-editor or admin share from them; a read-only share is refused, and the right
-answer is usually to record the operator's own version rather than to push.
-
-When developing Scribe itself, honor its multi-user sharing ACL: scope every
-read and mutation of user data by owner + shares — never assume a single
-operator. "Works for one user" is not done.
+This is only a map — the client injects ~2k chars and cuts the rest. Each
+tool's description carries its full contract: read it when you load the
+tool, and trust it over habit.
 """
 
 
@@ -350,6 +110,9 @@ _READ_ONLY_TOOLS = frozenset({
     # Which repos map to which project. Read-only by nature; bind_repo /
     # unbind_repo are the writes.
     "list_repo_bindings",
+    # The shape ledger's todo query (#2789). Reads only — classify_shapes is
+    # the write, and it is deliberately NOT here.
+    "list_shapes", "shape_history",
 })
 
 # Read-SHAPED tools that must NOT be reachable with a read key — a getter that
@@ -407,6 +170,46 @@ def _body_calls_write_tool(body: bytes) -> bool:
     return False
 
 
+class StrictArgsFastMCP(FastMCP):
+    """A FastMCP that REJECTS tool calls carrying undeclared arguments.
+
+    FastMCP validates arguments with a pydantic model built from the tool
+    signature, and pydantic's default extra-field policy is "ignore" — so a
+    misnamed argument simply vanishes and the tool runs with that field's
+    default. On the create/update tools the default is "", which turns a
+    plausible near-miss (`content=` for `body=`, primed by add_task_log's
+    `content`) into SILENT DATA LOSS: the call reports success and stores an
+    empty body, leaving a record search cannot see (#2709). Two notes were
+    persisted body-less that way before anyone noticed.
+
+    An error the caller sees once is strictly better than data half-written
+    forever, so the policy is applied to every tool, not just the two that
+    bit: nothing here knows tool semantics, only that an argument nobody
+    declared cannot have been meant to be dropped.
+    """
+
+    async def call_tool(self, name, arguments):
+        try:
+            tool = self._tool_manager.get_tool(name)
+        except Exception:
+            tool = None  # unknown tool → let upstream produce its own error
+        if tool is not None:
+            declared = set((tool.parameters or {}).get("properties", {}))
+            unknown = sorted(set(arguments or {}) - declared)
+            if unknown:
+                hints = []
+                for arg in unknown:
+                    close = difflib.get_close_matches(arg, sorted(declared), n=1)
+                    suggestion = f" (did you mean '{close[0]}'?)" if close else ""
+                    hints.append(f"'{arg}'{suggestion}")
+                raise ValueError(
+                    f"{name} does not accept argument(s) {', '.join(hints)}. "
+                    f"It accepts: {', '.join(sorted(declared))}. Nothing was "
+                    "created or changed — retry with the declared names."
+                )
+        return await super().call_tool(name, arguments)
+
+
 def build_mcp_server() -> FastMCP:
     """Build the FastMCP instance with all tools registered.
 
@@ -427,7 +230,7 @@ def build_mcp_server() -> FastMCP:
     # every request self-contained (bearer-auth only), so a post-deploy
     # reconnect just works. Trade-off: no server-pushed list_changed stream,
     # which we don't use — tools are re-fetched on reconnect anyway.
-    mcp = FastMCP(
+    mcp = StrictArgsFastMCP(
         "scribe",
         instructions=_INSTRUCTIONS.strip(),
         stateless_http=True,

src/scribe/mcp/tools/__init__.py

@@ -5,8 +5,8 @@ to a FastMCP instance. `register_all(mcp)` is the single entry point called
 from `mcp.server.build_mcp_server`.
 """
 from scribe.mcp.tools import (
-    design_systems, milestones, notes, processes, projects, recent, repos, rulebooks, search, snippets,
-    systems, tags, tasks, trash,
+    design_systems, milestones, notes, processes, projects, recent, repos, rulebooks, search, shapes,
+    snippets, systems, tags, tasks, trash,
 )
 
 
@@ -24,5 +24,6 @@ def register_all(mcp) -> None:
     repos.register(mcp)
     processes.register(mcp)
     snippets.register(mcp)
+    shapes.register(mcp)
     rulebooks.register(mcp)
     trash.register(mcp)

src/scribe/mcp/tools/design_systems.py

@@ -39,6 +39,12 @@ async def create_design_system(
 ) -> dict:
     """Create a design system, optionally inheriting from another.
 
+    This — not a rulebook — is where visual standards live: a token can be
+    inherited, resolved per mode, rendered to a stylesheet and checked against
+    code, and none of that survives being written as rule prose. Once a
+    project points at one (set_project_design_system), treat it as binding for
+    that project's UI work.
+
     Args:
         title: What this system is — a house style, or one app within it
             (required).

src/scribe/mcp/tools/milestones.py

@@ -57,9 +57,7 @@ async def get_milestone(milestone_id: int) -> dict:
     return {
         "milestone": out,
         "steps": [t.to_dict() for t in steps],
-        "applicable_rules": applicable["rules"],
-        "subscribed_rulebooks": applicable["subscribed_rulebooks"],
-        "applicable_rules_truncated": applicable["truncated"],
+        **rulebooks_svc.rules_payload(applicable),
     }
 
 

src/scribe/mcp/tools/notes.py

@@ -14,6 +14,7 @@ Sentinel conventions (inherited from existing fable-mcp tools):
 from __future__ import annotations
 
 from scribe.mcp._context import current_user_id
+from scribe.mcp.tools import systems as systems_tools
 from scribe.services import access as access_svc
 from scribe.services import dedup as dedup_svc
 from scribe.services import notes as notes_svc
@@ -32,10 +33,15 @@ async def list_notes(
 ) -> dict:
     """List notes (non-task documents) stored in Scribe.
 
-    Optionally filter by a single tag (plain string, no # prefix) or a keyword
-    search against title and body. Results are ordered by last-updated descending.
+    Optionally filter by a single tag (plain string, no # prefix) or by
+    `search_text`, which matches on MEANING — the same semantic match every
+    search surface uses (#2462; keyword ILIKE is only the fallback when the
+    embedder is down). With `search_text`, results order by relevance; without
+    it, by last-updated descending. Reaches your records plus shared-project
+    records, like every other list.
 
-    Use search for semantic/meaning-based lookup instead of exact keyword search.
+    Prefer `search` for a pure lookup — it returns scores and reaches
+    everything readable; this adds the lifecycle filters on top.
 
     Args:
         project_id: Scope to one project. PASS THE ACTIVE PROJECT'S ID whenever a
@@ -56,35 +62,13 @@ async def list_notes(
     return {"notes": [n.to_dict() for n in rows], "total": total}
 
 
-async def _attach_supersession(uid: int, note_id: int, data: dict) -> None:
-    """Add both directions of the supersession relation to a note payload.
-
-    Both, because they answer different questions and only one of them is
-    obvious. `supersedes` is what the author claimed. `superseded_by` is what a
-    READER needs and what the note itself cannot know — a stale record handed
-    over without that marker gets acted on confidently, which is worse than
-    never surfacing it.
-
-    Omitted entirely when empty, so an ordinary note's payload doesn't grow two
-    permanently-empty lists. A field that always says nothing trains readers to
-    skip fields, which is the lesson `consolidated_at` cost us (#2483).
-    """
-    rel = await supersession_svc.get_relations(uid, note_id)
-    if rel["supersedes"]:
-        data["supersedes"] = rel["supersedes"]
-    if rel["superseded_by"]:
-        data["superseded_by"] = rel["superseded_by"]
-        data["superseded_note"] = (
-            "A later note claims to bring this up to date — see superseded_by. "
-            "Read this as what was true when written, and check the newer one "
-            "before acting on it."
-        )
-
 
 async def get_note(note_id: int) -> dict:
     """Fetch the full content of a single Scribe note by its ID.
 
-    Returns id, title, body (markdown), tags, project_id, created_at, updated_at.
+    Returns id, title, body (markdown), tags, project_id, created_at,
+    updated_at — plus `systems` (the areas this note is filed under) or, for
+    an untagged project note, the `systems_hint` question.
     A note another user shared with you also carries `shared`, `owner` and
     `permission` — read it as their suggestion, not as settled practice you set.
 
@@ -105,7 +89,10 @@ async def get_note(note_id: int) -> dict:
     # snippets would leave those permanently at zero pulls and make them look
     # like dead weight next to snippets that merely had a counter (#2085).
     record_pulled(user_id=uid, note_id=int(note.id), source="mcp_get_note")
-    await _attach_supersession(uid, note_id, out)
+    await supersession_svc.attach_relations(uid, note_id, out, hint=True)
+    await systems_tools.attach_systems(
+        uid, getattr(note, "user_id", uid) or uid, out, note.id, note.project_id
+    )
     return out
 
 
@@ -144,7 +131,10 @@ async def create_note(
 
     Returns the created note object including its assigned id, OR — when a
     near-duplicate is found and force is false — {"duplicate": true,
-    "existing_id": ..., "message": ...} and nothing is created.
+    "existing_id": ..., "message": ...} and nothing is created. A tagged
+    record shows its `systems`; created untagged in a project, the response
+    carries the `systems_hint` question instead — answer it: tag the record,
+    create the missing System, or deliberately leave it untagged.
     """
     uid = current_user_id()
     if not force:
@@ -171,11 +161,8 @@ async def create_note(
             # not-found, and leave the note rather than silently rolling it back.
             raise ValueError(str(exc)) from exc
     data = note.to_dict()
-    if system_ids:
-        data["systems"] = [
-            s.to_dict() for s in await systems_svc.list_record_systems(uid, note.id)
-        ]
-    await _attach_supersession(uid, note.id, data)
+    await systems_tools.attach_systems(uid, uid, data, note.id, project_id or None)
+    await supersession_svc.attach_relations(uid, note.id, data, hint=True)
     return data
 
 
@@ -223,11 +210,10 @@ async def update_note(
         except PermissionError as exc:
             raise ValueError(str(exc)) from exc
     data = note.to_dict()
-    if system_ids is not None:
-        data["systems"] = [
-            s.to_dict() for s in await systems_svc.list_record_systems(uid, note_id)
-        ]
-    await _attach_supersession(uid, note_id, data)
+    await systems_tools.attach_systems(
+        uid, getattr(note, "user_id", uid) or uid, data, note_id, note.project_id
+    )
+    await supersession_svc.attach_relations(uid, note_id, data, hint=True)
     return data
 
 

src/scribe/mcp/tools/processes.py

@@ -49,6 +49,15 @@ async def create_process(
 ) -> dict:
     """Create a stored process (a reusable saved prompt).
 
+    AUTHOR IT AS A SHAPE, NOT A SCRIPT. A process's value is the accumulated
+    procedure — the steps, the taxonomy, the quality bar, the failure modes
+    worth guarding. It must not force anything the invoking conversation
+    didn't choose: no embedded approach mandates, no pre-granted approvals
+    (a fan-out opt-in, a permission to act), no assumptions that overwrite
+    the live request's intent. The conversation that invokes it supplies the
+    parameters and always wins where they disagree; write clarify steps to
+    seed from what the operator already said, not to re-ask it.
+
     Args:
         title: Process name, e.g. "Drift Audit" (required).
         body: The full prompt to run later (markdown). Required.
@@ -87,6 +96,16 @@ async def get_process(name_or_id: str) -> dict:
     fire mechanism. The operator says "run the <name> process"; call this and
     follow the returned body (including any 'clarify first' steps it contains).
 
+    COMPOSITION CONTRACT — a process is the PROCEDURE, not the whole prompt.
+    The conversation that invoked it supplies the PARAMETERS: fold the
+    operator's live constraints, scope, and focus areas into the procedure,
+    and wherever the two disagree, the live instructions override the
+    process's defaults. A 'clarify first' step asks only what the
+    conversation has NOT already answered — confirm your interpretation of
+    what was said rather than re-asking it, and turn stated concerns (a
+    posture, a hardware budget, a subsystem under suspicion) into lenses the
+    procedure applies, not text it discards.
+
     Resolution: numeric id → exact (case-insensitive) title → substring. On an
     ambiguous substring match, the best (most-recent) match is returned with an
     `other_matches` list so you can disambiguate with the operator.

src/scribe/mcp/tools/projects.py

@@ -17,6 +17,8 @@ keeps working.
 from __future__ import annotations
 
 from scribe.mcp._context import current_user_id
+from scribe.mcp.tools import systems as systems_tools
+from scribe.services import coverage as coverage_svc
 from scribe.services import design_systems as design_systems_svc
 from scribe.services import milestones as milestones_svc
 from scribe.services import notes as notes_svc
@@ -24,6 +26,8 @@ from scribe.services import projects as projects_svc
 from scribe.services import rulebooks as rulebooks_svc
 from scribe.services import systems as systems_svc
 from scribe.services import trash as trash_svc
+from scribe.services.background import spawn
+from scribe.services.note_usage import record_surfaced
 
 
 async def list_projects() -> dict:
@@ -55,7 +59,19 @@ async def enter_project(project_id: int) -> dict:
 
     Returns a dict with keys: project, milestone_summary, applicable_rules,
     project_rules, subscribed_rulebooks, applicable_rules_truncated,
-    open_tasks, recent_notes, design_system, systems.
+    open_tasks, recent_notes, design_system, systems, pattern_coverage —
+    plus systems_bootstrap, present only when it applies (see below).
+
+    `pattern_coverage` (usually null) is the shape-accounting line — how many
+    of the bound repo's extracted shapes carry a classification against canon
+    (note 2786) — e.g. "shape accounting: 3100/4573 shapes accounted for —
+    12 canonical · 2900 instance (estimate, computed 2026-08-19); 1473
+    unclassified, largest: internal/api". Unclassified IS the todo: as you
+    touch code in those areas, classify the shapes you can (instances of
+    recorded canon, deliberate variants, one-off exemptions) and record the
+    canon that's missing with create_snippet. A null line on a forge-served
+    project usually means the ledger is seeding in the background (entering
+    triggers it); refresh_pattern_coverage computes it on the spot.
 
     `systems` is the project's vocabulary of named subsystems/areas. It is
     returned here so you can TAG as you write: when creating or meaningfully
@@ -64,11 +80,30 @@ async def enter_project(project_id: int) -> dict:
     create it with create_system rather than leaving the area unmodelled. Read
     a subsystem's accumulated records with list_system_records.
 
+    `systems_bootstrap` appears ONLY when the project has many records and no
+    Systems at all — act on it before starting other work: create_system a
+    starter vocabulary from the areas the project's records name, directly
+    and without asking permission, preferring the standard names the ask
+    lists. It stops appearing the moment the first System exists.
+
     `design_system` is null unless the project points at one. When present it
     carries the chain-merged guidance (the house style AND this project's
     departures from it) plus a summary of the token set — treat it as binding
     for any UI you write, and pull the values with resolve_design_system or
     get_design_system_stylesheet before reaching for a literal.
+
+    Entering a project also SCOPES the session: reference and offer work on
+    this project only, and pass its id to search / list_* so results stay
+    inside it. If something clearly belongs to a different project, say so and
+    ask before switching — never silently operate cross-project. The active
+    project does not stick on the server (each call is self-contained);
+    carrying its id forward is on you.
+
+    Don't wait to be told which project is in scope. When work clearly belongs
+    to a project but none is entered, look for a match yourself (list_projects
+    / search on the repo or subject), propose it, and enter it once the
+    operator confirms; if nothing matches, offer to create one — confirming
+    name and goal first, never guessing a project into existence.
     """
     uid = current_user_id()
     project = await projects_svc.get_project(uid, project_id)
@@ -94,6 +129,29 @@ async def enter_project(project_id: int) -> dict:
     # agent when it writes — which it never was, and tagging stopped within
     # three days of the feature landing (#2546's audit).
     systems = await systems_svc.list_systems(uid, project_id)
+
+    # The arrival-moment half of the bootstrap ask (#2683): session start is
+    # when the agent has just read the project map and is not yet deep in a
+    # task — the one moment minting a starter vocabulary is cheap. The
+    # write-moment half rides untagged-record responses (attach_systems);
+    # both retire the instant the first System exists.
+    systems_bootstrap = None
+    if not systems:
+        systems_bootstrap = await systems_tools.bootstrap_systems_ask(
+            uid, project_id
+        )
+
+    # Probably the largest surfacing by volume, and it emitted nothing — so
+    # the pulls it caused floated unattributed and the surfaced:pulled ratio
+    # ran against a denominator missing its biggest contributor (#2477). An
+    # AMBIENT source: these are top-N-by-recency, not a ranked choice, and the
+    # readout counts them apart so dead-weight detection isn't poisoned by
+    # "recently updated in a project you opened".
+    record_surfaced(
+        user_id=uid,
+        note_ids=[int(t.id) for t in open_tasks] + [int(n.id) for n in recent_notes],
+        source="enter_project",
+    )
     # A project need not have one, and most installs won't — null is ordinary
     # here, not a missing prerequisite.
     design_system = None
@@ -102,8 +160,27 @@ async def enter_project(project_id: int) -> dict:
             uid, project.design_system_id,
         )
 
-    return {
+    # Cache read ONLY — computing coverage moves a repo tarball and never
+    # belongs in this request path. Null is the ordinary state (no forge, or
+    # never computed); the line appears exactly when there is evidence. Read
+    # on the OWNER's id: bindings and the cache live with the project owner.
+    coverage = await coverage_svc.cached_coverage(
+        project.user_id or uid, project_id
+    )
+    # Arrival self-seed (#2802): a ledger that is absent or stale refreshes in
+    # the BACKGROUND — entering is the moment the number is wanted, and the
+    # UI button must not be the only path. This enter stays fast; the next
+    # one carries the line. Forge-less projects exit the seed quietly.
+    spawn(
+        coverage_svc.refresh_if_stale(
+            project.user_id or uid, project_id, cached=coverage
+        ),
+        site="enter_project.coverage_seed",
+    )
+
+    out = {
         "project": project.to_dict(),
+        "pattern_coverage": coverage_svc.coverage_line(coverage) if coverage else None,
         # Trimmed to what tagging needs. The full charter is get_system's job —
         # this list rides along on every session start, so it stays lean.
         "systems": [
@@ -115,12 +192,7 @@ async def enter_project(project_id: int) -> dict:
         ],
         "design_system": design_system,
         "milestone_summary": milestone_summary,
-        "applicable_rules": applicable["rules"],
-        "project_rules": applicable.get("project_rules", []),
-        "suppressed_rules": applicable.get("suppressed_rules", []),
-        "suppressed_topics": applicable.get("suppressed_topics", []),
-        "subscribed_rulebooks": applicable["subscribed_rulebooks"],
-        "applicable_rules_truncated": applicable["truncated"],
+        **rulebooks_svc.rules_payload(applicable),
         "open_tasks": [
             {
                 "id": t.id, "title": t.title, "status": t.status,
@@ -137,6 +209,11 @@ async def enter_project(project_id: int) -> dict:
             for n in recent_notes
         ],
     }
+    # Attached only when it applies — a key that usually says null trains
+    # readers to skip it (#2483), and this one exists to be acted on.
+    if systems_bootstrap:
+        out["systems_bootstrap"] = systems_bootstrap
+    return out
 
 
 async def get_project(project_id: int) -> dict:
@@ -157,12 +234,7 @@ async def get_project(project_id: int) -> dict:
     applicable = await rulebooks_svc.get_applicable_rules(
         project_id=project_id, user_id=uid,
     )
-    data["applicable_rules"] = applicable["rules"]
-    data["applicable_rules_truncated"] = applicable["truncated"]
-    data["subscribed_rulebooks"] = applicable["subscribed_rulebooks"]
-    data["project_rules"] = applicable.get("project_rules", [])
-    data["suppressed_rules"] = applicable.get("suppressed_rules", [])
-    data["suppressed_topics"] = applicable.get("suppressed_topics", [])
+    data.update(rulebooks_svc.rules_payload(applicable))
     return data