versun/claude-code
1
0
Fork 0
mirror of https://github.com/claude-code-best/claude-code.git synced 2026-06-20 07:15:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dynamic-workflow 来了 (#1271)

Browse Source 
* feat(workflow): add workflow engine, /workflows panel, /ultracode skill

将 feat/sdk-backend 分支中 workflow 相关的 20 个 commit 压缩为单 commit：

- 工作流引擎核心：phase / agent / parallel / pipeline 编排原语（packages/workflow-engine/）
- /workflows 面板：三区焦点布局（顶部 run tabs + 左侧 phase 侧栏 + 右侧 agent 列表）
- /ultracode skill：多 agent workflow 编排入口
- 进度存储 / journal / notification 系统
- WorkflowService 生命周期管理 + SentryErrorBoundary
- 脚本沙箱：禁用 dynamic import()、JSON args 防御性归一化
- journal 与 named-workflow 路径统一在 projectRoot
- 错误处理：parallel/pipeline hooks 错误日志、failure routing、semaphore abort
- workflow 工具升级为 core 工具 + PascalCase 命名

Co-Authored-By: glm-5.1 <zai-org@claude-code-best.win>

* feat(workflow): 复刻 ultracode 手册并修复 worktree/inline/opt-in 三处缺口

围绕 ultracode skill 审查 agent 系统一致性后：
- ultracode.ts: 用系统提示版完整 Workflow 编排手册替换中文精简版
- HIGH#1 isolation:'worktree': claudeCodeBackend.run() 用 createAgentWorktree +
  runWithCwdOverride 包裹 runAgent + finally 清理实现真正的 cwd 隔离；slug 用
  sha256(runId:agentId) 派生以匹配 cleanupStaleAgentWorktrees 清理正则
  （修 runId 为 w+base36 非 UUID 导致的泄漏盲区）；worktree.ts 注释同步修正
- HIGH#2 inline 持久化: 新增 persistInlineScript，WorkflowTool + service 两条
  inline 路径对称持久化到 .claude/workflow-runs/<runId>/script.js，返回可复用
  scriptPath（闭环 inline→编辑→scriptPath 重提迭代循环）
- HIGH#3 opt-in 分工: ultracode/WorkflowTool/effort 注明 session reminder 由
  harness 注入，repo 内无 ultracode 信号，保持 feature('WORKFLOW_SCRIPTS') +
  isEnabled 两层 gate，不自造注入
- 测试: 新增 persistInline.test.ts；扩展 claudeCodeBackend(isolation 4 用例)/
  WorkflowTool(inline)/service(scriptPath)/ultracode(harness)

含配套 workflow engine/panel 完善与 run-state-persistence design doc。

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(workflow): run 终态落盘 state.json 支持跨重启恢复

终态 RunProgress（含 returnValue/error）此前只在内存 ProgressStore，进程
重启即丢失。本次让其落盘到 .claude/workflow-runs/<runId>/state.json，使
(a) 重启后可按 runId 取 return、(b) /workflows 面板跨重启展示历史 run。
跨进程 resume 明确不在范围。

- persistence.ts: getRunsDir/writeRunState/readRunState/listPersistedRuns
  + attachRunStatePersistence；原子覆盖写（tmp+rename），读容错（缺文件/
  损坏/schemaVersion 不符 → null），写 best-effort（IO 失败只 log warn）
- progress/store.ts: 加 hydrate(run) 直接注入磁盘 run（已存在 runId 跳过，
  内存优先）
- service.ts: getWorkflowService() 接线 attachRunStatePersistence(bus,
  store) 订阅 run_done（completed/failed/killed 三态共用，shutdown-kill
  也走同路径，无需额外钩子）；WorkflowService 加 getRunAsync(id) 内存
  miss→读盘 fallback（不注入内存）+ loadPersistedRuns() 扫盘 hydrate
  （persistedLoaded flag 守护幂等）
- panel/WorkflowsPanel.tsx: mount 时调一次 loadPersistedRuns（重 mount
  不重复）
- ports.ts: runsDir 改用 getRunsDir() 消除拼接重复
- 测试: persistence.test.ts(11)/runStatePersistence.test.ts(5)/
  progressStore(2)/service(5)/WorkflowsPanel(1) 共 24 个新测试；
  precheck 5629 pass / 0 fail

设计偏离: 计划原写 monkey-patch getRunsDir 指向 tmpdir，Bun ESM namespace
不可变不可行；改用可选 runsDirProvider 参数（默认 getRunsDir）DI 注入，
加到 attachRunStatePersistence 与 makeService（cwdOverride 之后第 4 参），
与现有 cwdOverride 模式一致。makeService 的 cwdOverride 保持不变，不破坏
inline 持久化特性。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(workflow): 默认并发降为 3 并支持 per-run maxConcurrency 注入

- DEFAULT_MAX_CONCURRENCY=3 替代旧的 min(16, cores-2)；MAX_CONCURRENCY_CAP=16 保留为用户输入的绝对上限
- 新增 clampMaxConcurrency() 处理 undefined/<1/>CAP 边界
- WorkflowInput schema 新增 maxConcurrency: number.int().min(1).max(16).optional()
- 引擎层 context/runWorkflow 全链路透传：semaphore 容量来自 per-run 入参
- WorkflowTool prompt 增加指引：fan-out 场景先用 AskUserQuestion 与用户确认并发再启动
- 同步 ultracode skill + audit workflow spec 的并发文字（删 cpu-cores 公式）
- 同步 docs/features/workflow-scripts.md 旧公式

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(workflow): 面板 UI 字符串英文化

WorkflowsPanel 中 4 处面向用户的中文（onDone 错误消息、键位提示行）
改为英文；其他面板组件（AgentList/TabsBar）原本已是英文。代码注释
保留中文，与 workflow 模块惯例一致。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(workflow): 中断系统（x 杀单 agent / K 杀整个 workflow，Dialog 二次确认）

- claudeCodeBackend 桥接 ctx.signal → runAgent.override.abortController（修 'x' 无效根因：abort 到不了内部 fetch）
- AbortError 识别为 throw WorkflowAbortedError（不再吞成 dead，workflow 能感知被 kill）
- ports.taskRegistrar 加 registerAgentAbort/unregisterAgentAbort/killAgent；service.killAgent(runId, agentId) 精确中断
- 面板键位：'x' 杀当前 agent（agents 列聚焦时） / 'K' 杀整个 workflow；Dialog 二次确认 + confirm 模式吞导航键防误触
- 新增测试 8 项（backend signal bridge / hooks inject / ports killAgent / service killAgent）

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* docs(workflow): ultracode skill 加 model tier 选择指引（haiku/sonnet/opus/best 场景匹配）

补足 agent() 已有 model 参数缺的判断依据：列出 4 个 tier 的成本/延迟量级和典型场景，
明确"无法 articulate 为什么换 tier 就 omit"的 rule of thumb。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(workflow): maxConcurrency≠3 必须先 AskUserQuestion（默认 3 推荐值）

把 fan-out 时才问改成任何 maxConcurrency≠3 都必须问。
唯一例外：用户在当前会话已明确说过并发数（"use 6" / "maxConcurrency 9"）。
prompt (WorkflowTool.ts) + skill (ultracode.ts) + audit spec 三处同步。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(workflow): agent 失败自动重试一次（dead 或非 abort throw）

- hooks.agent 包装 invokeBackend：第一次 dead 或非 abort throw → 重试一次
- WorkflowAbortedError（kill）不重试——是用户意图
- registry.resolve 配置错（AdapterNotFoundError 等）在 try 外直接上抛，不走重试——
  配置问题重试无意义且掩盖 bug
- 重试仍失败：dead 保持 dead；throw 降级 dead（不击穿 workflow，
  与 parallel/pipeline null-on-error 契约一致）
- budget 不重复扣：dead 不 addOutputTokens，重试 ok 才扣一次
- 新增 7 项 hooks 层重试测试 + 1 项 service 层降级测试

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(workflow): 面板 label 截断保留 #数字 后缀（同 dim 多 finding 可区分）

audit workflow 用 verify:\${dim}#\${findingIdx} 命名 verify agent。
旧逻辑 slice(0, 18) 从右切把 #idx 全吃了——同 dimension 多 finding
肉眼无法区分。新逻辑：含 #数字 后缀时保留后缀，前缀截断 + … 省略号。

例：verify:correctness#0 → verify:correctn…#0
   verify:architecture#15 → verify:archite…#15

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(workflow): kill 整个 workflow 后立即回主 chat

run_done→store→notifications.ts 的通知路径已有，但 confirmYes 后面板继续
挂着挡住主 chat，用户看不到"已停止"反馈。kill 后调 onDone() 立即退出面板，
让主 chat 的 `Workflow "<name>" was stopped` 通知直接可见。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(workflow): agent dead 带 reason/detail + prompt 加压 StructuredOutput

12 agent audit workflow 8 个 dead，journal 只记 {kind:"dead"} 无信息，
事后无法区分 "agent 没产 StructuredOutput" vs "runAgent 抛错"。
证据指向主因：sonnet 长 tool chain 后忘记调 StructuredOutput，
extractStructuredOutput 返回 null 即降级 dead。

- types.ts: AgentRunResult.dead 加可选 reason/detail 字段
  （no-structured-output / runagent-threw / worktree-failed / unknown）
  兼容旧 journal（均 optional）。
- claudeCodeBackend.ts: 三处 dead 填 reason + detail；
  no-structured-output 把 finalized 文本前 200 字符做 detail，
  让日志/面板能立刻看到 agent 最后说了什么。
- claudeCodeBackend.ts: schema 模式 prompt 首尾各放一次
  StructuredOutput 强制要求，针对 sonnet 长 tool chain 后忘记收尾。
- hooks.ts: retry 日志带 reason；retry 仍 throw 时降级 dead 也填
  reason=runagent-threw + detail。
- types.test.ts: 加 reason JSON 往返 + 旧 journal 兼容测试。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(workflow): schema 模式弃用 StructuredOutput 工具契约，改鲁棒 JSON 文本解析

上一轮 70a2f76 把"agent 长 tool chain 后忘调 StructuredOutput"当作死因，
加 prompt 头尾双强制。但实测跑 5 个 review agent 4 个 dead，detail 全是
"StructuredOutput tool is not available as a deferred tool"——根因是
该工具从未注入 workflow sub-agent 的工具集（assembleToolPool 默认池不含，
只有 stop_hook 路径 execAgentHook.ts 显式 createStructuredOutputTool()）。
prompt 反复要求调一个不可达的工具，agent 困扰、长篇辩解、最终没产 JSON。

- claudeCodeBackend.ts:
  - extractStructuredOutput 重写：括号栈扫描替代 indexOf/lastIndexOf，
    处理嵌套对象、字符串内的括号、转义符；新增 fenced code block
    优先路径（```json / ```），多 JSON 块取第一个 parse 成功的；
    只返回 plain object（拒 array/number/string/null）。不做语法修复
    （尾逗号/单引号/注释）——避免在字符串内误改（如 "http://" 被 // 注释正则吃）。
  - schema 模式 prompt 简化：删首尾双 STRUCTURED OUTPUT 强制（600+ token），
    改成指示 agent 在最后文本块 emit raw JSON；明确告知"StructuredOutput
    is not available in this environment"，消除调用幻觉。
- hooks.ts: detail.slice 用 typeof === 'string' 守卫；catch 块用
  e instanceof Error ? e.message : String(e)（旧 journal / 第三方 adapter
  可能写非 string detail，直接 .slice 会抛 TypeError 击穿日志）。
- claudeCodeBackend.test.ts: +9 测试覆盖 fenced / 嵌套 / 字符串内括号 /
  转义引号 / 多块取首 / 类型守卫 / 损坏 JSON。

precheck: 5663 pass / 0 fail。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* docs(effort): 新增 /effort 交互面板设计 spec

设计要点：
- /effort 无参 → 横向 slider 面板（low/medium/high/xhigh/max/ultracode）
- ←/→ 移动光标，Enter 确认，Esc 取消
- ultracode 仅视觉占位，确认后提示走 /ultracode <context>
- env override 时双标记 + 顶部警告
- 模型不支持时面板禁用
- 两阶段交付：先基础面板 commit，再做 ultracode 波纹动画

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* docs(effort): 新增 EffortPanel 基础面板实施计划（第一阶段）

按 TDD 分 6 个 task：纯函数状态 → keybinding 注册 → 组件 → 命令挂载 → 分支测试 → precheck。
波纹动画在第二阶段单独 commit。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* docs(effort): plan 补 q/ctrl+c 取消绑定，对齐 spec §5 状态机

verifier 抓到的 gap：spec §5 写明 Esc / Ctrl+C / q 都是取消事件，
但 plan Task 2.3 只绑了 escape。补上 q 和 ctrl+c → effortPanel:cancel。
同时把 Step 2.2 直接写成 6 个 action 版本（home/end），删除迂回表达。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* docs(effort): plan 修订执行前 review 发现的 5 处 gap

- Task 3.3 EffortPanel.tsx 草稿：Faster/Smarter padEnd 语法错乱重写；
  useKeybindings import 路径从 @anthropic/ink 修正为 ../../keybindings/useKeybinding.js；
  移除冗余 renderSeparatorLine；保留 renderPaddedLine
- Task 5.2 computeConfirmOutcome 改为注入 ApplyFn 模式：
  避免 effortPanelState → effort.tsx → EffortPanel 循环依赖；
  测试可注入 mockApply，无需 mock settings
- Step 5.3 测试代码对齐注入版签名

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(effort): 新增 EffortPanel 纯函数状态模块（PanelPosition + 移动/初始光标）

仅含纯函数与类型，无 React/Ink 依赖，便于单测。
- PANEL_POSITIONS：low → medium → high → xhigh → max → ultracode
- moveLeft/moveRight：边界钳制（low 不再左移、ultracode 不再右移）
- getInitialCursor：env override > displayed level

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(keybindings): 注册 EffortPanel context 与 6 个 action

绑定 ←/→/h/l/home/end/enter/escape/q/ctrl+c 到 effortPanel:* action。
与 ModelPicker context 范式一致，避免左右键被全局 keybinding 拦截。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(effort): 实现 EffortPanel 组件主体（渲染 + 键盘交互 + 确认/取消分支）

- 横向 slider 布局：Faster ↔ Smarter 两极，6 档刻度
- useKeybindings 注册 EffortPanel context（←/→/h/l/home/end/enter/escape/q/ctrl+c）
- Enter 在 5 档之一 → 调 executeEffort 写 settings + AppState
- Enter 在 ultracode → 输出引导文案，不写状态
- Esc/q → "Effort unchanged."
- env override 时顶部黄色警告
- computeConfirmOutcome 注入 ApplyFn，便于测试（Task 5 补测试）

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(effort): /effort 无参时挂载 EffortPanel 交互面板

- 无参 → <EffortPanelWrapper> 透传 AppState.effortValue
- current/status → 仍显示文本（不变）
- 有参 → 直跳 executeEffort（不变）
- help/-h/--help → 不变

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* test(effort): 补 computeConfirmOutcome 分支测试（注入 mockApply）

- ultracode → kind=ultracode-hint，不调 applyFn
- low → kind=apply，message/effortUpdate 来自 applyFn
- applyFn 返回无 effortUpdate 时 outcome.effortUpdate 为 undefined
- CANCEL_MESSAGE / ULTRACODE_HINT 常量

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(effort): 测试里 cursor cast 为 EffortValue，避免 PanelPosition 含 ultracode 触发 TS 错误

computeConfirmOutcome 的 ApplyFn 契约要求 EffortValue，但测试 mockApply 接收 PanelPosition。
实际运行时 computeConfirmOutcome 在 ultracode 档位走 hint 分支不会调 applyFn，
cast 安全。precheck 全量通过：5688 tests / 0 fail。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(effort): 面板对齐与配色修复

- 对齐：用 Box width={SEGMENT} + justifyContent="center" 让 ▲ 与档位名严格居中对齐，
  替代之前 string padEnd(11) 与 SEGMENT=12 不一致导致的 1 列偏移
- 配色：所有面板文字改用 theme.claude（Claude Orange rgb(215,119,87)），
  替代终端默认紫；分隔线/副标签/底栏用 theme.subtle；env 警告用 theme.warning
- 光标档位的档位名也加粗，强化视觉焦点

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(effort): 面板文字改紫色，ULTRACODE_HINT 英文化

- 颜色：theme.claude（橙）→ theme.purple_FOR_SUBAGENTS_ONLY（Purple 600, rgb(147,51,234)），
  覆盖标题、Faster/Smarter、▲、档位名
- ULTRACODE_HINT：中文 → 英文
  "ultracode is not an effort level. Use /ultracode <context> to start a multi-agent workflow."

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(effort): 统一用色版——选中 suggestion（蓝），未选中 subtle（灰）

弃用 purple_FOR_SUBAGENTS_ONLY（subagent 专用）。改与项目其他面板一致：
- 选中档位 + ▲：color="suggestion"（Medium blue rgb(87,105,247)）+ bold
- 未选中档位 + 空 ▲ 占位：color="subtle"（Light gray rgb(175,175,175)）
- 标题 / Faster / Smarter：color="suggestion"
- 分隔线 / 副标签 / 底栏：color="subtle"

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(workflow): 终态前补发 phase_done，面板自动退出 running→terminal 转换

runWorkflow：脚本结束时 hook.phase 不会触发最后一个 phase 的 phase_done，
UI 左栏会永远显示 running。三路径（completed/killed/failed）统一在 run_done
之前补发 emitTerminalPhaseDone。

WorkflowsPanel：抽 isRunTerminatedTransition 纯函数判定 running → terminal，
面板 useEffect 检测到转换后自动退出聚焦。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(effort): 波纹动画纯函数 pickChar/computeRippleLine/mergeLayers + 18 测试

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(effort): useRippleFrame hook 包装 useAnimationFrame，按需订阅时钟

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(effort): EffortPanel 集成波纹背景——cursor 停在 ultracode 时切换波纹模式

仅在 cursor === 'ultracode' 时启用 useRippleFrame，渲染 5 行波纹背景
+ overlay 文字（Faster/Smarter、分隔线、▲、档位名、副标签）。
其余档位保持原 PlainContent 渲染路径不动。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* refactor(effort): 波纹动画从字符密度改为颜色渐变

按原版风格把波纹背景从 INTENSITY_CHARS 密度字符（'·∙░▒▓'）改为
suggestion 系颜色渐变（transparent → 暗深紫蓝 → suggestion → 高光）：

rippleAnimation.ts:
- 删除 pickChar / INTENSITY_CHARS / WAVE_PEAK_CHARS / mergeLayers
- 新增 intensityToColor(intensity) → 'transparent' | '#xxxxxx'
- 新增 computeRippleCells 返回 Cell[]（每位置 char+color）
- 新增 applyOverlaysToCells(cells, overlays) 替代 mergeLayers
- 新增 cellsToSegments(cells) 合并相邻同色段（减少 Text 节点）

EffortPanel.tsx:
- RippleContent 用 cells→segments→tokens 渲染
- 空格段用 BaseText backgroundColor 染色块（纯色块视觉）
- 文字段用 Text color 染色（亮色突出）
- tokens 按空格/文字二次拆分，避免混合段渲染歧义

测试: 29 个 rippleAnimation 测试覆盖 intensityToColor 边界、
computeRippleCells 长度/震源/衰减、applyOverlaysToCells 覆盖/截断/
防御式拷贝、cellsToSegments 合并逻辑。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(effort): 波纹参数调优——铺满左侧 + 速度调慢 + 全面板有底色

用户反馈三个问题：
1. "低峰部分没有颜色变化" → intensity ≤ 0.1 返回 transparent 导致波谷
   位置看不见。改为永不返回 transparent，最低档 #0a0d1a 作为面板
   底色（暗紫黑海洋），波峰在底色上流动。
2. "波浪速度太快" → time 系数 0.012 → 0.004（约 1/3 速）。波峰移动
   速度从 34 cell/s 降到 11 cell/s，每帧颜色变化从 45% 降到 36%。
3. "波浪只到中间部分，没覆盖左侧" → falloff 覆盖半径 40 → 90。
   震源 x=65，左侧 dist=65 < 90，波纹可达最左端（约 30-50% 覆盖）。

色阶调整：
- 删除 transparent 档，新增 #0a0d1a 作最暗档（底色）
- 最高档从 #8aa0ff（高光）改为 #5769F7（suggestion），避免与
  文字 overlay 同色互相吞噬
- 7 档颜色：#0a0d1a → #15182b → #1f2543 → #2a3360 →
  #3a4582 → #4a5bb0 → #5769F7

测试：删除 transparent 期望，改为期望具体颜色（#0a0d1a 等）。
新增"覆盖半径扩大"测试验证 dist=65 仍有非最暗颜色。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* fix(effort): 波纹 v3 — 去黑边 + 删中心高频涟漪 + y 轴覆盖快捷键行

用户反馈三个问题：
1. "黑色边感觉不太对" — 最暗档 #0a0d1a (rgb 10,13,26) 太接近纯黑，
   远端波谷看起来像硬黑边。改为 #1a1f3a (rgb 26,31,58)，紫蓝感
   更强而非纯黑。
2. "中心的快速波纹有点奇怪" — 删除震源附近 dist<6 的高频涟漪叠加
   (time*0.02，5 倍主波纹频率)。原本想让震源附近"水波感"更强，
   实际效果像"快速闪烁"反而突兀。主波纹已经足够，无需叠加。
3. "y 方向覆盖快捷键" — RippleContent 新增 y=2 行渲染快捷键 overlay
   ("←/→ adjust · Enter confirm · Esc cancel")。PlainContent 路径
   保持原 Box marginTop=1 + Text 渲染。

色阶调整（紫蓝感更强）：
- #1a1f3a (原 #0a0d1a) — 最暗档
- #1f2543 / #252c55 / #2e3870 / #3a4582 / #4a5bb0 / #5769F7
  (中间档略调亮度，保持平滑过渡)

测试：震源点测试更新为"time=0 时波谷最暗，time 推进后扫过波峰变亮"，
反映删除高频涟漪后的纯主波纹行为。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* chore(workflow): 工作流相关代码中文文案全部英文化

源码（src/workflow/ + packages/workflow-engine/src/）的中文注释、
用户可见错误消息、字符串字面量；测试文件的标题与注释；同步 6 条
硬编码断言到英文化后的错误消息。

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* feat(effort): 波纹 v4 — 平滑波 + 全色环旋转 + 淡入淡出 + 宽度自适应

- 波函数改 (sin+1)/2：消除 max(0,sin) 平直暗带（约 6 行宽）
- 主色相连续旋转（0.03°/ms，12s/圈全色环）：蓝→紫→品红→红→橙→黄→绿→青
- 文字 overlay 同步色相旋转（rotateHue 应用到 Faster/▲/档位名/分隔线/副标签）
- 淡入淡出动画：fadeColor/fadeCells + fade 状态机 ~300ms 进出过渡
- 副标签固定 ultracode 段下方，不跟随光标移动
- 顶部/底部各加一行纯波纹行，视觉一致
- 宽度自适应终端列数：窄则 72，宽则铺满（computeSegment/computeRippleSourceX）
- 快捷键改 plain Text，不参与波纹背景渲染
- 新增 18 测试（fadeColor/fadeCells/rotateHue/getHueShiftAtTime）

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

* refactor: remove CYBER_RISK_MITIGATION_REMINDER from FileReadTool

Co-Authored-By: deepseek-v4-pro <deepseek-ai@claude-code-best.win>

* fix: prevent ReDoS in extractMeta regex by anchoring to splice boundary

Co-Authored-By: deepseek-v4-pro <deepseek-ai@claude-code-best.win>

* chore: 更新脚本

---------

Co-authored-by: glm-5.1 <zai-org@claude-code-best.win>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: deepseek-v4-pro <deepseek-ai@claude-code-best.win>
This commit is contained in:
claude-code-best
2026-06-14 18:13:49 +08:00
committed by GitHub
parent 3e3e1de81b
commit 58ee6419b1
130 changed files with 23347 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
src/components/EffortPanel/EffortPanel.tsx Normal file
View File

@@ -0,0 +1,408 @@
import * as React from 'react';
import { BaseText, Box, Text, useTerminalSize } from '@anthropic/ink';
import { useKeybindings } from '../../keybindings/useKeybinding.js';
import { type EffortValue, getDisplayedEffortLevel, getEffortEnvOverride } from '../../utils/effort.js';
import {
type PanelPosition,
CANCEL_MESSAGE,
computeConfirmOutcome,
getInitialCursor,
moveLeft,
moveRight,
PANEL_POSITIONS,
} from './effortPanelState.js';
import { executeEffort } from '../../commands/effort/effort.js';
import { useMainLoopModel } from '../../hooks/useMainLoopModel.js';
import { useSetAppState } from '../../state/AppState.js';
import { useRippleFrame } from './useRippleFrame.js';
import {
TRANSPARENT,
type Overlay,
type Segment,
applyOverlaysToCells,
cellsToSegments,
computeRippleCells,
fadeCells,
getHueShiftAtTime,
rotateHue,
} from './rippleAnimation.js';
/**
* 每档最小宽度（足够装下 'ultracode' 9 字符 + 居中留白）。
* 当终端窄时使用此值，保证最低可读性。
*/
const MIN_SEGMENT = 12;
const SUBLABEL_ULTRACODE = 'xhigh + workflows';
// 颜色：与项目主题对齐（suggestion=Medium blue #5769F7）。
const COLOR_LABEL_SELECTED = '#5769F7'; // 选中档位（suggestion）
const COLOR_LABEL_DEFAULT = '#7a8eff'; // 未选中档位（淡紫蓝，与波纹背景协调）
const COLOR_OVERLAY = '#5769F7'; // Faster / Smarter / ▲ 等 overlay 文字
// 淡入淡出每帧步长：60ms 间隔下 5 帧达到目标 ≈ 300ms 动画时长。
const FADE_STEP = 0.2;
// 波纹震源 y 坐标（相对波纹区域坐标系，y=0 是档位名行）。
const RIPPLE_SOURCE_Y = 0;
/**
* 根据终端宽度计算每档实际宽度（SEGMENT）。
*
* 规则：
* - 留出 paddingX={1} 的左右各 1 列 → 可用宽度 = columns - 2
* - 若可用宽度 <= MIN_SEGMENT * 6（72），用 MIN_SEGMENT（保持当前窄布局）
* - 否则铺满：floor(可用宽度 / 6)
*
* 即"窄则不变，宽则铺满"。最小宽度保证 'ultracode' 9 字符能正常显示。
*/
function computeSegment(terminalColumns: number): number {
const available = terminalColumns - 2; // paddingX={1} 两侧
const minNeeded = MIN_SEGMENT * PANEL_POSITIONS.length;
if (available <= minNeeded) return MIN_SEGMENT;
return Math.floor(available / PANEL_POSITIONS.length);
}
/**
* 计算波纹震源 x 坐标（ultracode 段内 'ultracode' 标签的中心列）。
*
* 'ultracode' 是 9 字符，在 SEGMENT 列内居中：
* offset = floor((SEGMENT - 9) / 2)
* labelCenter = SEGMENT * 5 + offset + 4 （4 是 9 字符串的中心偏移）
*
* SEGMENT=12 → 60 + 1 + 4 = 65（与历史值一致）
* SEGMENT=20 → 100 + 5 + 4 = 109
*/
function computeRippleSourceX(segment: number): number {
const LABEL_LEN = 9; // 'ultracode'
const offset = Math.max(0, Math.floor((segment - LABEL_LEN) / 2));
const labelCenter = Math.floor(LABEL_LEN / 2); // 4
return segment * (PANEL_POSITIONS.length - 1) + offset + labelCenter;
}
/**
* 计算某段 idx 内居中文字的起始列。
* 动态 segment：textLen 字符在 segment 列内居中。
*/
function segmentTextStartX(idx: number, textLen: number, segment: number): number {
return segment * idx + Math.max(0, Math.floor((segment - textLen) / 2));
}
type Props = {
appStateEffort: EffortValue | undefined;
onDone: (message: string) => void;
};
export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode {
const setAppState = useSetAppState();
const model = useMainLoopModel();
const { columns } = useTerminalSize();
// 自适应宽度：根据终端列数计算每档宽度。
// 终端变化（resize）时 columns 改变 → 重新计算 → 重渲染。
const segment = React.useMemo(() => computeSegment(columns), [columns]);
const panelWidth = segment * PANEL_POSITIONS.length;
const rippleSourceX = React.useMemo(() => computeRippleSourceX(segment), [segment]);
const envOverride = getEffortEnvOverride();
const displayed = getDisplayedEffortLevel(model, appStateEffort);
const initialCursor = getInitialCursor({ envOverride, appStateEffort, displayed });
const [cursor, setCursor] = React.useState<PanelPosition>(initialCursor);
const [done, setDone] = React.useState(false);
const isOnUltracode = cursor === 'ultracode';
const [fade, setFade] = React.useState(0);
// 仍在波纹模式：cursor 在 ultracode，或退出动画未结束（fade > 0）
const showingRipple = isOnUltracode || fade > 0.001;
const [rippleRef, time] = useRippleFrame(showingRipple);
// 淡入淡出驱动：每 tick（time 推进）朝目标步进 FADE_STEP。
// 退出动画完成后 fade 归零，showingRipple 变 false，时钟停止订阅。
React.useEffect(() => {
if (!showingRipple) return;
const target = isOnUltracode ? 1 : 0;
setFade(prev => {
if (prev === target) return prev;
const next = target > prev ? prev + FADE_STEP : prev - FADE_STEP;
return target > prev ? Math.min(target, next) : Math.max(target, next);
});
}, [time, isOnUltracode, showingRipple]);
const handleConfirm = React.useCallback(() => {
if (done) return;
setDone(true);
const outcome = computeConfirmOutcome(cursor, executeEffort);
if (outcome.kind === 'apply' && outcome.effortUpdate) {
setAppState(prev => ({
...prev,
effortValue: outcome.effortUpdate!.value,
}));
}
onDone(outcome.message);
}, [cursor, done, onDone, setAppState]);
const handleCancel = React.useCallback(() => {
if (done) return;
setDone(true);
onDone(CANCEL_MESSAGE);
}, [done, onDone]);
useKeybindings(
{
'effortPanel:decrease': () => setCursor(c => moveLeft(c)),
'effortPanel:increase': () => setCursor(c => moveRight(c)),
'effortPanel:home': () => setCursor('low'),
'effortPanel:end': () => setCursor('ultracode'),
'effortPanel:confirm': handleConfirm,
'effortPanel:cancel': handleCancel,
},
{ context: 'EffortPanel' },
);
const envActive = envOverride !== null && envOverride !== undefined;
const envRaw = process.env.CLAUDE_CODE_EFFORT_LEVEL;
// 波纹行 cells 计算：返回该行所有 cell（含 overlay 文字）
// fade 控制背景颜色亮度（0 → 全 transparent，1 → 完整波纹）。
// 文字 overlay 也乘以 fade，让进入/退出动画整体淡入淡出。
const renderRippleRow = React.useCallback(
(relY: number, overlays: Overlay[]): Segment[] => {
const cells = computeRippleCells({
y: relY + RIPPLE_SOURCE_Y,
width: panelWidth,
time,
sourceX: rippleSourceX,
sourceY: RIPPLE_SOURCE_Y,
});
const overlayed = applyOverlaysToCells(cells, overlays);
const faded = fadeCells(overlayed, fade);
return cellsToSegments(faded);
},
[time, fade, panelWidth, rippleSourceX],
);
return (
<Box ref={rippleRef} flexDirection="column" paddingX={1} width={panelWidth + 2}>
<Text bold color="suggestion">
Effort
</Text>
{envActive && <Text color="warning">{`⚠ CLAUDE_CODE_EFFORT_LEVEL=${envRaw} overrides this session`}</Text>}
{showingRipple ? (
<RippleContent
renderRow={renderRippleRow}
cursor={cursor}
fade={fade}
segment={segment}
panelWidth={panelWidth}
time={time}
/>
) : (
<>
<PlainContent cursor={cursor} segment={segment} panelWidth={panelWidth} />
<Box marginTop={1}>
<Text color="subtle">←/→ adjust · Enter confirm · Esc cancel</Text>
</Box>
</>
)}
</Box>
);
}
// ---- 普通模式（无波纹）----
function PlainContent({
cursor,
segment,
panelWidth,
}: {
cursor: PanelPosition;
segment: number;
panelWidth: number;
}): React.ReactNode {
return (
<>
<Box marginTop={1} flexDirection="row" justifyContent="space-between">
<Text color="suggestion">Faster</Text>
<Text color="suggestion">Smarter</Text>
</Box>
<Text color="subtle">{'─'.repeat(panelWidth)}</Text>
<Box flexDirection="row">
{PANEL_POSITIONS.map(p => (
<Box key={`cursor-${p}`} width={segment} justifyContent="center">
<Text bold color={cursor === p ? 'suggestion' : 'subtle'}>
{cursor === p ? '▲' : ' '}
</Text>
</Box>
))}
</Box>
<Box flexDirection="row">
{PANEL_POSITIONS.map(p => (
<Box key={`label-${p}`} width={segment} justifyContent="center">
<Text bold={cursor === p} color={cursor === p ? 'suggestion' : 'subtle'}>
{p}
</Text>
</Box>
))}
</Box>
<Box flexDirection="row">
<Box width={segment * (PANEL_POSITIONS.length - 1)} />
<Box width={segment} justifyContent="center">
<Text color="subtle">{SUBLABEL_ULTRACODE}</Text>
</Box>
</Box>
</>
);
}
// ---- 波纹模式（cursor === 'ultracode'）----
//
// 渲染策略：
// - 每行先 computeRippleCells 算出强度→颜色的 cell 数组（背景为空格 + 颜色）
// - applyOverlaysToCells 把文字 overlay（Faster/▲/档位名/副标签）写入对应 cell
// - cellsToSegments 合并相邻同色段
// - 渲染层遍历 segments：每个段判断是"空格波纹段"还是"文字段"
// - 空格段：用 backgroundColor 把空格染成色块（pure color block）
// - 文字段：用 color 染色文字（背景保持终端默认，让文字最清晰）
// - 混合段（既有空格又有文字，少见）：拆为前后两个 Text
//
// 注意：Segment 内可能同时有空格和非空格字符（如 " Faster " 居中文字）。
// 这种段用 color 渲染时，空格部分不显示色块——视觉上"色块断裂"。
// 解决：渲染时把 segment 按字符类型二次拆分（runs of whitespace vs non-whitespace）。
type RippleContentProps = {
renderRow: (relY: number, overlays: Overlay[]) => Segment[];
cursor: PanelPosition;
fade: number;
segment: number;
panelWidth: number;
time: number;
};
function RippleContent({ renderRow, cursor, segment, panelWidth, time }: RippleContentProps): React.ReactNode {
// 光标索引跟随 cursor（退出动画期间 cursor 已移到别处，
// 让 ▲ overlay 跟着移走，ultracode 段恢复普通背景色）。
const cursorIdx = PANEL_POSITIONS.indexOf(cursor);
// 副标签固定在 ultracode 段下方，不跟随光标移动。
const ultracodeIdx = PANEL_POSITIONS.length - 1;
// 文字颜色跟随波浪色相旋转：取当前 time 的 hueShift，
// 应用到所有 overlay 颜色，让文字与背景色环保持同步。
const hueShift = getHueShiftAtTime(time);
const overlayColor = rotateHue(COLOR_OVERLAY, hueShift);
const labelSelectedColor = rotateHue(COLOR_LABEL_SELECTED, hueShift);
const labelDefaultColor = rotateHue(COLOR_LABEL_DEFAULT, hueShift);
const fasterOverlay: Overlay = { text: 'Faster', x: 0, color: overlayColor };
const smarterOverlay: Overlay = {
text: 'Smarter',
x: panelWidth - 'Smarter'.length,
color: overlayColor,
};
const separatorOverlay: Overlay = {
text: '─'.repeat(panelWidth),
x: 0,
color: labelDefaultColor,
};
const cursorOverlay: Overlay = {
text: '▲',
x: segmentTextStartX(cursorIdx, 1, segment),
color: overlayColor,
};
const labelOverlays: Overlay[] = PANEL_POSITIONS.map((p, idx) => ({
text: p,
x: segmentTextStartX(idx, p.length, segment),
color: p === cursor ? labelSelectedColor : labelDefaultColor,
}));
const sublabelOverlay: Overlay = {
text: SUBLABEL_ULTRACODE,
x: segmentTextStartX(ultracodeIdx, SUBLABEL_ULTRACODE.length, segment),
color: labelDefaultColor,
};
// 各行 y 坐标（相对震源 RIPPLE_SOURCE_Y = 档位名行）
// y=-4: 顶部纯波纹行（视觉一致，无 overlay）
// y=-3: Faster/Smarter
// y=-2: 分隔线
// y=-1: ▲
// y=0: 档位名（震源）
// y=1: 副标签
// y=2: 底部纯波纹行（视觉一致，无 overlay）
//
// 快捷键行：plain Text，不参与波纹渲染（无背景动画），紧贴底部波纹行。
return (
<>
<RippleRow segments={renderRow(-4, [])} />
<RippleRow segments={renderRow(-3, [fasterOverlay, smarterOverlay])} />
<RippleRow segments={renderRow(-2, [separatorOverlay])} />
<RippleRow segments={renderRow(-1, [cursorOverlay])} />
<RippleRow segments={renderRow(0, labelOverlays)} />
<RippleRow segments={renderRow(1, [sublabelOverlay])} />
<RippleRow segments={renderRow(2, [])} />
<Text color={COLOR_LABEL_DEFAULT}>←/→ adjust · Enter confirm · Esc cancel</Text>
</>
);
}
/**
* 渲染一行波纹 segments。
*
* 每个 segment 可能含空格 + 文字混合（如 " Faster "）：
* - 空格部分用 backgroundColor 染色块（波纹颜色）
* - 文字部分用 color 染色（亮色，背景保持终端默认）
*
* 简化策略：遍历 segment 字符，按"是否为空格"二次拆分为 token。
* 相邻同类型 token 合并，避免 React key 爆炸。
*/
function RippleRow({ segments }: { segments: Segment[] }): React.ReactNode {
const tokens: Array<{ text: string; kind: 'space' | 'text'; color: string }> = [];
for (const seg of segments) {
// 拆分 seg.text 为空格段和非空格段
let buf = '';
let bufIsSpace: boolean | null = null;
const flush = (): void => {
if (buf === '' || bufIsSpace === null) return;
tokens.push({
text: buf,
kind: bufIsSpace ? 'space' : 'text',
color: seg.color,
});
buf = '';
bufIsSpace = null;
};
for (const ch of seg.text) {
const isSpace = ch === ' ';
if (bufIsSpace === null) {
buf = ch;
bufIsSpace = isSpace;
} else if (isSpace === bufIsSpace) {
buf += ch;
} else {
flush();
buf = ch;
bufIsSpace = isSpace;
}
}
flush();
}
return (
<Box flexDirection="row">
{tokens.map((tok, i) =>
tok.kind === 'space' ? (
tok.color === TRANSPARENT ? (
<BaseText key={i}>{tok.text}</BaseText>
) : (
<BaseText key={i} backgroundColor={tok.color as `#${string}`}>
{tok.text}
</BaseText>
)
) : (
<Text key={i} color={tok.color as `#${string}`} bold>
{tok.text}
</Text>
),
)}
</Box>
);
}

24
src/components/EffortPanel/__tests__/EffortPanel.test.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { expect, test } from 'bun:test';
import React from 'react';
import { EffortPanel } from '../EffortPanel.js';
// EffortPanel 是 UI 组件，渲染依赖链（useMainLoopModel / GrowthBook / settings）
// 在测试环境模拟成本高且脆化。本文件只做"组件契约"sanity check：
// 1) 默认导出为有效 React 组件
// 2) 接收正确 props 类型（编译期保证）
// 3) onDone 类型为 (message: string) => void
//
// 渲染输出与键盘交互通过 Step 6.2 手动验收覆盖；
// 确认/取消分支通过 computeConfirmOutcome 纯函数测试覆盖（见 effortPanelState.test.ts）。
test('EffortPanel 是有效 React 组件', () => {
expect(typeof EffortPanel).toBe('function');
});
test('EffortPanel 接受 props 并返回 React element（不挂载）', () => {
const element = React.createElement(EffortPanel, {
appStateEffort: undefined,
onDone: () => {},
});
expect(React.isValidElement(element)).toBe(true);
});

163
src/components/EffortPanel/__tests__/effortPanelState.test.ts Normal file
View File

@@ -0,0 +1,163 @@
import { describe, expect, test } from 'bun:test'
import type { EffortValue } from '../../../utils/effort.js'
import {
CANCEL_MESSAGE,
type ApplyFn,
ULTRACODE_HINT,
END_POSITION,
HOME_POSITION,
PANEL_POSITIONS,
type PanelPosition,
computeConfirmOutcome,
getInitialCursor,
isUltracode,
moveLeft,
moveRight,
} from '../effortPanelState.js'
describe('effortPanelState', () => {
test('PANEL_POSITIONS 顺序为 low → ultracode', () => {
expect(PANEL_POSITIONS).toEqual([
'low',
'medium',
'high',
'xhigh',
'max',
'ultracode',
])
})
test('moveLeft 在 low 处保持 low', () => {
expect(moveLeft('low')).toBe('low')
})
test('moveLeft 正常左移', () => {
expect(moveLeft('high')).toBe('medium')
expect(moveLeft('ultracode')).toBe('max')
})
test('moveRight 在 ultracode 处保持 ultracode', () => {
expect(moveRight('ultracode')).toBe('ultracode')
})
test('moveRight 正常右移', () => {
expect(moveRight('medium')).toBe('high')
expect(moveRight('max')).toBe('ultracode')
})
test('HOME_POSITION 等于 low', () => {
expect(HOME_POSITION).toBe('low')
})
test('END_POSITION 等于 ultracode', () => {
expect(END_POSITION).toBe('ultracode')
})
test('isUltracode 守卫', () => {
expect(isUltracode('ultracode')).toBe(true)
expect(isUltracode('max')).toBe(false)
})
test('getInitialCursor：env override 为合法档位时返回 env 值', () => {
expect(
getInitialCursor({
envOverride: 'high',
appStateEffort: 'medium',
displayed: 'high',
}),
).toBe('high')
})
test('getInitialCursor：env 为 null（unset）时用 displayed', () => {
expect(
getInitialCursor({
envOverride: null,
appStateEffort: undefined,
displayed: 'medium',
}),
).toBe('medium')
})
test('getInitialCursor：env undefined 时用 displayed', () => {
expect(
getInitialCursor({
envOverride: undefined,
appStateEffort: 'high',
displayed: 'high',
}),
).toBe('high')
})
test('getInitialCursor：env 是数值（ant-only）时落回 displayed', () => {
// 数值不是合法 PanelPosition，回退
expect(
getInitialCursor({
envOverride: 75,
appStateEffort: 'medium',
displayed: 'medium',
}),
).toBe('medium')
})
test('PanelPosition 类型编译期检查（隐式）', () => {
const p: PanelPosition = 'xhigh'
expect(p).toBe('xhigh')
})
})
describe('computeConfirmOutcome', () => {
const mockApply: ApplyFn = cursor => ({
message: `applied:${cursor}`,
// 测试里 cursor 是 PanelPosition（含 ultracode），但 ApplyFn 的契约要求 EffortValue。
// 实际运行时 mockApply 只会被 computeConfirmOutcome 在非 ultracode 档位调用，
// 因此 cast 是安全的。生产代码用真 executeEffort 不会出现 ultracode。
effortUpdate: { value: cursor as unknown as EffortValue },
})
test('ultracode → kind=ultracode-hint，含 /ultracode 引导', () => {
const out = computeConfirmOutcome('ultracode', mockApply)
expect(out.kind).toBe('ultracode-hint')
if (out.kind === 'ultracode-hint') {
expect(out.message).toBe(ULTRACODE_HINT)
expect(out.message).toContain('/ultracode')
}
})
test('ultracode 不调 applyFn（不会被副作用触发）', () => {
let called = false
const spy: ApplyFn = c => {
called = true
return { message: `applied:${c}` }
}
computeConfirmOutcome('ultracode', spy)
expect(called).toBe(false)
})
test('low → kind=apply，message 来自 applyFn，effortUpdate 透传', () => {
const out = computeConfirmOutcome('low', mockApply)
expect(out.kind).toBe('apply')
if (out.kind === 'apply') {
expect(out.message).toBe('applied:low')
expect(out.effortUpdate?.value).toBe('low')
}
})
test('high → apply 路径不调 ultracode 分支', () => {
const out = computeConfirmOutcome('high', mockApply)
expect(out.kind).toBe('apply')
})
test('applyFn 返回无 effortUpdate 时，outcome.effortUpdate 为 undefined', () => {
const noUpdate: ApplyFn = c => ({ message: `applied:${c}` })
const out = computeConfirmOutcome('medium', noUpdate)
expect(out.kind).toBe('apply')
if (out.kind === 'apply') {
expect(out.effortUpdate).toBeUndefined()
}
})
})
test('常量字符串', () => {
expect(CANCEL_MESSAGE).toBe('Effort unchanged.')
expect(ULTRACODE_HINT).toContain('/ultracode <context>')
})

501
src/components/EffortPanel/__tests__/rippleAnimation.test.ts Normal file
View File

@@ -0,0 +1,501 @@
import { describe, expect, test } from 'bun:test'
import {
type Cell,
type Overlay,
TRANSPARENT,
applyOverlaysToCells,
cellsToSegments,
computeRippleCells,
fadeCells,
fadeColor,
getHueShiftAtTime,
intensityToColor,
rotateHue,
} from '../rippleAnimation.js'
describe('intensityToColor', () => {
test('intensity=0 → 最暗档（不再是 transparent，作面板底色）', () => {
expect(intensityToColor(0)).toBe('#1a1f3a')
})
test('intensity < 0 钳到 0 → 最暗档', () => {
expect(intensityToColor(-0.5)).toBe('#1a1f3a')
})
test('intensity > 0 → 永远是 #hex 颜色字符串（不返回 transparent）', () => {
for (const v of [0.05, 0.1, 0.2, 0.5, 0.8]) {
const c = intensityToColor(v)
expect(c).not.toBe(TRANSPARENT)
expect(c).toMatch(/^#[0-9a-fA-F]{6}$/)
}
})
test('intensity > 1 钳到 1 → 最高强度颜色', () => {
expect(intensityToColor(1.5)).toBe(intensityToColor(1))
})
test('intensity 单调递增 → 颜色档位递增（至少 3 档）', () => {
const samples = [0.2, 0.4, 0.6, 0.8, 1.0]
const colors = samples.map(intensityToColor)
const unique = new Set(colors)
expect(unique.size).toBeGreaterThanOrEqual(3)
})
test('intensity=1 → suggestion 档（波峰最高档）', () => {
expect(intensityToColor(1)).toBe('#5769F7')
})
test('hueShift=0 → 与无 hueShift 相同（快路径）', () => {
for (const v of [0, 0.2, 0.5, 0.8, 1]) {
expect(intensityToColor(v, 0)).toBe(intensityToColor(v))
}
})
test('hueShift ≠ 0 → 返回不同颜色（但仍是合法 hex）', () => {
const base = intensityToColor(0.8)
const shifted = intensityToColor(0.8, 30)
expect(shifted).toMatch(/^#[0-9a-fA-F]{6}$/)
expect(shifted).not.toBe(base)
})
test('hueShift 180° → 大致补色（亮色变暗色族）', () => {
// #5769F7 ≈ HSL(233, 91, 65)，旋转 180° → HSL(53, 91, 65) ≈ 黄色系
const shifted = intensityToColor(1, 180)
expect(shifted).toMatch(/^#[0-9a-fA-F]{6}$/)
// 不再是蓝紫族（R 分量应明显大于 B 分量）
const r = parseInt(shifted.slice(1, 3), 16)
const b = parseInt(shifted.slice(5, 7), 16)
expect(r).toBeGreaterThan(b)
})
})
describe('rotateHue', () => {
test('hueShift=0 → 原样返回（快路径，无 round-trip 误差）', () => {
expect(rotateHue('#5769F7', 0)).toBe('#5769F7')
expect(rotateHue('#1a1f3a', 0)).toBe('#1a1f3a')
})
test('旋转 360° → 等同原色（一圈回起点，大小写无关）', () => {
expect(rotateHue('#5769F7', 360).toLowerCase()).toBe('#5769f7')
expect(rotateHue('#5769F7', -360).toLowerCase()).toBe('#5769f7')
})
test('旋转 ±n*360° → 等同原色（任意整圈）', () => {
expect(rotateHue('#3a4582', 720).toLowerCase()).toBe('#3a4582')
expect(rotateHue('#3a4582', -1080).toLowerCase()).toBe('#3a4582')
})
test('灰度色（saturation=0）旋转后不变', () => {
// #808080 = (128,128,128)，saturation=0，旋转无意义
expect(rotateHue('#808080', 90)).toBe('#808080')
})
test('非法 hex → 原样返回（防御式）', () => {
expect(rotateHue('not-a-color', 90)).toBe('not-a-color')
expect(rotateHue('#123', 90)).toBe('#123')
})
test('旋转后保持 6 位 hex 格式', () => {
const rotated = rotateHue('#5769F7', 45)
expect(rotated).toMatch(/^#[0-9a-fA-F]{6}$/)
})
})
describe('getHueShiftAtTime', () => {
test('time=0 → 0', () => {
expect(getHueShiftAtTime(0)).toBe(0)
})
test('time > 0 → 在 [0, 360) 范围内（连续旋转，非负）', () => {
for (const t of [100, 500, 1000, 2000, 5000, 10000, 50000, 100000]) {
const shift = getHueShiftAtTime(t)
expect(shift).toBeGreaterThanOrEqual(0)
expect(shift).toBeLessThan(360)
}
})
test('time 推进 → hueShift 单调递增（模 360）', () => {
// 在一个周期内（12000ms），hueShift 应单调递增
const samples = [0, 1000, 2000, 3000, 4000, 5000, 6000]
const shifts = samples.map(getHueShiftAtTime)
for (let i = 1; i < shifts.length; i++) {
expect(shifts[i]).toBeGreaterThan(shifts[i - 1])
}
})
test('周期 12000ms（time=12000 应回到 0，模 360）', () => {
// 12000ms * 0.03 = 360，% 360 = 0
const shift = getHueShiftAtTime(12000)
expect(shift).toBe(0)
})
test('半周期 6000ms → hueShift=180（对面色相）', () => {
// 6000ms * 0.03 = 180
expect(getHueShiftAtTime(6000)).toBe(180)
})
test('四分之一周期 3000ms → hueShift=90', () => {
expect(getHueShiftAtTime(3000)).toBe(90)
})
test('多周期循环：time=24000 等同 time=0', () => {
expect(getHueShiftAtTime(24000)).toBe(0)
expect(getHueShiftAtTime(36000)).toBe(0)
})
})
describe('computeRippleCells', () => {
test('返回数组长度等于 width', () => {
const cells = computeRippleCells({
y: 2,
width: 30,
time: 100,
sourceX: 25,
sourceY: 2,
})
expect(cells.length).toBe(30)
})
test('每个 cell 的 char 是空格', () => {
const cells = computeRippleCells({
y: 0,
width: 10,
time: 0,
sourceX: 5,
sourceY: 0,
})
for (const cell of cells) {
expect(cell.char).toBe(' ')
}
})
test('每个 cell 的 color 是合法字符串', () => {
const cells = computeRippleCells({
y: 0,
width: 10,
time: 0,
sourceX: 5,
sourceY: 0,
})
for (const cell of cells) {
expect(typeof cell.color).toBe('string')
expect(
cell.color === TRANSPARENT || /^#[0-9a-fA-F]{6}$/.test(cell.color),
).toBe(true)
}
})
test('width=0 → 空数组', () => {
expect(
computeRippleCells({ y: 0, width: 0, time: 0, sourceX: 0, sourceY: 0 }),
).toEqual([])
})
test('width<0 → 空数组', () => {
expect(
computeRippleCells({ y: 0, width: -5, time: 0, sourceX: 0, sourceY: 0 }),
).toEqual([])
})
test('震源点 time=0 时为中间档（(sin+1)/2 → intensity=0.5），time 推进后扫过波峰/波谷', () => {
// v5 平滑波：dist=0，time=0 时 phase=0，sin(0)=0，(0+1)/2=0.5 → intensity=0.5 → 中间档
const t0 = computeRippleCells({
y: 5,
width: 11,
time: 0,
sourceX: 5,
sourceY: 5,
})
// 0.5 * 7 = 3.5, floor = 3, RIPPLE_COLOR_STOPS[3] = '#2e3870'
expect(t0[5].color).toBe('#2e3870')
// time 推进，phase 变化，震源会扫过波峰（亮档）和波谷（暗档）
const t1 = computeRippleCells({
y: 5,
width: 11,
time: 1500,
sourceX: 5,
sourceY: 5,
})
// 不同 time 不同颜色（动画推进）
expect(t1[5].color).not.toBe('#2e3870')
})
test('覆盖半径扩大：dist=65（左侧远端）仍有非最暗颜色', () => {
// 震源 x=65，远端 x=0 → dist=65
// falloff = max(0, 1 - 65/90) = 0.278，波峰时 intensity ≈ 0.278
// 应映射到非最暗档（#15182b 或更亮）
const cells = computeRippleCells({
y: 0,
width: 66,
time: 0,
sourceX: 65,
sourceY: 0,
})
// 第 0 列 dist=65，time=0 时 phase = 65*0.35 = 22.75 rad
// sin(22.75) ≈ -0.59 → wave = 0 → intensity = 0 → 最暗档
// 但 time 推进时波峰会扫过此处，强度变高
// 这里只验证 cell 有合法颜色（最暗档也算合法）
expect(cells[0].color).toMatch(/^#[0-9a-fA-F]{6}$/)
// 推进 time 后，左侧应出现非最暗颜色（波峰扫过）
const t1 = computeRippleCells({
y: 0,
width: 66,
time: 2000,
sourceX: 65,
sourceY: 0,
})
const nonDarkest = t1.filter(c => c.color !== '#1a1f3a')
expect(nonDarkest.length).toBeGreaterThan(0)
})
test('time 推进时颜色分布变化（动画效果）', () => {
const t0 = computeRippleCells({
y: 2,
width: 30,
time: 0,
sourceX: 25,
sourceY: 2,
})
const t1 = computeRippleCells({
y: 2,
width: 30,
time: 500,
sourceX: 25,
sourceY: 2,
})
// 至少有一个位置颜色不同
const diffs = t0.filter((c, i) => c.color !== t1[i].color)
expect(diffs.length).toBeGreaterThan(0)
})
})
describe('applyOverlaysToCells', () => {
function makeCells(colors: string[]): Cell[] {
return colors.map(c => ({ char: ' ', color: c }))
}
test('无 overlay 时原样返回（但为新数组）', () => {
const cells = makeCells(['#111', '#222', '#333'])
const out = applyOverlaysToCells(cells, [])
expect(out).toEqual(cells)
expect(out).not.toBe(cells) // 防御式拷贝
})
test('overlay 替换 char 但保留底层 color（color 未指定时）', () => {
const cells = makeCells([
TRANSPARENT,
TRANSPARENT,
TRANSPARENT,
TRANSPARENT,
])
const overlays: Overlay[] = [{ text: 'hi', x: 1 }]
const out = applyOverlaysToCells(cells, overlays)
expect(out[1].char).toBe('h')
expect(out[2].char).toBe('i')
expect(out[1].color).toBe(TRANSPARENT) // 保留底层色
expect(out[0].char).toBe(' ')
})
test('overlay 指定 color 时同时覆盖 char + color', () => {
const cells = makeCells([TRANSPARENT, TRANSPARENT, TRANSPARENT])
const overlays: Overlay[] = [{ text: 'AB', x: 0, color: '#5769F7' }]
const out = applyOverlaysToCells(cells, overlays)
expect(out[0]).toEqual({ char: 'A', color: '#5769F7' })
expect(out[1]).toEqual({ char: 'B', color: '#5769F7' })
expect(out[2]).toEqual({ char: ' ', color: TRANSPARENT })
})
test('overlay 超出右边界被截断', () => {
const cells = makeCells([TRANSPARENT, TRANSPARENT, TRANSPARENT])
const overlays: Overlay[] = [{ text: 'abcdef', x: 1 }]
const out = applyOverlaysToCells(cells, overlays)
expect(out[0].char).toBe(' ')
expect(out[1].char).toBe('a')
expect(out[2].char).toBe('b')
// 'cdef' 被截断
})
test('overlay x 为负数 → 从开头截断（不向左溢出）', () => {
const cells = makeCells([TRANSPARENT, TRANSPARENT, TRANSPARENT])
const overlays: Overlay[] = [{ text: 'abc', x: -1 }]
const out = applyOverlaysToCells(cells, overlays)
expect(out[0].char).toBe('b') // 跳过 'a'，'b' 占 0
expect(out[1].char).toBe('c')
expect(out[2].char).toBe(' ')
})
test('多个 overlay 后者覆盖前者（同位置）', () => {
const cells = makeCells([TRANSPARENT, TRANSPARENT, TRANSPARENT])
const overlays: Overlay[] = [
{ text: 'AAA', x: 0, color: '#111' },
{ text: 'B', x: 1, color: '#222' },
]
const out = applyOverlaysToCells(cells, overlays)
expect(out[0]).toEqual({ char: 'A', color: '#111' })
expect(out[1]).toEqual({ char: 'B', color: '#222' }) // 第二个 overlay 覆盖
expect(out[2]).toEqual({ char: 'A', color: '#111' })
})
test('overlay 起始位置 >= 数组长度 → 完全跳过', () => {
const cells = makeCells([TRANSPARENT, TRANSPARENT])
const overlays: Overlay[] = [{ text: 'X', x: 5 }]
const out = applyOverlaysToCells(cells, overlays)
expect(out.every(c => c.char === ' ')).toBe(true)
})
test('不修改原数组（防御式拷贝）', () => {
const cells = makeCells([TRANSPARENT])
const snapshot = cells.map(c => ({ ...c }))
applyOverlaysToCells(cells, [{ text: 'X', x: 0 }])
expect(cells).toEqual(snapshot)
})
})
describe('cellsToSegments', () => {
test('空数组 → 空数组', () => {
expect(cellsToSegments([])).toEqual([])
})
test('单 cell → 单段', () => {
const cells: Cell[] = [{ char: 'a', color: '#111' }]
expect(cellsToSegments(cells)).toEqual([{ text: 'a', color: '#111' }])
})
test('全部同色 → 合并为一段', () => {
const cells: Cell[] = [
{ char: 'a', color: '#111' },
{ char: 'b', color: '#111' },
{ char: 'c', color: '#111' },
]
expect(cellsToSegments(cells)).toEqual([{ text: 'abc', color: '#111' }])
})
test('颜色交替 → 每个独立段', () => {
const cells: Cell[] = [
{ char: 'a', color: '#111' },
{ char: 'b', color: '#222' },
{ char: 'c', color: '#111' },
]
expect(cellsToSegments(cells)).toEqual([
{ text: 'a', color: '#111' },
{ text: 'b', color: '#222' },
{ text: 'c', color: '#111' },
])
})
test('相邻同色段合并，不同色段分开', () => {
const cells: Cell[] = [
{ char: 'a', color: TRANSPARENT },
{ char: 'b', color: TRANSPARENT },
{ char: 'X', color: '#5769F7' },
{ char: 'Y', color: '#5769F7' },
{ char: 'c', color: TRANSPARENT },
]
expect(cellsToSegments(cells)).toEqual([
{ text: 'ab', color: TRANSPARENT },
{ text: 'XY', color: '#5769F7' },
{ text: 'c', color: TRANSPARENT },
])
})
test('段文本拼接顺序保持原顺序', () => {
const cells: Cell[] = [
{ char: '1', color: '#111' },
{ char: '2', color: '#111' },
{ char: '3', color: '#111' },
]
expect(cellsToSegments(cells)[0].text).toBe('123')
})
})
describe('fadeColor', () => {
test('fade=1 → 原色（不变）', () => {
expect(fadeColor('#5769F7', 1)).toBe('#5769f7')
})
test('fade=0 → TRANSPARENT（cell 不渲染）', () => {
expect(fadeColor('#5769F7', 0)).toBe(TRANSPARENT)
})
test('fade ≤ 0.01 → TRANSPARENT（阈值）', () => {
expect(fadeColor('#5769F7', 0.01)).toBe(TRANSPARENT)
expect(fadeColor('#5769F7', 0.009)).toBe(TRANSPARENT)
})
test('fade=0.5 → RGB 各分量减半', () => {
// #5769F7 = (87, 105, 247)，减半 → (44, 53, 124) = #2c357c
// Math.round(87*0.5)=44, Math.round(105*0.5)=53, Math.round(247*0.5)=124
expect(fadeColor('#5769F7', 0.5)).toBe('#2c357c')
})
test('TRANSPARENT 输入 → 原样返回（不处理）', () => {
expect(fadeColor(TRANSPARENT, 1)).toBe(TRANSPARENT)
expect(fadeColor(TRANSPARENT, 0.5)).toBe(TRANSPARENT)
})
test('非法 hex 格式 → 原样返回（防御式）', () => {
expect(fadeColor('not-a-color', 0.5)).toBe('not-a-color')
expect(fadeColor('#123', 0.5)).toBe('#123') // 非 6 位 hex
})
test('fade < 0 钳到 0 → TRANSPARENT', () => {
expect(fadeColor('#5769F7', -0.5)).toBe(TRANSPARENT)
})
test('fade > 1 钳到 1 → 原色', () => {
expect(fadeColor('#5769F7', 1.5)).toBe('#5769f7')
})
test('结果始终为 6 位 hex（前导零补全）', () => {
// #010203 = (1, 2, 3)，fade=0.5 → Math.round 后为 (1, 1, 2) = #010102
// 但 1*0.5 = 0.5, Math.round(0.5) = 1（ banker's rounding 在 JS 中是 round half up）
// 验证格式：6 位 hex
const result = fadeColor('#010203', 0.5)
expect(result).toMatch(/^#[0-9a-f]{6}$/)
})
})
describe('fadeCells', () => {
test('空数组 → 空数组', () => {
expect(fadeCells([], 0.5)).toEqual([])
})
test('每个 cell 的颜色按 fade 缩放，char 保留', () => {
const cells: Cell[] = [
{ char: ' ', color: '#5769F7' },
{ char: 'A', color: '#ffffff' },
]
const out = fadeCells(cells, 0.5)
expect(out[0]).toEqual({ char: ' ', color: '#2c357c' })
// #ffffff = (255, 255, 255)，fade=0.5 → (128, 128, 128) = #808080
expect(out[1]).toEqual({ char: 'A', color: '#808080' })
})
test('不修改原数组（防御式拷贝）', () => {
const cells: Cell[] = [{ char: ' ', color: '#5769F7' }]
const snapshot = cells.map(c => ({ ...c }))
fadeCells(cells, 0.5)
expect(cells).toEqual(snapshot)
})
test('TRANSPARENT cell 保持 TRANSPARENT', () => {
const cells: Cell[] = [
{ char: ' ', color: TRANSPARENT },
{ char: ' ', color: '#5769F7' },
]
const out = fadeCells(cells, 0.5)
expect(out[0].color).toBe(TRANSPARENT)
expect(out[1].color).toBe('#2c357c')
})
test('fade=0 → 所有非 transparent 颜色变 TRANSPARENT', () => {
const cells: Cell[] = [
{ char: ' ', color: '#5769F7' },
{ char: ' ', color: '#1a1f3a' },
]
const out = fadeCells(cells, 0)
expect(out[0].color).toBe(TRANSPARENT)
expect(out[1].color).toBe(TRANSPARENT)
})
})

126
src/components/EffortPanel/effortPanelState.ts Normal file
View File

@@ -0,0 +1,126 @@
import type { EffortValue } from '../../utils/effort.js'
/**
* 光标在面板上的位置。仅面板内部使用，不进入 AppState / settings / API。
* 'ultracode' 不是 EffortLevel；它在本面板里仅作视觉占位与文案引导。
*/
export type PanelPosition =
| 'low'
| 'medium'
| 'high'
| 'xhigh'
| 'max'
| 'ultracode'
export const PANEL_POSITIONS: readonly PanelPosition[] = [
'low',
'medium',
'high',
'xhigh',
'max',
'ultracode',
] as const
export const HOME_POSITION: PanelPosition = 'low'
export const END_POSITION: PanelPosition = 'ultracode'
/**
* 判断一个值是否可作为面板光标位置（不含 ultracode，因 ultracode 仅由面板内部产生）。
*/
function isNonUltracodePosition(
value: unknown,
): value is Exclude<PanelPosition, 'ultracode'> {
return (
typeof value === 'string' &&
value !== 'ultracode' &&
(PANEL_POSITIONS as readonly string[]).includes(value)
)
}
/**
* 把 EffortValue 归一化为面板可用的光标位置。
* - null / undefined / 数值（ant-only）/ ultracode → undefined（让上层用 displayed）
* - 合法 string 档位 → 返回该档位
*/
function normalizeToPanelPosition(
value: EffortValue | null | undefined,
): PanelPosition | undefined {
if (value === null || value === undefined) return undefined
if (typeof value === 'number') return undefined
if (isNonUltracodePosition(value)) {
return value
}
return undefined
}
export function moveLeft(cursor: PanelPosition): PanelPosition {
const idx = PANEL_POSITIONS.indexOf(cursor)
if (idx <= 0) return PANEL_POSITIONS[0]
return PANEL_POSITIONS[idx - 1]
}
export function moveRight(cursor: PanelPosition): PanelPosition {
const idx = PANEL_POSITIONS.indexOf(cursor)
if (idx === -1 || idx >= PANEL_POSITIONS.length - 1) {
return PANEL_POSITIONS[PANEL_POSITIONS.length - 1]
}
return PANEL_POSITIONS[idx + 1]
}
export function isUltracode(cursor: PanelPosition): boolean {
return cursor === 'ultracode'
}
/**
* 决定面板挂载时的初始光标位置。
* 优先级：env override（若是合法档位）> displayed level
*
* @param envOverride getEffortEnvOverride() 的返回值：EffortValue | null | undefined
* @param appStateEffort AppState.effortValue
* @param displayed getDisplayedEffortLevel(model, appStateEffort) —— 必传，避免此处再依赖 model
*/
export function getInitialCursor(args: {
envOverride: EffortValue | null | undefined
appStateEffort: EffortValue | undefined
displayed: PanelPosition
}): PanelPosition {
const fromEnv = normalizeToPanelPosition(args.envOverride)
if (fromEnv !== undefined) return fromEnv
// displayed 已经是 EffortLevel（不含 ultracode），合法
return args.displayed
}
// ---- 确认/取消决策（注入 ApplyFn 避免循环依赖 + 便于测试）----
export type ConfirmOutcome =
| {
kind: 'apply'
message: string
effortUpdate?: { value: EffortValue | undefined }
}
| { kind: 'ultracode-hint'; message: string }
export type ApplyFn = (cursor: PanelPosition) => {
message: string
effortUpdate?: { value: EffortValue | undefined }
}
export const ULTRACODE_HINT =
'ultracode is not an effort level. Use /ultracode <context> to start a multi-agent workflow.'
export const CANCEL_MESSAGE = 'Effort unchanged.'
export function computeConfirmOutcome(
cursor: PanelPosition,
applyFn: ApplyFn,
): ConfirmOutcome {
if (isUltracode(cursor)) {
return { kind: 'ultracode-hint', message: ULTRACODE_HINT }
}
const result = applyFn(cursor)
return {
kind: 'apply',
message: result.message,
effortUpdate: result.effortUpdate,
}
}

361
src/components/EffortPanel/rippleAnimation.ts Normal file
View File

@@ -0,0 +1,361 @@
/**
* EffortPanel ultracode 档位的背景波纹动画 —— 纯函数模块（颜色驱动）。
*
* 设计：
* - 仅在 cursor 停在 ultracode 时启动（订阅时钟由 useRippleFrame 控制）
* - 震源：面板右下（ultracode 字符位置），向左/上辐射同心圆波
* - 每位置强度（0~1）→ 颜色（suggestion 系暗紫蓝渐变）
* - 文字 overlay 在波纹之上（last-write-wins，颜色可单独指定）
*
* 渲染模型：每位置一个 cell（char + color），相邻同色合并为 segment。
* 渲染层用 Box flexDirection="row" + 多个 Text 段输出（每段一个 color）。
*
* 所有函数纯：相同入参 → 相同出参，便于单测 + 帧快照。
*/
/**
* suggestion 系颜色梯度（暗背景 → suggestion 色）。
*
* 设计：所有强度都映射到具体颜色（不返回 transparent），让整面板都是
* "暗紫蓝海洋"作为底色，波峰在底色上流动。这样波纹颜色变化更明显，
* 波谷也有暗色（不会"消失"）。
*
* 最暗档用 #1a1f3a（紫黑，亮度 ~12%），不是纯黑——避免远端波谷
* 看起来像"硬黑边"。波峰最高升到 suggestion (#5769F7)，避免与
* 文字 overlay（也用 suggestion 系）同色互相吞噬。
*
* 这些是 base 颜色（hueShift=0 时返回）。生产代码会传 hueShift 让
* 整个梯度绕色相环旋转，制造主色随时间漂移的视觉效果。
*/
const RIPPLE_COLOR_STOPS = [
'#1a1f3a', // 0.00 ~ 0.14 — 最暗（紫黑底色，非纯黑）
'#1f2543', // 0.14 ~ 0.28
'#252c55', // 0.28 ~ 0.42
'#2e3870', // 0.42 ~ 0.56
'#3a4582', // 0.56 ~ 0.70
'#4a5bb0', // 0.70 ~ 0.84
'#5769F7', // 0.84 ~ 1.00 — suggestion (波峰)
] as const
/**
* 色相连续旋转速度（度/ms）。
* 周期 = 360 / 0.03 = 12000ms = 12s，远慢于波纹相位（~1.6s），
* 让主色漂移感"ambient"而非"动画"。
*
* 连续旋转（非 sin 振荡）让色相 0~360° 全色环都被访问：
* 蓝 233° → 紫 270° → 品红 300° → 红 0° → 橙 30° → 黄 60° →
* 绿 120° → 青 180° → 蓝 233°（一圈）。
*/
const HUE_ROTATION_DEG_PER_MS = 0.03
/**
* hex → {h, s, l}（h 单位度，s/l 为 0~1）。
*
* 标准 RGB → HSL 转换。非法 hex（非 #rrggbb）→ h=0, s=0, l=0（黑）。
*/
function hexToHsl(hex: string): { h: number; s: number; l: number } {
if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return { h: 0, s: 0, l: 0 }
const r = parseInt(hex.slice(1, 3), 16) / 255
const g = parseInt(hex.slice(3, 5), 16) / 255
const b = parseInt(hex.slice(5, 7), 16) / 255
const max = Math.max(r, g, b)
const min = Math.min(r, g, b)
const l = (max + min) / 2
const d = max - min
if (d === 0) return { h: 0, s: 0, l }
const s = d / (1 - Math.abs(2 * l - 1))
let h: number
if (max === r) {
h = 60 * (((g - b) / d) % 6)
} else if (max === g) {
h = 60 * ((b - r) / d + 2)
} else {
h = 60 * ((r - g) / d + 4)
}
if (h < 0) h += 360
return { h, s, l }
}
/**
* {h, s, l} → hex。
*
* 标准 HSL → RGB 转换。h 自动 mod 360 处理。
*/
function hslToHex(h: number, s: number, l: number): string {
const hNorm = ((h % 360) + 360) % 360
const c = (1 - Math.abs(2 * l - 1)) * s
const hPrime = hNorm / 60
const x = c * (1 - Math.abs((hPrime % 2) - 1))
let r = 0
let g = 0
let b = 0
if (hPrime < 1) {
r = c
g = x
} else if (hPrime < 2) {
r = x
g = c
} else if (hPrime < 3) {
g = c
b = x
} else if (hPrime < 4) {
g = x
b = c
} else if (hPrime < 5) {
r = x
b = c
} else {
r = c
b = x
}
const m = l - c / 2
const toHex = (v: number): string =>
Math.round((v + m) * 255)
.toString(16)
.padStart(2, '0')
return `#${toHex(r)}${toHex(g)}${toHex(b)}`
}
/**
* 把 hex 颜色绕色相环旋转 hueShift 度。
*
* 保持饱和度和亮度不变，仅旋转 hue。用于让 RIPPLE_COLOR_STOPS 整体
* 漂移到不同色相（蓝→青→紫→蓝循环），制造主色随时间变化的效果。
*
* 非法 hex 原样返回（防御式）。
*/
export function rotateHue(hex: string, hueShift: number): string {
if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return hex
if (hueShift === 0) return hex // 快路径：避免无意义 round-trip
const { h, s, l } = hexToHsl(hex)
return hslToHex(h + hueShift, s, l)
}
/**
* 根据 time 计算当前色相偏移（度，连续旋转）。
*
* 返回值始终在 [0, 360) 区间，单调递增（模 360）。
* 周期约 12s 一圈，覆盖完整色环。
*/
export function getHueShiftAtTime(time: number): number {
return (time * HUE_ROTATION_DEG_PER_MS) % 360
}
/**
* 强度（任意实数）→ 颜色字符串。
*
* 钳到 [0, 1]，按 RIPPLE_COLOR_STOPS 分级。永不返回 transparent。
* intensity=0 → 最暗档（#1a1f3a，作为面板底色）。
*
* @param hueShift 整个色阶绕色相环旋转的度数（0 = base 颜色）。
* 生产代码传 getHueShiftAtTime(time) 实现主色漂移。
* 测试代码传 0（默认）获得确定性输出。
*/
export function intensityToColor(intensity: number, hueShift = 0): string {
const v = intensity < 0 ? 0 : intensity > 1 ? 1 : intensity
const idx = Math.min(
RIPPLE_COLOR_STOPS.length - 1,
Math.floor(v * RIPPLE_COLOR_STOPS.length),
)
const base = RIPPLE_COLOR_STOPS[idx]
return hueShift === 0 ? base : rotateHue(base, hueShift)
}
/**
* 'transparent' 字面量。intensityToColor 永不返回它（保留为兼容性导出）。
* 渲染层可用此常量做语义判定（如 cell 是 overlay 文字而非波纹背景）。
*/
export const TRANSPARENT = 'transparent'
/**
* 单位置 cell：char + color。
* - color 为 'transparent' 时渲染层不染色（背景保持终端默认）。
* - 文字 overlay cell 用具体颜色（suggestion / warning 等）。
*/
export type Cell = {
char: string
color: string
}
/**
* 渲染段：相邻同 color 的 cells 合并。
* 减少 React Text 节点数量（一行从 72 个 Text 降到 ~5-10 个）。
*/
export type Segment = {
text: string
color: string
}
/**
* 文字 overlay：在某行的 x 位置覆盖 text 字符串。
* - color undefined 时保留底层波纹 cell 自身颜色（仅替换 char）
* - color 指定时同时覆盖 char + color
*
* 后渲染的 overlay 在相同位置覆盖先渲染的（last-write-wins）。
*/
export type Overlay = {
text: string
/** 起始列；可为负（前缀被截断） */
x: number
/** overlay 字符颜色；undefined = 保留底层波纹颜色 */
color?: string
}
/**
* 波纹背景字符。
* 用空格让背景留空、只靠 color 染色（视觉上像"颜色斑点"）。
* 空格宽度稳定（永远 1 列），不像可变宽度 unicode 字符。
*/
const RIPPLE_BG_CHAR = ' '
/**
* 计算面板某一行 y 的完整波纹 cell 列表。
*
* 波纹数学（v6.1 — 平滑呼吸 + 主色全色环旋转）：
* dx = x - sourceX
* dy = (y - sourceY) * 1.5 （y 方向视觉拉伸，行高 > 字宽）
* dist = sqrt(dx² + dy²)
* phase = dist * 0.35 - time * 0.004 （速度调慢至原 1/3）
* wave = (sin(phase) + 1) / 2 （[−1,1] → [0,1]，平滑无平带）
* falloff = max(0, 1 - dist / 90) （覆盖半径扩到 90）
* intensity = wave * falloff
* hueShift = (time * 0.03) % 360 （连续旋转，12s 一圈全色环）
* color = intensityToColor(intensity, hueShift)
*
* v6.1 改 hueShift 为连续旋转（v6 是 sin±25° 振荡，色域太窄到不了
* 红黄）。现在每 12s 走完一圈完整色环：蓝→紫→品红→红→橙→黄→绿→青→蓝。
* 两个时间常数（相位 0.004 vs hue 0.03）解耦，让"流动"和"变色"不同步。
*
* 每位置强度经 intensityToColor → 颜色字符串（永不 transparent），写入 cell。
*
* @returns 长度严格等于 width 的 Cell 数组
*/
export function computeRippleCells(args: {
y: number
width: number
time: number
sourceX: number
sourceY: number
}): Cell[] {
const { y, width, time, sourceX, sourceY } = args
if (width <= 0) return []
const hueShift = getHueShiftAtTime(time)
const cells: Cell[] = new Array(width)
for (let x = 0; x < width; x++) {
const dx = x - sourceX
const dy = (y - sourceY) * 1.5
const dist = Math.sqrt(dx * dx + dy * dy)
// 主波纹相位（速度调慢：原 0.012 → 0.004，约 1/3 速）
const phase = dist * 0.35 - time * 0.004
// 平滑呼吸：[−1,1] → [0,1]，无平带，无双倍频率
const wave = (Math.sin(phase) + 1) / 2
// 距离衰减（覆盖半径扩到 90：原 40）
const falloff = Math.max(0, 1 - dist / 90)
const intensity = wave * falloff
cells[x] = {
char: RIPPLE_BG_CHAR,
color: intensityToColor(intensity, hueShift),
}
}
return cells
}
/**
* 把 overlays 文字覆盖到 cells。
*
* 行为：
* - 文字字符永远胜出（替换底层 cell.char）
* - overlay.color 为 undefined 时保留底层 cell.color（仅替换 char）
* - overlay.color 指定时同时覆盖 char + color
* - 超出右边界的文字被截断
* - x 为负时跳过前 |x| 个字符
*
* 不修改原数组，返回新数组（防御式拷贝）。
*/
export function applyOverlaysToCells(
cells: Cell[],
overlays: Overlay[],
): Cell[] {
const out: Cell[] = cells.map(c => ({ ...c }))
for (const overlay of overlays) {
const start = overlay.x
if (start >= out.length) continue
for (let i = 0; i < overlay.text.length; i++) {
const targetIdx = start + i
if (targetIdx < 0) continue
if (targetIdx >= out.length) break
out[targetIdx] = {
char: overlay.text[i],
color: overlay.color ?? out[targetIdx].color,
}
}
}
return out
}
/**
* 合并相邻同色 cells 为 segments。
*
* 用于减少渲染节点：一行 72 cells 可能只有 5-10 个颜色变化点，
* 合并后只需渲染 N 个 Text 段而非 N 个单字符 Text。
*/
export function cellsToSegments(cells: Cell[]): Segment[] {
if (cells.length === 0) return []
const segments: Segment[] = []
let current: Segment = { text: cells[0].char, color: cells[0].color }
for (let i = 1; i < cells.length; i++) {
const cell = cells[i]
if (cell.color === current.color) {
current.text += cell.char
} else {
segments.push(current)
current = { text: cell.char, color: cell.color }
}
}
segments.push(current)
return segments
}
/**
* 把 hex 颜色按 fade 因子（0~1）缩放亮度。
*
* 用于进入/退出动画：
* - fade ≤ 0.01 → TRANSPARENT（cell 不渲染背景，等同终端默认）
* - fade = 0.5 → 颜色 RGB 各分量减半（暗紫蓝）
* - fade = 1 → 原色（完整波纹）
*
* 非法 hex（非 #rrggbb 格式）原样返回（防御式）。
*/
export function fadeColor(color: string, fade: number): string {
if (color === TRANSPARENT) return TRANSPARENT
const f = fade < 0 ? 0 : fade > 1 ? 1 : fade
if (f <= 0.01) return TRANSPARENT
if (!/^#[0-9a-fA-F]{6}$/.test(color)) return color
const r = parseInt(color.slice(1, 3), 16)
const g = parseInt(color.slice(3, 5), 16)
const b = parseInt(color.slice(5, 7), 16)
const fr = Math.round(r * f)
.toString(16)
.padStart(2, '0')
const fg = Math.round(g * f)
.toString(16)
.padStart(2, '0')
const fb = Math.round(b * f)
.toString(16)
.padStart(2, '0')
return `#${fr}${fg}${fb}`
}
/**
* 把整行 cells 的颜色按 fade 缩放（用于进入/退出动画）。
*
* 不修改原数组，返回新数组。
*/
export function fadeCells(cells: Cell[], fade: number): Cell[] {
return cells.map(c => ({ char: c.char, color: fadeColor(c.color, fade) }))
}

25
src/components/EffortPanel/useRippleFrame.ts Normal file
View File

@@ -0,0 +1,25 @@
import { type DOMElement, useAnimationFrame } from '@anthropic/ink'
const RIPPLE_INTERVAL_MS = 60
/**
* ultracode 波纹动画 hook。
*
* 设计：
* - 仅当 enabled=true（cursor === 'ultracode' 或退出淡出未结束）时订阅时钟，
* pass null 时 useAnimationFrame 内部不订阅 ClockContext，setInterval 不触发。
* - 返回 [ref, time]：ref 附到波纹容器（驱动 viewport-pause），time
* 用于 computeRippleLine 计算各行的波纹相位。
*
* enabled=false 时返回 time=0（下游基于 enabled 直接不渲染波纹层，
* 但 0 仍是合法值，避免意外的 phase 输出 NaN）。
*
* 注意：调用方应传 showingRipple（on ultracode || fade > 0），不是 rippleActive，
* 这样退出动画期间时钟继续推进，fade useEffect 才有 tick 触发。
*/
export function useRippleFrame(
enabled: boolean,
): [ref: (element: DOMElement | null) => void, time: number] {
const [ref, time] = useAnimationFrame(enabled ? RIPPLE_INTERVAL_MS : null)
return [ref, enabled ? time : 0]
}

6
src/components/permissions/PermissionRequest.tsx
View File

@@ -45,14 +45,12 @@ const ReviewArtifactPermissionRequest = feature('REVIEW_ARTIFACT')
: null;
const WorkflowTool = feature('WORKFLOW_SCRIPTS')
? (
require('@claude-code-best/builtin-tools/tools/WorkflowTool/WorkflowTool.js') as typeof import('@claude-code-best/builtin-tools/tools/WorkflowTool/WorkflowTool.js')
).WorkflowTool
? (require('../../workflow/wiring.js') as typeof import('../../workflow/wiring.js')).createWorkflowToolCore()
: null;
const WorkflowPermissionRequest = feature('WORKFLOW_SCRIPTS')
? (
require('@claude-code-best/builtin-tools/tools/WorkflowTool/WorkflowPermissionRequest.js') as typeof import('@claude-code-best/builtin-tools/tools/WorkflowTool/WorkflowPermissionRequest.js')
require('../../workflow/WorkflowPermissionRequest.js') as typeof import('../../workflow/WorkflowPermissionRequest.js')
).WorkflowPermissionRequest
: null;

77
src/components/tasks/BackgroundTasksDialog.tsx
View File

@@ -1,6 +1,5 @@
import { feature } from 'bun:bundle';
import figures from 'figures';
import type { AgentId } from '../../types/ids.js';
import React, { type ReactNode, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';
import { isCoordinatorMode } from 'src/coordinator/coordinatorMode.js';
import { useTerminalSize } from 'src/hooks/useTerminalSize.js';
@@ -107,15 +106,12 @@ type ListItem =
// ~1.3K lines into external builds. Gate with feature() + require so the
// bundler can dead-code-eliminate the branch.
/* eslint-disable @typescript-eslint/no-require-imports */
const WorkflowDetailDialog = feature('WORKFLOW_SCRIPTS')
? (require('./WorkflowDetailDialog.js') as typeof import('./WorkflowDetailDialog.js')).WorkflowDetailDialog
: null;
// WorkflowDetailDialog 已移除：workflow 详情改由 /workflows 面板展示。
const workflowTaskModule = feature('WORKFLOW_SCRIPTS')
? (require('src/tasks/LocalWorkflowTask/LocalWorkflowTask.js') as typeof import('src/tasks/LocalWorkflowTask/LocalWorkflowTask.js'))
: null;
const killWorkflowTask = workflowTaskModule?.killWorkflowTask ?? null;
const skipWorkflowAgent = workflowTaskModule?.skipWorkflowAgent ?? null;
const retryWorkflowAgent = workflowTaskModule?.retryWorkflowAgent ?? null;
// skipWorkflowAgent / retryWorkflowAgent 仅由 /workflows 面板调用（原详情对话框已移除）。
// Relative path, not `src/...` path-mapping — Bun's DCE can statically
// resolve + eliminate `./` requires, but path-mapped strings stay opaque
// and survive as dead literals in the bundle. Matches tasks.ts pattern.
@@ -440,29 +436,58 @@ export function BackgroundTasksDialog({ onDone, toolUseContext, initialDetailTas
key={`teammate-${task.id}`}
/>
);
case 'local_workflow':
if (!WorkflowDetailDialog) return null;
case 'local_workflow': {
// shift+下/Enter 进入的 workflow 详情。原 WorkflowDetailDialog 已移除，
// 详情改由 /workflows 面板展示，但此处仍需一个能退出的占位视图——
// 否则用户进入后 Esc/←/q 全无效，卡死。照 MonitorMcpDetailDialog 模式：
// ←/Esc 返回（goBackToList：单任务关闭、多任务回列表），x kill（running）。
const onKill =
task.status === 'running' && killWorkflowTask ? () => killWorkflowTask(task.id, setAppState) : undefined;
return (
<WorkflowDetailDialog
workflow={task}
onDone={onDone as (message?: string, options?: { display?: string }) => void}
onKill={
task.status === 'running' && killWorkflowTask ? () => killWorkflowTask(task.id, setAppState) : undefined
}
onSkipAgent={
task.status === 'running' && skipWorkflowAgent
? (agentId: string) => skipWorkflowAgent(task.id, agentId as AgentId, setAppState)
: undefined
}
onRetryAgent={
task.status === 'running' && retryWorkflowAgent
? (agentId: string) => retryWorkflowAgent(task.id, agentId as AgentId, setAppState)
: undefined
}
onBack={goBackToList}
<Box
key={`workflow-${task.id}`}
/>
flexDirection="column"
tabIndex={0}
borderStyle="round"
onKeyDown={(e: KeyboardEvent) => {
if (e.key === 'left') {
e.preventDefault();
goBackToList();
} else if (e.key === 'x' && onKill) {
e.preventDefault();
onKill();
}
}}
>
<Dialog
title={task.workflowName}
subtitle={
<Text dimColor>
{task.status}
{task.summary ? ` · ${task.summary}` : ''}
</Text>
}
onCancel={goBackToList}
inputGuide={() => (
<Byline>
<KeyboardShortcutHint shortcut="←" action="go back" />
<KeyboardShortcutHint shortcut="Esc" action="close" />
{onKill && <KeyboardShortcutHint shortcut="x" action="stop" />}
</Byline>
)}
>
{task.status === 'failed' && task.error ? (
<Box flexDirection="column">
<Text color="error">失败原因：{task.error}</Text>
<Text color="subtle">用 /workflows 查看阶段与 agent 实时进度</Text>
</Box>
) : (
<Text color="subtle">用 /workflows 查看阶段与 agent 实时进度</Text>
)}
</Dialog>
</Box>
);
}
case 'monitor_mcp':
if (!MonitorMcpDetailDialog) return null;
return (

103
src/components/tasks/WorkflowDetailDialog.tsx
View File

@@ -1,103 +0,0 @@
import React, { useCallback } from 'react';
import type { DeepImmutable } from 'src/types/utils.js';
import { useElapsedTime } from '../../hooks/useElapsedTime.js';
import { Box, Text, type KeyboardEvent } from '@anthropic/ink';
import { useKeybindings } from '../../keybindings/useKeybinding.js';
import type { LocalWorkflowTaskState } from '../../tasks/LocalWorkflowTask/LocalWorkflowTask.js';
import { Byline } from '../design-system/Byline.js';
import { Dialog } from '../design-system/Dialog.js';
import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js';
type Props = {
workflow: DeepImmutable<LocalWorkflowTaskState>;
onDone: (message?: string, options?: { display?: string }) => void;
onKill?: () => void;
onSkipAgent?: (agentId: string) => void;
onRetryAgent?: (agentId: string) => void;
onBack?: () => void;
};
/**
* Detail dialog for local workflow tasks shown in the Shift+Down background
* tasks overlay. Displays the workflow name, file, status, and output.
* Follows the DreamDetailDialog/ShellDetailDialog pattern.
*/
export function WorkflowDetailDialog({
workflow,
onDone: _onDone,
onKill,
onSkipAgent: _onSkipAgent,
onRetryAgent: _onRetryAgent,
onBack,
}: Props): React.ReactNode {
const elapsedTime = useElapsedTime(workflow.startTime, workflow.status === 'running', 1000, 0);
useKeybindings({}, { context: 'WorkflowDetail' });
const handleKeyDown = useCallback(
(e: KeyboardEvent): void => {
if (e.key === 'left' && onBack) {
e.preventDefault();
onBack();
} else if (e.key === 'x' && workflow.status === 'running' && onKill) {
e.preventDefault();
onKill();
}
},
[onBack, onKill, workflow.status],
);
return (
<Box flexDirection="column" tabIndex={0} borderStyle="round" onKeyDown={handleKeyDown}>
<Dialog
title="Workflow"
subtitle={
<Text dimColor>
{elapsedTime} · {workflow.workflowName}
</Text>
}
onCancel={onBack ?? (() => {})}
inputGuide={() => (
<Byline>
{onBack && <KeyboardShortcutHint shortcut={'\u2190'} action="go back" />}
<KeyboardShortcutHint shortcut="Esc" action="close" />
{workflow.status === 'running' && onKill && <KeyboardShortcutHint shortcut="x" action="stop" />}
</Byline>
)}
>
<Box flexDirection="column" gap={1}>
<Text>
<Text bold>Status:</Text>{' '}
{workflow.status === 'running' ? (
<Text color="ansi:green">running</Text>
) : workflow.status === 'completed' ? (
<Text color="ansi:green">{workflow.status}</Text>
) : (
<Text color="ansi:red">{workflow.status}</Text>
)}
</Text>
<Text>
<Text bold>Description:</Text> {workflow.description}
</Text>
<Text>
<Text bold>Workflow:</Text> {workflow.workflowName}
</Text>
<Text>
<Text bold>File:</Text> {workflow.workflowFile}
</Text>
{workflow.summary && (
<Text>
<Text bold>Summary:</Text> {workflow.summary}
</Text>
)}
{workflow.output && (
<Box flexDirection="column">
<Text bold>Output:</Text>
<Text dimColor>{workflow.output}</Text>
</Box>
)}
</Box>
</Dialog>
</Box>
);
}