emrg: gui renderer Batch 2 — chat transcript store + TranscriptView component

Agent.md

@@ -86,7 +86,7 @@ Usage: say "tool loop" for the whole process, "round N" for a single LLM request
  - Session list/switch/new/delete + right-click rename (context menu, #423) synced with daemon; own-stream busy lock (G65); broadcast streams from other clients tagged "来自其他客户端"
  - Disconnect/reconnect: red status dot, auto daemon respawn (stale-port detection), session resume, input bar restored on disconnect (no 30s fake-timeout)
  - Unit tests `npm test` (265: 45 daemon_client + 20 conn-manager + 22 app-commands + 132 renderer smoke + 15 i18n + 8 integration + 3 commands + 8 build-config + 7 gui-state + 2 tool-group + 3 preload-api); RESPONSE_TYPES mirror daemon protocol verified against `daemon.py`
- - React migration Batch 0 + Batch 1 (design `~/.emrg/designs/gui-react-migration-design.md`): `emrg/gui/renderer/` scaffold — Vite 8 + React 19 + TypeScript strict + Vitest + self-developed SnapshotStore (useSyncExternalStore); standalone build → `renderer/dist/index.html` + `assets/*` (CSP `script-src 'self'`-safe, no inline); `window.emrg` bridge (52 invoke + onEvent, API-surface guard test) + main.js + daemon protocol untouched; vanilla renderer stays live until Batch 5 switch (D3); Batch 1 ported commands.js → `lib/commands.ts` + copywriting.js → `lib/copywriting.ts` (pure logic, injectable t); Batch 1 remainder: i18n.js full dictionary (373 keys zh/en parity, auto-generated `lib/i18n-dicts.ts` + detectLocale/getLocale/setLocale/t) + markdown.js → `lib/markdown.ts` (marked/DOMPurify/hljs injectable, fence-closed heuristic + block-projection streaming)
+ - React migration Batch 0 + Batch 1 (design `~/.emrg/designs/gui-react-migration-design.md`): `emrg/gui/renderer/` scaffold — Vite 8 + React 19 + TypeScript strict + Vitest + self-developed SnapshotStore (useSyncExternalStore); standalone build → `renderer/dist/index.html` + `assets/*` (CSP `script-src 'self'`-safe, no inline); `window.emrg` bridge (52 invoke + onEvent, API-surface guard test) + main.js + daemon protocol untouched; vanilla renderer stays live until Batch 5 switch (D3); Batch 1 ported commands.js → `lib/commands.ts` + copywriting.js → `lib/copywriting.ts` (pure logic, injectable t); Batch 1 remainder: i18n.js full dictionary (373 keys zh/en parity, auto-generated `lib/i18n-dicts.ts` + detectLocale/getLocale/setLocale/t) + markdown.js → `lib/markdown.ts` (marked/DOMPurify/hljs injectable, fence-closed heuristic + block-projection streaming); Batch 2: chat.js → `lib/transcript.ts` (pure per-session state machine — delta/done/toolStart/toolEnd/merge-group/clearTyping, sid buckets P3, 15 tests) + `components/TranscriptView.tsx` (React chat area: streaming plain-text → markdown-on-done via injectable renderer, tool rows running→done/failed with elapsed + expandable output, merge-group bar summary + collapse/user-expanded, remote label, 7 tests)
 - **Scheduled tasks** — Task generalization + CRUD (rant 2026-08-12T18:23:15, #709/#710/#711)
  - Task handler generalized: `TaskHandler` (renamed from `EvolutionHandler`), repo-configured self-heal for any project, template lookup builtin → `~/.emrg/task-templates/<name>.md` → fallback
  - Daemon commands: `task_create/update/delete` + `task_template_create/list/update/delete` (tasks stored in `~/.emrg/tasks.yml`, custom type templates in `~/.emrg/task-templates/`)
@@ -120,7 +120,7 @@ pkill -f "emrg.server"; rm -f ~/.emrg/emrgd.token; python -m emrg
 ```
 
 Python: `uv run pytest tests/ -v` (1095) — import check: `uv run python -c "from emrg.client.app import run_client"`
-GUI: `cd emrg/gui && npm test` (265: 45 daemon_client + 20 conn-manager + 22 app-commands + 132 renderer smoke + 15 i18n + 8 integration + 3 commands + 8 build-config + 7 gui-state + 2 tool-group + 3 preload-api) — syntax: `node --check main.js preload.js daemon_client.js renderer/js/*.js`; renderer React suite: `cd emrg/gui/renderer && npm run typecheck && npm test` (56 vitest: 5 snapshot-store + 9 utils + 3 ErrorBoundary + 2 App smoke + 11 commands + 4 copywriting + 11 i18n + 11 markdown) + `npm run build` → `renderer/dist/`
+GUI: `cd emrg/gui && npm test` (265: 45 daemon_client + 20 conn-manager + 22 app-commands + 132 renderer smoke + 15 i18n + 8 integration + 3 commands + 8 build-config + 7 gui-state + 2 tool-group + 3 preload-api) — syntax: `node --check main.js preload.js daemon_client.js renderer/js/*.js`; renderer React suite: `cd emrg/gui/renderer && npm run typecheck && npm test` (78 vitest: 5 snapshot-store + 9 utils + 3 ErrorBoundary + 2 App smoke + 11 commands + 4 copywriting + 11 i18n + 11 markdown + 15 transcript + 7 TranscriptView) + `npm run build` → `renderer/dist/`
 CI: `uv run pytest` (ubuntu + **windows-2025 matrix** — Windows pytest 回归在 PR CI 即失败，v0.2.29 教训 #725) + GUI tests + **actionlint workflow lint** (`rhysd/actionlint@v1.7.12` gate, #444 — workflow 解析错误在 PR CI 即失败，如 `if:` secrets 上下文)
 Re-trigger: `scripts/re-trigger-ci.sh [branch]` (workflow_dispatch, #527 — 替代空 commit 重触发：Actions outage 会整段丢弃 push 事件，dispatch 走 API 路径不受影响)
 Git-over-https 兜底: `python scripts/sync-master-from-api.py [--repo owner/name] [--ref master]` — 受限网络下 github.com:443 不可达而 api.github.com 可达时，用 Git Data API 的 verification payload + signature 字节级重建上游 commit（含 web-flow GPG 签名 squash merge，reconstruct_commit 经 hermetic 测试验证 sha 一致）并推进本地 refs；内容对象缺失时 fail-loud 提示改用 git fetch（10+ 周期实证的恢复路径）

emrg/gui/renderer/src/components/TranscriptView.test.tsx

@@ -0,0 +1,145 @@
+import { describe, expect, it } from "vitest";
+import { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { TranscriptView } from "./TranscriptView";
+import { createTranscriptStore, type TranscriptStore } from "../lib/transcript";
+import { I18nProvider } from "../lib/i18n";
+import type { MarkdownRenderer } from "../lib/markdown";
+
+/**
+ * TranscriptView.test.tsx — 聊天区 React 组件测试（Batch 2，设计 §5 Batch 2 项 6 验收）。
+ * 注入假 markdown 渲染器（无 marked vendor 依赖），断言消息渲染/工具流转/合并组交互。
+ */
+
+// 假渲染器：renderMarkdown 包一层 .md-test 便于断言 done 后的 HTML 注入
+const fakeMd: MarkdownRenderer = {
+ renderMarkdown: async (text) => `<div class="md-test">${text}</div>`,
+ streamProject: () => false,
+ streamFinalize: async () => {},
+};
+
+function setup(store: TranscriptStore, sid?: string | null) {
+ return render(
+ <I18nProvider lang="zh">
+ <TranscriptView store={store} sid={sid} renderer={fakeMd} />
+ </I18nProvider>,
+ );
+}
+
+describe("TranscriptView", () => {
+ it("渲染用户/系统/历史消息与历史加载条", () => {
+ const store = createTranscriptStore({ t: (k) => k });
+ store.addUserMessage("hello", "s1");
+ store.addSystemMessage("system note", "s1");
+ store.addHistoryMessage("old message", "s1");
+ store.setLoadBar("加载历史中…", "s1");
+ const { container } = setup(store, "s1");
+ expect(screen.getByText("hello")).toHaveClass("msg", "user");
+ expect(screen.getByText("system note")).toHaveClass("msg", "system");
+ expect(screen.getByText("old message")).toHaveClass("history");
+ expect(container.querySelector(".history-load-bar")).toHaveTextContent("加载历史中…");
+ });
+
+ it("流式显示纯文本，done 后渲染 markdown（✦ 前缀不破坏块语法）", async () => {
+ const store = createTranscriptStore({ t: (k) => k });
+ store.handleDelta([{ request_id: "r1", content: "**bold** text" }], "s1");
+ const { container } = setup(store, "s1");
+ const body = container.querySelector(".msg-body");
+ expect(body).toHaveClass("typing");
+ expect(body!.textContent).toContain("**bold** text");
+ act(() => {
+ store.handleDone({ request_id: "r1" }, "s1");
+ });
+ // done → typing 移除 + 假渲染器输出 .md-test（整体 markdown；await 覆盖异步渲染与重渲染）
+ expect(container.querySelector(".msg-body")).not.toHaveClass("typing");
+ const mdDiv = await screen.findByText("**bold** text", { selector: ".md-test" });
+ expect(mdDiv).toBeInTheDocument();
+ // ✦ 标记独立于渲染文本
+ expect(container.querySelector(".msg-assistant-mark")).toHaveTextContent("✦");
+ });
+
+ it("工具行 running → done：label 切换 + ✓ + 耗时 + 输出默认隐藏、点击展开", () => {
+ const store = createTranscriptStore({ t: (k) => k });
+ store.handleToolStart(
+ { tool_call_id: "t1", tool_name: "bash", request_id: "r1", intent: "check config" },
+ "s1",
+ );
+ const { container } = setup(store, "s1");
+ const row = container.querySelector(".tool-row")!;
+ expect(row).toHaveClass("running");
+ expect(screen.getByText("正在运行命令…")).toBeInTheDocument();
+ expect(screen.getByText("check config")).toHaveClass("tool-intent");
+ act(() => {
+ store.handleToolEnd({ tool_call_id: "t1", tool_name: "bash", elapsed: 0.4, content: "out" }, "s1");
+ });
+ expect(row).toHaveClass("done");
+ expect(screen.getByText("已运行命令")).toBeInTheDocument();
+ expect(screen.getByText("· 0.4s")).toHaveClass("tool-time");
+ const output = container.querySelector(".tool-output")!;
+ expect(output).toHaveClass("hidden");
+ expect(output).toHaveTextContent("out");
+ // 点击行 → 展开输出
+ act(() => {
+ (row as HTMLElement).click();
+ });
+ expect(output).not.toHaveClass("hidden");
+ });
+
+ it("失败工具行：failed label（tool.failText）且无耗时", () => {
+ const store = createTranscriptStore({ t: (k) => k });
+ store.handleToolStart({ tool_call_id: "t1", tool_name: "bash", request_id: "r1" }, "s1");
+ store.handleToolEnd({ tool_call_id: "t1", tool_name: "bash", elapsed: 9.9, error: "boom" }, "s1");
+ const { container } = setup(store, "s1");
+ const row = container.querySelector(".tool-row")!;
+ expect(row).toHaveClass("failed");
+ expect(screen.getByText("这一步没成功，我换个方法试试")).toBeInTheDocument();
+ expect(container.querySelector(".tool-time")).not.toBeInTheDocument();
+ });
+
+ it("连续工具合并组：摘要 + 收起，bar 点击展开后不再自动收起", () => {
+ const store = createTranscriptStore({ t: (k) => k });
+ store.handleToolStart({ tool_call_id: "t1", tool_name: "bash", request_id: "r1" }, "s1");
+ store.handleToolEnd({ tool_call_id: "t1", tool_name: "bash", elapsed: 0.4, content: "" }, "s1");
+ store.handleToolStart({ tool_call_id: "t2", tool_name: "read", request_id: "r1" }, "s1");
+ store.handleToolEnd({ tool_call_id: "t2", tool_name: "read", elapsed: 1.2, content: "" }, "s1");
+ const { container } = setup(store, "s1");
+ const group = container.querySelector(".tool-group")!;
+ expect(group).toHaveClass("collapsed");
+ expect(container.querySelectorAll(".tool-row")).toHaveLength(2);
+ expect(container.querySelector(".tool-group-summary")).toHaveTextContent("2 个工具执行 · 1.6s");
+ // bar 点击 → 展开 + user-expanded
+ act(() => {
+ (container.querySelector(".tool-group-bar") as HTMLElement).click();
+ });
+ expect(group).not.toHaveClass("collapsed");
+ expect((group as HTMLElement).dataset.userExpanded).toBe("1");
+ // 新工具并入组且不自动收起
+ act(() => {
+ store.handleToolStart({ tool_call_id: "t3", tool_name: "edit", request_id: "r1" }, "s1");
+ store.handleToolEnd({ tool_call_id: "t3", tool_name: "edit", elapsed: 0.3, content: "" }, "s1");
+ });
+ expect(container.querySelectorAll(".tool-row")).toHaveLength(3);
+ expect(group).not.toHaveClass("collapsed");
+ expect(container.querySelector(".tool-group-summary")).toHaveTextContent("3 个工具执行 · 1.9s");
+ });
+
+ it("其他客户端的广播流带 remote 标签；own stream 不带", () => {
+ const store = createTranscriptStore({ t: (k) => k });
+ store.handleDelta([{ request_id: "r1", content: "broadcast" }], "s1");
+ const { container } = setup(store, "s1");
+ expect(screen.getByText("（来自其他客户端）")).toBeInTheDocument();
+ // own stream → 无标签
+ const store2 = createTranscriptStore({ t: (k) => k });
+ store2.setOwnStream("r2");
+ store2.handleDelta([{ request_id: "r2", content: "own" }], "s1");
+ const { container: c2 } = setup(store2, "s1");
+ expect(c2.querySelector(".remote-label")).not.toBeInTheDocument();
+ });
+
+ it("sid=null 缺省桶：无 sid 事件渲染到默认视图", () => {
+ const store = createTranscriptStore({ t: (k) => k });
+ store.addUserMessage("legacy", null);
+ setup(store);
+ expect(screen.getByText("legacy")).toHaveClass("msg", "user");
+ });
+});