agentgui 1.0.1038 → 1.0.1040

package/.claude/workflows/gui-ai-tell-sweep.js

@@ -0,0 +1,116 @@
+export const meta = {
+  name: 'gui-ai-tell-sweep',
+  description: 'Hunt and fix AI-generated-design tells (gradients, glassmorphism, generic shadows, emoji icons, oversaturated color, boilerplate copy) in the agentgui GUI and its design kit',
+  whenToUse: '35th agentgui sweep, explicit ask: remove tell-tale AI design elements',
+  phases: [
+    { title: 'Hunt', detail: 'one hunter per AI-tell lens against real source in both repos' },
+    { title: 'Verify', detail: 'adversarial verifier per finding' },
+    { title: 'Implement', detail: 'apply confirmed fixes directly to kit/app source' },
+  ],
+}
+
+const KIT = '/config/workspace/design'
+const APP = '/config/workspace/agentgui'
+
+const COMMON = `
+You are auditing the agentgui GUI (a Claude-Code-web-class multi-agent chat product) and its design kit for AI-GENERATED-DESIGN TELLS specifically -- the visual/copy patterns that make a product instantly readable as "an LLM built this UI" rather than a deliberate, human-designed product.
+Repos: app at ${APP} (client: site/app/js/app.js, site/app/js/backend.js, site/app/index.html; server: lib/http-handler.js, server.js), kit at ${KIT} (src/components/*.js, CSS at root or src/styles/, scripts/build.mjs; the kit is the published anentrypoint-design library and OWNS all visual CSS -- the app only wires state/callbacks).
+Reference bar: claude.ai/code (calm, content-first, quiet chrome, generous thread width, restrained tonal palette, no decorative flourish).
+HARD GUARDS:
+- The middot separator, the ellipsis char, and em/en dashes in prose are KEPT product typography -- never flag them.
+- Status is words + CSS-drawn .status-dot-disc -- never propose decorative glyphs, never propose re-adding icon glyphs where ASCII/words already replaced them.
+- GUI fixes land in the KIT (CSS/components); app gets wiring only; index.html gets NO new !important.
+- 34 prior sweeps already fixed: focus-ring tokenization, contrast (light+dark), typography-rhythm, copy-tone vocabulary unification, negative-space (clean 3 runs running), interaction-density, kit-dx docs, perceived-perf. Do not re-file those; this sweep is specifically AI-slop VISUAL/COPY TELLS.
+Read the REAL source before claiming anything; every finding needs file:line evidence. Findings must be IMPLEMENTABLE this session (no rewrites, no new dependencies).
+`
+
+const FINDINGS_SCHEMA = {
+  type: 'object',
+  required: ['findings'],
+  properties: {
+    findings: {
+      type: 'array',
+      items: {
+        type: 'object',
+        required: ['id', 'title', 'evidence', 'fixLocation', 'fix', 'severity'],
+        properties: {
+          id: { type: 'string', description: 'kebab-case slug' },
+          title: { type: 'string' },
+          evidence: { type: 'string', description: 'file:line + what the source shows' },
+          fixLocation: { type: 'string', enum: ['kit', 'app', 'server', 'kit+app'] },
+          fix: { type: 'string', description: 'concrete implementable change' },
+          severity: { type: 'string', enum: ['high', 'medium', 'low'] },
+        },
+      },
+    },
+  },
+}
+
+const VERDICT_SCHEMA = {
+  type: 'object',
+  required: ['isReal', 'reason'],
+  properties: {
+    isReal: { type: 'boolean' },
+    reason: { type: 'string' },
+    refinedFix: { type: 'string' },
+  },
+}
+
+const LENSES = [
+  {
+    key: 'gradient-glow-glass',
+    prompt: `Lens: GRADIENTS / GLASSMORPHISM / GLOW. Grep the kit CSS (and any inline app styling) for linear-gradient/radial-gradient fills on buttons, cards, badges, avatars; backdrop-filter: blur (glassmorphism); box-shadow with saturated colored glows (not neutral elevation shadows); any purple-to-blue or pink-to-orange gradient combo (the textbook AI-generated-SaaS-landing-page tell). These read as templated AI output vs the flat, tonal, restrained claude.ai/code aesthetic. 3-8 findings.`,
+  },
+  {
+    key: 'emoji-generic-icons',
+    prompt: `Lens: EMOJI-AS-ICON + GENERIC ICON TELLS. Grep app.js and kit component source for emoji characters used as icons/decoration (sparkle/rocket/checkmark/lightbulb/fire emoji etc -- distinct from the ALREADY-KEPT middot/ellipsis/dash typography), and for generic "AI product" iconography choices (sparkle/magic-wand icons implying "AI-powered", robot icons, gratuitous rounded-square icon badges). Also check for excessive/uniform border-radius applied to EVERYTHING (buttons, cards, inputs, avatars all sharing one large radius token in a way that reads as a template default rather than a considered scale). 3-8 findings.`,
+  },
+  {
+    key: 'oversaturated-color',
+    prompt: `Lens: COLOR OVERUSE / OVERSATURATION. Audit the kit's color tokens (colors_and_type.css or equivalent) and component usage for oversaturated accent color applied too broadly (every button/link/badge/border colored, no restraint, no tonal hierarchy of neutral-vs-accent), excessive use of the brand accent as a BACKGROUND fill vs restrained use as a signal color, and any place multiple saturated hues compete in the same view (a classic tell of unreviewed AI-generated theming). Compare to claude.ai/code's mostly-neutral palette with color reserved for real signal. 3-8 findings.`,
+  },
+  {
+    key: 'boilerplate-copy',
+    prompt: `Lens: BOILERPLATE AI-ASSISTANT COPY TONE. Sweep user-facing strings in ${APP}/site/app/js/app.js and kit component defaults for generic AI-product boilerplate phrasing: "Welcome!", "Get started!", exclamation-heavy onboarding copy, "Let's dive in", "Unleash the power of...", overly enthusiastic empty-state copy, generic placeholder text like "Type your message here..." that any AI-generated app ships by default instead of copy tailored to THIS product's actual terse, calm, professional voice (see AGENTS.md ASCII-only/no-decorative-glyph/terse-copy conventions already established). 3-8 findings with exact strings.`,
+  },
+  {
+    key: 'layout-uniformity-tells',
+    prompt: `Lens: LAYOUT/COMPONENT UNIFORMITY TELLS. Audit for the "every card looks identical" AI-template tell: uniform card treatment applied indiscriminately regardless of content type/importance (same padding/shadow/radius on a stat card, a message bubble, a settings panel, with no visual hierarchy distinguishing primary content from secondary chrome), centered-everything layouts with excessive whitespace padding that reads as a generic template rather than a considered information-dense product layout, and any component that visually announces "I am a reusable card component" (heavy shadow + heavy radius + heavy padding, stacked identically everywhere) rather than fitting its specific context. 3-8 findings.`,
+  },
+]
+
+phase('Hunt')
+const results = await pipeline(
+  LENSES,
+  l => agent(COMMON + '\n' + l.prompt + '\n\nReturn findings via the structured output schema; ids prefixed ' + l.key + '-.', { label: 'hunt:' + l.key, phase: 'Hunt', schema: FINDINGS_SCHEMA }),
+  (res, l) => {
+    if (!res || !res.findings || !res.findings.length) return []
+    return parallel(res.findings.map(f => () =>
+      agent(
+        COMMON + `\nYou are an ADVERSARIAL VERIFIER. A hunter claims:\nTITLE: ${f.title}\nEVIDENCE: ${f.evidence}\nPROPOSED FIX: ${f.fix}\nfixLocation: ${f.fixLocation}\n\nRead the cited source yourself. Refute it if: the evidence is wrong or stale, the behavior is intentional kept design (especially kept typography: middot/ellipsis/dash), it duplicates an already-fixed finding from a prior sweep, the fix is not implementable this session, or the severity is inflated. Default isReal=false when uncertain. If real, refine the fix to the most concrete minimal change.`,
+        { label: 'verify:' + f.id, phase: 'Verify', schema: VERDICT_SCHEMA }
+      ).then(v => ({ ...f, verdict: v }))
+    ))
+  }
+)
+const confirmed = results.flat().filter(Boolean).filter(f => f.verdict && f.verdict.isReal)
+log(`confirmed ${confirmed.length} findings`)
+
+phase('Implement')
+const byLocation = {}
+for (const f of confirmed) {
+  const loc = f.fixLocation || 'kit'
+  byLocation[loc] = byLocation[loc] || []
+  byLocation[loc].push(f)
+}
+const implGroups = Object.entries(byLocation)
+const implResults = await parallel(implGroups.map(([loc, items]) => () =>
+  agent(
+    `You are implementing confirmed UX findings directly in source. Repos: app at ${APP}, kit at ${KIT}. This group's fixLocation is "${loc}".\nApply EVERY fix below directly to real source files. Be surgical -- minimal diffs, no unrelated refactors, no new dependencies.\n\n` +
+    items.map(f => `- [${f.id}] (${f.severity}) ${f.title}\n  evidence: ${f.evidence}\n  fix: ${f.fix}`).join('\n\n') +
+    `\n\nAfter editing, report a short list of exactly which files you changed and how.`,
+    { label: 'implement:' + loc, phase: 'Implement' }
+  )
+))
+
+return { confirmed: confirmed.map(f => ({ id: f.id, title: f.title, severity: f.severity, fixLocation: f.fixLocation, evidence: f.evidence, fix: f.verdict.refinedFix || f.fix })), implResults }

package/.gm/prd.yml

@@ -2901,3 +2901,34 @@
   notes: 'standing rule: kit changes only reach the shipped app after node scripts/build.mjs + copy dist into site/app/vendor/anentrypoint-design + push kit'
   status: completed
   witness: node scripts/build.mjs in /config/workspace/design completed with 0 errors; dist/247420.css grew 454635->456041 bytes, dist/247420.js grew 392679->393309 bytes, both copied into agentgui site/app/vendor/anentrypoint-design/. Browser-witnessed the live app loading the new vendor bundle (network log shows 200 fetch of vendor/anentrypoint-design/247420.js and .css, 0 pageErrors) and a specific new rule (.ds-select min-height:32px) computing correctly in the live DOM.
+- id: ai-tell-gradients
+  notes: audit design kit + app CSS for purple-blue/rainbow gradient fills, glassmorphism blur, generic drop-shadow overuse - hallmark AI-generated UI tells
+  status: completed
+  witness: 'codesearch: grep -n linear-gradient site/app/vendor/anentrypoint-design/247420.css -> 15 hits, all functional (skeleton shimmer x6 tonal --bg-2/--bg-3, breadcrumb fade mask, rail-purple dash pattern, checkbox indeterminate mark, media-preview alpha checkerboard, faint grid-overlay) - zero decorative hero/rainbow gradients. 35th-run commit 1702fa8 already stripped the prior blur-chrome/rainbow-border tells; this pass confirms no gradient regressions.'
+- id: ai-tell-emoji-icons
+  notes: sweep for emoji-as-icon usage and generic rounded-everything corner-radius patterns that read as templated AI output
+  status: completed
+  witness: 'exec: grep -noP unicode-emoji-range site/app/js/app.js site/app/vendor/anentrypoint-design/247420.js -> zero matches. AGENTS.md ASCII-only glyph policy (no decorative glyph) already enforced across 19+ prior sweeps; status-disc is CSS-drawn, not emoji.'
+- id: ai-tell-generic-copy
+  notes: sweep copy for generic AI-assistant boilerplate phrasing (Welcome!, Get started!, excessive exclamation) vs the established terse product voice
+  status: completed
+  witness: 'exec: grep -noE ''Welcome!|Get started!|Oops!|Awesome!|Great!'' site/app/js/app.js site/app/index.html -> zero matches; grep -o boilerplate-exclamation-strings -> zero matches. Copy voice is terse/product (established across 12th-34th run copy-tone fixes).'
+- id: ai-tell-color-overuse
+  notes: check for oversaturated accent overuse (everything colored) vs restrained tonal hierarchy
+  status: completed
+  witness: 'exec: grep -c ''var(--accent)'' 247420.css -> 159, all through the semantic --accent token (not raw hex), applied selectively per prior 22nd-run accent-ink contrast fix + restrained tonal-hierarchy work across 28th/31st-34th runs. No raw saturated-everything pattern found.'
+- id: wfgy-critique-pass
+  notes: run gui-ux-craft-style multi-lens workflow against the live GUI targeting AI-design-tell removal specifically, confirm+implement findings
+  status: completed
+  witness: 'Workflow wf_a53b7d8f-27b (gui-ai-tell-sweep, 26 agents, 25 done/1 verify-connection-error, 200 tool calls, 1.34M tokens): 5 hunter lenses (gradient-glow-glass, emoji-generic-icons, oversaturated-color, boilerplate-copy, layout-uniformity-tells) -> 20 findings -> adversarial verify -> 11 confirmed, 9 refuted (kept-typography/already-deliberate false positives correctly rejected, e.g. status-disc-pulse triplicate, --sun retired claim, radius-scale uniformity). Implemented directly: design/app-shell.css (shadow-drift->--shadow-overlay, 3x meter-fill accent->--fg-3, checkbox accent->--fg, drag-over triple-stack->single border, skip-to-main accent->neutral fg/bg, dead .empty-state child rules + dead .ds-panel-trio/.ds-panel-grid removed), design/chat.css (session-unread accent->--fg-2), design/src/components/agent-chat.js (empty-state copy de-boilerplated + comment reworded), agentgui site/app/js/app.js (keyboardPanel/preferencesPanel kind:wide for visual-weight hierarchy).'
+- id: kit-rebuild-vendor
+  notes: rebuild design kit dist and re-vendor into site/app/vendor after any kit CSS/JS changes
+  status: completed
+  witness: 'exec: cd /config/workspace/design && node scripts/build.mjs -> [247420] css scoped+bundled 441.6kb, js minified 383.3kb, lint-glyphs/lint-null-children/lint-classes/lint-inline-styles all OK. cp dist/247420.{js,css} into /config/workspace/agentgui/site/app/vendor/anentrypoint-design/ - git status confirms both vendor files modified alongside app.js and .gm/prd.yml.'
+- id: browser-witness-final
+  notes: browser-witness all changes live, 0 console errors, before/after screenshots
+  status: completed
+  witness: 'browser dispatch against live http://localhost:3012/gm/?token=... (real running bun server.js, PORT 3012): page.evaluate read live CSSOM post-fix -> barchartFillBg:''var(--fg-3)'', dragOverCss:''.ds-247420 .drag-over { border: 2px dashed var(--accent); }'' (single accent channel, tint+inset-shadow removed), skipCss neutral ''background: var(--fg); color: var(--bg);'', ctxMenuShadow:''var(--shadow-overlay)''. debug.pageErrors:[] (zero real page errors; the one console ''error'' entry is a pre-existing unrelated CSP inline-script warning from index.html''s boot script, not caused by this session''s changes). title:''agentgui'', bodyLen:1016 (app rendered, not blank).'
+- id: ci-green-push
+  notes: push kit + agentgui changes, confirm CI green both repos
+  status: pending

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.1038",
+  "version": "1.0.1040",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/site/app/js/app.js

@@ -2735,7 +2735,7 @@ function historyMain() {
       // lone spinner collapsing the slowest pane in the product.
       : h('div', { key: 'loading' }, EventList({ items: [], loading: true,
           loadingText: state.eventsSlow ? 'Indexing your Claude history — the first load can take a minute…' : 'loading events…' }));
-    return [reconnectAlert(), head, actions, Panel({ title: 'events', children: body })].filter(Boolean);
+    return [reconnectAlert(), head, actions, Panel({ title: 'events', kind: 'wide', children: body })].filter(Boolean);
   }
 
   if (!state.expandedEvents) state.expandedEvents = new Set();
@@ -2777,7 +2777,7 @@ function historyMain() {
     ].filter(Boolean),
   });
   if (filteredEvents.length === 0) {
-    return [reconnectAlert(), head, actions, Panel({ title: 'events', children: [
+    return [reconnectAlert(), head, actions, Panel({ title: 'events', kind: 'wide', children: [
       h('div', { key: 'evmeta' }, meta),
       h('div', { key: 'evfp' }, filterPills),
       h('div', { key: 'nofilt', class: 'lede empty-state', role: 'status' },
@@ -2808,6 +2808,7 @@ function historyMain() {
     actions,
     Panel({
       title: plural(total, 'event') + (ef !== 'all' ? ' (' + ef + ' filter)' : '') + (hiddenCount > 0 ? ' (showing last ' + shown.length + '; ' + hiddenCount + ' older)' : ''),
+      kind: 'wide',
       children: [h('div', { key: 'evmeta' }, meta), h('div', { key: 'evfp' }, filterPills), eventControls, EventList({
         items: shown.map((e, i) => {
           // Stable key: prefer the server-assigned event index, else the
@@ -3189,6 +3190,7 @@ function settingsMain() {
     Panel({
       id: 'appearance',
       title: 'appearance',
+      kind: 'wide',
       children: [
         h('div', { key: 'apl', class: 't-meta agentgui-field-mb' }, 'theme - follows the OS in auto, or pick light/dark.'),
         ThemeToggle({ key: 'tt' }),
@@ -3241,6 +3243,7 @@ function keyboardPanel() {
   return Panel({
     id: 'keyboard',
     title: 'keyboard',
+    kind: 'wide',
     children: ShortcutList({ shortcuts: SHORTCUTS }),
   });
 }
@@ -3275,6 +3278,7 @@ function preferencesPanel() {
   return Panel({
     id: 'data',
     title: 'data',
+    kind: 'wide',
     children: [
       // The server version lives in the server panel; carry only a build stamp
       // here, and only when it differs from the server version.

package/site/app/vendor/anentrypoint-design/247420.css

@@ -230,12 +230,11 @@
   --ease-exit:   cubic-bezier(0.4, 0, 1, 1);
 
   /* Print texture — the signature surface treatment. --grain is a tiled
-     fractal-noise data-URI; --halftone is a dot screen. Both are opt-in via
-     .ds-grain / .ds-halftone utilities and tuned faint so type stays crisp. */
+     fractal-noise data-URI, opt-in via the .ds-grain utility and tuned faint
+     so type stays crisp. */
   --grain-opacity:    0.05;
   --grain-blend:      multiply;
   --grain:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  --halftone-size:    6px;
   /* Offset-ink registration — the small print-mark offset used on editorial
      edges (panel spine, expo numbering). A literal length, not a color. */
   --ink-offset:  3px;
@@ -745,8 +744,7 @@
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
   padding: 10px var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 
 /* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
@@ -759,8 +757,7 @@
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
   padding: 8px var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 .ds-247420 .app-chrome > .app-topbar,
 .ds-247420 .app-chrome > .app-crumb {
@@ -1147,14 +1144,6 @@
   transition: box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-snap) var(--ease),
     transform var(--dur-base) var(--ease-spring);
 }
-/* Vercel-style card lift: any panel sitting inside a density grid (trio/grid)
-   gets a restrained hover escalation — the standalone/full-width panel stays
-   flat so page chrome doesn't jitter on scroll-adjacent hover. */
-.ds-247420 .ds-panel-trio > .panel:hover, .ds-247420 .ds-panel-grid > .panel:hover {
-  box-shadow: var(--shadow-2);
-  border-color: var(--rule-strong);
-  transform: translateY(-2px);
-}
 /* Editorial accent spine — an opt-in printed-ink rule down the left edge that
    reads as a magazine pull-quote bar, not a glow card. */
 .ds-247420 .panel.panel-spine {
@@ -1167,7 +1156,7 @@
   border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
 }
 .ds-247420 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
-.ds-247420 .panel.panel-wide   { background: transparent; box-shadow: none; }
+.ds-247420 .panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
 .ds-247420 .panel-head {
   display: flex; align-items: baseline; justify-content: space-between;
   /* Shares the .panel-body 16px side padding so the caps label and the body
@@ -1310,16 +1299,6 @@
   max-width: var(--measure-wide);
   position: relative; isolation: isolate;
 }
-/* Restrained depth wash, not a marketing glow-gradient: a single very-low-
-   opacity accent-ink radial anchored top-right, sitting under the grain/
-   halftone texture (z-index -1, same isolation trick as .ds-hero-aside::after)
-   so it reads as ambient light rather than a colored blob. Token-only. */
-.ds-247420 .ds-hero::before {
-  content: ''; position: absolute; z-index: -1;
-  top: -10%; right: -10%; width: 60%; height: 140%;
-  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent-ink) 10%, transparent), transparent 70%);
-  pointer-events: none;
-}
 .ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
 .ds-247420 .ds-hero-body  { grid-area: body; }
 /* The right column carries its own visual weight — a spined, halftone-
@@ -1339,13 +1318,6 @@
   width: var(--bw-chunk); background: var(--accent);
   border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
 }
-.ds-247420 .ds-hero-aside::after {
-  content: ''; position: absolute; inset: 0; z-index: -1;
-  pointer-events: none;
-  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
-  background-size: var(--halftone-size) var(--halftone-size);
-  opacity: 0.1; border-radius: inherit;
-}
 .ds-247420 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
 .ds-247420 .ds-hero-stat {
   font-family: var(--ff-mono); font-size: var(--fs-sm);
@@ -1421,16 +1393,6 @@
   opacity: var(--grain-opacity);
   mix-blend-mode: var(--grain-blend);
 }
-/* Halftone dot screen — a heavier print tell for accent panels/hero. */
-.ds-247420 .ds-halftone { position: relative; isolation: isolate; }
-.ds-247420 .ds-halftone::after {
-  content: ''; position: absolute; inset: 0; z-index: -1;
-  pointer-events: none;
-  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
-  background-size: var(--halftone-size) var(--halftone-size);
-  opacity: 0.12;
-}
-
 /* ============================================================
    Marquee / ticker — brand kinetic device ("always open 24/7"). The track
    holds two identical runs so the loop is seamless; reduced-motion freezes it
@@ -1655,8 +1617,9 @@
 }
 .ds-247420 .ds-barchart-fill {
   height: 100%; width: var(--bar-pct, 0%);
-  background: var(--accent); border-radius: var(--r-pill);
+  background: var(--fg-3); border-radius: var(--r-pill);
 }
+.ds-247420 .ds-barchart-fill.is-active { background: var(--accent); }
 .ds-247420 .ds-barchart-value {
   font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3);
   font-variant-numeric: tabular-nums;
@@ -2076,15 +2039,15 @@
 .ds-247420 .ds-file-row:active { transform: translateY(1px); }
 .ds-247420 .ds-file-row.active { background: var(--accent-tint); border-color: var(--accent); }
 .ds-247420 .ds-file-row[data-file-type="dir"]      { border-left-width: 3px; border-left-color: var(--accent); }
-.ds-247420 .ds-file-row[data-file-type="image"]    { border-left-width: 3px; border-left-color: var(--mascot); }
-.ds-247420 .ds-file-row[data-file-type="video"]    { border-left-width: 3px; border-left-color: var(--purple-2); }
-.ds-247420 .ds-file-row[data-file-type="audio"]    { border-left-width: 3px; border-left-color: var(--sky); }
-.ds-247420 .ds-file-row[data-file-type="code"]     { border-left-width: 3px; border-left-color: var(--green-2); }
-.ds-247420 .ds-file-row[data-file-type="text"]     { border-left-width: 3px; border-left-color: var(--ink-3); }
-.ds-247420 .ds-file-row[data-file-type="archive"]  { border-left-width: 3px; border-left-color: var(--flame); }
-.ds-247420 .ds-file-row[data-file-type="document"] { border-left-width: 3px; border-left-color: var(--amber, var(--sun)); }
-.ds-247420 .ds-file-row[data-file-type="symlink"]  { border-left-width: 3px; border-left-color: var(--purple); }
-.ds-247420 .ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--fg-3); }
+.ds-247420 .ds-file-row[data-file-type="image"],
+.ds-247420 .ds-file-row[data-file-type="video"],
+.ds-247420 .ds-file-row[data-file-type="audio"],
+.ds-247420 .ds-file-row[data-file-type="code"],
+.ds-247420 .ds-file-row[data-file-type="text"],
+.ds-247420 .ds-file-row[data-file-type="archive"],
+.ds-247420 .ds-file-row[data-file-type="document"],
+.ds-247420 .ds-file-row[data-file-type="symlink"],
+.ds-247420 .ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--rule); }
 
 /* Row internals — these are the classes FileRow actually renders. */
 .ds-247420 .ds-file-row .title {
@@ -2155,13 +2118,13 @@
   transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
 }
 .ds-247420 .is-marked > .ds-check-box,
-.ds-247420[aria-checked="true"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
+.ds-247420[aria-checked="true"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
 .ds-247420 .is-marked > .ds-check-box::after,
 .ds-247420[aria-checked="true"] > .ds-check-box::after {
   content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
   border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
 }
-.ds-247420[aria-checked="mixed"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
+.ds-247420[aria-checked="mixed"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
 .ds-247420[aria-checked="mixed"] > .ds-check-box::after {
   content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: var(--r-hair);
 }
@@ -2299,7 +2262,7 @@
 /* Stage — the scrollable content column. */
 .ds-247420 .ds-file-stage {
   display: flex; flex-direction: column; gap: var(--space-3);
-  width: 100%; max-width: 920px; margin: 0 auto;
+  width: 100%; max-width: var(--measure-wide); margin: 0 auto;
   padding: var(--space-2) var(--space-3) var(--space-4);
 }
 /* When the stage is the app-main child, the shell already supplies top
@@ -2308,7 +2271,7 @@
 .ds-247420 .app-main .ds-file-stage { padding-top: 0; }
 
 /* Full-width files stack: the stage's space-3 vertical beat without its
-   920px cap/auto-margins, so the roots / toolbar / bulkbar / uploads / grid
+   --measure-wide cap/auto-margins, so the roots / toolbar / bulkbar / uploads / grid
    bands keep one consistent rhythm instead of touching edge-to-edge. Carries
    the same side/bottom padding as .ds-file-stage (top collapses the same way
    when mounted directly under .app-main, which already supplies top padding)
@@ -2464,9 +2427,10 @@
 }
 .ds-247420 .ds-upload-fill {
   display: block; height: 100%; width: 0;
-  background: var(--accent); border-radius: var(--r-pill);
+  background: var(--fg-3); border-radius: var(--r-pill);
   transition: width var(--dur-base) var(--ease);
 }
+.ds-247420 .ds-upload-fill.is-active { background: var(--accent); }
 /* Indeterminate: percent is unknown mid-transfer (fetch gives no chunk-level
    progress) — a sliding marquee bar reads as "working", not stuck at 0%. */
 .ds-247420 .ds-upload-bar.indeterminate .ds-upload-fill {
@@ -2531,7 +2495,6 @@
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
   background: color-mix(in oklab, var(--ink) 55%, transparent);
-  backdrop-filter: blur(3px);
 }
 @media (prefers-reduced-motion: no-preference) {
   .ds-247420 .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
@@ -2993,7 +2956,7 @@
 }
 .ds-247420 .chat-msg:hover .chat-image,
 .ds-247420 .chat-image:hover {
-  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
+  border-color: var(--rule);
 }
 .ds-247420 .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
 .ds-247420 .chat-image .cap,
@@ -3008,12 +2971,12 @@
   max-width: min(100%, 360px);
   transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
 }
-.ds-247420 .chat-file:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
+.ds-247420 .chat-file:hover { background: var(--bg-3); }
 .ds-247420 .chat-file .glyph {
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
-  background: color-mix(in oklab, var(--accent) 18%, transparent);
-  color: var(--accent-ink); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
+  background: var(--bg-3);
+  color: var(--fg-2); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
 }
 .ds-247420 .chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ds-247420 .chat-file .name {
@@ -3034,7 +2997,7 @@
   border-radius: var(--r-1); overflow: hidden; max-width: min(100%, 480px);
   transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
-.ds-247420 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
+.ds-247420 .chat-msg:hover .chat-pdf { border-color: var(--rule); }
 .ds-247420 .chat-pdf-head {
   display: flex; align-items: center; gap: 10px; padding: 10px 14px;
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -3061,7 +3024,6 @@
 .ds-247420 .chat-msg:hover .chat-link,
 .ds-247420 .chat-link:hover {
   background: var(--bg-3);
-  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
 }
 .ds-247420 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .ds-247420 .chat-link .thumb,
@@ -3094,7 +3056,7 @@
   transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
   position: relative;
 }
-.ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
+.ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); transform: scale(1.06); }
 .ds-247420 .chat-reactions .rxn.you {
   background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
@@ -3422,9 +3384,7 @@
 
 /* Drag-over state */
 .ds-247420 .drag-over {
-  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
   border: 2px dashed var(--accent);
-  box-shadow: inset 0 0 0 1px var(--accent);
 }
 
 /* Drag-ghost (semi-transparent dragging element) */
@@ -3480,7 +3440,7 @@
   background: var(--bg-2);
   border: 1px solid var(--rule);
   border-radius: var(--r-2);
-  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  box-shadow: var(--shadow-overlay);
   min-width: 160px;
   z-index: calc(var(--z-overlay, 1000) + 1);
   padding: 4px 0;
@@ -3762,7 +3722,7 @@
 /* Skip to main content link */
 .ds-247420 .skip-to-main {
   position: absolute; top: -40px; left: 0;
-  background: var(--accent); color: var(--accent-fg);
+  background: var(--fg); color: var(--bg);
   padding: 8px 16px; border-radius: var(--r-1);
   text-decoration: none; z-index: var(--z-overlay, 1000);
 }
@@ -3850,25 +3810,6 @@
    Empty State & Loading States
    -------------------------------------------------------------- */
 
-.ds-247420 .empty-state {
-  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
-  padding: var(--space-8) var(--space-4);
-  text-align: center; color: var(--fg-3);
-}
-.ds-247420 .empty-state--inline {
-  flex-direction: row; align-items: center; gap: var(--space-2);
-  padding: var(--space-2) 0; text-align: left;
-}
-.ds-247420 .empty-state-icon {
-  font-size: 48px; opacity: 0.4;
-}
-.ds-247420 .empty-state-title {
-  font-size: var(--fs-lg); font-weight: 600; color: var(--fg-2);
-}
-.ds-247420 .empty-state-body {
-  font-size: var(--fs-sm); max-width: 40ch;
-}
-
 /* Skeleton loading state */
 .ds-247420 .skeleton {
   background: linear-gradient(
@@ -3902,7 +3843,7 @@
   border-radius: var(--r-2);
   padding: var(--space-3) var(--space-4);
   max-width: 320px;
-  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  box-shadow: var(--shadow-overlay);
   z-index: calc(var(--z-overlay, 1000) + 10);
 }
 
@@ -4649,7 +4590,8 @@
 .ds-247420 .ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
 .ds-247420 .ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ds-247420 .ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: var(--r-hair); height: 6px; overflow: hidden; }
-.ds-247420 .ds-bar-fill { background: var(--accent); height: 100%; border-radius: var(--r-hair); }
+.ds-247420 .ds-bar-fill { background: var(--fg-3); height: 100%; border-radius: var(--r-hair); }
+.ds-247420 .ds-bar-fill.is-active { background: var(--accent); }
 .ds-247420 .ds-bar-row-value { flex-shrink: 0; color: var(--fg-2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 400px) {
   .ds-247420 .ds-bar-row-label { width: 72px; }
@@ -4762,13 +4704,6 @@
 @media (max-width: 760px) {
   .ds-247420 .ds-panel-duo { grid-template-columns: 1fr; }
 }
-/* Wide-viewport density: auto-fit grid so panel COUNT tracks actual children
-   instead of a hardcoded column number — 2 children sit 2-up, 5 wrap to a
-   third row, never an arbitrary 3-card reflex (same auto-fit/minmax pattern
-   as .ds-tile-grid). Panels floor at 280px before wrapping, so ultra-wide
-   screens still get more columns than a fixed repeat(3, ...) ever allowed. */
-.ds-247420 .ds-panel-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
-.ds-247420 .ds-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
 /* wide dense rows/tables scroll inside their panel, never the page */
 .ds-247420 .ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
 
@@ -7176,7 +7111,7 @@
 .ds-247420 .ds-session-agent { font-size: var(--fs-tiny); color: var(--fg-3); }
 /* New-activity cue is a hollow accent RING so it stays shape-distinct from the
    running live disc (a solid pulsing accent dot) for colour-blind / reduced-motion users. */
-.ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--accent); display: inline-block; }
+.ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); display: inline-block; }
 .ds-247420 .ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-247420 .ds-session-state-error { color: var(--flame); }
 
@@ -7232,6 +7167,17 @@
 .ds-247420 .ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-2); }
 .ds-247420 .ds-context .row .sub { font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-247420 .ds-context-actions { display: flex; gap: var(--space-2); }
+/* Lighter fact groups for secondary context blocks (conversation/last turn/
+   recent files): a small caps label + Row list with no card chrome, so a
+   2-row fact doesn't compete visually with the primary bordered panel above
+   it. Separated from neighbors by a hairline rule, not a border box. */
+.ds-247420 .ds-context-group { padding-top: var(--space-3); border-top: var(--bw-hair) solid var(--rule); }
+.ds-247420 .ds-context-group-label {
+  font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3);
+  letter-spacing: var(--tr-caps); text-transform: uppercase;
+  padding: 0 0 var(--space-2);
+}
+.ds-247420 .ds-context-group .row + .row { margin-top: 2px; }
 
 /* ============================================================================
    Cohesion sweep (gui-cohesion.js): one-product polish across surfaces.