P3 配置 Implementation Plan

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan.

Goal: 重构 WebUI 配置页（SettingsPage），增加实时 JSON 校验、配置大纲、重载状态卡、保存并热重载、放弃修改、未保存提示。

Architecture: 纯前端重构。所有后端端点已存在（GET/PUT /api/config、GET/PUT /api/profiles/{name}、POST /api/config/reload、GET /api/config/reload/status）。SettingsPage.svelte 重写为带配置大纲侧栏 + 重载状态卡 + 三操作按钮的布局。

Tech Stack: Svelte 5（runes）、bits-ui Tabs。

关键设计决策：

布局：左侧编辑区（现有 editor-card）+ 右侧大纲/状态侧栏（仅 config.json 标签显示）。
JSON 校验：$derived 实时 parse content，显示错误信息或有效状态。
配置大纲：从 parsed config 提取顶层 key 列表，标注含密钥的 section（providers）和需重启的字段（gateway.host/port/workspace）。
重载状态卡：onMount 起每 3s 轮询 GET /api/config/reload/status，显示 generation、phase badge、last_error。
操作按钮：保存（PUT /api/config）、保存并热重载（PUT 后 POST /api/config/reload）、放弃修改（重新 load）。
未保存提示：比较当前 content 与上次加载的 content，不同则显示修改标记。
USER.md / AGENTS.md 标签：保持简单 textarea + 保存，无大纲/重载。

验证约定： cd webui && npm run check && npm run build + cargo build（验证 OUT_DIR 嵌入）。

Task 1: SettingsPage 重构

Files:

Modify: webui/src/pages/SettingsPage.svelte
Step 1: 重写 SettingsPage.svelte

布局：

┌─────────────────────────────────────────────────────┐
│ [config.json] [USER.md] [AGENTS.md]    [重载状态卡] │
├───────────────────────────────────┬─────────────────┤
│ editor-head: title + path         │  配置大纲       │
│ + 未保存标记                      │  (仅 config)    │
│ ─────────────────────────────     │                 │
│ textarea (JSON/Markdown)          │  gateway ⚠重启  │
│                                   │  providers 🔑   │
│                                   │  agent          │
│                                   │  channels       │
│                                   │  memory         │
│                                   │  scheduler      │
│ ─────────────────────────────     │                 │
│ [保存] [保存并热重载] [放弃修改]  │                 │
│ notice / validation error         │                 │
└───────────────────────────────────┴─────────────────┘

功能：

JSON 实时校验（config 标签）：parse 失败显示红色错误行
未保存修改：dirty 标记（对比 original content）
保存：PUT /api/config 或 PUT /api/profiles/{name}
保存并热重载：保存成功后 POST /api/config/reload，显示结果
放弃修改：恢复为上次加载的 content
重载状态卡：generation、phase（badge 着色）、last_error
配置大纲：顶层 key 列表 + 标注
Step 2: 验证 — cd webui && npm run check && npm run build
Step 3: Commit — git add webui/src/pages/SettingsPage.svelte && git commit -m "feat(webui): enhanced settings page with outline, reload status, hot reload"

Task 2: 收尾

Step 1: 全量验证 — cargo build + cd webui && npm run check && npm run build
Step 2: 版本号 — 1.6.0 → 1.7.0
Step 3: Commit — git add Cargo.toml webui/package.json && git commit -m "chore(release): P3 configuration"

4.2 KiB Raw Blame History Unescape Escape

P3 配置 Implementation Plan

Task 1: SettingsPage 重构

Task 2: 收尾

4.2 KiB

Raw Blame History