diff --git a/DESIGN.md b/DESIGN.md
index 85ecdaa..a342caa 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -39,6 +39,8 @@
 
 组件不得直接使用原始颜色值。主题差异只在令牌层定义，业务组件仅引用语义令牌。
 
+两种主题必须保持相同的信息层级，但不要求机械地反转明暗。浅色主题以白色主内容画布、冰蓝灰侧栏和轻微着色的顶栏建立空间关系；深色主题使用深海军蓝与蓝灰表面逐层提亮，避免纯黑。蓝色承担主要选择和交互，青绿色主要承担成功与可用状态，二者不得混用语义。
+
 ## 3. 设计令牌
 
 令牌以 CSS 自定义属性实现。`:root` 提供浅色值，`[data-theme="dark"]` 覆盖深色值。组件样式不得新增只服务于单个页面的颜色、阴影、圆角或间距常量。
@@ -69,6 +71,14 @@
 
 浅色与深色具体值只在 `styles.css` 的主题根节点维护。状态组件必须同时显示文字或图标，不能仅靠颜色区分。
 
+表面与边框使用规则：
+
+- 浅色主题的阅读、编辑和页面主内容使用白色或接近白色的 `--surface-raised`；主侧栏使用更深一阶的冰蓝灰 `--surface-canvas`，顶栏使用弱于侧栏的次级表面。相邻区域必须可辨，但不能形成高饱和色块。
+- 深色主题从深海军蓝画布开始，以蓝灰表面逐层提亮。不同层级优先依靠表面亮度与语义边框区分，不使用纯黑底色或无边界的大面积同色区域。
+- 浅色侧栏中，导航与最近会话、最近会话与账户区之间的结构分隔线使用 `--border-default`。列表行之间或卡片内部的弱分隔仍使用 `--border-subtle`，不得为了增强结构而给每一项加重边框。
+- 控件边界、焦点环和选中边框必须达到至少 `3:1` 的非文本对比度；正文、状态色和弱文本分别遵守无障碍对比度要求。
+- 业务组件不得通过主题条件分支写原始颜色；新增视觉层级时先确认能否复用现有表面、边框和状态令牌。
+
 ### 3.2 间距令牌
 
 采用 4 像素基准：
@@ -112,12 +122,12 @@
 
 | 令牌 | 值 | 用途 |
 | --- | --- | --- |
-| `--radius-control` | `8px` | 输入框、按钮、菜单项 |
-| `--radius-card` | `12px` | 卡片和面板 |
+| `--radius-control` | `10px` | 输入框、按钮、菜单项 |
+| `--radius-card` | `14px` | 卡片和面板 |
 | `--shadow-card` | 主题定义 | 卡片和选中分段控件 |
 | `--shadow-dialog` | 主题定义 | 对话框和浮层 |
 
-普通卡片通过表面色和边框区分，不默认添加阴影。阴影只表示真实的浮层关系。不允许页面自行创建高于 `--z-dialog` 的层级。
+整体使用适度圆角：控件和卡片保持清晰、克制的几何轮廓，不使用胶囊化的大圆角替代信息层级。普通卡片通过表面色和边框区分，不默认添加阴影；输入区等需要从内容流中明确浮起的持续操作面板可以使用克制的 `--shadow-card`。菜单和对话框使用对应层级阴影，阴影只表示真实的浮层关系。不允许页面自行创建高于 `--z-dialog` 的层级。
 
 ### 3.5 动效令牌
 
@@ -263,20 +273,40 @@
 - 活动记录必须保留操作者、动作、对象、范围、结果和时间等审计语义，不用纯图标代替关键字段。
 - 表格密度可以选择“默认”或“紧凑”，但同一页面不得混用。
 
-### 6.8 应用顶栏与全局菜单
+### 6.8 应用侧栏
+
+主侧栏用于一级导航、最近会话和稳定的账户入口，必须通过表面、结构线和选中状态建立清楚但不过度装饰的层级。
+
+- 浅色侧栏使用冰蓝灰表面，与白色主内容画布形成明确边界；深色侧栏使用比主画布略亮的蓝灰表面。
+- 一级导航与最近会话之间、最近会话与底部账户区之间必须有可见结构分隔线。浅色主题使用 `--border-default`，深色主题可在可辨前提下使用 `--border-subtle`。
+- 当前导航项和当前会话必须同时使用至少三种信号中的两种：强调背景、可见边框、图标或文字强调。浅色主题的当前项优先使用更完整的蓝色选中表面和较高字重。
+- 未选中项保持平整，不为每一行添加卡片边框或阴影。悬停反馈不得强于选中状态。
+- 账户与设置入口固定在侧栏底部。已有稳定设置入口时，不在顶栏重复提供同一入口。
+
+### 6.9 应用顶栏与全局操作
 
 应用顶栏用于窗口级状态、侧栏开关和低频全局操作，不承担页面标题或主要导航。顶栏必须保持紧凑，不能与页面内容争夺注意力。
 
 - 顶栏高度默认为 `58px`，图标按钮使用 `34px × 34px` 点击区域。
 - Runtime 状态、同步状态等短标签使用 `--font-caption`，不得放大为正文标题。
-- 全局菜单项使用 `--font-body`，图标为 `14px`，单项高度为 `32px`。
-- 菜单标签使用短名称，例如“安全与 Runtime 设置”“使用帮助”，不得同时使用大字号、粗体和强调色。
-- 全局菜单宽度由最长标签决定，建议为 `180px` 至 `200px`；说明性长文放入目标页面，不放在菜单项中。
-- 顶栏只直接显示当前任务所需的高频操作。设置、帮助、关于和版本检查等低频操作进入同一个全局菜单。
+- 浅色与深色切换属于持续可用的窗口级操作，直接显示太阳或月亮图标，并通过可访问名称说明将切换到的主题。选择必须持久化，切换不得改变布局。
+- 顶栏只直接显示当前任务所需的高频操作。已有侧栏账户设置入口时，不再重复显示 Runtime/设置入口；使用帮助优先放在相关操作附近，而不是为单个帮助项创建“更多”菜单。
+- 只有存在至少两个无法由稳定入口承载的低频全局操作时才增加全局菜单，不为了容纳一个冗余入口而显示省略号按钮。
 - 窄窗口下优先压缩状态标签并保留图标按钮，不隐藏窗口控制、当前范围或进行中的风险状态。
-- 菜单使用 `menu`、`menuitem` 语义，支持上下方向键、Home、End 和 Escape，关闭后焦点返回触发按钮。
+- 使用全局菜单时，菜单项使用 `--font-body`、`14px` 图标和约 `32px` 单项高度；标签使用短名称。菜单保留 `menu`、`menuitem` 语义，支持上下方向键、Home、End 和 Escape，关闭后焦点返回触发按钮。
 
-### 6.9 应用通知与就地反馈
+### 6.10 上下文单选菜单
+
+模型、专家角色和工作模式属于同一输入上下文，其选择器必须共享结构、尺寸和菜单视觉，不能出现一个精细菜单与两个风格不一致的原生下拉框。
+
+- 触发按钮复用统一的模型选择按钮样式，保持相同高度、圆角、边框、展开指示和焦点状态。
+- 菜单使用 `menu` 与 `menuitemradio` 语义，当前项同时显示选中标记和 `aria-checked`。选项可以包含一行简短说明，但标签和说明不得被截断到无法区分。
+- 支持上、下方向键、Home、End、Enter 或 Space、Escape；打开后焦点进入当前项，关闭后返回触发按钮。
+- 点击或聚焦菜单外部时关闭；同一输入区内的模型、专家和模式菜单互斥展开。
+- 不可用选项保持可读并说明原因，键盘导航不得停留在不可选择项上。
+- 仅在选项简单且不需要说明、禁用原因或一致菜单行为时使用原生 `select`。
+
+### 6.11 应用通知与就地反馈
 
 应用级通知统一进入全局通知视口，页面不得自行复制通知卡片或在内容流中长期堆放短期消息。
 
@@ -355,7 +385,8 @@
 ## 10. 深色主题
 
 - 深色主题通过语义令牌替换实现，不在组件中使用主题条件分支选择原始颜色。
-- 表面层级主要依靠亮度和边框区分，避免大面积纯黑与高亮白形成刺眼对比。
+- 主画布使用深海军蓝，侧栏、顶栏、输入区和浮层使用逐级提亮的蓝灰表面；表面层级主要依靠亮度和边框区分，避免大面积纯黑与高亮白形成刺眼对比。
+- 深色强调色使用明亮但不荧光的蓝色，成功状态使用青绿色。用户消息等大面积强调表面使用更深的实心蓝，确保反白文字舒适可读。
 - 输入框、代码块、表格悬停、选中行、弹窗遮罩和滚动条必须分别检查深色值。
 - 图片、图表和状态色在深色背景下保持可读。图表系列不能只靠色相区分，还应使用形状、线型或标签。
 - 焦点环、危险文本和弱文本在两种主题下都满足对比度要求。
@@ -427,6 +458,9 @@ GoodBuddy 是可调整窗口大小的桌面应用。响应式设计优先保证
 - 使用 `reading` 壳层，消息流与输入区共享宽度。
 - 对话标题和当前项目范围位于 `PageHeader` 或对话上下文区，不在消息流中重复。
 - 模式、模型或工具权限属于上下文控制，不与页面导航页签混用。
+- 模型、专家角色和工作模式使用统一的上下文单选菜单，并保持菜单互斥、键盘可达和选中状态明确。
+- “Enter 发送 · Shift+Enter 换行 · 附件仅在选择后发送”等输入操作提示放在空输入框内部，作为主占位文案的次级行；不得在输入框下方单独占用第二行。输入框下方只保留一行当前模式、安全边界或全局快捷键说明。
+- 输入操作提示不能替代表单的可访问名称，输入框始终保留持久的程序化标签。
 - 空对话展示可执行的起始建议，发送失败保留输入并提供重试。
 
 ### 13.2 最近对话
@@ -466,6 +500,14 @@ GoodBuddy 是可调整窗口大小的桌面应用。响应式设计优先保证
 - 创建、保存、更新、删除和 AI 评论完成等短期结果进入应用级通知，不在编辑区或列表上方堆放页内通知。
 - 标题或正文校验、删除确认、同步进度和可就地恢复的错误仍靠近对应编辑器或操作呈现。
 
+### 13.7 设置中心
+
+- 全页设置使用固定标题区、左侧分类导航和独立滚动的内容区。右上角关闭按钮是离开设置中心的稳定入口。
+- 全页设置标题区依靠留白与内容区分层，不在标题下方绘制贯穿整个工作区的分隔线；模态设置可以保留标题边界。
+- 仅包含“关闭”的模态框页脚不得出现在全页设置中，避免重复关闭入口和没有功能意义的整宽分隔线。
+- 当前分类存在“保存”“测试”或“取消”等未提交配置操作时，可以显示操作页脚；页脚分隔线只用于界定这些持续操作。
+- 自动生效的设置不为了显示成功文案而长期占用页脚，通过应用通知提供短期反馈。加载或保存错误仍需保留可处理的上下文。
+
 ## 14. 文案规则
 
 - 使用简体中文，动词直接、对象明确。
@@ -480,9 +522,11 @@ GoodBuddy 是可调整窗口大小的桌面应用。响应式设计优先保证
 ### 15.1 基础层
 
 - [ ] 建立浅色与深色语义颜色令牌，移除业务组件中的原始颜色值。
+- [ ] 建立白色浅色主画布、冰蓝灰侧栏与深海军蓝深色表面的稳定层级。
 - [ ] 建立间距、字体、圆角、阴影、层级和动效令牌。
 - [ ] 为主题切换、减少动态效果和原生控件设置全局规则。
 - [ ] 建立组件交互状态和焦点环基线。
+- [ ] 验证浅色侧栏结构分隔线与导航、会话选中状态清晰可辨。
 
 ### 15.2 页面壳层与层级
 
@@ -502,14 +546,17 @@ GoodBuddy 是可调整窗口大小的桌面应用。响应式设计优先保证
 - [ ] 实现 `ScopeBadge` 并覆盖全局、项目、失效和可切换状态。
 - [ ] 实现 `EmptyState` 的首次为空、无结果、失败和只读变体。
 - [ ] 实现 `danger-ghost`、`danger-solid` 和 `danger-zone`。
+- [ ] 统一模型、专家角色和工作模式的单选菜单结构、视觉与键盘行为。
 
 ### 15.4 页面迁移
 
 - [ ] 聊天迁移到 `reading`，统一消息流与输入区宽度。
+- [ ] 将输入快捷键与附件提示置于空输入框内部，输入区下方保持单行说明。
 - [ ] 最近对话迁移到 `standard`，统一搜索、范围、时间和删除行为。
 - [ ] 知识库迁移到 `master-detail`，清除内联浅色样式并补齐窄窗口单面板流程。
 - [ ] 智能心跳迁移到 `dashboard`，统一状态卡片、配置和运行历史层级。
 - [ ] 任务迁移到 `standard`，活动记录迁移到 `dashboard`，统一导航、筛选和表格行为。
+- [ ] 全页设置移除只含关闭操作的重复页脚，仅为未提交配置保留操作页脚。
 
 ### 15.5 验收
 
diff --git a/demoui.html b/demoui.html
new file mode 100644
index 0000000..f826a4d
--- /dev/null
+++ b/demoui.html
@@ -0,0 +1,1221 @@
+<!doctype html>
+<html lang="zh-CN" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>GoodBuddy 主题配色 Demo</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --page-bg: #e8f0f5;
+        --page-glow: rgb(117 204 236 / 25%);
+        --app-bg: #ffffff;
+        --sidebar-bg: #edf4f8;
+        --topbar-bg: #f7fafc;
+        --surface: #ffffff;
+        --surface-subtle: #f3f7fa;
+        --surface-muted: #e7eef4;
+        --text: #17263a;
+        --text-secondary: #51657a;
+        --text-muted: #718498;
+        --border: #d1dee8;
+        --border-strong: #b9cad8;
+        --accent: #0877dc;
+        --accent-hover: #0668c2;
+        --accent-soft: #e4f2ff;
+        --accent-border: #afd3f2;
+        --teal: #078f7d;
+        --teal-soft: #e2f7f2;
+        --danger: #c23b47;
+        --shadow-app: 0 28px 70px rgb(41 74 101 / 18%);
+        --shadow-card: 0 8px 24px rgb(54 94 126 / 9%);
+        --shadow-float: 0 16px 36px rgb(41 74 101 / 16%);
+        --focus: 0 0 0 3px rgb(8 119 220 / 22%);
+      }
+
+      :root[data-theme="dark"] {
+        color-scheme: dark;
+        --page-bg: #030a11;
+        --page-glow: rgb(25 116 159 / 25%);
+        --app-bg: #07131f;
+        --sidebar-bg: #0d2233;
+        --topbar-bg: #0a1b29;
+        --surface: #0d1d2c;
+        --surface-subtle: #12283a;
+        --surface-muted: #1a3448;
+        --text: #edf7ff;
+        --text-secondary: #b5c6d5;
+        --text-muted: #8fa6b9;
+        --border: #29445a;
+        --border-strong: #3b5b73;
+        --accent: #72c5ff;
+        --accent-hover: #9bd7ff;
+        --accent-soft: #123b5b;
+        --accent-border: #28668f;
+        --teal: #63ddc7;
+        --teal-soft: #103c36;
+        --danger: #ff9ca7;
+        --shadow-app: 0 34px 90px rgb(0 4 9 / 58%);
+        --shadow-card: 0 10px 28px rgb(0 4 9 / 24%);
+        --shadow-float: 0 18px 42px rgb(0 4 9 / 46%);
+        --focus: 0 0 0 3px rgb(114 197 255 / 24%);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        min-width: 320px;
+        min-height: 100%;
+        margin: 0;
+      }
+
+      body {
+        display: grid;
+        min-height: 100vh;
+        padding: clamp(16px, 3vw, 40px);
+        overflow: hidden;
+        background:
+          radial-gradient(
+            circle at 52% -12%,
+            var(--page-glow),
+            transparent 42%
+          ),
+          var(--page-bg);
+        color: var(--text);
+        font-family:
+          Inter, "Noto Sans SC", "Segoe UI", "PingFang SC",
+          "Microsoft YaHei UI", sans-serif;
+        place-items: center;
+        transition:
+          background 220ms ease,
+          color 180ms ease;
+      }
+
+      button,
+      input {
+        color: inherit;
+        font: inherit;
+      }
+
+      button {
+        border: 0;
+      }
+
+      button:focus-visible,
+      input:focus-visible {
+        outline: 0;
+        box-shadow: var(--focus);
+      }
+
+      .demo-shell {
+        position: relative;
+        display: grid;
+        width: min(1380px, 100%);
+        height: min(860px, calc(100vh - clamp(32px, 6vw, 80px)));
+        min-height: 620px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: 24px;
+        background: var(--app-bg);
+        box-shadow: var(--shadow-app);
+        grid-template-columns: 238px minmax(0, 1fr);
+        transition:
+          background 180ms ease,
+          border-color 180ms ease,
+          box-shadow 180ms ease;
+      }
+
+      .sidebar {
+        display: flex;
+        min-width: 0;
+        padding: 22px 16px 16px;
+        border-right: 1px solid var(--border);
+        background: var(--sidebar-bg);
+        flex-direction: column;
+        transition:
+          background 180ms ease,
+          border-color 180ms ease;
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        padding: 0 8px 22px;
+        gap: 11px;
+      }
+
+      .brand-mark,
+      .assistant-avatar {
+        display: grid;
+        color: white;
+        place-items: center;
+      }
+
+      .brand-mark {
+        width: 36px;
+        height: 36px;
+        flex: 0 0 36px;
+        border-radius: 11px;
+        background: linear-gradient(145deg, #1788ec, #08a994);
+        box-shadow: 0 6px 16px rgb(8 119 220 / 20%);
+      }
+
+      .brand-mark svg {
+        width: 22px;
+        height: 22px;
+      }
+
+      .brand-copy {
+        min-width: 0;
+      }
+
+      .brand-copy strong,
+      .brand-copy span {
+        display: block;
+      }
+
+      .brand-copy strong {
+        font-size: 14px;
+        letter-spacing: -0.01em;
+      }
+
+      .brand-copy span {
+        margin-top: 2px;
+        color: var(--text-muted);
+        font-size: 10px;
+      }
+
+      .project-button,
+      .sidebar-search {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        min-height: 38px;
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        background: var(--surface);
+        color: var(--text-secondary);
+        gap: 9px;
+      }
+
+      .project-button {
+        padding: 0 10px;
+        cursor: pointer;
+        text-align: left;
+      }
+
+      .project-button span {
+        flex: 1;
+        overflow: hidden;
+        color: var(--text);
+        font-size: 11px;
+        font-weight: 650;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .new-chat {
+        display: flex;
+        width: 100%;
+        min-height: 40px;
+        align-items: center;
+        padding: 0 12px;
+        border-radius: 10px;
+        margin-top: 10px;
+        background: var(--accent);
+        color: white;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 700;
+        gap: 9px;
+        transition:
+          background 120ms ease,
+          transform 120ms ease;
+      }
+
+      :root[data-theme="dark"] .new-chat {
+        background: #1476c8;
+      }
+
+      .new-chat:hover {
+        background: var(--accent-hover);
+        transform: translateY(-1px);
+      }
+
+      .sidebar-search {
+        margin: 10px 0 16px;
+        padding: 0 10px;
+      }
+
+      .sidebar-search input {
+        width: 100%;
+        min-width: 0;
+        border: 0;
+        outline: 0;
+        background: transparent;
+        font-size: 11px;
+      }
+
+      .sidebar-search input::placeholder {
+        color: var(--text-muted);
+      }
+
+      .nav-label {
+        padding: 0 9px;
+        margin: 2px 0 7px;
+        color: var(--text-muted);
+        font-size: 9px;
+        font-weight: 750;
+        letter-spacing: 0.1em;
+      }
+
+      .nav {
+        display: grid;
+        gap: 4px;
+      }
+
+      .nav-item {
+        display: flex;
+        width: 100%;
+        min-height: 38px;
+        align-items: center;
+        padding: 0 10px;
+        border: 1px solid transparent;
+        border-radius: 10px;
+        background: transparent;
+        color: var(--text-secondary);
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 580;
+        gap: 10px;
+        text-align: left;
+        transition:
+          background 120ms ease,
+          color 120ms ease,
+          border-color 120ms ease;
+      }
+
+      .nav-item:hover {
+        background: color-mix(
+          in srgb,
+          var(--accent-soft) 56%,
+          transparent
+        );
+        color: var(--accent);
+      }
+
+      .nav-item.is-active {
+        border-color: var(--accent-border);
+        background: var(--accent-soft);
+        color: var(--accent);
+      }
+
+      .nav-icon,
+      .tool-icon,
+      .inline-icon {
+        display: grid;
+        place-items: center;
+      }
+
+      .nav-icon {
+        width: 18px;
+        height: 18px;
+        flex: 0 0 18px;
+      }
+
+      svg {
+        width: 18px;
+        height: 18px;
+        fill: none;
+        stroke: currentColor;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.8;
+      }
+
+      .sidebar-footer {
+        padding-top: 14px;
+        border-top: 1px solid var(--border);
+        margin-top: auto;
+      }
+
+      .profile {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        padding: 8px;
+        border-radius: 10px;
+        background: transparent;
+        color: var(--text-secondary);
+        cursor: pointer;
+        gap: 9px;
+        text-align: left;
+      }
+
+      .profile:hover {
+        background: var(--surface);
+      }
+
+      .profile-avatar {
+        display: grid;
+        width: 30px;
+        height: 30px;
+        flex: 0 0 30px;
+        border-radius: 9px;
+        background: var(--teal-soft);
+        color: var(--teal);
+        font-size: 10px;
+        font-weight: 800;
+        place-items: center;
+      }
+
+      .profile-copy {
+        min-width: 0;
+      }
+
+      .profile-copy strong,
+      .profile-copy span {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .profile-copy strong {
+        color: var(--text);
+        font-size: 11px;
+      }
+
+      .profile-copy span {
+        margin-top: 2px;
+        color: var(--text-muted);
+        font-size: 9px;
+      }
+
+      .workspace {
+        display: grid;
+        min-width: 0;
+        min-height: 0;
+        background: var(--app-bg);
+        grid-template-rows: 62px minmax(0, 1fr);
+        transition: background 180ms ease;
+      }
+
+      .topbar {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        padding: 0 20px;
+        border-bottom: 1px solid var(--border);
+        background: var(--topbar-bg);
+        gap: 10px;
+        transition:
+          background 180ms ease,
+          border-color 180ms ease;
+      }
+
+      .title-group {
+        min-width: 0;
+      }
+
+      .title-group strong,
+      .title-group span {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .title-group strong {
+        font-size: 13px;
+      }
+
+      .title-group span {
+        margin-top: 3px;
+        color: var(--text-muted);
+        font-size: 9px;
+      }
+
+      .scope-chip,
+      .mode-chip {
+        display: inline-flex;
+        min-height: 28px;
+        align-items: center;
+        border-radius: 999px;
+        font-size: 10px;
+        font-weight: 650;
+        white-space: nowrap;
+      }
+
+      .scope-chip {
+        padding: 0 10px;
+        border: 1px solid var(--accent-border);
+        background: var(--accent-soft);
+        color: var(--accent);
+        gap: 6px;
+      }
+
+      .scope-chip::before {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+        content: "";
+      }
+
+      .topbar-actions {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        margin-left: auto;
+        gap: 8px;
+      }
+
+      .mode-chip {
+        padding: 0 10px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        color: var(--text-secondary);
+      }
+
+      .theme-toggle {
+        display: flex;
+        min-height: 34px;
+        align-items: center;
+        padding: 3px 4px 3px 10px;
+        border: 1px solid var(--border-strong);
+        border-radius: 999px;
+        background: var(--surface);
+        color: var(--text-secondary);
+        cursor: pointer;
+        font-size: 10px;
+        font-weight: 700;
+        gap: 8px;
+        transition:
+          background 180ms ease,
+          border-color 180ms ease;
+      }
+
+      .theme-toggle__track {
+        position: relative;
+        width: 44px;
+        height: 26px;
+        border-radius: 999px;
+        background: var(--surface-muted);
+        transition: background 180ms ease;
+      }
+
+      .theme-toggle__thumb {
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        display: grid;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--surface);
+        box-shadow: 0 2px 7px rgb(34 62 85 / 22%);
+        color: var(--accent);
+        place-items: center;
+        transition:
+          left 180ms ease,
+          background 180ms ease;
+      }
+
+      .theme-toggle__thumb svg {
+        width: 12px;
+        height: 12px;
+        stroke-width: 2;
+      }
+
+      :root[data-theme="dark"] .theme-toggle__track {
+        background: var(--accent-soft);
+      }
+
+      :root[data-theme="dark"] .theme-toggle__thumb {
+        left: 21px;
+      }
+
+      .chat-canvas {
+        display: grid;
+        min-width: 0;
+        min-height: 0;
+        background: var(--app-bg);
+        grid-template-rows: minmax(0, 1fr) auto;
+      }
+
+      .messages {
+        min-height: 0;
+        padding: clamp(24px, 4vw, 48px)
+          clamp(24px, 7vw, 92px) 24px;
+        overflow: auto;
+      }
+
+      .message-flow {
+        width: min(820px, 100%);
+        margin: 0 auto;
+      }
+
+      .user-message {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 24px;
+      }
+
+      .user-bubble {
+        max-width: min(660px, 88%);
+        padding: 13px 16px;
+        border-radius: 16px 16px 4px 16px;
+        background: #0b78dc;
+        box-shadow: 0 7px 18px rgb(8 119 220 / 18%);
+        color: white;
+        font-size: 13px;
+        line-height: 1.65;
+      }
+
+      :root[data-theme="dark"] .user-bubble {
+        background: #176fb7;
+        box-shadow: 0 8px 22px rgb(0 7 14 / 28%);
+      }
+
+      .assistant-message {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: 34px minmax(0, 1fr);
+      }
+
+      .assistant-avatar {
+        width: 34px;
+        height: 34px;
+        border-radius: 11px;
+        background: linear-gradient(145deg, #1285d9, #08a68e);
+        box-shadow: 0 6px 15px rgb(8 143 125 / 17%);
+      }
+
+      .assistant-avatar svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      .assistant-content {
+        min-width: 0;
+      }
+
+      .assistant-meta {
+        display: flex;
+        align-items: center;
+        margin: 2px 0 9px;
+        gap: 8px;
+      }
+
+      .assistant-meta strong {
+        font-size: 12px;
+      }
+
+      .assistant-meta span {
+        color: var(--text-muted);
+        font-size: 9px;
+      }
+
+      .assistant-copy {
+        margin: 0;
+        color: var(--text-secondary);
+        font-size: 13px;
+        line-height: 1.75;
+      }
+
+      .tool-card {
+        display: grid;
+        max-width: 620px;
+        min-height: 68px;
+        align-items: center;
+        padding: 12px;
+        border: 1px solid var(--border);
+        border-radius: 13px;
+        margin-top: 15px;
+        background: var(--surface-subtle);
+        box-shadow: var(--shadow-card);
+        gap: 11px;
+        grid-template-columns: 38px minmax(0, 1fr) auto;
+        transition:
+          background 180ms ease,
+          border-color 180ms ease;
+      }
+
+      .tool-icon {
+        width: 38px;
+        height: 38px;
+        border-radius: 10px;
+        background: var(--surface);
+        color: var(--accent);
+      }
+
+      .tool-copy {
+        min-width: 0;
+      }
+
+      .tool-copy strong,
+      .tool-copy span {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tool-copy strong {
+        font-size: 11px;
+      }
+
+      .tool-copy span {
+        margin-top: 4px;
+        color: var(--text-muted);
+        font-size: 9px;
+      }
+
+      .tool-status {
+        display: inline-flex;
+        align-items: center;
+        padding: 5px 8px;
+        border-radius: 999px;
+        background: var(--teal-soft);
+        color: var(--teal);
+        font-size: 9px;
+        font-weight: 750;
+        gap: 5px;
+      }
+
+      .tool-status::before {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background: currentColor;
+        content: "";
+      }
+
+      .result-lines {
+        display: grid;
+        max-width: 620px;
+        margin-top: 14px;
+        gap: 7px;
+      }
+
+      .result-lines span {
+        height: 6px;
+        border-radius: 999px;
+        background: var(--surface-muted);
+      }
+
+      .result-lines span:nth-child(2) {
+        width: 88%;
+      }
+
+      .result-lines span:nth-child(3) {
+        width: 62%;
+      }
+
+      .composer-area {
+        padding: 16px clamp(24px, 7vw, 92px) 22px;
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--app-bg) 84%, transparent),
+          var(--app-bg) 24%
+        );
+      }
+
+      .composer {
+        width: min(820px, 100%);
+        min-height: 86px;
+        padding: 13px 14px 10px;
+        border: 1px solid var(--border-strong);
+        border-radius: 16px;
+        margin: 0 auto;
+        background: var(--surface);
+        box-shadow: var(--shadow-float);
+        transition:
+          background 180ms ease,
+          border-color 180ms ease,
+          box-shadow 180ms ease;
+      }
+
+      .composer textarea {
+        width: 100%;
+        min-height: 34px;
+        padding: 0;
+        border: 0;
+        outline: 0;
+        background: transparent;
+        color: var(--text);
+        font: inherit;
+        font-size: 12px;
+        line-height: 1.55;
+        resize: none;
+      }
+
+      .composer textarea::placeholder {
+        color: var(--text-muted);
+      }
+
+      .composer-footer {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .composer-tool,
+      .send-button {
+        display: grid;
+        width: 30px;
+        height: 30px;
+        border-radius: 9px;
+        cursor: pointer;
+        place-items: center;
+      }
+
+      .composer-tool {
+        background: transparent;
+        color: var(--text-muted);
+      }
+
+      .composer-tool:hover {
+        background: var(--surface-subtle);
+        color: var(--accent);
+      }
+
+      .composer-tool svg,
+      .send-button svg {
+        width: 15px;
+        height: 15px;
+      }
+
+      .composer-context {
+        display: flex;
+        align-items: center;
+        min-height: 28px;
+        padding: 0 9px;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        margin-left: 2px;
+        background: var(--surface-subtle);
+        color: var(--text-secondary);
+        font-size: 9px;
+        font-weight: 650;
+      }
+
+      .send-button {
+        margin-left: auto;
+        background: var(--accent);
+        color: white;
+      }
+
+      :root[data-theme="dark"] .send-button {
+        background: #1476c8;
+      }
+
+      .floating-note {
+        position: absolute;
+        right: 24px;
+        bottom: 24px;
+        display: none;
+        min-width: 190px;
+        padding: 12px;
+        border: 1px solid var(--accent-border);
+        border-radius: 14px;
+        background: var(--surface);
+        box-shadow: var(--shadow-float);
+        gap: 10px;
+        grid-template-columns: 34px minmax(0, 1fr);
+        pointer-events: none;
+      }
+
+      .floating-note-icon {
+        display: grid;
+        width: 34px;
+        height: 34px;
+        border-radius: 10px;
+        background: var(--teal-soft);
+        color: var(--teal);
+        place-items: center;
+      }
+
+      .floating-note strong,
+      .floating-note span {
+        display: block;
+      }
+
+      .floating-note strong {
+        font-size: 11px;
+      }
+
+      .floating-note span {
+        margin-top: 3px;
+        color: var(--text-muted);
+        font-size: 9px;
+      }
+
+      @media (max-width: 900px) {
+        .demo-shell {
+          grid-template-columns: 78px minmax(0, 1fr);
+        }
+
+        .sidebar {
+          padding-inline: 11px;
+        }
+
+        .brand {
+          justify-content: center;
+          padding-inline: 0;
+        }
+
+        .brand-copy,
+        .project-button span,
+        .project-button svg:last-child,
+        .new-chat span,
+        .sidebar-search input,
+        .nav-label,
+        .nav-item > span:last-child,
+        .profile-copy {
+          display: none;
+        }
+
+        .project-button,
+        .new-chat,
+        .sidebar-search,
+        .nav-item,
+        .profile {
+          justify-content: center;
+          padding-inline: 0;
+        }
+
+        .scope-chip {
+          display: none;
+        }
+      }
+
+      @media (max-width: 620px) {
+        body {
+          padding: 0;
+        }
+
+        .demo-shell {
+          width: 100%;
+          height: 100vh;
+          min-height: 560px;
+          border: 0;
+          border-radius: 0;
+          grid-template-columns: 64px minmax(0, 1fr);
+        }
+
+        .sidebar {
+          padding-inline: 8px;
+        }
+
+        .title-group span,
+        .mode-chip,
+        .theme-toggle__label {
+          display: none;
+        }
+
+        .topbar {
+          padding-inline: 13px;
+        }
+
+        .messages {
+          padding: 22px 16px;
+        }
+
+        .composer-area {
+          padding: 12px 14px 16px;
+        }
+
+        .assistant-message {
+          grid-template-columns: 30px minmax(0, 1fr);
+        }
+
+        .assistant-avatar {
+          width: 30px;
+          height: 30px;
+        }
+
+        .tool-card {
+          grid-template-columns: 34px minmax(0, 1fr);
+        }
+
+        .tool-icon {
+          width: 34px;
+          height: 34px;
+        }
+
+        .tool-status {
+          display: none;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+          scroll-behavior: auto !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="demo-shell">
+      <aside class="sidebar" aria-label="主导航">
+        <div class="brand">
+          <span class="brand-mark" aria-hidden="true">
+            <svg viewBox="0 0 24 24">
+              <path d="M8.5 7.5a4.5 4.5 0 1 0 0 9h2.25" />
+              <path d="M15.5 7.5a4.5 4.5 0 1 1 0 9h-2.25" />
+              <path d="M9.5 9.5 14.5 14.5" />
+            </svg>
+          </span>
+          <span class="brand-copy">
+            <strong>GoodBuddy</strong>
+            <span>AI 工作伙伴</span>
+          </span>
+        </div>
+
+        <button class="project-button" type="button">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3.5 6.5h7l2 2h8v10h-17z" />
+          </svg>
+          <span>GoodBuddy 官网</span>
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="m8 10 4 4 4-4" />
+          </svg>
+        </button>
+
+        <button class="new-chat" type="button">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+          <span>新建对话</span>
+        </button>
+
+        <label class="sidebar-search">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="10.5" cy="10.5" r="6.5" />
+            <path d="m15.5 15.5 4 4" />
+          </svg>
+          <input type="search" placeholder="搜索对话" />
+        </label>
+
+        <p class="nav-label">工作区</p>
+        <nav class="nav">
+          <button class="nav-item is-active" type="button">
+            <span class="nav-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M4 5.5h16v11H9l-5 3z" />
+              </svg>
+            </span>
+            <span>对话</span>
+          </button>
+          <button class="nav-item" type="button">
+            <span class="nav-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M5 4.5h11a3 3 0 0 1 3 3v12H8a3 3 0 0 1-3-3z" />
+                <path d="M8 4.5v12a3 3 0 0 0 3 3" />
+              </svg>
+            </span>
+            <span>知识库</span>
+          </button>
+          <button class="nav-item" type="button">
+            <span class="nav-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M4 13h3l2-7 4 12 2-6h5" />
+              </svg>
+            </span>
+            <span>智能心跳</span>
+          </button>
+          <button class="nav-item" type="button">
+            <span class="nav-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <rect x="4" y="5" width="16" height="15" rx="2" />
+                <path d="M8 3v4M16 3v4M8 11h8M8 15h5" />
+              </svg>
+            </span>
+            <span>任务与活动</span>
+          </button>
+          <button class="nav-item" type="button">
+            <span class="nav-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M5 5.5h14M5 12h14M5 18.5h9" />
+              </svg>
+            </span>
+            <span>魔法笔记</span>
+          </button>
+        </nav>
+
+        <div class="sidebar-footer">
+          <button class="profile" type="button">
+            <span class="profile-avatar">GB</span>
+            <span class="profile-copy">
+              <strong>本地工作区</strong>
+              <span>安全模式已开启</span>
+            </span>
+          </button>
+        </div>
+      </aside>
+
+      <main class="workspace">
+        <header class="topbar">
+          <div class="title-group">
+            <strong>产品官网维护</strong>
+            <span>最后更新于今天 16:24</span>
+          </div>
+          <span class="scope-chip">项目：GoodBuddy 官网</span>
+          <div class="topbar-actions">
+            <span class="mode-chip">计划模式</span>
+            <button
+              aria-label="切换深色主题"
+              aria-pressed="false"
+              class="theme-toggle"
+              id="theme-toggle"
+              type="button"
+            >
+              <span class="theme-toggle__label">浅色</span>
+              <span class="theme-toggle__track" aria-hidden="true">
+                <span class="theme-toggle__thumb">
+                  <svg viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="3.5" />
+                    <path
+                      d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </header>
+
+        <section class="chat-canvas">
+          <div class="messages">
+            <div class="message-flow">
+              <div class="user-message">
+                <div class="user-bubble">
+                  检查官网内容与下载入口是否需要更新。
+                </div>
+              </div>
+
+              <article class="assistant-message">
+                <div class="assistant-avatar">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <rect x="5" y="7" width="14" height="11" rx="3" />
+                    <path d="M9 11h.01M15 11h.01M9 15h6M12 4v3" />
+                  </svg>
+                </div>
+                <div class="assistant-content">
+                  <div class="assistant-meta">
+                    <strong>GoodBuddy</strong>
+                    <span>刚刚</span>
+                  </div>
+                  <p class="assistant-copy">
+                    我会先核对发布清单与项目知识，再给出不执行变更的更新计划。
+                  </p>
+
+                  <div class="tool-card">
+                    <span class="tool-icon">
+                      <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M7 5h10M7 9h10M7 13h7M5 3h14v18H5z" />
+                      </svg>
+                    </span>
+                    <span class="tool-copy">
+                      <strong>读取项目知识</strong>
+                      <span>范围：GoodBuddy 官网 · 8 个相关条目</span>
+                    </span>
+                    <span class="tool-status">已完成</span>
+                  </div>
+
+                  <div class="result-lines" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <div class="composer-area">
+            <div class="composer">
+              <textarea
+                aria-label="继续输入"
+                placeholder="继续补充要求…"
+              ></textarea>
+              <div class="composer-footer">
+                <button class="composer-tool" aria-label="添加附件">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="m9 12 5-5a3 3 0 1 1 4 4l-7 7a5 5 0 0 1-7-7l7-7" />
+                  </svg>
+                </button>
+                <button class="composer-tool" aria-label="语音输入">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <rect x="9" y="3" width="6" height="12" rx="3" />
+                    <path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21" />
+                  </svg>
+                </button>
+                <span class="composer-context">Ask · 只读</span>
+                <button class="send-button" aria-label="发送">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12 19V5M6 11l6-6 6 6" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+
+    <script>
+      const root = document.documentElement
+      const toggle = document.querySelector("#theme-toggle")
+      const label = toggle.querySelector(".theme-toggle__label")
+      const icon = toggle.querySelector(".theme-toggle__thumb")
+
+      const sunIcon = `
+        <svg viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="3.5"></circle>
+          <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"></path>
+        </svg>`
+      const moonIcon = `
+        <svg viewBox="0 0 24 24">
+          <path d="M20 15.6A8.5 8.5 0 0 1 8.4 4 8.5 8.5 0 1 0 20 15.6Z"></path>
+        </svg>`
+
+      function setTheme(theme) {
+        const isDark = theme === "dark"
+        root.dataset.theme = theme
+        toggle.setAttribute("aria-pressed", String(isDark))
+        toggle.setAttribute(
+          "aria-label",
+          isDark ? "切换浅色主题" : "切换深色主题"
+        )
+        label.textContent = isDark ? "深色" : "浅色"
+        icon.innerHTML = isDark ? moonIcon : sunIcon
+      }
+
+      toggle.addEventListener("click", () => {
+        setTheme(root.dataset.theme === "dark" ? "light" : "dark")
+      })
+
+      document.querySelectorAll(".nav-item").forEach((item) => {
+        item.addEventListener("click", () => {
+          document
+            .querySelectorAll(".nav-item")
+            .forEach((navItem) => navItem.classList.remove("is-active"))
+          item.classList.add("is-active")
+        })
+      })
+    </script>
+  </body>
+</html>
diff --git a/sites/README.md b/sites/README.md
index 6cf57ed..09f1822 100644
--- a/sites/README.md
+++ b/sites/README.md
@@ -17,33 +17,27 @@ python -m http.server 4173 --bind 127.0.0.1 --directory sites
 ```powershell
 node sites/scripts/validate.mjs
 node --check sites/app.js
-node --check sites/site.config.js
 ```
 
-校验脚本会检查必需文件、页内链接、本地资源、关键产品文案、主题与响应式规则，以及未发布状态下的下载链接保护。
+校验脚本会检查必需文件、页内链接、本地资源、关键产品文案、主题与响应式规则，以及下载入口是否始终指向官方最新 Release。
 
-## Release 配置
+## 下载入口
 
-当前版本的 Release 地址集中在 `site.config.js`，版本号必须与根目录
-`package.json` 保持一致：
+官网正文不展示具体版本号，所有下载入口直接指向 GitHub 最新正式
+Release：
 
-```js
-window.GOODBUDDY_SITE_CONFIG = Object.freeze({
-  version: "0.8.1",
-  releasePublished: true,
-  releaseUrl: "https://github.com/mesalogo/goodbuddy/releases/tag/v0.8.1",
-});
+```text
+https://github.com/mesalogo/goodbuddy/releases/latest
 ```
 
-准备尚未发布的版本时，将 `releasePublished` 暂时设为 `false`；正式
-Release 确认发布后改回 `true`，页面上的下载入口才会指向 Release
-页面。官网不配置或猜测具体安装资产名称。
+新版本发布后 GitHub 会自动更新该地址的目标，官网无需同步修改版本号
+或安装资产名称。用户在 Release 页面按系统与架构选择文件并核对
+SHA-256 清单。
 
 ## 文件
 
 - `index.html`：页面结构与简体中文内容
 - `styles.css`：语义令牌、浅深主题、焦点与响应式布局
-- `app.js`：主题、移动导航、当前章节和 Release 状态
-- `site.config.js`：版本与未来 Release 地址
+- `app.js`：主题、移动导航和当前章节
 - `assets/favicon.svg`：站点图标
 - `scripts/validate.mjs`：无依赖静态检查
diff --git a/sites/app.js b/sites/app.js
index 748a32f..672b239 100644
--- a/sites/app.js
+++ b/sites/app.js
@@ -8,7 +8,6 @@
   const themeToggle = document.querySelector("[data-theme-toggle]");
   const themeColor = document.querySelector('meta[name="theme-color"]');
   const systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
-  const config = window.GOODBUDDY_SITE_CONFIG;
 
   const getSavedTheme = () => {
     try {
@@ -46,41 +45,7 @@
     header?.classList.toggle("is-scrolled", window.scrollY > 12);
   };
 
-  const configureReleaseLinks = () => {
-    const releaseLinks = document.querySelectorAll("[data-release-link]");
-    const hasValidVersion =
-      typeof config?.version === "string" &&
-      /^\d+\.\d+\.\d+$/.test(config.version);
-    const expectedReleaseUrl = hasValidVersion
-      ? `https://github.com/mesalogo/goodbuddy/releases/tag/v${config.version}`
-      : "";
-    const isReady =
-      config?.releasePublished === true &&
-      typeof config.releaseUrl === "string" &&
-      config.releaseUrl === expectedReleaseUrl;
-
-    releaseLinks.forEach((link) => {
-      if (!isReady) {
-        link.removeAttribute("href");
-        link.removeAttribute("target");
-        link.removeAttribute("rel");
-        link.setAttribute("aria-disabled", "true");
-        link.classList.add("is-disabled");
-        link.textContent = "发布后开放";
-        return;
-      }
-
-      link.href = config.releaseUrl;
-      link.target = "_blank";
-      link.rel = "noreferrer";
-      link.removeAttribute("aria-disabled");
-      link.classList.remove("is-disabled");
-      link.innerHTML = `前往 v${config.version} Release<span class="sr-only">（在新窗口打开）</span>`;
-    });
-  };
-
   applyTheme(getSavedTheme() ?? (systemTheme.matches ? "dark" : "light"));
-  configureReleaseLinks();
   setHeaderState();
 
   themeToggle?.addEventListener("click", () => {
diff --git a/sites/index.html b/sites/index.html
index 75003e5..e9f19e0 100644
--- a/sites/index.html
+++ b/sites/index.html
@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="GoodBuddy 是安全可控的桌面智能助手与 Agent 工作空间。0.8.1 改进语音反馈、文档附件与桌面交互稳定性。"
+      content="GoodBuddy 是桌面 AI 助手，支持项目知识库、魔法笔记、远程消息通道和受控工具执行。"
     />
     <meta name="theme-color" content="#f6f8fb" />
-    <title>GoodBuddy｜安全可控的桌面智能助手</title>
+    <title>GoodBuddy｜桌面 AI 助手</title>
     <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="./styles.css" />
     <script>
@@ -57,7 +57,7 @@
 
         <nav class="site-navigation" id="site-navigation" aria-label="主导航" data-navigation>
           <a href="#features">功能</a>
-          <a href="#release">0.8.0</a>
+          <a href="#release">亮点</a>
           <a href="#download">下载</a>
           <a href="#security">安全</a>
         </nav>
@@ -91,33 +91,35 @@
           <div class="hero-copy">
             <div class="eyebrow">
               <span class="status-dot" aria-hidden="true"></span>
-              GoodBuddy 0.8.1 已发布
+              桌面 AI 助手
             </div>
-            <h1 id="hero-title">把 AI 放在桌面，<br /><span>也把控制权留在手中。</span></h1>
+            <h1 id="hero-title">在桌面上使用 AI，<br /><span>工作过程看得见。</span></h1>
             <p class="hero-lead">
-              GoodBuddy 是安全可控的桌面智能助手与 Agent 工作空间。连接模型、知识与工具，
-              在清晰的范围和审批边界内完成真正的工作。
+              GoodBuddy 可以连接模型、知识库和工具。知识按全局或项目管理，
+              工具执行前可以确认，运行记录随时可查。
             </p>
             <div class="hero-actions">
-              <a class="button button--primary" href="#release">查看 0.8.0 亮点</a>
+              <a class="button button--primary" href="#features">查看功能</a>
               <a
-                class="button button--secondary is-disabled"
-                aria-disabled="true"
+                class="button button--secondary"
+                href="https://github.com/mesalogo/goodbuddy/releases/latest"
+                target="_blank"
+                rel="noreferrer"
                 data-release-link
-              >发布后开放</a>
+              >前往官方下载页<span class="sr-only">（在新窗口打开）</span></a>
             </div>
             <ul class="hero-facts" aria-label="产品特性概览">
               <li>
                 <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 10 3 3 7-7" /></svg>
-                Windows / macOS / Linux
+                支持 Windows / macOS / Linux
               </li>
               <li>
                 <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 10 3 3 7-7" /></svg>
-                项目范围隔离
+                全局和项目知识分开管理
               </li>
               <li>
                 <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 10 3 3 7-7" /></svg>
-                工具调用可审批
+                工具执行前可确认
               </li>
             </ul>
           </div>
@@ -145,6 +147,7 @@
                   </div>
                   <div class="side-item is-active"><span></span>对话</div>
                   <div class="side-item"><span></span>知识库</div>
+                  <div class="side-item"><span></span>魔法笔记</div>
                   <div class="side-item"><span></span>智能心跳</div>
                   <div class="side-item"><span></span>任务与活动</div>
                   <div class="sidebar-spacer"></div>
@@ -153,24 +156,24 @@
                 <div class="app-content">
                   <div class="app-content-header">
                     <div>
-                      <strong>产品发布准备</strong>
-                      <span>项目：GoodBuddy 0.8.0</span>
+                      <strong>产品官网维护</strong>
+                      <span>项目：GoodBuddy 官网</span>
                     </div>
                     <div class="mode-pill">计划模式</div>
                   </div>
                   <div class="message-area">
-                    <div class="message message--user">梳理 0.8.0 发布前还需要完成的工作。</div>
+                    <div class="message message--user">检查官网内容与下载入口是否需要更新。</div>
                     <div class="message message--assistant">
                       <div class="assistant-label">
                         <span class="assistant-avatar">G</span>
                         <strong>GoodBuddy</strong>
                       </div>
-                      <p>我会先核对发布清单与项目知识，再给出不执行变更的计划。</p>
+                      <p>我会先检查站点内容和发布页，不修改文件。</p>
                       <div class="tool-card">
                         <div class="tool-icon">
                           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h10M4 18h7" /></svg>
                         </div>
-                        <div><strong>读取项目知识</strong><span>范围：GoodBuddy 0.8.0</span></div>
+                        <div><strong>读取项目知识</strong><span>范围：GoodBuddy 官网</span></div>
                         <span class="tool-state">已完成</span>
                       </div>
                       <div class="plan-lines" aria-hidden="true"><span></span><span></span><span></span></div>
@@ -187,11 +190,11 @@
               <span class="floating-icon">
                 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 5 6v5c0 4.5 2.8 8.6 7 10 4.2-1.4 7-5.5 7-10V6l-7-3Z" /><path d="m9 12 2 2 4-4" /></svg>
               </span>
-              <span><strong>执行前确认</strong><small>每次工具调用都清晰可见</small></span>
+              <span><strong>执行前确认</strong><small>查看工具名称和影响</small></span>
             </div>
             <div class="floating-card floating-card--scope">
               <span class="scope-dot"></span>
-              <span><strong>项目范围</strong><small>上下文不会悄悄混用</small></span>
+              <span><strong>项目范围</strong><small>知识和任务按项目区分</small></span>
             </div>
           </div>
         </div>
@@ -201,8 +204,8 @@
         <div class="section-inner proof-grid">
           <div><strong>3 种</strong><span>问答 / 计划 / 执行模式</span></div>
           <div><strong>2 层</strong><span>全局与项目知识范围</span></div>
-          <div><strong>明确</strong><span>工具权限与活动记录</span></div>
-          <div><strong>跨平台</strong><span>x64 与 arm64</span></div>
+          <div><strong>可查看</strong><span>工具调用与活动记录</span></div>
+          <div><strong>6 组</strong><span>系统与架构组合</span></div>
         </div>
       </section>
 
@@ -210,11 +213,11 @@
         <div class="section-inner">
           <div class="section-heading">
             <div>
-              <p class="kicker">围绕真实工作流设计</p>
-              <h2 id="features-title">不是另一个聊天窗口</h2>
+              <p class="kicker">主要功能</p>
+              <h2 id="features-title">GoodBuddy 可以做什么</h2>
             </div>
             <p>
-              从上下文组织到执行审批，每一步都让范围、状态和风险保持可见。
+              管理对话和知识，运行任务，并在需要时调用经过确认的工具。
             </p>
           </div>
 
@@ -227,8 +230,8 @@
                 </svg>
               </div>
               <span class="feature-number">01</span>
-              <h3>受控 Agent 运行时</h3>
-              <p>问答与计划模式在运行时保持只读；执行模式中的工具操作经过现有审批控制，并保留取消、超时与输出边界。</p>
+              <h3>Agent 运行模式</h3>
+              <p>问答和计划模式不执行工具。执行模式通过审批控制调用工具，并支持取消、超时和输出限制。</p>
               <div class="mode-row" aria-label="三种工作模式">
                 <span>问答 <small>只读</small></span>
                 <span>计划 <small>只读</small></span>
@@ -244,8 +247,8 @@
                 </svg>
               </div>
               <span class="feature-number">02</span>
-              <h3>有范围的知识</h3>
-              <p>区分全局与项目知识。搜索、引用和创建都围绕当前范围展开，让上下文来源清楚可追溯。</p>
+              <h3>知识库按范围管理</h3>
+              <p>全局知识和项目知识分开保存。搜索结果和引用会显示来源。</p>
             </article>
 
             <article class="feature-card">
@@ -256,8 +259,8 @@
                 </svg>
               </div>
               <span class="feature-number">03</span>
-              <h3>智能心跳与任务</h3>
-              <p>将周期计划、运行状态、结果与活动记录放在同一条可检查的工作链路中。</p>
+              <h3>定时任务和运行记录</h3>
+              <p>可以创建周期计划，查看每次运行的状态、结果和活动记录。</p>
             </article>
 
             <article class="feature-card">
@@ -267,8 +270,8 @@
                 </svg>
               </div>
               <span class="feature-number">04</span>
-              <h3>文档与图像输入</h3>
-              <p>单次最多添加 8 个附件，支持同时传入 5 张图片；在一个会话中汇集任务所需材料。</p>
+              <h3>文档和图片</h3>
+              <p>单次最多添加 8 个附件，支持同时传入 5 张图片。</p>
             </article>
 
             <article class="feature-card">
@@ -280,8 +283,8 @@
                 </svg>
               </div>
               <span class="feature-number">05</span>
-              <h3>可控的图像生成</h3>
-              <p>生图质量支持 auto、low、medium、high 四档。结果以单张图像呈现，并作为本地工件保存。</p>
+              <h3>生成图片</h3>
+              <p>支持 auto、low、medium、high 四档质量。生成结果会保存到本地。</p>
             </article>
 
             <article class="feature-card feature-card--wide feature-card--accent">
@@ -292,8 +295,8 @@
                 </svg>
               </div>
               <span class="feature-number">06</span>
-              <h3>模型与工具，由你连接</h3>
-              <p>在桌面端管理模型配置、MCP 工具与运行时。密钥留在主进程的加密设置存储中，不交给网页渲染层。</p>
+              <h3>模型、MCP 与运行时</h3>
+              <p>模型连接、MCP 工具和运行时都在桌面端配置。API 密钥只保存在主进程。</p>
               <div class="provider-pills" aria-label="支持的连接类型">
                 <span>模型提供商</span><span>MCP</span><span>OpenCode</span><span>Continue</span>
               </div>
@@ -306,13 +309,13 @@
         <div class="section-inner">
           <div class="release-heading">
             <div class="version-lockup" aria-hidden="true">
-              <span>VERSION</span>
-              <strong>0.8.0</strong>
+              <span>HIGHLIGHTS</span>
+              <strong>NOW</strong>
             </div>
             <div>
-              <p class="kicker">下一站</p>
-              <h2 id="release-title">0.8.0 更新亮点</h2>
-              <p>更聪明地组织工作，也更诚实地标注能力边界。以下功能状态以正式 Release 说明为准。</p>
+              <p class="kicker">近期新增</p>
+              <h2 id="release-title">笔记、消息通道和运行时改进</h2>
+              <p>下面这些功能已经包含在当前正式版本中。</p>
             </div>
           </div>
 
@@ -320,56 +323,56 @@
             <li class="release-item">
               <div class="release-index">01</div>
               <div class="release-copy">
-                <div class="release-label">0.8.0</div>
-                <h3>Subagent 与智能路由</h3>
-                <p>面向复杂任务的协作与路由能力归入 0.8.0，不将仍在开发中的路径描述为当前稳定能力。</p>
+                <div class="release-label">魔法笔记</div>
+                <h3>魔法笔记</h3>
+                <p>在本地管理笔记和待办，支持范围、筛选、富文本编辑和 AI 评论。</p>
               </div>
               <div class="release-visual route-visual" aria-hidden="true">
-                <span class="route-node route-node--main">主任务</span>
+                <span class="route-node route-node--main">笔记</span>
                 <span class="route-line route-line--one"></span>
                 <span class="route-line route-line--two"></span>
-                <span class="route-node route-node--sub-one">研究</span>
-                <span class="route-node route-node--sub-two">验证</span>
+                <span class="route-node route-node--sub-one">待办</span>
+                <span class="route-node route-node--sub-two">AI 评论</span>
               </div>
             </li>
 
             <li class="release-item">
               <div class="release-index">02</div>
               <div class="release-copy">
-                <div class="release-label release-label--preview">开发者预览</div>
-                <h3>IM 渠道接入</h3>
-                <p>钉钉与企业微信以开发者预览提供；个人微信处于实验性边界，不作为面向生产环境的稳定承诺。</p>
+                <div class="release-label release-label--preview">远程通道</div>
+                <h3>微信、企业微信和钉钉</h3>
+                <p>每个消息通道使用独立会话和系统项目，并记录发送者范围、运行模式和活动。</p>
               </div>
               <div class="release-visual channel-visual" aria-label="渠道状态">
-                <span><b>钉钉</b><small>开发者预览</small></span>
-                <span><b>企业微信</b><small>开发者预览</small></span>
-                <span class="is-experimental"><b>个人微信</b><small>实验性边界</small></span>
+                <span><b>钉钉</b><small>独立会话</small></span>
+                <span><b>企业微信</b><small>范围控制</small></span>
+                <span class="is-experimental"><b>微信 ClawBot</b><small>扫码连接</small></span>
               </div>
             </li>
 
             <li class="release-item">
               <div class="release-index">03</div>
               <div class="release-copy">
-                <div class="release-label">多模态输入</div>
-                <h3>更多材料，一次带上</h3>
-                <p>单次最多 8 个附件，并已验证同时传入 5 张图片。限制保持可见，避免把超出边界的输入静默带入任务。</p>
+                <div class="release-label">安全媒体</div>
+                <h3>远程消息中的图片和文件</h3>
+                <p>微信私聊支持图片与文件，单条消息最多 4 个附件。回复不会自动发送工作区中的已有文件。</p>
               </div>
               <div class="release-visual attachment-visual" aria-hidden="true">
                 <div class="attachment-stack"><span></span><span></span><span></span></div>
-                <div><strong>8</strong><small>附件上限</small></div>
-                <div><strong>5</strong><small>图片上限</small></div>
+                <div><strong>4</strong><small>单条附件</small></div>
+                <div><strong>12MB</strong><small>合计上限</small></div>
               </div>
             </li>
 
             <li class="release-item">
               <div class="release-index">04</div>
               <div class="release-copy">
-                <div class="release-label">图像生成</div>
-                <h3>清晰选择质量档位</h3>
-                <p>支持 auto、low、medium、high 四档质量。当前按单张结果呈现，不承诺批量多图生成。</p>
+                <div class="release-label">Agent Runtime</div>
+                <h3>运行时与 Skills</h3>
+                <p>OpenCode 与 Continue 共用更一致的 Skills、系统消息和工具配置，并保留环境白名单、取消、超时和审批控制。</p>
               </div>
-              <div class="release-visual quality-visual" aria-label="图像质量档位">
-                <span>auto</span><span>low</span><span>medium</span><span class="is-selected">high</span>
+              <div class="release-visual quality-visual" aria-label="运行时能力">
+                <span>Skills</span><span>Tools</span><span>OpenCode</span><span class="is-selected">Continue</span>
               </div>
             </li>
           </ol>
@@ -380,11 +383,11 @@
         <div class="section-inner">
           <div class="section-heading section-heading--center">
             <div>
-              <p class="kicker">原生桌面体验</p>
-              <h2 id="download-title">准备好，在你的设备上运行</h2>
+              <p class="kicker">下载</p>
+              <h2 id="download-title">下载 GoodBuddy</h2>
             </div>
             <p>
-              v0.8.1 Release 提供经过校验的跨平台安装包与哈希清单，下载入口统一指向 GitHub Release。
+              最新 Release 提供经过校验的跨平台安装包与哈希清单。进入官方下载页，按系统与架构选择安装包。
             </p>
           </div>
 
@@ -396,7 +399,13 @@
                 </svg>
               </div>
               <div><h3>Windows</h3><p>x64 / arm64 · NSIS / 便携版</p></div>
-              <a class="button button--download is-disabled" aria-disabled="true" data-release-link>发布后开放</a>
+              <a
+                class="button button--download"
+                href="https://github.com/mesalogo/goodbuddy/releases/latest"
+                target="_blank"
+                rel="noreferrer"
+                data-release-link
+              >选择 Windows 安装包<span class="sr-only">（在新窗口打开）</span></a>
             </article>
             <article class="download-card">
               <div class="platform-icon">
@@ -405,7 +414,13 @@
                 </svg>
               </div>
               <div><h3>macOS</h3><p>x64 / arm64 · DMG / ZIP</p></div>
-              <a class="button button--download is-disabled" aria-disabled="true" data-release-link>发布后开放</a>
+              <a
+                class="button button--download"
+                href="https://github.com/mesalogo/goodbuddy/releases/latest"
+                target="_blank"
+                rel="noreferrer"
+                data-release-link
+              >选择 macOS 安装包<span class="sr-only">（在新窗口打开）</span></a>
             </article>
             <article class="download-card">
               <div class="platform-icon">
@@ -415,7 +430,13 @@
                 </svg>
               </div>
               <div><h3>Linux</h3><p>x64 / arm64 · AppImage / DEB</p></div>
-              <a class="button button--download is-disabled" aria-disabled="true" data-release-link>发布后开放</a>
+              <a
+                class="button button--download"
+                href="https://github.com/mesalogo/goodbuddy/releases/latest"
+                target="_blank"
+                rel="noreferrer"
+                data-release-link
+              >选择 Linux 安装包<span class="sr-only">（在新窗口打开）</span></a>
             </article>
           </div>
 
@@ -424,8 +445,8 @@
               <circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8h.01" />
             </svg>
             <div>
-              <strong>Release 状态：尚未发布</strong>
-              <span>本站下载按钮由单一配置控制；正式发布前不会指向占位资产。</span>
+              <strong>下载与校验</strong>
+              <span>下载入口始终指向最新正式 Release；安装前请按系统与架构选择文件，并核对 SHA-256 清单。</span>
             </div>
           </div>
         </div>
@@ -440,11 +461,10 @@
                 <path d="m17.5 24 4.5 4.5 9-10" />
               </svg>
             </div>
-            <p class="kicker">Security by boundary</p>
-            <h2 id="security-title">安全不是开关，<br />而是每一层的边界</h2>
+            <p class="kicker">安全设计</p>
+            <h2 id="security-title">主要安全边界</h2>
             <p>
-              GoodBuddy 将桌面渲染、密钥、工具运行与用户数据分层处理。
-              风险操作保持可见，未受信运行时不会绕过审批边界。
+              渲染界面不能直接读取密钥或调用 Node。工具和子运行时通过主进程受控访问系统能力。
             </p>
             <a
               class="text-link"
@@ -461,19 +481,19 @@
           <div class="security-list">
             <article>
               <span class="security-number">01</span>
-              <div><h3>密钥不进入渲染层</h3><p>API 密钥留在主进程，并写入加密设置存储；网页界面不获得直接 Node 访问。</p></div>
+              <div><h3>密钥仅存主进程</h3><p>API 密钥写入加密设置存储，不会暴露给渲染界面。</p></div>
             </article>
             <article>
               <span class="security-number">02</span>
-              <div><h3>跨进程能力明确暴露</h3><p>通过窄化的预加载桥接调用能力，IPC 输入经过共享模式校验，并核验可信发送方。</p></div>
+              <div><h3>IPC 输入经过校验</h3><p>预加载层只暴露明确的方法。IPC 输入使用共享模式校验，并检查发送方。</p></div>
             </article>
             <article>
               <span class="security-number">03</span>
-              <div><h3>运行时按不可信处理</h3><p>OpenCode 与 Continue 子运行时受环境白名单、沙箱检查及逐工具审批约束。</p></div>
+              <div><h3>子运行时受限</h3><p>OpenCode 与 Continue 使用环境白名单、沙箱检查和工具审批。</p></div>
             </article>
             <article>
               <span class="security-number">04</span>
-              <div><h3>状态与审计语义可见</h3><p>取消、超时、输出边界和活动记录属于执行链路的一部分，不用模糊的“已完成”掩盖风险。</p></div>
+              <div><h3>工具执行可追踪</h3><p>工具名称、状态、取消、超时和输出限制都会记录在活动中。</p></div>
             </article>
           </div>
         </div>
@@ -484,16 +504,18 @@
           <div class="cta-card">
             <div class="cta-orbit" aria-hidden="true"><span></span><span></span></div>
             <div>
-              <p class="kicker">GoodBuddy 0.8.1</p>
-              <h2 id="cta-title">一个更能做事，也更懂边界的桌面伙伴。</h2>
-              <p>关注 Release，第一时间获取正式版本、校验信息与完整更新说明。</p>
+              <p class="kicker">下载</p>
+              <h2 id="cta-title">选择适合你系统的安装包</h2>
+              <p>发布页提供安装文件、便携版和 SHA-256 校验清单。</p>
             </div>
             <div class="cta-actions">
               <a
-                class="button button--primary is-disabled"
-                aria-disabled="true"
+                class="button button--primary"
+                href="https://github.com/mesalogo/goodbuddy/releases/latest"
+                target="_blank"
+                rel="noreferrer"
                 data-release-link
-              >发布后开放</a>
+              >前往官方下载页<span class="sr-only">（在新窗口打开）</span></a>
               <a
                 class="button button--secondary"
                 href="https://github.com/mesalogo/goodbuddy"
@@ -519,10 +541,10 @@
           </svg>
           <span>GoodBuddy</span>
         </a>
-        <p>安全可控的桌面智能助手与 Agent 工作空间。</p>
+        <p>桌面 AI 助手与 Agent 工作空间。</p>
         <div class="footer-links">
           <a href="#features">功能</a>
-          <a href="#release">0.8.0</a>
+          <a href="#release">亮点</a>
           <a href="#security">安全</a>
           <a href="https://github.com/mesalogo/goodbuddy" target="_blank" rel="noreferrer">
             GitHub<span class="sr-only">（在新窗口打开）</span>
@@ -532,7 +554,6 @@
       </div>
     </footer>
 
-    <script src="./site.config.js"></script>
     <script src="./app.js"></script>
   </body>
 </html>
diff --git a/sites/scripts/validate.mjs b/sites/scripts/validate.mjs
index 01fda3f..fdc71df 100644
--- a/sites/scripts/validate.mjs
+++ b/sites/scripts/validate.mjs
@@ -3,14 +3,12 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 const siteRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-const repositoryRoot = path.resolve(siteRoot, "..");
 const errors = [];
 
 const requiredFiles = [
   "index.html",
   "styles.css",
   "app.js",
-  "site.config.js",
   "assets/favicon.svg",
   "README.md",
 ];
@@ -41,26 +39,16 @@ await Promise.all(
   }),
 );
 
-const [html, css, appJs, configJs] = await Promise.all([
+const [html, css, appJs] = await Promise.all([
   readSiteFile("index.html"),
   readSiteFile("styles.css"),
   readSiteFile("app.js"),
-  readSiteFile("site.config.js"),
 ]);
-let packageVersion = "";
-try {
-  packageVersion = JSON.parse(
-    await readFile(path.join(repositoryRoot, "package.json"), "utf8"),
-  ).version;
-} catch {
-  errors.push("无法读取 package.json 版本");
-}
 
 for (const [relativePath, content] of [
   ["index.html", html],
   ["styles.css", css],
   ["app.js", appJs],
-  ["site.config.js", configJs],
 ]) {
   report(!/[ \t]+$/m.test(content), `${relativePath} 包含行尾空白`);
   report(!content.includes("\t"), `${relativePath} 包含 Tab 缩进`);
@@ -81,43 +69,39 @@ for (const breakpoint of ["1199px", "959px", "719px"]) {
 }
 
 const requiredCopy = [
-  "Subagent 与智能路由",
-  "钉钉与企业微信以开发者预览提供",
-  "个人微信处于实验性边界",
+  "在本地管理笔记和待办",
+  "微信、企业微信和钉钉",
+  "单条消息最多 4 个附件",
+  "OpenCode 与 Continue",
   "单次最多添加 8 个附件，支持同时传入 5 张图片",
   "auto、low、medium、high",
-  "当前按单张结果呈现，不承诺批量多图生成",
-  "发布后开放",
-  "安全不是开关",
+  "下载入口始终指向最新正式 Release",
+  "主要安全边界",
 ];
 
 for (const copy of requiredCopy) {
   report(html.includes(copy), `缺少准确文案：${copy}`);
 }
 
+const htmlWithoutSvg = html.replace(/<svg\b[\s\S]*?<\/svg>/g, "");
 report(
-  configJs.includes(`version: "${packageVersion}"`),
-  `site.config.js 版本必须与 package.json 的 ${packageVersion} 一致`,
-);
-report(
-  /releasePublished:\s*true/.test(configJs),
-  `v${packageVersion} Release 发布后 releasePublished 必须为 true`,
-);
-report(
-  configJs.includes(
-    `releaseUrl: "https://github.com/mesalogo/goodbuddy/releases/tag/v${packageVersion}"`,
-  ),
-  `v${packageVersion} Release URL 配置不正确`,
-);
-report(
-  appJs.includes("config?.releasePublished === true"),
-  "下载链接必须受 releasePublished 配置保护",
-);
-report(
-  appJs.includes("config.releaseUrl === expectedReleaseUrl"),
-  "下载链接必须与配置版本对应的 GitHub Release 地址一致",
+  !/\bv?\d+\.\d+\.\d+\b/.test(htmlWithoutSvg),
+  "官网正文不得写入需要随发布更新的具体版本号",
 );
 
+const releaseLinks = [
+  ...html.matchAll(/<a\b(?=[^>]*data-release-link)[^>]*>/g),
+].map((match) => match[0]);
+report(releaseLinks.length >= 5, "缺少完整的官方下载入口");
+for (const link of releaseLinks) {
+  report(
+    /href="https:\/\/github\.com\/mesalogo\/goodbuddy\/releases\/latest"/.test(link),
+    `下载入口必须指向官方最新 Release：${link}`,
+  );
+  report(/target="_blank"/.test(link), `下载入口必须在新窗口打开：${link}`);
+  report(/rel="[^"]*noreferrer[^"]*"/.test(link), `下载入口缺少 noreferrer：${link}`);
+}
+
 const ids = [...html.matchAll(/\sid="([^"]+)"/g)].map((match) => match[1]);
 const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index);
 report(duplicateIds.length === 0, `存在重复 id：${[...new Set(duplicateIds)].join(", ")}`);
diff --git a/sites/site.config.js b/sites/site.config.js
deleted file mode 100644
index 3260599..0000000
--- a/sites/site.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-window.GOODBUDDY_SITE_CONFIG = Object.freeze({
-  version: "0.8.1",
-  releasePublished: true,
-  releaseUrl: "https://github.com/mesalogo/goodbuddy/releases/tag/v0.8.1",
-});
diff --git a/src/main/ipc.ts b/src/main/ipc.ts
index df88d4b..e7ba356 100644
--- a/src/main/ipc.ts
+++ b/src/main/ipc.ts
@@ -520,6 +520,20 @@ function getKnowledgeSnapshot(
         documentsById.get(item.documentId)?.title ?? '未知文档',
       excerpt: item.quote ?? '',
       location: item.location
+    })),
+    tasks: snapshot.tasks.map((task) => ({
+      id: task.id,
+      libraryId: task.libraryId,
+      sourceId: task.sourceId,
+      documentId: task.documentId,
+      documentName: task.documentName,
+      kind: task.kind,
+      status: task.status,
+      progress: task.progress,
+      message: task.message,
+      createdAt: task.createdAt,
+      startedAt: task.startedAt,
+      completedAt: task.completedAt
     }))
   }
 }
@@ -3515,12 +3529,22 @@ export function registerIpcHandlers(
       assertTrustedSender(event, window)
       const value = knowledgeUpdateLibrarySchema.parse(input)
       knowledgeService.database.updateKnowledgeBase(value.libraryId, {
+        name: value.name,
+        description: value.description,
         graphEnabled: value.graphEnabled,
         graphStrategy: value.graphStrategy
       })
     }
   )
 
+  ipcMain.handle(
+    ipcChannels.knowledgeReextractGraph,
+    async (event, input: unknown) => {
+      assertTrustedSender(event, window)
+      return knowledgeService.reextractGraph(knowledgeIdSchema.parse(input))
+    }
+  )
+
   ipcMain.handle(
     ipcChannels.knowledgeSelectFiles,
     async (event, input: unknown) => {
diff --git a/src/main/knowledge/graph-extractor.test.ts b/src/main/knowledge/graph-extractor.test.ts
index 838c23b..947cba0 100644
--- a/src/main/knowledge/graph-extractor.test.ts
+++ b/src/main/knowledge/graph-extractor.test.ts
@@ -348,6 +348,28 @@ describe('extraction strategies', () => {
     )
   })
 
+  it('propagates model extraction failures for hybrid and model strategies', async () => {
+    const chunks = [{ id: 'fallback', content: '# Local Entity' }]
+    for (const strategy of ['hybrid', 'model'] as const) {
+      await expect(
+        extractKnowledgeGraph(chunks, {
+          strategy,
+          extractStructured: async () => {
+            throw new Error('模型未返回图谱内容')
+          }
+        })
+      ).rejects.toThrow('模型未返回图谱内容')
+    }
+    await expect(
+      extractKnowledgeGraph(chunks, {
+        strategy: 'hybrid',
+        extractStructured: async () => {
+          return { invalid: true }
+        }
+      })
+    ).rejects.toThrow()
+  })
+
   it('supports rules, model, and ask behavior without an implicit model call', async () => {
     const chunks = [{ id: 'strategy', content: '# Local Entity' }]
     const callback = vi.fn()
@@ -359,14 +381,12 @@ describe('extraction strategies', () => {
       strategy: 'ask',
       extractStructured: callback
     })
-    const unavailable = await extractKnowledgeGraph(chunks, {
-      strategy: 'model'
-    })
-
     expect(callback).not.toHaveBeenCalled()
     expect(rules.requiresModelApproval).toBe(false)
     expect(ask.requiresModelApproval).toBe(true)
-    expect(unavailable.warnings).toEqual(['Model extraction is unavailable'])
+    await expect(
+      extractKnowledgeGraph(chunks, { strategy: 'model' })
+    ).rejects.toThrow('Model extraction is unavailable')
   })
 
   it('honors cancellation before and after the injected model callback', async () => {
diff --git a/src/main/knowledge/graph-extractor.ts b/src/main/knowledge/graph-extractor.ts
index 649f248..0a0922a 100644
--- a/src/main/knowledge/graph-extractor.ts
+++ b/src/main/knowledge/graph-extractor.ts
@@ -679,12 +679,7 @@ export async function extractKnowledgeGraph(
     }
   }
   if (!options.extractStructured) {
-    return {
-      ...rules,
-      strategy,
-      requiresModelApproval: false,
-      warnings: ['Model extraction is unavailable']
-    }
+    throw new Error('Model extraction is unavailable')
   }
 
   const output = await options.extractStructured(
@@ -692,7 +687,11 @@ export async function extractKnowledgeGraph(
     options.signal
   )
   throwIfAborted(options.signal)
-  const model = validateModelGraph(output, prepared)
+  const parsedOutput = parseModelOutput(output)
+  if (!modelEnvelopeSchema.safeParse(parsedOutput).success) {
+    throw new Error('模型返回的图谱结构无效')
+  }
+  const model = validateModelGraph(parsedOutput, prepared)
   const graph =
     strategy === 'hybrid' ? mergeKnowledgeGraphs(rules, model) : model
   return {
diff --git a/src/main/knowledge/knowledge-database.ts b/src/main/knowledge/knowledge-database.ts
index f9f3501..56b8d1f 100644
--- a/src/main/knowledge/knowledge-database.ts
+++ b/src/main/knowledge/knowledge-database.ts
@@ -905,6 +905,54 @@ export class KnowledgeDatabase {
     )
   }
 
+  pruneUnreferencedGeneratedGraph(knowledgeBaseId: string): {
+    entities: number
+    relations: number
+  } {
+    const normalizedId = requiredString(
+      knowledgeBaseId,
+      'knowledgeBaseId',
+      MAX_ID_LENGTH
+    )
+    const database = this.requireDatabase()
+    let entities = 0
+    let relations = 0
+    this.transaction(database, () => {
+      relations = Number(
+        database
+          .prepare(
+            `DELETE FROM graph_relations
+             WHERE knowledge_base_id = ?
+               AND locked = 0
+               AND NOT EXISTS (
+                 SELECT 1 FROM graph_evidence
+                 WHERE relation_id = graph_relations.id
+               )`
+          )
+          .run(normalizedId).changes
+      )
+      entities = Number(
+        database
+          .prepare(
+            `DELETE FROM graph_entities
+             WHERE knowledge_base_id = ?
+               AND locked = 0
+               AND NOT EXISTS (
+                 SELECT 1 FROM graph_evidence
+                 WHERE entity_id = graph_entities.id
+               )
+               AND NOT EXISTS (
+                 SELECT 1 FROM graph_relations
+                 WHERE source_entity_id = graph_entities.id
+                    OR target_entity_id = graph_entities.id
+               )`
+          )
+          .run(normalizedId).changes
+      )
+    })
+    return { entities, relations }
+  }
+
   listChunks(documentId: string, limit = MAX_LIST_LIMIT): Chunk[] {
     const normalizedId = requiredString(
       documentId,
diff --git a/src/main/knowledge/knowledge-service.test.ts b/src/main/knowledge/knowledge-service.test.ts
index 4aad66a..1d4b571 100644
--- a/src/main/knowledge/knowledge-service.test.ts
+++ b/src/main/knowledge/knowledge-service.test.ts
@@ -8,6 +8,7 @@ import {
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { ExtractStructured } from './graph-extractor'
 import { KnowledgeService } from './knowledge-service'
 import type { EmbeddingProvider } from './types'
 import { UrlImporter } from './url-importer'
@@ -17,7 +18,8 @@ const services: KnowledgeService[] = []
 
 async function createService(
   urlImporter?: UrlImporter,
-  embeddingProvider?: EmbeddingProvider
+  embeddingProvider?: EmbeddingProvider,
+  extractStructured?: ExtractStructured
 ): Promise<{ directory: string; service: KnowledgeService }> {
   const directory = await mkdtemp(join(tmpdir(), 'goodbuddy-knowledge-service-'))
   temporaryDirectories.push(directory)
@@ -25,7 +27,8 @@ async function createService(
     databasePath: join(directory, 'knowledge.sqlite'),
     managedRoot: join(directory, 'managed'),
     urlImporter,
-    embeddingProvider
+    embeddingProvider,
+    extractStructured
   })
   await service.initialize()
   services.push(service)
@@ -145,9 +148,101 @@ describe('KnowledgeService', () => {
 
     expect(snapshot.entities.length).toBeGreaterThan(0)
     expect(snapshot.evidence.length).toBeGreaterThan(0)
+    expect(snapshot.tasks).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          kind: 'parsing',
+          status: 'succeeded',
+          progress: 100
+        }),
+        expect.objectContaining({
+          kind: 'embedding',
+          status: 'skipped',
+          progress: 100
+        }),
+        expect.objectContaining({
+          kind: 'graph',
+          status: 'succeeded',
+          progress: 100
+        })
+      ])
+    )
     await service.dispose()
   })
 
+  it('reextracts graph evidence and removes only stale generated entities', async () => {
+    const { directory, service } = await createService()
+    const sourcePath = join(directory, 'reextract.md')
+    await writeFile(
+      sourcePath,
+      'GoodBuddy（产品）依赖 Electron（框架）。',
+      'utf8'
+    )
+    const library = service.createLibrary({
+      name: '重新抽取',
+      storageMode: 'reference',
+      graphEnabled: true,
+      graphStrategy: 'rules'
+    })
+    await service.importPaths(library.id, [sourcePath])
+    const stale = service.database.createEntity({
+      knowledgeBaseId: library.id,
+      name: '过期实体',
+      type: '概念',
+      locked: false
+    })
+    const manual = service.database.createEntity({
+      knowledgeBaseId: library.id,
+      name: '人工实体',
+      type: '概念',
+      locked: true
+    })
+
+    await service.reextractGraph(library.id)
+
+    const snapshot = service.snapshot(library.id)
+    expect(snapshot.evidence.length).toBeGreaterThan(0)
+    expect(service.database.getEntity(stale.id)).toBeUndefined()
+    expect(service.database.getEntity(manual.id)).toBeDefined()
+  })
+
+  it('fails hybrid reextraction when model extraction fails', async () => {
+    const extractStructured = vi.fn(async () => {
+      throw new Error('模型未返回图谱内容')
+    })
+    const { directory, service } = await createService(
+      undefined,
+      undefined,
+      extractStructured
+    )
+    const sourcePath = join(directory, 'hybrid-fallback.md')
+    await writeFile(sourcePath, '# 本地实体', 'utf8')
+    const library = service.createLibrary({
+      name: '混合抽取',
+      storageMode: 'reference',
+      graphEnabled: false,
+      graphStrategy: 'hybrid'
+    })
+    await service.importPaths(library.id, [sourcePath])
+    service.database.updateKnowledgeBase(library.id, {
+      graphEnabled: true
+    })
+
+    await expect(service.reextractGraph(library.id)).rejects.toThrow(
+      '模型未返回图谱内容'
+    )
+    expect(service.snapshot(library.id).entities).toHaveLength(0)
+    expect(service.snapshot(library.id).tasks).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          kind: 'graph',
+          status: 'failed',
+          message: '模型未返回图谱内容'
+        })
+      ])
+    )
+  })
+
   it('indexes optional embeddings and performs vector-backed hybrid search', async () => {
     const provider: EmbeddingProvider = {
       provider: 'test-provider',
diff --git a/src/main/knowledge/knowledge-service.ts b/src/main/knowledge/knowledge-service.ts
index 8de9f01..6f7d929 100644
--- a/src/main/knowledge/knowledge-service.ts
+++ b/src/main/knowledge/knowledge-service.ts
@@ -23,7 +23,8 @@ import { classifyEmbeddingError } from './embedding-errors'
 import {
   extractKnowledgeGraph,
   normalizeEntityAlias,
-  type ExtractStructured
+  type ExtractStructured,
+  type GraphExtractionResult
 } from './graph-extractor'
 import { KnowledgeDatabase } from './knowledge-database'
 import type {
@@ -66,6 +67,21 @@ export type KnowledgeDocumentSnapshot = Document & {
   error?: string
 }
 
+export type KnowledgeTaskSnapshot = {
+  id: string
+  libraryId: string
+  sourceId?: string
+  documentId?: string
+  documentName: string
+  kind: 'parsing' | 'embedding' | 'graph'
+  status: 'queued' | 'running' | 'succeeded' | 'failed' | 'skipped'
+  progress: number
+  message?: string
+  createdAt: string
+  startedAt?: string
+  completedAt?: string
+}
+
 export type KnowledgeSnapshot = {
   libraries: KnowledgeLibrarySnapshot[]
   sources: KnowledgeSourceSnapshot[]
@@ -73,6 +89,7 @@ export type KnowledgeSnapshot = {
   entities: GraphEntity[]
   relations: GraphRelation[]
   evidence: ReturnType<KnowledgeDatabase['listEvidence']>
+  tasks: KnowledgeTaskSnapshot[]
 }
 
 export type KnowledgeServiceOptions = {
@@ -89,6 +106,7 @@ const maximumFileBytes = 20 * 1024 * 1024
 const maximumSourceBytes = 500 * 1024 * 1024
 const maximumFilesPerSource = 2_000
 const maximumEmbeddingChunksPerBatch = 32
+const maximumKnowledgeTasks = 500
 
 function isInside(root: string, candidate: string): boolean {
   const path = relative(resolve(root), resolve(candidate))
@@ -105,6 +123,7 @@ export class KnowledgeService {
   private readonly watchers = new Map<string, FSWatcher>()
   private readonly syncTimers = new Map<string, ReturnType<typeof setTimeout>>()
   private readonly activeSyncs = new Map<string, Promise<void>>()
+  private readonly tasks = new Map<string, KnowledgeTaskSnapshot>()
   private readonly lifecycleController = new AbortController()
 
   constructor(options: KnowledgeServiceOptions) {
@@ -163,6 +182,109 @@ export class KnowledgeService {
     return Promise.resolve()
   }
 
+  private createKnowledgeTask(input: {
+    libraryId: string
+    sourceId?: string
+    documentId?: string
+    documentName: string
+    kind: KnowledgeTaskSnapshot['kind']
+    status?: KnowledgeTaskSnapshot['status']
+    message?: string
+  }): KnowledgeTaskSnapshot {
+    while (this.tasks.size >= maximumKnowledgeTasks) {
+      const oldestTaskId = this.tasks.keys().next().value as
+        | string
+        | undefined
+      if (!oldestTaskId) {
+        break
+      }
+      this.tasks.delete(oldestTaskId)
+    }
+    const now = new Date().toISOString()
+    const status = input.status ?? 'queued'
+    const task: KnowledgeTaskSnapshot = {
+      id: randomUUID(),
+      libraryId: input.libraryId,
+      sourceId: input.sourceId,
+      documentId: input.documentId,
+      documentName: input.documentName.slice(0, 512),
+      kind: input.kind,
+      status,
+      progress: status === 'succeeded' || status === 'skipped' ? 100 : 0,
+      message: input.message?.slice(0, 1_000),
+      createdAt: now,
+      startedAt: status === 'running' ? now : undefined,
+      completedAt:
+        status === 'succeeded' ||
+        status === 'failed' ||
+        status === 'skipped'
+          ? now
+          : undefined
+    }
+    this.tasks.set(task.id, task)
+    return task
+  }
+
+  private updateKnowledgeTask(
+    taskId: string,
+    update: {
+      status?: KnowledgeTaskSnapshot['status']
+      progress?: number
+      message?: string
+      documentId?: string
+      documentName?: string
+    }
+  ): void {
+    const current = this.tasks.get(taskId)
+    if (!current) {
+      return
+    }
+    const status = update.status ?? current.status
+    const terminal =
+      status === 'succeeded' ||
+      status === 'failed' ||
+      status === 'skipped'
+    this.tasks.set(taskId, {
+      ...current,
+      status,
+      documentId: update.documentId ?? current.documentId,
+      documentName:
+        update.documentName?.slice(0, 512) ?? current.documentName,
+      progress:
+        status === 'succeeded' || status === 'skipped'
+          ? 100
+          : update.progress === undefined
+            ? current.progress
+            : Math.max(0, Math.min(100, Math.round(update.progress))),
+      message:
+        update.message === undefined
+          ? current.message
+          : update.message.slice(0, 1_000),
+      startedAt:
+        status === 'running' && !current.startedAt
+          ? new Date().toISOString()
+          : current.startedAt,
+      completedAt:
+        terminal && !current.completedAt
+          ? new Date().toISOString()
+          : current.completedAt
+    })
+  }
+
+  private failKnowledgeTask(taskId: string, error: unknown): void {
+    const current = this.tasks.get(taskId)
+    if (
+      current?.status === 'succeeded' ||
+      current?.status === 'skipped'
+    ) {
+      return
+    }
+    this.updateKnowledgeTask(taskId, {
+      status: 'failed',
+      message: error instanceof Error ? error.message : '任务失败'
+    })
+  }
+
   createLibrary(input: CreateKnowledgeBaseInput): KnowledgeBase {
     return this.database.createKnowledgeBase(input)
   }
@@ -175,6 +297,11 @@ export class KnowledgeService {
     for (const source of this.database.listSources(id)) {
       this.stopWatcher(source.id)
     }
+    for (const task of this.tasks.values()) {
+      if (task.libraryId === id) {
+        this.tasks.delete(task.id)
+      }
+    }
     const deleted = this.database.deleteKnowledgeBase(id)
     if (deleted && library.storageMode === 'managed') {
       const path = join(this.managedRoot, id)
@@ -206,7 +333,8 @@ export class KnowledgeService {
         documents: [],
         entities: [],
         relations: [],
-        evidence: []
+        evidence: [],
+        tasks: []
       }
     }
     const sources = this.database.listSources(libraryId).map((source) => ({
@@ -253,7 +381,12 @@ export class KnowledgeService {
       documents,
       entities: this.database.listEntities(libraryId),
       relations: this.database.listRelations(libraryId),
-      evidence: this.database.listEvidence(libraryId)
+      evidence: this.database.listEvidence(libraryId),
+      tasks: [...this.tasks.values()]
+        .filter((task) => task.libraryId === libraryId)
+        .sort((left, right) =>
+          right.createdAt.localeCompare(left.createdAt)
+        )
     }
   }
 
@@ -427,7 +560,28 @@ export class KnowledgeService {
       this.lifecycleController.signal,
       AbortSignal.timeout(60_000)
     ])
-    const result = await this.urlImporter.import(input, effectiveSignal)
+    const parsingTask = this.createKnowledgeTask({
+      libraryId: library.id,
+      sourceId,
+      documentName: new URL(input).hostname,
+      kind: 'parsing'
+    })
+    let result: Awaited<ReturnType<UrlImporter['import']>>
+    try {
+      this.updateKnowledgeTask(parsingTask.id, {
+        status: 'running',
+        progress: 10,
+        message: '正在抓取并解析网页'
+      })
+      result = await this.urlImporter.import(input, effectiveSignal)
+      this.updateKnowledgeTask(parsingTask.id, {
+        progress: 70,
+        message: '正在保存网页内容'
+      })
+    } catch (error) {
+      this.failKnowledgeTask(parsingTask.id, error)
+      throw error
+    }
     let source = this.database.upsertSource({
       id: sourceId,
       knowledgeBaseId,
@@ -465,6 +619,12 @@ export class KnowledgeService {
           location: chunk.locator
         }))
       )
+      this.updateKnowledgeTask(parsingTask.id, {
+        status: 'succeeded',
+        documentId: document.id,
+        documentName: document.title,
+        message: '网页解析完成'
+      })
       await this.indexDocumentEmbeddings(document)
       await this.extractGraph(effectiveLibrary, document)
       source = this.database.upsertSource({
@@ -477,6 +637,7 @@ export class KnowledgeService {
         }
       })
     } catch (error) {
+      this.failKnowledgeTask(parsingTask.id, error)
       this.database.upsertSource({
         ...source,
         status: 'error',
@@ -511,6 +672,62 @@ export class KnowledgeService {
     return this.syncSource(sourceId)
   }
 
+  async reextractGraph(knowledgeBaseId: string): Promise<void> {
+    const library = this.requireLibrary(knowledgeBaseId)
+    if (!library.graphEnabled) {
+      throw new Error('请先启用知识图谱')
+    }
+    if (library.graphStrategy === 'ask') {
+      throw new Error('按需询问策略不会自动抽取，请在设置中选择其他策略')
+    }
+    const documents = this.database.listDocuments(library.id)
+    const tasks = documents.map((document) =>
+      this.createKnowledgeTask({
+        libraryId: library.id,
+        sourceId: document.sourceId,
+        documentId: document.id,
+        documentName: document.title,
+        kind: 'graph',
+        message: '等待重新抽取'
+      })
+    )
+    for (let index = 0; index < documents.length; index += 1) {
+      const document = documents[index]
+      const task = tasks[index]
+      if (!document || !task) {
+        continue
+      }
+      try {
+        this.updateKnowledgeTask(task.id, {
+          status: 'running',
+          progress: 10,
+          message: '正在重新抽取知识图谱'
+        })
+        const result = await this.extractGraphResult(library, document)
+        this.updateKnowledgeTask(task.id, {
+          progress: 85,
+          message: '正在保存实体和关系'
+        })
+        this.database.removeEvidenceForDocument(document.id)
+        this.storeExtractedGraph(library, document, result)
+        this.updateKnowledgeTask(task.id, {
+          status: 'succeeded',
+          message: `已抽取 ${result.entities.length} 个实体、${result.relations.length} 条关系`
+        })
+      } catch (error) {
+        this.failKnowledgeTask(task.id, error)
+        for (const pendingTask of tasks.slice(index + 1)) {
+          this.updateKnowledgeTask(pendingTask.id, {
+            status: 'skipped',
+            message: '因前序图谱任务失败而未执行'
+          })
+        }
+        throw error
+      }
+    }
+    this.database.pruneUnreferencedGeneratedGraph(library.id)
+  }
+
   async removeSource(sourceId: string): Promise<boolean> {
     const source = this.requireSource(sourceId)
     const library = this.requireLibrary(source.knowledgeBaseId)
@@ -594,19 +811,42 @@ export class KnowledgeService {
       if (!file) {
         continue
       }
+      const parsingTask = this.createKnowledgeTask({
+        libraryId: library.id,
+        sourceId: source.id,
+        documentName: file.relativePath,
+        kind: 'parsing'
+      })
       try {
+        this.updateKnowledgeTask(parsingTask.id, {
+          status: 'running',
+          progress: 10,
+          message: '正在读取文档'
+        })
         const buffer = await this.readBoundedFile(file.absolutePath)
+        this.updateKnowledgeTask(parsingTask.id, {
+          progress: 35,
+          message: '正在解析文档内容'
+        })
         const checksum = createHash('sha256').update(buffer).digest('hex')
         const previous = existing.find(
           (document) => document.externalId === file.relativePath
         )
         if (previous?.checksum === checksum) {
+          this.updateKnowledgeTask(parsingTask.id, {
+            status: 'skipped',
+            message: '文档内容未发生变化'
+          })
           continue
         }
         const parsed = await parseDocument(
           basename(file.absolutePath),
           buffer
         )
+        this.updateKnowledgeTask(parsingTask.id, {
+          progress: 75,
+          message: '正在保存解析结果'
+        })
         const document = this.database.upsertDocument(
           {
             knowledgeBaseId: library.id,
@@ -630,10 +870,17 @@ export class KnowledgeService {
             location: chunk.locator
           }))
         )
+        this.updateKnowledgeTask(parsingTask.id, {
+          status: 'succeeded',
+          documentId: document.id,
+          documentName: document.title,
+          message: '文档解析完成'
+        })
         this.database.removeEvidenceForDocument(document.id)
         await this.indexDocumentEmbeddings(document)
         await this.extractGraph(library, document)
       } catch (error) {
+        this.failKnowledgeTask(parsingTask.id, error)
         failures.push(
           `${file.relativePath}: ${
             error instanceof Error ? error.message : '解析失败'
@@ -661,10 +908,26 @@ export class KnowledgeService {
     requestedProvider?: EmbeddingProvider
   ): Promise<void> {
     const provider = requestedProvider ?? this.embeddingProvider
+    const task = this.createKnowledgeTask({
+      libraryId: document.knowledgeBaseId,
+      sourceId: document.sourceId,
+      documentId: document.id,
+      documentName: document.title,
+      kind: 'embedding'
+    })
     if (!provider) {
+      this.updateKnowledgeTask(task.id, {
+        status: 'skipped',
+        message: '未启用向量化'
+      })
       return
     }
     try {
+      this.updateKnowledgeTask(task.id, {
+        status: 'running',
+        progress: 5,
+        message: '正在准备文档分块'
+      })
       const chunks = this.database.listChunks(document.id, 10_000)
       const embeddings: Array<{
         chunkId: string
@@ -704,8 +967,21 @@ export class KnowledgeService {
             vector
           })
         }
+        this.updateKnowledgeTask(task.id, {
+          progress:
+            5 +
+            ((offset + batch.length) / Math.max(chunks.length, 1)) * 85,
+          message: `正在向量化 ${Math.min(
+            offset + batch.length,
+            chunks.length
+          )}/${chunks.length} 个分块`
+        })
       }
       if (this.embeddingProvider !== provider) {
+        this.updateKnowledgeTask(task.id, {
+          status: 'skipped',
+          message: '向量模型配置已变化'
+        })
         return
       }
       this.database.replaceDocumentEmbeddings(
@@ -714,11 +990,17 @@ export class KnowledgeService {
         provider.model,
         embeddings
       )
+      this.updateKnowledgeTask(task.id, {
+        status: 'succeeded',
+        message: `已向量化 ${chunks.length} 个分块`
+      })
     } catch (error) {
       if (this.lifecycleController.signal.aborted) {
+        this.failKnowledgeTask(task.id, new Error('向量化已取消'))
         return
       }
       const safeError = classifyEmbeddingError(error)
+      this.failKnowledgeTask(task.id, safeError)
       try {
         this.database.recordEmbeddingIndexError(
           document.id,
@@ -736,11 +1018,55 @@ export class KnowledgeService {
     library: KnowledgeBase,
     document: Document
   ): Promise<void> {
-    if (!library.graphEnabled || library.graphStrategy === 'ask') {
+    const task = this.createKnowledgeTask({
+      libraryId: library.id,
+      sourceId: document.sourceId,
+      documentId: document.id,
+      documentName: document.title,
+      kind: 'graph'
+    })
+    if (!library.graphEnabled) {
+      this.updateKnowledgeTask(task.id, {
+        status: 'skipped',
+        message: '知识图谱未启用'
+      })
       return
     }
+    if (library.graphStrategy === 'ask') {
+      this.updateKnowledgeTask(task.id, {
+        status: 'skipped',
+        message: '按需询问策略不自动抽取'
+      })
+      return
+    }
+    try {
+      this.updateKnowledgeTask(task.id, {
+        status: 'running',
+        progress: 10,
+        message: '正在准备图谱抽取'
+      })
+      const result = await this.extractGraphResult(library, document)
+      this.updateKnowledgeTask(task.id, {
+        progress: 85,
+        message: '正在保存实体和关系'
+      })
+      this.storeExtractedGraph(library, document, result)
+      this.updateKnowledgeTask(task.id, {
+        status: 'succeeded',
+        message: `已抽取 ${result.entities.length} 个实体、${result.relations.length} 条关系`
+      })
+    } catch (error) {
+      this.failKnowledgeTask(task.id, error)
+      throw error
+    }
+  }
+
+  private async extractGraphResult(
+    library: KnowledgeBase,
+    document: Document
+  ): Promise<GraphExtractionResult> {
     const chunks = this.database.listChunks(document.id)
-    const result = await extractKnowledgeGraph(
+    return extractKnowledgeGraph(
       chunks.map((chunk) => ({
         id: chunk.id,
         content: chunk.content
@@ -750,6 +1076,13 @@ export class KnowledgeService {
         extractStructured: this.extractStructured
       }
     )
+  }
+
+  private storeExtractedGraph(
+    library: KnowledgeBase,
+    document: Document,
+    result: GraphExtractionResult
+  ): void {
     const existingEntities = this.database.listEntities(library.id)
     const entityIds = new Map<string, string>()
     for (const entity of result.entities) {
diff --git a/src/main/knowledge/model-extractor.test.ts b/src/main/knowledge/model-extractor.test.ts
index 5c46b4f..ded04e1 100644
--- a/src/main/knowledge/model-extractor.test.ts
+++ b/src/main/knowledge/model-extractor.test.ts
@@ -65,7 +65,12 @@ describe('createModelGraphExtractor', () => {
         choices: [
           {
             message: {
-              content: '```json\n{"relations":[]}\n```'
+              content: [
+                {
+                  type: 'text',
+                  text: '```json\n{"relations":[]}\n```'
+                }
+              ]
             }
           }
         ]
@@ -136,6 +141,22 @@ describe('createModelGraphExtractor', () => {
     )
   })
 
+  it('accepts top-level output text from compatible Responses providers', async () => {
+    const extract = createModelGraphExtractor(
+      store({ modelProtocol: 'openai-responses' }),
+      vi.fn(async () =>
+        jsonResponse({
+          output_text: '{"entities":[],"relations":[]}'
+        })
+      )
+    )
+
+    await expect(extract('extract this')).resolves.toEqual({
+      entities: [],
+      relations: []
+    })
+  })
+
   it('requires a key only for API-key authentication', async () => {
     const extract = createModelGraphExtractor(
       store({
diff --git a/src/main/knowledge/model-extractor.ts b/src/main/knowledge/model-extractor.ts
index f383a9b..20dac71 100644
--- a/src/main/knowledge/model-extractor.ts
+++ b/src/main/knowledge/model-extractor.ts
@@ -95,12 +95,28 @@ function openAIChatText(payload: unknown): string {
   if (!Array.isArray(choices)) {
     return ''
   }
-  const message = record(record(choices[0])?.message)
-  return typeof message?.content === 'string' ? message.content : ''
+  const choice = record(choices[0])
+  const message = record(choice?.message)
+  if (typeof message?.content === 'string') {
+    return message.content
+  }
+  if (Array.isArray(message?.content)) {
+    return message.content
+      .flatMap((part) => {
+        const value = record(part)
+        return typeof value?.text === 'string' ? [value.text] : []
+      })
+      .join('')
+  }
+  return typeof choice?.text === 'string' ? choice.text : ''
 }
 
 function openAIResponsesText(payload: unknown): string {
-  const output = record(payload)?.output
+  const response = record(payload)
+  if (typeof response?.output_text === 'string') {
+    return response.output_text
+  }
+  const output = response?.output
   if (!Array.isArray(output)) {
     return ''
   }
@@ -111,7 +127,7 @@ function openAIResponsesText(payload: unknown): string {
     })
     .flatMap((part) => {
       const value = record(part)
-      return value?.type === 'output_text' &&
+      return (value?.type === 'output_text' || value?.type === 'text') &&
         typeof value.text === 'string'
         ? [value.text]
         : []
@@ -211,7 +227,9 @@ export function createModelGraphExtractor(
           ? openAIResponsesText(payload)
           : openAIChatText(payload)
     if (!text) {
-      throw new Error('模型未返回图谱内容')
+      throw new Error(
+        '模型未返回图谱内容，请重试或在知识库设置中切换到规则抽取'
+      )
     }
     return extractJsonText(text)
   }
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 02ab487..58ce64d 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -805,6 +805,11 @@ const desktopApi: DesktopApi = {
         libraryId
       )
     },
+    reextractGraph: (libraryId) =>
+      ipcRenderer.invoke(
+        ipcChannels.knowledgeReextractGraph,
+        libraryId
+      ) as Promise<void>,
     selectFiles: async (libraryId, graphStrategy) => {
       await ipcRenderer.invoke(ipcChannels.knowledgeSelectFiles, {
         libraryId,
diff --git a/src/renderer/src/App.test.tsx b/src/renderer/src/App.test.tsx
index df86e25..5b102a5 100644
--- a/src/renderer/src/App.test.tsx
+++ b/src/renderer/src/App.test.tsx
@@ -498,6 +498,7 @@ const api: DesktopApi = {
     })),
     updateLibrary: vi.fn(async () => {}),
     deleteLibrary: vi.fn(async () => {}),
+    reextractGraph: vi.fn(async () => {}),
     selectFiles: vi.fn(async () => {}),
     selectDirectory: vi.fn(async () => {}),
     importDroppedFiles: vi.fn(async () => {}),
@@ -518,6 +519,35 @@ const api: DesktopApi = {
   }
 }
 
+function composerMenuTrigger(
+  label: '专家角色' | '工作模式'
+): HTMLButtonElement {
+  return screen.getByRole('button', {
+    name: new RegExp(`^${label}：`, 'u')
+  })
+}
+
+function openComposerMenu(
+  label: '专家角色' | '工作模式'
+): HTMLElement {
+  fireEvent.click(composerMenuTrigger(label))
+  return screen.getByRole('menu', { name: label })
+}
+
+function selectComposerOption(
+  label: '专家角色' | '工作模式',
+  optionLabel: string
+): void {
+  const menu = openComposerMenu(label)
+  const option = within(menu)
+    .getByText(optionLabel, { selector: 'span' })
+    .closest<HTMLButtonElement>('button')
+  if (!option) {
+    throw new Error(`Missing ${label} option: ${optionLabel}`)
+  }
+  fireEvent.click(option)
+}
+
 describe('App', () => {
   beforeEach(() => {
     localStorage.clear()
@@ -788,26 +818,28 @@ describe('App', () => {
       return
     }
 
-    expect(within(topbar).queryByLabelText('专家角色')).not.toBeInTheDocument()
-    expect(screen.getByLabelText('专家角色').closest('.composer')).not.toBeNull()
+    expect(
+      within(topbar).queryByRole('button', {
+        name: /^专家角色：/u
+      })
+    ).not.toBeInTheDocument()
+    expect(composerMenuTrigger('专家角色').closest('.composer')).not.toBeNull()
 
-    const appMenuTrigger = within(topbar).getByLabelText('应用菜单')
-    fireEvent.click(appMenuTrigger)
+    const themeToggle = within(topbar).getByRole('button', {
+      name: '切换深色主题'
+    })
+    fireEvent.click(themeToggle)
+    await waitFor(() =>
+      expect(document.documentElement.dataset.theme).toBe('dark')
+    )
     expect(
       screen.queryByRole('menuitem', { name: '重命名会话' })
     ).not.toBeInTheDocument()
     expect(
-      screen.getByRole('menuitem', { name: '安全与 Runtime 设置' })
-    ).toBeVisible()
-    await waitFor(() =>
-      expect(
-        screen.getByRole('menuitem', { name: '安全与 Runtime 设置' })
-      ).toHaveFocus()
-    )
-    fireEvent.keyDown(document, { key: 'ArrowDown' })
-    expect(screen.getByRole('menuitem', { name: '使用帮助' })).toHaveFocus()
-    fireEvent.keyDown(document, { key: 'Escape' })
-    expect(appMenuTrigger).toHaveFocus()
+      within(topbar).getByRole('button', {
+        name: '切换浅色主题'
+      })
+    ).toBe(themeToggle)
     expect(screen.queryByRole('menu')).not.toBeInTheDocument()
 
     const conversationMenuTrigger = within(
@@ -1831,7 +1863,9 @@ describe('App', () => {
     expect(
       screen.getByRole('heading', { level: 1, name: '任务与活动' })
     ).toBeInTheDocument()
-    expect(screen.queryByLabelText('专家角色')).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /^专家角色：/u })
+    ).not.toBeInTheDocument()
     expect(
       screen.queryByLabelText('切换助手工作栏')
     ).not.toBeInTheDocument()
@@ -1884,11 +1918,14 @@ describe('App', () => {
   it('offers only Ask and Execute in visible work mode controls', async () => {
     render(<App />)
 
-    const mode = await screen.findByLabelText('工作模式')
+    await screen.findByRole('button', {
+      name: '工作模式：Ask · 只读问答'
+    })
+    const modeMenu = openComposerMenu('工作模式')
     expect(
-      within(mode)
-        .getAllByRole('option')
-        .map((option) => option.textContent)
+      within(modeMenu)
+        .getAllByRole('menuitemradio')
+        .map((option) => option.querySelector('span')?.textContent)
     ).toEqual(['Ask · 只读问答', 'Execute · 受控执行'])
 
     fireEvent.click(screen.getByLabelText('新建项目'))
@@ -1904,6 +1941,46 @@ describe('App', () => {
     expect(screen.queryByRole('option', { name: /Plan/u })).toBeNull()
   })
 
+  it('matches expert and work mode keyboard menus to the model picker', async () => {
+    render(<App />)
+
+    const expertTrigger = await screen.findByRole('button', {
+      name: '专家角色：通用助手'
+    })
+    expect(expertTrigger).toHaveClass('model-button')
+    fireEvent.keyDown(expertTrigger, { key: 'ArrowDown' })
+
+    const expertMenu = screen.getByRole('menu', {
+      name: '专家角色'
+    })
+    expect(expertMenu).toHaveClass('runtime-picker__menu')
+    const generalExpert = within(expertMenu).getByRole(
+      'menuitemradio',
+      { name: /^通用助手/u }
+    )
+    const expertTeam = within(expertMenu).getByRole(
+      'menuitemradio',
+      { name: /^专家团队（并行）/u }
+    )
+    await waitFor(() => expect(generalExpert).toHaveFocus())
+    fireEvent.keyDown(generalExpert, { key: 'ArrowDown' })
+    expect(expertTeam).toHaveFocus()
+    fireEvent.keyDown(expertTeam, { key: 'Escape' })
+    expect(expertTrigger).toHaveFocus()
+    expect(
+      screen.queryByRole('menu', { name: '专家角色' })
+    ).not.toBeInTheDocument()
+
+    const modeTrigger = composerMenuTrigger('工作模式')
+    fireEvent.click(modeTrigger)
+    const modeMenu = screen.getByRole('menu', { name: '工作模式' })
+    expect(modeMenu).toHaveClass('runtime-picker__menu')
+    fireEvent.pointerDown(screen.getByLabelText('向 GoodBuddy 提问'))
+    expect(
+      screen.queryByRole('menu', { name: '工作模式' })
+    ).not.toBeInTheDocument()
+  })
+
   it('groups composer tools and exposes clear control descriptions', async () => {
     render(<App />)
 
@@ -1930,11 +2007,19 @@ describe('App', () => {
       { name: '对话设置' }
     )
     expect(
-      within(conversationSettings).getByLabelText('专家角色')
+      within(conversationSettings).getByRole('button', {
+        name: '专家角色：通用助手'
+      })
     ).toBeInTheDocument()
     expect(
-      within(conversationSettings).getByLabelText('工作模式')
+      within(conversationSettings).getByRole('button', {
+        name: '工作模式：Ask · 只读问答'
+      })
     ).toBeInTheDocument()
+    expect(screen.getByLabelText('向 GoodBuddy 提问')).toHaveAttribute(
+      'placeholder',
+      '给 GoodBuddy 发消息…\nEnter 发送 · Shift+Enter 换行 · 附件仅在选择后发送'
+    )
     expect(
       within(conversationSettings).getByRole('button', {
         name: /默认模型/u
@@ -1954,8 +2039,10 @@ describe('App', () => {
     ])
     render(<App />)
 
-    const mode = await screen.findByLabelText('工作模式')
-    expect(mode).toHaveValue('ask')
+    const mode = await screen.findByRole('button', {
+      name: '工作模式：Ask · 只读问答'
+    })
+    expect(mode).toBeEnabled()
     fireEvent.change(screen.getByLabelText('向 GoodBuddy 提问'), {
       target: { value: '制定发布方案' }
     })
@@ -1993,7 +2080,11 @@ describe('App', () => {
     expect(await screen.findByLabelText('当前项目')).toHaveValue(
       secondProject.id
     )
-    expect(screen.getByLabelText('工作模式')).toHaveValue('execute')
+    expect(
+      screen.getByRole('button', {
+        name: '工作模式：Execute · 受控执行'
+      })
+    ).toBeEnabled()
 
     fireEvent.change(screen.getByLabelText('当前项目'), {
       target: { value: project.id }
@@ -2151,8 +2242,9 @@ describe('App', () => {
     })
     render(<App />)
 
-    const mode = await screen.findByLabelText('工作模式')
-    expect(mode).toHaveValue('ask')
+    const mode = await screen.findByRole('button', {
+      name: '工作模式：Ask · 只读问答'
+    })
     expect(mode).toBeEnabled()
     expect(mode.closest('.composer')).not.toBeNull()
     expect(
@@ -2160,7 +2252,10 @@ describe('App', () => {
         new RegExp(`${label} Ask 模式.*只允许搜索当前启用的知识库`)
       )
     ).toBeInTheDocument()
-    fireEvent.change(mode, { target: { value: 'execute' } })
+    selectComposerOption('工作模式', 'Execute · 受控执行')
+    expect(mode).toHaveAccessibleName(
+      '工作模式：Execute · 受控执行'
+    )
 
     fireEvent.change(screen.getByLabelText('向 GoodBuddy 提问'), {
       target: { value: '执行任务' }
@@ -2203,11 +2298,14 @@ describe('App', () => {
       })
     render(<App />)
 
-    const mode = await screen.findByLabelText('工作模式')
-    expect(mode).toHaveValue('ask')
+    const mode = await screen.findByRole('button', {
+      name: '工作模式：Ask · 只读问答'
+    })
     expect(mode).toBeEnabled()
-    fireEvent.change(mode, { target: { value: 'execute' } })
-    expect(mode).toHaveValue('execute')
+    selectComposerOption('工作模式', 'Execute · 受控执行')
+    expect(mode).toHaveAccessibleName(
+      '工作模式：Execute · 受控执行'
+    )
 
     fireEvent.click(await screen.findByRole('button', { name: /OpenCode/u }))
     fireEvent.click(
@@ -2217,7 +2315,7 @@ describe('App', () => {
     )
 
     await waitFor(() => {
-      expect(mode).toHaveValue('ask')
+      expect(mode).toHaveAccessibleName('工作模式：Ask · 只读问答')
       expect(mode).toBeEnabled()
     })
   })
@@ -2232,13 +2330,16 @@ describe('App', () => {
     })
     render(<App />)
 
-    const mode = await screen.findByLabelText('工作模式')
+    const mode = await screen.findByRole('button', {
+      name: '工作模式：Ask · 只读问答'
+    })
+    const modeMenu = openComposerMenu('工作模式')
     expect(
-      within(mode).getByRole('option', {
-        name: 'Execute · 受控执行'
+      within(modeMenu).getByRole('menuitemradio', {
+        name: /^Execute · 受控执行/u
       })
     ).toBeDisabled()
-    expect(mode).toHaveValue('ask')
+    expect(mode).toHaveAccessibleName('工作模式：Ask · 只读问答')
   })
 
   it('allows a direct model to submit Execute with GoodBuddy approvals', async () => {
@@ -2251,8 +2352,10 @@ describe('App', () => {
     })
     render(<App />)
 
-    const mode = await screen.findByLabelText('工作模式')
-    fireEvent.change(mode, { target: { value: 'execute' } })
+    const mode = await screen.findByRole('button', {
+      name: '工作模式：Ask · 只读问答'
+    })
+    selectComposerOption('工作模式', 'Execute · 受控执行')
     fireEvent.change(screen.getByLabelText('向 GoodBuddy 提问'), {
       target: { value: '读取项目文件' }
     })
@@ -3116,7 +3219,7 @@ describe('App', () => {
     expect((await screen.findAllByText('生图')).length).toBeGreaterThan(0)
     expect(screen.getByLabelText('向 GoodBuddy 提问')).toHaveAttribute(
       'placeholder',
-      '描述你想生成的图片…'
+      '描述你想生成的图片…\nEnter 发送 · Shift+Enter 换行 · 附件仅在选择后发送'
     )
     await waitFor(() =>
       expect(api.artifacts.list).toHaveBeenCalled()
@@ -3195,9 +3298,7 @@ describe('App', () => {
   it('can dispatch a request to the parallel expert team', async () => {
     render(<App />)
 
-    fireEvent.change(screen.getByLabelText('专家角色'), {
-      target: { value: 'team' }
-    })
+    selectComposerOption('专家角色', '专家团队（并行）')
     fireEvent.change(screen.getByLabelText('向 GoodBuddy 提问'), {
       target: { value: '制定发布计划' }
     })
@@ -3260,10 +3361,14 @@ describe('App', () => {
     ])
     render(<App />)
 
-    await screen.findByRole('option', { name: '发布专家' })
-    fireEvent.change(screen.getByLabelText('专家角色'), {
-      target: { value: expertId }
-    })
+    await waitFor(() => expect(api.experts.list).toHaveBeenCalled())
+    const expertMenu = openComposerMenu('专家角色')
+    fireEvent.click(
+      (await within(expertMenu).findByText('发布专家', {
+        selector: 'span'
+      }))
+        .closest<HTMLButtonElement>('button')!
+    )
     fireEvent.change(screen.getByLabelText('向 GoodBuddy 提问'), {
       target: { value: '检查发布方案' }
     })
@@ -4021,7 +4126,7 @@ describe('App', () => {
       screen.queryByLabelText('切换助手工作栏')
     ).not.toBeInTheDocument()
     expect(
-      screen.queryByLabelText('专家角色')
+      screen.queryByRole('button', { name: /^专家角色：/u })
     ).not.toBeInTheDocument()
   })
 
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 37c17c2..54f0545 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -19,6 +19,7 @@ import {
   Mic,
   Minimize2,
   Minus,
+  Moon,
   MoreHorizontal,
   Paperclip,
   PanelLeft,
@@ -31,6 +32,7 @@ import {
   PanelsTopLeft,
   Sparkles,
   Square,
+  Sun,
   TerminalSquare,
   Trash2,
   UserRound,
@@ -42,7 +44,8 @@ import {
   useMemo,
   useReducer,
   useRef,
-  useState
+  useState,
+  type ReactNode
 } from 'react'
 import type {
   ApprovalDecision,
@@ -1032,6 +1035,186 @@ function WindowControls({
   )
 }
 
+type ComposerMenuOption<T extends string> = {
+  value: T
+  label: string
+  description: string
+  disabled?: boolean
+}
+
+function ComposerMenuSelect<T extends string>({
+  ariaLabel,
+  className,
+  describedBy,
+  disabled = false,
+  icon,
+  menuOpen,
+  onChange,
+  onOpenChange,
+  options,
+  value
+}: {
+  ariaLabel: string
+  className: string
+  describedBy?: string
+  disabled?: boolean
+  icon: ReactNode
+  menuOpen: boolean
+  onChange: (value: T) => void
+  onOpenChange: (open: boolean) => void
+  options: readonly ComposerMenuOption<T>[]
+  value: T
+}): React.JSX.Element {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const selectedOption =
+    options.find((option) => option.value === value) ?? options[0]
+
+  useEffect(() => {
+    if (!menuOpen) {
+      return
+    }
+    const menu = menuRef.current
+    if (!menu) {
+      return
+    }
+    const menuItems = Array.from(
+      menu.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')
+    ).filter((item) => !item.disabled)
+    const initialItem =
+      menuItems.find(
+        (item) => item.getAttribute('aria-checked') === 'true'
+      ) ?? menuItems[0]
+    menuItems.forEach((item) => {
+      item.tabIndex = item === initialItem ? 0 : -1
+    })
+    const focusFrame = requestAnimationFrame(() => {
+      initialItem?.focus()
+    })
+    const isMenuTarget = (target: EventTarget | null): boolean =>
+      target instanceof Node &&
+      (menu.contains(target) ||
+        buttonRef.current?.contains(target) === true)
+    const dismissOnOutsidePointer = (event: PointerEvent): void => {
+      if (!isMenuTarget(event.target)) {
+        onOpenChange(false)
+      }
+    }
+    const dismissOnOutsideFocus = (event: FocusEvent): void => {
+      if (!isMenuTarget(event.target)) {
+        onOpenChange(false)
+      }
+    }
+    document.addEventListener('pointerdown', dismissOnOutsidePointer)
+    document.addEventListener('focusin', dismissOnOutsideFocus)
+    return () => {
+      cancelAnimationFrame(focusFrame)
+      document.removeEventListener(
+        'pointerdown',
+        dismissOnOutsidePointer
+      )
+      document.removeEventListener('focusin', dismissOnOutsideFocus)
+    }
+  }, [menuOpen, onOpenChange, value])
+
+  return (
+    <div className={`runtime-picker composer-picker ${className}`}>
+      <button
+        aria-describedby={describedBy}
+        aria-expanded={menuOpen}
+        aria-haspopup="menu"
+        aria-label={`${ariaLabel}：${selectedOption?.label ?? ''}`}
+        className="model-button composer-picker__button"
+        disabled={disabled}
+        onClick={() => onOpenChange(!menuOpen)}
+        onKeyDown={(event) => {
+          if (
+            !menuOpen &&
+            (event.key === 'ArrowDown' ||
+              event.key === 'Enter' ||
+              event.key === ' ')
+          ) {
+            event.preventDefault()
+            onOpenChange(true)
+          }
+        }}
+        ref={buttonRef}
+        title={`${ariaLabel}：${selectedOption?.label ?? ''}`}
+        type="button"
+      >
+        {icon}
+        <span className="model-button__label">
+          {selectedOption?.label}
+        </span>
+        <ChevronDown aria-hidden="true" size={14} />
+      </button>
+      {menuOpen && (
+        <div
+          aria-label={ariaLabel}
+          className="runtime-picker__menu composer-picker__menu"
+          onKeyDown={(event) => {
+            const items = Array.from(
+              event.currentTarget.querySelectorAll<HTMLButtonElement>(
+                '[role="menuitemradio"]'
+              )
+            ).filter((item) => !item.disabled)
+            const currentIndex = items.indexOf(
+              document.activeElement as HTMLButtonElement
+            )
+            let nextIndex: number | undefined
+            if (event.key === 'ArrowDown') {
+              nextIndex = (currentIndex + 1) % items.length
+            } else if (event.key === 'ArrowUp') {
+              nextIndex =
+                (currentIndex - 1 + items.length) % items.length
+            } else if (event.key === 'Home') {
+              nextIndex = 0
+            } else if (event.key === 'End') {
+              nextIndex = items.length - 1
+            } else if (event.key === 'Escape') {
+              event.preventDefault()
+              onOpenChange(false)
+              buttonRef.current?.focus()
+            }
+            const nextItem =
+              nextIndex === undefined ? undefined : items.at(nextIndex)
+            if (nextItem) {
+              event.preventDefault()
+              items.forEach((item) => {
+                item.tabIndex = item === nextItem ? 0 : -1
+              })
+              nextItem.focus()
+            }
+          }}
+          ref={menuRef}
+          role="menu"
+        >
+          {options.map((option) => (
+            <button
+              aria-checked={option.value === value}
+              disabled={option.disabled}
+              key={option.value}
+              onClick={() => {
+                onChange(option.value)
+                onOpenChange(false)
+                requestAnimationFrame(() => {
+                  buttonRef.current?.focus()
+                })
+              }}
+              role="menuitemradio"
+              tabIndex={option.value === value ? 0 : -1}
+              type="button"
+            >
+              <span>{option.label}</span>
+              <small>{option.description}</small>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function App(): React.JSX.Element {
   const [conversations, setConversations] = useState(loadConversations)
   const [activeId, setActiveId] = useState(() => conversations[0]?.id ?? '')
@@ -1105,9 +1288,11 @@ function App(): React.JSX.Element {
   const [runtimeStatusKey, setRuntimeStatusKey] = useState('')
   const [runtimeSettings, setRuntimeSettings] = useState<RuntimeSettings>()
   const [runtimeMenuOpen, setRuntimeMenuOpen] = useState(false)
+  const [composerMenuOpen, setComposerMenuOpen] = useState<
+    'expert' | 'mode' | undefined
+  >()
   const runtimeMenuButtonRef = useRef<HTMLButtonElement>(null)
   const runtimeMenuRef = useRef<HTMLDivElement>(null)
-  const [topbarMenuOpen, setTopbarMenuOpen] = useState(false)
   const [runtimeSwitching, setRuntimeSwitching] = useState(false)
   const [appearanceTheme, setAppearanceTheme] =
     useState<AppearanceTheme>(loadAppearanceTheme)
@@ -1120,12 +1305,67 @@ function App(): React.JSX.Element {
     appearanceTheme,
     systemPrefersDark
   )
+  const toggleAppearanceTheme = useCallback((): void => {
+    setAppearanceTheme(
+      resolvedAppearanceTheme === 'dark' ? 'light' : 'dark'
+    )
+  }, [resolvedAppearanceTheme])
   const agentRuntimeSelected = isAgentRuntime(runtime)
   const effectiveWorkMode =
     workMode === 'execute' &&
     runtime?.supportsToolExecution === false
       ? 'ask'
       : workMode
+  const setExpertMenuOpen = useCallback((open: boolean): void => {
+    setComposerMenuOpen(open ? 'expert' : undefined)
+    if (open) {
+      setRuntimeMenuOpen(false)
+    }
+  }, [])
+  const setModeMenuOpen = useCallback((open: boolean): void => {
+    setComposerMenuOpen(open ? 'mode' : undefined)
+    if (open) {
+      setRuntimeMenuOpen(false)
+    }
+  }, [])
+  const assistantExpertOptions = useMemo<
+    ComposerMenuOption<string>[]
+  >(
+    () => [
+      {
+        value: '',
+        label: '通用助手',
+        description: '默认单助手'
+      },
+      {
+        value: 'team',
+        label: '专家团队（并行）',
+        description: '多个专家并行协作'
+      },
+      ...assistantExperts.map((expert) => ({
+        value: expert.id,
+        label: expert.name,
+        description: expert.description || '自定义专家角色'
+      }))
+    ],
+    [assistantExperts]
+  )
+  const workModeOptions = useMemo<
+    ComposerMenuOption<InteractiveWorkMode>[]
+  >(
+    () =>
+      interactiveWorkModes.map((value) => ({
+        value,
+        label: workModeLabels[value],
+        description:
+          value === 'execute'
+            ? '通过审批后执行工具操作'
+            : '只读问答，不修改文件',
+        disabled:
+          value === 'execute' && !runtime?.supportsToolExecution
+      })),
+    [runtime?.supportsToolExecution]
+  )
   const [appInfo, setAppInfo] = useState<AppInfo>()
   const [narrowWindow, setNarrowWindow] = useState(
     () => window.innerWidth < 900
@@ -1193,10 +1433,12 @@ function App(): React.JSX.Element {
     documents: [],
     graphNodes: [],
     graphRelations: [],
-    evidence: []
+    evidence: [],
+    tasks: []
   })
   const [knowledgeLoading, setKnowledgeLoading] = useState(true)
   const [knowledgeLoadError, setKnowledgeLoadError] = useState<string>()
+  const [knowledgeOperationCount, setKnowledgeOperationCount] = useState(0)
   const knowledgeLoadRequestRef = useRef(0)
   const failedKnowledgeLibraryIdRef = useRef<string | undefined>(
     undefined
@@ -1216,8 +1458,6 @@ function App(): React.JSX.Element {
   const scrollRef = useRef<HTMLDivElement>(null)
   const sidebarRef = useRef<HTMLElement>(null)
   const sidebarToggleRef = useRef<HTMLButtonElement>(null)
-  const topbarMenuRef = useRef<HTMLDivElement>(null)
-  const topbarMenuTriggerRef = useRef<HTMLButtonElement>(null)
   const conversationActionTriggerRefs = useRef(
     new Map<string, HTMLButtonElement>()
   )
@@ -1279,66 +1519,6 @@ function App(): React.JSX.Element {
     resizeComposerTextarea(inputRef.current)
   }, [input])
 
-  useEffect(() => {
-    if (!topbarMenuOpen) {
-      return
-    }
-    const focusFrame = requestAnimationFrame(() => {
-      topbarMenuRef.current
-        ?.querySelector<HTMLButtonElement>('[role="menuitem"]')
-        ?.focus()
-    })
-    const closeOnOutsidePointer = (event: PointerEvent): void => {
-      if (
-        event.target instanceof Node &&
-        !topbarMenuRef.current?.contains(event.target)
-      ) {
-        setTopbarMenuOpen(false)
-      }
-    }
-    const handleMenuKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        setTopbarMenuOpen(false)
-        topbarMenuTriggerRef.current?.focus()
-        return
-      }
-      const menuItems = Array.from(
-        topbarMenuRef.current?.querySelectorAll<HTMLButtonElement>(
-          '[role="menuitem"]'
-        ) ?? []
-      )
-      if (menuItems.length === 0) {
-        return
-      }
-      const currentIndex = menuItems.indexOf(
-        document.activeElement as HTMLButtonElement
-      )
-      const targetIndex =
-        event.key === 'Home'
-          ? 0
-          : event.key === 'End'
-            ? menuItems.length - 1
-            : event.key === 'ArrowDown'
-              ? (currentIndex + 1) % menuItems.length
-              : event.key === 'ArrowUp'
-                ? (currentIndex - 1 + menuItems.length) %
-                  menuItems.length
-                : -1
-      if (targetIndex >= 0) {
-        event.preventDefault()
-        menuItems[targetIndex]?.focus()
-      }
-    }
-    document.addEventListener('pointerdown', closeOnOutsidePointer)
-    document.addEventListener('keydown', handleMenuKeyDown)
-    return () => {
-      cancelAnimationFrame(focusFrame)
-      document.removeEventListener('pointerdown', closeOnOutsidePointer)
-      document.removeEventListener('keydown', handleMenuKeyDown)
-    }
-  }, [topbarMenuOpen])
-
   useEffect(() => {
     saveAppearanceTheme(appearanceTheme)
   }, [appearanceTheme])
@@ -2999,6 +3179,25 @@ function App(): React.JSX.Element {
     return () => clearTimeout(timeout)
   }, [refreshKnowledge])
 
+  useEffect(() => {
+    if (view !== 'knowledge' && knowledgeOperationCount === 0) {
+      return
+    }
+    const interval = setInterval(() => {
+      void refreshKnowledge(
+        knowledgeSnapshot.selectedLibraryId
+      ).catch(() => {
+        // The task center keeps the last successful snapshot while polling.
+      })
+    }, knowledgeOperationCount > 0 ? 350 : 1_000)
+    return () => clearInterval(interval)
+  }, [
+    knowledgeOperationCount,
+    knowledgeSnapshot.selectedLibraryId,
+    refreshKnowledge,
+    view
+  ])
+
   useEffect(() => {
     void Promise.all([
       window.goodbuddy.settings.getRuntime(),
@@ -4078,11 +4277,20 @@ function App(): React.JSX.Element {
     await refreshKnowledge()
   }
 
-  const runKnowledgeSourceAction = async (
-    action: () => Promise<void>
-  ): Promise<void> => {
-    await action()
-    await refreshSelectedKnowledge()
+  const runKnowledgeSourceAction = async <T,>(
+    action: () => Promise<T>
+  ): Promise<T> => {
+    setKnowledgeOperationCount((count) => count + 1)
+    try {
+      const result = await action()
+      await refreshSelectedKnowledge()
+      return result
+    } catch (error) {
+      await refreshSelectedKnowledge().catch(() => undefined)
+      throw error
+    } finally {
+      setKnowledgeOperationCount((count) => Math.max(0, count - 1))
+    }
   }
 
   const openActivityConversation = (conversationId: string): void => {
@@ -4627,55 +4835,28 @@ function App(): React.JSX.Element {
                 <PanelRightOpen size={18} />
               </button>
             )}
-            <div className="topbar-menu" ref={topbarMenuRef}>
-              <button
-                aria-expanded={topbarMenuOpen}
-                aria-haspopup="menu"
-                aria-label="应用菜单"
-                className="icon-button"
-                onClick={() =>
-                  setTopbarMenuOpen((current) => !current)
-                }
-                ref={topbarMenuTriggerRef}
-                type="button"
-              >
-                <MoreHorizontal size={18} />
-              </button>
-              {topbarMenuOpen && (
-                <div
-                  aria-label="应用操作"
-                  className="topbar-menu__popover"
-                  role="menu"
-                >
-                  <button
-                    onClick={() => {
-                      setTopbarMenuOpen(false)
-                      setView('settings')
-                    }}
-                    role="menuitem"
-                    type="button"
-                  >
-                    <ShieldCheck size={16} />
-                    安全与 Runtime 设置
-                  </button>
-                  <button
-                    onClick={() => {
-                      setTopbarMenuOpen(false)
-                      notify({
-                        tone: 'info',
-                        message:
-                          '输入问题后按 Enter 发送，Shift+Enter 换行。附件只会在你明确选择后发送。'
-                      })
-                    }}
-                    role="menuitem"
-                    type="button"
-                  >
-                    <CircleHelp size={16} />
-                    使用帮助
-                  </button>
-                </div>
+            <button
+              aria-label={
+                resolvedAppearanceTheme === 'dark'
+                  ? '切换浅色主题'
+                  : '切换深色主题'
+              }
+              aria-pressed={resolvedAppearanceTheme === 'dark'}
+              className="icon-button theme-toggle-button"
+              onClick={toggleAppearanceTheme}
+              title={
+                resolvedAppearanceTheme === 'dark'
+                  ? '切换浅色主题'
+                  : '切换深色主题'
+              }
+              type="button"
+            >
+              {resolvedAppearanceTheme === 'dark' ? (
+                <Sun aria-hidden="true" size={18} />
+              ) : (
+                <Moon aria-hidden="true" size={18} />
               )}
-            </div>
+            </button>
           </div>
           <WindowControls
             onError={handleWindowControlError}
@@ -5260,11 +5441,11 @@ function App(): React.JSX.Element {
             <div className="composer__input">
               <textarea
                 aria-label="向 GoodBuddy 提问"
-                placeholder={
+                placeholder={`${
                   runtime?.capability === 'image-generation'
                     ? '描述你想生成的图片…'
                     : '给 GoodBuddy 发消息…'
-                }
+                }\nEnter 发送 · Shift+Enter 换行 · 附件仅在选择后发送`}
                 ref={inputRef}
                 rows={3}
                 value={input}
@@ -5418,68 +5599,46 @@ function App(): React.JSX.Element {
                   className="composer__configuration"
                   role="group"
                 >
-                  <label
-                    className="composer__expert"
-                    title="选择参与本次对话的专家角色"
-                  >
-                    <Bot aria-hidden="true" size={15} />
-                    <select
-                      aria-label="专家角色"
-                      disabled={runtime?.capability === 'image-generation'}
-                      onChange={(event) =>
-                        setSelectedExpertId(event.target.value)
-                      }
-                      value={selectedExpertId}
-                    >
-                      <option value="">通用助手</option>
-                      <option value="team">专家团队（并行）</option>
-                      {assistantExperts.map((expert) => (
-                        <option key={expert.id} value={expert.id}>
-                          {expert.name}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
-                  <label
-                    className={`composer__mode composer__mode--${effectiveWorkMode}`}
-                    title={`工作模式：${workModeLabels[effectiveWorkMode]}`}
-                  >
-                    {effectiveWorkMode === 'execute' ? (
-                      <ShieldCheck aria-hidden="true" size={15} />
-                    ) : (
-                      <CircleHelp aria-hidden="true" size={15} />
-                    )}
-                    <select
-                      aria-describedby="work-mode-hint"
-                      aria-label="工作模式"
-                      onChange={(event) =>
-                        setWorkMode(
-                          event.target.value as InteractiveWorkMode
-                        )
-                      }
-                      value={effectiveWorkMode}
-                    >
-                      {interactiveWorkModes.map((value) => (
-                        <option
-                          disabled={
-                            value === 'execute' &&
-                            !runtime?.supportsToolExecution
-                          }
-                          key={value}
-                          value={value}
-                        >
-                          {workModeLabels[value]}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
+                  <ComposerMenuSelect
+                    ariaLabel="专家角色"
+                    className="composer-picker--expert"
+                    disabled={
+                      runtime?.capability === 'image-generation'
+                    }
+                    icon={<Bot aria-hidden="true" size={15} />}
+                    menuOpen={composerMenuOpen === 'expert'}
+                    onChange={setSelectedExpertId}
+                    onOpenChange={setExpertMenuOpen}
+                    options={assistantExpertOptions}
+                    value={selectedExpertId}
+                  />
+                  <ComposerMenuSelect
+                    ariaLabel="工作模式"
+                    className={`composer-picker--mode composer-picker--${effectiveWorkMode}`}
+                    describedBy="work-mode-hint"
+                    icon={
+                      effectiveWorkMode === 'execute' ? (
+                        <ShieldCheck aria-hidden="true" size={15} />
+                      ) : (
+                        <CircleHelp aria-hidden="true" size={15} />
+                      )
+                    }
+                    menuOpen={composerMenuOpen === 'mode'}
+                    onChange={setWorkMode}
+                    onOpenChange={setModeMenuOpen}
+                    options={workModeOptions}
+                    value={effectiveWorkMode}
+                  />
                   <div className="runtime-picker">
                     <button
                       aria-expanded={runtimeMenuOpen}
                       aria-haspopup="menu"
                       className="model-button"
                       disabled={isRunning || runtimeSwitching}
-                      onClick={() => setRuntimeMenuOpen(!runtimeMenuOpen)}
+                      onClick={() => {
+                        setComposerMenuOpen(undefined)
+                        setRuntimeMenuOpen(!runtimeMenuOpen)
+                      }}
                       onKeyDown={(event) => {
                         if (
                           !runtimeMenuOpen &&
@@ -5488,6 +5647,7 @@ function App(): React.JSX.Element {
                             event.key === ' ')
                         ) {
                           event.preventDefault()
+                          setComposerMenuOpen(undefined)
                           setRuntimeMenuOpen(true)
                         }
                       }}
@@ -5782,14 +5942,29 @@ function App(): React.JSX.Element {
                 )
               }
               onDeleteLibrary={deleteKnowledgeLibrary}
-              onUpdateLibrary={(libraryId, update) =>
-                runKnowledgeSourceAction(async () => {
+              onReextractGraph={async (libraryId) => {
+                await runKnowledgeSourceAction(() =>
+                  window.goodbuddy.knowledge.reextractGraph(libraryId)
+                )
+                notify({
+                  tone: 'success',
+                  message: '知识图谱已重新抽取',
+                  dedupeKey: `knowledge-graph:${libraryId}`
+                })
+              }}
+              onUpdateLibrary={async (libraryId, update) => {
+                await runKnowledgeSourceAction(async () => {
                   await window.goodbuddy.knowledge.updateLibrary(
                     libraryId,
                     update
                   )
                 })
-              }
+                notify({
+                  tone: 'success',
+                  message: '知识库设置已更新',
+                  dedupeKey: `knowledge-library:${libraryId}`
+                })
+              }}
               onDeleteRelation={(relationId) =>
                 runKnowledgeSourceAction(() =>
                   window.goodbuddy.knowledge.deleteRelation(relationId)
@@ -5892,6 +6067,7 @@ function App(): React.JSX.Element {
               }
               selectedLibraryId={knowledgeSnapshot.selectedLibraryId}
               sources={knowledgeSnapshot.sources}
+              tasks={knowledgeSnapshot.tasks}
             />
           </PageShell>
         ) : view === 'heartbeat' ? (
diff --git a/src/renderer/src/KnowledgeGraphChart.tsx b/src/renderer/src/KnowledgeGraphChart.tsx
index f84a244..66d3845 100644
--- a/src/renderer/src/KnowledgeGraphChart.tsx
+++ b/src/renderer/src/KnowledgeGraphChart.tsx
@@ -8,7 +8,7 @@ import {
   type EChartsCoreOption
 } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import type {
   KnowledgeGraphNode,
   KnowledgeGraphRelation
@@ -59,6 +59,42 @@ function readToken(name: string): string {
     .trim()
 }
 
+function graphTypeStyles(nodes: readonly ChartKnowledgeGraphNode[]): Map<
+  string,
+  { color: string; borderColor: string }
+> {
+  const palette = Array.from({ length: 8 }, (_, index) => ({
+    color: readToken(`--graph-node-${index + 1}`),
+    borderColor: readToken(`--graph-node-${index + 1}-border`)
+  }))
+  return new Map(
+    [...new Set(nodes.map((node) => node.type))]
+      .sort((left, right) => left.localeCompare(right, 'zh-CN'))
+      .map((type, index) => [type, palette[index % palette.length]!])
+  )
+}
+
+function graphRevision(
+  nodes: readonly ChartKnowledgeGraphNode[],
+  relations: readonly ChartKnowledgeGraphRelation[]
+): string {
+  return JSON.stringify({
+    nodes: nodes.map((node) => [
+      node.id,
+      node.label,
+      node.type,
+      node.x,
+      node.y
+    ]),
+    relations: relations.map((relation) => [
+      relation.id,
+      relation.sourceId,
+      relation.targetId,
+      relation.type
+    ])
+  })
+}
+
 function createOption({
   nodes,
   relations,
@@ -72,17 +108,50 @@ function createOption({
   const textSecondary = readToken('--text-secondary')
   const textMuted = readToken('--text-muted')
   const accent = readToken('--accent')
-  const accentSelected = readToken('--accent-selected')
   const accentSubtle = readToken('--accent-subtle')
   const surfaceRaised = readToken('--surface-raised')
   const borderDefault = readToken('--border-default')
+  const typeStyles = graphTypeStyles(nodes)
   const dense = nodes.length > 24
-  const veryDense = nodes.length > 60
+  const degreeByNodeId = new Map(nodes.map((node) => [node.id, 0]))
+  for (const relation of relations) {
+    degreeByNodeId.set(
+      relation.sourceId,
+      (degreeByNodeId.get(relation.sourceId) ?? 0) + 1
+    )
+    degreeByNodeId.set(
+      relation.targetId,
+      (degreeByNodeId.get(relation.targetId) ?? 0) + 1
+    )
+  }
+  const maximumDegree = Math.max(1, ...degreeByNodeId.values())
+  const keyNodeCount = Math.min(
+    nodes.length,
+    Math.max(8, Math.min(16, Math.round(Math.sqrt(nodes.length) * 1.4)))
+  )
+  const keyNodeIds = new Set(
+    [...nodes]
+      .sort((left, right) => {
+        const degreeDifference =
+          (degreeByNodeId.get(right.id) ?? 0) -
+          (degreeByNodeId.get(left.id) ?? 0)
+        return (
+          degreeDifference ||
+          left.label.localeCompare(right.label, 'zh-CN')
+        )
+      })
+      .slice(0, keyNodeCount)
+      .map((node) => node.id)
+  )
+  const reducedMotion =
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
   const showEdgeLabels =
     nodes.length <= 18 && relations.length <= 24
 
   return {
-    animation: !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches,
+    animation: !reducedMotion,
+    animationDuration: 220,
+    animationDurationUpdate: 160,
     tooltip: {
       trigger: 'item',
       renderMode: 'richText',
@@ -113,49 +182,54 @@ function createOption({
         },
         force: {
           repulsion: dense
-            ? Math.min(520, 130 + nodes.length * 3)
-            : 220,
-          gravity: dense ? 0.14 : 0.08,
-          edgeLength: dense
-            ? veryDense
-              ? [45, 80]
-              : [60, 110]
-            : [110, 190],
-          friction: dense ? 0.5 : 0.6,
-          layoutAnimation:
-            !window.matchMedia?.('(prefers-reduced-motion: reduce)')
-              .matches
+            ? Math.min(480, 220 + nodes.length * 2)
+            : 200,
+          gravity: 0.06,
+          edgeLength: dense ? [70, 130] : [90, 150],
+          friction: 0.08,
+          layoutAnimation: !reducedMotion
         },
         selectedMode: 'single',
         symbol: 'circle',
+        categories: [...typeStyles.entries()].map(([name, style]) => ({
+          name,
+          itemStyle: style
+        })),
         data: nodes.map((node) => {
           const selected = node.id === selectedNodeId
+          const typeStyle = typeStyles.get(node.type) ?? {
+            color: accentSubtle,
+            borderColor: accent
+          }
+          const degree = degreeByNodeId.get(node.id) ?? 0
+          const degreeRatio = Math.sqrt(degree / maximumDegree)
+          const symbolSize = dense
+            ? 16 + degreeRatio * 16
+            : 32 + degreeRatio * 16
+          const showLabel = !dense || keyNodeIds.has(node.id)
           return {
             id: node.id,
             name: node.label,
             type: node.type,
-            ...(dense ? {} : { x: node.x, y: node.y }),
+            value: degree,
+            category: node.type,
+            x: node.x,
+            y: node.y,
             draggable: true,
             selected,
-            symbolSize: selected
-              ? dense
-                ? 34
-                : 60
-              : dense
-                ? veryDense
-                  ? 18
-                  : 24
-                : 52,
+            symbolSize: selected ? symbolSize + 4 : symbolSize,
             itemStyle: {
-              color: selected ? accentSelected : accentSubtle,
-              borderColor: accent,
-              borderWidth: selected ? 3 : 2
+              color: typeStyle.color,
+              borderColor: selected ? accent : typeStyle.borderColor,
+              borderWidth: selected ? 2.5 : 1.5
             },
             label: {
-              show: !dense || selected,
+              show: showLabel || selected,
               color: textPrimary,
               fontSize: dense ? 11 : 12,
-              fontWeight: 700,
+              fontWeight: keyNodeIds.has(node.id) ? 650 : 500,
+              position: dense ? 'right' : 'inside',
+              distance: dense ? 5 : 0,
               formatter:
                 node.label.length > 8
                   ? `${node.label.slice(0, 8)}…`
@@ -163,15 +237,19 @@ function createOption({
             },
             emphasis: {
               focus: 'adjacency',
+              itemStyle: {
+                borderColor: accent,
+                borderWidth: 2.5
+              },
               label: {
                 show: true
               }
             },
             select: {
               itemStyle: {
-                color: accentSelected,
+                color: typeStyle.color,
                 borderColor: accent,
-                borderWidth: 3
+                borderWidth: 2.5
               },
               label: {
                 show: true
@@ -186,14 +264,14 @@ function createOption({
           value: relation.type,
           description: relation.description,
           lineStyle: {
-            color: textMuted,
-            width: 1.5,
-            curveness: 0.08
+            color: borderDefault,
+            width: 1.2,
+            opacity: 0.72,
+            curveness: 0.06
           }
         })),
         edgeSymbol: ['none', 'arrow'],
-        edgeSymbolSize: 8,
-        autoCurveness: true,
+        edgeSymbolSize: 6,
         edgeLabel: {
           show: showEdgeLabels,
           color: textSecondary,
@@ -229,12 +307,23 @@ export function KnowledgeGraphChart({
   const onMoveNodeRef = useRef(onMoveNode)
   const onSelectNodeRef = useRef(onSelectNode)
   const onZoomChangeRef = useRef(onZoomChange)
+  const nodesRef = useRef(nodes)
+  const relationsRef = useRef(relations)
   const dragRef = useRef<NodeDrag | undefined>(undefined)
   const viewportRef = useRef<GraphViewport>({})
   const zoomRef = useRef(zoom)
   const appliedZoomRef = useRef<number | undefined>(undefined)
+  const dataRevision = useMemo(
+    () => graphRevision(nodes, relations),
+    [nodes, relations]
+  )
   const [themeRevision, setThemeRevision] = useState(0)
 
+  useEffect(() => {
+    nodesRef.current = nodes
+    relationsRef.current = relations
+  }, [nodes, relations])
+
   useEffect(() => {
     onMoveNodeRef.current = onMoveNode
     onSelectNodeRef.current = onSelectNode
@@ -417,8 +506,8 @@ export function KnowledgeGraphChart({
       return
     }
     const option = createOption({
-      nodes,
-      relations,
+      nodes: nodesRef.current,
+      relations: relationsRef.current,
       selectedNodeId: undefined,
       zoom: zoomRef.current
     })
@@ -437,7 +526,7 @@ export function KnowledgeGraphChart({
       { notMerge: true }
     )
     appliedZoomRef.current = zoomRef.current
-  }, [nodes, relations, themeRevision])
+  }, [dataRevision, themeRevision])
 
   useEffect(() => {
     const chart = chartRef.current
@@ -466,7 +555,7 @@ export function KnowledgeGraphChart({
       seriesIndex: 0
     })
     const dataIndex = selectedNodeId
-      ? nodes.findIndex((node) => node.id === selectedNodeId)
+      ? nodesRef.current.findIndex((node) => node.id === selectedNodeId)
       : -1
     if (dataIndex >= 0) {
       chart.dispatchAction({
@@ -475,7 +564,7 @@ export function KnowledgeGraphChart({
         dataIndex
       })
     }
-  }, [nodes, selectedNodeId, themeRevision])
+  }, [dataRevision, selectedNodeId, themeRevision])
 
   return (
     <div
diff --git a/src/renderer/src/KnowledgeWorkspace.test.tsx b/src/renderer/src/KnowledgeWorkspace.test.tsx
index f9e5e80..c8166ec 100644
--- a/src/renderer/src/KnowledgeWorkspace.test.tsx
+++ b/src/renderer/src/KnowledgeWorkspace.test.tsx
@@ -129,6 +129,7 @@ function createProps(
     onCreateLibrary: vi.fn(),
     onDeleteLibrary: vi.fn(),
     onUpdateLibrary: vi.fn(),
+    onReextractGraph: vi.fn(),
     onImportFiles: vi.fn(),
     onImportDirectory: vi.fn(),
     onImportUrl: vi.fn(),
@@ -223,6 +224,91 @@ describe('KnowledgeWorkspace', () => {
     expect(screen.getByText('架构说明.md')).toBeInTheDocument()
   })
 
+  it('uses shared tabs and keeps graph configuration in settings', () => {
+    const onUpdateLibrary = vi.fn()
+    render(<KnowledgeWorkspace {...createProps({ onUpdateLibrary })} />)
+
+    const tabs = screen.getByRole('tablist', { name: '知识库视图' })
+    expect(within(tabs).getAllByRole('tab').map((item) => item.textContent))
+      .toEqual(['文档与来源', '知识图谱', '任务中心', '设置'])
+    expect(
+      screen.queryByRole('checkbox', { name: '知识图谱' })
+    ).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('tab', { name: '设置' }))
+    fireEvent.click(screen.getByRole('checkbox', { name: /启用知识图谱/u }))
+    expect(onUpdateLibrary).toHaveBeenCalledWith('library-1', {
+      graphEnabled: false
+    })
+  })
+
+  it('shows parsing, embedding, and graph progress in the task center', () => {
+    render(
+      <KnowledgeWorkspace
+        {...createProps({
+          tasks: [
+            {
+              id: 'task-1',
+              libraryId: 'library-1',
+              documentId: 'document-1',
+              documentName: '架构说明.md',
+              kind: 'graph',
+              status: 'running',
+              progress: 40,
+              message: '正在重新抽取知识图谱',
+              createdAt: '2026-08-10T08:00:00.000Z',
+              startedAt: '2026-08-10T08:00:01.000Z'
+            }
+          ]
+        })}
+      />
+    )
+
+    fireEvent.click(
+      screen.getByRole('tab', { name: /^任务中心/u })
+    )
+    expect(screen.getByText('图谱抽取')).toBeInTheDocument()
+    expect(screen.getByText('正在重新抽取知识图谱')).toBeInTheDocument()
+    expect(
+      screen.getByRole('progressbar', {
+        name: '架构说明.md 图谱抽取进度'
+      })
+    ).toHaveValue(40)
+  })
+
+  it('edits library metadata from the detail header', async () => {
+    const onUpdateLibrary = vi.fn()
+    render(<KnowledgeWorkspace {...createProps({ onUpdateLibrary })} />)
+
+    fireEvent.click(screen.getByRole('button', { name: '编辑' }))
+    fireEvent.change(screen.getByLabelText('名称'), {
+      target: { value: '研发知识' }
+    })
+    fireEvent.change(screen.getByLabelText('描述'), {
+      target: { value: '研发资料与设计说明' }
+    })
+    fireEvent.click(screen.getByRole('button', { name: '保存修改' }))
+
+    await waitFor(() =>
+      expect(onUpdateLibrary).toHaveBeenCalledWith('library-1', {
+        name: '研发知识',
+        description: '研发资料与设计说明'
+      })
+    )
+  })
+
+  it('reextracts the graph from the graph tab', async () => {
+    const onReextractGraph = vi.fn()
+    render(<KnowledgeWorkspace {...createProps({ onReextractGraph })} />)
+
+    fireEvent.click(screen.getByRole('tab', { name: '知识图谱' }))
+    fireEvent.click(screen.getByRole('button', { name: '重新抽取' }))
+
+    await waitFor(() =>
+      expect(onReextractGraph).toHaveBeenCalledWith('library-1')
+    )
+  })
+
   it('renders and filters graph nodes with their relationships', async () => {
     render(<KnowledgeWorkspace {...createProps()} />)
 
@@ -335,7 +421,7 @@ describe('KnowledgeWorkspace', () => {
 
   it('manages the graph chart, zoom, selection, movement, and cleanup', () => {
     const onMoveNode = vi.fn()
-    const { unmount } = render(
+    const { rerender, unmount } = render(
       <KnowledgeWorkspace {...createProps({ onMoveNode })} />
     )
 
@@ -351,15 +437,27 @@ describe('KnowledgeWorkspace', () => {
       expect.objectContaining({
         series: [
           expect.objectContaining({
+            categories: expect.arrayContaining([
+              expect.objectContaining({ name: '产品' }),
+              expect.objectContaining({ name: '技术' })
+            ]),
             layout: 'force',
             symbol: 'circle',
             type: 'graph',
             data: expect.arrayContaining([
               expect.objectContaining({
+                category: '产品',
                 id: 'entity-1',
                 name: 'GoodBuddy'
               })
             ]),
+            force: expect.objectContaining({
+              edgeLength: [90, 150],
+              friction: 0.08,
+              gravity: 0.06,
+              layoutAnimation: true,
+              repulsion: 200
+            }),
             links: [
               expect.objectContaining({
                 id: 'relation-1',
@@ -371,6 +469,12 @@ describe('KnowledgeWorkspace', () => {
       }),
       { notMerge: true }
     )
+    const stableOptionCallCount =
+      echartsMock.chart.setOption.mock.calls.length
+    rerender(<KnowledgeWorkspace {...createProps({ onMoveNode })} />)
+    expect(echartsMock.chart.setOption).toHaveBeenCalledTimes(
+      stableOptionCallCount
+    )
 
     fireEvent.click(screen.getByRole('button', { name: '放大图谱' }))
     expect(screen.getByText('115%')).toBeInTheDocument()
@@ -491,7 +595,7 @@ describe('KnowledgeWorkspace', () => {
     delete document.documentElement.dataset.theme
   })
 
-  it('reduces labels and node size for dense graphs', () => {
+  it('sizes dense nodes by degree and labels key entities', () => {
     const graphNodes = Array.from({ length: 30 }, (_, index) => ({
       id: `entity-${index}`,
       label: `实体 ${index}`,
@@ -501,7 +605,23 @@ describe('KnowledgeWorkspace', () => {
     }))
     render(
       <KnowledgeWorkspace
-        {...createProps({ graphNodes, graphRelations: [] })}
+        {...createProps({
+          graphNodes,
+          graphRelations: [
+            {
+              id: 'relation-dense-1',
+              sourceId: 'entity-0',
+              targetId: 'entity-1',
+              type: '关联'
+            },
+            {
+              id: 'relation-dense-2',
+              sourceId: 'entity-0',
+              targetId: 'entity-2',
+              type: '关联'
+            }
+          ]
+        })}
       />
     )
     fireEvent.click(screen.getByRole('tab', { name: '知识图谱' }))
@@ -513,13 +633,27 @@ describe('KnowledgeWorkspace', () => {
             data: expect.arrayContaining([
               expect.objectContaining({
                 id: 'entity-0',
-                symbolSize: 24,
+                symbolSize: 32,
+                x: 0,
+                y: 0,
+                label: expect.objectContaining({
+                  position: 'right',
+                  show: true
+                })
+              }),
+              expect.objectContaining({
+                id: 'entity-29',
+                symbolSize: 16,
                 label: expect.objectContaining({ show: false })
               })
             ]),
             edgeLabel: expect.objectContaining({ show: false }),
             force: expect.objectContaining({
-              repulsion: 220
+              edgeLength: [70, 130],
+              friction: 0.08,
+              gravity: 0.06,
+              layoutAnimation: true,
+              repulsion: 280
             })
           })
         ]
@@ -529,8 +663,8 @@ describe('KnowledgeWorkspace', () => {
     const option = echartsMock.chart.setOption.mock.calls.at(-1)?.[0] as {
       series?: Array<{ data?: Array<Record<string, unknown>> }>
     }
-    expect(option.series?.[0]?.data?.[0]).not.toHaveProperty('x')
-    expect(option.series?.[0]?.data?.[0]).not.toHaveProperty('y')
+    expect(option.series?.[0]?.data?.[0]).toHaveProperty('x', 0)
+    expect(option.series?.[0]?.data?.[0]).toHaveProperty('y', 0)
   })
 
   it('creates relationships, merges entities, and opens graph evidence', async () => {
diff --git a/src/renderer/src/KnowledgeWorkspace.tsx b/src/renderer/src/KnowledgeWorkspace.tsx
index 6bd6454..305e1ce 100644
--- a/src/renderer/src/KnowledgeWorkspace.tsx
+++ b/src/renderer/src/KnowledgeWorkspace.tsx
@@ -12,6 +12,7 @@ import {
   FolderOpen,
   GitMerge,
   Link2,
+  ListChecks,
   LoaderCircle,
   Network,
   Pencil,
@@ -19,6 +20,7 @@ import {
   RefreshCw,
   RotateCcw,
   Search,
+  Settings2,
   Trash2,
   UploadCloud,
   X,
@@ -136,6 +138,21 @@ export type KnowledgeEvidence = {
   location?: string
 }
 
+export type KnowledgeTaskItem = {
+  id: string
+  libraryId: string
+  sourceId?: string
+  documentId?: string
+  documentName: string
+  kind: 'parsing' | 'embedding' | 'graph'
+  status: 'queued' | 'running' | 'succeeded' | 'failed' | 'skipped'
+  progress: number
+  message?: string
+  createdAt: string
+  startedAt?: string
+  completedAt?: string
+}
+
 export type KnowledgeEntityUpdate = {
   label: string
   type: string
@@ -158,6 +175,7 @@ export type KnowledgeWorkspaceProps = {
   graphNodes: readonly KnowledgeGraphNode[]
   graphRelations: readonly KnowledgeGraphRelation[]
   evidence: readonly KnowledgeEvidence[]
+  tasks?: readonly KnowledgeTaskItem[]
   loading?: boolean
   loadError?: string
   onRetryLoad: () => void | Promise<void>
@@ -169,10 +187,13 @@ export type KnowledgeWorkspaceProps = {
   onUpdateLibrary: (
     libraryId: string,
     update: {
-      graphEnabled: boolean
-      graphStrategy: KnowledgeGraphStrategy
+      name?: string
+      description?: string
+      graphEnabled?: boolean
+      graphStrategy?: KnowledgeGraphStrategy
     }
   ) => void | Promise<void>
+  onReextractGraph: (libraryId: string) => void | Promise<void>
   onImportFiles: (
     libraryId: string,
     files: File[],
@@ -219,7 +240,7 @@ export type KnowledgeWorkspaceProps = {
   onOpenEvidence?: (evidence: KnowledgeEvidence) => void
 }
 
-type WorkspaceTab = 'documents' | 'graph'
+type WorkspaceTab = 'documents' | 'graph' | 'tasks' | 'settings'
 
 const storageModeLabels: Record<KnowledgeStorageMode, string> = {
   reference: '引用原文件',
@@ -590,6 +611,147 @@ function CreateLibraryWizard({
   )
 }
 
+function EditLibraryDialog({
+  library,
+  onCancel,
+  onConfirm
+}: {
+  library: KnowledgeLibrary
+  onCancel: () => void
+  onConfirm: (update: {
+    name: string
+    description: string
+  }) => void | Promise<void>
+}): React.JSX.Element {
+  const [name, setName] = useState(library.name)
+  const [description, setDescription] = useState(library.description ?? '')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string>()
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const nameRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    nameRef.current?.focus()
+  }, [])
+
+  const submit = async (
+    event: React.FormEvent<HTMLFormElement>
+  ): Promise<void> => {
+    event.preventDefault()
+    const normalizedName = name.trim()
+    if (!normalizedName) {
+      setError('请输入知识库名称')
+      return
+    }
+    setSaving(true)
+    setError(undefined)
+    try {
+      await onConfirm({
+        name: normalizedName,
+        description: description.trim()
+      })
+      onCancel()
+    } catch (reason) {
+      setError(toErrorMessage(reason))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div
+      aria-label="编辑知识库"
+      aria-modal="true"
+      onKeyDown={(event) => {
+        if (event.key === 'Escape' && !saving) {
+          event.preventDefault()
+          onCancel()
+          return
+        }
+        trapTabFocus(event, dialogRef.current)
+      }}
+      ref={dialogRef}
+      role="dialog"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 50,
+        display: 'grid',
+        placeItems: 'center',
+        padding: 20,
+        background: 'var(--overlay-backdrop)'
+      }}
+    >
+      <form
+        aria-label="编辑知识库表单"
+        onSubmit={(event) => void submit(event)}
+        style={{
+          ...styles.surface,
+          display: 'grid',
+          width: 'min(480px, 100%)',
+          padding: 20,
+          boxShadow: 'var(--shadow-dialog)',
+          gap: 14
+        }}
+      >
+        <div>
+          <h2 style={{ margin: 0 }}>编辑知识库</h2>
+          <p style={{ ...styles.muted, margin: '6px 0 0' }}>
+            修改名称和说明不会改变来源、索引或知识图谱。
+          </p>
+        </div>
+        <label style={styles.label}>
+          名称
+          <input
+            onChange={(event) => setName(event.currentTarget.value)}
+            ref={nameRef}
+            style={styles.input}
+            value={name}
+          />
+        </label>
+        <label style={styles.label}>
+          描述
+          <textarea
+            onChange={(event) => setDescription(event.currentTarget.value)}
+            rows={4}
+            style={{ ...styles.input, resize: 'vertical' }}
+            value={description}
+          />
+        </label>
+        {error && (
+          <p role="alert" style={{ color: 'var(--danger)', margin: 0 }}>
+            {error}
+          </p>
+        )}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button
+            className="secondary-button"
+            disabled={saving}
+            onClick={onCancel}
+            style={styles.button}
+            type="button"
+          >
+            取消
+          </button>
+          <button
+            className="primary-button"
+            disabled={saving}
+            style={styles.button}
+            type="submit"
+          >
+            {saving ? (
+              <LoaderCircle aria-hidden="true" size={15} />
+            ) : (
+              <Check aria-hidden="true" size={15} />
+            )}
+            {saving ? '保存中…' : '保存修改'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
 function DeleteLibraryDialog({
   library,
   onCancel,
@@ -1488,10 +1650,192 @@ function RelationForm({
   )
 }
 
+function KnowledgeSettingsView({
+  library,
+  onUpdateLibrary
+}: {
+  library: KnowledgeLibrary
+  onUpdateLibrary: KnowledgeWorkspaceProps['onUpdateLibrary']
+}): React.JSX.Element {
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string>()
+
+  const update = async (
+    change: Parameters<KnowledgeWorkspaceProps['onUpdateLibrary']>[1]
+  ): Promise<void> => {
+    setSaving(true)
+    setError(undefined)
+    try {
+      await onUpdateLibrary(library.id, change)
+    } catch (reason) {
+      setError(toErrorMessage(reason))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="knowledge-settings">
+      <section
+        aria-labelledby="knowledge-graph-settings-title"
+        style={{ ...styles.surface, padding: 16 }}
+      >
+        <div>
+          <h3 id="knowledge-graph-settings-title" style={{ margin: 0 }}>
+            知识图谱
+          </h3>
+          <p style={{ ...styles.muted, margin: '6px 0 0' }}>
+            控制是否从知识库文档中抽取实体、关系和证据。
+          </p>
+        </div>
+        <label
+          className="knowledge-settings__toggle"
+          style={{ ...styles.surface, cursor: saving ? 'wait' : 'pointer' }}
+        >
+          <input
+            checked={library.graphEnabled}
+            disabled={saving}
+            onChange={(event) =>
+              void update({ graphEnabled: event.currentTarget.checked })
+            }
+            type="checkbox"
+          />
+          <span>
+            <strong style={{ display: 'block' }}>启用知识图谱</strong>
+            <span style={styles.muted}>
+              启用后，新导入和重新同步的文档会按所选策略抽取图谱。
+            </span>
+          </span>
+        </label>
+        <label style={styles.label}>
+          图谱抽取策略
+          <select
+            aria-label="知识图谱抽取策略"
+            disabled={!library.graphEnabled || saving}
+            onChange={(event) =>
+              void update({
+                graphStrategy:
+                  event.currentTarget.value as KnowledgeGraphStrategy
+              })
+            }
+            style={styles.input}
+            value={library.graphStrategy}
+          >
+            {Object.entries(strategyLabels).map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+          <span style={styles.muted}>
+            “按需询问”不会自动生成图谱，也不能执行重新抽取。
+          </span>
+        </label>
+        {error && (
+          <p role="alert" style={{ color: 'var(--danger)', margin: 0 }}>
+            {error}
+          </p>
+        )}
+      </section>
+    </div>
+  )
+}
+
+const taskKindLabels: Record<KnowledgeTaskItem['kind'], string> = {
+  parsing: '文档解析',
+  embedding: '向量化',
+  graph: '图谱抽取'
+}
+
+const taskStatusLabels: Record<KnowledgeTaskItem['status'], string> = {
+  queued: '等待中',
+  running: '进行中',
+  succeeded: '已完成',
+  failed: '失败',
+  skipped: '已跳过'
+}
+
+function KnowledgeTasksView({
+  tasks
+}: {
+  tasks: readonly KnowledgeTaskItem[]
+}): React.JSX.Element {
+  const activeCount = tasks.filter(
+    (task) => task.status === 'queued' || task.status === 'running'
+  ).length
+  const failedCount = tasks.filter(
+    (task) => task.status === 'failed'
+  ).length
+
+  if (tasks.length === 0) {
+    return (
+      <EmptyState
+        description="导入或同步文档后，可以在这里查看解析、向量化和图谱抽取进度。"
+        icon={<ListChecks size={30} />}
+        level="section"
+        title="还没有知识任务"
+      />
+    )
+  }
+
+  return (
+    <section aria-labelledby="knowledge-tasks-title">
+      <div className="knowledge-tasks__summary">
+        <div>
+          <h3 id="knowledge-tasks-title" style={{ margin: 0 }}>
+            任务中心
+          </h3>
+          <p style={{ ...styles.muted, margin: '5px 0 0' }}>
+            最近 {tasks.length} 个任务
+          </p>
+        </div>
+        <div className="knowledge-tasks__metrics">
+          <span>进行中 {activeCount}</span>
+          <span>失败 {failedCount}</span>
+        </div>
+      </div>
+      <ol className="knowledge-task-list">
+        {tasks.map((task) => (
+          <li className="knowledge-task" key={task.id}>
+            <div className="knowledge-task__heading">
+              <div>
+                <strong>{task.documentName}</strong>
+                <span>{taskKindLabels[task.kind]}</span>
+              </div>
+              <span
+                className={`knowledge-task__status knowledge-task__status--${task.status}`}
+              >
+                {taskStatusLabels[task.status]}
+              </span>
+            </div>
+            <div className="knowledge-task__progress">
+              <progress
+                aria-label={`${task.documentName} ${taskKindLabels[task.kind]}进度`}
+                max={100}
+                value={task.progress}
+              />
+              <span>{task.progress}%</span>
+            </div>
+            <div className="knowledge-task__meta">
+              <span>{task.message || '等待处理'}</span>
+              <time dateTime={task.completedAt ?? task.startedAt ?? task.createdAt}>
+                {new Date(
+                  task.completedAt ?? task.startedAt ?? task.createdAt
+                ).toLocaleString('zh-CN')}
+              </time>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </section>
+  )
+}
+
 function GraphView({
   evidence,
   graphNodes,
   graphRelations,
+  libraryId,
   onCreateEntity,
   onCreateRelation,
   onDeleteEntity,
@@ -1499,6 +1843,7 @@ function GraphView({
   onMergeEntities,
   onMoveNode,
   onOpenEvidence,
+  onReextractGraph,
   onUpdateEntity,
   onUpdateRelation
 }: Pick<
@@ -1513,9 +1858,12 @@ function GraphView({
   | 'onMergeEntities'
   | 'onMoveNode'
   | 'onOpenEvidence'
+  | 'onReextractGraph'
   | 'onUpdateEntity'
   | 'onUpdateRelation'
->): React.JSX.Element {
+> & {
+  libraryId: string
+}): React.JSX.Element {
   const [query, setQuery] = useState('')
   const [typeFilter, setTypeFilter] = useState('all')
   const [selectedNodeId, setSelectedNodeId] = useState<string>()
@@ -1526,6 +1874,8 @@ function GraphView({
   const [mergeTargetId, setMergeTargetId] = useState('')
   const [zoom, setZoom] = useState(1)
   const [relationsExpanded, setRelationsExpanded] = useState(false)
+  const [reextracting, setReextracting] = useState(false)
+  const [reextractError, setReextractError] = useState<string>()
 
   const nodeMap = useMemo(
     () => new Map(graphNodes.map((node) => [node.id, node])),
@@ -1658,6 +2008,22 @@ function GraphView({
               </option>
             ))}
           </select>
+          <button
+            className="secondary-button"
+            disabled={reextracting}
+            onClick={() => {
+              setReextracting(true)
+              setReextractError(undefined)
+              void Promise.resolve(onReextractGraph(libraryId))
+                .catch((reason) => setReextractError(toErrorMessage(reason)))
+                .finally(() => setReextracting(false))
+            }}
+            style={styles.button}
+            type="button"
+          >
+            <RefreshCw aria-hidden="true" size={15} />
+            {reextracting ? '重新抽取中…' : '重新抽取'}
+          </button>
           <button
             className="secondary-button"
             onClick={() => {
@@ -1704,6 +2070,14 @@ function GraphView({
           >
             <ZoomIn aria-hidden="true" size={16} />
           </button>
+          {reextractError && (
+            <span
+              className="knowledge-graph__toolbar-error"
+              role="alert"
+            >
+              {reextractError}
+            </span>
+          )}
         </div>
         {graphNodes.length === 0 ? (
           <div
@@ -2117,6 +2491,7 @@ export function KnowledgeWorkspace({
   graphNodes,
   graphRelations,
   evidence,
+  tasks = [],
   loading = false,
   loadError,
   onRetryLoad,
@@ -2124,6 +2499,7 @@ export function KnowledgeWorkspace({
   onCreateLibrary,
   onDeleteLibrary,
   onUpdateLibrary,
+  onReextractGraph,
   onImportFiles,
   onImportDirectory,
   onImportUrl,
@@ -2144,8 +2520,11 @@ export function KnowledgeWorkspace({
   const [creating, setCreating] = useState(false)
   const [mobileListOpen, setMobileListOpen] = useState(false)
   const [tab, setTab] = useState<WorkspaceTab>('documents')
+  const [editingLibrary, setEditingLibrary] =
+    useState<KnowledgeLibrary>()
   const [deletingLibrary, setDeletingLibrary] =
     useState<KnowledgeLibrary>()
+  const editLibraryTriggerRef = useRef<HTMLButtonElement>(null)
   const deleteLibraryTriggerRef = useRef<HTMLButtonElement>(null)
   const selectedLibrary =
     libraries.find((library) => library.id === selectedLibraryId) ??
@@ -2158,6 +2537,9 @@ export function KnowledgeWorkspace({
         (document) => document.libraryId === selectedLibrary.id
       )
     : []
+  const libraryTasks = selectedLibrary
+    ? tasks.filter((task) => task.libraryId === selectedLibrary.id)
+    : []
 
   useEffect(() => {
     if (
@@ -2167,24 +2549,35 @@ export function KnowledgeWorkspace({
       onSelectLibrary(selectedLibrary.id)
     }
   }, [onSelectLibrary, selectedLibrary, selectedLibraryId])
-  const visibleTab =
-    selectedLibrary?.graphEnabled === false ? 'documents' : tab
+  const visibleTab = tab
   const workspaceTabs: ReadonlyArray<PageTab<WorkspaceTab>> = [
     {
       id: 'documents',
       label: '文档与来源',
       icon: <FileText aria-hidden="true" size={15} />
     },
-    ...(selectedLibrary?.graphEnabled
-      ? [
-          {
-            id: 'graph' as const,
-            label: '知识图谱',
-            icon: <Network aria-hidden="true" size={15} />
-          }
-        ]
-      : [])
+    {
+      id: 'graph',
+      label: '知识图谱',
+      icon: <Network aria-hidden="true" size={15} />
+    },
+    {
+      id: 'tasks',
+      label: '任务中心',
+      icon: <ListChecks aria-hidden="true" size={15} />
+    },
+    {
+      id: 'settings',
+      label: '设置',
+      icon: <Settings2 aria-hidden="true" size={15} />
+    }
   ]
+  const closeEditDialog = (): void => {
+    setEditingLibrary(undefined)
+    requestAnimationFrame(() =>
+      editLibraryTriggerRef.current?.focus()
+    )
+  }
   const closeDeleteDialog = (): void => {
     setDeletingLibrary(undefined)
     requestAnimationFrame(() =>
@@ -2445,49 +2838,16 @@ export function KnowledgeWorkspace({
               <div
                 className="knowledge-workspace__header-actions"
               >
-                <label
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    color: 'var(--text-secondary)',
-                    fontSize: 12,
-                    gap: 6
-                  }}
+                <button
+                  className="secondary-button"
+                  onClick={() => setEditingLibrary(selectedLibrary)}
+                  ref={editLibraryTriggerRef}
+                  style={styles.button}
+                  type="button"
                 >
-                  <input
-                    checked={selectedLibrary.graphEnabled}
-                    onChange={(event) =>
-                      void onUpdateLibrary(selectedLibrary.id, {
-                        graphEnabled: event.currentTarget.checked,
-                        graphStrategy: selectedLibrary.graphStrategy
-                      })
-                    }
-                    type="checkbox"
-                  />
-                  知识图谱
-                </label>
-                {selectedLibrary.graphEnabled && (
-                  <select
-                    aria-label="知识图谱抽取策略"
-                    className="knowledge-workspace__strategy"
-                    onChange={(event) =>
-                      void onUpdateLibrary(selectedLibrary.id, {
-                        graphEnabled: true,
-                        graphStrategy:
-                          event.currentTarget
-                            .value as KnowledgeGraphStrategy
-                      })
-                    }
-                    style={styles.input}
-                    value={selectedLibrary.graphStrategy}
-                  >
-                    {Object.entries(strategyLabels).map(([value, label]) => (
-                      <option key={value} value={value}>
-                        {label}
-                      </option>
-                    ))}
-                  </select>
-                )}
+                  <Pencil aria-hidden="true" size={15} />
+                  编辑
+                </button>
                 <button
                   aria-label={`删除知识库 ${selectedLibrary.name}`}
                   className="danger-button danger-button--quiet"
@@ -2497,7 +2857,7 @@ export function KnowledgeWorkspace({
                   type="button"
                 >
                   <Trash2 aria-hidden="true" size={15} />
-                  删除知识库
+                  删除
                 </button>
               </div>
             </header>
@@ -2529,11 +2889,13 @@ export function KnowledgeWorkspace({
                   onSyncSource={onSyncSource}
                   sources={librarySources}
                 />
-              ) : (
+              ) : visibleTab === 'graph' &&
+                selectedLibrary.graphEnabled ? (
                 <GraphView
                   evidence={evidence}
                   graphNodes={graphNodes}
                   graphRelations={graphRelations}
+                  libraryId={selectedLibrary.id}
                   onCreateEntity={onCreateEntity}
                   onCreateRelation={onCreateRelation}
                   onDeleteEntity={onDeleteEntity}
@@ -2541,14 +2903,49 @@ export function KnowledgeWorkspace({
                   onMergeEntities={onMergeEntities}
                   onMoveNode={onMoveNode}
                   onOpenEvidence={onOpenEvidence}
+                  onReextractGraph={onReextractGraph}
                   onUpdateEntity={onUpdateEntity}
                   onUpdateRelation={onUpdateRelation}
                 />
+              ) : visibleTab === 'graph' ? (
+                <EmptyState
+                  action={
+                    <button
+                      className="secondary-button"
+                      onClick={() => setTab('settings')}
+                      style={styles.button}
+                      type="button"
+                    >
+                      <Settings2 aria-hidden="true" size={15} />
+                      前往设置
+                    </button>
+                  }
+                  description="在“设置”中启用知识图谱后，可以查看实体关系并重新抽取。"
+                  icon={<Network size={30} />}
+                  level="section"
+                  title="知识图谱未启用"
+                />
+              ) : visibleTab === 'tasks' ? (
+                <KnowledgeTasksView tasks={libraryTasks} />
+              ) : (
+                <KnowledgeSettingsView
+                  library={selectedLibrary}
+                  onUpdateLibrary={onUpdateLibrary}
+                />
               )}
             </div>
           </>
         )}
       </section>
+      {editingLibrary && (
+        <EditLibraryDialog
+          library={editingLibrary}
+          onCancel={closeEditDialog}
+          onConfirm={(update) =>
+            onUpdateLibrary(editingLibrary.id, update)
+          }
+        />
+      )}
       {deletingLibrary && (
         <DeleteLibraryDialog
           library={deletingLibrary}
diff --git a/src/renderer/src/SettingsPanel.test.tsx b/src/renderer/src/SettingsPanel.test.tsx
index 6e28c47..3300b55 100644
--- a/src/renderer/src/SettingsPanel.test.tsx
+++ b/src/renderer/src/SettingsPanel.test.tsx
@@ -497,6 +497,30 @@ describe('SettingsPanel runtime files', () => {
     expect(content).toHaveClass('settings-panel__content')
   })
 
+  it('omits the redundant close-only footer on passive settings pages', () => {
+    render(
+      <SettingsPanel
+        {...heartbeatSettingsProps}
+        open
+        onClearLocalData={vi.fn(async () => {})}
+        onClose={vi.fn()}
+        onSaved={vi.fn()}
+        presentation="page"
+      />
+    )
+
+    fireEvent.click(screen.getByRole('tab', { name: '平台功能' }))
+
+    expect(
+      screen.getByRole('button', { name: '关闭设置' })
+    ).toBeInTheDocument()
+    expect(
+      screen
+        .getByRole('region', { name: '设置中心' })
+        .querySelector('.settings-panel__footer')
+    ).toBeNull()
+  })
+
   it('uses one first-level heading for the settings page', () => {
     render(
       <SettingsPanel
diff --git a/src/renderer/src/SettingsPanel.tsx b/src/renderer/src/SettingsPanel.tsx
index c940b4c..d31ab85 100644
--- a/src/renderer/src/SettingsPanel.tsx
+++ b/src/renderer/src/SettingsPanel.tsx
@@ -346,6 +346,11 @@ export function SettingsPanel({
     activeTab === 'runtime' ||
     activeTab === 'security' ||
     activeTab === 'roles'
+  const showFooter =
+    presentation !== 'page' ||
+    configurationTab ||
+    Boolean(error) ||
+    saved
 
   const handleTabKeyDown = (
     event: React.KeyboardEvent<HTMLButtonElement>,
@@ -2297,49 +2302,55 @@ export function SettingsPanel({
           </div>
         </div>
 
-        <footer className="settings-panel__footer">
-          <div className="settings-feedback">
-            {error && <span className="settings-error">{error}</span>}
-            {saved && (
-              <span className="settings-success">
-                <Check size={14} />
-                {connectionResult ?? '设置已保存'}
-              </span>
-            )}
-          </div>
-          <button className="secondary-button" onClick={close} type="button">
-            {configurationTab ? '取消' : '关闭'}
-          </button>
-          {configurationTab && (
-            <>
-              {(activeTab === 'runtime' ||
-                (activeTab === 'model' && modelType === 'llm')) && (
+        {showFooter && (
+          <footer className="settings-panel__footer">
+            <div className="settings-feedback">
+              {error && <span className="settings-error">{error}</span>}
+              {saved && (
+                <span className="settings-success">
+                  <Check size={14} />
+                  {connectionResult ?? '设置已保存'}
+                </span>
+              )}
+            </div>
+            <button
+              className="secondary-button"
+              onClick={close}
+              type="button"
+            >
+              {configurationTab ? '取消' : '关闭'}
+            </button>
+            {configurationTab && (
+              <>
+                {(activeTab === 'runtime' ||
+                  (activeTab === 'model' && modelType === 'llm')) && (
+                  <button
+                    className="secondary-button"
+                    disabled={saving || testing}
+                    onClick={() => void testConnection()}
+                    type="button"
+                  >
+                    {testing
+                      ? '测试中…'
+                      : activeTab === 'model'
+                        ? '保存并测试模型'
+                        : agentRuntimeType === 'opencode'
+                          ? '保存并测试 OpenCode'
+                          : '保存并测试 Continue'}
+                  </button>
+                )}
                 <button
-                  className="secondary-button"
+                  className="primary-button"
                   disabled={saving || testing}
-                  onClick={() => void testConnection()}
+                  onClick={() => void save()}
                   type="button"
                 >
-                  {testing
-                    ? '测试中…'
-                    : activeTab === 'model'
-                      ? '保存并测试模型'
-                      : agentRuntimeType === 'opencode'
-                        ? '保存并测试 OpenCode'
-                        : '保存并测试 Continue'}
+                  {saving ? '保存中…' : '保存设置'}
                 </button>
-              )}
-              <button
-                className="primary-button"
-                disabled={saving || testing}
-                onClick={() => void save()}
-                type="button"
-              >
-                {saving ? '保存中…' : '保存设置'}
-              </button>
-            </>
-          )}
-        </footer>
+              </>
+            )}
+          </footer>
+        )}
       </section>
     </div>
   )
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index ace3d1b..83866e6 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -1,34 +1,54 @@
 :root {
-  color: #1f1f1f;
-  background: #f5f5f5;
-  --surface-canvas: #f5f5f5;
+  color: #17263a;
+  background: #e8f0f5;
+  --surface-canvas: #e8f0f5;
   --surface-raised: #fff;
-  --surface-subtle: #fafafa;
-  --surface-muted: #f0f0f0;
-  --text-primary: #1f1f1f;
-  --text-secondary: #595959;
-  --text-muted: #6b7280;
+  --surface-subtle: #f4f8fb;
+  --surface-muted: #e5edf3;
+  --text-primary: #17263a;
+  --text-secondary: #4f6278;
+  --text-muted: #60748a;
   --text-on-accent: #fff;
-  --border-default: #d9d9d9;
-  --border-control: #8c8c8c;
-  --border-subtle: #f0f0f0;
-  --accent: #0b57d0;
-  --accent-solid: #0b57d0;
-  --accent-solid-hover: #0847ab;
-  --accent-hover: #0847ab;
-  --accent-selected: #bae0ff;
-  --accent-subtle: #e6f4ff;
-  --danger: #cf1322;
-  --danger-solid: #b42318;
-  --danger-strong: #cf1322;
-  --danger-border: #ffccc7;
-  --danger-subtle: #fff2f0;
-  --success: #237804;
-  --success-subtle: #f6ffed;
-  --warning: #faad14;
+  --border-default: #cedce7;
+  --border-control: #7f95aa;
+  --border-subtle: #e2eaf1;
+  --accent: #086fc7;
+  --accent-solid: #0875cf;
+  --accent-solid-hover: #065fab;
+  --accent-hover: #065fab;
+  --accent-selected: #a7cfea;
+  --accent-subtle: #e8f4ff;
+  --danger: #c53640;
+  --danger-solid: #aa2630;
+  --danger-strong: #b72d37;
+  --danger-border: #efbcc2;
+  --danger-subtle: #fff1f2;
+  --success: #077466;
+  --success-subtle: #e4f7f2;
+  --warning: #a86608;
+  --warning-border: #e8c589;
+  --warning-subtle: #fff7e8;
+  --code-surface: #17263a;
+  --code-text: #f2f7fb;
+  --graph-node-1: #dbeafe;
+  --graph-node-1-border: #2563eb;
+  --graph-node-2: #ccfbf1;
+  --graph-node-2-border: #0f766e;
+  --graph-node-3: #ede9fe;
+  --graph-node-3-border: #7c3aed;
+  --graph-node-4: #fef3c7;
+  --graph-node-4-border: #b45309;
+  --graph-node-5: #ffe4e6;
+  --graph-node-5-border: #be123c;
+  --graph-node-6: #cffafe;
+  --graph-node-6-border: #0e7490;
+  --graph-node-7: #dcfce7;
+  --graph-node-7-border: #15803d;
+  --graph-node-8: #e2e8f0;
+  --graph-node-8-border: #475569;
   --overlay-backdrop: rgb(0 0 0 / 45%);
-  --shadow-card: 0 2px 8px rgb(0 0 0 / 6%);
-  --shadow-dialog: 0 6px 16px rgb(0 0 0 / 8%);
+  --shadow-card: 0 4px 14px rgb(29 78 116 / 7%);
+  --shadow-dialog: 0 14px 38px rgb(29 78 116 / 14%);
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
@@ -38,8 +58,8 @@
   --content-reading: 820px;
   --content-standard: 960px;
   --content-dashboard: 1040px;
-  --radius-control: 8px;
-  --radius-card: 12px;
+  --radius-control: 10px;
+  --radius-card: 14px;
   --control-height: 36px;
   --motion-fast: 120ms;
   --motion-normal: 180ms;
@@ -847,7 +867,8 @@ textarea:focus-visible {
   display: flex;
   width: 100%;
   height: 100%;
-  background: #f5f5f5;
+  background: var(--surface-canvas);
+  color: var(--text-primary);
 }
 
 .sidebar {
@@ -857,9 +878,9 @@ textarea:focus-visible {
   min-width: 0;
   padding: 20px 14px 14px;
   overflow: hidden;
-  border-right: 1px solid #f0f0f0;
-  background: #fff;
-  color: #1f1f1f;
+  border-right: 1px solid var(--border-subtle);
+  background: var(--surface-canvas);
+  color: var(--text-primary);
   transition:
     flex-basis 180ms ease,
     padding 180ms ease;
@@ -891,16 +912,16 @@ textarea:focus-visible {
   height: 38px;
   flex: 0 0 38px;
   place-items: center;
-  border: 1px solid #1677ff;
-  border-radius: 8px;
-  background: #e6f4ff;
-  color: #1677ff;
+  border: 1px solid var(--accent-selected);
+  border-radius: 11px;
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 .brand__mark img {
   width: 100%;
   height: 100%;
-  border-radius: 7px;
+  border-radius: 10px;
   object-fit: cover;
 }
 
@@ -916,7 +937,7 @@ textarea:focus-visible {
 }
 
 .brand__copy span {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -939,10 +960,10 @@ textarea:focus-visible {
   width: 100%;
   min-width: 0;
   padding: 8px 9px;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  background: #fafafa;
-  color: #1f1f1f;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-control);
+  background: var(--surface-raised);
+  color: var(--text-primary);
   font-size: 10px;
 }
 
@@ -951,7 +972,7 @@ textarea:focus-visible {
   z-index: 80;
   display: grid;
   padding: 16px;
-  background: rgb(0 0 0 / 38%);
+  background: var(--overlay-backdrop);
   inset: 0;
   place-items: center;
 }
@@ -962,11 +983,11 @@ textarea:focus-visible {
   width: min(420px, calc(100vw - 32px));
   max-height: calc(100vh - 32px);
   padding: 14px;
-  border: 1px solid #d9d9d9;
-  border-radius: 12px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-card);
   overflow-y: auto;
-  background: #fff;
-  box-shadow: 0 12px 36px rgb(0 0 0 / 14%);
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-dialog);
   flex-direction: column;
   gap: 10px;
 }
@@ -984,7 +1005,7 @@ textarea:focus-visible {
 }
 
 .project-create-card label > span {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
   font-weight: 650;
 }
@@ -994,9 +1015,9 @@ textarea:focus-visible {
 .project-create-card select {
   width: 100%;
   padding: 8px 9px;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  background: #fff;
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-control);
+  background: var(--surface-raised);
   font-size: 10px;
   resize: vertical;
 }
@@ -1029,7 +1050,7 @@ textarea:focus-visible {
 
 .project-create-card__error {
   margin: 0;
-  color: #ff4d4f;
+  color: var(--danger);
   font-size: 9px;
 }
 
@@ -1088,19 +1109,19 @@ textarea:focus-visible {
   min-width: 248px;
   align-items: center;
   padding: 11px 12px;
-  border: 1px solid #1677ff;
-  border-radius: 8px;
+  border: 1px solid var(--accent-solid);
+  border-radius: var(--radius-control);
   margin-bottom: 11px;
-  background: #1677ff;
-  color: #fff;
+  background: var(--accent-solid);
+  color: var(--text-on-accent);
   cursor: pointer;
   gap: 9px;
   text-align: left;
 }
 
 .new-chat:hover {
-  border-color: #4096ff;
-  background: #4096ff;
+  border-color: var(--accent-solid-hover);
+  background: var(--accent-solid-hover);
 }
 
 .new-chat span {
@@ -1114,7 +1135,7 @@ textarea:focus-visible {
   border: 1px solid rgb(255 255 255 / 35%);
   border-radius: 5px;
   background: rgb(255 255 255 / 12%);
-  color: #fff;
+  color: var(--text-on-accent);
   font-size: 9px;
 }
 
@@ -1123,11 +1144,11 @@ textarea:focus-visible {
   min-width: 248px;
   align-items: center;
   padding: 9px 11px;
-  border: 1px solid #d9d9d9;
-  border-radius: 9px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-control);
   margin-bottom: 15px;
-  background: #fafafa;
-  color: #8c8c8c;
+  background: var(--surface-raised);
+  color: var(--text-muted);
   gap: 8px;
 }
 
@@ -1136,12 +1157,12 @@ textarea:focus-visible {
   border: 0;
   outline: 0;
   background: transparent;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 12px;
 }
 
 .sidebar-search input::placeholder {
-  color: #8c8c8c;
+  color: var(--text-muted);
 }
 
 .primary-nav {
@@ -1149,7 +1170,7 @@ textarea:focus-visible {
   min-width: 248px;
   flex-direction: column;
   padding-bottom: 13px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-default);
   gap: 3px;
 }
 
@@ -1157,18 +1178,29 @@ textarea:focus-visible {
   display: flex;
   align-items: center;
   padding: 9px 10px;
-  border-radius: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-control);
   background: transparent;
-  color: #595959;
+  color: var(--text-secondary);
   cursor: pointer;
   gap: 10px;
   text-align: left;
 }
 
-.nav-item:hover,
+.nav-item:hover {
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
 .nav-item--active {
-  background: #e6f4ff;
-  color: #1677ff;
+  border-color: var(--accent-selected);
+  background: color-mix(
+    in srgb,
+    var(--accent-selected) 34%,
+    var(--accent-subtle)
+  );
+  color: var(--accent);
+  font-weight: 650;
 }
 
 .nav-item span:nth-child(2) {
@@ -1178,7 +1210,7 @@ textarea:focus-visible {
 }
 
 .nav-item__hint {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
@@ -1188,8 +1220,8 @@ textarea:focus-visible {
   height: 19px;
   padding: 0 5px;
   border-radius: 999px;
-  background: #ff4d4f;
-  color: #fff;
+  background: var(--danger-solid);
+  color: var(--text-on-accent);
   font-size: 8px;
   font-weight: 700;
   place-items: center;
@@ -1209,7 +1241,7 @@ textarea:focus-visible {
 .section-label {
   padding: 0 9px;
   margin: 0 0 7px;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.1em;
@@ -1221,18 +1253,29 @@ textarea:focus-visible {
   width: 100%;
   align-items: center;
   padding: 9px 10px;
-  border-radius: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-control);
   background: transparent;
-  color: #595959;
+  color: var(--text-secondary);
   cursor: pointer;
   gap: 8px;
   text-align: left;
 }
 
-.conversation-item:hover,
+.conversation-item:hover {
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
 .conversation-item--active {
-  background: #e6f4ff;
-  color: #1677ff;
+  border-color: var(--accent-selected);
+  background: color-mix(
+    in srgb,
+    var(--accent-selected) 34%,
+    var(--accent-subtle)
+  );
+  color: var(--accent);
+  font-weight: 650;
 }
 
 .conversation-item span {
@@ -1244,7 +1287,7 @@ textarea:focus-visible {
 }
 
 .conversation-item small {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
@@ -1275,7 +1318,7 @@ textarea:focus-visible {
 .sidebar-footer {
   min-width: 248px;
   padding-top: 12px;
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid var(--border-default);
 }
 
 .user-card {
@@ -1283,16 +1326,16 @@ textarea:focus-visible {
   width: 100%;
   align-items: center;
   padding: 7px 8px;
-  border-radius: 8px;
+  border-radius: var(--radius-control);
   background: transparent;
-  color: #595959;
+  color: var(--text-secondary);
   cursor: pointer;
   gap: 9px;
   text-align: left;
 }
 
 .user-card:hover {
-  background: #fafafa;
+  background: var(--surface-raised);
 }
 
 .avatar {
@@ -1300,9 +1343,9 @@ textarea:focus-visible {
   width: 32px;
   height: 32px;
   place-items: center;
-  border-radius: 8px;
-  background: #e6f4ff;
-  color: #1677ff;
+  border-radius: var(--radius-control);
+  background: var(--accent-subtle);
+  color: var(--accent);
   font-size: 10px;
   font-weight: 800;
 }
@@ -1315,12 +1358,12 @@ textarea:focus-visible {
 }
 
 .user-card__copy strong {
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 11px;
 }
 
 .user-card__copy small {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
@@ -1328,6 +1371,8 @@ textarea:focus-visible {
   display: grid;
   min-width: 0;
   flex: 1;
+  overflow: hidden;
+  background: var(--surface-raised);
   grid-template-rows: 58px minmax(0, 1fr) auto;
 }
 
@@ -1336,8 +1381,8 @@ textarea:focus-visible {
   min-width: 0;
   align-items: center;
   padding: 0 0 0 21px;
-  border-bottom: 1px solid #f0f0f0;
-  background: #fff;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-subtle);
   gap: 3px;
   -webkit-app-region: drag;
   user-select: none;
@@ -1396,7 +1441,7 @@ button > svg * {
   width: 34px;
   height: 34px;
   place-items: center;
-  border-radius: 9px;
+  border-radius: var(--radius-control);
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
@@ -1412,6 +1457,10 @@ button > svg * {
   color: var(--accent);
 }
 
+.theme-toggle-button {
+  color: var(--accent);
+}
+
 .assistant-sidebar {
   position: relative;
   display: flex;
@@ -1420,8 +1469,8 @@ button > svg * {
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
-  border-left: 0 solid #f0f0f0;
-  background: #fff;
+  border-left: 0 solid var(--border-subtle);
+  background: var(--surface-raised);
   opacity: 0;
   transition:
     width 180ms ease,
@@ -1486,7 +1535,7 @@ button > svg * {
   align-items: center;
   justify-content: space-between;
   padding: 0 14px 0 18px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .assistant-sidebar__header strong {
@@ -1496,7 +1545,7 @@ button > svg * {
 .assistant-sidebar__tabs {
   display: grid;
   padding: 8px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-subtle);
   gap: 3px;
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
@@ -1506,15 +1555,15 @@ button > svg * {
   padding: 7px 2px;
   border-radius: 7px;
   background: transparent;
-  color: #8c8c8c;
+  color: var(--text-muted);
   cursor: pointer;
   font-size: 10px;
 }
 
 .assistant-sidebar__tab:hover,
 .assistant-sidebar__tab--active {
-  background: #e6f4ff;
-  color: #1677ff;
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 .assistant-sidebar__badge {
@@ -1560,7 +1609,7 @@ button > svg * {
   display: flex;
   align-items: center;
   margin: 8px 0 2px;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 11px;
   gap: 6px;
 }
@@ -1575,12 +1624,12 @@ button > svg * {
   max-height: 420px;
   padding: 10px;
   overflow: auto;
-  border: 1px solid #e8e8e8;
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
   margin: 0;
-  background: #fafafa;
-  color: #3d3d3d;
-  font-family: 'SFMono-Regular', Consolas, monospace;
+  background: var(--surface-subtle);
+  color: var(--text-primary);
+  font-family: var(--font-family-mono);
   font-size: 9px;
   line-height: 1.5;
   white-space: pre-wrap;
@@ -1739,10 +1788,10 @@ button > svg * {
   width: 100%;
   align-items: center;
   padding: 10px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--border-subtle);
   border-radius: 9px;
-  background: #fafafa;
-  color: #595959;
+  background: var(--surface-subtle);
+  color: var(--text-secondary);
   cursor: pointer;
   gap: 8px;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -1750,8 +1799,8 @@ button > svg * {
 }
 
 .assistant-sidebar__row:hover {
-  border-color: #91caff;
-  background: #e6f4ff;
+  border-color: var(--accent-selected);
+  background: var(--accent-subtle);
 }
 
 .assistant-sidebar__row span,
@@ -1776,7 +1825,7 @@ button > svg * {
 .assistant-sidebar__context small,
 .assistant-sidebar__library small {
   overflow: hidden;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1823,16 +1872,16 @@ button > svg * {
   align-items: center;
   justify-content: space-between;
   padding: 9px 10px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--border-subtle);
   border-radius: 9px;
   gap: 8px;
 }
 
 .assistant-sidebar__library {
   padding: 9px 10px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--border-subtle);
   border-radius: 9px;
-  background: #fafafa;
+  background: var(--surface-subtle);
 }
 
 .assistant-sidebar__memory {
@@ -1840,10 +1889,10 @@ button > svg * {
   align-items: flex-start;
   justify-content: space-between;
   padding: 9px 10px;
-  border: 1px solid #d6e4ff;
+  border: 1px solid var(--accent-selected);
   border-radius: 9px;
-  background: #f0f5ff;
-  color: #2f54eb;
+  background: var(--accent-subtle);
+  color: var(--accent);
   font-size: 10px;
   gap: 8px;
   line-height: 1.45;
@@ -1856,7 +1905,7 @@ button > svg * {
 }
 
 .assistant-sidebar__memory > span small {
-  color: #d46b08;
+  color: var(--warning);
   font-size: 8px;
 }
 
@@ -1927,7 +1976,7 @@ button > svg * {
   display: flex;
   align-items: center;
   margin: 0;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 13px;
   gap: 7px;
 }
@@ -1935,14 +1984,14 @@ button > svg * {
 .heartbeat-settings__intro p,
 .heartbeat-settings__empty {
   margin: 5px 0 0;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
   line-height: 1.5;
 }
 
 .heartbeat-settings__error {
   margin: 0;
-  color: #cf1322;
+  color: var(--danger);
   font-size: 10px;
   line-height: 1.5;
 }
@@ -1965,9 +2014,9 @@ button > svg * {
   width: 100%;
   min-height: 34px;
   padding: 7px 9px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-control);
   border-radius: 8px;
-  background: #fff;
+  background: var(--surface-raised);
   font-size: 11px;
 }
 
@@ -1987,9 +2036,9 @@ button > svg * {
   align-items: center;
   justify-content: space-between;
   padding: 10px 11px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 9px;
-  background: #fff;
+  background: var(--surface-raised);
   gap: 12px;
 }
 
@@ -2005,7 +2054,7 @@ button > svg * {
 }
 
 .heartbeat-settings__item small {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
@@ -2020,7 +2069,7 @@ button > svg * {
   min-height: 28px;
   padding: 4px 0;
   background: transparent;
-  color: #1677ff;
+  color: var(--accent);
   cursor: pointer;
   font-size: 9px;
 }
@@ -2055,7 +2104,7 @@ button > svg * {
 .heartbeat-settings--sidebar .heartbeat-settings__item {
   display: block;
   padding: 9px 10px;
-  background: #fafafa;
+  background: var(--surface-subtle);
 }
 
 .heartbeat-settings--sidebar .heartbeat-settings__item strong {
@@ -2079,9 +2128,9 @@ button > svg * {
 .assistant-sidebar__empty {
   padding: 16px 10px;
   margin: 0;
-  border: 1px dashed #d9d9d9;
+  border: 1px dashed var(--border-default);
   border-radius: 9px;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
   line-height: 1.5;
   text-align: center;
@@ -2182,7 +2231,7 @@ button > svg * {
 .assistant-sidebar__preview > header {
   display: flex;
   padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-subtle);
   margin-bottom: 12px;
   flex-direction: column;
   gap: var(--space-2);
@@ -2218,7 +2267,7 @@ button > svg * {
 }
 
 .assistant-sidebar__preview > header small {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
@@ -2241,16 +2290,16 @@ button > svg * {
 .assistant-sidebar__web-preview {
   width: 100%;
   min-height: 480px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 8px;
-  background: #fff;
+  background: var(--surface-raised);
 }
 
 .assistant-sidebar__preview pre {
   padding: 10px;
   overflow: auto;
   border-radius: 8px;
-  background: #f5f5f5;
+  background: var(--surface-subtle);
   font-size: 9px;
   white-space: pre-wrap;
 }
@@ -2264,7 +2313,7 @@ button > svg * {
   border-radius: 8px;
   margin-left: 4px;
   background: transparent;
-  color: #1f1f1f;
+  color: var(--text-primary);
   flex: 0 1 auto;
   gap: 6px;
   font-size: 12px;
@@ -2286,63 +2335,17 @@ button > svg * {
   gap: 3px;
 }
 
-.topbar-menu {
-  position: relative;
-}
-
-.topbar-menu__popover {
-  position: absolute;
-  z-index: 40;
-  top: calc(100% + 6px);
-  right: 0;
-  display: grid;
-  width: 188px;
-  padding: var(--space-1);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-card);
-  background: var(--surface-raised);
-  box-shadow: var(--shadow-dialog);
-  gap: var(--space-1);
-}
-
-.topbar-menu__popover button {
-  display: flex;
-  width: 100%;
-  min-height: 32px;
-  align-items: center;
-  padding: 0 var(--space-2);
-  border-radius: var(--radius-control);
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: var(--font-section-title);
-  font-weight: 500;
-  gap: var(--space-2);
-  line-height: 1.4;
-  text-align: left;
-}
-
-.topbar-menu__popover button svg {
-  width: 14px;
-  height: 14px;
-  flex: 0 0 auto;
-}
-
-.topbar-menu__popover button:hover {
-  background: var(--accent-subtle);
-  color: var(--accent);
-}
-
 .runtime-status {
   display: flex;
   min-width: 0;
   max-width: clamp(108px, 18vw, 220px);
   align-items: center;
   padding: 6px 10px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 8px;
   margin-right: 8px;
-  color: #595959;
+  background: var(--surface-raised);
+  color: var(--text-secondary);
   font-size: 10px;
   font-weight: 650;
   gap: 6px;
@@ -2362,15 +2365,15 @@ button > svg * {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #8c8c8c;
+  background: var(--text-muted);
 }
 
 .runtime-status--online {
-  color: #52c41a;
+  color: var(--success);
 }
 
 .runtime-status--online .runtime-status__dot {
-  background: #52c41a;
+  background: var(--success);
 }
 
 .chat {
@@ -2380,7 +2383,8 @@ button > svg * {
     max(var(--page-gutter), calc((100% - var(--content-reading)) / 2))
     10px;
   overflow-y: auto;
-  scrollbar-color: #d9d9d9 transparent;
+  background: var(--surface-raised);
+  scrollbar-color: var(--border-default) transparent;
   scrollbar-width: thin;
 }
 
@@ -2394,16 +2398,16 @@ button > svg * {
   width: 42px;
   height: 42px;
   place-items: center;
-  border: 1px solid #1677ff;
+  border: 1px solid var(--accent-selected);
   border-radius: 8px;
   margin: 0 auto 14px;
-  background: #e6f4ff;
-  color: #1677ff;
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 .eyebrow {
   margin: 0 0 8px;
-  color: #1677ff;
+  color: var(--accent);
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 0.16em;
@@ -2411,7 +2415,7 @@ button > svg * {
 
 .welcome h1 {
   margin: 0;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: clamp(26px, 3vw, 36px);
   font-weight: 500;
   letter-spacing: -0.025em;
@@ -2419,7 +2423,7 @@ button > svg * {
 
 .welcome__description {
   margin: 12px 0;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 12px;
 }
 
@@ -2438,9 +2442,9 @@ button > svg * {
   display: grid;
   min-height: 118px;
   padding: 15px;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  background: #fff;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-card);
+  background: var(--surface-raised);
   cursor: pointer;
   gap: 5px;
   grid-template-rows: auto auto 1fr;
@@ -2452,8 +2456,8 @@ button > svg * {
 }
 
 .quick-actions button:hover {
-  border-color: #4096ff;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
+  border-color: var(--accent-selected);
+  box-shadow: var(--shadow-card);
   transform: translateY(-2px);
 }
 
@@ -2464,17 +2468,17 @@ button > svg * {
   place-items: center;
   border-radius: 9px;
   margin-bottom: 4px;
-  background: #e6f4ff;
-  color: #1677ff;
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 .quick-actions strong {
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 11px;
 }
 
 .quick-actions small {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
   line-height: 1.45;
 }
@@ -2495,7 +2499,7 @@ button > svg * {
 }
 
 .message + .message {
-  border-top-color: #f0f0f0;
+  border-top-color: var(--border-subtle);
 }
 
 .message--user {
@@ -2507,18 +2511,18 @@ button > svg * {
   width: 29px;
   height: 29px;
   place-items: center;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 9px;
-  background: #fff;
-  color: #1677ff;
+  background: var(--surface-raised);
+  color: var(--accent);
 }
 
 .message--user .message__avatar {
   grid-column: 2;
   grid-row: 1;
-  border-color: #1677ff;
-  background: #e6f4ff;
-  color: #1677ff;
+  border-color: var(--accent-selected);
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 .message__body {
@@ -2657,27 +2661,37 @@ button > svg * {
 }
 
 .message__meta strong {
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 11px;
 }
 
 .message__meta span {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
 .markdown-content {
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 13px;
   line-height: 1.75;
   overflow-wrap: anywhere;
 }
 
 .message--user .message__content {
-  padding: 9px 13px;
-  border: 1px solid #bae0ff;
+  padding: 10px 14px;
+  border: 1px solid var(--accent-solid);
   border-radius: 14px 4px 14px 14px;
-  background: #e6f4ff;
+  background: var(--accent-solid);
+  color: var(--text-on-accent);
+  box-shadow: var(--shadow-card);
+}
+
+.message--user .message__content :where(a, code) {
+  color: inherit;
+}
+
+.message--user .message__content :not(pre) > code {
+  background: rgb(255 255 255 / 16%);
 }
 
 .message-reasoning {
@@ -2774,12 +2788,12 @@ button > svg * {
 
 .markdown-content pre {
   padding: 12px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 9px;
   overflow-x: auto;
-  background: #1f1f1f;
-  color: #f5f5f5;
-  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  background: var(--code-surface);
+  color: var(--code-text);
+  font-family: var(--font-family-mono);
   font-size: 11px;
   line-height: 1.6;
   white-space: pre;
@@ -2788,9 +2802,9 @@ button > svg * {
 .markdown-content :not(pre) > code {
   padding: 2px 5px;
   border-radius: 5px;
-  background: #f5f5f5;
-  color: #1677ff;
-  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  background: var(--surface-muted);
+  color: var(--accent);
+  font-family: var(--font-family-mono);
   font-size: 0.9em;
 }
 
@@ -2803,7 +2817,7 @@ button > svg * {
 
 .markdown-table-scroll:focus-visible {
   border-radius: 4px;
-  outline: 2px solid #1677ff;
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -2818,18 +2832,18 @@ button > svg * {
 .markdown-content th,
 .markdown-content td {
   padding: 7px 8px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   text-align: left;
 }
 
 .markdown-content blockquote {
   padding-left: 11px;
-  border-left: 3px solid #1677ff;
-  color: #595959;
+  border-left: 3px solid var(--accent);
+  color: var(--text-secondary);
 }
 
 .markdown-content a {
-  color: #1677ff;
+  color: var(--accent);
   text-decoration-thickness: 1px;
 }
 
@@ -2846,15 +2860,15 @@ button > svg * {
   display: block;
   width: 100%;
   max-height: 640px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 12px;
-  background: #fafafa;
+  background: var(--surface-subtle);
   object-fit: contain;
 }
 
 .message-generated-image figcaption {
   margin-top: 5px;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
@@ -2866,7 +2880,7 @@ button > svg * {
   display: flex;
   align-items: flex-start;
   margin-top: 8px;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
   gap: 7px;
   overflow-wrap: anywhere;
@@ -2874,7 +2888,7 @@ button > svg * {
 }
 
 .message__status--error {
-  color: #ff4d4f;
+  color: var(--danger);
 }
 
 .message__status-dot {
@@ -3081,11 +3095,11 @@ button > svg * {
   display: grid;
   align-items: center;
   padding: 12px;
-  border: 1px solid #faad14;
+  border: 1px solid var(--warning-border);
   border-radius: 8px;
   margin-top: 10px;
-  background: #fafafa;
-  color: #faad14;
+  background: var(--warning-subtle);
+  color: var(--warning);
   gap: 10px;
   grid-template-columns: auto minmax(0, 1fr) repeat(4, auto);
 }
@@ -3096,13 +3110,13 @@ button > svg * {
 
 .approval-card strong {
   display: block;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 11px;
 }
 
 .approval-card p {
   margin: 3px 0 0;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
   line-height: 1.5;
 }
@@ -3112,7 +3126,7 @@ button > svg * {
   max-width: 420px;
   margin-top: 6px;
   overflow: hidden;
-  color: #434343;
+  color: var(--text-secondary);
   font-size: 9px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3128,14 +3142,14 @@ button > svg * {
 }
 
 .approval-card__deny {
-  border: 1px solid #d9d9d9;
-  background: #fff;
-  color: #595959;
+  border: 1px solid var(--border-default);
+  background: var(--surface-raised);
+  color: var(--text-secondary);
 }
 
 .approval-card__allow {
-  background: #1677ff;
-  color: #fff;
+  background: var(--accent-solid);
+  color: var(--text-on-accent);
 }
 
 .agent-question-card {
@@ -3239,7 +3253,7 @@ button > svg * {
     var(--space-3)
     max(var(--page-gutter), calc((100% - var(--content-reading)) / 2))
     var(--space-4);
-  background: var(--surface-canvas);
+  background: var(--surface-raised);
 }
 
 .composer {
@@ -3247,6 +3261,7 @@ button > svg * {
   border: 1px solid var(--border-control);
   border-radius: var(--radius-card);
   background: var(--surface-raised);
+  box-shadow: var(--shadow-card);
   transition:
     border-color var(--motion-fast, 120ms) ease-out,
     box-shadow var(--motion-fast, 120ms) ease-out;
@@ -3454,7 +3469,9 @@ button > svg * {
 
 .composer:focus-within {
   border-color: var(--accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
+    var(--shadow-card);
 }
 
 .composer__input {
@@ -3487,6 +3504,7 @@ button > svg * {
 .composer__input textarea::placeholder {
   color: var(--text-muted);
   opacity: 1;
+  white-space: pre-line;
 }
 
 .composer__toolbar {
@@ -3588,77 +3606,26 @@ button > svg * {
   border-left: 1px solid var(--border-default);
 }
 
-.composer__expert,
-.composer__mode {
-  display: flex;
-  height: 34px;
-  min-width: 0;
-  align-items: center;
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-control);
-  background: var(--surface-raised);
-  color: var(--text-secondary);
-  gap: var(--space-1);
-  user-select: none;
+.composer-picker--expert > .model-button {
+  width: 148px;
 }
 
-.composer__expert {
-  width: 124px;
-  padding-left: var(--space-2);
+.composer-picker--mode > .model-button {
+  width: 168px;
 }
 
-.composer__expert svg,
-.composer__mode svg {
-  flex: 0 0 auto;
-}
-
-.composer__expert select,
-.composer__mode select {
-  min-width: 0;
-  height: 100%;
-  padding: 0 var(--space-2) 0 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font-size: var(--font-caption);
-  user-select: none;
-}
-
-.composer__expert select {
-  width: 96px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.composer__expert:focus-within,
-.composer__mode:focus-within {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.composer__mode {
-  width: 144px;
-  padding-left: var(--space-2);
-  color: var(--text-primary);
-}
-
-.composer__mode select {
-  width: 116px;
-  font-weight: 600;
-}
-
-.composer__mode--ask svg {
+.composer-picker--ask svg {
   color: var(--accent);
 }
 
-.composer__mode--execute {
-  border-color: var(--border-default);
+.composer-picker--execute svg {
+  color: var(--warning);
 }
 
-.composer__mode--execute svg {
-  color: var(--warning);
+.composer-picker__menu {
+  right: auto;
+  left: 0;
+  width: 268px;
 }
 
 .model-button {
@@ -3737,6 +3704,7 @@ button > svg * {
   align-items: center;
   padding: var(--space-2);
   border-radius: var(--radius-control);
+  background: transparent;
   color: var(--text-primary);
   cursor: pointer;
   gap: var(--space-1) var(--space-2);
@@ -3750,6 +3718,13 @@ button > svg * {
   color: var(--accent);
 }
 
+.runtime-picker__menu > button:disabled {
+  background: transparent;
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
 .runtime-picker__menu > button[aria-checked="true"]::after {
   content: "✓";
   font-weight: 700;
@@ -3863,29 +3838,22 @@ button > svg * {
     border-left: 0;
   }
 
-  .composer__expert,
-  .composer__mode,
+  .composer-picker,
   .runtime-picker {
     flex: 1 1 150px;
   }
 
-  .composer__expert,
-  .composer__mode,
+  .composer-picker > .model-button,
   .model-button {
     width: 100%;
   }
-
-  .composer__expert select,
-  .composer__mode select {
-    width: 100%;
-  }
 }
 
 .settings-backdrop {
   position: fixed;
   z-index: 50;
   display: grid;
-  background: rgb(0 0 0 / 45%);
+  background: var(--overlay-backdrop);
   inset: 0;
   place-items: center;
 }
@@ -3894,18 +3862,18 @@ button > svg * {
   height: 100%;
   min-height: 0;
   overflow: hidden;
-  background: #f7f8fa;
+  background: var(--surface-canvas);
 }
 
 .settings-panel {
   display: grid;
   width: min(820px, calc(100vw - 40px));
   max-height: calc(100vh - 48px);
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 10px;
   overflow: hidden;
-  background: #fff;
-  box-shadow: 0 6px 16px rgb(0 0 0 / 8%);
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-dialog);
   grid-template-rows: auto minmax(0, 1fr) auto;
 }
 
@@ -3923,7 +3891,11 @@ button > svg * {
   display: flex;
   align-items: center;
   padding: 22px 24px 18px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.settings-page .settings-panel__header {
+  border-bottom: 0;
 }
 
 .settings-panel__header > div {
@@ -3935,6 +3907,11 @@ button > svg * {
   width: 100%;
 }
 
+.settings-page .settings-panel__header .page-header {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
 .settings-panel__header .page-header__content {
   padding-right: 44px;
 }
@@ -3955,14 +3932,14 @@ button > svg * {
 
 .settings-panel__header h2 {
   margin: 0;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 22px;
   font-weight: 500;
 }
 
 .settings-panel__description {
   margin: 6px 0 0;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
 }
 
@@ -3985,7 +3962,7 @@ button > svg * {
   display: grid;
   padding: 3px;
   border-radius: 9px;
-  background: #f5f5f5;
+  background: var(--surface-muted);
   grid-template-columns: repeat(10, 1fr);
 }
 
@@ -3997,7 +3974,7 @@ button > svg * {
   min-height: 34px;
   border-radius: 7px;
   background: transparent;
-  color: #595959;
+  color: var(--text-secondary);
   cursor: pointer;
   font-size: 11px;
   font-weight: 650;
@@ -4009,7 +3986,7 @@ button > svg * {
 
 .settings-tabs button small {
   display: none;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
   font-weight: 400;
 }
@@ -4077,30 +4054,30 @@ button > svg * {
 }
 
 .settings-page .settings-tabs button[aria-selected='true'] {
-  background: #eaf3ff;
+  background: var(--accent-subtle);
   box-shadow: none;
 }
 
 .settings-tabs button[aria-selected='true'] {
-  background: #fff;
-  color: #1677ff;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  background: var(--surface-raised);
+  color: var(--accent);
+  box-shadow: var(--shadow-card);
 }
 
 .settings-section {
   display: flex;
   flex-direction: column;
   padding: 16px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
-  background: #fafafa;
+  background: var(--surface-subtle);
   gap: 13px;
 }
 
 .settings-section__title {
   display: flex;
   align-items: center;
-  color: #1677ff;
+  color: var(--accent);
   gap: 9px;
 }
 
@@ -4117,27 +4094,27 @@ button > svg * {
   display: inline-flex;
   align-items: center;
   min-height: 30px;
-  color: #1677ff;
+  color: var(--accent);
   gap: 5px;
 }
 
 .settings-section__title strong {
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 12px;
 }
 
 .settings-section__title small {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
 .model-capability-badge,
 .runtime-capability-badge {
   padding: 2px 7px;
-  border: 1px solid #ffd591;
+  border: 1px solid var(--warning-border);
   border-radius: 999px;
-  background: #fff7e6;
-  color: #ad4e00;
+  background: var(--warning-subtle);
+  color: var(--warning);
   font-size: 9px;
   font-weight: 700;
   white-space: nowrap;
@@ -4743,7 +4720,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .field {
   display: flex;
   flex-direction: column;
-  color: #1f1f1f;
+  color: var(--text-primary);
   gap: 7px;
 }
 
@@ -4758,26 +4735,26 @@ details.settings-section > :not(summary) + :not(summary) {
   width: 100%;
   min-height: 38px;
   padding: 0 11px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-control);
   border-radius: 9px;
   outline: 0;
-  background: #fff;
-  color: #1f1f1f;
+  background: var(--surface-raised);
+  color: var(--text-primary);
   font-size: 12px;
 }
 
 .field input:focus,
 .field textarea:focus,
 .field select:focus {
-  border-color: #1677ff;
-  box-shadow: 0 0 0 2px rgb(22 119 255 / 12%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
 }
 
 .field input:disabled,
 .field textarea:disabled,
 .field select:disabled {
-  background: #f5f5f5;
-  color: #8c8c8c;
+  background: var(--surface-muted);
+  color: var(--text-muted);
 }
 
 .field textarea {
@@ -4787,7 +4764,7 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .field small {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
   line-height: 1.45;
 }
@@ -4795,7 +4772,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .credential-state {
   display: flex;
   align-items: center;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 10px;
   gap: 7px;
 }
@@ -4811,22 +4788,22 @@ details.settings-section > :not(summary) + :not(summary) {
   padding: 4px 7px;
   border-radius: 6px;
   background: transparent;
-  color: #ff4d4f;
+  color: var(--danger);
   cursor: pointer;
   font-size: 9px;
 }
 
 .credential-state button:hover {
-  background: #fafafa;
+  background: var(--danger-subtle);
 }
 
 .settings-warning {
   padding: 9px 10px;
-  border: 1px solid #faad14;
+  border: 1px solid var(--warning-border);
   border-radius: 8px;
   margin: 0;
-  background: #fafafa;
-  color: #595959;
+  background: var(--warning-subtle);
+  color: var(--text-secondary);
   font-size: 10px;
   line-height: 1.55;
 }
@@ -4834,7 +4811,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .settings-notice,
 .settings-empty {
   margin: 0;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
   line-height: 1.55;
 }
@@ -5466,15 +5443,15 @@ details.settings-section > :not(summary) + :not(summary) {
 .capability-tags span {
   padding: 2px 6px;
   border-radius: 10px;
-  background: #e6f4ff;
-  color: #1677ff;
+  background: var(--accent-subtle);
+  color: var(--accent);
   font-size: 8px;
 }
 
 .capability-remove {
   margin-left: auto;
   background: transparent;
-  color: #ff4d4f;
+  color: var(--danger);
   cursor: pointer;
   font-size: 9px;
   gap: 3px;
@@ -5486,10 +5463,10 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .capability-card__actions button {
   padding: 4px 6px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 6px;
-  background: #fff;
-  color: #595959;
+  background: var(--surface-raised);
+  color: var(--text-secondary);
   cursor: pointer;
   font-size: 8px;
   gap: 3px;
@@ -5539,15 +5516,15 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .mcp-test-result {
-  color: #389e0d !important;
+  color: var(--success) !important;
 }
 
 .settings-panel__footer {
   display: flex;
   align-items: center;
   padding: 14px 24px;
-  border-top: 1px solid #f0f0f0;
-  background: #fafafa;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--surface-subtle);
   gap: 8px;
 }
 
@@ -5558,13 +5535,13 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .settings-error {
-  color: #ff4d4f;
+  color: var(--danger);
 }
 
 .settings-success {
   display: flex;
   align-items: center;
-  color: #52c41a;
+  color: var(--success);
   gap: 5px;
 }
 
@@ -5617,7 +5594,7 @@ details.settings-section > :not(summary) + :not(summary) {
   place-items: center;
   border-radius: 6px;
   background: transparent;
-  color: #8c8c8c;
+  color: var(--text-muted);
   cursor: pointer;
   opacity: 0;
 }
@@ -5800,7 +5777,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .conversation-empty {
   padding: 12px 10px;
   margin: 0;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
 }
 
@@ -5808,26 +5785,26 @@ details.settings-section > :not(summary) + :not(summary) {
   display: flex;
   align-items: center;
   padding: 7px 9px;
-  border: 1px solid #1677ff;
+  border: 1px solid var(--accent-selected);
   border-radius: 8px;
   margin-top: 9px;
-  background: #e6f4ff;
-  color: #1677ff;
+  background: var(--accent-subtle);
+  color: var(--accent);
   font-size: 9px;
   gap: 6px;
 }
 
 .message-citations {
   padding: 8px 10px;
-  border: 1px solid #d6e4ff;
+  border: 1px solid var(--accent-selected);
   border-radius: 8px;
   margin-top: 7px;
-  background: #fafcff;
+  background: var(--surface-subtle);
   font-size: 9px;
 }
 
 .message-citations summary {
-  color: #1677ff;
+  color: var(--accent);
   cursor: pointer;
   font-weight: 600;
 }
@@ -5848,22 +5825,22 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .message-citations small {
   margin-top: 2px;
-  color: #8c8c8c;
+  color: var(--text-muted);
 }
 
 .message-citations p {
   margin: 4px 0;
-  color: #434343;
+  color: var(--text-secondary);
   line-height: 1.5;
 }
 
 .message-retry {
   padding: 6px 9px;
-  border: 1px solid #ff4d4f;
+  border: 1px solid var(--danger-border);
   border-radius: 7px;
   margin-top: 9px;
-  background: #fafafa;
-  color: #ff4d4f;
+  background: var(--danger-subtle);
+  color: var(--danger);
   cursor: pointer;
   font-size: 9px;
 }
@@ -5976,7 +5953,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .check-field {
   display: flex;
   align-items: center;
-  color: #595959;
+  color: var(--text-secondary);
   cursor: pointer;
   font-size: 10px;
   gap: 8px;
@@ -5985,7 +5962,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .check-field input {
   width: 15px;
   height: 15px;
-  accent-color: #1677ff;
+  accent-color: var(--accent-solid);
 }
 
 .subagent-routing-settings > small {
@@ -5995,18 +5972,18 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .settings-section--danger {
-  border-color: #ff4d4f;
-  background: #fafafa;
+  border-color: var(--danger-border);
+  background: var(--danger-subtle);
 }
 
 .settings-section--danger strong {
-  color: #ff4d4f;
+  color: var(--danger);
   font-size: 11px;
 }
 
 .settings-section--danger p {
   margin: 5px 0 0;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
   line-height: 1.55;
 }
@@ -6094,6 +6071,7 @@ details.settings-section > :not(summary) + :not(summary) {
       calc((100% - var(--content-standard)) / 2)
     );
   overflow-y: auto;
+  background: var(--surface-raised);
 }
 
 .workspace-panel-scroll.page-shell--reading {
@@ -6205,10 +6183,10 @@ details.settings-section > :not(summary) + :not(summary) {
   min-height: 22px;
   align-items: center;
   padding: 3px 8px;
-  border: 1px solid var(--border-control);
+  border: 1px solid var(--accent-selected);
   border-radius: 999px;
-  background: var(--surface-subtle);
-  color: var(--text-secondary);
+  background: var(--accent-subtle);
+  color: var(--accent);
   font-size: var(--font-caption);
   font-weight: 650;
   gap: 5px;
@@ -6417,8 +6395,10 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .knowledge-workspace__main {
+  display: flex;
   min-height: 0;
   overflow: hidden;
+  flex-direction: column;
 }
 
 .knowledge-workspace__mobile-back {
@@ -6464,15 +6444,150 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .knowledge-workspace__tabs {
+  flex: 0 0 auto;
   padding: 12px 20px 0;
 }
 
-.knowledge-workspace__tabs .page-tabs {
-  width: 100%;
+.knowledge-workspace__body {
+  min-height: 0;
+  padding: clamp(16px, 2vw, 20px);
+  overflow: hidden auto;
+  flex: 1 1 auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
 
-.knowledge-workspace__body {
-  padding: clamp(16px, 2vw, 20px);
+.knowledge-settings {
+  display: grid;
+  width: min(640px, 100%);
+}
+
+.knowledge-settings > section {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.knowledge-settings__toggle {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--space-3);
+  gap: var(--space-3);
+}
+
+.knowledge-tasks__summary {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+  gap: var(--space-4);
+}
+
+.knowledge-tasks__metrics {
+  display: flex;
+  color: var(--text-secondary);
+  font-size: var(--font-caption);
+  gap: var(--space-3);
+}
+
+.knowledge-task-list {
+  display: grid;
+  padding: 0;
+  margin: 0;
+  gap: var(--space-3);
+  list-style: none;
+}
+
+.knowledge-task {
+  display: grid;
+  padding: var(--space-3);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-card);
+  background: var(--surface-raised);
+  gap: var(--space-2);
+}
+
+.knowledge-task__heading,
+.knowledge-task__meta,
+.knowledge-task__progress {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.knowledge-task__heading > div {
+  display: grid;
+  min-width: 0;
+  gap: var(--space-1);
+}
+
+.knowledge-task__heading strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.knowledge-task__heading > div > span,
+.knowledge-task__meta {
+  color: var(--text-muted);
+  font-size: var(--font-caption);
+}
+
+.knowledge-task__status {
+  flex: 0 0 auto;
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  color: var(--text-secondary);
+  font-size: var(--font-caption);
+  font-weight: 650;
+}
+
+.knowledge-task__status--running {
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
+.knowledge-task__status--succeeded {
+  background: var(--success-subtle);
+  color: var(--success);
+}
+
+.knowledge-task__status--failed {
+  background: var(--danger-subtle);
+  color: var(--danger);
+}
+
+.knowledge-task__progress progress {
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--accent-solid);
+}
+
+.knowledge-task__progress progress::-webkit-progress-bar {
+  border-radius: 999px;
+  background: var(--surface-muted);
+}
+
+.knowledge-task__progress progress::-webkit-progress-value {
+  border-radius: 999px;
+  background: var(--accent-solid);
+}
+
+.knowledge-task__progress > span {
+  min-width: 36px;
+  color: var(--text-secondary);
+  font-size: var(--font-caption);
+  text-align: right;
+}
+
+.knowledge-task__meta time {
+  flex: 0 0 auto;
 }
 
 .knowledge-documents__section-heading {
@@ -6539,6 +6654,12 @@ details.settings-section > :not(summary) + :not(summary) {
   gap: var(--space-2);
 }
 
+.knowledge-graph__toolbar-error {
+  width: 100%;
+  color: var(--danger);
+  font-size: var(--font-caption);
+}
+
 .knowledge-graph__search {
   min-width: 220px;
   flex: 1 1 280px;
@@ -6751,16 +6872,16 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .knowledge-panel__limits {
   margin: 14px 0;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 10px;
 }
 
 .knowledge-panel__error {
   padding: 10px 12px;
-  border: 1px solid #ff4d4f;
+  border: 1px solid var(--danger-border);
   border-radius: 9px;
-  background: #fafafa;
-  color: #ff4d4f;
+  background: var(--danger-subtle);
+  color: var(--danger);
   font-size: 10px;
 }
 
@@ -6770,13 +6891,13 @@ details.settings-section > :not(summary) + :not(summary) {
   min-height: 260px;
   place-content: center;
   justify-items: center;
-  color: #8c8c8c;
+  color: var(--text-muted);
   gap: 8px;
   text-align: center;
 }
 
 .knowledge-panel__empty strong {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 13px;
 }
 
@@ -6789,7 +6910,7 @@ details.settings-section > :not(summary) + :not(summary) {
   display: flex;
   align-items: center;
   margin: 4px 0 12px;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 10px;
 }
 
@@ -6814,11 +6935,11 @@ details.settings-section > :not(summary) + :not(summary) {
   display: flex;
   align-items: center;
   padding: 13px 12px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 8px;
   margin-bottom: 8px;
-  background: #fff;
-  color: #1677ff;
+  background: var(--surface-raised);
+  color: var(--accent);
   gap: 10px;
 }
 
@@ -6832,14 +6953,14 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .knowledge-panel__document-info strong {
   overflow: hidden;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 11px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .knowledge-panel__document-info span {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
 }
 
@@ -6861,7 +6982,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .token-usage__header h3 {
   flex: 1;
   margin: 0;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 13px;
 }
 
@@ -6876,12 +6997,12 @@ details.settings-section > :not(summary) + :not(summary) {
   min-width: 0;
   padding: 8px 9px;
   border-radius: 8px;
-  background: #fafafa;
+  background: var(--surface-subtle);
 }
 
 .token-usage__stats dt {
   overflow: hidden;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: var(--font-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -6890,7 +7011,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .token-usage__stats dd {
   overflow: hidden;
   margin: 3px 0 0;
-  color: #1677ff;
+  color: var(--accent);
   font-size: 13px;
   font-weight: 700;
   text-overflow: ellipsis;
@@ -6911,14 +7032,14 @@ details.settings-section > :not(summary) + :not(summary) {
 .token-usage th,
 .token-usage td {
   padding: 7px 9px;
-  border-top: 1px solid #f0f0f0;
-  color: #595959;
+  border-top: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
   text-align: right;
   white-space: nowrap;
 }
 
 .token-usage thead th {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: var(--font-caption);
   font-weight: 600;
 }
@@ -6939,13 +7060,13 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .token-usage tbody th small {
   margin-top: 2px;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 8px;
   font-weight: 400;
 }
 
 .token-usage td.token-usage__empty {
-  color: #8c8c8c;
+  color: var(--text-muted);
   text-align: center;
 }
 
@@ -6958,19 +7079,19 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .activity-panel__stats div {
   padding: 12px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 10px;
-  background: #fff;
+  background: var(--surface-raised);
 }
 
 .activity-panel__stats dt {
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: var(--font-caption);
 }
 
 .activity-panel__stats dd {
   margin: 4px 0 0;
-  color: #1677ff;
+  color: var(--accent);
   font-size: 18px;
   font-weight: 700;
 }
@@ -7048,16 +7169,16 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .activity-item {
   padding: 13px 14px;
-  border: 1px solid #d9d9d9;
-  border-left: 3px solid #1677ff;
+  border: 1px solid var(--border-default);
+  border-left: 3px solid var(--accent);
   border-radius: 10px;
   margin-bottom: 8px;
-  background: #fff;
+  background: var(--surface-raised);
 }
 
 .activity-item--failed,
 .activity-item--denied {
-  border-left-color: #ff4d4f;
+  border-left-color: var(--danger);
 }
 
 .activity-item__header,
@@ -7071,15 +7192,15 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .activity-item__header time {
   margin-left: auto;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 8px;
 }
 
 .activity-item__kind {
   padding: 3px 6px;
   border-radius: 6px;
-  background: #e6f4ff;
-  color: #1677ff;
+  background: var(--accent-subtle);
+  color: var(--accent);
   font-size: var(--font-caption);
 }
 
@@ -7103,13 +7224,13 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .activity-item h3 {
   margin: 9px 0 4px;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 13px;
 }
 
 .activity-item p {
   margin: 0;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 11px;
   line-height: 1.55;
   white-space: pre-wrap;
@@ -7119,7 +7240,7 @@ details.settings-section > :not(summary) + :not(summary) {
   padding: 5px 0;
   margin-top: 7px;
   background: transparent;
-  color: #1677ff;
+  color: var(--accent);
   cursor: pointer;
   font-size: 9px;
   font-weight: 650;
@@ -7151,11 +7272,11 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .heartbeat-center__error {
   padding: 9px 11px;
-  border: 1px solid #ffccc7;
+  border: 1px solid var(--danger-border);
   border-radius: 8px;
   margin: 14px 0 0;
-  background: #fff2f0;
-  color: #cf1322;
+  background: var(--danger-subtle);
+  color: var(--danger);
   font-size: 10px;
 }
 
@@ -7173,9 +7294,9 @@ details.settings-section > :not(summary) + :not(summary) {
 .heartbeat-center__section {
   min-width: 0;
   padding: 16px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 12px;
-  background: #fff;
+  background: var(--surface-raised);
 }
 
 .heartbeat-center__section-heading {
@@ -7195,21 +7316,21 @@ details.settings-section > :not(summary) + :not(summary) {
   display: flex;
   align-items: center;
   margin: 2px 0 0;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: var(--font-section-title);
   gap: 6px;
 }
 
 .heartbeat-center__section-heading > span,
 .heartbeat-center__section-heading > time {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 10px;
 }
 
 .heartbeat-center__live {
   display: inline-flex;
   align-items: center;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
   font-weight: 650;
   gap: 6px;
@@ -7221,22 +7342,22 @@ details.settings-section > :not(summary) + :not(summary) {
   height: 8px;
   flex: 0 0 8px;
   border-radius: 50%;
-  background: #bfbfbf;
+  background: var(--text-muted);
 }
 
 .heartbeat-center__live--active {
-  color: #237804;
+  color: var(--success);
 }
 
 .heartbeat-center__live--active > span,
 .heartbeat-center__pulse-dot--active {
-  background: #52c41a;
-  box-shadow: 0 0 0 4px rgb(82 196 26 / 12%);
+  background: var(--success);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
 }
 
 .heartbeat-center__section-empty {
   margin: 0;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 10px;
   line-height: 1.6;
 }
@@ -7249,9 +7370,9 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .heartbeat-center__config-card {
   padding: 12px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--border-subtle);
   border-radius: 10px;
-  background: #fafafa;
+  background: var(--surface-subtle);
 }
 
 .heartbeat-center__config-card header {
@@ -7269,14 +7390,14 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .heartbeat-center__config-card header strong {
   overflow: hidden;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 11px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .heartbeat-center__config-card header small {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: var(--font-caption);
 }
 
@@ -7292,14 +7413,14 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .heartbeat-center__config-card dt {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: var(--font-caption);
 }
 
 .heartbeat-center__config-card dd {
   overflow: hidden;
   margin: 2px 0 0;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 10px;
   font-weight: 650;
   text-overflow: ellipsis;
@@ -7314,15 +7435,15 @@ details.settings-section > :not(summary) + :not(summary) {
 .heartbeat-center__config-card button {
   padding: 5px 8px;
   border-radius: 7px;
-  background: #fff;
-  color: #1677ff;
+  background: var(--surface-raised);
+  color: var(--accent);
   cursor: pointer;
   font-size: var(--font-caption);
   font-weight: 650;
 }
 
 .heartbeat-center__config-card button:hover {
-  background: #e6f4ff;
+  background: var(--accent-subtle);
 }
 
 .heartbeat-center__config-card button:disabled {
@@ -7343,33 +7464,33 @@ details.settings-section > :not(summary) + :not(summary) {
   min-height: 125px;
   flex-direction: column;
   padding: 13px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 11px;
-  background: #fff;
+  background: var(--surface-raised);
 }
 
 .heartbeat-center__metrics dt {
   display: flex;
   align-items: center;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 11px;
   font-weight: 650;
   gap: 6px;
 }
 
 .heartbeat-center__metrics dt svg {
-  color: #1677ff;
+  color: var(--accent);
 }
 
 .heartbeat-center__metrics dd {
   margin: 7px 0 2px;
-  color: #1677ff;
+  color: var(--accent);
   font-size: 21px;
   font-weight: 750;
 }
 
 .heartbeat-center__metrics small {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: var(--font-caption);
   line-height: 1.45;
 }
@@ -7379,14 +7500,14 @@ details.settings-section > :not(summary) + :not(summary) {
   margin-top: auto;
   overflow: hidden;
   border-radius: 999px;
-  background: #f0f0f0;
+  background: var(--surface-muted);
 }
 
 .heartbeat-center__meter > span {
   display: block;
   height: 100%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #1677ff, #69b1ff);
+  background: linear-gradient(90deg, var(--accent-solid), #55b5f6);
 }
 
 .heartbeat-center__metric-note {
@@ -7394,7 +7515,7 @@ details.settings-section > :not(summary) + :not(summary) {
   min-height: 23px;
   align-items: flex-end;
   margin-top: auto;
-  color: #1677ff;
+  color: var(--accent);
   font-size: 9px;
   font-weight: 650;
 }
@@ -7408,7 +7529,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .heartbeat-center__legend {
   display: flex;
   margin-bottom: 12px;
-  color: #8c8c8c;
+  color: var(--text-muted);
   font-size: 9px;
   gap: 12px;
 }
@@ -7423,7 +7544,7 @@ details.settings-section > :not(summary) + :not(summary) {
   width: 7px;
   height: 7px;
   border-radius: 2px;
-  background: #1677ff;
+  background: var(--accent-solid);
   content: "";
 }
 
@@ -7450,7 +7571,7 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .heartbeat-center__trend-row time,
 .heartbeat-center__trend-row small {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
 }
 
@@ -7462,7 +7583,7 @@ details.settings-section > :not(summary) + :not(summary) {
   height: 9px;
   overflow: hidden;
   border-radius: 999px;
-  background: #f5f5f5;
+  background: var(--surface-muted);
 }
 
 .heartbeat-center__trend-total {
@@ -7474,7 +7595,7 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .heartbeat-center__trend-insight {
-  background: #1677ff;
+  background: var(--accent-solid);
 }
 
 .heartbeat-center__trend-memory {
@@ -7489,7 +7610,7 @@ details.settings-section > :not(summary) + :not(summary) {
   display: -webkit-box;
   overflow: hidden;
   margin: 0 0 10px;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 10px;
   line-height: 1.7;
   -webkit-box-orient: vertical;
@@ -7500,7 +7621,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .heartbeat-center__timeline ul {
   padding: 0;
   margin: 0 0 12px;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
   line-height: 1.6;
   list-style: none;
@@ -7521,7 +7642,7 @@ details.settings-section > :not(summary) + :not(summary) {
   width: 4px;
   height: 4px;
   border-radius: 50%;
-  background: #1677ff;
+  background: var(--accent-solid);
   content: "";
 }
 
@@ -7540,9 +7661,9 @@ details.settings-section > :not(summary) + :not(summary) {
 
 .heartbeat-center__suggestion {
   padding: 12px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--border-subtle);
   border-radius: 10px;
-  background: #fafafa;
+  background: var(--surface-subtle);
 }
 
 .heartbeat-center__suggestion header {
@@ -7555,22 +7676,22 @@ details.settings-section > :not(summary) + :not(summary) {
 .heartbeat-center__suggestion header span {
   padding: 3px 6px;
   border-radius: 6px;
-  background: #e6f4ff;
-  color: #1677ff;
+  background: var(--accent-subtle);
+  color: var(--accent);
   font-size: 9px;
   font-weight: 650;
 }
 
 .heartbeat-center__suggestion header small {
   margin-left: auto;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
 }
 
 .heartbeat-center__suggestion > strong {
   display: block;
   margin-bottom: 5px;
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 11px;
 }
 
@@ -7578,7 +7699,7 @@ details.settings-section > :not(summary) + :not(summary) {
   display: -webkit-box;
   overflow: hidden;
   margin: 0 0 10px;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 10px;
   line-height: 1.65;
   -webkit-box-orient: vertical;
@@ -7602,7 +7723,7 @@ details.settings-section > :not(summary) + :not(summary) {
   bottom: 5px;
   left: 3px;
   width: 1px;
-  background: #d9d9d9;
+  background: var(--border-default);
   content: "";
 }
 
@@ -7617,10 +7738,10 @@ details.settings-section > :not(summary) + :not(summary) {
   left: -14px;
   width: 8px;
   height: 8px;
-  border: 2px solid #fff;
+  border: 2px solid var(--surface-raised);
   border-radius: 50%;
-  background: #1677ff;
-  box-shadow: 0 0 0 1px #91caff;
+  background: var(--accent-solid);
+  box-shadow: 0 0 0 1px var(--accent-selected);
 }
 
 .heartbeat-center__timeline header {
@@ -7632,13 +7753,13 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .heartbeat-center__timeline time {
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 10px;
   font-weight: 650;
 }
 
 .heartbeat-center__timeline header small {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
 }
 
@@ -7646,7 +7767,7 @@ details.settings-section > :not(summary) + :not(summary) {
   display: -webkit-box;
   overflow: hidden;
   margin: 0 0 5px;
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 10px;
   line-height: 1.65;
   -webkit-box-orient: vertical;
@@ -7662,7 +7783,7 @@ details.settings-section > :not(summary) + :not(summary) {
 .heartbeat-center__link-button {
   padding: 3px 0;
   background: transparent;
-  color: #1677ff;
+  color: var(--accent);
   cursor: pointer;
   font-size: 9px;
   font-weight: 650;
@@ -7681,19 +7802,19 @@ details.settings-section > :not(summary) + :not(summary) {
   display: flex;
   align-items: flex-start;
   padding: 10px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--border-subtle);
   border-radius: 9px;
-  background: #fafafa;
-  color: #8c8c8c;
+  background: var(--surface-subtle);
+  color: var(--text-muted);
   gap: 8px;
 }
 
 .heartbeat-center__run--completed {
-  color: #389e0d;
+  color: var(--success);
 }
 
 .heartbeat-center__run--failed {
-  color: #cf1322;
+  color: var(--danger);
 }
 
 .heartbeat-center__run > span {
@@ -7704,18 +7825,18 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .heartbeat-center__run strong {
-  color: #1f1f1f;
+  color: var(--text-primary);
   font-size: 10px;
 }
 
 .heartbeat-center__run small {
-  color: #595959;
+  color: var(--text-secondary);
   font-size: 9px;
 }
 
 .heartbeat-center__run em {
   margin-top: 3px;
-  color: #cf1322;
+  color: var(--danger);
   font-size: 9px;
   font-style: normal;
   line-height: 1.5;
@@ -7731,9 +7852,9 @@ details.settings-section > :not(summary) + :not(summary) {
 .heartbeat-center__plans .heartbeat-settings {
   max-width: none;
   padding: 18px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 12px;
-  background: #fff;
+  background: var(--surface-raised);
 }
 
 .appearance-settings {
@@ -7750,21 +7871,21 @@ details.settings-section > :not(summary) + :not(summary) {
   display: flex;
   min-width: 0;
   padding: 10px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-default);
   border-radius: 10px;
-  background: #fff;
+  background: var(--surface-raised);
   cursor: pointer;
   flex-direction: column;
   gap: 5px;
 }
 
 .appearance-options label:has(input:checked) {
-  border-color: #1677ff;
-  box-shadow: 0 0 0 2px rgb(22 119 255 / 12%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
 }
 
 .appearance-options label:has(input:focus-visible) {
-  outline: 2px solid #1677ff;
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -7780,9 +7901,9 @@ details.settings-section > :not(summary) + :not(summary) {
   display: grid;
   height: 76px;
   padding: 9px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #cedce7;
   border-radius: 8px;
-  background: #f5f5f5;
+  background: #e8f0f5;
   gap: 5px;
   grid-template-columns: 30% 1fr;
   grid-template-rows: 12px 1fr;
@@ -7799,83 +7920,107 @@ details.settings-section > :not(summary) + :not(summary) {
 }
 
 .appearance-options__preview i:nth-child(2) {
+  background: #f4f8fb;
   grid-row: 2;
 }
 
 .appearance-options__preview i:nth-child(3) {
-  background: #e6f4ff;
+  background: #e8f4ff;
   grid-column: 2;
   grid-row: 2;
 }
 
 .appearance-options__preview--dark {
-  border-color: #344258;
-  background: #0b111b;
+  border-color: #29445a;
+  background: #07131f;
 }
 
 .appearance-options__preview--dark i {
-  background: #1c2738;
+  background: #0d1d2c;
 }
 
 .appearance-options__preview--dark i:nth-child(3) {
-  background: #15345f;
+  background: #123b5b;
 }
 
 .appearance-options__preview--system {
-  background: linear-gradient(90deg, #f5f5f5 0 50%, #0b111b 50% 100%);
+  background: linear-gradient(90deg, #e8f0f5 0 50%, #07131f 50% 100%);
 }
 
 .appearance-options__preview--system i {
-  background: linear-gradient(90deg, #fff 0 50%, #1c2738 50% 100%);
+  background: linear-gradient(90deg, #fff 0 50%, #0d1d2c 50% 100%);
 }
 
 .appearance-options__preview--system i:nth-child(3) {
-  background: linear-gradient(90deg, #e6f4ff 0 50%, #15345f 50% 100%);
+  background: linear-gradient(90deg, #e8f4ff 0 50%, #123b5b 50% 100%);
 }
 
 :root[data-theme='dark'] {
-  color: #edf4ff;
-  background: #0b111b;
-  --surface-canvas: #0b111b;
-  --surface-raised: #111827;
-  --surface-subtle: #172033;
-  --surface-muted: #1f2a3d;
-  --text-primary: #edf4ff;
-  --text-secondary: #aebbd0;
-  --text-muted: #9aa7ba;
+  color: #edf7ff;
+  background: #07131f;
+  --surface-canvas: #07131f;
+  --surface-raised: #0d1d2c;
+  --surface-subtle: #12283a;
+  --surface-muted: #1a3448;
+  --text-primary: #edf7ff;
+  --text-secondary: #b5c6d5;
+  --text-muted: #8fa6b9;
   --text-on-accent: #fff;
-  --border-default: #344258;
-  --border-control: #66758f;
-  --border-subtle: #293548;
-  --accent: #8cc2ff;
-  --accent-solid: #2b69c9;
-  --accent-solid-hover: #365f9f;
-  --accent-hover: #b3d7ff;
-  --accent-selected: #245fa8;
-  --accent-subtle: #15345f;
-  --danger: #ffaaa7;
-  --danger-solid: #b93a43;
-  --danger-strong: #ff9c99;
-  --danger-border: #703b3d;
-  --danger-subtle: #351d22;
-  --success: #a1e887;
-  --success-subtle: #18351d;
-  --warning: #f3c969;
-  --overlay-backdrop: rgb(0 0 0 / 62%);
-  --shadow-card: 0 2px 8px rgb(0 0 0 / 24%);
-  --shadow-dialog: 0 12px 30px rgb(0 0 0 / 36%);
+  --border-default: #29445a;
+  --border-control: #688197;
+  --border-subtle: #20384b;
+  --accent: #72c5ff;
+  --accent-solid: #1469b5;
+  --accent-solid-hover: #1c7dce;
+  --accent-hover: #9bd7ff;
+  --accent-selected: #28668f;
+  --accent-subtle: #123b5b;
+  --danger: #ff9faa;
+  --danger-solid: #ad3441;
+  --danger-strong: #ffb0b9;
+  --danger-border: #71404a;
+  --danger-subtle: #421f2a;
+  --success: #74dec8;
+  --success-subtle: #103a34;
+  --warning: #f0c477;
+  --warning-border: #735c31;
+  --warning-subtle: #3b2e18;
+  --code-surface: #040a11;
+  --code-text: #edf7ff;
+  --graph-node-1: #1e3a5f;
+  --graph-node-1-border: #60a5fa;
+  --graph-node-2: #134e4a;
+  --graph-node-2-border: #5eead4;
+  --graph-node-3: #3b2765;
+  --graph-node-3-border: #c4b5fd;
+  --graph-node-4: #4a3517;
+  --graph-node-4-border: #fbbf24;
+  --graph-node-5: #4c1d2b;
+  --graph-node-5-border: #fda4af;
+  --graph-node-6: #164e63;
+  --graph-node-6-border: #67e8f9;
+  --graph-node-7: #183d25;
+  --graph-node-7-border: #86efac;
+  --graph-node-8: #23384a;
+  --graph-node-8-border: #cbd5e1;
+  --overlay-backdrop: rgb(0 5 12 / 68%);
+  --shadow-card: 0 8px 24px rgb(0 4 10 / 24%);
+  --shadow-dialog: 0 18px 48px rgb(0 4 10 / 48%);
 }
 
 :root[data-theme='dark'] .app-shell {
-  background: #0b111b;
-  color: #edf4ff;
+  background: var(--surface-canvas);
+  color: var(--text-primary);
 }
 
 :root[data-theme='dark'] :where(
   .settings-page,
-  .composer-wrap
+  .workspace,
+  .chat,
+  .composer-wrap,
+  .workspace-panel-scroll
 ) {
-  background: #0b111b;
+  background: var(--surface-canvas);
 }
 
 :root[data-theme='dark'] :where(
@@ -7897,8 +8042,15 @@ details.settings-section > :not(summary) + :not(summary) {
   .quick-actions button,
   .secondary-button
 ) {
-  border-color: #293548;
-  background: #111827;
+  border-color: var(--border-subtle);
+  background: var(--surface-raised);
+}
+
+:root[data-theme='dark'] :where(
+  .sidebar,
+  .topbar
+) {
+  background: var(--surface-subtle);
 }
 
 :root[data-theme='dark'] :where(
@@ -7910,9 +8062,9 @@ details.settings-section > :not(summary) + :not(summary) {
   .project-create-card,
   .workspace-panel-scroll
 ) :where(input, textarea, select) {
-  border-color: #344258;
-  background: #172033;
-  color: #edf4ff;
+  border-color: var(--border-default);
+  background: var(--surface-subtle);
+  color: var(--text-primary);
 }
 
 :root[data-theme='dark'] :where(
@@ -7923,7 +8075,7 @@ details.settings-section > :not(summary) + :not(summary) {
   .settings-panel,
   .project-create-card
 ) :where(input, textarea)::placeholder {
-  color: #718096;
+  color: var(--text-muted);
 }
 
 :root[data-theme='dark'] :where(
@@ -7948,8 +8100,8 @@ details.settings-section > :not(summary) + :not(summary) {
   .markdown-content pre,
   .markdown-content :not(pre) > code
 ) {
-  border-color: #293548;
-  background: #172033;
+  border-color: var(--border-subtle);
+  background: var(--surface-subtle);
 }
 
 :root[data-theme='dark'] :where(
@@ -7973,7 +8125,7 @@ details.settings-section > :not(summary) + :not(summary) {
   .heartbeat-center__suggestion,
   .heartbeat-center__run
 ) {
-  border-color: #293548;
+  border-color: var(--border-subtle);
 }
 
 :root[data-theme='dark'] :where(
@@ -7994,11 +8146,11 @@ details.settings-section > :not(summary) + :not(summary) {
   .heartbeat-center__latest > p,
   .heartbeat-center__run strong
 ) {
-  color: #edf4ff;
+  color: var(--text-primary);
 }
 
 :root[data-theme='dark'] .app-shell strong {
-  color: #edf4ff;
+  color: var(--text-primary);
 }
 
 :root[data-theme='dark'] :where(
@@ -8025,7 +8177,7 @@ details.settings-section > :not(summary) + :not(summary) {
   .heartbeat-center__suggestion > p,
   .heartbeat-center__run small
 ) {
-  color: #aebbd0;
+  color: var(--text-secondary);
 }
 
 :root[data-theme='dark'] :where(
@@ -8051,7 +8203,7 @@ details.settings-section > :not(summary) + :not(summary) {
   .heartbeat-center__live,
   .heartbeat-center__legend
 ) {
-  color: #8290a6;
+  color: var(--text-muted);
 }
 
 :root[data-theme='dark'] :where(
@@ -8064,55 +8216,60 @@ details.settings-section > :not(summary) + :not(summary) {
   .secondary-button:hover,
   .settings-tabs button[aria-selected='true']
 ) {
-  background: #1f2a3d;
+  background: var(--surface-muted);
 }
 
 :root[data-theme='dark'] .settings-page
   .settings-tabs
   button[aria-selected='true'] {
-  background: #1f2a3d;
-  color: #69adff;
+  background: var(--surface-muted);
+  color: var(--accent);
 }
 
 :root[data-theme='dark'] :where(
   .nav-item--active,
-  .brand__mark,
-  .runtime-capability-badge,
-  .model-capability-badge
+  .brand__mark
 ) {
-  border-color: #245fa8;
-  background: #15345f;
-  color: #69adff;
+  border-color: var(--accent-selected);
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 :root[data-theme='dark'] :where(
   .settings-warning,
   .approval-card,
-  .heartbeat-center__error
+  .runtime-capability-badge,
+  .model-capability-badge
 ) {
-  border-color: #70511d;
-  background: #302511;
-  color: #f3c969;
+  border-color: var(--warning-border);
+  background: var(--warning-subtle);
+  color: var(--warning);
+}
+
+:root[data-theme='dark'] .heartbeat-center__error {
+  border-color: var(--danger-border);
+  background: var(--danger-subtle);
+  color: var(--danger);
 }
 
 :root[data-theme='dark'] .markdown-content blockquote {
-  border-left-color: #4c9aff;
-  color: #aebbd0;
+  border-left-color: var(--accent);
+  color: var(--text-secondary);
 }
 
 :root[data-theme='dark'] .message--user .message__content {
-  border-color: #245fa8;
-  background: #15345f;
-  color: #edf4ff;
+  border-color: var(--accent-solid);
+  background: var(--accent-solid);
+  color: var(--text-on-accent);
 }
 
 :root[data-theme='dark'] .heartbeat-center__metrics small {
-  color: #aebbd0;
+  color: var(--text-secondary);
 }
 
 :root[data-theme='dark'] .assistant-sidebar__tab--active {
-  background: #15345f;
-  color: #69adff;
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 :root[data-theme='dark'] :where(
@@ -8120,21 +8277,21 @@ details.settings-section > :not(summary) + :not(summary) {
   .quick-actions strong,
   .user-card__copy strong
 ) {
-  color: #edf4ff;
+  color: var(--text-primary);
 }
 
 :root[data-theme='dark'] .markdown-content :where(th, td) {
-  border-color: #344258;
+  border-color: var(--border-default);
 }
 
 :root[data-theme='dark'] .appearance-options label {
-  border-color: #344258;
-  background: #172033;
+  border-color: var(--border-default);
+  background: var(--surface-subtle);
 }
 
 :root[data-theme='dark'] .appearance-options label:has(input:checked) {
-  border-color: #4c9aff;
-  box-shadow: 0 0 0 2px rgb(76 154 255 / 20%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
 @container heartbeat-settings (max-width: 680px) {
diff --git a/src/shared/contracts.ts b/src/shared/contracts.ts
index 1addf24..a826fc2 100644
--- a/src/shared/contracts.ts
+++ b/src/shared/contracts.ts
@@ -800,8 +800,10 @@ export const knowledgeUrlImportSchema = z
 export const knowledgeUpdateLibrarySchema = z
   .object({
     libraryId: knowledgeIdSchema,
-    graphEnabled: z.boolean(),
-    graphStrategy: z.enum(['rules', 'model', 'hybrid', 'ask'])
+    name: z.string().trim().min(1).max(120).optional(),
+    description: z.string().trim().max(1_000).optional(),
+    graphEnabled: z.boolean().optional(),
+    graphStrategy: z.enum(['rules', 'model', 'hybrid', 'ask']).optional()
   })
   .strict()
 export const knowledgeEntityUpdateSchema = z
@@ -856,6 +858,21 @@ export type KnowledgeDocumentItem = {
   error?: string
 }
 
+export type KnowledgeTaskItem = {
+  id: string
+  libraryId: string
+  sourceId?: string
+  documentId?: string
+  documentName: string
+  kind: 'parsing' | 'embedding' | 'graph'
+  status: 'queued' | 'running' | 'succeeded' | 'failed' | 'skipped'
+  progress: number
+  message?: string
+  createdAt: string
+  startedAt?: string
+  completedAt?: string
+}
+
 export type KnowledgeGraphNode = {
   id: string
   label: string
@@ -892,6 +909,7 @@ export type KnowledgeSnapshot = {
   graphNodes: KnowledgeGraphNode[]
   graphRelations: KnowledgeGraphRelation[]
   evidence: KnowledgeEvidence[]
+  tasks?: KnowledgeTaskItem[]
 }
 
 export type KnowledgeSearchReference = {
@@ -1185,11 +1203,14 @@ export type DesktopApi = {
     updateLibrary: (
       libraryId: string,
       update: {
-        graphEnabled: boolean
-        graphStrategy: 'rules' | 'model' | 'hybrid' | 'ask'
+        name?: string
+        description?: string
+        graphEnabled?: boolean
+        graphStrategy?: 'rules' | 'model' | 'hybrid' | 'ask'
       }
     ) => Promise<void>
     deleteLibrary: (libraryId: string) => Promise<void>
+    reextractGraph: (libraryId: string) => Promise<void>
     selectFiles: (
       libraryId: string,
       graphStrategy?: 'rules' | 'model' | 'hybrid'
diff --git a/src/shared/ipc-channels.ts b/src/shared/ipc-channels.ts
index a993ace..3882cac 100644
--- a/src/shared/ipc-channels.ts
+++ b/src/shared/ipc-channels.ts
@@ -133,6 +133,7 @@ export const ipcChannels = {
   knowledgeCreateLibrary: 'knowledge:library:create',
   knowledgeUpdateLibrary: 'knowledge:library:update',
   knowledgeDeleteLibrary: 'knowledge:library:delete',
+  knowledgeReextractGraph: 'knowledge:graph:reextract',
   knowledgeSelectFiles: 'knowledge:source:select-files',
   knowledgeSelectDirectory: 'knowledge:source:select-directory',
   knowledgeImportPaths: 'knowledge:source:import-paths',