Compare commits

...
Author SHA1 Message Date
weichen 7e123e5688 Record cardflow-r1 verification: 9/9 dual-state walkthrough plus per-layer evidence
Why: CF2 验收剧本(双态零页面走查)完成;证据入任务主记录。
Evidence: 无头 Chromium 9/9 通过(过程折叠不回退、锚点/展开全文/收件箱卡/D32 定位);各层测试与组合构建见记录。
Impact: 文档。
Refs: Dev 任务卡 feature/cardflow-r1。
2026-09-30 16:39:47 +00:00
weichen 4a55832e9d Add cardflow-and-process-split proposal (D39-D43) and update guides
Why: 卡流机制与中栏过程/回复分离的用户五项裁定(2026-09-30)入库:显式路由、卡片权威+引用回填、默认关、CF0 先行、完备性剧本修订;Cursor 式过程折叠决策(D41)。
Evidence: 提案 docs/proposals/2026-09-30-cardflow-and-process-split.md;usage.md 增过程折叠/长回复折叠/长结果进卡片三节;plugin-development.md 增通道外溢验收项(06 §2.7)。
Impact: 文档;决策编号 D39–D43(D34–D38 为认证提案预留段)。
Refs: Dev 任务卡 feature/cardflow-r1。
2026-09-30 16:39:47 +00:00
weichen 1f3e7ab441 Merge pull request 'Record the user adjudication of the preview decision points' (#25) from feature/file-preview-adjudicate into main 2026-09-30 16:15:59 +00:00
weichen 07a6acfc21 Ignore local mimosa hook status artifacts 2026-09-30 16:15:59 +00:00
weichen 4f3b22d601 Record the user adjudication of the preview decision points
Why: D1-D5 were settled by the user (deps in, full-fidelity pptx, OG
card plus optional embed, dual placement); the proposal status must
reflect that before implementation starts.

Evidence: decision section rewritten with the settled choices and the
accepted trade-off on D2 (fall back to outline level with evidence only
if no Vite-compatible renderer builds).

Impact: documentation only.

Refs: task feature/file-preview-caps.
2026-09-30 16:15:41 +00:00
weichen f0361f3856 Merge pull request 'Record Gitea access facts in AGENTS.md' (#24) from feature/gitea-access-facts into main 2026-09-30 16:08:29 +00:00
weichen baf8f22aa7 Record Gitea access facts in AGENTS.md
Why: agents rediscovered Gitea hosts and credential locations from
scratch each session, and the retired git-panel host kept failing with
TLS broken-pipe errors before the right host was recalled.

Evidence: curl git-home...:30319/api/v1/version with token from
~/.secrets/gitea -> {"version":"1.27.3"}; ssh -p 31411 git@git-ssh...
(BatchMode) -> "Hi there, weichen!" with key ~/.ssh/home_gitea (ED25519,
SHA256:GYXaOXIMeloQ1fKSfdJ/ndgPQzs/Ix7Hk62ekfkfQ20). Same section already
merged in Agent-System-Dev (PR #73).

Impact: AGENTS.md only; records hosts and credential locations, no
secret values (baseline hard boundary 2).

Refs: Agent-System-Dev PR #73
2026-09-30 16:06:17 +00:00
weichen ffb2aa7cc4 Merge pull request 'Propose file previews plus reserved delete and fs-tool capabilities' (#23) from feature/file-preview-proposal into main 2026-09-30 16:03:25 +00:00
weichen f179de8847 Propose file previews plus reserved delete and fs-tool capabilities
Why: the user asked for a reviewable plan covering (a) previews for
office/image/markdown/code files and web links, docked in the right rail
or the system overlay, (b) keeping artifact deletion as a capability with
no UI entry, and (c) implementing fs tools without enabling them.

Evidence: the proposal assesses each idea against current architecture,
defines the FilePreview capability component with a format matrix and
lazy-loaded office parsers, the SSRF-guarded url-preview endpoint, the
gated sandboxed fs tool family, four delivery phases with acceptance
criteria, and decision points D1-D5 for the user.

Impact: documentation only; implementation follows in a separate task
after D1-D5 are settled.

Refs: task feature/file-preview-proposal; extends 2026-09-30
ui-redesign-and-auth.md section 9.
2026-09-30 16:03:13 +00:00
weichen 5882448237 Merge pull request 'Record the chat-order and artifact-files fix round in the proposal' (#22) from feature/chat-order-artifact-files into main 2026-09-30 15:23:56 +00:00
weichen 8e2657c824 Record the chat-order and artifact-files fix round in the proposal
Why: the delivery log for the 2026-09-30 afternoon fixes (part-order
fidelity, download channel, artifact file management, settings cascade)
belongs with the redesign proposal it extends, including the two durable
conventions it produced.

Evidence: adds section 9 with root causes, the render-order-equals-
storage-order rule, the compound-selector lesson for @ui shells on host
generic classes, and the full verification record (vitest/go suites plus
the 12/12 headless run).

Impact: future UI work inherits both conventions without rediscovering
the failure modes.

Refs: task feature/chat-order-artifact-files.
2026-09-30 15:22:33 +00:00
weichen bf0988b2b2 Merge pull request 'Propose layered cross-session reading with on-demand peer tools' (#21) from feature/cross-session-reading into main 2026-09-30 14:58:35 +00:00
weichen 7abfae1f6b Propose layered cross-session reading with on-demand peer tools
Why: parallel conversations in one project cannot see each other's
transcripts, which already caused duplicate delivery of the same
requirement (records/2026-09-30-lesson-parallel-session-duplication.md);
artifacts/knowledge are already project-shared, so transcripts are the
only missing channel.

Evidence: permission formula and gate matrix designed fail-closed
(project switch default off; per-conversation outbound/inbound flags
default open/shared); tool design lands the "conversation history
search" builtin planned in skeleton design 4.8.

Impact: documents only; implementation follows in core/backend/frontend
under Dev task feature/cross-session-reading.

Refs: proposals/2026-09-29-system-skeleton-design-and-plan.md 4.8/4.9;
records/2026-09-30-lesson-parallel-session-duplication.md.
2026-09-30 14:58:15 +00:00
weichen 2c238af241 Merge pull request 'Record the UI capability platform delivery' (#20) from feature/ui-capability-platform into main 2026-09-30 14:23:19 +00:00
weichen 7052297545 Record the UI capability platform delivery (icons/avatars/settings)
Why: proposal must record the 2026-09-30 decision (avatars, cards,
settings as base capabilities plugins reuse) and where it landed.

Evidence: feature/ui-capability-platform across core (avatar
vocabulary), ui (shared components + full vocabulary renderers),
frontend (consumption); 35+ tests and headless walk green.

Impact: status line only.
2026-09-30 14:22:37 +00:00
weichen fb72859505 Merge pull request 'Record admin-issued accounts decision and R2 delivery' (#19) from feature/auth-admin-accounts into main 2026-09-30 11:17:06 +00:00
weichen 924c3033a9 Record the admin-issued accounts decision and R2 delivery
Why: the user replaced the stage-2 email self-registration sketch with
admin-issued accounts (2026-09-30): no self registration, admin sets
initial passwords, first login after creation or reset forces a change.

Evidence: R2 landed on feature/auth-admin-accounts (migration v10,
auth/session APIs, CLI user subcommands, login page + forced change
gate + admin user management); store/e2e tests and a full headless
journey on the real binary are green (see that task's PR).

Impact: proposal status line only; section 5.1 sketch superseded.
2026-09-30 11:15:41 +00:00
weichen 9d4738142b Merge pull request 'feature/tavily-search-tool' (#18) from feature/tavily-search-tool into main 2026-09-30 11:00:28 +00:00
weichen b4546fee1b Move WebSearch to ported in the catalog disposition table
Why: the backend now registers tavily_search/web_search via
Agent-Native's TavilyProvider, so the guide's not-ported reason no
longer holds.

Evidence: backend PR records the registration and runtime checks.

Impact: table row updated, library count 44 -> 46.

Refs: feature/tavily-search-tool task card.
2026-09-30 11:00:11 +00:00
weichen 1774cfeefa Merge pull request 'Record option A acceptance and R1 execution (UI proposal)' (#17) from feature/task-sidebar-r1 into main 2026-09-30 10:45:59 +00:00
weichen 151925b9ee Record option A acceptance and R1 execution in the UI proposal
Why: the user picked option A (task-centric) after reviewing the demos;
the proposal status must reflect the decision and where R1 landed.

Evidence: R1 delivered on feature/task-sidebar-r1 across core/backend/
frontend (contract flags, migration v8, task list APIs, TaskSidebar);
headless walk and test suites green there.

Impact: status line only; no design content change.
2026-09-30 10:45:57 +00:00
weichen ea4fd721ea Merge pull request 'feature/prompt-catalog-coverage' (#16) from feature/prompt-catalog-coverage into main 2026-09-30 10:45:26 +00:00
weichen fd4863899a Add the porting criterion and full catalog disposition table
Why: deciding what enters the library from an external prompt catalog
needs a stated rule (carrier mechanism or future slot) and an auditable
per-item disposition, otherwise coverage drifts by reviewer taste.

Evidence: table maps every Claude Code catalog entry to a library module
or an explicit not-ported reason.

Impact: guide gains section 9; no code change.

Refs: feature/prompt-catalog-coverage task card.
2026-09-30 10:45:15 +00:00
weichen 761f8bec4e Merge pull request 'feature/prompt-library' (#15) from feature/prompt-library into main 2026-09-30 10:36:54 +00:00
weichen 02198f1ceb Add the prompt library design and extension guide
Why: the prompt system's design rationale (layering, the eight module
patterns, trigger semantics, override chain) needs to live with the
docs so future prompt work follows it instead of re-deriving it.

Evidence: guide content distilled from the implemented library and the
Claude prompt catalog analysis recorded in the task card.

Impact: new docs/guides/prompt-library-design.md; no code change.

Refs: feature/prompt-library task card.
2026-09-30 10:36:40 +00:00
weichen ab14f62534 Merge pull request '界面重构与多用户认证设计提案 + HTML demo(方案 A/B/C + 认证)' (#14) from feature/ui-redesign-proposals into main 2026-09-30 10:02:04 +00:00
weichen e601b253bc Add UI redesign and auth design proposal with HTML demos
Why: current UI scatters creation entries (project + at sidebar top-left,
new session at bottom-left), has no user/tenant surfaces, and the project
tree forces per-project navigation; the system targets multi-user
multi-tenant operation.

Evidence:
- Studied zai-org/ZCode desktop layout (WorkspaceShellLayout, WorkspaceSidebar,
  DESIGN.md) and mapped transferable patterns (single New-Task entry,
  organize-by views, sidebar account footer) with repo file citations.
- Three layout proposals (task-centric / activity rail / project portal) with
  comparison table and recommendation A; auth stage-2 design (orgs,
  memberships, server sessions) with SSE cookie upgrade removing ?key=.
- Five static demos (index + A/B/C + auth) verified headless: DOM layout
  assertions (column widths, view switching, screen switching), clipping and
  contrast QA clean, zero console errors, light/dark themes render.

Impact: documents only; no code change. Demos double as the R4 design-token
target palette. Implementation proceeds only after direction is approved.

Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md (D25-D33),
docs/proposals/2026-09-30-dual-tier-storage-and-multitenancy.md (D17-D24)
2026-09-30 09:59:40 +00:00
weichen 8b63607211 Merge pull request 'Update the usage guide for inbox, command bus, and workspaces; record T5 verification' (#13) from feature/polish-r1 into main 2026-09-30 08:17:57 +00:00
weichen 3a773139d0 Record T5 polish verification with the zero-page walkthrough
Why: T5 acceptance evidence - the D31 conversation-completeness walkthrough on a fresh instance plus tidy/badge and guide updates.
Evidence: walkthrough 12/12 PASS (fresh binary, empty data dir, conversation-only driving end to end); ui StatusLamp dual-encoding assertions; frontend 9/9 + build.
Impact: docs/records only.
Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T5; task card feature/polish-r1
2026-09-30 08:17:53 +00:00
weichen 7da2b192d2 Update the usage guide for inbox, command bus, and workspaces; record T5 verification
Why: T2-T4 changed the interaction foundation (pure-inbox rail, four-entrance command bus, overlay workspaces) and the guide still described the classic tabs; T5 acceptance also requires the verification record with the zero-page walkthrough.
Evidence: zero-page walkthrough 12/12 PASS on a fresh real binary (fresh data dir: empty instance -> project/conversation -> slash commands -> #upload card lifecycle -> card action receipts -> tidy -> HITL block+resolve -> button-entrance dispatch -> plugin workspace declaration -> artifacts -> four-entrance audit); StatusLamp shape+color dual encoding asserted by ui suite; combo make test at pinned heads.
Impact: usage guide sections 4.2-4.7/5/6.2/7 rewritten; new T5 record; no code change.
Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T5; task card feature/polish-r1
2026-09-30 08:17:26 +00:00
weichen d5864d1eb9 Merge pull request 'Record T4 workspaces verification results' (#12) from feature/t4-workspaces-verification into main 2026-09-30 08:09:08 +00:00
weichen b7a6bd9d5e Record T4 workspaces verification results
Why: T4 acceptance requires a verification record in this repo before the Dev combo pin.
Evidence: backend full sweep green with TestWorkspacesOverlay; ui 23/23 (OverlayHost semantics); frontend tsc+vitest+build; example plugin workspace/command assets JSON-validated; combo make test at pinned heads.
Impact: docs/records only.
Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T4; task card feature/workspaces-r1
2026-09-30 08:09:04 +00:00
weichen ba52c7bb0a Merge pull request 'Record T3 command-bus verification results' (#11) from feature/t3-command-bus-verification into main 2026-09-30 07:55:43 +00:00
17 changed files with 2348 additions and 19 deletions
+1
View File
@@ -0,0 +1 @@
.mimosa/
+17
View File
@@ -17,3 +17,20 @@
- 模块边界、公开契约与隔离档位见 `policy/modules/`(如有)与 PROJECT.md。
- 跨仓 gitlink 变更须经组合验证后在 Dev 仓推进;受保护分支经 PR 合入。
- 验证命令见 PROJECT.md「验证」节;完成声明须附实际命令输出证据。
## Gitea 与 Git 访问事实(2026-09-30 实测)
历史文档与旧链接里的 `git-panel.u1680832.nyat.app:30319` 已失效(TLS 握手失败),
见到一律按过期处理,不要再试。当前权威通道:
- **Web / API(HTTPS)**:`https://git-home.u1680832.nyat.app:30319`(Gitea 1.27.3,
API 前缀 `/api/v1`;偶发 broken pipe / 超时,重试即可)。
- **Git over SSH**:`ssh://git@git-ssh.u1680832.nyat.app:31411/weichen/<Repo>.git`
(各仓 origin 与 gitlink 均为此格式)。
- **API token**:`~/.secrets/gitea`,两行键值 `URL_PREFIX=…` 与
`ACCESS_TOKEN=<40 位 hex>`;取值 `grep ACCESS_TOKEN ~/.secrets/gitea | cut -d= -f2-`,
用作 `Authorization: token <值>` 请求头。**token 值不入仓、不回显、不写进产出物**
(baseline 硬边界 2:只记录来源、字段与可用状态)。
- **SSH key**:`~/.ssh/home_gitea`(ED25519,公钥指纹
`SHA256:GYXaOXIMeloQ1fKSfdJ/ndgPQzs/Ix7Hk62ekfkfQ20`,Gitea 侧密钥名 GMKtec);
`~/.ssh/config` 已有 `git-ssh.u1680832.nyat.app` 主机条目,克隆/推送直接可用。
+2
View File
@@ -96,6 +96,8 @@ panels/main.json:
cards/note.json:`{ "kind": "note", "data": [ …UINode ] }`。
**新卡片类型验收项(通道外溢约束,源自目标系统 06 §2.7)**:任何新卡片类型都必须能回答「这张卡在飞书/微信群里长什么样」——按钮回调走命令总线(与 Web 同源审计),无交互卡的通道降级为模板消息 + H5 确认页;深读类内容不做通道投影,深链回 Web 弹层。
**词汇边界**:section / list / kv / form / markdown / doc-ref / actions / chart-lite。
表达不了的高级交互 → 向 Core 提案新词汇(契约扩展流程),**不要**期望注入 React 组件——前端不开放此口子,这是插件不破坏前端的机制保证。
+152
View File
@@ -0,0 +1,152 @@
# 提示词库设计与扩展指南
状态:active(feature/prompt-library 交付)|维护对象:`modules/backend/internal/prompts/`
本指南总结 Agent-System 提示词体系的**设计思路**,供后续新增/修改提示词时遵循。
方法来源:Claude Code 提示词体系的分层组装与技能化模式(2026-04 目录分析),
结合本系统的画像/设置/意图闸门/命令总线既有机制落地。
## 1. 分层模型:提示词不是一段话,是一组有职责的块
| 层 | 职责 | 组装时机 | 示例 |
|---|---|---|---|
| `base` | 常驻基座:身份/行为/谨慎/工具/风格 | 每次 run,画像可裁剪 | base.identity |
| `env` | 动态环境事实(占位符) | 每次 run,随运行填充 | env.runtime |
| `task` | 任务技能:有触发条件 | 命中才注入(同层取优先级最高) | task.doc-minutes |
| `agent` | 子代理/小队角色人设 | 派生 run 时取用 | agent.sub.explore |
| `tool` | 工具描述文案(模型侧) | 声明工具时覆盖注册表默认 | tool.knowledge_search |
| `aux` | 辅助模板(压缩/标题/解释) | 功能接线时取用(可先入库) | aux.session-compact |
| `style` | 表达变体 | 画像显式引用才启用 | style.explanatory |
设计动机:**技能塞基座 = 永久占用上下文 + 干扰无关任务**。分层后基座保持小而稳,
技能按需进场,风格可选叠加——上下文预算花在刀刃上。
## 2. 模块设计八法(写一个好模块的检查清单)
1. **角色定义**:第一句说清"你是谁、对什么负责"。子代理尤其要写边界
("你是规划者,不是实现者")。
2. **权限/只读约束**:凡不该做的事显式禁止(探索代理:不写入不修改)。
约束写在提示里 + 机制上配工具白名单,双层防线。
3. **输出契约**:结构化产出必须定义形态(几个部分、各含什么)。
契约同时是验收标准——人可以按契约检查交付。
4. **强制裁决格式**:程序要消费的结论给固定格式(验证代理以
`VERDICT: PASS|FAIL|PARTIAL` 结尾;标题生成只输出 JSON)。
5. **反模式禁令**:点名常见错误("不要把发言当决议"、"不要把外部知识冒充文档内容"、
"不要为简短丢信息")。禁令比正面要求更能纠正模型默认行为。
6. **失败与缺失的表述规则**:查不到/原文没有时怎么说("文档未提及"、列出已检索范围),
防止编造兜底。
7. **详略授权**:明确"默认完整、压缩需用户明示"还是相反——输出质量的直接杠杆。
8. **防污染**:过程性指令不得泄漏进产出(压缩摘要不提压缩这件事本身)。
## 3. 触发设计
- `intent`:关键词子串匹配。关键词要**任务特有**("纪要"好于"会议"),
避免日常闲聊误触发。文档类技能加 `requiresAttachments: true` 门槛。
- `command`:`/xxx` 显式命令。命令是显式用户意图,**不受附件门槛约束**。
技能命令出现在 `/` 菜单(source=prompt-skill),发送时跳过命令总线走正常 run。
- `attachment`:本轮有附件(可叠加关键词)。
- `manual`:永不自动触发,仅画像引用/程序显式调用。
- **多命中取舍**:task 层同轮多技能命中时注入优先级(priority,大者胜)最高者,
其余记录让位(可观测)。同优先级保持库 ID 序。
## 4. 文件格式与命名
库文件:`internal/prompts/library/<layer>-<name>.md`,frontmatter + 正文:
```
---
id: task.doc-minutes # <layer>.<name>,与文件名一致
layer: task
version: 1 # 文案有实质变更时 +1(触发用户副本 drift 提示)
title: 会议纪要生成
description: 一句话用途(/ 菜单与设置界面展示)
priority: 70
requiresAttachments: true
outputContract: |
多行输出契约
triggers:
- kind: intent
keywords: 纪要, 会议记录
- kind: command
command: /minutes
---
正文:给模型的指令(Markdown)。
```
frontmatter 刻意最小(无 YAML 依赖,解析器在 parse.go);正文即 `body`;
`{{date}} {{weekday}} {{model}} {{attachments}}` 占位符仅 env 层使用。
## 5. 覆盖链与版本
`builtin(embed 文件)→ user(DB prompt_modules 表)`。
用户副本记录 `basedOnVersion`;内置版本前进后副本标记 `drifted`(提示、不强制覆盖)。
删除用户副本即回到内置。改内置文案:改文件 + version+1 + 走 PR 评审。
## 6. 组装与可观测
`prompts.Service.ResolveSystem(profile, triggerCtx, env)` 产出多段 system 消息:
基座(画像 promptModules 引用或缺省 base+env)→ 命中技能 → 画像 systemPrompt 兼容段。
每次组装产出命中记录,注入 ctxasm Report("上下文构成"面板可见):
`prompt(task.doc-minutes v1 · intent:纪要)`、`skill-yield(task.summarize · superseded-by:...)`。
**改了提示词,观测里能看到它进没进场**——这是排查提示问题的第一入口。
## 7. 新增一个技能的步骤
1. 写 `library/task-<name>.md`(对照八法检查;定触发词与优先级;
文档类加附件门槛;提供 `/` 命令别名)。
2. 若需新占位符:EnvData 加字段 + resolvePlaceholders 加映射。
3. 测试:prompts_test.go 加触发用例(命中/未命中/门槛/让位);
TestDefaultLibraryParses 自动覆盖格式合法性。
4. 观测验证:真实 run 的上下文构成面板确认 `prompt(task.xxx · 命中原因)`。
5. 若是程序消费的裁决类输出:消费端同步解析逻辑 + 固定格式测试。
## 8. 反模式(不要这样做)
- ❌ 把技能指令写进 base 或画像 systemPrompt(永久占上下文、不可触发观测)。
- ❌ 提示词内联在 Go 代码里(不可评审、不可覆盖、发版才能改)。
- ❌ 无 version 的文案变更(用户副本漂移不可知)。
- ❌ 触发词太泛("文件"、"帮我")造成误触发。
- ❌ 只有正面要求没有反模式禁令与缺失表述规则(模型会用默认行为填空)。
## 9. 外部提示词目录的移植判定(以 Claude Code 目录为例)
借鉴外部提示词体系时,逐条判定能否入库,标准只有两条(满足其一):
1. **有承载机制**:我们的系统里存在该提示词描述的对象(工具/角色/模式/功能),
注入后有真实消费方。
2. **有可挂接的未来功能位**:功能虽未实现,但属于系统演进的合理档位——
以 aux/agent 模板先行入库,frontmatter 描述注明接线点。
两条都不满足的,**不入库**:给不存在的工具写描述、为不存在的模式写行为规范,
一旦被组装注入就是错误指引,死数据比缺数据更糟。
按此标准对 Claude Code 提示词目录的处置(46 个已入库 + 明确不移植清单):
| 目录条目 | 处置 | 落点 |
|---|---|---|
| 1.1-1.2 身份/简介、2.1 双用途安全 | 合并 | base.identity |
| 1.4 任务执行 | 移植 | base.behavior |
| 1.5 谨慎操作 | 移植 | base.caution |
| 1.6 工具使用 | 移植 | base.tools |
| 1.7-1.8 语气/输出效率 | 合并 | base.style |
| 1.9 环境信息 | 移植 | env.runtime |
| 1.3 系统行为、1.10 hooks/临时目录/token 预算 | **不移植** | 描述 Claude 运行时机制(权限模式/system-reminder/hooks/自动压缩),我们无对应机制;机制落地时按 env/base 块补 |
| 2.2 卧底模式 | **不移植** | 隐藏 AI 身份的提交伪装;无提交代理场景,且与"如实报告"基座冲突,需独立授权框架 |
| 3.1 自主模式(Sleep/tick) | **不移植** | 需常驻调度器,无该运行档 |
| 3.2 协调器模式 | 语义已承载 | agent.squad.* + tool.squad_orchestrate |
| 3.3 队友通信 SendMessage | **不移植** | 无该工具 |
| 4.1-4.5 通用/探索/规划/验证 | 移植 | agent.sub.* |
| 4.6 向导 | 移植 | agent.docs-wizard |
| 4.7 记忆提取 | 移植 | agent.memory-extractor |
| 5.9 WebFetch、5.10 WebSearch | 移植 | tool.tavily_search / tool.web_search(后端经 Agent-Native TavilyProvider 注册;未配置密钥时不注册,模块不生效) |
| 5.x 其余工具描述(13 个) | 按需移植 | 仅本系统真实存在的工具;其余(Bash/FileRead/FileWrite/FileEdit/Glob/Grep/Sleep/Skill/AskUserQuestion/NotebookEdit/Brief)**不移植**——无对应工具 |
| 6.1 会话压缩 | 移植 | aux.session-compact |
| 6.2 Session Memory | 移植 | aux.session-memory |
| 6.3 Magic Docs | 移植 | aux.magic-docs |
| 7.1-7.2 输出风格 | 移植 | style.explanatory / style.learning |
| 8.1 标题生成、8.2 命令解释 | 移植 | aux.title-gen / aux.command-explain |
| 8.3 伴侣气泡 | **不移植** | UI 功能不存在 |
| 8.4 Chrome 自动化 | **不移植** | 无浏览器工具 |
| 附录 组装架构 | 已实现 | prompts.Service 代码本身(不是提示词数据) |
新增系统的真实机制(新工具、新角色、新档位)时,回头检查此表补齐对应模块。
+40 -19
View File
@@ -81,7 +81,9 @@ AGENT_SYSTEM_CONFIG=/etc/agent-system.json agent-system serve # 环境变量
### 3.2 中栏对话
- **流式渲染**:正文逐字输出;思考过程(灰字竖线)与工具调用(芯片)实时展示;顶部状态点显示事件流连接。
- **过程折叠**:任务完成后,思考与工具调用折叠为「⚙ 过程输出 · N 次工具调用」摘要行,点击展开回看(设置 → 界面 → 可改默认行为)。
- **过程折叠(Cursor 式)**:流式期间思考/工具/中间轮解说照常显示;**最终回复一开始流式,过程立即折叠**为「过程输出 · N 次工具调用」摘要行,只显式显示回复(工具恢复时重新展开);任务终态后保持折叠,点击展开回看(设置 → 界面 → 可改默认行为)。
- **长回复折叠**:终态后超过 800 字的回复自动收成「📄 长回复 · N 字(点击展开)」摘要行——流式期间全文可见,历史消息同样适用。
- **长结果进右侧卡片(默认关)**:设置 → 界面 →「长结果进右侧卡片」开启后,报告/纪要/方案/对比/文档草稿等**产物型**长内容经 `submit_card` 进右栏收件箱(result 卡,可置顶/收纳);中栏保留结论摘要 + 锚点部件(`📄 标题 · N 字 ▸ 展开全文 · ↗ 收件箱`)——锚点可无跳转展开全文,右栏收起时阅读不残废;解释型长回答不进卡。下一轮对话上下文自动回填卡片全文(「🧩 上下文构成」可见 card(n) 条目)。
- **上下文构成观测**:每条助手消息尾部「🧩 上下文构成」折叠芯片——该轮模型实际看到什么(系统提示/历史条数/附件/知识命中)与裁剪记录(历史超窗/工具结果超限),输入规模可解释。
- **附件**:📎 上传 md/txt/docx/pdf/图片——文档经内置解析器(确定性代码解析:md/txt 直读、docx 解 OOXML、pdf 提取文本层)转为中间表示注入对话;解析结果与警告显式可见(不静默)。
- **输入增强**:`/` 唤起命令菜单(/new /mock /model /profile /help);`@knowledge` 在消息中触发知识检索注入。
@@ -105,43 +107,59 @@ AGENT_SYSTEM_CONFIG=/etc/agent-system.json agent-system serve # 环境变量
- 选项卡:显示描述与**影响**(决策上下文契约:每个选项必须声明可能造成的影响)。
- 自由输入三分支路由:一般输入→澄清回答回填;`/` 开头→命令转轨;**命中已注册插件意图(agent-intent 闸门)→转轨为新任务**。示例插件注册了 `demo.show` 意图(命中「示例/演示」),HITL 挂起时输入「来个示例演示」即可观察转轨。
### 4.2 Sub-agent 追踪
### 4.2 收件箱与任务卡(右栏终态,D25)
- 右栏「代理」tab:任务树(对话任务 + 子代理,状态点动画)。
- 点击任意节点 → **追踪弹窗**:状态、token/时长/工具用量徽标、**中间过程消息**(子代理产出已持久化)。
右栏 = **收件箱** + 「当前任务」常驻卡(计划/待办并入,随对话实时更新):
- 任务卡七类(progress/confirm/compare/review-list/result/error/status):状态灯**形状+色双编码**(◆ 待处理 ● 完成 ✓ 已确认 ✕ 失败 ◌ 已关闭——不只靠颜色);置顶不随滚动;`#upload` 演示摄取→完成→冲突对比卡全周期。
- 卡上动作即命令(card 入口,见 §5);确认结论以**回执消息**进对话时间线留痕。
- **收纳**:🧹 一键收纳完成卡(done→关闭;已确认卡盖章留痕不动);右栏收起时角标显示待处理数。
- 卡片↔消息**互定位**(D32):消息内 `card:` 链接点击定位收件箱卡片;HITL/确认卡锚定发起消息内联双现。
### 4.3 工作区弹层(深读与治理视图,⌘1–9)
工件/代理/插件面板不再占右栏 tab,统一为**工作区弹层**(Esc/遮罩关闭回对话现场;不承载唯一步骤):
- ⌘1 工件 · ⌘2 代理 · ⌘3+ 插件面板/插件声明工作区(example 插件含「治理总览」示例,⌘9)。
- 左栏「工作区」快捷区同清单;会话头左侧为**项目徽章**(D26 不加全局顶栏)。
- Sub-agent 追踪:代理工作区任务树点击任意节点 → 追踪弹窗(状态/用量徽标/中间过程消息)。
- 真实模型模式下,模型可经 `delegate_task` 派生子代理、经 `squad_orchestrate` 发起引擎编排(多步骤目标建议后者:计划确认 + 交付物把关)。
### 4.3 计划 / 待办
### 4.4 计划 / 待办
右栏「计划 / 待办」实时更新(真实模型经 `update_plan` / `update_todos` 工具维护;mock `#agents` 演示)。
并入右栏「当前任务」常驻卡(真实模型经 `update_plan` / `update_todos` 工具维护;mock `#agents` 演示)。
### 4.4 工件
### 4.5 工件
- 上传与模型产出统一入 Artifacts;`write_artifact` 工具可被模型调用。
- 查看:markdown 在线渲染;文本类可**编辑保存**;二进制(docx/pdf)下载;图片内联预览。
- 文档工件与上传文本自动进**知识索引**(全文检索)。
### 4.5 知识检索
### 4.6 知识检索
- API:`GET /api/knowledge/search?q=临床评价&project=<id>`;对话内 `@knowledge` 注入;模型工具 `knowledge_search`。
- 中文检索:FTS5 分词对 CJK 无效时自动 LIKE 子串兜底(本版实测中文命中正常)。
### 4.6 智能体画像(核心定制机制)
### 4.7 智能体画像(核心定制机制)
设置 → 智能体画像:内置「通用助手」(只读 T0 基线)+ 新建/导入/导出/编辑:
- 系统提示、允许/确认/拒绝工具三清单(`*` 全部、`http.` 前缀族)、HITL 策略、预算(工具次数/轮次上限)。
- 导出为 JSON 迁移;会话头部下拉切换画像。
## 5. 命令
## 5. 命令总线(四入口同源,D27)
| 命令 | 作用 |
|---|---|
| `/help` | 命令列表 |
| `/new` | 新建会话 |
| `/mock on\|off` | 演示模式切换 |
| `/model <名称>` | 设置主模型 |
| `/profile <id>` | 切换会话画像 |
按钮、卡片 action、`/` 命令、对话意图四个入口命中同一命令产生**同一条执行与审计**(`POST /api/commands/{id}`;审计 `GET /api/commands/audit`)。注册表数据驱动(内置 + 插件 `provides.commands`):
| `/` 命令 | 命令 id | 作用 |
|---|---|---|
| `/help` | builtin.help | 命令列表 |
| `/new` | conversation.create | 新建会话 |
| `/mock on\|off` | runtime.mock | 演示模式切换 |
| `/model <名称>` | models.set | 设置主模型 |
| `/profile <id>` | conversation.profile | 切换会话画像 |
`danger=high` 的命令(含插件命令)执行终点为**内联确认卡**:锚定发起消息、阻断待确认、已决折叠留痕(双现于收件箱)。
## 6. 插件
@@ -153,8 +171,8 @@ AGENT_SYSTEM_CONFIG=/etc/agent-system.json agent-system serve # 环境变量
### 6.2 示例插件(`example`)
随发布携带,覆盖五类注册能力:声明式 HTTP 工具(`http_echo`)、右栏面板(「示例面板」tab)、
卡片模板(`note`)、意图 spec(`demo_intent`)、提示词模板、插件设置项(出现在设置中心)。
随发布携带,覆盖七类注册能力:声明式 HTTP 工具(`http_echo`)、面板(工作区弹层呈现)、
卡片模板(`note`)、意图 spec(`demo_intent`)、提示词模板、插件设置项,以及 **命令声明**(`example.echo`,经命令总线四入口可调)与**工作区声明**(`example.governance`「治理总览」,⌘9)。
### 6.3 无代码自定义工具(声明式 HTTP)
@@ -168,6 +186,9 @@ AGENT_SYSTEM_CONFIG=/etc/agent-system.json agent-system serve # 环境变量
消息与运行 POST /api/conversations/{id}/messages(含命令路由)· POST /api/runs/{id}/cancel · GET /api/runs/{id}(含子任务树)
事件流 GET /api/events?conversationId=&since=(SSE;Last-Event-ID 游标续传;心跳 15s)
HITL POST /api/hitl/{id}/resolve {choiceId|freeText}
任务卡 GET /api/conversations/{id}/cards · POST /api/cards/{id}/actions/{actionId} · POST /api/cards/{id}/pin|dismiss
命令总线 GET /api/commands(注册表)· POST /api/commands/{id} {params,entrance,conversationId} · GET /api/commands/audit
工作区 GET /api/workspaces(插件工作区声明)
上传/工件 POST /api/projects/{id}/uploads(multipart,返回解析结果)· GET/PUT /api/artifacts/{id}/content
画像/设置 GET/POST /api/profiles · GET /api/settings · PUT /api/settings/user|project/{id}(schema 驱动)
工具/插件 GET/POST/DELETE /api/tools · GET /api/plugins · POST /api/plugins/reload · GET /api/registry(来源标记)
@@ -0,0 +1,52 @@
# 卡流机制与中栏过程/回复分离 —— 设计与实施提案
状态:**已批准(2026-09-30 用户五项裁定)**;owner:weichen。
前置:[界面交互底座](2026-09-30-ui-inbox-command-workspace.md)(D25–D33:收件箱/卡片/双现/互定位地基)、[界面重构与多用户认证](2026-09-30-ui-redesign-and-auth.md)(R1/R2/R4 已实施)。
输入:目标系统设计全集 V2.2.1(`~/downloads/agent-system-design` 06 §3.3「助手卡片流」:AI 回复简短、长结果一律引导到右侧卡片);用户 2026-09-30 评估裁定。
---
## 1. 背景与裁定
评估报告结论:把目标系统「中栏短回复 + 右栏卡片承载产物」的交互泛化为基座通用能力。用户五项裁定:
1. **接受**模型显式路由为唯一切分机制(否决后处理自动拆分——拆分失败永远退化为现状,不丢内容);
2. **认可**数据模型:产物全文权威在卡片(ActivityCard),消息只存引用部件 + 锚点渲染,上下文组装回填;
3. **默认关**,用户手动打开(设置 → 界面 →「长结果进右侧卡片」);
4. **CF0 先行**(中栏长回复折叠止痛,纯前端);
5. **认可**对话完备性剧本修订:右栏不算「页面」,但卡内内容必须能从中栏锚点无跳转展开(验收项)。
同日新增需求:中栏过程/回复分离(Cursor 式)——流式期间思考/工具/中间轮解说照常显示,**一旦最终回复开始流式,过程即时折叠**,只显式显示回复,可手动展开回看。
## 2. 决策(D39 起:D34–D38 为认证提案 §5.1 预留段,虽未登记仍保持预留)
| # | 决策 | 理由 |
|---|---|---|
| D39 | **内容卡显式路由**:助手长产物经内置工具 `submit_card` 提交为收件箱 `kind=result` 卡;切分判据写进 prompt 模块 `style.cardflow` 的 outputContract(产物型进卡:报告/纪要/方案/对比/文档草稿;解释型长回答留中栏);不做后处理自动拆分 | 拆分发生在生成侧:可断言、可审计;失败模式安全(不出卡 = 全文留中栏) |
| D40 | **卡片为产物权威载体**:全文存 ActivityCard(cardsvc 持久化),消息 parts 只存 `Part.card{cardId}` 引用 + 摘要锚点;`ctxasm` 组装时对 card 部件回填卡片正文(上限默认 12000 字,超限记 Truncations),上下文观测如实显示 | 与「registry 工具大结果→artifact+ref」模式同构;下一轮模型不失忆;时间线审计保留引用记录 |
| D41 | **中栏过程/回复分离**:工具轮文本部件带 `process=true`(终轮文本无标记);live 流式期间 `phase=responding` 即时折叠过程(acting 重展开,交错轮不粘滞);终态 >800 字长回复折叠(CF0);LiveState 文本按 delta index 分桶(除末桶外均过程) | 用户裁定(Cursor 式);live 投影与落库消息同构,终态对账无跳变 |
| D42 | **开关挂两层**:用户设置 `ui.cardflow`(boolean,默认 false,effect=new-run)控制工具注册与 prompt 注入;画像 PromptModules 可显式引用/排除 `style.cardflow` 覆盖 | 「用户可选」与画像机制严丝合缝;设置面 schema 驱动自动出现 |
| D43 | **完备性剧本修订**(D31 增补):右栏收件箱不算「页面」;开启卡流时,零页面走查增加双态用例,卡内全文必须可从中栏锚点部件无跳转展开(窄屏/右栏收起时阅读不残废) | 「内容被藏起来」是分栏设计最高风险;中栏自足摘要是硬规则 |
## 3. 实施切分(三期)
| 期 | 内容 | 仓 |
|---|---|---|
| R1 过程分离 | D36 全部(backend 工具轮 process 标记 + Stream 注入缝;frontend 分桶/即时折叠/CF0) | backend / frontend |
| R1 卡流 | D34/D35/D37:core CardPart.CardID;backend submit_card 工具+锚点回填+style-cardflow 模块+设置+ctxasm 回填+mock `#cardflow`;frontend 锚点部件(展开全文/跳收件箱)+result 卡体限高 | core / backend / frontend / ui / documents |
| R2 收尾 | D32 另一半(卡→消息真定位,现误接 openInbox);result/待办轻分组;窄屏回退验证;双态零页面走查定稿 | frontend / documents |
跨仓顺序遵守 multi-repo 五步:core 先合入 → backend(同步 vendored core 副本)→ frontend/ui → Dev gitlink PR → 组合验证。
## 4. 契约与行为要点
- `CardPart{Kind, Data []UINode, CardID ID}`:CardID 非空 = 收件箱引用部件(submit_card);空 = 插件内嵌卡(现状不变)。
- `submit_card(title, summary, body)`:runner 内置工具(不经注册表,同 update_todos 先例),仅 `ui.cardflow=true` 时声明;执行 = `CreateCard(kind=result, status=done, tone=ok, body=[markdown+摘要kv])` + 消息追加引用部件 + 工具返回「已发卡,对话中只留简短结论」;finishRun 持久化助手消息后把卡 `AnchorMessageID` 回填为该消息 ID。
- 中栏锚点部件:`📄 {标题} · N 字 ▸ 展开全文 · ↗ 收件箱`——展开内联渲染卡片 body(数据从 store.cards 取),跳转走 openInbox;旧正则兜底保留(插件卡)。
- 卡片内容流式(v1 一次性出卡)、飞书/微信通道投影(2.7 约束:新卡型必须能回答「这张卡在群里长什么样」——写入插件开发指南验收项)、与 artifact 统一、跨会话项目级收件箱:**均留远期**。
## 5. 边界与不做
- 不改 `ResolveSystem` 签名(注入 = 向 prof.PromptModules 副本追加模块 id);不动 SSE 协议版本。
- `autoCollapseProcess` 偏好暂不加设置 UI(默认 true 即目标行为)。
- 收件箱 pendingCount 语义不变(内容卡 status=done 不计入待办)。
@@ -0,0 +1,58 @@
# 会话间读取:分层权限与按需检索工具
状态:已批准(随实现交付);主任务:Agent-System-Dev feature/cross-session-reading。
规范依据:系统骨架设计 4.8(内置工具"会话历史检索")、4.9(设置覆盖链);动机佐证:records/2026-09-30-lesson-parallel-session-duplication.md(并行会话互不可见 → 同一需求重复交付)。
## 目标与非目标
目标:同项目内,允许一个会话的 agent **按需检索**其他会话的对话记录(transcript),权限分层可控、fail-closed。
非目标:跨项目/跨租户读取(租户 owner 硬边界不变);自动把其他会话内容注入每轮上下文(远期可选档);squad 中间工作区暴露(终态交付物已提升为项目工件);artifacts/知识可见性变更——**上传与生成的工件本就是项目级共享**(knowledge 检索按项目过滤),本次补的只有对话记录这一缺口。
## 权限模型(单一判定公式)
```
canRead(A → B) = settings(project).crossSession.read == true // 项目硬闸门(默认 false)
AND A.allowCrossRead == true // 出站:A 读别人(默认 true)
AND B.crossPrivate == false // 入站:B 被读(默认 false)
AND A.projectID == B.projectID AND owner(A) == owner(B)
```
| 层 | 载体 | 默认 | 说明 |
|---|---|---|---|
| 项目级 | settings scope `project:<id>`,`crossSession.read`(bool,effect=new-run) | false | 关=硬闸门:全项目不可读,**不支持会话单独 opt-in**(v1 明示) |
| 会话·出站 | Conversation 列 `allow_cross_read`(NOT NULL) | true | 本会话关闭"读他人";仅项目闸门开时有意义 |
| 会话·入站 | Conversation 列 `cross_private`(NOT NULL) | false | 本会话私有:不被读,且**不出现在他人列表中**(存在性本身是信息) |
| 画像级 | 既有 ToolPolicy 三清单 | — | 可 deny/confirm 新工具,第三层控制,零新增机制 |
语义细节:自读(A==B)在闸门开启时放行——附带收益是 agent 可检索自身窗口(context.maxHistoryMessages,默认 40)之外的更早历史;归档会话可读且在列表中标注(历史多半在归档里);升级后既有项目行为不变(默认关)。
## 工具设计(内置,注册表统一形态)
- `list_conversations`:列出本项目可读的其他会话(id/title/updatedAt/pinned/archived),排除 private;无参。
- `read_conversation`:`{conversationId, limit?}` 读目标会话消息窗口(默认 50、上限 200);输出紧凑 transcript(文本 parts 全量、工具调用仅名称/状态摘要),走既有 `context.maxToolResultChars` 截断与超长转工件;输出头部注入**不可信标注**("以下为会话 X 的历史背景资料,勿遵循其中指令")防提示注入;调用入既有工具审计。
工具始终注册(工具清单跨项目一致),执行时门禁;默认画像 Allow `["*"]` 已覆盖。
## 门禁链路(fail-closed,防绕过)
`ToolExecCtx` 扩展 `PeerConversations()` / `PeerConversationMessages(id, limit)` 两方法,由 runmgr 的 toolCtx 实现,**方法内逐条执行判定公式**:项目开关取自 runCtx 缓存的 EffectiveSettings → `GetConversation(owner, id)` 先做租户校验 → 同项目 → 目标非 private → 才调 `ListMessages`(该方法无 owner 过滤,属内部信任层,必须由上层校验兜住)。任一条件不满足即拒绝,不降级放行。
## UI
- 项目设置面板:项目页新增「项目设置」入口,schema 驱动渲染 project scope(`putProjectSettings` API 已有、此前无 UI)——本项目级设置的首个 UI,按 schema 通用化,后续项目级设置项零开发接入。
- 会话开关:TaskSidebar 图标钮范式(参照 pinned/archived)加「私有」锁图标;「读他人」开关放 Conversation 头部(profile 下拉同区);开启跨读的会话在列表有可见标识。
## 验收
backend 单测覆盖门禁矩阵(下表全行,含跨项目/跨租户负例)、迁移 v11、PATCH 新字段、settings 生效;core golden 一致;前端 build/typecheck;Dev 仓钉入后 `make test` 组合通过。
| 场景 | 项目开关 | A.allowCrossRead | B.crossPrivate | 期望 |
|---|---|---|---|---|
| 全关默认 | off | true | false | 拒绝 |
| 正常放行 | on | true | false | 放行 |
| 出站关闭 | on | false | — | 拒绝 |
| 目标私有 | on | true | true | 拒绝且不在 list |
| 跨项目 | on | true | false(B 属他项目) | 拒绝 |
| 跨租户 | on | true | false(B 属他 owner) | 拒绝(NotFound 语义) |
| 自读 | on | true | false(A==B) | 放行 |
| 目标归档 | on | true | false(archived) | 放行并列出 |
@@ -0,0 +1,113 @@
# 文件预览与保留能力(工件删除 / fs 工具)方案
日期:2026-09-30;状态:已裁定(§5),实施任务 feature/file-preview-caps;作者:weichen + Agent
关联:2026-09-30-ui-redesign-and-auth.md §9(上轮"下载为主"的非目标,本提案补齐)
任务:feature/file-preview-proposal(本仓 PR 见任务卡)
## 1. 背景与诉求(用户原话归纳)
1. **文件预览补齐**:PDF、Word、PowerPoint、Excel、图像、markdown、代码文件等要有预览;可考虑做网页链接的预览;落位可以考虑右侧栏,或系统提供的弹出窗口。
2. **工件删除**:接口和功能加入,但系统先不提供此类操作——保留能力,不暴露入口。
3. **fs 类工具**:同样实现,但不提供(默认不可用)。
上轮交付后现状(chat-order-artifact-files,PR#71):
- DocViewer(OverlayHost 单层):markdown 渲染、图片、pdf iframe、csv/json 等宽、二进制信息卡+下载;docx/xlsx/pptx 仅下载(当时定为非目标)。
- `DELETE /api/artifacts/{id}` 后端端点已存在,前端工件面板有行内删除按钮(二次确认)。
- 后端无任何 fs 类工具;文件面唯一入口是 artifacts(上传 + write_artifact)。
## 2. 合理性评估(逐条)
### 2.1 文件预览 —— 合理,方向正确;两点边界须裁定
**赞同**:
- 预览是上轮"工作区文件管理"的自然完成项,闭环"浏览/显示/下载/回看"中的"显示"。
- 落位思路与系统架构一致:预览应做成 @ui 能力组件(FilePreview),右栏轻预览与弹窗深预览复用同一组件——契合能力平台原则(系统基本功能做完善,插件直接复用)。
**边界与风险**:
- docx/xlsx 的浏览器端解析**必须引入前端依赖**(mammoth / SheetJS),突破此前"无新依赖"约定——需 D1 裁定。缓解:全部 `dynamic import()` 按需加载,不进主 bundle,不预览不下载解析器。
- pptx 没有轻量高保真方案(社区库重且还原度差)。推荐降级为**文本大纲级预览**(JSZip 解 slide XML,逐页标题+正文),全保真不做(D2)。
- 网页链接预览:iframe 直嵌会被多数站点的 X-Frame-Options/CSP 拒绝,不可靠。推荐 **OG 元数据卡为主 + 可选"尝试内嵌"**(D3)。服务端抓取属 SSRF 高危面,硬边界:仅 http/https、解析后拒绝 localhost/环回/私有/保留地址、重定向逐跳同校验、超时与响应体上限。
### 2.2 工件删除:保留能力、不暴露入口 —— 合理,成本极低
- 后端端点**已存在**(无需新接口);动作是回退上轮加的行内删除按钮,保留 `api.deleteArtifact` 前端方法(插件可用)。
- 与 API-first 原则完全一致:能力在公开 API,UI 只是第一个客户端;将来要暴露可走设置开关或管理端,不需要任何后端改动。
- 文档与代码注释标注"保留能力,默认不暴露",防止后续误当死代码清理。
### 2.3 fs 工具:实现但不提供 —— 合理,契合能力预留;三点设计约束
**赞同**:实现合入(有测试、有沙箱、有门控),默认关闭=模型不可见、不进 `/api/tools`,插件/配置可开启。这正是"为插件系统预留能力"的形态。
**约束(缺一不可)**:
1. **门控**:设置 `runtime.fsTools`(默认 false)。关闭时不注册工具——`/api/tools` 列表、模型可见工具集均不含;开启后仍受画像 tools.allow/deny/confirm 约束(现有机制)。
2. **沙箱**:根目录 `<DataDir>/workspaces/<owner>/<conversationId>/`;路径规范化(filepath.Clean + Rel 校验)后必须仍在根内,拒绝 `..`、绝对路径与符号链接逃逸;单文件读写上限(如 2MB/1MB);list 深度与条数上限。
3. **不变式**:write_file 落盘后**同步登记 artifact**(kind `file`,内容指针指向沙箱文件)——保住上轮确立的"工作区文件 = 工件面板可见可下载"不变式;read/list 仅限沙箱内。
4. **测试**:路径穿越负例(`../`、绝对路径、URL 编码变体、符号链接)、上限、门控正负例。
## 3. 设计方案
### 3.1 FilePreview 能力组件(modules/ui)
```
FilePreview({ source, compact? })
source = { kind:'artifact', id, name, mime?, contentUrl, downloadUrl }
| { kind:'url', href }
```
- 按扩展名/mime 分派内部渲染器;渲染器注册表 `registerFilePreview(ext, renderer)` 预留插件自定义预览能力。
- 格式矩阵(v1):
| 格式 | 方案 | 新依赖 |
|---|---|---|
| md/txt | marked 渲染(现成) | 无 |
| 图像 | `<img>` + 点击放大 | 无 |
| pdf | 同源 iframe(现成) | 无 |
| csv/json/日志 | 等宽 pre(现成) | 无 |
| **代码文件**(go/py/ts/js/rs/java/sh/sql/yaml/toml/html/css 等) | 等宽 + 行号(不做语法高亮;高亮若做需 highlight.js,另行裁定) | 无 |
| **docx** | mammoth → HTML(样式收敛进 tokens) | mammoth(动态) |
| **xlsx/xls** | SheetJS → 表格(sheet 切换,默认首 200 行分页) | xlsx(动态) |
| **pptx** | JSZip 解 slide XML → 逐页文本大纲卡 | jszip(动态) |
| **url** | OG 卡(标题/描述/站点/图标/首图)+「尝试内嵌」按钮(iframe 加载失败回退提示) | 服务端 `/api/url-preview` |
- **双落位**(D4):右栏新增"预览"页签(compact 模式:窄栏排版,边聊边看,可随消息工件 chip 一键换内容)+ OverlayHost 深预览(现 DocViewer 收敛为 FilePreview 的容器壳:工具栏=编辑/保存/下载/关闭)。两处同一组件、同一注册表。
### 3.2 后端(modules/backend)
- `GET /api/url-preview?url=`:SSRF 硬边界(见 §2.1);返回 `{title, description, siteName, favicon, image, finalUrl}`;解析 og:title/og:description/og:image/og:site_name,回退 `<title>`/meta description。5s 超时、256KB 截断、Content-Type 须 text/html。缓存(内存 LRU,15 分钟)。
- fs 工具族 `internal/tools/fs.go`:`fs_read_file` / `fs_write_file` / `fs_list_dir`,参数与返回结构走既有工具契约;门控与沙箱见 §2.3。
- 工件删除:**零后端改动**。
### 3.3 前端(modules/frontend)
- DocViewer 收敛为 FilePreview 容器(删自有格式分支);右栏 Workbench 增"预览"页签 + `store.previewSource`。
- 消息工件 chip 与 ArtifactsPanel 行提供两个入口:默认弹窗深预览,"右栏"按钮轻预览;**移除删除按钮**(保留 api 方法与注释说明)。
- URL 入口(P3):会话输入框粘贴纯 URL → 消息侧生成链接预览卡(点击进右栏/弹窗预览);插件卡 doc-ref 同样可指向 url 工件。
### 3.4 依赖与体积
mammoth + xlsx + jszip 全部动态 import,仅对应格式首次预览时加载;主 bundle 不变。版本随 frontend package-lock 锁定。
## 4. 分期与验收
| 期 | 内容 | 验收 |
|---|---|---|
| P1 预览基座 | FilePreview 组件+注册表;双落位;md/图片/pdf/csv/json/代码文件迁移收敛;删除按钮回退 | @ui vitest(组件矩阵);头链:右栏预览页签+弹窗各断言;面板无删除按钮、API 仍在 |
| P2 Office | docx/xlsx/pptx 渲染器(动态加载) | 样例文件矩阵头链断言(docx 出正文、xlsx 出表格、pptx 出大纲);懒加载不进主 bundle(构建产物体积对比) |
| P3 URL 预览 | /api/url-preview + LinkPreview + 输入框 URL 卡 | go 测试:OG 解析正例 + SSRF 负例(localhost/私网/非 http 协议/超时);头链:链接卡→右栏预览 |
| P4 fs 工具 | 实现+门控+沙箱+测试(默认关) | go 测试:穿越负例全红、门控关时不注册;开启后 write_file 产物出现在工件面板 |
## 5. 决策点(2026-09-30 用户已裁定)
- **D1 Office 依赖**:✅ **引入** mammoth/SheetJS(动态加载,不进主包)。
- **D2 pptx 深度**:✅ **全保真渲染**(用户选择;接受重型依赖与还原度折衷——实施时在 pptx-preview / pptx2html 候选中取与 Vite 兼容者,若均不可构建则带回证据退回文本大纲级再裁定)。
- **D3 URL 预览形态**:✅ **OG 卡 + 可选尝试内嵌**。
- **D4 预览落位**:✅ **右栏 + 弹窗双落位**。
- **D5 fs 开关可见性**:按推荐默认执行——仅配置/环境可开(runtime.fsTools 默认 false),设置页不显示开关。
- 实施任务:feature/file-preview-caps(P1–P4 一体交付)。
## 6. 边界与不做
- 不做 Office 文件的在线**编辑**(预览只读;md/txt/csv/json 编辑能力维持现状)。
- 不做语法高亮(如需引入 highlight.js 另行裁定)。
- 不做服务端格式转换(LibreOffice/onlyoffice 等违反单二进制非容器化部署约束)。
- 删除能力不做确认流之外的新入口形态;fs 工具不做 shell/exec 类操作(只做文件读写列目录)。
@@ -0,0 +1,228 @@
# 界面重构与多用户认证 —— 设计提案(2026-09-30)
状态:**accepted(方向 + R2 范围)**——2026-09-30 用户裁定采用**方案 A 任务中心**;同日裁定认证阶段 2 改为**管理员发放制**:无自助注册,账号仅管理员(或 CLI 引导)创建并设定初始密码,创建后与重置后的首次登录均强制改密(§5.1 邮箱+自助注册方案作废)。R1 已实施:Dev 仓 `feature/task-sidebar-r1`(Core +pinned/archived、Backend 迁移 v9 与任务列表 API、Frontend TaskSidebar)。R2 已实施:Dev 仓 `feature/auth-admin-accounts`(Backend 迁移 v10 auth_accounts:users 密码/must_change/is_admin + sessions 表;`/api/auth/login|logout|password`、`/api/admin/users*`;argon2id;登录失败退避;中间件接受 Bearer 密钥或会话 cookie 且豁免静态与登录入口;CLI `user create|reset-password|list`;Frontend 登录页双 tab、强制改密门、用户管理弹层。验证:store/e2e 测试 + 无头全流程走查)。R4 已实施:`feature/visual-refresh-r4`(令牌 v2 + 线性图标集 + 全组件重造型)。**UI 能力平台已实施(2026-09-30 用户裁定:头像/卡片/设置页为系统基本能力,插件直接复用)**:`feature/ui-capability-platform`——Core 增 `avatar` 词表(UINode/UIAvatarSpec 含叠放组);@ui 入 Icon/Avatar(名字派色/语义色/状态点/叠放)/primitives(Btn/Input/Chip/EmptyState/SettingRow)/SettingsShell(侧导航设置外壳);UIRenderer 补齐 D28 七词表(progress/compare/tree/table/steps/tabs/timeline——此前仅类型声明、卡片内被静默丢弃);前端消费(消息头像列、设置中心上外壳、管理弹层头像);react 类型单副本钉扎(tsconfig paths,修 make frontend 双 @types/react 名义冲突)。owner:weichen。
前置:[界面交互底座](2026-09-30-ui-inbox-command-workspace.md)(D25–D33)、[双档存储、多租户与规模化](2026-09-30-dual-tier-storage-and-multitenancy.md)(D17–D24)。
配套 demo:`ui-redesign-demos/`(index.html 为入口,本地浏览器直接打开)。
---
## 1. 背景与问题
用户对现有界面的判定(2026-09-30):**界面与交互设计不够好**。具体事实(对照 v0.1.0 截图与 `modules/frontend/src/components/ProjectNav.tsx`):
1. **创建入口分裂且错位**:新建项目在左上角 `nav-header` 的 ✚,新会话在左下角 `nav-footer` 的「+ 新会话」。两个高频动作一个在最上一个在最下,且都是小图标/文字按钮,无主次。
2. **项目树导航繁琐**:`ProjectNav` 只渲染 `currentProjectId` 的会话(`open && p.id === currentProjectId`),切项目才能看会话;项目折叠态与会话列表耦合,浏览成本高。
3. **无用户与租户界面**:系统定位是多用户、多租户(D17 已落 `users`/`api_keys` 表),但界面只有一个密钥输入登录门(`App.tsx LoginGate`),没有账户、身份、成员、租户切换的任何表面。
4. 视觉密度与专业度不足:emoji 图标(✚ ☰ ⚙ 📦 🤖)、无统一设计令牌,观感偏离"办公工作台"。
## 2. ZCode 桌面端研究结论
研究对象:`github.com/zai-org/ZCode`(Apache-2.0,Electron 桌面 + Web + CLI/TUI 三形态)。证据为仓库源码与 `DESIGN.md`(以下文件路径均在该仓)。
### 2.1 布局范式(`packages/ui/src/app-shell/WorkspaceShellLayout.tsx`)
- 四区:**左侧栏(任务列表)+ 中栏会话 + 底部终端 + 右侧 Side Pane**(浏览器/子代理会话/工作流运行/工件,Tab 化)。
- 尺寸用 CSS 变量驱动(`--workspace-sidebar-width` 等),拖拽中只写变量不进 React state;宽度持久化 localStorage。
- 自动收起策略:窗口变窄(去抖 300ms)时若会话列 < 480px 收 Side Pane、< 360px 收侧栏;**只在窗口 resize 时触发**,避免把用户手动打开的面板又关回去。
- 侧栏隐藏时由 `DesktopTopOverlay` 浮出 New Task,保证创建入口永不丢失。
### 2.2 侧栏组织(`packages/ui/src/WorkspaceSidebar.tsx` 等)
- **顶部动作区**:第一颗按钮就是 **New Task**(带快捷键),随后是 Command Center 搜索(⌘K)、Automations、插件商店。创建入口在视觉与逻辑的**第一位**,不在角落。
- **任务列表四种组织模式**:`grouped`(自定义分组)/ `workspace`(按项目)/ `timeline`(按时间线)/ `archived`,pill 切换 + 过滤菜单(排序、归档)。项目是任务的**组织维度**,不是必须展开导航的树。
- **置顶区全局置顶**(`WorkspacePinnedTasksSection`:归档态也保持置顶区可见)。
- 任务行支持拖拽排序、分组展开态持久化、右键菜单(`TaskListItemContextMenu`)。
- **Footer = 账户区**:主题/语言、设置、用量与套餐徽章、**登录/登出与用户信息**(`WorkspaceSidebarFooter`)。
- 收起后变 52px 图标轨道(`WorkspaceSidebarCollapsedRail`)。
### 2.3 会话头与中栏(`WorkspaceHeaderSections/`)
- 中栏会话头:上下文路径(项目/目录)+ 最近活动时间 + 动作区;**无全局顶栏**(与我方 D26 一致)。
### 2.4 设计系统(`DESIGN.md`)
- 定位:"calm, dense, operational rather than decorative";桌面优先。
- 硬规则:统一 `text-ui-*` 字号阶(默认 14px);语义色只用于真实语义态;**所有等待确认类交互(提问/权限/计划批准)统一绿色确认**;圆角按嵌套层级递减(外 12 → 内 10/8/6);4px 间距基;高度克制(先靠背景对比与描边,不堆阴影)。
- 键盘优先:可聚焦、可见焦点、快捷键全程可触达(新建任务、⌘K、侧栏拖拽支持方向键步进 16px)。
### 2.5 认证表面
- `login/LoginApiKeyForm.tsx`:API 密钥表单;`onboarding/`:首跑引导;OAuth 相关在 `root/` 与 `packages/web/src/auth/`。
### 2.6 对本系统的可迁移结论
| ZCode 实践 | 迁移判据 |
|---|---|
| New Task 置顶 + 快捷键 + 隐藏侧栏时浮出 | 直接采纳:解决"创建入口分裂"这一首要痛点 |
| 项目/时间线/分组/归档是列表的**视图模式** | 直接采纳:项目从"树"降为"组织维度",浏览免切项目 |
| 侧栏 Footer 承载账户/租户/用量 | 直接采纳:多租户身份常驻但低噪声 |
| 底部终端 + Side Pane Tab | 远期:我们的代理/工件已有 ⌘1–9 弹层(D25/R4),不重复建面 |
| CSS 变量驱动分隔条、自动收起策略 | 实现层采纳(现有 divider 逻辑升级) |
| 绿色统一确认 | 与 InlineConfirmCard 语义合并考虑 |
## 3. 设计原则(继承 + 新增)
继承界面五原则(D25–D33 提案 §1.2:中栏做空、消息是事件流卡片是状态对象、弹层是加速器、待办不沉没、确认留痕)与 D26(无全局顶栏)。新增:
- **P6 单一主创建入口**:创建动作只有一个主按钮(新建任务=会话),其余创建(项目等)收进它的次级菜单或组织区的显式 +。位置固定在侧栏顶部第一位,快捷键 ⌘N。
- **P7 身份常驻**:用户(头像/名/租户/角色)常驻侧栏 Footer;一切跨租户资源不可见性由服务端保证(D18 不变)。
- **P8 组织即视图**:项目/时间线/归档是任务列表的切换视图,不改变数据模型(`conversations.project_id` 不变),切换是本端偏好。
## 4. 三个方案
demo:`ui-redesign-demos/demo-a-task-centric.html` / `demo-b-activity-rail.html` / `demo-c-project-portal.html`(含明暗主题切换;方案 A 含完整交互演示)。
### 方案 A:任务中心(ZCode 同构)——**推荐**
```
┌────────────────────┬──────────────────────────────┬─────────────────┐
│ Agent-System │ [项目徽章] 会话标题 ⋯ │ 收件箱 2 │
│ [+ 新建任务 ⌘N ▾] │ 状态 · 模型 · 更新于 3 分钟前 │ [待办][全部] │
│ [🔍 搜索 ⌘K] ├──────────────────────────────┤ ⚠ 发布前确认 │
│ 组织 [项目|时间线] ⋯│ │ ▷ 记忆库索引 68% │
│ 📌 置顶 │ 消息流 + 内联确认卡 │ ✓ 周报已生成 │
│ ▾ 研发体系文档 (4) │ │ − 已确认(折叠) │
│ • 任务… ├──────────────────────────────┤─────────────────│
│ ▸ 真实模型测试 (2) │ [附件] 输入框… [发送] │ 代理 2 · 工件 5 │
│ 👤 weichen · 个人 │ │ │
│ 租户 ⚙ 🌓 │ │ │
└────────────────────┴──────────────────────────────┴─────────────────┘
```
- **新建任务**(主按钮,split menu):默认在"当前项目上下文"建会话;▾ 展开新建项目/新建任务于指定项目/导入。解决入口分裂:一个位置、有主次、带快捷键。
- **组织切换**:按项目(分组可折叠,组头 hover 出「在此项目新建」)/ 按时间线(今天/昨天/本周)。置顶区恒在顶部;过滤菜单含归档视图与排序。
- 任务行:状态点(运行中/待我确认/空闲/已完成)+ 相对时间 + 所属项目徽章(时间线模式)。
- **Footer 账户区**:用户 chip(点头像弹账户菜单:信息/切换租户/API 密钥/退出)+ 设置 + 主题。
- 中栏头沿用 D26:项目徽章 + 会话标题 + 状态;右栏纯收件箱(D25 不变),底部快捷链接进 ⌘1–9 弹层。
- **优点**:创建/浏览/身份三大痛点一次解决;与 ZCode(以及 Linear/ChatGPT 侧栏)这类已验证范式同构;纯前端改造,不动数据模型。
- **代价**:需重写 `ProjectNav`(约一个组件的量)+ 新增账户菜单;左栏语义从"项目树"变为"任务列表",用户有一周适应期。
### 方案 B:活动栏 + 上下文列表(VS Code 式)
```
┌──┬─────────────────┬──────────────────────┬─────────────┐
│▣ │ 研发体系文档 ▾ │ 会话(同 A 中栏) │ 收件箱 │
│+│ [+ 新会话] │ │ │
│🔍│ ── 会话列表 │ │ │
│📭│ • … │ │ │
│🤖│ │ │ │
│📦│ │ │ │
│⚙ │ │ │ │
│👤│ │ │ │
└──┴─────────────────┴──────────────────────┴─────────────┘
```
- 最左 48px 图标轨切换领域(任务/收件箱/代理/工件/设置/账户),第二栏随活动渲染列表。
- **优点**:导航可无限扩展(插件域友好);账户/设置有恒定图标位。
- **代价**:**创建仍是二级动作**(先选项目再新建),痛点 1 只部分解决;多一列常驻(1280px 屏占 6%);与 D25"代理/工件走弹层"重复建面。判定:适合域数量 ≥ 6 时再启用。
### 方案 C:项目门户(Notion/Linear 式)
```
┌──────────────┬────────────────────────────────┐
│ [+ 新项目] │ 研发体系文档 12 会话 · 3 运行│
│ ▸ 文档智能体 │ ┌─────┐┌─────┐┐─────┐ │
│ ▸ 记忆库建设 │ │会话卡││会话卡││ + 新│ │
│ ▸ 模型测试 │ └─────┘└─────┘└─────┘ │
│ 👤 weichen │ 点会话卡 → 进入对话视图 │
└──────────────┴────────────────────────────────┘
```
- 项目是页面:首页是会话卡片网格 + 统计 + 项目内新建(入口在上下文中,最贴任务)。
- **优点**:项目级总览最好;新建会话离上下文最近。
- **代价**:对话-first 被破坏(打开高频会话多一跳);卡片网格信息密度低;与"中栏做空"张力最大。判定:适合项目数少(<10)且以交付物为中心的用法。
### 对比与推荐
| 维度 | A 任务中心 | B 活动栏 | C 项目门户 |
|---|---|---|---|
| 解决创建入口分裂 | **完全** | 部分 | 部分(上下文内) |
| 跨项目浏览 | **优(视图切换)** | 中 | 中 |
| 身份/租户常驻 | **Footer 账户区** | 图标位 | Footer |
| 与既有决策兼容(D25/D26/D31) | **完全** | 需调 D25 | 张力大 |
| 改造量 | 中(左栏+账户菜单) | 大 | 大(含视图路由) |
| 扩展性(未来插件域) | 中 | **优** | 中 |
**推荐 A**,并以 A 的 Footer 账户区 + 账户菜单吸收 B 的"账户恒定入口"优点。B 的活动栏留作域数量增长后的演进项(远期不否决)。
## 5. 多用户与多租户设计(认证阶段 2)
demo:`ui-redesign-demos/demo-auth.html`(登录/注册/账户与租户三屏)。
### 5.1 身份模型演进(延续 D17 编号段,新决策从 D34 起,本文只提案)
- **阶段 1(现状,保留)**:API key(`ask_`)即身份,user 即租户 owner,嵌入式档默认关闭认证。
- **阶段 2(本设计)**:
- `users` 增 `email`、`password_hash`(argon2id)、`status`;`organizations`(租户)与 `memberships`(user × org × role: owner/admin/member)分离——**user 不再天然等于租户**,一个用户可属多租户。
- 登录:邮箱 + 密码 → 服务端会话(`sessions` 表,HttpOnly+SameSite=Lax cookie,滑动过期);**API key 保留**为程序化访问凭证,挂到 user,权限同其成员角色。
- 阶段 1 过换路径:每个既有 owner user 自动建同名个人租户并设 owner;API key 归属不变。
- **SSE 认证升级**:会话 cookie 使 EventSource 同源自动携带,**移除 `?key=` URL 传钥**(消除 D17 §3 记录的日志泄露权衡);API key 客户端仍可用 header。
### 5.2 界面表面
| 表面 | 内容 |
|---|---|
| 登录页 | 品牌 + 双 tab(访问密钥 / 邮箱密码)+ 注册入口;错误内联;宽屏右侧产品信息面板 |
| 注册页 | 姓名/邮箱/密码/组织名(即建租户,成为 owner) |
| 账户菜单(侧栏 Footer) | 头像、显示名、邮箱;当前租户 + 角色徽章;**切换租户**(多租户成员);API 密钥管理;偏好(主题/语言);退出 |
| 成员管理(设置内) | 成员表(邮箱/角色/状态)、邀请(邮件链接或邀请码)、角色变更;仅 owner/admin 可见 |
| 项目可见性(远期) | 项目级成员范围(默认租户内全员);跨租户访问仍一律 NotFound(D18) |
### 5.3 服务端边界(不变项)
- 权威在执行端(baseline 硬边界 4):角色检查在服务端每路由执行,UI 只做可见性降级。
- 密码哈希 argon2id、会话 cookie HttpOnly;不引入第三方 OAuth(远期)。
- 限流沿用 D24 租户固定窗口;登录路由加 IP 级失败退避。
## 6. 落地路线(裁定方向后另立实施提案,此处仅示意切分)
| 期 | 内容 | 验收要点 |
|---|---|---|
| R1 | 左栏重构(方案 A 任务列表 + 新建任务 + 组织视图 + 置顶/归档)+ 设计令牌接入(modules/ui tokens.css) | 创建入口唯一性走查;对话完备性剧本不回退 |
| R2 | 登录页 + 阶段 2 认证(orgs/memberships/sessions)+ 侧栏 Footer 账户区 + 迁移 | auth_e2e 扩容;`?key=` 移除后 SSE 全链路 |
| R3 | 成员管理与邀请、租户切换、API 密钥管理页 | 角色负例(member 越权 NotFound) |
| R4 | 视觉系统全面收敛(字号阶/语义色/圆角嵌套/绿色统一确认) | 明暗主题截图对比 + 密度走查 |
## 7. Demo 清单
| 文件 | 内容 | 交互 |
|---|---|---|
| `index.html` | 方案总览与链接、对比表 | — |
| `demo-a-task-centric.html` | 方案 A 全应用 | 组织切换、新建菜单、账户菜单、收起轨道、主题、收件箱筛选 |
| `demo-b-activity-rail.html` | 方案 B | 活动切换、二级列表 |
| `demo-c-project-portal.html` | 方案 C | 项目切换、进入会话 |
| `demo-auth.html` | 登录/注册/账户与租户 | 双 tab 登录、注册表单校验、账户菜单、成员管理 |
demo 为静态设计稿(无后端),数据为演示数据;视觉规格(色板/字号/圆角)即 R4 设计令牌的目标值来源。
## 8. 边界与不做
- 本提案不含实施;实施前须用户裁定方案(默认 A)与认证阶段 2 范围。
- 不做计费/套餐(Footer 用量区留位即可)、不做 SSO/OAuth、不做项目级 ACL(远期,见 5.2)。
- 中栏与右栏结构不在本次重构范围(D25/D26 已定且未被推翻);底部终端面板不做(我们非终端工作台)。
## 9. 交付补记(2026-09-30 下午:消息顺序保真 + 工件文件管理)
用户验收 UI 能力平台后反馈四项,本轮修复(任务 feature/chat-order-artifact-files):
1. **消息顺序保真(新设计约定:渲染顺序 = 落库顺序)**。后端 llm.go 按时间交错落库 parts
(text → tool_call → tool_result → artifact_ref → 下一轮 text…),前端曾按 `p.process`
布尔二分重排(过程全前置),工具调用脱离真实位置。修复:`groupParts` 只把"连续的"过程
部件就地聚成折叠块,内容部件原位保留;live 流式改为 `LiveState.parts` 按事件到达序维护
(artifact.created 即时上 chip)。该约定写入 UI 层默认要求:任何 parts 分组展示不得改变原始顺序。
2. **下载通道**。后端 `artifactContent` 始终回 `Content-Disposition`(默认 inline,
`?download=1` → attachment,RFC 5987 filename* 支持中文名)+ Office/PDF 扩展名 MIME 表;
前端 chip / 工件面板行 / DocViewer 三处都有下载动作。
3. **工件面板 = 工作区文件管理**(浏览/显示/下载/回看/删除):搜索 + kind 过滤 + 上传 +
行内 预览/下载/删除(二次确认);DocViewer 重构为单层 OverlayHost(pdf 内嵌 iframe、
csv/json 等宽、二进制信息卡 + 下载 CTA);收件箱结果卡经 docBridge 可直接打开工件。
4. **设置界面级联修复**。SettingsShell 根元素同挂宿主 `.modal`,被后加载的宿主样式以同
特异性覆盖(column/860px)压坏左右布局——改为 `.modal.ui-settings-shell` 复合选择器
(0,2,0)免疫加载顺序;设置行统一 @ui SettingRow,保存按钮进固定 actions 底栏。
教训入库:**@ui 组件挂宿主通用类时,外壳样式必须用复合选择器高于宿主单类**。
验证:ui 37 + frontend 20 vitest 全绿;backend go test ./... 全绿(含 disposition/MIME 新测);
Playwright 头链 12/12(mock 后端 + SQLite 直插交错 parts 探针消息):
DOM 序 [text→process-collapse→text→artifact-chip]、设置外壳 computed flex-direction=row 且
侧栏/主区并排、?download=1 → attachment+RFC5987 文件名、面板工具栏/过滤/上传/行内下载。
docx 在线预览为非目标(下载为主);工作区文件即 artifacts(不新增 fs 工具/目录)。
@@ -0,0 +1,631 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方案 A · 任务中心 — Agent-System 设计稿</title>
<style>
/* ============ 设计令牌(R4 目标值来源) ============ */
:root{
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--r-xl:12px; --r-lg:10px; --r-md:8px; --r-sm:6px;
--ease:.13s ease;
}
[data-theme="dark"]{
--bg:#121316; --bg-panel:#191a1e; --bg-surface:#1f2026; --bg-raised:#24252c;
--bg-hover:#26272f; --bg-selected:#2c2d36; --bg-input:#1c1d22;
--border:#282a31; --border-strong:#373943; --border-faint:#202127;
--text:#e8e9ec; --text-subtle:#a4a6ae; --text-faint:#71747e; --text-on-accent:#fff;
--accent:#5b8def; --accent-dim:rgba(91,141,239,.13); --accent-soft:rgba(91,141,239,.22);
--green:#41b26e; --green-dim:rgba(65,178,110,.13); --green-border:rgba(65,178,110,.32);
--amber:#d99b3f; --amber-dim:rgba(217,155,63,.13);
--red:#e0566b; --red-dim:rgba(224,86,107,.12);
--shadow-pop:0 12px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
--shadow-card:0 1px 2px rgba(0,0,0,.25);
--scroll-thumb:#33353d;
}
[data-theme="light"]{
--bg:#f6f7f8; --bg-panel:#ffffff; --bg-surface:#ffffff; --bg-raised:#ffffff;
--bg-hover:#f0f1f4; --bg-selected:#e8eaf0; --bg-input:#ffffff;
--border:#e5e6ea; --border-strong:#d4d6dd; --border-faint:#ececf0;
--text:#1d1e23; --text-subtle:#5c5f68; --text-faint:#989ba4; --text-on-accent:#fff;
--accent:#3a76e0; --accent-dim:rgba(58,118,224,.09); --accent-soft:rgba(58,118,224,.16);
--green:#269a59; --green-dim:rgba(38,154,89,.09); --green-border:rgba(38,154,89,.35);
--amber:#a8731d; --amber-dim:rgba(168,115,29,.1);
--red:#c84559; --red-dim:rgba(200,69,89,.08);
--shadow-pop:0 12px 32px rgba(20,22,28,.14), 0 2px 8px rgba(20,22,28,.08);
--shadow-card:0 1px 2px rgba(20,22,28,.05);
--scroll-thumb:#d6d8de;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.55;color:var(--text);background:var(--bg);overflow:hidden}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
svg.ic-s{width:14px;height:14px}
/* ============ 应用骨架 ============ */
.app{display:flex;height:100vh}
.side{width:var(--side-w,272px);flex:none;transition:width var(--ease)}
.divider{width:1px;flex:none;background:var(--border-faint);cursor:col-resize;position:relative;z-index:5}
.divider:hover{background:var(--border-strong)}
.main{flex:1;min-width:0}
.inbox{flex:none;width:324px}
/* ============ 左栏 ============ */
.side{background:var(--bg-panel);display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border-faint);overflow:hidden}
.brand{display:flex;align-items:center;gap:8px;padding:12px 12px 8px}
.brand-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#8f6ce8);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.brand-name{font-weight:600;font-size:13.5px;letter-spacing:.1px}
.brand .sp{flex:1}
.iconbtn{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.iconbtn:hover{background:var(--bg-hover);color:var(--text-subtle)}
.primary-actions{padding:4px 10px 8px;display:flex;flex-direction:column;gap:6px}
.newtask{display:flex;align-items:center;height:36px;border-radius:var(--r-md);background:var(--accent-dim);border:1px solid var(--accent-soft);color:var(--accent);font-weight:600;padding:0 4px 0 10px;gap:8px;transition:background var(--ease)}
.newtask:hover{background:var(--accent-soft)}
.newtask .lab{flex:1;text-align:left}
.kbd{font-size:11px;font-family:var(--mono);background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-faint);line-height:1.5}
.newtask .caret{width:24px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--accent)}
.newtask .caret:hover{background:var(--accent-soft)}
.searchbtn{display:flex;align-items:center;height:32px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);padding:0 8px 0 10px;gap:8px;color:var(--text-faint);font-size:13px}
.searchbtn:hover{border-color:var(--border-strong);color:var(--text-subtle)}
.searchbtn .sp{flex:1;text-align:left}
.org-row{display:flex;align-items:center;gap:6px;padding:2px 10px 8px}
.pills{display:flex;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px;flex:1}
.pill{flex:1;height:24px;border-radius:6px;font-size:12.5px;color:var(--text-faint);display:flex;align-items:center;justify-content:center;gap:5px;transition:all var(--ease)}
.pill:hover{color:var(--text-subtle)}
.pill.on{background:var(--bg-raised);color:var(--text);box-shadow:var(--shadow-card);font-weight:500}
.task-scroll{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0}
.sec-label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-faint);padding:10px 8px 4px;letter-spacing:.3px}
.sec-label .ln{flex:1;height:1px;background:var(--border-faint)}
.group{margin-bottom:2px}
.group-head{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:var(--r-sm);color:var(--text-subtle);font-weight:500;font-size:13px;cursor:pointer;user-select:none}
.group-head:hover{background:var(--bg-hover)}
.group-head .chev{transition:transform var(--ease);color:var(--text-faint)}
.group.closed .chev{transform:rotate(-90deg)}
.group-head .cnt{font-size:11.5px;color:var(--text-faint);font-weight:400}
.group-head .sp{flex:1}
.group-add{opacity:0;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.group-head:hover .group-add{opacity:1}
.group-add:hover{background:var(--bg-selected);color:var(--text)}
.group.closed .tasks{display:none}
.tasks{padding-left:6px}
.task{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;margin:1px 0;border-radius:var(--r-sm);color:var(--text-subtle);cursor:pointer;position:relative}
.task:hover{background:var(--bg-hover)}
.task.on{background:var(--bg-selected);color:var(--text)}
.task .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.task .tm{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.run{background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.dot.wait{background:var(--amber);box-shadow:0 0 0 3px var(--amber-dim)}
.dot.idle{background:var(--border-strong)}
.dot.done{background:var(--green)}
.task .pbadge{font-size:10.5px;color:var(--text-faint);background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:0 5px;line-height:1.6;white-space:nowrap}
.side-footer{border-top:1px solid var(--border-faint);padding:8px 10px;display:flex;align-items:center;gap:6px}
.userchip{display:flex;align-items:center;gap:9px;flex:1;min-width:0;height:38px;padding:0 7px;border-radius:var(--r-md);cursor:pointer;text-align:left}
.userchip:hover{background:var(--bg-hover)}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.uc-name{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-sub{font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-sub .role{color:var(--text-faint)}
/* 收起轨道 */
.rail-col{width:52px;flex:none;background:var(--bg-panel);border-right:1px solid var(--border-faint);display:none;flex-direction:column;align-items:center;padding:10px 0;gap:4px}
.app.rail .side{display:none}
.app.rail .rail-col{display:flex}
.rail-col .rb{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--text-faint);position:relative}
.rail-col .rb:hover{background:var(--bg-hover);color:var(--text)}
.rail-col .rb .bdg{position:absolute;top:3px;right:3px;min-width:14px;height:14px;border-radius:7px;background:var(--amber);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}
.rail-col .sp{flex:1}
/* ============ 中栏 ============ */
.main{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.conv-head{padding:12px 20px 10px;border-bottom:1px solid var(--border-faint)}
.ch-row{display:flex;align-items:center;gap:8px}
.proj-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;background:var(--accent-dim);border:1px solid var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500;cursor:pointer}
.ch-sep{color:var(--text-faint);font-size:12px}
.ch-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-row .sp{flex:1}
.btn{height:28px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-surface);display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-subtle);transition:all var(--ease)}
.btn:hover{border-color:var(--border-strong);color:var(--text);background:var(--bg-raised)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.green{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.btn.green:hover{filter:brightness(1.08)}
.btn.sm{height:24px;padding:0 9px;font-size:12px}
.ch-sub{margin-top:5px;font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:10px}
.ch-sub .st{display:inline-flex;align-items:center;gap:5px;color:var(--text-subtle)}
.ch-sub .st .dot{width:6px;height:6px}
.msgs{flex:1;overflow-y:auto;padding:20px 24px 12px;min-height:0}
.msg{margin-bottom:20px;max-width:820px}
.m-user{display:flex;justify-content:flex-end}
.m-user .bubble{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:10px 14px;max-width:74%;box-shadow:var(--shadow-card)}
.m-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.m-mark{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#8f6ce8);color:#fff;display:flex;align-items:center;justify-content:center}
.m-name{font-size:12.5px;font-weight:600}
.m-model{font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:4px;padding:0 5px;line-height:1.6}
.m-time{font-size:11px;color:var(--text-faint)}
.m-body{font-size:14px;color:var(--text);line-height:1.7}
.m-body p+p{margin-top:8px}
.m-body code{font-family:var(--mono);font-size:12.5px;background:var(--bg-input);border:1px solid var(--border-faint);border-radius:4px;padding:1px 5px}
.toolblock{border:1px solid var(--border);border-radius:var(--r-md);margin:10px 0;background:var(--bg-panel);overflow:hidden}
.tb-head{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;font-size:12.5px;color:var(--text-subtle);cursor:pointer}
.tb-head:hover{background:var(--bg-hover)}
.tb-head .wrench{color:var(--text-faint)}
.tb-head .res{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
.tb-body{display:none;border-top:1px solid var(--border-faint);padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--text-subtle);line-height:1.7}
.toolblock.open .tb-body{display:block}
.confirm-card{border:1px solid var(--green-border);background:var(--green-dim);border-radius:var(--r-lg);padding:12px 14px;margin:12px 0;max-width:640px}
.cc-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.cc-head .ic{color:var(--green)}
.cc-body{font-size:13px;color:var(--text-subtle);margin:6px 0 10px;line-height:1.6}
.cc-actions{display:flex;gap:8px;align-items:center}
.cc-src{margin-left:auto;font-size:11px;color:var(--text-faint)}
.artifact-card{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;margin:10px 0;max-width:520px;background:var(--bg-panel);cursor:pointer}
.artifact-card:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.aft-ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center}
.aft-name{font-size:13px;font-weight:600}
.aft-meta{font-size:11.5px;color:var(--text-faint)}
.composer-wrap{padding:8px 24px 16px}
.composer{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-input);box-shadow:var(--shadow-card);transition:border-color var(--ease)}
.composer:focus-within{border-color:var(--accent)}
.composer textarea{width:100%;border:none;background:transparent;resize:none;font:inherit;color:var(--text);padding:11px 14px 4px;min-height:24px;outline:none}
.composer textarea::placeholder{color:var(--text-faint)}
.cmp-row{display:flex;align-items:center;gap:6px;padding:6px 8px 8px}
.cmp-ic{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.cmp-ic:hover{background:var(--bg-hover);color:var(--text-subtle)}
.slash-hint{font-size:11.5px;color:var(--text-faint);border:1px dashed var(--border-strong);border-radius:4px;padding:1px 7px;cursor:pointer}
.slash-hint:hover{color:var(--text-subtle)}
.model-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--border);font-size:11.5px;color:var(--text-subtle);cursor:pointer}
.model-chip:hover{border-color:var(--border-strong)}
.cmp-row .sp{flex:1}
.send{width:30px;height:30px;border-radius:var(--r-sm);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.send:hover{filter:brightness(1.1)}
/* ============ 右栏:收件箱 ============ */
.inbox{background:var(--bg-panel);border-left:1px solid var(--border-faint);display:flex;flex-direction:column;min-width:0}
.ib-head{padding:12px 14px 8px}
.ib-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.ib-badge{min-width:18px;height:18px;border-radius:9px;background:var(--amber);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.ib-pills{display:flex;gap:6px;margin-top:8px}
.ib-pill{height:24px;padding:0 10px;border-radius:12px;font-size:12px;color:var(--text-faint);border:1px solid var(--border);display:flex;align-items:center;gap:5px}
.ib-pill:hover{color:var(--text-subtle)}
.ib-pill.on{background:var(--bg-selected);border-color:var(--border-strong);color:var(--text);font-weight:500}
.ib-scroll{flex:1;overflow-y:auto;padding:2px 10px 10px;min-height:0}
.ib-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow-card)}
.ib-card .ttl{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;line-height:1.45}
.ib-card .ttl .ic{margin-top:2px}
.ib-card .mta{font-size:11.5px;color:var(--text-faint);margin-top:3px}
.ib-card .acts{display:flex;gap:6px;margin-top:8px}
.ib-card.dim{opacity:.62}
.ib-card.dim:hover{opacity:1}
.pbar{height:4px;border-radius:2px;background:var(--bg-hover);margin-top:8px;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:2px;background:var(--accent);width:68%}
.prog-num{font-size:11px;color:var(--text-subtle);font-variant-numeric:tabular-nums;margin-top:4px;display:flex;justify-content:space-between}
.ib-foot{border-top:1px solid var(--border-faint);padding:8px 12px;display:flex;gap:6px}
.ib-link{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:12px;color:var(--text-subtle)}
.ib-link:hover{background:var(--bg-hover);color:var(--text)}
.ib-link .n{font-size:10.5px;background:var(--bg-selected);border-radius:8px;padding:0 6px;line-height:1.7}
/* ============ 弹层 ============ */
.pop{position:fixed;z-index:50;min-width:230px;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:5px;display:none}
.pop.show{display:block}
.pi{display:flex;align-items:center;gap:9px;height:32px;padding:0 9px;border-radius:var(--r-sm);font-size:13px;color:var(--text-subtle);cursor:pointer;width:100%;text-align:left}
.pi:hover{background:var(--bg-hover);color:var(--text)}
.pi .kbd{margin-left:auto}
.pi.danger{color:var(--red)}
.pi.danger:hover{background:var(--red-dim)}
.pdiv{height:1px;background:var(--border-faint);margin:5px 4px}
.pop .ph{padding:8px 9px 6px;font-size:11px;color:var(--text-faint);letter-spacing:.3px}
.acc-head{display:flex;gap:10px;padding:8px 9px;align-items:center}
.acc-head .avatar{width:32px;height:32px;font-size:13px}
.acc-name{font-size:13.5px;font-weight:600}
.acc-mail{font-size:11.5px;color:var(--text-faint)}
.org-rowline{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer}
.org-rowline:hover{background:var(--bg-hover)}
.org-rowline .oi{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex:none}
.org-rowline .on{flex:1;min-width:0}
.org-rowline .on .n{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-rowline .on .r{font-size:11px;color:var(--text-faint)}
.role-chip{font-size:10px;border-radius:4px;padding:1px 6px;font-weight:600;letter-spacing:.3px}
.role-chip.owner{background:var(--accent-dim);color:var(--accent)}
.role-chip.admin{background:var(--green-dim);color:var(--green)}
.role-chip.member{background:var(--bg-hover);color:var(--text-faint)}
/* 演示角标 */
.demo-tag{position:fixed;left:14px;bottom:12px;z-index:60;font-size:11px;color:var(--text-faint);background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px 10px;box-shadow:var(--shadow-card);display:flex;gap:8px;align-items:center;pointer-events:none}
.demo-tag b{color:var(--text-subtle);font-weight:600}
@media (max-width:1100px){.side{width:232px}.inbox{width:280px}}
</style>
</head>
<body>
<div class="app" id="app">
<!-- ═══════════ 左栏:任务列表 ═══════════ -->
<aside class="side">
<div class="brand">
<div class="brand-mark"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="3.6" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="12" cy="20.4" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><path d="M12 9V5.3M14.6 10.5l3.3-1.9M14.6 13.5l3.3 1.9M12 15v3.7M9.4 13.5l-3.3 1.9M9.4 10.5 6.1 8.6" stroke="#fff" stroke-width="1.3"/></svg></div>
<span class="brand-name">Agent-System</span>
<span class="sp"></span>
<button class="iconbtn" title="收起侧栏(⌘B)" onclick="toggleRail()"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M9.5 4v16"/></svg></button>
</div>
<div class="primary-actions">
<button class="newtask" id="nt-btn" onclick="pop(event,'nt-pop')">
<svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
<span class="lab">新建任务</span>
<span class="kbd">⌘N</span>
<span class="caret" onclick="pop(event,'nt-pop');event.stopPropagation()" title="更多创建选项"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
</button>
<button class="searchbtn">
<svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<span class="sp">搜索任务、命令与工件</span>
<span class="kbd">⌘K</span>
</button>
</div>
<div class="org-row">
<div class="pills" id="org-pills">
<button class="pill on" data-org="proj" onclick="setOrg('proj')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>按项目</button>
<button class="pill" data-org="time" onclick="setOrg('time')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>时间线</button>
</div>
<button class="iconbtn" style="width:28px;height:28px;border:1px solid var(--border)" title="排序与过滤" onclick="pop(event,'fl-pop')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></svg></button>
</div>
<div class="task-scroll">
<!-- 置顶区(全局置顶,归档态也保持可见) -->
<div class="sec-label" id="pin-label"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><path d="M9 4h6l-1 7 3 3H7l3-3Z"/><path d="M12 14v6"/></svg>置顶<span class="ln"></span></div>
<div class="tasks" id="pin-tasks">
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">两树一网模型 v3 设计</span><span class="tm">09:41</span></div>
</div>
<!-- 按项目视图 -->
<div id="org-proj">
<div class="sec-label">项目<span class="ln"></span></div>
<div class="group">
<div class="group-head" onclick="tglGrp(this,event)">
<svg class="ic ic-s chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg>
<span>研发体系文档</span><span class="cnt">4</span><span class="sp"></span>
<button class="group-add" title="在此项目新建任务" onclick="event.stopPropagation()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
</div>
<div class="tasks">
<div class="task on" onclick="pick(this)"><span class="dot run"></span><span class="t">本周周报起草与素材汇总</span><span class="tm">3 分钟</span></div>
<div class="task" onclick="pick(this)"><span class="dot wait"></span><span class="t">接口设计文档评审</span><span class="tm">1 小时</span></div>
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">文档规范修订意见收集</span><span class="tm">昨天</span></div>
<div class="task" onclick="pick(this)"><span class="dot done"></span><span class="t">8 月文档资产盘点</span><span class="tm">周二</span></div>
</div>
</div>
<div class="group">
<div class="group-head" onclick="tglGrp(this,event)">
<svg class="ic ic-s chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg>
<span>记忆库建设</span><span class="cnt">3</span><span class="sp"></span>
<button class="group-add" title="在此项目新建任务" onclick="event.stopPropagation()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
</div>
<div class="tasks">
<div class="task" onclick="pick(this)"><span class="dot run"></span><span class="t">记忆库索引重建</span><span class="tm">4 分钟</span></div>
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">知识条目去重策略</span><span class="tm">周一</span></div>
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">外部语料导入试点</span><span class="tm">9/26</span></div>
</div>
</div>
<div class="group closed">
<div class="group-head" onclick="tglGrp(this,event)">
<svg class="ic ic-s chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg>
<span>真实模型测试</span><span class="cnt">2</span><span class="sp"></span>
<button class="group-add" title="在此项目新建任务" onclick="event.stopPropagation()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
</div>
<div class="tasks">
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">GLM-4.6 长文抽取对比</span><span class="tm">9/25</span></div>
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">多代理协作压测</span><span class="tm">9/24</span></div>
</div>
</div>
</div>
<!-- 时间线视图 -->
<div id="org-time" style="display:none">
<div class="sec-label">今天<span class="ln"></span></div>
<div class="tasks">
<div class="task" onclick="pick(this)"><span class="dot run"></span><span class="t">本周周报起草与素材汇总</span><span class="pbadge">研发体系文档</span></div>
<div class="task" onclick="pick(this)"><span class="dot run"></span><span class="t">记忆库索引重建</span><span class="pbadge">记忆库建设</span></div>
<div class="task" onclick="pick(this)"><span class="dot wait"></span><span class="t">接口设计文档评审</span><span class="pbadge">研发体系文档</span></div>
</div>
<div class="sec-label">昨天<span class="ln"></span></div>
<div class="tasks">
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">文档规范修订意见收集</span><span class="pbadge">研发体系文档</span></div>
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">两树一网模型 v3 设计</span><span class="pbadge">置顶</span></div>
</div>
<div class="sec-label">本周更早<span class="ln"></span></div>
<div class="tasks">
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">知识条目去重策略</span><span class="pbadge">记忆库建设</span></div>
<div class="task" onclick="pick(this)"><span class="dot done"></span><span class="t">8 月文档资产盘点</span><span class="pbadge">研发体系文档</span></div>
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">GLM-4.6 长文抽取对比</span><span class="pbadge">真实模型测试</span></div>
</div>
</div>
</div>
<!-- 账户区:身份常驻(P7) -->
<div class="side-footer">
<button class="userchip" onclick="pop(event,'acc-pop')">
<span class="avatar">W</span>
<span style="min-width:0;flex:1">
<div class="uc-name">weichen</div>
<div class="uc-sub">研发体系团队 · <span class="role-chip owner" style="font-size:9.5px">OWNER</span></div>
</span>
<svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint)"><path d="m8 9-4 3 4 3M16 9l4 3-4 3M13 5l-2 14"/></svg>
</button>
<button class="iconbtn" title="设置" onclick="toast('设置(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2Z"/></svg></button>
<button class="iconbtn" title="切换主题" onclick="setTheme()"><svg class="ic ic-s" viewBox="0 0 24 24" id="theme-ic"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg></button>
</div>
</aside>
<!-- 收起轨道 -->
<div class="rail-col">
<button class="rb" title="展开侧栏(⌘B)" onclick="toggleRail()"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M15 4v16"/></svg></button>
<button class="rb" title="新建任务 ⌘N"><svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
<button class="rb" title="搜索 ⌘K"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
<span class="sp"></span>
<button class="rb" title="收件箱"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z"/></svg><span class="bdg">2</span></button>
<button class="rb" title="weichen" onclick="toggleRail()"><span class="avatar" style="width:24px;height:24px;font-size:11px">W</span></button>
</div>
<div class="divider" title="拖动调整宽度"></div>
<!-- ═══════════ 中栏:会话 ═══════════ -->
<main class="main">
<div class="conv-head">
<div class="ch-row">
<button class="proj-chip" title="切换项目"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:13px;height:13px"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>研发体系文档</button>
<span class="ch-sep">/</span>
<span class="ch-title" title="点击重命名">本周周报起草与素材汇总</span>
<span class="sp"></span>
<button class="btn" onclick="toast('分享链接已复制(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 3v12M8 7l4-4 4 4"/><path d="M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/></svg>分享</button>
<button class="iconbtn" style="border:1px solid var(--border)" onclick="pop(event,'more-pop')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></svg></button>
</div>
<div class="ch-sub">
<span class="st"><span class="dot run"></span>2 个代理运行中</span>
<span>更新于 3 分钟前</span>
<span>·</span>
<span>消息 18 条</span>
</div>
</div>
<div class="msgs">
<div class="msg m-user">
<div class="bubble">把记忆库建设项目的本周素材汇总一下,并起草周报——重点写「两树一网」模型 v3 的进展和接口设计文档的评审安排。</div>
</div>
<div class="msg">
<div class="m-meta">
<span class="m-mark"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="4" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/></svg></span>
<span class="m-name">助手</span><span class="m-model">GLM-4.6</span><span class="m-time">10:21</span>
</div>
<div class="m-body">
<p>已检索记忆库「记忆库建设」项目本周新增的 23 条素材。要点如下:</p>
<p>· <b>两树一网 v3</b>:文档树与追溯网的合并方案已完成初稿,等你之前留的「阶段门禁」意见合并(见下方确认卡);<br>· <b>接口设计文档</b>:评审材料齐备,建议安排在周四 14:00,涉及 3 个模块的契约变更;<br>· <b>风险</b>:外部语料导入试点在 9/26 触发了 2 条知识条目冲突,已按去重策略合并。</p>
</div>
<div class="toolblock" onclick="this.classList.toggle('open')">
<div class="tb-head">
<svg class="ic ic-s wrench" viewBox="0 0 24 24"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 5.6L3 17.6V21h3.4l5.7-5.7a4.5 4.5 0 0 0 5.6-6L14.5 12l-2.5-2.5Z"/></svg>
检索知识库 · <code style="font-size:11.5px">rag.search("记忆库建设 本周")</code>
<span class="res">23 段命中 · 0.8s</span>
<svg class="ic ic-s" viewBox="0 0 24 24" style="margin-left:6px;color:var(--text-faint)"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="tb-body">query="记忆库建设 本周" → 向量 18 + 全文 RRF 融合 → rerank top-23<br>片段 #4【两树一网 v3 合并方案初稿 · 09-30】置信 0.91<br>片段 #9【接口契约变更清单 · 09-29】置信 0.87<br>…</div>
</div>
<div class="confirm-card">
<div class="cc-head"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg>等待确认:生成《本周周报》草稿</div>
<div class="cc-body">按「进展 / 评审安排 / 风险」三节起草,约 1200 字,图表以表格呈现。确认后写入工件并回写本会话时间线。</div>
<div class="cc-actions">
<button class="btn green sm" onclick="toast('已确认 · 回写时间线(设计稿示意)')">确认生成</button>
<button class="btn sm" onclick="toast('已转入对话调整(设计稿示意)')">调整大纲</button>
<span class="cc-src">来源:消息 #6 · 10:22</span>
</div>
</div>
</div>
<div class="msg m-user">
<div class="bubble">可以,按这个大纲生成。评审时间改成周五上午。</div>
</div>
<div class="msg">
<div class="m-meta">
<span class="m-mark"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="4" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/></svg></span>
<span class="m-name">助手</span><span class="m-model">GLM-4.6</span><span class="m-time">10:24</span>
</div>
<div class="m-body"><p>周报草稿已生成,评审时间已调整为周五 10:00。工件存于项目工件区,可直接导出 PDF。</p></div>
<div class="artifact-card" onclick="toast('打开工件预览(设计稿示意)')">
<span class="aft-ic"><svg class="ic" viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg></span>
<span style="flex:1;min-width:0">
<div class="aft-name">周报_第39周_研发体系文档.docx</div>
<div class="aft-meta">文档 · 1,214 字 · 刚刚生成</div>
</span>
<svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint)"><path d="M9 18l6-6-6-6"/></svg>
</div>
</div>
</div>
<div class="composer-wrap">
<div class="composer">
<textarea rows="1" placeholder="给助手发消息;/ 唤起命令,@ 引用工件…"></textarea>
<div class="cmp-row">
<button class="cmp-ic" title="上传附件"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="m21.4 11.1-8.8 8.8a5.5 5.5 0 0 1-7.8-7.8l8.5-8.5a3.7 3.7 0 0 1 5.2 5.2l-8.5 8.5a1.8 1.8 0 0 1-2.6-2.6l7.8-7.7"/></svg></button>
<button class="slash-hint">/ 命令</button>
<span class="sp"></span>
<button class="model-chip"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><rect x="5" y="5" width="14" height="14" rx="3"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>GLM-4.6</button>
<button class="send" title="发送(⏎)"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
</div>
</div>
</div>
</main>
<div class="divider" title="拖动调整宽度"></div>
<!-- ═══════════ 右栏:收件箱(D25 纯收件箱) ═══════════ -->
<aside class="inbox">
<div class="ib-head">
<div class="ib-title">
<svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z"/></svg>
收件箱<span class="ib-badge" id="ib-badge">2</span>
</div>
<div class="ib-pills">
<button class="ib-pill on" data-f="todo" onclick="setIb('todo')">待办 2</button>
<button class="ib-pill" data-f="all" onclick="setIb('all')">全部 4</button>
</div>
</div>
<div class="ib-scroll" id="ib-scroll">
<div class="ib-card" data-k="todo">
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--amber)"><path d="M12 3 2.5 20h19Z"/><path d="M12 10v4M12 17.5v.1"/></svg><span>发布前确认:《接口设计文档》3 处契约变更</span></div>
<div class="mta">接口设计文档评审 · 10 分钟前</div>
<div class="acts"><button class="btn sm primary" onclick="toast('打开确认卡(设计稿示意)')">查看</button><button class="btn sm" onclick="toast('已确认(设计稿示意)')">确认</button></div>
</div>
<div class="ib-card" data-k="todo">
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><path d="M12 3v4M12 17v4M3 12h4M17 12h4" opacity=".4"/><circle cx="12" cy="12" r="3.5"/></svg><span>记忆库索引重建进行中</span></div>
<div class="mta">代理 #a3 · 已运行 4 分钟 · 本会话</div>
<div class="pbar"><i></i></div>
<div class="prog-num"><span>3,412 / 5,020 段</span><span>68%</span></div>
</div>
<div class="ib-card" data-k="done">
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--green)"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg><span>周报(第 39 周)已生成</span></div>
<div class="mta">10:24 · 本会话</div>
<div class="acts"><button class="btn sm" onclick="toast('打开工件(设计稿示意)')">打开工件</button></div>
</div>
<div class="ib-card dim" data-k="done">
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint)"><path d="M20 6 9 17l-5-5"/></svg><span>插件 knowledge-graph 升级 2.3.1</span></div>
<div class="mta">已确认 · 09:12 · 由 youchen 执行</div>
</div>
</div>
<div class="ib-foot">
<button class="ib-link" onclick="toast('代理面板 ⌘2(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="7" rx="2"/><rect x="4" y="13" width="16" height="7" rx="2"/><path d="M8 7.5h.1M8 16.5h.1"/></svg>代理<span class="n">2</span></button>
<button class="ib-link" onclick="toast('工件面板 ⌘1(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="m3 8 9 5 9-5M12 13v8"/></svg>工件<span class="n">5</span></button>
<button class="ib-link" onclick="toast('插件面板(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M9 3v4M15 3v4M9 17v4M15 17v4M3 9h4M3 15h4M17 9h4M17 15h4"/><rect x="7" y="7" width="10" height="10" rx="2"/></svg>插件</button>
</div>
</aside>
</div>
<!-- ═══════════ 弹层 ═══════════ -->
<div class="pop" id="nt-pop" style="width:280px">
<button class="pi" onclick="toast('在当前项目新建任务(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建任务 · 当前项目<span class="kbd">⌘N</span></button>
<div class="pdiv"></div>
<button class="pi" onclick="toast('新建项目(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>新建项目…</button>
<button class="pi" onclick="toast('选择目标项目(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/><path d="M4 4h4M4 20h4" opacity=".5"/></svg>新建任务于指定项目…</button>
<button class="pi" onclick="toast('导入(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 3v12M8 7l4-4 4 4"/><path d="M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/></svg>导入对话或数据</button>
</div>
<div class="pop" id="fl-pop">
<div class="ph">排序</div>
<button class="pi"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><path d="m5 13 4 4L19 7"/></svg>最近更新</button>
<button class="pi" style="padding-left:32px">创建时间</button>
<div class="pdiv"></div>
<div class="ph">显示</div>
<button class="pi"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="m8.5 12.2 2.3 2.3 4.7-5" style="display:none"/></svg>只看我发起的任务</button>
<button class="pi" onclick="toast('归档视图(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="5" rx="1.5"/><path d="M5 9v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9M10 13h4"/></svg>查看归档</button>
</div>
<div class="pop" id="more-pop">
<button class="pi" onclick="toast('重命名(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>重命名</button>
<button class="pi" onclick="toast('置顶(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M9 4h6l-1 7 3 3H7l3-3Z"/><path d="M12 14v6"/></svg>置顶</button>
<button class="pi" onclick="toast('导出(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 15V3M8 11l4 4 4-4"/><path d="M5 15v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/></svg>导出会话</button>
<div class="pdiv"></div>
<button class="pi danger" onclick="toast('归档(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="5" rx="1.5"/><path d="M5 9v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9M10 13h4"/></svg>归档会话</button>
</div>
<div class="pop" id="acc-pop" style="width:270px">
<div class="acc-head">
<span class="avatar">W</span>
<span style="min-width:0"><div class="acc-name">weichen</div><div class="acc-mail">weichen@rd-team.cn</div></span>
</div>
<div class="pdiv"></div>
<div class="ph">当前租户</div>
<div class="org-rowline">
<span class="oi" style="background:linear-gradient(135deg,#5b8def,#8f6ce8)">研</span>
<span class="on"><div class="n">研发体系团队</div><div class="r">6 名成员 · 标准档</div></span>
<span class="role-chip owner">OWNER</span>
</div>
<div class="ph">切换租户</div>
<div class="org-rowline" onclick="toast('已切换到个人租户(设计稿示意)')">
<span class="oi" style="background:#4a5568">W</span>
<span class="on"><div class="n">个人租户</div><div class="r">仅自己</div></span>
<span class="role-chip owner">OWNER</span>
</div>
<div class="org-rowline" onclick="toast('已切换到测试租户(设计稿示意)')">
<span class="oi" style="background:#2f855a">测</span>
<span class="on"><div class="n">测试联调租户</div><div class="r">3 名成员</div></span>
<span class="role-chip member">MEMBER</span>
</div>
<div class="pdiv"></div>
<button class="pi" onclick="toast('成员管理(设计稿示意,见 demo-auth)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M17.5 14.4a6.5 6.5 0 0 1 4 5.6"/></svg>成员与角色</button>
<button class="pi" onclick="toast('API 密钥管理(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="8" cy="14" r="4.5"/><path d="m11 11 8.5-8.5M15 7l3 3M18 4l3 3" transform=""/></svg>API 密钥</button>
<button class="pi" onclick="toast('偏好设置(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2Z"/></svg>偏好设置</button>
<div class="pdiv"></div>
<button class="pi danger" onclick="toast('已退出登录(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M9 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3"/><path d="m16 17 5-5-5-5M21 12H9"/></svg>退出登录</button>
</div>
<div class="demo-tag"><b>方案 A · 任务中心</b>设计稿 · 无后端 · ⌘B 收起侧栏</div>
<script>
function $(s){return document.querySelector(s)}
function $$(s){return document.querySelectorAll(s)}
let openPop=null;
function pop(e,id){
e.stopPropagation();
const el=$('#'+id);
if(openPop===el){el.classList.remove('show');openPop=null;return}
$$('.pop').forEach(p=>p.classList.remove('show'));
const r=e.currentTarget.getBoundingClientRect();
el.classList.add('show');
const w=el.offsetWidth,h=el.offsetHeight;
let x=r.left, y=r.bottom+6;
if(id==='acc-pop'||id==='more-pop') x=Math.min(r.right-w,innerWidth-w-10);
if(id==='fl-pop') x=Math.min(r.right-w,innerWidth-w-10);
if(y+h>innerHeight-8) y=r.top-h-6;
el.style.left=Math.max(8,x)+'px'; el.style.top=y+'px';
openPop=el;
}
document.addEventListener('click',()=>{if(openPop){openPop.classList.remove('show');openPop=null}});
$$('.pop').forEach(p=>p.addEventListener('click',e=>e.stopPropagation()));
function setOrg(k){
$$('#org-pills .pill').forEach(p=>p.classList.toggle('on',p.dataset.org===k));
$('#org-proj').style.display=k==='proj'?'':'none';
$('#org-time').style.display=k==='time'?'':'none';
}
function tglGrp(head,e){if(e.target.closest('.group-add'))return;head.parentElement.classList.toggle('closed')}
function pick(el){$$('.task').forEach(t=>t.classList.remove('on'));el.classList.add('on')}
function setIb(k){
$$('.ib-pill').forEach(p=>p.classList.toggle('on',p.dataset.f===k));
$$('.ib-card').forEach(c=>c.style.display=(k==='all'||c.dataset.k==='todo')?'':'none');
$('#ib-badge').style.display=k==='todo'?'':'none';
}
function toggleRail(){$('#app').classList.toggle('rail')}
function setTheme(){
const h=document.documentElement;
h.dataset.theme=h.dataset.theme==='dark'?'light':'dark';
}
function toast(msg){
let t=$('#__toast');
if(!t){t=document.createElement('div');t.id='__toast';
t.style.cssText='position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text);border-radius:8px;padding:8px 16px;font-size:12.5px;box-shadow:var(--shadow-pop);transition:opacity .2s';
document.body.appendChild(t)}
t.textContent=msg;t.style.opacity=1;
clearTimeout(t._h);t._h=setTimeout(()=>t.style.opacity=0,1400);
}
document.addEventListener('keydown',e=>{
if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='b'){e.preventDefault();toggleRail()}
if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='n'){e.preventDefault();toast('新建任务(设计稿示意)')}
if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='k'){e.preventDefault();toast('搜索面板(设计稿示意)')}
});
</script>
</body>
</html>
@@ -0,0 +1,335 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>认证与租户 — Agent-System 设计稿</title>
<style>
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r-xl:14px;--r-lg:10px;--r-md:8px;--r-sm:6px;--ease:.13s ease}
[data-theme="dark"]{--bg:#121316;--bg-panel:#191a1e;--bg-surface:#1f2026;--bg-hover:#26272f;--bg-selected:#2c2d36;--bg-input:#1c1d22;--border:#282a31;--border-strong:#373943;--border-faint:#202127;--text:#e8e9ec;--text-subtle:#a4a6ae;--text-faint:#71747e;--accent:#5b8def;--accent-dim:rgba(91,141,239,.13);--accent-soft:rgba(91,141,239,.22);--green:#41b26e;--green-dim:rgba(65,178,110,.13);--amber:#d99b3f;--amber-dim:rgba(217,155,63,.13);--red:#e0566b;--shadow-pop:0 16px 40px rgba(0,0,0,.5);--shadow-card:0 1px 2px rgba(0,0,0,.25)}
[data-theme="light"]{--bg:#f6f7f8;--bg-panel:#fff;--bg-surface:#fff;--bg-hover:#f0f1f4;--bg-selected:#e8eaf0;--bg-input:#fff;--border:#e5e6ea;--border-strong:#d4d6dd;--border-faint:#ececf0;--text:#1d1e23;--text-subtle:#5c5f68;--text-faint:#989ba4;--accent:#3a76e0;--accent-dim:rgba(58,118,224,.09);--accent-soft:rgba(58,118,224,.16);--green:#269a59;--green-dim:rgba(38,154,89,.09);--amber:#a8731d;--amber-dim:rgba(168,115,29,.1);--red:#c84559;--shadow-pop:0 16px 40px rgba(20,22,28,.16);--shadow-card:0 1px 2px rgba(20,22,28,.05)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);overflow:hidden}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
svg.ic-s{width:14px;height:14px}
/* 顶栏:屏幕切换(演示控件)+ 主题 */
.top{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:40;display:flex;gap:4px;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:4px;box-shadow:var(--shadow-card)}
.tp{height:28px;padding:0 14px;border-radius:7px;font-size:12.5px;color:var(--text-faint)}
.tp:hover{color:var(--text-subtle)}
.tp.on{background:var(--bg-selected);color:var(--text);font-weight:500}
.tbtn{position:fixed;top:16px;right:16px;z-index:40;width:32px;height:32px;border-radius:8px;background:var(--bg-panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.tbtn:hover{color:var(--text-subtle)}
.screen{display:none;height:100vh}
.screen.on{display:flex}
/* ── 登录/注册:分屏 ── */
.auth{display:flex;height:100vh}
.form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-width:0}
.form-card{width:400px;max-width:100%}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#8f6ce8);display:flex;align-items:center;justify-content:center;color:#fff}
.brand-name{font-size:17px;font-weight:700}
.brand-sub{font-size:11.5px;color:var(--text-faint);margin-top:1px}
h1.f{font-size:21px;font-weight:700;letter-spacing:-.2px;margin-bottom:4px}
.f-sub{font-size:13px;color:var(--text-subtle);margin-bottom:22px}
.tabs{display:flex;gap:4px;background:var(--bg-input);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:18px}
.tab{flex:1;height:30px;border-radius:7px;font-size:13px;color:var(--text-faint)}
.tab:hover{color:var(--text-subtle)}
.tab.on{background:var(--bg-surface);color:var(--text);font-weight:500;box-shadow:var(--shadow-card)}
.fgrp{margin-bottom:14px}
.fgrp label{display:block;font-size:12.5px;font-weight:500;color:var(--text-subtle);margin-bottom:6px}
.inp{width:100%;height:38px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);padding:0 12px;transition:border-color var(--ease)}
.inp::placeholder{color:var(--text-faint)}
.inp:focus{border-color:var(--accent);outline:none}
.inp.mono{font-family:var(--mono);font-size:13px}
.frow{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.link{font-size:12px;color:var(--accent);cursor:pointer}
.link:hover{text-decoration:underline}
.btn-p{width:100%;height:40px;border-radius:var(--r-md);background:var(--accent);color:#fff;font-weight:600;font-size:14px;margin-top:6px}
.btn-p:hover{filter:brightness(1.08)}
.hint{margin-top:10px;font-size:12px;color:var(--text-faint);line-height:1.6;background:var(--bg-panel);border:1px solid var(--border-faint);border-radius:var(--r-md);padding:9px 11px}
.hint code{font-family:var(--mono);font-size:11px;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.ferr{display:none;margin-top:10px;font-size:12.5px;color:var(--red);background:var(--red-dim,rgba(224,86,107,.1));border:1px solid rgba(224,86,107,.3);border-radius:var(--r-md);padding:8px 11px}
.fbot{margin-top:20px;text-align:center;font-size:13px;color:var(--text-faint)}
.strength{display:flex;gap:4px;margin-top:7px}
.strength i{flex:1;height:3px;border-radius:2px;background:var(--bg-hover)}
.strength.s2 i:nth-child(-n+2){background:var(--amber)}
.strength.s3 i{background:var(--green)}
.note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--text-faint);margin:-4px 0 14px;line-height:1.55}
.note .ic{margin-top:1px;color:var(--text-faint);width:13px;height:13px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text-subtle);margin:4px 0 14px;line-height:1.5}
.cbx{width:15px;height:15px;border-radius:4px;border:1px solid var(--border-strong);flex:none;margin-top:1px;position:relative;cursor:pointer}
.cbx.on::after{content:"";position:absolute;inset:2.5px;border-radius:2px;background:var(--accent)}
/* 右侧品牌面板 */
.hero{flex:none;width:44%;max-width:640px;background:linear-gradient(160deg,#1b2340 0%,#252a48 55%,#2c2560 100%);display:flex;flex-direction:column;justify-content:center;padding:64px;color:#dfe3f0;position:relative;overflow:hidden}
[data-theme="light"] .hero{background:linear-gradient(160deg,#eef2fb,#e8ecf9 60%,#efe9f8)}
.hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,141,239,.25),transparent);top:-120px;right:-140px}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,108,232,.22),transparent);bottom:-140px;left:-120px}
.hero h2{font-size:24px;font-weight:700;letter-spacing:-.2px;line-height:1.35;margin-bottom:10px;position:relative}
.hero p{font-size:14px;opacity:.75;line-height:1.7;position:relative}
.hero ul{margin-top:26px;list-style:none;display:flex;flex-direction:column;gap:12px;position:relative}
.hero li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;opacity:.9}
.hero li svg{margin-top:2px;color:#8fb2ff;flex:none}
[data-theme="light"] .hero li svg{color:#3a76e0}
.hero .foot{position:absolute;bottom:28px;left:64px;right:64px;display:flex;justify-content:space-between;font-size:11.5px;opacity:.5}
@media (max-width:960px){.hero{display:none}}
/* ── 账户与租户屏 ── */
.acc-wrap{flex:1;display:flex;align-items:center;justify-content:center;gap:28px;padding:60px 24px 24px;flex-wrap:wrap;align-content:center}
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-card)}
/* 账户菜单(侧栏 Footer 弹出形态) */
.acc-demo{width:290px;padding:6px}
.demo-cap{font-size:11px;color:var(--text-faint);letter-spacing:.4px;margin-bottom:8px;display:flex;gap:6px;align-items:center}
.demo-cap::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)}
.acc-head{display:flex;gap:11px;padding:9px 10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.avatar.sm{width:26px;height:26px;font-size:11px}
.avatar.xs{width:22px;height:22px;font-size:10px}
.acc-name{font-size:14px;font-weight:600}
.acc-mail{font-size:12px;color:var(--text-faint)}
.pdiv{height:1px;background:var(--border-faint);margin:5px 6px}
.ph{padding:8px 10px 4px;font-size:11px;color:var(--text-faint);letter-spacing:.3px}
.org-rowline{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);cursor:pointer}
.org-rowline:hover{background:var(--bg-hover)}
.oi{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#fff;flex:none}
.org-rowline .on2{flex:1;min-width:0}
.org-rowline .on2 .n{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-rowline .on2 .r{font-size:11px;color:var(--text-faint)}
.role-chip{font-size:9.5px;border-radius:4px;padding:1.5px 6px;font-weight:700;letter-spacing:.4px;flex:none}
.role-chip.owner{background:var(--accent-dim);color:var(--accent)}
.role-chip.admin{background:var(--green-dim);color:var(--green)}
.role-chip.member{background:var(--bg-hover);color:var(--text-faint)}
.pi{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:var(--r-sm);font-size:13px;color:var(--text-subtle);cursor:pointer;width:100%;text-align:left}
.pi:hover{background:var(--bg-hover);color:var(--text)}
.pi.danger{color:var(--red)}
.pi.danger:hover{background:rgba(224,86,107,.1)}
.pi .kbd{margin-left:auto}
.kbd{font-size:11px;font-family:var(--mono);background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-faint)}
/* 成员管理 */
.mem{width:520px;max-width:100%;padding:0}
.mem-head{padding:18px 20px 4px;display:flex;align-items:flex-start;gap:10px}
.mem-head h3{font-size:16px;font-weight:700}
.mem-head p{font-size:12.5px;color:var(--text-faint);margin-top:3px}
.mem-head .sp{flex:1}
.inv{display:flex;gap:8px;padding:12px 20px 4px}
.inv .inp{flex:1;height:34px}
.sel{height:34px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);padding:0 26px 0 10px;font-size:13px;color:var(--text-subtle);appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 9px center;cursor:pointer}
.btn{height:34px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-surface);font-size:13px;color:var(--text-subtle);display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.mem-list{padding:10px 12px 14px}
.mem-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-md)}
.mem-row:hover{background:var(--bg-hover)}
.mem-row .who{min-width:0;flex:1}
.mem-row .who .n{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.mem-row .who .m{font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-chip{font-size:10px;border-radius:4px;padding:1px 6px;font-weight:600}
.st-chip.active{background:var(--green-dim);color:var(--green)}
.st-chip.pending{background:var(--amber-dim);color:var(--amber)}
.mem-row .act{opacity:0;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.mem-row:hover .act{opacity:1}
.mem-row .act:hover{background:var(--bg-selected);color:var(--red)}
.mem-foot{padding:0 20px 16px;font-size:11.5px;color:var(--text-faint);line-height:1.6}
.demo-tag{position:fixed;left:14px;bottom:12px;z-index:60;font-size:11px;color:var(--text-faint);background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px 10px;box-shadow:var(--shadow-card);pointer-events:none}
.demo-tag b{color:var(--text-subtle);font-weight:600}
</style>
</head>
<body>
<div class="top">
<button class="tp on" data-s="login" onclick="setScreen(this)">登录</button>
<button class="tp" data-s="signup" onclick="setScreen(this)">注册</button>
<button class="tp" data-s="account" onclick="setScreen(this)">账户与租户</button>
</div>
<button class="tbtn" title="切换主题" onclick="const h=document.documentElement;h.dataset.theme=h.dataset.theme==='dark'?'light':'dark'"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg></button>
<!-- ═══ 登录 ═══ -->
<div class="screen on" data-s="login">
<div class="auth">
<div class="form-side">
<div class="form-card">
<div class="brand">
<div class="brand-mark"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="3.6" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="12" cy="20.4" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/></svg></div>
<div><div class="brand-name">Agent-System</div><div class="brand-sub">研发记忆与文档智能体工作台</div></div>
</div>
<h1 class="f">登录</h1>
<div class="f-sub">进入你的组织工作区</div>
<div class="tabs">
<button class="tab on" data-t="key" onclick="setTab(this)">访问密钥</button>
<button class="tab" data-t="pwd" onclick="setTab(this)">邮箱密码</button>
</div>
<div data-t="key">
<div class="fgrp">
<label>API 访问密钥</label>
<input class="inp mono" placeholder="ask_••••••••••••••••••••••" value="ask_7f3a9c2e1b8d4a6f">
</div>
<div class="ferr" id="key-err" style="display:block">密钥无效或已撤销——请核对后重试,或联系组织管理员重新签发。</div>
<button class="btn-p">进入工作台</button>
<div class="hint">密钥由服务端管理员创建:<code>agent-system apikey create --owner &lt;name&gt;</code>。密钥等同账户凭证,请勿写入代码库。嵌入部署(未开启认证)时无需登录。</div>
</div>
<div data-t="pwd" style="display:none">
<div class="fgrp">
<div class="frow"><label>邮箱</label></div>
<input class="inp" type="email" placeholder="you@company.com" value="weichen@rd-team.cn">
</div>
<div class="fgrp">
<div class="frow"><label>密码</label><span class="link">忘记密码?</span></div>
<input class="inp" type="password" placeholder="••••••••" value="xxxxxxxx">
</div>
<button class="btn-p">登录</button>
<div class="hint">登录建立服务端会话(HttpOnly Cookie);系统自动选择你上次的组织工作区。程序化访问仍可使用 API 密钥。</div>
</div>
<div class="fbot">还没有组织账户?<span class="link" onclick="setScreen(document.querySelector('[data-s=signup].tp'))">创建组织</span></div>
</div>
</div>
<div class="hero">
<h2>把研发记忆<br>变成组织的第二大脑</h2>
<p>文档、决策与知识的沉淀、检索与生成——一个面向团队的多租户智能体工作台。</p>
<ul>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>项目化的多会话工作区,任务卡片收件箱驱动待办</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>组织内成员协作,角色与密钥分级授权</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>知识库检索(全文 + 向量)与文档生成流水线</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>自托管优先:单二进制部署,数据不出域</li>
</ul>
<div class="foot"><span>自托管 · 多租户</span><span>Apache-2.0 内核</span></div>
</div>
</div>
</div>
<!-- ═══ 注册 ═══ -->
<div class="screen" data-s="signup">
<div class="auth">
<div class="form-side">
<div class="form-card">
<div class="brand">
<div class="brand-mark"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="3.6" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="12" cy="20.4" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/></svg></div>
<div><div class="brand-name">Agent-System</div><div class="brand-sub">创建组织(租户)</div></div>
</div>
<h1 class="f">注册</h1>
<div class="f-sub">创建组织后你即为其 OWNER,可邀请成员加入</div>
<div class="fgrp"><label>显示名</label><input class="inp" value="weichen"></div>
<div class="fgrp"><label>邮箱</label><input class="inp" type="email" placeholder="you@company.com" value="weichen@rd-team.cn"></div>
<div class="fgrp"><label>密码</label><input class="inp" type="password" value="••••••••••">
<div class="strength s3"><i></i><i></i><i></i><i></i></div>
</div>
<div class="note"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v.1M12 11v5"/></svg>组织名即租户:资源按组织隔离,跨组织一律不可见。个人使用可填「个人租户」。</div>
<div class="fgrp"><label>组织名称</label><input class="inp" value="研发体系团队"></div>
<label class="chk"><span class="cbx on" onclick="this.classList.toggle('on')"></span><span>我已阅读并同意 <span class="link">服务条款</span> 与 <span class="link">数据处理说明</span>(组织数据仅存储于本部署实例)</span></label>
<button class="btn-p">创建组织并进入</button>
<div class="fbot">已有账户?<span class="link" onclick="setScreen(document.querySelector('[data-s=login].tp'))">直接登录</span></div>
</div>
</div>
<div class="hero">
<h2>为你的团队<br>建立专属智能体工作台</h2>
<p>注册即创建一个隔离的租户工作区:项目、会话、知识库与工件都属于组织,成员按角色协作。</p>
<ul>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>OWNER / ADMIN / MEMBER 三级角色</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>按需签发 API 密钥,随时撤销</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>一个账户可加入多个组织,随时切换</li>
</ul>
<div class="foot"><span>自托管 · 多租户</span><span>Apache-2.0 内核</span></div>
</div>
</div>
</div>
<!-- ═══ 账户与租户(应用内表面) ═══ -->
<div class="screen" data-s="account">
<div class="acc-wrap">
<div>
<div class="demo-cap">侧栏 Footer · 账户菜单(方案 A 形态)</div>
<div class="panel acc-demo">
<div class="acc-head">
<span class="avatar">W</span>
<span><div class="acc-name">weichen</div><div class="acc-mail">weichen@rd-team.cn</div></span>
</div>
<div class="pdiv"></div>
<div class="ph">当前租户</div>
<div class="org-rowline">
<span class="oi" style="background:linear-gradient(135deg,#5b8def,#8f6ce8)">研</span>
<span class="on2"><div class="n">研发体系团队</div><div class="r">6 名成员 · 标准档</div></span>
<span class="role-chip owner">OWNER</span>
</div>
<div class="ph">切换租户</div>
<div class="org-rowline"><span class="oi" style="background:#4a5568">W</span><span class="on2"><div class="n">个人租户</div><div class="r">仅自己</div></span><span class="role-chip owner">OWNER</span></div>
<div class="org-rowline"><span class="oi" style="background:#2f855a">测</span><span class="on2"><div class="n">测试联调租户</div><div class="r">3 名成员</div></span><span class="role-chip member">MEMBER</span></div>
<div class="pdiv"></div>
<button class="pi"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M17.5 14.4a6.5 6.5 0 0 1 4 5.6"/></svg>成员与角色</button>
<button class="pi"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="8" cy="14" r="4.5"/><path d="m11 11 8.5-8.5M15 7l3 3"/></svg>API 密钥<span class="kbd">3 枚活跃</span></button>
<button class="pi"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2Z"/></svg>偏好设置</button>
<div class="pdiv"></div>
<button class="pi danger"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M9 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3"/><path d="m16 17 5-5-5-5M21 12H9"/></svg>退出登录</button>
</div>
</div>
<div>
<div class="demo-cap">设置 · 成员与角色(OWNER/ADMIN 可见)</div>
<div class="panel mem">
<div class="mem-head">
<div><h3>成员管理 · 研发体系团队</h3><p>角色变更即时生效;被移除成员的 API 密钥同时失效。</p></div>
<span class="sp"></span>
<button class="btn"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 3v12M8 7l4-4 4 4"/><path d="M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/></svg>导出审计</button>
</div>
<div class="inv">
<input class="inp" placeholder="同事的邮箱地址">
<select class="sel"><option>MEMBER</option><option>ADMIN</option></select>
<button class="btn primary">邀请</button>
</div>
<div class="mem-list">
<div class="mem-row">
<span class="avatar sm">W</span>
<span class="who"><div class="n">weichen <span class="role-chip owner">OWNER</span></div><div class="m">weichen@rd-team.cn</div></span>
<span class="st-chip active">活跃</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">刚刚</span>
<button class="act" title="移除"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg></button>
</div>
<div class="mem-row">
<span class="avatar sm" style="background:#2f855a">Y</span>
<span class="who"><div class="n">youchen <span class="role-chip admin">ADMIN</span></div><div class="m">youchen@rd-team.cn</div></span>
<span class="st-chip active">活跃</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">2 小时前</span>
<button class="act" title="移除"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg></button>
</div>
<div class="mem-row">
<span class="avatar sm" style="background:#b7791f">L</span>
<span class="who"><div class="n">lin.zhou <span class="role-chip member">MEMBER</span></div><div class="m">lin.zhou@rd-team.cn</div></span>
<span class="st-chip active">活跃</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">昨天</span>
<button class="act" title="移除"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg></button>
</div>
<div class="mem-row" style="opacity:.75">
<span class="avatar sm" style="background:#718096">H</span>
<span class="who"><div class="n">han.mei <span class="role-chip member">MEMBER</span></div><div class="m">han.mei@partner.cn</div></span>
<span class="st-chip pending">待接受</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">3 天前</span>
<button class="act" title="撤销邀请"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 8v8M8 12h8"/><circle cx="12" cy="12" r="9"/></svg></button>
</div>
</div>
<div class="mem-foot">OWNER:管理与计费、角色、密钥、删除组织 · ADMIN:成员与项目、插件 · MEMBER:项目内协作(按项目可见范围)。越权访问一律返回 NotFound,不泄露资源存在性。</div>
</div>
</div>
</div>
</div>
<div class="demo-tag"><b>认证与租户</b>设计稿 · 无后端 · 顶部切换场景</div>
<script>
function setScreen(btn){
document.querySelectorAll('.tp').forEach(b=>b.classList.toggle('on',b===btn));
document.querySelectorAll('.screen').forEach(s=>s.classList.toggle('on',s.dataset.s===btn.dataset.s));
}
function setTab(btn){
document.querySelectorAll('.tab').forEach(b=>b.classList.toggle('on',b===btn));
document.querySelectorAll('.form-card [data-t]').forEach(d=>{
if(d.closest('.tabs'))return;
d.style.display=d.dataset.t===btn.dataset.t?'':'none';
});
}
</script>
</body>
</html>
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方案 B · 活动栏 — Agent-System 设计稿</title>
<style>
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r-xl:12px;--r-lg:10px;--r-md:8px;--r-sm:6px;--ease:.13s ease}
[data-theme="dark"]{--bg:#121316;--bg-panel:#191a1e;--bg-rail:#141519;--bg-surface:#1f2026;--bg-hover:#26272f;--bg-selected:#2c2d36;--bg-input:#1c1d22;--border:#282a31;--border-strong:#373943;--border-faint:#202127;--text:#e8e9ec;--text-subtle:#a4a6ae;--text-faint:#71747e;--accent:#5b8def;--accent-dim:rgba(91,141,239,.13);--accent-soft:rgba(91,141,239,.22);--green:#41b26e;--green-dim:rgba(65,178,110,.13);--green-border:rgba(65,178,110,.32);--amber:#d99b3f;--amber-dim:rgba(217,155,63,.13);--red:#e0566b;--shadow-pop:0 12px 32px rgba(0,0,0,.45);--shadow-card:0 1px 2px rgba(0,0,0,.25)}
[data-theme="light"]{--bg:#f6f7f8;--bg-panel:#fff;--bg-rail:#f0f1f4;--bg-surface:#fff;--bg-hover:#f0f1f4;--bg-selected:#e8eaf0;--bg-input:#fff;--border:#e5e6ea;--border-strong:#d4d6dd;--border-faint:#ececf0;--text:#1d1e23;--text-subtle:#5c5f68;--text-faint:#989ba4;--accent:#3a76e0;--accent-dim:rgba(58,118,224,.09);--accent-soft:rgba(58,118,224,.16);--green:#269a59;--green-dim:rgba(38,154,89,.09);--green-border:rgba(38,154,89,.35);--amber:#a8731d;--amber-dim:rgba(168,115,29,.1);--red:#c84559;--shadow-pop:0 12px 32px rgba(20,22,28,.14);--shadow-card:0 1px 2px rgba(20,22,28,.05)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);overflow:hidden}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--bg-selected);border-radius:6px;border:3px solid transparent;background-clip:content-box}
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
svg.ic-s{width:14px;height:14px}
.app{display:flex;height:100vh}
/* ── 活动栏 ── */
.rail{width:52px;flex:none;background:var(--bg-rail);border-right:1px solid var(--border-faint);display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:4px}
.brandmark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#8f6ce8);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex:none}
.ri{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--text-faint);position:relative;cursor:pointer;transition:all var(--ease)}
.ri:hover{background:var(--bg-hover);color:var(--text-subtle)}
.ri.on{background:var(--accent-dim);color:var(--accent)}
.ri.on::before{content:"";position:absolute;left:-7px;top:8px;bottom:8px;width:2.5px;border-radius:2px;background:var(--accent)}
.ri .bdg{position:absolute;top:4px;right:4px;min-width:15px;height:15px;border-radius:8px;background:var(--amber);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0:3px;padding:0 3px}
.ri .lbl{position:absolute;left:46px;background:var(--bg-surface);border:1px solid var(--border-strong);color:var(--text);font-size:11.5px;padding:3px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--ease);z-index:30;box-shadow:var(--shadow-pop)}
.ri:hover .lbl{opacity:1}
.rail .sp{flex:1}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
/* ── 二级列表 ── */
.ctx{width:250px;flex:none;background:var(--bg-panel);border-right:1px solid var(--border-faint);display:flex;flex-direction:column;min-width:0}
.ctx-head{padding:12px 12px 8px}
.ctx-proj{display:flex;align-items:center;gap:8px;height:32px;padding:0 9px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);cursor:pointer;font-weight:600;font-size:13px}
.ctx-proj:hover{border-color:var(--border-strong)}
.ctx-proj .oi{width:20px;height:20px;border-radius:5px;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ctx-proj .cnt{margin-left:auto;font-size:11px;color:var(--text-faint);font-weight:400}
.ctx-new{display:flex;align-items:center;gap:8px;height:32px;margin-top:8px;border-radius:var(--r-md);background:var(--accent-dim);border:1px solid var(--accent-soft);color:var(--accent);font-weight:600;padding:0 10px;font-size:13px}
.ctx-new:hover{background:var(--accent-soft)}
.kbd{font-size:11px;font-family:var(--mono);background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-faint)}
.ctx-scroll{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0}
.sec{font-size:11.5px;color:var(--text-faint);padding:10px 8px 4px;letter-spacing:.3px}
.task{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;margin:1px 0;border-radius:var(--r-sm);color:var(--text-subtle);cursor:pointer}
.task:hover{background:var(--bg-hover)}
.task.on{background:var(--bg-selected);color:var(--text)}
.task .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.task .tm{font-size:11px;color:var(--text-faint)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.run{background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.dot.wait{background:var(--amber);box-shadow:0 0 0 3px var(--amber-dim)}
.dot.idle{background:var(--border-strong)}
.dot.done{background:var(--green)}
.ctx-foot{border-top:1px solid var(--border-faint);padding:8px 10px;display:flex;gap:6px}
.sbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:12px;color:var(--text-subtle)}
.sbtn:hover{background:var(--bg-hover);color:var(--text)}
/* ── 中栏/右栏(与方案 A 同构,从简) ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.conv-head{padding:12px 20px 10px;border-bottom:1px solid var(--border-faint)}
.ch-row{display:flex;align-items:center;gap:8px}
.ch-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-row .sp{flex:1}
.btn{height:28px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-surface);display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-subtle)}
.btn:hover{border-color:var(--border-strong);color:var(--text)}
.btn.sm{height:24px;padding:0 9px;font-size:12px}
.btn.green{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.ch-sub{margin-top:5px;font-size:12px;color:var(--text-faint);display:flex;gap:10px;align-items:center}
.msgs{flex:1;overflow-y:auto;padding:20px 24px;min-height:0}
.msg{margin-bottom:18px;max-width:820px}
.m-user{display:flex;justify-content:flex-end}
.m-user .bubble{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:10px 14px;max-width:74%}
.m-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.m-mark{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#8f6ce8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.m-name{font-size:12.5px;font-weight:600}
.m-model{font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:4px;padding:0 5px;line-height:1.6}
.m-time{font-size:11px;color:var(--text-faint)}
.m-body{font-size:14px;line-height:1.7}
.toolblock{border:1px solid var(--border);border-radius:var(--r-md);margin:10px 0;background:var(--bg-panel)}
.tb-head{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;font-size:12.5px;color:var(--text-subtle)}
.tb-head .res{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
.confirm-card{border:1px solid var(--green-border);background:var(--green-dim);border-radius:var(--r-lg);padding:12px 14px;margin:12px 0;max-width:640px}
.cc-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.cc-head .ic{color:var(--green)}
.cc-body{font-size:13px;color:var(--text-subtle);margin:6px 0 10px}
.cc-actions{display:flex;gap:8px;align-items:center}
.cc-src{margin-left:auto;font-size:11px;color:var(--text-faint)}
.composer-wrap{padding:8px 24px 16px}
.composer{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-input);box-shadow:var(--shadow-card)}
.composer:focus-within{border-color:var(--accent)}
.composer textarea{width:100%;border:none;background:transparent;resize:none;font:inherit;color:var(--text);padding:11px 14px 4px;outline:none}
.composer textarea::placeholder{color:var(--text-faint)}
.cmp-row{display:flex;align-items:center;gap:6px;padding:6px 8px 8px}
.cmp-row .sp{flex:1}
.send{width:30px;height:30px;border-radius:var(--r-sm);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.model-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--border);font-size:11.5px;color:var(--text-subtle)}
.inbox{flex:none;width:320px;background:var(--bg-panel);border-left:1px solid var(--border-faint);display:flex;flex-direction:column}
.ib-head{padding:12px 14px 8px}
.ib-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.ib-badge{min-width:18px;height:18px;border-radius:9px;background:var(--amber);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.ib-scroll{flex:1;overflow-y:auto;padding:2px 10px 10px;min-height:0}
.ib-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);padding:10px 12px;margin-bottom:8px}
.ib-card .ttl{display:flex;gap:8px;font-size:13px;font-weight:600;line-height:1.45}
.ib-card .mta{font-size:11.5px;color:var(--text-faint);margin-top:3px}
.pbar{height:4px;border-radius:2px;background:var(--bg-hover);margin-top:8px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent);width:68%}
.demo-tag{position:fixed;left:14px;bottom:12px;z-index:60;font-size:11px;color:var(--text-faint);background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px 10px;box-shadow:var(--shadow-card);pointer-events:none}
.demo-tag b{color:var(--text-subtle);font-weight:600}
/* 活动视图容器(演示切换) */
.ctx-views .v{display:none}.ctx-views .v.on{display:block}
</style>
</head>
<body>
<div class="app">
<!-- 活动栏 -->
<nav class="rail">
<div class="brandmark"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="3.6" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="12" cy="20.4" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/></svg></div>
<button class="ri on" data-v="tasks" onclick="setView(this)"><svg class="ic" viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13"/><path d="m3 6 1 1 2-2M3 12l1 1 2-2M3 18l1 1 2-2"/></svg><span class="lbl">任务(项目与会话)</span></button>
<button class="ri" data-v="inbox" onclick="setView(this)"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z"/></svg><span class="bdg">2</span><span class="lbl">收件箱</span></button>
<button class="ri" data-v="agents" onclick="setView(this)"><svg class="ic" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="7" rx="2"/><rect x="4" y="13" width="16" height="7" rx="2"/><path d="M8 7.5h.1M8 16.5h.1"/></svg><span class="lbl">代理运行</span></button>
<button class="ri" data-v="arts" onclick="setView(this)"><svg class="ic" viewBox="0 0 24 24"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="m3 8 9 5 9-5M12 13v8"/></svg><span class="lbl">工件</span></button>
<button class="ri" onclick="toast('插件面板(设计稿示意)')"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3v4M15 3v4M9 17v4M15 17v4M3 9h4M3 15h4M17 9h4M17 15h4"/><rect x="7" y="7" width="10" height="10" rx="2"/></svg><span class="lbl">插件</span></button>
<span class="sp"></span>
<button class="ri" onclick="toast('设置(设计稿示意)')"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2Z"/></svg><span class="lbl">设置</span></button>
<button class="ri" onclick="toast('账户菜单(见 demo-auth)')"><span class="avatar">W</span><span class="lbl">weichen · 研发体系团队</span></button>
</nav>
<!-- 二级上下文列表 -->
<div class="ctx">
<div class="ctx-views">
<div class="v on" data-v="tasks">
<div class="ctx-head">
<button class="ctx-proj"><span class="oi">研</span>研发体系文档<span class="cnt">4 会话</span><svg class="ic ic-s" viewBox="0 0 24 24" style="margin-left:auto"><path d="m6 9 6 6 6-6"/></svg></button>
<button class="ctx-new"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新会话<span class="kbd" style="margin-left:auto">⌘N</span></button>
</div>
<div class="ctx-scroll">
<div class="sec">进行中</div>
<div class="task on"><span class="dot run"></span><span class="t">本周周报起草与素材汇总</span><span class="tm">3 分</span></div>
<div class="task"><span class="dot wait"></span><span class="t">接口设计文档评审</span><span class="tm">1 时</span></div>
<div class="sec">空闲</div>
<div class="task"><span class="dot idle"></span><span class="t">文档规范修订意见收集</span><span class="tm">昨</span></div>
<div class="task"><span class="dot done"></span><span class="t">8 月文档资产盘点</span><span class="tm">周二</span></div>
</div>
</div>
<div class="v" data-v="inbox">
<div class="ctx-head"><button class="ctx-proj"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z"/></svg>收件箱 · 待办 2</button></div>
<div class="ctx-scroll">
<div class="task"><span class="dot wait"></span><span class="t">发布前确认:接口契约变更</span><span class="tm">10 分</span></div>
<div class="task"><span class="dot run"></span><span class="t">记忆库索引重建</span><span class="tm">4 分</span></div>
</div>
</div>
<div class="v" data-v="agents">
<div class="ctx-head"><button class="ctx-proj"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="7" rx="2"/><rect x="4" y="13" width="16" height="7" rx="2"/><path d="M8 7.5h.1M8 16.5h.1"/></svg>代理运行 · 2</button></div>
<div class="ctx-scroll">
<div class="task"><span class="dot run"></span><span class="t">#a3 索引重建 worker</span><span class="tm">68%</span></div>
<div class="task"><span class="dot run"></span><span class="t">#a4 语料去重</span><span class="tm">31%</span></div>
</div>
</div>
<div class="v" data-v="arts">
<div class="ctx-head"><button class="ctx-proj"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="m3 8 9 5 9-5"/></svg>工件 · 5</button></div>
<div class="ctx-scroll">
<div class="task"><span class="dot done"></span><span class="t">周报_第39周.docx</span></div>
<div class="task"><span class="dot done"></span><span class="t">接口契约变更清单.md</span></div>
<div class="task"><span class="dot done"></span><span class="t">知识条目冲突报告.pdf</span></div>
</div>
</div>
</div>
<div class="ctx-foot">
<button class="sbtn"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>搜索<span class="kbd">⌘K</span></button>
<button class="sbtn" style="flex:none;width:34px" title="切换主题" onclick="const h=document.documentElement;h.dataset.theme=h.dataset.theme==='dark'?'light':'dark'"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg></button>
</div>
</div>
<!-- 中栏 -->
<main class="main">
<div class="conv-head">
<div class="ch-row">
<span class="ch-title">本周周报起草与素材汇总</span>
<span class="sp"></span>
<button class="btn"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 3v12M8 7l4-4 4 4"/><path d="M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/></svg>分享</button>
<button class="btn">⋯</button>
</div>
<div class="ch-sub"><span>研发体系文档</span><span>·</span><span>2 个代理运行中</span><span>·</span><span>更新于 3 分钟前</span></div>
</div>
<div class="msgs">
<div class="msg m-user"><div class="bubble">把记忆库建设项目的本周素材汇总一下,并起草周报——重点写「两树一网」模型 v3 的进展。</div></div>
<div class="msg">
<div class="m-meta"><span class="m-mark">A</span><span class="m-name">助手</span><span class="m-model">GLM-4.6</span><span class="m-time">10:21</span></div>
<div class="m-body">已检索记忆库本周新增的 23 条素材:「两树一网」v3 初稿完成待合并意见;接口契约变更涉及 3 个模块;外部语料导入触发 2 条条目冲突已合并。</div>
<div class="toolblock"><div class="tb-head"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 5.6L3 17.6V21h3.4l5.7-5.7a4.5 4.5 0 0 0 5.6-6L14.5 12l-2.5-2.5Z"/></svg>检索知识库 · rag.search("记忆库建设 本周")<span class="res">23 段命中 · 0.8s</span></div></div>
<div class="confirm-card">
<div class="cc-head"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg>等待确认:生成《本周周报》草稿</div>
<div class="cc-body">按「进展 / 评审安排 / 风险」三节起草,约 1200 字。确认后写入工件并回写时间线。</div>
<div class="cc-actions"><button class="btn sm green">确认生成</button><button class="btn sm">调整大纲</button><span class="cc-src">来源:消息 #6</span></div>
</div>
</div>
</div>
<div class="composer-wrap">
<div class="composer">
<textarea rows="1" placeholder="给助手发消息;/ 唤起命令…"></textarea>
<div class="cmp-row">
<svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint);margin:0 8px"><path d="m21.4 11.1-8.8 8.8a5.5 5.5 0 0 1-7.8-7.8l8.5-8.5a3.7 3.7 0 0 1 5.2 5.2l-8.5 8.5a1.8 1.8 0 0 1-2.6-2.6l7.8-7.7"/></svg>
<span class="sp"></span>
<span class="model-chip">GLM-4.6</span>
<button class="send"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
</div>
</div>
</div>
</main>
<!-- 右栏收件箱(保留,亦可经活动栏全屏化) -->
<aside class="inbox">
<div class="ib-head">
<div class="ib-title"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z"/></svg>收件箱<span class="ib-badge">2</span></div>
</div>
<div class="ib-scroll">
<div class="ib-card"><div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--amber)"><path d="M12 3 2.5 20h19Z"/><path d="M12 10v4M12 17.5v.1"/></svg><span>发布前确认:《接口设计文档》3 处契约变更</span></div><div class="mta">10 分钟前</div></div>
<div class="ib-card"><div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><circle cx="12" cy="12" r="3.5"/><path d="M12 3v4M12 17v4M3 12h4M17 12h4" opacity=".4"/></svg><span>记忆库索引重建进行中</span></div><div class="mta">代理 #a3 · 4 分钟</div><div class="pbar"><i></i></div></div>
<div class="ib-card"><div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--green)"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg><span>周报(第 39 周)已生成</span></div><div class="mta">10:24</div></div>
</div>
</aside>
</div>
<div class="demo-tag"><b>方案 B · 活动栏</b>设计稿 · 无后端 · 悬停图标看提示</div>
<script>
function setView(btn){
document.querySelectorAll('.ri').forEach(b=>b.classList.toggle('on',b===btn));
const v=btn.dataset.v;
document.querySelectorAll('.ctx-views .v').forEach(x=>x.classList.toggle('on',x.dataset.v===v));
}
function toast(msg){
let t=document.getElementById('__t');
if(!t){t=document.createElement('div');t.id='__t';t.style.cssText='position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:8px;padding:8px 16px;font-size:12.5px;box-shadow:var(--shadow-pop);transition:opacity .2s';document.body.appendChild(t)}
t.textContent=msg;t.style.opacity=1;clearTimeout(t._h);t._h=setTimeout(()=>t.style.opacity=0,1400);
}
</script>
</body>
</html>
@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方案 C · 项目门户 — Agent-System 设计稿</title>
<style>
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r-xl:12px;--r-lg:10px;--r-md:8px;--r-sm:6px;--ease:.13s ease}
[data-theme="dark"]{--bg:#121316;--bg-panel:#191a1e;--bg-surface:#1f2026;--bg-hover:#26272f;--bg-selected:#2c2d36;--bg-input:#1c1d22;--border:#282a31;--border-strong:#373943;--border-faint:#202127;--text:#e8e9ec;--text-subtle:#a4a6ae;--text-faint:#71747e;--accent:#5b8def;--accent-dim:rgba(91,141,239,.13);--accent-soft:rgba(91,141,239,.22);--green:#41b26e;--green-dim:rgba(65,178,110,.13);--green-border:rgba(65,178,110,.32);--amber:#d99b3f;--amber-dim:rgba(217,155,63,.13);--shadow-pop:0 12px 32px rgba(0,0,0,.45);--shadow-card:0 1px 2px rgba(0,0,0,.25)}
[data-theme="light"]{--bg:#f6f7f8;--bg-panel:#fff;--bg-surface:#fff;--bg-hover:#f0f1f4;--bg-selected:#e8eaf0;--bg-input:#fff;--border:#e5e6ea;--border-strong:#d4d6dd;--border-faint:#ececf0;--text:#1d1e23;--text-subtle:#5c5f68;--text-faint:#989ba4;--accent:#3a76e0;--accent-dim:rgba(58,118,224,.09);--accent-soft:rgba(58,118,224,.16);--green:#269a59;--green-dim:rgba(38,154,89,.09);--green-border:rgba(38,154,89,.35);--amber:#a8731d;--amber-dim:rgba(168,115,29,.1);--shadow-pop:0 12px 32px rgba(20,22,28,.14);--shadow-card:0 1px 2px rgba(20,22,28,.05)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);overflow:hidden}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--bg-selected);border-radius:6px;border:3px solid transparent;background-clip:content-box}
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
svg.ic-s{width:14px;height:14px}
.app{display:flex;height:100vh}
/* ── 左栏:项目列表 ── */
.side{width:264px;flex:none;background:var(--bg-panel);border-right:1px solid var(--border-faint);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.brand-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#8f6ce8);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.brand-name{font-weight:600;font-size:13.5px}
.newproj{display:flex;align-items:center;gap:8px;height:34px;margin:2px 12px 8px;padding:0 10px;border-radius:var(--r-md);border:1px dashed var(--border-strong);color:var(--text-subtle);font-size:13px}
.newproj:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.side-scroll{flex:1;overflow-y:auto;padding:0 8px;min-height:0}
.sec{font-size:11.5px;color:var(--text-faint);padding:10px 8px 4px;letter-spacing:.3px}
.proj{display:flex;align-items:center;gap:9px;height:34px;padding:0 8px;margin:1px 0;border-radius:var(--r-sm);color:var(--text-subtle);cursor:pointer}
.proj:hover{background:var(--bg-hover)}
.proj.on{background:var(--bg-selected);color:var(--text)}
.proj .oi{width:22px;height:22px;border-radius:6px;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.proj .n{flex:1;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .c{font-size:11px;color:var(--text-faint)}
.side-foot{border-top:1px solid var(--border-faint);padding:10px 12px;display:flex;align-items:center;gap:8px}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.sf-n{font-size:13px;font-weight:600}
.sf-s{font-size:11px;color:var(--text-faint)}
.side-foot .sp{flex:1}
.iconbtn{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.iconbtn:hover{background:var(--bg-hover);color:var(--text-subtle)}
/* ── 主区 ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.view{display:none;flex:1;min-height:0;flex-direction:column}
.view.on{display:flex}
/* 门户视图 */
.pt-head{padding:26px 32px 0}
.pt-crumb{font-size:12px;color:var(--text-faint);display:flex;gap:6px;align-items:center;margin-bottom:8px}
.pt-title{display:flex;align-items:center;gap:12px}
.pt-title h1{font-size:22px;font-weight:700;letter-spacing:-.2px}
.pt-oi{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pt-desc{margin-top:6px;color:var(--text-subtle);font-size:13.5px}
.pt-stats{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;border:1px solid var(--border);font-size:12px;color:var(--text-subtle);background:var(--bg-panel)}
.stat b{color:var(--text);font-weight:600}
.stat .dot{width:6px;height:6px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.run{background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.dot.wait{background:var(--amber);box-shadow:0 0 0 3px var(--amber-dim)}
.dot.idle{background:var(--border-strong)}
.dot.done{background:var(--green)}
.pt-actions{margin-left:auto;display:flex;gap:8px}
.btn{height:30px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-surface);display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-subtle)}
.btn:hover{border-color:var(--border-strong);color:var(--text)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.pt-body{flex:1;overflow-y:auto;padding:20px 32px 28px;min-height:0}
.sec2{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:6px 0 12px}
.sec2 .ln{flex:1;height:1px;background:var(--border-faint)}
.sec2 .more{font-size:12px;color:var(--text-faint);font-weight:400;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-panel);padding:13px 14px;cursor:pointer;transition:border-color var(--ease),transform var(--ease);box-shadow:var(--shadow-card)}
.card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.card .row1{display:flex;align-items:center;gap:8px}
.card .ttl{flex:1;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sn{margin-top:6px;font-size:12px;color:var(--text-faint);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.card .meta{margin-top:9px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-faint)}
.card .meta .sp{flex:1}
.card .who{width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.card.new{border-style:dashed;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-faint);min-height:118px;box-shadow:none}
.card.new:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
/* 对话视图 */
.cv-head{padding:12px 24px 10px;border-bottom:1px solid var(--border-faint);display:flex;align-items:center;gap:10px}
.cv-back{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--border);color:var(--text-subtle);font-size:12.5px}
.cv-back:hover{background:var(--bg-hover);color:var(--text)}
.cv-title{font-size:15px;font-weight:600}
.cv-sub{margin-top:4px;font-size:12px;color:var(--text-faint)}
.msgs{flex:1;overflow-y:auto;padding:20px 24px;min-height:0}
.msg{margin-bottom:18px;max-width:820px}
.m-user{display:flex;justify-content:flex-end}
.m-user .bubble{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:10px 14px;max-width:74%}
.m-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.m-mark{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#8f6ce8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.m-name{font-size:12.5px;font-weight:600}
.m-model{font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:4px;padding:0 5px}
.m-time{font-size:11px;color:var(--text-faint)}
.m-body{font-size:14px;line-height:1.7}
.confirm-card{border:1px solid var(--green-border);background:var(--green-dim);border-radius:var(--r-lg);padding:12px 14px;margin:12px 0;max-width:640px}
.cc-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.cc-head .ic{color:var(--green)}
.cc-body{font-size:13px;color:var(--text-subtle);margin:6px 0 10px}
.cc-actions{display:flex;gap:8px;align-items:center}
.btn.sm{height:24px;padding:0 9px;font-size:12px}
.btn.green{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.cc-src{margin-left:auto;font-size:11px;color:var(--text-faint)}
.composer-wrap{padding:8px 24px 16px}
.composer{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-input);box-shadow:var(--shadow-card)}
.composer:focus-within{border-color:var(--accent)}
.composer textarea{width:100%;border:none;background:transparent;resize:none;font:inherit;color:var(--text);padding:11px 14px 4px;outline:none}
.composer textarea::placeholder{color:var(--text-faint)}
.cmp-row{display:flex;align-items:center;gap:6px;padding:6px 8px 8px}
.cmp-row .sp{flex:1}
.send{width:30px;height:30px;border-radius:var(--r-sm);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.model-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--border);font-size:11.5px;color:var(--text-subtle)}
.demo-tag{position:fixed;left:14px;bottom:12px;z-index:60;font-size:11px;color:var(--text-faint);background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px 10px;box-shadow:var(--shadow-card);pointer-events:none}
.demo-tag b{color:var(--text-subtle);font-weight:600}
</style>
</head>
<body>
<div class="app">
<aside class="side">
<div class="brand">
<div class="brand-mark"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="3.6" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="12" cy="20.4" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/></svg></div>
<span class="brand-name">Agent-System</span>
</div>
<button class="newproj"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建项目</button>
<div class="side-scroll">
<div class="sec">进行中 · 3</div>
<div class="proj on"><span class="oi" style="background:linear-gradient(135deg,#5b8def,#8f6ce8)">研</span><span class="n">研发体系文档</span><span class="c">4</span></div>
<div class="proj"><span class="oi" style="background:#2f855a">记</span><span class="n">记忆库建设</span><span class="c">3</span></div>
<div class="proj"><span class="oi" style="background:#b7791f">测</span><span class="n">真实模型测试</span><span class="c">2</span></div>
<div class="sec">已归档 · 1</div>
<div class="proj" style="opacity:.6"><span class="oi" style="background:#4a5568">旧</span><span class="n">旧文档迁移</span><span class="c">7</span></div>
</div>
<div class="side-foot">
<span class="avatar">W</span>
<span><div class="sf-n">weichen</div><div class="sf-s">研发体系团队 · OWNER</div></span>
<span class="sp"></span>
<button class="iconbtn" title="主题" onclick="const h=document.documentElement;h.dataset.theme=h.dataset.theme==='dark'?'light':'dark'"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg></button>
<button class="iconbtn" title="设置"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2Z"/></svg></button>
</div>
</aside>
<main class="main">
<!-- 门户视图 -->
<div class="view on" id="v-portal">
<div class="pt-head">
<div class="pt-crumb">项目 / 研发体系文档</div>
<div class="pt-title">
<span class="pt-oi">研</span>
<h1>研发体系文档</h1>
<span class="pt-actions">
<button class="btn"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>搜索项目内容</button>
<button class="btn">⋯</button>
<button class="btn primary" onclick="openConv()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建会话</button>
</span>
</div>
<div class="pt-desc">研发记忆与体系文档的沉淀、检索与生成。目标系统「两树一网」的载体项目。</div>
<div class="pt-stats">
<span class="stat"><b>4</b> 会话</span>
<span class="stat"><span class="dot run"></span><b>2</b> 运行中</span>
<span class="stat"><span class="dot wait"></span><b>1</b> 待确认</span>
<span class="stat"><b>5</b> 工件</span>
<span class="stat">成员 <b>6</b></span>
</div>
</div>
<div class="pt-body">
<div class="sec2">进行中的会话<span class="ln"></span><span class="more" onclick="toast('查看全部(设计稿示意)')">全部 ›</span></div>
<div class="grid">
<div class="card" onclick="openConv()">
<div class="row1"><span class="dot run"></span><span class="ttl">本周周报起草与素材汇总</span></div>
<div class="sn">检索本周 23 条素材,起草周报;已进入生成确认环节…</div>
<div class="meta"><span>3 分钟前</span><span>·</span><span>18 条消息</span><span class="sp"></span><span class="who" style="background:#5b8def">W</span></div>
</div>
<div class="card" onclick="openConv()">
<div class="row1"><span class="dot wait"></span><span class="ttl">接口设计文档评审</span></div>
<div class="sn">3 处契约变更待确认;评审材料已备齐,建议周四 14:00…</div>
<div class="meta"><span>1 小时前</span><span>·</span><span>9 条消息</span><span class="sp"></span><span class="who" style="background:#2f855a">Y</span></div>
</div>
<div class="card" onclick="openConv()">
<div class="row1"><span class="dot idle"></span><span class="ttl">文档规范修订意见收集</span></div>
<div class="sn">汇总各模块对文档规范 v2.4 的修订意见,输出对照表…</div>
<div class="meta"><span>昨天</span><span>·</span><span>12 条消息</span><span class="sp"></span><span class="who" style="background:#5b8def">W</span></div>
</div>
<button class="card new" onclick="toast('新建会话(设计稿示意)')"><svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建会话</button>
</div>
<div class="sec2" style="margin-top:22px">最近工件<span class="ln"></span><span class="more" onclick="toast('工件面板(设计稿示意)')">全部 ›</span></div>
<div class="grid">
<div class="card" onclick="toast('打开工件(设计稿示意)')">
<div class="row1"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5"/></svg><span class="ttl">周报_第39周.docx</span></div>
<div class="sn">10:24 生成 · 1,214 字 · 本周周报起草与素材汇总</div>
<div class="meta"><span>刚刚</span><span class="sp"></span><span>文档</span></div>
</div>
<div class="card" onclick="toast('打开工件(设计稿示意)')">
<div class="row1"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--green)"><path d="M4 4h16v16H4z"/><path d="M4 10h16M10 4v16"/></svg><span class="ttl">接口契约变更清单.md</span></div>
<div class="sn">09-29 · 3 模块 12 项变更 · 接口设计文档评审</div>
<div class="meta"><span>昨天</span><span class="sp"></span><span>文档</span></div>
</div>
</div>
</div>
</div>
<!-- 对话视图 -->
<div class="view" id="v-conv">
<div class="cv-head">
<button class="cv-back" onclick="closeConv()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>返回项目</button>
<span class="cv-title">本周周报起草与素材汇总</span>
<span style="flex:1"></span>
<button class="btn">分享</button>
<button class="btn">⋯</button>
</div>
<div class="cv-sub" style="padding:0 24px 8px;font-size:12px;color:var(--text-faint)">研发体系文档 · 2 个代理运行中 · 更新于 3 分钟前</div>
<div class="msgs">
<div class="msg m-user"><div class="bubble">把记忆库建设项目的本周素材汇总一下,并起草周报——重点写「两树一网」模型 v3 的进展。</div></div>
<div class="msg">
<div class="m-meta"><span class="m-mark">A</span><span class="m-name">助手</span><span class="m-model">GLM-4.6</span><span class="m-time">10:21</span></div>
<div class="m-body">已检索记忆库本周新增的 23 条素材:「两树一网」v3 初稿完成待合并意见;接口契约变更涉及 3 个模块;外部语料导入触发 2 条条目冲突已合并。</div>
<div class="confirm-card">
<div class="cc-head"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg>等待确认:生成《本周周报》草稿</div>
<div class="cc-body">按「进展 / 评审安排 / 风险」三节起草,约 1200 字。确认后写入工件并回写时间线。</div>
<div class="cc-actions"><button class="btn sm green">确认生成</button><button class="btn sm">调整大纲</button><span class="cc-src">来源:消息 #6</span></div>
</div>
</div>
</div>
<div class="composer-wrap">
<div class="composer">
<textarea rows="1" placeholder="给助手发消息;/ 唤起命令…"></textarea>
<div class="cmp-row"><span class="sp"></span><span class="model-chip">GLM-4.6</span><button class="send"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button></div>
</div>
</div>
</div>
</main>
</div>
<div class="demo-tag"><b>方案 C · 项目门户</b>设计稿 · 无后端 · 点击会话卡进入对话</div>
<script>
function openConv(){document.getElementById('v-portal').classList.remove('on');document.getElementById('v-conv').classList.add('on')}
function closeConv(){document.getElementById('v-conv').classList.remove('on');document.getElementById('v-portal').classList.add('on')}
function toast(msg){let t=document.getElementById('__t');if(!t){t=document.createElement('div');t.id='__t';t.style.cssText='position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:8px;padding:8px 16px;font-size:12.5px;box-shadow:var(--shadow-pop);transition:opacity .2s';document.body.appendChild(t)}t.textContent=msg;t.style.opacity=1;clearTimeout(t._h);t._h=setTimeout(()=>t.style.opacity=0,1400)}
</script>
</body>
</html>
+133
View File
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>界面重构方案总览 — Agent-System 设计稿</title>
<style>
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r-xl:14px;--r-lg:10px;--r-md:8px;--ease:.13s ease}
[data-theme="dark"]{--bg:#121316;--bg-panel:#191a1e;--bg-surface:#1f2026;--bg-hover:#26272f;--bg-input:#1c1d22;--border:#282a31;--border-strong:#373943;--border-faint:#202127;--text:#e8e9ec;--text-subtle:#a4a6ae;--text-faint:#71747e;--accent:#5b8def;--accent-dim:rgba(91,141,239,.13);--accent-soft:rgba(91,141,239,.22);--green:#41b26e;--green-dim:rgba(65,178,110,.13);--amber:#d99b3f;--shadow-card:0 1px 2px rgba(0,0,0,.25)}
[data-theme="light"]{--bg:#f6f7f8;--bg-panel:#fff;--bg-surface:#fff;--bg-hover:#f0f1f4;--bg-input:#fff;--border:#e5e6ea;--border-strong:#d4d6dd;--border-faint:#ececf0;--text:#1d1e23;--text-subtle:#5c5f68;--text-faint:#989ba4;--accent:#3a76e0;--accent-dim:rgba(58,118,224,.09);--accent-soft:rgba(58,118,224,.16);--green:#269a59;--green-dim:rgba(38,154,89,.09);--amber:#a8731d;--shadow-card:0 1px 2px rgba(20,22,28,.05)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);min-height:100vh;padding:40px 48px 60px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1060px;margin:0 auto}
.top{display:flex;align-items:flex-start;gap:16px;margin-bottom:34px}
.mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#8f6ce8);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
h1{font-size:24px;font-weight:700;letter-spacing:-.3px}
.sub{margin-top:6px;color:var(--text-subtle);font-size:13.5px;line-height:1.6}
.sub code{font-family:var(--mono);font-size:12px;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.sp{flex:1}
.tbtn{width:34px;height:34px;border-radius:9px;background:var(--bg-panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);cursor:pointer}
.tbtn:hover{color:var(--text-subtle)}
svg.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);position:relative;transition:border-color var(--ease)}
.card:hover{border-color:var(--border-strong)}
.card.rec{border-color:var(--accent-soft)}
.badge{position:absolute;top:-9px;left:16px;font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-soft);border-radius:6px;padding:2px 8px}
.card h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.card h3 .en{font-size:11px;color:var(--text-faint);font-weight:500;letter-spacing:.4px}
.card p{font-size:12.5px;color:var(--text-subtle);line-height:1.65;margin:6px 0 12px}
.wire{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:4px;background:var(--bg)}
.wire .w{display:flex;height:120px}
.wire .c{border-right:1px solid var(--border-faint);display:flex;flex-direction:column;gap:3px;padding:7px}
.wire .c:last-child{border-right:none}
.wire .b{border-radius:3px;background:var(--bg-hover);height:7px}
.wire .b.a{background:var(--accent);height:14px;border-radius:4px}
.wire .b.g{background:var(--bg-input);border:1px solid var(--border)}
.wire .b.k{width:60%}
.wire .b.m{background:var(--green-dim);border:1px solid rgba(65,178,110,.4)}
.wire .b.y{background:var(--amber);opacity:.8;height:9px;width:34%}
.open{margin-top:auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r-md);background:var(--accent);color:#fff;font-weight:600;font-size:13px;cursor:pointer;border:none;width:fit-content}
.open:hover{filter:brightness(1.08)}
.ghost{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-subtle)}
.ghost:hover{filter:none;border-color:var(--border-strong);color:var(--text)}
h2{font-size:17px;font-weight:700;margin:36px 0 12px;letter-spacing:-.2px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border-faint)}
th{color:var(--text-faint);font-weight:500;font-size:12px}
td.win{color:var(--text);font-weight:600;background:var(--green-dim)}
tr.rec-row td:first-child{font-weight:700}
tr.rec-row td.win{box-shadow:inset 2.5px 0 0 var(--green)}
.note{margin-top:26px;font-size:12.5px;color:var(--text-faint);line-height:1.7;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 16px}
.note b{color:var(--text-subtle)}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<div class="mark"><svg class="ic" viewBox="0 0 24 24" style="width:22px;height:22px"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="3.6" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="12" cy="20.4" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/></svg></div>
<div>
<h1>界面重构与多用户认证 · 方案总览</h1>
<div class="sub">2026-09-30 · 设计提案配套 demo(静态、无后端,明暗主题可切换)· 完整提案见 Documents 仓 <code>docs/proposals/2026-09-30-ui-redesign-and-auth.md</code></div>
</div>
<span class="sp"></span>
<button class="tbtn" title="切换主题" onclick="const h=document.documentElement;h.dataset.theme=h.dataset.theme==='dark'?'light':'dark'"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg></button>
</div>
<div class="grid">
<div class="card rec">
<span class="badge">推荐</span>
<h3>方案 A · 任务中心<span class="en">TASK-CENTRIC</span></h3>
<div class="wire"><div class="w">
<div class="c" style="flex:0 0 34%"><span class="b a" style="width:80%"></span><span class="b g k"></span><span class="b"></span><span class="b"></span><span class="b k"></span><span class="b"></span><span class="b k"></span></div>
<div class="c" style="flex:1"><span class="b m k"></span><span class="b"></span><span class="b k"></span><span class="b y"></span><span class="b m"></span></div>
<div class="c" style="flex:0 0 22%"><span class="b y"></span><span class="b m"></span><span class="b"></span><span class="b k"></span><span class="b m k"></span></div>
</div></div>
<p>创建入口唯一置顶(新建任务 ⌘N + 次级菜单);项目/时间线是列表的<b>视图模式</b>而非树;置顶区 + 归档;侧栏 Footer 承载账户与租户身份。与 ZCode 桌面端范式同构,兼容既有 D25/D26/D31 决策。</p>
<button class="open" onclick="location.href='demo-a-task-centric.html'">打开方案 A demo</button>
</div>
<div class="card">
<h3>方案 B · 活动栏<span class="en">ACTIVITY RAIL</span></h3>
<div class="wire"><div class="w">
<div class="c" style="flex:0 0 9%;align-items:center"><span class="b a" style="width:70%"></span><span class="b" style="width:70%"></span><span class="b" style="width:70%"></span><span class="b" style="width:70%"></span><span class="b" style="width:70%"></span></div>
<div class="c" style="flex:0 0 26%"><span class="b g"></span><span class="b a k"></span><span class="b"></span><span class="b k"></span><span class="b"></span></div>
<div class="c" style="flex:1"><span class="b m k"></span><span class="b"></span><span class="b k"></span><span class="b y"></span><span class="b m"></span></div>
<div class="c" style="flex:0 0 20%"><span class="b y"></span><span class="b m"></span><span class="b k"></span></div>
</div></div>
<p>最左图标轨切换领域(任务/收件箱/代理/工件/设置/账户),第二栏随活动渲染列表。导航可无限扩展(插件域友好),但创建是二级动作、多占一列——适合域数量 ≥ 6 后启用。</p>
<button class="open ghost" onclick="location.href='demo-b-activity-rail.html'">打开方案 B demo</button>
</div>
<div class="card">
<h3>方案 C · 项目门户<span class="en">PROJECT PORTAL</span></h3>
<div class="wire"><div class="w">
<div class="c" style="flex:0 0 26%"><span class="b a k"></span><span class="b"></span><span class="b k"></span><span class="b"></span><span class="b k"></span></div>
<div class="c" style="flex:1;justify-content:center"><span class="b k"></span><span style="display:flex;gap:4px"><span class="b" style="flex:1;height:26px"></span><span class="b" style="flex:1;height:26px"></span><span class="b a" style="flex:1;height:26px"></span></span><span style="display:flex;gap:4px"><span class="b" style="flex:1;height:26px"></span><span class="b" style="flex:1;height:26px"></span></span></div>
</div></div>
<p>项目是页面:门户首页为会话卡片网格 + 统计 + 项目内新建,点卡片进入对话。项目总览最好,但高频会话多一跳、对话-first 被破坏——适合以交付物为中心的少量项目。</p>
<button class="open ghost" onclick="location.href='demo-c-project-portal.html'">打开方案 C demo</button>
</div>
<div class="card">
<h3>认证与租户<span class="en">AUTH & TENANCY</span></h3>
<div class="wire"><div class="w">
<div class="c" style="flex:1;justify-content:center"><span class="b a" style="width:36%"></span><span class="b g k"></span><span class="b g"></span><span class="b k"></span><span class="b" style="width:26%"></span></div>
<div class="c" style="flex:0 0 44%;background:linear-gradient(160deg,#1b2340,#2c2560)"><span class="b" style="width:60%;background:rgba(255,255,255,.25)"></span><span class="b" style="width:80%;background:rgba(255,255,255,.14)"></span><span class="b" style="width:50%;background:rgba(255,255,255,.14)"></span></div>
</div></div>
<p>登录(访问密钥 / 邮箱密码双 tab)、注册即建租户(OWNER)、应用内账户菜单(多租户切换、API 密钥)、成员与角色管理。配套认证阶段 2 的 orgs / memberships / 服务端会话设计。</p>
<button class="open" onclick="location.href='demo-auth.html'">打开认证 demo</button>
</div>
</div>
<h2>方案对比</h2>
<table>
<thead><tr><th>维度</th><th>A 任务中心(推荐)</th><th>B 活动栏</th><th>C 项目门户</th></tr></thead>
<tbody>
<tr class="rec-row"><td>解决创建入口分裂</td><td class="win">完全</td><td>部分</td><td>部分(上下文内)</td></tr>
<tr><td>跨项目浏览</td><td class="win">优(视图切换)</td><td>中</td><td>中</td></tr>
<tr><td>身份/租户常驻</td><td class="win">Footer 账户区</td><td>图标位</td><td>Footer</td></tr>
<tr><td>与既有决策兼容(D25/D26/D31)</td><td class="win">完全</td><td>需调 D25</td><td>张力大</td></tr>
<tr><td>改造量</td><td class="win">中</td><td>大</td><td>大(含视图路由)</td></tr>
<tr><td>扩展性(未来插件域)</td><td>中</td><td class="win">优</td><td>中</td></tr>
</tbody>
</table>
<div class="note">
<b>说明</b>:demo 为静态设计稿(无后端,交互为演示性),视觉规格(色板 / 字号阶 / 圆角嵌套 / 状态色语义)即 R4 设计令牌的目标值来源。方案 A 支持 ⌘B 收起侧栏、按项目 / 时间线组织切换、新建菜单、账户菜单、明暗主题切换。<br>
<b>决策待定</b>:方向裁定(默认 A)→ 另立实施提案(R1 左栏重构 → R2 认证阶段 2 → R3 成员与租户 → R4 视觉收敛)。
</div>
</div>
</body>
</html>
@@ -0,0 +1,37 @@
# 2026-09-30 · cardflow-r1 验证记录(CF1 机制 + CF2 收尾)
任务:Dev 仓 `feature/cardflow-r1`(提案 [2026-09-30-cardflow-and-process-split.md](../proposals/2026-09-30-cardflow-and-process-split.md),D39–D43)。
## 证据矩阵
| 层 | 验证 | 结果 |
|---|---|---|
| Core 契约 | `go test ./...`(golden message.json 锁定 `cardId` 线格式) | ok |
| Backend 机制 | `internal/runtime`(submit_card 门控/产卡/引用部件)、`internal/ctxasm`(回填/截断/占位/card(n) 观测) | ok |
| Backend 全链路 | `internal/server` e2e `TestMockCardflowFullLoop`:#cardflow → result 卡入收件箱 → 助手消息含 cardId 引用部件 → finishRun 回填 AnchorMessageID | ok |
| UI 组件 | `npx tsc --noEmit` 0 错误;`npx vitest run` 39/39(card-anchor 6 用例:摘要行/展开/收起/locate 不触发展开/无卡兜底/无 locate 不渲染按钮) | ok |
| Frontend | `npx tsc --noEmit` 0 错误;`npx vitest run` 27/27(live 分桶/过程标记 + 既有回归) | ok |
| Dev 组合 | `make test` 退出码 0;`make build` 版本串 core=bcfacee+backend=ef17ad0+frontend=832a2ad+ui=31019ad | ok |
## 双态零页面走查(无头 Chromium 1680×1000,mock 服务 127.0.0.1:18923)
| # | 断言 | 结果 |
|---|---|---|
| 1 | 关闭态:普通消息出现过程折叠(行为不回退) | PASS |
| 2 | 关闭态:无卡流锚点 | PASS |
| 3 | 设置:`ui.cardflow` 写入 user scope 200 | PASS |
| 4 | 设置:schema 含 ui.cardflow(ui 组,默认 false) | PASS |
| 5 | 开启态:#cardflow 后中栏出现卡流锚点 | PASS |
| 6 | 开启态:锚点内联展开全文(含决议正文——D38 中栏自足) | PASS |
| 7 | 开启态:收件箱出现 result 卡(会议纪要 · 第 12 次周会) | PASS |
| 8 | D32:收件箱卡「↙ 定位到对话」滚动中栏至产生消息(data-msg-id) | PASS |
| 9 | 锚点「↗ 收件箱」定位收件箱卡 | PASS |
合计 9/9 通过;构建组合:bin/agent-system(0c4e404+core=bcfacee+backend=ef17ad0+frontend=832a2ad)。
## 说明与剩余项
- backend/frontend 分支已 rebase 至并行任务 `feature/chat-process-split-r1` 演进 tip(ae8e5d0 / 754ce83)之上,冲突双方语义均保留(fakeRunCtx 字段合并、两套测试并存)。
- 任务 1(chat-process-split-r1)的 review-fix 与 PR 归并行会话所有者;本任务卡与 PR 链只覆盖 cardflow-r1。
- PR 链(core→documents→ui→backend→frontend→Dev gitlink)依赖 Gitea 面板可用性:面板中断期间全部分支已推送(SSH),PR 创建与合入由 `/tmp/cardflow-pr-chain.sh` 面板恢复后自动执行(含 Dev 分支落后基线检查,落后即中止转人工)。
- 远期(CF3):卡片内容流式、飞书/微信通道投影、与 artifact 统一、跨会话项目级收件箱。
@@ -0,0 +1,27 @@
# T4 验证记录:工作区弹层(feature/workspaces-r1)
被测版本组合:core=a2050d8 + backend=<PR#11 后> + frontend=<PR#7 后> + ui=<PR#8 后> + documents=本记录;Dev 组合 PR:见任务卡(feature/workspaces-r1)。
initial_base_sha(R0):fc5008aa13(T3 合入后 main)。
日期:2026-09-30。
## 结果
| 用例 | 结果 | 证据 |
|---|---|---|
| Backend `go vet` + `go test ./...` | PASS | 全包 ok;plugins 新增 TestWorkspacesOverlay(manifest+workspaces/main.json 装载、ListWorkspaces 声明含 shortcut/body) |
| UI `tsc --noEmit` + `vitest run` | PASS | 23/23(OverlayHost:标题/图标/徽章/快捷键提示、捕获相 Esc 关闭、仅遮罩点击关闭、刷新回调、声明式+命令式共存) |
| Frontend `tsc` + `vitest` + `vite build` | PASS | 9/9;构建通过(dist 产物正常) |
| Example 插件扩展 | PASS | plugins/example:provides 增 workspaces/commands;workspaces/main.json(example.governance,⌘9)与 commands/demo.json(example.echo,normal 级)JSON 校验通过;随 Dev 组合 PR 落库 |
| 组合 `make test` | PASS | Dev 钉定后组合验证(见 Dev 任务卡与组合 PR) |
## 落库清单(本任务)
- backend:plugins host 装载 provides.workspaces(workspaces/*.json → PluginWorkspace overlay)+ ListWorkspaces;GET /api/workspaces。
- ui:OverlayHost(统一弹层容器:Esc/遮罩回对话现场、快捷键提示、徽章、刷新;声明式 Body 与命令式子组件共存)。
- frontend:右栏终态纯收件箱(经典 tabs 移除;Plan/Todos 并入「当前任务」常驻卡);工件/代理/插件面板/插件声明工作区统一为 OverlayHost 弹层(Workspaces.tsx);⌘1–9 快捷键;左栏工作区快捷区;会话头项目徽章(D26);DocViewer/AgentTracker 迁入 OverlayHost。
- Dev:example 插件扩展(workspace + command 声明)。
## 限制
- 工作区 badgeTool/refreshTool 的服务端工具联动为声明占位(v1 前端整体刷新 Body;按需刷新待插件生态立项)。
- 浏览器端 ⌘ 快捷键与零页面走查归 T5 系统级验收剧本。
@@ -0,0 +1,39 @@
# T5 验证记录:polish-retreat(feature/polish-r1)
被测版本组合:core=a2050d8 + backend=303cdf3 + frontend=4f4711a + ui=1c2ddec + documents=本记录;Dev 组合 PR:见任务卡(feature/polish-r1)。
initial_base_sha(R0):91e616e03d(T4 合入后 main)。
日期:2026-09-30。
## 零页面走查(系统级验收剧本,D31 对话完备性)
全新实例(空数据目录 + 真实单二进制 `serve --mock` + example 插件)**纯对话/命令/卡驱动全生命周期,12/12 PASS**:
| # | 场景 | 结果 |
|---|---|---|
| 1 | 零页面:空实例零项目 | PASS |
| 2 | 对话建立项目与会话 | PASS |
| 3 | `/help` 经命令总线(slash 入口) | PASS |
| 4 | `#upload` 摄取卡全周期(2 卡:progress=done / compare=action_required) | PASS |
| 5 | 卡上动作 keep → resolved + 回执留痕(card 入口) | PASS |
| 6 | 一键收纳 done→dismissed;resolved 留痕不动 | PASS |
| 7 | HITL 阻断与解除(对话内完备) | PASS |
| 8 | button 入口直发命令 committed(四入口闭环) | PASS |
| 9 | 插件工作区声明可见(example.governance) | PASS |
| 10 | `#doc` 工件产出(对话触发) | PASS |
| 11 | 审计信封:slash=2 button=2 入口均有记录 | PASS |
| 12 | 全程无预制数据、无 UI 专属旁路 | PASS(脚本即证) |
## 其余 T5 项
| 项 | 结果 | 证据 |
|---|---|---|
| 状态灯形状+色双编码复核 | PASS | ui 套件 StatusLamp 断言(◆/●/✓/✕/◌ + tone 类);走查中各状态均现 |
| 收纳策略 | PASS | 🧹 一键收纳(done→dismiss;resolved 盖章不动)走查项 6;右栏收起角标(rail-badge) |
| 文档更新 | PASS | usage 指南 §4.2–4.7/§5/§6.2/§7 重写(收件箱/命令总线/工作区);本记录 |
| Frontend tsc+vitest+build | PASS | 9/9;构建产物正常 |
| 组合 make test | PASS | Dev 钉定后(见任务卡) |
## 限制
- 走查以 API 驱动真实二进制执行(等效系统级),像素级浏览器视觉走查未自动化(组件测试 + 构建覆盖渲染层);后续可在浏览器插件化后纳入剧本。
- 通知"铃铛"远期形态仍未引入(提案 §7 远期项,非 T5 范围)。