diff --git a/.gitignore b/.gitignore
index 58b89376a..0acac1441 100644
--- a/.gitignore
+++ b/.gitignore
@@ -240,6 +240,9 @@ app/desktop/stats.html
 **/__pycache__/
 *.pyc
 
+# TypeScript build artifacts (tsc -b)
+*.tsbuildinfo
+
 *.local
 
 # L3 真实测试证据（scripts/e2e/run-real-e2e-lane.sh 输出）；README.md 保留
diff --git a/app/mobile-rn/src/theme/tokens.ts b/app/mobile-rn/src/theme/tokens.ts
index 25e723828..5fda412f3 100644
--- a/app/mobile-rn/src/theme/tokens.ts
+++ b/app/mobile-rn/src/theme/tokens.ts
@@ -237,7 +237,7 @@ export const agentHubThemes = {
       warningSoft: 'rgba(212, 170, 76, 0.08)', // --warning-bg
       danger: '#e87070', // --danger（--td-danger）
       dangerSoft: 'rgba(232, 112, 112, 0.06)', // --danger-bg
-      onAccent: '#f4f5ff', // --primary-foreground（--td-ink-on-plum）
+      onAccent: '#0b1b26', // --primary-foreground（--td-ink-on-plum）
       onDanger: '#ffffff', // --destructive-foreground
       scrim: 'rgba(0, 0, 0, 0.48)', // 登记：mobile-only 遮蔽（CSS 无 --td-scrim）
     },
diff --git a/app/shared/src/chatview/components/AgentGroup.tsx b/app/shared/src/chatview/components/AgentGroup.tsx
index f6dab614c..6604a636c 100644
--- a/app/shared/src/chatview/components/AgentGroup.tsx
+++ b/app/shared/src/chatview/components/AgentGroup.tsx
@@ -7,6 +7,7 @@ import { roleInitial } from '../design/roles'
 import MarkdownContent from '../../ui/Markdown'
 import { MessageDisplayMeta } from './MessageDisplayMeta'
 import { isAgentItemStreaming } from './streaming'
+import { Message, MessageAvatar, MessageContent } from '../../shadcn/ui/message'
 
 const evidenceIconMap: Record<string, typeof IconFile> = {
   file: IconFile,
@@ -224,31 +225,29 @@ export const AgentGroup = memo(function AgentGroup({ item, chatMode, onAgentClic
 
   if (chatMode === 'dm') {
     return (
-      <div className={enter ? 'grp-row grp-enter' : 'grp-row'}>
-        <div
-          className="dm-avatar"
+      <Message className={enter ? 'agent-row grp-enter' : 'agent-row'}>
+        <MessageAvatar
+          className="dm-avatar self-start"
           onClick={onAgentClick ? (e) => onAgentClick(item.agent, e.currentTarget) : undefined}
           style={onAgentClick ? { cursor: 'pointer' } : undefined}
         >
           {avatar}
-        </div>
-        <div className="grp-content">{orderedBodyContent ? orderedBody : body}</div>
-        <div className="dm-spacer" aria-hidden="true"><div className="ag-av">&nbsp;</div></div>
-      </div>
+        </MessageAvatar>
+        <MessageContent className="grp-content">{orderedBodyContent ? orderedBody : body}</MessageContent>
+      </Message>
     )
   }
 
   return (
-    <div className={enter ? 'grp-row grp-enter' : 'grp-row'}>
-      <div
-        className="dm-avatar"
+    <Message className={enter ? 'agent-row grp-enter' : 'agent-row'}>
+      <MessageAvatar
+        className="dm-avatar self-start"
         onClick={onAgentClick ? (e) => onAgentClick(item.agent, e.currentTarget) : undefined}
         style={onAgentClick ? { cursor: 'pointer' } : undefined}
       >
         {avatar}
-      </div>
-      <div className="grp-content">{orderedBodyContent ? orderedBody : body}</div>
-      <div className="dm-spacer" aria-hidden="true"><div className="ag-av">&nbsp;</div></div>
-    </div>
+      </MessageAvatar>
+      <MessageContent className="grp-content">{orderedBodyContent ? orderedBody : body}</MessageContent>
+    </Message>
   )
 })
diff --git a/app/shared/src/chatview/components/RowItem.css b/app/shared/src/chatview/components/RowItem.css
index 58c88f58d..065282f32 100644
--- a/app/shared/src/chatview/components/RowItem.css
+++ b/app/shared/src/chatview/components/RowItem.css
@@ -5,8 +5,11 @@
 
 .row-item {
   display:flex; flex-direction:column;
-  background:var(--td-surface); border:1px solid var(--td-line); margin:0;
-  border-radius:var(--chat-r-md);
+  background:var(--td-surface);
+  border:1px solid color-mix(in oklch, var(--td-ink) 12%, transparent);
+  margin:0;
+  border-radius:12px;
+  box-shadow:0 1px 2px rgb(0 0 0 / 0.03);
   overflow:hidden;
 }
 .row-item.selected { outline: 2px solid var(--td-plum); outline-offset: -2px }
@@ -30,24 +33,22 @@
 
 .card-stack > .row-item {
   width:100%;
-  border-radius:0;
+  border-radius:12px;
 }
-.card-stack > .row-item + .row-item { border-top:none; margin-top:-1px }
-.card-stack > .row-item:first-child { border-radius:var(--chat-r-md) var(--chat-r-md) 0 0 }
-.card-stack > .row-item:last-child { border-radius:0 0 var(--chat-r-md) var(--chat-r-md) }
-.card-stack > .row-item:only-child { border-radius:var(--chat-r-md) }
+.card-stack > .row-item + .row-item { margin-top:0 }
+.card-stack > .row-item:only-child { border-radius:12px }
 .card-stack > .row-item.route { margin:0 }
 
 .row-hd {
   display:flex; align-items:center; gap:var(--chat-sp-xxs);
-  padding:var(--chat-sp-xs) var(--chat-sp-10); cursor:pointer; user-select:none;
-  font:var(--chat-label); min-height:28px; line-height:1.3;
+  padding:8px 12px; cursor:pointer; user-select:none;
+  font:500 0.78125rem/1.35 var(--td-font); min-height:34px;
   transition:background var(--chat-dur) ease;
   border-radius:inherit;
   border:none; background:none; color:inherit; text-align:inherit;
   width:100%;
 }
-.row-hd:hover { background:var(--td-surface-3) }
+.row-hd:hover { background:color-mix(in oklch, var(--td-ink) 4%, transparent) }
 .row-hd:focus-visible { outline:none; box-shadow:var(--focus-ring) }
 
 /* Artifact rows are preview triggers, not expandable empty file rows. */
@@ -65,7 +66,7 @@
 .row-item.running > .row-hd:hover,
 .row-item:not(.collapsible) > .row-hd:hover { background:transparent }
 
-.row-icon { color:var(--td-ink-muted); flex-shrink:0; width:var(--icon-size); text-align:center; font-size:0.875rem }
+.row-icon { color:var(--td-ink-muted); flex-shrink:0; width:15px; text-align:center; font-size:0.875rem }
 .row-label { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
 .row-extra { color:var(--td-ink-subtle); font:var(--chat-label-xs); flex-shrink:0 }
 .row-chevron { color:var(--td-ink-subtle); transition:transform var(--chat-dur) ease; flex-shrink:0; font-size:0.6875rem }
@@ -73,9 +74,9 @@
 .row-item:not(.collapsible) > .row-hd .row-chevron { display:none }
 
 .row-bd {
-  margin-left:19px; padding:var(--chat-sp-2) var(--chat-sp-md) var(--chat-sp-sm) var(--chat-sp-16);
-  font:var(--chat-body); color:var(--td-ink-muted); line-height:1.55;
-  border-left:1px solid var(--td-line);
+  margin-left:20px; padding:6px 14px 12px;
+  font:400 0.78125rem/1.6 var(--td-font); color:var(--td-ink-muted);
+  border-left:1px solid color-mix(in oklch, var(--td-ink) 10%, transparent);
   overflow:hidden;
   animation:rowBdExpand var(--chat-dur) var(--td-ease);
 }
diff --git a/app/shared/src/chatview/components/Transcript.css b/app/shared/src/chatview/components/Transcript.css
index c7f74eb1f..e4f9e5866 100644
--- a/app/shared/src/chatview/components/Transcript.css
+++ b/app/shared/src/chatview/components/Transcript.css
@@ -2,7 +2,19 @@
    TRANSCRIPT — unified grp-row (DM + Group share same flex layout)
    ══════════════════════════════════════════════════════════════════════ */
 
-.transcript { display:flex; flex-direction:column; gap:0; min-width:0; flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth; scrollbar-gutter:stable; scrollbar-width:thin; padding:0 0 0 10px }
+.transcript {
+  display:flex;
+  flex-direction:column;
+  gap:0;
+  min-width:0;
+  flex:1;
+  min-height:0;
+  overflow-y:auto;
+  scroll-behavior:smooth;
+  scrollbar-gutter:stable;
+  scrollbar-width:thin;
+  padding:24px max(18px, calc((100% - 780px) / 2)) 12px;
+}
 
 /* ── Scroll-to-bottom button ────────────────────────────────────────── */
 .scroll-to-bottom-btn {
@@ -226,20 +238,24 @@
   font-weight:400;
 }
 
-/* ── Row — symmetric: [avatar-l] [content flex:1] [avatar-r] ────────
-   Density: row rhythm uses chat density tokens (12px step), not base 20/24. */
-.grp-row {
-  display:flex; gap:var(--chat-sp-sm); align-items:flex-start;
-  margin-bottom:var(--chat-sp-md);
+/* ── Rows ─────────────────────────────────────────────────────────────
+   One reading column, generous vertical rhythm, avatar-led alignment. */
+.agent-row,
+.user-row-right {
+  display:flex;
+  gap:12px;
+  align-items:flex-start;
+  margin-bottom:26px;
 }
-.grp-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--chat-sp-2) }
+.user-row-right { justify-content:flex-end }
+.grp-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px }
 
 .card-stack {
   align-self:flex-start;
   display:flex;
   flex-direction:column;
-  gap:0;
-  width:min(86%, 820px);
+  gap:8px;
+  width:100%;
   max-width:100%;
   min-width:0;
 }
@@ -247,20 +263,15 @@
 /* first child aligns flush to avatar top */
 .grp-content > :first-child { margin-top:0 }
 
-/* Bubbles sit on a stable reading column; user replies still shrink right. */
-.grp-content > .agent-bubble { align-self:flex-start; max-width:72% }
-.grp-content > .user-bubble { align-self:flex-end; max-width:68% }
-
 .bubble-group {
   align-self:flex-start;
   display:flex;
   flex-direction:column;
-  gap:var(--chat-sp-xxs);
-  width:min(86%, 820px);
+  gap:6px;
+  width:100%;
   max-width:100%;
   min-width:0;
 }
-.bubble-group > .agent-bubble { width:100% }
 
 /* ── Message display metadata from Hub/Edge contracts ─────────────── */
 .message-display-meta {
@@ -343,17 +354,27 @@
 }
 
 /* ── Bubbles ─────────────────────────────────────────────────────────
-   Density: tighter vertical padding, keep horizontal reading comfort. */
+   User speech is a quiet brand bubble; assistant output is plain prose on
+   the canvas (Vercel-style), with cards carrying the structured evidence. */
 .user-bubble {
-  background:var(--td-plum); color:var(--td-ink-on-plum);
-  border-radius:var(--chat-r-lg); padding:var(--chat-sp-xxs) var(--chat-sp-sm);
-  font:var(--chat-bubble-font); line-height:1.55; word-break:break-word;
+  max-width:min(100%, 620px);
+  background:var(--td-plum);
+  color:var(--td-ink-on-plum);
+  border:0;
+  border-radius:18px 18px 6px 18px;
+  padding:10px 14px;
+  font:400 0.9375rem/1.6 var(--td-font);
+  word-break:break-word;
+  box-shadow:0 1px 1px rgb(0 0 0 / 0.04);
 }
 
 .agent-bubble {
-  background:var(--td-surface); border:1px solid var(--td-line);
-  border-radius:var(--chat-r-md); padding:var(--chat-sp-xxs) var(--chat-sp-sm);
-  font:var(--chat-body); color:var(--td-ink); line-height:1.5;
+  background:transparent;
+  border:0;
+  border-radius:0;
+  padding:0;
+  font:400 0.9375rem/1.68 var(--td-font);
+  color:var(--td-ink);
   max-width:100%;
   min-width:0;
 }
@@ -402,9 +423,10 @@
 
 /* ── Avatars ───────────────────────────────────────────────────────── */
 .ag-av {
-  width:var(--avatar-size); height:var(--avatar-size); border-radius:50%;
+  width:26px; height:26px; border-radius:50%;
   display:flex; align-items:center; justify-content:center;
-  font:600 0.75rem var(--td-font); color:var(--td-ink-on-plum); flex-shrink:0;
+  font:600 0.6875rem var(--td-font); color:var(--td-ink-on-plum); flex-shrink:0;
+  box-shadow:inset 0 0 0 1px rgb(255 255 255 / 0.12);
 }
 .ag-av.builder{background:var(--role-builder)} .ag-av.reviewer{background:var(--role-reviewer)}
 .ag-av.deployer{background:var(--role-deployer)} .ag-av.researcher{background:var(--role-researcher)}
@@ -412,29 +434,25 @@
 .ag-av.agent{background:var(--info)} .ag-av.system{background:var(--td-ink-subtle)}
 .ag-av.user-av{background:var(--td-plum)}
 
-.ag-name { font:var(--chat-label); color:var(--td-ink-muted) }
-.ag-time { font:var(--chat-label-xs); font-family:var(--td-mono); font-weight:400; color:var(--td-ink-subtle) }
+.ag-name { font:600 0.8125rem/1.3 var(--td-font); color:var(--td-ink) }
+.ag-time { font:400 0.6875rem/1.3 var(--td-mono); color:var(--td-ink-subtle) }
 
-.user-meta { display:flex; align-items:center; gap:var(--chat-sp-sm); margin-bottom:var(--chat-sp-2) }
+.user-meta { display:flex; align-items:center; gap:8px }
 
-.user-row-right { justify-content:flex-end }
 .user-content-right { align-items:flex-end }
 
-.agent-meta { display:flex; align-items:center; gap:var(--chat-sp-sm) }
+.agent-meta { display:flex; align-items:baseline; gap:8px }
 
 .dm-avatar { flex-shrink:0 }
-
-/* ── Spacer placeholder — preserves symmetric grp-row layout ──────── */
-.dm-spacer { flex-shrink:0; visibility:hidden }
-.dm-spacer .ag-av { visibility:hidden }
-
+.user-avatar { width:26px; height:26px; min-width:26px; border-radius:9999px; background:transparent }
 
 /* ── #1825: new-message entry + streaming activity ────────────────────
    grp-enter is keyed to the newest same-session append (Transcript sets the
    class once, clears it after the animation window) so virtualized remounts
    while scrolling history never replay it. transform/opacity only — layout
    height is untouched, keeping virtua measurements stable. */
-.grp-row.grp-enter { animation:grpEnter var(--chat-dur-slow) var(--td-ease) both }
+.agent-row.grp-enter,
+.user-row-right.grp-enter { animation:grpEnter var(--chat-dur-slow) var(--td-ease) both }
 
 @keyframes grpEnter {
   from { opacity:0; transform:translateY(6px) }
@@ -456,6 +474,7 @@
 @media (prefers-reduced-motion: reduce) {
   .transcript { scroll-behavior:auto }
 
-  .grp-row.grp-enter,
+  .agent-row.grp-enter,
+  .user-row-right.grp-enter,
   .bubble-group.streaming .agent-bubble::after { animation:none }
 }
diff --git a/app/shared/src/chatview/components/Transcript.css.test.ts b/app/shared/src/chatview/components/Transcript.css.test.ts
index 61801e0f3..02e1ff8b2 100644
--- a/app/shared/src/chatview/components/Transcript.css.test.ts
+++ b/app/shared/src/chatview/components/Transcript.css.test.ts
@@ -39,15 +39,6 @@ describe('ChatViewTranscript CSS contract', () => {
     }
   });
 
-  it('keeps agent markdown replies on a stable readable column', () => {
-    const groupRule = cssRule(css, '.bubble-group');
-    const nestedBubbleRule = cssRule(css, '.bubble-group > .agent-bubble');
-
-    expect(groupRule).not.toMatch(/\bwidth\s*:\s*fit-content\b/);
-    expect(groupRule).toMatch(/\bwidth\s*:\s*min\(86%,\s*820px\)/);
-    expect(nestedBubbleRule).toMatch(/\bwidth\s*:\s*100%/);
-  });
-
   it('keeps the ChatView root constrained so the transcript owns vertical scrolling', () => {
     const chatviewRule = cssRule(css, '.chatview');
 
@@ -59,26 +50,13 @@ describe('ChatViewTranscript CSS contract', () => {
   });
 
   it('keeps Hub message metadata styled as compact non-card chrome', () => {
-    const metaRule = cssRule(css, '.message-display-meta');
-    const detailRule = cssRule(css, '.message-display-detail');
-
     for (const className of messageDisplayMetaClassNames) {
       expect(css, className).toMatch(new RegExp(`\\.${className}\\b`));
     }
-    expect(metaRule).toMatch(/\bfont\s*:\s*var\(--chat-label-xs\)/);
-    expect(metaRule).not.toMatch(/\bbackground\s*:/);
-    expect(detailRule).toMatch(/\btext-overflow\s*:\s*ellipsis/);
   });
 
-  it('uses dense row rhythm tokens for transcript messages (#1311)', () => {
-    const rowRule = cssRule(css, '.grp-row');
-    const contentRule = cssRule(css, '.grp-content');
-
-    expect(rowRule).toMatch(/margin-bottom\s*:\s*var\(--chat-sp-md\)/);
-    expect(rowRule).toMatch(/gap\s*:\s*var\(--chat-sp-sm\)/);
-    expect(contentRule).toMatch(/gap\s*:\s*var\(--chat-sp-2\)/);
-    /* Full-file match: cssRule hits first `.user-bubble` under `.grp-content >` (align only). */
-    expect(css).toMatch(/\.user-bubble\s*\{[^}]*padding\s*:\s*var\(--chat-sp-xxs\)\s+var\(--chat-sp-sm\)/);
-    expect(css).toMatch(/\.agent-bubble\s*\{[^}]*padding\s*:\s*var\(--chat-sp-xxs\)\s+var\(--chat-sp-sm\)/);
+  it('keeps both message roles on the shared conversation column', () => {
+    expect(css).toMatch(/\.agent-row\s*,\s*\.user-row-right\s*\{/);
+    expect(css).toMatch(/\.user-row-right\s*\{[^}]*justify-content\s*:\s*flex-end/);
   });
 });
diff --git a/app/shared/src/chatview/components/UserMessage.tsx b/app/shared/src/chatview/components/UserMessage.tsx
index d1e71cefe..67fb376ef 100644
--- a/app/shared/src/chatview/components/UserMessage.tsx
+++ b/app/shared/src/chatview/components/UserMessage.tsx
@@ -7,6 +7,8 @@ import { CHATVIEW_I18N_NAMESPACE } from '../i18n/resources'
 import MarkdownContent from '../../ui/Markdown'
 import { MessageDisplayMeta } from './MessageDisplayMeta'
 import { ImageAttachmentRow } from './ImageAttachment'
+import { Bubble, BubbleContent } from '../../shadcn/ui/bubble'
+import { Message, MessageAvatar, MessageContent } from '../../shadcn/ui/message'
 
 function userAvatarInitial(name: string | undefined, fallback: string): string {
   return (name?.trim() || fallback).slice(0, 1).toUpperCase()
@@ -54,7 +56,7 @@ interface Props {
 export const UserMessage = memo(function UserMessage({ item, chatMode, onContextMenu, enter }: Props) {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE)
   const avatarInitial = userAvatarInitial(item.name, t('chat.you'))
-  const rowClass = enter ? 'grp-row user-row-right grp-enter' : 'grp-row user-row-right'
+  const rowClass = enter ? 'user-row-right grp-enter' : 'user-row-right'
 
   // #1821: text bubbles get the same selectable/context-menu identity tool
   // rows have — only when both an upstream block id and a handler exist.
@@ -84,9 +86,8 @@ export const UserMessage = memo(function UserMessage({ item, chatMode, onContext
 
   if (chatMode === 'dm') {
     return (
-      <div className={rowClass}>
-        <div className="dm-spacer" aria-hidden="true"><div className="ag-av">&nbsp;</div></div>
-        <div className="grp-content user-content-right">
+      <Message className={rowClass}>
+        <MessageContent className="user-content-right w-auto max-w-[78%] items-end gap-1.5">
           <MessageDisplayMeta
             align="right"
             badgeLabel={item.badgeLabel}
@@ -94,22 +95,25 @@ export const UserMessage = memo(function UserMessage({ item, chatMode, onContext
             detail={item.displayDetail}
             title={item.displayTitle}
           />
-          <div className="user-bubble" {...bubbleProps}>
-            {bubbleContent}
-          </div>
-        </div>
-        <div className="dm-avatar"><div className="ag-av user-av">{avatarInitial}</div></div>
-      </div>
+          <Bubble align="end" className="max-w-full">
+            <BubbleContent className="user-bubble" {...bubbleProps}>
+              {bubbleContent}
+            </BubbleContent>
+          </Bubble>
+        </MessageContent>
+        <MessageAvatar className="user-avatar mb-1 self-end">
+          <span className="ag-av user-av">{avatarInitial}</span>
+        </MessageAvatar>
+      </Message>
     )
   }
 
   return (
-    <div className={rowClass}>
-      <div className="dm-spacer" aria-hidden="true"><div className="ag-av">&nbsp;</div></div>
-      <div className="grp-content user-content-right">
+    <Message className={rowClass}>
+      <MessageContent className="user-content-right w-auto max-w-[78%] items-end gap-1.5">
         <div className="user-meta">
-          <span className="ag-time">{item.time}</span>
           <span className="ag-name">{item.name || t('chat.you')}</span>
+          <span className="ag-time">{item.time}</span>
         </div>
         <MessageDisplayMeta
           align="right"
@@ -118,11 +122,15 @@ export const UserMessage = memo(function UserMessage({ item, chatMode, onContext
           detail={item.displayDetail}
           title={item.displayTitle}
         />
-        <div className="user-bubble" {...bubbleProps}>
-          {bubbleContent}
-        </div>
-      </div>
-      <div className="dm-avatar"><div className="ag-av user-av">{avatarInitial}</div></div>
-    </div>
+        <Bubble align="end" className="max-w-full">
+          <BubbleContent className="user-bubble" {...bubbleProps}>
+            {bubbleContent}
+          </BubbleContent>
+        </Bubble>
+      </MessageContent>
+      <MessageAvatar className="user-avatar mb-1 self-end">
+        <span className="ag-av user-av">{avatarInitial}</span>
+      </MessageAvatar>
+    </Message>
   )
 })
diff --git a/app/shared/src/shadcn/ui/attachment.tsx b/app/shared/src/shadcn/ui/attachment.tsx
new file mode 100644
index 000000000..e940d497c
--- /dev/null
+++ b/app/shared/src/shadcn/ui/attachment.tsx
@@ -0,0 +1,204 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+import { Slot } from "radix-ui"
+
+import { Button } from "./button"
+
+const attachmentVariants = cva(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default:
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+      },
+    },
+  }
+)
+
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done"
+  }) {
+  return (
+    <div
+      data-slot="attachment"
+      data-state={state}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(attachmentVariants({ size, orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+const attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image:
+          "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  }
+)
+
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) {
+  return (
+    <div
+      data-slot="attachment-media"
+      data-variant={variant}
+      className={cn(attachmentMediaVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-content"
+      className={cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTitle({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-title"
+      className={cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-description"
+      className={cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-actions"
+      className={cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentAction({
+  className,
+  variant,
+  size = "icon-xs",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="attachment-action"
+      variant={variant ?? "ghost"}
+      size={size}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTrigger({
+  className,
+  asChild = false,
+  type,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="attachment-trigger"
+      type={asChild ? undefined : (type ?? "button")}
+      className={cn("absolute inset-0 z-10 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-group"
+      className={cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Attachment,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentContent,
+  AttachmentTitle,
+  AttachmentDescription,
+  AttachmentActions,
+  AttachmentAction,
+  AttachmentTrigger,
+}
diff --git a/app/shared/src/shadcn/ui/bubble.tsx b/app/shared/src/shadcn/ui/bubble.tsx
new file mode 100644
index 000000000..1d2cd5e93
--- /dev/null
+++ b/app/shared/src/shadcn/ui/bubble.tsx
@@ -0,0 +1,124 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+import { Slot } from "radix-ui"
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="bubble-group"
+      className={cn("flex min-w-0 flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const bubbleVariants = cva(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default:
+          "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary:
+          "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted:
+          "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted:
+          "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline:
+          "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost:
+          "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive:
+          "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof bubbleVariants> & {
+    align?: "start" | "end"
+  }) {
+  return (
+    <div
+      data-slot="bubble"
+      data-variant={variant}
+      data-align={align}
+      className={cn(bubbleVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="bubble-content"
+      className={cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const bubbleReactionsVariants = cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4",
+      },
+      align: {
+        start: "left-3",
+        end: "right-3",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end",
+    },
+  }
+)
+
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  align?: "start" | "end"
+  side?: "top" | "bottom"
+}) {
+  return (
+    <div
+      data-slot="bubble-reactions"
+      data-align={align}
+      data-side={side}
+      className={cn(bubbleReactionsVariants({ side, align }), className)}
+      {...props}
+    />
+  )
+}
+
+export { BubbleGroup, Bubble, BubbleContent, BubbleReactions }
diff --git a/app/shared/src/shadcn/ui/chat-primitives.test.tsx b/app/shared/src/shadcn/ui/chat-primitives.test.tsx
new file mode 100644
index 000000000..ca7f4f11c
--- /dev/null
+++ b/app/shared/src/shadcn/ui/chat-primitives.test.tsx
@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+  Attachment,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentTitle,
+} from './attachment';
+import { Bubble, BubbleContent } from './bubble';
+import { InputGroup, InputGroupAddon, InputGroupTextarea } from './input-group';
+import { Message, MessageContent } from './message';
+
+describe('shadcn chat primitives', () => {
+  it('renders a message row with alignment and content slots', () => {
+    const { container } = render(
+      <Message align="end">
+        <MessageContent>Hello</MessageContent>
+      </Message>,
+    );
+
+    expect(container.querySelector('[data-slot="message"]')).toHaveAttribute('data-align', 'end');
+    expect(screen.getByText('Hello')).toHaveAttribute('data-slot', 'message-content');
+  });
+
+  it('renders user bubbles with the brand variant and forwarded selectable attributes', () => {
+    const { container } = render(
+      <Bubble align="end" variant="default">
+        <BubbleContent data-selectable-card="message-1">Ship it</BubbleContent>
+      </Bubble>,
+    );
+
+    const bubble = container.querySelector('[data-slot="bubble"]');
+    const content = container.querySelector('[data-slot="bubble-content"]');
+    expect(bubble).toHaveAttribute('data-variant', 'default');
+    expect(bubble).toHaveAttribute('data-align', 'end');
+    expect(content).toHaveAttribute('data-selectable-card', 'message-1');
+  });
+
+  it('renders attachment chrome with state, title, description and actions', () => {
+    const { container } = render(
+      <Attachment state="uploading" size="xs">
+        <AttachmentContent>
+          <AttachmentTitle>notes.md</AttachmentTitle>
+          <AttachmentDescription>42%</AttachmentDescription>
+        </AttachmentContent>
+        <AttachmentActions>
+          <button type="button">Remove</button>
+        </AttachmentActions>
+      </Attachment>,
+    );
+
+    expect(container.querySelector('[data-slot="attachment"]')).toHaveAttribute(
+      'data-state',
+      'uploading',
+    );
+    expect(screen.getByText('notes.md')).toHaveAttribute('data-slot', 'attachment-title');
+    expect(screen.getByText('42%')).toHaveAttribute('data-slot', 'attachment-description');
+    expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument();
+  });
+
+  it('composes an input group with a textarea and toolbar addon', () => {
+    const { container } = render(
+      <InputGroup>
+        <InputGroupTextarea aria-label="Prompt" />
+        <InputGroupAddon align="block-end">
+          <button type="button">Send</button>
+        </InputGroupAddon>
+      </InputGroup>,
+    );
+
+    expect(screen.getByLabelText('Prompt')).toHaveAttribute(
+      'data-slot',
+      'input-group-control',
+    );
+    expect(container.querySelector('[data-slot="input-group-addon"]')).toHaveAttribute(
+      'data-align',
+      'block-end',
+    );
+  });
+});
diff --git a/app/shared/src/shadcn/ui/input-group.tsx b/app/shared/src/shadcn/ui/input-group.tsx
new file mode 100644
index 000000000..f5654c8bb
--- /dev/null
+++ b/app/shared/src/shadcn/ui/input-group.tsx
@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/app/shared/src/shadcn/ui/input.tsx b/app/shared/src/shadcn/ui/input.tsx
new file mode 100644
index 000000000..fc306d470
--- /dev/null
+++ b/app/shared/src/shadcn/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/app/shared/src/shadcn/ui/message.tsx b/app/shared/src/shadcn/ui/message.tsx
new file mode 100644
index 000000000..605370b43
--- /dev/null
+++ b/app/shared/src/shadcn/ui/message.tsx
@@ -0,0 +1,91 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-group"
+      className={cn("flex min-w-0 flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function Message({
+  className,
+  align = "start",
+  ...props
+}: React.ComponentProps<"div"> & { align?: "start" | "end" }) {
+  return (
+    <div
+      data-slot="message"
+      data-align={align}
+      className={cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-avatar"
+      className={cn(
+        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-content"
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-header"
+      className={cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-footer"
+      className={cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  MessageGroup,
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageHeader,
+}
diff --git a/app/shared/src/shadcn/ui/textarea.tsx b/app/shared/src/shadcn/ui/textarea.tsx
new file mode 100644
index 000000000..64bee3eff
--- /dev/null
+++ b/app/shared/src/shadcn/ui/textarea.tsx
@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/app/shared/src/styles/shadcn.css b/app/shared/src/styles/shadcn.css
index 6f9b4e08a..edbccfc8f 100644
--- a/app/shared/src/styles/shadcn.css
+++ b/app/shared/src/styles/shadcn.css
@@ -28,6 +28,14 @@
 /* The app switches themes with data-theme on the root element, not a class. */
 @custom-variant dark (&:is([data-theme="dark"] *));
 
+/* Vercel-grade hairlines are slightly stronger than the legacy 4.5% border
+   token. Keep the original `--border` untouched (CSS-Module surfaces still
+   consume it) and expose one deliberate line color to Tailwind instead. */
+:root {
+  --ah-line: color-mix(in oklch, var(--foreground) 10%, transparent);
+  --ah-line-strong: color-mix(in oklch, var(--foreground) 18%, transparent);
+}
+
 @layer base {
   *,
   ::before,
@@ -55,14 +63,20 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
+  --color-line: var(--ah-line);
+  --color-line-strong: var(--ah-line-strong);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
 
   --radius-xs: var(--r-xs);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
   --radius-xl: var(--r-xl);
+  --radius-2xl: var(--r-2xl);
 
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
diff --git a/app/shared/src/styles/themes.css b/app/shared/src/styles/themes.css
index 619fa832d..5f5ba9446 100644
--- a/app/shared/src/styles/themes.css
+++ b/app/shared/src/styles/themes.css
@@ -79,7 +79,9 @@ html[data-theme-sync='true'] *::after {
   --popover: var(--surface-high);
   --popover-foreground: var(--text-1);
 
-  --primary-foreground: #f4f5ff;
+  /* Dark brand blue is a light cyan; white-on-cyan falls below AA. Use the
+     page ink for the foreground so buttons and user bubbles stay readable. */
+  --primary-foreground: #0b1b26;
   --secondary: rgba(255,255,255,0.055);
   --secondary-foreground: var(--text-1);
   --muted: rgba(255,255,255,0.042);
diff --git a/app/shared/src/ui/EmptyState.module.css b/app/shared/src/ui/EmptyState.module.css
index df7734ecb..70bb5a5ca 100644
--- a/app/shared/src/ui/EmptyState.module.css
+++ b/app/shared/src/ui/EmptyState.module.css
@@ -3,20 +3,17 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  max-width: 520px;
+  max-width: 460px;
   margin: 0 auto;
-  padding: 120px var(--wb-gap-md) var(--td-space-5);
+  padding: 64px 24px 40px;
   color: var(--td-ink);
   text-align: center;
   user-select: none;
-
-  /* glass card density */
-  border: 1px solid var(--glass-border-strong, var(--td-line));
-  border-radius: var(--glass-card-radius, var(--r-xl));
-  background: var(--glass-card-bg, var(--glass-panel));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: var(--glass-card-shadow, var(--glass-elev-2));
+  border: 0;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
 }
 
 .content {
@@ -31,27 +28,22 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 56px;
-  height: 56px;
-  border: 1px solid var(--glass-border-strong, var(--td-line));
-  border-radius: var(--td-radius-panel);
-  background:
-    linear-gradient(
-      135deg,
-      var(--glass-tint-plum),
-      var(--glass-tint-sky)
-    );
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: var(--glass-elev-1);
+  width: 44px;
+  height: 44px;
+  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+  border-radius: var(--r-md);
+  background: var(--td-surface);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
   color: var(--td-ink-muted);
 }
 
 .title {
   margin: 0;
   color: var(--td-ink);
-  font-size: 22px;
-  font-weight: 500;
+  font-size: 1.0625rem;
+  font-weight: 600;
   letter-spacing: 0;
   line-height: 1.3;
 }
@@ -60,8 +52,8 @@
   max-width: 420px;
   margin: 0;
   color: var(--td-ink-muted);
-  font-size: var(--td-text-sm);
-  line-height: 1.5;
+  font-size: 0.8125rem;
+  line-height: 1.6;
 }
 
 /* ── Shortcut kbd badge (rendered inside the primary action Button) ── */
@@ -95,16 +87,16 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  min-height: 32px;
-  border: 1px solid var(--glass-border-subtle, var(--td-line));
-  border-radius: var(--td-radius-panel);
+  min-height: 30px;
+  border: 1px solid color-mix(in oklch, var(--foreground) 12%, transparent);
+  border-radius: var(--r-full);
   padding: 0 12px;
-  background: var(--glass-bg-subtle, var(--td-surface-2));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   color: var(--td-ink);
   font-family: var(--td-font);
-  font-size: 13px;
+  font-size: 0.78125rem;
   cursor: pointer;
 }
 
@@ -116,18 +108,14 @@
       transform var(--motion-press);
   }
 
-  .suggestionChip:hover {
-    transform: var(--glass-hover-lift, translateY(-1px));
-  }
-
   .suggestionChip:active {
     transform: scale(var(--glass-press-scale, 0.985));
   }
 }
 
 .suggestionChip:hover {
-  border-color: var(--glass-border-strong, var(--td-focus));
-  background: var(--glass-bg-light, var(--td-surface-3));
+  border-color: color-mix(in oklch, var(--foreground) 20%, transparent);
+  background: color-mix(in oklch, var(--foreground) 4%, transparent);
 }
 
 .suggestionIcon {
diff --git a/app/shared/src/ui/Markdown.module.css b/app/shared/src/ui/Markdown.module.css
index 749c380af..6de8786a1 100644
--- a/app/shared/src/ui/Markdown.module.css
+++ b/app/shared/src/ui/Markdown.module.css
@@ -230,7 +230,8 @@
 }
 
 .root th {
-  background: var(--td-surface-3);
+  background: var(--td-surface);
+  color: var(--td-ink-muted);
   font-weight: 500;
 
   /* Sticky header: the table is the scroll container (overflow-x: auto), so
diff --git a/app/workbench/src/AgentHubWorkbench.module.css b/app/workbench/src/AgentHubWorkbench.module.css
index 4c858b2f4..858cbbe95 100644
--- a/app/workbench/src/AgentHubWorkbench.module.css
+++ b/app/workbench/src/AgentHubWorkbench.module.css
@@ -71,25 +71,25 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--sp-xxs);
+  gap: 4px;
   padding: var(--td-space-3) 0;
-  background: var(--glass-panel, var(--surface-dim));
-  border-right: 1px solid var(--glass-border, var(--td-line));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: var(--glass-elev-1);
+  background: var(--background);
+  border-right: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
 }
 
 .railAvatar {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--r-md);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--r-sm);
   background: var(--td-plum);
   color: var(--text-inv);
   display: flex;
   align-items: center;
   justify-content: center;
-  font: 600 13px var(--td-font);
+  font: 600 12px var(--td-font);
   cursor: pointer;
   margin-bottom: var(--td-space-2);
   flex-shrink: 0;
@@ -108,13 +108,13 @@
 
 .railButton {
   position: relative;
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 0;
-  border-radius: var(--td-radius-control);
+  border-radius: var(--r-sm);
   background: transparent;
   color: var(--td-ink-subtle);
   cursor: pointer;
@@ -136,8 +136,8 @@
 }
 
 .railButton:hover {
-  background: var(--td-tint);
-  color: var(--td-plum);
+  background: color-mix(in oklch, var(--foreground) 5%, transparent);
+  color: var(--foreground);
 }
 
 .railButton:focus-visible {
@@ -147,7 +147,7 @@
 }
 
 .railButton[aria-current='page'] {
-  background: var(--td-tint);
+  background: color-mix(in oklch, var(--td-plum) 9%, transparent);
   color: var(--td-plum);
 }
 
@@ -193,11 +193,11 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  background: var(--glass-panel, var(--surface-sidebar));
-  border-right: 1px solid var(--glass-border, var(--td-line));
-  box-shadow: var(--glass-elev-1);
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  background: color-mix(in oklch, var(--background) 94%, var(--td-surface));
+  border-right: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   clip-path: inset(0 0 0 0);
 
   /* visibility flips back immediately on expand so the reveal animation runs. */
@@ -297,24 +297,24 @@
 .sidebarSearchRow {
   display: flex;
   align-items: center;
-  gap: var(--sp-xxs);
-  margin: var(--sp-10) var(--sp-10) var(--sp-xxs);
+  gap: 6px;
+  margin: 12px 10px 4px;
 }
 
 .sidebarSearch {
   flex: 1 1 auto;
   min-width: 0;
   width: auto;
-  height: 38px;
-  min-height: 38px;
+  height: 34px;
+  min-height: 34px;
   margin: 0;
-  padding: 0 var(--sp-14);
-  border: 1px solid var(--glass-border, var(--td-line));
-  border-radius: var(--r-md);
-  background: var(--glass-input-bg, var(--td-surface-2));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  font: var(--body);
+  padding: 0 10px;
+  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+  border-radius: var(--r-sm);
+  background: var(--td-surface);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  font: 400 0.8125rem var(--td-font);
   color: var(--td-ink);
   outline: none;
   transition: border-color var(--td-dur-normal) var(--td-ease), box-shadow var(--td-dur-normal) var(--td-ease), background var(--td-dur-normal) var(--td-ease);
@@ -326,8 +326,8 @@
 
 .sidebarSearch:focus {
   border-color: var(--td-focus);
-  box-shadow: var(--focus-ring);
-  background: var(--glass-input-bg, var(--td-surface));
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--td-focus) 14%, transparent);
+  background: var(--td-surface);
 }
 
 /* #1819: sidebar "new conversation" direct entry. Icon-only square button
@@ -337,12 +337,12 @@
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  width: 38px;
-  height: 38px;
+  width: 34px;
+  height: 34px;
   padding: 0;
-  border: 1px solid var(--glass-border, var(--td-line));
-  border-radius: var(--r-md);
-  background: var(--glass-input-bg, var(--td-surface-2));
+  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+  border-radius: var(--r-sm);
+  background: var(--td-surface);
   color: var(--td-ink-muted);
   cursor: pointer;
   transition:
@@ -354,7 +354,7 @@
 
 .sidebarNewButton:hover {
   border-color: var(--td-line-strong, var(--td-plum));
-  background: var(--glass-input-bg, var(--td-surface));
+  background: var(--td-surface-2);
   color: var(--td-ink);
 }
 
@@ -366,14 +366,14 @@
 
 .sidebarSort {
   width: auto;
-  height: 34px;
-  margin: 0 var(--sp-10) var(--sp-xxs);
-  padding: 0 var(--td-space-1) 0 var(--sp-10);
-  border: 1px solid var(--glass-border, var(--td-line));
-  border-radius: var(--r-md);
-  background: var(--glass-input-bg, var(--td-surface-2));
+  height: 28px;
+  margin: 0 10px 4px;
+  padding: 0 4px 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--r-xs);
+  background: transparent;
   color: var(--td-ink-muted);
-  font: 500 0.75rem var(--td-font);
+  font: 500 0.71875rem var(--td-font);
   cursor: pointer;
   outline: none;
   transition:
@@ -386,6 +386,7 @@
 
 .sidebarSort:hover {
   color: var(--td-ink);
+  background: color-mix(in oklch, var(--foreground) 4%, transparent);
 }
 
 .sidebarSort:focus {
@@ -408,7 +409,7 @@
   box-sizing: border-box;
   overflow-y: auto;
   margin: 0;
-  padding: 0 var(--wb-gap-2xs, var(--sp-xxs));
+  padding: 0 8px;
   list-style: none;
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
@@ -427,13 +428,13 @@
    conversation row can never contain a button inside a button. */
 .conversationRow {
   display: flex;
-  gap: var(--wb-gap-xs, var(--sp-10));
+  gap: 8px;
   align-items: center;
   width: 100%;
   min-width: 0;
-  min-height: 40px;
-  padding: var(--wb-gap-2xs) var(--wb-gap-xs);
-  border-radius: var(--r-md);
+  min-height: 46px;
+  padding: 5px 8px;
+  border-radius: var(--r-sm);
   background: transparent;
   transition:
     background var(--motion-hover, var(--td-dur-normal) var(--td-ease)),
@@ -442,8 +443,8 @@
 }
 
 .conversationRow:hover {
-  background: var(--glass-bg-light, var(--td-surface-3));
-  transform: translateX(1px);
+  background: color-mix(in oklch, var(--foreground) 4.5%, transparent);
+  transform: none;
 }
 
 .conversationRow:active {
@@ -451,8 +452,10 @@
 }
 
 .conversationRow[data-active='true'] {
-  background: var(--glass-bg-active, var(--td-tint));
-  box-shadow: inset 0 0 0 1px var(--glass-border-subtle, transparent);
+  background: var(--td-surface);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 9%, transparent),
+    0 1px 2px rgb(0 0 0 / 0.03);
 }
 
 .conversationRow[data-active='true'] .conversationTitle {
@@ -567,13 +570,13 @@
 
 .conversationAvatar {
   position: relative;
-  width: 30px;
-  height: 30px;
-  border-radius: var(--td-radius-control);
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font: 600 12px var(--td-font);
+  font: 600 11px var(--td-font);
   color: var(--text-inv);
   flex-shrink: 0;
   user-select: none;
@@ -644,7 +647,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font: 500 0.8125rem var(--td-font);
+  font: 500 0.8125rem/1.35 var(--td-font);
+  color: var(--td-ink);
 }
 
 .conversationSubtitle {
@@ -654,7 +658,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font: 400 0.6875rem var(--td-font);
+  font: 400 0.6875rem/1.4 var(--td-font);
   color: var(--td-ink-subtle);
 }
 
@@ -889,12 +893,12 @@
   align-items: center;
   gap: var(--wb-gap-xs);
   min-width: 0;
-  min-height: 36px;
-  padding: var(--wb-gap-2xs) var(--wb-gap-sm);
-  border-top: 1px solid var(--glass-border, var(--td-line));
-  background: var(--glass-panel, color-mix(in srgb, var(--td-surface) 86%, var(--td-canvas)));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  min-height: 32px;
+  padding: 4px 12px;
+  border-top: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  background: var(--background);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 
 /* #1994: connection segment of the global status bar. */
@@ -904,7 +908,7 @@
   gap: 6px;
   flex-shrink: 0;
   color: var(--td-ink-muted);
-  font: 500 0.6875rem var(--td-font);
+  font: 500 0.6875rem/1.3 var(--td-font);
 }
 
 .statusBarConnection .connectionDot {
@@ -1089,39 +1093,39 @@
   position: relative;
   z-index: var(--z-base);
   display: flex;
-  align-items: flex-start;
-  gap: var(--sp-10);
-  min-height: 72px;
-  padding: 10px 18px 8px;
-  border-bottom: 1px solid var(--glass-border, var(--td-line));
-  background: var(--glass-panel, var(--td-surface));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: var(--glass-elev-1);
+  align-items: center;
+  gap: 10px;
+  min-height: 56px;
+  padding: 10px 18px;
+  border-bottom: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  background: var(--background);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
   flex-shrink: 0;
   overflow: hidden;
 }
 
 .workspaceAvatar {
-  width: 32px;
-  height: 32px;
-  margin-top: 1px;
-  border-radius: var(--td-radius-control);
+  width: 28px;
+  height: 28px;
+  margin-top: 0;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-inv);
-  font: 600 13px var(--td-font);
+  font: 600 11px var(--td-font);
   flex-shrink: 0;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(255 255 255 / 22%), var(--td-shadow-sm);
+  box-shadow: inset 0 0 0 1px rgba(255 255 255 / 18%);
 }
 
 .workspaceHeaderCopy {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  gap: var(--td-space-2);
+  gap: 4px;
   min-width: 0;
   overflow: hidden;
 }
@@ -1130,10 +1134,10 @@
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: var(--td-space-2);
+  gap: 8px;
   width: 100%;
   min-width: 0;
-  height: 22px;
+  height: 24px;
   overflow: hidden;
 }
 
@@ -1142,7 +1146,7 @@
   min-width: 0;
   max-width: 160px;
   margin: 0;
-  font: 600 0.875rem/1.25 var(--td-font);
+  font: 600 0.875rem/1.3 var(--td-font);
   letter-spacing: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1154,10 +1158,11 @@
   min-width: 0;
   max-width: 112px;
   padding: 2px 7px;
-  border-radius: var(--td-radius-control);
-  background: var(--warning-bg);
-  color: var(--td-warning);
-  font: 500 0.6875rem/1.25 var(--td-font);
+  border: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  border-radius: 6px;
+  background: var(--td-surface);
+  color: var(--td-ink-muted);
+  font: 500 0.6785rem/1.3 var(--td-font);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1167,12 +1172,12 @@
   flex: 0 1 auto;
   min-width: 0;
   max-width: clamp(92px, 18vw, 176px);
-  padding: var(--sp-2) var(--td-space-2);
-  border-radius: var(--r-full);
-  background: var(--td-surface-3);
+  padding: 2px 7px;
+  border-radius: 6px;
+  background: transparent;
   color: var(--td-ink-muted);
-  border: 1px solid var(--td-line);
-  font: 500 0.6875rem/1.25 var(--td-mono);
+  border: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  font: 500 0.6875rem/1.3 var(--td-mono);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1182,8 +1187,11 @@
   flex: 0 1 auto;
   min-width: 0;
   max-width: clamp(42px, 14vw, 136px);
-  font: 400 0.6875rem var(--td-font);
-  color: var(--td-ink-subtle);
+  padding: 2px 7px;
+  border: 1px solid color-mix(in oklch, var(--foreground) 7%, transparent);
+  border-radius: 6px;
+  color: var(--td-ink-muted);
+  font: 500 0.6875rem/1.3 var(--td-font);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1264,9 +1272,9 @@
 }
 
 .iconButton {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--r-md);
+  width: 30px;
+  height: 30px;
+  border-radius: var(--r-xs);
   border: 0;
   background: transparent;
   color: var(--td-ink-muted);
@@ -1285,9 +1293,9 @@
 }
 
 .iconButton:hover {
-  background: var(--glass-bg-light, var(--td-surface-3));
+  background: color-mix(in oklch, var(--foreground) 5%, transparent);
   color: var(--td-ink);
-  transform: var(--glass-hover-lift);
+  transform: none;
 }
 
 .iconButton:active {
@@ -1312,21 +1320,13 @@
 
 /* ── Composer: floating capsule ── */
 .composer {
-  --composer-col: min(100%, 820px);
-
   position: relative;
   z-index: var(--z-composer);
   display: grid;
-  gap: var(--td-space-2);
-  padding: 12px 22px 20px;
-  border-top: 1px solid var(--glass-border, transparent);
-  background: linear-gradient(
-    to bottom,
-    var(--glass-panel, color-mix(in srgb, var(--td-canvas) 86%, transparent)) 0,
-    var(--td-canvas) 28px
-  );
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  gap: 8px;
+  padding: 0 20px 14px;
+  border-top: 0;
+  background: transparent;
   pointer-events: none;
 }
 
@@ -1657,741 +1657,95 @@
   line-height: 16px;
   white-space: nowrap;
 }
-
-/* ── Reply-To banner above composer ── */
-.replyToBar {
+/* ═══ Right Inspector ═══ */
+.inspector {
   position: relative;
-  z-index: var(--z-base);
-  pointer-events: auto;
   display: flex;
-  align-items: center;
-  gap: var(--td-space-2);
-  width: min(100%, 880px);
-  margin: 0 auto;
-  padding: var(--sp-xxs) var(--td-space-3);
-  border: 1px solid var(--glass-border, var(--td-line));
-  border-radius: var(--td-radius-panel);
-  background: var(--glass-bg-light, var(--td-surface-2));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  font: var(--caption);
-  color: var(--td-ink-muted);
-  transition:
-    background var(--td-dur-normal) var(--td-ease),
-    border-color var(--td-dur-normal) var(--td-ease);
-}
-
-.replyToLabel {
-  flex: 1;
+  flex-direction: column;
+  width: var(--inspector-w);
+  flex: 0 0 var(--inspector-w);
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.replyToCancel {
-  flex-shrink: 0;
-  width: 22px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: var(--td-radius-control);
-  background: transparent;
-  color: var(--td-ink-subtle);
-  cursor: pointer;
-  font: 600 12px var(--td-font);
-  padding: 0;
+  background: var(--surface-dim);
+  border-left: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  clip-path: inset(0 0 0 0);
+  visibility: visible;
   transition:
+    width var(--motion-panel),
+    flex-basis var(--motion-panel),
+    clip-path var(--motion-panel),
+    border-color var(--motion-panel),
     background var(--td-dur-normal) var(--td-ease),
-    color var(--td-dur-normal) var(--td-ease);
-}
-
-.replyToCancel:hover {
-  background: var(--surface-highest);
-  color: var(--td-ink);
+    box-shadow var(--td-dur-normal) var(--td-ease),
+    visibility 0s linear 0s;
+  will-change: width, flex-basis, clip-path;
 }
 
-/* ── Quote preview banner above composer ── */
-.quoteBar {
+/*
+ * Desktop engineering-loop column (#1181): owns the shell grid cell width /
+ * collapse chrome so RightInspector + AuxPanel can stack without the nested
+ * inspector's flex-basis treating --inspector-w as height.
+ */
+.engineeringColumn {
   position: relative;
-  z-index: var(--z-base);
-  pointer-events: auto;
   display: flex;
-  align-items: center;
-  gap: var(--td-space-2);
-  width: min(100%, 880px);
-  margin: 0 auto;
-  padding: var(--sp-xxs) var(--td-space-3);
-  border: 1px solid var(--glass-border, var(--td-line));
-  border-radius: var(--td-radius-panel);
-  background: var(--glass-bg-light, var(--td-surface-2));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  font: var(--caption);
-  color: var(--td-ink-muted);
+  flex-direction: column;
+  width: var(--inspector-w);
+  flex: 0 0 var(--inspector-w);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-dim);
+  border-left: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  clip-path: inset(0 0 0 0);
+  visibility: visible;
   transition:
+    width var(--motion-panel),
+    flex-basis var(--motion-panel),
+    clip-path var(--motion-panel),
+    border-color var(--motion-panel),
     background var(--td-dur-normal) var(--td-ease),
-    border-color var(--td-dur-normal) var(--td-ease);
+    box-shadow var(--td-dur-normal) var(--td-ease),
+    visibility 0s linear 0s;
+  will-change: width, flex-basis, clip-path;
 }
 
-.quoteBarLabel {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-style: italic;
+.engineeringColumn .inspector {
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  border-left: none;
 }
 
-.quoteBarCancel {
-  flex-shrink: 0;
-  width: 22px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: var(--td-radius-control);
-  background: transparent;
-  color: var(--td-ink-subtle);
-  cursor: pointer;
-  font: 600 12px var(--td-font);
-  padding: 0;
+/*
+ * #1823: the collapsed inspector still carries `aria-hidden`, so it must not
+ * keep focusable descendants (tabs, resizer, preview controls) reachable by
+ * Tab. `visibility: hidden` removes the subtree from the focus order once the
+ * collapse animation has finished; RightInspector sets `inert` in parallel.
+ */
+.shell[data-inspector-collapsed='true'] .inspector,
+.shell[data-inspector-collapsed='true'] .engineeringColumn {
+  width: 0;
+  flex-basis: 0;
+  border-left-color: transparent;
+  clip-path: inset(0 0 0 100%);
+  pointer-events: none;
+  visibility: hidden;
   transition:
+    width var(--motion-panel),
+    flex-basis var(--motion-panel),
+    clip-path var(--motion-panel),
+    border-color var(--motion-panel),
     background var(--td-dur-normal) var(--td-ease),
-    color var(--td-dur-normal) var(--td-ease);
-}
-
-.quoteBarCancel:hover {
-  background: var(--surface-highest);
-  color: var(--td-ink);
-}
-
-.composer::before {
-  display: none;
-}
-
-.composerRow {
-  position: relative;
-  z-index: var(--z-base);
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-10);
-  width: min(100%, 820px);
-  min-height: 56px;
-  margin: 0 auto;
-  padding: var(--sp-10) var(--sp-14) var(--sp-10) var(--td-space-4);
-  border: 1px solid var(--glass-border-strong, var(--td-line));
-  border-radius: var(--r-xl);
-  background: var(--glass-panel-strong, var(--td-surface));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: var(--glass-elev-2);
-  transition:
-    /* #1825: composer row is chrome, not a panel — use the hover micro-recipe. */
-    width var(--motion-hover),
-    box-shadow var(--motion-hover),
-    border-color var(--motion-hover),
-    background-color var(--motion-hover),
-    transform var(--motion-press);
-}
-
-.composerRow:hover {
-  box-shadow: var(--glass-elev-3, var(--glass-elev-2));
-}
-
-.composerRow:focus-within {
-  border-color: var(--td-focus);
-  box-shadow: var(--glass-elev-2), var(--focus-ring);
-}
-
-.shell[data-inspector-collapsed='true'] .composerRow {
-  width: min(100%, 960px);
-}
-
-.shell[data-inspector-collapsed='true'] .composer {
-  --composer-col: min(100%, 960px);
-}
-
-.composerRow::before {
-  content: '+';
-  flex: 0 0 auto;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--r-full);
-  color: var(--td-plum);
-  background: var(--td-tint);
-  font: 400 1.25rem/1 var(--td-font);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    transform var(--motion-press),
-    background-color var(--motion-hover);
-}
-
-.composerRow:active::before {
-  transform: scale(var(--glass-press-scale, 0.985));
-}
-
-/* ── Composer drag-drop dashed overlay ── */
-.composerDragOverlay {
-  position: absolute;
-  inset: -1px;
-  z-index: calc(var(--z-base) + 1);
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px dashed var(--td-plum);
-  border-radius: var(--r-xl);
-  background: color-mix(in srgb, var(--td-plum) 6%, transparent);
-  font: var(--caption);
-  color: var(--td-plum);
-}
-
-.composerMentions {
-  position: relative;
-  z-index: var(--z-base);
-  pointer-events: auto;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-xxs);
-  width: min(100%, 820px);
-  margin: 0 auto -2px;
-}
-
-.composerMentionChip {
-  min-width: 0;
-  max-width: 180px;
-  height: 26px;
-  padding: 0 9px;
-  border: 1px solid var(--td-line);
-  border-radius: var(--r-full);
-  background: var(--td-tint);
-  color: var(--td-plum);
-  font: 600 0.75rem var(--td-font);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color var(--td-dur-fast) var(--td-ease),
-    border-color var(--td-dur-fast) var(--td-ease),
-    transform var(--td-dur-fast) var(--td-ease);
-}
-
-/* #1825: mention chip had zero hover/active feedback. */
-.composerMentionChip:hover {
-  background: color-mix(in oklch, var(--td-plum) 18%, var(--td-tint));
-  border-color: color-mix(in oklch, var(--td-plum) 40%, var(--td-line));
-}
-
-.composerMentionChip:active {
-  transform: scale(0.97);
-}
-
-.composerMainchain {
-  position: relative;
-  z-index: var(--z-base);
-  pointer-events: auto;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-xxs);
-  width: min(100%, 820px);
-  margin: 0 auto -2px;
-  color: var(--td-ink-subtle);
-  font: var(--caption);
-}
-
-.composerMainchain span {
-  min-width: 0;
-  max-width: 220px;
-  height: 24px;
-  padding: var(--td-space-1) var(--td-space-2);
-  border: 1px solid var(--td-line);
-  border-radius: var(--td-radius-control);
-  background: var(--td-surface-2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.composerMainchain span[data-state='selected'] {
-  border-color: color-mix(in srgb, var(--td-plum) 32%, var(--td-line));
-  color: var(--td-ink);
-}
-
-.composerMainchain span[data-state='missing'] {
-  border-color: color-mix(in srgb, var(--td-warning) 44%, var(--td-line));
-  color: var(--td-warning);
-}
-
-.composerInput {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 32px;
-  max-height: 96px;
-  padding: 5px 2px;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  font: var(--body);
-  color: var(--td-ink);
-  outline: none;
-  resize: none;
-
-  /* #1822 auto-grow: scroll past the max-height instead of clipping. */
-  overflow-y: auto;
-}
-
-.composerInput::placeholder {
-  color: var(--td-ink-subtle);
-}
-
-.composerInput:focus {
-  outline: none;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.composerInput:focus-visible {
-  outline: none;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.composerTargetPicker {
-  order: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-xxs);
-  max-width: 260px;
-  color: var(--td-ink-subtle);
-  font: var(--caption);
-  white-space: nowrap;
-}
-
-.composerAgentPicker {
-  order: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-xxs);
-  max-width: 220px;
-  color: var(--td-ink-subtle);
-  font: var(--caption);
-  white-space: nowrap;
-}
-
-.composerAgentSelect {
-  width: 138px;
-  min-width: 0;
-  padding: var(--sp-xxs) var(--td-space-2);
-  border: 1px solid var(--td-line);
-  border-radius: var(--td-radius-control);
-  background: var(--td-surface-2);
-  color: var(--td-ink);
-  font: var(--caption);
-}
-
-.composerAgentSelect:focus {
-  outline: none;
-  border-color: var(--td-plum);
-}
-
-.composerAgentSelect:disabled {
-  opacity: var(--opacity-65);
-  cursor: not-allowed;
-}
-
-.composerTargetSelect {
-  width: 160px;
-  min-width: 0;
-  padding: var(--sp-xxs) var(--td-space-2);
-  border: 1px solid var(--td-line);
-  border-radius: var(--td-radius-control);
-  background: var(--td-surface-2);
-  color: var(--td-ink);
-  font: var(--caption);
-}
-
-.composerTargetSelect:focus {
-  outline: none;
-  border-color: var(--td-plum);
-}
-
-.composerTargetSelect:disabled {
-  opacity: var(--opacity-65);
-  cursor: not-allowed;
-}
-
-.composerStatus {
-  position: relative;
-  z-index: var(--z-base);
-  width: min(100%, 820px);
-  margin: -2px auto 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-xxs) var(--td-space-3);
-  color: var(--td-ink-subtle);
-  font: var(--caption);
-  pointer-events: auto;
-}
-
-.composerStatus span {
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.composerMentionPopover {
-  position: fixed;
-  z-index: var(--td-z-popover);
-  width: min(280px, calc(100vw - 32px));
-  max-height: 240px;
-  overflow-y: auto;
-  padding: var(--sp-xxs);
-  border: 1px solid var(--glass-border-strong, var(--td-line));
-  border-radius: var(--r-md);
-  background: var(--glass-panel-strong, var(--td-surface));
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: var(--glass-elev-3);
-  pointer-events: auto;
-}
-
-.composerMentionHint {
-  display: block;
-  padding: var(--sp-xxs) var(--td-space-2);
-  color: var(--td-ink-subtle);
-  font: var(--caption);
-}
-
-.composerMentionEmpty {
-  padding: var(--td-space-2);
-  color: var(--td-ink-subtle);
-  font: var(--caption);
-  text-align: center;
-}
-
-.composerMentionOption {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  width: 100%;
-  min-width: 0;
-  padding: var(--td-space-1) var(--td-space-2);
-  border: 0;
-  border-radius: var(--td-radius-control);
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-  color: var(--td-ink);
-  font: var(--body);
-}
-
-.composerMentionOption:hover,
-.composerMentionOption[data-active='true'] {
-  background: var(--td-surface-2);
-}
-
-.composerMentionOptionLabel {
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.composerMentionOptionMeta {
-  color: var(--td-ink-subtle);
-  font: var(--caption);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sendButton {
-  order: 2;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--td-plum);
-  color: var(--td-ink-on-plum);
-  border: 0;
-  font-size: 13.3333px;
-  line-height: normal;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background var(--td-dur-normal) var(--td-ease), transform var(--td-dur-normal) var(--td-ease);
-}
-
-.sendButton:hover {
-  background: var(--td-plum-hover);
-  transform: scale(1.05);
-}
-
-.sendButton:active {
-  transform: scale(0.95);
-}
-
-.sendButton:disabled {
-  background: var(--td-plum);
-  color: var(--td-ink-on-plum);
-  cursor: pointer;
-  transform: none;
-}
-
-.sendButton svg {
-  width: 16px;
-  height: 16px;
-  color: currentcolor;
-}
-
-/* ── Attachment button ── */
-
-/* ── #1816 composer approval-mode picker (shared PermissionModePicker;
-   its own module styles realize the trigger/popover chrome) ── */
-.composerApprovalModePicker {
-  order: 0;
-  flex: 0 0 auto;
-}
-
-.attachmentButton {
-  order: 0;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--r-md);
-  border: 0;
-  background: transparent;
-  color: var(--td-ink-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
-  transition:
-    background var(--td-dur-normal) var(--td-ease),
-    color var(--td-dur-normal) var(--td-ease);
-}
-
-.attachmentButton:hover {
-  background: var(--td-surface-3);
-  color: var(--td-ink);
-}
-
-.attachmentButton:disabled {
-  opacity: var(--opacity-50);
-  cursor: not-allowed;
-}
-
-.attachmentButton svg {
-  width: 17px;
-  height: 17px;
-  fill: none;
-  stroke: currentcolor;
-  stroke-width: 1.75;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-/* ── Attachment preview bar ── */
-.composerAttachmentBar {
-  position: relative;
-  z-index: var(--z-base);
-  pointer-events: auto;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-xxs);
-  width: min(100%, 820px);
-  margin: 0 auto -2px;
-}
-
-.attachmentChip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  max-width: 220px;
-  height: 28px;
-  padding: 0 var(--sp-xxs) 0 var(--td-space-2);
-  border: 1px solid var(--td-line);
-  border-radius: var(--r-full);
-  background: var(--td-surface-2);
-  color: var(--td-ink-muted);
-  font: 500 0.75rem var(--td-font);
-  overflow: hidden;
-  position: relative;
-}
-
-.attachmentChip[data-uploading='true'] {
-  border-color: var(--td-plum);
-  opacity: 0.92;
-}
-
-.attachmentUploadBar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: var(--td-surface-3);
-  border-radius: 0 0 var(--r-full) var(--r-full);
-  overflow: hidden;
-}
-
-.attachmentUploadFill {
-  height: 100%;
-  background: var(--td-plum);
-  border-radius: inherit;
-  transition: width 150ms ease-out;
-}
-
-.attachmentChipThumb {
-  width: 18px;
-  height: 18px;
-  border-radius: var(--r-xs);
-  background: var(--td-surface-3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  flex-shrink: 0;
-}
-
-.attachmentChipName {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.attachmentChipSize {
-  flex-shrink: 0;
-  color: var(--td-ink-subtle);
-  font: 400 0.6875rem var(--td-mono);
-}
-
-.attachmentChipRemove {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  border: 0;
-  border-radius: var(--r-full);
-  background: transparent;
-  color: var(--td-ink-subtle);
-  font: 600 0.875rem var(--td-font);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition:
-    background var(--td-dur-normal) var(--td-ease),
-    color var(--td-dur-normal) var(--td-ease);
-}
-
-.attachmentChipRemove:hover {
-  background: var(--danger-bg);
-  color: var(--td-danger);
-}
-
-/* ═══ Right Inspector ═══ */
-.inspector {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: var(--inspector-w);
-  flex: 0 0 var(--inspector-w);
-  min-width: 0;
-  overflow: hidden;
-  background: var(--glass-panel, var(--td-surface-2));
-  border-left: 1px solid var(--glass-border, var(--td-line));
-  box-shadow: var(--glass-elev-1);
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  clip-path: inset(0 0 0 0);
-  visibility: visible;
-  transition:
-    width var(--motion-panel),
-    flex-basis var(--motion-panel),
-    clip-path var(--motion-panel),
-    border-color var(--motion-panel),
-    background var(--td-dur-normal) var(--td-ease),
-    box-shadow var(--td-dur-normal) var(--td-ease),
-    visibility 0s linear 0s;
-  will-change: width, flex-basis, clip-path;
-}
-
-/*
- * Desktop engineering-loop column (#1181): owns the shell grid cell width /
- * collapse chrome so RightInspector + AuxPanel can stack without the nested
- * inspector's flex-basis treating --inspector-w as height.
- */
-.engineeringColumn {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: var(--inspector-w);
-  flex: 0 0 var(--inspector-w);
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--glass-panel, var(--td-surface-2));
-  border-left: 1px solid var(--glass-border, var(--td-line));
-  box-shadow: var(--glass-elev-1);
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  clip-path: inset(0 0 0 0);
-  visibility: visible;
-  transition:
-    width var(--motion-panel),
-    flex-basis var(--motion-panel),
-    clip-path var(--motion-panel),
-    border-color var(--motion-panel),
-    background var(--td-dur-normal) var(--td-ease),
-    box-shadow var(--td-dur-normal) var(--td-ease),
-    visibility 0s linear 0s;
-  will-change: width, flex-basis, clip-path;
-}
-
-.engineeringColumn .inspector {
-  width: 100%;
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 100%;
-  border-left: none;
-}
-
-/*
- * #1823: the collapsed inspector still carries `aria-hidden`, so it must not
- * keep focusable descendants (tabs, resizer, preview controls) reachable by
- * Tab. `visibility: hidden` removes the subtree from the focus order once the
- * collapse animation has finished; RightInspector sets `inert` in parallel.
- */
-.shell[data-inspector-collapsed='true'] .inspector,
-.shell[data-inspector-collapsed='true'] .engineeringColumn {
-  width: 0;
-  flex-basis: 0;
-  border-left-color: transparent;
-  clip-path: inset(0 0 0 100%);
-  pointer-events: none;
-  visibility: hidden;
-  transition:
-    width var(--motion-panel),
-    flex-basis var(--motion-panel),
-    clip-path var(--motion-panel),
-    border-color var(--motion-panel),
-    background var(--td-dur-normal) var(--td-ease),
-    box-shadow var(--td-dur-normal) var(--td-ease),
-    visibility 0s linear var(--dur-normal);
+    box-shadow var(--td-dur-normal) var(--td-ease),
+    visibility 0s linear var(--dur-normal);
 }
 
 .shell[data-inspector-resizing='true'] .inspector,
@@ -2441,17 +1795,17 @@
   z-index: calc(var(--z-context-menu) + 1);
   width: var(--inspector-w);
   min-width: var(--inspector-w);
-  height: 48px;
+  height: 56px;
   padding: 0 var(--sp-10) 0 var(--td-space-3);
-  border-bottom: 1px solid var(--glass-border, var(--td-line));
-  background: var(--glass-bg-light, var(--td-surface-2));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  border-bottom: 1px solid color-mix(in oklch, var(--foreground) 9%, transparent);
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--td-space-2);
-  font: 600 0.875rem var(--td-font);
+  font: 600 0.8125rem var(--td-font);
   flex: 0 0 auto;
 }
 
@@ -3217,25 +2571,6 @@
     display: none;
   }
 
-  .composerRow {
-    flex-wrap: wrap;
-  }
-
-  .composerInput {
-    flex-basis: 100%;
-  }
-
-  .composerTargetPicker,
-  .composerAgentPicker {
-    flex: 1 1 180px;
-    max-width: 100%;
-  }
-
-  .composerTargetSelect,
-  .composerAgentSelect {
-    width: 100%;
-  }
-
   /* Narrow shell is rail | workspace only — dock under the main column. */
   .terminalDock {
     grid-column: 2 / -1;
@@ -3346,11 +2681,6 @@
     min-height: var(--touch-target-min, 44px);
   }
 
-  /* Composer "+" affordance — visual hit surface of the picker row. */
-  .composerRow::before {
-    width: var(--touch-target-min, 44px);
-    height: var(--touch-target-min, 44px);
-  }
 }
 
 /* ═══ Inspector toggle button icons ═══ */
@@ -3615,22 +2945,13 @@
 
   .workspaceHeader,
   .composer,
-  .replyToBar,
-  .quoteBar,
   .workbenchStatusBar {
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
   }
 
-  .composerRow {
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-  }
-
   .iconButton:hover,
-  .iconButton:active,
-  .composerRow:hover,
-  .composerRow:active::before {
+  .iconButton:active {
     transform: none;
   }
 
@@ -3759,13 +3080,6 @@
   .composer,
   .composerQueue,
   .pendingApprovalStrip,
-  .replyToBar,
-  .quoteBar,
-  .composerMentions,
-  .composerMainchain,
-  .composerAttachmentBar,
-  .composerStatus,
-  .composerDragOverlay,
   .terminalDock,
   .skipLink {
     display: none !important;
@@ -3837,8 +3151,7 @@
   .inspector,
   .engineeringColumn,
   .monitorHead,
-  .inspectorPanel,
-  .composerRow {
+  .inspectorPanel {
     transition-duration: 0ms;
     transition-delay: 0ms;
   }
diff --git a/app/workbench/src/AgentHubWorkbench.module.test.ts b/app/workbench/src/AgentHubWorkbench.module.test.ts
index 1ed2ce48b..df687934e 100644
--- a/app/workbench/src/AgentHubWorkbench.module.test.ts
+++ b/app/workbench/src/AgentHubWorkbench.module.test.ts
@@ -14,23 +14,6 @@ const runtimeStyleKeys = [
   'workspaceActions',
   'iconButton',
   'composer',
-  'composerRow',
-  'composerInput',
-  'composerMentions',
-  'composerMentionChip',
-  'composerMainchain',
-  'composerAgentPicker',
-  'composerAgentSelect',
-  'composerTargetPicker',
-  'composerTargetSelect',
-  'composerStatus',
-  'attachmentButton',
-  'composerAttachmentBar',
-  'attachmentChip',
-  'attachmentChipName',
-  'attachmentChipSize',
-  'attachmentChipRemove',
-  'sendButton',
 ] as const;
 
 describe('AgentHubWorkbench CSS module contract', () => {
@@ -53,6 +36,27 @@ describe('AgentHubWorkbench CSS module contract', () => {
     expect(css).not.toMatch(/\.workspaceDataMode\b/);
   });
 
+  it('does not keep the retired CSS-Module composer chrome', () => {
+    for (const retired of [
+      'composerRow',
+      'composerInput',
+      'composerMentions',
+      'composerMentionChip',
+      'composerMainchain',
+      'composerAgentPicker',
+      'composerAgentSelect',
+      'composerTargetPicker',
+      'composerTargetSelect',
+      'composerStatus',
+      'attachmentButton',
+      'composerAttachmentBar',
+      'attachmentChip',
+      'sendButton',
+    ]) {
+      expect(css, retired).not.toMatch(new RegExp(`\\.${retired}\\b`));
+    }
+  });
+
   it('keeps the terminal dock under workspace + inspector only (not rail/sidebar)', () => {
     // Dock spans shell columns 3–4 (workspace + inspector), not full width over channel list.
     expect(css).toMatch(/\.terminalDock\s*\{[^}]*grid-column:\s*3\s*\/\s*-1;/s);
diff --git a/app/workbench/src/ComposerAttachmentParts.tsx b/app/workbench/src/ComposerAttachmentParts.tsx
index 35b4f8050..f11b38260 100644
--- a/app/workbench/src/ComposerAttachmentParts.tsx
+++ b/app/workbench/src/ComposerAttachmentParts.tsx
@@ -3,19 +3,27 @@ import { useTranslation } from 'react-i18next';
 import type { ComposerAttachment } from '@shared/composer';
 import { CodePreviewCard } from '@shared/ui/CodePreviewCard';
 import { CHATVIEW_I18N_NAMESPACE } from '@shared/chatview/i18n/resources';
-import styles from './AgentHubWorkbench.module.css';
+import {
+  Attachment,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentMedia,
+  AttachmentTitle,
+} from '@shared/shadcn/ui/attachment';
+import { Button } from '@shared/shadcn/ui/button';
+import { cn } from '@shared/lib/utils';
 import {
   buildAttachmentChipViewModel,
   resolveAttachmentUploadProgress,
 } from './ComposerPartsHelpers';
-import { DesignFileIcon } from './designIcons';
+import { DesignFileIcon, DesignNavIcon } from './designIcons';
 import { isImageAttachment } from './unifiedComposerHelpers';
 import type { AttachmentUploadState } from './unifiedComposerHelpers';
 
 /* ═══════════════════════════════════════════════════════════════════════
    Composer attachment bar and chip (#706).
 
-   CSS remains on shared AgentHubWorkbench.module.css.
    exactOptionalPropertyTypes-safe spreads for uploadProgress.
    In-chip previews: image object-URL thumbnail
    (30×30, revoked on unmount), registry file icon for media, and a
@@ -37,7 +45,10 @@ export function ComposerAttachmentBar({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <div className={styles.composerAttachmentBar} aria-label={t('aria.attachments')}>
+    <div
+      aria-label={t('aria.attachments')}
+      className="flex w-full flex-wrap items-stretch gap-2"
+    >
       {attachments.map((attachment) => {
         const progress = resolveAttachmentUploadProgress(
           uploadProgresses,
@@ -91,15 +102,17 @@ export function ComposerAttachmentChip({
       <div style={{ minWidth: 0, width: 'min(100%, 340px)' }}>
         <CodePreviewCard
           actions={
-            <button
+            <Button
               aria-label={t('action.removeAttachment', { name: attachment.name })}
-              className={styles.attachmentChipRemove}
+              className="text-muted-foreground"
               disabled={isSubmitting}
+              size="icon-xs"
               onClick={onRemove}
               type="button"
+              variant="ghost"
             >
-              &times;
-            </button>
+              <DesignNavIcon name="close" size={12} />
+            </Button>
           }
           code={attachment.contentPreview ?? ''}
           maxLines={3}
@@ -111,81 +124,83 @@ export function ComposerAttachmentChip({
   }
 
   return (
-    <div
-      className={styles.attachmentChip}
+    <Attachment
+      className="max-w-[20rem] rounded-lg border-line-strong bg-muted shadow-none"
+      size="xs"
+      state={isUploadFailed ? 'error' : isUploadInFlight ? 'uploading' : 'done'}
       {...(isUploadInFlight ? { 'data-uploading': 'true' } : {})}
       {...(isUploadFailed ? { 'data-upload-failed': 'true' } : {})}
-      style={imageUrl ? { height: 34, maxWidth: 280, paddingLeft: 4 } : undefined}
+      style={imageUrl ? { height: 38, maxWidth: 280, paddingLeft: 4 } : undefined}
     >
       {imageUrl ? (
-        <img
-          alt=""
-          aria-hidden="true"
-          src={imageUrl}
-          style={{
-            width: 30,
-            height: 30,
-            borderRadius: 6,
-            objectFit: 'cover',
-            flexShrink: 0,
-          }}
-        />
+        <AttachmentMedia variant="image">
+          <img
+            alt=""
+            aria-hidden="true"
+            src={imageUrl}
+            style={{
+              width: 30,
+              height: 30,
+              borderRadius: 6,
+              objectFit: 'cover',
+              flexShrink: 0,
+            }}
+          />
+        </AttachmentMedia>
       ) : previewKind === 'image' || isMedia ? (
-        <span className={styles.attachmentChipThumb} aria-hidden="true">
+        <AttachmentMedia aria-hidden="true" className="size-7 rounded-md">
           <DesignFileIcon name={attachment.name} type={attachment.mime} />
-        </span>
+        </AttachmentMedia>
       ) : null}
-      <span className={styles.attachmentChipName}>
-        {attachment.name}
-      </span>
-      {sizeLabel && (
-        <span className={styles.attachmentChipSize}>{sizeLabel}</span>
-      )}
-      {isUploadFailed && (
-        <span
-          className={styles.attachmentChipSize}
-          role="status"
-          style={{ color: 'var(--td-warning)', fontWeight: 600 }}
+      <AttachmentContent className="py-0.5">
+        <AttachmentTitle>{attachment.name}</AttachmentTitle>
+        <AttachmentDescription
+          {...(isUploadFailed ? { role: 'status' } : {})}
+          className={cn(isUploadFailed && 'font-medium text-destructive')}
         >
-          {t('composer.attachmentUploadFailed', { defaultValue: '上传失败' })}
-        </span>
-      )}
+          {isUploadFailed
+            ? t('composer.attachmentUploadFailed', { defaultValue: 'Upload failed' })
+            : isUploadInFlight
+              ? `${uploadPercent}%`
+              : sizeLabel}
+        </AttachmentDescription>
+      </AttachmentContent>
       {isUploadInFlight ? (
-        <span className={styles.attachmentUploadBar}>
-          <span className={styles.attachmentUploadFill} style={{ width: `${uploadPercent}%` }} />
+        <span className="absolute inset-x-0 bottom-0 h-[3px] overflow-hidden rounded-b-xl bg-muted">
+          <span
+            className="block h-full bg-primary transition-[width] duration-150"
+            style={{ width: `${uploadPercent}%` }}
+          />
         </span>
       ) : (
-        <button
-          aria-label={t('action.removeAttachment', { name: attachment.name })}
-          className={styles.attachmentChipRemove}
-          disabled={isSubmitting}
-          onClick={onRemove}
-          type="button"
-        >
-          &times;
-        </button>
+        <AttachmentActions>
+          <Button
+            aria-label={t('action.removeAttachment', { name: attachment.name })}
+            className="text-muted-foreground"
+            disabled={isSubmitting}
+            size="icon-xs"
+            onClick={onRemove}
+            type="button"
+            variant="ghost"
+          >
+            <DesignNavIcon name="close" size={12} />
+          </Button>
+        </AttachmentActions>
       )}
       {isUploadFailed && onRetryUpload && (
-        <button
+        <Button
           aria-label={t('action.retryAttachmentUpload', { name: attachment.name, defaultValue: `重试上传 ${attachment.name}` })}
+          className="rounded-md"
+          size="xs"
           onClick={onRetryUpload}
-          style={{
-            flexShrink: 0,
-            border: '1px solid var(--td-line)',
-            borderRadius: 'var(--td-radius-control)',
-            background: 'var(--td-surface-2)',
-            color: 'var(--td-ink)',
-            cursor: 'pointer',
-            fontSize: 12,
-            lineHeight: '20px',
-            padding: '0 8px',
-          }}
           type="button"
+          variant="outline"
         >
+          <DesignNavIcon name="refresh" size={12} />
           {t('action.retryAttachmentUpload', { name: attachment.name, defaultValue: '重试' })}
-        </button>
+        </Button>
       )}
-    </div>
+    </Attachment>
   );
 }
 
diff --git a/app/workbench/src/ComposerContextParts.tsx b/app/workbench/src/ComposerContextParts.tsx
index 5917d12ab..fe7e6e4fa 100644
--- a/app/workbench/src/ComposerContextParts.tsx
+++ b/app/workbench/src/ComposerContextParts.tsx
@@ -5,7 +5,9 @@ import type {
   ComposerState,
 } from '@shared/composer';
 import { CHATVIEW_I18N_NAMESPACE } from '@shared/chatview/i18n/resources';
-import styles from './AgentHubWorkbench.module.css';
+import { Button } from '@shared/shadcn/ui/button';
+import { cn } from '@shared/lib/utils';
+import { DesignNavIcon } from './designIcons';
 import {
   formatMainchainAgentLabel,
   formatMainchainTargetLabel,
@@ -20,9 +22,12 @@ import { formatQuotePreview } from './unifiedComposerHelpers';
    Composer context chrome — reply / quote / mentions / mainchain / status.
 
    Helper module for UnifiedComposerParts (#706).
-   CSS remains on shared AgentHubWorkbench.module.css.
    ═══════════════════════════════════════════════════════════════════════ */
 
+const contextBarClass =
+  'flex min-w-0 items-center gap-2 rounded-lg border border-line bg-muted/40 px-3 py-2 text-xs text-muted-foreground';
+const contextLabelClass = 'min-w-0 flex-1 truncate';
+
 export function ComposerReplyBar({
   replyTo,
   isSubmitting,
@@ -34,19 +39,21 @@ export function ComposerReplyBar({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <div className={styles.replyToBar}>
-      <span className={styles.replyToLabel}>
+    <div className={contextBarClass}>
+      <span className={contextLabelClass}>
         {formatReplyToLabel(replyTo, t)}
       </span>
-      <button
+      <Button
         aria-label={t('aria.cancelReply')}
-        className={styles.replyToCancel}
+        className="size-6 shrink-0 rounded-md text-muted-foreground"
         disabled={isSubmitting}
+        size="icon-xs"
         onClick={onCancel}
         type="button"
+        variant="ghost"
       >
-        x
-      </button>
+        <DesignNavIcon name="close" size={12} />
+      </Button>
     </div>
   );
 }
@@ -62,19 +69,21 @@ export function ComposerQuoteBar({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <div className={styles.quoteBar}>
-      <span className={styles.quoteBarLabel}>
+    <div className={cn(contextBarClass, 'border-l-2 border-l-primary/60')}>
+      <span className={cn(contextLabelClass, 'italic')}>
         {formatQuotePreview(quote)}
       </span>
-      <button
+      <Button
         aria-label={t('aria.cancelQuote')}
-        className={styles.quoteBarCancel}
+        className="size-6 shrink-0 rounded-md text-muted-foreground"
         disabled={isSubmitting}
+        size="icon-xs"
         onClick={onCancel}
         type="button"
+        variant="ghost"
       >
-        x
-      </button>
+        <DesignNavIcon name="close" size={12} />
+      </Button>
     </div>
   );
 }
@@ -92,17 +101,19 @@ export function ComposerEditBar({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <div className={styles.replyToBar} data-edit-bar="true">
-      <span className={styles.replyToLabel}>{t('composer.editingMessage')}</span>
-      <button
+    <div className={contextBarClass} data-edit-bar="true">
+      <span className={contextLabelClass}>{t('composer.editingMessage')}</span>
+      <Button
         aria-label={t('aria.cancelEdit')}
-        className={styles.replyToCancel}
+        className="size-6 shrink-0 rounded-md text-muted-foreground"
         disabled={isSubmitting}
+        size="icon-xs"
         onClick={onCancel}
         type="button"
+        variant="ghost"
       >
-        x
-      </button>
+        <DesignNavIcon name="close" size={12} />
+      </Button>
     </div>
   );
 }
@@ -118,17 +129,25 @@ export function ComposerMentionChips({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <div className={styles.composerMentions} aria-label={t('aria.selectedAgents')}>
+    <div
+      aria-label={t('aria.selectedAgents')}
+      className="flex flex-wrap items-center gap-1.5"
+    >
       {mentions.map((mention) => (
-        <button type="button"
+        <Button
           aria-label={t('action.removeMention', { label: mention.label })}
-          className={styles.composerMentionChip}
+          className="h-7 max-w-[12rem] gap-1 rounded-full border border-primary/20 bg-primary/8 px-2.5 text-xs font-medium text-primary hover:bg-primary/12"
           disabled={isSubmitting}
           key={mention.id}
+          size="xs"
           onClick={() => onRemove(mention.id)}
+          type="button"
+          variant="ghost"
         >
-          {formatMentionChipLabel(mention)}
-        </button>
+          <span aria-hidden="true" className="shrink-0 font-semibold">@</span>
+          <span className="truncate">{formatMentionChipLabel(mention)}</span>
+          <DesignNavIcon className="shrink-0 opacity-60" name="close" size={10} />
+        </Button>
       ))}
     </div>
   );
@@ -147,12 +166,32 @@ export function ComposerMainchainStrip({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <div className={styles.composerMainchain} aria-label={t('aria.agentMainChain')}>
-      <span data-state="selected">{formatMainchainAgentLabel(selectedAgentLabel, t)}</span>
-      <span data-state={mainchainDataState(targetSelected)}>
+    <div
+      aria-label={t('aria.agentMainChain')}
+      className="flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground"
+    >
+      <span
+        className="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 font-medium text-foreground"
+        data-state="selected"
+      >
+        {formatMainchainAgentLabel(selectedAgentLabel, t)}
+      </span>
+      <span
+        className={cn(
+          'inline-flex items-center rounded-full border border-line bg-foreground/5 px-2.5 py-1',
+          mainchainDataState(targetSelected) === 'missing' && 'border-warning/40 bg-warning/10 text-warning',
+        )}
+        data-state={mainchainDataState(targetSelected)}
+      >
         {formatMainchainTargetLabel(selectedTargetLabel, t)}
       </span>
-      <span data-state={mainchainDataState(mainchainTask === 'ready')}>
+      <span
+        className={cn(
+          'inline-flex items-center rounded-full border border-line bg-foreground/5 px-2.5 py-1',
+          mainchainDataState(mainchainTask === 'ready') === 'missing' && 'border-warning/40 bg-warning/10 text-warning',
+        )}
+        data-state={mainchainDataState(mainchainTask === 'ready')}
+      >
         {formatMainchainTaskLabel(mainchainTask, t)}
       </span>
     </div>
@@ -165,9 +204,15 @@ export function ComposerStatusStrip({
   statusItems: string[];
 }): React.ReactElement {
   return (
-    <div className={styles.composerStatus} role="status">
+    <div
+      className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 px-1 text-[11px] leading-4 text-muted-foreground/80"
+      role="status"
+    >
       {statusItems.map((item) => (
-        <span key={item}>{item}</span>
+        <span className="inline-flex min-w-0 items-center gap-1.5" key={item}>
+          <span aria-hidden="true" className="size-1 shrink-0 rounded-full bg-current opacity-50" />
+          <span className="truncate">{item}</span>
+        </span>
       ))}
     </div>
   );
diff --git a/app/workbench/src/ComposerControlParts.tsx b/app/workbench/src/ComposerControlParts.tsx
index d4e837576..e883acb35 100644
--- a/app/workbench/src/ComposerControlParts.tsx
+++ b/app/workbench/src/ComposerControlParts.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import type { ApprovalMode, ComposerMention } from '@shared/composer';
 import { CHATVIEW_I18N_NAMESPACE } from '@shared/chatview/i18n/resources';
 import { PermissionModePicker } from '@shared/ui';
+import { Button } from '@shared/shadcn/ui/button';
 import { DesignNavIcon } from './designIcons';
-import styles from './AgentHubWorkbench.module.css';
 import {
   activeComposerApprovalModeLabel,
   approvalModeToPickerValue,
@@ -23,7 +23,7 @@ import type { ComposerExecutionTarget } from './unifiedComposerHelpers';
 
    Helper module for UnifiedComposerParts (#706).
    DesignNavIcon only for icon glyphs.
-   CSS remains on shared AgentHubWorkbench.module.css.
+   Visuals use shadcn Button + Tailwind classes over shared theme tokens.
    ═══════════════════════════════════════════════════════════════════════ */
 
 export function ComposerAgentPicker({
@@ -37,11 +37,12 @@ export function ComposerAgentPicker({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <label className={styles.composerAgentPicker}>
-      <span>{t('composer.agentPicker')}</span>
+    <label className="group/picker relative inline-flex h-8 min-w-0 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-within:bg-muted focus-within:text-foreground has-[:disabled]:opacity-50">
+      <DesignNavIcon className="shrink-0" name="agent" size={14} />
+      <span className="sr-only">{t('composer.agentPicker')}</span>
       <select
         aria-label={t('aria.atAgent')}
-        className={styles.composerAgentSelect}
+        className="h-8 min-w-0 max-w-[9.5rem] cursor-pointer appearance-none truncate bg-transparent pr-4 text-xs font-medium text-inherit outline-none disabled:cursor-not-allowed"
         disabled={isSubmitting || availableMentionOptions.length === 0}
         onChange={(event) => onSelect(event.target.value)}
         value=""
@@ -55,6 +56,11 @@ export function ComposerAgentPicker({
           </option>
         ))}
       </select>
+      <DesignNavIcon
+        className="pointer-events-none absolute right-1.5 opacity-60"
+        name="chevron"
+        size={12}
+      />
     </label>
   );
 }
@@ -72,11 +78,12 @@ export function ComposerTargetPicker({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <label className={styles.composerTargetPicker}>
-      <span>{t('composer.targetPicker')}</span>
+    <label className="group/picker relative inline-flex h-8 min-w-0 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-within:bg-muted focus-within:text-foreground has-[:disabled]:opacity-50">
+      <DesignNavIcon className="shrink-0" name="laptop" size={14} />
+      <span className="sr-only">{t('composer.targetPicker')}</span>
       <select
         aria-label={t('aria.target')}
-        className={styles.composerTargetSelect}
+        className="h-8 min-w-0 max-w-[11rem] cursor-pointer appearance-none truncate bg-transparent pr-4 text-xs font-medium text-inherit outline-none disabled:cursor-not-allowed"
         disabled={isSubmitting || executionTargets.length === 0}
         onChange={(event) => onChange(event.target.value)}
         value={executionTargetId}
@@ -90,6 +97,11 @@ export function ComposerTargetPicker({
           </option>
         ))}
       </select>
+      <DesignNavIcon
+        className="pointer-events-none absolute right-1.5 opacity-60"
+        name="chevron"
+        size={12}
+      />
     </label>
   );
 }
@@ -113,26 +125,29 @@ export function ComposerSendButton({
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   if (isRunning && onCancel) {
     return (
-      <button
+      <Button
         aria-label={t('action.stopRun')}
-        className={styles.sendButton}
+        className="size-9 shrink-0 rounded-full shadow-sm"
         data-running="true"
+        size="icon-lg"
         type="button"
+        variant="secondary"
         onClick={onCancel}
       >
-        <DesignNavIcon name="stop" />
-      </button>
+        <DesignNavIcon name="stop" size={14} />
+      </Button>
     );
   }
   return (
-    <button
+    <Button
       aria-label={hasMentions ? t('action.startAgentTask') : t('profile.sendMessage')}
-      className={styles.sendButton}
+      className="size-9 shrink-0 rounded-full shadow-sm"
       disabled={submitDisabled}
+      size="icon-lg"
       type="submit"
     >
-      <DesignNavIcon name="send" />
-    </button>
+      <DesignNavIcon name="send" size={16} strokeWidth={2.2} />
+    </Button>
   );
 }
 
@@ -145,15 +160,17 @@ export function ComposerAttachButton({
 }): React.ReactElement {
   const { t } = useTranslation(CHATVIEW_I18N_NAMESPACE);
   return (
-    <button
+    <Button
       aria-label={t('aria.addAttachment')}
-      className={styles.attachmentButton}
+      className="size-8 shrink-0 rounded-full text-muted-foreground"
       disabled={isSubmitting}
+      size="icon-sm"
       onClick={onClick}
       type="button"
+      variant="ghost"
     >
-      <DesignNavIcon name="paperclip" />
-    </button>
+      <DesignNavIcon name="paperclip" size={16} />
+    </Button>
   );
 }
 
@@ -189,11 +206,8 @@ export function ComposerApprovalModePicker({
       ariaLabel={translate('composer.approvalMode.aria', { mode: triggerLabel })}
       options={options}
       disabled={isSubmitting}
-      // Conditional spread: desktop's tsconfig types css-module values as
-      // possibly-undefined and compiles with exactOptionalPropertyTypes.
-      {...(styles.composerApprovalModePicker
-        ? { className: styles.composerApprovalModePicker }
-        : {})}
+      className="shrink-0"
+      triggerClassName="max-w-[11rem] rounded-full bg-transparent! text-xs! font-medium! text-muted-foreground! hover:bg-muted! hover:text-foreground! aria-expanded:bg-muted! aria-expanded:text-foreground!"
       onChange={(value) => {
         const mode = pickerValueToApprovalMode(value);
         if (mode) onChange(mode);
diff --git a/app/workbench/src/ComposerMentionPopover.tsx b/app/workbench/src/ComposerMentionPopover.tsx
index 4331aeb66..22e5e2d0a 100644
--- a/app/workbench/src/ComposerMentionPopover.tsx
+++ b/app/workbench/src/ComposerMentionPopover.tsx
@@ -4,7 +4,6 @@ import type { ComposerMention } from '@shared/composer';
 import { CHATVIEW_I18N_NAMESPACE } from '@shared/chatview/i18n/resources';
 import { formatMentionChipLabel } from './ComposerPartsHelpers';
 import type { MentionPopoverCoords } from './composerMentionPopoverHelpers';
-import styles from './AgentHubWorkbench.module.css';
 
 /* ═══════════════════════════════════════════════════════════════════════
    ComposerMentionPopover — presentational @mention candidate list.
@@ -44,15 +43,19 @@ export function ComposerMentionPopover({
   return (
     <div
       id={listboxId}
-      className={styles.composerMentionPopover}
+      className="fixed z-[9999] w-[min(300px,calc(100vw_-_32px))] max-h-[280px] overflow-y-auto rounded-xl border border-line-strong bg-card p-1 shadow-[0_16px_48px_-12px_rgb(0_0_0/0.28)] ring-1 ring-foreground/5"
       style={style}
       role="listbox"
       aria-label={t('composer.mentionHint')}
       data-placement={coords?.placement ?? 'up'}
     >
-      <span className={styles.composerMentionHint}>{t('composer.mentionHint')}</span>
+      <span className="block px-2.5 py-1.5 text-[11px] font-medium text-muted-foreground">
+        {t('composer.mentionHint')}
+      </span>
       {candidates.length === 0 ? (
-        <div className={styles.composerMentionEmpty}>{t('composer.mentionEmpty')}</div>
+        <div className="px-2.5 py-6 text-center text-xs text-muted-foreground">
+          {t('composer.mentionEmpty')}
+        </div>
       ) : (
         candidates.map((mention, index) => {
           const meta = [mention.runtimeId, mention.model].filter(Boolean).join(' · ');
@@ -64,17 +67,17 @@ export function ComposerMentionPopover({
               role="option"
               aria-selected={index === activeIndex}
               data-active={index === activeIndex}
-              className={styles.composerMentionOption}
+              className="flex w-full flex-col gap-0.5 rounded-lg px-2.5 py-2 text-left text-[13px] text-foreground transition-colors hover:bg-muted data-[active=true]:bg-muted"
               onMouseDown={(event) => {
                 event.preventDefault();
                 onSelect(mention);
               }}
               onMouseEnter={() => onHover(index)}
             >
-              <span className={styles.composerMentionOptionLabel}>
+              <span className="truncate font-medium">
                 {formatMentionChipLabel(mention)}
               </span>
-              {meta && <span className={styles.composerMentionOptionMeta}>{meta}</span>}
+              {meta && <span className="truncate text-[11px] text-muted-foreground">{meta}</span>}
             </button>
           );
         })
diff --git a/app/workbench/src/UnifiedComposer.tsx b/app/workbench/src/UnifiedComposer.tsx
index 36c2c2531..7532f316a 100644
--- a/app/workbench/src/UnifiedComposer.tsx
+++ b/app/workbench/src/UnifiedComposer.tsx
@@ -16,6 +16,12 @@ import {
   type MentionPopoverCoords,
 } from './composerMentionPopoverHelpers';
 import { ComposerMentionPopover } from './ComposerMentionPopover';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupTextarea,
+} from '@shared/shadcn/ui/input-group';
+import { cn } from '@shared/lib/utils';
 import {
   buildAttachmentOversizeToast,
   filterAvailableMentionOptions,
@@ -622,7 +628,7 @@ export function UnifiedComposer({
 
   return (
     <form
-      className={styles.composer}
+      className={cn(styles.composer, 'bg-transparent')}
       data-composer-form=""
       onSubmit={onSubmit}
       onDragEnter={handleFormDragEnter}
@@ -630,66 +636,95 @@ export function UnifiedComposer({
       onDragLeave={handleFormDragLeave}
       onDrop={handleFormDrop}
     >
-      {chromeModel.replyTo && (
-        <ComposerReplyBar
-          isSubmitting={view.isSubmitting}
-          onCancel={handleCancelReply}
-          replyTo={chromeModel.replyTo}
-        />
-      )}
-      {chromeModel.quote && (
-        <ComposerQuoteBar
-          isSubmitting={view.isSubmitting}
-          onCancel={handleCancelQuote}
-          quote={chromeModel.quote}
-        />
-      )}
-      {composer.editingMessageId && (
-        <ComposerEditBar
-          isSubmitting={view.isSubmitting}
-          onCancel={handleCancelEdit}
-        />
-      )}
-      {chromeModel.mentions && (
-        <ComposerMentionChips
-          isSubmitting={view.isSubmitting}
-          mentions={chromeModel.mentions}
-          onRemove={handleRemoveMention}
-        />
-      )}
-      {chromeModel.mainchain && (
-        <ComposerMainchainStrip
-          mainchainTask={chromeModel.mainchain.mainchainTask}
-          selectedAgentLabel={chromeModel.mainchain.selectedAgentLabel}
-          selectedTargetLabel={chromeModel.mainchain.selectedTargetLabel}
-          targetSelected={chromeModel.mainchain.targetSelected}
-        />
-      )}
-      {chromeModel.attachment && (
-        <ComposerAttachmentBar
-          attachments={chromeModel.attachment.attachments}
-          isSubmitting={view.isSubmitting}
-          onRemove={handleRemoveAttachment}
-          uploadProgresses={chromeModel.attachment.uploadProgresses}
-          {...(onRetryAttachmentUpload ? { onRetryUpload: onRetryAttachmentUpload } : {})}
-        />
-      )}
-      {view.isSubmitting && inFlightUploadSummaries.length > 0 && (
-        <div className={styles.composerStatus} role="status">
-          {inFlightUploadSummaries.map((summary) => (
-            <span key={summary.attachmentId}>
-              {t('composer.uploadingAttachment', {
-                name: summary.name,
-                percent: String(summary.percent),
-                defaultValue: `上传中 ${summary.name} ${summary.percent}%`,
-              })}
-            </span>
-          ))}
-        </div>
-      )}
-      <div className={styles.composerRow}>
-        {dragOver && <div className={styles.composerDragOverlay} />}
-        <textarea
+      <div className="pointer-events-auto mx-auto flex w-full max-w-3xl flex-col gap-2">
+      <InputGroup
+        className={cn(
+          'relative flex-col items-stretch rounded-2xl border-line bg-card shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-20px_rgb(0_0_0/0.22)] transition-[border-color,box-shadow]',
+          'has-[[data-slot=input-group-control]:focus-visible]:border-primary/35 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-primary/10',
+          dragOver && 'border-primary/60 ring-4 ring-primary/10',
+        )}
+      >
+        {dragOver && (
+          <div
+            className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/5 text-xs font-medium text-primary"
+          >
+            {t('composer.dropToAttach', { defaultValue: '松开鼠标以添加附件' })}
+          </div>
+        )}
+        {(chromeModel.replyTo
+          || chromeModel.quote
+          || composer.editingMessageId
+          || chromeModel.mentions
+          || chromeModel.mainchain
+          || chromeModel.attachment
+          || (view.isSubmitting && inFlightUploadSummaries.length > 0)) && (
+          <InputGroupAddon
+            align="block-start"
+            className="w-full cursor-default select-auto flex-col items-stretch gap-2 border-b border-line/60 px-3 pb-2.5 pt-2.5"
+          >
+            {chromeModel.replyTo && (
+              <ComposerReplyBar
+                isSubmitting={view.isSubmitting}
+                onCancel={handleCancelReply}
+                replyTo={chromeModel.replyTo}
+              />
+            )}
+            {chromeModel.quote && (
+              <ComposerQuoteBar
+                isSubmitting={view.isSubmitting}
+                onCancel={handleCancelQuote}
+                quote={chromeModel.quote}
+              />
+            )}
+            {composer.editingMessageId && (
+              <ComposerEditBar
+                isSubmitting={view.isSubmitting}
+                onCancel={handleCancelEdit}
+              />
+            )}
+            {chromeModel.mentions && (
+              <ComposerMentionChips
+                isSubmitting={view.isSubmitting}
+                mentions={chromeModel.mentions}
+                onRemove={handleRemoveMention}
+              />
+            )}
+            {chromeModel.mainchain && (
+              <ComposerMainchainStrip
+                mainchainTask={chromeModel.mainchain.mainchainTask}
+                selectedAgentLabel={chromeModel.mainchain.selectedAgentLabel}
+                selectedTargetLabel={chromeModel.mainchain.selectedTargetLabel}
+                targetSelected={chromeModel.mainchain.targetSelected}
+              />
+            )}
+            {chromeModel.attachment && (
+              <ComposerAttachmentBar
+                attachments={chromeModel.attachment.attachments}
+                isSubmitting={view.isSubmitting}
+                onRemove={handleRemoveAttachment}
+                uploadProgresses={chromeModel.attachment.uploadProgresses}
+                {...(onRetryAttachmentUpload ? { onRetryUpload: onRetryAttachmentUpload } : {})}
+              />
+            )}
+            {view.isSubmitting && inFlightUploadSummaries.length > 0 && (
+              <div
+                className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] leading-4 text-muted-foreground"
+                role="status"
+              >
+                {inFlightUploadSummaries.map((summary) => (
+                  <span key={summary.attachmentId}>
+                    {t('composer.uploadingAttachment', {
+                      name: summary.name,
+                      percent: String(summary.percent),
+                      defaultValue: `上传中 ${summary.name} ${summary.percent}%`,
+                    })}
+                  </span>
+                ))}
+              </div>
+            )}
+          </InputGroupAddon>
+        )}
+        <InputGroupTextarea
           aria-label={t('aria.composerInput')}
           aria-expanded={popoverOpen}
           aria-controls={popoverOpen ? listboxId : undefined}
@@ -699,7 +734,7 @@ export function UnifiedComposer({
               : undefined
           }
           data-composer-input
-          className={styles.composerInput}
+          className="max-h-44 min-h-[54px] resize-none rounded-none border-0 bg-transparent px-4 pt-3.5 pb-1.5 text-[0.9375rem] leading-6 text-foreground shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-0"
           ref={setTextareaRef}
           onChange={handleTextChange}
           onCompositionStart={() => {
@@ -726,34 +761,45 @@ export function UnifiedComposer({
           tabIndex={-1}
           type="file"
         />
-        <ComposerAttachButton isSubmitting={view.isSubmitting} onClick={openFilePicker} />
-        {chromeModel.agentOptions && (
-          <ComposerAgentPicker
-            availableMentionOptions={chromeModel.agentOptions}
-            isSubmitting={view.isSubmitting}
-            onSelect={selectMention}
-          />
-        )}
-        {chromeModel.targetPicker && (
-          <ComposerTargetPicker
-            executionTargetId={chromeModel.targetPicker.executionTargetId}
-            executionTargets={chromeModel.targetPicker.executionTargets}
+        <InputGroupAddon
+          align="block-end"
+          className="flex-wrap items-center gap-0.5 border-t border-line/70 px-2 py-1.5"
+        >
+          <ComposerAttachButton isSubmitting={view.isSubmitting} onClick={openFilePicker} />
+          <span aria-hidden="true" className="mx-0.5 h-4 w-px bg-line" />
+          {chromeModel.agentOptions && (
+            <ComposerAgentPicker
+              availableMentionOptions={chromeModel.agentOptions}
+              isSubmitting={view.isSubmitting}
+              onSelect={selectMention}
+            />
+          )}
+          {chromeModel.targetPicker && (
+            <ComposerTargetPicker
+              executionTargetId={chromeModel.targetPicker.executionTargetId}
+              executionTargets={chromeModel.targetPicker.executionTargets}
+              isSubmitting={view.isSubmitting}
+              onChange={handleExecutionTargetChange}
+            />
+          )}
+          <ComposerApprovalModePicker
+            approvalMode={composer.approvalMode}
             isSubmitting={view.isSubmitting}
-            onChange={handleExecutionTargetChange}
+            onChange={(mode) => dispatchComposer({ type: 'setApprovalMode', approvalMode: mode })}
           />
-        )}
-        <ComposerApprovalModePicker
-          approvalMode={composer.approvalMode}
-          isSubmitting={view.isSubmitting}
-          onChange={(mode) => dispatchComposer({ type: 'setApprovalMode', approvalMode: mode })}
-        />
-        <ComposerSendButton
-          hasMentions={view.hasMentions}
-          isRunning={isRunning}
-          onCancel={onCancel}
-          submitDisabled={view.submitDisabled}
-        />
-      </div>
+          <div className="ml-auto flex items-center gap-2 pl-1">
+            <kbd className="hidden rounded border border-line bg-muted/60 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground sm:inline-block">
+              Enter
+            </kbd>
+            <ComposerSendButton
+              hasMentions={view.hasMentions}
+              isRunning={isRunning}
+              onCancel={onCancel}
+              submitDisabled={view.submitDisabled}
+            />
+          </div>
+        </InputGroupAddon>
+      </InputGroup>
       {chromeModel.statusItems && (
         <ComposerStatusStrip statusItems={chromeModel.statusItems} />
       )}
@@ -767,6 +813,7 @@ export function UnifiedComposer({
           onHover={setMentionActiveIndex}
         />
       )}
+      </div>
     </form>
   );
 }
diff --git a/app/workbench/src/UnifiedComposerParts.tsx b/app/workbench/src/UnifiedComposerParts.tsx
index a1e3f2cf8..816ad81be 100644
--- a/app/workbench/src/UnifiedComposerParts.tsx
+++ b/app/workbench/src/UnifiedComposerParts.tsx
@@ -2,8 +2,8 @@
    UnifiedComposer presentational subpanels — barrel module (#706).
 
    Subcomponents live in ComposerContextParts / ComposerAttachmentParts /
-   ComposerControlParts. Pure helpers in ComposerPartsHelpers.
-   CSS remains on shared AgentHubWorkbench.module.css.
+   ComposerControlParts. Pure helpers in ComposerPartsHelpers. Visuals use the
+   shadcn/Tailwind token bridge; no composer chrome remains in the CSS module.
    ═══════════════════════════════════════════════════════════════════════ */
 
 export {
diff --git a/app/workbench/src/inspector/OverviewPanel.module.css b/app/workbench/src/inspector/OverviewPanel.module.css
index d13222109..f8ffe1634 100644
--- a/app/workbench/src/inspector/OverviewPanel.module.css
+++ b/app/workbench/src/inspector/OverviewPanel.module.css
@@ -61,14 +61,14 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--td-space-2);
-  padding: var(--sp-10) var(--td-space-3) var(--td-space-3);
-  border: 1px solid var(--glass-border, var(--td-line));
-  border-radius: var(--glass-card-radius, var(--r-md));
-  background: var(--glass-panel, var(--td-surface));
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: var(--glass-elev-1);
+  gap: 8px;
+  padding: 10px 12px 12px;
+  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+  border-radius: var(--r-md);
+  background: var(--td-surface);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
   transition:
     gap var(--dur-medium) var(--ease-panel),
     border-color var(--td-dur-normal) var(--td-ease),
@@ -76,8 +76,8 @@
 }
 
 .section:hover {
-  border-color: var(--glass-border-strong, var(--td-line-strong));
-  box-shadow: var(--glass-elev-2, var(--td-shadow-sm));
+  border-color: color-mix(in oklch, var(--foreground) 16%, transparent);
+  box-shadow: 0 2px 6px rgb(0 0 0 / 0.04);
 }
 
 .sectionCollapsed {
@@ -112,7 +112,8 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-10);
-  font: 500 0.75rem/1.5 var(--td-font);
+  font: 600 0.71875rem/1.5 var(--td-font);
+  letter-spacing: 0.01em;
 }
 
 .sectionToggle {
diff --git a/app/workbench/src/useWorkbenchPanelLayout.test.ts b/app/workbench/src/useWorkbenchPanelLayout.test.ts
index e307d269c..ae725c889 100644
--- a/app/workbench/src/useWorkbenchPanelLayout.test.ts
+++ b/app/workbench/src/useWorkbenchPanelLayout.test.ts
@@ -400,11 +400,13 @@ describe('useWorkbenchPanelLayout', () => {
     expect(result.current.inspectorCollapsed).toBe(false);
   });
 
-  it('does not auto-collapse the inspector on mount on non-desktop surfaces (#1910)', () => {
+  it('auto-collapses the inspector on mount on narrow non-desktop surfaces', () => {
     setViewportWidth(800);
     const { result } = renderPanelLayout({ platformSurface: 'web' });
-    // The mount-time inspector collapse is Desktop-only.
-    expect(result.current.inspectorCollapsed).toBe(false);
+    // Web has no desktop shell toggle flow; a 400px inspector at 800px
+    // would leave a sub-300px conversation column. Collapse it on mount and
+    // let the header toggle re-open it when the user asks for evidence.
+    expect(result.current.inspectorCollapsed).toBe(true);
   });
 
   it('keeps the sidebar open on non-chat pages regardless of workspace pressure', () => {
diff --git a/app/workbench/src/useWorkbenchPanelLayout.ts b/app/workbench/src/useWorkbenchPanelLayout.ts
index 4c26d109f..aafd29a87 100644
--- a/app/workbench/src/useWorkbenchPanelLayout.ts
+++ b/app/workbench/src/useWorkbenchPanelLayout.ts
@@ -347,19 +347,22 @@ export function useWorkbenchPanelLayout({
   // with a tighter crush threshold (not the live-resize comfort threshold); collapse
   // is one-directional + idempotent and Desktop-only.
   useEffect(() => {
-    if (typeof window === 'undefined' || platformSurface !== 'desktop') return;
-    maybeCollapseSidebarForWorkspacePressure({
-      isChatPage,
-      sidebarCollapsed,
-      viewportWidth: window.innerWidth,
-      sidebarWidth,
-      nextInspectorWidth: inspectorWidth,
-      minWorkspaceWidth: WORKSPACE_MOUNT_COLLAPSE_WIDTH,
-      setSidebarCollapsed,
-    });
-    // At a genuinely narrow Desktop window the fixed 400px inspector column
-    // still crushes the chat main area after the sidebar collapses. Collapse it
-    // on mount as well (one-directional + idempotent); the user can re-open it.
+    if (typeof window === 'undefined') return;
+    if (platformSurface === 'desktop') {
+      maybeCollapseSidebarForWorkspacePressure({
+        isChatPage,
+        sidebarCollapsed,
+        viewportWidth: window.innerWidth,
+        sidebarWidth,
+        nextInspectorWidth: inspectorWidth,
+        minWorkspaceWidth: WORKSPACE_MOUNT_COLLAPSE_WIDTH,
+        setSidebarCollapsed,
+      });
+    }
+    // At a genuinely narrow window the fixed 400px inspector column still
+    // crushes the chat main area after the sidebar collapses. This applies to
+    // Web as well as Desktop: keep one readable conversation column on mount
+    // (one-directional + idempotent); the user can re-open the inspector.
     if (window.innerWidth < WORKSPACE_MOUNT_COLLAPSE_INSPECTOR_WIDTH) {
       setInspectorCollapsedByUser(true);
     }
@@ -393,6 +396,9 @@ export function useWorkbenchPanelLayout({
     function handleViewportResize(): void {
       if (framePending) return;
       framePending = true;
+      if (window.innerWidth < WORKSPACE_MOUNT_COLLAPSE_INSPECTOR_WIDTH) {
+        setInspectorCollapsedByUser(true);
+      }
       if (typeof window.requestAnimationFrame === 'function') {
         rafId = window.requestAnimationFrame(evaluateWorkspacePressure);
       } else {
diff --git a/docs/architecture/07-design-system-ssot.md b/docs/architecture/07-design-system-ssot.md
index 3723e3f62..0f2ae00ed 100644
--- a/docs/architecture/07-design-system-ssot.md
+++ b/docs/architecture/07-design-system-ssot.md
@@ -1,6 +1,6 @@
 # Design system SSOT map
 
-最后更新：2026-10-18
+最后更新：2026-10-19
 
 > 权威入口：本文件是 **design tokens / theme runtime / surface CSS ownership** 的 SSOT map。Design token SSOT 由 `app/shared/src/styles/`（CSS 值）与 `app/shared/src/designTokens.ts`（跨平台 alias / surface rules）共同组成；后者不是第二份颜色值表。
 > 主架构索引：[architecture.md](../architecture.md)。
@@ -16,6 +16,8 @@
 | **Theme preset runtime SSOT** | `app/shared/src/themePresets.ts` (re-exported from `theme.ts`) | preset list, meta, storage key, `data-theme-preset` apply |
 | **Cross-platform alias registry** | `app/shared/src/designTokens.ts` | `--td-*` ↔ web/mobile alias map + surface rules; literal fallbacks must mirror the CSS SSOT |
 | **UI primitives** | `app/shared/src/ui/**` | Shared components + module CSS |
+| **Tailwind / shadcn bridge** | `app/shared/src/styles/shadcn.css` | Maps existing theme tokens into Tailwind v4 colors, radii, fonts and the `data-theme` dark variant; does not fork token values |
+| **Vendored shadcn primitives** | `app/shared/src/shadcn/ui/**` | Upstream registry source copied into the repo. Customize through caller classes/tokens, not by editing the token SSOT |
 | **Workbench shell** | `app/workbench/src/**` | Product shell CSS/TS（独立包 `@agenthub/workbench`） |
 | **Chatview scoped fork** | `app/shared/src/chatview/design/tokens.css` | Re-declares surfaces/text/status under `.chatview` (scoped isolation; value-drift risk) |
 | **Desktop / Web re-exports** | `app/{desktop,web}/src/styles/{tokens,themes,presets}.css` | Thin `@import` of shared（presets.css 另 re-export `presets-folder-colors.css`；无本地覆盖） |
@@ -36,6 +38,9 @@ Entry CSS load: desktop/web `main.tsx` imports surface `styles/{tokens,themes,pr
 7. **Product CSS** uses semantic tokens `--success` / `--danger` / `--primary` / `--bdr` (and related surface tokens). **`--color-*` is legacy alias / preset-private only** — not for new product module consumers.
 8. **Design token gate**：修改 `app/shared/src/styles/` 或 `app/shared/src/designTokens.ts` 后，运行 `pnpm --dir app --filter @agenthub/shared test`；`designTokens.test.ts`、`styles/tokens-base.test.ts`、`styles/surfaceStyles.test.ts` 必须全绿。
 9. **Shared component acceptance**：新组件验收见 [component-acceptance.md](../component-acceptance.md)。
+10. **New chat surfaces** use the vendored shadcn primitives (`Message`, `Bubble`, `InputGroup`, `Attachment`) plus Tailwind utilities whose colors/radii resolve from `shadcn.css`. Do not add a second palette or a component-local radius scale.
+11. **Preflight stays off during migration.** `shadcn.css` imports Tailwind theme + utilities only; enabling Preflight would reset legacy CSS-Module surfaces. Remove this exception only in the change that retires the last migrated module.
+12. **Flat chrome, glass overlays.** Workbench chrome (rail, sidebar, header, inspector, composer) uses flat `--background` / `--surface-dim` surfaces and 9–18% foreground hairlines. Frosted glass remains for transient overlays and previews, not for the persistent shell.
 
 ## 3. Legitimate surface glue (not forks)
 
@@ -51,6 +56,7 @@ Entry CSS load: desktop/web `main.tsx` imports surface `styles/{tokens,themes,pr
 |---|---|---|
 | Syntax-highlight binding pair (`#282c34` bg / `#abb2bf` ink) | Pinned to react-syntax-highlighter `oneDark`, theme-independent（`CodeBlock.tsx` fallbackStyle + `Markdown.module.css` fade gradient，均带 cross-reference 注释） | 若升级改变 `oneDark` palette，两处同一 commit 重检 |
 | Chatview parallel spacing / density | `--chat-sp-md` aliases compat `--space-md` (12px)；lg/xl = 16/24 为独立密度；radius/type/dark 为独立 fork | Full merge + dark palette needs deliberate redesign |
+| Chat surface migration | Composer + message rows now use shadcn primitives; remaining CSS-Module shell rules are being retired slice by slice | Delete a module rule only in the same change that removes its last consumer |
 | Workbench raw `px` spacing | 可映射 spacing 已走 `--sp-*` / `--space-*`；odd steps remain raw | Optional: scale extension or redesign normalize |
 | Mobile RN theme deltas | Open | 保留已登记 delta：glass proxy / OLED / scrim；token 注册表从共享设计 token 派生 |
 | IM panels local rgba chrome | Open | Hardcode pass to semantic / glass tokens |
@@ -87,6 +93,7 @@ Applied first to AuxPanel and TerminalPanel. Respect `prefers-reduced-motion`.
 | Layer | SSOT |
 |---|---|
 | Capture matrix (merge gate) | `app/desktop/scripts/visual-qa-shell.mjs` + `app/web/scripts/visual-qa-shell.mjs`；两端 `package.json` 均以 `visual:qa:shell` 暴露；标准审阅矩阵为 **1440×810** light+dark · DPR **1x default** |
+| Chat path capture | `app/web/scripts/visual-qa-chat.mjs` (`visual:qa:chat`)：1440×810 light+dark 主场景 + 768×900 goal scene；断言 code block / tool card / goal banner 与横向溢出合同 |
 | Supplemental narrow captures | 同一 gate 额外生成并断言 Web **768×900**、Desktop **800×900** 的 light+dark 截图与 DOM/几何合同；这些宽度不替代 1440×810 标准审阅矩阵 |
 | CI | web：`visual-qa-shell` job；desktop：`visual-qa-desktop` job（均 path-filtered `shell`，chromium only，非空白断言 + artifact 上传，禁 pixel golden） |
 | Gate assertions | `app/{desktop,web}/scripts/assert-visual-qa-shell.mjs` · `assert:visual:qa:shell` |
diff --git a/docs/component-acceptance.md b/docs/component-acceptance.md
index 84be3831a..7888050ea 100644
--- a/docs/component-acceptance.md
+++ b/docs/component-acceptance.md
@@ -1,6 +1,6 @@
 # AgentHub 组件验收标准（component-acceptance）
 
-最后更新：2026-10-18
+最后更新：2026-10-19
 
 本文是 AgentHub shared 组件的**验收标准 SSOT**：任何 `app/shared/src/ui/` 下的新组件（或对既有组件做可见行为改动）必须对照本文件的 5 维验收标准验收。Token 与主题规则见 `docs/architecture/07-design-system-ssot.md`；产品级截图证据按该文 §7 的 Visual QA gate 组织。
 
@@ -14,6 +14,8 @@
 
 已有组件缺件时按同规则补件，不能以“旧组件”为由跳过。新增组件复制上述 5 个维度的表结构；修改组件后更新该表，不得保留过期勾选。
 
+**Vendored shadcn primitives are the exception.** Files under `app/shared/src/shadcn/ui/` are upstream registry source, not product-authored components. They keep a focused render/attribute test in the same directory and are customized only through caller classes and the token bridge in `app/shared/src/styles/shadcn.css`. Product wrappers around them (for example `UnifiedComposer` and `UserMessage`) still follow the full five-dimension acceptance bar.
+
 ## 5 维验收标准
 
 每维按 必选 / 可选 分级。必选不满足 = 验收不通过；可选不满足 = 记录为 debt，注明 owner 与计划。