2026-08-04 11:02:42 -04:00
14 changed files with 123 additions and 1428 deletions
@@ -1,28 +1,29 @@
-"""retire the design_rulebook_id setting
+"""retire the two settings that designated a design source for the app itself
 Revision ID: 0075
 Revises: 0074
 Create Date: 2026-08-03
-The /design panel used to compare a design RULEBOOK's prose claims against the
+Two keys, retired for the same reason a week apart, so they go in one change
-live tokens. That rulebook was imported into the design system and retired, and
+rather than one migration each:
 the panel now compares the running app against the design system it was
 generated from (#2419). Its designation moved with it:
-    design_rulebook_id  ->  ui_design_system_id
+    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
-Nothing reads the old key any more, so this deletes the row rather than leaving
+Both named a design source for THE RUNNING INSTALL. The design surface is for
-an inert one behind (rule #22 — remove the old path, including the setting it
+the projects an install tracks, and a project already carries its own pointer
-read from). The values are not translatable: a rulebook id and a design system
+(`projects.design_system_id`) — so an install-wide designation had nothing left
-id are ids in different tables, and guessing a mapping would silently point the
+to mean. `ui_design_system_id` was introduced by this same migration's first
-new panel at the wrong system.
+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 operator re-designates in Settings.
+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
@@ -33,10 +34,12 @@ down_revision = "0074"
 branch_labels = None
 depends_on = None
 def upgrade() -> None:
    op.execute(
-        sa.text("DELETE FROM settings WHERE key = 'design_rulebook_id'")
+        sa.text(
            "DELETE FROM settings "
            "WHERE key IN ('design_rulebook_id', 'ui_design_system_id')"
        )
    )
@@ -1,15 +0,0 @@
 import { apiGet } from "@/api/client";
 export interface UiSystemResponse {
  design_system_id: number | null;
  title: string | null;
 }
 /** The design system this install says its own UI is built from.
 *
 *  Both nulls means none designated — the normal state for a fresh install, not
 *  an error; the caller shows an explanatory empty state. An id with a null
 *  title means designated but deleted or unreadable, which is a
 *  misconfiguration and must not be rendered as "none". */
 export const fetchUiDesignSystem = () =>
  apiGet<UiSystemResponse>("/api/design/ui-system");
@@ -1,51 +0,0 @@
 <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>
@@ -110,15 +110,11 @@ const router = createRouter({
      component: () => import("@/views/RulesView.vue"),
    },
    {
-      // Meta-surface, same family as /rules: it describes the app rather than
+      // The design systems this install RECORDS — for the projects it tracks,
-      // holding the operator's records.
+      // not for the install itself. There was a sibling `/design` that read the
-      path: "/design",
+      // running app's own stylesheet out of the browser; it could only ever
-      name: "design",
+      // inspect the instance it was served from, which made it a mirror rather
-      component: () => import("@/views/DesignView.vue"),
+      // than a tool (#274).
    },
    {
      // 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"),
@@ -1,235 +0,0 @@
 /**
 * Agreement — does the running app match the design system it was built from?
 *
 * This panel used to compare a design RULEBOOK's prose claims against the live
 * tokens. That rulebook was retired into the design system on 2026-08-01, and
 * the feature spent two days rendering a reassuring empty state instead of
 * failing (#2419). Its replacement is not the same question re-aimed: comparing
 * a design system against a stylesheet generated from that same design system
 * would be a tautology.
 *
 * The question that survives is the one no server can answer. A sheet still has
 * to be LOADED and APPLIED, and until now nothing checked that it was. Three
 * failures live in that gap:
 *
 *   absent   the app has no such token at all — the sheet was never
 *            regenerated after the record changed, or never loaded
 *   differs  the app has the token with another value — a stale copy of the
 *            sheet, or a later rule that overrode it
 *   unrecorded  the app declares a token in the record's own family that the
 *            record has never heard of — hand-editing that outlived its reason
 *
 * SCOPE, and it is a real limit rather than an omission. This compares the
 * record against the TOKENS. A literal hardcoded in a component where a token
 * should be referenced is invisible here, because the drift isn't in the tokens
 * at all — that check has the component sources and belongs in CI (#2277).
 * Saying so in the panel matters: a report that silently omits a category
 * invites the reader to conclude the category is clean.
 */
 import type { DesignToken } from "@/utils/designTokens";
 /** The base mode's key in a token's `value_by_mode`, mirroring services/design_stylesheet. */
 export const BASE_MODE = "base";
 /** One token as the RECORD has it, already narrowed to the mode being checked. */
 export interface RecordedToken {
  name: string;
  /** Declared value for this mode, or "" when the role is named but unvalued. */
  value: string;
  groupName: string | null;
 }
 export type AgreementStatus = "ok" | "absent" | "differs" | "unrecorded";
 export interface Agreement {
  name: string;
  groupName: string | null;
  /** What the record declares, resolved. Empty for an `unrecorded` row. */
  recorded: string;
  /** What the browser resolved. Empty for an `absent` row. */
  live: string;
  status: AgreementStatus;
 }
 /**
 * Which declared value applies when the page is 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 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] ?? "";
 }
 /**
 * Normalise a colour for comparison.
 *
 * A record writes `#FFFFFF`, a sheet writes `#fff`, and
 * getComputedStyle can hand back `rgb(255, 255, 255)` — three spellings of one
 * colour, and a comparison that misses any of them over-reports drift, which is
 * the failure that gets a panel ignored. The rgb() case is browser-specific and
 * therefore has no server-side counterpart, which is exactly why it is 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 reports real colour properties as rgb()/rgba(), never as
  // authored. Custom properties are token streams and usually come back as
  // written, so this arm is insurance rather than the common path.
  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;
 }
 /**
 * Compare two CSS values for sameness, not for identical text.
 *
 * Whitespace inside a compound value is not meaningful — `0 2px 10px` and
 * `0  2px  10px` are one shadow — and neither is case, since a custom property
 * carries no font names or content strings that would be changed by folding it.
 * Colours go through the normaliser first so spelling differences don't read as
 * drift.
 */
 export function sameValue(a: string, b: string): boolean {
  const canon = (v: string) => {
    const trimmed = v.trim();
    return normalizeColour(trimmed) ?? trimmed.replace(/\s+/g, " ").toLowerCase();
  };
  return canon(a) === canon(b);
 }
 /**
 * The families the record claims, as name prefixes.
 *
 * Used to decide which live tokens count as `unrecorded`. An app's stylesheet
 * legitimately carries names the record never owned — Scribe's own sheet keeps
 * a `--color-*` alias layer over the design system's `--fs-*` block — and
 * reporting those as drift would bury the real findings under a compatibility
 * shim. So the record is treated as owning a FAMILY, identified by the prefix
 * up to the first separator, and nothing outside it is judged.
 *
 * Derived from the data rather than configured, because the prefix is the
 * install's choice (see design_starter_roles) and hardcoding one would put a
 * single operator's naming into every install (rule #115).
 */
 export function recordedFamilies(names: Iterable<string>): string[] {
  const families = new Set<string>();
  for (const name of names) {
    const match = /^(--[A-Za-z0-9]+-)/.exec(name);
    if (match) families.add(match[1]);
  }
  return [...families];
 }
 /**
 * Compare the record against the running app.
 *
 * `resolved` is the record's declared values after the browser has substituted
 * `var()` in them (see `resolveDeclared`) — the same treatment the live values
 * already received, which is what makes the two comparable.
 *
 * Tokens the record names but has no value for are SKIPPED, not reported. A
 * valueless token is a role awaiting a decision, and the stylesheet already
 * reports those under `valueless`; counting them as drift would mean a system
 * created with starter roles opens this panel red on day one.
 */
 export function compareToApp(
  recorded: RecordedToken[],
  resolved: Map<string, string>,
  live: DesignToken[],
 ): Agreement[] {
  const liveByName = new Map<string, string>();
  for (const token of live) liveByName.set(token.name, token.value);
  const out: Agreement[] = [];
  for (const token of recorded) {
    if (!token.value) continue;
    const declared = resolved.get(token.name) ?? token.value;
    const actual = liveByName.get(token.name) ?? "";
    out.push({
      name: token.name,
      groupName: token.groupName,
      recorded: declared,
      live: actual,
      status: !actual ? "absent" : sameValue(declared, actual) ? "ok" : "differs",
    });
  }
  const known = new Set(recorded.map((t) => t.name));
  const families = recordedFamilies(known);
  for (const token of live) {
    if (known.has(token.name)) continue;
    if (!families.some((prefix) => token.name.startsWith(prefix))) continue;
    out.push({
      name: token.name,
      groupName: null,
      recorded: "",
      live: token.value,
      status: "unrecorded",
    });
  }
  return out;
 }
 export interface AgreementSummary {
  ok: number;
  absent: number;
  differs: number;
  unrecorded: number;
  total: number;
 }
 export function summarise(agreements: Agreement[]): AgreementSummary {
  const summary: AgreementSummary = {
    ok: 0, absent: 0, differs: 0, unrecorded: 0, total: agreements.length,
  };
  for (const a of agreements) summary[a.status] += 1;
  return summary;
 }
 /**
 * Findings worth leading with.
 *
 * A panel that opens with every row gets closed and never reopened. `absent`
 * leads because it is the one status that can mean the whole sheet is missing;
 * `differs` next, because a wrong value is being rendered right now;
 * `unrecorded` last, since it is a bookkeeping gap rather than a visible fault.
 * `ok` rows are not findings at all and belong behind an expansion.
 */
 export function rankAgreements(agreements: Agreement[]): Agreement[] {
  const order: Record<AgreementStatus, number> = {
    absent: 0, differs: 1, unrecorded: 2, ok: 3,
  };
  return [...agreements].sort((a, b) => {
    const byStatus = order[a.status] - order[b.status];
    return byStatus !== 0 ? byStatus : a.name.localeCompare(b.name);
  });
 }
@@ -1,243 +0,0 @@
 /**
 * 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 agreement panel compares them to the design system the
 * install says its UI is built from (#2419).
 *
 * 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 token is re-declared under a mode selector in source. */
  modeAware: 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;
 /**
 * Any mode-override block, whichever mode it names.
 *
 * This used to hardcode `[data-theme="dark"]`, and that stopped being true the
 * day the sheet went dark-first: `:root` now carries dark and
 * `[data-theme="light"]` overrides it. The hardcoded selector matched nothing,
 * `overriddenInDark` was false for all 186 tokens, and the "mode-aware" flag
 * silently vanished from the gallery — a UI that kept rendering, wrongly.
 *
 * Matching the SHAPE rather than one mode name is what makes that unrepeatable,
 * and it is also the only version that holds for an install whose modes aren't
 * light and dark (rule #115). `selector_for_mode` in services/design_stylesheet
 * emits exactly this shape, so the two ends agree by construction.
 */
 const MODE_SELECTOR = /\[data-theme=["']?[\w-]+["']?\]/g;
 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 under a mode selector — i.e. tokens that change with mode. */
 export function modeOverriddenNames(css: string = themeCss): Set<string> {
  const bare = css.replace(COMMENT, "");
  const names = new Set<string>();
  for (const match of bare.matchAll(MODE_SELECTOR)) {
    if (match.index === undefined) continue;
    const open = bare.indexOf("{", match.index + match[0].length);
    if (open === -1) continue;
    // A custom-property block is flat, so the first `}` closes it. Anything
    // nested would be a rule, not a declaration, and has no tokens to find.
    const close = bare.indexOf("}", open);
    if (close === -1) continue;
    for (const name of tokenNames(bare.slice(open, close))) names.add(name);
  }
  return names;
 }
 /**
 * 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 modal = modeOverriddenNames();
  return tokenNames().map((name) => ({
    name,
    group: groupFor(name),
    value: computed.getPropertyValue(name).trim(),
    modeAware: modal.has(name),
  }));
 }
 /**
 * Read a set of DECLARED values as the browser would resolve them.
 *
 * The point is to compare like with like. A design system records
 * `color-mix(in srgb, var(--fs-accent) 15%, transparent)`; the browser reports
 * the same token with `var()` already substituted. Comparing those two strings
 * marks every derived token as drift, which is a report nobody can read.
 *
 * So both sides go through the same engine: set the declarations on an
 * offscreen probe, read them back, and the substitution is done by the
 * implementation that will do it for real rather than by a parser of ours.
 * Undeclared references fall through to the page's own values, which is what
 * the cascade would do anyway.
 */
 export function resolveDeclared(declared: Map<string, string>): Map<string, string> {
  const probe = document.createElement("div");
  probe.style.display = "none";
  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();
  }
 }
 /**
 * 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: mode scoping is one-way. Whichever mode the sheet treats as its
 * BASE lives on `:root` and has no attribute selector of its own, so a probe
 * can add an overriding mode to a subtree but can never add the base mode back.
 *
 * The sheet is dark-first today — `:root` carries dark, `[data-theme="light"]`
 * overrides it — so light-inside-dark previews work and dark-inside-light ones
 * return the light values. That direction flipped when the sheet did, which is
 * why this says "the base mode" rather than naming one: callers should treat a
 * cross-mode read as best-effort either way.
 */
 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.
 *
 * `overrides` maps a token name to the group it should sit under, and exists
 * because the prefix table above can only know the families that shipped with
 * the product. An install's own design system knows the groups it authored, so
 * a caller holding the record passes them here rather than the taxonomy growing
 * one operator's prefixes (rule #115).
 */
 export function groupTokens(
  tokens: DesignToken[],
  overrides: Map<string, string> = new Map(),
 ): Map<string, DesignToken[]> {
  const out = new Map<string, DesignToken[]>();
  for (const token of tokens) {
    const group = overrides.get(token.name) ?? token.group;
    const bucket = out.get(group);
    if (bucket) bucket.push(token);
    else out.set(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}`));
 }
@@ -0,0 +1,88 @@
 /**
 * 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();
  }
 }
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 /**
- * Design systems — editing the stylesheet Scribe holds (milestone #254 step 5).
+ * Design systems — the stylesheets this install RECORDS, for the projects it
 * tracks (milestone #254 step 5).
 *
- * Sibling of /design, which shows the system as the BROWSER has it. This page
+ * It had a sibling, `/design`, which showed the system as the BROWSER had it —
- * shows it as the RECORD has it, which is the half you can change.
+ * 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.
 *
 * 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
@@ -39,7 +43,6 @@ 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";
@@ -496,7 +499,6 @@ function isColourish(value: string): boolean {
 <template>
  <div class="ds-view">
    <DesignTabs />
    <header class="ds-header">
      <h1>Design systems</h1>
@@ -1,680 +0,0 @@
 <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 can 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.
 *
 * The panel at the top applies the same rule one level up: the sheet the app
 * loads is generated from a design system, and nothing checked that the app
 * ever loaded it (#2419).
 */
 import { computed, onMounted, ref, watch } from "vue";
 import { fetchUiDesignSystem } from "@/api/design";
 import { fetchResolvedTokens, type ResolvedToken } from "@/api/designSystems";
 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 { useTheme } from "@/composables/useTheme";
 import {
  compareToApp,
  rankAgreements,
  summarise,
  valueForMode,
  type Agreement,
  type RecordedToken,
 } from "@/utils/designDrift";
 import {
  groupTokens,
  readTokens,
  resolveDeclared,
  type DesignToken,
  type TokenGroup,
 } from "@/utils/designTokens";
 const { theme } = useTheme();
 const tokens = ref<DesignToken[]>([]);
 /** The designation, and the two ways it can be absent — see api/design.ts. */
 const systemId = ref<number | null>(null);
 const systemTitle = ref<string | null>(null);
 const checkLoaded = ref(false);
 const checkFailed = ref(false);
 const showAgreeingRows = ref(false);
 /** The record, as fetched. Kept raw because the mode narrowing has to be redone
 *  whenever the theme changes — a comparison against the wrong mode's values
 *  would report every mode-aware token as drift. */
 const records = ref<ResolvedToken[]>([]);
 const recorded = ref<RecordedToken[]>([]);
 const resolved = ref<Map<string, string>>(new Map());
 /** Narrow the record to the live mode and re-read the app. Idempotent. */
 function recheck() {
  tokens.value = readTokens();
  recorded.value = records.value.map((t) => ({
    name: t.name,
    value: valueForMode(t.value_by_mode, theme.value),
    groupName: t.group_name,
  }));
  const declared = new Map<string, string>();
  for (const token of recorded.value) {
    if (token.value) declared.set(token.name, token.value);
  }
  resolved.value = resolveDeclared(declared);
 }
 /**
 * 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 () => {
  recheck();
  try {
    const designation = await fetchUiDesignSystem();
    systemId.value = designation.design_system_id;
    systemTitle.value = designation.title;
    if (designation.design_system_id !== null && designation.title !== null) {
      records.value = (await fetchResolvedTokens(designation.design_system_id)).tokens;
      recheck();
    }
  } catch {
    // The gallery is useful without the panel, so a failed fetch degrades to
    // "couldn't check" rather than taking the page down with it. It says so
    // rather than showing the same empty state as "nothing designated" — that
    // conflation is what let this feature sit dead (#2419).
    checkFailed.value = true;
  } finally {
    checkLoaded.value = true;
  }
 });
 // Toggling the theme on this page is the most likely thing anyone does here.
 watch(theme, () => recheck());
 const agreements = computed<Agreement[]>(() =>
  rankAgreements(compareToApp(recorded.value, resolved.value, tokens.value)),
 );
 const summary = computed(() => summarise(agreements.value));
 const visibleAgreements = computed(() =>
  showAgreeingRows.value
    ? agreements.value
    : agreements.value.filter((a) => a.status !== "ok"),
 );
 /** Named but unvalued roles — skipped by the comparison, worth stating once. */
 const unvaluedCount = computed(
  () => records.value.filter((t) => !valueForMode(t.value_by_mode, theme.value)).length,
 );
 const STATUS_LABEL: Record<Agreement["status"], string> = {
  absent: "not in the app",
  differs: "app renders another value",
  unrecorded: "not in the record",
  ok: "agrees",
 };
 /* Gallery ------------------------------------------------------------------ */
 /**
 * Groups come from the RECORD where there is one, and from the name prefix
 * otherwise. The prefix table in designTokens.ts can only know the families
 * that shipped with the product; the record knows the ones this install
 * authored, and grouping 110 tokens under "other" because a table never heard
 * of their prefix is a gallery nobody reads.
 */
 const recordGroups = computed(() => {
  const out = new Map<string, string>();
  for (const token of records.value) {
    if (token.group_name) out.set(token.name, token.group_name);
  }
  return out;
 });
 const grouped = computed(() => groupTokens(tokens.value, recordGroups.value));
 /** Order for the prefix-derived groups only; record groups sort by name. */
 const GROUP_ORDER: TokenGroup[] = ["color", "radius", "glow", "gradient", "focus", "layout", "other"];
 const orderedGroups = computed(() => {
  const fromRecord = new Set(recordGroups.value.values());
  const rank = (g: string) => {
    const i = GROUP_ORDER.indexOf(g as TokenGroup);
    return i < 0 ? GROUP_ORDER.length : i;
  };
  const keys = [...grouped.value.keys()].sort((a, b) => {
    // The record's own groups lead: they are the system, and the prefix-derived
    // ones are whatever else the sheet happens to carry.
    const byOrigin = Number(!fromRecord.has(a)) - Number(!fromRecord.has(b));
    if (byOrigin !== 0) return byOrigin;
    if (fromRecord.has(a)) return a.localeCompare(b);
    return rank(a) - rank(b);
  });
  return keys.map((group) => ({ group, tokens: grouped.value.get(group)! }));
 });
 /** 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());
 }
 /** The button family as shared classes, described by the roles they reach for. */
 const BUTTON_VARIANTS = [
  { name: "Primary", spec: "action-primary background, text-on-action label, no border" },
  { name: "Secondary", spec: "action-secondary background, text-on-action label, no border" },
  { name: "Ghost", spec: "transparent, primary text, one-pixel border" },
  { name: "Danger", spec: "action-destructive background, text-on-action label" },
 ];
 /**
 * The type scale, read from whatever size tokens the sheet actually declares.
 *
 * Was a hand-written table of nine sizes marked "no token" — true when written,
 * and false since the scale was recorded. Deriving it from the live tokens is
 * what stops it going stale a second time: if the scale is removed, this
 * section empties out and says so.
 */
 const sizeTokens = computed(() => tokens.value.filter((t) => /-size(-|$)/.test(t.name)));
 </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>
    <!-- Does the running app match the design system it was generated from? -->
    <section class="design-section">
      <h2>Agreement with the record</h2>
      <p v-if="!checkLoaded" class="muted">
        Checking the running app against its design system…
      </p>
      <div v-else-if="checkFailed" class="gap-notice">
        <strong>The design system couldn't be read.</strong>
        <p>
          The gallery below is still live — it comes from the browser, not the
          server — but nothing is being compared against the record right now.
          This is a failure, not an empty result.
        </p>
      </div>
      <div v-else-if="systemId === null" class="gap-notice">
        <strong>No design system designated for this UI.</strong>
        <p>
          This install hasn't said which design system its own interface is
          built from, so there is nothing to check the running app against.
          Designate one in <router-link to="/settings">Settings</router-link>
          and this panel will report every token the record declares that the
          app doesn't have, renders differently, or has never heard of.
        </p>
      </div>
      <div v-else-if="systemTitle === null" class="gap-notice">
        <strong>Design system #{{ systemId }} could not be read.</strong>
        <p>
          It is designated in <router-link to="/settings">Settings</router-link>,
          but it has since been deleted or is no longer shared with you. Nothing
          is being checked — this is a misconfiguration, not a clean result.
        </p>
      </div>
      <template v-else>
        <p class="section-note">
          <strong>{{ summary.absent }}</strong> not in the app ·
          <strong>{{ summary.differs }}</strong> rendering another value ·
          {{ summary.unrecorded }} not in the record ·
          {{ summary.ok }} agreeing, across {{ summary.total }} tokens checked
          against <strong>{{ systemTitle }}</strong> in
          <code>{{ theme }}</code> mode.
          <template v-if="unvaluedCount">
            {{ unvaluedCount }} recorded {{ unvaluedCount === 1 ? "role has" : "roles have" }}
            no value yet and {{ unvaluedCount === 1 ? "was" : "were" }} not checked.
          </template>
        </p>
        <div class="gap-notice">
          <strong>This compares the record 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="!agreements.length" class="muted">
          The record declares no valued tokens, so there is nothing to compare
          yet. Give its roles values and this panel starts reporting.
        </p>
        <ul v-else class="spec-list">
          <li v-for="row in visibleAgreements" :key="row.name">
            <span class="spec-name">
              <span
                v-if="isColourish(row.live || row.recorded)"
                class="swatch"
                :style="{ background: row.live || row.recorded }"
                aria-hidden="true"
              />
              <code>{{ row.name }}</code>
            </span>
            <span class="spec-detail">
              <template v-if="row.status === 'differs'">
                record <code>{{ row.recorded }}</code> · app
                <code>{{ row.live }}</code>
              </template>
              <template v-else-if="row.status === 'unrecorded'">
                app <code>{{ row.live }}</code>
              </template>
              <template v-else>
                record <code>{{ row.recorded }}</code>
              </template>
              <span v-if="row.groupName" class="matches"> · {{ row.groupName }}</span>
            </span>
            <span class="spec-status" :class="row.status">{{ STATUS_LABEL[row.status] }}</span>
          </li>
        </ul>
        <button
          v-if="agreements.length && summary.ok"
          class="reveal-toggle"
          @click="showAgreeingRows = !showAgreeingRows"
        >
          {{ showAgreeingRows ? "Hide" : "Show" }} the {{ summary.ok }} agreeing tokens
        </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 BUTTON_VARIANTS" :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>
    <!-- Type: rendered at the sizes the sheet declares, not described. -->
    <section class="design-section">
      <h2>Type scale</h2>
      <div v-if="!sizeTokens.length" class="gap-notice">
        <strong>The scale has no tokens.</strong>
        <p>
          Nothing in the stylesheet declares a size token, so sizes are being set
          ad hoc per component. There is nothing live to show here.
        </p>
      </div>
      <ul v-else class="spec-list">
        <li v-for="t in sizeTokens" :key="t.name">
          <span class="spec-name" :style="{ fontSize: t.value }">Ag</span>
          <span class="spec-detail"><code>{{ t.name }}</code></span>
          <span class="spec-status ok">{{ t.value || "—" }}</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.modeAware" class="token-flag" title="Re-declared under a mode selector">
            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;
  word-break: break-word;
 }
 .spec-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
 }
 /* `absent` is the one status that can mean the whole sheet failed to load, so
   it carries the same weight as a high-priority finding; `differs` is a wrong
   value on screen right now; `unrecorded` is bookkeeping and reads quietest. */
 .spec-status.absent {
  background: var(--color-priority-high-bg);
  color: var(--color-priority-high);
 }
 .spec-status.differs {
  background: var(--color-priority-medium-bg);
  color: var(--color-priority-medium);
 }
 .spec-status.unrecorded {
  background: var(--color-surface);
  color: var(--color-text-muted);
 }
 .spec-status.missing {
  background: var(--color-priority-medium-bg);
  color: var(--color-priority-medium);
 }
 .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>
@@ -4,7 +4,6 @@ import { useSettingsStore } from "@/stores/settings";
 import { useAuthStore } from "@/stores/auth";
 import { useToastStore } from "@/stores/toast";
 import { apiGet, apiPost, apiPut, apiDelete, listGroups, createGroup, deleteGroup, listGroupMembers, addGroupMember, removeGroupMember, searchUsers, listApiKeys, createApiKey as apiCreateApiKey, revokeApiKey as apiRevokeApiKey, getProfile, updateProfile, type ApiKeyEntry, type GroupEntry, type GroupMember, type UserSearchResult, type UserProfile } from "@/api/client";
 import { fetchDesignSystems } from "@/api/designSystems";
 import type { User } from "@/types/auth";
 import PaginationBar from "@/components/PaginationBar.vue";
 import TagInput from "@/components/TagInput.vue";
@@ -32,12 +31,6 @@ const kbWritePathThreshold = ref("0.68");
 // gate: that one BLOCKS a create and must be unforgiving of noise, this one only
 // suggests a merge the operator reviews (services/dedup.py).
 const kbDuplicateThreshold = ref("0.82");
 // Which design system this install's own UI is built from, for the /design
 // agreement panel. Empty = none designated, which is the normal state for a
 // fresh install rather than a misconfiguration — the panel explains itself when
 // unset. Replaced design_rulebook_id when the rulebook was retired (#2419).
 const uiDesignSystemId = ref("");
 const designSystems = ref<{ id: number; title: string }[]>([]);
 const savingKbInject = ref(false);
 const kbInjectSaved = ref(false);
@@ -107,9 +100,6 @@ async function saveKbInject() {
      kb_writepath_enabled: kbWritePathEnabled.value ? 'true' : 'false',
      kb_writepath_threshold: String(wpT),
      kb_duplicate_threshold: String(dupT),
      // Empty string DELETES the setting (see routes/settings.py), which is
      // exactly right for "no design system" — absent rather than zero.
      ui_design_system_id: uiDesignSystemId.value,
    });
    kbInjectSaved.value = true;
    setTimeout(() => (kbInjectSaved.value = false), 2000);
@@ -500,16 +490,6 @@ onMounted(async () => {
  if (allSettings.kb_duplicate_threshold !== undefined) {
    kbDuplicateThreshold.value = allSettings.kb_duplicate_threshold;
  }
  uiDesignSystemId.value = allSettings.ui_design_system_id ?? "";
  // Best-effort: the picker degrades to "none available" rather than blocking
  // the whole settings page if design systems can't be listed.
  try {
    designSystems.value = (await fetchDesignSystems()).design_systems.map(
      (s) => ({ id: s.id, title: s.title }),
    );
  } catch {
    designSystems.value = [];
  }
  if (allSettings.notify_task_reminders !== undefined) {
    notifyTaskReminders.value = allSettings.notify_task_reminders !== "false";
  }
@@ -1280,25 +1260,12 @@ function formatUserDate(iso: string): string {
            location, not by resemblance.
          </p>
        </div>
-        <div class="field">
+        <!-- A design system belongs to a PROJECT, and the picker for it lives on
-          <label for="ui-design-system">This app's design system</label>
+             the project. There was a setting here that designated the system
-          <select id="ui-design-system" v-model="uiDesignSystemId" class="input" style="max-width: 22rem">
+             this install's own interface was built from; it only ever described
-            <option value="">None — don't check the interface against a record</option>
+             the app you were already looking at, which is not what the feature
-            <option v-for="ds in designSystems" :key="ds.id" :value="String(ds.id)">
+             is for (#274). -->
-              {{ ds.title }}
+
            </option>
          </select>
          <p class="field-hint">
            Which design system this interface is supposed to be built from. Once
            set, the <router-link to="/design">Design</router-link> page compares
            every token the system declares against what the browser has actually
            resolved, and reports the ones the app is missing, renders differently,
            or has never heard of. That catches a stylesheet that was regenerated
            but never shipped — which the record alone cannot tell you, since the
            sheet is generated from it. Leave it as None if this install's
            interface isn't described by one of your design systems.
          </p>
        </div>
        <div class="field">
          <label for="kb-duplicate-threshold">Near-duplicate report threshold</label>
          <input
@@ -26,7 +26,6 @@ from scribe.routes.profile import profile_bp
 from scribe.routes.knowledge import knowledge_bp
 from scribe.routes.rulebooks import rulebooks_bp
 from scribe.routes.plugin import plugin_bp
 from scribe.routes.design import design_bp
 from scribe.routes.design_systems import design_systems_bp
 from scribe.routes.trash import trash_bp
 from scribe.routes.dashboard import dashboard_bp
@@ -91,7 +90,6 @@ def create_app() -> Quart:
    app.register_blueprint(knowledge_bp)
    app.register_blueprint(rulebooks_bp)
    app.register_blueprint(plugin_bp)
    app.register_blueprint(design_bp)
    app.register_blueprint(design_systems_bp)
    app.register_blueprint(trash_bp)
    app.register_blueprint(dashboard_bp)
@@ -1,45 +0,0 @@
 """This install's UI surface — which design system it claims to be built from.
 Kept separate from the design-systems CRUD blueprint on purpose. That one is
 the RECORD: create a system, move a token, read the cascade. This one answers a
 question about the RUNNING APP, and it exists because those are not the same
 question. A design system can be a perfect record of a stylesheet the app never
 loaded.
 The client owns the other half. `utils/designTokens.ts` reads what the browser
 actually resolved, which is the one thing no server can report, and compares it
 to what this endpoint's system declares. So the comparison is
 "does the app agree with its own sheet?" rather than "is the record
 self-consistent?", which would be a tautology — the sheet is generated from the
 record (#2419).
 """
 from quart import Blueprint, jsonify
 from scribe.auth import get_current_user_id, login_required
 from scribe.services import design_systems as ds_svc
 design_bp = Blueprint("design", __name__, url_prefix="/api/design")
@design_bp.get("/ui-system")
@login_required
 async def get_ui_system():
    """The design system this install designated as the source of its own UI.
    Returns `{"design_system_id": int|null, "title": str|null}`.
    Both nulls is the NORMAL case, not an error — an install that has not
    designated one has nothing to check the running app against, and the client
    shows an explanatory empty state (rule #115).
    An id with a null title is the third case and the reason the id is returned
    separately: designated, but deleted or not readable by this caller. Folding
    that into "none designated" is precisely how a feature comes to render a
    reassuring empty state forever.
    """
    uid = get_current_user_id()
    system_id, system = await ds_svc.ui_design_system(uid)
    return jsonify({
        "design_system_id": system_id,
        "title": system.title if system else None,
    })
@@ -37,7 +37,6 @@ from scribe.services.design_cascade import (
    resolve_tokens,
    would_cycle,
 )
 from scribe.services.settings import get_setting
 logger = logging.getLogger(__name__)
@@ -135,40 +134,6 @@ async def get_design_system(user_id: int, design_system_id: int) -> DesignSystem
    return system
 # Which design system this install's own UI is built from. A plain setting
 # rather than a column: no migration, discoverable in the Settings UI (rule
 # #25), and honest about being a per-install claim rather than a property of the
 # system — the same system can be the record for an app that never loads it.
 UI_DESIGN_SYSTEM_SETTING = "ui_design_system_id"
 async def ui_design_system(user_id: int) -> tuple[int | None, DesignSystem | None]:
    """The design system this install says its UI is built from.
    Returns `(id, system)`. Three outcomes, deliberately distinguishable:
    - `(None, None)` — nothing designated. The NORMAL state for any install but
      the one that set it up (rule #115), not an error.
    - `(id, None)` — designated, but gone or not readable by this caller. A
      misconfiguration worth naming rather than silently degrading to "none",
      which is exactly the failure that orphaned the panel this feeds (#2419).
    - `(id, system)` — designated and readable.
    A non-numeric setting value reads as nothing designated: the value is only
    ever written by a `<select>` of real ids, so garbage here means hand-edited
    or stale, and refusing to guess is better than raising on a page load.
    """
    raw = (await get_setting(user_id, UI_DESIGN_SYSTEM_SETTING, "")).strip()
    if not raw:
        return None, None
    try:
        system_id = int(raw)
    except ValueError:
        logger.warning("Ignoring non-numeric %s: %r", UI_DESIGN_SYSTEM_SETTING, raw)
        return None, None
    return system_id, await get_design_system(user_id, system_id)
 async def list_design_systems(user_id: int) -> list[DesignSystem]:
    """The caller's own systems, ordered by title. Empty is normal."""
    async with async_session() as session:
@@ -1,55 +0,0 @@
 """The /api/design blueprint — this install's UI, not the design-system record.
 Modelled on tests/test_routes_design_systems.py. The URL enumeration is
 deliberate rather than a pattern match: this blueprint was repointed from
 `/expectations` to `/ui-system` (#2419), and the failure worth catching is the
 old rule surviving the change — a route nothing serves any more, answering with
 whatever the last handler registered on it did.
 """
 import inspect
 import pytest
 def test_design_blueprint_registered():
    from scribe.routes.design import design_bp
    assert design_bp.name == "design"
    assert design_bp.url_prefix == "/api/design"
 def test_design_blueprint_registered_in_app():
    from scribe.app import create_app
    app = create_app()
    assert "design" in app.blueprints
 def test_the_blueprint_serves_exactly_one_rule():
    from scribe.app import create_app
    app = create_app()
    rules = {
        str(r.rule) for r in app.url_map.iter_rules()
        if r.endpoint.startswith("design.")
    }
    assert rules == {"/api/design/ui-system"}
 def test_the_designation_reader_takes_user_id():
    """The setting is per-user, so the read must be too (rule #78). A
    module-level or admin-scoped read would hand one user another's designation."""
    from scribe.services import design_systems as svc
    assert "user_id" in inspect.signature(svc.ui_design_system).parameters
 def test_the_setting_key_is_the_new_one():
    """Named explicitly because the panel silently reading a retired key is the
    exact shape of the bug this replaced: a feature that renders, and reports
    nothing, forever."""
    from scribe.services.design_systems import UI_DESIGN_SYSTEM_SETTING
    assert UI_DESIGN_SYSTEM_SETTING == "ui_design_system_id"
 def test_the_rulebook_expectation_extractor_is_gone():
    """It was retired with the rulebook it parsed (#2288, #2419). Left importable
    it would keep looking like a live path to the next reader."""
    with pytest.raises(ModuleNotFoundError):
        import scribe.services.design_rulebook_import  # noqa: F401