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

package/src/styles.mjs

@@ -0,0 +1,278 @@
+// @kingsoftcloud/agentkit-harness-ui — styles
+//
+// A single CSS string exported for hosts that want the built-in look. It uses
+// only the stable class names produced by the view model and adapts to light
+// and dark color schemes via `prefers-color-scheme`. Hosts can omit it
+// (styleSheet={null}) and own styling entirely, or pass their own string.
+
+export const styles = `
+.harness-timeline-shell {
+  --harness-fg: currentColor;
+  --harness-fg-muted: color-mix(in srgb, currentColor 60%, transparent);
+  --harness-bg: transparent;
+  --harness-border: color-mix(in srgb, currentColor 14%, transparent);
+  --harness-running: #0969da;
+  --harness-error: #cf222e;
+  --harness-added: #1a7f37;
+  --harness-removed: #cf222e;
+  --harness-thought: color-mix(in srgb, currentColor 40%, transparent);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: var(--ui-font-size, 14px);
+  color: var(--harness-fg);
+  background: transparent;
+  border: 0;
+  overflow: visible;
+  box-sizing: border-box;
+  padding-block: 0 20px;
+  container: harness-process / inline-size;
+}
+.harness-timeline-shell[data-has-user-input="true"] { padding-block-start: 56px; }
+@media (prefers-color-scheme: dark) {
+  .harness-timeline-shell {
+    --harness-running: #4493f8;
+    --harness-error: #ff7b72;
+    --harness-added: #4ac26b;
+    --harness-removed: #ff7b72;
+    --harness-thought: color-mix(in srgb, currentColor 30%, transparent);
+  }
+}
+.harness-timeline-shell[data-theme="dark"] { --harness-running: #4493f8; --harness-error: #ff7b72; --harness-added: #4ac26b; --harness-removed: #ff7b72; --harness-thought: color-mix(in srgb, currentColor 30%, transparent); }
+.harness-timeline-shell[data-theme="light"] { --harness-running: #0969da; --harness-error: #cf222e; --harness-added: #1a7f37; --harness-removed: #cf222e; --harness-thought: color-mix(in srgb, currentColor 40%, transparent); }
+.harness-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--harness-section-gap, 20px);
+  padding: 0;
+}
+.harness-plan-dock {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--harness-border);
+  font-size: 0.85rem;
+}
+.harness-plan-count { font-weight: 600; }
+.harness-plan-label { color: var(--harness-fg-muted); }
+.harness-plan-current { color: var(--harness-running); }
+.harness-thinking-placeholder { color: var(--harness-fg-muted); padding: 4px 2px; }
+.harness-shimmer {
+  background: linear-gradient(90deg, var(--harness-fg-muted), var(--harness-fg), var(--harness-fg-muted));
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: harness-shimmer 1.4s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .harness-shimmer { animation: none; color: var(--harness-fg-muted); }
+}
+@keyframes harness-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+.harness-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
+.harness-thought, .harness-tool {
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+.harness-thought-details, .harness-tool-details { margin: 0; }
+.harness-thought-summary, .harness-tool-summary {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.harness-thought-summary::-webkit-details-marker, .harness-tool-summary::-webkit-details-marker { display: none; }
+/* Inline SVG icons (Lucide, ISC — see NOTICE) are sized by font-size so they
+   sit on the text baseline; stroke is currentColor so they inherit the line
+   color and dim with the muted/failure tokens. */
+.harness-icon { width: 16px; height: 16px; display: inline-block; flex: 0 0 auto; vertical-align: -0.15em; }
+.harness-tool-kind-icon, .harness-file-icon { color: var(--harness-fg-muted); }
+.harness-thought-icon { color: var(--harness-thought); }
+.harness-tool-chevron, .harness-thought-chevron {
+  color: var(--harness-fg-muted); flex: 0 0 auto; transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  opacity: 0;
+}
+.harness-tool-summary:hover .harness-tool-chevron,
+.harness-thought-summary:hover .harness-thought-chevron { opacity: 1; }
+.harness-tool-details[open] .harness-tool-chevron,
+.harness-thought-details[open] .harness-thought-chevron { transform: rotate(90deg); opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .harness-tool-chevron, .harness-thought-chevron { transition: none; }
+}
+.harness-thought-label { color: var(--harness-thought); font-weight: 500; flex-shrink: 0; white-space: nowrap; }
+.harness-thought-preview { color: var(--harness-fg-muted); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
+.harness-thought-body { margin: 12px 0 0 8px; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; padding-left: 14px; border-left: 1px solid var(--harness-border); color: var(--harness-thought); }
+.harness-thought-label-streaming { color: var(--harness-running); }
+.harness-thought-preview {
+  color: var(--harness-fg-muted); font-style: normal; overflow: hidden; white-space: nowrap;
+  text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; max-width: 60ch;
+}
+.harness-thought-preview-text { display: inline-block; min-width: 100%; }
+.harness-tool-title { font-weight: 500; color: var(--harness-fg-muted); flex-shrink: 0; white-space: nowrap; }
+/* Running tool kind/title takes the streaming gradient text (matches the
+   desktop ToolLayout running kindLabel); reduced-motion falls back to the
+   running color without the sweep. */
+.harness-tool-title-streaming {
+  background: linear-gradient(90deg, var(--harness-fg-muted), var(--harness-running), var(--harness-fg-muted));
+  background-size: 200% 100%;
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  animation: harness-shimmer 1.4s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .harness-tool-title-streaming { animation: none; color: var(--harness-running); }
+}
+.harness-search-primary, .harness-tool-primary { color: var(--harness-fg); font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.harness-tool-command-summary {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem;
+  color: var(--harness-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  max-width: 50ch;
+}
+.harness-tool-secondary { font-size: 0.8rem; color: var(--harness-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
+.harness-tool-status { font-size: 0.8rem; color: var(--harness-fg-muted); text-transform: lowercase; }
+.harness-tool-status-running { color: var(--harness-running); }
+.harness-tool-status-failed { color: var(--harness-error); }
+.harness-tool-status-completed { display: none; }
+.harness-tool-details-static > summary { cursor: default; list-style: none; }
+.harness-tool-details-static > summary::-webkit-details-marker { display: none; }
+.harness-tool-action {
+  border: 1px solid var(--harness-border); background: transparent; color: var(--harness-fg-muted);
+  border-radius: 6px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer;
+}
+.harness-tool-action:hover { border-color: var(--harness-running); color: var(--harness-running); }
+.harness-inspect-action { padding: 1px 6px; }
+.harness-copy-action { font-family: ui-sans-serif, system-ui, sans-serif; }
+.harness-tool-detail { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
+.harness-tool-detail-line { display: flex; gap: 6px; }
+.harness-tool-detail-line dt { color: var(--harness-fg-muted); min-width: 8ch; }
+.harness-tool-detail-line dd { margin: 0; word-break: break-all; }
+.harness-tool-progress { color: var(--harness-running); font-size: 0.85rem; }
+.harness-tool-error { color: var(--harness-error); font-size: 0.85rem; }
+.harness-tool-error-inline { font-weight: 600; }
+.harness-tool-result { margin-top: 6px; }
+.harness-tool-result > summary { cursor: pointer; color: var(--harness-fg-muted); font-size: 0.8rem; }
+
+/* ── execute / terminal ─────────────────────────────────────────────── */
+.harness-execute-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
+.harness-execute-command { min-width: 0; }
+.harness-execute-command-row { display: flex; align-items: flex-start; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.harness-execute-prompt { color: var(--harness-fg-muted); flex: 0 0 auto; }
+.harness-execute-command-text {
+  margin: 0; min-width: 0; flex: 1 1 auto; white-space: pre-wrap; overflow-wrap: anywhere;
+  font-size: inherit; line-height: 20px;
+}
+.harness-command-viewport { max-height: 3lh; overflow: hidden; line-height: 20px; }
+.harness-command-viewport[data-expanded="true"] { max-height: 10lh; overflow-y: auto; }
+.harness-command-toggle { border: 0; padding: 4px 0 0; margin-left: 2ch; background: transparent; color: var(--harness-fg-muted); font: inherit; font-size: 12px; cursor: pointer; }
+.harness-execute-command-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
+.harness-execute-output-block { display: flex; flex-direction: column; gap: 4px; }
+.harness-execute-output {
+  margin: 0; min-width: 0; max-height: 5lh; overflow: auto; padding: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: inherit;
+  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 20px; color: var(--harness-fg-muted);
+}
+.harness-execute-stdout { background: transparent; }
+.harness-execute-stderr { color: var(--harness-error); background: color-mix(in srgb, var(--harness-error) 8%, transparent); }
+.harness-execute-no-output { color: var(--harness-fg-muted); font-size: 0.8rem; margin: 0; }
+.harness-execute-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.75rem; }
+.harness-execute-exit { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border-radius: 4px; }
+.harness-execute-exit-ok { color: var(--harness-added); background: color-mix(in srgb, var(--harness-added) 12%, transparent); }
+.harness-execute-exit-err { color: var(--harness-error); background: color-mix(in srgb, var(--harness-error) 12%, transparent); }
+.harness-execute-cwd { color: var(--harness-fg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+/* ── file chips (read / edit) ───────────────────────────────────────── */
+.harness-edit-chips { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; min-width: 0; }
+.harness-edit-chip-wrap { display: inline-flex; min-width: 0; align-items: center; }
+.harness-edit-chip-sep { color: var(--harness-fg-muted); margin: 0 2px; }
+.harness-file-chip {
+  display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 4px;
+  color: var(--harness-fg-muted); background: transparent; border: 0; cursor: pointer; padding: 0;
+}
+.harness-file-chip:hover { color: var(--harness-running); text-decoration: underline; }
+.harness-file-chip-static { cursor: default; }
+.harness-file-chip-static:hover { color: var(--harness-fg-muted); text-decoration: none; }
+.harness-file-icon { font-size: 0.85rem; }
+.harness-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.harness-read-path { font-size: 0.78rem; }
+
+/* ── diff count + inline diff (edit) ─────────────────────────────────── */
+.harness-diff-count { display: inline-flex; gap: 4px; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
+.harness-diff-added { color: var(--harness-added); }
+.harness-diff-removed { color: var(--harness-removed); }
+.harness-edit-diff { margin-top: 6px; border-top: 1px solid var(--harness-border); padding-top: 6px; }
+.harness-diff-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.harness-diff-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--harness-fg); word-break: break-all; }
+.harness-diff-actions { display: inline-flex; gap: 6px; margin-left: auto; }
+.harness-diff-view { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
+.harness-diff-line { display: grid; grid-template-columns: 3ch 3ch 1.5ch 1fr; white-space: pre; }
+.harness-diff-gutter { color: var(--harness-fg-muted); text-align: right; padding-right: 4px; user-select: none; opacity: 0.7; }
+.harness-diff-marker { text-align: center; user-select: none; opacity: 0.7; }
+.harness-diff-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.harness-diff-line:hover .harness-diff-text { overflow: visible; text-overflow: clip; }
+.harness-diff-added > .harness-diff-text, .harness-diff-added { color: var(--harness-added); background: color-mix(in srgb, var(--harness-added) 10%, transparent); }
+.harness-diff-removed > .harness-diff-text, .harness-diff-removed { color: var(--harness-removed); background: color-mix(in srgb, var(--harness-removed) 10%, transparent); }
+.harness-diff-truncated { color: var(--harness-fg-muted); padding: 2px 0; }
+
+/* Split view: default hidden on narrow viewports, shown alongside unified on wide. */
+.harness-diff-split { display: none; }
+.harness-diff-split-col { min-width: 0; overflow: auto; }
+@container harness-process (min-width: 720px) {
+  .harness-timeline-shell.wide-diff .harness-diff-unified,
+  .harness-timeline-shell:has(.harness-diff-split) .harness-diff-unified { display: none; }
+  .harness-diff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
+  .harness-diff-split-col { border: 1px solid var(--harness-border); }
+}
+
+.harness-jump-latest {
+  align-self: center; border: 1px solid var(--harness-border); background: var(--harness-bg);
+  color: var(--harness-fg); border-radius: 999px; padding: 4px 12px; cursor: pointer;
+}
+.harness-jump-latest:hover { border-color: var(--harness-running); color: var(--harness-running); }
+
+.harness-user-message { margin: 0 0 0 auto; padding: .8rem 1rem; max-width: 85%; border-radius: 14px; background: color-mix(in srgb, currentColor 7%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; }
+
+.harness-summary-roll { position: relative; display: inline-grid; vertical-align: middle; overflow: hidden; }
+.harness-summary-roll > span { grid-area: 1 / 1; white-space: nowrap; }
+.harness-summary-in { animation: harness-summary-in 300ms cubic-bezier(.4,0,.2,1) both; }
+.harness-summary-out { position: absolute; left: 0; top: 0; animation: harness-summary-out 300ms cubic-bezier(.4,0,.2,1) both; }
+@keyframes harness-summary-in { from { transform: translateY(.8em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes harness-summary-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-.8em); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .harness-summary-in, .harness-summary-out { position: absolute; left: 0; top: 0; animation: none; } }
+
+.harness-context-marker { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--harness-fg-muted); font-size: var(--ui-font-size, 14px); }
+.harness-context-rule { height: 1px; min-width: 24px; flex: 1; background: var(--harness-border); opacity: .5; }
+.harness-context-marker > svg { flex-shrink: 0; }
+
+button.harness-tool-summary { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; max-width: 100%; }
+.harness-agent-name { display: inline-flex; align-items: center; flex-shrink: 0; max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; line-height: 1.5; }
+.harness-agent-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--harness-fg-muted); }
+.harness-agent-separator { flex: 0 0 auto; color: var(--harness-fg-muted); }
+.harness-agent-name[data-color="blue"] { color: #0369a1; } .harness-agent-name[data-color="cyan"] { color: #0e7490; }
+.harness-agent-name[data-color="green"] { color: #047857; } .harness-agent-name[data-color="orange"] { color: #c2410c; }
+.harness-agent-name[data-color="pink"] { color: #be185d; } .harness-agent-name[data-color="purple"] { color: #6d28d9; }
+.harness-agent-name[data-color="red"] { color: #be123c; } .harness-agent-name[data-color="yellow"] { color: #b45309; }
+[data-theme="dark"] .harness-agent-name[data-color="blue"] { color: #7dd3fc; } [data-theme="dark"] .harness-agent-name[data-color="cyan"] { color: #67e8f9; }
+[data-theme="dark"] .harness-agent-name[data-color="green"] { color: #6ee7b7; } [data-theme="dark"] .harness-agent-name[data-color="orange"] { color: #fdba74; }
+[data-theme="dark"] .harness-agent-name[data-color="pink"] { color: #f9a8d4; } [data-theme="dark"] .harness-agent-name[data-color="purple"] { color: #c4b5fd; }
+[data-theme="dark"] .harness-agent-name[data-color="red"] { color: #fda4af; } [data-theme="dark"] .harness-agent-name[data-color="yellow"] { color: #fcd34d; }
+
+.harness-subagent-pane { padding: 16px; height: 100%; min-height: 0; overflow: auto; }
+.harness-subagent-window-notice { font-size: 12px; color: var(--harness-fg-muted, #888); }
+.harness-work-items { display: flex; flex-direction: column; gap: var(--harness-work-gap, 16px); }
+.harness-work-history { margin: 0; }
+.harness-work-history-summary { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--harness-border); color: var(--harness-fg-muted); cursor: pointer; list-style: none; }
+.harness-work-history-summary::-webkit-details-marker { display: none; }
+.harness-work-history-chevron { opacity: .7; }
+.harness-work-history[open] > summary .harness-work-history-chevron { transform: rotate(90deg); }
+.harness-work-history-content { padding-top: var(--harness-section-gap, 20px); }
+.harness-activity-summary { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; color: var(--harness-fg-muted); list-style: none; }
+.harness-activity-summary::-webkit-details-marker { display: none; }
+.harness-activity-summary > svg { flex-shrink: 0; }
+.harness-activity-summary .harness-tool-chevron { opacity: 0; }
+.harness-activity-summary:hover .harness-tool-chevron, .harness-activity-summary:focus-visible .harness-tool-chevron { opacity: 1; }
+.harness-activity-details[open] > summary .harness-tool-chevron { transform: rotate(90deg); opacity: 1; }
+.harness-activity-children { border-left: 1px solid var(--harness-border); margin: 8px 0 8px 7px; padding-left: 16px; display: flex; flex-direction: column; gap: 8px; }
+`;

package/src/summary-playback.mjs

@@ -0,0 +1,39 @@
+// Presentation scheduling for provider-supplied lines. Never generates text.
+export const SUMMARY_ROLL_TRANSITION_MS = 300;
+export const SUMMARY_ROLL_TOTAL_MS = 800;
+export function latestSummaryLine(text) {
+  const lines = String(text ?? '').replace(/\r\n?/g, '\n').split('\n');
+  for (let i = lines.length - 1; i >= 0; i--) if (lines[i].trim()) return { key: String(i), text: lines[i].trim() };
+  return { key: '0', text: '' };
+}
+export function createSummaryPlayback(initial, publish, clock = {
+  now: () => performance.now(), set: (fn, ms) => setTimeout(fn, ms), clear: id => clearTimeout(id),
+}) {
+  let current = initial, queue = [], timer = null, disposed = false;
+  const clear = () => { if (timer !== null) clock.clear(timer); timer = null; };
+  const promote = next => {
+    const previous = current; current = next; publish({ current, previous, animate: true });
+    const expected = clock.now() + SUMMARY_ROLL_TOTAL_MS;
+    timer = clock.set(() => {
+      timer = null;
+      if (disposed) return;
+      if (clock.now() - expected > 250 && queue.length > 1) queue = queue.slice(-1);
+      const next = queue.shift(); if (next) promote(next);
+    }, SUMMARY_ROLL_TOTAL_MS);
+  };
+  return {
+    update(next, animate = true) {
+      if (disposed) return;
+      if (!animate) { clear(); queue = []; current = next; publish({ current, previous: null, animate: false }); return; }
+      if (current.key === next.key) {
+        if (current.text !== next.text) { current = next; publish({ current, animate: false, refresh: true }); }
+        return;
+      }
+      if (timer === null && queue.length === 0) { promote(next); return; }
+      const index = queue.findIndex(item => item.key === next.key);
+      if (index >= 0) queue[index] = next;
+      else queue = queue.length === 0 ? [next] : [queue[0], next];
+    },
+    dispose() { disposed = true; clear(); queue = []; },
+  };
+}

package/src/summary.mjs

@@ -0,0 +1,160 @@
+// @kingsoftcloud/agentkit-harness-ui — bounded text helpers
+//
+// Pure, deterministic text utilities. No timers, no DOM. The animation timing
+// from the reference LiveThinking/LatestSummaryLine stays in the React layer;
+// this module owns the line-selection and truncation policy that the layer
+// consumes, so the meaningful behavior is testable without a clock.
+
+/** Keys whose values are redacted from any bounded preview. */
+export const SENSITIVE_KEYS = Object.freeze(new Set([
+  "token", "tokens", "secret", "password", "passwd", "api_key", "apikey",
+  "authorization", "auth", "cookie", "session", "private_key", "key",
+]));
+
+/**
+ * Latest non-empty, trimmed line of a streaming text. Used as the collapsed
+ * preview of a thought while it streams, so the user sees progress without the
+ * full reasoning being forced into view. Returns "" for blank text.
+ * @param {string} text
+ * @returns {string}
+ */
+export function latestNonEmptyLine(text) {
+  const value = text == null ? "" : String(text);
+  const lines = value.split("\n");
+  for (let i = lines.length - 1; i >= 0; i -= 1) {
+    const line = lines[i].trim();
+    if (line) return line;
+  }
+  return "";
+}
+
+/**
+ * Bounded truncation. Keeps at most `maxLines` lines and at most `maxChars`
+ * characters per line, appending a single `…` truncation marker when anything
+ * is dropped. Never dumps large content verbatim.
+ * @param {string} text
+ * @param {{maxLines?: number, maxChars?: number}} [opts]
+ * @returns {string}
+ */
+export function truncateText(text, opts = {}) {
+  const maxLines = opts.maxLines && opts.maxLines > 0 ? Math.floor(opts.maxLines) : 0;
+  const maxChars = opts.maxChars && opts.maxChars > 0 ? Math.floor(opts.maxChars) : 0;
+  const value = text == null ? "" : String(text);
+  if (!value) return "";
+  const lines = value.split("\n");
+  let truncated = false;
+  const kept = [];
+  for (const line of lines) {
+    if (maxLines && kept.length >= maxLines) { truncated = true; break; }
+    if (maxChars && line.length > maxChars) {
+      kept.push(line.slice(0, Math.max(0, maxChars - 1)) + "…");
+      truncated = true;
+    } else {
+      kept.push(line);
+    }
+  }
+  if (truncated && !kept.some(l => l.endsWith("…"))) kept.push("…");
+  return kept.join("\n");
+}
+
+/**
+ * Redact a value when its key looks sensitive. Returns the original value for
+ * safe keys. For `env`/environment maps, keeps the names being set/unset but
+ * drops the values, matching the tool-detail-block safety contract.
+ * @param {string} key
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+export function redactValue(key, value) {
+  const lower = String(key == null ? "" : key).toLowerCase();
+  if (SENSITIVE_KEYS.has(lower)) return "[redacted]";
+  if (lower === "env" && value && typeof value === "object" && !Array.isArray(value)) {
+    const names = Object.keys(/** @type {Record<string, unknown>} */ (value));
+    return Object.fromEntries(names.map(name => [name, "[redacted]"]));
+  }
+  return value;
+}
+
+/**
+ * Produce a bounded object preview for unknown/MCP tools or fallback display.
+ * Redacts sensitive keys, truncates long string values, and keeps at most
+ * `maxLines` rows so a single detail block stays small.
+ * @param {Record<string, unknown>} input
+ * @param {{maxLines?: number, maxChars?: number}} [opts]
+ * @returns {{key: string, value: string}[]}
+ */
+export function boundedDetailLines(input, opts = {}) {
+  const maxLines = opts.maxLines && opts.maxLines > 0 ? Math.floor(opts.maxLines) : 4;
+  const maxChars = opts.maxChars && opts.maxChars > 0 ? Math.floor(opts.maxChars) : 80;
+  if (!input || typeof input !== "object" || Array.isArray(input)) return [];
+  const rows = [];
+  for (const [key, raw] of Object.entries(input)) {
+    if (rows.length >= maxLines) { rows.push({ key: "…", value: "" }); break; }
+    const value = redactValue(key, raw);
+    rows.push({ key, value: previewValue(value, maxChars) });
+  }
+  return rows;
+}
+
+function previewValue(value, maxChars) {
+  if (value == null) return String(value);
+  if (typeof value === "string") return truncateText(value, { maxLines: 1, maxChars });
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  try {
+    return truncateText(JSON.stringify(value), { maxLines: 1, maxChars });
+  } catch {
+    return truncateText(String(value), { maxLines: 1, maxChars });
+  }
+}
+
+/**
+ * Deterministic summary-line queue. Mirrors the reference LatestSummaryLine
+ * policy: refresh the current line in place when the newest non-empty line is
+ * the same line (grew in place), otherwise queue at most two new lines and
+ * promote the oldest queued line to active. This is a pure state machine over
+ * the observed text history; the component owns the animation timers.
+ */
+export class SummaryQueue {
+  constructor() {
+    this.active = { key: 0, text: "" };
+    this.pending = [];
+  }
+
+  /**
+   * @param {string} text the full streamed text so far
+   * @returns {{active: {key:number, text:string}, outgoing: {key:number, text:string}|null}}
+   */
+  push(text) {
+    const next = latestNonEmptyLine(text);
+    if (next.key === "" && text === "") return { active: this.active, outgoing: null };
+    const key = lineKey(text, next);
+    if (key === this.active.key) {
+      this.active = { key, text: next };
+      return { active: this.active, outgoing: null };
+    }
+    const existing = this.pending.findIndex(line => line.key === key);
+    if (existing >= 0) this.pending[existing] = { key, text: next };
+    else this.pending = this.pending.length >= 2 ? [this.pending[1], { key, text: next }] : [...this.pending, { key, text: next }];
+    const outgoing = this.active;
+    const promoted = this.pending.shift();
+    if (promoted) this.active = promoted;
+    return { active: this.active, outgoing };
+  }
+
+  /** Replace state without producing a transition (reduced-motion / completion). */
+  setLatest(text) {
+    const next = latestNonEmptyLine(text);
+    this.active = { key: lineKey(text, next), text: next };
+    this.pending = [];
+    return { active: this.active, outgoing: null };
+  }
+}
+
+function lineKey(fullText, line) {
+  // Stable key: the index of the latest non-empty line within the full text.
+  const lines = String(fullText).split("\n");
+  for (let i = lines.length - 1; i >= 0; i -= 1) {
+    if (lines[i].trim() === line) return i;
+  }
+  return 0;
+}

package/src/terminal.mjs

@@ -0,0 +1,157 @@
+// @kingsoftcloud/agentkit-harness-ui — terminal command/output helpers
+//
+// Pure extraction and sanitization for the terminal (execute) renderer. The
+// command is derived from the host-supplied tool input across the common
+// shapes (string, argv array, object with command/cmd/script/parsed_cmd);
+// the output is derived from the `tool.result` display payload or the result
+// body. ANSI escape sequences are stripped to plain text for the inline
+// bounded preview — the preview NEVER uses innerHTML, so control sequences
+// cannot inject markup. A host that wants a live PTY renders it through the
+// `onOpenTerminal` callback, which is the only path to a real terminal.
+//
+// No invented success: a command with input but no result/exit renders as
+// running, never as completed. Exit code and cwd are shown only when the host
+// supplied them in the display payload.
+
+const SHELL_PREFIX_RE = /^(?:\/bin\/|\/usr\/bin\/)?(?:zsh|bash|sh)\s+-lc\s+/i;
+
+/**
+ * Extract the shell command string from a tool input across common shapes.
+ * Strips a leading `zsh/bash/sh -lc ` invocation wrapper. Returns "" when no
+ * command can be recovered.
+ * @param {unknown} input
+ * @returns {string}
+ */
+export function extractCommand(input) {
+  const fromString = (s) => {
+    const trimmed = String(s == null ? "" : s).trim();
+    if (!trimmed) return "";
+    return trimmed.replace(SHELL_PREFIX_RE, "").trim();
+  };
+  if (typeof input === "string") return fromString(input);
+  if (Array.isArray(input) && input.every(i => typeof i === "string")) {
+    const parts = input.map(i => i.trim()).filter(Boolean);
+    if (!parts.length) return "";
+    const lc = parts.findIndex(p => p === "-lc");
+    if (lc >= 0 && parts[lc + 1]) return parts[lc + 1];
+    // argv with a leading shell binary: drop the binary, join the rest.
+    if (/^(?:\/bin\/|\/usr\/bin\/)?(?:zsh|bash|sh)$/i.test(parts[0])) return parts.slice(1).join(" ");
+    return parts.join(" ");
+  }
+  if (input && typeof input === "object" && !Array.isArray(input)) {
+    const rec = /** @type {Record<string, unknown>} */ (input);
+    for (const key of ["command", "cmd", "script"]) {
+      if (typeof rec[key] === "string") return fromString(rec[key]);
+    }
+    const parsed = rec.parsed_cmd;
+    if (Array.isArray(parsed)) {
+      for (const item of parsed) {
+        if (typeof item === "string") {
+          const c = fromString(item);
+          if (c) return c;
+          continue;
+        }
+        if (item && typeof item === "object") {
+          const r = /** @type {Record<string, unknown>} */ (item);
+          for (const key of ["cmd", "command", "script"]) {
+            if (typeof r[key] === "string") {
+              const c = fromString(r[key]);
+              if (c) return c;
+            }
+          }
+        }
+      }
+    }
+  }
+  return "";
+}
+
+/**
+ * Extract output text from a tool result body or display payload. The display
+ * payload (host-supplied `command_output`) is authoritative; the result body
+ * is a fallback for hosts that only emit a raw result.
+ * @param {unknown} result
+ * @param {Record<string, unknown>} [display]
+ * @returns {{stdout: string, stderr: string, exit: number|null, cwd: string}}
+ */
+export function extractOutput(result, display) {
+  const disp = isPlainRecord(display) ? display : {};
+  const stdout = pickString(disp, ["stdout", "output", "fullText", "text", "content", "result"])
+    ?? extractResultText(result);
+  const stderr = pickString(disp, ["stderr", "error", "errorMessage"]) ?? "";
+  const exit = parseExit(disp.exit ?? disp.exitCode ?? disp.code ?? disp.returncode);
+  const cwd = normalizeCwd(typeof disp.cwd === "string" ? disp.cwd : "");
+  return { stdout: sanitizeAnsi(String(stdout || "")), stderr: sanitizeAnsi(String(stderr || "")), exit, cwd };
+}
+
+/**
+ * Strip ANSI CSI/SGR and other control sequences to plain text. The inline
+ * preview renders this as text content (never innerHTML), so escape sequences
+ * cannot inject markup. Keeps newlines and tabs; drops bells and other C0
+ * controls that would only noisify a bounded preview.
+ * @param {string} text
+ * @returns {string}
+ */
+export function sanitizeAnsi(text) {
+  const value = String(text == null ? "" : text);
+  if (!value) return "";
+  return value
+    // CSI sequences: ESC [ ... letter  (SGR colors, cursor moves, erases, etc.)
+    .replace(/\x1b\[[0-9;?]*[ -/]*[@-~]/g, "")
+    // OSC sequences: ESC ] ... BEL or ST (title set, hyperlinks, etc.)
+    .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, "")
+    // Other two-char ESC sequences (M-, etc.)
+    .replace(/\x1b[=>78]/g, "")
+    // Stray ESC and BEL, vertical tab / form feed, other C0 controls except
+    // tab (\t, 0x09), LF (\n, 0x0a), CR (\r, 0x0d).
+    .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, "");
+}
+
+/** Normalize a cwd string: trim and drop a single trailing slash. */
+export function normalizeCwd(cwd) {
+  const value = String(cwd == null ? "" : cwd).trim();
+  if (!value) return "";
+  return value.length > 1 && value.endsWith("/") ? value.slice(0, -1) : value;
+}
+
+function parseExit(value) {
+  if (value == null || value === "") return null;
+  const n = Number(value);
+  return Number.isFinite(n) ? Math.trunc(n) : null;
+}
+
+function isPlainRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function pickString(rec, keys) {
+  for (const key of keys) {
+    const v = rec[key];
+    if (typeof v === "string" && v.trim()) return v;
+  }
+  return null;
+}
+
+function extractResultText(output) {
+  if (output == null) return "";
+  if (typeof output === "string") return output.trim() ? output : "";
+  if (typeof output === "number" || typeof output === "boolean" || typeof output === "bigint") return String(output);
+  if (Array.isArray(output)) {
+    return output.map(extractResultText).filter(t => t).join("\n");
+  }
+  if (isPlainRecord(output)) {
+    const direct = pickString(output, ["output", "text", "content", "result", "stdout", "message"]);
+    if (direct) return direct;
+    if (isPlainRecord(output.rawOutput)) {
+      const nested = extractResultText(output.rawOutput);
+      if (nested) return nested;
+    }
+    if (Array.isArray(output.content)) {
+      const joined = output.content
+        .map(item => typeof item === "string" ? item.trim() : isPlainRecord(item) ? pickString(item, ["output", "text", "content", "result", "stdout", "message"]) ?? "" : "")
+        .filter(Boolean).join("\n");
+      if (joined) return joined;
+    }
+  }
+  return "";
+}