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

package/markdown/source/table.css

@@ -0,0 +1,487 @@
+/* @kingsoftcloud/agentkit-harness-ui/markdown — table layer stylesheet.
+ *
+ * Ported from the reference Markdown table component:
+ * Tailwind utility classes are converted item-by-item to scoped CSS keyed on
+ * the ks-md-table-* classes emitted by table-factory.mjs. Table rules live
+ * under .ks-markdown so the shared theme tokens resolve; the portaled preview
+ * dialog renders into document.body (outside .ks-markdown) and therefore
+ * carries its own token set with explicit light/dark + prefers-color-scheme.
+ * No Tailwind dependency is introduced. */
+
+/* ── table-specific tokens (extend the .ks-markdown palette) ──────────────── */
+
+.ks-markdown {
+  --ks-fg-subtlest: #6e7681;
+  --ks-row-hover: rgba(175, 184, 193, 0.2);
+}
+.ks-markdown.ks-theme-dark {
+  --ks-fg-subtlest: #7d8590;
+  --ks-row-hover: rgba(177, 186, 196, 0.12);
+}
+@media (prefers-color-scheme: dark) {
+  .ks-markdown:not(.ks-theme-light) {
+    --ks-fg-subtlest: #7d8590;
+    --ks-row-hover: rgba(177, 186, 196, 0.12);
+  }
+}
+
+/* ── root: my-0 flex min-w-0 flex-col gap-2 ───────────────────────────────── */
+
+.ks-markdown .ks-md-table-root {
+  margin-top: 0;
+  margin-bottom: 0;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* ── toolbar: flex items-center justify-end gap-1 ─────────────────────────── */
+
+.ks-markdown .ks-md-table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+/* ── ghost icon button (Button variant=ghost size=icon-md) ────────────────── */
+
+.ks-markdown .ks-md-table-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ks-fg-muted);
+  cursor: pointer;
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+.ks-markdown .ks-md-table-btn:hover {
+  background: var(--ks-bg-soft);
+  color: var(--ks-fg);
+}
+.ks-markdown .ks-md-table-btn:focus-visible {
+  outline: 2px solid var(--ks-link);
+  outline-offset: 1px;
+}
+.ks-markdown .ks-md-table-btn[aria-pressed="true"] {
+  color: var(--ks-fg);
+  background: var(--ks-bg-soft);
+}
+
+/* ── tooltip via data-tip (replaces ControlHintTooltip) ───────────────────── */
+
+.ks-markdown .ks-md-table-btn[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 6px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--ks-fg);
+  color: var(--ks-bg);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease-out;
+  z-index: 30;
+}
+.ks-markdown .ks-md-table-btn:hover[data-tip]::after,
+.ks-markdown .ks-md-table-btn:focus-visible[data-tip]::after {
+  opacity: 1;
+}
+
+/* ── inline status region (replaces toast; never claims success on error) ── */
+
+.ks-markdown .ks-md-table-status {
+  margin-left: 4px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  line-height: 1.4;
+}
+.ks-markdown .ks-md-table-status-success {
+  color: var(--ks-copied);
+  background: var(--ks-bg-soft);
+}
+.ks-markdown .ks-md-table-status-error {
+  color: #cf222e;
+  background: rgba(248, 81, 73, 0.12);
+}
+.ks-markdown.ks-theme-dark .ks-md-table-status-error {
+  color: #f85149;
+  background: rgba(248, 81, 73, 0.16);
+}
+@media (prefers-color-scheme: dark) {
+  .ks-markdown:not(.ks-theme-light) .ks-md-table-status-error {
+    color: #f85149;
+    background: rgba(248, 81, 73, 0.16);
+  }
+}
+
+/* ── frame: group/markdown-table-frame relative w-full ───────────────────── */
+
+.ks-markdown .ks-md-table-frame {
+  position: relative;
+  width: 100%;
+}
+
+/* ── width container: min-w-full w-max + transition when not borrowing left ── */
+
+.ks-markdown .ks-md-table-width {
+  min-width: 100%;
+  width: max-content;
+}
+.ks-markdown .ks-md-table-width-transition {
+  transition: max-width 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ks-markdown .ks-md-table-width-transition {
+    transition: none;
+  }
+}
+
+/* ── viewport wrap: relative w-full overflow-hidden rounded-xl border ─────── */
+
+.ks-markdown .ks-md-table-viewport-wrap {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid var(--ks-border);
+}
+
+/* ── scroll viewport: !scrollbar-hide w-full overflow-x-auto overflow-y-visible */
+
+.ks-markdown .ks-md-table-scroll {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.ks-markdown .ks-md-table-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* ── table: w-max min-w-full border-separate border-spacing-0 text-ui-base ── */
+
+.ks-markdown .ks-md-table {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.9375em;
+}
+
+.ks-markdown .ks-md-table-thead,
+.ks-markdown .ks-md-table-tbody {
+  /* upstream attaches no classes; hooks reserved on the class for diagnostics */
+}
+
+/* ── tr: transition-colors last:[&>td]:border-b-0 hover:bg-hover/20 ──────── */
+
+.ks-markdown .ks-md-table-tr {
+  transition: background-color 120ms ease-out;
+}
+.ks-markdown .ks-md-table-tr:hover {
+  background: var(--ks-row-hover);
+}
+.ks-markdown .ks-md-table-tr:last-child > .ks-md-table-td {
+  border-bottom: 0;
+}
+
+/* ── th: border-b px-3 py-2 text-left font-normal text-foreground-subtlest
+ *       min-w-16 max-w-md whitespace-normal break-words ───────────────────── */
+
+.ks-markdown .ks-md-table-th {
+  border-bottom: 1px solid var(--ks-border);
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 400;
+  color: var(--ks-fg-subtlest);
+  vertical-align: top;
+  min-width: 64px;
+  max-width: 448px;
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+/* ── td: border-b px-3 py-2 text-foreground align-top
+ *       min-w-16 max-w-md whitespace-normal break-words ───────────────────── */
+
+.ks-markdown .ks-md-table-td {
+  border-bottom: 1px solid var(--ks-border);
+  padding: 8px 12px;
+  color: var(--ks-fg);
+  vertical-align: top;
+  min-width: 64px;
+  max-width: 448px;
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+/* ── edge shadow: pointer-events-none absolute inset-y-0 z-10 w-6 + sides ── */
+
+.ks-markdown .ks-md-table-edge-shadow {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  width: 24px;
+}
+.ks-markdown .ks-md-table-edge-shadow[data-side="left"] {
+  left: 0;
+  border-radius: 12px 0 0 12px;
+  box-shadow: inset 12px 0 12px -12px color-mix(in srgb, black 15%, transparent);
+}
+.ks-markdown .ks-md-table-edge-shadow[data-side="right"] {
+  right: 0;
+  border-radius: 0 12px 12px 0;
+  box-shadow: inset -12px 0 12px -12px color-mix(in srgb, black 15%, transparent);
+}
+
+/* ── virtual scrollbar wrapper: pointer-events-none py-1 opacity-0
+ *    transition-[width,opacity] + visible/hidden + sticky; frame-hover reveals */
+
+.ks-markdown .ks-md-table-vbar {
+  pointer-events: none;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  opacity: 0;
+  transition: width 200ms ease-out, opacity 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ks-markdown .ks-md-table-vbar {
+    transition: none;
+  }
+}
+.ks-markdown .ks-md-table-vbar-hidden {
+  visibility: hidden;
+}
+.ks-markdown .ks-md-table-vbar-visible {
+  visibility: visible;
+}
+.ks-markdown .ks-md-table-frame:hover .ks-md-table-vbar-visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+.ks-markdown .ks-md-table-vbar-sticky {
+  position: relative;
+  z-index: 20;
+}
+
+/* ── virtual track: mt-1 h-3.5 w-full touch-none rounded-full bg-foreground/3 ── */
+
+.ks-markdown .ks-md-table-vtrack {
+  margin-top: 4px;
+  height: 14px;
+  width: 100%;
+  touch-action: none;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--ks-fg) 3%, transparent);
+}
+
+/* ── virtual thumb: h-3 rounded-full bg-foreground/20 hover:bg-foreground/40 ── */
+
+.ks-markdown .ks-md-table-vthumb {
+  height: 12px;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--ks-fg) 20%, transparent);
+  transition: background-color 120ms ease-out;
+  cursor: grab;
+}
+.ks-markdown .ks-md-table-vthumb:hover {
+  background: color-mix(in srgb, var(--ks-fg) 40%, transparent);
+}
+.ks-markdown .ks-md-table-vthumb:active {
+  cursor: grabbing;
+}
+
+/* ── preview dialog (portaled to document.body — own token set) ──────────── */
+
+.ks-md-table-dialog-overlay {
+  --ks-dlg-bg: #ffffff;
+  --ks-dlg-fg: #1f2328;
+  --ks-dlg-fg-muted: #59636e;
+  --ks-dlg-border: #d0d7de;
+  --ks-dlg-th-bg: #f6f8fa;
+  --ks-dlg-row-hover: rgba(175, 184, 193, 0.2);
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: color-mix(in srgb, black 40%, transparent);
+}
+.ks-md-table-dialog-overlay.ks-theme-dark {
+  --ks-dlg-bg: #0d1117;
+  --ks-dlg-fg: #e6edf3;
+  --ks-dlg-fg-muted: #9198a1;
+  --ks-dlg-border: #30363d;
+  --ks-dlg-th-bg: #161b22;
+  --ks-dlg-row-hover: rgba(177, 186, 196, 0.12);
+}
+@media (prefers-color-scheme: dark) {
+  .ks-md-table-dialog-overlay:not(.ks-theme-light) {
+    --ks-dlg-bg: #0d1117;
+    --ks-dlg-fg: #e6edf3;
+    --ks-dlg-fg-muted: #9198a1;
+    --ks-dlg-border: #30363d;
+    --ks-dlg-th-bg: #161b22;
+    --ks-dlg-row-hover: rgba(177, 186, 196, 0.12);
+  }
+}
+
+/* Dialog content: flex max-h-[calc(100vh-2rem)] w-max max-w-[calc(100vw-2rem)]
+ * flex-col gap-3 overflow-hidden rounded-2xl p-4 + sm/md/lg breakpoints. */
+.ks-md-table-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: calc(100vh - 2rem);
+  width: max-content;
+  max-width: calc(100vw - 2rem);
+  overflow: hidden;
+  border-radius: 16px;
+  padding: 16px;
+  background: var(--ks-dlg-bg);
+  border: 1px solid var(--ks-dlg-border);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+@media (min-width: 640px) {
+  .ks-md-table-dialog {
+    max-height: calc(100vh - 8rem);
+    max-width: calc(100vw - 8rem);
+  }
+}
+@media (min-width: 768px) {
+  .ks-md-table-dialog {
+    min-width: 640px;
+  }
+}
+@media (min-width: 1024px) {
+  .ks-md-table-dialog {
+    min-width: 720px;
+  }
+}
+
+/* Dialog header: pr-8 (room for the close button). */
+.ks-md-table-dialog-header {
+  position: relative;
+  padding-right: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ks-md-table-dialog-title {
+  margin: 0;
+  font-size: 1.125em;
+  font-weight: 600;
+  color: var(--ks-dlg-fg);
+}
+.ks-md-table-dialog-desc {
+  margin: 0;
+  font-size: 0.8125em;
+  color: var(--ks-dlg-fg-muted);
+}
+.ks-md-table-dialog-close {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+}
+.ks-md-table-dialog-scroll {
+  min-height: 0;
+  overflow: auto;
+  border-radius: 12px;
+  border: 1px solid var(--ks-dlg-border);
+  background: var(--ks-dlg-bg);
+}
+
+/* The dialog's close button is outside .ks-markdown, so it needs its own rule. */
+.ks-md-table-dialog .ks-md-table-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ks-dlg-fg-muted);
+  cursor: pointer;
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+.ks-md-table-dialog .ks-md-table-btn:hover {
+  background: color-mix(in srgb, var(--ks-dlg-fg) 8%, transparent);
+  color: var(--ks-dlg-fg);
+}
+.ks-md-table-dialog .ks-md-table-btn:focus-visible {
+  outline: 2px solid var(--ks-dlg-fg-muted);
+  outline-offset: 1px;
+}
+
+/* Preview table: same base as the main table + [&_th]:sticky top-0 z-10
+ * bg-background. Scoped to .ks-md-table-preview (only the preview table has it)
+ * and under the dialog (outside .ks-markdown). */
+.ks-md-table-dialog .ks-md-table-preview {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.9375em;
+}
+.ks-md-table-dialog .ks-md-table-preview .ks-md-table-tr {
+  transition: background-color 120ms ease-out;
+}
+.ks-md-table-dialog .ks-md-table-preview .ks-md-table-tr:hover {
+  background: var(--ks-dlg-row-hover);
+}
+.ks-md-table-dialog .ks-md-table-preview .ks-md-table-tr:last-child > .ks-md-table-td {
+  border-bottom: 0;
+}
+.ks-md-table-dialog .ks-md-table-preview .ks-md-table-th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--ks-dlg-th-bg);
+  color: var(--ks-dlg-fg-muted);
+  font-weight: 400;
+  text-align: left;
+  vertical-align: top;
+  padding: 8px 12px;
+  min-width: 64px;
+  max-width: 448px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  border-bottom: 1px solid var(--ks-dlg-border);
+}
+.ks-md-table-dialog .ks-md-table-preview .ks-md-table-td {
+  color: var(--ks-dlg-fg);
+  vertical-align: top;
+  text-align: left;
+  padding: 8px 12px;
+  min-width: 64px;
+  max-width: 448px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  border-bottom: 1px solid var(--ks-dlg-border);
+}

package/package.json

@@ -1,6 +1,98 @@
 {
   "name": "@kingsoftcloud/agentkit-harness-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "description": "Reusable React task-process UI for AgentKit Native: an explicitly versioned event protocol, a pure state reducer, and an accessible timeline. No Studio/DSH/Python imports; React is a peer dependency.",
+  "exports": {
+    ".": "./src/index.mjs",
+    "./protocol": "./src/protocol.mjs",
+    "./reducer": "./src/reducer.mjs",
+    "./project": "./src/project.mjs",
+    "./tool-detail": "./src/tool-detail.mjs",
+    "./summary": "./src/summary.mjs",
+    "./diff": "./src/diff.mjs",
+    "./terminal": "./src/terminal.mjs",
+    "./renderers": "./src/renderers.mjs",
+    "./view": "./src/view.mjs",
+    "./components": "./src/components.mjs",
+    "./styles": "./src/styles.mjs",
+    "./react-binding": "./src/react-binding.mjs",
+    "./input-preview": "./src/input-preview.mjs",
+    "./inspector": "./src/inspector.mjs",
+    "./markdown": "./markdown/dist/markdown.mjs",
+    "./context-status": "./src/context-status.mjs",
+    "./status-panel": "./src/status-panel.mjs",
+    "./command-output": "./src/command-output.mjs",
+    "./file-preview": "./src/file-preview.mjs",
+    "./host/state/native-status-panel": "./src/host/state/native-status-panel.mjs",
+    "./host/state/native-child-observation": "./src/host/state/native-child-observation.mjs",
+    "./host/state/native-outcome": "./src/host/state/native-outcome.mjs",
+    "./host/state/task-links": "./src/host/state/task-links.mjs",
+    "./host/state/native-children": "./src/host/state/native-children.mjs",
+    "./host/state/native-recovery": "./src/host/state/native-recovery.mjs",
+    "./host/state/native-session-stop": "./src/host/state/native-session-stop.mjs",
+    "./host/task-timeline": "./src/host/task-timeline.mjs",
+    "./host/session-task-events": "./src/host/session-task-events.mjs",
+    "./host/native-command-pane": "./src/host/native-command-pane.mjs",
+    "./host/native-child-pane": "./src/host/native-child-pane.mjs",
+    "./host/native-child-file-pane": "./src/host/native-child-file-pane.mjs",
+    "./host/native-run-panel": "./src/host/native-run-panel.mjs",
+    "./host/native-a2a": "./src/host/native-a2a.mjs",
+    "./host/state/native-a2a": "./src/host/state/native-a2a.mjs",
+    "./host/state/native-task-read-model": "./src/host/state/native-task-read-model.mjs"
+  },
+  "files": [
+    "src",
+    "LICENSE",
+    "NOTICE",
+    "README.md",
+    "markdown/source",
+    "markdown/build",
+    "markdown/dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs",
+    "build": "node markdown/build/build-markdown.cjs"
+  },
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=22"
+  },
+  "devDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "streamdown": "2.5.0",
+    "@streamdown/cjk": "1.0.3",
+    "@shikijs/core": "4.0.2",
+    "@shikijs/langs": "4.0.2",
+    "@shikijs/themes": "4.0.2",
+    "@shikijs/engine-javascript": "4.0.2",
+    "esbuild": "0.27.7",
+    "typescript": "6.0.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kingsoftcloud/ksadk-harness.git"
+  },
+  "homepage": "https://github.com/kingsoftcloud/ksadk-harness#readme",
+  "bugs": {
+    "url": "https://github.com/kingsoftcloud/ksadk-harness/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/activity-groups.mjs

@@ -0,0 +1,74 @@
+import { toolIdentity } from './tool-identity.mjs';
+import { isExploreToolCall, isExecuteToolCall, isShellToolCallAwaitingCommand } from './explore-tool-call.mjs';
+import { extractCommand } from './terminal.mjs';
+import { browserResponseGroups } from './browser-response-groups.mjs';
+
+const changes = new Set(['edit', 'write', 'delete']);
+function family(item, enableChangesGrouping) {
+  if (!['tool', 'tool-preview'].includes(item.kind) || item.child) return null;
+  const call = { kind: item.name, input: item.input };
+  return isExploreToolCall(call) ? 'explore' : isExecuteToolCall(call) ? 'terminal'
+    : enableChangesGrouping && changes.has(toolIdentity(item.name).family) ? 'changes' : null;
+}
+
+/** Match ZCode's Explore summary buckets; this is display, not a file-read receipt. */
+function explorationBucket(item) {
+  const kind = toolIdentity(item.name).family;
+  if (kind === 'web-fetch') return 'web-fetch';
+  if (['search', 'web-search'].includes(kind)) return 'search';
+  if (kind === 'list') return 'list';
+  const command = extractCommand(item.input).toLowerCase();
+  if (/(^|\s)(rg|grep|ripgrep|git\s+grep)(\s|$)/i.test(command)) return 'search';
+  if (/(^|\s)(ls|find|tree|dir)(\s|$)/i.test(command)) return 'list';
+  return 'file';
+}
+
+function awaitingCommand(item) {
+  return (item.kind === 'tool' && ['scheduled', 'running'].includes(item.status)
+      || item.kind === 'tool-preview' && item.streaming)
+    && isShellToolCallAwaitingCommand({kind: item.name, input: item.input});
+}
+
+/** A group represents a visible work stage, not a tool execution. Like ZCode's
+ * buildAssistantWorkRenderItems, only the true tail of a running segment keeps
+ * its parent active between model calls. Child outcomes remain independent.
+ * Narrative, visible reasoning, context markers and child tasks are boundaries.
+ */
+export function activityGroups(items, { stageTailIsRunning = false, enableChangesGrouping = false, enableBrowserGrouping = true } = {}) {
+  // A Shell input draft without a command is transparent to stage boundaries.
+  // Filter before counting/tail detection; keep the original event state intact.
+  items = items.filter(item => !awaitingCommand(item));
+  if (enableBrowserGrouping) items = browserResponseGroups(items, { stageTailIsRunning });
+  const result = [];
+  for (let index = 0; index < items.length;) {
+    const first = items[index++], group = family(first, enableChangesGrouping), children = [first];
+    if (group) while (index < items.length && family(items[index], enableChangesGrouping) === group) children.push(items[index++]);
+    if (children.length === 1) { result.push(first); continue; }
+    const counts = {};
+    for (const item of children) {
+      const kind = group === 'explore' ? explorationBucket(item) : toolIdentity(item.name).family;
+      counts[kind] = (counts[kind] ?? 0) + 1;
+    }
+    result.push({ kind: 'activity-group', id: `activity:${group}:${first.callId ?? first.id}`, family: group, children, counts,
+      active: stageTailIsRunning && index === items.length,
+      failed: children.filter(item => item.status === 'failed').length,
+      uncertain: children.filter(item => ['uncertain', 'interrupted', 'waiting'].includes(item.status)).length });
+  }
+  return result;
+}
+
+export function activityGroupSummary(group, locale) {
+  const zh = String(locale ?? '').startsWith('zh');
+  const units = zh ? { 'web-fetch': '次网页抓取', search: '搜索', list: '列表', file: '文件' }
+    : { 'web-fetch': 'fetch', search: 'search', list: 'list', file: 'file' };
+  const title = (zh ? { explore: '查阅', terminal: '终端', changes: '更改', browser: '浏览器' }
+    : { explore: 'Explore', terminal: 'Terminal', changes: 'Changes', browser: 'Browser' })[group.family];
+  const parts = group.family === 'explore'
+    ? Object.entries(units).filter(([key]) => group.counts[key])
+      .map(([key, unit]) => `${group.counts[key]} ${unit}${!zh && group.counts[key] !== 1 ? key === 'search' || key === 'web-fetch' ? 'es' : 's' : ''}`)
+    : [`${group.children.length} ${group.family === 'terminal' ? zh ? '个命令' : 'commands'
+      : group.family === 'browser' ? zh ? '次调用' : 'calls' : zh ? '次文件操作' : 'file operations'}`];
+  if (group.failed) parts.push(`${group.failed} ${zh ? '失败' : 'failed'}`);
+  if (group.uncertain) parts.push(`${group.uncertain} ${zh ? '待核对' : 'unconfirmed'}`);
+  return { title, detail: parts.join(', ') };
+}