From 894ca2e71bf73fab36ed531106e8ed89bf33d659 Mon Sep 17 00:00:00 2001
From: lbx154 <145820328+lbx154@users.noreply.github.com>
Date: Tue, 3 Nov 2026 06:06:21 -0800
Subject: [PATCH 1/6] =?UTF-8?q?=E7=BD=91=E9=A1=B5=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=8E=BB=E6=8E=89=20AI=20=E5=91=B3=EF=BC=9A=E9=BB=91=E7=99=BD?=
 =?UTF-8?q?=E7=81=B0=E3=80=81=E7=B3=BB=E7=BB=9F=E5=AD=97=E4=BD=93=E3=80=81?=
 =?UTF-8?q?=E8=83=B6=E5=9B=8A=E6=8E=A7=E4=BB=B6=EF=BC=8C=E5=88=A0=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 配色只剩黑白灰；深色用纯黑。金色/蓝色 token 改为 ink 的别名，状态点保留绿（运行）和红（失败）
- 字体优先 SF Pro / 苹方，去掉衬线标题
- 按钮和输入框改成胶囊形，复选框随主题黑白
- 侧栏：删“全部项目合计 · 不含进行中的调用”和每个项目的花费；回收站并进筛选行；新建改成胶囊按钮
- 顶部：花费只显示 ≈$0.40，说明放在悬停提示；“已工作”时长只留在用量明细里
- 总负责人勾选项去掉卡片框，改为分隔线列表

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/web/src/App.tsx                      |   2 +-
 frontend/web/src/components/ChiefNeeds.tsx    |   2 +-
 frontend/web/src/components/EventStream.tsx   |   2 +-
 frontend/web/src/components/Sidebar.tsx       |  14 +-
 frontend/web/src/components/TopBar.tsx        |  17 +--
 .../web/src/components/customerExperience.css |  25 +--
 frontend/web/src/components/delivery.css      |   2 +-
 frontend/web/src/index.css                    | 144 ++++++++----------
 frontend/web/src/test/core.test.ts            |   4 +-
 .../web/src/test/customerExperience.test.tsx  |   1 -
 frontend/web/src/test/sidebar.test.ts         |   9 +-
 .../web/src/test/statusPresentation.test.tsx  |  27 ----
 .../web/src/test/workspaceContext.test.tsx    |   6 +-
 frontend/web/tailwind.config.ts               |   7 +-
 14 files changed, 102 insertions(+), 160 deletions(-)

diff --git a/frontend/web/src/App.tsx b/frontend/web/src/App.tsx
index 0aa133587..379a89282 100644
--- a/frontend/web/src/App.tsx
+++ b/frontend/web/src/App.tsx
@@ -932,7 +932,7 @@ export default function App() {
                 snapshotStale={snapQ.isError}
                 readOnly={kiosk}
               /> : <WorkspaceHeader className="project-header">
-                <div className="topbar-title min-w-0 truncate font-serif text-[19px] font-medium leading-6 text-ink">
+                <div className="topbar-title min-w-0 truncate text-[19px] font-semibold leading-6 text-ink">
                   {shownName(projects.find(project => project.id === activeSid) ?? {}, locale === 'zh-CN', t('sidebar.unnamedSession'))}
                 </div>
               </WorkspaceHeader>}
diff --git a/frontend/web/src/components/ChiefNeeds.tsx b/frontend/web/src/components/ChiefNeeds.tsx
index 40d8e7aed..66a639988 100644
--- a/frontend/web/src/components/ChiefNeeds.tsx
+++ b/frontend/web/src/components/ChiefNeeds.tsx
@@ -21,7 +21,7 @@ export function ChiefNeeds({ zh, onStart }: {
   };
   return (
     <section className="chief-needs mx-auto max-w-2xl px-5 pb-8 pt-[8vh]">
-      <h2 className="font-serif text-[28px] font-medium leading-tight tracking-[-0.01em] text-ink">{zh ? '你的总负责人' : 'Your chief'}</h2>
+      <h2 className="text-[32px] font-bold leading-tight tracking-[-0.03em] text-ink">{zh ? '你的总负责人' : 'Your chief'}</h2>
       <p className="mt-2 text-sm leading-6 text-ink-faint">{zh
         ? '它照看你所有的项目，盯着你关心的方向，有值得说的会主动来找你。勾选你需要的就行。'
         : 'It looks after all your projects, follows your directions, and comes to you when something is worth it. Tick what you need.'}</p>
diff --git a/frontend/web/src/components/EventStream.tsx b/frontend/web/src/components/EventStream.tsx
index c2697cd38..b5a42c9b7 100644
--- a/frontend/web/src/components/EventStream.tsx
+++ b/frontend/web/src/components/EventStream.tsx
@@ -1038,7 +1038,7 @@ export function EventStream({
         {hasOlder && <button type="button" disabled={loadingOlder} onClick={onLoadOlder} className="block w-full py-2 text-xs text-ink-faint">{locale === 'zh-CN' ? loadingOlder ? '正在加载…' : '更早的对话' : loadingOlder ? 'Loading…' : 'Earlier conversation'}</button>}
         {deferredEvents.length === 0 ? (
           historyStatus === 'ready' ? emptyState ?? (onCompose ? <div className="mx-auto max-w-2xl px-5 pb-8 pt-[12vh]">
-            <h2 className="font-serif text-[28px] font-medium leading-tight tracking-[-0.01em] text-ink">{locale === 'zh-CN' ? '从你想完成的事开始' : 'Start with what you want to accomplish'}</h2>
+            <h2 className="text-[32px] font-bold leading-tight tracking-[-0.03em] text-ink">{locale === 'zh-CN' ? '从你想完成的事开始' : 'Start with what you want to accomplish'}</h2>
             <p className="mt-2 text-sm leading-6 text-ink-faint">{locale === 'zh-CN' ? '直接说出目标，也可以选择下面的场景，再补充你的材料和要求。' : 'Describe your goal, or choose a starting point and add your material and requirements.'}</p>
             <StartPrompts onPick={onCompose} />
             <p className="mt-6 text-xs text-ink-faint">{locale === 'zh-CN' ? '或者直接试一个实际跑过的任务' : 'Or try a task that was run end to end'}</p>
diff --git a/frontend/web/src/components/Sidebar.tsx b/frontend/web/src/components/Sidebar.tsx
index 206d93a1c..389cfca74 100644
--- a/frontend/web/src/components/Sidebar.tsx
+++ b/frontend/web/src/components/Sidebar.tsx
@@ -318,12 +318,11 @@ export function Sidebar({
               onClick={onNew}
               disabled={creating}
               title={t('sidebar.create')}
-              className="ml-auto flex h-8 items-center justify-center rounded-md px-2 text-xs text-ink-dim hover:bg-bg disabled:opacity-40"
+              className="sidebar-new ml-auto"
             >
-              {creating ? '…' : locale === 'zh-CN' ? '+ 新建' : '+ New'}
+              {creating ? '…' : locale === 'zh-CN' ? '新建' : 'New'}
             </button>
           </div>
-          <p className="px-4 text-[10px] leading-4 text-ink-faint">{zh ? '全部项目合计 · 不含进行中的调用' : 'All projects · excludes calls in progress'}</p>
 
           <div className="px-3 py-2">
             <label className="sr-only" htmlFor="daemon-search">{zh ? '筛选项目名称' : 'Filter project names'}</label>
@@ -341,20 +340,17 @@ export function Sidebar({
               ) : null}
             </div>
           </div>
-          {onOpenTrash && <button type="button" className="mx-4 mb-2 text-left text-xs text-ink-dim hover:text-ink" onClick={onOpenTrash}>
-            {zh ? '回收站' : 'Trash'}
-          </button>}
           <div className="sidebar-project-filters" role="group" aria-label={zh ? '整理项目' : 'Organize projects'}>
             {(['active', 'followup', 'archived'] as const).map(filter => <button type="button" key={filter}
               aria-pressed={projectFilter === filter} onClick={() => { setProjectFilter(filter); setOrganizing(null); }}
               >
               {filter === 'active' ? zh ? '最近' : 'Recent' : filter === 'followup' ? zh ? '待跟进' : 'Follow up' : zh ? '已归档' : 'Archived'}
             </button>)}
+            {onOpenTrash && <button type="button" className="sidebar-trash" onClick={onOpenTrash}>{zh ? '回收站' : 'Trash'}</button>}
           </div>
           {organization.error && <p role="alert" className="px-4 pb-2 text-xs text-warn">{zh ? '浏览器无法读取或保存项目标记。' : 'This browser cannot read or save project markers.'}</p>}
           {organizationNotice && <p role="status" className="px-4 pb-2 text-[11px] leading-5 text-ink-faint">{organizationNotice}
             <button type="button" disabled={syncingOrganization} onClick={() => setSyncAttempt(value => value + 1)} className="ml-2 underline">{zh ? '重新同步' : 'Sync again'}</button></p>}
-          {projectFilter === 'followup' && <p className="px-4 pb-2 text-[11px] text-ink-faint">{zh ? '你标记为待跟进的项目。' : 'Projects you marked to follow up.'}</p>}
 
           <div className="mobile-scroll-region min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-3 pb-3 scroll-thin">
             {loading && projects.length === 0 ? <div className="px-1 py-3 text-xs text-ink-faint">{t('common.loading')}</div> : null}
@@ -402,7 +398,6 @@ export function Sidebar({
                   const work = project.work_status;
                   const workLabel = work?.label[locale === 'zh-CN' ? 'zh-CN' : 'en'];
                   const message = project.last_message || workLabel;
-                  const spend = spendEstimateLabel({ spendUsd: project.spend_usd ?? null, spendStatus: project.spend_status }, zh, true) || '—';
                   const name = shownName(project, zh, t('sidebar.unnamedSession'));
                   return (
                     <div
@@ -434,11 +429,10 @@ export function Sidebar({
                           {preference(project.id).followup && <Flag size={12} className="shrink-0 text-warn" aria-label={zh ? '待跟进' : 'Follow up'} />}
                         </div>
                         <div className={`mt-1 flex min-w-0 items-start gap-1.5 pl-3.5 text-[11px] leading-4 ${active ? 'text-ink-dim' : 'text-ink-faint'}`}>
-                          <span className="min-w-0 flex-1 line-clamp-2 break-words" title={message}
+                          <span className="min-w-0 flex-1 truncate" title={message}
                             data-session-work-state={work?.state}>
                             {message}
                           </span>
-                          <span data-project-spend className="shrink-0 tabular-nums" title={spendHint}>{spend}</span>
                         </div>
                       </button>
                       <button
diff --git a/frontend/web/src/components/TopBar.tsx b/frontend/web/src/components/TopBar.tsx
index 73faf69f2..27f533835 100644
--- a/frontend/web/src/components/TopBar.tsx
+++ b/frontend/web/src/components/TopBar.tsx
@@ -1,4 +1,3 @@
-import { useElapsed } from '../map/LiveLine';
 import { WorkspaceHeader } from './WorkspaceShell';
 import { SessionWorkdir } from './SessionWorkdir';
 import type { Snapshot } from '../api';
@@ -8,7 +7,7 @@ import { useI18n } from '../i18n';
 import { currentWorkStatus, workStatusLabel } from '../lib/workStatus';
 import { relativizeWorkspacePaths } from '../lib/workspacePaths';
 import { clockOf } from '../lib/format';
-import { SPEND_ESTIMATE_HINT, spendEstimateLabel, workDurationLabel } from '../lib/projectOverview';
+import { SPEND_ESTIMATE_HINT, spendEstimateLabel } from '../lib/projectOverview';
 import { shownName } from '../lib/daily';
 
 export type ThemeMode = 'light' | 'dark';
@@ -67,15 +66,7 @@ export function TopBar({
   const phase = teamPhase(work);
   const statusWords = workStatusLabel(work, locale);
   const activityAt = work.activityAt ?? snap.session.last_active;
-  const spendLabel = spendEstimateLabel({ spendUsd: snap.spend_usd ?? null, spendStatus: snap.spend_status }, locale === 'zh-CN');
-  // All live intervals reach read_at, so their union grows once per elapsed
-  // second, regardless of how many calls overlap. Reuse the reply's clock.
-  const elapsed = useElapsed(snap.daemon.calls?.length && snap.read_at != null ? snap.read_at / 1000 : null);
-  const duration = snap.usage_summary && <span data-work-duration title={locale === 'zh-CN'
-    ? '合并有用量记录及正在进行的调用区间；重叠只计一次，间歇不计；缺失时长的旧调用未计入。'
-    : 'Union of calls with usage records and calls in progress; overlaps count once, gaps and calls without durations add no time.'}>
-    {workDurationLabel(snap.usage_summary.work_duration_ms + Math.max(0, elapsed ?? 0) * 1000, locale === 'zh-CN', snap.usage_summary.calls_without_duration > 0)}
-  </span>;
+  const spendLabel = spendEstimateLabel({ spendUsd: snap.spend_usd ?? null, spendStatus: snap.spend_status }, locale === 'zh-CN', true);
   const healthTitle = snapshotStale
     ? t('common.stale')
     : streamOk
@@ -84,7 +75,7 @@ export function TopBar({
 
   return (
     <WorkspaceHeader className="project-header">
-      <h1 className="topbar-title min-w-0 truncate font-serif text-[19px] font-medium leading-6 tracking-[-0.005em] text-ink" title={title}>
+      <h1 className="topbar-title min-w-0 truncate text-[19px] font-semibold leading-6 tracking-[-0.015em] text-ink" title={title}>
         {title}
       </h1>
       <div className={showStatus ? "topbar-status min-w-0 items-center text-xs text-ink-faint" : "sr-only"} title={focus ? `${statusWords} · ${focus}` : statusWords}>
@@ -98,10 +89,8 @@ export function TopBar({
         <span role="status" className="topbar-work-status text-ink-dim">{statusWords}</span>
         {showStatus && activityAt ? <><span aria-hidden="true">·</span><time dateTime={new Date(activityAt * 1000).toISOString()}>{clockOf({ ts: activityAt })}</time></> : null}
         {showStatus && spendLabel ? <><span aria-hidden="true">·</span><span title={SPEND_ESTIMATE_HINT[locale === 'zh-CN' ? 'zh' : 'en']}>{spendLabel}</span></> : null}
-        {showStatus && duration}
         {showStatus && <div className="hidden sm:block"><SessionWorkdir session={snap.session} /></div>}
       </div>
-      {!showStatus && duration && <div className="topbar-duration text-xs text-ink-faint">{duration}</div>}
       <div className="topbar-actions flex shrink-0 items-center gap-2 sm:gap-3">
         {onOpenSessions ? (
           <button type="button" onClick={onOpenSessions} aria-label={t('topbar.openSessions')} className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-ink-faint hover:bg-bg hover:text-ink lg:hidden">
diff --git a/frontend/web/src/components/customerExperience.css b/frontend/web/src/components/customerExperience.css
index 21fd2c216..a097a0275 100644
--- a/frontend/web/src/components/customerExperience.css
+++ b/frontend/web/src/components/customerExperience.css
@@ -1,6 +1,6 @@
 .landing-page { position: relative; display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 16px; overflow-y: auto; padding: 56px 32px; text-align: center; }
 .landing-intro { display: flex; flex-direction: column; align-items: center; gap: 20px; --landing-mark-size: 48px; }
-.landing-intro h1 { color: rgb(var(--ink)); font-family: var(--font-serif); font-size: 30px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
+.landing-intro h1 { color: rgb(var(--ink)); font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
 .landing-composer { width: 100%; max-width: 680px; margin-top: 12px; text-align: left; }
 .landing-navigation { position: absolute; top: 12px; right: 16px; }
 .landing-caption { margin-top: 12px; color: rgb(var(--ink-faint)); font-size: 12px; line-height: 20px; text-align: center; }
@@ -10,13 +10,14 @@
 .landing-workdir input { flex: 0 1 320px; min-width: 0; border: 0; border-bottom: 1px dashed rgb(var(--field-line)); background: transparent; padding: 2px 0; color: rgb(var(--ink)); font: inherit; }
 .landing-workdir input::placeholder { color: rgb(var(--ink-faint)); }
 .landing-workdir input:focus { outline: none; border-bottom-style: solid; border-bottom-color: rgb(var(--accent)); }
-.chief-needs-list { display: grid; gap: 8px; margin-top: 20px; }
-.chief-need { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgb(var(--line)); border-radius: 10px; background: rgb(var(--panel)); font-size: 14px; cursor: pointer; }
-.chief-need-on { border-color: rgb(var(--ink-faint)); }
-.chief-need input { flex: none; }
-.chief-needs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; }
+.chief-needs-list { display: grid; margin-top: 28px; border-top: 1px solid rgb(var(--line)); }
+.chief-need { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--ink-faint)); font-size: 15px; cursor: pointer; transition: color 140ms ease; }
+.chief-need:hover, .chief-need-on { color: rgb(var(--ink)); }
+.chief-need input { flex: none; width: 16px; height: 16px; }
+.chief-needs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; }
 .chief-needs-row label { display: flex; align-items: center; gap: 8px; color: rgb(var(--ink-faint)); }
-.chief-needs-row input { padding: 6px 8px; border: 1px solid rgb(var(--line)); border-radius: 6px; background: rgb(var(--bg)); color: rgb(var(--ink)); }
+.chief-needs-row input { height: 40px; padding: 0 16px; border: 1px solid rgb(var(--line)); border-radius: 999px; background: rgb(var(--surface-2)); color: rgb(var(--ink)); outline: none; }
+.chief-needs-row input:focus { border-color: rgb(var(--ink-faint)); }
 .chief-needs-directions { flex: 1; min-width: 200px; }
 .landing-starters { width: 100%; max-width: 680px; margin-top: 16px; text-align: left; }
 .landing-starters h2 { padding: 0 12px; color: rgb(var(--ink-faint)); font-size: 12px; font-weight: 500; }
@@ -45,7 +46,11 @@
 .sidebar-project-filters { display: flex; gap: 16px; margin: 2px 16px 10px; padding: 0; border-bottom: 1px solid rgb(var(--line)); }
 .sidebar-project-filters button { min-width: 0; min-height: 28px; padding: 4px 0; margin-bottom: -1px; border-bottom: 1px solid transparent; color: rgb(var(--ink-faint)); font-size: 12px; transition: color 160ms ease, border-color 160ms ease; }
 .sidebar-project-filters button:hover { color: rgb(var(--ink-dim)); }
-.sidebar-project-filters button[aria-pressed="true"] { color: rgb(var(--ink)); border-bottom-color: rgb(var(--accent)); }
+.sidebar-project-filters button[aria-pressed="true"] { color: rgb(var(--ink)); border-bottom-color: rgb(var(--ink)); }
+.sidebar-project-filters .sidebar-trash { margin-left: auto; }
+.sidebar-new { display: inline-flex; height: 26px; align-items: center; padding: 0 12px; border: 1px solid rgb(var(--line)); border-radius: 999px; color: rgb(var(--ink)); font-size: 12px; transition: border-color 140ms ease; }
+.sidebar-new:hover { border-color: rgb(var(--ink-faint)); }
+.sidebar-new:disabled { opacity: .4; }
 .project-organization-menu { display: flex; flex-direction: column; gap: 2px; margin: 0 8px 8px; padding-top: 4px; border-top: 1px solid rgb(var(--line)); font-size: 13px; }
 .project-organization-menu button { min-height: var(--control-height); }
 .sidebar-footer { display: flex; flex-wrap: wrap; flex: none; align-items: center; justify-content: space-between; gap: 4px; min-height: 52px; padding: 8px 12px; border-top: 1px solid rgb(var(--line)); color: rgb(var(--ink-faint)); }
@@ -58,7 +63,9 @@
 @media (max-width: 600px) {
   .landing-page { justify-content: flex-start; gap: 16px; padding: 76px 20px 32px; }
   .landing-intro { gap: 16px; --landing-mark-size: 40px; }
-  .landing-intro h1 { font-size: 24px; }
+  .landing-intro h1 { font-size: 28px; }
+  .chief-needs-list { margin-top: 16px; }
+  .chief-need { min-height: 44px; font-size: 14px; }
   .landing-composer { margin-top: 4px; }
   .landing-starters { margin-top: 8px; }
   .starter-grid { grid-template-columns: 1fr; gap: 0; }
diff --git a/frontend/web/src/components/delivery.css b/frontend/web/src/components/delivery.css
index 29e5fafad..7d1177eda 100644
--- a/frontend/web/src/components/delivery.css
+++ b/frontend/web/src/components/delivery.css
@@ -2,7 +2,7 @@
 .delivery-heading { display: flex; align-items: center; gap: 12px; }
 .delivery-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(var(--line)); border-radius: 12px; color: rgb(var(--ink-dim)); background: var(--sheen-silver); }
 .delivery-heading p { font-size: 12px; color: rgb(var(--ink-faint)); }
-.delivery-heading h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; margin-top: 2px; }
+.delivery-heading h2 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; margin-top: 2px; }
 .delivery-return { margin-left: auto; align-self: flex-start; border: 1px solid transparent; border-radius: var(--radius-control); padding: 6px 10px; color: rgb(var(--ink-dim)); font-size: 13px; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
 .delivery-return:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
 .delivery-task-select { margin-top: 12px; max-width: 100%; font-size: 14px; border: 1px solid rgb(var(--line)); border-radius: var(--radius-control); padding: 5px 8px; background: rgb(var(--panel)); }
diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index b3062e414..ab1e48a32 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -2,112 +2,94 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Metal palette — silver, gold, white, black (design/intelligent-ui.md).
- * Token NAMES are shared with the map; values carry the palette. Gold marks
- * the person's own things and focus; Argus's things stay black and silver.
- * --blue is the text-safe gold kept under its historical name. */
+/* Monochrome: black, white and grays. Hierarchy comes from size, weight and
+ * space, not color. The only hue left is status: green while work runs, red on
+ * failure. Token names are shared with the map; accent/blue/gold are kept as
+ * aliases of ink so older class names stay monochrome. */
 :root {
   color-scheme: light;
-  --surface-0: 245 245 244;
+  --surface-0: 255 255 255;
   --surface-1: 255 255 255;
-  --surface-2: 238 239 240;
+  --surface-2: 245 245 245;
   --surface-3: 255 255 255;
   --bg: var(--surface-0);
   --surface: var(--surface-1);
   --panel: var(--surface-1);
   --panel-raised: var(--surface-3);
-  --line: 220 222 225;
-  --field-line: 167 172 179;
-  --silver: 195 199 204;
-  --ink: 14 14 16;
-  --ink-dim: 69 72 77;
-  --ink-faint: 102 106 113;
-  --accent: 176 141 60;
-  --accent-ink: 133 102 31;
-  --accent-hover: 111 84 25;
-  --blue: 133 102 31; /* = --accent-ink */
-  --blue-deep: 111 84 25;
-  --blue-sky: 133 102 31;
+  --line: 232 232 232;
+  --field-line: 212 212 212;
+  --silver: 196 196 196;
+  --ink: 10 10 10;
+  --ink-dim: 82 82 82;
+  --ink-faint: 112 112 112;
+  --accent: var(--ink);
+  --accent-ink: var(--ink);
+  --accent-hover: 64 64 64;
+  --blue: var(--ink);
+  --blue-deep: var(--accent-hover);
+  --blue-sky: var(--ink);
   --on-accent: 255 255 255;
-  --gold: var(--accent-ink); /* text-safe gold */
-  --gold-soft: var(--accent);
+  --gold: var(--ink);
+  --gold-soft: var(--ink-faint);
   --gold-deep: var(--accent-hover);
-  --ok: 31 32 35;
-  --warn: var(--accent-ink);
-  --err: 163 58 58;
-  /* Work under way is green, at a glance; gold stays the person's: a question waiting. */
+  --ok: var(--ink);
+  --warn: var(--ink);
+  --err: 200 50 50;
   --status-running: 22 163 74;
-  --status-waiting: var(--accent);
-  --status-done: 14 14 16;
-  --status-idle: 167 172 179;
-  --status-failed: 163 58 58;
-  --role-manager: 14 14 16;
-  --role-planner: 102 106 113;
-  --role-engineer: 176 141 60;
-  --role-reviewer: 133 102 31;
-  --conversation-user: 247 243 232;
+  --status-waiting: var(--ink);
+  --status-done: var(--ink);
+  --status-idle: var(--silver);
+  --status-failed: var(--err);
+  --role-manager: var(--ink);
+  --role-planner: var(--ink-faint);
+  --role-engineer: var(--ink-dim);
+  --role-reviewer: var(--ink-dim);
+  --conversation-user: 242 242 242;
   --conversation-argus: 255 255 255;
   --glass: 255 255 255;
   --glass-raised: 255 255 255;
-  --glass-edge: 220 222 225;
+  --glass-edge: var(--line);
   --chrome-surface: 255 255 255;
   --brand-body: 0 0 0;
   --brand-eye: 255 255 255;
   --brand-pupil: 0 0 0;
   --brand-highlight: 255 255 255;
-  --sheen-gold: linear-gradient(135deg, #d9c27a, #a9852f);
-  --sheen-silver: linear-gradient(180deg, #f7f8f9, #e4e6e9);
-  --shadow-lift: 0 1px 2px rgb(0 0 0 / 6%), 0 6px 20px rgb(0 0 0 / 6%);
-  --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, 'Noto Serif', serif;
-  --radius-sm: 6px;
-  --radius-control: 6px;
-  --radius-panel: 10px;
-  --radius-overlay: 14px;
-  --control-height: 32px;
+  --sheen-gold: rgb(var(--ink));
+  --sheen-silver: rgb(var(--surface-2));
+  --shadow-lift: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
+  --radius-sm: 8px;
+  --radius-control: 999px;
+  --radius-panel: 16px;
+  --radius-overlay: 20px;
+  --control-height: 34px;
 }
 
 :root[data-theme='dark'] {
   color-scheme: dark;
-  --surface-0: 12 12 13;
-  --surface-1: 21 21 23;
-  --surface-2: 30 30 33;
-  --surface-3: 28 28 31;
-  --line: 45 46 50;
-  --field-line: 92 95 101;
-  --silver: 120 124 130;
-  --ink: 242 242 240;
-  --ink-dim: 186 189 195;
-  --ink-faint: 142 146 152;
-  --accent: 212 184 102;
-  --accent-ink: 212 184 102;
-  --accent-hover: 226 202 128;
-  --blue: 212 184 102;
-  --blue-deep: 226 202 128;
-  --blue-sky: 212 184 102;
-  --on-accent: 12 12 13;
-  --ok: 242 242 240;
-  --err: 226 122 122;
+  --surface-0: 0 0 0;
+  --surface-1: 10 10 10;
+  --surface-2: 23 23 23;
+  --surface-3: 18 18 18;
+  --line: 38 38 38;
+  --field-line: 64 64 64;
+  --silver: 104 104 104;
+  --ink: 255 255 255;
+  --ink-dim: 181 181 181;
+  --ink-faint: 128 128 128;
+  --accent-hover: 214 214 214;
+  --on-accent: 0 0 0;
+  --err: 240 110 110;
   --status-running: 74 222 128;
-  --status-done: 242 242 240;
-  --status-idle: 110 114 120;
-  --status-failed: 226 122 122;
-  --role-manager: 242 242 240;
-  --role-planner: 142 146 152;
-  --role-engineer: 212 184 102;
-  --role-reviewer: 226 202 128;
-  --conversation-user: 38 34 24;
-  --conversation-argus: 21 21 23;
-  --glass: 21 21 23;
-  --glass-raised: 28 28 31;
-  --glass-edge: 45 46 50;
+  --conversation-user: 26 26 26;
+  --conversation-argus: 10 10 10;
+  --glass: 10 10 10;
+  --glass-raised: 18 18 18;
   --chrome-surface: var(--surface-1);
   --brand-body: 215 217 220;
   --brand-eye: 255 255 255;
   --brand-pupil: 32 35 38;
   --brand-highlight: 255 255 255;
-  --sheen-gold: linear-gradient(135deg, #e2ca80, #b8973f);
-  --sheen-silver: linear-gradient(180deg, #2a2b2f, #1e1f22);
-  --shadow-lift: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 30%);
+  --shadow-lift: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
   font-synthesis: none;
 }
 
@@ -121,6 +103,8 @@
   --ambient-gold: 212 184 102;
 }
 
+:root { accent-color: rgb(var(--ink)); }
+
 html,
 body,
 #root {
@@ -379,7 +363,7 @@ select optgroup {
   flex: none;
   padding: 24px 64px 16px 24px;
 }
-.modal-header h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 30px; letter-spacing: -.01em; }
+.modal-header h2 { font-size: 22px; font-weight: 600; line-height: 30px; letter-spacing: -.02em; }
 .modal-header p { margin-top: 6px; color: rgb(var(--ink-dim)); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
 
 :root[data-theme='dark'] .brand-modal {
@@ -920,7 +904,6 @@ button {
 .project-header .topbar-status > * { flex-shrink: 0; }
 .project-header .topbar-status > .topbar-work-status { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
 .project-header .topbar-actions { grid-column: 2; grid-row: 1; }
-.project-header .topbar-duration { grid-column: 1 / -1; grid-row: 2; }
 .task-expand::after { content: '⌄'; margin-left: 8px; color: rgb(var(--ink-faint)); }
 .task-expand[aria-expanded='true']::after { content: '⌃'; }
 .workspace-header + nav { border-bottom-color: rgb(var(--line)) !important; }
@@ -964,7 +947,7 @@ button {
   animation: conversation-enter 280ms cubic-bezier(.215, .61, .355, 1) both;
 }
 .conversation-row[data-operator='true'] { --conversation-enter-x: 12px; --conversation-enter-y: 0px; }
-.conversation-row .prose :is(h1, h2, h3) { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.005em; }
+.conversation-row .prose :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.015em; }
 
 /* A task in the conversation is one faint line that unfolds. */
 .task-line-row { padding: 6px 0; color: rgb(var(--ink-dim)); }
@@ -1005,7 +988,6 @@ button {
   margin-top: 4px;
   overflow: hidden;
   color: rgb(var(--ink));
-  font-family: var(--font-serif);
   font-size: 18px;
   font-weight: 500;
   line-height: 1.4;
diff --git a/frontend/web/src/test/core.test.ts b/frontend/web/src/test/core.test.ts
index 85953a23a..74b34c2ab 100644
--- a/frontend/web/src/test/core.test.ts
+++ b/frontend/web/src/test/core.test.ts
@@ -158,10 +158,10 @@ describe('shared frontend core', () => {
     expect(css).toContain('.role-log-group[data-open=\"true\"]');
   });
 
-  it('keeps light-theme blue info text at WCAG AA contrast', () => {
+  it('keeps light-theme faint text at WCAG AA contrast', () => {
     const css = fs.readFileSync(path.resolve('src/index.css'), 'utf8');
     const root = css.match(/:root\s*\{([\s\S]*?)\}/)?.[1] ?? '';
-    const channels = root.match(/--blue:\s*(\d+)\s+(\d+)\s+(\d+)/);
+    const channels = root.match(/--ink-faint:\s*(\d+)\s+(\d+)\s+(\d+)/);
     expect(channels).not.toBeNull();
     const relativeLuminance = (rgb: number[]) => {
       const linear = rgb.map((channel) => {
diff --git a/frontend/web/src/test/customerExperience.test.tsx b/frontend/web/src/test/customerExperience.test.tsx
index 9e36a36f1..e9b78d788 100644
--- a/frontend/web/src/test/customerExperience.test.tsx
+++ b/frontend/web/src/test/customerExperience.test.tsx
@@ -176,7 +176,6 @@ describe('project organization', () => {
     act(() => button('待跟进').props.onClick());
     expect(text(view.root)).toContain('Beta');
     expect(text(view.root)).not.toContain('Alpha');
-    expect(text(view.root)).toContain('你标记为待跟进的项目');
     act(() => manage('Beta').props.onClick({ stopPropagation: vi.fn() }));
     await act(async () => button('归档项目').props.onClick());
     expect(text(view.root)).not.toContain('Beta');
diff --git a/frontend/web/src/test/sidebar.test.ts b/frontend/web/src/test/sidebar.test.ts
index 5e1de7da9..f2699732e 100644
--- a/frontend/web/src/test/sidebar.test.ts
+++ b/frontend/web/src/test/sidebar.test.ts
@@ -60,12 +60,13 @@ function sidebarMarkup(
 }
 
 describe('Sidebar session identity and health', () => {
-  it('uses the same server preview for the project list and shows recorded-call costs and their total', () => {
+  it('uses the same server preview for the project list and shows only the total cost', () => {
     const markup = sidebarMarkup([
       { ...rows[0], last_message: 'Excel or CSV?', spend_usd: 1.25, spend_status: 'priced' },
       { ...rows[1], last_message: 'Model is unavailable', spend_usd: 2, spend_status: 'priced' },
     ]);
-    for (const text of ['Excel or CSV?', 'Model is unavailable', '≈$1.25', '≈$2.00', '≈$3.25', 'excludes calls in progress']) expect(markup).toContain(text);
+    for (const text of ['Excel or CSV?', 'Model is unavailable', '≈$3.25', 'Excludes calls in progress']) expect(markup).toContain(text);
+    expect(markup).not.toContain('≈$1.25');
     expect(markup).toContain('data-project-spend-total');
   });
 
@@ -77,9 +78,7 @@ describe('Sidebar session identity and health', () => {
     expect(spendEstimateLabel(projectSpendTotal([unknown]), false, true)).toBe('Unpriced');
     expect(projectSpendTotal([{ ...rows[0], spend_usd: null, spend_status: 'empty' }])).toEqual({ spendUsd: null, spendStatus: 'empty' });
     expect(projectSpendTotal([{ ...rows[0], spend_usd: 0, spend_status: 'priced' }, unknown])).toEqual({ spendUsd: null, spendStatus: 'partial' });
-    const markup = sidebarMarkup([{ ...rows[0], spend_usd: 0, spend_status: 'priced' }, unknown]);
-    expect(markup).toContain('≈$0.00');
-    expect(markup).toContain('Unpriced');
+    expect(sidebarMarkup([{ ...rows[0], spend_usd: 0, spend_status: 'priced' }, unknown])).toContain('Unpriced');
     expect(spendEstimateLabel({ spendUsd: 1.25, spendStatus: 'unpriced' }, false, true)).toBe('≥$1.25');
   });
   it('keeps stable identifiers in the tooltip when unnamed sessions would otherwise look identical', () => {
diff --git a/frontend/web/src/test/statusPresentation.test.tsx b/frontend/web/src/test/statusPresentation.test.tsx
index 8d8887dac..33c8c9a01 100644
--- a/frontend/web/src/test/statusPresentation.test.tsx
+++ b/frontend/web/src/test/statusPresentation.test.tsx
@@ -1,5 +1,4 @@
 import { fileURLToPath } from 'node:url';
-import { act, create, type ReactTestRenderer } from 'react-test-renderer';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { afterEach, expect, it, vi } from 'vitest';
 import type { NodeProps } from '@xyflow/react';
@@ -99,29 +98,3 @@ it.each(['p-c855623c', 'p-0444b8d3'])('%s uses Chinese status when supplemented
   expect(html).not.toContain(thought.text.slice(2, -2));
 });
 
-it('ticks live work once for overlapping calls and freezes on the completed server snapshot', () => {
-  vi.useFakeTimers();
-  const at = Date.now();
-  vi.setSystemTime(at);
-  const snap = snapshot(store, original, { since: at / 1000 - 12, requests: [], calls: [
-    { role: 'manager', task: undefined, started_ts: at / 1000 - 12 },
-    { role: 'engineer', task: 't1', started_ts: at / 1000 - 5 },
-  ] });
-  let view!: ReactTestRenderer;
-  const draw = (value: typeof snap) => <TopBar snap={value} streamOk onStart={vi.fn()} onStop={vi.fn()} onManage={vi.fn()} busy={false} />;
-  const duration = () => view.root.findByProps({ 'data-work-duration': true }).children.join('');
-  try {
-    act(() => { view = create(draw(snap)); });
-    expect(duration()).toBe('Worked 12s');
-    act(() => { vi.advanceTimersByTime(3000); });
-    expect(duration()).toBe('Worked 15s');
-    const done = { ...snap, read_at: at + 3000, daemon: { ...snap.daemon, calls: [] },
-      usage_summary: { ...snap.usage_summary!, work_duration_ms: 15000 } };
-    act(() => view.update(draw(done)));
-    act(() => { vi.advanceTimersByTime(10000); });
-    expect(duration()).toBe('Worked 15s');
-  } finally {
-    act(() => view?.unmount());
-    vi.useRealTimers();
-  }
-});
diff --git a/frontend/web/src/test/workspaceContext.test.tsx b/frontend/web/src/test/workspaceContext.test.tsx
index 8c133139a..33d2b82dd 100644
--- a/frontend/web/src/test/workspaceContext.test.tsx
+++ b/frontend/web/src/test/workspaceContext.test.tsx
@@ -46,7 +46,7 @@ describe('A3 snapshot-only session context', () => {
       expect(status).toContain(locale === 'zh-CN' ? '已停止' : 'Stopped');
       expect(status).toContain('<time dateTime="2026-10-29T13:25:26.648Z">13:25:26</time>');
       expect(status).not.toMatch(/小时前|ago/);
-      expect(status).toContain(locale === 'zh-CN' ? '估算 ≈$94.5（按 API 价）' : 'Est. ≈$94.5 (API prices)');
+      expect(status).toContain('≈$94.5');
       expect(status).not.toContain('truncate');
     }
     expect(fetch).not.toHaveBeenCalled();
@@ -57,8 +57,8 @@ describe('A3 snapshot-only session context', () => {
     const html = markup(topbar({ ...recorded, work_status: { ...recorded.work_status!, activityAt: null }, spend_usd: null, spend_status: 'unpriced' }));
     expect(html).toContain(new Date(recorded.session.last_active * 1000).toISOString());
     expect(html).not.toContain('Spent $');
-    expect(markup(topbar({ ...recorded, spend_usd: 0, spend_status: 'priced' }))).toContain('Est. ≈$0.00 (API prices)');
-    expect(markup(topbar({ ...recorded, spend_status: 'partial' }))).toContain('Est. ≥$94.5 (API prices)');
+    expect(markup(topbar({ ...recorded, spend_usd: 0, spend_status: 'priced' }))).toContain('≈$0.00');
+    expect(markup(topbar({ ...recorded, spend_status: 'partial' }))).toContain('≥$94.5');
   });
 
   it.each(['en', 'zh-CN'] as const)('shows the session directory in %s without requests', locale => {
diff --git a/frontend/web/tailwind.config.ts b/frontend/web/tailwind.config.ts
index 13150f424..acff1c6b9 100644
--- a/frontend/web/tailwind.config.ts
+++ b/frontend/web/tailwind.config.ts
@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss';
 
-/** Metal research-workbench tokens (silver, gold, white, black). Hierarchy comes
- * from type and space; gold marks focus and the person's own things. */
+/** Monochrome workbench tokens (see src/index.css). Hierarchy comes from type
+ * and space, not color. */
 export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   darkMode: 'class',
@@ -58,8 +58,7 @@ export default {
         },
       },
       fontFamily: {
-        sans: ['Geist Variable', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'ui-sans-serif', 'system-ui', 'sans-serif'],
-        serif: ['Source Serif 4', 'Source Serif Pro', 'Noto Serif SC', 'Songti SC', 'STSong', 'Georgia', 'Noto Serif', 'serif'],
+        sans: ['SF Pro Text', '-apple-system', 'BlinkMacSystemFont', 'Geist Variable', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'ui-sans-serif', 'system-ui', 'sans-serif'],
         mono: ['Geist Mono Variable', 'SFMono-Regular', 'Menlo', 'ui-monospace', 'monospace'],
       },
       borderRadius: { xl: '0.875rem' },

From 4b798062867d1da9118e1a452fd697aa39812ec2 Mon Sep 17 00:00:00 2001
From: lbx154 <145820328+lbx154@users.noreply.github.com>
Date: Tue, 3 Nov 2026 06:19:23 -0800
Subject: [PATCH 2/6] =?UTF-8?q?=E4=BE=A7=E6=A0=8F=E5=8F=AA=E7=95=99?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=EF=BC=9B=E6=88=90=E6=9E=9C=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E6=9B=B4=E5=83=8F=E6=88=90=E5=93=81=EF=BC=9B=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=A4=AD=E5=9C=86=E5=92=8C=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 侧栏删“本项目成果”（与顶部“成果与文件”重复）和“高级工具”折叠；技能库移到底栏，全局搜索变成项目行的图标
- 成果卡片：标题 22px 半粗，“打开”为黑色胶囊主按钮，文件名前不再加 ▦◧ 符号
- 示例任务卡片和多行输入框用面板圆角，不跟按钮一起变胶囊
- 新建页删“发送后自动建立项目……”说明

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/web/src/App.tsx                      | 10 ----
 frontend/web/src/components/EventStream.tsx   | 11 +----
 frontend/web/src/components/Landing.tsx       |  3 --
 frontend/web/src/components/Sidebar.tsx       | 49 ++++---------------
 .../web/src/components/customerExperience.css |  7 ++-
 frontend/web/src/components/experience.css    |  4 +-
 frontend/web/src/index.css                    | 22 ++++-----
 .../web/src/test/sessionContextApp.test.tsx   | 12 +----
 .../web/src/test/sidebarResources.test.tsx    | 40 ++++-----------
 frontend/web/src/test/uxRound3.test.tsx       |  1 -
 10 files changed, 38 insertions(+), 121 deletions(-)

diff --git a/frontend/web/src/App.tsx b/frontend/web/src/App.tsx
index 379a89282..608fcdd4e 100644
--- a/frontend/web/src/App.tsx
+++ b/frontend/web/src/App.tsx
@@ -883,16 +883,6 @@ export default function App() {
           onManage={requestManageSession}
           onOpenPanel={(panel) => setOverlay(panel)}
           onOpenLearning={openLearningLibrary}
-          onOpenResults={() => {
-            const selection = defaultDeliverySelection(deliveryHistory);
-            if (selection) openDelivery(selection.receipt, selection.path);
-            else {
-              setPreviewPathRequest(current => ({ path: FILES_PATH, token: current.token + 1 }));
-              openPreview();
-            }
-            setSidebarOpen(false);
-          }}
-          resultsCount={deliveryCount}
           onNew={() => { startNewSession(); setSidebarOpen(false); }}
           onSearch={() => setSearchOpen(true)}
           // The trial portal owns sign-in; a token kept here is this browser's own.
diff --git a/frontend/web/src/components/EventStream.tsx b/frontend/web/src/components/EventStream.tsx
index b5a42c9b7..83200af48 100644
--- a/frontend/web/src/components/EventStream.tsx
+++ b/frontend/web/src/components/EventStream.tsx
@@ -622,15 +622,6 @@ export function latestConversationDelivery(
   return undefined;
 }
 
-function fileGlyph(path: string): string {
-  const ext = path.split('.').pop()?.toLowerCase() ?? '';
-  if (['csv', 'tsv', 'xlsx', 'xls', 'parquet'].includes(ext)) return '▦';
-  if (modelFormat(path)) return '◇';
-  if (ext === 'pdf') return '◧';
-  if (['py', 'ts', 'tsx', 'js', 'sh', 'r', 'ipynb', 'json', 'yaml', 'yml'].includes(ext)) return '‹›';
-  return '▤';
-}
-
 /**
  * A delivered result in the conversation, shown as itself: a picture shows the
  * picture, files show as files. "Open" leads to the result; the process behind
@@ -683,7 +674,7 @@ function DeliveryCard({
         <p className="text-xs text-ink-faint">{deliveryTimeLabel(delivery, zh)}</p>
         {listed.length ? <ul className="result-card-files">
           {listed.map(file => <li key={file.path} title={file.path}>
-            <span aria-hidden="true">{fileGlyph(file.path)}</span>{file.label || file.path.split('/').pop()}
+            {file.label || file.path.split('/').pop()}
           </li>)}
           {others.length > listed.length ? <li className="text-ink-faint">{zh ? `另有 ${others.length - listed.length} 个文件` : `${others.length - listed.length} more files`}</li> : null}
         </ul> : null}
diff --git a/frontend/web/src/components/Landing.tsx b/frontend/web/src/components/Landing.tsx
index 011a8c582..c450b09b3 100644
--- a/frontend/web/src/components/Landing.tsx
+++ b/frontend/web/src/components/Landing.tsx
@@ -80,9 +80,6 @@ export function Landing({
             return accepted;
           }} disabled={creating} pending={false} focusSignal={focusSignal}
           completionSelection={completionSelection} onCompletionSelectionChange={setCompletionSelection} />
-        <p className="landing-caption">{locale === 'zh-CN'
-          ? '发送后自动建立项目；团队干活时也可以随时说话。'
-          : 'Sending creates a project. You can write at any time while the team works.'}</p>
         <label className="landing-workdir">
           <span>{locale === 'zh-CN' ? '工作目录' : 'Folder'}</span>
           <input value={workdir} onChange={event => { setWorkdir(event.target.value); onWorkdirChange?.(); }} list="landing-workdirs" disabled={creating}
diff --git a/frontend/web/src/components/Sidebar.tsx b/frontend/web/src/components/Sidebar.tsx
index 389cfca74..e92921af2 100644
--- a/frontend/web/src/components/Sidebar.tsx
+++ b/frontend/web/src/components/Sidebar.tsx
@@ -10,13 +10,12 @@ import { errorText, shortcut } from '../lib/format';
 import { filterProjects } from '../../../core/src/projects';
 import type { ThemeMode } from './TopBar';
 import { useI18n } from '../i18n';
-import { Archive, ChevronDown, ChevronRight, Folder, MoreHorizontal, PackageCheck, PanelLeftClose, PanelLeftOpen, Pin, Flag, Search, Settings, LogOut, Clock } from 'lucide-react';
+import { Archive, ChevronDown, Folder, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Pin, Flag, Search, Settings, LogOut, Clock, BookOpen } from 'lucide-react';
 import { dailyText, localTime, shownName, utcTime } from '../lib/daily';
-import { readLocalStorage, writeLocalStorage } from '../lib/storage';
+import { writeLocalStorage } from '../lib/storage';
 import { SETTINGS_CAPABILITY, useCapability } from '../lib/capabilities';
 import { projectSpendTotal, SPEND_ESTIMATE_HINT, spendEstimateLabel } from '../lib/projectOverview';
 
-const ADVANCED_KEY = 'argus.sidebar.advanced.v1';
 
 type Scope = 'local' | 'all';
 const rankChiefFirst = (rows: ProjectRow[]): ProjectRow[] => [...rows.filter(row => row.chief), ...rows.filter(row => !row.chief)];
@@ -70,8 +69,6 @@ export function Sidebar({
   onManage,
   onOpenPanel,
   onOpenLearning,
-  onOpenResults,
-  resultsCount = 0,
   onNew,
   onSearch,
   onOpenTrash,
@@ -98,8 +95,6 @@ export function Sidebar({
   onOpenPanel: (p: 'config') => void;
   onOpenLearning?: (scope: LearningScope) => void;
   /** Opens the current project's delivered results. */
-  onOpenResults?: () => void;
-  resultsCount?: number;
   onNew: () => void;
   onSearch?: () => void;
   onOpenTrash?: () => void;
@@ -142,16 +137,9 @@ export function Sidebar({
   const [settingsHint, setSettingsHint] = useState(false);
   const settings = useCapability(SETTINGS_CAPABILITY);
   const zh = locale === 'zh-CN';
-  // The skill library is under Advanced.
-  const [advancedOpen, setAdvancedOpen] = useState(() => readLocalStorage(ADVANCED_KEY) === 'open');
-  const toggleAdvanced = () => setAdvancedOpen((open) => { writeLocalStorage(ADVANCED_KEY, open ? 'closed' : 'open'); return !open; });
   const openKnowledge = onOpenLearning;
-  const resultsLabel = zh ? '本项目成果' : 'This project’s results';
   const spendHint = `${SPEND_ESTIMATE_HINT[zh ? 'zh' : 'en']} ${zh ? '不含进行中的调用。' : 'Excludes calls in progress.'}`;
   const totalSpend = spendEstimateLabel(projectSpendTotal(projects), zh, true) || '—';
-  const resultsTitle = !activeId ? (zh ? '先选择一个项目' : 'Select a project first')
-    : resultsCount ? (zh ? '查看本项目已交付的成果' : 'Open results delivered in this project')
-      : (zh ? '这个项目还没有交付成果' : 'No results delivered in this project yet');
   const preference = (id: string) => organization.values[id] ?? DEFAULT_PREFERENCE;
   useEffect(() => {
     const focus = () => setSyncAttempt(value => value + 1);
@@ -278,34 +266,9 @@ export function Sidebar({
         </div>
       ) : null}
 
-      {slim && onOpenResults ? <button type="button" onClick={onOpenResults} disabled={!resultsCount} aria-label={resultsLabel} title={resultsTitle} data-sidebar-results
-        className="relative mx-auto my-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-ink-dim hover:bg-bg hover:text-ink disabled:opacity-40">
-        <PackageCheck size={17} strokeWidth={1.5} />{resultsCount ? <span className="absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-accent" aria-hidden="true" /> : null}
-      </button> : null}
       {slim && openKnowledge ? <LearningLibraryEntry onOpen={openKnowledge} compact /> : null}
       {!slim ? (
         <>
-          <nav aria-label={locale === 'zh-CN' ? '成果与工具' : 'Results and tools'} data-sidebar-resources
-            className="shrink-0 overflow-y-auto overscroll-contain border-b border-line/50 px-2 py-2 scroll-thin [&>section]:mx-2 [&>section]:border-0 [&>section]:py-0 [&>section>div>button:first-child]:px-3"
-            style={{ maxHeight: 'min(40dvh, 360px)' }}>
-            {onOpenResults ? <button type="button" onClick={onOpenResults} disabled={!resultsCount} title={resultsTitle} data-sidebar-results
-              className="mx-2 my-1 flex h-9 w-[calc(100%-1rem)] shrink-0 items-center gap-2 rounded-md px-3 text-sm text-ink-dim transition-colors hover:bg-bg hover:text-ink disabled:opacity-50 disabled:hover:bg-transparent">
-              <PackageCheck size={17} strokeWidth={1.5} /><span>{resultsLabel}</span>
-            </button> : null}
-            <button type="button" onClick={toggleAdvanced} aria-expanded={advancedOpen} data-sidebar-advanced
-              title={zh ? '技能库' : 'Skill library'}
-              className="mx-2 my-1 flex h-8 w-[calc(100%-1rem)] shrink-0 items-center gap-2 rounded-md px-3 text-xs text-ink-faint hover:bg-bg hover:text-ink-dim">
-              <ChevronRight size={13} className={`transition-transform ${advancedOpen ? 'rotate-90' : ''}`} />
-              <span>{zh ? '高级工具' : 'Advanced tools'}</span>
-            </button>
-            {advancedOpen ? <>
-              {openKnowledge && <LearningLibraryEntry onOpen={openKnowledge} />}
-            </> : null}
-          </nav>
-          {onSearch && <button type="button" onClick={onSearch}
-            className="sidebar-global-search">
-            <Search size={16} />{zh ? '搜索历史与成果' : 'Search history and results'}
-          </button>}
           <div className="flex shrink-0 items-center gap-2 px-4 pb-1 pt-3">
             <span className="text-xs font-medium text-ink-faint">{locale === 'zh-CN' ? '项目' : 'Projects'}</span>
             <span data-project-spend-total className="text-[11px] tabular-nums text-ink-faint" title={spendHint}
@@ -313,12 +276,15 @@ export function Sidebar({
             {localProjects.length > 0 && localProjects.length < projects.length ? <select aria-label={locale === 'zh-CN' ? '项目范围' : 'Project scope'} value={scope} onChange={event => setScope(event.target.value as Scope)} className="min-w-0 bg-transparent text-xs text-ink-faint">
               <option value="local">{t('common.local')}</option><option value="all">{t('common.all')}</option>
             </select> : null}
+            {onSearch && <button type="button" onClick={onSearch} className="sidebar-search ml-auto" aria-label={zh ? '搜索历史与成果' : 'Search history and results'} title={zh ? '搜索历史与成果' : 'Search history and results'}>
+              <Search size={15} />
+            </button>}
             <button
               type="button"
               onClick={onNew}
               disabled={creating}
               title={t('sidebar.create')}
-              className="sidebar-new ml-auto"
+              className={onSearch ? 'sidebar-new' : 'sidebar-new ml-auto'}
             >
               {creating ? '…' : locale === 'zh-CN' ? '新建' : 'New'}
             </button>
@@ -470,6 +436,9 @@ export function Sidebar({
             {settings && <button type="button" onClick={() => activeId ? onOpenPanel('config') : setSettingsHint(true)} className="icon-control flex h-8 items-center gap-2 px-2 text-xs" aria-label={t('sidebar.openSettings')} title={zh ? '项目设置' : 'Project settings'}>
               <Settings size={15} />{zh ? '设置' : 'Settings'}
             </button>}
+            {openKnowledge && <button type="button" onClick={() => openKnowledge('feed')} className="icon-control flex h-8 items-center gap-2 px-2 text-xs" aria-label={zh ? '技能库' : 'Skill library'}>
+              <BookOpen size={15} />{zh ? '技能库' : 'Skill library'}
+            </button>}
             <details className="sidebar-more">
               <summary className="icon-control flex h-8 w-8 items-center justify-center" aria-label={zh ? '更多' : 'More'} title={zh ? '语言、外观与登录' : 'Language, appearance and sign-in'}>
                 <span aria-hidden="true" className="tracking-[0.12em]">···</span>
diff --git a/frontend/web/src/components/customerExperience.css b/frontend/web/src/components/customerExperience.css
index a097a0275..6b3253e28 100644
--- a/frontend/web/src/components/customerExperience.css
+++ b/frontend/web/src/components/customerExperience.css
@@ -3,7 +3,6 @@
 .landing-intro h1 { color: rgb(var(--ink)); font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
 .landing-composer { width: 100%; max-width: 680px; margin-top: 12px; text-align: left; }
 .landing-navigation { position: absolute; top: 12px; right: 16px; }
-.landing-caption { margin-top: 12px; color: rgb(var(--ink-faint)); font-size: 12px; line-height: 20px; text-align: center; }
 /* Where the project works: a new folder unless the operator names one on the server. */
 .landing-workdir { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; color: rgb(var(--ink-faint)); font-size: 12px; line-height: 20px; }
 .landing-workdir span { flex: none; }
@@ -22,7 +21,7 @@
 .landing-starters { width: 100%; max-width: 680px; margin-top: 16px; text-align: left; }
 .landing-starters h2 { padding: 0 12px; color: rgb(var(--ink-faint)); font-size: 12px; font-weight: 500; }
 .starter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 8px; }
-.starter-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; color: rgb(var(--ink-dim)); transition: background-color 150ms; }
+.starter-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 0; border-radius: var(--radius-panel); background: transparent; text-align: left; color: rgb(var(--ink-dim)); transition: background-color 150ms; }
 .starter-card:hover { background: rgb(var(--surface-2)); }
 .starter-card:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; }
 .starter-card:disabled { opacity: .5; cursor: wait; }
@@ -39,8 +38,6 @@
 .file-browser button:hover { background: rgb(var(--surface-2)); }
 .file-browser strong { display: block; overflow-wrap: anywhere; color: rgb(var(--ink)); font-size: 14px; }
 .file-browser small { display: block; overflow-wrap: anywhere; color: rgb(var(--ink-faint)); margin-top: 4px; font-size: 12px; }
-.sidebar-global-search { display: flex; flex: none; align-items: center; gap: 10px; min-height: var(--control-height); margin: 12px 12px 0; padding: 8px 12px; border-radius: var(--radius-control); color: rgb(var(--ink-dim)); font-size: 14px; text-align: left; }
-.sidebar-global-search:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
 .sidebar-project-search { display: flex; align-items: center; gap: 8px; border: 1px solid rgb(var(--line)); border-radius: var(--radius-control); padding: 0 8px; background: rgb(var(--surface)); transition: border-color 160ms ease; }
 .sidebar-project-search:focus-within { border-color: rgb(var(--accent)); }
 .sidebar-project-filters { display: flex; gap: 16px; margin: 2px 16px 10px; padding: 0; border-bottom: 1px solid rgb(var(--line)); }
@@ -51,6 +48,8 @@
 .sidebar-new { display: inline-flex; height: 26px; align-items: center; padding: 0 12px; border: 1px solid rgb(var(--line)); border-radius: 999px; color: rgb(var(--ink)); font-size: 12px; transition: border-color 140ms ease; }
 .sidebar-new:hover { border-color: rgb(var(--ink-faint)); }
 .sidebar-new:disabled { opacity: .4; }
+.sidebar-search { display: inline-flex; width: 28px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; color: rgb(var(--ink-dim)); }
+.sidebar-search:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
 .project-organization-menu { display: flex; flex-direction: column; gap: 2px; margin: 0 8px 8px; padding-top: 4px; border-top: 1px solid rgb(var(--line)); font-size: 13px; }
 .project-organization-menu button { min-height: var(--control-height); }
 .sidebar-footer { display: flex; flex-wrap: wrap; flex: none; align-items: center; justify-content: space-between; gap: 4px; min-height: 52px; padding: 8px 12px; border-top: 1px solid rgb(var(--line)); color: rgb(var(--ink-faint)); }
diff --git a/frontend/web/src/components/experience.css b/frontend/web/src/components/experience.css
index a73aaea66..99d713792 100644
--- a/frontend/web/src/components/experience.css
+++ b/frontend/web/src/components/experience.css
@@ -3,7 +3,7 @@
 .experience-panel label { display: flex; flex-direction: column; gap: 8px; }
 .experience-panel .brand-button { align-self: flex-start; }
 .experience-input, .experience-select {
-  min-width: 0; border: 1px solid rgb(var(--field-line)); border-radius: var(--radius-control);
+  min-width: 0; border: 1px solid rgb(var(--field-line)); border-radius: 12px;
   background: rgb(var(--surface)); color: rgb(var(--ink)); font-size: 14px; line-height: 22px;
 }
 .experience-input { width: 100%; padding: 10px 12px; }
@@ -45,7 +45,7 @@
 .edition-pane { display: flex; flex-shrink: 0; min-width: 0; flex-direction: column; }
 .edition-pane textarea, .edition-pane pre, .edition-preview, .edition-note {
   width: 100%; height: clamp(280px, 42dvh, 440px); min-height: 280px; overflow: auto; padding: 16px;
-  border: 1px solid rgb(var(--field-line)); border-radius: var(--radius-control);
+  border: 1px solid rgb(var(--field-line)); border-radius: var(--radius-panel);
   background: rgb(var(--surface)); color: rgb(var(--ink)); overflow-wrap: anywhere;
 }
 .edition-pane textarea, .edition-pane pre { font: 13px/1.75 'Geist Mono Variable', ui-monospace, monospace; white-space: pre-wrap; }
diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index ab1e48a32..f0845b289 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -969,35 +969,34 @@ button {
   background: rgb(var(--surface));
   transition: box-shadow 180ms ease, border-color 180ms ease;
 }
-.result-card:hover { border-color: rgb(var(--silver)); box-shadow: var(--shadow-lift); }
+.result-card:hover { border-color: rgb(var(--silver)); }
 .result-card-preview {
   display: flex;
   justify-content: center;
   padding: 16px;
-  border-bottom: 1px solid rgb(var(--line));
-  background: rgb(var(--surface-2) / 55%);
+  background: rgb(var(--surface-2));
 }
 .result-card-preview[data-delivery-thumbnail] { aspect-ratio: 16 / 9; align-items: center; }
 .result-card-preview[data-delivery-thumbnail] > button { width: 100%; height: 100%; }
 .result-card-preview[data-delivery-thumbnail] img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 .result-card-preview img { border-radius: var(--radius-sm); cursor: zoom-in; }
 .result-card-model { display: block; padding: 10px; }
-.result-card-body { padding: 14px 18px 12px; }
+.result-card-body { padding: 20px 24px 22px; }
 .result-card-kind { display: flex; align-items: center; gap: 8px; color: rgb(var(--ink-faint)); font-size: 12px; }
 .result-card-title {
-  margin-top: 4px;
+  margin-top: 6px;
   overflow: hidden;
   color: rgb(var(--ink));
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.4;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -.02em;
+  line-height: 1.3;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .result-card-files { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: rgb(var(--ink-dim)); font-size: 13px; }
 .result-card-files li { display: flex; min-width: 0; align-items: center; gap: 6px; }
-.result-card-files li > span { color: rgb(var(--ink-faint)); font-size: 11px; }
-.result-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 0; }
+.result-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 16px 0 0; }
 .result-card-actions button {
   min-height: 30px;
   border-radius: var(--radius-control);
@@ -1008,7 +1007,8 @@ button {
 }
 .result-card-actions button:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
 /* Opening the result is the card's one action, and looks like a button. */
-.result-card-actions .result-card-open { border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); font-weight: 500; padding-inline: 16px; }
+.result-card-actions .result-card-open { min-height: 34px; background: rgb(var(--ink)); color: rgb(var(--on-accent)); font-weight: 500; padding-inline: 20px; }
+.result-card-actions .result-card-open:hover { background: rgb(var(--accent-hover)); color: rgb(var(--on-accent)); }
 @media (max-width: 640px), (pointer: coarse) {
   .result-card-actions button, .chat-context-tools button, .task-line-action { min-height: 44px; }
   .chat-context { padding: 8px 16px 6px; align-items: center; }
diff --git a/frontend/web/src/test/sessionContextApp.test.tsx b/frontend/web/src/test/sessionContextApp.test.tsx
index 5f1e07b05..1ef6c4e54 100644
--- a/frontend/web/src/test/sessionContextApp.test.tsx
+++ b/frontend/web/src/test/sessionContextApp.test.tsx
@@ -342,7 +342,7 @@ describe('App session composer ownership', () => {
     act(() => renderer.root.findByType(Sidebar).props.onNew());
     expect(document.title).toBe('Argus');
   });
-  it('counts deliveries once for the sidebar and map, keeping the latest delivery as the sidebar target', () => {
+  it('counts deliveries once for the map and keeps files reachable from the results entry', () => {
     fixture.artifacts = [{ path: 'report.md', name: 'report.md', kind: 'markdown', source: 'delivery' },
       { path: 'data.csv', name: 'data.csv', kind: 'table', source: 'delivery' }] as never[];
     fixture.turns = [1, 2, 3].map(n => ({ type: 'ui.argus', ts: n, event_id: n, delivery: {
@@ -351,24 +351,16 @@ describe('App session composer ownership', () => {
       targets: fixture.artifacts.map((file: { path: string }) => ({ path: file.path, label: file.path, source: 'manager' })), primary_target: null,
     } }));
     refresh();
-    expect(renderer.root.findByType(Sidebar).props.resultsCount).toBe(3);
     act(() => renderer.root.findAll(node => node.props.className === 'workspace-tab')[1].props.onClick());
     expect(renderer.root.findByType(MapPanel).props.deliveryCount).toBe(3);
     act(() => renderer.root.findAll(node => node.props.className === 'workspace-tab')[0].props.onClick());
-    act(() => renderer.root.findByType(Sidebar).props.onOpenResults());
-    const deliveryModal = renderer.root.findAllByType(ArtifactModal).find(node => node.props.delivery)!;
-    expect(deliveryModal.props.delivery.delivery_id).toBe('d3');
-    act(() => deliveryModal.props.onClose());
     act(() => renderer.root.find(node => node.type === 'button' && node.children.includes('Results & files')).props.onClick());
     expect(renderer.root.findByType(ResearchCanvas).props.artifacts).toHaveLength(2);
   });
-  it('counts zero before any delivery exists and keeps files accessible from the file entry', () => {
+  it('keeps files accessible from the file entry before any delivery exists', () => {
     fixture.artifacts = [{ path: 'draft.md', name: 'draft.md', kind: 'markdown' }] as never[];
     refresh();
-    const sidebar = renderer.root.findByType(Sidebar);
-    expect(sidebar.props.resultsCount).toBe(0);
     expect(renderer.root.findAllByType(ResearchCanvas)).toHaveLength(0);
-    expect(renderer.root.findAll(node => node.type === 'button' && node.props['data-sidebar-results'] !== undefined).every(node => node.props.disabled)).toBe(true);
     act(() => renderer.root.find(node => node.type === 'button' && node.children.includes('Results & files')).props.onClick());
     const canvas = renderer.root.findByType(ResearchCanvas);
     expect(canvas.props.requestedPath).toBe('__argus_files__');
diff --git a/frontend/web/src/test/sidebarResources.test.tsx b/frontend/web/src/test/sidebarResources.test.tsx
index 1826dd27e..75c39acbc 100644
--- a/frontend/web/src/test/sidebarResources.test.tsx
+++ b/frontend/web/src/test/sidebarResources.test.tsx
@@ -9,7 +9,7 @@ const props = {
   projects: [{ id: 's-A', label: 'Synthetic session A', display_name: 'Synthetic session A',
     last_active: 1, daemon_alive: false, daemon_pid: null, workdir: '/synthetic' }],
   activeId: 's-A', localCwd: '/synthetic', onSelect: vi.fn(), onManage: vi.fn(), onOpenPanel: vi.fn(),
-  onOpenLearning: vi.fn(), onOpenResults: vi.fn(), resultsCount: 2, onNew: vi.fn(), loading: false,
+  onOpenLearning: vi.fn(), onSearch: vi.fn(), onNew: vi.fn(), loading: false,
   onToggleCollapse: vi.fn(), themeMode: 'light' as const, onCycleTheme: vi.fn(),
 };
 function markup(collapsed = false) {
@@ -18,40 +18,20 @@ function markup(collapsed = false) {
   finally { client.clear(); }
 }
 describe('top resource navigation', () => {
-  it('puts Results first and folds skills under Advanced', () => {
+  it('starts with the projects: search and new on one row, skills and settings at the bottom', () => {
     const html = markup();
-    expect(html.indexOf('data-sidebar-resources')).toBeGreaterThan(0);
-    expect(html).toContain('data-sidebar-results');
-    expect(html).toContain('This project’s results');
-    expect(html).not.toContain('>2</span>');
-    expect(html.indexOf('data-sidebar-results')).toBeLessThan(html.indexOf('id="daemon-search"'));
-    expect(html).toContain('aria-expanded="false"');
-    for (const label of ['aria-label="Plugins"', 'aria-label="Skill library"']) {
-      expect(html).not.toContain(label);
-    }
+    expect(html).not.toContain('data-sidebar-results');
+    expect(html).not.toContain('data-sidebar-advanced');
+    expect(html.indexOf('aria-label="Search history and results"')).toBeLessThan(html.indexOf('id="daemon-search"'));
+    expect(html.split('aria-label="Skill library"')).toHaveLength(2);
+    expect(html.indexOf('aria-label="Skill library"')).toBeGreaterThan(html.indexOf('Synthetic session A'));
     expect(html.indexOf('aria-label="Open settings"')).toBeGreaterThan(html.indexOf('Synthetic session A'));
+    expect(html).not.toContain('aria-label="Plugins"');
   });
-  it('shows the advanced entries above project search once opened', () => {
-    vi.stubGlobal('localStorage', { getItem: (key: string) => key === 'argus.sidebar.advanced.v1' ? 'open' : null, setItem: vi.fn(), removeItem: vi.fn() });
-    try {
-      const html = markup();
-      const labels = ['aria-label="Skill library"'];
-      for (const label of labels) {
-        expect(html).toContain(label);
-        expect(html.indexOf(label)).toBeLessThan(html.indexOf('id="daemon-search"'));
-        expect(html.split(label)).toHaveLength(2);
-      }
-      expect(labels.map(label => html.indexOf(label))).toEqual(labels.map(label => html.indexOf(label)).sort((a, b) => a - b));
-      expect(html).not.toContain('aria-label="Learning feed"');
-      expect(html).not.toContain('aria-label="Plugins"');
-    } finally { vi.unstubAllGlobals(); }
-  });
-  it('keeps a compact entry rail with Results and skills', () => {
+  it('keeps a compact entry rail with skills', () => {
     const html = markup(true);
     expect(html).toContain('aria-label="Expand projects"');
-    const labels = ['aria-label="This project’s results"', 'aria-label="Skill library"'];
-    for (const label of labels) expect(html).toContain(label);
-    expect(labels.map(label => html.indexOf(label))).toEqual(labels.map(label => html.indexOf(label)).sort((a, b) => a - b));
+    expect(html).toContain('aria-label="Skill library"');
     expect(html).not.toContain('id="daemon-search"');
   });
   it.each([false, true])('opens the learning feed from the sidebar entry (compact=%s)', (compact) => {
diff --git a/frontend/web/src/test/uxRound3.test.tsx b/frontend/web/src/test/uxRound3.test.tsx
index 714538f58..55c79a1c7 100644
--- a/frontend/web/src/test/uxRound3.test.tsx
+++ b/frontend/web/src/test/uxRound3.test.tsx
@@ -21,7 +21,6 @@ describe('attachments a researcher actually has', () => {
 
 describe('sidebar skill entry', () => {
   it('opens everything the library holds instead of the raw learning feed', async () => {
-    vi.stubGlobal('localStorage', { getItem: (key: string) => key === 'argus.sidebar.advanced.v1' ? 'open' : null, setItem: vi.fn(), removeItem: vi.fn() });
     vi.stubGlobal('window', new EventTarget());
     vi.spyOn(api, 'organization').mockResolvedValue({ value: {}, revision: 0 });
     const onOpenLearning = vi.fn();

From d82bf4fcbc6d7da587d5d50e9006ad135ae4df19 Mon Sep 17 00:00:00 2001
From: lbx154 <145820328+lbx154@users.noreply.github.com>
Date: Tue, 3 Nov 2026 06:23:38 -0800
Subject: [PATCH 3/6] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E5=8C=BA=E7=95=99=E7=99=BD=E3=80=81=E5=9B=9E=E5=A4=8D=E6=AD=A3?=
 =?UTF-8?q?=E6=96=87=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶部更高（72px），标题 20px，状态行与标签间距加大；标签选中线 2px 黑
- 右上角和侧栏底部的 ··· 改为图标，不再靠字间距拼点
- 回复里的标题 22/18/15px 半粗，段落行高 1.75，列表圆点改灰

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/web/src/App.tsx                        |  2 +-
 frontend/web/src/components/MarkdownContent.tsx |  8 ++++----
 frontend/web/src/components/Sidebar.tsx         |  2 +-
 frontend/web/src/components/TopBar.tsx          |  7 ++++---
 frontend/web/src/index.css                      | 13 +++++++------
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/web/src/App.tsx b/frontend/web/src/App.tsx
index 608fcdd4e..6e8273d19 100644
--- a/frontend/web/src/App.tsx
+++ b/frontend/web/src/App.tsx
@@ -922,7 +922,7 @@ export default function App() {
                 snapshotStale={snapQ.isError}
                 readOnly={kiosk}
               /> : <WorkspaceHeader className="project-header">
-                <div className="topbar-title min-w-0 truncate text-[19px] font-semibold leading-6 text-ink">
+                <div className="topbar-title min-w-0 truncate text-[20px] font-semibold leading-7 text-ink">
                   {shownName(projects.find(project => project.id === activeSid) ?? {}, locale === 'zh-CN', t('sidebar.unnamedSession'))}
                 </div>
               </WorkspaceHeader>}
diff --git a/frontend/web/src/components/MarkdownContent.tsx b/frontend/web/src/components/MarkdownContent.tsx
index b234d3f1b..fa99a97ef 100644
--- a/frontend/web/src/components/MarkdownContent.tsx
+++ b/frontend/web/src/components/MarkdownContent.tsx
@@ -154,10 +154,10 @@ export function MarkdownContent({
   live.current = { artifacts, onOpenArtifact, basePath, sid, delivery, locale, t };
   const rehypePlugins = useMemo(() => markdownRehypePlugins(locale === 'zh-CN'), [locale]);
   const components = useMemo((): Components => ({
-    h1: ({ children: value }) => <h1 className="mb-2 mt-3 text-base font-semibold text-ink first:mt-0">{value}</h1>,
-    h2: ({ children: value }) => <h2 className="mb-1.5 mt-3 text-sm font-semibold text-ink first:mt-0">{value}</h2>,
-    h3: ({ children: value }) => <h3 className="mb-1 mt-2 text-sm font-medium text-ink first:mt-0">{value}</h3>,
-    p: ({ children: value }) => <p className="my-1.5 whitespace-pre-wrap break-words leading-[1.625] first:mt-0 last:mb-0">{value}</p>,
+    h1: ({ children: value }) => <h1 className="mb-3 mt-6 text-[22px] font-semibold leading-snug tracking-[-0.02em] text-ink first:mt-0">{value}</h1>,
+    h2: ({ children: value }) => <h2 className="mb-2 mt-5 text-lg font-semibold leading-snug tracking-[-0.015em] text-ink first:mt-0">{value}</h2>,
+    h3: ({ children: value }) => <h3 className="mb-1.5 mt-4 text-[15px] font-semibold text-ink first:mt-0">{value}</h3>,
+    p: ({ children: value }) => <p className="my-2.5 whitespace-pre-wrap break-words leading-[1.75] first:mt-0 last:mb-0">{value}</p>,
     ul: ({ children: value }) => <ul className="my-2 list-disc space-y-1 pl-5">{value}</ul>,
     ol: ({ children: value }) => <ol className="my-2 list-decimal space-y-1 pl-5">{value}</ol>,
     li: ({ children: value }) => <li className="pl-0.5">{value}</li>,
diff --git a/frontend/web/src/components/Sidebar.tsx b/frontend/web/src/components/Sidebar.tsx
index e92921af2..fb90a3164 100644
--- a/frontend/web/src/components/Sidebar.tsx
+++ b/frontend/web/src/components/Sidebar.tsx
@@ -441,7 +441,7 @@ export function Sidebar({
             </button>}
             <details className="sidebar-more">
               <summary className="icon-control flex h-8 w-8 items-center justify-center" aria-label={zh ? '更多' : 'More'} title={zh ? '语言、外观与登录' : 'Language, appearance and sign-in'}>
-                <span aria-hidden="true" className="tracking-[0.12em]">···</span>
+                <MoreHorizontal size={16} aria-hidden="true" />
               </summary>
               <div className="sidebar-more-menu">
                 {onSignOut && <button type="button" onClick={onSignOut} className="icon-control flex h-8 items-center gap-2 px-2 text-xs"><LogOut size={15} />{zh ? '退出登录' : 'Sign out'}</button>}
diff --git a/frontend/web/src/components/TopBar.tsx b/frontend/web/src/components/TopBar.tsx
index 27f533835..3093168ce 100644
--- a/frontend/web/src/components/TopBar.tsx
+++ b/frontend/web/src/components/TopBar.tsx
@@ -1,3 +1,4 @@
+import { MoreHorizontal } from 'lucide-react';
 import { WorkspaceHeader } from './WorkspaceShell';
 import { SessionWorkdir } from './SessionWorkdir';
 import type { Snapshot } from '../api';
@@ -75,7 +76,7 @@ export function TopBar({
 
   return (
     <WorkspaceHeader className="project-header">
-      <h1 className="topbar-title min-w-0 truncate text-[19px] font-semibold leading-6 tracking-[-0.015em] text-ink" title={title}>
+      <h1 className="topbar-title min-w-0 truncate text-[20px] font-semibold leading-7 tracking-[-0.015em] text-ink" title={title}>
         {title}
       </h1>
       <div className={showStatus ? "topbar-status min-w-0 items-center text-xs text-ink-faint" : "sr-only"} title={focus ? `${statusWords} · ${focus}` : statusWords}>
@@ -130,9 +131,9 @@ export function TopBar({
               aria-label={t('topbar.manageSession')}
               title={t('topbar.manageSession')}
               onClick={onManage}
-              className="icon-control flex h-8 w-8 shrink-0 items-center justify-center text-base leading-none tracking-[0.12em] text-ink-dim"
+              className="icon-control flex h-8 w-8 shrink-0 items-center justify-center text-ink-dim"
             >
-              ···
+              <MoreHorizontal size={18} aria-hidden="true" />
             </button>
           </>
         ) : null}
diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index f0845b289..b8697b31d 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -484,10 +484,10 @@ select optgroup {
   flex-shrink: 0;
   white-space: nowrap;
   padding: 0 0.125rem;
-  border-bottom: 1px solid transparent;
+  border-bottom: 2px solid transparent;
   color: rgb(var(--ink-faint));
   font-size: 0.875rem;
-  letter-spacing: .01em;
+  font-weight: 500;
   transition: color 180ms ease, border-color 180ms ease;
 }
 
@@ -495,7 +495,7 @@ select optgroup {
 
 .workspace-tab[aria-current='page'] {
   color: rgb(var(--ink));
-  border-bottom-color: rgb(var(--accent));
+  border-bottom-color: rgb(var(--ink));
 }
 
 .workspace-more { position: relative; color: rgb(var(--ink-dim)); font-size: 0.875rem; }
@@ -894,10 +894,10 @@ button {
 .project-header {
   display: grid;
   height: auto;
-  min-height: 56px;
+  min-height: 72px;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 2px 12px;
-  padding-block: 8px;
+  gap: 4px 16px;
+  padding-block: 16px 10px;
 }
 .project-header .topbar-title { grid-column: 1; grid-row: 1; }
 .project-header .topbar-status { display: flex; flex-wrap: wrap; white-space: nowrap; grid-column: 1 / -1; grid-row: 2; gap: 0 6px; }
@@ -948,6 +948,7 @@ button {
 }
 .conversation-row[data-operator='true'] { --conversation-enter-x: 12px; --conversation-enter-y: 0px; }
 .conversation-row .prose :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.015em; }
+.conversation-row li::marker { color: rgb(var(--ink-faint)); }
 
 /* A task in the conversation is one faint line that unfolds. */
 .task-line-row { padding: 6px 0; color: rgb(var(--ink-dim)); }

From 77b4fdcd8ab04edb6160e5492979be869849e53f Mon Sep 17 00:00:00 2001
From: lbx154 <145820328+lbx154@users.noreply.github.com>
Date: Tue, 3 Nov 2026 06:36:31 -0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=92=8C=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=EF=BC=9A=E9=BB=91=E7=99=BD=E7=81=B0=EF=BC=8C?=
 =?UTF-8?q?=E8=A1=A5=E5=9B=9E=E4=B8=A2=E5=A4=B1=E7=9A=84=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 地图约 150 处写死的蓝/绿/赭/紫改为主题色：运行中绿、失败红、线条和强调黑、其余灰；阴影去掉蓝调
- 补回 7949c6217 删 canvas.css 时丢掉的 --map-hairline / --map-silver / --map-status-* / --map-accent*：
  卡片边框此前因变量未定义退回文字色（黑粗边），状态点不显示
- 缩放按钮改胶囊，分隔线跟主题
- 工作台：模块标签选中为灰底胶囊；只读标记、根目录名不再粗体大写；编辑器标签去掉顶部色线
- 深色模式下拉框箭头不再平铺成一排（背景简写把 no-repeat 重置了）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/web/src/index.css                    |  12 +-
 frontend/web/src/map/MapPanel.tsx             |  30 ++---
 frontend/web/src/map/MapRelationEdge.tsx      |   4 +-
 frontend/web/src/map/SubmapEdges.tsx          |   6 +-
 frontend/web/src/map/alive.css                |  14 +--
 frontend/web/src/map/atlas.css                |  18 +--
 frontend/web/src/map/design.css               |  65 ++++++----
 frontend/web/src/map/edges.css                |  24 ++--
 frontend/web/src/map/map.css                  |  89 ++++++-------
 frontend/web/src/map/motion.css               |   6 +-
 frontend/web/src/map/submap.css               | 118 +++++++++---------
 .../web/src/research-workbench/styles.css     |   8 +-
 12 files changed, 202 insertions(+), 192 deletions(-)

diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index b8697b31d..4a8bcc7b0 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -146,6 +146,9 @@ select:not([multiple]) {
 }
 
 :root[data-theme='dark'] select:not([multiple]) {
+  background-repeat: no-repeat;
+  background-position: right 0.6rem center;
+  background-size: 1rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m5 6.5 3 3 3-3' stroke='%23a2a2a7' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
@@ -523,17 +526,12 @@ select optgroup {
   transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
 }
 
-.workbench-module-tab:hover {
-  border-color: rgb(var(--glass-edge) / 55%);
-  background: rgb(var(--glass-raised) / 45%);
-  color: rgb(var(--ink));
-}
+.workbench-module-tab:hover { color: rgb(var(--ink)); }
 
 .workbench-module-tab[data-selected='true'] {
-  border-color: transparent;
   background: rgb(var(--surface-2));
   color: rgb(var(--ink));
-  box-shadow: inset 0 -1px 0 rgb(var(--accent));
+  font-weight: 500;
 }
 
 @keyframes workspace-surface-enter {
diff --git a/frontend/web/src/map/MapPanel.tsx b/frontend/web/src/map/MapPanel.tsx
index 3cb37924c..742d35dc5 100644
--- a/frontend/web/src/map/MapPanel.tsx
+++ b/frontend/web/src/map/MapPanel.tsx
@@ -93,16 +93,16 @@ export const MAP_CARD_LEGEND: Array<[[string, string], string, string]> = [
 // Minimap fills echo the card state palette a step lighter, so the overview
 // inset reads as a status heatmap instead of undifferentiated confetti.
 const MINIMAP_STATUS: Record<string, string> = {
-  done: "#a9c4b6",
-  running: "#9fb6cc",
-  question: "#dcc797",
-  failed: "#d9a79f",
-  review_unavailable: "#cdbba3",
-  held: "#cdbba3",
-  paused: "#cdbba3",
-  aborted: "#c6c8cb",
-  skipped: "#c6c8cb",
-  missing: "#c6c8cb",
+  done: "#9a9a9a",
+  running: "#86c99a",
+  question: "#bdbdbd",
+  failed: "#e0a3a3",
+  review_unavailable: "#cfcfcf",
+  held: "#cfcfcf",
+  paused: "#cfcfcf",
+  aborted: "#dedede",
+  skipped: "#dedede",
+  missing: "#dedede",
 };
 
 export function MapCanvas({
@@ -493,7 +493,7 @@ export function MapCanvas({
                   : "Related work"),
           labelStyle: {
             fontSize: 30,
-            fill: "#6685a4",
+            fill: "#737373",
           },
           labelBgPadding: [12, 6] as [number, number],
           labelBgBorderRadius: 12,
@@ -503,8 +503,8 @@ export function MapCanvas({
             stroke: e.cycle
               ? "#dc6648"
               : e.kind === "dependency"
-                  ? "#527fa7"
-                  : "#7594ad",
+                  ? "#404040"
+                  : "#8a8a8a",
             // Dependencies stay the strongest line; context is a fainter,
             // sparser dash.
             strokeWidth: highlighted ? 2.6 : e.kind === "dependency" ? 2 : 1.6,
@@ -519,7 +519,7 @@ export function MapCanvas({
           },
           markerEnd: {
             type: MarkerType.ArrowClosed,
-            color: "#8aa5b8",
+            color: "#a3a3a3",
             width: 32,
             height: 32,
           },
@@ -958,7 +958,7 @@ export function MapCanvas({
               />
               {minimapOpen && <MiniMap<MacroNode>
                 nodeColor={(n) =>
-                  MINIMAP_STATUS[statusKey((n as MacroNode).data.task)] ?? "#c6c8cb"
+                  MINIMAP_STATUS[statusKey((n as MacroNode).data.task)] ?? "#dedede"
                 }
                 maskColor="var(--map-minimap-mask)"
                 maskStrokeColor="#6d737a"
diff --git a/frontend/web/src/map/MapRelationEdge.tsx b/frontend/web/src/map/MapRelationEdge.tsx
index ecd75daf4..d1f9c489a 100644
--- a/frontend/web/src/map/MapRelationEdge.tsx
+++ b/frontend/web/src/map/MapRelationEdge.tsx
@@ -37,8 +37,8 @@ export function MapRelationEdge({ id, label, style, data }: EdgeProps<RelationEd
   // the per-kind dash patterns from MapPanel stay the primary encoding.
   const stroke =
     !kind || style?.stroke === CYCLE_STROKE
-      ? style?.stroke || "#7594ad"
-      : `var(--map-edge-${kind}, ${style?.stroke || "#7594ad"})`;
+      ? style?.stroke || "#8a8a8a"
+      : `var(--map-edge-${kind}, ${style?.stroke || "#8a8a8a"})`;
   const strokeWidth = Number(style?.strokeWidth || 2) / zoom;
   const text = typeof label === "string" ? relationLabelText(label) : undefined;
   // A route fades in from the card it leaves and is full strength where it
diff --git a/frontend/web/src/map/SubmapEdges.tsx b/frontend/web/src/map/SubmapEdges.tsx
index a48effe21..3ade607ee 100644
--- a/frontend/web/src/map/SubmapEdges.tsx
+++ b/frontend/web/src/map/SubmapEdges.tsx
@@ -23,7 +23,7 @@ export function SubmapEdges({ layout, growing = {}, activeStep }: { layout: Subm
           markerHeight="6.5"
           orient="auto"
         >
-          <path d="M 0.6 0.9 L 9.6 5 L 0.6 9.1 L 3 5 z" fill="var(--map-edge-context, #6f8ca8)" />
+          <path d="M 0.6 0.9 L 9.6 5 L 0.6 9.1 L 3 5 z" fill="var(--map-edge-context, #737373)" />
         </marker>
       </defs>
       {layout.links.map((link) => {
@@ -54,14 +54,14 @@ export function SubmapEdges({ layout, growing = {}, activeStep }: { layout: Subm
               className="submap-relation-path"
               d={d}
               fill="none"
-              stroke="var(--map-edge-context, #6f8ca8)"
+              stroke="var(--map-edge-context, #737373)"
               strokeWidth="1.6"
               strokeLinecap="round"
               strokeDasharray={link.contextual ? "5 6" : undefined}
               markerEnd={`url(#${marker})`}
             />
             </GrowthReveal>
-            {activeStep === link.target && <path className="submap-flow" d={d} pathLength={1} fill="none" stroke="#4b9cae" strokeWidth="3" strokeDasharray=".09 .91" strokeLinecap="round" aria-hidden="true" />}
+            {activeStep === link.target && <path className="submap-flow" d={d} pathLength={1} fill="none" stroke="#22a35a" strokeWidth="3" strokeDasharray=".09 .91" strokeLinecap="round" aria-hidden="true" />}
             <g
               className="submap-relation-label"
               transform={`translate(${mx}, ${my})`}
diff --git a/frontend/web/src/map/alive.css b/frontend/web/src/map/alive.css
index 19d5a541e..47c7128b4 100644
--- a/frontend/web/src/map/alive.css
+++ b/frontend/web/src/map/alive.css
@@ -9,12 +9,12 @@
 .map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .map-macro[data-lit="false"] { opacity: .48; }
 .map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .react-flow__edge:not(.is-lit) { opacity: .26; }
 .map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .react-flow__edge.is-lit .react-flow__edge-path { filter: drop-shadow(0 0 3px rgb(var(--blue) / .5)); }
-.map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .map-macro[data-lit="true"][data-hovered="false"] .map-card { box-shadow: 0 8px 26px #24364c14, 0 0 0 1px #7ca9c86b; }
-.map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .map-macro[data-lit="true"][data-hovered="true"] .map-card { box-shadow: 0 16px 40px #24364c1c, 0 2px 6px #24364c0a; }
+.map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .map-macro[data-lit="true"][data-hovered="false"] .map-card { box-shadow: 0 8px 26px rgb(0 0 0 / 8%), 0 0 0 1px rgb(var(--ink-faint) / 42%); }
+.map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .map-macro[data-lit="true"][data-hovered="true"] .map-card { box-shadow: 0 16px 40px rgb(0 0 0 / 11%), 0 2px 6px rgb(0 0 0 / 4%); }
 .argus-map .map-relation-label { transition: opacity .3s ease, box-shadow .3s ease; }
 .map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .map-relation-label[data-lit="false"] { opacity: .3; }
 .map-canvas-wrap[data-hovering="true"]:not([data-detailed="true"]) .map-relation-label[data-lit="true"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--edge-hue) 35%, transparent); }
-.map-edge-spark[data-lit="true"] { background: #7fb0cd; box-shadow: 0 0 6px 1px #7fb0cd66; animation-duration: 2s; }
+.map-edge-spark[data-lit="true"] { background: rgb(var(--status-running)); box-shadow: 0 0 6px 1px rgb(var(--status-running) / 40%); animation-duration: 2s; }
 
 /* A freshly opened map composes itself: cards rise in reading order and the
  * relations are drawn in once their source card is standing. Growth of new
@@ -28,9 +28,9 @@
 @keyframes atlas-step-settle { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
 
 /* The living status line on the card being worked on. */
-.map-card-live { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 7px; line-height: 1.4; color: color-mix(in srgb, #4a86c5 78%, rgb(var(--ink))); background: color-mix(in srgb, #4a86c5 8%, transparent); }
-.map-card-live i { position: relative; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #4a86c5; }
-.map-card-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #4a86c5; opacity: 0; animation: atlas-live-ring 2.2s cubic-bezier(.2, .7, .3, 1) infinite; }
+.map-card-live { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 7px; line-height: 1.4; color: color-mix(in srgb, rgb(var(--status-running)) 78%, rgb(var(--ink))); background: color-mix(in srgb, rgb(var(--status-running)) 8%, transparent); }
+.map-card-live i { position: relative; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--status-running)); }
+.map-card-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgb(var(--status-running)); opacity: 0; animation: atlas-live-ring 2.2s cubic-bezier(.2, .7, .3, 1) infinite; }
 .map-card-live span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
 /* The holder and the latest thing said on this task. */
 .map-card-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@@ -49,7 +49,7 @@
 /* Replaying a live session: the same reveal strip the datasets use, with a
  * way back to the present. */
 .map-playback .map-replay-exit { margin-left: 4px; }
-.map-playback[data-floating="true"] { position: absolute; z-index: 7; left: 20px; top: 61px; height: 38px; width: min(560px, calc(100% - 40px)); padding: 0 12px; border: 1px solid rgb(var(--line) / .7); border-radius: 10px; background: var(--map-paper); box-shadow: 0 6px 22px #24364c14; animation: map-agent-enter 250ms ease-out; }
+.map-playback[data-floating="true"] { position: absolute; z-index: 7; left: 20px; top: 61px; height: 38px; width: min(560px, calc(100% - 40px)); padding: 0 12px; border: 1px solid rgb(var(--line) / .7); border-radius: 10px; background: var(--map-paper); box-shadow: 0 6px 22px rgb(0 0 0 / 8%); animation: map-agent-enter 250ms ease-out; }
 .map-playback[data-floating="true"] small { display: none; }
 @media (max-width: 640px) { .map-playback[data-floating="true"] { top: 54px; left: 12px; width: calc(100% - 24px); } }
 
diff --git a/frontend/web/src/map/atlas.css b/frontend/web/src/map/atlas.css
index 028c3b11d..af144d7c8 100644
--- a/frontend/web/src/map/atlas.css
+++ b/frontend/web/src/map/atlas.css
@@ -1,5 +1,5 @@
 /* Atlas' visual language follows real task state; geometry remains in the layout model. */
-.argus-map { --atlas-flow: #3f9fba; }
+.argus-map { --atlas-flow: rgb(var(--status-running)); }
 .map-macro { border-radius: 28px; border-top-width: 4px; box-shadow: 0 12px 36px rgb(var(--ink) / .06); }
 .map-macro[data-active=true] { border-color: rgb(var(--line)); border-top-color: var(--state); box-shadow: 0 12px 36px rgb(var(--blue) / .09); }
 .map-macro[data-active=true]::before { content: none; }
@@ -16,23 +16,23 @@
 .map-card-stages>span[data-active=true] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step-color) 40%, transparent); }
 .map-card-stages>span[data-active=true] svg { animation: atlas-stage-pulse 1.8s ease-in-out infinite; }
 .map-card-bottom { padding-top: 9px; padding-bottom: 9px; }
-.map-edge-spark { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--atlas-flow, #3f9fba); box-shadow: 0 0 5px 1px #76b7cf59; offset-rotate: 0deg; animation: atlas-spark 2.8s linear infinite; pointer-events: none; will-change: offset-distance, opacity; }
+.map-edge-spark { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--atlas-flow, rgb(var(--status-running))); box-shadow: 0 0 5px 1px rgb(var(--status-running) / 35%); offset-rotate: 0deg; animation: atlas-spark 2.8s linear infinite; pointer-events: none; will-change: offset-distance, opacity; }
 /* Inside an open card the active link pulses by opacity only (composited);
  * the dash pattern itself stays still. */
 .submap-flow { pointer-events: none; animation: atlas-submap-flow 1.7s ease-in-out infinite; }
-.map-dispatch-trail { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 44; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 7px #78c8d166); }
+.map-dispatch-trail { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 44; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 7px rgb(var(--status-running) / 40%)); }
 .map-dispatch-trail path { opacity: 0; }
-.map-canvas-toolbar>button:hover, .map-workspace-actions button:not(:disabled):hover { border-color: #7ca9c8; background: rgb(var(--blue) / .045); }
-.map-relation-label { color: #557a97; border-color: #8daec53b; font-size: 11px; box-shadow: 0 3px 10px #1c486510; }
-.submap-step[data-active=true] { background: linear-gradient(130deg, #6ca1c407, var(--map-paper) 60%); }
+.map-canvas-toolbar>button:hover, .map-workspace-actions button:not(:disabled):hover { border-color: rgb(var(--ink-faint)); background: rgb(var(--blue) / .045); }
+.map-relation-label { color: rgb(var(--ink)); border-color: rgb(var(--ink-faint) / 23%); font-size: 11px; box-shadow: 0 3px 10px rgb(0 0 0 / 6%); }
+.submap-step[data-active=true] { background: linear-gradient(130deg, rgb(var(--ink-faint) / 3%), var(--map-paper) 60%); }
 [data-theme=dark] .map-macro { box-shadow: 0 18px 60px #0004; }
 [data-theme=dark] .map-macro[data-active=true] { box-shadow: 0 12px 36px #0003; }
-[data-theme=dark] .map-relation-label { color: #9dc0dc; }
+[data-theme=dark] .map-relation-label { color: rgb(var(--ink-dim)); }
 @keyframes atlas-spark { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 0.95; } 82% { opacity: 0.95; } 100% { offset-distance: 100%; opacity: 0; } }
 @keyframes atlas-submap-flow { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
 @keyframes atlas-breathe { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
 @keyframes atlas-stage-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
-@keyframes atlas-complete { 0% { box-shadow: 0 0 0 0 #69b39500; } 35% { box-shadow: 0 0 0 14px #69b39535, 0 18px 70px #4d9b7840; } 100% { box-shadow: 0 0 0 35px #69b39500; } }
+@keyframes atlas-complete { 0% { box-shadow: 0 0 0 0 rgb(var(--status-running) / 0%); } 35% { box-shadow: 0 0 0 14px rgb(var(--status-running) / 21%), 0 18px 70px rgb(var(--status-running) / 25%); } 100% { box-shadow: 0 0 0 35px rgb(var(--status-running) / 0%); } }
 @media(prefers-reduced-motion:reduce) { .map-edge-spark, .map-dispatch-trail { display:none; } .submap-flow, .map-macro[data-active=true]::before, .map-macro[data-completed-now=true], .map-card-stages>span[data-active=true] svg { animation:none; } }
 
 .macro-reader-body table { font-size: .85em; }
@@ -49,4 +49,4 @@
 
 /* Detail-plane typography on dark paper: the ink-mixed accents adapt on their own;
  * only the light-tuned reader frame and the amber note wash need a nudge. */
-[data-theme=dark] .macro-reader { border-color: rgb(var(--line)); border-top-color: var(--reader-accent, #8facc3); box-shadow: 0 20px 65px #00000055; }
+[data-theme=dark] .macro-reader { border-color: rgb(var(--line)); border-top-color: var(--reader-accent, rgb(var(--ink-faint))); box-shadow: 0 20px 65px #00000055; }
diff --git a/frontend/web/src/map/design.css b/frontend/web/src/map/design.css
index 3ccd36967..e1ba5c92a 100644
--- a/frontend/web/src/map/design.css
+++ b/frontend/web/src/map/design.css
@@ -23,11 +23,11 @@
   --z: var(--map-zoom-step, 0.24);
   --px: calc(1px / var(--z));
   --map-card-shadow:
-    0 calc(1 * var(--px)) calc(2 * var(--px)) rgb(30 48 72 / 0.05),
-    0 calc(8 * var(--px)) calc(24 * var(--px)) rgb(30 48 72 / 0.07);
+    0 calc(1 * var(--px)) calc(2 * var(--px)) rgb(0 0 0 / 0.05),
+    0 calc(8 * var(--px)) calc(24 * var(--px)) rgb(0 0 0 / 0.07);
   --map-card-shadow-lift:
-    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(30 48 72 / 0.06),
-    0 calc(16 * var(--px)) calc(40 * var(--px)) rgb(30 48 72 / 0.13);
+    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 0.06),
+    0 calc(16 * var(--px)) calc(40 * var(--px)) rgb(0 0 0 / 0.13);
   --map-card-line: rgb(var(--ink) / 0.1);
 }
 [data-theme="dark"] .map-canvas-wrap {
@@ -49,7 +49,7 @@
   background:
     linear-gradient(
       180deg,
-      color-mix(in srgb, var(--state, #9babbc) 7%, var(--map-paper)) 0,
+      color-mix(in srgb, var(--state, rgb(var(--ink-faint))) 7%, var(--map-paper)) 0,
       var(--map-paper) 46%
     );
   overflow: visible;
@@ -68,18 +68,18 @@
   bottom: calc(12 * var(--px));
   width: calc(3 * var(--px));
   border-radius: calc(3 * var(--px));
-  background: var(--state, #9babbc);
+  background: var(--state, rgb(var(--ink-faint)));
   pointer-events: none;
 }
 .argus-map .map-macro[data-hovered="true"],
 .argus-map .map-macro:hover {
   box-shadow: var(--map-card-shadow-lift);
-  border-color: color-mix(in srgb, var(--state, #82a6c5) 38%, var(--map-card-line));
+  border-color: color-mix(in srgb, var(--state, rgb(var(--ink-faint))) 38%, var(--map-card-line));
 }
 .argus-map .map-macro[data-focused="true"] {
-  border-color: color-mix(in srgb, #5d8fbd 62%, var(--map-card-line));
+  border-color: color-mix(in srgb, rgb(var(--ink)) 30%, var(--map-card-line));
   box-shadow:
-    0 0 0 calc(3 * var(--px)) rgb(93 143 189 / 0.14),
+    0 0 0 calc(4 * var(--px)) rgb(var(--ink) / 0.05),
     var(--map-card-shadow-lift);
 }
 .argus-map .map-macro[data-active="true"] {
@@ -150,8 +150,8 @@
   line-height: 1.5;
   padding: 1.5px 7px;
   border-radius: 999px;
-  color: color-mix(in srgb, var(--state, #6b859f) 78%, rgb(var(--ink)));
-  background: color-mix(in srgb, var(--state, #6b859f) 12%, transparent);
+  color: color-mix(in srgb, var(--state, rgb(var(--ink-dim))) 78%, rgb(var(--ink)));
+  background: color-mix(in srgb, var(--state, rgb(var(--ink-dim))) 12%, transparent);
   flex-shrink: 0;
 }
 .argus-map .macro-summary .map-status svg {
@@ -284,8 +284,8 @@
   --pig-indigo: rgb(var(--blue));
   --pig-vermilion: rgb(var(--err));
   --pig-gamboge: rgb(var(--warn));
-  --pig-ochre: #977650; /* 赭石 paused */
-  --map-serif: "Geist Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --pig-ochre: rgb(var(--ink-faint)); /* paused / replaced: gray, not a hue */
+  --map-serif: inherit;
   /* Lines are ink. The order of work is the body of the drawing, a dependency
    * is pressed harder, an association is a dry, broken stroke. */
   --map-edge-context: var(--ink-2);
@@ -298,8 +298,8 @@
   /* Night ink: the sheet is dark, the ink is pale, the pigments lift a step. */
   --map-dot: rgb(var(--ink) / .07);
   --map-minimap-mask: rgb(var(--surface-0) / .78);
-  --pig-ochre: #b89873;
-  --pig-lotus: #a99db8;
+  --pig-ochre: rgb(var(--ink-dim));
+  --pig-lotus: rgb(var(--ink-dim));
   /* Restated here: the edge sheet's own dark rule is as specific as the light
    * block above and may load later, so it would turn the ink blue again. */
   --map-edge-context: var(--ink-2);
@@ -362,8 +362,8 @@
     );
   box-shadow:
     0 0 0 calc(0.5 * var(--px)) rgb(255 255 255 / 0.6) inset,
-    0 calc(1 * var(--px)) calc(1.5 * var(--px)) rgb(40 34 24 / 0.05),
-    0 calc(10 * var(--px)) calc(30 * var(--px)) rgb(40 34 24 / 0.08);
+    0 calc(1 * var(--px)) calc(1.5 * var(--px)) rgb(0 0 0 / 0.05),
+    0 calc(10 * var(--px)) calc(30 * var(--px)) rgb(0 0 0 / 0.08);
 }
 [data-theme="dark"] .argus-map .map-macro {
   border-color: rgb(255 255 255 / 0.08);
@@ -377,16 +377,16 @@
   border-color: color-mix(in srgb, var(--state, var(--ink-3)) 34%, rgb(var(--ink) / 0.1));
   box-shadow:
     0 0 0 calc(0.5 * var(--px)) rgb(255 255 255 / 0.6) inset,
-    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(40 34 24 / 0.06),
-    0 calc(18 * var(--px)) calc(46 * var(--px)) rgb(40 34 24 / 0.14);
+    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 0.06),
+    0 calc(18 * var(--px)) calc(46 * var(--px)) rgb(0 0 0 / 0.14);
 }
 /* Focus is a ring of ink, not of interface blue. */
 .argus-map .map-macro[data-focused="true"] {
-  border-color: color-mix(in srgb, var(--ink-2) 55%, transparent);
+  border-color: rgb(var(--ink) / 0.28);
   box-shadow:
-    0 0 0 calc(3 * var(--px)) rgb(var(--ink) / 0.07),
-    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(40 34 24 / 0.06),
-    0 calc(22 * var(--px)) calc(56 * var(--px)) rgb(40 34 24 / 0.16);
+    0 0 0 calc(4 * var(--px)) rgb(var(--ink) / 0.05),
+    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 0.06),
+    0 calc(22 * var(--px)) calc(56 * var(--px)) rgb(0 0 0 / 0.16);
 }
 /* The state rail is a brush mark: full in the middle, thinning to its ends. */
 .argus-map .map-macro::after {
@@ -552,7 +552,7 @@
   background: color-mix(in srgb, var(--map-paper) 92%, transparent);
   box-shadow:
     inset 0 0 0 1px rgb(var(--ink) / 0.1),
-    0 1px 2px rgb(40 34 24 / 0.06);
+    0 1px 2px rgb(0 0 0 / 0.06);
   /* Nearly opaque paper, and no backdrop blur: a label travels with the map,
    * and a blur behind every one of them was redone on each frame of a zoom. */
 }
@@ -575,15 +575,26 @@
   color: var(--ink-1);
   box-shadow:
     inset 0 0 0 1px rgb(var(--ink) / 0.22),
-    0 2px 6px rgb(40 34 24 / 0.1);
+    0 2px 6px rgb(0 0 0 / 0.1);
 }
 
 /* ── Task cards, quiet by default (intelligent-ui.md) ─────────────────────
    At rest a card says what it is and where it stands: the title, the state as
    a small dot and a word, and one line of the current conclusion. Its course
    and the way in appear on hover or focus. Metal palette: white card, silver
-   hairline, black title; colour only on the status dot (canvas.css names). */
+   hairline, black title; colour only on the status dot. */
 .argus-map.argus-map {
+  --xy-controls-button-border-color: rgb(var(--line));
+  --map-accent: rgb(var(--ink-dim));
+  --map-accent-ink: rgb(var(--ink));
+  --map-accent-soft: rgb(var(--ink) / 0.06);
+  --map-silver: rgb(var(--field-line));
+  --map-hairline: rgb(var(--line));
+  --map-status-running: rgb(var(--status-running));
+  --map-status-waiting: rgb(var(--status-waiting));
+  --map-status-done: rgb(var(--status-done));
+  --map-status-idle: rgb(var(--status-idle));
+  --map-status-failed: rgb(var(--status-failed));
   --map-edge-context: var(--map-silver);
   --map-edge-continuation: var(--map-silver);
   --map-edge-semantic: var(--map-silver);
@@ -645,7 +656,7 @@
 .argus-map .macro-summary .map-status.map-state-question::before { box-shadow: 0 0 0 .17em var(--map-paper), 0 0 0 .26em var(--state); }
 .argus-map .macro-summary .map-state-dot { display: none; }
 .argus-map .macro-summary .map-card h2 {
-  margin: 0 0 6px; min-height: 0; font-family: var(--map-title-serif);
+  margin: 0 0 6px; min-height: 0;
   font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: rgb(var(--ink));
 }
 .argus-map .macro-summary .map-card-course { gap: 2px; padding-top: 4px; }
diff --git a/frontend/web/src/map/edges.css b/frontend/web/src/map/edges.css
index 6be94aad6..f71df74dd 100644
--- a/frontend/web/src/map/edges.css
+++ b/frontend/web/src/map/edges.css
@@ -5,20 +5,20 @@
  * MapRelationEdge resolves these variables into stroke and arrowhead colors,
  * so light and dark themes are tuned entirely from this file. */
 .argus-map {
-  --map-edge-dependency: #3f74a6; /* steel blue: recorded execution order */
-  --map-edge-continuation: #527fa7; /* same family: a task carrying on */
-  --map-edge-semantic: #8b95a0; /* neutral gray: related work */
-  --map-edge-context: #6f8ca8; /* slate blue, a step quieter: the order work happened in */
-  --map-edge-replacement: #af8149; /* muted amber: the plan changed course */
-  --map-edge-relation: #4f7f6a; /* sage green: a relation the records state */
+  --map-edge-dependency: rgb(var(--ink)); /* steel blue: recorded execution order */
+  --map-edge-continuation: rgb(var(--ink)); /* same family: a task carrying on */
+  --map-edge-semantic: rgb(var(--ink-faint)); /* neutral gray: related work */
+  --map-edge-context: rgb(var(--ink-dim)); /* slate blue, a step quieter: the order work happened in */
+  --map-edge-replacement: rgb(var(--ink-dim)); /* muted amber: the plan changed course */
+  --map-edge-relation: rgb(var(--ink)); /* sage green: a relation the records state */
 }
 [data-theme="dark"] .argus-map {
-  --map-edge-dependency: #7ea9cd;
-  --map-edge-continuation: #7ea9cd;
-  --map-edge-semantic: #939ea9;
-  --map-edge-context: #7d97b0;
-  --map-edge-replacement: #c79e63;
-  --map-edge-relation: #82b39c;
+  --map-edge-dependency: rgb(var(--ink-faint));
+  --map-edge-continuation: rgb(var(--ink-faint));
+  --map-edge-semantic: rgb(var(--ink-faint));
+  --map-edge-context: rgb(var(--ink-faint));
+  --map-edge-replacement: rgb(var(--ink-dim));
+  --map-edge-relation: rgb(var(--ink-dim));
 }
 
 /* Legend swatches quote the same variables so the key never drifts from the
diff --git a/frontend/web/src/map/map.css b/frontend/web/src/map/map.css
index a1f592be3..9339559e0 100644
--- a/frontend/web/src/map/map.css
+++ b/frontend/web/src/map/map.css
@@ -1,9 +1,9 @@
 .argus-map {
   --map-paper: rgb(var(--panel));
   --map-card-surface: rgb(var(--panel));
-  --map-canvas: #f5f7fa;
-  --map-dot: #d6dfe9;
-  --map-minimap-mask: rgba(242, 245, 249, 0.75);
+  --map-canvas: rgb(247 247 247);
+  --map-dot: rgb(222 222 222);
+  --map-minimap-mask: rgba(245, 245, 245, 0.75);
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -16,10 +16,10 @@
 [data-theme="dark"] .argus-map {
   /* Cards sit a step above the canvas instead of matching the near-black
    * panel: pure panel-on-canvas read as holes in the dark screenshots. */
-  --map-card-surface: #1d2734;
-  --map-canvas: #10161f;
-  --map-dot: #263241;
-  --map-minimap-mask: rgba(13, 19, 27, 0.72);
+  --map-card-surface: rgb(20 20 20);
+  --map-canvas: rgb(10 10 10);
+  --map-dot: rgb(38 38 38);
+  --map-minimap-mask: rgba(10, 10, 10, 0.72);
 }
 /* The header is two lines: the session's name, then one sentence on where
  * the work stands. Everything else about the map lives behind the options
@@ -58,7 +58,7 @@
   background: rgb(var(--panel));
   border: 1px solid rgb(var(--line));
   border-radius: 12px;
-  box-shadow: 0 12px 40px #1834541a;
+  box-shadow: 0 12px 40px rgb(0 0 0 / 10%);
 }
 .map-more-menu .map-scope-button { margin-left: 0; text-align: left; }
 /* Entries that only matter where the canvas legend is hidden. */
@@ -111,7 +111,7 @@
 .map-workspace-actions button {
   background: var(--map-paper);
   border: 1px solid rgb(var(--line) / 0.7);
-  box-shadow: 0 2px 6px #24364c05;
+  box-shadow: 0 2px 6px rgb(0 0 0 / 2%);
   border-radius: 7px;
   display: flex;
   align-items: center;
@@ -141,7 +141,7 @@
   color: rgb(var(--ink));
 }
 .map-search:focus-within {
-  border-color: #7b9cbc;
+  border-color: rgb(var(--ink));
 }
 .map-feedback {
   position: absolute;
@@ -181,7 +181,7 @@
   background: rgb(var(--blue) / .06);
 }
 .map-card {
-  --state: #9babbc;
+  --state: rgb(var(--ink-faint));
   position: relative;
   width: 272px;
   min-height: 192px;
@@ -191,8 +191,8 @@
   background: var(--map-card-surface);
   border-radius: 10px;
   box-shadow:
-    0 3px 12px #24364c07,
-    0 1px 2px #24364c05;
+    0 3px 12px rgb(0 0 0 / 3%),
+    0 1px 2px rgb(0 0 0 / 2%);
   transition:
     box-shadow 0.18s ease,
     border-color 0.18s ease,
@@ -211,13 +211,13 @@
   box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
 }
 .map-card:hover {
-  box-shadow: 0 7px 24px #24364c12;
+  box-shadow: 0 7px 24px rgb(0 0 0 / 7%);
 }
 [data-theme="dark"] .map-card:hover {
   box-shadow: 0 8px 28px rgb(0 0 0 / 0.5);
 }
 .map-card.is-selected {
-  outline: 2px solid #528abd;
+  outline: 2px solid rgb(var(--ink));
   outline-offset: 3px;
 }
 .map-card-top {
@@ -237,34 +237,34 @@
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  color: var(--state, #6b859f);
-  background: color-mix(in srgb, var(--state, #6b859f) 9%, transparent);
+  color: var(--state, rgb(var(--ink-dim)));
+  background: color-mix(in srgb, var(--state, rgb(var(--ink-dim))) 9%, transparent);
   border-radius: 4px;
   padding: 3px 6px;
   font-weight: 550;
   white-space: nowrap;
 }
 .map-state-done {
-  --state: #528e73;
+  --state: rgb(var(--ink-faint));
 }
 .map-state-running {
-  --state: #4a86c5;
+  --state: rgb(var(--status-running));
 }
 .map-state-failed {
-  --state: #bd785f;
+  --state: rgb(var(--err));
 }
 .map-state-question {
-  --state: #bd923f;
+  --state: rgb(var(--ink));
 }
 .map-state-paused,
 .map-state-held,
 .map-state-review_unavailable {
-  --state: #a58a56;
+  --state: rgb(var(--ink-dim));
 }
 .map-state-aborted,
 .map-state-skipped,
 .map-state-missing {
-  --state: #9d9fa6;
+  --state: rgb(var(--silver));
 }
 .map-state-dot {
   width: 5px;
@@ -301,7 +301,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  color: #77899f;
+  color: rgb(var(--ink-dim));
 }
 .map-role > span {
   height: 5px;
@@ -325,10 +325,10 @@
   width: 7px;
   height: 7px;
   background: var(--map-paper);
-  border: 1.5px solid #94a6b8;
+  border: 1.5px solid rgb(var(--ink-faint));
 }
 .argus-map .react-flow__node:focus-visible .map-card {
-  outline: 3px solid #528abd;
+  outline: 3px solid rgb(var(--ink));
   outline-offset: 3px;
 }
 .map-legend {
@@ -345,7 +345,7 @@
   border-radius: 7px;
   font-size: 11px;
   color: rgb(var(--ink-faint));
-  box-shadow: 0 2px 6px #24364c05;
+  box-shadow: 0 2px 6px rgb(0 0 0 / 2%);
 }
 .map-legend > span,
 .map-legend > button {
@@ -356,14 +356,14 @@
 .map-legend b {
   display: block;
   width: 20px;
-  border-top: 1.5px solid #648db7;
+  border-top: 1.5px solid rgb(var(--ink));
 }
 .map-legend .dashed {
-  border-top: 1.5px dashed #a0afbf;
+  border-top: 1.5px dashed rgb(var(--silver));
 }
 /* Lines to the cards a person placed: solid where the person drew them,
  * dashed where the records state them (来自, 关于). */
-.argus-map .map-legend b.human-link { border-top: 2.5px solid #b8862b !important; }
+.argus-map .map-legend b.human-link { border-top: 2.5px solid rgb(var(--ink-dim)) !important; }
 .argus-map .map-legend b.human-link.is-recorded { border-top-style: dashed !important; }
 .map-legend .is-muted {
   opacity: 0.45;
@@ -373,17 +373,18 @@
   bottom: 67px;
   left: 76px;
   background: var(--map-paper);
-  color: #b47d45;
-  border: 1px solid #b47d4530;
+  color: rgb(var(--ink-dim));
+  border: 1px solid rgb(var(--ink-dim) / 19%);
   border-radius: 6px;
   padding: 7px 10px;
   z-index: 5;
   font-size: 11px;
 }
 .argus-map .react-flow__controls {
-  box-shadow: 0 2px 9px #24364c08;
-  border: 1px solid rgb(var(--line) / 0.7);
-  border-radius: 7px;
+  box-shadow: none;
+  border: 1px solid rgb(var(--line));
+  border-radius: 999px;
+  background: var(--map-paper);
   overflow: hidden;
   left: 6px;
   bottom: 5px;
@@ -402,7 +403,7 @@
   overflow: hidden;
   width: 140px;
   height: 95px;
-  box-shadow: 0 3px 10px #24364c08;
+  box-shadow: 0 3px 10px rgb(0 0 0 / 3%);
   bottom: 3px;
   right: 5px;
 }
@@ -421,13 +422,13 @@
   padding: 4px;
   display: flex;
   align-items: center;
-  color: #6988a8;
+  color: rgb(var(--ink));
 }
 .map-playback button:disabled {
   opacity: 0.3;
 }
 .map-playback input {
-  accent-color: #7094b6;
+  accent-color: rgb(var(--ink));
   flex: 1;
   max-width: 280px;
   height: 3px;
@@ -468,7 +469,7 @@
 .map-data-error {
   padding: 8px 28px;
   font-size: 11px;
-  color: #b87753;
+  color: rgb(var(--ink-dim));
 }
 @media (max-width: 1100px) {
   .map-header {
@@ -479,7 +480,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    box-shadow: -8px 0 30px #13223612;
+    box-shadow: -8px 0 30px rgb(0 0 0 / 7%);
   }
   .map-heading h1 {
     font-size: 19px;
@@ -584,11 +585,11 @@
 .map-workspace-actions button[aria-expanded=true] { color: rgb(var(--blue)); border-color: rgb(var(--blue) / .45); background: rgb(var(--blue) / .07); }
 .map-workspace-actions button:disabled { opacity: .45; cursor: default; }
 /* A small dot on the activity icon says whether an agent is at work right now. */
-.map-agent-toggle i { position: absolute; left: 21px; top: 7px; width: 6px; height: 6px; box-sizing: content-box; border: 1.5px solid var(--map-paper); background: #94a4b0; border-radius: 50%; }
-.map-agent-toggle i[data-active=true] { background: #5da890; box-shadow: 0 0 0 2px #5da89033; }
+.map-agent-toggle i { position: absolute; left: 21px; top: 7px; width: 6px; height: 6px; box-sizing: content-box; border: 1.5px solid var(--map-paper); background: rgb(var(--ink-faint)); border-radius: 50%; }
+.map-agent-toggle i[data-active=true] { background: rgb(var(--status-running)); box-shadow: 0 0 0 2px rgb(var(--status-running) / 20%); }
 .map-delivery-toggle:not(:disabled) { color: rgb(var(--blue)); }
 .map-delivery-toggle b { padding: 1px 6px; border-radius: 6px; background: rgb(var(--blue) / .1); color: rgb(var(--blue)); font-size: 11px; font-weight: 600; }
-.map-conversation { position: absolute; z-index: 10; right: 18px; top: 62px; bottom: 150px; width: min(520px, calc(100% - 36px)); display: flex; flex-direction: column; min-height: 150px; overflow: hidden; background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 18px; box-shadow: 0 16px 60px #1834541c; animation: map-agent-enter 250ms ease-out; }
+.map-conversation { position: absolute; z-index: 10; right: 18px; top: 62px; bottom: 150px; width: min(520px, calc(100% - 36px)); display: flex; flex-direction: column; min-height: 150px; overflow: hidden; background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 18px; box-shadow: 0 16px 60px rgb(0 0 0 / 11%); animation: map-agent-enter 250ms ease-out; }
 .map-conversation>header { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--ink-dim)); font-size: 12px; }
 .map-conversation>header button { margin-left: auto; padding: 10px; border-radius: 8px; }
 .map-conversation .conversation-row { max-width: 100%; padding: 12px 16px; }
@@ -771,7 +772,7 @@
   transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease;
 }
 .map-playback button:not(:disabled):hover {
-  border-color: #7ca9c8;
+  border-color: rgb(var(--ink-faint));
   color: rgb(var(--blue));
 }
 .map-playback button:not(:disabled):active {
diff --git a/frontend/web/src/map/motion.css b/frontend/web/src/map/motion.css
index cc9393e43..a547563a0 100644
--- a/frontend/web/src/map/motion.css
+++ b/frontend/web/src/map/motion.css
@@ -1,9 +1,9 @@
 .map-macro[data-growing=true]{animation:map-task-grow 650ms cubic-bezier(.18,.8,.25,1) both;transform-origin:center bottom}
 .map-macro .submap-step[data-growing=true]{animation:map-step-grow 580ms cubic-bezier(.2,.8,.24,1) both!important}
 .map-growth-mask{stroke-dasharray:1;stroke-dashoffset:0;animation:map-link-grow 700ms cubic-bezier(.25,.6,.3,1) backwards}
-.map-agent-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 10px;border:1px solid #7b9eb529;border-radius:20px;background:rgb(var(--panel));color:#557f9c;cursor:pointer;font-size:11px}
-.map-summary .map-agent-toggle i{display:block;flex:0 0 5px;width:5px;height:5px;margin:0;border-radius:50%;background:#94a4b0}.map-summary .map-agent-toggle i[data-active=true]{background:#5da890}
-.map-agent-drawer{position:absolute;z-index:9;right:18px;top:62px;width:min(360px,calc(100% - 36px));max-height:calc(100% - 130px);overflow:auto;overscroll-behavior:contain;background:rgb(var(--panel));border:1px solid rgb(var(--line));border-radius:18px;padding:18px;box-shadow:0 16px 60px #1834541c;animation:map-agent-enter 250ms ease-out}
+.map-agent-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 10px;border:1px solid rgb(var(--ink-faint) / 16%);border-radius:20px;background:rgb(var(--panel));color:rgb(var(--ink-dim));cursor:pointer;font-size:11px}
+.map-summary .map-agent-toggle i{display:block;flex:0 0 5px;width:5px;height:5px;margin:0;border-radius:50%;background:rgb(var(--ink-faint))}.map-summary .map-agent-toggle i[data-active=true]{background:rgb(var(--status-running))}
+.map-agent-drawer{position:absolute;z-index:9;right:18px;top:62px;width:min(360px,calc(100% - 36px));max-height:calc(100% - 130px);overflow:auto;overscroll-behavior:contain;background:rgb(var(--panel));border:1px solid rgb(var(--line));border-radius:18px;padding:18px;box-shadow:0 16px 60px rgb(0 0 0 / 11%);animation:map-agent-enter 250ms ease-out}
 @keyframes map-task-grow{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
 @keyframes map-step-grow{from{opacity:0;transform:translateY(14px) scale(.94);filter:blur(2px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
 @keyframes map-link-grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
diff --git a/frontend/web/src/map/submap.css b/frontend/web/src/map/submap.css
index 9be8f80c8..d87839523 100644
--- a/frontend/web/src/map/submap.css
+++ b/frontend/web/src/map/submap.css
@@ -9,9 +9,9 @@
   position: relative;
   background: var(--map-paper);
   border: 2px solid rgb(var(--line) / 0.9);
-  border-top: 7px solid var(--state, #9babbc);
+  border-top: 7px solid var(--state, rgb(var(--ink-faint)));
   border-radius: 32px;
-  box-shadow: 0 10px 36px #24364c0b;
+  box-shadow: 0 10px 36px rgb(0 0 0 / 4%);
   opacity: var(--context-alpha);
   transition:
     opacity 150ms ease,
@@ -19,7 +19,7 @@
 }
 .map-macro[data-focused="true"] {
   opacity: 1;
-  border-color: #82a6c5;
+  border-color: rgb(var(--ink-faint));
 }
 .argus-map .map-macro > .react-flow__handle {
   width: 24px;
@@ -45,7 +45,7 @@
   min-height: 196px;
 }
 .macro-summary .map-card:focus-visible {
-  outline: 2px solid #7da6c7;
+  outline: 2px solid rgb(var(--ink-faint));
   outline-offset: 1px;
 }
 .map-card-submap-hint {
@@ -53,7 +53,7 @@
   align-items: center;
   gap: 4px;
   margin-left: auto;
-  color: #6a8da8;
+  color: rgb(var(--ink-dim));
 }
 .macro-detail {
   position: absolute;
@@ -101,15 +101,15 @@
   text-overflow: ellipsis;
 }
 .macro-state {
-  color: color-mix(in srgb, var(--state, #859eb5) 82%, rgb(var(--ink)));
+  color: color-mix(in srgb, var(--state, rgb(var(--ink-faint))) 82%, rgb(var(--ink)));
   font-size: 12px;
   font-weight: 550;
   line-height: 1;
   white-space: nowrap;
   padding: 7px 12px;
-  border: 1px solid color-mix(in srgb, var(--state, #859eb5) 28%, transparent);
+  border: 1px solid color-mix(in srgb, var(--state, rgb(var(--ink-faint))) 28%, transparent);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--state, #859eb5) 10%, transparent);
+  background: color-mix(in srgb, var(--state, rgb(var(--ink-faint))) 10%, transparent);
 }
 /* A stacked card (one column, phone width) lets its heading wrap: the title
  * on one row and the chips on the next. */
@@ -120,9 +120,9 @@
 .macro-detail[data-stacked="true"] .macro-heading > button { order: 4; white-space: nowrap; }
 .macro-detail[data-stacked="true"] .macro-stage-key { top: 222px; flex-wrap: wrap; }
 /* A subtask's verdict, where its state used to be. */
-.submap-step-meta small[data-verdict="rejected"] { color: #bd785f; font-weight: 600; }
-.submap-step-meta small[data-verdict="chosen"] { color: #3f8f68; font-weight: 600; }
-.submap-step-meta small[data-verdict="qualified"] { color: #528e73; font-weight: 600; }
+.submap-step-meta small[data-verdict="rejected"] { color: rgb(var(--err)); font-weight: 600; }
+.submap-step-meta small[data-verdict="chosen"] { color: rgb(var(--ink)); font-weight: 600; }
+.submap-step-meta small[data-verdict="qualified"] { color: rgb(var(--ink)); font-weight: 600; }
 .macro-stage-key {
   position: absolute;
   left: 48px;
@@ -170,26 +170,26 @@
   background: rgb(var(--ink-faint) / 0.45);
 }
 .macro-column-label > span {
-  color: #94a5b6;
+  color: rgb(var(--ink-faint));
   font:
     13px "Geist Mono Variable",
     monospace;
   padding-top: 3px;
 }
 .submap-kind-plan {
-  --step-color: #ad9262;
+  --step-color: rgb(var(--ink-dim));
 }
 .submap-kind-execution {
-  --step-color: #618faf;
+  --step-color: rgb(var(--ink-dim));
 }
 .submap-kind-review {
-  --step-color: #9882b0;
+  --step-color: rgb(var(--ink-dim));
 }
 .submap-kind-revision {
-  --step-color: #b48b62;
+  --step-color: rgb(var(--ink-dim));
 }
 .submap-kind-result {
-  --step-color: #609884;
+  --step-color: rgb(var(--ink-dim));
 }
 .submap-step {
   position: absolute;
@@ -203,7 +203,7 @@
   border: 1.5px solid rgb(var(--line) / 0.8);
   border-radius: 13px;
   background: var(--map-paper);
-  box-shadow: 0 4px 13px #24364c08;
+  box-shadow: 0 4px 13px rgb(0 0 0 / 3%);
   transition:
     border-color 120ms ease,
     box-shadow 120ms ease;
@@ -213,7 +213,7 @@
 .submap-step:focus-visible {
   outline: none;
   border-color: var(--step-color);
-  box-shadow: 0 4px 18px #24364c14;
+  box-shadow: 0 4px 18px rgb(0 0 0 / 8%);
 }
 .submap-step-meta {
   display: flex;
@@ -294,7 +294,7 @@
   fill: var(--map-paper);
 }
 .submap-relation-label text {
-  fill: #8297aa;
+  fill: rgb(var(--ink-faint));
   font-size: 13px;
 }
 .macro-evidence {
@@ -323,7 +323,7 @@
 .macro-step-detail > span,
 .macro-step-detail > small {
   font-size: 12px;
-  color: #8b9faf;
+  color: rgb(var(--ink-faint));
 }
 .macro-step-detail p {
   white-space: pre-wrap;
@@ -344,16 +344,16 @@
 }
 .map-timeline-context path {
   fill: none;
-  stroke: #aabac9;
+  stroke: rgb(var(--silver));
   stroke-width: 1;
   stroke-dasharray: 3 5;
   vector-effect: non-scaling-stroke;
 }
 .map-timeline-context circle {
-  fill: #aabac9;
+  fill: rgb(var(--silver));
 }
 .map-timeline-context text {
-  fill: #899daf;
+  fill: rgb(var(--ink-faint));
   font-size: 36px;
   letter-spacing: 1px;
 }
@@ -363,21 +363,21 @@
 }
 .map-relation-label {
   position: absolute;
-  color: #426783;
+  color: rgb(var(--ink));
   background: var(--map-paper);
-  border: 1px solid #92aabd55;
+  border: 1px solid rgb(var(--ink-faint) / 33%);
   border-radius: 7px;
   padding: 3px 7px;
   font-size: 12px;
   font-weight: 500;
   line-height: 18px;
   white-space: nowrap;
-  box-shadow: 0 2px 7px #294c6a0b;
+  box-shadow: 0 2px 7px rgb(0 0 0 / 4%);
   opacity: var(--context-alpha);
   pointer-events: none;
 }
 .map-legend .replacement {
-  border-color: #a48caf;
+  border-color: rgb(var(--ink-dim));
   border-top-style: dashed;
 }
 .map-legend button:disabled {
@@ -393,7 +393,7 @@
   height: 100%;
 }
 .map-back-button {
-  color: #517fa6 !important;
+  color: rgb(var(--ink)) !important;
 }
 @media (max-width: 800px) {
   .map-legend {
@@ -420,8 +420,8 @@
 /* Focus changes the camera; content layout determines the frame dimensions. */
 .map-macro {
   box-shadow:
-    0 16px 48px #233d5818,
-    0 3px 8px #233d5810;
+    0 16px 48px rgb(0 0 0 / 9%),
+    0 3px 8px rgb(0 0 0 / 6%);
 }
 .macro-detail {
   transition: transform 260ms ease;
@@ -433,34 +433,34 @@
 }
 .submap-step {
   box-shadow:
-    0 6px 20px #233d5812,
-    0 2px 4px #233d5808;
+    0 6px 20px rgb(0 0 0 / 7%),
+    0 2px 4px rgb(0 0 0 / 3%);
 }
 /* Step entrance is driven by newly received evidence, not component mounts. */
 .map-macro[data-active="true"] {
-  border-color: #74a5c7;
+  border-color: rgb(var(--ink-faint));
 }
 .map-macro[data-active="true"] .macro-state,
 .submap-step[data-active="true"] .submap-step-meta {
-  color: color-mix(in srgb, #4a86c5 82%, rgb(var(--ink)));
+  color: color-mix(in srgb, rgb(var(--status-running)) 82%, rgb(var(--ink)));
 }
 .map-macro[data-active="true"] .map-state-dot {
   animation: map-working 2.2s ease-in-out infinite;
 }
 .submap-step[data-active="true"] {
-  border-color: #6ca1c4;
-  border-left: 3px solid #4a86c5;
+  border-color: rgb(var(--ink-faint));
+  border-left: 3px solid rgb(var(--status-running));
   animation: submap-step-pulse 2s ease-in-out infinite;
 }
 .macro-reader {
-  --reader-accent: #8facc3;
+  --reader-accent: rgb(var(--ink-faint));
   position: absolute;
   z-index: 4;
-  border: 1.5px solid #8facc3;
+  border: 1.5px solid rgb(var(--ink-faint));
   border-top: 3px solid var(--reader-accent);
   border-radius: 22px;
   background: var(--map-paper);
-  box-shadow: 0 20px 65px #28435c25;
+  box-shadow: 0 20px 65px rgb(0 0 0 / 15%);
   padding: 22px 30px 20px;
   display: flex;
   flex-direction: column;
@@ -469,19 +469,19 @@
 /* The reader follows the selected step in the detail plane, so the sibling
  * combinator can carry the step kind onto the popover without extra markup. */
 .submap-step.submap-kind-plan.is-selected ~ .macro-reader {
-  --reader-accent: #ad9262;
+  --reader-accent: rgb(var(--ink-dim));
 }
 .submap-step.submap-kind-execution.is-selected ~ .macro-reader {
-  --reader-accent: #618faf;
+  --reader-accent: rgb(var(--ink-dim));
 }
 .submap-step.submap-kind-review.is-selected ~ .macro-reader {
-  --reader-accent: #9882b0;
+  --reader-accent: rgb(var(--ink-dim));
 }
 .submap-step.submap-kind-revision.is-selected ~ .macro-reader {
-  --reader-accent: #b48b62;
+  --reader-accent: rgb(var(--ink-dim));
 }
 .submap-step.submap-kind-result.is-selected ~ .macro-reader {
-  --reader-accent: #609884;
+  --reader-accent: rgb(var(--ink-dim));
 }
 .macro-reader header {
   display: flex;
@@ -613,10 +613,10 @@
 @keyframes map-step-working {
   0%,
   100% {
-    box-shadow: 0 4px 16px #497ea51a;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
   }
   50% {
-    box-shadow: 0 5px 25px #497ea536;
+    box-shadow: 0 5px 25px rgb(0 0 0 / 21%);
   }
 }
 @media (max-width: 640px) {
@@ -641,7 +641,7 @@
 }
 
 .map-live-phase {
-  color: #5689ac;
+  color: rgb(var(--ink));
   display: flex;
   align-items: center;
   gap: 6px;
@@ -689,7 +689,7 @@
 }
 .macro-part-nav button:hover:not(:disabled),
 .macro-part-nav button:focus-visible:not(:disabled) {
-  border-color: #7ca9c8;
+  border-color: rgb(var(--ink-faint));
   color: rgb(var(--blue));
   background: rgb(var(--blue) / 0.05);
 }
@@ -712,10 +712,10 @@
     border: 1px solid rgb(var(--line) / 0.7);
     border-radius: 7px;
     background: var(--map-paper);
-    box-shadow: 0 2px 6px #24364c05;
+    box-shadow: 0 2px 6px rgb(0 0 0 / 2%);
     font-size: 12px;
     font-variant-numeric: tabular-nums;
-    color: #527fa7;
+    color: rgb(var(--ink));
   }
   .map-part-switcher button {
     display: grid;
@@ -747,23 +747,23 @@
 /* Step outcome is legible per card: status recolors the meta, terminal failure
  * and live work mark the left edge, replaced work visibly recedes. */
 .submap-step[data-status="done"] .submap-step-meta small {
-  color: color-mix(in srgb, #528e73 78%, rgb(var(--ink)));
+  color: color-mix(in srgb, rgb(var(--ink)) 78%, rgb(var(--ink)));
 }
 .submap-step[data-status="done"] .submap-step-meta small::before {
   content: "✓ ";
-  color: color-mix(in srgb, #528e73 60%, transparent);
+  color: color-mix(in srgb, rgb(var(--ink)) 60%, transparent);
 }
 .submap-step[data-status="failed"] {
-  border-left: 3px solid color-mix(in srgb, #bd785f 75%, transparent);
+  border-left: 3px solid color-mix(in srgb, rgb(var(--err)) 75%, transparent);
 }
 .submap-step[data-status="failed"] .submap-step-meta small {
-  color: color-mix(in srgb, #bd785f 82%, rgb(var(--ink)));
+  color: color-mix(in srgb, rgb(var(--err)) 82%, rgb(var(--ink)));
 }
 .submap-step[data-status="running"] {
-  border-left: 3px solid #4a86c5;
+  border-left: 3px solid rgb(var(--status-running));
 }
 .submap-step[data-status="running"] .submap-step-meta small {
-  color: color-mix(in srgb, #4a86c5 82%, rgb(var(--ink)));
+  color: color-mix(in srgb, rgb(var(--status-running)) 82%, rgb(var(--ink)));
 }
 .submap-step.is-selected {
   outline: 2px solid color-mix(in srgb, var(--step-color) 80%, rgb(var(--ink)));
@@ -772,10 +772,10 @@
 @keyframes submap-step-pulse {
   0%,
   100% {
-    border-left-color: #4a86c573;
+    border-left-color: rgb(var(--status-running) / 45%);
   }
   50% {
-    border-left-color: #4a86c5;
+    border-left-color: rgb(var(--status-running));
   }
 }
 @media (prefers-reduced-motion: reduce) {
diff --git a/frontend/web/src/research-workbench/styles.css b/frontend/web/src/research-workbench/styles.css
index 71d12d432..401f92d74 100644
--- a/frontend/web/src/research-workbench/styles.css
+++ b/frontend/web/src/research-workbench/styles.css
@@ -35,8 +35,8 @@
   .integrated-workbench .button { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--radius-control); background: rgb(var(--surface-2)); padding: 5px 12px; color: rgb(var(--text)); font-size: 13px; font-weight: 500; box-shadow: none; transition: color .15s, background .15s; }
   .integrated-workbench .button:hover:not(:disabled) { background: rgb(var(--border)); }
 
-  .integrated-workbench .badge { display: inline-flex; min-height: 22px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: rgb(var(--surface-2)); padding: 3px 8px; color: rgb(var(--muted)); font-size: 10px; font-weight: 610; line-height: 1.2; white-space: nowrap; }
-  .integrated-workbench .badge--info { border-color: rgb(var(--blue) / .2); background: rgb(var(--blue-bg)); color: rgb(var(--blue)); }
+  .integrated-workbench .badge { display: inline-flex; min-height: 22px; align-items: center; gap: 5px; border: 0; border-radius: 999px; background: rgb(var(--surface-2)); padding: 3px 10px; color: rgb(var(--muted)); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
+  .integrated-workbench .badge--info { background: rgb(var(--surface-2)); color: rgb(var(--muted)); }
   .integrated-workbench .badge--success, .integrated-workbench .badge--live { border-color: rgb(var(--green) / .22); background: rgb(var(--green-bg)); color: rgb(var(--green)); }
   .integrated-workbench .badge--warn { border-color: rgb(var(--amber) / .22); background: rgb(var(--amber-bg)); color: rgb(var(--amber)); }
   .integrated-workbench .badge--danger { border-color: rgb(var(--red) / .22); background: rgb(var(--red-bg)); color: rgb(var(--red)); }
@@ -142,8 +142,8 @@
   }
   .integrated-workbench .vscode-shell { min-width: 0; height: 760px; display: grid; grid-template-columns: 44px 245px minmax(480px, 1fr) 330px; grid-template-rows: minmax(0, 1fr) 22px; overflow: hidden; border: 1px solid rgb(var(--vscode-line)); border-radius: 12px; background: rgb(var(--vscode-bg)); color: rgb(var(--vscode-text)); box-shadow: var(--shadow-2); }
   .integrated-workbench .vscode-activitybar { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: rgb(var(--vscode-panel)); padding-top: 5px; }.integrated-workbench .vscode-activitybar button { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-left: 2px solid transparent; background: transparent; color: rgb(var(--vscode-muted)); }.integrated-workbench .vscode-activitybar button:hover, .integrated-workbench .vscode-activitybar button.is-active { color: rgb(var(--vscode-blue)); background: rgb(var(--vscode-selected)); }.integrated-workbench .vscode-activitybar button.is-active { border-left-color: rgb(var(--vscode-blue)); }.integrated-workbench .vscode-activitybar i { position: absolute; right: 3px; bottom: 3px; min-width: 16px; height: 16px; border-radius: 999px; background: rgb(var(--blue-deep)); color: white; font-style: normal; line-height: 16px; text-align: center; }
-  .integrated-workbench .vscode-sidebar { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid rgb(var(--vscode-line)); background: rgb(var(--vscode-side)); }.integrated-workbench .vscode-sidebar > header { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; }.integrated-workbench .vscode-sidebar > header span { letter-spacing: .08em; }.integrated-workbench .vscode-sidebar > header button { display: grid; place-items: center; background: transparent; color: rgb(var(--vscode-muted)); }.integrated-workbench .vscode-root { height: 25px; display: flex; align-items: center; gap: 4px; background: rgb(var(--vscode-panel)); padding: 0 7px; text-transform: uppercase; }.integrated-workbench .vscode-sidebar .workspace-tree { background: rgb(var(--vscode-side)); }.integrated-workbench .vscode-sidebar .workspace-node > button { color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-sidebar .workspace-node > button:hover { background: rgb(var(--vscode-hover)); }.integrated-workbench .vscode-sidebar .workspace-node > button.is-selected { background: rgb(var(--vscode-selected)); color: rgb(var(--vscode-blue)); box-shadow: inset 2px 0 rgb(var(--vscode-blue)); }.integrated-workbench .vscode-changes { overflow: auto; padding: 4px; }.integrated-workbench .vscode-changes button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px; border-radius: 3px; background: transparent; padding: 5px; color: rgb(var(--vscode-text)); text-align: left; }.integrated-workbench .vscode-changes button:hover { background: rgb(var(--vscode-hover)); }.integrated-workbench .vscode-changes b { color: rgb(var(--role-engineer)); }.integrated-workbench .vscode-changes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .integrated-workbench .vscode-editor { grid-column: 3; grid-row: 1; min-width: 0; display: flex; flex-direction: column; background: rgb(var(--vscode-bg)); }.integrated-workbench .vscode-tabs { height: 36px; flex: 0 0 36px; display: flex; background: rgb(var(--vscode-panel)); }.integrated-workbench .vscode-tabs button { min-width: 180px; max-width: 60%; display: flex; align-items: center; gap: 6px; border-top: 1px solid rgb(var(--vscode-blue)); background: rgb(var(--vscode-bg)); padding: 0 10px; color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-breadcrumbs { height: 28px; flex: 0 0 28px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid rgb(var(--vscode-line)); padding: 0 11px; color: rgb(var(--vscode-muted)); }.integrated-workbench .vscode-breadcrumbs span { display: flex; align-items: center; white-space: nowrap; }.integrated-workbench .vscode-editor-surface { min-height: 0; flex: 1; overflow: hidden; }.integrated-workbench .vscode-editor-surface .empty-state { color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-editor-surface .empty-state__icon { border-color: rgb(var(--vscode-line)); background: rgb(var(--vscode-side)); }.integrated-workbench .vscode-code { height: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); overflow: auto; background: rgb(var(--vscode-bg)); font-family: var(--mono); line-height: 1.7; }.integrated-workbench .vscode-line-numbers { position: sticky; left: 0; display: flex; flex-direction: column; align-items: flex-end; background: rgb(var(--vscode-bg)); padding: 12px 9px; color: rgb(var(--vscode-muted)); user-select: none; }.integrated-workbench .vscode-line-numbers span { height: 1.7em; flex: none; }.integrated-workbench .vscode-code pre { min-width: max-content; margin: 0; padding: 12px 18px 60px 8px; color: rgb(var(--vscode-text)); tab-size: 2; white-space: pre; }.integrated-workbench .vscode-editor-surface .workspace-pdf, .integrated-workbench .vscode-editor-surface .workspace-image { background: rgb(var(--vscode-bg)); }
+  .integrated-workbench .vscode-sidebar { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid rgb(var(--vscode-line)); background: rgb(var(--vscode-side)); }.integrated-workbench .vscode-sidebar > header { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; }.integrated-workbench .vscode-sidebar > header span { letter-spacing: .08em; }.integrated-workbench .vscode-sidebar > header button { display: grid; place-items: center; background: transparent; color: rgb(var(--vscode-muted)); }.integrated-workbench .vscode-root { height: 25px; display: flex; align-items: center; gap: 4px; background: rgb(var(--vscode-panel)); padding: 0 7px; font-weight: 500; }.integrated-workbench .vscode-sidebar .workspace-tree { background: rgb(var(--vscode-side)); }.integrated-workbench .vscode-sidebar .workspace-node > button { color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-sidebar .workspace-node > button:hover { background: rgb(var(--vscode-hover)); }.integrated-workbench .vscode-sidebar .workspace-node > button.is-selected { background: rgb(var(--vscode-selected)); color: rgb(var(--vscode-blue)); box-shadow: inset 2px 0 rgb(var(--vscode-blue)); }.integrated-workbench .vscode-changes { overflow: auto; padding: 4px; }.integrated-workbench .vscode-changes button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px; border-radius: 3px; background: transparent; padding: 5px; color: rgb(var(--vscode-text)); text-align: left; }.integrated-workbench .vscode-changes button:hover { background: rgb(var(--vscode-hover)); }.integrated-workbench .vscode-changes b { color: rgb(var(--role-engineer)); }.integrated-workbench .vscode-changes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .integrated-workbench .vscode-editor { grid-column: 3; grid-row: 1; min-width: 0; display: flex; flex-direction: column; background: rgb(var(--vscode-bg)); }.integrated-workbench .vscode-tabs { height: 36px; flex: 0 0 36px; display: flex; background: rgb(var(--vscode-panel)); }.integrated-workbench .vscode-tabs button { min-width: 180px; max-width: 60%; display: flex; align-items: center; gap: 6px; background: rgb(var(--vscode-bg)); padding: 0 10px; color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-breadcrumbs { height: 28px; flex: 0 0 28px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid rgb(var(--vscode-line)); padding: 0 11px; color: rgb(var(--vscode-muted)); }.integrated-workbench .vscode-breadcrumbs span { display: flex; align-items: center; white-space: nowrap; }.integrated-workbench .vscode-editor-surface { min-height: 0; flex: 1; overflow: hidden; }.integrated-workbench .vscode-editor-surface .empty-state { color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-editor-surface .empty-state__icon { border-color: rgb(var(--vscode-line)); background: rgb(var(--vscode-side)); }.integrated-workbench .vscode-code { height: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); overflow: auto; background: rgb(var(--vscode-bg)); font-family: var(--mono); line-height: 1.7; }.integrated-workbench .vscode-line-numbers { position: sticky; left: 0; display: flex; flex-direction: column; align-items: flex-end; background: rgb(var(--vscode-bg)); padding: 12px 9px; color: rgb(var(--vscode-muted)); user-select: none; }.integrated-workbench .vscode-line-numbers span { height: 1.7em; flex: none; }.integrated-workbench .vscode-code pre { min-width: max-content; margin: 0; padding: 12px 18px 60px 8px; color: rgb(var(--vscode-text)); tab-size: 2; white-space: pre; }.integrated-workbench .vscode-editor-surface .workspace-pdf, .integrated-workbench .vscode-editor-surface .workspace-image { background: rgb(var(--vscode-bg)); }
   .integrated-workbench .vscode-source-control { grid-column: 4; grid-row: 1; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid rgb(var(--vscode-line)); background: rgb(var(--vscode-side)); }.integrated-workbench .vscode-source-control > header { height: 49px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(var(--vscode-line)); padding: 0 10px; }.integrated-workbench .vscode-source-control > header > div { min-width: 0; display: flex; flex-direction: column; }.integrated-workbench .vscode-source-control header span { color: rgb(var(--vscode-muted)); letter-spacing: .08em; }.integrated-workbench .vscode-source-control header strong { margin-top: 2px; }.integrated-workbench .vscode-sc-tabs { height: 31px; display: flex; border-bottom: 1px solid rgb(var(--vscode-line)); }.integrated-workbench .vscode-sc-tabs button { flex: 1; border-bottom: 1px solid transparent; background: transparent; color: rgb(var(--vscode-muted)); }.integrated-workbench .vscode-sc-tabs button.is-active { border-bottom-color: rgb(var(--vscode-blue)); color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-git-content { min-height: 0; flex: 1; overflow: auto; }.integrated-workbench .vscode-status { margin: 0; padding: 10px; color: rgb(var(--vscode-text)); font-family: var(--mono); line-height: 1.55; white-space: pre-wrap; }.integrated-workbench .vscode-status { border-bottom: 1px solid rgb(var(--vscode-line)); color: rgb(var(--vscode-text)); }.integrated-workbench .vscode-commits { padding: 5px; }.integrated-workbench .vscode-commits > button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 5px; width: 100%; padding: 6px; text-align: left; }.integrated-workbench .vscode-commits strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.integrated-workbench .vscode-commits small { color: rgb(var(--vscode-muted)); }
   .integrated-workbench .vscode-statusbar { grid-column: 1 / 5; grid-row: 2; display: flex; align-items: center; gap: 15px; border-top: 1px solid rgb(var(--vscode-line)); background: rgb(var(--vscode-panel)); padding: 0 8px; color: rgb(var(--vscode-muted)); }.integrated-workbench .vscode-statusbar span { display: flex; align-items: center; gap: 4px; }.integrated-workbench .vscode-statusbar span:nth-child(2) { margin-right: auto; }
 

From ea3386f8a5abc2d4ba6d3bf3f5f90a40e726be55 Mon Sep 17 00:00:00 2001
From: lbx154 <145820328+lbx154@users.noreply.github.com>
Date: Tue, 3 Nov 2026 06:47:14 -0800
Subject: [PATCH 5/6] =?UTF-8?q?=E5=BC=B9=E5=87=BA=E5=B1=82=EF=BC=9A?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E8=81=9A=E7=84=A6=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E5=A5=97=E9=BB=91=E6=A1=86=EF=BC=8C=E6=8C=89=E9=92=AE=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E8=83=B6=E5=9B=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 文本框聚焦只加深自身边框，不再画 2px 外框；按钮和链接保留键盘焦点框
- 带边框的按钮统一胶囊，输入框 12px 圆角；设置面板输入框不再跟着变胶囊
- 环境变量表单：标签与输入框留空，保存为黑色主按钮
- 命令面板：选中行内缩圆角、灰底；分组标题不再全大写；项目行去掉 ○
- 成果预览：文件名用正文字体，不用等宽粗体
- 成果与文件面板的“最新成果”：细灰边，打开为黑色胶囊

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/web/src/App.tsx                              |  2 +-
 frontend/web/src/components/ArtifactModal.tsx         |  2 +-
 .../src/components/BrowserNotificationSettings.tsx    |  2 +-
 frontend/web/src/components/CommandPalette.tsx        |  8 ++++----
 frontend/web/src/components/CredentialsSettings.tsx   |  4 ++--
 frontend/web/src/components/ResearchCanvas.tsx        |  8 ++++----
 frontend/web/src/components/experience.css            |  2 +-
 frontend/web/src/index.css                            | 11 +++++++++++
 8 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/frontend/web/src/App.tsx b/frontend/web/src/App.tsx
index 6e8273d19..df90e9c24 100644
--- a/frontend/web/src/App.tsx
+++ b/frontend/web/src/App.tsx
@@ -818,7 +818,7 @@ export default function App() {
     const proj: PaletteItem[] = projects.map((p) => ({
       id: `p-${p.id}`,
       label: shownName(p, locale === 'zh-CN', t('sidebar.unnamedSession')),
-      hint: p.daemon_alive ? `● ${t('common.live')}` : '○',
+      hint: p.daemon_alive ? t('common.live') : undefined,
       keywords: `${p.id} ${p.display_name ?? ''} ${p.daemon_alive ? 'live running' : 'stopped idle'}`,
       group: t('palette.project'),
       run: () => selectProject(p.id),
diff --git a/frontend/web/src/components/ArtifactModal.tsx b/frontend/web/src/components/ArtifactModal.tsx
index 3f752ca9c..c3cd2a903 100644
--- a/frontend/web/src/components/ArtifactModal.tsx
+++ b/frontend/web/src/components/ArtifactModal.tsx
@@ -166,7 +166,7 @@ export function ArtifactModal({
       {/* On a phone the file's tools wrap onto their own rows under its name. */}
       <div className={`flex shrink-0 flex-wrap items-start gap-2 border-b border-line px-4 py-3 sm:px-5 ${!path ? "hidden" : ""}`}>
         <div className="min-w-0 flex-1">
-          <h2 className="truncate text-sm font-semibold text-ink font-mono" title={info?.path ?? path ?? ''}>
+          <h2 className="truncate text-[15px] font-semibold tracking-[-0.01em] text-ink" title={info?.path ?? path ?? ''}>
             {info?.name ?? path ?? t('artifact.title')}
           </h2>
           <p className="mt-0.5 truncate text-[11px] text-ink-faint">
diff --git a/frontend/web/src/components/BrowserNotificationSettings.tsx b/frontend/web/src/components/BrowserNotificationSettings.tsx
index a2f338b8c..c9807e1b6 100644
--- a/frontend/web/src/components/BrowserNotificationSettings.tsx
+++ b/frontend/web/src/components/BrowserNotificationSettings.tsx
@@ -20,7 +20,7 @@ export function BrowserNotificationSettings({ notifications }: {
     <button type="button" role="switch" aria-checked={enabled} aria-labelledby="browser-notifications-label"
       aria-describedby="browser-notifications-detail" disabled={unavailable || requesting}
       onClick={() => void change()}
-      className="shrink-0 rounded-lg border border-line px-3 py-2 text-sm text-ink disabled:opacity-40">
+      className="shrink-0 rounded-full border border-line px-4 py-2 text-sm text-ink disabled:opacity-40">
       {requesting ? (zh ? '正在请求权限…' : 'Requesting permission…') : enabled ? (zh ? '已开启' : 'On') : (zh ? '已关闭' : 'Off')}
     </button>
   </section>;
diff --git a/frontend/web/src/components/CommandPalette.tsx b/frontend/web/src/components/CommandPalette.tsx
index 7e024503d..970bf004c 100644
--- a/frontend/web/src/components/CommandPalette.tsx
+++ b/frontend/web/src/components/CommandPalette.tsx
@@ -103,7 +103,7 @@ export function CommandPalette({
           aria-autocomplete="list"
           aria-controls="command-palette-results"
           aria-activedescendant={filtered[sel] ? `palette-${filtered[sel].id}` : undefined}
-          className="w-full bg-transparent font-mono text-sm text-ink outline-none placeholder:text-ink-faint"
+          className="w-full bg-transparent text-[15px] text-ink outline-none placeholder:text-ink-faint"
         />
       </div>
       <div id="command-palette-results" role="listbox" className="max-h-[52vh] overflow-y-auto scroll-thin py-1.5">
@@ -112,7 +112,7 @@ export function CommandPalette({
         )}
         {groups.map((g) => (
           <div key={g.name} className="mb-1">
-            <div className="px-4 py-1 text-[10px] font-semibold uppercase tracking-wider text-ink-faint">
+            <div className="px-5 pb-1 pt-2 text-[11px] text-ink-faint">
               {g.name}
             </div>
             {g.items.map((it) => {
@@ -127,8 +127,8 @@ export function CommandPalette({
                   aria-selected={active}
                   onMouseEnter={() => setSel(filtered.indexOf(it))}
                   onClick={() => choose(it)}
-                  className={`flex w-full items-center justify-between px-4 py-1.5 text-left text-sm transition-colors ${
-                    active ? 'bg-blue-deep/20 text-ink' : 'text-ink-dim hover:bg-panel/60'
+                  className={`mx-2 flex w-[calc(100%-1rem)] items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+                    active ? 'bg-sunken text-ink' : 'text-ink-dim'
                   }`}
                 >
                   <span className="min-w-0 truncate">{it.label}</span>
diff --git a/frontend/web/src/components/CredentialsSettings.tsx b/frontend/web/src/components/CredentialsSettings.tsx
index e082852ee..c01deb8f8 100644
--- a/frontend/web/src/components/CredentialsSettings.tsx
+++ b/frontend/web/src/components/CredentialsSettings.tsx
@@ -36,7 +36,7 @@ export function CredentialsSettings() {
     catch (reason) { setError(requestFailureText(reason, t).text); }
     finally { setBusy(false); }
   };
-  const fieldClass = 'mt-1 w-full min-w-0 rounded border border-line bg-bg px-3 py-2 text-sm text-ink outline-none focus:border-blue';
+  const fieldClass = 'mt-2 w-full min-w-0 rounded-xl border border-line bg-bg px-3 py-2 text-sm text-ink outline-none focus:border-ink-faint';
   return <section className="settings-section">
     <h3 className="text-sm font-semibold text-ink">{zh ? '传给角色的环境变量' : 'Environment for roles'}</h3>
     <p className="my-2 text-xs leading-5 text-ink-faint">{zh
@@ -51,7 +51,7 @@ export function CredentialsSettings() {
         <textarea name="credential-value" rows={2} autoComplete="off" spellCheck={false} value={value}
           onChange={event => { setValue(event.target.value); setSaved(false); }} className={fieldClass} />
       </label>
-      <button type="submit" disabled={busy} className="rounded border border-blue/35 px-3 py-2 text-xs text-blue disabled:opacity-40">{zh ? '保存变量' : 'Save variable'}</button>
+      <button type="submit" disabled={busy} className="rounded-full bg-ink px-4 py-2 text-xs font-medium text-on-accent disabled:opacity-40">{zh ? '保存变量' : 'Save variable'}</button>
     </form>
     {saved && <p role="status" className="mt-2 text-xs text-ink-dim">{zh ? '已保存' : 'Saved'}</p>}
     {error && <p role="alert" className="mt-2 text-xs text-err">{error}</p>}
diff --git a/frontend/web/src/components/ResearchCanvas.tsx b/frontend/web/src/components/ResearchCanvas.tsx
index 23355e2b5..ffaf4b0b7 100644
--- a/frontend/web/src/components/ResearchCanvas.tsx
+++ b/frontend/web/src/components/ResearchCanvas.tsx
@@ -280,12 +280,12 @@ export function ResearchCanvas({
 
       {filesFirst && latestDelivery ? (
         <button type="button" data-latest-result onClick={() => onOpenDelivery?.(latestDelivery)} disabled={!onOpenDelivery}
-          className="mx-3 mt-3 flex shrink-0 items-center gap-3 rounded-lg border border-ok/35 bg-ok/5 px-3 py-2.5 text-left hover:border-ok/60 disabled:cursor-default">
+          className="mx-3 mt-3 flex shrink-0 items-center gap-3 rounded-2xl border border-line px-4 py-3 text-left transition-colors hover:border-ink-faint disabled:cursor-default">
           <span className="min-w-0 flex-1">
-            <span className="block text-[10px] font-semibold uppercase tracking-[0.12em] text-ok">{locale === 'zh-CN' ? '最新成果' : 'Latest result'}</span>
-            <span className="mt-0.5 block truncate text-sm font-medium text-ink" title={latestDelivery.title}>{latestDelivery.title}</span>
+            <span className="block text-[11px] text-ink-faint">{locale === 'zh-CN' ? '最新成果' : 'Latest result'}</span>
+            <span className="mt-0.5 block truncate text-[15px] font-semibold text-ink" title={latestDelivery.title}>{latestDelivery.title}</span>
           </span>
-          {onOpenDelivery ? <span className="shrink-0 text-xs font-medium text-ok">{locale === 'zh-CN' ? '打开' : 'Open'}</span> : null}
+          {onOpenDelivery ? <span className="shrink-0 rounded-full bg-ink px-3 py-1 text-xs font-medium text-on-accent">{locale === 'zh-CN' ? '打开' : 'Open'}</span> : null}
         </button>
       ) : null}
       {!filesFirst && snapshot ? <WorkStatusBar snapshot={snapshot} connected={connected} compact /> : null}
diff --git a/frontend/web/src/components/experience.css b/frontend/web/src/components/experience.css
index 99d713792..d0ca2469d 100644
--- a/frontend/web/src/components/experience.css
+++ b/frontend/web/src/components/experience.css
@@ -27,7 +27,7 @@
 .settings-body { padding: 0 24px 24px; font-size: 14px; }
 .settings-sections { display: flex; flex-direction: column; gap: 24px; }
 .settings-section { border-top: 1px solid rgb(var(--line)); padding-top: 20px; }
-.settings-body :is(select, input:not([type="checkbox"])) { min-height: var(--control-height); border-color: rgb(var(--field-line)); border-radius: var(--radius-control); }
+.settings-body :is(select, input:not([type="checkbox"])) { min-height: var(--control-height); border-color: rgb(var(--field-line)); border-radius: 12px; }
 .settings-body :is(button, summary) { min-height: var(--control-height); }
 .settings-body summary { display: flex; align-items: center; }
 .settings-body :is(input, select) { max-width: 100%; }
diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index 4a8bcc7b0..c7a89d804 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -780,6 +780,17 @@ button {
   outline-offset: 2px;
 }
 
+/* A text field shows focus with its own border, not a ring around it; the
+ * composer and search wrappers show it with :focus-within. */
+:where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']), textarea, select):focus-visible {
+  outline: none;
+  border-color: rgb(var(--ink-dim));
+}
+
+/* One shape for controls: a bordered button is a pill, a text field a soft box. */
+button.rounded:is([class*=' border '], [class$=' border'], [class^='border '], [class*=' border-line']):not([class*='border-t']) { border-radius: 999px; }
+:is(input, textarea).rounded, :is(input, textarea).rounded-md { border-radius: 12px; }
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

From ed764f6e2c4e8757fccb85c2cfd50141763bede4 Mon Sep 17 00:00:00 2001
From: lbx154 <145820328+lbx154@users.noreply.github.com>
Date: Tue, 3 Nov 2026 09:29:35 -0800
Subject: [PATCH 6/6] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=EF=BC=9A?=
 =?UTF-8?q?=E7=BA=BF=E6=9D=A1=E5=9B=BE=E6=A0=87=E3=80=81=E6=9B=B4=E5=AE=BD?=
 =?UTF-8?q?=E7=9A=84=E4=BE=A7=E6=A0=8F=E6=8A=BD=E5=B1=89=E3=80=81=E5=8F=AF?=
 =?UTF-8?q?=E6=BB=91=E5=8A=A8=E7=9A=84=E6=96=87=E4=BB=B6=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 底部标签栏换成与全站一致的 lucide 线条图标，字 11px，选中为黑色加粗；高 56px
- 去掉 FontAwesome（只剩 6 个图标在用，全部换成 lucide），依赖少 3 个包
- 侧栏抽屉在手机上宽 85%（最多 320px），项目名不再被截得很短
- 成果预览的文件标签在手机上右边渐隐，看得出能左右滑；选中线 2px 黑

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/web/package-lock.json                | 53 +------------------
 frontend/web/package.json                     |  3 --
 frontend/web/src/components/Landing.tsx       |  5 +-
 frontend/web/src/components/MobileTabBar.tsx  | 34 +++++-------
 .../web/src/components/ResearchCanvas.tsx     |  6 +--
 frontend/web/src/components/TeamControls.tsx  |  5 +-
 .../web/src/components/WorkspaceShell.tsx     |  2 +-
 frontend/web/src/components/delivery.css      | 10 +++-
 frontend/web/src/test/mobile.test.tsx         |  6 +--
 9 files changed, 33 insertions(+), 91 deletions(-)

diff --git a/frontend/web/package-lock.json b/frontend/web/package-lock.json
index 8ba45baaf..324c38ea1 100644
--- a/frontend/web/package-lock.json
+++ b/frontend/web/package-lock.json
@@ -10,9 +10,6 @@
       "dependencies": {
         "@fontsource-variable/geist": "^5.2.9",
         "@fontsource-variable/geist-mono": "^5.2.8",
-        "@fortawesome/fontawesome-svg-core": "^7.3.0",
-        "@fortawesome/free-solid-svg-icons": "^7.3.0",
-        "@fortawesome/react-fontawesome": "^3.4.0",
         "@tanstack/react-query": "^5.59.0",
         "@xyflow/react": "12.11.1",
         "katex": "^0.18.5",
@@ -38,13 +35,13 @@
         "@types/three": "^0.186.0",
         "@vitejs/plugin-react": "^6.0.5",
         "autoprefixer": "^10.4.20",
+        "micromark-util-types": "2.0.2",
         "postcss": "^8.5.26",
         "react-test-renderer": "18.3.1",
         "tailwindcss": "^3.4.14",
         "typescript": "^5.6.3",
         "vite": "^8.2.1",
-        "vitest": "^4.1.10",
-        "micromark-util-types": "2.0.2"
+        "vitest": "^4.1.10"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -85,52 +82,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.3.1.tgz",
-      "integrity": "sha512-k0C0sdHmZtAo6dRDtd1Z/qcpyHbL0CKsjV8seMY/21xGhY5Wsv0XRmiI/xEEH4y2c9b1+jvgNs/3EqhV27yUEA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.3.1.tgz",
-      "integrity": "sha512-BoxVN3PKnMbgStHhjoaky/oWdxHomDqmBVA24IA3KEmssFGeI7u9YT/BJceOjIum/t6TpPa/vcMKaVYQeIQ/3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.3.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.3.1.tgz",
-      "integrity": "sha512-v0BLa0eqg7ubvVWeNSHVBs8fWH/GJicERZoJaxJ3FE/lj67VSqzoMg9pzfZVOfLMX10y0pGwQAuxoRVVH2patg==",
-      "license": "(CC-BY-4.0 AND MIT)",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.3.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/react-fontawesome": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.5.0.tgz",
-      "integrity": "sha512-63mlRr6fiBbJ0wjr1Cf6dsDGtP2lNvk9lnatKgxs/fIkhslsZT291hIUzJkuUkI9yr69ZvWnWfgb2qXm4QyVaA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20"
-      },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
-        "react": "^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
diff --git a/frontend/web/package.json b/frontend/web/package.json
index 11a635855..f63b05453 100644
--- a/frontend/web/package.json
+++ b/frontend/web/package.json
@@ -14,9 +14,6 @@
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
-    "@fortawesome/fontawesome-svg-core": "^7.3.0",
-    "@fortawesome/free-solid-svg-icons": "^7.3.0",
-    "@fortawesome/react-fontawesome": "^3.4.0",
     "@tanstack/react-query": "^5.59.0",
     "@xyflow/react": "12.11.1",
     "katex": "^0.18.5",
diff --git a/frontend/web/src/components/Landing.tsx b/frontend/web/src/components/Landing.tsx
index c450b09b3..7e29fb504 100644
--- a/frontend/web/src/components/Landing.tsx
+++ b/frontend/web/src/components/Landing.tsx
@@ -1,5 +1,4 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { Menu } from 'lucide-react';
 import { BackendHandshake } from './BackendHandshake';
 import { Button } from './primitives';
 import { useI18n } from '../i18n';
@@ -55,7 +54,7 @@ export function Landing({
     <div className="landing-page" style={creating ? { display: 'none' } : undefined}>
       <div className="landing-navigation lg:hidden">
         {/* The project list opens from the same mark as on a project's page. */}
-        <Button onClick={onChoose} aria-label={t('topbar.openSessions')} title={t('topbar.openSessions')}><FontAwesomeIcon icon={faBars} className="h-4 w-4" /></Button>
+        <Button onClick={onChoose} aria-label={t('topbar.openSessions')} title={t('topbar.openSessions')}><Menu size={18} aria-hidden="true" /></Button>
       </div>
       {loading ? <BackendHandshake /> : (
         <>
diff --git a/frontend/web/src/components/MobileTabBar.tsx b/frontend/web/src/components/MobileTabBar.tsx
index 3f9e995f0..bf60ffae5 100644
--- a/frontend/web/src/components/MobileTabBar.tsx
+++ b/frontend/web/src/components/MobileTabBar.tsx
@@ -1,12 +1,4 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faBars,
-  faDiagramProject,
-  faFlask,
-  faListUl,
-  faWindowMaximize,
-} from '@fortawesome/free-solid-svg-icons';
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FlaskConical, Menu, MessageSquare, Network, Package, type LucideIcon } from 'lucide-react';
 import { useI18n } from '../i18n';
 
 export type MobileTab = 'sessions' | 'activity' | 'workbench' | 'map' | 'preview';
@@ -24,11 +16,11 @@ export function MobileTabBar({
   sidebarOpen?: boolean;
 }) {
   const { t, locale } = useI18n();
-  const tabs: { id: Exclude<MobileTab, 'sessions'>; label: string; icon: IconDefinition }[] = [
-    { id: 'activity', label: t('mobile.activity'), icon: faListUl },
-    { id: 'preview', label: locale === 'zh-CN' ? '成果与文件' : 'Results & files', icon: faWindowMaximize },
-    { id: 'map', label: t('mobile.map'), icon: faDiagramProject },
-    { id: 'workbench', label: t('mobile.workbench'), icon: faFlask },
+  const tabs: { id: Exclude<MobileTab, 'sessions'>; label: string; icon: LucideIcon }[] = [
+    { id: 'activity', label: t('mobile.activity'), icon: MessageSquare },
+    { id: 'preview', label: locale === 'zh-CN' ? '成果与文件' : 'Results & files', icon: Package },
+    { id: 'map', label: t('mobile.map'), icon: Network },
+    { id: 'workbench', label: t('mobile.workbench'), icon: FlaskConical },
   ];
 
   return (
@@ -42,10 +34,10 @@ export function MobileTabBar({
         <button
           type="button"
           onClick={onOpenSessions}
-          className="flex min-h-[3.25rem] flex-1 flex-col items-center justify-center gap-0.5 text-ink-faint active:bg-panel-raised"
+          className="flex min-h-[3.5rem] flex-1 flex-col items-center justify-center gap-1 text-ink-faint active:bg-panel-raised"
         >
-          <FontAwesomeIcon icon={faBars} className="h-4 w-4" />
-          <span className="text-[10px] leading-none">{t('mobile.sessions')}</span>
+          <Menu size={20} strokeWidth={1.75} aria-hidden="true" />
+          <span className="text-[11px] leading-none">{t('mobile.sessions')}</span>
         </button>
       ) : null}
       {tabs.map((tab) => {
@@ -56,12 +48,12 @@ export function MobileTabBar({
             type="button"
             onClick={() => onSelect(tab.id)}
             aria-current={selected ? 'page' : undefined}
-            className={`flex min-h-[3.25rem] flex-1 flex-col items-center justify-center gap-0.5 active:bg-panel-raised ${
-              selected ? 'text-blue' : 'text-ink-faint'
+            className={`flex min-h-[3.5rem] flex-1 flex-col items-center justify-center gap-1 active:bg-panel-raised ${
+              selected ? 'font-medium text-ink' : 'text-ink-faint'
             }`}
           >
-            <FontAwesomeIcon icon={tab.icon} className="h-4 w-4" />
-            <span className="text-[10px] leading-none">{tab.label}</span>
+            <tab.icon size={20} strokeWidth={selected ? 2 : 1.75} aria-hidden="true" />
+            <span className="text-[11px] leading-none">{tab.label}</span>
           </button>
         );
       })}
diff --git a/frontend/web/src/components/ResearchCanvas.tsx b/frontend/web/src/components/ResearchCanvas.tsx
index ffaf4b0b7..f18848e02 100644
--- a/frontend/web/src/components/ResearchCanvas.tsx
+++ b/frontend/web/src/components/ResearchCanvas.tsx
@@ -6,8 +6,6 @@ import { api } from '../api';
 import { useArtifact } from '../hooks';
 import { formatBytes } from '../lib/format';
 import { Spinner } from './primitives';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAnglesRight } from '@fortawesome/free-solid-svg-icons';
 import { HtmlPreview } from './HtmlPreview';
 import { JsonPreview, TablePreview } from './DataPreview';
 import { MarkdownContent } from './MarkdownContent';
@@ -18,7 +16,7 @@ import { modelFormat } from '../lib/modelFiles';
 import { canEditArtifact, isMarkdownArtifact } from '../lib/artifactPresentation';
 import { downloadBlob } from '../lib/downloadBlob';
 import { WorkStatusBar } from './WorkStatusBar';
-import { FileText } from 'lucide-react';
+import { ChevronsRight, FileText } from 'lucide-react';
 import { readLocalStorage, writeLocalStorage } from '../lib/storage';
 import { deliveryFiles } from './deliveryPresentation';
 
@@ -273,7 +271,7 @@ export function ResearchCanvas({
         </div>
         {onCollapse ? (
           <button type="button" onClick={onCollapse} aria-label={t('research.collapse')} title={t('research.collapse')} className="hidden h-8 w-8 shrink-0 items-center justify-center rounded-md border border-line/50 bg-bg/40 text-ink-faint hover:border-blue/50 hover:text-ink lg:flex">
-            <FontAwesomeIcon icon={faAnglesRight} className="h-3.5 w-3.5" />
+            <ChevronsRight size={16} aria-hidden="true" />
           </button>
         ) : null}
       </header>
diff --git a/frontend/web/src/components/TeamControls.tsx b/frontend/web/src/components/TeamControls.tsx
index f90a0d0fc..5e5860eab 100644
--- a/frontend/web/src/components/TeamControls.tsx
+++ b/frontend/web/src/components/TeamControls.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
+import { Play, Square } from 'lucide-react';
 import type { Snapshot } from '../../../core/src/types';
 import { useI18n } from '../i18n';
 import { roleLabel } from '../lib/enumLabels';
@@ -69,7 +68,7 @@ export function RunControl({ snapshot, pending = false, busy = false, onStop, on
         else onResume();
       }} className={running ? className : resumeClassName}
       title={running ? zh ? '停止现在的工作' : 'Stop the work under way' : t('topbar.continueRunHint')}>
-      <FontAwesomeIcon icon={running ? faStop : faPlay} className="h-3 w-3" /><span>{running ? zh ? '停止' : 'Stop' : t('topbar.continueRun')}</span>
+      {running ? <Square size={12} fill="currentColor" aria-hidden="true" /> : <Play size={12} fill="currentColor" aria-hidden="true" />}<span>{running ? zh ? '停止' : 'Stop' : t('topbar.continueRun')}</span>
     </button>
     <Modal open={asking} onClose={() => setAsking(false)} label={zh ? '停止现在的工作' : 'Stop the work under way'} width="max-w-md" align="bottom">
       <div className="modal-header"><h2>{zh ? '停止现在的工作？' : 'Stop the work under way?'}</h2></div>
diff --git a/frontend/web/src/components/WorkspaceShell.tsx b/frontend/web/src/components/WorkspaceShell.tsx
index f0e407064..028f381e9 100644
--- a/frontend/web/src/components/WorkspaceShell.tsx
+++ b/frontend/web/src/components/WorkspaceShell.tsx
@@ -24,7 +24,7 @@ export const WorkspaceSidePanel = forwardRef<HTMLDivElement, SidePanelProps>(fun
       role="complementary"
       data-state={slim ? 'collapsed' : 'expanded'}
       data-resizable-panel="left"
-      className={`glass-panel glass-panel--side fixed inset-y-0 left-0 z-50 flex h-full shrink-0 flex-col border-r transition-[width,transform] duration-panel ease-panel lg:visible lg:static lg:z-auto lg:translate-x-0 ${slim ? 'w-14' : 'w-64 lg:w-[var(--sidebar-width,256px)]'} ${mobileOpen ? 'visible translate-x-0' : 'invisible -translate-x-full'} ${className}`}
+      className={`glass-panel glass-panel--side fixed inset-y-0 left-0 z-50 flex h-full shrink-0 flex-col border-r transition-[width,transform] duration-panel ease-panel lg:visible lg:static lg:z-auto lg:translate-x-0 ${slim ? 'w-14' : 'w-[min(85vw,320px)] lg:w-[var(--sidebar-width,256px)]'} ${mobileOpen ? 'visible translate-x-0' : 'invisible -translate-x-full'} ${className}`}
       {...props}
     />
   );
diff --git a/frontend/web/src/components/delivery.css b/frontend/web/src/components/delivery.css
index 7d1177eda..8d48f6df4 100644
--- a/frontend/web/src/components/delivery.css
+++ b/frontend/web/src/components/delivery.css
@@ -25,8 +25,8 @@
 .delivery-files button { display: flex; align-items: center; gap: 8px; padding: 10px 0 9px; margin-bottom: -1px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; color: rgb(var(--ink-faint)); white-space: nowrap; font-size: 13px; transition: color 150ms ease, border-color 150ms ease; }
 .delivery-files button:hover { color: rgb(var(--ink-dim)); }
 .delivery-files button span { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
-.delivery-files button[aria-pressed=true] { border-bottom-color: rgb(var(--accent)); background: transparent; color: rgb(var(--ink)); }
-.delivery-files small { font-size: 11px; color: rgb(var(--accent-ink)); }
+.delivery-files button[aria-pressed=true] { border-bottom: 2px solid rgb(var(--ink)); background: transparent; color: rgb(var(--ink)); }
+.delivery-files small { font-size: 11px; color: rgb(var(--ink-faint)); }
 .artifact-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border: 1px solid rgb(var(--line)); border-radius: var(--radius-control); padding: 4px 12px; color: rgb(var(--ink-dim)); font-size: 13px; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
 .artifact-tool:hover:not(:disabled) { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
 .artifact-tool-primary { border-color: rgb(var(--ink)); background: rgb(var(--ink)); color: rgb(var(--surface-1)); }
@@ -36,3 +36,9 @@
 @media (max-width: 640px) {
   .delivery-modal { height: 100dvh !important; max-height: 100dvh; width: 100vw; max-width: 100vw; flex-shrink: 0; border-radius: 0; }
 }
+
+/* On a phone the file tabs scroll sideways: the edge fades to say there is more. */
+@media (max-width:640px) {
+  .delivery-files { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 48px; }
+  .delivery-files::-webkit-scrollbar { display: none; }
+}
diff --git a/frontend/web/src/test/mobile.test.tsx b/frontend/web/src/test/mobile.test.tsx
index eba498798..4e1a50e98 100644
--- a/frontend/web/src/test/mobile.test.tsx
+++ b/frontend/web/src/test/mobile.test.tsx
@@ -54,8 +54,8 @@ describe('MobileTabBar', () => {
   it('keeps every target at or above the touch-size minimum', () => {
     const html = markup();
 
-    // 3.25rem = 52px, past Apple's 44pt and Material's 48dp.
-    expect(html.match(/min-h-\[3\.25rem\]/g)).toHaveLength(5);
+    // 3.5rem = 56px, past Apple's 44pt and Material's 48dp.
+    expect(html.match(/min-h-\[3\.5rem\]/g)).toHaveLength(5);
   });
 
   it('respects the safe area and rides above the keyboard', () => {
@@ -73,7 +73,7 @@ describe('MobileTabBar', () => {
     );
 
     expect(html).not.toContain('>Projects<');
-    expect(html.match(/min-h-\[3\.25rem\]/g)).toHaveLength(4);
+    expect(html.match(/min-h-\[3\.5rem\]/g)).toHaveLength(4);
   });
 });