Add renovate.json

.forgejo/workflows/ci.yml

@@ -178,15 +178,6 @@ jobs:
       - name: Design token check
         run: python3 scripts/check_design_tokens.py --report-literals
 
-      # Dangling styles: an element whose classes have only modifier rules and
-      # no base — a deleted CSS rule that left its `:hover` behind. Two shipped
-      # this way (a link rendering as raw browser blue, a flex row whose parent
-      # was gone so every child stacked). Neither is visible to vue-tsc; a dead
-      # style typechecks perfectly. Reported, not gated — a bare wrapper is
-      # legitimate, so the signal is the count growing.
-      - name: Dangling style check
-        run: python3 scripts/check_dangling_styles.py
-
   test:
     name: Python tests
     if: github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')
@@ -225,16 +216,6 @@ 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"

README.md

@@ -4,7 +4,7 @@ A self-hosted work system-of-record for software projects, built to be driven by
 
 ## Features
 
-Notes and tasks with a Markdown editor, sub-tasks, milestones, issues, and kanban project workspaces. Stored processes, an engineering rulebook system (with an inception step that decides what each project inherits), and semantic search with proactive knowledge-injection into Claude's context. A knowledge graph, per-user/group sharing, and a built-in MCP server (`/mcp`) plus a bundled Claude Code plugin so Claude can record and recall your work directly.
+Notes and tasks with a Markdown editor, sub-tasks, milestones, issues, and kanban project workspaces. Stored processes, an engineering rulebook system, and semantic search with proactive knowledge-injection into Claude's context. A knowledge graph, per-user/group sharing, and a built-in MCP server (`/mcp`) plus a bundled Claude Code plugin so Claude can record and recall your work directly.
 
 ## Quick Start
 

alembic/versions/0075_retire_design_rulebook_setting.py

@@ -1,47 +0,0 @@
-"""retire the two settings that designated a design source for the app itself
-
-Revision ID: 0075
-Revises: 0074
-Create Date: 2026-08-03
-
-Two keys, retired for the same reason a week apart, so they go in one change
-rather than one migration each:
-
-    design_rulebook_id    which rulebook described how this app should look
-    ui_design_system_id   which design system this app's own UI was built from
-
-Both named a design source for THE RUNNING INSTALL. The design surface is for
-the projects an install tracks, and a project already carries its own pointer
-(`projects.design_system_id`) — so an install-wide designation had nothing left
-to mean. `ui_design_system_id` was introduced by this same migration's first
-draft and never reached a deployed database; it is listed here rather than
-undone by an 0076 that would reverse a change nobody ran.
-
-Deleting settings rows by key is safe in a way dropping a column is not — the
-table is free-form key/value, so an install that never designated one simply has
-no row to delete.
-
-Downgrade cannot restore what it never recorded, so it is a no-op rather than a
-lie: the pointer lives on the project now, and always did for anyone who set it
-there.
-"""
-from alembic import op
-import sqlalchemy as sa
-
-
-revision = "0075"
-down_revision = "0074"
-branch_labels = None
-depends_on = None
-
-def upgrade() -> None:
-    op.execute(
-        sa.text(
-            "DELETE FROM settings "
-            "WHERE key IN ('design_rulebook_id', 'ui_design_system_id')"
-        )
-    )
-
-
-def downgrade() -> None:
-    pass

alembic/versions/0076_note_supersessions.py

@@ -1,115 +0,0 @@
-"""note_supersessions; drop the never-written notes.consolidated_at
-
-Revision ID: 0076
-Revises: 0075
-Create Date: 2026-08-07
-
-Step 1 of milestone #278. Structure only — nothing reads or writes the new
-table yet, and nothing behaves differently after this runs.
-
-## What the table is for
-
-Old records outrank newer ones on the same subject, because a similarity score
-cannot tell time. A note that accurately described how something worked in June
-is still accurate ABOUT June; it is just no longer the answer. Nothing recorded
-that, so nothing could act on it.
-
-The claim points FORWARD — the newer record names what it overtakes — because
-the older one cannot know it has been overtaken. Many-to-many and partial: a
-note may supersede parts of several others and be overtaken piecemeal by
-several later ones, which is why this is a table rather than a column. Both
-directions are queried: `superseded_id` answers "has this been overtaken?" at
-ranking time, `superseder_id` answers "what does this replace?" in a record
-view. An array column could serve one and not the other.
-
-CASCADE on both sides is safe because trashing is not a delete: `trash_svc`
-stamps `deleted_at`, so a trashed note keeps its claims and `restore` brings
-them back. The cascade fires only on `purge_trash`, where the row genuinely
-goes — and a claim about a row that no longer exists is not actionable.
-
-## What is being dropped, and why now
-
-`notes.consolidated_at` was written by NOTHING — no service, no route, no tool
-— while being serialised into every note and task payload as `null`. It cost a
-column, a line in every response, and worse: it IMPLIED a capability. A reader
-reasonably concludes notes can be consolidated and this records when.
-
-That reading was reasonable precisely because merge/unmerge exists for snippets
-and not for notes, so the column looked like the notes-side half of that
-feature, modelled and abandoned.
-
-It is dropped rather than repurposed for supersession, and the distinction is
-the point (#2483): consolidation folds several records into one survivor and
-destroys the originals. Merging two snippets is lossless — one helper, several
-call sites. Folding two dev-logs means writing a summary and losing what each
-actually said. Supersession is the opposite act: both records survive, and the
-older one is merely ranked behind. Smuggling one in under a column named for
-the other would have buried that difference in schema.
-
-## Downgrade
-
-Re-adds `consolidated_at` nullable, which is how it lived — so downgrade
-restores the shape, not the (nonexistent) data. Drops the table; any recorded
-supersession claims are lost, which costs ranking its input and nothing else,
-since no note's own content depends on them.
-"""
-import sqlalchemy as sa
-from alembic import op
-
-revision = "0076"
-down_revision = "0075"
-branch_labels = None
-depends_on = None
-
-
-def upgrade() -> None:
-    op.create_table(
-        "note_supersessions",
-        sa.Column("id", sa.Integer, primary_key=True),
-        sa.Column(
-            "superseder_id",
-            sa.Integer,
-            sa.ForeignKey("notes.id", ondelete="CASCADE"),
-            nullable=False,
-        ),
-        sa.Column(
-            "superseded_id",
-            sa.Integer,
-            sa.ForeignKey("notes.id", ondelete="CASCADE"),
-            nullable=False,
-        ),
-        sa.Column(
-            "created_at",
-            sa.DateTime(timezone=True),
-            server_default=sa.text("now()"),
-            nullable=False,
-        ),
-        sa.UniqueConstraint(
-            "superseder_id", "superseded_id", name="uq_note_supersessions_pair"
-        ),
-        # Declaring that a note supersedes ITSELF is meaningless, and under flat
-        # demotion it would demote a record on its own authority. Refused in the
-        # service too, with a message — this is the backstop that holds when
-        # something writes rows directly.
-        sa.CheckConstraint(
-            "superseder_id <> superseded_id", name="ck_note_supersessions_not_self"
-        ),
-    )
-    op.create_index(
-        "ix_note_supersessions_superseder", "note_supersessions", ["superseder_id"]
-    )
-    op.create_index(
-        "ix_note_supersessions_superseded", "note_supersessions", ["superseded_id"]
-    )
-
-    op.drop_column("notes", "consolidated_at")
-
-
-def downgrade() -> None:
-    op.add_column(
-        "notes",
-        sa.Column("consolidated_at", sa.DateTime(timezone=True), nullable=True),
-    )
-    op.drop_index("ix_note_supersessions_superseded", table_name="note_supersessions")
-    op.drop_index("ix_note_supersessions_superseder", table_name="note_supersessions")
-    op.drop_table("note_supersessions")

alembic/versions/0077_chunked_embeddings.py

@@ -1,54 +0,0 @@
-"""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

@@ -1,130 +0,0 @@
-"""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

@@ -1,66 +0,0 @@
-"""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

@@ -1,54 +0,0 @@
-"""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

@@ -1,70 +0,0 @@
-"""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

@@ -1,26 +0,0 @@
-"""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

@@ -1,26 +0,0 @@
-"""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

@@ -1,40 +0,0 @@
-"""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")

alembic/versions/0085_project_inception.py

@@ -1,74 +0,0 @@
-"""Project inception: the decision record + always-on rulebook exclusions (milestone 297)
-
-Revision ID: 0085
-Revises: 0084
-Create Date: 2026-08-22
-
-`projects.inception` is the WHY a project inherits what it does — NULL until
-someone decides, at which point enter_project stops asking. The new
-association `project_rulebook_exclusions` is the opt-out of a whole always-on
-rulebook for one project (the sibling of the rule/topic suppressions).
-
-Backfill: every project that exists when this runs is stamped
-via="legacy" with its CURRENT standing (no exclusions, its subscriptions,
-its design_system_id, no seed) — so the ask fires only for projects created
-after the step shipped, and nothing a running install relies on changes.
-"""
-import sqlalchemy as sa
-from alembic import op
-from sqlalchemy.dialects import postgresql
-
-revision = "0085"
-down_revision = "0084"
-branch_labels = None
-depends_on = None
-
-
-def upgrade() -> None:
-    op.add_column(
-        "projects",
-        sa.Column("inception", postgresql.JSONB(), nullable=True),
-    )
-    op.create_table(
-        "project_rulebook_exclusions",
-        sa.Column(
-            "project_id", sa.BigInteger(),
-            sa.ForeignKey("projects.id", ondelete="CASCADE"),
-            primary_key=True, nullable=False,
-        ),
-        sa.Column(
-            "rulebook_id", sa.BigInteger(),
-            sa.ForeignKey("rulebooks.id", ondelete="CASCADE"),
-            primary_key=True, nullable=False,
-        ),
-        sa.Column(
-            "created_at", sa.DateTime(timezone=True),
-            server_default=sa.text("now()"), nullable=False,
-        ),
-    )
-    # Legacy stamp: what each existing project inherits today, recorded as a
-    # decision so the inception ask does not fire on a project that has been
-    # running for months.
-    op.execute(sa.text("""
-        UPDATE projects p SET inception = jsonb_build_object(
-            'via', 'legacy',
-            'decided_at', to_jsonb(now()),
-            'decided_by', NULL,
-            'choices', jsonb_build_object(
-                'exclude_always_on_rulebooks', '[]'::jsonb,
-                'subscribe_rulebooks', COALESCE(
-                    (SELECT jsonb_agg(s.rulebook_id ORDER BY s.rulebook_id)
-                       FROM project_rulebook_subscriptions s
-                      WHERE s.project_id = p.id),
-                    '[]'::jsonb),
-                'design_system_id', to_jsonb(p.design_system_id),
-                'seed_systems', false
-            )
-        )
-        WHERE p.inception IS NULL
-    """))
-
-
-def downgrade() -> None:
-    op.drop_table("project_rulebook_exclusions")
-    op.drop_column("projects", "inception")

alembic/versions/0086_code_shape_consumers.py

@@ -1,35 +0,0 @@
-"""code_shape_consumers — the CSS consumer map (milestone 302, note 2917)
-
-Revision ID: 0086
-Revises: 0085
-Create Date: 2026-08-23
-
-CSS is watched by name, by recipe, by token and by WHAT USES IT. This table
-holds the fourth: CSS shape → the file whose markup names its class, with how
-many times. Mechanical and recomputed by every coverage sync from the repo
-archive; the analogue of code_shape_uses for styling. Cascades with the shape.
-"""
-import sqlalchemy as sa
-from alembic import op
-
-revision = "0086"
-down_revision = "0085"
-branch_labels = None
-depends_on = None
-
-
-def upgrade() -> None:
-    op.create_table(
-        "code_shape_consumers",
-        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("path", sa.Text(), nullable=False),
-        sa.Column("count", sa.Integer(), nullable=False, server_default="1"),
-        sa.Column("basis", sa.Text(), nullable=False, server_default="template"),
-        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.text("now()")),
-        sa.UniqueConstraint("shape_id", "path", name="uq_code_shape_consumers_shape_path"),
-    )
-
-
-def downgrade() -> None:
-    op.drop_table("code_shape_consumers")

alembic/versions/0087_canonical_systems.py

@@ -1,109 +0,0 @@
-"""canonical_systems — the global area vocabulary, promoted from a constant
-to a table (milestone 307 step 1, decision note 3026)
-
-Revision ID: 0087
-Revises: 0086
-Create Date: 2026-08-26
-
-The eight standard area names already existed as `STANDARD_SYSTEMS`, a tuple in
-services/systems.py that milestone 297 seeds into a project at inception. A
-constant cannot be referenced: a rule that applies across projects has nothing
-to point at, because `systems.project_id` is NOT NULL and a family rule cannot
-be chained to one project's row. This makes the vocabulary a table so it can be
-a foreign key, and adds the nullable `systems.canonical_id` that maps a
-project's local System onto it.
-
-Deliberately no `user_id`: the catalog is GLOBAL so a shared project inherits
-the vocabulary rather than re-earning it. `record_systems` is untouched — it
-joins note_id/system_id and never sees this table, so no association data
-moves, and no System's own `name` is rewritten.
-
-The seed rows are written here verbatim rather than imported from the service:
-a migration is a historical record and must keep running unchanged after the
-service's list moves on.
-"""
-import sqlalchemy as sa
-from alembic import op
-
-revision = "0087"
-down_revision = "0086"
-branch_labels = None
-depends_on = None
-
-
-# (name, slug, description) — the milestone-297 vocabulary, with the slug the
-# service computes (canonical_slug: lowercase, "&" -> "and", non-alphanumerics
-# collapsed to "-"). Charters stay generic on purpose: a project refines its
-# own System's description, never this one. Nothing here names an app, a repo,
-# a vendor or a house convention — the catalog ships to every install (rule 115).
-_SEED = (
-    ("CI & Release", "ci-and-release",
-     "How the project is verified and shipped: pipelines, runners, image/artifact builds, release tagging and rollback."),
-    ("Auth & Access", "auth-and-access",
-     "Who may do what: identity, sessions/tokens, permissions and the scoping of every read and write to the right users."),
-    ("Data Model & Storage", "data-model-and-storage",
-     "What is stored and how it is shaped: the schema, migrations, serialisation and the services that own a table's lifecycle."),
-    ("API Surface", "api-surface",
-     "The doors into the capability: HTTP routes, tool/RPC surfaces, request parsing, error envelopes and their contracts."),
-    ("UI & Design", "ui-and-design",
-     "What people see and touch: views, components, client state, and the design tokens/recipes they are built from."),
-    ("Import & Export", "import-and-export",
-     "Data crossing the boundary: backups, exports, imports, sync with other systems, file formats."),
-    ("Background Jobs", "background-jobs",
-     "Work that runs without a request: schedulers, queues, periodic ticks, retention and maintenance."),
-    ("Observability", "observability",
-     "How the system reports on itself: logging, metrics, audit trails, health and diagnostics."),
-)
-
-
-def upgrade() -> None:
-    canonical_systems = op.create_table(
-        "canonical_systems",
-        sa.Column("id", sa.Integer(), primary_key=True),
-        sa.Column("name", sa.Text(), nullable=False),
-        sa.Column("slug", sa.Text(), nullable=False),
-        sa.Column("description", sa.Text(), nullable=True),
-        sa.Column("order_index", sa.Integer(), nullable=False, server_default="0"),
-        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.text("now()")),
-        sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.text("now()")),
-        sa.Column("deleted_at", sa.DateTime(timezone=True), nullable=True),
-        sa.Column("deleted_batch_id", sa.Text(), nullable=True),
-    )
-    # Unique among LIVE rows only, so a soft-deleted entry doesn't block
-    # recreating or restoring the same area (the rules/topics convention).
-    op.create_index(
-        "uq_canonical_systems_slug", "canonical_systems", ["slug"],
-        unique=True, postgresql_where=sa.text("deleted_at IS NULL"),
-    )
-    op.bulk_insert(
-        canonical_systems,
-        [
-            {"name": name, "slug": slug, "description": description, "order_index": index}
-            for index, (name, slug, description) in enumerate(_SEED)
-        ],
-    )
-
-    op.add_column(
-        "systems",
-        sa.Column("canonical_id", sa.Integer(), nullable=True),
-    )
-    # SET NULL, not CASCADE: retiring a catalog entry must never delete a
-    # project's System along with it.
-    op.create_foreign_key(
-        "fk_systems_canonical_id", "systems", "canonical_systems",
-        ["canonical_id"], ["id"], ondelete="SET NULL",
-    )
-    op.create_index("ix_systems_canonical_id", "systems", ["canonical_id"])
-
-    # Existing Systems are left UNMAPPED on purpose. An exact-slug match would
-    # be safe, but a near miss ("CI & runners" vs "CI & Release") is a judgment
-    # call — those go through the propose/confirm path so a human approves each
-    # one, rather than being decided by a migration nobody reviews.
-
-
-def downgrade() -> None:
-    op.drop_index("ix_systems_canonical_id", table_name="systems")
-    op.drop_constraint("fk_systems_canonical_id", "systems", type_="foreignkey")
-    op.drop_column("systems", "canonical_id")
-    op.drop_index("uq_canonical_systems_slug", table_name="canonical_systems")
-    op.drop_table("canonical_systems")

alembic/versions/0088_rule_trigger_tier_tags_relations.py

@@ -1,105 +0,0 @@
-"""rules gain a trigger, a tier, canon tags and typed edges (milestone 307
-step 3, decision note 3026)
-
-Revision ID: 0088
-Revises: 0087
-Create Date: 2026-08-26
-
-A rule could not say WHEN it applies, WHICH area it is about, or WHAT other
-rule it belongs with. All three were being written as prose instead — a
-project's System description restating rule text, a rule's `why` naming the
-note that caused it, and two halves of one shape merged into a single row
-because either could surface without the other.
-
-Four additions, each replacing something that was already being said in words:
-
-- `when_to_apply` — the trigger. Nullable HERE and required at the service
-  layer, because existing rules have none and a migration cannot invent one.
-- `tier` — `always_on` (preloaded, as everything is today) or `conditional`
-  (reachable, surfaced when its trigger fires). Defaults to `always_on`, so
-  this migration changes NOTHING about which rules bind: an install upgrades
-  and every rule keeps arriving exactly as it did.
-- `arose_from_id` — the record that caused the rule, the edge notes and tasks
-  already have.
-- `rule_systems` / `rule_relations` — the canon tag and the typed edges.
-"""
-import sqlalchemy as sa
-from alembic import op
-
-revision = "0088"
-down_revision = "0087"
-branch_labels = None
-depends_on = None
-
-# Kept in one place so upgrade and the CHECK agree by construction (rule 36:
-# a whitelisted value means DROP + ADD CONSTRAINT in the same migration —
-# there is no prior constraint here, so the pair is created together).
-_TIERS = ("always_on", "conditional")
-_RELATION_KINDS = ("co_surfaces", "overrides", "elaborates")
-
-
-def _in_list(column: str, values: tuple[str, ...]) -> str:
-    return f"{column} IN (" + ", ".join(f"'{v}'" for v in values) + ")"
-
-
-def upgrade() -> None:
-    op.add_column("rules", sa.Column("when_to_apply", sa.Text(), nullable=True))
-    op.add_column(
-        "rules",
-        sa.Column("tier", sa.Text(), nullable=False, server_default="always_on"),
-    )
-    op.create_check_constraint("ck_rules_tier", "rules", _in_list("tier", _TIERS))
-
-    # SET NULL, not CASCADE: the record that prompted a rule can be trashed
-    # without taking the rule with it — provenance is a claim about history,
-    # and losing the source does not repeal the rule.
-    op.add_column("rules", sa.Column("arose_from_id", sa.BigInteger(), nullable=True))
-    op.create_foreign_key(
-        "fk_rules_arose_from_id", "rules", "notes",
-        ["arose_from_id"], ["id"], ondelete="SET NULL",
-    )
-
-    # Which global AREA a rule is about. Points at the canonical catalog, never
-    # at a project's `systems` row — a rule that spans projects cannot be
-    # chained to one project's vocabulary (0087).
-    op.create_table(
-        "rule_systems",
-        sa.Column("rule_id", sa.BigInteger(), sa.ForeignKey("rules.id", ondelete="CASCADE"), primary_key=True),
-        sa.Column("canonical_id", sa.Integer(), sa.ForeignKey("canonical_systems.id", ondelete="CASCADE"), primary_key=True),
-        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.text("now()")),
-    )
-    op.create_index("ix_rule_systems_canonical_id", "rule_systems", ["canonical_id"])
-
-    # Typed edges between rules. Each kind exists because its absence forced a
-    # workaround: co_surfaces (merging two rules into one row), overrides (a
-    # stricter project rule written as a duplicate), elaborates (a local
-    # addendum sitting beside its parent with nothing to say it is one).
-    op.create_table(
-        "rule_relations",
-        sa.Column("id", sa.BigInteger(), primary_key=True),
-        sa.Column("from_rule_id", sa.BigInteger(), sa.ForeignKey("rules.id", ondelete="CASCADE"), nullable=False),
-        sa.Column("to_rule_id", sa.BigInteger(), sa.ForeignKey("rules.id", ondelete="CASCADE"), nullable=False),
-        sa.Column("kind", sa.Text(), nullable=False),
-        sa.Column("note", sa.Text(), nullable=True),
-        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.text("now()")),
-        sa.CheckConstraint(_in_list("kind", _RELATION_KINDS), name="ck_rule_relations_kind"),
-        # A rule cannot relate to itself, and one pair carries a given kind
-        # once — a second row would surface the same rule twice.
-        sa.CheckConstraint("from_rule_id <> to_rule_id", name="ck_rule_relations_not_self"),
-        sa.UniqueConstraint("from_rule_id", "to_rule_id", "kind", name="uq_rule_relations_edge"),
-    )
-    op.create_index("ix_rule_relations_from", "rule_relations", ["from_rule_id"])
-    op.create_index("ix_rule_relations_to", "rule_relations", ["to_rule_id"])
-
-
-def downgrade() -> None:
-    op.drop_index("ix_rule_relations_to", table_name="rule_relations")
-    op.drop_index("ix_rule_relations_from", table_name="rule_relations")
-    op.drop_table("rule_relations")
-    op.drop_index("ix_rule_systems_canonical_id", table_name="rule_systems")
-    op.drop_table("rule_systems")
-    op.drop_constraint("fk_rules_arose_from_id", "rules", type_="foreignkey")
-    op.drop_column("rules", "arose_from_id")
-    op.drop_constraint("ck_rules_tier", "rules", type_="check")
-    op.drop_column("rules", "tier")
-    op.drop_column("rules", "when_to_apply")

alembic/versions/0089_rule_embeddings.py

@@ -1,58 +0,0 @@
-"""rule_embeddings — rules become findable by meaning (milestone 307 step 4,
-decision note 3026)
-
-Revision ID: 0089
-Revises: 0088
-Create Date: 2026-08-26
-
-Rules were the only major record type with no vector, so `search` could never
-return one and a rule could only ever arrive by being preloaded. That single
-fact is what made every rule compete for the same always-on budget.
-
-A sibling table rather than a generalisation of note_embeddings: the row could
-have been made polymorphic, but the SEARCH could not — semantic_search_notes is
-Note-specific scoping end to end, and a rule shares none of it. See the model
-docstring for the full reasoning.
-
-The vectors are DERIVED data. Nothing is backfilled here: the startup backfill
-regenerates them, which is also how a chunker-version bump is handled.
-"""
-import sqlalchemy as sa
-from alembic import op
-
-revision = "0089"
-down_revision = "0088"
-branch_labels = None
-depends_on = None
-
-# Matches note_embeddings — bge-small-en-v1.5, 384-dim unit-normalized.
-_EMBEDDING_DIM = 384
-
-
-def upgrade() -> None:
-    op.create_table(
-        "rule_embeddings",
-        sa.Column("rule_id", sa.BigInteger(), sa.ForeignKey("rules.id", ondelete="CASCADE"), primary_key=True),
-        sa.Column("chunk_index", sa.Integer(), primary_key=True),
-        sa.Column("chunk_text", sa.Text(), nullable=False),
-        sa.Column("chunker_version", sa.Integer(), nullable=False),
-        sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.text("now()")),
-    )
-    # The vector column is added by raw DDL for the same reason 0067 did it:
-    # the type comes from the pgvector extension, not from SQLAlchemy's
-    # type system.
-    op.execute(f"ALTER TABLE rule_embeddings ADD COLUMN embedding vector({_EMBEDDING_DIM}) NOT NULL")
-    # HNSW for cosine distance — matches Vector.cosine_distance (`<=>`), so the
-    # search is an indexed ORDER BY ... LIMIT k rather than a full scan.
-    op.execute(
-        """
-        CREATE INDEX ix_rule_embeddings_embedding_hnsw
-            ON rule_embeddings
-         USING hnsw (embedding vector_cosine_ops)
-        """
-    )
-
-
-def downgrade() -> None:
-    op.execute("DROP INDEX IF EXISTS ix_rule_embeddings_embedding_hnsw")
-    op.drop_table("rule_embeddings")

alembic/versions/0090_rule_verification.py

@@ -1,64 +0,0 @@
-"""a rule can carry its own check — verify_with, expires_when, verified_at
-(milestone 312 step 1)
-
-Revision ID: 0090
-Revises: 0089
-Create Date: 2026-08-27
-
-A rulebook holds two kinds of row in one table. A NORM is a decision: it has
-no truth value, and it changes only when its author changes it — which they
-know they did. A CONSTRAINT is a fact about someone else's software: a
-runner's shell, a bot's config, a tool that exists. Nobody is present when
-that goes false.
-
-Milestone 307's rulebook audit found nine stale sites. Every one was a
-constraint; not one norm had rotted. One of them had been telling every
-session to skip database-backed tests for weeks while the integration lane
-sat green in the workflow.
-
-Three nullable columns, so a rule can say how to check itself:
-
-- `verify_with` — how to tell whether this is still true. A command, a path,
-  a URL, a query. Prose is allowed; something runnable is better.
-- `expires_when` — the STATE under which it stops being true. Deliberately
-  not a date: constraints do not expire on a schedule, they expire when the
-  world underneath them moves.
-- `verified_at` — when the check last passed. NULL means never checked, and
-  sorts FIRST in the sweep: unexamined outranks examined-long-ago.
-
-All three nullable and all three optional, because most rules should set
-none of them. A null `verify_with` is not an omission — it is the honest
-marker of "this one is a decision, and there is nothing to go and check."
-That signal only works if the field stays empty wherever it belongs empty.
-
-No CHECK constraint is involved, so rule 36 does not apply here. Nothing is
-backfilled: a migration cannot invent a check any more than 0088 could
-invent a trigger.
-"""
-import sqlalchemy as sa
-from alembic import op
-
-revision = "0090"
-down_revision = "0089"
-branch_labels = None
-depends_on = None
-
-
-def upgrade() -> None:
-    op.add_column("rules", sa.Column("verify_with", sa.Text(), nullable=True))
-    op.add_column("rules", sa.Column("expires_when", sa.Text(), nullable=True))
-    op.add_column(
-        "rules",
-        sa.Column("verified_at", sa.DateTime(timezone=True), nullable=True),
-    )
-    # No index on (verify_with, verified_at). The sweep this exists for reads
-    # an operator's whole rulebook — hundreds of rows, not millions — and runs
-    # when a human asks for it, never on a request path. An index here would
-    # be maintained on every rule write to serve a query that a sequential
-    # scan answers instantly.
-
-
-def downgrade() -> None:
-    op.drop_column("rules", "verified_at")
-    op.drop_column("rules", "expires_when")
-    op.drop_column("rules", "verify_with")

alembic/versions/0091_task_kind_spike.py

@@ -1,66 +0,0 @@
-"""task_kind gains 'spike' — the investigation, not the change
-(milestone 312 step 5)
-
-Revision ID: 0091
-Revises: 0090
-Create Date: 2026-08-27
-
-A spike is a task shape the others cannot hold. `work` ships a change;
-`issue` fixes something broken. A spike is time-boxed and its output is
-KNOWLEDGE — it succeeds by producing an answer, and nothing ships at the
-end of it. "Find out whether the runner can be given a bash shell" is not
-work, and filing it as work makes a finished investigation look like an
-abandoned change.
-
-It is the record a failed check asks for. Milestone 312 gave rules a
-`verify_with`; when one of those fails, the rule is wrong and the next move
-is often to go and find out what replaced it. `notes.arose_from_id` already
-exists (0065), so that constraint -> spike link needs no further schema.
-
-Rule 36: `task_kind` is gated by a CHECK whitelist, so the value and the
-widened constraint land in the SAME migration — DROP then ADD, exactly as
-0065 did when it introduced 'issue'. Adding the value and constraining it
-later leaves a window where the database accepts anything.
-
-'plan' stays in the list though it is retired (plans are milestones since
-0066): historical plan-tasks still carry it, and dropping it from the
-whitelist would make old rows unwritable.
-"""
-from alembic import op
-
-revision = "0091"
-down_revision = "0090"
-branch_labels = None
-depends_on = None
-
-# One tuple so the upgrade and the downgrade cannot disagree about what the
-# list was on either side of this migration.
-_KINDS_AFTER = ("work", "plan", "issue", "spike")
-_KINDS_BEFORE = ("work", "plan", "issue")
-
-
-# Restated rather than imported from 0088, which has the same helper. A
-# migration is a snapshot: it must keep working when the code around it has
-# moved on, so it never imports from live modules or from its siblings. Six
-# duplicated lines are the price of that, and the cheap half of the bargain.
-def _in_list(values: tuple[str, ...]) -> str:
-    return "task_kind IN (" + ", ".join(f"'{v}'" for v in values) + ")"
-
-
-def upgrade() -> None:
-    op.drop_constraint("notes_task_kind_check", "notes", type_="check")
-    op.create_check_constraint(
-        "notes_task_kind_check", "notes", _in_list(_KINDS_AFTER),
-    )
-
-
-def downgrade() -> None:
-    # Any row already filed as a spike would violate the narrowed constraint,
-    # so they are demoted to 'work' first. Lossy and deliberately so: the
-    # alternative is a downgrade that fails on real data, which is worse than
-    # a downgrade that says what it did.
-    op.execute("UPDATE notes SET task_kind = 'work' WHERE task_kind = 'spike'")
-    op.drop_constraint("notes_task_kind_check", "notes", type_="check")
-    op.create_check_constraint(
-        "notes_task_kind_check", "notes", _in_list(_KINDS_BEFORE),
-    )

docs/api-keys-and-mcp.md

@@ -43,10 +43,8 @@ client straight to the URL with a Bearer token.
 
 Authenticate with an API key generated from **Settings → API Keys** (see above),
 sent as `Authorization: Bearer fmcp_<key>`. A `read`-scoped key may call only the
-read tools (`get_*`, `list_*`, `search`, `enter_project`, `retrieval_telemetry`);
-any write/delete tool is rejected with `403`. The allow-list is explicit rather
-than derived from the name — see `_READ_ONLY_TOOLS`, which is why the two reads
-without a read-shaped name are spelled out here. A `write`-scoped key may call everything.
+read tools (`get_*`, `list_*`, `search`, `enter_project`); any write/delete tool
+is rejected with `403`. A `write`-scoped key may call everything.
 
 ### Claude Code (Project-scoped)
 
@@ -87,7 +85,7 @@ table here. The tools are grouped by family:
 | Notes | `create_note`, `get_note`, `update_note`, `delete_note`, `list_notes` | Free-form knowledge |
 | Tasks | `create_task`, `update_task`, `add_task_log`, `start_planning` | Actionable work + plans |
 | Projects / Milestones | `enter_project`, `get_project`, `create_milestone`, … | Containers and outcomes |
-| Search / Recall | `search`, `get_recent`, `list_tags`, `retrieval_telemetry` | Semantic + structured recall, and the readout its thresholds are tuned from |
+| Search / Recall | `search`, `get_recent`, `list_tags` | Semantic + structured recall |
 | Systems | `create_system`, `list_systems`, `list_system_records` | Reusable per-project subsystems/areas |
 | Rulebooks | `list_always_on_rules`, `list_rules`, `create_rule`, `create_project_rule`, `subscribe_project_to_rulebook`, … | Engineering/workflow rules |
 | Processes | `list_processes`, `get_process`, `create_process` | Saved prompts/workflows |

docs/api-reference.md

@@ -76,9 +76,7 @@ endpoint at `/mcp`, not these REST routes.
 | Method | Path | Description |
 |--------|------|-------------|
 | GET / POST | `/api/projects` | List (owned + shared) / create |
-| GET / PATCH / DELETE | `/api/projects/:id` | Read (with `milestone_summary`, `inception`) / update / delete |
-| POST | `/api/projects/:id/inception` | Record what the project inherits `{choices: {exclude_always_on_rulebooks, subscribe_rulebooks, design_system_id, seed_systems}}` (owner-only; `POST /api/projects` accepts the same under `inception`) |
-| GET | `/api/projects/:id/inception/defaults` | What binds if nobody decides — the inception card's payload |
+| GET / PATCH / DELETE | `/api/projects/:id` | Read (with `milestone_summary`) / update / delete |
 | GET | `/api/projects/:id/notes` | Notes + tasks in this project |
 | GET / POST | `/api/projects/:id/milestones` | List / create milestones |
 | GET / PATCH / DELETE | `/api/projects/:id/milestones/:mid` | Read / update / delete |
@@ -120,7 +118,6 @@ endpoint at `/mcp`, not these REST routes.
 | POST | `/api/projects/:id/rules` | Create a project-scoped rule |
 | POST / DELETE | `/api/projects/:id/suppressions/rules/:rid` | Suppress / unsuppress a rule |
 | POST / DELETE | `/api/projects/:id/suppressions/topics/:tid` | Suppress / unsuppress a topic |
-| POST / DELETE | `/api/projects/:id/exclusions/rulebooks/:rid` | Exclude / include an always-on rulebook for this project (inception) |
 
 ## Sharing
 
@@ -172,8 +169,6 @@ endpoint at `/mcp`, not these REST routes.
 | GET | `/api/plugin/context` | SessionStart context payload (rules + active-project) |
 | GET | `/api/plugin/retrieve` | Title-first knowledge-injection candidates |
 | GET | `/api/plugin/processes` | Stored Processes for skill-stub sync |
-| GET | `/api/plugin/prior-art` | Write-path hint for the plugin hooks (params: `path`, `code`, `repo`, `shapes`, `exclude_ids`, `exclude_sync_ids`, `exclude_derive`); returns `context`, `note_ids`, `sync_note_ids`, `stamped`, `divergence`, `derive`, `derive_keys` |
-| GET / POST | `/api/projects/<id>/coverage`, `…/coverage/refresh` | Shape-ledger accounting (`pattern_coverage` line, counts, `derive_groups` — css groups carry `consumers`, `derive_new`, `unused_css`, `divergence`, `recheck`) |
 | GET / PUT | `/api/plugin/marketplace-url` | Read / set the plugin marketplace URL |
 
 ## Dashboard, Export, Trash, Users

frontend/src/App.vue

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

frontend/src/api/canonicalSystems.ts

@@ -1,81 +0,0 @@
-/**
- * Canonical systems — the GLOBAL area vocabulary every project's Systems can
- * map onto (milestone 307).
- *
- * The mapping is an ASSOCIATION, never a rename: a project's System keeps the
- * name the project gave it, and `canonical_id` only records which shared area
- * it is an instance of. An unmapped System is fully usable — the catalog is a
- * convergence aid, not a gate.
- */
-import { apiGet, apiPost, apiPatch, apiPut } from "@/api/client";
-
-export interface CanonicalSystem {
-  id: number;
-  name: string;
-  /** The match key: lowercase, "&" folded to "and", punctuation collapsed. */
-  slug: string;
-  description: string | null;
-  order_index: number;
-  created_at: string | null;
-  updated_at: string | null;
-}
-
-/**
- * A suggested mapping. `basis` is the whole point of showing it:
- * - `exact`   — the names differ only in spelling. Mechanical.
- * - `overlap` — they share a meaningful word. A judgment call the reviewer is
- *   making, and it must never be presented as if it were the first.
- */
-export interface CanonicalMatch {
-  id: number;
-  name: string;
-  basis: "exact" | "overlap";
-  score?: number;
-}
-
-export interface MappingProposal {
-  system_id: number;
-  system_name: string;
-  canonical_id: number;
-  canonical_name: string;
-  basis: "exact" | "overlap";
-  score: number;
-}
-
-export async function listCanonicalSystems(): Promise<CanonicalSystem[]> {
-  const data = await apiGet<{ canonical_systems: CanonicalSystem[] }>(
-    "/api/canonical-systems",
-  );
-  return data.canonical_systems;
-}
-
-/** Admin only — a global list anyone can extend stops being shared. */
-export async function createCanonicalSystem(data: {
-  name: string;
-  description?: string;
-}): Promise<CanonicalSystem> {
-  return apiPost("/api/canonical-systems", data);
-}
-
-export async function updateCanonicalSystem(
-  id: number,
-  data: Partial<{ name: string; description: string; order_index: number }>,
-): Promise<CanonicalSystem> {
-  return apiPatch(`/api/canonical-systems/${id}`, data);
-}
-
-/** Proposals for a project's UNMAPPED Systems. Reads only — nothing applied. */
-export async function proposeMappings(projectId: number): Promise<MappingProposal[]> {
-  const data = await apiGet<{ proposals: MappingProposal[] }>(
-    `/api/projects/${projectId}/canonical-proposals`,
-  );
-  return data.proposals;
-}
-
-/** Apply or clear one mapping. `null` unmaps. */
-export async function mapSystem(
-  systemId: number,
-  canonicalId: number | null,
-): Promise<{ id: number; canonical_id: number | null }> {
-  return apiPut(`/api/systems/${systemId}/canonical`, { canonical_id: canonicalId });
-}

frontend/src/api/client.ts

@@ -38,20 +38,6 @@ 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/api/design.ts

@@ -0,0 +1,9 @@
+import { apiGet } from "@/api/client";
+import type { ExpectationResponse } from "@/utils/designDrift";
+
+/** Checkable claims from the rulebook this install designated as its design system.
+ *
+ *  `rulebook_id: null` means none has been designated — the normal state for a
+ *  fresh install, not an error. The caller shows an explanatory empty state. */
+export const fetchDesignExpectations = () =>
+  apiGet<ExpectationResponse>("/api/design/expectations");

frontend/src/api/designSystems.ts

@@ -74,28 +74,11 @@ export const fetchDesignSystems = () =>
 export const fetchDesignSystem = (id: number) =>
   apiGet<DesignSystem>(`/api/design-systems/${id}`);
 
-export interface StarterRoleGroup {
-  group: string;
-  description: string;
-  token_count: number;
-  names: string[];
-}
-
-/** The starter token ROLES offered at creation — names and purposes, never
- *  values. A default palette would be one install's taste shipped as product
- *  (rule #115), so the values are always the operator's to fill. */
-export const listStarterRoleGroups = () =>
-  apiGet<{ groups: StarterRoleGroup[]; default_prefix: string }>(
-    "/api/design-systems/starter-roles",
-  );
-
 export const createDesignSystem = (body: {
   title: string;
   description?: string;
   guidance?: string;
   parent_id?: number | null;
-  starter_role_groups?: string[];
-  token_prefix?: string;
 }) => apiPost<DesignSystem>("/api/design-systems", body);
 
 /** Omit `parent_id` to leave it alone; send `null` to make the system a family. */
@@ -200,14 +183,6 @@ export interface SnippetCheck {
   findings: SnippetFinding[];
 }
 
-/** Which recorded snippets disagree with this design system's sheet.
- *
- *  `projectId` narrows to the snippets one project owns — which is how a
- *  project asks about its OWN code. Omit it to check every project, which is
- *  the right default from the system's side: a component recorded elsewhere
- *  still has to use the same tags. */
-export const checkSnippets = (id: number, projectId?: number) =>
-  apiGet<SnippetCheck>(
-    `/api/design-systems/${id}/snippet-check`
-    + (projectId ? `?project_id=${projectId}` : ""),
-  );
+/** Which recorded snippets disagree with this design system's sheet. */
+export const checkSnippets = (id: number) =>
+  apiGet<SnippetCheck>(`/api/design-systems/${id}/snippet-check`);

frontend/src/api/inception.ts

@@ -1,42 +0,0 @@
-/** Project inception (milestone 297): what a project was decided to inherit. */
-import { apiGet, apiPost } from "@/api/client";
-
-export interface InceptionChoices {
-  exclude_always_on_rulebooks: number[];
-  subscribe_rulebooks: number[];
-  design_system_id: number | null;
-  seed_systems: boolean;
-}
-
-export interface InceptionRecord {
-  decided_at: string;
-  decided_by: number | null;
-  via: "mcp" | "ui" | "legacy";
-  choices: InceptionChoices;
-}
-
-export interface InceptionDefaults {
-  always_on_rulebooks: { id: number; title: string }[];
-  other_rulebooks: { id: number; title: string }[];
-  excluded_always_on: { id: number; title: string }[];
-  subscribed_rulebooks: { id: number; title: string }[];
-  design_system_id: number | null;
-  design_systems: { id: number; title: string }[];
-  systems: number;
-}
-
-export interface InceptionDecision {
-  project_id: number;
-  inception: InceptionRecord;
-  effects: { excluded: number[]; subscribed: number[]; design_system_id: number | null; systems_seeded: string[] };
-}
-
-export const emptyChoices = (): InceptionChoices => ({
-  exclude_always_on_rulebooks: [], subscribe_rulebooks: [], design_system_id: null, seed_systems: false,
-});
-
-export const fetchInceptionDefaults = (projectId: number) =>
-  apiGet<InceptionDefaults>(`/api/projects/${projectId}/inception/defaults`);
-
-export const decideInception = (projectId: number, choices: InceptionChoices) =>
-  apiPost<InceptionDecision>(`/api/projects/${projectId}/inception`, { choices });

frontend/src/api/rulebooks.ts

@@ -1,24 +1,5 @@
 import { apiGet, apiPost, apiPatch, apiDelete } from "@/api/client";
 
-/** How a rule reaches a session (milestone 307). */
-export type RuleTier = "always_on" | "conditional";
-
-/**
- * A typed edge between two rules. Each kind exists because its absence forced
- * a workaround: merging two rules into one row, writing an override as a
- * near-copy, or leaving a local addendum with nothing to say it is one.
- */
-export type RuleRelationKind = "co_surfaces" | "overrides" | "elaborates";
-
-export interface RuleRelation {
-  id: number;
-  kind: RuleRelationKind;
-  /** The rule at the OTHER end. */
-  rule_id: number;
-  direction: "outgoing" | "incoming";
-  note: string;
-}
-
 export interface Rulebook {
   id: number;
   owner_user_id: number;
@@ -45,69 +26,35 @@ export interface Rule {
   project_id: number | null;
   title: string;
   statement: string;
-  /** WHEN this rule fires — the trigger, not the instruction. */
-  when_to_apply: string;
-  /**
-   * always_on preloads into every session; conditional is reachable and
-   * surfaced when its trigger fires. A rule with no tier set behaves as
-   * always_on, which is how every rule behaved before this existed.
-   */
-  tier: RuleTier;
   why: string;
   how_to_apply: string;
-  /**
-   * How to check the rule is still true, and the state that ends it. Set
-   * only on a rule that asserts a fact about something outside the
-   * operator's control; empty on a rule that is a decision, which is most
-   * of them. Empty is meaningful, not missing.
-   */
-  verify_with: string;
-  expires_when: string;
-  /** When the check last passed. Null means never checked. */
-  verified_at: string | null;
-  /** The note or task that caused this rule, if one was recorded. */
-  arose_from_id: number | null;
   order_index: number;
   created_at: string | null;
   updated_at: string | null;
-  /** Present only when the rule has them (the server omits empty keys). */
-  systems?: { id: number; name: string }[];
-  relations?: RuleRelation[];
 }
 
-/**
- * A rule as a LIST ROW — services.rulebooks.rule_brief's output. Carries the
- * age deliberately: a rule written before the capability it duplicates is
- * otherwise indistinguishable, at a glance, from one still doing work.
- */
 export interface RuleHeader {
   id: number;
   title: string;
   statement: string;
   topic_id: number | null;
-  tier: RuleTier;
-  /** A date (YYYY-MM-DD), not a timestamp. */
-  updated_at: string | null;
-  when_to_apply?: string;
-  arose_from_id?: number;
-  /**
-   * Present ONLY on a rule that carries a check — the presence of the key
-   * is itself the signal that this rule asserts a fact that can go false.
-   * A date (YYYY-MM-DD), or the literal "never".
-   */
-  last_verified?: string;
 }
 
 export interface ApplicableRules {
-  // Both lists are rule_brief's output — the SAME builder, so they are
-  // described the same way here rather than as two hand-written shapes that
-  // drift from it and from each other (which is what the server side had).
-  rules: (RuleHeader & {
+  rules: {
+    id: number;
+    title: string;
+    statement: string;
+    topic_id: number;
     topic_title: string;
     rulebook_id: number;
     rulebook_title: string;
-  })[];
-  project_rules: RuleHeader[];
+  }[];
+  project_rules: {
+    id: number;
+    title: string;
+    statement: string;
+  }[];
   suppressed_rules: {
     id: number;
     title: string;
@@ -124,8 +71,6 @@ export interface ApplicableRules {
   }[];
   truncated: boolean;
   subscribed_rulebooks: { id: number; title: string }[];
-  /** Always-on rulebooks this project opted out of at inception (milestone 297). */
-  excluded_always_on: { id: number; title: string }[];
 }
 
 // ── Rulebooks ───────────────────────────────────────────────────────
@@ -186,48 +131,14 @@ export async function getRule(id: number): Promise<Rule> {
   return apiGet(`/api/rules/${id}`);
 }
 
-/**
- * The fields both write paths accept. `system_ids` REPLACES a rule's areas.
- *
- * Sending "" for a nullable text field CLEARS it here — the server maps an
- * empty string to NULL, so an emptied form input does what it looks like it
- * does. (The MCP door reads "" as "leave unchanged" and needs an explicit
- * clear_fields list instead; the two idioms reach the same state.)
- */
-export interface RuleWrite {
-  title: string;
-  statement: string;
-  when_to_apply: string;
-  tier: RuleTier;
-  why: string;
-  how_to_apply: string;
-  order_index: number;
-  system_ids: number[];
-  arose_from_id: number | null;
-  verify_with: string;
-  expires_when: string;
-}
-
-export async function createRule(topicId: number, data: Partial<RuleWrite> & { title: string; statement: string }): Promise<Rule> {
+export async function createRule(topicId: number, data: { title: string; statement: string; why?: string; how_to_apply?: string; order_index?: number }): Promise<Rule> {
   return apiPost(`/api/rulebook-topics/${topicId}/rules`, data);
 }
 
-export async function updateRule(id: number, data: Partial<RuleWrite>): Promise<Rule> {
+export async function updateRule(id: number, data: Partial<{ title: string; statement: string; why: string; how_to_apply: string; order_index: number }>): Promise<Rule> {
   return apiPatch(`/api/rules/${id}`, data);
 }
 
-/** Draw a typed edge from one rule to another. Idempotent. */
-export async function relateRules(
-  fromRuleId: number,
-  data: { to_rule_id: number; kind: RuleRelationKind; note?: string },
-): Promise<{ id: number }> {
-  return apiPost(`/api/rules/${fromRuleId}/relations`, data);
-}
-
-export async function unrelateRules(relationId: number): Promise<void> {
-  return apiDelete(`/api/rule-relations/${relationId}`);
-}
-
 export async function deleteRule(id: number): Promise<void> {
   return apiDelete(`/api/rules/${id}`);
 }
@@ -248,7 +159,7 @@ export async function getProjectApplicableRules(projectId: number): Promise<Appl
 
 export async function createProjectRule(
   projectId: number,
-  data: Partial<RuleWrite> & { statement: string },
+  data: { statement: string; title?: string; why?: string; how_to_apply?: string },
 ): Promise<Rule> {
   return apiPost(`/api/projects/${projectId}/rules`, data);
 }
@@ -270,70 +181,3 @@ export async function suppressTopicForProject(projectId: number, topicId: number
 export async function unsuppressTopicForProject(projectId: number, topicId: number): Promise<void> {
   return apiDelete(`/api/projects/${projectId}/suppressions/topics/${topicId}`);
 }
-
-// ── Always-on exclusions (milestone 297) ────────────────────────────────────
-
-export async function excludeAlwaysOnRulebook(projectId: number, rulebookId: number): Promise<void> {
-  await apiPost(`/api/projects/${projectId}/exclusions/rulebooks/${rulebookId}`, {});
-}
-
-export async function includeAlwaysOnRulebook(projectId: number, rulebookId: number): Promise<void> {
-  await apiDelete(`/api/projects/${projectId}/exclusions/rulebooks/${rulebookId}`);
-}
-
-
-/**
- * One row of the staleness sweep. Unlike RuleHeader this carries the CHECK
- * in full — the reader is about to go and run it, so the text is the point
- * of the payload rather than the bloat a listing avoids.
- */
-export interface RuleVerificationRow {
-  id: number;
-  title: string;
-  statement: string;
-  tier: RuleTier;
-  topic_id: number | null;
-  project_id: number | null;
-  when_to_apply: string;
-  verify_with: string;
-  expires_when: string;
-  /** A date (YYYY-MM-DD), or the literal "never". */
-  last_verified: string | null;
-  /** Null when never verified — "never" is not zero days ago. */
-  days_since_verified: number | null;
-}
-
-/**
- * Rules asserting a fact that may have gone false, oldest verification
- * first, never-checked at the top. Rules without a check never appear:
- * they are decisions, and there is nothing to go and check.
- *
- * Not filterable by project — a project reaches rules through project
- * scope, subscriptions, always-on rulebooks and exclusions, and a filter
- * missing one of those paths would under-report.
- */
-export async function listRulesDueForVerification(opts: {
-  olderThanDays?: number;
-  tier?: RuleTier;
-  neverOnly?: boolean;
-} = {}): Promise<{ rules: RuleVerificationRow[]; total: number }> {
-  const q = new URLSearchParams();
-  if (opts.olderThanDays) q.set("older_than_days", String(opts.olderThanDays));
-  if (opts.tier) q.set("tier", opts.tier);
-  if (opts.neverOnly) q.set("never_only", "true");
-  const qs = q.toString();
-  return apiGet(`/api/rules-due-for-verification${qs ? `?${qs}` : ""}`);
-}
-
-/**
- * Record that a rule's check was RUN, and what it said.
- *
- * `stillTrue: false` writes nothing on purpose — a rule whose check failed
- * is not in a recordable state, it is wrong — so it stays at the top of the
- * sweep until someone corrects or retires it.
- */
-export async function markRuleVerified(
-  id: number, stillTrue = true,
-): Promise<Rule & { verified: boolean }> {
-  return apiPost(`/api/rules/${id}/verify`, { still_true: stillTrue });
-}

frontend/src/api/systems.ts

@@ -1,15 +1,9 @@
 import { apiGet, apiPost, apiPatch, apiDelete } from "@/api/client";
-import type { CanonicalMatch } from "@/api/canonicalSystems";
 
 export interface System {
   id: number;
   project_id: number;
   name: string;
-  /**
-   * The global area this System is an instance of, or null. Null is a valid
-   * resting state — a project-specific area should stay unmapped.
-   */
-  canonical_id: number | null;
   description: string;
   color: string | null;
   status: "active" | "archived";
@@ -24,23 +18,10 @@ export async function listSystems(projectId: number): Promise<System[]> {
   return data.systems;
 }
 
-/**
- * A created System, plus the catalog's answer about its name. An `exact`
- * catalog hit is applied by the server and arrives as a populated
- * `canonical_id`; an `overlap` is only OFFERED, and comes back here for the
- * caller to accept or ignore.
- *
- * A same-named System in this project is a 409 ApiError carrying
- * `{duplicate, existing_id}` — the same gate the MCP door enforces (#2482).
- */
-export interface CreatedSystem extends System {
-  canonical_suggestion?: CanonicalMatch;
-}
-
 export async function createSystem(
   projectId: number,
-  data: { name: string; description?: string; color?: string; canonical_id?: number },
-): Promise<CreatedSystem> {
+  data: { name: string; description?: string; color?: string },
+): Promise<System> {
   return apiPost(`/api/projects/${projectId}/systems`, data);
 }
 

frontend/src/assets/auth-shared.css

@@ -1,115 +0,0 @@
-/* ── 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

@@ -36,8 +36,7 @@
 .btn-secondary,
 .btn-ghost,
 .btn-danger,
-.btn-danger-outline,
-.btn-cta {
+.btn-danger-outline {
   padding: var(--fs-space-2) var(--fs-space-4);   /* 8px 16px */
   border: none;
   border-radius: var(--fs-radius-md);             /* 8px — the system's button radius */
@@ -47,14 +46,6 @@
   line-height: var(--fs-leading-body);
   white-space: nowrap;
   cursor: pointer;
-  /* So a button carrying an icon centres it against the label without each
-     caller re-inventing the flex row — the shape they all reached for
-     separately, and the reason icon buttons sat a pixel or two off. */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--fs-space-2);
-  text-decoration: none;
   transition: background var(--fs-dur-fast) var(--fs-ease),
               border-color var(--fs-dur-fast) var(--fs-ease),
               color var(--fs-dur-fast) var(--fs-ease);
@@ -67,8 +58,7 @@
 .btn-secondary:disabled,
 .btn-ghost:disabled,
 .btn-danger:disabled,
-.btn-danger-outline:disabled,
-.btn-cta:disabled {
+.btn-danger-outline:disabled {
   opacity: var(--fs-disabled-opacity);
   cursor: not-allowed;
 }
@@ -77,8 +67,7 @@
 .btn-secondary:focus-visible,
 .btn-ghost:focus-visible,
 .btn-danger:focus-visible,
-.btn-danger-outline:focus-visible,
-.btn-cta:focus-visible {
+.btn-danger-outline:focus-visible {
   outline: none;
   box-shadow: var(--fs-focus-ring);
 }
@@ -89,19 +78,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(--fs-action-primary);
+  background: var(--color-action-primary);
   color: var(--fs-text-on-action);
 }
 .btn-primary:not(:disabled):hover {
-  background: var(--fs-action-primary-hover);
+  background: var(--color-action-primary-hover);
 }
 
 .btn-secondary {
-  background: var(--fs-action-secondary);
+  background: var(--color-action-secondary);
   color: var(--fs-text-on-action);
 }
 .btn-secondary:not(:disabled):hover {
-  background: var(--fs-action-secondary-hover);
+  background: var(--color-action-secondary-hover);
 }
 
 /* Ghost is an OUTLINE, which is why its border and the tertiary action colour
@@ -112,21 +101,21 @@
 .btn-ghost {
   background: none;
   border: var(--fs-border);
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
 .btn-ghost:not(:disabled):hover {
   border: var(--fs-border-hover);
-  background: var(--fs-surface-hover);
+  background: var(--color-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(--fs-action-destructive);
+  background: var(--color-action-destructive);
   color: var(--fs-text-on-action);
 }
 .btn-danger:not(:disabled):hover {
-  background: var(--fs-action-destructive-hover);
+  background: var(--color-action-destructive-hover);
 }
 
 /* A bare text button: no fill, no border. The most common shape in the dense
@@ -136,7 +125,7 @@
 .btn-text {
   background: none;
   border: none;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   padding: var(--fs-space-1) var(--fs-space-2);
   font-family: var(--fs-font-body);
   font-size: var(--fs-size-tiny);
@@ -144,7 +133,7 @@
   cursor: pointer;
   transition: color var(--fs-dur-fast) var(--fs-ease);
 }
-.btn-text:not(:disabled):hover { color: var(--fs-text-primary); }
+.btn-text:not(:disabled):hover { color: var(--color-text); }
 .btn-text:disabled { opacity: var(--fs-disabled-opacity); cursor: not-allowed; }
 .btn-text:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); }
 
@@ -153,33 +142,14 @@
  * a one-off: it is what a delete looks like when it must not shout. */
 .btn-danger-outline {
   background: none;
-  border: 1px solid var(--fs-action-destructive);
-  color: var(--fs-action-destructive);
+  border: 1px solid var(--color-action-destructive);
+  color: var(--color-action-destructive);
 }
 .btn-danger-outline:not(:disabled):hover {
-  background: var(--fs-action-destructive);
+  background: var(--color-action-destructive);
   color: var(--fs-text-on-action);
 }
 
-/* The one place the accent is allowed on a button: a deliberate brand moment,
- * never an ordinary action. The system carries `--fs-gradient-cta` and
- * `--fs-glow-cta` for exactly this and nothing else was using them.
- *
- * It exists because ProjectView's Workspace link WAS this button, defined in a
- * scoped block that the migration deleted — leaving a `:hover` rule with no
- * base and a link that rendered as raw browser blue. A variant living in one
- * view is a variant waiting to be deleted by someone tidying another; this is
- * the shared home so the next sweep can't strand it. */
-.btn-cta {
-  background: var(--fs-gradient-cta);
-  color: var(--fs-text-on-action);
-  box-shadow: var(--fs-glow-cta);
-  text-decoration: none;
-}
-.btn-cta:not(:disabled):hover {
-  box-shadow: var(--fs-glow-cta-hover);
-}
-
 /* --- size modifiers ------------------------------------------------------
  *
  * THREE sizes, because the app genuinely has three. Measured across the ~100
@@ -214,140 +184,10 @@
 /* Full width, for a form's single submitting action — the auth screens. Width
  * is orthogonal to size, so it composes: `btn-primary btn-block`. */
 .btn-block {
-  display: flex;   /* not `block` — the shared shape centres with flex */
+  display: block;
   width: 100%;
   padding: var(--fs-space-3) var(--fs-space-4);   /* 12px 16px — a touch taller,
                                                      because a full-width button
                                                      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);
-}
-
-/* ── Page container ─────────────────────────────────────────────────────────
-   The one wrapper a top-level view sits in: page width from the layout
-   tokens, centred, clipped horizontally so a wide child (a kanban, a table)
-   scrolls inside itself instead of the page. ProjectListView, ProjectView and
-   SnippetListView each carried this rule under their own name until #2903
-   (milestone 299). */
-.page-container {
-  max-width: var(--fs-layout-page-max);
-  margin: 2rem auto;
-  padding: 0 var(--fs-layout-page-pad);
-  overflow-x: clip;
-}
-
-/* ── Form input (fs-surfaces, snippet #2336) ────────────────────────────────
-   Inputs sit DARKER than the page they're on — an inset well rather than a
-   raised panel; that inversion is what makes a field read as writable. The
-   design system's recipe, verbatim; width/box-sizing stay the caller's
-   (an inline select and a full-width textarea differ there). Three scoped
-   copies of an older input recipe were folded into this in #2903. */
-.fs-input {
-  background: var(--fs-surface-page);
-  border: var(--fs-border);
-  border-radius: var(--fs-radius-md);
-  padding: var(--fs-space-2) var(--fs-space-3);   /* 8px 12px */
-  color: var(--fs-text-primary);
-  font-family: var(--fs-font-body);
-  font-size: var(--fs-size-body);
-  transition: box-shadow var(--fs-dur-fast) var(--fs-ease);
-}
-.fs-input::placeholder { color: var(--fs-text-tertiary); }
-.fs-input:focus { outline: none; box-shadow: var(--fs-focus-ring); }
-.fs-input:disabled { opacity: var(--fs-disabled-opacity); cursor: not-allowed; }
-
-/* Page scaffold + feedback text recipes (milestone 302, note 2917): name
-   families the consumer map showed to be one recipe living in many views.
-   A view keeps only its deviation as a scoped remainder/override. */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-.page-header h1 { margin: 0; }
-
-.error-msg { color: var(--fs-error); font-size: 0.9rem; }
-.state-msg { color: var(--fs-text-tertiary); font-size: 0.9rem; }
-.empty-msg { color: var(--fs-text-tertiary); font-size: 0.875rem; }
-
-.empty-title { font-size: 1rem; font-weight: 500; color: var(--fs-text-secondary); margin: 0 0 0.35rem; }
-.empty-sub { font-size: 0.85rem; color: var(--fs-text-tertiary); margin: 0 0 1rem; }
-
-.required { color: var(--fs-error); }
-.field-hint { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--fs-text-tertiary); }

frontend/src/assets/dup-report.css

@@ -1,50 +0,0 @@
-/* The near-duplicate report, shared by KnowledgeView (notes/tasks) and
-   SnippetListView (snippets) so the two reports read as one feature. Load
-   with <style src="@/assets/dup-report.css" /> beside the view's scoped
-   block; the view keeps only its own extras (.dup-claimed, .dup-action).
-   Promoted from two identical scoped copies in #2903 (milestone 299). */
-.dup-panel {
-  margin-bottom: 1.25rem;
-  padding: 0.85rem 1rem;
-  border: 1px solid var(--fs-border-color);
-  border-radius: 8px;
-  background: var(--fs-surface-hover);
-}
-.dup-empty,
-.dup-head {
-  margin: 0 0 0.5rem;
-  font-size: 0.85rem;
-  color: var(--fs-text-tertiary);
-}
-.dup-empty { margin-bottom: 0; }
-.dup-group {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  padding: 0.5rem 0;
-  border-top: 1px solid var(--fs-border-color);
-}
-.dup-members {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  flex: 1 1 20rem;
-  min-width: 0;
-}
-.dup-member {
-  font-size: 0.8rem;
-  padding: 0.1rem 0.45rem;
-  border-radius: 4px;
-  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(--fs-surface-hover); }
-.dup-score {
-  font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}

frontend/src/assets/editor-shared.css

@@ -13,7 +13,19 @@
   flex-direction: column;
   gap: 0.75rem;
   padding: 1rem 1.5rem 0.5rem;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
+}
+.editor-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+.editor-main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 0.75rem 1.5rem 1.5rem;
 }
 
 /* ── Toolbar & inputs ── */
@@ -29,36 +41,36 @@
    with a Trash icon at the call site to reinforce intent. */
 .title-input:focus {
   outline: none;
-  border-bottom-color: var(--fs-accent);
+  border-bottom-color: var(--color-primary);
 }
 .title-input::placeholder {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   font-weight: 400;
 }
 .editor-tabs {
   display: flex;
   gap: 0;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
 }
 .tab {
   padding: 0.45rem 1rem;
   border: none;
   background: none;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   cursor: pointer;
   font-size: 0.9rem;
   border-bottom: 2px solid transparent;
 }
 .tab.active {
-  color: var(--fs-accent);
-  border-bottom-color: var(--fs-accent);
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
 }
 .preview-pane {
   padding: 0.75rem;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
   min-height: 200px;
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-card);
 }
 
 /* ── Tag suggestions ── */
@@ -66,44 +78,133 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.4rem;
 }
 .tag-pill {
   display: inline-flex;
   align-items: center;
   gap: 0.2rem;
   padding: 0.2rem 0.55rem;
-  border: 1px solid var(--fs-accent);
+  border: 1px solid var(--color-primary);
   border-radius: 999px;
   background: transparent;
-  color: var(--fs-accent);
+  color: var(--color-primary);
   font-size: 0.8rem;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
 .tag-pill:hover:not(:disabled) {
-  background: var(--fs-accent);
+  background: var(--color-primary);
   color: var(--fs-text-on-action);
 }
 .tag-pill.applied {
-  background: var(--fs-success);
-  border-color: var(--fs-success);
+  background: var(--color-success, #2ecc71);
+  border-color: var(--color-success, #2ecc71);
   color: var(--fs-text-on-action);
   cursor: default;
 }
 .tag-check {
   font-size: 0.7rem;
 }
+
+/* ── Assist panel ── */
+.assist-panel {
+  width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.assist-panel-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 0.9rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.assist-panel-title {
+  flex: 1;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.assist-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.75rem 0.9rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+/* Section list */
+.assist-sections-label {
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.2rem;
+}
+.assist-sections {
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  max-height: 200px;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+.assist-section-item {
+  padding: 0.35rem 0.7rem;
+  cursor: pointer;
+  font-size: 0.82rem;
+  border-left: 3px solid transparent;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.assist-section-item:hover {
+  background: var(--color-bg-secondary);
+}
+.assist-section-item.selected {
+  border-left-color: var(--color-primary);
+  background: var(--color-bg-secondary);
+  font-weight: 500;
+}
+.assist-empty,
+.assist-hint {
+  padding: 0.6rem 0.7rem;
+  font-size: 0.82rem;
+  color: var(--color-text-muted);
+}
+.assist-target-preview {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.assist-target-preview em {
+  font-style: normal;
+  color: var(--color-text);
+}
 .assist-instruction {
   width: 100%;
   padding: 0.5rem 0.65rem;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
   font-size: 0.88rem;
   font-family: inherit;
   resize: vertical;
-  background: var(--fs-surface-page);
-  color: var(--fs-text-primary);
+  background: var(--color-bg);
+  color: var(--color-text);
   box-sizing: border-box;
   min-height: 3.5rem;
 }
@@ -112,27 +213,64 @@
   gap: 0.5rem;
 }
 
+/* Streaming */
+.assist-streaming-label {
+  font-size: 0.8rem;
+  color: var(--color-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);
+  font-size: 0.9rem;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.typing-indicator {
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  animation: blink 1s step-end infinite;
+}
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
 /* Active hint shown in the panel while output is inline */
 .assist-active-hint {
   padding: 0.5rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   text-align: center;
 }
 
 /* Error */
 .assist-error {
   padding: 0.5rem 0.75rem;
-  background: color-mix(in srgb, var(--fs-error) 10%, transparent);
-  border: 1px solid var(--fs-error);
-  border-radius: var(--fs-radius-sm);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  border: 1px solid var(--color-danger);
+  border-radius: var(--radius-sm);
   font-size: 0.85rem;
-  color: var(--fs-error);
+  color: var(--color-danger);
+}
+
+/* Review / diff */
+.assist-review-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
 }
 .diff-view {
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-page);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
   font-size: 0.82rem;
   font-family: monospace;
   max-height: 340px;
@@ -146,15 +284,15 @@
   line-height: 1.5;
 }
 .diff-delete {
-  background: color-mix(in srgb, var(--fs-error) 12%, transparent);
-  color: var(--fs-error);
+  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
+  color: var(--color-danger);
 }
 .diff-insert {
-  background: color-mix(in srgb, var(--fs-success) 12%, transparent);
-  color: var(--fs-success);
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
+  color: var(--color-success);
 }
 .diff-equal {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 .diff-marker {
   flex-shrink: 0;
@@ -170,7 +308,7 @@
 }
 .diff-empty {
   padding: 0.5rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   font-size: 0.82rem;
 }
 .assist-actions {
@@ -178,16 +316,63 @@
   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(--fs-action-primary);
+  background: var(--color-action-primary);
   color: var(--fs-text-on-action);
   border: none;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.8rem;
   box-shadow: 0 2px 8px var(--color-shadow);
@@ -199,12 +384,12 @@
   display: none;
   width: 100%;
   padding: 0.6rem 1rem;
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-secondary);
   border: none;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   font-size: 0.85rem;
   font-weight: 500;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   cursor: pointer;
   text-align: left;
   font-family: inherit;
@@ -223,7 +408,7 @@
 .sb-label {
   font-size: 0.78rem;
   font-weight: 500;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -231,10 +416,10 @@
 .sb-input {
   width: 100%;
   padding: 0.35rem 0.5rem;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-primary);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-card);
+  color: var(--color-text);
   font-size: 0.875rem;
   font-family: inherit;
   box-sizing: border-box;
@@ -242,11 +427,11 @@
 .sb-select:focus,
 .sb-input:focus {
   outline: none;
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary);
 }
 .sb-divider {
   height: 1px;
-  background: var(--fs-border-color);
+  background: var(--color-border);
   margin: 0.15rem 0;
 }
 @media (max-width: 720px) {
@@ -260,9 +445,22 @@
 
 /* ── Mobile ── */
 @media (max-width: 768px) {
+  .editor-body {
+    flex-direction: column;
+  }
+  .assist-panel {
+    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;
+  }
   .editor-header {
     padding: 0.75rem 1rem 0.5rem;
   }
+  .editor-main {
+    padding: 0.5rem 1rem 1rem;
+  }
 }
 
 /* ---------------------------------------------------------------------------
@@ -282,14 +480,14 @@
 .btn-accept,
 .btn-generate,
 .btn-save {
-  background: var(--fs-action-primary);
+  background: var(--color-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(--fs-action-primary-hover);
+  background: var(--color-action-primary-hover);
 }
 
 .btn-back,
@@ -299,7 +497,7 @@
 .btn-suggest-tags {
   background: none;
   border: var(--fs-border);
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
 .btn-back:not(:disabled):hover,
 .btn-clear:not(:disabled):hover,
@@ -307,16 +505,16 @@
 .btn-proofread:not(:disabled):hover,
 .btn-suggest-tags:not(:disabled):hover {
   border: var(--fs-border-hover);
-  background: var(--fs-surface-hover);
+  background: var(--color-hover);
 }
 
 .btn-delete {
-  background: var(--fs-action-destructive);
+  background: var(--color-action-destructive);
   color: var(--fs-text-on-action);
   border: none;
 }
 .btn-delete:not(:disabled):hover {
-  background: var(--fs-action-destructive-hover);
+  background: var(--color-action-destructive-hover);
 }
 
 /* Shared geometry for every alias above. */
@@ -343,12 +541,12 @@
 .btn-dismiss-tags {
   background: none;
   border: none;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   padding: 2px var(--fs-space-1);
   font-size: var(--fs-size-tiny);
   line-height: 1;
 }
-.btn-dismiss-tags:hover { color: var(--fs-text-primary); }
+.btn-dismiss-tags:hover { color: var(--color-text); }
 
 .btn-accept:disabled, .btn-generate:disabled, .btn-save:disabled,
 .btn-back:disabled, .btn-clear:disabled, .btn-reject:disabled,
@@ -357,36 +555,3 @@
   opacity: var(--fs-disabled-opacity);
   cursor: not-allowed;
 }
-
-/* Shared by NoteEditorView and TaskEditorView — both carried identical scoped
-   copies of these until #2903 (milestone 299); one source here. */
-.body-tabs-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--fs-border-color);
-}
-.body-editor-wrap {
-  min-height: 200px;
-}
-.stream-preview {
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  padding: 0.75rem;
-  background: var(--fs-surface-raised);
-  min-height: 200px;
-}
-.main-diff {
-  flex: 1;
-  min-height: 0;
-}
-.assist-section-title {
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: var(--fs-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}

frontend/src/assets/prose.css

@@ -41,8 +41,8 @@
 }
 
 .prose pre {
-  background: var(--fs-surface-code);
-  border: 1px solid var(--fs-border-color);
+  background: var(--color-code-bg);
+  border: 1px solid var(--color-border);
   border-radius: 6px;
   padding: 0.75rem;
   overflow-x: auto;
@@ -57,7 +57,7 @@
 }
 
 .prose code {
-  background: var(--fs-surface-code-inline);
+  background: var(--color-code-inline-bg);
   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(--fs-border-color);
+  border: 1px solid var(--color-border);
   padding: 0.4rem 0.6rem;
   text-align: left;
 }
 
 .prose thead th {
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-secondary);
   font-weight: 600;
 }
 
 .prose tbody tr:nth-child(even) {
-  background: var(--fs-table-stripe);
+  background: var(--color-table-stripe);
 }
 
 .prose blockquote {
-  border-left: 3px solid var(--fs-border-color);
+  border-left: 3px solid var(--color-border);
   margin: 0 0 0.6rem;
   padding: 0.25rem 0 0.25rem 0.75rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .prose blockquote p:last-child {
@@ -100,7 +100,7 @@
 
 .prose hr {
   border: none;
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border);
   margin: 1rem 0;
 }
 
@@ -110,7 +110,7 @@
 }
 
 .prose a {
-  color: var(--fs-accent);
+  color: var(--color-primary);
   text-decoration: none;
 }
 
@@ -119,8 +119,8 @@
 }
 
 .prose .inline-tag {
-  color: var(--fs-accent);
-  background: var(--fs-accent-soft);
+  color: var(--color-tag-text);
+  background: var(--color-tag-bg);
   padding: 0.1rem 0.35rem;
   border-radius: 4px;
   text-decoration: none;
@@ -133,8 +133,8 @@
 }
 
 .prose .wikilink {
-  color: var(--fs-wikilink);
-  background: var(--fs-accent-soft);
+  color: var(--color-wikilink);
+  background: var(--color-wikilink-bg);
   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(--fs-accent);
+  accent-color: var(--color-primary);
   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(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 /* 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(--fs-accent);
+  accent-color: var(--color-primary);
   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(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 .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(--fs-text-tertiary);
+  color: var(--color-text-muted, var(--color-text-secondary));
   content: attr(data-placeholder);
   float: left;
   height: 0;
@@ -227,12 +227,12 @@
 }
 
 .tiptap-wrapper {
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-primary);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-card);
+  color: var(--color-text);
 }
 
 .tiptap-wrapper:focus-within {
-  box-shadow: var(--fs-focus-ring);
+  box-shadow: var(--focus-ring, 0 0 0 2px var(--color-primary));
 }

frontend/src/assets/rules-shared.css

@@ -1,33 +0,0 @@
-/* Shared by the rules panes (RulebookListPane, RuleListPane,
-   RulebookDetailPane, RuleSweepPane): the pane surface, its heading, and the
-   title chip. Counting them in this comment went stale the first time a
-   fourth was added, so it no longer does. Load with
-   <style src="@/assets/rules-shared.css" /> beside the component's own
-   scoped block; never restate these there (#2903, milestone 299). */
-.pane {
-  background: var(--fs-surface-hover);
-  padding: 1rem;
-  overflow-y: auto;
-}
-.pane header h2 {
-  font-family: Fraunces, serif;
-  font-style: italic;
-  margin: 0 0 0.5rem 0;
-}
-.form-buttons { display: flex; gap: 0.5rem; }
-
-/* A small marker beside a rule's title. Two of these appeared within one
-   milestone (tier, then verification) and were byte-identical; a third would
-   have drifted. The pane's italic serif title is inherited by anything inside
-   it, so the chip resets family and style explicitly. */
-.rule-chip {
-  margin-left: 0.4rem;
-  font-family: var(--fs-font-body);
-  font-style: normal;
-  font-size: 0.62rem;
-  color: var(--fs-text-secondary);
-  background: var(--fs-surface-raised);
-  border-radius: var(--fs-radius-pill);
-  padding: 0.05rem 0.4rem;
-  vertical-align: middle;
-}

frontend/src/assets/theme.css

@@ -188,21 +188,126 @@
  */
 
 /* ==========================================================================
-   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.
+   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.
    ========================================================================== */
 
 :root {
-  /* 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. */
+  /* 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);
   --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);
 }
 
 /* ==========================================================================
@@ -272,10 +377,17 @@ button:not(:disabled):active,
     display: none !important;
   }
   button,
-  [role="button"] {
+  [role="button"],
+  .btn-new-conv,
+  .btn-send {
     min-height: 44px;
   }
 }
+@media (min-width: 769px) {
+  .hide-desktop {
+    display: none !important;
+  }
+}
 
 /* Neutral hairline scrollbars — chrome is structural, not branded */
 ::-webkit-scrollbar {

frontend/src/assets/viewer-shared.css

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

frontend/src/components/AppHeader.vue

@@ -6,7 +6,7 @@ import { useShortcuts } from "@/composables/useShortcuts";
 import { useAuthStore } from "@/stores/auth";
 import AppLogo from "@/components/AppLogo.vue";
 import NotificationBell from "@/components/NotificationBell.vue";
-import { Sun, Moon, Settings, Trash2 } from "lucide-vue-next";
+import { Sun, Moon, Palette, Settings, Trash2 } from "lucide-vue-next";
 
 const { theme, toggleTheme } = useTheme();
 const { toggleShortcuts } = useShortcuts();
@@ -50,12 +50,6 @@ router.afterEach(() => {
           <router-link to="/projects" class="nav-link">Projects</router-link>
           <router-link to="/snippets" class="nav-link">Snippets</router-link>
           <router-link to="/rules" class="nav-link">Rulebooks</router-link>
-          <!-- A design system is a RECORD you author, not a setting. It sat in
-               the utility cluster with Trash and Settings while /design was a
-               read-only gallery, and stayed there after it became a record type
-               with its own table, sharing and MCP tools. Content, by the same
-               rule that puts Snippets and Rulebooks here. -->
-          <router-link to="/design-systems" class="nav-link">Design</router-link>
         </div>
       </div>
 
@@ -70,6 +64,16 @@ router.afterEach(() => {
           <Moon v-else :size="16" />
         </button>
 
+        <!-- Design. An icon rather than a sixth primary nav link: it's a
+             meta-surface like Trash and Settings, but hiding it entirely would
+             defeat the point of having somewhere the design system is visible.
+             Points at the RECORD, not the live-token view — the record is what
+             you work with; the live view is the check on it, and it's a tab
+             away. -->
+        <router-link to="/design-systems" class="btn-icon" aria-label="Design" title="Design">
+          <Palette :size="16" />
+        </router-link>
+
         <!-- Trash link -->
         <router-link to="/trash" class="btn-icon" aria-label="Trash" title="Trash">
           <Trash2 :size="16" />
@@ -102,9 +106,9 @@ router.afterEach(() => {
       <router-link to="/projects" class="nav-link">Projects</router-link>
       <router-link to="/snippets" class="nav-link">Snippets</router-link>
       <router-link to="/rules" class="nav-link">Rulebooks</router-link>
-      <router-link to="/design-systems" class="nav-link">Design</router-link>
       <router-link to="/shared" class="nav-link">Shared</router-link>
       <div class="mobile-divider"></div>
+      <router-link to="/design-systems" class="nav-link">Design</router-link>
       <router-link to="/trash" class="nav-link">Trash</router-link>
       <router-link to="/settings" class="nav-link">Settings</router-link>
       <div class="mobile-divider"></div>
@@ -124,35 +128,20 @@ router.afterEach(() => {
 
 <style scoped>
 .app-header {
-  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);
+  background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
+  border-bottom: 1px solid rgba(91, 74, 138, 0.18);
   position: relative;
 }
-/* Three tracks, not a flex row with an absolutely-centred overlay.
- *
- * The pill bar used to be `position: absolute; left: 50%`, which meant it did
- * not participate in layout: when the header ran out of room it OVERLAPPED the
- * brand and the utility cluster rather than pushing them, and nothing wrapped
- * or scrolled to signal it. A sixth link reached that point at ~1270px, which
- * is an ordinary window on any monitor.
- *
- * `1fr auto 1fr` fixes it structurally. A `1fr` track has an AUTO minimum, so
- * neither side can be squeezed below its content, and the two side tracks stay
- * equal to each other — which is what keeps the bar centred in the viewport
- * rather than merely centred in the leftover space. Overflow becomes the
- * header growing, not two things sharing pixels. */
 .nav {
   padding: 0.6rem 1.5rem;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  display: flex;
   align-items: center;
-  gap: 0.75rem;
+  justify-content: space-between;
   position: relative;
 }
 
 /* Left — brand */
 .nav-brand {
-  justify-self: start;
   display: flex;
   align-items: center;
   gap: 0.45rem;
@@ -170,7 +159,9 @@ router.afterEach(() => {
 
 /* Center — pill bar */
 .nav-center {
-  justify-self: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
 }
@@ -178,23 +169,21 @@ router.afterEach(() => {
   display: flex;
   align-items: center;
   gap: 2px;
-  background: var(--fs-accent-faint);
+  background: var(--color-primary-faint);
   border-radius: 10px;
   padding: 3px;
 }
 
 /* Right */
 .nav-right {
-  justify-self: end;
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
-  min-width: 0;
 }
 
 .nav-link {
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   text-decoration: none;
   font-size: 0.82rem;
   padding: 0.3rem 0.75rem;
@@ -202,34 +191,72 @@ router.afterEach(() => {
   transition: background 0.15s, color 0.15s;
 }
 .nav-link:hover {
-  color: var(--fs-text-primary);
-  background: var(--fs-accent-soft);
+  color: var(--color-text);
+  background: var(--color-primary-tint);
 }
 .nav-link.router-link-active {
-  color: var(--fs-accent);
+  color: var(--color-primary-solid);
   font-weight: 500;
-  background: color-mix(in srgb, var(--fs-accent) 25%, transparent);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--fs-accent) 30%, transparent);
+  background: rgba(91, 74, 138, 0.25);
+  box-shadow: 0 0 16px rgba(91, 74, 138, 0.3);
+}
+
+/* Status indicator */
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  cursor: default;
+  padding: 0 0.25rem;
+}
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.status-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+}
+/* Status dots are indicator lights, not semantic-palette buttons —
+   they want to read as vital (Moss/Warning/Error are too muted for
+   a "ready" indicator). Hardcoded bright values; the rest of the
+   system still uses the semantic tokens. */
+.status-green .status-dot  { background: #4ade80; animation: status-pulse 2.5s ease-in-out infinite; }
+.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; }
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+@keyframes status-pulse {
+  0%, 100% { box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); }
+  50% { box-shadow: 0 0 10px rgba(74, 222, 128, 0.6); }
 }
 
 /* Icon buttons (?, theme, gear) */
 .btn-icon {
   background: none;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   padding: 0.25rem 0.45rem;
   cursor: pointer;
   font-size: 0.95rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.btn-icon:hover {
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-primary);
-  border-color: var(--fs-accent);
+.btn-icon:hover,
+.btn-icon.active {
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  border-color: var(--color-primary);
 }
 
 /* User info */
@@ -239,42 +266,36 @@ router.afterEach(() => {
   gap: 0.4rem;
   margin-left: 0.25rem;
   padding-left: 0.5rem;
-  border-left: 1px solid var(--fs-border-color);
+  border-left: 1px solid var(--color-border);
 }
 .username {
   font-size: 0.85rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-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. */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 12ch;
 }
 .admin-badge {
   font-size: 0.65rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--fs-accent);
-  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
   padding: 0.1rem 0.35rem;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--radius-sm);
 }
 .btn-logout {
   background: none;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   padding: 0.2rem 0.5rem;
   cursor: pointer;
   font-size: 0.8rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   font-family: inherit;
 }
 .btn-logout:hover {
-  color: var(--fs-error);
-  border-color: var(--fs-error);
+  color: var(--color-danger);
+  border-color: var(--color-danger);
 }
 
 /* Hamburger — mobile only */
@@ -292,7 +313,7 @@ router.afterEach(() => {
   display: block;
   width: 20px;
   height: 2px;
-  background: var(--fs-text-primary);
+  background: var(--color-text);
   border-radius: 1px;
 }
 
@@ -301,13 +322,13 @@ router.afterEach(() => {
   display: flex;
   flex-direction: column;
   padding: 0.5rem 1rem 0.75rem;
-  border-top: 1px solid var(--fs-border-color);
-  background: var(--fs-surface-raised);
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
   gap: 0.1rem;
 }
 .mobile-divider {
   height: 1px;
-  background: var(--fs-border-color);
+  background: var(--color-border);
   margin: 0.4rem 0;
 }
 .mobile-actions {
@@ -321,29 +342,15 @@ router.afterEach(() => {
   align-items: center;
   gap: 0.5rem;
   padding-top: 0.4rem;
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border);
   margin-top: 0.25rem;
 }
 
-/* The grid above means running out of room can no longer cause a collision —
-   but it can still make the header wider than the window, and a horizontally
-   scrolling header is its own defect. So shed width before that happens. The
-   wordmark goes first: the logo beside it says the same thing and is still the
-   link home. */
-@media (max-width: 1280px) {
-  .brand-text {
-    display: none;
-  }
-  .nav-link {
-    padding: 0.3rem 0.5rem;
-    font-size: 0.78rem;
-  }
-}
-
 @media (max-width: 768px) {
   .nav-center {
     display: none;
   }
+  .status-indicator,
   .btn-icon,
   .user-info {
     display: none;
@@ -359,7 +366,7 @@ router.afterEach(() => {
     border-radius: 8px;
   }
   .mobile-menu .nav-link.router-link-active {
-    background: var(--fs-accent-wash);
+    background: var(--color-primary-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(--fs-accent)" />
-        <stop offset="100%" stop-color="var(--fs-accent-deep)" />
+        <stop offset="0%" stop-color="var(--color-primary-solid)" />
+        <stop offset="100%" stop-color="var(--color-primary-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(--fs-accent) 70%, transparent);
+  stroke: color-mix(in srgb, var(--color-primary) 70%, transparent);
 }
 .logo-spine {
-  stroke: var(--fs-text-secondary);
+  stroke: var(--color-text-secondary);
 }
 .logo-lines {
-  stroke: var(--fs-text-tertiary);
+  stroke: var(--color-text-muted);
 }
 </style>

frontend/src/components/DesignTabs.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * Sub-navigation for the Design surface.
+ *
+ * There are two pages here and they are halves of ONE thing: the record that
+ * decides the styling, and what the browser is actually rendering from it. They
+ * were briefly two top-level nav entries, which put the read-only diagnostic
+ * first and buried the editable record under it — backwards, since the record
+ * is the thing you work with and the live view is the check on it.
+ *
+ * A component rather than the same markup pasted into both views: two copies of
+ * a tab bar diverge the moment a third tab appears, and that is the exact shape
+ * of duplication this whole surface exists to make visible.
+ */
+</script>
+
+<template>
+  <nav class="design-tabs" aria-label="Design views">
+    <router-link to="/design-systems" class="design-tab">Design system</router-link>
+    <router-link to="/design" class="design-tab">Live tokens</router-link>
+  </nav>
+</template>
+
+<style scoped>
+.design-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 1.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.design-tab {
+  padding: 0.5rem 0.9rem;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.design-tab:hover {
+  color: var(--color-text);
+}
+
+/* `router-link-active` rather than `-exact-active`: both routes are leaves, and
+   exact matching would drop the highlight on any future child route. */
+.design-tab.router-link-active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+</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(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-page);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
   overflow: hidden;
 }
 
@@ -103,15 +103,15 @@ function markerFor(type: DiffLine['type']): string {
   display: flex;
   gap: 1rem;
   padding: 0.4rem 0.75rem;
-  background: var(--fs-surface-raised);
-  border-bottom: 1px solid var(--fs-border-color);
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
   font-size: 0.78rem;
   font-family: monospace;
   font-weight: 600;
 }
 
-.diff-summary-ins { color: var(--fs-success); }
-.diff-summary-del { color: var(--fs-error); }
+.diff-summary-ins { color: var(--color-success, #2ecc71); }
+.diff-summary-del { color: var(--color-danger, #e74c3c); }
 
 .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(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .diff-line {
@@ -136,24 +136,24 @@ function markerFor(type: DiffLine['type']): string {
 }
 
 .diff-delete {
-  background: color-mix(in srgb, var(--fs-error) 12%, transparent);
-  color: var(--fs-error);
+  background: color-mix(in srgb, var(--color-danger, #e74c3c) 12%, transparent);
+  color: var(--color-danger, #e74c3c);
 }
 
 .diff-insert {
-  background: color-mix(in srgb, var(--fs-success) 12%, transparent);
-  color: var(--fs-success);
+  background: color-mix(in srgb, var(--color-success, #2ecc71) 12%, transparent);
+  color: var(--color-success, #2ecc71);
 }
 
 .diff-equal {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .diff-collapse {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   opacity: 0.6;
-  border-top: 1px dashed var(--fs-border-color);
-  border-bottom: 1px dashed var(--fs-border-color);
+  border-top: 1px dashed var(--color-border);
+  border-bottom: 1px dashed var(--color-border);
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
 }

frontend/src/components/HistoryPanel.vue

@@ -3,7 +3,6 @@ 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;
@@ -57,6 +56,14 @@ 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 {
@@ -205,7 +212,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">{{ fmtStamp(v.created_at) }}</div>
+              <div class="history-item-date">{{ formatDate(v.created_at) }}</div>
             </div>
           </div>
 
@@ -302,7 +309,7 @@ onMounted(loadVersions);
   align-items: center;
   justify-content: space-between;
   padding: 0.9rem 1.25rem;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .history-title {
@@ -315,11 +322,11 @@ onMounted(loadVersions);
   border: none;
   font-size: 1.25rem;
   cursor: pointer;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   line-height: 1;
   padding: 0.1rem 0.3rem;
 }
-.history-close:hover { color: var(--fs-text-primary); }
+.history-close:hover { color: var(--color-text); }
 
 .history-body {
   flex: 1;
@@ -331,7 +338,7 @@ onMounted(loadVersions);
 .history-list {
   width: 220px;
   flex-shrink: 0;
-  border-right: 1px solid var(--fs-border-color);
+  border-right: 1px solid var(--color-border);
   overflow-y: auto;
 }
 
@@ -339,18 +346,18 @@ onMounted(loadVersions);
   padding: 0.6rem 0.9rem;
   cursor: pointer;
   border-left: 3px solid transparent;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
 }
-.history-item:hover { background: var(--fs-surface-raised); }
+.history-item:hover { background: var(--color-bg-secondary); }
 .history-item.selected {
-  border-left-color: var(--fs-accent);
-  background: var(--fs-surface-raised);
+  border-left-color: var(--color-primary);
+  background: var(--color-bg-secondary);
 }
 
 .history-item-title {
   font-size: 0.85rem;
   font-weight: 500;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -358,7 +365,7 @@ onMounted(loadVersions);
 
 .history-item-date {
   font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   margin-top: 0.15rem;
 }
 
@@ -374,7 +381,7 @@ onMounted(loadVersions);
 .history-empty {
   padding: 1rem;
   font-size: 0.85rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .history-footer {
@@ -383,7 +390,7 @@ onMounted(loadVersions);
   gap: 0.5rem;
   justify-content: flex-end;
   padding: 0.75rem 1.25rem;
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border);
 }
 
 
@@ -396,12 +403,12 @@ onMounted(loadVersions);
   font-size: 0.85em;
   line-height: 1;
 }
-.pin-badge-manual { color: var(--fs-accent); }
-.pin-badge-auto { color: var(--fs-text-tertiary); }
+.pin-badge-manual { color: var(--color-primary, #6366f1); }
+.pin-badge-auto { color: var(--color-text-muted, rgba(255, 255, 255, 0.5)); }
 
 .history-item-label {
   font-size: 0.72rem;
-  color: var(--fs-accent);
+  color: var(--color-primary, #6366f1);
   font-style: italic;
   margin-top: 0.15rem;
   overflow: hidden;
@@ -412,7 +419,7 @@ onMounted(loadVersions);
 /* ── Pin controls above the diff ────────────────────────────────────────── */
 .version-pin-controls {
   padding: 0.4rem 0.5rem 0.5rem;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   font-size: 0.82rem;
 }
 .pin-actions {
@@ -423,7 +430,7 @@ onMounted(loadVersions);
 }
 .pin-state {
   font-style: italic;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted, rgba(255, 255, 255, 0.6));
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -435,13 +442,13 @@ onMounted(loadVersions);
   font-size: 0.78rem;
   background: transparent;
   color: inherit;
-  border: 1px solid var(--fs-border-color);
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
   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(--fs-accent);
+  border-color: var(--color-primary, #6366f1);
 }
 .btn-unpin:hover:not(:disabled) {
   background: rgba(239, 68, 68, 0.10);
@@ -456,27 +463,27 @@ onMounted(loadVersions);
   flex: 1;
   padding: 0.3rem 0.5rem;
   font-size: 0.85rem;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  background: var(--color-input-bg, rgba(255, 255, 255, 0.03));
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius-sm, 4px);
   color: inherit;
 }
 .pin-label-input:focus {
   outline: none;
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary, #6366f1);
 }
 .btn-pin-save, .btn-pin-cancel {
   padding: 0.3rem 0.7rem;
   font-size: 0.78rem;
   background: transparent;
   color: inherit;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius-sm, 4px);
   cursor: pointer;
 }
 .btn-pin-save:hover:not(:disabled) {
   background: rgba(99, 102, 241, 0.12);
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary, #6366f1);
 }
 .btn-pin-save:disabled, .btn-pin-cancel:disabled,
 .btn-pin:disabled, .btn-pin-edit:disabled, .btn-unpin:disabled {

frontend/src/components/InceptionCard.vue

@@ -1,188 +0,0 @@
-<script setup lang="ts">
-/**
- * The inception form (milestone 297): "what does this project inherit?"
- *
- * Two homes, one component. mode="create" rides the New-project modal's
- * second step and only emits the choices (the project does not exist yet);
- * mode="decide" sits on ProjectView for an undecided project, loads that
- * project's current defaults, and records the decision itself.
- */
-import { computed, onMounted, ref, watch } from "vue";
-import { apiErrorMessage } from "@/api/client";
-import { fetchDesignSystems } from "@/api/designSystems";
-import {
-  decideInception, emptyChoices, fetchInceptionDefaults,
-  type InceptionChoices, type InceptionDecision, type InceptionDefaults,
-} from "@/api/inception";
-import { listRulebooks } from "@/api/rulebooks";
-
-const props = withDefaults(defineProps<{
-  mode: "create" | "decide";
-  projectId?: number;
-  choices?: InceptionChoices;
-}>(), { projectId: 0, choices: undefined });
-
-const emit = defineEmits<{
-  "update:choices": [value: InceptionChoices];
-  decided: [decision: InceptionDecision];
-}>();
-
-const local = ref<InceptionChoices>(props.choices ? { ...props.choices } : emptyChoices());
-const alwaysOn = ref<{ id: number; title: string }[]>([]);
-const others = ref<{ id: number; title: string }[]>([]);
-const designSystems = ref<{ id: number; title: string }[]>([]);
-const systemsCount = ref(0);
-const loading = ref(true);
-const saving = ref(false);
-const error = ref("");
-
-function emitChoices() {
-  emit("update:choices", { ...local.value });
-}
-watch(local, emitChoices, { deep: true });
-
-async function load() {
-  loading.value = true;
-  error.value = "";
-  try {
-    if (props.mode === "decide" && props.projectId) {
-      const d: InceptionDefaults = await fetchInceptionDefaults(props.projectId);
-      alwaysOn.value = d.always_on_rulebooks;
-      others.value = d.other_rulebooks;
-      designSystems.value = d.design_systems;
-      systemsCount.value = d.systems;
-      // Start from what stands today so "record" without changes is a true inherit-all.
-      local.value = {
-        exclude_always_on_rulebooks: d.excluded_always_on.map((r) => r.id),
-        subscribe_rulebooks: d.subscribed_rulebooks.map((r) => r.id),
-        design_system_id: d.design_system_id,
-        seed_systems: false,
-      };
-    } else {
-      const [rulebooks, ds] = await Promise.all([listRulebooks(), fetchDesignSystems()]);
-      alwaysOn.value = rulebooks.filter((r) => r.always_on).map((r) => ({ id: r.id, title: r.title }));
-      others.value = rulebooks.filter((r) => !r.always_on).map((r) => ({ id: r.id, title: r.title }));
-      designSystems.value = ds.design_systems.map((d) => ({ id: d.id, title: d.title }));
-    }
-  } catch (e: unknown) {
-    error.value = apiErrorMessage(e, "Could not load what this project could inherit");
-  } finally {
-    loading.value = false;
-  }
-}
-
-function inherits(id: number): boolean {
-  return !local.value.exclude_always_on_rulebooks.includes(id);
-}
-function toggleInherit(id: number) {
-  const list = local.value.exclude_always_on_rulebooks;
-  local.value.exclude_always_on_rulebooks = list.includes(id) ? list.filter((x) => x !== id) : [...list, id];
-}
-function subscribed(id: number): boolean {
-  return local.value.subscribe_rulebooks.includes(id);
-}
-function toggleSubscribe(id: number) {
-  const list = local.value.subscribe_rulebooks;
-  local.value.subscribe_rulebooks = list.includes(id) ? list.filter((x) => x !== id) : [...list, id];
-}
-
-const nothingToDecide = computed(
-  () => !alwaysOn.value.length && !others.value.length && !designSystems.value.length,
-);
-
-async function record() {
-  if (!props.projectId) return;
-  saving.value = true;
-  error.value = "";
-  try {
-    const decision = await decideInception(props.projectId, local.value);
-    emit("decided", decision);
-  } catch (e: unknown) {
-    error.value = apiErrorMessage(e, "Could not record the decision");
-  } finally {
-    saving.value = false;
-  }
-}
-
-onMounted(load);
-</script>
-
-<template>
-  <section class="inception" aria-labelledby="inception-title">
-    <h3 id="inception-title" class="inception-title">What does this project inherit?</h3>
-    <p class="inception-lede">
-      A project's inheritance is a decision, not a default. Until it is recorded,
-      every always-on rulebook binds, nothing is subscribed, and there is no design
-      system or Systems.
-    </p>
-    <p v-if="loading" class="inception-muted">Loading…</p>
-    <p v-else-if="error" class="error-msg">{{ error }}</p>
-    <template v-else>
-      <div v-if="alwaysOn.length" class="inception-group">
-        <h4>Always-on rulebooks</h4>
-        <p class="inception-muted">Checked = inherits. Uncheck to exclude a rulebook for this project only.</p>
-        <label v-for="rb in alwaysOn" :key="rb.id" class="inception-choice">
-          <input type="checkbox" :checked="inherits(rb.id)" @change="toggleInherit(rb.id)" />
-          <span>{{ rb.title }}</span>
-        </label>
-      </div>
-      <div v-if="others.length" class="inception-group">
-        <h4>Subscribe to rulebooks</h4>
-        <label v-for="rb in others" :key="rb.id" class="inception-choice">
-          <input type="checkbox" :checked="subscribed(rb.id)" @change="toggleSubscribe(rb.id)" />
-          <span>{{ rb.title }}</span>
-        </label>
-      </div>
-      <div class="inception-group">
-        <h4>Design system</h4>
-        <select v-model="local.design_system_id" class="inception-select" aria-label="Design system">
-          <option :value="null">None</option>
-          <option v-for="ds in designSystems" :key="ds.id" :value="ds.id">{{ ds.title }}</option>
-        </select>
-      </div>
-      <div class="inception-group">
-        <label class="inception-choice">
-          <input type="checkbox" v-model="local.seed_systems" :disabled="systemsCount > 0" />
-          <span>
-            Seed the standard starter Systems (CI &amp; Release, Auth &amp; Access, Data Model &amp; Storage, …)
-            <em v-if="systemsCount > 0" class="inception-muted"> — this project already has {{ systemsCount }}</em>
-          </span>
-        </label>
-      </div>
-      <p v-if="nothingToDecide" class="inception-muted">
-        Nothing to inherit yet on this install — recording still settles the question.
-      </p>
-      <div v-if="mode === 'decide'" class="inception-actions">
-        <button class="btn-primary" :disabled="saving" @click="record">
-          {{ saving ? "Recording…" : "Record decision" }}
-        </button>
-      </div>
-    </template>
-  </section>
-</template>
-
-<style scoped>
-.inception {
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
-  padding: 1.25rem 1.5rem;
-  margin-bottom: 1.5rem;
-}
-.inception-title { margin: 0 0 0.35rem; font-size: 1.05rem; }
-.inception-lede { margin: 0 0 1rem; color: var(--fs-text-secondary); font-size: 0.9rem; }
-.inception-muted { color: var(--fs-text-tertiary); font-size: 0.85rem; margin: 0 0 0.35rem; }
-.inception-group { margin-bottom: 1rem; }
-.inception-group h4 { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 500; }
-.inception-choice { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; margin: 0.25rem 0; }
-.inception-choice input { margin-top: 0.2rem; accent-color: var(--fs-accent); }
-.inception-select {
-  padding: 0.45rem 0.7rem;
-  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;
-}
-.inception-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
-</style>

frontend/src/components/InlineAssistPanel.vue

@@ -74,11 +74,11 @@ const markers: Record<DiffLine["type"], string> = {
 
 <style scoped>
 .iap {
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--radius-sm);
   margin-bottom: 0.75rem;
   overflow: hidden;
-  border: 1px solid var(--fs-border-color);
-  background: var(--fs-surface-page);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
 }
 
 /* ── 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(--fs-border-color);
-  background: var(--fs-surface-raised);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
 }
 
 /* ── Streaming ── */
 .iap-streaming {
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary);
 }
 .iap-streaming .iap-header {
-  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-raised));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-secondary));
 }
 
 .iap-pulse {
@@ -105,7 +105,7 @@ const markers: Record<DiffLine["type"], string> = {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--fs-accent);
+  background: var(--color-primary);
   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(--fs-text-primary);
+  color: var(--color-text);
   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(--fs-border-color);
-  color: var(--fs-text-secondary);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  border-radius: var(--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(--fs-error);
-  color: var(--fs-error);
+  border-color: var(--color-danger, #e74c3c);
+  color: var(--color-danger, #e74c3c);
 }
 
 .iap-stream-preview {
@@ -150,29 +150,29 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-waiting {
   padding: 0.75rem;
   font-size: 0.85rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 /* ── Review ── */
 .iap-review-title {
   flex: 1;
   font-weight: 600;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
 
 .iap-btn-toggle {
   background: none;
-  border: 1px solid var(--fs-border-color);
-  color: var(--fs-text-secondary);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-sm);
   padding: 0.15rem 0.5rem;
   cursor: pointer;
   font-size: 0.78rem;
   font-family: inherit;
 }
 .iap-btn-toggle:hover {
-  border-color: var(--fs-accent);
-  color: var(--fs-accent);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 .iap-actions {
@@ -183,7 +183,7 @@ const markers: Record<DiffLine["type"], string> = {
 .iap-btn-accept,
 .iap-btn-reject {
   border: none;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--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(--fs-success);
+  background: var(--color-success, #22c55e);
   color: var(--fs-text-on-action);
 }
 .iap-btn-accept:hover { opacity: 0.85; }
 
 .iap-btn-reject {
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-secondary);
-  border: 1px solid var(--fs-border-color);
+  background: var(--color-bg-card, var(--color-bg));
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
 }
 .iap-btn-reject:hover {
-  border-color: var(--fs-error);
-  color: var(--fs-error);
+  border-color: var(--color-danger, #e74c3c);
+  color: var(--color-danger, #e74c3c);
 }
 
 /* ── Diff ── */
@@ -224,14 +224,14 @@ const markers: Record<DiffLine["type"], string> = {
   word-break: break-word;
 }
 
-.iap-diff-equal  { color: var(--fs-text-tertiary); }
+.iap-diff-equal  { color: var(--color-text-muted); }
 .iap-diff-delete {
-  background: color-mix(in srgb, var(--fs-error) 10%, transparent);
-  color: var(--fs-error);
+  background: color-mix(in srgb, var(--color-danger, #e74c3c) 10%, transparent);
+  color: var(--color-danger, #e74c3c);
 }
 .iap-diff-insert {
-  background: color-mix(in srgb, var(--fs-success) 10%, transparent);
-  color: var(--fs-success);
+  background: color-mix(in srgb, var(--color-success, #22c55e) 10%, transparent);
+  color: var(--color-success, #22c55e);
 }
 
 .iap-diff-marker {
@@ -243,7 +243,7 @@ const markers: Record<DiffLine["type"], string> = {
 
 .iap-diff-empty {
   padding: 0.75rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   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(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
   padding: 3px 4px;
 }
 
@@ -127,7 +127,7 @@ const groups = [
   display: block;
   width: 1px;
   height: 18px;
-  background: var(--fs-border-color);
+  background: var(--color-border);
   flex-shrink: 0;
   margin: 0 3px;
 }
@@ -141,7 +141,7 @@ const groups = [
   border: none;
   border-radius: 5px;
   background: transparent;
-  color: var(--fs-text-secondary);
+  color: var(--color-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(--fs-surface-raised);
-  color: var(--fs-text-primary);
+  background: var(--color-bg-card);
+  color: var(--color-text);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .md-btn.active {
-  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);
+  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);
 }
 
 .md-btn.active:hover {
-  background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
+  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
 }
 
 .btn-icon {

frontend/src/components/MilestoneSelector.vue

@@ -51,7 +51,7 @@ function onChange(e: Event) {
 
 <template>
   <select
-    class="fs-input milestone-select"
+    class="milestone-select"
     :value="modelValue ?? ''"
     :disabled="!projectId || loading"
     @change="onChange"
@@ -64,10 +64,23 @@ function onChange(e: Event) {
 </template>
 
 <style scoped>
-/* The input itself is the .fs-input canon (components.css); only the
-   layout remainder lives here. */
 .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);
+  font-size: 0.875rem;
+  font-family: inherit;
   box-sizing: border-box;
   width: 100%;
 }
+.milestone-select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+.milestone-select:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
 </style>

frontend/src/components/NoteCard.vue

@@ -60,15 +60,15 @@ function goEdit() {
 .note-card {
   display: block;
   padding: 1rem;
-  border-radius: var(--fs-radius-lg);
+  border-radius: var(--radius-md);
   text-decoration: none;
   color: inherit;
-  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);
+  background: var(--color-bg-card);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(91, 74, 138, 0.06);
   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(--fs-accent) 14.0%, transparent);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(91, 74, 138, 0.14);
   transform: translateY(-2px);
 }
 
@@ -78,18 +78,18 @@ function goEdit() {
   align-items: center;
   gap: 0.6rem;
   padding: 0.45rem 0.75rem;
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-card);
   box-shadow: none;
   border-radius: 0;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   transform: none !important;
 }
 .note-card.compact:first-child {
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border);
 }
 .note-card.compact:hover {
   box-shadow: none;
-  background: color-mix(in srgb, var(--fs-accent) 4%, transparent);
+  background: rgba(91, 74, 138, 0.04);
   transform: none;
 }
 .note-title-compact {
@@ -108,7 +108,7 @@ function goEdit() {
 }
 .timestamp-compact {
   font-size: 0.72rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   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(--fs-surface-raised);
-  color: var(--fs-text-secondary);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  background: var(--color-bg-card);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: color 0.15s, border-color 0.15s;
 }
 .btn-edit:hover {
-  color: var(--fs-accent);
-  border-color: var(--fs-accent);
+  color: var(--color-primary);
+  border-color: var(--color-primary);
 }
 .note-preview {
   margin: 0 0 0.5rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-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(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 </style>

frontend/src/components/NotificationBell.vue

@@ -60,11 +60,11 @@ onUnmounted(() => {
 
 .btn-bell {
   background: none;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   padding: 0.25rem 0.45rem;
   cursor: pointer;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -72,16 +72,16 @@ onUnmounted(() => {
 }
 .btn-bell:hover,
 .btn-bell.active {
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-primary);
-  border-color: var(--fs-accent);
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  border-color: var(--color-primary);
 }
 
 .bell-badge {
   position: absolute;
   top: -5px;
   right: -5px;
-  background: var(--fs-error);
+  background: var(--color-danger, #ef4444);
   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(--fs-surface-hover);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-xl);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
   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(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
-  background: var(--fs-surface-hover);
+  background: var(--color-surface);
 }
 
 .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(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   cursor: pointer;
   transition: background 0.1s;
 }
 .notif-item:last-child { border-bottom: none; }
-.notif-item:hover { background: var(--fs-surface-hover); }
+.notif-item:hover { background: var(--color-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(--fs-text-primary);
+  color: var(--color-text);
   line-height: 1.4;
   word-break: break-word;
 }
-.notif-time { font-size: 0.75rem; color: var(--fs-text-tertiary); }
+.notif-time { font-size: 0.75rem; color: var(--color-muted); }
 
 </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(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-primary);
+  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.85rem;
 }
 .page-btn:hover:not(:disabled) {
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-secondary);
 }
 .page-btn:disabled {
   opacity: 0.4;
   cursor: default;
 }
 .page-btn.active {
-  background: var(--fs-accent);
+  background: var(--color-primary);
   color: var(--fs-text-on-action);
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary);
 }
 .ellipsis {
   padding: 0 0.25rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 </style>

frontend/src/components/PriorityBadge.vue

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

frontend/src/components/ProjectDesignTab.vue

@@ -1,234 +0,0 @@
-<script setup lang="ts">
-/**
- * A project's own code, checked against the design system it is bound to (#2432).
- *
- * This is what the design surface is FOR: a project's recorded components
- * measured against the sheet they are supposed to use. The check itself is not
- * new — `check_snippets_against_system` has taken a project id since it was
- * written, and the route has always read `?project_id=`. Nothing on this side
- * ever passed one, so the capability shipped and stayed unreachable.
- *
- * The finding that matters most is the quiet one. `local_definitions` is a
- * snippet minting its own custom property instead of reaching for the shared
- * one — the codebase re-solving a solved problem, one component at a time.
- * Nothing breaks, no test fails, and the duplication only becomes visible when
- * someone changes the shared value and half the components don't move.
- *
- * SCOPE, and it is a limit rather than an omission: this reads RECORDED code —
- * snippets — because that is the code Scribe holds. A repository's own sources
- * are checked where they live, by that project's CI.
- */
-import { onMounted, ref, watch } from "vue";
-
-import { checkSnippets, type SnippetCheck } from "@/api/designSystems";
-
-const props = defineProps<{ projectId: number; designSystemId: number | null }>();
-
-const check = ref<SnippetCheck | null>(null);
-const loading = ref(false);
-const failed = ref(false);
-
-async function run() {
-  check.value = null;
-  failed.value = false;
-  if (props.designSystemId === null) return;
-  loading.value = true;
-  try {
-    check.value = await checkSnippets(props.designSystemId, props.projectId);
-  } catch {
-    // Said out loud rather than rendered as an empty result. "Couldn't check"
-    // and "nothing to report" look identical if you let them, and that is how
-    // a check comes to sit dead without anyone noticing (#2419).
-    failed.value = true;
-  } finally {
-    loading.value = false;
-  }
-}
-
-onMounted(run);
-watch(() => [props.projectId, props.designSystemId], run);
-</script>
-
-<template>
-  <div class="pdt">
-    <div v-if="designSystemId === null" class="pdt-note">
-      <strong>No design system for this project.</strong>
-      <p>
-        Bind one in the sidebar and this tab reports where the project's recorded
-        components disagree with it — references to tokens the system doesn't
-        have, literals it says to stop writing, and properties a component mints
-        for itself instead of reusing.
-      </p>
-    </div>
-
-    <p v-else-if="loading" class="pdt-muted">Checking this project's snippets…</p>
-
-    <div v-else-if="failed" class="pdt-note">
-      <strong>The check couldn't run.</strong>
-      <p>Nothing was compared — this is a failure, not a clean result.</p>
-    </div>
-
-    <template v-else-if="check">
-      <p v-if="!check.checked" class="pdt-muted">
-        This project has no recorded snippets, so nothing was checked. Record the
-        components you reuse and they get measured against the sheet.
-      </p>
-
-      <p v-else-if="!check.findings.length" class="pdt-clean">
-        {{ check.checked }} snippet{{ check.checked === 1 ? "" : "s" }} checked —
-        every reference resolves, and none mints a property of its own.
-      </p>
-
-      <template v-else>
-        <p class="pdt-summary">
-          <strong>{{ check.findings.length }}</strong> of {{ check.checked }}
-          snippet{{ check.checked === 1 ? "" : "s" }} disagree with the sheet.
-        </p>
-
-        <ul class="pdt-list">
-          <li v-for="f in check.findings" :key="f.snippet_id" class="pdt-finding">
-            <router-link :to="`/snippets/${f.snippet_id}`" class="pdt-title">
-              {{ f.title || "Untitled snippet" }}
-            </router-link>
-
-            <!-- Renders as nothing at all: no error, no failing test, just an
-                 element that quietly isn't styled. Leads for that reason. -->
-            <div v-if="f.unknown.length" class="pdt-row">
-              <span class="pdt-tag unknown">no such token</span>
-              <span class="pdt-detail">
-                <code v-for="name in f.unknown" :key="name">{{ name }}</code>
-              </span>
-            </div>
-
-            <div v-if="f.local_definitions.length" class="pdt-row">
-              <span class="pdt-tag local">defines its own</span>
-              <span class="pdt-detail">
-                <code v-for="name in f.local_definitions" :key="name">{{ name }}</code>
-              </span>
-            </div>
-
-            <div v-if="f.superseded_literals.length" class="pdt-row">
-              <span class="pdt-tag superseded">write the token</span>
-              <span class="pdt-detail">
-                <span v-for="s in f.superseded_literals" :key="s.literal" class="pdt-swap">
-                  <code>{{ s.literal }}</code> → <code>{{ s.use_instead }}</code>
-                </span>
-              </span>
-            </div>
-          </li>
-        </ul>
-      </template>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.pdt {
-  padding: var(--fs-space-2) 0;
-}
-
-.pdt-note {
-  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(--fs-text-secondary);
-  font-size: var(--fs-size-body-sm);
-  line-height: var(--fs-leading-body);
-  max-width: 70ch;
-}
-
-.pdt-muted,
-.pdt-clean,
-.pdt-summary {
-  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(--fs-status-done);
-}
-
-.pdt-summary {
-  color: var(--fs-text-secondary);
-}
-
-.pdt-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--fs-space-3);
-}
-
-.pdt-finding {
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-md);
-  padding: var(--fs-space-3);
-  min-width: 0;
-}
-
-.pdt-title {
-  display: block;
-  font-weight: var(--fs-weight-medium);
-  color: var(--fs-text-primary);
-  text-decoration: none;
-  margin-bottom: var(--fs-space-2);
-}
-.pdt-title:hover { color: var(--fs-accent); }
-
-.pdt-row {
-  display: flex;
-  align-items: baseline;
-  gap: var(--fs-space-2);
-  flex-wrap: wrap;
-  padding: 0.15rem 0;
-  min-width: 0;
-}
-
-.pdt-tag {
-  font-size: var(--fs-size-tiny);
-  text-transform: uppercase;
-  letter-spacing: var(--fs-tracking-tiny);
-  padding: 0.1rem 0.45rem;
-  border-radius: var(--fs-radius-sm);
-  white-space: nowrap;
-  flex: none;
-}
-
-.pdt-tag.unknown {
-  background: var(--fs-priority-high-bg);
-  color: var(--fs-priority-high);
-}
-
-.pdt-tag.local {
-  background: var(--fs-priority-medium-bg);
-  color: var(--fs-priority-medium);
-}
-
-.pdt-tag.superseded {
-  background: var(--fs-surface-hover);
-  color: var(--fs-text-tertiary);
-}
-
-.pdt-detail {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--fs-space-2);
-  font-size: var(--fs-size-code);
-  color: var(--fs-text-secondary);
-  min-width: 0;
-}
-
-.pdt-swap {
-  white-space: nowrap;
-}
-</style>

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(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-primary);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-card);
+  color: var(--color-text);
   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(--fs-accent);
+  border-color: var(--color-primary);
 }
 </style>

frontend/src/components/RecurrenceEditor.vue

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

frontend/src/components/ShareDialog.vue

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

frontend/src/components/StarterRolePicker.vue

@@ -1,212 +0,0 @@
-<script setup lang="ts">
-/**
- * The starter token ROLES offered when a design system is created (#2349).
- *
- * WHY THIS IS A COMPONENT
- * DesignSystemsView has two creation forms — the empty state and the one inside
- * the body — because the empty state is a sibling branch, not a parent. Putting
- * the checklist inline would make it the third thing in this codebase defined
- * twice and free to drift, which is what the whole button migration was about.
- *
- * WHAT IT OFFERS
- * Names and purposes, never values. A role is a question the operator answers
- * with their own palette; a default palette would be one install's taste
- * shipped as product (rule #115). Every group is individually skippable —
- * an operator who wants three tokens should get three.
- *
- * All groups are checked by default. That default lives HERE rather than in the
- * service, because the service must never seed rows into a system whose caller
- * did not ask; a UI default is visible and reversible before the click.
- */
-import { onMounted, ref } from "vue";
-import { listStarterRoleGroups, type StarterRoleGroup } from "@/api/designSystems";
-
-// props + emit rather than defineModel, matching TagInput and the rest of
-// components/ — being the only file using a different binding idiom costs more
-// than the few lines it saves.
-const props = defineProps<{ selected: string[]; prefix: string }>();
-const emit = defineEmits<{
-  "update:selected": [value: string[]];
-  "update:prefix": [value: string];
-}>();
-
-const groups = ref<StarterRoleGroup[]>([]);
-const defaultPrefix = ref("--ds-");
-const loading = ref(false);
-const failed = ref(false);
-
-onMounted(async () => {
-  loading.value = true;
-  try {
-    const data = await listStarterRoleGroups();
-    groups.value = data.groups;
-    defaultPrefix.value = data.default_prefix;
-    if (!props.prefix) emit("update:prefix", data.default_prefix);
-    // Everything on by default — see the note above.
-    if (!props.selected.length) {
-      emit("update:selected", data.groups.map((g) => g.group));
-    }
-  } catch {
-    // A creation form must still work when this fails. Roles are an
-    // accelerator, not a prerequisite: the operator can add tokens by hand.
-    failed.value = true;
-  } finally {
-    loading.value = false;
-  }
-});
-
-function toggle(group: string) {
-  emit(
-    "update:selected",
-    props.selected.includes(group)
-      ? props.selected.filter((g) => g !== group)
-      : [...props.selected, group],
-  );
-}
-
-const totalTokens = () =>
-  groups.value
-    .filter((g) => props.selected.includes(g.group))
-    .reduce((n, g) => n + g.token_count, 0);
-</script>
-
-<template>
-  <div v-if="loading" class="srp-note">Loading starter roles…</div>
-
-  <!-- Failure is not fatal and should not read as one. -->
-  <div v-else-if="failed" class="srp-note">
-    Starter roles unavailable — you can add tokens by hand after creating.
-  </div>
-
-  <fieldset v-else-if="groups.length" class="srp">
-    <legend class="srp-legend">Start with these token roles</legend>
-    <p class="srp-intro">
-      Named now, valued later. A role you haven't filled in shows as
-      <em>to be decided</em>; a role that doesn't exist is what gets written as a
-      literal instead. Uncheck anything this system won't have.
-    </p>
-
-    <div class="srp-grid">
-      <label v-for="g in groups" :key="g.group" class="srp-item">
-        <input
-          type="checkbox"
-          :checked="props.selected.includes(g.group)"
-          @change="toggle(g.group)"
-        />
-        <span class="srp-name">{{ g.group }}</span>
-        <span class="srp-count">{{ g.token_count }}</span>
-        <span class="srp-desc">{{ g.description }}</span>
-      </label>
-    </div>
-
-    <div class="srp-footer">
-      <label class="srp-prefix">
-        <span>Prefix</span>
-        <input
-          :value="props.prefix" class="input srp-prefix-input" type="text"
-          :placeholder="defaultPrefix"
-          @input="emit('update:prefix', ($event.target as HTMLInputElement).value)"
-        />
-      </label>
-      <span class="srp-total">
-        {{ totalTokens() }} {{ totalTokens() === 1 ? "role" : "roles" }}, no values
-      </span>
-    </div>
-  </fieldset>
-</template>
-
-<style scoped>
-.srp {
-  border: var(--fs-border);
-  border-radius: var(--fs-radius-md);
-  padding: var(--fs-space-4);
-  margin: 0 0 var(--fs-space-4);
-  min-width: 0;
-}
-
-.srp-legend {
-  font-size: var(--fs-size-label);
-  font-weight: var(--fs-weight-medium);
-  color: var(--fs-text-primary);
-  padding: 0 var(--fs-space-2);
-}
-
-.srp-intro,
-.srp-note {
-  margin: 0 0 var(--fs-space-3);
-  font-size: var(--fs-size-body-sm);
-  color: var(--fs-text-secondary);
-  line-height: var(--fs-leading-body);
-  max-width: 62ch;
-}
-
-.srp-note {
-  margin-bottom: var(--fs-space-4);
-}
-
-.srp-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  gap: var(--fs-space-2);
-}
-
-.srp-item {
-  display: grid;
-  grid-template-columns: auto auto 1fr;
-  align-items: baseline;
-  gap: var(--fs-space-2);
-  padding: var(--fs-space-1) var(--fs-space-2);
-  border-radius: var(--fs-radius-sm);
-  cursor: pointer;
-  min-width: 0;
-}
-.srp-item:hover { background: var(--fs-surface-hover); }
-
-.srp-name {
-  font-size: var(--fs-size-body-sm);
-  color: var(--fs-text-primary);
-}
-
-.srp-count {
-  font-size: var(--fs-size-tiny);
-  color: var(--fs-text-tertiary);
-  font-variant-numeric: tabular-nums;
-}
-
-/* The description is the useful part on a wide card and the first thing worth
-   dropping on a narrow one — the group name alone still identifies the row. */
-.srp-desc {
-  grid-column: 1 / -1;
-  font-size: var(--fs-size-tiny);
-  color: var(--fs-text-tertiary);
-  line-height: var(--fs-leading-body);
-}
-
-.srp-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--fs-space-3);
-  margin-top: var(--fs-space-4);
-}
-
-.srp-prefix {
-  display: flex;
-  align-items: center;
-  gap: var(--fs-space-2);
-  font-size: var(--fs-size-body-sm);
-  color: var(--fs-text-secondary);
-}
-
-.srp-prefix-input {
-  width: 8rem;
-  font-family: var(--fs-font-mono);
-  font-size: var(--fs-size-code);
-}
-
-.srp-total {
-  font-size: var(--fs-size-tiny);
-  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(--fs-status-todo-bg) 78%, var(--fs-status-todo) 22%);
-  color: color-mix(in srgb, var(--fs-status-todo) 85%, #000 15%);
+  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%);
 }
 .status-in_progress {
-  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%);
+  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%);
 }
 .status-done {
-  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%);
+  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%);
 }
 .status-cancelled {
-  background: color-mix(in srgb, var(--fs-surface-raised) 78%, var(--fs-text-tertiary) 22%);
-  color: var(--fs-text-tertiary);
+  background: color-mix(in srgb, var(--color-bg-secondary) 78%, var(--color-text-muted) 22%);
+  color: var(--color-text-muted);
 }
 .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(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-card);
   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(--fs-surface-raised);
+  background: var(--color-bg-secondary);
 }
 </style>

frontend/src/components/SystemsSection.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from "vue";
 import { useSystemsStore } from "@/stores/systems";
-import { useCanonicalSystemsStore } from "@/stores/canonicalSystems";
 import { useToastStore } from "@/stores/toast";
 import { getProjectIssues } from "@/api/systems";
 import type { System, TaskLike } from "@/api/systems";
-import type { CanonicalMatch } from "@/api/canonicalSystems";
-import { apiErrorMessage } from "@/api/client";
 import { Pencil, Trash2, Archive, ArchiveRestore } from "lucide-vue-next";
 
 const props = defineProps<{ projectId: number }>();
 
 const store = useSystemsStore();
-const canon = useCanonicalSystemsStore();
 const toast = useToastStore();
 
 const error = ref<string | null>(null);
@@ -23,26 +19,14 @@ const issues = ref<TaskLike[]>([]);
 const showCreate = ref(false);
 const newName = ref("");
 const newDescription = ref("");
-// The global area, chosen explicitly. A PICKER rather than a live matcher on
-// purpose: reproducing the server's slug rule in TypeScript would give this
-// feature two matchers to keep in step, which is the exact drift the catalog
-// exists to end. The server still applies an exact hit on submit.
-const newCanonicalId = ref<number | null>(null);
 const creating = ref(false);
-// An `overlap` the server offered after a create — an offer, never applied.
-const suggestion = ref<{ systemId: number; match: CanonicalMatch } | null>(null);
 
 // Edit state
 const editingId = ref<number | null>(null);
 const editName = ref("");
 const editDescription = ref("");
-const editCanonicalId = ref<number | null>(null);
 const savingEdit = ref(false);
 
-// Mapping review
-const showReview = ref(false);
-const reviewBusy = ref<number | null>(null);
-
 // Delete confirmation
 const deletingSystem = ref<System | null>(null);
 
@@ -53,12 +37,6 @@ const visibleSystems = computed(() =>
   showArchived.value ? systems.value : activeSystems.value,
 );
 
-const proposals = computed(() => canon.proposalsByProject[props.projectId] ?? []);
-
-function areaName(system: System): string | null {
-  return canon.byId(system.canonical_id)?.name ?? null;
-}
-
 async function load() {
   error.value = null;
   try {
@@ -71,14 +49,6 @@ async function load() {
   } catch {
     issues.value = [];
   }
-  // Both fail soft: the catalog is a naming aid, and a review prompt that
-  // cannot load must not take the Systems list down with it.
-  await canon.fetchCatalog();
-  try {
-    await canon.fetchProposals(props.projectId);
-  } catch {
-    /* no proposals shown */
-  }
 }
 
 onMounted(load);
@@ -88,14 +58,12 @@ function openCreate() {
   showCreate.value = true;
   newName.value = "";
   newDescription.value = "";
-  newCanonicalId.value = null;
 }
 
 function cancelCreate() {
   showCreate.value = false;
   newName.value = "";
   newDescription.value = "";
-  newCanonicalId.value = null;
 }
 
 async function submitCreate() {
@@ -103,60 +71,23 @@ async function submitCreate() {
   if (!name || creating.value) return;
   creating.value = true;
   try {
-    const created = await store.createSystem(props.projectId, {
+    await store.createSystem(props.projectId, {
       name,
       description: newDescription.value.trim() || undefined,
-      canonical_id: newCanonicalId.value ?? undefined,
     });
     cancelCreate();
-    if (created.canonical_suggestion) {
-      // An overlap: shown as an offer beside the new System, never applied.
-      suggestion.value = { systemId: created.id, match: created.canonical_suggestion };
-    }
-    toast.show(
-      created.canonical_id
-        ? `System created and filed under ${canon.byId(created.canonical_id)?.name}`
-        : "System created",
-    );
-  } catch (e) {
-    // 409 = this project already has that System. Say WHICH one, so the
-    // answer is actionable rather than "it didn't work".
-    toast.show(apiErrorMessage(e, "Failed to create system"), "error");
+    toast.show("System created");
+  } catch {
+    toast.show("Failed to create system", "error");
   } finally {
     creating.value = false;
   }
 }
 
-async function acceptSuggestion() {
-  const pending = suggestion.value;
-  if (!pending) return;
-  suggestion.value = null;
-  try {
-    await canon.mapSystem(props.projectId, pending.systemId, pending.match.id);
-    await store.fetchSystems(props.projectId);
-    toast.show(`Filed under ${pending.match.name}`);
-  } catch {
-    /* the store already reported it */
-  }
-}
-
-async function applyProposal(systemId: number, canonicalId: number) {
-  reviewBusy.value = systemId;
-  try {
-    await canon.mapSystem(props.projectId, systemId, canonicalId);
-    await store.fetchSystems(props.projectId);
-  } catch {
-    /* the store already reported it */
-  } finally {
-    reviewBusy.value = null;
-  }
-}
-
 function startEdit(system: System) {
   editingId.value = system.id;
   editName.value = system.name;
   editDescription.value = system.description;
-  editCanonicalId.value = system.canonical_id;
 }
 
 function cancelEdit() {
@@ -172,12 +103,6 @@ async function submitEdit(system: System) {
       name,
       description: editDescription.value.trim(),
     });
-    // The mapping is a separate write with its own validation — one column,
-    // one writer (services/canonical_systems.set_system_canonical).
-    if (editCanonicalId.value !== system.canonical_id) {
-      await canon.mapSystem(props.projectId, system.id, editCanonicalId.value);
-      await store.fetchSystems(props.projectId);
-    }
     editingId.value = null;
     toast.show("System updated");
   } catch {
@@ -236,65 +161,6 @@ async function confirmDelete() {
       </ul>
     </div>
 
-    <!-- Mapping review. Only appears when there is something to decide, and
-         it says HOW MANY rather than nagging with a permanent banner. -->
-    <div v-if="proposals.length" class="area-review">
-      <button class="area-review-head" @click="showReview = !showReview">
-        <span class="area-review-count">{{ proposals.length }}</span>
-        {{ proposals.length === 1 ? "system" : "systems" }} may belong to a shared area
-        <span class="area-review-chev">{{ showReview ? "▾" : "▸" }}</span>
-      </button>
-      <ul v-if="showReview" class="area-proposals">
-        <li v-for="p in proposals" :key="p.system_id" class="area-proposal">
-          <div class="area-proposal-text">
-            <span class="area-proposal-name">{{ p.system_name }}</span>
-            <span class="area-proposal-arrow" aria-hidden="true">→</span>
-            <span class="area-proposal-target">{{ p.canonical_name }}</span>
-            <!-- The basis is the decision the reviewer is making: `exact`
-                 differs only in spelling, `overlap` is a judgment call.
-                 Showing them identically is how a wrong mapping is waved
-                 through, so they never share a style. -->
-            <span
-              class="area-basis"
-              :class="p.basis === 'exact' ? 'area-basis--exact' : 'area-basis--overlap'"
-              :title="
-                p.basis === 'exact'
-                  ? 'Same name up to spelling — safe to accept.'
-                  : 'Shares a word. Accept only if it is really the same area.'
-              "
-            >{{ p.basis === "exact" ? "same name" : "similar" }}</span>
-          </div>
-          <div class="area-proposal-actions">
-            <button
-              class="btn-primary btn-compact"
-              :disabled="reviewBusy === p.system_id"
-              @click="applyProposal(p.system_id, p.canonical_id)"
-            >
-              {{ reviewBusy === p.system_id ? "Filing…" : "File here" }}
-            </button>
-            <button
-              class="btn-ghost btn-compact"
-              @click="canon.dismissProposal(props.projectId, p.system_id)"
-            >
-              Not this
-            </button>
-          </div>
-        </li>
-      </ul>
-    </div>
-
-    <!-- An overlap offered by the server after a create. Never applied. -->
-    <div v-if="suggestion" class="area-offer">
-      <span>
-        Is this the same area as
-        <strong>{{ suggestion.match.name }}</strong>?
-      </span>
-      <div class="area-proposal-actions">
-        <button class="btn-primary btn-compact" @click="acceptSuggestion">File it there</button>
-        <button class="btn-ghost btn-compact" @click="suggestion = null">No, it's ours</button>
-      </div>
-    </div>
-
     <!-- Toolbar -->
     <div class="systems-toolbar">
       <button v-if="!showCreate" class="btn-ghost btn-inline btn-add-system" @click="openCreate">
@@ -310,7 +176,7 @@ async function confirmDelete() {
     <form v-if="showCreate" class="system-form" @submit.prevent="submitCreate">
       <input
         v-model="newName"
-        class="fs-input system-input"
+        class="system-input"
         placeholder="System name"
         aria-label="System name"
         autofocus
@@ -318,25 +184,11 @@ async function confirmDelete() {
       />
       <textarea
         v-model="newDescription"
-        class="fs-input system-textarea"
+        class="system-textarea"
         rows="2"
         placeholder="What is this subsystem responsible for? (optional)"
         aria-label="System description"
       ></textarea>
-      <label v-if="canon.catalog.length" class="area-field">
-        <span class="area-label">Shared area</span>
-        <select v-model="newCanonicalId" class="fs-input area-select" aria-label="Shared area">
-          <option :value="null">None — specific to this project</option>
-          <option v-for="entry in canon.catalog" :key="entry.id" :value="entry.id">
-            {{ entry.name }}
-          </option>
-        </select>
-        <!-- .field-hint is the shared hint class beside .fs-input
-             (components.css) — not restated scoped. -->
-        <span class="field-hint">
-          Files this system under an area shared by every project. Your name stays as you typed it.
-        </span>
-      </label>
       <div class="system-form-actions">
         <button type="submit" class="btn-primary btn-compact" :disabled="!newName.trim() || creating">
           {{ creating ? "Creating…" : "Create" }}
@@ -375,7 +227,7 @@ async function confirmDelete() {
           <form class="system-form system-form--inline" @submit.prevent="submitEdit(system)">
             <input
               v-model="editName"
-              class="fs-input system-input"
+              class="system-input"
               placeholder="System name"
               aria-label="System name"
               autofocus
@@ -383,20 +235,11 @@ async function confirmDelete() {
             />
             <textarea
               v-model="editDescription"
-              class="fs-input system-textarea"
+              class="system-textarea"
               rows="2"
               placeholder="Description (optional)"
               aria-label="System description"
             ></textarea>
-            <label v-if="canon.catalog.length" class="area-field">
-              <span class="area-label">Shared area</span>
-              <select v-model="editCanonicalId" class="fs-input area-select" aria-label="Shared area">
-                <option :value="null">None — specific to this project</option>
-                <option v-for="entry in canon.catalog" :key="entry.id" :value="entry.id">
-                  {{ entry.name }}
-                </option>
-              </select>
-            </label>
             <div class="system-form-actions">
               <button type="submit" class="btn-primary btn-compact" :disabled="!editName.trim() || savingEdit">
                 {{ savingEdit ? "Saving…" : "Save" }}
@@ -410,7 +253,7 @@ async function confirmDelete() {
         <template v-else>
           <span
             class="system-swatch"
-            :style="{ background: system.color || 'var(--fs-text-tertiary)' }"
+            :style="{ background: system.color || 'var(--color-text-muted)' }"
             aria-hidden="true"
           ></span>
           <div class="system-body">
@@ -421,13 +264,6 @@ async function confirmDelete() {
                 :title="`${system.open_issue_count} open issue(s)`"
               >{{ system.open_issue_count }} open</span>
               <span v-if="system.status === 'archived'" class="archived-badge">Archived</span>
-              <!-- Not a TagPill: that recipe prefixes "#" and means a tag.
-                   This is the shared AREA this system is an instance of. -->
-              <span
-                v-if="areaName(system)"
-                class="area-chip"
-                :title="`Filed under the shared area “${areaName(system)}” — records and rules about this area line up across projects.`"
-              >{{ areaName(system) }}</span>
             </div>
             <p v-if="system.description" class="system-description">{{ system.description }}</p>
           </div>
@@ -489,126 +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(--fs-text-tertiary); }
+.open-issues-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
 .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(--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-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-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(--fs-text-secondary); background: var(--fs-surface-raised); border-radius: 999px; padding: 0.05rem 0.4rem; }
-
-/* ── Shared-area mapping (milestone 307) ──────────────────────────
-   The review is a disclosure, not a banner: it exists only while there is
-   something to decide, and collapses to one line until opened. */
-.area-review {
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
-  background: var(--fs-surface-raised);
-}
-.area-review-head {
-  display: flex;
-  align-items: center;
-  gap: var(--fs-space-2);
-  width: 100%;
-  padding: var(--fs-space-3);
-  background: none;
-  border: none;
-  color: var(--fs-text-secondary);
-  font: inherit;
-  font-size: 0.82rem;
-  text-align: left;
-  cursor: pointer;
-  border-radius: var(--fs-radius-lg);
-}
-.area-review-head:hover { color: var(--fs-text-primary); }
-.area-review-head:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); }
-.area-review-count {
-  background: var(--fs-accent-soft);
-  color: var(--fs-accent);
-  border-radius: var(--fs-radius-pill);
-  padding: 0.05rem 0.45rem;
-  font-variant-numeric: tabular-nums;
-}
-.area-review-chev { margin-left: auto; color: var(--fs-text-tertiary); }
-
-.area-proposals { list-style: none; margin: 0; padding: 0 var(--fs-space-3) var(--fs-space-3); display: flex; flex-direction: column; gap: var(--fs-space-2); }
-.area-proposal {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--fs-space-3);
-  flex-wrap: wrap;
-  padding: var(--fs-space-2) var(--fs-space-3);
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-md);
-}
-.area-proposal-text { display: flex; align-items: center; gap: var(--fs-space-2); flex-wrap: wrap; font-size: 0.85rem; min-width: 0; }
-.area-proposal-name { color: var(--fs-text-primary); }
-.area-proposal-arrow { color: var(--fs-text-tertiary); }
-.area-proposal-target { color: var(--fs-accent); }
-.area-proposal-actions { display: flex; gap: var(--fs-space-2); flex-shrink: 0; }
-
-/* The two bases must never look alike — one is mechanical, the other is the
-   reviewer's judgment, and that difference is the whole decision. */
-.area-basis { font-size: 0.68rem; border-radius: var(--fs-radius-sm); padding: 0.05rem 0.4rem; }
-.area-basis--exact { background: var(--fs-status-done-bg); color: var(--fs-status-done); }
-.area-basis--overlap { background: var(--fs-priority-medium-bg); color: var(--fs-priority-medium); }
-
-.area-offer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--fs-space-3);
-  flex-wrap: wrap;
-  padding: var(--fs-space-3);
-  font-size: 0.85rem;
-  color: var(--fs-text-secondary);
-  background: var(--fs-accent-faint);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
-}
-
-.area-field { display: flex; flex-direction: column; gap: 0.3rem; }
-.area-label { font-size: 0.78rem; color: var(--fs-text-tertiary); }
-.area-select { box-sizing: border-box; width: 100%; }
-
-.area-chip {
-  font-size: 0.66rem;
-  color: var(--fs-accent);
-  background: var(--fs-accent-soft);
-  border-radius: var(--fs-radius-pill);
-  padding: 0.05rem 0.45rem;
-  white-space: nowrap;
-}
+.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; }
 
 /* ── Toolbar ──────────────────────────────────────────────────── */
 .systems-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
 .btn-add-system {
   background: none;
-  border: 1px dashed var(--fs-border-color);
-  color: var(--fs-text-secondary);
+  border: 1px dashed var(--color-border);
+  color: var(--color-text-secondary);
   padding: 0.28rem 0.65rem;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.78rem;
   font-family: inherit;
 }
-.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); }
+.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); }
 
 .archived-toggle {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-size: 0.78rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   cursor: pointer;
   user-select: none;
 }
-.archived-checkbox { accent-color: var(--fs-accent); cursor: pointer; }
+.archived-checkbox { accent-color: var(--color-primary); cursor: pointer; }
 
 /* ── Create / edit form ───────────────────────────────────────── */
 .system-form {
@@ -616,52 +367,26 @@ async function confirmDelete() {
   flex-direction: column;
   gap: 0.5rem;
   padding: 0.75rem;
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
 }
 .system-form--inline { padding: 0; background: none; border: none; flex: 1; }
-/* The input itself is the .fs-input canon (components.css); only the
-   layout remainder lives here. */
-.system-input, .system-textarea { box-sizing: border-box; width: 100%; }
+.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);
+  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-textarea { resize: vertical; }
 
 .system-form-actions { display: flex; gap: 0.4rem; }
-
-/* RESTORED (#2444). Both lost their base rule to a CSS sweep; only the
-   `--archived` modifier and the `:hover .system-actions` reveal survived.
-   The card WAS a flex row and every child still says so — `.system-swatch`
-   and `.system-actions` are `flex-shrink: 0`, `.system-body` is `flex: 1`,
-   and `.system-form--inline` is `flex: 1`. `align-items: flex-start` is why
-   the swatch carries `margin-top: 0.3rem`: it is nudged onto the first line
-   of text rather than centred against the whole card.
-
-   The list had no rule at all, so it rendered with browser bullets and
-   indent — invisible to the dangling-style check, which can only see a class
-   that is PARTLY styled. A class with no rules anywhere looks exactly like a
-   semantic-only hook.
-
-   Surface values match `.system-form` above, which is the same card shape in
-   this file and the reason they can be recovered rather than guessed. */
-.systems-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.system-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.6rem;
-  padding: 0.6rem 0.75rem;
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
-}
-
 .system-card--archived { opacity: 0.6; }
 
 .system-swatch {
@@ -673,13 +398,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(--fs-text-primary); word-break: break-word; }
+.system-name { font-weight: 500; color: var(--color-text); word-break: break-word; }
 .issue-badge {
   font-size: 0.7rem;
   font-weight: 500;
-  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);
+  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);
   border-radius: 999px;
   padding: 0.05rem 0.45rem;
   flex-shrink: 0;
@@ -689,15 +414,15 @@ async function confirmDelete() {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--fs-text-tertiary);
-  background: color-mix(in srgb, var(--fs-text-tertiary) 12%, transparent);
+  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
   border-radius: 999px;
   padding: 0.05rem 0.45rem;
 }
 .system-description {
   margin: 0.25rem 0 0;
   font-size: 0.82rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   line-height: 1.4;
   word-break: break-word;
 }
@@ -712,15 +437,15 @@ async function confirmDelete() {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   width: 26px;
   height: 26px;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--radius-sm);
   transition: background 0.12s, color 0.12s;
 }
-.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); }
+.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, #e74c3c); }
 
 /* ── Empty ────────────────────────────────────────────────────── */
 .systems-empty {
@@ -730,29 +455,61 @@ async function confirmDelete() {
   gap: 0.4rem;
   padding: 2rem 1rem;
   text-align: center;
-  border: 1px dashed var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
 }
-/* remainders over the shared recipes (components.css, m302) */
-.empty-title { margin: 0; color: var(--fs-text-primary); }
-.empty-sub { margin: 0 0 0.5rem; font-size: 0.82rem; max-width: 32ch; }
+.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; }
 
+.error-msg { color: var(--color-danger); 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(--fs-radius-lg);
+  border-radius: var(--radius-md);
   background: linear-gradient(
     90deg,
-    var(--fs-surface-raised) 25%,
-    color-mix(in srgb, var(--fs-text-tertiary) 16%, var(--fs-surface-raised)) 50%,
-    var(--fs-surface-raised) 75%
+    var(--color-bg-secondary) 25%,
+    color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-secondary)) 50%,
+    var(--color-bg-secondary) 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, rgba(0,0,0,0.45));
+  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(--fs-text-tertiary);
+  color: var(--color-text-muted);
   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(--fs-text-tertiary);
+  color: var(--color-text-muted);
   text-decoration: none;
   cursor: pointer;
 }
 .toc-link:hover {
-  color: var(--fs-accent);
+  color: var(--color-primary);
 }
 </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(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-card);
   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(--fs-accent) 15%, transparent);
-  border: 1px solid var(--fs-accent);
-  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
   font-size: 0.8rem;
   white-space: nowrap;
 }
@@ -195,7 +195,7 @@ function focusInput() {
   border: none;
   outline: none;
   background: transparent;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   font-size: 0.875rem;
   padding: 0;
 }
@@ -205,9 +205,9 @@ function focusInput() {
   left: 0;
   min-width: 160px;
   max-width: 280px;
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--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(--fs-text-primary);
+  color: var(--color-text);
 }
 .tag-autocomplete-item:hover,
 .tag-autocomplete-item.selected {
-  background: var(--fs-surface-hover);
-  color: var(--fs-accent);
+  background: var(--color-bg-hover, color-mix(in srgb, var(--color-primary) 8%, transparent));
+  color: var(--color-primary);
 }
 </style>

frontend/src/components/TagPill.vue

@@ -29,8 +29,8 @@ defineEmits<{
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  background: var(--fs-accent-soft);
-  color: var(--fs-accent);
+  background: var(--color-tag-bg);
+  color: var(--color-tag-text);
   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(--fs-accent);
-  background: var(--fs-accent-soft);
+  color: var(--color-primary);
+  background: var(--color-primary-tint);
 }
 .dismiss {
   background: none;
   border: none;
-  color: var(--fs-accent);
+  color: var(--color-tag-text);
   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(--fs-radius-lg);
+  border-radius: var(--radius-md);
   text-decoration: none;
   color: inherit;
-  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);
+  background: var(--color-bg-card);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(91, 74, 138, 0.06);
   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(--fs-accent) 14.0%, transparent);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(91, 74, 138, 0.14);
   transform: translateY(-2px);
 }
 
@@ -144,19 +144,19 @@ function isOverdue(): boolean {
   opacity: 0.8;
 }
 .dot-todo {
-  background: var(--fs-status-todo);
-  border: 2px solid var(--fs-status-todo);
+  background: var(--color-status-todo, #94a3b8);
+  border: 2px solid var(--color-status-todo, #94a3b8);
   background: transparent;
-  border: 2px solid var(--fs-text-tertiary);
+  border: 2px solid var(--color-text-muted);
 }
 .dot-in-progress {
-  background: var(--fs-status-in-progress);
+  background: var(--color-status-in-progress, #3b82f6);
 }
 .dot-done {
-  background: var(--fs-status-done);
+  background: var(--color-status-done, #22c55e);
 }
 .dot-cancelled {
-  background: var(--fs-status-cancelled);
+  background: var(--color-status-cancelled, #6b7280);
 }
 
 .task-title-compact {
@@ -170,10 +170,10 @@ function isOverdue(): boolean {
 }
 .project-crumb {
   font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  color: var(--color-text-muted);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--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(--fs-text-tertiary);
+  color: var(--color-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .due-compact.overdue {
-  color: var(--fs-error);
+  color: var(--color-danger, #e74c3c);
   font-weight: 600;
 }
 /* Full layout */
@@ -211,7 +211,7 @@ function isOverdue(): boolean {
 }
 .task-preview {
   margin: 0 0 0.5rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-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(--fs-text-secondary);
+  color: var(--color-text-secondary);
 }
 .due-date.overdue {
-  color: var(--fs-overdue);
+  color: var(--color-overdue);
   font-weight: 600;
 }
 .timestamp {
   margin-left: auto;
   font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 </style>

frontend/src/components/TaskLogSection.vue

@@ -3,7 +3,6 @@ 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 }>();
 
@@ -16,6 +15,13 @@ 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);
@@ -122,7 +128,7 @@ onMounted(loadLogs);
       </template>
       <template v-else>
         <div class="log-entry-meta">
-          <span class="log-date">{{ fmtStamp(log.created_at) }}</span>
+          <span class="log-date">{{ formatDate(log.created_at) }}</span>
           <span v-if="log.duration_minutes" class="log-duration-badge">
             {{ formatDuration(log.duration_minutes) }}
           </span>
@@ -169,9 +175,9 @@ onMounted(loadLogs);
 
 <style scoped>
 .log-section {
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
   padding: 0.6rem 0.75rem;
   display: flex;
   flex-direction: column;
@@ -181,7 +187,7 @@ onMounted(loadLogs);
 .log-header {
   font-size: 0.8rem;
   font-weight: 600;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 0.15rem;
@@ -189,11 +195,11 @@ onMounted(loadLogs);
 
 .log-empty {
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .log-entry {
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border);
   padding-top: 0.5rem;
 }
 
@@ -206,11 +212,11 @@ onMounted(loadLogs);
 }
 
 .log-date {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .log-duration-badge {
-  background: var(--fs-accent);
+  background: var(--color-primary);
   color: var(--fs-text-on-action);
   border-radius: 99px;
   padding: 0.1rem 0.5rem;
@@ -229,10 +235,10 @@ onMounted(loadLogs);
 .log-textarea {
   width: 100%;
   padding: 0.4rem 0.5rem;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-page);
-  color: var(--fs-text-primary);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  color: var(--color-text);
   font-size: 0.875rem;
   font-family: inherit;
   resize: vertical;
@@ -241,7 +247,7 @@ onMounted(loadLogs);
 
 .log-textarea:focus {
   outline: none;
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary);
 }
 
 .log-add-controls,
@@ -253,7 +259,7 @@ onMounted(loadLogs);
 
 .log-duration-label {
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -262,16 +268,16 @@ onMounted(loadLogs);
 .log-duration-input {
   width: 5rem;
   padding: 0.3rem 0.4rem;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-page);
-  color: var(--fs-text-primary);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  color: var(--color-text);
   font-size: 0.875rem;
 }
 
 .log-duration-input:focus {
   outline: none;
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary);
 }
 
 

frontend/src/components/TiptapEditor.vue

@@ -156,7 +156,7 @@ defineExpose({ editor });
 <style scoped>
 .editor-error {
   padding: 1rem;
-  color: var(--fs-error);
+  color: var(--color-danger);
   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(--fs-success);
+  background: var(--color-toast-success);
 }
 .toast--error {
-  background: var(--fs-error);
+  background: var(--color-toast-error);
 }
 .toast--warning {
-  background: var(--fs-warning);
+  background: var(--color-warning);
   color: #1a1a1a;
 }
 .toast--warning .toast-close {

frontend/src/components/TokenPreview.vue

@@ -1,362 +0,0 @@
-<script setup lang="ts">
-/**
- * A design system's tokens, drawn rather than listed (#2431).
- *
- * WHAT MAKES THIS WORK FOR A SYSTEM YOU AREN'T RUNNING
- * Every value is resolved on an offscreen probe carrying only this system's
- * declarations (`resolveDeclared`), never read from the page. So a token like
- * `color-mix(in srgb, var(--accent) 15%, transparent)` shows THIS system's
- * accent, not the accent of the app you happen to be looking at. Previewing
- * another project's palette from here is the point; a preview that quietly
- * borrows the host app's values would be worse than no preview, because it
- * would look right.
- *
- * SPECIMENS ARE CHOSEN BY VALUE SHAPE, NEVER BY NAME
- * A colour is drawn as a swatch, a length as a rule of that length, a font
- * stack as text set in it. Nothing here matches `--fs-space-*` or any other
- * naming convention, because the convention is the install's (rule #115) — a
- * system that calls its spacing `--gap-N` gets the same treatment.
- *
- * A token with no value for the chosen mode is shown as undecided rather than
- * skipped. A named role awaiting a decision is information; a gap in a grid
- * is not.
- */
-import { computed, ref, watch } from "vue";
-
-import type { ResolvedToken } from "@/api/designSystems";
-import { BASE_MODE, modesPresent, resolveDeclared, valueForMode } from "@/utils/designValues";
-
-const props = defineProps<{ tokens: ResolvedToken[] }>();
-
-const modes = computed(() => modesPresent(props.tokens));
-const mode = ref(BASE_MODE);
-
-/** Values as the browser would compute them, for the chosen mode. */
-const rendered = ref<Map<string, string>>(new Map());
-
-function recompute() {
-  const declared = new Map<string, string>();
-  for (const token of props.tokens) {
-    const value = valueForMode(token.value_by_mode, mode.value);
-    if (value) declared.set(token.name, value);
-  }
-  rendered.value = resolveDeclared(declared);
-}
-
-watch(
-  [() => props.tokens, mode],
-  () => {
-    // Keep the selection only while it still exists — switching systems can
-    // drop a mode, and a stale one would silently render as base.
-    if (!modes.value.includes(mode.value)) mode.value = modes.value[0] ?? BASE_MODE;
-    recompute();
-  },
-  { immediate: true, deep: false },
-);
-
-type Shape = "colour" | "surface" | "length" | "font" | "plain";
-
-const COLOUR = /^(#|rgba?\(|hsla?\(|color-mix\(|light-dark\()/;
-const LENGTH = /^-?\d*\.?\d+(px|rem|em|ch|vh|vw)$/;
-const GRADIENT = /gradient\(/;
-/** Two or more space-separated parts ending in a colour — i.e. a shadow. */
-const SHADOW = /^[^,]*\d\s+.*(#|rgba?\(|color-mix\()/;
-/** A stack of family names: commas, no functions, no digits. */
-const FONT_STACK = /^[^(){}\d]+,[^(){}\d]+$/;
-
-function shapeOf(value: string): Shape {
-  const v = value.trim();
-  if (!v) return "plain";
-  if (COLOUR.test(v)) return "colour";
-  if (GRADIENT.test(v) || SHADOW.test(v)) return "surface";
-  if (LENGTH.test(v)) return "length";
-  if (FONT_STACK.test(v)) return "font";
-  return "plain";
-}
-
-interface Specimen {
-  name: string;
-  declared: string;
-  rendered: string;
-  shape: Shape;
-  purpose: string | null;
-  /** True when `var()` substitution changed the value — worth showing on hover. */
-  substituted: boolean;
-}
-
-const groups = computed(() => {
-  const out = new Map<string, Specimen[]>();
-  for (const token of props.tokens) {
-    const declared = valueForMode(token.value_by_mode, mode.value);
-    const value = rendered.value.get(token.name) ?? "";
-    const bucket = out.get(token.group_name ?? "ungrouped") ?? [];
-    bucket.push({
-      name: token.name,
-      declared,
-      rendered: value,
-      shape: shapeOf(value),
-      purpose: token.purpose,
-      substituted: Boolean(declared) && value !== declared,
-    });
-    out.set(token.group_name ?? "ungrouped", bucket);
-  }
-  return [...out.entries()];
-});
-
-/**
- * Lengths are drawn to scale up to a ceiling, so a 40px heading and a 4px gap
- * are visibly different — but a stray `100vw` can't stretch the row.
- */
-function ruleWidth(value: string): string {
-  return `min(${value}, 12rem)`;
-}
-</script>
-
-<template>
-  <div class="tp">
-    <div v-if="modes.length > 1" class="tp-modes">
-      <button
-        v-for="m in modes"
-        :key="m"
-        class="tp-mode"
-        :class="{ active: m === mode }"
-        @click="mode = m"
-      >{{ m }}</button>
-      <span class="tp-modes-note">
-        The system's own modes — independent of the theme this app is in.
-      </span>
-    </div>
-
-    <div v-for="[group, specimens] in groups" :key="group" class="tp-group">
-      <h3 class="tp-group-heading">{{ group }}</h3>
-      <ul class="tp-grid">
-        <li v-for="s in specimens" :key="s.name" class="tp-item">
-          <div
-            class="tp-specimen"
-            :class="`is-${s.shape}`"
-            :title="s.substituted ? `${s.declared} → ${s.rendered}` : s.declared"
-          >
-            <span
-              v-if="s.shape === 'colour'"
-              class="tp-swatch"
-              :style="{ '--tp-fill': s.rendered }"
-            />
-            <span
-              v-else-if="s.shape === 'surface'"
-              class="tp-surface"
-              :style="s.rendered.includes('gradient(')
-                ? { background: s.rendered }
-                : { boxShadow: s.rendered }"
-            />
-            <span v-else-if="s.shape === 'length'" class="tp-rule-wrap">
-              <span class="tp-rule" :style="{ width: ruleWidth(s.rendered) }" />
-              <span class="tp-rule-label">{{ s.rendered }}</span>
-            </span>
-            <span
-              v-else-if="s.shape === 'font'"
-              class="tp-font"
-              :style="{ fontFamily: s.rendered }"
-            >Ag</span>
-            <span v-else-if="!s.declared" class="tp-undecided">to be decided</span>
-            <span v-else class="tp-plain">{{ s.rendered }}</span>
-          </div>
-
-          <code class="tp-name">{{ s.name }}</code>
-          <span class="tp-value" :title="s.declared">{{ s.declared || "—" }}</span>
-          <span v-if="s.purpose" class="tp-purpose" :title="s.purpose">{{ s.purpose }}</span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.tp-modes {
-  display: flex;
-  align-items: center;
-  gap: var(--fs-space-2);
-  flex-wrap: wrap;
-  margin-bottom: var(--fs-space-4);
-}
-
-.tp-mode {
-  padding: 0.2rem 0.6rem;
-  font: inherit;
-  font-size: var(--fs-size-body-sm);
-  color: var(--fs-text-secondary);
-  background: transparent;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  cursor: pointer;
-}
-.tp-mode:hover { color: var(--fs-text-primary); }
-.tp-mode.active {
-  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(--fs-text-tertiary);
-}
-
-.tp-group { margin-bottom: var(--fs-space-6); }
-
-.tp-group-heading {
-  text-transform: uppercase;
-  letter-spacing: var(--fs-tracking-tiny);
-  font-size: var(--fs-size-tiny);
-  color: var(--fs-text-tertiary);
-  margin: 0 0 var(--fs-space-3);
-  padding-bottom: var(--fs-space-2);
-  border-bottom: var(--fs-border);
-}
-
-.tp-grid {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  gap: var(--fs-space-4) var(--fs-space-3);
-}
-
-.tp-item {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-
-/* A fixed-height stage so a 40px rule and a 2px one still line up in a grid.
- *
- * The stage itself is plain. An earlier version put the checkerboard here, so
- * every specimen — including opaque colours and plain text — sat inside a
- * frame of checks, and the pattern read as the loudest thing on the page. The
- * checks belong to the ONE case that needs them: a colour that might be
- * translucent. */
-.tp-specimen {
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  border-radius: var(--fs-radius-sm);
-  padding: var(--fs-space-1);
-  overflow: hidden;
-  background: var(--fs-surface-raised);
-}
-
-/* Text-bearing specimens get no box at all — a border around a value is a
-   frame around nothing, which is most of what made the grid feel busy. */
-.tp-specimen.is-plain,
-.tp-specimen.is-length,
-.tp-specimen.is-font {
-  background: none;
-  padding: 0 var(--fs-space-1);
-}
-
-/* Checks UNDER the colour, not around it: an opaque value hides them
-   completely, and a 15% tint shows exactly as much of them as it should.
-   Layering the fill as a gradient is what lets one element do both. */
-.tp-swatch {
-  /* Declared here, overridden inline per swatch. Two reasons it is a real
-     default rather than a formality: a token that resolves to nothing renders
-     as bare checks instead of an invalid gradient, and a custom property that
-     exists ONLY as an inline style is invisible to the CI token check — which
-     reads it as an unresolvable reference, correctly, since nothing in any
-     stylesheet declares it. */
-  --tp-fill: transparent;
-  width: 100%;
-  height: 100%;
-  border-radius: calc(var(--fs-radius-sm) - 2px);
-  background-image:
-    linear-gradient(var(--tp-fill), var(--tp-fill)),
-    repeating-conic-gradient(
-      var(--fs-border-color) 0% 25%,
-      var(--fs-surface-raised) 0% 50%
-    );
-  background-size: auto, 10px 10px;
-}
-
-.tp-surface {
-  width: 100%;
-  height: 100%;
-  border-radius: calc(var(--fs-radius-sm) - 2px);
-  background: var(--fs-surface-raised);
-}
-
-.tp-rule-wrap {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: var(--fs-space-2);
-  min-width: 0;
-}
-
-.tp-rule {
-  height: 0.4rem;
-  min-width: 1px;
-  flex: none;
-  background: var(--fs-accent);
-  border-radius: 999px;
-}
-
-.tp-rule-label {
-  font-family: var(--fs-font-mono);
-  font-size: var(--fs-size-tiny);
-  color: var(--fs-text-tertiary);
-  white-space: nowrap;
-}
-
-.tp-font {
-  font-size: 1.4rem;
-  color: var(--fs-text-primary);
-  line-height: 1;
-}
-
-.tp-plain {
-  font-family: var(--fs-font-mono);
-  font-size: var(--fs-size-code);
-  color: var(--fs-text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tp-undecided {
-  font-size: var(--fs-size-tiny);
-  color: var(--fs-text-tertiary);
-  font-style: italic;
-}
-
-/* One line each, with the full text on hover.
- *
- * These wrapped freely at first, so a card was two lines tall or five depending
- * on how long its `color-mix()` happened to be, and the grid lost any rhythm —
- * which is most of what "messy" was. A derived value is not something anyone
- * reads character by character in a gallery; it is something you check the
- * shape of and open if it matters. */
-.tp-name,
-.tp-value,
-.tp-purpose {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tp-name {
-  font-size: var(--fs-size-body-sm);
-  color: var(--fs-text-primary);
-}
-
-.tp-value {
-  font-family: var(--fs-font-mono);
-  font-size: var(--fs-size-tiny);
-  color: var(--fs-text-secondary);
-}
-
-.tp-purpose {
-  font-size: var(--fs-size-tiny);
-  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(--fs-border-color);
+  border-top: 1px solid var(--color-border);
 }
 
 .vh-header {
@@ -179,19 +179,19 @@ function restore() {
   font-family: inherit;
   text-align: left;
 }
-.vh-header:hover { background: var(--fs-surface-raised); }
+.vh-header:hover { background: var(--color-bg-secondary); }
 
 .vh-title {
   font-size: 0.75rem;
   font-weight: 700;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .vh-chevron {
   font-size: 0.7rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .vh-body {
@@ -201,20 +201,20 @@ function restore() {
 .vh-empty {
   padding: 0.5rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .vh-item {
   padding: 0.35rem 0.75rem;
   font-size: 0.8rem;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   cursor: pointer;
   font-family: monospace;
   border-left: 2px solid transparent;
 }
 .vh-item:hover {
-  background: var(--fs-surface-raised);
-  border-left-color: var(--fs-accent);
+  background: var(--color-bg-secondary);
+  border-left-color: var(--color-primary);
 }
 
 .vh-diff-actions {
@@ -225,20 +225,20 @@ function restore() {
 
 .vh-btn-back {
   background: none;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   padding: 0.25rem 0.6rem;
   font-size: 0.78rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   cursor: pointer;
   font-family: inherit;
 }
-.vh-btn-back:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
+.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
 
 .vh-btn-restore {
-  background: var(--fs-action-primary);
+  background: var(--color-action-primary);
   border: none;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--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(--fs-text-tertiary);
+  color: var(--color-text-muted);
   cursor: pointer;
   padding: 0;
   white-space: nowrap;
   flex-shrink: 0;
 }
-.word-count:hover { color: var(--fs-text-primary); }
+.word-count:hover { color: var(--color-text); }
 </style>

frontend/src/components/WorkspaceNoteEditor.vue

@@ -11,7 +11,6 @@ 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;
@@ -253,6 +252,20 @@ 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; });
@@ -333,7 +346,7 @@ defineExpose({ reload: loadProjectNotes });
         >
           <div class="note-row-main">
             <span class="note-row-title">{{ note.title || 'Untitled' }}</span>
-            <span class="note-row-age">{{ relativeTimeOrDate(note.updated_at) }}</span>
+            <span class="note-row-age">{{ formatDate(note.updated_at) }}</span>
           </div>
           <div v-if="note.tags?.length" class="note-row-tags">
             <span
@@ -439,8 +452,8 @@ defineExpose({ reload: loadProjectNotes });
   flex-direction: row;
   height: 100%;
   overflow: hidden;
-  background: var(--fs-surface-hover);
-  border-left: 1px solid var(--fs-border-color);
+  background: var(--color-surface);
+  border-left: 1px solid var(--color-border);
 }
 
 /* ── Left rail ── */
@@ -450,7 +463,7 @@ defineExpose({ reload: loadProjectNotes });
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-card, var(--color-bg-secondary));
 }
 
 .rail-header {
@@ -458,12 +471,12 @@ defineExpose({ reload: loadProjectNotes });
   align-items: center;
   gap: 0.3rem;
   padding: 0.5rem 0.6rem;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 
 .rail-title {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 0.72rem;
@@ -471,12 +484,13 @@ defineExpose({ reload: loadProjectNotes });
   flex: 1;
 }
 
+
 .rail-search-input {
   flex: 1;
   background: transparent;
   border: none;
   font-size: 0.78rem;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   min-width: 0;
   padding: 0;
 }
@@ -489,7 +503,7 @@ defineExpose({ reload: loadProjectNotes });
 .rail-state {
   padding: 1rem 0.65rem;
   font-size: 0.78rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 /* Note list */
@@ -505,16 +519,16 @@ defineExpose({ reload: loadProjectNotes });
   display: flex;
   flex-direction: column;
   padding: 0.4rem 0.6rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--fs-border-color) 60%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 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(--fs-accent) 5%, var(--fs-surface-hover)); }
+.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
 .note-row.active {
-  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover));
-  border-right-color: var(--fs-accent);
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+  border-right-color: var(--color-primary);
 }
 
 .note-row-main {
@@ -530,12 +544,12 @@ defineExpose({ reload: loadProjectNotes });
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
 
 .note-row-age {
   font-size: 0.62rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -548,8 +562,8 @@ defineExpose({ reload: loadProjectNotes });
 
 .note-tag-pill {
   font-size: 0.58rem;
-  color: var(--fs-accent);
-  background: color-mix(in srgb, var(--fs-accent) 10%, transparent);
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
   border-radius: 999px;
   padding: 0 0.3rem;
   white-space: nowrap;
@@ -558,13 +572,13 @@ defineExpose({ reload: loadProjectNotes });
   max-width: 5rem;
 }
 .note-tag-pill.tag-match {
-  background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
-  outline: 1px solid var(--fs-accent);
+  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
+  outline: 1px solid var(--color-primary);
 }
 
 .note-tag-more {
   font-size: 0.58rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   white-space: nowrap;
 }
 
@@ -574,6 +588,8 @@ defineExpose({ reload: loadProjectNotes });
   align-items: center;
 }
 
+.note-row:hover .btn-delete { opacity: 1; }
+
 /* Editor UI */
 .panel-header {
   display: flex;
@@ -590,8 +606,8 @@ defineExpose({ reload: loadProjectNotes });
   margin-left: auto;
 }
 
-.unsaved { font-size: 0.72rem; color: var(--fs-text-tertiary); }
-.saving-txt { font-size: 0.72rem; color: var(--fs-accent); }
+.unsaved { font-size: 0.72rem; color: var(--color-text-muted); }
+.saving-txt { font-size: 0.72rem; color: var(--color-primary); }
 
 /* Moss action-primary per Hybrid */
 
@@ -602,14 +618,14 @@ defineExpose({ reload: loadProjectNotes });
   font-size: 1.4rem;
   font-weight: 500;
   line-height: 1.25;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   padding: 0;
   font-family: 'Fraunces', serif;
   letter-spacing: -0.01em;
 }
 .note-title-input:focus { outline: none; }
 .note-title-input::placeholder {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .tag-row {
@@ -621,45 +637,48 @@ defineExpose({ reload: loadProjectNotes });
 }
 .tag-row > :first-child { flex: 1; min-width: 0; }
 
+.btn-suggest-tags { flex-shrink: 0; align-self: center; }
+
 .tag-suggestions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.3rem;
   padding: 0.35rem 0.6rem;
-  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
   flex-shrink: 0;
 }
-.tag-suggestions-label { font-size: 0.72rem; color: var(--fs-text-tertiary); flex-shrink: 0; }
+.tag-suggestions-label { font-size: 0.72rem; color: var(--color-text-muted); flex-shrink: 0; }
 
 .btn-tag-suggestion {
   background: none;
-  border: 1px solid var(--fs-border-color);
+  border: 1px solid var(--color-border);
   border-radius: 999px;
   padding: 0.15rem 0.55rem;
   font-size: 0.75rem;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   cursor: pointer;
 }
-.btn-tag-suggestion:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
+.btn-tag-suggestion:hover { border-color: var(--color-primary); color: var(--color-primary); }
 .btn-tag-suggestion.applied {
-  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
-  border-color: var(--fs-accent);
-  color: var(--fs-accent);
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
+
 .link-suggest-strip {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.25rem;
   padding: 0.3rem 0.6rem;
-  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
   flex-shrink: 0;
 }
 .link-suggest-label {
   font-size: 0.7rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   flex-shrink: 0;
   font-weight: 500;
   text-transform: uppercase;
@@ -669,15 +688,15 @@ defineExpose({ reload: loadProjectNotes });
 
 .btn-chip-link {
   background: none;
-  border: 1px solid var(--fs-accent);
+  border: 1px solid var(--color-primary);
   border-radius: 999px;
   padding: 0.1rem 0.45rem;
   font-size: 0.7rem;
-  color: var(--fs-accent);
+  color: var(--color-primary);
   cursor: pointer;
   font-family: monospace;
   white-space: nowrap;
 }
-.btn-chip-link:hover { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); }
+.btn-chip-link:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
 
 </style>

frontend/src/components/WorkspaceTaskPanel.vue

@@ -6,7 +6,6 @@ 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 }>();
 
@@ -199,6 +198,20 @@ 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>
@@ -243,7 +256,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">{{ relativeTimeOrDate(task.updated_at) }}</span>
+              <span class="task-age">{{ formatDate(task.updated_at) }}</span>
             </li>
             <li v-if="groupedTasks.noMilestone.length === 0" class="empty-group">No tasks</li>
           </ul>
@@ -268,7 +281,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">{{ relativeTimeOrDate(task.updated_at) }}</span>
+              <span class="task-age">{{ formatDate(task.updated_at) }}</span>
             </li>
             <li v-if="msTasks.length === 0" class="empty-group">No tasks</li>
           </ul>
@@ -331,8 +344,8 @@ defineExpose({ reload: loadAll });
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  background: var(--fs-surface-hover);
-  border-right: 1px solid var(--fs-border-color);
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
 }
 
 /* ── List view ── */
@@ -347,17 +360,17 @@ defineExpose({ reload: loadAll });
   flex: 0 0 44%;
 }
 .task-active {
-  background: color-mix(in srgb, var(--fs-accent) 6%, var(--fs-surface-hover)) !important;
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) !important;
 }
 
 .panel-header {
   padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 
 .panel-title {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 0.75rem;
@@ -368,20 +381,20 @@ defineExpose({ reload: loadAll });
   display: flex;
   gap: 0.4rem;
   padding: 0.45rem 0.6rem;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 
 .task-add-input {
   flex: 1;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
+  background: var(--color-input-bg, var(--color-bg));
+  border: 1px solid var(--color-border);
   border-radius: 5px;
   padding: 0.28rem 0.5rem;
   font-size: 0.83rem;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
-.task-add-input:focus { outline: none; border-color: var(--fs-accent); }
+.task-add-input:focus { outline: none; border-color: var(--color-primary); }
 
 .btn-add { font-size: 1rem; }   /* a '+' glyph, not a label */
 
@@ -391,7 +404,7 @@ defineExpose({ reload: loadAll });
 }
 
 .ms-group {
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .ms-group-header {
@@ -400,18 +413,18 @@ defineExpose({ reload: loadAll });
   gap: 0.4rem;
   width: 100%;
   padding: 0.4rem 0.65rem;
-  background: var(--fs-surface-raised);
+  background: var(--color-surface-raised, color-mix(in srgb, var(--color-surface) 92%, var(--color-text)));
   border: none;
   cursor: pointer;
   text-align: left;
   font-size: 0.8rem;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
-.ms-group-header:hover { background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover)); }
+.ms-group-header:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
 
-.ms-chevron { font-size: 0.6rem; color: var(--fs-text-tertiary); width: 0.8rem; }
+.ms-chevron { font-size: 0.6rem; color: var(--color-text-muted); width: 0.8rem; }
 .ms-name { flex: 1; font-weight: 500; font-size: 0.8rem; }
-.ms-count { font-size: 0.72rem; color: var(--fs-text-tertiary); background: var(--fs-surface-page); border-radius: 10px; padding: 0 0.4rem; }
+.ms-count { font-size: 0.72rem; color: var(--color-text-muted); background: var(--color-bg); border-radius: 10px; padding: 0 0.4rem; }
 
 .ms-status {
   font-size: 0.68rem;
@@ -419,8 +432,8 @@ defineExpose({ reload: loadAll });
   border-radius: 10px;
   text-transform: capitalize;
 }
-.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); }
+.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, #27ae60) 15%, transparent); color: var(--color-success, #27ae60); }
 
 .task-items {
   list-style: none;
@@ -434,9 +447,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(--fs-border-color) 50%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
 }
-.task-row:hover { background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover)); }
+.task-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
 .task-row:last-child { border-bottom: none; }
 
 .status-dot {
@@ -444,7 +457,7 @@ defineExpose({ reload: loadAll });
   width: 1.35rem;
   height: 1.35rem;
   border-radius: 50%;
-  border: 1.5px solid var(--fs-border-color);
+  border: 1.5px solid var(--color-border);
   background: none;
   cursor: pointer;
   font-size: 0.62rem;
@@ -452,8 +465,8 @@ defineExpose({ reload: loadAll });
   align-items: center;
   justify-content: center;
 }
-.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); }
+.status-dot.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); }
+.status-dot.status-done { border-color: var(--color-success, #27ae60); color: var(--color-success, #27ae60); }
 
 .task-title {
   flex: 1;
@@ -461,20 +474,20 @@ defineExpose({ reload: loadAll });
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
-.task-title.done { text-decoration: line-through; color: var(--fs-text-tertiary); }
+.task-title.done { text-decoration: line-through; color: var(--color-text-muted); }
 
 .task-age {
   font-size: 0.68rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
-.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--fs-text-tertiary); }
+.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--color-text-muted); }
 
-.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--fs-text-tertiary); }
+.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
 
 /* ── Detail pane (bottom split) ── */
 .task-detail {
@@ -483,8 +496,8 @@ defineExpose({ reload: loadAll });
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--fs-surface-hover);
-  border-top: 2px solid var(--fs-border-color);
+  background: var(--color-surface);
+  border-top: 2px solid var(--color-border);
 }
 
 .detail-header {
@@ -492,7 +505,7 @@ defineExpose({ reload: loadAll });
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 
@@ -502,21 +515,21 @@ defineExpose({ reload: loadAll });
   font-size: 0.75rem;
   font-weight: 500;
   cursor: pointer;
-  border: 1.5px solid var(--fs-border-color);
+  border: 1.5px solid var(--color-border);
   background: none;
   text-transform: capitalize;
   user-select: none;
   margin-left: auto;
 }
-.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); }
+.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, #27ae60); color: var(--color-success, #27ae60); background: color-mix(in srgb, var(--color-success, #27ae60) 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(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
   max-height: 40%;
   overflow-y: auto;
@@ -524,17 +537,17 @@ defineExpose({ reload: loadAll });
 
 .body-loading {
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .detail-body .prose {
   font-size: 0.83rem;
   line-height: 1.5;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
 
 .btn-delete-task { margin-left: 0.25rem; }
-.btn-delete-task:hover { color: var(--fs-action-destructive); }
+.btn-delete-task:hover { color: var(--color-action-destructive); }
 
 .btn-delete-confirm { margin-left: 0.25rem; }
 
@@ -550,9 +563,9 @@ defineExpose({ reload: loadAll });
   font-size: 0.72rem;
   padding: 0.15rem 0.5rem;
   border-radius: 10px;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  color: var(--fs-text-tertiary);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
   text-transform: capitalize;
 }
 
@@ -560,20 +573,20 @@ defineExpose({ reload: loadAll });
   font-size: 0.72rem;
   padding: 0.15rem 0.4rem;
   border-radius: 10px;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  color: var(--fs-text-tertiary);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
   cursor: pointer;
   max-width: 140px;
 }
 .milestone-select:disabled { opacity: 0.5; cursor: default; }
-.milestone-select:focus { outline: none; border-color: var(--fs-accent); }
+.milestone-select:focus { outline: none; border-color: var(--color-primary); }
 
 .detail-log {
   flex: 1;
   overflow-y: auto;
   padding: 0 0.6rem 0.6rem;
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border);
 }
 
 /* Detail fade transition */
@@ -596,12 +609,12 @@ defineExpose({ reload: loadAll });
 /* Due date on task rows */
 .task-due {
   font-size: 0.65rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .task-due.overdue {
-  color: var(--fs-error);
+  color: var(--color-danger, #e74c3c);
   font-weight: 500;
 }
 

frontend/src/components/rules/PlanRulesPanel.vue

@@ -46,19 +46,13 @@ watch(() => props.projectId, load);
 <style scoped>
 .plan-rules {
   margin-top: 1.5rem;
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border, #2a2a2e);
   padding-top: 1rem;
 }
 .plan-rules h3 {
   font-size: 0.9em; opacity: 0.7;
   text-transform: uppercase; letter-spacing: 0.05em;
 }
-/* `.rb` is deliberately bare — it exists to namespace the two heading rules
-   below, and its children carry their own spacing (the h4 keeps the UA
-   margin-top that separates one rulebook group from the next). Nothing here
-   assumes a flex or grid parent, which is the tell that distinguishes this
-   from a base rule someone deleted (#2444). Stated so the next reader doesn't
-   re-open the question. */
 .rb h4 { font-family: Fraunces, serif; font-style: italic; margin-bottom: 0.25rem; }
 .rb h5 {
   font-size: 0.8em; opacity: 0.7;
@@ -66,7 +60,7 @@ watch(() => props.projectId, load);
 }
 .plan-rules ul {
   list-style: none; padding-left: 0.75rem; margin: 0.25rem 0;
-  border-left: 2px solid var(--fs-accent);
+  border-left: 2px solid var(--color-primary, #6366f1);
 }
 .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

@@ -2,18 +2,10 @@
 import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import {
-  getProjectApplicableRules,
-  subscribeProject,
-  unsubscribeProject,
-  listRulebooks,
-  getRule,
-  createProjectRule,
-  deleteRule,
-  suppressRuleForProject,
-  unsuppressRuleForProject,
-  suppressTopicForProject,
-  unsuppressTopicForProject,
-  includeAlwaysOnRulebook,
+  getProjectApplicableRules, subscribeProject, unsubscribeProject,
+  listRulebooks, getRule, createProjectRule, deleteRule,
+  suppressRuleForProject, unsuppressRuleForProject,
+  suppressTopicForProject, unsuppressTopicForProject,
 } from "@/api/rulebooks";
 import type { ApplicableRules, Rulebook } from "@/api/rulebooks";
 
@@ -24,16 +16,10 @@ const allRulebooks = ref<Rulebook[]>([]);
 const showPicker = ref(false);
 const expandedRuleIds = ref<Set<number>>(new Set());
 
-const ruleDetails = ref<Record<number, {
-  why: string; how_to_apply: string;
-  verify_with: string; expires_when: string; verified_at: string | null;
-}>>({});
+const ruleDetails = ref<Record<number, { why: string; how_to_apply: string }>>({});
 
 const showProjectRuleForm = ref(false);
-const newProjectRule = ref({
-  title: "", statement: "", why: "", how_to_apply: "",
-  when_to_apply: "", tier: "always_on" as "always_on" | "conditional",
-});
+const newProjectRule = ref({ title: "", statement: "", why: "", how_to_apply: "" });
 
 async function load() {
   applicable.value = await getProjectApplicableRules(props.projectId);
@@ -49,11 +35,6 @@ async function subscribe(rulebookId: number) {
   await load();
 }
 
-async function includeBack(rulebookId: number) {
-  await includeAlwaysOnRulebook(props.projectId, rulebookId);
-  await load();
-}
-
 async function unsubscribe(rulebookId: number) {
   if (!confirm("Unsubscribe from this rulebook for this project?")) return;
   await unsubscribeProject(props.projectId, rulebookId);
@@ -70,9 +51,6 @@ async function toggleRuleExpand(ruleId: number) {
       ruleDetails.value[ruleId] = {
         why: rule.why || "",
         how_to_apply: rule.how_to_apply || "",
-        verify_with: rule.verify_with || "",
-        expires_when: rule.expires_when || "",
-        verified_at: rule.verified_at,
       };
     }
   }
@@ -80,11 +58,6 @@ async function toggleRuleExpand(ruleId: number) {
   expandedRuleIds.value = new Set(expandedRuleIds.value);
 }
 
-/** "never run" reads as a stronger claim than an absent date — and it is. */
-function checkAge(verifiedAt: string | null): string {
-  return verifiedAt ? `last passed ${verifiedAt.slice(0, 10)}` : "never run";
-}
-
 function openInRulesView(rulebookId: number, ruleId?: number) {
   const query: Record<string, string> = { rb: String(rulebookId) };
   if (ruleId) query.rule = String(ruleId);
@@ -104,20 +77,14 @@ interface RulebookGroup {
 function groupByRulebookAndTopic(rules: ApplicableRules["rules"]): RulebookGroup[] {
   const byRulebook = new Map<number, RulebookGroup>();
   for (const r of rules) {
-    // A rule carries topic_id XOR project_id. Only rulebook-scoped rules reach
-    // this list, so a null topic would be a server-side contradiction — skip
-    // it rather than widen the group's type to accommodate a case that means
-    // something is wrong upstream.
-    if (r.topic_id === null) continue;
-    const topicId = r.topic_id;
     let rb = byRulebook.get(r.rulebook_id);
     if (!rb) {
       rb = { rulebook_id: r.rulebook_id, rulebook_title: r.rulebook_title, topics: [] };
       byRulebook.set(r.rulebook_id, rb);
     }
-    let topic = rb.topics.find((t) => t.topic_id === topicId);
+    let topic = rb.topics.find((t) => t.topic_id === r.topic_id);
     if (!topic) {
-      topic = { topic_id: topicId, topic_title: r.topic_title, rules: [] };
+      topic = { topic_id: r.topic_id, topic_title: r.topic_title, rules: [] };
       rb.topics.push(topic);
     }
     topic.rules.push(r);
@@ -133,13 +100,8 @@ async function submitProjectRule() {
     title: newProjectRule.value.title.trim() || undefined,
     why: newProjectRule.value.why.trim() || undefined,
     how_to_apply: newProjectRule.value.how_to_apply.trim() || undefined,
-    when_to_apply: newProjectRule.value.when_to_apply.trim() || undefined,
-    tier: newProjectRule.value.tier,
   });
-  newProjectRule.value = {
-    title: "", statement: "", why: "", how_to_apply: "",
-    when_to_apply: "", tier: "always_on",
-  };
+  newProjectRule.value = { title: "", statement: "", why: "", how_to_apply: "" };
   showProjectRuleForm.value = false;
   await load();
 }
@@ -210,17 +172,6 @@ watch(() => props.projectId, load);
       </div>
     </section>
 
-    <section v-if="applicable.excluded_always_on?.length" class="excluded">
-      <h3>Excluded always-on rulebooks</h3>
-      <p class="excluded-note">Opted out at inception — these do not bind this project.</p>
-      <div class="chips">
-        <span v-for="rb in applicable.excluded_always_on" :key="rb.id" class="chip chip-excluded">
-          <a @click="openInRulesView(rb.id)">{{ rb.title }}</a>
-          <button class="chip-remove" @click="includeBack(rb.id)" aria-label="Include again" title="Include again">↩</button>
-        </span>
-      </div>
-    </section>
-
     <section class="project-rules">
       <div class="section-head">
         <h3>Project rules</h3>
@@ -244,24 +195,6 @@ watch(() => props.projectId, load);
           placeholder="Statement (required) — the actionable instruction, 1-2 sentences"
           rows="2"
         ></textarea>
-        <textarea
-          v-model="newProjectRule.when_to_apply"
-          placeholder="When to apply — the trigger, not the instruction"
-          rows="2"
-        ></textarea>
-        <div class="tier-row">
-          <label>
-            <input v-model="newProjectRule.tier" type="radio" value="always_on" />
-            Always on
-          </label>
-          <label>
-            <input v-model="newProjectRule.tier" type="radio" value="conditional" />
-            Conditional
-          </label>
-          <span class="tier-hint">
-            Conditional if you had to name a system, an artifact or a moment to state the trigger.
-          </span>
-        </div>
         <textarea
           v-model="newProjectRule.why"
           placeholder="Why (optional) — the rationale"
@@ -290,16 +223,6 @@ watch(() => props.projectId, load);
             <div v-if="ruleDetails[r.id].how_to_apply">
               <strong>How to apply:</strong> {{ ruleDetails[r.id].how_to_apply }}
             </div>
-            <!-- Shown only when the rule carries a check. Read-only here: this
-                 tab is the project's view of what binds it, and editing a rule
-                 belongs on the rulebook surface that owns it. -->
-            <div v-if="ruleDetails[r.id].verify_with">
-              <strong>Check:</strong> {{ ruleDetails[r.id].verify_with }}
-              <span class="rule-check-age">{{ checkAge(ruleDetails[r.id].verified_at) }}</span>
-            </div>
-            <div v-if="ruleDetails[r.id].expires_when">
-              <strong>Ends when:</strong> {{ ruleDetails[r.id].expires_when }}
-            </div>
             <button class="delete-link" @click="removeProjectRule(r.id)">Delete</button>
           </div>
         </li>
@@ -353,13 +276,6 @@ watch(() => props.projectId, load);
                 <div v-if="ruleDetails[r.id].how_to_apply">
                   <strong>How to apply:</strong> {{ ruleDetails[r.id].how_to_apply }}
                 </div>
-                <div v-if="ruleDetails[r.id].verify_with">
-                  <strong>Check:</strong> {{ ruleDetails[r.id].verify_with }}
-                  <span class="rule-check-age">{{ checkAge(ruleDetails[r.id].verified_at) }}</span>
-                </div>
-                <div v-if="ruleDetails[r.id].expires_when">
-                  <strong>Ends when:</strong> {{ ruleDetails[r.id].expires_when }}
-                </div>
                 <button
                   class="edit-link"
                   @click="openInRulesView(r.rulebook_id, r.id)"
@@ -405,14 +321,6 @@ watch(() => props.projectId, load);
 </template>
 
 <style scoped>
-.tier-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; }
-.tier-row label { display: inline-flex; align-items: center; gap: 0.3rem; }
-.tier-row input { accent-color: var(--fs-accent); }
-.tier-hint { flex: 1; min-width: 12rem; font-size: 0.75rem; color: var(--fs-text-tertiary); }
-
-.excluded-note { margin: 0 0 0.5rem; color: var(--fs-text-tertiary); font-size: 0.85rem; }
-.chip-excluded { opacity: 0.8; text-decoration: line-through; }
-.chip-excluded .chip-remove { text-decoration: none; }
 .rules-tab { padding: 1rem; }
 h3 {
   font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em;
@@ -421,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(--fs-accent-soft);
+  background: var(--color-primary-bg, rgba(99,102,241,0.15));
   padding: 0.25rem 0.5rem; border-radius: 999px;
 }
 .chip a { cursor: pointer; }
@@ -429,47 +337,38 @@ h3 {
 .chip-remove:hover { opacity: 1; }
 .add {
   background: none;
-  border: 1px dashed var(--fs-border-color);
+  border: 1px dashed var(--color-border, #2a2a2e);
   padding: 0.25rem 0.75rem; border-radius: 999px; cursor: pointer;
   color: inherit;
 }
 select {
-  background: var(--fs-surface-page); color: inherit;
-  border: 1px solid var(--fs-border-color); border-radius: 6px;
+  background: var(--color-bg, #111113); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
   padding: 0.25rem 0.5rem;
 }
 .applicable { margin-top: 2rem; }
 .rb-group { margin-bottom: 1.5rem; }
 .rb-group h4 { font-family: Fraunces, serif; font-style: italic; margin-bottom: 0.5rem; }
-/* `.topic-group` is deliberately bare — a namespace for the two h5 rules (this
-   one and the flex row further down), with the h5's own margin-top doing the
-   separating. Its children assume nothing about it, which is what tells it
-   apart from a base rule someone deleted (#2444). */
 .topic-group h5 {
   font-size: 0.85em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em;
   margin-top: 0.75rem;
 }
 ul { list-style: none; padding: 0; margin: 0; }
 .rule {
-  border-left: 2px solid var(--fs-accent);
+  border-left: 2px solid var(--color-primary, #6366f1);
   padding-left: 0.75rem; margin: 0.5rem 0;
 }
 .rule-head { cursor: pointer; }
 .rule-title { font-weight: 500; }
-.rule-check-age {
-  margin-left: var(--fs-space-2);
-  color: var(--fs-text-tertiary);
-  font-variant-numeric: tabular-nums;
-}
 .rule-statement { display: block; opacity: 0.85; margin-top: 0.25rem; }
 .rule-detail {
   margin-top: 0.5rem; padding: 0.5rem;
-  background: var(--fs-surface-page); border-radius: 6px;
+  background: var(--color-bg, #111113); border-radius: 6px;
 }
 .rule-detail > div { margin-bottom: 0.5rem; }
 .edit-link {
   background: none; border: none; cursor: pointer;
-  color: var(--fs-accent); padding: 0.5rem 0 0 0;
+  color: var(--color-primary, #6366f1); padding: 0.5rem 0 0 0;
 }
 .empty, .truncated { opacity: 0.7; font-style: italic; }
 .empty a { cursor: pointer; text-decoration: underline; }
@@ -478,18 +377,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(--fs-surface-page);
-  border: 1px solid var(--fs-border-color); border-radius: 6px;
+  background: var(--color-bg, #111113);
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
 }
 .new-rule-form input, .new-rule-form textarea {
-  background: var(--fs-surface-hover); color: inherit;
-  border: 1px solid var(--fs-border-color); border-radius: 6px;
+  background: var(--color-surface, #18181b); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); 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(--fs-destructive); padding: 0.5rem 0 0 0;
+  color: var(--color-destructive, #b85a4a); padding: 0.5rem 0 0 0;
 }
 /* Per-rule / per-topic suppress affordance — quiet by default, reveal on hover */
 .topic-group h5 {
@@ -501,14 +400,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(--fs-text-tertiary); font-size: 0.75rem;
+  color: var(--color-muted, #888); 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(--fs-destructive); }
+.skip-btn:hover { color: var(--color-destructive, #b85a4a); }
 /* Suppressed section */
 .suppressed { margin-top: 1.5rem; }
 .suppressed-toggle {
@@ -527,13 +426,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(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
+  background: var(--color-bg, #111113);
+  border: 1px solid var(--color-border, #2a2a2e);
 }
 .suppressed-path { flex: 1; }
 .reenable-btn {
   background: none; border: none; cursor: pointer;
-  color: var(--fs-accent); font-size: 0.85em;
+  color: var(--color-primary, #6366f1); font-size: 0.85em;
 }
 .reenable-btn:hover { text-decoration: underline; }
 </style>

frontend/src/components/rules/RuleEditorSlideOver.vue

@@ -1,66 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { useRulebooksStore } from "@/stores/rulebooks";
-import { useCanonicalSystemsStore } from "@/stores/canonicalSystems";
-import type { RuleTier } from "@/api/rulebooks";
 
 const props = defineProps<{ ruleId: number | null; topicId: number | null }>();
 const emit = defineEmits<{ close: [] }>();
 
 const store = useRulebooksStore();
-const canon = useCanonicalSystemsStore();
 const title = ref("");
 const statement = ref("");
-const whenToApply = ref("");
-const tier = ref<RuleTier>("always_on");
-const systemIds = ref<number[]>([]);
 const why = ref("");
 const howToApply = ref("");
-const verifyWith = ref("");
-const expiresWhen = ref("");
-
-const relations = computed(() => store.currentRule?.relations ?? []);
-
-// The label a reader needs to judge an edge, not the stored token.
-const RELATION_LABEL: Record<string, { outgoing: string; incoming: string }> = {
-  co_surfaces: { outgoing: "arrives with", incoming: "arrives with" },
-  overrides: { outgoing: "overrides", incoming: "is overridden by" },
-  elaborates: { outgoing: "elaborates", incoming: "is elaborated by" },
-};
-
-function relationLabel(kind: string, direction: "outgoing" | "incoming") {
-  return RELATION_LABEL[kind]?.[direction] ?? kind;
-}
-
-function toggleSystem(id: number) {
-  const at = systemIds.value.indexOf(id);
-  if (at >= 0) systemIds.value.splice(at, 1);
-  else systemIds.value.push(id);
-}
 
 const isCreating = ref(props.ruleId === null);
 
-// The stored stamp, not the draft: it describes the check that was RUN, and
-// an unsaved edit to the textarea has not been run against anything.
-const verifiedAt = computed(() => store.currentRule?.verified_at ?? null);
-const savedCheck = computed(() => store.currentRule?.verify_with ?? "");
-// Built here rather than in the template: same shape as the server's
-// last_verified_label, and it keeps the null-narrowing in TypeScript's reach.
-const stampLabel = computed(() =>
-  verifiedAt.value ? `Last checked ${verifiedAt.value.slice(0, 10)}` : "Never checked",
-);
-const verifying = ref(false);
-
-async function verify(stillTrue: boolean) {
-  if (props.ruleId === null) return;
-  verifying.value = true;
-  try {
-    await store.verifyRule(props.ruleId, stillTrue);
-  } finally {
-    verifying.value = false;
-  }
-}
-
 async function load() {
   if (props.ruleId !== null) {
     await store.fetchRule(props.ruleId);
@@ -68,26 +20,15 @@ async function load() {
     if (r) {
       title.value = r.title;
       statement.value = r.statement;
-      whenToApply.value = r.when_to_apply || "";
-      tier.value = r.tier || "always_on";
-      systemIds.value = (r.systems ?? []).map((sys) => sys.id);
       why.value = r.why || "";
       howToApply.value = r.how_to_apply || "";
-      verifyWith.value = r.verify_with || "";
-      expiresWhen.value = r.expires_when || "";
     }
   } else {
     title.value = "";
     statement.value = "";
-    whenToApply.value = "";
-    tier.value = "always_on";
-    systemIds.value = [];
     why.value = "";
     howToApply.value = "";
-    verifyWith.value = "";
-    expiresWhen.value = "";
   }
-  await canon.fetchCatalog();
 }
 
 async function save() {
@@ -95,26 +36,16 @@ async function save() {
     emit("close");
     return;
   }
-  const fields = {
-    title: title.value,
-    statement: statement.value,
-    when_to_apply: whenToApply.value,
-    tier: tier.value,
-    // Always sent, so clearing the last area actually clears it — the server
-    // reads a list as "these ARE the areas now".
-    system_ids: systemIds.value,
-    why: why.value,
-    how_to_apply: howToApply.value,
-    // Always sent, including empty. The REST door maps "" to NULL, so
-    // clearing a field here actually clears it — the MCP door's "" means
-    // "leave unchanged" and needs an explicit clear_fields list instead.
-    verify_with: verifyWith.value,
-    expires_when: expiresWhen.value,
-  };
   if (isCreating.value && props.topicId !== null) {
-    await store.createRule(props.topicId, fields);
+    await store.createRule(props.topicId, {
+      title: title.value, statement: statement.value,
+      why: why.value, how_to_apply: howToApply.value,
+    });
   } else if (props.ruleId !== null) {
-    await store.updateRule(props.ruleId, fields);
+    await store.updateRule(props.ruleId, {
+      title: title.value, statement: statement.value,
+      why: why.value, how_to_apply: howToApply.value,
+    });
   }
   emit("close");
 }
@@ -146,108 +77,6 @@ watch(() => props.ruleId, load);
         Statement <span class="required">*</span>
         <textarea v-model="statement" rows="3" placeholder="The actionable instruction (1-2 sentences)." />
       </label>
-      <label>
-        When to apply
-        <textarea
-          v-model="whenToApply"
-          rows="2"
-          placeholder="The trigger, not the instruction — “before any git push”, “when a release is being cut”."
-        />
-      </label>
-
-      <fieldset class="tier">
-        <legend>How it reaches a session</legend>
-        <label class="tier-opt">
-          <input v-model="tier" type="radio" value="always_on" />
-          <span>
-            <strong>Always on</strong>
-            — loaded into every session.
-          </span>
-        </label>
-        <label class="tier-opt">
-          <input v-model="tier" type="radio" value="conditional" />
-          <span>
-            <strong>Conditional</strong>
-            — arrives when its trigger fires.
-          </span>
-        </label>
-        <p class="tier-test">
-          The test: can you name the trigger <em>without</em> naming a system, an artifact type
-          or a moment? If the honest answer is “whenever you are working”, it is always on.
-          Conditional costs nothing when it is irrelevant, which is what lets it be as long as
-          it needs to be.
-        </p>
-      </fieldset>
-
-      <fieldset v-if="canon.catalog.length" class="areas">
-        <legend>Areas this rule is about</legend>
-        <label v-for="entry in canon.catalog" :key="entry.id" class="area-opt">
-          <input
-            type="checkbox"
-            :checked="systemIds.includes(entry.id)"
-            @change="toggleSystem(entry.id)"
-          />
-          <span>{{ entry.name }}</span>
-        </label>
-        <p class="tier-test">
-          What lets this rule reach a project working in that area.
-        </p>
-      </fieldset>
-
-      <fieldset class="check">
-        <legend>Can this rule go stale?</legend>
-        <p class="tier-test intro">
-          Most rules are <em>decisions</em> — they have no truth value and change only when you
-          change them. Leave this empty for those. Fill it in when the rule asserts a
-          <em>fact</em> about something outside your control, because those go false quietly.
-        </p>
-        <label>
-          How to check it is still true
-          <textarea
-            v-model="verifyWith"
-            rows="2"
-            placeholder="A command, a path, a query — something runnable beats prose."
-          />
-        </label>
-        <label>
-          What would end it
-          <textarea
-            v-model="expiresWhen"
-            rows="2"
-            placeholder="A state, not a date — “when the runner can be given a bash shell”."
-          />
-        </label>
-
-        <div v-if="savedCheck" class="stamp">
-          <span class="stamp-age" :class="{ unchecked: !verifiedAt }">{{ stampLabel }}</span>
-          <span class="stamp-actions">
-            <button type="button" :disabled="verifying" @click="verify(true)">Still true</button>
-            <button type="button" :disabled="verifying" @click="verify(false)">No longer true</button>
-          </span>
-        </div>
-        <p v-if="savedCheck" class="tier-test">
-          Record this after actually running the check, never on the strength of the rule
-          sounding plausible. “No longer true” deliberately stores nothing — the rule is wrong,
-          not in a state worth recording, so it stays at the top of the sweep until you fix or
-          retire it.
-        </p>
-      </fieldset>
-
-      <section v-if="relations.length" class="relations">
-        <h3>Related rules</h3>
-        <ul>
-          <li v-for="rel in relations" :key="rel.id" class="relation">
-            <span class="relation-kind">{{ relationLabel(rel.kind, rel.direction) }}</span>
-            <span class="relation-target">rule #{{ rel.rule_id }}</span>
-            <span v-if="rel.note" class="relation-note">{{ rel.note }}</span>
-          </li>
-        </ul>
-        <p class="tier-test">
-          Rules that <em>fail together</em> are linked, never merged — a merged rule cannot be
-          cited, surfaced or suppressed a clause at a time.
-        </p>
-      </section>
-
       <label>
         Why
         <textarea v-model="why" rows="4" placeholder="Rationale — the reason this rule exists." />
@@ -269,8 +98,8 @@ watch(() => props.ruleId, load);
 .slide-over {
   position: fixed; top: 0; right: 0; bottom: 0;
   width: min(520px, 90vw);
-  background: var(--fs-surface-hover);
-  border-left: 2px solid var(--fs-accent);
+  background: var(--color-surface, #18181b);
+  border-left: 2px solid var(--color-primary, #6366f1);
   padding: 1.5rem;
   overflow-y: auto;
   box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
@@ -281,56 +110,14 @@ header h2 {
   font-family: Fraunces, serif; font-style: italic;
 }
 label { display: block; margin-bottom: 1rem; }
-.required { color: var(--fs-accent); }
+.required { color: var(--color-primary, #6366f1); }
 input, textarea {
   width: 100%; margin-top: 0.25rem;
-  background: var(--fs-surface-page); color: inherit;
-  border: 1px solid var(--fs-border-color); border-radius: 6px;
+  background: var(--color-bg, #111113); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
   padding: 0.5rem; font: inherit;
   font-family: inherit;
 }
-fieldset { border: 1px solid var(--fs-border-color); border-radius: var(--fs-radius-md); padding: 0.75rem; margin-bottom: 1rem; }
-legend { padding: 0 0.35rem; font-size: 0.8rem; color: var(--fs-text-tertiary); }
-.tier-opt, .area-opt { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.88rem; }
-.tier-opt input, .area-opt input { width: auto; margin-top: 0.2rem; accent-color: var(--fs-accent); }
-.tier-test { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--fs-text-tertiary); line-height: 1.45; }
-
-.relations h3 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--fs-text-secondary); }
-.relations ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
-.relation { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-size: 0.85rem; }
-.relation-kind { color: var(--fs-accent); }
-.relation-target { color: var(--fs-text-primary); }
-.relation-note { width: 100%; font-size: 0.78rem; color: var(--fs-text-tertiary); }
-
-/* A real base rule, not just descendants: the dangling-style check reads a
-   class that only ever appears as an ancestor as a half-deleted rule, and it
-   is right to — an element whose appearance comes only from its tag is one
-   `fieldset {}` edit away from being unstyled. */
-.check { margin-bottom: 1rem; }
-.check .intro { margin-top: 0; margin-bottom: 0.75rem; }
-.check label { margin-bottom: 0.75rem; }
-.stamp {
-  display: flex; align-items: center; gap: var(--fs-space-2);
-  flex-wrap: wrap;
-  margin-top: 0.25rem;
-}
-.stamp-age { font-size: 0.8rem; color: var(--fs-text-secondary); font-variant-numeric: tabular-nums; }
-/* Never-checked is INFORMATION, not an error: it is the ordinary starting
-   state of every constraint anyone has just written. --fs-overdue (error red)
-   is reserved for a broken promise like a missed due date; a verification age
-   is not one, and colouring it that way would make a brand-new rule look
-   broken. Secondary text, weighted normally. */
-.stamp-age.unchecked { color: var(--fs-text-tertiary); font-style: italic; }
-.stamp-actions { display: flex; gap: var(--fs-space-2); margin-left: auto; }
-.stamp-actions button {
-  cursor: pointer; font: inherit; font-size: 0.78rem;
-  background: var(--fs-surface-raised); color: var(--fs-text-primary);
-  border: 1px solid var(--fs-border-color); border-radius: var(--fs-radius-sm);
-  padding: 0.2rem 0.55rem;
-}
-.stamp-actions button:hover:not(:disabled) { background: var(--fs-surface-hover); }
-.stamp-actions button:disabled { opacity: var(--fs-disabled-opacity); cursor: default; }
-
 .trash, .close { background: none; border: none; cursor: pointer; opacity: 0.6; font-size: 1.25em; }
 .trash:hover, .close:hover { opacity: 1; }
 </style>

frontend/src/components/rules/RuleListPane.vue

@@ -13,57 +13,28 @@ const emit = defineEmits<{
     <header><h2>Rules</h2></header>
     <ul>
       <li v-for="r in rules" :key="r.id" @click="emit('open-rule', r.id)">
-        <div class="title">
-          {{ r.title }}
-          <!-- Only conditional is marked: always-on is the default and
-               badging every row would say nothing. -->
-          <span v-if="r.tier === 'conditional'" class="rule-chip" title="Arrives when its trigger fires, rather than in every session">conditional</span>
-          <!-- Present only on a rule carrying a check, so the chip's very
-               presence says "this one asserts a fact that can go false". -->
-          <span
-            v-if="r.last_verified"
-            class="rule-chip check-chip"
-            :class="{ unchecked: r.last_verified === 'never' }"
-            :title="r.last_verified === 'never'
-              ? 'Asserts a fact nobody has confirmed yet'
-              : `Check last passed ${r.last_verified}`"
-          >{{ r.last_verified === "never" ? "unverified" : `checked ${r.last_verified}` }}</span>
-        </div>
+        <div class="title">{{ r.title }}</div>
         <div class="statement">{{ r.statement }}</div>
-        <div v-if="r.when_to_apply || r.updated_at" class="meta">
-          <span v-if="r.when_to_apply" class="trigger">{{ r.when_to_apply }}</span>
-          <span v-if="r.updated_at" class="age" :title="`Last changed ${r.updated_at}`">{{ r.updated_at }}</span>
-        </div>
       </li>
     </ul>
     <button class="new-rule" @click="emit('create-rule', topicId)">+ New rule</button>
   </section>
 </template>
 
-<style src="@/assets/rules-shared.css" />
 <style scoped>
+.pane { background: var(--color-surface, #18181b); 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(--fs-accent);
+  border-left: 2px solid var(--color-primary, #6366f1);
   margin-bottom: 0.5rem;
   background: rgba(255, 255, 255, 0.02);
 }
-li:hover { background: var(--fs-surface-hover); }
+li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
 .title { font-family: Fraunces, serif; font-style: italic; font-size: 1.05em; }
 .statement { font-size: 0.9em; opacity: 0.8; margin-top: 0.25rem; }
-.meta { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.75em; }
-.trigger { flex: 1; min-width: 0; color: var(--fs-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.age { color: var(--fs-text-tertiary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
-/* Only the departures from .rule-chip (rules-shared.css) live here. */
-.check-chip { font-variant-numeric: tabular-nums; }
-/* No age-graded colour on purpose. The sweep is already ordered by urgency, so
-   a red/amber ramp would restate the ordering AND require an invented "stale
-   after N days" threshold — a magic number nobody could defend and the first
-   thing to go out of date. Only "never" is marked, because it is categorically
-   different from a date rather than a worse one. */
-.check-chip.unchecked { font-style: italic; color: var(--fs-text-tertiary); }
 .new-rule { cursor: pointer; }
 </style>

frontend/src/components/rules/RuleSweepPane.vue

@@ -1,180 +0,0 @@
-<script setup lang="ts">
-/**
- * The staleness sweep: rules that assert a FACT, oldest verification first.
- *
- * Cross-cutting by nature — a rule that has gone false does not care which
- * rulebook it sits in — so this is its own pane rather than a filter on the
- * per-topic rule list. That list can only ever show one topic of one
- * rulebook, so filtering it would quietly under-report, which is the exact
- * failure this surface exists to catch.
- */
-import { onMounted, ref } from "vue";
-import { useRulebooksStore } from "@/stores/rulebooks";
-import type { RuleTier } from "@/api/rulebooks";
-
-const emit = defineEmits<{ "open-rule": [id: number] }>();
-
-const store = useRulebooksStore();
-const neverOnly = ref(false);
-const tier = ref<RuleTier | "">("");
-const busyId = ref<number | null>(null);
-
-function reload() {
-  return store.fetchRulesDue({
-    neverOnly: neverOnly.value || undefined,
-    tier: tier.value || undefined,
-  });
-}
-
-async function verify(id: number, stillTrue: boolean) {
-  busyId.value = id;
-  try {
-    await store.verifyRule(id, stillTrue);
-  } finally {
-    busyId.value = null;
-  }
-}
-
-onMounted(reload);
-</script>
-
-<template>
-  <section class="pane sweep">
-    <header>
-      <h2>Due for verification</h2>
-      <p class="lede">
-        Rules that assert a fact about something outside your control. Most rules are
-        decisions and never appear here — they have no truth value to go stale.
-      </p>
-    </header>
-
-    <div class="filters">
-      <label class="filter">
-        <input v-model="neverOnly" type="checkbox" @change="reload" />
-        <span>Never checked only</span>
-      </label>
-      <label class="filter">
-        <span>Tier</span>
-        <select v-model="tier" @change="reload">
-          <option value="">any</option>
-          <option value="always_on">always on</option>
-          <option value="conditional">conditional</option>
-        </select>
-      </label>
-    </div>
-
-    <p v-if="store.loading" class="state">Loading…</p>
-
-    <!-- An empty sweep is GOOD NEWS, and must not read like a broken page. -->
-    <p v-else-if="!store.rulesDue.length" class="state empty">
-      Nothing to check.
-      {{ neverOnly || tier ? "No rule matches these filters." : "No rule carries a check yet — add one to a rule that asserts a fact." }}
-    </p>
-
-    <ol v-else class="rows">
-      <li v-for="r in store.rulesDue" :key="r.id" class="row">
-        <div class="row-head">
-          <button class="row-title" @click="emit('open-rule', r.id)">{{ r.title }}</button>
-          <span v-if="r.tier === 'always_on'" class="rule-chip" title="Loaded into every session — a wrong one is wrong everywhere at once">always on</span>
-          <span class="age" :class="{ unchecked: r.days_since_verified === null }">
-            {{ r.days_since_verified === null
-              ? "never checked"
-              : `${r.days_since_verified}d ago` }}
-          </span>
-        </div>
-
-        <p class="statement">{{ r.statement }}</p>
-
-        <dl class="check">
-          <dt>Check</dt>
-          <dd><code>{{ r.verify_with }}</code></dd>
-          <template v-if="r.expires_when">
-            <dt>Ends when</dt>
-            <dd>{{ r.expires_when }}</dd>
-          </template>
-        </dl>
-
-        <div class="actions">
-          <button :disabled="busyId === r.id" @click="verify(r.id, true)">Still true</button>
-          <button :disabled="busyId === r.id" @click="verify(r.id, false)">No longer true</button>
-        </div>
-      </li>
-    </ol>
-
-    <p v-if="store.rulesDue.length" class="footnote">
-      Record a result only after actually running the check. “No longer true” stores nothing
-      on purpose — the rule is wrong rather than in a state worth recording, so it keeps its
-      place here until you correct or retire it.
-    </p>
-  </section>
-</template>
-
-<style src="@/assets/rules-shared.css" />
-<style scoped>
-.sweep { display: flex; flex-direction: column; gap: var(--fs-space-3); }
-.lede {
-  margin: 0;
-  max-width: 62ch;
-  font-size: 0.85rem;
-  color: var(--fs-text-secondary);
-  line-height: 1.5;
-}
-
-.filters { display: flex; gap: var(--fs-space-5); align-items: center; flex-wrap: wrap; }
-.filter { display: flex; align-items: center; gap: var(--fs-space-2); font-size: 0.82rem; color: var(--fs-text-secondary); }
-.filter input[type="checkbox"] { accent-color: var(--fs-accent); }
-.filter select {
-  font: inherit; font-size: 0.82rem;
-  background: var(--fs-surface-page); color: var(--fs-text-primary);
-  border: 1px solid var(--fs-border-color); border-radius: var(--fs-radius-md);
-  padding: 0.2rem 0.4rem;
-}
-
-.state { margin: 0; font-size: 0.9rem; color: var(--fs-text-secondary); }
-.state.empty { color: var(--fs-text-tertiary); }
-
-.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fs-space-3); }
-.row {
-  background: var(--fs-surface-raised);
-  border-radius: var(--fs-radius-md);
-  padding: var(--fs-space-3);
-}
-.row-head { display: flex; align-items: baseline; gap: var(--fs-space-2); flex-wrap: wrap; }
-.row-title {
-  background: none; border: none; padding: 0; cursor: pointer;
-  font-family: Fraunces, serif; font-style: italic; font-size: 1.02rem;
-  color: var(--fs-text-primary); text-align: left;
-}
-.row-title:hover { text-decoration: underline; }
-/* The ORDER carries urgency — the top of this list is the most overdue thing
-   in the rulebook. No red/amber ramp: it would restate the ordering and force
-   an invented "stale after N days" threshold. "Never" is marked because it is
-   categorically different from a date, not a worse one. */
-.age { margin-left: auto; font-size: 0.78rem; color: var(--fs-text-secondary); font-variant-numeric: tabular-nums; }
-.age.unchecked { font-style: italic; color: var(--fs-text-tertiary); }
-
-.statement { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--fs-text-secondary); }
-
-.check { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem var(--fs-space-3); margin: var(--fs-space-3) 0 0; }
-.check dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fs-text-tertiary); }
-.check dd { margin: 0; font-size: 0.82rem; color: var(--fs-text-primary); min-width: 0; }
-.check code {
-  font-family: var(--fs-font-mono);
-  background: var(--fs-surface-code-inline);
-  border-radius: var(--fs-radius-sm);
-  padding: 0.05rem 0.3rem;
-  overflow-wrap: anywhere;
-}
-
-.actions { display: flex; gap: var(--fs-space-2); margin-top: var(--fs-space-3); }
-.actions button {
-  cursor: pointer; font: inherit; font-size: 0.78rem;
-  background: var(--fs-surface-page); color: var(--fs-text-primary);
-  border: 1px solid var(--fs-border-color); border-radius: var(--fs-radius-md);
-  padding: 0.25rem 0.6rem;
-}
-.actions button:hover:not(:disabled) { background: var(--fs-surface-hover); }
-.actions button:disabled { opacity: var(--fs-disabled-opacity); cursor: default; }
-
-.footnote { margin: 0; max-width: 62ch; font-size: 0.78rem; color: var(--fs-text-tertiary); line-height: 1.45; }
-</style>

frontend/src/components/rules/RulebookDetailPane.vue

@@ -121,9 +121,10 @@ watch(() => props.rulebookId, () => {/* re-render of isSubscribed from existing
   </section>
 </template>
 
-<style src="@/assets/rules-shared.css" />
 <style scoped>
+.pane { background: var(--color-surface, #18181b); 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 {
   display: flex; align-items: center; gap: 0.4rem;
   font-size: 0.85rem; opacity: 0.85; cursor: pointer;
@@ -132,22 +133,18 @@ header { display: flex; align-items: center; justify-content: space-between; gap
 .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(--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 —
-   a base a class-name check cannot see, since it comes from an element
-   selector. Both namespace descendant rules and assume nothing about layout. */
+li.active { background: var(--color-primary-bg, rgba(99,102,241,0.15)); }
+li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
 .new-topic input {
   width: 100%; margin-bottom: 0.5rem;
-  background: var(--fs-surface-page); color: inherit;
-  border: 1px solid var(--fs-border-color); border-radius: 6px;
+  background: var(--color-bg, #111113); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
   padding: 0.5rem;
 }
+.form-buttons { display: flex; gap: 0.5rem; }
 .subscriptions {
   margin-top: 2rem;
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border, #2a2a2e);
   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

@@ -3,8 +3,8 @@ import { ref } from "vue";
 import { useRulebooksStore } from "@/stores/rulebooks";
 import type { Rulebook } from "@/api/rulebooks";
 
-defineProps<{ rulebooks: Rulebook[]; selectedId: number | null; sweepActive: boolean }>();
-const emit = defineEmits<{ select: [id: number]; "select-sweep": [] }>();
+defineProps<{ rulebooks: Rulebook[]; selectedId: number | null }>();
+const emit = defineEmits<{ select: [id: number] }>();
 
 const store = useRulebooksStore();
 const isCreating = ref(false);
@@ -34,18 +34,6 @@ async function submitNew() {
         <span v-if="rb.always_on" class="always-on-badge" title="Loaded at session start">always on</span>
       </li>
     </ul>
-    <!-- Not a rulebook, and deliberately below them: a cross-cutting view over
-         every rule the operator owns. It lives here because this is where you
-         come to look at rules, and a rule that has gone false belongs to no
-         one rulebook. -->
-    <button
-      class="sweep-entry"
-      :class="{ active: sweepActive }"
-      @click="emit('select-sweep')"
-    >
-      Due for verification
-    </button>
-
     <div class="new-rulebook">
       <button v-if="!isCreating" @click="isCreating = true">+ New rulebook</button>
       <form v-else @submit.prevent="submitNew">
@@ -59,37 +47,30 @@ async function submitNew() {
   </aside>
 </template>
 
-<style src="@/assets/rules-shared.css" />
 <style scoped>
+.pane { background: var(--color-surface, #18181b); 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(--fs-accent-soft); }
-li:hover { background: var(--fs-surface-hover); }
+li.active { background: var(--color-primary-bg, rgba(99,102,241,0.15)); }
+li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
 .always-on-badge {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.1rem 0.4rem;
   border-radius: 3px;
-  background: var(--fs-accent);
-  color: var(--fs-text-on-action);
+  background: var(--color-accent, rgba(91,74,138,0.25));
+  color: var(--color-accent-fg, inherit);
   margin-left: auto;
 }
-.sweep-entry {
-  display: block; width: 100%; text-align: left;
-  margin-top: var(--fs-space-3);
-  padding: 0.5rem; border-radius: 6px;
-  background: none; border: 1px dashed var(--fs-border-color);
-  color: var(--fs-text-secondary); font: inherit; cursor: pointer;
-}
-.sweep-entry:hover { background: var(--fs-surface-hover); }
-.sweep-entry.active { background: var(--fs-accent-soft); color: var(--fs-text-primary); }
 .new-rulebook { margin-top: 1rem; }
 .new-rulebook input {
   width: 100%; margin-bottom: 0.5rem;
-  background: var(--fs-surface-page); color: inherit;
-  border: 1px solid var(--fs-border-color); border-radius: 6px;
+  background: var(--color-bg, #111113); color: inherit;
+  border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px;
   padding: 0.5rem;
 }
+.form-buttons { display: flex; gap: 0.5rem; }
 button { cursor: pointer; }
 </style>

frontend/src/composables/useRelativeTime.ts

@@ -9,15 +9,3 @@ 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/router/index.ts

@@ -110,11 +110,15 @@ const router = createRouter({
       component: () => import("@/views/RulesView.vue"),
     },
     {
-      // The design systems this install RECORDS — for the projects it tracks,
-      // not for the install itself. There was a sibling `/design` that read the
-      // running app's own stylesheet out of the browser; it could only ever
-      // inspect the instance it was served from, which made it a mirror rather
-      // than a tool (#274).
+      // Meta-surface, same family as /rules: it describes the app rather than
+      // holding the operator's records.
+      path: "/design",
+      name: "design",
+      component: () => import("@/views/DesignView.vue"),
+    },
+    {
+      // The editable half of the same surface: /design is what the browser
+      // renders, /design-systems is the record that ought to decide it.
       path: "/design-systems",
       name: "design-systems",
       component: () => import("@/views/DesignSystemsView.vue"),

frontend/src/stores/canonicalSystems.ts

@@ -1,93 +0,0 @@
-import { ref } from "vue";
-import { defineStore } from "pinia";
-import * as api from "@/api/canonicalSystems";
-import type { CanonicalSystem, MappingProposal } from "@/api/canonicalSystems";
-import { useToastStore } from "@/stores/toast";
-import { apiErrorMessage } from "@/api/client";
-
-/**
- * The global area catalog (milestone 307). Shared by every project, so it is
- * fetched ONCE per session rather than per project — the whole point of the
- * table is that it is the same list everywhere.
- */
-export const useCanonicalSystemsStore = defineStore("canonicalSystems", () => {
-  const catalog = ref<CanonicalSystem[]>([]);
-  const loaded = ref(false);
-  const loading = ref(false);
-  const proposalsByProject = ref<Record<number, MappingProposal[]>>({});
-
-  async function fetchCatalog(force = false) {
-    if (loaded.value && !force) return catalog.value;
-    loading.value = true;
-    try {
-      catalog.value = await api.listCanonicalSystems();
-      loaded.value = true;
-    } catch {
-      // A naming aid must never break the screen it rides on — an empty
-      // catalog degrades the suggestion, it does not fail the form.
-      catalog.value = [];
-    } finally {
-      loading.value = false;
-    }
-    return catalog.value;
-  }
-
-  function byId(id: number | null): CanonicalSystem | undefined {
-    if (id == null) return undefined;
-    return catalog.value.find((c) => c.id === id);
-  }
-
-  async function fetchProposals(projectId: number) {
-    proposalsByProject.value[projectId] = await api.proposeMappings(projectId);
-    return proposalsByProject.value[projectId];
-  }
-
-  /** Apply or clear one mapping, then drop it from the pending proposals. */
-  async function mapSystem(projectId: number, systemId: number, canonicalId: number | null) {
-    try {
-      await api.mapSystem(systemId, canonicalId);
-    } catch (e) {
-      useToastStore().show(apiErrorMessage(e, "Failed to map system"), "error");
-      throw e;
-    }
-    dismissProposal(projectId, systemId);
-  }
-
-  /** Remove a proposal from the pending list without writing anything. */
-  function dismissProposal(projectId: number, systemId: number) {
-    const list = proposalsByProject.value[projectId];
-    if (list) {
-      proposalsByProject.value[projectId] = list.filter((p) => p.system_id !== systemId);
-    }
-  }
-
-  async function createEntry(data: { name: string; description?: string }) {
-    const entry = await api.createCanonicalSystem(data);
-    catalog.value.push(entry);
-    return entry;
-  }
-
-  async function updateEntry(
-    id: number,
-    data: Partial<{ name: string; description: string; order_index: number }>,
-  ) {
-    const entry = await api.updateCanonicalSystem(id, data);
-    const idx = catalog.value.findIndex((c) => c.id === id);
-    if (idx >= 0) catalog.value[idx] = entry;
-    return entry;
-  }
-
-  return {
-    catalog,
-    loaded,
-    loading,
-    proposalsByProject,
-    fetchCatalog,
-    byId,
-    fetchProposals,
-    mapSystem,
-    dismissProposal,
-    createEntry,
-    updateEntry,
-  };
-});

frontend/src/stores/rulebooks.ts

@@ -9,11 +9,6 @@ export const useRulebooksStore = defineStore("rulebooks", () => {
   const topicsByRulebook = ref<Record<number, RulebookTopic[]>>({});
   const rulesByTopic = ref<Record<number, RuleHeader[]>>({});
   const currentRule = ref<Rule | null>(null);
-  const rulesDue = ref<api.RuleVerificationRow[]>([]);
-  // Kept so a verify re-reads the sweep with the SAME filters the operator is
-  // looking at — re-fetching unfiltered would silently widen the list under
-  // them at the moment they acted on it.
-  const lastSweepOpts = ref<{ olderThanDays?: number; tier?: api.RuleTier; neverOnly?: boolean }>({});
   const loading = ref(false);
 
   async function fetchRulebooks() {
@@ -40,7 +35,9 @@ export const useRulebooksStore = defineStore("rulebooks", () => {
   async function fetchRules(topicId: number) {
     try {
       const rules = await api.listRules({ topic_id: topicId });
-      rulesByTopic.value[topicId] = rules.map(toHeader);
+      rulesByTopic.value[topicId] = rules.map((r) => ({
+        id: r.id, title: r.title, statement: r.statement, topic_id: r.topic_id,
+      }));
     } catch (e) {
       useToastStore().show("Failed to load rules", "error");
       throw e;
@@ -101,100 +98,24 @@ export const useRulebooksStore = defineStore("rulebooks", () => {
     delete rulesByTopic.value[id];
   }
 
-  /**
-   * A list row built from a full rule. The row shape is the server's
-   * rule_brief, so every field it carries has to be mirrored here or the two
-   * disagree the moment a list is patched locally instead of re-fetched.
-   */
-  function toHeader(rule: Rule): api.RuleHeader {
-    return {
-      id: rule.id,
-      title: rule.title,
-      statement: rule.statement,
-      topic_id: rule.topic_id,
-      tier: rule.tier,
-      updated_at: rule.updated_at,
-      when_to_apply: rule.when_to_apply || undefined,
-      arose_from_id: rule.arose_from_id ?? undefined,
-      // Mirrors services.rulebooks.last_verified_label: present ONLY when the
-      // rule carries a check, and "never" rather than absent when it has one
-      // nobody has run. Computed here so a row just written looks identical to
-      // the same row re-fetched, instead of losing its chip until a reload.
-      last_verified: rule.verify_with
-        ? (rule.verified_at ? rule.verified_at.slice(0, 10) : "never")
-        : undefined,
-    };
-  }
-
-  async function createRule(topicId: number, data: Partial<api.RuleWrite> & { title: string; statement: string }) {
+  async function createRule(topicId: number, data: { title: string; statement: string; why?: string; how_to_apply?: string }) {
     const rule = await api.createRule(topicId, data);
     if (!rulesByTopic.value[topicId]) rulesByTopic.value[topicId] = [];
-    rulesByTopic.value[topicId].push(toHeader(rule));
+    rulesByTopic.value[topicId].push({ id: rule.id, title: rule.title, statement: rule.statement, topic_id: rule.topic_id });
     return rule;
   }
 
-  async function updateRule(id: number, data: Partial<api.RuleWrite>) {
+  async function updateRule(id: number, data: Partial<Pick<Rule, "title" | "statement" | "why" | "how_to_apply" | "order_index">>) {
     const rule = await api.updateRule(id, data);
     if (currentRule.value?.id === id) currentRule.value = rule;
     for (const tid of Object.keys(rulesByTopic.value)) {
       const list = rulesByTopic.value[Number(tid)];
       const idx = list.findIndex((r) => r.id === id);
-      if (idx >= 0) list[idx] = toHeader(rule);
+      if (idx >= 0) list[idx] = { id: rule.id, title: rule.title, statement: rule.statement, topic_id: rule.topic_id };
     }
     return rule;
   }
 
-  async function relateRules(
-    fromRuleId: number,
-    data: { to_rule_id: number; kind: api.RuleRelationKind; note?: string },
-  ) {
-    await api.relateRules(fromRuleId, data);
-    // Re-read rather than patching locally: the edge reads from BOTH ends, so
-    // the far rule's relations changed too and a local splice would show only
-    // half of what just happened.
-    await fetchRule(fromRuleId);
-  }
-
-  async function unrelateRules(relationId: number, refreshRuleId: number) {
-    await api.unrelateRules(relationId);
-    await fetchRule(refreshRuleId);
-  }
-
-  /** The staleness sweep: rules asserting a fact, oldest verification first. */
-  async function fetchRulesDue(opts: {
-    olderThanDays?: number; tier?: api.RuleTier; neverOnly?: boolean;
-  } = {}) {
-    loading.value = true;
-    lastSweepOpts.value = opts;
-    try {
-      const data = await api.listRulesDueForVerification(opts);
-      rulesDue.value = data.rules;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  /**
-   * Record that a rule's check was RUN, and what it said.
-   *
-   * A pass re-sorts the row to the back of the sweep, so the list is re-read
-   * rather than patched: the whole point of this surface is an ORDER, and a
-   * locally-mutated row would sit in its old position claiming a new date.
-   * A failure writes nothing server-side and the row keeps its place — also
-   * correct, and also what a re-read shows.
-   */
-  async function verifyRule(id: number, stillTrue: boolean) {
-    const rule = await api.markRuleVerified(id, stillTrue);
-    if (currentRule.value?.id === id) currentRule.value = rule;
-    for (const tid of Object.keys(rulesByTopic.value)) {
-      const list = rulesByTopic.value[Number(tid)];
-      const idx = list.findIndex((r) => r.id === id);
-      if (idx >= 0) list[idx] = toHeader(rule);
-    }
-    if (rulesDue.value.length) await fetchRulesDue(lastSweepOpts.value);
-    return rule;
-  }
-
   async function deleteRule(id: number) {
     await api.deleteRule(id);
     if (currentRule.value?.id === id) currentRule.value = null;
@@ -204,11 +125,10 @@ export const useRulebooksStore = defineStore("rulebooks", () => {
   }
 
   return {
-    rulebooks, topicsByRulebook, rulesByTopic, currentRule, rulesDue, lastSweepOpts, loading,
+    rulebooks, topicsByRulebook, rulesByTopic, currentRule, loading,
     fetchRulebooks, fetchTopics, fetchRules, fetchRule,
     createRulebook, updateRulebook, toggleAlwaysOn, deleteRulebook,
     createTopic, updateTopic, deleteTopic,
-    createRule, updateRule, deleteRule, relateRules, unrelateRules,
-    fetchRulesDue, verifyRule,
+    createRule, updateRule, deleteRule,
   };
 });

frontend/src/stores/systems.ts

@@ -22,7 +22,7 @@ export const useSystemsStore = defineStore("systems", () => {
 
   async function createSystem(
     projectId: number,
-    data: { name: string; description?: string; color?: string; canonical_id?: number },
+    data: { name: string; description?: string; color?: string },
   ) {
     const system = await api.createSystem(projectId, data);
     if (!systemsByProject.value[projectId]) systemsByProject.value[projectId] = [];

frontend/src/types/note.ts

@@ -2,16 +2,7 @@ import type { System } from "@/api/systems";
 
 export type TaskStatus = "todo" | "in_progress" | "done" | "cancelled";
 export type TaskPriority = "none" | "low" | "medium" | "high";
-/**
- * What KIND of work a task is, not how it is going.
- *   work  — ships a change (default)
- *   issue — corrective; something was broken
- *   spike — time-boxed, output is knowledge; it succeeds by producing an
- *           answer and nothing ships at the end of it
- *   plan  — retired (plans are milestones); kept so historical plan-tasks
- *           still render their kind
- */
-export type TaskKind = "work" | "plan" | "issue" | "spike";
+export type TaskKind = "work" | "plan" | "issue";
 export type NoteType = "note" | "process" | "snippet";
 
 export interface Note {
@@ -19,6 +10,7 @@ export interface Note {
   title: string;
   body: string;
   description: string | null;
+  consolidated_at: string | null;
   tags: string[];
   parent_id: number | null;
   parent_title?: string | null;

frontend/src/utils/dateFormat.ts

@@ -1,32 +1,65 @@
+/** 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" })}`
+}
+
 /**
- * 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.
+ * "Today 9:30 AM" / "Tomorrow 9:30 AM" / "Mon, Jan 15 9:30 AM"
+ * For all-day events returns "Today" / "Tomorrow" / "Mon, Jan 15"
  */
+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)
 
-/** "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",
-  });
+    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, 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",
-  });
+/**
+ * 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, 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",
-  });
+/** "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" })
 }

frontend/src/utils/designDrift.ts

@@ -0,0 +1,169 @@
+/**
+ * Drift comparison — what the rulebook claims vs what the stylesheet does.
+ *
+ * Milestone #251 step 5. Deliberately thin: the hard half (turning rulebook
+ * prose into claims) is server-side in `services/design_system.py`, where pytest
+ * can assert on it. What's left here is set arithmetic over live token values,
+ * which is the one thing the browser knows and the server doesn't.
+ *
+ * SCOPE, and it is a real limit rather than an omission. This compares the
+ * rulebook against the TOKENS. It cannot see the third category of drift — a
+ * literal hardcoded in a component where a token should be referenced (#2275,
+ * 67 occurrences of `color: #fff` against a rule that forbids pure white). That
+ * drift isn't in the tokens at all, so no amount of inspecting them finds it.
+ *
+ * Catching it needs the component sources, which would mean bundling every SFC
+ * into the app to read at runtime — a large cost for a panel. It belongs in CI,
+ * as a lint-shaped check, and is tracked there (#2277). Saying so in the panel
+ * matters: a drift report that silently omits a category invites the reader to
+ * conclude the category is clean.
+ */
+import type { DesignToken } from "@/utils/designTokens";
+
+export type ExpectationKind = "token" | "color" | "prohibited_color";
+
+export interface Expectation {
+  kind: ExpectationKind;
+  value: string;
+  rule_id: number;
+  rule_title: string;
+  context: string;
+}
+
+export interface ExpectationResponse {
+  rulebook_id: number | null;
+  expectations: Expectation[];
+}
+
+export type FindingStatus = "ok" | "missing" | "violated";
+
+export interface Finding {
+  expectation: Expectation;
+  status: FindingStatus;
+  /** Tokens that satisfy (or, for a prohibition, breach) the expectation. */
+  matches: string[];
+}
+
+/**
+ * Normalise a colour for comparison — the client-side twin of
+ * `normalize_hex` in services/design_system.py.
+ *
+ * These two MUST agree. The rulebook writes `#FFFFFF`, `theme.css` writes
+ * `#fff`, and getComputedStyle hands back `rgb(255, 255, 255)` — three
+ * spellings of one colour, and a comparison that misses any of them under-reports
+ * rather than erroring. The rgb() case is browser-specific and therefore has no
+ * server-side counterpart, which is exactly why it is handled here.
+ */
+export function normalizeColour(value: string): string | null {
+  const raw = value.trim().toLowerCase();
+
+  const hex = /^#([0-9a-f]{3,8})$/.exec(raw);
+  if (hex) {
+    let digits = hex[1];
+    if (digits.length === 3 || digits.length === 4) {
+      digits = digits.split("").map((c) => c + c).join("");
+    }
+    return digits.length === 6 || digits.length === 8 ? `#${digits}` : null;
+  }
+
+  // getComputedStyle always reports colours as rgb()/rgba(), never as authored.
+  const rgb = /^rgba?\(([^)]+)\)$/.exec(raw);
+  if (rgb) {
+    const parts = rgb[1].split(/[,\s/]+/).filter(Boolean);
+    if (parts.length < 3) return null;
+    const channels = parts.slice(0, 3).map((p) => Number(p));
+    if (channels.some((n) => !Number.isFinite(n))) return null;
+    const hexOf = (n: number) => Math.round(n).toString(16).padStart(2, "0");
+    const base = `#${channels.map(hexOf).join("")}`;
+    if (parts.length === 3) return base;
+    const alpha = Number(parts[3]);
+    if (!Number.isFinite(alpha) || alpha >= 1) return base;
+    return `${base}${hexOf(alpha * 255)}`;
+  }
+
+  return null;
+}
+
+/** Every distinct colour the stylesheet actually resolves to, mapped to its tokens. */
+export function colourIndex(tokens: DesignToken[]): Map<string, string[]> {
+  const index = new Map<string, string[]>();
+  for (const token of tokens) {
+    const colour = normalizeColour(token.value);
+    if (!colour) continue;
+    const names = index.get(colour);
+    if (names) names.push(token.name);
+    else index.set(colour, [token.name]);
+  }
+  return index;
+}
+
+/**
+ * Compare claims against the live tokens.
+ *
+ * A `token` claim asks whether a custom property of that name exists.
+ * A `color` claim asks whether any token resolves to that value.
+ * A `prohibited_color` claim INVERTS the test — present is the failure.
+ */
+export function compareToTokens(
+  expectations: Expectation[],
+  tokens: DesignToken[],
+): Finding[] {
+  const names = new Set(tokens.map((t) => t.name));
+  const colours = colourIndex(tokens);
+
+  return expectations.map((expectation) => {
+    if (expectation.kind === "token") {
+      const present = names.has(expectation.value);
+      return {
+        expectation,
+        status: present ? "ok" : "missing",
+        matches: present ? [expectation.value] : [],
+      };
+    }
+
+    const matches = colours.get(expectation.value) ?? [];
+    if (expectation.kind === "prohibited_color") {
+      return {
+        expectation,
+        status: matches.length ? "violated" : "ok",
+        matches,
+      };
+    }
+    return {
+      expectation,
+      status: matches.length ? "ok" : "missing",
+      matches,
+    };
+  });
+}
+
+export interface DriftSummary {
+  ok: number;
+  missing: number;
+  violated: number;
+  total: number;
+}
+
+export function summarise(findings: Finding[]): DriftSummary {
+  const summary: DriftSummary = { ok: 0, missing: 0, violated: 0, total: findings.length };
+  for (const finding of findings) summary[finding.status] += 1;
+  return summary;
+}
+
+/**
+ * Findings worth leading with.
+ *
+ * A panel that opens with every row gets closed and never reopened — the same
+ * principle the auto-inject menu is built on: a short list that gets read beats
+ * a complete one that doesn't. Violations first (something is actively wrong),
+ * then missing (something was never built), and `ok` rows are not "findings" at
+ * all — they belong behind an expansion.
+ */
+export function rankFindings(findings: Finding[]): Finding[] {
+  const order: Record<FindingStatus, number> = { violated: 0, missing: 1, ok: 2 };
+  return [...findings].sort((a, b) => {
+    const byStatus = order[a.status] - order[b.status];
+    if (byStatus !== 0) return byStatus;
+    return a.expectation.rule_id - b.expectation.rule_id;
+  });
+}

frontend/src/utils/designTokens.ts

@@ -0,0 +1,181 @@
+/**
+ * Design-token inventory — what tokens exist, and what they actually resolve to.
+ *
+ * Foundation for the design explorer (milestone #251): the gallery renders
+ * against these, and the drift panel compares them to the design rulebook.
+ *
+ * DESIGN NOTE — why this parses NAMES but never VALUES.
+ * Extracting `--foo` from a stylesheet is a trivial, robust regex. Extracting
+ * its VALUE is not: values contain nested parens, commas inside rgba(),
+ * `var()` references to other tokens, multi-part shadows, and gradients — and
+ * `theme.css` has all of those today. So we take the names from the source and
+ * ask the BROWSER for every value.
+ *
+ * That is not just easier, it is more correct. getComputedStyle reports what
+ * actually won the cascade, resolves `var()` chains, and — critically for this
+ * milestone — reflects live overrides set on a container, which is exactly what
+ * the preview surface needs (see #2261). Parsing the source would report what
+ * the file says rather than what the user is looking at.
+ *
+ * It also means this module needs no unit tests to be trustworthy: the only
+ * logic here is a name regex and a group lookup. The frontend has no test
+ * runner today (`vue-tsc --noEmit` is the whole check), so keeping the
+ * error-prone half in the browser rather than in our code is deliberate.
+ */
+import themeCss from "@/assets/theme.css?raw";
+
+export type TokenGroup =
+  | "color"
+  | "radius"
+  | "gradient"
+  | "glow"
+  | "focus"
+  | "layout"
+  | "other";
+
+export type ThemeMode = "light" | "dark";
+
+export interface DesignToken {
+  /** Full custom-property name, including the leading `--`. */
+  name: string;
+  /** Coarse family, derived from the name prefix. */
+  group: TokenGroup;
+  /** Resolved value in the requested context, straight from the browser. */
+  value: string;
+  /** True when the declaration appears inside the dark block in source. */
+  overriddenInDark: boolean;
+}
+
+/**
+ * Matches a custom-property DECLARATION, and never a `var(--name)` use.
+ *
+ * The discriminator is the COLON, not the preceding character. A declaration is
+ * `--name:`; a reference is `var(--name)` or `var(--name, fallback)` — followed
+ * by `)` or `,`, never by `:`. So no anchor is needed, and adding one is
+ * actively wrong: an earlier version required the match to follow `{` or `;`,
+ * which silently dropped every declaration that came after a comment —
+ * including `--color-bg`, the first and most-used token in the file.
+ */
+const DECLARATION = /(--[A-Za-z0-9_-]+)\s*:/g;
+
+/** Comments are stripped first so a commented-out declaration isn't counted. */
+const COMMENT = /\/\*[\s\S]*?\*\//g;
+
+/** The dark block's selector, as written in theme.css. */
+const DARK_SELECTOR = '[data-theme="dark"]';
+
+const GROUP_PREFIXES: ReadonlyArray<[string, TokenGroup]> = [
+  ["--color-", "color"],
+  ["--radius-", "radius"],
+  ["--gradient-", "gradient"],
+  ["--glow-", "glow"],
+  ["--focus-", "focus"],
+  ["--page-", "layout"],
+  ["--sidebar-", "layout"],
+  ["--chat-", "layout"],
+];
+
+export function groupFor(name: string): TokenGroup {
+  for (const [prefix, group] of GROUP_PREFIXES) {
+    if (name.startsWith(prefix)) return group;
+  }
+  return "other";
+}
+
+/** Every custom property declared anywhere in the stylesheet, in source order, deduped. */
+export function tokenNames(css: string = themeCss): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const match of css.replace(COMMENT, "").matchAll(DECLARATION)) {
+    const name = match[1];
+    if (!seen.has(name)) {
+      seen.add(name);
+      out.push(name);
+    }
+  }
+  return out;
+}
+
+/** The subset re-declared inside the dark block — i.e. tokens that change with mode. */
+export function darkOverriddenNames(css: string = themeCss): Set<string> {
+  const bare = css.replace(COMMENT, "");
+  const start = bare.indexOf(DARK_SELECTOR);
+  if (start === -1) return new Set();
+  const open = bare.indexOf("{", start);
+  const close = bare.indexOf("}", open);
+  if (open === -1 || close === -1) return new Set();
+  return new Set(tokenNames(bare.slice(open, close)));
+}
+
+/**
+ * Read the resolved value of every token in `host`'s context.
+ *
+ * Pass a container to read the tokens as they apply INSIDE it — which is how
+ * the preview surface reads a scoped override without disturbing the page.
+ * Defaults to the document root, i.e. the app-wide values.
+ */
+export function readTokens(host: Element = document.documentElement): DesignToken[] {
+  const computed = getComputedStyle(host);
+  const dark = darkOverriddenNames();
+  return tokenNames().map((name) => ({
+    name,
+    group: groupFor(name),
+    value: computed.getPropertyValue(name).trim(),
+    overriddenInDark: dark.has(name),
+  }));
+}
+
+/**
+ * Read tokens as they would resolve in a given mode, without touching the page.
+ *
+ * Uses an offscreen probe carrying the mode attribute, so the live UI is never
+ * mutated to take a reading.
+ *
+ * KNOWN LIMITATION, and it is a property of the stylesheet rather than of this
+ * function: light is declared on `:root` while dark is declared on
+ * `[data-theme="dark"]`. An attribute selector can ADD the dark values to a
+ * subtree, but there is no `[data-theme="light"]` block to add the light ones
+ * back. So reading "light" from inside a dark page returns the dark values —
+ * the probe has nothing to match.
+ *
+ * Concretely: dark-inside-light previews work, light-inside-dark previews do
+ * not. Introducing a `[data-theme="light"]` block alongside the dark-first flip
+ * (milestone #251 step 6) is what makes this symmetric, and until then callers
+ * should treat a cross-mode read as best-effort.
+ */
+export function readTokensForMode(mode: ThemeMode): DesignToken[] {
+  const probe = document.createElement("div");
+  probe.setAttribute("data-theme", mode);
+  probe.style.display = "none";
+  document.body.appendChild(probe);
+  try {
+    return readTokens(probe);
+  } finally {
+    probe.remove();
+  }
+}
+
+/** Tokens grouped by family, preserving source order within each group. */
+export function groupTokens(tokens: DesignToken[]): Map<TokenGroup, DesignToken[]> {
+  const out = new Map<TokenGroup, DesignToken[]>();
+  for (const token of tokens) {
+    const bucket = out.get(token.group);
+    if (bucket) bucket.push(token);
+    else out.set(token.group, [token]);
+  }
+  return out;
+}
+
+/**
+ * Tokens declared in the stylesheet that nothing references with `var()`.
+ *
+ * Dead tokens are drift too: `--chat-reading-width` and
+ * `--chat-context-sidebar-width` outlived the chat subsystem that was deleted
+ * in the MCP-first pivot, and nothing has referenced them since. Takes the
+ * corpus of source files to search as an argument so the caller decides what
+ * "used" means — this module has no opinion about the project layout.
+ */
+export function unreferencedTokens(tokens: DesignToken[], sources: string[]): DesignToken[] {
+  const haystack = sources.join("\n");
+  return tokens.filter((token) => !haystack.includes(`var(${token.name}`));
+}

frontend/src/utils/designValues.ts

@@ -1,88 +0,0 @@
-/**
- * Turning a design system's RECORDED values into ones you can look at.
- *
- * Replaces `designTokens.ts` and `designDrift.ts`, which between them read the
- * running app's own stylesheet — names out of a bundled `theme.css`, values out
- * of `getComputedStyle(document.documentElement)`. That could only ever describe
- * the install serving the page, and the design surface is for the projects an
- * install TRACKS (#274). What is left here works on any system's record,
- * including one for an app this browser has never loaded.
- *
- * Nothing in this module reads the document's own tokens or mutates the page.
- */
-
-/** The base mode's key in `value_by_mode`, mirroring services/design_stylesheet. */
-export const BASE_MODE = "base";
-
-/**
- * Which declared value applies in `mode`.
- *
- * Falls back to base, which is the storage model rather than a convenience: a
- * mode block is an OVERRIDE layer, so a token with no entry for the current
- * mode is not missing — it is inheriting, exactly as the generated sheet has it.
- */
-export function valueForMode(
-  valueByMode: Record<string, string>,
-  mode: string,
-): string {
-  const own = valueByMode[mode];
-  if (own !== undefined && own !== "") return own;
-  return valueByMode[BASE_MODE] ?? "";
-}
-
-/** Every mode any token in the set declares, base first then the rest by name. */
-export function modesPresent(
-  tokens: { value_by_mode: Record<string, string> }[],
-): string[] {
-  const modes = new Set<string>();
-  for (const token of tokens) {
-    for (const [mode, value] of Object.entries(token.value_by_mode)) {
-      if (value) modes.add(mode);
-    }
-  }
-  const rest = [...modes].filter((m) => m !== BASE_MODE).sort();
-  return modes.has(BASE_MODE) ? [BASE_MODE, ...rest] : rest;
-}
-
-/**
- * Resolve declared values the way a browser would, without applying them.
- *
- * A record holds `color-mix(in srgb, var(--fs-accent) 15%, transparent)`. Shown
- * as text that is a string; shown as a swatch it needs `var()` substituted and
- * the mix evaluated. Rather than write a CSS parser, set the declarations on an
- * offscreen probe and read them back — the substitution is done by the
- * implementation that would do it for real.
- *
- * Custom properties INHERIT, and `all: initial` does not reset them — so a probe
- * sitting in this page would resolve any reference the record leaves undeclared
- * against the surrounding app's own tokens. Previewing another project's system
- * would then quietly borrow this one's palette wherever that system was
- * incomplete, and a token the record already knows is broken (it shows up under
- * `unknown_refs`) would render as though it were fine.
- *
- * So every name referenced but not declared is blanked on the probe first. It
- * resolves to nothing, which is what the record says it is.
- */
-const VAR_REFERENCE = /var\(\s*(--[A-Za-z0-9_-]+)/g;
-
-export function resolveDeclared(declared: Map<string, string>): Map<string, string> {
-  const probe = document.createElement("div");
-  probe.style.display = "none";
-  for (const value of declared.values()) {
-    for (const match of value.matchAll(VAR_REFERENCE)) {
-      if (!declared.has(match[1])) probe.style.setProperty(match[1], " ");
-    }
-  }
-  for (const [name, value] of declared) probe.style.setProperty(name, value);
-  document.body.appendChild(probe);
-  try {
-    const computed = getComputedStyle(probe);
-    const out = new Map<string, string>();
-    for (const name of declared.keys()) {
-      out.set(name, computed.getPropertyValue(name).trim());
-    }
-    return out;
-  } finally {
-    probe.remove();
-  }
-}

frontend/src/utils/palette.ts

@@ -1,10 +1,10 @@
 /** Cyclic color palette for milestone progress bars. */
 export const MILESTONE_PALETTE = [
-  'var(--fs-accent)',
-  'var(--fs-success, #22c55e)',
+  'var(--color-primary)',
+  'var(--color-success, #22c55e)',
   '#c98a00',
   '#8b5cf6',
-  'var(--fs-error, #ef4444)',
+  'var(--color-danger, #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(--fs-accent)' }" />
+              <span class="proj-dot" :style="{ background: p.color || 'var(--color-primary)' }" />
               <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(--fs-accent)' }" />
+                <span class="pstat-dot" :style="{ background: p.color || 'var(--color-primary)' }" />
                 <span class="pstat-title">{{ p.title }}</span>
                 <span class="pstat-counts">{{ p.open_count }} open · {{ p.done_count }} done</span>
               </router-link>
@@ -176,72 +176,69 @@ onMounted(async () => {
 
 <style scoped>
 .dash-root { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
-/* `.dash-head` is deliberately bare: a block header whose two children carry
-   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(--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; }
+.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; }
 
 .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(--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-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-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.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-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-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(--fs-surface-hover); border: 1px solid var(--fs-border-color); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
+.proj-panel { background: var(--color-surface); border: 1px solid var(--color-border); 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(--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; }
+.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; }
 
 .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(--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); }
+.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); }
 
-.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-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-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(--fs-border-color); color: var(--fs-text-tertiary); }
+.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); }
 .pri-high { color: #c0556b; border-color: #c0556b66; }
-.proj-more { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--fs-accent); text-decoration: none; }
+.proj-more { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-primary); text-decoration: none; }
 
-.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; }
+.rail-card { background: var(--color-surface); border: 1px solid var(--color-border); 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(--fs-text-tertiary); font-size: 0.78rem; }
+.stats-sub { color: var(--color-muted); 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(--fs-text-primary); font-size: 0.85rem; }
-.pstat-row:hover { background: var(--fs-surface-hover); }
+.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-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(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
+.pstat-counts { font-size: 0.74rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
 .quick-add { display: flex; flex-wrap: wrap; gap: 0.4rem; }
-.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); }
+.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); }
 
 .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(--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-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-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.issue-meta { font-size: 0.72rem; color: var(--fs-text-tertiary); white-space: nowrap; flex-shrink: 0; }
+.issue-meta { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
 
 @media (max-width: 760px) { .dash-cols { flex-direction: column; } }
 </style>

frontend/src/views/DesignSystemsView.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 /**
- * Design systems — the stylesheets this install RECORDS, for the projects it
- * tracks (milestone #254 step 5).
+ * Design systems — editing the stylesheet Scribe holds (milestone #254 step 5).
  *
- * It had a sibling, `/design`, which showed the system as the BROWSER had it —
- * names out of a bundled stylesheet, values out of `getComputedStyle`. That
- * could only ever describe the install serving the page, so it was a mirror
- * rather than a tool and was retired (#274). Everything here works on a system
- * whose app this browser has never loaded.
+ * Sibling of /design, which shows the system as the BROWSER has it. This page
+ * shows it as the RECORD has it, which is the half you can change.
  *
  * The layout follows the model rather than decorating it. A system with a
  * parent holds only what it changes, so this page has two lists and they are
@@ -43,10 +39,9 @@ import {
   type SnippetCheck,
   type StylesheetResult,
 } from "@/api/designSystems";
+import DesignTabs from "@/components/DesignTabs.vue";
 import { ApiError } from "@/api/client";
 import { useToastStore } from "@/stores/toast";
-import StarterRolePicker from "@/components/StarterRolePicker.vue";
-import TokenPreview from "@/components/TokenPreview.vue";
 
 const toast = useToastStore();
 
@@ -153,10 +148,6 @@ const newTitle = ref("");
 const newDescription = ref("");
 const newParentId = ref<number | null>(null);
 const creating = ref(false);
-// Starter roles (#2349). The picker fills these on mount; empty means the
-// operator unchecked everything, which is a real answer.
-const starterGroups = ref<string[]>([]);
-const tokenPrefix = ref("");
 
 async function submitCreate() {
   const title = newTitle.value.trim();
@@ -167,16 +158,11 @@ async function submitCreate() {
       title,
       description: newDescription.value.trim() || undefined,
       parent_id: newParentId.value,
-      starter_role_groups: starterGroups.value.length ? starterGroups.value : undefined,
-      token_prefix: tokenPrefix.value.trim() || undefined,
     });
     newTitle.value = "";
     newDescription.value = "";
     newParentId.value = null;
     showCreate.value = false;
-    // NOT reset: the picker owns these and re-seeds on mount. Clearing them
-    // here would race the next mount and silently create the following system
-    // with no roles at all.
     await loadSystems();
     selectedId.value = created.id;
     toast.show(`Created ${created.title}`);
@@ -493,28 +479,14 @@ watch(selectedId, () => {
   snippetCheck.value = null;
 });
 
-/**
- * A colour this row can draw HONESTLY — self-contained, no `var()` inside.
- *
- * The provenance list below shows values as the record states them, and a
- * `var()` reference states nothing on its own: rendering
- * `color-mix(in srgb, var(--accent) 15%, transparent)` as a background resolves
- * `--accent` against THIS app, so a system that isn't the one Scribe runs on
- * would be drawn in Scribe's palette. It looked right, which is why it went
- * unnoticed (#274).
- *
- * The preview above resolves values properly, on a probe carrying only that
- * system's declarations. So this list draws only what needs no resolving, and
- * leaves the rest to the surface built for it.
- */
-function isSelfContainedColour(value: string): boolean {
-  const v = value.trim();
-  return /^(#|rgba?\(|hsla?\(|color-mix\()/.test(v) && !v.includes("var(");
+function isColourish(value: string): boolean {
+  return /^(#|rgba?\(|hsla?\(|color-mix\()/.test(value.trim());
 }
 </script>
 
 <template>
   <div class="ds-view">
+    <DesignTabs />
 
     <header class="ds-header">
       <h1>Design systems</h1>
@@ -557,21 +529,17 @@ function isSelfContainedColour(value: string): boolean {
       <div class="field">
         <label class="field-label" for="first-title">Title</label>
         <input
-          id="first-title" v-model="newTitle" class="fs-input input" type="text"
+          id="first-title" v-model="newTitle" class="input" type="text"
           placeholder="Your house style" @keyup.enter="submitCreate"
         />
       </div>
       <div class="field">
         <label class="field-label" for="first-desc">Description</label>
         <input
-          id="first-desc" v-model="newDescription" class="fs-input input" type="text"
+          id="first-desc" v-model="newDescription" class="input" type="text"
           placeholder="What it covers"
         />
       </div>
-      <StarterRolePicker
-        v-model:selected="starterGroups"
-        v-model:prefix="tokenPrefix"
-      />
       <div class="row-actions">
         <button class="btn-primary" :disabled="!newTitle.trim() || creating" @click="submitCreate">
           {{ creating ? "Creating…" : "Create" }}
@@ -612,20 +580,20 @@ function isSelfContainedColour(value: string): boolean {
           <div class="field">
             <label class="field-label" for="new-title">Title</label>
             <input
-              id="new-title" v-model="newTitle" class="fs-input input" type="text"
+              id="new-title" v-model="newTitle" class="input" type="text"
               placeholder="A house style, or one app in it" @keyup.enter="submitCreate"
             />
           </div>
           <div class="field">
             <label class="field-label" for="new-desc">Description</label>
             <input
-              id="new-desc" v-model="newDescription" class="fs-input input" type="text"
+              id="new-desc" v-model="newDescription" class="input" type="text"
               placeholder="What it covers"
             />
           </div>
           <div class="field">
             <label class="field-label" for="new-parent">Inherits from</label>
-            <select id="new-parent" v-model="newParentId" class="fs-input input">
+            <select id="new-parent" v-model="newParentId" class="input">
               <option :value="null">Nothing — this is a family system</option>
               <option v-for="s in systems" :key="s.id" :value="s.id">{{ s.title }}</option>
             </select>
@@ -633,10 +601,6 @@ function isSelfContainedColour(value: string): boolean {
               A system with a parent stores only its differences from it.
             </p>
           </div>
-          <StarterRolePicker
-            v-model:selected="starterGroups"
-            v-model:prefix="tokenPrefix"
-          />
           <button class="btn-primary" :disabled="!newTitle.trim() || creating" @click="submitCreate">
             {{ creating ? "Creating…" : "Create" }}
           </button>
@@ -659,16 +623,16 @@ function isSelfContainedColour(value: string): boolean {
 
             <div class="field">
               <label class="field-label" for="edit-title">Title</label>
-              <input id="edit-title" v-model="editTitle" class="fs-input input" type="text" />
+              <input id="edit-title" v-model="editTitle" class="input" type="text" />
             </div>
             <div class="field">
               <label class="field-label" for="edit-desc">Description</label>
-              <input id="edit-desc" v-model="editDescription" class="fs-input input" type="text" />
+              <input id="edit-desc" v-model="editDescription" class="input" type="text" />
             </div>
             <div class="field">
               <label class="field-label" for="edit-guidance">Guidance</label>
               <textarea
-                id="edit-guidance" v-model="editGuidance" class="fs-input input" rows="5"
+                id="edit-guidance" v-model="editGuidance" class="input" rows="5"
                 placeholder="Aesthetic, voice and tone, what's deliberately out of scope…"
               ></textarea>
               <p class="field-hint">
@@ -678,7 +642,7 @@ function isSelfContainedColour(value: string): boolean {
             </div>
             <div class="field">
               <label class="field-label" for="edit-parent">Inherits from</label>
-              <select id="edit-parent" v-model="editParentId" class="fs-input input">
+              <select id="edit-parent" v-model="editParentId" class="input">
                 <option :value="null">Nothing — this is a family system</option>
                 <option v-for="s in parentOptions" :key="s.id" :value="s.id">{{ s.title }}</option>
               </select>
@@ -786,7 +750,7 @@ function isSelfContainedColour(value: string): boolean {
                   <ul class="dupe-list">
                     <li v-for="[value, names] in duplicateEntries" :key="value">
                       <span
-                        v-if="isSelfContainedColour(value)" class="swatch"
+                        v-if="isColourish(value)" class="swatch"
                         :style="{ background: value }" aria-hidden="true"
                       />
                       <code>{{ value }}</code> — {{ names.join(", ") }}
@@ -887,19 +851,19 @@ function isSelfContainedColour(value: string): boolean {
               <div class="field">
                 <label class="field-label" for="token-name">Name</label>
                 <input
-                  id="token-name" v-model="tokenName" class="fs-input input mono" type="text"
+                  id="token-name" v-model="tokenName" class="input mono" type="text"
                   placeholder="--surface-page"
                 />
               </div>
               <div class="field-row">
                 <div class="field">
                   <label class="field-label" for="token-group">Group</label>
-                  <input id="token-group" v-model="tokenGroup" class="fs-input input" type="text" placeholder="surface" />
+                  <input id="token-group" v-model="tokenGroup" class="input" type="text" placeholder="surface" />
                 </div>
                 <div class="field">
                   <label class="field-label" for="token-purpose">Purpose</label>
                   <input
-                    id="token-purpose" v-model="tokenPurpose" class="fs-input input" type="text"
+                    id="token-purpose" v-model="tokenPurpose" class="input" type="text"
                     placeholder="page background, deepest surface"
                   />
                 </div>
@@ -908,7 +872,7 @@ function isSelfContainedColour(value: string): boolean {
               <div class="field">
                 <label class="field-label" for="token-rationale">Why this value</label>
                 <input
-                  id="token-rationale" v-model="tokenRationale" class="fs-input input" type="text"
+                  id="token-rationale" v-model="tokenRationale" class="input" type="text"
                   placeholder="Matches the primary action colour, deliberately"
                 />
                 <p class="field-hint">
@@ -920,7 +884,7 @@ function isSelfContainedColour(value: string): boolean {
               <div class="field">
                 <label class="field-label" for="token-supersedes">Use instead of</label>
                 <input
-                  id="token-supersedes" v-model="tokenSupersedes" class="fs-input input mono" type="text"
+                  id="token-supersedes" v-model="tokenSupersedes" class="input mono" type="text"
                   placeholder="#fff, #ffffff"
                 />
                 <p class="field-hint">
@@ -941,10 +905,10 @@ function isSelfContainedColour(value: string): boolean {
                   </template>
                 </p>
                 <div v-for="(row, i) in tokenModes" :key="i" class="mode-row">
-                  <input v-model="row.mode" class="fs-input input mono mode-key" type="text" placeholder="base" />
-                  <input v-model="row.value" class="fs-input input mono" type="text" placeholder="#14171a" />
+                  <input v-model="row.mode" class="input mono mode-key" type="text" placeholder="base" />
+                  <input v-model="row.value" class="input mono" type="text" placeholder="#14171a" />
                   <span
-                    v-if="isSelfContainedColour(row.value)" class="swatch"
+                    v-if="isColourish(row.value)" class="swatch"
                     :style="{ background: row.value }" aria-hidden="true"
                   />
                   <button
@@ -982,7 +946,7 @@ function isSelfContainedColour(value: string): boolean {
                 <span class="token-values">
                   <span v-for="(value, mode) in token.value_by_mode" :key="mode" class="mode-chip">
                     <span
-                      v-if="isSelfContainedColour(value)" class="swatch"
+                      v-if="isColourish(value)" class="swatch"
                       :style="{ background: value }" aria-hidden="true"
                     />
                     <span class="mode-name">{{ mode }}</span>
@@ -1005,18 +969,6 @@ function isSelfContainedColour(value: string): boolean {
             </ul>
           </section>
 
-          <!-- What it looks like. Drawn from the record on an isolated probe,
-               so this is THIS system's palette even when the app around it is
-               running a different one. -->
-          <section v-if="resolved.length" class="ds-section">
-            <h2>Preview</h2>
-            <p class="section-note">
-              {{ selected.title }} as it would render — resolved from the record,
-              not from the stylesheet this app happens to be running.
-            </p>
-            <TokenPreview :tokens="resolved" />
-          </section>
-
           <!-- Effective set -->
           <section class="ds-section">
             <h2>Effective tokens</h2>
@@ -1050,7 +1002,7 @@ function isSelfContainedColour(value: string): boolean {
                     <div v-if="hasUniformOrigin(token)" class="resolved-modes">
                       <span v-for="origin in modeOrigins(token)" :key="origin.mode" class="mode-chip">
                         <span
-                          v-if="isSelfContainedColour(origin.value)" class="swatch"
+                          v-if="isColourish(origin.value)" class="swatch"
                           :style="{ background: origin.value }" aria-hidden="true"
                         />
                         <span class="mode-name">{{ origin.mode }}</span>
@@ -1071,7 +1023,7 @@ function isSelfContainedColour(value: string): boolean {
                       <div v-for="origin in modeOrigins(token)" :key="origin.mode" class="mode-line">
                         <span class="mode-chip">
                           <span
-                            v-if="isSelfContainedColour(origin.value)" class="swatch"
+                            v-if="isColourish(origin.value)" class="swatch"
                             :style="{ background: origin.value }" aria-hidden="true"
                           />
                           <span class="mode-name">{{ origin.mode }}</span>
@@ -1102,12 +1054,6 @@ function isSelfContainedColour(value: string): boolean {
   padding: 1.5rem 1rem 4rem;
 }
 
-/* Restored with the same sweep that took `.milestone-header` — only the `h1`
-   descendant rule survived, so the header had no spacing of its own. */
-.ds-header {
-  margin-bottom: 2rem;
-}
-
 .ds-header h1 {
   margin: 0 0 0.5rem;
   font-size: 1.75rem;
@@ -1115,7 +1061,7 @@ function isSelfContainedColour(value: string): boolean {
 }
 
 .lede {
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   max-width: 70ch;
   line-height: 1.6;
   margin: 0 0 1.5rem;
@@ -1137,9 +1083,9 @@ function isSelfContainedColour(value: string): boolean {
 /* Sidebar ---------------------------------------------------------------- */
 
 .ds-sidebar {
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
   padding: 1rem;
 }
 
@@ -1156,7 +1102,7 @@ function isSelfContainedColour(value: string): boolean {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .system-list {
@@ -1173,22 +1119,22 @@ function isSelfContainedColour(value: string): boolean {
   text-align: left;
   background: none;
   border: 1px solid transparent;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--radius-sm);
   padding: 0.5rem 0.6rem;
   cursor: pointer;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
 }
 
 .system-btn:hover {
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-secondary);
 }
 
 .system-btn.active {
-  border-color: var(--fs-accent);
-  background: var(--fs-surface-raised);
+  border-color: var(--color-primary);
+  background: var(--color-bg-secondary);
 }
 
 
@@ -1198,7 +1144,7 @@ function isSelfContainedColour(value: string): boolean {
 
 .system-kind {
   font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 /* Sections --------------------------------------------------------------- */
@@ -1211,9 +1157,9 @@ function isSelfContainedColour(value: string): boolean {
 }
 
 .ds-section {
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
   padding: 1.25rem;
 }
 
@@ -1232,7 +1178,7 @@ function isSelfContainedColour(value: string): boolean {
 
 .section-note,
 .muted {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   font-size: 0.85rem;
   margin: 0 0 1rem;
 }
@@ -1247,17 +1193,17 @@ function isSelfContainedColour(value: string): boolean {
 }
 
 .chain-link {
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .chain-link.self {
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   font-weight: 500;
 }
 
 .chain-arrow,
 .chain-note {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 /* Fields ----------------------------------------------------------------- */
@@ -1282,18 +1228,25 @@ function isSelfContainedColour(value: string): boolean {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   margin-bottom: 0.3rem;
 }
 
 .field-hint {
-  line-height: 1.5;   /* remainder over the shared recipe */
+  margin: 0.3rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
 }
 
-/* remainder over .fs-input (components.css, canon #2336; m302) */
 .input {
   width: 100%;
-  box-sizing: border-box;
+  padding: 0.45rem 0.6rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font: inherit;
 }
 
 
@@ -1321,15 +1274,15 @@ textarea.input {
 
 .confirm-copy {
   font-size: 0.85rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   max-width: 40ch;
 }
 
 /* Tokens ----------------------------------------------------------------- */
 
 .token-form {
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   padding: 1rem;
   margin-bottom: 1rem;
 }
@@ -1364,7 +1317,7 @@ textarea.input {
   align-items: center;
   gap: 0.6rem;
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .token-name {
@@ -1379,7 +1332,7 @@ textarea.input {
 }
 
 .token-meta {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   font-size: 0.8rem;
   flex: 1;
   min-width: 0;
@@ -1398,18 +1351,18 @@ textarea.input {
 
 .finding-list li {
   padding: 0.6rem 0;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .finding-title {
   font-weight: 500;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
 }
 
 .finding-line {
   margin: 0.3rem 0 0;
   font-size: 0.85rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -1421,24 +1374,24 @@ textarea.input {
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 0.1rem 0.45rem;
-  border-radius: var(--fs-radius-sm);
+  border-radius: var(--radius-sm);
   flex: none;
 }
 
 .spec-status.violated {
-  background: var(--fs-priority-high-bg);
-  color: var(--fs-priority-high);
+  background: var(--color-priority-high-bg);
+  color: var(--color-priority-high);
 }
 
 .spec-status.missing {
-  background: var(--fs-priority-medium-bg);
-  color: var(--fs-priority-medium);
+  background: var(--color-priority-medium-bg);
+  color: var(--color-priority-medium);
 }
 
 .sheet {
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   padding: 0.75rem 1rem;
   margin-top: 0.75rem;
   overflow-x: auto;
@@ -1465,7 +1418,7 @@ textarea.input {
 
 .supersedes {
   font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   font-style: italic;
 }
 
@@ -1477,7 +1430,7 @@ textarea.input {
 }
 
 .mode-name {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   font-size: 0.7rem;
   letter-spacing: 0.06em;
@@ -1488,7 +1441,7 @@ textarea.input {
   width: 0.9rem;
   height: 0.9rem;
   border-radius: 3px;
-  border: 1px solid var(--fs-border-color);
+  border: 1px solid var(--color-border);
   flex: none;
 }
 
@@ -1503,12 +1456,12 @@ textarea.input {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
 }
 
 .resolved-list li {
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .resolved-head {
@@ -1544,33 +1497,33 @@ textarea.input {
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 0.1rem 0.45rem;
-  border-radius: var(--fs-radius-sm);
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-tertiary);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-muted);
 }
 
 .origin-badge.own {
-  background: var(--fs-accent-soft);
-  color: var(--fs-accent);
+  background: var(--color-primary-tint);
+  color: var(--color-primary);
 }
 
 /* Notices ---------------------------------------------------------------- */
 
 .notice {
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-lg);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
   padding: 1.25rem;
   max-width: 60ch;
 }
 
 .notice-warn {
-  border-left: 3px solid var(--fs-warning);
+  border-left: 3px solid var(--color-warning);
 }
 
 .notice p {
   margin: 0.5rem 0 1rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   line-height: 1.6;
 }
 </style>

frontend/src/views/DesignView.vue

@@ -0,0 +1,545 @@
+<script setup lang="ts">
+/**
+ * Design explorer — the gallery (milestone #251 step 3).
+ *
+ * Renders the design system against the tokens that are actually live, read at
+ * runtime rather than parsed from source, so what you see here is what the app
+ * is using right now.
+ *
+ * HONESTY RULE, and the reason parts of this page say "not implemented":
+ * a gallery of hand-written look-alikes drifts from the app within a month and
+ * then lies — which is the same failure this whole surface exists to catch. So
+ * every specimen below is either a REAL component imported from the app, or a
+ * real token read from the browser, or it is explicitly marked as missing.
+ *
+ * Buttons WERE the case where that bit: `.btn-primary` was defined five times
+ * in five `<style scoped>` blocks, all five drifted, and this page reported it
+ * as a gap because drawing a look-alike would have made it a sixth copy.
+ * `assets/components.css` is now the single definition (#2273), so the
+ * specimens below are the app's real classes — they cannot drift from the app
+ * without drifting the app itself.
+ */
+import { computed, onMounted, ref } from "vue";
+
+import { fetchDesignExpectations } from "@/api/design";
+import DesignTabs from "@/components/DesignTabs.vue";
+import PriorityBadge from "@/components/PriorityBadge.vue";
+import StatusBadge from "@/components/StatusBadge.vue";
+import TagPill from "@/components/TagPill.vue";
+import {
+  compareToTokens,
+  rankFindings,
+  summarise,
+  type Expectation,
+  type Finding,
+} from "@/utils/designDrift";
+import { groupTokens, readTokens, type DesignToken, type TokenGroup } from "@/utils/designTokens";
+
+const tokens = ref<DesignToken[]>([]);
+const expectations = ref<Expectation[]>([]);
+const designRulebookId = ref<number | null>(null);
+const driftLoaded = ref(false);
+const showCleanRows = ref(false);
+
+/**
+ * Read on mount, not at module scope: the values depend on the live cascade,
+ * which needs the app's stylesheets applied and the theme attribute set.
+ */
+onMounted(async () => {
+  tokens.value = readTokens();
+  try {
+    const response = await fetchDesignExpectations();
+    designRulebookId.value = response.rulebook_id;
+    expectations.value = response.expectations;
+  } catch {
+    // The gallery is useful without the panel, so a failed fetch degrades to
+    // "no drift data" rather than taking the page down with it.
+    designRulebookId.value = null;
+  } finally {
+    driftLoaded.value = true;
+  }
+});
+
+const findings = computed<Finding[]>(() =>
+  rankFindings(compareToTokens(expectations.value, tokens.value)),
+);
+const driftSummary = computed(() => summarise(findings.value));
+const visibleFindings = computed(() =>
+  showCleanRows.value ? findings.value : findings.value.filter((f) => f.status !== "ok"),
+);
+
+const grouped = computed(() => groupTokens(tokens.value));
+
+const GROUP_ORDER: TokenGroup[] = ["color", "radius", "glow", "gradient", "focus", "layout", "other"];
+const orderedGroups = computed(() =>
+  GROUP_ORDER.filter((g) => grouped.value.has(g)).map((g) => ({ group: g, tokens: grouped.value.get(g)! })),
+);
+
+/** A token whose value reads as a colour is worth showing as a swatch. */
+function isColourish(value: string): boolean {
+  return /^(#|rgba?\(|hsla?\(|color-mix\()/.test(value.trim());
+}
+
+/** Rule 65's four variants — none of which exists as a shared artifact (#2273). */
+const RULEBOOK_BUTTONS = [
+  { name: "Primary", spec: "Moss #4A5D3F bg, Parchment text, no border" },
+  { name: "Secondary", spec: "Bronze #8B7355 bg, Parchment text, no border" },
+  { name: "Ghost", spec: "transparent, Parchment text, 0.5px Pewter border" },
+  { name: "Destructive", spec: "Oxblood #6B2118 bg, Parchment text, pair with icon" },
+];
+
+const TYPE_SPECIMENS = [
+  { token: "Display", spec: "40 / 500 / Fraunces" },
+  { token: "H1", spec: "32 / 500 / Fraunces" },
+  { token: "H2", spec: "24 / 500 / Fraunces" },
+  { token: "H3", spec: "18 / 500 / Inter" },
+  { token: "Body", spec: "15 / 400 / Inter" },
+  { token: "Body small", spec: "13 / 400 / Inter" },
+  { token: "Label", spec: "12 / 500 / Inter" },
+  { token: "Code", spec: "13 / 400 / JetBrains Mono" },
+  { token: "Tiny", spec: "11 / 500 / Inter, uppercase +0.08em" },
+];
+</script>
+
+<template>
+  <div class="design-view">
+    <DesignTabs />
+
+    <header class="design-header">
+      <h1>Live tokens</h1>
+      <p class="lede">
+        The system as it actually is. Token values are read from the browser at
+        runtime, so this page reflects the live cascade rather than what the
+        stylesheet says. Components shown are the real ones — where a piece of
+        the system has no shared implementation, it is marked missing rather
+        than mocked up.
+      </p>
+    </header>
+
+    <!-- Drift: what the rulebook claims vs what the tokens do. -->
+    <section class="design-section">
+      <h2>Rulebook drift</h2>
+
+      <p v-if="!driftLoaded" class="muted">Checking against the design rulebook…</p>
+
+      <div v-else-if="designRulebookId === null" class="gap-notice">
+        <strong>No design rulebook designated.</strong>
+        <p>
+          This install hasn't said which rulebook describes its design system, so
+          there is nothing to check the tokens against. Designate one in
+          <router-link to="/settings">Settings</router-link> and this panel will
+          compare every colour and token the rulebook names against what the
+          stylesheet actually resolves to.
+        </p>
+      </div>
+
+      <template v-else>
+        <p class="section-note">
+          <strong>{{ driftSummary.violated }}</strong> violated ·
+          <strong>{{ driftSummary.missing }}</strong> missing ·
+          {{ driftSummary.ok }} matching, from {{ driftSummary.total }} checkable
+          claims in rulebook #{{ designRulebookId }}.
+        </p>
+
+        <div class="gap-notice">
+          <strong>This compares the rulebook against the TOKENS only.</strong>
+          <p>
+            A value hardcoded in a component — where a token should have been
+            referenced — is invisible here, because the drift isn't in the tokens
+            at all. Reading it would mean bundling every component's source into
+            the app. That check belongs in CI and is tracked separately, so treat
+            a clean panel as "the tokens agree", not "the app agrees".
+          </p>
+        </div>
+
+        <p v-if="!findings.length" class="muted">
+          The rulebook names nothing this panel can check. Rules that state values
+          — colours, token names — produce claims; rules that state judgement
+          don't, by design.
+        </p>
+
+        <ul v-else class="spec-list">
+          <li v-for="finding in visibleFindings" :key="`${finding.expectation.kind}:${finding.expectation.value}`">
+            <span class="spec-name">
+              <span
+                v-if="finding.expectation.kind !== 'token'"
+                class="swatch"
+                :style="{ background: finding.expectation.value }"
+                aria-hidden="true"
+              />
+              <code>{{ finding.expectation.value }}</code>
+            </span>
+            <span class="spec-detail">
+              rule #{{ finding.expectation.rule_id }} — {{ finding.expectation.rule_title }}
+              <span v-if="finding.matches.length" class="matches">
+                · {{ finding.matches.join(", ") }}
+              </span>
+            </span>
+            <span class="spec-status" :class="finding.status">
+              {{ finding.status === "violated" ? "forbidden, but present"
+                 : finding.status === "missing" ? "not in the stylesheet" : "ok" }}
+            </span>
+          </li>
+        </ul>
+
+        <button
+          v-if="findings.length && driftSummary.ok"
+          class="reveal-toggle"
+          @click="showCleanRows = !showCleanRows"
+        >
+          {{ showCleanRows ? "Hide" : "Show" }} the {{ driftSummary.ok }} matching claims
+        </button>
+      </template>
+    </section>
+
+    <!-- Real components: these are imported, not recreated. -->
+    <section class="design-section">
+      <h2>Components</h2>
+      <p class="section-note">Imported from the app. What you see is what ships.</p>
+
+      <div class="specimen">
+        <span class="specimen-label">Status badge</span>
+        <div class="specimen-row">
+          <StatusBadge status="todo" />
+          <StatusBadge status="in_progress" />
+          <StatusBadge status="done" />
+          <StatusBadge status="cancelled" />
+        </div>
+      </div>
+
+      <div class="specimen">
+        <span class="specimen-label">Priority badge</span>
+        <div class="specimen-row">
+          <PriorityBadge priority="low" />
+          <PriorityBadge priority="medium" />
+          <PriorityBadge priority="high" />
+          <span class="muted">(<code>none</code> renders nothing, by design)</span>
+        </div>
+      </div>
+
+      <div class="specimen">
+        <span class="specimen-label">Tag pill</span>
+        <div class="specimen-row">
+          <TagPill tag="design-system" />
+          <TagPill tag="dismissible" dismissible />
+        </div>
+      </div>
+    </section>
+
+    <!-- No longer a gap: these are the app's real classes, from the shared
+         sheet. Nothing here is a look-alike — change components.css and these
+         specimens change with it, which is the only way this page stays true. -->
+    <section class="design-section">
+      <h2>Buttons</h2>
+      <div class="button-specimens">
+        <button class="btn-primary">Save</button>
+        <button class="btn-secondary">Detect</button>
+        <button class="btn-ghost">Cancel</button>
+        <button class="btn-danger">Delete</button>
+        <button class="btn-primary" disabled>Disabled</button>
+      </div>
+      <p class="spec-caption">
+        Three sizes, because the app has three kinds of button: a page action, a
+        row action, and an affordance that sits inside a card without disturbing
+        its rhythm.
+      </p>
+      <div class="button-specimens">
+        <button class="btn-primary">Default — page action</button>
+        <button class="btn-primary btn-compact">Compact — row action</button>
+        <button class="btn-primary btn-inline">Inline</button>
+      </div>
+      <ul class="spec-list">
+        <li v-for="b in RULEBOOK_BUTTONS" :key="b.name">
+          <span class="spec-name">{{ b.name }}</span>
+          <span class="spec-detail">{{ b.spec }}</span>
+          <span class="spec-status ok">shared</span>
+        </li>
+      </ul>
+    </section>
+
+    <!-- Typography: the families load, the scale does not exist as tokens. -->
+    <section class="design-section">
+      <h2>Type scale</h2>
+      <div class="gap-notice">
+        <strong>Families load; the scale has no tokens.</strong>
+        <p>
+          Fraunces, Inter and JetBrains Mono are imported (rule 59), but rule 60's
+          scale is not expressed as custom properties, so sizes and weights are
+          set ad hoc per component. Listed here as specification, not as a live
+          specimen — there is nothing to read.
+        </p>
+      </div>
+      <ul class="spec-list">
+        <li v-for="t in TYPE_SPECIMENS" :key="t.token">
+          <span class="spec-name">{{ t.token }}</span>
+          <span class="spec-detail">{{ t.spec }}</span>
+          <span class="spec-status missing">no token</span>
+        </li>
+      </ul>
+    </section>
+
+    <!-- Tokens: entirely real, read live. -->
+    <section v-for="{ group, tokens: groupTokenList } in orderedGroups" :key="group" class="design-section">
+      <h2 class="token-group-heading">{{ group }} <span class="count">{{ groupTokenList.length }}</span></h2>
+      <ul class="token-list">
+        <li v-for="token in groupTokenList" :key="token.name" class="token-row">
+          <span
+            v-if="isColourish(token.value)"
+            class="swatch"
+            :style="{ background: token.value }"
+            aria-hidden="true"
+          />
+          <span v-else class="swatch swatch-none" aria-hidden="true" />
+          <code class="token-name">{{ token.name }}</code>
+          <code class="token-value">{{ token.value || "—" }}</code>
+          <span v-if="token.overriddenInDark" class="token-flag" title="Re-declared in the dark block">
+            mode-aware
+          </span>
+        </li>
+      </ul>
+    </section>
+
+    <p v-if="!tokens.length" class="muted">Reading tokens…</p>
+  </div>
+</template>
+
+<style scoped>
+.design-view {
+  max-width: var(--page-max-width);
+  margin: 0 auto;
+  padding: 1.5rem var(--page-padding-x) 4rem;
+}
+
+.design-header {
+  margin-bottom: 2rem;
+}
+
+.lede {
+  color: var(--color-text-secondary);
+  max-width: 60ch;
+  line-height: 1.7;
+}
+
+.design-section {
+  margin-bottom: 2.5rem;
+}
+
+.design-section h2 {
+  margin-bottom: 0.25rem;
+}
+
+.token-group-heading {
+  text-transform: capitalize;
+}
+
+.count {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  font-weight: 400;
+}
+
+.section-note,
+.muted {
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  margin-bottom: 1rem;
+}
+
+/* Specimens -------------------------------------------------------------- */
+
+.specimen {
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.specimen-label {
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.specimen-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+/* Gaps ------------------------------------------------------------------- */
+
+.spec-caption {
+  margin: 0 0 0.75rem;
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  max-width: 60ch;
+}
+
+/* Layout only. The buttons inside style themselves from the shared sheet —
+   adding any appearance rule here would recreate the copy this section
+   just stopped being. */
+.button-specimens {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--fs-space-3);
+  margin-bottom: 1rem;
+}
+
+.gap-notice {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-left: 3px solid var(--color-warning);
+  border-radius: var(--radius-sm);
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+}
+
+.gap-notice p {
+  margin: 0.5rem 0 0;
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  max-width: 70ch;
+}
+
+.spec-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.spec-list li {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid var(--color-border);
+  flex-wrap: wrap;
+}
+
+.spec-name {
+  min-width: 8rem;
+  font-weight: 500;
+}
+
+.spec-detail {
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  flex: 1;
+}
+
+.spec-status {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0.1rem 0.45rem;
+  border-radius: var(--radius-sm);
+}
+
+.spec-status.missing {
+  background: var(--color-priority-medium-bg);
+  color: var(--color-priority-medium);
+}
+
+.spec-status.violated {
+  background: var(--color-priority-high-bg);
+  color: var(--color-priority-high);
+}
+
+.spec-status.ok {
+  background: var(--color-status-done-bg);
+  color: var(--color-status-done);
+}
+
+.spec-name .swatch {
+  vertical-align: middle;
+  margin-right: 0.4rem;
+}
+
+.matches {
+  color: var(--color-text-muted);
+}
+
+.reveal-toggle {
+  margin-top: 0.75rem;
+  padding: 0.35rem 0.75rem;
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.8rem;
+}
+
+.reveal-toggle:hover {
+  border-color: var(--color-text-muted);
+}
+
+/* Tokens ----------------------------------------------------------------- */
+
+.token-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.token-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.3rem 0;
+  border-bottom: 1px solid var(--color-border);
+  flex-wrap: wrap;
+}
+
+.swatch {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.swatch-none {
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 3px,
+    var(--color-border) 3px,
+    var(--color-border) 4px
+  );
+}
+
+.token-name {
+  min-width: 16rem;
+  font-size: 0.8rem;
+}
+
+.token-value {
+  color: var(--color-text-secondary);
+  font-size: 0.8rem;
+  flex: 1;
+  word-break: break-all;
+}
+
+.token-flag {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 0.05rem 0.35rem;
+}
+
+@media (max-width: 640px) {
+  .token-name {
+    min-width: 0;
+  }
+}
+</style>

frontend/src/views/ForgotPasswordView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { apiPost, apiErrorMessage } from "@/api/client";
+import { apiPost } from "@/api/client";
 import AppLogo from "@/components/AppLogo.vue";
 
 const email = ref("");
@@ -15,7 +15,12 @@ async function handleSubmit() {
     await apiPost("/api/auth/forgot-password", { email: email.value });
     submitted.value = true;
   } catch (e: unknown) {
-    error.value = apiErrorMessage(e, "Something went wrong");
+    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";
+    }
   } finally {
     submitting.value = false;
   }
@@ -50,7 +55,7 @@ async function handleSubmit() {
         </form>
       </template>
 
-      <div v-else class="auth-note">
+      <div v-else class="success-msg">
         <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>
@@ -62,4 +67,83 @@ async function handleSubmit() {
   </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;
+}
+.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>

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

frontend/src/views/KnowledgeView.vue

@@ -46,50 +46,6 @@ const sortMode = ref<"modified" | "created" | "alpha" | "type">("modified");
 const searchQuery = ref("");
 let searchDebounce: ReturnType<typeof setTimeout> | null = null;
 
-// ─── Near-duplicate report ────────────────────────────────────────────────────
-// On demand, never automatic — a corpus-wide pairwise scan, and most visits to
-// this page aren't a tidy-up (same reasoning as SnippetListView's report).
-
-interface DupMember {
-  id: number; title: string;
-  created_at?: string | null; updated_at?: string | null;
-  task_kind?: string | null;
-}
-interface DupGroup {
-  note_ids: number[];
-  members: DupMember[];
-  top_score: number;
-  existing_supersessions?: { superseder_id: number; superseded_id: number }[];
-}
-
-const dupGroups = ref<DupGroup[]>([]);
-const dupSuggestion = ref("");
-const dupLoading = ref(false);
-const dupChecked = ref(false);
-// The report follows the type filter: viewing tasks checks tasks. Anything
-// else (all / plan / process) checks notes — the kind with the most to find.
-const dupKind = computed(() => (activeType.value === "task" ? "task" : "note"));
-
-async function loadDuplicates() {
-  dupLoading.value = true;
-  try {
-    const data = await apiGet<{ groups: DupGroup[]; suggestion: string }>(
-      `/api/notes/duplicates?kind=${dupKind.value}`
-    );
-    dupGroups.value = data.groups;
-    dupSuggestion.value = data.suggestion;
-    dupChecked.value = true;
-  } catch {
-    dupChecked.value = false;
-  } finally {
-    dupLoading.value = false;
-  }
-}
-
-// A stale report is worse than none: switching the type filter changes which
-// kind the button checks, so the old kind's groups must not linger under it.
-watch(dupKind, () => { dupChecked.value = false; dupGroups.value = []; });
-
 // ─── Type counts ──────────────────────────────────────────────────────────────
 
 interface KnowledgeCounts { note: number; task: number; plan: number; process: number; total: number }
@@ -429,51 +385,6 @@ onUnmounted(() => {
             <Share2 :size="16" />
             Graph
           </button>
-          <button
-            class="btn-ghost btn-compact"
-            :disabled="dupLoading"
-            title="Find notes or tasks already recorded that closely resemble each other — the report proposes, it never changes anything"
-            @click="loadDuplicates"
-          >
-            {{ dupLoading ? "Checking…" : "Find duplicates" }}
-          </button>
-        </div>
-
-        <!-- Near-duplicate report. A proposal surface only: unlike snippets
-             (which merge losslessly), notes are never merged — the right fix is
-             supersession, extraction into a reference note, or leaving parallel
-             records alone, and choosing needs the records READ. That reading is
-             the assistant's job; this panel shows the human what exists. -->
-        <div v-if="dupChecked && !dupLoading" class="dup-panel">
-          <p v-if="!dupGroups.length" class="dup-empty">
-            No near-duplicate {{ dupKind }}s found — nothing recorded resembles
-            anything else closely enough to flag.
-          </p>
-          <template v-else>
-            <p class="dup-head">
-              {{ dupGroups.length }} possible duplicate
-              {{ dupGroups.length > 1 ? "sets" : "set" }} among your
-              {{ dupKind }}s. {{ dupSuggestion }}
-            </p>
-            <div v-for="(g, i) in dupGroups" :key="i" class="dup-group">
-              <div class="dup-members">
-                <router-link
-                  v-for="m in g.members"
-                  :key="m.id"
-                  class="dup-member"
-                  :to="dupKind === 'task' ? `/tasks/${m.id}` : `/notes/${m.id}`"
-                >
-                  #{{ m.id }} {{ m.title }}
-                </router-link>
-              </div>
-              <span class="dup-score">{{ Math.round(g.top_score * 100) }}% alike</span>
-              <span
-                v-if="g.existing_supersessions?.length"
-                class="dup-claimed"
-                title="A supersession has already been declared inside this set — it is not an open question"
-              >already ruled on</span>
-            </div>
-          </template>
         </div>
 
         <!-- Loading / empty -->
@@ -574,13 +485,12 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style src="@/assets/dup-report.css" />
 <style scoped>
 /* ── Root layout ─────────────────────────────────────────── */
 .knowledge-root {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--fs-layout-header));
+  height: calc(100vh - var(--header-height, 56px));
   overflow: hidden;
 }
 
@@ -591,8 +501,8 @@ onUnmounted(() => {
   justify-content: space-between;
   gap: 12px;
   padding: 8px 20px;
-  background: var(--fs-surface-raised);
-  border-bottom: 1px solid var(--fs-border-color);
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
   flex-shrink: 0;
   font-size: 0.82rem;
   flex-wrap: wrap;
@@ -607,6 +517,14 @@ onUnmounted(() => {
   text-decoration: none;
   font-size: 0.78rem;
 }
+.today-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  opacity: 0.85;
+  transition: opacity 0.15s;
+}
+.today-link:hover { opacity: 1; }
 
 /* ── Main layout ─────────────────────────────────────────── */
 .knowledge-layout {
@@ -618,19 +536,19 @@ onUnmounted(() => {
 
 /* ── Filter panel ────────────────────────────────────────── */
 .filter-panel {
-  width: var(--fs-layout-sidebar);
+  width: var(--sidebar-width);
   flex-shrink: 0;
   padding: 16px 12px;
-  border-right: 1px solid var(--fs-border-color);
+  border-right: 1px solid var(--color-border, rgba(255,255,255,0.06));
   overflow-y: auto;
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-secondary);
 }
 .filter-section { margin-bottom: 20px; }
 .filter-section + .filter-section::before {
   content: '· · ·';
   display: block;
   text-align: center;
-  color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
+  color: rgba(91, 74, 138, 0.3);
   font-size: 0.9rem;
   letter-spacing: 0.4em;
   padding: 4px 0 12px;
@@ -638,7 +556,7 @@ onUnmounted(() => {
 .filter-label {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 0.95rem;
-  color: var(--fs-accent);
+  color: var(--color-primary);
   margin-bottom: 8px;
   padding: 0 4px;
 }
@@ -655,14 +573,14 @@ onUnmounted(() => {
   padding: 8px 12px;
   border-radius: 10px;
   border: none;
-  background: var(--fs-gradient-cta);
+  background: var(--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(--fs-glow-cta-hover); }
+.btn-new-note:hover { box-shadow: var(--glow-cta-hover); }
 .btn-new-icon {
   font-size: 1.1rem;
   line-height: 1;
@@ -673,8 +591,8 @@ onUnmounted(() => {
   top: calc(100% + 6px);
   left: 0;
   right: 0;
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
   border-radius: 10px;
   overflow: hidden;
   z-index: 50;
@@ -689,15 +607,15 @@ onUnmounted(() => {
   padding: 9px 14px;
   background: none;
   border: none;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   cursor: pointer;
   font-size: 0.84rem;
   text-align: left;
   transition: background 0.12s, color 0.12s;
 }
 .new-note-menu button:hover {
-  background: var(--fs-accent-soft);
-  color: var(--fs-accent);
+  background: var(--color-primary-tint);
+  color: var(--color-primary);
 }
 .new-note-menu button svg {
   flex-shrink: 0;
@@ -705,7 +623,7 @@ onUnmounted(() => {
 }
 .new-note-menu button:hover svg {
   opacity: 1;
-  stroke: var(--fs-accent);
+  stroke: var(--color-primary);
 }
 
 .filter-btn {
@@ -718,7 +636,7 @@ onUnmounted(() => {
   border-radius: 7px;
   border: none;
   background: transparent;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   cursor: pointer;
   font-size: 0.85rem;
   margin-bottom: 2px;
@@ -727,8 +645,8 @@ onUnmounted(() => {
 }
 .filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
 .filter-btn.active {
-  background: var(--fs-accent-wash);
-  color: var(--fs-accent);
+  background: var(--color-primary-wash);
+  color: var(--color-primary);
   opacity: 1;
 }
 .filter-btn-label { flex: 1; }
@@ -737,15 +655,15 @@ onUnmounted(() => {
   padding: 1px 6px;
   border-radius: 10px;
   background: rgba(255,255,255,0.07);
-  color: var(--fs-text-tertiary);
+  color: var(--color-muted);
   font-weight: 500;
   min-width: 20px;
   text-align: center;
   flex-shrink: 0;
 }
 .filter-btn.active .filter-count {
-  background: color-mix(in srgb, var(--fs-accent) 20%, transparent);
-  color: var(--fs-accent);
+  background: rgba(91, 74, 138, 0.2);
+  color: var(--color-primary);
 }
 .filter-tag { font-size: 0.78rem; }
 
@@ -765,7 +683,7 @@ onUnmounted(() => {
   gap: 10px;
   padding: 12px 20px;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
 }
 .search-wrap {
   flex: 1;
@@ -776,27 +694,27 @@ onUnmounted(() => {
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--fs-text-tertiary);
+  color: var(--color-muted);
   pointer-events: none;
 }
 .search-input {
   width: 100%;
   padding: 7px 12px 7px 32px;
   border-radius: 8px;
-  border: 1px solid var(--fs-border-color);
-  background: var(--fs-surface-hover);
-  color: var(--fs-text-primary);
+  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
+  background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
+  color: var(--color-text);
   font-size: 0.88rem;
   outline: none;
   transition: border-color 0.15s;
 }
-.search-input:focus { border-color: var(--fs-accent); }
+.search-input:focus { border-color: var(--color-primary); }
 .sort-select {
   padding: 7px 10px;
   border-radius: 8px;
-  border: 1px solid var(--fs-border-color);
-  background: var(--fs-surface-hover);
-  color: var(--fs-text-primary);
+  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
+  background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
+  color: var(--color-text);
   font-size: 0.85rem;
   cursor: pointer;
   outline: none;
@@ -817,9 +735,9 @@ onUnmounted(() => {
 
 .k-card {
   position: relative;
-  background: var(--fs-surface-hover);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-xl);
+  background: var(--color-surface, rgba(255,255,255,0.03));
+  border: 1px solid var(--color-border, rgba(255,255,255,0.07));
+  border-radius: var(--radius-lg, 14px);
   padding: 14px;
   cursor: pointer;
   transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
@@ -831,12 +749,12 @@ onUnmounted(() => {
 }
 .k-card:hover {
   transform: translateY(-2px);
-  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);
+  box-shadow: 0 8px 28px rgba(91, 74, 138, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
+  border-color: rgba(91, 74, 138, 0.35);
 }
 
 /* Type-specific card DNA */
-.k-card--note   { border-color: color-mix(in srgb, var(--fs-accent) 20%, transparent); }
+.k-card--note   { border-color: rgba(91, 74, 138, 0.20); }
 .k-card--task   { border-color: rgba(212, 160, 23, 0.18); }
 
 /* Top gradient bars */
@@ -851,7 +769,7 @@ onUnmounted(() => {
 }
 .k-card--note::before {
   right: 0;
-  background: linear-gradient(90deg, var(--fs-accent), #7A6DA8);
+  background: linear-gradient(90deg, #5B4A8A, #7A6DA8);
 }
 .k-card--task::before {
   right: 0;
@@ -870,7 +788,7 @@ onUnmounted(() => {
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.badge--note   { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: #7A6DA8; }
+.badge--note   { background: rgba(91, 74, 138,0.15); color: #7A6DA8; }
 .badge--task   { background: rgba(212,160,23,0.15); color: #fbbf24; }
 .badge--plan   { background: rgba(99,102,241,0.18); color: #818cf8; }
 
@@ -887,7 +805,7 @@ onUnmounted(() => {
 }
 .k-card-snippet {
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-muted);
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
@@ -907,9 +825,9 @@ onUnmounted(() => {
   padding: 1px 6px;
   border-radius: 8px;
   background: rgba(255,255,255,0.05);
-  color: var(--fs-text-tertiary);
+  color: var(--color-muted);
 }
-.k-card-date { font-size: 0.72rem; color: var(--fs-text-secondary); white-space: nowrap; opacity: 0.7; }
+.k-card-date { font-size: 0.72rem; color: var(--color-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 {
@@ -917,8 +835,8 @@ onUnmounted(() => {
   padding: 0.08rem 0.35rem;
   border-radius: 4px;
   white-space: nowrap;
-  background: color-mix(in srgb, var(--fs-text-secondary) 15%, transparent);
-  color: var(--fs-text-secondary);
+  background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
+  color: var(--color-text-secondary);
 }
 
 /* ── Task card ──────────────────────────────────────────── */
@@ -938,10 +856,10 @@ onUnmounted(() => {
   border-radius: 8px;
   font-weight: 500;
 }
-.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; }
+.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; }
 
 .priority-badge {
   font-size: 0.7rem;
@@ -949,16 +867,16 @@ onUnmounted(() => {
   border-radius: 8px;
   font-weight: 500;
 }
-.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); }
+.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); }
 
 .task-due {
   font-size: 0.78rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
 }
 .task-overdue {
-  color: var(--fs-overdue);
+  color: var(--color-overdue);
   font-weight: 500;
 }
 
@@ -970,7 +888,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
-  color: var(--fs-text-tertiary);
+  color: var(--color-muted);
   text-align: center;
   gap: 6px;
 }
@@ -978,7 +896,7 @@ onUnmounted(() => {
 .empty-narrator {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 1rem;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
   opacity: 0.85;
 }
 
@@ -992,17 +910,17 @@ onUnmounted(() => {
 }
 .sentinel-loading {
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-muted);
 }
 
 /* ── Graph panel ─────────────────────────────────────────── */
 .graph-panel {
   width: 500px;
   flex-shrink: 0;
-  border-left: 1px solid var(--fs-border-color);
+  border-left: 1px solid var(--color-border, rgba(255,255,255,0.06));
   display: flex;
   flex-direction: column;
-  background: var(--fs-surface-raised);
+  background: var(--color-bg-secondary);
   transition: width 0.2s ease;
 }
 .graph-panel.expanded {
@@ -1015,32 +933,12 @@ onUnmounted(() => {
   padding: 10px 14px;
   font-size: 0.85rem;
   font-weight: 500;
-  border-bottom: 1px solid var(--fs-border-color);
+  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
   flex-shrink: 0;
 }
-/* RESTORED (#2444). The panel is a flex COLUMN and its header is
-   `flex-shrink: 0`, so this is the item that takes the remaining height — and
-   without it the `height: 100%` below resolves against `auto` and does
-   nothing, which made the comment underneath a spec for a rule that could not
-   work. `min-height: 0` is the companion that lets a flex item shrink under
-   its content instead of overflowing the panel. */
-.graph-embed {
-  flex: 1;
-  min-height: 0;
-}
-
 /* Override GraphView's 100vh height so it fills the panel instead */
 .graph-embed :deep(.graph-page) {
   height: 100%;
 }
 
-/* A set someone already ruled on — quiet, not celebratory: it means "skip". */
-.dup-claimed {
-  font-size: 0.72rem;
-  color: var(--fs-text-tertiary);
-  border: 1px solid var(--fs-border-color);
-  border-radius: 4px;
-  padding: 0.05rem 0.4rem;
-  white-space: nowrap;
-}
 </style>

frontend/src/views/LoginView.vue

@@ -3,7 +3,6 @@ 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();
@@ -31,7 +30,12 @@ async function handleSubmit() {
     const redirect = (route.query.redirect as string) || "/";
     router.push(redirect);
   } catch (e: unknown) {
-    error.value = apiErrorMessage(e, "Login failed");
+    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";
+    }
   } finally {
     submitting.value = false;
   }
@@ -108,21 +112,92 @@ 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(--fs-text-secondary);
+  color: var(--color-text-secondary);
   font-size: 0.85rem;
 }
 .divider::before,
 .divider::after {
   content: "";
   flex: 1;
-  border-top: 1px solid var(--fs-border-color);
+  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);
 }
 .forgot-link {
   text-align: right;
@@ -130,9 +205,9 @@ function loginWithOAuth() {
   font-size: 0.85rem;
 }
 .forgot-link a {
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
 }
 .forgot-link a:hover {
-  color: var(--fs-accent);
+  color: var(--color-primary);
 }
 </style>

frontend/src/views/LogsView.vue

@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { apiGet } from "@/api/client";
+import { useToastStore } from "@/stores/toast";
+import PaginationBar from "@/components/PaginationBar.vue";
+
+const toastStore = useToastStore();
+
+interface LogEntry {
+  id: number;
+  category: string;
+  user_id: number | null;
+  username: string | null;
+  action: string | null;
+  endpoint: string | null;
+  method: string | null;
+  status_code: number | null;
+  duration_ms: number | null;
+  ip_address: string | null;
+  details: string | null;
+  created_at: string;
+}
+
+interface LogStats {
+  audit: number;
+  usage: number;
+  error: number;
+  total: number;
+}
+
+const logs = ref<LogEntry[]>([]);
+const stats = ref<LogStats>({ audit: 0, usage: 0, error: 0, total: 0 });
+const total = ref(0);
+const loading = ref(true);
+const expandedId = ref<number | null>(null);
+
+// Filters
+const category = ref("");
+const search = ref("");
+const dateFrom = ref("");
+const dateTo = ref("");
+const limit = 50;
+const offset = ref(0);
+
+let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+onMounted(async () => {
+  await Promise.all([fetchLogs(), fetchStats()]);
+  loading.value = false;
+});
+
+watch([category, dateFrom, dateTo], () => {
+  offset.value = 0;
+  fetchLogs();
+});
+
+watch(search, () => {
+  if (searchTimeout) clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => {
+    offset.value = 0;
+    fetchLogs();
+  }, 300);
+});
+
+watch(offset, () => {
+  fetchLogs();
+});
+
+async function fetchLogs() {
+  try {
+    const params = new URLSearchParams();
+    if (category.value) params.set("category", category.value);
+    if (search.value) params.set("search", search.value);
+    if (dateFrom.value) params.set("date_from", dateFrom.value);
+    if (dateTo.value) params.set("date_to", dateTo.value);
+    params.set("limit", String(limit));
+    params.set("offset", String(offset.value));
+
+    const data = await apiGet<{ logs: LogEntry[]; total: number }>(
+      `/api/admin/logs?${params}`
+    );
+    logs.value = data.logs;
+    total.value = data.total;
+  } catch {
+    toastStore.show("Failed to load logs", "error");
+  }
+}
+
+async function fetchStats() {
+  try {
+    stats.value = await apiGet<LogStats>("/api/admin/logs/stats");
+  } catch {
+    // Ignore
+  }
+}
+
+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 {
+    return JSON.stringify(JSON.parse(details), null, 2);
+  } catch {
+    return details;
+  }
+}
+
+function displayLabel(entry: LogEntry): string {
+  if (entry.category === "audit" && entry.action) return entry.action;
+  if (entry.endpoint) return entry.endpoint;
+  return "—";
+}
+
+function clearFilters() {
+  category.value = "";
+  search.value = "";
+  dateFrom.value = "";
+  dateTo.value = "";
+  offset.value = 0;
+}
+</script>
+
+<template>
+  <main class="logs-page">
+    <h1>Application Logs</h1>
+
+    <section class="settings-section stats-section">
+      <div class="stats-grid">
+        <div class="stat-card">
+          <span class="stat-count">{{ stats.total.toLocaleString() }}</span>
+          <span class="stat-label">Total</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-count stat-audit">{{ stats.audit.toLocaleString() }}</span>
+          <span class="stat-label">Audit</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-count stat-usage">{{ stats.usage.toLocaleString() }}</span>
+          <span class="stat-label">Usage</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-count stat-error">{{ stats.error.toLocaleString() }}</span>
+          <span class="stat-label">Error</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="settings-section">
+      <h2>Filters</h2>
+      <div class="filter-bar">
+        <select v-model="category" class="filter-select">
+          <option value="">All categories</option>
+          <option value="audit">Audit</option>
+          <option value="usage">Usage</option>
+          <option value="error">Error</option>
+        </select>
+        <input
+          v-model="search"
+          type="text"
+          placeholder="Search logs..."
+          class="filter-input"
+        />
+        <input v-model="dateFrom" type="date" class="filter-date" title="From date" />
+        <input v-model="dateTo" type="date" class="filter-date" title="To date" />
+        <button
+          v-if="category || search || dateFrom || dateTo"
+          class="btn-ghost btn-compact"
+          @click="clearFilters"
+        >
+          Clear
+        </button>
+      </div>
+    </section>
+
+    <section class="settings-section">
+      <div v-if="loading" class="loading-msg">Loading logs...</div>
+
+      <div v-else-if="logs.length === 0" class="empty-msg">No log entries found.</div>
+
+      <template v-else>
+        <table class="users-table logs-table">
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Category</th>
+              <th class="hide-mobile">User</th>
+              <th>Action / Endpoint</th>
+              <th class="hide-mobile">IP</th>
+              <th class="hide-mobile">Status</th>
+              <th class="hide-mobile">Duration</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="entry in logs" :key="entry.id">
+              <tr
+                class="log-row"
+                :class="{ 'row-expanded': expandedId === entry.id }"
+                @click="toggleExpand(entry.id)"
+              >
+                <td class="cell-time">{{ formatTime(entry.created_at) }}</td>
+                <td>
+                  <span class="category-badge" :class="'cat-' + entry.category">
+                    {{ entry.category }}
+                  </span>
+                </td>
+                <td class="hide-mobile cell-user">{{ entry.username || "—" }}</td>
+                <td class="cell-action">
+                  <span v-if="entry.method" class="method-tag">{{ entry.method }}</span>
+                  {{ displayLabel(entry) }}
+                </td>
+                <td class="hide-mobile cell-ip">{{ entry.ip_address || "—" }}</td>
+                <td class="hide-mobile cell-status">
+                  <span v-if="entry.status_code" :class="entry.status_code >= 400 ? 'text-error' : ''">
+                    {{ entry.status_code }}
+                  </span>
+                  <span v-else>—</span>
+                </td>
+                <td class="hide-mobile cell-duration">
+                  {{ entry.duration_ms != null ? entry.duration_ms + "ms" : "—" }}
+                </td>
+              </tr>
+              <tr v-if="expandedId === entry.id && (entry.details || entry.ip_address)" class="detail-row">
+                <td colspan="7">
+                  <div v-if="entry.ip_address" class="detail-ip">IP: {{ entry.ip_address }}</div>
+                  <pre v-if="entry.details" class="detail-json">{{ formatDetails(entry.details) }}</pre>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+
+        <PaginationBar
+          :total="total"
+          :limit="limit"
+          :offset="offset"
+          @update:offset="offset = $event"
+        />
+      </template>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.logs-page {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+.logs-page h1 {
+  margin: 0 0 1.5rem;
+}
+.settings-section {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+.settings-section h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.1rem;
+}
+
+/* Stats */
+.stats-section {
+  padding: 1rem 1.25rem;
+}
+.stats-grid {
+  display: flex;
+  gap: 1rem;
+}
+.stat-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+}
+.stat-count {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+.stat-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+}
+.stat-audit {
+  color: var(--color-primary);
+}
+.stat-usage {
+  color: var(--color-success);
+}
+.stat-error {
+  color: var(--color-danger);
+}
+
+/* Filters */
+.filter-bar {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.filter-select,
+.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);
+  font-size: 0.85rem;
+}
+.filter-select {
+  min-width: 140px;
+}
+.filter-input {
+  flex: 1;
+  min-width: 150px;
+}
+.filter-date {
+  width: 140px;
+}
+
+/* Table */
+.loading-msg,
+.empty-msg {
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  padding: 1rem 0;
+}
+.logs-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.logs-table th {
+  text-align: left;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.logs-table td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.85rem;
+}
+.logs-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.log-row {
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.log-row:hover {
+  background: var(--color-bg-secondary);
+}
+.row-expanded {
+  background: var(--color-bg-secondary);
+}
+.cell-time {
+  white-space: nowrap;
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+}
+.cell-user {
+  color: var(--color-text-secondary);
+}
+.cell-action {
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cell-status {
+  font-family: monospace;
+  font-size: 0.85rem;
+}
+.cell-ip {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+.cell-duration {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+.detail-ip {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  margin-bottom: 0.4rem;
+}
+.text-error {
+  color: var(--color-danger);
+}
+
+/* Category badges */
+.category-badge {
+  display: inline-block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.35rem;
+  border-radius: var(--radius-sm);
+}
+.cat-audit {
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+}
+.cat-usage {
+  color: var(--color-success);
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+}
+.cat-error {
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+}
+
+/* Method tag */
+.method-tag {
+  display: inline-block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  font-family: monospace;
+  padding: 0.05rem 0.25rem;
+  border-radius: 3px;
+  background: var(--color-bg-secondary);
+  color: var(--color-text-muted);
+  margin-right: 0.25rem;
+}
+
+/* Detail row */
+.detail-row td {
+  padding: 0 0.75rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.detail-json {
+  margin: 0;
+  padding: 0.75rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 300px;
+}
+
+@media (max-width: 768px) {
+  .stats-grid {
+    flex-wrap: wrap;
+  }
+  .stat-card {
+    min-width: calc(50% - 0.5rem);
+  }
+  .filter-bar {
+    flex-direction: column;
+  }
+  .filter-select,
+  .filter-input,
+  .filter-date {
+    width: 100%;
+  }
+  .cell-action {
+    max-width: 160px;
+  }
+}
+</style>

frontend/src/views/NoteEditorView.vue

@@ -626,10 +626,20 @@ onUnmounted(() => assist.clearSelection());
   gap: 0.75rem;
 }
 
+.body-tabs-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
 .editor-tabs {
   display: inline-flex;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 2px;
   gap: 2px;
@@ -643,14 +653,14 @@ onUnmounted(() => assist.clearSelection());
   padding: 0.22rem 0.75rem;
   font-size: 0.78rem;
   font-weight: 500;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
-.tab:hover { color: var(--fs-text-primary); }
+.tab:hover { color: var(--color-text); }
 .tab.active {
-  background: var(--fs-surface-hover);
-  color: var(--fs-text-primary);
+  background: var(--color-surface);
+  color: var(--color-text);
   box-shadow: 0 1px 3px rgba(0,0,0,0.12);
 }
 
@@ -663,16 +673,33 @@ onUnmounted(() => assist.clearSelection());
   opacity: 0;
 }
 
+.body-editor-wrap {
+  min-height: 200px;
+}
+
 .stream-label {
   font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
+}
+
+.stream-preview {
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  padding: 0.75rem;
+  background: var(--color-bg-card);
+  min-height: 200px;
+}
+
+.main-diff {
+  flex: 1;
+  min-height: 0;
 }
 
 /* Right sidebar */
 .note-sidebar {
   width: 280px;
   flex-shrink: 0;
-  border-left: 1px solid var(--fs-border-color);
+  border-left: 1px solid var(--color-border);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -681,17 +708,25 @@ onUnmounted(() => assist.clearSelection());
 .sb-select, .sb-input {
   width: 100%;
   padding: 5px 8px;
-  border-radius: var(--fs-radius-sm);
-  border: 1px solid var(--fs-border-color);
-  background: var(--fs-surface-hover);
-  color: var(--fs-text-primary);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-input-border, rgba(255,255,255,0.12));
+  background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
+  color: var(--color-text);
   font-size: 0.82rem;
   font-family: inherit;
   outline: none;
   transition: border-color 0.15s;
 }
 .sb-select:focus, .sb-input:focus {
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary);
+}
+
+/* Tag suggest row inside sidebar */
+.tag-suggest-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  align-items: center;
 }
 
 /* Link Suggestions */
@@ -707,13 +742,13 @@ onUnmounted(() => assist.clearSelection());
   font-size: 0.72rem;
   padding: 0.15rem 0.5rem;
   background: none;
-  border: 1px solid var(--fs-accent);
-  border-radius: var(--fs-radius-sm);
-  color: var(--fs-accent);
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-sm);
+  color: var(--color-primary);
   cursor: pointer;
   font-family: inherit;
 }
-.btn-link-all:hover { background: var(--fs-action-primary); color: var(--fs-text-on-action); }
+.btn-link-all:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
 
 .link-suggest-list {
   display: flex;
@@ -731,14 +766,14 @@ onUnmounted(() => assist.clearSelection());
 .link-suggest-title {
   flex: 1;
   font-family: monospace;
-  color: var(--fs-accent);
+  color: var(--color-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .link-suggest-count {
-  color: var(--fs-text-tertiary);
+  color: var(--color-text-muted);
   font-size: 0.72rem;
   flex-shrink: 0;
 }
@@ -748,13 +783,13 @@ onUnmounted(() => assist.clearSelection());
   font-size: 0.72rem;
   padding: 0.1rem 0.4rem;
   background: none;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-family: inherit;
-  color: var(--fs-text-secondary);
+  color: var(--color-text-secondary);
 }
-.btn-apply-link:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
+.btn-apply-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
 
 /* Writing Assistant section */
 .assist-section {
@@ -763,23 +798,31 @@ onUnmounted(() => assist.clearSelection());
   gap: 0.5rem;
 }
 
+.assist-section-title {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 /* ── Process editor ─────────────────────────────────────── */
 .ef-label {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 0.92rem;
-  color: var(--fs-accent);
+  color: var(--color-primary);
 }
 .prompt-editor {
   width: 100%;
   min-height: 60vh;
   margin-top: 8px;
   padding: 14px 16px;
-  border: 1px solid var(--fs-border-color);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
-  background: var(--fs-surface-hover);
-  color: var(--fs-text-primary);
+  background: var(--color-surface);
+  color: var(--color-text);
   /* Prompts are plain markdown — a code-style editor, not rich text. */
-  font-family: var(--fs-font-mono);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-size: 0.88rem;
   line-height: 1.55;
   tab-size: 2;
@@ -787,7 +830,7 @@ onUnmounted(() => assist.clearSelection());
   outline: none;
 }
 .prompt-editor:focus {
-  border-color: var(--fs-accent);
+  border-color: var(--color-primary);
 }
 /* Narrow screen: sidebar collapses */
 @media (max-width: 720px) {
@@ -796,7 +839,7 @@ onUnmounted(() => assist.clearSelection());
   .note-sidebar {
     width: 100%;
     border-left: none;
-    border-top: 1px solid var(--fs-border-color);
+    border-top: 1px solid var(--color-border);
     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(--fs-text-tertiary);
+  color: var(--color-text-muted);
   margin: 0 0 0.75rem;
 }
 .meta-item {
@@ -359,7 +359,7 @@ async function convertToTask() {
 }
 .backlinks {
   margin-top: 2.5rem;
-  border-top: 1px solid var(--fs-border-color);
+  border-top: 1px solid var(--color-border);
   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(--fs-text-tertiary);
+  color: var(--color-text-muted);
   margin: 0 0 0.75rem;
 }
 .backlinks-count {
   margin-left: 0.2rem;
   font-size: 0.72rem;
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
   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(--fs-radius-lg);
-  background: var(--fs-surface-raised);
-  border: 1px solid var(--fs-border-color);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
   text-decoration: none;
-  color: var(--fs-text-primary);
+  color: var(--color-text);
   transition: border-color 0.15s, box-shadow 0.15s;
   font-size: 0.9rem;
 }
 .backlink-card:hover {
-  border-color: color-mix(in srgb, var(--fs-accent) 50%, transparent);
+  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  color: var(--fs-accent);
+  color: var(--color-primary);
 }
 .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(--fs-accent) 12%, transparent);
-  color: var(--fs-accent);
-  border: 1px solid color-mix(in srgb, var(--fs-accent) 25%, transparent);
+  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);
 }
 .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(--fs-radius-sm);
+  border-radius: var(--radius-sm);
   background: linear-gradient(
     90deg,
-    var(--fs-surface-raised) 25%,
-    color-mix(in srgb, var(--fs-text-tertiary) 18%, var(--fs-surface-raised)) 50%,
-    var(--fs-surface-raised) 75%
+    var(--color-bg-secondary) 25%,
+    color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-secondary)) 50%,
+    var(--color-bg-secondary) 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(--fs-radius-lg); }
+.skel-title { height: 2.2rem; width: 70%; border-radius: var(--radius-md); }
 .skel-meta { height: 0.85rem; width: 40%; }
 .skel-line { height: 0.9rem; }
 .skel-line--short { width: 55%; }