diff --git a/components.json b/components.json
deleted file mode 100644
index 4e5a9eb..0000000
--- a/components.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/client/ui/theme.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "src/client/ui",
-    "ui": "src/client/ui",
-    "lib": "src/client/ui",
-    "utils": "src/client/ui/utils",
-    "hooks": "src/client/ui"
-  }
-}
diff --git a/docs/external-plugin-guide.md b/docs/external-plugin-guide.md
index 73665de..57605b6 100644
--- a/docs/external-plugin-guide.md
+++ b/docs/external-plugin-guide.md
@@ -1004,32 +1004,6 @@ interface SettingsDescriptor {
 - 类名是 CSS Modules 哈希，**不是契约**；精确命中用 `[data-dsh-better-sidebar]` + 子串类名（`[class*='panel']`）或 DOM 结构。
 - 改动本契约必须同步本文档、设计文档与 `tests/theme.spec.ts`。
 
-### 12.3 在插件里用 Tailwind / shadcn/ui
-
-本仓库自己的任务管理页（v0.20 起）就是这套姿势的参考实现：组件源码 vendoring 在 `src/client/ui/`，样式由 Tailwind v4 编译，颜色全部经 shadcn 语义令牌桥接到 `--dsw-*`。你的插件照做即可自动兼容全部皮肤；**接入的难点只有三条，其余都是常规 Tailwind**。
-
-**① 只引 `theme` + `utilities`，绝不引 preflight。** 插件的 CSS 最终是全局 `<style data-plugin>`（没有 shadow DOM），`@import "tailwindcss"` 连带的 preflight 会重置**整张 DSH 宿主页面**（会话正文、原生右侧栏、设置页）。唯一合法的入口形状：
-
-```css
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-@source "../**/*.tsx";   /* 显式限定扫描面，否则 Tailwind 会连 lib/、node_modules/ 一起扫 */
-```
-
-| 现象 | 原因 |
-|---|---|
-| 自己的 `.rounded-md` 被宿主样式压过 | 宿主样式表是**无层级（unlayered）**的，无层级声明优先于任何 `@layer` 内的声明（与特异性无关）。补偿方式是把重置放进层里并抬到**类特异性**、挂在页面自己的作用域根类上（本仓库是 `.dsw-tasks`：`color` / `:where(...)` 的 `box-sizing` 与 `font: inherit` / `focus-visible` 环），而不是去动宿主 |
-| 深浅主题下颜色不翻 | DSH 的主题翻转是给 `<body>` 打 `data-ds-dark-theme`，不是加 `.dark` 类。若确需 `dark:` 变体，先定义 `@custom-variant dark (&:where([data-ds-dark-theme], [data-ds-dark-theme] *))`——但**令牌本身就是翻转的**，绝大多数情况下写 `dark:` 是双重记账，不要写 |
-
-**② 令牌桥接到 `--dsw-*`，颜色零字面量。** 在 `:root` 里把 shadcn 语义名接上 DSH 令牌（`--background: var(--dsw-alias-bg-base)`、`--card: var(--dsw-alias-bg-layer-1)`、`--popover: var(--dsw-alias-bg-layer-2)`、`--border: var(--dsw-alias-border-l4)`、`--primary: var(--dsw-alias-state-business-primary)`、`--muted-foreground: var(--dsw-alias-label-secondary)`、`--destructive: var(--dsw-alias-state-error-primary)` …），再用 `@theme inline { --color-background: var(--background); … }` 接成 Tailwind 工具类。`inline` 保证产物里留着这层间接，宿主皮肤改令牌能立刻生效。**禁止** `#hex` / `rgb()` / `oklch()` 字面量，也**禁止** Tailwind 默认调色板类（`bg-blue-500` / `text-white`）——后者的值是 Tailwind 自己的主题，不是 DSH 的。完整映射表见[任务页设计文档](./plans/2026-09-14-tasks-graph-workflow-teams-design.md)的「shadcn 令牌 → `--dsw-*` 映射表」。
-
-**③ 静态面板零阴影。** 阴影是**层级**手段，不是装饰：卡片、节点、行、面板互相叠加的投影是「节点一多就辣眼睛」的直接原因。静态面板的层级改用 **1px hairline（`border-border`）+ 表面阶梯（`background` → `card`/layer-1 → `popover`/layer-2）+ 三档墨色**承载；`shadow-*` 只允许出现在真正浮动、由自己锚定几何定位的层（popover / dropdown-menu / tooltip / 可拖动窗口）。上游 shadcn 组件默认给 card / input / textarea / toggle / toggle-group 都带 `shadow-xs`/`shadow-sm`，vendoring 时要逐处删掉。
-
-**另外两条与皮肤无关但同样会遇到**：
-
-- **图标用宿主图标，不引 `lucide-react`**：`@deepseek-ai/dsh-client-ui-primitives` 的 `IconXxx` 是平台模块（`size` / `className` 两个 props，颜色靠 `currentColor`），宿主图标渲染的就是 `svg`，所以 shadcn 组件里的 `[&_svg]` / `[&_svg:not([class*='size-'])]:size-4` 选择器照旧成立。引 lucide 会把整套图标内联进你的 bundle。
-- **vendoring 而不是新增重依赖**：`npx shadcn add <component>` 把源码落进你自己的目录（本仓库 `components.json` 的 aliases 全部指向 `src/client/ui`），依赖只增加 `radix-ui` / `class-variance-authority` / `clsx` / `tailwind-merge` 这四个可 tree-shake 的包；`tailwindcss` 与 `@tailwindcss/postcss` 只进 devDependencies（运行期产物是编译后的 CSS）。落盘后**逐文件复核**：CLI 默认会写 `import { cn } from "cn"`（npm 上真有一个同名包）、带回 `dark:` 颜色覆写、带回被删的 `shadow-xs` / `text-white` 与未使用的变体。升级上游组件用 `npx shadcn@latest add <component> --diff`，只取结构性更新再重新施加自己的删改，**不要**用 `--overwrite`。
-
 ---
 
 ## 13. 完整最小示例
diff --git a/docs/plans/2026-09-14-tasks-graph-workflow-teams-design.md b/docs/plans/2026-09-14-tasks-graph-workflow-teams-design.md
index 33b103b..f491305 100644
--- a/docs/plans/2026-09-14-tasks-graph-workflow-teams-design.md
+++ b/docs/plans/2026-09-14-tasks-graph-workflow-teams-design.md
@@ -147,7 +147,9 @@ PR：[#680](https://github.com/omdsh-dev/DSH-better-sidebar/pull/680)（分支 `
 
 未在本机自动化验证、留给用户实机确认的一项：3384 桌面应用**重启后**的 UI 级复看（新 bundle 已装进 `~/.dsh/profiles/web`，与仓库构建产物 SHA-256 一致）。
 
-## shadcn/ui 迁移（2026-09-17，视觉基座替换）
+## shadcn/ui 迁移（2026-09-17，视觉基座替换）—— 已废弃
+
+> **已废弃（2026-09-21 整体回退）**：本节及其后全部子节（依赖与实际版本 / Tailwind 接入方式 / 令牌映射表 / vendored 组件清单 / 阴影策略 / 体积与 mount 结果 / 真机排障 / stock 风格回调 / 升级路径与本地适配清单 / 页面重组）记录的是 2026-09-17–09-21 期间任务页的 shadcn/ui 视觉基座。该基座已整体回退到插件自有体系，回退根因见文末「回退：任务页回到插件自有体系（2026-09-21，shadcn 层废弃）」。保留全文只为留下排障现场与决策证据——**其中描述的接入方式不再是本仓库或消费插件的建议做法**。
 
 三轮返工把**行为**收敛到位（统一的详情窗口、常驻任务板、可拖动浮窗），但**视觉基座**仍是自建：
 
@@ -397,3 +399,45 @@ npx -y shadcn@latest add button card badge separator input textarea tooltip popo
 2. **`<Spinner size={12} />` 类型合法但静默失效**：刷新后的 Spinner 变成 `React.ComponentProps<"span">`，`size` 是合法 HTML 属性 → typecheck 全绿而图标按默认 `size-4` 渲染。改用 `className="size-3"`。**教训：组件 API 变更中"仍然类型合法但语义丢失"的那类最危险，只有看渲染结果才能发现。**
 
 **已知未修（记录在案）**：抽屉行在 ~420px 以下的窄宽度里会横向溢出（Radix ScrollArea 的 table 视口按 min-content 计算 + 行内 `nowrap` 的 mono 标题），修复需要重新决定 ScrollArea/行的最小宽度策略；宽面板（用户实机）不受影响。
+
+---
+
+## 回退：任务页回到插件自有体系（2026-09-21，shadcn 层废弃）
+
+任务页 2026-09-17 换成 shadcn/ui + Tailwind v4 视觉基座，09-20 又按「对齐上游 stock」回调一轮；09-21 判定该基座与本插件的体系不可调和，整体回退。
+
+**改动面**：8 个页面文件（`TasksGraph` / `TasksTree` / `TaskWindow` / `TeamBoard` / `JobsDrawer` / `TasksPopovers` / `SubagentView` / `tasks-shared`）以 `12b4716` 的原生实现（CSS Modules + 宿主 `@deepseek-ai/dsh-client-ui-primitives`）为基线重建，`src/client/ui/**`（23 个文件）、`components.json`、`scripts/ui-css.mjs` 与其 `ui:css` 脚本删除；`radix-ui` / `class-variance-authority` / `tailwind-merge` / `tailwindcss` / `@tailwindcss/postcss` / `postcss` 六个依赖下线；`tasks` 懒加载 chunk 与 `CHUNK_NAMES` 的 `tasks` 项一并取消（回到 `terminal` / `editor` / `mermaid` / `locale` 四项）。**回退只换视觉基座：09-17–09-21 期间的行为修复逐条重新落地**（见下「保留的行为修复」）。
+
+### 回退根因
+
+1. **默认尺度与插件体系冲突（最直接的一条）**：stock shadcn 的正文是 `text-sm`(14px)、meta `text-xs`(12px)、控件按 `h-9`(36px) 起；本插件的语言是正文 12px / meta 11px / 微标 10px、控件 28px（`sidebar.module.css` 的图标按钮即为 28px 方）。要贴合就得把 stock 的每个尺寸逐处改回去——那等于不用 shadcn，只是多背一层工具类。09-20 的「stock 回调」正是这条冲突的产物：字号一放开，`GRAPH_NODE_W` 132px 的图节点标题只剩约 7 个汉字（“图形重布重写”被截成“图…”），两轮下来只能把宽度 132→150→176 并改两行标题救场。
+2. **层级语义冲突**：shadcn 给静态组件默认带投影（card `shadow-sm`，input / textarea / toggle / button-outline `shadow-xs`）；本插件的语言是**静态面板无阴影**（层级 = 1px `--dsw-alias-border-l2` + hairline `--dsw-alias-border-l1` + 表面阶梯 + 墨色三档），只有浮层用 `--dsw-shadow-lv2/3`。第一轮把静态阴影全删了，stock 回调又把它们恢复成 stock——两次改的都是同一份 vendored 源码，每次跟上游 `--diff` 都要重新施加。
+3. **彩色语义是第二套词汇表**：shadcn 的 `primary` / `secondary` / `muted` / `accent` / `destructive` 与 DSH 的 `--dsw-alias-state-*` / `--dsw-alias-interactive-bg-hover` 并非一一对应，任务状态（进行中 / 阻塞 / 完成 / 错误）还要再自造 `--success` / `--warning` 两个非 stock 令牌，整张映射表 22 条必须逐条维护：`--border` 先桥到 `--dsw-alias-border-l4`、09-20 又改成 `l2`，只因为 shadcn 的 1px 边框语义变了——而 `l2`（1px 边框）/ `l1`（hairline）的分工本来就是本插件自己的契约，不必经过第三层命名。
+4. **不引 preflight 就得自己补一套**：插件注入的是全局 `<style data-plugin>`（无 shadow DOM），引 Tailwind 完整入口会重置整张宿主页面，所以只能引 `theme` + `utilities`；表单控件因此保留 UA 外观，真机反馈「任务页看起来完全没有 CSS，边框非常模糊」的根因即在此。补救是在 `theme.css` 写限定 `.dsw-tasks` 作用域的 preflight 子集 + 显式 `@layer theme, base, components, utilities;` 层序声明 + 页面根类。**这整套补偿只为承载 Tailwind 而存在**，原生 CSS Modules 不需要。
+5. **架构代价**：radix 浮层栈 + `tailwind-merge` 把核心包撑到 1452623 bytes（+457.6 KiB，超 +250 KiB 预算），处置是把任务页整体下沉为懒加载 chunk（`lib/client-tasks.js` 706.7 KiB，`CHUNK_NAMES` 加 `tasks`、`package.json#files` 补 glob）。原生实现下这些负载不存在，`tasks` chunk 随回退下线。
+6. **vendored 源码的持续负担**：每个 vendored 组件的本地适配（`cn` 改 `./utils`、图标换宿主 `IconXxx`、删 `dark:` 覆写、`text-white` → 令牌、React 18 的 `forwardRef`）都要跟着上游逐次重放；`popover.tsx` / `skeleton.tsx` 自始至终没有消费者。
+
+### 结论（写给消费插件）
+
+**嵌入式插件沿用宿主体系**：样式用 CSS Modules + `--dsw-*` 令牌（参考 `src/client/sidebar.module.css` / `src/client/changes/changes.module.css` / `src/client/SideChatView.module.css`），控件与图标用宿主 `@deepseek-ai/dsh-client-ui-primitives` 的 `Button` / `Menu` / `Modal` / `Pill` / `Tag` / `Switch` / `Input` / `Tooltip` / `StateDot` / `MarkdownText` / `DisclosureRow` 与 `IconXxx`；不引 Tailwind / radix / CVA / lucide，不自绘 svg（连线几何除外）。插件样式表是**全局作用域**的，任何自带 reset 或工具类的方案都要额外处理与宿主无层级样式表的优先级关系——这是本插件选择自有体系的直接原因。
+
+### 保留的行为修复（与视觉基座无关，已在原生实现上重新落地）
+
+| 修复 | 位置 | 守护 |
+|---|---|---|
+| 节点 id 去重：workflow member 的 `childId` 不在 run 发起者 catalog 里、但存在于树中别处时不再合成同 id 的第二张卡片；返回前兜底去重 | `src/client/tasks-model.ts` | `tests/tasks-model.spec.ts` |
+| 任务窗口 CAS：编辑 / 改派携带 `expectedRevision`，冲突不吞 | `src/client/TaskWindow.tsx` | `tests/tasks-page.spec.tsx` |
+| 后台任务终止两击确认（首击 arm、二击才发 `jobs.kill`） | `src/client/JobsDrawer.tsx` | `tests/subagent-jobs-view.spec.tsx` |
+| 后台任务抽屉 ≥8 代理自动折叠，条形按钮 `aria-expanded` 可展开 | `src/client/JobsDrawer.tsx` | `tests/tasks-page.spec.tsx` |
+| 输出浮窗可拖动；稳定 `data-*` 钩子（`data-graph-node` / `data-graph-controls`）不变 | `AnchoredPopover.tsx` / `TasksGraph.tsx` | `tests/tasks-page.spec.tsx` |
+
+### 测试与文档清扫
+
+- 删除三个守 shadcn 层的 spec：`tests/ui-foundation.spec.ts`（Tailwind 入口 / 令牌桥 / 层序 / 作用域 reset）、`tests/ui-bundle.spec.ts`（核心包与 chunk 的体积与产物断言）、`tests/ui-shadows.spec.ts`（静态面板阴影白名单）。
+- `tests/theme.spec.ts` 去掉指向 `src/client/ui/**` 与令牌桥的一节，保留「图标模块零颜色字面量」与「每条 `color:` 解析到主题令牌」，后者从 tab 图标单表扩展到 `src/client/**/*.module.css` 全量（`color-mix()` / `var()` 链同样按令牌逐个校验，`inherit` / `currentcolor` / `transparent` 视为「不自己上色」）。
+- `tests/bundle-route.spec.ts` 的 `CHUNK_NAMES` 期望回到 4 项；`tests/manifest-consistency.spec.ts` 的「每个 chunk 都被 `package.json#files` 覆盖」断言保留，列表继续从 `CHUNK_NAMES` 派生（不手抄）。
+- `README.md` 两处「视觉基座为 shadcn/ui + Tailwind v4」描述删除；`docs/external-plugin-guide.md` 删除 §12.3「在插件里用 Tailwind / shadcn/ui」整节（含 preflight 规避、令牌桥、静态面板零阴影三条）。
+
+### 验收（回退后，2026-09-21）
+
+`pnpm typecheck` ✅ 0 错误；`pnpm lint` ✅ 0 错误；`pnpm vitest run` **133 文件通过 / 1410 用例通过 / 9 skipped / 0 失败**（回退前：4 个文件失败，其中 `theme.spec.ts`、`ui-foundation.spec.ts` 在收集期就因 `src/client/ui/theme.css` 缺失报 ENOENT，`ui-shadows.spec.ts` 2 例、`bundle-route.spec.ts` 1 例断言失败）。
diff --git a/docs/plans/2026-09-17-dsh-0.1.6-alpha.2-adaptation.md b/docs/plans/2026-09-17-dsh-0.1.6-alpha.2-adaptation.md
index d94ebf8..924a8b4 100644
--- a/docs/plans/2026-09-17-dsh-0.1.6-alpha.2-adaptation.md
+++ b/docs/plans/2026-09-17-dsh-0.1.6-alpha.2-adaptation.md
@@ -47,6 +47,8 @@ peer 范围、`dsh.client.inject`、chunk externals 白名单、`SIDEBAR_SERVICE
 - `pnpm build` → 成功；`ui-bundle` 守卫仍绿（核心包 835.6 KiB、chunk 709.8 KiB、无 preflight/oklch/lucide）。
 - `pnpm test:mount`（`DSH_CMD="npx -y --package @deepseek-ai/dsh@0.1.6-alpha.2 dsh"`，真实挂载 + 无头 tab 全扫）→ **7/7**；`PERF_SUMMARY mount=480ms longtasks=2/221ms`（预算 ≤8）；资源清单里 `/sidebar/bundle/tasks.js` **真实下载**（`decodedBodySize 726905`），懒加载路径在 alpha 线上同样成立。
 
+> **注（2026-09-21 回退后）**：上面两条引用的 `ui-bundle` 守卫与 `tasks` 懒加载 chunk（`/sidebar/bundle/tasks.js`）都是 shadcn/ui 视觉基座时期的产物，该基座已整体回退（见 [2026-09-14 任务页设计文档](./2026-09-14-tasks-graph-workflow-teams-design.md) 文末「回退：任务页回到插件自有体系」）：`src/client/ui/**`、`ui-bundle` spec 与 `tasks` chunk 均已删除，任务页回到核心包 + 原生 CSS Modules。以上数字是当时的实测记录，原样保留。
+
 ## CI 钉版为什么留在 rc.2（含证伪过程）
 
 第一版把挂载车道也钉到 `0.1.6-alpha.2`，CI 的 `plugin-mount` **确定性失败**（重跑同样红）：`mount.e2e.ts:216` 等 `[data-dsh-better-sidebar] [title]`（插件底部工作台 tab 条）90s 不出现，`perf.e2e.ts:182` 同样卡在底部拖拽条。失败截图显示外壳正常但**没有活动会话**（会话面板停在空态占位），按 e2e 自己的注释「没有 session scope → 工作台没有 pane」推断：alpha 线在 CI 上不再自动激活 scratch profile 的种子会话。
diff --git a/scripts/ui-css.mjs b/scripts/ui-css.mjs
deleted file mode 100644
index 568b8d8..0000000
--- a/scripts/ui-css.mjs
+++ /dev/null
@@ -1,32 +0,0 @@
-#!/usr/bin/env node
-/**
- * Compile the plugin's Tailwind entry (src/client/ui/theme.css) to a standalone
- * stylesheet.
- *
- * The production path is tsdown's css-inline plugin (tsdown.config.ts), which
- * inlines the compiled CSS into lib/client.js as a `<style data-plugin>` tag.
- * The local visual harness (/tmp/dsh-visual) instead renders the REAL task-page
- * components against a tokens stylesheet in a plain HTML page, so it needs the
- * same utilities as a file it can `<link>` — this script is that file, built
- * from the same pipeline (tsdown.config.ts exports `compileTailwind`) so the two
- * cannot drift.
- *
- * Usage: node scripts/ui-css.mjs [outFile]   (default /tmp/dsh-visual/tailwind.css)
- */
-import { mkdir, readFile, writeFile } from 'node:fs/promises'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { compileTailwind } from '../tsdown.config.ts'
-
-const ROOT = fileURLToPath(new URL('..', import.meta.url))
-const ENTRY = resolve(ROOT, 'src/client/ui/theme.css')
-const DEFAULT_OUT = '/tmp/dsh-visual/tailwind.css'
-
-const outFile = resolve(process.argv[2] ?? DEFAULT_OUT)
-// `from`/`base` stay anchored to the real entry file, so `@source` and
-// `@import` resolve against src/client/ui regardless of the cwd we run from.
-const source = await compileTailwind(await readFile(ENTRY, 'utf8'), ENTRY, { minify: false })
-
-await mkdir(dirname(outFile), { recursive: true })
-await writeFile(outFile, source)
-process.stdout.write(`ui:css -> ${outFile} (${source.length} bytes)\n`)
diff --git a/src/client/AnchoredPopover.tsx b/src/client/AnchoredPopover.tsx
index 84a690d..e84ffe1 100644
--- a/src/client/AnchoredPopover.tsx
+++ b/src/client/AnchoredPopover.tsx
@@ -155,10 +155,11 @@ export function AnchoredPopover(props: AnchoredPopoverProps): ReactNode {
       ref={cardRef}
       role="dialog"
       // Presentation only: geometry stays inline (the drag math owns
-      // `left`/`top`/`width`), the surface takes the shadcn popover tokens, and
-      // `box-border` keeps the declared width the measured width so the drag
-      // clamp above stays exact.
-      className="box-border rounded-lg border border-border bg-popover text-popover-foreground shadow-lg"
+      // `left`/`top`/`width`). The wrapper is a bare positioning box — the
+      // surface the reader sees is the card the caller renders inside it
+      // (`popCard`): fill, 1px `border-l2` edge and the floating shadow. With
+      // no padding or border of its own, the declared width is the measured
+      // width, so the drag clamp above stays exact.
       style={{
         position: 'fixed',
         left: pos?.left ?? -9999,
diff --git a/src/client/JobsDrawer.tsx b/src/client/JobsDrawer.tsx
index f2ab857..738c9c7 100644
--- a/src/client/JobsDrawer.tsx
+++ b/src/client/JobsDrawer.tsx
@@ -11,25 +11,12 @@
  * cursor), with a copy action, a follow-latest switch, the two-click kill,
  * and a terminal-style tail while the job runs.
  *
- * Composition: the vendored shadcn set carries every surface. The drawer is a
- * `Collapsible` whose rows are `Item`s (`ItemGroup` → `Item` + `ItemActions`,
- * the row whose output is open taking the `muted` variant); the popover's
- * identity block is an `Item` (media / content / actions) and its footer an
- * `Item` holding the host `Switch` and the kill `Button`; hairlines are
- * `Separator`s, status ink rides the stock `Badge` variants, and the loading
- * line is the vendored `Spinner`. Hierarchy comes from the 1px `border-border`
- * hairline plus the surface ladder (`bg-background` → `bg-muted` on hover) —
- * the static drawer carries no shadow; the only float is the popover card,
- * whose surface/shadow belong to AnchoredPopover. Body copy is text-sm, meta
- * text-xs, identifiers/durations `font-mono tabular-nums`.
- *
- * `className` is used for layout only (the components own their color and
- * type), every icon is a host `IconXxx` glyph, and every other control is a
- * host primitive (`Switch` / `StateDot`).
+ * Every control is a host primitive (Button / Tag / Switch / StateDot).
  */
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import {
-  IconChevronUpOutline14, IconCopyOutline16, IconStopFill16, StateDot, Switch,
+  Button, IconChevronUpOutline14, IconCopyOutline16, IconStopFill16, StateDot, Switch, Tag,
+  type TagTone,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SidebarJobView } from '../context-types.ts'
 import {
@@ -41,14 +28,7 @@ import {
 } from './subagent-jobs.ts'
 import { api, type JobOutputResult } from './api.ts'
 import { t } from './locales.ts'
-import { Badge } from './ui/badge.tsx'
-import { Button } from './ui/button.tsx'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.tsx'
-import { Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle } from './ui/item.tsx'
-import { ScrollArea } from './ui/scroll-area.tsx'
-import { Separator } from './ui/separator.tsx'
-import { Spinner } from './ui/spinner.tsx'
-import { cn } from './ui/utils.ts'
+import css from './tasks-graph.module.css'
 
 /** Refresh cadence of an open job-output popover while its job runs. */
 const JOB_POLL_MS = 2000
@@ -57,23 +37,12 @@ const JOB_KILL_ARM_MS = 3000
 /** The agent count at which the drawer starts collapsed. */
 export const JOBS_DRAWER_COLLAPSE_AT = 8
 
-/**
- * The status badge's stock shadcn variant: running = `default` (the accent),
- * failed = `destructive`, settled/ending = `secondary`.
- */
-function statusVariant(job: SidebarJobView): 'default' | 'secondary' | 'destructive' {
-  if (job.status === 'running') return 'default'
-  if (job.status === 'failed') return 'destructive'
-  return 'secondary'
-}
-
-/** The meta chip of one job kind: the stock `outline` variant, mono figures. */
-function KindBadge(props: { kind: string }): ReactNode {
-  return (
-    <Badge variant="outline" className="flex-none font-mono font-normal text-muted-foreground">
-      {props.kind}
-    </Badge>
-  )
+/** The Tag tone of one job status. */
+function jobTone(job: SidebarJobView): TagTone {
+  if (job.status === 'running') return 'info'
+  if (job.status === 'completed') return 'success'
+  if (job.status === 'failed') return 'danger'
+  return 'neutral'
 }
 
 export interface JobsDrawerProps {
@@ -140,151 +109,83 @@ export function JobsDrawer(props: JobsDrawerProps): ReactNode {
     : t('jobsCount', { count: rows.length })
 
   return (
-    <Collapsible
-      open={open}
-      onOpenChange={(next: boolean) => { setManualOpen(next) }}
-      role="region"
-      aria-label={t('jobs')}
-      className="z-[5] flex-none bg-background"
-    >
-      {/* The drawer's top edge: the stock hairline (the bar itself carries the
-          surface, the rows own their own rhythm). */}
-      <Separator />
-      {/* The bar keeps the drawer's whole toggle affordance (title, running
-          tally, count line) and Radix owns aria-expanded / aria-controls. */}
-      <CollapsibleTrigger
-        className="flex w-full cursor-pointer items-center gap-2 rounded-none border-0 bg-transparent px-3 py-[7px] text-left font-mono text-xs tracking-[0.12em] text-muted-foreground uppercase transition-colors outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
+    <section className={css.jobsDrawer} aria-label={t('jobs')}>
+      <button
+        type="button"
+        className={css.jobsDrawerBar}
+        aria-expanded={open}
+        onClick={() => { setManualOpen(!open) }}
       >
         <span>{t('jobs')}</span>
-        <span className="text-sm font-semibold text-primary tabular-nums">
-          {liveCount > 0 ? liveCount : rows.length}
-        </span>
-        <span className="tracking-[0.02em] text-foreground-3 normal-case">{countLabel}</span>
-        <span
-          className={cn(
-            'ml-auto inline-flex text-foreground-3 transition-transform duration-150',
-            open && 'rotate-180',
-          )}
-          aria-hidden="true"
-        >
+        <span className={css.jobsBigNum}>{liveCount > 0 ? liveCount : rows.length}</span>
+        <span className={css.jobsDrawerCount}>{countLabel}</span>
+        <span className={css.jobsDrawerChev} data-open={open ? 'true' : 'false'} aria-hidden="true">
           <IconChevronUpOutline14 size={12} />
         </span>
-      </CollapsibleTrigger>
-      {!autoOpen && (
-        <div className="px-3 pb-2 font-mono text-xs text-foreground-3">{t('jobsAutoCollapsed')}</div>
-      )}
-      <CollapsibleContent>
-        <Separator />
-        {/* Bounded log surface: one `Item` row per job, separated by the
-            rows' own 4px rhythm rather than per-row borders. The height is
-            definite (not `max-h`) because ScrollArea's viewport is `size-full`:
-            a bare max-height leaves the viewport content-sized, so the rows
-            would spill out of the drawer instead of scrolling. */}
-        <ScrollArea className="h-[156px] w-full min-w-0">
-          <ItemGroup className="min-w-0 gap-0.5 px-2 pt-1 pb-2">
-            {rows.map((row) => {
-              const { job } = row
-              const live = isJobLive(job)
-              const armed = armedId === job.id
-              const killing = killingId === job.id
-              const killFailed = killErrorId === job.id
-              const elapsed = live
-                ? now - job.startedAt
-                : (job.finishedAt ?? job.startedAt) - job.startedAt
-              const duration = formatJobDuration(elapsed, t)
-              // The owner/detail tail; the duration is its own tabular-nums
-              // cell, while the accessible name keeps the exact
-              // `owner · detail · duration` string it always had.
-              const context = [
-                ...(multiOwner ? [row.ownerTitle] : []),
-                ...(job.detail !== undefined && job.detail !== '' ? [job.detail] : []),
-              ].join(' · ')
-              const secondary = [context, duration].filter(Boolean).join(' · ')
-              return (
-                <Item
-                  key={job.id}
+      </button>
+      {!autoOpen && <div className={css.jobsAutoNote}>{t('jobsAutoCollapsed')}</div>}
+      {open && (
+        <div className={css.jobsDrawerBody}>
+          {rows.map((row) => {
+            const { job } = row
+            const live = isJobLive(job)
+            const armed = armedId === job.id
+            const killing = killingId === job.id
+            const killFailed = killErrorId === job.id
+            const elapsed = live
+              ? now - job.startedAt
+              : (job.finishedAt ?? job.startedAt) - job.startedAt
+            const secondary = [
+              ...(multiOwner ? [row.ownerTitle] : []),
+              ...(job.detail !== undefined && job.detail !== '' ? [job.detail] : []),
+              formatJobDuration(elapsed, t),
+            ].filter(Boolean).join(' · ')
+            return (
+              <div
+                key={job.id}
+                className={css.jobsRow}
+                data-settled={live ? 'false' : 'true'}
+                data-open={openJobId === job.id ? 'true' : 'false'}
+              >
+                <Button
+                  variant="ghost"
                   size="sm"
-                  // The row whose output is open wears the muted surface (the
-                  // stock Item variant) instead of a one-off background class.
-                  variant={openJobId === job.id ? 'muted' : 'default'}
-                  data-settled={live ? 'false' : 'true'}
-                  data-open={openJobId === job.id ? 'true' : 'false'}
-                  className={cn(
-                    'min-w-0 flex-nowrap gap-2 rounded-md px-1.5 py-1 transition-colors hover:bg-muted',
-                    // A settled job recedes by ink (the label line drops to the
-                    // secondary level), not by opacity.
-                    !live && 'text-muted-foreground',
-                  )}
+                  className={css.jobsRowMain}
+                  aria-label={`${job.label} ${jobStatusLabel(job.status, t)} ${secondary}`}
+                  title={t('jobViewOutput')}
+                  onClick={(event) => { onOpenOutput(row, event.currentTarget) }}
                 >
+                  <StateDot state={jobDotState(job.status)} size={6} />
+                  <Tag tone="quiet">{job.kind}</Tag>
+                  <span className={css.jobsLabel} title={job.label}>{job.label}</span>
+                  <Tag tone={jobTone(job)}>{jobStatusLabel(job.status, t)}</Tag>
+                  <span className={css.jobsMeta}>{secondary}</span>
+                </Button>
+                {job.status === 'running' && (
                   <Button
-                    variant="ghost"
+                    variant="outline"
                     size="sm"
-                    className="h-auto min-w-0 flex-1 justify-start gap-2 px-0 py-0 text-left"
-                    aria-label={`${job.label} ${jobStatusLabel(job.status, t)} ${secondary}`}
-                    title={t('jobViewOutput')}
-                    onClick={(event) => { onOpenOutput(row, event.currentTarget) }}
+                    className={css.jobsKill}
+                    data-armed={armed ? 'true' : 'false'}
+                    icon={<IconStopFill16 size={11} />}
+                    aria-label={armed ? t('jobKillConfirm') : t('jobKill')}
+                    title={armed ? t('jobKillConfirm') : t('jobKill')}
+                    disabled={killing}
+                    onClick={() => {
+                      if (armed) void kill(row)
+                      else setArmedId(job.id)
+                    }}
                   >
-                    {/* `size-1.5` opts the dot out of the Button's
-                        `[&_svg:not([class*='size-'])]:size-4` rule (the
-                        running state draws an svg, the others a span), so the
-                        indicator keeps its 6px. */}
-                    <StateDot state={jobDotState(job.status)} size={6} className="size-1.5" />
-                    <KindBadge kind={job.kind} />
-                    <span
-                      className={cn(
-                        'min-w-0 flex-1 truncate font-mono text-sm',
-                        live ? 'text-foreground' : 'text-muted-foreground',
-                      )}
-                      title={job.label}
-                    >
-                      {job.label}
-                    </span>
-                    <Badge variant={statusVariant(job)} className="flex-none">
-                      {jobStatusLabel(job.status, t)}
-                    </Badge>
-                    {context !== '' && (
-                      <span className="max-w-[45%] shrink-0 truncate text-xs text-muted-foreground">
-                        {context}
-                      </span>
-                    )}
-                    <span className="shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
-                      {duration}
-                    </span>
+                    {armed ? t('jobKillConfirm') : undefined}
                   </Button>
-                  {job.status === 'running' && (
-                    <ItemActions className="gap-1">
-                      <Button
-                        // The armed confirm is the stock `destructive` variant;
-                        // unarmed stays a quiet outline chip.
-                        variant={armed ? 'destructive' : 'outline'}
-                        size="xs"
-                        // Inline row action: quiet until the row is hovered, but
-                        // keyboard focus brings it back (focus-visible below).
-                        className="opacity-0 transition-opacity group-hover/item:opacity-100 focus-visible:opacity-100"
-                        data-armed={armed ? 'true' : 'false'}
-                        aria-label={armed ? t('jobKillConfirm') : t('jobKill')}
-                        title={armed ? t('jobKillConfirm') : t('jobKill')}
-                        disabled={killing}
-                        onClick={() => {
-                          if (armed) void kill(row)
-                          else setArmedId(job.id)
-                        }}
-                      >
-                        <IconStopFill16 />
-                        {armed ? t('jobKillConfirm') : undefined}
-                      </Button>
-                    </ItemActions>
-                  )}
-                  {killFailed && (
-                    <span className="shrink-0 font-mono text-xs text-destructive">{t('jobKillError')}</span>
-                  )}
-                </Item>
-              )
-            })}
-          </ItemGroup>
-        </ScrollArea>
-      </CollapsibleContent>
-    </Collapsible>
+                )}
+                {killFailed && <span className={css.jobsKillError}>{t('jobKillError')}</span>}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
   )
 }
 
@@ -294,12 +195,6 @@ export function JobsDrawer(props: JobsDrawerProps): ReactNode {
  * {@link JOB_POLL_MS} while the job runs and the page is visible. The reader
  * can copy the output and turn the terminal-style tail off; the kill action
  * keeps its two-click confirm.
- *
- * The card fills the AnchoredPopover surface (rounded-lg + border + shadow
- * live there, since that host owns the float) and only places its content
- * inside it: header, the `Item` identity block, the terminal tail, and the
- * `Item` action footer. `data-popover-handle` / `data-popover-no-drag` keep
- * the drag contract unchanged — the body drags, the controls do not.
  */
 export function JobOutputPopoverContent(props: {
   ownerSessionId: string
@@ -378,16 +273,14 @@ export function JobOutputPopoverContent(props: {
   }
 
   return (
-    // `dsw-tasks`: this card renders inside AnchoredPopover's portal at
-    // document.body — OUTSIDE the page root — so it re-declares the page root
-    // class for the scoped base reset (see TaskWindow.tsx).
-    <div className="dsw-tasks box-border flex flex-col gap-2 p-2.5 text-sm text-popover-foreground" data-popover-handle>
-      <div className="flex items-center justify-between gap-2">
-        <span className="font-mono text-xs tracking-[0.14em] text-foreground-3 uppercase">{t('jobs')}</span>
-        <span className="inline-flex items-center" data-popover-no-drag>
+    <div className={css.popCard} data-popover-handle>
+      <div className={css.popHead}>
+        <span>{t('jobs')}</span>
+        <span className={css.popHeadActions} data-popover-no-drag>
           <Button
             variant="ghost"
-            size="icon-xs"
+            size="sm"
+            icon={<IconCopyOutline16 size={12} />}
             aria-label={copied ? t('jobCopied') : t('jobCopyOutput')}
             title={copied ? t('jobCopied') : t('jobCopyOutput')}
             disabled={text === ''}
@@ -397,68 +290,32 @@ export function JobOutputPopoverContent(props: {
                 window.setTimeout(() => { setCopied(false) }, 1500)
               })
             }}
-          >
-            <IconCopyOutline16 />
-          </Button>
+          />
         </span>
       </div>
-      {/* The job's identity: the stock `Item` composition (media / content /
-          actions) rather than a hand-rolled row. */}
-      <Item size="sm" variant="muted" className="min-w-0 flex-nowrap gap-2 rounded-md px-2 py-1.5">
-        <ItemMedia>
-          <StateDot state={jobDotState(job.status)} size={8} />
-        </ItemMedia>
-        <ItemContent className="min-w-0 gap-0.5">
-          <ItemTitle className="w-full min-w-0">
-            <span className="min-w-0 flex-1 truncate" title={job.label}>{job.label}</span>
-          </ItemTitle>
-          <span className="flex min-w-0 items-center gap-1.5 font-mono text-xs text-muted-foreground">
-            <KindBadge kind={job.kind} />
-            {job.detail !== undefined && job.detail !== '' && (
-              <span className="min-w-0 truncate">{job.detail}</span>
-            )}
-            <span className="flex-none text-foreground-3">{t('jobDragHint')}</span>
-          </span>
-        </ItemContent>
-        <ItemActions>
-          <Badge variant={statusVariant(job)}>{jobStatusLabel(job.status, t)}</Badge>
-        </ItemActions>
-      </Item>
-      {state === 'loading' && (
-        <div className="flex items-center gap-1.5 text-xs text-foreground-3">
-          {/* The visible line carries the copy; the glyph is decoration. */}
-          <span className="flex flex-none items-center" aria-hidden="true">
-            <Spinner className="size-3" />
-          </span>
-          {t('loading')}
-        </div>
-      )}
-      {state === 'error' && <div className="text-xs text-destructive">{t('jobOutputError')}</div>}
+      <div className={css.jobPopTitle}>
+        <StateDot state={jobDotState(job.status)} size={6} />
+        <span className={css.popTitle} title={job.label}>{job.label}</span>
+        <Tag tone={jobTone(job)}>{jobStatusLabel(job.status, t)}</Tag>
+      </div>
+      <div className={css.jobPopMeta}>
+        <Tag tone="quiet">{job.kind}</Tag>
+        {job.detail !== undefined && job.detail !== '' && <span>{job.detail}</span>}
+        <span className={css.popHint}>{t('jobDragHint')}</span>
+      </div>
+      {state === 'loading' && <div className={css.popHint}>{t('loading')}</div>}
+      {state === 'error' && <div className={css.popError}>{t('jobOutputError')}</div>}
       {typeof state === 'object' && (
         <>
           {state.text.length > 0
-            ? (
-              <pre
-                ref={preRef}
-                className="max-h-[168px] overflow-auto rounded-md border border-border bg-background p-2 font-mono text-xs leading-[1.55] break-words whitespace-pre-wrap text-muted-foreground"
-                data-popover-no-drag
-              >
-                {state.text}
-              </pre>
-            )
+            ? <pre ref={preRef} className={css.popPre} data-popover-no-drag>{state.text}</pre>
             : state.read
-              ? <div className="text-xs text-foreground-3">{t('jobNoOutput')}</div>
-              : <div className="text-xs text-foreground-3">{t('jobNotReadYet')}</div>}
-          {state.truncated && <div className="text-xs text-foreground-3">{t('jobOutputTruncated')}</div>}
+              ? <div className={css.popHint}>{t('jobNoOutput')}</div>
+              : <div className={css.popHint}>{t('jobNotReadYet')}</div>}
+          {state.truncated && <div className={css.popHint}>{t('jobOutputTruncated')}</div>}
         </>
       )}
-      <Separator />
-      {/* The action footer: the follow-latest switch and the kill confirm. */}
-      <Item
-        size="sm"
-        className="min-w-0 flex-nowrap justify-between gap-2 rounded-md px-0 py-0"
-        data-popover-no-drag
-      >
+      <div className={css.jobPopActions} data-popover-no-drag>
         <Switch
           checked={follow}
           onChange={setFollow}
@@ -467,20 +324,21 @@ export function JobOutputPopoverContent(props: {
         />
         {live && (
           <Button
-            variant={armed ? 'destructive' : 'outline'}
+            variant={armed ? 'primary' : 'outline'}
             size="sm"
+            className={armed ? css.jobPopKillArmed : undefined}
+            icon={<IconStopFill16 size={11} />}
             disabled={killing}
             onClick={() => {
               if (armed) void kill()
               else setArmed(true)
             }}
           >
-            <IconStopFill16 />
             {armed ? t('jobKillConfirm') : t('jobKill')}
           </Button>
         )}
-      </Item>
-      {killFailed && <div className="text-xs text-destructive">{t('jobKillError')}</div>}
+      </div>
+      {killFailed && <div className={css.popError}>{t('jobKillError')}</div>}
     </div>
   )
 }
diff --git a/src/client/SubagentView.module.css b/src/client/SubagentView.module.css
index ae0ee16..bd08719 100644
--- a/src/client/SubagentView.module.css
+++ b/src/client/SubagentView.module.css
@@ -1,21 +1,207 @@
-/* The Tasks page shell's OWN container geometry.
- *
- * Everything visual on this page (header row, empty state, error banner,
- * popovers) is expressed with Tailwind utilities over the shadcn tokens in
- * src/client/ui/theme.css, so this module no longer carries any of it. What
- * stays here is the one thing utilities cannot own: the page root is the child
- * of the native tab host's column flex box, and the HOST's stylesheets are
- * unlayered — an unlayered host rule outranks anything Tailwind puts in
- * `layer(utilities)`, so `flex: 1 / min-height: 0` must not ride a utility
- * class.
- *
- * `.subagent` travels with the `dsw-tasks` root class (SubagentView.tsx), which
- * carries the scoped base reset (box-sizing, control typography, focus ring,
- * thin scrollbars) for every utility-styled element inside the page.
- */
+/* Tasks page shell: header row, empty/error states, and the state dot. The
+   graph canvas / tree rows / popovers / jobs drawer live in
+   tasks-graph.module.css; the old indentation-tree and jobs-dock classes
+   were pruned when the page moved to the unified model. */
 .subagent {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
+
+/* The page header keeps the native header rhythm — the 12px strong title the
+   other tabs use — plus a mono count, and the hairline underline that closes
+   the toolbar off from the canvas (the plugin's divider token — see
+   changes.module.css `.gitSection`). */
+.subagentHeader {
+  flex: none;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 10px 10px 9px 12px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+}
+
+.subagentTitle {
+  flex: 1;
+  min-width: 0;
+  font: var(--dsw-font-xxs-strong-12);
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The descendant count badge ("3 · 1 运行中") beside the title. */
+.subagentCount {
+  flex: none;
+  font-family: var(--ds-font-family-code);
+  font-size: 10px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* The header's refresh control is the host ghost Button (28px tall, hover fill
+   from `--dsw-alias-interactive-bg-hover`); the class only keeps it from being
+   squeezed and recenters it against the baseline-aligned title row. */
+.subagentRefresh {
+  flex: none;
+  align-self: center;
+}
+
+.subagentRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* Keyboard focus (mirror of the official catalog row): a visible fill only
+   when focused via keyboard; the selected state below still wins on top. */
+.subagentRow:focus-visible {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* The currently-open session, highlighted in place (mirror of the workspace
+   `.sessionRow.selected` — declared after the hover/focus rules so it wins). */
+.subagentRowActive,
+.subagentRowActive:hover,
+.subagentRowActive:focus-visible {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.subagentRowDisabled:hover {
+  background: transparent;
+}
+
+/* Loading placeholders are disabled but keep the default cursor (official
+   `.loadingRow` distinction from `.disabled`). */
+
+/* The state dot aligns to the first text line (official catalog detail). */
+.subagentDot {
+  margin-top: 4px;
+}
+
+.subagentLabel,
+
+/* ── Live lines (running cards only) ──────────────────────────────────── */
+
+/* ── Tree connector lines (official catalog recipe) ────────────────────── */
+
+.subagentChildren::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: -26px;
+  height: 26px;
+  border-left: 1px solid var(--dsw-alias-border-l2);
+}
+
+.subagentChildren[aria-busy='true']::before {
+  content: none;
+}
+
+.subagentChildren > .subagentNode::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  border-left: 1px solid var(--dsw-alias-border-l2);
+}
+
+.subagentChildren > .subagentNode:last-child::before {
+  bottom: auto;
+  height: 17px;
+}
+
+.subagentChildren > .subagentNode > .subagentRow::before {
+  content: '';
+  position: absolute;
+  top: 16px;
+  left: -4px;
+  width: 14px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.subagentEmpty {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 16px;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+}
+
+.subagentEmptyHint {
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.subagentError {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* The banner's retry is the host outline Button (28px); the class keeps the
+   action from being squeezed by the failure message. */
+.subagentErrorRetry {
+  flex: none;
+}
+
+/* ── Background-job section (below the topology tree) ────────────────── */
+
+/* One job row; the whole row lights up on hover, the expandable target
+   stays transparent (the kill button rides on the row's right edge). */
+
+.jobsRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* The row whose output is shown in the bottom dock. */
+.jobsRowSelected,
+.jobsRowSelected:hover {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.jobsRowMain:focus-visible {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* The command line: a kind badge followed by the command itself in the code
+   face, like the terminal's live lines. */
+
+.jobsKill:hover {
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* The armed (first-click) state: a filled confirm chip instead of the icon. */
+.jobsKillArmed,
+.jobsKillArmed:hover {
+  width: auto;
+  height: 20px;
+  padding: 0 8px;
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+  font: var(--dsw-font-xxxs-strong-11);
+  white-space: nowrap;
+}
+
+.jobsKill:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ── The shared output dock (bottom of the page, sticky like a terminal) ── */
+
+/* Direct child of the scrolling body, so it docks at the scrollport's bottom
+   edge while the job list scrolls above it; a solid background keeps the
+   tree from showing through. */
+
+.jobsPaneClose:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
diff --git a/src/client/SubagentView.tsx b/src/client/SubagentView.tsx
index 8867a0d..5c52144 100644
--- a/src/client/SubagentView.tsx
+++ b/src/client/SubagentView.tsx
@@ -22,16 +22,15 @@
  * aggregate node per parent (click it or the control-cluster toggle to
  * expand/collapse).
  *
- * The shell itself is the vendored shadcn set: the header is a toolbar closed
- * by a `Separator`, the catalog-failure banner is an `Item` (media / content /
- * actions), the empty state is the stock `Empty` composition, and the page's
- * only controls are the vendored `Button` + `Tooltip` — `className` carries
- * layout only, and every glyph is a host `IconXxx` primitive.
+ * The shell itself is the page's own module stylesheet plus host primitives:
+ * the header's refresh and the failure banner's retry are host `Button`s, the
+ * descendant count is mono micro-type, and the canvas / tree / board / drawer
+ * own their own chrome.
  */
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useSyncExternalStore } from 'react'
 import {
-  IconAgentPresetOutline16, IconRefreshOutline14, IconWarningOutline16,
+  Button, IconRefreshOutline14,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type {
   Context,
@@ -58,11 +57,6 @@ import { TeamBoard } from './TeamBoard.tsx'
 import { TaskPopover } from './TaskWindow.tsx'
 import type { SidebarStore } from './state.ts'
 import type { WorkflowRunView } from '../workflow-runs.ts'
-import { Button as UiButton } from './ui/button.tsx'
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './ui/empty.tsx'
-import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from './ui/item.tsx'
-import { Separator } from './ui/separator.tsx'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip.tsx'
 import legacy from './SubagentView.module.css'
 
 /** Refresh cadence of the live "last text + tool call" lines while a child runs. */
@@ -422,48 +416,35 @@ export function SubagentView(props: {
   })()
 
   return (
-    <div className={`dsw-tasks ${legacy.subagent} relative`}>
-      {/*
-        Page header: title + mono descendant count + refresh, closed by the
-        stock hairline `Separator`. The control cluster (view toggle / fold /
-        zoom) stays on the canvas itself, so it is visible in BOTH modes.
-      */}
-      <div className="flex flex-none items-center gap-2 px-3 py-2">
-        <span className="min-w-0 flex-1 truncate text-sm font-medium">
+    <div className={legacy.subagent} style={{ position: 'relative' }}>
+      <div className={legacy.subagentHeader}>
+        <span className={legacy.subagentTitle}>
           {t('subagent')}
           {rootSummary?.displayTitle !== undefined && rootSummary.displayTitle !== ''
             ? ` · ${rootSummary.displayTitle}`
             : ''}
         </span>
-        {countLabel !== undefined && (
-          <span className="flex-none font-mono text-xs tabular-nums text-muted-foreground">
-            {countLabel}
-          </span>
-        )}
-        {/* Delay so the label never flashes while the pointer crosses the row. */}
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <UiButton
-                variant="ghost"
-                size="icon"
-                className="flex-none"
-                aria-label={t('refresh')}
-                title={t('refresh')}
-                disabled={rootId === undefined}
-                onClick={() => {
-                  if (rootId !== undefined) refresh(rootId)
-                  team.refresh()
-                }}
-              >
-                <IconRefreshOutline14 />
-              </UiButton>
-            </TooltipTrigger>
-            <TooltipContent side="bottom" className="text-xs">{t('refresh')}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        {countLabel !== undefined && <span className={legacy.subagentCount}>{countLabel}</span>}
+        {/*
+          The refresh control is the host ghost Button (28px) and carries the
+          plugin's control chrome; the module class only recenters it on the
+          baseline-aligned header row. Plain `title` rather than the host
+          Tooltip: the Tooltip anchors by ref and the host Button forwards none.
+        */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className={legacy.subagentRefresh}
+          icon={<IconRefreshOutline14 />}
+          aria-label={t('refresh')}
+          title={t('refresh')}
+          disabled={rootId === undefined}
+          onClick={() => {
+            if (rootId !== undefined) refresh(rootId)
+            team.refresh()
+          }}
+        />
       </div>
-      <Separator />
       {rootId !== undefined && teamView?.available === true && teamView.team !== null && (
         <TeamBoard
           rootId={rootId}
@@ -475,46 +456,26 @@ export function SubagentView(props: {
         />
       )}
       {failedParents.length > 0 && (
-        <Item
-          variant="outline"
-          size="sm"
-          className="mx-3 my-2 min-w-0 flex-nowrap gap-2 rounded-md px-2 py-1.5"
-        >
-          <ItemMedia variant="icon" className="text-destructive">
-            <IconWarningOutline16 />
-          </ItemMedia>
-          <ItemContent className="min-w-0 gap-0">
-            <ItemTitle className="text-destructive">
-              {t('catalogLoadFailed', { count: failedParents.length })}
-            </ItemTitle>
-          </ItemContent>
-          <ItemActions>
-            <UiButton
-              variant="outline"
-              size="xs"
-              className="flex-none"
-              onClick={() => { for (const parent of failedParents) refresh(parent) }}
-            >
-              <IconRefreshOutline14 />
-              {t('retry')}
-            </UiButton>
-          </ItemActions>
-        </Item>
+        <div className={legacy.subagentError}>
+          <span>{t('catalogLoadFailed', { count: failedParents.length })}</span>
+          {/* Host outline Button (28px); the module class keeps the retry from
+              being squeezed by the banner's message. */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={legacy.subagentErrorRetry}
+            icon={<IconRefreshOutline14 />}
+            onClick={() => { for (const parent of failedParents) refresh(parent) }}
+          >
+            {t('retry')}
+          </Button>
+        </div>
       )}
       {readyEmpty && (
-        // `border-0` is the no-preflight fix, not a style override: the stock
-        // `Empty` declares only `border-dashed`, and with preflight never
-        // shipped (see ui/theme.css) a bare `border-style: dashed` keeps the
-        // UA's 3px medium width — a thick dashed frame around the page.
-        <Empty className="flex-1 border-0">
-          <EmptyHeader>
-            <EmptyMedia variant="icon">
-              <IconAgentPresetOutline16 />
-            </EmptyMedia>
-            <EmptyTitle>{t('subagentEmpty')}</EmptyTitle>
-            <EmptyDescription>{t('subagentEmptyDesc')}</EmptyDescription>
-          </EmptyHeader>
-        </Empty>
+        <div className={legacy.subagentEmpty}>
+          <div>{t('subagentEmpty')}</div>
+          <div className={legacy.subagentEmptyHint}>{t('subagentEmptyDesc')}</div>
+        </div>
       )}
       {!readyEmpty && rootId !== undefined && (
         mode === 'graph'
@@ -523,13 +484,13 @@ export function SubagentView(props: {
               nodes={model}
               folded={folded}
               rootId={rootId}
+              loading={summaryBackedLoading}
               onNodeInfo={(node, anchor) => { setPopover({ kind: 'node', nodeId: node.id, anchor }) }}
               onWorkflowInfo={(node, anchor) => { setPopover({ kind: 'workflow', nodeId: node.id, anchor }) }}
               onOpenTask={openTaskById}
               onToggleFold={() => { setFolded(current => !current) }}
               mode={mode}
               onModeChange={setModeOverride}
-              loading={summaryBackedLoading}
             />
           )
           : (
diff --git a/src/client/TaskWindow.tsx b/src/client/TaskWindow.tsx
index ce43526..574993b 100644
--- a/src/client/TaskWindow.tsx
+++ b/src/client/TaskWindow.tsx
@@ -7,50 +7,24 @@
  * Shape: a non-fullscreen, DRAGGABLE card (never a modal dialog). Details
  * render as multi-line MARKDOWN by default; 编辑 switches the same card into
  * multi-line editing, so reading and writing never jump between surfaces.
- * Actions: owner reassignment (CAS-immediate), edit/save, reopen or complete,
- * and a two-step delete.
+ * Actions: owner reassignment (Pills, CAS-immediate), edit/save, reopen or
+ * complete, and a two-step delete.
  *
- * Visual base: the vendored shadcn/ui set, composed the way the registry
- * intends — the full `Card` (header + title + action slot + content + footer),
- * the task itself as an `Item` slab, the editable half as a `FieldGroup` of
- * `Field` rows (`FieldLabel` + control + `FieldDescription`), the owner picker
- * as a `ToggleGroup`, status as a stock `Badge` variant and every action a
- * stock `Button` variant (the armed delete takes the `destructive` variant
- * instead of a hand-painted red outline). Colours and type therefore come from
- * the components and the semantic tokens; `className` stays layout.
- *
- * Three resets ride the card root on purpose: the window paints NO surface of
- * its own. It is portaled to `document.body`, where `AnchoredPopover` owns the
- * floating border/radius/shadow, so `border-0 bg-transparent shadow-none` let
- * that shell's surface show through instead of nesting a second, shadowed card
- * inside it (the page's "static panels cast no shadow" rule).
- *
- * That portal also sits OUTSIDE the task page root, so the card re-declares
- * the page root class (`dsw-tasks`) to pick up the scoped base reset the
- * plugin ships instead of preflight — box-sizing and form-control font
- * inheritance; without preflight a bare `<button>`/`<textarea>` would render
- * in the UA's own font.
+ * Host primitives everywhere (Button / Input / Pill / Tag / StateDot) plus
+ * the plugin's own `MultilineField` (the host set ships no multi-line input)
+ * and the shared `MarkdownText` renderer with the plugin's copy labels.
  */
 import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
 import {
-  IconCheckOutline14, IconCloseOutline16, IconEditOutline16, IconPlusOutline16,
-  IconRefreshOutline14, IconTrashOutline16, MarkdownText, StateDot,
+  Button, IconCheckOutline14, IconCloseOutline16, IconEditOutline16, IconPlusOutline16,
+  IconRefreshOutline14, IconTrashOutline16, Input, MarkdownText, Pill, StateDot, Tag,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SidebarTeamMemberView, SidebarTeamTaskView } from '../context-types.ts'
 import { api } from './api.ts'
 import { markdownTextProps } from './markdown-labels.tsx'
 import { AnchoredPopover } from './AnchoredPopover.tsx'
 import { t, type CopyKey } from './locales.ts'
-import { Badge } from './ui/badge.tsx'
-import { Button } from './ui/button.tsx'
-import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card.tsx'
-import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldTitle } from './ui/field.tsx'
-import { Input } from './ui/input.tsx'
-import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from './ui/item.tsx'
-import { Separator } from './ui/separator.tsx'
-import { Textarea } from './ui/textarea.tsx'
-import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.tsx'
-import { cn } from './ui/utils.ts'
+import css from './tasks-graph.module.css'
 
 /** One mutation outcome (the host route's own union). */
 type MutationResult = { ok: true } | { ok: false; error: { code: string; message: string } }
@@ -65,29 +39,10 @@ function taskStatusKey(status: SidebarTeamTaskView['status']): CopyKey {
   }
 }
 
-/**
- * The status badge's stock variant: in progress takes `default` (the accent),
- * everything else settles on `secondary`; a BLOCKED task wears `outline` with
- * warning ink — hue carries meaning only, and readiness outranks the status
- * word (the board row maps it the same way).
- */
-function statusVariant(task: SidebarTeamTaskView): 'default' | 'secondary' | 'outline' {
-  if (task.status === 'in_progress' && task.ready) return 'default'
-  if (!task.ready) return 'outline'
-  return 'secondary'
-}
-
-/** The blocked badge's warning ink (the `outline` variant is otherwise neutral). */
-function statusTone(task: SidebarTeamTaskView): string {
-  return task.ready ? '' : 'text-warning'
-}
-
 /**
  * The plugin's own multi-line input: the host primitive set ships no
  * textarea, so this is OUR component (token-styled, drag-exempt) and every
- * multi-line edit in the page goes through it. The surface is the vendored
- * shadcn `Textarea`; `rows` keeps the caller's height contract and the
- * content-driven growth is capped so a long body cannot outgrow the viewport.
+ * multi-line edit in the page goes through it.
  */
 export function MultilineField(props: {
   value: string
@@ -97,8 +52,8 @@ export function MultilineField(props: {
   onChange?(next: string): void
 }): ReactNode {
   return (
-    <Textarea
-      className="max-h-[45vh] min-h-[120px] resize-y"
+    <textarea
+      className={css.taskTextarea}
       value={props.value}
       rows={props.rows ?? 7}
       placeholder={props.placeholder}
@@ -109,56 +64,37 @@ export function MultilineField(props: {
   )
 }
 
-/**
- * The unowned option's sentinel value: Radix reads an EMPTY string as "nothing
- * is selected" (`value ? [value] : []`), so `''` could never render pressed —
- * and the unowned chip must be visibly the active one on an unowned task.
- */
-const UNOWNED = '__unowned__'
-
-/**
- * The owner picker (single-select toggles; CAS-immediate, so never a draft
- * field). The chips are the toggle's DEFAULT variant, the same one the board's
- * owner filter uses: its own state pair separates hover (accent tint, meta ink)
- * from pressed (accent tint, full ink) without help. That is not true of the
- * `outline` variant — its hover rules outrank the base ones, so hover and
- * pressed would look exactly alike and the picked owner would be invisible.
- */
-export function OwnerPicker(props: {
+/** The owner picker (Pills; CAS-immediate, so it is never a draft field). */
+function OwnerPicker(props: {
   members: readonly SidebarTeamMemberView[]
   owner: string | undefined
   disabled: boolean
   onPick(owner: string): void
 }): ReactNode {
   return (
-    <ToggleGroup
-      type="single"
-      value={props.owner ?? UNOWNED}
-      disabled={props.disabled}
-      spacing={1}
-      aria-label={t('teamTaskOwner')}
-      className="flex-wrap"
-      onValueChange={(next) => {
-        // '' is Radix's deselect of the pressed chip (the reader re-clicked the
-        // current owner): the old pill row re-sent the same owner, i.e. no
-        // mutation — the window never unassigns behind a re-click.
-        if (next === '') return
-        props.onPick(next === UNOWNED ? '' : next)
-      }}
-    >
-      <ToggleGroupItem value={UNOWNED} size="sm">
+    <div className={css.taskOwnerRow} role="group" aria-label={t('teamTaskOwner')}>
+      <Pill
+        active={props.owner === undefined}
+        disabled={props.disabled}
+        onClick={() => { props.onPick('') }}
+      >
         {t('teamTaskUnowned')}
-      </ToggleGroupItem>
+      </Pill>
       {props.members.map(member => (
-        <ToggleGroupItem key={member.id} value={member.name} size="sm">
+        <Pill
+          key={member.id}
+          active={props.owner === member.name}
+          disabled={props.disabled}
+          onClick={() => { props.onPick(member.name) }}
+        >
           {member.name}
-        </ToggleGroupItem>
+        </Pill>
       ))}
-    </ToggleGroup>
+    </div>
   )
 }
 
-/** The read-only body: the task slab, the markdown description, the owner picker. */
+/** The read-only body: markdown description, meta, owner picker. */
 function TaskViewBody(props: {
   task: SidebarTeamTaskView
   teammates: readonly SidebarTeamMemberView[]
@@ -168,79 +104,58 @@ function TaskViewBody(props: {
   const { task } = props
   const body = task.description.trim()
   return (
-    <FieldGroup className="gap-4">
-      {/* The task's own slab: an `Item` is the registry's row primitive, so the
-          subject leads, the owner / blocker meta follows as its description and
-          the status rides the trailing action slot. */}
-      <Item variant="muted" size="sm" className="min-w-0 flex-nowrap gap-2 px-2 py-1.5">
-        <ItemMedia>
-          <StateDot
-            size={6}
-            state={task.status === 'completed' ? 'done' : task.ready ? 'ongoing' : 'warning'}
-          />
-        </ItemMedia>
-        <ItemContent className="min-w-0 gap-0.5">
-          <ItemTitle className="w-full min-w-0">
-            <span className="min-w-0 flex-1 truncate" title={task.subject}>{task.subject}</span>
-          </ItemTitle>
-          {/* The meta line keeps the page's three ink levels: the labels are a
-              step quieter than the values, and ids stay mono. */}
-          <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
-            <span className="text-foreground-3">{t('teamTaskOwner')}</span>
-            <span>{task.ownerName ?? t('teamTaskUnowned')}</span>
-            {task.blockedBy.length > 0 && (
-              <>
-                <span className="text-foreground-3">{t('teamTaskBlockedBy')}</span>
-                <span className="font-mono tabular-nums">{task.blockedBy.join(' · ')}</span>
-              </>
-            )}
-          </span>
-        </ItemContent>
-        <ItemActions>
-          <Badge variant={statusVariant(task)} className={cn('flex-none', statusTone(task))}>
-            {t(task.ready ? taskStatusKey(task.status) : 'teamTaskBlocked')}
-          </Badge>
-        </ItemActions>
-      </Item>
-
-      {/* The description is READ-ONLY here (the markdown preview is the point of
-          the view mode); 编辑 is what turns it into the multi-line editor. */}
-      <Field>
-        <FieldTitle>{t('teamTaskDescription')}</FieldTitle>
+    <>
+      <div className={css.jobPopTitle}>
+        <StateDot
+          size={6}
+          state={task.status === 'completed' ? 'done' : task.ready ? 'ongoing' : 'warning'}
+        />
+        <span className={css.popTitle} title={task.subject}>{task.subject}</span>
+        <Tag tone={task.status === 'completed' ? 'success' : task.ready ? 'info' : 'warning'}>
+          {t(task.ready ? taskStatusKey(task.status) : 'teamTaskBlocked')}
+        </Tag>
+      </div>
+      <div className={css.jobPopMeta}>
+        <span className={css.popKey}>{t('teamTaskOwner')}</span>
+        <span>{task.ownerName ?? t('teamTaskUnowned')}</span>
+        {task.blockedBy.length > 0 && (
+          <>
+            <span className={css.popKey}>{t('teamTaskBlockedBy')}</span>
+            <span>{task.blockedBy.join(' · ')}</span>
+          </>
+        )}
+      </div>
+      <div className={css.taskMarkdown}>
         {body === ''
-          ? <FieldDescription>{t('teamTaskNoDescription')}</FieldDescription>
+          ? <div className={css.popHint}>{t('teamTaskNoDescription')}</div>
           : (
-            <div className="max-h-[260px] overflow-y-auto">
-              <MarkdownText
-                {...markdownTextProps(body, { copyLabel: t('copy'), copiedLabel: t('copied') })}
-              />
-            </div>
+            <MarkdownText
+              {...markdownTextProps(body, { copyLabel: t('copy'), copiedLabel: t('copied') })}
+            />
           )}
-      </Field>
-
-      <Field data-disabled={props.busy ? true : undefined}>
-        <FieldLabel>{t('teamTaskOwner')}</FieldLabel>
+      </div>
+      <div className={css.taskField}>
+        <span className={css.taskLabel}>{t('teamTaskOwner')}</span>
         <OwnerPicker
           members={props.teammates}
           owner={task.ownerName}
           disabled={props.busy}
           onPick={props.onReassign}
         />
-      </Field>
-    </FieldGroup>
+      </div>
+    </>
   )
 }
 
 /**
- * The editing body: subject (a stock `Input`) and description (our multi-line
- * field) as two `Field` rows. A BLANK subject is the form's only invalid state
- * — it is reported on the `Field` (`data-invalid`) and the control
- * (`aria-invalid`) once the reader has been in the field, and Save stays
- * disabled until it is filled.
+ * The editing body: subject (host Input) + description (our multi-line field).
  *
- * The one-line input carries its hint as a `FieldDescription` (a placeholder
- * would vanish the moment the reader focuses it); the tall textarea keeps its
- * hint inside the field, where there is room for it.
+ * A BLANK subject is the form's only invalid state. Save stays disabled until
+ * it is filled, so the state must also be REPORTED — otherwise clearing the
+ * field greys the button with no reason given. The input carries
+ * `aria-invalid` and points at the hint below it, which reuses the subject's
+ * own placeholder copy (no new i18n key): it reads as the field's rule, and it
+ * appears only once the reader has been in the field.
  */
 function TaskEditBody(props: {
   subject: string
@@ -249,32 +164,35 @@ function TaskEditBody(props: {
   onSubject(next: string): void
   onDescription(next: string): void
 }): ReactNode {
-  const subjectId = useId()
   const subjectHintId = useId()
   return (
-    <FieldGroup className="gap-4" data-popover-no-drag>
-      <Field data-invalid={props.invalid ? true : undefined}>
-        <FieldLabel htmlFor={subjectId}>{t('teamTaskSubject')}</FieldLabel>
+    <div className={css.taskForm} data-popover-no-drag>
+      <label className={css.taskField}>
+        <span className={css.taskLabel}>{t('teamTaskSubject')}</span>
         <Input
-          id={subjectId}
           value={props.subject}
+          placeholder={t('teamTaskSubjectPlaceholder')}
           aria-label={t('teamTaskSubject')}
           aria-invalid={props.invalid ? true : undefined}
-          aria-describedby={subjectHintId}
+          aria-describedby={props.invalid ? subjectHintId : undefined}
           onChange={(event) => { props.onSubject(event.target.value) }}
         />
-        <FieldDescription id={subjectHintId}>{t('teamTaskSubjectPlaceholder')}</FieldDescription>
-      </Field>
-      <Field>
-        <FieldLabel>{t('teamTaskDescription')}</FieldLabel>
+        {props.invalid && (
+          <span id={subjectHintId} className={css.popHint}>
+            {t('teamTaskSubjectPlaceholder')}
+          </span>
+        )}
+      </label>
+      <label className={css.taskField}>
+        <span className={css.taskLabel}>{t('teamTaskDescription')}</span>
         <MultilineField
           value={props.description}
           label={t('teamTaskDescription')}
           placeholder={t('teamTaskDescriptionPlaceholder')}
           onChange={props.onDescription}
         />
-      </Field>
-    </FieldGroup>
+      </label>
+    </div>
   )
 }
 
@@ -380,63 +298,53 @@ export function TaskWindow(props: TaskWindowProps): ReactNode {
   }
 
   return (
-    <Card
-      className="dsw-tasks box-border gap-0 rounded-lg border-0 bg-transparent py-0 shadow-none"
-      data-popover-handle
-    >
-      <CardHeader className="items-center px-4 py-3">
-        <CardTitle className="min-w-0 truncate">
-          {creating ? t('teamTaskCreate') : editing ? t('teamTaskEdit') : t('teamTaskDetail')}
-        </CardTitle>
-        <CardAction data-popover-no-drag>
+    <div className={css.popCard} data-popover-handle>
+      <div className={css.popHead}>
+        <span>{creating ? t('teamTaskCreate') : editing ? t('teamTaskEdit') : t('teamTaskDetail')}</span>
+        <span className={css.popHeadActions} data-popover-no-drag>
           <Button
             variant="ghost"
-            size="icon"
+            size="sm"
+            icon={<IconCloseOutline16 size={12} />}
             aria-label={t('teamTaskCancel')}
             title={t('teamTaskCancel')}
             onClick={onClose}
-          >
-            <IconCloseOutline16 />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <Separator />
+          />
+        </span>
+      </div>
 
-      <CardContent className="px-4 py-3">
-        {editing || task === undefined
-          ? (
-            <TaskEditBody
-              subject={subject}
-              description={description}
-              invalid={subjectTouched && subject.trim() === ''}
-              onSubject={(next) => { setSubjectTouched(true); setSubject(next) }}
-              onDescription={setDescription}
-            />
-          )
-          : (
-            <TaskViewBody
-              task={task}
-              teammates={teammates}
-              busy={busy}
-              onReassign={reassign}
-            />
-          )}
-        {/* The mutation outcome (CAS conflict / failure) is the form's own
-            alert: FieldError carries the role and the destructive ink. */}
-        {note !== undefined && <FieldError className="mt-2">{note}</FieldError>}
-      </CardContent>
+      {editing || task === undefined
+        ? (
+          <TaskEditBody
+            subject={subject}
+            description={description}
+            invalid={subjectTouched && subject.trim() === ''}
+            onSubject={(next) => { setSubjectTouched(true); setSubject(next) }}
+            onDescription={setDescription}
+          />
+        )
+        : (
+          <TaskViewBody
+            task={task}
+            teammates={teammates}
+            busy={busy}
+            onReassign={reassign}
+          />
+        )}
 
-      <Separator />
-      <CardFooter className="flex-wrap justify-end gap-1.5 px-4 py-3" data-popover-no-drag>
+      {note !== undefined && <div className={css.teamNote}>{note}</div>}
+
+      <div className={css.jobPopActions} data-popover-no-drag>
         {editing
           ? (
             <>
               <Button
+                variant="primary"
                 size="sm"
+                icon={<IconCheckOutline14 size={12} />}
                 disabled={busy || subject.trim() === ''}
                 onClick={save}
               >
-                <IconCheckOutline14 />
                 {creating ? t('teamTaskCreate') : t('teamTaskSave')}
               </Button>
               <Button
@@ -459,8 +367,12 @@ export function TaskWindow(props: TaskWindowProps): ReactNode {
           )
           : task === undefined ? null : (
             <>
-              <Button variant="outline" size="sm" onClick={() => { setEditing(true) }}>
-                <IconEditOutline16 />
+              <Button
+                variant="outline"
+                size="sm"
+                icon={<IconEditOutline16 size={12} />}
+                onClick={() => { setEditing(true) }}
+              >
                 {t('teamTaskEdit')}
               </Button>
               {task.status === 'completed'
@@ -468,12 +380,12 @@ export function TaskWindow(props: TaskWindowProps): ReactNode {
                   <Button
                     variant="outline"
                     size="sm"
+                    icon={<IconRefreshOutline14 size={12} />}
                     disabled={busy}
                     onClick={() => void mutate(() => api.teamsTaskUpdate(rootId, {
                       taskId: task.id, expectedRevision: task.revision, action: 'reopen',
                     }))}
                   >
-                    <IconRefreshOutline14 />
                     {t('teamTaskReopen')}
                   </Button>
                 )
@@ -481,22 +393,20 @@ export function TaskWindow(props: TaskWindowProps): ReactNode {
                   <Button
                     variant="outline"
                     size="sm"
+                    icon={<IconCheckOutline14 size={12} />}
                     disabled={busy}
                     onClick={() => void mutate(() => api.teamsTaskUpdate(rootId, {
                       taskId: task.id, expectedRevision: task.revision, action: 'complete',
                     }))}
                   >
-                    <IconCheckOutline14 />
                     {t('teamTaskComplete')}
                   </Button>
                 )}
               <Button
-                // Two-step confirm: the ARMED click takes the `destructive`
-                // variant (its copy already says 确认删除) — danger is a
-                // component variant, never a permanently red button and never a
-                // hand-painted outline.
-                variant={armedDelete ? 'destructive' : 'outline'}
+                variant="outline"
                 size="sm"
+                className={armedDelete ? css.jobPopKillArmed : undefined}
+                icon={<IconTrashOutline16 size={12} />}
                 disabled={busy}
                 onClick={() => {
                   if (!armedDelete) { setArmedDelete(true); return }
@@ -506,13 +416,12 @@ export function TaskWindow(props: TaskWindowProps): ReactNode {
                   }), { close: true })
                 }}
               >
-                <IconTrashOutline16 />
                 {armedDelete ? t('teamTaskDeleteConfirm') : t('teamTaskDelete')}
               </Button>
             </>
           )}
-      </CardFooter>
-    </Card>
+      </div>
+    </div>
   )
 }
 
@@ -538,10 +447,10 @@ export function TaskCreateButton(props: {
     <Button
       variant="outline"
       size="sm"
+      icon={<IconPlusOutline16 size={13} />}
       disabled={props.disabled}
       onClick={(event) => { props.onClick(event.currentTarget) }}
     >
-      <IconPlusOutline16 />
       {t('teamTaskCreate')}
     </Button>
   )
diff --git a/src/client/TasksGraph.tsx b/src/client/TasksGraph.tsx
index fd8f60f..2b69948 100644
--- a/src/client/TasksGraph.tsx
+++ b/src/client/TasksGraph.tsx
@@ -13,23 +13,10 @@
  * on both axes and scaling UP to {@link FIT_MAX_SCALE} so a small tree fills
  * the narrow panel instead of hugging the top-left corner.
  *
- * Visual language: every node is a shadcn `Card` — the compact stock recipe
- * (`rounded-lg border bg-card p-2.5 shadow-xs`) with `hover:bg-muted` as the
- * only hover change and no card tint (the old double/dashed borders and the
- * filled workflow cards are gone; "current" is a 2px accent
- * bar, running is the host `StateDot` plus the live line). Statuses ride the
- * mono meta line, team membership is a `Badge`, a truncated line carries its
- * full text in a shadcn `Tooltip`, and the control cluster is the vendored
- * `Button` recipe (`outline` / `sm`) with a tooltip per control. The phase
- * frames are dashed `border-border` boxes on `bg-muted/40` and the relations
- * are hairline strokes
- * in the border ink (see tasks-canvas.module.css for the canvas-only pieces:
- * the dotted grid, the transformed layer and the edge strokes).
- *
- * Behaviour is unchanged: the same pointer-down-on-background pan, the same
- * wheel zoom to cursor, the same click tolerance, the same auto-fit, and the
- * same stable hooks (`data-graph-node`, `data-graph-controls`, `role="group"`,
- * the aria-label copy).
+ * Cards: the page sheet's node recipe with a TWO-line clamped title (the 68px
+ * card reserve in tasks-graph-layout.ts is sized for that second line) and the
+ * full name in the `title` attribute. While the root catalog hydrates, an
+ * empty canvas shows the same hint as the tree (`loading`).
  */
 import {
   useCallback,
@@ -40,64 +27,45 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from 'react'
+import clsx from 'clsx'
 import {
-  IconChecklistOutline14, IconFullscreenOutline16, IconTreeCorner8x10, StateDot,
+  Button, IconChecklistOutline14, IconFullscreenOutline16, IconLoadingOutline16, IconTreeCorner8x10,
+  StateDot,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { TasksAgentNode, TasksFoldNode, TasksNode, TasksWorkflowNode } from './tasks-model.ts'
 import { tasksEdges } from './tasks-model.ts'
 import {
-  GRAPH_FIT_MIN_SCALE,
-  GRAPH_NODE_W,
-  layoutTasksGraphForWidth,
-  type GraphBox,
+  GRAPH_FIT_MIN_SCALE, GRAPH_NODE_W, layoutTasksGraphForWidth, type GraphBox,
 } from './tasks-graph-layout.ts'
 import {
   AgentGlyph, agentMeta, FoldGlyph, foldPreviews, LiveLine, nodeDotState, TaskLine,
   WorkflowGlyph, workflowMeta,
 } from './tasks-shared.tsx'
 import { t } from './locales.ts'
-import { Badge } from './ui/badge.tsx'
-import { Button } from './ui/button.tsx'
-import { Card } from './ui/card.tsx'
-import { Spinner } from './ui/spinner.tsx'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip.tsx'
-import { cn } from './ui/utils.ts'
-import css from './tasks-canvas.module.css'
+import css from './tasks-graph.module.css'
+import canvasCss from './tasks-canvas.module.css'
 
 /** The zoom bounds of the canvas. */
 const ZOOM_MIN = 0.3
 const ZOOM_MAX = 1.5
 /** Upper bound of the auto-fit scale (never balloon a two-node tree). */
 const FIT_MAX_SCALE = 1.15
-/** Lower bound of the auto-fit scale: below this the cards stop being
- *  readable, so the canvas overflows and pans instead of shrinking further. */
+/* The readability floor the fit honours is `GRAPH_FIT_MIN_SCALE` (imported):
+ * the layout budgets its columns from the same number, so scaling and wrapping
+ * can never disagree. */
 /** Drag-vs-click separation: pointer travel below this stays a click. */
 const CLICK_TOLERANCE_PX = 4
 
 /**
- * The shared shell of every node card: absolute (the layout owns left/top),
- * the compact stock node recipe — `rounded-lg border bg-card p-2.5 shadow-xs`
- * — with `hover:bg-muted` as the only hover change. No tint.
- *
- * Every class here is stock: `Card` already carries `border` (hairline in
- * `--border`) and `text-card-foreground`, so this only tightens the padding,
- * drops the stock `gap-6` (the graph's three lines have their own `mt-0.5`)
- * and sets the canvas elevation. The border ink is never re-declared — the
- * lead node's stronger rung is the one exception, below.
+ * Card line 1 of an agent / run node: the page sheet's node title with the
+ * truncation swapped for a TWO-line clamp — a single ellipsized line left too
+ * few CJK characters to tell two siblings apart, and `GRAPH_NODE_H` in
+ * tasks-graph-layout.ts reserves the card height for that second line. The
+ * untruncated name stays in the `title` attribute.
  */
-const NODE_CARD = 'absolute cursor-pointer gap-0 overflow-hidden rounded-lg bg-card p-2.5 shadow-xs transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-ring'
-/** The on-screen session: a 2px accent bar, never a tinted card. */
-const NODE_ACCENT = 'border-l-2 border-l-primary'
-/** Settled nodes recede by INK, not by opacity: the whole card drops to the
- *  secondary ink (the title inherits it) and the meta line goes one level
- *  further down (`text-foreground-3`, appended over NODE_META). */
-const NODE_SETTLED = 'text-muted-foreground'
-/** Card line 1: `text-sm` medium, clamped to TWO lines — a single ellipsized
- *  line left too few CJK characters, which is what made a dense graph
- *  unreadable. The tooltip still carries the full name. */
-const NODE_TITLE = 'min-w-0 flex-1 line-clamp-2 text-sm leading-snug font-medium [overflow-wrap:anywhere]'
-/** The mono meta line: `text-xs`, tabular figures, secondary ink. */
-const NODE_META = 'mt-0.5 truncate font-mono text-xs leading-[1.3] tabular-nums text-muted-foreground'
+const NODE_TITLE = canvasCss.nodeTitle
+/** The fold aggregate's title: the same clamp on the receding plain ink. */
+const NODE_TITLE_PLAIN = clsx(NODE_TITLE, canvasCss.nodeTitlePlain)
 
 /** One phase frame of a run node (the dashed box behind its members). */
 interface PhaseFrame {
@@ -121,61 +89,12 @@ export interface TasksGraphProps {
   onToggleFold(): void
   mode: 'graph' | 'tree'
   onModeChange(mode: 'graph' | 'tree'): void
-  /** Fallback loading overlay while the root catalog hydrates (the same
-   *  signal TasksTree renders its loading row for). */
+  /** Fallback hint while the root catalog hydrates (the graph twin of
+   *  TasksTree's loading row: the same copy key, the same "nothing to show
+   *  yet" condition). */
   loading?: boolean
 }
 
-/**
- * One button of the control cluster: the vendored `Button`'s stock
- * `outline` / `sm` recipe, with a shadcn tooltip carrying the same copy as
- * the aria-label (`title` used to carry it; the bubble replaces it). The
- * pressed state rides the outline variant's own accent surface.
- */
-function ControlButton(props: {
-  label: string
-  pressed?: boolean
-  onClick(): void
-  children: ReactNode
-}): ReactNode {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className={cn('flex-none', props.pressed === true && 'bg-accent text-accent-foreground')}
-            aria-label={props.label}
-            aria-pressed={props.pressed}
-            onClick={props.onClick}
-          >
-            {props.children}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="top" className="text-xs">{props.label}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
-
-/**
- * One ellipsized card line plus the tooltip that carries its full text — the
- * shadcn replacement for the native `title` these lines used to wear. The
- * anchor is the line itself, so hovering the dot/glyph gutter stays quiet.
- */
-function CardLine(props: { className: string; label: string; children?: ReactNode }): ReactNode {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <span className={props.className}>{props.children ?? props.label}</span>
-      </TooltipTrigger>
-      <TooltipContent side="bottom" className="max-w-[260px] text-xs">{props.label}</TooltipContent>
-    </Tooltip>
-  )
-}
-
 /** The shared view-mode toggle (glyph + label, per the mockup). */
 export function ViewModeToggle(props: {
   mode: 'graph' | 'tree'
@@ -185,13 +104,16 @@ export function ViewModeToggle(props: {
   const toTree = mode === 'graph'
   const label = toTree ? t('tasksViewTree') : t('tasksViewGraph')
   return (
-    <ControlButton
-      label={t(toTree ? 'tasksViewSwitchToTree' : 'tasksViewSwitchToGraph')}
+    <Button
+      variant="ghost"
+      size="sm"
+      icon={toTree ? <IconTreeCorner8x10 /> : <WorkflowGlyph size={13} />}
+      aria-label={t(toTree ? 'tasksViewSwitchToTree' : 'tasksViewSwitchToGraph')}
+      title={t(toTree ? 'tasksViewSwitchToTree' : 'tasksViewSwitchToGraph')}
       onClick={() => { onModeChange(toTree ? 'tree' : 'graph') }}
     >
-      {toTree ? <IconTreeCorner8x10 /> : <WorkflowGlyph />}
       {label}
-    </ControlButton>
+    </Button>
   )
 }
 
@@ -199,13 +121,16 @@ export function ViewModeToggle(props: {
 export function FoldToggleButton(props: { folded: boolean; onToggleFold(): void }): ReactNode {
   const { folded, onToggleFold } = props
   return (
-    <ControlButton
-      label={t(folded ? 'tasksFoldExpand' : 'tasksFoldCollapse')}
-      pressed={folded}
+    <Button
+      variant="ghost"
+      size="sm"
+      className={clsx(css.controlBtn, folded && css.controlBtnActive)}
+      icon={<IconChecklistOutline14 size={13} />}
+      aria-pressed={folded}
+      aria-label={t(folded ? 'tasksFoldExpand' : 'tasksFoldCollapse')}
+      title={t(folded ? 'tasksFoldExpand' : 'tasksFoldCollapse')}
       onClick={onToggleFold}
-    >
-      <IconChecklistOutline14 />
-    </ControlButton>
+    />
   )
 }
 
@@ -380,102 +305,114 @@ export function TasksGraph(props: TasksGraphProps): ReactNode {
   }
 
   return (
-    <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+    <div className={css.graphView}>
       <div
         ref={containerRef}
-        className={cn(css.canvas, dragging && css.canvasDragging)}
+        className={clsx(css.canvas, dragging && css.canvasDragging)}
         role="group"
         aria-label={t('tasksViewGraph')}
         onPointerDown={onPointerDown}
       >
-        <TooltipProvider delayDuration={400}>
-          {/* The graph twin of TasksTree's loading row (same Spinner + the
-              same `loading` copy key). `pointer-events-none` keeps the
-              canvas's pan/zoom/node clicks fully live underneath. */}
-          {loading === true && nodes.length === 0 && (
-            <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
-              <span className="flex items-center gap-1.5 px-6 py-3 text-xs text-muted-foreground">
-                {/* The visible line carries the copy; the glyph is decoration. */}
-                <span aria-hidden="true" className="flex flex-none items-center">
-                  <Spinner className="size-3" />
-                </span>
-                {t('loading')}
-              </span>
-            </div>
-          )}
-          <div
-            className={css.canvasInner}
-            style={{
-              width: layout.width,
-              height: layout.height,
-              transform: `translate(${tf.x}px, ${tf.y}px) scale(${tf.k})`,
-            }}
-          >
-            <svg className={css.edges} width={layout.width} height={layout.height} aria-hidden="true">
-              {edges.map((edge) => {
-                const from = layout.boxes.get(edge.from)
-                const to = layout.boxes.get(edge.to)
-                if (from === undefined || to === undefined) return null
-                const target = nodeById.get(edge.to)
-                return (
-                  <path
-                    key={`${edge.from}->${edge.to}`}
-                    className={cn(
-                      css.edge,
-                      edge.kind === 'team' && css.edgeTeam,
-                      edge.kind === 'workflow' && css.edgeWorkflow,
-                      target?.kind === 'fold' && css.edgeFold,
-                    )}
-                    d={edgePath(from, to)}
-                  />
-                )
-              })}
-            </svg>
-            {phaseFrames.map(frame => (
-              <div
-                key={frame.key}
-                className="pointer-events-none absolute rounded-md bg-muted/40 border border-dashed border-border"
-                style={{ left: frame.x, top: frame.y, width: frame.w, height: frame.h }}
-              >
-                <span className="absolute -top-[7px] left-2 bg-background px-1 font-mono text-xs leading-[1.3] tracking-wide text-foreground-3 uppercase">
-                  {frame.title ?? t('workflowPhaseUnnamed')}
-                </span>
-              </div>
-            ))}
-            {/* KEYBOARD ACCESS (deliberate, F4): graph nodes render with
-                tabIndex={-1} on purpose — a graph with dozens of nodes would
-                add dozens of Tab stops and drown the page's real controls,
-                and the canvas itself supports pointer pan/zoom only. The
-                keyboard-equivalent path is the bottom-right control cluster
-                (`data-graph-controls`): its "切换为树状图" view toggle is a
-                NATIVE <button> (Tab-reachable, Enter/Space-activatable), and
-                tree mode provides the full ArrowUp/ArrowDown/Home/End/Enter/
-                Space navigation over the same nodes (see TasksTree). Do NOT
-                "fix" the nodes' tabIndex without fixing the tab-stop flood. */}
-            {nodes.map((node) => {
-              const box = layout.boxes.get(node.id)
-              if (box === undefined) return null
-              const style = { left: box.x, top: box.y, width: GRAPH_NODE_W, minHeight: box.h }
-              if (node.kind === 'fold') return renderFoldNode(node, style, onToggleFold, clickAllowed)
-              if (node.kind === 'workflow') {
-                return renderWorkflowNode(node, style, onWorkflowInfo, clickAllowed)
-              }
-              return renderAgentNode(node, style, onNodeInfo, onOpenTask, clickAllowed)
-            })}
+        {/* The graph twin of TasksTree's loading row: the same copy key and the
+            same "nothing to show yet" condition (an empty canvas would render
+            as a bare grid). `pointer-events: none` keeps the canvas's pan /
+            zoom / node clicks fully live underneath. */}
+        {loading === true && nodes.length === 0 && (
+          <div className={canvasCss.loading}>
+            <span className={canvasCss.loadingGlyph} aria-hidden="true"><IconLoadingOutline16 size={12} /></span>
+            {t('loading')}
           </div>
-        </TooltipProvider>
-        <div className="absolute right-2.5 bottom-2.5 z-10 flex flex-row items-center gap-0.5" data-graph-controls>
+        )}
+        <div
+          className={css.canvasInner}
+          style={{
+            width: layout.width,
+            height: layout.height,
+            transform: `translate(${tf.x}px, ${tf.y}px) scale(${tf.k})`,
+          }}
+        >
+          <svg className={css.edges} width={layout.width} height={layout.height} aria-hidden="true">
+            {edges.map((edge) => {
+              const from = layout.boxes.get(edge.from)
+              const to = layout.boxes.get(edge.to)
+              if (from === undefined || to === undefined) return null
+              const target = nodeById.get(edge.to)
+              return (
+                <path
+                  key={`${edge.from}->${edge.to}`}
+                  className={clsx(
+                    css.edge,
+                    edge.kind === 'team' && css.edgeTeam,
+                    edge.kind === 'workflow' && css.edgeWorkflow,
+                    target?.kind === 'fold' && css.edgeFold,
+                  )}
+                  d={edgePath(from, to)}
+                />
+              )
+            })}
+          </svg>
+          {phaseFrames.map(frame => (
+            <div
+              key={frame.key}
+              className={css.phaseFrame}
+              style={{ left: frame.x, top: frame.y, width: frame.w, height: frame.h }}
+            >
+              <span className={css.phaseLabel}>{frame.title ?? t('workflowPhaseUnnamed')}</span>
+            </div>
+          ))}
+          {/* KEYBOARD ACCESS (deliberate): graph nodes render with tabIndex={-1}
+              on purpose — a graph with dozens of nodes would add dozens of Tab
+              stops and drown the page's real controls, and the canvas itself
+              supports pointer pan/zoom only. The keyboard-equivalent path is the
+              bottom-right control cluster (`data-graph-controls`): its "switch to
+              tree" toggle is a real <button> (Tab-reachable, Enter/Space-
+              activatable), and tree mode provides the full Arrow/Home/End/Enter
+              navigation over the same nodes (see TasksTree). Do NOT "fix" the
+              nodes' tabIndex without fixing the tab-stop flood. */}
+          {nodes.map((node) => {
+            const box = layout.boxes.get(node.id)
+            if (box === undefined) return null
+            const style = { left: box.x, top: box.y, width: GRAPH_NODE_W, minHeight: box.h }
+            if (node.kind === 'fold') return renderFoldNode(node, style, onToggleFold, clickAllowed)
+            if (node.kind === 'workflow') {
+              return renderWorkflowNode(node, style, onWorkflowInfo, clickAllowed)
+            }
+            return renderAgentNode(node, style, onNodeInfo, onOpenTask, clickAllowed)
+          })}
+        </div>
+        <div className={css.controls} data-graph-controls>
           <ViewModeToggle mode={mode} onModeChange={onModeChange} />
           <FoldToggleButton folded={folded} onToggleFold={onToggleFold} />
-          <ControlButton label={t('tasksZoomOut')} onClick={() => { zoomBy(1 / 1.2) }}>−</ControlButton>
-          <span
-            className="flex-none px-1.5 font-mono text-xs tabular-nums text-muted-foreground"
-            aria-hidden="true"
+          <Button
+            variant="ghost"
+            size="sm"
+            className={css.controlBtn}
+            aria-label={t('tasksZoomOut')}
+            title={t('tasksZoomOut')}
+            onClick={() => { zoomBy(1 / 1.2) }}
           >
-            {Math.round(tf.k * 100)}%
-          </span>
-          <ControlButton label={t('tasksZoomIn')} onClick={() => { zoomBy(1.2) }}>+</ControlButton>
-          <ControlButton label={t('tasksZoomFit')} onClick={refit}><IconFullscreenOutline16 /></ControlButton>
+            −
+          </Button>
+          <span className={css.controlZoomLevel} aria-hidden="true">{Math.round(tf.k * 100)}%</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={css.controlBtn}
+            aria-label={t('tasksZoomIn')}
+            title={t('tasksZoomIn')}
+            onClick={() => { zoomBy(1.2) }}
+          >
+            +
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={css.controlBtn}
+            icon={<IconFullscreenOutline16 size={13} />}
+            aria-label={t('tasksZoomFit')}
+            title={t('tasksZoomFit')}
+            onClick={refit}
+          />
         </div>
       </div>
     </div>
@@ -490,22 +427,20 @@ function renderAgentNode(
   onOpenTask: (taskId: string, anchor: HTMLElement) => void,
   clickAllowed: () => boolean,
 ): ReactNode {
-  const meta = agentMeta(node)
-  const settled = (node.state === 'done' || node.state === 'error') && !node.current
   return (
-    <Card
+    <div
       key={node.id}
       data-graph-node={node.id}
       role="button"
       tabIndex={-1}
-      aria-label={`${node.label} ${meta}`}
+      aria-label={`${node.label} ${agentMeta(node)}`}
       aria-current={node.current ? 'true' : undefined}
-      className={cn(
-        NODE_CARD,
-        // The lead keeps the stronger hairline rung; the meta line names it.
-        node.parentId === undefined && 'border-border-strong',
-        node.current && NODE_ACCENT,
-        settled && NODE_SETTLED,
+      className={clsx(
+        css.node,
+        node.team?.role === 'teammate' && css.nodeTeam,
+        node.current && css.nodeCurrent,
+        (node.state === 'done' || node.state === 'error') && !node.current && css.nodeSettled,
+        node.state === 'error' && css.nodeError,
       )}
       style={style}
       onClick={(event) => {
@@ -513,32 +448,15 @@ function renderAgentNode(
         onNodeInfo(node, event.currentTarget)
       }}
     >
-      <span className="flex min-w-0 items-center gap-1">
-        <StateDot state={nodeDotState(node.state)} size={6} className="flex-none" />
-        <span className="flex flex-none text-foreground-3" aria-hidden="true"><AgentGlyph node={node} /></span>
-        <CardLine className={NODE_TITLE} label={node.label} />
-        {node.team?.role === 'teammate' && node.team.name !== '' && (
-          <Badge
-            variant="outline"
-            className="h-5 max-w-[56px] flex-none truncate font-normal text-muted-foreground"
-          >
-            {node.team.name}
-          </Badge>
-        )}
+      <span className={css.nodeHeader}>
+        <StateDot state={nodeDotState(node.state)} size={6} className={css.nodeDot} />
+        <span className={css.nodeGlyph} aria-hidden="true"><AgentGlyph node={node} /></span>
+        <span className={NODE_TITLE} title={node.label}>{node.label}</span>
       </span>
-      {/* Error is data, not chrome: the card keeps the shared hairline (F6)
-          and the state rides the StateDot plus the destructive meta ink —
-          the same family success/warning already use on their meta words. */}
-      <CardLine
-        className={cn(
-          NODE_META,
-          node.state === 'error' ? 'text-destructive' : settled && 'text-foreground-3',
-        )}
-        label={meta}
-      />
+      <span className={css.nodeMeta} title={agentMeta(node)}>{agentMeta(node)}</span>
       {node.state === 'running' && <LiveLine live={node.live} />}
       <TaskLine tasks={node.tasks} onOpenTask={onOpenTask} />
-    </Card>
+    </div>
   )
 }
 
@@ -549,61 +467,60 @@ function renderWorkflowNode(
   onWorkflowInfo: (node: TasksWorkflowNode, anchor: HTMLElement) => void,
   clickAllowed: () => boolean,
 ): ReactNode {
-  const meta = workflowMeta(node)
-  const settled = node.run.status !== 'running'
   return (
-    <Card
+    <div
       key={node.id}
       data-graph-node={node.id}
       role="button"
       tabIndex={-1}
-      aria-label={`${node.run.name} ${meta}`}
-      className={cn(NODE_CARD, settled && NODE_SETTLED)}
+      aria-label={`${node.run.name} ${workflowMeta(node)}`}
+      className={clsx(css.node, css.nodeWorkflow, node.run.status !== 'running' && css.nodeSettled)}
       style={style}
       onClick={(event) => {
         if (!clickAllowed()) return
         onWorkflowInfo(node, event.currentTarget)
       }}
     >
-      <span className="flex min-w-0 items-center gap-1">
-        <StateDot state={node.run.status === 'running' ? 'ongoing' : 'done'} size={6} className="flex-none" />
-        <span className="flex flex-none text-foreground-3" aria-hidden="true"><WorkflowGlyph /></span>
-        <CardLine className={NODE_TITLE} label={node.run.name} />
+      <span className={css.nodeHeader}>
+        <StateDot state={node.run.status === 'running' ? 'ongoing' : 'done'} size={6} className={css.nodeDot} />
+        <span className={css.nodeGlyph} aria-hidden="true"><WorkflowGlyph /></span>
+        <span className={NODE_TITLE} title={node.run.name}>{node.run.name}</span>
       </span>
-      <CardLine className={cn(NODE_META, settled && 'text-foreground-3')} label={meta} />
-    </Card>
+      <span className={css.nodeMeta}>{workflowMeta(node)}</span>
+    </div>
   )
 }
 
-/** One fold aggregate node: the settled leaves as a dashed card. */
+/** One fold aggregate node. */
 function renderFoldNode(
   node: TasksFoldNode,
   style: { left: number; top: number; width: number; minHeight: number },
   onToggleFold: () => void,
   clickAllowed: () => boolean,
 ): ReactNode {
-  const previews = foldPreviews(node.previews)
   return (
-    <Card
+    <div
       key={node.id}
       data-graph-node={node.id}
       role="button"
       tabIndex={-1}
       aria-label={`${t('tasksFoldCompleted', { count: node.count })} · ${t('tasksFoldExpand')}`}
-      className={cn(NODE_CARD, 'border-dashed text-muted-foreground')}
+      className={clsx(css.node, css.nodeFold)}
       style={style}
       onClick={() => {
         if (!clickAllowed()) return
         onToggleFold()
       }}
     >
-      <span className="flex min-w-0 items-center gap-1">
-        <span className="flex flex-none" aria-hidden="true"><FoldGlyph /></span>
-        <span className={NODE_TITLE}>{t('tasksFoldCompleted', { count: node.count })}</span>
+      <span className={css.nodeHeader}>
+        <span className={css.nodeGlyph} aria-hidden="true"><FoldGlyph /></span>
+        <span className={NODE_TITLE_PLAIN}>
+          {t('tasksFoldCompleted', { count: node.count })}
+        </span>
       </span>
-      <CardLine className={NODE_META} label={previews}>
-        {`${t('tasksFoldExpand')} · ${previews}`}
-      </CardLine>
-    </Card>
+      <span className={css.nodeMeta} title={foldPreviews(node.previews)}>
+        {`${t('tasksFoldExpand')} · ${foldPreviews(node.previews)}`}
+      </span>
+    </div>
   )
 }
diff --git a/src/client/TasksPopovers.tsx b/src/client/TasksPopovers.tsx
index 968086e..a4f86b7 100644
--- a/src/client/TasksPopovers.tsx
+++ b/src/client/TasksPopovers.tsx
@@ -1,44 +1,32 @@
 /**
  * The anchored-popover CONTENTS of the Tasks page (geometry and dismissal
  * live in AnchoredPopover): the agent node detail with a transcript jump and
- * the workflow run detail with clickable member rows.
+ * the workflow run detail with clickable member rows. Both follow the mockup
+ * grammar — a letter-spaced uppercase head, a dt/dd key/value grid, and one
+ * full-width jump action.
  *
- * Visual base: the vendored shadcn/ui set composed the registry's way — the
- * full `Card` (header + title + description + action slot + content + footer),
- * the node / run and every list row as an `Item` (`ItemMedia` + `ItemTitle` +
- * `ItemActions`) inside an `ItemGroup`, status as a stock `Badge` variant
- * (running = `default`, settled = `secondary`, failed = `destructive`) and the
- * jump as a stock `Button` — so colours and type come from those components
- * and the semantic tokens. The surface is flat and owned by the shell: like
- * the task window, the card paints no surface of its own (`border-0
- * bg-transparent shadow-none`) because AnchoredPopover already draws the
- * floating border/radius/shadow — nesting a second bordered card inside it
- * would double the hairline. The only shadow is the shell's; ink stays on
- * three levels (foreground / muted-foreground / foreground-3) and mono meta is
- * `font-mono tabular-nums`; hue is semantic only — success = settled, warning =
- * blocked, destructive = failed, primary = the one main action per popover.
+ * Every control is a host primitive (`Button` / `StateDot` / `Tag`) — a row
+ * that opens something IS a `<button>`, so it is keyboard reachable — and the
+ * boxes around them are the page's own module classes (`popCard`, `popRows`,
+ * `popList*`). The card is the portal's content root, so it paints the floating
+ * surface itself: the popover shell only positions the box it portals.
+ *
+ * A member row with a child session jumps to that transcript; a member without
+ * one (a declaration that never spawned) stays a plain tally line.
  *
  * The team board is NOT here: it is always visible as a strip above the
  * canvas (TeamBoard.tsx).
  */
 import type { ReactNode } from 'react'
-import {
-  IconBranchOutline16, IconRightUpOutline14, StateDot,
-} from '@deepseek-ai/dsh-client-ui-primitives'
+import clsx from 'clsx'
+import { Button, IconRightUpOutline14, StateDot, Tag } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SidebarSubagentAddress } from '../context-types.ts'
 import type { TasksAgentNode, TasksWorkflowNode } from './tasks-model.ts'
 import {
-  flatten, taskDotState, taskStatusKey, workflowStatusKey,
+  flatten, nodeDotState, taskDotState, taskStatusKey, workflowStatusKey,
 } from './tasks-shared.tsx'
 import { t, type CopyKey } from './locales.ts'
-import { Badge } from './ui/badge.tsx'
-import { Button } from './ui/button.tsx'
-import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card.tsx'
-import { Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle } from './ui/item.tsx'
-import { Separator } from './ui/separator.tsx'
-
-/** The workflow run status (the badge's semantic ink selector). */
-type WorkflowStatus = TasksWorkflowNode['run']['status']
+import css from './tasks-graph.module.css'
 
 /** The display-state label key. */
 function stateKey(state: TasksAgentNode['state']): CopyKey {
@@ -50,68 +38,21 @@ function stateKey(state: TasksAgentNode['state']): CopyKey {
   }
 }
 
-/**
- * The stock Badge variant of one status word: running / in progress =
- * `default` (the accent), failed / cancelled = `destructive`, everything
- * settled = `secondary` (pending included — a to-do list is not an alert).
- */
-function statusVariant(status: WorkflowStatus | 'pending' | 'in_progress' | 'completed'): 'default' | 'secondary' | 'destructive' {
-  if (status === 'running' || status === 'in_progress') return 'default'
-  if (status === 'failed' || status === 'cancelled') return 'destructive'
-  return 'secondary'
-}
-
-/** The node display state on the same stock variant set. */
-function stateVariant(state: TasksAgentNode['state']): 'default' | 'secondary' | 'destructive' {
-  if (state === 'running') return 'default'
-  if (state === 'error') return 'destructive'
-  return 'secondary'
-}
-
-/**
- * The popover's key/value grid (label left, value right, mono on request).
- * The read-only meta stays a definition list rather than a `FieldGroup`: the
- * three ink levels ARE the design language here, and a `FieldLabel` would have
- * to be repainted (or would shout) to say the same thing. The label column is
- * a fixed 64px so every row's value starts on one axis — an `auto` column
- * makes the labels ragged across rows.
- */
+/** The popover's key/value grid. */
 function PopRows(props: { children: ReactNode }): ReactNode {
-  return <dl className="grid grid-cols-[64px_1fr] items-baseline gap-x-3 gap-y-1">{props.children}</dl>
+  return <dl className={css.popRows}>{props.children}</dl>
 }
 
 /** One key/value row of a popover. */
 function PopRow(props: { label: string; mono?: boolean; children: ReactNode }): ReactNode {
   return (
     <>
-      <dt className="truncate text-xs text-foreground-3" title={props.label}>{props.label}</dt>
-      <dd
-        className={
-          props.mono === true
-            ? 'truncate text-right font-mono text-xs tabular-nums text-muted-foreground'
-            : 'flex min-w-0 items-center justify-end gap-1.5 text-right text-xs'
-        }
-      >
-        {props.children}
-      </dd>
+      <dt className={css.popKey}>{props.label}</dt>
+      <dd className={clsx(css.popValue, props.mono === true && css.popValueMono)}>{props.children}</dd>
     </>
   )
 }
 
-/** The mono kicker above a popover list ("共享任务" / a phase title). */
-function GroupLabel(props: { children: ReactNode }): ReactNode {
-  return (
-    <div className="px-1 pt-0.5 font-mono text-xs tracking-wide text-foreground-3 uppercase">
-      {props.children}
-    </div>
-  )
-}
-
-/** One status badge on its stock variant (neutral chrome). */
-function StatusBadge(props: { variant: 'default' | 'secondary' | 'destructive'; children: ReactNode }): ReactNode {
-  return <Badge variant={props.variant}>{props.children}</Badge>
-}
-
 /** The agent node detail popover. */
 export function AgentNodePopover(props: {
   node: TasksAgentNode
@@ -124,103 +65,73 @@ export function AgentNodePopover(props: {
   const liveTool = node.live?.tool !== undefined
     ? `${node.live.tool.name}${node.live.tool.args === '' ? '' : ` ${node.live.tool.args}`}`
     : undefined
-  const tasks = node.tasks ?? []
   return (
-    // `dsw-tasks`: this card renders inside AnchoredPopover's portal at
-    // document.body — OUTSIDE the page root — so it must re-declare the page
-    // root class to pick up the scoped base reset the plugin ships instead of
-    // preflight (see TaskWindow.tsx for the same pattern).
-    <Card className="dsw-tasks box-border gap-0 rounded-lg border-0 bg-transparent py-0 shadow-none">
-      {/* The node leads (title) over the card's kind (description), and its
-          display state rides the header's action slot as a stock badge. */}
-      <CardHeader className="items-center px-3 py-2">
-        <CardTitle className="min-w-0">
-          <span className="min-w-0 truncate" title={node.label}>{node.label}</span>
-        </CardTitle>
-        <CardDescription>{t('tasksNodeDetail')}</CardDescription>
-        <CardAction>
-          <StatusBadge variant={stateVariant(node.state)}>{t(stateKey(node.state))}</StatusBadge>
-        </CardAction>
-      </CardHeader>
-      <Separator />
-      <CardContent className="flex min-w-0 flex-col gap-2 px-3 py-2.5">
-        <PopRows>
-          {node.mode !== undefined && (
-            <PopRow label={t('tasksNodeMode')}>
-              {node.mode === 'one-shot' ? t('subagentModeOneShot') : t('subagentModeContinuable')}
-            </PopRow>
-          )}
-          {node.team !== undefined && (
-            <PopRow label={t('tasksNodeTeamRole')}>
-              {node.team.role === 'lead' ? 'lead' : node.team.name}
-            </PopRow>
-          )}
-          {node.team?.model !== undefined && (
-            <PopRow label={t('tasksNodeModel')} mono>{node.team.model}</PopRow>
-          )}
-          {(liveTool !== undefined || liveText !== undefined) && (
-            <PopRow label={t('tasksNodeActivity')} mono>{liveTool ?? liveText}</PopRow>
-          )}
-        </PopRows>
-        {liveText !== undefined && liveTool !== undefined && (
-          <div className="line-clamp-2 text-xs text-muted-foreground" title={liveText}>{liveText}</div>
+    <div className={css.popCard}>
+      <div className={css.popHead}>
+        <span>{t('tasksNodeDetail')}</span>
+      </div>
+      <span className={css.popTitle} title={node.label}>{node.label}</span>
+      <PopRows>
+        <PopRow label={t('tasksNodeState')}>
+          <StateDot state={nodeDotState(node.state)} size={6} /> {t(stateKey(node.state))}
+        </PopRow>
+        {node.mode !== undefined && (
+          <PopRow label={t('tasksNodeMode')}>
+            {node.mode === 'one-shot' ? t('subagentModeOneShot') : t('subagentModeContinuable')}
+          </PopRow>
         )}
-      </CardContent>
-      {tasks.length > 0 && (
-        <>
-          <Separator />
-          <CardContent className="flex flex-col gap-1 px-3 py-2.5">
-            <GroupLabel>{t('tasksNodeTasks')}</GroupLabel>
-            {/* Each row opens the shared task window, so the whole row is the
-                button (`Item asChild` puts the stock row geometry on it, and
-                the trailing status badge on the actions slot). */}
-            <ItemGroup className="max-h-[190px] overflow-y-auto">
-              {tasks.map(task => (
-                <Item
-                  key={task.id}
-                  asChild
-                  variant="outline"
-                  size="sm"
-                  className="min-w-0 flex-nowrap gap-2 px-2 py-1.5 hover:bg-muted"
-                >
-                  <button
-                    type="button"
-                    className="text-left"
-                    title={task.subject}
-                    onClick={(event) => { onOpenTask(task.id, event.currentTarget) }}
-                  >
-                    <ItemMedia>
-                      <StateDot state={taskDotState(task)} size={6} />
-                    </ItemMedia>
-                    <ItemContent className="min-w-0">
-                      <ItemTitle className="w-full min-w-0">
-                        <span className="min-w-0 flex-1 truncate">{task.subject}</span>
-                      </ItemTitle>
-                    </ItemContent>
-                    <ItemActions>
-                      <StatusBadge variant={statusVariant(task.status)}>
-                        {t(taskStatusKey(task.status))}
-                      </StatusBadge>
-                    </ItemActions>
-                  </button>
-                </Item>
-              ))}
-            </ItemGroup>
-          </CardContent>
-        </>
+        {node.team !== undefined && (
+          <PopRow label={t('tasksNodeTeamRole')}>
+            {node.team.role === 'lead' ? 'lead' : node.team.name}
+          </PopRow>
+        )}
+        {node.team?.model !== undefined && (
+          <PopRow label={t('tasksNodeModel')} mono>{node.team.model}</PopRow>
+        )}
+        {(liveTool !== undefined || liveText !== undefined) && (
+          <PopRow label={t('tasksNodeActivity')} mono>{liveTool ?? liveText}</PopRow>
+        )}
+      </PopRows>
+      {liveText !== undefined && liveTool !== undefined && (
+        <div className={css.popHint}>{liveText}</div>
+      )}
+      {(node.tasks?.length ?? 0) > 0 && (
+        <div className={css.popSection}>
+          <div className={css.popGroup}>{t('tasksNodeTasks')}</div>
+          <div className={css.popList}>
+            {(node.tasks ?? []).map(task => (
+              // The whole row opens the shared task window.
+              <Button
+                key={task.id}
+                variant="ghost"
+                size="sm"
+                className={css.popListRow}
+                title={task.subject}
+                onClick={(event) => { onOpenTask(task.id, event.currentTarget) }}
+              >
+                <StateDot state={taskDotState(task)} size={6} />
+                <span className={css.popListLabel}>{task.subject}</span>
+                <Tag tone={task.status === 'completed' ? 'success' : task.ready ? 'info' : 'warning'}>
+                  {t(taskStatusKey(task.status))}
+                </Tag>
+              </Button>
+            ))}
+          </div>
+        </div>
       )}
       {(node.childAddress !== undefined || node.parentId === undefined) && (
-        <>
-          <Separator />
-          <CardFooter className="justify-end px-3 py-2">
-            <Button size="sm" onClick={() => { onJump(node) }}>
-              <IconRightUpOutline14 />
-              {t('tasksNodeJump')}
-            </Button>
-          </CardFooter>
-        </>
+        <div className={css.popFoot}>
+          <Button
+            variant="primary"
+            size="sm"
+            icon={<IconRightUpOutline14 size={12} />}
+            onClick={() => { onJump(node) }}
+          >
+            {t('tasksNodeJump')}
+          </Button>
+        </div>
       )}
-    </Card>
+    </div>
   )
 }
 
@@ -239,85 +150,61 @@ export function WorkflowNodePopover(props: {
     return 'idle'
   }
   return (
-    // `dsw-tasks`: same portal-scope reset as AgentNodePopover above.
-    <Card className="dsw-tasks box-border gap-0 rounded-lg border-0 bg-transparent py-0 shadow-none">
-      {/* The run's identity leads and keeps its branch glyph; the run status
-          rides the header's action slot as a stock badge. */}
-      <CardHeader className="items-center px-3 py-2">
-        <CardTitle className="flex min-w-0 items-center gap-1.5">
-          {/* The visible line carries the copy; the glyph is decoration. */}
-          <span className="flex flex-none items-center" aria-hidden="true">
-            <IconBranchOutline16 />
-          </span>
-          <span className="min-w-0 truncate" title={run.name}>{run.name}</span>
-        </CardTitle>
-        <CardDescription>{t('workflowRun')}</CardDescription>
-        <CardAction>
-          <StatusBadge variant={statusVariant(run.status)}>{t(workflowStatusKey(run.status))}</StatusBadge>
-        </CardAction>
-      </CardHeader>
+    <div className={css.popCard}>
+      <div className={css.popHead}>
+        <span>{t('workflowRun')}</span>
+      </div>
+      <span className={css.popTitle} title={run.name}>▶ {run.name}</span>
+      <PopRows>
+        <PopRow label={t('tasksNodeState')}>{t(workflowStatusKey(run.status))}</PopRow>
+      </PopRows>
       {run.phases.length > 0 && (
-        <>
-          <Separator />
-          <CardContent className="flex max-h-[220px] flex-col gap-2 overflow-y-auto px-3 py-2.5">
+        <div className={css.popSection}>
+          <div className={css.popList}>
             {run.phases.map((phase, phaseIndex) => (
-              <div key={`${phase.title ?? 'phase'}-${phaseIndex}`} className="flex flex-col gap-0.5">
-                <GroupLabel>{phase.title ?? t('workflowPhaseUnnamed')}</GroupLabel>
+              <div key={`${phase.title ?? 'phase'}-${phaseIndex}`}>
+                <div className={css.popGroup}>{phase.title ?? t('workflowPhaseUnnamed')}</div>
                 {phase.members.length === 0 && (
-                  <div className="px-1 py-1 text-xs text-foreground-3">{t('subagentEmpty')}</div>
+                  <div className={css.popHint}>{t('subagentEmpty')}</div>
                 )}
-                <ItemGroup>
-                  {phase.members.map(member => {
-                    const body = (
-                      <>
-                        <ItemMedia>
-                          <StateDot size={6} state={memberDot(member.outcome)} />
-                        </ItemMedia>
-                        <ItemContent className="min-w-0">
-                          <ItemTitle className="w-full min-w-0">
-                            <span className="min-w-0 flex-1 truncate" title={member.label}>{member.label}</span>
-                          </ItemTitle>
-                        </ItemContent>
-                      </>
+                {phase.members.map(member => {
+                  const body = (
+                    <>
+                      <StateDot size={6} state={memberDot(member.outcome)} />
+                      <span className={css.popListLabel}>{member.label}</span>
+                    </>
+                  )
+                  // A member row IS a jump affordance when it has a child
+                  // session (a real button, so it is keyboard reachable);
+                  // without one it stays a plain tally line.
+                  return member.childId === ''
+                    ? (
+                      <div key={member.seq} className={css.popListRow} title={member.label}>{body}</div>
                     )
-                    // A member row IS a jump affordance when it has a child
-                    // session; without one it stays a plain tally line.
-                    return member.childId === ''
-                      ? (
-                        <Item key={member.seq} size="sm" className="min-w-0 flex-nowrap gap-2 px-1.5 py-1">
-                          {body}
-                        </Item>
-                      )
-                      : (
-                        <Item
-                          key={member.seq}
-                          asChild
-                          size="sm"
-                          className="min-w-0 flex-nowrap gap-2 px-1.5 py-1 hover:bg-muted"
-                        >
-                          <button
-                            type="button"
-                            className="text-left"
-                            title={member.label}
-                            onClick={() => {
-                              onJumpMember({
-                                parentSessionId: run.originSessionId,
-                                childSessionId: member.childId,
-                                mode: 'one-shot',
-                              })
-                            }}
-                          >
-                            {body}
-                          </button>
-                        </Item>
-                      )
-                  })}
-                </ItemGroup>
+                    : (
+                      <Button
+                        key={member.seq}
+                        variant="ghost"
+                        size="sm"
+                        className={css.popListRow}
+                        title={member.label}
+                        onClick={() => {
+                          onJumpMember({
+                            parentSessionId: run.originSessionId,
+                            childSessionId: member.childId,
+                            mode: 'one-shot',
+                          })
+                        }}
+                      >
+                        {body}
+                      </Button>
+                    )
+                })}
               </div>
             ))}
-          </CardContent>
-        </>
+          </div>
+        </div>
       )}
-    </Card>
+    </div>
   )
 }
diff --git a/src/client/TasksTree.tsx b/src/client/TasksTree.tsx
index ffa1035..18175cf 100644
--- a/src/client/TasksTree.tsx
+++ b/src/client/TasksTree.tsx
@@ -1,64 +1,26 @@
 /**
  * The tree mode of the Tasks page: the SAME unified model rendered as the
- * classic indentation tree — nested children with a hairline connector, rows on
- * the shadcn base (a text-sm/500 title, a text-xs mono meta line, a 2px accent
- * bar on the current session, dashed fold cards), and the shared bottom-right
- * control cluster (view toggle + fold toggle) so switching back is always
- * possible.
+ * classic indentation tree — nested children on a hairline thread, the plugin's
+ * row metrics (12px title / 11px mono meta), the left accent bar on the current
+ * session, dashed fold rows, and the shared bottom-right control cluster (view
+ * toggle + fold toggle) so switching back is always possible.
  *
- * Visual language: Tailwind utilities over the shadcn tokens
- * (src/client/ui/theme.css). Hierarchy is one 1px `border-border` hairline plus
- * the surface ladder and `hover:bg-muted` — the row is a list line, not a
- * card, so it paints no shadow. Every color is a semantic token: no palette
- * class and no literal. Controls come from the vendored shadcn set
- * (`ScrollArea`, `Collapsible`, `Spinner`) and glyphs from the host
- * `IconXxx` primitives, so the page owns no artwork of its own.
- *
- * Behaviour is unchanged: the same `data-tasks-row` focus order, the same
- * `role="tree"` / `role="treeitem"` + `aria-level` semantics, the same
- * ArrowUp / ArrowDown / Home / End / Enter / Space handling, and the same
- * global fold aggregate (a fold row toggles the whole page's fold state).
- *
- * `Collapsible` is structural only: no row gains a collapse toggle, because
- * subtree visibility is owned by the page-wide fold state (`folded`). It is
- * rendered open + `forceMount`, so a subtree container is always mounted and
- * `[data-tasks-row]` focus order is exactly the pre-migration one.
+ * Behaviour contract: `role="tree"` / `role="treeitem"` + `aria-level`, a
+ * `[data-tasks-row]` focus order, ArrowUp / ArrowDown / Home / End focus moves,
+ * Enter / Space activation, and the global fold aggregate (a fold row toggles
+ * the whole page's fold state).
  */
 import { useCallback, useMemo, useRef, type KeyboardEvent, type ReactNode } from 'react'
-import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import clsx from 'clsx'
+import { IconLoadingOutline16, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { TasksAgentNode, TasksNode, TasksWorkflowNode } from './tasks-model.ts'
 import {
   AgentGlyph, agentMeta, FoldGlyph, foldPreviews, LiveLine, nodeDotState, TaskLine,
   WorkflowGlyph, workflowMeta,
 } from './tasks-shared.tsx'
 import { FoldToggleButton, ViewModeToggle } from './TasksGraph.tsx'
-import { Collapsible, CollapsibleContent } from './ui/collapsible.tsx'
-import { ScrollArea } from './ui/scroll-area.tsx'
-import { Spinner } from './ui/spinner.tsx'
-import { cn } from './ui/utils.ts'
 import { t } from './locales.ts'
-
-/** The row slab: one shared box, so every row kind lines up on the same grid. */
-const ROW = 'flex w-full cursor-pointer items-start gap-2 rounded-md px-2 py-2 text-left text-sm leading-[1.45] text-foreground focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-ring'
-/** Hover is a background change only, per the design language. */
-const ROW_HOVER = 'hover:bg-muted'
-/** The current session: the same muted surface plus the 2px accent bar. */
-const ROW_CURRENT = 'bg-muted'
-/** Settled (done / error) rows recede by INK — the row's title drops
- *  from the foreground to the secondary ink — never by opacity or hue. */
-const ROW_SETTLED = 'text-muted-foreground'
-/** The fold aggregate is a dashed inline card, not a filled row. */
-const ROW_FOLD = 'border border-dashed border-border text-muted-foreground'
-/** One text line of a row body. */
-const LINE = 'truncate'
-/** The mono meta line: `text-xs`, tabular figures, secondary ink. */
-const META = 'truncate font-mono text-xs tabular-nums text-muted-foreground'
-/** The glyph/state-dot gutter (row level 0). */
-const GLYPH = 'mt-0.5 flex-none text-foreground-3'
-/** The current-session accent bar; the slot is reserved on EVERY agent row so
- *  the dot and glyphs stay on one vertical line down the whole tree. */
-const ACCENT_SLOT = 'mt-0.5 h-4 w-0.5 flex-none rounded-full'
-const ACCENT_BAR = `${ACCENT_SLOT} bg-primary`
+import css from './tasks-graph.module.css'
 
 export interface TasksTreeProps {
   nodes: readonly TasksNode[]
@@ -125,7 +87,7 @@ export function TasksTree(props: TasksTreeProps): ReactNode {
     }
   }
 
-  /** One row plus its nested children (hairline connector per the mockup). */
+  /** One row plus its nested children (connector line per the mockup). */
   const renderNode = (node: TasksNode, depth: number): ReactNode => {
     const children = childrenOf.get(node.id) ?? []
     const row = node.kind === 'fold'
@@ -137,19 +99,19 @@ export function TasksTree(props: TasksTreeProps): ReactNode {
           tabIndex={0}
           aria-level={depth + 1}
           aria-label={`${t('tasksFoldCompleted', { count: node.count })} · ${t('tasksFoldExpand')}`}
-          className={cn(ROW, ROW_FOLD, ROW_HOVER)}
+          className={clsx(css.treeRow, css.treeFoldRow)}
           onClick={onToggleFold}
           onKeyDown={(event) => { activateOnKey(event, onToggleFold) }}
         >
-          <span className={GLYPH} aria-hidden="true"><FoldGlyph /></span>
-          <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-            <span className={cn('flex items-center gap-1.5 font-medium', LINE)}>
+          <span className={css.treeGlyph} aria-hidden="true"><FoldGlyph /></span>
+          <span className={css.treeContent}>
+            <span className={css.treeTitle}>
               {t('tasksFoldCompleted', { count: node.count })}
-              <span className={META}>
+              <span className={css.treeMeta}>
                 {t(folded ? 'tasksFoldExpand' : 'tasksFoldCollapse')}
               </span>
             </span>
-            <span className={META}>{foldPreviews(node.previews)}</span>
+            <span className={css.treeMeta}>{foldPreviews(node.previews)}</span>
           </span>
         </div>
       )
@@ -163,19 +125,17 @@ export function TasksTree(props: TasksTreeProps): ReactNode {
             aria-level={depth + 1}
             aria-expanded="true"
             aria-label={`${node.run.name} ${workflowMeta(node)}`}
-            className={cn(ROW, ROW_HOVER, node.run.status !== 'running' && ROW_SETTLED)}
+            className={clsx(css.treeRow, node.run.status !== 'running' && css.treeRowSettled)}
             onClick={(event) => { onWorkflowInfo(node, event.currentTarget) }}
             onKeyDown={(event) => {
               activateOnKey(event, () => { onWorkflowInfo(node, event.currentTarget as HTMLElement) })
             }}
           >
-            <span className="mt-0.5 flex flex-none items-center">
-              <StateDot state={node.run.status === 'running' ? 'ongoing' : 'done'} size={6} />
-            </span>
-            <span className={GLYPH} aria-hidden="true"><WorkflowGlyph /></span>
-            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-              <span className={cn('font-medium', LINE)}>{node.run.name}</span>
-              <span className={META}>{workflowMeta(node)}</span>
+            <StateDot state={node.run.status === 'running' ? 'ongoing' : 'done'} size={6} />
+            <span className={css.treeGlyph} aria-hidden="true"><WorkflowGlyph /></span>
+            <span className={css.treeContent}>
+              <span className={css.treeTitle}>{node.run.name}</span>
+              <span className={css.treeMeta}>{workflowMeta(node)}</span>
             </span>
           </div>
         )
@@ -188,28 +148,21 @@ export function TasksTree(props: TasksTreeProps): ReactNode {
             aria-level={depth + 1}
             aria-label={`${node.label} ${agentMeta(node)}`}
             aria-current={node.current ? 'true' : undefined}
-            className={cn(
-              ROW,
-              ROW_HOVER,
-              node.current && ROW_CURRENT,
-              (node.state === 'done' || node.state === 'error') && !node.current && ROW_SETTLED,
+            className={clsx(
+              css.treeRow,
+              node.current && css.treeRowActive,
+              (node.state === 'done' || node.state === 'error') && !node.current && css.treeRowSettled,
             )}
             onClick={(event) => { onNodeInfo(node, event.currentTarget) }}
             onKeyDown={(event) => {
               activateOnKey(event, () => { onNodeInfo(node, event.currentTarget as HTMLElement) })
             }}
           >
-            <span
-              className={node.current ? ACCENT_BAR : ACCENT_SLOT}
-              aria-hidden="true"
-            />
-            <span className="mt-0.5 flex flex-none items-center">
-              <StateDot state={nodeDotState(node.state)} size={6} />
-            </span>
-            <span className={GLYPH} aria-hidden="true"><AgentGlyph node={node} /></span>
-            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-              <span className={cn('font-medium', LINE)}>{node.label}</span>
-              <span className={META}>{agentMeta(node)}</span>
+            <StateDot state={nodeDotState(node.state)} size={6} />
+            <span className={css.treeGlyph} aria-hidden="true"><AgentGlyph node={node} /></span>
+            <span className={css.treeContent}>
+              <span className={css.treeTitle}>{node.label}</span>
+              <span className={css.treeMeta}>{agentMeta(node)}</span>
               {node.state === 'running' && <LiveLine live={node.live} />}
               <TaskLine tasks={node.tasks} onOpenTask={onOpenTask} />
             </span>
@@ -217,43 +170,35 @@ export function TasksTree(props: TasksTreeProps): ReactNode {
         )
     if (children.length === 0) return <div key={node.id}>{row}</div>
     return (
-      <Collapsible key={node.id} open>
+      <div key={node.id}>
         {row}
-        <CollapsibleContent
-          forceMount
-          className="ml-3 border-l border-border pl-2.5"
-        >
+        <div className={css.treeKids}>
           {children.map(child => renderNode(child, depth + 1))}
-        </CollapsibleContent>
-      </Collapsible>
+        </div>
+      </div>
     )
   }
 
   const roots = childrenOf.get('') ?? []
 
   return (
-    <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
-      <ScrollArea className="min-h-0 flex-1">
-        <div ref={bodyRef} className="px-2.5 pt-2 pb-11">
-          <div
-            role="tree"
-            aria-label={t('subagent')}
-            onKeyDown={onTreeKeyDown}
-          >
-            {loading === true && roots.length === 0 && (
-              <div className="flex items-center justify-center gap-1.5 px-6 py-3 text-xs text-muted-foreground">
-                {/* The visible line carries the copy; the glyph is decoration. */}
-                <span aria-hidden="true" className="flex flex-none items-center">
-                  <Spinner className="size-3" />
-                </span>
-                {t('loading')}
-              </div>
-            )}
-            {roots.map(root => renderNode(root, 0))}
+    <div className={css.graphView}>
+      <div
+        ref={bodyRef}
+        className={css.treeView}
+        role="tree"
+        aria-label={t('subagent')}
+        onKeyDown={onTreeKeyDown}
+      >
+        {loading === true && roots.length === 0 && (
+          <div className={css.viewEmptyHint}>
+            <span className={css.treeGlyph} aria-hidden="true"><IconLoadingOutline16 size={12} /></span>
+            {t('loading')}
           </div>
-        </div>
-      </ScrollArea>
-      <div className="absolute right-2.5 bottom-2.5 z-10 flex flex-row items-center" data-graph-controls>
+        )}
+        {roots.map(root => renderNode(root, 0))}
+      </div>
+      <div className={css.controls} data-graph-controls>
         <ViewModeToggle mode={mode} onModeChange={onModeChange} />
         <FoldToggleButton folded={folded} onToggleFold={onToggleFold} />
       </div>
diff --git a/src/client/TeamBoard.tsx b/src/client/TeamBoard.tsx
index c810bdb..ef0cb3c 100644
--- a/src/client/TeamBoard.tsx
+++ b/src/client/TeamBoard.tsx
@@ -1,43 +1,28 @@
 /**
  * The Agent Teams board — ALWAYS VISIBLE under the page header whenever the
- * tree's root leads a team. It is a full-width strip, not a side rail, because
- * the native sidebar is narrow: members wrap as a segmented filter and the
- * task list scrolls inside a bounded height, so the canvas keeps its room.
+ * tree's root leads a team. Every control is a host primitive (Menu / Pill /
+ * Tag / Button / StateDot); the page ships no native form control of its own.
  *
- * Visual language: the vendored shadcn/ui set over the task page's Tailwind
- * tokens (src/client/ui/theme.css) — one full `Card` whose bands (header,
- * filter, `CardContent` list, `CardFooter`) are separated by hairlines, task
- * rows are `Item`s, members are a `ToggleGroup` whose picked chip carries the
- * component's own accent, and every task row ends in one `DropdownMenu`.
- * Type and color come from the components' variants and the semantic tokens
- * (the count keeps the page's mono-meta convention); status color is the stock
- * `Badge` variant set only. The strip's compact band padding is its one
- * deliberate departure — it is a permanently visible strip, so it stays thin
- * and lets the canvas below it keep its height.
+ * Layout: the strip is full width because the native sidebar is narrow — a
+ * member row of Pills (also the owner filter), then task rows (subject +
+ * owner + status Tag + ONE overflow Menu).
  *
- * Behaviour is unchanged, and deliberately so: the row and EVERY menu entry
- * open the shared task window, which is the ONE surface owning view / edit /
- * create and every CAS mutation. The menu is that window's affordance list
- * hoisted onto the row, not a second mutation path — so a conflict still
- * surfaces in the window and re-syncs through the parent's poller, exactly as
- * before.
+ * Behaviour: a row and EVERY entry of its menu open the shared task window,
+ * which is the ONE surface owning view / edit / create and every CAS mutation
+ * — the menu is that window's affordance list hoisted onto the row, not a
+ * second mutation path. A conflict therefore still surfaces in the window and
+ * re-syncs through the parent's poller.
  */
 import { useMemo, useRef, useState, type ReactNode } from 'react'
-import { IconChecklistOutline14, IconChevronUpOutline14, IconPlusOutline16, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import {
+  Button, IconChecklistOutline14, IconCheckOutline14, IconChevronUpOutline14, IconEditOutline16,
+  IconEllipsisOutline16, IconPlusOutline16, IconRefreshOutline14, IconTrashOutline16,
+  IconUserOutline16, Menu, Pill, StateDot, Tag,
+  type MenuEntry, type TagTone,
+} from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SidebarTeamMemberView, SidebarTeamTaskView } from '../context-types.ts'
 import { t, type CopyKey } from './locales.ts'
-import { Badge } from './ui/badge.tsx'
-import { Button } from './ui/button.tsx'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card.tsx'
-import {
-  DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator,
-  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger,
-} from './ui/dropdown-menu.tsx'
-import { Empty, EmptyDescription } from './ui/empty.tsx'
-import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from './ui/item.tsx'
-import { Separator } from './ui/separator.tsx'
-import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.tsx'
-import { cn } from './ui/utils.ts'
+import css from './tasks-graph.module.css'
 
 /** The task status label key. */
 function taskStatusKey(status: SidebarTeamTaskView['status']): CopyKey {
@@ -49,58 +34,60 @@ function taskStatusKey(status: SidebarTeamTaskView['status']): CopyKey {
   }
 }
 
-/** The status word as shown: an unready task reads "blocked" whatever it is. */
-function taskStatusLabel(task: SidebarTeamTaskView): string {
-  return t(task.ready ? taskStatusKey(task.status) : 'teamTaskBlocked')
+/** The status Tag tone of one task. */
+function taskTone(task: SidebarTeamTaskView): TagTone {
+  if (task.status === 'completed') return 'success'
+  if (!task.ready) return 'warning'
+  return task.status === 'in_progress' ? 'info' : 'neutral'
 }
 
 /**
- * The status Badge: stock shadcn variants only — in progress takes `default`
- * (the accent), a blocked task wears `outline` with warning ink, everything
- * else settles on `secondary` (a to-do list is not an alert).
- */
-function taskBadge(task: SidebarTeamTaskView): { variant: 'default' | 'secondary' | 'outline'; className?: string } {
-  if (task.status === 'in_progress' && task.ready) return { variant: 'default' }
-  if (!task.ready) return { variant: 'outline', className: 'text-warning' }
-  return { variant: 'secondary' }
-}
-
-/** The StateDot semantic of one task row. */
-function taskDotState(task: SidebarTeamTaskView): 'done' | 'warning' | 'ongoing' {
-  if (task.status === 'completed') return 'done'
-  return task.ready ? 'ongoing' : 'warning'
-}
-
-/** The StateDot semantic of one member chip. */
-function memberDotState(member: SidebarTeamMemberView): 'ongoing' | 'error' | 'idle' {
-  return member.status === 'running' || member.status === 'provisioning'
-    ? 'ongoing'
-    : member.status === 'failed' ? 'error' : 'idle'
-}
-
-/**
- * The "every member" sentinel of the owner filter. It must be a NON-empty
- * string: Radix treats a falsy toggle value as "nothing selected", so an empty
- * sentinel would leave the whole segmented control reading as unselected.
- */
-const FILTER_ALL = '__all__'
-
-/**
- * The row menu's trigger: revealed on hover / focus (the board stays quiet
- * until the reader reaches for it) but never removed from the tab order.
- */
-const TRIGGER_CLASS = 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100'
-
-/**
- * One board row: state dot, subject, owner, status Badge, and the row menu.
+ * One task's row menu: the shared task window's own affordance list hoisted
+ * onto the row — complete (or reopen, once completed), edit, reassign the
+ * owner, delete. Every entry opens that window rather than mutating anything,
+ * so the labels mirror the window's actions and the delete stays NEUTRAL: it
+ * does not delete, it opens the surface whose own delete is the two-step
+ * confirm (a permanently red row would over-signal).
  *
- * The clickable surface is a real `<button>` (the whole row except the menu),
- * and the menu is its SIBLING — a control may not nest inside another, and the
- * row's own press target must stay one element. `Item asChild` puts the stock
- * row geometry on that button itself instead of wrapping it in a second box.
- * The node is held in a ref so the menu can hand a MOUNTED anchor to the task
- * window: the menu content is portaled and unmounts the moment an entry is
- * picked, while the window measures its anchor on mount.
+ * The owner submenu lists TEAMMATES only — a shared task is handed to a
+ * worker, not back to the lead (the member chips above still list everyone).
+ */
+function taskMenuItems(
+  task: SidebarTeamTaskView,
+  teammates: readonly SidebarTeamMemberView[],
+): MenuEntry[] {
+  const completed = task.status === 'completed'
+  return [
+    {
+      id: 'state',
+      label: t(completed ? 'teamTaskReopen' : 'teamTaskComplete'),
+      icon: completed ? <IconRefreshOutline14 size={14} /> : <IconCheckOutline14 size={14} />,
+    },
+    { id: 'edit', label: t('teamTaskEdit'), icon: <IconEditOutline16 size={14} /> },
+    {
+      id: 'owner',
+      label: t('teamTaskOwner'),
+      icon: <IconUserOutline16 size={14} />,
+      submenu: [
+        { id: 'owner:', label: t('teamTaskUnowned') },
+        ...teammates.map(member => ({ id: `owner:${member.name}`, label: member.name })),
+      ],
+    },
+    { type: 'separator', id: 'team-task-sep' },
+    { id: 'delete', label: t('teamTaskDelete'), icon: <IconTrashOutline16 size={14} /> },
+  ]
+}
+
+/**
+ * One board row: state dot, subject, owner, status Tag, and the row's overflow
+ * Menu.
+ *
+ * The press target is a real `<button>` covering the row (the whole row opens
+ * the shared task window) and the Menu is its SIBLING — a control may not nest
+ * inside another, and the trigger is the only part of the row that belongs to
+ * the menu. The row node is held in a ref so a menu pick can hand a MOUNTED
+ * anchor to the window: the menu list is portaled and unmounts the moment an
+ * entry is picked, while the window measures its anchor on mount.
  */
 function TeamTaskRow(props: {
   task: SidebarTeamTaskView
@@ -108,87 +95,67 @@ function TeamTaskRow(props: {
   onOpenTask(task: SidebarTeamTaskView, anchor: HTMLElement): void
 }): ReactNode {
   const { task, teammates, onOpenTask } = props
+  const [menuOpen, setMenuOpen] = useState(false)
+  /** The row itself: the anchor every window opened from this row shares. */
   const rowRef = useRef<HTMLDivElement>(null)
-  /** Every menu entry lands on the same surface (the window owns the actions). */
+  /** Every entry lands on the same surface (the window owns the actions). */
   const openWindow = (): void => {
     const row = rowRef.current
     if (row !== null) onOpenTask(task, row)
   }
-  const badge = taskBadge(task)
 
   return (
-    <div ref={rowRef} className="group flex min-w-0 items-center gap-1">
-      <Item asChild size="sm" className="min-w-0 flex-1 flex-nowrap gap-2 px-2 py-1.5 hover:bg-muted">
-        <button
-          type="button"
-          aria-label={`${t('teamTaskDetail')} ${task.subject}`}
-          title={t('teamTaskDetail')}
-          onClick={(event) => { onOpenTask(task, event.currentTarget) }}
-        >
-          <ItemMedia><StateDot size={6} state={taskDotState(task)} /></ItemMedia>
-          <ItemContent className="min-w-0">
-            <ItemTitle className="w-full min-w-0">
-              <span className="min-w-0 truncate">{task.subject}</span>
-            </ItemTitle>
-          </ItemContent>
-          {task.ownerName !== undefined && (
-            <span className="max-w-18 flex-none truncate font-mono text-xs tabular-nums text-foreground-3">
-              {task.ownerName}
-            </span>
-          )}
-          <Badge variant={badge.variant} className={cn('flex-none', badge.className)}>
-            {taskStatusLabel(task)}
-          </Badge>
-        </button>
-      </Item>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+    // The row is a flex line so the trailing Menu can sit beside the press
+    // target; the stylesheet has no row+trailing-control class of its own.
+    <div
+      ref={rowRef}
+      style={{ display: 'flex', alignItems: 'center', gap: 2 }}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={css.teamTask}
+        style={{ flex: 1, minWidth: 0 }}
+        aria-label={`${t('teamTaskDetail')} ${task.subject}`}
+        title={t('teamTaskDetail')}
+        onClick={(event) => { onOpenTask(task, event.currentTarget) }}
+      >
+        <StateDot
+          size={6}
+          state={task.status === 'completed' ? 'done' : task.ready ? 'ongoing' : 'warning'}
+        />
+        <span className={css.teamTaskSubject}>{task.subject}</span>
+        {task.ownerName !== undefined && (
+          <span className={css.teamTaskOwner}>{task.ownerName}</span>
+        )}
+        <Tag tone={taskTone(task)}>
+          {t(task.ready ? taskStatusKey(task.status) : 'teamTaskBlocked')}
+        </Tag>
+      </Button>
+      <Menu
+        open={menuOpen}
+        onClose={() => { setMenuOpen(false) }}
+        items={taskMenuItems(task, teammates)}
+        onSelect={() => {
+          setMenuOpen(false)
+          openWindow()
+        }}
+        align="end"
+        portal
+        compact
+        anchor={(
           <Button
             variant="ghost"
-            size="icon-xs"
-            className={TRIGGER_CLASS}
-            aria-label={t('teamTaskActions')}
+            size="sm"
+            icon={<IconEllipsisOutline16 size={13} />}
+            aria-label={`${t('teamTaskActions')} ${task.subject}`}
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
             title={t('teamTaskActions')}
-          >
-            <IconChevronUpOutline14 className="rotate-90" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-44">
-          <DropdownMenuGroup>
-            <DropdownMenuItem onClick={openWindow}>
-              {task.status === 'completed' ? t('teamTaskReopen') : t('teamTaskComplete')}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={openWindow}>
-              {t('teamTaskEdit')}
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>{t('teamTaskOwner')}</DropdownMenuSubTrigger>
-            <DropdownMenuSubContent className="w-40">
-              <DropdownMenuGroup>
-                <DropdownMenuItem onClick={openWindow}>
-                  {t('teamTaskUnowned')}
-                </DropdownMenuItem>
-                {teammates.map(member => (
-                  <DropdownMenuItem key={member.id} onClick={openWindow}>
-                    {member.name}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuGroup>
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            {/* Neutral on purpose: this entry only OPENS the shared task window
-                (the danger lives in the window's two-click delete confirm), so a
-                permanently red menu item would over-signal — see TaskWindow. */}
-            <DropdownMenuItem onClick={openWindow}>
-              {t('teamTaskDelete')}
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
+            onClick={() => { setMenuOpen(current => !current) }}
+          />
+        )}
+      />
     </div>
   )
 }
@@ -216,105 +183,77 @@ export function TeamBoard(props: TeamBoardProps): ReactNode {
   const teammates = useMemo(() => members.filter(member => member.role === 'teammate'), [members])
 
   return (
-    <Card
-      // `gap-0` because the bands are separated by hairlines, not by the stock
-      // card rhythm; `py-0` because each band owns its own padding. The rest is
-      // the stock card surface (`rounded-xl border bg-card shadow-sm`); the
-      // landmark role keeps the labelled region the old `<section>` provided.
-      className="mb-2 shrink-0 gap-0 overflow-hidden py-0"
-      role="region"
-      aria-label={t('teamBoard')}
-    >
-      {/* Header: the disclosure, and the only control that collapses the board.
-          It owns the WHOLE band (one press target, as before) and carries the
-          board's accessible name and expanded state. */}
-      <CardHeader className="flex flex-row items-center gap-1 p-1">
-        <CardTitle className="min-w-0 flex-1">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="w-full justify-start"
-            aria-expanded={!collapsed}
-            aria-label={t('teamBoard')}
-            onClick={onToggleCollapsed}
-          >
-            <IconChecklistOutline14 />
-            <span className="min-w-0 truncate">{t('teamBoard')}</span>
-            <span className="ml-auto min-w-0 truncate font-mono text-xs tabular-nums text-foreground-3">
-              {t('teamChip', { members: members.length, tasks: live.length })}
-            </span>
-            <span className={cn('flex-none', collapsed ? '' : 'rotate-180')} aria-hidden="true">
-              <IconChevronUpOutline14 />
-            </span>
-          </Button>
-        </CardTitle>
-      </CardHeader>
+    <section className={css.teamBoard} aria-label={t('teamBoard')}>
+      <button
+        type="button"
+        className={css.teamBoardBar}
+        aria-expanded={!collapsed}
+        onClick={onToggleCollapsed}
+      >
+        <span className={css.teamBoardIcon} aria-hidden="true"><IconChecklistOutline14 size={11} /></span>
+        <span>{t('teamBoard')}</span>
+        <span className={css.teamBoardCount}>
+          {t('teamChip', { members: members.length, tasks: live.length })}
+        </span>
+        <span
+          className={css.teamBoardChev}
+          style={{ display: 'inline-flex', transform: collapsed ? undefined : 'rotate(180deg)' }}
+          aria-hidden="true"
+        >
+          <IconChevronUpOutline14 size={12} />
+        </span>
+      </button>
       {!collapsed && (
         <>
-          <Separator />
-          {/* The owner filter: one chip per member, plus "all". */}
-          <div className="px-2 py-1.5">
-            <ToggleGroup
-              type="single"
-              variant="default"
-              size="sm"
-              spacing={1}
-              value={ownerFilter ?? FILTER_ALL}
-              aria-label={t('teamMembers')}
-              className="flex-wrap justify-start"
-              onValueChange={(next) => {
-                // "all" is a sentinel, never a real member name — and re-clicking
-                // the active member clears the filter (the toggle's own off state,
-                // which Radix reports as an empty value).
-                setOwnerFilter(next === '' ? undefined : next)
-              }}
+          <div className={css.teamMembers}>
+            <Pill
+              active={ownerFilter === undefined}
+              onClick={() => { setOwnerFilter(undefined) }}
             >
-              <ToggleGroupItem value={FILTER_ALL}>{t('teamFilterAll')}</ToggleGroupItem>
-              {members.map(member => (
-                <ToggleGroupItem
-                  key={member.id}
-                  value={member.name}
-                  title={`${member.name} · ${member.role}`}
-                >
-                  <StateDot size={6} state={memberDotState(member)} />
-                  <span className="min-w-0 truncate">{member.name}</span>
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
+              {t('teamFilterAll')}
+            </Pill>
+            {members.map(member => (
+              <Pill
+                key={member.id}
+                active={ownerFilter === member.name}
+                title={`${member.name} · ${member.role}`}
+                onClick={() => {
+                  setOwnerFilter(current => (current === member.name ? undefined : member.name))
+                }}
+              >
+                <StateDot
+                  size={6}
+                  state={member.status === 'running' || member.status === 'provisioning'
+                    ? 'ongoing'
+                    : member.status === 'failed' ? 'error' : 'idle'}
+                />
+                <span className={css.teamMemberName}>{member.name}</span>
+              </Pill>
+            ))}
           </div>
-          <Separator />
-          <CardContent className="p-1">
-            {shown.length === 0
-              // `Empty` is the design language's empty state; its stock card
-              // rhythm is overridden — including the `md:` step, which would
-              // otherwise re-inflate the band to 48px of padding above 768px —
-              // so an empty board stays a thin band.
-              ? (
-                <Empty className="gap-0 p-3 md:p-3">
-                  <EmptyDescription>{t('teamTasksEmpty')}</EmptyDescription>
-                </Empty>
-              )
-              : (
-                <ItemGroup className="max-h-40 overflow-y-auto">
-                  {shown.map(task => (
-                    <TeamTaskRow key={task.id} task={task} teammates={teammates} onOpenTask={onOpenTask} />
-                  ))}
-                </ItemGroup>
-              )}
-          </CardContent>
-          <Separator />
-          <CardFooter className="px-2 py-1.5">
+          <div className={css.teamTasks}>
+            {shown.length === 0 && <div className={css.teamEmpty}>{t('teamTasksEmpty')}</div>}
+            {shown.map(task => (
+              <TeamTaskRow
+                key={task.id}
+                task={task}
+                teammates={teammates}
+                onOpenTask={onOpenTask}
+              />
+            ))}
+          </div>
+          <div className={css.teamActions}>
             <Button
               variant="outline"
               size="sm"
+              icon={<IconPlusOutline16 size={13} />}
               onClick={(event) => { onOpenTask(undefined, event.currentTarget) }}
             >
-              <IconPlusOutline16 />
               {t('teamTaskCreate')}
             </Button>
-          </CardFooter>
+          </div>
         </>
       )}
-    </Card>
+    </section>
   )
 }
diff --git a/src/client/chunks/tasks.tsx b/src/client/chunks/tasks.tsx
deleted file mode 100644
index 2e366a6..0000000
--- a/src/client/chunks/tasks.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Lazy chunk entry: the whole Tasks page (workflow graph + tree, task window,
- * team board, jobs drawer) together with the vendored shadcn/ui component set
- * it renders. Built as `lib/client-tasks.js` and registered under
- * `dsh-better-sidebar/tasks` — fetched only when the Tasks tab is first
- * opened (see chunk-loader.ts and docs/plans/2026-08-12-lazy-chunks-design.md).
- *
- * Why it is a chunk: the shadcn/radix/tailwind-ui layer costs ~430 KiB raw
- * (radix primitives + floating-ui + tailwind-merge + the vendored components),
- * and README's "startup pulls only the core bundle" contract must hold for
- * every user who never opens the Tasks tab. Never import this module (or the
- * page modules it re-exports) from the core bundle.
- */
-// The Tailwind sheet (theme bridge + compiled utilities) ships WITH the
-// chunk: it styles this page only, so the core bundle stays free of the
-// UI-layer payload and the host page never receives the stylesheet until a
-// reader opens the Tasks tab.
-import '../ui/theme.css'
-
-export { SubagentView } from '../SubagentView.tsx'
diff --git a/src/client/index.tsx b/src/client/index.tsx
index 45c2632..da0fc88 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -31,9 +31,6 @@ import { LOCALE_NS, attachLocale, attachBetterLocale, t, zh, en } from './locale
 import { loadChunk } from './chunk-loader.ts'
 import css from './sidebar.module.css'
 import './layout.css'
-// Tailwind v4 entry for the vendored shadcn/ui components (theme + utilities
-// only, never preflight — see the file header). tsdown compiles it through
-// postcss/@tailwindcss/postcss and injects it as one more <style data-plugin>.
 
 /** Services required before mounting (provided by the client runtime; the
  *  locale service backs the sidebar's copy — see locales.ts). `modules`
diff --git a/src/client/tasks-canvas.module.css b/src/client/tasks-canvas.module.css
index 6ac80b5..5767ece 100644
--- a/src/client/tasks-canvas.module.css
+++ b/src/client/tasks-canvas.module.css
@@ -1,69 +1,63 @@
 /**
- * Canvas-only styles of the workflow graph (TasksGraph.tsx): the dotted grid,
- * the transformed node layer, the SVG relation layer and the edge stroke
- * recipe. These are the four pieces Tailwind utilities cannot express in the
- * markup (a radial-gradient background image, `transform-origin: 0 0` on the
- * scaled layer, an overflow-visible SVG stage, and SVG stroke/dash painting) —
- * everything else in the graph is a utility class over the shadcn tokens.
+ * Graph-only styles of the workflow graph (TasksGraph.tsx) — the two pieces
+ * the page sheet (tasks-graph.module.css) does not carry:
  *
- * Skin contract: every color is a `--dsw-*` token (no literal, no palette
- * class), so the canvas follows the host light/dark theme like the rest of the
- * page. Relations are 1px hairlines in the border ink — the KIND of a relation
- * is its dash pattern and opacity, never a second hue.
+ *  - the card title, clamped to TWO lines (the 68px card reserve in
+ *    tasks-graph-layout.ts is sized for that second line: a single ellipsized
+ *    line left too few CJK characters to tell two siblings apart), and
+ *  - the hydration hint drawn over an empty canvas.
+ *
+ * Everything else the graph wears (the dotted canvas, the bezier edges, the
+ * node cards, the control cluster) stays in the page sheet — one source of
+ * truth per rule.
+ *
+ * Skin contract: colors resolve to `--dsw-alias-*`, type to `--dsw-font-*` —
+ * tokens only, no literal, no palette class, no shadow on a static panel.
  */
 
-.canvas {
+/* Card line 1 of an agent / run node. `-webkit-box` + `-webkit-line-clamp` is
+ * the only way to cap WRAPPED text with an ellipsis, and `overflow-wrap:
+ * anywhere` keeps an unbroken run id from forcing one wide line. The recipe
+ * mirrors the page sheet's node title (12px strong) so only the truncation
+ * differs; the untruncated text stays in the element's `title`. */
+.nodeTitle {
+  flex: 1;
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  font: var(--dsw-font-xxs-strong-12);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* The fold aggregate carries a count, not a name: it recedes one rung in both
+ * weight and ink (the page sheet's plain title). */
+.nodeTitlePlain {
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* The graph twin of the tree's loading row: centred over the canvas and
+ * click-transparent, so pan / zoom / node clicks stay live underneath. It sits
+ * above the transformed node layer (z-index auto) and below the control
+ * cluster (z-index 6). */
+.loading {
   position: absolute;
   inset: 0;
-  cursor: grab;
-  /* Panning must never turn into a text selection or a native scroll. */
-  touch-action: none;
-  user-select: none;
-  /* Graph paper: the dotted grid is part of the language. */
-  background-image: radial-gradient(circle, var(--dsw-alias-border-l1) 0.6px, transparent 0.6px);
-  background-size: 16px 16px;
-  background-position: 0 0;
-}
-
-.canvasDragging {
-  cursor: grabbing;
-}
-
-.canvasInner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform-origin: 0 0;
-}
-
-.edges {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: visible;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   pointer-events: none;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
 }
 
-.edge {
-  fill: none;
-  stroke: var(--dsw-alias-border-l4);
-  stroke-width: 1;
-  opacity: 0.5;
-}
-
-/* Team membership: dashed. */
-.edgeTeam {
-  stroke-dasharray: 3 3;
-  opacity: 0.8;
-}
-
-/* Workflow member: solid, one notch stronger than a plain lineage edge. */
-.edgeWorkflow {
-  opacity: 0.75;
-}
-
-/* Collapsed aggregate: dotted and faint — it stands for many rows. */
-.edgeFold {
-  stroke-dasharray: 1 4;
-  opacity: 0.4;
+/* The hint's glyph is decoration: the copy line carries the message. */
+.loadingGlyph {
+  display: inline-flex;
+  flex: none;
 }
diff --git a/src/client/tasks-graph.module.css b/src/client/tasks-graph.module.css
new file mode 100644
index 0000000..dda1342
--- /dev/null
+++ b/src/client/tasks-graph.module.css
@@ -0,0 +1,1193 @@
+/**
+ * Tasks page chrome — the plugin's native scale, the same one the other tabs
+ * (sidebar / changes / sidechat) are cut to: 12px body (`--dsw-font-xxs-*`),
+ * 11px meta (`--dsw-font-xxxs-11`), 10px micro labels, 28px controls (the host
+ * `Button sm`), 1px `--dsw-alias-border-l2` edges with `-l1` hairlines, hover
+ * fill `--dsw-alias-interactive-bg-hover`, no shadow on any in-flow panel, and
+ * `--dsw-shadow-lv2/3` reserved for the floating layers. One accent, used
+ * sparingly (current node, team/workflow relations, live lines).
+ *
+ * Design target: the native right sidebar at its NARROW width (~360px). Every
+ * block must be readable there — nothing may rely on horizontal room.
+ *
+ * Skin contract: every color resolves to a --dsw-* token (tests/theme.spec.ts
+ * guards `color:`).
+ */
+
+/* ── Graph canvas ──────────────────────────────────────────────────────── */
+
+.graphView {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.canvas {
+  position: absolute;
+  inset: 0;
+  cursor: grab;
+  touch-action: none;
+  /* Panning must never turn into a text selection. */
+  user-select: none;
+  /* Graph paper: the dotted grid is part of the language. */
+  background-image: radial-gradient(circle, var(--dsw-alias-border-l1) 0.6px, transparent 0.6px);
+  background-size: 16px 16px;
+  background-position: 0 0;
+}
+
+.canvasDragging {
+  cursor: grabbing;
+}
+
+.canvasInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+.edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.edge {
+  fill: none;
+  stroke: var(--dsw-alias-label-tertiary);
+  stroke-width: 1;
+  opacity: 0.55;
+}
+
+.edgeTeam {
+  stroke: var(--dsw-alias-state-business-primary);
+  stroke-dasharray: 3 3;
+  opacity: 0.85;
+}
+
+.edgeWorkflow {
+  stroke: var(--dsw-alias-state-business-primary);
+  opacity: 0.8;
+}
+
+.edgeFold {
+  stroke-dasharray: 1 4;
+  opacity: 0.4;
+}
+
+.phaseFrame {
+  position: absolute;
+  border: 1px dashed var(--dsw-alias-label-tertiary);
+  border-radius: 3px;
+  pointer-events: none;
+}
+
+.phaseLabel {
+  position: absolute;
+  top: -7px;
+  left: 8px;
+  padding: 0 5px;
+  background: var(--dsw-alias-bg-layer-1);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* ── Nodes ─────────────────────────────────────────────────────────────── */
+
+.node {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 6px 8px;
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 3px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.node:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* The current session: the card keeps the native selected language — the
+   same 2px accent bar the tree row wears, never a shadow. */
+.nodeCurrent::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--dsw-alias-state-business-primary);
+}
+
+/* Teammates and the workflow run wear the accent edge; the run adds its
+   tint, so the two read apart without a second border weight. */
+.nodeTeam {
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+.nodeWorkflow {
+  border-color: var(--dsw-alias-state-business-primary);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 6%, var(--dsw-alias-bg-layer-1));
+}
+
+.nodeSettled {
+  opacity: 0.62;
+}
+
+.nodeError {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+/* The fold aggregate mirrors the tree's dashed fold row (`treeFoldRow`). */
+.nodeFold {
+  border: 1px dashed var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-base);
+}
+
+.nodeFold:hover {
+  border-color: var(--dsw-alias-label-primary);
+}
+
+.nodeHeader {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+
+.nodeDot {
+  flex: none;
+}
+
+/* The page-sheet twin of the canvas' clamped title (`tasks-canvas.nodeTitle`):
+   same type, only the truncation differs. */
+.nodeTitle {
+  font: var(--dsw-font-xxs-strong-12);
+  color: var(--dsw-alias-label-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nodeTitlePlain {
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.nodeGlyph {
+  display: inline-flex;
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.treeGlyph {
+  display: inline-flex;
+  flex: none;
+  margin-top: 2px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.nodeMeta {
+  margin-top: 2px;
+  font: var(--dsw-font-xxxs-11);
+  font-family: var(--ds-font-family-code, monospace);
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Node shared-task line (team members only) ─────────────────────────── */
+
+/* The node's detail affordance: a small ghost button pinned to the corner. */
+.nodeInfo {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 18px;
+  padding: 0 2px;
+  opacity: 0.55;
+}
+
+.node:hover .nodeInfo,
+.nodeInfo:focus-visible {
+  opacity: 1;
+}
+
+.taskLine {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 4px;
+  margin-top: 3px;
+  min-width: 0;
+  font-size: 10px;
+  line-height: 1.3;
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.taskGlyph {
+  display: inline-flex;
+  flex: none;
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.taskLine:hover .taskSubject {
+  color: var(--dsw-alias-label-primary);
+}
+
+.taskLine:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+  border-radius: 2px;
+}
+
+.taskSubject {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.taskState {
+  flex: none;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.taskMore {
+  flex: none;
+  padding: 0 3px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* ── Live activity row (icon + tool + args; shared by both modes) ──────── */
+
+.live {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 3px;
+  min-width: 0;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  line-height: 1.3;
+  color: var(--dsw-alias-state-business-primary);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.liveGlyph {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 11px;
+  height: 11px;
+  border: 1px solid currentColor;
+  border-radius: 2px;
+}
+
+.liveTool {
+  flex: none;
+}
+
+.liveArgs {
+  color: var(--dsw-alias-label-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.liveText {
+  margin-top: 2px;
+  font-size: 10px;
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Control cluster: bottom-right, horizontal, visible in BOTH modes ──── */
+
+.controls {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  z-index: 6;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 3px;
+}
+
+/* The host `Button sm` is 28px; the class only squares the glyph buttons up
+   and keeps the code face of the zoom readout (`iconButton`'s recipe). */
+.controlBtn {
+  min-width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  border: none;
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.controlBtn + .controlBtn,
+.controlZoomLevel + .controlBtn,
+.controlBtn + .controlZoomLevel {
+  border-left: 1px solid var(--dsw-alias-border-l2);
+}
+
+.controlBtn:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.controlBtnActive {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.controlZoomLevel {
+  padding: 0 5px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* ── Tree mode ─────────────────────────────────────────────────────────── */
+
+.treeView {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px 10px 44px;
+  scrollbar-width: thin;
+  user-select: none;
+}
+
+.treeRow {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  padding: 4px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.treeRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.treeRow:focus-visible {
+  outline: 2px solid var(--dsw-alias-interactive-bg-hover-accent);
+  outline-offset: -1px;
+}
+
+/* The current session: the row keeps the native selected fill and gains the
+   2px accent bar the mockup asks for — a pseudo element, so the row stays
+   shadowless and its metrics never shift between rows. */
+.treeRowActive {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.treeRowActive::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.treeRowSettled {
+  opacity: 0.62;
+}
+
+/* Children hang on a hairline thread, never a box. */
+.treeKids {
+  margin-left: 15px;
+  padding-left: 10px;
+  border-left: 1px solid var(--dsw-alias-border-l1);
+}
+
+.treeContent {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.treeTitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font: var(--dsw-font-xxs-strong-12);
+  color: var(--dsw-alias-label-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.treeMeta {
+  font: var(--dsw-font-xxxs-11);
+  font-family: var(--ds-font-family-code, monospace);
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.treeFoldRow {
+  border: 1px dashed var(--dsw-alias-border-l2);
+  border-radius: 3px;
+  margin: 2px 0;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.treeInfo {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 3px;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.treeRow:hover .treeInfo,
+.node:hover .treeInfo,
+.treeInfo:focus-visible {
+  opacity: 1;
+  color: var(--dsw-alias-label-primary);
+}
+
+.treeInfo:hover {
+  border-color: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* ── Popover card ──────────────────────────────────────────────────────── */
+
+/* The floating card (node detail / task window / job output): a raised layer,
+   so it — and only it — carries the elevation shadow. */
+.popCard {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 4px;
+  box-shadow: var(--dsw-shadow-lv3);
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-primary);
+  box-sizing: border-box;
+}
+
+.popHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.popHeadActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.popFoot {
+  display: flex;
+  margin-top: 8px;
+}
+
+.popFoot > * {
+  flex: 1;
+}
+
+.jobPopTitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.jobPopMeta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.jobPopActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+.popTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: none;
+  letter-spacing: 0;
+  font: var(--dsw-font-xxs-strong-12);
+  color: var(--dsw-alias-label-primary);
+}
+
+.popRows {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 3px 10px;
+  align-items: baseline;
+  line-height: 1.45;
+}
+
+.popKey {
+  font: var(--dsw-font-xxxs-11);
+  line-height: 1.45;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.popValue {
+  text-align: right;
+  font: var(--dsw-font-xxs-12);
+  line-height: 1.45;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popValueMono {
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 11px;
+}
+
+.popPrimary {
+  width: 100%;
+  margin-top: 8px;
+  padding: 5px;
+  border: 1px solid var(--dsw-alias-label-primary);
+  border-radius: 2px;
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-1);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.popPrimary:hover {
+  background: var(--dsw-alias-state-business-primary);
+  border-color: var(--dsw-alias-state-business-primary);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+/* An inset well: the hairline is definition, the fill is the surface. */
+.popPre {
+  margin: 6px 0 0;
+  padding: 8px;
+  max-height: 140px;
+  overflow: auto;
+  background: var(--dsw-alias-bg-base);
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 3px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 11px;
+  line-height: 1.55;
+  color: var(--dsw-alias-label-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* The workflow popover's phase/member list. */
+.popSection {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+.popList {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  max-height: 180px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.popGroup {
+  padding: 4px 2px 2px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.popListRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 4px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.popListRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.popListLabel {
+  flex: 1;
+  min-width: 0;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popHint {
+  font-size: 10px;
+  line-height: 1.45;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.popError {
+  font-size: 10px;
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.popNote {
+  font-size: 10px;
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+/* ── Task window: markdown view + multi-line edit ──────────────────────── */
+
+.taskMarkdown {
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 2px 0;
+  font: var(--dsw-font-xxs-12);
+  line-height: 1.55;
+  color: var(--dsw-alias-label-primary);
+  scrollbar-width: thin;
+}
+
+.taskTextarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 6px 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 3px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.taskTextarea:focus {
+  outline: none;
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+/* ── Task create/edit dialog ───────────────────────────────────────────── */
+
+.taskForm {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.taskField {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.taskLabel {
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.taskOwnerRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+/* ── Team board (always-visible strip under the header) ────────────────── */
+
+.teamBoard {
+  flex: none;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-1);
+}
+
+/* The collapsible bar above a section: the host's own bar type (12px strong,
+   sentence case) rather than the old tracked micro caps. */
+.teamBoardBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 12px 4px;
+  border: none;
+  background: none;
+  font: var(--dsw-font-xxs-strong-12);
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  text-align: left;
+}
+
+.teamBoardBar:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.teamBoardCount {
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.teamBoardChev {
+  margin-left: auto;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.teamBoardIcon {
+  display: inline-flex;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.teamNote {
+  padding: 0 12px 6px;
+  font-size: 10px;
+  line-height: 1.4;
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.teamActions {
+  display: flex;
+  gap: 6px;
+  padding: 0 12px 8px;
+}
+
+.teamMembers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 12px 6px;
+}
+
+.teamMember {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  line-height: 1.35;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  color: var(--dsw-alias-label-secondary);
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.teamMemberLead {
+  border-color: var(--dsw-alias-state-business-primary);
+  color: var(--dsw-alias-label-primary);
+}
+
+.teamMemberName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.teamTasks {
+  max-height: 84px;
+  overflow-y: auto;
+  padding: 0 8px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  scrollbar-width: thin;
+}
+
+.teamTask {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  padding: 3px 5px;
+  border-radius: 3px;
+  text-align: left;
+}
+
+.teamTask > * {
+  min-width: 0;
+}
+
+.teamTask:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.teamTaskSubject {
+  flex: 1;
+  min-width: 0;
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.teamTaskOwner {
+  flex: none;
+  max-width: 72px;
+  font: var(--dsw-font-xxxs-11);
+  font-family: var(--ds-font-family-code, monospace);
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.teamTaskStatus {
+  flex: none;
+  padding: 0 4px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.teamTaskBlocked {
+  border-color: var(--dsw-alias-state-warn-primary);
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.teamActions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.teamBtn {
+  min-width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.teamBtn:hover {
+  border-color: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-label-primary);
+}
+
+.teamBtnDanger {
+  border-color: var(--dsw-alias-state-error-primary);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.teamOwnerSelect {
+  flex: none;
+  max-width: 76px;
+  padding: 1px 2px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-secondary);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+}
+
+.teamForm {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 2px 12px 6px;
+}
+
+.teamInput {
+  width: 100%;
+  padding: 4px 6px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+.teamInput:focus {
+  outline: none;
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+.teamFormActions {
+  display: flex;
+  gap: 6px;
+}
+
+.teamEmpty {
+  padding: 2px 12px 6px;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* ── Jobs drawer ───────────────────────────────────────────────────────── */
+
+.jobsDrawer {
+  flex: none;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-1);
+  z-index: 5;
+}
+
+.jobsDrawerBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  background: none;
+  font: var(--dsw-font-xxs-strong-12);
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  text-align: left;
+}
+
+.jobsDrawerBar:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.jobsBigNum {
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.jobsDrawerCount {
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.jobsDrawerChev {
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--dsw-alias-label-tertiary);
+  transition: transform 0.18s ease;
+}
+
+.jobsDrawerChevOpen {
+  transform: rotate(180deg);
+}
+
+.jobsAutoNote {
+  padding: 0 12px 8px;
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.jobsAutoNoteAccent {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.jobsDrawerBody {
+  max-height: 156px;
+  overflow-y: auto;
+  border-top: 1px dashed var(--dsw-alias-border-l1);
+  padding: 4px 8px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  scrollbar-width: thin;
+}
+
+.jobsRow {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 6px;
+  border-radius: 3px;
+}
+
+.jobsRowSettled {
+  opacity: 0.62;
+}
+
+.jobsRowMain {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.jobsRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.jobsKind {
+  flex: none;
+  padding: 0 3px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.jobsLabel {
+  flex: 1;
+  min-width: 0;
+  font: var(--dsw-font-xxs-strong-12);
+  font-family: var(--ds-font-family-code, monospace);
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The secondary line yields before the row does: at 360px the drawer's own
+   tags + the kill button leave it nothing to spare, so it ellipsizes. */
+.jobsMeta {
+  min-width: 0;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jobsKill {
+  flex: none;
+  padding: 1px 5px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 2px;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: var(--ds-font-family-code, monospace);
+  cursor: pointer;
+}
+
+.jobsKill:hover {
+  border-color: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-label-primary);
+}
+
+.jobsKillArmed {
+  border-color: var(--dsw-alias-state-error-primary);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.jobsKillError {
+  flex: none;
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 10px;
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* ── Page-level empty / loading hints ──────────────────────────────────── */
+
+.viewEmpty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.viewEmptyHint {
+  font: var(--dsw-font-xxs-12);
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+  padding: 0 24px;
+}
diff --git a/src/client/tasks-shared.tsx b/src/client/tasks-shared.tsx
index 184823b..d83e077 100644
--- a/src/client/tasks-shared.tsx
+++ b/src/client/tasks-shared.tsx
@@ -5,16 +5,11 @@
  * line, and the iconified live activity row ("tool icon + tool + args").
  *
  * Card content contract (the page's answer to "everything is ellipsized"):
- *   line 1  state dot + agent icon + name   (text-sm semibold, one line)
- *   line 2  mode/model · activity           (text-xs mono, one line)
+ *   line 1  state dot + agent icon + name   (11px semibold, one line)
+ *   line 2  mode/model · activity           (9px mono, one line)
  *   line 3  live tool line                  (running nodes only)
  *   line 4  owned shared task               (team members only)
  * Everything else lives in the popovers.
- *
- * Visual language: Tailwind utilities over the shadcn tokens
- * (src/client/ui/theme.css) — mono meta is `font-mono tabular-nums`, ink stays
- * on the three token levels, and color is semantic only (running = primary,
- * done = success, blocked = warning; errors only exist on nodes).
  */
 import type { ReactNode } from 'react'
 import {
@@ -25,6 +20,7 @@ import type { LastActivity } from '../subagent-activity.ts'
 import type { TasksAgentNode, TasksNodeState, TasksNodeTask, TasksWorkflowNode } from './tasks-model.ts'
 import { toolGlyph } from './tool-icons.tsx'
 import { t, type CopyKey } from './locales.ts'
+import css from './tasks-graph.module.css'
 
 /** Preview cap of one tool-call argument line. */
 const ARGS_PREVIEW = 48
@@ -142,25 +138,10 @@ export function primaryTask(tasks: readonly TasksNodeTask[]): TasksNodeTask | un
     ?? tasks[tasks.length - 1]
 }
 
-/**
- * The status word's semantic ink: done = success, in progress = primary,
- * blocked = warning, anything else stays a plain meta token. No hue is used
- * as decoration — the card stays quiet when many nodes are on screen.
- */
-function taskTone(task: TasksNodeTask): string {
-  if (task.status === 'completed') return 'text-success'
-  if (task.status === 'in_progress') return 'text-primary'
-  return task.ready ? 'text-muted-foreground' : 'text-warning'
-}
-
 /**
  * The node's shared-task line: an icon, the primary task's subject, its
  * status word, and a `+N` tail when the agent owns more. Renders nothing
  * without tasks, so non-team nodes keep the three-line shape.
- *
- * The whole line is one inline hover slab (`hover:bg-muted`) that opens the
- * task window; it stops the click from reaching the node behind it, which is
- * the node's own detail affordance, not this one.
  */
 export function TaskLine(props: {
   tasks: readonly TasksNodeTask[] | undefined
@@ -173,7 +154,7 @@ export function TaskLine(props: {
     <span
       role="button"
       tabIndex={0}
-      className="group -mx-1 mt-1 flex min-w-0 cursor-pointer items-center gap-1 rounded-sm px-1 text-xs text-muted-foreground transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-ring"
+      className={css.taskLine}
       title={tasks.map(task => `${task.subject}（${t(taskStatusKey(task.status))}）`).join('\n')}
       onClick={(event) => {
         event.stopPropagation()
@@ -186,12 +167,10 @@ export function TaskLine(props: {
         props.onOpenTask(primary.id, event.currentTarget)
       }}
     >
-      <span className="flex-none" aria-hidden="true"><IconChecklistOutline14 size={11} /></span>
-      <span className="min-w-0 flex-1 truncate group-hover:text-foreground">{primary.subject}</span>
-      <span className={`flex-none font-mono tabular-nums ${taskTone(primary)}`}>{t(taskStatusKey(primary.status))}</span>
-      {tasks.length > 1 && (
-        <span className="flex-none rounded-sm border border-border px-1 font-mono tabular-nums text-foreground-3">{`+${tasks.length - 1}`}</span>
-      )}
+      <span className={css.taskGlyph} aria-hidden="true"><IconChecklistOutline14 size={9} /></span>
+      <span className={css.taskSubject}>{primary.subject}</span>
+      <span className={css.taskState}>{t(taskStatusKey(primary.status))}</span>
+      {tasks.length > 1 && <span className={css.taskMore}>{`+${tasks.length - 1}`}</span>}
     </span>
   )
 }
@@ -199,35 +178,24 @@ export function TaskLine(props: {
 /**
  * The live activity row of a RUNNING agent: the tool's own icon + tool name +
  * args (the approved format), plus the flattened last text line underneath.
- * A running node with neither reads as thinking. Running ink is the accent
- * (primary); the args/text tails drop to the secondary token.
+ * A running node with neither reads as thinking.
  */
 export function LiveLine(props: { live: LastActivity | undefined }): ReactNode {
   const { live } = props
   if (live?.text === undefined && live?.tool === undefined) {
-    return (
-      <span className="mt-0.5 truncate font-mono text-xs tabular-nums text-muted-foreground">
-        {t('subagentThinking')}
-      </span>
-    )
+    return <span className={css.nodeMeta}>{t('subagentThinking')}</span>
   }
   return (
     <>
       {live.tool !== undefined && (
-        <span className="mt-0.5 flex min-w-0 items-center gap-1 truncate font-mono text-xs tabular-nums text-primary">
-          <span className="flex size-3 flex-none items-center justify-center rounded-sm border border-current" aria-hidden="true">
-            {toolGlyph(live.tool.name)(9)}
-          </span>
-          <span className="flex-none">{live.tool.name}</span>
-          {live.tool.args !== '' && (
-            <span className="min-w-0 truncate text-muted-foreground">{preview(live.tool.args)}</span>
-          )}
+        <span className={css.live}>
+          <span className={css.liveGlyph} aria-hidden="true">{toolGlyph(live.tool.name)(9)}</span>
+          <span className={css.liveTool}>{live.tool.name}</span>
+          {live.tool.args !== '' && <span className={css.liveArgs}>{preview(live.tool.args)}</span>}
         </span>
       )}
       {live.text !== undefined && (
-        <span className="mt-0.5 truncate font-mono text-xs tabular-nums text-muted-foreground">
-          {preview(flatten(live.text), TEXT_PREVIEW)}
-        </span>
+        <span className={css.liveText}>{preview(flatten(live.text), TEXT_PREVIEW)}</span>
       )}
     </>
   )
diff --git a/src/client/ui/badge.tsx b/src/client/ui/badge.tsx
deleted file mode 100644
index 07c703f..0000000
--- a/src/client/ui/badge.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-import { Slot } from "radix-ui"
-
-const badgeVariants = cva(
- "inline-flex h-[18px] w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-sm border border-transparent px-1.5 py-0 text-[11px] leading-none font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&>svg]:pointer-events-none [&>svg]:size-3",
- {
- variants: {
- variant: {
- // LOCAL ADAPTATION: the plugin's own status chips are a FLAT TINT with the
-    // state ink (see sidebar.module.css `.explorerRowRevealed`), not a solid
-    // primary fill — a solid badge is the loudest thing on every row here.
-    default: "bg-state-business-tertiary text-state-business-primary [a&]:hover:bg-state-business-tertiary",
- secondary:
- "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
- destructive:
- "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 [a&]:hover:bg-destructive/90",
- outline:
- "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
- ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
- link: "text-primary underline-offset-4 [a&]:hover:underline",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-)
-
-function Badge({
- className,
- variant = "default",
- asChild = false,
- ...props
-}: React.ComponentProps<"span"> &
- VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
- const Comp = asChild ? Slot.Root : "span"
-
- return (
- <Comp
- data-slot="badge"
- data-variant={variant}
- className={cn(badgeVariants({ variant }), className)}
- {...props}
- />
- )
-}
-
-export { Badge, badgeVariants }
diff --git a/src/client/ui/button-group.tsx b/src/client/ui/button-group.tsx
deleted file mode 100644
index 37589d5..0000000
--- a/src/client/ui/button-group.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-import { Slot } from "radix-ui"
-
-import { Separator } from "./separator.tsx"
-
-const buttonGroupVariants = cva(
- "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
- {
- variants: {
- orientation: {
- horizontal:
- "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
- vertical:
- "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
- },
- },
- defaultVariants: {
- orientation: "horizontal",
- },
- }
-)
-
-function ButtonGroup({
- className,
- orientation,
- ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
- return (
- <div
- role="group"
- data-slot="button-group"
- data-orientation={orientation}
- className={cn(buttonGroupVariants({ orientation }), className)}
- {...props}
- />
- )
-}
-
-function ButtonGroupText({
- className,
- asChild = false,
- ...props
-}: React.ComponentProps<"div"> & {
- asChild?: boolean
-}) {
- const Comp = asChild ? Slot.Root : "div"
-
- return (
- <Comp
- className={cn(
- "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
- className
- )}
- {...props}
- />
- )
-}
-
-function ButtonGroupSeparator({
- className,
- orientation = "vertical",
- ...props
-}: React.ComponentProps<typeof Separator>) {
- return (
- <Separator
- data-slot="button-group-separator"
- orientation={orientation}
- className={cn(
- "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
- className
- )}
- {...props}
- />
- )
-}
-
-export {
- ButtonGroup,
- ButtonGroupSeparator,
- ButtonGroupText,
- buttonGroupVariants,
-}
diff --git a/src/client/ui/button.tsx b/src/client/ui/button.tsx
deleted file mode 100644
index 13bc08d..0000000
--- a/src/client/ui/button.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-import { Slot } from "radix-ui"
-
-const buttonVariants = cva(
- "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 ",
- outline:
- "border bg-background hover:bg-accent hover:text-accent-foreground ",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost:
- "hover:bg-accent hover:text-accent-foreground ",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-7 gap-1.5 px-2.5 text-xs has-[>svg]:px-2",
- xs: "h-5 gap-1 rounded-md px-1.5 text-[11px] has-[>svg]:px-1 [&_svg:not([class*='size-'])]:size-3",
- sm: "h-6 gap-1.5 rounded-md px-2 text-[11px] has-[>svg]:px-1.5",
- lg: "h-8 rounded-md px-3 text-xs has-[>svg]:px-2.5",
- icon: "size-7",
- "icon-xs": "size-5 rounded-md [&_svg:not([class*='size-'])]:size-3",
- "icon-sm": "size-6",
- "icon-lg": "size-8",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-
-/**
- * LOCAL ADAPTATION: `React.forwardRef`, because this plugin runs on the DSH
- * host's React 18 (ref-as-prop is a React 19 feature). Without it
- * `<TooltipTrigger asChild><Button/></TooltipTrigger>` cannot measure its
- * anchor: radix's `Slot` hands the child a ref and a plain function component
- * drops it (dev builds warn, production silently mis-positions the floating
- * layer). The registry targets React 19 and ships no forwardRef, so a
- * `shadcn add --overwrite` refresh must re-apply this.
- */
-const Button = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps<"button"> &
- VariantProps<typeof buttonVariants> & {
- asChild?: boolean
- }
->(function Button({ className, variant = "default", size = "default", asChild = false, ...props }, ref) {
- const Comp = asChild ? Slot.Root : "button"
-
- return (
- <Comp
- ref={ref}
- data-slot="button"
- data-variant={variant}
- data-size={size}
- className={cn(buttonVariants({ variant, size, className }))}
- {...props}
- />
- )
-})
-export { Button, buttonVariants }
diff --git a/src/client/ui/card.tsx b/src/client/ui/card.tsx
deleted file mode 100644
index f32bc74..0000000
--- a/src/client/ui/card.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="card"
- className={cn(
- "flex flex-col gap-3 rounded-lg border bg-card py-3 text-card-foreground",
- className
- )}
- {...props}
- />
- )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="card-header"
- className={cn(
- "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-center gap-1 px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-3",
- className
- )}
- {...props}
- />
- )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="card-title"
- className={cn("leading-none font-semibold", className)}
- {...props}
- />
- )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="card-description"
- className={cn("text-[11px] text-muted-foreground", className)}
- {...props}
- />
- )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="card-action"
- className={cn(
- "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
- className
- )}
- {...props}
- />
- )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="card-content"
- className={cn("px-6", className)}
- {...props}
- />
- )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="card-footer"
- className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
- {...props}
- />
- )
-}
-
-export {
- Card,
- CardHeader,
- CardFooter,
- CardTitle,
- CardAction,
- CardDescription,
- CardContent,
-}
diff --git a/src/client/ui/collapsible.tsx b/src/client/ui/collapsible.tsx
deleted file mode 100644
index 4ec2970..0000000
--- a/src/client/ui/collapsible.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
-
-function Collapsible({
- ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
- return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
- ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
- return (
- <CollapsiblePrimitive.CollapsibleTrigger
- data-slot="collapsible-trigger"
- {...props}
- />
- )
-}
-
-function CollapsibleContent({
- ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
- return (
- <CollapsiblePrimitive.CollapsibleContent
- data-slot="collapsible-content"
- {...props}
- />
- )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/client/ui/dropdown-menu.tsx b/src/client/ui/dropdown-menu.tsx
deleted file mode 100644
index faca38d..0000000
--- a/src/client/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
-import { IconCheckOutline16, IconChevronRightOutline14 } from "@deepseek-ai/dsh-client-ui-primitives"
-
-function DropdownMenu({
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
- return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
- return (
- <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
- )
-}
-
-function DropdownMenuTrigger({
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
- return (
- <DropdownMenuPrimitive.Trigger
- data-slot="dropdown-menu-trigger"
- {...props}
- />
- )
-}
-
-function DropdownMenuContent({
- className,
- sideOffset = 4,
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
- return (
- <DropdownMenuPrimitive.Portal>
- <DropdownMenuPrimitive.Content
- data-slot="dropdown-menu-content"
- sideOffset={sideOffset}
- className={cn(
- "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]: data-[side=left]: data-[side=right]: data-[side=top]: data-[state=closed]: data-[state=closed]: data-[state=closed]: data-[state=open]: data-[state=open]: data-[state=open]:",
- className
- )}
- {...props}
- />
- </DropdownMenuPrimitive.Portal>
- )
-}
-
-function DropdownMenuGroup({
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
- return (
- <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
- )
-}
-
-function DropdownMenuItem({
- className,
- inset,
- variant = "default",
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
- inset?: boolean
- variant?: "default" | "destructive"
-}) {
- return (
- <DropdownMenuPrimitive.Item
- data-slot="dropdown-menu-item"
- data-inset={inset}
- data-variant={variant}
- className={cn(
- "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
- className
- )}
- {...props}
- />
- )
-}
-
-function DropdownMenuCheckboxItem({
- className,
- children,
- checked,
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
- return (
- <DropdownMenuPrimitive.CheckboxItem
- data-slot="dropdown-menu-checkbox-item"
- className={cn(
- "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
- )}
- checked={checked}
- {...props}
- >
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
- <DropdownMenuPrimitive.ItemIndicator>
- <IconCheckOutline16 className="size-4" />
- </DropdownMenuPrimitive.ItemIndicator>
- </span>
- {children}
- </DropdownMenuPrimitive.CheckboxItem>
- )
-}
-
-function DropdownMenuRadioGroup({
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
- return (
- <DropdownMenuPrimitive.RadioGroup
- data-slot="dropdown-menu-radio-group"
- {...props}
- />
- )
-}
-
-function DropdownMenuRadioItem({
- className,
- children,
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
- return (
- <DropdownMenuPrimitive.RadioItem
- data-slot="dropdown-menu-radio-item"
- className={cn(
- "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
- )}
- {...props}
- >
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
- <DropdownMenuPrimitive.ItemIndicator>
- <span className="size-2 rounded-full bg-current" />
- </DropdownMenuPrimitive.ItemIndicator>
- </span>
- {children}
- </DropdownMenuPrimitive.RadioItem>
- )
-}
-
-function DropdownMenuLabel({
- className,
- inset,
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
- inset?: boolean
-}) {
- return (
- <DropdownMenuPrimitive.Label
- data-slot="dropdown-menu-label"
- data-inset={inset}
- className={cn(
- "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
- className
- )}
- {...props}
- />
- )
-}
-
-function DropdownMenuSeparator({
- className,
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
- return (
- <DropdownMenuPrimitive.Separator
- data-slot="dropdown-menu-separator"
- className={cn("-mx-1 my-1 h-px bg-border", className)}
- {...props}
- />
- )
-}
-
-function DropdownMenuShortcut({
- className,
- ...props
-}: React.ComponentProps<"span">) {
- return (
- <span
- data-slot="dropdown-menu-shortcut"
- className={cn(
- "ml-auto text-xs tracking-widest text-muted-foreground",
- className
- )}
- {...props}
- />
- )
-}
-
-function DropdownMenuSub({
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
- return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
- className,
- inset,
- children,
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
- inset?: boolean
-}) {
- return (
- <DropdownMenuPrimitive.SubTrigger
- data-slot="dropdown-menu-sub-trigger"
- data-inset={inset}
- className={cn(
- "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
- className
- )}
- {...props}
- >
- {children}
- <IconChevronRightOutline14 className="ml-auto size-4" />
- </DropdownMenuPrimitive.SubTrigger>
- )
-}
-
-function DropdownMenuSubContent({
- className,
- ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
- return (
- <DropdownMenuPrimitive.SubContent
- data-slot="dropdown-menu-sub-content"
- className={cn(
- "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]: data-[side=left]: data-[side=right]: data-[side=top]: data-[state=closed]: data-[state=closed]: data-[state=closed]: data-[state=open]: data-[state=open]: data-[state=open]:",
- className
- )}
- {...props}
- />
- )
-}
-
-export {
- DropdownMenu,
- DropdownMenuPortal,
- DropdownMenuTrigger,
- DropdownMenuContent,
- DropdownMenuGroup,
- DropdownMenuLabel,
- DropdownMenuItem,
- DropdownMenuCheckboxItem,
- DropdownMenuRadioGroup,
- DropdownMenuRadioItem,
- DropdownMenuSeparator,
- DropdownMenuShortcut,
- DropdownMenuSub,
- DropdownMenuSubTrigger,
- DropdownMenuSubContent,
-}
diff --git a/src/client/ui/empty.tsx b/src/client/ui/empty.tsx
deleted file mode 100644
index 2fdffde..0000000
--- a/src/client/ui/empty.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-
-function Empty({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="empty"
- className={cn(
- "flex min-w-0 flex-1 flex-col items-center justify-center gap-2 rounded-lg border-dashed p-4 text-center text-balance",
- className
- )}
- {...props}
- />
- )
-}
-
-function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="empty-header"
- className={cn(
- "flex max-w-sm flex-col items-center gap-2 text-center",
- className
- )}
- {...props}
- />
- )
-}
-
-const emptyMediaVariants = cva(
- "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
- {
- variants: {
- variant: {
- default: "bg-transparent",
- icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-)
-
-function EmptyMedia({
- className,
- variant = "default",
- ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
- return (
- <div
- data-slot="empty-icon"
- data-variant={variant}
- className={cn(emptyMediaVariants({ variant, className }))}
- {...props}
- />
- )
-}
-
-function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="empty-title"
- className={cn("text-[13px] font-medium tracking-tight", className)}
- {...props}
- />
- )
-}
-
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
- return (
- <div
- data-slot="empty-description"
- className={cn(
- "text-[11px]/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
- className
- )}
- {...props}
- />
- )
-}
-
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="empty-content"
- className={cn(
- "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
- className
- )}
- {...props}
- />
- )
-}
-
-export {
- Empty,
- EmptyHeader,
- EmptyTitle,
- EmptyDescription,
- EmptyContent,
- EmptyMedia,
-}
diff --git a/src/client/ui/field.tsx b/src/client/ui/field.tsx
deleted file mode 100644
index d31124b..0000000
--- a/src/client/ui/field.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-
-import { Label } from "./label.tsx"
-import { Separator } from "./separator.tsx"
-
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
- return (
- <fieldset
- data-slot="field-set"
- className={cn(
- "flex flex-col gap-6",
- "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
- className
- )}
- {...props}
- />
- )
-}
-
-function FieldLegend({
- className,
- variant = "legend",
- ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
- return (
- <legend
- data-slot="field-legend"
- data-variant={variant}
- className={cn(
- "mb-3 font-medium",
- "data-[variant=legend]:text-base",
- "data-[variant=label]:text-sm",
- className
- )}
- {...props}
- />
- )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="field-group"
- className={cn(
- "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
- className
- )}
- {...props}
- />
- )
-}
-
-const fieldVariants = cva(
- "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
- {
- variants: {
- orientation: {
- vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
- horizontal: [
- "flex-row items-center",
- "[&>[data-slot=field-label]]:flex-auto",
- "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
- ],
- responsive: [
- "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
- "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
- "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
- ],
- },
- },
- defaultVariants: {
- orientation: "vertical",
- },
- }
-)
-
-function Field({
- className,
- orientation = "vertical",
- ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
- return (
- <div
- role="group"
- data-slot="field"
- data-orientation={orientation}
- className={cn(fieldVariants({ orientation }), className)}
- {...props}
- />
- )
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="field-content"
- className={cn(
- "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
- className
- )}
- {...props}
- />
- )
-}
-
-function FieldLabel({
- className,
- ...props
-}: React.ComponentProps<typeof Label>) {
- return (
- <Label
- data-slot="field-label"
- className={cn(
- "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
- "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
- "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 ",
- className
- )}
- {...props}
- />
- )
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="field-label"
- className={cn(
- "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
- className
- )}
- {...props}
- />
- )
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
- return (
- <p
- data-slot="field-description"
- className={cn(
- "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
- "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
- "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
- className
- )}
- {...props}
- />
- )
-}
-
-function FieldSeparator({
- children,
- className,
- ...props
-}: React.ComponentProps<"div"> & {
- children?: React.ReactNode
-}) {
- return (
- <div
- data-slot="field-separator"
- data-content={!!children}
- className={cn(
- "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
- className
- )}
- {...props}
- >
- <Separator className="absolute inset-0 top-1/2" />
- {children && (
- <span
- className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
- data-slot="field-separator-content"
- >
- {children}
- </span>
- )}
- </div>
- )
-}
-
-function FieldError({
- className,
- children,
- errors,
- ...props
-}: React.ComponentProps<"div"> & {
- errors?: Array<{ message?: string } | undefined>
-}) {
- const content = useMemo(() => {
- if (children) {
- return children
- }
-
- if (!errors?.length) {
- return null
- }
-
- const uniqueErrors = [
- ...new Map(errors.map((error) => [error?.message, error])).values(),
- ]
-
- if (uniqueErrors?.length == 1) {
- return uniqueErrors[0]?.message
- }
-
- return (
- <ul className="ml-4 flex list-disc flex-col gap-1">
- {uniqueErrors.map(
- (error, index) =>
- error?.message && <li key={index}>{error.message}</li>
- )}
- </ul>
- )
- }, [children, errors])
-
- if (!content) {
- return null
- }
-
- return (
- <div
- role="alert"
- data-slot="field-error"
- className={cn("text-sm font-normal text-destructive", className)}
- {...props}
- >
- {content}
- </div>
- )
-}
-
-export {
- Field,
- FieldLabel,
- FieldDescription,
- FieldError,
- FieldGroup,
- FieldLegend,
- FieldSeparator,
- FieldSet,
- FieldContent,
- FieldTitle,
-}
diff --git a/src/client/ui/input-group.tsx b/src/client/ui/input-group.tsx
deleted file mode 100644
index 3883d21..0000000
--- a/src/client/ui/input-group.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-
-import { Button } from "./button.tsx"
-import { Input } from "./input.tsx"
-import { Textarea } from "./textarea.tsx"
-
-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 ",
- "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 ",
-
- 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 ",
- 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 ",
- className
- )}
- {...props}
- />
- )
-}
-
-export {
- InputGroup,
- InputGroupAddon,
- InputGroupButton,
- InputGroupText,
- InputGroupInput,
- InputGroupTextarea,
-}
diff --git a/src/client/ui/input.tsx b/src/client/ui/input.tsx
deleted file mode 100644
index a9c9b91..0000000
--- a/src/client/ui/input.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
- return (
- <input
- type={type}
- data-slot="input"
- className={cn(
- "h-7 w-full min-w-0 rounded-md border border-input bg-transparent px-2 py-1 text-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-5 file:border-0 file:bg-transparent file:text-[11px] file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 ",
- "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
- "aria-invalid:border-destructive aria-invalid:ring-destructive/20 ",
- className
- )}
- {...props}
- />
- )
-}
-
-export { Input }
diff --git a/src/client/ui/item.tsx b/src/client/ui/item.tsx
deleted file mode 100644
index 51e0f4a..0000000
--- a/src/client/ui/item.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-import { Slot } from "radix-ui"
-
-import { Separator } from "./separator.tsx"
-
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- role="list"
- data-slot="item-group"
- className={cn("group/item-group flex flex-col", className)}
- {...props}
- />
- )
-}
-
-function ItemSeparator({
- className,
- ...props
-}: React.ComponentProps<typeof Separator>) {
- return (
- <Separator
- data-slot="item-separator"
- orientation="horizontal"
- className={cn("my-0", className)}
- {...props}
- />
- )
-}
-
-const itemVariants = cva(
- "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
- {
- variants: {
- variant: {
- default: "bg-transparent",
- outline: "border-border",
- muted: "bg-muted/50",
- },
- size: {
- default: "gap-4 p-4",
- sm: "gap-2.5 px-4 py-3",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-
-function Item({
- className,
- variant = "default",
- size = "default",
- asChild = false,
- ...props
-}: React.ComponentProps<"div"> &
- VariantProps<typeof itemVariants> & { asChild?: boolean }) {
- const Comp = asChild ? Slot.Root : "div"
- return (
- <Comp
- data-slot="item"
- data-variant={variant}
- data-size={size}
- className={cn(itemVariants({ variant, size, className }))}
- {...props}
- />
- )
-}
-
-const itemMediaVariants = cva(
- "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
- {
- variants: {
- variant: {
- default: "bg-transparent",
- icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
- image:
- "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-)
-
-function ItemMedia({
- className,
- variant = "default",
- ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
- return (
- <div
- data-slot="item-media"
- data-variant={variant}
- className={cn(itemMediaVariants({ variant, className }))}
- {...props}
- />
- )
-}
-
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="item-content"
- className={cn(
- "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
- className
- )}
- {...props}
- />
- )
-}
-
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="item-title"
- className={cn(
- "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
- className
- )}
- {...props}
- />
- )
-}
-
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
- return (
- <p
- data-slot="item-description"
- className={cn(
- "line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground",
- "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
- className
- )}
- {...props}
- />
- )
-}
-
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="item-actions"
- className={cn("flex items-center gap-2", className)}
- {...props}
- />
- )
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="item-header"
- className={cn(
- "flex basis-full items-center justify-between gap-2",
- className
- )}
- {...props}
- />
- )
-}
-
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="item-footer"
- className={cn(
- "flex basis-full items-center justify-between gap-2",
- className
- )}
- {...props}
- />
- )
-}
-
-export {
- Item,
- ItemMedia,
- ItemContent,
- ItemActions,
- ItemGroup,
- ItemSeparator,
- ItemTitle,
- ItemDescription,
- ItemHeader,
- ItemFooter,
-}
diff --git a/src/client/ui/label.tsx b/src/client/ui/label.tsx
deleted file mode 100644
index 2018271..0000000
--- a/src/client/ui/label.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-import { Label as LabelPrimitive } from "radix-ui"
-
-function Label({
- className,
- ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
- return (
- <LabelPrimitive.Root
- data-slot="label"
- className={cn(
- "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
- className
- )}
- {...props}
- />
- )
-}
-
-export { Label }
diff --git a/src/client/ui/popover.tsx b/src/client/ui/popover.tsx
deleted file mode 100644
index e45eb66..0000000
--- a/src/client/ui/popover.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-import { Popover as PopoverPrimitive } from "radix-ui"
-
-function Popover({
- ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
- return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
- ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
- return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
- className,
- align = "center",
- sideOffset = 4,
- ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
- return (
- <PopoverPrimitive.Portal>
- <PopoverPrimitive.Content
- data-slot="popover-content"
- align={align}
- sideOffset={sideOffset}
- className={cn(
- "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]: data-[side=left]: data-[side=right]: data-[side=top]: data-[state=closed]: data-[state=closed]: data-[state=closed]: data-[state=open]: data-[state=open]: data-[state=open]:",
- className
- )}
- {...props}
- />
- </PopoverPrimitive.Portal>
- )
-}
-
-function PopoverAnchor({
- ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
- return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="popover-header"
- className={cn("flex flex-col gap-1 text-sm", className)}
- {...props}
- />
- )
-}
-
-function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
- return (
- <div
- data-slot="popover-title"
- className={cn("font-medium", className)}
- {...props}
- />
- )
-}
-
-function PopoverDescription({
- className,
- ...props
-}: React.ComponentProps<"p">) {
- return (
- <p
- data-slot="popover-description"
- className={cn("text-muted-foreground", className)}
- {...props}
- />
- )
-}
-
-export {
- Popover,
- PopoverTrigger,
- PopoverContent,
- PopoverAnchor,
- PopoverHeader,
- PopoverTitle,
- PopoverDescription,
-}
diff --git a/src/client/ui/scroll-area.tsx b/src/client/ui/scroll-area.tsx
deleted file mode 100644
index f842937..0000000
--- a/src/client/ui/scroll-area.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
-
-function ScrollArea({
- className,
- children,
- ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
- return (
- <ScrollAreaPrimitive.Root
- data-slot="scroll-area"
- className={cn("relative", className)}
- {...props}
- >
- <ScrollAreaPrimitive.Viewport
- data-slot="scroll-area-viewport"
- className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
- >
- {children}
- </ScrollAreaPrimitive.Viewport>
- <ScrollBar />
- <ScrollAreaPrimitive.Corner />
- </ScrollAreaPrimitive.Root>
- )
-}
-
-function ScrollBar({
- className,
- orientation = "vertical",
- ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
- return (
- <ScrollAreaPrimitive.ScrollAreaScrollbar
- data-slot="scroll-area-scrollbar"
- orientation={orientation}
- className={cn(
- "flex touch-none p-px transition-colors select-none",
- orientation === "vertical" &&
- "h-full w-2.5 border-l border-l-transparent",
- orientation === "horizontal" &&
- "h-2.5 flex-col border-t border-t-transparent",
- className
- )}
- {...props}
- >
- <ScrollAreaPrimitive.ScrollAreaThumb
- data-slot="scroll-area-thumb"
- className="relative flex-1 rounded-full bg-border"
- />
- </ScrollAreaPrimitive.ScrollAreaScrollbar>
- )
-}
-
-export { ScrollArea, ScrollBar }
diff --git a/src/client/ui/separator.tsx b/src/client/ui/separator.tsx
deleted file mode 100644
index d8772bc..0000000
--- a/src/client/ui/separator.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-import { Separator as SeparatorPrimitive } from "radix-ui"
-
-function Separator({
- className,
- orientation = "horizontal",
- decorative = true,
- ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
- return (
- <SeparatorPrimitive.Root
- data-slot="separator"
- decorative={decorative}
- orientation={orientation}
- className={cn(
- "shrink-0 bg-border-subtle data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
- className
- )}
- {...props}
- />
- )
-}
-
-export { Separator }
diff --git a/src/client/ui/skeleton.tsx b/src/client/ui/skeleton.tsx
deleted file mode 100644
index 1527e74..0000000
--- a/src/client/ui/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cn } from "./utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
- return (
- <div
- data-slot="skeleton"
- className={cn("animate-pulse rounded-md bg-accent", className)}
- {...props}
- />
- )
-}
-
-export { Skeleton }
diff --git a/src/client/ui/spinner.tsx b/src/client/ui/spinner.tsx
deleted file mode 100644
index 4c50200..0000000
--- a/src/client/ui/spinner.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IconLoadingOutline16 } from "@deepseek-ai/dsh-client-ui-primitives"
-import { cn } from "./utils"
-
-/**
- * Vendored shadcn `Spinner` with the icon swapped to the host's primitive set
- * (the plugin never ships lucide). The host icons render their own `<svg>`, so
- * the props land on a wrapping span instead of the svg element.
- */
-function Spinner({ className, ...props }: React.ComponentProps<"span">) {
- return (
- <span role="status" aria-label="Loading" className={cn("inline-flex", className)} {...props}>
- <IconLoadingOutline16 className="size-4 animate-spin" />
- </span>
- )
-}
-
-export { Spinner }
diff --git a/src/client/ui/textarea.tsx b/src/client/ui/textarea.tsx
deleted file mode 100644
index 271692f..0000000
--- a/src/client/ui/textarea.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from "react"
-import { cn } from "./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 ",
- className
- )}
- {...props}
- />
- )
-}
-
-export { Textarea }
diff --git a/src/client/ui/theme.css b/src/client/ui/theme.css
deleted file mode 100644
index d46063f..0000000
--- a/src/client/ui/theme.css
+++ /dev/null
@@ -1,269 +0,0 @@
-/*
- * Tailwind v4 entry for the plugin's vendored shadcn/ui components.
- *
- * Two deliberate omissions:
- *
- * 1. PREFLIGHT IS NEVER IMPORTED. The plugin's CSS ships as a GLOBAL
- *    `<style data-plugin>` tag injected by the client bundle (no shadow DOM),
- *    so Tailwind's reset would repaint the whole DSH host page (headings,
- *    lists, buttons, borders — every element in the conversation and the
- *    native sidebar). Only `theme.css` (design tokens) and `utilities.css`
- *    (the classes we actually use) are pulled in.
- * 2. NO COLOR LITERALS AND NO DARK PALETTE. Every value in `:root` below
- *    resolves to a DSH `--dsw-*` token, which already flips with the host
- *    light/dark theme (`body[data-ds-dark-theme]`). That is the skin contract
- *    (docs/external-plugin-guide.md §12, guarded by tests/theme.spec.ts).
- *
- * `@source` is EXPLICIT so the scanner covers only the client TSX tree —
- * without it Tailwind would glob the project root and pick class-like strings
- * out of `lib/`, `tests/`, `node_modules/` and the docs.
- */
-/*
- * Layer order is declared FIRST and explicitly: the compiler orders layers by
- * first appearance, and the `@import`s below would otherwise register
- * `utilities` before the `base` block at the bottom of this file — which would
- * make the scoped reset beat the utilities (a `rounded-md` button rendering
- * square, exactly the kind of "no CSS" artifact this file exists to prevent).
- */
-@layer theme, base, components, utilities;
-
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-@source "../**/*.tsx";
-
-/* The DSH theme flips by toggling `data-ds-dark-theme` on <body> (see
- * @deepseek-ai/dsh-client-ui-theme), not by adding a `.dark` class. */
-@custom-variant dark (&:where([data-ds-dark-theme], [data-ds-dark-theme] *));
-
-/*
- * Bridge: shadcn/ui's semantic names -> Tailwind color/radius/font utilities.
- *
- * `inline` keeps the generated utilities as `var(--background)` etc. instead of
- * copying the (indirect) value, so exactly one indirection layer exists and a
- * host skin that re-paints a token is picked up live.
- */
-@theme inline {
-  /*
-   * TYPE SCALE = THE PLUGIN'S OWN, not Tailwind's default (14/12px). Every
-   * other surface of this plugin (files, changes, side chat, settings) is set
-   * at 12px body / 11px meta / 10px micro with 16-20px line heights, so the
-   * vendored components inherit that scale through the ordinary `text-sm` /
-   * `text-xs` classes instead of every page re-overriding them.
-   */
-  --text-xs: 0.6875rem;
-  --text-xs--line-height: 1rem;
-  --text-sm: 0.75rem;
-  --text-sm--line-height: 1.125rem;
-  --text-base: 0.8125rem;
-  --text-base--line-height: 1.25rem;
-  --text-lg: 0.875rem;
-  --text-lg--line-height: 1.375rem;
-
-  /*
-   * ELEVATION = TOKENS, AND ONLY WHERE THE PLUGIN USES IT. Static panels in
-   * this plugin are flat with a hairline border and a hover fill; only floating
-   * layers take the host's own elevation tokens (`--dsw-shadow-lv2/3`, the same
-   * ones the plugin's settings modal and popovers already wear).
-   */
-  --shadow-2xs: none;
-  --shadow-xs: none;
-  --shadow-sm: none;
-  --shadow-md: var(--dsw-shadow-lv2);
-  --shadow-lg: var(--dsw-shadow-lv3);
-  --shadow-xl: var(--dsw-shadow-lv3);
-
-  --color-border-subtle: var(--border-subtle);
-  --color-state-business-tertiary: var(--dsw-alias-state-business-tertiary);
-  --color-state-success-tertiary: var(--dsw-alias-state-success-tertiary);
-  --color-state-warn-tertiary: var(--dsw-alias-state-warn-tertiary);
-
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  /* Extra rungs the task page needs beyond stock shadcn: success/warning for
-   * task state and a third text weight (design language: three ink levels by
-   * weight, not by hue). */
-  --color-success: var(--success);
-  --color-warning: var(--warning);
-  --color-foreground-3: var(--foreground-3);
-  --color-border-strong: var(--border-strong);
-
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-
-  /* Text roles come from the host's own font tokens so the plugin cannot
-   * drift from the DSH type scale. */
-  --font-sans: var(--dsw-font-family-default, system-ui, sans-serif);
-  --font-mono: var(--dsw-font-family-code, ui-monospace, monospace);
-}
-
-/*
- * shadcn tokens -> DSH alias tokens. Every value is a `var(--dsw-…)`
- * reference; nothing here is a color literal, and no dark override is needed
- * because the DSH tokens themselves flip with the host theme.
- */
-:root {
-  --radius: 6px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-
-  --background: var(--dsw-alias-bg-base);
-  --foreground: var(--dsw-alias-label-primary);
-  --card: var(--dsw-alias-bg-layer-1);
-  --card-foreground: var(--dsw-alias-label-primary);
-  --popover: var(--dsw-alias-bg-layer-2);
-  --popover-foreground: var(--dsw-alias-label-primary);
-  --primary: var(--dsw-alias-state-business-primary);
-  --primary-foreground: var(--dsw-alias-label-primary-foreground);
-  --secondary: var(--dsw-alias-interactive-bg-hover);
-  --secondary-foreground: var(--dsw-alias-label-primary);
-  --muted: var(--dsw-alias-interactive-bg-hover);
-  --muted-foreground: var(--dsw-alias-label-secondary);
-  --accent: var(--dsw-alias-interactive-bg-hover);
-  --accent-foreground: var(--dsw-alias-label-primary);
-  --destructive: var(--dsw-alias-state-error-primary);
-  --destructive-foreground: var(--dsw-alias-label-primary-foreground);
-  /* The plugin's own vocabulary: 1px borders are `border-l2` (10%), hairlines
-   * `border-l1` (4%). `l4` (16%) is noticeably darker than every other tab. */
-  --border: var(--dsw-alias-border-l2);
-  --border-subtle: var(--dsw-alias-border-l1);
-  --input: var(--dsw-alias-border-l2);
-  --ring: var(--dsw-alias-state-business-primary);
-  --success: var(--dsw-alias-state-success-primary);
-  --warning: var(--dsw-alias-state-warn-primary);
-  --foreground-3: var(--dsw-alias-label-tertiary);
-  --border-strong: var(--dsw-alias-label-tertiary);
-}
-
-/*
- * Scoped resets.
- *
- * The host's own stylesheets are UNLAYERED, so an unlayered host rule outranks
- * anything Tailwind puts in `layer(utilities)` regardless of specificity — a
- * layered `.rounded-md` cannot beat a bare host rule. The compensation is
- * `.dsw-tasks` (the task page root class): its own rules live in the layer but
- * carry class-level specificity, and `:where()` keeps the element resets at
- * class specificity too, so `color`/`font`/`box-sizing` reach the page's
- * elements without a preflight and without leaking to the rest of DSH.
- */
-@layer base {
-  .dsw-tasks {
-    color: var(--dsw-alias-label-primary);
-    /* The page's own density: stock shadcn body text, not the host's 16px. */
-    font-size: 0.875rem;
-    line-height: 1.45;
-  }
-
-  .dsw-tasks :where(button, input, textarea, select) {
-    font: inherit;
-  }
-
-  /*
-   * THE SCOPED PREFLIGHT SUBSET — without it the page wears the browser's
-   * defaults. Preflight itself cannot be imported (it would repaint the host
-   * page), but preflight is also what normalizes FORM CONTROLS: measured in a
-   * real browser on a plugin icon button that sets only `size-7`, the UA chrome
-   * survived as `padding: 1px 6px`, `border: 2px outset`, `background:
-   * ButtonFace` (#efefef) and `font: 400 13.33px system-ui` — gray beveled
-   * buttons and a soft double border, i.e. "the page has no CSS". Text inputs
-   * and selects are affected the same way.
-   *
-   * `:where()` keeps these at the ancestor's (0,1,0); utilities sit in the
-   * later `utilities` layer at the same specificity, so they still win — this
-   * only removes what nobody asked for.
-   */
-  .dsw-tasks :where(button, input, select, textarea) {
-    margin: 0;
-    padding: 0;
-    /* Split rather than the `border: 0 solid` shorthand: the theme guard
-     * (tests/theme.spec.ts) requires every `border` declaration to name a
-     * colour token or be inert, and `0 solid` is neither. */
-    border-width: 0;
-    border-style: none;
-    border-radius: 0;
-    background-color: transparent;
-    background-image: none;
-    color: inherit;
-    letter-spacing: inherit;
-    appearance: none;
-    -webkit-appearance: none;
-  }
-
-  .dsw-tasks :where(button, [role='button']) {
-    cursor: pointer;
-  }
-
-  .dsw-tasks :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
-    cursor: default;
-  }
-
-  .dsw-tasks :where(*, *::before, *::after) {
-    box-sizing: border-box;
-  }
-
-  /* The host strips/overrides the UA focus ring in places; the task page owns
-   * a visible, token-colored one (design language: focus-visible must show). */
-  .dsw-tasks :where(a, button, input, textarea, select, [tabindex]):focus-visible {
-    outline: 2px solid var(--dsw-alias-state-business-primary);
-    outline-offset: 1px;
-  }
-}
-
-/*
- * Thin scrollbars for the shadcn ScrollArea / scrollable task surfaces, riding
- * the host's scrollbar tokens (they already flip with the theme).
- */
-@layer utilities {
-  .dsw-tasks {
-    scrollbar-width: thin;
-    scrollbar-color: var(--dsw-alias-scrollbar-hover-l2) transparent;
-  }
-
-  .dsw-tasks :where(*)::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .dsw-tasks :where(*)::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .dsw-tasks :where(*)::-webkit-scrollbar-thumb {
-    background: var(--dsw-alias-scrollbar-bg-l2);
-    border-radius: 4px;
-  }
-
-  .dsw-tasks :where(*)::-webkit-scrollbar-thumb:hover {
-    background: var(--dsw-alias-scrollbar-hover-l2);
-  }
-}
-
-/* Motion is decorative only (opacity / background / transform); users who ask
- * for less get none of it. */
-@media (prefers-reduced-motion: reduce) {
-  .dsw-tasks :where(*, *::before, *::after) {
-    animation: none !important;
-    transition: none !important;
-  }
-}
diff --git a/src/client/ui/toggle-group.tsx b/src/client/ui/toggle-group.tsx
deleted file mode 100644
index 8220b80..0000000
--- a/src/client/ui/toggle-group.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from "react"
-import { type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
-
-import { toggleVariants } from "./toggle.tsx"
-
-const ToggleGroupContext = React.createContext<
- VariantProps<typeof toggleVariants> & {
- spacing?: number
- }
->({
- size: "default",
- variant: "default",
- spacing: 0,
-})
-
-function ToggleGroup({
- className,
- variant,
- size,
- spacing = 0,
- children,
- ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
- VariantProps<typeof toggleVariants> & {
- spacing?: number
- }) {
- return (
- <ToggleGroupPrimitive.Root
- data-slot="toggle-group"
- data-variant={variant}
- data-size={size}
- data-spacing={spacing}
- style={{ "--gap": spacing } as React.CSSProperties}
- className={cn(
- "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
- className
- )}
- {...props}
- >
- <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
- {children}
- </ToggleGroupContext.Provider>
- </ToggleGroupPrimitive.Root>
- )
-}
-
-function ToggleGroupItem({
- className,
- children,
- variant,
- size,
- ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
- VariantProps<typeof toggleVariants>) {
- const context = React.useContext(ToggleGroupContext)
-
- return (
- <ToggleGroupPrimitive.Item
- data-slot="toggle-group-item"
- data-variant={context.variant || variant}
- data-size={context.size || size}
- data-spacing={context.spacing}
- className={cn(
- toggleVariants({
- variant: context.variant || variant,
- size: context.size || size,
- }),
- "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
- "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
- className
- )}
- {...props}
- >
- {children}
- </ToggleGroupPrimitive.Item>
- )
-}
-
-export { ToggleGroup, ToggleGroupItem }
diff --git a/src/client/ui/toggle.tsx b/src/client/ui/toggle.tsx
deleted file mode 100644
index 8309548..0000000
--- a/src/client/ui/toggle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./utils"
-import { Toggle as TogglePrimitive } from "radix-ui"
-
-const toggleVariants = cva(
- "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- {
- variants: {
- variant: {
- default: "bg-transparent",
- outline:
- "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
- },
- size: {
- default: "h-9 min-w-9 px-2",
- sm: "h-8 min-w-8 px-1.5",
- lg: "h-10 min-w-10 px-2.5",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-
-function Toggle({
- className,
- variant,
- size,
- ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
- VariantProps<typeof toggleVariants>) {
- return (
- <TogglePrimitive.Root
- data-slot="toggle"
- className={cn(toggleVariants({ variant, size, className }))}
- {...props}
- />
- )
-}
-
-export { Toggle, toggleVariants }
diff --git a/src/client/ui/tooltip.tsx b/src/client/ui/tooltip.tsx
deleted file mode 100644
index cb3e50c..0000000
--- a/src/client/ui/tooltip.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react"
-import { cn } from "./utils"
-import { Tooltip as TooltipPrimitive } from "radix-ui"
-
-function TooltipProvider({
- delayDuration = 0,
- ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
- return (
- <TooltipPrimitive.Provider
- data-slot="tooltip-provider"
- delayDuration={delayDuration}
- {...props}
- />
- )
-}
-
-function Tooltip({
- ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
- return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-}
-
-function TooltipTrigger({
- ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
- return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
- className,
- sideOffset = 0,
- children,
- ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
- return (
- <TooltipPrimitive.Portal>
- <TooltipPrimitive.Content
- data-slot="tooltip-content"
- sideOffset={sideOffset}
- className={cn(
- "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background data-[side=bottom]: data-[side=left]: data-[side=right]: data-[side=top]: data-[state=closed]: data-[state=closed]: data-[state=closed]:",
- className
- )}
- {...props}
- >
- {children}
- <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
- </TooltipPrimitive.Content>
- </TooltipPrimitive.Portal>
- )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/client/ui/utils.ts b/src/client/ui/utils.ts
deleted file mode 100644
index cda7d2f..0000000
--- a/src/client/ui/utils.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * The shadcn/ui class-name helper: `clsx` for conditional composition,
- * `tailwind-merge` so a caller's later utility wins over a component's default
- * of the same kind (`cn('px-2', 'px-4')` -> `px-4`) instead of both landing in
- * the class list and letting stylesheet order decide.
- *
- * Vendored shadcn components import this file directly (relative path); the
- * CLI's `@/lib/utils` alias is never used in this repo.
- */
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-/** Merge conditional class values, resolving conflicting Tailwind utilities. */
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs))
-}
diff --git a/tests/manifest-consistency.spec.ts b/tests/manifest-consistency.spec.ts
index 37930c3..c15333d 100644
--- a/tests/manifest-consistency.spec.ts
+++ b/tests/manifest-consistency.spec.ts
@@ -83,10 +83,9 @@ function bundleId(file: string): string {
 
 /**
  * The lazy chunk bundles, DERIVED from the host route's registry (never
- * hand-mirrored: the hand-written list drifted twice — `locale` was missing
- * from both this list and a later `package.json#files` cleanup, and `tasks`
- * shipped without being listed at all, which would have made the Tasks page
- * fail to load from a published tarball).
+ * hand-mirrored: the hand-written list drifted once — `locale` was missing
+ * from both this list and a later `package.json#files` cleanup, so a
+ * published tarball could not serve it).
  */
 const CHUNK_FILES = CHUNK_NAMES.map(name => `lib/client-${name}.js`)
 
diff --git a/tests/theme.spec.ts b/tests/theme.spec.ts
index 98058ae..7897479 100644
--- a/tests/theme.spec.ts
+++ b/tests/theme.spec.ts
@@ -14,7 +14,7 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from 'vitest'
 import { readFileSync, readdirSync } from 'node:fs'
-import { resolve } from 'node:path'
+import { resolve, sep } from 'node:path'
 import { colorAlpha, effectiveTokenValue, tokenValue } from '../src/client/theme.ts'
 
 afterEach(() => {
@@ -91,12 +91,31 @@ describe('effectiveTokenValue', () => {
  * `FileTypeIcon` artwork from a platform module (the host owns those pixels
  * and its own palette), and everything the plugin renders around them —
  * including the colored tab glyphs — rides theme tokens. So the guard is
- * simply that no plugin module carries a color literal, and that no icon
- * dataset sneaked back in as a chunk.
+ * simply that no plugin module carries a color literal, that every module
+ * stylesheet paints `color` from a token, and that no icon dataset sneaked
+ * back in as a chunk.
  */
 // jsdom has no file:// import.meta.url; vitest runs from the repo root.
 const ROOT = process.cwd()
 
+/** `color` as a property — never `background-color` / `scrollbar-color` / `-webkit-text-fill-color`. */
+const COLOR_PROPERTY = /(?:^|[;{\s])color\s*:\s*([^;}]+)/g
+
+/** Values that name no paint of their own and are therefore exempt. */
+const INERT_COLOR = /^(?:inherit|currentcolor|transparent)$/i
+
+/** A token allowed by the contract: the plugin's own `--dsw-*` or the host's `--ds-*`. */
+function isThemeToken(name: string): boolean {
+  return name.startsWith('dsw-') || name.startsWith('ds-')
+}
+
+/** Every `*.module.css` sheet under `src/client/`, as repo-relative POSIX paths. */
+function moduleStylesheets(): string[] {
+  return readdirSync(resolve(ROOT, 'src/client'), { recursive: true, encoding: 'utf8' })
+    .filter(name => name.endsWith('.module.css'))
+    .map(name => `src/client/${name.split(sep).join('/')}`)
+}
+
 describe('skin contract: the plugin owns no color of its own', () => {
   it('the icon modules carry no color literals', () => {
     for (const file of ['src/client/file-icons.tsx', 'src/client/icons.tsx']) {
@@ -121,6 +140,27 @@ describe('skin contract: the plugin owns no color of its own', () => {
     }
   })
 
+  it('every module stylesheet paints `color` from a theme token', () => {
+    const sheets = moduleStylesheets()
+    // Guard the scan itself: a glob that silently matches nothing would make
+    // this contract vacuous.
+    expect(sheets.length).toBeGreaterThan(5)
+    for (const file of sheets) {
+      const styles = readFileSync(resolve(ROOT, file), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+      for (const declaration of styles.matchAll(COLOR_PROPERTY)) {
+        const value = declaration[1]!.trim()
+        // `color: inherit` / `currentcolor` / `transparent` is the plugin
+        // deliberately taking the surrounding color, not painting one.
+        if (INERT_COLOR.test(value)) continue
+        // Dereference every var() — `color-mix()` chains are fine as long as
+        // the whole expression bottoms out in theme tokens.
+        const tokens = [...value.matchAll(/var\(--([a-z0-9-]+)/gi)].map(match => match[1]!)
+        expect(tokens.length, `${file}: color: ${value}`).toBeGreaterThan(0)
+        for (const name of tokens) expect(isThemeToken(name), `${file}: color: ${value}`).toBe(true)
+      }
+    }
+  })
+
   it('the empty-pane welcome capsule follows the host guide recipe', () => {
     // The card is the same surface as DSH's own guide capsule ("pick what
     // opens here"), so this pins the shared geometry and the token-only
diff --git a/tests/ui-bundle.spec.ts b/tests/ui-bundle.spec.ts
deleted file mode 100644
index 489f935..0000000
--- a/tests/ui-bundle.spec.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * Built-artifact gate for the Tailwind v4 + shadcn/ui migration.
- *
- * The Tasks page — the workflow graph, the tree, the task window, the team
- * board, the jobs drawer AND the vendored shadcn/radix component layer — lives
- * in the lazy `tasks` chunk (`lib/client-tasks.js`), so this gate checks BOTH
- * artifacts:
- *
- * - **core** (`lib/client.js`): must stay free of the UI layer. No Tailwind
- *   utilities, no radix, no tailwind-merge — those are the chunk's payload.
- *   It also must never carry preflight (its CSS is injected into the host page
- *   globally, with no shadow root) nor a palette literal.
- * - **chunk** (`lib/client-tasks.js`): carries the compiled Tailwind output
- *   (`--tw-*` plumbing plus the generated `.flex{}`), the bridged tokens and
- *   the radix components; preflight and oklch stay out of it for the same
- *   global-injection reason.
- *
- * Preflight is detected by its DECLARATION payload, not the selector spelling:
- * the minifier rewrites `::before` to `:before`, Tailwind's own `@property`
- * fallback shares the `*,:before,:after,::backdrop` selector list, and
- * `::file-selector-button` is emitted legitimately by the `file:` variant
- * (that false positive is why this check lives here rather than in a
- * substring match).
- *
- * `lib/` is a build output, not a test prerequisite, so every spec SKIPS
- * (loudly, via skipIf) when the artifact is absent instead of failing an
- * unbuilt checkout or building behind the suite's back.
- */
-// @vitest-environment node
-import { existsSync, readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { describe, expect, it } from 'vitest'
-
-const CORE_BUNDLE = resolve(process.cwd(), 'lib/client.js')
-const TASKS_CHUNK = resolve(process.cwd(), 'lib/client-tasks.js')
-
-/** Tailwind's generated output: the utility class and its `--tw-*` plumbing. */
-const TAILWIND_UTILITY = '.flex{'
-const TAILWIND_CUSTOM_PROPERTY = '--tw-'
-
-/** Preflight's universal reset, in the spellings Tailwind/minification emit. */
-const PREFLIGHT_RESET_DECLARATIONS = /box-sizing:\s*border-box;\s*margin:\s*0/
-const PREFLIGHT_SELECTORS = [/\*,::before,::after/, /\*, ::before, ::after/]
-const PREFLIGHT_HTML_BLOCK = '-webkit-text-size-adjust'
-
-/** The measured pre-migration core bundle (HEAD 12b4716, same toolchain). */
-const PRE_MIGRATION_CORE_BYTES = 1_012_271
-/** The migration's reviewed core allowance (chunk payload excluded). */
-const CORE_BUDGET_BYTES = PRE_MIGRATION_CORE_BYTES + 250 * 1024
-/** A bundle smaller than this lost the plugin entirely. */
-const SANITY_FLOOR_BYTES = 500 * 1024
-
-/** Every preflight signature, asserted absent from one artifact. */
-function expectNoPreflight(source: string): void {
-  for (const selector of PREFLIGHT_SELECTORS) expect(source).not.toMatch(selector)
-  expect(source).not.toMatch(PREFLIGHT_RESET_DECLARATIONS)
-  expect(source).not.toContain(PREFLIGHT_HTML_BLOCK)
-}
-
-describe('lib/client.js: the core bundle stays free of the UI layer', () => {
-  const built = existsSync(CORE_BUNDLE)
-  const bundle = built ? readFileSync(CORE_BUNDLE, 'utf8') : ''
-
-  it.skipIf(!built)('carries no Tailwind utilities (they belong to the tasks chunk)', () => {
-    expect(bundle).not.toContain(TAILWIND_CUSTOM_PROPERTY)
-    expect(bundle).not.toContain(TAILWIND_UTILITY)
-  })
-
-  it.skipIf(!built)('carries neither radix nor tailwind-merge nor lucide', () => {
-    expect(bundle).not.toContain('radix-ui')
-    expect(bundle).not.toContain('tailwind-merge')
-    expect(bundle).not.toContain('lucide-react')
-  })
-
-  it.skipIf(!built)('carries no preflight reset and no palette literal', () => {
-    expectNoPreflight(bundle)
-    // Tailwind's own palette is oklch-based; any hit is a leaked value.
-    expect(bundle).not.toContain('oklch(')
-  })
-
-  it.skipIf(!built)('fits the reviewed core budget and reports its size', () => {
-    const bytes = Buffer.byteLength(bundle)
-    expect(bytes).toBeGreaterThan(SANITY_FLOOR_BYTES)
-    expect(bytes).toBeLessThanOrEqual(CORE_BUDGET_BYTES)
-    console.log(
-      `[ui-bundle] lib/client.js = ${bytes} bytes (${(bytes / 1024).toFixed(1)} KiB);`
-      + ` pre-migration ${PRE_MIGRATION_CORE_BYTES} bytes; delta ${bytes - PRE_MIGRATION_CORE_BYTES}`,
-    )
-  })
-})
-
-describe('lib/client-tasks.js: the lazy chunk carries the shadcn layer', () => {
-  const built = existsSync(TASKS_CHUNK)
-  const chunk = built ? readFileSync(TASKS_CHUNK, 'utf8') : ''
-
-  it.skipIf(!built)('carries the compiled Tailwind output and the bridged tokens', () => {
-    expect(chunk).toContain(TAILWIND_CUSTOM_PROPERTY)
-    expect(chunk).toContain(TAILWIND_UTILITY)
-    // The bridge is what keeps the skin contract: shadcn variables point at
-    // DSH tokens, so no palette value is ever painted.
-    expect(chunk).toContain('var(--dsw-alias-state-business-primary)')
-  })
-
-  it.skipIf(!built)('carries the radix component layer', () => {
-    expect(chunk).toContain('radix-ui')
-  })
-
-  it.skipIf(!built)('carries no preflight reset and no palette literal', () => {
-    // The chunk's stylesheet is injected globally too, so the same rule holds.
-    expectNoPreflight(chunk)
-    expect(chunk).not.toContain('oklch(')
-    expect(chunk).not.toContain('lucide-react')
-  })
-
-  it.skipIf(!built)('assigns its global chunk registry slot', () => {
-    // chunk-loader.ts materializes the factory from this slot.
-    expect(chunk).toContain('__dshChunks__["tasks"]')
-  })
-
-  it.skipIf(!built)('reports its size for the gate', () => {
-    const bytes = Buffer.byteLength(chunk)
-    expect(bytes).toBeGreaterThan(SANITY_FLOOR_BYTES / 4)
-    console.log(`[ui-bundle] lib/client-tasks.js = ${bytes} bytes (${(bytes / 1024).toFixed(1)} KiB)`)
-  })
-})
diff --git a/tests/ui-foundation.spec.ts b/tests/ui-foundation.spec.ts
deleted file mode 100644
index d2d08b8..0000000
--- a/tests/ui-foundation.spec.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-/**
- * Tailwind v4 + shadcn/ui foundation guards.
- *
- * The plugin ships ONE global stylesheet (src/client/ui/theme.css, compiled by
- * tsdown's css-inline plugin into `<style data-plugin>`), and the two ways that
- * can go wrong are silent:
- *
- * 1. Someone adds `@import "tailwindcss"` (or preflight) — the reset then
- *    repaints the entire DSH host page, because plugin CSS is not scoped by a
- *    shadow root. The first test locks the import list and the layer names; the
- *    bundle test looks for preflight's own selectors in the built artifact.
- * 2. Someone bridge a shadcn token to a literal instead of a `--dsw-*` token —
- *    a dark/light theme switch then leaves the plugin's controls unreadable.
- *    That is the skin contract (docs/external-plugin-guide.md §12).
- *
- * `@source` is also guarded: if it disappears, Tailwind falls back to scanning
- * the project root (lib/, tests/, node_modules/), which both bloats the bundle
- * and lets `lib/*.js` class-like strings feed the scanner.
- */
-// @vitest-environment node
-import { existsSync, readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { describe, expect, it } from 'vitest'
-import { compileTailwind } from '../tsdown.config.ts'
-
-const ROOT = process.cwd()
-const THEME_CSS = resolve(ROOT, 'src/client/ui/theme.css')
-const CLIENT_BUNDLE = resolve(ROOT, 'lib/client.js')
-/** The lazy chunk that carries the Tasks page and the shadcn layer. */
-const TASKS_CHUNK = resolve(ROOT, 'lib/client-tasks.js')
-
-/** The shadcn token -> DSH token bridge, as specified by the design language. */
-const TOKEN_BRIDGE: Array<[shadcn: string, dsw: string]> = [
-  ['--background', '--dsw-alias-bg-base'],
-  ['--foreground', '--dsw-alias-label-primary'],
-  ['--card', '--dsw-alias-bg-layer-1'],
-  ['--card-foreground', '--dsw-alias-label-primary'],
-  ['--popover', '--dsw-alias-bg-layer-2'],
-  ['--popover-foreground', '--dsw-alias-label-primary'],
-  ['--primary', '--dsw-alias-state-business-primary'],
-  ['--primary-foreground', '--dsw-alias-label-primary-foreground'],
-  ['--secondary', '--dsw-alias-interactive-bg-hover'],
-  ['--secondary-foreground', '--dsw-alias-label-primary'],
-  ['--muted', '--dsw-alias-interactive-bg-hover'],
-  ['--muted-foreground', '--dsw-alias-label-secondary'],
-  ['--accent', '--dsw-alias-interactive-bg-hover'],
-  ['--accent-foreground', '--dsw-alias-label-primary'],
-  ['--destructive', '--dsw-alias-state-error-primary'],
-  ['--destructive-foreground', '--dsw-alias-label-primary-foreground'],
-  // The plugin's own vocabulary: 1px borders are border-l2 (10%), hairlines
-  // border-l1 (4%). l4 is noticeably darker than every other tab's chrome.
-  ['--border', '--dsw-alias-border-l2'],
-  ['--input', '--dsw-alias-border-l2'],
-  ['--ring', '--dsw-alias-state-business-primary'],
-  ['--success', '--dsw-alias-state-success-primary'],
-  ['--warning', '--dsw-alias-state-warn-primary'],
-  ['--foreground-3', '--dsw-alias-label-tertiary'],
-  ['--border-strong', '--dsw-alias-label-tertiary'],
-]
-
-describe('tailwind entry: theme + utilities only', () => {
-  const theme = readFileSync(THEME_CSS, 'utf8')
-
-  it('imports exactly the theme and utilities layers, and never preflight', () => {
-    const imports = [...theme.matchAll(/@import\s+"([^"]+)"\s+layer\(([^)]+)\);/g)]
-      .map(match => [match[1], match[2]])
-    expect(imports).toEqual([
-      ['tailwindcss/theme.css', 'theme'],
-      ['tailwindcss/utilities.css', 'utilities'],
-    ])
-    // No bare `@import "tailwindcss"` and no stylesheet path that could be the
-    // reset (both forms pull preflight in; the file's own comment is prose).
-    expect(theme).not.toMatch(/@import\s+"tailwindcss"/)
-    expect(theme).not.toMatch(/@import\s+"[^"]*preflight/)
-  })
-
-  it('scans only the client TSX tree', () => {
-    expect(theme).toMatch(/@source\s+"\.\.\/\*\*\/\*\.tsx";/)
-  })
-
-  it('defines the dark variant from the host attribute, not a .dark class', () => {
-    expect(theme).toMatch(/@custom-variant\s+dark\s+\(&:where\(\[data-ds-dark-theme\],\s*\[data-ds-dark-theme\]\s*\*\)\);/)
-    expect(theme).not.toMatch(/@custom-variant\s+dark\s+\(&:where\(\.dark/)
-  })
-
-  it('bridges every shadcn token to a DSH token', () => {
-    for (const [name, dsw] of TOKEN_BRIDGE) {
-      expect(theme, name).toContain(`${name}: var(${dsw})`)
-    }
-  })
-
-  it('carries the radius scale and the scoped base reset', () => {
-    for (const [name, value] of [['--radius', '6px'], ['--radius-sm', '4px'], ['--radius-md', '6px'], ['--radius-lg', '8px'], ['--radius-xl', '12px']]) {
-      expect(theme, name).toContain(`${name}: ${value}`)
-    }
-    expect(theme).toMatch(/\.dsw-tasks\s*\{[^}]*color:\s*var\(--dsw-alias-label-primary\)/)
-    expect(theme).toMatch(/\.dsw-tasks\s+:where\(button, input, textarea, select\)\s*\{[^}]*font:\s*inherit/)
-    expect(theme).toMatch(/\.dsw-tasks\s+:where\(\*, \*::before, \*::after\)\s*\{[^}]*box-sizing:\s*border-box/)
-    // Motion is opt-out-able.
-    expect(theme).toMatch(/@media \(prefers-reduced-motion: reduce\)/)
-  })
-
-  it('scopes every portal-rendered popover root back under .dsw-tasks', () => {
-    // The popovers are portaled to document.body, i.e. OUTSIDE the page root
-    // that carries `.dsw-tasks` — without the class on their own root the
-    // scoped base reset (font inheritance, box-sizing, focus-visible ring on
-    // bare controls) silently stops applying there. Regression: the first
-    // migration shipped TaskWindow with the class but not the two node
-    // popovers nor the job-output popover.
-    const portalContents = [
-      'src/client/TaskWindow.tsx',
-      'src/client/TasksPopovers.tsx',
-      'src/client/JobsDrawer.tsx',
-    ]
-    for (const file of portalContents) {
-      const source = readFileSync(resolve(ROOT, file), 'utf8')
-      expect(source, file).toContain('dsw-tasks')
-    }
-    // The shell itself portals — that is the reason the class is needed.
-    const shell = readFileSync(resolve(ROOT, 'src/client/AnchoredPopover.tsx'), 'utf8')
-    expect(shell).toContain('createPortal')
-  })
-
-  it('restores the scoped preflight subset that form controls need', () => {
-    // Regression pin for a real-device report: "the Tasks page looks like it
-    // has no CSS". The plugin cannot import preflight (it would repaint the
-    // host page), but preflight is what normalizes form controls — without it
-    // every plugin `<button>` kept the UA chrome measured in the real shell:
-    // `padding: 1px 6px`, `border: 2px outset`, `background: ButtonFace`,
-    // `font: 400 13.33px system-ui`. The scoped subset below removes exactly
-    // that, at (0,1,0) so utilities in the later `utilities` layer still win.
-    const reset = /\.dsw-tasks\s+:where\(button, input, select, textarea\)\s*\{([^}]*)\}/
-      .exec(theme)?.[1] ?? ''
-    for (const declaration of ['margin: 0', 'padding: 0', 'border: 0 solid', 'appearance: none']) {
-      expect(reset, declaration).toContain(declaration)
-    }
-  })
-
-  it('declares the layer order before the imports that register the layers', () => {
-    // The compiler orders layers by first appearance. Without the explicit
-    // statement the `@import ... layer(utilities)` lines would register
-    // `utilities` BEFORE the `base` block, making the scoped reset beat the
-    // utilities (measured: a `rounded-md` button rendering square).
-    expect(theme).toMatch(/@layer theme, base, components, utilities;/)
-    expect(theme.indexOf('@layer theme, base, components, utilities;'))
-      .toBeLessThan(theme.indexOf('@import "tailwindcss/theme.css"'))
-  })
-
-  it('holds the skin contract: no color literal anywhere in the entry', () => {
-    // Comments carry prose, not values — strip them before looking.
-    const withoutComments = theme.replace(/\/\*[\s\S]*?\*\//g, '')
-    expect(withoutComments).not.toMatch(/#[0-9a-fA-F]{3,8}\b/)
-    expect(withoutComments).not.toMatch(/\b(?:rgba?|hsla?|oklch|lab|lch|color-mix)\(/)
-    // Every custom-property value is either a DSH token, another token defined
-    // in this file (the @theme inline block), or a length from the radius
-    // scale — never a paint value of its own.
-    const definedElsewhere = new Set([
-      ...TOKEN_BRIDGE.map(([name]) => name.slice(2)),
-      // Non-bridged locals the bridge forwards to (e.g. `--border-subtle`),
-      // read straight out of the file so they cannot drift out of the set.
-      ...[...withoutComments.matchAll(/^\s*--([a-z0-9-]+)\s*:/gm)].map(m => m[1]),
-      'radius', 'radius-sm', 'radius-md', 'radius-lg', 'radius-xl',
-    ])
-    for (const declaration of withoutComments.matchAll(/^\s*(--[a-z0-9-]+):\s*([^;]+);/gm)) {
-      const [, name, raw] = declaration
-      const value = (raw ?? '').trim()
-      const reference = value.match(/^var\(--([a-z0-9-]+)/)
-      const refName = reference?.[1]
-      const ok = (refName !== undefined && (refName.startsWith('dsw-') || definedElsewhere.has(refName)))
-        || /^[0-9.]+(?:px|rem|em|%)$/.test(value)
-        // `none` is how the plugin says "flat": static panels take no elevation
-        // (the floating layers map to the host's --dsw-shadow-lv* tokens).
-        || value === 'none'
-      expect(ok, `${name}: ${value}`).toBe(true)
-    }
-  })
-})
-
-describe('tailwind compile: the shared pipeline produces utilities bound to DSH tokens', () => {
-  it('emits utilities and the token indirection, and no preflight', async () => {
-    const css = await compileTailwind(readFileSync(THEME_CSS, 'utf8'), THEME_CSS, { minify: true })
-    expect(css).toMatch(/--tw-/)
-    expect(css).toMatch(/\.flex\{/)
-    expect(css).toContain('var(--dsw-alias-state-business-primary)')
-    expect(css).toContain('.dsw-tasks')
-    // Preflight's actual signature is its universal reset block. The selector
-    // spelling alone is not enough (minification rewrites `::before` to
-    // `:before`, and the utilities layer's own `*,:before,:after,::backdrop`
-    // @property fallback shares the selector list), and
-    // `::file-selector-button` is not a signature at all: Tailwind's `file:`
-    // variant emits it legitimately for the vendored Input's file button.
-    expect(css).not.toMatch(/box-sizing:\s*border-box;\s*margin:\s*0/)
-    expect(css).not.toContain('-webkit-text-size-adjust')
-  })
-})
-
-describe('built artifacts: tailwind inlined, no preflight, no new deps', () => {
-  const built = existsSync(CLIENT_BUNDLE)
-  // `pnpm build` is a gate command, not a test prerequisite; skip loudly rather
-  // than fail a checkout that has not been built yet.
-  //
-  // The Tasks page (and therefore the shadcn layer's stylesheet) lives in the
-  // lazy `tasks` chunk, so the compiled utilities are asserted against THAT
-  // artifact; tests/ui-bundle.spec.ts owns the core/chunk split contract.
-  const chunkBuilt = existsSync(TASKS_CHUNK)
-  it.skipIf(!chunkBuilt)('inlines the compiled utilities into the tasks chunk', () => {
-    const bundle = readFileSync(TASKS_CHUNK, 'utf8')
-    expect(bundle).toMatch(/--tw-/)
-    expect(bundle).toMatch(/\.flex\{/)
-    // The scoped base reset travels with the utilities.
-    expect(bundle).toContain('.dsw-tasks')
-    expect(bundle).toContain('--dsw-alias-state-business-primary')
-  })
-
-  it.skipIf(!built)('keeps the core bundle free of the tailwind layer', () => {
-    const bundle = readFileSync(CLIENT_BUNDLE, 'utf8')
-    expect(bundle).not.toMatch(/--tw-/)
-    expect(bundle).not.toContain('radix-ui')
-  })
-
-  it.skipIf(!built)('ships no preflight reset', () => {
-    const bundle = readFileSync(CLIENT_BUNDLE, 'utf8')
-    expect(bundle).not.toMatch(/\*,::before,::after/)
-    expect(bundle).not.toMatch(/\*, ::before, ::after/)
-    // The minifier rewrites `::before` to `:before`, so the selector spelling
-    // is not a complete signature — the reset's declaration payload is.
-    expect(bundle).not.toMatch(/box-sizing:\s*border-box;\s*margin:\s*0/)
-    expect(bundle).not.toContain('-webkit-text-size-adjust')
-  })
-
-  it.skipIf(!built)('ships no color literal from the tailwind palette', () => {
-    const bundle = readFileSync(CLIENT_BUNDLE, 'utf8')
-    // Tailwind's default palette is defined in oklch; any hit means a palette
-    // value leaked into the sheet instead of a --dsw-* token.
-    expect(bundle).not.toContain('oklch(')
-    expect(bundle).not.toContain('lucide-react')
-  })
-})
diff --git a/tests/ui-shadows.spec.ts b/tests/ui-shadows.spec.ts
deleted file mode 100644
index 5e0e555..0000000
--- a/tests/ui-shadows.spec.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Elevation guard of the task page, shadcn/ui stock edition.
- *
- * Static panels (cards, rows, the drawer) may carry the stock LIGHT shadows
- * only — `shadow-xs` (button-like compact surfaces such as graph node cards)
- * and `shadow-sm` (cards / panels); `shadow-none` (a reset) is fine. Anything heavier (`shadow-md|lg|xl|2xl`,
- * bare `shadow`, `shadow-inner`, arbitrary `shadow-[…]`) on a static panel is
- * the regression: elevation beyond the stock pair reads as a floating layer
- * that nothing anchors.
- *
- * Real floating layers keep their deeper shadows: the `AnchoredPopover` shell
- * (the task window / node popover chassis) and the vendored `popover` /
- * `dropdown-menu` / `tooltip` primitives, which render into a portal.
- *
- * The guard is deliberately source-level: a `shadow-*` utility dropped into a
- * static panel is exactly the regression, and the class name is the only place
- * it is visible (Tailwind generates the CSS at build time).
- */
-// @vitest-environment node
-import { readFileSync, readdirSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { describe, expect, it } from 'vitest'
-
-const ROOT = process.cwd()
-const VENDORED_UI_DIR = 'src/client/ui'
-
-/** Panels that are laid out IN the page: light stock shadows only. */
-const STATIC_PANEL_FILES = [
-  'src/client/SubagentView.tsx',
-  'src/client/SubagentView.module.css',
-  'src/client/TasksGraph.tsx',
-  'src/client/TasksTree.tsx',
-  'src/client/TaskWindow.tsx',
-  'src/client/TeamBoard.tsx',
-  'src/client/JobsDrawer.tsx',
-  'src/client/TasksPopovers.tsx',
-  'src/client/tasks-shared.tsx',
-  'src/client/tasks-canvas.module.css',
-]
-
-/** The only files allowed to paint a deeper elevation shadow (floating layers). */
-const FLOATING_FILES = [
-  'src/client/AnchoredPopover.tsx',
-  `${VENDORED_UI_DIR}/popover.tsx`,
-  `${VENDORED_UI_DIR}/dropdown-menu.tsx`,
-  `${VENDORED_UI_DIR}/tooltip.tsx`,
-]
-
-/**
- * Every shadow utility a file uses (Tailwind spellings, but NOT `box-shadow`,
- * which is how the components spell the focus-ring transition
- * (`transition-[color,box-shadow]`) and the ring plumbing (`--tw-shadow`)).
- */
-const SHADOW_UTILITY = /(?<![-\w])shadow(?:-(?:2xs|xs|sm|md|lg|xl|2xl|inner|none)|\[|\()?/g
-
-/** The stock pair a static panel may paint. */
-// `shadow-none` is not an elevation at all (it clears the ring plumbing), so it
-// is allowed anywhere a light shadow is; upstream's input-group uses it to keep
-// nested controls flat inside the group's own surface.
-const STATIC_ALLOWED = new Set(['shadow-xs', 'shadow-sm', 'shadow-none'])
-
-/** Every non-allowed shadow utility in the source, for a readable failure. */
-function offendingShadows(source: string): string[] {
-  return (source.match(SHADOW_UTILITY) ?? [])
-    .filter(match => !STATIC_ALLOWED.has(match))
-}
-
-/** A literal `box-shadow` declaration is the same defect in stylesheet form. */
-const BOX_SHADOW_DECLARATION = /(?:^|;)\s*box-shadow\s*:/
-
-/** Comments are prose about shadows ("no shadow — a node never floats"). */
-function stripComments(source: string): string {
-  return source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^[ \t]*\/\/.*$/gm, '')
-}
-
-const read = (file: string) => stripComments(readFileSync(resolve(ROOT, file), 'utf8'))
-
-describe('task page: static panels keep stock light shadows only', () => {
-  it.each(STATIC_PANEL_FILES)('%s carries no shadow beyond shadow-xs/shadow-sm', (file) => {
-    expect(offendingShadows(read(file)), file).toEqual([])
-  })
-
-  it('no migrated stylesheet declares box-shadow', () => {
-    for (const file of [...STATIC_PANEL_FILES, ...FLOATING_FILES].filter(name => name.endsWith('.css'))) {
-      expect(read(file), file).not.toMatch(BOX_SHADOW_DECLARATION)
-    }
-  })
-
-  it('keeps the deep shadows in the floating allowlist only', () => {
-    const uiFiles = readdirSync(resolve(ROOT, VENDORED_UI_DIR))
-      .filter(name => /\.(?:tsx|ts|css)$/.test(name))
-      .map(name => `${VENDORED_UI_DIR}/${name}`)
-    const surface = [...STATIC_PANEL_FILES, ...FLOATING_FILES, ...uiFiles]
-    for (const file of new Set(surface)) {
-      if (FLOATING_FILES.includes(file)) continue
-      expect(offendingShadows(read(file)), file).toEqual([])
-    }
-  })
-
-  it('is not a dead allowlist: the floating layers really carry deep shadows', () => {
-    // If a floating file stops carrying its shadow, the allowlist is hiding a
-    // regression elsewhere (or the elevation policy drifted back to flat).
-    expect(read('src/client/AnchoredPopover.tsx')).toMatch(/(?<![-\w])shadow-lg/)
-    expect(read(`${VENDORED_UI_DIR}/popover.tsx`)).toMatch(/(?<![-\w])shadow-md/)
-    expect(read(`${VENDORED_UI_DIR}/dropdown-menu.tsx`)).toMatch(/(?<![-\w])shadow-lg/)
-  })
-})