@kingsoftcloud/agentkit-harness-ui 0.0.0-stage → 0.0.1

package/src/tool-detail.mjs

@@ -0,0 +1,208 @@
+// @kingsoftcloud/agentkit-harness-ui — tool call detail blocks
+//
+// One stable bounded detail block per call identity. Presentation consumes
+// host-supplied input only; it never reads files or executes commands.
+
+import { truncateText, redactValue, boundedDetailLines } from "./summary.mjs";
+
+/** Maximum detail lines for a single tool block (safety + size contract). */
+export const MAX_TOOL_DETAIL_LINES = 4;
+const MAX_LINE_CHARS = 120;
+
+/**
+ * Stable action title for a tool. Known tools replace the generic lifecycle
+ * title with a human audit title; unknown/MCP tools fall back to the tool name.
+ * Never prefixed with `Tool` and never carries lifecycle status text.
+ * @param {string} name
+ * @param {Record<string, unknown>} [input]
+ * @returns {string}
+ */
+export function toolTitle(name, input = {}) {
+  const tool = String(name || "tool");
+  const path = typeof input.path === "string" ? input.path
+    : typeof input.file_path === "string" ? input.file_path
+    : typeof input.path === "undefined" && typeof input.file_path === "string" ? input.file_path
+    : "";
+  const nativeTitles = { read_workspace_file: '读取', write_workspace_file: '写入', edit_workspace_file: '修改',
+    apply_workspace_patch: '应用补丁', list_workspace_files: '列出文件', search_workspace_files: '搜索文件', run_command: '运行命令' };
+  if (nativeTitles[tool]) return `${nativeTitles[tool]}${path ? ` ${workspaceRelative(path)}` : ''}`;
+  switch (tool) {
+    case "Read":
+      return path ? `Read ${workspaceRelative(path)}` : "Read";
+    case "Edit":
+    case "Write":
+      return path ? `${tool} ${workspaceRelative(path)}` : tool;
+    case "Glob":
+      return patternTitle("Glob", input);
+    case "Grep":
+      return patternTitle("Grep", input);
+    case "WebFetch":
+    case "WebSearch":
+      return urlTitle(tool, input);
+    default:
+      return tool;
+  }
+}
+
+function patternTitle(tool, input) {
+  const pattern = typeof input.pattern === "string" ? input.pattern : "";
+  return pattern ? `${tool} ${truncateText(pattern, { maxLines: 1, maxChars: 60 })}` : tool;
+}
+
+function urlTitle(tool, input) {
+  const url = typeof input.url === "string" ? input.url : "";
+  return url ? `${tool} ${truncateText(url, { maxLines: 1, maxChars: 80 })}` : tool;
+}
+
+/**
+ * Workspace-relative path when inside the workspace, absolute otherwise. The
+ * workspace root is host-supplied (the UI does not detect it); when no root is
+ * configured the path is shown unchanged so the host stays the source of truth.
+ * @param {string} path
+ * @param {string} [workspaceRoot]
+ * @returns {string}
+ */
+export function workspaceRelative(path, workspaceRoot) {
+  const p = String(path || "");
+  if (!workspaceRoot) return p;
+  const root = workspaceRoot.endsWith("/") ? workspaceRoot : workspaceRoot + "/";
+  if (p === workspaceRoot || p === workspaceRoot.replace(/\/$/, "")) return ".";
+  if (p.startsWith(root)) return p.slice(root.length);
+  return p;
+}
+
+/**
+ * Bounded detail lines for a tool input. Known tools prefer human audit fields;
+ * unknown/MCP tools get a generic redacted preview capped at
+ * MAX_TOOL_DETAIL_LINES. Large content blobs are never dumped verbatim.
+ * @param {string} name
+ * @param {Record<string, unknown>} [input]
+ * @param {{workspaceRoot?: string, maxLines?: number, maxChars?: number}} [opts]
+ * @returns {{key: string, value: string}[]}
+ */
+export function toolDetailLines(name, input = {}, opts = {}) {
+  const tool = String(name || "tool");
+  const maxLines = opts.maxLines && opts.maxLines > 0 ? Math.min(opts.maxLines, MAX_TOOL_DETAIL_LINES) : MAX_TOOL_DETAIL_LINES;
+  const maxChars = opts.maxChars && opts.maxChars > 0 ? opts.maxChars : MAX_LINE_CHARS;
+  const detail = knownToolDetail(tool, input, opts.workspaceRoot, maxLines, maxChars);
+  if (detail) return detail;
+  return boundedDetailLines(input, { maxLines, maxChars });
+}
+
+function knownToolDetail(tool, input, workspaceRoot, maxLines, maxChars) {
+  const pushBounded = (rows, key, value) => {
+    if (rows.length >= maxLines) return rows;
+    if (value == null || value === "") return rows;
+    rows.push({ key, value: truncateText(String(value), { maxLines: 1, maxChars }) });
+    return rows;
+  };
+  let rows = [];
+  switch (tool) {
+    case "Bash":
+      pushBounded(rows, "command", input.command);
+      pushBounded(rows, "cwd", input.cwd);
+      if (input.timeout != null) pushBounded(rows, "timeout", input.timeout);
+      if (input.background) pushBounded(rows, "background", "true");
+      return rows.slice(0, maxLines);
+    case "Read":
+      pushBounded(rows, "offset", input.offset);
+      pushBounded(rows, "limit", input.limit);
+      pushBounded(rows, "pages", input.pages);
+      return rows.slice(0, maxLines);
+    case "Write":
+      pushBounded(rows, "offset", input.offset);
+      pushBounded(rows, "limit", input.limit);
+      pushBounded(rows, "pages", input.pages);
+      pushBounded(rows, "replace_all", input.replace_all);
+      return rows.slice(0, maxLines);
+    case "Edit":
+      // file_path is in the title; old_string/new_string are the audit surface
+      // but are summarized, not dumped. replace_all is omitted (already audited
+      // via the diff), matching the reference Edit rule.
+      return [];
+    case "Grep":
+      pushBounded(rows, "path", input.path ? workspaceRelative(input.path, workspaceRoot) : input.path);
+      pushBounded(rows, "glob", input.glob);
+      pushBounded(rows, "output_mode", input.output_mode);
+      pushBounded(rows, "type", input.type);
+      return rows.slice(0, maxLines);
+    case "Glob":
+      pushBounded(rows, "path", input.path ? workspaceRelative(input.path, workspaceRoot) : input.path);
+      return rows.slice(0, maxLines);
+    case "WebFetch":
+      pushBounded(rows, "prompt", typeof input.prompt === "string" ? input.prompt : "");
+      return rows.slice(0, maxLines);
+    case "Agent":
+      pushBounded(rows, "description", input.description);
+      pushBounded(rows, "subagent_type", input.subagent_type);
+      if (input.background) pushBounded(rows, "background", "true");
+      return rows.slice(0, maxLines);
+    case "Skill":
+      pushBounded(rows, "skill", input.skill);
+      return rows.slice(0, maxLines);
+    case "TodoWrite":
+      return todoDetail(input, maxLines, maxChars);
+    default:
+      return null;
+  }
+}
+
+function todoDetail(input, maxLines, maxChars) {
+  const todos = Array.isArray(input.todos) ? input.todos : [];
+  if (!todos.length) return [];
+  const inProgress = todos.find(t => t && t.status === "in_progress");
+  const rows = [];
+  rows.push({ key: "todos", value: String(todos.length) });
+  if (inProgress && rows.length < maxLines) {
+    rows.push({ key: "in_progress", value: truncateText(String(inProgress.content || ""), { maxLines: 1, maxChars }) });
+  }
+  return rows.slice(0, maxLines);
+}
+
+/**
+ * Bounded file_diff preview from a `tool.result` display payload. Returns null
+ * when the display is not a supported file_diff. The preview keeps a small set
+ * of hunk lines with `+`/`-` markers and a path summary; the full patch is
+ * never rendered verbatim.
+ * @param {Record<string, unknown>} [display]
+ * @param {{maxLines?: number}} [opts]
+ * @returns {{path: string, lines: {marker: string, text: string}[], truncated: boolean}|null}
+ */
+export function fileDiffPreview(display, opts = {}) {
+  if (!display || display.kind !== "file_diff") return null;
+  const maxLines = opts.maxLines && opts.maxLines > 0 ? Math.floor(opts.maxLines) : 8;
+  const path = String(display.path || "");
+  const patch = typeof display.patch === "string" ? display.patch : "";
+  const lines = [];
+  let truncated = false;
+  for (const raw of patch.split("\n")) {
+    if (lines.length >= maxLines) { truncated = true; break; }
+    if (!raw) continue;
+    if (raw.startsWith("@@")) continue;
+    if (raw.startsWith("+++") || raw.startsWith("---")) continue;
+    const marker = raw.startsWith("+") ? "+" : raw.startsWith("-") ? "-" : " ";
+    lines.push({ marker, text: truncateText(raw.slice(1), { maxLines: 1, maxChars: MAX_LINE_CHARS }) });
+  }
+  if (patch && !lines.length) {
+    lines.push({ marker: " ", text: "(no viewable lines)" });
+  }
+  return { path, lines, truncated };
+}
+
+/**
+ * Redact an error message for user-facing display. Keeps the message concise
+ * and bounded; never exposes values that may carry secrets in the raw error.
+ * @param {string} error
+ * @param {{maxChars?: number}} [opts]
+ * @returns {string}
+ */
+export function redactError(error, opts = {}) {
+  const maxChars = opts.maxChars && opts.maxChars > 0 ? opts.maxChars : 200;
+  const value = String(error || "");
+  // The error color/placement already expresses the type; keep the message
+  // itself, bounded. Strip common secret patterns defensively.
+  const cleaned = value.replace(/(token|secret|password|api[_-]?key|authorization)\s*[=:]\s*\S+/gi, "$1=[redacted]");
+  return truncateText(cleaned, { maxLines: 3, maxChars });
+}
+
+export { redactValue };

package/src/tool-error.mjs

@@ -0,0 +1,33 @@
+import { redactError } from './tool-detail.mjs';
+
+const summaries = {
+  invalid_delivery_scope: '交付范围声明无效，尚未更新',
+  web_definition_mismatch: '网页工具的接入配置不一致，尚未执行',
+  web_search_not_configured: '网页搜索服务尚未配置',
+  capture_limit_exceeded: '工作区变更清单超出观测上限，命令未执行',
+  command_policy_blocked: '命令不符合当前执行规则，尚未执行',
+  policy_denied: '当前权限规则未允许这次操作',
+  command_evidence_incomplete: '命令回执尚不完整，需要核对执行结果',
+  studio_native_browser_unavailable: '本地浏览器不可用，尚未完成网页验证',
+  child_capability_unavailable: '该子智能体缺少任务所需工具，尚未启动',
+  child_capability_request_invalid: '子任务所需工具声明无效，尚未启动',
+  child_role_unavailable: '所选子智能体不可用，尚未启动',
+  canceled: '操作已停止',
+  selector_ambiguous: '选择器匹配多个元素，请选择唯一目标',
+  selector_not_found: '未找到指定元素，请核对当前页面',
+  selector_not_visible: '指定元素当前不可见',
+  selector_not_actionable: '指定元素当前无法交互',
+  selector_resolution_failed: '无法解析或读取指定目标',
+};
+
+/** Detailed evidence remains expandable; compact rows do not dump wire JSON. */
+export function toolErrorSummary(error, { locale } = {}) {
+  let value;
+  try { value = typeof error === 'string' ? JSON.parse(error) : error; } catch { /* plain error */ }
+  if (value && typeof value === 'object') {
+    const code = value.error_type ?? value.code ?? value.error_code ?? value.error?.code;
+    if (String(locale ?? '').startsWith('zh')) return summaries[code] ?? '工具调用失败，点击查看具体原因';
+    return 'Tool call failed; expand for details';
+  }
+  return redactError(error);
+}

package/src/tool-identity.mjs

@@ -0,0 +1,40 @@
+/** Protocol identity, presentation family and placement have one owner. These
+ * descriptors never change execution names or confer tool permissions. */
+const groups = [
+  ['delivery', 'diagnostics', '交付范围', ['declare_deliverables']],
+  ['execute', 'conversation', '终端', ['Bash', 'bash', 'execute', 'run_command', 'Execute', 'ExecuteCommand', 'execute_command', 'RunCommand', 'shell', 'Shell']],
+  ['file', 'conversation', '读取', ['Read', 'read', 'read_workspace_file']],
+  ['validation', 'conversation', '检查文件', ['lint_workspace_file']],
+  ['list', 'conversation', '列出文件', ['Glob', 'glob', 'List', 'list_workspace_files']],
+  ['search', 'conversation', '搜索文件', ['Grep', 'grep', 'search_workspace_files', 'Search', 'search']],
+  ['edit', 'conversation', '编辑', ['Edit', 'edit_workspace_file', 'multi_edit_workspace_file', 'MultiEdit', 'edit', 'StrReplace', 'Patch', 'apply_workspace_patch']],
+  ['write', 'conversation', '写入', ['Write', 'write', 'write_workspace_file', 'write_workspace_files']],
+  ['delete', 'conversation', '删除', ['delete_workspace_file']],
+  ['agent', 'conversation', '子智能体', ['native_start_child', 'native_delegate', 'Agent', 'Task', 'subagent']],
+  ['plan', 'panel', '更新任务', ['TodoWrite', 'TodoRead', 'todo_write', 'todo_read', 'update_plan']],
+  ['environment', 'diagnostics', '运行环境', ['sandbox_status', 'workspace_status', 'component_status']],
+  ['web-search', 'conversation', '网页搜索', ['web_search', 'WebSearch']],
+  ['web-fetch', 'conversation', '网页抓取', ['web_fetch', 'WebFetch']],
+  ['browser', 'conversation', '浏览器', ['browser_inspect_workspace']],
+  ['skill', 'conversation', '技能', ['Skill', 'skill', 'skill_load', 'load_skill', 'skill_read', 'skill_disclose', 'preview_skill', 'execute_skills', 'skill_read_manifest', 'skill_read_instructions', 'skill_read_resource']],
+  ['skill-catalog', 'conversation', '搜索技能', ['skill_catalog', 'skill_search', 'search_skills', 'list_skills', 'list_skill_spaces']],
+  ['tool-search', 'conversation', '查找工具', ['tool_search', 'ToolSearch']],
+  ['tool-call', 'conversation', '调用工具', ['DeferredToolCall']],
+  ['command-output', 'conversation', '终端输出', ['read_command_output']],
+  ['command-stop', 'conversation', '停止命令', ['stop_command']],
+  ['child-control', 'conversation', '子任务', ['native_read_child', 'native_wait_child', 'native_cancel_child', 'native_merge_child']],
+  ['child-report', 'conversation', '向主任务汇报', ['RespondToCoordinator']],
+  ['artifact-list', 'conversation', '查看产物', ['ArtifactList']],
+  ['artifact-read', 'conversation', '读取产物', ['ArtifactRead']],
+  ['artifact-search', 'conversation', '搜索产物', ['ArtifactSearch']],
+];
+const identities = new Map(groups.flatMap(([family, placement, title, names]) => names.map(name => [name, Object.freeze({ family, placement, title })])));
+const unknown = Object.freeze({ family: 'generic', placement: 'conversation', title: null });
+export function toolIdentity(name) { return identities.get(String(name ?? '')) ?? unknown; }
+export function toolConversationVisible(item) {
+  return toolIdentity(item.name).placement === 'conversation'
+    || ['failed', 'uncertain', 'interrupted', 'waiting'].includes(item.status);
+}
+export function localizedToolTitle(name, fallback, locale) {
+  return String(locale ?? '').startsWith('zh') ? toolIdentity(name).title ?? fallback : fallback;
+}

package/src/view.mjs

@@ -0,0 +1,364 @@
+import { latestSummaryLine } from './summary-playback.mjs';
+// @kingsoftcloud/agentkit-harness-ui — pure view model
+//
+// Produces a serializable element tree (React-element-shaped plain objects)
+// from reducer state, with stable `data-testid` selectors and accessibility
+// attributes. Carries the "no invented thinking or success" invariants:
+//  - a thought block exists only when the reducer created one from a non-empty
+//    provider delta; `thinking.start` alone never produces a visible item.
+//  - no token/character counts are ever rendered for thinking.
+//  - lifecycle/verification status belongs to the host controls, not an extra
+//    transcript footer; no task state synthesizes a closing status message.
+//  - tool errors are redacted and bounded; tool detail blocks are bounded and
+//    redacted and never dump large content verbatim.
+//
+// The tree holds no functions, so it is fully testable with node:test. The
+// React binding in components.mjs maps this tree to React.createElement and
+// attaches delegated event handlers on the root.
+
+import { visibleItems, isWaitingForFirstToken, planProgress, DEFAULT_LABELS } from "./project.mjs";
+import { latestNonEmptyLine, truncateText } from "./summary.mjs";
+import { renderTool } from "./renderers.mjs";
+import { activityGroups, activityGroupSummary } from './activity-groups.mjs';
+import { conversationWorkSegments, completedWorkLabel } from './work-segments.mjs';
+
+export const ELEMENT = Symbol.for("agentkit.harness-ui.element");
+
+/** @returns {boolean} */
+export function isElement(node) {
+  return node != null && typeof node === "object" && node.$$typeof === ELEMENT;
+}
+
+/**
+ * Create a plain element node. Null/false children and empty arrays are
+ * flattened out, matching JSX semantics, so conditional rendering stays terse.
+ */
+export function h(type, props, ...children) {
+  const kids = [];
+  for (const child of children) {
+    if (child == null || child === false) continue;
+    if (Array.isArray(child)) {
+      for (const c of child) {
+        if (c == null || c === false) continue;
+        kids.push(c);
+      }
+    } else kids.push(child);
+  }
+  return { $$typeof: ELEMENT, type, props: props == null ? {} : props, children: kids };
+}
+
+// ── inline SVG icons ───────────────────────────────────────────────────────
+// Reimplemented from the Lucide icon set (ISC; see NOTICE) as plain `h` nodes so
+// the function-free view tree carries real vector glyphs instead of emoji. No
+// source is copied from the Lucide package; the path data is the published
+// geometric description of each icon. Each svg is sized by CSS (`.harness-icon`).
+const SVG_ATTRS = {
+  viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2,
+  strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false",
+};
+
+/** Build an icon element from a list of shape nodes. */
+function icon(shapes, className) {
+  return h("svg", { ...SVG_ATTRS, className: `harness-icon${className ? ` ${className}` : ""}` }, ...shapes);
+}
+
+/** Brain icon — the reasoning/thought kind marker (lucide `brain`). */
+export function brainIcon(className) {
+  return icon([
+    h("path", { d: "M12 18V5" }),
+    h("path", { d: "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" }),
+    h("path", { d: "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" }),
+    h("path", { d: "M17.997 5.125a4 4 0 0 1 2.526 5.77" }),
+    h("path", { d: "M18 18a4 4 0 0 0 2-7.464" }),
+    h("path", { d: "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" }),
+    h("path", { d: "M6 18a4 4 0 0 1-2-7.464" }),
+    h("path", { d: "M6.003 5.125a4 4 0 0 0-2.526 5.77" }),
+  ], className);
+}
+
+/** Disclosure chevron (lucide `chevron-right`); rotated to point down when open. */
+export function chevronIcon(className) {
+  return icon([h("path", { d: "m9 18 6-6-6-6" })], className);
+}
+
+/** Terminal/execute kind icon (lucide `square-terminal`). */
+export function terminalIcon(className) {
+  return icon([
+    h("path", { d: "m7 11 2-2-2-2" }),
+    h("path", { d: "M11 13h4" }),
+    h("rect", { width: 18, height: 18, x: 3, y: 3, rx: 2, ry: 2 }),
+  ], className);
+}
+
+/** File-read kind icon (lucide `file-text`). */
+export function fileTextIcon(className) {
+  return icon([
+    h("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    h("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    h("path", { d: "M10 9H8" }),
+    h("path", { d: "M16 13H8" }),
+    h("path", { d: "M16 17H8" }),
+  ], className);
+}
+
+/** Search/list kind icon (lucide `search`). */
+export function searchIcon(className) {
+  return icon([
+    h("path", { d: "m21 21-4.34-4.34" }),
+    h("circle", { cx: 11, cy: 11, r: 8 }),
+  ], className);
+}
+
+/** Edit/write kind icon (lucide `pencil-line`). */
+export function pencilIcon(className) {
+  return icon([
+    h("path", { d: "M13 21h8" }),
+    h("path", { d: "m15 5 4 4" }),
+    h("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
+  ], className);
+}
+
+/** Default/unknown tool kind icon (lucide `wrench`). */
+export function wrenchIcon(className) {
+  return icon([
+    h("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" }),
+  ], className);
+}
+
+export function skillIcon(className) {
+  return icon([h('path', { d: 'm15 4 5 5M4 20l-1-1a1 1 0 0 1 0-1L16 5a2 2 0 0 1 3 3L6 21a1 1 0 0 1-1 0Z' }),
+    h('path', { d: 'M5 3v4M3 5h4M19 14v4M17 16h4' })], className);
+}
+
+export function globeIcon(className) {
+  return icon([h('circle', { cx: 12, cy: 12, r: 10 }), h('path', { d: 'M2 12h20M12 2a17 17 0 0 1 0 20 17 17 0 0 1 0-20' })], className);
+}
+
+export const DEFAULT_VIEW_OPTIONS = Object.freeze({
+  thoughtOpen: null, // Map<itemId, boolean> overrides (default: collapsed)
+  toolOpen: null, // Map<callId, boolean> overrides (default: open while running)
+  labels: DEFAULT_LABELS,
+  workspaceRoot: null,
+  following: true, // when false, a "jump to latest" button is rendered
+  ariaLabel: "Task timeline",
+  emptyState: null, // plain element to render when there is no content at all
+  summaryMaxChars: 160,
+  diffMaxLines: 200,
+});
+
+/**
+ * Build the timeline view model.
+ * @param {object} state reducer state
+ * @param {Partial<typeof DEFAULT_VIEW_OPTIONS> & { rootProps?: object }} [options]
+ */
+export function buildViewModel(state, options = {}) {
+  const opts = { ...DEFAULT_VIEW_OPTIONS, ...options };
+  // Merge labels with defaults so a host passing a partial labels object (or
+  // none) still gets the stable fallbacks; an explicit undefined from a
+  // destructure must not clobber the defaults.
+  opts.labels = { ...DEFAULT_LABELS, ...(options.labels || {}) };
+  const items = visibleItems(state);
+  const plan = planProgress(state);
+  const rootChildren = [];
+  if (plan && opts.showPlanDock !== false) rootChildren.push(planDock(plan, opts));
+  rootChildren.push(timelineList(state, items, opts));
+  return h("section", {
+    className: "harness-timeline-shell",
+    "data-testid": "harness-timeline",
+    "data-has-user-input": String(items.some(item => item.kind === 'text' && item.role === 'user')),
+    role: "log",
+    "aria-label": opts.ariaLabel,
+    "aria-busy": isWaitingForFirstToken(state) ? "true" : "false",
+    ...(opts.rootProps || {}),
+  }, ...rootChildren);
+}
+
+function timelineList(state, items, opts) {
+  const kids = [];
+  if (isWaitingForFirstToken(state)) kids.push(waitingPlaceholder(opts));
+  const segments = conversationWorkSegments(state, items);
+  for (const [index, segment] of segments.entries()) {
+    kids.push(...renderTimelineItems(segment.inputs, opts));
+    if (segment.collapsible) {
+      const open = Boolean(opts.historyOpen?.get(segment.id));
+      kids.push(h('details', { open, className: 'harness-work-history', 'data-testid': 'work-history', 'data-item-id': segment.id },
+        h('summary', { className: 'harness-work-history-summary', 'data-testid': 'work-history-toggle' },
+          h('span', {}, completedWorkLabel(state, opts.locale)), chevronIcon('harness-work-history-chevron')),
+        open ? h('div', { className: 'harness-work-items harness-work-history-content', 'data-testid': 'work-history-content' },
+          ...renderTimelineItems(segment.process, opts)) : null));
+    } else if (segment.process.length) kids.push(h('div', { className: 'harness-work-items', 'data-testid': 'work-process' },
+      ...renderTimelineItems(segment.process, opts, state.taskState === 'running'
+        && index === segments.length - 1 && segment.following.length === 0)));
+    kids.push(...renderTimelineItems(segment.following, opts));
+  }
+  if (!kids.length && opts.emptyState) kids.push(opts.emptyState);
+  if (opts.following === false) kids.push(jumpToLatest(opts));
+  return h("div", { className: "harness-timeline", "data-testid": "harness-timeline-list" }, ...kids);
+}
+
+function renderTimelineItems(items, opts, stageTailIsRunning = false, enableBrowserGrouping = true) {
+  const kids = [];
+  for (const item of activityGroups(items, { stageTailIsRunning, enableBrowserGrouping })) {
+    if (item.kind === "text") kids.push(textBlock(item, opts));
+    else if (item.kind === "thought") kids.push(thoughtBlock(item, opts));
+    else if (item.kind === "tool") kids.push(toolBlock(item, opts));
+    else if (item.kind === 'activity-group') kids.push(activityGroupBlock(item, opts));
+    else if (item.kind === 'context-marker') kids.push(contextMarker(item, opts));
+    else if (item.kind === 'tool-preview') kids.push(renderTool(item, opts));
+  }
+  return kids;
+}
+
+function activityGroupBlock(group, opts) {
+  const { title, detail } = activityGroupSummary(group, opts.locale);
+  const open = Boolean(opts.toolOpen?.get(group.id));
+  const icon = group.family === 'browser' ? globeIcon : group.family === 'terminal' ? terminalIcon : group.family === 'changes' ? pencilIcon : searchIcon;
+  return h('section', { className: 'harness-activity-group', 'data-testid': 'activity-group', 'data-item-id': group.id,
+    'data-family': group.family, 'data-streaming': String(group.active) },
+  h('details', { open, className: 'harness-activity-details', 'data-testid': 'activity-details', 'data-call-id': group.id },
+    h('summary', { className: 'harness-activity-summary', 'data-testid': 'tool-toggle' }, icon('harness-tool-kind-icon'),
+      h('span', { className: group.active ? 'harness-tool-title-streaming' : undefined }, title),
+      h('span', { 'aria-hidden': true }, '·'),
+      h('span', { 'data-testid': 'activity-counts' }, detail), chevronIcon('harness-tool-chevron')),
+    h('div', { className: 'harness-activity-children' }, group.family === 'browser'
+      ? renderTimelineItems(group.events, opts, false, false) : group.children.map(item => toolBlock(item, opts)))));
+}
+
+function contextMarker(item, opts) {
+  const fallback = { running: 'Compacting context', completed: item.origin === 'auto' ? 'Context automatically compressed' : 'Context compressed',
+    failed: 'Context compaction failed', interrupted: 'Context compaction interrupted', noop: 'Context is already up to date' };
+  const label = opts.labels['context' + item.status[0].toUpperCase() + item.status.slice(1)] || fallback[item.status];
+  return h('div', { className: 'harness-context-marker', 'data-testid': 'context-marker', 'data-item-id': item.id,
+    'data-status': item.status, role: 'status' },
+    h('span', { className: 'harness-context-rule', 'aria-hidden': true }),
+    item.status === 'running' ? null : h('svg', { viewBox: '0 0 24 24', width: 14, height: 14, fill: 'none', stroke: 'currentColor',
+      strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
+      h('rect', { x: 2, y: 3, width: 20, height: 5, rx: 1 }),
+      h('path', { d: 'M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8' }), h('path', { d: 'M10 12h4' })),
+    h('span', { className: item.status === 'running' ? 'harness-thought-label-streaming' : undefined }, label),
+    h('span', { className: 'harness-context-rule', 'aria-hidden': true }));
+}
+
+function waitingPlaceholder(opts) {
+  return h("div", {
+    className: "harness-thinking-placeholder",
+    role: "status",
+    "data-testid": "task-waiting",
+    "aria-live": "polite",
+  }, h("span", { className: "harness-shimmer" }, opts.labels.thinking));
+}
+
+function textBlock(item, opts) {
+  const streaming = Boolean(item.streaming);
+  const text = item.text || "";
+  return h("div", {
+    className: item.role === "user" ? "harness-user-message" : "harness-text",
+    "data-role": item.role || "assistant",
+    "data-testid": "text-block",
+    "data-item-id": item.id,
+    "data-streaming": streaming ? "true" : "false",
+  }, h("span", { className: "harness-text-content" }, text));
+}
+
+function thoughtBlock(item, opts) {
+  const streaming = Boolean(item.streaming);
+  const userOpen = opts.thoughtOpen ? Boolean(opts.thoughtOpen.get(item.id)) : null;
+  // Desktop thought semantics (reasoning.tsx, defaultOpen=false): a thought is
+  // collapsed by default, even while streaming. While streaming and collapsed
+  // it shows a live latest-line summary; the user opens it to read the full
+  // reasoning. When streaming ends the binding auto-collapses it again UNLESS
+  // the user opened it themselves — see data-auto-collapse-key below.
+  const open = userOpen != null ? userOpen : false;
+  const text = item.text || "";
+  const hasText = text.trim().length > 0;
+  const label = thoughtLabel(item, opts);
+  const summaryKids = [
+    brainIcon("harness-thought-icon"),
+    h("span", {
+      className: streaming ? "harness-thought-label harness-thought-label-streaming" : "harness-thought-label",
+      role: streaming ? "status" : undefined,
+      "data-testid": "thought-label",
+    }, label),
+  ];
+  // Collapsed streaming thought shows the latest non-empty line as a live,
+  // horizontally-scrolling summary (matches the desktop reasoning trigger). The
+  // binding pins the trailing edge and applies a fade mask when it overflows.
+  if (!open && streaming && hasText) {
+    summaryKids.push(h("span", {
+      className: "harness-thought-preview",
+      "data-testid": "thought-preview",
+      "data-reasoning-streaming-line": "true",
+      "data-line-key": latestSummaryLine(text).key,
+      "data-line-text": latestSummaryLine(text).text,
+      "data-reasoning-streaming-mask": "none",
+      "aria-live": "polite",
+    }, h("span", {
+      className: "harness-thought-preview-text",
+      "data-reasoning-streaming-text": "true",
+    }, latestSummaryLine(text).text)));
+  }
+  // Disclosure chevron (hidden until hover when collapsed, rotated when open).
+  summaryKids.push(chevronIcon("harness-thought-chevron"));
+  const body = (open && hasText)
+    ? [h("div", {
+        className: "harness-thought-body",
+        "data-testid": "thought-body",
+        "data-streaming": streaming ? "true" : "false",
+        "data-following": "true",
+        "data-reasoning-scroll-mask": "none",
+      }, text)]
+    : [];
+  return h("section", {
+    className: "harness-thought",
+    "data-testid": "thought-block",
+    "data-item-id": item.id,
+    "data-streaming": streaming ? "true" : "false",
+    "data-auto-collapse-key": streaming ? `streaming:${item.id}` : `done:${item.id}`,
+  }, h("details", {
+    open,
+    className: "harness-thought-details",
+    "data-testid": "thought-details",
+    "data-item-id": item.id,
+    "aria-expanded": open,
+  }, h("summary", { className: "harness-thought-summary", "data-testid": "thought-toggle" }, ...summaryKids), ...body));
+}
+
+function thoughtLabel(item, opts) {
+  const l = opts.labels || {};
+  if (item.streaming) return l.thinking || "Thinking…";
+  // Host-supplied real duration only; never invented. No duration ⇒ bare label.
+  if (item.duration != null) return `${l.thought || "Thought"} · ${item.duration}s`;
+  return l.thought || "Thought";
+}
+
+function toolBlock(item, opts) {
+  // Dispatch to the renderer registry (execute / read / edit / default). Each
+  // renderer owns its summary, body, and host-action data attributes; this
+  // function is now a thin seam so the view stays a single projection.
+  return renderTool(item, opts);
+}
+
+function planDock(plan, opts) {
+  const kids = [
+    h("span", { className: "harness-plan-count", "data-testid": "plan-count" }, `${plan.completed}/${plan.total}`),
+    h("span", { className: "harness-plan-label", "data-testid": "plan-label" }, opts.labels.plan || "Plan"),
+  ];
+  if (plan.inProgress) kids.push(h("span", {
+    className: "harness-plan-current",
+    "data-testid": "plan-current",
+  }, truncateText(plan.inProgress.content || "", { maxLines: 1, maxChars: opts.summaryMaxChars })));
+  return h("section", {
+    className: "harness-plan-dock",
+    "data-testid": "plan-dock",
+    "aria-label": "Task plan",
+  }, ...kids);
+}
+
+function jumpToLatest(opts) {
+  return h("button", {
+    type: "button",
+    className: "harness-jump-latest",
+    "data-testid": "jump-latest",
+    "data-action": "jump-latest",
+  }, opts.labels.jumpLatest || "Jump to latest");
+}