agentgui 1.0.1037 → 1.0.1039

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,27 @@
   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: pending
+- 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: pending
+- 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: pending
+- id: ai-tell-color-overuse
+  notes: check for oversaturated accent overuse (everything colored) vs restrained tonal hierarchy
+  status: pending
+- 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: pending
+- id: kit-rebuild-vendor
+  notes: rebuild design kit dist and re-vendor into site/app/vendor after any kit CSS/JS changes
+  status: pending
+- id: browser-witness-final
+  notes: browser-witness all changes live, 0 console errors, before/after screenshots
+  status: pending
+- 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.1037",
+  "version": "1.0.1039",
   "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' }),

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 {
@@ -1167,7 +1164,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 +1307,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 +1326,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 +1401,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
@@ -2076,15 +2046,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 {
@@ -2299,7 +2269,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 +2278,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)
@@ -2531,7 +2501,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 +2962,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 +2977,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 +3003,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 +3030,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 +3062,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);
@@ -7232,6 +7200,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.