fischer
/
fischer-agentkit
1
0
Fork 0
Code Issues Pull Requests Actions 87 Packages Projects Releases Wiki Activity

feat: UI/UE enhancement — streaming, sticky header, hover actions, calendar tokens #13

Merged
fischer merged 2 commits from feat/ui-ue-enhancement into main 2026-07-01 13:15:34 +08:00
Conversation 0 Commits 2 Files Changed 36 +4428 -92
fischer commented 2026-07-01 12:53:22 +08:00
Owner
Copy Link

Summary

为 agentkit 聊天界面引入流式 token 输出、粘性模式头部、消息悬停操作与日历配色重设计。专家团队讨论/综合过程现在逐 token 流式呈现，PhaseIndicator 保持独立显示，用户气泡支持 hover 复制/删除/重填。修复了两项 P0 流式 bug（WS 事件白名单缺失、final_answer 双重累积）。

Changes

U1 — ThinkingBlock 流式光标

  • 新增 streaming 状态光标动画，思考过程实时呈现
  • 思考结束后自动折叠为摘要条

U2 — StickyModeHeader

  • 新组件 StickyModeHeader.vue，替换原 ExpertTeamView + BoardStatusView 的散落状态展示
  • PhaseIndicator 保持独立显示（未合并到 sticky header）

U3 — 后端流式事件转发

  • src/agentkit/experts/_phase_executor.py 新增 _execute_phase_stream，调用 execute_stream() 并转发 token / thinking / final_answer 事件
  • 通过 emit_team_event 广播 expert_result_chunk / expert_result_chunk_reset 给前端

U4 — 前端 chatStream token 累积

  • src/agentkit/server/frontend/src/stores/chatStream.ts 处理 expert_result_chunk / team_synthesis_chunk 事件，逐 token 拼接到 streaming 消息
  • 5 处 [...messages].reverse().find() 重构为 findLastMessage helper，避免 per-token 热路径的数组分配

U5 — AssistantText 路由标签

  • 悬停时路由标签淡入显示，移出后淡出

U6 — UserBubble 悬停操作

  • hover 显示复制 / 删除 / 重填按钮
  • 键盘和触屏可访问

U7 — CalendarGrid 配色重设计

Review fixes (ce-code-review)

应用 3 项 review 修复：

  • P0 src/agentkit/server/routes/chat.py：_VALID_TEAM_EVENT_TYPES 白名单新增 expert_result_chunk / expert_result_chunk_reset / team_synthesis_chunk 3 个流式事件类型 — 否则 emit_team_event 静默丢弃，整个 U3/U4 功能失效
  • P0 src/agentkit/experts/_phase_executor.py：final_answer 不再 accumulated.append(output) — ReActEngine 先发 token（增量）再发 final_answer（全文），双重累积导致前端内容翻倍。token 已累积时 final_answer 仅作完成信号；无 token 时（如 _wrap_sync_as_stream fallback）用 output 兜底
  • P2 src/agentkit/experts/_phase_executor.py：异常处理从 except (RuntimeError, asyncio.TimeoutError, ConnectionError) 扩展为 except Exception — 否则 LLMProviderError / ConfigValidationError 等穿透导致前端 streaming 卡死。asyncio.CancelledError（Python 3.8+ 继承 BaseException）已被上方 except 捕获

Simplification (ce-simplify-code)

Test plan

  • pytest（专家团队流式）：13/13 通过
  • vitest（前端组件）：126/127 通过（1 个 baseline failure，与本次变更无关）
  • TypeScript typecheck：通过
  • Ruff lint/format：clean
  • 测试覆盖新增：test_final_answer_fallback_when_no_tokens / test_final_answer_not_forwarded_as_chunk 验证 ReActEngine 流式合约

Validation

无 running server 可用，浏览器测试改用 vitest 组件测试替代。手动验证范围：

  • _phase_executor 流式事件序列通过 pytest mock 验证：token → final_answer → expert_result_chunk 广播顺序符合合约
  • WS 白名单：emit_team_event 对 3 个新事件类型不再静默丢弃
  • 前端 chatStream：findLastMessage 等价于原 [...].reverse().find() 语义（5 处替换 + vitest 126/127 通过）

Known residuals

未应用的 review findings 记录在 docs/residual-review-findings/feat-ui-ue-enhancement.md，含 4 项 actionable（P1 expert_step payload / P2 CancellationToken / P2 synthesis 孤儿线程 / P2 synthesis 占位匹配）和 9 项 advisory。建议在后续 PR 处理。

Related

## Summary 为 agentkit 聊天界面引入流式 token 输出、粘性模式头部、消息悬停操作与日历配色重设计。专家团队讨论/综合过程现在逐 token 流式呈现，PhaseIndicator 保持独立显示，用户气泡支持 hover 复制/删除/重填。修复了两项 P0 流式 bug（WS 事件白名单缺失、final_answer 双重累积）。 ## Changes ### U1 — ThinkingBlock 流式光标 - 新增 streaming 状态光标动画，思考过程实时呈现 - 思考结束后自动折叠为摘要条 ### U2 — StickyModeHeader - 新组件 [StickyModeHeader.vue](src/agentkit/server/frontend/src/components/chat/StickyModeHeader.vue)，替换原 ExpertTeamView + BoardStatusView 的散落状态展示 - PhaseIndicator 保持独立显示（未合并到 sticky header） ### U3 — 后端流式事件转发 - [src/agentkit/experts/_phase_executor.py](src/agentkit/experts/_phase_executor.py) 新增 `_execute_phase_stream`，调用 `execute_stream()` 并转发 `token` / `thinking` / `final_answer` 事件 - 通过 `emit_team_event` 广播 `expert_result_chunk` / `expert_result_chunk_reset` 给前端 ### U4 — 前端 chatStream token 累积 - [src/agentkit/server/frontend/src/stores/chatStream.ts](src/agentkit/server/frontend/src/stores/chatStream.ts) 处理 `expert_result_chunk` / `team_synthesis_chunk` 事件，逐 token 拼接到 streaming 消息 - 5 处 `[...messages].reverse().find()` 重构为 `findLastMessage` helper，避免 per-token 热路径的数组分配 ### U5 — AssistantText 路由标签 - 悬停时路由标签淡入显示，移出后淡出 ### U6 — UserBubble 悬停操作 - hover 显示复制 / 删除 / 重填按钮 - 键盘和触屏可访问 ### U7 — CalendarGrid 配色重设计 - 新增 [calendarTokens.ts](src/agentkit/server/frontend/src/utils/calendarTokens.ts) 基于 token 的颜色映射 - [calendar-overrides.css](src/agentkit/server/frontend/src/styles/calendar-overrides.css) 覆盖 Ant Design 默认样式 ## Review fixes (ce-code-review) 应用 3 项 review 修复： - **P0** [src/agentkit/server/routes/chat.py](src/agentkit/server/routes/chat.py)：`_VALID_TEAM_EVENT_TYPES` 白名单新增 `expert_result_chunk` / `expert_result_chunk_reset` / `team_synthesis_chunk` 3 个流式事件类型 — 否则 `emit_team_event` 静默丢弃，整个 U3/U4 功能失效 - **P0** [src/agentkit/experts/_phase_executor.py](src/agentkit/experts/_phase_executor.py)：`final_answer` 不再 `accumulated.append(output)` — ReActEngine 先发 token（增量）再发 final_answer（全文），双重累积导致前端内容翻倍。token 已累积时 final_answer 仅作完成信号；无 token 时（如 `_wrap_sync_as_stream` fallback）用 output 兜底 - **P2** [src/agentkit/experts/_phase_executor.py](src/agentkit/experts/_phase_executor.py)：异常处理从 `except (RuntimeError, asyncio.TimeoutError, ConnectionError)` 扩展为 `except Exception` — 否则 `LLMProviderError` / `ConfigValidationError` 等穿透导致前端 streaming 卡死。`asyncio.CancelledError`（Python 3.8+ 继承 BaseException）已被上方 except 捕获 ## Simplification (ce-simplify-code) - [src/agentkit/experts/_synthesizer.py](src/agentkit/experts/_synthesizer.py)：O(n²) 字符串拼接 → list+join；提取 `_concat_results` 静态方法消除 2 处重复 - [src/agentkit/core/config_driven.py](src/agentkit/core/config_driven.py)：4 个重复的 `_handle_*_stream` fallback 方法合并为 1 个通用 `_wrap_sync_as_stream` - [src/agentkit/server/frontend/src/stores/chatStream.ts](src/agentkit/server/frontend/src/stores/chatStream.ts)：5 处 `[...messages].reverse().find()` → `findLastMessage` helper ## Test plan - pytest（专家团队流式）：13/13 通过 - vitest（前端组件）：126/127 通过（1 个 baseline failure，与本次变更无关） - TypeScript typecheck：通过 - Ruff lint/format：clean - 测试覆盖新增：`test_final_answer_fallback_when_no_tokens` / `test_final_answer_not_forwarded_as_chunk` 验证 ReActEngine 流式合约 ## Validation 无 running server 可用，浏览器测试改用 vitest 组件测试替代。手动验证范围： - `_phase_executor` 流式事件序列通过 pytest mock 验证：token → final_answer → expert_result_chunk 广播顺序符合合约 - WS 白名单：`emit_team_event` 对 3 个新事件类型不再静默丢弃 - 前端 chatStream：`findLastMessage` 等价于原 `[...].reverse().find()` 语义（5 处替换 + vitest 126/127 通过） ## Known residuals 未应用的 review findings 记录在 [docs/residual-review-findings/feat-ui-ue-enhancement.md](docs/residual-review-findings/feat-ui-ue-enhancement.md)，含 4 项 actionable（P1 expert_step payload / P2 CancellationToken / P2 synthesis 孤儿线程 / P2 synthesis 占位匹配）和 9 项 advisory。建议在后续 PR 处理。 ## Related - 计划文档：[docs/plans/2026-07-01-001-feat-ui-ue-enhancement-plan.md](docs/plans/2026-07-01-001-feat-ui-ue-enhancement-plan.md) - 需求文档：[docs/brainstorms/2026-07-01-ui-ue-enhancement-requirements.md](docs/brainstorms/2026-07-01-ui-ue-enhancement-requirements.md)
fischer added 1 commit 2026-07-01 12:53:22 +08:00
Test / backend-test (pull_request) Has been cancelled Details
Test / frontend-unit (pull_request) Has been cancelled Details
Test / api-e2e (pull_request) Has been cancelled Details
Test / frontend-e2e (pull_request) Has been cancelled Details
f872a3fac6 feat: UI/UE enhancement — streaming, sticky header, hover actions, calendar tokens 
U1 ThinkingBlock: streaming cursor + auto-collapse to summary bar
U2 StickyModeHeader: new component replacing ExpertTeamView + BoardStatusView
U3 Backend _phase_executor: execute_stream() with token/thinking/final_answer forwarding
U4 Frontend chatStream: expert_result_chunk/team_synthesis_chunk token accumulation
U5 AssistantText: routing tag hover fade-in
U6 UserBubble: hover actions (copy/delete/refill)
U7 CalendarGrid: token-based color redesign

Review fixes (ce-code-review):
- P0: _VALID_TEAM_EVENT_TYPES whitelist adds 3 new streaming event types
- P0: final_answer no longer double-accumulates token content
- P2: exception handling expanded to except Exception for LLMProviderError etc.

Simplification (ce-simplify-code):
- _synthesizer.py: O(n²) concat -> list+join, _concat_results extraction
- config_driven.py: 4 duplicate _handle_*_stream -> _wrap_sync_as_stream
- chatStream.ts: 5x [...messages].reverse().find() -> findLastMessage helper

Tests: pytest 13/13, vitest 126/127 (1 baseline), typecheck pass, ruff clean
fischer added 1 commit 2026-07-01 13:15:08 +08:00
Test / backend-test (pull_request) Has been cancelled Details
Test / frontend-unit (pull_request) Has been cancelled Details
Test / api-e2e (pull_request) Has been cancelled Details
Test / frontend-e2e (pull_request) Has been cancelled Details
4866a16109 docs: compound streaming-event-whitelist-and-accumulation learning 
Captures the ReAct streaming contract bug + WS event whitelist governance
from PR #13's review fixes. Three intertwined runtime issues documented:

1. P0: final_answer double-accumulated token content (logic_error)
2. P0: _VALID_TEAM_EVENT_TYPES whitelist missing 3 new streaming event types
3. P2: except (RuntimeError, TimeoutError, ConnectionError) too narrow for
   LLMProviderError/ConfigValidationError in async generator

Adds ReAct Streaming Contract entry to CONCEPTS.md — defines the protocol
execute_stream() yields (token events with incremental content, then one
final_answer event with the concatenated full text). Consumers must pick
one accumulation strategy, cannot mix both without doubled output.
fischer merged commit 8066e0bf8b into main 2026-07-01 13:15:34 +08:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: fischer/fischer-agentkit#13
No description provided.
Delete Branch "feat/ui-ue-enhancement"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?