feat(design): the panel now asks whether the app agrees with its own sheet

Retiring rulebook #2 left the /design drift panel with no data source, and
because its empty state was well-written the feature read as working while it
could only ever render "nothing designated" (#2419). The original question is
genuinely gone: theme.css is generated from design system 2, so checking the
system against a sheet derived from it would be a tautology.

The question that survives is the one no server can answer. A generated sheet
still has to be LOADED and APPLIED, and nothing checked that it was:

  absent      the record declares a token the app doesn't have — the sheet was
              never regenerated after the record changed, or never loaded
  differs     the app has it with another value — a stale 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

Both sides go through the same engine so the comparison is honest: declared
values are set on an offscreen probe and read back, which performs the same
var() substitution the browser already did to the live values. Comparing raw
strings would mark every derived token as drift.

The designation moved with the feature — design_rulebook_id becomes
ui_design_system_id, with a migration deleting the retired key rather than
leaving an inert row. The prose extractor it fed goes too (#2288 said its
runtime role ended when the import landed).

Three orphans of the same shape, found alongside and fixed here:

- darkOverriddenNames hardcoded [data-theme="dark"]. The sheet went dark-first
  months ago, so it matched nothing and the "mode-aware" flag silently left the
  gallery. Now matches the SHAPE of a mode selector, which also holds for an
  install whose modes aren't light and dark.
- groupFor's prefix table never heard of --fs-, so 110 tokens sat under
  "other". Groups now come from the record where there is one; the table can
  only know families that shipped with the product (rule #115).
- The type scale was a hand-written table of nine sizes marked "no token",
  true when written and false since the scale was recorded. Now rendered from
  whatever size tokens the sheet declares, so it can't go stale twice.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs

frontend/src/views/SettingsView.vue

@@ -4,7 +4,7 @@ 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 { listRulebooks } from "@/api/rulebooks";
+import { fetchDesignSystems } from "@/api/designSystems";
 import type { User } from "@/types/auth";
 import PaginationBar from "@/components/PaginationBar.vue";
 import TagInput from "@/components/TagInput.vue";
@@ -32,11 +32,12 @@ 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 rulebook describes this install's design system, for the /design drift
-// panel. Empty = none designated, which is the normal state for a fresh install
-// rather than a misconfiguration — the panel explains itself when unset.
-const designRulebookId = ref("");
-const designRulebooks = ref<{ id: number; title: string }[]>([]);
+// 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,8 +108,8 @@ async function saveKbInject() {
       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 rulebook" — absent rather than zero.
-      design_rulebook_id: designRulebookId.value,
+      // exactly right for "no design system" — absent rather than zero.
+      ui_design_system_id: uiDesignSystemId.value,
     });
     kbInjectSaved.value = true;
     setTimeout(() => (kbInjectSaved.value = false), 2000);
@@ -499,13 +500,15 @@ onMounted(async () => {
   if (allSettings.kb_duplicate_threshold !== undefined) {
     kbDuplicateThreshold.value = allSettings.kb_duplicate_threshold;
   }
-  designRulebookId.value = allSettings.design_rulebook_id ?? "";
+  uiDesignSystemId.value = allSettings.ui_design_system_id ?? "";
   // Best-effort: the picker degrades to "none available" rather than blocking
-  // the whole settings page if rulebooks can't be listed.
+  // the whole settings page if design systems can't be listed.
   try {
-    designRulebooks.value = (await listRulebooks()).map((r) => ({ id: r.id, title: r.title }));
+    designSystems.value = (await fetchDesignSystems()).design_systems.map(
+      (s) => ({ id: s.id, title: s.title }),
+    );
   } catch {
-    designRulebooks.value = [];
+    designSystems.value = [];
   }
   if (allSettings.notify_task_reminders !== undefined) {
     notifyTaskReminders.value = allSettings.notify_task_reminders !== "false";
@@ -1278,19 +1281,22 @@ function formatUserDate(iso: string): string {
           </p>
         </div>
         <div class="field">
-          <label for="design-rulebook">Design-system rulebook</label>
-          <select id="design-rulebook" v-model="designRulebookId" class="input" style="max-width: 22rem">
-            <option value="">None — don't check for design drift</option>
-            <option v-for="rb in designRulebooks" :key="rb.id" :value="String(rb.id)">
-              {{ rb.title }}
+          <label for="ui-design-system">This app's design system</label>
+          <select id="ui-design-system" v-model="uiDesignSystemId" class="input" style="max-width: 22rem">
+            <option value="">None — don't check the interface against a record</option>
+            <option v-for="ds in designSystems" :key="ds.id" :value="String(ds.id)">
+              {{ ds.title }}
             </option>
           </select>
           <p class="field-hint">
-            Which rulebook describes how this app should look. Once set, the
-            <router-link to="/design">Design</router-link> page compares every colour
-            and token your rules name against what the stylesheet actually resolves
-            to, and reports where they disagree. Leave it as None if your rules
-            don't describe a design system — nothing else depends on this.
+            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">